feat: AI diagram generation in Draw tags + 37 new Playwright tests

- AI-powered diagram generation: natural language → Excalidraw JSON via LLM
- New AI prompt section in {{Draw:}} cards with text input, model selector, 🚀 Generate button
- EXCALIDRAW_CHEAT_SHEET system prompt for element schema (rect, ellipse, diamond, text, arrow)
- repairJson() auto-fixes common LLM JSON mistakes (trailing commas, truncated output)
- @model: field in Draw tags for per-card model persistence
- Gemini API key forwarding to Excalidraw embed
- 22 new draw-docgen tests, 7 readonly-mode tests, 8 excalidraw-library tests
- 5 new regression pins (GLM-OCR, Draw card, readonly CSS, embed page)

Author: ijbo

README.md

@@ -36,7 +36,7 @@
 | **Desktop** | Native app via Neutralino.js with system tray and offline support |
 | **Code Execution** | 7 languages in-browser: Bash ([just-bash](https://justbash.dev/)), Math (Nerdamer), LaTeX (MathJax + Nerdamer evaluation), Python ([Pyodide](https://pyodide.org/)), HTML (sandboxed iframe, `html-autorun` for widgets/quizzes), JavaScript (sandboxed iframe), SQL ([sql.js](https://sql.js.org/) SQLite) · 25+ compiled languages via [Judge0 CE](https://ce.judge0.com): C, C++, Rust, Go, Java, TypeScript, Kotlin, Scala, Ruby, Swift, Haskell, Dart, C#, and more · **▶ Run All** notebook engine — one-click sequential execution with preflight dialog (block table with model/status), pre-execution model loading (AI + TTS auto-loaded before blocks run), progress bar, abort, per-block status badges, detailed console logging, and SQLite shared context store |
 | **Security** | Content Security Policy (CSP), SRI integrity hashes, XSS sanitization (DOMPurify), ReDoS protection, Firestore write-token ownership, API keys via HTTP headers, postMessage origin validation, 8-char passphrase minimum, sandboxed code execution |
-| **AI Document Tags** | `{{@AI:}}` text generation (`@think: Yes` for deep reasoning), `{{@Image:}}` image generation (Gemini Imagen), `{{@OCR:}}` image-to-text extraction (Text/Math/Table modes via Granite Docling 258M, Florence-2 230M, or GLM-OCR 1.5B, PDF page rendering via pdf.js), `{{@TTS:}}` text-to-speech playback (Kokoro TTS per card, language selector, ▶ Play / ⬇ Save WAV), `{{@STT:}}` speech-to-text dictation (engine selector: Whisper/Voxtral/Web Speech API, 11 languages, Record/Stop/Insert/Clear), `{{@Translate:}}` translation (target language selector, integrated TTS pronunciation, cloud model routing), `{{@Game:}}` game builder (AI-generated or pre-built, Canvas 2D/Three.js/P5.js, import/export HTML), `{{@Draw:}}` whiteboard (Excalidraw + Mermaid, Insert/PNG/SVG export, 📚 Library Browser with 29 bundled packs in 6 categories) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`, `@upload`, `@model`, `@engine`, `@lang`, `@prebuilt`); `@model:` field persists selected model per card with intelligent defaults (OCR→`granite-docling`, TTS→`kokoro-tts`, STT→`voxtral-stt`, Image→`imagen-ultra`); editable `@prompt:` textarea and `@step:` inputs in preview cards; description/prompt separation (bare text = label, `@prompt:` = AI instruction); 📎 image/PDF upload for multimodal vision analysis; per-card model selector with document-portable model persistence, concurrent block operations |
+| **AI Document Tags** | `{{@AI:}}` text generation (`@think: Yes` for deep reasoning), `{{@Image:}}` image generation (Gemini Imagen), `{{@OCR:}}` image-to-text extraction (Text/Math/Table modes via Granite Docling 258M, Florence-2 230M, or GLM-OCR 1.5B, PDF page rendering via pdf.js), `{{@TTS:}}` text-to-speech playback (Kokoro TTS per card, language selector, ▶ Play / ⬇ Save WAV), `{{@STT:}}` speech-to-text dictation (engine selector: Whisper/Voxtral/Web Speech API, 11 languages, Record/Stop/Insert/Clear), `{{@Translate:}}` translation (target language selector, integrated TTS pronunciation, cloud model routing), `{{@Game:}}` game builder (AI-generated or pre-built, Canvas 2D/Three.js/P5.js, import/export HTML), `{{@Draw:}}` whiteboard (Excalidraw + Mermaid, Insert/PNG/SVG export, 📚 Library Browser with 29 bundled packs in 6 categories, 🚀 AI diagram generation with natural language prompt and model selector) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`, `@upload`, `@model`, `@engine`, `@lang`, `@prebuilt`); `@model:` field persists selected model per card with intelligent defaults (OCR→`granite-docling`, TTS→`kokoro-tts`, STT→`voxtral-stt`, Image→`imagen-ultra`); editable `@prompt:` textarea and `@step:` inputs in preview cards; description/prompt separation (bare text = label, `@prompt:` = AI instruction); 📎 image/PDF upload for multimodal vision analysis; per-card model selector with document-portable model persistence, concurrent block operations |
 | **🔌 API Calls** | `{{API:}}` REST API integration — GET/POST/PUT/DELETE methods, custom headers, JSON body, response stored in `$(api_varName)` variables; inline review panel; toolbar GET/POST buttons |
 | **🔗 Agent Flow** | `{{Agent:}}` multi-step pipeline — define Step 1/2/3, chain outputs, per-card model + search provider selector, live step status indicators (⏳/✅/❌), review combined output |
 | **🔍 Web Search** | Toggle web search for AI — 7 providers: DuckDuckGo (free), Brave Search, Serper.dev, Tavily (AI-optimized), Google CSE, Wikipedia, Wikidata; search results injected into LLM context; source citations in responses; per-agent-card search provider selector |
@@ -48,7 +48,7 @@
 | **💾 Disk Workspace** | Folder-backed storage via File System Access API — "Open Folder" in sidebar header; `.md` files read/written directly to disk; `.textagent/workspace.json` manifest; debounced autosave ("💾 Saved to disk" indicator); refresh from disk for external edits; disconnect to revert to localStorage; auto-reconnect on reload via IndexedDB handles; unified action modal for rename/duplicate/delete with confirmation; Chromium-only (hidden in unsupported browsers) |
 | **📈 Finance Dashboard** | Stock/crypto/index dashboard templates with live TradingView charts; dynamic grid via `data-var-prefix` (add/remove tickers in `@variables` table, grid auto-adjusts); configurable chart range (`1M`, `12M`, `36M`), interval (`D`, `W`, `M`), and EMA period (default 52); interactive 1M/1Y/3Y range + 52D/52W/52M EMA toggle buttons; `@variables` table persists after ⚡ Vars for re-editing; JS code block generates grid HTML from variables |
 | **Extras** | Auto-save (localStorage + cloud), table of contents, image paste, 123+ templates (14 categories: AI, Agents, Coding, Creative, Documentation, Finance, Games, Maths, PPT, Project, Quiz, Skills, Tables, Technical), AI Model Manager template (local model reference with sizes, privacy, and capabilities), template variable substitution (`$(varName)` with auto-detect), table spreadsheet tools (sort, filter, stats, chart, add row/col, inline cell edit, CSV/MD export), content statistics, modular codebase (13+ JS modules), fully responsive mobile UI with scrollable Quick Action Bar (Files, Search, TOC, Share, Copy, Tools, AI, Model, Upload, Help) and formatting toolbar, multi-file workspace sidebar, compact header mode with collapsible Tools dropdown (Presentation, Zen, Word Wrap, Focus, Voice, Dark Mode, Preview Theme), Clear All / Clear Selection buttons (undoable via Ctrl+Z) |
-| **Dev Tooling** | ESLint + Prettier (lint, format:check), Playwright test suite — 484 tests across smoke, feature, integration, dev, regression, performance, quality, and security categories (import, export, share, view-mode, editor, email-to-self, secure share, startup timing, export integrity, persistence, module loading, disk workspace, context memory, exec engine, build validation, load-time, accessibility, video player, TTS, STT, file converters, stock widget, embed grid, model registry, model tag, game tag, static analysis, code smell, XSS hardening, Florence-2 model, Docling model, TTS download), pre-commit changelog enforcement, GitHub Actions CI |
+| **Dev Tooling** | ESLint + Prettier (lint, format:check), Playwright test suite — 521 tests across smoke, feature, integration, dev, regression, performance, quality, and security categories (import, export, share, view-mode, editor, email-to-self, secure share, startup timing, export integrity, persistence, module loading, disk workspace, context memory, exec engine, build validation, load-time, accessibility, video player, TTS, STT, file converters, stock widget, embed grid, model registry, model tag, game tag, draw docgen, readonly mode, excalidraw library, static analysis, code smell, XSS hardening, Florence-2 model, Docling model, GLM-OCR model, TTS download), pre-commit changelog enforcement, GitHub Actions CI |
 
 ## 🤖 AI Assistant
 
@@ -460,6 +460,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-03-18** | | 🚀 **AI Diagram Generation** — natural language → Excalidraw JSON via LLM; new AI prompt section in `{{Draw:}}` cards with text input, model selector dropdown, and 🚀 Generate button; `EXCALIDRAW_CHEAT_SHEET` system prompt teaches LLM the element schema (rectangle, ellipse, diamond, text, arrow, line); `repairJson()` auto-fixes common LLM JSON mistakes (trailing commas, truncated output, missing brackets); `@model:` field in Draw tags for per-card model persistence; cancel/retry support; Gemini API key forwarding to Excalidraw embed; 37 new Playwright tests (22 draw-docgen, 7 readonly-mode, 8 excalidraw-library) + 5 regression pins |
 | **2026-03-18** | | 📷 **GLM-OCR Model** — added [GLM-OCR (1.5B)](https://huggingface.co/textagent/GLM-OCR-ONNX) as third local OCR model alongside Granite Docling and Florence-2; `ai-worker-glm-ocr.js` Web Worker using q4f16 quantization (~650 MB, WebGPU required); primary `textagent/GLM-OCR-ONNX` with `onnx-community/GLM-OCR-ONNX` fallback; `glm-ocr` entry in `ai-models.js` with `isDocModel: true`; documentation updated; 7 new Playwright model registry tests |
 | **2026-03-18** | | 📚 **Excalidraw Library Browser** — 29 bundled library packs (600+ items) organized in 6 categories (Architecture & System Design, UI/UX & Wireframing, Icons & Logos, Cloud & DevOps, Data & Algorithms, AI/Science & Education) with slide-in Library Browser panel; each library card with name, description, and toggle switch for on-demand loading; real-time search/filter; injected via MutationObserver into Excalidraw's native Library sidebar as "📦 Browse & Add Library Packs" button; libraries include Software Architecture, System Design Components, AWS Icons, Google Icons (139 items), UML/ER, Wireframing, Deep Learning, Math Teacher, Charts, Graphs, and more |
 | **2026-03-18** | | 🎨 **Draw DocGen Integration** — full `{{Draw:}}` tag pipeline: `transformDrawMarkdown` + `bindDrawPreviewActions` in renderer, 🎨 Draw toolbar button, `excalidraw.com` added to CSP `frame-src`, `draw-docgen.css` (309-line standalone stylesheet with card UI, tool pills, Mermaid editor, dark mode), `draw-docgen.js` lazy-loaded as Phase 3j; DOMPurify allowlist expanded with `data-draw-index`, `data-draw-tool`, `data-tool`, `data-skill` |

changelogs/CHANGELOG-ai-diagram-gen-tests.md

@@ -0,0 +1,33 @@
+# CHANGELOG — AI Diagram Generation + Test Coverage
+
+## AI Diagram Generation (Draw DocGen)
+- Added AI-powered diagram generation to `{{Draw:}}` cards — users can describe a diagram in natural language and generate Excalidraw JSON via LLM
+- New `.draw-ai-prompt-section` with text input, model selector dropdown, and 🚀 Generate button
+- `js/draw-docgen.js`: ~400 lines of new logic including `repairJson()` for LLM output cleanup, `@model:` field parsing, Excalidraw element rendering pipeline, and cancel/retry support
+- `css/draw-docgen.css`: 133 lines of new CSS for AI prompt row, generate button, model selector, status bar, and dark mode
+- `public/ai-worker-common.js`: added `excalidraw_diagram: 16384` token limit and `EXCALIDRAW_CHEAT_SHEET` const (Excalidraw element schema reference for LLM context)
+- `public/ai-worker-gemini.js` and `public/ai-worker.js`: registered `excalidraw_diagram` task type
+- `public/excalidraw-embed.html`: added `set-api-key` postMessage handler for forwarding Gemini key to embed
+- `styles.css`: minor CSS import fix
+
+## Comprehensive Test Coverage
+- **NEW** `tests/feature/draw-docgen.spec.js` — 22 tests covering module loading, tag parsing, card rendering, tool pills, Mermaid editor, AI prompt section, AI Generate button, model selector, toolbar integration, and error safety
+- **NEW** `tests/feature/readonly-mode.spec.js` — 7 tests covering CSS lockdown enforcement, JS guards (insertAtCursor, paste, keyboard), and opacity verification
+- **NEW** `tests/feature/excalidraw-library.spec.js` — 8 tests covering asset serving, JSON validity, embed page structure, and 29+ library file count
+- **UPDATED** `tests/regression/regression-recent.spec.js` — 5 new regression pins: GLM-OCR model entry, Draw tag card rendering, readonly CSS opacity lockdown, Excalidraw embed page accessibility
+
+## Files Modified
+- `js/draw-docgen.js` (+397 lines)
+- `css/draw-docgen.css` (+133 lines)
+- `public/ai-worker-common.js` (+51 lines)
+- `public/ai-worker-gemini.js` (+2 lines)
+- `public/ai-worker.js` (+2 lines)
+- `public/excalidraw-embed.html` (+6 lines)
+- `styles.css` (+1 line)
+- `tests/regression/regression-recent.spec.js` (+61 lines)
+- `tests/feature/draw-docgen.spec.js` (NEW, 271 lines)
+- `tests/feature/readonly-mode.spec.js` (NEW, 160 lines)
+- `tests/feature/excalidraw-library.spec.js` (NEW, 115 lines)
+
+## Test Results
+All 52 tests pass (44s, Chromium via Playwright)

css/draw-docgen.css

@@ -137,6 +137,107 @@
     font-weight: 600;
 }
 
+/* ─── AI Generate Button & Prompt ─── */
+
+/* Model selector (same pattern as git-docgen) */
+.draw-ai-model-select {
+    border: 1px solid rgba(105, 101, 219, 0.3);
+    border-radius: 6px;
+    padding: 3px 6px;
+    font-size: 0.75rem;
+    background: transparent;
+    color: inherit;
+    max-width: 140px;
+    cursor: pointer;
+}
+
+.draw-ai-prompt-section {
+    padding: 10px 14px;
+    background: rgba(105, 101, 219, 0.04);
+    border-bottom: 1px solid rgba(105, 101, 219, 0.1);
+}
+
+.draw-ai-prompt-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.draw-ai-prompt-input {
+    flex: 1;
+    border: 1px solid rgba(105, 101, 219, 0.25);
+    border-radius: 8px;
+    padding: 7px 12px;
+    font-size: 0.82rem;
+    background: rgba(255, 255, 255, 0.6);
+    color: inherit;
+    transition: border-color 0.2s;
+    font-family: inherit;
+}
+
+.draw-ai-prompt-input:focus {
+    outline: none;
+    border-color: #6965db;
+    box-shadow: 0 0 0 3px rgba(105, 101, 219, 0.12);
+}
+
+.draw-ai-prompt-input::placeholder {
+    color: #9ca3af;
+    font-size: 0.78rem;
+}
+
+.draw-ai-generate-btn {
+    background: linear-gradient(135deg, #6965db 0%, #a855f7 100%) !important;
+    color: #fff !important;
+    font-weight: 600;
+    min-width: 100px;
+}
+
+.draw-ai-generate-btn:hover {
+    background: linear-gradient(135deg, #5753c9 0%, #9333ea 100%) !important;
+}
+
+.draw-ai-generate-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.draw-ai-cancel-btn {
+    padding: 4px 8px !important;
+    font-size: 0.85rem !important;
+    background: transparent !important;
+    color: #9ca3af !important;
+}
+
+.draw-ai-cancel-btn:hover {
+    color: #ef4444 !important;
+}
+
+.draw-ai-status {
+    margin-top: 8px;
+    font-size: 0.78rem;
+    color: #6965db;
+    padding: 6px 10px;
+    border-radius: 6px;
+    background: rgba(105, 101, 219, 0.06);
+}
+
+.draw-ai-spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(105, 101, 219, 0.2);
+    border-top-color: #6965db;
+    border-radius: 50%;
+    animation: draw-ai-spin 0.8s linear infinite;
+    vertical-align: middle;
+    margin-right: 6px;
+}
+
+@keyframes draw-ai-spin {
+    to { transform: rotate(360deg); }
+}
+
 /* ─── Dark Mode ─── */
 
 [data-theme="dark"] .draw-docgen-card,
@@ -184,6 +285,38 @@
     color: #34d399;
 }
 
+/* ─── Dark Mode: AI Prompt ─── */
+
+[data-theme="dark"] .draw-ai-prompt-section,
+.dark-mode .draw-ai-prompt-section {
+    background: rgba(105, 101, 219, 0.06);
+    border-bottom-color: rgba(105, 101, 219, 0.15);
+}
+
+[data-theme="dark"] .draw-ai-prompt-input,
+.dark-mode .draw-ai-prompt-input {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(165, 162, 241, 0.3);
+    color: #e5e7eb;
+}
+
+[data-theme="dark"] .draw-ai-prompt-input::placeholder,
+.dark-mode .draw-ai-prompt-input::placeholder {
+    color: #6b7280;
+}
+
+[data-theme="dark"] .draw-ai-status,
+.dark-mode .draw-ai-status {
+    color: #a5a2f1;
+    background: rgba(105, 101, 219, 0.1);
+}
+
+[data-theme="dark"] .draw-ai-spinner,
+.dark-mode .draw-ai-spinner {
+    border-color: rgba(165, 162, 241, 0.2);
+    border-top-color: #a5a2f1;
+}
+
 /* ─── Tool Pills (Excalidraw / Mermaid) ─── */
 
 .draw-tool-pills {