# Vue Cockpit v1.1: Preview/Confirm, Drawers, Roadmap, Push Verification

Use this reference when extending the FinanceManager FastAPI + Vue User Mode beyond the initial read-only vertical slice into a usable local cockpit.

## Scope pattern

- Keep normal Vue render local-only: it may auto-load FastAPI/runtime DTOs, but must not call OpenFIGI/FMP/CoinGecko/other providers on render.
- Put provider lookup, price refresh, report refresh and writes behind explicit user actions only.
- User Mode may include roadmap links for future modules, but future modules must be visibly marked `später`/disabled unless implemented.
- Add-position workflows should be Preview → Review → Confirm → Audit, not direct writes from a first form submit.
- Detail drawers should hide raw technical IDs in normal labels but may use IDs internally for API routes.

## Backend implementation checklist

- Add a dedicated positions router for manual-entry preview/confirm and position details rather than overloading list endpoints.
- Keep CORS methods in sync with actual UI behavior; if Vue confirms writes, allow `POST` as well as `GET`.
- API detail endpoints for Equity/Cash/Crypto should return:
  - user-facing status explanation
  - available actions, with disabled reasons where applicable
  - local price/history points for sparklines
  - read-only note / audit semantics
- When list summaries derive display IDs differently from ledger IDs, detail endpoints must either use the exact list `position_id` or have a safe fallback lookup. Browser sanity should click a real row and verify the drawer opens.
- In tests using in-memory SQLite via FastAPI `TestClient`, use `check_same_thread=False` and seed through the same injected connection.

## Frontend implementation checklist

- Add small API modules (`positions.ts`, `equity.ts`, `cash.ts`, etc.) and keep provider keys out of frontend types/env.
- Add a compact local-data status strip: FastAPI connected, runtime DB available, external providers on render = no, last local load time.
- KPI cards should not imply precise valuation when data is incomplete; show counts/quality flags beside values.
- Row-click drawers should show status explanation, action buttons, and a sparkline/empty-history state.
- Add wizard should expose account/wallet/currency/search/quantity/date/type/cost basis/note; confirm stays disabled until preview is successful.
- Roadmap navigation can route to a generic `RoadmapPage` with clear `später` wording instead of dead links.

## Verification checklist

Run and keep outputs concise:

```bash
python -m compileall -q src tests
pytest -q
cd frontend && npm run test && npm run build
```

Then from the repo root:

```bash
git diff --check
# scan changed source and frontend/dist for literal secret values / VITE provider leakage
```

Browser sanity:

1. Start/restart the FastAPI server from the current checkout; kill any stale uvicorn on the same port first.
2. Start/reuse the Vue dev server.
3. Visit `/positions/add`: verify wizard, Preview text, roadmap nav, and “Provider beim Rendern: nein”.
4. Visit `/equity`: click a real row and verify the detail drawer opens; if it does not, check stale backend process first, then route/list-ID mismatch.
5. Fetch `/openapi.json` and verify new endpoints are registered when route behavior seems stale.

## Git/GitHub push discipline

- Do not treat a successful push as fully verified until local `HEAD` equals remote `refs/heads/main`.
- If anonymous `git ls-remote` fails for the private repo, use the FinanceManager runtime GitHub token through a temporary `GIT_ASKPASS` helper; never write a token-bearing remote and never print the token.
- Verify:

```bash
local_hash=$(git rev-parse HEAD)
remote_hash=$(GIT_ASKPASS="$ASKPASS" GITHUB_TOKEN="$TOKEN" git ls-remote origin refs/heads/main | awk '{print $1}')
test "$local_hash" = "$remote_hash"
```

## Pitfalls captured

- Stale uvicorn/node processes can make browser/OpenAPI sanity appear to fail even after tests pass. Check the listening process and restart from the current checkout before debugging code.
- A monorepo root may not have `package.json`; run frontend commands from `frontend/`.
- Secret scans over the entire historical source tree may intentionally find safe secret-variable names used in provider code/tests. For final gates, scan changed files and build artifacts for literal token values, token prefixes, and frontend `VITE_*` leakage.
- Browser click sanity can fail silently if the frontend list uses a display slug while the backend detail endpoint expects the true ledger `position_id`; tests should seed and click using realistic IDs.