Dashboard Layout & Structure
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard Layout & Structure defines the visual and functional organization of the KernelForge application. It provides a specialized environment for Android kernel development, focusing on automation, patching, and packaging. The layout centers on a sidebar-driven navigation system that orchestrates different stages of the kernel lifecycle, from initial setup to final flashable ZIP generation.
The dashboard utilizes a responsive "Inset" variant for the main content area, integrated with a persistent sidebar for navigation across different modules like project configuration, patching, and AI-assisted troubleshooting.
Sources: src/app/page.tsx:162-164, src/components/ui/sidebar.tsx:436-452, README.md
Core Layout Components
The dashboard architecture relies on a hierarchical structure of providers and layout components to maintain state and visual consistency.
Navigation and Shell
The application shell uses the SidebarProvider to manage the expansion state of the navigation menu. The SidebarNav component handles the selection of active modules, which updates the main view through the SidebarInset.
The diagram shows the component hierarchy where SidebarProvider wraps the entire dashboard to coordinate the navigation and content areas.
Sources: src/app/page.tsx:162-170, src/components/dashboard/SidebarNav.tsx:21-30
Application Header
The header provides persistent status information and global actions. It displays the current device codename and model as badges. It also contains the primary build triggers and context-aware download buttons that appear only when a build is successful.
Sources: src/app/page.tsx:170-198
| Component | Function | Derived From |
|---|---|---|
SidebarTrigger | Toggles the visibility of the sidebar. | src/components/ui/sidebar.tsx |
| Status Indicator | Displays "System Building", "Build Finished", or "Ready". | src/app/page.tsx |
| Action Buttons | Provides "Sync Source", "Build Kernel", and "Download". | src/app/page.tsx |
Navigation Modules
The dashboard is divided into distinct functional areas managed by the activeTab state.
Module Definitions
The navigation system is defined by a set of items, each associated with an icon and a unique identifier.
| ID | Title | Purpose |
|---|---|---|
dashboard | Dashboard | High-level build overview and quick stats. |
setup | Project Setup | Configuration of Git repositories and target versions. |
patching | Kernel Patching | Toggling features like KernelSU, SUSFS, and NoMount. |
compilation | Compilation | Live build monitoring and LTO/CFI settings. |
logs | Log Viewer | Terminal output for build debugging. |
flashable | Flashable Creator | AnyKernel3 ZIP generation tools. |
ai | AI Assistant | Automated log analysis for troubleshooting. |
Sources: src/components/dashboard/SidebarNav.tsx:4-12
Component Interactions & Data Flow
The dashboard manages a complex state machine for the kernel build process. Components interact through shared state in page.tsx, specifically tracking the isBuilding and buildProgress variables.
Build Logic Flow
When you initiate a build, the system updates the log state and progress incrementally.
The sequence diagram illustrates how the build action triggers state changes across the log viewer and notification systems.
Sources: src/app/page.tsx:75-96, src/app/page.tsx:135-156
Specialized Content Modules
- KernelLogs: A terminal-style viewer that renders log entries with color-coded levels (
info,error,warning,success). It automatically scrolls to the bottom as new logs arrive. - AITroubleshooter: An integrated module that takes the
logsTextand processes it through theaiBuildTroubleshootingAssistantto identify errors and suggest solutions. - SidebarNav: A custom sidebar implementation using
SidebarMenuButtonwith active state styling to indicate the current functional module.
Configuration and Metadata
The dashboard layout is defined as a dark-mode application by default. The RootLayout sets global typography using Inter, Space Grotesk, and Source Code Pro fonts.
- Theme Color:
#00ff55 - Device Support: Optimized for SM8550 (kalama)
- Frameworks: Next.js 15 and Capacitor 6
Sources: src/app/layout.tsx:5-30, README.md
Summary
The Dashboard Layout & Structure provides a modular, sidebar-driven interface for managing Android kernel development. It orchestrates user input through specialized configuration tabs and provides real-time feedback via the Build Output Terminal and AI Troubleshooting Assistant. The architecture ensures that critical actions, such as generating AnyKernel3 ZIPs or downloading images, are gated by the successful completion of the build state.