Make the web app explicitly show when it is running on mock fallback data

[diogobaltazar]

Summary

Make the web app explicitly show when it is running on mock fallback data.

This is a small frontend/product-quality issue. The app initializes from DEFAULT_GRAPH, which is useful for local development, but if the real API request fails the screen can still look “successful” because the user keeps seeing the mock graph. For a hiring exercise, that is a confusing default.

Current State

Relevant files:

• src/move37/web/src/App.jsx
• src/move37/web/src/mockData.js
• src/move37/web/src/App.css

Today:

• the UI starts with DEFAULT_GRAPH
• useActivityGraph(...) exposes error, loading, and reload
• the app shows a loading banner while the first request is in flight
• if the API request fails, the mock graph remains visible but there is no explicit “you are seeing fallback data” message tied to apiError

Scope

Keep the mock fallback behavior, but make it obvious to the user when fallback data is being shown because the API could not be loaded.

Acceptance Criteria

• If the initial API load fails and the UI is still showing DEFAULT_GRAPH-backed state, display a visible banner or status message explaining that the graph is fallback/mock data.
• Include a retry control wired to the existing reloadGraph action.
• Keep the existing loading banner behavior while the first API request is still pending.
• Do not remove DEFAULT_GRAPH from the app in this issue.
• Keep the visual change intentionally small; this is not a full design pass.

Non-Goals

• Do not redesign the whole top bar or layout.
• Do not replace mock fallback mode with a blank screen.
• Do not add a new state management library.

Validation

Run:

cd src/move37/web
npm run build

If you can, also include a brief manual verification note in the PR describing how you simulated the failed API load.