nitrostack 1.0.71 → 1.0.73

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

@@ -0,0 +1,748 @@
+'use client';
+
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import ReactFlow, {
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  Panel,
+  BackgroundVariant,
+} from 'reactflow';
+import type { Node, Edge, NodeTypes } from 'reactflow';
+import 'reactflow/dist/style.css';
+
+import { useOpsStore } from '@/lib/ops-store';
+import type { OpsNode, OpsEdge, OpsNodeType, OpsTurn } from '@/lib/ops-types';
+import { OPS_NODE_HEX_COLORS, OPS_NODE_LABELS } from '@/lib/ops-types';
+import {
+  UserPromptNode,
+  LLMCallNode,
+  ToolCallNode,
+  ToolResultNode,
+  WidgetRenderNode,
+  LLMResponseNode,
+} from './nodes';
+import { OpsSummaryBar } from './OpsSummaryBar';
+import { OpsNodeDetailPanel } from './OpsNodeDetailPanel';
+import { 
+  ArrowsPointingOutIcon, 
+  XMarkIcon, 
+  PlayIcon, 
+  PauseIcon,
+  ArrowPathIcon,
+  Squares2X2Icon,
+  BoltIcon,
+} from '@heroicons/react/24/outline';
+
+// Define custom node types
+const nodeTypes: NodeTypes = {
+  user_prompt: UserPromptNode,
+  llm_call: LLMCallNode,
+  tool_call: ToolCallNode,
+  tool_result: ToolResultNode,
+  widget_render: WidgetRenderNode,
+  llm_response: LLMResponseNode,
+};
+
+// Convert OpsNode to React Flow Node - HORIZONTAL LAYOUT
+function convertToFlowNode(opsNode: OpsNode, index: number, isAnimating: boolean = false): Node {
+  const baseX = 60;
+  const baseY = 120;
+  const horizontalSpacing = 200;
+
+  const position = opsNode.position || {
+    x: baseX + (index * horizontalSpacing),
+    y: baseY,
+  };
+
+  return {
+    id: opsNode.id,
+    type: opsNode.type,
+    position,
+    data: {
+      ...opsNode.data,
+      duration: opsNode.duration,
+      isAnimating,
+    },
+    className: isAnimating ? 'ops-node-animate' : '',
+  };
+}
+
+// Convert OpsEdge to React Flow Edge
+function convertToFlowEdge(opsEdge: OpsEdge, isAnimating: boolean = false): Edge {
+  return {
+    id: opsEdge.id,
+    source: opsEdge.source,
+    target: opsEdge.target,
+    animated: isAnimating,
+    style: { 
+      strokeWidth: 1.5, 
+      stroke: isAnimating ? '#6366f1' : '#3f3f46',
+    },
+    type: 'smoothstep',
+  };
+}
+
+// Turn selector - minimal pill style
+function TurnSelector({ 
+  turns, 
+  selectedTurnId, 
+  onSelect,
+  disabled,
+}: { 
+  turns: OpsTurn[]; 
+  selectedTurnId: string | null; 
+  onSelect: (turnId: string | null) => void;
+  disabled?: boolean;
+}) {
+  if (turns.length === 0) return null;
+
+  return (
+    <div className={`flex items-center gap-1 ${disabled ? 'opacity-40 pointer-events-none' : ''}`}>
+      <button
+        onClick={() => onSelect(null)}
+        disabled={disabled}
+        className={`h-7 px-3 rounded-full text-xs font-medium transition-all ${
+          selectedTurnId === null 
+            ? 'bg-white text-zinc-900' 
+            : 'bg-zinc-800/80 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/80'
+        }`}
+      >
+        All
+      </button>
+      {turns.map((turn, index) => (
+        <button
+          key={turn.id}
+          onClick={() => onSelect(turn.id)}
+          disabled={disabled}
+          className={`h-7 min-w-7 px-2.5 rounded-full text-xs font-medium transition-all flex items-center justify-center ${
+            selectedTurnId === turn.id 
+              ? 'bg-white text-zinc-900' 
+              : 'bg-zinc-800/80 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/80'
+          } ${turn.hasError ? 'ring-1 ring-red-500/40' : ''}`}
+          title={turn.promptPreview}
+        >
+          {index + 1}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Minimal playback controls
+function PlaybackControls({
+  isPlaying,
+  onPlay,
+  onPause,
+  onReset,
+  currentNodeIndex,
+  totalNodes,
+  playbackSpeed,
+  onSpeedChange,
+}: {
+  isPlaying: boolean;
+  onPlay: () => void;
+  onPause: () => void;
+  onReset: () => void;
+  currentNodeIndex: number;
+  totalNodes: number;
+  playbackSpeed: number;
+  onSpeedChange: (speed: number) => void;
+}) {
+  if (totalNodes === 0) return null;
+
+  const progress = totalNodes > 0 ? (currentNodeIndex / totalNodes) * 100 : 0;
+
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={isPlaying ? onPause : onPlay}
+        className="h-7 w-7 rounded-full bg-indigo-500 hover:bg-indigo-400 flex items-center justify-center transition-colors"
+        title={isPlaying ? "Pause" : "Play"}
+      >
+        {isPlaying ? (
+          <PauseIcon className="w-3.5 h-3.5 text-white" />
+        ) : (
+          <PlayIcon className="w-3.5 h-3.5 text-white ml-0.5" />
+        )}
+      </button>
+      
+      <button
+        onClick={onReset}
+        className="h-7 w-7 rounded-full bg-zinc-800/80 hover:bg-zinc-700/80 flex items-center justify-center transition-colors"
+        title="Reset"
+      >
+        <ArrowPathIcon className="w-3.5 h-3.5 text-zinc-400" />
+      </button>
+      
+      {/* Progress */}
+      <div className="flex items-center gap-2 ml-1">
+        <div className="w-16 h-1 bg-zinc-800 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-indigo-500 transition-all duration-200"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <span className="text-[10px] text-zinc-500 font-mono tabular-nums w-8">
+          {currentNodeIndex}/{totalNodes}
+        </span>
+      </div>
+      
+      {/* Speed */}
+      <select
+        value={playbackSpeed}
+        onChange={(e) => onSpeedChange(Number(e.target.value))}
+        className="h-6 bg-zinc-800/80 border-0 rounded text-[10px] text-zinc-400 focus:ring-1 focus:ring-indigo-500/50 cursor-pointer px-1.5"
+      >
+        <option value={2000}>0.5x</option>
+        <option value={1000}>1x</option>
+        <option value={500}>2x</option>
+        <option value={250}>4x</option>
+      </select>
+    </div>
+  );
+}
+
+// Compact legend
+function OpsLegend() {
+  const items: { type: OpsNodeType; label: string }[] = [
+    { type: 'user_prompt', label: 'Prompt' },
+    { type: 'llm_call', label: 'LLM' },
+    { type: 'tool_call', label: 'Tool' },
+    { type: 'tool_result', label: 'Result' },
+    { type: 'widget_render', label: 'Widget' },
+    { type: 'llm_response', label: 'Response' },
+  ];
+
+  return (
+    <div className="flex items-center gap-3">
+      {items.map(({ type, label }) => (
+        <div key={type} className="flex items-center gap-1.5">
+          <div 
+            className="w-2 h-2 rounded-sm" 
+            style={{ backgroundColor: OPS_NODE_HEX_COLORS[type] }} 
+          />
+          <span className="text-[10px] text-zinc-500">{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Empty state
+function OpsEmptyState({ className = '' }: { className?: string }) {
+  return (
+    <div className={`flex items-center justify-center h-full ${className}`}>
+      <div className="text-center">
+        <div className="w-10 h-10 mx-auto mb-3 rounded-xl bg-zinc-800/50 flex items-center justify-center">
+          <BoltIcon className="w-5 h-5 text-zinc-600" />
+        </div>
+        <p className="text-sm text-zinc-500">No operations yet</p>
+        <p className="text-xs text-zinc-600 mt-1">Start a conversation to see the workflow</p>
+      </div>
+    </div>
+  );
+}
+
+// Hook for progressive playback
+function useProgressivePlayback(
+  allNodes: OpsNode[],
+  allEdges: OpsEdge[],
+  selectedTurnId: string | null
+) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [visibleNodeCount, setVisibleNodeCount] = useState<number | null>(null);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1000);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = useState(-1);
+  const playbackTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const filteredNodes = useMemo(() => {
+    if (selectedTurnId === null) return allNodes;
+    return allNodes.filter(n => n.turnId === selectedTurnId);
+  }, [allNodes, selectedTurnId]);
+
+  const filteredEdges = useMemo(() => {
+    if (selectedTurnId === null) return allEdges;
+    return allEdges.filter(e => e.turnId === selectedTurnId);
+  }, [allEdges, selectedTurnId]);
+
+  const visibleNodes = useMemo(() => {
+    if (visibleNodeCount === null) {
+      return filteredNodes.map((node, idx) => convertToFlowNode(node, idx, false));
+    }
+    return filteredNodes
+      .slice(0, visibleNodeCount)
+      .map((node, idx) => convertToFlowNode(node, idx, idx === lastAnimatedIndex));
+  }, [filteredNodes, visibleNodeCount, lastAnimatedIndex]);
+
+  const visibleEdges = useMemo(() => {
+    if (visibleNodeCount === null) {
+      return filteredEdges.map(edge => convertToFlowEdge(edge, false));
+    }
+    
+    const visibleNodeIds = new Set(visibleNodes.map(n => n.id));
+    return filteredEdges
+      .filter(edge => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target))
+      .map((edge) => convertToFlowEdge(edge, true));
+  }, [filteredEdges, visibleNodes, visibleNodeCount]);
+
+  const startPlayback = useCallback(() => {
+    setVisibleNodeCount(0);
+    setLastAnimatedIndex(-1);
+    setIsPlaying(true);
+  }, []);
+
+  const pausePlayback = useCallback(() => {
+    setIsPlaying(false);
+    if (playbackTimerRef.current) {
+      clearTimeout(playbackTimerRef.current);
+      playbackTimerRef.current = null;
+    }
+  }, []);
+
+  const resetPlayback = useCallback(() => {
+    pausePlayback();
+    setVisibleNodeCount(null);
+    setLastAnimatedIndex(-1);
+  }, [pausePlayback]);
+
+  useEffect(() => {
+    if (!isPlaying || visibleNodeCount === null) return;
+
+    if (visibleNodeCount >= filteredNodes.length) {
+      setIsPlaying(false);
+      return;
+    }
+
+    playbackTimerRef.current = setTimeout(() => {
+      setLastAnimatedIndex(visibleNodeCount);
+      setVisibleNodeCount(prev => (prev ?? 0) + 1);
+    }, playbackSpeed);
+
+    return () => {
+      if (playbackTimerRef.current) {
+        clearTimeout(playbackTimerRef.current);
+      }
+    };
+  }, [isPlaying, visibleNodeCount, filteredNodes.length, playbackSpeed]);
+
+  useEffect(() => {
+    resetPlayback();
+  }, [selectedTurnId, resetPlayback]);
+
+  return {
+    isPlaying,
+    visibleNodes,
+    visibleEdges,
+    visibleNodeCount: visibleNodeCount ?? filteredNodes.length,
+    totalNodes: filteredNodes.length,
+    playbackSpeed,
+    startPlayback,
+    pausePlayback,
+    resetPlayback,
+    setPlaybackSpeed,
+    isInPlaybackMode: visibleNodeCount !== null,
+  };
+}
+
+// Main canvas component
+interface OpsFlowCanvasProps {
+  nodes: Node[];
+  edges: Edge[];
+  onNodesChange: ReturnType<typeof useNodesState>[2];
+  onEdgesChange: ReturnType<typeof useEdgesState>[2];
+  onNodeClick: (event: React.MouseEvent, node: Node) => void;
+  onPaneClick: () => void;
+  selectedNode: OpsNode | undefined;
+  onCloseDetail: () => void;
+  turns: OpsTurn[];
+  selectedTurnId: string | null;
+  onSelectTurn: (turnId: string | null) => void;
+  isPlaying: boolean;
+  visibleNodeCount: number;
+  totalNodes: number;
+  playbackSpeed: number;
+  onPlay: () => void;
+  onPause: () => void;
+  onReset: () => void;
+  onSpeedChange: (speed: number) => void;
+  onExpand?: () => void;
+  isCompact?: boolean;
+  isExpanded?: boolean;
+}
+
+function OpsFlowCanvas({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeClick,
+  onPaneClick,
+  selectedNode,
+  onCloseDetail,
+  turns,
+  selectedTurnId,
+  onSelectTurn,
+  isPlaying,
+  visibleNodeCount,
+  totalNodes,
+  playbackSpeed,
+  onPlay,
+  onPause,
+  onReset,
+  onSpeedChange,
+  onExpand,
+  isCompact = false,
+  isExpanded = false,
+}: OpsFlowCanvasProps) {
+  // Different zoom settings for split view vs expanded view
+  const fitViewOptions = isExpanded 
+    ? { padding: 0.2, minZoom: 1.2, maxZoom: 1.5 }  // Expanded: zoomed in
+    : { padding: 0.3, minZoom: 0.5, maxZoom: 0.8 }; // Split: zoomed out to see more
+  
+  const defaultZoom = isExpanded ? 1.5 : 0.6;
+
+  return (
+    <div className="flex-1 relative bg-zinc-950">
+      <style jsx global>{`
+        .ops-node-animate {
+          animation: opsNodeIn 0.3s ease-out forwards;
+        }
+        @keyframes opsNodeIn {
+          from { opacity: 0; transform: scale(0.8) translateY(-8px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+        .react-flow__controls {
+          background: #18181b !important;
+          border: 1px solid #27272a !important;
+          border-radius: 8px !important;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
+        }
+        .react-flow__controls-button {
+          background: transparent !important;
+          border: none !important;
+          color: #71717a !important;
+        }
+        .react-flow__controls-button:hover {
+          background: #27272a !important;
+          color: #a1a1aa !important;
+        }
+        .react-flow__controls-button svg {
+          fill: currentColor !important;
+        }
+      `}</style>
+
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        fitView
+        fitViewOptions={fitViewOptions}
+        minZoom={0.3}
+        maxZoom={2.5}
+        defaultViewport={{ x: 0, y: 0, zoom: defaultZoom }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background 
+          variant={BackgroundVariant.Dots} 
+          gap={20} 
+          size={1} 
+          color="#27272a" 
+        />
+        <Controls 
+          showInteractive={false}
+          position="bottom-right"
+        />
+        
+        {/* Top controls */}
+        <Panel position="top-left" className="!m-3 flex items-center gap-3">
+          <TurnSelector 
+            turns={turns} 
+            selectedTurnId={selectedTurnId} 
+            onSelect={onSelectTurn}
+            disabled={isPlaying}
+          />
+          <div className="h-5 w-px bg-zinc-800" />
+          <PlaybackControls
+            isPlaying={isPlaying}
+            onPlay={onPlay}
+            onPause={onPause}
+            onReset={onReset}
+            currentNodeIndex={visibleNodeCount}
+            totalNodes={totalNodes}
+            playbackSpeed={playbackSpeed}
+            onSpeedChange={onSpeedChange}
+          />
+        </Panel>
+        
+        {/* Bottom left - Legend */}
+        <Panel position="bottom-left" className="!m-3">
+          <OpsLegend />
+        </Panel>
+
+        {/* Expand button for compact view */}
+        {isCompact && onExpand && (
+          <Panel position="top-right" className="!m-3">
+            <button
+              onClick={onExpand}
+              className="h-7 w-7 rounded-lg bg-zinc-800/80 hover:bg-zinc-700/80 flex items-center justify-center transition-colors"
+              title="Expand"
+            >
+              <ArrowsPointingOutIcon className="w-3.5 h-3.5 text-zinc-400" />
+            </button>
+          </Panel>
+        )}
+      </ReactFlow>
+
+      {/* Detail Panel */}
+      {selectedNode && (
+        <OpsNodeDetailPanel node={selectedNode} onClose={onCloseDetail} />
+      )}
+    </div>
+  );
+}
+
+// Modal component
+interface OpsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  allNodes: OpsNode[];
+  allEdges: OpsEdge[];
+  selectedNodeId: string | null;
+  setSelectedNode: (nodeId: string | null) => void;
+  turns: OpsTurn[];
+  selectedTurnId: string | null;
+  onSelectTurn: (turnId: string | null) => void;
+  summary: ReturnType<typeof useOpsStore.getState>['getSummary'] extends () => infer R ? R : never;
+}
+
+function OpsModal({
+  isOpen,
+  onClose,
+  allNodes,
+  allEdges,
+  selectedNodeId,
+  setSelectedNode,
+  turns,
+  selectedTurnId,
+  onSelectTurn,
+  summary,
+}: OpsModalProps) {
+  const [mounted, setMounted] = useState(false);
+  
+  const {
+    isPlaying,
+    visibleNodes,
+    visibleEdges,
+    visibleNodeCount,
+    totalNodes,
+    playbackSpeed,
+    startPlayback,
+    pausePlayback,
+    resetPlayback,
+    setPlaybackSpeed,
+  } = useProgressivePlayback(allNodes, allEdges, selectedTurnId);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(visibleNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(visibleEdges);
+
+  useEffect(() => {
+    setNodes(visibleNodes);
+    setEdges(visibleEdges);
+  }, [visibleNodes, visibleEdges, setNodes, setEdges]);
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    setSelectedNode(node.id);
+  }, [setSelectedNode]);
+
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null);
+  }, [setSelectedNode]);
+
+  const selectedNode = allNodes.find(n => n.id === selectedNodeId);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleEsc);
+      return () => window.removeEventListener('keydown', handleEsc);
+    }
+  }, [isOpen, onClose]);
+
+  if (!mounted || !isOpen) return null;
+
+  const modalContent = (
+    <div 
+      className="fixed inset-0 z-[9999] bg-black/95"
+      onClick={onClose}
+    >
+      <div 
+        className="absolute inset-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-2xl overflow-hidden flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800/80">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center">
+              <Squares2X2Icon className="w-4 h-4 text-indigo-400" />
+            </div>
+            <div>
+              <h2 className="text-sm font-semibold text-zinc-100">Operations</h2>
+              <p className="text-xs text-zinc-500">{allNodes.length} steps across {turns.length} turns</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg hover:bg-zinc-800 flex items-center justify-center transition-colors"
+          >
+            <XMarkIcon className="w-4 h-4 text-zinc-500" />
+          </button>
+        </div>
+
+        {/* Canvas */}
+        <OpsFlowCanvas
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onNodeClick={onNodeClick}
+          onPaneClick={onPaneClick}
+          selectedNode={selectedNode}
+          onCloseDetail={() => setSelectedNode(null)}
+          turns={turns}
+          selectedTurnId={selectedTurnId}
+          onSelectTurn={onSelectTurn}
+          isPlaying={isPlaying}
+          visibleNodeCount={visibleNodeCount}
+          totalNodes={totalNodes}
+          playbackSpeed={playbackSpeed}
+          onPlay={startPlayback}
+          onPause={pausePlayback}
+          onReset={resetPlayback}
+          onSpeedChange={setPlaybackSpeed}
+          isExpanded
+        />
+
+        {/* Footer */}
+        <OpsSummaryBar summary={summary} />
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+}
+
+interface OpsCanvasProps {
+  className?: string;
+}
+
+export function OpsCanvas({ className = '' }: OpsCanvasProps) {
+  const { 
+    currentSession, 
+    selectedNodeId, 
+    setSelectedNode, 
+    getSummary,
+    selectedTurnId,
+    setSelectedTurn,
+  } = useOpsStore();
+  
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const allNodes = currentSession?.nodes || [];
+  const allEdges = currentSession?.edges || [];
+  const turns = currentSession?.turns || [];
+
+  const {
+    isPlaying,
+    visibleNodes,
+    visibleEdges,
+    visibleNodeCount,
+    totalNodes,
+    playbackSpeed,
+    startPlayback,
+    pausePlayback,
+    resetPlayback,
+    setPlaybackSpeed,
+  } = useProgressivePlayback(allNodes, allEdges, selectedTurnId);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(visibleNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(visibleEdges);
+
+  useEffect(() => {
+    setNodes(visibleNodes);
+    setEdges(visibleEdges);
+  }, [visibleNodes, visibleEdges, setNodes, setEdges]);
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    setSelectedNode(node.id);
+  }, [setSelectedNode]);
+
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null);
+  }, [setSelectedNode]);
+
+  const summary = getSummary();
+  const selectedNode = allNodes.find(n => n.id === selectedNodeId);
+
+  if (!currentSession || allNodes.length === 0) {
+    return <OpsEmptyState className={className} />;
+  }
+
+  return (
+    <>
+      <div className={`flex flex-col h-full bg-zinc-950 ${className}`}>
+        <OpsFlowCanvas
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onNodeClick={onNodeClick}
+          onPaneClick={onPaneClick}
+          selectedNode={selectedNode}
+          onCloseDetail={() => setSelectedNode(null)}
+          turns={turns}
+          selectedTurnId={selectedTurnId}
+          onSelectTurn={setSelectedTurn}
+          isPlaying={isPlaying}
+          visibleNodeCount={visibleNodeCount}
+          totalNodes={totalNodes}
+          playbackSpeed={playbackSpeed}
+          onPlay={startPlayback}
+          onPause={pausePlayback}
+          onReset={resetPlayback}
+          onSpeedChange={setPlaybackSpeed}
+          onExpand={() => setIsModalOpen(true)}
+          isCompact
+        />
+        <OpsSummaryBar summary={summary} compact />
+      </div>
+
+      <OpsModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        allNodes={allNodes}
+        allEdges={allEdges}
+        selectedNodeId={selectedNodeId}
+        setSelectedNode={setSelectedNode}
+        turns={turns}
+        selectedTurnId={selectedTurnId}
+        onSelectTurn={setSelectedTurn}
+        summary={summary}
+      />
+    </>
+  );
+}