nitrostack 1.0.72 → 1.0.73

package/src/studio/lib/ops-tracker.ts

@@ -0,0 +1,416 @@
+/**
+ * Ops Tracker - Utility functions for tracking agent operations
+ */
+
+import { useOpsStore } from './ops-store';
+import type {
+  LLMProvider,
+  UserPromptNodeData,
+  LLMCallNodeData,
+  ToolCallNodeData,
+  ToolResultNodeData,
+  WidgetRenderNodeData,
+  LLMResponseNodeData,
+} from './ops-types';
+
+// Get the store actions
+const getStore = () => useOpsStore.getState();
+
+/**
+ * Track a user prompt - this starts a new turn
+ */
+export function trackUserPrompt(content: string, hasImage: boolean = false): string {
+  const store = getStore();
+  
+  // Start a new turn
+  store.startTurn(content);
+  
+  const data: UserPromptNodeData = {
+    status: 'success',
+    label: 'User',
+    content,
+    hasImage,
+  };
+  
+  return store.addNode('user_prompt', data);
+}
+
+/**
+ * Start tracking an LLM call
+ */
+export function trackLLMCallStart(
+  provider: LLMProvider,
+  model: string,
+  temperature?: number
+): string {
+  const store = getStore();
+  
+  const data: LLMCallNodeData = {
+    status: 'running',
+    label: `${provider} / ${model}`,
+    provider,
+    model,
+    temperature,
+  };
+  
+  return store.addNode('llm_call', data);
+}
+
+/**
+ * Complete an LLM call with token info
+ */
+export function trackLLMCallComplete(
+  nodeId: string,
+  inputTokens: number,
+  outputTokens: number,
+  duration: number
+): void {
+  const store = getStore();
+  
+  store.updateNode(nodeId, { duration });
+  store.updateNodeData(nodeId, {
+    status: 'success',
+    inputTokens,
+    outputTokens,
+    totalTokens: inputTokens + outputTokens,
+  });
+}
+
+/**
+ * Mark an LLM call as failed
+ */
+export function trackLLMCallError(nodeId: string, duration: number): void {
+  const store = getStore();
+  
+  store.updateNode(nodeId, { duration });
+  store.updateNodeData(nodeId, { status: 'error' });
+}
+
+/**
+ * Track a tool call start
+ */
+export function trackToolCallStart(
+  toolName: string,
+  toolArgs: Record<string, unknown>,
+  toolDescription?: string
+): string {
+  const store = getStore();
+  
+  const data: ToolCallNodeData = {
+    status: 'running',
+    label: toolName,
+    toolName,
+    toolArgs,
+    toolDescription,
+  };
+  
+  return store.addNode('tool_call', data);
+}
+
+/**
+ * Complete a tool call
+ */
+export function trackToolCallComplete(nodeId: string, duration: number): void {
+  const store = getStore();
+  
+  store.updateNode(nodeId, { duration });
+  store.updateNodeData(nodeId, { status: 'success' });
+}
+
+/**
+ * Mark a tool call as failed
+ */
+export function trackToolCallError(nodeId: string, duration: number): void {
+  const store = getStore();
+  
+  store.updateNode(nodeId, { duration });
+  store.updateNodeData(nodeId, { status: 'error' });
+}
+
+/**
+ * Track a tool result
+ */
+export function trackToolResult(
+  toolName: string,
+  result: unknown,
+  error?: string
+): string {
+  const store = getStore();
+  
+  const resultSize = typeof result === 'string' 
+    ? result.length 
+    : JSON.stringify(result).length;
+  
+  const data: ToolResultNodeData = {
+    status: error ? 'error' : 'success',
+    label: error ? 'Error' : 'Result',
+    toolName,
+    result,
+    error,
+    resultSize,
+  };
+  
+  return store.addNode('tool_result', data);
+}
+
+/**
+ * Track widget render
+ */
+export function trackWidgetRender(
+  widgetUri: string,
+  componentName: string,
+  data: unknown
+): string {
+  const store = getStore();
+  
+  const dataSize = typeof data === 'string'
+    ? data.length
+    : JSON.stringify(data).length;
+  
+  const nodeData: WidgetRenderNodeData = {
+    status: 'success',
+    label: componentName,
+    widgetUri,
+    componentName,
+    dataSize,
+  };
+  
+  return store.addNode('widget_render', nodeData);
+}
+
+/**
+ * Track LLM response - this ends the current turn
+ */
+export function trackLLMResponse(
+  content: string,
+  tokenCount?: number,
+  hasToolCalls: boolean = false,
+  toolCallCount: number = 0
+): string {
+  const store = getStore();
+  
+  const data: LLMResponseNodeData = {
+    status: 'success',
+    label: 'Response',
+    content,
+    tokenCount,
+    hasToolCalls,
+    toolCallCount,
+  };
+  
+  const nodeId = store.addNode('llm_response', data);
+  
+  // End the turn if this is a final response (no tool calls)
+  if (!hasToolCalls) {
+    store.endTurn();
+  }
+  
+  return nodeId;
+}
+
+/**
+ * Add edge between two nodes
+ */
+export function trackEdge(sourceId: string, targetId: string, label?: string): void {
+  const store = getStore();
+  store.addEdge(sourceId, targetId, label);
+}
+
+/**
+ * Start a new ops session
+ */
+export function startOpsSession(): void {
+  const store = getStore();
+  store.startSession();
+}
+
+/**
+ * Clear the current ops session
+ */
+export function clearOpsSession(): void {
+  const store = getStore();
+  store.clearSession();
+}
+
+/**
+ * Comprehensive tracking helper for a full chat turn
+ */
+export class OpsTurnTracker {
+  private userPromptId: string | null = null;
+  private llmCallId: string | null = null;
+  private toolCallIds: Map<string, string> = new Map();
+  private llmCallStartTime: number = 0;
+  private toolCallStartTimes: Map<string, number> = new Map();
+  private lastNodeId: string | null = null;
+  
+  /**
+   * Start tracking a new conversation turn
+   */
+  startTurn(userMessage: string, hasImage: boolean = false): void {
+    // Clear previous state
+    this.reset();
+    
+    this.userPromptId = trackUserPrompt(userMessage, hasImage);
+    this.lastNodeId = this.userPromptId;
+  }
+  
+  /**
+   * Track LLM call start
+   */
+  startLLMCall(provider: LLMProvider, model: string): void {
+    this.llmCallStartTime = Date.now();
+    this.llmCallId = trackLLMCallStart(provider, model);
+    
+    // Connect user prompt to LLM call
+    if (this.lastNodeId && this.llmCallId) {
+      trackEdge(this.lastNodeId, this.llmCallId);
+    }
+    this.lastNodeId = this.llmCallId;
+  }
+  
+  /**
+   * Track LLM call completion
+   */
+  completeLLMCall(inputTokens: number, outputTokens: number): void {
+    if (this.llmCallId) {
+      const duration = Date.now() - this.llmCallStartTime;
+      trackLLMCallComplete(this.llmCallId, inputTokens, outputTokens, duration);
+    }
+  }
+  
+  /**
+   * Track LLM call error
+   */
+  errorLLMCall(): void {
+    if (this.llmCallId) {
+      const duration = Date.now() - this.llmCallStartTime;
+      trackLLMCallError(this.llmCallId, duration);
+    }
+  }
+  
+  /**
+   * Track tool call start
+   */
+  startToolCall(toolCallId: string, toolName: string, toolArgs: Record<string, unknown>): void {
+    this.toolCallStartTimes.set(toolCallId, Date.now());
+    const nodeId = trackToolCallStart(toolName, toolArgs);
+    this.toolCallIds.set(toolCallId, nodeId);
+    
+    // Connect LLM call to tool call
+    if (this.lastNodeId && nodeId) {
+      trackEdge(this.lastNodeId, nodeId);
+    }
+    this.lastNodeId = nodeId;
+  }
+  
+  /**
+   * Track tool call completion with result
+   */
+  completeToolCall(
+    toolCallId: string, 
+    toolName: string, 
+    result: unknown, 
+    error?: string
+  ): string | null {
+    const nodeId = this.toolCallIds.get(toolCallId);
+    const startTime = this.toolCallStartTimes.get(toolCallId);
+    
+    if (nodeId && startTime) {
+      const duration = Date.now() - startTime;
+      if (error) {
+        trackToolCallError(nodeId, duration);
+      } else {
+        trackToolCallComplete(nodeId, duration);
+      }
+    }
+    
+    // Add tool result node
+    const resultNodeId = trackToolResult(toolName, result, error);
+    
+    // Connect tool call to result
+    if (nodeId && resultNodeId) {
+      trackEdge(nodeId, resultNodeId);
+    }
+    this.lastNodeId = resultNodeId;
+    
+    return resultNodeId;
+  }
+  
+  /**
+   * Track widget render
+   */
+  trackWidget(
+    widgetUri: string, 
+    componentName: string, 
+    data: unknown, 
+    sourceNodeId?: string
+  ): string {
+    const nodeId = trackWidgetRender(widgetUri, componentName, data);
+    
+    // Connect to source node if provided, otherwise to last node
+    const source = sourceNodeId || this.lastNodeId;
+    if (source && nodeId) {
+      trackEdge(source, nodeId);
+    }
+    this.lastNodeId = nodeId;
+    
+    return nodeId;
+  }
+  
+  /**
+   * Track final LLM response
+   */
+  trackResponse(
+    content: string, 
+    tokenCount?: number,
+    sourceNodeId?: string
+  ): string {
+    const hasToolCalls = this.toolCallIds.size > 0;
+    const nodeId = trackLLMResponse(content, tokenCount, false, 0);
+    
+    // Connect to source node
+    const source = sourceNodeId || this.lastNodeId;
+    if (source && nodeId) {
+      trackEdge(source, nodeId);
+    }
+    this.lastNodeId = nodeId;
+    
+    return nodeId;
+  }
+  
+  /**
+   * Get the last LLM call node ID
+   */
+  getLastLLMCallId(): string | null {
+    return this.llmCallId;
+  }
+  
+  /**
+   * Get the last node ID
+   */
+  getLastNodeId(): string | null {
+    return this.lastNodeId;
+  }
+  
+  /**
+   * Get tool call node ID by tool call ID
+   */
+  getToolCallNodeId(toolCallId: string): string | undefined {
+    return this.toolCallIds.get(toolCallId);
+  }
+  
+  /**
+   * Reset tracker for next turn
+   */
+  reset(): void {
+    this.userPromptId = null;
+    this.llmCallId = null;
+    this.toolCallIds.clear();
+    this.llmCallStartTime = 0;
+    this.toolCallStartTimes.clear();
+    this.lastNodeId = null;
+  }
+}
+
+// Export singleton tracker
+export const opsTracker = new OpsTurnTracker();

