funnel: API banner, clearer 'Create your own via API', API snippet, UTMs, team@projectsim.ai

README.md

@@ -17,6 +17,10 @@ license: mit
 
 # projectsim Lab
 
+> Every asset in this lab was generated by the **projectsim API** —
+> [generate your own →](https://docs.projectsim.ai/getting-started/quickstart?utm_source=hf_space&utm_medium=readme&utm_content=lab)
+> Each item's **Take it home** panel shows the exact API call that orders a set like it.
+
 In-browser 3D playground for the Kaedim class datasets — boxes, cages, desks,
 ovens, wardrobes: pick a class tab, pick an item, orbit it, and articulate
 every joint — grab a flap/door/drawer/wheel and drag it, or use the sliders

classes.json

@@ -3,65 +3,106 @@
   "class": "cardboard_box",
   "label": "Boxes",
   "dataset": "warehouse-manipulation-and-states",
-  "catalog_path": "viewer/cardboard_box.json"
+  "catalog_path": "viewer/cardboard_box.json",
+  "api": {
+   "articulated": true,
+   "seed": "I need an articulated cardboard box, opened on top with flat bottom."
+  }
  },
  {
   "class": "logistics_cage",
   "label": "Cages",
   "dataset": "warehouse-manipulation-and-states",
-  "catalog_path": "viewer/logistics_cage.json"
+  "catalog_path": "viewer/logistics_cage.json",
+  "api": {
+   "articulated": true,
+   "seed": "I need an articulated wire roll cage with four swivel casters."
+  }
  },
  {
   "class": "desk_with_drawers",
   "label": "Desks",
   "dataset": "articulated-storage-and-appliances",
-  "catalog_path": "viewer/desk_with_drawers.json"
+  "catalog_path": "viewer/desk_with_drawers.json",
+  "api": {
+   "articulated": true,
+   "seed": "I need an articulated wooden table with one sliding drawer."
+  }
  },
  {
   "class": "oven",
   "label": "Ovens",
   "dataset": "articulated-storage-and-appliances",
-  "catalog_path": "viewer/oven.json"
+  "catalog_path": "viewer/oven.json",
+  "api": {
+   "articulated": true,
+   "seed": "I need an articulated kitchen oven with a drop-down front door."
+  }
  },
  {
   "class": "wardrobe",
   "label": "Wardrobes",
   "dataset": "articulated-storage-and-appliances",
-  "catalog_path": "viewer/wardrobe.json"
+  "catalog_path": "viewer/wardrobe.json",
+  "api": {
+   "articulated": true,
+   "seed": "I need an articulated two-door wardrobe."
+  }
  },
  {
   "class": "pallet_boxes",
   "label": "Pallet Boxes",
   "dataset": "warehouse-manipulation-and-states",
   "catalog_path": "viewer/pallet_boxes.json",
-  "static": true
+  "static": true,
+  "api": {
+   "articulated": false,
+   "seed": "I need a wooden pallet stacked with taped cardboard boxes."
+  }
  },
  {
   "class": "gas_cylinder",
   "label": "Gas Cylinders",
   "dataset": "industrial-parts-and-packaging",
   "catalog_path": "viewer/gas_cylinder.json",
-  "static": true
+  "static": true,
+  "api": {
+   "articulated": false,
+   "seed": "I need a steel gas cylinder with a valve guard."
+  }
  },
  {
   "class": "pallet_racking",
   "label": "Pallet Racking",
   "dataset": "industrial-parts-and-packaging",
   "catalog_path": "viewer/pallet_racking.json",
-  "static": true
+  "static": true,
+  "api": {
+   "articulated": false,
+   "seed": "I need a steel warehouse pallet racking bay."
+  }
  },
  {
   "class": "containers",
   "label": "Containers",
   "dataset": "bottles-and-containers",
   "catalog_path": "viewer/containers.json",
-  "static": true
+  "static": true,
+  "api": {
+   "articulated": false,
+   "seeds": {
+    "beverage_can": "I need an aluminium beverage can.",
+    "glass_jar": "I need a glass jar with a screw lid.",
+    "mug": "I need a ceramic coffee mug with a handle."
+   }
+  }
  },
  {
   "class": "scenes",
   "label": "Scenes",
   "dataset": "scenes-and-worlds",
   "catalog_path": "viewer/scenes.json",
-  "static": true
+  "static": true,
+  "scene": true
  }
 ]

