# FinanceManager Vue vs Streamlit runtime boundary

Use this when starting or debugging the user's finance dashboard.

## Durable lesson

FinanceManager contains multiple dashboard entrypoints. The modern finance frontend with Budgetverwaltung, SQLite-backed runtime data, portfolio pages, stocks/ETFs, TrueWealth roboadvisor, cash, budget review/imports, and command center is the **Vue/PrimeVue frontend**, not the older Streamlit dashboard.

If the user says the dashboard looks like an old state or pre-Phase UI, first verify which frontend is actually being served before changing application code.

## Correct runtime pattern

- Vue frontend lives under `FinanceManager/frontend`.
- Finance API runs separately, typically FastAPI on an internal/local port.
- Vue should reach the API through same-origin `/api/...` proxy in Tailnet deployments rather than hard-coded `127.0.0.1` visible to the user's browser.
- The Tailscale URL should point to the Vite/Vue server port, not the Streamlit port.

## Debug checklist

1. Check running processes and ports: identify whether Streamlit, Vite, or FastAPI is bound to the advertised port.
2. Stop stale/incorrect Streamlit processes if the user expects the Vue dashboard.
3. Start the FastAPI backend on an internal port.
4. Start the Vue/Vite frontend bound to `0.0.0.0` for Tailnet access.
5. Configure the Vite proxy/API base so `/api` routes reach the backend from the server side.
6. Browser-smoke the Tailnet URL and verify the visible UI includes the modern modules, not Streamlit.
7. Check browser console/network errors before telling the user it works.

## Pitfall

Do not treat a `200 OK` from the dashboard port as proof the correct frontend is running. A stale Streamlit app can return 200 and still be the wrong UI. Verify page identity and route-level content.