One App Shell — unified dashboard and onboarding architecture

TL;DR: The One App Shell is the unified user experience container for the personal operating layer, consolidating setup workflows, connected systems, and agent sessions into a single, responsive web and mobile interface.

Status as of 2026-07-18: see body.

Relations

Status as of 2026-07-18: see body.

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.

All user-facing account-level onboarding terminology and routes have been unified into the Setup space, routing users through a clean, single-pass setup hub.

In today's release, the workspace chrome and consent routing have been unified with full MCP compatibility, and the layout has been upgraded with physics-based Material 3 transitions and unified mobile header rules to eliminate visual double-headers.

Core Architectural Components

The App Shell is built upon five 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.

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 Setup Hub

The setup pipeline is consolidated into a lean, single-pass setup wizard and hub (at /one/setup). Users configure profile parameters, satisfy phone-verification mandates, initialize PCHP vaults, and provision system capabilities via visual interactive cards. Capabilities are scoped to dedicated, static setup routes (e.g. /one/setup/gmail, /one/setup/location, /one/setup/finance) that isolate workflow states and smooth navigation with unified route transition loading animations.

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.

5. Generalized Agent Bar

The legacy inline specialized agent triggers are replaced by a generalized conversation input and control surface. It features a dedicated conversational mode icon, allowing fluid multi-turn context transitions, while the search controls are flattened and unified into screen-reader only layers to eliminate visual chrome duplication.

Onboarding & "Warm Cream" Revamp

The onboarding setup process has been significantly hardened and redesigned for a high-trust, smooth first-run user experience:

"Warm Cream" Exact-Match Styling: Onboarding screens (IntroStep, Setup Completion, and Account Auth) feature a refined, calm "warm cream" background palette matching precise Summer 2026 design standards.
Robust Journey Guards: The onboarding journey guard drops the legacy useSearchParams dependency. This prevents URL parameter clutter and state synchronization race conditions, ensuring robust redirection transitions.
Unified Account Deletion Settlement: Account deletion operations are unified into a single client-settled transaction flow, ensuring zero orphaned tokens or records remain in local store or PCHP databases upon closure.
Voice Action Integration: Conversational voice setup prompts are tightly coupled to static setup routes, allowing the root One agent to direct the user verbally while the UI updates transition skeletons dynamically.

Switched Default Accent & Theme Options

To conform precisely to Apple's guidelines, the app accent has been pivoted to focus on clarity and simplicity:

Apple Blue Default: All primary buttons, links, focus states, selected bottom tabs, and active card outlines are styled in Apple System Blue (#007aff), replacing the former default gold accents.
Molten Gold Accent Option: The original warm-gold accent (--foundation-gold-deep: #b8894d light, #e6b366 dark) is preserved as a highly requested, switchable theme choice ("Molten Gold") accessible via profile settings.
Theme-Aware Wordmark: Employs responsive, dark/light-aware brand markers (hushh-wordmark-black.svg and hushh-wordmark-ssh-gold.svg) alongside the "hushh One" visual layout.

Responsive & Mobile Optimization (M3 Expressive Physics Updates)

To guarantee absolute visual parity across varied viewports, the App Shell incorporates several key engineering solutions:

AppPageShell Metrics & Clean Headers: Upgraded internal application shells to rely on standardized AppPageShell metrics, globally decimating stacked typography on mobile route wrappers to prevent double headers. Hiding redundant mobile titles in LocationHeader eliminates visual noise, while empty welcome states in One Agent Chat are centered.
Material 3 Expressive Physics: Upgraded internal shadcn modal physics (Dialog, Sheet, AlertDialog) to M3 expressive underdamped spring easings and focal scale swells. Integrated a physics-based SegmentedPill layout across Kai workspace dashboard tabs tracking routes with flawless M3 rendering.
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

hushh-research