Fix usage of env variables and config

src/hooks.server.ts

@@ -10,15 +10,14 @@ import { env } from "$env/dynamic/private";
 import { oauth2ProviderManager } from "$lib/oauth/providerManager";
 import { SessionOAuthHelper } from "$lib/oauth/sessionHelper";
 import { resourceDocsCache } from "$lib/stores/resourceDocsCache";
-
 // Constants
 const DEFAULT_PORT = 3003;
 
 // Check if server is running on non-default port
 function checkServerPort() {
   // Check common port environment variables
   const envPort =
-    process.env.PORT || process.env.VITE_PORT || process.env.SERVER_PORT;
+    env.PORT || env.VITE_PORT || env.SERVER_PORT;
 
   if (envPort && parseInt(envPort) !== DEFAULT_PORT) {
     logger.warn(

src/lib/components/Navigation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
-  import { configHelpers } from "$lib/config";
+  import { env } from "$env/dynamic/public";
 
   // Props from layout with better typing
   let {
@@ -21,7 +21,18 @@
   // Reactive statements for better state management
   let isAuthenticated = $derived(!!user && !!authInfo?.authenticated);
   let userDisplayName = $derived(user?.username || user?.email || "User");
-  let obpInfo = $derived(configHelpers.getObpConnectionInfo());
+
+  // Configuration - extract display name from URL
+  function getDisplayName(url: string): string {
+    try {
+      const parsed = new URL(url);
+      return `${parsed.hostname}:${parsed.port || (parsed.protocol === 'https:' ? '443' : '80')}`;
+    } catch {
+      return url;
+    }
+  }
+
+  let obpDisplayName = $derived(getDisplayName(env.PUBLIC_OBP_BASE_URL || "http://127.0.0.1:8080"));
 
   let isMobileMenuOpen = $state(false);
   let openDropdown = $state<string | null>(null);
@@ -183,7 +194,7 @@
         <div class="user-info desktop-only">
           <div class="user-details">
             <span class="user-name">{userDisplayName}</span>
-            <span class="obp-host">→ {obpInfo.displayName}</span>
+            <span class="obp-host">→ {obpDisplayName}</span>
           </div>
         </div>
 
@@ -228,7 +239,7 @@
         <!-- User Info in Mobile -->
         <div class="mobile-user-info">
           <div class="mobile-user-name">{userDisplayName}</div>
-          <div class="mobile-obp-host">Connected to: {obpInfo.displayName}</div>
+          <div class="mobile-obp-host">Connected to: {obpDisplayName}</div>
         </div>
 
         <!-- Navigation Links -->

src/lib/components/ObpStatusIndicator.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
-  import { configHelpers } from "$lib/config";
+  import { env } from "$env/dynamic/public";
 
   // Props
   export let hasApiAccess: boolean = false;
   export let size: "small" | "medium" | "large" = "medium";
   export let showDetails: boolean = false;
   export let inline: boolean = false;
 
-  // Configuration
-  $: obpInfo = configHelpers.getObpConnectionInfo();
+  // Configuration - extract display name from URL
+  function getDisplayName(url: string): string {
+    try {
+      const parsed = new URL(url);
+      return `${parsed.hostname}:${parsed.port || (parsed.protocol === 'https:' ? '443' : '80')}`;
+    } catch {
+      return url;
+    }
+  }
+
+  $: displayName = getDisplayName(env.PUBLIC_OBP_BASE_URL || "http://127.0.0.1:8080");
   $: connectionStatus = hasApiAccess ? "connected" : "disconnected";
   $: statusColor = hasApiAccess ? "#10b981" : "#ef4444";
   $: statusIcon = hasApiAccess ? "🟢" : "🔴";
@@ -46,7 +55,7 @@
 <div
   class="status-indicator {currentSize.container}"
   class:inline={inline}
-  title="OBP Server: {obpInfo.displayName} - {statusText}"
+  title="OBP Server: {displayName} - {statusText}"
 >
   <!-- Status Dot with Animation -->
   <div
@@ -67,7 +76,7 @@
       <div class="status-details {currentSize.details}">
         <div class="detail-row">
           <span class="detail-label">Host:</span>
-          <span class="detail-value">{obpInfo.displayName}</span>
+          <span class="detail-value">{displayName}</span>
         </div>
         <div class="detail-row">
           <span class="detail-label">Status:</span>