Update Dockerfile and client files for Home Assistant Ingress compatibility

- Added ENV variable `VITE_BASE` in Dockerfile to set relative base for asset loading.
- Updated asset links in `client/index.html` to use relative paths.
- Modified `vite.config.ts` to handle relative base for Home Assistant Ingress.
- Refactored asset URL handling in `App.tsx`, `UserGuideModal.tsx`, and `api.ts` to utilize new utility functions for public asset URLs.
- Adjusted socket connection path in `useSocket.ts` to ensure compatibility with the new base URL structure.

Author: yohaybn

Dockerfile

@@ -45,6 +45,8 @@ ARG BUILD_VERSION=1.0.2
 ARG VITE_APP_BUILD_VERSION=
 ARG VITE_INSTALL_KIND=docker
 ENV VITE_INSTALL_KIND=docker
+# Relative Vite base so JS/CSS load under Home Assistant Ingress (/hassio/ingress/<slug>/), not from site root.
+ENV VITE_BASE=./
 RUN export VITE_APP_BUILD_VERSION="${VITE_APP_BUILD_VERSION:-$BUILD_VERSION}" \
     && npm run build -w client
 RUN npm run build -w server

client/index.html

@@ -5,11 +5,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#1e4d5e" />
-    <link rel="icon" href="/favicon.ico" sizes="any" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="mask-icon" href="/mask-icon.svg" color="#1e4d5e" />
+    <link rel="icon" href="./favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
+    <link rel="mask-icon" href="./mask-icon.svg" color="#1e4d5e" />
     <title>Financial Overview</title>
 </head>
 

client/src/App.tsx

@@ -30,6 +30,7 @@ import { usePersonaSetupWizardVisibility } from './hooks/usePersonaSetupWizardVi
 import { transactionsForReviewItems, transactionNeedsReview, type TransactionReviewItem } from '@app/shared';
 import { useEnvConfig } from './hooks/useConfig';
 import { isGeminiApiKeyConfigured } from './utils/geminiKeyConfigured';
