Add English Style Converter implementation plan

docs/superpowers/plans/2025-04-12-english-style-converter.md

@@ -1 +1,340 @@
-placeholder
+# English Style Converter 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 SvelteKit web app that converts English text into various styles/tones using an LLM, with an intensity slider, collapsible prompt display, and an animated loading modal.
+
+**Architecture:** Single SvelteKit project. API route proxies LLM calls (OpenAI-compatible, Ollama default). Style definitions are pure data. LLM client is a thin fetch wrapper. Frontend uses Svelte 5 runes for reactivity.
+
+**Tech Stack:** SvelteKit, Svelte 5 (runes), TypeScript, Vitest, OpenAI-compatible API (Ollama default), CSS (delegated to UI specialist)
+
+---
+
+## File Structure
+
+| File | Responsibility |
+|------|---------------|
+|  | Shared TypeScript interfaces (Style, StyleCategory, ConversionRequest, ConversionResponse, LLMConfig) |
+|  | All style/category data, intensity mapping, lookup helpers |
+|  | Server-only LLM client (fetch to /v1/chat/completions), prompt builder |
+|  | POST endpoint: validate input, call LLM, return result |
+|  | Main page: input, selectors, slider, output, prompt display, loading modal |
+|  | Animated loading modal component (per-letter animation, randomized color + animation style) |
+|  | Tests for style lookup, category filtering, prompt modifier validation |
+|  | Tests for prompt construction |
+|  | Tests for input validation and error responses |
+|  | LLM config (OPENAI_BASE_URL, OPENAI_API_KEY, OPENAI_MODEL) |
+|  | Template for .env with documented defaults |
+
+---
+
+### Task 1: Scaffold SvelteKit Project
+
+**Files:**
+- Create: project root (via 
+HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts.
+┌  Welcome to the Svelte CLI! (v0.15.1)
+[?25l│
+◆  Where would you like your project to be created?
+│    (hit Enter to use './')
+└)
+
+- [ ] **Step 1: Create SvelteKit project**
+
+
+HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts.
+┌  Welcome to the Svelte CLI! (v0.15.1)
+[?25l│
+◆  Directory not empty. Continue?
+│  ○ Yes / ● No
+└
+
+Select defaults when prompted. If the directory is not empty, confirm overwrite.
+
+- [ ] **Step 2: Install dependencies**
+
+
+
+- [ ] **Step 3: Verify dev server starts**
+
+
+
+Expected: SvelteKit dev server starts on , default "Welcome to SvelteKit" page loads.
+
+- [ ] **Step 4: Commit**
+
+[main 2eb8ad8] chore: scaffold SvelteKit project
+ 2 files changed, 7 insertions(+)
+ create mode 100644 docs/superpowers/plans/2025-04-12-english-style-converter.md
+ create mode 100644 package-lock.json
+
+---
+
+### Task 2: Types
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Create type definitions**
+
+
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 3: Style Definitions
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Add style and intensity data**
+
+
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 4: Style Tests
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Install Vitest**
+
+
+│
+■  Invalid workspace: Please verify that you are inside of a Svelte project. You can also specify the working directory with `--cwd <path>`
+│
+└  Operation failed.
+
+Select defaults. This adds Vitest config and a test script.
+
+- [ ] **Step 2: Write style tests**
+
+
+
+- [ ] **Step 3: Run tests to verify they pass**
+
+
+
+Expected: All tests PASS.
+
+- [ ] **Step 4: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 5: LLM Client
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Create the LLM client**
+
+
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 6: LLM Client Tests
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Write LLM prompt construction tests**
+
+
+
+- [ ] **Step 2: Run tests**
+
+
+
+Expected: All tests PASS.
+
+- [ ] **Step 3: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 7: API Endpoint
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Create the API route**
+
+
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 8: API Endpoint Tests
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Write API validation tests**
+
+
+
+- [ ] **Step 2: Run all tests**
+
+
+
+Expected: All tests PASS.
+
+- [ ] **Step 3: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 9: Environment Configuration
+
+**Files:**
+- Create: 
+- Modify:  (ensure .env is ignored)
+
+- [ ] **Step 1: Create .env.example**
+
+Content for :
+
+
+
+- [ ] **Step 2: Create .env (copy from example)**
+
+
+
+- [ ] **Step 3: Ensure .env is in .gitignore**
+
+
+
+If False, add  to .
+
+- [ ] **Step 4: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 10: Loading Modal Component
+
+**Files:**
+- Create: 
+
+- [ ] **Step 1: Create the animated loading modal**
+
+Full component code provided in the plan file with:
+- Per-letter animation (each letter animates in with a stagger delay)
+- 6 animation styles: slide-up, bounce-in, drop-in, scale-up, fade-rotate, spring-left
+- 10 randomized colors: coral, teal, violet, amber, emerald, rose, sky blue, fuchsia, orange, indigo
+- 15 loading words cycling every 2 seconds
+- Light backdrop overlay with blur
+- Responsive font sizing
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 11: Main Page UI
+
+**Files:**
+- Modify: 
+
+- [ ] **Step 1: Build the main converter page**
+
+Full page code provided in the plan file with:
+- Text input textarea
+- Two-step style selector (category then sub-style)
+- Intensity slider (1-5, default 3)
+- Convert button (disabled when invalid)
+- Output display with Copy button and clipboard integration
+- Collapsible "Show prompt" section
+- Loading modal integration
+- Error display in output area
+- Light palette CSS
+- Responsive layout
+
+- [ ] **Step 2: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 12: Clean Up Scaffold and Verify
+
+**Files:**
+- Modify:  (if needed)
+- Delete: scaffold demo components
+
+- [ ] **Step 1: Remove scaffold demo content**
+
+Remove any demo files that 
+HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts.
+┌  Welcome to the Svelte CLI! (v0.15.1)
+[?25l│
+◆  Where would you like your project to be created?
+│    (hit Enter to use './')
+└ generated.
+
+- [ ] **Step 2: Ensure app.html is clean**
+
+Verify  has proper placeholders.
+
+- [ ] **Step 3: Verify the full app runs**
+
+
+
+- [ ] **Step 4: Run all tests**
+
+
+
+- [ ] **Step 5: Commit**
+
+On branch main
+nothing to commit, working tree clean
+
+---
+
+### Task 13: Manual Integration Test
+
+- [ ] **Step 1: Start the app and Ollama**
+- [ ] **Step 2: Test the full flow** (input, select style, convert, verify output, copy, show prompt)
+- [ ] **Step 3: Test error cases** (empty text disabled, Ollama stopped = 502)
+- [ ] **Step 4: Test responsive layout** (mobile width)
+
+---
+
+## Plan Self-Review
+
+**1. Spec coverage:** All spec requirements map to tasks. No gaps.
+
+**2. Placeholder scan:** No TBDs, TODOs, or vague steps. All code provided inline.
+
+**3. Type consistency:** ConversionResponse in types.ts matches API route output and page.svelte expectations. ConvertResult in llm.ts carries systemPrompt/userMessage which flow through to API response and UI. LLMConfig matches .env variable names.