🤖 Agentic Chat

• Natural Language → Code — Ask a question or describe a task in plain English; GPT-4o returns JavaScript that gets executed automatically
• Sandboxed Execution — Generated code runs in an <iframe sandbox="allow-scripts"> with no access to the parent page's DOM, cookies, localStorage, or variables
• Content Security Policy — The sandbox iframe enforces default-src 'none'; connect-src https: so code can call external APIs but nothing else
• Nonce Validation — Each execution gets a crypto.randomUUID() nonce to prevent stale or replayed postMessage events
• Multi-Model Support — Switch between GPT-4o, GPT-4o-mini, GPT-4-turbo, and more via the model selector
• API Key Management — Detects YOUR_API_KEY placeholders in generated code and prompts for credentials per domain; keys are cached per session

• Conversation History — Maintains a sliding window of up to 20 message pairs with automatic trimming and token-count warnings
• Multi-Session — Create, switch between, rename, and delete multiple conversation sessions with auto-save
• Cross-Tab Sync — Detects concurrent edits across browser tabs via BroadcastChannel
• Conversation Fork — Branch conversations from any message into new sessions
• Chapters — Insert named section dividers with a table-of-contents sidebar
• Tags — Colored tag labels on sessions with filtering and management
• Auto-Tagger — Heuristic topic detection and automatic tag suggestions

• Message Search — Full-text search across conversation messages with highlighting
• Global Session Search — Search across all saved sessions at once
• Conversation Timeline — Visual minimap sidebar for conversation navigation
• Bookmarks & Pinning — Bookmark messages for quick reference; pin important ones to a floating bar
• Slash Commands — /-triggered command dropdown with autocomplete and keyboard navigation

• Prompt Templates — Built-in library of categorized prompt templates with search filtering
• Snippet Library — Save, tag, search, rename, and re-run generated code snippets
• Quick Replies — Contextual follow-up suggestion chips after AI responses
• Formatting Toolbar — Markdown formatting buttons above the chat input
• Scratchpad — Persistent notepad panel with copy/insert/download actions
• Input History — Navigate previous prompts with ↑/↓ arrow keys
• File Drop Zone — Drag-and-drop file inclusion (text-based files, 100 KB limit)
• Focus Mode — Distraction-free zen mode (Ctrl+Shift+F)

• Chat Stats — Conversation analytics: word counts, code blocks, response timing
• Cost Dashboard — Persistent API spend tracker with budget alerts and daily chart
• Message Diff — Compare any two messages with visual line-level diff
• Conversation Summarizer — Heuristic summary with topics, decisions, and action items
• Response Time Badge — Per-response latency indicator

• Persona Presets — Switchable system prompt presets with custom persona support
• Theme Manager — Dark/light theme with OS preference detection
• Keyboard Shortcuts — Global shortcuts with help modal
• Voice Input — Browser speech recognition with language selection
• Read Aloud — Text-to-speech for messages with voice/speed controls

• Message Annotations — Private notes/annotations on messages with labels
• Message Reactions — Per-message emoji reactions with persistent counts
• Data Backup — Full backup/restore for all 21 data keys (export/import/selective/merge)
• Zero Dependencies — Single HTML file + CSS + JS. No build tools, no npm, no bundler. Just open and go.
• Input Guardrails — Character limit (50K chars), token estimate warnings (~80K threshold), real-time counter

• Response Rating — Thumbs up/down ratings on AI responses with model satisfaction dashboard
• Smart Retry — Automatic retry with exponential backoff for transient API failures
• Message Editor — Edit and resend user messages (truncates history and reloads into input)
• Message Translator — Inline message translation to 20+ languages via OpenAI API
• Conversation Merge — Combine 2+ sessions into one merged conversation with chronological interleaving
• Conversation Replay — Message-by-message playback with transport controls (play/pause/speed)
• Prompt Library — User-created prompt snippets with folders, search, usage tracking, import/export
• Usage Heatmap — GitHub-style 7x24 activity heatmap across all sessions
• Word Cloud Generator — interactive word frequency cloud from conversation with 5 color schemes, PNG download (Alt+W)

• A modern web browser (Chrome, Firefox, Safari, Edge)
• An OpenAI API key with GPT-4o access

1. Open index.html in your browser — or visit the live demo
2. Paste your OpenAI API key into the key field (stored in memory only, never persisted)
3. Type a question or task and press Enter
4. Watch the generated code and its output appear in the console area

> "What's the current UTC time?"
→ GPT-4o generates: return new Date().toUTCString();
→ Output: Fri, 14 Feb 2026 10:00:00 GMT

> "Fetch the top Hacker News story"
→ GPT-4o generates fetch() code targeting the HN API
→ Output: { title: "...", url: "..." }

