rigbuilder fix + laser source 403 fix

app/lasers/[id]/page.tsx

@@ -1,2 +1,83 @@
 // app/lasers/[id]/page.tsx
-export { default } from "./lasers";
+import { cookies } from "next/headers";
+import { redirect, notFound } from "next/navigation";
+import { dxGET } from "@/lib/directus";
+import LaserDetailsClient from "./LaserDetailsClient";
+
+const FIELD_GROUPS = [
+    {
+        title: "General Information",
+        fields: {
+            make: "Make",
+            model: "Model",
+            op: "Pulse Operation Mode",
+            notes: "Notes",
+        },
+    },
+{
+    title: "Optical Specifications",
+    fields: {
+        w: "Laser Wattage (W)",
+        mj: "milliJoule Max (mJ)",
+        nm: "Wavelength (nm)",
+        k_hz: "Pulse Repetition Rate (kHz)",
+        ns: "Pulse Width (ns)",
+        d: "Beam Diameter (mm)",
+        m2: "M² - Quality",
+        instability: "Instability",
+        polarization: "Polarization",
+        band: "Band (nm)",
+        anti: "Anti-Reflection Coating",
+        mw: "Red Dot Wattage (mW)",
+    },
+},
+{
+    title: "Electrical & Timing",
+    fields: {
+        v: "Operating Voltage (V)",
+        temp_op: "Operating Temperature (°C)",
+        temp_store: "Storage Temperature (°C)",
+        l_on: "l_on",
+        l_off: "l_off",
+        mj_c: "mj_c",
+        ns_c: "ns_c",
+        d_c: "d_c",
+        on_c: "on_c",
+        off_c: "off_c",
+    },
+},
+{
+    title: "Integration & Physical",
+    fields: {
+        cable: "Cable Length (m)",
+        cooling: "Cooling Method",
+        weight: "Weight (kg)",
+        dimensions: "Dimensions (cm)",
+    },
+},
+] as const;
+
+const FIELD_KEYS = Array.from(
+    new Set(["make", "model", ...FIELD_GROUPS.flatMap((g) => Object.keys(g.fields))])
+);
+
+export default async function Page({ params }: { params: { id: string } }) {
+    const token = cookies().get("ma_at")?.value;
+    if (!token) {
+        redirect(`/auth/sign-in?next=${encodeURIComponent(`/lasers/${params.id}`)}`);
+    }
+    const bearer = `Bearer ${token}`;
+    const fields = encodeURIComponent(FIELD_KEYS.join(","));
+    const submissionId = params.id; // CONFIRMED: primary key is submission_id
+
+    // Fetch by item endpoint using submission_id as PK
+    const res = await dxGET<any>(
+        `/items/laser_source/${encodeURIComponent(submissionId)}?fields=${fields}`,
+                                 bearer
+    );
+    const row = res?.data ?? res ?? null;
+
+    if (!row) notFound();
+
+    return <LaserDetailsClient laser={row} fieldGroups={FIELD_GROUPS as any} />;
+}

app/lasers/page.tsx

@@ -1,288 +1,58 @@
-'use client';
+"use client";
 
-import { useEffect, useState, useMemo } from 'react';
-import Link from 'next/link';
+import Link from "next/link";
 
