docs: DocGen preview editing — editable @prompt: textarea, @step: inputs, image upload, model readiness

Author: ijbo

README.md

@@ -34,7 +34,7 @@
 | **Desktop** | Native app via Neutralino.js with system tray and offline support |
 | **Code Execution** | 6 languages in-browser: Bash ([just-bash](https://justbash.dev/)), Math (Nerdamer), 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 |
 | **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:}}` deep reasoning, `{{@Image:}}` image generation (Gemini Imagen) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`); per-card model selector, concurrent block operations |
+| **AI Document Tags** | `{{@AI:}}` text generation, `{{@Think:}}` deep reasoning, `{{@Image:}}` image generation (Gemini Imagen) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`, `@upload`); editable `@prompt:` textarea and `@step:` inputs in preview cards; description/prompt separation (bare text = label, `@prompt:` = AI instruction); 📎 image upload for multimodal vision analysis; per-card model selector, 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 — DuckDuckGo (free), Brave Search, Serper.dev; search results injected into LLM context; source citations in responses; per-agent-card search provider selector |
@@ -443,6 +443,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------|
+| **2026-03-11** | — | 🏷️ **DocGen Preview Editing** — editable `@prompt:` textarea in AI/Image preview cards (bare text = static description label, `@prompt:` = actual AI instruction sent to model); editable `@step:` inputs in Agent Flow cards with debounced sync back to editor; 📎 image upload button on AI/Image/Agent cards with `@upload: filename` editor sync and thumbnail preview; `ensureModelReady()` helper prevents "AI model not ready" error (handles local download consent + cloud API key prompt); Image card model selector now includes vision/multimodal models with separator; description/prompt separation in parser (`block.description` vs `block.prompt`) |
 | **2026-03-11** | — | 🎤 **Speech-to-Text Enhancements** — dual-engine voice dictation (Web Speech API + Moonshine Base ONNX) with consensus scoring; auto-punctuation enabled by default (AI refinement with 5s timeout + built-in capitalize/period fallback); 50+ voice commands with natural ASR-friendly aliases ("heading one"/"title" for H1, "undo"/"take that back", "add table"/"add link", "strikethrough…end strike", "ellipsis"/"open quote"); stronger hallucination filter (100-word max, non-ASCII rejection); streaming partial result display; improved model loading progress [1/4]…[4/4] with file sizes; experimental Moonshine Medium ONNX worker (kept as reference) |
 | **2026-03-10** | — | 📈 **Stock Dashboard** — new Finance template category (3 templates: Stock Watchlist, Crypto Tracker, Market Overview) with live TradingView Advanced Chart widgets and 52-period EMA overlay; dynamic `data-var-prefix` grid engine expands one `stock-card` per non-empty variable; configurable `chartRange`, `chartInterval`, `emaPeriod` via `@variables` table; interactive 1M/1Y/3Y range + 52D/52W/52M EMA toggle buttons; `@variables` block persists after ⚡ Vars for re-editing; JS code block dynamically reads `$(cname*)` variables to generate grid HTML; `data-range`, `data-interval`, `data-ema` forwarded through DOMPurify; 179 Playwright tests pass |
 | **2026-03-10** | — | 🛡️ **CSP Fix for Badges** — added `https://img.shields.io` to the `img-src` directive in `index.html` and `nginx.conf` Content-Security-Policy to allow GitHub license and version badges to render correctly; updated legacy domain to `textagent.github.io`. |

changelogs/CHANGELOG-docgen-preview-editing.md

@@ -0,0 +1,48 @@
+# CHANGELOG — DocGen Preview Editing & Upload
+
+## Summary
+
+Enhanced DocGen tag preview cards with interactive editing, image uploads, and model readiness checks.
+
+## Changes
+
+### Image Upload (`@upload:` directive)
+- Added 📎 upload button to AI, Image, and Agent preview cards
+- File picker stores image data (base64, mimeType, name) in memory (`blockUploads` Map)
+- Uploaded images display as thumbnails with ✕ remove button
+- Inserting/removing uploads syncs `@upload: filename` lines in editor tag text
+- `parseDocgenBlocks()` extracts `@upload:` lines from tag text
+
+### Editable Prompt Box (`@prompt:` textarea)
+- When `@prompt:` field is present in a tag, the preview card shows an editable `<textarea>`
+- Bare text (without `@prompt:`) displays as static italic description — NOT sent to AI
+- `@prompt:` content is the actual AI instruction sent to the model
+- Debounced sync (300ms) writes edits back to the `@prompt:` line in the editor
+- Suppresses re-render during sync to preserve textarea focus
+- Light/dark theme support with teal (AI) and purple (Image) focus accents
+
+### Description vs Prompt Separation
+- Parser now stores `block.description` (bare text label) and `block.prompt` (`@prompt:` content) separately
+- `block.hasPromptField` flag controls textarea vs static text rendering
+- `buildPrompt()` only sends `@prompt:` content to the AI model
+- Description shows as static italic label above the textarea
+
+### Editable Agent Steps
+- Agent step descriptions changed from `<span>` to `<input>` for inline editing
+- `updateBlockStepText()` syncs edits to `@step N:` lines in the editor
+- Amber accent styling on focus/hover, transparent when idle
+
+### Model Readiness Check (`ensureModelReady()`)
+- New helper prevents cryptic "AI model not ready" error
+- Handles local model download consent flow
+- Handles cloud model API key prompt
+- Called before `generateAndReview()` and `generateAgentFlow()`
+
+### Image Card Model Selector
+- Image card dropdown now includes both image generation models AND vision/multimodal models
+- Separated by `──── Vision ────` divider
+
+## Files Modified
+- `js/ai-docgen.js` — parser, card rendering, field sync handlers
+- `js/ai-docgen-generate.js` — `ensureModelReady()`, attachments
+- `css/ai-docgen.css` — textarea, step input, upload thumbnail styles