+import { publicAssetUrl } from './utils/publicBase';
 
 function consumeSessionConfigTab(): string | null {
     try {
@@ -286,7 +287,7 @@ function App() {
                                     )}
                                     <button
                                         type="button"
-                                        onClick={() => window.open(`${import.meta.env.BASE_URL}GUIDE.html`, '_blank')}
+                                        onClick={() => window.open(publicAssetUrl('GUIDE.html'), '_blank')}
                                         className="h-9 w-9 inline-flex items-center justify-center rounded-full text-gray-500 hover:text-emerald-800 hover:bg-emerald-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
                                         title={t('common.help_docs', 'Help Docs')}
                                         aria-label={t('common.help_docs', 'Help Docs')}

client/src/components/UserGuideModal.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { publicAssetUrl } from '../utils/publicBase';
 
 interface UserGuideModalProps {
     isOpen: boolean;
@@ -318,7 +319,7 @@ export function UserGuideModal({ isOpen, onClose }: UserGuideModalProps) {
                 {/* Footer Buttons */}
                 <div className="bg-gray-50 border-t border-gray-200 p-4 flex justify-between gap-3">
                     <a
-                        href={`${import.meta.env.BASE_URL}GUIDE.html`}
+                        href={publicAssetUrl('GUIDE.html')}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"

client/src/hooks/useSocket.ts

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback } from 'react';
 import { io, Socket } from 'socket.io-client';
 import type { TransactionReviewItem } from '@app/shared';
 import { api } from '../lib/api';
+import { getSocketIoPath } from '../utils/publicBase';
 import { isDemoMode } from '../demo/isDemo';
 
 export interface ScrapeProgress {
@@ -31,8 +32,6 @@ export interface TransactionReviewNeededEvent {
     items: TransactionReviewItem[];
 }
 
-const SOCKET_URL = '';
-
 export function useSocket() {
     const [socket, setSocket] = useState<Socket | null>(null);
     const [isConnected, setIsConnected] = useState(false);
@@ -63,7 +62,8 @@ export function useSocket() {
 
     useEffect(() => {
         if (isDemoMode()) return;
-        const socketInstance = io(SOCKET_URL, {
+        const socketInstance = io('', {
+            path: getSocketIoPath(),
             transports: ['websocket', 'polling'],
         }) as any;
 

client/src/lib/api.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { getResolvedPublicBase } from '../utils/publicBase';
 
 /**
  * Root URL for the REST API (no trailing slash). In production, respects Vite `BASE_URL` (GitHub Pages project sites).
@@ -14,7 +15,7 @@ export function getApiRoot(): string {
 
 /** Google OAuth redirect URI shown in UI and used with the real backend. */
 export function getGoogleOAuthCallbackUrl(): string {
-    return new URL('api/auth/google/callback', window.location.origin + import.meta.env.BASE_URL).href;
+    return new URL('api/auth/google/callback', getResolvedPublicBase()).href;
 }
 
 const getAxiosBaseUrl = () => getApiRoot();

client/src/main.tsx

@@ -8,15 +8,15 @@ import { OnboardingProvider } from './contexts/OnboardingContext';
 import { GettingStartedProvider } from './contexts/GettingStartedContext';
 import { ServerActivityProvider } from './contexts/ServerActivityContext';
 import { isDemoMode } from './demo/isDemo';
+import { getResolvedPublicBase } from './utils/publicBase';
 
 async function bootstrap() {
     if (isDemoMode()) {
         const { worker } = await import('./demo/browser');
         await worker.start({
             onUnhandledRequest: 'bypass',
             serviceWorker: {
-                // BASE_URL is a path (/ or /repo/); URL() needs an absolute base.
-                url: new URL('mockServiceWorker.js', `${window.location.origin}${import.meta.env.BASE_URL}`).href,
+                url: new URL('mockServiceWorker.js', getResolvedPublicBase()).href,
             },
         });
     }

client/src/utils/publicBase.ts

@@ -0,0 +1,48 @@
+/**
+ * Vite `base: './'` is used for Home Assistant Ingress (and other subpath hosts) so asset URLs are
+ * relative to the page. Helpers here resolve same-origin links that would break if built with `base: '/'`.
+ */
+
+export function isIngressRelativeBase(): boolean {
+    const b = import.meta.env.BASE_URL;
+    return b === './' || b.startsWith('./');
+}
+
+/** Directory URL (with trailing slash) for resolving static files and API roots in the browser. */
+export function getResolvedPublicBase(): string {
+    const base = import.meta.env.BASE_URL;
+    if (import.meta.env.DEV) {
+        return `${window.location.origin}/`;
+    }
+    if (base === '/' || base === '') {
+        return `${window.location.origin}/`;
+    }
+    if (isIngressRelativeBase()) {
+        try {
+            const resolved = new URL(base, window.location.href).href;
+            return resolved.endsWith('/') ? resolved : `${resolved}/`;
+        } catch {
+            return `${window.location.origin}/`;
+        }
+    }
+    const path = base.endsWith('/') ? base : `${base}/`;
+    return `${window.location.origin}${path}`;
+}
+
+export function publicAssetUrl(relativePath: string): string {
+    const rel = relativePath.replace(/^\//, '');
+    return new URL(rel, getResolvedPublicBase()).href;
+}
+
+/** Socket.IO `path` option: must include HA Ingress prefix when the UI is not at domain root. */
+export function getSocketIoPath(): string {
+    if (import.meta.env.DEV) return '/socket.io';
+    const base = import.meta.env.BASE_URL;
+    if (base === '/' || base === '') return '/socket.io';
+    if (isIngressRelativeBase()) {
+        const p = window.location.pathname.replace(/\/+$/, '');
+        return p ? `${p}/socket.io` : '/socket.io';
+    }
+    const normalized = base.endsWith('/') ? base.slice(0, -1) : base;
+    return `${normalized}/socket.io`;
+}

client/vite.config.ts

@@ -6,6 +6,8 @@ import path from 'path'
 
 function normalizeBase(raw: string): string {
     if (!raw || raw === '/') return '/'
+    // Home Assistant Ingress: relative base so built assets load under /hassio/ingress/<slug>/...
+    if (raw === '.' || raw === './') return './'
     return raw.endsWith('/') ? raw : `${raw}/`
 }