Skip to content

dev

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

dev

README.md

Development Tools

Comprehensive development suite for building and managing cross-platform components in the Quorum desktop application.

Contents

🏠 Development Hub

Path: DevMainPage.tsx
Access: /dev route during development
Purpose: Central hub providing access to all development tools

  • Navigation to all development interfaces
  • Overview of available tools and their purposes
  • Quick access to playground, audit, dependency analysis, and documentation viewer

📖 Documentation Viewer

Path: docs/ folder
Access: /dev route during development
Purpose: Interactive frontend for browsing project documentation, tasks, and bug reports

  • Browse all documentation files from .agents/docs/
  • View task management files from .agents/tasks/ (pending, ongoing, completed)
  • Access bug reports from .agents/bugs/ (active and solved)
  • Browse reports and audits from .agents/reports/ (security audits, research, analysis)
  • Features search functionality and categorization
  • Full markdown rendering with syntax highlighting
  • Organized by folder structure (e.g., mobile-dev/docs, features/primitives)

🎮 Primitives Playground

Path: PrimitivesPlayground.tsx
Access: /playground route during development
Purpose: Interactive testing environment for cross-platform UI primitives

  • Test all primitive components (Button, Input, Modal, Container, Flex, etc.)
  • Complete color system showcase with CSS variables
  • Theme switching (light/dark) and accent color testing
  • Real-time prop testing and visual validation
  • Mobile-responsive component testing

🔍 Component Audit

Path: components-audit/ComponentAuditViewer.tsx
Access: /dev/audit route during development
Purpose: Comprehensive component analysis and mobile readiness tracking

  • ComponentAuditViewer.tsx - Interactive web interface for component status
  • audit.json - Complete metadata for all 64 components
  • update_audit.py - Python script to regenerate audit data
  • Mobile readiness tracking and progress statistics

🗺️ Dependency Map

Path: components-audit/DependencyMapViewer.tsx Access: /dev/dependencies route during development Purpose: Visual roadmap for mobile component development strategy

  • DependencyMapViewer.tsx - Interactive dependency visualization
  • dependency-map.json - 6-level component hierarchy analysis
  • mobile-roadmap.md - Phase-by-phase mobile development plan
  • Build order recommendations (Level 0 primitives → Level 5 complex components)

🗄️ DB Inspector

Path: db-inspector/ Access: /dev/db-inspector route during development Purpose: Browse IndexedDB contents with automatic redaction of sensitive data

  • DbInspector.tsx - Visual UI for browsing all database stores
  • dbDumpUtil.ts - Core dump logic with security redaction
  • Shows record counts for all 14 stores
  • Click any store to browse its records (with sensitive data redacted)
  • Copy buttons to export safe JSON for debugging
  • Console commands: __dbDump(), __dbCounts(), __dbStore(name)

Security Features:

  • Private keys show as [REDACTED:64chars]
  • Public keys show truncated (first 8 + last 4 chars)
  • Encryption states show as [ENCRYPTED_STATE:Xbytes]
  • Safe to use with real accounts

🧭 Navigation System

Path: DevNavMenu.tsx Purpose: Consistent navigation across all development tools

  • Unified navigation bar for all dev interfaces
  • Active page highlighting and smooth transitions
  • Sticky positioning for easy tool switching

🧪 Test Suite

Path: tests/ folder Purpose: Comprehensive unit test suite for MessageDB service refactoring

  • 75 unit tests across 6 services (MessageService, SpaceService, InvitationService, SyncService, EncryptionService, ConfigService)
  • 100% passing with ~10 second runtime
  • Uses vi.fn() mocks to validate service behavior
  • See tests/README.md for detailed documentation and test descriptions

Usage

All development tools are automatically available during development:

yarn dev

Development Routes

  • /dev - Main development hub with tool overview and documentation viewer
  • /dev/docs - Browse project documentation
  • /dev/tasks - View development tasks and plans
  • /dev/bugs - Browse bug reports and issues
  • /dev/reports - Security audits, research and analysis reports
  • /playground - Interactive primitives testing environment
  • /dev/audit - Component audit and mobile readiness tracker
  • /dev/dependencies - Visual dependency map and mobile roadmap
  • /dev/db-inspector - IndexedDB browser with redacted sensitive data

Notes

  • Cross-Platform Ready: All tools support the mobile/web shared architecture
  • Production Excluded: Dev tools are automatically excluded from production builds
  • Live Sync: Web playground uses shared components directly (always current)

Last updated: 2026-02-05