One App Shell — unified dashboard and onboarding architecture
The public concept and architectural guide for One's unified app shell, unified onboarding, and responsive bottom-navigation design.
TL;DR: The One App Shell is the unified user experience container for the personal operating layer, consolidating onboarding workflows, connected systems, and agent sessions into a single, responsive web and mobile interface.
Status as of 2026-06-21: see body.
Relations
Overview
The One App Shell represents a major consolidation of Hussh's user-facing surfaces. Previously, individual agents (such as Kai) and platform capabilities (such as location sharing and connected systems) operated in separate or disjointed interfaces. The App Shell brings these together under a single unified cockpit, providing a cohesive user experience across desktop and mobile form factors.
Designed to align with modern responsive standards, the App Shell integrates the core concepts of PCHP (Personal Consent Handshake Protocol) directly into the user’s daily flow, turning privacy and consent management from a secondary setting into a primary, accessible dashboard feature.
Core Architectural Components
The App Shell is built upon four primary UI/UX pillars:
1. The Unified Dashboard
The Dashboard (/one) serves as the user’s primary cockpit. It aggregates active consent streams, summarizes registered Connected Systems, and hosts the interactive Consent Audit Timeline. Users can instantly see which third parties have requested data, when they accessed it, and the specific reasons authorized under PCHP.
2. High-Fidelity Responsive Navigation
A pure-CSS responsive app shell provides continuous layout parity between native mobile apps (iOS and Android via Capacitor) and web browsers. Key layouts feature a flexible bottom-navigation bar tailored for thumb-reach on mobile screens, morphing into a standard desktop layout on wider screens.
3. Integrated Onboarding Pipeline
A multi-step onboarding wizard guides new users through initial profile setup, mobile safe-area setup, vault-key generation, and initial connection requests. Rather than presenting disjointed prompts, onboarding acts as a single, progressive disclosure flow.
4. Cross-Agent Connection Bridges
Specialized connection bridges link individual agent contexts. For instance, the Kai Circle Connect Bridge allows specialized financial analysis capabilities in Kai to seamlessly trigger generalized system connections, passing cryptographic consent boundaries in a single, user-guided click.
Responsive & Mobile Optimization
To guarantee absolute visual parity across varied viewports, the App Shell incorporates several key engineering solutions:
- Touch-Friendly Tables: Wide markdown and data tables are wrapped in block-level CSS containers with horizontal scroll capabilities (
-webkit-overflow-scrolling: touch), preventing layout overflow on narrow screens. - Dynamic Padding: Bottom-bar spacing adjusts dynamically for mobile safe areas (such as the iOS home indicator) to ensure zero overlap with critical interactive elements.
- Pinch-Zoom Viewers: Embedded SVG artifacts (such as architecture maps or data flows) utilize pointer events to support native, high-fidelity pinch-to-zoom and drag-pan interactions without trapping the page scroll.
Sources
- (none — synthesis only)