Developer Docs

Standalone Tower Dashboard

The Tower is Mallnline's platform-wide admin dashboard. Historically, it was embedded within the main ngwenya-front monolithic SvelteKit application at the /admin and /tower routes.

As part of the Platform Admin Isolation epic, The Tower has been fully extracted into a standalone SvelteKit repository (ngwenya-tower) running on its own dedicated port/subdomain (tower.mallnline.com).

IMPORTANT

No customer-facing features (Visitors) or Malet Owner features (The Deck) live in The Tower. It is strictly an internal oversight workspace for platform administrators.

Architectural Shifts

Extracting The Tower from the frontend monolith required decoupling several core systems:

1. Decoupled Theme System

In the monolith, themes were toggled globally via a darkMode store and a body.dark-mode CSS class. The standalone Tower application implements its own independent themeStore.ts and DarkMode.svelte component.

  • It uses the same $mall adaptive design tokens (--mall-surface, --mall-border, --mall-text).
  • Hardcoded fallback hex colors (e.g., #1a1a2e, #2d2d44) were systematically removed from all analytics widgets to ensure 100% theme-awareness parity with the main storefront.

2. Cross-Subdomain Authentication

Because the Tower now runs on tower.mallnline.com while the main app runs on mallnline.com, authentication state must be shared across subdomains.

  • The backend API issues the user JWT cookie with Domain=.mallnline.com.
  • The standalone Tower SvelteKit app uses the exact same hooks.server.ts logic to parse the JWT cookie and hydrate event.locals.user.
  • If a user is not authenticated or lacks the is_privileged flag, the Tower automatically redirects them to the main storefront's auth route: https://mallnline.com/auth?redirect=https://tower.mallnline.com.

3. Dedicated DevOps Observability

The Tower is not just a UI for platform data; it monitors the platform itself. It integrates natively with the Tower Subgraph to display:

  • Project Status & Git Feed: Powered by the backend's devops module reading .git repositories directly. The ngwenya-tower repo is actively monitored and badged with a unique pink accent (#ec4899).
  • Platform Health: A real-time grid powered by the dual-layer health probing system, mapping out exactly which subgraphs are reachable.
  • Test Coverage: Real-time line/branch/statement test coverage parsing.

Repository Structure

The ngwenya-tower repository contains the complete admin component library previously housed in src/lib/components/admin/:

ngwenya-tower/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ProjectStatusWidget.svelte
│   │   │   ├── CoverageHeatmap.svelte
│   │   │   ├── AlertsAnalytics.svelte
│   │   │   └── ... (all admin widgets)
│   │   ├── queries/
│   │   │   ├── towerDevOps.ts    # Tower-unique
│   │   │   ├── towerHealth.ts    # Tower-unique
│   │   │   ├── errorTracking.ts  # Tower-unique
│   │   │   └── alerts.ts         # Tower-unique
│   │   └── stores/
│   │       └── themeStore.ts
│   ├── mall/
│   │   └── tokens.css         # Shared design system tokens
│   └── routes/
│       └── +page.svelte       # Main dashboard layout

NOTE

Shared queries (admin, auth, malet, orders, organizations, lobby, etc.) are now imported from the @ngwenya/queries workspace package. Tower-specific queries remain in src/lib/queries/.

Shared Package Status

✅ `@ngwenya/queries` — Completed

The shared GraphQL query package has been implemented and is live. Tower, Deck, and Storefront all consume queries from @ngwenya/queries via pnpm workspace links. See Shared Query Package for full documentation.

🔜 `@mallnline/ui` — Planned

Foundational components like MallHandle.svelte and DarkMode.svelte were duplicated into the ngwenya-tower repo during the extraction. The next phase is to create a shared @mallnline/ui NPM workspace package to house these agnostic components, ensuring design synchronization across the Storefront, The Deck, and The Tower without code duplication.