package/src/studio/lib/ops-types.ts

@@ -0,0 +1,164 @@
+/**
+ * Ops Types - Type definitions for Agent Operations Visualization
+ */
+
+// Node status
+export type OpsNodeStatus = 'pending' | 'running' | 'success' | 'error';
+
+// Node types
+export type OpsNodeType = 
+  | 'user_prompt' 
+  | 'llm_call' 
+  | 'tool_call' 
+  | 'tool_result' 
+  | 'widget_render' 
+  | 'llm_response';
+
+// LLM Provider
+export type LLMProvider = 'openai' | 'gemini' | 'anthropic' | 'unknown';
+
+// Base node data interface
+export interface OpsNodeDataBase {
+  status: OpsNodeStatus;
+  label?: string;
+}
+
+// User prompt node data
+export interface UserPromptNodeData extends OpsNodeDataBase {
+  content: string;
+  hasImage?: boolean;
+}
+
+// LLM call node data
+export interface LLMCallNodeData extends OpsNodeDataBase {
+  provider: LLMProvider;
+  model: string;
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+  cost?: number;
+  temperature?: number;
+}
+
+// Tool call node data
+export interface ToolCallNodeData extends OpsNodeDataBase {
+  toolName: string;
+  toolArgs: Record<string, unknown>;
+  toolDescription?: string;
+}
+
+// Tool result node data
+export interface ToolResultNodeData extends OpsNodeDataBase {
+  toolName: string;
+  result: unknown;
+  error?: string;
+  resultSize?: number;
+}
+
+// Widget render node data
+export interface WidgetRenderNodeData extends OpsNodeDataBase {
+  widgetUri: string;
+  componentName: string;
+  dataSize?: number;
+}
+
+// LLM response node data
+export interface LLMResponseNodeData extends OpsNodeDataBase {
+  content: string;
+  tokenCount?: number;
+  hasToolCalls?: boolean;
+  toolCallCount?: number;
+}
+
+// Union type for all node data
+export type OpsNodeData = 
+  | UserPromptNodeData
+  | LLMCallNodeData
+  | ToolCallNodeData
+  | ToolResultNodeData
+  | WidgetRenderNodeData
+  | LLMResponseNodeData;
+
+// Ops node interface
+export interface OpsNode {
+  id: string;
+  type: OpsNodeType;
+  timestamp: number;
+  duration?: number;
+  data: OpsNodeData;
+  position?: { x: number; y: number };
+  turnId: string; // Which turn/cycle this node belongs to
+}
+
+// Ops edge interface
+export interface OpsEdge {
+  id: string;
+  source: string;
+  target: string;
+  animated?: boolean;
+  label?: string;
+  turnId: string; // Which turn/cycle this edge belongs to
+}
+
+// A turn/cycle represents one user prompt and its entire response chain
+export interface OpsTurn {
+  id: string;
+  startTime: number;
+  endTime?: number;
+  promptPreview: string; // First ~30 chars of user prompt
+  nodeCount: number;
+  hasError: boolean;
+}
+
+// Session summary
+export interface OpsSessionSummary {
+  totalTokens: number;
+  inputTokens: number;
+  outputTokens: number;
+  estimatedCost: number;
+  totalDuration: number;
+  toolCalls: number;
+  llmCalls: number;
+  widgetRenders: number;
+  errors: number;
+}
+
+// Ops session interface
+export interface OpsSession {
+  id: string;
+  startTime: number;
+  endTime?: number;
+  nodes: OpsNode[];
+  edges: OpsEdge[];
+  turns: OpsTurn[];
+  summary: OpsSessionSummary;
+}
+
+// React Flow node type mapping - color names for Tailwind classes
+export const OPS_NODE_COLORS: Record<OpsNodeType, string> = {
+  user_prompt: 'blue',
+  llm_call: 'purple',
+  tool_call: 'orange',
+  tool_result: 'green',
+  widget_render: 'cyan',
+  llm_response: 'amber',
+};
+
+// Hex colors for minimap and other places that need actual colors
+export const OPS_NODE_HEX_COLORS: Record<OpsNodeType, string> = {
+  user_prompt: '#3B82F6',      // Blue
+  llm_call: '#8B5CF6',         // Purple
+  tool_call: '#F97316',        // Orange
+  tool_result: '#22C55E',      // Green
+  widget_render: '#06B6D4',    // Cyan
+  llm_response: '#F59E0B',     // Amber
+};
+
+export const OPS_NODE_LABELS: Record<OpsNodeType, string> = {
+  user_prompt: 'Prompt',
+  llm_call: 'LLM',
+  tool_call: 'Tool',
+  tool_result: 'Result',
+  widget_render: 'Widget',
+  llm_response: 'Response',
+};

