1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
---
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`.
- 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.
|
