From 974b7e76017634078fbd3582308fc1dd1cf6d7d2 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Fri, 26 Sep 2025 19:33:27 -0400
Subject: [PATCH] rigbuilder UI fixes

---
 app/my/rigs/RigBuilderClient.tsx | 560 +++++++++++++++++++------------
 app/my/rigs/page.tsx             |  45 +--
 components/ui/select.tsx         | 220 ++++++------
 node_modules/.package-lock.json  |   6 -
 package-lock.json                |   6 -
 5 files changed, 466 insertions(+), 371 deletions(-)

diff --git a/app/my/rigs/RigBuilderClient.tsx b/app/my/rigs/RigBuilderClient.tsx
index df01e4af..dc4f0d2a 100644
--- a/app/my/rigs/RigBuilderClient.tsx
+++ b/app/my/rigs/RigBuilderClient.tsx
@@ -1,200 +1,333 @@
-// app/my/rigs/RigBuilderClient.tsx
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { z } from "zod";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useToast } from "@/hooks/use-toast";
+
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import {
     Select,
     SelectTrigger,
+    SelectValue,
     SelectContent,
     SelectItem,
-    SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
-type RigType = { id: number | string; name: string };
-export default function RigBuilderClient({ rigTypes }: { rigTypes: RigType[] }) {
+// ─────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────
+
+type Option = { id: string | number; label: string };
+type RigType = { id: number | string; name: "fiber" | "uv" | "co2_galvo" | "co2_gantry" | string };
+
+type RigRow = {
+    id: number;
+    name: string;
+    rig_type: number | string | null;
+    rig_type_name?: string; // convenience when our API includes name
+};
+
+// ─────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────
+
+const RIG_TARGET_MAP: Record<string, string> = {
+    fiber: "settings_fiber",
+    uv: "settings_uv",
+    co2_galvo: "settings_co2gal",
+    co2_gantry: "settings_co2gan",
+};
+
+async function apiJson<T>(url: string, init?: RequestInit): Promise<T> {
+    const res = await fetch(url, {
+        ...init,
+        headers: { "Content-Type": "application/json", ...(init?.headers || {}) },
+                            cache: "no-store",
+    });
+    if (!res.ok) {
+        const txt = await res.text();
+        throw new Error(txt || res.statusText);
+    }
+    return res.json() as Promise<T>;
+}
+
+const schema = z.object({
+    name: z.string().min(1, "Name is required"),
+                        rig_type: z.string().min(1, "Pick a rig type"),
+                        laser_source: z.string().optional().nullable(),
+                        laser_software: z.string().optional().nullable(),
+                        // exactly one of focus OR scan (by rig type). We let the form send nulls.
+                        laser_focus_lens: z.string().optional().nullable(),
+                        laser_scan_lens: z.string().optional().nullable(),
+                        laser_scan_lens_apt: z.string().optional().nullable(),
+                        laser_scan_lens_exp: z.string().optional().nullable(),
+                        notes: z.string().optional().nullable(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+// ─────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────
+
+export default function RigBuilderClient() {
     const { toast } = useToast();
 
-    const FormSchema = z.object({
-        name: z.string().min(2, "Please enter a name"),
-                                rig_type: z.string().min(1, "Choose a rig type"),
-                                laser_source: z.string().optional().nullable(),
-                                laser_focus_lens: z.string().optional().nullable(),
-                                laser_scan_lens: z.string().optional().nullable(),
-                                laser_scan_lens_apt: z.string().optional().nullable(),
-                                laser_scan_lens_exp: z.string().optional().nullable(),
-                                laser_software: z.string().optional().nullable(),
-                                notes: z.string().optional().nullable(),
-    });
-    type FormValues = z.infer<typeof FormSchema>;
+    // Lists
+    const [rigTypes, setRigTypes] = useState<RigType[]>([]);
+    const [rigs, setRigs] = useState<RigRow[]>([]);
 
-    const form = useForm<FormValues>({
-        resolver: zodResolver(FormSchema),
-                                     defaultValues: {
-                                         name: "",
-                                         rig_type: "",
-                                         notes: "",
-                                     },
+    // Options that depend on rig type
+    const [sourceOpts, setSourceOpts] = useState<Option[]>([]);
+    const [softwareOpts, setSoftwareOpts] = useState<Option[]>([]);
+    const [scanLensOpts, setScanLensOpts] = useState<Option[]>([]);
+    const [focusLensOpts, setFocusLensOpts] = useState<Option[]>([]);
+
+    // Form
+    const {
+        register,
+        handleSubmit,
+        reset,
+        setValue,
+        watch,
+        formState: { isSubmitting },
+    } = useForm<FormValues>({
+        resolver: zodResolver(schema),
+                            defaultValues: {
+                                name: "My Fiber #1",
+                                rig_type: "",
+                                laser_source: null,
+                                laser_software: null,
+                                laser_focus_lens: null,
+                                laser_scan_lens: null,
+                                laser_scan_lens_apt: null,
+                                laser_scan_lens_exp: null,
+                                notes: "",
+                            },
     });
 
-    const selectedTypeName = useMemo(() => {
-        const v = form.watch("rig_type");
-        return rigTypes.find((r) => String(r.id) === String(v))?.name ?? "";
-    }, [form, rigTypes]);
+    const rigTypeVal = watch("rig_type");
+    const rigTarget = RIG_TARGET_MAP[rigTypeVal ?? ""] || "";
 
-    // Option lists (pulled from your existing endpoints)
-    const [laserSources, setLaserSources] = useState<{ id: string; label: string }[]>([]);
-    const [scanLenses, setScanLenses] = useState<{ id: string; label: string }[]>([]);
-    const [focusLenses, setFocusLenses] = useState<{ id: string; label: string }[]>([]);
-    const [softwares, setSoftwares] = useState<{ id: string; label: string }[]>([]);
+    const isGantry = rigTypeVal === "co2_gantry";
+    const isScan = rigTypeVal === "fiber" || rigTypeVal === "uv" || rigTypeVal === "co2_galvo";
 
+    // Initial loads
     useEffect(() => {
         (async () => {
             try {
-                const ls = await fetch("/api/options/laser_source").then((r) => r.json());
-                setLaserSources(ls?.data ?? []);
-            } catch {}
-            try {
-                const sl = await fetch("/api/options/lens?target=settings_fiber").then((r) => r.json());
-                setScanLenses(sl?.data ?? []);
-            } catch {}
-            try {
-                const fl = await fetch("/api/options/repeater-choices?key=laser_focus_lens").then((r) =>
-                r.json()
-                );
-                setFocusLenses(fl?.data ?? []);
-            } catch {}
-            try {
-                const sw = await fetch("/api/options/repeater-choices?key=laser_software").then((r) =>
-                r.json()
-                );
-                setSoftwares(sw?.data ?? []);
-            } catch {}
+                const [typesRes, rigsRes] = await Promise.all([
+                    apiJson<{ data: { id: number; name: string }[] }>("/api/options/user_rig_type"),
+                                                              apiJson<{ data: RigRow[] }>("/api/my/rigs"),
+                ]);
+                setRigTypes(typesRes.data);
+                setRigs(rigsRes.data);
+            } catch (e: any) {
+                console.warn("[rigs] initial load failed:", e?.message || e);
+                toast({
+                    title: "Failed to load",
+                    description: "Could not load your rigs or rig types.",
+                    variant: "destructive",
+                });
+            }
         })();
-    }, []);
+    }, [toast]);
 
-    const coerceId = (v: unknown) => {
-        if (typeof v === "number") return v;
-        if (typeof v === "string" && v !== "") {
-            const n = Number(v);
-            return Number.isFinite(n) ? n : v;
+    // Load static-ish options that depend on rig type
+    useEffect(() => {
+        // when rig type changes, clear type-specific fields
+        setValue("laser_focus_lens", null);
+        setValue("laser_scan_lens", null);
+        setValue("laser_scan_lens_apt", null);
+        setValue("laser_scan_lens_exp", null);
+
+        if (!rigTarget) {
+            setSourceOpts([]);
+            setScanLensOpts([]);
+            return;
         }
-        return v ?? null;
-    };
+
+        (async () => {
+            try {
+                // laser sources (by target)
+                const src = await apiJson<{ data: Option[] }>(`/api/options/laser_source?target=${encodeURIComponent(rigTarget)}`);
+                setSourceOpts(src.data ?? []);
+            } catch {
+                setSourceOpts([]);
+            }
+
+            try {
+                // software (generic list; if you have target-aware, swap the endpoint)
+                const soft = await apiJson<{ data: Option[] }>(`/api/options/laser_soft`);
+                setSoftwareOpts(soft.data ?? []);
+            } catch {
+                setSoftwareOpts([]);
+            }
+
+            if (isScan) {
+                try {
+                    const lenses = await apiJson<{ data: Option[] }>(`/api/options/lens?target=${encodeURIComponent(rigTarget)}`);
+                    // server already formats "110x110mm (F160)"; keep but ensure scroll
+                    setScanLensOpts(lenses.data ?? []);
+                } catch {
+                    setScanLensOpts([]);
+                }
+            } else {
+                setScanLensOpts([]);
+            }
+
+            if (isGantry) {
+                try {
+                    // focus lenses are just name strings
+                    const focus = await apiJson<{ data: Option[] }>(`/api/options/laser_focus_lens`);
+                    setFocusLensOpts(focus.data ?? []);
+                } catch {
+                    setFocusLensOpts([]);
+                }
+            } else {
+                setFocusLensOpts([]);
+            }
+        })();
+    }, [rigTarget, isScan, isGantry, setValue]);
 
     async function onSubmit(values: FormValues) {
         try {
+            // shape for API
             const payload = {
                 name: values.name,
-                rig_type: coerceId(values.rig_type), // IMPORTANT: send ID
-                laser_source: values.laser_source ? coerceId(values.laser_source) : null,
-                laser_focus_lens:
-                selectedTypeName === "co2_gantry" && values.laser_focus_lens
-                ? coerceId(values.laser_focus_lens)
-                : null,
-                laser_scan_lens:
-                selectedTypeName !== "co2_gantry" && values.laser_scan_lens
-                ? coerceId(values.laser_scan_lens)
-                : null,
-                laser_scan_lens_apt:
-                selectedTypeName !== "co2_gantry" && values.laser_scan_lens_apt
-                ? values.laser_scan_lens_apt
-                : null,
-                laser_scan_lens_exp:
-                selectedTypeName !== "co2_gantry" && values.laser_scan_lens_exp
-                ? values.laser_scan_lens_exp
-                : null,
-                laser_software: values.laser_software ? coerceId(values.laser_software) : null,
-                notes: values.notes ?? null,
+                rig_type: rigTypes.find((t) => String(t.name) === String(values.rig_type))?.id ?? values.rig_type, // allow id or name
+                laser_source: values.laser_source || null,
+                laser_software: values.laser_software || null,
+                laser_focus_lens: isGantry ? values.laser_focus_lens || null : null,
+                laser_scan_lens: isScan ? values.laser_scan_lens || null : null,
+                laser_scan_lens_apt: isScan ? values.laser_scan_lens_apt || null : null,
+                laser_scan_lens_exp: isScan ? values.laser_scan_lens_exp || null : null,
+                notes: values.notes || null,
             };
 
-            const res = await fetch("/api/my/rigs", {
+            await apiJson("/api/my/rigs", {
                 method: "POST",
-                headers: { "Content-Type": "application/json" },
                 body: JSON.stringify(payload),
             });
 
-            const json = await res.json().catch(() => ({}));
-            if (!res.ok) {
-                throw new Error(json?.error || json?.errors?.[0]?.message || res.statusText);
-            }
+            toast({ title: "Rig saved", description: "Your rig was added." });
+
+            // refresh list
+            const rigsRes = await apiJson<{ data: RigRow[] }>("/api/my/rigs");
+            setRigs(rigsRes.data);
+
+            // keep rig type but clear the rest so it's quick to add another
+            reset({
+                name: "",
+                rig_type: values.rig_type,
+                laser_source: null,
+                laser_software: null,
+                laser_focus_lens: null,
+                laser_scan_lens: null,
+                laser_scan_lens_apt: null,
+                laser_scan_lens_exp: null,
+                notes: "",
+            });
+        } catch (e: any) {
+            const message = (() => {
+                try {
+                    const j = JSON.parse(e?.message || "{}");
+                    if (j?.errors) return `Directus error ${j.errors?.[0]?.extensions?.code || ""}: ${j.errors?.[0]?.message || "Failed"}`;
+                } catch {}
+                return e?.message || "Failed to save rig";
+            })();
 
-            toast({ title: "Saved!", description: `Rig created (id: ${json?.data?.id ?? "?"}).` });
-            form.reset({ name: "", rig_type: "", notes: "" });
-            document.dispatchEvent(new CustomEvent("rigs:refresh"));
-        } catch (err: any) {
             toast({
                 title: "Failed to save rig",
-                description: String(err?.message || err),
-                  variant: "destructive",
+                description: message,
+                variant: "destructive",
             });
         }
     }
 
-    return (
-        <>
-        <div className="rounded-xl border bg-card p-4 md:p-6 space-y-4">
-        <div className="flex items-center gap-2">
-        <h2 className="text-lg font-medium">New Rig</h2>
-        {selectedTypeName ? <Badge variant="secondary">{selectedTypeName}</Badge> : null}
-        </div>
+    async function deleteRig(id: number) {
+        if (!confirm("Delete this rig?")) return;
+        try {
+            await apiJson(`/api/my/rigs/${id}`, { method: "DELETE" });
+            setRigs((prev) => prev.filter((r) => r.id !== id));
+        } catch (e: any) {
+            toast({
+                title: "Delete failed",
+                description: e?.message || "Could not delete rig.",
+                variant: "destructive",
+            });
+        }
+    }
 
-        <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="grid grid-cols-1 md:grid-cols-2 gap-4"
-        >
+    const rigTypeItems = useMemo(
+        () => rigTypes.map((t) => ({ value: String(t.name), label: String(t.name).replaceAll("_", " ") })),
+                                 [rigTypes]
+    );
+
+    // ─────────────────────────────────────────────────────────────
+    // UI
+    // ─────────────────────────────────────────────────────────────
+
+    return (
+        <div className="space-y-8">
+        <Card>
+        <CardHeader>
+        <CardTitle>New Rig</CardTitle>
+        </CardHeader>
+        <CardContent>
+        <form className="grid grid-cols-1 gap-6 md:grid-cols-2" onSubmit={handleSubmit(onSubmit)}>
         {/* Name */}
         <div className="space-y-2">
         <label className="text-sm font-medium">Name</label>
-        <Input placeholder="My Fiber #1" {...form.register("name")} />
-        {form.formState.errors.name ? (
-            <p className="text-xs text-red-500">{form.formState.errors.name.message}</p>
-        ) : null}
+        <Input placeholder="e.g. My Fiber #1" {...register("name")} />
         </div>
 
-        {/* Rig Type (ID values) */}
+        {/* Rig type */}
         <div className="space-y-2">
         <label className="text-sm font-medium">Rig Type</label>
         <Select
-        value={form.watch("rig_type")}
-        onValueChange={(v) => form.setValue("rig_type", v, { shouldValidate: true })}
+        value={rigTypeVal}
+        onValueChange={(v) => setValue("rig_type", v)}
         >
         <SelectTrigger>
         <SelectValue placeholder="Choose a rig type" />
         </SelectTrigger>
+        {/* add scroll so big lists are usable */}
         <SelectContent className="max-h-64 overflow-y-auto">
-        {rigTypes.map((rt) => (
-            <SelectItem key={rt.id} value={String(rt.id)}>
-            {rt.name}
+        {rigTypeItems.map((rt) => (
+            <SelectItem key={rt.value} value={rt.value}>
+            {rt.label}
             </SelectItem>
         ))}
         </SelectContent>
         </Select>
-        {form.formState.errors.rig_type ? (
-            <p className="text-xs text-red-500">{form.formState.errors.rig_type.message}</p>
-        ) : null}
         </div>
 
-        {/* Source */}
+        {/* Laser Source (optional) */}
         <div className="space-y-2">
         <label className="text-sm font-medium">LASER Source</label>
         <Select
-        value={form.watch("laser_source") ?? ""}
-        onValueChange={(v) => form.setValue("laser_source", v)}
+        value={watch("laser_source") ?? ""}
+        onValueChange={(v) => setValue("laser_source", v || null)}
         >
         <SelectTrigger>
         <SelectValue placeholder="Optional" />
         </SelectTrigger>
         <SelectContent className="max-h-64 overflow-y-auto">
-        {laserSources.map((o) => (
+        <SelectItem value="">—</SelectItem>
+        {sourceOpts.map((o) => (
             <SelectItem key={o.id} value={String(o.id)}>
             {o.label}
             </SelectItem>
@@ -203,18 +336,19 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: RigType[] })
         </Select>
         </div>
 
-        {/* Software */}
+        {/* Laser Software (optional) */}
         <div className="space-y-2">
         <label className="text-sm font-medium">LASER Software</label>
         <Select
-        value={form.watch("laser_software") ?? ""}
-        onValueChange={(v) => form.setValue("laser_software", v)}
+        value={watch("laser_software") ?? ""}
+        onValueChange={(v) => setValue("laser_software", v || null)}
         >
         <SelectTrigger>
         <SelectValue placeholder="Optional" />
         </SelectTrigger>
         <SelectContent className="max-h-64 overflow-y-auto">
-        {softwares.map((o) => (
+        <SelectItem value="">—</SelectItem>
+        {softwareOpts.map((o) => (
             <SelectItem key={o.id} value={String(o.id)}>
             {o.label}
             </SelectItem>
@@ -223,19 +357,27 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: RigType[] })
         </Select>
         </div>
 
-        {/* Focus lens – only for co2_gantry */}
-        {selectedTypeName === "co2_gantry" && (
+        {/* Notes spans 2 cols */}
+        <div className="col-span-1 md:col-span-2 space-y-2">
+        <label className="text-sm font-medium">Notes</label>
+        <Textarea placeholder="Optional notes…" rows={4} {...register("notes")} />
+        </div>
+
+        {/* CONDITIONAL: Focus lens for CO2 Gantry */}
+        {isGantry && (
+            <div className="col-span-1 md:col-span-2 grid grid-cols-1 gap-6 md:grid-cols-2">
             <div className="space-y-2">
             <label className="text-sm font-medium">LASER Focus Lens</label>
             <Select
-            value={form.watch("laser_focus_lens") ?? ""}
-            onValueChange={(v) => form.setValue("laser_focus_lens", v)}
+            value={watch("laser_focus_lens") ?? ""}
+            onValueChange={(v) => setValue("laser_focus_lens", v || null)}
             >
             <SelectTrigger>
-            <SelectValue placeholder="Select a focus lens" />
+            <SelectValue placeholder="Optional" />
             </SelectTrigger>
             <SelectContent className="max-h-64 overflow-y-auto">
-            {focusLenses.map((o) => (
+            <SelectItem value="">—</SelectItem>
+            {focusLensOpts.map((o) => (
                 <SelectItem key={o.id} value={String(o.id)}>
                 {o.label}
                 </SelectItem>
@@ -243,22 +385,24 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: RigType[] })
             </SelectContent>
             </Select>
             </div>
+            </div>
         )}
 
-        {/* Scan lens fields – for fiber/uv/co2_galvo */}
-        {selectedTypeName && selectedTypeName !== "co2_gantry" && (
-            <>
+        {/* CONDITIONAL: Scan lens + accessories for fiber/uv/co2_galvo */}
+        {isScan && (
+            <div className="col-span-1 md:col-span-2 grid grid-cols-1 gap-6 md:grid-cols-3">
             <div className="space-y-2">
             <label className="text-sm font-medium">LASER Scan Lens</label>
             <Select
-            value={form.watch("laser_scan_lens") ?? ""}
-            onValueChange={(v) => form.setValue("laser_scan_lens", v)}
+            value={watch("laser_scan_lens") ?? ""}
+            onValueChange={(v) => setValue("laser_scan_lens", v || null)}
             >
             <SelectTrigger>
-            <SelectValue placeholder="Select a scan lens" />
+            <SelectValue placeholder="Optional" />
             </SelectTrigger>
             <SelectContent className="max-h-64 overflow-y-auto">
-            {scanLenses.map((o) => (
+            <SelectItem value="">—</SelectItem>
+            {scanLensOpts.map((o) => (
                 <SelectItem key={o.id} value={String(o.id)}>
                 {o.label}
                 </SelectItem>
@@ -268,102 +412,78 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: RigType[] })
             </div>
 
             <div className="space-y-2">
-            <label className="text-sm font-medium">Scan Head Aperture (optional)</label>
-            <Input placeholder="e.g. 10 mm" {...form.register("laser_scan_lens_apt")} />
+            <label className="text-sm font-medium">Scan Lens Aperture</label>
+            <Select
+            value={watch("laser_scan_lens_apt") ?? ""}
+            onValueChange={(v) => setValue("laser_scan_lens_apt", v || null)}
+            >
+            <SelectTrigger>
+            <SelectValue placeholder="Optional" />
+            </SelectTrigger>
+            <SelectContent className="max-h-64 overflow-y-auto">
+            <SelectItem value="">—</SelectItem>
+            {/* These can be swapped to real options when you expose them as /api/options/... */}
+            <SelectItem value="10mm">10 mm</SelectItem>
+            <SelectItem value="14mm">14 mm</SelectItem>
+            <SelectItem value="20mm">20 mm</SelectItem>
+            <SelectItem value="30mm">30 mm</SelectItem>
+            </SelectContent>
+            </Select>
             </div>
 
             <div className="space-y-2">
-            <label className="text-sm font-medium">Beam Expander (optional)</label>
-            <Input placeholder="e.g. 2×" {...form.register("laser_scan_lens_exp")} />
+            <label className="text-sm font-medium">Beam Expander</label>
+            <Select
+            value={watch("laser_scan_lens_exp") ?? ""}
+            onValueChange={(v) => setValue("laser_scan_lens_exp", v || null)}
+            >
+            <SelectTrigger>
+            <SelectValue placeholder="Optional" />
+            </SelectTrigger>
+            <SelectContent className="max-h-64 overflow-y-auto">
+            <SelectItem value="">—</SelectItem>
+            <SelectItem value="1.5x">1.5×</SelectItem>
+            <SelectItem value="2x">2×</SelectItem>
+            <SelectItem value="3x">3×</SelectItem>
+            <SelectItem value="4x">4×</SelectItem>
+            <SelectItem value="5x">5×</SelectItem>
+            </SelectContent>
+            </Select>
+            </div>
             </div>
-            </>
         )}
 
-        <div className="md:col-span-2 space-y-2">
-        <label className="text-sm font-medium">Notes</label>
-        <Textarea rows={4} placeholder="Optional notes…" {...form.register("notes")} />
-        </div>
-
-        <div className="md:col-span-2">
-        <Button type="submit" className="w-full md:w-auto">
-        Save Rig
+        <div className="col-span-1 md:col-span-2">
+        <Button type="submit" disabled={isSubmitting}>
+        {isSubmitting ? "Saving…" : "Save Rig"}
         </Button>
         </div>
         </form>
-        </div>
+        </CardContent>
+        </Card>
 
-        <RigList />
-        </>
-    );
-}
-
-/* Simple list that refreshes after create */
-function RigList() {
-    const { toast } = useToast();
-    const [items, setItems] = useState<any[]>([]);
-
-    async function fetchRigs() {
-        try {
-            const res = await fetch("/api/my/rigs", { cache: "no-store" });
-            const json = await res.json();
-            setItems(json?.data ?? []);
-        } catch (e: any) {
-            toast({
-                title: "Failed to load rigs",
-                description: String(e?.message || e),
-                  variant: "destructive",
-            });
-        }
-    }
-
-    useEffect(() => {
-        fetchRigs();
-        const onRefresh = () => fetchRigs();
-        document.addEventListener("rigs:refresh", onRefresh);
-        return () => document.removeEventListener("rigs:refresh", onRefresh);
-    }, []);
-
-    if (!items.length) {
-        return <p className="text-sm text-muted-foreground">No rigs yet.</p>;
-    }
-
-    return (
-        <div className="space-y-3 mt-6">
-        <h3 className="text-base font-medium">Your Rigs</h3>
-        <ul className="space-y-2">
-        {items.map((r) => (
-            <li
-            key={r.id}
-            className="flex items-center justify-between rounded-md border px-3 py-2"
-            >
-            <div className="flex items-center gap-2">
-            <span className="font-medium">{r.name}</span>
-            {r?.rig_type_name ? <Badge variant="secondary">{r.rig_type_name}</Badge> : null}
+        {/* Existing rigs */}
+        <div className="space-y-3">
+        <h2 className="text-xl font-semibold">Your Rigs</h2>
+        <div className="divide-y divide-border rounded-md border">
+        {rigs.length === 0 && (
+            <div className="p-4 text-sm opacity-70">No rigs yet.</div>
+        )}
+        {rigs.map((r) => (
+            <div key={r.id} className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-3">
+            <div className="font-medium">{r.name}</div>
+            {r.rig_type_name && (
+                <Badge variant="secondary">{r.rig_type_name}</Badge>
+            )}
             </div>
-            <form
-            onSubmit={async (e) => {
-                e.preventDefault();
-                try {
-                    const res = await fetch(`/api/my/rigs/${r.id}`, { method: "DELETE" });
-                    const j = await res.json().catch(() => ({}));
-                    if (!res.ok) throw new Error(j?.error || res.statusText);
-                    document.dispatchEvent(new CustomEvent("rigs:refresh"));
-                } catch (err: any) {
-                    toast({
-                        title: "Delete failed",
-                        description: String(err?.message || err),
-                          variant: "destructive",
-                    });
-                }
-            }}
-            >
-            <Button type="submit" variant="outline" size="sm">
+            <Button variant="destructive" size="sm" onClick={() => deleteRig(r.id)}>
             Delete
             </Button>
-            </form>
-            </li>
+            </div>
         ))}
-        </ul>
+        </div>
+        </div>
         </div>
     );
 }
diff --git a/app/my/rigs/page.tsx b/app/my/rigs/page.tsx
index bf625ed7..c059c7d8 100644
--- a/app/my/rigs/page.tsx
+++ b/app/my/rigs/page.tsx
@@ -1,43 +1,22 @@
 // app/my/rigs/page.tsx
-import { cookies } from "next/headers";
 import SignOutButton from "@/components/SignOutButton";
 import RigBuilderClient from "./RigBuilderClient";
 
-const API_BASE = process.env.DIRECTUS_URL!;
-
-type RigType = { id: number | string; name: string };
-
-async function loadRigTypes(): Promise<RigType[]> {
-    const ck = await cookies();
-    const at = ck.get("ma_at")?.value;
-
-    const headers: Record<string, string> = { Accept: "application/json" };
-    if (at) headers.Authorization = `Bearer ${at}`;
-
-    const res = await fetch(
-        `${API_BASE}/items/user_rig_type?fields=id,name&sort=sort`,
-        { cache: "no-store", headers }
-    );
-
-    if (!res.ok) {
-        console.warn("[my/rigs] failed to load rig types:", await res.text());
-        return [];
-    }
-    const json = await res.json();
-    return (json?.data ?? []) as RigType[];
-}
+export const metadata = {
+    title: "My Rigs",
+};
 
 export default async function MyRigsPage() {
-    const rigTypes = await loadRigTypes();
-
+    // Server shell only; the client component does all fetching with the
+    // user cookie via our /api/* routes so auth is preserved.
     return (
-        <div className="mx-auto max-w-5xl px-4 py-8 space-y-8">
-        <header className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">My Rigs</h1>
-        <SignOutButton redirectTo="/auth/sign-in" />
-        </header>
-
-        <RigBuilderClient rigTypes={rigTypes} />
+        <main className="mx-auto max-w-5xl px-6 py-10">
+        <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-3xl font-bold tracking-tight">My Rigs</h1>
+        <SignOutButton className="text-sm opacity-75 hover:opacity-100" />
         </div>
+
+        <RigBuilderClient />
+        </main>
     );
 }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 579ad29c..a45647c2 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,119 +1,38 @@
-// components/ui/select.tsx
-"use client";
+"use client"
 
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-export const Select = SelectPrimitive.Root;
-export const SelectGroup = SelectPrimitive.Group;
-export const SelectValue = SelectPrimitive.Value;
+import { cn } from "@/lib/utils"
 
-export const SelectTrigger = React.forwardRef<
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-neutral-700",
-      "bg-neutral-900 px-3 text-sm text-neutral-100 outline-none",
-      "ring-offset-neutral-900 transition-colors",
-      "placeholder:text-neutral-400",
-      "focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500",
-      "data-[state=open]:border-neutral-600",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
-    <SelectPrimitive.Icon className="ml-2 opacity-80">
-      <ChevronDown className="h-4 w-4" />
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-export const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      position={position}
-      className={cn(
-        // 🔒 Explicit background + border so it’s never transparent
-        "z-50 overflow-hidden rounded-md border border-neutral-700",
-        "bg-neutral-900 text-neutral-100 shadow-lg",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport className="p-1 bg-neutral-900">
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-export const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-xs font-medium text-neutral-300", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-export const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm",
-      "px-2 py-1.5 text-sm outline-none",
-      "text-neutral-100",
-      "focus:bg-neutral-800 focus:text-neutral-100",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="mr-2 inline-flex h-4 w-4 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-export const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("my-1 h-px bg-neutral-700", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export const SelectScrollUpButton = React.forwardRef<
+const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
@@ -121,17 +40,16 @@ export const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      "bg-neutral-900 text-neutral-300",
       className
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-export const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
@@ -139,14 +57,104 @@ export const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      "bg-neutral-900 text-neutral-300",
       className
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-));
+))
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+  SelectPrimitive.ScrollDownButton.displayName
 
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index e0a24047..e42012b6 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1862,7 +1862,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2056,7 +2055,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001716",
         "electron-to-chromium": "^1.5.149",
@@ -4038,7 +4036,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -4186,7 +4183,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4196,7 +4192,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -4209,7 +4204,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
       "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
diff --git a/package-lock.json b/package-lock.json
index ba58c3fa..0aa3cec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1873,7 +1873,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2067,7 +2066,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001716",
         "electron-to-chromium": "^1.5.149",
@@ -4048,7 +4046,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -4196,7 +4193,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4206,7 +4202,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -4219,7 +4214,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
       "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },