---

# **THE ASTRAL DASHBOARD: TECHNICAL BIBLE v2.0**

**Target Hardware:** Dual NVIDIA RTX 4090/6000 (Local Server) 
**Architecture:** 3-Stage Web-Based Operating System
**Core Stack:** Next.js 14, Tailwind CSS, Zustand, Framer Motion, OpenClaw, ComfyUI 

## **I. ARCHITECTURAL VISION & USER FLOW**

The user experience is divided into three strict security and interaction layers. The system is designed to provide a drag-and-drop AI-powered platform for consent-driven celebrity advertising, ensuring legal, ethical, and technical safeguards.

### **STAGE 1: THE VAULT DOOR (Login Pane)**

**Purpose:** Maximum security and zero-friction entry, ensuring isolated, encrypted datasets per celebrity with consent metadata and revocation controls.

* **The Visuals:** A deep OLED black canvas. No standard email/password fields. A subtle, glowing biometric ring in the center.
* **The Interaction:** The system utilizes the **WebAuthn (FIDO2) standard**.
* **The Flow:**
1. The user approaches the terminal or iPad.
2. They plug in a physical USB Security Key (e.g., YubiKey) or use Apple Face ID / Windows Hello.
3. The browser securely validates the cryptographic token against Firebase Auth.
4. Upon success, the screen dissolves smoothly into the Nexus.



### **STAGE 2: THE PROJECT NEXUS (Carousel)**

**Purpose:** A visually rich, horizontal project browser inspired by Google Veo and PSP OS.

* **The Visuals:** Glassmorphic cards floating over the animated nebulous background representing the LTX-2 latent space.
* **The Interaction:** * A horizontal, physics-based scrolling carousel (using `Framer Motion` drag constraints).
* Each card represents a Cine Bahini campaign (e.g., "Verdant Spire Launch", "Summer Watch Promo").
* The active card in the center scales up slightly (1.05x) and becomes fully opaque, while edge cards blur and dim.
* A persistent, glowing "+ New Project" tile sits at the end of the carousel.


* 
**The Data:** Selecting a project fetches the specific directory states from the local Synology/TrueNAS via SMB/NFS mount.



### **STAGE 3: THE ASTRAL WORKSPACE (The "Glass OS")**

**Purpose:** The creative engine room. We are not building a website; we are building a Web-based Operating System.

* **The Paradigm:** There is no traditional navigation bar.
* **The Dock:** A floating "Dock" at the bottom of the screen handles app switching.
* **The Apps:** Every functionality opens as a **Floating Window** (Glassmorphism pane). These windows have MacOS-style traffic light controls and can be dragged or stacked using `Zustand` for state management.



---

## **II. CORE SYSTEM: THE STATE MANAGER**

To make this work like a professional tool, the frontend must use Zustand to manage the state of the applications.

```typescript
// stores/windowStore.ts
type WindowId = 'production_hub' | 'asset_vault' | 'engine_room';

interface WindowState {
  id: WindowId;
  isOpen: boolean;
  isMinimized: boolean;
  zIndex: number;
  position: { x: number, y: number };
}

interface DesktopStore {
  windows: Record<WindowId, WindowState>;
  activeProject: string | null;
  toggleWindow: (id: WindowId) => void;
  bringToFront: (id: WindowId) => void;
}

```

---

## **III. COMPONENT SPECIFICATIONS (THE APPS)**

### **APP 1: THE PRODUCTION HUB ("The Mastermind")**

Inspired by Midjourney’s speed and Veo’s visual clarity.

* 
**Left Pane (Actor Identity):** A large, dashed-border drop zone. When files are dropped, it displays a 3D point-cloud preview (derived from LiDAR) instead of just flat thumbnails. Use Three.js in the frontend to render the .obj or depth maps for a "High-Tech" feel.


* **Right Pane (Product Essence):** A focused drop zone. The system utilizes IP-Adapter (Instant Prototyping) to "inject" the product's visual identity into the latent space without losing fine detail (e.g., watch dial text or car reflections). Once uploaded, a badge appears: "Extracting Material Properties...".


* 
**The Intent Bar:** A single, elegant text input field spanning the width. As you type, "Ghost Text" suggests stylistic modifiers (e.g., "in the style of a 35mm Leica shot"). The frontend then wraps this in a "Hidden System Prompt" (e.g., 8k, cinematic lighting, shot on Arri Alexa, highly detailed).


* 
**The Task Loom (Orchestrator):** A horizontal scrolling "Film Strip" of tasks. Each card shows ETA, VRAM Load, and Step Count , alongside a low-res latent preview from ComfyUI's K-Sampler. Real-time updates are driven by WebSockets connecting to the ComfyUI queue status.



### **APP 2: ASSET LIBRARY (The Digital Vault)**

Where raw data becomes a trained dataset.

* 
**LiDAR Visualizer:** A toggle to view the iPhone sensor data overlays on the images. LiDAR depth maps are converted into grayscale depth buffers to serve as ControlNet inputs, ensuring the 3D space of the actor is respected.


* 
**Permission Matrix:** A simple "Toggle" system to share this specific dataset with other team members or lock it to the current user. This acts as the Consent enforcement and instant identity deactivation mechanism.



### **APP 3: ADMIN & DEVELOPER CONSOLE (The "Engine Room")**

Hidden from standard users; accessible via specialized admin login.

* 
**JSON Editor:** A live editor to swap the "Hidden" ComfyUI Workflow JSON without redeploying the frontend.


* 
**Log Stream:** A real-time terminal window showing the ComfyUI console output for debugging "broken" generations or VRAM overflows.


* 
**Model Routing:** Controls to change which local IP or GPU is handling the LTX-2 vs. the SDXL/Flux image generation.



---

## **IV. DATA FLOW & MIDDLEWARE LOGIC**

The dashboard never talks to ComfyUI directly. It communicates exclusively through **OpenClaw** (FastAPI Middleware), ensuring air-gapped security.

### **The 3-Stage Generation Pipeline**

Triggered by a single API call from the Production Hub:

1. 
**Stage 1 (Multi-Modal Fusion):** Combines the Actor LoRA (Identity), LiDAR Depth Map (Pose/Space), and Product IP-Adapter (Object). Result: A high-resolution static frame of the actor interacting with the product.


2. 
**Stage 2 (Temporal Expansion):** The Stage 1 image is used as the Initial Frame for the LTX-2 DiT model. In-Context LoRAs are applied to maintain temporal consistency of the product (preventing "hallucinating" different car wheels or watch faces).


3. 
**Stage 3 (Refinement & Delivery):** FaceDetailer nodes upscale facial features. The video is encoded to H.265 and saved directly to the NAS path. The Frontend reads from the same mount via a simple static file server.



---