-type LaserRow = {
-  id: string | number;
-  submission_id?: string | number;
-  make?: string;
-  model?: string;
-  w?: string;
-  mj?: string;
-  nm?: string;
-  kHz?: string;
-  ns?: string;
-  v?: string;
-  // Directus returns `op` as a string for an “options” field.
-  // We also defensively support an object with {label|name} in case of custom responses.
-  op?: { label?: string; name?: string } | string | null;
+type Group = { title: string; fields: Record<string, string> };
+type Laser = Record<string, any>;
+
+const CHOICE_LABELS: Record<string, Record<string, string>> = {
+  op: { pm: "MOPA", pq: "Q-Switch" },
+  cooling: { aa: "Air, Active", ap: "Air, Passive", w: "Water" },
 };
 
-export default function LaserSourcesPage() {
-  const [sources, setSources] = useState<LaserRow[]>([]);
-  const [query, setQuery] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [wavelengthFilters, setWavelengthFilters] = useState<Record<string, number | null>>({});
-  const [sortKey, setSortKey] = useState<keyof LaserRow | 'op' | 'model'>('model');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-
-  // canonical href builder (prefers submission_id if present)
-  const detailHref = (row: LaserRow) => `/lasers/${row.submission_id ?? row.id}`;
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedQuery(query), 300);
-    return () => clearTimeout(timer);
-  }, [query]);
-
-  useEffect(() => {
-    // Request everything; `op` will come back as a simple string for an “options” field.
-    fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source?limit=-1&fields=*`, {
-      cache: 'no-store',
-    })
-    .then((res) => res.json())
-    .then((data) => setSources(data?.data || []));
-  }, []);
-
-  const highlightMatch = (text?: string, q?: string) => {
-    const safeText = String(text ?? '');
-    const query = String(q ?? '');
-    if (!query) return safeText;
-    const parts = safeText.split(new RegExp(`(${query})`, 'gi'));
-    return parts.map((part, i) =>
-    part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>
-    );
-  };
-
-  // Render OP as a string safely (supports string or {label|name})
-  const opText = (row: LaserRow) => {
-    const v = row.op as any;
-    if (v && typeof v === 'object') {
-      return String(v.label ?? v.name ?? '—');
-    }
-    return v == null || v === '' ? '—' : String(v);
-  };
-
-  const filtered = useMemo(() => {
-    const q = debouncedQuery.toLowerCase();
-    return sources.filter((src) => {
-      const matchesQuery = [src.make, src.model]
-      .filter(Boolean)
-      .some((field) => String(field).toLowerCase().includes(q));
-      return matchesQuery;
-    });
-  }, [sources, debouncedQuery]);
-
-  const grouped = useMemo<Record<string, LaserRow[]>>(() => {
-    return filtered.reduce((acc, src) => {
-      const key = src.make || 'Unknown Make';
-      (acc[key] = acc[key] || []).push(src);
-      return acc;
-    }, {} as Record<string, LaserRow[]>);
-  }, [filtered]);
-
-  const wavelengths = [10600, 1064, 455, 355];
-
-  const toggleFilter = (make: string, value: number) => {
-    setWavelengthFilters((prev) => ({
-      ...prev,
-      [make]: prev[make] === value ? null : value,
-    }));
-  };
-
-  const toggleSort = (key: keyof LaserRow | 'op' | 'model') => {
-    setSortKey(key);
-    setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
-  };
-
-  const getSortableValue = (row: LaserRow, key: keyof LaserRow | 'op' | 'model') => {
-    const val = key === 'op' ? opText(row) : (row as any)[key];
-    if (val == null) return '';
-    const k = String(key).toLowerCase();
-
-    if (k === 'w') return parseFloat(String(val).replace(/[^\d.]/g, '')) || 0;
-    if (['mj', 'nm', 'khz', 'ns', 'v'].includes(k)) return parseFloat(String(val)) || 0;
-
-    return String(val).toLowerCase();
-  };
-
-  const sortArrow = (key: keyof LaserRow | 'op' | 'model') =>
-  sortKey === key ? (sortOrder === 'asc' ? ' ▲' : ' ▼') : '';
-
-  const summaryStats = useMemo(() => {
-    const makes = new Set<string>();
-    const nmCounts: Record<string, number> = {};
-    for (const src of sources) {
-      if (src.make) makes.add(src.make);
-      if (src.nm) {
-        const nm = String(src.nm);
-        nmCounts[nm] = (nmCounts[nm] || 0) + 1;
-      }
-    }
-    const mostCommonNm =
-    Object.entries(nmCounts).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || '—';
-  return {
-    total: sources.length,
-    uniqueMakes: makes.size,
-    commonNm: mostCommonNm,
-  };
-  }, [sources]);
-
-  const recentSources = useMemo(() => {
-    return [...sources]
-    .filter((src) => src.submission_id != null)
-    .sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
-    .slice(0, 5);
-  }, [sources]);
+function resolveLabel(field: string, value: any) {
+  if (value == null || value === "") return "—";
+  const map = CHOICE_LABELS[field];
+  if (map && typeof value === "string" && map[value]) return map[value];
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : "—";
+  return String(value);
+}
 
+export default function LaserDetailsClient({
+  laser,
+  fieldGroups,
+}: {
+  laser: Laser;
+  fieldGroups: Group[];
+}) {
   return (
-    <div className="p-6 max-w-7xl mx-auto">
-    <div className="grid gap-4 md:grid-cols-3 mb-6">
-    <div className="card p-4">
-    <h2 className="text-lg font-semibold mb-2">Database Summary</h2>
-    <p>Total Sources: {summaryStats.total}</p>
-    <p>Unique Makes: {summaryStats.uniqueMakes}</p>
-    <p>Most Common Wavelength: {summaryStats.commonNm}</p>
-    </div>
+    <div className="p-6 max-w-4xl mx-auto">
+    <h1 className="text-3xl font-bold mb-4">
+    {(laser.make as string) || "—"} {laser.model || ""}
+    </h1>
 
-    <div className="card p-4">
-    <h2 className="text-lg font-semibold mb-2">Recent Additions</h2>
-    <ul className="text-sm list-disc pl-4">
-    {recentSources.map((src) => (
-      <li key={src.id}>
-      <Link className="text-accent underline" href={detailHref(src)}>
-      {src.make} {src.model}
-      </Link>
-      </li>
+    <div className="space-y-6">
+    {fieldGroups.map(({ title, fields }) => (
+      <section key={title} className="bg-card border border-border rounded-xl p-4">
+      <h2 className="text-xl font-semibold mb-2">{title}</h2>
+      <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
+      {Object.entries(fields).map(([key, label]) => (
+        <div key={key}>
+        <dt className="font-medium text-muted-foreground">{label}</dt>
+        <dd className="text-base break-words">{resolveLabel(key, laser[key])}</dd>
+        </div>
+      ))}
+      </dl>
+      </section>
     ))}
-    </ul>
     </div>
 
-    <div className="card p-4">
-    <h2 className="text-lg font-semibold mb-2">Feedback</h2>
-    <p className="text-sm mb-2">See something wrong or want to suggest an improvement?</p>
-    <Link href="#" className="btn-primary inline-block">
-    Submit Feedback
+    <div className="mt-8">
+    <Link href="/lasers" className="text-blue-600 underline">
+    ← Back to Laser Sources
     </Link>
     </div>
     </div>
-
-    <div className="mb-6 card bg-card text-card-foreground">
-    <h1 className="text-3xl font-bold mb-2">Laser Source Database</h1>
-    <input
-    type="search"
-    value={query}
-    onChange={(e) => setQuery(e.target.value)}
-    placeholder="Search by make or model..."
-    className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
-    />
-    <p className="text-sm text-muted-foreground">
-    Browse laser source specifications collected from community-submitted and verified sources.
-    </p>
-    </div>
-
-    {Object.entries(grouped).length === 0 ? (
-      <p className="text-muted">No laser sources found.</p>
-    ) : (
-      <div className="space-y-6">
-      {Object.entries(grouped).map(([make, items]) => {
-        const filteredItems =
-        wavelengthFilters[make] != null
-        ? items.filter((item) => Number(item.nm) === wavelengthFilters[make])
-        : items;
-
-        const sortedItems = [...filteredItems].sort((a, b) => {
-          const aVal = getSortableValue(a, sortKey);
-          const bVal = getSortableValue(b, sortKey);
-          if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
-          if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
-          return 0;
-        });
-
-        return (
-          <details key={make} className="border border-border rounded-md">
-          <summary className="bg-card px-4 py-2 font-semibold cursor-pointer flex justify-between items-center">
-          <span>
-          {make} <span className="text-sm text-muted">({filteredItems.length})</span>
-          </span>
-          <div className="space-x-2">
-          {[10600, 1064, 455, 355].map((w) => (
-            <button
-            key={w}
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleFilter(make, w);
-            }}
-            className={`px-2 py-1 text-xs rounded-md border ${
-              wavelengthFilters[make] === w ? 'bg-accent text-white' : 'bg-muted text-muted-foreground'
-            }`}
-            >
-            {w}
-            </button>
-          ))}
-          </div>
-          </summary>
-          <div className="overflow-x-auto">
-          <table className="w-full min-w-[900px] text-sm whitespace-nowrap">
-          <thead>
-          <tr>
-          <th className="px-2 py-2 text-left">Make</th>
-          <th className="px-2 py-2 text-left w-64">
-          <button onClick={() => toggleSort('model')}>
-          Model{sortArrow('model')}
-          </button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('w')}>W{sortArrow('w')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('mj')}>mJ{sortArrow('mj')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('op')}>OP{sortArrow('op')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('nm')}>nm{sortArrow('nm')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('kHz')}>kHz{sortArrow('kHz')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('ns')}>ns{sortArrow('ns')}</button>
-          </th>
-          <th className="px-2 py-2 text-left">
-          <button onClick={() => toggleSort('v')}>V{sortArrow('v')}</button>
-          </th>
-          </tr>
-          </thead>
-          <tbody>
-          {sortedItems.map((src) => (
-            <tr key={src.id} className="border-t border-border">
-            <td className="px-2 py-2 truncate max-w-[10rem]">
-            {highlightMatch(src.make || '—', debouncedQuery)}
-            </td>
-            <td className="px-2 py-2 truncate max-w-[16rem]">
-            <Link href={detailHref(src)} className="text-accent underline">
-            {highlightMatch(src.model || '—', debouncedQuery)}
-            </Link>
-            </td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.w || '—'}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.mj || '—'}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{opText(src)}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.nm || '—'}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.kHz || '—'}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.ns || '—'}</td>
-            <td className="px-2 py-2 whitespace-nowrap">{src.v || '—'}</td>
-            </tr>
-          ))}
-          </tbody>
-          </table>
-          </div>
-          </details>
-        );
-      })}
-      </div>
-    )}
-    </div>
   );
 }

app/rigs/RigBuilderClient.tsx

@@ -10,10 +10,10 @@ const API = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
 // helper: render multipliers like "06x", "8x", "1.5x"; avoid double "x"
 function formatMultiplier(raw: any) {
     const s = String(raw ?? "").trim();
+    if (!s) return "—";
     if (/x$/i.test(s)) return s; // already has x
     // pure number?
     if (/^\d+(\.\d+)?$/.test(s)) {
-        // pad single-digit integers to 2 chars (e.g., 6 -> 06)
         if (/^\d$/.test(s)) return `0${s}x`;
         return `${s}x`;
     }
@@ -27,13 +27,13 @@ function formatMultiplier(raw: any) {
     return `${s}x`;
 }
 
+// tiny helper to ensure we always iterate an array
+function toArray<T = any>(v: any): T[] {
+    return Array.isArray(v) ? (v as T[]) : [];
+}
+
 function useOptions(
-    kind:
-    | "laser_software"
-    | "laser_source"
-    | "lens"
-    | "scan_lens_apt"
-    | "scan_lens_exp",
+    kind: "laser_software" | "laser_source" | "lens" | "scan_lens_apt" | "scan_lens_exp",
     targetKey?: string
 ) {
     const [opts, setOpts] = useState<Opt[]>([]);
@@ -44,94 +44,104 @@ function useOptions(
         setLoading(true);
 
         (async () => {
-            let url = "";
-            let normalize = (rows: any[]): Opt[] =>
-            rows.map((r) => ({
-                id: String(r.id ?? r.submission_id),
-                             label: String(r.name ?? r.label ?? r.title ?? r.model ?? r.id),
-            }));
+            try {
+                let url = "";
+                // default normalize
+                let normalize = (rows: any[]): Opt[] =>
+                rows.map((r) => ({
+                    id: String(r.id ?? r.submission_id ?? ""),
+                                 label: String(r.name ?? r.label ?? r.title ?? r.model ?? r.id ?? ""),
+                }));
 
-            if (kind === "laser_software") {
-                url = `${API}/items/laser_software?fields=id,name&limit=1000&sort=name`;
-            } else if (kind === "laser_source") {
-                url = `${API}/items/laser_source?fields=submission_id,make,model,nm&limit=2000&sort=make,model`;
-                const parseNum = (v: any) => {
-                    if (v == null) return null;
-                    const m = String(v).match(/(\d+(\.\d+)?)/);
-                    return m ? Number(m[1]) : null;
-                };
-                const nmRange = (t?: string | null): [number, number] | null => {
-                    if (!t) return null;
-                    const s = t.toLowerCase();
-                    if (s.includes("fiber")) return [1000, 9000];
-                    if (s.includes("uv")) return [300, 400];
-                    if (s.includes("gantry") || s.includes("co2 gantry") || s.includes("co₂ gantry"))
-                        return [10000, 11000];
-                    if (s.includes("galvo") || s.includes("co2 galvo") || s.includes("co₂ galvo"))
-                        return [10000, 11000];
-                    return null;
-                };
-                const range = nmRange(targetKey);
-                normalize = (rows) => {
-                    const filtered = range
-                    ? rows.filter((r: any) => {
-                        const nm = parseNum(r.nm);
-                        return nm != null && nm >= range[0] && nm <= range[1];
-                    })
-                    : rows;
-                    return filtered.map((r: any) => ({
-                        id: String(r.submission_id),
-                                                     label:
-                                                     [r.make, r.model].filter(Boolean).join(" ") ||
-                                                     String(r.submission_id),
-                    }));
-                };
-            } else if (kind === "lens") {
-                if (targetKey && targetKey.toLowerCase().includes("gantry")) {
-                    url = `${API}/items/laser_focus_lens?fields=id,name&limit=1000&sort=name`;
-                } else {
-                    url = `${API}/items/laser_scan_lens?fields=id,field_size,focal_length&limit=1000`;
+                if (kind === "laser_software") {
+                    url = `${API}/items/laser_software?fields=id,name&limit=1000&sort=name`;
+                } else if (kind === "laser_source") {
+                    // fetch all sources; client filter by nm band from targetKey
+                    url = `${API}/items/laser_source?fields=submission_id,make,model,nm&limit=2000&sort=make,model`;
+                    const parseNum = (v: any) => {
+                        if (v == null) return null;
+                        const m = String(v).match(/(\d+(\.\d+)?)/);
+                        return m ? Number(m[1]) : null;
+                    };
+                    const nmRange = (t?: string | null): [number, number] | null => {
+                        if (!t) return null;
+                        const s = t.toLowerCase();
+                        if (s.includes("fiber")) return [1000, 9000];
+                        if (s.includes("uv")) return [300, 400];
+                        if (s.includes("gantry") || s.includes("co2 gantry") || s.includes("co₂ gantry"))
+                            return [10000, 11000];
+                        if (s.includes("galvo") || s.includes("co2 galvo") || s.includes("co₂ galvo"))
+                            return [10000, 11000];
+                        return null;
+                    };
+                    const range = nmRange(targetKey);
                     normalize = (rows) => {
-                        const toNum = (v: any) => {
-                            const m = String(v ?? "").match(/-?\d+(\.\d+)?/);
-                            return m ? parseFloat(m[0]) : Number.POSITIVE_INFINITY;
-                        };
-                        return [...rows]
-                        .sort((a, b) => toNum(a.focal_length) - toNum(b.focal_length))
-                        .map((r) => ({
-                            id: String(r.id),
-                                     label:
-                                     [
-                                         r.field_size && `${r.field_size} mm`,
-                                         r.focal_length && `${r.focal_length} mm`,
-                                     ]
-                                     .filter(Boolean)
-                                     .join(" — ") || String(r.id),
+                        const filtered = range
+                        ? rows.filter((r: any) => {
+                            const nm = parseNum(r.nm);
+                            return nm != null && nm >= range[0] && nm <= range[1];
+                        })
+                        : rows;
+                        return filtered.map((r: any) => ({
+                            id: String(r.submission_id ?? ""),
+                                                         label: [r.make, r.model].filter(Boolean).join(" ") || String(r.submission_id ?? ""),
                         }));
                     };
+                } else if (kind === "lens") {
+                    if (targetKey && targetKey.toLowerCase().includes("gantry")) {
+                        url = `${API}/items/laser_focus_lens?fields=id,name&limit=1000&sort=name`;
+                    } else {
+                        url = `${API}/items/laser_scan_lens?fields=id,field_size,focal_length&limit=1000`;
+                        normalize = (rows) => {
+                            const toNum = (v: any) => {
+                                const m = String(v ?? "").match(/-?\d+(\.\d+)?/);
+                                return m ? parseFloat(m[0]) : Number.POSITIVE_INFINITY;
+                            };
+                            return [...rows]
+                            .sort((a, b) => toNum(a.focal_length) - toNum(b.focal_length))
+                            .map((r) => ({
+                                id: String(r.id ?? ""),
+                                         label:
+                                         [r.field_size && `${r.field_size} mm`, r.focal_length && `${r.focal_length} mm`]
+                                         .filter(Boolean)
+                                         .join(" — ") || String(r.id ?? ""),
+                            }));
+                        };
+                    }
+                } else if (kind === "scan_lens_apt") {
+                    url = `${API}/items/laser_scan_lens_apt?fields=id,name&limit=1000&sort=name`;
+                } else if (kind === "scan_lens_exp") {
+                    url = `${API}/items/laser_scan_lens_exp?fields=id,name&limit=1000&sort=name`;
+                    normalize = (rows) =>
+                    rows.map((r: any) => ({
+                        id: String(r.id ?? ""),
+                                          label: formatMultiplier(r.name ?? r.label ?? r.id ?? ""),
+                    }));
                 }
-            } else if (kind === "scan_lens_apt") {
-                url = `${API}/items/laser_scan_lens_apt?fields=id,name&limit=1000&sort=name`;
-            } else if (kind === "scan_lens_exp") {
-                url = `${API}/items/laser_scan_lens_exp?fields=id,name&limit=1000&sort=name`;
-                normalize = (rows) =>
-                rows.map((r: any) => ({
-                    id: String(r.id),
-                                      label: formatMultiplier(r.name ?? r.label ?? r.id), // add "x"
-                }));
-            }
 
-            const res = await fetch(url, {
-                credentials: "include",
-                cache: "no-store",
-            });
-            const json = await res.json();
-            const rows = json?.data ?? [];
-            const mapped = normalize(rows);
-            if (alive) setOpts(mapped);
-        })()
-        .catch(() => alive && setOpts([]))
-        .finally(() => alive && setLoading(false));
+                const res = await fetch(url, { credentials: "include", cache: "no-store" });
+                if (!res.ok) throw new Error(`HTTP ${res.status} for ${kind}`);
+                const json = await res.json().catch(() => ({} as any));
+                const rows = toArray(json?.data);
+
+                let mapped: Opt[] = [];
+                try {
+                    mapped = toArray(normalize(rows));
+                } catch {
+                    // Safe fallback: minimal id/label mapping to prevent render crashes
+                    mapped = rows.map((r: any) => ({
+                        id: String(r?.id ?? r?.submission_id ?? ""),
+                                                   label: String(r?.name ?? r?.label ?? r?.title ?? r?.model ?? r?.id ?? ""),
+                    }));
+                }
+
+                if (alive) setOpts(mapped);
+            } catch (_err) {
+                if (alive) setOpts([]); // swallow errors → empty list; form still renders
+            } finally {
+                if (alive) setLoading(false);
+            }
+        })();
 
         return () => {
             alive = false;
@@ -148,14 +158,14 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: Opt[] }) {
     const [rigType, setRigType] = useState<string>("");
     const [laserSource, setLaserSource] = useState<string>("");
     const [scanLens, setScanLens] = useState<string>("");
-    const [scanLensApt, setScanLensApt] = useState<string>("");
-    const [scanLensExp, setScanLensExp] = useState<string>("");
+    const [scanLensApt, setScanLensApt] = useState<string>(""); // galvo-only
+    const [scanLensExp, setScanLensExp] = useState<string>(""); // galvo-only
     const [focusLens, setFocusLens] = useState<string>("");
     const [software, setSoftware] = useState<string>("");
 
+    // rigTypes come from the SERVER as props.
     const targetKey = useMemo(() => {
-        const rt =
-        rigTypes.find((o) => String(o.id) === String(rigType))?.label || "";
+        const rt = rigTypes.find((o) => String(o.id) === String(rigType))?.label || "";
         return rt;
     }, [rigTypes, rigType]);
 
@@ -205,10 +215,158 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: Opt[] }) {
 
     return (
         <form onSubmit={onSubmit} className="space-y-4 max-w-xl">
-        {/* ...existing fields... */}
+        <div>
+        <label className="block text-sm mb-1">
+        Rig Name <span className="text-red-600">*</span>
+        </label>
+        <input
+        className="w-full border rounded px-2 py-1"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        required
+        />
+        </div>
 
-        {/* Lens sections unchanged, expander select now shows labels with trailing "x" */}
-        {/* (full component omitted for brevity—only the hook/normalize changed) */}
+        <div className="grid sm:grid-cols-2 gap-3">
+        <div>
+        <label className="block text-sm mb-1">
+        Rig Type <span className="text-red-600">*</span>
+        </label>
+        <select
+        className="w-full border rounded px-2 py-1"
+        value={rigType}
+        onChange={(e) => setRigType(e.target.value)}
+        required
+        >
+        <option value="">—</option>
+        {rigTypes.map((o) => (
+            <option key={o.id} value={o.id}>
+            {o.label}
+            </option>
+        ))}
+        </select>
+        </div>
+
+        <div>
+        <label className="block text-sm mb-1">
+        Laser Source <span className="text-red-600">*</span>
+        </label>
+        <select
+        className="w-full border rounded px-2 py-1"
+        value={laserSource}
+        onChange={(e) => setLaserSource(e.target.value)}
+        required
+        >
+        <option value="">{sources.loading ? "Loading…" : "—"}</option>
+        {sources.opts.map((o) => (
+            <option key={o.id} value={o.id}>
+            {o.label}
+            </option>
+        ))}
+        </select>
+        </div>
+        </div>
+
+        {/* Lens (focus for gantry, scan + apt/exp for others) */}
+        {isGantry ? (
+            <div>
+            <label className="block text-sm mb-1">Focus Lens</label>
+            <select
+            className="w-full border rounded px-2 py-1"
+            value={focusLens}
+            onChange={(e) => setFocusLens(e.target.value)}
+            >
+            <option value="">{lens.loading ? "Loading…" : "—"}</option>
+            {lens.opts.map((o) => (
+                <option key={o.id} value={o.id}>
+                {o.label}
+                </option>
+            ))}
+            </select>
+            </div>
+        ) : (
+            <>
+            <div>
+            <label className="block text-sm mb-1">Scan Lens</label>
+            <select
+            className="w-full border rounded px-2 py-1"
+            value={scanLens}
+            onChange={(e) => setScanLens(e.target.value)}
+            >
+            <option value="">{lens.loading ? "Loading…" : "—"}</option>
+            {lens.opts.map((o) => (
+                <option key={o.id} value={o.id}>
+                {o.label}
+                </option>
+            ))}
+            </select>
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+            <label className="block text-sm mb-1">Scan Lens Apt</label>
+            <select
+            className="w-full border rounded px-2 py-1"
+            value={scanLensApt}
+            onChange={(e) => setScanLensApt(e.target.value)}
+            >
+            <option value="">{lensApt.loading ? "Loading…" : "—"}</option>
+            {lensApt.opts.map((o) => (
+                <option key={o.id} value={o.id}>
+                {o.label}
+                </option>
+            ))}
+            </select>
+            </div>
+
+            <div>
+            <label className="block text-sm mb-1">Scan Lens Exp</label>
+            <select
+            className="w-full border rounded px-2 py-1"
+            value={scanLensExp}
+            onChange={(e) => setScanLensExp(e.target.value)}
+            >
+            <option value="">{lensExp.loading ? "Loading…" : "—"}</option>
+            {lensExp.opts.map((o) => (
+                <option key={o.id} value={o.id}>
+                {o.label}
+                </option>
+            ))}
+            </select>
+            </div>
+            </div>
+            </>
+        )}
+
+        <div>
+        <label className="block text-sm mb-1">Software</label>
+        <select
+        className="w-full border rounded px-2 py-1"
+        value={software}
+        onChange={(e) => setSoftware(e.target.value)}
+        >
+        <option value="">{softwares.loading ? "Loading…" : "—"}</option>
+        {softwares.opts.map((o) => (
+            <option key={o.id} value={o.id}>
+            {o.label}
+            </option>
+        ))}
+        </select>
+        </div>
+
+        <div>
+        <label className="block text-sm mb-1">Notes</label>
+        <textarea
+        rows={4}
+        className="w-full border rounded px-2 py-1"
+        value={notes}
+        onChange={(e) => setNotes(e.target.value)}
+        />
+        </div>
+
+        <button className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90">
+        Create Rig
+        </button>
         </form>
     );
 }