Raiku Execution Visualizer + Gateway (REV+)

A futuristic web application that visualizes deterministic Solana transaction execution using Raiku slot scheduling and Gateway optimization, with integrated Zerion wallet analytics and AI-powered predictive analytics.

Features

Live Dashboard - Real-time slot execution visualization with animated bars
Slot Reservation Explorer - Timeline view of AOT/JIT slot reservations with interactive tooltips
MEV & Reliability Simulation - Split-view comparison of Baseline vs Raiku+Gateway
Predictive Analytics - ML-powered success prediction, slot recommendations, and cost optimization
Wallet Analytics - Portfolio tracking with PnL improvements and cost savings
Developer Logs - Transaction table with advanced filtering, sorting, and CSV export
Mode Toggle - Switch between Baseline and RaikuGateway simulation modes
Live/Preview Mode - Toggle between mock data and live API integration
Notifications - Real-time toast notifications for mode changes and events
Smooth Animations - Polished transitions and glow effects for hackathon demos
Advanced Filtering - Search by signature, amount range, date range with saved presets
Alert System - Custom alert rules for success rate, latency, and cost thresholds
Mobile Optimized - Responsive design with PWA support for iOS and Android
Interactive Slots - Click any slot bar to see detailed transaction breakdown with sorting/filtering
Command Palette - Quick navigation with ⌘+K keyboard shortcut and contextual commands
Intelligent UI - Dynamic workspace adaptation with smart placeholders
Micro-Animations - Subtle 200ms transitions for professional feel
Error Boundaries - Graceful error handling with fallback UI
Skeleton Loading - Professional loading states for all views
WebSocket Real-Time Updates - Live data streaming with animated indicators
Context-Aware Panels - Detail panels adapt to available data with smart empty states
Data-Aware Highlights - Auto-highlight new activity and top performers

Tech Stack

Frontend:

