feat: add interactive periodic table Science template

- New Science template category with bi-atom icon
- Full 118-element periodic table (React + Babel html-autorun)
- Element detail view with Bohr model atom visualization
- Dark/light theme toggle, search, category filtering
- Left-aligned header controls (search + theme toggle)
- Lanthanide/actinide rows with labels

Author: ijbo

CHANGELOG-periodic-table.md

@@ -0,0 +1,39 @@
+# Periodic Table Template — Interactive Science Template
+
+- Added `science.js` template with full 118-element interactive periodic table (React + Babel, `html-autorun`)
+- Registered Science template category in `templates.js` with `bi-atom` icon and `technical` color group
+- Added `science.js` module import in `src/main.js` (Phase 2 template loading)
+- Periodic table features: element grid (18×10 layout), category color coding (11 types), search filter, category highlight filter
+- Element detail view with 4 tabbed sections: Overview, Properties, Structure, Uses & Hazards
+- Interactive Bohr model atom visualization with concentric orbit rings, animated electrons, and 3D nucleus cluster
+- Atom viz supports mouse drag (rotation + tilt) and scroll wheel (zoom 0.5×–1.5×)
+- Dark/light theme toggle with full theme system (30+ CSS tokens per theme)
+- Header controls (search + theme toggle) positioned left-aligned via `justifyContent: flex-start`
+- Lanthanide (57–71) and Actinide (89–103) rows displayed separately below main grid with row labels
+
+---
+
+## Summary
+Added a new Science template category with an interactive periodic table of elements. The template renders a complete 118-element periodic table as a React application using `html-autorun`, featuring element search, category filtering, detailed element views with Bohr model atom visualization, and dark/light theme switching.
+
+---
+
+## 1. Science Template Module
+**Files:** `js/templates/science.js`
+**What:** New template file containing a single "Periodic Table" template registered under the `science` category. The entire React application (118 elements with atomic data, interactive grid, detail views, atom visualization, theming) is embedded as an `html-autorun` code block string (~19 lines of JS wrapping a large HTML/React document).
+**Impact:** Users can now create an interactive periodic table document from the Templates modal under the Science category.
+
+## 2. Template System Registration
+**Files:** `js/templates.js`, `src/main.js`
+**What:** Added `window.__MDV_TEMPLATES_SCIENCE` to the template aggregation array, mapped `science` category to `technical` color group and `bi-atom` Bootstrap icon, and added the `science.js` dynamic import to Phase 2 module loading.
+**Impact:** Science templates appear in the template modal with a proper atom icon and are loaded with all other template modules during app initialization.
+
+---
+
+## Files Changed (3 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/templates/science.js` | +19 | New template module with interactive periodic table |
+| `js/templates.js` | +3 | Science category registration (array, color, icon) |
+| `src/main.js` | +1 | Science template dynamic import |

README.md

@@ -548,6 +548,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-04-05** | — | 🔬 **Interactive Periodic Table Template** — new Science template category (`bi-atom` icon) with full 118-element interactive periodic table; React + Babel `html-autorun` block; 18×10 grid layout with 11 color-coded element categories (nonmetal, noble gas, alkali, alkaline, transition, post-transition, metalloid, halogen, lanthanide, actinide, unknown); search filter and category highlight; element detail view with 4 tabbed sections (Overview, Properties, Structure, Uses & Hazards); interactive Bohr model atom visualization with concentric orbit rings, animated electrons, 3D nucleus cluster, mouse drag rotation/tilt, scroll zoom; dark/light theme toggle (30+ CSS tokens per theme); lanthanide (57–71) and actinide (89–103) rows with labels; left-aligned header controls |
 | **2026-04-04** | — | 🤖 **Agentic Tool Calling** — transitioned AI assistant from firehose context injection to **model-driven tool calling** for Groq cloud models; `buildToolDefinitions()` registers enabled connectors (Weather, HN, GitHub, Slack) + web search as OpenAI-format tools; model decides which tools to call via `tool_choice: 'auto'`; `executeToolCall()` runs tools in parallel; `handleToolCalls()` orchestrates two-pass generation (Pass 1: tool selection, Pass 2: synthesis with results); **query-relevance filter** (`queryNeedsConnectors()`) for local models — keyword-based gating prevents weather/news injection on general queries like "what is algebra?"; `extractLocationFromQuery()` with 5 extraction strategies (preposition patterns, weather patterns, capitalized words) for smart geocoding; softened grounding header allows general knowledge answers when connector data is irrelevant; Groq worker updated with non-streaming tool detection path and `rawMessages` for Pass 2; model-aware context budgets (4K local / 30K cloud); WebGPU buffer overflow translated to user-friendly error messages; model-size-aware context limits (0.8B→4K, 2B→8K, 4B+→32K chars) |
 | **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) |

