Skip to content

Commit 0aeff80

Browse files
committed
feat: agent panel floating toggle & auto-naming from content
- Agent Containers panel accessible when header fully hidden via floating toggle button - Floating toggle positioned next to restore pill, 35% opacity, reveals on hover - QAB Agents item wired to panel toggle - Badge count synced across header and floating buttons - Untitled files auto-derive name from first 10 content chars (debounced 400ms) - Auto-naming skipped for manually renamed files and disk mode - Added demo-showcase template
1 parent 656b131 commit 0aeff80

File tree

7 files changed

+327
-10
lines changed

7 files changed

+327
-10
lines changed

CHANGELOG-agent-panel-workspace.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Agent Panel Floating Toggle & Auto-Naming — UX Improvements
2+
3+
- Agent Containers panel now accessible when header is fully hidden (level 2) via a floating toggle button
4+
- Floating toggle button positioned next to the restore pill with 35% resting opacity, fully reveals on hover
5+
- QAB "Agents" dropdown item now wires directly to Agent Panel toggle
6+
- Badge count synced across header button and floating button (both update simultaneously)
7+
- Workspace files named "Untitled" now auto-derive their name from the first 10 characters of content
8+
- Auto-naming strips leading `#` headings, keeps only ASCII letters and spaces, appends `.md`
9+
- Auto-naming is debounced (400ms) and skipped for manually renamed files and disk-mode files
10+
- Empty content reverts file name back to "Untitled.md"
11+
- Added demo-showcase template asset
12+
13+
---
14+
15+
## Summary
16+
17+
Two UX improvements: (1) the Agent Containers panel is now reachable even when the full header is hidden, via a floating pill-style toggle button that mirrors the header badge count; (2) workspace files auto-derive their name from content, eliminating the need to manually rename "Untitled" files.
18+
19+
---
20+
21+
## 1. Agent Panel Floating Toggle
22+
**Files:** `css/agent-panel.css`, `js/agent-panel.js`
23+
**What:** Added a fixed-position floating button (`agent-panel-floating-toggle`) that appears only when `body.header-hidden` is active (header visibility level 2). The button includes a synced badge showing the count of running containers. The QAB "Agents" dropdown item is also wired to toggle the panel. Badge update logic refactored to iterate over both `agent-badge` and `floating-agent-badge` IDs.
24+
**Impact:** Users can now access the Agent Containers panel without restoring the full header, maintaining the distraction-free writing experience while keeping container management accessible.
25+
26+
## 2. Auto-Naming from Content
27+
**Files:** `js/workspace.js`
28+
**What:** Added `autoNameFromContent()` function that listens to editor `input` events (debounced 400ms). When the active file is named "Untitled.md" and hasn't been manually renamed, it extracts the first 10 ASCII-letter characters from content (stripping leading `#` headings) and sets the file name. A `manuallyRenamed` map tracks files that were explicitly renamed by the user, preventing auto-naming from overriding intentional names. Clearing content reverts the name to "Untitled.md".
29+
**Impact:** New files automatically get meaningful names as users type, reducing friction in multi-file workflows without interfering with intentional renames.
30+
31+
## 3. Demo Showcase Template
32+
**Files:** `public/assets/templates/demo-showcase.md`
33+
**What:** New template asset file for the demo showcase.
34+
**Impact:** Provides a pre-built template for showcasing features.
35+
36+
---
37+
38+
## Files Changed (4 total)
39+
40+
| File | Lines Changed | Type |
41+
|------|:---:|------|
42+
| `css/agent-panel.css` | +35 | Floating toggle button styles |
43+
| `js/agent-panel.js` | +32 −8 | QAB wiring, floating button, synced badges |
44+
| `js/workspace.js` | +50 | Auto-naming from content |
45+
| `public/assets/templates/demo-showcase.md` | +new | Demo showcase template |

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
| **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 password minimum, sandboxed code execution, Cloudflare Turnstile CAPTCHA on email endpoint, automated security scanner (`scripts/security-check.sh`) with pre-commit integration |
3939
| **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, AI diagram generation with per-card model selector + 🚀 Generate, robust JSON repair for local models, Insert/PNG/SVG export, 📚 Library Browser with 29 bundled packs in 6 categories), `{{@Tools:}}` web tools (Jina Reader scrape + Jina Search, multi-URL scraping, API key modal, Accept/Reject/Copy results) — `@` 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 |
4040
| **🔌 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 |
41-
| **🔗 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; `@cloud: yes/no` with ☁️ Cloud / 🖥️ Local badge; `@agenttype:` dropdown selector (openclaw/openfang) for external agents; Docker-based local execution via `agent-runner/server.js`; Agent Execution Settings UI (Codespaces/Local Docker/Custom endpoint); GitHub Codespaces cloud execution via ☁️ toggle; **📦 Agent Containers panel** — floating toolbar panel showing running Docker containers with live status, uptime, instant stop (`docker rm -f`), badge count, daemon readiness check, and startup container recovery |
41+
| **🔗 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; `@cloud: yes/no` with ☁️ Cloud / 🖥️ Local badge; `@agenttype:` dropdown selector (openclaw/openfang) for external agents; Docker-based local execution via `agent-runner/server.js`; Agent Execution Settings UI (Codespaces/Local Docker/Custom endpoint); GitHub Codespaces cloud execution via ☁️ toggle; **📦 Agent Containers panel** — floating toolbar panel showing running Docker containers with live status, uptime, instant stop (`docker rm -f`), badge count, daemon readiness check, startup container recovery, and floating toggle accessible when header is fully hidden |
4242
| **🔍 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 |
4343
| **🎮 Game Builder** | `{{@Game:}}` tag — AI-generated games (Canvas 2D / Three.js / P5.js) or instant pre-built games via `@prebuilt:` field (chess, snake, shooter, pong, breakout, maths quiz, hiragana, kana master); engine selector pills; per-card model picker; CDN URL normalizer for CSP compliance; auto model-ready check before generation; 📋 Import button for pasting/uploading external HTML game code with source viewer; 📥 Export as standalone HTML; ⛶ fullscreen; single-line field parsing; "Games for Kids" template with 8 playable games |
4444
| **🐧 Linux Terminal** | `{{Linux:}}` tag — two modes: (1) Terminal mode opens full Debian Linux ([WebVM](https://webvm.io)) in new window with `Packages:` field; (2) Compile & Run mode (`Language:` + `Script:`) compiles/executes 25+ languages (C++, Rust, Go, Java, Python, TypeScript, Kotlin, Scala…) via [Judge0 CE](https://ce.judge0.com) with inline output, execution time & memory stats |
@@ -47,7 +47,7 @@
4747
| **✉️ 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 |
4848
| **💾 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) |
4949
| **📈 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 |
50-
| **Extras** | Auto-save (localStorage + cloud), table of contents, image paste, 136+ 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) |
50+
| **Extras** | Auto-save (localStorage + cloud), table of contents, image paste, 136+ 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), auto-naming (Untitled files derive name from first 10 content characters) |
5151
| **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 |
5252

