From 19f331741c7bef1fc1142a46073880c80a7bd34a Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 13 Jun 2026 17:41:48 -0300
Subject: [PATCH] Use Inertia's useHttp for automation JSON calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The test-run and invocation-detail requests used raw fetch with a hand-rolled
CSRF header. Switch to Inertia v3's useHttp (the standalone XHR client already
used across the app), which handles CSRF, headers and error payloads — dropping
the manual plumbing and reading the 422 message from error.response.data.
---
 .../components/automations/TestRunPanel.vue   | 32 ++++++-------------
 .../js/pages/automations/Invocations.vue      | 15 +++------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/automations/TestRunPanel.vue b/resources/js/components/automations/TestRunPanel.vue
index 1b9ad3b0..0f797768 100644
--- a/resources/js/components/automations/TestRunPanel.vue
+++ b/resources/js/components/automations/TestRunPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useHttp } from '@inertiajs/vue3';
 import { IconAlertCircle, IconChevronRight, IconCircleCheck, IconCircleDot, IconInfoCircle, IconLoader2, IconPlayerPlay } from '@tabler/icons-vue';
 import { trans } from 'laravel-vue-i18n';
 import { ref } from 'vue';
@@ -42,13 +43,12 @@ const run = ref<Run | null>(null);
 const nodeRuns = ref<NodeRun[]>([]);
 const activeRunId = ref<string | null>(null);
 
+const testHttp = useHttp<{ with_real_data: boolean }, { run_id: string }>({ with_real_data: false });
+const runHttp = useHttp<Record<string, never>, { run: Run; node_runs: NodeRun[] }>({});
+
 const fetchRun = async (runId: string): Promise<void> => {
     try {
-        const response = await fetch(showRunRoute.url({ automation: props.automationId, run: runId }), {
-            headers: { Accept: 'application/json' },
-        });
-        if (!response.ok) return;
-        const data = await response.json();
+        const data = await runHttp.get(showRunRoute.url({ automation: props.automationId, run: runId }));
         run.value = data.run;
         nodeRuns.value = data.node_runs;
     } catch {
@@ -79,25 +79,13 @@ const start = async () => {
     activeRunId.value = null;
 
     try {
-        const response = await fetch(testAutomation.url(props.automationId), {
-            method: 'POST',
-            headers: {
-                Accept: 'application/json',
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '',
-            },
-            body: JSON.stringify({ with_real_data: realData.value }),
-        });
-        if (!response.ok) {
-            const body = await response.json().catch(() => null);
-            throw new Error(body?.message ?? '');
-        }
-        const { run_id: runId } = await response.json();
+        testHttp.with_real_data = realData.value;
+        const { run_id: runId } = await testHttp.post(testAutomation.url(props.automationId));
         activeRunId.value = runId;
         await fetchRun(runId);
-    } catch (error) {
-        const message = error instanceof Error && error.message ? error.message : trans('automations.test.error_starting');
-        toast.error(message);
+    } catch (error: unknown) {
+        const message = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+        toast.error(message ?? trans('automations.test.error_starting'));
     } finally {
         isStarting.value = false;
     }
diff --git a/resources/js/pages/automations/Invocations.vue b/resources/js/pages/automations/Invocations.vue
index 928cb149..6d490373 100644
--- a/resources/js/pages/automations/Invocations.vue
+++ b/resources/js/pages/automations/Invocations.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { InfiniteScroll, router } from '@inertiajs/vue3';
+import { InfiniteScroll, router, useHttp } from '@inertiajs/vue3';
 import { IconChevronRight, IconCopy, IconRefresh } from '@tabler/icons-vue';
 import { trans, transChoice } from 'laravel-vue-i18n';
 import { computed, ref, watch } from 'vue';
@@ -152,22 +152,15 @@ const expanded = ref<Record<string, boolean>>({});
 const nodeRuns = ref<Record<string, NodeRun[]>>({});
 const loadingRuns = ref<Record<string, boolean>>({});
 
+const runHttp = useHttp<Record<string, never>, { node_runs: NodeRun[] }>({});
+
 const toggleExpand = async (invocation: Invocation) => {
     expanded.value[invocation.id] = !expanded.value[invocation.id];
 
     if (expanded.value[invocation.id] && !nodeRuns.value[invocation.id]) {
         loadingRuns.value[invocation.id] = true;
         try {
-            const response = await fetch(
-                showRunRoute.url({
-                    automation: props.automation.id,
-                    run: invocation.id,
-                }),
-                {
-                    headers: { Accept: 'application/json' },
-                },
-            );
-            const payload = await response.json();
+            const payload = await runHttp.get(showRunRoute.url({ automation: props.automation.id, run: invocation.id }));
             nodeRuns.value[invocation.id] = payload.node_runs ?? [];
         } catch {
             toast.error(trans('automations.invocations.load_error'));