From 8ed4593f730304ea041c06c221d88940173c99b7 Mon Sep 17 00:00:00 2001
From: Angelooooo <91385982+lalds@users.noreply.github.com>
Date: Thu, 19 Feb 2026 14:37:30 +0300
Subject: [PATCH] =?UTF-8?q?Refactor=20Gemini=20model=20display:=20filter?=
 =?UTF-8?q?=20old=20versions,=20group=20low/high=20p=D0=BAo,=20and=20impro?=
 =?UTF-8?q?ve=20naming=20(#114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor Gemini model display: filter old versions, group low/high pro, and improve naming

* Fix potential negative minutes and refine Gemini 3 Pro grouping logic based on PR feedback

* The account change process has been sped up

* Address PR review: enhance error message and parameterize polling interval in process handler

* Address PR review: fix potential race condition in database backup logic

* fix: prevent renderer white screen and harden sentry gating

* feat:  localize model labels

* chore: enable hoisted node-linker

* chore: ignore .agent/.claude/.codex in prettier

---------

Co-authored-by: Draculabo <a1842298680@gmail.com>
---
 .agent/skills/openspec-apply-change/SKILL.md  |    7 +-
 .../skills/openspec-archive-change/SKILL.md   |    6 +-
 .../openspec-bulk-archive-change/SKILL.md     |   60 +-
 .../skills/openspec-continue-change/SKILL.md  |   15 +-
 .agent/skills/openspec-explore/SKILL.md       |   29 +-
 .agent/skills/openspec-ff-change/SKILL.md     |   51 +-
 .agent/skills/openspec-new-change/SKILL.md    |   13 +-
 .agent/skills/openspec-onboard/SKILL.md       |   32 +-
 .agent/skills/openspec-sync-specs/SKILL.md    |   46 +-
 .agent/skills/openspec-verify-change/SKILL.md |    9 +-
 .agent/skills/ui-ux-pro-max/SKILL.md          |  121 +-
 .../vercel-composition-patterns/AGENTS.md     |  217 ++-
 .../vercel-composition-patterns/SKILL.md      |    3 +-
 .../rules/architecture-avoid-boolean-props.md |   16 +-
 .../rules/architecture-compound-components.md |   22 +-
 .../patterns-children-over-render-props.md    |   21 +-
 .../rules/patterns-explicit-variants.md       |   14 +-
 .../rules/react19-no-forwardref.md            |   10 +-
 .../rules/state-context-interface.md          |   52 +-
 .../rules/state-decouple-implementation.md    |   46 +-
 .../rules/state-lift-state.md                 |   36 +-
 .../vercel-react-best-practices/AGENTS.md     | 1255 ++++++++---------
 .../vercel-react-best-practices/SKILL.md      |   24 +-
 .../rules/advanced-event-handler-refs.md      |   30 +-
 .../rules/advanced-init-once.md               |   18 +-
 .../rules/advanced-use-latest.md              |   18 +-
 .../rules/async-api-routes.md                 |   21 +-
 .../rules/async-defer-await.md                |   52 +-
 .../rules/async-dependencies.md               |   33 +-
 .../rules/async-parallel.md                   |   12 +-
 .../rules/async-suspense-boundaries.md        |   26 +-
 .../rules/bundle-barrel-imports.md            |   22 +-
 .../rules/bundle-conditional.md               |   20 +-
 .../rules/bundle-defer-third-party.md         |   15 +-
 .../rules/bundle-dynamic-imports.md           |   15 +-
 .../rules/bundle-preload.md                   |   20 +-
 .../rules/client-event-listeners.md           |   46 +-
 .../rules/client-localstorage-schema.md       |   33 +-
 .../rules/client-passive-event-listeners.md   |   40 +-
 .../rules/client-swr-dedup.md                 |   22 +-
 .../rules/js-batch-dom-css.md                 |   75 +-
 .../rules/js-cache-function-results.md        |   16 +-
 .../rules/js-cache-property-access.md         |    8 +-
 .../rules/js-cache-storage.md                 |   28 +-
 .../rules/js-combine-iterations.md            |   18 +-
 .../rules/js-early-exit.md                    |   24 +-
 .../rules/js-hoist-regexp.md                  |    6 +-
 .../rules/js-index-maps.md                    |   14 +-
 .../rules/js-length-check-first.md            |   13 +-
 .../rules/js-min-max-loop.md                  |   52 +-
 .../rules/js-tosorted-immutable.md            |    2 +-
 .../rules/rendering-activity.md               |    4 +-
 .../rules/rendering-animate-svg-wrapper.md    |   17 +-
 .../rules/rendering-conditional-render.md     |   12 +-
 .../rules/rendering-content-visibility.md     |    6 +-
 .../rules/rendering-hoist-jsx.md              |   18 +-
 .../rules/rendering-hydration-no-flicker.md   |   34 +-
 .../rendering-hydration-suppress-warning.md   |   10 +-
 .../rules/rendering-usetransition-loading.md  |   42 +-
 .../rules/rerender-defer-reads.md             |   20 +-
 .../rules/rerender-dependencies.md            |   18 +-
 .../rules/rerender-derived-state-no-effect.md |   20 +-
 .../rules/rerender-derived-state.md           |   10 +-
 .../rules/rerender-functional-setstate.md     |   41 +-
 .../rules/rerender-lazy-state-init.md         |   34 +-
 .../rules/rerender-memo-with-default-value.md |    2 -
 .../rules/rerender-memo.md                    |   20 +-
 .../rules/rerender-move-effect-to-event.md    |   20 +-
 .../rerender-simple-expression-in-memo.md     |   10 +-
 .../rules/rerender-transitions.md             |   24 +-
 .../rerender-use-ref-transient-values.md      |   32 +-
 .../rules/server-after-nonblocking.md         |   42 +-
 .../rules/server-auth-actions.md              |   62 +-
 .../rules/server-cache-lru.md                 |   16 +-
 .../rules/server-cache-react.md               |   34 +-
 .../rules/server-dedup-props.md               |    6 +-
 .../rules/server-parallel-fetching.md         |   30 +-
 .../rules/server-serialization.md             |   16 +-
 .agent/skills/web-design-guidelines/SKILL.md  |    3 +-
 .agent/workflows/opsx-apply.md                |    3 +
 .agent/workflows/opsx-archive.md              |    2 +
 .agent/workflows/opsx-bulk-archive.md         |   56 +-
 .agent/workflows/opsx-continue.md             |   11 +-
 .agent/workflows/opsx-explore.md              |   22 +-
 .agent/workflows/opsx-ff.md                   |   47 +-
 .agent/workflows/opsx-new.md                  |    9 +
 .agent/workflows/opsx-onboard.md              |   28 +-
 .agent/workflows/opsx-sync.md                 |   42 +-
 .agent/workflows/opsx-verify.md               |    5 +-
 .claude/commands/opsx/apply.md                |    5 +-
 .claude/commands/opsx/archive.md              |    4 +-
 .claude/commands/opsx/bulk-archive.md         |   58 +-
 .claude/commands/opsx/continue.md             |   13 +-
 .claude/commands/opsx/explore.md              |   26 +-
 .claude/commands/opsx/ff.md                   |   49 +-
 .claude/commands/opsx/new.md                  |   11 +-
 .claude/commands/opsx/onboard.md              |   30 +-
 .claude/commands/opsx/sync.md                 |   44 +-
 .claude/commands/opsx/verify.md               |    7 +-
 .claude/skills/openspec-apply-change/SKILL.md |    7 +-
 .../skills/openspec-archive-change/SKILL.md   |    6 +-
 .../openspec-bulk-archive-change/SKILL.md     |   60 +-
 .../skills/openspec-continue-change/SKILL.md  |   15 +-
 .claude/skills/openspec-explore/SKILL.md      |   29 +-
 .claude/skills/openspec-ff-change/SKILL.md    |   51 +-
 .claude/skills/openspec-new-change/SKILL.md   |   13 +-
 .claude/skills/openspec-onboard/SKILL.md      |   32 +-
 .claude/skills/openspec-sync-specs/SKILL.md   |   46 +-
 .../skills/openspec-verify-change/SKILL.md    |    9 +-
 .codex/prompts/opsx-apply.md                  |    3 +
 .codex/prompts/opsx-archive.md                |    2 +
 .codex/prompts/opsx-bulk-archive.md           |   56 +-
 .codex/prompts/opsx-continue.md               |   11 +-
 .codex/prompts/opsx-explore.md                |   22 +-
 .codex/prompts/opsx-ff.md                     |   47 +-
 .codex/prompts/opsx-new.md                    |    9 +
 .codex/prompts/opsx-onboard.md                |   28 +-
 .codex/prompts/opsx-sync.md                   |   42 +-
 .codex/prompts/opsx-verify.md                 |    5 +-
 .codex/skills/openspec-apply-change/SKILL.md  |    7 +-
 .../skills/openspec-archive-change/SKILL.md   |    6 +-
 .../openspec-bulk-archive-change/SKILL.md     |   60 +-
 .../skills/openspec-continue-change/SKILL.md  |   15 +-
 .codex/skills/openspec-explore/SKILL.md       |   29 +-
 .codex/skills/openspec-ff-change/SKILL.md     |   51 +-
 .codex/skills/openspec-new-change/SKILL.md    |   13 +-
 .codex/skills/openspec-onboard/SKILL.md       |   32 +-
 .codex/skills/openspec-sync-specs/SKILL.md    |   46 +-
 .codex/skills/openspec-verify-change/SKILL.md |    9 +-
 .codex/skills/ui-ux-pro-max/SKILL.md          |  121 +-
 .npmrc                                        |    4 +-
 .prettierignore                               |    3 +
 AGENTS.md                                     |    1 -
 package-lock.json                             |   11 -
 src/actions/cloud.ts                          |   15 +-
 src/components/CloudAccountCard.tsx           |  212 +--
 src/ipc/cloud/handler.ts                      |   57 +-
 src/ipc/cloud/router.ts                       |    5 +-
 src/ipc/device/handler.ts                     |   45 +-
 src/ipc/process/handler.ts                    |    9 +-
 src/ipc/switchFlow.ts                         |   14 +-
 src/lib/antigravity/ModelMapping.ts           |   49 +-
 src/lib/antigravity/QuotaService.ts           |    8 +-
 src/localization/i18n.ts                      |    9 +
 src/main.ts                                   |   37 +-
 src/preload.ts                                |    2 +-
 src/renderer.ts                               |   19 +-
 src/routes/index.tsx                          |    8 +-
 src/server/modules/proxy/gemini.controller.ts |   17 +-
 src/server/modules/proxy/proxy.controller.ts  |   22 +-
 src/server/modules/proxy/proxy.guard.ts       |    6 +-
 src/styles/global.css                         |   74 +-
 .../scripts/project-id-request-validation.ts  |   12 +-
 src/tests/unit/account.test.ts                |    5 +-
 src/tests/unit/cloudHandler-sync.test.ts      |    1 -
 src/tests/unit/protobuf-unified.test.ts       |    6 +-
 src/tests/unit/proxy-parity-fixtures.test.ts  |    6 +-
 src/types/cloudAccount.ts                     |    7 +-
 src/utils/protobuf.ts                         |    4 +-
 vite.main.config.mts                          |   25 +-
 vite.preload.config.mts                       |   25 +-
 vite.renderer.config.mts                      |   43 +-
 162 files changed, 2981 insertions(+), 2541 deletions(-)

diff --git a/.agent/skills/openspec-apply-change/SKILL.md b/.agent/skills/openspec-apply-change/SKILL.md
index 47d4bc2..147e629 100644
--- a/.agent/skills/openspec-apply-change/SKILL.md
+++ b/.agent/skills/openspec-apply-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Implement tasks from an OpenSpec change.
@@ -25,9 +25,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -139,6 +141,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.agent/skills/openspec-archive-change/SKILL.md b/.agent/skills/openspec-archive-change/SKILL.md
index 8fa4b23..95a800a 100644
--- a/.agent/skills/openspec-archive-change/SKILL.md
+++ b/.agent/skills/openspec-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive a completed change in the experimental workflow.
@@ -68,6 +68,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -105,6 +106,7 @@ All artifacts complete. All tasks complete.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.agent/skills/openspec-bulk-archive-change/SKILL.md b/.agent/skills/openspec-bulk-archive-change/SKILL.md
index 719b279..03e3237 100644
--- a/.agent/skills/openspec-bulk-archive-change/SKILL.md
+++ b/.agent/skills/openspec-bulk-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive multiple completed changes in a single operation.
@@ -37,16 +37,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -66,18 +66,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -93,12 +93,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -107,7 +109,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -121,20 +122,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -157,6 +159,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -165,6 +168,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -180,6 +184,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -233,6 +238,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.agent/skills/openspec-continue-change/SKILL.md b/.agent/skills/openspec-continue-change/SKILL.md
index 5060b2f..0825819 100644
--- a/.agent/skills/openspec-continue-change/SKILL.md
+++ b/.agent/skills/openspec-continue-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Continue working on a change by creating the next artifact.
@@ -30,9 +30,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -40,7 +42,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -48,7 +50,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change or archive it."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -71,7 +73,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -85,6 +87,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -98,6 +101,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -107,6 +111,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.agent/skills/openspec-explore/SKILL.md b/.agent/skills/openspec-explore/SKILL.md
index 8ed4a76..13dff42 100644
--- a/.agent/skills/openspec-explore/SKILL.md
+++ b/.agent/skills/openspec-explore/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
@@ -33,24 +33,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -69,6 +73,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -82,11 +87,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -115,14 +122,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
@@ -147,6 +154,7 @@ If the user mentions a change or you detect one is relevant:
 ## Handling Different Entry Points
 
 **User brings a vague idea:**
+
 ```
 User: I'm thinking about adding real-time collaboration
 
@@ -170,6 +178,7 @@ You: Real-time collab is a big space. Let me think about this...
 ```
 
 **User brings a specific problem:**
+
 ```
 User: The auth system is a mess
 
@@ -201,6 +210,7 @@ You: [reads codebase]
 ```
 
 **User is stuck mid-implementation:**
+
 ```
 User: /opsx:explore add-auth-system
       The OAuth integration is more complex than expected
@@ -218,6 +228,7 @@ You: [reads change artifacts]
 ```
 
 **User wants to compare options:**
+
 ```
 User: Should we use Postgres or SQLite?
 
diff --git a/.agent/skills/openspec-ff-change/SKILL.md b/.agent/skills/openspec-ff-change/SKILL.md
index d586012..5c9bfd0 100644
--- a/.agent/skills/openspec-ff-change/SKILL.md
+++ b/.agent/skills/openspec-ff-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Fast-forward through artifact creation - generate everything needed to start implementation in one go.
@@ -18,6 +18,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -25,15 +26,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -45,30 +50,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -78,6 +83,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -94,6 +100,7 @@ After completing all artifacts, summarize:
   - These guide what you write, but should never appear in the output
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.agent/skills/openspec-new-change/SKILL.md b/.agent/skills/openspec-new-change/SKILL.md
index 37ac7ba..fd3ad14 100644
--- a/.agent/skills/openspec-new-change/SKILL.md
+++ b/.agent/skills/openspec-new-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Start a new change using the experimental artifact-driven approach.
@@ -18,6 +18,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -35,24 +36,30 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema (e.g., `proposal` for spec-driven).
    Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -60,6 +67,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -67,6 +75,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Just describe what this change is about and I'll draft it, or ask me to continue."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.agent/skills/openspec-onboard/SKILL.md b/.agent/skills/openspec-onboard/SKILL.md
index 4a03038..b830062 100644
--- a/.agent/skills/openspec-onboard/SKILL.md
+++ b/.agent/skills/openspec-onboard/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.
@@ -22,6 +22,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -66,6 +67,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -101,6 +103,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -133,6 +136,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -158,6 +162,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -167,21 +172,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -192,6 +201,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -236,9 +246,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -252,6 +264,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -261,6 +274,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -296,6 +310,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -341,6 +356,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -379,6 +395,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -413,6 +430,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -422,11 +440,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.agent/skills/openspec-sync-specs/SKILL.md b/.agent/skills/openspec-sync-specs/SKILL.md
index 4c7e3aa..5154438 100644
--- a/.agent/skills/openspec-sync-specs/SKILL.md
+++ b/.agent/skills/openspec-sync-specs/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Sync delta specs from a change to main specs.
@@ -47,28 +47,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -82,16 +82,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -108,8 +112,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -131,6 +136,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.agent/skills/openspec-verify-change/SKILL.md b/.agent/skills/openspec-verify-change/SKILL.md
index 443ac5f..90fc30f 100644
--- a/.agent/skills/openspec-verify-change/SKILL.md
+++ b/.agent/skills/openspec-verify-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Verify that an implementation matches the change artifacts (specs, tasks, design).
@@ -26,9 +26,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -110,6 +112,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -122,7 +125,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -161,6 +163,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.agent/skills/ui-ux-pro-max/SKILL.md b/.agent/skills/ui-ux-pro-max/SKILL.md
index 72ac2c3..22032ab 100644
--- a/.agent/skills/ui-ux-pro-max/SKILL.md
+++ b/.agent/skills/ui-ux-pro-max/SKILL.md
@@ -2,6 +2,7 @@
 name: ui-ux-pro-max
 description: UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks.
 ---
+
 # ui-ux-pro-max
 
 Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
@@ -17,16 +18,19 @@ python3 --version || python --version
 If Python is not installed, install it based on user's OS:
 
 **macOS:**
+
 ```bash
 brew install python3
 ```
 
 **Ubuntu/Debian:**
+
 ```bash
 sudo apt update && sudo apt install python3
 ```
 
 **Windows:**
+
 ```powershell
 winget install Python.Python.3.12
 ```
@@ -40,6 +44,7 @@ When user requests UI/UX work (design, build, create, implement, review, fix, im
 ### Step 1: Analyze User Requirements
 
 Extract key information from user request:
+
 - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
 - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
 - **Industry**: healthcare, fintech, gaming, education, etc.
@@ -54,12 +59,14 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywo
 ```
 
 This command:
+
 1. Searches 5 domains in parallel (product, style, color, landing, typography)
 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
 3. Returns complete design system: pattern, style, colors, typography, effects
 4. Includes anti-patterns to avoid
 
 **Example:**
+
 ```bash
 python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
 ```
@@ -73,18 +80,22 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This creates:
+
 - `design-system/MASTER.md` — Global Source of Truth with all design rules
 - `design-system/pages/` — Folder for page-specific overrides
 
 **With page-specific override:**
+
 ```bash
 python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
 ```
 
 This also creates:
+
 - `design-system/pages/dashboard.md` — Page-specific deviations from Master
 
 **How hierarchical retrieval works:**
+
 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
 2. If the page file exists, its rules **override** the Master file
 3. If not, use `design-system/MASTER.md` exclusively
@@ -99,13 +110,13 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n
 
 **When to use detailed searches:**
 
-| Need | Domain | Example |
-|------|--------|---------|
-| More style options | `style` | `--domain style "glassmorphism dark"` |
-| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
-| UX best practices | `ux` | `--domain ux "animation accessibility"` |
-| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
-| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+| Need                  | Domain       | Example                                 |
+| --------------------- | ------------ | --------------------------------------- |
+| More style options    | `style`      | `--domain style "glassmorphism dark"`   |
+| Chart recommendations | `chart`      | `--domain chart "real-time dashboard"`  |
+| UX best practices     | `ux`         | `--domain ux "animation accessibility"` |
+| Alternative fonts     | `typography` | `--domain typography "elegant luxury"`  |
+| Landing structure     | `landing`    | `--domain landing "hero social-proof"`  |
 
 ### Step 4: Stack Guidelines (Default: html-tailwind)
 
@@ -123,32 +134,32 @@ Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`
 
 ### Available Domains
 
-| Domain | Use For | Example Keywords |
-|--------|---------|------------------|
-| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
-| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
-| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| Domain       | Use For                              | Example Keywords                                         |
+| ------------ | ------------------------------------ | -------------------------------------------------------- |
+| `product`    | Product type recommendations         | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style`      | UI styles, colors, effects           | glassmorphism, minimalism, dark mode, brutalism          |
+| `typography` | Font pairings, Google Fonts          | elegant, playful, professional, modern                   |
+| `color`      | Color palettes by product type       | saas, ecommerce, healthcare, beauty, fintech, service    |
+| `landing`    | Page structure, CTA strategies       | hero, hero-centric, testimonial, pricing, social-proof   |
+| `chart`      | Chart types, library recommendations | trend, comparison, timeline, funnel, pie                 |
+| `ux`         | Best practices, anti-patterns        | animation, accessibility, z-index, loading               |
+| `react`      | React/Next.js performance            | waterfall, bundle, suspense, memo, rerender, cache       |
+| `web`        | Web interface guidelines             | aria, focus, keyboard, semantic, virtualize              |
+| `prompt`     | AI prompts, CSS keywords             | (style name)                                             |
 
 ### Available Stacks
 
-| Stack | Focus |
-|-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
-| `react` | State, hooks, performance, patterns |
-| `nextjs` | SSR, routing, images, API routes |
-| `vue` | Composition API, Pinia, Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
-| `react-native` | Components, Navigation, Lists |
-| `flutter` | Widgets, State, Layout, Theming |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| Stack             | Focus                                                 |
+| ----------------- | ----------------------------------------------------- |
+| `html-tailwind`   | Tailwind utilities, responsive, a11y (DEFAULT)        |
+| `react`           | State, hooks, performance, patterns                   |
+| `nextjs`          | SSR, routing, images, API routes                      |
+| `vue`             | Composition API, Pinia, Vue Router                    |
+| `svelte`          | Runes, stores, SvelteKit                              |
+| `swiftui`         | Views, State, Navigation, Animation                   |
+| `react-native`    | Components, Navigation, Lists                         |
+| `flutter`         | Widgets, State, Layout, Theming                       |
+| `shadcn`          | shadcn/ui components, theming, forms, patterns        |
 | `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
 
 ---
@@ -158,6 +169,7 @@ Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`
 **User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
 
 ### Step 1: Analyze Requirements
+
 - Product type: Beauty/Spa service
 - Style keywords: elegant, professional, soft
 - Industry: Beauty/Wellness
@@ -222,37 +234,37 @@ These are frequently overlooked issues that make UI look unprofessional:
 
 ### Icons & Visual Elements
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
-| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
-| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| Rule                       | Do                                              | Don't                                  |
+| -------------------------- | ----------------------------------------------- | -------------------------------------- |
+| **No emoji icons**         | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons   |
+| **Stable hover states**    | Use color/opacity transitions on hover          | Use scale transforms that shift layout |
+| **Correct brand logos**    | Research official SVG from Simple Icons         | Guess or use incorrect logo paths      |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6          | Mix different icon sizes randomly      |
 
 ### Interaction & Cursor
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
-| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
-| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+| Rule                   | Do                                                    | Don't                                        |
+| ---------------------- | ----------------------------------------------------- | -------------------------------------------- |
+| **Cursor pointer**     | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback**     | Provide visual feedback (color, shadow, border)       | No indication element is interactive         |
+| **Smooth transitions** | Use `transition-colors duration-200`                  | Instant state changes or too slow (>500ms)   |
 
 ### Light/Dark Mode Contrast
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| Rule                      | Do                                  | Don't                                   |
+| ------------------------- | ----------------------------------- | --------------------------------------- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent)     |
+| **Text contrast light**   | Use `#0F172A` (slate-900) for text  | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light**      | Use `#475569` (slate-600) minimum   | Use gray-400 or lighter                 |
+| **Border visibility**     | Use `border-gray-200` in light mode | Use `border-white/10` (invisible)       |
 
 ### Layout & Spacing
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
-| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
-| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+| Rule                     | Do                                  | Don't                                  |
+| ------------------------ | ----------------------------------- | -------------------------------------- |
+| **Floating navbar**      | Add `top-4 left-4 right-4` spacing  | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding**      | Account for fixed navbar height     | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths         |
 
 ---
 
@@ -261,6 +273,7 @@ These are frequently overlooked issues that make UI look unprofessional:
 Before delivering UI code, verify these items:
 
 ### Visual Quality
+
 - [ ] No emojis used as icons (use SVG instead)
 - [ ] All icons from consistent icon set (Heroicons/Lucide)
 - [ ] Brand logos are correct (verified from Simple Icons)
@@ -268,24 +281,28 @@ Before delivering UI code, verify these items:
 - [ ] Use theme colors directly (bg-primary) not var() wrapper
 
 ### Interaction
+
 - [ ] All clickable elements have `cursor-pointer`
 - [ ] Hover states provide clear visual feedback
 - [ ] Transitions are smooth (150-300ms)
 - [ ] Focus states visible for keyboard navigation
 
 ### Light/Dark Mode
+
 - [ ] Light mode text has sufficient contrast (4.5:1 minimum)
 - [ ] Glass/transparent elements visible in light mode
 - [ ] Borders visible in both modes
 - [ ] Test both modes before delivery
 
 ### Layout
+
 - [ ] Floating elements have proper spacing from edges
 - [ ] No content hidden behind fixed navbars
 - [ ] Responsive at 375px, 768px, 1024px, 1440px
 - [ ] No horizontal scroll on mobile
 
 ### Accessibility
+
 - [ ] All images have alt text
 - [ ] Form inputs have labels
 - [ ] Color is not the only indicator
diff --git a/.agent/skills/vercel-composition-patterns/AGENTS.md b/.agent/skills/vercel-composition-patterns/AGENTS.md
index 558bf9a..595a734 100644
--- a/.agent/skills/vercel-composition-patterns/AGENTS.md
+++ b/.agent/skills/vercel-composition-patterns/AGENTS.md
@@ -73,16 +73,10 @@ function Composer({
       ) : isThread ? (
         <AlsoSendToChannelField id={channelId} />
       ) : null}
-      {isEditing ? (
-        <EditActions />
-      ) : isForwarding ? (
-        <ForwardActions />
-      ) : (
-        <DefaultActions />
-      )}
+      {isEditing ? <EditActions /> : isForwarding ? <ForwardActions /> : <DefaultActions />}
       <Footer onSubmit={onSubmit} />
     </form>
-  )
+  );
 }
 ```
 
@@ -102,7 +96,7 @@ function ChannelComposer() {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Thread composer - adds "also send to channel" field
@@ -118,7 +112,7 @@ function ThreadComposer({ channelId }: { channelId: string }) {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Edit composer - different footer actions
@@ -133,7 +127,7 @@ function EditComposer() {
         <Composer.SaveEdit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 ```
 
@@ -177,25 +171,21 @@ function Composer({
         </Footer>
       )}
     </form>
-  )
+  );
 }
 ```
 
 **Correct: compound components with shared context**
 
 ```tsx
-const ComposerContext = createContext<ComposerContextValue | null>(null)
+const ComposerContext = createContext<ComposerContextValue | null>(null);
 
 function ComposerProvider({ children, state, actions, meta }: ProviderProps) {
-  return (
-    <ComposerContext value={{ state, actions, meta }}>
-      {children}
-    </ComposerContext>
-  )
+  return <ComposerContext value={{ state, actions, meta }}>{children}</ComposerContext>;
 }
 
 function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form>{children}</form>
+  return <form>{children}</form>;
 }
 
 function ComposerInput() {
@@ -203,21 +193,21 @@ function ComposerInput() {
     state,
     actions: { update },
     meta: { inputRef },
-  } = use(ComposerContext)
+  } = use(ComposerContext);
   return (
     <TextInput
       ref={inputRef}
       value={state.input}
       onChangeText={(text) => update((s) => ({ ...s, input: text }))}
     />
-  )
+  );
 }
 
 function ComposerSubmit() {
   const {
     actions: { submit },
-  } = use(ComposerContext)
-  return <Button onPress={submit}>Send</Button>
+  } = use(ComposerContext);
+  return <Button onPress={submit}>Send</Button>;
 }
 
 // Export as compound component
