The user wants a professional AI coding website in a single HTML file with "200-300 different functions and features" that actually work, mobile friendly, supporting multiple AI providers. Let me plan this carefully. This is a huge build. I need to create a genuinely professional AI coding assistant web app — like a mini "AI IDE" in a single HTML file. The key requirements: 1. **Multiple AI providers API** — OpenAI, Anthropic, Google Gemini, Groq, OpenRouter, Mistral, DeepSeek, Cohere, Together AI, xAI (Grok), Ollama (local), etc. With BYOK (bring your own key) stored in localStorage, and a real fetch call to their APIs. I need to be careful: no hardcoded API keys — the user enters their own. Calls go directly from browser to provider endpoints (these are CORS-enabled for most providers: OpenAI allows browser calls with dangerous CORS? Actually OpenAI API does support CORS from browser. Anthropic requires `anthropic-dangerous-direct-browser-access: true` header. Groq supports CORS. Google Gemini supports CORS. OpenRouter supports CORS. Mistral supports CORS. Ollama local supports CORS if configured.) 2. **200-300 actually working functions/features** — This is the hard part. I need to enumerate a massive feature set that genuinely works locally (no fake stubs). Let me think about what an "AI Coding website" needs: **Core areas:** - **Chat panel** with streaming, markdown rendering, code block highlighting, copy buttons, message actions - **Code tools / utilities** — this is where I can get hundreds of real features: a "Code Toolbox" with dozens of text/code manipulation tools (formatters, encoders/decoders, converters, generators, hashers, analyzers) - **Scratch editor** with syntax highlighting (I can use CodeMirror from CDN, or write my own lightweight highlighter — CDN allowed, so CodeMirror 5 is easy) - **Snippet library** with localStorage persistence, tags, search, import/export - **Prompt library** — hundreds of built-in prompt templates across categories - **Code generation templates** — generate boilerplate for React, Vue, Express, Python, etc. - **Regex tester** - **JSON tools** (format, minify, validate, sort, query with JSONPath-like, diff) - **Diff tool** - **Color tools** - **Base64, URL encode, JWT decoder** - **Hash generators** (MD5 via spark-mdw? I can implement SHA-256 with Web Crypto, MD5 needs implementation — I could include a small MD5 implementation) - **UUID generators** - **Lorem ipsum, fake data generators** - **Cron parser/explainer** - **Timestamp converters** - **Unit converters** - **Case converters** (camel, snake, kebab, pascal, etc.) - **Text stats** (word count, char count, reading time) - **Slug generators** - **ASCII art / banner** - **HTMLEntity encode/decode** - **Number base converters** - **QR code generator** (via API? No paid APIs... QR can be done with a small implementation — that's heavy. There's a free QR library on CDN: qrcodejs or qrcode from davidshimjs. CDN allowed. I'll use `qrcodejs`.) - **Barcode?** — maybe skip - **Character/encoding tools** - **SQL formatters** — I can write a simple SQL formatter - **Minifiers** — simple ones for CSS/HTML/JSON - **CSS tools** — px-rem converters, gradient generators, shadow generators, flexbox helper, animation preview - **HTML preview / sandbox** — live iframe preview of HTML/CSS/JS - **Terminal-like command palette** — a "command palette" (Ctrl+K) with fuzzy search over ALL features — this is a great signature feature: every one of the 250+ tools is accessible through a searchable palette. That also justifies "hundreds of functions" — each tool is a command. - **Snippet stats / achievements**? maybe skip - **Multi-provider settings**, model selection, temperature, max tokens, system prompts - **Conversation management** — multiple chats, rename, delete, export (JSON/Markdown), search - **Streaming responses**, stop generation, regenerate - **Token estimation** - **Dark/light themes** - **Keyboard shortcuts** panel - **PWA-ish?** maybe skip service worker (can't easily in single file... actually can via blob but skip) - **Speech input?** — Web Speech API works in Chrome, could add dictation (works locally, free). Yes! Speech-to-text for chat input. - **TTS?** — speechSynthesis is free/local. Add "read aloud" for responses. - **Copy/export/share features** - **Code highlighter language support** - **Snippet dedup / validation** - **Statistics dashboard** — usage counters stored locally (messages sent, tokens est., tools used, streaks) - **Activity log / history of tool usage** - **Notes/scratchpad** - **Todo list for coding tasks** — persistent - **Bookmark favorite tools** - **Recent tools** - **Custom tool pinning to home** - **Rate limiter / API cost estimator** - **Connection tester per provider** ("test key" button) - **Model fetcher** — fetch model lists from providers that support /models endpoint (OpenAI, Groq, OpenRouter, Mistral, Together, DeepSeek) — real working feature - **Markdown export** - **Image? skip** - **Text diff, merge?** diff is enough - **Escape/unescape strings for code** - **String utilities** (reverse, trim lines, remove duplicates, sort lines, shuffle, number lines, pad) - **List tools** (extract emails/URLs/numbers from text) - **Password generator with strength meter** - **Bcrypt? no — skip, too heavy** - **Cron explainer** — write a decent simplified one - **Semver checker/comparison** - **HTTP status code lookup** — a real database of 70+ codes - **Gitmoji / commit message generator** — random conventional commits - **Emoji picker?** — maybe not needed - **Morse code translator** — real - **Caesar/ROT13 cipher** — real - **Binary/text converter** — real - **Roman numerals** — real - **Minecraft? no** - **MIME type lookup table** - **Port lookup table** — common ports - **Regex cheat sheet** — content reference - **Keyboard shortcuts cheat sheet** - **ASCII table** - **HTML tag reference?** maybe - **Command cheatsheets: git, docker, npm, linux** — content-rich references (real content) - **Time zone converter** — using Intl API, real - **Stopwatch/timer for coding sessions** — Pomodoro timer! Real feature. - **Habits? skip** - **Random pickers** — dice, coin flip, random color... maybe a "decision helpers" - **Text to slug, slug to text** - **CSV ↔ JSON converter** — real - **TSV ↔ JSON** - **XML ↔ JSON?** — could do simple XML→JSON with DOMParser, JSON→XML simple. Yes. - **YAML?** — hard to write a YAML parser... skip or do a very naive one. Skip YAML, mention? No stubs — everything listed must work. So don't list YAML. - **Query string parser/builder** — real - **Cookie viewer** (document.cookie of the app? meh) skip - **User agent parser** — shows navigator info — "Browser/Device Info" tool, real - **Screen resolution info** - **Local storage inspector** — view app's stored data, real - **File reader** — drag & drop a file to get contents, hash it, size, type — real - **Image → base64 data URI** — real with FileReader - **Word frequency counter** — real - **Palindrome checker** — real - **Anagram checker** — real - **Text diff** — real (LCS diff) - **Markov chain text generator?** maybe fun, real - **Typing speed test** for devs? — maybe, fun and real - **Changelog generator** from git-style commits? — simple template - **README generator** — template-based, real - **.gitignore generator** — real templates by stack - **License generator** — MIT/GPL/Apache with year+name, real - **Dockerfile generator** — templates - **GitHub Actions YAML generator** — template - **Package.json generator** — form → JSON, real - **Regex builder from examples?** hard — skip - **CSS gradient editor with live preview** — real - **Box-shadow editor** — real - **Border-radius editor (squircle-ish)** — real - **Flexbox playground** — real - **Grid playground** — real - **CSS animation (keyframes) generator with preview** — real - **Color picker with harmonies, shades** — real - **Contrast checker (WCAG)** — real - **Pixel→REM calculator** — real - **CSS minifier / beautifier** — simple real - **HTML minifier / beautifier (indent)** — simple real - **JS basics: JSON→TS interfaces** — real converter! Great one - **SQL→? skip** - **Mock data generator** (names, emails, addresses) — real with arrays - **Faker-lite** - **Changelog, semantic versioning helper** - **Slug, id generation: nanoid-like, ULID-like (timestamp-based sortable id)** — real - **Luhn credit card validator** — real - **Credit card type detector** — real - **IBAN? maybe skip** - **Email validator** — regex - **URL validator** - **IP validator (v4/v6 basic)** - **Phone? basic** - **Password strength analyzer** - **Entropy calculator** — real - **Text cleaner: remove smart quotes, invisible chars, zero-width** — real & useful - **Unicode inspector** — show code points of text — real - **Emoji→unicode name? skip** - **Case converter** full set - **Accent/diacritics remover** — normalize NFD strip — real - **Sort lines, unique lines, diff lines** - **Column extractor** (split by delimiter, pick column)** — real - **CSV to markdown table** — real - **Markdown table generator** — real - **Markdown → HTML preview** — real (I need an MD renderer anyway for chat; I'll write my own small markdown renderer — safer than CDN? I could use marked from CDN. I'll use my own compact renderer for chat to keep control, plus code highlighting via Prism? Hmm, I'll write a custom tokenizer-based highlighter for JS/HTML/CSS/JSON/Python/SQL — that's a lot but doable in compact form. Actually, using highlight.js from CDN is allowed and easier + robust. But offline? CDN allowed so fine. Let me use marked + highlight.js? marked adds dependency risk... I'll write my own markdown renderer — I've done it before, ~150 lines, and a small custom highlighter for common languages. Actually for reliability, I'll write my own — full control, no CDN failure risk. Hmm, but "hundreds of features" credibility benefits from solid rendering. My own markdown renderer can handle: headings, bold, italic, code blocks w/ language label + copy, inline code, links, lists, blockquotes, hr, tables. That's enough. Actually, let me reconsider CDN use: QRCode.js for QR generator (davidshimjs qrcodejs on cdnjs). That's one. Everything else I can hand-roll. Custom syntax highlighting for ~10 languages is feasible with a regex-based tokenizer. **Feature counting strategy:** I'll build a **command registry** where every tool is registered with id, name, category, keywords, and an action (open tool view, or instant transform). Then I can literally display "280 tools" and every one works. The tool system: - **Instant tools** (transform clipboard/selected text): case converters, encoders, etc. — these show in a "Quick Transform" modal: input textarea → output, with copy/swap/use-as-input. - **Panel tools** (custom UI): regex tester, diff, color tools, live preview, playgrounds, references. - **Reference/cheatsheet tools**: content pages. - **Generator tools**: form-based generators (README, license, gitignore, package.json...). A generic "transform tool" framework: define `{id, name, cat, desc, fn: (text, opts) => string}` — then 100+ transform tools each count as a working feature and are trivially correct. Plus panel tools, plus chat features, plus app features (themes, export, etc.). I can genuinely hit 250+ distinct working operations. Let me now count what I can realistically build: **Transform tools (text/string) — each a working function:** 1. UPPERCASE 2. lowercase 3. Title Case 4. Sentence case 5. camelCase 6. PascalCase 7. snake_case 8. CONSTANT_CASE 9. kebab-case 10. dot.case 11. Header-Case 12. invert case (swapCase) 13. alternating case? maybe skip; keep — fun 14. Reverse text 15. Reverse words 16. Reverse lines 17. Sort lines A-Z 18. Sort lines Z-A 19. Sort lines by length 20. Shuffle lines 21. Unique lines (dedupe) 22. Remove empty lines 23. Trim each line 24. Number lines 25. Remove line numbers 26. Strip comments? language-agnostic hard — do JS/C-style comment stripper — real 27. Add line prefix/suffix — generic "wrap lines" 28. Join lines with delimiter 29. Split lines to comma list (JSON array builder!) 30. Text → JSON string array 31. JSON array → lines 32. Extract URLs 33. Extract emails 34. Extract numbers 35. Extract dates? regex-based, ok 36. Extract IPv4 37. Extract hex colors 38. Extract markdown links 39. Extract HTML tags? simple 40. Extract acronyms? (all-caps words) ok 41. Extract hashtags 42. Extract mentions (@) 43. Word frequency count 44. Char frequency count 45. Remove duplicates words 46. Remove accent/diacritics 47. Remove smart quotes → straight 48. Remove zero-width/invisible chars 49. Normalize whitespace 50. Strip HTML tags 51. Escape HTML 52. Unescape HTML 53. Encode URL 54. Decode URL 55. Encode URL component 56. Decode URL component 57. Base64 encode text 58. Base64 decode 59. Base64 → UTF-8 safe (unicode base64 encode/decode with encodeURIComponent trick) 60. Base32? skip 61. Hex encode text 62. Hex decode 63. Binary encode text 64. Binary decode 65. Decimal→text (char codes) 66. Octal? skip 67. ROT13 68. Caesar cipher (shift param) 69. Atbash cipher 70. Morse encode 71. Morse decode 72. Reverse words only? covered 73. Vigenère cipher (key param) — real, doable 74. XOR cipher with key (hex output) — real 75. Slugify 76. Deslugify (dashes → spaces + capitalize) 77. Snake→camel etc covered 78. Limit/truncate text (param) 79. Word wrap (width param) 80. Pad lines (left, param) 81. Center text 82. Replicate/repeat text N times 83. Lorem ipsum words (param) 84. Lorem paragraphs 85. Zombipsum? skip 86. Pangram check → this is analyzer not transform... I'll have analyzer tools that output report text — still "transform text→report". Good pattern! Analyzers return report strings. 87. Word count / text stats report 88. Reading time estimate 89. Line/char/paragraph counts — combined in stats 90. Palindrome checker (report) 91. Anagram checker (two words param — could be option) 92. Letter frequency — covered 93. Grammar-ish? no 94. Text similarity (Levenshtein % — need 2 inputs... I'll support "two-pane compare" tools in the transform framework? The diff tool covers comparison. For anagram/similarity, I can make them panel or accept "a || b" format. Hmm — simpler: I'll define a few "dual-input" tools in the Diff-like panel? Let me make the transform modal support an optional second input for dual tools. Yes — tool def can have `dual: true`. Then: anagram check, text similarity, string compare, XOR with key, Vigenère key, CSV delimiter, etc. **Code-focused transforms:** 95. JSON beautify 96. JSON minify 97. JSON validate (report) 98. JSON sort keys (recursive) 99. JSON → TS interfaces 100. JSON → CSV 101. CSV → JSON 102. TSV → JSON / JSON → TSV (2) 103. CSV → Markdown table 104. Query string → JSON 105. JSON → query string 106. JSON → URL params encode? covered by query string 107. JSON → PHP array? real (simple printer) — nice 108. JSON → YAML (naive emitter is actually feasible! Writing YAML output from JSON is doable; parsing YAML is hard. So "JSON → YAML" works, no YAML→JSON. OK.) 109. JSON → XML 110. XML → JSON (DOMParser) 111. JSON escape (stringify a string) 112. JSON unescape 113. JSON path pick (simple dot-path extract) 114. JSON flatten / unflatten 115. JSON key renamer? maybe skip 116. Markdown → HTML 117. HTML → Markdown? naive — risky; skip or do very simple (replace b/i/a/code/pre/p/br) — do a "basic" one, label as basic 118. SQL formatter/beautifier (simple keyword-based) 119. SQL minify? covered-ish; add 120. SQL IN clause builder (lines → 'a','b','c') 121. SQL →? enough 122. CSS beautify (simple) 123. CSS minify (simple) 124. CSS inline sort? skip 125. HTML beautify (indenter) 126. HTML minify (naive) 127. JS/C comment stripper 128. JS string escape (for embedding) 129. JS template literal escape 130. String → char codes — covered in decimal encode 131. CSS class extractor from HTML 132. Extract IDs from HTML? skip 133. Meta tag extractor? maybe 134. Script/style extractor? skip 135. Number → words (English) — real 136. Words → number — real (small parser) 137. Roman numeral ↔ number (2 tools) 138. Base converter (2-36, param) 139. Bytes formatting (human size) 140. Scientific notation? skip 141. Timestamp → date (ms and s auto) 142. Date → timestamp 143. ISO duration parser? skip 144. Relative time ("3 days ago" generator) 145. Duration formatter (ms → human) 146. UUID v4 (bulk) 147. UUID validate (report) 148. ULID generator (sortable) — real implementation 149. Nano ID (param alphabet) 150. Random string (charset param) 151. Random int (min/max) 152. Random hex color 153. Random password (options) 154. Dice roll (n d sides) 155. Coin flip 156. Random pick from lines 157. Random UUID — covered 158. GUID braces format? skip **Hash/encode (Web Crypto):** 159. SHA-1 160. SHA-256 161. SHA-384 162. SHA-512 163. HMAC? needs importKey — doable! HMAC-SHA256 with key (dual) — real 164. CRC32 — real implement 165. MD5 — I'd need to implement (~40 lines compact) — include! classic 166. Hash all (report of all hashes) 167. JWT decoder (header.payload.signature → pretty JSON) — real 168. JWT verify? needs secret & alg — skip verify, decode only. Fine. 169. Base64URL encode/decode (2) 170. CRC32 covered **Analyzers (report style):** 171. Regex tester — panel tool (with matches list, highlighted) 172. Diff checker — panel (LCS line diff) 173. JSON diff — panel 174. Password strength/entropy analyzer — panel or report 175. Luhn check 176. Card type detect — combine into one "card checker" 177. Email validate (report) 178. URL parse (report: protocol, host, params table) 179. IP info (private/public, class) — report 180. Semver parse/compare — panel-ish → report 181. Color analyzer (hex → rgb, hsl, luminance, contrast vs black/white) — panel 182. Cron describer — panel with next runs! Computing next runs is doable for standard cron. I'll write a decent explainer + next 3 occurrences (with fields parsing). Real. 183. HTTP status lookup — searchable reference 184. MIME lookup — reference w/ search 185. Port lookup — reference 186. ASCII table — reference 187. Unicode inspector — panel (text → codepoint table) 188. Browser/device info — panel 189. localStorage inspector — panel 190. File info + hashing — panel w/ drag-drop 191. Image → data URI — panel **Generators (form → output):** 192. README.md generator 193. LICENSE generator (MIT, Apache-2.0, GPL-3.0 short-ish, BSD-2, ISC, MPL-2.0 — license texts: MIT short, ISC short, BSD short, Apache long... Apache full text is long; I'll include MIT, ISC, BSD-2, BSD-3, Apache-2.0 (full), GPL-3.0 is very long — maybe include GPL-3.0 header notice + link? No links-only... I'll include full MIT/ISC/BSD/Apache, and Unlicense. Skip GPL full text (too long) — offer GPL-3.0 "notice" version? That risks being fake. I'll include: MIT, Apache-2.0, ISC, BSD-2-Clause, BSD-3-Clause, Unlicense, MPL-2.0 (short form). MPL-2.0 full is long too... keep MIT, ISC, BSD-2, BSD-3, Apache-2.0, Unlicense. Good. 194. .gitignore generator (Node, Python, macOS, Windows, Linux, VS, JetBrains, React, Vue, Svelte, Go, Rust, Java, C++ — checkboxes combine!) — real 195. package.json generator (form) 196. Dockerfile generator (Node/Python/Go/Static) 197. docker-compose generator? — template — ok add 198. GitHub Actions workflow generator (Node CI, Python CI, Pages deploy) 199. Conventional commit message generator (random real types+scopes+subjects) 200. Changelog template generator 201. Boilerplate code generator: HTML skeleton, React component (function/hook), Vue SFC, Svelte, Express server, FastAPI, Flask, Python script, Bash script, C main, Java class, Go module, Rust main, TS config, Next.js page? templates — each a picker: "Component generator" with framework select. This can be ONE tool with many templates (16 templates in one tool) or several tools. I'll do one "Boilerplate Library" panel with 20+ templates, each copyable — counts as rich feature. 202. SQL sample schema generator? skip 203. Regex generator from string list? — "strings → regex" — I can build escaped alternation or clever common-prefix regex — doable basic: produce `(a|b|c)` regex. Real, add as transform tool. 204. Mock data generator (names, emails, users JSON — param count) — real 205. User agent... no 206. Meta tags generator (SEO: title/desc/og/twitter) — real 207. Favicon emoji HTML snippet? cute — include in snippet lib instead 208. robots.txt generator — real 209. sitemap.xml generator (URLs list → XML) — real 210. htaccess basics? skip 211. Makefile template — in boilerplate lib 212. .env template generator (key list → KEY=) — real transform 213. npm scripts helper? — skip 214. EJS? no **Playgrounds (live):** 215. HTML/CSS/JS live preview (mini CodePen) — with run, console capture — big signature feature 216. Regex tester (already) 217. Flexbox playground 218. CSS Grid playground 219. Gradient generator (linear/radial, stops, angle → CSS + preview) 220. Box-shadow generator 221. Text-shadow generator 222. Border-radius generator (4 corners) 223. Keyframe animation generator w/ live preview 224. Transform generator (rotate/scale/skew/translate) w/ preview 225. Color picker & palette generator (harmonies: complementary, analogous, triadic, tetradic, shades, tints) 226. Contrast checker (WCAG AA/AAA) 227. Cube/px↔rem↔em↔pt converter (base param) 228. Unit converter (length, weight, temp, data, speed — multi-category) — real 229. Timestamp tools covered 230. Stopwatch — real 231. Pomodoro timer — real (25/5, cycles, notify) 232. Typing speed test — real (WPM, accuracy) 233. Snake game? Too much scope creep... skip games. Hmm "AI coding website" doesn't need games. Skip. 234. Color blindness simulator? matrices — doable but skip for scope 235. Device frames? no **AI features (chat):** - Provider manager: 12+ providers - Key vault (localStorage, masked, test, remove) - Model list fetching for supporting providers - Model manual add - Params: temperature, max tokens, top_p, system prompt, streaming toggle - Multiple conversations: create, rename, switch, delete, duplicate, export md/json, search messages - Streaming SSE parsing - Stop generation - Regenerate last - Edit user message? maybe skip; "resend with edits" — keep simple: delete from point & regenerate — include "retry" - Copy message, copy code blocks - Read aloud (TTS) - Dictation (STT) - Token estimate per message & conversation - Cost estimate (rough per-model pricing table) - Prompt library: 100+ curated dev prompts across categories (this alone is 100 "features"? They're content — each prompt is a working insertable prompt). I can write ~60-80 quality prompts; combined with everything else we're fine. - "Fix my code" / "Explain" / "Review" / "Docs" / "Test-gen" / "Refactor" / "Translate code" quick actions — these prepend prompts & need code input — implement as quick actions that open chat with template. Real. - Slash commands in chat (/prompt names, /clear, /export, /temp 0.7...) — real command system! - Send code from editor/snippet to chat - Attach file → include content in message - Markdown rendering w/ highlighted code - Message token counts, timestamps - Export conversation as Markdown - Conversation stats - Auto-title chat from first message (local heuristic or after first AI reply) - Fallback provider chain? — advanced: "if provider fails, try next" — implement simple retry with same provider; chain maybe. I'll add auto-retry once. **Editor:** - Scratch editor with line numbers, syntax highlight (custom for js/html/css/json/py/sql), tabs (multiple files in localStorage), run JS in sandbox (capture console), format JSON, stats, send to chat, save as snippet, download file - Actually a multi-file scratch workspace is great: files list, add/rename/delete, autosave **Snippets:** - CRUD, tags, search, language label, copy, insert to editor, send to AI, export/import JSON, bundled starter snippets (30+ built-in real snippets) **App-level:** - Command palette (Ctrl+K) — fuzzy search ALL tools, prompts, snippets, settings, chats - Themes: dark, light, plus accent color choices? Themes: Dark/Light/Midnight/Solarized-ish — 4 themes real - Font size setting, compact mode, reduce motion - Favorites (star tools), recents tracking - Tool counters + stats dashboard ("you've run 42 tools, 12 messages") - Usage history log (last 200 actions) - Keyboard shortcuts (Ctrl+K palette, Ctrl+/ shortcuts, Ctrl+Enter send, Ctrl+B sidebar, Ctrl+S download editor file, Ctrl+D duplicate line in editor?) - Toast notifications - Modals (custom, no alert/confirm — I'll build confirm modal) - Mobile: bottom tab nav (Chat / Tools / Editor / More), responsive panels - Offline notice - Data: export all data (JSON), import, wipe - Session timer - Motivational? no - Focus/zen mode for chat - Split view on desktop OK — this is easily 250+ working items. The honest framing: a **registry** of tools displayed as "X tools available", where each is genuinely functional. Plus chat features. I'll aim for ~230 registry tools + prompts(80) + snippets(30) + app features — and I can legitimately claim 280+ features. I'll compute the tool count dynamically and display it ("Tools: 234"). **Providers** (real endpoints, browser-direct): 1. OpenAI — `https://api.openai.com/v1/chat/completions` (+ `/v1/models`) 2. Anthropic — `https://api.anthropic.com/v1/messages`, header `anthropic-version: 2023-06-01`, `anthropic-dangerous-direct-browser-access: true` 3. Google Gemini — `https://generativelanguage.googleapis.com/v1beta/models/{model}:streamGenerateContent?alt=sse&key=KEY` — SSE with alt=sse works from browser 4. Groq — `https://api.groq.com/openai/v1/chat/completions` (OpenAI-compatible; CORS OK) 5. OpenRouter — `https://openrouter.ai/api/v1/chat/completions` 6. Mistral — `https://api.mistral.ai/v1/chat/completions` 7. DeepSeek — `https://api.deepseek.com/chat/completions` 8. Together AI — `https://api.together.xyz/v1/chat/completions` 9. xAI (Grok) — `https://api.x.ai/v1/chat/completions` 10. Cohere — `https://api.cohere.com/v2/chat` (v2 has OpenAI-ish shape? Cohere v2 chat format: {messages, model} returns different shape... I'll implement Cohere with its own adapter. Cohere v2 streaming format differs. Maybe skip Cohere to reduce adapter complexity... Keep 9-10 providers. I'll include Perplexity? `https://api.perplexity.ai/chat/completions` — OpenAI-compatible. But Perplexity may not allow browser CORS. Hmm. I'll include: OpenAI, Anthropic, Gemini, Groq, OpenRouter, Mistral, DeepSeek, Together, xAI, Ollama (local, `http://localhost:11434/v1/chat/completions` OpenAI-compatible + /api/tags), and a "Custom OpenAI-compatible" provider (user gives baseURL) — that's 11. Good coverage without weird adapters. Default models list per provider (with manual add + fetch for OpenAI-compatible /models endpoints and Gemini's models list, Ollama tags). **Streaming adapters:** For OpenAI-compatible: SSE `data: {...choices[0].delta.content}`. Gemini SSE: `data: {"candidates":[{"content":{"parts":[{"text":...}]}}]}`. Anthropic SSE: events `content_block_delta` with `delta.text`. Ollama OpenAI-compat works with same SSE. Non-streaming fallback: parse full JSON. Token estimation: chars/4 heuristic (state it's an estimate). Cost estimate: rough price map per known model (per 1M in/out) — I'll include for popular models, else "unknown". **Design direction:** This must NOT look like a generic dashboard. Aesthetics: I want an authored, memorable identity. Let me pick a strong direction: - **"Terminal-luxe" / editorial tool aesthetic**: dark ink background (#0D1117-ish? too GitHub). Let me craft: deep charcoal-green-black `#0B0F0C`? Or a warm paper-dark. I want a distinctive accent that's NOT blue/purple. Choose **acid lime/chartreuse** (#C6F24E-ish) or **amber**? For an AI coding tool, a phosphor terminal green feels apt but cliché; I'll do a refined **warm amber/gold (#E8B33D / #FFB454)** on near-black with **paper-cream light mode**. Or… a "workshop" vibe: off-black #101014, ink text #E6E1D6 (warm off-white), accent #FFB224 amber. Light theme: cream #F4F1EA with ink #1A1917, same amber accent. Typography: display font with character — **"Space Grotesk"** for headings/UI + **"IBM Plex Mono"** / "JetBrains Mono" for code/data. That combo is distinctive and coding-appropriate. Google Fonts CDN. - **Layout**: Desktop: left rail (icon nav), main area swaps views: Chat / Toolbox / Editor / Vault(Snippets) / Settings. Not a dashboard-y grid — the **Toolbox** is the risky one (a giant grid of 230 tools would look like the cheap grid thing). Solution: Toolbox is organized as **category browser with a list layout** — dense, monospace index like a "manual"/ledger: numbered entries, hover reveals description, click opens tool sheet. Think of it like a reference manual / index page in a book — that's an authored composition, not card soup. Plus the command palette is the primary path. - **Signature moment**: The **command palette (⌘K)** — "The Console" — full-screen overlay, big type, fuzzy search across everything, keyboard-first, with a live counter and category pills. Plus the **boot animation**: a brief terminal-style boot sequence on first load (fast, skippable) — memorable but quick (~1.2s). Also chat messages render with a nice reveal; code blocks with header bar + copy + language tag. - **Mobile**: bottom tab bar (Chat, Tools, Code, More), sheets slide up as full-screen panels, palette accessible via floating button + pull-down? Floating action button "⌘K" chip. **Scope control:** This will be a massive file (~4000+ lines). I need to be efficient. Let me architect: ``` - CSS: ~700 lines (custom properties, themes, components: buttons, inputs, modals, toasts, tabs, chat bubbles, code blocks, tool rows, palette) - JS structure: - Utils: $, $$, el(), esc(), fmt, debounce, clipboard, download, toast, modal/confirm - Store: localStorage wrapper, state - THEME system - ROUTER: view switching - TOOL REGISTRY: array of defs {id,n(cat name),cat,d(desc),k(keywords),run or ui} - Transform engine: modal with input/output (mono textareas), options support, dual input support, swap/copy/download output - Panel tools: render functions per tool (regex tester, diff, color, etc.) — biggest chunk - Reference tools: data tables (http codes, mime, ports, ascii, cheatsheets) with search - CHEATSHEET data: git/docker/npm/linux commands, regex, keyboard - PROMPTS: ~70 prompts data - SNIPPETS: ~30 built-ins + CRUD - EDITOR: multi-file scratch with highlight overlay technique - CHAT: provider adapters, streaming, conversations, slash commands, quick actions, markdown renderer, highlighter - PALETTE: fuzzy search registry - STATS/HISTORY/FAVORITES/RECENTS - BOOT sequence - INIT ``` Syntax highlighting: overlay technique for editor (textarea transparent over pre) and for chat code blocks (pre with spans). I'll write one tokenizer: for js/ts/json/css/html/sql/python/generic — regex-based per language: keywords, strings, comments, numbers, functions. Keep it compact (~120 lines). Markdown renderer: headings, hr, blockquote, ul/ol, tables, code fences (capture for highlight+copy), inline code, bold, italic, links, strikethrough. ~120 lines. Diff: LCS on lines (DP, cap sizes). Let me think about the tool modal framework carefully since ~150 tools ride on it: ```js function toolModal(def) { // def: {n, d, fn(text, opts, aux) -> string | {report}| promise, opts: [{id,label,type:'text'|'number'|'select'|'check',def, choices}], dual:{label}, ph: placeholder} } ``` - Input textarea (mono), optional second input, options row (inline inputs) - Run button + auto-run on input (debounced) for pure transforms — live preview! That feels great. - Output textarea (readonly) + copy / download / send-to-chat / use-as-input / open in editor - For async (hashes, TTS no) — hash tools async: support promise return, show "…" - Favorites star, recents record, run counter increment. Report tools: fn returns markdown-ish/plain text → show in output (mono pre area). Fine, same modal. Panel tools registry: `ui: renderFn(container, def)` — for regex tester, diff, color studio, playgrounds, live preview, references with search, generator forms, cron, unit converter, timer, typing test, file tools, device info, storage inspector, JSON tools needing two panes? Actually JSON transform all fit modal. I need to carefully write the tool defs compactly. Using helper: ```js T('slugify','slugify text','Text', slugify, {k:'url dash kebab'}) ``` Let me define `T(name, cat, fn, opts)` with description auto or provided. To keep code manageable, group arrays per category with a small helper. Categories: Text, Code, JSON & Data, Convert, Encode/Hash, Generate, Web/CSS, Analyze, Reference, Time, Fun/Misc. Now, counting: I'll aim for ~200 registry tools + ~25 panel tools + references. Plus prompts (75), snippets (28), chat/provider/editor/app features (40+). Total 300+. I'll display live counts computed from registry length, and a "feature index" view maybe. The stats view can enumerate. Honestly the biggest risk is response length. This will be very long — maybe 3500-4500 lines. Let me be disciplined: compact helper functions, terse but readable code, data-driven definitions. I'll write CSS efficiently with utility-ish classes + component classes. Let me draft key data now. **Providers config:** ```js const PROVIDERS = { openai:{n:'OpenAI',base:'https://api.openai.com/v1',kind:'openai',models:['gpt-4o','gpt-4o-mini','gpt-4.1','gpt-4.1-mini','o3-mini','gpt-4-turbo']}, anthropic:{n:'Anthropic Claude',base:'https://api.anthropic.com/v1',kind:'anthropic',models:['claude-sonnet-4-20250514','claude-3-7-sonnet-latest','claude-3-5-haiku-latest']}, gemini:{n:'Google Gemini',base:'https://generativelanguage.googleapis.com/v1beta',kind:'gemini',models:['gemini-2.5-flash','gemini-2.5-pro','gemini-2.0-flash']}, groq:{...models:['llama-3.3-70b-versatile','llama-3.1-8b-instant','qwen-2.5-coder-32b','deepseek-r1-distill-llama-70b','mixtral-8x7b-32768']}, openrouter:{models:['openrouter/auto','anthropic/claude-3.5-sonnet','openai/gpt-4o-mini','meta-llama/llama-3.3-70b-instruct','deepseek/deepseek-chat']}, mistral:{models:['mistral-large-latest','codestral-latest','mistral-small-latest']}, deepseek:{models:['deepseek-chat','deepseek-reasoner']}, together:{models:['meta-llama/Llama-3.3-70B-Instruct-Turbo','Qwen/Qwen2.5-Coder-32B-Instruct','deepseek-ai/DeepSeek-R1']}, xai:{models:['grok-3','grok-3-mini','grok-2-1212']}, perplexity? skip ollama:{n:'Ollama (local)',base:'http://localhost:11434/v1',kind:'openai',models:['llama3.2','qwen2.5-coder','deepseek-coder-v2']}, custom:{n:'Custom (OpenAI-compatible)',base:'' user-set} } ``` Adapters: - openai kind: POST {base}/chat/completions {model,messages,temperature,max_tokens,top_p,stream:true} headers Authorization Bearer. SSE lines `data: `, done at `data: [DONE]`, delta at choices[0].delta.content (also reasoning_content for deepseek-reasoner? include fallback delta.reasoning_content — show too? I'll append reasoning in italic? Simpler: concat any content-ish fields. I'll check delta.content and delta.reasoning_content (prefix label). Keep just content + also handle xai which is content.) - gemini: POST {base}/models/{model}:streamGenerateContent?alt=sse&key=KEY body {contents:[{role:'user'|'model',parts:[{text}]}], systemInstruction:{parts:[{text}]}, generationConfig:{temperature,maxOutputTokens,topP}} SSE data JSON: candidates[0].content.parts[].text. Non-stream: :generateContent. - anthropic: POST {base}/messages headers x-api-key, anthropic-version, dangerous-browser body {model, system, messages:[{role, content}], max_tokens, temperature, stream} SSE events: lines `event: X` and `data: {...}`; use content_block_delta → delta.text; message_delta for usage; stop at message_stop. Fetch models: openai kind: GET {base}/models with auth → data[].id sorted. Gemini: GET {base}/models?key= → models[].name strip "models/". Ollama: GET http://localhost:11434/api/tags. OpenRouter: GET /api/v1/models. Anthropic: GET /v1/models with headers (they have /v1/models now). Implement for all where possible with try/catch. **Pricing table** (rough $/1M tokens in/out) for cost estimator — I'll add for common models with fallback unknown. Keep small map. **Prompts** — write ~72 solid prompts across cats: Debugging, Refactoring, Code Review, Testing, Documentation, Architecture, Performance, Security, Databases, APIs, Frontend, Backend, DevOps, Learning, Career, Regex, Git, Career/interview, Creative/brainstorm. Each: {t: title, c: category, p: prompt text}. Users can insert into chat, copy, favorite, and submit own to library (persisted). Slash command `/p `? The palette handles insertion; plus chat quick actions. **Snippets** — ~26 real useful snippets: debounce, throttle, deep clone, fetch wrapper w/ retry, localStorage helper, array shuffle, formatBytes, sleep, URL params, event delegation, sticky nav css, responsive grid css, flex center, CSS reset, git aliases, docker compose, python dataclass JSON, fastapi hello, express hello, react hook fetch, vue store tiny, regex email, js date format, csv parse, quicksort, lru cache, observer pattern, pubsub, cancelable fetch, IntersectionObserver lazy img, modal focus trap... each {t, l(lang), tags, c}. Good real content. **Cheatsheets**: git (~30 commands), docker (~18), npm (~16), linux (~22), regex (~20 tokens), vs code? maybe, html entities? — reference panel with sections and copy buttons + search. **HTTP codes**: 5xx/4xx/3xx/2xx full classic set ~60 entries. **MIME**: ~70 entries by extension search both ways. **Ports**: ~30. **ASCII table**: 0-127 grid generated programmatically! (loop 128 rows) — real & compact. **Boilerplates**: html5 boilerplate, react fn component, react hook, vue3 sfc, svelte, express, fastapi, flask app, python cli, bash strict, powershell?, c main, c++ main, java class, go http server, rust hello/cargo hint, tsconfig, next.js api route, tailwind starter, vite config, webpack minimal? keep 20. OK. Editor: files with overlay highlighting: - textarea absolutely positioned over

, sync scroll; on input re-render highlight + line numbers gutter.
- tab support (insert two spaces), auto-indent on Enter after `{`? nice: keep simple — preserve indent.
- run JS: `new Function` with captured console via overridden log within try; show console output panel. Also can run HTML preview by "Open in preview".
- toolbar: new file, rename, delete, download, format (json only + generic re-indent?), send to chat (as code block context), save as snippet, line/col/char counts, language select per file (affects highlight).

View: "Code" tab.

**Chat view:** conversation sidebar (desktop) as list; on mobile, a chats sheet. Composer: textarea autosize, send, stop, attach file, mic, quick-action menu (Fix, Explain, Review, Tests, Docs, Optimize, Translate, Security) — inserts prompt template like "Fix the bugs in this code and explain each fix:\n```\n{code}\n```" — if editor has content, prefill from editor selection/current file. Slash commands: `/clear`? dangerous — confirm. Implement: `/export`, `/md`, `/prompt ` opens palette filtered to prompts, `/temp x`, `/model name`, `/tokens`, `/help`, `/title rename`, `/new`. Show hint bar with available commands when typing "/".

Message rendering: role chip, time, token est, actions (copy, read aloud, regenerate for last assistant, delete, branch? no). Streaming indicator. Markdown with highlighted code + per-block copy + "insert into editor" button (nice!), "explain this block" (sends follow-up) — lovely real features.

Conversation persistence: localStorage `ai.chats` [{id,title, msgs:[{role,content,ts}], model, provider, ts}]. Settings per chat default from global.

**Settings view:** providers (key inputs w/ show/hide, test, fetch models, model select+custom, base URL for custom/ollama), generation params (temp slider, max tokens, top_p, streaming toggle, system prompt textarea w/ presets), appearance (theme select, accent? maybe 4 accents, font size, reduce motion, compact), data (export/import/wipe, history log, stats), about.

**Stats dashboard:** counts: tools available (computed), tools run, messages sent, est. tokens, chats, snippets saved, favorites, top tools, session time, streak days (dates set). Rendered nicely.

**History log:** recent 300 {ts, what, icon} searchable.

Now the **palette**: entries from: tools (200), prompts (72), snippets, chats (open), commands (new chat, toggle theme, export…), settings sections, references. Fuzzy match (subsequence scoring). Group headers. Keyboard nav, Enter to run, recent-first when empty. Also category filter chips. This IS the app's soul.

**Boot screen**: quick 8-line terminal boot log typed fast (~1s total) then fades. Skippable by click/keypress; disabled after first visit? Keep each load but fast. Also nice "identity": logo — custom mark: a square bracket + cursor: `[▮]` — "BRACKET//LAB"? Name the product: **"FORGE"**? "MONOLITH"? Let me choose: **"OCTO"**? no. **"TERMINAL FORGE"**? I'll go with **"FORGE·KIT"**? Hmm. Simple strong: **"BLACKSMITH"**? I like **"FORGE"** — "FORGE — AI coding workbench". Or "ATELIER"? For coding + terminal-luxe: **"FORTH"**? taken-ish. **"CRUCIBLE"**? Let me pick **"FORGE"** with tagline "The AI workbench for people who ship." Version "v1.0 · single-file". Logo: text wordmark in Space Grotesk with amber block cursor blinking. 

Accent: amber #FFAD33-ish; let me define palette:
Dark: bg #0E0D0B (warm black), surface #151310, raised #1C1915, border #2A251E, text #ECE6DA, muted #9A917E, accent #F5A524 (amber), accent-ink #1A1408, green #7FBF5A? success, red #E5533F, ok.
Light: bg #F5F1E8 (cream), surface #FFFFFF? slightly #FBF8F1, text #201C15, border #DCD4C2, accent #B06E00? amber needs darkening for contrast in light: #A96A00? Use #C77E00? I'll compute: accent same hue, two shades per theme.

Midnight theme (blue-black? avoid blue... make "Carbon" = neutral gray-black) and "Paper". 4 themes: Forge Dark (default warm black), Paper (cream), Carbon (neutral #111314 gray), and "Solar" (dark warm brownish w/ cream text #F2E8CF bg #1C1917 + orange)? Keep: Dark, Light, Carbon, Sepia. Fine.

Fonts: Space Grotesk (600/500) for headings & UI labels, "Spline Sans"? for body maybe use Space Grotesk for everything + JetBrains Mono for code/data/labels. Body: "Space Grotesk" 400? It's fine for body at 15px. IDs okay.

No gradients as decoration — flat surfaces, 1px borders, strong type hierarchy, amber accents used sparingly (active states, cursor, key highlights). Texture? subtle scanline/dot? Keep subtle noise via CSS? Skip noise (can look cheap). Use precise borders + generous spacing + numbered ledger rows (index numbers in mono) — that's the identity.

Signature composition — **Toolbox ledger**: 
- Left: category list (vertical, mono uppercase with counts)
- Right: rows: `001 · UPPERCASE — Convert text to shout case` hover: row highlights + arrow; number in dim mono; name in medium; desc in muted. Click → tool sheet slides from right (desktop) / bottom sheet (mobile). Row favorites star on hover.
Header of toolbox: big wordmark "TOOLBOX" with live count "233 instruments".

Chat empty state: big typographic intro: giant "SHIP / FASTER." lines? Something authored: "What are we building today?" with quick action chips and provider status line. Avoid emoji; use lucide icons via CDN? Lucide CDN: `https://unpkg.com/lucide@latest` then `lucide.createIcons()` — I'll use inline SVGs instead to avoid CDN dependency for icons — but that's many SVG strings. Lucide via CDN is allowed and easy: ``. I'll use lucide UMD from unpkg. But if offline, icons vanish... acceptable (fonts too). I'll use lucide + fallback text? Keep lucide, it's fine. Actually to be safe I'll inline a small icon set (about 40 icons I need) as SVG sprite — more robust and authored. Hmm, 40 icons × path data is heavy but each ~1 line. I'll create `ICONS = {name: ''}` and `icon(name)` helper generating `…

  …nav…
  
    …
    …
    …
    …
    …
    …
  
  …

…
  (modal root)

```

Views rendered by JS render functions; static shell minimal.

CSS plan (custom props):

```css
:root[data-theme=dark]{--bg:#0e0d0b;--sf:#161311;--sf2:#1d1a16;--bd:#2b261f;--tx:#ece5d8;--mut:#a49a86;--fnt:#f2a83b;--fnt2:#ffd9a0;--ok:#8fce6b;--err:#f26d5f;--ink:#1a1105;…}
```
Accent naming: --acc (amber), --acc-ink for text-on-accent.

Light: bg #f4efe4, sf #fffdf7, bd #ded5c2, tx #241f17, mut #7a7160, acc #b06a00? amber on cream needs weight: #9a5b00 for text-accent usage; button bg accent #f2a83b with ink text works on both. I'll define --acc (fill) same both: #f5a623; --acc-t (accent as text, darker in light: #8f5300).

Carbon: neutral grays with slightly cooler but not blue... #121314 with #e8e6e1 text, acc amber still. Sepia: bg #f0e4d0? Warm retro paper w/ #2b2318. Keep four: dark/light/carbon/sepia.

Fonts: `--f-ui:'Space Grotesk',sans-serif; --f-mono:'JetBrains Mono',monospace`.

Typography scale: h1 clamp sizes; wordmark: "FORGE" letterspaced + cursor block.

OK, also **accessibility**: focus-visible outlines amber, aria-labels on icon buttons, prefers-reduced-motion honored (setting + media query), contrast ok.

Let me also make sure **no emoji** anywhere and no `alert/confirm/prompt`. Use my `confirmUI()`.

Now let me carefully enumerate the final tool registry list (I'll write them in code). I'll organize per category with helpers. Let me write out the categories and full lists (this is the backbone):

**CAT: Text (tx)** ~55
1 uppercase, 2 lowercase, 3 title case, 4 sentence case, 5 swapcase, 6 camel, 7 pascal, 8 snake, 9 kebab, 10 constant, 11 dot, 12 header (Title-Case w/ hyphen), 13 alternating case, 14 reverse text, 15 reverse words, 16 reverse lines, 17 sort az, 18 sort za, 19 sort length, 20 shuffle lines, 21 unique lines, 22 remove empty lines, 23 trim lines, 24 number lines (opt start), 25 unnumber lines, 26 wrap lines (prefix/suffix opts), 27 join lines (delimiter opt), 28 lines→comma list, 29 text→JSON array, 30 JSON array→lines, 31 extract URLs, 32 extract emails, 33 extract numbers, 34 extract IPv4, 35 extract hex colors, 36 extract markdown links, 37 extract hashtags, 38 extract mentions, 39 extract dates, 40 extract HTML tags, 41 strip HTML tags, 42 escape HTML, 43 unescape HTML, 44 remove diacritics, 45 straighten quotes (smart→straight), 46 remove invisible chars, 47 normalize whitespace, 48 word wrap (width), 49 truncate (len + ellipsis), 50 repeat text (n), 51 center pad (width), 52 right-pad lines (width), 53 word frequency (report), 54 char frequency (report), 55 ngram counter (n opt)? maybe skip... include bigram? skip. 55 remove duplicate words, 56 lorem words (n), 57 lorem paragraphs (n), 58 slugify, 59 unslug, 60 strip C comments? (code cat)

**CAT: Code (cd)** 
- JSON beautify (indent opt), JSON minify, JSON validate+stats, JSON sort keys, JSON→TS, JSON→CSV, JSON→TSV, JSON→YAML, JSON→XML, JSON→PHP, JSON escape, JSON unescape, JSON flatten, JSON unflatten, JSON pick path (dual path), CSV→JSON (delim opt, header opt), TSV→JSON, CSV→Markdown, CSV→SQL IN, Query→JSON, JSON→query, Markdown→HTML, HTML→Markdown(basic), CSS beautify, CSS minify, HTML beautify, HTML minify, SQL beautify(basic), SQL minify? (collapse whitespace) yes, JS→strip comments, string escape for code (backticks/quotes opt), CSS classes extract, .env template builder (keys→KEY=), strings→regex alternation, count LOC (report: lines, code, comments, blank), comment banner maker (text → /* === */ banner, style opt), TODO/FIXME extractor, console.log remover (JS), semicolon? no. tab→spaces / spaces→tab converters. — ~40

**CAT: Convert (cv)**
- base converter (num + from/to opts... dual: "number" input + opts from base, to base), hex↔text, binary↔text (2 tools or one auto? make two each direction), decimal↔text, number→words, words→number, roman→int, int→roman, timestamp→ISO (s/ms auto + opt tz local/utc), ISO/date→timestamp, relative time ago (input ts), duration format (ms→human), bytes format (number→KB/MB), number→ordinal, percent↔fraction? skip, unit converter panel, px/rem panel (in css), morse encode/decode (2), NATO encode/decode (2), ROT13, caesar (shift opt), atbash, vigenère (dual key), xor cipher (dual key), letter→position? skip. ~26

**CAT: Hash/Crypto (hs)** (async webcrypto)
- SHA-1/256/384/512 (4), hash all report, MD5, CRC32, HMAC-SHA256 (dual key), base64 encode/decode (utf8-safe), base64url encode/decode, JWT decode, UUID v4 (bulk opt), UUID v7-ish? (time-ordered — implement uuid v7! timestamp + rand — yes cool), ULID, nanoid (size opt), random string (len+charset), password gen (opts len, symbols) — password better as panel w/ strength; keep quick version + panel analyzer. ~20

**CAT: Generate (gn)**
- README generator (panel form), LICENSE generator (panel), .gitignore (panel multi-select), package.json (panel), Dockerfile (panel), docker-compose (panel), GH Actions (panel), robots.txt (transform: input lines of disallow → output; or simple defaults + param sitemap) — do transform w/ opts, sitemap.xml (urls→xml), meta tags SEO (dual inputs title/desc/url? use opts fields), conventional commit (random generator button), changelog skeleton (transform from list of commits? template + input), mock users JSON (n opt), mock names (n), mock emails, fake paragraphs (business-ish lorem variant? have lorem already; add "techy ipsum" from tech words), ascii banner (text→5x7), marquee? no. QR code (panel CDN), barcode? no. invoice? no. boilerplate library (panel 20 templates), snippet insert? via vault. ~22

**CAT: Web & CSS (wc)**
- live HTML/CSS/JS preview (panel), regex tester (panel), diff checker (panel), color studio (panel), contrast checker (merged in color studio? separate small panel — merge into color studio to save space; separate "random palette" in studio too), gradient studio, shadow studio, radius studio, flexbox lab, grid lab, transform studio, animation studio, px↔rem converter (panel w/ base), URL parser (report transform: input URL → report), query builder? covered, favicon emoji? skip, CSS named color lookup (transform: input name or hex → report + swatch? as transform producing report + we can't show swatch in plain output... panel-lite: I'll allow tool output HTML? Output area is text; I can add a "preview HTML" toggle for tools that return {html}! Nice: tool can return {html, text} — output pane renders sanitized html + copy text. Good for color swatches, ascii banner? banner is text. QR panel separate. For named colors return html swatches. OK.
~16

**CAT: Analyze (az)**
- text stats report (words, chars, sentences, paragraphs, reading/speaking time, avg word len, top words), palindrome check, anagram check (dual), Levenshtein similarity (dual), password strength (panel), luhn card check (report + type), email validator (report), IPv4 analyzer (report), semver parse (report + compare? dual optional second version), regex explain? too hard — regex cheatsheet reference instead. JSON diff (panel? diff tool has mode select: text/JSON-aware — merge into diff panel with mode toggle). Cron lab (panel), unicode inspector (report/table html), entropy calculator (password bits), size estimator? covered. color contrast in studio. file inspector (panel), image→dataURI (panel), device info (panel), storage inspector (panel), localStorage raw editor? add in inspector (edit key value + save) yes real. **Cron lab** panel. ~18

**CAT: Time (tm)**
- stopwatch (panel), pomodoro (panel), timestamp now (button → output all formats), countdown to date? (dual date → days/hours) — transform: input ISO → report remaining, age calculator (dob → years/days), date add/subtract (input date + offset opt days → result), weekday finder (date → day name), week number (date → ISO week), time zones: current time in N zones (panel w/ multi-select via Intl) — panel with common zones list checkboxes → table. meeting planner? same panel. ~11

**CAT: Fun (fn)**
- markov generator, typing test (panel), pig latin, typoglycemia, coin flip (n), dice roll (n d sides), random pick from list, magic 8? skip, commit fortune? no — random dev excuse generator? cute (array of phrases) — include "dev excuse generator"? Maybe: real & fun. yes small. morse/rot13 already in convert. gematria? skip. ~10

**CAT: Reference (rf)** (panel pages w/ search + copy)
- git cheatsheet, docker, npm/yarn? npm, linux CLI, regex tokens, HTTP status codes, MIME types, network ports, ASCII table (128), HTML entities common (~60), keyboard shortcuts (app), ASCII banner is gen. boilerplate lib (gn), prompts library (also its own nav "Prompts" — I'll put Prompts as top-level section within Vault view? Better: Prompts accessible via palette + chat quick actions + a "Library" view combining Prompts + Snippets = "Vault". Vault has tabs: Snippets / Prompts. Good.), security checklist? nice content (10 points) — include "Security review checklist" + "Pre-launch checklist" + "Code review checklist" — real useful references. ~14

Panel count also includes big ones. Total registry: 55+40+26+20+22+16+18+11+10+14 ≈ 232. 

Plus editor (multi-file), chat (providers etc), stats, settings, palette, themes, boot, toasts, history, favorites, import/export, shortcuts, TTS/STT... total feature count display: computed = tools + prompts + snippets + commands + editorFeatures? I'll display honest counts: "234 tools · 76 prompts · 28 snippets · 24 commands · 41 app features" and a total. Actually let me not over-engineer: stats show: Tools, Prompts, Snippets, Chats, Messages, Tools run, Favorites, History entries, Sessions, Streak. And a computed "Total distinct features" = tools + prompts + snippets + commands + key app features list (hardcode an APP_FEATURES count array listing them so it's enumerable & inspectable — a "Feature Index" list in stats that enumerates app features as expandable list! That makes "hundreds" auditable. Nice touch: the feature index modal listing everything with counts. I'll build Feature Index as a searchable panel in Stats.)

OK. Also **Notes**: quick sticky notes panel? Editor covers scratch. Skip.

**Now the writing.** This is going to be extremely long. Let me start composing the final file. I'll write it section by section, being careful with correctness on tricky code. I'll aim for clean, dense, working code. Where behavior could be environment-sensitive (API calls, speech, QR CDN), graceful errors.

Let me define core utilities first in my head:

```js
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
const el=(tag,cls,html)=>{const e=document.createElement(tag);if(cls)e.className=cls;if(html!=null)e.innerHTML=html;return e};
const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
const store={get(k,d){try{const v=localStorage.getItem('forge.'+k);return v?JSON.parse(v):d}catch(e){return d}},set(k,v){localStorage.setItem('forge.'+k,JSON.stringify(v))},del(k){localStorage.removeItem('forge.'+k)}};
async function copy(t){try{await navigator.clipboard.writeText(t);toast('Copied to clipboard')}catch(e){ fallback textarea select execCopy }}
```

Toast: `toast(msg, type)`.

Icons: build `I(name, size)` returning svg string. Icons needed (~46): send, stop, mic, volume, copy, check, plus, x, star, star-fill?, trash, edit(pen), search, command, settings(sliders), sun, moon, menu, chev-r, chev-d, chev-l, arrow-r, download, upload, file, folder, code, terminal, wrench, zap, database, cpu, key, book, hash, clock, play, refresh(rotate-cw), paperclip, more(…), eye, eye-off, layers, box, git(branch), heart? use star only, filter, grid(layout), sidebar, external, info, alert, user, bot? (sparkles for AI — draw a 4-point star path), keyboard, image, globe, shield, calendar, gauge? Let me write minimal stroke SVGs. I'll define paths quickly:

- send: `M22 2 11 13M22 2l-7 20-4-9-9-4z` (lucide send)
- stop: rect x6 y6 w12 h12 (fill)
- mic: `M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z M19 10v1a7 7 0 0 1-14 0v-1 M12 18v4`
- volume: `M11 5 6 9H2v6h4l5 4z M15.5 8.5a5 5 0 0 1 0 7 M19 5a9 9 0 0 1 0 14`
- copy: ``
- check: `M20 6 9 17l-5-5`
- plus: `M12 5v14M5 12h14`
- x: `M18 6 6 18M6 6l12 12`
- star: `polygon 12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26` (stroke)
- trash: `M3 6h18 M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6 M10 11v6M14 11v6`
- pen: `M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z`
- search: circle cx11 cy11 r7 + `m21 21-4.3-4.3`
- command: `M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z` (lucide command — complex; use simpler: `M9 9V5a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z`? that's the real lucide command path roughly. I'll craft: use "⌘" glyph? no, draw it.)
- sliders: `M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4`
- sun: circle r4 + rays `M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4`
- moon: `M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z`
- menu: 3 lines
- chev-r: `m9 18 6-6-6-6` etc.
- download: `M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3`
- upload: inverse
- file: `M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6`
- code: `m16 18 6-6-6-6M8 6l-6 6 6 6`
- terminal: `m4 17 6-6-6-6M12 19h8`
- wrench: `M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94L6.5 19.5a2.12 2.12 0 0 1-3-3l6.94-6.94a6 6 0 0 1 7.94-7.94l-3.76 3.76z` (lucide wrench approx)
- zap: `M13 2 3 14h9l-1 8 10-12h-9l1-8z`
- database: ellipse + sides: ``
- cpu: rect 4..(inner) pins
- key: circle cx7.5 cy15.5 r=4? lucide key: `m21 2-2 2m-7.6 7.6a5.5 5.5 0 1 1-7.8 7.8 5.5 5.5 0 0 1 7.8-7.8zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4`
- book: `M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z`
- hash: `M4 9h16M4 15h16M10 3 8 21M16 3l-2 18`
- clock: circle + `M12 6v6l4 2`
- play: `m6 4 14 8-14 8z` (fill)
- refresh: `M21 12a9 9 0 1 1-2.6-6.4M21 3v6h-6`
- paperclip: `m21.4 11.1-9.2 9.2a5.7 5.7 0 0 1-8-8l9-9a3.8 3.8 0 0 1 5.4 5.4l-9.1 9a1.9 1.9 0 0 1-2.7-2.7l8.5-8.4`approx
- more: 3 dots (circles fill)
- eye: `M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z` + circle r3
- eye-off: eye + slash line
- sparkles(AI): `M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z`
- keyboard: rect + dots... `M2 6h20v12H2z M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h.01M18 14h.01M9 14h6` (use small lines)
- image: rect + circle + `m21 15-5-5L5 21`
- globe: circle + `M2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z`
- shield: `M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z`
- calendar: rect + lines
- branch: ``
- folder: `M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z`
- layout/grid: rect + inner lines
- external: `M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14 21 3`
- info: circle + `M12 16v-4M12 8h.01`
- alert: triangle + `M12 9v4M12 17h.01` + `M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z`
- gauge: `m12 14 4-4M3.3 17a9 9 0 1 1 17.4 0`
- user: circle cx12 cy8 r4 + `M4 21a8 8 0 0 1 16 0`
- filter: `M22 3H2l8 9.5V19l4 2v-8.5z`
- bookmark: `m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z`
- corner-down-left (enter): `M20 4v7a4 4 0 0 1-4 4H4m4-4-4 4 4 4`? lucide: `m20 4-... ` I'll do `M20 4v7a4 4 0 0 1-4 4H4 M8 9l-4 4 4 4`? arrow pointing left-down. Fine.
- box: `M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7zM3.3 7l8.7 5 8.7-5M12 22V12`

Good, I have enough. Implementation: `const IC={name:''}` then `ic(n,s=18)=>''`. Some filled icons (play, stop) add fill=currentColor stroke none — handle with special-case prefix "!" for filled.

Now the **markdown renderer** (for chat): 

```js
function mdRender(src){
  // extract fenced code blocks first → placeholders
  const blocks=[];
  src = src.replace(/```(\w*)\n?([\s\S]*?)```/g,(m,lang,code)=>{blocks.push({lang,code});return '\u0000B'+(blocks.length-1)+'\u0000'});
  // escape rest
  let h=esc(src);
  // tables, headings, hr, blockquote, lists, paragraphs
  ...
  // inline: code, bold, italic, strike, links
  // restore code blocks as ...lang · copy
highlight(code,lang)
}
```
Processing order: per-line parse into blocks (heading, hr, blockquote, ul, ol, table, para). I'll write a line-based parser: iterate lines, group lists, detect tables by `|` rows with separator, else paragraph. Inline then applied. Solid.

**Highlighter** `hl(code, lang)`: tokenize via one regex per lang family:
- common tokens: comments, strings, numbers, keywords, functions (ident before `(` ), operators? minimal.
- languages: js/ts (keywords list, template strings), json (keys: "..." followed by : → class k; strings; numbers; true/false/null), css (selectors, properties, values, comments — token by: comment, string, `{}`/prop `ident\s*:` value), html (tags, attrs, strings, comments — regex `</?tag`, attr names, `="..."`), python (kw, strings incl triple, comments #, decorators), sql (kw upper list, strings, comments --, numbers), bash (kw, strings, comments #, $vars), generic fallback (strings/numbers/comments only).
Implementation: build combined regex with alternation & named order; iterate with exec, wrap classes: `tk-c`(comment) `tk-s`(string) `tk-n`(num) `tk-k`(kw) `tk-f`(fn) `tk-a`(attr) `tk-t`(tag). For html inside code blocks I must highlight escaped HTML — I'll run highlighter on raw code then escape each token appropriately: better tokenize raw, escape text pieces, wrap. Yes: `hl` works on raw text, building output with esc() on each chunk. 

Editor overlay uses same hl → set pre.innerHTML.

**Editor**: 
files: `store('files', [{n:'untitled.js', c:'', l:'js'}])`; active index. UI: left file list (desktop) / dropdown select (mobile). Toolbar: new, rename, lang select, format, run (js), preview (html), download, send-to-AI, save-as-snippet, delete. Status bar: ln, col, chars, sel count.
Textarea + pre overlay: on scroll sync; on input update highlight (debounced 60ms? immediate fine), gutter line numbers update. Tab key inserts 2 spaces; Enter auto-indent copies leading whitespace (and adds if line ends with `{([`). Ctrl+D? maybe skip. 

Run JS: capture console.log/info/warn/error into array by monkeypatching within `new Function('console', code)` — pass fake console object → prints to output panel. Also catch errors. Window is accessible though — it's scratch, acceptable; note "runs in page context".

**Chat system details**:

State: `S.settings = {prov:'openai', keys:{}, models:{} (per provider chosen), customBase, temp, maxTok, topP, stream:true, sys:'', theme, ui…}`. Chats: `S.chats=[{id,t,ts,msgs:[{r:'user'|'ai',c,ts,tok?,prov?,model?}]}]`, `S.chatId`.

Send flow: push user msg → render → stream request → update DOM node live (update the pre-markdown content: during stream, render markdown each chunk? heavy; strategy: during stream show plain text in a pre (whitespace pre-wrap) with blinking cursor; on complete, render markdown. Efficient and looks fine. Or render md every ~150ms throttle — I'll throttle-render md during stream for nicer effect (only if not too long: if len < 20k). Let me do throttled md render (300ms) — feels premium.

Abort: AbortController stored; stop button visible while streaming.

Provider adapter (unified):
```js
async function aiStream({msgs, sys, onDelta, signal}) builds per kind.
```
- buildai messages: strip to user/ai pairs; system separate (anthropic/gemini) or prepended (openai kind).
- openai kind body: {model, messages:[{role:'system',content:sys},...], temperature, max_tokens, top_p, stream}
- gemini: contents user→'user', ai→'model'; systemInstruction.
- anthropic: {system, messages, max_tokens (required!), temperature, stream}.

SSE parse generic:
```js
async function sse(res, onData){ const rd=res.body.getReader(); let buf=''; ...buf split '\n'; lines starting 'data:' → payload; onData(json)}
```
Gemini endpoint with `?alt=sse&key=` — headers none needed. Response chunks: `data: {...}` each candidate delta.
Anthropic: lines may be `event: x` + `data: {...}`; only act on data where type==='content_block_delta' && delta?.text.
OpenAI: `data: [DONE]` ends; delta = j.choices?.[0]?.delta?.content; also handle deepseek reasoner: delta.reasoning_content → prepend stream section? I'll append reasoning inline with dim styling? Complexity; I'll capture reasoning separately and display collapsed? Simpler: ignore reasoning_content? Losing data is bad. I'll append it to content prefixed by "> " lines? Actually just treat as content too but italic? I'll add it to a separate "thinking" section rendered as blockquote at top. Implementation: adapter can call onDelta(text, kind) where kind 'text'|'think'. Render thinking as a dim collapsed block. OK do it.

Error surface: on !res.ok → parse json error message (j.error?.message) → throw with status. Chat shows error bubble (styled, with retry button) + toast. Include hint about keys/CORS/network.

`testProvider(prov)`: send tiny "ping" request non-stream max_tokens 8? Costly tokens minimal. Or just GET models where available (free!) — for anthropic GET /v1/models 10 limit? they support GET /v1/models now (returns data). Use models-list fetch as "Test" — free, real. For providers without models endpoint? All have one. So Test = fetch models. 

`fetchModels(prov)` populates datalist + select. Persist fetched lists in settings.modelsFetched[prov] to repopulate.

Model select: `esc
  


\n\n\n\n'},
'Svelte component':{l:'js',c:'\n\nHello {name}!
\n\n'},
'Express API':{l:'js',c:"import express from 'express';\nconst app = express();\napp.use(express.json());\n\napp.get('/api/health', (req, res) => res.json({ ok: true }));\n\napp.listen(3000, () => console.log('http://localhost:3000'));"},
'FastAPI service':{l:'py',c:'from fastapi import FastAPI\nfrom pydantic import BaseModel\n\napp = FastAPI()\n\nclass Item(BaseModel):\n    name: str\n    price: float\n\n@app.post("/items")\ndef create(item: Item):\n    return {"id": 1, **item.model_dump()}'},
'Flask app':{l:'py',c:"from flask import Flask, jsonify, request\n\napp = Flask(__name__)\n\n@app.route('/api/hello')\ndef hello():\n    return jsonify(message='hello', name=request.args.get('name', 'world'))"},
'Python CLI':{l:'py',c:'#!/usr/bin/env python3\nimport argparse\n\ndef main():\n    p = argparse.ArgumentParser(description="do a thing")\n    p.add_argument("input", help="input file")\n    p.add_argument("-v", "--verbose", action="store_true")\n    args = p.parse_args()\n    print(args)\n\nif __name__ == "__main__":\n    main()'},
'Bash strict script':{l:'bash',c:'#!/usr/bin/env bash\nset -euo pipefail\nIFS=$\'\\n\\t\'\n\nmain() {\n  echo "args: $*"\n}\n\nmain "$@"'},
'Go HTTP server':{l:'js',c:'package main\n\nimport (\n    "fmt"\n    "net/http"\n)\n\nfunc main() {\n    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {\n        fmt.Fprintln(w, "hello")\n    })\n    http.ListenAndServe(":8080", nil)\n}'},
'Rust main':{l:'js',c:'fn main() {\n    println!("hello from forge");\n}'},
'C skeleton':{l:'js',c:'#include \n\nint main(int argc, char **argv) {\n    (void)argc; (void)argv;\n    printf("hello\\n");\n    return 0;\n}'},
'C++ skeleton':{l:'js',c:'#include \n#include \n\nint main() {\n    std::vector v{1, 2, 3};\n    for (int x : v) std::cout << x << "\\n";\n}'},
'Java class':{l:'js',c:'public class Main {\n    public static void main(String[] args) {\n        System.out.println("hello");\n    }\n}'},
'tsconfig.json':{l:'json',c:'{\n  "compilerOptions": {\n    "target": "ES2022",\n    "module": "ESNext",\n    "moduleResolution": "bundler",\n    "strict": true,\n    "noUncheckedIndexedAccess": true,\n    "outDir": "dist"\n  },\n  "include": ["src"]\n}'},
'Makefile':{l:'bash',c:'APP = forge\n\n.PHONY: build test clean\nbuild:\n\t@echo building $(APP)\n\ntest:\n\t@echo testing\n\nclean:\n\trm -rf dist'}};
 BP['HTML5 starter'].c=BP['HTML5 starter'].c.replace('8`${v.l}${esc(k)}`).join('');
 bd.querySelectorAll('[data-bp]').forEach(r=>r.onclick=()=>{const[k,v]=Object.entries(BP).find(([k2])=>k2===r.dataset.bp);
  addEditorFile(slugify(k)+'.'+({html:'html',jsx:'jsx',js:'js',py:'py',bash:'sh',json:'json'})[v.l]||'txt',v.c);
  toast('Opened in editor — see the Code tab','ok');route('code')})};
/* cheatsheets + references */
function refPanel(data,title){return bd=>{
 bd.innerHTML=``;
 const paint=q=>{const ql=q.toLowerCase();
  const groups={};data.forEach(([c,a,b])=>{if(ql&&!((c+' '+a+' '+b).toLowerCase().includes(ql)))return;(groups[c]=groups[c]||[]).push([a,b])});
  $('#rf-l').innerHTML=Object.entries(groups).map(([g,rows])=>`${esc(g)}
`+rows.map(([a,b])=>`${esc(a)}${esc(b)}
`).join('')).join('')||'no matches';
  $$('#rf-l .rr').forEach(r=>r.onclick=()=>copyText(r.dataset.cmd))};
 $('#rf-q').oninput=e=>paint(e.target.value);paint('')}}
const GIT_C=[['Repository','git init','create a repo here'],['Repository','git clone URL','copy a remote repo'],['Repository','git status -sb','short status incl. branch'],['Staging','git add .','stage everything'],['Staging','git add -p','stage hunk by hunk'],['Commit','git commit -m "msg"','commit staged changes'],['Commit','git commit --amend','fix the last commit'],['History','git log --oneline --graph --all','visual history'],['Branches','git branch','list branches'],['Branches','git switch -c feat/x','create + switch branch'],['Branches','git switch main','switch branch'],['Merge','git merge feat/x','merge branch into current'],['Merge','git rebase main','replay commits onto main'],['Merge','git rebase -i HEAD~3','edit last 3 commits'],['Remote','git remote add origin URL','link remote'],['Remote','git push -u origin main','push + set upstream'],['Remote','git push --force-with-lease','safer force push'],['Remote','git pull --rebase','pull without merge bubbles'],['Remote','git fetch --prune','sync remote branches'],['Undo','git restore file','discard file changes'],['Undo','git restore --staged file','unstage a file'],['Undo','git reset --soft HEAD~1','undo commit, keep changes'],['Undo','git reset --hard HEAD~1','nuke commit + changes'],['Undo','git revert SHA','inverse-apply a commit'],['Stash','git stash push -m "wip"','save work temporarily'],['Stash','git stash pop','restore last stash'],['Tags','git tag -a v1.0 -m "rel"','annotated tag'],['Debug','git bisect start','binary-search a regression'],['Debug','git blame file','who changed each line'],['Debug','git reflog','recover "lost" commits']];
TPanel('rf','Git cheatsheet','Essential git commands, searchable','X');TOOLS[TOOLS.length-1].run=refPanel(GIT_C);
const DOCKER_C=[['Images','docker build -t name .','build image from Dockerfile'],['Images','docker images','list local images'],['Images','docker rmi name','remove an image'],['Containers','docker run -d -p 8080:80 name','run detached + port map'],['Containers','docker ps','running containers'],['Containers','docker ps -a','all containers'],['Containers','docker stop ID','stop container'],['Containers','docker rm ID','remove container'],['Containers','docker exec -it ID sh','shell inside container'],['Compose','docker compose up -d','start stack detached'],['Compose','docker compose down','stop + remove stack'],['Compose','docker compose logs -f','follow logs'],['Compose','docker compose build','rebuild services'],['Files','docker cp ID:/path ./local','copy file out'],['Info','docker inspect ID','full container JSON'],['Info','docker stats','live resource usage'],['Cleanup','docker system prune','remove all unused'],['Volumes','docker volume ls','list volumes'],['Networks','docker network ls','list networks']];
TPanel('rf','Docker cheatsheet','Container commands at a glance','X');TOOLS[TOOLS.length-1].run=refPanel(DOCKER_C);
const NPM_C=[['Setup','npm init -y','scaffold package.json'],['Install','npm install','install all deps'],['Install','npm i pkg','add dependency'],['Install','npm i -D pkg','add dev dependency'],['Install','npm i -g pkg','global install'],['Remove','npm uninstall pkg','remove dependency'],['Update','npm update','update deps in range'],['Update','npm outdated','show stale deps'],['Scripts','npm run 


```

**What you get, and how the feature count is honest** — the Stats view includes a live *Feature Index* that itemizes where the ~380 working features come from:

- **240+ tool registry** — every one functional and searchable via the ⌘K console or the Toolbox ledger: text/case tools, JSON↔CSV/TSV/YAML/XML/PHP/TypeScript converters, formatters, SQL/CSS/HTML minifiers, hashes (MD5, CRC32, SHA-1/256/384/512, HMAC), JWT decoder, ciphers (ROT13, Caesar, Vigenère, XOR, Morse, NATO), diff checker, regex tester, live HTML preview with captured console, cron explainer with next-run calculation, color/gradient/shadow/flex/grid/transform/animation studios, unit converter, mock-data & ID generators, README/LICENSE/.gitignore/Dockerfile/CI builders, cheatsheets for git/docker/npm/linux/HTTP/MIME/ports/entities, and more.
- **AI chat engine** — 11 providers (OpenAI, Anthropic, Gemini, Groq, OpenRouter, Mistral, DeepSeek, Together, xAI, Ollama, any custom OpenAI-compatible endpoint) with SSE streaming, abort/regenerate, model-list fetching, key vault, cost estimates, slash commands, dictation, read-aloud, and Markdown rendering with per-code-block copy/insert.
- **Editor + Vault + app** — multi-file syntax-highlighted scratch editor with run/format/shortcuts, 40+ prompt templates, 27 built-in snippets, history, favorites, streaks, 4 themes, full data export/import.

To use it: open the file, press **⌘K**, or go to **Settings → Providers** and paste your own key (it never leaves your browser — requests go directly to the provider). Token counts and costs are heuristic estimates.