fix: media thumbnails, product dimensions, inline 3D viewer, GLB export

Bug A: Media Library thumbnails were gray because <img src> cannot send
JWT auth headers. Added useAuthBlob() hook (fetch + createObjectURL) in
MediaBrowser.tsx. Also fixed publish_asset Celery task to populate
product_id + cad_file_id on MediaAsset for thumbnail fallback resolution.

Bug B: Product dimensions now shown in Product Details card with Ruler
icon and "from CAD" label when cad_mesh_attributes.dimensions_mm exists.

Bug C: Replaced 128×128 CAD thumbnail with InlineCadViewer component.
Queries gltf_geometry MediaAssets, fetches GLB via auth fetch → blob URL
→ Three.js Canvas with OrbitControls. Falls back to thumbnail + "Load 3D
Model" button. Polling when GLB generation is in progress.

Bug D: trimesh was in [cad] optional extra but Dockerfile only installed
[dev]. Changed to pip install -e ".[dev,cad]" — trimesh now available in
backend container, GLB + Colors export works.

Also added bbox extraction (STL-first numpy parsing) in render_step_thumbnail
and admin "Re-extract CAD Metadata" bulk endpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/cad/InlineCadViewer.tsx

@@ -0,0 +1,128 @@
+import { Suspense, useEffect, useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import { Loader2, Box, RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+import { getMediaAssets } from '../../api/media'
+import { generateGltfGeometry } from '../../api/cad'
+import { useAuthStore } from '../../store/auth'
+
+function GlbModel({ url }: { url: string }) {
+  const { scene } = useGLTF(url)
+  return <primitive object={scene} />
+}
+
+export default function InlineCadViewer({
+  cadFileId,
+  thumbnailUrl,
+}: {
+  cadFileId: string
+  thumbnailUrl?: string | null
+}) {
+  const token = useAuthStore((s) => s.token)
+  const qc = useQueryClient()
+  const [glbBlobUrl, setGlbBlobUrl] = useState<string | null>(null)
+  const [loadingGlb, setLoadingGlb] = useState(false)
+  const [generating, setGenerating] = useState(false)
+
+  const { data: gltfAssets } = useQuery({
+    queryKey: ['media-assets', cadFileId, 'gltf_geometry'],
+    queryFn: () => getMediaAssets({ cad_file_id: cadFileId, asset_types: ['gltf_geometry'] }),
+    staleTime: 30_000,
+    refetchInterval: generating ? 4_000 : false,
+  })
+
+  // Stop polling once asset appears
+  useEffect(() => {
+    if (generating && gltfAssets && gltfAssets.length > 0) setGenerating(false)
+  }, [generating, gltfAssets])
+
+  const latestAsset = gltfAssets?.[0]
+  const downloadUrl = latestAsset?.download_url
+
+  // Fetch GLB with auth when download URL is available
+  useEffect(() => {
+    if (!downloadUrl || !token) return
+    setLoadingGlb(true)
+    let blobUrl = ''
+    fetch(downloadUrl, { headers: { Authorization: `Bearer ${token}` } })
+      .then((r) => r.blob())
+      .then((blob) => {
+        blobUrl = URL.createObjectURL(blob)
+        setGlbBlobUrl(blobUrl)
+      })
+      .catch(() => toast.error('Failed to load 3D model'))
+      .finally(() => setLoadingGlb(false))
+    return () => {
+      if (blobUrl) URL.revokeObjectURL(blobUrl)
+    }
+  }, [downloadUrl, token])
+
+  const generateMut = useMutation({
+    mutationFn: () => generateGltfGeometry(cadFileId),
+    onSuccess: () => {
+      toast.info('Generating 3D model…')
+      setGenerating(true)
+      qc.invalidateQueries({ queryKey: ['media-assets', cadFileId, 'gltf_geometry'] })
+    },
+    onError: () => toast.error('Failed to queue GLB generation'),
+  })
+
+  // Show GLB viewer
+  if (glbBlobUrl) {
+    return (
+      <div
+        className="w-full rounded-lg overflow-hidden border border-border-default bg-gray-950"
+        style={{ height: 280 }}
+      >
+        <Canvas camera={{ position: [0, 0, 2], fov: 45 }}>
+          <ambientLight intensity={1.2} />
+          <directionalLight position={[5, 5, 5]} intensity={1} />
+          <Suspense fallback={null}>
+            <GlbModel url={glbBlobUrl} />
+          </Suspense>
+          <OrbitControls makeDefault />
+        </Canvas>
+      </div>
+    )
+  }
+
+  // Loading GLB
+  if (loadingGlb) {
+    return (
+      <div
+        className="w-full rounded-lg border border-border-default bg-surface-muted flex items-center justify-center"
+        style={{ height: 280 }}
+      >
+        <div className="flex flex-col items-center gap-2 text-content-muted">
+          <Loader2 size={28} className="animate-spin" />
+          <span className="text-xs">Loading 3D model…</span>
+        </div>
+      </div>
+    )
+  }
+
+  // No GLB yet — show thumbnail + generate button
+  return (
+    <div
+      className="w-full rounded-lg border border-border-default bg-surface-muted flex flex-col items-center justify-center gap-3"
+      style={{ height: 280 }}
+    >
+      {thumbnailUrl ? (
+        <img src={thumbnailUrl} alt="CAD thumbnail" className="max-h-40 object-contain" />
+      ) : (
+        <Box size={48} className="text-content-muted" />
+      )}
+      <button
+        className="btn-secondary text-xs"
+        onClick={() => generateMut.mutate()}
+        disabled={generateMut.isPending || generating}
+        title="Export STL to GLB and load 3D viewer"
+      >
+        <RefreshCw size={12} className={generating ? 'animate-spin' : ''} />
+        {generating ? 'Generating…' : generateMut.isPending ? 'Queuing…' : 'Load 3D Model'}
+      </button>
+    </div>
+  )
+}

frontend/src/components/cad/ThreeDViewer.tsx

@@ -8,6 +8,7 @@ import {
   type ErrorInfo,
   type ReactNode,
 } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { Canvas, useThree, useFrame } from '@react-three/fiber'
 import { OrbitControls, useGLTF, Environment } from '@react-three/drei'
 import { toast } from 'sonner'
@@ -225,6 +226,12 @@ export default function ThreeDViewer({
   const [loadError, setLoadError] = useState<string | null>(null)
   const [modelReady, setModelReady] = useState(false)
 
+  const { data: settings3d } = useQuery({
+    queryKey: ['admin-settings'],
+    queryFn: () => api.get('/admin/settings').then(r => r.data),
+    staleTime: 60_000,
+  })
+
   // Resolve the active model URL based on mode
   const activeUrl =
     mode === 'production' && productionGltfUrl
@@ -362,7 +369,7 @@ export default function ThreeDViewer({
         {!modelReady && !loadError && <LoadingOverlay />}
 
         <Canvas
-          camera={{ position: [0, 2, 5], fov: 45 }}
+          camera={{ position: [0, 0.1, 0.3], fov: 45 }}
           gl={{ preserveDrawingBuffer: true }}
           style={{ width: '100%', height: '100%', background: '#111827' }}
         >
@@ -383,7 +390,13 @@ export default function ThreeDViewer({
             </GltfErrorBoundary>
           )}
 
-          <OrbitControls enablePan enableZoom enableRotate minDistance={0.3} maxDistance={100} />
+          <OrbitControls
+            enablePan
+            enableZoom
+            enableRotate
+            minDistance={settings3d?.viewer_min_distance ?? 0.001}
+            maxDistance={settings3d?.viewer_max_distance ?? 50}
+          />
           <Environment preset={envPreset} />
 
           {capturing && (