Magic Monitor (Tenant Pulse)

Overview

Magic Monitor is the platform control plane dashboard at monitor.magicomniverse.online. It provides real-time monitoring of all Magic e-VERSE tenants, containers, orders, products, and system health.

Frontend

React + Vite + Tailwind v4 + shadcn/ui

Backend

Express + TypeScript + PostgreSQL

Hosting

Coolify on 159.195.68.41

Repo

midego1/Magic-Monitor

Dashboard Views

View	Description
Overview	Stat cards, platform trends (24h), tenant pulse grid
Error Log	Live error feed with severity filters, CSV export
Events	Platform events timeline
Audit Log	User action tracking
Compare	Side-by-side tenant comparison
Containers	All 55+ Coolify resources with status (via Coolify API)
Users	User management per tenant
PIM Products	Product counts across tenants
APLT Orders	Orders, quotations, invoices, revenue across all tenants
Settings	Alerting config (Slack, WhatsApp), Coolify API settings

Architecture

Browser → https://monitor.magicomniverse.online
           ↓
       Coolify Proxy (Traefik)
           ↓
       Docker Container (Node.js)
           ├── Express API (port 3000)
           │   ├── /api/tenants → polls all tenant backends
           │   ├── /api/metrics → aggregated platform metrics
           │   ├── /api/containers → Coolify API (http://coolify:8080)
           │   ├── /api/aplt/overview → queries tenant PostgreSQL databases
           │   ├── /api/pim/stats → product counts per tenant
           │   └── /api/settings → app configuration
           └── Static Frontend (Vite build)
               └── React SPA with shadcn/ui components

Key Technical Details

• Coolify API access: The container reaches Coolify via Docker internal DNS at http://coolify:8080 (internal port). The URL is stored in the settings DB table as coolify_api_url and takes priority over the COOLIFY_API_URL env var.
• Tenant databases: The monitor connects to each tenant’s PostgreSQL database (on magic_pim_postgres_dev) to query APLT tables directly.
• CSS: Uses Tailwind v4 with @theme block for CSS variables. Global resets MUST be inside @layer base or they override Tailwind utilities (CSS cascade layers).

Repository Structure

Magic-Monitor/
├── .github/workflows/
│   ├── deploy.yml          # Auto-deploy to Coolify on push to main
│   └── pr-preview.yml      # Preview deploy + PR comment on PRs
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ui/         # shadcn/ui components (card, button, badge, etc.)
│   │   │   ├── App.tsx     # Main layout (header, sidebar, views)
│   │   │   ├── StatusBar.tsx
│   │   │   ├── TenantCard.tsx
│   │   │   ├── PlatformCharts.tsx
│   │   │   └── ...
│   │   ├── styles.css      # Tailwind v4 @theme + @layer base
│   │   └── types/
│   └── package.json
├── src/
│   ├── server.ts           # Express server
│   ├── db/                 # PostgreSQL connection + schema
│   ├── routes/             # API routes
│   │   ├── tenants.ts
│   │   ├── metrics.ts
│   │   ├── containers.ts   # Coolify API proxy
│   │   ├── aplt.ts         # APLT orders/quotations/invoices
│   │   ├── pim.ts          # PIM product stats
│   │   ├── settings.ts
│   │   └── users.ts
│   └── alerts/             # Slack + WhatsApp notifications
├── Dockerfile              # Multi-stage build (frontend + backend)
└── package.json

Branching & CI/CD

Branch Strategy

All Magic repos follow this workflow:

feature/xyz → PR → development → PR → main (production)

Branch	Purpose	Protection
main	Production. Auto-deploys to Coolify.	PR required, no direct push, no force push
development	Integration branch.	Open for direct push
feature/*	Feature/bug branches.	None

GitHub Actions

deploy.yml — Triggers on push to main:

• Calls Coolify API GET /api/v1/deploy?uuid={APP_UUID} to trigger a production deploy
• Uses secrets: COOLIFY_API_URL, COOLIFY_APP_UUID, COOLIFY_API_TOKEN

pr-preview.yml — Triggers on PR open/push:

• Deploys the PR branch via Coolify API
• Waits up to 3 minutes for deploy to finish
• Posts a status comment on the PR with preview URL and deploy info
• Cleans up old bot comments on subsequent pushes

Coolify Deployment

Setting	Value
App UUID	hwwmonk4o0vyy43qw04hsm5x
Server	159.195.68.41
Coolify API	http://159.195.68.41:8000 (external) / http://coolify:8080 (Docker internal)
FQDN	https://monitor.magicomniverse.online
Preview URL template	{{pr_id}}.{{domain}} → pr-1.monitor.magicomniverse.online
Git branch	main
Build	Dockerfile (multi-stage, ~90-120s)

Manual Deploy Trigger

curl -s -X GET \
  "http://159.195.68.41:8000/api/v1/deploy?uuid=hwwmonk4o0vyy43qw04hsm5x" \
  -H "Authorization: Bearer $COOLIFY_API_TOKEN"

Container Cleanup (2026-03-28)

What Was Done

Cleaned up the Coolify server from 89 to 55 containers:

Action	Count
Orphaned sslip.io duplicates deleted	28
Duplicate production containers deleted (same FQDN, older deploy)	6
sslip.io domains replaced with .internal on Redis/internal services	11
Total removed	34

Rules Applied

• Containers with *.magicomniverse.online domains = production, never delete
• Containers with *.sslip.io domains that have a production counterpart = orphan, safe to delete
• Redis instances with sslip.io but no production counterpart = only instance, keep (domain changed to .internal)
• exited:unhealthy containers = dead, safe to delete
• Duplicate production FQDNs = older created_at is the orphan

Internal Services

These services use .internal domains (not publicly routable, just Coolify metadata):

Service	Domain
bovisales-redis	http://bovisales-redis.internal
desluis-redis	http://desluis-redis.internal
logohorloge-redis	http://logohorloge-redis.internal
jodasign-redis	http://jodasign-redis.internal
spranz-redis	http://spranz-redis.internal
redis-master	http://redis-master.internal
redis-default	http://redis-default.internal
redis-demo	http://redis-demo.internal
redis-development	http://redis-development.internal
toolvizion-redis	http://toolvizion-redis.internal
webhook-server	http://webhook-server.internal

Design System

CSS Architecture (Tailwind v4)

Caution

The global CSS reset (* { margin: 0; padding: 0 }) MUST be inside @layer base. Tailwind v4 puts utilities in @layer utilities. In CSS cascade layers, unlayered rules always override @layer rules regardless of specificity. If the reset is unlayered, ALL Tailwind padding/margin/shadow utilities silently become 0px.

Color Palette (Zinc-based Dark Theme)

Token	Value	Usage
background	#09090b	Page background (darkest)
card	#18181b	Card backgrounds (clearly lighter)
secondary	#111113	Sidebar, header
border	#2e2e33	Visible card borders
muted	#27272a	Disabled/muted backgrounds
primary	#8b5cf6	Purple accent
foreground	#fafafa	Text
muted-foreground	#a1a1aa	Secondary text

shadcn/ui Components

Located in frontend/src/components/ui/. All use Radix UI primitives + CVA + cn() utility. Components: button, card, badge, dialog, select, input, table, tabs, scroll-area, skeleton, switch, dropdown-menu, separator, label, avatar.

Remaining TODO

Isolated PR Preview Deployments

Currently PR previews deploy to the same production URL. For true isolated previews (pr-1.monitor.magicomniverse.online):

1. Open Coolify UI at http://159.195.68.41:8000

   • Login: admin@magicomniverse.online / <your-db-password>

2. Link Magic Monitor to the GitHub App

   • Go to Applications → magic-monitor → General/Source
   • Change source from “Public GitHub” to “magic-everse-coolify” (GitHub App, id=3)
   • Save

3. Enable Preview Deployments

   • In the same app settings, enable “Preview Deployments”
   • Template is already set: {{pr_id}}.{{domain}}

4. Update PR workflow

   • Remove the manual Coolify deploy trigger from pr-preview.yml
   • Coolify will auto-deploy previews via GitHub App webhooks
   • The workflow only needs to post the preview URL comment

Note

Wildcard DNS is already configured: *.monitor.magicomniverse.online → 159.195.68.41

Coolify Dashboard SSL

The Coolify UI at http://159.195.68.41:8000 is only accessible via HTTP on port 8000. The domain coolify.magicomniverse.online returns 503 because no Traefik routing is configured for it. To fix: add Traefik labels to the Coolify container, or access via direct IP.

Branch Protection on All Magic Repos

All 13 Magic repos have been configured with:

• main branch: protected (PR required, no force push, enforce admins)
• development branch: created from main
• Forks (29 repos): left untouched

Repo	Status
Magic-3D	done
Magic-Connector	done
Magic-Contact	done
Magic-Editor	done
Magic-Logo	done
Magic-Modal	done
Magic-Monitor	done
Magic-Moodshot	done
Magic-PIM	done
Magic-Portal	done
Magic-Resize	done
Magic-Terminal	done
Magic-e-VERSE	done