Control Panel Showcase

Validate every component before Increment 1 migration

v1.05 Components4 Zones

Full Layout Preview

The complete 4-zone spatial layout: Rail + Primary Workspace + Inspector + Status Bar. Hover the rail to expand, click phases to navigate, press ⌘K for the command palette.

Splash

Sign in to continue

Access to the Splash Control Panel requires authentication.

Phase Stepper Rail

6-phase pipeline with expand-on-hover, sub-page navigation, and phase state indicators. Supports locked, available, active, and completed states.

Define

Design

Blueprint

Build

Validate

Ship

Phase States

locked

available

active

completed

Interactions

• Hover to expand, move away to collapse
• Click pin icon to keep expanded
• Click phase to expand sub-pages
• Click again to navigate to first sub-page
• Locked phases are non-interactive
• Active phase has colored left indicator

Command Palette

Global search with ⌘K shortcut. Searches across pages, actions, settings, and agents. Keyboard navigable with arrow keys and Enter.

Or press ⌘K / Ctrl+K anywhere

Navigation

22 pages

All phase and utility pages

Settings

4 actions

Theme, workspace modes

Custom

Extensible

Add project-specific actions

Status Bar

Bottom bar showing connection status, branch, active agents with animated dots, and ⌘K shortcut hint. Agent dots pulse when working.

Demo Project

Agent states:

idle

working

blocked

completed

Inspector Panel

Right-side contextual panel with Properties, History, and Comments tabs. Animates open/closed. Shows properties of the currently selected item.

Main content area

Keyboard Shortcuts

Open Command Palette⌘ K

Split Workspace⌘ \

Zen Mode⌘ ⇧ Z

Toggle Inspector⌘ I

Toggle Rail⌘ B

Jump to Phase⌘ 1-6

Exit Zen / Close PaletteEsc

Navigate Palette Items↑ ↓

Select Palette ItemEnter

Screen Registry

Every screen in Splash, organized by phase. Implemented screens are marked, placeholders show "Soon" badges.

Phase 1: Define

4 screens — 3 implemented

Conversation

RFP Document

Upload RFPSoon

Knowledge Base

Phase 2: Design

3 screens — 2 implemented

Brand

UI Libraries

Component LibrarySoon

Phase 3: Blueprint

3 screens — 2 implemented

Mockups

Flow Map

Screen StorybookSoon

Phase 4: Build

5 screens — 5 implemented

Sprints

Agents

Workspace

Code Map

Knowledge Graph

Phase 5: Validate

2 screens — 2 implemented

Quality

Experiments

Phase 6: Ship

3 screens — 3 implemented

Deployments

Activity

Evolution