added navigation and viewport settings to frontend

backend/blender_cr8tive_engine/__init__.py

@@ -160,11 +160,509 @@ def handle_refresh_addons() -> dict:
         }
 
 
+# Navigation command handlers
+def handle_frame_jump_start() -> dict:
+    """Jump to animation start frame"""
+    try:
+        bpy.ops.screen.frame_jump(end=False)
+        current_frame = bpy.context.scene.frame_current
+        return {
+            "status": "success",
+            "message": f"Jumped to start frame ({current_frame})",
+            "data": {"current_frame": current_frame}
+        }
+    except Exception as e:
+        logger.error(f"Error jumping to start frame: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to jump to start frame: {str(e)}",
+            "error_code": "FRAME_JUMP_ERROR"
+        }
+
+
+def handle_frame_jump_end() -> dict:
+    """Jump to animation end frame"""
+    try:
+        bpy.ops.screen.frame_jump(end=True)
+        current_frame = bpy.context.scene.frame_current
+        return {
+            "status": "success",
+            "message": f"Jumped to end frame ({current_frame})",
+            "data": {"current_frame": current_frame}
+        }
+    except Exception as e:
+        logger.error(f"Error jumping to end frame: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to jump to end frame: {str(e)}",
+            "error_code": "FRAME_JUMP_ERROR"
+        }
+
+
+def handle_keyframe_jump_prev() -> dict:
+    """Jump to previous keyframe"""
+    try:
+        bpy.ops.screen.keyframe_jump(next=False)
+        current_frame = bpy.context.scene.frame_current
+        return {
+            "status": "success",
+            "message": f"Jumped to previous keyframe ({current_frame})",
+            "data": {"current_frame": current_frame}
+        }
+    except Exception as e:
+        logger.error(f"Error jumping to previous keyframe: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to jump to previous keyframe: {str(e)}",
+            "error_code": "KEYFRAME_JUMP_ERROR"
+        }
+
+
+def handle_keyframe_jump_next() -> dict:
+    """Jump to next keyframe"""
+    try:
+        bpy.ops.screen.keyframe_jump(next=True)
+        current_frame = bpy.context.scene.frame_current
+        return {
+            "status": "success",
+            "message": f"Jumped to next keyframe ({current_frame})",
+            "data": {"current_frame": current_frame}
+        }
+    except Exception as e:
+        logger.error(f"Error jumping to next keyframe: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to jump to next keyframe: {str(e)}",
+            "error_code": "KEYFRAME_JUMP_ERROR"
+        }
+
+
+def handle_animation_play() -> dict:
+    """Play animation forward"""
+    try:
+        bpy.ops.screen.animation_play()
+        return {
+            "status": "success",
+            "message": "Animation playing forward",
+            "data": {"animation_state": "playing"}
+        }
+    except Exception as e:
+        logger.error(f"Error playing animation: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to play animation: {str(e)}",
+            "error_code": "ANIMATION_PLAY_ERROR"
+        }
+
+
+def handle_animation_play_reverse() -> dict:
+    """Play animation in reverse"""
+    try:
+        bpy.ops.screen.animation_play(reverse=True)
+        return {
+            "status": "success",
+            "message": "Animation playing in reverse",
+            "data": {"animation_state": "playing_reverse"}
+        }
+    except Exception as e:
+        logger.error(f"Error playing animation in reverse: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to play animation in reverse: {str(e)}",
+            "error_code": "ANIMATION_PLAY_ERROR"
+        }
+
+
+def handle_animation_pause() -> dict:
+    """Pause animation"""
+    try:
+        bpy.ops.screen.animation_cancel(restore_frame=True)
+        return {
+            "status": "success",
+            "message": "Animation paused",
+            "data": {"animation_state": "paused"}
+        }
+    except Exception as e:
+        logger.error(f"Error pausing animation: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to pause animation: {str(e)}",
+            "error_code": "ANIMATION_PAUSE_ERROR"
+        }
+
+
+def handle_viewport_set_solid() -> dict:
+    """Set viewport shading to solid"""
+    try:
+        for area in bpy.context.screen.areas:
+            if area.type == 'VIEW_3D':
+                area.spaces[0].shading.type = 'SOLID'
+        return {
+            "status": "success",
+            "message": "Viewport set to solid shading",
+            "data": {"viewport_mode": "solid"}
+        }
+    except Exception as e:
+        logger.error(f"Error setting viewport to solid: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to set viewport to solid: {str(e)}",
+            "error_code": "VIEWPORT_ERROR"
+        }
+
+
+def handle_viewport_set_rendered() -> dict:
+    """Set viewport shading to rendered"""
+    try:
+        for area in bpy.context.screen.areas:
+            if area.type == 'VIEW_3D':
+                area.spaces[0].shading.type = 'RENDERED'
+        return {
+            "status": "success",
+            "message": "Viewport set to rendered shading",
+            "data": {"viewport_mode": "rendered"}
+        }
+    except Exception as e:
+        logger.error(f"Error setting viewport to rendered: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to set viewport to rendered: {str(e)}",
+            "error_code": "VIEWPORT_ERROR"
+        }
+
+
+# 3D Navigation helper functions
+def ensure_view3d_context():
+    """Ensure VIEW_3D context is available for viewport operations"""
+    for area in bpy.context.screen.areas:
+        if area.type == 'VIEW_3D':
+            for region in area.regions:
+                if region.type == 'WINDOW':
+                    return {'area': area, 'region': region}
+    return None
+
+
+def pan_view_manual(direction, amount=0.5):
+    """Manual pan by directly manipulating view_location using existing context"""
+    context = ensure_view3d_context()
+    if not context:
+        raise Exception("No VIEW_3D area found")
+    
+    # Get the space from our already-found area
+    area = context['area']
+    space = area.spaces.active
+    
+    # Manipulate view_location directly
+    if direction == 'PANLEFT': 
+        space.region_3d.view_location.x -= amount
+    elif direction == 'PANRIGHT': 
+        space.region_3d.view_location.x += amount
+    elif direction == 'PANUP': 
+        space.region_3d.view_location.y += amount
+    elif direction == 'PANDOWN': 
+        space.region_3d.view_location.y -= amount
+
+
+# 3D Navigation command handlers
+def handle_orbit_left() -> dict:
+    """Orbit view to the left"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.view_orbit(type='ORBITLEFT')
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Orbited view left",
+            "data": {"navigation_action": "orbit_left"}
+        }
+    except Exception as e:
+        logger.error(f"Error orbiting left: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to orbit left: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_orbit_right() -> dict:
+    """Orbit view to the right"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.view_orbit(type='ORBITRIGHT')
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Orbited view right",
+            "data": {"navigation_action": "orbit_right"}
+        }
+    except Exception as e:
+        logger.error(f"Error orbiting right: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to orbit right: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_orbit_up() -> dict:
+    """Orbit view up"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.view_orbit(type='ORBITUP')
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Orbited view up",
+            "data": {"navigation_action": "orbit_up"}
+        }
+    except Exception as e:
+        logger.error(f"Error orbiting up: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to orbit up: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_orbit_down() -> dict:
+    """Orbit view down"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.view_orbit(type='ORBITDOWN')
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Orbited view down",
+            "data": {"navigation_action": "orbit_down"}
+        }
+    except Exception as e:
+        logger.error(f"Error orbiting down: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to orbit down: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_pan_left() -> dict:
+    """Pan view to the left"""
+    try:
+        # Primary approach: Manual pan (reliable)
+        pan_view_manual('PANLEFT')
+        
+        # Fallback approach: Operator (commented for testing in different Blender versions)
+        # context = ensure_view3d_context()
+        # if context:
+        #     with bpy.context.temp_override(**context):
+        #         bpy.ops.view3d.view_pan(type='PANLEFT')
+        
+        return {
+            "status": "success",
+            "message": "Panned view left",
+            "data": {"navigation_action": "pan_left"}
+        }
+    except Exception as e:
+        logger.error(f"Error panning left: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to pan left: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_pan_right() -> dict:
+    """Pan view to the right"""
+    try:
+        # Primary approach: Manual pan (reliable)
+        pan_view_manual('PANRIGHT')
+        
+        # Fallback approach: Operator (commented for testing in different Blender versions)
+        # context = ensure_view3d_context()
+        # if context:
+        #     with bpy.context.temp_override(**context):
+        #         bpy.ops.view3d.view_pan(type='PANRIGHT')
+        
+        return {
+            "status": "success",
+            "message": "Panned view right",
+            "data": {"navigation_action": "pan_right"}
+        }
+    except Exception as e:
+        logger.error(f"Error panning right: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to pan right: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_pan_up() -> dict:
+    """Pan view up"""
+    try:
+        # Primary approach: Manual pan (reliable)
+        pan_view_manual('PANUP')
+        
+        # Fallback approach: Operator (commented for testing in different Blender versions)
+        # context = ensure_view3d_context()
+        # if context:
+        #     with bpy.context.temp_override(**context):
+        #         bpy.ops.view3d.view_pan(type='PANUP')
+        
+        return {
+            "status": "success",
+            "message": "Panned view up",
+            "data": {"navigation_action": "pan_up"}
+        }
+    except Exception as e:
+        logger.error(f"Error panning up: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to pan up: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_pan_down() -> dict:
+    """Pan view down"""
+    try:
+        # Primary approach: Manual pan (reliable)
+        pan_view_manual('PANDOWN')
+        
+        # Fallback approach: Operator (commented for testing in different Blender versions)
+        # context = ensure_view3d_context()
+        # if context:
+        #     with bpy.context.temp_override(**context):
+        #         bpy.ops.view3d.view_pan(type='PANDOWN')
+        
+        return {
+            "status": "success",
+            "message": "Panned view down",
+            "data": {"navigation_action": "pan_down"}
+        }
+    except Exception as e:
+        logger.error(f"Error panning down: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to pan down: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_zoom_in() -> dict:
+    """Zoom in to the viewport"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.zoom(delta=1)
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Zoomed in",
+            "data": {"navigation_action": "zoom_in"}
+        }
+    except Exception as e:
+        logger.error(f"Error zooming in: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to zoom in: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
+def handle_zoom_out() -> dict:
+    """Zoom out from the viewport"""
+    try:
+        context = ensure_view3d_context()
+        if context:
+            with bpy.context.temp_override(**context):
+                bpy.ops.view3d.zoom(delta=-1)
+        else:
+            return {
+                "status": "error",
+                "message": "No VIEW_3D region found",
+                "error_code": "NAVIGATION_ERROR"
+            }
+        
+        return {
+            "status": "success",
+            "message": "Zoomed out",
+            "data": {"navigation_action": "zoom_out"}
+        }
+    except Exception as e:
+        logger.error(f"Error zooming out: {str(e)}")
+        return {
+            "status": "error",
+            "message": f"Failed to zoom out: {str(e)}",
+            "error_code": "NAVIGATION_ERROR"
+        }
+
+
 # Export command handlers for the router addon itself
 AI_COMMAND_HANDLERS = {
     'get_available_addons': handle_get_available_addons,
     'get_addon_info': handle_get_addon_info,
-    'refresh_addons': handle_refresh_addons
+    'refresh_addons': handle_refresh_addons,
+    # Animation controls
+    'frame_jump_start': handle_frame_jump_start,
+    'frame_jump_end': handle_frame_jump_end,
+    'keyframe_jump_prev': handle_keyframe_jump_prev,
+    'keyframe_jump_next': handle_keyframe_jump_next,
+    'animation_play': handle_animation_play,
+    'animation_play_reverse': handle_animation_play_reverse,
+    'animation_pause': handle_animation_pause,
+    # Viewport controls
+    'viewport_set_solid': handle_viewport_set_solid,
+    'viewport_set_rendered': handle_viewport_set_rendered,
+    # 3D Navigation controls
+    'orbit_left': handle_orbit_left,
+    'orbit_right': handle_orbit_right,
+    'orbit_up': handle_orbit_up,
+    'orbit_down': handle_orbit_down,
+    'pan_left': handle_pan_left,
+    'pan_right': handle_pan_right,
+    'pan_up': handle_pan_up,
+    'pan_down': handle_pan_down,
+    'zoom_in': handle_zoom_in,
+    'zoom_out': handle_zoom_out,
 }
 
 

backend/blender_cr8tive_engine/addon_ai.json

@@ -47,6 +47,158 @@
         "parameters": [],
         "examples": ["refresh the addon list", "scan for new addons"],
         "category": "system"
+      },
+      {
+        "name": "frame_jump_start",
+        "description": "Jump to animation start frame",
+        "usage": "Use to quickly go to the beginning of the animation timeline",
+        "parameters": [],
+        "examples": ["go to start", "jump to beginning"],
+        "category": "animation"
+      },
+      {
+        "name": "frame_jump_end",
+        "description": "Jump to animation end frame",
+        "usage": "Use to quickly go to the end of the animation timeline",
+        "parameters": [],
+        "examples": ["go to end", "jump to last frame"],
+        "category": "animation"
+      },
+      {
+        "name": "keyframe_jump_prev",
+        "description": "Jump to previous keyframe",
+        "usage": "Use to navigate to the previous keyframe in the timeline",
+        "parameters": [],
+        "examples": ["previous keyframe", "go back to last keyframe"],
+        "category": "animation"
+      },
+      {
+        "name": "keyframe_jump_next",
+        "description": "Jump to next keyframe",
+        "usage": "Use to navigate to the next keyframe in the timeline",
+        "parameters": [],
+        "examples": ["next keyframe", "advance to next keyframe"],
+        "category": "animation"
+      },
+      {
+        "name": "animation_play",
+        "description": "Play animation forward",
+        "usage": "Use to start playing the animation from current frame",
+        "parameters": [],
+        "examples": ["play animation", "start playback"],
+        "category": "animation"
+      },
+      {
+        "name": "animation_pause",
+        "description": "Pause animation",
+        "usage": "Use to stop animation playback",
+        "parameters": [],
+        "examples": ["pause animation", "stop playback"],
+        "category": "animation"
+      },
+      {
+        "name": "animation_play_reverse",
+        "description": "Play animation in reverse",
+        "usage": "Use to play animation backwards from current frame",
+        "parameters": [],
+        "examples": ["play in reverse", "play backwards"],
+        "category": "animation"
+      },
+      {
+        "name": "viewport_set_solid",
+        "description": "Set viewport shading to solid",
+        "usage": "Use to change viewport display mode to solid shading",
+        "parameters": [],
+        "examples": ["solid view", "switch to solid shading"],
+        "category": "viewport"
+      },
+      {
+        "name": "viewport_set_rendered",
+        "description": "Set viewport shading to rendered",
+        "usage": "Use to change viewport display mode to rendered shading",
+        "parameters": [],
+        "examples": ["rendered view", "switch to rendered shading"],
+        "category": "viewport"
+      },
+      {
+        "name": "orbit_left",
+        "description": "Orbit the viewport view to the left",
+        "usage": "Use to rotate the 3D view around the scene to the left",
+        "parameters": [],
+        "examples": ["orbit left", "rotate view left"],
+        "category": "navigation"
+      },
+      {
+        "name": "orbit_right",
+        "description": "Orbit the viewport view to the right",
+        "usage": "Use to rotate the 3D view around the scene to the right",
+        "parameters": [],
+        "examples": ["orbit right", "rotate view right"],
+        "category": "navigation"
+      },
+      {
+        "name": "orbit_up",
+        "description": "Orbit the viewport view upward",
+        "usage": "Use to rotate the 3D view around the scene upward",
+        "parameters": [],
+        "examples": ["orbit up", "rotate view up"],
+        "category": "navigation"
+      },
+      {
+        "name": "orbit_down",
+        "description": "Orbit the viewport view downward",
+        "usage": "Use to rotate the 3D view around the scene downward",
+        "parameters": [],
+        "examples": ["orbit down", "rotate view down"],
+        "category": "navigation"
+      },
+      {
+        "name": "pan_left",
+        "description": "Pan the viewport view to the left",
+        "usage": "Use to move the 3D view left without rotating",
+        "parameters": [],
+        "examples": ["pan left", "move view left"],
+        "category": "navigation"
+      },
+      {
+        "name": "pan_right",
+        "description": "Pan the viewport view to the right",
+        "usage": "Use to move the 3D view right without rotating",
+        "parameters": [],
+        "examples": ["pan right", "move view right"],
+        "category": "navigation"
+      },
+      {
+        "name": "pan_up",
+        "description": "Pan the viewport view upward",
+        "usage": "Use to move the 3D view up without rotating",
+        "parameters": [],
+        "examples": ["pan up", "move view up"],
+        "category": "navigation"
+      },
+      {
+        "name": "pan_down",
+        "description": "Pan the viewport view downward",
+        "usage": "Use to move the 3D view down without rotating",
+        "parameters": [],
+        "examples": ["pan down", "move view down"],
+        "category": "navigation"
+      },
+      {
+        "name": "zoom_in",
+        "description": "Zoom into the viewport",
+        "usage": "Use to get a closer view of the scene",
+        "parameters": [],
+        "examples": ["zoom in", "get closer"],
+        "category": "navigation"
+      },
+      {
+        "name": "zoom_out",
+        "description": "Zoom out from the viewport",
+        "usage": "Use to get a wider view of the scene",
+        "parameters": [],
+        "examples": ["zoom out", "get wider view"],
+        "category": "navigation"
       }
     ],
     "context_hints": [

docs/BLENDER_MULTI_ADDON_ARCHITECTURE.md

@@ -135,22 +135,6 @@ AI_COMMAND_HANDLERS = {
   - Type checking (string, integer, float, boolean, vector3, color, enum, etc.)
   - Standardized error handling
 
-### 5. Dynamic MCP Server (`backend/cr8_engine/app/blaze/mcp_server.py`)
-
-Replaced static `BlazeServer` with `DynamicMCPServer`:
-
-```python
-class DynamicMCPServer:
-    def refresh_capabilities(self, addon_manifests: List[dict]):
-        """Update available tools based on addon manifests"""
-
-    def register_addon_tools(self, manifest: dict):
-        """Register tools from a single addon manifest"""
-
-    def build_agent_context(self, manifests: List[dict]) -> str:
-        """Generate dynamic system prompt from manifests"""
-```
-
 **Key Features:**
 
 - **Dynamic Tool Registration**: Auto-generates MCP tools from addon manifests

frontend/components/BottomControls.tsx

@@ -1,10 +1,30 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ChevronDown, ChevronUp, SendHorizontal } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ChevronDown,
+  ChevronUp,
+  SendHorizontal,
+  Play,
+  Pause,
+  SkipBack,
+  SkipForward,
+  StepBack,
+  StepForward,
+  Eye,
+  Monitor,
+  Plus,
+  Minus,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  RotateCcw,
+} from "lucide-react";
 import { useVisibilityStore } from "@/store/controlsVisibilityStore";
 import { useWebSocketContext } from "@/contexts/WebSocketContext";
 import { ConnectionStatus } from "./ConnectionStatus";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { toast } from "sonner";
 
 interface BottomControlsProps {
@@ -14,6 +34,13 @@ interface BottomControlsProps {
 export function BottomControls({ children }: BottomControlsProps) {
   const [message, setMessage] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [animationState, setAnimationState] = useState<
+    "playing" | "paused" | "playing_reverse"
+  >("paused");
+  const [viewportMode, setViewportMode] = useState<"solid" | "rendered">(
+    "solid"
+  );
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const isVisible = useVisibilityStore(
     (state) => state.isBottomControlsVisible
@@ -26,6 +53,15 @@ export function BottomControls({ children }: BottomControlsProps) {
   const { status, reconnect, sendMessage, isFullyConnected } =
     useWebSocketContext();
 
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
+    }
+  }, [message]);
+
   const handleSendMessage = async () => {
     if (!message.trim() || !isFullyConnected || isLoading) return;
 
@@ -54,6 +90,72 @@ export function BottomControls({ children }: BottomControlsProps) {
     }
   };
 
+  // Navigation command functions
+  const sendNavigationCommand = async (command: string) => {
+    if (!isFullyConnected) return;
+
+    try {
+      sendMessage({
+        type: "addon_command",
+        addon_id: "blender_ai_router",
+        command: command,
+        params: {},
+      });
+    } catch (error) {
+      toast.error(`Failed to send ${command} command`);
+    }
+  };
+
+  // Animation controls
+  const handleFrameJumpStart = () => sendNavigationCommand("frame_jump_start");
+  const handleFrameJumpEnd = () => sendNavigationCommand("frame_jump_end");
+  const handleKeyframeJumpPrev = () =>
+    sendNavigationCommand("keyframe_jump_prev");
+  const handleKeyframeJumpNext = () =>
+    sendNavigationCommand("keyframe_jump_next");
+
+  const handleAnimationPlay = () => {
+    if (animationState === "playing") {
+      sendNavigationCommand("animation_pause");
+      setAnimationState("paused");
+    } else {
+      sendNavigationCommand("animation_play");
+      setAnimationState("playing");
+    }
+  };
+
+  const handleAnimationPlayReverse = () => {
+    sendNavigationCommand("animation_play_reverse");
+    setAnimationState("playing_reverse");
+  };
+
+  // Viewport controls
+  const handleViewportSolid = () => {
+    if (viewportMode !== "solid") {
+      sendNavigationCommand("viewport_set_solid");
+      setViewportMode("solid");
+    }
+  };
+
+  const handleViewportRendered = () => {
+    if (viewportMode !== "rendered") {
+      sendNavigationCommand("viewport_set_rendered");
+      setViewportMode("rendered");
+    }
+  };
+
+  // 3D Navigation controls
+  const handleZoomIn = () => sendNavigationCommand("zoom_in");
+  const handleZoomOut = () => sendNavigationCommand("zoom_out");
+  const handlePanUp = () => sendNavigationCommand("pan_up");
+  const handlePanDown = () => sendNavigationCommand("pan_down");
+  const handlePanLeft = () => sendNavigationCommand("pan_left");
+  const handlePanRight = () => sendNavigationCommand("pan_right");
+  const handleOrbitLeft = () => sendNavigationCommand("orbit_left");
+  const handleOrbitRight = () => sendNavigationCommand("orbit_right");
+  const handleOrbitUp = () => sendNavigationCommand("orbit_up");
+  const handleOrbitDown = () => sendNavigationCommand("orbit_down");
+
   return (
     <div
       className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 transition-all duration-300 
@@ -71,44 +173,264 @@ export function BottomControls({ children }: BottomControlsProps) {
           <ChevronUp className="h-6 w-6" />
         )}
       </Button>
-      <div className="backdrop-blur-md bg-white/5 rounded-lg px-6 py-3 flex items-center gap-4">
-        <ConnectionStatus status={status} />
-        <div className="h-8 w-px bg-white/20" />
-
+      <div className="backdrop-blur-md bg-white/5 rounded-lg p-4 grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto_auto] gap-4 min-w-[500px]">
         {status === "disconnected" ? (
-          <Button
-            variant="secondary"
-            onClick={reconnect}
-            className="bg-blue-500 hover:bg-blue-600 text-white"
-          >
-            Reconnect
-          </Button>
-        ) : isFullyConnected ? (
-          /* Chat Interface */
-          <div className="relative">
-            <Input
-              placeholder="Tell B.L.A.Z.E what to do..."
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              onKeyPress={handleKeyPress}
-              className="min-w-[300px] pr-10 bg-cr8-charcoal/10 border-white/10 backdrop-blur-md shadow-lg text-white placeholder:text-white/60"
-              disabled={isLoading}
-            />
-            <SendHorizontal
-              onClick={handleSendMessage}
-              className={`absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 cursor-pointer transition-colors duration-200 ${
-                !message.trim() || isLoading
-                  ? "text-gray-500 cursor-not-allowed"
-                  : "text-blue-400 hover:text-blue-300"
-              }`}
-            />
+          <div className="col-span-3 row-span-3 flex items-center justify-center">
+            <Button
+              variant="secondary"
+              onClick={reconnect}
+              className="bg-blue-500 hover:bg-blue-600 text-white"
+            >
+              Reconnect
+            </Button>
           </div>
+        ) : isFullyConnected ? (
+          <>
+            {/* Row 1 Left: Viewport Controls */}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleViewportSolid}
+                className={`px-3 py-2 text-xs backdrop-blur-md border transition-all duration-200 ${
+                  viewportMode === "solid"
+                    ? "bg-blue-500/20 border-blue-400/40 text-blue-300"
+                    : "bg-white/5 border-white/10 text-white/70 hover:bg-white/10"
+                }`}
+              >
+                <Eye className="h-3 w-3 mr-1" />
+                Solid
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleViewportRendered}
+                className={`px-3 py-2 text-xs backdrop-blur-md border transition-all duration-200 ${
+                  viewportMode === "rendered"
+                    ? "bg-blue-500/20 border-blue-400/40 text-blue-300"
+                    : "bg-white/5 border-white/10 text-white/70 hover:bg-white/10"
+                }`}
+              >
+                <Monitor className="h-3 w-3 mr-1" />
+                Rendered
+              </Button>
+            </div>
+
+            {/* Row 1 Center: Empty */}
+            <div></div>
+
+            {/* Row 1 Right: Connection Status */}
+            <div className="flex items-center justify-end">
+              <ConnectionStatus status={status} />
+            </div>
+
+            {/* Row 2: Chat Interface (Auto-growing) - Spans all 3 columns */}
+            <div className="relative flex justify-center col-span-3">
+              <Textarea
+                ref={textareaRef}
+                placeholder="Tell B.L.A.Z.E what to do..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyPress={handleKeyPress}
+                className="w-full min-h-[40px] max-h-[120px] resize-none pr-10 bg-cr8-charcoal/10 border-white/10 backdrop-blur-md shadow-lg text-white placeholder:text-white/60 overflow-hidden"
+                disabled={isLoading}
+              />
+              <SendHorizontal
+                onClick={handleSendMessage}
+                className={`absolute right-3 top-3 h-4 w-4 cursor-pointer transition-colors duration-200 ${
+                  !message.trim() || isLoading
+                    ? "text-gray-500 cursor-not-allowed"
+                    : "text-blue-400 hover:text-blue-300"
+                }`}
+              />
+            </div>
+
+            {/* Row 3: Animation Controls - Spans all 3 columns */}
+            <div className="flex items-center justify-center gap-1 col-span-3">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleFrameJumpStart}
+                className="p-2 bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white"
+                title="Jump to start"
+              >
+                <SkipBack className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleKeyframeJumpPrev}
+                className="p-2 bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white"
+                title="Previous keyframe"
+              >
+                <StepBack className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleAnimationPlay}
+                className={`p-2 border transition-all duration-200 ${
+                  animationState === "playing"
+                    ? "bg-green-500/20 border-green-400/40 text-green-300"
+                    : "bg-white/5 border-white/10 text-white/70 hover:bg-white/10 hover:text-white"
+                }`}
+                title={animationState === "playing" ? "Pause" : "Play"}
+              >
+                {animationState === "playing" ? (
+                  <Pause className="h-3 w-3" />
+                ) : (
+                  <Play className="h-3 w-3" />
+                )}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleKeyframeJumpNext}
+                className="p-2 bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white"
+                title="Next keyframe"
+              >
+                <StepForward className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleFrameJumpEnd}
+                className="p-2 bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white"
+                title="Jump to end"
+              >
+                <SkipForward className="h-3 w-3" />
+              </Button>
+            </div>
+          </>
         ) : (
-          <div className="text-white/60 text-sm">
+          <div className="col-span-3 row-span-3 flex items-center justify-center text-white/60 text-sm">
             Waiting for Blender connection...
           </div>
         )}
       </div>
+
+      {/* Separate 3D Navigation Panel - Positioned to the right */}
+      {isFullyConnected && (
+        <div
+          className={`absolute bottom-0 left-[calc(50%+280px)] transition-all duration-300 
+    ${isVisible ? "translate-y-0" : "translate-y-full"}`}
+        >
+          <div className="backdrop-blur-md bg-white/5 rounded-lg p-3 border border-white/10">
+            <div className="flex flex-col gap-3">
+              {/* Top Row - Zoom In and Pan Up */}
+              <div className="flex justify-center gap-3">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleZoomIn}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Zoom In"
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handlePanUp}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Pan Up"
+                >
+                  <ArrowUp className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Middle Row - Pan Left, Center Space, Pan Right */}
+              <div className="flex justify-center items-center gap-3">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handlePanLeft}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Pan Left"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div className="w-10 h-10"></div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handlePanRight}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Pan Right"
+                >
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Bottom Row - Zoom Out, Pan Down, and Orbit Control */}
+              <div className="flex justify-center items-center gap-3">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleZoomOut}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Zoom Out"
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handlePanDown}
+                  className="w-10 h-10 bg-black/40 border border-white/20 text-white hover:bg-white/10 rounded-lg"
+                  title="Pan Down"
+                >
+                  <ArrowDown className="h-4 w-4" />
+                </Button>
+
+                {/* Orbit Control Wheel */}
+                <div className="w-16 h-16 relative flex items-center justify-center">
+                  <div className="w-16 h-16 bg-black/40 border border-white/20 rounded-full relative overflow-hidden">
+                    {/* Top Quarter - Orbit Up */}
+                    <button
+                      onClick={handleOrbitUp}
+                      className="absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-8 hover:bg-white/20 rounded-t-full transition-colors flex items-center justify-center"
+                      title="Orbit Up"
+                    >
+                      <ArrowUp className="h-4 w-4 text-white/90" />
+                    </button>
+
+                    {/* Right Quarter - Orbit Right */}
+                    <button
+                      onClick={handleOrbitRight}
+                      className="absolute right-0 top-1/2 transform -translate-y-1/2 w-8 h-8 hover:bg-white/20 rounded-r-full transition-colors flex items-center justify-center"
+                      title="Orbit Right"
+                    >
+                      <ArrowRight className="h-4 w-4 text-white/90" />
+                    </button>
+
+                    {/* Bottom Quarter - Orbit Down */}
+                    <button
+                      onClick={handleOrbitDown}
+                      className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-8 h-8 hover:bg-white/20 rounded-b-full transition-colors flex items-center justify-center"
+                      title="Orbit Down"
+                    >
+                      <ArrowDown className="h-4 w-4 text-white/90" />
+                    </button>
+
+                    {/* Left Quarter - Orbit Left */}
+                    <button
+                      onClick={handleOrbitLeft}
+                      className="absolute left-0 top-1/2 transform -translate-y-1/2 w-8 h-8 hover:bg-white/20 rounded-l-full transition-colors flex items-center justify-center"
+                      title="Orbit Left"
+                    >
+                      <ArrowLeft className="h-4 w-4 text-white/90" />
+                    </button>
+
+                    {/* Center Circle */}
+                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-white/20 rounded-full"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/lib/types/websocket.ts

@@ -7,6 +7,7 @@ export type WebSocketStatus =
 export interface WebSocketMessage {
   type?: string;
   command?: string;
+  addon_id?: string; // For addon command routing
   payload?: any;
   status?: string;
   message?: string;