index.html

@@ -94,39 +94,9 @@
   #panel .copy:hover { background: var(--accent); }
   #panel .copy:active { transform: scale(.95); }
   #panel .copy.ok { background: var(--success); }
-  #panel .envtabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
-  #panel .envtab { padding: 4px 11px; border: 1px solid var(--border);
-                   border-radius: 999px; background: var(--surface);
-                   cursor: pointer; font: 500 11.5px var(--sans); color: var(--ink);
-                   transition: background .15s, border-color .15s; }
-  #panel .envtab:hover { border-color: var(--accent); }
-  #panel .envtab.active { background: var(--accent-strong); color: #fff;
-                          border-color: var(--accent-strong); }
-  #panel .envtab.active:hover { background: var(--accent); border-color: var(--accent); }
-  #panel .envtab .soon { opacity: .55; font-size: 8.5px; margin-left: 4px;
-                         text-transform: uppercase; letter-spacing: .05em;
-                         vertical-align: middle; }
   #panel .hdr { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
   #panel .hdr h2 { margin: 0; }
   #panel .fmt { margin-left: auto; font: 500 10px var(--code); color: var(--body); }
-  #panel .prereq { margin: -2px 0 7px; font: 500 10.5px var(--sans);
-                   color: var(--body); }
-  #panel .prereq.na { color: var(--accent-strong); }
-  #panel .envtab.na { opacity: .7; }
-  #panel .envtab .tag { margin-left: 4px; padding: 1px 5px; font-size: 8px;
-                        border-radius: 6px; background: var(--subtle);
-                        color: var(--body); letter-spacing: .04em;
-                        text-transform: uppercase; vertical-align: middle; }
-  #panel .envtab.active .tag { background: rgba(255,255,255,.24); color: #fff; }
-  #panel .modetabs { display: flex; gap: 6px; margin: 11px 0 6px; }
-  #panel .modetab { padding: 5px 13px; border: 1px solid var(--border);
-                    border-radius: 999px; background: var(--surface);
-                    cursor: pointer; font: 600 11.5px var(--sans);
-                    color: var(--ink); transition: background .15s, border-color .15s; }
-  #panel .modetab:hover { border-color: var(--accent); }
-  #panel .modetab.active { background: var(--accent-strong); color: #fff;
-                           border-color: var(--accent-strong); }
-  #panel .modetab.active:hover { background: var(--accent); border-color: var(--accent); }
   #panel .codewrap { position: relative; }
   #panel .codewrap pre { margin: 0; padding-right: 36px; }
   #panel .copybtn { position: absolute; top: 7px; right: 7px; width: 26px;
@@ -141,6 +111,24 @@
   #panel .copybtn.ok .i-copy { display: none; }
   #panel .copybtn.ok .i-ok { display: inline; }
   [hidden] { display: none !important; }
+  #apibanner { display: flex; align-items: center; justify-content: center;
+               gap: 10px; padding: 7px 16px; flex-wrap: wrap;
+               background: linear-gradient(90deg, var(--accent), var(--accent-strong));
+               color: #fff; font: 500 13px var(--sans); text-align: center; }
+  #apibanner b { font-weight: 700; }
+  #apibanner a { padding: 3px 12px; border-radius: 999px; background: #fff;
+                 color: var(--accent-strong); font: 700 12px var(--sans);
+                 text-decoration: none; white-space: nowrap;
+                 transition: background .15s; }
+  #apibanner a:hover { background: var(--accent-soft); }
+  #panel .apinote { margin: 6px 0 8px; font: 500 10.5px var(--sans); color: var(--body); }
+  #panel .apilinks a { display: block; margin: 6px 0; padding: 7px 12px;
+                       border-radius: 999px; background: var(--accent-strong);
+                       color: #fff; text-decoration: none; text-align: center;
+                       font: 600 12px var(--sans); transition: background .15s; }
+  #panel .apilinks a:hover { background: var(--accent); }
+  #panel .apilinks a.ghost { background: var(--subtle); color: var(--ink); }
+  #panel .apilinks a.ghost:hover { background: var(--page); }
 </style>
 <style id="scene-loader-style">
 #scene-loader { position: absolute; inset: 0; display: none;
