K8s MCP

# Inline Tool Call Display Feature ## What's New ✨ Tool call outputs now display **directly in chat messages** alongside model responses, not just in the sidebar! ## Features ### 1. **Inline Tool Display in Messages** - Shows tool calls right below the model response - Expandable/collapsible sections - Status emoji indicators (✅/❌/⏳/⚙️) - Clean, compact layout ### 2. **Tool Information** - **Tool Name** - Which tool was executed - **Arguments** - What parameters were passed - **Result** - Full output with scrolling for long results ### 3. **Smart Organization** - Tool calls grouped at bottom of response message - Global ToolCallHistory still available in sidebar - Dual view: See everything in one place or in detail ## UI/UX Improvements ### Status Indicators ``` ✅ completed - Green left border ❌ failed - Red left border ⏳ pending - Yellow left border ⚙️ executing - Blue left border ``` ### Visual Design - **Light Mode (Assistant)**: Subtle blue accent - **Dark Mode (User)**: White text with transparency - **Expandable Headers**: Click to show/hide details - **Scrollable Results**: Long outputs don't break layout ### Interactive Features - Click anywhere on tool header to expand - Arrow indicator shows expand state - Hover effects for better feedback - Proper spacing and alignment ## Code Changes ### Files Updated 1. **Message.jsx** - Added `ToolCallInline` component - Displays tool calls within message - Expandable/collapsible functionality - Status emoji mapping 2. **chatStore.js** - Added `currentMessageId` tracking - Messages now include `toolCalls` array - Tool calls automatically linked to messages - `addToolCall()` updates both global and message-local 3. **Message.css** - Inline tool call styling - Status color indicators - Scrollable code blocks - Responsive layout ## How It Works ### Message Structure ```javascript { messageId: "uuid", role: "assistant", content: "Here are the pods...", timestamp: "2025-10-21T...", toolCalls: [ { tool_name: "list_pods", arguments: { all_namespaces: true }, result: "pod1, pod2...", status: "completed" } ] } ``` ### Flow 1. User sends message 2. Model responds and streams text 3. Tool gets called 4. Tool result comes back 5. Tool is added to current message's `toolCalls` array 6. Message re-renders showing tool inline 7. Also added to global `toolCalls` for sidebar history ## Usage No changes needed! It works automatically: 1. **See tool calls in chat** - Look below model response - Shows "🔧 Tool Calls:" section - Click to expand any tool 2. **View full details** - Click tool to expand - See arguments and complete result - Scroll if output is long 3. **Also in sidebar** - ToolCallHistory still shows all tools - Use for detailed review or history ## Example Output ``` User: "list all pods" 🤖 Assistant: Here are all the pods in your cluster: 🔧 Tool Calls: ✅ list_pods ▶ [User clicks to expand] ✅ list_pods ▼ Arguments: { "all_namespaces": true } Result: NAMESPACE NAME READY STATUS argocd argocd-... 1/1 Running default app-... 1/1 Running ... ``` ## Styling Options ### Assistant Messages (Light) - Background: Light gray (#f0f0f0) - Tool boxes: Subtle blue accent - Text: Dark text ### User Messages (Dark) - Background: Blue (#667eea) - Tool boxes: White with transparency - Text: Light text ## Benefits ✅ **Better Context** - See tools and results in conversation flow ✅ **Less Scrolling** - Don't need to check sidebar ✅ **Cleaner UI** - Tools naturally fit with responses ✅ **Easy to Review** - Expandable for detail when needed ✅ **Dual View** - Both inline and sidebar for flexibility ## Browser DevTools Open DevTools → Elements to see structure: ```html <div class="message message-assistant"> <div class="message-content"> <div class="message-text">...</div> <div class="message-tool-calls"> <div class="inline-tool-call inline-tool-completed"> <div class="inline-tool-header">...</div> <div class="inline-tool-details">...</div> </div> </div> </div> </div> ``` ## Performance - Minimal re-renders (Zustand store optimized) - Lazy expansion (only render details when open) - Smooth animations (CSS transitions) - No impact on chat speed ## Future Enhancements Optional additions: - [ ] Copy tool result to clipboard - [ ] Export tool results as JSON/CSV - [ ] Filter/search tool history - [ ] Tool result diff viewer - [ ] Tool execution timeline