package/src/studio/lib/store.ts

@@ -9,6 +9,8 @@ import type {
   PingResult,
   HealthCheck,
   OAuthState,
+  ChatFile,
+  EnlargeModalState,
 } from './types';
 
 interface StudioState {
@@ -36,8 +38,8 @@ interface StudioState {
   clearChat: () => void;
   currentProvider: 'openai' | 'gemini';
   setCurrentProvider: (provider: 'openai' | 'gemini') => void;
-  currentFile: { data: string; type: string; name: string } | null;
-  setCurrentFile: (file: { data: string; type: string; name: string } | null) => void;
+  currentFile: ChatFile | null;
+  setCurrentFile: (file: ChatFile | null) => void;
 
   // Auth
   jwtToken: string | null;
@@ -61,12 +63,8 @@ interface StudioState {
   setHealthChecks: (checks: HealthCheck[]) => void;
 
   // Modal
-  enlargeModal: {
-    open: boolean;
-    type: 'tool' | 'resource' | null;
-    item: any;
-  };
-  openEnlargeModal: (type: 'tool' | 'resource', item: any) => void;
+  enlargeModal: EnlargeModalState;
+  openEnlargeModal: (type: 'tool' | 'resource', item: Tool | Resource) => void;
   closeEnlargeModal: () => void;
 
   // Loading states
@@ -163,7 +161,7 @@ export const useStudioStore = create<StudioState>((set) => ({
       currentToken: null,
     },
   setOAuthState: (newState) => {
-    const updatedState = (state: any) => {
+    set((state) => {
       const newOAuthState = { ...state.oauthState, ...newState };
 
       // Persist to localStorage
@@ -172,8 +170,7 @@ export const useStudioStore = create<StudioState>((set) => ({
       }
 
       return { oauthState: newOAuthState };
-    };
-    set(updatedState);
+    });
   },
 
   // Ping