Restructure UX and seed a fully simulated organisation

Rework the dashboard, environment topology view, header navigation, and
status rendering, and standardise selects on a shadcn-vue component.

Replace the thin database seeder with a SimulatedEnvironmentSeeder that
builds a fully wired, mostly-running organisation (ACTIVE server fleet,
managed + GHCR registries, Gitea source provider, ClipBin app with
production/staging environments, services, slices, endpoints, managed
variables, build artifacts, and a completed/in-progress/failed operations
history) so the new UI renders against realistic data.

resources/js/pages/environment-attachments/Create.vue

@@ -3,6 +3,13 @@ import InputError from "@/components/InputError.vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 import AppLayout from "@/layouts/AppLayout.vue";
 import { Head, useForm } from "@inertiajs/vue3";
 import { computed, watch } from "vue";
@@ -16,7 +23,7 @@ const props = defineProps<{
 }>();
 
 const form = useForm({
-    service_id: props.services[0]?.id ?? null,
+    service_id: String(props.services[0]?.id ?? ""),
     role: "database",
     name: "",
     env_prefix: "",
@@ -35,7 +42,7 @@ const compatibleServices = computed(() => {
 });
 
 const selectedService = computed(() =>
-    props.services.find((service) => service.id === form.service_id),
+    props.services.find((service) => String(service.id) === form.service_id),
 );
 const generatedSliceType = computed(() => {
     if (selectedService.value?.type === "postgres") {
@@ -133,19 +140,20 @@ watch(
 
             <div class="grid gap-2">
                 <Label for="service_id">Service</Label>
-                <select
-                    id="service_id"
-                    v-model="form.service_id"
-                    class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
-                >
-                    <option
-                        v-for="service in compatibleServices"
-                        :key="service.id"
-                        :value="service.id"
-                    >
-                        {{ service.name }} · {{ service.type }}
-                    </option>
-                </select>
+                <Select v-model="form.service_id">
+                    <SelectTrigger id="service_id">
+                        <SelectValue placeholder="Select a service" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem
+                            v-for="service in compatibleServices"
+                            :key="service.id"
+                            :value="String(service.id)"
+                        >
+                            {{ service.name }} · {{ service.type }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
                 <InputError :message="form.errors.service_id" />
             </div>
 
@@ -172,15 +180,16 @@ watch(
 
             <div class="grid gap-2">
                 <Label for="role">Role</Label>
-                <select
-                    id="role"
-                    v-model="form.role"
-                    class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
-                >
-                    <option v-for="role in roles" :key="role" :value="role">
-                        {{ role.replace("_", " ") }}
-                    </option>
-                </select>
+                <Select v-model="form.role">
+                    <SelectTrigger id="role">
+                        <SelectValue placeholder="Select a role" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem v-for="role in roles" :key="role" :value="role">
+                            {{ role.replace("_", " ") }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
                 <InputError :message="form.errors.role" />
             </div>
 
@@ -208,15 +217,28 @@ watch(
                 </div>
             </div>
 
-            <div v-if="form.role === 'gateway'" class="grid gap-4 rounded-md border p-3 md:grid-cols-3">
+            <div
+                v-if="form.role === 'gateway'"
+                class="grid gap-4 rounded-md border p-3 md:grid-cols-3"
+            >
                 <div class="grid gap-2">
                     <Label for="domain">Domain</Label>
-                    <Input id="domain" v-model="form.domain" type="text" placeholder="app.example.com" />
+                    <Input
+                        id="domain"
+                        v-model="form.domain"
+                        type="text"
+                        placeholder="app.example.com"
+                    />
                     <InputError :message="form.errors.domain" />
                 </div>
                 <div class="grid gap-2">
                     <Label for="path_prefix">Path prefix</Label>
-                    <Input id="path_prefix" v-model="form.path_prefix" type="text" placeholder="/" />
+                    <Input
+                        id="path_prefix"
+                        v-model="form.path_prefix"
+                        type="text"
+                        placeholder="/"
+                    />
                     <InputError :message="form.errors.path_prefix" />
                 </div>
                 <label class="flex items-center gap-2 pt-7 text-sm">