# System Architecture Overview This page provides a comprehensive view of the Uptime Watcher system architecture using interactive Mermaid diagrams. ## High-Level System Architecture The following diagram shows the overall system architecture and how the main components interact:## Component Interaction Flow This diagram illustrates how different components interact during a typical monitoring cycle:## Monitor Type Hierarchy This diagram shows the different types of monitors and their relationships:## State Management Architecture This diagram shows how state is managed across the application:## Site Provisioning Control Plane This flow diagrams the real add-site control plane, from the React form through ServiceContainer-managed managers, database transactions, automatic monitor bootstrapping, and finally the renderer state hydration.## UI Component Composition The React shell in `src/App.tsx` wraps the application with error handling and theme context before rendering the header, dashboard, overlays, and modal surfaces. The diagram below maps the concrete components sourced from `src/components/**` so new contributors can trace the composition quickly.## UI-State Integration Map UI components consume shared Zustand stores and renderer services instead of talking to Electron directly. This view shows which surfaces subscribe to each store and which services bridge to `electronAPI` IPC channels, based on hooks in `src/hooks/site` and the store modules under `src/stores/**`.--- The diagrams above illustrate the core architecture and component interactions of Uptime Watcher. For deeper insights into each module, see the [API documentation](../api/overview.md) and [code references](../../src) for implementation details and maintainability guidelines.