Settings: split Test Connection into WooCommerce and Inference sections

frontend/src/create/settings/Settings.svelte

@@ -98,15 +98,29 @@
     saving = false;
   }
 
-  let testResult: { ok: boolean; detail: string } | null = null;
+  interface TestResult { ok: boolean; detail: string; busy?: boolean }
+  let wooTest: TestResult | null = null;
+  let inferenceTest: TestResult | null = null;
 
   async function testWoo() {
-    testResult = null;
+    wooTest = { ok: false, detail: 'Working…', busy: true };
     try {
       const res = await fetch('/api/v1/settings/test-woo', { method: 'POST' });
-      testResult = await res.json();
+      const body = await res.json();
+      wooTest = { ok: !!body.ok, detail: body.detail || (body.ok ? 'Connected & synced' : 'failed') };
     } catch {
-      testResult = { ok: false, detail: 'network error' };
+      wooTest = { ok: false, detail: 'network error' };
+    }
+  }
+
+  async function testInference() {
+    inferenceTest = { ok: false, detail: 'Working…', busy: true };
+    try {
+      const res = await fetch('/api/v1/admin/test-inference', { method: 'POST' });
+      const body = await res.json();
+      inferenceTest = { ok: !!body.ok, detail: body.detail || (body.ok ? 'reachable' : 'failed') };
+    } catch {
+      inferenceTest = { ok: false, detail: 'network error' };
     }
   }
 
@@ -177,13 +191,23 @@
     </div>
 
     <button on:click={save} disabled={saving}>Save Changes</button>
-    <button on:click={testWoo} disabled={saving}>Test Woo</button>
-    {#if testResult}
-      <p class="msg" class:ok={testResult.ok} class:err={!testResult.ok}>
-        {testResult.ok ? 'Connected & synced' : testResult.detail}
-      </p>
-    {/if}
     {#if message}<p class="msg">{message}</p>{/if}
+
+    <div class="section">
+      <h3>WooCommerce</h3>
+      <button on:click={testWoo} disabled={saving || wooTest?.busy}>Test WooCommerce connection</button>
+      {#if wooTest}
+        <p class="msg" class:ok={wooTest.ok} class:err={!wooTest.ok}>{wooTest.detail}</p>
+      {/if}
+    </div>
+
+    <div class="section">
+      <h3>Inference</h3>
+      <button on:click={testInference} disabled={saving || inferenceTest?.busy}>Test Inference connection</button>
+      {#if inferenceTest}
+        <p class="msg" class:ok={inferenceTest.ok} class:err={!inferenceTest.ok}>{inferenceTest.detail}</p>
+      {/if}
+    </div>
   {/if}
 </div>
 
@@ -193,4 +217,7 @@
   input, select, option { color: #eee; background: #1c1c1c; width: 100%; padding: 6px; }
   option { color: #eee; background: #1c1c1c; }
   button { margin-top: 16px; }
+  .section { margin-top: 20px; padding-top: 12px; border-top: 1px solid #333; }
+  .section h3 { margin: 0 0 8px; font-size: 1.05rem; color: #eee; }
+  .section button { margin-top: 4px; }
 </style>