misc: add a second default robot

viewer/public/urdf/SO_5DOF_ARM100_05d/robot-data.json

@@ -0,0 +1,26 @@
+{
+  "name": "SO-ARM100 Robot",
+  "description": "This is the SO-ARM100 robot that is fully open source and can be used for a variety of applications.",
+  "mass": 0.8,
+  "dofs": 6,
+  "joints": {
+    "revolute": 0,
+    "prismatic": 0,
+    "continuous": 6,
+    "fixed": 0,
+    "other": 0
+  },
+  "links": [
+    { "name": "Base", "mass": 0.1 },
+    { "name": "Shoulder_Rotation_Pitch", "mass": 0.1 },
+    { "name": "Upper_Arm", "mass": 0.2 },
+    { "name": "Lower_Arm", "mass": 0.1 },
+    { "name": "Wrist_Pitch_Roll", "mass": 0.1 },
+    { "name": "Fixed_Gripper", "mass": 0.1 },
+    { "name": "Moving_Jaw", "mass": 0.0 }
+  ],
+  "materials": [
+    { "name": "Plastic", "percentage": 95 },
+    { "name": "Steel", "percentage": 5 }
+  ]
+}

viewer/public/urdf/SO_5DOF_ARM100_05d/urdf/SO_5DOF_ARM100_05d.urdf

@@ -0,0 +1,365 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This URDF was automatically created by SolidWorks to URDF Exporter! Originally created by Stephen Brawner ([email protected]) 
+     Commit Version: 1.6.0-1-g15f4949  Build Version: 1.6.7594.29634
+     For more information, please see http://wiki.ros.org/sw_urdf_exporter -->
+<robot
+  name="SO-ARM100">
+  <link
+    name="Base">
+    <inertial>
+      <origin
+        xyz="-1.55220299024015E-10 0.0275980388649202 0.0272094138963763"
+        rpy="0 0 0" />
+      <mass
+        value="0.146962928243327" />
+      <inertia
+        ixx="9.5191642834079E-05"
+        ixy="2.02405274856147E-12"
+        ixz="1.46514387606669E-13"
+        iyy="0.000123785814019492"
+        iyz="1.84608762035329E-05"
+        izz="0.000137926707148466" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Base.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Base.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <link
+    name="Shoulder_Rotation_Pitch">
+    <inertial>
+      <origin
+        xyz="-0.00511938391873139 0.0678779339349912 -0.000127472379243391"
+        rpy="0 0 0" />
+      <mass
+        value="0.111780100254674" />
+      <inertia
+        ixx="7.03890301713851E-05"
+        ixy="-1.55093016866869E-05"
+        ixz="1.67387694867946E-07"
+        iyy="3.32352621027575E-05"
+        iyz="9.30705606418705E-07"
+        izz="7.08694473647387E-05" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Shoulder_Rotation_Pitch.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Shoulder_Rotation_Pitch.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Shoulder_Rotation"
+    type="continuous">
+    <origin
+      xyz="0 -0.0452 0.0181"
+      rpy="1.5708 0 1.5708" />
+    <parent
+      link="Base" />
+    <child
+      link="Shoulder_Rotation_Pitch" />
+    <axis
+      xyz="0 1 0" />
+  </joint>
+  <link
+    name="Upper_Arm">
+    <inertial>
+      <origin
+        xyz="-0.0693113774468845 0.00293741346964818 -7.61279219025209E-07"
+        rpy="0 0 0" />
+      <mass
+        value="0.167601391353176" />
+      <inertia
+        ixx="7.75332201021328E-05"
+        ixy="-2.10765620509824E-06"
+        ixz="7.52685919931984E-07"
+        iyy="0.000233751202018378"
+        iyz="-1.63496162538793E-07"
+        izz="0.000180452754687364" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Upper_Arm.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Upper_Arm.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Shoulder_Pitch"
+    type="continuous">
+    <origin
+      xyz="0.000125 0.1086 0"
+      rpy="3.1416 0 -1.5708" />
+    <parent
+      link="Shoulder_Rotation_Pitch" />
+    <child
+      link="Upper_Arm" />
+    <axis
+      xyz="0 0 1" />
+  </joint>
+  <link
+    name="Lower_Arm">
+    <inertial>
+      <origin
+        xyz="-0.0588290275819227 0.0021495318374051 0.000146772621039401"
+        rpy="0 0 0" />
+      <mass
+        value="0.142523221917339" />
+      <inertia
+        ixx="6.29078989235053E-05"
+        ixy="3.79294618448135E-06"
+        ixz="1.70733512134003E-06"
+        iyy="0.000146811163948232"
+        iyz="-2.1474403445678E-07"
+        izz="0.000102145070617562" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Lower_Arm.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Lower_Arm.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Elbow"
+    type="continuous">
+    <origin
+      xyz="-0.11238 0.0282 0"
+      rpy="0 0 -2.2391" />
+    <parent
+      link="Upper_Arm" />
+    <child
+      link="Lower_Arm" />
+    <axis
+      xyz="0 0 1" />
+  </joint>
+  <link
+    name="Wrist_Pitch_Roll">
+    <inertial>
+      <origin
+        xyz="-6.28656116854598E-09 -0.0087849429576346 -0.0309177852835532"
+        rpy="0 0 0" />
+      <mass
+        value="0.106401896179987" />
+      <inertia
+        ixx="4.78947074364113E-05"
+        ixy="-1.33871782943846E-11"
+        ixz="-8.95740683864277E-12"
+        iyy="7.01088408487287E-05"
+        iyz="-5.49748507471695E-06"
+        izz="6.17958653539553E-05" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Wrist_Pitch_Roll.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Wrist_Pitch_Roll.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Wrist_Pitch"
+    type="continuous">
+    <origin
+      xyz="-0.1102 0.005375 0"
+      rpy="0.90254 1.5708 0" />
+    <parent
+      link="Lower_Arm" />
+    <child
+      link="Wrist_Pitch_Roll" />
+    <axis
+      xyz="1 0 0" />
+  </joint>
+  <link
+    name="Fixed_Gripper">
+    <inertial>
+      <origin
+        xyz="-0.00772179942650385 -0.000555295978140996 0.0316941559340959"
+        rpy="0 0 0" />
+      <mass
+        value="0.11710741874408" />
+      <inertia
+        ixx="5.67526018031759E-05"
+        ixy="1.04098982658207E-06"
+        ixz="8.53596077253277E-06"
+        iyy="5.78441834179299E-05"
+        iyz="-2.86014969245207E-07"
+        izz="4.22399193495317E-05" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Fixed_Gripper.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Fixed_Gripper.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Wrist_Roll"
+    type="continuous">
+    <origin
+      xyz="0 0.002 -0.0545"
+      rpy="3.1416 0 3.1416" />
+    <parent
+      link="Wrist_Pitch_Roll" />
+    <child
+      link="Fixed_Gripper" />
+    <axis
+      xyz="0 0 1" />
+  </joint>
+  <link
+    name="Moving_Jaw">
+    <inertial>
+      <origin
+        xyz="-0.0033838985185846 -0.0322884362122416 0.000144458547748166"
+        rpy="0 0 0" />
+      <mass
+        value="0.0347149174448153" />
+      <inertia
+        ixx="1.36949844449711E-05"
+        ixy="-5.63192124555278E-07"
+        ixz="-5.74449907399212E-09"
+        iyy="7.04089001130743E-06"
+        iyz="-1.05361496046931E-07"
+        izz="8.28976960805291E-06" />
+    </inertial>
+    <visual>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Moving_Jaw.STL" />
+      </geometry>
+      <material
+        name="">
+        <color
+          rgba="0.792156862745098 0.819607843137255 0.933333333333333 1" />
+      </material>
+    </visual>
+    <collision>
+      <origin
+        xyz="0 0 0"
+        rpy="0 0 0" />
+      <geometry>
+        <mesh
+          filename="package://SO_5DOF_ARM100_05d/meshes/Moving_Jaw.STL" />
+      </geometry>
+    </collision>
+  </link>
+  <joint
+    name="Gripper"
+    type="continuous">
+    <origin
+      xyz="0.0202 0 0.024375"
+      rpy="-1.5708 0 0" />
+    <parent
+      link="Fixed_Gripper" />
+    <child
+      link="Moving_Jaw" />
+    <axis
+      xyz="0 0 1" />
+  </joint>
+</robot>