5353
## 🤖 AI Assistant
@@ -538,6 +538,8 @@ TextAgent has undergone significant evolution since its inception. What started
538538

539539
| Date | Commits | Feature / Update |
540540
|------|---------|-----------------:|
541+
| **2026-03-23** | | 📝 **Auto-Naming from Content** — workspace files named "Untitled" now auto-derive their filename from the first 10 ASCII characters of content; strips leading `#` headings; debounced 400ms on editor input; skipped for manually renamed files and disk-mode files; empty content reverts to "Untitled.md"; `manuallyRenamed` map prevents overriding intentional renames |
542+
| **2026-03-23** | | 📦 **Agent Panel Floating Toggle** — Agent Containers panel now accessible when header is fully hidden (level 2) via a floating pill-style button next to the restore pill; 35% resting opacity with full reveal on hover; QAB "Agents" item wired to panel toggle; badge count synced across header button and floating button |
541543
| **2026-03-23** | | 🏷️ **Custom Named Share Links** — users can now provide a custom name (e.g. `mynotes`) when sharing, producing clean URLs like `#s=mynotes`; custom name input added to Share Options modal (Quick Share + Secure Share) and LLM Memory "Share as Link" card; case-insensitive uniqueness enforced via Firestore (`validateSlug()` with `/^[a-z0-9][a-z0-9-]{0,48}[a-z0-9]$/` regex); 18 reserved words blocked (`js`, `css`, `index`, `admin`, etc.); inline error message for unavailable names; empty field falls back to auto-generated short IDs |
542544
| **2026-03-23** | | 🛠️ **Web Tools Tag** — new `{{@Tools:}}` tag system for in-document web scraping and search; `@scrape:` mode fetches URL content as clean Markdown via [Jina Reader API](https://jina.ai/reader/) (`r.jina.ai`); `@search:` mode performs web search via [Jina Search API](https://jina.ai/search/) (`s.jina.ai`); multi-URL scraping with comma-separated URLs (auto-prepends `https://`); interactive preview card with Scrape/Search action pills, textarea input, ▶ Run button; 🔑 API key modal (localStorage) for higher rate limits (500 vs 20 RPM); Accept/Reject/Copy result flow; `tools-docgen.js` standalone module (Phase 3k); `tools-docgen.css` with cyan theme + dark mode; toolbar buttons (🔗 Scrape, 🔍 Search in Tools group); composer chips; CSP updated for Jina domains; textarea focus tracking prevents re-render loop during editing |
543545
| **2026-03-22** | | 🔗 **Compact Share Links** — share URLs reduced from ~111 chars to ~36 chars; new `#s=<shortId>` format with `generateShortId()` (epoch_base36 + 5 random alphanumeric chars) and `createCompactShare()` reusable function; encryption key stored server-side in Firestore (`k` field); collision-safe ID generation with retry; `loadSharedMarkdown()` handles both compact `#s=` and legacy `#id=...&k=...` formats; `cloudAutoSave()` updated for compact format; LLM Memory export uses same compact flow; Firestore rules updated to allow `k` field; secure (passphrase) shares remain zero-knowledge and unaffected |
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Agent Panel Floating Toggle & Auto-Naming — UX Improvements
2+
3+
- Agent Containers panel now accessible when header is fully hidden (level 2) via a floating toggle button
4+
- Floating toggle button positioned next to the restore pill with 35% resting opacity, fully reveals on hover
5+
- QAB "Agents" dropdown item now wires directly to Agent Panel toggle
6+
- Badge count synced across header button and floating button (both update simultaneously)
7+
- Workspace files named "Untitled" now auto-derive their name from the first 10 characters of content
8+
- Auto-naming strips leading `#` headings, keeps only ASCII letters and spaces, appends `.md`
9+
- Auto-naming is debounced (400ms) and skipped for manually renamed files and disk-mode files
10+
- Empty content reverts file name back to "Untitled.md"
11+
- Added demo-showcase template asset
12+
13+
---
14+
15+
## Summary
16+
17+
Two UX improvements: (1) the Agent Containers panel is now reachable even when the full header is hidden, via a floating pill-style toggle button that mirrors the header badge count; (2) workspace files auto-derive their name from content, eliminating the need to manually rename "Untitled" files.
18+
19+
---
20+
21+
## 1. Agent Panel Floating Toggle
22+
**Files:** `css/agent-panel.css`, `js/agent-panel.js`
23+
**What:** Added a fixed-position floating button (`agent-panel-floating-toggle`) that appears only when `body.header-hidden` is active (header visibility level 2). The button includes a synced badge showing the count of running containers. The QAB "Agents" dropdown item is also wired to toggle the panel. Badge update logic refactored to iterate over both `agent-badge` and `floating-agent-badge` IDs.
24+
**Impact:** Users can now access the Agent Containers panel without restoring the full header, maintaining the distraction-free writing experience while keeping container management accessible.
25+
26+
## 2. Auto-Naming from Content
27+
**Files:** `js/workspace.js`
28+
**What:** Added `autoNameFromContent()` function that listens to editor `input` events (debounced 400ms). When the active file is named "Untitled.md" and hasn't been manually renamed, it extracts the first 10 ASCII-letter characters from content (stripping leading `#` headings) and sets the file name. A `manuallyRenamed` map tracks files that were explicitly renamed by the user, preventing auto-naming from overriding intentional names. Clearing content reverts the name to "Untitled.md".
29+
**Impact:** New files automatically get meaningful names as users type, reducing friction in multi-file workflows without interfering with intentional renames.
30+
31+
## 3. Demo Showcase Template
32+
**Files:** `public/assets/templates/demo-showcase.md`
33+
**What:** New template asset file for the demo showcase.
34+
**Impact:** Provides a pre-built template for showcasing features.
35+
36+
---
37+
38+
## Files Changed (4 total)
39+
40+
| File | Lines Changed | Type |
41+
|------|:---:|------|
42+
| `css/agent-panel.css` | +35 | Floating toggle button styles |
43+
| `js/agent-panel.js` | +32 −8 | QAB wiring, floating button, synced badges |
44+
| `js/workspace.js` | +50 | Auto-naming from content |
45+
| `public/assets/templates/demo-showcase.md` | +new | Demo showcase template |

css/agent-panel.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,3 +245,38 @@
245245
[data-theme="dark"] .agent-panel-footer {
246246
border-color: #30363d;
247247
}
248+
249+
/* Floating toggle button — visible only when header fully hidden (level 2) */
250+
.agent-panel-floating-toggle {
251+
position: fixed;
252+
top: 6px;
253+
/* Place to the right of the restore pill */
254+
left: calc(50% + 70px);
255+
z-index: 999;
256+
display: none;
257+
align-items: center;
258+
gap: 5px;
259+
padding: 4px 10px;
260+
background-color: var(--header-bg);
261+
color: var(--text-color);
262+
border: 1px solid var(--border-color);
263+
border-radius: 100px;
264+
font-size: 0.82rem;
265+
cursor: pointer;
266+
opacity: 0;
267+
transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
268+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
269+
pointer-events: none;
270+
}
271+
272+
body.header-hidden .agent-panel-floating-toggle {
273+
display: inline-flex;
274+
opacity: 0.35;
275+
pointer-events: auto;
276+
}
277+
278+
body.header-hidden .agent-panel-floating-toggle:hover {
279+
opacity: 1;
280+
transform: translateY(1px);
281+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
282+
}

0 commit comments

Comments
 (0)