stage 8-complete

app/admin/projects/[id]/assemblies/[assemblyId]/parts/[partId]/PartDetailClient.tsx

@@ -47,6 +47,7 @@ interface PartInfo {
   stepFile: FileView | null;
   drawingFile: FileView | null;
   cutFile: FileView | null;
+  thumbnailFileId: string | null;
 }
 
 export interface OperationRow {
@@ -208,7 +209,13 @@ export default function PartDetailClient({
       </section>
 
       {part.stepFile ? (
-        <StepViewerSection fileId={part.stepFile.id} fileName={part.stepFile.originalName} />
+        <StepViewerSection
+          partId={part.id}
+          fileId={part.stepFile.id}
+          fileName={part.stepFile.originalName}
+          hasThumbnail={!!part.thumbnailFileId}
+          onThumbnailSaved={() => router.refresh()}
+        />
       ) : null}
 
       <OperationsSection
@@ -676,27 +683,96 @@ function OperationModal({
 
 // -------- 3D viewer ------------------------------------------------------
 
-function StepViewerSection({ fileId, fileName }: { fileId: string; fileName: string }) {
+function StepViewerSection({
+  partId,
+  fileId,
+  fileName,
+  hasThumbnail,
+  onThumbnailSaved,
+}: {
+  partId: string;
+  fileId: string;
+  fileName: string;
+  hasThumbnail: boolean;
+  onThumbnailSaved: () => void;
+}) {
   const [open, setOpen] = useState(false);
   const [edges, setEdges] = useState(true);
+  const [savingThumb, setSavingThumb] = useState(false);
+  const [thumbMessage, setThumbMessage] = useState<string | null>(null);
+  // Bump this to force a remount of the viewer (and therefore a fresh
+  // first-frame capture). Used by "Regenerate thumbnail".
+  const [captureNonce, setCaptureNonce] = useState(0);
+  // One-shot guard so onFirstFrame from the render loop only fires once per
+  // viewer mount. Reset whenever captureNonce advances.
+  const capturedRef = useRef(false);
   // The viewer fetches via `/api/v1/files/:id/download`, which streams the
   // stored STEP bytes with correct auth (admin session cookie is already set).
   const url = `/api/v1/files/${fileId}/download`;
 
+  // Capture + upload the first-frame thumbnail. Runs at most once per open.
+  async function handleFirstFrame(blob: Blob) {
+    if (capturedRef.current) return;
+    capturedRef.current = true;
+    setSavingThumb(true);
+    setThumbMessage(null);
+    try {
+      const form = new FormData();
+      form.set("file", new File([blob], `part-${partId}.jpg`, { type: "image/jpeg" }));
+      const res = await apiFetch<{ file: { id: string } }>("/api/v1/files", {
+        method: "POST",
+        body: form,
+      });
+      await apiFetch(`/api/v1/parts/${partId}`, {
+        method: "PATCH",
+        body: JSON.stringify({ thumbnailFileId: res.file.id }),
+      });
+      setThumbMessage("Thumbnail saved.");
+      onThumbnailSaved();
+    } catch (err) {
+      setThumbMessage(
+        err instanceof ApiClientError ? `Thumbnail save failed: ${err.message}` : "Thumbnail save failed",
+      );
+    } finally {
+      setSavingThumb(false);
+    }
+  }
+
+  // Only request a new thumbnail if there isn't one already (or the user hit
+  // "Regenerate"), to avoid overwriting a good capture with a worse one every
+  // time someone opens the viewer.
+  const shouldCapture = open && (!hasThumbnail || captureNonce > 0) && !capturedRef.current;
+
   return (
     <section className="mb-8">
       <div className="flex items-center justify-between mb-3">
         <h2 className="text-lg font-semibold">3D viewer</h2>
         <div className="flex items-center gap-2">
           {open ? (
-            <label className="flex items-center gap-1.5 text-xs text-slate-600">
-              <input
-                type="checkbox"
-                checked={edges}
-                onChange={(e) => setEdges(e.target.checked)}
-              />
-              Show edges
-            </label>
+            <>
+              <label className="flex items-center gap-1.5 text-xs text-slate-600">
+                <input
+                  type="checkbox"
+                  checked={edges}
+                  onChange={(e) => setEdges(e.target.checked)}
+                />
+                Show edges
+              </label>
+              {hasThumbnail ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  disabled={savingThumb}
+                  onClick={() => {
+                    capturedRef.current = false;
+                    setThumbMessage("Regenerating on next frame…");
+                    setCaptureNonce((n) => n + 1);
+                  }}
+                >
+                  {savingThumb ? "Saving…" : "Regenerate thumbnail"}
+                </Button>
+              ) : null}
+            </>
           ) : null}
           <Button variant={open ? "secondary" : "primary"} size="sm" onClick={() => setOpen((v) => !v)}>
             {open ? "Hide" : "Show 3D"}
@@ -706,13 +782,21 @@ function StepViewerSection({ fileId, fileName }: { fileId: string; fileName: str
       {open ? (
         <Card>
           <div className="p-3">
-            <div className="mb-2 text-xs text-slate-500 truncate" title={fileName}>
-              Viewing: <code className="font-mono text-slate-700">{fileName}</code>
+            <div className="mb-2 flex items-center justify-between gap-3 text-xs text-slate-500">
+              <span className="truncate" title={fileName}>
+                Viewing: <code className="font-mono text-slate-700">{fileName}</code>
+              </span>
+              {thumbMessage ? <span className="text-slate-500">{thumbMessage}</span> : null}
             </div>
-            <StepViewer key={`${fileId}-${edges ? "e" : "ne"}`} url={url} showEdges={edges} />
+            <StepViewer
+              key={`${fileId}-${edges ? "e" : "ne"}-${captureNonce}`}
+              url={url}
+              showEdges={edges}
+              onFirstFrame={shouldCapture ? handleFirstFrame : undefined}
+            />
             <p className="mt-2 text-[11px] text-slate-500">
-              Drag to rotate · scroll to zoom · right-drag to pan. Parsing and rendering happens
-              in your browser — nothing is uploaded.
+              Drag to rotate · scroll to zoom · right-drag to pan. Parsing and rendering happen in
+              your browser; the first view also uploads a ~480×360 JPEG thumbnail for the parts list.
             </p>
           </div>
         </Card>