feat: offline model manager — ZIP export/import for browser-cached AI models

- Added Model Manager tab to AI model selector (Models | Manager)
- Export bundles cached model files into single ZIP (STORE mode, built-in CRC32)
- Import accepts ZIP file, extracts entries, restores to browser Cache API
- Delete clears cached model from browser storage
- Per-model status badges with cache size detection
- Manifest-based file tracking for reliable reimport
- Refactored button labels from Download/Upload to Export/Import
- Added Science template category to template modal
- Fixed M._ai namespace overwrite bug
- Works in all browsers — no File System Access API dependency

Author: ijbo

README.md

@@ -26,7 +26,7 @@
 | **Writing Modes** | Zen mode (distraction-free fullscreen), Focus mode (dimmed paragraphs), Dark mode, multiple preview themes (GitHub, GitLab, Notion, Dracula, Solarized, Evergreen) |
 | **Rendering** | GitHub-style Markdown, syntax highlighting (180+ languages), LaTeX math (MathJax), Mermaid diagrams (zoom/pan/export), PlantUML diagrams, callout blocks, footnotes, emoji, anchor links |
 | **🎬 Media Embedding** | Video playback via `![alt](video.mp4)` image syntax (`.mp4`, `.webm`, `.ogg`, `.mov`, `.m4v`); YouTube/Vimeo embeds auto-detected; `embed` code block for responsive media grids (`cols=1-4`, `height=N`); Video.js v10 lazy-loaded with native `<video>` fallback; website URLs render as rich link preview cards with favicon + "Open ↗" button |
