nitrostack 1.0.71 → 1.0.73

package/src/studio/components/ops/OpsNodeDetailPanel.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import type { OpsNode } from '@/lib/ops-types';
+import { OPS_NODE_LABELS, OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface OpsNodeDetailPanelProps {
+  node: OpsNode;
+  onClose: () => void;
+}
+
+export function OpsNodeDetailPanel({ node, onClose }: OpsNodeDetailPanelProps) {
+  const color = OPS_NODE_HEX_COLORS[node.type];
+  const label = OPS_NODE_LABELS[node.type];
+
+  const formatTime = (ts: number) => {
+    return new Date(ts).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  };
+
+  const formatDuration = (ms?: number) => {
+    if (!ms) return '-';
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  return (
+    <div className="absolute top-3 right-3 w-72 bg-zinc-900 rounded-xl border border-zinc-800 shadow-xl overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800/80">
+        <div className="flex items-center gap-2">
+          <div 
+            className="w-2 h-2 rounded-sm" 
+            style={{ backgroundColor: color }} 
+          />
+          <span className="text-sm font-medium text-zinc-200">{label}</span>
+        </div>
+        <button
+          onClick={onClose}
+          className="w-6 h-6 rounded-md hover:bg-zinc-800 flex items-center justify-center transition-colors"
+        >
+          <XMarkIcon className="w-3.5 h-3.5 text-zinc-500" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="px-4 py-3 space-y-3 max-h-80 overflow-y-auto">
+        {/* Timing */}
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Time</div>
+            <div className="text-xs text-zinc-300 font-mono">{formatTime(node.timestamp)}</div>
+          </div>
+          <div>
+            <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Duration</div>
+            <div className="text-xs text-zinc-300 font-mono">{formatDuration(node.duration)}</div>
+          </div>
+        </div>
+
+        {/* Status */}
+        <div>
+          <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Status</div>
+          <div className={`text-xs ${
+            node.data.status === 'error' ? 'text-red-400' :
+            node.data.status === 'running' ? 'text-indigo-400' :
+            node.data.status === 'success' ? 'text-green-400' : 'text-zinc-400'
+          }`}>
+            {node.data.status}
+          </div>
+        </div>
+
+        {/* Type-specific data */}
+        {node.type === 'user_prompt' && 'content' in node.data && (
+          <div>
+            <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-1">Content</div>
+            <div className="text-xs text-zinc-400 bg-zinc-800/50 rounded-lg p-2.5 max-h-24 overflow-y-auto">
+              {node.data.content}
+            </div>
+          </div>
+        )}
+
+        {node.type === 'llm_call' && 'model' in node.data && (
+          <>
+            <div>
+              <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Model</div>
+              <div className="text-xs text-zinc-300 font-mono">{node.data.model}</div>
+            </div>
+            {node.data.totalTokens && (
+              <div className="grid grid-cols-3 gap-2">
+                <div>
+                  <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Input</div>
+                  <div className="text-xs text-zinc-300 font-mono tabular-nums">{node.data.inputTokens}</div>
+                </div>
+                <div>
+                  <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Output</div>
+                  <div className="text-xs text-zinc-300 font-mono tabular-nums">{node.data.outputTokens}</div>
+                </div>
+                <div>
+                  <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Total</div>
+                  <div className="text-xs text-zinc-300 font-mono tabular-nums">{node.data.totalTokens}</div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {node.type === 'tool_call' && 'toolName' in node.data && (
+          <>
+            <div>
+              <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-0.5">Tool</div>
+              <div className="text-xs text-zinc-300 font-mono">{node.data.toolName}</div>
+            </div>
+            {Object.keys(node.data.toolArgs || {}).length > 0 && (
+              <div>
+                <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-1">Arguments</div>
+                <pre className="text-[10px] text-zinc-400 bg-zinc-800/50 rounded-lg p-2.5 overflow-x-auto font-mono">
+                  {JSON.stringify(node.data.toolArgs, null, 2)}
+                </pre>
+              </div>
+            )}
+          </>
+        )}
+
+        {node.type === 'tool_result' && 'result' in node.data && (
+          <div>
+            <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-1">Result</div>
+            <pre className="text-[10px] text-zinc-400 bg-zinc-800/50 rounded-lg p-2.5 max-h-32 overflow-auto font-mono">
+              {typeof node.data.result === 'string' 
+                ? node.data.result 
+                : JSON.stringify(node.data.result, null, 2)}
+            </pre>
+          </div>
+        )}
+
+        {node.type === 'llm_response' && 'content' in node.data && (
+          <div>
+            <div className="text-[10px] text-zinc-600 uppercase tracking-wider mb-1">Response</div>
+            <div className="text-xs text-zinc-400 bg-zinc-800/50 rounded-lg p-2.5 max-h-32 overflow-y-auto">
+              {node.data.content}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/studio/components/ops/OpsSummaryBar.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import type { OpsSessionSummary } from '@/lib/ops-types';
+
+interface OpsSummaryBarProps {
+  summary: OpsSessionSummary;
+  compact?: boolean;
+}
+
+function formatTokens(count: number): string {
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
+  return count.toString();
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+export function OpsSummaryBar({ summary, compact = false }: OpsSummaryBarProps) {
+  // Compact mode for split view - minimal info
+  if (compact) {
+    return (
+      <div className="flex items-center justify-between px-3 py-1.5 bg-zinc-900/80 border-t border-zinc-800/60">
+        <div className="flex items-center gap-3">
+          <span className="text-[9px] text-zinc-500">
+            <span className="text-zinc-400 font-medium tabular-nums">{formatTokens(summary.totalTokens)}</span> tokens
+          </span>
+          <span className="text-[9px] text-zinc-600">·</span>
+          <span className="text-[9px] text-zinc-500">
+            <span className="text-zinc-400 font-medium tabular-nums">{formatDuration(summary.totalDuration)}</span>
+          </span>
+        </div>
+        {summary.errors > 0 && (
+          <span className="text-[9px] text-red-400 tabular-nums">{summary.errors} err</span>
+        )}
+      </div>
+    );
+  }
+
+  // Full mode for expanded view
+  return (
+    <div className="flex items-center justify-between px-4 py-2.5 bg-zinc-900/80 border-t border-zinc-800/80">
+      {/* Tokens */}
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] uppercase tracking-wider text-zinc-600">Tokens</span>
+          <span className="text-xs font-medium text-zinc-300 tabular-nums">
+            {formatTokens(summary.totalTokens)}
+          </span>
+          <span className="text-[10px] text-zinc-600">
+            ({formatTokens(summary.inputTokens)} in / {formatTokens(summary.outputTokens)} out)
+          </span>
+        </div>
+      </div>
+
+      {/* Operations */}
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-600">LLM</span>
+          <span className="text-xs font-medium text-zinc-400 tabular-nums">{summary.llmCalls}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-600">Tools</span>
+          <span className="text-xs font-medium text-zinc-400 tabular-nums">{summary.toolCalls}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-600">Widgets</span>
+          <span className="text-xs font-medium text-zinc-400 tabular-nums">{summary.widgetRenders}</span>
+        </div>
+        {summary.errors > 0 && (
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-red-500">Errors</span>
+            <span className="text-xs font-medium text-red-400 tabular-nums">{summary.errors}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Duration */}
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] uppercase tracking-wider text-zinc-600">Duration</span>
+        <span className="text-xs font-medium text-zinc-300 tabular-nums">
+          {formatDuration(summary.totalDuration)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/studio/components/ops/index.ts

@@ -0,0 +1,5 @@
+export { OpsCanvas } from './OpsCanvas';
+export { OpsSummaryBar } from './OpsSummaryBar';
+export { OpsNodeDetailPanel } from './OpsNodeDetailPanel';
+export * from './nodes';
+

package/src/studio/components/ops/nodes/BaseNode.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Handle, Position } from 'reactflow';
+import type { OpsNodeStatus } from '@/lib/ops-types';
+
+interface BaseNodeProps {
+  children: React.ReactNode;
+  color: string;
+  status?: OpsNodeStatus;
+  selected?: boolean;
+}
+
+const statusIndicators: Record<OpsNodeStatus, { color: string; animate: boolean }> = {
+  pending: { color: '#71717a', animate: false },
+  running: { color: '#6366f1', animate: true },
+  success: { color: '#22c55e', animate: false },
+  error: { color: '#ef4444', animate: false },
+};
+
+export function BaseNode({ children, color, status = 'success', selected }: BaseNodeProps) {
+  const indicator = statusIndicators[status];
+
+  return (
+    <div
+      className={`
+        relative min-w-[140px] bg-zinc-900 rounded-lg border transition-all
+        ${selected ? 'border-zinc-600 shadow-lg shadow-black/40' : 'border-zinc-800 hover:border-zinc-700'}
+      `}
+      style={{
+        boxShadow: selected ? `0 0 0 1px ${color}30` : undefined,
+      }}
+    >
+      {/* Left accent line */}
+      <div 
+        className="absolute left-0 top-2 bottom-2 w-0.5 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+
+      {/* Status indicator */}
+      <div className="absolute -top-1 -right-1">
+        <div 
+          className={`w-2 h-2 rounded-full ${indicator.animate ? 'animate-pulse' : ''}`}
+          style={{ backgroundColor: indicator.color }}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="px-3 py-2.5 pl-4">
+        {children}
+      </div>
+
+      {/* Handles */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!w-2 !h-2 !bg-zinc-700 !border-zinc-600"
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!w-2 !h-2 !bg-zinc-700 !border-zinc-600"
+      />
+    </div>
+  );
+}

package/src/studio/components/ops/nodes/LLMCallNode.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { LLMCallNodeData } from '@/lib/ops-types';
+import { SparklesIcon } from '@heroicons/react/24/outline';
+
+function formatTokens(count?: number): string {
+  if (!count) return '0';
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
+  return count.toString();
+}
+
+export function LLMCallNode({ data, selected }: NodeProps<LLMCallNodeData>) {
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.llm_call} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        <SparklesIcon className="w-3.5 h-3.5 text-purple-400 flex-shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            LLM Call
+          </div>
+          <div className="text-xs text-zinc-300">{data.model}</div>
+          {data.totalTokens && (
+            <div className="text-[10px] text-zinc-500 mt-1 tabular-nums">
+              {formatTokens(data.totalTokens)} tokens
+            </div>
+          )}
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/LLMResponseNode.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { LLMResponseNodeData } from '@/lib/ops-types';
+import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
+
+export function LLMResponseNode({ data, selected }: NodeProps<LLMResponseNodeData>) {
+  const content = data.content || '';
+  const preview = content.length > 50 ? content.substring(0, 50) + '...' : content;
+
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.llm_response} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        <ChatBubbleLeftRightIcon className="w-3.5 h-3.5 text-amber-400 flex-shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            Response
+          </div>
+          <div className="text-xs text-zinc-300 leading-relaxed">
+            {preview || 'Empty response'}
+          </div>
+          {data.tokenCount && (
+            <div className="text-[10px] text-zinc-500 mt-1 tabular-nums">
+              {data.tokenCount} tokens
+            </div>
+          )}
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/ToolCallNode.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { ToolCallNodeData } from '@/lib/ops-types';
+import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
+
+export function ToolCallNode({ data, selected }: NodeProps<ToolCallNodeData>) {
+  const argCount = Object.keys(data.toolArgs || {}).length;
+
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.tool_call} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        <WrenchScrewdriverIcon className="w-3.5 h-3.5 text-orange-400 flex-shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            Tool
+          </div>
+          <div className="text-xs text-zinc-300 font-mono">{data.toolName}</div>
+          {argCount > 0 && (
+            <div className="text-[10px] text-zinc-500 mt-1">
+              {argCount} {argCount === 1 ? 'arg' : 'args'}
+            </div>
+          )}
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/ToolResultNode.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { ToolResultNodeData } from '@/lib/ops-types';
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+
+function formatSize(bytes?: number): string {
+  if (!bytes) return '0 B';
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${bytes} B`;
+}
+
+export function ToolResultNode({ data, selected }: NodeProps<ToolResultNodeData>) {
+  const hasError = data.status === 'error' || !!data.error;
+
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.tool_result} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        {hasError ? (
+          <XCircleIcon className="w-3.5 h-3.5 text-red-400 flex-shrink-0 mt-0.5" />
+        ) : (
+          <CheckCircleIcon className="w-3.5 h-3.5 text-green-400 flex-shrink-0 mt-0.5" />
+        )}
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            Result
+          </div>
+          <div className={`text-xs ${hasError ? 'text-red-400' : 'text-zinc-300'}`}>
+            {hasError ? 'Error' : 'Success'}
+          </div>
+          {data.resultSize && (
+            <div className="text-[10px] text-zinc-500 mt-1 tabular-nums">
+              {formatSize(data.resultSize)}
+            </div>
+          )}
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/UserPromptNode.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { UserPromptNodeData } from '@/lib/ops-types';
+import { ChatBubbleLeftIcon, PhotoIcon } from '@heroicons/react/24/outline';
+
+export function UserPromptNode({ data, selected }: NodeProps<UserPromptNodeData>) {
+  const content = data.content || '';
+  const preview = content.length > 40 ? content.substring(0, 40) + '...' : content;
+
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.user_prompt} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        <ChatBubbleLeftIcon className="w-3.5 h-3.5 text-blue-400 flex-shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            Prompt
+          </div>
+          <div className="text-xs text-zinc-300 leading-relaxed break-words">
+            {preview}
+          </div>
+          {data.hasImage && (
+            <div className="flex items-center gap-1 mt-1.5 text-zinc-500">
+              <PhotoIcon className="w-3 h-3" />
+              <span className="text-[10px]">Image attached</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/WidgetRenderNode.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { NodeProps } from 'reactflow';
+import { BaseNode } from './BaseNode';
+import { OPS_NODE_HEX_COLORS } from '@/lib/ops-types';
+import type { WidgetRenderNodeData } from '@/lib/ops-types';
+import { CubeIcon } from '@heroicons/react/24/outline';
+
+export function WidgetRenderNode({ data, selected }: NodeProps<WidgetRenderNodeData>) {
+  return (
+    <BaseNode color={OPS_NODE_HEX_COLORS.widget_render} status={data.status} selected={selected}>
+      <div className="flex items-start gap-2">
+        <CubeIcon className="w-3.5 h-3.5 text-cyan-400 flex-shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider mb-0.5">
+            Widget
+          </div>
+          <div className="text-xs text-zinc-300">{data.componentName}</div>
+        </div>
+      </div>
+    </BaseNode>
+  );
+}

package/src/studio/components/ops/nodes/index.ts

@@ -0,0 +1,8 @@
+export { BaseNode } from './BaseNode';
+export { UserPromptNode } from './UserPromptNode';
+export { LLMCallNode } from './LLMCallNode';
+export { ToolCallNode } from './ToolCallNode';
+export { ToolResultNode } from './ToolResultNode';
+export { WidgetRenderNode } from './WidgetRenderNode';
+export { LLMResponseNode } from './LLMResponseNode';
+