---
description: "Use when editing the React frontend, polling hooks, SSE hooks, or display components under frontend/src. Covers data flow, backend assumptions, and styling boundaries."
name: "Frontend Data Flow"
applyTo:
  - "frontend/src/**/*.js"
  - "frontend/src/**/*.css"
---
# Frontend Data Flow

- Keep data fetching in hooks or small container components. `Path.js`, `Info.js`, `Log.js`, and `Options.js` wire backend data into display components; `usePolling.js` and `useSSE.js` own subscription cleanup.
- Preserve the current backend contract unless the task explicitly coordinates with backend changes. The frontend is hardcoded to `http://localhost:8000`, not the Rust backend on `:8080`.
- Keep display components render-focused. Formatting, icons, animation, and simple click handlers belong near `DataDisplay.js`, `InfoDisplay.js`, and `LogComponent.js`; reusable network behavior belongs in hooks.
- Stick to the current stack: React function components, Tailwind utility classes, and local CSS files. Do not introduce a new state library, routing layer, or styling system unless asked.
- If you add polling or SSE behavior, always include cleanup and keep the return shape simple for the consuming component.