@@ -155,13 +143,8 @@
 <style id="scene-links-style">
 body.class-static #panel .row,
 body.class-static #panel #joints,
-body.class-static #panel .hdr,
-body.class-static #panel .modetabs,
-body.class-static #panel #takeMeta,
-body.class-static #panel .envtabs,
-body.class-static #panel .prereq,
-body.class-static #panel .codewrap { display: none !important; }
-body:not(.class-static) #scene-links { display: none; }
+body.class-scene #panel #apiblock { display: none !important; }
+body:not(.class-scene) #scene-links { display: none; }
 #scene-links { padding: 4px 0; }
 #scene-links h2 { margin: 12px 0 6px; font-size: 15px; }
 #scene-links a { display: block; padding: 8px 12px; margin: 4px 0;
@@ -173,14 +156,19 @@ body:not(.class-static) #scene-links { display: none; }
 </head>
 <body>
 <div id="scene-loader"><div class="spin"></div><span id="scene-loader-text">loading…</span></div>
+<div id="apibanner">
+  <span>Every asset in this lab was generated by the <b>projectsim API</b> — make a set of your own.</span>
+  <a href="https://docs.projectsim.ai/getting-started/quickstart?utm_source=hf_space&utm_medium=banner&utm_content=lab"
+     target="_blank" rel="noopener">Generate your own →</a>
+</div>
 <header>
   <h1>projectsim Lab</h1>
   <div id="tabs"></div>
   <nav class="links">
     <a id="dslink" href="https://huggingface.co/projectsim"
        target="_blank" rel="noopener">Dataset</a>
-    <a href="https://docs.projectsim.ai" target="_blank"
-       rel="noopener">API docs</a>
+    <a href="https://docs.projectsim.ai/?utm_source=hf_space&utm_medium=header&utm_content=lab"
+       target="_blank" rel="noopener">API docs</a>
   </nav>
 </header>
 <main>
@@ -195,14 +183,9 @@ body:not(.class-static) #scene-links { display: none; }
       <button id="anim" class="ghost">▶ Loop</button>
     </div>
     <div id="joints"></div>
-    <div class="hdr"><h2>Take it home</h2><span class="fmt" id="fmt"></span></div>
-    <div class="modetabs" id="modetabs">
-      <button class="modetab active" data-mode="manual">Manual commands</button>
-      <button class="modetab" data-mode="agent">Agent prompt</button>
-    </div>
-    <div class="meta" id="takeMeta"></div>
-    <div class="envtabs" id="envtabs"></div>
-    <div class="prereq" id="submeta"></div>
+    <div id="apiblock">
+    <div class="hdr"><h2>Take it home</h2><span class="fmt">projectsim API</span></div>
+    <div class="meta">Generate a set like this one with the projectsim API:</div>
     <div class="codewrap">
       <pre id="output"></pre>
       <button class="copybtn" id="copy" title="Copy" aria-label="Copy">
@@ -215,11 +198,19 @@ body:not(.class-static) #scene-links { display: none; }
              stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
       </button>
     </div>
+    <div class="apinote">USD output · 10–500 variants per call · 1 credit per variant</div>
+    <div class="apilinks">
+      <a id="api-token" href="https://dashboard.projectsim.ai/?utm_source=hf_space&utm_medium=take_it_home&utm_content=lab" target="_blank" rel="noopener">Get an API token →</a>
+      <a id="api-docs" href="https://docs.projectsim.ai/creating-assets/procedural-variation-set?utm_source=hf_space&utm_medium=take_it_home&utm_content=lab" target="_blank" rel="noopener">Read the API docs →</a>
+      <a id="api-files" class="ghost" href="https://huggingface.co/projectsim" target="_blank" rel="noopener">Or download this asset from the dataset →</a>
+    </div>
+    </div>
     <div id="scene-links">
       <h2>Take it home</h2>
       <a id="scene-usd-link" href="#" target="_blank" rel="noopener">Full USD (with Gaussian splat) on Hugging Face →</a>
       <a id="scene-glb-link" href="#" target="_blank" rel="noopener">This scene as GLB →</a>
       <a id="scene-dataset-link" href="https://huggingface.co/datasets/projectsim/scenes-and-worlds" target="_blank" rel="noopener">Browse the scenes-and-worlds dataset →</a>