@@ -231,7 +221,7 @@ const Composer = {
   Attachments: ComposerAttachments,
   Formatting: ComposerFormatting,
   Emojis: ComposerEmojis,
-}
+};
 ```
 
 **Usage:**
@@ -275,18 +265,15 @@ useState, Zustand, or a server sync.
 ```tsx
 function ChannelComposer({ channelId }: { channelId: string }) {
   // UI component knows about global state implementation
-  const state = useGlobalChannelState(channelId)
-  const { submit, updateInput } = useChannelSync(channelId)
+  const state = useGlobalChannelState(channelId);
+  const { submit, updateInput } = useChannelSync(channelId);
 
   return (
     <Composer.Frame>
-      <Composer.Input
-        value={state.input}
-        onChange={(text) => sync.updateInput(text)}
-      />
+      <Composer.Input value={state.input} onChange={(text) => sync.updateInput(text)} />
       <Composer.Submit onPress={() => sync.submit()} />
     </Composer.Frame>
-  )
+  );
 }
 ```
 
@@ -298,21 +285,17 @@ function ChannelProvider({
   channelId,
   children,
 }: {
-  channelId: string
-  children: React.ReactNode
+  channelId: string;
+  children: React.ReactNode;
 }) {
-  const { state, update, submit } = useGlobalChannel(channelId)
-  const inputRef = useRef(null)
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef(null);
 
   return (
-    <Composer.Provider
-      state={state}
-      actions={{ update, submit }}
-      meta={{ inputRef }}
-    >
+    <Composer.Provider state={state} actions={{ update, submit }} meta={{ inputRef }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 // UI component only knows about the context interface
@@ -325,7 +308,7 @@ function ChannelComposer() {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Usage
@@ -334,7 +317,7 @@ function Channel({ channelId }: { channelId: string }) {
     <ChannelProvider channelId={channelId}>
       <ChannelComposer />
     </ChannelProvider>
-  )
+  );
 }
 ```
 
@@ -343,28 +326,25 @@ function Channel({ channelId }: { channelId: string }) {
 ```tsx
 // Local state for ephemeral forms
 function ForwardMessageProvider({ children }) {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
 
   return (
-    <Composer.Provider
-      state={state}
-      actions={{ update: setState, submit: forwardMessage }}
-    >
+    <Composer.Provider state={state} actions={{ update: setState, submit: forwardMessage }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 // Global synced state for channels
 function ChannelProvider({ channelId, children }) {
-  const { state, update, submit } = useGlobalChannel(channelId)
+  const { state, update, submit } = useGlobalChannel(channelId);
 
   return (
     <Composer.Provider state={state} actions={{ update, submit }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 ```
 
@@ -393,8 +373,8 @@ dependency-injectable.
 ```tsx
 function ComposerInput() {
   // Tightly coupled to a specific hook
-  const { input, setInput } = useChannelComposerState()
-  return <TextInput value={input} onChangeText={setInput} />
+  const { input, setInput } = useChannelComposerState();
+  return <TextInput value={input} onChangeText={setInput} />;
 }
 ```
 
@@ -403,27 +383,27 @@ function ComposerInput() {
 ```tsx
 // Define a GENERIC interface that any provider can implement
 interface ComposerState {
-  input: string
-  attachments: Attachment[]
-  isSubmitting: boolean
+  input: string;
+  attachments: Attachment[];
+  isSubmitting: boolean;
 }
 
 interface ComposerActions {
-  update: (updater: (state: ComposerState) => ComposerState) => void
-  submit: () => void
+  update: (updater: (state: ComposerState) => ComposerState) => void;
+  submit: () => void;
 }
 
 interface ComposerMeta {
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput>;
 }
 
 interface ComposerContextValue {
-  state: ComposerState
-  actions: ComposerActions
-  meta: ComposerMeta
+  state: ComposerState;
+  actions: ComposerActions;
+  meta: ComposerMeta;
 }
 
-const ComposerContext = createContext<ComposerContextValue | null>(null)
+const ComposerContext = createContext<ComposerContextValue | null>(null);
 ```
 
 **UI components consume the interface, not the implementation:**
@@ -434,7 +414,7 @@ function ComposerInput() {
     state,
     actions: { update },
     meta,
-  } = use(ComposerContext)
+  } = use(ComposerContext);
 
   // This component works with ANY provider that implements the interface
   return (
@@ -443,7 +423,7 @@ function ComposerInput() {
       value={state.input}
       onChangeText={(text) => update((s) => ({ ...s, input: text }))}
     />
-  )
+  );
 }
 ```
 
@@ -452,9 +432,9 @@ function ComposerInput() {
 ```tsx
 // Provider A: Local state for ephemeral forms
 function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState)
-  const inputRef = useRef(null)
-  const submit = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const inputRef = useRef(null);
+  const submit = useForwardMessage();
 
   return (
     <ComposerContext
@@ -466,13 +446,13 @@ function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
     >
       {children}
     </ComposerContext>
-  )
+  );
 }
 
 // Provider B: Global synced state for channels
 function ChannelProvider({ channelId, children }: Props) {
-  const { state, update, submit } = useGlobalChannel(channelId)
-  const inputRef = useRef(null)
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef(null);
 
   return (
     <ComposerContext
@@ -484,7 +464,7 @@ function ChannelProvider({ channelId, children }: Props) {
     >
       {children}
     </ComposerContext>
-  )
+  );
 }
 ```
 
@@ -534,21 +514,21 @@ function ForwardMessageDialog() {
         </DialogActions>
       </Dialog>
     </ForwardMessageProvider>
-  )
+  );
 }
 
 // This button lives OUTSIDE Composer.Frame but can still submit based on its context!
 function ForwardButton() {
   const {
     actions: { submit },
-  } = use(ComposerContext)
-  return <Button onPress={submit}>Forward</Button>
+  } = use(ComposerContext);
+  return <Button onPress={submit}>Forward</Button>;
 }
 
 // This preview lives OUTSIDE Composer.Frame but can read composer's state!
 function MessagePreview() {
-  const { state } = use(ComposerContext)
-  return <Preview message={state.input} attachments={state.attachments} />
+  const { state } = use(ComposerContext);
+  return <Preview message={state.input} attachments={state.attachments} />;
 }
 ```
 
@@ -582,15 +562,15 @@ or awkward refs.
 
 ```tsx
 function ForwardMessageComposer() {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
 
   return (
     <Composer.Frame>
       <Composer.Input />
       <Composer.Footer />
     </Composer.Frame>
-  )
+  );
 }
 
 // Problem: How does this button access composer state?
@@ -604,7 +584,7 @@ function ForwardMessageDialog() {
         <ForwardButton /> {/* Needs to call submit */}
       </DialogActions>
     </Dialog>
-  )
+  );
 }
 ```
 
@@ -612,20 +592,20 @@ function ForwardMessageDialog() {
 
 ```tsx
 function ForwardMessageDialog() {
-  const [input, setInput] = useState('')
+  const [input, setInput] = useState('');
   return (
     <Dialog>
       <ForwardMessageComposer onInputChange={setInput} />
       <MessagePreview input={input} />
     </Dialog>
-  )
+  );
 }
 
 function ForwardMessageComposer({ onInputChange }) {
-  const [state, setState] = useState(initialState)
+  const [state, setState] = useState(initialState);
   useEffect(() => {
-    onInputChange(state.input) // Sync on every change 😬
-  }, [state.input])
+    onInputChange(state.input); // Sync on every change 😬
+  }, [state.input]);
 }
 ```
 
@@ -633,13 +613,13 @@ function ForwardMessageComposer({ onInputChange }) {
 
 ```tsx
 function ForwardMessageDialog() {
-  const stateRef = useRef(null)
+  const stateRef = useRef(null);
   return (
     <Dialog>
       <ForwardMessageComposer stateRef={stateRef} />
       <ForwardButton onPress={() => submit(stateRef.current)} />
     </Dialog>
-  )
+  );
 }
 ```
 
@@ -647,9 +627,9 @@ function ForwardMessageDialog() {
 
 ```tsx
 function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
-  const inputRef = useRef(null)
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
+  const inputRef = useRef(null);
 
   return (
     <Composer.Provider
@@ -659,7 +639,7 @@ function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
     >
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 function ForwardMessageDialog() {
@@ -674,12 +654,12 @@ function ForwardMessageDialog() {
         </DialogActions>
       </Dialog>
     </ForwardMessageProvider>
-  )
+  );
 }
 
 function ForwardButton() {
-  const { actions } = use(Composer.Context)
-  return <Button onPress={actions.submit}>Forward</Button>
+  const { actions } = use(Composer.Context);
+  return <Button onPress={actions.submit}>Forward</Button>;
 }
 ```
 
@@ -718,13 +698,7 @@ itself.
 
 ```tsx
 // What does this component actually render?
-<Composer
-  isThread
-  isEditing={false}
-  channelId='abc'
-  showAttachments
-  showFormatting={false}
-/>
+<Composer isThread isEditing={false} channelId="abc" showAttachments showFormatting={false} />
 ```
 
 **Correct: explicit variants**
@@ -760,7 +734,7 @@ function ThreadComposer({ channelId }: { channelId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </ThreadProvider>
-  )
+  );
 }
 
 function EditMessageComposer({ messageId }: { messageId: string }) {
@@ -776,7 +750,7 @@ function EditMessageComposer({ messageId }: { messageId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </EditMessageProvider>
-  )
+  );
 }
 
 function ForwardMessageComposer({ messageId }: { messageId: string }) {
@@ -791,7 +765,7 @@ function ForwardMessageComposer({ messageId }: { messageId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </ForwardMessageProvider>
-  )
+  );
 }
 ```
 
@@ -823,9 +797,9 @@ function Composer({
   renderFooter,
   renderActions,
 }: {
-  renderHeader?: () => React.ReactNode
-  renderFooter?: () => React.ReactNode
-  renderActions?: () => React.ReactNode
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderActions?: () => React.ReactNode;
 }) {
   return (
     <form>
@@ -834,7 +808,7 @@ function Composer({
       {renderFooter ? renderFooter() : <DefaultFooter />}
       {renderActions?.()}
     </form>
-  )
+  );
 }
 
 // Usage is awkward and inflexible
@@ -849,18 +823,18 @@ return (
     )}
     renderActions={() => <SubmitButton />}
   />
-)
+);
 ```
 
 **Correct: compound components with children**
 
 ```tsx
 function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form>{children}</form>
+  return <form>{children}</form>;
 }
 
 function ComposerFooter({ children }: { children: React.ReactNode }) {
-  return <footer className='flex'>{children}</footer>
+  return <footer className="flex">{children}</footer>;
 }
 
 // Usage is flexible
@@ -874,17 +848,14 @@ return (
       <SubmitButton />
     </Composer.Footer>
   </Composer.Frame>
-)
+);
 ```
 
 **When render props are appropriate:**
 
 ```tsx
 // Render props work well when you need to pass data back
-<List
-  data={items}
-  renderItem={({ item, index }) => <Item item={item} index={index} />}
-/>
+<List data={items} renderItem={({ item, index }) => <Item item={item} index={index} />} />
 ```
 
 Use render props when the parent needs to provide data or state to the child.
@@ -911,28 +882,28 @@ In React 19, `ref` is now a regular prop (no `forwardRef` wrapper needed), and `
 
 ```tsx
 const ComposerInput = forwardRef<TextInput, Props>((props, ref) => {
-  return <TextInput ref={ref} {...props} />
-})
+  return <TextInput ref={ref} {...props} />;
+});
 ```
 
 **Correct: ref as a regular prop**
 
 ```tsx
 function ComposerInput({ ref, ...props }: Props & { ref?: React.Ref<TextInput> }) {
-  return <TextInput ref={ref} {...props} />
+  return <TextInput ref={ref} {...props} />;
 }
 ```
 
 **Incorrect: useContext in React 19**
 
 ```tsx
-const value = useContext(MyContext)
+const value = useContext(MyContext);
 ```
 
 **Correct: use instead of useContext**
 
 ```tsx
-const value = use(MyContext)
+const value = use(MyContext);
 ```
 
 `use()` can also be called conditionally, unlike `useContext()`.
diff --git a/.agent/skills/vercel-composition-patterns/SKILL.md b/.agent/skills/vercel-composition-patterns/SKILL.md
index d07025b..ddfb53e 100644
--- a/.agent/skills/vercel-composition-patterns/SKILL.md
+++ b/.agent/skills/vercel-composition-patterns/SKILL.md
@@ -1,7 +1,6 @@
 ---
 name: vercel-composition-patterns
-description:
-  React composition patterns that scale. Use when refactoring components with
+description: React composition patterns that scale. Use when refactoring components with
   boolean prop proliferation, building flexible component libraries, or
   designing reusable APIs. Triggers on tasks involving compound components,
   render props, context providers, or component architecture. Includes React 19
diff --git a/.agent/skills/vercel-composition-patterns/rules/architecture-avoid-boolean-props.md b/.agent/skills/vercel-composition-patterns/rules/architecture-avoid-boolean-props.md
index ccee19c..8a0f998 100644
--- a/.agent/skills/vercel-composition-patterns/rules/architecture-avoid-boolean-props.md
+++ b/.agent/skills/vercel-composition-patterns/rules/architecture-avoid-boolean-props.md
@@ -32,16 +32,10 @@ function Composer({
       ) : isThread ? (
         <AlsoSendToChannelField id={channelId} />
       ) : null}
-      {isEditing ? (
-        <EditActions />
-      ) : isForwarding ? (
-        <ForwardActions />
-      ) : (
-        <DefaultActions />
-      )}
+      {isEditing ? <EditActions /> : isForwarding ? <ForwardActions /> : <DefaultActions />}
       <Footer onSubmit={onSubmit} />
     </form>
-  )
+  );
 }
 ```
 
@@ -61,7 +55,7 @@ function ChannelComposer() {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Thread composer - adds "also send to channel" field
@@ -77,7 +71,7 @@ function ThreadComposer({ channelId }: { channelId: string }) {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Edit composer - different footer actions
@@ -92,7 +86,7 @@ function EditComposer() {
         <Composer.SaveEdit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-composition-patterns/rules/architecture-compound-components.md b/.agent/skills/vercel-composition-patterns/rules/architecture-compound-components.md
index e5e3043..e6677a7 100644
--- a/.agent/skills/vercel-composition-patterns/rules/architecture-compound-components.md
+++ b/.agent/skills/vercel-composition-patterns/rules/architecture-compound-components.md
@@ -37,25 +37,21 @@ function Composer({
         </Footer>
       )}
     </form>
-  )
+  );
 }
 ```
 
 **Correct (compound components with shared context):**
 
 ```tsx
-const ComposerContext = createContext<ComposerContextValue | null>(null)
+const ComposerContext = createContext<ComposerContextValue | null>(null);
 
 function ComposerProvider({ children, state, actions, meta }: ProviderProps) {
-  return (
-    <ComposerContext value={{ state, actions, meta }}>
-      {children}
-    </ComposerContext>
-  )
+  return <ComposerContext value={{ state, actions, meta }}>{children}</ComposerContext>;
 }
 
 function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form>{children}</form>
+  return <form>{children}</form>;
 }
 
 function ComposerInput() {
@@ -63,21 +59,21 @@ function ComposerInput() {
     state,
     actions: { update },
     meta: { inputRef },
-  } = use(ComposerContext)
+  } = use(ComposerContext);
   return (
     <TextInput
       ref={inputRef}
       value={state.input}
       onChangeText={(text) => update((s) => ({ ...s, input: text }))}
     />
-  )
+  );
 }
 
 function ComposerSubmit() {
   const {
     actions: { submit },
-  } = use(ComposerContext)
-  return <Button onPress={submit}>Send</Button>
+  } = use(ComposerContext);
+  return <Button onPress={submit}>Send</Button>;
 }
 
 // Export as compound component
@@ -91,7 +87,7 @@ const Composer = {
   Attachments: ComposerAttachments,
   Formatting: ComposerFormatting,
   Emojis: ComposerEmojis,
-}
+};
 ```
 
 **Usage:**
diff --git a/.agent/skills/vercel-composition-patterns/rules/patterns-children-over-render-props.md b/.agent/skills/vercel-composition-patterns/rules/patterns-children-over-render-props.md
index d4345ee..7c0ea4c 100644
--- a/.agent/skills/vercel-composition-patterns/rules/patterns-children-over-render-props.md
+++ b/.agent/skills/vercel-composition-patterns/rules/patterns-children-over-render-props.md
@@ -19,9 +19,9 @@ function Composer({
   renderFooter,
   renderActions,
 }: {
-  renderHeader?: () => React.ReactNode
-  renderFooter?: () => React.ReactNode
-  renderActions?: () => React.ReactNode
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderActions?: () => React.ReactNode;
 }) {
   return (
     <form>
@@ -30,7 +30,7 @@ function Composer({
       {renderFooter ? renderFooter() : <DefaultFooter />}
       {renderActions?.()}
     </form>
-  )
+  );
 }
 
 // Usage is awkward and inflexible
@@ -45,18 +45,18 @@ return (
     )}
     renderActions={() => <SubmitButton />}
   />
-)
+);
 ```
 
 **Correct (compound components with children):**
 
 ```tsx
 function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form>{children}</form>
+  return <form>{children}</form>;
 }
 
 function ComposerFooter({ children }: { children: React.ReactNode }) {
-  return <footer className='flex'>{children}</footer>
+  return <footer className="flex">{children}</footer>;
 }
 
 // Usage is flexible
@@ -70,17 +70,14 @@ return (
       <SubmitButton />
     </Composer.Footer>
   </Composer.Frame>
-)
+);
 ```
 
 **When render props are appropriate:**
 
 ```tsx
 // Render props work well when you need to pass data back
-<List
-  data={items}
-  renderItem={({ item, index }) => <Item item={item} index={index} />}
-/>
+<List data={items} renderItem={({ item, index }) => <Item item={item} index={index} />} />
 ```
 
 Use render props when the parent needs to provide data or state to the child.
diff --git a/.agent/skills/vercel-composition-patterns/rules/patterns-explicit-variants.md b/.agent/skills/vercel-composition-patterns/rules/patterns-explicit-variants.md
index 56e32e8..b20382c 100644
--- a/.agent/skills/vercel-composition-patterns/rules/patterns-explicit-variants.md
+++ b/.agent/skills/vercel-composition-patterns/rules/patterns-explicit-variants.md
@@ -15,13 +15,7 @@ itself.
 
 ```tsx
 // What does this component actually render?
-<Composer
-  isThread
-  isEditing={false}
-  channelId='abc'
-  showAttachments
-  showFormatting={false}
-/>
+<Composer isThread isEditing={false} channelId="abc" showAttachments showFormatting={false} />
 ```
 
 **Correct (explicit variants):**
@@ -56,7 +50,7 @@ function ThreadComposer({ channelId }: { channelId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </ThreadProvider>
-  )
+  );
 }
 
 function EditMessageComposer({ messageId }: { messageId: string }) {
@@ -72,7 +66,7 @@ function EditMessageComposer({ messageId }: { messageId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </EditMessageProvider>
-  )
+  );
 }
 
 function ForwardMessageComposer({ messageId }: { messageId: string }) {
@@ -87,7 +81,7 @@ function ForwardMessageComposer({ messageId }: { messageId: string }) {
         </Composer.Footer>
       </Composer.Frame>
     </ForwardMessageProvider>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-composition-patterns/rules/react19-no-forwardref.md b/.agent/skills/vercel-composition-patterns/rules/react19-no-forwardref.md
index e0d8f8a..d5e80a7 100644
--- a/.agent/skills/vercel-composition-patterns/rules/react19-no-forwardref.md
+++ b/.agent/skills/vercel-composition-patterns/rules/react19-no-forwardref.md
@@ -15,28 +15,28 @@ In React 19, `ref` is now a regular prop (no `forwardRef` wrapper needed), and `
 
 ```tsx
 const ComposerInput = forwardRef<TextInput, Props>((props, ref) => {
-  return <TextInput ref={ref} {...props} />
-})
+  return <TextInput ref={ref} {...props} />;
+});
 ```
 
 **Correct (ref as a regular prop):**
 
 ```tsx
 function ComposerInput({ ref, ...props }: Props & { ref?: React.Ref<TextInput> }) {
-  return <TextInput ref={ref} {...props} />
+  return <TextInput ref={ref} {...props} />;
 }
 ```
 
 **Incorrect (useContext in React 19):**
 
 ```tsx
-const value = useContext(MyContext)
+const value = useContext(MyContext);
 ```
 
 **Correct (use instead of useContext):**
 
 ```tsx
-const value = use(MyContext)
+const value = use(MyContext);
 ```
 
 `use()` can also be called conditionally, unlike `useContext()`.
diff --git a/.agent/skills/vercel-composition-patterns/rules/state-context-interface.md b/.agent/skills/vercel-composition-patterns/rules/state-context-interface.md
index d961bed..6a680ea 100644
--- a/.agent/skills/vercel-composition-patterns/rules/state-context-interface.md
+++ b/.agent/skills/vercel-composition-patterns/rules/state-context-interface.md
@@ -20,8 +20,8 @@ dependency-injectable.
 ```tsx
 function ComposerInput() {
   // Tightly coupled to a specific hook
-  const { input, setInput } = useChannelComposerState()
-  return <TextInput value={input} onChangeText={setInput} />
+  const { input, setInput } = useChannelComposerState();
+  return <TextInput value={input} onChangeText={setInput} />;
 }
 ```
 
@@ -30,27 +30,27 @@ function ComposerInput() {
 ```tsx
 // Define a GENERIC interface that any provider can implement
 interface ComposerState {
-  input: string
-  attachments: Attachment[]
-  isSubmitting: boolean
+  input: string;
+  attachments: Attachment[];
+  isSubmitting: boolean;
 }
 
 interface ComposerActions {
-  update: (updater: (state: ComposerState) => ComposerState) => void
-  submit: () => void
+  update: (updater: (state: ComposerState) => ComposerState) => void;
+  submit: () => void;
 }
 
 interface ComposerMeta {
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput>;
 }
 
 interface ComposerContextValue {
-  state: ComposerState
-  actions: ComposerActions
-  meta: ComposerMeta
+  state: ComposerState;
+  actions: ComposerActions;
+  meta: ComposerMeta;
 }
 
-const ComposerContext = createContext<ComposerContextValue | null>(null)
+const ComposerContext = createContext<ComposerContextValue | null>(null);
 ```
 
 **UI components consume the interface, not the implementation:**
@@ -61,7 +61,7 @@ function ComposerInput() {
     state,
     actions: { update },
     meta,
-  } = use(ComposerContext)
+  } = use(ComposerContext);
 
   // This component works with ANY provider that implements the interface
   return (
@@ -70,7 +70,7 @@ function ComposerInput() {
       value={state.input}
       onChangeText={(text) => update((s) => ({ ...s, input: text }))}
     />
-  )
+  );
 }
 ```
 
@@ -79,9 +79,9 @@ function ComposerInput() {
 ```tsx
 // Provider A: Local state for ephemeral forms
 function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState)
-  const inputRef = useRef(null)
-  const submit = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const inputRef = useRef(null);
+  const submit = useForwardMessage();
 
   return (
     <ComposerContext
@@ -93,13 +93,13 @@ function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
     >
       {children}
     </ComposerContext>
-  )
+  );
 }
 
 // Provider B: Global synced state for channels
 function ChannelProvider({ channelId, children }: Props) {
-  const { state, update, submit } = useGlobalChannel(channelId)
-  const inputRef = useRef(null)
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef(null);
 
   return (
     <ComposerContext
@@ -111,7 +111,7 @@ function ChannelProvider({ channelId, children }: Props) {
     >
       {children}
     </ComposerContext>
-  )
+  );
 }
 ```
 
@@ -165,21 +165,21 @@ function ForwardMessageDialog() {
         </DialogActions>
       </Dialog>
     </ForwardMessageProvider>
-  )
+  );
 }
 
 // This button lives OUTSIDE Composer.Frame but can still submit based on its context!
 function ForwardButton() {
   const {
     actions: { submit },
-  } = use(ComposerContext)
-  return <Button onPress={submit}>Forward</Button>
+  } = use(ComposerContext);
+  return <Button onPress={submit}>Forward</Button>;
 }
 
 // This preview lives OUTSIDE Composer.Frame but can read composer's state!
 function MessagePreview() {
-  const { state } = use(ComposerContext)
-  return <Preview message={state.input} attachments={state.attachments} />
+  const { state } = use(ComposerContext);
+  return <Preview message={state.input} attachments={state.attachments} />;
 }
 ```
 
diff --git a/.agent/skills/vercel-composition-patterns/rules/state-decouple-implementation.md b/.agent/skills/vercel-composition-patterns/rules/state-decouple-implementation.md
index 71a5afa..f15432d 100644
--- a/.agent/skills/vercel-composition-patterns/rules/state-decouple-implementation.md
+++ b/.agent/skills/vercel-composition-patterns/rules/state-decouple-implementation.md
@@ -16,18 +16,15 @@ useState, Zustand, or a server sync.
 ```tsx
 function ChannelComposer({ channelId }: { channelId: string }) {
   // UI component knows about global state implementation
-  const state = useGlobalChannelState(channelId)
-  const { submit, updateInput } = useChannelSync(channelId)
+  const state = useGlobalChannelState(channelId);
+  const { submit, updateInput } = useChannelSync(channelId);
 
   return (
     <Composer.Frame>
-      <Composer.Input
-        value={state.input}
-        onChange={(text) => sync.updateInput(text)}
-      />
+      <Composer.Input value={state.input} onChange={(text) => sync.updateInput(text)} />
       <Composer.Submit onPress={() => sync.submit()} />
     </Composer.Frame>
-  )
+  );
 }
 ```
 
@@ -39,21 +36,17 @@ function ChannelProvider({
   channelId,
   children,
 }: {
-  channelId: string
-  children: React.ReactNode
+  channelId: string;
+  children: React.ReactNode;
 }) {
-  const { state, update, submit } = useGlobalChannel(channelId)
-  const inputRef = useRef(null)
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef(null);
 
   return (
-    <Composer.Provider
-      state={state}
-      actions={{ update, submit }}
-      meta={{ inputRef }}
-    >
+    <Composer.Provider state={state} actions={{ update, submit }} meta={{ inputRef }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 // UI component only knows about the context interface
@@ -66,7 +59,7 @@ function ChannelComposer() {
         <Composer.Submit />
       </Composer.Footer>
     </Composer.Frame>
-  )
+  );
 }
 
 // Usage
@@ -75,7 +68,7 @@ function Channel({ channelId }: { channelId: string }) {
     <ChannelProvider channelId={channelId}>
       <ChannelComposer />
     </ChannelProvider>
-  )
+  );
 }
 ```
 
@@ -84,28 +77,25 @@ function Channel({ channelId }: { channelId: string }) {
 ```tsx
 // Local state for ephemeral forms
 function ForwardMessageProvider({ children }) {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
 
   return (
-    <Composer.Provider
-      state={state}
-      actions={{ update: setState, submit: forwardMessage }}
-    >
+    <Composer.Provider state={state} actions={{ update: setState, submit: forwardMessage }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 // Global synced state for channels
 function ChannelProvider({ channelId, children }) {
-  const { state, update, submit } = useGlobalChannel(channelId)
+  const { state, update, submit } = useGlobalChannel(channelId);
 
   return (
     <Composer.Provider state={state} actions={{ update, submit }}>
       {children}
     </Composer.Provider>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-composition-patterns/rules/state-lift-state.md b/.agent/skills/vercel-composition-patterns/rules/state-lift-state.md
index d7fe27b..b1e5e8e 100644
--- a/.agent/skills/vercel-composition-patterns/rules/state-lift-state.md
+++ b/.agent/skills/vercel-composition-patterns/rules/state-lift-state.md
@@ -15,15 +15,15 @@ or awkward refs.
 
 ```tsx
 function ForwardMessageComposer() {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
 
   return (
     <Composer.Frame>
       <Composer.Input />
       <Composer.Footer />
     </Composer.Frame>
-  )
+  );
 }
 
 // Problem: How does this button access composer state?
