From 7e04742dd72ebbd6ec632168457f3b6d511ce74c Mon Sep 17 00:00:00 2001
From: numen-bot <numen-bot@byte5.de>
Date: Mon, 16 Mar 2026 05:14:20 +0000
Subject: [PATCH] =?UTF-8?q?hotfix:=20round=203=20=E2=80=94=20fix=204=20pro?=
 =?UTF-8?q?duction=20UI=20bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug 1: Spaces pages double-rendered MainLayout
- Remove <MainLayout> wrapper from templates in Index/Create/Edit.vue
- Add defineOptions({ layout: MainLayout }) to each page
- Remove duplicate Spaces nav entry in MainLayout.vue (keep 🏢, remove 🌐)

Bug 2: Media upload URL was overcorrected to /api/media (404)
- Fix MediaUploadZone.vue: xhr.open to /api/v1/media
- Fix Media/Index.vue: fetch URLs to /api/v1/media and /api/v1/media/:id
- Add X-Requested-With header to XHR upload

Bug 3: Knowledge Graph still 401
- Fix KnowledgeGraphViewer.vue: credentials 'same-origin' -> 'include'
- Add decodeURIComponent() to XSRF token extraction

Bug 4: Locales page redirects instead of staying on page
- Replace ALL router.post/patch/delete with fetch() API calls
- Use router.reload({ only: ['locales'] }) after successful ops
- Add proper Sanctum auth headers (X-XSRF-TOKEN, X-Requested-With)
---
 .../Components/Graph/KnowledgeGraphViewer.vue |   4 +-
 .../js/Components/Media/MediaUploadZone.vue   |   3 +-
 resources/js/Layouts/MainLayout.vue           |   1 -
 resources/js/Pages/Admin/Spaces/Create.vue    | 142 ++++++-------
 resources/js/Pages/Admin/Spaces/Edit.vue      | 138 ++++++------
 resources/js/Pages/Admin/Spaces/Index.vue     | 198 +++++++++---------
 resources/js/Pages/Media/Index.vue            |   4 +-
 resources/js/Pages/Settings/Locales.vue       | 100 +++++++--
 8 files changed, 323 insertions(+), 267 deletions(-)

