ServerStats

Acumen-Desktop · Feb 10, 2025 · 43860ba · 43860ba
1 parent 3925ae2
commit 43860ba
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 20 deletions.
diff --git a/acumen/features/svelte-electron-ui/re-create_React_Routes.md b/acumen/features/svelte-electron-ui/re-create_React_Routes.md
@@ -30,18 +30,19 @@ src/routes/
 
 # Terminal Commands
 Run these commands to create the SvelteKit route structure (you can copy/paste all lines at once):
+
 ```bash
-mkdir -p src/routes/chat/[id]
-touch src/routes/chat/[id]/+page.svelte
-mkdir -p src/routes/settings
-touch src/routes/settings/+page.svelte
-mkdir -p src/routes/settings/more-models
-touch src/routes/settings/more-models/+page.svelte
-mkdir -p src/routes/settings/configure-providers
-touch src/routes/settings/configure-providers/+page.svelte
-mkdir -p src/routes/welcome
-touch src/routes/welcome/+page.svelte
-touch src/routes/+layout.svelte
+mkdir -p ui-svelte/src-renderer/routes/chat/[id]
+touch ui-svelte/src-renderer/routes/chat/[id]/+page.svelte
+mkdir -p ui-svelte/src-renderer/routes/settings
+touch ui-svelte/src-renderer/routes/settings/+page.svelte
+mkdir -p ui-svelte/src-renderer/routes/settings/more-models
+touch ui-svelte/src-renderer/routes/settings/more-models/+page.svelte
+mkdir -p ui-svelte/src-renderer/routes/settings/configure-providers
+touch ui-svelte/src-renderer/routes/settings/configure-providers/+page.svelte
+mkdir -p ui-svelte/src-renderer/routes/welcome
+touch ui-svelte/src-renderer/routes/welcome/+page.svelte
+touch ui-svelte/src-renderer/routes/+layout.svelte
 ```
 
 Note: The root layout file (+layout.svelte) will handle the fallback redirect to '/chat/1' for unmatched routes.
diff --git a/ui-svelte/src-renderer/lib/components/ui-compound/ServerStats.svelte b/ui-svelte/src-renderer/lib/components/ui-compound/ServerStats.svelte
@@ -29,9 +29,11 @@
   let isLoading = true;
   let progress = 0;
   let error: string | null = null;
+  let config: any = null;
 
   // Automatically check server status when component mounts
   onMount(async () => {
+    config = window.electron.getConfig();
     const maxAttempts = 20;
     for (let attempts = 0; attempts < maxAttempts; attempts++) {
       progress = Math.floor((attempts / maxAttempts) * 100);
@@ -55,7 +57,30 @@
   {:else if error}
     <p class="error">{error}</p>
   {:else if serverStarted}
-    <p class="success">Server started successfully!</p>
+    <div class="stats-container">
+      <h3>Server Configuration</h3>
+      {#if config}
+        <div class="stat-grid">
+          <div class="stat-item">
+            <span class="label">API Host:</span>
+            <span class="value">{config.GOOSE_API_HOST}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">Port:</span>
+            <span class="value">{config.GOOSE_PORT}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">Working Directory:</span>
+            <span class="value">{config.GOOSE_WORKING_DIR}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">Type:</span>
+            <span class="value">{config.type}</span>
+          </div>
+        </div>
+      {/if}
+      <p class="success">Server started successfully!</p>
+    </div>
   {/if}
 </div>
 
@@ -66,16 +91,40 @@
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--background, #fff);
-    padding: 1rem;
+    padding: 1.5rem;
     border: 1px solid var(--border-color, #ddd);
     border-radius: 8px;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     z-index: 1000;
+    min-width: 300px;
   }
   .error {
     color: var(--destructive, red);
   }
   .success {
     color: var(--success, green);
+    margin-top: 1rem;
+  }
+  .stats-container h3 {
+    margin: 0 0 1rem 0;
+    color: var(--foreground);
+  }
+  .stat-grid {
+    display: grid;
+    gap: 0.5rem;
+  }
+  .stat-item {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    align-items: center;
+  }
+  .label {
+    color: var(--muted-foreground);
+    font-size: 0.9rem;
+  }
+  .value {
+    color: var(--foreground);
+    font-family: monospace;
+    word-break: break-all;
   }
 </style>
diff --git a/ui-svelte/src-renderer/routes/+page.svelte b/ui-svelte/src-renderer/routes/+page.svelte
@@ -6,14 +6,11 @@
 </script>
 
 <main
-  class="h-screen bg-background text-foreground flex flex-col items-center justify-center gap-8 p-8"
+  class="size-full bg-background text-foreground flex flex-col items-center pt-32 gap-8 justify-around"
 >
-  <div class="relative">
-    <GooseLogo size="default" class="w-32 h-32" />
+  <GooseLogo size="default" class="w-32 h-32" />
+  <div class="mb-8">
     <ServerStats />
   </div>
-
-  <div class="text-center space-y-4">
-    <Button onclick={() => goto("/welcome")}>Continue</Button>
-  </div>
+  <Button onclick={() => goto("/welcome")}>Continue</Button>
 </main>
diff --git a/ui-svelte/src-renderer/routes/welcome/+page.svelte b/ui-svelte/src-renderer/routes/welcome/+page.svelte
@@ -3,13 +3,20 @@
   import { Button } from "$lib/components/ui-shadcn/button";
   import GooseLogo from "$lib/components/ui-compound/GooseLogo.svelte";
   import ProviderGrid from "./ProviderGrid.svelte";
+  import { goto } from "$app/navigation";
+  import { ArrowLeft } from "lucide-svelte";
 
   let onSubmit = () => {
     // Will be implemented when we add the provider grid
   };
 </script>
 
 <div class="size-full select-none bg-background flex flex-col">
+  <div class="back-button">
+    <Button variant="ghost" onclick={() => goto("/")} aria-label="Back to Home">
+      <ArrowLeft size={24} />
+    </Button>
+  </div>
   <!-- Fixed Header -->
   <header class="flex-none px-8 py-6 md:px-16 border-b">
     <div class="flex items-center gap-4 max-w-4xl mx-auto">
@@ -72,3 +79,12 @@
     </div>
   </footer>
 </div>
+
+<style>
+  .back-button {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 100;
+  }
+</style>