viewer/src/components/UrdfViewer.tsx

@@ -1,27 +1,15 @@
 import React, { useEffect, useRef, useState, useMemo } from "react";
-import { Play, Pause } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 import { useTheme } from "@/hooks/useTheme";
 import URDFManipulator from "urdf-loader/src/urdf-manipulator-element.js";
 import { useUrdf } from "@/hooks/useUrdf";
-import {
-  animateHexapodRobot,
-  animateRobot,
-  cassieWalkingConfig,
-} from "@/lib/urdfAnimationHelpers";
 import {
   createUrdfViewer,
   setupMeshLoader,
   setupJointHighlighting,
   setupModelLoading,
 } from "@/lib/urdfViewerHelpers";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { ModeToggle } from "./ModeToggle";
 
 // Register the URDFManipulator as a custom element if it hasn't been already
@@ -35,31 +23,16 @@ interface URDFViewerElement extends HTMLElement {
   setJointValue?: (jointName: string, value: number) => void;
 }
 
-interface URDFViewerProps {
-  hasAnimation?: boolean;
-  headerHeight?: number;
-}
-
-const URDFViewer: React.FC<URDFViewerProps> = ({
-  hasAnimation = false,
-  headerHeight = 0,
-}) => {
+const URDFViewer: React.FC = () => {
   const { theme } = useTheme();
   const isDarkMode = theme === "dark";
   const containerRef = useRef<HTMLDivElement>(null);
   const [highlightedJoint, setHighlightedJoint] = useState<string | null>(null);
-  const {
-    registerUrdfProcessor,
-    alternativeUrdfModels,
-    isDefaultModel,
-    currentAnimationConfig,
-  } = useUrdf();
+  const { registerUrdfProcessor, alternativeUrdfModels, isDefaultModel } =
+    useUrdf();
 
   // Add state for animation control
-  const [isAnimating, setIsAnimating] = useState<boolean>(isDefaultModel);
-  const [showAnimationControl, setShowAnimationControl] = useState<boolean>(
-    isDefaultModel || hasAnimation
-  );
+  useState<boolean>(isDefaultModel);
   const cleanupAnimationRef = useRef<(() => void) | null>(null);
   const viewerRef = useRef<URDFViewerElement | null>(null);
   const hasInitializedRef = useRef<boolean>(false);
@@ -93,17 +66,6 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
     registerUrdfProcessor(urdfProcessor);
   }, [registerUrdfProcessor, urdfProcessor]);
 