@@ -37,7 +37,7 @@ function ForwardMessageDialog() {
         <ForwardButton /> {/* Needs to call submit */}
       </DialogActions>
     </Dialog>
-  )
+  );
 }
 ```
 
@@ -45,20 +45,20 @@ function ForwardMessageDialog() {
 
 ```tsx
 function ForwardMessageDialog() {
-  const [input, setInput] = useState('')
+  const [input, setInput] = useState('');
   return (
     <Dialog>
       <ForwardMessageComposer onInputChange={setInput} />
       <MessagePreview input={input} />
     </Dialog>
-  )
+  );
 }
 
 function ForwardMessageComposer({ onInputChange }) {
-  const [state, setState] = useState(initialState)
+  const [state, setState] = useState(initialState);
   useEffect(() => {
-    onInputChange(state.input) // Sync on every change 😬
-  }, [state.input])
+    onInputChange(state.input); // Sync on every change 😬
+  }, [state.input]);
 }
 ```
 
@@ -66,13 +66,13 @@ function ForwardMessageComposer({ onInputChange }) {
 
 ```tsx
 function ForwardMessageDialog() {
-  const stateRef = useRef(null)
+  const stateRef = useRef(null);
   return (
     <Dialog>
       <ForwardMessageComposer stateRef={stateRef} />
       <ForwardButton onPress={() => submit(stateRef.current)} />
     </Dialog>
-  )
+  );
 }
 ```
 
@@ -80,9 +80,9 @@ function ForwardMessageDialog() {
 
 ```tsx
 function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState)
-  const forwardMessage = useForwardMessage()
-  const inputRef = useRef(null)
+  const [state, setState] = useState(initialState);
+  const forwardMessage = useForwardMessage();
+  const inputRef = useRef(null);
 
   return (
     <Composer.Provider
@@ -92,7 +92,7 @@ function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
     >
       {children}
     </Composer.Provider>
-  )
+  );
 }
 
 function ForwardMessageDialog() {
@@ -107,12 +107,12 @@ function ForwardMessageDialog() {
         </DialogActions>
       </Dialog>
     </ForwardMessageProvider>
-  )
+  );
 }
 
 function ForwardButton() {
-  const { actions } = use(Composer.Context)
-  return <Button onPress={actions.submit}>Forward</Button>
+  const { actions } = use(Composer.Context);
+  return <Button onPress={actions.submit}>Forward</Button>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/AGENTS.md b/.agent/skills/vercel-react-best-practices/AGENTS.md
index db951ab..c5d62f5 100644
--- a/.agent/skills/vercel-react-best-practices/AGENTS.md
+++ b/.agent/skills/vercel-react-best-practices/AGENTS.md
@@ -104,15 +104,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -122,12 +122,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -136,35 +136,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: 'Not found' };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: 'Forbidden' };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: 'Not found' };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: 'Forbidden' };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
@@ -179,38 +179,35 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect: profile waits for config unnecessarily**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct: config and profile run in parallel**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from 'better-all';
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 **Alternative without extra dependencies:**
 
 ```typescript
-const userPromise = fetchUser()
-const profilePromise = userPromise.then(user => fetchProfile(user.id))
+const userPromise = fetchUser();
+const profilePromise = userPromise.then((user) => fetchProfile(user.id));
 
-const [user, config, profile] = await Promise.all([
-  userPromise,
-  fetchConfig(),
-  profilePromise
-])
+const [user, config, profile] = await Promise.all([userPromise, fetchConfig(), profilePromise]);
 ```
 
 We can also create all the promises first, and do `Promise.all()` at the end.
@@ -227,10 +224,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -238,14 +235,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
@@ -260,19 +254,15 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect: sequential execution, 3 round trips**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct: parallel execution, 1 round trip**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
 
 ### 1.5 Strategic Suspense Boundaries
@@ -285,8 +275,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -296,7 +286,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -317,12 +307,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -333,8 +323,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -345,17 +335,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
@@ -394,24 +384,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect: imports entire library**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from 'lucide-react';
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from '@mui/material';
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct: imports only what you need**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from 'lucide-react/dist/esm/icons/check';
+import X from 'lucide-react/dist/esm/icons/x';
+import Menu from 'lucide-react/dist/esm/icons/menu';
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 // Loads only what you use
 ```
 
@@ -421,12 +411,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ['lucide-react', '@mui/material'],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from 'lucide-react';
 // Automatically transformed to direct imports at build time
 ```
 
@@ -445,19 +435,25 @@ Load large data or modules only when a feature is activated.
 **Example: lazy-load animation frames**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
     if (enabled && !frames && typeof window !== 'undefined') {
       import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
@@ -472,7 +468,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect: blocks initial bundle**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from '@vercel/analytics/react';
 
 export default function RootLayout({ children }) {
   return (
@@ -482,19 +478,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct: loads after hydration**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import('@vercel/analytics/react').then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -504,7 +499,7 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
@@ -517,25 +512,24 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect: Monaco bundles with main chunk ~300KB**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from './monaco-editor';
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct: Monaco loads on demand**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import('./monaco-editor').then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
@@ -551,19 +545,15 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
     if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+      void import('./monaco-editor');
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -573,13 +563,11 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
     if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+      void import('./monaco-editor').then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
@@ -604,80 +592,80 @@ Next.js documentation explicitly states: "Treat Server Actions with the same sec
 **Incorrect: no authentication check**
 
 ```typescript
-'use server'
+'use server';
 
 export async function deleteUser(userId: string) {
   // Anyone can call this! No auth check
-  await db.user.delete({ where: { id: userId } })
-  return { success: true }
+  await db.user.delete({ where: { id: userId } });
+  return { success: true };
 }
 ```
 
 **Correct: authentication inside the action**
 
 ```typescript
-'use server'
+'use server';
 
-import { verifySession } from '@/lib/auth'
-import { unauthorized } from '@/lib/errors'
+import { verifySession } from '@/lib/auth';
+import { unauthorized } from '@/lib/errors';
 
 export async function deleteUser(userId: string) {
   // Always check auth inside the action
-  const session = await verifySession()
-  
+  const session = await verifySession();
+
   if (!session) {
-    throw unauthorized('Must be logged in')
+    throw unauthorized('Must be logged in');
   }
-  
+
   // Check authorization too
   if (session.user.role !== 'admin' && session.user.id !== userId) {
-    throw unauthorized('Cannot delete other users')
+    throw unauthorized('Cannot delete other users');
   }
-  
-  await db.user.delete({ where: { id: userId } })
-  return { success: true }
+
+  await db.user.delete({ where: { id: userId } });
+  return { success: true };
 }
 ```
 
 **With input validation:**
 
 ```typescript
-'use server'
+'use server';
 
-import { verifySession } from '@/lib/auth'
-import { z } from 'zod'
+import { verifySession } from '@/lib/auth';
+import { z } from 'zod';
 
 const updateProfileSchema = z.object({
   userId: z.string().uuid(),
   name: z.string().min(1).max(100),
-  email: z.string().email()
-})
+  email: z.string().email(),
+});
 
 export async function updateProfile(data: unknown) {
   // Validate input first
-  const validated = updateProfileSchema.parse(data)
-  
+  const validated = updateProfileSchema.parse(data);
+
   // Then authenticate
-  const session = await verifySession()
+  const session = await verifySession();
   if (!session) {
-    throw new Error('Unauthorized')
+    throw new Error('Unauthorized');
   }
-  
+
   // Then authorize
   if (session.user.id !== validated.userId) {
-    throw new Error('Can only update own profile')
+    throw new Error('Can only update own profile');
   }
-  
+
   // Finally perform the mutation
   await db.user.update({
     where: { id: validated.userId },
     data: {
       name: validated.name,
-      email: validated.email
-    }
-  })
-  
-  return { success: true }
+      email: validated.email,
+    },
+  });
+
+  return { success: true };
 }
 ```
 
@@ -700,11 +688,11 @@ RSC→client serialization deduplicates by object reference, not value. Same ref
 
 ```tsx
 // RSC: send once
-<ClientList usernames={usernames} />
+<ClientList usernames={usernames} />;
 
 // Client: transform there
-'use client'
-const sorted = useMemo(() => [...usernames].sort(), [usernames])
+('use client');
+const sorted = useMemo(() => [...usernames].sort(), [usernames]);
 ```
 
 **Nested deduplication behavior:**
@@ -753,20 +741,20 @@ Deduplication works recursively. Impact varies by data type:
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from 'lru-cache';
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
@@ -791,13 +779,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+('use client');
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -805,13 +793,13 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+('use client');
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
 
@@ -825,18 +813,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -844,13 +832,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -859,7 +847,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -867,13 +855,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -882,7 +870,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -890,7 +878,7 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
 
@@ -903,15 +891,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from 'react';
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -924,20 +912,20 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct: cache hit**
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 If you must pass objects, pass the same reference:
@@ -969,46 +957,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect: blocks response**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from '@/app/utils';
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
+  const userAgent = request.headers.get('user-agent') || 'unknown';
+  await logUserAction({ userAgent });
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { 'Content-Type': 'application/json' },
+  });
 }
 ```
 
 **Correct: non-blocking**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from 'next/server';
+import { headers, cookies } from 'next/headers';
+import { logUserAction } from '@/app/utils';
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
+    const userAgent = (await headers()).get('user-agent') || 'unknown';
+    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous';
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { 'Content-Type': 'application/json' },
+  });
 }
 ```
 
@@ -1055,12 +1043,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [key, callback]);
 }
 ```
 
@@ -1069,45 +1057,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct: N instances = 1 listener**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from 'swr/subscription';
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
   useSWRSubscription('global-keydown', () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut('p', () => {
+    /* ... */
+  });
+  useKeyboardShortcut('k', () => {
+    /* ... */
+  });
   // ...
 }
 ```
@@ -1122,34 +1114,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener('touchstart', handleTouch);
+  document.addEventListener('wheel', handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener('touchstart', handleTouch);
+    document.removeEventListener('wheel', handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener('touchstart', handleTouch, { passive: true });
+  document.addEventListener('wheel', handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener('touchstart', handleTouch);
+    document.removeEventListener('wheel', handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
@@ -1166,43 +1158,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
     fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct: multiple instances share one request**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from 'swr';
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR('/api/users', fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from '@/lib/swr';
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR('/api/config', fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from 'swr/mutation';
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation('/api/user', updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
@@ -1218,18 +1210,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem('userConfig', JSON.stringify(fullUserObject));
+const data = localStorage.getItem('userConfig');
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = 'v2';
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -1237,21 +1229,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem('userConfig:v1');
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang });
+      localStorage.removeItem('userConfig:v1');
     }
   } catch {}
 }
@@ -1263,10 +1255,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      'prefs:v1',
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      }),
+    );
   } catch {}
 }
 ```
@@ -1293,15 +1288,15 @@ If a value can be computed from current props/state, do not store it in state or
 
 ```tsx
 function Form() {
-  const [firstName, setFirstName] = useState('First')
-  const [lastName, setLastName] = useState('Last')
-  const [fullName, setFullName] = useState('')
+  const [firstName, setFirstName] = useState('First');
+  const [lastName, setLastName] = useState('Last');
+  const [fullName, setFullName] = useState('');
 
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName)
-  }, [firstName, lastName])
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
 
-  return <p>{fullName}</p>
+  return <p>{fullName}</p>;
 }
 ```
 
@@ -1309,11 +1304,11 @@ function Form() {
 
 ```tsx
 function Form() {
-  const [firstName, setFirstName] = useState('First')
-  const [lastName, setLastName] = useState('Last')
-  const fullName = firstName + ' ' + lastName
+  const [firstName, setFirstName] = useState('First');
+  const [lastName, setLastName] = useState('Last');
+  const fullName = firstName + ' ' + lastName;
 
-  return <p>{fullName}</p>
+  return <p>{fullName}</p>;
 }
 ```
 
@@ -1329,14 +1324,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get('ref');
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1345,12 +1340,12 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get('ref');
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1367,10 +1362,10 @@ Calling `useMemo` and comparing hook dependencies may consume more resources tha
 ```tsx
 function Header({ user, notifications }: Props) {
   const isLoading = useMemo(() => {
-    return user.isLoading || notifications.isLoading
-  }, [user.isLoading, notifications.isLoading])
+    return user.isLoading || notifications.isLoading;
+  }, [user.isLoading, notifications.isLoading]);
 
-  if (isLoading) return <Skeleton />
+  if (isLoading) return <Skeleton />;
   // return some markup
 }
 ```
@@ -1379,9 +1374,9 @@ function Header({ user, notifications }: Props) {
 
 ```tsx
 function Header({ user, notifications }: Props) {
-  const isLoading = user.isLoading || notifications.isLoading
+  const isLoading = user.isLoading || notifications.isLoading;
 
-  if (isLoading) return <Skeleton />
+  if (isLoading) return <Skeleton />;
   // return some markup
 }
 ```
@@ -1429,12 +1424,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -1442,17 +1437,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
@@ -1468,16 +1463,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct: re-runs only when id changes**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -1486,17 +1481,17 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
 
 ### 5.7 Put Interaction Logic in Event Handlers
@@ -1509,17 +1504,17 @@ If a side effect is triggered by a specific user action (submit, click, drag), r
 
 ```tsx
 function Form() {
-  const [submitted, setSubmitted] = useState(false)
-  const theme = useContext(ThemeContext)
+  const [submitted, setSubmitted] = useState(false);
+  const theme = useContext(ThemeContext);
 
   useEffect(() => {
     if (submitted) {
-      post('/api/register')
-      showToast('Registered', theme)
+      post('/api/register');
+      showToast('Registered', theme);
     }
-  }, [submitted, theme])
+  }, [submitted, theme]);
 
-  return <button onClick={() => setSubmitted(true)}>Submit</button>
+  return <button onClick={() => setSubmitted(true)}>Submit</button>;
 }
 ```
 
@@ -1527,14 +1522,14 @@ function Form() {
 
 ```tsx
 function Form() {
-  const theme = useContext(ThemeContext)
+  const theme = useContext(ThemeContext);
 
   function handleSubmit() {
-    post('/api/register')
-    showToast('Registered', theme)
+    post('/api/register');
+    showToast('Registered', theme);
   }
 
-  return <button onClick={handleSubmit}>Submit</button>
+  return <button onClick={handleSubmit}>Submit</button>;
 }
 ```
 
@@ -1550,9 +1545,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />;
 }
 ```
 
@@ -1560,8 +1555,8 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />;
 }
 ```
 
@@ -1575,19 +1570,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items],
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1597,19 +1595,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1654,20 +1652,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState('');
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem('settings') || '{}'));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1676,20 +1672,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState('');
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem('settings');
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1707,29 +1703,29 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handler, { passive: true });
+    return () => window.removeEventListener('scroll', handler);
+  }, []);
 }
 ```
 
 **Correct: non-blocking updates**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from 'react';
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener('scroll', handler, { passive: true });
+    return () => window.removeEventListener('scroll', handler);
+  }, []);
 }
 ```
 
@@ -1743,13 +1739,13 @@ When a value changes frequently and you don't want a re-render on every update (
 
 ```tsx
 function Tracker() {
-  const [lastX, setLastX] = useState(0)
+  const [lastX, setLastX] = useState(0);
 
   useEffect(() => {
-    const onMove = (e: MouseEvent) => setLastX(e.clientX)
-    window.addEventListener('mousemove', onMove)
-    return () => window.removeEventListener('mousemove', onMove)
-  }, [])
+    const onMove = (e: MouseEvent) => setLastX(e.clientX);
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, []);
 
   return (
     <div
@@ -1762,7 +1758,7 @@ function Tracker() {
         background: 'black',
       }}
     />
-  )
+  );
 }
 ```
 
@@ -1770,20 +1766,20 @@ function Tracker() {
 
 ```tsx
 function Tracker() {
-  const lastXRef = useRef(0)
-  const dotRef = useRef<HTMLDivElement>(null)
+  const lastXRef = useRef(0);
+  const dotRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const onMove = (e: MouseEvent) => {
-      lastXRef.current = e.clientX
-      const node = dotRef.current
+      lastXRef.current = e.clientX;
+      const node = dotRef.current;
       if (node) {
-        node.style.transform = `translateX(${e.clientX}px)`
+        node.style.transform = `translateX(${e.clientX}px)`;
       }
-    }
-    window.addEventListener('mousemove', onMove)
-    return () => window.removeEventListener('mousemove', onMove)
-  }, [])
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, []);
 
   return (
     <div
@@ -1798,7 +1794,7 @@ function Tracker() {
         transform: 'translateX(0px)',
       }}
     />
-  )
+  );
 }
 ```
 
@@ -1821,15 +1817,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -1839,15 +1830,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
@@ -1873,15 +1860,15 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 ```tsx
 function MessageList({ messages }: { messages: Message[] }) {
   return (
-    <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+    <div className="h-screen overflow-y-auto">
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
@@ -1897,31 +1884,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="h-20 animate-pulse bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct: reuses same element**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="h-20 animate-pulse bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
@@ -1964,13 +1941,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem('theme') || 'light';
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -1980,21 +1953,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState('light');
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem('theme');
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -2006,9 +1975,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -2023,7 +1990,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
@@ -2035,13 +2002,13 @@ This pattern is especially useful for theme toggles, user preferences, authentic
 
 **Impact: LOW-MEDIUM (avoids noisy hydration warnings for known differences)**
 
-In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these *expected* mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
+In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these _expected_ mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
 
 **Incorrect: known mismatch warnings**
 
 ```tsx
 function Timestamp() {
-  return <span>{new Date().toLocaleString()}</span>
+  return <span>{new Date().toLocaleString()}</span>;
 }
 ```
 
@@ -2049,11 +2016,7 @@ function Timestamp() {
 
 ```tsx
 function Timestamp() {
-  return (
-    <span suppressHydrationWarning>
-      {new Date().toLocaleString()}
-    </span>
-  )
+  return <span suppressHydrationWarning>{new Date().toLocaleString()}</span>;
 }
 ```
 
@@ -2066,14 +2029,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from 'react';
 
 function Dropdown({ isOpen }: Props) {
   return (
     <Activity mode={isOpen ? 'visible' : 'hidden'}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
@@ -2089,11 +2052,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -2104,11 +2063,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
@@ -2125,17 +2080,17 @@ Use `useTransition` instead of manual `useState` for loading states. This provid
 
 ```tsx
 function SearchResults() {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = async (value: string) => {
-    setIsLoading(true)
-    setQuery(value)
-    const data = await fetchResults(value)
-    setResults(data)
-    setIsLoading(false)
-  }
+    setIsLoading(true);
+    setQuery(value);
+    const data = await fetchResults(value);
+    setResults(data);
+    setIsLoading(false);
+  };
 
   return (
     <>
@@ -2143,29 +2098,29 @@ function SearchResults() {
       {isLoading && <Spinner />}
       <ResultsList results={results} />
     </>
-  )
+  );
 }
 ```
 
 **Correct: useTransition with built-in pending state**
 
 ```tsx
-import { useTransition, useState } from 'react'
+import { useTransition, useState } from 'react';
 
 function SearchResults() {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState([])
-  const [isPending, startTransition] = useTransition()
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isPending, startTransition] = useTransition();
 
   const handleSearch = (value: string) => {
-    setQuery(value) // Update input immediately
-    
+    setQuery(value); // Update input immediately
+
     startTransition(async () => {
       // Fetch and update results
-      const data = await fetchResults(value)
-      setResults(data)
-    })
-  }
+      const data = await fetchResults(value);
+      setResults(data);
+    });
+  };
 
   return (
     <>
@@ -2173,7 +2128,7 @@ function SearchResults() {
       {isPending && <Spinner />}
       <ResultsList results={results} />
     </>
-  )
+  );
 }
 ```
 
@@ -2208,10 +2163,10 @@ Avoid interleaving style writes with layout reads. When you read a layout proper
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Each line invalidates style, but browser batches the recalculation
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
+  element.style.width = '100px';
+  element.style.height = '200px';
+  element.style.backgroundColor = 'blue';
+  element.style.border = '1px solid black';
 }
 ```
 
@@ -2219,10 +2174,10 @@ function updateElementStyles(element: HTMLElement) {
 
 ```typescript
 function layoutThrashing(element: HTMLElement) {
-  element.style.width = '100px'
-  const width = element.offsetWidth  // Forces reflow
-  element.style.height = '200px'
-  const height = element.offsetHeight  // Forces another reflow
+  element.style.width = '100px';
+  const width = element.offsetWidth; // Forces reflow
+  element.style.height = '200px';
+  const height = element.offsetHeight; // Forces another reflow
 }
 ```
 
@@ -2231,13 +2186,13 @@ function layoutThrashing(element: HTMLElement) {
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Batch all writes together
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
-  
+  element.style.width = '100px';
+  element.style.height = '200px';
+  element.style.backgroundColor = 'blue';
+  element.style.border = '1px solid black';
+
   // Read after all writes are done (single reflow)
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
@@ -2245,9 +2200,9 @@ function updateElementStyles(element: HTMLElement) {
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
-  
-  const { width, height } = element.getBoundingClientRect()
+  element.classList.add('highlighted-box');
+
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
@@ -2258,26 +2213,22 @@ function updateElementStyles(element: HTMLElement) {
 ```tsx
 // Incorrect: interleaving style changes with layout queries
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-  
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (ref.current && isHighlighted) {
-      ref.current.style.width = '100px'
-      const width = ref.current.offsetWidth // Forces layout
-      ref.current.style.height = '200px'
+      ref.current.style.width = '100px';
+      const width = ref.current.offsetWidth; // Forces layout
+      ref.current.style.height = '200px';
     }
-  }, [isHighlighted])
-  
-  return <div ref={ref}>Content</div>
+  }, [isHighlighted]);
+
+  return <div ref={ref}>Content</div>;
 }
 
 // Correct: toggle class
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  return (
-    <div className={isHighlighted ? 'highlighted-box' : ''}>
-      Content
-    </div>
-  )
+  return <div className={isHighlighted ? 'highlighted-box' : ''}>Content</div>;
 }
 ```
 
@@ -2295,10 +2246,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -2306,12 +2257,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
@@ -2329,17 +2280,17 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct: 1 lookup total**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
 
@@ -2358,7 +2309,7 @@ function ProjectList({ projects }: { projects: Project[] }) {
       {projects.map(project => {
         // slugify() called 100+ times for same project names
         const slug = slugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -2387,7 +2338,7 @@ function ProjectList({ projects }: { projects: Project[] }) {
       {projects.map(project => {
         // Computed only once per unique project name
         const slug = cachedSlugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -2398,20 +2349,20 @@ function ProjectList({ projects }: { projects: Project[] }) {
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes('auth=');
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
@@ -2429,7 +2380,7 @@ Reference: [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fa
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem('theme') ?? 'light';
 }
 // Called 10 times = 10 storage reads
 ```
@@ -2437,18 +2388,18 @@ function getTheme() {
 **Correct: Map cache**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -2457,15 +2408,13 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split('; ').map((c) => c.split('=')));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
@@ -2473,14 +2422,14 @@ function getCookie(name: string) {
 
 ```typescript
 window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+  if (e.key) storageCache.delete(e.key);
+});
 
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible') {
-    storageCache.clear()
+    storageCache.clear();
   }
-})
+});
 ```
 
 If storage can change externally (another tab, server-set cookies), invalidate cache:
@@ -2494,22 +2443,22 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect: 3 iterations**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct: 1 iteration**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
 
@@ -2526,7 +2475,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -2538,17 +2487,17 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
@@ -2572,22 +2521,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = '';
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = 'Email required';
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = 'Name required';
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -2597,14 +2546,14 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: 'Email required' };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: 'Name required' };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
 
@@ -2642,9 +2591,9 @@ function Highlighter({ text, query }: Props) {
 **Warning: global regex has mutable state**
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test('foo'); // true, lastIndex = 3
+regex.test('foo'); // false, lastIndex = 0
 ```
 
 Global regex (`/g`) has mutable `lastIndex` state:
@@ -2659,14 +2608,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -2676,8 +2625,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -2687,31 +2636,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -2720,9 +2669,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative: Math.min/Math.max for small arrays**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see [the fiddle](https://jsfiddle.net/qw1jabsx/4/). Use the loop approach for reliability.
@@ -2789,7 +2738,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 `.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
@@ -2823,9 +2772,9 @@ Do not put app-wide initialization that must run once per app load inside `useEf
 ```tsx
 function Comp() {
   useEffect(() => {
-    loadFromStorage()
-    checkAuthToken()
-  }, [])
+    loadFromStorage();
+    checkAuthToken();
+  }, []);
 
   // ...
 }
@@ -2834,15 +2783,15 @@ function Comp() {
 **Correct: once per app load**
 
 ```tsx
-let didInit = false
+let didInit = false;
 
 function Comp() {
   useEffect(() => {
-    if (didInit) return
-    didInit = true
-    loadFromStorage()
-    checkAuthToken()
-  }, [])
+    if (didInit) return;
+    didInit = true;
+    loadFromStorage();
+    checkAuthToken();
+  }, []);
 
   // ...
 }
@@ -2861,24 +2810,24 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
 **Correct: stable subscription**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from 'react';
 
 function useWindowEvent(event: string, handler: (e) => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
@@ -2896,12 +2845,12 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState('');
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -2911,13 +2860,13 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 import { useEffectEvent } from 'react';
 
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchEvent = useEffectEvent(onSearch)
+  const [query, setQuery] = useState('');
+  const onSearchEvent = useEffectEvent(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchEvent(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchEvent(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/SKILL.md b/.agent/skills/vercel-react-best-practices/SKILL.md
index 1ad7750..ee5279d 100644
--- a/.agent/skills/vercel-react-best-practices/SKILL.md
+++ b/.agent/skills/vercel-react-best-practices/SKILL.md
@@ -4,7 +4,7 @@ description: React and Next.js performance optimization guidelines from Vercel E
 license: MIT
 metadata:
   author: vercel
-  version: "1.0.0"
+  version: '1.0.0'
 ---
 
 # Vercel React Best Practices
@@ -14,6 +14,7 @@ Comprehensive performance optimization guide for React and Next.js applications,
 ## When to Apply
 
 Reference these guidelines when:
+
 - Writing new React components or Next.js pages
 - Implementing data fetching (client or server-side)
 - Reviewing code for performance issues
@@ -22,16 +23,16 @@ Reference these guidelines when:
 
 ## Rule Categories by Priority
 
-| Priority | Category | Impact | Prefix |
-|----------|----------|--------|--------|
-| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
-| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
-| 3 | Server-Side Performance | HIGH | `server-` |
-| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
-| 5 | Re-render Optimization | MEDIUM | `rerender-` |
-| 6 | Rendering Performance | MEDIUM | `rendering-` |
-| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
-| 8 | Advanced Patterns | LOW | `advanced-` |
+| Priority | Category                  | Impact      | Prefix       |
+| -------- | ------------------------- | ----------- | ------------ |
+| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
+| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
+| 3        | Server-Side Performance   | HIGH        | `server-`    |
+| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
+| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
+| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
+| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
+| 8        | Advanced Patterns         | LOW         | `advanced-`  |
 
 ## Quick Reference
 
@@ -126,6 +127,7 @@ rules/bundle-barrel-imports.md
 ```
 
 Each rule file contains:
+
 - Brief explanation of why it matters
 - Incorrect code example with explanation
 - Correct code example with explanation
diff --git a/.agent/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md b/.agent/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
index 97e7ade..c0a7770 100644
--- a/.agent/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
+++ b/.agent/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
@@ -14,9 +14,9 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
@@ -24,31 +24,31 @@ function useWindowEvent(event: string, handler: (e) => void) {
 
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
-  const handlerRef = useRef(handler)
+  const handlerRef = useRef(handler);
   useEffect(() => {
-    handlerRef.current = handler
-  }, [handler])
+    handlerRef.current = handler;
+  }, [handler]);
 
   useEffect(() => {
-    const listener = (e) => handlerRef.current(e)
-    window.addEventListener(event, listener)
-    return () => window.removeEventListener(event, listener)
-  }, [event])
+    const listener = (e) => handlerRef.current(e);
+    window.addEventListener(event, listener);
+    return () => window.removeEventListener(event, listener);
+  }, [event]);
 }
 ```
 
 **Alternative: use `useEffectEvent` if you're on latest React:**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from 'react';
 
 function useWindowEvent(event: string, handler: (e) => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/advanced-init-once.md b/.agent/skills/vercel-react-best-practices/rules/advanced-init-once.md
index 73ee38e..1cf8de7 100644
--- a/.agent/skills/vercel-react-best-practices/rules/advanced-init-once.md
+++ b/.agent/skills/vercel-react-best-practices/rules/advanced-init-once.md
@@ -14,9 +14,9 @@ Do not put app-wide initialization that must run once per app load inside `useEf
 ```tsx
 function Comp() {
   useEffect(() => {
-    loadFromStorage()
-    checkAuthToken()
-  }, [])
+    loadFromStorage();
+    checkAuthToken();
+  }, []);
 
   // ...
 }
@@ -25,15 +25,15 @@ function Comp() {
 **Correct (once per app load):**
 
 ```tsx