+      <a id="scene-request-link" href="https://www.projectsim.ai/access?dataset=scenes-and-worlds&utm_source=hf_space&utm_medium=take_it_home&utm_content=scenes" target="_blank" rel="noopener">Need scenes at scale? Request a larger dataset →</a>
       <div class="note" id="scene-note">USD ships the full room including the Gaussian splat backdrop; the GLB is a lightweight preview (splat dropped, textures baked).</div>
     </div>
   </aside>
@@ -247,8 +238,6 @@ const dsUrl = (ds, path) => LOCAL_BASE
   ? `${LOCAL_BASE}/${ds}/${path}`
   : GATED.has(ds) ? `${PREVIEW}/${ds}/${path}`
   : `${HFDS}/${ds}/resolve/main/${path}`;
-const auth = cls => GATED.has(cls.dataset)
-  ? `# gated: accept access at ${HFDS}/${cls.dataset} first\nhf auth login\n\n` : "";
 const stage = document.getElementById("stage");
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
@@ -380,214 +369,64 @@ addEventListener("pointerup", () => {
               renderer.domElement.style.cursor = ""; }
 });
 
-// ---- Take-it-home: OS-aware engine selector + agent prompt ------------------
-function detectOS() {
-  const p = ((navigator.userAgentData && navigator.userAgentData.platform) ||
-             navigator.platform || navigator.userAgent || "").toLowerCase();
-  if (p.includes("mac")) return "mac";
-  if (p.includes("win")) return "win";
-  return "linux";
-}
-const OS = detectOS();
-const OS_LABEL = { mac: "macOS", win: "Windows", linux: "Linux" }[OS];
-
+// ---- Take-it-home: the projectsim API call that generates a set like this ----
+// Every tab's items came out of the procedural pipeline, so "take it home" is the
+// POST /v1/variation-sets/procedural call that makes more of them. Seeds live in
+// classes.json (api.seed, or api.seeds keyed by an item-id substring when one tab
+// mixes object types). Scenes have no endpoint yet and keep their file links.
+const API = "https://api.projectsim.ai";
+const utm = (medium, content) =>
+  `utm_source=hf_space&utm_medium=${medium}&utm_content=${encodeURIComponent(content)}`;
 let curCls = null, curItem = null;
-let curEnv = (() => { try { return localStorage.getItem("ps_env"); }
-                      catch (e) { return null; } })();
-let curMode = (() => { try { return localStorage.getItem("ps_mode"); }
-                       catch (e) { return null; } })() || "manual";
-
-// software options for MANUAL mode. "auto" self-detects at run time; os =
-// platforms each runs on natively (used to flag Isaac on macOS).
-const ENVS = [
-  { id: "auto",    label: "Auto-detect",         fmt: "detects engine",
-    os: ["mac", "win", "linux"],
-    prereq: "Runs whichever engine you have installed (detected at run time)." },
-  { id: "isaac",   label: "Isaac Sim",           fmt: "USD + textures",
-    os: ["win", "linux"],
-    prereq: "Isaac Sim — Linux/Windows + an NVIDIA RTX GPU." },
-  { id: "mujoco",  label: "MuJoCo",              fmt: "MJCF + meshes",
-    os: ["mac", "win", "linux"],
-    prereq: "pip install mujoco  ·  any OS." },
-  { id: "usd",     label: "usdview / Omniverse", fmt: "USD + textures",
-    os: ["mac", "win", "linux"],
-    prereq: "usdview (pip install usd-core) — Omniverse needs Linux/Win + RTX." },
-  { id: "blender", label: "Blender",             fmt: ".glb",
-    os: ["mac", "win", "linux"],
-    prereq: "Blender 4.0+ — free at blender.org/download." },
-];
-const envById = id => ENVS.find(e => e.id === id);
-const naOn = e => e.id !== "auto" && !e.os.includes(OS);
-if (!envById(curEnv)) curEnv = "auto";   // default: self-detect
-
-const classLabel = cls =>
-  cls.dataset.replace(/^articulated-/, "")
-    .replace(/ies$/, "y").replace(/([sxz]|ch|sh)es$/, "$1").replace(/s$/, "");
-
-// One-shot snapshot download of a subtree from the dataset via huggingface_hub.
-// Files land at the same relative path they have on the hub.
-function hfDl(cls, item, patterns) {
-  const inc = patterns.map(p => `"assets/${cls.class}/${item.id}/${p}"`).join(", ");
-  return `python - <<'PY'\n` +
-    `from huggingface_hub import snapshot_download\n` +
-    `snapshot_download("projectsim/${cls.dataset}", repo_type="dataset",\n` +
-    `                  allow_patterns=[${inc}], local_dir=".")\n` +
-    `PY\n`;
-}
-
-// The path a downloaded file lives at, relative to projectsim-assets/.
-const assetPath = (cls, item, file) => `assets/${cls.class}/${item.id}/${file}`;
 