-  // Effect to update animation control visibility based on props
-  useEffect(() => {
-    // Show animation controls for default model or when hasAnimation is true
-    setShowAnimationControl(isDefaultModel || hasAnimation);
-  }, [isDefaultModel, hasAnimation]);
-
-  // Toggle animation function
-  const toggleAnimation = () => {
-    setIsAnimating((prev) => !prev);
-  };
-
   // Main effect to create and setup the viewer only once
   useEffect(() => {
     if (!containerRef.current) return;
@@ -116,6 +78,9 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
     setupMeshLoader(viewer, urlModifierFunc);
 
     // Determine which URDF to load
+    // const urdfPath = isDefaultModel
+    //   ? "/urdf/SO_5DOF_ARM100_05d/urdf/SO_5DOF_ARM100_05d.urdf"
+    //   : customUrdfPath || "";
     const urdfPath = isDefaultModel
       ? "/urdf/T12/urdf/T12.URDF"
       : customUrdfPath || "";
@@ -141,29 +106,12 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
     // Setup animation event handler for the default model or when hasAnimation is true
     const onModelProcessed = () => {
       hasInitializedRef.current = true;
-      if (isAnimating && "setJointValue" in viewer) {
+      if ("setJointValue" in viewer) {
         // Clear any existing animation
         if (cleanupAnimationRef.current) {
           cleanupAnimationRef.current();
           cleanupAnimationRef.current = null;
         }
-
-        // Use the appropriate animation based on whether it's the default model or hasAnimation
-        if (isDefaultModel) {
-          // Start the hexapod animation when it's the default model
-          cleanupAnimationRef.current = animateHexapodRobot(
-            viewer as import("@/lib/urdfAnimationHelpers").URDFViewerElement
-          );
-        } else if (hasAnimation) {
-          // Use the custom animation config from the context if available, otherwise fall back to cassieWalkingConfig
-          const animationConfig = currentAnimationConfig || cassieWalkingConfig;
-
-          // Start the animation using the selected configuration
-          cleanupAnimationRef.current = animateRobot(
-            viewer as import("@/lib/urdfAnimationHelpers").URDFViewerElement,
-            animationConfig
-          );
-        }
       }
     };
 
@@ -180,13 +128,7 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
       cleanupModelLoading();
       viewer.removeEventListener("urdf-processed", onModelProcessed);
     };
-  }, [
-    isDefaultModel,
-    customUrdfPath,
-    urlModifierFunc,
-    hasAnimation,
-    currentAnimationConfig,
-  ]);
+  }, [isDefaultModel, customUrdfPath, urlModifierFunc]);
 
   // Separate effect to handle theme changes without recreating the viewer
   useEffect(() => {
@@ -202,40 +144,6 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
     }
   }, [isDarkMode]);
 
