Dashboard & Layout Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Dashboard & Layout Components of HEX-YT-INTEL form a premium, technical instrument register designed for high-density AI content synthesis. The system is built around a "Synthesis Console" metaphor, moving away from generic dashboard aesthetics to provide a specialized interface for transforming YouTube content into structured intelligence databases.
The architecture follows a strictly hexagonal approach (Ports & Adapters), where presentation components are pure, stateless adapters. The visual language is defined by a deep obsidian palette, technical monospace metadata, and a disciplined "Electric Cyan" accent system used exclusively for active states and critical calls to action. Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, GEMINI.md:200-210
Visual Architecture & Design System
The layout is governed by a strict 8px grid system and a technical "instrument viewport" aesthetic. This is characterized by the signature scope-bracket motif—four L-shaped corner brackets that frame specific regions of the UI.
Core Layout Constraints
| Element | Specification |
|---|---|
| Primary Surface | Deep Obsidian #1A1F2B |
| Accent Color | Electric Cyan #06B6D4 (Streaming/Active only) |
| Grid System | 8px baseline (4px for hairlines) |
| Typography | Inter (Display/Body), JetBrains Mono (Metadata/Logs) |
| Corner Radii | 16px max for cards, 8px for controls, Pill for badges |
| Max Width | 80rem (App/Console), 64rem (Marketing/Legal) |
Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/claude-design-system-prompt.md
Component Motion Language
The system utilizes "ease-out exponential" motion exclusively. A critical semantic signal is the rotating cyan scope-ring, which activates only when the system state is streaming.
The diagram shows the conditional trigger for the system's primary animation. Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/HEX-YT-INTEL Design System (1)/SKILL.md
Dashboard Implementation
The admin and observability dashboards are designed to monitor system health, performance metrics, and usage analytics.
Data Flow & Component Hierarchy
The DashboardsPage component acts as a central hub, orchestrating data fetching from health APIs and rendering specialized metric cards. It implements an auto-refresh mechanism that polls data every 30 seconds to maintain real-time visibility.
This sequence illustrates the periodic health monitoring cycle within the admin dashboard. Sources: web/app/admin/dashboards/page.tsx:75-120
Key Dashboard Components
- MetricCard: A stateless functional component that displays values, units, and directional trends (up/down/neutral) using semantic coloring.
- StatusBadge: A visual indicator for component health (
okorerror), utilizing green and red variants respectively. - Health Status Section: A grid-based layout displaying the status of critical infrastructure including the Database, Cloudflare Worker, and Sentry configuration.
Sources: web/app/admin/dashboards/page.tsx:38-70
Layout Templates
The project defines distinct templates for different user journeys, ensuring consistency across the marketing site, legal pages, and the synthesis console.
Shared Navigation and Header
Layouts like the LegalPage and LandingPage utilize a fixed header with backdrop-blur-xl and a border-b that separates the navigation from the content. The branding is consistently represented by a 28px cyan square holding a linear graph icon.
The diagram above represents the standard layout hierarchy used across non-console pages. Sources: web/components/templates/LegalPage.tsx:18-45, web/app/landing-page.tsx:20-50
Content Framing (Bento Layout)
The "Synthesis Console" uses an asymmetric bento grid for displaying the 11-dimension output. Unlike a standard grid, it uses span weights (1, 2, or 3) on a 6-column grid to create a rhythmic, non-identical layout.
| Dimension Class | Span Weight | Icon (Solar Linear) |
|---|---|---|
| Core Thesis | Hero (3) | solar:target-linear |
| Evidence | Wide (2) | solar:database-linear |
| Tactics | Unit (1) | solar:bolt-linear |
| Entities | Unit (1) | solar:users-group-rounded-linear |
Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, web/app/landing-page.tsx:85-110
Implementation Details (React 19)
Components are implemented as stateless adapters. They receive data and status unions via props and do not manage internal state, fetching, or effects, adhering to the Hexagonal architecture.
// Example of Stateless Primitive Usage in Layouts
// web/components/templates/LegalPage.tsx:48-55
<main className="relative z-10 max-w-[1280px] mx-auto px-12 pt-48 pb-32">
<div className="max-w-[800px] w-full">
<div className="mb-16 animate-hx-rise">
<MonoLabel index="//" className="mb-4">Internal Register</MonoLabel>
<article className="prose prose-invert prose-cyan max-w-none">
<ReactMarkdown>{content}</ReactMarkdown>
</article>
</div>
</div>
</main>
Sources: web/components/templates/LegalPage.tsx:48-55, design-system/HEX-YT-INTEL Design System (1)/README.md
Conclusion
The Dashboard & Layout Components of HEX-YT-INTEL prioritize technical precision and information density. By utilizing a stateless adapter pattern and a highly constrained design system, the project ensures that the interface serves as a reliable instrument for AI synthesis, providing clear hierarchy through outline styling, multi-layered shadows, and semantic motion.