Nexus Console UI/UX Research
Research for building a unified web dashboard at console.corlera.com.
Part 1: Obsidian UI/UX Analysis
What Makes Obsidian's UX Excellent
1. Local-First Architecture - All notes stored as plain Markdown files in a "vault" folder - Works completely offline - no internet dependency - Full user control over data location and backup - Fast performance (no network latency for reads/writes)
2. Core UI Layout
┌─────────────────────────────────────────────────────────┐
│ ┌─────────┐ ┌──────────────────────┐ ┌─────────────┐ │
│ │ LEFT │ │ MAIN CONTENT │ │ RIGHT │ │
│ │ SIDEBAR │ │ (Editor/View) │ │ SIDEBAR │ │
│ │ │ │ │ │ │ │
│ │ • Files │ │ Markdown Editor │ │ • Backlinks │ │
│ │ • Search│ │ or │ │ • Outline │ │
│ │ • Tags │ │ Graph View │ │ • Tags │ │
│ │ │ │ or │ │ • Properties│ │
│ │ │ │ Canvas │ │ │ │
│ └─────────┘ └──────────────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────┘
3. Key UI Patterns - Split-pane editing: Open multiple notes side-by-side - Collapsible sidebars: Maximize content space when needed - Command palette: Quick access via Cmd/Ctrl+P - Tab system: Multiple documents open with easy switching - Graph view: Visual representation of note relationships - Backlinks panel: See what references current note
4. Navigation Philosophy - File tree for hierarchical browsing - Quick switcher for fast note access - Tags for cross-cutting categorization - Bidirectional links for associative navigation - Graph view for spatial exploration
5. Extensibility Model - Core plugins (toggle on/off) - Community plugins (sandboxed, user-approved) - CSS themes for complete visual customization - API for plugin developers
Part 2: What to Adopt for Nexus Console
Layout Pattern: Sidebar + Main Content + Detail Panel
┌────────────────────────────────────────────────────────────────┐
│ HEADER: Nexus Console | Search | User | Settings │
├──────────┬─────────────────────────────┬───────────────────────┤
│ │ │ │
│ LEFT │ MAIN CONTENT │ CONTEXT PANEL │
│ NAV │ (Dynamic) │ (Optional) │
│ │ │ │
│ ━━━━━━ │ │ • Details │
│ ENVS │ │ • Related items │
│ ────── │ │ • Actions │
│ Track │ [Content varies by │ • History │
│ KB │ selected environment] │ │
│ Session │ │ │
│ Notes │ │ │
│ AI Msgs │ │ │
│ Voice │ │ │
│ │ │ │
│ ━━━━━━ │ │ │
│ TOOLS │ │ │
│ ────── │ │ │
│ Search │ │ │
│ Settings│ │ │
│ │ │ │
└──────────┴─────────────────────────────┴───────────────────────┘
Sidebar Organization
Primary Navigation (Environments): - 📊 Track - Projects and tasks hierarchy - 📚 KB - Knowledge base articles (Winston's viewer) - 🕐 Sessions - Active/historical sessions - 📝 Notes - Session notes, work notes - 💬 AI Messages - aimsg communication logs - 🔊 Voice - Voice output history
Secondary Navigation (Tools): - 🔍 Search - Quadfecta search across all environments - ⚙️ Settings - User preferences, connections - 📋 Clipboard - Recent copies/shares
Key Features to Implement
From Obsidian: 1. ✅ Collapsible sidebar (save screen space) 2. ✅ Split-pane views (view KB + Track simultaneously) 3. ✅ Quick switcher (Cmd+K to jump anywhere) 4. ✅ Command palette (Cmd+P for actions) 5. ✅ Breadcrumb navigation (know where you are) 6. ✅ Dark/light mode toggle 7. ✅ Keyboard navigation throughout
Nexus-Specific: 1. ✅ Real-time session indicators (who's attached) 2. ✅ Cross-environment search (Quadfecta) 3. ✅ Live AI message stream (when ops running) 4. ✅ Voice history playback 5. ✅ Task status badges (pending/in-progress/done)
Part 3: MVP Feature List
Phase 1: Core Console (MVP)
Must-Have: 1. Environment sidebar with icons 2. KB article viewer (expand Winston's work) 3. Track project/task tree view 4. Session list with status indicators 5. Global search bar 6. Responsive layout (desktop priority) 7. Authentication (user login)
Should-Have: 1. Dark mode support 2. Breadcrumb navigation 3. Quick switcher (Cmd+K) 4. Collapsible sidebar 5. Basic filtering per environment
Phase 2: Enhanced Views
- AI Messages timeline view
- Voice history with audio playback
- Notes editor with markdown support
- Split-pane capability
- Graph view for KB relationships
- Session attachment management
Phase 3: Power Features
- Custom dashboards/widgets
- Saved searches
- Keyboard shortcuts customization
- Export capabilities (PDF, Markdown)
- API access for external tools
Part 4: Open-Source Inspiration
Worth Studying
Logseq - Block-based with bidirectional links - Everything is a block that can be referenced - Excellent for non-linear navigation - Local-first like Obsidian
Trilium - Database-backed with hierarchy - Hierarchical note trees (similar to our KB) - Embedded JavaScript automation - Ideal for internal knowledge systems
AppFlowy - Notion alternative with AI - Clean UI, Notion-like blocks - AI integration built-in - Open source, self-hostable
UI Component Libraries to Consider
- shadcn/ui - Beautiful React components
- Radix UI - Accessible primitives
- Tailwind CSS - Utility-first styling
- Next.js - React framework with SSR
Part 5: Technical Recommendations
Stack Suggestion
Frontend:
- Next.js 14+ (App Router)
- TypeScript
- Tailwind CSS + shadcn/ui
- Zustand (state management)
- React Query (data fetching)
Backend:
- Existing MCP servers via Gateway
- WebSocket for real-time (aimsg, sessions)
- Redis for caching
Auth:
- Existing Nexus user system
- Session tokens via Locker
Architecture Pattern
┌─────────────────────────────────────────────────────┐
│ Nexus Console │
│ (Next.js App) │
└───────────────────────┬─────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ Gateway MCP │
│ (Unified API Access) │
└───────────────────────┬─────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Track │ │ KB │ │ Session │ ...
│ MCP │ │ MCP │ │ MCP │
└───────────┘ └───────────┘ └───────────┘