nitrostack 1.0.72 → 1.0.73

package/src/studio/app/chat/page.tsx

@@ -1,11 +1,16 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useStudioStore } from '@/lib/store';
+import { useOpsStore } from '@/lib/ops-store';
+import { opsTracker, clearOpsSession } from '@/lib/ops-tracker';
+import type { LLMProvider } from '@/lib/ops-types';
 import { api } from '@/lib/api';
 import { WidgetRenderer } from '@/components/WidgetRenderer';
+import { WidgetErrorBoundary } from '@/components/WidgetErrorBoundary';
 import { MarkdownRenderer } from '@/components/MarkdownRenderer';
 import { VoiceOrbOverlay, MiniVoiceOrb } from '@/components/VoiceOrbOverlay';
+import { OpsCanvas } from '@/components/ops/OpsCanvas';
 import type { ChatMessage, Tool, ToolCall, Prompt } from '@/lib/types';
 import {
   SparklesIcon,
@@ -23,16 +28,104 @@ import {
   EllipsisVerticalIcon,
   MicrophoneIcon,
   SpeakerWaveIcon,
-  StopIcon
+  StopIcon,
 } from '@heroicons/react/24/outline';
 
 // Add type for webkitSpeechRecognition
 declare global {
   interface Window {
-    webkitSpeechRecognition: any;
+    webkitSpeechRecognition?: typeof SpeechRecognition;
   }
 }
 
+// =============================================================================
+// Token Optimization: Reduce token count for LLM API calls
+// =============================================================================
+
+const MAX_HISTORY_MESSAGES = 20; // Sliding window size
+const MAX_TOOL_RESULT_LENGTH = 2000; // Truncate large tool results
+const MAX_CONTENT_LENGTH = 4000; // Truncate very long content
+
+/**
+ * Optimize messages for LLM to reduce token count while preserving context
+ * - Strips widget data (result) from toolCalls (only needed for UI)
+ * - Truncates large tool results
+ * - Applies sliding window for message history
+ * - Removes file data from old messages
+ */
+function optimizeMessagesForLLM(messages: ChatMessage[]): ChatMessage[] {
+  // Apply sliding window - keep last N messages
+  // But always keep system messages and the most recent exchange
+  const recentMessages = messages.length > MAX_HISTORY_MESSAGES 
+    ? messages.slice(-MAX_HISTORY_MESSAGES)
+    : messages;
+
+  return recentMessages.map((msg, idx) => {
+    const isLastMessage = idx === recentMessages.length - 1;
+    
+    const cleaned: ChatMessage = {
+      role: msg.role,
+      content: msg.content || '',
+    };
+
+    // Strip result from toolCalls - LLM already gets results via tool role messages
+    // The result is only needed for UI widget rendering, not for LLM context
+    if (msg.toolCalls && msg.toolCalls.length > 0) {
+      cleaned.toolCalls = msg.toolCalls.map(tc => ({
+        id: tc.id,
+        name: tc.name,
+        arguments: tc.arguments,
+        // result intentionally omitted - saves significant tokens!
+      }));
+    }
+
+    if (msg.toolCallId) {
+      cleaned.toolCallId = msg.toolCallId;
+    }
+
+    // Truncate large tool results to save tokens
+    if (msg.role === 'tool' && cleaned.content.length > MAX_TOOL_RESULT_LENGTH) {
+      // Try to parse and summarize JSON results
+      try {
+        const parsed = JSON.parse(cleaned.content);
+        if (Array.isArray(parsed)) {
+          // For arrays (like flight results), keep first few items
+          const truncated = parsed.slice(0, 3);
+          cleaned.content = JSON.stringify(truncated) + 
+            `\n[... ${parsed.length - 3} more items truncated for efficiency]`;
+        } else if (typeof parsed === 'object') {
+          // For objects, stringify with limit
+          cleaned.content = cleaned.content.substring(0, MAX_TOOL_RESULT_LENGTH) + 
+            '\n[Result truncated for context efficiency]';
+        }
+      } catch {
+        // Not JSON, just truncate
+        cleaned.content = cleaned.content.substring(0, MAX_TOOL_RESULT_LENGTH) + 
+          '\n[Result truncated for context efficiency]';
+      }
+    }
+
+    // Truncate very long assistant/user content (rare but possible)
+    if ((msg.role === 'assistant' || msg.role === 'user') && 
+        cleaned.content.length > MAX_CONTENT_LENGTH) {
+      cleaned.content = cleaned.content.substring(0, MAX_CONTENT_LENGTH) + 
+        '\n[Content truncated]';
+    }
+
+    // Only include file data for the CURRENT message, not history
+    // Images are expensive (base64) and LLM already saw them
+    if (msg.file && isLastMessage) {
+      cleaned.file = msg.file;
+    }
+    // Old messages with files: just note that an image was attached
+    else if (msg.file && !isLastMessage) {
+      cleaned.content = cleaned.content || '[Image was attached]';
+    }
+
+    return cleaned;
+  });
+}
+
 export default function ChatPage() {
   const {
     chatMessages,
@@ -48,6 +141,9 @@ export default function ChatPage() {
     setElevenLabsApiKey
   } = useStudioStore();
 
+  // Ops state
+  const { isOpsViewOpen, toggleOpsView, clearSession: clearOpsSessionStore } = useOpsStore();
+
   // ... (existing helper methods)
   const getAuthTokens = () => {
     const state = useStudioStore.getState();
@@ -64,7 +160,11 @@ export default function ChatPage() {
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
-  const [fullscreenWidget, setFullscreenWidget] = useState<{ uri: string, data: any } | null>(null);
+  const [fullscreenWidget, setFullscreenWidget] = useState<{ uri: string, data: unknown } | null>(null);
+  
+  // API key inputs - start empty to avoid hydration mismatch
+  const [openaiApiKeyInput, setOpenaiApiKeyInput] = useState('');
+  const [geminiApiKeyInput, setGeminiApiKeyInput] = useState('');
 
   // Language presets for quick selection
   const LANG_PRESETS: Record<string, { model: string; voice: string; input: string; name: string; greeting: string }> = {
@@ -86,31 +186,31 @@ export default function ChatPage() {
   const [voiceDisplayMode, setVoiceDisplayMode] = useState<'voice-only' | 'voice-chat'>('voice-only');
   const [showVoiceSettings, setShowVoiceSettings] = useState(false);
 
-  // Voice Configuration - load from localStorage
-  const [voiceModel, setVoiceModel] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('voice_model') || 'eleven_multilingual_v2';
-    }
-    return 'eleven_multilingual_v2';
-  });
-  const [outputLanguage, setOutputLanguage] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('output_language') || 'en';
-    }
-    return 'en';
-  });
-  const [inputLanguage, setInputLanguage] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('input_language') || 'en-US';
-    }
-    return 'en-US';
-  });
-  const [voiceId, setVoiceId] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('voice_id') || '21m00Tcm4TlvDq8ikWAM';
-    }
-    return '21m00Tcm4TlvDq8ikWAM';
-  });
+  // Voice Configuration - use defaults initially, load from localStorage in useEffect
+  const [voiceModel, setVoiceModel] = useState('eleven_multilingual_v2');
+  const [outputLanguage, setOutputLanguage] = useState('en');
+  const [inputLanguage, setInputLanguage] = useState('en-US');
+  const [voiceId, setVoiceId] = useState('21m00Tcm4TlvDq8ikWAM');
+  
+  // Load settings from localStorage after mount (avoids hydration mismatch)
+  useEffect(() => {
+    // Voice settings
+    const savedVoiceModel = localStorage.getItem('voice_model');
+    const savedOutputLang = localStorage.getItem('output_language');
+    const savedInputLang = localStorage.getItem('input_language');
+    const savedVoiceId = localStorage.getItem('voice_id');
+    
+    if (savedVoiceModel) setVoiceModel(savedVoiceModel);
+    if (savedOutputLang) setOutputLanguage(savedOutputLang);
+    if (savedInputLang) setInputLanguage(savedInputLang);
+    if (savedVoiceId) setVoiceId(savedVoiceId);
+    
+    // API keys
+    const savedOpenaiKey = localStorage.getItem('openai_api_key');
+    const savedGeminiKey = localStorage.getItem('gemini_api_key');
+    if (savedOpenaiKey) setOpenaiApiKeyInput(savedOpenaiKey);
+    if (savedGeminiKey) setGeminiApiKeyInput(savedGeminiKey);
+  }, []);
 
   // Dynamic API data
   interface ElevenLabsModel {
@@ -136,6 +236,24 @@ export default function ChatPage() {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const initialToolExecuted = useRef(false);
 
+  // Load tools and prompts on mount
+  useEffect(() => {
+    loadTools();
+    loadPrompts();
+  }, []);
+
+  // Auto-execute initial tool when tools are loaded
+  useEffect(() => {
+    if (tools.length > 0 && !initialToolExecuted.current) {
+      checkAndRunInitialTool();
+    }
+  }, [tools]);
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatMessages]);
+
   // Fetch ElevenLabs models when settings opens
   useEffect(() => {
     if ((!showVoiceSettings && !showSettings) || !elevenLabsApiKey) return;
@@ -189,7 +307,13 @@ export default function ChatPage() {
         let sharedVoices: ElevenLabsVoice[] = [];
         if (sharedVoicesRes.ok) {
           const data = await sharedVoicesRes.json();
-          sharedVoices = (data.voices || []).map((v: any) => ({
+          interface SharedVoiceData {
+            voice_id: string;
+            name: string;
+            accent?: string;
+            language?: string;
+          }
+          sharedVoices = (data.voices || []).map((v: SharedVoiceData) => ({
             voice_id: v.voice_id,
             name: v.name,
             labels: { accent: v.accent || v.language },
@@ -230,6 +354,119 @@ export default function ChatPage() {
     }
   }, [chatMessages, voiceModeEnabled, voiceOverlayOpen, elevenLabsApiKey]);
 
+  // Listen for widget-to-MCP tool calls
+  useEffect(() => {
+    const handleWidgetToolCall = async (event: CustomEvent<{ toolName: string; toolArgs: Record<string, unknown> }>) => {
+      const { toolName, toolArgs } = event.detail;
+      console.log('🔧 Widget tool call received:', toolName, toolArgs);
+
+      try {
+        setLoading(true);
+        const { jwtToken, mcpApiKey } = getAuthTokens();
+        const effectiveToken = jwtToken || useStudioStore.getState().oauthState?.currentToken;
+
+        // Track ops: Start tool call from widget interaction
+        const toolCallId = `call_${Date.now()}`;
+        opsTracker.startToolCall(toolCallId, toolName, toolArgs || {});
+        const toolStartTime = Date.now();
+
+        // Call the tool via API
+        const rawResult = await api.callTool(
+          toolName,
+          toolArgs || {},
+          effectiveToken,
+          mcpApiKey || undefined
+        );
+
+        console.log('✅ Widget tool call raw result:', rawResult);
+
+        // Parse the MCP result format: { content: [{ type: "text", text: "..." }] }
+        let parsedResult = rawResult;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mcpResult = rawResult as any;
+        if (mcpResult?.content?.[0]?.text) {
+          try {
+            parsedResult = JSON.parse(mcpResult.content[0].text);
+            // Unwrap if response was wrapped by TransformInterceptor
+            if (parsedResult && typeof parsedResult === 'object' && 'success' in parsedResult && 'data' in parsedResult) {
+              parsedResult = (parsedResult as { success: boolean; data: unknown }).data;
+            }
+          } catch {
+            parsedResult = { content: mcpResult.content[0].text };
+          }
+        }
+
+        console.log('✅ Widget tool call parsed result:', parsedResult);
+
+        // Track ops: Complete tool call with result
+        const resultNodeId = opsTracker.completeToolCall(toolCallId, toolName, parsedResult);
+
+        // Track ops: Widget render
+        const toolDef = tools.find(t => t.name === toolName);
+        const widgetUri = toolDef?.widget?.route || toolDef?.outputTemplate || toolDef?._meta?.['openai/outputTemplate'];
+        if (widgetUri && parsedResult && resultNodeId) {
+          opsTracker.trackWidget(widgetUri, toolName, parsedResult, resultNodeId);
+        }
+
+        // Add assistant message with tool call info
+        const assistantMsg: ChatMessage = {
+          role: 'assistant',
+          content: ``,
+          toolCalls: [{
+            id: toolCallId,
+            name: toolName,
+            arguments: toolArgs || {},
+            result: parsedResult // Attach parsed result for widget rendering
+          }]
+        };
+        addChatMessage(assistantMsg);
+
+        // Add tool result message
+        const toolResultMsg: ChatMessage = {
+          role: 'tool',
+          content: JSON.stringify(parsedResult),
+          toolCallId: toolCallId
+        };
+        addChatMessage(toolResultMsg);
+
+        // Continue conversation to get LLM response about the tool result (like nitrochat)
+        const apiKey = localStorage.getItem(`${currentProvider}_api_key`);
+        if (apiKey && apiKey !== '••••••••') {
+          // Get current messages and add instruction to prevent tool chaining
+          const currentMessages = useStudioStore.getState().chatMessages;
+          
+          // Add a system-style instruction (as user message) to prevent the LLM from calling more tools
+          // This is hidden from the user but guides the LLM to just summarize
+          const messagesForLLM: ChatMessage[] = [
+            ...currentMessages,
+            {
+              role: 'user',
+              content: `[INSTRUCTION: The user clicked on a widget item which called the "${toolName}" tool. Please summarize the result above in a helpful way. IMPORTANT: Do NOT call any additional tools - just provide a text summary of what was retrieved. The user only wanted to see details for this specific item.]`
+            }
+          ];
+          
+          await continueChatWithToolResults(apiKey, messagesForLLM, true);
+        }
+
+      } catch (error) {
+        console.error('❌ Widget tool call failed:', error);
+        // Track ops: Tool call error
+        opsTracker.errorLLMCall();
+        addChatMessage({
+          role: 'assistant',
+          content: `Failed to execute tool ${toolName}: ${error instanceof Error ? error.message : String(error)}`
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    window.addEventListener('widget-tool-call', handleWidgetToolCall as EventListener);
+    return () => {
+      window.removeEventListener('widget-tool-call', handleWidgetToolCall as EventListener);
+    };
+  }, [addChatMessage, currentProvider]);
+
   // Convert markdown content to voice-friendly, conversational text
   // Optimized for minimal TTS token usage
   const convertToVoiceFriendlyText = (text: string): string => {
@@ -423,36 +660,65 @@ export default function ChatPage() {
     initialToolExecuted.current = true;
     console.log('🚀 Auto-executing initial tool:', initialTool.name);
 
-    // Initial message
-    const autoMsg: ChatMessage = {
-      role: 'user',
-      content: `(Auto) Executing initial tool: ${initialTool.name}`,
-    };
-    addChatMessage(autoMsg);
     setLoading(true);
 
+    // Track ops: Start a new turn for initial tool
+    opsTracker.startTurn(`[Initial] ${initialTool.name}`);
+
     try {
       const { jwtToken, mcpApiKey } = getAuthTokens();
       const effectiveToken = jwtToken || useStudioStore.getState().oauthState?.currentToken;
 
+      // Track ops: Start tool call
+      const toolCallId = `call_${Date.now()}_init`;
+      opsTracker.startToolCall(toolCallId, initialTool.name, {});
+
       // Call the tool
-      const result = await api.callTool(
+      const rawResult = await api.callTool(
         initialTool.name,
         {},
         effectiveToken,
         mcpApiKey || undefined
       );
 
-      // Add assistant message with tool call info
-      const toolCallId = `call_${Date.now()}`;
+      console.log('✅ Initial tool raw result:', rawResult);
+
+      // Parse the MCP result format: { content: [{ type: "text", text: "..." }] }
+      let parsedResult = rawResult;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const mcpResult = rawResult as any;
+      if (mcpResult?.content?.[0]?.text) {
+        try {
+          parsedResult = JSON.parse(mcpResult.content[0].text);
+          // Unwrap if response was wrapped by TransformInterceptor
+          if (parsedResult && typeof parsedResult === 'object' && 'success' in parsedResult && 'data' in parsedResult) {
+            parsedResult = (parsedResult as { success: boolean; data: unknown }).data;
+          }
+        } catch {
+          parsedResult = { content: mcpResult.content[0].text };
+        }
+      }
+
+      console.log('✅ Initial tool parsed result:', parsedResult);
+
+      // Track ops: Complete tool call with result
+      const resultNodeId = opsTracker.completeToolCall(toolCallId, initialTool.name, parsedResult);
+
+      // Track ops: Widget render
+      const widgetUri = initialTool?.widget?.route || initialTool?.outputTemplate || initialTool?._meta?.['openai/outputTemplate'];
+      if (widgetUri && parsedResult && resultNodeId) {
+        opsTracker.trackWidget(widgetUri, initialTool.name, parsedResult, resultNodeId);
+      }
+
+      // Add assistant message with tool call info (widget will render from this)
       const assistantMsg: ChatMessage = {
         role: 'assistant',
-        content: `Invoking ${initialTool.name}...`,
+        content: '',
         toolCalls: [{
           id: toolCallId,
           name: initialTool.name,
           arguments: {},
-          result // Attach result here for widget rendering
+          result: parsedResult // Attach parsed result for widget rendering
         }]
       };
       addChatMessage(assistantMsg);
@@ -460,13 +726,18 @@ export default function ChatPage() {
       // Add tool result message
       const toolResultMsg: ChatMessage = {
         role: 'tool',
-        content: JSON.stringify(result),
+        content: JSON.stringify(parsedResult),
         toolCallId: toolCallId
       };
       addChatMessage(toolResultMsg);
 
+      // Note: Like nitrochat, we don't continue chat automatically here
+      // We just show the result (widget) as the starting state
+
     } catch (error) {
-      console.error('Initial tool execution failed:', error);
+      console.error('❌ Initial tool execution failed:', error);
+      // Track ops: Error
+      opsTracker.errorLLMCall();
       addChatMessage({
         role: 'assistant',
         content: `Failed to execute initial tool ${initialTool.name}: ${error instanceof Error ? error.message : String(error)}`
@@ -506,11 +777,15 @@ export default function ChatPage() {
       // Add the prompt result as an assistant message
       if (result.messages && result.messages.length > 0) {
         // Combine all prompt messages into one assistant message
-        const combinedContent = result.messages
-          .map((msg: any) => {
+        interface PromptMessageResult {
+          role: string;
+          content: string | { text?: string } | unknown;
+        }
+        const combinedContent = (result.messages as PromptMessageResult[])
+          .map((msg) => {
             const content = typeof msg.content === 'string'
               ? msg.content
-              : msg.content?.text || JSON.stringify(msg.content);
+              : (msg.content as { text?: string })?.text || JSON.stringify(msg.content);
             return `[${msg.role.toUpperCase()}]\n${content}`;
           })
           .join('\n\n');
@@ -584,31 +859,14 @@ export default function ChatPage() {
     setCurrentFile(null);
     setLoading(true);
 
+    // Track ops: Start a new turn
+    opsTracker.startTurn(messageText, !!currentFile);
+
     try {
       const messagesToSend = [...chatMessages, userMessage];
 
-      // Clean messages to ensure they're serializable
-      const cleanedMessages = messagesToSend.map(msg => {
-        const cleaned: any = {
-          role: msg.role,
-          content: msg.content || '',
-        };
-
-        if (msg.toolCalls && msg.toolCalls.length > 0) {
-          cleaned.toolCalls = msg.toolCalls;
-        }
-
-        if (msg.toolCallId) {
-          cleaned.toolCallId = msg.toolCallId;
-        }
-
-        // Skip image property for now (not supported by OpenAI chat completions)
-        if (msg.file) {
-          cleaned.file = msg.file;
-        }
-
-        return cleaned;
-      });
+      // Optimize messages to reduce token count
+      const cleanedMessages = optimizeMessagesForLLM(messagesToSend);
 
       // Get fresh auth tokens from store
       const { jwtToken, mcpApiKey } = getAuthTokens();
@@ -633,6 +891,10 @@ export default function ChatPage() {
       console.log('Original messages:', messagesToSend);
       console.log('Voice mode:', voiceModeEnabled, 'Output language:', outputLanguage);
 
+      // Track ops: LLM call start
+      const llmModel = currentProvider === 'gemini' ? 'gemini-1.5-pro' : 'gpt-4o';
+      opsTracker.startLLMCall(currentProvider as LLMProvider, llmModel);
+
       const response = await api.chat({
         provider: currentProvider,
         messages: messagesForApi,
@@ -641,14 +903,23 @@ export default function ChatPage() {
         mcpApiKey: mcpApiKey || undefined, // MCP server API key
       });
 
+      // Track ops: LLM call complete (estimate tokens based on content length)
+      const inputTokenEstimate = Math.ceil(JSON.stringify(messagesForApi).length / 4);
+      const outputTokenEstimate = Math.ceil((response.message?.content?.length || 0) / 4);
+      opsTracker.completeLLMCall(inputTokenEstimate, outputTokenEstimate);
+
       // Handle tool calls FIRST (before adding the message)
       if (response.toolCalls && response.toolResults) {
-        // Attach results to tool calls for widget rendering
+        // Track ops: Process each tool call
         const toolCallsWithResults = response.toolCalls.map((tc: ToolCall, i: number) => {
           const toolResult = response.toolResults[i];
 
+          // Track ops: Tool call start
+          opsTracker.startToolCall(tc.id, tc.name, tc.arguments as Record<string, unknown>);
+
           // Parse the result content
           let parsedResult;
+          let hasError = false;
           if (toolResult.content) {
             try {
               parsedResult = JSON.parse(toolResult.content);
@@ -662,6 +933,16 @@ export default function ChatPage() {
             }
           }
 
+          // Track ops: Tool call complete with result
+          const resultNodeId = opsTracker.completeToolCall(tc.id, tc.name, parsedResult, hasError ? 'Error processing result' : undefined);
+
+          // Track ops: Widget render if tool has a widget
+          const toolDef = tools.find(t => t.name === tc.name);
+          const widgetUri = toolDef?.widget?.route || toolDef?.outputTemplate || toolDef?._meta?.['openai/outputTemplate'];
+          if (widgetUri && parsedResult && resultNodeId) {
+            opsTracker.trackWidget(widgetUri, tc.name, parsedResult, resultNodeId);
+          }
+
           return {
             ...tc,
             result: parsedResult,
@@ -714,6 +995,12 @@ export default function ChatPage() {
         // No tool calls, just add the message
         if (response.message) {
           addChatMessage(response.message);
+          
+          // Track ops: Final response
+          opsTracker.trackResponse(
+            response.message.content || '',
+            outputTokenEstimate
+          );
         }
       }
 
@@ -721,6 +1008,10 @@ export default function ChatPage() {
       setLoading(false);
     } catch (error) {
       console.error('Chat error:', error);
+      
+      // Track ops: LLM call error
+      opsTracker.errorLLMCall();
+      
       addChatMessage({
         role: 'assistant',
         content: 'Sorry, I encountered an error. Please try again.',
@@ -729,7 +1020,7 @@ export default function ChatPage() {
     }
   };
 
-  const continueChatWithToolResults = async (apiKey: string, messages?: ChatMessage[]) => {
+  const continueChatWithToolResults = async (apiKey: string, messages?: ChatMessage[], isFromWidget: boolean = false) => {
     try {
       // Use provided messages or fall back to store (for recursive calls)
       const messagesToUse = messages || chatMessages;
@@ -737,26 +1028,15 @@ export default function ChatPage() {
       // Get fresh auth tokens from store (token may have been updated by login)
       const { jwtToken, mcpApiKey } = getAuthTokens();
 
-      // Clean messages before sending
-      const cleanedMessages = messagesToUse.map(msg => {
-        const cleaned: any = {
-          role: msg.role,
-          content: msg.content || '',
-        };
+      // Optimize messages to reduce token count
+      const cleanedMessages = optimizeMessagesForLLM(messagesToUse);
 
-        if (msg.toolCalls && msg.toolCalls.length > 0) {
-          cleaned.toolCalls = msg.toolCalls;
-        }
+      console.log('Continue with optimized messages:', cleanedMessages.length, 'messages');
 
-        if (msg.toolCallId) {
-          cleaned.toolCallId = msg.toolCallId;
-        }
-
-        return cleaned;
-      });
-
-      console.log('Continue with cleaned messages:', JSON.stringify(cleanedMessages));
-      console.log('Continue auth tokens:', { hasJwtToken: !!jwtToken, hasMcpApiKey: !!mcpApiKey });
+      // Track ops: LLM call start for continuation
+      const llmModel = currentProvider === 'gemini' ? 'gemini-1.5-pro' : 'gpt-4o';
+      opsTracker.startLLMCall(currentProvider as LLMProvider, llmModel);
+      const llmStartTime = Date.now();
 
       const response = await api.chat({
         provider: currentProvider,
@@ -766,12 +1046,58 @@ export default function ChatPage() {
         mcpApiKey: mcpApiKey || undefined, // MCP server API key
       });
 
-      if (response.message) {
-        addChatMessage(response.message);
-      }
+      // Track ops: LLM call complete with token estimates
+      const inputTokenEstimate = Math.ceil(JSON.stringify(cleanedMessages).length / 4);
+      const outputTokenEstimate = Math.ceil((response.message?.content?.length || 0) / 4);
+      opsTracker.completeLLMCall(inputTokenEstimate, outputTokenEstimate);
 
-      // Recursive tool calls
+      // Handle tool calls - attach results before adding message (same as handleSend)
       if (response.toolCalls && response.toolResults) {
+        // Track ops: Process each tool call
+        const toolCallsWithResults = response.toolCalls.map((tc: ToolCall, i: number) => {
+          const toolResult = response.toolResults[i];
+
+          // Track ops: Tool call start
+          opsTracker.startToolCall(tc.id, tc.name, tc.arguments as Record<string, unknown>);
+
+          // Parse the result content
+          let parsedResult;
+          if (toolResult.content) {
+            try {
+              parsedResult = JSON.parse(toolResult.content);
+
+              // Unwrap if response was wrapped by TransformInterceptor
+              if (parsedResult.success !== undefined && parsedResult.data !== undefined) {
+                parsedResult = parsedResult.data;
+              }
+            } catch {
+              parsedResult = { content: toolResult.content };
+            }
+          }
+
+          // Track ops: Tool call complete with result
+          const resultNodeId = opsTracker.completeToolCall(tc.id, tc.name, parsedResult);
+
+          // Track ops: Widget render if tool has a widget
+          const toolDef = tools.find(t => t.name === tc.name);
+          const widgetUri = toolDef?.widget?.route || toolDef?.outputTemplate || toolDef?._meta?.['openai/outputTemplate'];
+          if (widgetUri && parsedResult && resultNodeId) {
+            opsTracker.trackWidget(widgetUri, tc.name, parsedResult, resultNodeId);
+          }
+
+          return {
+            ...tc,
+            result: parsedResult,
+          };
+        });
+
+        // Add assistant message with tool calls (with results attached)
+        if (response.message) {
+          response.message.toolCalls = toolCallsWithResults;
+          addChatMessage(response.message);
+        }
+
+        // Add tool result messages
         const newToolResults: ChatMessage[] = [];
         for (const result of response.toolResults) {
           addChatMessage(result);
@@ -784,16 +1110,28 @@ export default function ChatPage() {
           response.message!,
           ...newToolResults,
         ];
-        await continueChatWithToolResults(apiKey, nextMessages);
+        await continueChatWithToolResults(apiKey, nextMessages, false);
+      } else {
+        // No tool calls, just add the message
+        if (response.message) {
+          addChatMessage(response.message);
+          
+          // Track ops: Final response
+          opsTracker.trackResponse(
+            response.message.content || '',
+            outputTokenEstimate
+          );
+        }
       }
     } catch (error) {
       console.error('Continuation error:', error);
+      // Track ops: Error
+      opsTracker.errorLLMCall();
     }
   };
 
   const saveApiKey = (provider: 'openai' | 'gemini') => {
-    const input = document.getElementById(`${provider}-api-key`) as HTMLInputElement;
-    const key = input?.value.trim();
+    const key = provider === 'openai' ? openaiApiKeyInput.trim() : geminiApiKeyInput.trim();
 
     if (!key || key === '••••••••') {
       alert('Please enter a valid API key');
@@ -801,7 +1139,12 @@ export default function ChatPage() {
     }
 
     localStorage.setItem(`${provider}_api_key`, key);
-    input.value = '••••••••';
+    // Show masked value after save
+    if (provider === 'openai') {
+      setOpenaiApiKeyInput('••••••••');
+    } else {
+      setGeminiApiKeyInput('••••••••');
+    }
     alert(`${provider === 'openai' ? 'OpenAI' : 'Gemini'} API key saved`);
   };
 
@@ -856,6 +1199,20 @@ export default function ChatPage() {
           )}
 
 
+          {/* Ops View Toggle */}
+          <button
+            onClick={toggleOpsView}
+            className={`h-8 w-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${isOpsViewOpen
+              ? 'bg-indigo-500/20 text-indigo-400 ring-1 ring-indigo-500/40'
+              : 'bg-zinc-800/80 text-zinc-500 hover:bg-zinc-700/80 hover:text-zinc-300'
+              }`}
+            title="Operations"
+          >
+            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+            </svg>
+          </button>
+
           <button
             onClick={() => setShowSettings(!showSettings)}
             className={`h-8 w-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${showSettings
@@ -867,7 +1224,10 @@ export default function ChatPage() {
             <Cog6ToothIcon className="h-4 w-4" />
           </button>
           <button
-            onClick={clearChat}
+            onClick={() => {
+              clearChat();
+              clearOpsSessionStore();
+            }}
             className="h-8 w-8 rounded-lg flex items-center justify-center bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground transition-all flex-shrink-0"
             title="Clear chat"
           >
@@ -974,7 +1334,8 @@ export default function ChatPage() {
                           type="password"
                           className="input flex-1 text-sm bg-background/50"
                           placeholder="sk-proj-..."
-                          defaultValue={localStorage.getItem('openai_api_key') || ''}
+                          value={openaiApiKeyInput}
+                          onChange={(e) => setOpenaiApiKeyInput(e.target.value)}
                         />
                         <button onClick={() => saveApiKey('openai')} className="btn btn-primary btn-sm px-4">
                           Save
@@ -1006,7 +1367,8 @@ export default function ChatPage() {
                           type="password"
                           className="input flex-1 text-sm bg-background/50"
                           placeholder="AIza..."
-                          defaultValue={localStorage.getItem('gemini_api_key') || ''}
+                          value={geminiApiKeyInput}
+                          onChange={(e) => setGeminiApiKeyInput(e.target.value)}
                         />
                         <button onClick={() => saveApiKey('gemini')} className="btn btn-primary btn-sm px-4">
                           Save
@@ -1176,9 +1538,12 @@ export default function ChatPage() {
         </div>
       )}
 
-      {/* ChatGPT-style Messages Container - ONLY this scrolls */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden">
-        <div className="max-w-5xl mx-auto px-4 py-6 space-y-6 min-h-full">
+      {/* Main Content Area with optional Ops split view */}
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        {/* Chat Messages Container */}
+        <div className={`flex flex-col overflow-hidden transition-all duration-300 ${isOpsViewOpen ? 'w-3/5' : 'w-full'}`}>
+          <div className="flex-1 overflow-y-auto overflow-x-hidden">
+            <div className={`mx-auto px-4 py-6 space-y-6 ${isOpsViewOpen ? 'max-w-3xl' : 'max-w-5xl'}`}>
           {chatMessages.length === 0 && !loading ? (
             /* Welcome Screen */
             <div className="flex flex-col items-center justify-center min-h-[calc(100vh-300px)] animate-fade-in">
@@ -1373,7 +1738,16 @@ export default function ChatPage() {
             </>
           )}
           <div ref={messagesEndRef} />
+            </div>
+          </div>
         </div>
+
+        {/* Ops Canvas Panel */}
+        {isOpsViewOpen && (
+          <div className="w-2/5 min-w-[320px] border-l border-zinc-800 flex flex-col overflow-hidden">
+            <OpsCanvas className="flex-1" />
+          </div>
+        )}
       </div>
 
       {/* Sleek Professional Input Area */}
@@ -1878,9 +2252,11 @@ function ToolCallComponent({ toolCall, tools }: { toolCall: ToolCall; tools: Too
   return (
     <div className="relative group/widget">
       {componentUri && widgetData && (
-        <div className="rounded-lg overflow-hidden max-w-5xl">
-          <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
-        </div>
+        <WidgetErrorBoundary>
+          <div className="rounded-lg overflow-hidden max-w-5xl" style={{ minHeight: '100px' }}>
+            <WidgetRenderer uri={componentUri} data={widgetData} className="widget-in-chat" />
+          </div>
+        </WidgetErrorBoundary>
       )}
       <button
         onClick={() => setShowArgs(!showArgs)}