-  // Effect to handle animation toggling after initial load
-  useEffect(() => {
-    if (!viewerRef.current || !hasInitializedRef.current) return;
-
-    // Only manage animation if viewer has setJointValue (required for animation)
-    if (!("setJointValue" in viewerRef.current)) return;
-
-    if (isAnimating) {
-      if (!cleanupAnimationRef.current) {
-        // Only start animation if it's not already running
-        if (isDefaultModel) {
-          cleanupAnimationRef.current = animateHexapodRobot(
-            viewerRef.current as import("@/lib/urdfAnimationHelpers").URDFViewerElement
-          );
-        } else if (hasAnimation) {
-          // Use the custom animation config from the context if available, otherwise fall back to cassieWalkingConfig
-          const animationConfig = currentAnimationConfig;
-
-          // Start animation using the selected configuration
-          cleanupAnimationRef.current = animateRobot(
-            viewerRef.current as import("@/lib/urdfAnimationHelpers").URDFViewerElement,
-            animationConfig
-          );
-        }
-      }
-    } else {
-      if (cleanupAnimationRef.current) {
-        // Just cancel the animation frame without resetting anything
-        cleanupAnimationRef.current();
-        cleanupAnimationRef.current = null;
-      }
-    }
-  }, [isAnimating, isDefaultModel, hasAnimation, currentAnimationConfig]);
-
   return (
     <div
       className={cn(
@@ -247,46 +155,10 @@ const URDFViewer: React.FC<URDFViewerProps> = ({
     >
       <div ref={containerRef} className="w-full h-full" />
 
-      {/* Control buttons container in top right, with vertical padding for header */}
-      <div
-        className="absolute right-4 flex items-center space-x-2 z-10"
-        style={{ top: `${headerHeight + 16}px` }}
-      >
+      {/* Control buttons container in top right */}
+      <div className="absolute top-4 right-4 flex items-center space-x-2 z-10">
         {/* ModeToggle button */}
         <ModeToggle />
-
-        {/* Animation control button with icon - show for both default model and when animation is available */}
-        {showAnimationControl && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={toggleAnimation}
-                  className={cn(
-                    "p-2.5 rounded-full shadow-md transition-all duration-300",
-                    isDarkMode
-                      ? "bg-gray-700 hover:bg-gray-600 text-white"
-                      : "bg-white/80 hover:bg-white text-gray-800"
-                  )}
-                  aria-label={
-                    isAnimating ? "Stop Animation" : "Start Animation"
-                  }
-                >
-                  {isAnimating ? (
-                    <Pause className="h-5 w-5" />
-                  ) : (
-                    <Play className="h-5 w-5" />
-                  )}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                <p className="font-mono text-xs">
-                  {isAnimating ? "Stop Animation" : "Start Animation"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
       </div>
 
       {/* Joint highlight indicator */}

viewer/src/components/layout/Layout.tsx

@@ -20,7 +20,6 @@ const Layout: React.FC = () => {
     isDefaultModel,
     resetToDefaultModel,
     isSelectionModalOpen,
-    currentAnimationConfig,
   } = useUrdf();
 
   // Log when robot data changes to verify the component is re-rendering
@@ -37,16 +36,13 @@ const Layout: React.FC = () => {
     setOpen(true);
   }, []);
 
-  // Calculate if we have a custom animation
-  const hasCustomAnimation = currentAnimationConfig !== null;
-
   // If there's a selection modal open, render a simplified layout
   if (isSelectionModalOpen) {
     return (
       <div className="absolute inset-0 overflow-hidden">
         {/* Main content that fills the container */}
         <div className="w-full h-full">
-          <URDFViewer hasAnimation={hasCustomAnimation} />
+          <URDFViewer />
         </div>
       </div>
     );
@@ -56,10 +52,7 @@ const Layout: React.FC = () => {
     <div className="relative w-full h-full overflow-hidden">
       {/* Main content that fills the container */}
       <div className="w-full h-full">
-        <URDFViewer
-          hasAnimation={hasCustomAnimation}
-          headerHeight={HEADER_HEIGHT}
-        />
+        <URDFViewer />
       </div>
       {/* Sidebar positioned above with z-index, with top padding for header */}
       <div
@@ -123,13 +116,8 @@ const Layout: React.FC = () => {
             className="flex flex-col items-center justify-center"
             style={{ paddingTop: `${HEADER_HEIGHT}px` }}
           >
-            <div className="flex items-center mt-4">
-              <LayoutDashboard className="h-7 w-7" />
-            </div>
             <div
-              className={`flex items-center justify-center hover:bg-muted/80 cursor-pointer rounded-md p-2 m-2 ${
-                theme === "dark" ? "bg-gray-700" : "bg-white/80"
-              } shadow-sm`}
+              className={`flex items-center justify-center hover:bg-muted/80 cursor-pointer rounded-md p-2 m-2 ${"bg-gray-700"} shadow-sm`}
               onClick={() => setOpen(true)}
             >
               <div className="flex items-center space-x-1">

viewer/src/contexts/UrdfContext.tsx

@@ -110,7 +110,8 @@ export const UrdfProvider: React.FC<UrdfProviderProps> = ({ children }) => {
       const fetchDefaultUrdf = async () => {
         try {
           // Path to the default T12 URDF file
-          const defaultUrdfPath = "/urdf/T12/urdf/T12.URDF";
+          const defaultUrdfPath =
+            "/urdf/SO_5DOF_ARM100_05d/urdf/SO_5DOF_ARM100_05d.URDF";
 
           // Fetch the URDF content
           const response = await fetch(defaultUrdfPath);
@@ -165,7 +166,7 @@ export const UrdfProvider: React.FC<UrdfProviderProps> = ({ children }) => {
     setCurrentAnimationConfig(null);
 
     toast.info("Switched to default model", {
-      description: "The default T12 robot model is now displayed.",
+      description: "The default ARM100 robot model is now displayed.",
     });
   }, []);
 

viewer/src/hooks/useDefaultRobotData.ts

@@ -20,7 +20,7 @@ async function fetchRobotData(robotName: string): Promise<UrdfData> {
  * @param robotName The name of the robot folder (e.g., 'T12')
  * @returns The robot data query result
  */
-export function useDefaultRobotData(robotName: string = "T12") {
+export function useDefaultRobotData(robotName: string = "SO_5DOF_ARM100_05d") {
   return useQuery({
     queryKey: ["defaultRobotData", robotName],
     queryFn: () => fetchRobotData(robotName),
@@ -35,7 +35,7 @@ export function useDefaultRobotData(robotName: string = "T12") {
  * @returns A promise that resolves to the robot data or null if loading fails
  */
 export async function loadDefaultRobotData(
-  robotName: string = "T12"
+  robotName: string = "SO_5DOF_ARM100_05d"
 ): Promise<UrdfData | null> {
   try {
     return await fetchRobotData(robotName);

viewer/src/lib/meshLoaders.ts

@@ -5,7 +5,6 @@ import {
   Color,
   Object3D,
   Group,
-  BufferGeometry,
 } from "three";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

viewer/src/pages/ContentDetail.tsx

@@ -1,198 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import Layout from "@/components/layout/Layout";
-import Header from "../components/Header";
-import { useUrdf } from "@/hooks/useUrdfData";
-import { toast } from "sonner";
-import { getImageUrl } from "@/api/urdfApi";
-import { useUrdf as useUrdfContext } from "@/hooks/useUrdf";
-import { downloadAndExtractZip } from "@/lib/UrdfDragAndDrop";
-import { supabase } from "@/integrations/supabase/client";
-import { Loader2 } from "lucide-react";
-
-// This is needed to make TypeScript recognize webkitdirectory as a valid attribute
-declare module "react" {
-  interface InputHTMLAttributes<T> extends React.HTMLAttributes<T> {
-    directory?: string;
-    webkitdirectory?: string;
-  }
-}
-
-const ContentDetail: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { data: content, isLoading, error } = useUrdf(id || "");
-  const [imageUrl, setImageUrl] = useState<string>("/placeholder.svg");
-  const { urdfProcessor, processUrdfFiles, currentRobotData } =
-    useUrdfContext();
-  const [isLoadingUrdf, setIsLoadingUrdf] = useState(false);
-  // Reference to track if we've already loaded this model
-  const hasModelBeenLoaded = useRef(false);
-  // State to track when the model is fully loaded and ready to display
-  const [isModelReady, setIsModelReady] = useState(false);
-
-  // If error occurred during fetch, show error and redirect
-  useEffect(() => {
-    if (error) {
-      toast.error("Error loading robot details");
-      navigate("/");
-    }
-  }, [error, navigate]);
-
-  // If content not found and not loading, redirect to home
-  useEffect(() => {
-    if (!content && !isLoading && !error) {
-      toast.error("Robot not found");
-      navigate("/");
-    }
-  }, [content, isLoading, error, navigate]);
-
-  // Fetch the image when content is loaded
-  useEffect(() => {
-    if (content?.imageUrl) {
-      const fetchImage = async () => {
-        const url = await getImageUrl(content.imageUrl);
-        setImageUrl(url);
-      };
-      fetchImage();
-    }
-  }, [content]);
-
-  // Reset the model states when the ID changes
-  useEffect(() => {
-    hasModelBeenLoaded.current = false;
-    setIsModelReady(false);
-  }, [id]);
-
-  // Check if we already have this model loaded
-  useEffect(() => {
-    if (content && currentRobotData?.name === content.title) {
-      // The model is already loaded
-      hasModelBeenLoaded.current = true;
-      setIsModelReady(true);
-      console.log("Model already loaded and ready to display");
-    }
-  }, [content, currentRobotData]);
-
-  // Load the URDF model automatically when the content details are loaded
-  useEffect(() => {
-    const loadUrdfModel = async () => {
-      // Only load if we have content, a processor, not currently loading,
-      // and haven't already loaded this model
-      if (
-        content?.urdfPath &&
-        urdfProcessor &&
-        !isLoadingUrdf &&
-        !hasModelBeenLoaded.current
-      ) {
-        // Mark that we've attempted to load this model
-        hasModelBeenLoaded.current = true;
-        setIsLoadingUrdf(true);
-        setIsModelReady(false); // Reset model ready state while loading
-
-        console.log(`Auto-loading URDF model for ${content.title}...`);
-
-        const loadingToast = toast.loading(`Loading ${content.title}...`, {
-          description: "Downloading and extracting URDF model",
-        });
-
-        try {
-          // Get the actual URL for the zip file
-          let zipUrl = content.urdfPath;
-
-          // If it's a storage path and not a full URL, get a signed URL
-          if (!zipUrl.startsWith("http")) {
-            const { data, error } = await supabase.storage
-              .from("robotbucket")
-              .createSignedUrl(zipUrl, 3600); // 1 hour expiry
-
-            if (error) {
-              throw new Error(
-                `Failed to get URL for zip file: ${error.message}`
-              );
-            }
-
-            zipUrl = data.signedUrl;
-          }
-
-          // Download and extract the zip file
-          const { files, availableModels } = await downloadAndExtractZip(
-            zipUrl,
-            urdfProcessor
-          );
-
-          // Dismiss loading toast
-          toast.dismiss(loadingToast);
-
-          // If successful, process the extracted files similar to drag and drop
-          if (files && availableModels.length > 0) {
-            await processUrdfFiles(files, availableModels);
-            toast.success(`Loaded model: ${content.title}`, {
-              description: "URDF model ready for viewing",
-            });
-
-            // Set a short timeout to ensure the URDF context is fully updated
-            setTimeout(() => {
-              setIsModelReady(true);
-            }, 1000);
-          } else {
-            toast.error("No URDF models found in the zip file");
-          }
-        } catch (error) {
-          // Dismiss loading toast and show error
-          toast.dismiss(loadingToast);
-          console.error("Error processing URDF zip:", error);
-          toast.error("Failed to load URDF model", {
-            description:
-              error instanceof Error ? error.message : "Unknown error",
-          });
-        } finally {
-          setIsLoadingUrdf(false);
-        }
-      }
-    };
-
-    loadUrdfModel();
-  }, [content, urdfProcessor, processUrdfFiles, isLoadingUrdf]);
-
-  // If still loading content data, show initial loading state
-  if (isLoading || !content) {
-    return (
-      <div className="min-h-screen bg-netflix-background flex items-center justify-center">
-        <div className="text-white text-xl">Loading robot details...</div>
-      </div>
-    );
-  }
-
-  // // If content is loaded but URDF model is still loading or processing, show URDF loading state
-  // if (!isModelReady || isLoadingUrdf) {
-  //   return (
-  //     <div className="min-h-screen bg-netflix-background flex flex-col items-center justify-center">
-  //       <Loader2 className="h-12 w-12 text-white animate-spin mb-4" />
-  //       <div className="text-white text-xl">
-  //         Loading {content.title} model...
-  //       </div>
-  //       <p className="text-gray-400 mt-2">
-  //         Please wait while we prepare the 3D model
-  //       </p>
-  //     </div>
-  //   );
-  // }
-
-  // Only render the full layout once the model is ready
-  return (
-    <div className="flex flex-col h-screen bg-netflix-background text-white overflow-hidden">
-      {/* Layout taking full height */}
-      <div className="w-full h-full">
-        <Layout />
-      </div>
-
-      {/* Header absolutely positioned at the top */}
-      <div className="absolute top-0 left-0 right-0 z-50">
-        <Header />
-      </div>
-    </div>
-  );
-};
-
-export default ContentDetail;

viewer/src/pages/Explore.tsx

@@ -1,112 +0,0 @@
-import React from "react";
-import Header from "../components/Header";
-import Carousel from "../components/Carousel";
-import { ContentItem } from "../lib/types";
-import ChatWindow from "../components/ChatWindow";
-import { useUrdfs, useCategories } from "@/hooks/useUrdfData";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const Explore: React.FC = () => {
-  const { data: urdfs, isLoading: isLoadingUrdfs } = useUrdfs();
-  const { data: categories, isLoading: isLoadingCategories } = useCategories();
-
-  // Group content items by categories
-  const categorizedContent = React.useMemo(() => {
-    if (!urdfs) return {};
-
-    return urdfs.reduce((acc, item) => {
-      item.categories.forEach((category) => {
-        if (!acc[category]) {
-          acc[category] = [];
-        }
-        acc[category].push(item);
-      });
-      return acc;
-    }, {} as Record<string, ContentItem[]>);
-  }, [urdfs]);
-
-  // Get unique categories
-  const uniqueCategories = Object.keys(categorizedContent).sort();
-
-  return (
-    <div className="min-h-screen bg-netflix-background text-netflix-text">
-      <Header />
-
-      {/* Cosmic background wrapper */}
-      <div className="cosmic-background fixed inset-0 z-0">
-        {/* Cosmic background with stars */}
-        <div className="absolute inset-0 bg-[#0a0a14] overflow-hidden">
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwMCIgaGVpZ2h0PSIyMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNyIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVCbGVuZCBtb2RlPSJzY3JlZW4iLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9Ii4xIi8+PC9zdmc+')] bg-repeat opacity-30"></div>
-          {/* Subtle animated gradient overlay */}
-          <div className="absolute inset-0 bg-gradient-to-b from-indigo-900/20 via-transparent to-black/30"></div>
-          {/* Random stars */}
-          <div className="stars absolute inset-0"></div>
-        </div>
-      </div>
-
-      <div className="pt-24 relative z-10">
-        {/* Main content area */}
-        <main className="container mx-auto px-4 pb-8 max-w-full">
-          {/* Page title */}
-          <div className="mb-6 text-center">
-            <h1 className="text-4xl md:text-6xl font-bold tracking-tighter text-white animate-fade-in">
-              Explore All Robots
-            </h1>
-            <p className="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">
-              Browse our complete collection of robotics systems and deployable
-              URDF units
-            </p>
-          </div>
-
-          {/* Chat window right below the title */}
-          <section className="mb-12 max-w-4xl mx-auto">
-            <div className="glass-panel">
-              <ChatWindow />
-            </div>
-          </section>
-
-          {/* Content sections */}
-          <div className="relative z-10">
-            {isLoadingUrdfs || isLoadingCategories ? (
-              // Loading skeleton
-              <div className="space-y-20">
-                {[1, 2, 3].map((i) => (
-                  <section key={i} className="category-section min-h-[20vh]">
-                    <Skeleton className="h-10 w-48 mb-8" />
-                    <div className="glass-panel p-6 rounded-xl">
-                      <div className="flex gap-4">
-                        {[1, 2, 3, 4].map((j) => (
-                          <Skeleton key={j} className="h-64 w-full" />
-                        ))}
-                      </div>
-                    </div>
-                  </section>
-                ))}
-              </div>
-            ) : (
-              <div className="space-y-20">
-                {uniqueCategories.map((category) => (
-                  <section
-                    key={category}
-                    className="category-section min-h-[20vh]"
-                  >
-                    <h2 className="text-3xl font-bold mb-8 text-netflix-text text-glow capitalize">
-                      {category}
-                    </h2>
-                    <Carousel
-                      title={category}
-                      items={categorizedContent[category]}
-                      className="glass-panel p-6 rounded-xl"
-                    />
-                  </section>
-                ))}
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default Explore;

viewer/src/pages/Index.tsx

@@ -1,129 +0,0 @@
-
-import React, { useEffect, useRef, useState } from "react";
-import ContentCarousel from "../components/ContentCarousel";
-import Header from "../components/Header";
-import ChatWindow from "../components/ChatWindow";
-import TeamSection from "../components/TeamSection";
-import SplineViewer from "../components/SplineViewer";
-import { useCategories } from "@/hooks/useUrdfData";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const IndexCopy: React.FC = () => {
-  // const parallaxRef = useRef<HTMLDivElement>(null);
-  const sectionRefs = useRef<(HTMLElement | null)[]>([]);
-  const ticking = useRef<boolean>(false);
-  const [scrollY, setScrollY] = useState<number>(0);
-  const { data: categories, isLoading } = useCategories();
-
-  // Add parallax effect on scroll using requestAnimationFrame for better performance
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!ticking.current) {
-        window.requestAnimationFrame(() => {
-          setScrollY(window.scrollY);
-          ticking.current = false;
-        });
-        ticking.current = true;
-      }
-    };
-
-    // Initialize section references
-    const categoryElements =
-      document.querySelectorAll<HTMLElement>(".category-section");
-    sectionRefs.current = Array.from(categoryElements);
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  // Only get the trending category
-  const trendingCategory = categories?.find(
-    (category) => category.id === "trending"
-  );
-
-  return (
-    <div className="min-h-screen bg-netflix-background text-netflix-text">
-      <Header />
-
-      {/* Cosmic background wrapper for the entire page */}
-      <div className="cosmic-background fixed inset-0 z-0">
-        {/* Cosmic background with stars */}
-        <div className="absolute inset-0 bg-[#0a0a14] overflow-hidden">
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwMCIgaGVpZ2h0PSIyMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNyIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVCbGVuZCBtb2RlPSJzY3JlZW4iLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9Ii4xIi8+PC9zdmc+')] bg-repeat opacity-30"></div>
-
-          {/* Subtle animated gradient overlay */}
-          <div className="absolute inset-0 bg-gradient-to-b from-indigo-900/20 via-transparent to-black/30"></div>
-
-          {/* Random stars */}
-          <div className="stars absolute inset-0"></div>
-        </div>
-      </div>
-
-      <main className="container mx-auto px-4 pb-8 max-w-full relative z-10">
-        {/* Cosmic hero section with parallax text */}
-        <section className="relative overflow-visible">
-          <div className="w-full relative mb-8 flex items-start justify-center">
-            {/* Parallax text container */}
-            <div className="relative z-10 text-left px- md:px-0 max-w-6xl mx-auto mt-24 pt-16">
-              <h1 className="text-7xl md:text-[13rem] font-bold tracking-tighter whitespace-nowrap text-white animate-fade-in text-glow leading-none font-sans">
-                <span className="block -mb-12 text-gradient-white">PROMPT</span>
-                <span className="block -mb-12 text-gradient-white">
-                  SPATIAL
-                </span>
-                <span className="block text-gradient-white pb-4">AGENTS</span>
-              </h1>
-
-              {/* Spline 3D Asset with increased height and no overflow cutting */}
-              <div className="w-full h-[400px] relative -mt-20 z-0 overflow-visible">
-                <SplineViewer
-                  splineUrl="https://prod.spline.design/Ze6evzKLyY-Xq6uh/scene.splinecode"
-                  className="h-full overflow-visible"
-                />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Chat Window Section - Moved right below the title */}
-        <section className="mb-20 max-w-4xl mx-auto">
-          <div className="glass-panel">
-            <ChatWindow />
-          </div>
-        </section>
-
-        {/* Content sections with glass panels */}
-        <div className="relative z-10">
-          {/* Team Section */}
-          <TeamSection />
-
-          {/* Only display trending category */}
-          {isLoading ? (
-            <section className="category-section min-h-[20vh] mt-12">
-              <Skeleton className="h-10 w-48 mb-8" />
-              <Skeleton className="h-64 w-full" />
-            </section>
-          ) : trendingCategory ? (
-            <section className="category-section min-h-[20vh] mt-12">
-              <h2 className="text-3xl font-bold mb-8 text-netflix-text text-glow">
-                {trendingCategory.name}
-              </h2>
-              <ContentCarousel
-                key={trendingCategory.id}
-                category={trendingCategory}
-              />
-              <div className="mt-6 text-center">
-                <a
-                  href="/explore"
-                  className="inline-block bg-sidebar-accent px-6 py-3 rounded-lg text-white font-semibold hover:bg-opacity-80 transition-colors"
-                >
-                  Explore All Robots
-                </a>
-              </div>
-            </section>
-          ) : null}
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default IndexCopy;

viewer/src/pages/Movies.tsx

@@ -1,17 +0,0 @@
-
-import React from 'react';
-import Header from '../components/Header';
-
-const Movies: React.FC = () => {
-  return (
-    <div className="min-h-screen bg-netflix-background text-white">
-      <Header />
-      <main className="container mx-auto px-4 py-16">
-        <h1 className="text-4xl font-bold mb-8">Movies</h1>
-        <p className="text-xl">Browse all movies</p>
-      </main>
-    </div>
-  );
-};
-
-export default Movies;

viewer/src/pages/MyList.tsx

@@ -1,63 +0,0 @@
-
-import React from 'react';
-import Header from '../components/Header';
-import { useMyList } from '../hooks/use-my-list';
-import { useNavigate } from 'react-router-dom';
-import { Star } from 'lucide-react';
-
-const MyList: React.FC = () => {
-  const { myList, removeFromMyList } = useMyList();
-  const navigate = useNavigate();
-
-  const handleItemClick = (id: string) => {
-    navigate(`/content/${id}`);
-  };
-
-  return (
-    <div className="min-h-screen bg-netflix-background text-white">
-      <Header />
-      <main className="container mx-auto px-4 py-16">
-        <h1 className="text-4xl font-bold mb-8">Starred</h1>
-        
-        {myList.length === 0 ? (
-          <div className="text-center py-12">
-            <p className="text-xl mb-4">Your list is empty</p>
-            <p className="text-gray-400">Add items by clicking the star icon on content you like</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {myList.map((item) => (
-              <div 
-                key={item.id} 
-                className="relative rounded-md overflow-hidden cursor-pointer group"
-                onClick={() => handleItemClick(item.id)}
-              >
-                <img 
-                  src={item.imageUrl} 
-                  alt={item.title} 
-                  className="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-105" 
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
-                  <h3 className="text-white text-xl p-4 font-medium">{item.title}</h3>
-                </div>
-                
-                {/* Remove from list button */}
-                <button 
-                  className="absolute top-2 right-2 p-2 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeFromMyList(item.id);
-                  }}
-                >
-                  <Star size={20} className="fill-yellow-400 text-yellow-400" />
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-      </main>
-    </div>
-  );
-};
-
-export default MyList;

viewer/src/pages/NewAndPopular.tsx

@@ -1,31 +0,0 @@
-
-import React from "react";
-import Header from "../components/Header";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const NewAndPopular: React.FC = () => {
-  return (
-    <div className="min-h-screen bg-netflix-background">
-      <Header />
-      <div className="container mx-auto pt-24 px-4">
-        <h1 className="text-4xl font-bold text-white mb-8">New & Popular</h1>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {/* Placeholder content */}
-          {Array(6)
-            .fill(null)
-            .map((_, index) => (
-              <div key={index} className="bg-netflix-card rounded-md overflow-hidden">
-                <Skeleton className="h-48 w-full" />
-                <div className="p-4">
-                  <Skeleton className="h-6 w-3/4 mb-2" />
-                  <Skeleton className="h-4 w-full" />
-                </div>
-              </div>
-            ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NewAndPopular;

viewer/src/pages/NotFound.tsx

@@ -1,27 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
-
-const NotFound = () => {
-  const location = useLocation();
-
-  useEffect(() => {
-    console.error(
-      "404 Error: User attempted to access non-existent route:",
-      location.pathname
-    );
-  }, [location.pathname]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
-          Return to Home
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default NotFound;

viewer/src/pages/UrdfView.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import Layout from "@/components/layout/Layout";
-import Header from "@/components/Header";
 import { UrdfSelectionModalContainer } from "@/components/UrdfSelectionModalContainer";
 import { useUrdf } from "@/hooks/useUrdf";
+
 // This is needed to make TypeScript recognize webkitdirectory as a valid attribute
 declare module "react" {
   interface InputHTMLAttributes<T> extends React.HTMLAttributes<T> {