---
icon: ChartBarIcon
---

import { Callout } from 'nextra/components'

# μ(O) Calculus Dashboard

**Interactive Knowledge Graph Composition in 4 Dimensions**

<Callout type="info">
**Development Mode**: The playground runs on port 3001. In production, it will be deployed alongside this documentation.
</Callout>

## About the Dashboard

The μ(O) Calculus Dashboard is an interactive demonstration of Knowledge Graph Composition in 4 Dimensions (KGC-4D) featuring:

- **Shard-Based Architecture** - Client/server relationship with perfect state synchronization
- **3D Force Graph Visualization** - Interactive exploration of knowledge graphs
- **Monaco Editor Integration** - Live code editing with syntax highlighting
- **React Flow Diagrams** - Visual architecture representations
- **WebSocket Communication** - Real-time updates between shards

## Features

### Observable State (O)
View and manipulate RDF quads in real-time with immediate visual feedback.

### Nanosecond Time (t_ns)
Track events with nanosecond precision using BigInt timestamps.

### Vector Causality (V)
Visualize distributed causality with Lamport vector clocks.

### Git References (G)
Content-addressed snapshots with BLAKE3 hashing.

## Local Development

To run the dashboard locally:

```bash
cd packages/kgc-4d/playground
pnpm dev
```

Then visit [http://localhost:3001](http://localhost:3001)

## Architecture

The dashboard demonstrates a **shard-based architecture** where:

1. **Client Shard** (Browser)
   - Lightweight reactive UI
   - Event log streaming
   - Visual state representation

2. **Server Shard** (Node.js)
   - Full Oxigraph RDF store
   - Event sourcing engine
   - WebSocket tether

3. **Perfect Synchronization**
   - Events flow client → server
   - State reconstructed in both
   - Vector clocks maintain causality

<Callout type="warning">
**Note**: Some features require a local server to be running. The dashboard will indicate which capabilities are available.
</Callout>

## Technical Stack

- **Next.js 16** - React framework with App Router
- **Oxigraph** - WASM-compiled RDF triple store
- **Monaco Editor** - VSCode's editor component
- **React Flow** - Node-based graph visualization
- **Three.js** - 3D force graph rendering
- **WebSocket** - Real-time communication

## Use Cases

Explore these interactive demonstrations:

- **Time-Travel Debugging** - Rewind and replay events
- **Multiverse Branching** - Fork universes and merge changes
- **Collaborative Editing** - Multiple users with conflict detection
- **Forensic Analysis** - Complete audit trail visualization

## Documentation

For implementation details, see:

- [KGC-4D Concepts](/concepts/kgc-4d)
- [Mathematical Foundations](/concepts/kgc-4d/mathematics)
- [Forensic UX Patterns](/concepts/kgc-4d/forensic-ux)
- [API Reference](/reference)

---

<Callout>
**Production Deployment**: The dashboard will be accessible at `https://seanchatmangpt.github.io/unrdf/playground` once deployed.
</Callout>