-let didInit = false
+let didInit = false;
 
 function Comp() {
   useEffect(() => {
-    if (didInit) return
-    didInit = true
-    loadFromStorage()
-    checkAuthToken()
-  }, [])
+    if (didInit) return;
+    didInit = true;
+    loadFromStorage();
+    checkAuthToken();
+  }, []);
 
   // ...
 }
diff --git a/.agent/skills/vercel-react-best-practices/rules/advanced-use-latest.md b/.agent/skills/vercel-react-best-practices/rules/advanced-use-latest.md
index 9c7cb50..54af616 100644
--- a/.agent/skills/vercel-react-best-practices/rules/advanced-use-latest.md
+++ b/.agent/skills/vercel-react-best-practices/rules/advanced-use-latest.md
@@ -13,12 +13,12 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState('');
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -28,12 +28,12 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 import { useEffectEvent } from 'react';
 
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchEvent = useEffectEvent(onSearch)
+  const [query, setQuery] = useState('');
+  const onSearchEvent = useEffectEvent(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchEvent(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchEvent(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/async-api-routes.md b/.agent/skills/vercel-react-best-practices/rules/async-api-routes.md
index 6feda1e..54a04a4 100644
--- a/.agent/skills/vercel-react-best-practices/rules/async-api-routes.md
+++ b/.agent/skills/vercel-react-best-practices/rules/async-api-routes.md
@@ -13,10 +13,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -24,14 +24,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/async-defer-await.md b/.agent/skills/vercel-react-best-practices/rules/async-defer-await.md
index ea7082a..9a7acbd 100644
--- a/.agent/skills/vercel-react-best-practices/rules/async-defer-await.md
+++ b/.agent/skills/vercel-react-best-practices/rules/async-defer-await.md
@@ -13,15 +13,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -31,12 +31,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -45,35 +45,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: 'Not found' };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: 'Forbidden' };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: 'Not found' };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: 'Forbidden' };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/async-dependencies.md b/.agent/skills/vercel-react-best-practices/rules/async-dependencies.md
index 0484eba..d6f7227 100644
--- a/.agent/skills/vercel-react-best-practices/rules/async-dependencies.md
+++ b/.agent/skills/vercel-react-best-practices/rules/async-dependencies.md
@@ -12,25 +12,26 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect (profile waits for config unnecessarily):**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct (config and profile run in parallel):**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from 'better-all';
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 **Alternative without extra dependencies:**
@@ -38,14 +39,10 @@ const { user, config, profile } = await all({
 We can also create all the promises first, and do `Promise.all()` at the end.
 
 ```typescript
-const userPromise = fetchUser()
-const profilePromise = userPromise.then(user => fetchProfile(user.id))
+const userPromise = fetchUser();
+const profilePromise = userPromise.then((user) => fetchProfile(user.id));
 
-const [user, config, profile] = await Promise.all([
-  userPromise,
-  fetchConfig(),
-  profilePromise
-])
+const [user, config, profile] = await Promise.all([userPromise, fetchConfig(), profilePromise]);
 ```
 
 Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
diff --git a/.agent/skills/vercel-react-best-practices/rules/async-parallel.md b/.agent/skills/vercel-react-best-practices/rules/async-parallel.md
index 64133f6..f7d13a8 100644
--- a/.agent/skills/vercel-react-best-practices/rules/async-parallel.md
+++ b/.agent/skills/vercel-react-best-practices/rules/async-parallel.md
@@ -12,17 +12,13 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect (sequential execution, 3 round trips):**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct (parallel execution, 1 round trip):**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md b/.agent/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
index 1fbc05b..790027e 100644
--- a/.agent/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
+++ b/.agent/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
@@ -13,8 +13,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -24,7 +24,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -45,12 +45,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -61,8 +61,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -73,17 +73,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md b/.agent/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
index ee48f32..9fc373f 100644
--- a/.agent/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
+++ b/.agent/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
@@ -16,24 +16,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect (imports entire library):**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from 'lucide-react';
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from '@mui/material';
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct (imports only what you need):**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from 'lucide-react/dist/esm/icons/check';
+import X from 'lucide-react/dist/esm/icons/x';
+import Menu from 'lucide-react/dist/esm/icons/menu';
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 // Loads only what you use
 ```
 
@@ -43,12 +43,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ['lucide-react', '@mui/material'],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from 'lucide-react';
 // Automatically transformed to direct imports at build time
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/bundle-conditional.md b/.agent/skills/vercel-react-best-practices/rules/bundle-conditional.md
index 99d6fc9..e45d6a9 100644
--- a/.agent/skills/vercel-react-best-practices/rules/bundle-conditional.md
+++ b/.agent/skills/vercel-react-best-practices/rules/bundle-conditional.md
@@ -12,19 +12,25 @@ Load large data or modules only when a feature is activated.
 **Example (lazy-load animation frames):**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
     if (enabled && !frames && typeof window !== 'undefined') {
       import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md b/.agent/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
index db041d1..19bc102 100644
--- a/.agent/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
+++ b/.agent/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
@@ -12,7 +12,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect (blocks initial bundle):**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from '@vercel/analytics/react';
 
 export default function RootLayout({ children }) {
   return (
@@ -22,19 +22,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct (loads after hydration):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import('@vercel/analytics/react').then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -44,6 +43,6 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md b/.agent/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
index 60b6269..33dbc79 100644
--- a/.agent/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
+++ b/.agent/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
@@ -12,24 +12,23 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect (Monaco bundles with main chunk ~300KB):**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from './monaco-editor';
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct (Monaco loads on demand):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import('./monaco-editor').then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/bundle-preload.md b/.agent/skills/vercel-react-best-practices/rules/bundle-preload.md
index 7000504..a1211bb 100644
--- a/.agent/skills/vercel-react-best-practices/rules/bundle-preload.md
+++ b/.agent/skills/vercel-react-best-practices/rules/bundle-preload.md
@@ -15,19 +15,15 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
     if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+      void import('./monaco-editor');
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -37,13 +33,11 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
     if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+      void import('./monaco-editor').then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/client-event-listeners.md b/.agent/skills/vercel-react-best-practices/rules/client-event-listeners.md
index aad4ae9..68d0d35 100644
--- a/.agent/skills/vercel-react-best-practices/rules/client-event-listeners.md
+++ b/.agent/skills/vercel-react-best-practices/rules/client-event-listeners.md
@@ -16,12 +16,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [key, callback]);
 }
 ```
 
@@ -30,45 +30,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct (N instances = 1 listener):**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from 'swr/subscription';
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
   useSWRSubscription('global-keydown', () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut('p', () => {
+    /* ... */
+  });
+  useKeyboardShortcut('k', () => {
+    /* ... */
+  });
   // ...
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/client-localstorage-schema.md b/.agent/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
index d30a1a7..d3e12db 100644
--- a/.agent/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
+++ b/.agent/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
@@ -13,18 +13,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem('userConfig', JSON.stringify(fullUserObject));
+const data = localStorage.getItem('userConfig');
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = 'v2';
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -32,21 +32,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem('userConfig:v1');
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang });
+      localStorage.removeItem('userConfig:v1');
     }
   } catch {}
 }
@@ -58,10 +58,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      'prefs:v1',
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      }),
+    );
   } catch {}
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md b/.agent/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
index ce39a88..df033a2 100644
--- a/.agent/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
+++ b/.agent/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
@@ -13,34 +13,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener('touchstart', handleTouch);
+  document.addEventListener('wheel', handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener('touchstart', handleTouch);
+    document.removeEventListener('wheel', handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener('touchstart', handleTouch, { passive: true });
+  document.addEventListener('wheel', handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener('touchstart', handleTouch);
+    document.removeEventListener('wheel', handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
diff --git a/.agent/skills/vercel-react-best-practices/rules/client-swr-dedup.md b/.agent/skills/vercel-react-best-practices/rules/client-swr-dedup.md
index 2a430f2..cbfee00 100644
--- a/.agent/skills/vercel-react-best-practices/rules/client-swr-dedup.md
+++ b/.agent/skills/vercel-react-best-practices/rules/client-swr-dedup.md
@@ -13,43 +13,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
     fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct (multiple instances share one request):**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from 'swr';
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR('/api/users', fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from '@/lib/swr';
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR('/api/config', fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from 'swr/mutation';
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation('/api/user', updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-batch-dom-css.md b/.agent/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
index a62d84e..a034c7e 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
@@ -10,55 +10,60 @@ tags: javascript, dom, css, performance, reflow, layout-thrashing
 Avoid interleaving style writes with layout reads. When you read a layout property (like `offsetWidth`, `getBoundingClientRect()`, or `getComputedStyle()`) between style changes, the browser is forced to trigger a synchronous reflow.
 
 **This is OK (browser batches style changes):**
+
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Each line invalidates style, but browser batches the recalculation
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
+  element.style.width = '100px';
+  element.style.height = '200px';
+  element.style.backgroundColor = 'blue';
+  element.style.border = '1px solid black';
 }
 ```
 
 **Incorrect (interleaved reads and writes force reflows):**
+
 ```typescript
 function layoutThrashing(element: HTMLElement) {
-  element.style.width = '100px'
-  const width = element.offsetWidth  // Forces reflow
-  element.style.height = '200px'
-  const height = element.offsetHeight  // Forces another reflow
+  element.style.width = '100px';
+  const width = element.offsetWidth; // Forces reflow
+  element.style.height = '200px';
+  const height = element.offsetHeight; // Forces another reflow
 }
 ```
 
 **Correct (batch writes, then read once):**
+
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Batch all writes together
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
-  
+  element.style.width = '100px';
+  element.style.height = '200px';
+  element.style.backgroundColor = 'blue';
+  element.style.border = '1px solid black';
+
   // Read after all writes are done (single reflow)
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
 **Correct (batch reads, then writes):**
+
 ```typescript
 function avoidThrashing(element: HTMLElement) {
   // Read phase - all layout queries first
-  const rect1 = element.getBoundingClientRect()
-  const offsetWidth = element.offsetWidth
-  const offsetHeight = element.offsetHeight
-  
+  const rect1 = element.getBoundingClientRect();
+  const offsetWidth = element.offsetWidth;
+  const offsetHeight = element.offsetHeight;
+
   // Write phase - all style changes after
-  element.style.width = '100px'
-  element.style.height = '200px'
+  element.style.width = '100px';
+  element.style.height = '200px';
 }
 ```
 
 **Better: use CSS classes**
+
 ```css
 .highlighted-box {
   width: 100px;
@@ -67,38 +72,36 @@ function avoidThrashing(element: HTMLElement) {
   border: 1px solid black;
 }
 ```
+
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
-  
-  const { width, height } = element.getBoundingClientRect()
+  element.classList.add('highlighted-box');
+
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
 **React example:**
+
 ```tsx
 // Incorrect: interleaving style changes with layout queries
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-  
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (ref.current && isHighlighted) {
-      ref.current.style.width = '100px'
-      const width = ref.current.offsetWidth // Forces layout
-      ref.current.style.height = '200px'
+      ref.current.style.width = '100px';
+      const width = ref.current.offsetWidth; // Forces layout
+      ref.current.style.height = '200px';
     }
-  }, [isHighlighted])
-  
-  return <div ref={ref}>Content</div>
+  }, [isHighlighted]);
+
+  return <div ref={ref}>Content</div>;
 }
 
 // Correct: toggle class
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  return (
-    <div className={isHighlighted ? 'highlighted-box' : ''}>
-      Content
-    </div>
-  )
+  return <div className={isHighlighted ? 'highlighted-box' : ''}>Content</div>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-cache-function-results.md b/.agent/skills/vercel-react-best-practices/rules/js-cache-function-results.md
index 180f8ac..ed49e92 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-cache-function-results.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-cache-function-results.md
@@ -18,7 +18,7 @@ function ProjectList({ projects }: { projects: Project[] }) {
       {projects.map(project => {
         // slugify() called 100+ times for same project names
         const slug = slugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -47,7 +47,7 @@ function ProjectList({ projects }: { projects: Project[] }) {
       {projects.map(project => {
         // Computed only once per unique project name
         const slug = cachedSlugify(project.name)
-        
+
         return <ProjectCard key={project.id} slug={slug} />
       })}
     </div>
@@ -58,20 +58,20 @@ function ProjectList({ projects }: { projects: Project[] }) {
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes('auth=');
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-cache-property-access.md b/.agent/skills/vercel-react-best-practices/rules/js-cache-property-access.md
index 39eec90..291f109 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-cache-property-access.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-cache-property-access.md
@@ -13,16 +13,16 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct (1 lookup total):**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-cache-storage.md b/.agent/skills/vercel-react-best-practices/rules/js-cache-storage.md
index aa4a30c..5bfd7b1 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-cache-storage.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-cache-storage.md
@@ -13,7 +13,7 @@ tags: javascript, localStorage, storage, caching, performance
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem('theme') ?? 'light';
 }
 // Called 10 times = 10 storage reads
 ```
@@ -21,18 +21,18 @@ function getTheme() {
 **Correct (Map cache):**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -41,15 +41,13 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split('; ').map((c) => c.split('=')));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
@@ -59,12 +57,12 @@ If storage can change externally (another tab, server-set cookies), invalidate c
 
 ```typescript
 window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+  if (e.key) storageCache.delete(e.key);
+});
 
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible') {
-    storageCache.clear()
+    storageCache.clear();
   }
-})
+});
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-combine-iterations.md b/.agent/skills/vercel-react-best-practices/rules/js-combine-iterations.md
index 044d017..f1e2518 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-combine-iterations.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-combine-iterations.md
@@ -12,21 +12,21 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect (3 iterations):**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct (1 iteration):**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-early-exit.md b/.agent/skills/vercel-react-best-practices/rules/js-early-exit.md
index f46cb89..64adbc1 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-early-exit.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-early-exit.md
@@ -13,22 +13,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = '';
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = 'Email required';
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = 'Name required';
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -38,13 +38,13 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: 'Email required' };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: 'Name required' };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-hoist-regexp.md b/.agent/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
index dae3fef..da7e72f 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
@@ -39,7 +39,7 @@ function Highlighter({ text, query }: Props) {
 Global regex (`/g`) has mutable `lastIndex` state:
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test('foo'); // true, lastIndex = 3
+regex.test('foo'); // false, lastIndex = 0
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-index-maps.md b/.agent/skills/vercel-react-best-practices/rules/js-index-maps.md
index 9d357a0..1fbaeda 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-index-maps.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-index-maps.md
@@ -13,10 +13,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -24,12 +24,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-length-check-first.md b/.agent/skills/vercel-react-best-practices/rules/js-length-check-first.md
index 8b89573..8bb7973 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-length-check-first.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-length-check-first.md
@@ -16,7 +16,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -28,21 +28,22 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
 This new approach is more efficient because:
+
 - It avoids the overhead of sorting and joining the arrays when lengths differ
 - It avoids consuming memory for the joined strings (especially important for large arrays)
 - It avoids mutating the original arrays
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-min-max-loop.md b/.agent/skills/vercel-react-best-practices/rules/js-min-max-loop.md
index 4b6656e..a83a760 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-min-max-loop.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-min-max-loop.md
@@ -13,14 +13,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -30,8 +30,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -41,31 +41,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -74,9 +74,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative (Math.min/Math.max for small arrays):**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see [the fiddle](https://jsfiddle.net/qw1jabsx/4/). Use the loop approach for reliability.
diff --git a/.agent/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md b/.agent/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
index eae8b3f..e6d5df3 100644
--- a/.agent/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
+++ b/.agent/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
@@ -46,7 +46,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 **Other immutable array methods:**
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-activity.md b/.agent/skills/vercel-react-best-practices/rules/rendering-activity.md
index c957a49..5989a87 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-activity.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-activity.md
@@ -12,14 +12,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from 'react';
 
 function Dropdown({ isOpen }: Props) {
   return (
     <Activity mode={isOpen ? 'visible' : 'hidden'}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md b/.agent/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
index 646744c..3707302 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
@@ -14,15 +14,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -32,15 +27,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-conditional-render.md b/.agent/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
index 7e866f5..bbafa14 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
@@ -13,11 +13,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -28,11 +24,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-content-visibility.md b/.agent/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
index aa66563..1aebfab 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
@@ -23,15 +23,15 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 ```tsx
 function MessageList({ messages }: { messages: Message[] }) {
   return (
-    <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+    <div className="h-screen overflow-y-auto">
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md b/.agent/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
index 32d2f3f..fea1751 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
@@ -13,31 +13,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="h-20 animate-pulse bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct (reuses same element):**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="h-20 animate-pulse bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md b/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
index 5cf0e79..1d12d66 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
@@ -14,13 +14,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem('theme') || 'light';
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -30,21 +26,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState('light');
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem('theme');
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -56,9 +48,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -73,7 +63,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md b/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
index 24ba251..86c1a33 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
@@ -7,13 +7,13 @@ tags: rendering, hydration, ssr, nextjs
 
 ## Suppress Expected Hydration Mismatches
 
-In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these *expected* mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
+In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these _expected_ mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
 
 **Incorrect (known mismatch warnings):**
 
 ```tsx
 function Timestamp() {
-  return <span>{new Date().toLocaleString()}</span>
+  return <span>{new Date().toLocaleString()}</span>;
 }
 ```
 
@@ -21,10 +21,6 @@ function Timestamp() {
 
 ```tsx
 function Timestamp() {
-  return (
-    <span suppressHydrationWarning>
-      {new Date().toLocaleString()}
-    </span>
-  )
+  return <span suppressHydrationWarning>{new Date().toLocaleString()}</span>;
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md b/.agent/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md
index 0c1b0b9..ae2dd6d 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md
@@ -13,17 +13,17 @@ Use `useTransition` instead of manual `useState` for loading states. This provid
 
 ```tsx
 function SearchResults() {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = async (value: string) => {
-    setIsLoading(true)
-    setQuery(value)
-    const data = await fetchResults(value)
-    setResults(data)
-    setIsLoading(false)
-  }
+    setIsLoading(true);
+    setQuery(value);
+    const data = await fetchResults(value);
+    setResults(data);
+    setIsLoading(false);
+  };
 
   return (
     <>
@@ -31,29 +31,29 @@ function SearchResults() {
       {isLoading && <Spinner />}
       <ResultsList results={results} />
     </>
-  )
+  );
 }
 ```
 
 **Correct (useTransition with built-in pending state):**
 
 ```tsx
-import { useTransition, useState } from 'react'
+import { useTransition, useState } from 'react';
 
 function SearchResults() {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState([])
-  const [isPending, startTransition] = useTransition()
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isPending, startTransition] = useTransition();
 
   const handleSearch = (value: string) => {
-    setQuery(value) // Update input immediately
-    
+    setQuery(value); // Update input immediately
+
     startTransition(async () => {
       // Fetch and update results
-      const data = await fetchResults(value)
-      setResults(data)
-    })
-  }
+      const data = await fetchResults(value);
+      setResults(data);
+    });
+  };
 
   return (
     <>
@@ -61,7 +61,7 @@ function SearchResults() {
       {isPending && <Spinner />}
       <ResultsList results={results} />
     </>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.agent/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
index e867c95..9dd51b3 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -13,14 +13,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get('ref');
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -29,11 +29,11 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get('ref');
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-dependencies.md b/.agent/skills/vercel-react-best-practices/rules/rerender-dependencies.md
index 47a4d92..bd7795e 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-dependencies.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-dependencies.md
@@ -13,16 +13,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct (re-runs only when id changes):**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -31,15 +31,15 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md b/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md
index 3d9fe40..cbe49a9 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md
@@ -13,15 +13,15 @@ If a value can be computed from current props/state, do not store it in state or
 
 ```tsx
 function Form() {
-  const [firstName, setFirstName] = useState('First')
-  const [lastName, setLastName] = useState('Last')
-  const [fullName, setFullName] = useState('')
+  const [firstName, setFirstName] = useState('First');
+  const [lastName, setLastName] = useState('Last');
+  const [fullName, setFullName] = useState('');
 
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName)
-  }, [firstName, lastName])
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
 
-  return <p>{fullName}</p>
+  return <p>{fullName}</p>;
 }
 ```
 
@@ -29,11 +29,11 @@ function Form() {
 
 ```tsx
 function Form() {
-  const [firstName, setFirstName] = useState('First')
-  const [lastName, setLastName] = useState('Last')
-  const fullName = firstName + ' ' + lastName
+  const [firstName, setFirstName] = useState('First');
+  const [lastName, setLastName] = useState('Last');
+  const fullName = firstName + ' ' + lastName;
 
-  return <p>{fullName}</p>
+  return <p>{fullName}</p>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state.md b/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state.md
index e5c899f..8eb2c93 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-derived-state.md
@@ -13,9 +13,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />;
 }
 ```
 
@@ -23,7 +23,7 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />;
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md b/.agent/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
index b004ef4..fe55b02 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
@@ -13,19 +13,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items],
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -35,19 +38,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md b/.agent/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
index 4ecb350..556a301 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
@@ -14,20 +14,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState('');
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem('settings') || '{}'));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -36,20 +34,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState('');
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem('settings');
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md b/.agent/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md
index 6357049..c250eba 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md
@@ -1,10 +1,8 @@
 ---
-
 title: Extract Default Non-primitive Parameter Value from Memoized Component to Constant
 impact: MEDIUM
 impactDescription: restores memoization by using a constant for default value
 tags: rerender, memo, optimization
-
 ---
 
 ## Extract Default Non-primitive Parameter Value from Memoized Component to Constant
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-memo.md b/.agent/skills/vercel-react-best-practices/rules/rerender-memo.md
index f8982ab..0de3aa3 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-memo.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-memo.md
@@ -14,12 +14,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -27,17 +27,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md b/.agent/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
index dd58a1a..8a4f041 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
@@ -13,17 +13,17 @@ If a side effect is triggered by a specific user action (submit, click, drag), r
 
 ```tsx
 function Form() {
-  const [submitted, setSubmitted] = useState(false)
-  const theme = useContext(ThemeContext)
+  const [submitted, setSubmitted] = useState(false);
+  const theme = useContext(ThemeContext);
 
   useEffect(() => {
     if (submitted) {
-      post('/api/register')
-      showToast('Registered', theme)
+      post('/api/register');
+      showToast('Registered', theme);
     }
-  }, [submitted, theme])
+  }, [submitted, theme]);
 
-  return <button onClick={() => setSubmitted(true)}>Submit</button>
+  return <button onClick={() => setSubmitted(true)}>Submit</button>;
 }
 ```
 
@@ -31,14 +31,14 @@ function Form() {
 
 ```tsx
 function Form() {
-  const theme = useContext(ThemeContext)
+  const theme = useContext(ThemeContext);
 
   function handleSubmit() {
-    post('/api/register')
-    showToast('Registered', theme)
+    post('/api/register');
+    showToast('Registered', theme);
   }
 
-  return <button onClick={handleSubmit}>Submit</button>
+  return <button onClick={handleSubmit}>Submit</button>;
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md b/.agent/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md
index 59dfab0..9c49b6f 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md
@@ -15,10 +15,10 @@ Calling `useMemo` and comparing hook dependencies may consume more resources tha
 ```tsx
 function Header({ user, notifications }: Props) {
   const isLoading = useMemo(() => {
-    return user.isLoading || notifications.isLoading
-  }, [user.isLoading, notifications.isLoading])
+    return user.isLoading || notifications.isLoading;
+  }, [user.isLoading, notifications.isLoading]);
 
-  if (isLoading) return <Skeleton />
+  if (isLoading) return <Skeleton />;
   // return some markup
 }
 ```
@@ -27,9 +27,9 @@ function Header({ user, notifications }: Props) {
 
 ```tsx
 function Header({ user, notifications }: Props) {
-  const isLoading = user.isLoading || notifications.isLoading
+  const isLoading = user.isLoading || notifications.isLoading;
 
-  if (isLoading) return <Skeleton />
+  if (isLoading) return <Skeleton />;
   // return some markup
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-transitions.md b/.agent/skills/vercel-react-best-practices/rules/rerender-transitions.md
index d99f43f..8bc3e24 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-transitions.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-transitions.md
@@ -13,28 +13,28 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handler, { passive: true });
+    return () => window.removeEventListener('scroll', handler);
+  }, []);
 }
 ```
 
 **Correct (non-blocking updates):**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from 'react';
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener('scroll', handler, { passive: true });
+    return () => window.removeEventListener('scroll', handler);
+  }, []);
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md b/.agent/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md
index cf04b81..287d668 100644
--- a/.agent/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md
+++ b/.agent/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md
@@ -13,13 +13,13 @@ When a value changes frequently and you don't want a re-render on every update (
 
 ```tsx
 function Tracker() {
-  const [lastX, setLastX] = useState(0)
+  const [lastX, setLastX] = useState(0);
 
   useEffect(() => {
-    const onMove = (e: MouseEvent) => setLastX(e.clientX)
-    window.addEventListener('mousemove', onMove)
-    return () => window.removeEventListener('mousemove', onMove)
-  }, [])
+    const onMove = (e: MouseEvent) => setLastX(e.clientX);
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, []);
 
   return (
     <div
@@ -32,7 +32,7 @@ function Tracker() {
         background: 'black',
       }}
     />
-  )
+  );
 }
 ```
 