User Prompt  →  GPT-4o (system prompt: reply with JS only)
                    ↓
             Markdown response with ```js code block
                    ↓
             Regex extraction of JavaScript
                    ↓
             Sandboxed iframe execution
                    ↓
             postMessage with nonce-validated result
                    ↓
             Display output in console area

1. A system prompt instructs GPT-4o to respond exclusively with JavaScript in a fenced code block
2. The app extracts the code using regex and delivers it to a sandboxed iframe via postMessage (not template interpolation — preventing script-tag injection)
3. The iframe executes the code with new Function() inside an async wrapper
4. Results are returned via postMessage with origin validation ('null' for sandboxed iframes) and nonce matching

The codebase is organized into 49 IIFE modules in app.js, each using the revealing-module pattern:

The app executes AI-generated code, so security is a first-class concern:

• Outbound HTTPS is allowed — The sandbox CSP includes connect-src https: so LLM-generated code can call external APIs. This is required for the core use case but means sandbox code can make network requests.
• Service API keys are injectable — When you provide a third-party API key (e.g., weather API), it's injected into sandbox code. A prompt injection attack could theoretically exfiltrate it. Your OpenAI key is safe (parent page only).

agenticchat/
├── index.html              # Single-page UI with CSP headers
├── app.js                  # All application logic (48 modular IIFEs)
├── style.css               # Responsive dark-theme styling
├── package.json            # npm metadata + test scripts
├── jest.config.js          # Jest test configuration
├── Dockerfile              # Multi-stage container build
├── CONTRIBUTING.md         # Contribution guidelines
├── LICENSE                 # MIT License
├── README.md               # This file
├── docs/
│   └── index.html          # API reference & architecture docs (GitHub Pages)
├── tests/
│   ├── setup.js                  # DOM mocking & app.js loader for jsdom
│   ├── app.test.js               # Core module tests (800+)
│   ├── annotations.test.js       # MessageAnnotations tests
│   ├── auto-tagger.test.js       # AutoTagger tests
│   ├── chapters.test.js          # ConversationChapters tests
│   ├── conversation-merge.test.js # ConversationMerge tests
│   ├── conversation-replay.test.js # ConversationReplay tests
│   ├── conversation-tags.test.js # ConversationTags tests
│   ├── cost-dashboard.test.js    # CostDashboard tests
│   ├── data-backup.test.js       # DataBackup tests
│   ├── formatting-toolbar.test.js # FormattingToolbar tests
│   ├── message-editor.test.js    # MessageEditor tests
│   ├── message-translator.test.js # MessageTranslator tests
│   ├── messagediff.test.js       # MessageDiff tests
│   ├── model-compare.test.js     # ModelCompare tests
│   ├── modules.test.js           # Module existence/integration tests
│   ├── pinning.test.js           # MessagePinning tests
│   ├── prompt-library.test.js    # PromptLibrary tests
│   ├── readaloud.test.js         # ReadAloud tests
│   ├── response-rating.test.js   # ResponseRating tests
│   ├── smart-retry.test.js       # SmartRetry tests
│   ├── summarizer.test.js        # ConversationSummarizer tests
│   ├── timeline.test.js          # ConversationTimeline tests
│   └── usageHeatmap.test.js      # UsageHeatmap tests
└── .github/
    ├── copilot-instructions.md    # Copilot coding agent context
    ├── copilot-setup-steps.yml    # Copilot agent setup workflow
    ├── dependabot.yml             # Automated dependency updates
    ├── labeler.yml                # Auto-label configuration
    ├── PULL_REQUEST_TEMPLATE.md   # PR template
    ├── ISSUE_TEMPLATE/
    │   ├── bug_report.yml         # Bug report form
    │   ├── feature_request.yml    # Feature request form
    │   └── config.yml             # Issue template config
    └── workflows/
        ├── ci.yml                 # Build + test + lint
        ├── codeql.yml             # CodeQL security scanning
        ├── docker.yml             # Docker build & push
        ├── labeler.yml            # Auto-labeler workflow
        ├── pages.yml              # GitHub Pages deployment
        ├── publish.yml            # npm package publishing
        └── stale.yml              # Stale issue/PR management

Requirements: All browsers must support crypto.randomUUID() (HTTPS or localhost only), iframe sandbox, and BroadcastChannel. No polyfills needed for modern browsers.

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to your branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• This is a single-file app — keep it that way unless there's a compelling reason to split
• All 49 modules live in app.js as revealing-module IIFEs
• Security is paramount — any change that touches the sandbox must be reviewed carefully
• Test with various prompt types before submitting (simple questions, API calls, error cases)

Distributed under the MIT License. See LICENSE for details.