Skip to content

feat: add backend status indicator and restart controls#6

Open
randroid88 wants to merge 1 commit into
DataAnts-AI:mainfrom
Randroids-Dojo:upstream/backend-status
Open

feat: add backend status indicator and restart controls#6
randroid88 wants to merge 1 commit into
DataAnts-AI:mainfrom
Randroids-Dojo:upstream/backend-status

Conversation

@randroid88

Copy link
Copy Markdown

Summary

  • Live backend status indicator (green/red/yellow dot) in the toolbar
  • Adaptive health polling: 1s retry when offline, 5s heartbeat when online
  • Restart/start controls in both Electron (IPC) and browser mode (Vite middleware)
  • Backend status section in Settings panel with status display + action button

Before

No visibility into whether the backend is running. If the backend crashes or hasn't started, the user gets cryptic fetch errors with no guidance.

After

A status dot in the toolbar provides instant feedback:

  • Green: Backend is online and healthy
  • Red: Backend is offline — click "Start Backend" in Settings
  • Yellow (pulsing): Connecting/checking status

The Settings panel shows a dedicated Backend section with the status, backend URL, and a restart/start button that works in both Electron and browser mode.

Implementation details

  • BackendStatusDot: Color-coded dot component with tooltip
  • utils/env.ts: Shared IS_ELECTRON constant, startBackend() helper, status labels — replaces scattered !!window.electronAPI checks
  • editorStore: New backendStatus + setBackendStatus state
  • SettingsPanel: Backend status section with restart button
  • App.tsx: Health-check polling useEffect with adaptive interval
  • electron/main.js: backend:restart IPC handler (stops, waits 600ms for port release, restarts)
  • vite.config.ts: backendLauncher Vite plugin — POST /api/start-backend spawns the Python backend in browser dev mode, with 2s crash cooldown

Files changed

File Change
frontend/src/types/project.ts Add BackendStatus type
frontend/src/utils/env.ts New: IS_ELECTRON, startBackend(), BACKEND_STATUS_LABEL
frontend/src/components/BackendStatusDot.tsx New: status dot component
frontend/src/store/editorStore.ts Add backendStatus, setBackendStatus
frontend/src/store/aiStore.ts Use IS_ELECTRON from env.ts
frontend/src/components/SettingsPanel.tsx Add backend status section
frontend/src/App.tsx Health polling, import BackendStatusDot
frontend/src/vite-env.d.ts Add restartBackend to ElectronAPI
frontend/vite.config.ts Add backendLauncher plugin
electron/main.js Add backend:restart IPC handler
electron/preload.js Expose restartBackend

Test plan

  • Start the app without the backend running — dot should be red, Settings shows "Offline"
  • Start the backend — dot turns green within 1-2 seconds
  • Kill the backend — dot turns red within 1-2 seconds
  • Click "Restart Backend" in Electron — backend restarts, dot goes yellow then green
  • In browser mode (npm run dev:frontend), click "Start Backend" — backend spawns via Vite middleware
  • Verify crash cooldown: kill backend repeatedly — should not rapid-fire respawns

Add a live backend connection status indicator (green/red/yellow dot)
to the toolbar with adaptive health polling (1s retry when offline,
5s when online). Include restart/start controls in both Electron
(IPC-based) and browser mode (Vite dev middleware).

- New BackendStatusDot component with color-coded status
- Extract IS_ELECTRON and startBackend() to shared utils/env.ts
- Add BackendStatus type to project types
- Backend section in Settings panel with status + restart button
- Vite plugin to spawn backend in browser dev mode
- Electron IPC handler for backend:restart
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant