feat: add Star on GitHub button in header

- Added gold/amber gradient ⭐ Star pill button next to Issues button
- .star-github-pill CSS class with dark mode variant
- Fixed Issues button inline styles overriding .help-mode-pill CSS
- Both Issues and Star buttons now render as proper full-size pills

Author: ijbo

README.md

@@ -548,6 +548,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-04-08** | — | ⭐ **Star on GitHub Button** — new gold/amber gradient pill button in header next to Issues button linking to the GitHub repo for starring; `.star-github-pill` CSS class with dark mode variant; fixed Issues button inline styles that prevented proper `.help-mode-pill` rendering |
 | **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 |

changelogs/CHANGELOG-star-github.md

@@ -0,0 +1,35 @@
+# Star on GitHub Button — Header CTA
+
+- Added ⭐ **Star on GitHub** pill button next to the Issues button in the header-left section
+- Star button uses gold/amber gradient (`#d97706` → `#f59e0b`) to visually distinguish from teal Help/Issues pills
+- Dark mode variant uses brighter gold tones (`#f59e0b` → `#fbbf24`)
+- Links to `https://github.com/Textagent/textagent.github.io` in new tab
+- Uses `bi-star-fill` Bootstrap icon
+- Fixed: Issues button inline styles overriding `.help-mode-pill` CSS (removed cramped `font-size:0.55rem`, `max-width:3.2rem`)
+- Both Issues and Star buttons now render as proper full-size pills matching the Help button
+
+---
+
+## Summary
+Added a ⭐ Star on GitHub pill button in the header next to the Issues button, with a distinct gold/amber gradient accent to encourage repository starring. Also fixed the existing Issues button which had inline styles preventing proper pill rendering.
+
+---
+
+## 1. Star on GitHub Button
+**Files:** `index.html`, `css/help-mode.css`
+**What:** Added `<a>` element with `help-mode-pill star-github-pill` classes linking to the GitHub repo. Created `.star-github-pill` CSS class with gold gradient and dark mode variants.
+**Impact:** Users see a visually prominent gold ⭐ Star button in the header, encouraging GitHub engagement directly from the app.
+
+## 2. Issues Button Fix
+**Files:** `index.html`
+**What:** Removed overly restrictive inline styles (`font-size:0.55rem`, `padding:2px 6px`, `max-width:3.2rem`) that were shrinking the Issues button into a tiny link instead of a proper pill.
+**Impact:** Issues button now renders at full pill size, matching the Help button's appearance.
+
+---
+
+## Files Changed (2 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `index.html` | +9 −5 | Added Star button, fixed Issues button inline styles |
+| `css/help-mode.css` | +18 −0 | Added `.star-github-pill` gold accent CSS with dark mode |

css/help-mode.css

@@ -2,6 +2,24 @@
    help-mode.css — Help Mode Toggle & Popover
    ============================================ */
 
+/* ── Star on GitHub Pill — gold accent ── */
+.star-github-pill {
+    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
+    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3) !important;
+}
+.star-github-pill:hover {
+    background: linear-gradient(135deg, #b45309, #d97706) !important;
+    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5) !important;
+}
+[data-theme="dark"] .star-github-pill {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
+    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
+}
+[data-theme="dark"] .star-github-pill:hover {
+    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
+    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6) !important;
+}
+
 /* ── Help Mode Pill Button (mirrors .demo-badge) ── */
 .help-mode-pill {
     display: inline-flex;

index.html

@@ -281,11 +281,17 @@
                     </button>
                     <a href="https://github.com/Textagent/textagent.github.io/issues" class="help-mode-pill"
                         title="Open Issues" target="_blank" rel="noopener noreferrer"
-                        style="text-decoration:none;color:inherit;font-size:0.55rem;padding:2px 6px;gap:2px;white-space:normal;text-align:center;line-height:1.1;max-width:3.2rem">
-                        <i class="bi bi-bug"></i> <span>Open Issues</span>
+                        style="text-decoration:none;">
+                        <i class="bi bi-bug"></i> <span>Issues</span>
+                    </a>
+                    <a href="https://github.com/Textagent/textagent.github.io" id="star-github-btn" class="help-mode-pill star-github-pill"
+                        title="⭐ Star on GitHub" target="_blank" rel="noopener noreferrer"
+                        style="text-decoration:none;">
+                        <i class="bi bi-star-fill"></i> <span>Star</span>
                     </a>
                 </div>
 
+
                 <!-- Center section: View Mode Buttons -->
                 <div class="view-mode-group d-none d-xl-flex" role="group" aria-label="View mode">
                     <button class="view-mode-btn" data-mode="editor" aria-pressed="false" title="Editor only">