-// the open step, aware of OS (macOS needs mjpython; Blender launcher differs)
-function openCmd(env, cls, item) {
-  const id = item.id;
-  const usda = assetPath(cls, item, `${id}.usda`);
-  const xml  = assetPath(cls, item, `mjcf/${id}.xml`);
-  const glb  = assetPath(cls, item, `${id}.glb`);
-  if (env === "mujoco")
-    return OS === "mac"
-      ? `mjpython -m mujoco.viewer --mjcf=${xml}`
-      : `python -m mujoco.viewer --mjcf=${xml}`;
-  if (env === "blender")
-    return OS === "mac" ? `open -a Blender ${glb}` : `blender ${glb}`;
-  if (env === "usd")
-    return `usdview ${usda}`;
-  return `"$ISAAC_SIM/python.sh" - <<PY\n` +            // isaac
-    `from isaacsim import SimulationApp\n` +
-    `app = SimulationApp({"open_usd": "$PWD/${usda}"})\n` +
-    `while app.is_running():\n    app.update()\nPY`;
+function seedFor(cls, item) {
+  const a = cls.api;
+  if (!a) return null;
+  if (a.seed) return a.seed;
+  const k = Object.keys(a.seeds || {}).find(k => item.id.includes(k));
+  return k ? a.seeds[k] : null;
 }
 
-function cmdFor(env, cls, item) {
-  if (env === "auto") return autoScript(cls, item);
-  const head = `mkdir -p projectsim-assets && cd projectsim-assets\npip install -q huggingface_hub\n\n` + auth(cls);
-  const naNote = naOn(envById(env))
-    ? `# ${envById(env).label} doesn't run on ${OS_LABEL} — run this on a\n` +
-      `# Linux/Windows box with an NVIDIA RTX GPU (or a cloud instance).\n\n`
-    : "";
-  const patterns = {
-    isaac:   [`${item.id}.usda`, "textures/**"],
-    usd:     [`${item.id}.usda`, "textures/**"],
-    mujoco:  ["mjcf/**"],
-    blender: [`${item.id}.glb`],
-  }[env];
-  const preOpen = env === "isaac"
-    ? `\n# open the play-ready scene in Isaac Sim, then press Play\n` +
-      `# (set ISAAC_SIM to your install, e.g. ~/isaacsim)\n`
-    : env === "mujoco"
-    ? `\n# self-contained model (visuals + colliders + joints + latches)\n`
-    : "\n";
-  return naNote + head + hfDl(cls, item, patterns) + preOpen + openCmd(env, cls, item);
-}
-
-// The browser can't read your disk — so this script does the detection itself,
-// at run time, and launches whichever engine you actually have installed.
-function autoScript(cls, item) {
-  const id = item.id;
-  const usda = assetPath(cls, item, `${id}.usda`);
-  const xml  = assetPath(cls, item, `mjcf/${id}.xml`);
-  const glb  = assetPath(cls, item, `${id}.glb`);
-  const dl = (patterns) =>
-    `python - <<PY\n` +
-    `from huggingface_hub import snapshot_download\n` +
-    `snapshot_download("projectsim/${cls.dataset}", repo_type="dataset",\n` +
-    `                  allow_patterns=[${patterns.map(p=>`"assets/${cls.class}/${id}/${p}"`).join(", ")}], local_dir=".")\n` +
-    `PY`;
-  return `# Paste in a macOS/Linux terminal — finds your installed engine.\n` +
-    `mkdir -p projectsim-assets && cd projectsim-assets\n` +
-    `pip install -q huggingface_hub\n\n` + auth(cls) +
-    `if [ -n "$ISAAC_SIM" ] && [ -x "$ISAAC_SIM/python.sh" ]; then\n` +
-    `  echo "→ Isaac Sim"\n` +
-    `  ${dl([`${id}.usda`, "textures/**"])}\n` +
-    `  "$ISAAC_SIM/python.sh" - <<PY\n` +
-    `from isaacsim import SimulationApp\n` +
-    `app = SimulationApp({"open_usd": "$PWD/${usda}"})\n` +
-    `while app.is_running(): app.update()\nPY\n` +
-    `elif command -v mjpython >/dev/null 2>&1 || python -c "import mujoco" 2>/dev/null; then\n` +
-    `  echo "→ MuJoCo"\n` +
-    `  ${dl(["mjcf/**"])}\n` +
-    `  { command -v mjpython >/dev/null 2>&1 && mjpython -m mujoco.viewer --mjcf=${xml}; } \\\n` +
-    `    || python -m mujoco.viewer --mjcf=${xml}\n` +
-    `elif command -v usdview >/dev/null 2>&1; then\n` +
-    `  echo "→ usdview"\n` +
-    `  ${dl([`${id}.usda`, "textures/**"])}\n` +
-    `  usdview ${usda}\n` +
-    `elif command -v blender >/dev/null 2>&1 || [ -d /Applications/Blender.app ]; then\n` +
-    `  echo "→ Blender"\n` +
-    `  ${dl([`${id}.glb`])}\n` +
-    `  { command -v blender >/dev/null 2>&1 && blender ${glb}; } || open -a Blender ${glb}\n` +
-    `else\n` +
-    `  echo "No engine found — easiest is:  pip install mujoco  (then re-run)."\n` +
-    `fi`;
-}
-
-function agentFor(cls, item) {
-  return `Download the projectsim asset "${item.id}" — a sim-ready articulated ` +
-    `${classLabel(cls)} (${item.mass_kg.toFixed(1)} kg, ` +
-    `${item.joints.length} joints) — and open it in whichever simulator is ` +
-    `installed here (Isaac Sim, MuJoCo, usdview, or Blender). Detect what's ` +
-    `available, download the matching file, and open it; if none are installed, ` +
-    "`pip install mujoco` and use that.\n\n" +
-    `A script that does exactly this — run it or adapt it:\n\n` +
-    autoScript(cls, item);
+function apiFor(cls, item) {
+  const seed = seedFor(cls, item);
+  if (!seed) return null;
+  // Same shape as robotics-server's CreateProceduralVariationSetRequest: only
+  // what changes the result. `params.physics.articulated` defaults to true
+  // (body rigid, simulator isaac_sim_physx, collision auto), so it's sent
+  // only for jointless props.
+  const body = { name: cls.class.replace(/_/g, " "), count: 10, seed: { text: seed } };
+  if (!cls.api.articulated) body.params = { physics: { articulated: false } };
+  // the body sits in a single-quoted shell string: escape any ' in it
+  const json = JSON.stringify(body, null, 2).replace(/'/g, `'\\''`);
+  return `# export PROJECTSIM_TOKEN=kps_live_...   (from dashboard.projectsim.ai)\n\n` +
+    `# 1. order 10 variants like this one (10 credits)\n` +
+    `curl -X POST "${API}/v1/variation-sets/procedural" \\\n` +
+    `  -H "Authorization: Bearer $PROJECTSIM_TOKEN" \\\n` +
+    `  -H "Content-Type: application/json" \\\n` +
+    `  -H "Idempotency-Key: $(uuidgen)" \\\n` +
+    `  -d '${json}'\n\n` +
+    `# 2. poll the job_id from the response until "complete"\n` +
+    `curl -H "Authorization: Bearer $PROJECTSIM_TOKEN" \\\n` +
+    `  "${API}/v1/jobs/$JOB_ID"\n\n` +
+    `# 3. list the set (its id is in step 1's response); each\n` +
+    `#    files[].url is a presigned USD download\n` +
+    `curl -H "Authorization: Bearer $PROJECTSIM_TOKEN" \\\n` +
+    `  "${API}/v1/variation-sets/$SET_ID/assets?limit=100"`;
 }
 
 function renderCmd() {
-  if (!curItem) return;
-  const agent = curMode === "agent";
-  const out = document.getElementById("output");
-  const sub = document.getElementById("submeta");
-  document.getElementById("envtabs").hidden = agent;   // software picker: manual only
-  document.getElementById("fmt").hidden = agent;
-  document.getElementById("takeMeta").textContent = agent
-    ? "The agent detects your setup and opens it wherever it can:"
-    : "Same asset, full-res + real physics — pick your engine:";
-  if (agent) {
-    out.textContent = agentFor(curCls, curItem);
-    sub.textContent = "Paste into Claude Code, Cursor, or any coding agent.";
-    sub.classList.remove("na");
-  } else {
-    const e = envById(curEnv), na = naOn(e);
-    document.getElementById("fmt").textContent = e.fmt;
-    out.textContent = cmdFor(curEnv, curCls, curItem);
-    sub.textContent = (na ? `Not on ${OS_LABEL} · ` : "") + e.prereq;
-    sub.classList.toggle("na", na);
-  }
+  if (!curItem || !curCls) return;
+  document.getElementById("output").textContent = apiFor(curCls, curItem) || "";
+  const c = curCls.class;
+  document.getElementById("api-token").href =
+    `https://dashboard.projectsim.ai/?${utm("take_it_home", c)}`;
+  document.getElementById("api-docs").href =
+    `https://docs.projectsim.ai/creating-assets/procedural-variation-set?${utm("take_it_home", c)}`;
+  const dir = curItem.glb ? curItem.glb.replace(/\/[^/]*$/, "")
+                          : (curCls.items_dir || `assets/${c}`);
+  document.getElementById("api-files").href = `${HFDS}/${curCls.dataset}/tree/main/${dir}`;
 }
 
-(function initEnvTabs() {
-  const box = document.getElementById("envtabs");
-  ENVS.forEach(e => {
-    const b = document.createElement("button");
-    const na = naOn(e);
-    b.className = "envtab" + (e.id === curEnv ? " active" : "") + (na ? " na" : "");
-    b.dataset.env = e.id;
-    b.innerHTML = e.label + (na ? ` <span class="tag">Linux/Win</span>` : "");
-    b.onclick = () => {
-      curEnv = e.id;
-      try { localStorage.setItem("ps_env", curEnv); } catch (err) {}
-      box.querySelectorAll(".envtab").forEach(x =>
-        x.classList.toggle("active", x.dataset.env === curEnv));
-      renderCmd();
-    };
-    box.appendChild(b);
-  });
-})();
-
-(function initModeTabs() {
-  const box = document.getElementById("modetabs");
-  box.querySelectorAll(".modetab").forEach(b => {
-    b.classList.toggle("active", b.dataset.mode === curMode);
-    b.onclick = () => {
-      curMode = b.dataset.mode;
-      try { localStorage.setItem("ps_mode", curMode); } catch (err) {}
-      box.querySelectorAll(".modetab").forEach(x =>
-        x.classList.toggle("active", x.dataset.mode === curMode));
-      renderCmd();
-    };
-  });
-})();
-
 // ---- load one item -----------------------------------------------------------
 async function loadItem(cls, item) {
   clearModel();
@@ -762,6 +601,7 @@ fetch("classes.json")
       history.replaceState(null, "", `?${q}`);
     }
     document.body.classList.toggle("class-static", !!cls.static);
+    document.body.classList.toggle("class-scene", !!cls.scene);
     list.innerHTML = "";
     cls.items.forEach((item, i) => {
       const btn = document.createElement("button");