@@ -40,20 +40,20 @@ function Tracker() {
 
 ```tsx
 function Tracker() {
-  const lastXRef = useRef(0)
-  const dotRef = useRef<HTMLDivElement>(null)
+  const lastXRef = useRef(0);
+  const dotRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const onMove = (e: MouseEvent) => {
-      lastXRef.current = e.clientX
-      const node = dotRef.current
+      lastXRef.current = e.clientX;
+      const node = dotRef.current;
       if (node) {
-        node.style.transform = `translateX(${e.clientX}px)`
+        node.style.transform = `translateX(${e.clientX}px)`;
       }
-    }
-    window.addEventListener('mousemove', onMove)
-    return () => window.removeEventListener('mousemove', onMove)
-  }, [])
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, []);
 
   return (
     <div
@@ -68,6 +68,6 @@ function Tracker() {
         transform: 'translateX(0px)',
       }}
     />
-  )
+  );
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-after-nonblocking.md b/.agent/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
index e8f5b26..ecbac54 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
@@ -12,46 +12,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect (blocks response):**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from '@/app/utils';
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
+  const userAgent = request.headers.get('user-agent') || 'unknown';
+  await logUserAction({ userAgent });
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { 'Content-Type': 'application/json' },
+  });
 }
 ```
 
 **Correct (non-blocking):**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from 'next/server';
+import { headers, cookies } from 'next/headers';
+import { logUserAction } from '@/app/utils';
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
+    const userAgent = (await headers()).get('user-agent') || 'unknown';
+    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous';
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { 'Content-Type': 'application/json' },
+  });
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-auth-actions.md b/.agent/skills/vercel-react-best-practices/rules/server-auth-actions.md
index ee82c04..809898c 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-auth-actions.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-auth-actions.md
@@ -16,80 +16,80 @@ Next.js documentation explicitly states: "Treat Server Actions with the same sec
 **Incorrect (no authentication check):**
 
 ```typescript
-'use server'
+'use server';
 
 export async function deleteUser(userId: string) {
   // Anyone can call this! No auth check
-  await db.user.delete({ where: { id: userId } })
-  return { success: true }
+  await db.user.delete({ where: { id: userId } });
+  return { success: true };
 }
 ```
 
 **Correct (authentication inside the action):**
 
 ```typescript
-'use server'
+'use server';
 
-import { verifySession } from '@/lib/auth'
-import { unauthorized } from '@/lib/errors'
+import { verifySession } from '@/lib/auth';
+import { unauthorized } from '@/lib/errors';
 
 export async function deleteUser(userId: string) {
   // Always check auth inside the action
-  const session = await verifySession()
-  
+  const session = await verifySession();
+
   if (!session) {
-    throw unauthorized('Must be logged in')
+    throw unauthorized('Must be logged in');
   }
-  
+
   // Check authorization too
   if (session.user.role !== 'admin' && session.user.id !== userId) {
-    throw unauthorized('Cannot delete other users')
+    throw unauthorized('Cannot delete other users');
   }
-  
-  await db.user.delete({ where: { id: userId } })
-  return { success: true }
+
+  await db.user.delete({ where: { id: userId } });
+  return { success: true };
 }
 ```
 
 **With input validation:**
 
 ```typescript
-'use server'
+'use server';
 
-import { verifySession } from '@/lib/auth'
-import { z } from 'zod'
+import { verifySession } from '@/lib/auth';
+import { z } from 'zod';
 
 const updateProfileSchema = z.object({
   userId: z.string().uuid(),
   name: z.string().min(1).max(100),
-  email: z.string().email()
-})
+  email: z.string().email(),
+});
 
 export async function updateProfile(data: unknown) {
   // Validate input first
-  const validated = updateProfileSchema.parse(data)
-  
+  const validated = updateProfileSchema.parse(data);
+
   // Then authenticate
-  const session = await verifySession()
+  const session = await verifySession();
   if (!session) {
-    throw new Error('Unauthorized')
+    throw new Error('Unauthorized');
   }
-  
+
   // Then authorize
   if (session.user.id !== validated.userId) {
-    throw new Error('Can only update own profile')
+    throw new Error('Can only update own profile');
   }
-  
+
   // Finally perform the mutation
   await db.user.update({
     where: { id: validated.userId },
     data: {
       name: validated.name,
-      email: validated.email
-    }
-  })
-  
-  return { success: true }
+      email: validated.email,
+    },
+  });
+
+  return { success: true };
 }
 ```
 
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-cache-lru.md b/.agent/skills/vercel-react-best-practices/rules/server-cache-lru.md
index ef6938a..0872259 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-cache-lru.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-cache-lru.md
@@ -12,20 +12,20 @@ tags: server, cache, lru, cross-request
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from 'lru-cache';
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-cache-react.md b/.agent/skills/vercel-react-best-practices/rules/server-cache-react.md
index 87c9ca3..d7c9640 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-cache-react.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-cache-react.md
@@ -12,15 +12,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from 'react';
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -33,32 +33,32 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct (cache hit):**
 
 ```typescript
 const getUser = cache(async (uid: number) => {
-  return await db.user.findUnique({ where: { id: uid } })
-})
+  return await db.user.findUnique({ where: { id: uid } });
+});
 
 // Primitive args use value equality
-getUser(1)
-getUser(1)  // Cache hit, returns cached result
+getUser(1);
+getUser(1); // Cache hit, returns cached result
 ```
 
 If you must pass objects, pass the same reference:
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 **Next.js-Specific Note:**
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-dedup-props.md b/.agent/skills/vercel-react-best-practices/rules/server-dedup-props.md
index fb24a25..6727d7b 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-dedup-props.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-dedup-props.md
@@ -22,11 +22,11 @@ RSC→client serialization deduplicates by object reference, not value. Same ref
 
 ```tsx
 // RSC: send once
-<ClientList usernames={usernames} />
+<ClientList usernames={usernames} />;
 
 // Client: transform there
-'use client'
-const sorted = useMemo(() => [...usernames].sort(), [usernames])
+('use client');
+const sorted = useMemo(() => [...usernames].sort(), [usernames]);
 ```
 
 **Nested deduplication behavior:**
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-parallel-fetching.md b/.agent/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
index 1affc83..8d78b54 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
@@ -13,18 +13,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -32,13 +32,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -47,7 +47,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -55,13 +55,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -70,7 +70,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -78,6 +78,6 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
diff --git a/.agent/skills/vercel-react-best-practices/rules/server-serialization.md b/.agent/skills/vercel-react-best-practices/rules/server-serialization.md
index 39c5c41..5a6beb2 100644
--- a/.agent/skills/vercel-react-best-practices/rules/server-serialization.md
+++ b/.agent/skills/vercel-react-best-practices/rules/server-serialization.md
@@ -13,13 +13,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+('use client');
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -27,12 +27,12 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+('use client');
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
diff --git a/.agent/skills/web-design-guidelines/SKILL.md b/.agent/skills/web-design-guidelines/SKILL.md
index ceae92a..fcaa33a 100644
--- a/.agent/skills/web-design-guidelines/SKILL.md
+++ b/.agent/skills/web-design-guidelines/SKILL.md
@@ -3,7 +3,7 @@ name: web-design-guidelines
 description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
 metadata:
   author: vercel
-  version: "1.0.0"
+  version: '1.0.0'
   argument-hint: <file-or-pattern>
 ---
 
@@ -31,6 +31,7 @@ Use WebFetch to retrieve the latest rules. The fetched content contains all the
 ## Usage
 
 When a user provides a file or pattern argument:
+
 1. Fetch guidelines from the source URL above
 2. Read the specified files
 3. Apply all rules from the fetched guidelines
diff --git a/.agent/workflows/opsx-apply.md b/.agent/workflows/opsx-apply.md
index 494e10e..fa046f6 100644
--- a/.agent/workflows/opsx-apply.md
+++ b/.agent/workflows/opsx-apply.md
@@ -18,9 +18,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -132,6 +134,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.agent/workflows/opsx-archive.md b/.agent/workflows/opsx-archive.md
index 4e2ee18..2f4f086 100644
--- a/.agent/workflows/opsx-archive.md
+++ b/.agent/workflows/opsx-archive.md
@@ -61,6 +61,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -145,6 +146,7 @@ Target archive directory already exists.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.agent/workflows/opsx-bulk-archive.md b/.agent/workflows/opsx-bulk-archive.md
index f8e773f..d6a3460 100644
--- a/.agent/workflows/opsx-bulk-archive.md
+++ b/.agent/workflows/opsx-bulk-archive.md
@@ -30,16 +30,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -59,18 +59,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -86,12 +86,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -100,7 +102,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -114,20 +115,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -150,6 +152,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -158,6 +161,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -173,6 +177,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -226,6 +231,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.agent/workflows/opsx-continue.md b/.agent/workflows/opsx-continue.md
index 24b480d..5a99e3a 100644
--- a/.agent/workflows/opsx-continue.md
+++ b/.agent/workflows/opsx-continue.md
@@ -23,9 +23,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -33,7 +35,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -41,7 +43,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change with `/opsx:apply` or archive it with `/opsx:archive`."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -64,7 +66,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -78,6 +80,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -91,6 +94,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -100,6 +104,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.agent/workflows/opsx-explore.md b/.agent/workflows/opsx-explore.md
index fd58862..412fa3d 100644
--- a/.agent/workflows/opsx-explore.md
+++ b/.agent/workflows/opsx-explore.md
@@ -9,6 +9,7 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 **This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
 
 **Input**: The argument after `/opsx:explore` is whatever the user wants to think about. Could be:
+
 - A vague idea: "real-time collaboration"
 - A specific problem: "the auth system is getting unwieldy"
 - A change name: "add-dark-mode" (to explore in context of that change)
@@ -33,24 +34,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -69,6 +74,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -82,11 +88,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -117,14 +125,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
diff --git a/.agent/workflows/opsx-ff.md b/.agent/workflows/opsx-ff.md
index 6b3dc00..448954a 100644
--- a/.agent/workflows/opsx-ff.md
+++ b/.agent/workflows/opsx-ff.md
@@ -11,6 +11,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -18,15 +19,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -38,30 +43,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -71,6 +76,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -84,6 +90,7 @@ After completing all artifacts, summarize:
 - Use the `template` as a starting point, filling in based on context
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.agent/workflows/opsx-new.md b/.agent/workflows/opsx-new.md
index ec2253d..eeb4aa7 100644
--- a/.agent/workflows/opsx-new.md
+++ b/.agent/workflows/opsx-new.md
@@ -11,6 +11,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -28,23 +29,29 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema. Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -52,6 +59,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -59,6 +67,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Run `/opsx:continue` or just describe what this change is about and I'll draft it."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.agent/workflows/opsx-onboard.md b/.agent/workflows/opsx-onboard.md
index 1414f1e..e087af4 100644
--- a/.agent/workflows/opsx-onboard.md
+++ b/.agent/workflows/opsx-onboard.md
@@ -15,6 +15,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -59,6 +60,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -94,6 +96,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -126,6 +129,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -151,6 +155,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -160,21 +165,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -185,6 +194,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -229,9 +239,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -245,6 +257,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -254,6 +267,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -289,6 +303,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -334,6 +349,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -372,6 +388,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -406,6 +423,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -415,11 +433,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.agent/workflows/opsx-sync.md b/.agent/workflows/opsx-sync.md
index 56b5b33..2cb5e8f 100644
--- a/.agent/workflows/opsx-sync.md
+++ b/.agent/workflows/opsx-sync.md
@@ -40,28 +40,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -75,16 +75,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -101,8 +105,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -124,6 +129,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.agent/workflows/opsx-verify.md b/.agent/workflows/opsx-verify.md
index 8111873..14ce70f 100644
--- a/.agent/workflows/opsx-verify.md
+++ b/.agent/workflows/opsx-verify.md
@@ -19,9 +19,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -103,6 +105,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -115,7 +118,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -154,6 +156,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.claude/commands/opsx/apply.md b/.claude/commands/opsx/apply.md
index bf23721..dc7413e 100644
--- a/.claude/commands/opsx/apply.md
+++ b/.claude/commands/opsx/apply.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Apply"
+name: 'OPSX: Apply'
 description: Implement tasks from an OpenSpec change (Experimental)
 category: Workflow
 tags: [workflow, artifacts, experimental]
@@ -21,9 +21,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -135,6 +137,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.claude/commands/opsx/archive.md b/.claude/commands/opsx/archive.md
index 7275c85..0bf6aad 100644
--- a/.claude/commands/opsx/archive.md
+++ b/.claude/commands/opsx/archive.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Archive"
+name: 'OPSX: Archive'
 description: Archive a completed change in the experimental workflow
 category: Workflow
 tags: [workflow, archive, experimental]
@@ -64,6 +64,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -148,6 +149,7 @@ Target archive directory already exists.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.claude/commands/opsx/bulk-archive.md b/.claude/commands/opsx/bulk-archive.md
index b700261..639e268 100644
--- a/.claude/commands/opsx/bulk-archive.md
+++ b/.claude/commands/opsx/bulk-archive.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Bulk Archive"
+name: 'OPSX: Bulk Archive'
 description: Archive multiple completed changes at once
 category: Workflow
 tags: [workflow, archive, experimental, bulk]
@@ -33,16 +33,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -62,18 +62,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -89,12 +89,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -103,7 +105,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -117,20 +118,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -153,6 +155,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -161,6 +164,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -176,6 +180,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -229,6 +234,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.claude/commands/opsx/continue.md b/.claude/commands/opsx/continue.md
index af255c6..59e4c2a 100644
--- a/.claude/commands/opsx/continue.md
+++ b/.claude/commands/opsx/continue.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Continue"
+name: 'OPSX: Continue'
 description: Continue working on a change - create the next artifact (Experimental)
 category: Workflow
 tags: [workflow, artifacts, experimental]
@@ -26,9 +26,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -36,7 +38,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -44,7 +46,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change with `/opsx:apply` or archive it with `/opsx:archive`."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -67,7 +69,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -81,6 +83,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -94,6 +97,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -103,6 +107,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.claude/commands/opsx/explore.md b/.claude/commands/opsx/explore.md
index 202566b..791ce25 100644
--- a/.claude/commands/opsx/explore.md
+++ b/.claude/commands/opsx/explore.md
@@ -1,6 +1,6 @@
 ---
-name: "OPSX: Explore"
-description: "Enter explore mode - think through ideas, investigate problems, clarify requirements"
+name: 'OPSX: Explore'
+description: 'Enter explore mode - think through ideas, investigate problems, clarify requirements'
 category: Workflow
 tags: [workflow, explore, experimental, thinking]
 ---
@@ -12,6 +12,7 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 **This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
 
 **Input**: The argument after `/opsx:explore` is whatever the user wants to think about. Could be:
+
 - A vague idea: "real-time collaboration"
 - A specific problem: "the auth system is getting unwieldy"
 - A change name: "add-dark-mode" (to explore in context of that change)
@@ -36,24 +37,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -72,6 +77,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -85,11 +91,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -120,14 +128,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
diff --git a/.claude/commands/opsx/ff.md b/.claude/commands/opsx/ff.md
index bea9d61..14895c6 100644
--- a/.claude/commands/opsx/ff.md
+++ b/.claude/commands/opsx/ff.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Fast Forward"
+name: 'OPSX: Fast Forward'
 description: Create a change and generate all artifacts needed for implementation in one go
 category: Workflow
 tags: [workflow, artifacts, experimental]
@@ -14,6 +14,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -21,15 +22,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -41,30 +46,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -74,6 +79,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -87,6 +93,7 @@ After completing all artifacts, summarize:
 - Use the `template` as a starting point, filling in based on context
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.claude/commands/opsx/new.md b/.claude/commands/opsx/new.md
index ef26cfa..5ff0217 100644
--- a/.claude/commands/opsx/new.md
+++ b/.claude/commands/opsx/new.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: New"
+name: 'OPSX: New'
 description: Start a new change using the experimental artifact workflow (OPSX)
 category: Workflow
 tags: [workflow, artifacts, experimental]
@@ -14,6 +14,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -31,23 +32,29 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema. Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -55,6 +62,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -62,6 +70,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Run `/opsx:continue` or just describe what this change is about and I'll draft it."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.claude/commands/opsx/onboard.md b/.claude/commands/opsx/onboard.md
index e15790e..5201a69 100644
--- a/.claude/commands/opsx/onboard.md
+++ b/.claude/commands/opsx/onboard.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Onboard"
+name: 'OPSX: Onboard'
 description: Guided onboarding - walk through a complete OpenSpec workflow cycle with narration
 category: Workflow
 tags: [workflow, onboarding, tutorial, learning]
@@ -18,6 +18,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -62,6 +63,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -97,6 +99,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -129,6 +132,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -154,6 +158,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -163,21 +168,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -188,6 +197,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -232,9 +242,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -248,6 +260,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -257,6 +270,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -292,6 +306,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -337,6 +352,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -375,6 +391,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -409,6 +426,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -418,11 +436,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.claude/commands/opsx/sync.md b/.claude/commands/opsx/sync.md
index 1571610..1f8171f 100644
--- a/.claude/commands/opsx/sync.md
+++ b/.claude/commands/opsx/sync.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Sync"
+name: 'OPSX: Sync'
 description: Sync delta specs from a change to main specs
 category: Workflow
 tags: [workflow, specs, experimental]
@@ -43,28 +43,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -78,16 +78,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -104,8 +108,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -127,6 +132,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.claude/commands/opsx/verify.md b/.claude/commands/opsx/verify.md
index 82ab63f..a84f933 100644
--- a/.claude/commands/opsx/verify.md
+++ b/.claude/commands/opsx/verify.md
@@ -1,5 +1,5 @@
 ---
-name: "OPSX: Verify"
+name: 'OPSX: Verify'
 description: Verify implementation matches change artifacts before archiving
 category: Workflow
 tags: [workflow, verify, experimental]
@@ -22,9 +22,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -106,6 +108,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -118,7 +121,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -157,6 +159,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.claude/skills/openspec-apply-change/SKILL.md b/.claude/skills/openspec-apply-change/SKILL.md
index 47d4bc2..147e629 100644
--- a/.claude/skills/openspec-apply-change/SKILL.md
+++ b/.claude/skills/openspec-apply-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Implement tasks from an OpenSpec change.
@@ -25,9 +25,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -139,6 +141,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.claude/skills/openspec-archive-change/SKILL.md b/.claude/skills/openspec-archive-change/SKILL.md
index 8fa4b23..95a800a 100644
--- a/.claude/skills/openspec-archive-change/SKILL.md
+++ b/.claude/skills/openspec-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive a completed change in the experimental workflow.
@@ -68,6 +68,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -105,6 +106,7 @@ All artifacts complete. All tasks complete.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.claude/skills/openspec-bulk-archive-change/SKILL.md b/.claude/skills/openspec-bulk-archive-change/SKILL.md
index 719b279..03e3237 100644
--- a/.claude/skills/openspec-bulk-archive-change/SKILL.md
+++ b/.claude/skills/openspec-bulk-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive multiple completed changes in a single operation.
@@ -37,16 +37,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -66,18 +66,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -93,12 +93,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -107,7 +109,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -121,20 +122,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -157,6 +159,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -165,6 +168,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -180,6 +184,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -233,6 +238,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.claude/skills/openspec-continue-change/SKILL.md b/.claude/skills/openspec-continue-change/SKILL.md
index 5060b2f..0825819 100644
--- a/.claude/skills/openspec-continue-change/SKILL.md
+++ b/.claude/skills/openspec-continue-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Continue working on a change by creating the next artifact.
@@ -30,9 +30,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -40,7 +42,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -48,7 +50,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change or archive it."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -71,7 +73,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -85,6 +87,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -98,6 +101,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -107,6 +111,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.claude/skills/openspec-explore/SKILL.md b/.claude/skills/openspec-explore/SKILL.md
index 8ed4a76..13dff42 100644
--- a/.claude/skills/openspec-explore/SKILL.md
+++ b/.claude/skills/openspec-explore/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
@@ -33,24 +33,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -69,6 +73,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -82,11 +87,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -115,14 +122,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
@@ -147,6 +154,7 @@ If the user mentions a change or you detect one is relevant:
 ## Handling Different Entry Points
 
 **User brings a vague idea:**
+
 ```
 User: I'm thinking about adding real-time collaboration
 
@@ -170,6 +178,7 @@ You: Real-time collab is a big space. Let me think about this...
 ```
 
 **User brings a specific problem:**
+
 ```
 User: The auth system is a mess
 
@@ -201,6 +210,7 @@ You: [reads codebase]
 ```
 
 **User is stuck mid-implementation:**
+
 ```
 User: /opsx:explore add-auth-system
       The OAuth integration is more complex than expected
@@ -218,6 +228,7 @@ You: [reads change artifacts]
 ```
 
 **User wants to compare options:**
+
 ```
 User: Should we use Postgres or SQLite?
 
diff --git a/.claude/skills/openspec-ff-change/SKILL.md b/.claude/skills/openspec-ff-change/SKILL.md
index d586012..5c9bfd0 100644
--- a/.claude/skills/openspec-ff-change/SKILL.md
+++ b/.claude/skills/openspec-ff-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Fast-forward through artifact creation - generate everything needed to start implementation in one go.
@@ -18,6 +18,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -25,15 +26,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -45,30 +50,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -78,6 +83,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -94,6 +100,7 @@ After completing all artifacts, summarize:
   - These guide what you write, but should never appear in the output
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.claude/skills/openspec-new-change/SKILL.md b/.claude/skills/openspec-new-change/SKILL.md
index 37ac7ba..fd3ad14 100644
--- a/.claude/skills/openspec-new-change/SKILL.md
+++ b/.claude/skills/openspec-new-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Start a new change using the experimental artifact-driven approach.
@@ -18,6 +18,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -35,24 +36,30 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema (e.g., `proposal` for spec-driven).
    Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -60,6 +67,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -67,6 +75,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Just describe what this change is about and I'll draft it, or ask me to continue."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.claude/skills/openspec-onboard/SKILL.md b/.claude/skills/openspec-onboard/SKILL.md
index 4a03038..b830062 100644
--- a/.claude/skills/openspec-onboard/SKILL.md
+++ b/.claude/skills/openspec-onboard/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.
@@ -22,6 +22,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -66,6 +67,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -101,6 +103,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -133,6 +136,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -158,6 +162,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -167,21 +172,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -192,6 +201,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -236,9 +246,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -252,6 +264,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -261,6 +274,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -296,6 +310,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -341,6 +356,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -379,6 +395,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -413,6 +430,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -422,11 +440,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.claude/skills/openspec-sync-specs/SKILL.md b/.claude/skills/openspec-sync-specs/SKILL.md
index 4c7e3aa..5154438 100644
--- a/.claude/skills/openspec-sync-specs/SKILL.md
+++ b/.claude/skills/openspec-sync-specs/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Sync delta specs from a change to main specs.
@@ -47,28 +47,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -82,16 +82,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -108,8 +112,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -131,6 +136,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.claude/skills/openspec-verify-change/SKILL.md b/.claude/skills/openspec-verify-change/SKILL.md
index 443ac5f..90fc30f 100644
--- a/.claude/skills/openspec-verify-change/SKILL.md
+++ b/.claude/skills/openspec-verify-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Verify that an implementation matches the change artifacts (specs, tasks, design).
@@ -26,9 +26,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -110,6 +112,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -122,7 +125,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -161,6 +163,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.codex/prompts/opsx-apply.md b/.codex/prompts/opsx-apply.md
index 04a0e9e..9b30fcb 100644
--- a/.codex/prompts/opsx-apply.md
+++ b/.codex/prompts/opsx-apply.md
@@ -19,9 +19,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -133,6 +135,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.codex/prompts/opsx-archive.md b/.codex/prompts/opsx-archive.md
index 2528829..e69d743 100644
--- a/.codex/prompts/opsx-archive.md
+++ b/.codex/prompts/opsx-archive.md
@@ -62,6 +62,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -146,6 +147,7 @@ Target archive directory already exists.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.codex/prompts/opsx-bulk-archive.md b/.codex/prompts/opsx-bulk-archive.md
index 65919f9..44dc14f 100644
--- a/.codex/prompts/opsx-bulk-archive.md
+++ b/.codex/prompts/opsx-bulk-archive.md
@@ -31,16 +31,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -60,18 +60,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -87,12 +87,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -101,7 +103,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -115,20 +116,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -151,6 +153,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -159,6 +162,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -174,6 +178,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -227,6 +232,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.codex/prompts/opsx-continue.md b/.codex/prompts/opsx-continue.md
index 5b88dff..953d76b 100644
--- a/.codex/prompts/opsx-continue.md
+++ b/.codex/prompts/opsx-continue.md
@@ -24,9 +24,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -34,7 +36,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -42,7 +44,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change or archive it."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -65,7 +67,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -79,6 +81,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -92,6 +95,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -101,6 +105,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.codex/prompts/opsx-explore.md b/.codex/prompts/opsx-explore.md
index a2aa833..3a81b35 100644
--- a/.codex/prompts/opsx-explore.md
+++ b/.codex/prompts/opsx-explore.md
@@ -10,6 +10,7 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 **This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
 
 **Input**: The argument after `/opsx:explore` is whatever the user wants to think about. Could be:
+
 - A vague idea: "real-time collaboration"
 - A specific problem: "the auth system is getting unwieldy"
 - A change name: "add-dark-mode" (to explore in context of that change)
@@ -34,24 +35,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -70,6 +75,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -83,11 +89,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -118,14 +126,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
diff --git a/.codex/prompts/opsx-ff.md b/.codex/prompts/opsx-ff.md
index 7c8b654..bd6d042 100644
--- a/.codex/prompts/opsx-ff.md
+++ b/.codex/prompts/opsx-ff.md
@@ -12,6 +12,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -19,15 +20,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -39,30 +44,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -72,6 +77,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -85,6 +91,7 @@ After completing all artifacts, summarize:
 - Use the `template` as a starting point, filling in based on context
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.codex/prompts/opsx-new.md b/.codex/prompts/opsx-new.md
index 05562e4..4479cfa 100644
--- a/.codex/prompts/opsx-new.md
+++ b/.codex/prompts/opsx-new.md
@@ -12,6 +12,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -29,23 +30,29 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema. Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -53,6 +60,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -60,6 +68,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Run `/opsx:continue` or just describe what this change is about and I'll draft it."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.codex/prompts/opsx-onboard.md b/.codex/prompts/opsx-onboard.md
index b91f60c..5d325bf 100644
--- a/.codex/prompts/opsx-onboard.md
+++ b/.codex/prompts/opsx-onboard.md
@@ -16,6 +16,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -60,6 +61,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -95,6 +97,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -127,6 +130,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -152,6 +156,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -161,21 +166,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -186,6 +195,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -230,9 +240,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -246,6 +258,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -255,6 +268,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -290,6 +304,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -335,6 +350,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -373,6 +389,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -407,6 +424,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -416,11 +434,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.codex/prompts/opsx-sync.md b/.codex/prompts/opsx-sync.md
index 8ca8d40..602fdef 100644
--- a/.codex/prompts/opsx-sync.md
+++ b/.codex/prompts/opsx-sync.md
@@ -41,28 +41,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -76,16 +76,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -102,8 +106,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -125,6 +130,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.codex/prompts/opsx-verify.md b/.codex/prompts/opsx-verify.md
index bac56bf..2194b9e 100644
--- a/.codex/prompts/opsx-verify.md
+++ b/.codex/prompts/opsx-verify.md
@@ -20,9 +20,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -104,6 +106,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -116,7 +119,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -155,6 +157,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.codex/skills/openspec-apply-change/SKILL.md b/.codex/skills/openspec-apply-change/SKILL.md
index 47d4bc2..147e629 100644
--- a/.codex/skills/openspec-apply-change/SKILL.md
+++ b/.codex/skills/openspec-apply-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Implement tasks from an OpenSpec change.
@@ -25,9 +25,11 @@ Implement tasks from an OpenSpec change.
    Always announce: "Using change: <name>" and how to override (e.g., `/opsx:apply <other>`).
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
@@ -139,6 +141,7 @@ What would you like to do?
 ```
 
 **Guardrails**
+
 - Keep going through tasks until done or blocked
 - Always read context files before starting (from the apply instructions output)
 - If task is ambiguous, pause and ask before implementing
diff --git a/.codex/skills/openspec-archive-change/SKILL.md b/.codex/skills/openspec-archive-change/SKILL.md
index 8fa4b23..95a800a 100644
--- a/.codex/skills/openspec-archive-change/SKILL.md
+++ b/.codex/skills/openspec-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive a completed change in the experimental workflow.
@@ -68,6 +68,7 @@ Archive a completed change in the experimental workflow.
 5. **Perform the archive**
 
    Create the archive directory if it doesn't exist:
+
    ```bash
    mkdir -p openspec/changes/archive
    ```
@@ -105,6 +106,7 @@ All artifacts complete. All tasks complete.
 ```
 
 **Guardrails**
+
 - Always prompt for change selection if not provided
 - Use artifact graph (openspec status --json) for completion checking
 - Don't block archive on warnings - just inform and confirm
diff --git a/.codex/skills/openspec-bulk-archive-change/SKILL.md b/.codex/skills/openspec-bulk-archive-change/SKILL.md
index 719b279..03e3237 100644
--- a/.codex/skills/openspec-bulk-archive-change/SKILL.md
+++ b/.codex/skills/openspec-bulk-archive-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Archive multiple completed changes in a single operation.
@@ -37,16 +37,16 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    For each selected change, collect:
 
    a. **Artifact status** - Run `openspec status --change "<name>" --json`
-      - Parse `schemaName` and `artifacts` list
-      - Note which artifacts are `done` vs other states
+   - Parse `schemaName` and `artifacts` list
+   - Note which artifacts are `done` vs other states
 
    b. **Task completion** - Read `openspec/changes/<name>/tasks.md`
-      - Count `- [ ]` (incomplete) vs `- [x]` (complete)
-      - If no tasks file exists, note as "No tasks"
+   - Count `- [ ]` (incomplete) vs `- [x]` (complete)
+   - If no tasks file exists, note as "No tasks"
 
    c. **Delta specs** - Check `openspec/changes/<name>/specs/` directory
-      - List which capability specs exist
-      - For each, extract requirement names (lines matching `### Requirement: <name>`)
+   - List which capability specs exist
+   - For each, extract requirement names (lines matching `### Requirement: <name>`)
 
 4. **Detect spec conflicts**
 
@@ -66,18 +66,18 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    a. **Read the delta specs** from each conflicting change to understand what each claims to add/modify
 
    b. **Search the codebase** for implementation evidence:
