Update TTS implementation to fetch available voices from the API and
support multiple TTS models:
- Add VOICES_API_URL constant for /v1/voices endpoint
- Create populateVoiceDropdown() to dynamically populate voice options
- Group voices by model using optgroups in the dropdown
- Implement voice fetching with localStorage caching (1 minute)
- Update speakText() to parse model:voice from dropdown value
- Update speakTextQueued() to use dynamic model and voice
- Add backward compatibility for legacy voice-only format
- Update both desktop and mobile voice selectors
- Add fallback to tts-1:onyx if voice fetch fails
Voice dropdown now displays all available models (tts-1, tts-1-hd,
tts-1-silero, tts-1-kokoro) with their respective voices organized
by optgroups for better UX.
- Textarea now automatically expands as user types multiline messages
- Resets to minimum height after message is sent
- CSS: Set min-height (60px) and max-height (400px) with auto overflow
- Removed fixed rows attribute to allow dynamic height
- Disabled manual resize to prevent user confusion
- Provides better UX for composing longer messages
Move all CSS from base.html to static/css/style.css for better:
- Separation of concerns
- Browser caching
- Maintainability
- Code organization
Changes:
- Created static/css/style.css with all application styles
- Updated base.html to link to external stylesheet
- Reduced base.html from ~980 to ~407 lines
Add custom scrollbar styles that properly match dark and light themes:
- Webkit browsers: styled scrollbars with theme-appropriate colors
- Firefox: thin scrollbars with matching color scheme
- Dark mode: darker gray scrollbars that blend with the UI
- Light mode: light gray scrollbars for better visibility
Added CSS variables for link colors with better contrast:
- Light mode: #0066cc (normal), #004499 (hover)
- Dark mode: #58a6ff (normal), #79b8ff (hover)
Applied general link styling rules that adapt to both themes,
ensuring links are clearly visible and distinguishable in dark mode.
Added CSS variables for code execution result colors that adapt to theme:
- --text-info: Blue for informational text (language labels)
- --text-success: Green for successful output
- --text-error: Red for errors and warnings
Updated JavaScript to use CSS variables instead of hard-coded colors,
ensuring proper contrast and readability in both light and dark modes.
- Switch from default highlight.js theme to GitHub themes
- Use github-dark theme for dark mode with better color contrast
- Use github theme for light mode
- Dynamically switch themes when user toggles dark/light mode
- Apply correct theme on page load based on saved preferences
- Moved all theme-related inline styles to CSS rules
- Created proper selectors for labels, inputs, and buttons
- Added utility-belt class to mobile menu for consistent styling
- Removed redundant inline style attributes
- Added CSS variables for light and dark themes
- Implemented theme toggle buttons in both desktop sidebar and mobile menu
- Added JavaScript logic to switch themes and persist choice in localStorage
- Applied dark theme styling to all UI elements including code blocks
- Theme is applied immediately on page load to prevent flash
- Switch from sync /execute to async /execute/async with polling
- Poll intervals: 300ms, 750ms, 1450ms, 2350ms, 3000ms, 4600ms, 6600ms+
- Show cancel button after 3 seconds if job still running
- Display partial output when cancelled or timed out
- Add Copy and Run buttons to bottom of truncated code blocks (next to Show More)
- Prevents accidental cancels and DoS from spam-clicking
- Add copy button after edit button for all messages
- Fix model/voice settings persistence when creating new rooms
- Save model/voice selections to localStorage for better state management
- Ensure settings are loaded from localStorage if not in URL parameters
Voice Persistence:
- Add voice/model saving to localStorage for persistent settings
- Load voice from URL → localStorage → default priority order
- Voice selection now persists across browser sessions and page refreshes
Dynamic Room Links:
- Add updateRoomLinksWithCurrentParams() function to update sidebar room links
- Room links now dynamically update with current username, model, and voice settings
- Both desktop and mobile room links stay synchronized with current parameters
- Fixes issue where clicking room links would lose user's current settings
Technical improvements:
- Enhanced syncInputsAndQueryString() to save to localStorage and update room links
- Initial sync call on page load ensures proper state from the start
- Maintains backwards compatibility with existing functionality
- Add username field to right sidebar and mobile modal with 'guest' default
- Implement real-time username sync with URL query string updates
- Add opencompletion.com button and new room creation in left sidebar
- Implement room name slugification (e.g. "a whole new world" → "a-whole-new-world")
- Create shared utils.js for common functions like slugify
- Add single search result auto-redirect functionality
- Remove redundant UI elements ("Create New Room" header, docs link)
- Preserve user settings (username, model, voice) across redirects and room creation
Technical improvements:
- Consolidated duplicate code into shared utility functions
- Enhanced search logic with parameter preservation
- Improved mobile/desktop sync for all input fields
- Better URL handling and query string management
- Separate username/model header from message content using distinct DOM elements
- Fix button positioning to appear on left side of messages
- Ensure TTS only reads clean message content, not username/model header
- Add support for stopping current TTS when auto-play is toggled off
- Improve DOM structure with message-body wrapper for proper layout
- Fix streaming messages to maintain header display throughout entire stream
Backend changes:
- Send username, model_name, and is_first_chunk as separate fields
- Keep actual content separate from header formatting
- Cleaner separation of concerns in streaming protocol
Frontend changes:
- Build display content with header only for visual rendering
- Keep messageBuffers clean (content only) for TTS processing
- TTS now processes pure content without username headers
This fixes the issue where TTS was reading 'fxhp (model):' prefix
- Fixed querySelector to find Play button specifically, not first button
- Regular messages used Array.from().find() correctly
- Streaming messages were using querySelector('button') which found Delete button
- This explains why streamed messages never got added to TTS queue
- Added console.log statements to streaming TTS logic
- Will help identify why streamed messages aren't being added to TTS queue
- Debug info includes autoPlayTTS state, completion status, buffer content
Major improvements to battleship game feedback accuracy and user experience:
## New Multi-Prompt Feedback System
- Replaced single feedback with 3 specialized prompts: Shot Report, Ship Status, Game Over
- Each prompt has individual metadata filtering to see only relevant data
- Shot Report only sees hit/miss data, Ship Status only sees ship destruction data
- Added STFU token system to suppress empty messages (filtered out automatically)
## Technical Implementation
- Added per-prompt metadata_filter support in YAML structure
- Updated app.py and guarded_ai.py to handle prompt-specific filtering
- Legacy single-prompt system still works with transition-level filtering
- Added comprehensive test suite for feedback system validation
## User Experience Fixes
- Fixed TTS queue blocking JavaScript execution (async promises instead of await)
- Ship Status now correctly reports who destroyed which ship (role confusion fixed)
- Game Over only appears when game actually ends (no more random messages)
- Maintained dramatic storytelling while ensuring factual accuracy
## Battleship-Specific Improvements
- Ship destruction messages only appear when ships actually sink
- Clear separation of concerns: hits/misses vs ship destruction vs game over
- Eliminated false positive ship destruction reports
- Fixed role reversal where wrong player got credit for destruction
The battleship narrator now provides accurate, contextual feedback while preserving the dramatic naval warfare atmosphere.
- Fix battleship feedback perspective confusion with better Hermes prompting
- Add auto-play TTS button with localStorage persistence and queueing system
- Move activity controls below model/voice selectors in sidebar
- Add activity controls to mobile hamburger menu
- Fix model/activity dropdowns to stay within container bounds
- Filter activities API to only show .yaml/.yml files
- Clean up system message labels by moving to usernames (System (Feedback), System (Question))
- Apply black formatting to app.py
The app seems to queue the category, feedback/content_blocks question
The strange part is the set_background happens in the middle of the
script after category but it comes first and FAST! In about a second
while the other messages take about 4 secs to finally arrive.
modified: app.py
modified: research/activity29-battleship.yaml
modified: templates/chat.html
