# Src (React Frontend)

**Generated:** 2026-02-19
**Location:** src/

## OVERVIEW

React 18 + TypeScript frontend with Vite, Tailwind CSS, Zustand state, and React Flow graph visualization.

## STRUCTURE

```
src/
├── main.tsx              # React entry point
├── App.tsx               # Main app component, data loading
├── index.css             # Tailwind CSS entry
├── vite-env.d.ts         # Vite type definitions
├── components/
│   ├── Header.tsx        # Top header with refresh
│   ├── LeftPanel.tsx     # Host list sidebar
│   ├── RightPanel.tsx    # Details panel (tabs)
│   └── Graph/
│       └── TopologyGraph.tsx  # React Flow graph
├── services/
│   ├── discovery.ts      # Data transformation
│   └── sshDiscovery.ts  # SSH connection logic
├── store/
│   └── topologyStore.ts  # Zustand global state
├── types/
│   └── index.ts         # TypeScript interfaces
├── utils/
│   └── colors.ts        # Color utilities
└── data/
    └── staticConfig.ts  # Static fallback data
```

## WHERE TO LOOK

| Task | File | Notes |
|------|------|-------|
| Add global state | src/store/topologyStore.ts | Zustand store |
| Modify graph | src/components/Graph/TopologyGraph.tsx | React Flow |
| Add new panel | src/components/*.tsx | Follow LeftPanel pattern |

## STATE MANAGEMENT

- Zustand store in `src/store/topologyStore.ts`
- Keys: nodes, edges, hosts, networkInfo, pollInterval, isLoading, lastUpdated
- Panels: leftPanelOpen, rightPanelOpen

## ANTI-PATTERNS

- **DO NOT store SSH credentials in localStorage** - security risk
- **DO NOT bypass the store** - use setState from useTopologyStore

## COMMANDS

```bash
npm run dev        # Start Vite dev server (port 3000)
npm run build      # TypeScript + Vite build to dist/
```

## NOTES

- API URL: configured via VITE_API_URL env var (default: http://localhost:3001)
- Falls back to simulated data if API call fails
- Polling interval: configurable via store (default in topologyStore.ts)