-      - Look for code implementing requirements from each delta spec
-      - Check for related files, functions, or tests
+   - Look for code implementing requirements from each delta spec
+   - Check for related files, functions, or tests
 
    c. **Determine resolution**:
-      - If only one change is actually implemented -> sync that one's specs
-      - If both implemented -> apply in chronological order (older first, newer overwrites)
-      - If neither implemented -> skip spec sync, warn user
+   - If only one change is actually implemented -> sync that one's specs
+   - If both implemented -> apply in chronological order (older first, newer overwrites)
+   - If neither implemented -> skip spec sync, warn user
 
    d. **Record resolution** for each conflict:
-      - Which change's specs to apply
-      - In what order (if both)
-      - Rationale (what was found in codebase)
+   - Which change's specs to apply
+   - In what order (if both)
+   - Rationale (what was found in codebase)
 
 6. **Show consolidated status table**
 
@@ -93,12 +93,14 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    For conflicts, show the resolution:
+
    ```
    * Conflict resolution:
      - auth spec: Will apply add-oauth then add-jwt (both implemented, chronological order)
    ```
 
    For incomplete changes, show warnings:
+
    ```
    Warnings:
    - add-verify-skill: 1 incomplete artifact, 3 incomplete tasks
@@ -107,7 +109,6 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 7. **Confirm batch operation**
 
    Use **AskUserQuestion tool** with a single confirmation:
-
    - "Archive N changes?" with options based on status
    - Options might include:
      - "Archive all N changes"
@@ -121,20 +122,21 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    Process changes in the determined order (respecting conflict resolution):
 
    a. **Sync specs** if delta specs exist:
-      - Use the openspec-sync-specs approach (agent-driven intelligent merge)
-      - For conflicts, apply in resolved order
-      - Track if sync was done
+   - Use the openspec-sync-specs approach (agent-driven intelligent merge)
+   - For conflicts, apply in resolved order
+   - Track if sync was done
 
    b. **Perform the archive**:
-      ```bash
-      mkdir -p openspec/changes/archive
-      mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
-      ```
+
+   ```bash
+   mkdir -p openspec/changes/archive
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
 
    c. **Track outcome** for each change:
-      - Success: archived successfully
-      - Failed: error during archive (record error)
-      - Skipped: user chose not to archive (if applicable)
+   - Success: archived successfully
+   - Failed: error during archive (record error)
+   - Skipped: user chose not to archive (if applicable)
 
 9. **Display summary**
 
@@ -157,6 +159,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
    ```
 
    If any failures:
+
    ```
    Failed 1 change:
    - some-change: Archive directory already exists
@@ -165,6 +168,7 @@ This skill allows you to batch-archive changes, handling spec conflicts intellig
 **Conflict Resolution Examples**
 
 Example 1: Only one implemented
+
 ```
 Conflict: specs/auth/spec.md touched by [add-oauth, add-jwt]
 
@@ -180,6 +184,7 @@ Resolution: Only add-oauth is implemented. Will sync add-oauth specs only.
 ```
 
 Example 2: Both implemented
+
 ```
 Conflict: specs/api/spec.md touched by [add-rest-api, add-graphql]
 
@@ -233,6 +238,7 @@ No active changes found. Use `/opsx:new` to create a new change.
 ```
 
 **Guardrails**
+
 - Allow any number of changes (1+ is fine, 2+ is the typical use case)
 - Always prompt for selection, never auto-select
 - Detect spec conflicts early and resolve by checking codebase
diff --git a/.codex/skills/openspec-continue-change/SKILL.md b/.codex/skills/openspec-continue-change/SKILL.md
index 5060b2f..0825819 100644
--- a/.codex/skills/openspec-continue-change/SKILL.md
+++ b/.codex/skills/openspec-continue-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Continue working on a change by creating the next artifact.
@@ -30,9 +30,11 @@ Continue working on a change by creating the next artifact.
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check current status**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand current state. The response includes:
    - `schemaName`: The workflow schema being used (e.g., "spec-driven")
    - `artifacts`: Array of artifacts with their status ("done", "ready", "blocked")
@@ -40,7 +42,7 @@ Continue working on a change by creating the next artifact.
 
 3. **Act based on status**:
 
-   ---
+   ***
 
    **If all artifacts are complete (`isComplete: true`)**:
    - Congratulate the user
@@ -48,7 +50,7 @@ Continue working on a change by creating the next artifact.
    - Suggest: "All artifacts created! You can now implement this change or archive it."
    - STOP
 
-   ---
+   ***
 
    **If artifacts are ready to create** (status shows artifacts with `status: "ready"`):
    - Pick the FIRST artifact with `status: "ready"` from the status output
@@ -71,7 +73,7 @@ Continue working on a change by creating the next artifact.
    - Show what was created and what's now unlocked
    - STOP after creating ONE artifact
 
-   ---
+   ***
 
    **If no artifacts are ready (all blocked)**:
    - This shouldn't happen with a valid schema
@@ -85,6 +87,7 @@ Continue working on a change by creating the next artifact.
 **Output**
 
 After each invocation, show:
+
 - Which artifact was created
 - Schema workflow being used
 - Current progress (N/M complete)
@@ -98,6 +101,7 @@ The artifact types and their purpose depend on the schema. Use the `instruction`
 Common artifact patterns:
 
 **spec-driven schema** (proposal → specs → design → tasks):
+
 - **proposal.md**: Ask user about the change if not clear. Fill in Why, What Changes, Capabilities, Impact.
   - The Capabilities section is critical - each capability listed will need a spec file.
 - **specs/<capability>/spec.md**: Create one spec per capability listed in the proposal's Capabilities section (use the capability name, not the change name).
@@ -107,6 +111,7 @@ Common artifact patterns:
 For other schemas, follow the `instruction` field from the CLI output.
 
 **Guardrails**
+
 - Create ONE artifact per invocation
 - Always read dependency artifacts before creating a new one
 - Never skip artifacts or create out of order
diff --git a/.codex/skills/openspec-explore/SKILL.md b/.codex/skills/openspec-explore/SKILL.md
index 8ed4a76..13dff42 100644
--- a/.codex/skills/openspec-explore/SKILL.md
+++ b/.codex/skills/openspec-explore/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
@@ -33,24 +33,28 @@ Enter explore mode. Think deeply. Visualize freely. Follow the conversation wher
 Depending on what the user brings, you might:
 
 **Explore the problem space**
+
 - Ask clarifying questions that emerge from what they said
 - Challenge assumptions
 - Reframe the problem
 - Find analogies
 
 **Investigate the codebase**
+
 - Map existing architecture relevant to the discussion
 - Find integration points
 - Identify patterns already in use
 - Surface hidden complexity
 
 **Compare options**
+
 - Brainstorm multiple approaches
 - Build comparison tables
 - Sketch tradeoffs
 - Recommend a path (if asked)
 
 **Visualize**
+
 ```
 ┌─────────────────────────────────────────┐
 │     Use ASCII diagrams liberally        │
@@ -69,6 +73,7 @@ Depending on what the user brings, you might:
 ```
 
 **Surface risks and unknowns**
+
 - Identify what could go wrong
 - Find gaps in understanding
 - Suggest spikes or investigations
@@ -82,11 +87,13 @@ You have full context of the OpenSpec system. Use it naturally, don't force it.
 ### Check for context
 
 At the start, quickly check what exists:
+
 ```bash
 openspec list --json
 ```
 
 This tells you:
+
 - If there are active changes
 - Their names, schemas, and status
 - What the user might be working on
@@ -115,14 +122,14 @@ If the user mentions a change or you detect one is relevant:
 
 3. **Offer to capture when decisions are made**
 
-   | Insight Type | Where to Capture |
-   |--------------|------------------|
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
    | New requirement discovered | `specs/<capability>/spec.md` |
-   | Requirement changed | `specs/<capability>/spec.md` |
-   | Design decision made | `design.md` |
-   | Scope changed | `proposal.md` |
-   | New work identified | `tasks.md` |
-   | Assumption invalidated | Relevant artifact |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
 
    Example offers:
    - "That's a design decision. Capture it in design.md?"
@@ -147,6 +154,7 @@ If the user mentions a change or you detect one is relevant:
 ## Handling Different Entry Points
 
 **User brings a vague idea:**
+
 ```
 User: I'm thinking about adding real-time collaboration
 
@@ -170,6 +178,7 @@ You: Real-time collab is a big space. Let me think about this...
 ```
 
 **User brings a specific problem:**
+
 ```
 User: The auth system is a mess
 
@@ -201,6 +210,7 @@ You: [reads codebase]
 ```
 
 **User is stuck mid-implementation:**
+
 ```
 User: /opsx:explore add-auth-system
       The OAuth integration is more complex than expected
@@ -218,6 +228,7 @@ You: [reads change artifacts]
 ```
 
 **User wants to compare options:**
+
 ```
 User: Should we use Postgres or SQLite?
 
diff --git a/.codex/skills/openspec-ff-change/SKILL.md b/.codex/skills/openspec-ff-change/SKILL.md
index d586012..5c9bfd0 100644
--- a/.codex/skills/openspec-ff-change/SKILL.md
+++ b/.codex/skills/openspec-ff-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Fast-forward through artifact creation - generate everything needed to start implementation in one go.
@@ -18,6 +18,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -25,15 +26,19 @@ Fast-forward through artifact creation - generate everything needed to start imp
    **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
 
 2. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    This creates a scaffolded change at `openspec/changes/<name>/`.
 
 3. **Get the artifact build order**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to get:
    - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
    - `artifacts`: list of all artifacts with their status and dependencies
@@ -45,30 +50,30 @@ Fast-forward through artifact creation - generate everything needed to start imp
    Loop through artifacts in dependency order (artifacts with no pending dependencies first):
 
    a. **For each artifact that is `ready` (dependencies satisfied)**:
-      - Get instructions:
-        ```bash
-        openspec instructions <artifact-id> --change "<name>" --json
-        ```
-      - The instructions JSON includes:
-        - `context`: Project background (constraints for you - do NOT include in output)
-        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
-        - `template`: The structure to use for your output file
-        - `instruction`: Schema-specific guidance for this artifact type
-        - `outputPath`: Where to write the artifact
-        - `dependencies`: Completed artifacts to read for context
-      - Read any completed dependency files for context
-      - Create the artifact file using `template` as the structure
-      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
-      - Show brief progress: "✓ Created <artifact-id>"
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `outputPath`: Where to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "✓ Created <artifact-id>"
 
    b. **Continue until all `applyRequires` artifacts are complete**
-      - After creating each artifact, re-run `openspec status --change "<name>" --json`
-      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
-      - Stop when all `applyRequires` artifacts are done
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
 
    c. **If an artifact requires user input** (unclear context):
-      - Use **AskUserQuestion tool** to clarify
-      - Then continue with creation
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
 
 5. **Show final status**
    ```bash
@@ -78,6 +83,7 @@ Fast-forward through artifact creation - generate everything needed to start imp
 **Output**
 
 After completing all artifacts, summarize:
+
 - Change name and location
 - List of artifacts created with brief descriptions
 - What's ready: "All artifacts created! Ready for implementation."
@@ -94,6 +100,7 @@ After completing all artifacts, summarize:
   - These guide what you write, but should never appear in the output
 
 **Guardrails**
+
 - Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
 - Always read dependency artifacts before creating a new one
 - If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
diff --git a/.codex/skills/openspec-new-change/SKILL.md b/.codex/skills/openspec-new-change/SKILL.md
index 37ac7ba..fd3ad14 100644
--- a/.codex/skills/openspec-new-change/SKILL.md
+++ b/.codex/skills/openspec-new-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Start a new change using the experimental artifact-driven approach.
@@ -18,6 +18,7 @@ Start a new change using the experimental artifact-driven approach.
 1. **If no clear input provided, ask what they want to build**
 
    Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
    > "What change do you want to work on? Describe what you want to build or fix."
 
    From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
@@ -35,24 +36,30 @@ Start a new change using the experimental artifact-driven approach.
    **Otherwise**: Omit `--schema` to use the default.
 
 3. **Create the change directory**
+
    ```bash
    openspec new change "<name>"
    ```
+
    Add `--schema <name>` only if the user requested a specific workflow.
    This creates a scaffolded change at `openspec/changes/<name>/` with the selected schema.
 
 4. **Show the artifact status**
+
    ```bash
    openspec status --change "<name>"
    ```
+
    This shows which artifacts need to be created and which are ready (dependencies satisfied).
 
 5. **Get instructions for the first artifact**
    The first artifact depends on the schema (e.g., `proposal` for spec-driven).
    Check the status output to find the first artifact with status "ready".
+
    ```bash
    openspec instructions <first-artifact-id> --change "<name>"
    ```
+
    This outputs the template and context for creating the first artifact.
 
 6. **STOP and wait for user direction**
@@ -60,6 +67,7 @@ Start a new change using the experimental artifact-driven approach.
 **Output**
 
 After completing the steps, summarize:
+
 - Change name and location
 - Schema/workflow being used and its artifact sequence
 - Current status (0/N artifacts complete)
@@ -67,6 +75,7 @@ After completing the steps, summarize:
 - Prompt: "Ready to create the first artifact? Just describe what this change is about and I'll draft it, or ask me to continue."
 
 **Guardrails**
+
 - Do NOT create any artifacts yet - just show the instructions
 - Do NOT advance beyond showing the first artifact template
 - If the name is invalid (not kebab-case), ask for a valid name
diff --git a/.codex/skills/openspec-onboard/SKILL.md b/.codex/skills/openspec-onboard/SKILL.md
index 4a03038..b830062 100644
--- a/.codex/skills/openspec-onboard/SKILL.md
+++ b/.codex/skills/openspec-onboard/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.
@@ -22,6 +22,7 @@ openspec status --json 2>&1 || echo "NOT_INITIALIZED"
 ```
 
 **If not initialized:**
+
 > OpenSpec isn't set up in this project yet. Run `openspec init` first, then come back to `/opsx:onboard`.
 
 Stop here if not initialized.
@@ -66,6 +67,7 @@ Scan the codebase for small improvement opportunities. Look for:
 6. **Missing validation** - User input handlers without validation
 
 Also check recent git activity:
+
 ```bash
 git log --oneline -10 2>/dev/null || echo "No git history"
 ```
@@ -101,6 +103,7 @@ Which task interests you? (Pick a number or describe your own)
 ```
 
 **If nothing found:** Fall back to asking what the user wants to build:
+
 > I didn't find obvious quick wins in your codebase. What's something small you've been meaning to add or fix?
 
 ### Scope Guardrail
@@ -133,6 +136,7 @@ Before we create a change, let me quickly show you **explore mode**—it's how y
 ```
 
 Spend 1-2 minutes investigating the relevant code:
+
 - Read the file(s) involved
 - Draw a quick ASCII diagram if it helps
 - Note any considerations
@@ -158,6 +162,7 @@ Now let's create a change to hold our work.
 ## Phase 4: Create the Change
 
 **EXPLAIN:**
+
 ```
 ## Creating a Change
 
@@ -167,21 +172,25 @@ Let me create one for our task.
 ```
 
 **DO:** Create the change with a derived kebab-case name:
+
 ```bash
 openspec new change "<derived-name>"
 ```
 
 **SHOW:**
+
 ```
 Created: `openspec/changes/<name>/`
 
 The folder structure:
 ```
+
 openspec/changes/<name>/
-├── proposal.md    ← Why we're doing this (empty, we'll fill it)
-├── design.md      ← How we'll build it (empty)
-├── specs/         ← Detailed requirements (empty)
-└── tasks.md       ← Implementation checklist (empty)
+├── proposal.md ← Why we're doing this (empty, we'll fill it)
+├── design.md ← How we'll build it (empty)
+├── specs/ ← Detailed requirements (empty)
+└── tasks.md ← Implementation checklist (empty)
+
 ```
 
 Now let's fill in the first artifact—the proposal.
@@ -192,6 +201,7 @@ Now let's fill in the first artifact—the proposal.
 ## Phase 5: Proposal
 
 **EXPLAIN:**
+
 ```
 ## The Proposal
 
@@ -236,9 +246,11 @@ Does this capture the intent? I can adjust before we save it.
 **PAUSE** - Wait for user approval/feedback.
 
 After approval, save the proposal:
+
 ```bash
 openspec instructions proposal --change "<name>" --json
 ```
+
 Then write the content to `openspec/changes/<name>/proposal.md`.
 
 ```
@@ -252,6 +264,7 @@ Next up: specs.
 ## Phase 6: Specs
 
 **EXPLAIN:**
+
 ```
 ## Specs
 
@@ -261,6 +274,7 @@ For a small task like this, we might only need one spec file.
 ```
 
 **DO:** Create the spec file:
+
 ```bash
 mkdir -p openspec/changes/<name>/specs/<capability-name>
 ```
@@ -296,6 +310,7 @@ Save to `openspec/changes/<name>/specs/<capability>/spec.md`.
 ## Phase 7: Design
 
 **EXPLAIN:**
+
 ```
 ## Design
 
@@ -341,6 +356,7 @@ Save to `openspec/changes/<name>/design.md`.
 ## Phase 8: Tasks
 
 **EXPLAIN:**
+
 ```
 ## Tasks
 
@@ -379,6 +395,7 @@ Save to `openspec/changes/<name>/tasks.md`.
 ## Phase 9: Apply (Implementation)
 
 **EXPLAIN:**
+
 ```
 ## Implementation
 
@@ -413,6 +430,7 @@ The change is implemented! One more step—let's archive it.
 ## Phase 10: Archive
 
 **EXPLAIN:**
+
 ```
 ## Archiving
 
@@ -422,11 +440,13 @@ Archived changes become your project's decision history—you can always find th
 ```
 
 **DO:**
+
 ```bash
 openspec archive "<name>"
 ```
 
 **SHOW:**
+
 ```
 Archived to: `openspec/changes/archive/YYYY-MM-DD-<name>/`
 
diff --git a/.codex/skills/openspec-sync-specs/SKILL.md b/.codex/skills/openspec-sync-specs/SKILL.md
index 4c7e3aa..5154438 100644
--- a/.codex/skills/openspec-sync-specs/SKILL.md
+++ b/.codex/skills/openspec-sync-specs/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Sync delta specs from a change to main specs.
@@ -47,28 +47,28 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 
    c. **Apply changes intelligently**:
 
-      **ADDED Requirements:**
-      - If requirement doesn't exist in main spec → add it
-      - If requirement already exists → update it to match (treat as implicit MODIFIED)
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
 
