Fixed paths

ui-svelte/src-renderer/lib/components/ui-compound/ServerStats.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // Moved from +page.svelte: checkServerStatus function
+  export async function checkServerStatus(): Promise<boolean> {
+    try {
+      const config = window.electron.getConfig();
+      console.log("Server config:", config);
+      const port = config.GOOSE_PORT;
+      if (!port) {
+        console.error("No port found in config");
+        throw new Error("Server port not found in config");
+      }
+      console.log(`Checking server status at port ${port}`);
+      const response = await fetch(`http://127.0.0.1:${port}/status`);
+      if (response.ok) {
+        console.log("Server responded successfully");
+        return true;
+      }
+      console.log("Server response not OK:", response.status);
+    } catch (e) {
+      console.error("Server check failed:", e);
+      return false;
+    }
+    return false;
+  }
+
+  let serverStarted = false;
+  let isLoading = true;
+  let progress = 0;
+  let error: string | null = null;
+
+  // Automatically check server status when component mounts
+  onMount(async () => {
+    const maxAttempts = 20;
+    for (let attempts = 0; attempts < maxAttempts; attempts++) {
+      progress = Math.floor((attempts / maxAttempts) * 100);
+      if (await checkServerStatus()) {
+        serverStarted = true;
+        progress = 100;
+        break;
+      }
+      await new Promise(r => setTimeout(r, 500));
+    }
+    if (!serverStarted) {
+      error = "Server failed to start";
+    }
+    isLoading = false;
+  });
+</script>
+
+<div class="server-stats-modal">
+  {#if isLoading}
+    <p>Loading server stats... {progress}%</p>
+  {:else if error}
+    <p class="error">{error}</p>
+  {:else if serverStarted}
+    <p class="success">Server started successfully!</p>
+  {/if}
+</div>
+
+<style>
+  .server-stats-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--background, #fff);
+    padding: 1rem;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 8px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+  }
+  .error {
+    color: var(--destructive, red);
+  }
+  .success {
+    color: var(--success, green);
+  }
+</style>

ui-svelte/src-renderer/routes/+page.svelte

@@ -2,88 +2,18 @@
   import { goto } from "$app/navigation";
   import GooseLogo from "$lib/components/ui-compound/GooseLogo.svelte";
   import { Button } from "$lib/components/ui-shadcn/button/index.js";
-  import { Progress } from "$lib/components/ui-shadcn/progress/index.js";
-
-  let isLoading = $state(true);
-  let progress = $state(0);
-  let serverStarted = $state(false);
-  let error = $state<string | null>(null);
-
-  async function checkServerStatus() {
-    try {
-      const config = window.electron.getConfig();
-      console.log("Server config:", config);
-      const port = config.GOOSE_PORT;
-
-      if (!port) {
-        console.error("No port found in config");
-        throw new Error("Server port not found in config");
-      }
-
-      console.log(`Checking server status at port ${port}`);
-      const response = await fetch(`http://127.0.0.1:${port}/status`);
-      if (response.ok) {
-        console.log("Server responded successfully");
-        serverStarted = true;
-        return true;
-      }
-      console.log("Server response not OK:", response.status);
-    } catch (e) {
-      console.error("Server check failed:", e);
-      return false;
-    }
-    return false;
-  }
-
-  async function waitForServer() {
-    let attempts = 0;
-    const maxAttempts = 20; // 10 seconds total (20 * 500ms)
-
-    while (attempts < maxAttempts) {
-      progress = (attempts / maxAttempts) * 100;
-
-      if (await checkServerStatus()) {
-        progress = 100;
-        return true;
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      attempts++;
-    }
-
-    error = "Server failed to start";
-    return false;
-  }
-
-  $effect(() => {
-    waitForServer().finally(() => {
-      isLoading = false;
-    });
-  });
+  import ServerStats from "$lib/components/ui-compound/ServerStats.svelte";
 </script>
 
 <main
   class="h-screen bg-background text-foreground flex flex-col items-center justify-center gap-8 p-8"
 >
   <div class="relative">
     <GooseLogo size="default" class="w-32 h-32" />
-    {#if isLoading}
-      <div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2">
-        <Progress value={progress} class="w-48" />
-      </div>
-    {/if}
+    <ServerStats />
   </div>
 
   <div class="text-center space-y-4">
-    {#if error}
-      <p class="text-destructive">{error}</p>
-    {:else if isLoading}
-      <p class="text-muted-foreground">Starting Goose server...</p>
-    {:else if serverStarted}
-      <div class="space-y-2">
-        <p class="text-green-500">Server started successfully!</p>
-        <Button onclick={() => goto("/welcome")}>Continue</Button>
-      </div>
-    {/if}
+    <Button onclick={() => goto("/welcome")}>Continue</Button>
   </div>
 </main>

ui-svelte/src-renderer/routes/start/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import "$lib/styles/app.css";
-  import Devtools from "$lib/components/Devtools.svelte";
+  import Devtools from "$lib/components/ui-basic/Devtools.svelte";
   import { preferredTheme } from "$lib/preferredTheme.svelte";
 
   let { children } = $props();

ui-svelte/src-renderer/routes/start/+page.svelte

@@ -4,7 +4,7 @@
   import typescriptLogo from "$lib/assets/original_images/typescript.svg";
   import viteLogo from "$lib/assets/original_images/vite.svg";
   import tailwindcssLogo from "$lib/assets/original_images/tailwindcss.svg";
-  import Counter from "$lib/components/Counter.svelte";
+  import Counter from "$lib/components/ui-basic/Counter.svelte";
 </script>
 
 <div class="max-w-7xl mx-auto px-16 py-20">