K8s MCP

# Fixed WebSocket Connection & Tool Display ## Issues Fixed ### 1. ❌ WebSocket Connection Error **Problem**: Frontend was trying to connect to `ws://localhost:5173/ws/chat` (itself) **Root Cause**: Using `window.location.host` without proxy configuration **Solution**: - Added WebSocket proxy in `vite.config.js`: ```javascript '/ws': { target: 'ws://localhost:8001', ws: true } ``` - Updated hook to use proxied URL: `ws://localhost:5173/ws/chat` → proxied to `ws://localhost:8001/ws/chat` - Better error messages showing expected backend port ### 2. ⚠️ Tool Results Truncated **Problem**: Output showing as `create-by-gemini...` (truncated) **Root Cause**: Old code limited result display to 500 chars with truncation **Solution**: - **ToolCall.jsx**: Full output now displayed (no truncation) - **ToolCall.css**: - Dark code block styling for results - Scrollable containers (max-height: 300px for results) - Custom scrollbars for better UX - Left border accent matching design system ## What's Now Working ✅ 1. **WebSocket Connection** - Frontend connects via proxy automatically - Connected indicator in console: `✓ WebSocket connected` - Error messages show expected backend port 2. **Real-time Streaming** - Text streams in chunks as model generates - Tool calls execute and show results in history - No more "(Processing tool calls...)" placeholders 3. **Tool Result Display** - Full output visible with proper formatting - Scrollable code blocks for long results - Expandable/collapsible sections - Status indicators (✅/❌/⏳) 4. **Development Setup** - Vite proxy handles routing automatically - No manual URL configuration needed - Works with 3 services: MCP → Backend → Frontend ## Architecture Diagram ``` ┌─ Frontend Dev Server (5173) ─┐ │ Vite Proxy: │ │ /api/* → localhost:8001/api │ │ /ws → localhost:8001/ws │ └───────────┬───────────────────┘ │ (transparent to client) ↓ ┌─ Backend API (8001) ──────────┐ │ FastAPI + WebSocket │ │ POST /api/chat/message │ │ WS /ws/chat │ └───────────┬───────────────────┘ │ (connects to) ↓ ┌─ MCP K8s Server (8000/sse) ──┐ │ 32+ Kubernetes tools │ └───────────────────────────────┘ ``` ## Configuration Files Changed ### vite.config.js - Added WebSocket proxy: `/ws` → `ws://localhost:8001` - Kept existing API proxy: `/api` → `http://localhost:8001` ### useChatWebSocket.js - Simplified to use proxied URL - Better error messages for debugging - Console shows connection status ### ToolCall.jsx - Shows full result without truncation - Better formatting of output - Expandable headers with arrow indicator ### ToolCall.css - Dark theme for code blocks (#1e1e1e) - Scrollable containers with max heights - Custom scrollbar styling - Left border accent (#667eea) ## Testing Checklist - [ ] All 3 services running (MCP, Backend, Frontend) - [ ] No WebSocket errors in console - [ ] Can send message and see response - [ ] Tool calls execute and show full results - [ ] Tool results have scrollable code blocks - [ ] Expandable tool call cards work - [ ] Multi-line input works (Shift+Enter) ## Next Steps (Optional) - [ ] Add retry logic for WebSocket reconnection - [ ] Add loading animation during tool execution - [ ] Add search/filter in ToolCallHistory - [ ] Export tool results as JSON - [ ] Add dark/light mode toggle