diff --git a/resources/js/Components/Graph/KnowledgeGraphViewer.vue b/resources/js/Components/Graph/KnowledgeGraphViewer.vue
index 599b98e..a594e55 100644
--- a/resources/js/Components/Graph/KnowledgeGraphViewer.vue
+++ b/resources/js/Components/Graph/KnowledgeGraphViewer.vue
@@ -43,9 +43,9 @@ async function fetchGraph() {
         const url = props.contentId
             ? `/api/v1/graph/node/${props.contentId}`
             : `/api/v1/graph/space/${props.spaceId}`;
-        const xsrfToken = document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '';
+        const xsrfToken = decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '');
         const res = await fetch(url, {
-            credentials: 'same-origin',
+            credentials: 'include',
             headers: {
                 'Accept': 'application/json',
                 'X-Requested-With': 'XMLHttpRequest',
diff --git a/resources/js/Components/Media/MediaUploadZone.vue b/resources/js/Components/Media/MediaUploadZone.vue
index 6509afb..28382af 100644
--- a/resources/js/Components/Media/MediaUploadZone.vue
+++ b/resources/js/Components/Media/MediaUploadZone.vue
@@ -76,8 +76,9 @@ async function uploadFile(file) {
             resolve({ ok: false });
         });
 
-        xhr.open('POST', '/api/media');
+        xhr.open('POST', '/api/v1/media');
         xhr.setRequestHeader('Accept', 'application/json');
+        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
         xhr.setRequestHeader('X-XSRF-TOKEN', xsrfToken());
         xhr.withCredentials = true;
         xhr.send(formData);
diff --git a/resources/js/Layouts/MainLayout.vue b/resources/js/Layouts/MainLayout.vue
index ae80b40..7b7c1d2 100644
--- a/resources/js/Layouts/MainLayout.vue
+++ b/resources/js/Layouts/MainLayout.vue
@@ -41,7 +41,6 @@ const navigation = [
     { name: 'API Tokens', href: '/admin/tokens', icon: '🔑' },
     { name: 'Webhooks', href: '/admin/webhooks', icon: '🔗' },
     { name: 'Spaces', href: '/admin/spaces', icon: '🏢' },
-    { name: 'Spaces', href: '/admin/spaces', icon: '🌐' },
     { name: 'Settings', href: '/admin/settings', icon: '⚙️' },
     { name: 'Languages', href: '/admin/settings/locales', icon: '🌐' },
     { name: 'Plugins', href: '/admin/plugins', icon: '🧩' },
diff --git a/resources/js/Pages/Admin/Spaces/Create.vue b/resources/js/Pages/Admin/Spaces/Create.vue
index a0a1d31..a79f7ca 100644
--- a/resources/js/Pages/Admin/Spaces/Create.vue
+++ b/resources/js/Pages/Admin/Spaces/Create.vue
@@ -34,85 +34,85 @@ watch(() => form.name, (value) => {
 function submit() {
     form.post('/admin/spaces')
 }
+
+defineOptions({ layout: MainLayout })
 </script>
 
 <template>
-    <MainLayout>
-        <Head title="Create Space" />
+    <Head title="Create Space" />
 
-        <div class="max-w-2xl mx-auto">
-            <div class="mb-6">
-                <a href="/admin/spaces" class="text-sm text-gray-400 hover:text-white transition-colors">← Back to Spaces</a>
-            </div>
+    <div class="max-w-2xl mx-auto">
+        <div class="mb-6">
+            <a href="/admin/spaces" class="text-sm text-gray-400 hover:text-white transition-colors">← Back to Spaces</a>
+        </div>
 
-            <h1 class="text-2xl font-bold text-white mb-6">Create Space</h1>
+        <h1 class="text-2xl font-bold text-white mb-6">Create Space</h1>
 
-            <form @submit.prevent="submit" class="bg-gray-900 rounded-xl border border-gray-800 p-6 space-y-5">
-                <!-- Name -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Name</label>
-                    <input
-                        v-model="form.name"
-                        type="text"
-                        placeholder="My Space"
-                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors"
-                        :class="{ 'border-red-500': form.errors.name }"
-                    />
-                    <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
-                </div>
+        <form @submit.prevent="submit" class="bg-gray-900 rounded-xl border border-gray-800 p-6 space-y-5">
+            <!-- Name -->
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1.5">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    placeholder="My Space"
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                    :class="{ 'border-red-500': form.errors.name }"
+                />
+                <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
+            </div>
 
-                <!-- Slug -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Slug</label>
-                    <input
-                        v-model="form.slug"
-                        type="text"
-                        placeholder="my-space"
-                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors font-mono text-sm"
-                        :class="{ 'border-red-500': form.errors.slug }"
-                    />
-                    <p v-if="form.errors.slug" class="mt-1 text-xs text-red-400">{{ form.errors.slug }}</p>
-                    <p class="mt-1 text-xs text-gray-500">Auto-generated from name. Only letters, numbers, and dashes.</p>
-                </div>
+            <!-- Slug -->
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1.5">Slug</label>
+                <input
+                    v-model="form.slug"
+                    type="text"
+                    placeholder="my-space"
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors font-mono text-sm"
+                    :class="{ 'border-red-500': form.errors.slug }"
+                />
+                <p v-if="form.errors.slug" class="mt-1 text-xs text-red-400">{{ form.errors.slug }}</p>
+                <p class="mt-1 text-xs text-gray-500">Auto-generated from name. Only letters, numbers, and dashes.</p>
+            </div>
 
-                <!-- Description -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Description <span class="text-gray-500">(optional)</span></label>
-                    <textarea
-                        v-model="form.description"
-                        rows="3"
-                        placeholder="Brief description of this space..."
-                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors resize-none"
-                        :class="{ 'border-red-500': form.errors.description }"
-                    />
-                    <p v-if="form.errors.description" class="mt-1 text-xs text-red-400">{{ form.errors.description }}</p>
-                </div>
+            <!-- Description -->
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1.5">Description <span class="text-gray-500">(optional)</span></label>
+                <textarea
+                    v-model="form.description"
+                    rows="3"
+                    placeholder="Brief description of this space..."
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 transition-colors resize-none"
+                    :class="{ 'border-red-500': form.errors.description }"
+                />
+                <p v-if="form.errors.description" class="mt-1 text-xs text-red-400">{{ form.errors.description }}</p>
+            </div>
 
-                <!-- Default Locale -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Default Locale</label>
-                    <select
-                        v-model="form.default_locale"
-                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-colors"
-                        :class="{ 'border-red-500': form.errors.default_locale }"
-                    >
-                        <option v-for="locale in locales" :key="locale.value" :value="locale.value">
-                            {{ locale.label }}
-                        </option>
-                    </select>
-                    <p v-if="form.errors.default_locale" class="mt-1 text-xs text-red-400">{{ form.errors.default_locale }}</p>
-                </div>
+            <!-- Default Locale -->
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1.5">Default Locale</label>
+                <select
+                    v-model="form.default_locale"
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                    :class="{ 'border-red-500': form.errors.default_locale }"
+                >
+                    <option v-for="locale in locales" :key="locale.value" :value="locale.value">
+                        {{ locale.label }}
+                    </option>
+                </select>
+                <p v-if="form.errors.default_locale" class="mt-1 text-xs text-red-400">{{ form.errors.default_locale }}</p>
+            </div>
 
-                <div class="flex justify-end pt-2">
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-                    >
-                        {{ form.processing ? 'Creating...' : 'Create Space' }}
-                    </button>
-                </div>
-            </form>
-        </div>
-    </MainLayout>
+            <div class="flex justify-end pt-2">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                    {{ form.processing ? 'Creating...' : 'Create Space' }}
+                </button>
+            </div>
+        </form>
+    </div>
 </template>
diff --git a/resources/js/Pages/Admin/Spaces/Edit.vue b/resources/js/Pages/Admin/Spaces/Edit.vue
index ba05b40..0fe0740 100644
--- a/resources/js/Pages/Admin/Spaces/Edit.vue
+++ b/resources/js/Pages/Admin/Spaces/Edit.vue
@@ -63,83 +63,83 @@ function confirmDelete() {
     }
     router.delete(`/admin/spaces/${props.space.id}`)
 }
+
+defineOptions({ layout: MainLayout })
 </script>
 
 <template>
-    <MainLayout>
-        <Head :title="`Edit Space: ${space.name}`" />
-        <div class="max-w-3xl mx-auto">
-            <div class="mb-6">
-                <a href="/admin/spaces" class="text-sm text-gray-400 hover:text-white transition-colors">Back to Spaces</a>
-            </div>
-            <h1 class="text-2xl font-bold text-white mb-6">Edit Space: {{ space.name }}</h1>
-            <div class="flex gap-1 mb-6 border-b border-gray-800">
-                <button v-for="tab in [{key:'general',label:'General'},{key:'ai_providers',label:'AI Providers'},{key:'settings',label:'Settings'},{key:'danger',label:'Danger Zone'}]"
-                    :key="tab.key" @click="(activeTab as string) = tab.key"
-                    class="px-4 py-2.5 text-sm font-medium transition-colors -mb-px border-b-2"
-                    :class="activeTab === tab.key ? 'text-indigo-400 border-indigo-400' : 'text-gray-400 border-transparent hover:text-white'">
-                    {{ tab.label }}
-                </button>
+    <Head :title="`Edit Space: ${space.name}`" />
+    <div class="max-w-3xl mx-auto">
+        <div class="mb-6">
+            <a href="/admin/spaces" class="text-sm text-gray-400 hover:text-white transition-colors">Back to Spaces</a>
+        </div>
+        <h1 class="text-2xl font-bold text-white mb-6">Edit Space: {{ space.name }}</h1>
+        <div class="flex gap-1 mb-6 border-b border-gray-800">
+            <button v-for="tab in [{key:'general',label:'General'},{key:'ai_providers',label:'AI Providers'},{key:'settings',label:'Settings'},{key:'danger',label:'Danger Zone'}]"
+                :key="tab.key" @click="(activeTab as string) = tab.key"
+                class="px-4 py-2.5 text-sm font-medium transition-colors -mb-px border-b-2"
+                :class="activeTab === tab.key ? 'text-indigo-400 border-indigo-400' : 'text-gray-400 border-transparent hover:text-white'">
+                {{ tab.label }}
+            </button>
+        </div>
+        <form @submit.prevent="submit" class="bg-gray-900 rounded-xl border border-gray-800 p-6">
+            <div v-if="activeTab === 'general'" class="space-y-5">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Name</label>
+                    <input v-model="form.name" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500" :class="{ 'border-red-500': form.errors.name }" />
+                    <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Slug</label>
+                    <input v-model="form.slug" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-indigo-500" :class="{ 'border-red-500': form.errors.slug }" />
+                    <p v-if="form.errors.slug" class="mt-1 text-xs text-red-400">{{ form.errors.slug }}</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Description</label>
+                    <textarea v-model="form.description" rows="3" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500 resize-none" />
+                </div>
+                <div class="flex justify-end pt-2">
+                    <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
+                        {{ form.processing ? 'Saving...' : 'Save Changes' }}
+                    </button>
+                </div>
             </div>
-            <form @submit.prevent="submit" class="bg-gray-900 rounded-xl border border-gray-800 p-6">
-                <div v-if="activeTab === 'general'" class="space-y-5">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1.5">Name</label>
-                        <input v-model="form.name" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500" :class="{ 'border-red-500': form.errors.name }" />
-                        <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1.5">Slug</label>
-                        <input v-model="form.slug" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-indigo-500" :class="{ 'border-red-500': form.errors.slug }" />
-                        <p v-if="form.errors.slug" class="mt-1 text-xs text-red-400">{{ form.errors.slug }}</p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1.5">Description</label>
-                        <textarea v-model="form.description" rows="3" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500 resize-none" />
-                    </div>
-                    <div class="flex justify-end pt-2">
-                        <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
-                            {{ form.processing ? 'Saving...' : 'Save Changes' }}
-                        </button>
-                    </div>
+            <div v-if="activeTab === 'ai_providers'" class="space-y-5">
+                <p class="text-sm text-gray-400 mb-4">Configure AI provider API keys for this space.</p>
+                <div v-for="field in [{key:'openai_api_key',label:'OpenAI API Key'},{key:'anthropic_api_key',label:'Anthropic API Key'},{key:'azure_openai_key',label:'Azure OpenAI Key'},{key:'azure_openai_endpoint',label:'Azure Endpoint'},{key:'together_api_key',label:'Together AI Key'},{key:'fal_api_key',label:'fal.ai API Key'},{key:'replicate_api_key',label:'Replicate API Key'}]" :key="field.key">
+                    <label class="block text-sm font-medium text-gray-300 mb-1.5">{{ field.label }}</label>
+                    <input v-model="(form.api_config as Record<string,string>)[field.key]" type="password" autocomplete="new-password" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-indigo-500" />
                 </div>
-                <div v-if="activeTab === 'ai_providers'" class="space-y-5">
-                    <p class="text-sm text-gray-400 mb-4">Configure AI provider API keys for this space.</p>
-                    <div v-for="field in [{key:'openai_api_key',label:'OpenAI API Key'},{key:'anthropic_api_key',label:'Anthropic API Key'},{key:'azure_openai_key',label:'Azure OpenAI Key'},{key:'azure_openai_endpoint',label:'Azure Endpoint'},{key:'together_api_key',label:'Together AI Key'},{key:'fal_api_key',label:'fal.ai API Key'},{key:'replicate_api_key',label:'Replicate API Key'}]" :key="field.key">
-                        <label class="block text-sm font-medium text-gray-300 mb-1.5">{{ field.label }}</label>
-                        <input v-model="(form.api_config as Record<string,string>)[field.key]" type="password" autocomplete="new-password" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-indigo-500" />
-                    </div>
-                    <div class="flex justify-end pt-2">
-                        <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
-                            {{ form.processing ? 'Saving...' : 'Save API Keys' }}
-                        </button>
-                    </div>
+                <div class="flex justify-end pt-2">
+                    <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
+                        {{ form.processing ? 'Saving...' : 'Save API Keys' }}
+                    </button>
                 </div>
-                <div v-if="activeTab === 'settings'" class="space-y-5">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1.5">Default Locale</label>
-                        <select v-model="form.default_locale" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500">
-                            <option v-for="locale in locales" :key="locale.value" :value="locale.value">{{ locale.label }}</option>
-                        </select>
-                    </div>
-                    <div class="flex justify-end pt-2">
-                        <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
-                            {{ form.processing ? 'Saving...' : 'Save Settings' }}
-                        </button>
-                    </div>
+            </div>
+            <div v-if="activeTab === 'settings'" class="space-y-5">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1.5">Default Locale</label>
+                    <select v-model="form.default_locale" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-indigo-500">
+                        <option v-for="locale in locales" :key="locale.value" :value="locale.value">{{ locale.label }}</option>
+                    </select>
                 </div>
-            </form>
-            <div v-if="activeTab === 'danger'" class="bg-gray-900 rounded-xl border border-red-900/50 p-6 mt-4">
-                <h3 class="text-lg font-semibold text-red-400 mb-2">Danger Zone</h3>
-                <p class="text-sm text-gray-400 mb-4">
-                    Permanently delete this space. Type <strong class="text-white">{{ space.name }}</strong> to confirm.
-                </p>
-                <div class="space-y-3">
-                    <input v-model="deleteConfirmText" type="text" :placeholder="`Type to confirm`" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-red-500" :class="{ 'border-red-500': deleteError }" />
-                    <p v-if="deleteError" class="text-xs text-red-400">{{ deleteError }}</p>
-                    <button @click="confirmDelete" class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg">Delete Space</button>
+                <div class="flex justify-end pt-2">
+                    <button type="submit" :disabled="form.processing" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg">
+                        {{ form.processing ? 'Saving...' : 'Save Settings' }}
+                    </button>
                 </div>
             </div>
+        </form>
+        <div v-if="activeTab === 'danger'" class="bg-gray-900 rounded-xl border border-red-900/50 p-6 mt-4">
+            <h3 class="text-lg font-semibold text-red-400 mb-2">Danger Zone</h3>
+            <p class="text-sm text-gray-400 mb-4">
+                Permanently delete this space. Type <strong class="text-white">{{ space.name }}</strong> to confirm.
+            </p>
+            <div class="space-y-3">
+                <input v-model="deleteConfirmText" type="text" :placeholder="`Type to confirm`" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-red-500" :class="{ 'border-red-500': deleteError }" />
+                <p v-if="deleteError" class="text-xs text-red-400">{{ deleteError }}</p>
+                <button @click="confirmDelete" class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg">Delete Space</button>
+            </div>
         </div>
-    </MainLayout>
+    </div>
 </template>
diff --git a/resources/js/Pages/Admin/Spaces/Index.vue b/resources/js/Pages/Admin/Spaces/Index.vue
index 841d7d3..763d048 100644
--- a/resources/js/Pages/Admin/Spaces/Index.vue
+++ b/resources/js/Pages/Admin/Spaces/Index.vue
@@ -30,114 +30,114 @@ function deleteSpace(id: string) {
         },
     })
 }
+
+defineOptions({ layout: MainLayout })
 </script>
 
 <template>
-    <MainLayout>
-        <Head title="Spaces" />
+    <Head title="Spaces" />
 
-        <div class="max-w-5xl mx-auto">
-            <div class="flex items-center justify-between mb-6">
-                <div>
-                    <h1 class="text-2xl font-bold text-white">Spaces</h1>
-                    <p class="text-sm text-gray-400 mt-1">Manage your content spaces and configurations</p>
-                </div>
-                <a
-                    href="/admin/spaces/create"
-                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors"
-                >
-                    + New Space
-                </a>
+    <div class="max-w-5xl mx-auto">
+        <div class="flex items-center justify-between mb-6">
+            <div>
+                <h1 class="text-2xl font-bold text-white">Spaces</h1>
+                <p class="text-sm text-gray-400 mt-1">Manage your content spaces and configurations</p>
             </div>
+            <a
+                href="/admin/spaces/create"
+                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors"
+            >
+                + New Space
+            </a>
+        </div>
 
-            <!-- Flash messages -->
-            <div v-if="flash.success" class="mb-4 px-4 py-3 bg-green-500/15 border border-green-500/30 text-green-400 rounded-lg text-sm">
-                {{ flash.success }}
-            </div>
-            <div v-if="flash.error" class="mb-4 px-4 py-3 bg-red-500/15 border border-red-500/30 text-red-400 rounded-lg text-sm">
-                {{ flash.error }}
-            </div>
+        <!-- Flash messages -->
+        <div v-if="flash.success" class="mb-4 px-4 py-3 bg-green-500/15 border border-green-500/30 text-green-400 rounded-lg text-sm">
+            {{ flash.success }}
+        </div>
+        <div v-if="flash.error" class="mb-4 px-4 py-3 bg-red-500/15 border border-red-500/30 text-red-400 rounded-lg text-sm">
+            {{ flash.error }}
+        </div>
 
-            <!-- Spaces table -->
-            <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
-                <table class="w-full">
-                    <thead>
-                        <tr class="border-b border-gray-800">
-                            <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th>
-                            <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Slug</th>
-                            <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Locale</th>
-                            <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Created</th>
-                            <th class="text-right px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-800">
-                        <tr v-for="space in spaces" :key="space.id" class="hover:bg-gray-800/40 transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="flex items-center gap-2">
-                                    <span class="text-white font-medium">{{ space.name }}</span>
-                                    <span
-                                        v-if="space.is_current"
-                                        class="px-2 py-0.5 text-xs bg-indigo-500/20 text-indigo-400 rounded-full border border-indigo-500/30"
-                                    >
-                                        Current
-                                    </span>
-                                </div>
-                                <p v-if="space.description" class="text-xs text-gray-500 mt-0.5">{{ space.description }}</p>
-                            </td>
-                            <td class="px-6 py-4">
-                                <code class="text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded">{{ space.slug }}</code>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="text-sm text-gray-300">{{ space.default_locale }}</span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="text-sm text-gray-500">{{ new Date(space.created_at).toLocaleDateString() }}</span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="flex items-center justify-end gap-2">
-                                    <a
-                                        :href="`/admin/spaces/${space.id}/edit`"
-                                        class="px-3 py-1.5 text-xs text-gray-300 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
-                                    >
-                                        Edit
-                                    </a>
-                                    <button
-                                        @click="confirmDelete = space.id"
-                                        class="px-3 py-1.5 text-xs text-red-400 bg-red-500/10 hover:bg-red-500/20 rounded-lg transition-colors"
-                                    >
-                                        Delete
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr v-if="spaces.length === 0">
-                            <td colspan="5" class="px-6 py-12 text-center text-gray-500">No spaces found.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <!-- Spaces table -->
+        <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-gray-800">
+                        <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th>
+                        <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Slug</th>
+                        <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Locale</th>
+                        <th class="text-left px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Created</th>
+                        <th class="text-right px-6 py-3 text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-800">
+                    <tr v-for="space in spaces" :key="space.id" class="hover:bg-gray-800/40 transition-colors">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-2">
+                                <span class="text-white font-medium">{{ space.name }}</span>
+                                <span
+                                    v-if="space.is_current"
+                                    class="px-2 py-0.5 text-xs bg-indigo-500/20 text-indigo-400 rounded-full border border-indigo-500/30"
+                                >
+                                    Current
+                                </span>
+                            </div>
+                            <p v-if="space.description" class="text-xs text-gray-500 mt-0.5">{{ space.description }}</p>
+                        </td>
+                        <td class="px-6 py-4">
+                            <code class="text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded">{{ space.slug }}</code>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="text-sm text-gray-300">{{ space.default_locale }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="text-sm text-gray-500">{{ new Date(space.created_at).toLocaleDateString() }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center justify-end gap-2">
+                                <a
+                                    :href="`/admin/spaces/${space.id}/edit`"
+                                    class="px-3 py-1.5 text-xs text-gray-300 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
+                                >
+                                    Edit
+                                </a>
+                                <button
+                                    @click="confirmDelete = space.id"
+                                    class="px-3 py-1.5 text-xs text-red-400 bg-red-500/10 hover:bg-red-500/20 rounded-lg transition-colors"
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr v-if="spaces.length === 0">
+                        <td colspan="5" class="px-6 py-12 text-center text-gray-500">No spaces found.</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
+    </div>
 
-        <!-- Delete Confirm Dialog -->
-        <div v-if="confirmDelete" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-            <div class="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md">
-                <h3 class="text-lg font-bold text-white mb-2">Delete Space</h3>
-                <p class="text-sm text-gray-400 mb-6">Are you sure you want to delete this space? This action cannot be undone.</p>
-                <div class="flex gap-3 justify-end">
-                    <button
-                        @click="confirmDelete = null"
-                        class="px-4 py-2 text-sm text-gray-300 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        @click="deleteSpace(confirmDelete)"
-                        class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
-                    >
-                        Delete
-                    </button>
-                </div>
+    <!-- Delete Confirm Dialog -->
+    <div v-if="confirmDelete" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+        <div class="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md">
+            <h3 class="text-lg font-bold text-white mb-2">Delete Space</h3>
+            <p class="text-sm text-gray-400 mb-6">Are you sure you want to delete this space? This action cannot be undone.</p>
+            <div class="flex gap-3 justify-end">
+                <button
+                    @click="confirmDelete = null"
+                    class="px-4 py-2 text-sm text-gray-300 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
+                >
+                    Cancel
+                </button>
+                <button
+                    @click="deleteSpace(confirmDelete)"
+                    class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
+                >
+                    Delete
+                </button>
             </div>
         </div>
-    </MainLayout>
+    </div>
 </template>
diff --git a/resources/js/Pages/Media/Index.vue b/resources/js/Pages/Media/Index.vue
index 375f6a5..0796e44 100644
--- a/resources/js/Pages/Media/Index.vue
+++ b/resources/js/Pages/Media/Index.vue
@@ -26,7 +26,7 @@ async function fetchAssets(page = 1) {
         if (filters.type)   params.set('type',   filters.type);
         if (filters.tag)    params.set('tag',     filters.tag);
         await csrfCookie();
-        const res = await fetch(`/api/media?${params}`, {
+        const res = await fetch(`/api/v1/media?${params}`, {
             credentials: 'include',
             headers: { 'Accept': 'application/json', 'X-XSRF-TOKEN': xsrfToken() },
         });
@@ -72,7 +72,7 @@ function closeDetail()      { activeAsset.value = null; }
 async function deleteAsset(asset) {
     if (!confirm(`Delete "${asset.filename}"? This cannot be undone.`)) return;
     await csrfCookie();
-    const res = await fetch(`/api/media/${asset.id}`, {
+    const res = await fetch(`/api/v1/media/${asset.id}`, {
         method: 'DELETE', credentials: 'include',
         headers: { 'Accept': 'application/json', 'X-XSRF-TOKEN': xsrfToken() },
     });
diff --git a/resources/js/Pages/Settings/Locales.vue b/resources/js/Pages/Settings/Locales.vue
index 003af30..d8d7f1b 100644
--- a/resources/js/Pages/Settings/Locales.vue
+++ b/resources/js/Pages/Settings/Locales.vue
@@ -29,23 +29,63 @@ function openAddModal() {
 }
 function selectLocale(s) { addingLocale.value = s; }
 
-function confirmAdd() {
+function xsrfToken() {
+    return decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '');
+}
+
+function authHeaders(withBody = false) {
+    const headers = {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-XSRF-TOKEN': xsrfToken(),
+    };
+    if (withBody) headers['Content-Type'] = 'application/json';
+    return headers;
+}
+
+async function confirmAdd() {
     if (!addingLocale.value) return;
     adding.value = true;
-    router.post("/api/v1/locales", {
-        locale: addingLocale.value.code,
-        label:  addingLocale.value.label,
-    }, {
-        onFinish: () => { adding.value = false; showAddModal.value = false; },
-        preserveScroll: true,
-    });
+    try {
+        const res = await fetch("/api/v1/locales", {
+            method: 'POST',
+            credentials: 'include',
+            headers: authHeaders(true),
+            body: JSON.stringify({
+                locale: addingLocale.value.code,
+                label:  addingLocale.value.label,
+            }),
+        });
+        if (res.ok) {
+            showAddModal.value = false;
+            router.reload({ only: ['locales'] });
+        } else {
+            const data = await res.json().catch(() => ({}));
+            console.error('Failed to add locale:', data);
+        }
+    } finally {
+        adding.value = false;
+    }
 }
 
-function toggleActive(locale) {
-    router.patch("/api/v1/locales/" + locale.id, { is_active: !locale.is_active }, { preserveScroll: true });
+async function toggleActive(locale) {
+    const res = await fetch("/api/v1/locales/" + locale.id, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: authHeaders(true),
+        body: JSON.stringify({ is_active: !locale.is_active }),
+    });
+    if (res.ok) router.reload({ only: ['locales'] });
 }
-function setDefault(locale) {
-    router.patch("/api/v1/locales/" + locale.id, { is_default: true }, { preserveScroll: true });
+
+async function setDefault(locale) {
+    const res = await fetch("/api/v1/locales/" + locale.id, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: authHeaders(true),
+        body: JSON.stringify({ is_default: true }),
+    });
+    if (res.ok) router.reload({ only: ['locales'] });
 }
 
 const dragging     = ref(null);
@@ -58,29 +98,45 @@ function onDragStart(i) { dragging.value = i; }
 function onDragOver(i)  { dragOver.value  = i; }
 function onDragEnd()    { dragging.value  = null; dragOver.value = null; }
 
-function onDrop(index) {
+async function onDrop(index) {
     if (dragging.value === null || dragging.value === index) return;
     const arr = [...localLocales.value];
     const [moved] = arr.splice(dragging.value, 1);
     arr.splice(index, 0, moved);
     localLocales.value = arr;
     dragging.value = null; dragOver.value = null;
-    router.patch("/api/v1/locales/reorder", {
-        order: arr.map((l, i) => ({ id: l.id, sort_order: i + 1 })),
-    }, { preserveScroll: true });
+    const res = await fetch("/api/v1/locales/reorder", {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: authHeaders(true),
+        body: JSON.stringify({
+            order: arr.map((l, i) => ({ id: l.id, sort_order: i + 1 })),
+        }),
+    });
+    if (res.ok) router.reload({ only: ['locales'] });
 }
 
 const deleteError = ref(null);
 const deleting    = ref(null);
 
-function deleteLocale(locale) {
+async function deleteLocale(locale) {
     if (!confirm("Delete " + locale.label + " locale? This cannot be undone.")) return;
     deleting.value = locale.id;
-    router.delete("/api/v1/locales/" + locale.id, {
-        onError:  (e) => { deleteError.value = e.locale ?? "Cannot delete: content may exist in this locale."; },
-        onFinish: () => { deleting.value = null; },
-        preserveScroll: true,
-    });
+    try {
+        const res = await fetch("/api/v1/locales/" + locale.id, {
+            method: 'DELETE',
+            credentials: 'include',
+            headers: authHeaders(),
+        });
+        if (res.ok) {
+            router.reload({ only: ['locales'] });
+        } else {
+            const data = await res.json().catch(() => ({}));
+            deleteError.value = data.message ?? data.locale ?? "Cannot delete: content may exist in this locale.";
+        }
+    } finally {
+        deleting.value = null;
+    }
 }
 </script>