Changed code block max-width to use min() with both pixel and viewport units:
- Mobile: min(400px, 85vw)
- Desktop: min(850px, 70vw)
This ensures code blocks scale appropriately at all resolutions and never
cause horizontal overflow when resizing the browser window.
Replaced fixed pixel max-width values with 100% for pre and code elements.
Added box-sizing border-box to ensure padding is included in width calculation.
Code blocks now adapt to message bubble size while still scrolling when content is too wide.
Replaced justify-self with margin-left/right auto and width fit-content
to prevent messages from expanding the grid column and causing horizontal
scrollbars. User messages now align right and AI messages align left
without affecting each other's positioning.
Added max-width constraints to code blocks in AI messages:
- Mobile (< 768px): 340px max-width
- Desktop (≥ 768px): 720px max-width
Code blocks now get their own horizontal scrollbar when content is too wide,
preventing the modal from getting horizontal scrollbars. All code formatting
and whitespace is preserved.
- new groq-fetch.js provides groqAwareStreamingFetch for all API calls
- automatically detects Groq endpoints and handles TPM rate limits
- works for chat, translation, TTS - any request to Groq
- waits 60 seconds for TPM window reset, retries up to 3 times
- other platforms (Hermes, OpenAI, etc.) unaffected
- cleaner abstraction replaces inline retry logic in chat.js
- replace aggressive 1.5x buffer with smart model-based allocation
- 128k+ models: only 2k buffer (was wasting 10k+ tokens)
- 32k models: 1.5k buffer max
- 8k models: conservative buffer
- follow-up responses now have maximum room for both history and output
- especially important for long conversations on large context models
- reduce aggressive buffering that was leaving too little room for intro output
- reserve up to 1000 tokens or 30% of model capacity for intro generation
- increase minimum output tokens from 100 to 200
- should fix truncated intros especially on Groq models with 8K completion limits
- tabs now use neutral gray (inactive) and blue (active) instead of green
- prevents distraction from green translate button (call-to-action)
- inactive tabs: light gray background with dark gray text
- active tab: blue background with white text
- hover: slightly darker gray
- updated both builtin and pico CSS versions
- URL constructor was too strict and failing on valid domains
- new regex pattern validates common URL formats more permissively
- ensures scheme prepending works in both main logic and fetchRemotePageHTML
- fixes issues with domains like www.inrupt.com
- replace hardcoded "Hermes AI" with actual selected model
- progress now shows "Translating with <model-name>..."
- makes progress messages accurate for all model selections
- cap all max_tokens to model's max completion tokens limit
- fixes sendMessageWithCustomHistory in chat.js
- fixes intro generation in ui.js
- fixes TTS processing token calculation
- prevents "max_tokens must be less than or equal to 8192" errors
Fetch and store maxCompletionTokens from models endpoint to respect
each model's specific output limits. This fixes 400 errors from
Groq models that have different completion limits than context windows.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
When upstream tokenization fails (404, errors), cache the endpoint
and automatically use JS tokenizer for future requests. This fixes
chunking for APIs like Groq that don't have tokenize endpoints.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
