The useEffect was re-running every time model changed, causing
Claude model selection to reset back to Ollama models. Fixed by:
- Removing model from useEffect dependency array
- Only run model fetch on component mount
- Check if saved model exists before loading it
- Don't reset model if it's not in Ollama list (allows Claude)
- Add Claude models to dropdown with optgroup sections
- Update context window calculation for Claude (200k tokens)
- Add API key dialog modal for first-time Claude use
- Check for API key existence before sending Claude requests
- Auto-detect provider from model name (claude-*)
- Update sendMessage to handle Claude provider
- Store and retrieve API key via backend commands
- Add visual separation between Anthropic and Ollama models
- Add anthropic.rs module with streaming support
- Convert between internal and Anthropic tool/message formats
- Add keyring dependency for secure API key storage
- Add API key management commands (get_exists, set)
- Auto-detect provider from model name (claude-* prefix)
- Support SSE streaming from Anthropic API
- Handle tool calling with Anthropic's format
- Add cancellation support for Anthropic streams
Story Updates:
- Unified model dropdown with section headers (Anthropic, Ollama)
- Auto-detect provider from model name (claude-* prefix)
- API key prompt on first Claude model use
- Secure storage in OS keychain via keyring crate
- 200k token context window for Claude models
Spec Updates (AI_INTEGRATION.md):
- Document Anthropic provider implementation
- Anthropic API protocol (SSE streaming, tool format)
- Tool format conversion between internal and Anthropic formats
- API key storage in OS keychain
- Unified dropdown UI flow
Spec Updates (STACK.md):
- Add keyring crate for secure API key storage
- Add eventsource-stream for Anthropic SSE streaming
- Document automatic provider detection
- Update API key management approach
User Story:
As a user, I want the LLM model dropdown to be alphabetically sorted
so I can quickly find the model I'm looking for.
Implementation:
- Added alphabetical sorting with case-insensitive comparison
- Used localeCompare() for proper string comparison
- Sort happens immediately after fetching models from backend
- Currently selected model remains selected after sorting
Technical Details:
- Sort logic: models.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
- Frontend-only change, no backend modifications needed
- Sorting preserves model selection state
Acceptance Criteria Met:
✅ Models sorted alphabetically (case-insensitive)
✅ Selected model remains selected after sorting
✅ Works for all models from Ollama
✅ Updates correctly when models change
Files Changed:
- src/components/Chat.tsx: Added sorting logic to model fetch
- .living_spec/stories/23_alphabetize_llm_dropdown.md: Marked complete
User Story:
As a user, I want to be able to scroll up to review previous messages
while the AI is streaming or adding new content, without being
constantly dragged back to the bottom.
Implementation:
- Replaced position-based threshold detection with user-intent tracking
- Detects when user scrolls UP and disables auto-scroll completely
- Auto-scroll only re-enables when user manually returns to bottom (<5px)
- Uses refs to track scroll position and direction for smooth operation
- Works seamlessly during rapid token streaming and tool execution
Technical Details:
- lastScrollTopRef: Tracks previous scroll position to detect direction
- userScrolledUpRef: Flag set when upward scrolling is detected
- Direct scrollTop manipulation for instant, non-fighting scroll behavior
- Threshold of 5px from absolute bottom to re-enable auto-scroll
Spec Updates:
- Added comprehensive Smart Auto-Scroll section to UI_UX.md
- Documented the problem, solution, requirements, and implementation
- Includes code examples and edge case handling
Acceptance Criteria Met:
✅ Auto-scroll disabled when scrolling up
✅ Auto-scroll resumes when returning to bottom
✅ Works normally when already at bottom
✅ Smooth detection without flickering
✅ Works during streaming and tool execution
Files Changed:
- src/components/Chat.tsx: Implemented user-intent tracking
- .living_spec/specs/functional/UI_UX.md: Added Smart Auto-Scroll spec
- .living_spec/stories/22_smart_autoscroll.md: Marked complete
- Restructure input area to use flexbox layout
- Button now sits beside input instead of overlapping
- Prevents text from being obscured on longer prompts
- Input takes full available width with proper spacing
- Call cancel_chat before clearing session state
- Prevents tools from executing silently in background
- Prevents streaming from leaking into new session
- Uses same cancellation infrastructure as Story 13
- Clean session start with no side effects
Closes Story 15
- Added sessionIdRef to track current session
- When clearing session, generate new session ID
- Event listeners check if sessionId matches before updating state
- Prevents old streaming responses from appearing in new sessions
- All quality checks passing
- Tauri overrides window.confirm to return Promise, not boolean
- Changed clearSession to async function using Tauri's ask() dialog
- Now properly waits for user confirmation before clearing state
- Removed debug logging
- All quality checks passing
- Added 'New Session' button in header with confirmation dialog
- Clears frontend messages, streaming content, and loading state
- Button has subtle styling with hover effects
- Preserves project path, model selection, and tool settings
- Backend context automatically cleared (no server-side history)
- Fixed build errors by removing unused tokio watch channel
- All quality checks passing (TypeScript, Biome, Clippy, builds)
Tested and verified:
- Button appears in header near model controls
- Confirmation dialog prevents accidental clearing
- Messages clear immediately after confirmation
- Input remains ready for new conversation
- Settings preserved across session clears
- Backend: Added OllamaProvider::chat_stream() with newline-delimited JSON parsing
- Backend: Emit chat:token events for each token received from Ollama
- Backend: Added futures dependency and stream feature for reqwest
- Frontend: Added streamingContent state and chat:token event listener
- Frontend: Real-time token display with auto-scroll
- Frontend: Markdown and syntax highlighting support for streaming content
- Fixed all TypeScript errors (tsc --noEmit)
- Fixed all Biome warnings and errors
- Fixed all Clippy warnings
- Added comprehensive code quality documentation
- Added tsc --noEmit to verification checklist
Tested and verified:
- Tokens stream in real-time
- Auto-scroll works during streaming
- Tool calls interrupt streaming correctly
- Multi-turn conversations work
- Smooth performance with no lag
Merged from feature/interrupt-on-type branch.
Backend cancellation infrastructure:
- Added tokio watch channel to SessionState for cancellation signaling
- Implemented cancel_chat command
- Modified chat command to use tokio::select! for racing requests vs cancellation
- When cancelled, HTTP request to Ollama is dropped and returns early
- Added tokio dependency with sync feature
Story updates:
- Story 13: Updated to use Stop button pattern (industry standard)
- Story 18: Created placeholder for streaming responses
- Stories 15-17: Placeholders for future features
Frontend changes:
- Removed auto-interrupt on typing behavior (too confusing)
- Backend infrastructure ready for Stop button implementation
Note: Story 13 UI (Stop button) not yet implemented - backend ready
Implemented Story 14: Auto-focus Chat Input
- Added inputRef using useRef<HTMLInputElement>
- Added useEffect to focus input on component mount
- Input now automatically receives focus when chat loads
- Cursor is visible and blinking immediately
- Users can start typing without clicking into the field
Updated Specs
- Added Input Focus Management section to UI_UX.md
- Specified auto-focus behavior and requirements
- Provided implementation example
Implemented Story 11: Text Alignment and Syntax Highlighting
- Removed center-alignment from chat container (text-align: center)
- Added left-alignment to markdown body and code blocks
- Integrated react-syntax-highlighter with react-markdown
- Added syntax highlighting for code blocks using oneDark theme
- Supports JavaScript, TypeScript, Rust, Python, JSON, Markdown, Shell, and more
- Inline code maintains simple styling without full highlighting
- All code blocks are now left-aligned for better readability
Fixed: Agent over-aggressive file writing behavior
- Refined system prompt to distinguish between:
* 'show/example/how does' → respond with code in chat
* 'create/add/implement/fix' → use write_file tool
- Removed aggressive AGENT DIRECTIVE prefix from user messages
- Softened reminder message to reflect nuanced behavior
- Agent can now both teach (show examples) and implement (write files)
Updated Specs
- Added Text Alignment and Readability section to UI_UX.md
- Added Syntax Highlighting section with implementation details
- Updated SDSW workflow: acceptance criteria marked complete only after user acceptance
Dependencies
- Added react-syntax-highlighter and @types/react-syntax-highlighter
