# Plan: 4 Bug Fixes — Media Thumbnails, Product Dimensions, Inline 3D Viewer, GLB Export

## Root Cause Analysis

### Bug A — Missing Thumbnails in Media Library
`<img src="/api/media/{id}/download">` fails silently: the download endpoint requires JWT auth, but `<img>` tags don't send auth headers → 401 → `imgError=true` → gray icon.
For `thumbnail` type assets: fallback works via `get_thumbnail_url()` → `/api/cad/{cad_file_id}/thumbnail` (no-auth endpoint). For `still` type: no cad_file_id/product_id → no fallback → gray icon shown.

### Bug B — No Dimensions in "Product Details" Card
The `cad_mesh_attributes.dimensions_mm` block exists in the CAD File section (right sidebar), NOT in the "Product Details" card. User wants it in Product Details.

### Bug C — No Embedded 3D Viewer
"View 3D" navigates to `/cad/:id` (full page). User wants an inline viewer in the product page CAD card that auto-loads when a `gltf_geometry` asset exists.

### Bug D — GLB + Colors Error
`trimesh` is in `pyproject.toml` but the backend container was not rebuilt → `ModuleNotFoundError: No module named 'trimesh'`. Needs rebuild.

---

## Betroffene Dateien

| File | Change | Bug |
|------|--------|-----|
| `frontend/src/pages/MediaBrowser.tsx` | `useAuthBlob` hook + use in AssetCard | A |
| `backend/app/domains/rendering/tasks.py` | `publish_asset` populates product_id + cad_file_id | A |
| `frontend/src/pages/ProductDetail.tsx` | Add dimensions to Product Details card + inline viewer | B, C |
| `frontend/src/components/cad/InlineCadViewer.tsx` | New compact 3D viewer component | C |
| `backend/` (docker rebuild) | Rebuild to install trimesh | D |

---

## Tasks (in Reihenfolge)

### Task A1: Backend — publish_asset populates product_id + cad_file_id
- **Datei**: `backend/app/domains/rendering/tasks.py`
- **Was**: In `publish_asset`, after loading the OrderLine, also load `line.product_id` and the product's `cad_file_id`. Set these on the new MediaAsset. This enables the `_resolve_thumbnails_bulk` fallback and `get_thumbnail_url()` for still assets.
- **Akzeptanzkriterium**: New still assets have product_id and cad_file_id set in DB.

### Task A2: Frontend — useAuthBlob hook in MediaBrowser
- **Datei**: `frontend/src/pages/MediaBrowser.tsx`
- **Was**: Add `useAuthBlob(url)` hook that fetches the URL with Authorization header and returns a blob URL. Use it in `AssetCard` instead of `asset.download_url` for image rendering. Revoke blob URL on unmount.
- **Akzeptanzkriterium**: Still images visible in media library grid.

### Task B: Frontend — Dimensions in Product Details card
- **Datei**: `frontend/src/pages/ProductDetail.tsx`
- **Was**: In the "Product Details" card (around line 409-433), after the Notes field, add a read-only "Dimensions" row if `product.cad_mesh_attributes?.dimensions_mm` exists. Format: "X × Y × Z mm" with a Ruler icon and small "from CAD" label.
- **Akzeptanzkriterium**: Dimensions visible in Product Details card when mesh_attributes populated.

### Task C: Frontend — Inline 3D Viewer in CAD card
- **Datei**: `frontend/src/components/cad/InlineCadViewer.tsx` (new), `frontend/src/pages/ProductDetail.tsx`
- **Was**:
  1. Create `InlineCadViewer` component that:
     - Accepts `cadFileId: string`
     - Queries `getMediaAssets({ cad_file_id, asset_types: ['gltf_geometry'] })`
     - If asset found: fetches GLB with auth (axios → arraybuffer → blob URL) → renders Three.js canvas (OrbitControls, auto-fit camera)
     - While loading: shows spinner
     - If no asset: shows "Generate GLB" button + thumbnail fallback
  2. In ProductDetail: replace the 128×128 thumbnail box with `InlineCadViewer` (make it ~300px tall)
     - Move thumbnail fallback inside InlineCadViewer
     - Keep "View 3D" as "View Full Screen" link below viewer
     - Remove standalone "View 3D" button (or keep as secondary link)
- **Akzeptanzkriterium**: Inline 3D model visible in product page without clicking "View 3D".

### Task D: Backend rebuild — install trimesh
- **Was**: Run `docker compose up -d --build backend` to install trimesh from pyproject.toml
- **Akzeptanzkriterium**: `docker compose exec backend python3 -c "import trimesh; print('ok')"` succeeds. GLB + Colors download works.

---

## Migrations-Check
Keine DB-Migrationen nötig. `product_id` und `cad_file_id` sind bereits Spalten in `media_assets`.

## Reihenfolge-Empfehlung
A1 + A2 + B + C parallel (alle unabhängig).
D parallel (nur Docker rebuild, kein Code).

## Risiken / Offene Fragen
- `useAuthBlob` creates blob URLs per asset — 50+ assets in grid could trigger many fetches. Add `limit` or lazy load (only fetch when card is visible).
- InlineCadViewer: GLB fetch for large files may take 5-30s. Show skeleton/spinner.
- `useGLTF` from drei expects a URL string. Blob URLs work fine.
- ThreeDViewer has `onClose` required prop — InlineCadViewer should be a new simpler component.