Update AppImage

AppImage/components/hardware.tsx

@@ -188,7 +188,12 @@ export default function Hardware() {
 
     const fetchRealtimeData = async () => {
       try {
-        const apiUrl = `http://${window.location.hostname}:8008/api/gpu/${fullSlot}/realtime`
+        const { protocol, hostname, port } = window.location
+        const isStandardPort = port === "" || port === "80" || port === "443"
+
+        const apiUrl = isStandardPort
+          ? `/api/gpu/${fullSlot}/realtime`
+          : `${protocol}//${hostname}:8008/api/gpu/${fullSlot}/realtime`
 
         const response = await fetch(apiUrl, {
           method: "GET",

AppImage/components/metrics-dialog.tsx

@@ -118,8 +118,11 @@ export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps)
     setError(null)
 
     try {
-      const baseUrl =
+      const { protocol, hostname, port } = window.location
-        typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+      const isStandardPort = port === "" || port === "80" || port === "443"
+
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
+
       const apiUrl = `${baseUrl}/api/vms/${vmid}/metrics?timeframe=${timeframe}`
 
       const response = await fetch(apiUrl)

AppImage/components/network-traffic-chart.tsx

@@ -75,8 +75,10 @@ export function NetworkTrafficChart({
     setError(null)
 
     try {
-      const baseUrl =
+      const { protocol, hostname, port } = window.location
-        typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+      const isStandardPort = port === "" || port === "80" || port === "443"
+
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
 
       const apiUrl = interfaceName
         ? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}`

AppImage/components/node-metrics-charts.tsx

@@ -86,8 +86,11 @@ export function NodeMetricsCharts() {
     setError(null)
 
     try {
-      const baseUrl =
+      const { protocol, hostname, port } = window.location
-        typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+      const isStandardPort = port === "" || port === "80" || port === "443"
+
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
+
       const apiUrl = `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
 
       console.log("[v0] Fetching node metrics from:", apiUrl)

AppImage/components/proxmox-dashboard.tsx

@@ -11,6 +11,7 @@ import { VirtualMachines } from "./virtual-machines"
 import Hardware from "./hardware"
 import { SystemLogs } from "./system-logs"
 import { OnboardingCarousel } from "./onboarding-carousel"
+import { getApiUrl } from "../lib/api-config"
 import {
   RefreshCw,
   AlertTriangle,
@@ -67,8 +68,7 @@ export function ProxmoxDashboard() {
     console.log("[v0] Fetching system data from Flask server...")
     console.log("[v0] Current window location:", window.location.href)
 
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/system")
-    const apiUrl = `${baseUrl}/api/system`
 
     console.log("[v0] API URL:", apiUrl)
 
@@ -235,13 +235,8 @@ export function ProxmoxDashboard() {
               <p>• The ProxMenux server should start automatically on port 8008</p>
               <p>
                 • Try accessing:{" "}
-                <a
+                <a href={getApiUrl("/api/health")} target="_blank" rel="noopener noreferrer" className="underline">
-                  href={`http://${typeof window !== "undefined" ? window.location.host : "localhost:8008"}/api/health`}
+                  {getApiUrl("/api/health")}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                >
-                  http://{typeof window !== "undefined" ? window.location.host : "localhost:8008"}/api/health
                 </a>
               </p>
             </div>

AppImage/components/system-logs.tsx

@@ -125,7 +125,14 @@ export function SystemLogs() {
 
   const getApiUrl = (endpoint: string) => {
     if (typeof window !== "undefined") {
-      return `${window.location.protocol}//${window.location.hostname}:8008${endpoint}`
+      const { protocol, hostname, port } = window.location
+      const isStandardPort = port === "" || port === "80" || port === "443"
+
+      if (isStandardPort) {
+        return endpoint
+      } else {
+        return `${protocol}//${hostname}:8008${endpoint}`
+      }
     }
     return `http://localhost:8008${endpoint}`
   }

AppImage/components/system-overview.tsx

@@ -8,6 +8,7 @@ import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Net
 import { NodeMetricsCharts } from "./node-metrics-charts"
 import { NetworkTrafficChart } from "./network-traffic-chart"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { getApiUrl } from "../lib/api-config"
 
 interface SystemData {
   cpu_usage: number
@@ -97,8 +98,7 @@ interface ProxmoxStorageData {
 
 const fetchSystemData = async (): Promise<SystemData | null> => {
   try {
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/system")
-    const apiUrl = `${baseUrl}/api/system`
 
     const response = await fetch(apiUrl, {
       method: "GET",
@@ -122,8 +122,7 @@ const fetchSystemData = async (): Promise<SystemData | null> => {
 
 const fetchVMData = async (): Promise<VMData[]> => {
   try {
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/vms")
-    const apiUrl = `${baseUrl}/api/vms`
 
     const response = await fetch(apiUrl, {
       method: "GET",
@@ -147,8 +146,7 @@ const fetchVMData = async (): Promise<VMData[]> => {
 
 const fetchStorageData = async (): Promise<StorageData | null> => {
   try {
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/storage/summary")
-    const apiUrl = `${baseUrl}/api/storage/summary`
 
     const response = await fetch(apiUrl, {
       method: "GET",
@@ -173,8 +171,7 @@ const fetchStorageData = async (): Promise<StorageData | null> => {
 
 const fetchNetworkData = async (): Promise<NetworkData | null> => {
   try {
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/network/summary")
-    const apiUrl = `${baseUrl}/api/network/summary`
 
     const response = await fetch(apiUrl, {
       method: "GET",
@@ -199,8 +196,7 @@ const fetchNetworkData = async (): Promise<NetworkData | null> => {
 
 const fetchProxmoxStorageData = async (): Promise<ProxmoxStorageData | null> => {
   try {
-    const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
+    const apiUrl = getApiUrl("/api/proxmox-storage")
-    const apiUrl = `${baseUrl}/api/proxmox-storage`
 
     const response = await fetch(apiUrl, {
       method: "GET",

AppImage/lib/api-config.ts

@@ -0,0 +1,71 @@
+/**
+ * API Configuration for ProxMenux Monitor
+ * Handles API URL generation with automatic proxy detection
+ */
+
+/**
+ * Gets the base URL for API calls
+ * Automatically detects if running behind a proxy by checking if we're on a standard port
+ *
+ * @returns Base URL for API endpoints
+ */
+export function getApiBaseUrl(): string {
+  if (typeof window === "undefined") {
+    return ""
+  }
+
+  const { protocol, hostname, port } = window.location
+
+  // If accessing via standard ports (80/443) or no port, assume we're behind a proxy
+  // In this case, use relative URLs so the proxy handles routing
+  const isStandardPort = port === "" || port === "80" || port === "443"
+
+  if (isStandardPort) {
+    // Behind a proxy - use relative URL
+    return ""
+  } else {
+    // Direct access - use explicit port 8008
+    return `${protocol}//${hostname}:8008`
+  }
+}
+
+/**
+ * Constructs a full API URL
+ *
+ * @param endpoint - API endpoint path (e.g., '/api/system')
+ * @returns Full API URL
+ */
+export function getApiUrl(endpoint: string): string {
+  const baseUrl = getApiBaseUrl()
+
+  // Ensure endpoint starts with /
+  const normalizedEndpoint = endpoint.startsWith("/") ? endpoint : `/${endpoint}`
+
+  return `${baseUrl}${normalizedEndpoint}`
+}
+
+/**
+ * Fetches data from an API endpoint with error handling
+ *
+ * @param endpoint - API endpoint path
+ * @param options - Fetch options
+ * @returns Promise with the response data
+ */
+export async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const url = getApiUrl(endpoint)
+
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+    cache: "no-store",
+  })
+
+  if (!response.ok) {
+    throw new Error(`API request failed: ${response.status} ${response.statusText}`)
+  }
+
+  return response.json()
+}