Artifact Playground

frontend/package.json

@@ -80,6 +80,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.167.1",
+    "tsd-jsdoc": "^2.5.0",
     "urdf-loader": "^0.12.2",
     "zod": "^3.23.8",
     "zxcvbn": "^4.4.2"

frontend/src/App.tsx

@@ -26,7 +26,6 @@ import Logout from "@/components/pages/Logout";
 import NotFound from "@/components/pages/NotFound";
 import OrderSuccess from "@/components/pages/OrderSuccess";
 import OrdersPage from "@/components/pages/Orders";
-import Playground from "@/components/pages/Playground";
 import PrivacyPolicy from "@/components/pages/PrivacyPolicy";
 import Profile from "@/components/pages/Profile";
 import ResearchPage from "@/components/pages/ResearchPage";
@@ -57,12 +56,6 @@ const App = () => {
                       <Routes>
                         <Route path={ROUTES.HOME.path} element={<Home />} />
 
-                        {/* Playground */}
-                        <Route
-                          path={ROUTES.PLAYGROUND.path}
-                          element={<Playground />}
-                        />
-
                         {/* General pages */}
                         <Route path={ROUTES.ABOUT.path} element={<About />} />
                         <Route
@@ -114,10 +107,11 @@ const App = () => {
                         />
 
                         {/* Seller */}
-                        <Route
-                          path={ROUTES.SELL.path}
-                          element={<SellerDashboard />}
-                        >
+                        <Route path={ROUTES.SELL.path}>
+                          <Route
+                            path={ROUTES.SELL.$.DASHBOARD.relativePath}
+                            element={<SellerDashboard />}
+                          />
                           <Route
                             path={ROUTES.SELL.$.ONBOARDING.relativePath}
                             element={<SellerOnboarding />}

frontend/src/components/files/FileRenderer.tsx

@@ -1,22 +1,48 @@
-import STLRenderer from "./STLRenderer";
-import { UntarredFile } from "./Tarfile";
-import URDFRenderer from "./URDFRenderer";
+import MJCFRenderer from "@/components/files/MJCFRenderer";
+import STLRenderer from "@/components/files/STLRenderer";
+import URDFRenderer from "@/components/files/URDFRenderer";
+import { UntarredFile } from "@/components/files/untar";
+
+const isMJCFFile = (content: string, filename: string): boolean => {
+  const extension = filename.split(".").pop()?.toLowerCase();
+  if (extension !== "xml" && extension !== "mjcf") {
+    return false;
+  }
+
+  return content.includes("<mujoco") && content.includes("</mujoco>");
+};
 
 const FileRenderer: React.FC<{
   file: UntarredFile;
   allFiles: UntarredFile[];
 }> = ({ file, allFiles }) => {
   const fileExtension = file.name.split(".").pop()?.toLowerCase();
+  const fileContent = new TextDecoder().decode(file.content);
 
   switch (fileExtension) {
     case "urdf":
       return (
         <URDFRenderer
-          urdfContent={new TextDecoder().decode(file.content)}
+          urdfContent={fileContent}
           files={allFiles}
           supportedThemes={["light", "dark"]}
         />
       );
+    case "xml":
+    case "mjcf":
+      if (isMJCFFile(fileContent, file.name)) {
+        // For now, just render the default humanoid, since there is something
+        // funky about the way the MJCF files are being generated by the
+        // K-Scale Onshape Library that isn't working well with the current
+        // renderer.
+        return <MJCFRenderer mjcfContent={fileContent} files={allFiles} />;
+      } else {
+        return (
+          <div className="h-full w-full flex items-center justify-center">
+            <p>Invalid MJCF file format</p>
+          </div>
+        );
+      }
     case "stl":
       return <STLRenderer stlContent={file.content.buffer} />;
     default:

frontend/src/components/files/FileTreeViewer.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { FaFile, FaFolder, FaFolderOpen } from "react-icons/fa";
 
-import { UntarredFile } from "./Tarfile";
+import { UntarredFile } from "@/components/files/untar";
 
 interface FileTreeNode {
   name: string;