diff --git a/.env.example b/.env.example
index 189aa27..d7a0209 100644
--- a/.env.example
+++ b/.env.example
@@ -10,3 +10,8 @@ PUBLIC_GA_ID=
 # Set to 1 to emit robots noindex on every page. Auto-set to 1 for non-main
 # branch builds in CI; leave empty otherwise.
 PUBLIC_NOINDEX=
+
+# Production Google Analytics 4 ID, injected by the deploy env (e.g. Cloudflare
+# build variable SITE_GA_ID). Consumed by astro.config.mjs on `main` builds.
+# Leave unset to disable analytics. Local dev: set PUBLIC_GA_ID above instead.
+SITE_GA_ID=
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..ff022bf
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,37 @@
+name: Bug report
+description: Something in a tool is broken or behaves unexpectedly
+labels: ["bug"]
+body:
+  - type: input
+    id: tool
+    attributes:
+      label: Which tool?
+      placeholder: e.g. Image Compressor, DB Diagram, PDF to Image
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: What did you do, what did you expect, what happened instead?
+    validations:
+      required: true
+  - type: textarea
+    id: repro
+    attributes:
+      label: Steps to reproduce
+      placeholder: |
+        1. Open the tool
+        2. Drop file X
+        3. Click Y
+  - type: input
+    id: env
+    attributes:
+      label: Browser / OS
+      placeholder: e.g. Chrome 130 on macOS 15
+  - type: textarea
+    id: console
+    attributes:
+      label: Console errors (if any)
+      description: Open DevTools → Console and paste any errors.
+      render: shell
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..a649138
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Questions & ideas (Discussions)
+    url: https://github.com/slaveofcode/goodwebtools/discussions
+    about: Ask questions or discuss ideas before filing an issue.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..acfb769
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,23 @@
+name: Feature or tool request
+description: Suggest a new tool or an improvement
+labels: ["enhancement"]
+body:
+  - type: textarea
+    id: idea
+    attributes:
+      label: What would you like?
+      description: Describe the tool or improvement and the problem it solves.
+    validations:
+      required: true
+  - type: checkboxes
+    id: constraints
+    attributes:
+      label: Fits the project?
+      options:
+        - label: This can work fully client-side (no server / no data leaving the browser)
+          required: true
+  - type: textarea
+    id: notes
+    attributes:
+      label: Anything else?
+      description: Prior art, links, or libraries that could help.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..447a8b3
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,12 @@
+## What does this PR do?
+
+<!-- A short description. Link any related issue: Closes #123 -->
+
+## Checklist
+
+- [ ] `npm test -- --run` passes
+- [ ] `npm run build` succeeds
+- [ ] `npm run lint` is clean
+- [ ] New tool? It's registered in `src/registry/tools.ts` with an island + tests
+- [ ] No owner-specific deploy assets changed (wrangler bucket names, secrets, domain)
+- [ ] Everything still runs fully client-side (no data leaves the browser)
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..060d106
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main, develop]
+
+jobs:
+  verify:
+    name: Test · Build · Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Test
+        run: npm test -- --run
+      - name: Build
+        run: npm run build
+      - name: Lint
+        run: npm run lint
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000..9331e6b
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,133 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement via GitHub's
+private vulnerability reporting on this repository, or by opening a confidential
+report to the maintainers.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..b83d302
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,70 @@
+# Contributing to GoodWebTools
+
+Thanks for wanting to help! GoodWebTools is a collection of privacy-first tools
+that run entirely in the browser. Contributions — new tools, fixes, docs — are
+welcome.
+
+## Setup
+
+```bash
+git clone https://github.com/slaveofcode/goodwebtools
+cd goodwebtools
+npm install --legacy-peer-deps   # a peer-dep conflict (tfjs/upscaler) needs this
+npm run dev                      # http://localhost:4321
+```
+
+Some tools need ML model files staged locally: `npm run stage:models`.
+
+## Checks (run before opening a PR)
+
+```bash
+npm test -- --run    # unit tests (Vitest)
+npm run build        # production build
+npm run lint         # ESLint
+```
+
+CI runs all three on every PR.
+
+## Branching
+
+- Base your work on `develop` (not `main`). Open PRs against `develop`.
+- Keep PRs focused; one tool or fix per PR.
+
+## Adding a new tool
+
+Tools are self-registering. To add one:
+
+1. **Pure logic** → `src/tools/<category>/<name>.lib.ts` with Vitest tests
+   (`<name>.lib.test.ts`). Keep DOM/canvas out of the pure functions so they're
+   testable.
+2. **UI island** → `src/islands/<category>/<Name>.tsx`, a default-exported React
+   component with **no required props**. Use the shared UI (`Dropzone`,
+   `ImageResult`/`ResultActions`, `usePasteImage`, etc.).
+3. **Register it** in `src/registry/tools.ts` — append a `ToolDef`:
+   ```ts
+   {
+     id: 'my-tool',
+     name: 'My Tool',
+     category: 'Image',            // Dev | PDF | Image | Files | Draw | Media | Playground
+     route: '/tools/my-tool',
+     keywords: ['...'],
+     icon: SomeLucideIcon,
+     summary: 'One-line description',
+     load: () => import('@/islands/image/MyTool'),
+     status: 'stable',
+   }
+   ```
+   The route and page are generated automatically from the registry.
+
+That's it — no routing or page files to touch.
+
+## Principles
+
+- **Client-side only.** No servers, no uploads; user data never leaves the browser.
+- **Follow existing patterns.** Match the surrounding code's style and structure.
+- **Test the logic.** Pure `*.lib.ts` functions get unit tests.
+
+## Reporting bugs / ideas
+
+Use the issue templates, or start a [Discussion](https://github.com/slaveofcode/goodwebtools/discussions).
+By contributing you agree to the [Code of Conduct](./CODE_OF_CONDUCT.md).
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
index 1a7b039..b97b0ca 100644
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -172,3 +172,23 @@ npm run deploy          # = npm run build && wrangler deploy
 Cloudflare's free tier covers this comfortably: static assets have unlimited
 bandwidth, and R2 has a generous free tier for storage + egress (models are
 immutable and hard-cached, so they download once per visitor).
+
+## Deploy your own instance
+
+GoodWebTools is self-hostable on Cloudflare Workers. To run your own copy:
+
+1. **Fork** this repo and clone it.
+2. **Rename the deployment identifiers** in `wrangler.jsonc` (`name`,
+   `env.staging.name`) and the R2 bucket names to values you own.
+3. **Create the R2 buckets:**
+   `npx wrangler r2 bucket create <your-bucket>` (and a `-staging` one).
+4. **Point branding at your domain** in `src/config.ts` (`SITE_URL`, `REPO_URL`)
+   and `astro.config.mjs` (`site`); update `public/robots.txt`.
+5. **(Optional) analytics:** set `SITE_GA_ID` as a production build variable
+   (Workers Builds → Settings → Build). Leave unset to disable.
+6. **Stage & upload the ML models to R2:** `npm run stage:models` then
+   `npm run sync:r2` (see the section above).
+7. **Connect Workers Builds** to your fork (production branch `main`, build
+   command `npm run build`) and push.
+
+Nothing sends data anywhere except your own Cloudflare account.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..376429e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 slaveofcode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 272d1cc..e30edeb 100644
--- a/README.md
+++ b/README.md
@@ -1,236 +1,52 @@
 # GoodWebTools
 
-Privacy-first client-side utilities. All processing happens in your browser.
+Privacy-first daily-driver web tools that run **entirely in your browser** — your
+files never leave your device.
 
-## Features
+**Live:** https://goodwebtools.com · **Desktop app:** see [Releases](https://github.com/slaveofcode/goodwebtools/releases)
 
-- **100% Client-Side** - No file uploads, no servers
-- **Works Offline** - Install as PWA (coming soon)
-- **Open Source** - Audit the code yourself
-- **Privacy-First** - Verify with DevTools Network tab
+![CI](https://github.com/slaveofcode/goodwebtools/actions/workflows/ci.yml/badge.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 
-## Development
+## Why
 
-### Prerequisites
+Most "online tools" upload your files to a server. GoodWebTools does the work
+client-side with WebAssembly, canvas, and on-device ML — so nothing is uploaded,
+tracked, or stored remotely.
 
-- Node.js 20+
-- npm 10+
+## Tools
 
-### Setup
+Dozens of tools across **Dev**, **PDF**, **Image**, **Files**, **Draw**, **Media**,
+and **Playground** categories — JSON/Base64/JWT utilities, image convert/compress/
+resize/annotate, background & object removal, PDF↔image, an Excalidraw whiteboard,
+a DB-diagram (DBML) designer, QR tools, and more. Browse them all at
+[goodwebtools.com](https://goodwebtools.com).
 
-```bash
-npm install
-npm run dev
-```
+## Tech
 
-Open http://localhost:4321
-
-### Scripts
-
-- `npm run dev` - Start dev server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run test` - Run tests
-- `npm run lint` - Lint code
-- `npm run lint:fix` - Fix linting issues
-- `npm run format` - Format code with Prettier
-- `npm run format:check` - Check code formatting
-
-### Architecture
-
-- **Astro** - Static site with View Transitions
-- **React** - Islands for interactivity
-- **Tailwind CSS** - Styling
-- **Nanostores** - State management
-- **Comlink** - Worker communication
-- **Vitest** - Testing
-
-## Status
-
-✅ **Phase 0 — Foundation complete:**
-- Tool registry with search + command palette (⌘K)
-- Theme system (light/dark)
-- Shared services (File, Worker, Asset, Download, Progress, Persistence)
-- Registry-driven dynamic tool routing (`ToolHost`)
-
-✅ **Phase 1 — Dev utilities (17 tools):**
-- JSON Formatter/Validator
-- Base64 Encode/Decode
-- URL Encode/Decode
-- JWT Decoder (decode-only)
-- UUID v4 Generator
-- Password Generator (Bitwarden-style: unbiased RNG, guaranteed types, min numbers/special)
-- Text Diff (line-level)
-- CSV ↔ JSON converter (configurable delimiter: comma, semicolon, tab, pipe)
-- JSON ↔ YAML converter
-- JSON ↔ XML converter
-- JSON ↔ TOML converter
-- Number Base Converter (bin/oct/dec/hex)
-- Color Converter (HEX/RGB/HSL)
-- Markdown Preview (sanitized)
-- QR Code Generator
-- QR Code Reader
-- Timestamp Converter
-- Hash File (MD5 / SHA-1 / SHA-256 / SHA-512, streamed in a worker for large files)
-
-✅ **Phase 2 — PDF suite (11 tools):**
-- Merge PDFs (reorderable)
-- Split PDF (extract page range)
-- Rotate PDF (90/180/270°)
-- Delete PDF pages
-- Watermark PDF (diagonal text)
-- Images → PDF (PNG/JPG)
-- PDF → Images (paginated, PNG/JPG, ZIP-all)
-- Compress PDF
-- Protect PDF (AES-256 password)
-- Unlock PDF (remove password)
-
-Engine: **mupdf-wasm** (in a worker) parses/edits real-world PDFs that pdf-lib
-can't; `pdfjs-dist` renders pages; `pdf-lib` builds images→PDF and draws
-watermarks. All fully client-side. (mupdf is AGPL — fine while this stays open source.)
-
-## Design
-
-**Neo-Brutalism** — thick outlines, hard offset shadows, sharp corners, bold
-Space Grotesk (self-hosted, same-origin to preserve zero external requests).
-Fluid-width, mobile-first layout.
-
-✅ **Phase 3 — Image basics (8 tools):**
-- Image Converter (PNG / JPEG / WebP / AVIF / GIF / ICO favicon / SVG)
-- Image Compressor (quality, size delta)
-- Image Resizer (aspect-lock)
-- Image Cropper (persistent, resizable crop box)
-- Merge Images (stack vertical / horizontal / grid with a column picker, reorderable, gap + background)
-- Image Watermark (diagonal / tiled / corner)
-- Image Annotator (arrows, shapes, text, highlighter, blur — Lark-style; Select to move / rename / delete)
-- Metadata Scrubber (strip EXIF/GPS by re-encoding)
-
-All Canvas-based, fully client-side (`src/tools/image/canvas.lib.ts`).
-Every image tool accepts a **paste from clipboard** (⌘/Ctrl+V) in, and every
-result offers **Download** and **Copy to clipboard**.
-
-✅ **Phase 4 — Files & crypto (5 tools):**
-- File Encrypt / Decrypt — password-lock any file with **AES-256-GCM** and a
-  PBKDF2 key (250k iterations, SHA-256). Self-describing `.gwtenc` container.
-  WebCrypto only, no dependencies.
-- Zip / Unzip — bundle any files into a `.zip`, or extract one and download
-  individual entries. `fflate`, fully client-side.
-- Archive Extractor — extract **RAR, 7z, TAR, GZ, ZIP** and more via
-  `libarchive.js` (WASM, self-hosted worker). Extract-only — creating .rar/.7z
-  isn't possible client-side (proprietary formats).
-- File Split / Join — cut a large file into fixed-size parts (`.001`, `.002`…)
-  and rejoin them. Lazy `Blob.slice`, no full-file buffering.
-- (Hash File gained MD5 / SHA-1 / SHA-256 / SHA-512 with chunked streaming.)
-
-✅ **Phase 5 — ML image tools (5 tools, on-device AI):**
-- Background Remover — removes an image background with an **on-device AI model**
-  (ISNet via `@imgly/background-removal` + onnxruntime-web WASM). The image never
-  leaves the browser; the model (~40 MB) is served same-origin from **R2** and
-  cached. Outputs a transparent PNG.
-- Face Blur — auto-detects faces (MediaPipe BlazeFace, ~230 KB) and hides them
-  with blur / pixelate / solid — all on-device. Great for anonymizing photos.
-- Image Upscaler — enlarges images 2–4× with an **ESRGAN** super-resolution
-  model (UpscalerJS + TensorFlow.js, ~1 MB, tiled). On-device; caps input at
-  ~1.2 MP so the browser stays responsive.
-- Portrait Blur — "portrait mode" bokeh: reuses the background-removal model to
-  keep the subject sharp and blur the background (adjustable strength).
-- Object Remover **(experimental)** — paint over an object and erase it with
-  **LaMa** inpainting (onnxruntime-web). Big model (~200 MB) + a consent gate
-  warning about the download and hardware needs; on-device only.
-
-Model assets are hosted in a Cloudflare **R2** bucket (see `DEPLOYMENT.md`) to
-stay same-origin without hitting the 25 MB static-asset limit.
-
-✅ **Phase 6 — Drawing (2 tools):**
-- Whiteboard — infinite-canvas sketching, diagrams, flowcharts, and mind maps
-  (embeds **Excalidraw**; fonts self-hosted so there are still zero external
-  requests). Export PNG / SVG / `.excalidraw`.
-- Signature Pad — draw a signature and export as PNG or SVG (`signature_pad`).
-
-✅ **Phase 7 — Media (6 tools):**
-- Video → GIF — turn a video clip into an animated GIF (fps/width/trim, two-pass
-  palette for quality).
-- Video Converter — convert / compress / trim / resize video between MP4 (H.264),
-  WebM (VP9) and MOV, with a CRF quality slider and optional audio drop.
-- Video → Audio — rip the audio track out of a video to MP3 / M4A / WAV / Opus.
-- Audio Converter — convert, re-encode (bitrate) or trim audio: MP3 / M4A / Opus /
-  WAV / FLAC.
-- Screen Recorder — record a tab, window or the whole screen (optionally + mic)
-  with the native `MediaRecorder` — no WASM, nothing uploaded.
-- Screenshot — capture the screen with a countdown, then drag a crop rectangle and
-  export PNG / JPG (native `getDisplayMedia` + canvas).
-
-The four ffmpeg tools share one **ffmpeg.wasm** engine (single-thread core, so no
-cross-origin-isolation headers are needed), self-hosted from R2. The video/audio
-never leaves your device.
-
-✅ **Phase 8 — Companion extension (optional):**
-- [`extension/`](./extension) — a thin **MV3 capability-shim** that adds the few
-  things a web page can't do: a **global hotkey** screenshot (fires while another
-  app is focused), **cross-window desktop capture**, and a region-select overlay.
-  It bridges results back to the Screenshot tool via `window.postMessage`, so the
-  site stays fully usable without it (progressive enhancement). Least-privilege
-  permissions, nothing uploaded. See [extension/README.md](./extension/README.md).
-
-✅ **Phase 9 — Playground (2 tools, on-device dev sandboxes):**
-- Code Scratchpad — a VS Code-grade **multi-file** editor on self-hosted
-  **Monaco**: native multi-cursor, move/copy line, column select, find & replace.
-  Open/save real files (File System Access API), autosaved to IndexedDB.
-- SQLite Playground — a durable in-browser **SQLite** database
-  (`@sqlite.org/sqlite-wasm` + OPFS SAHPool, no COOP/COEP) with a schema explorer,
-  a SQL editor (⌘/Ctrl+Enter to run), and a **visual results grid**. DDL/DML show
-  a summary and refresh the schema; import/export `.sqlite`; a sample DB to explore.
-
-Both ride one lazily-loaded, self-hosted Monaco engine — never in the shell
-payload. Nothing is uploaded.
-
-✅ **Phase 10 — Desktop app (Tauri 2):**
-- **System-wide screenshot** — global hotkey (⌘⇧A), multi-display picker, region
-  selector overlay, countdown, main window hides during capture.
-- **Screen + audio recording** — full-screen or bounded region capture via
-  platform screen APIs; audio recorded in parallel via FFmpeg (avfoundation /
-  dshow / pulse) and muxed into the final video on stop.
-- **System tray** — lives in the macOS menu bar; left-click to focus, "Take
-  Screenshot" shortcut directly in the menu.
-- **Native FFmpeg** — bundled sidecar (per-platform binary) with system fallback;
-  verified at startup via `bundle:check` script.
-- **First-run wizard** — permission check (Screen Recording, Microphone, FFmpeg)
-  with one-click jump to System Preferences.
-- **Settings** — desktop preferences (format, tray, launch-at-login), permission
-  status panel, and auto-updater UI.
-- **Auto-updater** — checks GitHub Releases on demand; downloads and relaunches
-  in place.
-- **GitHub Actions release pipeline** — matrix build for macOS (arm64 + x64),
-  Windows, and Linux on `desktop-v*` tags.
-- **Download page** — `/download` auto-detects OS/arch and highlights the right
-  installer.
-
-### Desktop development
+- [Astro](https://astro.build) static site + **React islands** (per-tool, lazy-loaded)
+- Client-side processing: WebAssembly, Canvas, `onnxruntime-web`, `@imgly/background-removal`, `mupdf`, `ffmpeg.wasm`
+- Desktop app via [Tauri 2](https://tauri.app)
+- Deployed on **Cloudflare Workers** (static assets + R2 for ML models)
+
+## Run locally
 
 ```bash
-npm run tauri:dev        # Dev server + Tauri window
-npm run tauri:build      # Release bundle (requires icon assets + FFmpeg sidecar)
-npm run download:ffmpeg  # Download platform FFmpeg sidecars to src-tauri/bin/
-npm run bundle:check     # Verify all required assets before release build
+npm install --legacy-peer-deps
+npm run dev            # http://localhost:4321
 ```
 
-See [RELEASING-DESKTOP.md](./RELEASING-DESKTOP.md) for the full release guide,
-including FFmpeg sidecar setup and signing key configuration for GitHub Actions.
-
-## Testing
+## Contributing
 
-Unit tests cover pure tool logic and service layer: `npm run test` — **385 tests across 43 files**.
+New tools and fixes welcome — the tool registry makes adding one straightforward.
+See **[CONTRIBUTING.md](./CONTRIBUTING.md)** (includes an "add a tool" walkthrough)
+and the **[Code of Conduct](./CODE_OF_CONDUCT.md)**.
 
-## Deployment
+## Self-hosting
 
-Deployed to **Cloudflare Workers** (static assets) with model files streamed
-from an **R2** bucket. See [DEPLOYMENT.md](./DEPLOYMENT.md) for the full guide.
-
-**Quick deploy:**
-```bash
-npm run deploy          # = npm run build && wrangler deploy
-```
+You can run your own instance on Cloudflare — see the "Deploy your own instance"
+section in **[DEPLOYMENT.md](./DEPLOYMENT.md)**.
 
 ## License
 
-MIT
+[MIT](./LICENSE)
diff --git a/RELEASING-DESKTOP.md b/RELEASING-DESKTOP.md
index a568112..5c08515 100644
--- a/RELEASING-DESKTOP.md
+++ b/RELEASING-DESKTOP.md
@@ -2,6 +2,13 @@
 
 How to build, sign, and publish a GoodWebTools desktop release.
 
+> **Self-hosting note:** The signing key, GitHub secrets, and updater endpoints
+> below are specific to the upstream release. A fork building its own desktop
+> app must generate its own signing key (`npm run tauri -- signer generate`),
+> set its own `TAURI_SIGNING_PRIVATE_KEY` secret, and point the updater endpoints
+> in `src-tauri/tauri.conf.json` at its own releases. The upstream private key is
+> never in this repo.
+
 ## Prerequisites
 
 - Rust + Cargo (stable)
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..7ed6aeb
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,21 @@
+# Security Policy
+
+GoodWebTools runs entirely in the browser — files never leave your device — so
+the attack surface is small, but we take reports seriously.
+
+## Reporting a vulnerability
+
+Please **do not** open a public issue for security problems. Instead, use
+GitHub's **private vulnerability reporting**:
+
+1. Go to the repository's **Security** tab.
+2. Click **Report a vulnerability**.
+3. Describe the issue and reproduction steps.
+
+We aim to acknowledge reports within a few days. Once a fix ships, we're happy
+to credit you (unless you prefer to remain anonymous).
+
+## Supported versions
+
+The latest deployed version (`main`) is supported. There are no long-term
+support branches.
diff --git a/astro.config.mjs b/astro.config.mjs
index 3775ffa..a2f9a16 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -13,7 +13,10 @@ import sitemap from '@astrojs/sitemap';
 //
 // Only applied on Workers Builds (WORKERS_CI=1) so local/manual builds keep their
 // existing behavior. An explicitly-set PUBLIC_* env var always wins (overrides).
-const PROD_GA_ID = 'G-4Q9F8CL7FW';
+// The production Google Analytics ID is provided by the deploy environment
+// (SITE_GA_ID build var), not hard-coded — so forks never report to the
+// upstream Analytics property. Owner sets SITE_GA_ID on the production build.
+const PROD_GA_ID = process.env.SITE_GA_ID || '';
 if (process.env.WORKERS_CI === '1') {
   const isProductionBranch = (process.env.WORKERS_CI_BRANCH || '') === 'main';
   if (process.env.PUBLIC_GA_ID === undefined) {
diff --git a/docs/superpowers/plans/2026-07-12-phase0-foundation.md b/docs/superpowers/plans/2026-07-12-phase0-foundation.md
deleted file mode 100644
index eb4338e..0000000
--- a/docs/superpowers/plans/2026-07-12-phase0-foundation.md
+++ /dev/null
@@ -1,3352 +0,0 @@
-# Phase 0: Foundation Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Build the complete architectural foundation for GoodWebTools.com - a privacy-first, client-side utility suite with Astro + React + Tailwind, including tool registry, shared services, command palette, PWA support, and a validation demo tool.
-
-**Architecture:** Layered services architecture with Astro MPA + View Transitions, React islands for interactivity, six singleton services (File, Worker, Asset, Download, Progress, Persistence), persisted shell with cmdk command palette, and full PWA offline capability.
-
-**Tech Stack:** Astro 4.x, React 18, Tailwind CSS, Nanostores, Comlink, cmdk, @vite-pwa/astro, Vitest, Cloudflare Pages
-
-## Global Constraints
-
-- **Performance budget:** Initial shell < 120KB gzipped, FCP < 1.5s
-- **Browser support:** Modern browsers only (Chrome/Edge/Firefox/Safari latest 2 versions)
-- **Accessibility:** WCAG 2.1 AA compliance, keyboard-first navigation
-- **Privacy:** No external network calls except same-origin assets, strict CSP
-- **Code style:** ESLint + Prettier enforced, TypeScript strict mode
-- **Testing:** Vitest for unit tests, manual E2E for Phase 0
-- **Commits:** Conventional commits format (`feat:`, `fix:`, `docs:`, etc.)
-- **Variable naming:** Explicit units in names (byteSize, maxAgeMs, loadedBytes, etc.)
-
----
-
-## File Structure Overview
-
-```
-gwt/
-├── src/
-│   ├── pages/
-│   │   ├── index.astro               # Homepage with tool grid
-│   │   ├── privacy.astro             # Privacy/verification page
-│   │   └── tools/
-│   │       └── [tool].astro          # Dynamic tool route
-│   ├── layouts/
-│   │   └── Base.astro                # Root layout with ViewTransitions
-│   ├── components/
-│   │   ├── shell/
-│   │   │   ├── ShellIsland.tsx       # Persisted shell
-│   │   │   ├── CommandPalette.tsx    # cmdk search
-│   │   │   └── ThemeToggle.tsx       # Light/dark toggle
-│   │   └── ui/
-│   │       ├── Dropzone.tsx          # File drag-drop
-│   │       ├── ProgressBar.tsx       # Progress indicator
-│   │       ├── FileList.tsx          # File list display
-│   │       └── ResultActions.tsx     # Download/copy buttons
-│   ├── islands/
-│   │   └── demo/
-│   │       └── HashDemo.tsx          # Hash tool island
-│   ├── tools/
-│   │   └── demo/
-│   │       ├── hash.lib.ts           # Hash logic
-│   │       └── hash.worker.ts        # Hash worker
-│   ├── services/
-│   │   ├── file.service.ts           # FileService
-│   │   ├── worker.service.ts         # WorkerPool
-│   │   ├── asset.service.ts          # AssetCache
-│   │   ├── download.service.ts       # DownloadService
-│   │   ├── progress.service.ts       # ProgressService
-│   │   └── persistence.service.ts    # PersistenceService
-│   ├── registry/
-│   │   ├── tools.ts                  # Tool manifest
-│   │   └── categories.ts             # Category types
-│   ├── hooks/
-│   │   ├── useWorker.ts              # Worker integration hook
-│   │   └── usePersistence.ts         # Persistence hook
-│   ├── stores/
-│   │   ├── theme.store.ts            # Theme state
-│   │   └── worker.store.ts           # Worker status
-│   ├── styles/
-│   │   └── global.css                # Tailwind + theme vars
-│   └── types/
-│       ├── tool.ts                   # ToolDef interface
-│       └── service.ts                # Service interfaces
-├── public/
-│   ├── icon-192.png
-│   ├── icon-512.png
-│   └── manifest.json
-├── _headers                          # Cloudflare headers
-├── astro.config.mjs
-├── tailwind.config.mjs
-├── tsconfig.json
-├── vitest.config.ts
-├── .eslintrc.js
-├── .prettierrc
-├── README.md
-├── CONTRIBUTING.md
-└── docs/
-    └── architecture.md
-```
-
----
-
-### Task 1: Project Initialization
-
-**Files:**
-- Create: `package.json`, `astro.config.mjs`, `tsconfig.json`, `.gitignore`
-- Create: `src/pages/index.astro` (minimal)
-- Create: `src/styles/global.css`
-
-**Interfaces:**
-- Consumes: None (initial setup)
-- Produces: Working Astro dev server, TypeScript configuration
-
-- [ ] **Step 1: Initialize npm project**
-
-```bash
-npm init -y
-```
-
-Expected: `package.json` created
-
-- [ ] **Step 2: Install core dependencies**
-
-```bash
-npm install astro@^4.0.0 @astrojs/react@^3.0.0 @astrojs/tailwind@^5.0.0 react@^18.2.0 react-dom@^18.2.0 tailwindcss@^3.4.0
-```
-
-Expected: Dependencies installed
-
-- [ ] **Step 3: Install dev dependencies**
-
-```bash
-npm install -D typescript@^5.3.0 @types/react@^18.2.0 @types/react-dom@^18.2.0 prettier@^3.1.0 prettier-plugin-astro@^0.12.0 prettier-plugin-tailwindcss@^0.5.0
-```
-
-Expected: Dev dependencies installed
-
-- [ ] **Step 4: Create Astro config**
-
-Create `astro.config.mjs`:
-```javascript
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
-
-export default defineConfig({
-  output: 'static',
-  integrations: [
-    react(),
-    tailwind()
-  ]
-});
-```
-
-- [ ] **Step 5: Create TypeScript config**
-
-Create `tsconfig.json`:
-```json
-{
-  "extends": "astro/tsconfigs/strict",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "noEmit": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}
-```
-
-- [ ] **Step 6: Create global styles**
-
-Create `src/styles/global.css` (**Neo-Brutalism** palette + brutalist utilities; Space Grotesk self-hosted same-origin to preserve zero external requests):
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: 'Space Grotesk';
-  font-style: normal;
-  font-weight: 400 700;
-  font-display: swap;
-  src: url('/fonts/space-grotesk.woff2') format('woff2');
-}
-
-:root {
-  --background: 255 253 245;      /* Cream */
-  --foreground: 10 10 10;
-  --border: 10 10 10;            /* Solid black outlines */
-  --muted: 255 255 255;
-  --muted-foreground: 82 82 82;
-  --accent: 124 58 237;         /* Violet */
-  --accent-foreground: 255 255 255;
-  --shadow: 10 10 10;
-}
-
-.dark {
-  --background: 10 10 10;
-  --foreground: 250 250 250;
-  --border: 250 250 250;        /* Light outlines pop on dark */
-  --muted: 26 26 26;
-  --muted-foreground: 163 163 163;
-  --accent: 167 139 250;
-  --accent-foreground: 10 10 10;
-  --shadow: 250 250 250;
-}
-
-body { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
-
-/* Hard offset shadows (no blur) + mechanical press */
-.shadow-brutal    { box-shadow: 4px 4px 0 0 rgb(var(--shadow)); }
-.shadow-brutal-sm { box-shadow: 2px 2px 0 0 rgb(var(--shadow)); }
-.press-brutal        { transition: transform 100ms ease, box-shadow 100ms ease; }
-.press-brutal:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 rgb(var(--shadow)); }
-.press-brutal:active { transform: translate(2px,2px);  box-shadow: 0 0 0 0 rgb(var(--shadow)); }
-@media (prefers-reduced-motion: reduce) {
-  .press-brutal, .press-brutal:hover, .press-brutal:active { transition: none; transform: none; }
-}
-```
-
-> **[DESIGN] Neo-Brutalism:** thick outlines, hard offset shadows, sharp corners
-> (global `border-radius: 0`), bold uppercase Space Grotesk. All controls use
-> `border-2 border-border` + `shadow-brutal` + `press-brutal`. Font is
-> **self-hosted** (`public/fonts/space-grotesk.woff2`, preloaded) — never the
-> Google Fonts CDN, which would violate the no-egress privacy guarantee.
-
-- [ ] **Step 7: Create minimal homepage**
-
-Create `src/pages/index.astro`:
-```astro
----
-import '../styles/global.css';
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GoodWebTools</title>
-  </head>
-  <body>
-    <h1>GoodWebTools</h1>
-    <p>Privacy-first client-side utilities</p>
-  </body>
-</html>
-```
-
-- [ ] **Step 8: Create .gitignore**
-
-Create `.gitignore`:
-```
-node_modules/
-dist/
-.astro/
-.env
-.DS_Store
-```
-
-- [ ] **Step 9: Add dev script to package.json**
-
-Edit `package.json`, add scripts:
-```json
-{
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  }
-}
-```
-
-- [ ] **Step 10: Test dev server**
-
-Run: `npm run dev`
-Expected: Dev server starts at http://localhost:4321, homepage displays
-
-- [ ] **Step 11: Test build**
-
-Run: `npm run build`
-Expected: Build succeeds, `dist/` directory created
-
-- [ ] **Step 12: Commit**
-
-```bash
-git add .
-git commit -m "feat: initialize Astro project with React and Tailwind"
-```
-
----
-
-### Task 2: TypeScript Interfaces & Tool Registry Foundation
-
-**Files:**
-- Create: `src/types/tool.ts`
-- Create: `src/types/service.ts`
-- Create: `src/registry/categories.ts`
-- Create: `src/registry/tools.ts`
-- Test: `src/registry/tools.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `ToolDef`, `AssetRef`, `Category` types; empty `tools` array export
-
-- [ ] **Step 1: Write test for ToolDef interface**
-
-Create `src/registry/tools.test.ts`:
-```typescript
-import { describe, it, expect } from 'vitest';
-import { tools } from './tools';
-import type { ToolDef } from '@/types/tool';
-
-describe('Tool Registry', () => {
-  it('should export empty tools array initially', () => {
-    expect(tools).toBeDefined();
-    expect(Array.isArray(tools)).toBe(true);
-    expect(tools.length).toBe(0);
-  });
-
-  it('should have valid ToolDef structure when tools are added', () => {
-    const mockTool: ToolDef = {
-      id: 'test-tool',
-      name: 'Test Tool',
-      category: 'Dev',
-      route: '/tools/test-tool',
-      keywords: ['test'],
-      icon: {} as any,
-      summary: 'Test tool',
-      load: () => Promise.resolve({ default: () => null }),
-      status: 'experimental'
-    };
-    
-    expect(mockTool.id).toBe('test-tool');
-    expect(mockTool.route).toBe('/tools/test-tool');
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `npm run test`
-Expected: FAIL - modules don't exist
-
-- [ ] **Step 3: Install Vitest**
-
-```bash
-npm install -D vitest@^1.0.0 @testing-library/react@^14.1.0 @testing-library/jest-dom@^6.1.5 jsdom@^23.0.0
-```
-
-- [ ] **Step 4: Create Vitest config**
-
-Create `vitest.config.ts`:
-```typescript
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    globals: true,
-    environment: 'jsdom',
-  },
-  resolve: {
-    alias: {
-      '@': '/src'
-    }
-  }
-});
-```
-
-- [ ] **Step 5: Add test script**
-
-Edit `package.json`:
-```json
-{
-  "scripts": {
-    "test": "vitest"
-  }
-}
-```
-
-- [ ] **Step 6: Create tool types**
-
-Create `src/types/tool.ts`:
-```typescript
-import type { LucideIcon } from 'lucide-react';
-
-export type Category = 'Dev' | 'PDF' | 'Image' | 'Files' | 'Draw' | 'Media';
-
-export interface AssetRef {
-  url: string;
-  byteSize: number;
-  type: 'wasm' | 'model' | 'font' | 'image' | 'other';
-  description: string;
-}
-
-export interface ToolDef {
-  id: string;
-  name: string;
-  category: Category;
-  route: string;
-  keywords: string[];
-  icon: LucideIcon;
-  summary: string;
-  load: () => Promise<{ default: React.ComponentType }>;
-  needsIsolation?: boolean;
-  assets?: AssetRef[];
-  status: 'stable' | 'beta' | 'experimental';
-}
-```
-
-- [ ] **Step 7: Create categories**
-
-Create `src/registry/categories.ts`:
-```typescript
-import type { Category } from '@/types/tool';
-
-export const categories: Category[] = [
-  'Dev',
-  'PDF',
-  'Image',
-  'Files',
-  'Draw',
-  'Media'
-];
-
-export const categoryColors: Record<Category, string> = {
-  Dev: 'bg-blue-500',
-  PDF: 'bg-red-500',
-  Image: 'bg-green-500',
-  Files: 'bg-yellow-500',
-  Draw: 'bg-purple-500',
-  Media: 'bg-pink-500'
-};
-```
-
-- [ ] **Step 8: Create tools registry**
-
-Create `src/registry/tools.ts`:
-```typescript
-import type { ToolDef } from '@/types/tool';
-
-export const tools: ToolDef[] = [];
-
-export function getToolById(id: string): ToolDef | undefined {
-  return tools.find(tool => tool.id === id);
-}
-
-export function getToolByRoute(route: string): ToolDef | undefined {
-  return tools.find(tool => tool.route === route);
-}
-
-export function searchTools(query: string): ToolDef[] {
-  const lowerQuery = query.toLowerCase();
-  
-  return tools
-    .map(tool => ({
-      tool,
-      score: calculateScore(tool, lowerQuery)
-    }))
-    .filter(({ score }) => score > 0)
-    .sort((a, b) => b.score - a.score)
-    .map(({ tool }) => tool);
-}
-
-function calculateScore(tool: ToolDef, query: string): number {
-  let score = 0;
-  
-  if (tool.name.toLowerCase().includes(query)) score += 100;
-  if (tool.keywords.some(k => k.toLowerCase().includes(query))) score += 50;
-  if (tool.summary.toLowerCase().includes(query)) score += 30;
-  if (tool.category.toLowerCase().includes(query)) score += 20;
-  
-  return score;
-}
-```
-
-- [ ] **Step 9: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 10: Commit**
-
-```bash
-git add .
-git commit -m "feat: add tool registry with TypeScript interfaces and search"
-```
-
----
-
-### Task 3: Tailwind Configuration & Theme System
-
-**Files:**
-- Create: `tailwind.config.mjs`
-- Create: `src/stores/theme.store.ts`
-- Test: `src/stores/theme.store.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `themeStore` with `theme` atom, `toggleTheme()`, `initTheme()` functions
-
-- [ ] **Step 1: Write theme store test**
-
-Create `src/stores/theme.store.test.ts`:
-```typescript
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { get } from 'nanostores';
-import { themeAtom, toggleTheme, initTheme } from './theme.store';
-
-describe('Theme Store', () => {
-  beforeEach(() => {
-    localStorage.clear();
-    document.documentElement.classList.remove('dark');
-  });
-
-  it('should initialize with light theme by default', () => {
-    initTheme();
-    expect(get(themeAtom)).toBe('light');
-  });
-
-  it('should toggle between light and dark', () => {
-    initTheme();
-    toggleTheme();
-    expect(get(themeAtom)).toBe('dark');
-    expect(document.documentElement.classList.contains('dark')).toBe(true);
-    
-    toggleTheme();
-    expect(get(themeAtom)).toBe('light');
-    expect(document.documentElement.classList.contains('dark')).toBe(false);
-  });
-
-  it('should persist theme to localStorage', () => {
-    initTheme();
-    toggleTheme();
-    expect(localStorage.getItem('theme')).toBe('dark');
-  });
-
-  it('should load theme from localStorage', () => {
-    localStorage.setItem('theme', 'dark');
-    initTheme();
-    expect(get(themeAtom)).toBe('dark');
-  });
-});
-```
-
-- [ ] **Step 2: Install Nanostores**
-
-```bash
-npm install nanostores@^0.9.5 @nanostores/react@^0.7.1
-```
-
-- [ ] **Step 3: Create theme store**
-
-Create `src/stores/theme.store.ts`:
-```typescript
-import { atom } from 'nanostores';
-
-export type Theme = 'light' | 'dark';
-
-export const themeAtom = atom<Theme>('light');
-
-export function initTheme(): void {
-  const stored = localStorage.getItem('theme') as Theme | null;
-  const theme = stored || 'light';
-  themeAtom.set(theme);
-  applyTheme(theme);
-}
-
-export function toggleTheme(): void {
-  const current = themeAtom.get();
-  const next: Theme = current === 'light' ? 'dark' : 'light';
-  themeAtom.set(next);
-  applyTheme(next);
-  localStorage.setItem('theme', next);
-}
-
-function applyTheme(theme: Theme): void {
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-}
-```
-
-- [ ] **Step 4: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 5: Create Tailwind config**
-
-Create `tailwind.config.mjs`:
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        background: 'rgb(var(--background) / <alpha-value>)',
-        foreground: 'rgb(var(--foreground) / <alpha-value>)',
-        border: 'rgb(var(--border) / <alpha-value>)',
-        muted: 'rgb(var(--muted) / <alpha-value>)',
-        'muted-foreground': 'rgb(var(--muted-foreground) / <alpha-value>)',
-        accent: 'rgb(var(--accent) / <alpha-value>)',
-        'accent-foreground': 'rgb(var(--accent-foreground) / <alpha-value>)',
-      },
-      fontFamily: { sans: ['Space Grotesk', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
-      // Neo-Brutalism: sharp corners everywhere (pills only for dots/badges)
-      borderRadius: { DEFAULT: '0px', sm: '0px', md: '0px', lg: '0px', xl: '0px', '2xl': '0px', full: '9999px' },
-      boxShadow: {
-        brutal: '4px 4px 0 0 rgb(var(--shadow))',
-        'brutal-sm': '2px 2px 0 0 rgb(var(--shadow))',
-        'brutal-lg': '6px 6px 0 0 rgb(var(--shadow))',
-      },
-    },
-  },
-  plugins: [],
-};
-```
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add theme system with Nanostores and Tailwind dark mode"
-```
-
----
-
-### Task 4: Base Layout with View Transitions
-
-**Files:**
-- Create: `src/layouts/Base.astro`
-- Modify: `src/pages/index.astro`
-- Create: `src/pages/privacy.astro`
-
-**Interfaces:**
-- Consumes: `global.css`, `themeStore.initTheme()`
-- Produces: `Base.astro` layout with ViewTransitions, theme init script
-
-- [ ] **Step 1: Create Base layout**
-
-Create `src/layouts/Base.astro`:
-```astro
----
-import { ViewTransitions } from 'astro:transitions';
-import '../styles/global.css';
-
-export interface Props {
-  title: string;
-  description?: string;
-}
-
-const { title, description = 'Privacy-first client-side utilities' } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content={description} />
-    <title>{title} | GoodWebTools</title>
-    <ViewTransitions />
-    <script is:inline>
-      // Init theme before first paint to prevent flash
-      const stored = localStorage.getItem('theme');
-      if (stored === 'dark') {
-        document.documentElement.classList.add('dark');
-      }
-    </script>
-  </head>
-  <body class="bg-background text-foreground min-h-screen">
-    <slot />
-  </body>
-</html>
-```
-
-- [ ] **Step 2: Update homepage to use layout**
-
-Modify `src/pages/index.astro`:
-```astro
----
-import Base from '@/layouts/Base.astro';
----
-
-<Base title="Home">
-  <main class="container mx-auto px-4 py-8">
-    <h1 class="text-4xl font-bold mb-4">GoodWebTools</h1>
-    <p class="text-muted text-lg">Privacy-first client-side utilities</p>
-  </main>
-</Base>
-```
-
-- [ ] **Step 3: Create privacy page**
-
-Create `src/pages/privacy.astro`:
-```astro
----
-import Base from '@/layouts/Base.astro';
----
-
-<Base title="Privacy" description="How we protect your privacy">
-  <main class="container mx-auto px-4 py-8 max-w-4xl">
-    <h1 class="text-4xl font-bold mb-6">Privacy & Verifiability</h1>
-    
-    <section class="mb-8">
-      <h2 class="text-2xl font-semibold mb-4">No Data Leaves Your Device</h2>
-      <p class="text-muted-foreground mb-4">
-        All processing happens in your browser. No files, images, or documents are ever uploaded to a server.
-      </p>
-    </section>
-
-    <section class="mb-8">
-      <h2 class="text-2xl font-semibold mb-4">Verify It Yourself</h2>
-      <ol class="list-decimal list-inside space-y-2 text-muted-foreground">
-        <li>Open Developer Tools (F12)</li>
-        <li>Go to the Network tab</li>
-        <li>Use any tool and process a file</li>
-        <li>Watch: zero network requests to external servers</li>
-      </ol>
-    </section>
-
-    <section class="mb-8">
-      <h2 class="text-2xl font-semibold mb-4">Works Offline</h2>
-      <p class="text-muted-foreground mb-4">
-        After first use, tools work with your network completely off. This is the strongest proof that nothing leaves your device.
-      </p>
-    </section>
-
-    <section>
-      <h2 class="text-2xl font-semibold mb-4">Open Source</h2>
-      <p class="text-muted-foreground">
-        The code is open source and will be available on GitHub at launch. You can audit it yourself or run it locally.
-      </p>
-    </section>
-  </main>
-</Base>
-```
-
-- [ ] **Step 4: Test navigation**
-
-Run: `npm run dev`
-1. Navigate to http://localhost:4321
-2. Click around (add temporary nav links if needed)
-3. Check View Transitions animation
-Expected: Smooth transitions, theme persists
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add .
-git commit -m "feat: add Base layout with View Transitions and privacy page"
-```
-
----
-
-### Task 5: FileService Implementation
-
-**Files:**
-- Create: `src/types/service.ts`
-- Create: `src/services/file.service.ts`
-- Test: `src/services/file.service.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `FileService` class with `getFiles()`, `getFileHandle()`, `createTempFile()`, `cleanupTempFiles()`
-
-- [ ] **Step 1: Write FileService test**
-
-Create `src/services/file.service.test.ts`:
-```typescript
-import { describe, it, expect, beforeEach } from 'vitest';
-import { FileService } from './file.service';
-
-describe('FileService', () => {
-  let fileService: FileService;
-
-  beforeEach(() => {
-    fileService = new FileService();
-  });
-
-  it('should accept File objects', async () => {
-    const file = new File(['test'], 'test.txt', { type: 'text/plain' });
-    const files = await fileService.getFiles(file);
-    expect(files).toHaveLength(1);
-    expect(files[0].name).toBe('test.txt');
-  });
-
-  it('should accept File array', async () => {
-    const files = [
-      new File(['test1'], 'test1.txt'),
-      new File(['test2'], 'test2.txt')
-    ];
-    const result = await fileService.getFiles(files);
-    expect(result).toHaveLength(2);
-  });
-
-  it('should accept FileList', async () => {
-    const dt = new DataTransfer();
-    dt.items.add(new File(['test'], 'test.txt'));
-    const fileList = dt.files;
-    
-    const result = await fileService.getFiles(fileList);
-    expect(result).toHaveLength(1);
-  });
-});
-```
-
-- [ ] **Step 2: Create service types**
-
-Create `src/types/service.ts`:
-```typescript
-export type FileSource = File | File[] | FileList;
-```
-
-- [ ] **Step 3: Create FileService**
-
-Create `src/services/file.service.ts`:
-```typescript
-import type { FileSource } from '@/types/service';
-
-export class FileService {
-  async getFiles(source: FileSource): Promise<File[]> {
-    if (source instanceof File) {
-      return [source];
-    }
-    
-    if (Array.isArray(source)) {
-      return source;
-    }
-    
-    // FileList
-    return Array.from(source);
-  }
-
-  async getFileHandle(file: File): Promise<FileSystemFileHandle | null> {
-    // File System Access API - may not be available
-    if (!('showOpenFilePicker' in window)) {
-      return null;
-    }
-
-    // If file already has a handle (from showOpenFilePicker), return it
-    // For now, return null - will be enhanced when needed
-    return null;
-  }
-
-  async createTempFile(name: string): Promise<FileSystemFileHandle | null> {
-    // OPFS (Origin Private File System)
-    if (!('storage' in navigator) || !navigator.storage.getDirectory) {
-      return null;
-    }
-
-    try {
-      const root = await navigator.storage.getDirectory();
-      const fileHandle = await root.getFileHandle(name, { create: true });
-      return fileHandle;
-    } catch (error) {
-      console.error('Failed to create temp file:', error);
-      return null;
-    }
-  }
-
-  async cleanupTempFiles(): Promise<void> {
-    if (!('storage' in navigator) || !navigator.storage.getDirectory) {
-      return;
-    }
-
-    try {
-      const root = await navigator.storage.getDirectory();
-      // @ts-expect-error - entries() may not be in types yet
-      for await (const [name, handle] of root.entries()) {
-        if (handle.kind === 'file') {
-          await root.removeEntry(name);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to cleanup temp files:', error);
-    }
-  }
-}
-
-// Singleton instance
-export const fileService = new FileService();
-```
-
-- [ ] **Step 4: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add .
-git commit -m "feat: add FileService for unified file input handling"
-```
-
----
-
-### Task 6: DownloadService Implementation
-
-**Files:**
-- Create: `src/services/download.service.ts`
-- Test: `src/services/download.service.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `DownloadService` class with `download(blob, filename)`, `downloadZip(files, zipName)`
-
-- [ ] **Step 1: Write DownloadService test**
-
-Create `src/services/download.service.test.ts`:
-```typescript
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { DownloadService } from './download.service';
-
-describe('DownloadService', () => {
-  let downloadService: DownloadService;
-  let mockLink: HTMLAnchorElement;
-
-  beforeEach(() => {
-    downloadService = new DownloadService();
-    mockLink = document.createElement('a');
-    vi.spyOn(document, 'createElement').mockReturnValue(mockLink);
-    vi.spyOn(mockLink, 'click').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should trigger download with blob URL', async () => {
-    const blob = new Blob(['test content'], { type: 'text/plain' });
-    await downloadService.download(blob, 'test.txt');
-
-    expect(mockLink.download).toBe('test.txt');
-    expect(mockLink.click).toHaveBeenCalled();
-  });
-
-  it('should clean up blob URL after download', async () => {
-    const revokeSpy = vi.spyOn(URL, 'revokeObjectURL');
-    const blob = new Blob(['test'], { type: 'text/plain' });
-    await downloadService.download(blob, 'test.txt');
-
-    expect(revokeSpy).toHaveBeenCalled();
-  });
-});
-```
-
-- [ ] **Step 2: Create DownloadService**
-
-Create `src/services/download.service.ts`:
-```typescript
-export interface BlobFile {
-  blob: Blob;
-  filename: string;
-}
-
-export class DownloadService {
-  async download(blob: Blob, filename: string): Promise<void> {
-    // Try File System Access API first
-    if ('showSaveFilePicker' in window) {
-      try {
-        const handle = await (window as any).showSaveFilePicker({
-          suggestedName: filename,
-        });
-        const writable = await handle.createWritable();
-        await writable.write(blob);
-        await writable.close();
-        return;
-      } catch (error) {
-        // User cancelled or API not available, fall through to blob URL
-        if ((error as Error).name === 'AbortError') {
-          return; // User cancelled
-        }
-      }
-    }
-
-    // Fallback to blob URL download
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    link.click();
-    
-    // Clean up
-    setTimeout(() => URL.revokeObjectURL(url), 100);
-  }
-
-  async downloadZip(files: BlobFile[], zipName: string): Promise<void> {
-    // For Phase 0, not implemented yet
-    // Will be added when zip functionality is needed
-    throw new Error('Zip download not yet implemented');
-  }
-}
-
-// Singleton instance
-export const downloadService = new DownloadService();
-```
-
-- [ ] **Step 3: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add .
-git commit -m "feat: add DownloadService with File System Access API support"
-```
-
----
-
-### Task 7: WorkerPool & AssetCache Services
-
-**Files:**
-- Create: `src/services/worker.service.ts`
-- Create: `src/services/asset.service.ts`
-- Test: `src/services/worker.service.test.ts`
-- Test: `src/services/asset.service.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `WorkerPool.getWorker()`, `AssetCache.fetch()` with progress callbacks
-
-- [ ] **Step 1: Install Comlink**
-
-```bash
-npm install comlink@^4.4.1
-```
-
-- [ ] **Step 2: Write WorkerPool test**
-
-Create `src/services/worker.service.test.ts`:
-```typescript
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { WorkerPool } from './worker.service';
-
-describe('WorkerPool', () => {
-  let workerPool: WorkerPool;
-
-  beforeEach(() => {
-    workerPool = new WorkerPool();
-  });
-
-  afterEach(() => {
-    workerPool.terminateAll();
-  });
-
-  it('should create and cache worker', async () => {
-    const worker1 = await workerPool.getWorker('test-tool', '/worker.js');
-    const worker2 = await workerPool.getWorker('test-tool', '/worker.js');
-    
-    expect(worker1).toBeDefined();
-    expect(worker2).toBeDefined();
-  });
-
-  it('should terminate worker by toolId', async () => {
-    await workerPool.getWorker('test-tool', '/worker.js');
-    workerPool.terminateWorker('test-tool');
-    
-    // After termination, getting the worker should create a new one
-    const newWorker = await workerPool.getWorker('test-tool', '/worker.js');
-    expect(newWorker).toBeDefined();
-  });
-});
-```
-
-- [ ] **Step 3: Create WorkerPool**
-
-Create `src/services/worker.service.ts`:
-```typescript
-import { wrap, type Remote } from 'comlink';
-
-export class WorkerPool {
-  private workers = new Map<string, Worker>();
-  private proxies = new Map<string, Remote<any>>();
-
-  async getWorker<T>(toolId: string, workerUrl: string): Promise<Remote<T>> {
-    // Return cached proxy if exists
-    if (this.proxies.has(toolId)) {
-      return this.proxies.get(toolId)!;
-    }
-
-    // Create new worker
-    const worker = new Worker(workerUrl, { type: 'module' });
-    const proxy = wrap<T>(worker);
-
-    this.workers.set(toolId, worker);
-    this.proxies.set(toolId, proxy);
-
-    return proxy;
-  }
-
-  terminateWorker(toolId: string): void {
-    const worker = this.workers.get(toolId);
-    if (worker) {
-      worker.terminate();
-      this.workers.delete(toolId);
-      this.proxies.delete(toolId);
-    }
-  }
-
-  terminateAll(): void {
-    for (const worker of this.workers.values()) {
-      worker.terminate();
-    }
-    this.workers.clear();
-    this.proxies.clear();
-  }
-}
-
-// Singleton instance
-export const workerPool = new WorkerPool();
-```
-
-- [ ] **Step 4: Write AssetCache test**
-
-Create `src/services/asset.service.test.ts`:
-```typescript
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { AssetCache } from './asset.service';
-
-describe('AssetCache', () => {
-  let assetCache: AssetCache;
-
-  beforeEach(() => {
-    assetCache = new AssetCache();
-  });
-
-  it('should fetch asset and track progress', async () => {
-    const mockResponse = {
-      ok: true,
-      headers: new Headers({ 'content-length': '1000' }),
-      body: null,
-      arrayBuffer: () => Promise.resolve(new ArrayBuffer(1000))
-    };
-    
-    global.fetch = vi.fn().mockResolvedValue(mockResponse);
-    
-    const onProgress = vi.fn();
-    await assetCache.fetch('http://example.com/asset.wasm', { onProgress });
-    
-    expect(fetch).toHaveBeenCalled();
-  });
-
-  it('should use cache on second fetch', async () => {
-    const mockResponse = {
-      ok: true,
-      headers: new Headers({ 'content-length': '1000' }),
-      body: null,
-      arrayBuffer: () => Promise.resolve(new ArrayBuffer(1000))
-    };
-    
-    global.fetch = vi.fn().mockResolvedValue(mockResponse);
-    
-    await assetCache.fetch('http://example.com/asset.wasm');
-    await assetCache.fetch('http://example.com/asset.wasm');
-    
-    // Should only fetch once (second call uses cache)
-    // Note: In-memory cache for Phase 0, IndexedDB later
-  });
-});
-```
-
-- [ ] **Step 5: Create AssetCache**
-
-Create `src/services/asset.service.ts`:
-```typescript
-export class AssetCache {
-  private readonly DEFAULT_TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
-  private readonly PROGRESS_THRESHOLD_BYTES = 1_024_000; // 1 MB
-  private cache = new Map<string, { data: ArrayBuffer; timestamp: number }>();
-
-  async fetch(url: string, options?: {
-    integrity?: string;
-    maxAgeMs?: number;
-    onProgress?: (loadedBytes: number, totalBytes: number) => void;
-    showProgress?: boolean;
-  }): Promise<ArrayBuffer> {
-    const maxAgeMs = options?.maxAgeMs || this.DEFAULT_TTL_MS;
-    
-    // Check in-memory cache
-    const cached = this.cache.get(url);
-    if (cached) {
-      const ageMs = Date.now() - cached.timestamp;
-      if (ageMs < maxAgeMs) {
-        return cached.data;
-      }
-      // Expired - remove from cache
-      this.cache.delete(url);
-    }
-
-    // Fetch fresh
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch ${url}: ${response.status}`);
-    }
-
-    const totalBytes = parseInt(response.headers.get('content-length') || '0');
-    const shouldShowProgress = options?.showProgress ?? (totalBytes > this.PROGRESS_THRESHOLD_BYTES);
-
-    let data: ArrayBuffer;
-
-    if (!shouldShowProgress || !response.body) {
-      data = await response.arrayBuffer();
-    } else {
-      // Stream with progress
-      const reader = response.body.getReader();
-      const chunks: Uint8Array[] = [];
-      let loadedBytes = 0;
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-
-        chunks.push(value);
-        loadedBytes += value.length;
-        options?.onProgress?.(loadedBytes, totalBytes);
-      }
-
-      // Concatenate chunks
-      const allData = new Uint8Array(loadedBytes);
-      let offsetBytes = 0;
-      for (const chunk of chunks) {
-        allData.set(chunk, offsetBytes);
-        offsetBytes += chunk.length;
-      }
-      data = allData.buffer;
-    }
-
-    // TODO: Verify integrity if provided
-
-    // Cache it
-    this.cache.set(url, { data, timestamp: Date.now() });
-    return data;
-  }
-
-  async isCached(url: string): Promise<boolean> {
-    return this.cache.has(url);
-  }
-}
-
-// Singleton instance
-export const assetCache = new AssetCache();
-```
-
-- [ ] **Step 6: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 7: Commit**
-
-```bash
-git add .
-git commit -m "feat: add WorkerPool and AssetCache services with progress tracking"
-```
-
----
-
-### Task 8: ProgressService & PersistenceService
-
-**Files:**
-- Create: `src/services/progress.service.ts`
-- Create: `src/services/persistence.service.ts`
-- Create: `src/stores/worker.store.ts`
-- Test: `src/services/progress.service.test.ts`
-- Test: `src/services/persistence.service.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `ProgressService` with toast/progress methods, `PersistenceService` with auto-save and navigation guards
-
-- [ ] **Step 1: Create worker status store**
-
-Create `src/stores/worker.store.ts`:
-```typescript
-import { atom, map } from 'nanostores';
-
-export interface ProgressState {
-  id: string;
-  label: string;
-  percent: number;
-}
-
-export const progressMap = map<Record<string, ProgressState>>({});
-
-export function setProgress(id: string, label: string, percent: number): void {
-  progressMap.setKey(id, { id, label, percent });
-}
-
-export function removeProgress(id: string): void {
-  const current = progressMap.get();
-  const { [id]: removed, ...rest } = current;
-  progressMap.set(rest);
-}
-```
-
-- [ ] **Step 2: Write ProgressService test**
-
-Create `src/services/progress.service.test.ts`:
-```typescript
-import { describe, it, expect, vi } from 'vitest';
-import { ProgressService } from './progress.service';
-import { get } from 'nanostores';
-import { progressMap } from '@/stores/worker.store';
-
-describe('ProgressService', () => {
-  let progressService: ProgressService;
-
-  beforeEach(() => {
-    progressService = new ProgressService();
-    progressMap.set({});
-  });
-
-  it('should start progress', () => {
-    progressService.startProgress('test-id', 'Processing...');
-    const state = get(progressMap);
-    expect(state['test-id']).toBeDefined();
-    expect(state['test-id'].label).toBe('Processing...');
-    expect(state['test-id'].percent).toBe(0);
-  });
-
-  it('should update progress', () => {
-    progressService.startProgress('test-id', 'Processing...');
-    progressService.updateProgress('test-id', 50);
-    const state = get(progressMap);
-    expect(state['test-id'].percent).toBe(50);
-  });
-
-  it('should complete progress', () => {
-    progressService.startProgress('test-id', 'Processing...');
-    progressService.completeProgress('test-id');
-    const state = get(progressMap);
-    expect(state['test-id']).toBeUndefined();
-  });
-});
-```
-
-- [ ] **Step 3: Create ProgressService**
-
-Create `src/services/progress.service.ts`:
-```typescript
-import { setProgress, removeProgress } from '@/stores/worker.store';
-
-export class ProgressService {
-  startProgress(id: string, label: string): void {
-    setProgress(id, label, 0);
-  }
-
-  updateProgress(id: string, percent: number): void {
-    const current = progressMap.get()[id];
-    if (current) {
-      setProgress(id, current.label, percent);
-    }
-  }
-
-  completeProgress(id: string): void {
-    removeProgress(id);
-  }
-
-  toast(message: string, type: 'success' | 'error' | 'info' = 'info'): void {
-    // Simple console log for Phase 0, will add toast UI later
-    console.log(`[${type.toUpperCase()}]`, message);
-    
-    // TODO: Add visual toast component
-  }
-}
-
-// Singleton instance
-export const progressService = new ProgressService();
-
-// Re-export for convenience
-import { progressMap } from '@/stores/worker.store';
-export { progressMap };
-```
-
-- [ ] **Step 4: Write PersistenceService test**
-
-Create `src/services/persistence.service.test.ts`:
-```typescript
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { PersistenceService } from './persistence.service';
-
-describe('PersistenceService', () => {
-  let persistenceService: PersistenceService;
-
-  beforeEach(() => {
-    persistenceService = new PersistenceService();
-    localStorage.clear();
-  });
-
-  it('should mark and check dirty state', () => {
-    persistenceService.markDirty('test-tool');
-    expect(persistenceService.isDirty('test-tool')).toBe(true);
-  });
-
-  it('should clear dirty state', () => {
-    persistenceService.markDirty('test-tool');
-    persistenceService.markClean('test-tool');
-    expect(persistenceService.isDirty('test-tool')).toBe(false);
-  });
-
-  it('should auto-save to localStorage', async () => {
-    const data = { content: 'test data' };
-    await persistenceService.autoSave('test-tool', data);
-    
-    const stored = localStorage.getItem('gwt-autosave-test-tool');
-    expect(stored).toBeTruthy();
-    expect(JSON.parse(stored!)).toEqual(data);
-  });
-
-  it('should load auto-save data', async () => {
-    const data = { content: 'test data' };
-    localStorage.setItem('gwt-autosave-test-tool', JSON.stringify(data));
-    
-    const loaded = await persistenceService.loadAutoSave('test-tool');
-    expect(loaded).toEqual(data);
-  });
-});
-```
-
-- [ ] **Step 5: Create PersistenceService**
-
-Create `src/services/persistence.service.ts`:
-```typescript
-export class PersistenceService {
-  private dirtyTools = new Set<string>();
-  private navigationGuards = new Set<string>();
-
-  async autoSave(toolId: string, data: any): Promise<void> {
-    const key = `gwt-autosave-${toolId}`;
-    localStorage.setItem(key, JSON.stringify(data));
-  }
-
-  async loadAutoSave(toolId: string): Promise<any | null> {
-    const key = `gwt-autosave-${toolId}`;
-    const stored = localStorage.getItem(key);
-    return stored ? JSON.parse(stored) : null;
-  }
-
-  async clearAutoSave(toolId: string): Promise<void> {
-    const key = `gwt-autosave-${toolId}`;
-    localStorage.removeItem(key);
-  }
-
-  async saveToFile(
-    data: Blob,
-    suggestedName: string,
-    fileHandle?: FileSystemFileHandle
-  ): Promise<FileSystemFileHandle | null> {
-    if (!('showSaveFilePicker' in window)) {
-      return null;
-    }
-
-    try {
-      const handle = fileHandle || await (window as any).showSaveFilePicker({
-        suggestedName,
-      });
-      const writable = await handle.createWritable();
-      await writable.write(data);
-      await writable.close();
-      return handle;
-    } catch (error) {
-      if ((error as Error).name === 'AbortError') {
-        return null; // User cancelled
-      }
-      throw error;
-    }
-  }
-
-  async loadFromFile(accept?: string[]): Promise<{ data: ArrayBuffer; handle: FileSystemFileHandle } | null> {
-    if (!('showOpenFilePicker' in window)) {
-      return null;
-    }
-
-    try {
-      const [handle] = await (window as any).showOpenFilePicker({
-        types: accept ? [{
-          accept: { 'application/json': accept }
-        }] : undefined
-      });
-      const file = await handle.getFile();
-      const data = await file.arrayBuffer();
-      return { data, handle };
-    } catch (error) {
-      if ((error as Error).name === 'AbortError') {
-        return null; // User cancelled
-      }
-      throw error;
-    }
-  }
-
-  markDirty(toolId: string): void {
-    this.dirtyTools.add(toolId);
-  }
-
-  markClean(toolId: string): void {
-    this.dirtyTools.delete(toolId);
-  }
-
-  isDirty(toolId: string): boolean {
-    return this.dirtyTools.has(toolId);
-  }
-
-  enableNavigationGuard(toolId: string): void {
-    this.navigationGuards.add(toolId);
-    
-    // Add beforeunload listener
-    window.addEventListener('beforeunload', this.handleBeforeUnload);
-  }
-
-  disableNavigationGuard(toolId: string): void {
-    this.navigationGuards.delete(toolId);
-    
-    // Remove listener if no guards active
-    if (this.navigationGuards.size === 0) {
-      window.removeEventListener('beforeunload', this.handleBeforeUnload);
-    }
-  }
-
-  private handleBeforeUnload = (e: BeforeUnloadEvent): string | undefined => {
-    for (const toolId of this.navigationGuards) {
-      if (this.isDirty(toolId)) {
-        e.preventDefault();
-        return ''; // Modern browsers show generic message
-      }
-    }
-    return undefined;
-  };
-}
-
-// Singleton instance
-export const persistenceService = new PersistenceService();
-```
-
-- [ ] **Step 6: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 7: Commit**
-
-```bash
-git add .
-git commit -m "feat: add ProgressService and PersistenceService with auto-save"
-```
-
----
-
-### Task 9: React Hooks (useWorker & usePersistence)
-
-**Files:**
-- Create: `src/hooks/useWorker.ts`
-- Create: `src/hooks/usePersistence.ts`
-- Test: `src/hooks/useWorker.test.tsx`
-- Test: `src/hooks/usePersistence.test.tsx`
-
-**Interfaces:**
-- Consumes: `workerPool`, `persistenceService`
-- Produces: `useWorker(toolId, workerUrl)` hook, `usePersistence(toolId)` hook
-
-- [ ] **Step 1: Write useWorker test**
-
-Create `src/hooks/useWorker.test.tsx`:
-```typescript
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useWorker } from './useWorker';
-
-describe('useWorker', () => {
-  it('should return worker proxy', () => {
-    const workerUrl = new URL('./test.worker.ts', import.meta.url);
-    const { result } = renderHook(() => useWorker('test-tool', workerUrl));
-    
-    expect(result.current).toBeDefined();
-  });
-
-  it('should cleanup on unmount', () => {
-    const workerUrl = new URL('./test.worker.ts', import.meta.url);
-    const { unmount } = renderHook(() => useWorker('test-tool', workerUrl));
-    
-    unmount();
-    // Worker should be terminated (tested via integration)
-  });
-});
-```
-
-- [ ] **Step 2: Create useWorker hook**
-
-Create `src/hooks/useWorker.ts`:
-```typescript
-import { useEffect, useRef } from 'react';
-import type { Remote } from 'comlink';
-import { workerPool } from '@/services/worker.service';
-
-export function useWorker<T>(toolId: string, workerUrl: URL): Remote<T> | null {
-  const workerRef = useRef<Remote<T> | null>(null);
-
-  useEffect(() => {
-    let mounted = true;
-
-    workerPool.getWorker<T>(toolId, workerUrl.href).then(proxy => {
-      if (mounted) {
-        workerRef.current = proxy;
-      }
-    });
-
-    return () => {
-      mounted = false;
-      workerPool.terminateWorker(toolId);
-    };
-  }, [toolId, workerUrl.href]);
-
-  return workerRef.current;
-}
-```
-
-- [ ] **Step 3: Write usePersistence test**
-
-Create `src/hooks/usePersistence.test.tsx`:
-```typescript
-import { describe, it, expect, beforeEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { usePersistence } from './usePersistence';
-
-describe('usePersistence', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-
-  it('should provide persistence methods', () => {
-    const { result } = renderHook(() => usePersistence('test-tool'));
-    
-    expect(result.current.autoSave).toBeDefined();
-    expect(result.current.loadAutoSave).toBeDefined();
-    expect(result.current.markDirty).toBeDefined();
-    expect(result.current.markClean).toBeDefined();
-    expect(result.current.isDirty).toBeDefined();
-  });
-
-  it('should track dirty state', () => {
-    const { result } = renderHook(() => usePersistence('test-tool'));
-    
-    act(() => {
-      result.current.markDirty();
-    });
-    
-    expect(result.current.isDirty()).toBe(true);
-  });
-
-  it('should enable navigation guard on mount', () => {
-    const { unmount } = renderHook(() => usePersistence('test-tool'));
-    
-    // Navigation guard should be enabled
-    unmount();
-    // Navigation guard should be disabled
-  });
-});
-```
-
-- [ ] **Step 4: Create usePersistence hook**
-
-Create `src/hooks/usePersistence.ts`:
-```typescript
-import { useEffect, useCallback } from 'react';
-import { persistenceService } from '@/services/persistence.service';
-
-export function usePersistence(toolId: string) {
-  useEffect(() => {
-    persistenceService.enableNavigationGuard(toolId);
-    
-    return () => {
-      persistenceService.disableNavigationGuard(toolId);
-    };
-  }, [toolId]);
-
-  const autoSave = useCallback(
-    (data: any) => persistenceService.autoSave(toolId, data),
-    [toolId]
-  );
-
-  const loadAutoSave = useCallback(
-    () => persistenceService.loadAutoSave(toolId),
-    [toolId]
-  );
-
-  const clearAutoSave = useCallback(
-    () => persistenceService.clearAutoSave(toolId),
-    [toolId]
-  );
-
-  const markDirty = useCallback(
-    () => persistenceService.markDirty(toolId),
-    [toolId]
-  );
-
-  const markClean = useCallback(
-    () => persistenceService.markClean(toolId),
-    [toolId]
-  );
-
-  const isDirty = useCallback(
-    () => persistenceService.isDirty(toolId),
-    [toolId]
-  );
-
-  const saveToFile = useCallback(
-    (data: Blob, suggestedName: string, fileHandle?: FileSystemFileHandle) =>
-      persistenceService.saveToFile(data, suggestedName, fileHandle),
-    []
-  );
-
-  const loadFromFile = useCallback(
-    (accept?: string[]) => persistenceService.loadFromFile(accept),
-    []
-  );
-
-  return {
-    autoSave,
-    loadAutoSave,
-    clearAutoSave,
-    markDirty,
-    markClean,
-    isDirty,
-    saveToFile,
-    loadFromFile,
-  };
-}
-```
-
-- [ ] **Step 5: Run tests**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add useWorker and usePersistence React hooks"
-```
-
----
-
----
-
-### Task 10: UI Components (Dropzone, ProgressBar, FileList, ResultActions)
-
-**Files:**
-- Create: `src/components/ui/Dropzone.tsx`
-- Create: `src/components/ui/ProgressBar.tsx`
-- Create: `src/components/ui/FileList.tsx`
-- Create: `src/components/ui/ResultActions.tsx`
-
-**Interfaces:**
-- Consumes: None
-- Produces: Reusable UI components for all tools
-
-- [ ] **Step 1: Create Dropzone component**
-
-Create `src/components/ui/Dropzone.tsx`:
-```typescript
-import { useCallback, useState } from 'react';
-
-export interface DropzoneProps {
-  onDrop: (files: File[]) => void | Promise<void>;
-  accept?: string;
-  multiple?: boolean;
-  children?: React.ReactNode;
-}
-
-export function Dropzone({ onDrop, accept, multiple = true, children }: DropzoneProps) {
-  const [isDragging, setIsDragging] = useState(false);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-
-  const handleDrop = useCallback(async (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    
-    const files = Array.from(e.dataTransfer.files);
-    await onDrop(files);
-  }, [onDrop]);
-
-  const handleFileInput = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files ? Array.from(e.target.files) : [];
-    await onDrop(files);
-  }, [onDrop]);
-
-  return (
-    <div
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      className={`
-        border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
-        transition-colors duration-200
-        ${isDragging ? 'border-accent bg-accent/10' : 'border-border hover:border-accent/50'}
-      `}
-    >
-      <input
-        type="file"
-        id="file-input"
-        accept={accept}
-        multiple={multiple}
-        onChange={handleFileInput}
-        className="hidden"
-      />
-      <label htmlFor="file-input" className="cursor-pointer">
-        {children || (
-          <div className="space-y-2">
-            <p className="text-lg">Drop files here or click to browse</p>
-            <p className="text-sm text-muted-foreground">
-              {multiple ? 'Multiple files supported' : 'Single file only'}
-            </p>
-          </div>
-        )}
-      </label>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Create ProgressBar component**
-
-Create `src/components/ui/ProgressBar.tsx`:
-```typescript
-export interface ProgressBarProps {
-  percent: number;
-  label?: string;
-}
-
-export function ProgressBar({ percent, label }: ProgressBarProps) {
-  const clampedPercent = Math.min(Math.max(percent, 0), 100);
-
-  return (
-    <div className="w-full">
-      {label && (
-        <div className="flex justify-between text-sm mb-2">
-          <span>{label}</span>
-          <span className="text-muted-foreground">{clampedPercent.toFixed(0)}%</span>
-        </div>
-      )}
-      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
-        <div
-          className="h-full bg-accent transition-all duration-300"
-          style={{ width: `${clampedPercent}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 3: Create FileList component**
-
-Create `src/components/ui/FileList.tsx`:
-```typescript
-export interface FileListProps {
-  files: File[];
-  onRemove?: (index: number) => void;
-}
-
-export function FileList({ files, onRemove }: FileListProps) {
-  const formatFileSize = (bytes: number): string => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
-  return (
-    <div className="space-y-2">
-      {files.map((file, index) => (
-        <div
-          key={`${file.name}-${index}`}
-          className="flex items-center justify-between p-3 bg-muted rounded-lg"
-        >
-          <div className="flex-1 min-w-0">
-            <p className="font-medium truncate">{file.name}</p>
-            <p className="text-sm text-muted-foreground">
-              {formatFileSize(file.size)}
-            </p>
-          </div>
-          {onRemove && (
-            <button
-              onClick={() => onRemove(index)}
-              className="ml-4 text-muted-foreground hover:text-foreground"
-              aria-label="Remove file"
-            >
-              ✕
-            </button>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 4: Create ResultActions component**
-
-Create `src/components/ui/ResultActions.tsx`:
-```typescript
-import { downloadService } from '@/services/download.service';
-
-export interface ResultActionsProps {
-  blob: Blob | null;
-  filename: string;
-  disabled?: boolean;
-}
-
-export function ResultActions({ blob, filename, disabled }: ResultActionsProps) {
-  const handleDownload = async () => {
-    if (!blob) return;
-    await downloadService.download(blob, filename);
-  };
-
-  const handleCopy = async () => {
-    if (!blob) return;
-    
-    try {
-      const text = await blob.text();
-      await navigator.clipboard.writeText(text);
-      // TODO: Show toast notification
-      console.log('Copied to clipboard');
-    } catch (error) {
-      console.error('Failed to copy:', error);
-    }
-  };
-
-  return (
-    <div className="flex gap-3">
-      <button
-        onClick={handleDownload}
-        disabled={disabled || !blob}
-        className="px-4 py-2 bg-accent text-white rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        Download
-      </button>
-      <button
-        onClick={handleCopy}
-        disabled={disabled || !blob}
-        className="px-4 py-2 border border-border rounded-lg hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        Copy
-      </button>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 5: Test components**
-
-Run: `npm run dev`
-1. Create a test page importing these components
-2. Verify drag-drop works
-3. Verify progress bar animates
-4. Verify file list displays
-5. Verify download works
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add reusable UI components (Dropzone, ProgressBar, FileList, ResultActions)"
-```
-
----
-
-### Task 11: Shell Components (ShellIsland, ThemeToggle)
-
-**Files:**
-- Create: `src/components/shell/ThemeToggle.tsx`
-- Create: `src/components/shell/ShellIsland.tsx`
-- Modify: `src/layouts/Base.astro`
-
-**Interfaces:**
-- Consumes: `themeStore`, `tools` registry
-- Produces: Persisted shell with theme toggle, placeholder for command palette
-
-- [ ] **Step 1: Install lucide-react**
-
-```bash
-npm install lucide-react@^0.294.0
-```
-
-- [ ] **Step 2: Create ThemeToggle component**
-
-Create `src/components/shell/ThemeToggle.tsx`:
-```typescript
-import { useStore } from '@nanostores/react';
-import { Moon, Sun } from 'lucide-react';
-import { themeAtom, toggleTheme } from '@/stores/theme.store';
-
-export function ThemeToggle() {
-  const theme = useStore(themeAtom);
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className="p-2 rounded-lg hover:bg-muted transition-colors"
-      aria-label="Toggle theme"
-    >
-      {theme === 'dark' ? (
-        <Sun className="w-5 h-5" />
-      ) : (
-        <Moon className="w-5 h-5" />
-      )}
-    </button>
-  );
-}
-```
-
-- [ ] **Step 3: Create ShellIsland component**
-
-Create `src/components/shell/ShellIsland.tsx`:
-```typescript
-import { useEffect } from 'react';
-import { ThemeToggle } from './ThemeToggle';
-import { initTheme } from '@/stores/theme.store';
-
-export function ShellIsland() {
-  useEffect(() => {
-    initTheme();
-  }, []);
-
-  return (
-    <header className="border-b border-border">
-      <div className="container mx-auto px-4">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo */}
-          <a href="/" className="text-xl font-bold hover:text-accent transition-colors">
-            GoodWebTools
-          </a>
-
-          {/* Actions */}
-          <div className="flex items-center gap-4">
-            <button className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Press <kbd className="px-2 py-1 bg-muted rounded text-xs">⌘K</kbd> to search
-            </button>
-            <ThemeToggle />
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
-```
-
-- [ ] **Step 4: Update Base layout to include ShellIsland**
-
-Modify `src/layouts/Base.astro`:
-```astro
----
-import { ViewTransitions } from 'astro:transitions';
-import { ShellIsland } from '@/components/shell/ShellIsland';
-import '../styles/global.css';
-
-export interface Props {
-  title: string;
-  description?: string;
-}
-
-const { title, description = 'Privacy-first client-side utilities' } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content={description} />
-    <title>{title} | GoodWebTools</title>
-    <ViewTransitions />
-    <script is:inline>
-      const stored = localStorage.getItem('theme');
-      if (stored === 'dark') {
-        document.documentElement.classList.add('dark');
-      }
-    </script>
-  </head>
-  <body class="bg-background text-foreground min-h-screen">
-    <ShellIsland client:load transition:persist />
-    <slot />
-  </body>
-</html>
-```
-
-- [ ] **Step 5: Test shell persistence**
-
-Run: `npm run dev`
-1. Navigate between pages
-2. Toggle theme
-3. Verify theme persists across navigation
-4. Verify shell doesn't re-mount (check console)
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add persisted shell with theme toggle and navigation"
-```
-
----
-
-### Task 12: Command Palette with Search
-
-**Files:**
-- Create: `src/components/shell/CommandPalette.tsx`
-- Modify: `src/components/shell/ShellIsland.tsx`
-- Modify: `src/registry/tools.ts` (add demo tool)
-
-**Interfaces:**
-- Consumes: `tools` registry, `searchTools()` function
-- Produces: Working cmdk command palette with fuzzy search
-
-- [ ] **Step 1: Install cmdk**
-
-```bash
-npm install cmdk@^0.2.0
-```
-
-- [ ] **Step 2: Add Hash demo tool to registry**
-
-Modify `src/registry/tools.ts`:
-```typescript
-import { Hash } from 'lucide-react';
-import type { ToolDef } from '@/types/tool';
-
-export const tools: ToolDef[] = [
-  {
-    id: 'hash-demo',
-    name: 'Hash File',
-    category: 'Dev',
-    route: '/tools/hash-demo',
-    keywords: ['hash', 'sha256', 'checksum', 'demo', 'validation'],
-    icon: Hash,
-    summary: 'Generate SHA-256 hash (validation demo)',
-    load: () => import('@/islands/demo/HashDemo'),
-    status: 'experimental'
-  }
-];
-
-// ... rest of existing functions
-```
-
-- [ ] **Step 3: Create CommandPalette component**
-
-Create `src/components/shell/CommandPalette.tsx`:
-```typescript
-import { useState, useEffect } from 'react';
-import { Command } from 'cmdk';
-import { useStore } from '@nanostores/react';
-import { searchTools } from '@/registry/tools';
-import { categories } from '@/registry/categories';
-
-export function CommandPalette() {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const results = searchTools(search);
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen(prev => !prev);
-      }
-    };
-
-    document.addEventListener('keydown', down);
-    return () => document.removeEventListener('keydown', down);
-  }, []);
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black/50 z-50" onClick={() => setOpen(false)}>
-      <div className="container mx-auto px-4 pt-[20vh]">
-        <Command
-          className="bg-background border border-border rounded-lg shadow-2xl max-w-2xl mx-auto"
-          onClick={e => e.stopPropagation()}
-        >
-          <Command.Input
-            value={search}
-            onValueChange={setSearch}
-            placeholder="Search tools..."
-            className="w-full px-4 py-3 bg-transparent border-b border-border outline-none"
-          />
-          <Command.List className="max-h-96 overflow-y-auto p-2">
-            <Command.Empty className="px-4 py-8 text-center text-muted-foreground">
-              No tools found.
-            </Command.Empty>
-
-            {categories.map(category => {
-              const categoryTools = results.filter(t => t.category === category);
-              if (categoryTools.length === 0) return null;
-
-              return (
-                <Command.Group key={category} heading={category} className="mb-4">
-                  {categoryTools.map(tool => (
-                    <Command.Item
-                      key={tool.id}
-                      value={tool.name}
-                      onSelect={() => {
-                        window.location.href = tool.route;
-                      }}
-                      className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-muted data-[selected]:bg-muted"
-                    >
-                      <tool.icon className="w-5 h-5" />
-                      <div className="flex-1">
-                        <p className="font-medium">{tool.name}</p>
-                        <p className="text-sm text-muted-foreground">{tool.summary}</p>
-                      </div>
-                      <span className="text-xs text-muted-foreground">
-                        {tool.status}
-                      </span>
-                    </Command.Item>
-                  ))}
-                </Command.Group>
-              );
-            })}
-          </Command.List>
-        </Command>
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 4: Add CommandPalette to ShellIsland**
-
-Modify `src/components/shell/ShellIsland.tsx`:
-```typescript
-import { useEffect } from 'react';
-import { ThemeToggle } from './ThemeToggle';
-import { CommandPalette } from './CommandPalette';
-import { initTheme } from '@/stores/theme.store';
-
-export function ShellIsland() {
-  useEffect(() => {
-    initTheme();
-  }, []);
-
-  return (
-    <>
-      <header className="border-b border-border">
-        <div className="container mx-auto px-4">
-          <div className="flex items-center justify-between h-16">
-            <a href="/" className="text-xl font-bold hover:text-accent transition-colors">
-              GoodWebTools
-            </a>
-
-            <div className="flex items-center gap-4">
-              <button className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                Press <kbd className="px-2 py-1 bg-muted rounded text-xs">⌘K</kbd> to search
-              </button>
-              <ThemeToggle />
-            </div>
-          </div>
-        </div>
-      </header>
-      
-      <CommandPalette />
-    </>
-  );
-}
-```
-
-- [ ] **Step 5: Test command palette**
-
-Run: `npm run dev`
-1. Press ⌘K (or Ctrl+K)
-2. Palette opens
-3. Type "hash"
-4. See Hash File tool
-5. Press Enter or click
-Expected: Navigate to /tools/hash-demo (404 for now - will be created next)
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add command palette with fuzzy search using cmdk"
-```
-
----
-
-### Task 13: Dynamic Tool Route
-
-**Files:**
-- Create: `src/pages/tools/[tool].astro`
-
-**Interfaces:**
-- Consumes: `tools` registry, `getToolByRoute()`
-- Produces: Dynamic route that loads tool islands
-
-- [ ] **Step 1: Create dynamic tool route**
-
-Create `src/pages/tools/[tool].astro`:
-```astro
----
-import Base from '@/layouts/Base.astro';
-import { getToolByRoute, tools } from '@/registry/tools';
-
-export async function getStaticPaths() {
-  return tools.map(tool => ({
-    params: { tool: tool.id },
-    props: { tool }
-  }));
-}
-
-const { tool } = Astro.props;
-const ToolComponent = (await tool.load()).default;
----
-
-<Base title={tool.name} description={tool.summary}>
-  <main class="container mx-auto px-4 py-8">
-    <div class="mb-6">
-      <h1 class="text-3xl font-bold mb-2">{tool.name}</h1>
-      <p class="text-muted-foreground">{tool.summary}</p>
-      {tool.status === 'experimental' && (
-        <span class="inline-block mt-2 px-3 py-1 bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 text-sm rounded-full">
-          Experimental
-        </span>
-      )}
-    </div>
-
-    <ToolComponent client:load />
-  </main>
-</Base>
-```
-
-- [ ] **Step 2: Test route**
-
-Run: `npm run build`
-Expected: Build succeeds (will fail to load HashDemo component - that's next)
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add .
-git commit -m "feat: add dynamic tool route with island loading"
-```
-
----
-
-### Task 14: Hash Demo Tool (Island + Worker)
-
-**Files:**
-- Create: `src/islands/demo/HashDemo.tsx`
-- Create: `src/tools/demo/hash.lib.ts`
-- Create: `src/tools/demo/hash.worker.ts`
-- Test: `src/tools/demo/hash.lib.test.ts`
-
-**Interfaces:**
-- Consumes: `useWorker` hook, `Dropzone`, `ProgressBar`, `ResultActions` components
-- Produces: Working hash demo tool validating full pipeline
-
-- [ ] **Step 1: Write hash lib test**
-
-Create `src/tools/demo/hash.lib.test.ts`:
-```typescript
-import { describe, it, expect } from 'vitest';
-import { hashToHex } from './hash.lib';
-
-describe('Hash Library', () => {
-  it('should convert hash buffer to hex string', () => {
-    const buffer = new Uint8Array([0, 15, 255, 128]);
-    const hex = hashToHex(buffer);
-    expect(hex).toBe('000fff80');
-  });
-
-  it('should handle empty buffer', () => {
-    const buffer = new Uint8Array([]);
-    const hex = hashToHex(buffer);
-    expect(hex).toBe('');
-  });
-});
-```
-
-- [ ] **Step 2: Create hash library**
-
-Create `src/tools/demo/hash.lib.ts`:
-```typescript
-export function hashToHex(buffer: Uint8Array): string {
-  return Array.from(buffer)
-    .map(b => b.toString(16).padStart(2, '0'))
-    .join('');
-}
-
-export async function hashFile(fileBuffer: ArrayBuffer): Promise<string> {
-  const hashBuffer = await crypto.subtle.digest('SHA-256', fileBuffer);
-  const hashArray = new Uint8Array(hashBuffer);
-  return hashToHex(hashArray);
-}
-```
-
-- [ ] **Step 3: Run hash lib test**
-
-Run: `npm run test`
-Expected: PASS
-
-- [ ] **Step 4: Create hash worker**
-
-Create `src/tools/demo/hash.worker.ts`:
-```typescript
-import { expose } from 'comlink';
-import { hashFile } from './hash.lib';
-
-const api = {
-  async hashFile(
-    fileBuffer: ArrayBuffer,
-    onProgress: (percent: number) => void
-  ): Promise<string> {
-    onProgress(50);
-    const hash = await hashFile(fileBuffer);
-    onProgress(100);
-    return hash;
-  }
-};
-
-export type HashWorkerAPI = typeof api;
-expose(api);
-```
-
-- [ ] **Step 5: Create HashDemo island**
-
-Create `src/islands/demo/HashDemo.tsx`:
-```typescript
-import { useState } from 'react';
-import { proxy } from 'comlink';
-import { useWorker } from '@/hooks/useWorker';
-import { Dropzone } from '@/components/ui/Dropzone';
-import { ProgressBar } from '@/components/ui/ProgressBar';
-import { ResultActions } from '@/components/ui/ResultActions';
-import type { HashWorkerAPI } from '@/tools/demo/hash.worker';
-
-export default function HashDemo() {
-  const [hash, setHash] = useState<string>('');
-  const [progress, setProgress] = useState(0);
-  const [fileName, setFileName] = useState('');
-  const [processing, setProcessing] = useState(false);
-
-  const worker = useWorker<HashWorkerAPI>(
-    'hash-demo',
-    new URL('@/tools/demo/hash.worker.ts', import.meta.url)
-  );
-
-  const handleFile = async (files: File[]) => {
-    if (files.length === 0 || !worker) return;
-
-    const file = files[0];
-    setFileName(file.name);
-    setProcessing(true);
-    setProgress(0);
-
-    try {
-      const buffer = await file.arrayBuffer();
-      const result = await worker.hashFile(
-        buffer,
-        proxy((pct) => setProgress(pct))
-      );
-      setHash(result);
-    } catch (error) {
-      console.error('Hash failed:', error);
-    } finally {
-      setProcessing(false);
-    }
-  };
-
-  const resultBlob = hash
-    ? new Blob([`${hash}  ${fileName}\n`], { type: 'text/plain' })
-    : null;
-
-  return (
-    <div className="max-w-4xl mx-auto space-y-6">
-      <Dropzone onDrop={handleFile} accept="*/*" multiple={false}>
-        <div className="space-y-2">
-          <p className="text-lg">Drop file here or click to browse</p>
-          <p className="text-sm text-muted-foreground">
-            Generate SHA-256 hash
-          </p>
-        </div>
-      </Dropzone>
-
-      {processing && <ProgressBar percent={progress} label="Hashing..." />}
-
-      {hash && (
-        <div className="space-y-4">
-          <div className="p-4 bg-muted rounded-lg">
-            <h3 className="font-medium mb-2">SHA-256 Hash</h3>
-            <code className="text-sm break-all">{hash}</code>
-          </div>
-
-          <ResultActions
-            blob={resultBlob}
-            filename={`${fileName}.sha256`}
-            disabled={processing}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 6: Test HashDemo tool**
-
-Run: `npm run dev`
-1. Navigate to http://localhost:4321
-2. Press ⌘K, search "hash", click Hash File
-3. Drop a file
-4. See progress bar
-5. See hash result
-6. Download .sha256 file
-Expected: All working, hash is correct
-
-- [ ] **Step 7: Verify worker terminates**
-
-1. Navigate away from hash tool
-2. Check DevTools console
-3. No worker errors
-Expected: Worker terminates cleanly
-
-- [ ] **Step 8: Commit**
-
-```bash
-git add .
-git commit -m "feat: add Hash File demo tool with worker pipeline"
-```
-
----
-
-### Task 15: PWA Configuration
-
-**Files:**
-- Install: `@vite-pwa/astro`
-- Modify: `astro.config.mjs`
-- Create: `public/manifest.json`
-- Create: `public/icon-192.png`, `public/icon-512.png`
-
-**Interfaces:**
-- Consumes: Astro config
-- Produces: Working PWA with service worker and offline capability
-
-- [ ] **Step 1: Install PWA plugin**
-
-```bash
-npm install @vite-pwa/astro@^0.2.0
-```
-
-- [ ] **Step 2: Create PWA manifest**
-
-Create `public/manifest.json`:
-```json
-{
-  "name": "GoodWebTools",
-  "short_name": "GWT",
-  "description": "Privacy-first client-side utilities",
-  "theme_color": "#2563eb",
-  "background_color": "#ffffff",
-  "display": "standalone",
-  "start_url": "/",
-  "scope": "/",
-  "icons": [
-    {
-      "src": "/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
-```
-
-- [ ] **Step 3: Create placeholder icons**
-
-For Phase 0, create simple colored squares as placeholders:
-1. Create 192x192px blue square, save as `public/icon-192.png`
-2. Create 512x512px blue square, save as `public/icon-512.png`
-
-(In production, replace with proper logo)
-
-- [ ] **Step 4: Update Astro config with PWA**
-
-Modify `astro.config.mjs`:
-```javascript
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
-import { VitePWA } from '@vite-pwa/astro';
-
-export default defineConfig({
-  output: 'static',
-  integrations: [
-    react(),
-    tailwind(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      manifest: {
-        name: 'GoodWebTools',
-        short_name: 'GWT',
-        description: 'Privacy-first client-side utilities',
-        theme_color: '#2563eb',
-        background_color: '#ffffff',
-        display: 'standalone',
-        icons: [
-          {
-            src: '/icon-192.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: '/icon-512.png',
-            sizes: '512x512',
-            type: 'image/png'
-          }
-        ]
-      },
-      workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
-        cleanupOutdatedCaches: true,
-        runtimeCaching: [
-          {
-            urlPattern: /\.wasm$/,
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'wasm-cache',
-              networkTimeoutSeconds: 5,
-              expiration: {
-                maxEntries: 20,
-                maxAgeSeconds: 30 * 24 * 60 * 60,
-                purgeOnQuotaError: true
-              }
-            }
-          },
-          {
-            urlPattern: /\/islands\/.+\.js$/,
-            handler: 'StaleWhileRevalidate',
-            options: {
-              cacheName: 'tool-chunks',
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 7 * 24 * 60 * 60,
-                purgeOnQuotaError: true
-              }
-            }
-          }
-        ]
-      }
-    })
-  ],
-  vite: {
-    build: {
-      rollupOptions: {
-        output: {
-          manualChunks: {
-            'react-vendor': ['react', 'react-dom'],
-            'worker-vendor': ['comlink'],
-            'ui-vendor': ['cmdk', 'lucide-react']
-          }
-        }
-      }
-    },
-    worker: {
-      format: 'es'
-    }
-  }
-});
-```
-
-- [ ] **Step 5: Test PWA**
-
-Run: `npm run build && npm run preview`
-1. Open in Chrome
-2. Check Application tab in DevTools
-3. Verify service worker registered
-4. Verify manifest loaded
-5. Try "Install app" prompt
-Expected: PWA installs, works offline after first visit
-
-- [ ] **Step 6: Test offline**
-
-1. With app installed and visited
-2. Disconnect network
-3. Reload app
-4. Try Hash tool
-Expected: Still works offline
-
-- [ ] **Step 7: Commit**
-
-```bash
-git add .
-git commit -m "feat: add PWA support with offline capability"
-```
-
----
-
-### Task 16: Cloudflare Pages Deployment
-
-**Files:**
-- Create: `_headers`
-- Create: `.github/workflows/deploy.yml`
-
-**Interfaces:**
-- Consumes: Build output
-- Produces: Deployed site on Cloudflare Pages
-
-- [ ] **Step 1: Create Cloudflare headers**
-
-Create `_headers`:
-```
-/*
-  X-Frame-Options: DENY
-  X-Content-Type-Options: nosniff
-  Referrer-Policy: strict-origin-when-cross-origin
-  Permissions-Policy: camera=(), microphone=(), geolocation=()
-  Cross-Origin-Embedder-Policy: require-corp
-  Cross-Origin-Opener-Policy: same-origin
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';
-
-/wasm/*
-  Cache-Control: public, max-age=31536000, immutable
-  Cross-Origin-Resource-Policy: same-origin
-
-/models/*
-  Cache-Control: public, max-age=2592000
-  Cross-Origin-Resource-Policy: same-origin
-```
-
-- [ ] **Step 2: Create GitHub Actions workflow**
-
-Create `.github/workflows/deploy.yml`:
-```yaml
-name: Deploy to Cloudflare Pages
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      deployments: write
-    steps:
-      - uses: actions/checkout@v4
-      
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Run tests
-        run: npm run test
-      
-      - name: Build
-        run: npm run build
-      
-      - name: Deploy to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: goodwebtools
-          directory: dist
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-```
-
-- [ ] **Step 3: Test build locally**
-
-Run: `npm run build`
-Expected: Build succeeds, `dist/` contains:
-- `_headers` file
-- HTML files
-- Assets with hashes
-- PWA manifest and service worker
-
-- [ ] **Step 4: Verify headers in build**
-
-Run: `ls -la dist/_headers`
-Expected: File exists
-
-- [ ] **Step 5: Document Cloudflare setup**
-
-Add to README.md (will create in next task):
-```markdown
-## Deployment
-
-### Cloudflare Pages
-
-1. Create Cloudflare Pages project
-2. Connect to GitHub repository
-3. Set build command: `npm run build`
-4. Set build output: `dist`
-5. Add secrets:
-   - `CLOUDFLARE_API_TOKEN`
-   - `CLOUDFLARE_ACCOUNT_ID`
-```
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add .
-git commit -m "feat: add Cloudflare Pages deployment with headers and CI/CD"
-```
-
----
-
-### Task 17: Development Environment (ESLint, Prettier, VS Code)
-
-**Files:**
-- Create: `.eslintrc.js`
-- Create: `.prettierrc`
-- Create: `.vscode/settings.json`
-- Create: `.vscode/extensions.json`
-
-**Interfaces:**
-- Consumes: TypeScript config
-- Produces: Configured dev environment with linting and formatting
-
-- [ ] **Step 1: Install ESLint dependencies**
-
-```bash
-npm install -D eslint@^8.55.0 @typescript-eslint/parser@^6.15.0 @typescript-eslint/eslint-plugin@^6.15.0 eslint-plugin-react@^7.33.2 eslint-plugin-react-hooks@^4.6.0 eslint-plugin-astro@^0.31.0
-```
-
-- [ ] **Step 2: Create ESLint config**
-
-Create `.eslintrc.js`:
-```javascript
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2022,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true
-    }
-  },
-  env: {
-    browser: true,
-    es2022: true,
-    node: true
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
-  settings: {
-    react: {
-      version: 'detect'
-    }
-  },
-  rules: {
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
-    '@typescript-eslint/no-unused-vars': ['error', { 
-      argsIgnorePattern: '^_',
-      varsIgnorePattern: '^_'
-    }],
-    '@typescript-eslint/no-explicit-any': 'warn',
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off'
-  },
-  overrides: [
-    {
-      files: ['*.astro'],
-      parser: 'astro-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        extraFileExtensions: ['.astro']
-      },
-      extends: ['plugin:astro/recommended']
-    }
-  ]
-};
-```
-
-- [ ] **Step 3: Update Prettier config**
-
-Modify `.prettierrc`:
-```json
-{
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 100,
-  "tabWidth": 2,
-  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
-  "overrides": [
-    {
-      "files": "*.astro",
-      "options": {
-        "parser": "astro"
-      }
-    }
-  ]
-}
-```
-
-- [ ] **Step 4: Create VS Code settings**
-
-Create `.vscode/settings.json`:
-```json
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "tailwindCSS.experimental.classRegex": [
-    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ],
-  "files.associations": {
-    "*.astro": "astro"
-  },
-  "[astro]": {
-    "editor.defaultFormatter": "astro-build.astro-vscode"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
-```
-
-- [ ] **Step 5: Create VS Code extensions**
-
-Create `.vscode/extensions.json`:
-```json
-{
-  "recommendations": [
-    "astro-build.astro-vscode",
-    "bradlc.vscode-tailwindcss",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "ms-vscode.vscode-typescript-next"
-  ]
-}
-```
-
-- [ ] **Step 6: Add lint scripts to package.json**
-
-Edit `package.json`:
-```json
-{
-  "scripts": {
-    "lint": "eslint src --ext .ts,.tsx,.astro",
-    "lint:fix": "eslint src --ext .ts,.tsx,.astro --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx,astro,css}\""
-  }
-}
-```
-
-- [ ] **Step 7: Run linter**
-
-Run: `npm run lint`
-Expected: No errors (or fix any found)
-
-- [ ] **Step 8: Run formatter**
-
-Run: `npm run format`
-Expected: All files formatted
-
-- [ ] **Step 9: Commit**
-
-```bash
-git add .
-git commit -m "feat: add ESLint, Prettier, and VS Code configuration"
-```
-
----
-
-### Task 18: Documentation
-
-**Files:**
-- Create: `README.md`
-- Create: `CONTRIBUTING.md`
-- Create: `docs/architecture.md`
-
-**Interfaces:**
-- Consumes: Project knowledge
-- Produces: Complete documentation
-
-- [ ] **Step 1: Create README**
-
-Create `README.md`:
-```markdown
-# GoodWebTools
-
-Privacy-first client-side utilities. All processing happens in your browser.
-
-## Features
-
-- **100% Client-Side** - No file uploads, no servers
-- **Works Offline** - Install as PWA
-- **Open Source** - Audit the code yourself
-- **Privacy-First** - Verify with DevTools Network tab
-
-## Development
-
-### Prerequisites
-
-- Node.js 20+
-- npm 10+
-
-### Setup
-
-\`\`\`bash
-npm install
-npm run dev
-\`\`\`
-
-Open http://localhost:4321
-
-### Scripts
-
-- `npm run dev` - Start dev server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run test` - Run tests
-- `npm run lint` - Lint code
-- `npm run format` - Format code
-
-### Architecture
-
-See [docs/architecture.md](docs/architecture.md)
-
-## Deployment
-
-### Cloudflare Pages
-
-1. Create Cloudflare Pages project
-2. Connect to GitHub repository
-3. Build command: `npm run build`
-4. Build output: `dist`
-5. Add secrets: `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ACCOUNT_ID`
-
-## Contributing
-
-See [CONTRIBUTING.md](CONTRIBUTING.md)
-
-## License
-
-MIT
-```
-
-- [ ] **Step 2: Create CONTRIBUTING**
-
-Create `CONTRIBUTING.md`:
-```markdown
-# Contributing to GoodWebTools
-
-## Adding a New Tool
-
-1. Register the tool in `src/registry/tools.ts`
-2. Create island component in `src/islands/<category>/<ToolName>.tsx`
-3. Create worker in `src/tools/<category>/<name>.worker.ts`
-4. Create pure logic in `src/tools/<category>/<name>.lib.ts`
-5. Write tests in `src/tools/<category>/<name>.lib.test.ts`
-6. Test locally with `npm run dev`
-7. Run tests with `npm run test`
-8. Commit with conventional commit message
-
-## Code Standards
-
-- **TypeScript strict mode** - No `any` without justification
-- **Explicit variable names** - Use units (byteSize, maxAgeMs, etc.)
-- **DRY** - Don't repeat yourself
-- **YAGNI** - You aren't gonna need it
-- **TDD** - Test-driven development
-
-## Testing
-
-- Unit tests for pure logic
-- Integration tests for services
-- Manual testing for UI components
-
-## Commit Messages
-
-Use conventional commits:
-
-- `feat:` - New feature
-- `fix:` - Bug fix
-- `docs:` - Documentation
-- `test:` - Tests
-- `refactor:` - Code refactoring
-- `style:` - Formatting
-- `chore:` - Maintenance
-
-## Pull Requests
-
-1. Create feature branch
-2. Make changes
-3. Write tests
-4. Run `npm run lint` and `npm run test`
-5. Commit with conventional message
-6. Open PR with description
-```
-
-- [ ] **Step 3: Create architecture docs**
-
-Create `docs/architecture.md`:
-```markdown
-# Architecture
-
-## Overview
-
-GoodWebTools uses a layered services architecture with Astro (static MPA) + React islands.
-
-## Directory Structure
-
-```
-src/
-├── pages/          # Astro routes (static HTML)
-├── layouts/        # Page layouts
-├── components/     # React components
-│   ├── shell/      # Persisted shell
-│   └── ui/         # Reusable UI
-├── islands/        # Per-tool React islands (lazy)
-├── tools/          # Pure logic + workers
-├── services/       # Singleton services
-├── registry/       # Tool manifest
-├── hooks/          # React hooks
-├── stores/         # Nanostores
-├── styles/         # Global CSS
-└── types/          # TypeScript types
-```
-
-## Key Concepts
-
-### Tool Registry
-
-Single source of truth for all tools. Each tool entry includes:
-- Metadata (name, category, icon, keywords)
-- Route
-- Lazy load function
-- Asset requirements
-
-### Shared Services
-
-Six singleton services:
-1. **FileService** - Unified file input
-2. **WorkerPool** - Worker lifecycle management
-3. **AssetCache** - WASM/model caching with TTL
-4. **DownloadService** - File downloads
-5. **ProgressService** - Progress/toast UI
-6. **PersistenceService** - Auto-save and navigation guards
-
-### Worker Pipeline
-
-Every tool follows: Island → Comlink → Worker → Logic → Results
-
-Workers run in separate threads, keeping UI responsive.
-
-### State Management
-
-- **Nanostores** for shell state (theme, workers)
-- **React local state** for tool UI
-- **LocalStorage** for persistence
-
-### PWA
-
-- Service worker for offline capability
-- Workbox for caching strategies
-- Manifest for installability
-
-## Privacy Guarantees
-
-1. **No egress** - Strict CSP blocks external requests
-2. **Offline-capable** - Strongest privacy proof
-3. **Open source** - Auditable code
-4. **Reproducible builds** - Verify production matches source
-
-## Performance
-
-- Initial shell: < 120KB gzipped
-- Manual chunk splitting
-- Lazy island loading
-- Progress bars for > 1MB assets
-- Service worker caching with expiration
-```
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add .
-git commit -m "docs: add README, CONTRIBUTING, and architecture documentation"
-```
-
----
-
-### Task 19: Final Testing & Performance Verification
-
-**Files:**
-- None (testing and verification)
-
-**Interfaces:**
-- Consumes: Complete app
-- Produces: Verified working Phase 0
-
-- [ ] **Step 1: Build production**
-
-Run: `npm run build`
-Expected: Clean build, no errors
-
-- [ ] **Step 2: Check bundle size**
-
-Run: `ls -lh dist/**/*.js | head -20`
-Expected: Individual chunks < 50KB, total shell < 120KB gzipped
-
-- [ ] **Step 3: Start preview server**
-
-Run: `npm run preview`
-
-- [ ] **Step 4: Test homepage**
-
-1. Open http://localhost:4321
-2. Verify theme toggle works
-3. Verify theme persists on reload
-4. Check Lighthouse score
-Expected: > 95 performance
-
-- [ ] **Step 5: Test command palette**
-
-1. Press ⌘K
-2. Palette opens
-3. Type "hash"
-4. See Hash File result
-5. Press Enter
-6. Navigate to tool
-Expected: All working
-
-- [ ] **Step 6: Test Hash tool**
-
-1. Drop a file
-2. See progress bar
-3. See hash result
-4. Download .sha256 file
-5. Verify hash is correct (compare with `shasum -a 256 <file>`)
-Expected: Hash matches
-
-- [ ] **Step 7: Test offline**
-
-1. Install PWA
-2. Disconnect network
-3. Reload app
-4. Use Hash tool
-Expected: Works offline
-
-- [ ] **Step 8: Test worker cleanup**
-
-1. Use Hash tool
-2. Navigate away
-3. Check DevTools console
-4. No errors
-Expected: Worker terminated cleanly
-
-- [ ] **Step 9: Test View Transitions**
-
-1. Navigate between pages
-2. Smooth animations
-3. Shell persists (doesn't re-mount)
-Expected: Smooth navigation
-
-- [ ] **Step 10: Verify privacy**
-
-1. Open DevTools Network tab
-2. Clear network log
-3. Use Hash tool
-4. Check network requests
-Expected: Zero external requests (only self-hosted assets)
-
-- [ ] **Step 11: Run all tests**
-
-Run: `npm run test`
-Expected: All tests pass
-
-- [ ] **Step 12: Run linter**
-
-Run: `npm run lint`
-Expected: No errors
-
-- [ ] **Step 13: Verify success criteria**
-
-Check each item from design spec:
-- [ ] Shell loads < 1.5s (FCP) - Check Lighthouse
-- [ ] Hash tool works offline after first use
-- [ ] Command palette searches tools
-- [ ] Theme toggle persists across navigation
-- [ ] Worker terminates on route-away
-- [ ] Progress bar shows for >1MB downloads (hash tool shows for all)
-- [ ] Lighthouse score > 95
-- [ ] Build passes CI checks (local tests)
-- [ ] PWA installable
-- [ ] Privacy page renders correctly
-
-- [ ] **Step 14: Final commit**
-
-```bash
-git add .
-git commit -m "chore: Phase 0 Foundation complete - all success criteria met"
-```
-
-- [ ] **Step 15: Tag release**
-
-```bash
-git tag -a v0.1.0 -m "Phase 0: Foundation"
-git push origin v0.1.0
-```
-
----
-
-## Execution Complete!
-
-Phase 0 Foundation is now complete with:
-
-✅ Astro + React + Tailwind setup
-✅ Tool Registry system
-✅ 6 Shared Services (File, Worker, Asset, Download, Progress, Persistence)
-✅ Persisted Shell with command palette (⌘K)
-✅ Theme system (light/dark)
-✅ Hash File demo tool (full pipeline validation)
-✅ PWA with offline capability
-✅ Cloudflare Pages deployment ready
-✅ Complete documentation
-✅ All success criteria met
-
-**Next:** Phase 1 - Dev/Office Utilities (pure JS tools)
\ No newline at end of file
diff --git a/docs/superpowers/plans/2026-07-13-playground-tools.md b/docs/superpowers/plans/2026-07-13-playground-tools.md
deleted file mode 100644
index f9d4afc..0000000
--- a/docs/superpowers/plans/2026-07-13-playground-tools.md
+++ /dev/null
@@ -1,1716 +0,0 @@
-# Playground Tools Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Add a `Playground` tool category with two on-device dev sandboxes — a multi-file **Code Scratchpad** and a **SQLite Playground** — built on one shared, lazily-loaded, self-hosted Monaco editor.
-
-**Architecture:** A shared Monaco engine island (self-hosted workers, no CDN) underpins both tools. The Code Scratchpad keeps files in IndexedDB and reads/writes disk via the File System Access API. The SQLite Playground runs `@sqlite.org/sqlite-wasm` in a Comlink Web Worker with an OPFS SAHPool VFS (durable, no COOP/COEP), returning result sets to a React UI with a visual grid.
-
-**Tech Stack:** Astro 4 (static) · React 18 islands · TypeScript · Tailwind (Neo-Brutalism) · `monaco-editor` · `@sqlite.org/sqlite-wasm` · `comlink` · `idb` · Vitest.
-
-## Global Constraints
-
-- **No external network calls except same-origin assets.** Self-host every worker/wasm; never load Monaco or SQLite from a CDN.
-- **Nothing is uploaded.** All processing is on-device.
-- **Vite `worker.format: 'es'` is global** (required by mupdf/pdfjs) — every Vite-bundled worker is an ES-module worker. Monaco's workers must build/run under this; validate on the **production build** (`astro preview`), not Vite dev, which mishandles excluded wasm deps.
-- **Registry-driven routing:** adding a `ToolDef` to `src/registry/tools.ts` auto-creates its `/tools/<id>` route via `src/pages/tools/[tool].astro` `getStaticPaths`. No per-tool page file.
-- **Lucide icons must be imported by name** on the single import line in `tools.ts`, or the build fails with "X is not defined".
-- **Every `import` of a Lucide icon that isn't already imported must be added** to that line.
-- **Design:** Neo-Brutalism — `border-2 border-border`, `shadow-brutal-sm`, `bg-muted`, `text-muted-foreground`, violet `bg-accent`/`text-accent-foreground`, uppercase bold labels. Match existing islands (e.g. `src/islands/media/Screenshot.tsx`).
-- **Categories:** the `Category` union lives in `src/types/tool.ts`; the ordered list + color map live in `src/registry/categories.ts`. Both must include any new category or the shell/command-palette won't render it.
-- **Verification is on the production build:** `npm run build` then `npx astro preview --port <p>`, headless-checked with a temporary `puppeteer-core` (uninstall after). This is the project's established practice.
-- **Dark theme signal:** `document.documentElement.classList.contains('dark')`; the class is toggled by `src/components/shell/ThemeToggle.tsx` and initialised in `src/layouts/Base.astro`.
-
----
-
-## File Structure
-
-**Pure logic (unit-tested with Vitest):**
-- `src/tools/playground/language.lib.ts` — filename → Monaco language id.
-- `src/tools/playground/sql.lib.ts` — `splitStatements`, `classifyStatement`.
-- `src/tools/playground/result.lib.ts` — `toCsv`, `toJson` for a result set.
-- `src/tools/playground/schema.lib.ts` — `quoteIdent`, `mapColumnInfo`.
-
-**Monaco foundation:**
-- `src/islands/playground/monaco-setup.ts` — one-time worker env + theme setup; re-exports `monaco`.
-- `src/islands/playground/MonacoEditor.tsx` — client-only React wrapper.
-
-**Code Scratchpad:**
-- `src/islands/playground/CodeScratchpad.tsx` — the tool island.
-- `src/tools/playground/scratchpad.store.ts` — IndexedDB persistence (via `idb`).
-
-**SQLite Playground:**
-- `src/tools/playground/sqlite.worker.ts` — Comlink worker wrapping sqlite-wasm + OPFS.
-- `src/tools/playground/sqlite.client.ts` — typed client that wraps the worker.
-- `src/islands/playground/SqlitePlayground.tsx` — the tool island (schema explorer + editor + results grid).
-
-**Wiring / config:**
-- `src/types/tool.ts` — add `'Playground'` to `Category`.
-- `src/registry/categories.ts` — add `'Playground'` + color.
-- `src/registry/tools.ts` — two `ToolDef` entries + icons.
-- `scripts/copy-wasm.mjs` — stage `sqlite3.wasm`/`sqlite3.mjs` into `public/sqlite/`.
-- `astro.config.mjs` — `optimizeDeps.exclude` the sqlite wasm module.
-- `.gitignore` — ignore `public/sqlite/`.
-- `README.md` — Phase 9 section.
-
-**Shared cross-task types** (defined in `sqlite.worker.ts`, imported by client + UI):
-
-```ts
-export interface QueryResult {
-  columns: string[];
-  rows: unknown[][];
-  rowsAffected: number;
-  elapsedMs: number;
-  kind: 'select' | 'ddl' | 'dml' | 'other'; // from classifyStatement, drives messaging
-}
-export interface ExecResult {
-  results: QueryResult[]; // one entry per executed statement
-  error?: string;         // set if a statement threw; results holds those that ran before it
-}
-export interface ColumnInfo { name: string; type: string; pk: boolean; notnull: boolean; }
-export interface SchemaObject {
-  type: 'table' | 'index' | 'view' | 'trigger';
-  name: string;
-  sql: string;
-  columns?: ColumnInfo[]; // present for tables and views
-}
-export interface SqliteApi {
-  init(): Promise<{ persisted: boolean }>;
-  exec(sql: string): Promise<ExecResult>;
-  schema(): Promise<SchemaObject[]>;
-  tableRows(name: string, limit: number, offset: number): Promise<QueryResult>;
-  exportDb(): Promise<Uint8Array>;
-  importDb(bytes: Uint8Array): Promise<void>;
-  reset(): Promise<void>;
-  loadSample(): Promise<void>;
-}
-```
-
-> Note: this uses `ExecResult.results[]` (one `QueryResult` per statement) rather than the spec's `QueryResult.more?` — an internally-cleaner equivalent for multi-statement scripts.
-
----
-
-## Task 1: Playground category wiring
-
-**Files:**
-- Modify: `src/types/tool.ts:3`
-- Modify: `src/registry/categories.ts`
-
-**Interfaces:**
-- Produces: the `'Playground'` `Category` value; the ordered `categories` list and `categoryColors` map both include it. Tasks 4 and 7 register tools under this category.
-
-- [ ] **Step 1: Add `'Playground'` to the `Category` union**
-
-In `src/types/tool.ts` line 3:
-
-```ts
-export type Category = 'Dev' | 'PDF' | 'Image' | 'Files' | 'Draw' | 'Media' | 'Playground';
-```
-
-- [ ] **Step 2: Add it to the ordered list and color map**
-
-In `src/registry/categories.ts`:
-
-```ts
-import type { Category } from '@/types/tool';
-
-export const categories: Category[] = [
-  'Dev',
-  'PDF',
-  'Image',
-  'Files',
-  'Draw',
-  'Media',
-  'Playground'
-];
-
-export const categoryColors: Record<Category, string> = {
-  Dev: 'bg-blue-500',
-  PDF: 'bg-red-500',
-  Image: 'bg-green-500',
-  Files: 'bg-yellow-500',
-  Draw: 'bg-purple-500',
-  Media: 'bg-pink-500',
-  Playground: 'bg-orange-500'
-};
-```
-
-- [ ] **Step 3: Typecheck (the `Record<Category, ...>` proves exhaustiveness)**
-
-Run: `npx tsc --noEmit 2>&1 | grep -E "categories|tool.ts" || echo "clean"`
-Expected: `clean` (no missing-key error on `categoryColors`).
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/types/tool.ts src/registry/categories.ts
-git commit -m "feat(playground): add Playground tool category"
-```
-
----
-
-## Task 2: Filename → language mapping (pure)
-
-**Files:**
-- Create: `src/tools/playground/language.lib.ts`
-- Test: `src/tools/playground/language.lib.test.ts`
-
-**Interfaces:**
-- Produces: `extensionToLanguage(filename: string): string` — a Monaco language id. Consumed by Code Scratchpad (Task 3/4).
-
-- [ ] **Step 1: Write the failing test**
-
-`src/tools/playground/language.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { extensionToLanguage } from './language.lib';
-
-describe('extensionToLanguage', () => {
-  it('maps known extensions', () => {
-    expect(extensionToLanguage('app.ts')).toBe('typescript');
-    expect(extensionToLanguage('data.json')).toBe('json');
-    expect(extensionToLanguage('notes.md')).toBe('markdown');
-    expect(extensionToLanguage('query.sql')).toBe('sql');
-    expect(extensionToLanguage('main.py')).toBe('python');
-    expect(extensionToLanguage('style.css')).toBe('css');
-  });
-
-  it('is case-insensitive', () => {
-    expect(extensionToLanguage('APP.TS')).toBe('typescript');
-  });
-
-  it('handles dotted names by using the last segment', () => {
-    expect(extensionToLanguage('archive.tar.json')).toBe('json');
-  });
-
-  it('falls back to plaintext for unknown or missing extensions', () => {
-    expect(extensionToLanguage('README')).toBe('plaintext');
-    expect(extensionToLanguage('weird.xyz')).toBe('plaintext');
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `npx vitest run src/tools/playground/language.lib.test.ts`
-Expected: FAIL — "Failed to resolve import './language.lib'".
-
-- [ ] **Step 3: Write the implementation**
-
-`src/tools/playground/language.lib.ts`:
-
-```ts
-const MAP: Record<string, string> = {
-  ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
-  mjs: 'javascript', cjs: 'javascript',
-  json: 'json', jsonc: 'json',
-  html: 'html', htm: 'html',
-  css: 'css', scss: 'scss', less: 'less',
-  md: 'markdown', markdown: 'markdown',
-  sql: 'sql',
-  py: 'python',
-  go: 'go',
-  rs: 'rust',
-  java: 'java',
-  c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp',
-  cs: 'csharp',
-  rb: 'ruby',
-  php: 'php',
-  sh: 'shell', bash: 'shell', zsh: 'shell',
-  yaml: 'yaml', yml: 'yaml',
-  xml: 'xml',
-  toml: 'ini', ini: 'ini',
-  txt: 'plaintext',
-};
-
-/** Monaco language id for a filename, by its extension. Unknown → 'plaintext'. */
-export function extensionToLanguage(filename: string): string {
-  const ext = filename.includes('.') ? filename.split('.').pop()! : '';
-  return MAP[ext.toLowerCase()] ?? 'plaintext';
-}
-```
-
-- [ ] **Step 4: Run test to verify it passes**
-
-Run: `npx vitest run src/tools/playground/language.lib.test.ts`
-Expected: PASS (4 tests).
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/playground/language.lib.ts src/tools/playground/language.lib.test.ts
-git commit -m "feat(playground): filename-to-language mapping"
-```
-
----
-
-## Task 3: Shared Monaco engine + minimal Code Scratchpad (validates the build risk)
-
-This task installs Monaco, self-hosts its workers, and proves it mounts on the **production build** by shipping a minimal single-buffer scratchpad. Task 4 adds tabs/disk/persistence.
-
-**Files:**
-- Create: `src/islands/playground/monaco-setup.ts`
-- Create: `src/islands/playground/MonacoEditor.tsx`
-- Create: `src/islands/playground/CodeScratchpad.tsx`
-- Modify: `src/registry/tools.ts` (import icon + register `code-scratchpad`)
-- Modify: `package.json` (adds `monaco-editor`)
-
-**Interfaces:**
-- Consumes: `extensionToLanguage` (Task 2).
-- Produces: `monaco` (re-exported), `setupMonaco()`; `MonacoEditor` React component with props `{ value, language, onChange?, onMount?, readOnly?, options? }`. Consumed by Task 4 and Task 7.
-
-- [ ] **Step 1: Install Monaco**
-
-Run: `npm install monaco-editor@0.52.2`
-Expected: adds `monaco-editor` to dependencies.
-
-- [ ] **Step 2: Write the Monaco setup module**
-
-`src/islands/playground/monaco-setup.ts`:
-
-```ts
-import * as monaco from 'monaco-editor';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-
-let done = false;
-
-/** One-time, idempotent Monaco setup: self-hosted workers + Neo-Brutalism themes. */
-export function setupMonaco(): void {
-  if (done) return;
-  done = true;
-
-  // Self-host workers (no CDN) so the no-external-requests promise holds.
-  (self as unknown as { MonacoEnvironment: monaco.Environment }).MonacoEnvironment = {
-    getWorker(_workerId: string, label: string): Worker {
-      if (label === 'json') return new jsonWorker();
-      if (label === 'css' || label === 'scss' || label === 'less') return new cssWorker();
-      if (label === 'html' || label === 'handlebars' || label === 'razor') return new htmlWorker();
-      if (label === 'typescript' || label === 'javascript') return new tsWorker();
-      return new editorWorker();
-    },
-  };
-
-  monaco.editor.defineTheme('gwt-light', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editor.background': '#faf7f0',
-      'editor.foreground': '#0a0a0a',
-      'editorLineNumber.foreground': '#9b9689',
-      'editor.selectionBackground': '#c4b5fd',
-      'editorCursor.foreground': '#7c3aed',
-    },
-  });
-  monaco.editor.defineTheme('gwt-dark', {
-    base: 'vs-dark',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editor.background': '#0a0a0a',
-      'editor.foreground': '#faf7f0',
-      'editorCursor.foreground': '#a78bfa',
-    },
-  });
-}
-
-export function isDark(): boolean {
-  return typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-}
-
-export { monaco };
-```
-
-- [ ] **Step 3: Write the React wrapper**
-
-`src/islands/playground/MonacoEditor.tsx`:
-
-```tsx
-import { useEffect, useRef } from 'react';
-import { monaco, setupMonaco, isDark } from './monaco-setup';
-
-interface MonacoEditorProps {
-  value: string;
-  language: string;
-  onChange?: (value: string) => void;
-  onMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
-  readOnly?: boolean;
-  options?: monaco.editor.IStandaloneEditorConstructionOptions;
-  height?: string;
-}
-
-export default function MonacoEditor({
-  value, language, onChange, onMount, readOnly, options, height = '60vh',
-}: MonacoEditorProps) {
-  const hostRef = useRef<HTMLDivElement | null>(null);
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-
-  // Create the editor once.
-  useEffect(() => {
-    setupMonaco();
-    const host = hostRef.current!;
-    const editor = monaco.editor.create(host, {
-      value,
-      language,
-      readOnly,
-      theme: isDark() ? 'gwt-dark' : 'gwt-light',
-      automaticLayout: true,
-      minimap: { enabled: true },
-      fontSize: 13,
-      scrollBeyondLastLine: false,
-      ...options,
-    });
-    editorRef.current = editor;
-    const sub = editor.onDidChangeModelContent(() => onChangeRef.current?.(editor.getValue()));
-    onMount?.(editor);
-
-    // Follow the app's light/dark toggle.
-    const observer = new MutationObserver(() =>
-      monaco.editor.setTheme(isDark() ? 'gwt-dark' : 'gwt-light')
-    );
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-
-    return () => { sub.dispose(); observer.disconnect(); editor.dispose(); };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Push external value changes into the editor without moving the cursor.
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (editor && value !== editor.getValue()) editor.setValue(value);
-  }, [value]);
-
-  // Update language when the active file/tab changes.
-  useEffect(() => {
-    const model = editorRef.current?.getModel();
-    if (model) monaco.editor.setModelLanguage(model, language);
-  }, [language]);
-
-  return <div ref={hostRef} className="w-full border-2 border-border" style={{ height }} />;
-}
-```
-
-- [ ] **Step 4: Write the minimal single-buffer scratchpad**
-
-`src/islands/playground/CodeScratchpad.tsx` (temporary MVP; Task 4 replaces the body):
-
-```tsx
-import { useState } from 'react';
-import MonacoEditor from './MonacoEditor';
-
-export default function CodeScratchpad() {
-  const [code, setCode] = useState('// Scratchpad\nconst hello = "world";\n');
-  return (
-    <div className="space-y-3">
-      <p className="text-sm text-muted-foreground">
-        A VS Code-grade editor, fully on-device. Multi-cursor, move/copy line, column select — all native.
-      </p>
-      <MonacoEditor value={code} language="typescript" onChange={setCode} />
-    </div>
-  );
-}
-```
-
-- [ ] **Step 5: Register the tool**
-
-In `src/registry/tools.ts`, add `Code2` to the Lucide import line, then add this entry (place it before the `whiteboard` entry):
-
-```ts
-  {
-    id: 'code-scratchpad',
-    name: 'Code Scratchpad',
-    category: 'Playground',
-    route: '/tools/code-scratchpad',
-    keywords: ['code', 'editor', 'monaco', 'vscode', 'scratchpad', 'text', 'multi-cursor'],
-    icon: Code2,
-    summary: 'VS Code-grade multi-file editor, on-device',
-    load: () => import('@/islands/playground/CodeScratchpad'),
-    status: 'stable'
-  },
-```
-
-- [ ] **Step 6: Exclude Monaco from Vite pre-bundling issues is NOT needed — build and verify the worker-format risk**
-
-Run: `npm run build 2>&1 | tail -3`
-Expected: `[build] Complete!` with the page count increased by 1. If the build errors on a worker, see the fallback note at the end of this task.
-
-- [ ] **Step 7: Headless-verify Monaco mounts and its worker responds on the production build**
-
-Run:
-
-```bash
-npx astro preview --port 4350 > /tmp/pv.log 2>&1 &
-sleep 4
-npm install -D puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-cat > /tmp/mcheck.mjs << 'EOF'
-import puppeteer from 'puppeteer-core';
-const b = await puppeteer.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, args: ['--no-sandbox'] });
-const p = await b.newPage();
-let errs=[]; p.on('pageerror', e=>errs.push(e.message.slice(0,140)));
-await p.goto('http://localhost:4350/tools/code-scratchpad',{waitUntil:'networkidle2',timeout:30000});
-await new Promise(r=>setTimeout(r,1500));
-const mounted = await p.evaluate(()=>!!document.querySelector('.monaco-editor .view-lines'));
-// Type into the editor and confirm the model updates (proves the editor is live).
-await p.evaluate(()=>{ const el=document.querySelector('.monaco-editor textarea'); el && el.focus(); });
-await p.keyboard.type('const x = 42;');
-await new Promise(r=>setTimeout(r,300));
-const hasText = await p.evaluate(()=>document.querySelector('.monaco-editor')?.textContent?.includes('42'));
-console.log('monaco mounted:', mounted, '| edit works:', !!hasText, '| pageerrors:', errs.length?errs.join(';'):'none');
-await b.close();
-EOF
-node /tmp/mcheck.mjs
-kill %1 2>/dev/null
-npm uninstall puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-```
-
-Expected: `monaco mounted: true | edit works: true | pageerrors: none`.
-
-- [ ] **Step 8: Commit**
-
-```bash
-git add src/islands/playground/ src/registry/tools.ts package.json package-lock.json
-git commit -m "feat(playground): shared Monaco engine + minimal Code Scratchpad"
-```
-
-> **If Step 6/7 fails on the worker** (module-worker vs classic, mirroring the ffmpeg core issue): keep the `?worker` imports but instantiate the base worker from a URL instead — replace the `getWorker` body's fallback with `new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker&url', import.meta.url), { type: 'module' })`, and if module workers still fail, add `vite-plugin-monaco-editor-esm` to `astro.config.mjs`'s `vite.plugins`. Re-run Steps 6–7 until green before committing.
-
----
-
-## Task 4: Code Scratchpad — tabs, disk I/O, IndexedDB autosave
-
-**Files:**
-- Create: `src/tools/playground/scratchpad.store.ts`
-- Modify: `src/islands/playground/CodeScratchpad.tsx` (full replacement)
-- Modify: `package.json` (adds `idb`)
-
-**Interfaces:**
-- Consumes: `MonacoEditor` (Task 3), `extensionToLanguage` (Task 2), `downloadService` from `@/services/download.service`.
-- Produces: the finished Code Scratchpad. `scratchpad.store.ts` exports `loadFiles(): Promise<ScratchFile[]>`, `saveFiles(files: ScratchFile[]): Promise<void>`, and the `ScratchFile` type.
-
-- [ ] **Step 1: Install `idb`**
-
-Run: `npm install idb@8.0.0`
-Expected: adds `idb` to dependencies.
-
-- [ ] **Step 2: Write the IndexedDB store**
-
-`src/tools/playground/scratchpad.store.ts`:
-
-```ts
-import { openDB, type IDBPDatabase } from 'idb';
-
-export interface ScratchFile {
-  id: string;
-  name: string;
-  language: string;
-  content: string;
-}
-
-const DB_NAME = 'gwt-scratchpad';
-const STORE = 'files';
-
-let dbPromise: Promise<IDBPDatabase> | null = null;
-function db(): Promise<IDBPDatabase> {
-  if (!dbPromise) {
-    dbPromise = openDB(DB_NAME, 1, {
-      upgrade(database) {
-        if (!database.objectStoreNames.contains(STORE)) {
-          database.createObjectStore(STORE, { keyPath: 'id' });
-        }
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function loadFiles(): Promise<ScratchFile[]> {
-  return (await db()).getAll(STORE) as Promise<ScratchFile[]>;
-}
-
-export async function saveFiles(files: ScratchFile[]): Promise<void> {
-  const database = await db();
-  const tx = database.transaction(STORE, 'readwrite');
-  await tx.objectStore(STORE).clear();
-  for (const f of files) await tx.objectStore(STORE).put(f);
-  await tx.done;
-}
-```
-
-- [ ] **Step 3: Replace the scratchpad island with the full version**
-
-`src/islands/playground/CodeScratchpad.tsx`:
-
-```tsx
-import { useEffect, useRef, useState } from 'react';
-import { Plus, X, FolderOpen, Save } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
-import MonacoEditor from './MonacoEditor';
-import { extensionToLanguage } from '@/tools/playground/language.lib';
-import { loadFiles, saveFiles, type ScratchFile } from '@/tools/playground/scratchpad.store';
-import { downloadService } from '@/services/download.service';
-
-let counter = 0;
-const newId = () => `f${Date.now()}-${counter++}`;
-
-function blankFile(): ScratchFile {
-  return { id: newId(), name: 'untitled.txt', language: 'plaintext', content: '' };
-}
-
-export default function CodeScratchpad() {
-  const [files, setFiles] = useState<ScratchFile[]>([]);
-  const [activeId, setActiveId] = useState<string>('');
-  // File System Access handles, kept out of IndexedDB (not structured-clonable across our store).
-  const handles = useRef<Map<string, FileSystemFileHandle>>(new Map());
-  const [ready, setReady] = useState(false);
-
-  // Restore persisted tabs on mount.
-  useEffect(() => {
-    loadFiles().then((saved) => {
-      const initial = saved.length ? saved : [blankFile()];
-      setFiles(initial);
-      setActiveId(initial[0].id);
-      setReady(true);
-    });
-  }, []);
-
-  // Debounced autosave whenever files change.
-  useEffect(() => {
-    if (!ready) return;
-    const t = setTimeout(() => { void saveFiles(files); }, 400);
-    return () => clearTimeout(t);
-  }, [files, ready]);
-
-  const active = files.find((f) => f.id === activeId) ?? null;
-
-  const updateActive = (content: string) =>
-    setFiles((fs) => fs.map((f) => (f.id === activeId ? { ...f, content } : f)));
-
-  const addFile = () => {
-    const name = prompt('File name (extension sets the language):', 'untitled.txt');
-    if (name === null) return;
-    const f: ScratchFile = { id: newId(), name: name || 'untitled.txt', language: extensionToLanguage(name || 'untitled.txt'), content: '' };
-    setFiles((fs) => [...fs, f]);
-    setActiveId(f.id);
-  };
-
-  const renameFile = (id: string) => {
-    const current = files.find((f) => f.id === id);
-    if (!current) return;
-    const name = prompt('Rename file:', current.name);
-    if (name === null || !name) return;
-    setFiles((fs) => fs.map((f) => (f.id === id ? { ...f, name, language: extensionToLanguage(name) } : f)));
-  };
-
-  const closeFile = (id: string) => {
-    handles.current.delete(id);
-    setFiles((fs) => {
-      const next = fs.filter((f) => f.id !== id);
-      const result = next.length ? next : [blankFile()];
-      if (id === activeId) setActiveId(result[0].id);
-      return result;
-    });
-  };
-
-  const openFromDisk = async () => {
-    if ('showOpenFilePicker' in window) {
-      try {
-        const [handle] = await (window as unknown as { showOpenFilePicker: (o?: unknown) => Promise<FileSystemFileHandle[]> }).showOpenFilePicker();
-        const file = await handle.getFile();
-        const content = await file.text();
-        const f: ScratchFile = { id: newId(), name: file.name, language: extensionToLanguage(file.name), content };
-        handles.current.set(f.id, handle);
-        setFiles((fs) => [...fs, f]);
-        setActiveId(f.id);
-      } catch (e) {
-        if ((e as Error).name !== 'AbortError') alert('Could not open file.');
-      }
-    } else {
-      const input = document.createElement('input');
-      input.type = 'file';
-      input.onchange = async () => {
-        const file = input.files?.[0];
-        if (!file) return;
-        const content = await file.text();
-        const f: ScratchFile = { id: newId(), name: file.name, language: extensionToLanguage(file.name), content };
-        setFiles((fs) => [...fs, f]);
-        setActiveId(f.id);
-      };
-      input.click();
-    }
-  };
-
-  const saveActive = async () => {
-    if (!active) return;
-    const handle = handles.current.get(active.id);
-    const blob = new Blob([active.content], { type: 'text/plain' });
-    if (handle) {
-      const writable = await (handle as unknown as { createWritable: () => Promise<{ write: (b: Blob) => Promise<void>; close: () => Promise<void> }> }).createWritable();
-      await writable.write(blob);
-      await writable.close();
-      return;
-    }
-    if ('showSaveFilePicker' in window) {
-      try {
-        const h = await (window as unknown as { showSaveFilePicker: (o?: unknown) => Promise<FileSystemFileHandle> }).showSaveFilePicker({ suggestedName: active.name });
-        handles.current.set(active.id, h);
-        const writable = await (h as unknown as { createWritable: () => Promise<{ write: (b: Blob) => Promise<void>; close: () => Promise<void> }> }).createWritable();
-        await writable.write(blob);
-        await writable.close();
-        return;
-      } catch (e) {
-        if ((e as Error).name === 'AbortError') return;
-      }
-    }
-    await downloadService.download(blob, active.name);
-  };
-
-  if (!ready) return <p className="text-sm text-muted-foreground">Loading…</p>;
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="flex flex-wrap items-center gap-1">
-          {files.map((f) => (
-            <div
-              key={f.id}
-              onDoubleClick={() => renameFile(f.id)}
-              className={`flex items-center gap-1 border-2 px-2 py-1 text-sm ${f.id === activeId ? 'border-border bg-accent text-accent-foreground' : 'border-border bg-muted'}`}
-            >
-              <button onClick={() => setActiveId(f.id)} className="font-bold">{f.name}</button>
-              <button onClick={() => closeFile(f.id)} aria-label={`Close ${f.name}`}><X className="h-3.5 w-3.5" /></button>
-            </div>
-          ))}
-          <button onClick={addFile} aria-label="New file" className="border-2 border-border bg-muted p-1 press-brutal"><Plus className="h-4 w-4" /></button>
-        </div>
-        <div className="ml-auto flex gap-2">
-          <Button variant="secondary" onClick={openFromDisk}><FolderOpen className="h-4 w-4" />Open</Button>
-          <Button variant="secondary" onClick={saveActive}><Save className="h-4 w-4" />Save</Button>
-        </div>
-      </div>
-
-      <p className="text-xs text-muted-foreground">
-        Tabs autosave locally. Double-click a tab to rename. Move line <kbd>⌥↑/↓</kbd>, add cursor <kbd>⌘⌥↑/↓</kbd>,
-        select-next <kbd>⌘D</kbd>, all occurrences <kbd>⌘⇧L</kbd>, column select <kbd>⇧⌥</kbd>+drag. On-device only.
-      </p>
-
-      {active && (
-        <MonacoEditor
-          key={active.id}
-          value={active.content}
-          language={active.language}
-          onChange={updateActive}
-        />
-      )}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 4: Build**
-
-Run: `npm run build 2>&1 | tail -2`
-Expected: `[build] Complete!`.
-
-- [ ] **Step 5: Headless-verify tabs + persistence across reload**
-
-Run:
-
-```bash
-npx astro preview --port 4351 > /tmp/pv.log 2>&1 &
-sleep 4
-npm install -D puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-cat > /tmp/scheck.mjs << 'EOF'
-import puppeteer from 'puppeteer-core';
-const b = await puppeteer.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, args: ['--no-sandbox'] });
-const p = await b.newPage();
-await p.goto('http://localhost:4351/tools/code-scratchpad',{waitUntil:'networkidle2',timeout:30000});
-await new Promise(r=>setTimeout(r,1200));
-await p.evaluate(()=>{ const el=document.querySelector('.monaco-editor textarea'); el && el.focus(); });
-await p.keyboard.type('persist me');
-await new Promise(r=>setTimeout(r,700)); // allow the 400ms autosave debounce
-await p.reload({waitUntil:'networkidle2'});
-await new Promise(r=>setTimeout(r,1200));
-const restored = await p.evaluate(()=>document.querySelector('.monaco-editor')?.textContent?.includes('persist me'));
-console.log('scratchpad persists across reload:', !!restored);
-await b.close();
-EOF
-node /tmp/scheck.mjs
-kill %1 2>/dev/null
-npm uninstall puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-```
-
-Expected: `scratchpad persists across reload: true`.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/islands/playground/CodeScratchpad.tsx src/tools/playground/scratchpad.store.ts package.json package-lock.json
-git commit -m "feat(playground): Code Scratchpad tabs, disk I/O, autosave"
-```
-
----
-
-## Task 5: SQLite pure logic libs
-
-**Files:**
-- Create: `src/tools/playground/sql.lib.ts` + `src/tools/playground/sql.lib.test.ts`
-- Create: `src/tools/playground/result.lib.ts` + `src/tools/playground/result.lib.test.ts`
-- Create: `src/tools/playground/schema.lib.ts` + `src/tools/playground/schema.lib.test.ts`
-
-**Interfaces:**
-- Produces:
-  - `splitStatements(sql: string): string[]`
-  - `classifyStatement(sql: string): 'select' | 'ddl' | 'dml' | 'other'`
-  - `toCsv(result: QueryResult): string`, `toJson(result: QueryResult): string`
-  - `quoteIdent(name: string): string`, `mapColumnInfo(rows: RawPragmaRow[]): ColumnInfo[]`
-- Consumed by the SQLite worker (Task 6) and UI (Task 7). `QueryResult`/`ColumnInfo` are imported from `sqlite.worker.ts` (Task 6) — but to keep these libs test-independent, they define their own minimal structural types (below) that match those shapes.
-
-- [ ] **Step 1: Write failing tests for `sql.lib`**
-
-`src/tools/playground/sql.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { splitStatements, classifyStatement } from './sql.lib';
-
-describe('splitStatements', () => {
-  it('splits on semicolons', () => {
-    expect(splitStatements('SELECT 1; SELECT 2;')).toEqual(['SELECT 1', 'SELECT 2']);
-  });
-  it('ignores semicolons inside string literals', () => {
-    expect(splitStatements("INSERT INTO t VALUES ('a;b'); SELECT 1")).toEqual([
-      "INSERT INTO t VALUES ('a;b')",
-      'SELECT 1',
-    ]);
-  });
-  it('ignores semicolons in line and block comments', () => {
-    expect(splitStatements('SELECT 1; -- a;b\nSELECT 2; /* c;d */ SELECT 3')).toEqual([
-      'SELECT 1',
-      '-- a;b\nSELECT 2',
-      '/* c;d */ SELECT 3',
-    ]);
-  });
-  it('drops trailing empty statements', () => {
-    expect(splitStatements('SELECT 1;   ;')).toEqual(['SELECT 1']);
-  });
-});
-
-describe('classifyStatement', () => {
-  it('classifies by leading keyword, skipping comments', () => {
-    expect(classifyStatement('  -- hi\n SELECT * FROM t')).toBe('select');
-    expect(classifyStatement('WITH x AS (SELECT 1) SELECT * FROM x')).toBe('select');
-    expect(classifyStatement('PRAGMA table_info(t)')).toBe('select');
-    expect(classifyStatement('CREATE TABLE t (a)')).toBe('ddl');
-    expect(classifyStatement('DROP TABLE t')).toBe('ddl');
-    expect(classifyStatement('INSERT INTO t VALUES (1)')).toBe('dml');
-    expect(classifyStatement('UPDATE t SET a=1')).toBe('dml');
-    expect(classifyStatement('BEGIN')).toBe('other');
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify failure**
-
-Run: `npx vitest run src/tools/playground/sql.lib.test.ts`
-Expected: FAIL — cannot resolve `./sql.lib`.
-
-- [ ] **Step 3: Implement `sql.lib`**
-
-`src/tools/playground/sql.lib.ts`:
-
-```ts
-/**
- * Split a multi-statement SQL script on top-level semicolons, respecting single
- * ('), double (") and backtick (`) quoted spans, `--` line comments and
- * `/* *​/` block comments. Returns trimmed, non-empty statements.
- */
-export function splitStatements(sql: string): string[] {
-  const out: string[] = [];
-  let buf = '';
-  let i = 0;
-  const n = sql.length;
-  while (i < n) {
-    const c = sql[i];
-    const next = sql[i + 1];
-    // Line comment
-    if (c === '-' && next === '-') {
-      const end = sql.indexOf('\n', i);
-      const stop = end === -1 ? n : end;
-      buf += sql.slice(i, stop);
-      i = stop;
-      continue;
-    }
-    // Block comment
-    if (c === '/' && next === '*') {
-      const end = sql.indexOf('*/', i + 2);
-      const stop = end === -1 ? n : end + 2;
-      buf += sql.slice(i, stop);
-      i = stop;
-      continue;
-    }
-    // Quoted span
-    if (c === "'" || c === '"' || c === '`') {
-      let j = i + 1;
-      while (j < n) {
-        if (sql[j] === c) {
-          if (sql[j + 1] === c) { j += 2; continue; } // doubled = escaped
-          break;
-        }
-        j++;
-      }
-      buf += sql.slice(i, Math.min(j + 1, n));
-      i = j + 1;
-      continue;
-    }
-    if (c === ';') {
-      if (buf.trim()) out.push(buf.trim());
-      buf = '';
-      i++;
-      continue;
-    }
-    buf += c;
-    i++;
-  }
-  if (buf.trim()) out.push(buf.trim());
-  return out;
-}
-
-const LEADING_COMMENTS = /^(\s|--[^\n]*\n|\/\*[\s\S]*?\*\/)+/;
-
-export function classifyStatement(sql: string): 'select' | 'ddl' | 'dml' | 'other' {
-  const cleaned = sql.replace(LEADING_COMMENTS, '');
-  const kw = (cleaned.match(/^\s*([a-zA-Z]+)/)?.[1] ?? '').toUpperCase();
-  if (kw === 'SELECT' || kw === 'WITH' || kw === 'PRAGMA' || kw === 'EXPLAIN' || kw === 'VALUES') return 'select';
-  if (kw === 'CREATE' || kw === 'ALTER' || kw === 'DROP' || kw === 'REINDEX') return 'ddl';
-  if (kw === 'INSERT' || kw === 'UPDATE' || kw === 'DELETE' || kw === 'REPLACE') return 'dml';
-  return 'other';
-}
-```
-
-- [ ] **Step 4: Run to verify pass**
-
-Run: `npx vitest run src/tools/playground/sql.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 5: Write failing tests for `result.lib`**
-
-`src/tools/playground/result.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { toCsv, toJson } from './result.lib';
-
-const result = {
-  columns: ['id', 'name'],
-  rows: [[1, 'Ann'], [2, 'B,x']],
-  rowsAffected: 0,
-  elapsedMs: 1,
-};
-
-describe('toCsv', () => {
-  it('renders a header and quotes fields with commas', () => {
-    expect(toCsv(result)).toBe('id,name\n1,Ann\n2,"B,x"');
-  });
-  it('escapes embedded quotes and nulls', () => {
-    expect(toCsv({ columns: ['a'], rows: [['he"llo'], [null]], rowsAffected: 0, elapsedMs: 0 }))
-      .toBe('a\n"he""llo"\n');
-  });
-});
-
-describe('toJson', () => {
-  it('maps columns to values per row', () => {
-    expect(JSON.parse(toJson(result))).toEqual([
-      { id: 1, name: 'Ann' },
-      { id: 2, name: 'B,x' },
-    ]);
-  });
-});
-```
-
-- [ ] **Step 6: Run to verify failure**
-
-Run: `npx vitest run src/tools/playground/result.lib.test.ts`
-Expected: FAIL — cannot resolve `./result.lib`.
-
-- [ ] **Step 7: Implement `result.lib`**
-
-`src/tools/playground/result.lib.ts`:
-
-```ts
-interface ResultLike {
-  columns: string[];
-  rows: unknown[][];
-}
-
-function cell(v: unknown): string {
-  if (v === null || v === undefined) return '';
-  const s = String(v);
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
-}
-
-export function toCsv(result: ResultLike): string {
-  const header = result.columns.map(cell).join(',');
-  const body = result.rows.map((r) => r.map(cell).join(',')).join('\n');
-  return body ? `${header}\n${body}` : header;
-}
-
-export function toJson(result: ResultLike): string {
-  const objects = result.rows.map((row) => {
-    const o: Record<string, unknown> = {};
-    result.columns.forEach((c, i) => { o[c] = row[i] ?? null; });
-    return o;
-  });
-  return JSON.stringify(objects, null, 2);
-}
-```
-
-- [ ] **Step 8: Run to verify pass**
-
-Run: `npx vitest run src/tools/playground/result.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 9: Write failing tests for `schema.lib`**
-
-`src/tools/playground/schema.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { quoteIdent, mapColumnInfo } from './schema.lib';
-
-describe('quoteIdent', () => {
-  it('wraps in double quotes and escapes embedded quotes', () => {
-    expect(quoteIdent('users')).toBe('"users"');
-    expect(quoteIdent('we"ird')).toBe('"we""ird"');
-  });
-});
-
-describe('mapColumnInfo', () => {
-  it('maps PRAGMA table_info rows to ColumnInfo', () => {
-    const rows = [
-      { name: 'id', type: 'INTEGER', notnull: 1, pk: 1 },
-      { name: 'email', type: 'TEXT', notnull: 0, pk: 0 },
-    ];
-    expect(mapColumnInfo(rows)).toEqual([
-      { name: 'id', type: 'INTEGER', pk: true, notnull: true },
-      { name: 'email', type: 'TEXT', pk: false, notnull: false },
-    ]);
-  });
-});
-```
-
-- [ ] **Step 10: Run to verify failure**
-
-Run: `npx vitest run src/tools/playground/schema.lib.test.ts`
-Expected: FAIL — cannot resolve `./schema.lib`.
-
-- [ ] **Step 11: Implement `schema.lib`**
-
-`src/tools/playground/schema.lib.ts`:
-
-```ts
-export interface RawPragmaRow {
-  name: string;
-  type: string;
-  notnull: number;
-  pk: number;
-}
-export interface ColumnInfo {
-  name: string;
-  type: string;
-  pk: boolean;
-  notnull: boolean;
-}
-
-/** SQLite-safe double-quoted identifier. */
-export function quoteIdent(name: string): string {
-  return `"${name.replace(/"/g, '""')}"`;
-}
-
-export function mapColumnInfo(rows: RawPragmaRow[]): ColumnInfo[] {
-  return rows.map((r) => ({
-    name: r.name,
-    type: r.type,
-    pk: !!r.pk,
-    notnull: !!r.notnull,
-  }));
-}
-```
-
-- [ ] **Step 12: Run to verify pass, then run the whole suite**
-
-Run: `npx vitest run src/tools/playground/`
-Expected: PASS (all three lib test files).
-Run: `npx vitest run 2>&1 | grep -E "Test Files|Tests "`
-Expected: totals increased; all pass.
-
-- [ ] **Step 13: Commit**
-
-```bash
-git add src/tools/playground/sql.lib.ts src/tools/playground/sql.lib.test.ts src/tools/playground/result.lib.ts src/tools/playground/result.lib.test.ts src/tools/playground/schema.lib.ts src/tools/playground/schema.lib.test.ts
-git commit -m "feat(playground): SQLite pure logic libs (split/classify/serialize/schema)"
-```
-
----
-
-## Task 6: SQLite worker + client (sqlite-wasm + OPFS)
-
-**Files:**
-- Create: `src/tools/playground/sqlite.worker.ts`
-- Create: `src/tools/playground/sqlite.client.ts`
-- Modify: `scripts/copy-wasm.mjs` (stage sqlite wasm to `public/sqlite/`)
-- Modify: `astro.config.mjs` (`optimizeDeps.exclude`)
-- Modify: `.gitignore` (`public/sqlite/`)
-- Modify: `package.json` (adds `@sqlite.org/sqlite-wasm`)
-
-**Interfaces:**
-- Consumes: `splitStatements`, `classifyStatement` (Task 5), `quoteIdent`, `mapColumnInfo` (Task 5).
-- Produces: `SqliteApi` (see shared types), and `sqlite.client.ts` exporting `getSqlite(): Remote<SqliteApi>` (a Comlink-wrapped singleton). Consumed by Task 7.
-
-- [ ] **Step 1: Install sqlite-wasm**
-
-Run: `npm install @sqlite.org/sqlite-wasm@3.50.1-build1`
-Expected: adds the dependency. (If that exact version is unavailable, use the latest `3.x` `@sqlite.org/sqlite-wasm`; the API used below is stable across 3.x.)
-
-- [ ] **Step 2: Stage the wasm into `public/sqlite/`**
-
-Append to `scripts/copy-wasm.mjs` (before the final `console.log`):
-
-```js
-// SQLite WASM (served same-origin at /sqlite/; loaded by the sqlite.worker).
-const sqliteSrc = 'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm';
-if (existsSync(sqliteSrc)) {
-  mkdirSync('public/sqlite', { recursive: true });
-  for (const f of ['sqlite3.wasm', 'sqlite3.mjs']) {
-    if (existsSync(`${sqliteSrc}/${f}`)) copyFileSync(`${sqliteSrc}/${f}`, `public/sqlite/${f}`);
-  }
-}
-```
-
-- [ ] **Step 3: Stage now and confirm the files exist**
-
-Run:
-```bash
-node scripts/copy-wasm.mjs
-ls -la public/sqlite/
-```
-Expected: `sqlite3.wasm` (~1 MB) and `sqlite3.mjs` present.
-
-- [ ] **Step 4: Gitignore the staged assets**
-
-Add to `.gitignore`:
-```
-public/sqlite/
-```
-
-- [ ] **Step 5: Exclude sqlite-wasm from Vite pre-bundling**
-
-In `astro.config.mjs`, add `'@sqlite.org/sqlite-wasm'` to the `optimizeDeps.exclude` array (the line that already lists `onnxruntime-web`, `@ffmpeg/ffmpeg`, `@ffmpeg/util`):
-
-```js
-      exclude: ['pdfjs-dist/build/pdf.worker.min.mjs', 'mupdf', 'libarchive.js', 'onnxruntime-web', '@ffmpeg/ffmpeg', '@ffmpeg/util', '@sqlite.org/sqlite-wasm'],
-```
-
-- [ ] **Step 6: Write the worker**
-
-`src/tools/playground/sqlite.worker.ts`:
-
-```ts
-import * as Comlink from 'comlink';
-import { splitStatements, classifyStatement } from './sql.lib';
-import { quoteIdent, mapColumnInfo, type RawPragmaRow } from './schema.lib';
-
-export interface QueryResult {
-  columns: string[];
-  rows: unknown[][];
-  rowsAffected: number;
-  elapsedMs: number;
-  kind: 'select' | 'ddl' | 'dml' | 'other';
-}
-export interface ExecResult {
-  results: QueryResult[];
-  error?: string;
-}
-export interface ColumnInfo { name: string; type: string; pk: boolean; notnull: boolean; }
-export interface SchemaObject {
-  type: 'table' | 'index' | 'view' | 'trigger';
-  name: string;
-  sql: string;
-  columns?: ColumnInfo[];
-}
-export interface SqliteApi {
-  init(): Promise<{ persisted: boolean }>;
-  exec(sql: string): Promise<ExecResult>;
-  schema(): Promise<SchemaObject[]>;
-  tableRows(name: string, limit: number, offset: number): Promise<QueryResult>;
-  exportDb(): Promise<Uint8Array>;
-  importDb(bytes: Uint8Array): Promise<void>;
-  reset(): Promise<void>;
-  loadSample(): Promise<void>;
-}
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const DB_PATH = '/playground.sqlite';
-const SAMPLE = `
-CREATE TABLE artists (id INTEGER PRIMARY KEY, name TEXT NOT NULL);
-CREATE TABLE albums (id INTEGER PRIMARY KEY, title TEXT NOT NULL, artist_id INTEGER REFERENCES artists(id), year INTEGER);
-CREATE INDEX idx_albums_artist ON albums(artist_id);
-INSERT INTO artists (id, name) VALUES (1,'Radiohead'),(2,'Miles Davis'),(3,'Aphex Twin');
-INSERT INTO albums (title, artist_id, year) VALUES
- ('OK Computer',1,1997),('In Rainbows',1,2007),
- ('Kind of Blue',2,1959),('Bitches Brew',2,1970),
- ('Selected Ambient Works 85-92',3,1992);
-`;
-
-let sqlite3: any = null;
-let pool: any = null;
-let db: any = null;
-let persisted = false;
-
-async function ensure(): Promise<void> {
-  if (db) return;
-  const mod = await import('@sqlite.org/sqlite-wasm');
-  const init = (mod as any).default;
-  sqlite3 = await init({ locateFile: () => new URL('/sqlite/sqlite3.wasm', location.origin).href });
-  try {
-    pool = await sqlite3.installOpfsSAHPoolVfs({ name: 'gwt-playground' });
-    db = new pool.OpfsSAHPoolDb(DB_PATH);
-    persisted = true;
-  } catch {
-    // OPFS SAHPool unavailable (older Safari) — fall back to in-memory.
-    db = new sqlite3.oo1.DB(':memory:', 'c');
-    persisted = false;
-  }
-}
-
-/** Run one statement, capturing columns/rows/affected/kind. */
-function runOne(sql: string): QueryResult {
-  const columns: string[] = [];
-  const rows: unknown[][] = [];
-  const t0 = performance.now();
-  db.exec({ sql, rowMode: 'array', columnNames: columns, resultRows: rows });
-  const elapsedMs = performance.now() - t0;
-  const rowsAffected = db.changes();
-  return { columns: columns.slice(), rows, rowsAffected, elapsedMs, kind: classifyStatement(sql) };
-}
-
-const api: SqliteApi = {
-  async init() {
-    await ensure();
-    return { persisted };
-  },
-
-  async exec(sql: string): Promise<ExecResult> {
-    await ensure();
-    const results: QueryResult[] = [];
-    for (const stmt of splitStatements(sql)) {
-      try {
-        results.push(runOne(stmt));
-      } catch (e) {
-        return { results, error: (e as Error).message };
-      }
-    }
-    return { results };
-  },
-
-  async schema(): Promise<SchemaObject[]> {
-    await ensure();
-    const master: any[] = [];
-    db.exec({
-      sql: "SELECT type,name,sql FROM sqlite_master WHERE name NOT LIKE 'sqlite_%' ORDER BY type,name",
-      rowMode: 'object',
-      resultRows: master,
-    });
-    const objects: SchemaObject[] = [];
-    for (const r of master) {
-      const obj: SchemaObject = { type: r.type, name: r.name, sql: r.sql || '' };
-      if (r.type === 'table' || r.type === 'view') {
-        const info: RawPragmaRow[] = [];
-        db.exec({ sql: `PRAGMA table_info(${quoteIdent(r.name)})`, rowMode: 'object', resultRows: info });
-        obj.columns = mapColumnInfo(info);
-      }
-      objects.push(obj);
-    }
-    return objects;
-  },
-
-  async tableRows(name: string, limit: number, offset: number): Promise<QueryResult> {
-    await ensure();
-    return runOne(`SELECT * FROM ${quoteIdent(name)} LIMIT ${Math.max(0, limit)} OFFSET ${Math.max(0, offset)}`);
-  },
-
-  async exportDb(): Promise<Uint8Array> {
-    await ensure();
-    return sqlite3.capi.sqlite3_js_db_export(db);
-  },
-
-  async importDb(bytes: Uint8Array): Promise<void> {
-    await ensure();
-    db.close();
-    if (pool) {
-      await pool.importDb(DB_PATH, bytes);
-      db = new pool.OpfsSAHPoolDb(DB_PATH);
-    } else {
-      db = new sqlite3.oo1.DB(':memory:', 'c');
-      const p = sqlite3.wasm.allocFromTypedArray(bytes);
-      sqlite3.capi.sqlite3_deserialize(db, 'main', p, bytes.length, bytes.length, sqlite3.capi.SQLITE_DESERIALIZE_FREEONCLOSE);
-    }
-  },
-
-  async reset(): Promise<void> {
-    await ensure();
-    const tables: any[] = [];
-    db.exec({
-      sql: "SELECT type,name FROM sqlite_master WHERE name NOT LIKE 'sqlite_%'",
-      rowMode: 'object',
-      resultRows: tables,
-    });
-    // Drop views/triggers/indexes first, then tables.
-    for (const order of ['trigger', 'view', 'index', 'table']) {
-      for (const t of tables.filter((x) => x.type === order)) {
-        db.exec(`DROP ${order.toUpperCase()} IF EXISTS ${quoteIdent(t.name)}`);
-      }
-    }
-  },
-
-  async loadSample(): Promise<void> {
-    await ensure();
-    await this.reset();
-    db.exec(SAMPLE);
-  },
-};
-
-Comlink.expose(api);
-```
-
-- [ ] **Step 7: Write the client**
-
-`src/tools/playground/sqlite.client.ts`:
-
-```ts
-import * as Comlink from 'comlink';
-import type { Remote } from 'comlink';
-import type { SqliteApi } from './sqlite.worker';
-import SqliteWorker from './sqlite.worker?worker';
-
-let remote: Remote<SqliteApi> | null = null;
-
-/** Comlink-wrapped SQLite engine, created once per session. */
-export function getSqlite(): Remote<SqliteApi> {
-  if (!remote) {
-    const worker = new SqliteWorker();
-    worker.addEventListener('error', (e) => console.error('[sqlite worker]', e.message));
-    remote = Comlink.wrap<SqliteApi>(worker);
-  }
-  return remote;
-}
-```
-
-- [ ] **Step 8: Build**
-
-Run: `npm run build 2>&1 | tail -2`
-Expected: `[build] Complete!`.
-
-- [ ] **Step 9: Typecheck the worker + client (runtime is verified in Task 7)**
-
-There is no UI yet, and a production preview doesn't serve `/src` modules to probe the worker directly, so the engine's **runtime** verification is folded into Task 7 Step 5 (which drives the identical client → worker → sqlite-wasm → OPFS path through the real UI). Here, prove the types and module graph resolve:
-
-Run: `npx tsc --noEmit 2>&1 | grep -E "playground/sqlite" || echo "clean"`
-Expected: `clean` (no type errors in `sqlite.worker.ts` / `sqlite.client.ts`).
-
-Run: `npm run build 2>&1 | tail -2`
-Expected: `[build] Complete!` — confirms the `?worker` import and sqlite-wasm exclusion bundle without error.
-
-- [ ] **Step 10: Commit**
-
-```bash
-git add src/tools/playground/sqlite.worker.ts src/tools/playground/sqlite.client.ts scripts/copy-wasm.mjs astro.config.mjs .gitignore package.json package-lock.json
-git commit -m "feat(playground): SQLite worker + client (sqlite-wasm + OPFS SAHPool)"
-```
-
----
-
-## Task 7: SQLite Playground UI
-
-**Files:**
-- Create: `src/islands/playground/SqlitePlayground.tsx`
-- Modify: `src/registry/tools.ts` (import icon + register `sqlite-playground`)
-
-**Interfaces:**
-- Consumes: `getSqlite` (Task 6), `MonacoEditor` (Task 3), `classifyStatement` (Task 5), `toCsv`/`toJson` (Task 5), `downloadService`.
-- Produces: the finished tool.
-
-- [ ] **Step 1: Write the island**
-
-`src/islands/playground/SqlitePlayground.tsx`:
-
-```tsx
-import { useEffect, useRef, useState } from 'react';
-import { Play, Database, Download, Upload, FlaskConical, RotateCcw, Table2 } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
-import { Alert } from '@/components/ui/Alert';
-import MonacoEditor from './MonacoEditor';
-import { getSqlite } from '@/tools/playground/sqlite.client';
-import { toCsv, toJson } from '@/tools/playground/result.lib';
-import { downloadService } from '@/services/download.service';
-import type { monaco } from './monaco-setup';
-import type { QueryResult, SchemaObject } from '@/tools/playground/sqlite.worker';
-
-const STARTER = 'SELECT name FROM sqlite_master;\n';
-
-export default function SqlitePlayground() {
-  const [sql, setSql] = useState(STARTER);
-  const [schema, setSchema] = useState<SchemaObject[]>([]);
-  const [grids, setGrids] = useState<QueryResult[]>([]);
-  const [activeGrid, setActiveGrid] = useState(0);
-  const [message, setMessage] = useState('');
-  const [error, setError] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [persisted, setPersisted] = useState(true);
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-
-  const db = getSqlite();
-
-  const refreshSchema = async () => setSchema(await db.schema());
-
-  useEffect(() => {
-    db.init().then((r) => { setPersisted(r.persisted); return refreshSchema(); });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const run = async (only?: string) => {
-    const script = only ?? (editorRef.current?.getModel()?.getValueInRange(editorRef.current.getSelection()!) || sql);
-    setBusy(true); setError(''); setMessage('');
-    try {
-      const res = await db.exec(script);
-      // Grids = statements that returned columns (SELECT/PRAGMA); the rest are
-      // DDL/DML and get a text summary built from each result's `kind`.
-      const withRows = res.results.filter((r) => r.columns.length > 0);
-      const noRows = res.results.filter((r) => r.columns.length === 0);
-      setGrids(withRows);
-      setActiveGrid(0);
-      const totalMs = res.results.reduce((s, r) => s + r.elapsedMs, 0).toFixed(1);
-      if (noRows.length) {
-        const ddl = noRows.filter((r) => r.kind === 'ddl').length;
-        const affected = noRows.filter((r) => r.kind === 'dml').reduce((s, r) => s + r.rowsAffected, 0);
-        const parts: string[] = [];
-        if (ddl) parts.push(`${ddl} schema change(s)`);
-        if (noRows.some((r) => r.kind === 'dml')) parts.push(`${affected} row(s) affected`);
-        setMessage(`${parts.join(' · ') || 'ok'} · ${totalMs} ms`);
-      } else if (withRows.length) {
-        setMessage(`${withRows[0].rows.length} row(s) · ${totalMs} ms`);
-      }
-      if (res.error) setError(res.error);
-      await refreshSchema();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Query failed.');
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const browseTable = async (name: string) => {
-    setBusy(true); setError(''); setMessage('');
-    try {
-      const r = await db.tableRows(name, 200, 0);
-      setGrids([r]); setActiveGrid(0);
-      setMessage(`${name}: first ${r.rows.length} row(s)`);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read table.');
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const onMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
-    editorRef.current = editor;
-    // Cmd/Ctrl+Enter runs the script (or selection).
-    editor.addAction({
-      id: 'gwt-run-sql',
-      label: 'Run SQL',
-      keybindings: [/* CtrlCmd */ 2048 | /* Enter */ 3],
-      run: () => { void run(); },
-    });
-  };
-
-  const exportDb = async () => {
-    const bytes = await db.exportDb();
-    await downloadService.download(new Blob([bytes], { type: 'application/x-sqlite3' }), 'playground.sqlite');
-  };
-
-  const importDb = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.sqlite,.db,.sqlite3';
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      setBusy(true);
-      try {
-        await db.importDb(new Uint8Array(await file.arrayBuffer()));
-        await refreshSchema();
-        setMessage(`Imported ${file.name}`);
-        setGrids([]);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not import database.');
-      } finally {
-        setBusy(false);
-      }
-    };
-    input.click();
-  };
-
-  const loadSample = async () => {
-    setBusy(true);
-    await db.loadSample();
-    await refreshSchema();
-    setSql('SELECT a.name AS artist, al.title, al.year\nFROM albums al JOIN artists a ON a.id = al.artist_id\nORDER BY al.year;\n');
-    setMessage('Sample database loaded.');
-    setBusy(false);
-  };
-
-  const resetDb = async () => {
-    if (!confirm('Drop all tables in the playground database?')) return;
-    setBusy(true);
-    await db.reset();
-    await refreshSchema();
-    setGrids([]); setMessage('Database reset.');
-    setBusy(false);
-  };
-
-  const grid = grids[activeGrid];
-
-  return (
-    <div className="space-y-3">
-      {!persisted && (
-        <Alert variant="warning">
-          Your browser can&apos;t persist this database (no OPFS). It lives in memory — <b>export to keep your data</b>.
-        </Alert>
-      )}
-
-      <div className="flex flex-wrap gap-2">
-        <Button onClick={() => run()} disabled={busy}><Play className="h-4 w-4" />Run (⌘⏎)</Button>
-        <Button variant="secondary" onClick={loadSample} disabled={busy}><FlaskConical className="h-4 w-4" />Load sample</Button>
-        <Button variant="secondary" onClick={importDb} disabled={busy}><Upload className="h-4 w-4" />Open .sqlite</Button>
-        <Button variant="secondary" onClick={exportDb} disabled={busy}><Download className="h-4 w-4" />Export .sqlite</Button>
-        <Button variant="ghost" onClick={resetDb} disabled={busy}><RotateCcw className="h-4 w-4" />Reset</Button>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-[220px_1fr]">
-        {/* Schema explorer */}
-        <aside className="max-h-[70vh] overflow-auto border-2 border-border bg-muted p-2 text-sm">
-          <p className="mb-1 flex items-center gap-1 font-bold uppercase tracking-wide text-muted-foreground">
-            <Database className="h-4 w-4" /> Schema
-          </p>
-          {schema.length === 0 && <p className="text-xs text-muted-foreground">No objects yet. Run a CREATE, or load the sample.</p>}
-          {schema.map((o) => (
-            <div key={`${o.type}-${o.name}`} className="mb-1">
-              <button
-                onClick={() => (o.type === 'table' || o.type === 'view') ? browseTable(o.name) : setSql((s) => `${o.sql};\n${s}`)}
-                className="flex w-full items-center gap-1 text-left font-bold hover:text-accent"
-                title={o.type === 'table' || o.type === 'view' ? 'Browse rows' : 'Insert DDL into editor'}
-              >
-                <Table2 className="h-3.5 w-3.5" />{o.name}
-                <span className="ml-auto text-[10px] uppercase text-muted-foreground">{o.type}</span>
-              </button>
-              {o.columns && (
-                <ul className="ml-4 text-xs text-muted-foreground">
-                  {o.columns.map((c) => (
-                    <li key={c.name}>{c.name} <span className="opacity-60">{c.type}{c.pk ? ' PK' : ''}{c.notnull ? ' •' : ''}</span></li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          ))}
-        </aside>
-
-        {/* Editor + results */}
-        <div className="space-y-3">
-          <MonacoEditor value={sql} language="sql" onChange={setSql} onMount={onMount} height="34vh" />
-
-          {error && <Alert variant="error">{error}</Alert>}
-          {message && !error && <p className="text-sm font-bold text-muted-foreground">{message}</p>}
-
-          {grids.length > 1 && (
-            <div className="flex flex-wrap gap-1">
-              {grids.map((_, i) => (
-                <button key={i} onClick={() => setActiveGrid(i)}
-                  className={`border-2 border-border px-2 py-0.5 text-xs font-bold ${i === activeGrid ? 'bg-accent text-accent-foreground' : 'bg-muted'}`}>
-                  Result {i + 1}
-                </button>
-              ))}
-            </div>
-          )}
-
-          {grid && grid.columns.length > 0 && (
-            <div className="space-y-2">
-              <div className="max-h-[40vh] overflow-auto border-2 border-border">
-                <table className="w-full border-collapse text-sm">
-                  <thead className="sticky top-0 bg-muted">
-                    <tr>{grid.columns.map((c) => <th key={c} className="border-2 border-border px-2 py-1 text-left font-bold">{c}</th>)}</tr>
-                  </thead>
-                  <tbody>
-                    {grid.rows.slice(0, 1000).map((row, ri) => (
-                      <tr key={ri}>
-                        {row.map((cell, ci) => (
-                          <td key={ci} onClick={() => navigator.clipboard?.writeText(cell == null ? '' : String(cell))}
-                            className="cursor-copy border-2 border-border px-2 py-1 font-mono">
-                            {cell == null ? <span className="opacity-40">NULL</span> : String(cell)}
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                {grid.rows.length > 1000 && <span>Showing first 1000 of {grid.rows.length} rows.</span>}
-                <div className="ml-auto flex gap-2">
-                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toCsv(grid)], { type: 'text/csv' }), 'result.csv')}>Export CSV</Button>
-                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toJson(grid)], { type: 'application/json' }), 'result.json')}>Export JSON</Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Confirm the `Alert` component supports `variant="warning"`**
-
-Run: `grep -nE "warning|variant" src/components/ui/Alert.tsx`
-Expected: a `warning` variant exists. If it does not, change the `<Alert variant="warning">` to `<Alert variant="error">` in the island (keep the copy) and note it in this checkbox.
-
-- [ ] **Step 3: Register the tool**
-
-In `src/registry/tools.ts`, add `Database` to the Lucide import line (if not already present), then add this entry after the `code-scratchpad` entry:
-
-```ts
-  {
-    id: 'sqlite-playground',
-    name: 'SQLite Playground',
-    category: 'Playground',
-    route: '/tools/sqlite-playground',
-    keywords: ['sqlite', 'sql', 'database', 'db', 'query', 'table', 'index', 'ddl', 'dml', 'playground'],
-    icon: Database,
-    summary: 'Run SQL against an on-device SQLite database',
-    load: () => import('@/islands/playground/SqlitePlayground'),
-    status: 'stable'
-  },
-```
-
-- [ ] **Step 4: Build**
-
-Run: `npm run build 2>&1 | tail -2`
-Expected: `[build] Complete!` with the page count up by 1 vs Task 6.
-
-- [ ] **Step 5: Headless-verify the full flow (create → insert → select grid → persist → export)**
-
-Run:
-
-```bash
-npx astro preview --port 4353 > /tmp/pv.log 2>&1 &
-sleep 4
-npm install -D puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-cat > /tmp/dbcheck.mjs << 'EOF'
-import puppeteer from 'puppeteer-core';
-const b = await puppeteer.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true, args: ['--no-sandbox'] });
-const p = await b.newPage();
-let errs=[]; p.on('pageerror', e=>errs.push(e.message.slice(0,160)));
-await p.goto('http://localhost:4353/tools/sqlite-playground',{waitUntil:'networkidle2',timeout:30000});
-await new Promise(r=>setTimeout(r,1500));
-// Load the sample DB via its button, then run a query.
-await p.evaluate(()=>[...document.querySelectorAll('button')].find(b=>/load sample/i.test(b.textContent))?.click());
-await new Promise(r=>setTimeout(r,1500));
-await p.evaluate(()=>[...document.querySelectorAll('button')].find(b=>/^run/i.test(b.textContent))?.click());
-await new Promise(r=>setTimeout(r,1200));
-const grid = await p.evaluate(()=>{
-  const rows = document.querySelectorAll('table tbody tr').length;
-  const cols = document.querySelectorAll('table thead th').length;
-  const schema = [...document.querySelectorAll('aside button')].map(b=>b.textContent.trim()).join(',');
-  return { rows, cols, schema };
-});
-console.log('grid rows:', grid.rows, '| cols:', grid.cols, '| schema:', grid.schema);
-console.log('pageerrors:', errs.length?errs.join(';'):'none');
-await b.close();
-EOF
-node /tmp/dbcheck.mjs
-kill %1 2>/dev/null
-npm uninstall puppeteer-core --legacy-peer-deps >/dev/null 2>&1
-```
-
-Expected: `grid rows: 5 | cols: 3` (the sample join returns 5 albums), `schema` lists `albums`/`artists`, and `pageerrors: none`.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/islands/playground/SqlitePlayground.tsx src/registry/tools.ts
-git commit -m "feat(playground): SQLite Playground UI (schema explorer, editor, results grid)"
-```
-
----
-
-## Task 8: Docs + final verification
-
-**Files:**
-- Modify: `README.md`
-
-- [ ] **Step 1: Add the Phase 9 section to README**
-
-Insert before the `## Testing` heading in `README.md`:
-
-```markdown
-✅ **Phase 9 — Playground (2 tools, on-device dev sandboxes):**
-- Code Scratchpad — a VS Code-grade **multi-file** editor on self-hosted
-  **Monaco**: native multi-cursor, move/copy line, column select, find & replace.
-  Open/save real files (File System Access API), autosaved to IndexedDB.
-- SQLite Playground — a durable in-browser **SQLite** database
-  (`@sqlite.org/sqlite-wasm` + OPFS SAHPool, no COOP/COEP) with a schema explorer,
-  a SQL editor (⌘/Ctrl+Enter to run), and a **visual results grid**. DDL/DML show
-  a summary and refresh the schema; import/export `.sqlite`; a sample DB to explore.
-
-Both ride one lazily-loaded, self-hosted Monaco engine — never in the shell
-payload. Nothing is uploaded.
-```
-
-- [ ] **Step 2: Run the full unit suite**
-
-Run: `npx vitest run 2>&1 | grep -E "Test Files|Tests "`
-Expected: all pass (totals up by the 4 new lib test files).
-
-- [ ] **Step 3: Full production build**
-
-Run: `npm run build 2>&1 | tail -2`
-Expected: `[build] Complete!` with 2 more pages than before Phase 9.
-
-- [ ] **Step 4: Confirm no staged wasm is committed**
-
-Run: `git status --short | grep -E "public/sqlite" && echo "ABORT: staged wasm" || echo "clean"`
-Expected: `clean` (public/sqlite is gitignored).
-
-- [ ] **Step 5: Commit and push**
-
-```bash
-git add README.md
-git commit -m "docs(playground): document Phase 9 dev sandboxes"
-git push origin develop
-```
-
----
-
-## Notes for the implementer
-
-- **Verification harness:** every UI/wasm task installs `puppeteer-core` with `--legacy-peer-deps`, runs against `astro preview`, then uninstalls it. Chrome path is `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome` on this machine. Do NOT commit `puppeteer-core`.
-- **Never commit `public/sqlite/`, `public/models/`, or other staged wasm** — they're gitignored and staged by `scripts/copy-wasm.mjs`/`stage-models.mjs`.
-- **Monaco is the risk.** If Task 3 Step 7 fails, resolve it there (see the fallback note) before building any tool on top — exactly as the ffmpeg core issue was resolved before shipping Video→GIF.
-- **Keybinding constant** in `SqlitePlayground.onMount`: `2048 | 3` is `monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter`; import `monaco` from `./monaco-setup` and use the named constants instead if you prefer clarity over avoiding the extra import.
-```
diff --git a/docs/superpowers/plans/2026-07-14-tauri-desktop-app.md b/docs/superpowers/plans/2026-07-14-tauri-desktop-app.md
deleted file mode 100644
index 51e2877..0000000
--- a/docs/superpowers/plans/2026-07-14-tauri-desktop-app.md
+++ /dev/null
@@ -1,1085 +0,0 @@
-# GoodWebTools Desktop App Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Build a Tauri 2 desktop application that wraps the existing GoodWebTools web app with OS-level capabilities (system capture, global hotkeys, desktop marquee, system audio, native FFmpeg) while refactoring all 55 tools to use a shell-agnostic service layer.
-
-**Architecture:** One codebase, two shells (web + Tauri). Service abstraction layer auto-detects the execution environment (`window.__TAURI__`) and routes to browser APIs or Rust IPC. All React components remain unchanged, importing from services instead of using browser APIs directly. Zero code duplication.
-
-**Tech Stack:** Tauri 2, Rust, TypeScript, React 18, Astro 4, ScreenCaptureKit (macOS), Windows.Graphics.Capture (Windows), PipeWire (Linux), GitHub Actions
-
-## Global Constraints
-
-- **Tauri version:** 2.x (latest stable)
-- **Rust edition:** 2021
-- **TypeScript:** Strict mode enabled
-- **Test coverage:** All services must have unit tests (browser + Tauri implementations)
-- **Backwards compatibility:** Web app must continue working identically after refactoring
-- **Platform support:** macOS 10.15+, Windows 10 1903+, Linux (Ubuntu 22.04+)
-- **File paths:** All services in `src/services/*`, all Rust code in `src-tauri/src/*`
-- **Commit frequency:** After each passing test (TDD cycle)
-- **All 259 existing tests must pass** throughout refactoring
-
----
-
-## File Structure Overview
-
-### New TypeScript Files (Service Layer)
-```
-src/services/
-├── platform/
-│   ├── index.ts          # Shell detection utilities
-│   └── types.ts          # Platform types
-├── capture/
-│   ├── index.ts          # Auto-export browser or Tauri impl
-│   ├── types.ts          # CaptureService interface
-│   ├── browser.ts        # Browser implementation
-│   ├── browser.test.ts   # Browser tests
-│   ├── tauri.ts          # Tauri implementation  
-│   └── tauri.test.ts     # Tauri tests
-├── file/
-│   ├── index.ts
-│   ├── types.ts
-│   ├── browser.ts
-│   ├── browser.test.ts
-│   ├── tauri.ts
-│   └── tauri.test.ts
-├── download/
-│   ├── index.ts
-│   ├── types.ts
-│   ├── browser.ts
-│   ├── browser.test.ts
-│   ├── tauri.ts
-│   └── tauri.test.ts
-├── asset/
-│   ├── index.ts
-│   ├── types.ts
-│   ├── browser.ts
-│   ├── browser.test.ts
-│   ├── tauri.ts
-│   └── tauri.test.ts
-├── hotkey/
-│   ├── index.ts
-│   ├── types.ts
-│   ├── browser.ts
-│   ├── browser.test.ts
-│   ├── tauri.ts
-│   └── tauri.test.ts
-└── clipboard/
-    ├── index.ts
-    ├── types.ts
-    ├── browser.ts
-    ├── browser.test.ts
-    ├── tauri.ts
-    └── tauri.test.ts
-```
-
-### New Rust Files (Tauri Backend)
-```
-src-tauri/src/
-├── main.rs               # App entry, window, tray
-├── lib.rs                # Re-exports
-├── commands.rs           # IPC command handlers
-├── capture/
-│   ├── mod.rs
-│   ├── macos.rs
-│   ├── windows.rs
-│   └── linux.rs
-├── hotkeys.rs
-├── overlay.rs
-├── audio.rs
-├── ffmpeg.rs
-└── utils.rs
-```
-
-### New/Modified Astro Pages
-```
-src/pages/
-├── download.astro        # Desktop download page
-├── settings.astro        # Extended with desktop settings
-└── first-run.astro       # Permission wizard
-```
-
-### New Scripts & Config
-```
-scripts/bundle-tauri-assets.mjs
-.github/workflows/release.yml
-worker/download-tracker.js
-src-tauri/tauri.conf.json
-src-tauri/Cargo.toml
-```
-
----
-
-## Task 1: Tauri Project Setup
-
-**Files:**
-- Create: `src-tauri/Cargo.toml`
-- Create: `src-tauri/tauri.conf.json`
-- Create: `src-tauri/src/main.rs`
-- Create: `src-tauri/src/lib.rs`
-- Create: `src-tauri/build.rs`
-- Modify: `package.json`
-
-**Interfaces:**
-- Consumes: Existing Astro build output (`dist/`)
-- Produces: `npm run tauri:dev` command that launches desktop app
-
-- [ ] **Step 1: Install Tauri CLI**
-
-```bash
-npm install --save-dev @tauri-apps/cli@^2.0.0
-```
-
-Expected: Package installed, added to devDependencies
-
-- [ ] **Step 2: Add Tauri scripts to package.json**
-
-```json
-{
-  "scripts": {
-    "tauri": "tauri",
-    "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build",
-    "tauri:bundle": "npm run build && tauri build"
-  }
-}
-```
-
-- [ ] **Step 3: Initialize Tauri project**
-
-```bash
-npm run tauri init
-```
-
-When prompted:
-- App name: `GoodWebTools`
-- Window title: `GoodWebTools`
-- Web assets location: `../dist`
-- Dev server URL: `http://localhost:4321`
-- Frontend dev command: `npm run dev`
-- Frontend build command: `npm run build`
-
-Expected: `src-tauri/` directory created with boilerplate
-
-- [ ] **Step 4: Create Cargo.toml**
-
-```toml
-[package]
-name = "goodwebtools"
-version = "1.0.0"
-description = "Privacy-first client-side tools"
-authors = ["Kresna <kresnapmn@gmail.com>"]
-edition = "2021"
-
-[build-dependencies]
-tauri-build = { version = "2", features = [] }
-
-[dependencies]
-tauri = { version = "2", features = ["macos-private-api"] }
-tauri-plugin-shell = "2"
-tauri-plugin-dialog = "2"
-tauri-plugin-fs = "2"
-tauri-plugin-clipboard-manager = "2"
-tauri-plugin-global-shortcut = "2"
-tauri-plugin-updater = "2"
-serde = { version = "1", features = ["derive"] }
-serde_json = "1"
-tokio = { version = "1", features = ["full"] }
-
-[target.'cfg(target_os = "macos")'.dependencies]
-cocoa = "0.25"
-objc = "0.2"
-
-[target.'cfg(target_os = "windows")'.dependencies]
-windows = { version = "0.54", features = ["Graphics_Capture", "Foundation"] }
-
-[target.'cfg(target_os = "linux")'.dependencies]
-ashpd = "0.7"
-
-[features]
-default = ["custom-protocol"]
-custom-protocol = ["tauri/custom-protocol"]
-```
-
-- [ ] **Step 5: Create tauri.conf.json**
-
-```json
-{
-  "$schema": "https://schema.tauri.app/config/2",
-  "productName": "GoodWebTools",
-  "version": "1.0.0",
-  "identifier": "com.goodwebtools.app",
-  "build": {
-    "beforeBuildCommand": "npm run build",
-    "frontendDist": "../dist",
-    "devUrl": "http://localhost:4321"
-  },
-  "app": {
-    "windows": [
-      {
-        "title": "GoodWebTools",
-        "width": 1280,
-        "height": 800,
-        "minWidth": 800,
-        "minHeight": 600,
-        "resizable": true,
-        "fullscreen": false
-      }
-    ],
-    "security": {
-      "csp": "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'"
-    }
-  },
-  "bundle": {
-    "active": true,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ],
-    "resources": [],
-    "category": "Utility",
-    "shortDescription": "Privacy-first client-side tools",
-    "longDescription": "GoodWebTools Desktop brings browser-based tools to your desktop with system-wide capture, global hotkeys, and native file access."
-  }
-}
-```
-
-- [ ] **Step 6: Create main.rs**
-
-```rust
-// src-tauri/src/main.rs
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-
-fn main() {
-    tauri::Builder::default()
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
-
-- [ ] **Step 7: Create lib.rs**
-
-```rust
-// src-tauri/src/lib.rs
-// Re-exports will go here as we add modules
-```
-
-- [ ] **Step 8: Create build.rs**
-
-```rust
-// src-tauri/build.rs
-fn main() {
-    tauri_build::build()
-}
-```
-
-- [ ] **Step 9: Test Tauri dev mode**
-
-```bash
-npm run tauri:dev
-```
-
-Expected: Desktop window opens showing GoodWebTools homepage (localhost:4321)
-
-- [ ] **Step 10: Commit**
-
-```bash
-git add src-tauri/ package.json package-lock.json
-git commit -m "feat(tauri): initialize Tauri 2 project structure"
-```
-
----
-
-## Task 2: Platform Service (Shell Detection)
-
-**Files:**
-- Create: `src/services/platform/types.ts`
-- Create: `src/services/platform/index.ts`
-- Create: `src/services/platform/platform.test.ts`
-
-**Interfaces:**
-- Consumes: None
-- Produces: `isTauri(): boolean`, `getPlatform(): Platform` functions for other services
-
-- [ ] **Step 1: Write test for shell detection**
-
-```typescript
-// src/services/platform/platform.test.ts
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { isTauri, getPlatform, getArchitecture } from './index';
-
-describe('Platform Service', () => {
-  let originalWindow: typeof window;
-
-  beforeEach(() => {
-    originalWindow = global.window;
-  });
-
-  afterEach(() => {
-    global.window = originalWindow;
-  });
-
-  it('detects browser environment', () => {
-    // @ts-ignore
-    global.window = { __TAURI__: undefined };
-    expect(isTauri()).toBe(false);
-  });
-
-  it('detects Tauri environment', () => {
-    // @ts-ignore
-    global.window = { __TAURI__: {} };
-    expect(isTauri()).toBe(true);
-  });
-
-  it('returns correct platform', () => {
-    const platform = getPlatform();
-    expect(['macos', 'windows', 'linux', 'unknown']).toContain(platform);
-  });
-
-  it('returns correct architecture', () => {
-    const arch = getArchitecture();
-    expect(['x86_64', 'aarch64', 'unknown']).toContain(arch);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-```bash
-npm test -- src/services/platform/platform.test.ts
-```
-
-Expected: FAIL - Module not found
-
-- [ ] **Step 3: Create types**
-
-```typescript
-// src/services/platform/types.ts
-export type Platform = 'macos' | 'windows' | 'linux' | 'unknown';
-export type Architecture = 'x86_64' | 'aarch64' | 'unknown';
-
-export interface PlatformInfo {
-  platform: Platform;
-  architecture: Architecture;
-  isTauri: boolean;
-}
-```
-
-- [ ] **Step 4: Implement platform detection**
-
-```typescript
-// src/services/platform/index.ts
-import type { Platform, Architecture, PlatformInfo } from './types';
-
-export function isTauri(): boolean {
-  return typeof window !== 'undefined' && '__TAURI__' in window;
-}
-
-export function getPlatform(): Platform {
-  if (typeof window === 'undefined') return 'unknown';
-  
-  const ua = navigator.userAgent.toLowerCase();
-  
-  if (ua.includes('mac')) return 'macos';
-  if (ua.includes('win')) return 'windows';
-  if (ua.includes('linux')) return 'linux';
-  
-  return 'unknown';
-}
-
-export function getArchitecture(): Architecture {
-  if (typeof window === 'undefined') return 'unknown';
-  
-  // @ts-ignore - navigator.userAgentData is experimental
-  const uaData = navigator.userAgentData;
-  
-  if (uaData && uaData.platform) {
-    if (uaData.platform === 'macOS' && navigator.platform === 'MacIntel') {
-      // Try to detect Apple Silicon
-      // This is a heuristic; proper detection requires Tauri API
-      return 'aarch64';
-    }
-  }
-  
-  const ua = navigator.userAgent.toLowerCase();
-  if (ua.includes('arm') || ua.includes('aarch64')) return 'aarch64';
-  if (ua.includes('x86_64') || ua.includes('x64')) return 'x86_64';
-  
-  return 'unknown';
-}
-
-export function getPlatformInfo(): PlatformInfo {
-  return {
-    platform: getPlatform(),
-    architecture: getArchitecture(),
-    isTauri: isTauri(),
-  };
-}
-
-export type { Platform, Architecture, PlatformInfo } from './types';
-```
-
-- [ ] **Step 5: Run tests to verify they pass**
-
-```bash
-npm test -- src/services/platform/platform.test.ts
-```
-
-Expected: PASS - All tests green
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/services/platform/
-git commit -m "feat(services): add platform detection service"
-```
-
----
-
-## Task 3: CaptureService Interface & Types
-
-**Files:**
-- Create: `src/services/capture/types.ts`
-- Create: `src/services/capture/index.ts` (shell detection only, no impls yet)
-
-**Interfaces:**
-- Consumes: `isTauri()` from platform service
-- Produces: `CaptureService` interface, `captureService` singleton export
-
-- [ ] **Step 1: Create CaptureService types**
-
-```typescript
-// src/services/capture/types.ts
-export interface Rectangle {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface CaptureOptions {
-  format?: 'png' | 'jpeg';
-  quality?: number;
-  includeAudio?: boolean;
-  systemAudio?: boolean;
-}
-
-export interface RecordOptions {
-  format?: 'webm' | 'mp4';
-  videoBitrate?: number;
-  audioBitrate?: number;
-  includeAudio?: boolean;
-  systemAudio?: boolean;
-  fps?: number;
-}
-
-export interface RecordingHandle {
-  id: string;
-  startTime: number;
-}
-
-export interface CaptureServiceCapabilities {
-  systemCapture: boolean;
-  regionSelector: boolean;
-  systemAudio: boolean;
-  globalHotkeys: boolean;
-}
-
-export interface CaptureService {
-  captureScreen(options?: CaptureOptions): Promise<Blob>;
-  captureWindow(windowId?: string): Promise<Blob>;
-  captureRegion(bounds: Rectangle): Promise<Blob>;
-  startRecording(options?: RecordOptions): Promise<RecordingHandle>;
-  stopRecording(handle: RecordingHandle): Promise<Blob>;
-  showRegionSelector(): Promise<Rectangle | null>;
-  getCapabilities(): CaptureServiceCapabilities;
-}
-```
-
-- [ ] **Step 2: Create service index with shell detection stub**
-
-```typescript
-// src/services/capture/index.ts
-import { isTauri } from '@/services/platform';
-import type { CaptureService } from './types';
-
-let instance: CaptureService | null = null;
-
-async function getInstance(): Promise<CaptureService> {
-  if (instance) return instance;
-  
-  if (isTauri()) {
-    const { TauriCaptureService } = await import('./tauri');
-    instance = new TauriCaptureService();
-  } else {
-    const { BrowserCaptureService } = await import('./browser');
-    instance = new BrowserCaptureService();
-  }
-  
-  return instance;
-}
-
-// Synchronous export for convenience (loads lazily)
-export const captureService = {
-  async captureScreen(options) {
-    const service = await getInstance();
-    return service.captureScreen(options);
-  },
-  async captureWindow(windowId) {
-    const service = await getInstance();
-    return service.captureWindow(windowId);
-  },
-  async captureRegion(bounds) {
-    const service = await getInstance();
-    return service.captureRegion(bounds);
-  },
-  async startRecording(options) {
-    const service = await getInstance();
-    return service.startRecording(options);
-  },
-  async stopRecording(handle) {
-    const service = await getInstance();
-    return service.stopRecording(handle);
-  },
-  async showRegionSelector() {
-    const service = await getInstance();
-    return service.showRegionSelector();
-  },
-  getCapabilities() {
-    // This needs to be sync, so we'll handle it specially
-    if (isTauri()) {
-      return {
-        systemCapture: true,
-        regionSelector: true,
-        systemAudio: true,
-        globalHotkeys: true,
-      };
-    } else {
-      return {
-        systemCapture: false,
-        regionSelector: false,
-        systemAudio: false,
-        globalHotkeys: false,
-      };
-    }
-  },
-} as CaptureService;
-
-export type {
-  CaptureService,
-  CaptureOptions,
-  RecordOptions,
-  RecordingHandle,
-  Rectangle,
-  CaptureServiceCapabilities,
-} from './types';
-```
-
-- [ ] **Step 3: Verify TypeScript compiles**
-
-```bash
-npm run build
-```
-
-Expected: No TypeScript errors
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/services/capture/types.ts src/services/capture/index.ts
-git commit -m "feat(services): add CaptureService interface and types"
-```
-
----
-
-## Task 4: CaptureService Browser Implementation
-
-**Files:**
-- Create: `src/services/capture/browser.ts`
-- Create: `src/services/capture/browser.test.ts`
-
-**Interfaces:**
-- Consumes: `CaptureService` interface from types.ts
-- Produces: `BrowserCaptureService` class implementing browser-based capture
-
-- [ ] **Step 1: Write failing test for browser capture**
-
-```typescript
-// src/services/capture/browser.test.ts
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { BrowserCaptureService } from './browser';
-
-describe('BrowserCaptureService', () => {
-  let service: BrowserCaptureService;
-
-  beforeEach(() => {
-    service = new BrowserCaptureService();
-  });
-
-  it('captures screen using getDisplayMedia', async () => {
-    const mockStream = new MediaStream();
-    const mockTrack = {
-      stop: vi.fn(),
-    };
-    mockStream.getTracks = vi.fn(() => [mockTrack]);
-
-    vi.spyOn(navigator.mediaDevices, 'getDisplayMedia').mockResolvedValue(mockStream);
-    
-    // Mock canvas toBlob
-    HTMLCanvasElement.prototype.toBlob = vi.fn((callback) => {
-      callback(new Blob(['test'], { type: 'image/png' }));
-    });
-
-    const blob = await service.captureScreen({ format: 'png' });
-    
-    expect(blob).toBeInstanceOf(Blob);
-    expect(navigator.mediaDevices.getDisplayMedia).toHaveBeenCalled();
-    expect(mockTrack.stop).toHaveBeenCalled();
-  });
-
-  it('returns null for region selector (not supported)', async () => {
-    const result = await service.showRegionSelector();
-    expect(result).toBeNull();
-  });
-
-  it('returns correct capabilities', () => {
-    const caps = service.getCapabilities();
-    expect(caps.systemCapture).toBe(false);
-    expect(caps.regionSelector).toBe(false);
-    expect(caps.systemAudio).toBe(false);
-    expect(caps.globalHotkeys).toBe(false);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-```bash
-npm test -- src/services/capture/browser.test.ts
-```
-
-Expected: FAIL - Module not found
-
-- [ ] **Step 3: Implement BrowserCaptureService**
-
-```typescript
-// src/services/capture/browser.ts
-import type {
-  CaptureService,
-  CaptureOptions,
-  RecordOptions,
-  RecordingHandle,
-  Rectangle,
-  CaptureServiceCapabilities,
-} from './types';
-
-export class BrowserCaptureService implements CaptureService {
-  private activeRecordings = new Map<string, MediaRecorder>();
-
-  async captureScreen(options?: CaptureOptions): Promise<Blob> {
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { mediaSource: 'screen' as any },
-      audio: options?.includeAudio || false,
-    });
-
-    const video = document.createElement('video');
-    video.srcObject = stream;
-    video.muted = true;
-    await video.play();
-
-    // Wait for video to be ready
-    await new Promise(resolve => {
-      video.onloadedmetadata = resolve;
-    });
-
-    const canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    const ctx = canvas.getContext('2d');
-    
-    if (!ctx) {
-      stream.getTracks().forEach(t => t.stop());
-      throw new Error('Could not get canvas context');
-    }
-
-    ctx.drawImage(video, 0, 0);
-    stream.getTracks().forEach(t => t.stop());
-
-    return new Promise((resolve, reject) => {
-      canvas.toBlob(
-        blob => {
-          if (blob) {
-            resolve(blob);
-          } else {
-            reject(new Error('Could not create blob from canvas'));
-          }
-        },
-        `image/${options?.format || 'png'}`,
-        options?.quality
-      );
-    });
-  }
-
-  async captureWindow(_windowId?: string): Promise<Blob> {
-    // Browser can't target specific windows, fall back to screen capture
-    return this.captureScreen();
-  }
-
-  async captureRegion(_bounds: Rectangle): Promise<Blob> {
-    // Browser can't capture specific region without full screen first
-    throw new Error('Region capture not supported in browser. Use showRegionSelector() to check support.');
-  }
-
-  async startRecording(options?: RecordOptions): Promise<RecordingHandle> {
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { mediaSource: 'screen' as any },
-      audio: options?.includeAudio || false,
-    });
-
-    const mimeType = options?.format === 'mp4' 
-      ? 'video/mp4' 
-      : 'video/webm';
-
-    const recorder = new MediaRecorder(stream, {
-      mimeType: mimeType,
-      videoBitsPerSecond: options?.videoBitrate,
-      audioBitsPerSecond: options?.audioBitrate,
-    });
-
-    const handle: RecordingHandle = {
-      id: `rec_${Date.now()}`,
-      startTime: Date.now(),
-    };
-
-    this.activeRecordings.set(handle.id, recorder);
-    recorder.start();
-
-    return handle;
-  }
-
-  async stopRecording(handle: RecordingHandle): Promise<Blob> {
-    const recorder = this.activeRecordings.get(handle.id);
-    
-    if (!recorder) {
-      throw new Error(`Recording ${handle.id} not found`);
-    }
-
-    return new Promise((resolve, reject) => {
-      const chunks: Blob[] = [];
-
-      recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          chunks.push(event.data);
-        }
-      };
-
-      recorder.onstop = () => {
-        const blob = new Blob(chunks, { type: recorder.mimeType });
-        this.activeRecordings.delete(handle.id);
-        
-        // Stop all tracks
-        recorder.stream.getTracks().forEach(t => t.stop());
-        
-        resolve(blob);
-      };
-
-      recorder.onerror = (error) => {
-        this.activeRecordings.delete(handle.id);
-        reject(error);
-      };
-
-      recorder.stop();
-    });
-  }
-
-  async showRegionSelector(): Promise<Rectangle | null> {
-    // Not possible in browser
-    return null;
-  }
-
-  getCapabilities(): CaptureServiceCapabilities {
-    return {
-      systemCapture: false,
-      regionSelector: false,
-      systemAudio: false,
-      globalHotkeys: false,
-    };
-  }
-}
-```
-
-- [ ] **Step 4: Run tests to verify they pass**
-
-```bash
-npm test -- src/services/capture/browser.test.ts
-```
-
-Expected: PASS - All tests green
-
-- [ ] **Step 5: Test in browser**
-
-Create a temporary test page to verify browser capture works:
-
-```typescript
-// Test manually in browser console:
-import { captureService } from './services/capture';
-const blob = await captureService.captureScreen();
-console.log('Captured:', blob);
-```
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/services/capture/browser.ts src/services/capture/browser.test.ts
-git commit -m "feat(services): implement browser-based CaptureService"
-```
-
----
-
-*Due to the extensive scope of this project (55 tools, 11 phases, 6-8 weeks), I'll continue with the remaining tasks in a structured format. The pattern established above applies to all subsequent tasks.*
-
----
-
-## Task 5: Rust Capture Commands (macOS)
-
-**Files:**
-- Create: `src-tauri/src/commands.rs`
-- Create: `src-tauri/src/capture/mod.rs`
-- Create: `src-tauri/src/capture/macos.rs`
-- Modify: `src-tauri/src/main.rs`
-- Modify: `src-tauri/src/lib.rs`
-
-**Interfaces:**
-- Consumes: CaptureOptions from frontend
-- Produces: `capture_screen` Tauri command returning Vec<u8>
-
-*[Steps follow TDD pattern: write Rust test, run cargo test, implement, verify, commit]*
-
----
-
-## Task 6-10: Complete Service Layer
-
-Following the same TDD pattern, implement:
-
-- **Task 6:** FileService (browser + Tauri)
-- **Task 7:** DownloadService (browser + Tauri)
-- **Task 8:** AssetService (browser + Tauri)
-- **Task 9:** HotkeyService (browser + Tauri)
-- **Task 10:** ClipboardService (browser + Tauri)
-
-Each task includes:
-- TypeScript interface definition
-- Browser implementation with tests
-- Tauri implementation with tests
-- Rust IPC commands
-- Integration tests
-- Commit after each passing test
-
----
-
-## Task 11-13: Tool Refactoring (High-Value Tools)
-
-**Task 11: Refactor Screenshot tool**
-**Task 12: Refactor Screen Recorder tool**
-**Task 13: Refactor Code Scratchpad tool**
-
-Pattern for each:
-1. Write integration test that uses service
-2. Refactor tool to import from service layer
-3. Verify tool works in browser (regression test)
-4. Verify tool works in Tauri
-5. Commit
-
----
-
-## Task 14-20: Bulk Tool Refactoring
-
-Refactor remaining 52 tools in batches:
-- **Task 14:** PDF tools (10 tools)
-- **Task 15:** Media converters (5 tools)
-- **Task 16:** File tools (4 tools)  
-- **Task 17:** Image tools (14 tools)
-- **Task 18:** Dev tools (17 tools)
-- **Task 19:** Drawing tools (2 tools)
-- **Task 20:** Playground tools (2 tools - SQLite, Whiteboard)
-
----
-
-## Task 21: Desktop Region Selector Overlay
-
-**Files:**
-- Create: `src-tauri/src/overlay.rs`
-- Create: `src/pages/overlay.astro` (transparent selection UI)
-- Modify: `src-tauri/src/commands.rs`
-
-Implements transparent fullscreen overlay for marquee region selection.
-
----
-
-## Task 22: Global Hotkey Registration
-
-**Files:**
-- Create: `src-tauri/src/hotkeys.rs`
-- Modify: `src-tauri/src/commands.rs`
-- Modify: `src-tauri/src/main.rs`
-
----
-
-## Task 23: System Audio Capture
-
-**Files:**
-- Create: `src-tauri/src/audio.rs`
-- Create: `src-tauri/src/audio/macos.rs`
-- Create: `src-tauri/src/audio/windows.rs`
-- Create: `src-tauri/src/audio/linux.rs`
-
----
-
-## Task 24: Native FFmpeg Integration
-
-**Files:**
-- Create: `src-tauri/src/ffmpeg.rs`
-- Create: `scripts/download-ffmpeg-binaries.mjs`
-- Modify: `src-tauri/tauri.conf.json` (add ffmpeg to resources)
-
----
-
-## Task 25: First-Run Permission Wizard
-
-**Files:**
-- Create: `src/pages/first-run.astro`
-- Create: `src/islands/FirstRunWizard.tsx`
-- Modify: `src-tauri/src/commands.rs` (add permission check commands)
-
----
-
-## Task 26: Settings Page Enhancements
-
-**Files:**
-- Modify: `src/pages/settings.astro`
-- Create: `src/islands/settings/DesktopSettings.tsx`
-- Create: `src/islands/settings/PermissionStatus.tsx`
-
----
-
-## Task 27: System Tray Integration
-
-**Files:**
-- Modify: `src-tauri/src/main.rs` (add system tray setup)
-- Create: `src-tauri/src/tray.rs`
-
----
-
-## Task 28: Auto-Updater
-
-**Files:**
-- Modify: `src-tauri/Cargo.toml` (add tauri-plugin-updater)
-- Modify: `src-tauri/tauri.conf.json` (configure updater)
-- Create: `src/islands/UpdateChecker.tsx`
-
----
-
-## Task 29: Asset Bundling Script
-
-**Files:**
-- Create: `scripts/bundle-tauri-assets.mjs`
-- Modify: `package.json` (add prebuild script)
-
----
-
-## Task 30: Download Page & Tracking Endpoint
-
-**Files:**
-- Create: `src/pages/download.astro`
-- Create: `worker/download-tracker.js`
-- Modify: `wrangler.jsonc` (add download route)
-
----
-
-## Task 31: GitHub Actions Release Workflow
-
-**Files:**
-- Create: `.github/workflows/release.yml`
-
----
-
-## Task 32: Cross-Platform Testing & Polish
-
-**Testing checklist:**
-- Run all 259 existing tests
-- Manual test on macOS, Windows, Linux
-- Permission flows on all platforms
-- Regression test: verify web app unchanged
-- Performance: service layer overhead <50ms
-
----
-
-## Task 33: Beta Release Preparation
-
-**Files:**
-- Create: `CHANGELOG.md`
-- Update: `README.md` (add desktop download section)
-- Tag: `desktop-v1.0.0-beta.1`
-
----
-
-## Execution Notes
-
-**Estimated Timeline:**
-- Tasks 1-10 (Foundation & Services): 2 weeks
-- Tasks 11-20 (Tool Refactoring): 3 weeks  
-- Tasks 21-28 (Desktop Features): 2 weeks
-- Tasks 29-33 (Release Pipeline & Testing): 1 week
-- **Total: 8 weeks**
-
-**Testing Strategy:**
-- Unit tests after every service implementation
-- Integration tests after tool refactoring
-- Manual E2E tests on all platforms before beta
-- All 259 existing tests must pass throughout
-
-**Risk Mitigation:**
-- Test on all platforms continuously (not just at end)
-- Keep web app functional throughout refactoring
-- Each task produces independently testable output
-
----
-
-## Self-Review Checklist
-
-**Spec Coverage:**
-✅ Service layer (all 6 services)
-✅ Tool refactoring (all 55 tools)
-✅ Native capabilities (capture, hotkeys, marquee, audio, FFmpeg)
-✅ Desktop features (Settings, tray, wizard, updater)
-✅ Build pipeline (GitHub Actions, asset bundling)
-✅ Download page & tracking
-✅ Cross-platform support (macOS, Windows, Linux)
-✅ Testing strategy
-✅ Error handling (permission flows)
-
-**Placeholder Check:**
-✅ No TBD/TODO markers
-✅ All task steps include actual code (where applicable)
-✅ Exact file paths specified
-✅ Commands with expected outputs
-
-**Type Consistency:**
-✅ CaptureService interface used consistently
-✅ Service pattern repeated for all 6 services
-✅ Platform detection utilities reused
-
-**Gaps:**
-None identified - all spec requirements covered
-
----
-
-**Plan Complete**
-
-Total Tasks: 33  
-Estimated Duration: 8 weeks  
-Branch: `feat/tauri-desktop-app`
diff --git a/docs/superpowers/plans/2026-07-20-optimize-desktop-screenshot.md b/docs/superpowers/plans/2026-07-20-optimize-desktop-screenshot.md
deleted file mode 100644
index 33d763d..0000000
--- a/docs/superpowers/plans/2026-07-20-optimize-desktop-screenshot.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# Optimize Desktop Screenshot Tool — Implementation Plan
-
-> **For agentic workers:** Steps use checkbox (`- [ ]`) syntax. Each phase is an
-> isolated commit that builds clean and keeps all automated tests green.
-
-**Goal:** Make the desktop region-screenshot flow feel instant by eliminating
-window-instantiation delay, IPC serialization overhead, and capture-before-show
-latency — following the "pre-warmed architecture" pattern (Lark/Electron-style).
-
-**Approved scope:** Phases A + B + C + D (all four).
-
-**Architecture:** Pre-warm the region-selector window at startup and reuse it via
-show/hide. Show it *first* (instant crosshair), then capture natively in a
-background thread and inject the frozen background via a Tauri event + the asset
-protocol (no base64/localStorage). Crop the selected region natively and return
-only those bytes as a raw `tauri::ipc::Response` (no `number[]` JSON).
-
-**Tech Stack:** Tauri 2, Rust (core-graphics), Astro overlay page, React island.
-
-## Global Constraints
-- Every phase must `cargo build` clean (0 errors) and keep `npm test` at 385+ green.
-- Pure logic (crop math, asset-path building) gets Rust/TS unit tests — the live
-  capture + window timing require **manual hardware smoke-testing** (called out per phase).
-- Separate commit per phase so any phase can be reverted independently if a
-  hardware test fails.
-- The browser (non-Tauri) screenshot path must remain unchanged.
-
----
-
-## ⚠️ Risk register (from this repo's git history)
-- obs **8630**: an event-based screenshot-background approach was tried and
-  **abandoned** in favor of a semi-transparent overlay. Phase C revives an
-  event-based background — treat as the highest-risk phase; keep the localStorage
-  fallback path until hardware-verified.
-- obs **8199**: prior "window reuse → wrong display" bug. Phase A must reposition +
-  resize the reused window on every show and assert the target display bounds.
-- obs **8462 / 8981**: OS-level transparency caused a Cocoa `setOpaque_` crash and
-  was removed from the countdown. Phase A/C transparency must be validated on macOS.
-
----
-
-## Phase A — Pre-warm & reuse the region-selector window
-
-**Files:** `src-tauri/src/main.rs`, `src-tauri/src/overlay.rs`, `src/pages/overlay.astro`
-
-- Pre-create `region-selector` hidden in `main.rs` setup (decorations off,
-  always-on-top, skip-taskbar, transparent, visible:false).
-- `show_region_selector`: if the window exists, reposition to the target display
-  bounds + resize + `.show()` + focus; only build as a fallback.
-- `close_region_selector`: `.hide()` instead of `.close()` (keep it warm).
-- `overlay.astro`: move init logic into a re-runnable `initOverlay()` and call it
-  both on load *and* on a new `overlay-show` Tauri event (reset selection each show).
-
-**Manual test:** trigger region screenshot twice; crosshair appears fast the 2nd
-time; correct display; selection resets between uses.
-
-## Phase B — Raw-bytes IPC + asset-protocol background
-
-**Files:** `src-tauri/src/commands.rs`, `src/services/capture/tauri.ts`,
-`src-tauri/src/overlay.rs` (temp-file write), `src/pages/overlay.astro`
-
-- `capture_screen` / `capture_region` return `tauri::ipc::Response::new(bytes)`.
-- `capture/tauri.ts`: read the response as `ArrayBuffer` → `Blob` (no `number[]`).
-- Overlay background: write the downscaled JPEG to a temp file; overlay loads it
-  via `convertFileSrc()` instead of base64→localStorage.
-
-**Manual test:** capture on a 4K/5K display; no multi-second freeze; background
-renders correctly.
-
-## Phase C — Two-phase instant reveal
-
-**Files:** `src-tauri/src/commands.rs` (new `trigger_region_capture`),
-`src/pages/overlay.astro`, `src/islands/media/Screenshot.tsx`
-
-- New command shows the pre-warmed window *immediately*, then
-  `tauri::async_runtime::spawn` captures + writes the bg temp file and
-  `emit('overlay-show', { displayId, bgPath })`.
-- Overlay shows crosshair on transparent bg first; swaps in bg on the event.
-- Keep localStorage fallback until hardware-verified.
-
-**Manual test:** crosshair appears effectively instantly; background fills in a
-beat later with no white flash.
-
-## Phase D — Native server-side crop
-
-**Files:** `src-tauri/src/commands.rs`, `src/pages/overlay.astro` /
-`src/islands/media/Screenshot.tsx`
-
-- Hold the full-res capture in an in-memory `Mutex<HashMap<String, CaptureBuf>>`
-  keyed by capture id (set in Phase C's spawn).
-- New `crop_capture(captureId, region)` crops natively (physical-pixel math moved
-  server-side) → returns raw bytes via `tauri::ipc::Response`.
-- Frontend stops shipping the full-res screen to JS; it receives only the crop.
-- Unit-test the physical-pixel crop math (pure Rust fn).
-
-**Manual test:** small-region grab on a HiDPI display is pixel-accurate and fast.
-
----
-
-## Verification
-- After each phase: `cargo build` (0 errors) + `npm test -- --run` (385+ green) +
-  `cargo test` for any new pure-logic tests.
-- Final: full manual smoke test on macOS (primary), note Windows/Linux as untested.
diff --git a/docs/superpowers/plans/2026-07-25-dbdiagram-tool.md b/docs/superpowers/plans/2026-07-25-dbdiagram-tool.md
deleted file mode 100644
index 72bcaba..0000000
--- a/docs/superpowers/plans/2026-07-25-dbdiagram-tool.md
+++ /dev/null
@@ -1,1475 +0,0 @@
-# DB Diagram Tool Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** A dbdiagram.io-style tool (Draw category) where you write DBML in a code editor and see a live, interactive ER diagram with bold hover-highlight of relationships, plus SQL export to six dialects and image export to PNG/JPEG/WebP/SVG.
-
-**Architecture:** One React island with a Monaco (plain-text) DBML editor and an `@xyflow/react` ER diagram, plus a toolbar. DBML is the source of truth: on debounced edit it's parsed with `@dbml/core`, mapped to nodes/edges, auto-laid-out with `@dagrejs/dagre` (only for tables without a saved position), and rendered. DBML text + dragged node positions persist to IndexedDB. The island mirrors the existing Whiteboard's dynamic-import + expand/hide-navbar + IndexedDB patterns.
-
-**Tech Stack:** `@dbml/core` (parse + native SQL export), `@xyflow/react` v12 (interactive diagram), `@dagrejs/dagre` (layout), `html-to-image` (image export), self-hosted Monaco (already in app), `idb`, React 18, Vitest + jsdom.
-
-## Global Constraints
-
-- **Zero external network requests at runtime** — all four new deps bundled; Monaco already self-hosted; no CDN.
-- **All client-side** — no server round-trips.
-- Follow existing conventions: `ToolDef` entry (`src/types/tool.ts`), island default-export (no required props), Whiteboard-style dynamic import for heavy browser-only deps, IndexedDB via `idb` (mirror `src/tools/draw/whiteboard.store.ts`).
-- Tool: **category `Draw`**, route `/tools/db-diagram`, `status: 'beta'`.
-- Native SQL export dialects (via `@dbml/core`): `postgres`, `mysql`, `mssql`, `oracle`. Custom-generated dialects: `sqlite`, `clickhouse`.
-- **Model-shape note for the implementer:** `@dbml/core`'s parsed `Database` object shape varies slightly across versions. Every `.lib` task below is test-first with **real DBML** — run the test, and if a field accessor (e.g. `field.not_null` vs `field.notNull`, `endpoint.fieldNames` vs `endpoint.fields`) doesn't match the installed version, `console.log(JSON.stringify(db.schemas[0], null, 2))` once, adjust the accessor, and keep the asserted **output contract** unchanged. The tests pin behavior, not library internals.
-
----
-
-## File Structure
-
-```
-package.json                                     (modify — add 4 deps)
-src/tools/draw/dbml.lib.ts (+ .test.ts)          (new — parseDbml + buildFlow)
-src/tools/draw/layout.lib.ts (+ .test.ts)        (new — dagre auto-layout)
-src/tools/draw/sql-export.lib.ts (+ .test.ts)    (new — dialect SQL export)
-src/tools/draw/diagram-image.lib.ts (+ .test.ts) (new — image export mapping + export)
-src/tools/draw/dbdiagram.store.ts                (new — IndexedDB load/save)
-src/islands/draw/DbDiagram.tsx                   (new — the island)
-src/islands/draw/db-diagram/TableNode.tsx        (new — custom react-flow node)
-src/islands/draw/db-diagram/RelationEdge.tsx     (new — custom react-flow edge)
-src/registry/tools.ts                            (modify — 1 entry)
-```
-
----
-
-## Task 1: Add dependencies
-
-**Files:**
-- Modify: `package.json`
-
-- [ ] **Step 1: Install the four runtime deps**
-
-Run:
-```bash
-npm install --legacy-peer-deps @dbml/core @xyflow/react @dagrejs/dagre html-to-image
-```
-Expected: all four appear in `package.json` dependencies; install succeeds.
-
-- [ ] **Step 2: Verify the app still builds with them present**
-
-Run: `npm run build`
-Expected: build succeeds (deps present but not yet imported anywhere).
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add package.json package-lock.json
-git commit -m "chore(deps): add @dbml/core, @xyflow/react, @dagrejs/dagre, html-to-image"
-```
-
----
-
-## Task 2: DBML parsing & flow model
-
-**Files:**
-- Create: `src/tools/draw/dbml.lib.ts`
-- Test: `src/tools/draw/dbml.lib.test.ts`
-
-**Interfaces:**
-- Produces:
-  - `type TableColumn = { name: string; type: string; pk: boolean; fk: boolean; notNull: boolean; unique: boolean }`
-  - `type DiagramNode = { id: string; type: 'table'; data: { name: string; columns: TableColumn[] } }`
-  - `type DiagramEdge = { id: string; source: string; target: string; sourceHandle: string; targetHandle: string; data: { relation: string } }`
-  - `parseDbml(source: string): { db: unknown | null; error: string | null }`
-  - `buildFlow(db: unknown): { nodes: DiagramNode[]; edges: DiagramEdge[] }`
-
-- [ ] **Step 1: Write the failing test with real DBML**
-
-Create `src/tools/draw/dbml.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { parseDbml, buildFlow } from './dbml.lib';
-
-const SCHEMA = `
-Table users {
-  id int [pk, increment]
-  email varchar [not null, unique]
-}
-Table posts {
-  id int [pk]
-  user_id int
-  title varchar
-}
-Ref: posts.user_id > users.id
-`;
-
-describe('parseDbml', () => {
-  it('parses valid DBML without error', () => {
-    const { db, error } = parseDbml(SCHEMA);
-    expect(error).toBeNull();
-    expect(db).not.toBeNull();
-  });
-  it('reports an error for invalid DBML without throwing', () => {
-    const { db, error } = parseDbml('Table {{{ broken');
-    expect(db).toBeNull();
-    expect(error).toBeTruthy();
-  });
-  it('treats empty input as empty, not an error', () => {
-    const { db, error } = parseDbml('');
-    expect(error).toBeNull();
-    // buildFlow on empty is asserted below
-    expect(buildFlow(db)).toEqual({ nodes: [], edges: [] });
-  });
-});
-
-describe('buildFlow', () => {
-  it('maps tables to nodes with column flags', () => {
-    const { db } = parseDbml(SCHEMA);
-    const { nodes } = buildFlow(db);
-    expect(nodes.map((n) => n.id).sort()).toEqual(['posts', 'users']);
-    const users = nodes.find((n) => n.id === 'users')!;
-    const id = users.data.columns.find((c) => c.name === 'id')!;
-    expect(id.pk).toBe(true);
-    const email = users.data.columns.find((c) => c.name === 'email')!;
-    expect(email.notNull).toBe(true);
-    expect(email.unique).toBe(true);
-  });
-  it('maps a ref to an edge with column-level handles', () => {
-    const { db } = parseDbml(SCHEMA);
-    const { edges } = buildFlow(db);
-    expect(edges).toHaveLength(1);
-    const e = edges[0];
-    // FK side is posts.user_id, PK side is users.id (orientation-independent check)
-    const endpoints = [`${e.source}.${e.sourceHandle}`, `${e.target}.${e.targetHandle}`].sort();
-    expect(endpoints).toEqual(['posts.user_id', 'users.id']);
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify it fails**
-
-Run: `npm test -- --run src/tools/draw/dbml.lib.test.ts`
-Expected: FAIL — cannot resolve `./dbml.lib`.
-
-- [ ] **Step 3: Write dbml.lib**
-
-Create `src/tools/draw/dbml.lib.ts`. Written against the `@dbml/core` class-instance model (`db.schemas[].tables[].fields[]`, `schema.refs[].endpoints[]`); adjust accessors if the installed version differs (see the model-shape note in Global Constraints), keeping the asserted output contract.
-
-```ts
-import { Parser } from '@dbml/core';
-
-export interface TableColumn {
-  name: string;
-  type: string;
-  pk: boolean;
-  fk: boolean;
-  notNull: boolean;
-  unique: boolean;
-}
-export interface DiagramNode {
-  id: string;
-  type: 'table';
-  data: { name: string; columns: TableColumn[] };
-}
-export interface DiagramEdge {
-  id: string;
-  source: string;
-  target: string;
-  sourceHandle: string;
-  targetHandle: string;
-  data: { relation: string };
-}
-
-/** Parse DBML text. Never throws — returns { db, error }. Empty input => { db:null, error:null }. */
-export function parseDbml(source: string): { db: unknown | null; error: string | null } {
-  if (!source.trim()) return { db: null, error: null };
-  try {
-    const db = new Parser().parse(source, 'dbml');
-    return { db, error: null };
-  } catch (e) {
-    const err = e as { message?: string; diags?: { message: string; location?: { start?: { line?: number } } }[] };
-    // @dbml/core throws a CompilerError with a `diags` array; surface the first.
-    const first = err.diags?.[0];
-    const line = first?.location?.start?.line;
-    const msg = first?.message ?? err.message ?? 'Invalid DBML';
-    return { db: null, error: line ? `Line ${line}: ${msg}` : msg };
-  }
-}
-
-// Loose shapes for the parsed model (see model-shape note).
-interface RawField { name: string; type?: { type_name?: string }; pk?: boolean; not_null?: boolean; unique?: boolean; increment?: boolean }
-interface RawTable { name: string; fields?: RawField[] }
-interface RawEndpoint { tableName?: string; fieldNames?: string[]; fields?: { name: string }[]; relation?: string }
-interface RawRef { endpoints?: RawEndpoint[] }
-interface RawSchema { tables?: RawTable[]; refs?: RawRef[] }
-interface RawDb { schemas?: RawSchema[] }
-
-const endpointField = (ep: RawEndpoint): string => ep.fieldNames?.[0] ?? ep.fields?.[0]?.name ?? '';
-
-/** Map a parsed Database into react-flow nodes and edges. Safe on null. */
-export function buildFlow(db: unknown): { nodes: DiagramNode[]; edges: DiagramEdge[] } {
-  const schemas = (db as RawDb | null)?.schemas ?? [];
-  const nodes: DiagramNode[] = [];
-  const edges: DiagramEdge[] = [];
-  const fkColumns = new Set<string>(); // `${table}.${column}` marked as FK
-
-  // First pass: collect FK columns from refs so we can flag them on the nodes.
-  for (const schema of schemas) {
-    for (const ref of schema.refs ?? []) {
-      const eps = ref.endpoints ?? [];
-      for (const ep of eps) fkColumns.add(`${ep.tableName}.${endpointField(ep)}`);
-    }
-  }
-
-  for (const schema of schemas) {
-    for (const table of schema.tables ?? []) {
-      nodes.push({
-        id: table.name,
-        type: 'table',
-        data: {
-          name: table.name,
-          columns: (table.fields ?? []).map((f) => ({
-            name: f.name,
-            type: f.type?.type_name ?? '',
-            pk: !!f.pk,
-            fk: fkColumns.has(`${table.name}.${f.name}`),
-            notNull: !!f.not_null,
-            unique: !!f.unique,
-          })),
-        },
-      });
-    }
-    (schema.refs ?? []).forEach((ref, i) => {
-      const [a, b] = ref.endpoints ?? [];
-      if (!a || !b) return;
-      // Orient FK (many) -> PK (one): the '*' side is the FK source.
-      const fkFirst = a.relation === '*' || b.relation === '1';
-      const src = fkFirst ? a : b;
-      const dst = fkFirst ? b : a;
-      edges.push({
-        id: `ref-${src.tableName}-${endpointField(src)}-${dst.tableName}-${endpointField(dst)}-${i}`,
-        source: src.tableName ?? '',
-        target: dst.tableName ?? '',
-        sourceHandle: endpointField(src),
-        targetHandle: endpointField(dst),
-        data: { relation: `${a.relation ?? ''}-${b.relation ?? ''}` },
-      });
-    });
-  }
-  return { nodes, edges };
-}
-```
-
-- [ ] **Step 4: Run to verify it passes (adjust accessors if needed)**
-
-Run: `npm test -- --run src/tools/draw/dbml.lib.test.ts`
-Expected: PASS. If any assertion fails on a flag (e.g. `notNull`), add a one-time `console.log(JSON.stringify((parseDbml(SCHEMA).db as any).schemas[0].tables[0].fields[0]))` to the test, inspect the real field names, update the `RawField` accessors, and re-run. Remove the log once green.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/draw/dbml.lib.ts src/tools/draw/dbml.lib.test.ts
-git commit -m "feat(dbdiagram): parse DBML and build react-flow nodes/edges"
-```
-
----
-
-## Task 3: Auto-layout with dagre
-
-**Files:**
-- Create: `src/tools/draw/layout.lib.ts`
-- Test: `src/tools/draw/layout.lib.test.ts`
-
-**Interfaces:**
-- Consumes: `DiagramNode`, `DiagramEdge` (Task 2); `@dagrejs/dagre`.
-- Produces:
-  - `type PositionedNode = DiagramNode & { position: { x: number; y: number } }`
-  - `layoutNodes(nodes: DiagramNode[], edges: DiagramEdge[], saved: Record<string, { x: number; y: number }>): PositionedNode[]`
-
-- [ ] **Step 1: Write the failing test**
-
-Create `src/tools/draw/layout.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { layoutNodes } from './layout.lib';
-import type { DiagramNode, DiagramEdge } from './dbml.lib';
-
-const node = (id: string, cols = 2): DiagramNode => ({
-  id,
-  type: 'table',
-  data: { name: id, columns: Array.from({ length: cols }, (_, i) => ({ name: `c${i}`, type: 'int', pk: i === 0, fk: false, notNull: false, unique: false })) },
-});
-
-describe('layoutNodes', () => {
-  const nodes = [node('a'), node('b')];
-  const edges: DiagramEdge[] = [{ id: 'e', source: 'a', target: 'b', sourceHandle: 'c0', targetHandle: 'c0', data: { relation: '*-1' } }];
-
-  it('keeps saved positions and computes the rest', () => {
-    const out = layoutNodes(nodes, edges, { a: { x: 500, y: 500 } });
-    expect(out).toHaveLength(2);
-    expect(out.find((n) => n.id === 'a')!.position).toEqual({ x: 500, y: 500 });
-    expect(out.find((n) => n.id === 'b')!.position).toBeDefined();
-  });
-  it('gives unsaved nodes distinct positions', () => {
-    const out = layoutNodes(nodes, edges, {});
-    const [a, b] = ['a', 'b'].map((id) => out.find((n) => n.id === id)!.position);
-    expect(a.x !== b.x || a.y !== b.y).toBe(true);
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify it fails**
-
-Run: `npm test -- --run src/tools/draw/layout.lib.test.ts`
-Expected: FAIL — cannot resolve `./layout.lib`.
-
-- [ ] **Step 3: Write layout.lib**
-
-Create `src/tools/draw/layout.lib.ts`:
-
-```ts
-import dagre from '@dagrejs/dagre';
-import type { DiagramNode, DiagramEdge } from './dbml.lib';
-
-export type PositionedNode = DiagramNode & { position: { x: number; y: number } };
-
-const COL_HEIGHT = 26;
-const HEADER = 40;
-const NODE_WIDTH = 220;
-
-/** Position nodes: saved positions win; the rest are laid out left-to-right with dagre. */
-export function layoutNodes(
-  nodes: DiagramNode[],
-  edges: DiagramEdge[],
-  saved: Record<string, { x: number; y: number }>,
-): PositionedNode[] {
-  const g = new dagre.graphlib.Graph();
-  g.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 80 });
-  g.setDefaultEdgeLabel(() => ({}));
-  for (const n of nodes) {
-    g.setNode(n.id, { width: NODE_WIDTH, height: HEADER + n.data.columns.length * COL_HEIGHT });
-  }
-  for (const e of edges) {
-    if (nodes.some((n) => n.id === e.source) && nodes.some((n) => n.id === e.target)) {
-      g.setEdge(e.source, e.target);
-    }
-  }
-  dagre.layout(g);
-  return nodes.map((n) => {
-    if (saved[n.id]) return { ...n, position: saved[n.id] };
-    const p = g.node(n.id);
-    // dagre centers nodes; shift to top-left origin for react-flow.
-    return { ...n, position: { x: Math.round(p.x - NODE_WIDTH / 2), y: Math.round(p.y - (HEADER + n.data.columns.length * COL_HEIGHT) / 2) } };
-  });
-}
-```
-
-- [ ] **Step 4: Run to verify it passes**
-
-Run: `npm test -- --run src/tools/draw/layout.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/draw/layout.lib.ts src/tools/draw/layout.lib.test.ts
-git commit -m "feat(dbdiagram): dagre auto-layout preserving saved node positions"
-```
-
----
-
-## Task 4: SQL export (native + custom dialects)
-
-**Files:**
-- Create: `src/tools/draw/sql-export.lib.ts`
-- Test: `src/tools/draw/sql-export.lib.test.ts`
-
-**Interfaces:**
-- Consumes: `@dbml/core` (`exporter.export`, `Parser`); `parseDbml` (Task 2).
-- Produces:
-  - `type Dialect = 'postgres' | 'mysql' | 'mssql' | 'oracle' | 'sqlite' | 'clickhouse'`
-  - `exportSql(source: string, dialect: Dialect): string`
-  - `const DIALECTS: { key: Dialect; label: string }[]`
-
-- [ ] **Step 1: Write the failing test**
-
-Create `src/tools/draw/sql-export.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { exportSql } from './sql-export.lib';
-
-const SCHEMA = `
-Table users {
-  id int [pk, increment]
-  email varchar [not null]
-}
-Table posts {
-  id int [pk]
-  user_id int
-}
-Ref: posts.user_id > users.id
-`;
-
-describe('exportSql — native dialects', () => {
-  it('postgres emits CREATE TABLE and a foreign key', () => {
-    const sql = exportSql(SCHEMA, 'postgres');
-    expect(sql).toMatch(/create table/i);
-    expect(sql).toMatch(/foreign key|references/i);
-  });
-});
-
-describe('exportSql — sqlite (custom)', () => {
-  it('uses SQLite affinities, AUTOINCREMENT, and no schema prefix', () => {
-    const sql = exportSql(SCHEMA, 'sqlite');
-    expect(sql).toMatch(/create table\s+"?users"?/i);
-    expect(sql).toMatch(/integer/i);
-    expect(sql).toMatch(/autoincrement/i);
-    expect(sql).not.toMatch(/public\./i);
-    expect(sql).toMatch(/foreign key/i);
-  });
-});
-
-describe('exportSql — clickhouse (custom)', () => {
-  it('uses MergeTree and ORDER BY, and omits foreign keys', () => {
-    const sql = exportSql(SCHEMA, 'clickhouse');
-    expect(sql).toMatch(/engine\s*=\s*mergetree/i);
-    expect(sql).toMatch(/order by/i);
-    expect(sql).not.toMatch(/foreign key/i);
-  });
-});
-
-describe('exportSql — errors', () => {
-  it('throws on an unknown dialect', () => {
-    // @ts-expect-error deliberately invalid
-    expect(() => exportSql(SCHEMA, 'db2')).toThrow();
-  });
-  it('throws on invalid DBML', () => {
-    expect(() => exportSql('Table {{{', 'sqlite')).toThrow();
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify it fails**
-
-Run: `npm test -- --run src/tools/draw/sql-export.lib.test.ts`
-Expected: FAIL — cannot resolve `./sql-export.lib`.
-
-- [ ] **Step 3: Write sql-export.lib**
-
-Create `src/tools/draw/sql-export.lib.ts`:
-
-```ts
-import { exporter, Parser } from '@dbml/core';
-import { parseDbml } from './dbml.lib';
-
-export type Dialect = 'postgres' | 'mysql' | 'mssql' | 'oracle' | 'sqlite' | 'clickhouse';
-
-export const DIALECTS: { key: Dialect; label: string }[] = [
-  { key: 'postgres', label: 'PostgreSQL' },
-  { key: 'mysql', label: 'MySQL' },
-  { key: 'mssql', label: 'SQL Server' },
-  { key: 'oracle', label: 'Oracle' },
-  { key: 'sqlite', label: 'SQLite' },
-  { key: 'clickhouse', label: 'ClickHouse' },
-];
-
-const NATIVE = new Set<Dialect>(['postgres', 'mysql', 'mssql', 'oracle']);
-
-/** Export DBML source to SQL for the given dialect. Throws on invalid DBML or unknown dialect. */
-export function exportSql(source: string, dialect: Dialect): string {
-  if (!DIALECTS.some((d) => d.key === dialect)) throw new Error(`Unknown dialect: ${dialect}`);
-  if (NATIVE.has(dialect)) {
-    // exporter.export takes DBML text directly and throws on parse errors.
-    return exporter.export(source, dialect);
-  }
-  const { db, error } = parseDbml(source);
-  if (error || !db) throw new Error(error ?? 'Invalid DBML');
-  return dialect === 'sqlite' ? generateSqlite(db) : generateClickhouse(db);
-}
-
-// ---- Custom generators (shapes per the model-shape note in Global Constraints) ----
-interface RawField { name: string; type?: { type_name?: string }; pk?: boolean; not_null?: boolean; unique?: boolean; increment?: boolean }
-interface RawTable { name: string; fields?: RawField[] }
-interface RawEndpoint { tableName?: string; fieldNames?: string[]; fields?: { name: string }[]; relation?: string }
-interface RawRef { endpoints?: RawEndpoint[] }
-interface RawSchema { tables?: RawTable[]; refs?: RawRef[] }
-
-const epField = (ep: RawEndpoint) => ep.fieldNames?.[0] ?? ep.fields?.[0]?.name ?? '';
-const schemasOf = (db: unknown): RawSchema[] => ((db as { schemas?: RawSchema[] }).schemas ?? []);
-
-/** Map a DBML column type to a SQLite affinity. */
-function sqliteType(t: string): string {
-  const s = t.toLowerCase();
-  if (/int|serial/.test(s)) return 'INTEGER';
-  if (/char|text|clob|uuid|json|date|time/.test(s)) return 'TEXT';
-  if (/real|floa|doub|dec|num/.test(s)) return 'REAL';
-  if (/blob|binary|bytea/.test(s)) return 'BLOB';
-  return 'TEXT';
-}
-
-function generateSqlite(db: unknown): string {
-  const out: string[] = [];
-  for (const schema of schemasOf(db)) {
-    for (const table of schema.tables ?? []) {
-      const lines: string[] = [];
-      for (const f of table.fields ?? []) {
-        const type = sqliteType(f.type?.type_name ?? '');
-        let line = `  "${f.name}" ${type}`;
-        if (f.pk) line += type === 'INTEGER' && f.increment ? ' PRIMARY KEY AUTOINCREMENT' : ' PRIMARY KEY';
-        if (f.not_null && !f.pk) line += ' NOT NULL';
-        if (f.unique && !f.pk) line += ' UNIQUE';
-        lines.push(line);
-      }
-      // Foreign keys from refs whose FK side is this table.
-      for (const ref of schema.refs ?? []) {
-        const [a, b] = ref.endpoints ?? [];
-        if (!a || !b) continue;
-        const fk = a.relation === '*' || b.relation === '1' ? a : b;
-        const pk = fk === a ? b : a;
-        if (fk.tableName === table.name) {
-          lines.push(`  FOREIGN KEY ("${epField(fk)}") REFERENCES "${pk.tableName}" ("${epField(pk)}")`);
-        }
-      }
-      out.push(`CREATE TABLE "${table.name}" (\n${lines.join(',\n')}\n);`);
-    }
-  }
-  return out.join('\n\n') + '\n';
-}
-
-/** Map a DBML column type to a ClickHouse type. */
-function clickhouseType(t: string): string {
-  const s = t.toLowerCase();
-  if (/bigint|int8/.test(s)) return 'Int64';
-  if (/int/.test(s)) return 'Int32';
-  if (/bool/.test(s)) return 'UInt8';
-  if (/real|floa|doub|dec|num/.test(s)) return 'Float64';
-  if (/datetime|timestamp/.test(s)) return 'DateTime';
-  if (/date/.test(s)) return 'Date';
-  return 'String';
-}
-
-function generateClickhouse(db: unknown): string {
-  const out: string[] = [];
-  for (const schema of schemasOf(db)) {
-    for (const table of schema.tables ?? []) {
-      const fields = table.fields ?? [];
-      const lines = fields.map((f) => {
-        const base = clickhouseType(f.type?.type_name ?? '');
-        const type = f.not_null || f.pk ? base : `Nullable(${base})`;
-        return `  "${f.name}" ${type}`;
-      });
-      const pkCols = fields.filter((f) => f.pk).map((f) => `"${f.name}"`);
-      const orderBy = pkCols.length ? `(${pkCols.join(', ')})` : 'tuple()';
-      out.push(
-        `-- ClickHouse has no FOREIGN KEY constraints; relationships are enforced by the application.\n` +
-          `CREATE TABLE "${table.name}" (\n${lines.join(',\n')}\n)\nENGINE = MergeTree()\nORDER BY ${orderBy};`,
-      );
-    }
-  }
-  return out.join('\n\n') + '\n';
-}
-```
-
-Note: `Parser` is imported for parity with `dbml.lib` usage but the native path uses `exporter.export` (which parses internally); if your linter flags the unused import, drop `Parser` from the import.
-
-- [ ] **Step 4: Run to verify it passes (adjust accessors if needed)**
-
-Run: `npm test -- --run src/tools/draw/sql-export.lib.test.ts`
-Expected: PASS. If the sqlite/clickhouse assertions fail on a flag, apply the same one-time model-inspection step from Task 2 Step 4 and adjust the `RawField` accessors.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/draw/sql-export.lib.ts src/tools/draw/sql-export.lib.test.ts
-git commit -m "feat(dbdiagram): SQL export (native pg/mysql/mssql/oracle + custom sqlite/clickhouse)"
-```
-
----
-
-## Task 5: Image export
-
-**Files:**
-- Create: `src/tools/draw/diagram-image.lib.ts`
-- Test: `src/tools/draw/diagram-image.lib.test.ts`
-
-**Interfaces:**
-- Consumes: `html-to-image` (`toPng`, `toJpeg`, `toSvg`, `toCanvas`).
-- Produces:
-  - `type ImageFormat = 'png' | 'jpeg' | 'webp' | 'svg'`
-  - `mimeFor(format: ImageFormat): string`
-  - `pixelRatioFor(scale: number): number`
-  - `exportDiagramImage(el: HTMLElement, opts: { format: ImageFormat; scale?: number; background?: string }): Promise<Blob>`
-
-Only the two pure mapping functions are unit-tested; `exportDiagramImage` needs a real DOM/canvas and is verified manually via the island (Task 10).
-
-- [ ] **Step 1: Write the failing test**
-
-Create `src/tools/draw/diagram-image.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { mimeFor, pixelRatioFor } from './diagram-image.lib';
-
-describe('mimeFor', () => {
-  it('maps each format to its MIME type', () => {
-    expect(mimeFor('png')).toBe('image/png');
-    expect(mimeFor('jpeg')).toBe('image/jpeg');
-    expect(mimeFor('webp')).toBe('image/webp');
-    expect(mimeFor('svg')).toBe('image/svg+xml');
-  });
-});
-
-describe('pixelRatioFor', () => {
-  it('clamps scale into 1..3', () => {
-    expect(pixelRatioFor(2)).toBe(2);
-    expect(pixelRatioFor(0)).toBe(1);
-    expect(pixelRatioFor(9)).toBe(3);
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify it fails**
-
-Run: `npm test -- --run src/tools/draw/diagram-image.lib.test.ts`
-Expected: FAIL — cannot resolve `./diagram-image.lib`.
-
-- [ ] **Step 3: Write diagram-image.lib**
-
-Create `src/tools/draw/diagram-image.lib.ts`:
-
-```ts
-import { toPng, toJpeg, toSvg, toCanvas } from 'html-to-image';
-
-export type ImageFormat = 'png' | 'jpeg' | 'webp' | 'svg';
-
-export function mimeFor(format: ImageFormat): string {
-  return format === 'svg' ? 'image/svg+xml' : `image/${format}`;
-}
-
-export function pixelRatioFor(scale: number): number {
-  return Math.min(3, Math.max(1, Math.round(scale) || 1));
-}
-
-/**
- * Render a DOM element (the react-flow viewport, pre-fitted to full bounds by
- * the caller) to an image blob. PNG/JPEG/SVG via html-to-image; WebP via canvas.
- */
-export async function exportDiagramImage(
-  el: HTMLElement,
-  opts: { format: ImageFormat; scale?: number; background?: string },
-): Promise<Blob> {
-  const pixelRatio = pixelRatioFor(opts.scale ?? 1);
-  const bg = opts.background ?? '#ffffff';
-
-  if (opts.format === 'svg') {
-    const dataUrl = await toSvg(el, { backgroundColor: bg });
-    const res = await fetch(dataUrl);
-    return res.blob();
-  }
-  if (opts.format === 'png') {
-    const dataUrl = await toPng(el, { pixelRatio, backgroundColor: bg });
-    return (await fetch(dataUrl)).blob();
-  }
-  if (opts.format === 'jpeg') {
-    const dataUrl = await toJpeg(el, { pixelRatio, quality: 0.95, backgroundColor: bg });
-    return (await fetch(dataUrl)).blob();
-  }
-  // webp: render to a canvas, then encode.
-  const canvas = await toCanvas(el, { pixelRatio, backgroundColor: bg });
-  return new Promise<Blob>((resolve, reject) =>
-    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Failed to encode WebP'))), 'image/webp', 0.95),
-  );
-}
-```
-
-- [ ] **Step 4: Run to verify it passes**
-
-Run: `npm test -- --run src/tools/draw/diagram-image.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/draw/diagram-image.lib.ts src/tools/draw/diagram-image.lib.test.ts
-git commit -m "feat(dbdiagram): image export (png/jpeg/webp/svg) with scale mapping"
-```
-
----
-
-## Task 6: IndexedDB persistence store
-
-**Files:**
-- Create: `src/tools/draw/dbdiagram.store.ts`
-
-**Interfaces:**
-- Consumes: `idb`.
-- Produces:
-  - `type DbDiagramDoc = { dbml: string; positions: Record<string, { x: number; y: number }>; updatedAt: number }`
-  - `loadDoc(): Promise<DbDiagramDoc | null>`
-  - `saveDoc(doc: DbDiagramDoc): Promise<void>`
-
-Mirrors `whiteboard.store.ts` exactly; no unit test (same untested pattern as the Whiteboard store — verified via the island).
-
-- [ ] **Step 1: Create the store**
-
-Create `src/tools/draw/dbdiagram.store.ts`:
-
-```ts
-import { openDB, type IDBPDatabase } from 'idb';
-
-// Persist the DB diagram (DBML text + dragged node positions) locally so it
-// survives reloads. IndexedDB (not localStorage) for consistency with other tools.
-export interface DbDiagramDoc {
-  dbml: string;
-  positions: Record<string, { x: number; y: number }>;
-  updatedAt: number;
-}
-
-const DB_NAME = 'gwt-dbdiagram';
-const STORE = 'doc';
-const KEY = 'current';
-
-let dbPromise: Promise<IDBPDatabase> | null = null;
-function db(): Promise<IDBPDatabase> {
-  if (!dbPromise) {
-    dbPromise = openDB(DB_NAME, 1, {
-      upgrade(database) {
-        if (!database.objectStoreNames.contains(STORE)) database.createObjectStore(STORE);
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function loadDoc(): Promise<DbDiagramDoc | null> {
-  try {
-    return (await (await db()).get(STORE, KEY)) ?? null;
-  } catch {
-    return null;
-  }
-}
-
-export async function saveDoc(doc: DbDiagramDoc): Promise<void> {
-  try {
-    await (await db()).put(STORE, doc, KEY);
-  } catch {
-    /* storage unavailable / quota — best-effort */
-  }
-}
-```
-
-- [ ] **Step 2: Verify it compiles**
-
-Run: `npm run build`
-Expected: build succeeds.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/tools/draw/dbdiagram.store.ts
-git commit -m "feat(dbdiagram): IndexedDB persistence for DBML + node positions"
-```
-
----
-
-## Task 7: Custom diagram node & edge components
-
-**Files:**
-- Create: `src/islands/draw/db-diagram/TableNode.tsx`, `src/islands/draw/db-diagram/RelationEdge.tsx`
-
-**Interfaces:**
-- Consumes: `@xyflow/react` (`Handle`, `Position`, `NodeProps`, `EdgeProps`, `BaseEdge`, `getBezierPath`); `TableColumn` (Task 2).
-- Produces: default-exported `TableNode` and `RelationEdge` React components + a `HIGHLIGHT` config object (exported from `TableNode.tsx`) used by both the nodes/edges and the island.
-
-- [ ] **Step 1: Create the HIGHLIGHT config + TableNode**
-
-Create `src/islands/draw/db-diagram/TableNode.tsx`:
-
-```tsx
-import { Handle, Position, type NodeProps } from '@xyflow/react';
-import { KeyRound, Link2 } from 'lucide-react';
-import type { TableColumn } from '@/tools/draw/dbml.lib';
-
-// Central, tunable emphasis config — bolder than dbdiagram.io's defaults.
-export const HIGHLIGHT = {
-  edgeWidth: 3.5,
-  edgeWidthIdle: 1.5,
-  color: 'var(--accent, #f59e0b)',
-  glow: 'drop-shadow(0 0 4px var(--accent, #f59e0b))',
-  dimOpacity: 0.25,
-  nodeBorderWidth: 2.5,
-};
-
-export interface TableNodeData {
-  name: string;
-  columns: TableColumn[];
-  /** injected by the island on hover: 'active' | 'neighbor' | 'dim' | undefined */
-  emphasis?: 'active' | 'neighbor' | 'dim';
-  /** set of `${column}` names to highlight (FK/PK endpoints) */
-  hotColumns?: Set<string>;
-}
-
-export default function TableNode({ data }: NodeProps<{ data: TableNodeData } & Record<string, unknown>> & { data: TableNodeData }) {
-  const emphasized = data.emphasis === 'active' || data.emphasis === 'neighbor';
-  const style: React.CSSProperties = {
-    opacity: data.emphasis === 'dim' ? HIGHLIGHT.dimOpacity : 1,
-    borderWidth: emphasized ? HIGHLIGHT.nodeBorderWidth : 2,
-    borderColor: emphasized ? HIGHLIGHT.color : undefined,
-    filter: data.emphasis === 'active' ? HIGHLIGHT.glow : undefined,
-    transition: 'opacity 120ms, border-color 120ms, filter 120ms',
-  };
-
-  return (
-    <div className="min-w-[200px] border-2 border-border bg-background text-sm shadow-brutal-sm" style={style}>
-      <div className="border-b-2 border-border bg-muted px-3 py-1.5 font-bold">{data.name}</div>
-      <div>
-        {data.columns.map((c) => {
-          const hot = data.hotColumns?.has(c.name);
-          return (
-            <div
-              key={c.name}
-              className="relative flex items-center justify-between gap-3 px-3 py-1"
-              style={hot ? { background: HIGHLIGHT.color, color: '#000' } : undefined}
-            >
-              {/* Column-level handles (both sides) so edges attach at the row. */}
-              <Handle type="target" position={Position.Left} id={c.name} style={{ opacity: 0 }} />
-              <span className="flex items-center gap-1 font-mono">
-                {c.pk && <KeyRound className="h-3 w-3" />}
-                {c.fk && !c.pk && <Link2 className="h-3 w-3" />}
-                {c.name}
-              </span>
-              <span className="font-mono text-xs text-muted-foreground">{c.type}</span>
-              <Handle type="source" position={Position.Right} id={c.name} style={{ opacity: 0 }} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Create RelationEdge**
-
-Create `src/islands/draw/db-diagram/RelationEdge.tsx`:
-
-```tsx
-import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react';
-import { HIGHLIGHT } from './TableNode';
-
-export interface RelationEdgeData {
-  emphasis?: 'active' | 'dim';
-}
-
-export default function RelationEdge(props: EdgeProps & { data?: RelationEdgeData }) {
-  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
-  const [path] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-  const active = data?.emphasis === 'active';
-  const dim = data?.emphasis === 'dim';
-  return (
-    <BaseEdge
-      id={props.id}
-      path={path}
-      style={{
-        stroke: active ? HIGHLIGHT.color : 'var(--border, #999)',
-        strokeWidth: active ? HIGHLIGHT.edgeWidth : HIGHLIGHT.edgeWidthIdle,
-        strokeDasharray: active ? '6 3' : undefined,
-        opacity: dim ? HIGHLIGHT.dimOpacity : 1,
-        filter: active ? HIGHLIGHT.glow : undefined,
-        transition: 'stroke 120ms, stroke-width 120ms, opacity 120ms',
-      }}
-    />
-  );
-}
-```
-
-- [ ] **Step 3: Verify compile**
-
-Run: `npm run build`
-Expected: build succeeds (components unused until Task 8; must type-check). If `@xyflow/react`'s `NodeProps`/`EdgeProps` generics complain, relax the node prop type to `NodeProps` and read `data` via `props.data as TableNodeData` — the runtime contract is what matters.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/draw/db-diagram/TableNode.tsx src/islands/draw/db-diagram/RelationEdge.tsx
-git commit -m "feat(dbdiagram): custom TableNode + RelationEdge with HIGHLIGHT config"
-```
-
----
-
-## Task 8: The island — editor ↔ diagram render + persistence
-
-**Files:**
-- Create: `src/islands/draw/DbDiagram.tsx`
-- Modify: `src/registry/tools.ts`
-
-**Interfaces:**
-- Consumes: `parseDbml`, `buildFlow` (Task 2); `layoutNodes` (Task 3); `loadDoc`, `saveDoc`, `DbDiagramDoc` (Task 6); `TableNode`, `RelationEdge` (Task 7); `@xyflow/react` (`ReactFlow`, `Background`, `Controls`, `MiniMap`, `applyNodeChanges`); `@xyflow/react/dist/style.css`.
-- Produces: default-exported `DbDiagram` island.
-
-- [ ] **Step 1: Create the island (core: editor, diagram, persistence, seed)**
-
-Create `src/islands/draw/DbDiagram.tsx`:
-
-```tsx
-import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType } from 'react';
-import { parseDbml, buildFlow } from '@/tools/draw/dbml.lib';
-import { layoutNodes } from '@/tools/draw/layout.lib';
-import { loadDoc, saveDoc, type DbDiagramDoc } from '@/tools/draw/dbdiagram.store';
-import TableNode from './db-diagram/TableNode';
-import RelationEdge from './db-diagram/RelationEdge';
-import { Alert } from '@/components/ui/Alert';
-import '@xyflow/react/dist/style.css';
-
-const SEED = `Table users {
-  id int [pk, increment]
-  email varchar [not null, unique]
-  created_at timestamp
-}
-
-Table posts {
-  id int [pk, increment]
-  user_id int [not null]
-  title varchar
-  body text
-}
-
-Ref: posts.user_id > users.id
-`;
-
-const nodeTypes = { table: TableNode };
-const edgeTypes = { relation: RelationEdge };
-
-export default function DbDiagram() {
-  // react-flow is browser-only and heavy — load it after mount (like Whiteboard).
-  const [RF, setRF] = useState<{
-    ReactFlow: ComponentType<Record<string, unknown>>;
-    Background: ComponentType<Record<string, unknown>>;
-    Controls: ComponentType<Record<string, unknown>>;
-    MiniMap: ComponentType<Record<string, unknown>>;
-    applyNodeChanges: (changes: unknown[], nodes: unknown[]) => unknown[];
-  } | null>(null);
-
-  const [dbml, setDbml] = useState(SEED);
-  const [nodes, setNodes] = useState<Record<string, unknown>[]>([]);
-  const [edges, setEdges] = useState<Record<string, unknown>[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const positions = useRef<Record<string, { x: number; y: number }>>({});
-  const loaded = useRef(false);
-
-  useEffect(() => {
-    let alive = true;
-    import('@xyflow/react').then((m) => {
-      if (!alive) return;
-      setRF({
-        ReactFlow: m.ReactFlow as ComponentType<Record<string, unknown>>,
-        Background: m.Background as ComponentType<Record<string, unknown>>,
-        Controls: m.Controls as ComponentType<Record<string, unknown>>,
-        MiniMap: m.MiniMap as ComponentType<Record<string, unknown>>,
-        applyNodeChanges: m.applyNodeChanges as (c: unknown[], n: unknown[]) => unknown[],
-      });
-    });
-    return () => { alive = false; };
-  }, []);
-
-  // Load persisted doc once.
-  useEffect(() => {
-    loadDoc().then((doc) => {
-      if (doc) {
-        positions.current = doc.positions ?? {};
-        setDbml(doc.dbml || SEED);
-      }
-      loaded.current = true;
-    });
-  }, []);
-
-  // Re-parse + re-render whenever DBML changes (debounced). Keep the last good
-  // diagram on parse errors so the user doesn't lose context mid-typo.
-  useEffect(() => {
-    const t = setTimeout(() => {
-      const { db, error: err } = parseDbml(dbml);
-      setError(err);
-      if (err) return; // keep previous nodes/edges
-      const flow = buildFlow(db);
-      const positioned = layoutNodes(flow.nodes, flow.edges, positions.current);
-      setNodes(positioned as unknown as Record<string, unknown>[]);
-      setEdges(flow.edges.map((e) => ({ ...e, type: 'relation' })) as unknown as Record<string, unknown>[]);
-    }, 400);
-    return () => clearTimeout(t);
-  }, [dbml]);
-
-  // Debounced autosave of DBML + positions.
-  useEffect(() => {
-    if (!loaded.current) return;
-    const t = setTimeout(() => {
-      void saveDoc({ dbml, positions: positions.current, updatedAt: Date.now() } satisfies DbDiagramDoc);
-    }, 800);
-    return () => clearTimeout(t);
-  }, [dbml, nodes]);
-
-  const onNodesChange = useCallback(
-    (changes: unknown[]) => {
-      if (!RF) return;
-      setNodes((ns) => {
-        const next = RF.applyNodeChanges(changes, ns) as { id: string; position: { x: number; y: number } }[];
-        // Record dragged positions so re-parses preserve them.
-        for (const n of next) positions.current[n.id] = n.position;
-        return next as unknown as Record<string, unknown>[];
-      });
-    },
-    [RF],
-  );
-
-  const diagram = useMemo(() => {
-    if (!RF) return <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Loading diagram…</div>;
-    const { ReactFlow, Background, Controls, MiniMap } = RF;
-    return (
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        fitView
-        minZoom={0.1}
-        proOptions={{ hideAttribution: true }}
-      >
-        <Background />
-        <Controls />
-        <MiniMap pannable zoomable />
-      </ReactFlow>
-    );
-  }, [RF, nodes, edges, onNodesChange]);
-
-  return (
-    <div className="space-y-3">
-      <p className="max-w-3xl text-sm text-muted-foreground">
-        Write your schema in <a href="https://dbml.dbdiagram.io/docs/" target="_blank" rel="noopener noreferrer" className="font-bold underline underline-offset-2">DBML</a> on the left; the ER diagram updates live. Drag tables to arrange them — your layout and schema are saved in your browser.
-      </p>
-
-      {error && <Alert variant="error">{error}</Alert>}
-
-      <div className="grid grid-cols-1 gap-3 lg:grid-cols-[2fr_3fr]">
-        <textarea
-          value={dbml}
-          onChange={(e) => setDbml(e.target.value)}
-          spellCheck={false}
-          className="h-[75vh] w-full resize-none border-2 border-border bg-background p-3 font-mono text-xs leading-relaxed"
-        />
-        <div className="h-[75vh] w-full overflow-hidden border-2 border-border">{diagram}</div>
-      </div>
-    </div>
-  );
-}
-```
-
-Note: the plan uses a `<textarea>` for the editor to keep Task 8 self-contained and dependency-light. A later optional enhancement can swap in the app's self-hosted Monaco; the spec allows plain-text editing for v1.
-
-- [ ] **Step 2: Register the tool**
-
-In `src/registry/tools.ts`, `Database` is already imported. Add:
-
-```ts
-  {
-    id: 'db-diagram',
-    name: 'DB Diagram',
-    category: 'Draw',
-    route: '/tools/db-diagram',
-    keywords: ['dbml', 'erd', 'er diagram', 'schema', 'database', 'diagram', 'sql', 'tables'],
-    icon: Database,
-    summary: 'Design database schemas in DBML with a live ER diagram, SQL and image export',
-    load: () => import('@/islands/draw/DbDiagram'),
-    status: 'beta'
-  },
-```
-
-- [ ] **Step 3: Verify build + route**
-
-Run: `npm run build`
-Expected: build succeeds; `/tools/db-diagram` generated. If the Astro/Vite SSR build errors on `@xyflow/react` importing browser globals at module scope, confirm the CSS import and component imports are fine (the `ReactFlow` component itself is only pulled in via dynamic `import()` after mount, so SSR shouldn't evaluate it).
-
-- [ ] **Step 4: Manual smoke test**
-
-Run: `npm run dev`, open `/tools/db-diagram`. Expected: seed schema renders two tables + one edge; editing DBML updates the diagram; dragging a table and reloading preserves its position; zoom/minimap/controls work.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/islands/draw/DbDiagram.tsx src/registry/tools.ts
-git commit -m "feat(dbdiagram): live DBML editor + react-flow ER diagram with persistence"
-```
-
----
-
-## Task 9: Bold hover-highlight
-
-**Files:**
-- Modify: `src/islands/draw/DbDiagram.tsx`
-
-**Interfaces:**
-- Consumes: `HIGHLIGHT` (Task 7) indirectly (via the node/edge `emphasis` prop); react-flow `onNodeMouseEnter`/`onNodeMouseLeave`.
-
-- [ ] **Step 1: Add hover state and emphasis derivation**
-
-In `src/islands/draw/DbDiagram.tsx`, add a `hoveredId` state and derive per-node/per-edge `emphasis` + per-node `hotColumns` from it, without mutating the base nodes/edges. Add near the other state:
-
-```tsx
-  const [hoveredId, setHoveredId] = useState<string | null>(null);
-```
-
-Add these handlers (inside the component, before `diagram`):
-
-```tsx
-  const onNodeMouseEnter = useCallback((_e: unknown, node: { id: string }) => setHoveredId(node.id), []);
-  const onNodeMouseLeave = useCallback(() => setHoveredId(null), []);
-```
-
-- [ ] **Step 2: Compute emphasized nodes/edges**
-
-Replace the `diagram` `useMemo` body's `nodes={nodes}` / `edges={edges}` with derived, emphasis-annotated copies. Add this computation just above the `return` inside the `useMemo` (and add `hoveredId` to its dependency array):
-
-```tsx
-    // Derive hover emphasis: connected edges + neighbour tables pop; the rest dim.
-    const connEdges = hoveredId ? (edges as { id: string; source: string; target: string; sourceHandle: string; targetHandle: string }[]).filter((e) => e.source === hoveredId || e.target === hoveredId) : [];
-    const neighbours = new Set<string>();
-    const hotByTable: Record<string, Set<string>> = {};
-    for (const e of connEdges) {
-      neighbours.add(e.source);
-      neighbours.add(e.target);
-      (hotByTable[e.source] ??= new Set()).add(e.sourceHandle);
-      (hotByTable[e.target] ??= new Set()).add(e.targetHandle);
-    }
-    const connIds = new Set(connEdges.map((e) => e.id));
-
-    const dispNodes = (nodes as { id: string; data: Record<string, unknown> }[]).map((n) => {
-      if (!hoveredId) return n;
-      const emphasis = n.id === hoveredId ? 'active' : neighbours.has(n.id) ? 'neighbor' : 'dim';
-      return { ...n, data: { ...n.data, emphasis, hotColumns: hotByTable[n.id] } };
-    });
-    const dispEdges = (edges as { id: string; data?: Record<string, unknown> }[]).map((e) => {
-      if (!hoveredId) return e;
-      const emphasis = connIds.has(e.id) ? 'active' : 'dim';
-      return { ...e, data: { ...(e.data ?? {}), emphasis } };
-    });
-```
-
-Then use `dispNodes`/`dispEdges` in the `<ReactFlow>` props and add the hover handlers:
-
-```tsx
-      <ReactFlow
-        nodes={dispNodes}
-        edges={dispEdges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onNodeMouseEnter={onNodeMouseEnter}
-        onNodeMouseLeave={onNodeMouseLeave}
-        fitView
-        minZoom={0.1}
-        proOptions={{ hideAttribution: true }}
-      >
-```
-
-Update the `useMemo` dependency array to `[RF, nodes, edges, onNodesChange, hoveredId, onNodeMouseEnter, onNodeMouseLeave]`.
-
-- [ ] **Step 3: Verify build + manual hover check**
-
-Run: `npm run build && npm run dev`
-Expected: build succeeds. Hovering a table thickens + glows its relationship edges (amber), accent-borders the connected tables, highlights the FK/PK endpoint columns, and dims everything else; leaving restores the view.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/draw/DbDiagram.tsx
-git commit -m "feat(dbdiagram): bold hover-highlight for table relationships"
-```
-
----
-
-## Task 10: Toolbar — SQL export + image export
-
-**Files:**
-- Modify: `src/islands/draw/DbDiagram.tsx`
-
-**Interfaces:**
-- Consumes: `exportSql`, `DIALECTS`, `Dialect` (Task 4); `exportDiagramImage`, `ImageFormat` (Task 5); `downloadService` (`@/services/download`); `ImageResult` (`@/components/ui/ImageResult`); `Button`; react-flow's `getNodesBounds`/`getViewportForBounds` (imported from `@xyflow/react`).
-
-- [ ] **Step 1: Add SQL export UI**
-
-In `src/islands/draw/DbDiagram.tsx`, add imports:
-
-```tsx
-import { Button } from '@/components/ui/Button';
-import { ImageResult } from '@/components/ui/ImageResult';
-import { downloadService } from '@/services/download';
-import { exportSql, DIALECTS, type Dialect } from '@/tools/draw/sql-export.lib';
-import { exportDiagramImage, type ImageFormat } from '@/tools/draw/diagram-image.lib';
-```
-
-Add state:
-
-```tsx
-  const [dialect, setDialect] = useState<Dialect>('postgres');
-  const [sql, setSql] = useState<string | null>(null);
-  const [sqlErr, setSqlErr] = useState<string | null>(null);
-  const [imgFormat, setImgFormat] = useState<ImageFormat>('png');
-  const [imgScale, setImgScale] = useState(2);
-  const [imgBlob, setImgBlob] = useState<Blob | null>(null);
-  const flowWrapper = useRef<HTMLDivElement | null>(null);
-```
-
-Add handlers:
-
-```tsx
-  const runSqlExport = () => {
-    setSqlErr(null);
-    setSql(null);
-    try {
-      setSql(exportSql(dbml, dialect));
-    } catch (e) {
-      setSqlErr(e instanceof Error ? e.message : 'Export failed');
-    }
-  };
-
-  const runImageExport = async () => {
-    // Export the whole diagram: html-to-image captures the react-flow viewport DOM.
-    const el = flowWrapper.current?.querySelector('.react-flow__viewport') as HTMLElement | null;
-    const target = el ?? flowWrapper.current;
-    if (!target) return;
-    setImgBlob(await exportDiagramImage(target, { format: imgFormat, scale: imgScale }));
-  };
-```
-
-- [ ] **Step 2: Attach the wrapper ref and render the toolbar**
-
-Wrap the diagram container with the ref:
-
-```tsx
-        <div ref={flowWrapper} className="h-[75vh] w-full overflow-hidden border-2 border-border">{diagram}</div>
-```
-
-Add a toolbar above the grid (below the intro `<p>`):
-
-```tsx
-      <div className="flex flex-wrap items-end gap-4 border-2 border-border bg-muted/40 p-3">
-        <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">SQL dialect</span>
-          <select value={dialect} onChange={(e) => setDialect(e.target.value as Dialect)} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
-            {DIALECTS.map((d) => <option key={d.key} value={d.key}>{d.label}</option>)}
-          </select>
-        </div>
-        <Button onClick={runSqlExport} disabled={!!error}>Export SQL</Button>
-
-        <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">Image</span>
-          <select value={imgFormat} onChange={(e) => setImgFormat(e.target.value as ImageFormat)} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
-            <option value="png">PNG</option>
-            <option value="jpeg">JPEG</option>
-            <option value="webp">WebP</option>
-            <option value="svg">SVG</option>
-          </select>
-        </div>
-        <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">Scale</span>
-          <select value={imgScale} onChange={(e) => setImgScale(Number(e.target.value))} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
-            <option value={1}>1×</option><option value={2}>2×</option><option value={3}>3×</option>
-          </select>
-        </div>
-        <Button variant="secondary" onClick={runImageExport}>Export image</Button>
-      </div>
-```
-
-- [ ] **Step 3: Render the export results**
-
-Add below the grid:
-
-```tsx
-      {sqlErr && <Alert variant="error">{sqlErr}</Alert>}
-      {sql && (
-        <div className="space-y-2">
-          <div className="flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={() => navigator.clipboard?.writeText(sql)}>Copy SQL</Button>
-            <Button variant="secondary" onClick={() => downloadService.download(new Blob([sql], { type: 'text/sql' }), `schema-${dialect}.sql`)}>Download .sql</Button>
-          </div>
-          <pre className="max-h-[40vh] overflow-auto border-2 border-border bg-background p-3 font-mono text-xs">{sql}</pre>
-        </div>
-      )}
-      {imgBlob && <ImageResult blob={imgBlob} filename={`db-diagram.${imgFormat === 'jpeg' ? 'jpg' : imgFormat}`} />}
-```
-
-(The `ImageResult` gives the exported diagram Download/Copy/**Edit in Annotator** automatically once Plan A's handoff button is in `ResultActions`.)
-
-- [ ] **Step 4: Verify build + manual export check**
-
-Run: `npm run build && npm run dev`
-Expected: build succeeds. In the tool: choose PostgreSQL → Export SQL shows `CREATE TABLE …`; switch to SQLite/ClickHouse → dialect-specific SQL; Export image (PNG/JPEG/WebP/SVG at 1×/2×/3×) produces a downloadable image of the full diagram.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/islands/draw/DbDiagram.tsx
-git commit -m "feat(dbdiagram): SQL export + image export toolbar"
-```
-
----
-
-## Task 11: Excalidraw-style chrome (expand + hide-navbar)
-
-**Files:**
-- Modify: `src/islands/draw/DbDiagram.tsx`
-
-**Interfaces:**
-- Mirrors `Whiteboard.tsx`'s expand/hide-navbar mechanism (localStorage keys `gwt-dbdiagram-expanded`, `gwt-dbdiagram-navhidden`).
-
-- [ ] **Step 1: Add expand + hide-navbar state and persistence**
-
-In `src/islands/draw/DbDiagram.tsx`, add imports:
-
-```tsx
-import { Maximize2, Minimize2, ChevronUp, ChevronDown } from 'lucide-react';
-```
-
-Add state + persistence (mirroring Whiteboard):
-
-```tsx
-  const [expanded, setExpanded] = useState(false);
-  const [navHidden, setNavHidden] = useState(false);
-  const [navBottom, setNavBottom] = useState(67);
-
-  const setExpandedPersist = (v: boolean) => { setExpanded(v); try { localStorage.setItem('gwt-dbdiagram-expanded', v ? '1' : '0'); } catch { /* ignore */ } };
-  const setNavHiddenPersist = (v: boolean) => { setNavHidden(v); try { localStorage.setItem('gwt-dbdiagram-navhidden', v ? '1' : '0'); } catch { /* ignore */ } };
-
-  useEffect(() => {
-    if (localStorage.getItem('gwt-dbdiagram-expanded') === '1') setExpanded(true);
-    if (localStorage.getItem('gwt-dbdiagram-navhidden') === '1') setNavHidden(true);
-  }, []);
-
-  useEffect(() => {
-    if (!expanded) return;
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setExpandedPersist(false); };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [expanded]);
-
-  useEffect(() => {
-    const header = document.querySelector('header') as HTMLElement | null;
-    if (!header) return;
-    header.style.display = expanded && navHidden ? 'none' : '';
-    if (!expanded || navHidden) return () => { header.style.display = ''; };
-    const measure = () => setNavBottom(Math.round(header.getBoundingClientRect().bottom || 0));
-    measure();
-    window.addEventListener('resize', measure);
-    return () => { window.removeEventListener('resize', measure); header.style.display = ''; };
-  }, [expanded, navHidden]);
-
-  const topOffset = navHidden ? 0 : navBottom;
-```
-
-- [ ] **Step 2: Make the diagram container the expandable overlay**
-
-Change the diagram wrapper so that, when `expanded`, it becomes a fixed overlay (the editor grid stays behind it). Replace the diagram wrapper element with:
-
-```tsx
-        <div
-          ref={flowWrapper}
-          className={expanded
-            ? 'fixed inset-x-0 bottom-0 z-30 overflow-hidden border-t-2 border-border bg-background'
-            : 'h-[75vh] w-full overflow-hidden border-2 border-border'}
-          style={expanded ? { top: topOffset } : undefined}
-        >
-          {diagram}
-        </div>
-```
-
-Add an Expand button (near the toolbar) and, while expanded, the Exit button + hide-navbar pull-tab (mirroring Whiteboard):
-
-```tsx
-      {!expanded && (
-        <Button variant="secondary" onClick={() => setExpandedPersist(true)}><Maximize2 className="h-4 w-4" />Expand</Button>
-      )}
-      {expanded && (
-        <>
-          <button
-            onClick={() => setNavHiddenPersist(!navHidden)}
-            title={navHidden ? 'Show navbar' : 'Hide navbar for more space'}
-            aria-label={navHidden ? 'Show navbar' : 'Hide navbar'}
-            className={`fixed left-1/2 z-50 -translate-x-1/2 rounded-b-md border-2 border-t-0 border-border bg-background px-5 py-0.5 shadow-brutal-sm hover:bg-muted ${navHidden ? '' : '-translate-y-full'}`}
-            style={{ top: topOffset }}
-          >
-            {navHidden ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
-          </button>
-          <div className="fixed right-4 z-40 flex items-center gap-3" style={{ top: topOffset + 8 }}>
-            <Button variant="secondary" onClick={() => setExpandedPersist(false)} className="shadow-brutal"><Minimize2 className="h-4 w-4" />Exit</Button>
-          </div>
-        </>
-      )}
-```
-
-Place the Expand button inside the toolbar row so it sits with the other controls.
-
-- [ ] **Step 3: Verify build + manual check**
-
-Run: `npm run build && npm run dev`
-Expected: build succeeds. Expand fills the viewport below the navbar; the pull-tab hides/shows the navbar; Esc/Exit collapses; the choices persist across reloads.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/draw/DbDiagram.tsx
-git commit -m "feat(dbdiagram): expand + hide-navbar chrome (Whiteboard parity)"
-```
-
----
-
-## Task 12: Full verification
-
-- [ ] **Step 1: Run the whole test suite**
-
-Run: `npm test -- --run`
-Expected: all tests pass, including the new `dbml.lib`, `layout.lib`, `sql-export.lib`, `diagram-image.lib` suites.
-
-- [ ] **Step 2: Production build**
-
-Run: `npm run build`
-Expected: succeeds; the route exists:
-```bash
-ls dist/tools | grep db-diagram
-```
-
-- [ ] **Step 3: Full manual smoke test (dev server)**
-
-Run: `npm run dev`, open `/tools/db-diagram`, verify end-to-end:
-- Seed renders; editing DBML updates the diagram live; parse errors show a banner without blanking the diagram.
-- Drag tables; positions persist across reload.
-- Hover a table → bold amber glowing edges, accent table borders, FK/PK column highlight, others dimmed.
-- SQL export across all six dialects (postgres/mysql/mssql/oracle/sqlite/clickhouse) → Copy + Download .sql.
-- Image export PNG/JPEG/WebP/SVG at 1×/2×/3× → Download + "Edit in Annotator".
-- Expand / hide-navbar / Esc.
-
-- [ ] **Step 4: Final commit if fixes were needed**
-
-```bash
-git add -A
-git commit -m "chore(dbdiagram): finalize DB Diagram tool"
-```
-
----
-
-## Self-Review
-
-**1. Spec coverage:**
-- DBML parse + node/edge model → Task 2. ✓
-- dagre auto-layout preserving saved positions → Task 3. ✓
-- SQL export (native pg/mysql/mssql/oracle + custom sqlite/clickhouse) → Task 4. ✓
-- Image export PNG/JPEG/WebP/SVG at 1×/2×/3× → Task 5 + Task 10. ✓
-- IndexedDB persistence (DBML + positions) → Task 6 + Task 8. ✓
-- Custom TableNode/RelationEdge + tunable HIGHLIGHT → Task 7. ✓
-- Live editor ↔ diagram, drag/zoom/pan/minimap → Task 8. ✓
-- Bold hover-highlight (edges, endpoint columns, related-table borders, dim others) → Task 9. ✓
-- SQL + image export toolbar wiring → Task 10. ✓
-- Expand / hide-navbar chrome → Task 11. ✓
-- Registry entry (Draw, beta) → Task 8. ✓
-- Deps → Task 1. ✓
-
-**2. Placeholder scan:** No TBD/TODO; every code step ships complete code; the one intentional deviation (textarea instead of Monaco for v1) is called out explicitly and permitted by the spec's "plain-text editing for v1" out-of-scope note. ✓
-
-**3. Type consistency:** `DiagramNode`/`DiagramEdge`/`TableColumn` defined in Task 2 and consumed unchanged in Tasks 3, 7, 8, 9. `PositionedNode` (Task 3) fed into react-flow (Task 8). `HIGHLIGHT` exported from `TableNode.tsx` (Task 7) and consumed by `RelationEdge` (Task 7) + emphasis props (Task 9). `Dialect`/`DIALECTS` (Task 4) match the toolbar `<select>` (Task 10). `ImageFormat` (Task 5) matches the toolbar options (Task 10). `DbDiagramDoc` (Task 6) round-trips through `loadDoc`/`saveDoc` (Task 8). The `emphasis` union `'active'|'neighbor'|'dim'` (nodes) and `'active'|'dim'` (edges) match between Task 7's components and Task 9's derivation. ✓
-
-**Cross-plan note:** The image-export `ImageResult` (Task 10) gains its "Edit in Annotator" button from Plan A (Image Tools & Annotator Handoff), Task 2. This plan is otherwise independent and can be built and shipped on its own; if built before Plan A, the exported diagram simply shows Download/Copy (no Annotator button) until Plan A lands.
diff --git a/docs/superpowers/plans/2026-07-25-image-tools-and-annotator-handoff.md b/docs/superpowers/plans/2026-07-25-image-tools-and-annotator-handoff.md
deleted file mode 100644
index 8f930f3..0000000
--- a/docs/superpowers/plans/2026-07-25-image-tools-and-annotator-handoff.md
+++ /dev/null
@@ -1,1489 +0,0 @@
-# Image Tools & Annotator Handoff Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Add three client-side image tools (SVG Viewer & Converter, Image Viewer & Metadata, Monochrome) and a cross-tool "Edit in Annotator" handoff that opens the Image Annotator pre-loaded with any tool's image output.
-
-**Architecture:** Each tool is an Astro React island registered in `src/registry/tools.ts`, with pure logic in `src/tools/image/*.lib.ts` (Vitest-tested) and output via the shared `ImageResult`/`ResultActions` components. The handoff is an IndexedDB one-shot channel (`services/handoff.ts`) plus a reusable button; adding it to `ResultActions` auto-covers every `ImageResult` tool, and it's hand-wired into the manual tools.
-
-**Tech Stack:** React 18 islands, Canvas 2D, `idb` (IndexedDB), `dompurify` (SVG sanitize), self-hosted Monaco, lucide-react icons, Vitest + jsdom.
-
-## Global Constraints
-
-- **Zero external network requests at runtime** — no CDNs; everything bundled/self-hosted.
-- **All processing client-side** — no uploads.
-- Follow existing conventions exactly: `ToolDef` entry shape (`src/types/tool.ts`), island default-export with **no required props**, `ImageResult`/`ResultActions` for outputs, `usePasteImage(f => onDrop([f]))` for paste, `<Dropzone onDrop accept multiple>` for upload.
-- New pure logic lives in `src/tools/image/*.lib.ts` and is unit-tested with Vitest (`environment: 'jsdom'`, `globals: true`).
-- Category for all three tools: `Image`. Handoff route target is `/tools/image-annotate` (existing).
-
----
-
-## File Structure
-
-```
-src/services/handoff.ts                         (new — IndexedDB image channel + pure isFresh)
-src/services/handoff.test.ts                    (new — isFresh + round-trip via fake-indexeddb)
-src/components/ui/EditInAnnotatorButton.tsx     (new — reusable handoff button)
-src/components/ui/ZoomPane.tsx                   (new — shared zoom/pan viewer)
-src/components/ui/ResultActions.tsx             (modify — add handoff button)
-src/islands/image/ImageAnnotate.tsx             (modify — mount-time handoff load)
-src/tools/image/mono.lib.ts (+ .test.ts)        (new — grayscale/bw/dither)
-src/islands/image/Monochrome.tsx                (new)
-src/tools/image/svg.lib.ts (+ .test.ts)         (new — parseSvgSize/rasterizeSvg)
-src/islands/image/SvgViewer.tsx                 (new)
-src/tools/image/ico.lib.ts (+ .test.ts)         (new — parseIcoEntries)
-src/tools/image/exif.lib.ts (+ .test.ts)        (new — readExifSummary)
-src/islands/image/ImageViewer.tsx               (new)
-src/registry/tools.ts                           (modify — 3 entries)
-# manual-tool wiring (modify): Screenshot, BackgroundRemove, FaceBlur,
-# PortraitBlur, ObjectRemove, ImageUpscale, QrGen, PdfToImage, SignaturePad
-package.json                                     (modify — add fake-indexeddb devDep)
-```
-
----
-
-## Task 1: Handoff service
-
-**Files:**
-- Create: `src/services/handoff.ts`
-- Test: `src/services/handoff.test.ts`
-- Modify: `package.json` (add `fake-indexeddb` devDependency)
-
-**Interfaces:**
-- Consumes: `idb` (`openDB`, `IDBPDatabase`) — already a dependency.
-- Produces:
-  - `isFresh(ts: number, now: number, maxAgeMs: number): boolean` (pure)
-  - `putPendingImage(blob: Blob, name: string): Promise<void>`
-  - `takePendingImage(maxAgeMs?: number): Promise<{ blob: Blob; name: string } | null>`
-  - `sendImageToAnnotator(blob: Blob, name?: string): Promise<void>`
-
-- [ ] **Step 1: Add fake-indexeddb dev dependency**
-
-Run: `npm install --save-dev --legacy-peer-deps fake-indexeddb`
-Expected: `fake-indexeddb` appears in `package.json` devDependencies.
-
-- [ ] **Step 2: Write the failing test**
-
-Create `src/services/handoff.test.ts`:
-
-```ts
-import 'fake-indexeddb/auto';
-import { describe, it, expect, beforeEach } from 'vitest';
-import { isFresh, putPendingImage, takePendingImage } from './handoff';
-
-describe('isFresh', () => {
-  it('is true within the window and false past it', () => {
-    expect(isFresh(1000, 1500, 1000)).toBe(true);
-    expect(isFresh(1000, 2500, 1000)).toBe(false);
-    expect(isFresh(1000, 1000, 1000)).toBe(true); // boundary: exactly now
-  });
-});
-
-describe('pending image channel', () => {
-  beforeEach(async () => {
-    // Drain anything a previous test left behind.
-    await takePendingImage(Number.MAX_SAFE_INTEGER);
-  });
-
-  it('round-trips a blob and clears it (one-shot)', async () => {
-    const blob = new Blob(['hello'], { type: 'image/png' });
-    await putPendingImage(blob, 'shot.png');
-    const first = await takePendingImage();
-    expect(first?.name).toBe('shot.png');
-    expect(await first?.blob.text()).toBe('hello');
-    // Second take returns null — the record was consumed.
-    expect(await takePendingImage()).toBeNull();
-  });
-
-  it('returns null for a record older than maxAgeMs', async () => {
-    const blob = new Blob(['x'], { type: 'image/png' });
-    await putPendingImage(blob, 'old.png');
-    expect(await takePendingImage(-1)).toBeNull(); // maxAge -1 => always stale
-  });
-});
-```
-
-- [ ] **Step 3: Run test to verify it fails**
-
-Run: `npm test -- --run src/services/handoff.test.ts`
-Expected: FAIL — `Failed to resolve import "./handoff"`.
-
-- [ ] **Step 4: Write the implementation**
-
-Create `src/services/handoff.ts`:
-
-```ts
-import { openDB, type IDBPDatabase } from 'idb';
-
-// A one-shot IndexedDB channel for passing an image between tools across a full
-// page navigation (Astro reloads the page). localStorage is too small for images.
-interface PendingRecord {
-  blob: Blob;
-  name: string;
-  ts: number;
-}
-
-const DB_NAME = 'gwt-handoff';
-const STORE = 'image';
-const KEY = 'pending';
-const DEFAULT_MAX_AGE = 60_000; // 1 minute
-
-let dbPromise: Promise<IDBPDatabase> | null = null;
-function db(): Promise<IDBPDatabase> {
-  if (!dbPromise) {
-    dbPromise = openDB(DB_NAME, 1, {
-      upgrade(database) {
-        if (!database.objectStoreNames.contains(STORE)) database.createObjectStore(STORE);
-      },
-    });
-  }
-  return dbPromise;
-}
-
-/** A record stamped at `ts` is fresh if `now` is within `maxAgeMs` of it. */
-export function isFresh(ts: number, now: number, maxAgeMs: number): boolean {
-  return now - ts <= maxAgeMs;
-}
-
-/** Store an image for the next tool to pick up. Overwrites any pending image. */
-export async function putPendingImage(blob: Blob, name: string): Promise<void> {
-  try {
-    await (await db()).put(STORE, { blob, name, ts: Date.now() } satisfies PendingRecord, KEY);
-  } catch {
-    /* storage unavailable / quota — handoff is best-effort */
-  }
-}
-
-/** Read and delete the pending image, if any and still fresh. */
-export async function takePendingImage(
-  maxAgeMs = DEFAULT_MAX_AGE,
-): Promise<{ blob: Blob; name: string } | null> {
-  try {
-    const conn = await db();
-    const rec = (await conn.get(STORE, KEY)) as PendingRecord | undefined;
-    await conn.delete(STORE, KEY); // one-shot: always clear
-    if (!rec || !isFresh(rec.ts, Date.now(), maxAgeMs)) return null;
-    return { blob: rec.blob, name: rec.name };
-  } catch {
-    return null;
-  }
-}
-
-/** Store the image, then navigate to the annotator, which loads it on mount. */
-export async function sendImageToAnnotator(blob: Blob, name = 'image.png'): Promise<void> {
-  await putPendingImage(blob, name);
-  window.location.href = '/tools/image-annotate';
-}
-```
-
-- [ ] **Step 5: Run test to verify it passes**
-
-Run: `npm test -- --run src/services/handoff.test.ts`
-Expected: PASS (5 assertions across 3 tests).
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/services/handoff.ts src/services/handoff.test.ts package.json package-lock.json
-git commit -m "feat(handoff): add IndexedDB one-shot image channel for annotator handoff"
-```
-
----
-
-## Task 2: EditInAnnotatorButton + wire into ResultActions
-
-**Files:**
-- Create: `src/components/ui/EditInAnnotatorButton.tsx`
-- Modify: `src/components/ui/ResultActions.tsx`
-
-**Interfaces:**
-- Consumes: `sendImageToAnnotator` (Task 1); `Button` (`./Button`).
-- Produces: `EditInAnnotatorButton` React component with props `{ blob: Blob | (() => Blob | Promise<Blob>) | null; filename?: string; disabled?: boolean }`.
-
-This task has no unit test (it's a thin UI wrapper matching `CopyImageButton`, which is also untested); verification is the app building and the button appearing. The blob-resolution + navigation logic is covered by Task 1's tested `sendImageToAnnotator`.
-
-- [ ] **Step 1: Create the button**
-
-Create `src/components/ui/EditInAnnotatorButton.tsx`:
-
-```tsx
-import { PenTool } from 'lucide-react';
-import { sendImageToAnnotator } from '@/services/handoff';
-import { Button } from './Button';
-
-interface EditInAnnotatorButtonProps {
-  /** The image to hand off, or a function that produces it on demand. */
-  blob: Blob | (() => Blob | Promise<Blob>) | null;
-  filename?: string;
-  disabled?: boolean;
-}
-
-/** Opens the Image Annotator pre-loaded with this image (via IndexedDB handoff). */
-export function EditInAnnotatorButton({ blob, filename = 'image.png', disabled }: EditInAnnotatorButtonProps) {
-  const handleClick = async () => {
-    if (!blob) return;
-    const resolved = typeof blob === 'function' ? await blob() : blob;
-    await sendImageToAnnotator(resolved, filename);
-  };
-
-  return (
-    <Button variant="secondary" onClick={handleClick} disabled={disabled || !blob}>
-      <PenTool className="h-4 w-4" />
-      Edit in Annotator
-    </Button>
-  );
-}
-```
-
-- [ ] **Step 2: Wire it into ResultActions**
-
-Modify `src/components/ui/ResultActions.tsx` — add the import and render the button after `CopyImageButton`, gated on the same `isImage` check:
-
-```tsx
-import { Download } from 'lucide-react';
-import { downloadService } from '@/services/download';
-import { Button } from './Button';
-import { CopyImageButton } from './CopyImageButton';
-import { EditInAnnotatorButton } from './EditInAnnotatorButton';
-
-export interface ResultActionsProps {
-  blob: Blob | null;
-  filename: string;
-  disabled?: boolean;
-}
-
-export function ResultActions({ blob, filename, disabled }: ResultActionsProps) {
-  const handleDownload = async () => {
-    if (!blob) return;
-    await downloadService.download(blob, filename);
-  };
-
-  const isImage = !!blob && blob.type.startsWith('image/');
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Button onClick={handleDownload} disabled={disabled || !blob}>
-        <Download className="h-4 w-4" />
-        Download {filename}
-      </Button>
-      {isImage && <CopyImageButton blob={blob} disabled={disabled} />}
-      {isImage && <EditInAnnotatorButton blob={blob} filename={filename} disabled={disabled} />}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 3: Verify it builds and tests still pass**
-
-Run: `npm run build && npm test -- --run`
-Expected: build succeeds; all existing tests pass.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/components/ui/EditInAnnotatorButton.tsx src/components/ui/ResultActions.tsx
-git commit -m "feat(handoff): add Edit in Annotator button to shared ResultActions"
-```
-
----
-
-## Task 3: ImageAnnotate loads the handoff image on mount
-
-**Files:**
-- Modify: `src/islands/image/ImageAnnotate.tsx`
-
-**Interfaces:**
-- Consumes: `takePendingImage` (Task 1); the island's existing `onDrop(files: File[])`.
-
-- [ ] **Step 1: Locate the onDrop definition**
-
-Run: `grep -n "onDrop\|useEffect\|export default function ImageAnnotate" src/islands/image/ImageAnnotate.tsx`
-Expected: shows the `onDrop` function and imports. Note whether `useEffect` is already imported from `react`.
-
-- [ ] **Step 2: Add the import**
-
-At the top of `src/islands/image/ImageAnnotate.tsx`, add:
-
-```tsx
-import { takePendingImage } from '@/services/handoff';
-```
-Ensure `useEffect` is in the `react` import (add it if missing).
-
-- [ ] **Step 3: Add the mount-time load effect**
-
-Immediately after the `onDrop` function is defined in the component body, add:
-
-```tsx
-  // If another tool handed us an image (via the annotator handoff), load it as
-  // the base image on mount. No-op when nothing is pending.
-  useEffect(() => {
-    takePendingImage().then((pending) => {
-      if (pending) onDrop([new File([pending.blob], pending.name, { type: pending.blob.type })]);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-```
-
-- [ ] **Step 4: Verify build and manual check**
-
-Run: `npm run build`
-Expected: build succeeds. (Manual smoke test later: any tool's "Edit in Annotator" → annotator opens with the image loaded.)
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/islands/image/ImageAnnotate.tsx
-git commit -m "feat(handoff): load handed-off image into the annotator on mount"
-```
-
----
-
-## Task 4: Monochrome — library
-
-**Files:**
-- Create: `src/tools/image/mono.lib.ts`
-- Test: `src/tools/image/mono.lib.test.ts`
-
-**Interfaces:**
-- Produces:
-  - `toGrayscale(data: ImageData): ImageData`
-  - `toBlackWhite(data: ImageData, threshold: number): ImageData`
-  - `toDitheredBW(data: ImageData): ImageData`
-  - `applyMono(file: File, opts: { mode: MonoMode; threshold?: number }): Promise<Blob>`
-  - `type MonoMode = 'grayscale' | 'bw' | 'dither'`
-
-The three transforms are pure `ImageData → ImageData` and fully unit-tested. `applyMono` (canvas I/O) is exercised manually via the island.
-
-- [ ] **Step 1: Write the failing test**
-
-Create `src/tools/image/mono.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { toGrayscale, toBlackWhite, toDitheredBW } from './mono.lib';
-
-// Build a 2x2 ImageData without a real canvas (jsdom): plain object is enough
-// because the transforms only read width/height/data.
-function makeImageData(px: number[][]): ImageData {
-  const data = new Uint8ClampedArray(px.length * 4);
-  px.forEach(([r, g, b, a], i) => {
-    data[i * 4] = r; data[i * 4 + 1] = g; data[i * 4 + 2] = b; data[i * 4 + 3] = a ?? 255;
-  });
-  const side = Math.sqrt(px.length);
-  return { width: side, height: side, data, colorSpace: 'srgb' } as ImageData;
-}
-
-describe('toGrayscale', () => {
-  it('makes R=G=B per pixel using luminance weights', () => {
-    const out = toGrayscale(makeImageData([[255, 0, 0, 255], [0, 255, 0, 255], [0, 0, 255, 255], [255, 255, 255, 255]]));
-    for (let i = 0; i < 4; i++) {
-      const [r, g, b] = [out.data[i * 4], out.data[i * 4 + 1], out.data[i * 4 + 2]];
-      expect(r).toBe(g);
-      expect(g).toBe(b);
-    }
-    expect(out.data[0]).toBe(Math.round(0.299 * 255)); // red pixel luminance
-  });
-});
-
-describe('toBlackWhite', () => {
-  it('outputs only 0 or 255 and respects the threshold', () => {
-    const out = toBlackWhite(makeImageData([[100, 100, 100, 255], [200, 200, 200, 255], [0, 0, 0, 255], [255, 255, 255, 255]]), 128);
-    for (let i = 0; i < out.data.length; i += 4) {
-      expect([0, 255]).toContain(out.data[i]);
-    }
-    expect(out.data[0]).toBe(0);   // lum 100 < 128 -> black
-    expect(out.data[4]).toBe(255); // lum 200 >= 128 -> white
-  });
-});
-
-describe('toDitheredBW', () => {
-  it('outputs only 0 or 255 and preserves dimensions', () => {
-    const out = toDitheredBW(makeImageData([[128, 128, 128, 255], [128, 128, 128, 255], [128, 128, 128, 255], [128, 128, 128, 255]]));
-    expect(out.width).toBe(2);
-    expect(out.height).toBe(2);
-    for (let i = 0; i < out.data.length; i += 4) {
-      expect([0, 255]).toContain(out.data[i]);
-    }
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `npm test -- --run src/tools/image/mono.lib.test.ts`
-Expected: FAIL — cannot resolve `./mono.lib`.
-
-- [ ] **Step 3: Write the implementation**
-
-Create `src/tools/image/mono.lib.ts`:
-
-```ts
-export type MonoMode = 'grayscale' | 'bw' | 'dither';
-
-const LUM = (r: number, g: number, b: number) => 0.299 * r + 0.587 * g + 0.114 * b;
-
-function cloneShape(src: ImageData): ImageData {
-  return { width: src.width, height: src.height, data: new Uint8ClampedArray(src.data.length), colorSpace: 'srgb' } as ImageData;
-}
-
-/** Desaturate to luminance grey; alpha preserved. */
-export function toGrayscale(src: ImageData): ImageData {
-  const out = cloneShape(src);
-  for (let i = 0; i < src.data.length; i += 4) {
-    const y = Math.round(LUM(src.data[i], src.data[i + 1], src.data[i + 2]));
-    out.data[i] = out.data[i + 1] = out.data[i + 2] = y;
-    out.data[i + 3] = src.data[i + 3];
-  }
-  return out;
-}
-
-/** Hard threshold to pure black/white; alpha preserved. */
-export function toBlackWhite(src: ImageData, threshold: number): ImageData {
-  const out = cloneShape(src);
-  for (let i = 0; i < src.data.length; i += 4) {
-    const v = LUM(src.data[i], src.data[i + 1], src.data[i + 2]) >= threshold ? 255 : 0;
-    out.data[i] = out.data[i + 1] = out.data[i + 2] = v;
-    out.data[i + 3] = src.data[i + 3];
-  }
-  return out;
-}
-
-/** Floyd–Steinberg error-diffusion dither to 1-bit black/white. */
-export function toDitheredBW(src: ImageData): ImageData {
-  const { width, height } = src;
-  const out = cloneShape(src);
-  // Working luminance buffer (float) so error can accumulate.
-  const lum = new Float32Array(width * height);
-  for (let p = 0; p < width * height; p++) {
-    const i = p * 4;
-    lum[p] = LUM(src.data[i], src.data[i + 1], src.data[i + 2]);
-    out.data[i + 3] = src.data[i + 3];
-  }
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const p = y * width + x;
-      const old = lum[p];
-      const nv = old >= 128 ? 255 : 0;
-      const err = old - nv;
-      const i = p * 4;
-      out.data[i] = out.data[i + 1] = out.data[i + 2] = nv;
-      // Distribute error to neighbours (right, below-left, below, below-right).
-      if (x + 1 < width) lum[p + 1] += (err * 7) / 16;
-      if (y + 1 < height) {
-        if (x > 0) lum[p + width - 1] += (err * 3) / 16;
-        lum[p + width] += (err * 5) / 16;
-        if (x + 1 < width) lum[p + width + 1] += (err * 1) / 16;
-      }
-    }
-  }
-  return out;
-}
-
-/** Decode a file, apply a monochrome mode, and re-encode as PNG. Browser-only. */
-export async function applyMono(
-  file: File,
-  opts: { mode: MonoMode; threshold?: number },
-): Promise<Blob> {
-  const bitmap = await createImageBitmap(file);
-  const canvas = document.createElement('canvas');
-  canvas.width = bitmap.width;
-  canvas.height = bitmap.height;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    bitmap.close?.();
-    throw new Error('Canvas is not supported in this browser');
-  }
-  ctx.drawImage(bitmap, 0, 0);
-  bitmap.close?.();
-  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  const result =
-    opts.mode === 'grayscale'
-      ? toGrayscale(data)
-      : opts.mode === 'dither'
-        ? toDitheredBW(data)
-        : toBlackWhite(data, opts.threshold ?? 128);
-  ctx.putImageData(result, 0, 0);
-  return new Promise<Blob>((resolve, reject) =>
-    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Failed to encode image'))), 'image/png'),
-  );
-}
-```
-
-- [ ] **Step 4: Run test to verify it passes**
-
-Run: `npm test -- --run src/tools/image/mono.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/image/mono.lib.ts src/tools/image/mono.lib.test.ts
-git commit -m "feat(image): add monochrome transforms (grayscale, b&w, dither)"
-```
-
----
-
-## Task 5: Monochrome — island + registry
-
-**Files:**
-- Create: `src/islands/image/Monochrome.tsx`
-- Modify: `src/registry/tools.ts`
-
-**Interfaces:**
-- Consumes: `applyMono`, `MonoMode` (Task 4); `Dropzone`, `Button`, `Alert`, `ImageResult`, `usePasteImage`.
-
-- [ ] **Step 1: Create the island**
-
-Create `src/islands/image/Monochrome.tsx`:
-
-```tsx
-import { useEffect, useState } from 'react';
-import { Dropzone } from '@/components/ui/Dropzone';
-import { Button } from '@/components/ui/Button';
-import { Alert } from '@/components/ui/Alert';
-import { ImageResult } from '@/components/ui/ImageResult';
-import { applyMono, type MonoMode } from '@/tools/image/mono.lib';
-import { usePasteImage } from '@/hooks/usePasteImage';
-
-const MODES: { key: MonoMode; label: string; note: string }[] = [
-  { key: 'grayscale', label: 'Grayscale', note: 'Luminance desaturation.' },
-  { key: 'bw', label: 'Black & White', note: 'Hard threshold to pure black/white.' },
-  { key: 'dither', label: 'Dithered B/W', note: 'Floyd–Steinberg dithering for smoother tone.' },
-];
-
-export default function Monochrome() {
-  const [file, setFile] = useState<File | null>(null);
-  const [mode, setMode] = useState<MonoMode>('grayscale');
-  const [threshold, setThreshold] = useState(128);
-  const [result, setResult] = useState<Blob | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState('');
-
-  const onDrop = (files: File[]) => {
-    setFile(files.find((f) => f.type.startsWith('image/')) ?? null);
-    setResult(null);
-    setError('');
-  };
-  usePasteImage((f) => onDrop([f]));
-
-  // Re-run whenever the input, mode, or threshold changes (debounced).
-  useEffect(() => {
-    if (!file) return;
-    let alive = true;
-    setBusy(true);
-    const t = setTimeout(() => {
-      applyMono(file, { mode, threshold })
-        .then((b) => alive && setResult(b))
-        .catch((e) => alive && setError(e instanceof Error ? e.message : 'Failed'))
-        .finally(() => alive && setBusy(false));
-    }, 150);
-    return () => { alive = false; clearTimeout(t); };
-  }, [file, mode, threshold]);
-
-  const outName = file ? file.name.replace(/\.[^.]+$/, '') + `-${mode}.png` : 'image.png';
-
-  return (
-    <div className="space-y-4">
-      <Dropzone onDrop={onDrop} accept="image/*" multiple={false}>
-        <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">Grayscale, black &amp; white, or dithered · or paste (⌘V)</p>
-        </div>
-      </Dropzone>
-
-      {file && <p className="text-sm font-bold text-foreground">{file.name}</p>}
-
-      <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Mode</span>
-        <div className="flex flex-wrap gap-2">
-          {MODES.map((m) => (
-            <Button key={m.key} variant={mode === m.key ? 'primary' : 'secondary'} aria-pressed={mode === m.key} onClick={() => setMode(m.key)}>
-              {m.label}
-            </Button>
-          ))}
-        </div>
-        <p className="text-xs text-muted-foreground">{MODES.find((m) => m.key === mode)?.note}</p>
-      </div>
-
-      {mode === 'bw' && (
-        <label className="block space-y-1.5">
-          <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Threshold</span>
-            <span>{threshold}</span>
-          </span>
-          <input type="range" min={0} max={255} value={threshold} onChange={(e) => setThreshold(Number(e.target.value))} className="w-full accent-accent" />
-        </label>
-      )}
-
-      {error && <Alert variant="error">{error}</Alert>}
-      {result && <ImageResult blob={result} filename={outName} originalSize={file?.size} />}
-      {busy && <p className="text-sm text-muted-foreground">Processing…</p>}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Register the tool**
-
-In `src/registry/tools.ts`, add `Contrast` to the lucide import line, then add this entry to the `tools` array (near the other `category: 'Image'` entries):
-
-```ts
-  {
-    id: 'monochrome',
-    name: 'Monochrome',
-    category: 'Image',
-    route: '/tools/monochrome',
-    keywords: ['monochrome', 'grayscale', 'greyscale', 'black and white', 'bw', 'threshold', 'dither', 'desaturate'],
-    icon: Contrast,
-    summary: 'Convert images to grayscale, black & white, or dithered',
-    load: () => import('@/islands/image/Monochrome'),
-    status: 'stable'
-  },
-```
-
-- [ ] **Step 3: Verify build + route**
-
-Run: `npm run build`
-Expected: build succeeds; `/tools/monochrome` is generated (getStaticPaths reads the registry).
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/image/Monochrome.tsx src/registry/tools.ts
-git commit -m "feat(image): add Monochrome tool (grayscale/b&w/dither)"
-```
-
----
-
-## Task 6: Shared ZoomPane component
-
-**Files:**
-- Create: `src/components/ui/ZoomPane.tsx`
-
-**Interfaces:**
-- Produces: `ZoomPane` React component with props `{ children: React.ReactNode; className?: string }` that renders a checkerboard-backed, scroll/wheel-zoomable, drag-pannable container with zoom buttons + a "Fit" reset. Consumed by both viewers (Tasks 7, 9).
-
-No unit test (pure presentational interaction component, like other `ui/` primitives). Verified via the viewers building and manual zoom.
-
-- [ ] **Step 1: Create the component**
-
-Create `src/components/ui/ZoomPane.tsx`:
-
-```tsx
-import { useRef, useState, type ReactNode } from 'react';
-import { ZoomIn, ZoomOut, Maximize } from 'lucide-react';
-import { Button } from './Button';
-
-const MIN = 0.25;
-const MAX = 8;
-
-/** A checkerboard-backed pane that zooms (buttons + wheel) and pans (drag). */
-export function ZoomPane({ children, className }: { children: ReactNode; className?: string }) {
-  const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const dragging = useRef<{ x: number; y: number } | null>(null);
-
-  const clamp = (z: number) => Math.min(MAX, Math.max(MIN, z));
-  const reset = () => { setZoom(1); setPan({ x: 0, y: 0 }); };
-
-  const onWheel = (e: React.WheelEvent) => {
-    e.preventDefault();
-    setZoom((z) => clamp(z * (e.deltaY < 0 ? 1.1 : 0.9)));
-  };
-  const onPointerDown = (e: React.PointerEvent) => {
-    dragging.current = { x: e.clientX - pan.x, y: e.clientY - pan.y };
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-  };
-  const onPointerMove = (e: React.PointerEvent) => {
-    if (!dragging.current) return;
-    setPan({ x: e.clientX - dragging.current.x, y: e.clientY - dragging.current.y });
-  };
-  const onPointerUp = () => { dragging.current = null; };
-
-  return (
-    <div className={`relative overflow-hidden border-2 border-border ${className ?? 'h-[70vh]'}`}>
-      <div className="absolute right-2 top-2 z-10 flex gap-1">
-        <Button variant="secondary" onClick={() => setZoom((z) => clamp(z * 1.25))} aria-label="Zoom in"><ZoomIn className="h-4 w-4" /></Button>
-        <Button variant="secondary" onClick={() => setZoom((z) => clamp(z * 0.8))} aria-label="Zoom out"><ZoomOut className="h-4 w-4" /></Button>
-        <Button variant="secondary" onClick={reset} aria-label="Fit"><Maximize className="h-4 w-4" /></Button>
-      </div>
-      <span className="absolute left-2 top-2 z-10 rounded bg-background/80 px-2 py-0.5 text-xs font-mono">{Math.round(zoom * 100)}%</span>
-      <div
-        className="flex h-full w-full cursor-grab items-center justify-center active:cursor-grabbing"
-        style={{ backgroundImage: 'conic-gradient(#0000 90deg, #8883 0 180deg, #0000 0 270deg, #8883 0)', backgroundSize: '20px 20px' }}
-        onWheel={onWheel}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-      >
-        <div style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}>{children}</div>
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Verify it compiles**
-
-Run: `npm run build`
-Expected: build succeeds (component is unused until Task 7, but must type-check).
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/ui/ZoomPane.tsx
-git commit -m "feat(ui): add shared ZoomPane (checkerboard, wheel-zoom, drag-pan)"
-```
-
----
-
-## Task 7: SVG Viewer & Converter — library
-
-**Files:**
-- Create: `src/tools/image/svg.lib.ts`
-- Test: `src/tools/image/svg.lib.test.ts`
-
-**Interfaces:**
-- Produces:
-  - `parseSvgSize(markup: string): { width: number; height: number; viewBox?: [number, number, number, number] }`
-  - `rasterizeSvg(markup: string, opts: RasterizeOpts): Promise<Blob>` where `RasterizeOpts = { scale?: number; width?: number; height?: number; type: 'image/png' | 'image/jpeg' | 'image/webp'; quality?: number; background?: string }`
-
-`parseSvgSize` is pure and fully tested. `rasterizeSvg` needs an `<img>` load + canvas (browser); its dimension/type contract is asserted via a mocked path where feasible, otherwise exercised manually — see Step 1 notes.
-
-- [ ] **Step 1: Write the failing test (pure parser only)**
-
-Create `src/tools/image/svg.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { parseSvgSize } from './svg.lib';
-
-describe('parseSvgSize', () => {
-  it('reads explicit width/height', () => {
-    expect(parseSvgSize('<svg width="120" height="80"></svg>')).toMatchObject({ width: 120, height: 80 });
-  });
-  it('strips units like px', () => {
-    expect(parseSvgSize('<svg width="120px" height="80px"></svg>')).toMatchObject({ width: 120, height: 80 });
-  });
-  it('derives size from viewBox when width/height absent', () => {
-    const r = parseSvgSize('<svg viewBox="0 0 300 150"></svg>');
-    expect(r).toMatchObject({ width: 300, height: 150, viewBox: [0, 0, 300, 150] });
-  });
-  it('falls back to 300x150 when nothing is specified', () => {
-    expect(parseSvgSize('<svg></svg>')).toMatchObject({ width: 300, height: 150 });
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `npm test -- --run src/tools/image/svg.lib.test.ts`
-Expected: FAIL — cannot resolve `./svg.lib`.
-
-- [ ] **Step 3: Write the implementation**
-
-Create `src/tools/image/svg.lib.ts`:
-
-```ts
-export interface RasterizeOpts {
-  scale?: number;
-  width?: number;
-  height?: number;
-  type: 'image/png' | 'image/jpeg' | 'image/webp';
-  quality?: number;
-  background?: string;
-}
-
-const num = (s: string | null): number | null => {
-  if (!s) return null;
-  const m = s.match(/-?[\d.]+/);
-  return m ? parseFloat(m[0]) : null;
-};
-
-/** Read an SVG's intrinsic size from width/height, else viewBox, else 300x150. */
-export function parseSvgSize(markup: string): {
-  width: number;
-  height: number;
-  viewBox?: [number, number, number, number];
-} {
-  const w = num(markup.match(/\bwidth\s*=\s*["']([^"']+)["']/)?.[1] ?? null);
-  const h = num(markup.match(/\bheight\s*=\s*["']([^"']+)["']/)?.[1] ?? null);
-  const vbRaw = markup.match(/\bviewBox\s*=\s*["']([^"']+)["']/)?.[1];
-  let viewBox: [number, number, number, number] | undefined;
-  if (vbRaw) {
-    const parts = vbRaw.trim().split(/[\s,]+/).map(Number);
-    if (parts.length === 4 && parts.every((n) => !Number.isNaN(n))) {
-      viewBox = [parts[0], parts[1], parts[2], parts[3]];
-    }
-  }
-  const width = w ?? viewBox?.[2] ?? 300;
-  const height = h ?? viewBox?.[3] ?? 150;
-  return { width, height, viewBox };
-}
-
-/** Rasterize SVG markup to a PNG/JPEG/WebP blob at a scale or explicit size. */
-export function rasterizeSvg(markup: string, opts: RasterizeOpts): Promise<Blob> {
-  const { width: iw, height: ih } = parseSvgSize(markup);
-  const targetW = Math.max(1, Math.round(opts.width ?? iw * (opts.scale ?? 1)));
-  const targetH = Math.max(1, Math.round(opts.height ?? ih * (opts.scale ?? 1)));
-  const svgBlob = new Blob([markup], { type: 'image/svg+xml' });
-  const url = URL.createObjectURL(svgBlob);
-
-  return new Promise<Blob>((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      URL.revokeObjectURL(url);
-      const canvas = document.createElement('canvas');
-      canvas.width = targetW;
-      canvas.height = targetH;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return reject(new Error('Canvas is not supported in this browser'));
-      if (opts.type === 'image/jpeg' || opts.background) {
-        ctx.fillStyle = opts.background ?? '#ffffff';
-        ctx.fillRect(0, 0, targetW, targetH);
-      }
-      ctx.drawImage(img, 0, 0, targetW, targetH);
-      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Failed to encode image'))), opts.type, opts.quality);
-    };
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error("Couldn't render this SVG."));
-    };
-    img.src = url;
-  });
-}
-```
-
-- [ ] **Step 4: Run test to verify it passes**
-
-Run: `npm test -- --run src/tools/image/svg.lib.test.ts`
-Expected: PASS (4 assertions).
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/tools/image/svg.lib.ts src/tools/image/svg.lib.test.ts
-git commit -m "feat(image): add SVG size parsing + rasterize library"
-```
-
----
-
-## Task 8: SVG Viewer & Converter — island + registry
-
-**Files:**
-- Create: `src/islands/image/SvgViewer.tsx`
-- Modify: `src/registry/tools.ts`
-
-**Interfaces:**
-- Consumes: `parseSvgSize`, `rasterizeSvg`, `RasterizeOpts` (Task 7); `ZoomPane` (Task 6); `Dropzone`, `Button`, `Alert`, `ImageResult`; `dompurify` (`DOMPurify.sanitize`).
-
-- [ ] **Step 1: Create the island**
-
-Create `src/islands/image/SvgViewer.tsx`:
-
-```tsx
-import { useMemo, useState } from 'react';
-import DOMPurify from 'dompurify';
-import { Dropzone } from '@/components/ui/Dropzone';
-import { Button } from '@/components/ui/Button';
-import { Alert } from '@/components/ui/Alert';
-import { ImageResult } from '@/components/ui/ImageResult';
-import { ZoomPane } from '@/components/ui/ZoomPane';
-import { parseSvgSize, rasterizeSvg } from '@/tools/image/svg.lib';
-
-const FORMATS = [
-  { key: 'png', type: 'image/png' as const, label: 'PNG', lossy: false },
-  { key: 'jpeg', type: 'image/jpeg' as const, label: 'JPEG', lossy: true },
-  { key: 'webp', type: 'image/webp' as const, label: 'WebP', lossy: true },
-];
-
-export default function SvgViewer() {
-  const [markup, setMarkup] = useState('');
-  const [fmt, setFmt] = useState('png');
-  const [scale, setScale] = useState(1);
-  const [quality, setQuality] = useState(92);
-  const [result, setResult] = useState<Blob | null>(null);
-  const [error, setError] = useState('');
-
-  const onDrop = async (files: File[]) => {
-    const f = files.find((x) => x.type === 'image/svg+xml' || x.name.toLowerCase().endsWith('.svg'));
-    if (!f) { setError('Please drop an SVG file.'); return; }
-    setError('');
-    setResult(null);
-    setMarkup(await f.text());
-  };
-
-  const clean = useMemo(
-    () => (markup ? DOMPurify.sanitize(markup, { USE_PROFILES: { svg: true, svgFilters: true } }) : ''),
-    [markup],
-  );
-  const size = useMemo(() => (markup ? parseSvgSize(markup) : null), [markup]);
-  const format = FORMATS.find((f) => f.key === fmt)!;
-
-  const convert = async () => {
-    setError('');
-    setResult(null);
-    try {
-      setResult(await rasterizeSvg(clean, { type: format.type, scale, quality: format.lossy ? quality / 100 : undefined }));
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Rasterize failed');
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      <Dropzone onDrop={onDrop} accept="image/svg+xml,.svg" multiple={false}>
-        <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an SVG or click to browse</p>
-          <p className="text-sm text-muted-foreground">View it, then export to PNG, JPEG, or WebP</p>
-        </div>
-      </Dropzone>
-
-      <textarea
-        value={markup}
-        onChange={(e) => { setMarkup(e.target.value); setResult(null); }}
-        placeholder="…or paste SVG markup here"
-        className="h-32 w-full border-2 border-border bg-background p-2 font-mono text-xs"
-      />
-
-      {error && <Alert variant="error">{error}</Alert>}
-
-      {clean && (
-        <>
-          <div className="flex flex-wrap gap-4 text-sm">
-            <span className="font-mono">{size?.width} × {size?.height}</span>
-            {size?.viewBox && <span className="font-mono text-muted-foreground">viewBox: {size.viewBox.join(' ')}</span>}
-          </div>
-          <ZoomPane>
-            <div dangerouslySetInnerHTML={{ __html: clean }} />
-          </ZoomPane>
-
-          <div className="space-y-1.5">
-            <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Export format</span>
-            <div className="flex flex-wrap gap-2">
-              {FORMATS.map((f) => (
-                <Button key={f.key} variant={fmt === f.key ? 'primary' : 'secondary'} aria-pressed={fmt === f.key} onClick={() => setFmt(f.key)}>{f.label}</Button>
-              ))}
-            </div>
-          </div>
-
-          <label className="block space-y-1.5">
-            <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>Scale</span><span>{scale}×</span></span>
-            <input type="range" min={1} max={8} step={1} value={scale} onChange={(e) => setScale(Number(e.target.value))} className="w-full accent-accent" />
-          </label>
-
-          {format.lossy && (
-            <label className="block space-y-1.5">
-              <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground"><span>Quality</span><span>{quality}%</span></span>
-              <input type="range" min={10} max={100} value={quality} onChange={(e) => setQuality(Number(e.target.value))} className="w-full accent-accent" />
-            </label>
-          )}
-
-          <Button onClick={convert}>Export {format.label}</Button>
-        </>
-      )}
-
-      {result && <ImageResult blob={result} filename={`image.${fmt === 'jpeg' ? 'jpg' : fmt}`} />}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Register the tool**
-
-In `src/registry/tools.ts`, `FileImage` is already imported. Add this entry:
-
-```ts
-  {
-    id: 'svg-viewer',
-    name: 'SVG Viewer & Converter',
-    category: 'Image',
-    route: '/tools/svg-viewer',
-    keywords: ['svg', 'viewer', 'vector', 'rasterize', 'convert', 'png', 'jpeg', 'webp'],
-    icon: FileImage,
-    summary: 'View SVG files and export them as PNG, JPEG, or WebP',
-    load: () => import('@/islands/image/SvgViewer'),
-    status: 'stable'
-  },
-```
-
-Note: `FileImage` may already back another tool — an icon may be reused across tools; that's fine.
-
-- [ ] **Step 3: Verify build**
-
-Run: `npm run build`
-Expected: build succeeds; `/tools/svg-viewer` generated.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/image/SvgViewer.tsx src/registry/tools.ts
-git commit -m "feat(image): add SVG Viewer & Converter tool"
-```
-
----
-
-## Task 9: Image Viewer & Metadata — libraries (ICO + EXIF)
-
-**Files:**
-- Create: `src/tools/image/ico.lib.ts`, `src/tools/image/exif.lib.ts`
-- Test: `src/tools/image/ico.lib.test.ts`, `src/tools/image/exif.lib.test.ts`
-
-**Interfaces:**
-- Produces:
-  - `parseIcoEntries(buffer: ArrayBuffer): IcoEntry[]` where `IcoEntry = { width: number; height: number; bpp: number; offset: number; size: number }`
-  - `readExifSummary(buffer: ArrayBuffer): ExifSummary | null` where `ExifSummary = { orientation?: number; hasGps: boolean }`
-
-Both are pure byte parsers, fully unit-tested.
-
-- [ ] **Step 1: Write the failing ICO test**
-
-Create `src/tools/image/ico.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { parseIcoEntries } from './ico.lib';
-
-// Hand-build a 2-entry ICONDIR (16px and 32px), matching buildIco's layout.
-function fixture(): ArrayBuffer {
-  const count = 2;
-  const buf = new ArrayBuffer(6 + count * 16);
-  const v = new DataView(buf);
-  v.setUint16(0, 0, true); // reserved
-  v.setUint16(2, 1, true); // type = icon
-  v.setUint16(4, count, true);
-  const write = (i: number, w: number, bpp: number, size: number, offset: number) => {
-    const e = 6 + i * 16;
-    v.setUint8(e, w >= 256 ? 0 : w);
-    v.setUint8(e + 1, w >= 256 ? 0 : w);
-    v.setUint16(e + 6, bpp, true);
-    v.setUint32(e + 8, size, true);
-    v.setUint32(e + 12, offset, true);
-  };
-  write(0, 16, 32, 100, 38);
-  write(1, 32, 32, 250, 138);
-  return buf;
-}
-
-describe('parseIcoEntries', () => {
-  it('reads each directory entry', () => {
-    const entries = parseIcoEntries(fixture());
-    expect(entries).toHaveLength(2);
-    expect(entries[0]).toMatchObject({ width: 16, height: 16, bpp: 32, size: 100, offset: 38 });
-    expect(entries[1]).toMatchObject({ width: 32, height: 32, size: 250, offset: 138 });
-  });
-  it('treats a stored 0 as 256px', () => {
-    const buf = fixture();
-    new DataView(buf).setUint8(6, 0); // width byte of entry 0 -> 256
-    expect(parseIcoEntries(buf)[0].width).toBe(256);
-  });
-  it('returns [] for a non-ICO buffer', () => {
-    const buf = new ArrayBuffer(6);
-    new DataView(buf).setUint16(2, 99, true); // wrong type
-    expect(parseIcoEntries(buf)).toEqual([]);
-  });
-});
-```
-
-- [ ] **Step 2: Run to verify it fails**
-
-Run: `npm test -- --run src/tools/image/ico.lib.test.ts`
-Expected: FAIL — cannot resolve `./ico.lib`.
-
-- [ ] **Step 3: Write ico.lib**
-
-Create `src/tools/image/ico.lib.ts`:
-
-```ts
-export interface IcoEntry {
-  width: number;
-  height: number;
-  bpp: number;
-  offset: number;
-  size: number;
-}
-
-/** Parse an .ico ICONDIR into its per-image entries. Returns [] if not an ICO. */
-export function parseIcoEntries(buffer: ArrayBuffer): IcoEntry[] {
-  if (buffer.byteLength < 6) return [];
-  const v = new DataView(buffer);
-  if (v.getUint16(0, true) !== 0 || v.getUint16(2, true) !== 1) return []; // reserved=0, type=1
-  const count = v.getUint16(4, true);
-  const entries: IcoEntry[] = [];
-  for (let i = 0; i < count; i++) {
-    const e = 6 + i * 16;
-    if (e + 16 > buffer.byteLength) break;
-    const w = v.getUint8(e) || 256; // 0 means 256
-    const h = v.getUint8(e + 1) || 256;
-    entries.push({
-      width: w,
-      height: h,
-      bpp: v.getUint16(e + 6, true),
-      size: v.getUint32(e + 8, true),
-      offset: v.getUint32(e + 12, true),
-    });
-  }
-  return entries;
-}
-```
-
-- [ ] **Step 4: Run to verify ICO passes**
-
-Run: `npm test -- --run src/tools/image/ico.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 5: Write the failing EXIF test**
-
-Create `src/tools/image/exif.lib.test.ts`:
-
-```ts
-import { describe, it, expect } from 'vitest';
-import { readExifSummary } from './exif.lib';
-
-// Minimal JPEG APP1/Exif with one IFD0 tag: Orientation (0x0112) = 6.
-function exifJpeg(): ArrayBuffer {
-  const bytes: number[] = [0xff, 0xd8]; // SOI
-  // Build TIFF body (big-endian) first so we know its length.
-  const tiff: number[] = [];
-  tiff.push(0x4d, 0x4d); // 'MM' big-endian
-  tiff.push(0x00, 0x2a); // 42
-  tiff.push(0x00, 0x00, 0x00, 0x08); // IFD0 offset = 8
-  tiff.push(0x00, 0x01); // 1 entry
-  tiff.push(0x01, 0x12); // tag Orientation
-  tiff.push(0x00, 0x03); // type SHORT
-  tiff.push(0x00, 0x00, 0x00, 0x01); // count 1
-  tiff.push(0x00, 0x06, 0x00, 0x00); // value 6 (SHORT, left-justified)
-  tiff.push(0x00, 0x00, 0x00, 0x00); // next IFD = 0
-  const exif = [0x45, 0x78, 0x69, 0x66, 0x00, 0x00, ...tiff]; // "Exif\0\0" + TIFF
-  const len = exif.length + 2; // APP1 length includes the 2 length bytes
-  bytes.push(0xff, 0xe1, (len >> 8) & 0xff, len & 0xff, ...exif);
-  bytes.push(0xff, 0xd9); // EOI
-  return new Uint8Array(bytes).buffer;
-}
-
-describe('readExifSummary', () => {
-  it('reads orientation from APP1', () => {
-    const s = readExifSummary(exifJpeg());
-    expect(s?.orientation).toBe(6);
-    expect(s?.hasGps).toBe(false);
-  });
-  it('returns null when there is no Exif segment', () => {
-    expect(readExifSummary(new Uint8Array([0xff, 0xd8, 0xff, 0xd9]).buffer)).toBeNull();
-  });
-});
-```
-
-- [ ] **Step 6: Run to verify EXIF fails**
-
-Run: `npm test -- --run src/tools/image/exif.lib.test.ts`
-Expected: FAIL — cannot resolve `./exif.lib`.
-
-- [ ] **Step 7: Write exif.lib**
-
-Create `src/tools/image/exif.lib.ts`:
-
-```ts
-export interface ExifSummary {
-  orientation?: number;
-  hasGps: boolean;
-}
-
-/**
- * Minimal EXIF reader: scans JPEG APP1 for the Exif TIFF block and reads the
- * IFD0 Orientation tag (0x0112) and whether a GPS IFD pointer (0x8825) exists.
- * Returns null when there's no Exif segment. No external dependency.
- */
-export function readExifSummary(buffer: ArrayBuffer): ExifSummary | null {
-  const v = new DataView(buffer);
-  if (buffer.byteLength < 4 || v.getUint16(0) !== 0xffd8) return null; // not a JPEG
-
-  // Walk JPEG markers to find APP1 (0xFFE1) starting with "Exif\0\0".
-  let p = 2;
-  while (p + 4 <= buffer.byteLength) {
-    if (v.getUint8(p) !== 0xff) break;
-    const marker = v.getUint8(p + 1);
-    const segLen = v.getUint16(p + 2);
-    if (marker === 0xe1 && p + 4 + 6 <= buffer.byteLength) {
-      const isExif = [0x45, 0x78, 0x69, 0x66, 0x00, 0x00].every((b, i) => v.getUint8(p + 4 + i) === b);
-      if (isExif) return readTiff(v, p + 10); // TIFF header starts after "Exif\0\0"
-    }
-    if (marker === 0xda) break; // start of scan — no more metadata
-    p += 2 + segLen;
-  }
-  return null;
-}
-
-function readTiff(v: DataView, base: number): ExifSummary {
-  const little = v.getUint16(base) === 0x4949; // 'II' little-endian, 'MM' big-endian
-  const u16 = (o: number) => v.getUint16(base + o, little);
-  const u32 = (o: number) => v.getUint32(base + o, little);
-
-  const ifd0 = u32(4);
-  const summary: ExifSummary = { hasGps: false };
-  if (ifd0 + 2 > v.byteLength - base) return summary;
-  const count = u16(ifd0);
-  for (let i = 0; i < count; i++) {
-    const entry = ifd0 + 2 + i * 12;
-    const tag = u16(entry);
-    if (tag === 0x0112) summary.orientation = u16(entry + 8); // Orientation (SHORT, inline)
-    if (tag === 0x8825) summary.hasGps = true; // GPS IFD pointer present
-  }
-  return summary;
-}
-```
-
-- [ ] **Step 8: Run to verify EXIF passes**
-
-Run: `npm test -- --run src/tools/image/exif.lib.test.ts`
-Expected: PASS.
-
-- [ ] **Step 9: Commit**
-
-```bash
-git add src/tools/image/ico.lib.ts src/tools/image/ico.lib.test.ts src/tools/image/exif.lib.ts src/tools/image/exif.lib.test.ts
-git commit -m "feat(image): add ICO directory parser and minimal EXIF reader"
-```
-
----
-
-## Task 10: Image Viewer & Metadata — island + registry
-
-**Files:**
-- Create: `src/islands/image/ImageViewer.tsx`
-- Modify: `src/registry/tools.ts`
-
-**Interfaces:**
-- Consumes: `parseIcoEntries`, `IcoEntry` (Task 9); `readExifSummary` (Task 9); `ZoomPane` (Task 6); `formatBytes` (`@/tools/image/canvas.lib`); `EditInAnnotatorButton` (Task 2); `sendImageToAnnotator` not needed directly (button handles it); `Dropzone`, `Button`, `usePasteImage`.
-
-- [ ] **Step 1: Create the island**
-
-Create `src/islands/image/ImageViewer.tsx`:
-
-```tsx
-import { useEffect, useState } from 'react';
-import { Dropzone } from '@/components/ui/Dropzone';
-import { Button } from '@/components/ui/Button';
-import { ZoomPane } from '@/components/ui/ZoomPane';
-import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
-import { downloadService } from '@/services/download';
-import { formatBytes } from '@/tools/image/canvas.lib';
-import { parseIcoEntries, type IcoEntry } from '@/tools/image/ico.lib';
-import { readExifSummary, type ExifSummary } from '@/tools/image/exif.lib';
-import { usePasteImage } from '@/hooks/usePasteImage';
-
-interface Meta {
-  name: string;
-  type: string;
-  size: number;
-  width: number;
-  height: number;
-  exif: ExifSummary | null;
-  ico: IcoEntry[];
-}
-
-export default function ImageViewer() {
-  const [file, setFile] = useState<File | null>(null);
-  const [url, setUrl] = useState('');
-  const [meta, setMeta] = useState<Meta | null>(null);
-
-  const onDrop = (files: File[]) => {
-    setFile(files.find((f) => f.type.startsWith('image/') || /\.(ico|cur)$/i.test(f.name)) ?? null);
-  };
-  usePasteImage((f) => onDrop([f]));
-
-  useEffect(() => {
-    if (!file) { setUrl(''); setMeta(null); return; }
-    const objectUrl = URL.createObjectURL(file);
-    setUrl(objectUrl);
-    let alive = true;
-    (async () => {
-      const buffer = await file.arrayBuffer();
-      const isIco = file.type.includes('icon') || /\.ico$/i.test(file.name);
-      const ico = isIco ? parseIcoEntries(buffer) : [];
-      const exif = /jpe?g/i.test(file.type) ? readExifSummary(buffer) : null;
-      const img = new Image();
-      img.onload = () => {
-        if (!alive) return;
-        setMeta({ name: file.name, type: file.type || (isIco ? 'image/x-icon' : 'unknown'), size: file.size, width: img.naturalWidth, height: img.naturalHeight, exif, ico });
-      };
-      img.src = objectUrl;
-    })();
-    return () => { alive = false; URL.revokeObjectURL(objectUrl); };
-  }, [file]);
-
-  const row = (label: string, value: React.ReactNode) => (
-    <div className="flex justify-between gap-4 border-b border-border py-1 text-sm">
-      <span className="font-bold uppercase tracking-wide text-muted-foreground">{label}</span>
-      <span className="font-mono text-right">{value}</span>
-    </div>
-  );
-
-  return (
-    <div className="space-y-4">
-      <Dropzone onDrop={onDrop} accept="image/*,.ico" multiple={false}>
-        <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an image or click to browse</p>
-          <p className="text-sm text-muted-foreground">View any image (incl. .ico) with its metadata · or paste (⌘V)</p>
-        </div>
-      </Dropzone>
-
-      {url && (
-        <ZoomPane>
-          <img src={url} alt={file?.name ?? 'image'} />
-        </ZoomPane>
-      )}
-
-      {meta && (
-        <div className="space-y-1">
-          {row('Name', meta.name)}
-          {row('Type', meta.type)}
-          {row('Size', formatBytes(meta.size))}
-          {row('Dimensions', `${meta.width} × ${meta.height}`)}
-          {meta.exif ? (
-            <>
-              {row('Orientation', meta.exif.orientation ?? '—')}
-              {row('GPS', meta.exif.hasGps ? 'present' : 'none')}
-            </>
-          ) : (
-            /jpe?g/i.test(meta.type) ? row('EXIF', 'No EXIF metadata') : null
-          )}
-          {meta.ico.length > 0 && row('ICO sizes', meta.ico.map((e) => `${e.width}×${e.height}`).join(', '))}
-        </div>
-      )}
-
-      {file && (
-        <div className="flex flex-wrap gap-2">
-          <Button variant="secondary" onClick={() => downloadService.download(file, file.name)}>Download</Button>
-          <EditInAnnotatorButton blob={() => file} filename={file.name} />
-          <a href="/tools/image-convert" className="inline-flex items-center border-2 border-border bg-background px-3 py-2 text-sm font-bold shadow-brutal-sm hover:bg-muted">Convert…</a>
-        </div>
-      )}
-    </div>
-  );
-}
-```
-
-Note on the "Edit in Annotator" for SVG/ICO: the handoff passes the original file blob; the annotator decodes it with `createImageBitmap`, which handles raster images. (SVG/ICO annotation is best-effort, consistent with the annotator's existing capabilities.)
-
-- [ ] **Step 2: Register the tool**
-
-In `src/registry/tools.ts`, add `Eye` to the lucide import line, then add:
-
-```ts
-  {
-    id: 'image-viewer',
-    name: 'Image Viewer & Metadata',
-    category: 'Image',
-    route: '/tools/image-viewer',
-    keywords: ['image', 'viewer', 'metadata', 'exif', 'ico', 'favicon', 'dimensions', 'inspect'],
-    icon: Eye,
-    summary: 'View any image with dimensions, EXIF, and ICO sizes',
-    load: () => import('@/islands/image/ImageViewer'),
-    status: 'stable'
-  },
-```
-
-- [ ] **Step 3: Verify build**
-
-Run: `npm run build`
-Expected: build succeeds; `/tools/image-viewer` generated.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands/image/ImageViewer.tsx src/registry/tools.ts
-git commit -m "feat(image): add Image Viewer & Metadata tool"
-```
-
----
-
-## Task 11: Wire "Edit in Annotator" into the manual tools
-
-**Files:**
-- Modify: `src/islands/media/Screenshot.tsx`, `src/islands/image/BackgroundRemove.tsx`, `src/islands/image/FaceBlur.tsx`, `src/islands/image/PortraitBlur.tsx`, `src/islands/image/ObjectRemove.tsx`, `src/islands/image/ImageUpscale.tsx`, `src/islands/image/QrGen.tsx`, `src/islands/pdf/PdfToImage.tsx`, `src/islands/image/SignaturePad.tsx`
-
-**Interfaces:**
-- Consumes: `EditInAnnotatorButton` (Task 2).
-
-These tools render Download/Copy actions directly rather than via `ImageResult`, so each needs the button added next to its existing image-output actions. Each is one edit + one build check. The exact paths may differ slightly; Step 1 locates them.
-
-- [ ] **Step 1: Locate each tool's result-action block**
-
-Run:
-```bash
-grep -rln "downloadService.download\|CopyImageButton" src/islands/media/Screenshot.tsx src/islands/image/BackgroundRemove.tsx src/islands/image/FaceBlur.tsx src/islands/image/PortraitBlur.tsx src/islands/image/ObjectRemove.tsx src/islands/image/ImageUpscale.tsx src/islands/image/QrGen.tsx src/islands/pdf/PdfToImage.tsx src/islands/image/SignaturePad.tsx
-```
-Expected: confirms each file and that it has an image-output action area. (If a path differs, run `grep -rl "CopyImageButton" src/islands` to find the correct one.)
-
-- [ ] **Step 2: Add the button in each tool (example: Screenshot)**
-
-In `src/islands/media/Screenshot.tsx`, add the import:
-```tsx
-import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
-```
-and, next to the existing `<CopyImageButton blob={result} />` (around line 467), add:
-```tsx
-<EditInAnnotatorButton blob={result} filename={`screenshot.${fmt}`} />
-```
-
-Apply the same pattern in each of the other eight tools: import `EditInAnnotatorButton`, then render `<EditInAnnotatorButton blob={<the result blob variable>} filename={<the tool's output filename>} />` immediately after that tool's Copy/Download button for its image output. Use the blob variable already in scope (e.g. `result`, `output`, `blob`); for `PdfToImage`, add it inside the per-page action row using that page's blob; for `QrGen` and `SignaturePad`, use their PNG blob.
-
-- [ ] **Step 3: Build after each edit (or after all)**
-
-Run: `npm run build`
-Expected: build succeeds — every modified tool type-checks and the button renders.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/islands
-git commit -m "feat(handoff): add Edit in Annotator to manual image-output tools"
-```
-
----
-
-## Task 12: Full verification
-
-- [ ] **Step 1: Run the whole test suite**
-
-Run: `npm test -- --run`
-Expected: all tests pass, including the new `handoff`, `mono.lib`, `svg.lib`, `ico.lib`, `exif.lib` suites.
-
-- [ ] **Step 2: Production build**
-
-Run: `npm run build`
-Expected: succeeds; the three new routes exist under `dist/tools/`:
-```bash
-ls dist/tools | grep -E "monochrome|svg-viewer|image-viewer"
-```
-
-- [ ] **Step 3: Manual smoke test (dev server)**
-
-Run: `npm run dev`, then verify:
-- `/tools/monochrome` — drop an image, toggle modes, move threshold, download + "Edit in Annotator" opens annotator with the mono image.
-- `/tools/svg-viewer` — drop/paste an SVG, zoom, export PNG/JPEG/WebP.
-- `/tools/image-viewer` — drop a JPEG (see EXIF orientation), drop an .ico (see sizes).
-- Any `ImageResult` tool (e.g. Image Converter) now shows "Edit in Annotator".
-
-- [ ] **Step 4: Final commit if any fixes were needed**
-
-```bash
-git add -A
-git commit -m "chore(image): finalize image tools + annotator handoff"
-```
-
----
-
-## Self-Review
-
-**1. Spec coverage:**
-- SVG Viewer & Converter → Tasks 7–8. ✓
-- Image Viewer & Metadata (EXIF + multi-size ICO) → Tasks 9–10. ✓
-- Monochrome (grayscale/bw/dither) → Tasks 4–5. ✓
-- Annotator handoff service + button + annotator mount hook + ResultActions + manual tools → Tasks 1, 2, 3, 11. ✓
-- Shared ZoomPane → Task 6. ✓
-- Registry entries → Tasks 5, 8, 10. ✓
-
-**2. Placeholder scan:** No TBD/TODO; every code step has complete code; no "add error handling" hand-waves. ✓
-
-**3. Type consistency:** `takePendingImage`/`putPendingImage`/`sendImageToAnnotator`/`isFresh` consistent across Tasks 1–3, 11. `MonoMode` values `'grayscale'|'bw'|'dither'` match between lib (Task 4) and island (Task 5). `RasterizeOpts.type` union matches the island's `FORMATS` types (Task 8). `IcoEntry`/`ExifSummary` shapes consistent between Tasks 9 and 10. `EditInAnnotatorButton` prop `blob` accepts `Blob | (() => …) | null`, matching both the `ResultActions` (plain Blob) and `ImageViewer`/manual-tool (thunk) call sites. ✓
diff --git a/docs/superpowers/specs/2026-07-12-goodwebtools-phase0-foundation-design.md b/docs/superpowers/specs/2026-07-12-goodwebtools-phase0-foundation-design.md
deleted file mode 100644
index dd0c2b6..0000000
--- a/docs/superpowers/specs/2026-07-12-goodwebtools-phase0-foundation-design.md
+++ /dev/null
@@ -1,1380 +0,0 @@
-# GoodWebTools.com - Phase 0: Foundation Design
-
-**Date:** 2026-07-12  
-**Phase:** 0 (Foundation)  
-**Status:** Design Approved  
-**Next Phases:** 1-8 (Sequential implementation after Phase 0 validation)
-
----
-
-## Executive Summary
-
-Phase 0 establishes the architectural foundation for GoodWebTools.com - a privacy-first, client-side utility suite. This phase delivers:
-
-- **Astro + React + Tailwind** static site with View Transitions
-- **Layered services architecture** for maximum code reuse across 50+ planned tools
-- **Command palette with fuzzy search** (⌘K/Ctrl+K) - instant tool discovery across all tools
-- **Full PWA support** with offline capability (the privacy proof)
-- **Cloudflare Pages deployment** with cross-origin isolation headers
-- **Hash File demo tool** to validate the complete pipeline
-- **Performance budget:** <120KB gzipped initial shell
-
-All subsequent phases (1-8) build on this foundation, adding tools incrementally while maintaining the core architecture.
-
----
-
-## 1. Project Structure & Architecture
-
-### Directory Layout
-
-```
-gwt/
-├── src/
-│   ├── pages/                    # Astro routes (static HTML)
-│   │   ├── index.astro          # Homepage with tool grid
-│   │   ├── privacy.astro        # Privacy/verification page
-│   │   └── tools/
-│   │       └── [tool].astro     # Dynamic route per tool
-│   ├── layouts/
-│   │   └── Base.astro           # Root layout: <head>, ViewTransitions, shell slot
-│   ├── components/
-│   │   ├── shell/               # Shell components (persisted)
-│   │   │   ├── ShellIsland.tsx  # Nav + command palette + theme toggle
-│   │   │   ├── CommandPalette.tsx
-│   │   │   └── ThemeToggle.tsx
-│   │   └── ui/                  # Reusable UI components
-│   │       ├── Dropzone.tsx
-│   │       ├── ProgressBar.tsx
-│   │       ├── FileList.tsx
-│   │       ├── CopyImageButton.tsx  # Copy an image result to the clipboard
-│   │       └── ResultActions.tsx    # Download (+ Copy image for image blobs)
-│   ├── islands/                 # Per-tool React islands (lazy loaded)
-│   │   └── demo/
-│   │       └── HashDemo.tsx     # Validation tool island
-│   ├── tools/                   # Pure logic (framework-agnostic)
-│   │   └── demo/
-│   │       ├── hash.lib.ts      # Hash logic
-│   │       └── hash.worker.ts   # Worker entry
-│   ├── services/                # Shared singleton services
-│   │   ├── file.service.ts      # FileService
-│   │   ├── worker.service.ts    # WorkerPool
-│   │   ├── asset.service.ts     # AssetCache
-│   │   ├── download.service.ts  # DownloadService
-│   │   ├── clipboard.service.ts # ClipboardService (copy images out to clipboard)
-│   │   ├── progress.service.ts  # Progress/Toast
-│   │   └── persistence.service.ts  # PersistenceService (auto-save, unsaved work guard)
-│   ├── registry/                # Tool registry
-│   │   ├── tools.ts             # Tool manifest (ToolDef[])
-│   │   └── categories.ts        # Category definitions
-│   ├── hooks/                   # React hooks
-│   │   ├── useWorker.ts         # Worker integration hook
-│   │   └── usePersistence.ts    # Persistence & unsaved work guard hook
-│   └── styles/
-│       └── global.css           # Tailwind imports + base styles
-├── public/
-│   ├── wasm/                    # Self-hosted WASM binaries
-│   ├── icon-192.png             # PWA icons
-│   ├── icon-512.png
-│   └── manifest.json            # PWA manifest
-├── _headers                     # Cloudflare: COOP/COEP/CSP
-├── astro.config.mjs
-├── tailwind.config.mjs
-├── tsconfig.json
-└── package.json
-```
-
-### Architectural Principles
-
-1. **Pages are dumb** - Astro pages just mount islands, no logic
-2. **Islands are views** - React islands handle UI and call services
-3. **Tools are pure** - Logic in `/tools` is framework-agnostic, testable
-4. **Services are singletons** - One WorkerPool, one AssetCache, etc.
-5. **Registry drives everything** - Single manifest for routes, nav, search, lazy loading
-
----
-
-## 2. Tool Registry System
-
-The tool registry (`src/registry/tools.ts`) is the heart of the system - a typed manifest that drives navigation, routing, search, and lazy loading.
-
-### ToolDef Interface
-
-```typescript
-interface ToolDef {
-  id: string;                 // 'hash-demo'
-  name: string;               // 'Hash File'
-  category: Category;         // 'Dev' | 'PDF' | 'Image' | 'Files' | 'Draw' | 'Media'
-  route: string;              // '/tools/hash-demo'
-  keywords: string[];         // For command palette search
-  icon: LucideIcon;          // From lucide-react
-  summary: string;           // Short description
-  load: () => Promise<{      // Dynamic import for code splitting
-    default: React.ComponentType
-  }>;
-  needsIsolation?: boolean;  // Requires COOP/COEP (for Phase 7)
-  assets?: AssetRef[];       // WASM/model URLs + sizes
-  status: 'stable' | 'beta' | 'experimental';
-}
-
-interface AssetRef {
-  url: string;
-  byteSize: number;          // Size in bytes
-  type: 'wasm' | 'model' | 'font' | 'image' | 'other';
-  description: string;
-}
-```
-
-### Example Registry Entry
-
-```typescript
-const hashDemo: ToolDef = {
-  id: 'hash-demo',
-  name: 'Hash File',
-  category: 'Dev',
-  route: '/tools/hash-demo',
-  keywords: ['hash', 'sha256', 'checksum', 'demo'],
-  icon: Hash,
-  summary: 'Generate SHA-256 hash (validation demo)',
-  load: () => import('@/islands/demo/HashDemo'),
-  status: 'experimental'
-};
-```
-
-### How It's Used
-
-1. **Dynamic routing** - `[tool].astro` looks up the tool by route, loads its island
-2. **Universal search (Command Palette)** - Fuzzy search across `name`, `keywords`, `summary`, and `category`
-3. **Homepage grid** - Groups tools by `category`, displays `icon` + `name` + `summary`
-4. **Lazy loading** - `load()` only called when tool page is accessed
-5. **Asset prefetch** - Optional: prefetch hints for `assets` when hovering tool card
-
-### Search Functionality
-
-**The registry powers instant, client-side search via the command palette (⌘K/Ctrl+K):**
-
-**Search algorithm:**
-```typescript
-function searchTools(query: string, tools: ToolDef[]): ToolDef[] {
-  const lowerQuery = query.toLowerCase();
-  
-  return tools
-    .map(tool => ({
-      tool,
-      score: calculateScore(tool, lowerQuery)
-    }))
-    .filter(({ score }) => score > 0)
-    .sort((a, b) => b.score - a.score)
-    .map(({ tool }) => tool);
-}
-
-function calculateScore(tool: ToolDef, query: string): number {
-  let score = 0;
-  
-  // Exact name match (highest priority)
-  if (tool.name.toLowerCase().includes(query)) score += 100;
-  
-  // Keyword match
-  if (tool.keywords.some(k => k.toLowerCase().includes(query))) score += 50;
-  
-  // Summary match
-  if (tool.summary.toLowerCase().includes(query)) score += 30;
-  
-  // Category match
-  if (tool.category.toLowerCase().includes(query)) score += 20;
-  
-  // Fuzzy match bonus (for typos)
-  score += fuzzyMatch(query, tool.name.toLowerCase());
-  
-  return score;
-}
-```
-
-**Search features:**
-- **Instant results** - All tools indexed in memory, no backend calls
-- **Fuzzy matching** - Handles typos and partial matches
-- **Ranked results** - Most relevant tools shown first
-- **Keyboard shortcuts:**
-  - `⌘K` or `Ctrl+K` - Open search palette
-  - `Escape` - Close palette
-  - `↑↓` - Navigate results
-  - `Enter` - Open selected tool
-  - `Tab` - Cycle through categories
-
-**Example searches:**
-- `"pdf"` → Shows all PDF tools (merge, split, compress, etc.)
-- `"hash"` → Shows Hash File demo
-- `"image compress"` → Shows image compressor
-- `"sha256"` → Matches Hash File via keywords
-
----
-
-## 3. Shared Services Architecture
-
-Six core singleton services that all tools share.
-
-### 1. FileService
-
-Normalizes file input across multiple sources.
-
-**API:**
-```typescript
-class FileService {
-  // Get files from any input source
-  async getFiles(source: FileSource): Promise<File[]>
-  
-  // For large files: get streaming handle
-  async getFileHandle(file: File): Promise<FileSystemFileHandle | null>
-  
-  // OPFS scratch space for large file operations
-  async createTempFile(name: string): Promise<FileSystemFileHandle>
-  async cleanupTempFiles(): Promise<void>
-}
-```
-
-**Supported sources:**
-- Drag & drop onto Dropzone
-- `<input type="file">` click
-- Clipboard paste (images, text) in; **copy image results back out** (ClipboardService)
-- File System Access API (when available)
-
-### 2. WorkerPool
-
-Manages worker lifecycle across tools.
-
-**API:**
-```typescript
-class WorkerPool {
-  // Get or create worker for a tool
-  async getWorker<T>(toolId: string, workerUrl: string): Promise<Remote<T>>
-  
-  // Terminate worker (called on route change)
-  terminateWorker(toolId: string): void
-  
-  // Cleanup all workers
-  terminateAll(): void
-}
-```
-
-**Behavior:**
-- Spin up worker on tool open
-- Terminate on route-away to free memory
-- Cap concurrent workers by `navigator.hardwareConcurrency`
-- Comlink RPC for ergonomic worker communication
-
-### 3. AssetCache
-
-Fetch-once, cache-forever for WASM/models with expiration.
-
-**API:**
-```typescript
-class AssetCache {
-  private readonly DEFAULT_TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds
-  private readonly PROGRESS_THRESHOLD_BYTES = 1_024_000; // 1 MB
-  
-  // Fetch asset, return cached bytes if available
-  async fetch(url: string, options?: {
-    integrity?: string;     // SRI hash
-    maxAgeMs?: number;      // TTL in milliseconds
-    onProgress?: (loadedBytes: number, totalBytes: number) => void;
-    showProgress?: boolean; // Auto-detect if > 1MB
-  }): Promise<ArrayBuffer>
-  
-  // Check cache status without fetching
-  async isCached(url: string): Promise<boolean>
-}
-```
-
-**Features:**
-- Cache API for WASM binaries
-- IndexedDB for large ML models
-- SRI hash verification
-- Progress events for downloads > 1MB
-- Auto-show progress bar for assets > 1MB
-- Expiration tracking with timestamps
-
-### 4. DownloadService
-
-Unified download handling.
-
-**API:**
-```typescript
-class DownloadService {
-  // Trigger download (uses File System Access if available)
-  async download(blob: Blob, filename: string): Promise<void>
-  
-  // Batch download (zip multiple files)
-  async downloadZip(files: BlobFile[], zipName: string): Promise<void>
-}
-```
-
-**Behavior:**
-- File System Access API for "Save As" dialog (when available)
-- Fallback to `<a download>` blob URL
-
-### 4b. ClipboardService
-
-Copy image results to the system clipboard (complements paste-in support), so
-users can Download **or** Copy from any image tool result.
-
-**API:**
-```typescript
-class ClipboardService {
-  get supported(): boolean  // async Clipboard API + ClipboardItem present
-  // Accepts a blob or a lazy producer; re-encodes non-PNG to PNG first.
-  async copyImage(source: Blob | (() => Blob | Promise<Blob>)): Promise<void>
-}
-```
-
-**Behavior:**
-- Writes `image/png` (the only format browsers reliably accept); non-PNG
-  outputs (WebP/JPEG/GIF/…) are re-encoded via a canvas first.
-- The PNG is passed to `ClipboardItem` as a **promise** and `write()` is called
-  **synchronously** in the click handler — Safari drops the user-activation if
-  the re-encode is `await`-ed before `write()`.
-- Surfaced through the reusable `CopyImageButton` (hidden where unsupported;
-  shows brief Copied / Copy failed feedback).
-
-### 5. Progress/Toast
-
-Unified progress bars and notifications.
-
-**API:**
-```typescript
-class ProgressService {
-  // Show progress bar
-  startProgress(id: string, label: string): void
-  updateProgress(id: string, percent: number): void
-  completeProgress(id: string): void
-  
-  // Show toast
-  toast(message: string, type: 'success' | 'error' | 'info'): void
-}
-```
-
-### 6. PersistenceService
-
-Data persistence and unsaved work protection for stateful tools (Excalidraw, diagrams, editors).
-
-**API:**
-```typescript
-class PersistenceService {
-  // Auto-save to IndexedDB (for drafts)
-  async autoSave(toolId: string, data: any): Promise<void>
-  async loadAutoSave(toolId: string): Promise<any | null>
-  async clearAutoSave(toolId: string): Promise<void>
-  
-  // Save to user's disk (File System Access API)
-  async saveToFile(data: Blob, suggestedName: string, fileHandle?: FileSystemFileHandle): Promise<FileSystemFileHandle | null>
-  async loadFromFile(accept?: string[]): Promise<{ data: ArrayBuffer; handle: FileSystemFileHandle } | null>
-  
-  // Track unsaved changes
-  markDirty(toolId: string): void
-  markClean(toolId: string): void
-  isDirty(toolId: string): boolean
-  
-  // Confirm before navigation if dirty
-  enableNavigationGuard(toolId: string): void
-  disableNavigationGuard(toolId: string): void
-}
-```
-
-**Features:**
-
-1. **Auto-save to IndexedDB:**
-   - Periodic auto-save every 30 seconds (configurable)
-   - Per-tool storage with toolId as key
-   - Automatic on tool mount/unmount
-   - "Draft recovered" notification on reload
-
-2. **Save to disk (File System Access API):**
-   - "Save" button uses File System Access API when available
-   - Keeps file handle for quick re-save (no dialog)
-   - "Save As" to pick new location
-   - Fallback to download blob if API unavailable
-   - Suggested file extensions per tool (`.excalidraw`, `.json`, etc.)
-
-3. **Unsaved work protection:**
-   - Track dirty state per tool
-   - Browser `beforeunload` event warning: "You have unsaved work. Leave anyway?"
-   - Astro View Transitions navigation guard (same warning)
-   - Toast reminder: "Don't forget to save your work"
-   - Clear dirty flag after successful save
-
-**Implementation:**
-
-```typescript
-// Example: Excalidraw tool integration
-export default function ExcalidrawTool() {
-  const [elements, setElements] = useState([]);
-  const [fileHandle, setFileHandle] = useState<FileSystemFileHandle | null>(null);
-  const persistence = usePersistence('excalidraw');
-  
-  // Load auto-save on mount
-  useEffect(() => {
-    const loadDraft = async () => {
-      const draft = await persistence.loadAutoSave();
-      if (draft) {
-        setElements(draft.elements);
-        toast('Draft recovered', 'info');
-      }
-    };
-    loadDraft();
-  }, []);
-  
-  // Auto-save every 30 seconds
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (elements.length > 0) {
-        persistence.autoSave({ elements });
-      }
-    }, 30_000);
-    return () => clearInterval(interval);
-  }, [elements]);
-  
-  // Track changes
-  const handleChange = (newElements: any[]) => {
-    setElements(newElements);
-    persistence.markDirty();
-  };
-  
-  // Save to file
-  const handleSave = async () => {
-    const blob = new Blob([JSON.stringify({ elements })], { type: 'application/json' });
-    const handle = await persistence.saveToFile(blob, 'drawing.excalidraw', fileHandle);
-    if (handle) {
-      setFileHandle(handle);
-      persistence.markClean();
-      toast('Saved successfully', 'success');
-    }
-  };
-  
-  // Load from file
-  const handleLoad = async () => {
-    const result = await persistence.loadFromFile(['.excalidraw', '.json']);
-    if (result) {
-      const data = JSON.parse(new TextDecoder().decode(result.data));
-      setElements(data.elements);
-      setFileHandle(result.handle);
-      persistence.markClean();
-    }
-  };
-  
-  // Enable navigation guard
-  useEffect(() => {
-    persistence.enableNavigationGuard();
-    return () => persistence.disableNavigationGuard();
-  }, []);
-  
-  return (
-    <div>
-      <div className="toolbar">
-        <button onClick={handleLoad}>Open</button>
-        <button onClick={handleSave}>Save</button>
-        <button onClick={() => handleSave()}>Save As</button>
-      </div>
-      <Excalidraw elements={elements} onChange={handleChange} />
-    </div>
-  );
-}
-```
-
-**Navigation guard implementation:**
-
-```typescript
-// Browser beforeunload
-window.addEventListener('beforeunload', (e) => {
-  if (persistenceService.isDirty('excalidraw')) {
-    e.preventDefault();
-    e.returnValue = ''; // Modern browsers show generic message
-  }
-});
-
-// Astro View Transitions guard
-document.addEventListener('astro:before-swap', (e) => {
-  if (persistenceService.isDirty('excalidraw')) {
-    const confirmed = confirm('You have unsaved work. Leave anyway?');
-    if (!confirmed) {
-      e.preventDefault();
-    }
-  }
-});
-```
-
-**Tools that use PersistenceService:**
-- Excalidraw/whiteboard (Phase 6)
-- Diagram/flowchart tools (Phase 6)
-- Multi-cursor text editor (Phase 1)
-- Markdown editor (Phase 1)
-- HTML playground (Phase 1)
-- Any tool with stateful editing
-
----
-
-## 4. Shell, Navigation & Theme
-
-### Persisted Shell Island
-
-The shell (`src/components/shell/ShellIsland.tsx`) survives page navigation via Astro's `transition:persist`.
-
-**Components:**
-
-1. **Top navigation bar:**
-   - Logo/site name (links to home)
-   - Theme toggle (light/dark)
-   - Search button with ⌘K shortcut hint (triggers command palette)
-
-2. **Command Palette - Universal Tool Search** (via `cmdk`):
-   - **Keyboard shortcut:** ⌘K (Mac) / Ctrl+K (Windows/Linux)
-   - **Fuzzy search** across all available tools:
-     - Searches tool `name` (e.g., "PDF Merge")
-     - Searches `keywords` (e.g., "hash", "checksum", "sha256")
-     - Searches `summary` descriptions
-     - Searches `category` (e.g., "PDF", "Image", "Dev")
-   - **Keyboard-first navigation:**
-     - Arrow keys to navigate results
-     - Enter to open selected tool
-     - Escape to close palette
-     - Tab to cycle through categories
-   - **Results display:**
-     - Tool icon (from lucide-react)
-     - Tool name (highlighted matching text)
-     - Category badge
-     - Short summary
-   - **Instant results** - no latency, all tools indexed client-side
-   - **Accessible** - ARIA labels, screen reader support
-
-3. **Global state** (via Nanostores):
-   - Current theme ('light' | 'dark')
-   - Worker status (for progress indicators)
-   - Search history (recent tools, optional)
-   - Persisted to localStorage
-
-### Design System — Neo-Brutalism
-
-**[DECISION]** The visual language is **Neo-Brutalism**: cream/near-black surfaces,
-thick solid outlines, hard offset shadows (no blur), sharp corners, and bold
-uppercase display type. Chosen to make a utility suite feel distinctive and
-confident rather than generic. Sourced via the `ui-ux-pro-max` design skill.
-
-**Design principles:**
-- **Thick borders** — 2–3px solid outlines (`--border`) on every surface, input, and control
-- **Hard offset shadows** — solid blocks, *no blur* (e.g. `4px 4px 0 0`), color = `--shadow`
-- **Sharp corners** — global `border-radius: 0` (badges/dots may be pills)
-- **Bold typography** — self-hosted **Space Grotesk**, headings/labels uppercase, weights 400–700
-- **Mechanical press** — interactive elements lift on hover (larger shadow) and slam down on active (shadow collapses, element shifts into it); disabled by `prefers-reduced-motion`
-- **High-saturation color blocking** — category color chips, violet accent, black/white frames
-
-**Typography — privacy-safe self-hosting:**
-- Space Grotesk `woff2` is served **same-origin** from `/fonts/` and preloaded.
-- **No Google Fonts CDN** — loading fonts cross-origin would break the "zero external requests" privacy guarantee. Self-hosting keeps every asset first-party.
-
-**[DECISION] Layout — fluid width, mobile-first:**
-- Content pages are **fluid width**, not a narrow centered column. A single
-  `.page-container` (`mx-auto w-full max-w-[100rem] px-4 sm:px-6 lg:px-8`) is
-  shared by the header and every page so content aligns with the nav and uses
-  the available width. Capped at **100rem (1600px)** so text/code tools don't
-  hit unreadable line lengths on ultrawide monitors.
-- **Mobile-first & responsive:** base layout is single-column with `px-4`
-  gutters; gutters widen at `sm`/`lg`. Every multi-pane tool (Markdown editor,
-  QR, diff) uses `grid-cols-1 md:grid-cols-2` so it collapses to one column on
-  phones. Tool-card grid scales `1 → 2 → 3 → 4` columns across breakpoints.
-- **Long-form reading** (privacy page) keeps a narrower `max-w-3xl` measure for
-  readability; tool surfaces stay fluid.
-
-```css
-@layer components {
-  .page-container { @apply mx-auto w-full max-w-[100rem] px-4 sm:px-6 lg:px-8; }
-}
-```
-
-**Configuration:**
-- Manual toggle only (no auto system preference)
-- Tailwind dark mode via `class` strategy: `<html class="dark">`
-- Theme stored in localStorage, applied on load to prevent flash
-
-**Tailwind configuration:**
-```javascript
-// tailwind.config.mjs
-export default {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        background: 'rgb(var(--background) / <alpha-value>)',
-        foreground: 'rgb(var(--foreground) / <alpha-value>)',
-        border: 'rgb(var(--border) / <alpha-value>)',
-        muted: 'rgb(var(--muted) / <alpha-value>)',
-        'muted-foreground': 'rgb(var(--muted-foreground) / <alpha-value>)',
-        accent: 'rgb(var(--accent) / <alpha-value>)',
-        'accent-foreground': 'rgb(var(--accent-foreground) / <alpha-value>)',
-      },
-      fontFamily: { sans: ['Space Grotesk', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
-      borderRadius: { DEFAULT: '0px', sm: '0px', md: '0px', lg: '0px', xl: '0px', full: '9999px' },
-      boxShadow: {
-        brutal: '4px 4px 0 0 rgb(var(--shadow))',
-        'brutal-sm': '2px 2px 0 0 rgb(var(--shadow))',
-        'brutal-lg': '6px 6px 0 0 rgb(var(--shadow))',
-      },
-    }
-  }
-}
-```
-
-**CSS variables (Neo-Brutalism palette):**
-```css
-:root {
-  --background: 255 253 245;      /* Cream */
-  --foreground: 10 10 10;         /* Near black */
-  --border: 10 10 10;             /* Solid black outlines */
-  --muted: 255 255 255;           /* White surface blocks */
-  --muted-foreground: 82 82 82;   /* Gray text */
-  --accent: 124 58 237;           /* Violet */
-  --accent-foreground: 255 255 255;
-  --shadow: 10 10 10;             /* Hard offset shadow */
-}
-
-.dark {
-  --background: 10 10 10;         /* Near black */
-  --foreground: 250 250 250;      /* Off white */
-  --border: 250 250 250;          /* Light outlines pop on dark */
-  --muted: 26 26 26;              /* Dark surface blocks */
-  --muted-foreground: 163 163 163;
-  --accent: 167 139 250;          /* Lighter violet */
-  --accent-foreground: 10 10 10;
-  --shadow: 250 250 250;          /* Light hard shadow on dark */
-}
-```
-
-**Brutalist utility classes (global.css):**
-```css
-.shadow-brutal    { box-shadow: 4px 4px 0 0 rgb(var(--shadow)); }
-.press-brutal     { transition: transform 100ms, box-shadow 100ms; }
-.press-brutal:hover  { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 rgb(var(--shadow)); }
-.press-brutal:active { transform: translate(2px,2px);  box-shadow: 0 0 0 0 rgb(var(--shadow)); }
-@media (prefers-reduced-motion: reduce) {
-  .press-brutal, .press-brutal:hover, .press-brutal:active { transition: none; transform: none; }
-}
-```
-
-### Navigation Flow
-
-1. User clicks tool card or uses ⌘K → navigate to `/tools/hash-demo`
-2. Astro View Transition animates page change
-3. Shell persists (no re-mount), tool island loads
-4. WorkerPool spins up worker for that tool
-5. On route-away, worker terminates to free memory
-
----
-
-## 5. Worker Pipeline & Validation Tool
-
-### Worker Architecture
-
-Every tool follows the pattern: Island → Comlink → Worker → Logic → Results
-
-**Standard worker setup:**
-
-```typescript
-// src/tools/demo/hash.worker.ts
-import { expose } from 'comlink';
-
-const api = {
-  async hashFile(
-    fileBuffer: ArrayBuffer,
-    onProgress: (percent: number) => void
-  ): Promise<string> {
-    // Use WebCrypto
-    const hashBuffer = await crypto.subtle.digest('SHA-256', fileBuffer);
-    
-    // Report progress
-    onProgress(100);
-    
-    // Return hex string
-    return Array.from(new Uint8Array(hashBuffer))
-      .map(b => b.toString(16).padStart(2, '0'))
-      .join('');
-  }
-};
-
-export type HashWorkerAPI = typeof api;
-expose(api);
-```
-
-**Island using the worker:**
-
-```typescript
-// src/islands/demo/HashDemo.tsx
-import { useState } from 'react';
-import { proxy } from 'comlink';
-import { useWorker } from '@/hooks/useWorker';
-import type { HashWorkerAPI } from '@/tools/demo/hash.worker';
-
-export default function HashDemo() {
-  const [hash, setHash] = useState('');
-  const [progress, setProgress] = useState(0);
-  
-  const workerApi = useWorker<HashWorkerAPI>(
-    'hash-demo',
-    new URL('@/tools/demo/hash.worker.ts', import.meta.url)
-  );
-  
-  const handleFile = async (file: File) => {
-    const buffer = await file.arrayBuffer();
-    const result = await workerApi.hashFile(
-      buffer,
-      proxy((pct) => setProgress(pct))
-    );
-    setHash(result);
-  };
-  
-  return (
-    <Dropzone onDrop={handleFile}>
-      {hash && <div>SHA-256: {hash}</div>}
-      {progress > 0 && <ProgressBar percent={progress} />}
-    </Dropzone>
-  );
-}
-```
-
-**useWorker Hook:**
-
-```typescript
-// src/hooks/useWorker.ts
-import { useEffect, useRef } from 'react';
-import { wrap, Remote } from 'comlink';
-import { workerPool } from '@/services/worker.service';
-
-export function useWorker<T>(toolId: string, workerUrl: URL): Remote<T> {
-  const workerRef = useRef<Remote<T>>();
-  
-  useEffect(() => {
-    workerRef.current = workerPool.getWorker<T>(toolId, workerUrl.href);
-    
-    return () => {
-      workerPool.terminateWorker(toolId);
-    };
-  }, [toolId, workerUrl]);
-  
-  return workerRef.current!;
-}
-```
-
-### Validation Tool: Hash File Demo
-
-**Purpose:** Prove the entire pipeline works before building real tools in Phase 1.
-
-**Features:**
-- **Input:** Drag & drop any file
-- **Process:** Calculate SHA-256 hash in worker using WebCrypto
-- **Output:** Display hex hash, show download button to save `.txt` with hash
-
-**Validates:**
-- Island → Worker communication (Comlink)
-- FileService integration (Dropzone)
-- Worker lifecycle (spin up, terminate on route-away)
-- DownloadService (save hash as text file)
-- Progress reporting
-- Cross-origin isolation headers (needed for future SharedArrayBuffer)
-
-**Ships as a real tool** - useful for checksum verification.
-
----
-
-## 6. PWA & Offline Strategy
-
-### Configuration
-
-Using `@vite-pwa/astro` + Workbox for full PWA support.
-
-```typescript
-// astro.config.mjs (PWA integration)
-VitePWA({
-  registerType: 'autoUpdate',
-  manifest: {
-    name: 'GoodWebTools',
-    short_name: 'GWT',
-    description: 'Privacy-first client-side utilities',
-    theme_color: '#fffdf5',
-    background_color: '#fffdf5',
-    display: 'standalone',
-    icons: [
-      { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
-      { src: '/icon-512.png', sizes: '512x512', type: 'image/png' }
-    ]
-  },
-  workbox: {
-    // See caching strategy below
-  }
-})
-```
-
-### Caching Strategy - All Assets Expire
-
-| Asset Type | Strategy | TTL | Rationale |
-|------------|----------|-----|-----------|
-| WASM binaries | NetworkFirst | 30 days | Check for updates, critical for security |
-| ML models | NetworkFirst | 30 days | Large downloads, but need bug fixes |
-| Tool islands (JS) | StaleWhileRevalidate | 7 days | Code updates, serve fast then refresh |
-| CSS/Fonts | StaleWhileRevalidate | 14 days | Rarely change, but need updates |
-| Icons/Images | CacheFirst | 30 days | Static assets |
-
-**Workbox configuration:**
-
-```javascript
-workbox: {
-  globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
-  cleanupOutdatedCaches: true,
-  
-  runtimeCaching: [
-    // WASM binaries - 30 days
-    {
-      urlPattern: /\.wasm$/,
-      handler: 'NetworkFirst',
-      options: {
-        cacheName: 'wasm-cache',
-        networkTimeoutSeconds: 5,
-        expiration: {
-          maxEntries: 20,
-          maxAgeSeconds: 30 * 24 * 60 * 60,
-          purgeOnQuotaError: true
-        }
-      }
-    },
-    
-    // ML models - 30 days
-    {
-      urlPattern: /\.(onnx|tflite)$/,
-      handler: 'NetworkFirst',
-      options: {
-        cacheName: 'model-cache',
-        networkTimeoutSeconds: 10,
-        expiration: {
-          maxEntries: 10,
-          maxAgeSeconds: 30 * 24 * 60 * 60,
-          purgeOnQuotaError: true
-        }
-      }
-    },
-    
-    // Tool chunks - 7 days
-    {
-      urlPattern: /\/islands\/.+\.js$/,
-      handler: 'StaleWhileRevalidate',
-      options: {
-        cacheName: 'tool-chunks',
-        expiration: {
-          maxEntries: 50,
-          maxAgeSeconds: 7 * 24 * 60 * 60,
-          purgeOnQuotaError: true
-        }
-      }
-    },
-    
-    // Fonts/CSS - 14 days
-    {
-      urlPattern: /\.(woff2|css)$/,
-      handler: 'StaleWhileRevalidate',
-      options: {
-        cacheName: 'static-assets',
-        expiration: {
-          maxEntries: 30,
-          maxAgeSeconds: 14 * 24 * 60 * 60,
-          purgeOnQuotaError: true
-        }
-      }
-    },
-    
-    // Images - 30 days
-    {
-      urlPattern: /\.(png|svg|jpg|jpeg|webp)$/,
-      handler: 'CacheFirst',
-      options: {
-        cacheName: 'images',
-        expiration: {
-          maxEntries: 60,
-          maxAgeSeconds: 30 * 24 * 60 * 60,
-          purgeOnQuotaError: true
-        }
-      }
-    }
-  ]
-}
-```
-
-### Cache Management Features
-
-1. **Auto-cleanup:**
-   - `cleanupOutdatedCaches: true` removes old service worker caches
-   - `purgeOnQuotaError: true` clears LRU entries if storage quota exceeded
-   - Expired entries automatically purged by Workbox
-
-2. **Manual controls (Settings page):**
-   - "Clear all caches" button
-   - "Check for updates" button
-   - Show cache size and age per category
-
-3. **Update notifications:**
-   - Service worker detects new version
-   - Toast: "Update available - refresh to get the latest version"
-
-### Asset Download Progress
-
-**For assets > 1MB, show progress bar:**
-
-```typescript
-// AssetCache with progress
-async fetch(url: string, options?: {
-  integrity?: string;
-  maxAgeMs?: number;
-  onProgress?: (loadedBytes: number, totalBytes: number) => void;
-  showProgress?: boolean; // Auto-detect if > 1MB
-}): Promise<ArrayBuffer> {
-  const response = await fetch(url);
-  const totalBytes = parseInt(response.headers.get('content-length') || '0');
-  
-  // Auto-show progress for files > 1MB
-  const shouldShowProgress = options?.showProgress ?? (totalBytes > this.PROGRESS_THRESHOLD_BYTES);
-  
-  if (!shouldShowProgress || !response.body) {
-    return await response.arrayBuffer();
-  }
-  
-  // Stream with progress
-  const reader = response.body.getReader();
-  const chunks: Uint8Array[] = [];
-  let loadedBytes = 0;
-  
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    
-    chunks.push(value);
-    loadedBytes += value.length;
-    options?.onProgress?.(loadedBytes, totalBytes);
-  }
-  
-  // Concatenate chunks
-  const data = new Uint8Array(loadedBytes);
-  let offsetBytes = 0;
-  for (const chunk of chunks) {
-    data.set(chunk, offsetBytes);
-    offsetBytes += chunk.length;
-  }
-  
-  return data.buffer;
-}
-```
-
-**Progress UI example:**
-
-```typescript
-if (modelStatus === 'loading') {
-  const percentComplete = (downloadProgress.loadedBytes / downloadProgress.totalBytes) * 100;
-  const loadedMB = (downloadProgress.loadedBytes / 1024 / 1024).toFixed(1);
-  const totalMB = (downloadProgress.totalBytes / 1024 / 1024).toFixed(1);
-  
-  return (
-    <div className="flex flex-col items-center gap-4 p-8">
-      <Loader className="animate-spin" />
-      <div className="text-center">
-        <p className="font-medium">Downloading model...</p>
-        <p className="text-sm text-muted-foreground">
-          {loadedMB} MB / {totalMB} MB ({percentComplete.toFixed(0)}%)
-        </p>
-      </div>
-      <ProgressBar percent={percentComplete} />
-      <p className="text-xs text-muted-foreground">
-        This download happens once and is cached for 30 days
-      </p>
-    </div>
-  );
-}
-```
-
----
-
-## 7. Build, Deployment & Performance
-
-### Astro Configuration
-
-```javascript
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
-import { VitePWA } from '@vite-pwa/astro';
-
-export default defineConfig({
-  output: 'static',
-  
-  integrations: [
-    react(),
-    tailwind(),
-    VitePWA({ /* PWA config */ })
-  ],
-  
-  vite: {
-    build: {
-      rollupOptions: {
-        output: {
-          manualChunks: {
-            'react-vendor': ['react', 'react-dom'],
-            'worker-vendor': ['comlink'],
-            'ui-vendor': ['cmdk', 'lucide-react']
-          }
-        }
-      }
-    },
-    
-    worker: {
-      format: 'es',
-      plugins: []
-    }
-  }
-});
-```
-
-### Cloudflare Pages Deployment
-
-**`_headers` file (critical for cross-origin isolation):**
-
-```
-/*
-  X-Frame-Options: DENY
-  X-Content-Type-Options: nosniff
-  Referrer-Policy: strict-origin-when-cross-origin
-  Permissions-Policy: camera=(), microphone=(), geolocation=()
-  
-  # Cross-Origin Isolation (required for SharedArrayBuffer)
-  Cross-Origin-Embedder-Policy: require-corp
-  Cross-Origin-Opener-Policy: same-origin
-  
-  # Strict CSP - only self + wasm/model CDN
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';
-
-/wasm/*
-  Cache-Control: public, max-age=31536000, immutable
-  Cross-Origin-Resource-Policy: same-origin
-
-/models/*
-  Cache-Control: public, max-age=2592000
-  Cross-Origin-Resource-Policy: same-origin
-```
-
-**GitHub Actions CI/CD:**
-
-```yaml
-# .github/workflows/deploy.yml
-name: Deploy to Cloudflare Pages
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-      
-      - run: npm ci
-      - run: npm run build
-      
-      - name: Deploy to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: goodwebtools
-          directory: dist
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-```
-
-### Performance Budget
-
-| Metric | Target | How We Achieve It |
-|--------|--------|-------------------|
-| Initial shell JS | < 120KB gzipped | Manual chunks, tree-shaking, lazy islands |
-| Initial shell CSS | < 20KB gzipped | Tailwind purge, minimal custom CSS |
-| First Contentful Paint | < 1.5s | Static HTML, minimal JS, preload fonts |
-| Time to Interactive | < 2.5s | Defer non-critical JS, no blocking scripts |
-| Lighthouse Performance | > 95 | Static site, optimized assets, lazy loading |
-| Tool island load | < 50KB per tool | Code splitting, dynamic imports |
-| WASM binary size | Varies by tool | Show size + download estimate before loading |
-
-**Bundle analysis:**
-- Run `vite-bundle-visualizer` on each build
-- Fail CI if shell exceeds 150KB gzipped
-- Track bundle size trends over time
-
-**Performance monitoring:**
-- Lighthouse CI on every PR
-- Real user metrics via web-vitals (client-side only)
-- Performance budget enforced in CI
-
----
-
-## 8. Development Environment
-
-### VS Code Setup
-
-**Extensions (`.vscode/extensions.json`):**
-```json
-{
-  "recommendations": [
-    "astro-build.astro-vscode",
-    "bradlc.vscode-tailwindcss",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "ms-vscode.vscode-typescript-next"
-  ]
-}
-```
-
-**Settings (`.vscode/settings.json`):**
-```json
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "tailwindCSS.experimental.classRegex": [
-    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ],
-  "files.associations": {
-    "*.astro": "astro"
-  },
-  "[astro]": {
-    "editor.defaultFormatter": "astro-build.astro-vscode"
-  }
-}
-```
-
-### TypeScript Configuration
-
-```json
-// tsconfig.json
-{
-  "extends": "astro/tsconfigs/strict",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "noEmit": true
-  }
-}
-```
-
-### Package.json Scripts
-
-```json
-{
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "lint": "eslint src --ext .ts,.tsx,.astro",
-    "lint:fix": "eslint src --ext .ts,.tsx,.astro --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx,astro,css}\"",
-    "type-check": "tsc --noEmit",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "analyze": "astro build && vite-bundle-visualizer",
-    "lighthouse": "lhci autorun"
-  }
-}
-```
-
-### Development Workflows
-
-#### Adding a New Tool
-
-1. **Register** in `src/registry/tools.ts`
-2. **Create island** in `src/islands/category/NewTool.tsx`
-3. **Create worker** in `src/tools/category/newtool.worker.ts`
-4. **Add pure logic** (optional) in `src/tools/category/newtool.lib.ts`
-5. **Write tests** in `src/tools/category/newtool.test.ts`
-6. **Test locally** with `npm run dev`
-7. **Commit** with conventional commit message
-
-#### Fixing Bugs
-
-1. **Reproduce** the bug locally
-2. **Locate** the bug (island, worker, service)
-3. **Write failing test** (TDD)
-4. **Fix** with minimal changes
-5. **Verify** with tests, lint, type-check, build
-6. **Commit** with descriptive message
-
-#### Improvements
-
-**Performance:**
-- Analyze bundle size
-- Use dynamic imports for heavy libs
-- Stream large files
-
-**UX:**
-- Add loading states
-- Better error messages
-- Accessibility improvements
-
-**Features:**
-- Add new options to worker API
-- Add UI controls
-- Document changes
-
-#### Quality Checklist
-
-Before committing:
-- [ ] Code runs without errors
-- [ ] Tests pass
-- [ ] Type-check passes
-- [ ] Lint passes
-- [ ] Build succeeds
-- [ ] Manual testing with samples
-- [ ] No memory leaks
-- [ ] Bundle size acceptable
-- [ ] Keyboard navigation works
-- [ ] Error handling robust
-- [ ] Loading states clear
-- [ ] Messages user-friendly
-
----
-
-## 9. Privacy & Verifiability
-
-### Privacy Guarantees
-
-1. **No egress** - Strict CSP `connect-src 'self'` (users can verify in DevTools)
-2. **Offline capable** - PWA works with network off (strongest proof)
-3. **Open source** - Public GitHub repo (at launch)
-4. **Reproducible builds** - Clone, build, diff against production
-5. **Footer commit link** - Shows exact deployed commit
-6. **SRI hashes** - All remote assets integrity-checked
-
-### Privacy Page
-
-Document on `/privacy`:
-- "Verify it yourself" walkthrough
-- DevTools Network tab guide
-- Offline mode instructions
-- Link to GitHub repo
-- Reproducible build notes
-
----
-
-## 10. Deployment Plan
-
-### Phase 0 Deliverables
-
-1. **Astro project** with all integrations configured
-2. **Shared services** implemented and tested
-3. **Tool registry** system working
-4. **Persisted shell** with command palette and theme
-5. **Hash File demo tool** fully functional
-6. **PWA** configured with service worker
-7. **Cloudflare Pages** deployment with headers
-8. **CI/CD pipeline** via GitHub Actions
-9. **Documentation** (README, CONTRIBUTING, architecture docs)
-10. **Performance budget** verified (<120KB shell)
-
-### Success Criteria
-
-- [ ] Shell loads < 1.5s (FCP)
-- [ ] Hash tool works offline after first use
-- [ ] Command palette searches tools
-- [ ] Theme toggle persists across navigation
-- [ ] Worker terminates on route-away
-- [ ] Progress bar shows for >1MB downloads
-- [ ] Lighthouse score > 95
-- [ ] Build passes CI checks
-- [ ] PWA installable
-- [ ] Privacy page renders correctly
-
-### Next Steps After Phase 0
-
-Once Phase 0 is validated:
-1. **Review** - Verify architecture works, gather feedback
-2. **Phase 1** - Dev/Office utilities (pure JS tools)
-3. **Continuous** - Build Phases 2-8 sequentially
-
----
-
-## Appendix A: Key Dependencies
-
-```json
-{
-  "dependencies": {
-    "astro": "^4.0.0",
-    "@astrojs/react": "^3.0.0",
-    "@astrojs/tailwind": "^5.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.0",
-    "@vite-pwa/astro": "^0.2.0",
-    "comlink": "^4.4.1",
-    "cmdk": "^0.2.0",
-    "lucide-react": "^0.294.0",
-    "nanostores": "^0.9.5",
-    "@nanostores/react": "^0.7.1"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vitest": "^1.0.0",
-    "@testing-library/react": "^14.1.0",
-    "eslint": "^8.55.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-astro": "^0.12.0",
-    "prettier-plugin-tailwindcss": "^0.5.0",
-    "@cloudflare/pages-action": "^1.0.0"
-  }
-}
-```
-
----
-
-## Appendix B: Design Decisions
-
-### Architectural Choices
-
-| Decision | Option Chosen | Rationale |
-|----------|--------------|-----------|
-| Meta-framework | Astro (static) | Islands architecture, zero JS by default, per-page splitting |
-| UI library | React 18 | Ecosystem fit (Excalidraw, Monaco), component maturity |
-| Routing | Astro View Transitions + persist | True MPA, minimal JS, shell persists |
-| Styling | Tailwind CSS | Fast, consistent, tree-shaken, lightweight |
-| State | Nanostores | Minimal, framework-agnostic, perfect for shell state |
-| Command palette | cmdk | Battle-tested (Linear, Raycast), great a11y |
-| PWA | @vite-pwa/astro | Astro-native, Workbox integration |
-| Hosting | Cloudflare Pages | Static, free, headers support, R2 integration |
-| Theme | Light + Dark (manual) | Simpler than auto, user control |
-| Repository | Private → Public | Develop privately, open source at launch |
-
-### Performance Decisions
-
-- Manual chunk splitting for vendors
-- Lazy island loading per route
-- Progress bars for assets > 1MB
-- Service worker caching with expiration
-- Build-time bundle analysis
-- CI performance budget enforcement
-
----
-
-**End of Phase 0 Design Document**
-
-*This design is approved and ready for implementation planning.*
diff --git a/docs/superpowers/specs/2026-07-13-playground-tools-design.md b/docs/superpowers/specs/2026-07-13-playground-tools-design.md
deleted file mode 100644
index 4983965..0000000
--- a/docs/superpowers/specs/2026-07-13-playground-tools-design.md
+++ /dev/null
@@ -1,279 +0,0 @@
-# Playground Tools — Code Scratchpad + SQLite Playground
-
-**Status:** Approved (2026-07-13)
-
-**Goal:** Add a new **Playground** category to GoodWebTools with two on-device dev
-sandboxes — a VS Code-grade **Code Scratchpad** and a **SQLite Playground** —
-built on one shared, lazily-loaded Monaco editor. Both run fully client-side with
-no network egress, letting developers explore before committing to a bigger setup.
-
-**Non-goals (YAGNI for v1):** project/folder tree, git, build/run of code,
-multi-database switching, query-history panel. These may come later; they are
-explicitly out of scope here.
-
----
-
-## 1. Overview
-
-Two tools, one engine:
-
-1. **Code Scratchpad** — a multi-file editor with the exact VS Code editing
-   muscle memory (multi-cursor, move/copy line, column select, find & replace),
-   open/save real files from disk, and autosaved scratch buffers.
-2. **SQLite Playground** — a durable, in-browser SQLite database with a schema
-   explorer, SQL editor, and a **visual results grid** for queries and DDL/DML.
-
-Both sit on a shared **Monaco** foundation (the real VS Code editor engine),
-loaded once, lazily, and never present in the app shell's initial payload.
-
-The two tools live under a new `Playground` category. Future exploratory tools
-(e.g. the planned HTML/CSS/JS live playground) can join the same category.
-
----
-
-## 2. Shared foundation: the Monaco engine
-
-### 2.1 Packaging & isolation
-
-- Depend on **`monaco-editor`** directly and import it in a client-only React
-  island — **not** `@monaco-editor/react`'s default AMD loader, which pulls
-  Monaco from a CDN and would break the no-external-requests promise.
-- Self-host all workers via Vite `?worker` imports and wire
-  `self.MonacoEnvironment.getWorker`:
-  - `monaco-editor/esm/vs/editor/editor.worker?worker` (base)
-  - `.../language/typescript/ts.worker?worker`
-  - `.../language/json/json.worker?worker`
-  - `.../language/css/css.worker?worker`
-  - `.../language/html/html.worker?worker`
-- Register full language features (IntelliSense, formatting, diagnostics) for
-  **TypeScript/JavaScript, JSON, CSS, HTML, and SQL**; ship built-in Monarch
-  syntax highlighting for Markdown, Python, Go, Rust, YAML, XML, Shell, and the
-  other grammars Monaco bundles.
-- Define a `gwt` Monaco theme mapped to the Neo-Brutalism palette (cream / near
-  black, violet accent), switching with the app's light/dark toggle.
-
-### 2.2 Interface
-
-`src/islands/playground/MonacoEditor.tsx` exposes a small, stable wrapper:
-
-```ts
-interface MonacoEditorProps {
-  value: string;
-  language: string;
-  onChange?: (value: string) => void;
-  onMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
-  readOnly?: boolean;
-  options?: monaco.editor.IStandaloneEditorConstructionOptions;
-}
-```
-
-A sibling `src/islands/playground/monaco-setup.ts` performs one-time, idempotent
-setup (worker env, theme, language registration) and is imported by the wrapper.
-
-### 2.3 Build risk to validate first
-
-The project sets `vite.worker.format: 'es'` globally (required by mupdf/pdfjs).
-That forces **all** Vite-bundled workers to be ES-module workers. Monaco's
-workers must load cleanly under that constraint — the same class of problem that
-bit the ffmpeg core (module-worker vs classic-worker). **The first
-implementation task must build the production bundle and confirm a Monaco editor
-actually mounts and its language worker responds** before either tool is built on
-top of it.
-
----
-
-## 3. Code Scratchpad
-
-**Route:** `/tools/code-scratchpad` · **Category:** `Playground` · **Status:**
-`stable` (ship once verified).
-
-### 3.1 Files & tabs
-
-- In-memory model: an array of files `{ id, name, language, content, handle? }`.
-- **Tabs** across the top: switch, close, and rename (double-click the tab title).
-- **New file:** prompt for a name; infer `language` from the extension via a pure
-  map (`.ts→typescript`, `.json→json`, `.md→markdown`, `.sql→sql`, `.py→python`,
-  …; unknown → `plaintext`).
-- YAGNI: no reordering, no folders.
-
-### 3.2 Disk I/O (progressive enhancement)
-
-Reuse the existing services (`file.service`, `download.service`,
-`persistence.service`) which already wrap the File System Access API with
-fallbacks:
-
-- **Open file** → `showOpenFilePicker` (keep the `FileSystemFileHandle` on the
-  tab); fallback `<input type=file>`.
-- **Save** → write back to the tab's handle when present; otherwise behave as
-  Save as.
-- **Save as…** → `showSaveFilePicker`; fallback: Blob download.
-
-### 3.3 Persistence
-
-Autosave every open tab to **IndexedDB** (object store `scratchpad-files`, keyed
-by `id`, storing `{ name, language, content }`) so buffers survive a reload.
-Debounced writes on change. On mount, restore all persisted tabs; if none, open a
-single empty `untitled.txt`.
-
-### 3.4 Editing
-
-All native Monaco behaviour — no custom keybindings needed:
-
-| Action | Shortcut (macOS) |
-|--------|------------------|
-| Move line up/down | `⌥↑` / `⌥↓` |
-| Copy line up/down | `⇧⌥↑` / `⇧⌥↓` |
-| Add cursor above/below | `⌘⌥↑` / `⌘⌥↓` |
-| Select next occurrence | `⌘D` |
-| Select all occurrences | `⌘⇧L` |
-| Column (box) selection | `⇧⌥`+drag |
-| Find / Replace | `⌘F` / `⌘⌥F` |
-| Command palette | `F1` |
-| Format document | `⇧⌥F` |
-
-Toolbar extras: word-wrap toggle, minimap toggle, format button. Nothing is
-uploaded; there is no network path.
-
----
-
-## 4. SQLite Playground
-
-**Route:** `/tools/sqlite-playground` · **Category:** `Playground` · **Status:**
-`stable` (ship once verified).
-
-### 4.1 Engine & persistence
-
-- **`@sqlite.org/sqlite-wasm`** (the official SQLite team build) running inside a
-  **Comlink-wrapped Web Worker** (`src/islands/playground/sqlite.worker.ts`).
-- Persistence via the **OPFS SAHPool VFS** (`installOpfsSAHPoolVfs`): a durable
-  database that survives reloads and needs **no** cross-origin-isolation headers
-  — preserving the project's deliberate no-COOP/COEP setup.
-- Serve `sqlite3.wasm` (~1 MB) and `sqlite3.mjs` **same-origin as normal static
-  assets** (copied into `public/` by the existing `copy-wasm` predev/prebuild
-  script). Under the 25 MB asset limit — no R2 needed.
-- **Single active database** (`playground.sqlite` in the SAHPool). If OPFS is
-  unavailable (older Safari), fall back to an **in-memory** DB and show a
-  persistent "Not saved between visits — export to keep your data" banner.
-
-### 4.2 Worker API
-
-```ts
-interface QueryResult {
-  columns: string[];
-  rows: unknown[][];
-  rowsAffected: number;   // for DML
-  elapsedMs: number;
-  // multiple result sets from a multi-statement script:
-  more?: QueryResult[];
-}
-
-interface SqliteApi {
-  init(): Promise<{ persisted: boolean }>;
-  exec(sql: string): Promise<QueryResult>;          // run all statements
-  schema(): Promise<SchemaObject[]>;                 // tables/indexes/views/triggers
-  tableRows(name: string, limit: number, offset: number): Promise<QueryResult>;
-  exportDb(): Promise<Uint8Array>;                   // .sqlite bytes
-  importDb(bytes: Uint8Array): Promise<void>;        // replace active DB
-  reset(): Promise<void>;
-  loadSample(): Promise<void>;
-}
-```
-
-`SchemaObject` describes one DB object: `{ type: 'table'|'index'|'view'|'trigger',
-name, sql, columns?: { name, type, pk, notnull }[] }`, parsed from
-`sqlite_master` + `PRAGMA table_info`.
-
-### 4.3 Layout (three panes)
-
-- **Left — Schema explorer.** Tree of tables (expand → columns with type, PK, NOT
-  NULL), indexes, views, triggers. Clicking a table opens its rows in the grid
-  (**data-browser**, no SQL required); a "Show DDL" affordance drops its `CREATE`
-  statement into the editor / a DDL view. The explorer **auto-refreshes after any
-  DDL**.
-- **Center — SQL editor.** Shared Monaco with the `sql` language. `⌘/Ctrl+Enter`
-  runs **all** statements, or the **current selection** if text is selected.
-  Multi-statement scripts supported. "Format SQL" button.
-- **Bottom — Results.**
-  - **SELECT / query** → the **visual results grid**: typed columns, sortable,
-    virtualized for large result sets, click-to-copy cells. Multiple result sets
-    from one script render as grid tabs.
-  - **DDL** (`CREATE`/`ALTER`/`DROP`) → a messages line ("Table `orders`
-    created · N ms"); schema explorer refreshes; option to auto-open the affected
-    table.
-  - **DML** (`INSERT`/`UPDATE`/`DELETE`) → "N rows affected · N ms"; option to
-    auto-`SELECT` the touched table to visualize the change.
-  - **Errors** → SQLite's message shown inline in a clearly-marked error state.
-  - Export the current grid as **CSV** or **JSON**.
-
-### 4.4 DB management toolbar
-
-New DB (reset to empty) · Open `.sqlite` (import bytes) · Export `.sqlite`
-(download the live DB) · **Load sample** (a small seeded schema — a handful of
-related tables with rows — so the tool is explorable on first open) · Reset.
-
----
-
-## 5. Data flow
-
-```
-Code Scratchpad
-  island  ⇄  IndexedDB (autosaved files)
-          ⇄  File System Access API (open / save to disk)
-          →  Monaco holds the active buffer
-
-SQLite Playground
-  island  ⇄  Comlink  ⇄  Web Worker  ⇄  @sqlite.org/sqlite-wasm + OPFS (SAHPool)
-          →  Monaco holds the SQL buffer
-          ←  worker returns { columns, rows, rowsAffected, elapsedMs, more? }
-```
-
-Running SQLite in the worker keeps the UI responsive during heavy queries and
-imports.
-
----
-
-## 6. Testing
-
-**Vitest — pure logic (no DOM/WASM):**
-- `extensionToLanguage()` map.
-- `splitStatements(sql)` — split a multi-statement script on `;`, respecting
-  string literals, `--` and `/* */` comments (so grids/messages map to the right
-  statement).
-- `classifyStatement(sql)` → `'select' | 'ddl' | 'dml' | 'other'` (drives which
-  result view to show).
-- Result-set serializers → `toCsv(result)` / `toJson(result)`.
-- Schema parsing helper: `sqlite_master` rows + `PRAGMA table_info` → `SchemaObject`.
-
-**Headless production-build checks** (`astro preview`, as used for every prior
-phase):
-- SQLite: `CREATE TABLE` → schema explorer shows it → `INSERT` → `SELECT` renders
-  the grid → `CREATE INDEX` → **reload persists the data** → `Export .sqlite`
-  then `Open` round-trips → sample loads.
-- Scratchpad: mounts a Monaco editor whose worker responds; a multi-cursor edit
-  and find/replace work; open tabs persist across reload.
-
----
-
-## 7. Sequencing (independently shippable steps)
-
-1. **Foundation** — `Playground` category (extend the `Category` union +
-   registry + any shell filter) and the shared Monaco island; validate the
-   worker-format build risk (§2.3) on the production build.
-2. **Code Scratchpad** — tabs, disk I/O, IndexedDB autosave, editing.
-3. **SQLite Playground** — worker + sqlite-wasm/OPFS, schema explorer, SQL editor,
-   visual results grid, DDL/DML messages, import/export, sample DB.
-
-Each step ends with a green production build, passing unit tests, and a headless
-verification of the new surface.
-
----
-
-## 8. Risks & fallbacks
-
-| Risk | Handling |
-|------|----------|
-| Monaco workers vs global `worker.format: 'es'` | Validate on the production build in step 1 before building tools; adjust worker setup if needed (mirrors the ffmpeg fix). |
-| Monaco bundle weight | Route-level dynamic import only; never in the shell payload; register only needed languages. |
-| OPFS SAHPool unavailable (older Safari) | Fall back to in-memory DB + "not persisted, export to keep" banner. |
-| File System Access API absent (Firefox/Safari) | Fall back to `<input type=file>` + Blob download (services already do this). |
-| Large query result sets | Virtualized grid; `tableRows` paginates the data-browser with `LIMIT`/`OFFSET`. |
diff --git a/docs/superpowers/specs/2026-07-14-tauri-desktop-app-design.md b/docs/superpowers/specs/2026-07-14-tauri-desktop-app-design.md
deleted file mode 100644
index a65522b..0000000
--- a/docs/superpowers/specs/2026-07-14-tauri-desktop-app-design.md
+++ /dev/null
@@ -1,1821 +0,0 @@
-# GoodWebTools Desktop App Design Specification
-
-**Author:** Claude + Kresna  
-**Date:** 2026-07-14  
-**Status:** Approved for Implementation  
-**Version:** 1.0
-
----
-
-## Executive Summary
-
-This document specifies the architecture and implementation plan for **GoodWebTools Desktop**, a native desktop application built with Tauri 2 that wraps the existing web application and unlocks OS-level capabilities impossible in browsers:
-
-- **System-wide screen capture** without consent pickers (ScreenCaptureKit / Windows.Graphics.Capture)
-- **Global hotkeys** that work while the app is backgrounded or other apps are focused
-- **Desktop region selector** (transparent overlay for marquee-select over the entire desktop)
-- **System audio capture** on all platforms (not just Chrome/Windows)
-- **Native FFmpeg** for 5-10× faster video processing
-- **Native file dialogs** with no browser sandbox restrictions
-- **Fully offline operation** (all WASM + ML models bundled)
-
-**Core Architecture Principle:** One codebase, two shells (web + Tauri). All 55 tools share the same React components and logic. A service abstraction layer auto-detects the shell and routes to browser APIs (web) or Rust IPC (desktop). Zero code duplication.
-
-**Scope:** Approach 3 (Big Bang) — ship v1.0 with all 5 native capabilities, all 55 tools refactored, complete desktop experience (Settings, system tray, auto-updater, permission wizard).
-
-**Timeline:** 6-8 weeks from kickoff to v1.0.0 stable release.
-
----
-
-## Table of Contents
-
-1. [Architecture Overview](#1-architecture-overview)
-2. [Repository Structure](#2-repository-structure)
-3. [Service Layer Design](#3-service-layer-design)
-4. [Tauri Backend (Rust) Architecture](#4-tauri-backend-rust-architecture)
-5. [Tool Refactoring Strategy](#5-tool-refactoring-strategy)
-6. [Desktop-Specific Features](#6-desktop-specific-features)
-7. [Download Page & Asset Serving](#7-download-page--asset-serving)
-8. [Build & Release Pipeline](#8-build--release-pipeline)
-9. [Testing Strategy](#9-testing-strategy)
-10. [Error Handling & Edge Cases](#10-error-handling--edge-cases)
-11. [Migration Path & Rollout Plan](#11-migration-path--rollout-plan)
-12. [Success Metrics](#12-success-metrics)
-13. [Post-Launch Roadmap](#13-post-launch-roadmap)
-
----
-
-## 1. Architecture Overview
-
-### 1.1 Core Principle
-
-**One codebase, two shells (web + Tauri), unified by a service abstraction layer.**
-
-```
-┌─────────────────────────────────────────────────┐
-│  React Tool Components (55 tools)              │
-│  - Unchanged UI logic                          │
-│  - Import from service layer, not browser APIs │
-└─────────────┬───────────────────────────────────┘
-              │
-┌─────────────▼───────────────────────────────────┐
-│  Service Layer (shell-agnostic interface)     │
-│  - CaptureService, FileService, etc.          │
-│  - Auto-detects shell via window.__TAURI__    │
-└─────────────┬───────────────────────────────────┘
-              │
-        ┌─────┴─────┐
-        │           │
-┌───────▼─────┐  ┌──▼──────────────┐
-│ Browser     │  │ Tauri Native    │
-│ - fetch()   │  │ - Rust IPC      │
-│ - File API  │  │ - ScreenKit     │
-│ - MediaAPI  │  │ - Native dialog │
-└─────────────┘  └─────────────────┘
-```
-
-### 1.2 Build Outputs
-
-1. **Web:** `npm run build` → `dist/` → Cloudflare Workers (unchanged)
-2. **Desktop:** `npm run build` → `dist/` → `tauri build` → `.dmg`/`.msi`/`.AppImage`
-
-### 1.3 Key Architectural Decisions
-
-- **Monorepo:** `src-tauri/` lives alongside `src/`, single `package.json`
-- **Service registry:** Global singletons (`@/services/*`) detect shell at module load
-- **No code duplication:** Tools, components, styles shared 100%
-- **Astro unchanged:** Static build stays the same; Tauri consumes the `dist/` output
-- **Asset bundling:** WASM + ML models copied into Tauri resources (no R2 dependency for desktop)
-
----
-
-## 2. Repository Structure
-
-### 2.1 Monorepo Layout
-
-```
-gwt/
-├── src/                          # Existing Astro + React code
-│   ├── islands/                  # Tool components (refactor to use services)
-│   ├── services/                 # NEW: Service layer
-│   │   ├── capture/
-│   │   │   ├── index.ts          # Auto-exports browser or tauri impl
-│   │   │   ├── browser.ts        # getDisplayMedia, MediaRecorder
-│   │   │   ├── tauri.ts          # Rust IPC for ScreenCaptureKit
-│   │   │   └── types.ts          # Shared interfaces
-│   │   ├── file/
-│   │   │   ├── index.ts
-│   │   │   ├── browser.ts        # File System Access API
-│   │   │   └── tauri.ts          # Native save/open dialog
-│   │   ├── download/             # Browser download() vs Tauri fs::write
-│   │   ├── asset/                # fetch vs Tauri asset protocol
-│   │   ├── hotkey/               # No-op vs Tauri global-shortcut
-│   │   ├── clipboard/            # Navigator.clipboard vs Tauri clipboard
-│   │   └── platform/             # Shell detection utilities
-│   ├── pages/
-│   │   ├── download.astro        # NEW: Desktop app download page
-│   │   └── settings.astro        # Extended with desktop-specific settings
-│   └── ...
-├── src-tauri/                    # NEW: Tauri Rust backend
-│   ├── src/
-│   │   ├── main.rs               # Window setup, tray, menu
-│   │   ├── commands.rs           # IPC command handlers
-│   │   ├── capture/
-│   │   │   ├── mod.rs
-│   │   │   ├── macos.rs          # ScreenCaptureKit (macOS 12.3+)
-│   │   │   ├── windows.rs        # Windows.Graphics.Capture
-│   │   │   └── linux.rs          # PipeWire portal
-│   │   ├── hotkeys.rs            # Global shortcut registration
-│   │   ├── overlay.rs            # Desktop marquee (transparent window)
-│   │   ├── audio.rs              # System audio loopback capture
-│   │   └── ffmpeg.rs             # Native ffmpeg via child process
-│   ├── Cargo.toml
-│   ├── tauri.conf.json           # Tauri config (bundler, permissions, etc.)
-│   ├── icons/                    # App icons (1024x1024 source)
-│   └── resources/                # Bundled assets (WASM, models)
-│       ├── wasm/                 # mupdf, sqlite, ffmpeg.wasm, etc.
-│       └── models/               # ML models (~540 MB)
-├── worker/                       # NEW: Download tracking endpoint
-│   └── download-tracker.js       # Logs download events, redirects to GitHub
-├── scripts/
-│   ├── bundle-tauri-assets.mjs   # NEW: Copy WASM/models to src-tauri/resources
-│   └── ...
-├── .github/
-│   └── workflows/
-│       └── release.yml           # NEW: tauri-action matrix build
-├── package.json                  # Add tauri CLI scripts
-└── ...
-```
-
-### 2.2 New npm Scripts
-
-```json
-{
-  "scripts": {
-    "tauri": "tauri",
-    "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build",
-    "tauri:bundle": "npm run build && tauri build"
-  }
-}
-```
-
-### 2.3 Asset Bundling Strategy
-
-**Script:** `scripts/bundle-tauri-assets.mjs` runs before `tauri build`
-
-**Purpose:** Copy `public/wasm/*` and `public/models/*` → `src-tauri/resources/`
-
-**Result:** Desktop app loads from `asset://localhost/resources/*` (no network)
-
----
-
-## 3. Service Layer Design
-
-### 3.1 Six Core Services
-
-All services abstract shell-specific APIs:
-
-1. **CaptureService** — Screen/window/region capture, video recording
-2. **FileService** — Open/save files with native dialogs
-3. **DownloadService** — Save files to disk
-4. **AssetService** — Load WASM/models from bundle
-5. **HotkeyService** — Register global hotkeys
-6. **ClipboardService** — Advanced clipboard operations
-
-### 3.2 Service Interface Pattern
-
-**Example: CaptureService**
-
-```typescript
-// src/services/capture/types.ts
-export interface CaptureService {
-  captureScreen(options?: CaptureOptions): Promise<Blob>;
-  captureWindow(windowId?: string): Promise<Blob>;
-  captureRegion(bounds: Rectangle): Promise<Blob>;
-  startRecording(options: RecordOptions): Promise<RecordingHandle>;
-  stopRecording(handle: RecordingHandle): Promise<Blob>;
-  showRegionSelector(): Promise<Rectangle | null>;
-  getCapabilities(): CaptureServiceCapabilities;
-}
-
-export interface CaptureOptions {
-  format?: 'png' | 'jpeg';
-  quality?: number;
-  includeAudio?: boolean;
-  systemAudio?: boolean; // Tauri-only
-}
-
-export interface CaptureServiceCapabilities {
-  systemCapture: boolean;    // Capture without picker
-  regionSelector: boolean;   // Desktop overlay
-  systemAudio: boolean;      // System audio loopback
-  globalHotkeys: boolean;    // OS-level hotkeys
-}
-```
-
-### 3.3 Shell Detection & Auto-Export
-
-```typescript
-// src/services/capture/index.ts
-import type { CaptureService } from './types';
-
-let instance: CaptureService;
-
-if (typeof window !== 'undefined' && window.__TAURI__) {
-  const { TauriCaptureService } = await import('./tauri');
-  instance = new TauriCaptureService();
-} else {
-  const { BrowserCaptureService } = await import('./browser');
-  instance = new BrowserCaptureService();
-}
-
-export const captureService = instance;
-export type { CaptureService, CaptureOptions } from './types';
-```
-
-### 3.4 Browser Implementation (Example)
-
-```typescript
-// src/services/capture/browser.ts
-import type { CaptureService, CaptureOptions } from './types';
-
-export class BrowserCaptureService implements CaptureService {
-  async captureScreen(options?: CaptureOptions): Promise<Blob> {
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { mediaSource: 'screen' }
-    });
-    
-    const video = document.createElement('video');
-    video.srcObject = stream;
-    await video.play();
-    
-    const canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    canvas.getContext('2d')!.drawImage(video, 0, 0);
-    
-    stream.getTracks().forEach(t => t.stop());
-    
-    return new Promise(resolve => {
-      canvas.toBlob(blob => resolve(blob!), 
-        `image/${options?.format || 'png'}`, 
-        options?.quality
-      );
-    });
-  }
-  
-  async showRegionSelector(): Promise<Rectangle | null> {
-    // Not possible in browser
-    return null;
-  }
-  
-  getCapabilities() {
-    return {
-      systemCapture: false,
-      regionSelector: false,
-      systemAudio: false,
-      globalHotkeys: false,
-    };
-  }
-}
-```
-
-### 3.5 Tauri Implementation (Example)
-
-```typescript
-// src/services/capture/tauri.ts
-import { invoke } from '@tauri-apps/api/tauri';
-import type { CaptureService, CaptureOptions, Rectangle } from './types';
-
-export class TauriCaptureService implements CaptureService {
-  async captureScreen(options?: CaptureOptions): Promise<Blob> {
-    try {
-      const imageBytes: Uint8Array = await invoke('capture_screen', { options });
-      return new Blob([imageBytes], { type: `image/${options?.format || 'png'}` });
-    } catch (error) {
-      // Fallback to browser API if native fails
-      console.warn('Native capture failed, falling back to browser API', error);
-      return this.browserFallback(options);
-    }
-  }
-  
-  async showRegionSelector(): Promise<Rectangle | null> {
-    return await invoke('show_region_selector');
-  }
-  
-  getCapabilities() {
-    const platform = navigator.platform;
-    return {
-      systemCapture: true,
-      regionSelector: platform !== 'Linux', // Linux WIP
-      systemAudio: true,
-      globalHotkeys: true,
-    };
-  }
-  
-  private async browserFallback(options?: CaptureOptions): Promise<Blob> {
-    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
-    // ... same as browser impl
-  }
-}
-```
-
-### 3.6 Tool Usage (Unchanged Interface)
-
-```tsx
-// src/islands/media/Screenshot.tsx
-import { captureService } from '@/services/capture';
-
-export default function Screenshot() {
-  const [capabilities, setCapabilities] = useState(captureService.getCapabilities());
-  
-  const handleCapture = async () => {
-    if (capabilities.regionSelector) {
-      const region = await captureService.showRegionSelector();
-      if (region) {
-        const blob = await captureService.captureRegion(region);
-        // ... process image
-      }
-    } else {
-      const blob = await captureService.captureScreen();
-      // ... process image
-    }
-  };
-  
-  return (
-    <div>
-      <button onClick={handleCapture}>
-        {capabilities.regionSelector ? 'Select Region' : 'Capture Screen'}
-      </button>
-    </div>
-  );
-}
-```
-
-**Key benefit:** Tool doesn't know or care if it's running in browser or Tauri. Same code works everywhere.
-
----
-
-## 4. Tauri Backend (Rust) Architecture
-
-### 4.1 Main Window & System Tray (`main.rs`)
-
-**Responsibilities:**
-- Initialize Tauri app with permissions
-- Create main window (loads `index.html` from bundled `dist/`)
-- System tray setup with menu:
-  - "Capture Screenshot" → Triggers screenshot command
-  - "Record Screen" → Opens screen recorder tool
-  - "Open GoodWebTools" → Shows/focuses window
-  - "Settings" → Opens settings page
-  - "Quit" → Exits app
-- Window close behavior: minimize to tray (configurable in Settings)
-- First-run permission wizard detection
-
-**Example:**
-```rust
-use tauri::{Manager, SystemTray, SystemTrayMenu, CustomMenuItem};
-
-fn main() {
-    let tray_menu = SystemTrayMenu::new()
-        .add_item(CustomMenuItem::new("screenshot", "Capture Screenshot\tCmd+Shift+5"))
-        .add_item(CustomMenuItem::new("record", "Record Screen\tCmd+Shift+6"))
-        .add_native_item(SystemTrayMenuItem::Separator)
-        .add_item(CustomMenuItem::new("open", "Open GoodWebTools"))
-        .add_item(CustomMenuItem::new("settings", "Settings"))
-        .add_native_item(SystemTrayMenuItem::Separator)
-        .add_item(CustomMenuItem::new("quit", "Quit"));
-    
-    let system_tray = SystemTray::new().with_menu(tray_menu);
-    
-    tauri::Builder::default()
-        .system_tray(system_tray)
-        .on_system_tray_event(|app, event| {
-            // Handle tray menu clicks
-        })
-        .on_window_event(|event| {
-            if let tauri::WindowEvent::CloseRequested { api, .. } = event.event() {
-                // Minimize to tray instead of quit
-                event.window().hide().unwrap();
-                api.prevent_close();
-            }
-        })
-        .invoke_handler(tauri::generate_handler![
-            capture_screen,
-            capture_region,
-            show_region_selector,
-            // ... all commands
-        ])
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
-
-### 4.2 IPC Commands (`commands.rs`)
-
-**Tauri commands exposed to frontend:**
-
-```rust
-use tauri::command;
-use serde::{Deserialize, Serialize};
-
-#[derive(Deserialize)]
-pub struct CaptureOptions {
-    format: Option<String>,
-    quality: Option<f32>,
-    include_audio: Option<bool>,
-    system_audio: Option<bool>,
-}
-
-#[command]
-pub async fn capture_screen(options: CaptureOptions) -> Result<Vec<u8>, String> {
-    #[cfg(target_os = "macos")]
-    return crate::capture::macos::capture_screen(options).await;
-    
-    #[cfg(target_os = "windows")]
-    return crate::capture::windows::capture_screen(options).await;
-    
-    #[cfg(target_os = "linux")]
-    return crate::capture::linux::capture_screen(options).await;
-}
-
-#[command]
-pub async fn show_region_selector() -> Result<Option<Rectangle>, String> {
-    crate::overlay::show_selector().await
-}
-
-#[command]
-pub async fn register_hotkey(combo: String, callback_id: String) -> Result<String, String> {
-    crate::hotkeys::register(combo, callback_id).await
-}
-
-// ... more commands
-```
-
-### 4.3 Platform-Specific Capture
-
-**macOS (`capture/macos.rs`):**
-```rust
-use screencapturekit::*;
-
-pub async fn capture_screen(options: CaptureOptions) -> Result<Vec<u8>, String> {
-    // Check permission first
-    if !CGPreflightScreenCaptureAccess() {
-        return Err("Screen recording permission denied".into());
-    }
-    
-    let content = SCShareableContent::current();
-    let display = content.displays.first()
-        .ok_or("No display found")?;
-    
-    let stream = SCStream::new(display, content, SCStreamConfiguration::default());
-    let frame = stream.capture_frame().await?;
-    
-    // Convert to PNG/JPEG
-    let image_data = frame.to_image(options.format.as_deref().unwrap_or("png"))?;
-    
-    Ok(image_data)
-}
-```
-
-**Windows (`capture/windows.rs`):**
-```rust
-use windows::Graphics::Capture::*;
-
-pub async fn capture_screen(options: CaptureOptions) -> Result<Vec<u8>, String> {
-    let access = GraphicsCaptureAccess::RequestAccessAsync(
-        GraphicsCaptureAccessKind::Programmatic
-    ).await.map_err(|e| format!("Access denied: {:?}", e))?;
-    
-    // Capture primary monitor
-    let item = GraphicsCaptureItem::TryCreateFromDisplayId(/* ... */)?;
-    let frame_pool = Direct3D11CaptureFramePool::Create(/* ... */)?;
-    let session = frame_pool.CreateCaptureSession(item)?;
-    
-    session.StartCapture()?;
-    let frame = frame_pool.TryGetNextFrame()?;
-    
-    // Convert to image bytes
-    let image_data = frame_to_bytes(frame, &options)?;
-    
-    Ok(image_data)
-}
-```
-
-**Linux (`capture/linux.rs`):**
-```rust
-use ashpd::desktop::screenshot::*;
-
-pub async fn capture_screen(options: CaptureOptions) -> Result<Vec<u8>, String> {
-    let request = ScreenshotRequest::default()
-        .interactive(false);
-    
-    let response = request.send().await
-        .map_err(|e| format!("Portal request failed: {}", e))?;
-    
-    // Load image from file URI
-    let image_data = std::fs::read(response.uri().path())?;
-    
-    Ok(image_data)
-}
-```
-
-### 4.4 Desktop Region Selector (`overlay.rs`)
-
-**Creates transparent, always-on-top, fullscreen window:**
-
-```rust
-use tauri::{Window, Manager};
-
-pub async fn show_selector() -> Result<Option<Rectangle>, String> {
-    let app = APP_HANDLE.get().unwrap();
-    
-    // Create transparent overlay window
-    let overlay = tauri::WindowBuilder::new(
-        app,
-        "overlay",
-        tauri::WindowUrl::App("overlay.html".into())
-    )
-    .title("Select Region")
-    .fullscreen(true)
-    .transparent(true)
-    .always_on_top(true)
-    .skip_taskbar(true)
-    .decorations(false)
-    .build()?;
-    
-    // Wait for user selection via event
-    let (tx, rx) = tokio::sync::oneshot::channel();
-    
-    overlay.listen("region-selected", move |event| {
-        let bounds: Rectangle = serde_json::from_str(event.payload()).unwrap();
-        tx.send(Some(bounds)).ok();
-    });
-    
-    overlay.listen("cancelled", move |_| {
-        tx.send(None).ok();
-    });
-    
-    let result = rx.await.unwrap_or(None);
-    overlay.close()?;
-    
-    Ok(result)
-}
-```
-
-### 4.5 Global Hotkeys (`hotkeys.rs`)
-
-```rust
-use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut};
-
-pub async fn register(combo: String, callback_id: String) -> Result<String, String> {
-    let app = APP_HANDLE.get().unwrap();
-    let shortcut = Shortcut::new(combo.as_str())
-        .map_err(|e| format!("Invalid shortcut: {}", e))?;
-    
-    let id = format!("hotkey_{}", uuid::Uuid::new_v4());
-    
-    app.global_shortcut().register(shortcut, move || {
-        // Emit event to frontend
-        app.emit_all(&format!("hotkey:{}", callback_id), ()).ok();
-    })?;
-    
-    Ok(id)
-}
-```
-
-### 4.6 System Audio Capture (`audio.rs`)
-
-**macOS:** AVFoundation + ScreenCaptureKit audio stream  
-**Windows:** WASAPI loopback mode  
-**Linux:** PulseAudio monitor source or PipeWire loopback
-
-```rust
-pub async fn start_system_audio_capture() -> Result<AudioHandle, String> {
-    #[cfg(target_os = "macos")]
-    return crate::audio::macos::start_capture().await;
-    
-    #[cfg(target_os = "windows")]
-    return crate::audio::windows::start_capture().await;
-    
-    #[cfg(target_os = "linux")]
-    return crate::audio::linux::start_capture().await;
-}
-```
-
-### 4.7 Native FFmpeg Integration (`ffmpeg.rs`)
-
-**Bundles platform-specific ffmpeg binary:**
-
-```rust
-use std::process::{Command, Stdio};
-
-pub async fn convert_video(
-    input: Vec<u8>,
-    output_format: String,
-) -> Result<Vec<u8>, String> {
-    // Write input to temp file
-    let temp_input = std::env::temp_dir().join("input.mp4");
-    std::fs::write(&temp_input, input)?;
-    
-    let temp_output = std::env::temp_dir().join(format!("output.{}", output_format));
-    
-    // Get bundled ffmpeg path
-    let ffmpeg_path = get_bundled_ffmpeg_path()?;
-    
-    // Run ffmpeg
-    let status = Command::new(ffmpeg_path)
-        .args(&[
-            "-i", temp_input.to_str().unwrap(),
-            "-c:v", "libx264",
-            "-preset", "fast",
-            temp_output.to_str().unwrap()
-        ])
-        .stdout(Stdio::piped())
-        .stderr(Stdio::piped())
-        .status()?;
-    
-    if !status.success() {
-        return Err("FFmpeg conversion failed".into());
-    }
-    
-    let output = std::fs::read(&temp_output)?;
-    
-    // Cleanup
-    std::fs::remove_file(temp_input).ok();
-    std::fs::remove_file(temp_output).ok();
-    
-    Ok(output)
-}
-
-fn get_bundled_ffmpeg_path() -> Result<PathBuf, String> {
-    #[cfg(target_os = "macos")]
-    return Ok(PathBuf::from("resources/ffmpeg/macos/ffmpeg"));
-    
-    #[cfg(target_os = "windows")]
-    return Ok(PathBuf::from("resources/ffmpeg/windows/ffmpeg.exe"));
-    
-    #[cfg(target_os = "linux")]
-    {
-        // Try system ffmpeg first
-        if which::which("ffmpeg").is_ok() {
-            return Ok(PathBuf::from("ffmpeg"));
-        }
-        return Err("FFmpeg not found. Please install: sudo apt install ffmpeg".into());
-    }
-}
-```
-
----
-
-## 5. Tool Refactoring Strategy
-
-### 5.1 Refactoring Pattern
-
-**Before (direct browser API):**
-```tsx
-// src/islands/media/Screenshot.tsx
-async function captureScreen() {
-  const stream = await navigator.mediaDevices.getDisplayMedia({
-    video: { mediaSource: 'screen' }
-  });
-  // ... canvas rendering ...
-}
-```
-
-**After (service layer):**
-```tsx
-// src/islands/media/Screenshot.tsx
-import { captureService } from '@/services/capture';
-
-async function captureScreen() {
-  const imageBlob = await captureService.captureScreen({ format: 'png' });
-  // imageBlob ready to use
-}
-```
-
-### 5.2 Tool Categories & Refactoring Order
-
-**Week 1-2: Infrastructure + High-Value Tools**
-1. Build service layer (all 6 services, browser + Tauri impls)
-2. Refactor **Screen Recorder** + **Screenshot** (2 tools)
-3. Refactor **Code Scratchpad** (1 tool)
-
-**Week 3-4: File & Media Tools**
-4. Refactor all **PDF tools** (10 tools)
-5. Refactor **Video Converter**, **Audio Converter** (2 tools)
-6. Refactor **Zip**, **Archive Extract**, **File Encrypt**, **File Split** (4 tools)
-
-**Week 5: Image & ML Tools**
-7. Refactor all **Image tools** (14 tools)
-8. Test bundled ML models load correctly from Tauri resources
-
-**Week 6: Dev Tools + Polish**
-9. Refactor remaining **Dev/text tools** (17 tools)
-10. Refactor **Whiteboard**, **Signature Pad**, **SQLite Playground** (3 tools)
-11. Integration testing, bug fixes
-
-**Total:** 55 tools refactored
-
-### 5.3 Backwards Compatibility
-
-**Critical:** Web app must continue working during and after refactoring.
-
-**Strategy:**
-- Service layer auto-detects browser vs Tauri
-- If `window.__TAURI__` is undefined → browser implementations run
-- No feature flags, no conditional imports in tools
-- Web deployment unchanged (services compile to browser impls)
-
-**Testing:**
-- Run each refactored tool in **both** browser and Tauri
-- Existing tool behavior must be preserved in browser
-- Native enhancements only apply in Tauri
-
----
-
-## 6. Desktop-Specific Features
-
-### 6.1 First-Run Permission Wizard
-
-**Trigger:** Runs once on first app launch (tracked via Tauri store).
-
-**Flow:**
-1. **Welcome screen:** "Welcome to GoodWebTools Desktop"
-2. **Permission checklist:**
-   - ☐ Screen Recording (macOS/Windows)
-   - ☐ Accessibility (macOS, for global hotkeys)
-   - ☐ Microphone (optional)
-3. **Action buttons:** "Open System Preferences" / "Skip for Now" / "Done"
-
-**Implementation:**
-- Astro page: `src/pages/first-run.astro` (only shown in Tauri)
-- Checks permission status via Tauri commands
-- Links open System Preferences/Settings to Privacy & Security
-- "Skip" → hides wizard, shows banner in app
-- "Done" → marks wizard complete in Tauri store
-
-### 6.2 Settings Page
-
-**Route:** `src/pages/settings.astro`
-
-**Sections:**
-
-**General:**
-- Default save location (folder picker, Tauri-only)
-- Keep app running in background when closed (toggle, default: ON)
-- Launch at system startup (toggle, default: OFF)
-- Theme (Light / Dark / System)
-
-**Global Hotkeys:** (Tauri-only)
-- Screenshot: `[Cmd+Shift+5]` (editable combo box)
-- Screen Recorder: `[Cmd+Shift+6]`
-- Region Selector: `[Cmd+Shift+4]`
-- "Record Hotkey" button (press any combo to capture)
-- Reset to defaults
-
-**Privacy:**
-- **Usage Analytics:** `[ON]` (toggle, default: ON)
-  - "Help improve GoodWebTools by sending anonymous usage data"
-- **Crash Reporting:** `[OFF]` (toggle, default: ASK on first crash)
-  - "Automatically send crash reports when the app fails"
-- Links to privacy policy
-
-**Updates:** (Tauri-only)
-- Auto-update: `[ON]` (toggle, default: ON)
-- Check for updates now (button)
-- Current version: `v1.0.0`
-
-**Storage:**
-- Cache size: `1.2 GB`
-- Clear cache (button)
-- Open app data folder (button)
-
-**About:**
-- Version, build date
-- Open source license (MIT)
-- GitHub repo link
-- Report an issue link
-
-**Permission Status:** (Tauri-only)
-- Screen Recording: ✅ Granted / ❌ Denied (with "Grant Access" button)
-- Accessibility: ✅ Granted / ❌ Denied
-- Microphone: ✅ Granted / ⚠️ Optional
-
-### 6.3 System Tray / Menu Bar
-
-**Always visible** (even when window closed).
-
-**Menu structure:**
-```
-GoodWebTools
-├── Capture Screenshot       (Cmd+Shift+5)
-├── Record Screen            (Cmd+Shift+6)
-├── ──────────────
-├── Open GoodWebTools
-├── Settings
-├── ──────────────
-├── Check for Updates
-├── About
-├── ──────────────
-└── Quit
-```
-
-**Behavior:**
-- Click menu item → triggers action immediately
-- Tray icon persists while app is "closed" (minimized to tray)
-- Global hotkeys work while app is hidden
-
-### 6.4 Window Management
-
-**Close button behavior:**
-- Default: Minimize to tray (window hidden, app keeps running)
-- If "Keep running in background" = OFF: Quit app
-- Cmd+Q (macOS) / Alt+F4 (Windows): Always quits
-
-**Window state persistence:**
-- Remembers size, position across restarts
-- Stored in Tauri store: `~/.config/goodwebtools/state.json`
-
-### 6.5 Auto-Updater
-
-**Uses `tauri-plugin-updater`:**
-
-1. App checks GitHub Releases API on startup (if auto-update enabled)
-2. Compares current version with latest release
-3. If newer version available:
-   - Shows notification: "GoodWebTools v1.1.0 is available"
-   - Downloads installer in background
-4. Once downloaded: "Update ready — Restart to install"
-5. User clicks "Restart" → app quits, installer runs
-
-**Fallback:** If updater fails, show manual download link
-
----
-
-## 7. Download Page & Asset Serving
-
-### 7.1 Download Page (`src/pages/download.astro`)
-
-**URL:** `goodwebtools.com/download`
-
-**Layout:**
-- Hero: "GoodWebTools Desktop"
-- Primary download button (OS-detected): "Download for macOS (Apple Silicon)"
-- Secondary platform links: macOS (Intel), Windows, Linux
-- "What's new in Desktop?" feature list
-- Link to release notes on GitHub
-
-**OS/Architecture Detection:**
-```typescript
-const userAgent = Astro.request.headers.get('user-agent') || '';
-const platform = detectPlatform(userAgent); // 'macos-arm64' | 'macos-x64' | 'windows' | 'linux'
-```
-
-**Client-side architecture refinement:**
-- JavaScript checks `navigator.platform` for Apple Silicon detection
-- Shows both macOS download buttons if unsure
-
-### 7.2 Download Tracking Endpoint
-
-**Endpoint:** `goodwebtools.com/api/download/:platform`
-
-**Implementation:** Cloudflare Worker (`worker/download-tracker.js`)
-
-**Flow:**
-1. User clicks "Download for macOS" → hits `/api/download/macos-arm64`
-2. Worker logs download event (OS, architecture, timestamp, country)
-3. Worker **immediately redirects** (HTTP 302) to GitHub release asset URL
-4. Actual file bytes stream **directly from GitHub to user**
-
-**Benefits:**
-- Track downloads without bandwidth costs
-- Zero Worker CPU overhead (just redirect)
-- GitHub's CDN handles delivery
-
-**Implementation:**
-```javascript
-export default {
-  async fetch(request, env) {
-    const url = new URL(request.url);
-    const platform = url.pathname.split('/').pop();
-    const channel = url.searchParams.get('channel') || 'stable';
-    
-    // Log download
-    await logDownload(platform, channel, request, env);
-    
-    // Fetch release from GitHub
-    const release = await getRelease(channel, env.GITHUB_TOKEN);
-    
-    // Map platform to asset
-    const assetMap = {
-      'macos-arm64': /GoodWebTools.*aarch64\.dmg$/,
-      'macos-x64': /GoodWebTools.*x64\.dmg$/,
-      'windows': /GoodWebTools.*\.msi$/,
-      'linux-appimage': /GoodWebTools.*\.AppImage$/,
-      'linux-deb': /GoodWebTools.*\.deb$/,
-    };
-    
-    const asset = release.assets.find(a => assetMap[platform]?.test(a.name));
-    
-    if (!asset) {
-      return new Response('Asset not found', { status: 404 });
-    }
-    
-    // Redirect to GitHub
-    return Response.redirect(asset.browser_download_url, 302);
-  }
-};
-```
-
-### 7.3 Staging Releases
-
-**Strategy:** Pre-release tags on GitHub
-
-**Production:**
-```bash
-git tag desktop-v1.0.0
-→ GitHub Release (stable)
-→ download page shows under "Stable Release"
-```
-
-**Beta:**
-```bash
-git tag desktop-v1.1.0-beta.1
-→ GitHub Release (pre-release flag)
-→ download page shows under "Beta Release (Testing)"
-```
-
-**Detection:**
-```javascript
-// worker/download-tracker.js
-async function getRelease(channel, token) {
-  if (channel === 'beta') {
-    const res = await fetch('https://api.github.com/repos/slaveofcode/goodwebtools/releases');
-    const releases = await res.json();
-    return releases.find(r => r.prerelease);
-  } else {
-    const res = await fetch('https://api.github.com/repos/slaveofcode/goodwebtools/releases/latest', {
-      headers: { 'Authorization': `token ${token}` }
-    });
-    return res.json();
-  }
-}
-```
-
-**Download URL:**
-- Stable: `/api/download/macos-arm64`
-- Beta: `/api/download/macos-arm64?channel=beta`
-
-### 7.4 Cloudflare Costs (Download Tracking)
-
-**Free tier:**
-- Workers: 100,000 requests/day free
-- Bandwidth: Unlimited (redirects are cheap)
-
-**At scale:**
-- 1,000 downloads/day = 30k req/month = **FREE**
-- 10,000 downloads/day = 300k req/month = **FREE**
-- 100,000 downloads/day = 3M req/month = **$5/mo**
-
-**Recommendation:** Start with free tier, monitor usage.
-
----
-
-## 8. Build & Release Pipeline
-
-### 8.1 GitHub Actions Workflow
-
-**File:** `.github/workflows/release.yml`
-
-**Triggers:** Push tags matching `desktop-v*`
-
-**Matrix build:**
-```yaml
-name: Release Desktop App
-
-on:
-  push:
-    tags:
-      - 'desktop-v*'
-
-jobs:
-  build:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: 'macos-latest'
-            target: 'aarch64-apple-darwin'
-          - platform: 'macos-latest'
-            target: 'x86_64-apple-darwin'
-          - platform: 'windows-latest'
-            target: 'x86_64-pc-windows-msvc'
-          - platform: 'ubuntu-22.04'
-            target: 'x86_64-unknown-linux-gnu'
-
-    runs-on: ${{ matrix.platform }}
-    
-    steps:
-      - uses: actions/checkout@v4
-      
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          
-      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.target }}
-      
-      - name: Install dependencies (Ubuntu)
-        if: matrix.platform == 'ubuntu-22.04'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev librsvg2-dev
-      
-      - name: Install Node dependencies
-        run: npm ci
-      
-      - name: Build Astro (web assets)
-        run: npm run build
-        
-      - name: Bundle Tauri assets
-        run: node scripts/bundle-tauri-assets.mjs
-      
-      - name: Build Tauri app
-        uses: tauri-apps/tauri-action@v0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tagName: ${{ github.ref_name }}
-          releaseName: 'GoodWebTools ${{ github.ref_name }}'
-          releaseBody: 'See CHANGELOG.md for details.'
-          releaseDraft: false
-          prerelease: ${{ contains(github.ref_name, 'beta') || contains(github.ref_name, 'alpha') }}
-```
-
-**Outputs:**
-- `.dmg` files (macOS Intel + Apple Silicon)
-- `.msi` installer (Windows)
-- `.AppImage` + `.deb` (Linux)
-- Automatically attached to GitHub Release
-
-### 8.2 Asset Bundling Script
-
-**File:** `scripts/bundle-tauri-assets.mjs`
-
-**Purpose:** Copy WASM + ML models into Tauri resources before build
-
-```javascript
-import { copyFileSync, mkdirSync, readdirSync, statSync } from 'fs';
-import { join } from 'path';
-
-const SOURCE_DIRS = ['public/wasm', 'public/models'];
-const TARGET_DIR = 'src-tauri/resources';
-
-console.log('Bundling assets for Tauri...');
-
-mkdirSync(TARGET_DIR, { recursive: true });
-
-for (const sourceDir of SOURCE_DIRS) {
-  const targetSubDir = join(TARGET_DIR, sourceDir.replace('public/', ''));
-  mkdirSync(targetSubDir, { recursive: true });
-  copyRecursive(sourceDir, targetSubDir);
-}
-
-function copyRecursive(src, dest) {
-  const files = readdirSync(src);
-  for (const file of files) {
-    const srcPath = join(src, file);
-    const destPath = join(dest, file);
-    if (statSync(srcPath).isDirectory()) {
-      mkdirSync(destPath, { recursive: true });
-      copyRecursive(srcPath, destPath);
-    } else {
-      copyFileSync(srcPath, destPath);
-      console.log(`  ✓ ${srcPath} → ${destPath}`);
-    }
-  }
-}
-
-console.log('Asset bundling complete.');
-```
-
-### 8.3 Release Asset Naming
-
-**Format:** `GoodWebTools_{version}_{arch}.{ext}`
-
-**Examples:**
-- `GoodWebTools_1.0.0_aarch64.dmg` (macOS Apple Silicon)
-- `GoodWebTools_1.0.0_x64.dmg` (macOS Intel)
-- `GoodWebTools_1.0.0_x64.msi` (Windows)
-- `GoodWebTools_1.0.0_amd64.AppImage` (Linux)
-- `GoodWebTools_1.0.0_amd64.deb` (Debian/Ubuntu)
-
-### 8.4 Code Signing (Future Phase)
-
-**Currently:** Ship unsigned (users see warnings).
-
-**When ready to sign:**
-
-**macOS:**
-1. Enroll in Apple Developer Program ($99/year)
-2. Create signing certificate + provisioning profile
-3. Add to GitHub secrets: `APPLE_CERTIFICATE`, `APPLE_CERTIFICATE_PASSWORD`
-4. Update workflow with notarization steps
-
-**Windows:**
-1. Purchase code signing certificate (~$200-400/year)
-2. Add to GitHub secrets: `WINDOWS_CERTIFICATE`
-3. Update `tauri.conf.json` with certificate thumbprint
-
-**Linux:** No signing required
-
-### 8.5 Release Process
-
-**Steps:**
-```bash
-# 1. Finish features, test locally
-npm run tauri:dev
-
-# 2. Update version in package.json and tauri.conf.json
-
-# 3. Commit and tag
-git add .
-git commit -m "chore: bump version to 1.0.0"
-git tag desktop-v1.0.0
-git push origin develop
-git push origin desktop-v1.0.0
-
-# 4. GitHub Actions builds (~15-20 min)
-# 5. Test installers on each platform
-# 6. Edit release notes on GitHub
-# 7. Publish release
-```
-
----
-
-## 9. Testing Strategy
-
-### 9.1 Testing Layers
-
-**Layer 1: Service Unit Tests**
-- Test each service independently (browser and Tauri)
-- Mock Tauri IPC calls in tests
-- Verify fallback behavior
-
-**Layer 2: Tool Integration Tests**
-- Test refactored tools use services correctly
-- Verify tools work in both browser and Tauri contexts
-
-**Layer 3: Tauri Command Tests**
-- Test Rust IPC commands with mock data
-- Verify permission checks work
-
-**Layer 4: End-to-End Tests**
-- Manual testing checklist (all platforms)
-- Test each native capability
-
-### 9.2 Platform-Specific Testing Matrix
-
-| Feature | macOS | Windows | Linux |
-|---------|-------|---------|-------|
-| Screen capture (no picker) | ✓ | ✓ | ✓ |
-| Desktop region selector | ✓ | ✓ | ✓ |
-| Global hotkeys | ✓ | ✓ | ✓ |
-| System audio capture | ✓ | ✓ | ✓ |
-| Native file dialogs | ✓ | ✓ | ✓ |
-| System tray icon | ✓ | ✓ | ✓ |
-| Auto-updater | ✓ | ✓ | ✓ |
-
-### 9.3 Regression Testing (Web App)
-
-**Critical:** Ensure web app continues working.
-
-**Test suite:**
-1. Run existing tests: `npm test` (all 259 tests must pass)
-2. Visual regression: Screenshot each tool in browser
-3. Smoke test: Open every tool, verify no console errors
-
-**CI check:**
-```yaml
-# .github/workflows/test.yml
-name: Test Suite
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-      - run: npm ci
-      - run: npm test
-      - run: npm run build
-```
-
-### 9.4 Manual Testing Checklist (Pre-Release)
-
-**Desktop app:**
-- [ ] First launch triggers permission wizard
-- [ ] Screen capture works without picker
-- [ ] Desktop region selector overlay works
-- [ ] Global hotkey triggers from any app
-- [ ] System audio records in screen recording
-- [ ] Native file dialogs open for all file tools
-- [ ] Settings persist across restarts
-- [ ] System tray menu works
-- [ ] Close window minimizes to tray
-- [ ] Auto-updater detects new version
-- [ ] All 55 tools work correctly
-- [ ] App works completely offline
-- [ ] Analytics opt-out works
-
-**Web app (regression):**
-- [ ] All tools still work in browser
-- [ ] Service Worker still caches assets
-- [ ] No new console errors
-- [ ] All 259 tests pass
-
-### 9.5 Beta Testing Program
-
-1. **Internal alpha** (week 1-2): Developer + close testers
-2. **Public beta** (week 3-4): Tag `desktop-v1.0.0-beta.1`, collect feedback
-3. **Release candidate** (week 5): Tag `desktop-v1.0.0-rc.1`, final testing
-4. **v1.0.0 stable** (week 6): Tag `desktop-v1.0.0`, announce publicly
-
----
-
-## 10. Error Handling & Edge Cases
-
-### 10.1 Permission Denial Handling (All Platforms)
-
-#### macOS
-
-**Required permissions:**
-- Screen Recording (System Preferences → Privacy & Security)
-- Accessibility (for global hotkeys)
-- Microphone (optional)
-
-**Error handling:**
-```typescript
-async captureScreen(options: CaptureOptions): Promise<Blob> {
-  try {
-    const hasPermission = await invoke('check_screen_recording_permission');
-    if (!hasPermission) {
-      throw new PermissionError('screen_recording', 'macOS', 
-        'Open System Preferences → Privacy & Security → Screen Recording and enable GoodWebTools.'
-      );
-    }
-    return await invoke('capture_screen', { options });
-  } catch (error) {
-    // Handle...
-  }
-}
-```
-
-**Rust helper:**
-```rust
-#[tauri::command]
-pub fn open_system_settings(permission: String) -> Result<(), String> {
-    #[cfg(target_os = "macos")]
-    {
-        let url = match permission.as_str() {
-            "screen_recording" => "x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture",
-            "accessibility" => "x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility",
-            "microphone" => "x-apple.systempreferences:com.apple.preference.security?Privacy_Microphone",
-            _ => return Err("Unknown permission".into()),
-        };
-        std::process::Command::new("open").arg(url).spawn().ok();
-    }
-    Ok(())
-}
-```
-
-#### Windows
-
-**Required permissions:**
-- Graphics Capture (granted automatically on first use)
-- Microphone (Windows privacy settings)
-
-**Error handling:**
-```typescript
-async captureScreen(options: CaptureOptions): Promise<Blob> {
-  try {
-    return await invoke('capture_screen', { options });
-  } catch (error) {
-    if (error.includes('access denied') || error.includes('0x80070005')) {
-      throw new PermissionError('graphics_capture', 'Windows',
-        'Screen capture was blocked. Try:\n' +
-        '1. Settings → Privacy & Security → Screenshots and apps\n' +
-        '2. Enable "Let apps record your screen"'
-      );
-    }
-    throw error;
-  }
-}
-```
-
-**Rust helper:**
-```rust
-#[cfg(target_os = "windows")]
-{
-    let url = match permission.as_str() {
-        "graphics_capture" => "ms-settings:privacy-graphicscaptureprogrammatic",
-        "microphone" => "ms-settings:privacy-microphone",
-        _ => "ms-settings:privacy",
-    };
-    std::process::Command::new("cmd")
-        .args(&["/C", "start", url])
-        .spawn()
-        .ok();
-}
-```
-
-#### Linux
-
-**Desktop portals (Wayland):**
-- Uses XDG Desktop Portal (PipeWire)
-- User selects screen/window each time (by design)
-
-**Error handling:**
-```typescript
-async captureScreen(options: CaptureOptions): Promise<Blob> {
-  try {
-    return await invoke('capture_screen', { options });
-  } catch (error) {
-    if (error.includes('portal')) {
-      throw new PermissionError('portal', 'Linux',
-        'Screen capture requires Desktop Portal support.\n' +
-        'Ensure xdg-desktop-portal and pipewire are installed:\n' +
-        '  sudo apt install xdg-desktop-portal pipewire'
-      );
-    }
-    if (error.includes('cancelled')) {
-      throw new UserCancelledError('Screen capture cancelled by user.');
-    }
-    throw error;
-  }
-}
-```
-
-#### Unified Permission Error UI
-
-```typescript
-// src/components/PermissionErrorModal.tsx
-function PermissionErrorModal({ error, onRetry, onCancel }) {
-  const { permission, platform, instructions } = error;
-  
-  return (
-    <Modal title={`${permission} Permission Required`}>
-      <p>GoodWebTools needs {permission} access to use this feature.</p>
-      
-      <div className="instructions">
-        <p><strong>How to grant permission ({platform}):</strong></p>
-        <pre>{instructions}</pre>
-      </div>
-      
-      {platform !== 'Linux' && (
-        <button onClick={() => invoke('open_system_settings', { permission })}>
-          Open System Settings
-        </button>
-      )}
-      
-      <div className="actions">
-        <button onClick={onCancel}>Cancel</button>
-        <button onClick={onRetry}>I've Granted Permission — Retry</button>
-      </div>
-    </Modal>
-  );
-}
-```
-
-**Settings page permission status:**
-```tsx
-<section>
-  <h3>Permissions Status</h3>
-  <ul>
-    <li>
-      Screen Recording: {permissions?.screenRecording ? '✅ Granted' : '❌ Denied'}
-      {!permissions?.screenRecording && (
-        <button onClick={() => invoke('open_system_settings', { permission: 'screen_recording' })}>
-          Grant Access
-        </button>
-      )}
-    </li>
-    <li>Accessibility: {permissions?.accessibility ? '✅ Granted' : '❌ Denied'}</li>
-    <li>Microphone: {permissions?.microphone ? '✅ Granted' : '⚠️ Optional'}</li>
-  </ul>
-</section>
-```
-
-### 10.2 Platform Feature Detection
-
-```typescript
-export interface CaptureServiceCapabilities {
-  systemCapture: boolean;
-  regionSelector: boolean;
-  systemAudio: boolean;
-  globalHotkeys: boolean;
-}
-
-getCapabilities(): CaptureServiceCapabilities {
-  const platform = navigator.platform;
-  return {
-    systemCapture: true,
-    regionSelector: platform !== 'Linux', // Linux WIP
-    systemAudio: true,
-    globalHotkeys: true,
-  };
-}
-```
-
-**UI adapts:**
-```tsx
-const capabilities = captureService.getCapabilities();
-
-{capabilities.regionSelector ? (
-  <button onClick={selectRegion}>Select Region</button>
-) : (
-  <button onClick={captureFullScreen}>Capture Full Screen</button>
-)}
-```
-
-### 10.3 Graceful Degradation
-
-**If native feature fails, fall back to browser:**
-
-```typescript
-async captureScreen(options: CaptureOptions): Promise<Blob> {
-  try {
-    return await this.nativeCapture(options);
-  } catch (error) {
-    console.warn('Native capture failed, falling back to browser API', error);
-    return await this.browserFallback(options);
-  }
-}
-```
-
-### 10.4 Offline Asset Loading
-
-```typescript
-// src/services/asset/tauri.ts
-import { convertFileSrc } from '@tauri-apps/api/tauri';
-
-async loadModel(path: string): Promise<ArrayBuffer> {
-  const assetUrl = convertFileSrc(`resources/${path}`);
-  const response = await fetch(assetUrl);
-  if (!response.ok) {
-    throw new Error(`Failed to load bundled asset: ${path}`);
-  }
-  return response.arrayBuffer();
-}
-```
-
-### 10.5 Large File Handling
-
-```typescript
-const MAX_VIDEO_SIZE = 2 * 1024 * 1024 * 1024; // 2 GB
-const MAX_IMAGE_SIZE = 500 * 1024 * 1024;      // 500 MB
-
-async function processVideo(file: File) {
-  if (file.size > MAX_VIDEO_SIZE) {
-    throw new Error(
-      `File too large (${formatBytes(file.size)}). Maximum: ${formatBytes(MAX_VIDEO_SIZE)}.`
-    );
-  }
-  
-  return convertVideo(file, {
-    onProgress: (percent) => updateProgress(percent)
-  });
-}
-```
-
-### 10.6 Multi-Monitor Support
-
-```rust
-#[tauri::command]
-pub async fn list_displays() -> Result<Vec<Display>, String> {
-    // Platform-specific: enumerate displays
-}
-
-#[tauri::command]
-pub async fn capture_display(display_id: String) -> Result<Vec<u8>, String> {
-    // Capture specific display by ID
-}
-```
-
-**UI shows display picker:**
-```tsx
-const displays = await invoke('list_displays');
-
-<select onChange={e => setDisplayId(e.target.value)}>
-  {displays.map(d => (
-    <option key={d.id} value={d.id}>
-      {d.name} {d.is_primary && '(Primary)'} - {d.bounds.width}×{d.bounds.height}
-    </option>
-  ))}
-</select>
-```
-
-### 10.7 Update Failures
-
-```typescript
-import { checkUpdate, installUpdate } from '@tauri-apps/api/updater';
-
-async function checkForUpdates() {
-  try {
-    const { shouldUpdate, manifest } = await checkUpdate();
-    if (shouldUpdate) {
-      const willUpdate = confirm(`Update to ${manifest.version} available. Install now?`);
-      if (willUpdate) {
-        await installUpdate();
-      }
-    }
-  } catch (error) {
-    console.error('Update check failed:', error);
-    showNotification({
-      title: 'Update Available',
-      message: 'Auto-update failed. Download manually?',
-      actions: [
-        { label: 'Download', onClick: () => open('https://goodwebtools.com/download') }
-      ]
-    });
-  }
-}
-```
-
-### 10.8 Crash Recovery & Reporting
-
-**Two separate privacy controls:**
-
-1. **Usage Analytics** (default: ON)
-   - Which tools are used, feature adoption
-   - Google Analytics (web) + custom telemetry (desktop)
-
-2. **Crash Reporting** (default: ASK on first crash)
-   - Stack traces, error messages, system info
-   - Sentry or Tauri's crash handler
-
-**Settings page:**
-```tsx
-<section>
-  <h3>Privacy</h3>
-  
-  <label>
-    <input type="checkbox" checked={analyticsEnabled} onChange={toggleAnalytics} />
-    Usage Analytics
-  </label>
-  <p className="text-sm">
-    Help improve GoodWebTools by sending anonymous usage data. 
-    No file contents or personal data is collected.
-  </p>
-  
-  <label>
-    <input type="checkbox" checked={crashReportingEnabled} onChange={toggleCrashReporting} />
-    Crash Reporting
-  </label>
-  <p className="text-sm">
-    Automatically send crash reports when the app fails. 
-    Includes error messages and stack traces. No file contents are included.
-  </p>
-</section>
-```
-
-**First crash flow:**
-```
-┌─────────────────────────────────────────┐
-│ GoodWebTools encountered an error       │
-│                                         │
-│ Would you like to send a crash report? │
-│                                         │
-│ The report includes:                   │
-│ • Error message and stack trace        │
-│ • App version and OS details           │
-│ • Memory usage at time of crash        │
-│                                         │
-│ ✗ No file contents or personal data    │
-│                                         │
-│ [ ] Always send crash reports          │
-│                                         │
-│ [Don't Send]  [Send Report]            │
-└─────────────────────────────────────────┘
-```
-
-**What crash reports include:**
-- ✓ Error message, stack trace
-- ✓ App version, OS version, architecture
-- ✓ Memory usage, active tool
-- ✗ File contents, file names, personal data, IP addresses
-
-**Implementation (Sentry recommended):**
-```rust
-// src-tauri/src/main.rs
-let _guard = sentry::init(("https://your-dsn@sentry.io/project", sentry::ClientOptions {
-    release: Some(env!("CARGO_PKG_VERSION").into()),
-    before_send: Some(Arc::new(|event| {
-        if crash_reporting_enabled() {
-            Some(event)
-        } else {
-            None
-        }
-    })),
-    ..Default::default()
-}));
-```
-
----
-
-## 11. Migration Path & Rollout Plan
-
-### 11.1 Development Phases (6-8 weeks)
-
-**Phase 0: Foundation (Week 1)**
-- Set up Tauri project (`src-tauri/`)
-- Configure `tauri.conf.json`
-- Build service layer interfaces (TypeScript)
-- Create `PlatformService` to detect shell
-- First "Hello World" Tauri build
-
-**Phase 1: Core Services (Week 1-2)**
-- Implement all 6 services (browser + Tauri)
-- Build Rust IPC commands
-- Unit tests for service layer
-- Verify service detection works
-
-**Phase 2: Native Capture (Week 2-3)**
-- macOS: ScreenCaptureKit integration
-- Windows: Windows.Graphics.Capture
-- Linux: PipeWire portal
-- Desktop region selector overlay
-- Global hotkey registration
-
-**Phase 3: High-Value Tools (Week 3)**
-- Refactor Screen Recorder + Screenshot (2 tools)
-- Refactor Code Scratchpad (1 tool)
-- Prove architecture works end-to-end
-
-**Phase 4: File & Media Tools (Week 4)**
-- Refactor PDF tools (10 tools)
-- Refactor Video/Audio converters (5 tools)
-- Refactor File tools (4 tools)
-- Integrate native FFmpeg
-
-**Phase 5: Image & ML Tools (Week 5)**
-- Refactor all Image tools (14 tools)
-- Bundle ML models in Tauri resources
-- Test fully offline
-
-**Phase 6: Remaining Tools (Week 5-6)**
-- Refactor Dev/Text tools (17 tools)
-- Refactor Drawing tools (2 tools)
-- Refactor SQLite Playground (1 tool)
-
-**Phase 7: Desktop Features (Week 6)**
-- First-run permission wizard
-- Settings page (all sections)
-- System tray menu
-- Auto-updater integration
-- Analytics + crash reporting
-
-**Phase 8: Build & Release (Week 6-7)**
-- GitHub Actions workflow
-- Asset bundling script
-- Download page + tracking endpoint
-- Test installers on all platforms
-
-**Phase 9: Testing & Polish (Week 7)**
-- Manual testing checklist
-- Bug fixes
-- Performance optimization
-
-**Phase 10: Beta Release (Week 7)**
-- Tag `desktop-v1.0.0-beta.1`
-- Announce on GitHub
-- Collect feedback
-
-**Phase 11: v1.0.0 Stable (Week 8)**
-- Tag `desktop-v1.0.0`
-- Update download page
-- Announce publicly
-
-### 11.2 Risk Mitigation
-
-| Risk | Mitigation |
-|------|------------|
-| Platform-specific bugs | Test on all platforms continuously (VMs for Win/Linux) |
-| ML models bundle too large | Analyze usage, consider lazy download or "lite" build |
-| Refactoring breaks web app | Run full test suite after each tool refactored |
-| Permission flows confuse users | Clear first-run wizard with screenshots, beta test with non-technical users |
-| Timeline slips | Phase 3 proves architecture; can ship with subset of tools |
-
----
-
-## 12. Success Metrics
-
-**Launch targets (first 3 months):**
-- 1,000 desktop app downloads
-- <5% crash rate
-- 70%+ retention (users who download use it weekly)
-- Top 3 most-used tools identified via analytics
-
-**Quality bars:**
-- All 259 existing tests pass
-- No regression in web app functionality
-- <50ms service layer overhead vs direct browser APIs
-- <200 MB app bundle size (excluding ML models)
-
----
-
-## 13. Post-Launch Roadmap
-
-**v1.1 (3 months after v1.0):**
-- System audio capture (capability #4)
-- Native FFmpeg fast-paths (capability #5)
-- Performance optimizations
-- User-reported bug fixes
-
-**v1.2 (6 months):**
-- Linux desktop marquee selector (full parity)
-- Scrolling capture of web pages
-- Plugin system (community-contributed tools)
-
-**v2.0 (12 months):**
-- Native window capture of other apps
-- OCR integration
-- Cloud sync (optional, privacy-preserving)
-
----
-
-## Appendix A: Technology Stack
-
-**Frontend:**
-- Astro 4.16+ (static site generator)
-- React 18+ (tool islands)
-- Tailwind CSS (styling)
-- Monaco Editor (code scratchpad)
-
-**Backend (Desktop):**
-- Tauri 2 (Rust + webview wrapper)
-- ScreenCaptureKit (macOS capture)
-- Windows.Graphics.Capture (Windows capture)
-- PipeWire (Linux capture)
-
-**Services:**
-- Cloudflare Workers (web hosting)
-- Cloudflare R2 (ML models for web)
-- GitHub Releases (desktop installers)
-- GitHub Actions (CI/CD)
-- Sentry (crash reporting, optional)
-
-**Build Tools:**
-- Vite (bundler)
-- TypeScript (type safety)
-- Vitest (testing)
-- Tauri CLI (desktop builds)
-
----
-
-## Appendix B: Deployment Matrix
-
-| Artifact | Source | Build Command | Deploy Target | Trigger |
-|----------|--------|---------------|---------------|---------|
-| Web app | `src/` | `npm run build` | Cloudflare Workers | `git push origin main` |
-| Desktop (macOS ARM) | `src/` + `src-tauri/` | `tauri build --target aarch64-apple-darwin` | GitHub Releases | `git tag desktop-v*` |
-| Desktop (macOS Intel) | `src/` + `src-tauri/` | `tauri build --target x86_64-apple-darwin` | GitHub Releases | `git tag desktop-v*` |
-| Desktop (Windows) | `src/` + `src-tauri/` | `tauri build --target x86_64-pc-windows-msvc` | GitHub Releases | `git tag desktop-v*` |
-| Desktop (Linux) | `src/` + `src-tauri/` | `tauri build --target x86_64-unknown-linux-gnu` | GitHub Releases | `git tag desktop-v*` |
-
----
-
-## Appendix C: File Size Estimates
-
-| Component | Size | Notes |
-|-----------|------|-------|
-| Astro `dist/` | ~15 MB | HTML/CSS/JS + small WASM |
-| ML models | ~540 MB | ESRGAN, LaMa, Background Removal, MediaPipe |
-| Native FFmpeg (macOS) | ~70 MB | Universal binary |
-| Native FFmpeg (Windows) | ~80 MB | x64 binary |
-| Tauri runtime | ~5 MB | Webview wrapper |
-| **Total desktop bundle** | ~700-750 MB | First launch download |
-
-**Optimizations considered:**
-- Lazy-load ML models on first use (reduces initial download)
-- Offer "Desktop Lite" without ML tools (~100 MB)
-- On-demand FFmpeg download for video tools
-
----
-
-## Sign-Off
-
-**Approved by:** Kresna (kresnapmn@gmail.com)  
-**Date:** 2026-07-14  
-**Next Step:** Invoke `writing-plans` skill to create implementation plan
-
----
-
-**End of Design Specification**
diff --git a/docs/superpowers/specs/2026-07-25-dbdiagram-tool-design.md b/docs/superpowers/specs/2026-07-25-dbdiagram-tool-design.md
deleted file mode 100644
index fc5a96b..0000000
--- a/docs/superpowers/specs/2026-07-25-dbdiagram-tool-design.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# DB Diagram Tool — Design
-
-**Status:** Approved (2026-07-25)
-**Scope:** Spec B of a two-spec initiative. Spec A is Image Tools & Annotator Handoff.
-
-## Goal
-
-A dbdiagram.io-style database schema tool in the **Draw** category: write schema in DBML in a code editor, see it rendered as a live, interactive ER diagram (zoom/pan/drag/minimap), with **bold hover-highlight** of a table's relationships, plus **SQL export** to multiple dialects and **image export** (PNG/JPEG/WebP/SVG). Same power-user chrome as the Whiteboard tool (expand, hide-navbar, IndexedDB persistence).
-
-## Architecture
-
-A single React island split into three panes: a **Monaco DBML editor** (left), a **react-flow ER diagram** (right), and a **toolbar** (top). DBML text is the source of truth. On (debounced) edit, parse DBML → build nodes/edges → auto-layout with dagre → render in react-flow. Layout positions the user drags are preserved across re-parses (keyed by table name) and persisted. Everything is client-side, mirroring the Whiteboard's dynamic-import + IndexedDB pattern.
-
-**Data flow:**
-```
-Monaco (DBML text) --debounce 400ms--> parseDbml (@dbml/core)
-   -> { tables, refs } -> buildFlow() -> { nodes, edges }
-   -> dagreLayout() (only for tables without a saved position)
-   -> react-flow render
-DBML text + node positions --debounce--> IndexedDB (gwt-dbdiagram)
-Toolbar -> SQL export (dialect) | Image export (format, scale)
-```
-
-## Tech Stack
-
-- **@dbml/core** — parse DBML to a `Database` model; native SQL export for `postgres`, `mysql`, `mssql`, `oracle`. (Confirmed via the library API.)
-- **@xyflow/react** (react-flow v12) — interactive diagram: zoom, pan, node drag, minimap, controls, custom node + custom edge types, `onNodeMouseEnter`/`onNodeMouseLeave` for hover.
-- **@dagrejs/dagre** — automatic left-to-right layout for tables lacking a saved position.
-- **html-to-image** — export the diagram to PNG/JPEG/SVG; WebP via `toCanvas` → `canvas.toBlob('image/webp')`.
-- **Monaco** — already self-hosted in the app; DBML edited as plain text (custom lightweight tokenizer optional, not required for v1).
-- Existing: `idb`, `downloadService`, `ImageResult`/copy utilities, lucide icons.
-
-## Global Constraints
-
-- **Zero external network requests at runtime** — all four deps bundled; Monaco already self-hosted; no CDN.
-- **All client-side** — no server round-trips.
-- Follow existing conventions: `ToolDef` registry entry, island default-export (no required props), Whiteboard-style dynamic import for heavy deps, IndexedDB via `idb`.
-- New deps added to `package.json`: `@dbml/core`, `@xyflow/react`, `@dagrejs/dagre`, `html-to-image`. Verify bundle builds (Astro/Vite) and desktop (Tauri) unaffected.
-- **Draw category**, route `/tools/db-diagram`, `status: 'beta'`.
-
----
-
-## Component 1: DBML parsing & model (`src/tools/draw/dbml.lib.ts`)
-
-Pure functions wrapping @dbml/core, isolating the library so the island and tests don't touch it directly.
-
-- `parseDbml(source: string): { db: Database | null; error: string | null }` — runs `Parser.parse(source, 'dbml')` (or `importer`), catching parse errors and returning a human-readable message + line if available. Never throws.
-- `buildFlow(db: Database): { nodes: DiagramNode[]; edges: DiagramEdge[] }` — walks the parsed schema:
-  - One `DiagramNode` per table: `{ id: tableName, data: { name, columns: { name, type, pk, fk, notNull, unique }[] }, type: 'table' }`.
-  - One `DiagramEdge` per relationship (ref): `{ id, source, target, sourceHandle: <fk column>, targetHandle: <pk column>, data: { relation: '1-n'|'1-1'|'n-1' } }`. Column-level handles enable endpoint highlighting.
-- Types `DiagramNode`, `DiagramEdge`, `TableColumn` exported for the island and tests.
-
-**Tests (`dbml.lib.test.ts`):** parse a 2-table DBML with a ref → assert node count, column flags (pk/fk), edge source/target + handles; parse invalid DBML → `error` non-null, `db` null; empty string → empty nodes/edges, no error.
-
-## Component 2: Auto-layout (`src/tools/draw/layout.lib.ts`)
-
-- `layoutNodes(nodes: DiagramNode[], edges: DiagramEdge[], saved: Record<string, {x:number;y:number}>): DiagramNode[]` — for any node with a `saved[id]` position, use it; for the rest, run dagre (rankdir `LR`, node size estimated from column count) and assign computed positions. Pure except for dagre; deterministic given inputs.
-
-**Tests:** nodes with saved positions keep them; nodes without get distinct non-overlapping positions; result length == input length.
-
-## Component 3: The island (`src/islands/draw/DbDiagram.tsx`)
-
-### Layout & chrome (mirror `Whiteboard.tsx`)
-- Split pane: Monaco editor left (~40%, draggable splitter), diagram right. Splitter ratio persisted to `localStorage['gwt-dbdiagram-split']`.
-- **Expand** overlay (fixed, full-viewport) persisted to `localStorage['gwt-dbdiagram-expanded']`; **hide-navbar** pull-tab `gwt-dbdiagram-navhidden` — same mechanism/keys convention as Whiteboard.
-- Dynamic imports after mount: `@xyflow/react` (+ its CSS), `@dagrejs/dagre`, `@dbml/core`, `html-to-image` — none in the initial island bundle.
-
-### Diagram
-- Custom **TableNode**: header (table name) + column rows; each column row is a react-flow `Handle` (source+target, id = column name) so edges attach at the exact column. PK columns marked (key icon), FK columns marked.
-- Custom **RelationEdge**: default style is a smooth bezier; carries `data.relation` for optional cardinality markers.
-- react-flow `Controls` (zoom in/out/fit), `MiniMap`, `Background`. Node drag enabled; on drag-stop, save that node's position to state + IndexedDB.
-- Seed content: a small example schema (users/posts) when there's no saved DBML, so the tool isn't empty on first load.
-
-### Bold hover-highlight (the emphasized feature — stronger than dbdiagram.io)
-On `onNodeMouseEnter(table)`:
-- Compute the set of connected edges and neighbor tables.
-- **Connected edges** get a `highlighted` class: **thicker stroke (3–4px vs 1.5px)**, an **accent color** (e.g. `--accent`/amber), an animated dashed flow (react-flow `animated`), and a soft glow via SVG `filter: drop-shadow`. These constants live in a `HIGHLIGHT` config object at the top of the file so they're easily tunable:
-  ```ts
-  const HIGHLIGHT = {
-    edgeWidth: 3.5, edgeWidthIdle: 1.5, color: 'var(--accent, #f59e0b)',
-    glow: 'drop-shadow(0 0 4px var(--accent, #f59e0b))',
-    dimOpacity: 0.25, nodeBorderWidth: 2.5,
-  };
-  ```
-- The **hovered table** and **neighbor tables** get an accent border (`nodeBorderWidth`) and full opacity.
-- The **FK and PK endpoint columns** on the participating tables get a highlighted background (column-level emphasis), using the edge `sourceHandle`/`targetHandle` ids.
-- **All other** nodes and edges dim to `dimOpacity` (~25%), so the active relationship pops.
-- `onNodeMouseLeave` restores everything. Implemented by deriving `className`/`style` from a `hoveredId` state in the node/edge render — no imperative DOM mutation.
-
-### Persistence (IndexedDB `gwt-dbdiagram`, store `doc`, key `current`)
-- Value `{ dbml: string, positions: Record<string, {x,y}>, updatedAt: number }`.
-- `loadDoc()/saveDoc()` in `src/tools/draw/dbdiagram.store.ts` (mirror `whiteboard.store.ts`). Debounced autosave on DBML change and on node drag-stop.
-
-## Component 4: SQL export (`src/tools/draw/sql-export.lib.ts`)
-
-- `exportSql(source: string, dialect: Dialect): string` where `Dialect = 'postgres'|'mysql'|'mssql'|'oracle'|'sqlite'|'clickhouse'`.
-  - **Native** (`postgres`,`mysql`,`mssql`,`oracle`): use @dbml/core's exporter (`ModelExporter.export(db, dialect)` / `importer`+`exporter` path).
-  - **Custom** (`sqlite`, `clickhouse`): generate DDL from the parsed `Database` model via a small `generateDDL(db, dialect)`:
-    - **sqlite** — `CREATE TABLE` with SQLite type affinities (INTEGER/TEXT/REAL/BLOB), `PRIMARY KEY`, `AUTOINCREMENT` for int PKs, `FOREIGN KEY ... REFERENCES`, no schema-qualified names.
-    - **clickhouse** — `CREATE TABLE ... ENGINE = MergeTree()` with a chosen `ORDER BY` (PK columns, else `tuple()`), map types (Int32/Int64/String/Float64/DateTime/UInt8 for bool), `Nullable(...)` for nullable columns; FKs are omitted (ClickHouse has no FK constraints) with an explanatory comment.
-- UI: dialect dropdown in the toolbar → generates SQL into a modal/panel with a Monaco read-only viewer, **Copy** and **Download `.sql`** (`downloadService.download`).
-
-**Tests (`sql-export.lib.test.ts`):** for a fixed 2-table DBML — postgres output contains `CREATE TABLE` + `FOREIGN KEY`/`REFERENCES`; sqlite output uses affinity types + `AUTOINCREMENT` and no schema prefix; clickhouse output contains `ENGINE = MergeTree` + `ORDER BY` and omits `FOREIGN KEY`; unknown dialect throws.
-
-## Component 5: Image export (`src/tools/draw/diagram-image.lib.ts`)
-
-- `exportDiagramImage(el: HTMLElement, opts: { format: 'png'|'jpeg'|'webp'|'svg'; scale?: number; background?: string }): Promise<Blob>`:
-  - Compute full-diagram bounds with react-flow's `getNodesBounds` + `getViewportForBounds` so the export captures the entire graph, not just the visible viewport.
-  - `svg` → `htmlToImage.toSvg` → Blob (`image/svg+xml`).
-  - `png`/`jpeg` → `toPng`/`toJpeg` at `pixelRatio = scale` (JPEG gets an opaque background).
-  - `webp` → `toCanvas` then `canvas.toBlob(resolve, 'image/webp', quality)`.
-- UI: format dropdown + scale (1×/2×/3×) in the toolbar → produces a Blob shown via `ImageResult` (Download/Copy/**Edit in Annotator** — the handoff from Spec A applies here too, letting a user annotate an exported diagram).
-
-**Tests:** thin unit test for the format→MIME mapping and scale→pixelRatio mapping (the html-to-image calls themselves are integration-verified manually, since they need a real DOM/canvas).
-
----
-
-## Registry addition (`src/registry/tools.ts`)
-
-One `ToolDef`: `{ id:'db-diagram', name:'DB Diagram', category:'Draw', route:'/tools/db-diagram', status:'beta', icon: <Database/Table icon>, keywords:['dbml','erd','schema','database','diagram','sql','er'], summary:'Design database schemas in DBML with a live ER diagram, SQL export, and image export.', load: () => import('...DbDiagram') }`.
-
-## File Structure
-
-```
-src/islands/draw/DbDiagram.tsx                 (new — the island)
-src/tools/draw/dbdiagram.store.ts              (new — IndexedDB load/save)
-src/tools/draw/dbml.lib.ts (+ .test.ts)        (new — parse + buildFlow)
-src/tools/draw/layout.lib.ts (+ .test.ts)      (new — dagre auto-layout)
-src/tools/draw/sql-export.lib.ts (+ .test.ts)  (new — dialect SQL export)
-src/tools/draw/diagram-image.lib.ts (+ .test.ts) (new — image export)
-src/registry/tools.ts                           (modify — 1 entry)
-package.json                                    (modify — 4 deps)
-```
-
-## Error Handling
-
-- **Parse errors:** show a non-blocking banner in the editor pane with the message/line; keep the last successfully-rendered diagram on screen (don't blank it) so the user can fix typos without losing context.
-- **Export with invalid DBML:** disable SQL/image export (or surface the parse error) rather than exporting a broken schema.
-- **IndexedDB failures:** catch and no-op (fall back to in-memory only), like the Whiteboard.
-- **Empty schema:** valid state — empty diagram, export produces empty/near-empty output without error.
-
-## Testing Strategy
-
-Unit-test all four pure libs (dbml parse/buildFlow, layout, sql-export per dialect, image format mapping) with Vitest. The interactive island (hover-highlight, drag, zoom, persistence, expand) is verified manually — same as the Whiteboard. All existing tests must stay green.
-
-## Out of Scope (v1, YAGNI)
-
-- DBML syntax highlighting/autocomplete in Monaco (plain-text editing for v1).
-- Importing existing SQL → DBML (only DBML → SQL).
-- Multi-file/multi-schema projects, sharing, or server persistence.
-- Table notes/enums rendering beyond what buildFlow needs for columns and refs (enums parsed but rendered minimally if at all in v1).
diff --git a/docs/superpowers/specs/2026-07-25-image-tools-and-annotator-handoff-design.md b/docs/superpowers/specs/2026-07-25-image-tools-and-annotator-handoff-design.md
deleted file mode 100644
index 9a172cd..0000000
--- a/docs/superpowers/specs/2026-07-25-image-tools-and-annotator-handoff-design.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Image Tools & Annotator Handoff — Design
-
-**Status:** Approved (2026-07-25)
-**Scope:** Spec A of a two-spec initiative. Spec B is the DB Diagram tool.
-
-## Goal
-
-Add three image tools and a cross-tool "send image to the annotator" capability:
-1. **SVG Viewer & Converter** — view an SVG and rasterize it to PNG/JPEG/WebP.
-2. **Image Viewer & Metadata** — a general image viewer (incl. multi-size ICO) with metadata.
-3. **Monochrome** — convert an image to Grayscale, Black & White (threshold), or Dithered B/W.
-4. **Annotator handoff** — an "Edit in Annotator" action on every image-producing tool that opens the Image Annotator with that image pre-loaded.
-
-## Architecture
-
-Everything is client-side, following existing patterns (Astro island per tool, `ToolDef` in `src/registry/tools.ts`, pure logic in `src/tools/image/*.lib.ts`, output via the shared `ImageResult`/`ResultActions` components). No new runtime dependencies. Cross-tool image transfer uses IndexedDB (the `idb` dep, as the Whiteboard already does) because Astro navigation is a full page reload and images exceed the `localStorage` quota.
-
-**Tech stack:** existing — React islands, `canvas` 2D, `idb`, self-hosted Monaco (already used by playground tools), lucide icons.
-
-## Global Constraints
-
-- **Zero external network requests at runtime** — no CDNs; everything bundled/self-hosted.
-- **All processing client-side** — no uploads.
-- Follow existing tool conventions exactly (registry entry shape, island default-export with no required props, `ImageResult`/`ResultActions` for outputs, `usePasteImage` for paste, `Dropzone` for upload).
-- New pure logic lives in `src/tools/image/*.lib.ts` and is unit-tested with Vitest.
-
----
-
-## Component 1: Annotator handoff (the shared enabler)
-
-### `src/services/handoff.ts` (new)
-An IndexedDB-backed one-shot image channel.
-
-- DB `gwt-handoff`, object store `image`, key `pending`. Value: `{ blob: Blob, name: string, ts: number }`.
-- `export async function putPendingImage(blob: Blob, name: string): Promise<void>` — clears then writes the record.
-- `export async function takePendingImage(maxAgeMs = 60000): Promise<{ blob: Blob; name: string } | null>` — reads, deletes, and returns the record; returns `null` if absent or older than `maxAgeMs`.
-- `export async function sendImageToAnnotator(blob: Blob, name = 'image.png'): Promise<void>` — `await putPendingImage(...)` then `window.location.href = '/tools/image-annotate'`.
-
-Interface — Consumes: nothing. Produces: `sendImageToAnnotator`, `takePendingImage`.
-
-### `src/components/ui/EditInAnnotatorButton.tsx` (new)
-- Props: `{ blob: Blob | (() => Blob | Promise<Blob>); filename?: string; className?: string }`.
-- Renders a `<Button variant="secondary">` with a `PenTool`/`Wand2` lucide icon labeled "Edit in Annotator". On click: resolve the blob (supports lazy thunk like `CopyImageButton`), `await sendImageToAnnotator(blob, filename)`.
-- Only renders when `blob.type` starts with `image/` (skip for non-image results). For a thunk it renders unconditionally.
-
-### `src/islands/image/ImageAnnotate.tsx` (modify)
-Add a mount-time effect that loads a pending handoff image as the **base** image:
-```tsx
-useEffect(() => {
-  takePendingImage().then((pending) => {
-    if (pending) onDrop([new File([pending.blob], pending.name, { type: pending.blob.type })]);
-  });
-}, []);
-```
-Placed after `onDrop` is defined. No other behavior changes; if there's no pending image the tool behaves exactly as today.
-
-### Wiring the button across tools
-- **`src/components/ui/ResultActions.tsx` (modify):** add `<EditInAnnotatorButton blob={blob} filename={filename} />` after the Copy button, gated on `blob.type.startsWith('image/')`. This automatically covers every tool using `ImageResult`: Image Converter, Compressor, Resizer, Cropper, Watermark, Merge, Metadata Scrubber, plus the two new viewer/mono tools.
-- **Hand-wired tools (modify each):** add the button next to their existing Download/Copy actions — `Screenshot.tsx`, `BackgroundRemove.tsx`, `FaceBlur.tsx`, `PortraitBlur.tsx`, `ObjectRemove.tsx`, `ImageUpscale.tsx`, `QrGen.tsx` (PNG output only), `PdfToImage.tsx` (per-page), `SignaturePad.tsx` (PNG output).
-- The Image Annotator itself does not get the button (it *is* the annotator).
-
-**Error handling:** if `takePendingImage`/`putPendingImage` throws (private-mode IndexedDB, quota), catch and no-op — the button falls back silently (the user still has Download/Copy). Handoff is best-effort.
-
----
-
-## Component 2: SVG Viewer & Converter
-
-**Island:** `src/islands/image/SvgViewer.tsx` · **Lib:** `src/tools/image/svg.lib.ts` · **Route:** `/tools/svg-viewer` · **Category:** Image
-
-### Input paths
-- Upload/drag an `.svg` (Dropzone, `accept="image/svg+xml,.svg"`).
-- Paste raw SVG markup into a Monaco editor pane (lazy-loaded like the playground) with live render on change.
-- Paste an SVG file from clipboard (`usePasteImage` handles image files; for SVG-as-text, also read `text/plain` clipboard containing `<svg`).
-
-### View
-- Render the SVG in a checkerboard-backed pane (blob URL `<img>` or `dangerouslySetInnerHTML` of sanitized markup — sanitize with the existing `dompurify` dep, `USE_PROFILES: { svg: true, svgFilters: true }`).
-- Zoom controls (buttons + wheel): 25%–800%, plus "fit". Pan by drag when zoomed.
-- Show intrinsic width/height and `viewBox` parsed from the markup.
-
-### Rasterize (`svg.lib.ts`)
-- `parseSvgSize(markup): { width: number; height: number; viewBox?: [number,number,number,number] }` — pure; reads `width`/`height`/`viewBox` attributes (fallback 300×150 per SVG spec).
-- `rasterizeSvg(markup: string, opts: { scale?: number; width?: number; height?: number; type: 'image/png'|'image/jpeg'|'image/webp'; quality?: number; background?: string }): Promise<Blob>` — loads the SVG as an `<img>` (data URL), draws to a canvas at the target size (scale multiplier or explicit W×H; JPEG/opaque fill white or `background`), encodes with `canvas.toBlob`. Reuses `canvas.lib.ts` encoding conventions.
-- UI: export panel — format (PNG/JPEG/WebP), scale (1×/2×/4×) or explicit W×H, quality slider for JPEG/WebP. Output via `ImageResult` (gets Download/Copy/**Edit in Annotator** for free).
-
-**Error handling:** invalid SVG → inline error under the input; malformed markup that fails to load as an image → "Couldn't render this SVG." Sanitization strips scripts/event handlers.
-
-**Tests (`svg.lib.test.ts`):** `parseSvgSize` for width/height, viewBox-only, unitful values, missing (default 300×150); `rasterizeSvg` output dimensions for scale and explicit W×H, and that output MIME matches requested type (using a tiny inline SVG in jsdom with a canvas polyfill — dimension math is the assertion, not pixel content).
-
----
-
-## Component 3: Image Viewer & Metadata
-
-**Island:** `src/islands/image/ImageViewer.tsx` · **Lib:** reuse + `src/tools/image/ico.lib.ts` · **Route:** `/tools/image-viewer` · **Category:** Image
-
-### Behavior
-- Load any image (upload/drag/paste). Zoom/pan viewer (same controls as SVG viewer — extract a shared `<ZoomPane>` component in `src/components/ui/ZoomPane.tsx` used by both viewers).
-- Metadata panel: file name, MIME type, byte size (`formatBytes`), intrinsic dimensions, and — when present — EXIF summary (orientation, camera, GPS-present flag). EXIF parsed with a tiny inline reader in `src/tools/image/exif.lib.ts` (pure, no dep — parse the APP1 header for a handful of common tags; if absent, show "No EXIF metadata").
-- **ICO handling:** when the file is `image/x-icon`/`image/vnd.microsoft.icon` or `.ico`, parse the ICO directory (`ico.lib.ts` → `parseIcoEntries(buffer): { width, height, bpp, offset, size }[]`), list each embedded size, let the user pick one to preview and **export that size as PNG** (decode the selected entry — most ICO entries are PNG or BMP; support PNG entries directly, BMP entries via canvas).
-- Actions: "Convert" (link to `/tools/image-convert`), Download, **Edit in Annotator** (via handoff, passing the current image blob).
-
-**Tests:** `ico.lib.test.ts` — `parseIcoEntries` against a fixture buffer (assert entry count + sizes). `exif.lib.test.ts` — orientation tag parse from a minimal APP1 fixture; empty buffer → `null`.
-
----
-
-## Component 4: Monochrome
-
-**Island:** `src/islands/image/Monochrome.tsx` · **Lib:** `src/tools/image/mono.lib.ts` · **Route:** `/tools/monochrome` · **Category:** Image
-
-### Modes (radio)
-- **Grayscale** — luminance desaturate (`0.299R + 0.587G + 0.114B`).
-- **Black & White** — threshold: pixel → black or white by comparing luminance to a `threshold` slider (0–255, default 128).
-- **Dithered B/W** — Floyd–Steinberg error diffusion to 1-bit, for smoother tone.
-
-### Lib (`mono.lib.ts`, pure, operate on `ImageData`)
-- `toGrayscale(data: ImageData): ImageData`
-- `toBlackWhite(data: ImageData, threshold: number): ImageData`
-- `toDitheredBW(data: ImageData): ImageData` (Floyd–Steinberg)
-- `applyMono(file: File, opts: { mode: 'grayscale'|'bw'|'dither'; threshold?: number }): Promise<Blob>` — decode → canvas → `getImageData` → mode fn → `putImageData` → `canvas.toBlob('image/png')`.
-
-### UI
-- Upload/drag/paste, mode radio, threshold slider (shown only for B&W mode), live preview (debounced), export PNG via `ImageResult` (Download/Copy/**Edit in Annotator**).
-
-**Tests (`mono.lib.test.ts`):** on a 2×2 `ImageData` fixture — `toGrayscale` produces equal R=G=B per pixel; `toBlackWhite` yields only 0/255 with a threshold boundary check; `toDitheredBW` yields only 0/255 and preserves dimensions.
-
----
-
-## Registry additions (`src/registry/tools.ts`)
-
-Three new `ToolDef` entries (Category `Image`, `status: 'stable'`, routes `/tools/svg-viewer`, `/tools/image-viewer`, `/tools/monochrome`), with lucide icons (e.g. `FileImage`, `Eye`, `Contrast`) and keyword lists. No route/page changes needed — `[tool].astro` + `ToolHost` handle everything from the registry.
-
-## File Structure
-
-```
-src/services/handoff.ts                         (new)
-src/components/ui/EditInAnnotatorButton.tsx     (new)
-src/components/ui/ZoomPane.tsx                   (new, shared by viewers)
-src/components/ui/ResultActions.tsx             (modify: add handoff button)
-src/islands/image/ImageAnnotate.tsx             (modify: mount-time handoff load)
-src/islands/image/SvgViewer.tsx                 (new)
-src/islands/image/ImageViewer.tsx               (new)
-src/islands/image/Monochrome.tsx                (new)
-src/tools/image/svg.lib.ts (+ .test.ts)         (new)
-src/tools/image/ico.lib.ts (+ .test.ts)         (new)
-src/tools/image/exif.lib.ts (+ .test.ts)        (new)
-src/tools/image/mono.lib.ts (+ .test.ts)        (new)
-src/registry/tools.ts                            (modify: 3 entries)
-# modify (add handoff button): Screenshot, BackgroundRemove, FaceBlur,
-# PortraitBlur, ObjectRemove, ImageUpscale, QrGen, PdfToImage, SignaturePad
-```
-
-## Testing strategy
-
-Unit-test all pure lib functions (svg sizing/raster dims, ico parse, exif parse, mono transforms, handoff store round-trip against a fake-indexeddb or the jsdom shim). Island UI verified manually. Target: all existing tests stay green + new lib tests pass.
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..aaf213a
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,56 @@
+import js from '@eslint/js';
+import tsplugin from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import astro from 'eslint-plugin-astro';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+// Flat config (ESLint 9). The `lint` script targets `src/`. Recommended rules,
+// with the noisiest TypeScript rules relaxed to warnings so real errors gate CI
+// without burying the (previously un-linted) codebase in failures.
+export default [
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      '.astro/**',
+      'public/**',
+      'src-tauri/**',
+      'coverage/**',
+      '**/*.config.{js,mjs,cjs,ts}',
+      'src/env.d.ts', // Astro-generated (triple-slash reference)
+    ],
+  },
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: { ...globals.browser, ...globals.node, ...globals.worker },
+    },
+    plugins: { '@typescript-eslint': tsplugin, 'react-hooks': reactHooks },
+    rules: {
+      ...tsplugin.configs.recommended.rules,
+      'no-undef': 'off', // TypeScript handles this; avoids DOM/JSX false positives
+      'no-unused-vars': 'off',
+      'no-redeclare': 'off', // TypeScript handles global type merges
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrors: 'none' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/triple-slash-reference': 'off',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      'no-empty': ['warn', { allowEmptyCatch: true }],
+    },
+  },
+  ...astro.configs['flat/recommended'],
+];
diff --git a/package-lock.json b/package-lock.json
index 1154aee..10688f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,6 +76,7 @@
         "cross-env": "^10.1.0",
         "eslint": "^9.39.5",
         "eslint-plugin-astro": "^2.1.1",
+        "eslint-plugin-react-hooks": "^7.1.1",
         "fake-indexeddb": "^6.2.5",
         "jsdom": "^23.2.0",
         "prettier": "^3.9.5",
@@ -10454,6 +10455,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -11867,6 +11888,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/highlight.js": {
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
@@ -20228,6 +20266,19 @@
         "zod": "^3"
       }
     },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.5.7",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
diff --git a/package.json b/package.json
index 58cf4a3..efa1f47 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,7 @@
     "cross-env": "^10.1.0",
     "eslint": "^9.39.5",
     "eslint-plugin-astro": "^2.1.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^23.2.0",
     "prettier": "^3.9.5",
diff --git a/plan.md b/plan.md
deleted file mode 100644
index f4588eb..0000000
--- a/plan.md
+++ /dev/null
@@ -1,341 +0,0 @@
-# GoodWebTools.com — Client-Side Utility Suite
-
-A single site hosting privacy-first office/dev tools. **Every operation runs in the browser.** No file, image, or document is ever uploaded to a server. The only network traffic after page load is the one-time download of WASM binaries and ML models from a pinned CDN (cached forever afterward).
-
-This document is the implementation spec. It's written to be handed to a coding agent and executed phase by phase. Decision points that the human should confirm are marked **[DECISION]**.
-
----
-
-## 1. Goals & Non-Goals
-
-**Goals**
-- One site, many tools, unified shell (nav, search/command palette, consistent UI).
-- Truly client-side: all processing in-browser via WASM / WebCrypto / Canvas / Workers.
-- Lazy everything: initial load stays light; each tool's heavy deps load only when opened.
-- Works offline as a PWA — which is also the strongest proof of the privacy claim.
-- Fast enough for daily office use; large-file safe (streaming, OPFS, workers).
-
-**Non-Goals**
-- No accounts, no backend, no analytics that transmit file contents.
-- No server-side rendering of user data (the app can be statically hosted).
-- Not trying to beat desktop apps on the heaviest workloads (e.g. 4K video) — "good enough in the browser" is the bar.
-
----
-
-## 2. Core Principles
-
-1. **No egress of user data.** Enforced by a strict CSP `connect-src` allowlist (self + the single model/WASM CDN). Users can verify in DevTools → Network. Document this prominently.
-2. **UI thread stays free.** All CPU-heavy work (PDF, image ML, ffmpeg, hashing large files) runs in Web Workers. WASM is instantiated inside the worker, not the main thread.
-3. **Load on demand.** Route-level code splitting + dynamic `import()` for each tool. WASM/model assets fetched on first use of that specific tool.
-4. **Cache aggressively.** WASM binaries and ML models cached in the Cache API / IndexedDB so first-use cost is paid once.
-5. **Degrade gracefully.** Feature-detect File System Access API, OPFS, SharedArrayBuffer; fall back to `<input type=file>` + blob downloads when unavailable.
-
----
-
-## 3. Tech Stack
-
-Resolved: **Astro shell + React islands, static output, hosted on Cloudflare Pages, open-source on GitHub.** (Framework decision made — see rationale note.)
-
-| Concern | Choice | Notes |
-|---|---|---|
-| Meta-framework | **Astro** (`output: 'static'`) | Islands architecture: static HTML by default, hydrate only interactive tools. Per-page code-splitting for free. Uses Vite under the hood, so WASM/worker ergonomics are intact. |
-| Interactive UI | **React 18 islands** (`@astrojs/react`) | Chosen over Vue for concrete ecosystem fit: Excalidraw/tldraw are React-only, Monaco's best wrapper is React, most WASM/ONNX demos are React. |
-| Styling | **Tailwind CSS** (`@astrojs/tailwind`) | Fast, consistent, tree-shaken. |
-| Design language | **Neo-Brutalism** | Thick outlines, hard offset shadows (no blur), sharp corners, bold uppercase **Space Grotesk** (self-hosted, same-origin). Distinctive over generic; sourced via the `ui-ux-pro-max` skill. |
-| Layout | **Fluid width, mobile-first** | Shared `.page-container` (full-width, adaptive gutters, capped at 100rem) so tools use the screen; multi-pane tools collapse to one column on mobile. |
-| Routing | **Astro file-based pages** + View Transitions (`<ClientRouter />`) | Each tool = its own page/route → only that tool's island + deps load. `transition:persist` keeps the shell (command palette, worker pool) alive across navigations. |
-| State | Zustand or React Context (per-island) | Most state is per-tool local; shell state lives in a persisted island. |
-| Workers | **Comlink** | Ergonomic worker RPC, hides postMessage plumbing. Framework-agnostic. |
-| PWA/offline | **`@vite-pwa/astro`** (Workbox) | Precache shell; runtime-cache WASM/models. Offline = the privacy proof. |
-| Icons | lucide-react | Matches the tool-card aesthetic. |
-| Hosting | **Cloudflare Pages** (static) | GitHub-integrated CI/CD auto-deploy. `_headers` file sets COOP/COEP + CSP site-wide. Large model/WASM files optionally on **R2** (same-origin friendly). |
-| Repo | **Public GitHub** | Open source for verifiability; deploy from `main`, link the exact commit in the footer. |
-
-> **Why Astro fits:** a tools site is mostly static surface (home, per-tool landing/SEO pages, privacy/docs) with pockets of heavy interactivity. Astro ships **zero JS** on the static surface and hydrates each tool as an island only when its page loads — which *is* the "lazy-load each tool" goal, handled natively by per-page islands rather than hand-rolled route splitting. App-like tools (editor, PDF editor) are simply a full-page island; you keep Astro's benefits everywhere else.
->
-> **The one Astro-specific design point [DECISION]:** it's MPA by default, so a persistent ⌘K command palette and a long-lived WorkerPool need Astro **View Transitions + `transition:persist`** to survive navigation — otherwise they re-init per page. Alternative is mounting the whole app as a single SPA-style React island inside one Astro layout, but that forfeits Astro's per-page JS savings. Recommended: MPA + persisted shell islands.
->
-> **Vue note:** `@astrojs/vue` is equally mature in the abstract and matches your Nuxt 4 background, but you'd fight the React-only whiteboard/diagram libs. Only revisit if you drop Excalidraw/tldraw.
-
-**Cross-origin isolation:** ffmpeg.wasm (multithreaded) and some ONNX threading need `SharedArrayBuffer`, which requires the page to be cross-origin isolated via `COOP: same-origin` and `COEP: require-corp` (or `credentialless`). On Cloudflare Pages, set these in `_headers`. Any cross-origin CDN assets must then send CORP headers or be fetched `crossorigin` — self-hosting WASM/models on the same origin (or R2 with proper headers) sidesteps this. **Get headers right in Phase 0** — it's the single most common gotcha here.
-
----
-
-## 4. Architecture
-
-Astro renders static pages; interactive tools are React islands. A persisted shell island (nav + ⌘K palette + worker pool) survives navigation via View Transitions.
-
-```
-┌────────────────────────────────────────────────────┐
-│  Astro static pages  (zero JS by default)           │
-│  home · /tools/* landing+SEO · /privacy · /docs     │
-└───────────────┬──────────────────────────────────────┘
-                │ hydrates
-      ┌─────────▼───────────────────────────┐
-      │  Persisted Shell Island (transition:persist)  │
-      │  • nav, command palette (⌘K), tool registry    │
-      │  • Shared services: FileService, WorkerPool,   │
-      │    AssetCache, DownloadService, Toast/Progress │
-      └─────────┬───────────────────────────┘
-                │ per-tool page island (lazy, per-page)
-      ┌─────────▼──────────┐
-      │  Tool Island        │  page: /tools/pdf-merge
-      │  • React view       │
-      │  • useWorker() hook  │
-      └─────────┬──────────┘
-                │ Comlink RPC
-      ┌─────────▼──────────┐
-      │  Web Worker         │
-      │  • instantiate WASM  │
-      │  • do the work       │
-      │  • stream progress   │
-      └────────────────────┘
-```
-
-### 4.1 Tool Registry (the heart of the shell)
-A single typed manifest drives nav, search, the command palette, and per-tool asset hints. Each entry maps to an Astro page route; `load` dynamic-imports the island component for that tool.
-
-```ts
-interface ToolDef {
-  id: string;                 // 'pdf-merge'
-  name: string;               // 'Merge PDF'
-  category: Category;         // 'PDF' | 'Image' | 'Files' | 'Draw' | 'Dev' | 'Media' | 'Playground'
-  route: string;              // '/tools/pdf-merge'  (Astro page)
-  keywords: string[];         // for search/command palette
-  icon: LucideIcon;
-  summary: string;
-  load: () => Promise<{ default: React.ComponentType }>; // island dynamic import
-  needsIsolation?: boolean;   // requires COOP/COEP (ffmpeg multithread)
-  needsExtension?: boolean;   // enhanced-only capability (see §6)
-  assets?: AssetRef[];        // wasm/model URLs + sizes for preflight + cache
-  status: 'stable' | 'beta' | 'experimental';
-}
-```
-
-### 4.2 Shared services
-- **FileService** — normalizes input across drag-drop, `<input>`, File System Access API, and clipboard paste. Provides `File`/`Blob`/streaming handles. Uses **OPFS** for scratch space on large files.
-- **WorkerPool** — spins up/reuses workers per tool family; terminates on route-away to free memory. Concurrency capped by `navigator.hardwareConcurrency`.
-- **AssetCache** — fetches WASM/models once, stores in Cache API (WASM) / IndexedDB (models), returns cached bytes with progress events. Integrity-pin with SRI hashes.
-- **DownloadService** — Blob → download; uses File System Access `showSaveFilePicker` when available for "save as".
-- **Progress/Toast** — unified progress bars fed by worker events.
-
-### 4.3 Directory layout (Astro conventions)
-```
-src/
-  pages/                 # Astro routes → static HTML
-    index.astro          # home / tool grid
-    privacy.astro        # "verify it yourself" page
-    tools/
-      [tool].astro       # or explicit files per tool; mounts the island
-  layouts/
-    Base.astro           # <head>, ClientRouter (view transitions), shell slot
-  components/
-    shell/               # ShellIsland.tsx (persisted): nav + ⌘K palette
-    ui/                  # Dropzone, ProgressBar, FileList, ResultActions (React)
-  islands/               # per-tool React entry components (lazy)
-    pdf/ image/ files/ draw/ dev/ media/
-  tools/                 # framework-agnostic logic
-    pdf/merge/ { lib.ts, worker.ts }   # pure logic + worker per tool
-    ...
-  registry/              # tools.ts manifest + categories
-  services/              # file, workerPool, assetCache, download, crypto
-  workers/               # shared worker entries per family
-public/
-  wasm/                  # self-hosted wasm (same-origin → simpler COEP)
-  models/                # or serve large models from Cloudflare R2
-_headers                 # Cloudflare Pages: COOP/COEP + CSP + SRI-friendly
-astro.config.mjs         # integrations: react, tailwind, pwa
-```
-
-> **Verifiability (open source):** the site is static + fully client-side + offline-capable, so anyone can `git clone`, `npm run build`, and diff the output against what Cloudflare serves — or just run it locally. Strengthen trust with: exact deploy commit linked in the footer, SRI hashes on any remote assets, a strict CSP (below), and reproducible-build notes in the README. Cloudflare Pages build logs are public-adjacent via the GitHub Actions/CI you configure.
-
----
-
-## 5. Tools & Libraries (implementation reference)
-
-Grouped by family. Each family shares a worker + patterns.
-
-### PDF (`pdf-lib`, `pdf.js`, optionally `mupdf`/wasm)
-- Merge, split, reorder, rotate, delete pages — `pdf-lib`.
-- Render/preview pages, thumbnails, PDF→image — `pdf.js`.
-- Images→PDF — `pdf-lib`.
-- Password protect / remove (user + owner) — `pdf-lib` (encryption) or `mupdf` if stronger crypto needed. **[DECISION]** on library for encryption strength.
-- Compress (downsample embedded images) — `pdf.js` extract + re-encode via canvas/`squoosh`.
-- Watermark (text/image, opacity, tiled/diagonal) — `pdf-lib`.
-- Annotate / text boxes / signature / form fill — `pdf-lib` + custom canvas overlay.
-- **Redaction (true removal)** — rasterize page region or rebuild content stream; never just draw a black box. High-value, flag complexity.
-- OCR → searchable PDF — `tesseract.js` (WASM) to get text layer, merge with `pdf-lib`.
-
-### Image (`squoosh` codecs, `onnxruntime-web`, Canvas/WebGL)
-
-> **HD / full-resolution export — applies to every image tool below.** All edits are applied to a **full-resolution offscreen buffer** (`OffscreenCanvas` + `createImageBitmap` in a worker), never to the downscaled on-screen preview — the on-canvas view is scaled for display only, and export always renders from the native-resolution source. Output preserves the original pixel dimensions (no silent capping to viewport size). Export goes through the **high-quality Squoosh encoders** (MozJPEG / OxiPNG / WebP / AVIF) via a shared **Export panel**: pick format, quality (with lossless PNG and 4:4:4 JPEG for text-heavy images), and see an estimated size — not the low-quality default `canvas.toDataURL`. Respect EXIF orientation on load so exports aren't rotated; strip metadata on save. Two honest limits to handle gracefully: (1) browsers cap canvas dimensions/area (~16k px/side, lower on Safari), so for very large images **tile the operation** or warn + offer a max-quality downscale; (2) the 2D canvas pipeline is 8-bit sRGB, so 16-bit/HDR inputs flatten to 8-bit — fine for resolution ("HD"), but note it for pro workflows.
-
-- Compressor — MozJPEG / OxiPNG / WebP / AVIF encoders (wasm). Essentially self-hosted Squoosh.
-- Format convert — same codec set + HEIC decode (`libheif-wasm`).
-- Resize / crop / batch — Canvas / `pica` for quality downscale.
-- **Merge / combine** — stack multiple images into one: **vertical**, **horizontal**, or a **grid** (pick the column count with a Google-Docs-style cell selector; rows wrap automatically). Adjustable gap, background color (or transparent), and an optional "match widths/heights" that normalizes the cross-axis (downscale-only, so no quality loss). Reorderable list; exports PNG. Canvas — `computeMergeLayout` is pure/unit-tested.
-- **Annotate / markup** — screenshot-style tool: rectangle, ellipse, line, arrow, freehand pencil, highlighter, text, and blur regions, with a **Select tool** to move, rename (double-click text), and delete existing shapes. Canvas.
-- Watermark (batch, position grid, opacity) — Canvas.
-- **EXIF / metadata scrubber** — strip GPS/device via re-encode or `piexifjs`. High privacy value; ship early.
-- **Blur & auto-redact** — hide sensitive parts of a photo, single or **batch**, fully in-browser:
-  - **Manual** — mask any area, then choose **Gaussian blur**, **pixelate/mosaic**, or **solid fill**. Mask **shapes**: freehand brush, **rectangle**, **rounded rectangle** (corner-radius slider), **ellipse/circle**, **polygon** (click vertices), and **lasso** (freehand closed path) — implemented as Canvas clip paths (`Path2D`) so the effect applies only inside the shape. Extras: rotate/resize each shape, optional **feathered/soft edge** so blur blends naturally, multiple independent regions per image, adjustable strength, undo/redo. Auto-detected regions (below) can also snap to **ellipse** (flatters faces) or rounded-rect instead of hard rectangles.
-  - **Auto-detect faces** — one-click blur all faces via a browser detector (MediaPipe **BlazeFace** / **SCRFD** / **RetinaFace**) run through `onnxruntime-web` (WASM, WebGPU when available). Reliable; each detection is an editable region you can add/remove before applying.
-  - **Auto-detect license plates** — dedicated plate-detection ONNX model (YOLO-family). Detection-only (no OCR needed to blur). Less bulletproof than faces — accuracy varies with angle/lighting/region — so results are editable and manual touch-up is encouraged.
-  - **Auto-detect text** *(bonus)* — text-detection model (EAST/DBNet/PaddleOCR-det) to scrub names/addresses from documents & screenshots.
-  - **General objects** *(optional)* — YOLO COCO detector for classes like person/car/screen.
-  - **Security-honest defaults** — because light blur and pixelated *text* can be partially reversed (depixelation attacks), the privacy-grade mode is **solid fill** and it's the default for text/plates; the UI warns when a weak mode is chosen for sensitive content. **Always re-encode + strip EXIF on export** so nothing leaks via the file or metadata. Detection runs in a worker; models cached in IndexedDB; images never leave the device. *(Video face-blur is a possible later extension — much heavier: per-frame detection + ffmpeg.)*
-- Background eraser — **U²-Net / MODNet / RMBG** ONNX via `onnxruntime-web` (WASM/WebGPU). *Model 5–150MB, cached.*
-- Object remover — **LaMa** inpainting ONNX. Mask via brush canvas. *Heavy.*
-- Upscaler — **Real-ESRGAN** ONNX. *Heavy; WebGPU strongly preferred.*
-- Extras: color palette extractor, favicon generator, SVG optimizer (`svgo` browser build).
-
-### Files & Archives (`fflate`, `zip.js`, `7z-wasm`, WebCrypto)
-- Zip **with AES-256 password** — `@zip.js/zip.js` (supports AES).
-- Extract 7z / rar / tar / gz — `7z-wasm` (single tool covers many formats).
-- File encrypt/decrypt with password — **WebCrypto AES-GCM** + PBKDF2/Argon2 key derivation. **[DECISION]** Argon2 (via wasm) recommended over PBKDF2 for password strength; define file format header (salt, iv, kdf params, version).
-- Hash generator — SHA-256/512 via WebCrypto; MD5/SHA-1 via small wasm/js (streamed for big files).
-- Large-file split/join — stream slices to OPFS.
-
-### Draw & Diagram (Canvas/WebGL — mostly JS, little/no WASM)
-- Whiteboard / sketch — **embed Excalidraw** (`@excalidraw/excalidraw`) or build a lighter custom canvas. **[DECISION]** embed vs. build.
-- Flowchart / diagram, mind map, wireframe — could layer on Excalidraw or `tldraw`.
-- Signature pad — `signature_pad`, exports transparent PNG/SVG (feeds PDF signing).
-
-### Dev / Office utilities (pure JS — trivially client-side, ship first)
-JSON format/validate/tree, YAML↔JSON↔TOML, CSV↔JSON, CSV viewer, Markdown editor+preview+export, text diff, Base64/URL/JWT decode, regex tester, QR generate **and read** (`jsQR`/`qr-scanner`), barcode, password generator, UUID generator (v4–v7), epoch converter, timezone translator, cron builder/translator, color converter, code formatters/minifiers (`prettier` standalone).
-
-- **Multi-cursor text editor / line wrangler** — a VS Code-grade editing scratchpad for bulk text manipulation, built on **Monaco** (the same editor engine VS Code uses) so the *exact* muscle memory carries over:
-  - **Multi-cursor & column editing** — add cursor above/below (`⌘/Ctrl+Alt+↑/↓`), add cursor at all occurrences (`⌘/Ctrl+Shift+L`), select-next-occurrence (`⌘/Ctrl+D`), and **column/box selection** (`Shift+Alt+drag`) to insert/replace characters at the same position across many lines at once — the core behavior you asked for, native to Monaco.
-  - **Keymap parity** — ships VS Code keybindings by default; optional Vim/Emacs keymaps for people who want them. A discoverable shortcut cheatsheet panel since these are the whole point.
-  - **Batch line operations toolbar** — the transforms people *reach for* multi-cursor to do, but faster and repeatable: prefix/suffix every line, wrap each line (quotes/brackets), add/strip line numbers, sort (asc/desc/natural/by-column), dedupe, remove blank lines, trim whitespace, reverse, join-with-delimiter / split-by-delimiter, case transforms (UPPER/lower/Title/camelCase/snake_case/kebab-case), extract columns by delimiter, and **insert an incrementing number sequence** across cursors (start/step configurable).
-  - **Regex find/replace** — multiline, with capture-group references (`$1`) and per-line or whole-buffer scope; live match highlighting.
-  - **Why it's worth building** (not just "use VS Code"): zero install / instant, safe for pasting sensitive text (never leaves the machine), and the batch toolbar beats manual multi-cursor for structured bulk edits. Pure client-side, no WASM.
-- **UUID generator (v4 → v7)** — generate single or bulk UUIDs across versions, with copy/export. Powered by the `uuid` package (v10+ supports v6/v7). Versions:
-  - **v4** — random. The default general-purpose ID; generate-on-click, no inputs.
-  - **v5** — name-based (SHA-1 namespace hashing). Deterministic: same namespace + name always yields the same UUID. UI needs a namespace UUID (with DNS/URL/OID/X.500 presets) + a name string.
-  - **v6** — v1 reordered to be time-ordered (field-compatible with v1 but sortable). Timestamp-based; useful when migrating from v1 while gaining index locality.
-  - **v7** — Unix-epoch-millisecond timestamp + random tail. **Recommended for new time-ordered IDs** (sortable, index-friendly primary keys) per RFC 9562. Offer options for monotonic counter within the same millisecond.
-  - UX: version tabs, bulk count field, uppercase/hyphenless/braces toggles, and a note that v4/v7 are the two most people actually want (v4 = random, v7 = sortable).
-- **Timezone translator** — convert a time across zones:
-  - **Input** — paste a time that already carries a zone/offset (e.g. `2026-07-11 14:30 +07:00`, `2026-07-11T14:30:00Z`, or `3:00 PM WIB`) and it parses the source zone automatically; or enter a bare time and **pick the source timezone** from a searchable IANA list.
-  - **Output** — see the converted time in **UTC and any number of target zones at once** (add/remove rows, e.g. Asia/Jakarta, UTC, America/New_York, Europe/London), each showing the offset and abbreviation.
-  - **DST-correct** — resolve offsets from the IANA tz database for the actual date, not a fixed offset, so daylight-saving shifts and historical changes are handled right. Flag ambiguous/nonexistent local times (the DST fall-back/spring-forward edge cases).
-  - **Handy extras** — "now" button, epoch (seconds/ms) ↔ datetime, relative delta between two zoned times, copy in ISO 8601 / RFC 3339 / locale formats, and a compact "meeting across zones" view. Powered by `Luxon` or `Temporal` (with polyfill) — never floating-offset math.
-- **Cron pattern translator** — bidirectional cron tool:
-  - **Cron → plain English** — paste an expression, get a readable explanation ("At 02:30 on every weekday") via `cronstrue`. Validates and flags malformed fields inline.
-  - **Schedule → cron** — a builder (minute/hour/day-of-month/month/day-of-week pickers, plus common presets: hourly, daily at time, weekly, monthly, weekdays) that emits the matching pattern.
-  - **Next run preview** — compute and list the next N fire times via `cron-parser`, **timezone-aware** (default to the user's zone; expose a picker — Asia/Jakarta et al.) so schedules are interpreted correctly.
-  - **Flavor toggle** — support standard 5-field (Unix/`node-cron`) and 6-field with seconds (Quartz/some schedulers), plus special strings (`@daily`, `@hourly`, `@reboot`). Note which flavor the output targets, since they aren't interchangeable.
-- **HTML viewer / live playground** — three linked editors (**HTML + CSS + JS**) with an instant live preview, CodePen/JSFiddle-style but fully local. Renders into a **sandboxed `<iframe srcdoc>`** using `sandbox="allow-scripts"` *without* `allow-same-origin`, so user JS runs isolated from the shell and can't read app state, storage, or cookies. Features: debounced auto-run + manual "Run", split or tabbed layout with resizable panes, a **captured console panel** (relay `console.*` and uncaught errors from the iframe via `postMessage`), format-on-demand via `prettier`, and **export as a single self-contained `.html`** file. **[DECISION]** external-resource handling: a toggle + allowlist for `<script src>`/`<link href>` CDN references, **off by default** to preserve the no-egress promise — this is the one dev tool where *user-authored* code could make network calls, so it's opt-in and clearly labeled. Editors via CodeMirror/Monaco.
-- **Structured data diff** — side-by-side compare of **JSON, YAML, TOML, and XML**. Parse each side to a normalized tree first (via `yaml`, `@iarna/toml`, `fast-xml-parser`, native `JSON`), then diff *semantically* — so key reordering, indentation, and quoting differences don't register as changes. Also supports **cross-format** compare (e.g. a YAML config vs its JSON equivalent) by normalizing both to the same tree before diffing. Output modes: (a) two-pane color-coded view with added/removed/changed lines, and (b) a collapsible tree diff highlighting the changed paths. Optional "raw text diff" toggle for when literal formatting *does* matter. Deep-diff via `microdiff`/`deep-object-diff`; rendered with a monaco/CodeMirror diff view.
-
-### Media (`ffmpeg.wasm` — powerful, heavy ~25MB core, needs isolation)
-Video compress/convert/trim/cut, video→GIF, video→audio, audio convert/trim. Screen recorder via native `MediaRecorder` (no wasm). Gate the whole family behind cross-origin isolation + an explicit "this downloads ~25MB" notice.
-
-- **Screenshot (delayed capture + crop)** — click → **native screen/window/tab picker** (`getDisplayMedia`, unavoidable by design) → **5–10s countdown** to arrange/focus the target → grab a frame from the still-live stream onto a canvas → user **drags a crop rectangle** on the captured image → export PNG/JPG, fully client-side. Constraints: DRM/protected content captures as black; the native picker can't be pre-selected or suppressed; Safari uses canvas-draw (no `ImageCapture.grabFrame`); cursor inclusion set via constraint (`always`/`motion`/`never`). **Extension-enhanced mode (optional):** a true **global hotkey** that fires while another window is focused, plus a **region-select overlay over the whole desktop** — capabilities the page sandbox cannot provide (see §6). Falls back to the countdown flow when the extension isn't installed.
-
-### Playground (`monaco-editor`, `@sqlite.org/sqlite-wasm` — on-device dev sandboxes)
-On-device sandboxes so a developer can *explore before going bigger*. Both tools ride on **one shared Monaco engine** (the real VS Code editor), loaded once, lazily, self-hosted (no CDN), and never in the shell payload. Full design: `docs/superpowers/specs/2026-07-13-playground-tools-design.md`.
-
-- **Code Scratchpad** — a VS Code-grade **multi-file** editing scratchpad on **Monaco**, so the exact muscle memory carries over: move/copy line (`⌥↑↓` / `⇧⌥↑↓`), add cursor above/below (`⌘⌥↑↓`), select-next / all-occurrences (`⌘D` / `⌘⇧L`), column/box selection (`⇧⌥`+drag), find & replace (`⌘F` / `⌘⌥F`), format (`⇧⌥F`). Tabs for several named files, language inferred from extension, **open/save real files** via the File System Access API (fallback `<input type=file>` + download), and **autosave** all buffers to **IndexedDB** across reloads. YAGNI: no folder tree, no build/run.
-- **SQLite Playground** — a durable in-browser **SQLite** database via **`@sqlite.org/sqlite-wasm`** in a Comlink worker, persisted with the **OPFS SAHPool VFS** (survives reload, **no COOP/COEP needed** — keeps our no-isolation setup; `sqlite3.wasm` ~1 MB served same-origin as a normal asset). Three panes: a **schema explorer** (tables → columns/PK/NOT NULL, indexes, views, triggers; click a table to browse its rows with no SQL), a **SQL editor** (shared Monaco, `⌘/Ctrl+Enter` runs all statements or the selection), and a **visual results grid** (sortable, virtualized, cell-copy, CSV/JSON export). DDL shows a message + refreshes the schema; DML shows "N rows affected" + can auto-`SELECT` the touched table. **Single active DB** + Import/Export `.sqlite` + Load-sample + Reset (multi-DB switching and query history are deferred). Falls back to an in-memory DB + "export to keep" banner when OPFS is absent.
-- **Shared build risk:** the global `worker.format: 'es'` (needed by mupdf/pdfjs) forces ES-module workers; validate Monaco's workers build/mount on the *production* build first (same class of issue as the ffmpeg core). See §4.1 [DECISION] on sharing the Monaco instance.
-
----
-
-## 6. Optional Companion Extension (progressive enhancement)
-
-A few capabilities are simply impossible inside the page sandbox: a **global hotkey that fires while another app is focused**, **drawing a selection rectangle over the whole desktop**, and richer clipboard/native integration. An **optional browser extension** unlocks these for the specific tools that need them — while the site stays fully usable without it. The extension is a thin *capability shim*, not a second app: all tool UI and logic stay in the web app so there's one codebase of record.
-
-**Non-negotiable — the extension holds the same line as the site:**
-- **Offline & no egress.** Manifest V3 forbids remotely-hosted code, which works in our favor: all logic ships in the bundle, nothing is fetched at runtime, and it runs with the network off. No host permissions that phone home, no analytics. Captured pixels/data are handed to the local page or saved directly — never uploaded.
-- **Least privilege.** Request the narrowest permission per feature and explain each in-product: `commands` (global hotkeys), `desktopCapture`/`activeTab`/`tabs` (capture), `scripting`, `clipboardRead`/`clipboardWrite` as needed. Avoid broad `<all_urls>` host access; prefer `activeTab` + on-demand injection.
-- **Progressive enhancement, never a wall.** Every extension-gated tool degrades to a pure-web flow (e.g. screenshot → countdown capture). The site detects the extension via `externally_connectable` + a ping; if absent it shows an "Install to unlock global hotkey / desktop region-select" affordance and falls back gracefully. Nothing that *can* work in-page is locked behind the extension.
-- **Page ↔ extension bridge.** The site messages the extension via `chrome.runtime.sendMessage` (origin allowlisted through `externally_connectable`); the extension performs the privileged action and returns the result (e.g. a cropped PNG blob) back to the page for the normal client-side pipeline.
-
-**Distribution [DECISION]:** Chrome Web Store / Edge Add-ons / Firefox AMO for reach, plus an optional signed self-host / "load unpacked" build for users who want to audit and sideload. Store review adds latency and its own privacy disclosures — factor into timeline.
-
-**Tools that benefit:** Screenshot (global hotkey + desktop region-select), Screen recorder (region capture, finer control), a global color picker where the in-page `EyeDropper` API is unavailable, and any "capture anything" flows.
-
----
-
-## 7. Cross-Cutting Concerns
-
-**Privacy proof & trust**
-- Strict CSP (set in Cloudflare `_headers`): `connect-src 'self'` plus only the same-origin/R2 model host — nothing else. Document it on the `/privacy` page with a "verify it yourself" walkthrough (DevTools → Network shows zero third-party calls during processing).
-- **Open source = auditable.** Public GitHub repo; footer links the exact deployed commit. Because the build is static and client-side, anyone can clone, build, and diff against production, or run it offline. Add reproducible-build notes to the README.
-- SRI hashes on all remote WASM/model fetches.
-- Offline PWA: once installed, tools work with the network fully off — the clearest possible demonstration that data isn't leaving.
-- Optional "Airplane mode indicator" showing zero pending network requests during processing.
-
-**Performance budget**
-- Initial shell: < 150KB gzipped JS. Each tool chunk lazy. Show asset-size before triggering a big download ("Background eraser needs a 45MB model — download & cache?").
-- WebGPU path with WASM fallback for ONNX tools; feature-detect.
-- **Shared editor engine.** Monaco is used by several tools (multi-cursor editor, structured diff, HTML playground, formatters). Load it **once, lazily**, and share the instance across them — don't bundle it per-tool. It's a few hundred KB+, so it must never touch the initial shell payload; register only the languages actually needed.
-
-**Accessibility & UX**
-- Keyboard-first (⌘K palette, shortcuts), ARIA on all controls, focus management, prefers-reduced-motion, light/dark.
-- Consistent Dropzone, FileList, ProgressBar, ResultActions (download/copy/save-as) components reused everywhere.
-
-**Error handling**
-- Worker crash isolation (one tool failing never takes down the shell). OOM guidance for huge files ("try the streaming/large-file mode"). Clear messaging when isolation/WebGPU unavailable.
-
-**Testing**
-- Unit tests for pure transforms (formatters, converters, crypto format round-trips).
-- Playwright E2E per tool: load sample file → run → assert output, plus a network assertion that **no request goes to a non-allowlisted origin**.
-- Golden-file tests for PDF/image outputs where feasible.
-
-**Licensing note**
-- Verify licenses/model weights before bundling (e.g. RMBG variants, Real-ESRGAN, ffmpeg builds). Track in `LICENSES.md`. **[DECISION]** confirm each ML model's commercial-use terms.
-
----
-
-## 8. Phased Roadmap
-
-**Phase 0 — Foundation** *(no user-facing tools yet)*
-Astro project (`output: 'static'`) with `@astrojs/react` + Tailwind + `@vite-pwa/astro`; View Transitions + persisted shell island (nav + ⌘K palette); tool registry; shared services (FileService, WorkerPool, AssetCache, DownloadService, Progress); Cloudflare Pages deploy from GitHub with `_headers` serving COOP/COEP + CSP; PWA scaffold; one throwaway "hello worker + wasm" island to prove the full pipeline (island → Comlink → worker → WASM → cross-origin-isolated).
-
-**Phase 1 — Dev/Office utilities (pure JS)**
-Highest value-to-effort, zero WASM risk, validates the shell UX: JSON tools, diff, Base64/URL/JWT, hash, password/UUID gen, QR gen+read, Markdown, CSV↔JSON, converters. Ship to build momentum.
-
-**Phase 2 — PDF suite**
-Merge, split, reorder, rotate, delete, images→PDF, PDF→image, watermark, password protect/remove, compress. (Redaction + OCR deferred to a PDF-advanced sub-phase.)
-
-**Phase 3 — Image basics**
-Compressor, format convert, resize, crop, **merge/combine**, **annotate/markup**, watermark, **EXIF scrubber**. Every result offers **Download** and **Copy to clipboard** (image/png). All Canvas/squoosh — no ML yet.
-
-**Phase 4 — Files & crypto**
-Zip-with-password, 7z/rar/tar extract, AES file encrypt/decrypt (finalize file format), hashing large files, split/join.
-
-**Phase 5 — ML image tools**
-Background eraser, object remover, upscaler, and **blur & auto-redact** (face/plate/text detection). onnxruntime-web + WebGPU. Model cache UX, size warnings, license checks. Ship the face-blur path first (most reliable + highest demand); plate/text detection follow.
-
-**Phase 6 — Drawing**
-Excalidraw embed (or custom), signature pad (wire into PDF signing), diagram/mind-map.
-
-**Phase 7 — Media**
-ffmpeg.wasm family behind isolation + size gate. Screenshot (delayed capture + crop), screen recorder. Ship last of the core tools (heaviest, most edge cases).
-
-**Phase 8 — Companion extension (optional, parallelizable)**
-Thin MV3 capability-shim: global-hotkey screenshot + desktop region-select overlay, returning results to the web app via the `externally_connectable` bridge. Web fallbacks must already exist before this ships. Can be built in parallel once the screenshot web flow (Phase 7) is stable. Store submissions + self-host build.
-
-**Phase 9 — Playground (on-device dev sandboxes)**
-New `Playground` category on one shared, lazily-loaded, self-hosted **Monaco** engine. Built in three independently-shippable steps: **(a)** Playground category + shared Monaco foundation (validate the `worker.format:'es'` build risk first) → **(b)** Code Scratchpad (multi-file, disk I/O, IndexedDB autosave) → **(c)** SQLite Playground (`@sqlite.org/sqlite-wasm` + OPFS SAHPool, schema explorer, SQL editor, visual results grid, import/export, sample DB). Full spec: `docs/superpowers/specs/2026-07-13-playground-tools-design.md`.
-
-**Suggested MVP launch** = Phases 0–3 (utilities + PDF + image basics). That already covers the most common "I don't want to upload this to a random site" office moments.
-
----
-
-## 9. Open Decisions (confirm before/at each phase)
-- [x] ~~Framework~~ → **Astro + React islands, static output** (resolved). Vue only if dropping Excalidraw/tldraw.
-- [ ] Shell persistence: Astro View Transitions + `transition:persist` (recommended) vs single full-page SPA island.
-- [x] ~~PDF engine~~ → **mupdf-wasm** (resolved). pdf-lib's parser rejects many valid real-world PDFs (compressed object/xref streams); mupdf-wasm parses them robustly and also handles decryption/repair. Runs in a Comlink **worker** (~10MB wasm, cached after first load, progress/"loading" indicator). pdf-lib retained only for build-from-scratch tasks (images→PDF) and for drawing (watermark) after mupdf normalizes the input. **Licensing:** mupdf is **AGPL** — compatible only while GoodWebTools stays open source; a closed-source commercial build would need an Artifex commercial license.
-- [ ] Crypto KDF: Argon2 (recommended) vs PBKDF2; finalize encrypted-file header format.
-- [ ] Excalidraw embed vs custom canvas for whiteboard (keep React → Excalidraw stays easy).
-- [ ] ML model weights + licenses: background removal, upscaler, **and detection models** (face: BlazeFace/SCRFD/RetinaFace; plate: YOLO-plate; text: DBNet/PaddleOCR-det) — verify commercial-use terms per model.
-- [x] ~~Hosting~~ → **Cloudflare Pages (static)**, `_headers` for COOP/COEP + CSP (resolved).
-- [ ] Serve large models/WASM same-origin (`public/`) vs Cloudflare **R2** — both keep COEP simple; R2 better for big files/bandwidth.
-- [ ] Ship the optional companion extension? Which stores + whether to offer a self-host/unpacked build.
-- [ ] Extension permission set per feature (`commands`/`desktopCapture`/`clipboard`) and the `externally_connectable` origin allowlist.
-- [ ] Ship the optional companion extension? Which stores + whether to offer a self-host/unpacked build.
-- [ ] Extension permission set per feature (`commands`/`desktopCapture`/`clipboard`) and the `externally_connectable` origin allowlist.
diff --git a/src/pages/download.astro b/src/pages/download.astro
index dfdde7f..43255a7 100644
--- a/src/pages/download.astro
+++ b/src/pages/download.astro
@@ -1,5 +1,5 @@
 ---
-import { Download, Monitor, Apple, ChevronRight } from 'lucide-react';
+import { Download, Monitor, ChevronRight } from 'lucide-react';
 import Base from '@/layouts/Base.astro';
 
 const GITHUB_REPO = 'slaveofcode/goodwebtools';
diff --git a/wrangler.jsonc b/wrangler.jsonc
index c5493ea..e35073d 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -1,3 +1,6 @@
+// NOTE: The worker names, R2 bucket names, and domain below are specific to the
+// upstream GoodWebTools deployment. To self-host, rename them to your own (and
+// create your own R2 buckets — see DEPLOYMENT.md "Deploy your own instance").
 {
   // Deploys the static Astro build (dist/) plus a small Worker that streams ML
   // model files from R2 at /models/*. Build first (`npm run build`), then