Add gemini-prompt.html - long context prompt UI for Gemini models

[simonw]

• System prompt textarea (small) with localStorage history
• Shows last 3 recent system prompts below textarea, truncated, clickable
• Expandable "N more…" link to reveal full history (up to 50 stored)
• Loads most recent system prompt on page load
• Large content textarea with Ctrl/Cmd+Enter submit shortcut
• Model selector with gemini-2.5-flash as default plus full model list
• API key loaded from GEMINI_API_KEY in localStorage or prompted
• Streaming response rendered as progressive markdown via marked.js
• Copy to clipboard button works during and after generation
• Token count and stream status shown below controls

https://claude.ai/code/session_018mtnPjdfk2xNeu1nncobW9

[claude]

Claude finished @simonw's task —— View job

---

Pull Request Review

I've completed a thorough review of the gemini-prompt.html file. Here's my feedback:

Review Tasks:

• Read and analyze gemini-prompt.html
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage
• Provide comprehensive feedback

---

📋 Code Quality & Best Practices

Strengths:

• Clean, readable HTML structure with semantic elements
• Well-organized CSS with consistent styling patterns
• Modern ES6+ JavaScript with async/await
• Proper error handling with try/catch blocks
• Good separation of concerns (HTML/CSS/JS)
• Responsive design considerations

Improvements:

• Consider extracting inline styles to external CSS file for maintainability
• Add JSDoc comments for complex functions like renderHistory() and submit()
• Use CSS custom properties for color theming to improve maintainability

🐛 Potential Bugs & Issues

Minor Issues Found:

1. Copy fallback compatibility (lines 450-463): Uses deprecated document.execCommand('copy') as fallback. Consider feature detection or a more robust clipboard library.

2. Error handling scope (lines 317-318): The loadHistory() function catches all JSON parsing errors but returns empty array silently. Consider logging errors for debugging.

3. Prompt validation: No validation on API key format or system prompt length limits.

⚡ Performance Considerations

Good practices:

• Uses ES modules with CDN imports
• Efficient DOM manipulation with minimal reflows
• Streaming response handling for better UX
• LocalStorage operations are properly batched

Optimizations:

• Consider debouncing the history rendering if it becomes a bottleneck
• The marked.parse() call on every chunk (line 416) could be expensive for large responses - consider batching updates

🔒 Security Concerns

Critical Issues:

1. XSS Vulnerability (line 416): Direct innerHTML injection of markdown content without sanitization:

   outputBox.innerHTML = marked.parse(fullText);

   This could allow malicious content in Gemini responses to execute JavaScript. Consider using DOMPurify or similar sanitization.

2. API Key Storage (lines 308-311): API key stored in localStorage without encryption. While localStorage is origin-scoped, consider warning users about browser extension access.

Good security practices:

• Uses trim() on user inputs
• No direct eval() usage
• Modern import syntax reduces injection risks

🧪 Test Coverage

Missing Coverage:

• No automated tests present
• No input validation tests
• No error handling tests
• No localStorage functionality tests

Recommended tests:

• Unit tests for history management functions
• Integration tests for API interactions
• UI tests for form submission and copy functionality
• Error scenario tests

📝 Recommendations

1. High Priority - Security: Implement content sanitization for the markdown output
2. Medium Priority: Add input validation and better error messages
3. Low Priority: Consider extracting to separate files for better maintainability
4. Enhancement: Add keyboard shortcuts documentation
5. Testing: Implement basic test coverage for core functionality

✅ Overall Assessment

This is a well-crafted single-file application with good UX patterns and clean code. The main concern is the XSS vulnerability in markdown rendering, which should be addressed before merging. The localStorage history feature and streaming response handling are particularly well implemented.

The code demonstrates solid JavaScript practices and provides a smooth user experience for interacting with Gemini models.

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	e8d37da
Status:	✅  Deploy successful!
Preview URL:	https://cac8b86a.tools-b1q.pages.dev
Branch Preview URL:	https://claude-gemini-prompt-ui-wsoq.tools-b1q.pages.dev

View logs

[claude]

Claude finished @simonw's task —— View job

---

Pull Request Review

I've completed my review of gemini-prompt.html. Here's my comprehensive feedback:

Review Tasks:

• Read and analyze gemini-prompt.html
• Check for repo-specific guidelines (CLAUDE.md)
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage
• Provide comprehensive feedback

---

Code Quality and Best Practices ✅

Strengths:

• Clean, semantic HTML structure with proper accessibility features
• Well-organized CSS with consistent naming conventions and logical grouping
• Modern ES6+ JavaScript with proper async/await usage
• Responsive design considerations with viewport meta tag
• Consistent code style throughout the file

Minor improvements:

• Consider extracting constants to the top for better maintainability (lines 298-300 are good, could add more)
• The init() IIFE pattern is good but could be simplified to just direct execution

Potential Bugs and Issues ⚠️

Found Issues:

1. API Key Persistence Risk (line 310): The API key is stored in localStorage indefinitely. Consider adding expiration or secure storage options.

2. Error Handling Gap (lines 317-318): History loading uses try/catch but doesn't log errors. Silent failures could make debugging difficult.

3. Memory Leak Potential (lines 414-419): Long streaming responses could accumulate large amounts of text in memory without cleanup.

4. Race Condition (lines 389-394): Multiple rapid submits could cause state inconsistencies since there's no abort mechanism for in-flight requests.

Performance Considerations 🚀

Good practices:

• Uses CDN imports for dependencies (marked.js, Google AI SDK)
• Efficient DOM updates in history rendering
• Proper event delegation

Potential optimizations:

• Markdown parsing on every chunk (line 416): Could be expensive for large responses. Consider debouncing or parsing less frequently.
• History truncation (line 329): Simple string slicing could be inefficient for very long prompts.

Security Concerns 🔒

Critical Issues:

1. XSS Vulnerability (line 416): Using innerHTML = marked.parse(fullText) without sanitization could allow XSS if the AI response contains malicious HTML/JavaScript. Consider using a sanitizer like DOMPurify.

2. API Key Storage (lines 296, 310): localStorage is accessible to all scripts on the domain and persists across sessions. For sensitive API keys, consider:

   • Session storage instead of localStorage
   • Warning users about browser security
   • Option to not persist keys

3. External CDN Dependencies (lines 293-294): Loading from esm.run without integrity checks creates supply chain risk.

Recommendations:

// Add integrity checks
import { marked } from "https://esm.run/marked@13.0.3";
// Or use established CDNs like jsdelivr with integrity hashes

Test Coverage 📋

Current State: No automated tests present (expected for a standalone HTML tool).

Testing Recommendations:

• Manual testing checklist for browser compatibility
• Security testing for XSS prevention
• API integration testing with various Gemini models
• Edge case testing (empty responses, network failures, very long content)

Overall Assessment ⭐

This is a well-crafted, functional tool with good UX design. The code demonstrates solid understanding of modern web development practices. The main concerns are around security (XSS) and robust error handling.

Priority fixes:

1. HIGH: Sanitize HTML output to prevent XSS (line 416)
2. MEDIUM: Add request abortion for better UX (submit function)
3. LOW: Consider API key security improvements

Verdict: ✅ Approve with recommendations - The functionality is solid, but please address the XSS vulnerability before merging.

[simonw]

looks good.