Can now create instances

src/App.svelte

@@ -1,15 +1,21 @@
 <script>
   import { onMount } from 'svelte';
-  import { fetchInstances, toggleInstanceStatus } from './lib/api';
+  import { fetchInstances, toggleInstanceStatus, createInstance } from './lib/api';
   import InstanceList from './lib/components/InstanceList.svelte';
   import InstanceDetail from './lib/components/InstanceDetail.svelte';
 
   let instances = [];
   let connectionError = null;
   let processingTargets = {};
-  
   let activeFocusedInstance = null;
 
+  let showCreateForm = false;
+  let newName = '';
+  let newVersion = '1.22.3'; 
+  let newPort = '42420';
+  let isCreating = false;
+  let createError = null;
+
   async function syncTelemetry() {
     try {
       instances = await fetchInstances();
@@ -38,6 +44,27 @@
     }
   }
 
+  async function handleCreateServer() {
+    if (!newName.trim() || !newVersion.trim() || !newPort) {
+      createError = "All fields are required.";
+      return;
+    }
+
+    isCreating = true;
+    createError = null;
+
+    try {
+      await createInstance(newName.trim(), newVersion.trim(), newPort);
+      newName = '';
+      showCreateForm = false;
+      await syncTelemetry();
+    } catch (err) {
+      createError = err.message;
+    } finally {
+      isCreating = false;
+    }
+  }
+
   onMount(() => {
     syncTelemetry();
     const interval = setInterval(syncTelemetry, 4000);
@@ -52,13 +79,20 @@
       <h1 class="text-xl font-serif font-bold tracking-wide text-amber-100/90">VSSM Dashboard</h1>
       <p class="text-xs text-stone-400 mt-1">VintageStory Server Manager</p>
     </div>
-    {#if !activeFocusedInstance}
-      <button 
-        on:click={syncTelemetry}
-        class="border border-stone-600 bg-stone-800/60 hover:bg-stone-700 hover:text-amber-100 px-4 py-1.5 text-xs uppercase tracking-wider transition-colors cursor-pointer rounded shadow-sm">
-        Refresh Status
-      </button>
-    {/if}
+    <div class="flex gap-3">
+      {#if !activeFocusedInstance}
+        <button 
+          on:click={() => { showCreateForm = !showCreateForm; createError = null; }}
+          class="border border-amber-800 bg-amber-950/20 hover:bg-amber-900/30 text-amber-200 px-4 py-1.5 text-xs uppercase tracking-wider transition-colors cursor-pointer rounded shadow-sm">
+          {showCreateForm ? 'Cancel' : 'New Instance'}
+        </button>
+        <button 
+          on:click={syncTelemetry}
+          class="border border-stone-600 bg-stone-800/60 hover:bg-stone-700 hover:text-amber-100 px-4 py-1.5 text-xs uppercase tracking-wider transition-colors cursor-pointer rounded shadow-sm">
+          Refresh Status
+        </button>
+      {/if}
+    </div>
   </header>
 
   {#if connectionError}
@@ -68,6 +102,56 @@
     </div>
   {/if}
 
+  {#if showCreateForm && !activeFocusedInstance}
+    <div class="mb-6 p-4 border border-stone-700/60 bg-stone-900/80 rounded shadow-md backdrop-blur-sm animate-fade-in">
+      <h2 class="text-sm font-bold text-amber-200 uppercase tracking-wide mb-4">Setup New Server Instance</h2>
+      
+      {#if createError}
+        <div class="bg-red-900/20 border border-red-800/40 text-red-300 p-2.5 text-xs mb-4 rounded">
+          {createError}
+        </div>
+      {/if}
+
+      <form on:submit|preventDefault={handleCreateServer} class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Server Name</label>
+          <input 
+            type="text" 
+            bind:value={newName}
+            placeholder="e.g., survival-hub" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100" />
+        </div>
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Game Version</label>
+          <input 
+            type="text" 
+            bind:value={newVersion}
+            placeholder="e.g., 1.19.8" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100" />
+        </div>
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Network Port</label>
+          <input 
+            type="number" 
+            bind:value={newPort}
+            placeholder="42420" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100 font-mono" />
+        </div>
+        <div>
+          <button 
+            type="submit"
+            disabled={isCreating}
+            class="w-full border border-emerald-800 bg-emerald-950/30 hover:bg-emerald-900/40 text-emerald-200 font-bold py-2 text-xs uppercase rounded transition-colors disabled:opacity-50 cursor-pointer shadow-sm">
+            {isCreating ? 'Downloading & Creating...' : 'Create Instance'}
+          </button>
+        </div>
+      </form>
+    </div>
+  {/if}
+
   {#if activeFocusedInstance}
     <InstanceDetail 
       instance={activeFocusedInstance} 

src/lib/api.js

@@ -42,4 +42,15 @@ export async function fetchServerLogs(name) {
     throw new Error("Failed to sync engine logs");
   }
   return await res.json();
+}
+
+export async function createInstance(name, version, port) {
+  const res = await fetch(`${DAEMON_URL}/instances/create?name=${encodeURIComponent(name)}&version=${encodeURIComponent(version)}&port=${parseInt(port)}`, {
+    method: 'POST'
+  });
+  
+  if (!res.ok) {
+    const errText = await res.text();
+    throw new Error(errText || "Failed to create server instance");
+  }
 }