-| **🤖 AI Assistant** | 3 local Qwen 3.5 sizes (0.8B / 2B / 4B via WebGPU/WASM), Gemini 3.1 Flash Lite, Groq Llama 3.3 70B, OpenRouter — summarize, expand, rephrase, grammar-fix, explain, simplify, auto-complete; AI writing tags (Polish, Formalize, Elaborate, Shorten, Image); enhanced context menu; per-card model selection; concurrent block generation; inline review with accept/reject/regenerate; AI-powered image generation; **smart model loading UX** — cache vs download detection (📦/⬇️), HuggingFace source location display, delete cached models from browser storage; all models hosted on [`textagent` HuggingFace org](https://huggingface.co/textagent) with automatic fallback |
+| **🤖 AI Assistant** | 3 local Qwen 3.5 sizes (0.8B / 2B / 4B via WebGPU/WASM), Gemini 3.1 Flash Lite, Groq Llama 3.3 70B, OpenRouter — summarize, expand, rephrase, grammar-fix, explain, simplify, auto-complete; AI writing tags (Polish, Formalize, Elaborate, Shorten, Image); enhanced context menu; per-card model selection; concurrent block generation; inline review with accept/reject/regenerate; AI-powered image generation; **smart model loading UX** — cache vs download detection (📦/⬇️), HuggingFace source location display, delete cached models from browser storage; **Model Manager** tab (Models \| Manager) with ZIP Export/Import — export cached model as single `.zip`, import to restore into browser Cache API, per-model status badges and cache sizes; all models hosted on [`textagent` HuggingFace org](https://huggingface.co/textagent) with automatic fallback |
 | **📌 AI Annotations** | Right-click context menu on selected text → 5 annotation types: ⭐ Highlight, 📝 Sticky Note, ❓ Ask AI, 🔖 Bookmark, 📖 Define; color-coded pills render inline in preview; sliding thread panel for multi-turn AI Q&A with document context, web search, and model selector; annotations stored as HTML comments in markdown source (portable, no external DB); **Study Copy** workflow for annotating shared read-only documents; `findBlockEnd()` structural insertion prevents markdown syntax breakage |
 | **🎤 Voice Dictation** | Dual-engine speech-to-text: **Voxtral Mini 3B** (WebGPU, primary, 13 languages, ~2.7 GB) or **Whisper Large V3 Turbo** (WASM fallback, ~800 MB) with consensus scoring; download consent popup with model info before first use; 50+ Markdown-aware voice commands — natural phrases ("heading one", "bold…end bold", "add table", "undo"); auto-punctuation via AI refinement or built-in fallback; streaming partial results |
 | **🔊 Text-to-Speech** | Hybrid Kokoro TTS engine — 9 languages (English, Japanese, Chinese, Spanish, French, Hindi, Italian, Portuguese) via [Kokoro 82M v1.0 ONNX](https://huggingface.co/textagent/Kokoro-82M-v1.0-ONNX) (~80 MB, off-thread WebWorker), Korean, German & others via Web Speech API fallback; **chunked synthesis** for long text (sentence-boundary splitting, ~500 chars/chunk, sequential synthesis with per-chunk progress); TTS card with separate ▶ Run (generate audio) / ▷ Play (replay) / 💾 Save (WAV download) buttons; hover any preview text and click 🔊 to hear pronunciation; voice auto-selection by language |
@@ -49,7 +49,7 @@
 | **✉️ Email to Self** | Send documents directly to your inbox from the share modal — email address input with `.md` file attached + share link; powered by Google Apps Script (free, 100 emails/day); Cloudflare Turnstile CAPTCHA verification; dual rate limiting (100/day global + 7/day per recipient); loading state + success/error feedback; email persisted in localStorage; zero third-party dependencies |
 | **💾 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`), EMA period (default 52), and card size via `data-height`; single cards auto-expand to full width; 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, 137+ templates (15 categories: AI, Agents, API Explorer, 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), auto-naming (Untitled files derive name from first 10 content characters) |
+| **Extras** | Auto-save (localStorage + cloud), table of contents, image paste, 137+ templates (16 categories: AI, Agents, API Explorer, Coding, Creative, Documentation, Finance, Games, Maths, PPT, Project, Quiz, Science, 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), auto-naming (Untitled files derive name from first 10 content characters) |
 | **Dev Tooling** | ESLint + Prettier (lint, format:check), Playwright test suite — 572 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, help mode, page view, table tools, API tag, Linux tag, template loading, inline rename, presentation, static analysis, code smell, XSS hardening, Florence-2 model, Docling model, GLM-OCR model, TTS download), Firestore rules validation (21 tests), automated security scanner (13 checks, 3 severity tiers), pre-commit changelog + security enforcement, GitHub Actions CI |
 | **🎥 RecStudio** | Full-screen screen & camera recorder with 4 modes (Screen only, Screen + Camera, Camera only, Whiteboard); Canvas-based compositing at 1920×1080 / 60fps; interactive teleprompter (draggable, resizable, font size A−/A+ 10–48px, scroll speed ◁/▷ 0.5x–5x, play/pause scroll, 3-level transparency toggle with readable text on any background); whiteboard with 7 tools (Pen, Highlighter, Eraser, Line, Rectangle, Ellipse, Text), 10 colors, undo/redo; PiP webcam with shape selector (Circle/Square/Full/Off); device selection dropdowns; countdown timer; recording timer; post-recording review + WebM download; all client-side via MediaRecorder + Canvas APIs |
 
@@ -548,6 +548,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-04-03** | — | 💾 **Offline Model Manager** — new Manager tab in AI model selector (Models \| Manager) with ZIP-based Export (reads all cached model files from Cache API, bundles into single `.zip` via built-in CRC32 + STORE-mode ZIP creator — zero external dependencies), Import (accepts `.zip` file, extracts entries, restores to browser Cache API via manifest URL mapping), and Delete (clears browser cache); per-model status badges (In browser cache / Downloaded to disk / Not downloaded) with actual cache sizes; button labels refactored from Download/Upload to Export/Import with `bi-box-arrow-down`/`bi-box-arrow-in-up` icons; Science template category added; works in all browsers — no File System Access API required |
 | **2026-04-03** | — | 🤖 **Qwen 3.5 XL (9B) Local Model** — added `textagent/Qwen3.5-9B-Onnx` (~16 GB) as the largest local multimodal Qwen model; supports vision (image-text-to-text); marked `requiresHighEnd`; placed after 4B in size progression (0.8B → 2B → 4B → 9B) |
 | **2026-04-03** | — | 🔌 **Connector AI Pipeline** — new "My Connectors" system for plugging third-party data sources into the AI assistant; Hacker News connector fetches top stories with full URLs, author metadata, self-post body text, and top community comments; connector toggle in AI panel header with green active indicator; unified parallel fetch pipeline (`Promise.all`) merges connector + web search context; grounding instruction header ("LIVE DATA...Answer using this data") forces models to use fetched data; **Fixed:** Gemma 4 E4B worker completely discarded `context` parameter — only `userPrompt` was used in the messages array; context now injected as `context + "\n---\nUser question: " + userText`; Gemma 4 system prompt enhanced with "data is real and live" grounding instruction; context trimmed to 6000 chars for WebGPU memory safety; connector label click bug fixed (`e.preventDefault()` stops checkbox toggle via event bubbling); `hasActiveConnectors()` decoupled from DOM — reads `localStorage` directly; auto-repair re-enables connected-but-paused connectors on init; default HN stories 10→5; connector registry extensible for Slack, Notion, GitHub, Confluence |
 | **2026-04-03** | — | 👁️ **Gemma 4 Vision Tag** — new `{{@Vision:}}` DocGen tag backed by Gemma 4 E2B/E4B running locally via WebGPU/WASM; `ai-worker-gemma4.js` Web Worker with `Gemma4Processor` instantiation (bypasses `AutoProcessor` which lacks `image_processor_type`) and system-prompt persona fix; primary `onnx-community/gemma-4-E2B-it-ONNX` with `textagent/gemma-4-E4B-it-ONNX` fallback; cyan-themed Vision card with 📷 camera capture + 📎 omni-modal upload (image/audio/video); **video frame extraction** — `extractVideoFrames()` seeks 4 evenly-spaced timestamps in a hidden `<video>` element, draws each to Canvas at max 1280px, stores as JPEG 0.85; audio stored as direct base64; upload handler detects Vision card type, sets `accept="image/*,audio/*,video/*"`; generation handler maps attachments to typed inputs and calls `switchToModel('gemma4-e2b')` before execution, restores prior model after; 👁️ Vision toolbar button in AI Tags dropdown; Fixed: Vision card double-rendering raw `@upload:` / `@prompt:` lines caused by broken `\\s*` regex (quadruple-escaped) — now correct `\s*`; removed duplicate static text row; `gemma4-e2b` / `gemma4-e4b` entries in `ai-models.js` with `isDocModel: true` + `supportsVision: true` |

changelogs/CHANGELOG-offline-model-manager.md

@@ -0,0 +1,57 @@
+# Offline Model Manager — ZIP Export/Import for Offline AI Models
+
+- Added Model Manager tab to the AI model selector dropdown (Models | Manager)
+- Export button bundles all cached model files into a single ZIP and downloads it (STORE mode, no compression — ONNX files don't compress)
+- Import button accepts a ZIP file (or raw files), extracts entries, and restores them into browser Cache API
+- Delete button clears cached model from browser to free storage
+- Per-model status badges: "In browser cache", "Downloaded to disk", "Not downloaded"
+- Cache size detection and display for each local model
+- Tab switching UI with sticky tab bar and active state styling
+- Created `ai-model-storage.js` module with HuggingFace API integration for file listing
+- Built-in CRC32 + ZIP file creator (STORE mode) — zero external dependencies
+- Manifest-based file tracking maps flat downloaded filenames to original cache URLs
+- Refactored button labels from Download/Upload to Export/Import with updated icons (`bi-box-arrow-down` / `bi-box-arrow-in-up`)
+- Fixed: `M._ai = {}` in ai-assistant.js was wiping modelStorage namespace → changed to `if (!M._ai) M._ai = {}`
+- Fixed: CSS was initially placed in `styles.css` (not loaded by Vite) → moved to `css/ai-panel.css`
+- Works in all modern browsers — no File System Access API dependency
+- Added Science template category button to template modal
+
+---
+
+## Summary
+Added a Model Manager tab to the AI model selector that lets users export cached local AI models as a single ZIP file and import them back into the browser cache. This enables offline model usage by providing a portable backup that survives browser cache evictions. Also added a Science template category.
+
+---
+
+## 1. Model Storage Module — ZIP Export/Import
+**Files:** `js/ai-model-storage.js`
+**What:** Rewrote the download/upload pipeline to use ZIP archives. Export reads all model files from Cache API, bundles them with a `__manifest.json` into a single ZIP (STORE mode via built-in CRC32 + ZIP creator — ONNX files don't benefit from compression). Import accepts a ZIP file, extracts entries, maps filenames back to cache URLs via the manifest, and restores them into `transformers-cache`. Also supports legacy raw file selection.
+**Impact:** Users get a single portable `.zip` file per model instead of dozens of individual file downloads. Re-importing is a one-click ZIP selection instead of manually selecting many files.
+
+## 2. Tabbed Model Selector UI
+**Files:** `js/modal-templates.js`, `js/ai-assistant.js`, `css/ai-panel.css`
+**What:** Added a two-tab interface (Models | Manager) to the model dropdown. The Models tab shows the existing model list; the Manager tab shows per-model storage cards with Export, Import, and Delete buttons. Refactored button labels and icons from Download/Upload to Export/Import (`bi-box-arrow-down` / `bi-box-arrow-in-up`). Includes sticky tab bar, status badges (cached/downloaded/none), size display, and progress indicators.
+**Impact:** Users can manage all local models from within the existing model selector without any additional UI surfaces.
+
+## 3. Module Integration
+**Files:** `src/main.js`, `js/ai-assistant.js`
+**What:** Added `ai-model-storage.js` to the Vite module load chain (Phase 3d, before ai-assistant.js). Fixed `M._ai = {}` overwrite bug that was destroying the modelStorage namespace by changing to `if (!M._ai) M._ai = {}`.
+**Impact:** The storage module loads before the AI assistant, ensuring the Manager tab can access export/import APIs on first render.
+
+## 4. Science Template Category
+**Files:** `js/modal-templates.js`
+**What:** Added a "Science" category button to the template modal category filter bar.
+**Impact:** Science-related templates are now discoverable via their own dedicated category pill.
+
+---
+
+## Files Changed (7 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/ai-model-storage.js` | +465 −340 | Rewritten: ZIP export/import, CRC32, STORE-mode ZIP creator |
+| `js/ai-assistant.js` | +208 −14 | Manager tab builder, Export/Import labels, M._ai fix |
+| `css/ai-panel.css` | +345 | Model Manager tab styles |
+| `js/modal-templates.js` | +13 −2 | Tabbed dropdown + Science category |
+| `src/main.js` | +1 | Module load entry |
+| `changelogs/CHANGELOG-offline-model-manager.md` | +60 | This changelog |