Next.js 16 with App Router
React 19.2
TailwindCSS v4 with dark theme (#0A0A0A)
Framer Motion for micro-animations
SWR for data fetching with 500ms polling
Geist Sans for UI, IBM Plex Mono for data/terminal
Neonless Future aesthetic (dark, spacious, minimal)
Progressive Web App (PWA) support

Backend:

Rust with Axum framework
Simulated Raiku + Gateway execution engine
Mock Zerion API integration (ready for real API)
REST APIs with CORS support
Background simulation ticker (500ms intervals)
AI-powered predictive analytics engine

Quick Start

Frontend Only (Demo Mode)

The frontend works standalone with mock data - perfect for demos and development:

```bash npm install npm run dev ```

Visit http://localhost:3000. The app will use mock data and show a yellow "Mock" indicator in the system strip.

Full Stack (Live Mode)

For full functionality with backend simulation:

1. Start Backend: ```bash cd backend cargo run ```

2. Start Frontend: ```bash npm install npm run dev ```

Visit http://localhost:3000. The connection indicator will show green when backend is connected.

Demo Mode

REV+ is designed for seamless demos and hackathon presentations:

Mock Data - Realistic wallet and transaction data generated client-side
No Backend Required - Frontend works standalone for quick demos
Visual Indicators - Clear "Mock" vs "Live" mode indicators
Instant Toggle - Switch between modes without page reload
Full Functionality - All features work in mock mode

See DEMO_GUIDE.md for a complete 3-minute demo script.

Key Features for Demos

Real-Time Visualization

Live slot execution with animated bars
WebSocket updates with smooth transitions
Interactive drilldown panels

Dramatic Metrics

95%+ Success Rate (vs 75% baseline)
35ms Latency (vs 150ms+ baseline)
42% Cost Savings (Gateway tip refunds)
24.8% PnL Improvement (better execution)

Interactive Exploration

Click any slot to see transaction details
Expandable asset panels with history
Sortable, filterable transaction logs
CSV export for analysis

Developer Experience

Command palette (⌘+K) for quick navigation
Keyboard shortcuts for all major actions
Advanced filtering with saved presets
Real-time WebSocket updates

Getting Started

Full Stack Setup

1. Start Backend (Rust)

```bash cd backend cargo run ```

Backend runs on http://localhost:3001

2. Start Frontend (Next.js)

```bash npm install npm run dev ```

Frontend runs on http://localhost:3000

The connection indicator will turn green when backend is connected.

Keyboard Shortcuts

The app includes comprehensive keyboard shortcuts for power users:

⌘+K or Ctrl+K - Open command palette
⌘+1 - Navigate to Dashboard
⌘+2 - Navigate to Slot Visualization
⌘+3 - Navigate to Developer Logs
⌘+4 - Navigate to Analytics
⌘+5 - Navigate to Wallet Dashboard
⌘+, - Navigate to Settings
Escape - Close command palette or modals

UI Intelligence Features

Fully Functional Detail Panels

All detail panels now include comprehensive functionality:

Slot Detail Panel:

Shows all transactions in that slot with full metadata
Sortable by time, status, or reservation type
Filterable by execution status (all/executed/pending/missed)
Real-time updates via WebSocket
Smooth animations for new transactions

Transaction Detail Panel:

Complete transaction metadata (hash, wallets, metrics, timing)
Raiku+Gateway performance indicators
Execution certainty and cost savings
Gateway tip refund status

Wallet Asset Detail Panel:

Historical transaction feed for each asset
Holdings and total value display
Transaction count and performance metrics
Clickable transactions for full details

Log Detail Panel:

Expandable entries with full event traces
WebSocket real-time updates with fade-in animations
Advanced filtering by wallet, transaction type, or slot
CSV export for analysis

Live Data & WebSocket Sync

The app now features comprehensive real-time data synchronization:

WebSocket Integration - Pushes slots, transactions, and wallet updates directly to frontend
Animated Updates - Fade/slide animations for new data (max 200ms)
Auto-Highlight - New activity automatically highlighted in detail panels and dashboard
Exponential Backoff - Smart reconnection strategy (up to 5 attempts)
Activity Indicators - Visual feedback for live updates in system strip

Context-Aware Workspace

The workspace dynamically adapts based on available data:

No Wallet Selected - Shows placeholder with "Select Wallet / Connect Zerion API"
Empty Slot - Displays "Empty Slot" card with appropriate styling
Transaction Failure - Subtle highlight without breaking layout
Dynamic Resizing - Panels expand/collapse smoothly when detail views open
Smart Placeholders - Contextual empty states guide user actions

Mock vs Live Toggle

Seamless switching between data modes:

USE_MOCK_DATA Toggle - Centralized config in lib/config.ts
Automatic Fallback - Falls back to mock if live API fails
Visual Indication - System strip shows current mode with color coding
Backend Wiring - All endpoints ready for live data
One-Click Switch - Toggle via Control Hub or System Strip

WebSocket Real-Time Updates

The app includes comprehensive WebSocket support for live data streaming:

Connection Management

Automatic connection on app load
Exponential backoff reconnection (up to 5 attempts)
Visual connection status in system strip
Graceful fallback to polling if WebSocket unavailable

Real-Time Events

slot_update - Individual slot updates with animation
transaction_update - New transactions with fade-in effect
stats - Live performance metrics updates
mode_changed - Simulation mode changes

Visual Feedback

Animated connection indicator (pulsing green dot)
Activity indicator when receiving updates
Auto-scroll to new activity in logs
Highlight new transactions for 3 seconds

Configuration

Centralized Config Module

The app uses a centralized configuration system in lib/config.ts:

```typescript export const config = { USE_MOCK_DATA: process.env.NEXT_PUBLIC_USE_MOCK_DATA !== "false", ENABLE_LIVE_FEED: process.env.NEXT_PUBLIC_ENABLE_LIVE_FEED === "true", API_MODE: "Zerion" | "Gateway", WS_RECONNECT_DELAY: 3000, ANIMATION_DURATION: 200, } ```

Environment Variables

Frontend (.env.local) ```bash NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_USE_MOCK_DATA=true NEXT_PUBLIC_ENABLE_LIVE_FEED=false NEXT_PUBLIC_API_MODE=Gateway ```

Backend (.env) ```bash

Toggle between mock and live data

USE_MOCK_DATA=true

API Keys (optional - uses mock data if not set)

ZERION_API_KEY=your_zerion_api_key_here GATEWAY_API_KEY=your_gateway_api_key_here

Logging

RUST_LOG=info ```

Developer Shortcuts

For developers working on the app:

Mock Data Toggle - Use Control Hub to switch between mock/live instantly
Command Palette - ⌘+K for quick navigation during development
Error Boundaries - Automatic error catching with retry functionality
Skeleton States - All views have loading states for testing
Console Logs - Prefixed with [v0] for easy filtering

Architecture

Frontend Components

Core Layout:

terminal-shell.tsx - Main application shell with sidebar and command bar
sidebar.tsx - Icon-only navigation sidebar
command-bar.tsx - Top bar with search and breadcrumbs
system-strip.tsx - Bottom status bar with connection indicators
command-palette.tsx - Quick navigation overlay (⌘+K)
control-hub.tsx - Floating settings button with system info

Views:

dashboard-view.tsx - Main dashboard with metrics and slot visualization
slots-view.tsx - Timeline/Gantt chart view of slot reservations
logs-view.tsx - Transaction table with filtering
analytics-view.tsx - Split-view comparison and predictions
wallet-view.tsx - Portfolio positions and metrics
settings-view.tsx - Alert configuration and preferences

UI Components:

skeleton.tsx - Loading state components
error-boundary.tsx - Error handling wrapper

Utilities:

lib/config.ts - Centralized configuration
lib/types.ts - TypeScript type definitions
lib/api.ts - API client with mock data fallback
lib/websocket.ts - WebSocket client for real-time updates

Backend Modules

main.rs - Axum server with REST endpoints
models.rs - Data structures for slots, transactions, wallets, and stats
simulation.rs - Simulation engine with Baseline and RaikuGateway modes
predictor.rs - Predictive analytics engine with ML-simulated predictions
zerion.rs - Mock Zerion API client (ready for real API integration)
gateway.rs - Gateway API client for transaction optimization

Data Flow

``` Frontend (Next.js) → API Layer (lib/api.ts) → Backend (Rust/Axum) ↓ ↓ Mock Data Fallback Simulation Engine + Zerion Client ```

Backend simulation engine generates slot and transaction data every 500ms
Frontend polls backend APIs every 500ms using SWR
If backend unavailable, frontend uses mock data automatically
Components update in real-time with smooth animations
Mode toggle switches backend simulation behavior and updates all UI

Performance Metrics

Baseline Mode:

75% success rate
100-300ms latency
70-85% execution certainty
No cost savings
No tip refunds

RaikuGateway Mode:

95%+ success rate
20-50ms latency
95-100% execution certainty
20-35% cost savings
70% tip refund rate

Wallet Analytics

The app demonstrates how Raiku+Gateway improves real wallet performance:

PnL Improvement: Better execution timing = better prices
Cost Savings: Gateway tip refunds reduce transaction costs
Execution Certainty: Deterministic slot scheduling = predictable execution
Success Rate: 97% vs 76% baseline

Predictive Analytics

The app includes AI-powered predictive analytics to help optimize transaction execution:

Success Prediction

Analyzes transaction size, priority fee, and network conditions
Predicts success probability with confidence score
Shows impact factors (transaction size, priority fee, congestion, Raiku+Gateway advantage)
Provides actionable recommendations

Slot Recommendations

Recommends optimal slots based on congestion levels
Shows expected success rate, cost, and latency for each slot
Compares AOT vs JIT reservation types
Explains reasoning for each recommendation

Cost Optimization

Calculates current vs optimized transaction costs
Shows potential savings in SOL and percentage
Provides specific recommendations for cost reduction
Explains trade-offs of different approaches

Example Predictions:

High Success (95%+): "Proceed with transaction - high success probability"
Medium Success (75-90%): "Consider increasing priority fee for better execution"
Low Success (<75%): "Wait for better network conditions or increase priority fee significantly"

Switching to Live APIs

The application is architected for easy API integration:

Zerion API

Add ZERION_API_KEY to backend/.env
Set USE_MOCK_DATA=false
Backend automatically switches to real Zerion API
No frontend changes required!

Gateway API

Add GATEWAY_API_KEY to backend/.env
Backend uses real Gateway for transaction optimization
Frontend displays live execution metrics

See INTEGRATION.md for detailed migration guide.

Mobile & PWA Support

The app is fully optimized for mobile devices and can be installed as a Progressive Web App:

Responsive Design - Adapts to all screen sizes (mobile, tablet, desktop)
Touch Optimized - 44px minimum touch targets for better usability
Hamburger Menu - Mobile-friendly navigation with slide-down menu
PWA Installable - Add to home screen on iOS and Android
Offline Ready - Service worker structure for offline support
Native Feel - Standalone display mode with theme colors

Installing as PWA

iOS:

Open in Safari
Tap Share button
Select "Add to Home Screen"

Android:

Open in Chrome
Tap menu (three dots)
Select "Add to Home Screen"

Advanced Features

Interactive Slot Details

Click any slot bar in the visualization to see detailed breakdown
View all transactions within a specific slot
See reservation type, delivery method, and tip refund status
Smooth modal animations with backdrop blur

Advanced Filtering

Search transactions by signature
Filter by amount range (min/max)
Filter by date range (start/end)
Save filter presets for quick access
Load and delete saved presets

Alert System

Configure custom alert rules
Alert types: success rate, latency, failed transactions, cost threshold
Enable/disable individual alerts
Visual toggle switches
Settings page at /settings

Documentation

INTEGRATION.md - Full stack integration guide with API documentation and UI logic
DEMO_GUIDE.md - Hackathon demo script (2-3 minutes)
IMPROVEMENTS.md - Detailed list of implemented improvements
backend/README.md - Backend-specific setup and architecture

Hackathon Demo

For a polished 2-3 minute demo, follow this flow:

Dashboard - Show live metrics and slot visualization
Slot Drilldown - Click a slot to show transaction details
Mode Toggle - Demonstrate Baseline vs Raiku+Gateway improvements
Wallet Analytics - Show PnL improvements and cost savings
Analytics - Display comparative charts and trends
Developer Tools - Show command palette and filtering

See DEMO_GUIDE.md for complete script with timing and talking points.

Browser Support

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile Safari (iOS 14+)
Chrome Mobile (Android 5+)

License

MIT

Integration Status

✅ Fully Integrated:

Global state management (Zustand)
Real-time WebSocket updates
Mock/live data toggle
Drilldown panels (transaction, asset, slot)
Notifications system
Command palette
Keyboard shortcuts
Error boundaries
Skeleton loading states

✅ Demo Ready:

Pre-populated mock data
Smooth animations
Consistent UI/UX
Mobile responsive
PWA installable

✅ Production Ready:

API integration hooks
Error handling
Fallback mechanisms
Performance optimized

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
app		app
backend		backend
components		components
hooks		hooks
lib		lib
public		public
styles		styles
DEMO_GUIDE.md		DEMO_GUIDE.md
IMPROVEMENTS.md		IMPROVEMENTS.md
INTEGRATION.md		INTEGRATION.md
README.md		README.md
commit.md		commit.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

ashum9/execution-demo

Folders and files

Latest commit

History

Repository files navigation