changelogs/CHANGELOG-periodic-table.md

@@ -0,0 +1,39 @@
+# Periodic Table Template — Interactive Science Template
+
+- Added `science.js` template with full 118-element interactive periodic table (React + Babel, `html-autorun`)
+- Registered Science template category in `templates.js` with `bi-atom` icon and `technical` color group
+- Added `science.js` module import in `src/main.js` (Phase 2 template loading)
+- Periodic table features: element grid (18×10 layout), category color coding (11 types), search filter, category highlight filter
+- Element detail view with 4 tabbed sections: Overview, Properties, Structure, Uses & Hazards
+- Interactive Bohr model atom visualization with concentric orbit rings, animated electrons, and 3D nucleus cluster
+- Atom viz supports mouse drag (rotation + tilt) and scroll wheel (zoom 0.5×–1.5×)
+- Dark/light theme toggle with full theme system (30+ CSS tokens per theme)
+- Header controls (search + theme toggle) positioned left-aligned via `justifyContent: flex-start`
+- Lanthanide (57–71) and Actinide (89–103) rows displayed separately below main grid with row labels
+
+---
+
+## Summary
+Added a new Science template category with an interactive periodic table of elements. The template renders a complete 118-element periodic table as a React application using `html-autorun`, featuring element search, category filtering, detailed element views with Bohr model atom visualization, and dark/light theme switching.
+
+---
+
+## 1. Science Template Module
+**Files:** `js/templates/science.js`
+**What:** New template file containing a single "Periodic Table" template registered under the `science` category. The entire React application (118 elements with atomic data, interactive grid, detail views, atom visualization, theming) is embedded as an `html-autorun` code block string (~19 lines of JS wrapping a large HTML/React document).
+**Impact:** Users can now create an interactive periodic table document from the Templates modal under the Science category.
+
+## 2. Template System Registration
+**Files:** `js/templates.js`, `src/main.js`
+**What:** Added `window.__MDV_TEMPLATES_SCIENCE` to the template aggregation array, mapped `science` category to `technical` color group and `bi-atom` Bootstrap icon, and added the `science.js` dynamic import to Phase 2 module loading.
+**Impact:** Science templates appear in the template modal with a proper atom icon and are loaded with all other template modules during app initialization.
+
+---
+
+## Files Changed (3 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/templates/science.js` | +19 | New template module with interactive periodic table |
+| `js/templates.js` | +3 | Science category registration (array, color, icon) |
+| `src/main.js` | +1 | Science template dynamic import |

js/templates.js

@@ -21,6 +21,7 @@
     window.__MDV_TEMPLATES_FINANCE || [],
     window.__MDV_TEMPLATES_GAMES || [],
     window.__MDV_TEMPLATES_SKILLS || [],
+    window.__MDV_TEMPLATES_SCIENCE || [],
     window.__MDV_TEMPLATES_API_EXPLORER || [],
     window.__MDV_TEMPLATES_FORMS || [],
     window.__MDV_TEMPLATES_CHARTS || [],
@@ -68,6 +69,7 @@
       case 'api-explorer': return 'technical';
       case 'forms': return 'project';
       case 'charts': return 'technical';
+      case 'science': return 'technical';
       default: return 'doc';
     }
   }
@@ -91,6 +93,7 @@
       case 'api-explorer': return 'bi-plug';
       case 'forms': return 'bi-ui-checks-grid';
       case 'charts': return 'bi-bar-chart-line';
+      case 'science': return 'bi-atom';
       default: return 'bi-file-earmark';
     }
   }

js/templates/science.js

@@ -174,6 +174,7 @@ async function loadModules() {
         import('../js/templates/skills.js'),
         import('../js/templates/api-explorer.js'),
         import('../js/templates/forms.js'),
+        import('../js/templates/science.js'),
         import('../js/templates/charts.js'),
         import('../js/templates/charts-line-gallery.js'),
         import('../js/templates/charts-bar-gallery.js'),