-      **MODIFIED Requirements:**
-      - Find the requirement in main spec
-      - Apply the changes - this can be:
-        - Adding new scenarios (don't need to copy existing ones)
-        - Modifying existing scenarios
-        - Changing the requirement description
-      - Preserve scenarios/content not mentioned in the delta
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
 
-      **REMOVED Requirements:**
-      - Remove the entire requirement block from main spec
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
 
-      **RENAMED Requirements:**
-      - Find the FROM requirement, rename to TO
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
 
    d. **Create new main spec** if capability doesn't exist yet:
-      - Create `openspec/specs/<capability>/spec.md`
-      - Add Purpose section (can be brief, mark as TBD)
-      - Add Requirements section with the ADDED requirements
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
 
 4. **Show summary**
 
@@ -82,16 +82,20 @@ This is an **agent-driven** operation - you will read delta specs and directly e
 ## ADDED Requirements
 
 ### Requirement: New Feature
+
 The system SHALL do something new.
 
 #### Scenario: Basic case
+
 - **WHEN** user does X
 - **THEN** system does Y
 
 ## MODIFIED Requirements
 
 ### Requirement: Existing Feature
+
 #### Scenario: New scenario to add
+
 - **WHEN** user does A
 - **THEN** system does B
 
@@ -108,8 +112,9 @@ The system SHALL do something new.
 **Key Principle: Intelligent Merging**
 
 Unlike programmatic merging, you can apply **partial updates**:
+
 - To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
-- The delta represents *intent*, not a wholesale replacement
+- The delta represents _intent_, not a wholesale replacement
 - Use your judgment to merge changes sensibly
 
 **Output On Success**
@@ -131,6 +136,7 @@ Main specs are now updated. The change remains active - archive when implementat
 ```
 
 **Guardrails**
+
 - Read both delta and main specs before making changes
 - Preserve existing content not mentioned in delta
 - If something is unclear, ask for clarification
diff --git a/.codex/skills/openspec-verify-change/SKILL.md b/.codex/skills/openspec-verify-change/SKILL.md
index 443ac5f..90fc30f 100644
--- a/.codex/skills/openspec-verify-change/SKILL.md
+++ b/.codex/skills/openspec-verify-change/SKILL.md
@@ -5,8 +5,8 @@ license: MIT
 compatibility: Requires openspec CLI.
 metadata:
   author: openspec
-  version: "1.0"
-  generatedBy: "1.1.1"
+  version: '1.0'
+  generatedBy: '1.1.1'
 ---
 
 Verify that an implementation matches the change artifacts (specs, tasks, design).
@@ -26,9 +26,11 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
 
 2. **Check status to understand the schema**
+
    ```bash
    openspec status --change "<name>" --json
    ```
+
    Parse the JSON to understand:
    - `schemaName`: The workflow being used (e.g., "spec-driven")
    - Which artifacts exist for this change
@@ -110,6 +112,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 8. **Generate Verification Report**
 
    **Summary Scorecard**:
+
    ```
    ## Verification Report: <change-name>
 
@@ -122,7 +125,6 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
    ```
 
    **Issues by Priority**:
-
    1. **CRITICAL** (Must fix before archive):
       - Incomplete tasks
       - Missing requirement implementations
@@ -161,6 +163,7 @@ Verify that an implementation matches the change artifacts (specs, tasks, design
 **Output Format**
 
 Use clear markdown with:
+
 - Table for summary scorecard
 - Grouped lists for issues (CRITICAL/WARNING/SUGGESTION)
 - Code references in format: `file.ts:123`
diff --git a/.codex/skills/ui-ux-pro-max/SKILL.md b/.codex/skills/ui-ux-pro-max/SKILL.md
index 9aed743..092580e 100644
--- a/.codex/skills/ui-ux-pro-max/SKILL.md
+++ b/.codex/skills/ui-ux-pro-max/SKILL.md
@@ -2,6 +2,7 @@
 name: ui-ux-pro-max
 description: UI/UX design intelligence with searchable database
 ---
+
 # ui-ux-pro-max
 
 Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
@@ -17,16 +18,19 @@ python3 --version || python --version
 If Python is not installed, install it based on user's OS:
 
 **macOS:**
+
 ```bash
 brew install python3
 ```
 
 **Ubuntu/Debian:**
+
 ```bash
 sudo apt update && sudo apt install python3
 ```
 
 **Windows:**
+
 ```powershell
 winget install Python.Python.3.12
 ```
@@ -40,6 +44,7 @@ When user requests UI/UX work (design, build, create, implement, review, fix, im
 ### Step 1: Analyze User Requirements
 
 Extract key information from user request:
+
 - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
 - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
 - **Industry**: healthcare, fintech, gaming, education, etc.
@@ -54,12 +59,14 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywo
 ```
 
 This command:
+
 1. Searches 5 domains in parallel (product, style, color, landing, typography)
 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
 3. Returns complete design system: pattern, style, colors, typography, effects
 4. Includes anti-patterns to avoid
 
 **Example:**
+
 ```bash
 python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
 ```
@@ -73,18 +80,22 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persi
 ```
 
 This creates:
+
 - `design-system/MASTER.md` — Global Source of Truth with all design rules
 - `design-system/pages/` — Folder for page-specific overrides
 
 **With page-specific override:**
+
 ```bash
 python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
 ```
 
 This also creates:
+
 - `design-system/pages/dashboard.md` — Page-specific deviations from Master
 
 **How hierarchical retrieval works:**
+
 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
 2. If the page file exists, its rules **override** the Master file
 3. If not, use `design-system/MASTER.md` exclusively
@@ -99,13 +110,13 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n
 
 **When to use detailed searches:**
 
-| Need | Domain | Example |
-|------|--------|---------|
-| More style options | `style` | `--domain style "glassmorphism dark"` |
-| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
-| UX best practices | `ux` | `--domain ux "animation accessibility"` |
-| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
-| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+| Need                  | Domain       | Example                                 |
+| --------------------- | ------------ | --------------------------------------- |
+| More style options    | `style`      | `--domain style "glassmorphism dark"`   |
+| Chart recommendations | `chart`      | `--domain chart "real-time dashboard"`  |
+| UX best practices     | `ux`         | `--domain ux "animation accessibility"` |
+| Alternative fonts     | `typography` | `--domain typography "elegant luxury"`  |
+| Landing structure     | `landing`    | `--domain landing "hero social-proof"`  |
 
 ### Step 4: Stack Guidelines (Default: html-tailwind)
 
@@ -123,32 +134,32 @@ Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`
 
 ### Available Domains
 
-| Domain | Use For | Example Keywords |
-|--------|---------|------------------|
-| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
-| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
-| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| Domain       | Use For                              | Example Keywords                                         |
+| ------------ | ------------------------------------ | -------------------------------------------------------- |
+| `product`    | Product type recommendations         | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style`      | UI styles, colors, effects           | glassmorphism, minimalism, dark mode, brutalism          |
+| `typography` | Font pairings, Google Fonts          | elegant, playful, professional, modern                   |
+| `color`      | Color palettes by product type       | saas, ecommerce, healthcare, beauty, fintech, service    |
+| `landing`    | Page structure, CTA strategies       | hero, hero-centric, testimonial, pricing, social-proof   |
+| `chart`      | Chart types, library recommendations | trend, comparison, timeline, funnel, pie                 |
+| `ux`         | Best practices, anti-patterns        | animation, accessibility, z-index, loading               |
+| `react`      | React/Next.js performance            | waterfall, bundle, suspense, memo, rerender, cache       |
+| `web`        | Web interface guidelines             | aria, focus, keyboard, semantic, virtualize              |
+| `prompt`     | AI prompts, CSS keywords             | (style name)                                             |
 
 ### Available Stacks
 
-| Stack | Focus |
-|-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
-| `react` | State, hooks, performance, patterns |
-| `nextjs` | SSR, routing, images, API routes |
-| `vue` | Composition API, Pinia, Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
-| `react-native` | Components, Navigation, Lists |
-| `flutter` | Widgets, State, Layout, Theming |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| Stack             | Focus                                                 |
+| ----------------- | ----------------------------------------------------- |
+| `html-tailwind`   | Tailwind utilities, responsive, a11y (DEFAULT)        |
+| `react`           | State, hooks, performance, patterns                   |
+| `nextjs`          | SSR, routing, images, API routes                      |
+| `vue`             | Composition API, Pinia, Vue Router                    |
+| `svelte`          | Runes, stores, SvelteKit                              |
+| `swiftui`         | Views, State, Navigation, Animation                   |
+| `react-native`    | Components, Navigation, Lists                         |
+| `flutter`         | Widgets, State, Layout, Theming                       |
+| `shadcn`          | shadcn/ui components, theming, forms, patterns        |
 | `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
 
 ---
@@ -158,6 +169,7 @@ Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`
 **User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
 
 ### Step 1: Analyze Requirements
+
 - Product type: Beauty/Spa service
 - Style keywords: elegant, professional, soft
 - Industry: Beauty/Wellness
@@ -222,37 +234,37 @@ These are frequently overlooked issues that make UI look unprofessional:
 
 ### Icons & Visual Elements
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
-| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
-| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| Rule                       | Do                                              | Don't                                  |
+| -------------------------- | ----------------------------------------------- | -------------------------------------- |
+| **No emoji icons**         | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons   |
+| **Stable hover states**    | Use color/opacity transitions on hover          | Use scale transforms that shift layout |
+| **Correct brand logos**    | Research official SVG from Simple Icons         | Guess or use incorrect logo paths      |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6          | Mix different icon sizes randomly      |
 
 ### Interaction & Cursor
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
-| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
-| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+| Rule                   | Do                                                    | Don't                                        |
+| ---------------------- | ----------------------------------------------------- | -------------------------------------------- |
+| **Cursor pointer**     | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback**     | Provide visual feedback (color, shadow, border)       | No indication element is interactive         |
+| **Smooth transitions** | Use `transition-colors duration-200`                  | Instant state changes or too slow (>500ms)   |
 
 ### Light/Dark Mode Contrast
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| Rule                      | Do                                  | Don't                                   |
+| ------------------------- | ----------------------------------- | --------------------------------------- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent)     |
+| **Text contrast light**   | Use `#0F172A` (slate-900) for text  | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light**      | Use `#475569` (slate-600) minimum   | Use gray-400 or lighter                 |
+| **Border visibility**     | Use `border-gray-200` in light mode | Use `border-white/10` (invisible)       |
 
 ### Layout & Spacing
 
-| Rule | Do | Don't |
-|------|----|----- |
-| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
-| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
-| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+| Rule                     | Do                                  | Don't                                  |
+| ------------------------ | ----------------------------------- | -------------------------------------- |
+| **Floating navbar**      | Add `top-4 left-4 right-4` spacing  | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding**      | Account for fixed navbar height     | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths         |
 
 ---
 
@@ -261,6 +273,7 @@ These are frequently overlooked issues that make UI look unprofessional:
 Before delivering UI code, verify these items:
 
 ### Visual Quality
+
 - [ ] No emojis used as icons (use SVG instead)
 - [ ] All icons from consistent icon set (Heroicons/Lucide)
 - [ ] Brand logos are correct (verified from Simple Icons)
@@ -268,24 +281,28 @@ Before delivering UI code, verify these items:
 - [ ] Use theme colors directly (bg-primary) not var() wrapper
 
 ### Interaction
+
 - [ ] All clickable elements have `cursor-pointer`
 - [ ] Hover states provide clear visual feedback
 - [ ] Transitions are smooth (150-300ms)
 - [ ] Focus states visible for keyboard navigation
 
 ### Light/Dark Mode
+
 - [ ] Light mode text has sufficient contrast (4.5:1 minimum)
 - [ ] Glass/transparent elements visible in light mode
 - [ ] Borders visible in both modes
 - [ ] Test both modes before delivery
 
 ### Layout
+
 - [ ] Floating elements have proper spacing from edges
 - [ ] No content hidden behind fixed navbars
 - [ ] Responsive at 375px, 768px, 1024px, 1440px
 - [ ] No horizontal scroll on mobile
 
 ### Accessibility
+
 - [ ] All images have alt text
 - [ ] Form inputs have labels
 - [ ] Color is not the only indicator
diff --git a/.npmrc b/.npmrc
index 25f1c6a..b7ee401 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,3 @@
 node-linker=hoisted
-ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
-electron_mirror=https://npmmirror.com/mirrors/electron/
+# ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+# electron_mirror=https://npmmirror.com/mirrors/electron/
diff --git a/.prettierignore b/.prettierignore
index 891bba6..9d3c63c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,3 +7,6 @@ CHANGELOG.md
 /src/routeTree.gen.ts
 .agents/
 openspec/
+.agent/
+.claude/
+.codex
diff --git a/AGENTS.md b/AGENTS.md
index d4815e0..4c586d4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,4 +1,3 @@
-
 # User Guide
 
 This document is a user-level guide for AI assistants working in this repository. It standardizes language, tool/script preferences, and development notes for the current tech stack.
diff --git a/package-lock.json b/package-lock.json
index 0d97f8b..697141b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21015,7 +21015,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21036,7 +21035,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21057,7 +21055,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21078,7 +21075,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21099,7 +21095,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21120,7 +21115,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21141,7 +21135,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21162,7 +21155,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21183,7 +21175,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21204,7 +21195,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -21225,7 +21215,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
diff --git a/src/actions/cloud.ts b/src/actions/cloud.ts
index 762a815..a65feba 100644
--- a/src/actions/cloud.ts
+++ b/src/actions/cloud.ts
@@ -53,7 +53,10 @@ export function previewGenerateCloudIdentityProfile() {
   return ipc.client.cloud.previewIdentityProfile();
 }
 
-export function bindCloudIdentityProfile(input: { accountId: string; mode: 'capture' | 'generate' }) {
+export function bindCloudIdentityProfile(input: {
+  accountId: string;
+  mode: 'capture' | 'generate';
+}) {
   return ipc.client.cloud.bindIdentityProfile(input);
 }
 
@@ -64,7 +67,10 @@ export function bindCloudIdentityProfileWithPayload(input: {
   return ipc.client.cloud.bindIdentityProfileWithPayload(input);
 }
 
-export function restoreCloudIdentityProfileRevision(input: { accountId: string; versionId: string }) {
+export function restoreCloudIdentityProfileRevision(input: {
+  accountId: string;
+  versionId: string;
+}) {
   return ipc.client.cloud.restoreIdentityProfileRevision(input);
 }
 
@@ -72,7 +78,10 @@ export function restoreCloudBaselineProfile(input: { accountId: string }) {
   return ipc.client.cloud.restoreBaselineProfile(input);
 }
 
-export function deleteCloudIdentityProfileRevision(input: { accountId: string; versionId: string }) {
+export function deleteCloudIdentityProfileRevision(input: {
+  accountId: string;
+  versionId: string;
+}) {
   return ipc.client.cloud.deleteIdentityProfileRevision(input);
 }
 
diff --git a/src/components/CloudAccountCard.tsx b/src/components/CloudAccountCard.tsx
index 6cb068a..4eb7fb9 100644
--- a/src/components/CloudAccountCard.tsx
+++ b/src/components/CloudAccountCard.tsx
@@ -26,6 +26,10 @@ import { useAppConfig } from '@/hooks/useAppConfig';
 import { useProviderGrouping } from '@/hooks/useProviderGrouping';
 import { ProviderGroup } from '@/components/ProviderGroup';
 
+interface ModelQuotaInfo {
+  percentage: number;
+  resetTime: string;
+}
 interface CloudAccountCardProps {
   account: CloudAccount;
   onRefresh: (id: string) => void;
@@ -62,22 +66,14 @@ export function CloudAccountCard({
 
   // Helpers to get quota color
   const getQuotaColor = (percentage: number) => {
-    if (percentage > 80) {
-      return 'text-green-500';
-    }
-    if (percentage > 20) {
-      return 'text-yellow-500';
-    }
+    if (percentage > 80) return 'text-green-500';
+    if (percentage > 20) return 'text-yellow-500';
     return 'text-red-500';
   };
 
   const getQuotaBarColor = (percentage: number) => {
-    if (percentage > 80) {
-      return 'bg-emerald-500';
-    }
-    if (percentage > 20) {
-      return 'bg-amber-500';
-    }
+    if (percentage > 80) return 'bg-emerald-500';
+    if (percentage > 20) return 'bg-amber-500';
     return 'bg-rose-500';
   };
 
@@ -90,63 +86,144 @@ export function CloudAccountCard({
 
   const formatTimeRemaining = (dateStr: string) => {
     const targetDate = new Date(dateStr);
-    if (Number.isNaN(targetDate.getTime())) {
-      return null;
-    }
+    if (Number.isNaN(targetDate.getTime())) return null;
 
     const now = new Date();
-    if (isBefore(targetDate, now)) {
-      return '0h 0m';
-    }
+    if (isBefore(targetDate, now)) return '0h 0m';
 
-    // Calculate difference in hours and minutes
-    const diffHrs = differenceInHours(targetDate, now);
-    const diffMins = differenceInMinutes(targetDate, now) - diffHrs * 60;
+    const diffHrs = Math.max(0, differenceInHours(targetDate, now));
+    const diffMins = Math.max(0, differenceInMinutes(targetDate, now) - diffHrs * 60);
     if (diffHrs >= 24) {
       const diffDays = Math.floor(diffHrs / 24);
       const remainingHrs = diffHrs % 24;
       return `${diffDays}d ${remainingHrs}h`;
     }
-
     return `${diffHrs}h ${diffMins}m`;
   };
 
   const getResetTimeLabel = (resetTime?: string) => {
-    if (!resetTime) {
-      return t('cloud.card.resetUnknown');
-    }
-
+    if (!resetTime) return t('cloud.card.resetUnknown');
     const remaining = formatTimeRemaining(resetTime);
-    if (!remaining) {
-      return t('cloud.card.resetUnknown');
-    }
-
+    if (!remaining) return t('cloud.card.resetUnknown');
     return `${t('cloud.card.resetPrefix')}: ${remaining}`;
   };
 
   const getResetTimeTitle = (resetTime?: string) => {
-    if (!resetTime) {
-      return undefined;
-    }
-
+    if (!resetTime) return undefined;
     const resetDate = new Date(resetTime);
-    if (Number.isNaN(resetDate.getTime())) {
-      return undefined;
-    }
-
+    if (Number.isNaN(resetDate.getTime())) return undefined;
     return `${t('cloud.card.resetTime')}: ${resetDate.toLocaleString()}`;
   };
 
-  const modelQuotas = Object.entries(account.quota?.models || {}).filter(
+  // --- Logic for model groups ---
+  const rawModels = Object.entries(account.quota?.models || {}).filter(
     ([modelName]) => config?.model_visibility?.[modelName] !== false,
   );
 
+  // Group Gemini 3 Pro Low/High if both exist
+  const processedModels: Record<string, ModelQuotaInfo> = {};
+  const hasLow = rawModels.some(([name]) => name.includes('gemini-3-pro-low'));
+  const hasHigh = rawModels.some(([name]) => name.includes('gemini-3-pro-high'));
+
+  for (const [name, info] of rawModels) {
+    if (name.includes('gemini-3-pro-low') && hasHigh) continue;
+    if (name.includes('gemini-3-pro-high') && hasLow) {
+      // Use the lower percentage if both exist, to be safe
+      const lowInfo = rawModels.find(([n]) => n.includes('gemini-3-pro-low'))?.[1];
+      const mergedPercentage = lowInfo
+        ? Math.min(info.percentage, lowInfo.percentage)
+        : info.percentage;
+      processedModels['gemini-3-pro-low/high'] = { ...info, percentage: mergedPercentage };
+      continue;
+    }
+    processedModels[name] = info;
+  }
+
+  const geminiModels = Object.entries(processedModels)
+    .filter(([name]) => name.includes('gemini') && !/gemini-[12](\.|$|-)/i.test(name))
+    .sort((a, b) => b[1].percentage - a[1].percentage);
+
+  const claudeModels = Object.entries(processedModels)
+    .filter(([name]) => name.includes('claude'))
+    .sort((a, b) => b[1].percentage - a[1].percentage);
+
+  const hasHighTier = geminiModels.some(
+    ([name, info]) => name.includes('gemini-3-pro') && info.percentage > 50,
+  );
+  const hasRenderableModels = geminiModels.length > 0 || claudeModels.length > 0;
+
+  const formatModelName = (name: string) => {
+    return name
+      .replace('models/', '')
+      .replace('gemini-3-pro-low/high', 'Gemini 3 Pro (Low/High)')
+      .replace('gemini-3-pro-preview', 'Gemini 3 Pro Preview')
+      .replace('gemini-3-pro-image', 'Gemini 3 Pro Image')
+      .replace('gemini-3-pro', 'Gemini 3 Pro')
+      .replace('gemini-3-flash', 'Gemini 3 Flash')
+      .replace('claude-sonnet-4-5-thinking', 'Claude 4.5 Sonnet (Thinking)')
+      .replace('claude-sonnet-4-5', 'Claude 4.5 Sonnet')
+      .replace('claude-opus-4-6-thinking', 'Claude 4.6 Opus (Thinking)')
+      .replace('claude-opus-4-5-thinking', 'Claude 4.5 Opus (Thinking)')
+      .replace('claude-3-5-sonnet', 'Claude 3.5 Sonnet')
+      .replace(/-/g, ' ')
+      .split(' ')
+      .map((word) => (word.length > 2 ? word.charAt(0).toUpperCase() + word.slice(1) : word))
+      .join(' ');
+  };
+
+  const renderModelGroup = (title: string, models: [string, ModelQuotaInfo][]) => {
+    if (models.length === 0) return null;
+    return (
+      <div key={title} className="space-y-1">
+        <div className="flex items-center gap-1.5 px-2 py-1">
+          <span className="text-muted-foreground/70 text-[10px] font-bold tracking-wider uppercase">
+            {title}
+          </span>
+          <div className="bg-border/50 h-[1px] flex-1" />
+        </div>
+        {models.map(([modelName, info]) => (
+          <div
+            key={modelName}
+            className="group/item hover:bg-muted/60 hover:border-border/60 grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-transparent px-2 py-1.5 text-sm transition-all"
+          >
+            <span
+              className="text-muted-foreground group-hover/item:text-foreground min-w-0 truncate font-semibold"
+              title={modelName}
+            >
+              {formatModelName(modelName)}
+            </span>
+            <div className="flex flex-col items-end gap-0.5">
+              <span
+                className="text-muted-foreground text-[9px] leading-none opacity-80"
+                title={getResetTimeTitle(info.resetTime)}
+              >
+                {getResetTimeLabel(info.resetTime)}
+              </span>
+              <div className="flex items-baseline gap-1">
+                <span
+                  className={`font-mono text-xs leading-none font-bold ${getQuotaColor(info.percentage)}`}
+                >
+                  {info.percentage}%
+                </span>
+                <div className="bg-muted h-1 w-16 overflow-hidden rounded-full">
+                  <div
+                    className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColor(info.percentage)}`}
+                    style={{ width: `${Math.max(0, Math.min(100, info.percentage))}%` }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
   return (
     <Card
       className={`group bg-card hover:border-primary/40 flex h-full flex-col overflow-hidden border transition-all duration-200 hover:shadow-sm ${isSelected ? 'ring-primary border-primary/50 ring-2' : ''}`}
     >
       <CardHeader className="relative flex flex-row items-center gap-4 space-y-0 pb-2">
-        {/* Selection Checkbox - Visible on hover or selected */}
         {onToggleSelection && (
           <div
             className={`absolute top-2 left-2 z-10 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} bg-background/90 rounded-full p-2 transition-opacity`}
@@ -233,6 +310,15 @@ export function CloudAccountCard({
             )}
           </div>
 
+          {hasHighTier && (
+            <Badge
+              variant="secondary"
+              className="animate-pulse border-blue-500/20 bg-blue-500/10 text-[10px] text-blue-500"
+            >
+              {t('cloud.card.gemini3Ready')}
+            </Badge>
+          )}
+
           {account.is_active ? (
             <Button variant="ghost" size="sm" disabled className="text-green-600 opacity-100">
               <Power className="mr-1 h-3 w-3" />
@@ -258,7 +344,6 @@ export function CloudAccountCard({
 
         <div className="space-y-2">
           {providerGroupingsEnabled ? (
-            // Grouped view with provider sections
             (() => {
               const accountStats = getAccountStats(account);
               if (accountStats.visibleModels === 0) {
@@ -271,7 +356,6 @@ export function CloudAccountCard({
               }
               return (
                 <>
-                  {/* Account-level overall stats */}
                   <div className="bg-muted/40 flex items-center justify-between rounded-lg px-3 py-1.5 text-xs">
                     <span className="font-medium">{t('settings.providerGroupings.overall')}</span>
                     <div className="flex items-center gap-2">
@@ -290,7 +374,6 @@ export function CloudAccountCard({
                       </div>
                     </div>
                   </div>
-                  {/* Provider groups */}
                   {accountStats.providers.map((providerStats) => (
                     <ProviderGroup
                       key={providerStats.providerKey}
@@ -310,43 +393,12 @@ export function CloudAccountCard({
                 </>
               );
             })()
-          ) : modelQuotas.length > 0 ? (
-            modelQuotas.map(([modelName, info]) => (
-              <div
-                key={modelName}
-                className="hover:bg-muted/60 hover:border-border/60 grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-transparent px-2 py-2 text-sm transition-colors"
-              >
-                <span className="text-muted-foreground min-w-0 truncate" title={modelName}>
-                  {modelName.replace('models/', '')}
-                </span>
-                <div className="flex flex-col items-end gap-1">
-                  <span
-                    className="text-muted-foreground text-[10px] leading-none"
-                    title={getResetTimeTitle(info.resetTime)}
-                  >
-                    {getResetTimeLabel(info.resetTime)}
-                  </span>
-                  <div className="flex items-baseline gap-1.5">
-                    <span
-                      className={`font-mono leading-none font-bold ${getQuotaColor(info.percentage)}`}
-                    >
-                      {getQuotaLabel(info.percentage)}
-                    </span>
-                    {info.percentage > 0 && (
-                      <span className="text-muted-foreground text-[10px]">
-                        {t('cloud.card.left')}
-                      </span>
-                    )}
-                  </div>
-                  <div className="bg-muted h-1.5 w-24 overflow-hidden rounded-full">
-                    <div
-                      className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColor(info.percentage)}`}
-                      style={{ width: `${Math.max(0, Math.min(100, info.percentage))}%` }}
-                    />
-                  </div>
-                </div>
-              </div>
-            ))
+          ) : hasRenderableModels ? (
+            <div className="space-y-3">
+              {renderModelGroup(t('cloud.card.groupGoogleGemini'), geminiModels)}
+              <div className="pt-1" />
+              {renderModelGroup(t('cloud.card.groupAnthropicClaude'), claudeModels)}
+            </div>
           ) : (
             <div className="text-muted-foreground flex flex-col items-center justify-center py-4">
               <Box className="mb-2 h-8 w-8 opacity-20" />
diff --git a/src/ipc/cloud/handler.ts b/src/ipc/cloud/handler.ts
index 7a8d36d..2755e7f 100644
--- a/src/ipc/cloud/handler.ts
+++ b/src/ipc/cloud/handler.ts
@@ -197,20 +197,25 @@ export async function switchCloudAccount(accountId: string): Promise<void> {
         account.device_profile = generated;
       }
 
-      // 1. Ensure token is fresh before injecting
-      const now = Math.floor(Date.now() / 1000);
-      if (account.token.expiry_timestamp < now + 300) {
-        logger.info(`Token for ${account.email} near expiry, refreshing before switch...`);
-        try {
-          const newTokenData = await GoogleAPIService.refreshAccessToken(account.token.refresh_token);
-          account.token.access_token = newTokenData.access_token;
-          account.token.expires_in = newTokenData.expires_in;
-          account.token.expiry_timestamp = now + newTokenData.expires_in;
-          await CloudAccountRepo.updateToken(account.id, account.token);
-        } catch (e) {
-          logger.warn('Failed to refresh token before switch, trying with existing token', e);
+      // 1. Prepare token refresh promise (start it in parallel with process exit)
+      const tokenRefreshPromise = (async () => {
+        const now = Math.floor(Date.now() / 1000);
+        if (account.token.expiry_timestamp < now + 1200) { // Increased buffer to 20m
+          logger.info(`Token for ${account.email} near expiry, refreshing in parallel...`);
+          try {
+            const newTokenData = await GoogleAPIService.refreshAccessToken(
+              account.token.refresh_token,
+            );
+            account.token.access_token = newTokenData.access_token;
+            account.token.expires_in = newTokenData.expires_in;
+            account.token.expiry_timestamp = now + newTokenData.expires_in;
+            await CloudAccountRepo.updateToken(account.id, account.token);
+            logger.info(`Token refreshed for ${account.email}`);
+          } catch (e) {
+            logger.warn('Failed to refresh token in parallel, will try to use existing', e);
+          }
         }
-      }
+      })();
 
       await executeSwitchFlow({
         scope: 'cloud',
@@ -218,29 +223,25 @@ export async function switchCloudAccount(accountId: string): Promise<void> {
         applyFingerprint: isIdentityProfileApplyEnabled(),
         processExitTimeoutMs: 10000,
         performSwitch: async () => {
-          // 3. Backup Database (New Logic)
-          const dbPaths = getAntigravityDbPaths();
-          // Find the valid DB path
-          let dbPath: string | null = null;
-          for (const p of dbPaths) {
-            if (fs.existsSync(p)) {
-              dbPath = p;
-              break;
-            }
-          }
+          // Wait for token refresh to complete before injection if it was started
+          await tokenRefreshPromise;
 
-          if (dbPath) {
+          // 3. Backup Database (Optimized to avoid race conditions)
+          const dbPaths = getAntigravityDbPaths();
+          for (const dbPath of dbPaths) {
             try {
               const backupPath = `${dbPath}.backup`;
-              fs.copyFileSync(dbPath, backupPath);
+              await fs.promises.copyFile(dbPath, backupPath);
               logger.info(`Backed up database to ${backupPath}`);
-            } catch (e) {
-              logger.error('Failed to backup database', e);
+              break; // Success, stop trying other paths
+            } catch (e: any) {
+              // If file not found, just try the next path
+              if (e.code === 'ENOENT') continue;
+              logger.error(`Failed to backup database at ${dbPath}`, e);
             }
           }
 
           // 4. Inject Token
-          // injectedCloudToken uses direct DB/FS access which is sync better-sqlite3.
           CloudAccountRepo.injectCloudToken(account);
 
           // 5. Update usage and active status
diff --git a/src/ipc/cloud/router.ts b/src/ipc/cloud/router.ts
index 274afd6..3df304c 100644
--- a/src/ipc/cloud/router.ts
+++ b/src/ipc/cloud/router.ts
@@ -20,10 +20,7 @@ import {
   startAuthFlow,
 } from './handler';
 import { CloudAccountSchema } from '../../types/cloudAccount';
-import {
-  DeviceProfileSchema,
-  DeviceProfilesSnapshotSchema,
-} from '../../types/account';
+import { DeviceProfileSchema, DeviceProfilesSnapshotSchema } from '../../types/account';
 import { CloudAccountRepo } from '../database/cloudHandler';
 import { logger } from '../../utils/logger';
 import { getSwitchMetricsSnapshot } from '../switchMetrics';
diff --git a/src/ipc/device/handler.ts b/src/ipc/device/handler.ts
index 4e636bc..09a99fd 100644
--- a/src/ipc/device/handler.ts
+++ b/src/ipc/device/handler.ts
@@ -34,10 +34,8 @@ export interface DeviceHardeningSnapshot {
   lastFailureAt: number | null;
 }
 
-const UUID_V4_REGEX =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
-const SQM_ID_REGEX =
-  /^\{[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}\}$/;
+const UUID_V4_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
+const SQM_ID_REGEX = /^\{[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}\}$/;
 
 interface DeviceProfileTemplate {
   machineIdPrefix: string;
@@ -183,7 +181,11 @@ function getTelemetryField(storage: Record<string, unknown>, key: string): strin
 }
 
 function ensureTelemetryObject(storage: Record<string, unknown>): Record<string, unknown> {
-  if (!storage.telemetry || typeof storage.telemetry !== 'object' || Array.isArray(storage.telemetry)) {
+  if (
+    !storage.telemetry ||
+    typeof storage.telemetry !== 'object' ||
+    Array.isArray(storage.telemetry)
+  ) {
     storage.telemetry = {};
   }
   return storage.telemetry as Record<string, unknown>;
@@ -272,9 +274,7 @@ function pickDeviceProfileTemplate(): DeviceProfileTemplate {
 }
 
 function deterministicUuidFromSeed(seed: string, namespace: string): string {
-  const hash = createHash('sha256')
-    .update(`${namespace}:${seed}`)
-    .digest();
+  const hash = createHash('sha256').update(`${namespace}:${seed}`).digest();
   const bytes = Buffer.from(hash.subarray(0, 16));
 
   bytes[6] = (bytes[6] & 0x0f) | 0x40;
@@ -463,10 +463,18 @@ function buildApplyError(
 ): Error {
   const message = original instanceof Error ? original.message : String(original);
   const wrapped = new Error(`device_apply_failed:${reason}:${stage}:${message}`);
-  (wrapped as Error & { deviceFailureReason?: DeviceApplyFailureReason; deviceFailureStage?: string })
-    .deviceFailureReason = reason;
-  (wrapped as Error & { deviceFailureReason?: DeviceApplyFailureReason; deviceFailureStage?: string })
-    .deviceFailureStage = stage;
+  (
+    wrapped as Error & {
+      deviceFailureReason?: DeviceApplyFailureReason;
+      deviceFailureStage?: string;
+    }
+  ).deviceFailureReason = reason;
+  (
+    wrapped as Error & {
+      deviceFailureReason?: DeviceApplyFailureReason;
+      deviceFailureStage?: string;
+    }
+  ).deviceFailureStage = stage;
   return wrapped;
 }
 
@@ -490,12 +498,8 @@ export function isIdentityProfileApplyEnabled(): boolean {
     return !isSafeModeActiveNow();
   }
   const normalized = raw.trim().toLowerCase();
-  const envEnabled = (
-    normalized !== '0' &&
-    normalized !== 'false' &&
-    normalized !== 'off' &&
-    normalized !== 'no'
-  );
+  const envEnabled =
+    normalized !== '0' && normalized !== 'false' && normalized !== 'off' && normalized !== 'no';
   if (!envEnabled) {
     return false;
   }
@@ -605,8 +609,9 @@ export function syncStateServiceMachineIdValue(serviceMachineId: string, dbPath?
       db = new Database(targetDbPath);
       db.pragma('busy_timeout = 3000');
       db.exec('CREATE TABLE IF NOT EXISTS ItemTable (key TEXT PRIMARY KEY, value TEXT);');
-      db.prepare("INSERT OR REPLACE INTO ItemTable (key, value) VALUES ('storage.serviceMachineId', ?)")
-        .run(serviceMachineId);
+      db.prepare(
+        "INSERT OR REPLACE INTO ItemTable (key, value) VALUES ('storage.serviceMachineId', ?)",
+      ).run(serviceMachineId);
       return;
     } catch (error) {
       if (isSqliteBusyError(error) && attempt < SQLITE_RETRY_COUNT) {
diff --git a/src/ipc/process/handler.ts b/src/ipc/process/handler.ts
index 1d56082..680484f 100644
--- a/src/ipc/process/handler.ts
+++ b/src/ipc/process/handler.ts
@@ -345,15 +345,18 @@ export async function closeAntigravity(): Promise<void> {
  * @param timeoutMs {number} The timeout in milliseconds.
  * @returns {Promise<void>} A promise that resolves when the process exits.
  */
-export async function _waitForProcessExit(timeoutMs: number): Promise<void> {
+export async function _waitForProcessExit(
+  timeoutMs: number,
+  pollInterval = 100, // Make it configurable, but keep fast 100ms default
+): Promise<void> {
   const startTime = Date.now();
   while (Date.now() - startTime < timeoutMs) {
     if (!(await isProcessRunning())) {
       return;
     }
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, pollInterval));
   }
-  throw new Error('Process did not exit within timeout');
+  throw new Error(`Antigravity process did not exit within ${timeoutMs}ms`);
 }
 
 /**
diff --git a/src/ipc/switchFlow.ts b/src/ipc/switchFlow.ts
index 285a738..6a4d4c4 100644
--- a/src/ipc/switchFlow.ts
+++ b/src/ipc/switchFlow.ts
@@ -2,7 +2,11 @@ import { type DeviceProfile } from '../types/account';
 import { logger } from '../utils/logger';
 import { closeAntigravity, startAntigravity, _waitForProcessExit } from './process/handler';
 import { applyDeviceProfile } from './device/handler';
-import { type SwitchFailureReason, recordSwitchFailure, recordSwitchSuccess } from './switchMetrics';
+import {
+  type SwitchFailureReason,
+  recordSwitchFailure,
+  recordSwitchSuccess,
+} from './switchMetrics';
 
 export interface SwitchFlowOptions {
   scope: 'local' | 'cloud';
@@ -47,13 +51,7 @@ function toSwitchFailureReason(stage: string, error: unknown): SwitchFailureReas
 }
 
 export async function executeSwitchFlow(options: SwitchFlowOptions): Promise<void> {
-  const {
-    scope,
-    targetProfile,
-    applyFingerprint,
-    processExitTimeoutMs,
-    performSwitch,
-  } = options;
+  const { scope, targetProfile, applyFingerprint, processExitTimeoutMs, performSwitch } = options;
 
   let stage = 'close';
   try {
diff --git a/src/lib/antigravity/ModelMapping.ts b/src/lib/antigravity/ModelMapping.ts
index 736bd66..b8a155e 100644
--- a/src/lib/antigravity/ModelMapping.ts
+++ b/src/lib/antigravity/ModelMapping.ts
@@ -20,49 +20,42 @@ const CLAUDE_TO_GEMINI: Record<string, string> = {
   'claude-haiku-4-5-20251001': 'claude-sonnet-4-5',
 
   // OpenAI Protocol Mapping
-  'gpt-4': 'gemini-2.5-flash',
-  'gpt-4-turbo': 'gemini-2.5-flash',
-  'gpt-4-turbo-preview': 'gemini-2.5-flash',
-  'gpt-4-0125-preview': 'gemini-2.5-flash',
-  'gpt-4-1106-preview': 'gemini-2.5-flash',
-  'gpt-4-0613': 'gemini-2.5-flash',
+  'gpt-4': 'gemini-3-flash',
+  'gpt-4-turbo': 'gemini-3-flash',
+  'gpt-4-turbo-preview': 'gemini-3-flash',
+  'gpt-4-0125-preview': 'gemini-3-flash',
+  'gpt-4-1106-preview': 'gemini-3-flash',
+  'gpt-4-0613': 'gemini-3-flash',
 
-  'gpt-4o': 'gemini-2.5-flash',
-  'gpt-4o-2024-05-13': 'gemini-2.5-flash',
-  'gpt-4o-2024-08-06': 'gemini-2.5-flash',
+  'gpt-4o': 'gemini-3-flash',
+  'gpt-4o-2024-05-13': 'gemini-3-flash',
+  'gpt-4o-2024-08-06': 'gemini-3-flash',
 
-  'gpt-4o-mini': 'gemini-2.5-flash',
-  'gpt-4o-mini-2024-07-18': 'gemini-2.5-flash',
+  'gpt-4o-mini': 'gemini-3-flash',
+  'gpt-4o-mini-2024-07-18': 'gemini-3-flash',
 
-  'gpt-3.5-turbo': 'gemini-2.5-flash',
-  'gpt-3.5-turbo-16k': 'gemini-2.5-flash',
-  'gpt-3.5-turbo-0125': 'gemini-2.5-flash',
-  'gpt-3.5-turbo-1106': 'gemini-2.5-flash',
-  'gpt-3.5-turbo-0613': 'gemini-2.5-flash',
+  'gpt-3.5-turbo': 'gemini-3-flash',
+  'gpt-3.5-turbo-16k': 'gemini-3-flash',
+  'gpt-3.5-turbo-0125': 'gemini-3-flash',
+  'gpt-3.5-turbo-1106': 'gemini-3-flash',
+  'gpt-3.5-turbo-0613': 'gemini-3-flash',
 
   // Gemini Protocol Mapping
-  'gemini-2.5-flash-lite': 'gemini-2.5-flash',
-  'gemini-2.5-flash-thinking': 'gemini-2.5-flash-thinking',
+  'gemini-2.5-flash-lite': 'gemini-3-flash',
   'gemini-3-pro-low': 'gemini-3-pro-preview',
   'gemini-3-pro-high': 'gemini-3-pro-preview',
   'gemini-3-pro-preview': 'gemini-3-pro-preview',
   'gemini-3-pro': 'gemini-3-pro-preview',
-  'gemini-2.5-flash': 'gemini-2.5-flash',
+  'gemini-2.5-flash': 'gemini-3-flash',
   'gemini-3-flash': 'gemini-3-flash',
   'gemini-3-pro-image': 'gemini-3-pro-image',
-  'internal-background-task': 'gemini-2.5-flash',
+  'internal-background-task': 'gemini-3-flash',
 };
 
 const DYNAMIC_IMAGE_BASE_MODEL = 'gemini-3-pro-image';
 const DYNAMIC_IMAGE_RESOLUTIONS = ['', '-2k', '-4k'];
 const DYNAMIC_IMAGE_RATIOS = ['', '-1x1', '-4x3', '-3x4', '-16x9', '-9x16', '-21x9'];
-const EXTRA_DYNAMIC_MODELS = [
-  'gemini-2.0-flash-exp',
-  'gemini-2.5-flash',
-  'gemini-3-flash',
-  'gemini-3-pro-high',
-  'gemini-3-pro-low',
-];
+const EXTRA_DYNAMIC_MODELS = ['gemini-3-flash', 'gemini-3-pro-high', 'gemini-3-pro-low'];
 
 export const MODEL_LIST_CREATED_AT = 1770652800;
 
@@ -93,7 +86,7 @@ export function getAllDynamicModels(customMapping: Record<string, string> = {}):
     modelIds.add(modelId);
   }
 
-  return [...modelIds].sort();
+  return [...modelIds].filter((id) => !/gemini-[12](\.|$|-)/.test(id)).sort();
 }
 
 export function mapClaudeModelToGemini(input: string): string {
diff --git a/src/lib/antigravity/QuotaService.ts b/src/lib/antigravity/QuotaService.ts
index 857ff07..d9b8bdb 100644
--- a/src/lib/antigravity/QuotaService.ts
+++ b/src/lib/antigravity/QuotaService.ts
@@ -115,8 +115,12 @@ export class QuotaService {
               const percentage = Math.floor(fraction * 100);
               const resetTime = info.quotaInfo.resetTime || '';
 
-              // Only save models we care about
-              if (name.includes('gemini') || name.includes('claude')) {
+              // Only save models we care about, filtering out old versions (< 3.0)
+              const isGemini = name.includes('gemini');
+              const isClaude = name.includes('claude');
+              const isOldGemini = /gemini-[12](\.|$|-)/.test(name);
+
+              if ((isGemini || isClaude) && !isOldGemini) {
                 quotaData.models[name] = { percentage, resetTime };
               }
             }
diff --git a/src/localization/i18n.ts b/src/localization/i18n.ts
index 78fbdc1..240d2dc 100644
--- a/src/localization/i18n.ts
+++ b/src/localization/i18n.ts
@@ -286,6 +286,9 @@ i18n
               resetPrefix: 'reset',
               resetTime: 'Reset time',
               resetUnknown: 'Unknown',
+              gemini3Ready: 'Gemini 3 Ready',
+              groupGoogleGemini: 'Google Gemini',
+              groupAnthropicClaude: 'Anthropic Claude',
             },
             identity: {
               title: 'Identity Profile',
@@ -666,6 +669,9 @@ i18n
               resetPrefix: '重置',
               resetTime: '重置时间',
               resetUnknown: '未知',
+              gemini3Ready: 'Gemini 3 就绪',
+              groupGoogleGemini: 'Google Gemini',
+              groupAnthropicClaude: 'Anthropic Claude',
             },
             identity: {
               title: '身份配置',
@@ -1050,6 +1056,9 @@ i18n
               resetPrefix: 'Сброс',
               resetTime: 'Время сброса',
               resetUnknown: 'Неизвестно',
+              gemini3Ready: 'Gemini 3 готов',
+              groupGoogleGemini: 'Google Gemini',
+              groupAnthropicClaude: 'Anthropic Claude',
             },
             identity: {
               title: 'Профиль идентичности',
diff --git a/src/main.ts b/src/main.ts
index dd5085a..e47a850 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -200,8 +200,41 @@ function createWindow({ startHidden }: { startHidden: boolean }) {
   logger.info('createWindow: setMainWindow done');
 
   if (inDevelopment && MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-    logger.info(`createWindow: loading URL ${MAIN_WINDOW_VITE_DEV_SERVER_URL}`);
-    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+    const devUrl = MAIN_WINDOW_VITE_DEV_SERVER_URL;
+    logger.info(`createWindow: waiting for Vite dev server at ${devUrl}`);
+
+    // Wait for Vite to be ready before loading
+    const waitForVite = async (url: string, maxRetries = 30, delay = 500) => {
+      for (let i = 0; i < maxRetries; i++) {
+        try {
+          const response = await fetch(url);
+          if (response.ok) {
+            logger.info(`createWindow: Vite server ready after ${i * delay}ms`);
+            return true;
+          }
+        } catch (e) {
+          // Server not ready yet
+        }
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+      logger.error('createWindow: Vite server did not start in time');
+      return false;
+    };
+
+    waitForVite(devUrl).then((ready) => {
+      if (mainWindow.isDestroyed()) {
+        logger.warn('createWindow: BrowserWindow destroyed before Vite URL load');
+        return;
+      }
+
+      if (ready) {
+        logger.info(`createWindow: loading URL ${devUrl}`);
+        mainWindow.loadURL(devUrl);
+      } else {
+        logger.error('createWindow: Failed to connect to Vite server, loading anyway');
+        mainWindow.loadURL(devUrl);
+      }
+    });
   } else {
     logger.info('createWindow: loading file index.html');
     mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
diff --git a/src/preload.ts b/src/preload.ts
index c38f084..513c750 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -32,7 +32,7 @@ try {
   // console.error('Preload: Failed to read config', e);
 }
 
-if (sentryEnabled) {
+if (sentryEnabled && process.env.NODE_ENV === 'production') {
   // Defer Sentry init to avoid blocking main thread during startup (white screen fix)
   setTimeout(() => {
     // console.log('[Preload] Initializing Sentry (Deferred)');
diff --git a/src/renderer.ts b/src/renderer.ts
index c2b9c7a..e7d4421 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1,12 +1,15 @@
-import * as Sentry from '@sentry/electron/renderer';
-
-if (window.electron.SENTRY_ENABLED) {
-  // Defer initialization to prioritize initial render
-  setTimeout(() => {
-    Sentry.init({
-      dsn: process.env.SENTRY_DSN,
+if (window.electron?.SENTRY_ENABLED && process.env.NODE_ENV === 'production') {
+  import('@sentry/electron/renderer')
+    .then((Sentry) => {
+      setTimeout(() => {
+        Sentry.init({
+          dsn: process.env.SENTRY_DSN,
+        });
+      }, 2000);
+    })
+    .catch((error) => {
+      console.warn('Sentry initialization failed:', error);
     });
-  }, 2000);
 }
 
 import '@/App';
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 661415b..a980bb3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -15,13 +15,7 @@ function HomePage() {
   );
 }
 
-function HomePageErrorBoundary({
-  error,
-  reset,
-}: {
-  error: unknown;
-  reset: () => void;
-}) {
+function HomePageErrorBoundary({ error, reset }: { error: unknown; reset: () => void }) {
   const { t } = useTranslation();
   const { toast } = useToast();
   const hasShownToastRef = useRef(false);
diff --git a/src/server/modules/proxy/gemini.controller.ts b/src/server/modules/proxy/gemini.controller.ts
index c4b1aa4..e90eb06 100644
--- a/src/server/modules/proxy/gemini.controller.ts
+++ b/src/server/modules/proxy/gemini.controller.ts
@@ -1,4 +1,14 @@
-import { Body, Controller, Get, HttpStatus, Inject, Param, Post, Res, UseGuards } from '@nestjs/common';
+import {
+  Body,
+  Controller,
+  Get,
+  HttpStatus,
+  Inject,
+  Param,
+  Post,
+  Res,
+  UseGuards,
+} from '@nestjs/common';
 import { FastifyReply } from 'fastify';
 import { isEmpty } from 'lodash-es';
 import { Observable } from 'rxjs';
@@ -131,9 +141,7 @@ export class GeminiController {
     }
   }
 
-  private parseCombinedModelAction(
-    modelAction: string,
-  ): {
+  private parseCombinedModelAction(modelAction: string): {
     model: string;
     action: string;
   } | null {
@@ -288,5 +296,4 @@ export class GeminiController {
   private hasHijack(reply: FastifyReply): reply is FastifyReply & { hijack: () => void } {
     return typeof (reply as { hijack?: unknown }).hijack === 'function';
   }
-
 }
diff --git a/src/server/modules/proxy/proxy.controller.ts b/src/server/modules/proxy/proxy.controller.ts
index d490609..be65835 100644
--- a/src/server/modules/proxy/proxy.controller.ts
+++ b/src/server/modules/proxy/proxy.controller.ts
@@ -30,14 +30,12 @@ import {
 } from '../../../lib/antigravity/ModelMapping';
 import { getServerConfig } from '../../server-config';
 
-
-
 @Controller('v1')
 @UseGuards(ProxyGuard)
 export class ProxyController {
   private readonly logger = new Logger(ProxyController.name);
 
-  constructor(@Inject(ProxyService) private readonly proxyService: ProxyService) { }
+  constructor(@Inject(ProxyService) private readonly proxyService: ProxyService) {}
 
   @Get('models')
   listModels(@Res() res: FastifyReply) {
@@ -223,12 +221,13 @@ export class ProxyController {
           content:
             imageParts.length > 0
               ? [
-                {
-                  type: 'text',
-                  text: body.prompt ?? 'Please edit this image based on the provided instruction.',
-                },
-                ...imageParts,
-              ]
+                  {
+                    type: 'text',
+                    text:
+                      body.prompt ?? 'Please edit this image based on the provided instruction.',
+                  },
+                  ...imageParts,
+                ]
               : (body.prompt ?? 'Please edit this image based on the provided instruction.'),
         },
       ],
@@ -951,7 +950,10 @@ export class ProxyController {
       parts.push({ text: fallbackPrompt || 'Please generate an image based on this request.' });
     } else if (typeof userMessage.content === 'string') {
       parts.push({
-        text: userMessage.content || fallbackPrompt || 'Please generate an image based on this request.',
+        text:
+          userMessage.content ||
+          fallbackPrompt ||
+          'Please generate an image based on this request.',
       });
     } else {
       for (const block of userMessage.content) {
diff --git a/src/server/modules/proxy/proxy.guard.ts b/src/server/modules/proxy/proxy.guard.ts
index 8681272..a662725 100644
--- a/src/server/modules/proxy/proxy.guard.ts
+++ b/src/server/modules/proxy/proxy.guard.ts
@@ -6,7 +6,11 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { getServerConfig } from '../../server-config';
-import { extractApiKeyToken, hasConfiguredApiKey, RequestHeaders } from '../../guards/api-key-auth.util';
+import {
+  extractApiKeyToken,
+  hasConfiguredApiKey,
+  RequestHeaders,
+} from '../../guards/api-key-auth.util';
 
 @Injectable()
 export class ProxyGuard implements CanActivate {
diff --git a/src/styles/global.css b/src/styles/global.css
index af3b393..39b7ac9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -273,38 +273,38 @@
 }
 
 :root {
-  --background: oklch(0.9900 0 0);
+  --background: oklch(0.99 0 0);
   --foreground: oklch(0 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.9900 0 0);
+  --popover: oklch(0.99 0 0);
   --popover-foreground: oklch(0 0 0);
   --primary: oklch(0 0 0);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9400 0 0);
+  --secondary: oklch(0.94 0 0);
   --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.9700 0 0);
-  --muted-foreground: oklch(0.4400 0 0);
-  --accent: oklch(0.9400 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.44 0 0);
+  --accent: oklch(0.94 0 0);
   --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.6300 0.1900 23.0300);
+  --destructive: oklch(0.63 0.19 23.03);
   --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9200 0 0);
-  --input: oklch(0.9400 0 0);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.94 0 0);
   --ring: oklch(0 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5500 0.2200 264.5300);
-  --chart-3: oklch(0.7200 0 0);
-  --chart-4: oklch(0.9200 0 0);
-  --chart-5: oklch(0.5600 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.55 0.22 264.53);
+  --chart-3: oklch(0.72 0 0);
+  --chart-4: oklch(0.92 0 0);
+  --chart-5: oklch(0.56 0 0);
   --radius: 0.5rem;
-  --sidebar: oklch(0.9900 0 0);
+  --sidebar: oklch(0.99 0 0);
   --sidebar-foreground: oklch(0 0 0);
   --sidebar-primary: oklch(0 0 0);
   --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9400 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
   --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.9400 0 0);
+  --sidebar-border: oklch(0.94 0 0);
   --sidebar-ring: oklch(0 0 0);
   --font-sans: Geist, sans-serif;
   --font-serif: Georgia, serif;
@@ -331,37 +331,37 @@
 .dark {
   --background: oklch(0 0 0);
   --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
+  --card: oklch(0.14 0 0);
   --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1800 0 0);
+  --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(1 0 0);
   --primary: oklch(1 0 0);
   --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2500 0 0);
+  --secondary: oklch(0.25 0 0);
   --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2300 0 0);
-  --muted-foreground: oklch(0.7200 0 0);
-  --accent: oklch(0.3200 0 0);
+  --muted: oklch(0.23 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.32 0 0);
   --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6900 0.2000 23.9100);
+  --destructive: oklch(0.69 0.2 23.91);
   --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.2600 0 0);
-  --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5800 0.2100 260.8400);
-  --chart-3: oklch(0.5600 0 0);
-  --chart-4: oklch(0.4400 0 0);
-  --chart-5: oklch(0.9200 0 0);
+  --border: oklch(0.26 0 0);
+  --input: oklch(0.32 0 0);
+  --ring: oklch(0.72 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.58 0.21 260.84);
+  --chart-3: oklch(0.56 0 0);
+  --chart-4: oklch(0.44 0 0);
+  --chart-5: oklch(0.92 0 0);
   --radius: 0.5rem;
-  --sidebar: oklch(0.1800 0 0);
+  --sidebar: oklch(0.18 0 0);
   --sidebar-foreground: oklch(1 0 0);
   --sidebar-primary: oklch(1 0 0);
   --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.3200 0 0);
+  --sidebar-accent: oklch(0.32 0 0);
   --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
+  --sidebar-border: oklch(0.32 0 0);
+  --sidebar-ring: oklch(0.72 0 0);
   --font-sans: Geist, sans-serif;
   --font-serif: Georgia, serif;
   --font-mono: Geist Mono, monospace;
@@ -381,4 +381,4 @@
   --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
   --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
   --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-}
\ No newline at end of file
+}
diff --git a/src/tests/scripts/project-id-request-validation.ts b/src/tests/scripts/project-id-request-validation.ts
index 03e1f4d..491e73d 100644
--- a/src/tests/scripts/project-id-request-validation.ts
+++ b/src/tests/scripts/project-id-request-validation.ts
@@ -232,7 +232,8 @@ async function validateRuntimeAnthropicRequestFromRealTokenManager(): Promise<vo
     },
     markAsRateLimited: (accountIdOrEmail: string) =>
       realTokenManager.markAsRateLimited(accountIdOrEmail),
-    markAsForbidden: (accountIdOrEmail: string) => realTokenManager.markAsForbidden(accountIdOrEmail),
+    markAsForbidden: (accountIdOrEmail: string) =>
+      realTokenManager.markAsForbidden(accountIdOrEmail),
   };
 
   try {
@@ -256,7 +257,9 @@ async function validateRuntimeAnthropicRequestFromRealTokenManager(): Promise<vo
   const captured = capturedBody as Record<string, unknown>;
   const tokenProjectId = selectedToken?.token?.project_id;
   const normalizedTokenProjectId =
-    typeof tokenProjectId === 'string' && tokenProjectId.trim() !== '' ? tokenProjectId.trim() : undefined;
+    typeof tokenProjectId === 'string' && tokenProjectId.trim() !== ''
+      ? tokenProjectId.trim()
+      : undefined;
 
   if (normalizedTokenProjectId) {
     assert.equal(
@@ -275,7 +278,10 @@ async function validateRuntimeAnthropicRequestFromRealTokenManager(): Promise<vo
     '[DEBUG] Observed getNextToken options from ProxyService:',
     JSON.stringify(observedGetNextTokenOptions, null, 2),
   );
-  console.log('[DEBUG] Selected token project_id from TokenManagerService:', tokenProjectId ?? null);
+  console.log(
+    '[DEBUG] Selected token project_id from TokenManagerService:',
+    tokenProjectId ?? null,
+  );
   console.log(
     '[DEBUG] Runtime captured internal request (from handleAnthropicMessages):',
     JSON.stringify(captured, null, 2),
diff --git a/src/tests/unit/account.test.ts b/src/tests/unit/account.test.ts
index f7589e4..0f25012 100644
--- a/src/tests/unit/account.test.ts
+++ b/src/tests/unit/account.test.ts
@@ -99,7 +99,10 @@ describe('Account Handler', () => {
   it('should reuse existing device profile on switch', async () => {
     const account = await addAccountSnapshot();
     const accountFilePath = path.join(testAgentDir, 'accounts.json');
-    const allAccounts = JSON.parse(fs.readFileSync(accountFilePath, 'utf-8')) as Record<string, any>;
+    const allAccounts = JSON.parse(fs.readFileSync(accountFilePath, 'utf-8')) as Record<
+      string,
+      any
+    >;
     allAccounts[account.id].deviceProfile = {
       machineId: 'existing-machine',
       macMachineId: 'existing-mac',
diff --git a/src/tests/unit/cloudHandler-sync.test.ts b/src/tests/unit/cloudHandler-sync.test.ts
index 14ac1ea..6552bad 100644
--- a/src/tests/unit/cloudHandler-sync.test.ts
+++ b/src/tests/unit/cloudHandler-sync.test.ts
@@ -266,7 +266,6 @@ describe('CloudAccountRepo.syncFromIDE', () => {
     expect(wroteUnifiedKey).toBe(true);
     expect(updatedOldKey).toBe(false);
   });
-
 });
 
 describe('cloud switch fail-fast path', () => {
diff --git a/src/tests/unit/protobuf-unified.test.ts b/src/tests/unit/protobuf-unified.test.ts
index d574a8b..405f10f 100644
--- a/src/tests/unit/protobuf-unified.test.ts
+++ b/src/tests/unit/protobuf-unified.test.ts
@@ -21,11 +21,7 @@ describe('ProtobufUtils Unified OAuth', () => {
     const refreshToken = 'refresh-token-def';
     const expiry = 1700001234;
 
-    const unifiedB64 = ProtobufUtils.createUnifiedOAuthToken(
-      accessToken,
-      refreshToken,
-      expiry,
-    );
+    const unifiedB64 = ProtobufUtils.createUnifiedOAuthToken(accessToken, refreshToken, expiry);
     const unifiedBytes = new Uint8Array(Buffer.from(unifiedB64, 'base64'));
     const parsed = ProtobufUtils.extractOAuthTokenInfoFromUnifiedState(unifiedBytes);
 
diff --git a/src/tests/unit/proxy-parity-fixtures.test.ts b/src/tests/unit/proxy-parity-fixtures.test.ts
index a1d67e8..b626c6b 100644
--- a/src/tests/unit/proxy-parity-fixtures.test.ts
+++ b/src/tests/unit/proxy-parity-fixtures.test.ts
@@ -6,7 +6,11 @@ import { Observable } from 'rxjs';
 
 import { ProxyService } from '../../server/modules/proxy/proxy.service';
 
-const mockTokenManager = { getNextToken: vi.fn(), markAsRateLimited: vi.fn(), markAsForbidden: vi.fn() };
+const mockTokenManager = {
+  getNextToken: vi.fn(),
+  markAsRateLimited: vi.fn(),
+  markAsForbidden: vi.fn(),
+};
 const mockGeminiClient = { streamGenerateInternal: vi.fn(), generateInternal: vi.fn() };
 
 class TestableProxyService extends ProxyService {
diff --git a/src/types/cloudAccount.ts b/src/types/cloudAccount.ts
index 71b26d7..9b19d6f 100644
--- a/src/types/cloudAccount.ts
+++ b/src/types/cloudAccount.ts
@@ -1,5 +1,10 @@
 import { z } from 'zod';
-import { DeviceProfileSchema, DeviceProfileVersionSchema, type DeviceProfile, type DeviceProfileVersion } from './account';
+import {
+  DeviceProfileSchema,
+  DeviceProfileVersionSchema,
+  type DeviceProfile,
+  type DeviceProfileVersion,
+} from './account';
 
 export interface CloudTokenData {
   access_token: string;
diff --git a/src/utils/protobuf.ts b/src/utils/protobuf.ts
index 1abc373..44aed30 100644
--- a/src/utils/protobuf.ts
+++ b/src/utils/protobuf.ts
@@ -231,9 +231,7 @@ export class ProtobufUtils {
 
     const field4 = this.encodeLenDelimField(4, timestampMsg);
 
-    const combined = new Uint8Array(
-      field1.length + field2.length + field3.length + field4.length,
-    );
+    const combined = new Uint8Array(field1.length + field2.length + field3.length + field4.length);
     combined.set(field1, 0);
     combined.set(field2, field1.length);
     combined.set(field3, field1.length + field2.length);
diff --git a/vite.main.config.mts b/vite.main.config.mts
index dab6099..7a173b0 100644
--- a/vite.main.config.mts
+++ b/vite.main.config.mts
@@ -5,18 +5,23 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 // https://vitejs.dev/config
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN;
+  const shouldEnableSentry = mode === 'production' && Boolean(sentryAuthToken);
 
   return {
-    plugins: [
-      sentryVitePlugin({
-        org: process.env.SENTRY_ORG || env.SENTRY_ORG,
-        project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
-        authToken: process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN,
-        release: {
-          name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
-        },
-      }),
-    ],
+    plugins:
+      shouldEnableSentry
+        ? [
+            sentryVitePlugin({
+              org: process.env.SENTRY_ORG || env.SENTRY_ORG,
+              project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
+              authToken: sentryAuthToken,
+              release: {
+                name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
+              },
+            }),
+          ]
+        : [],
     define: {
       'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN || env.SENTRY_DSN),
     },
diff --git a/vite.preload.config.mts b/vite.preload.config.mts
index c74824a..d01f839 100644
--- a/vite.preload.config.mts
+++ b/vite.preload.config.mts
@@ -4,18 +4,23 @@ import path from 'path';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN;
+  const shouldEnableSentry = mode === 'production' && Boolean(sentryAuthToken);
 
   return {
-    plugins: [
-      sentryVitePlugin({
-        org: process.env.SENTRY_ORG || env.SENTRY_ORG,
-        project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
-        authToken: process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN,
-        release: {
-          name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
-        },
-      }),
-    ],
+    plugins:
+      shouldEnableSentry
+        ? [
+            sentryVitePlugin({
+              org: process.env.SENTRY_ORG || env.SENTRY_ORG,
+              project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
+              authToken: sentryAuthToken,
+              release: {
+                name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
+              },
+            }),
+          ]
+        : [],
     resolve: {
       alias: {
         '@': path.resolve(process.cwd(), './src'),
diff --git a/vite.renderer.config.mts b/vite.renderer.config.mts
index 3a837c5..474351a 100644
--- a/vite.renderer.config.mts
+++ b/vite.renderer.config.mts
@@ -8,26 +8,32 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN;
+  const shouldEnableSentry = mode === 'production' && Boolean(sentryAuthToken);
 
   return {
     plugins: [
-      sentryVitePlugin({
-        org: process.env.SENTRY_ORG || env.SENTRY_ORG,
-        project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
-        authToken: process.env.SENTRY_AUTH_TOKEN || env.SENTRY_AUTH_TOKEN,
-        release: {
-          name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
-        },
-        // Electron loads files from app://, so we need to normalize paths for Source Map matching
-        sourcemaps: {
-          // Rewrite the source paths to strip the Electron app:// protocol
-          rewriteSources: (source) => {
-            // Transform: app:///.vite/renderer/main_window/assets/index.js
-            // Into:      ~/.vite/renderer/main_window/assets/index.js
-            return source.replace(/^app:\/\/\//, '~/');
-          },
-        },
-      }),
+      ...(shouldEnableSentry
+        ? [
+            sentryVitePlugin({
+              org: process.env.SENTRY_ORG || env.SENTRY_ORG,
+              project: process.env.SENTRY_PROJECT || env.SENTRY_PROJECT,
+              authToken: sentryAuthToken,
+              release: {
+                name: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
+              },
+              // Electron loads files from app://, so we need to normalize paths for Source Map matching
+              sourcemaps: {
+                // Rewrite the source paths to strip the Electron app:// protocol
+                rewriteSources: (source) => {
+                  // Transform: app:///.vite/renderer/main_window/assets/index.js
+                  // Into:      ~/.vite/renderer/main_window/assets/index.js
+                  return source.replace(/^app:\/\/\//, '~/');
+                },
+              },
+            }),
+        ]
+        : []),
       tanstackRouter({
         target: 'react',
         autoCodeSplitting: true,
@@ -40,6 +46,9 @@ export default defineConfig(({ mode }) => {
       }),
       codeInspectorPlugin({ bundler: 'vite' }),
     ],
+    optimizeDeps: {
+      entries: ['index.html'],
+    },
     define: {
       'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN || env.SENTRY_DSN),
     },