Skip to main content

6D Dashboard

Executive health dashboard for the Valhalla Suite. A real-time, 3D-visual representation of organizational health across six disciplines using a LCARS-inspired interface and GridHeim spreadsheets.

Quick Start​

# Development
pnpm dev

# Tests
pnpm test              # Unit tests
pnpm e2e               # End-to-end tests
pnpm test:coverage     # With coverage

# Build
pnpm build             # Production build
pnpm build:staging     # Staging build

# Deployment
pnpm deploy

Architecture​

Core Concepts​

6D Framework: A repeating 90-day operational cycle:

  1. Decide What's Important — Define purpose, values, top 5 priorities
  2. Set Goals That Lead — Convert to OKRs with weekly measurement
  3. Align Systems — Align people, process, tech to strategy
  4. Work the Plan — Weekly cadence: plan → commit → do → review
  5. Innovate Purposefully — Portfolio of experiments + bold bets
  6. Step Back — Retrospective: learn, prune, reset

Each wedge in the 3D ring represents one discipline and lights up/pulses based on health score and status.

File Structure​

src/
  app/
    routes/
      dashboard-6d/        # Main route component
        index.tsx
  components/
    lcars/                 # Layout & LCARS UI
      LcarsFrame.tsx
    three/                 # 3D scene
      SixDScene.tsx
      SixDWedge.tsx
    hud/                   # Panels & headers
      HealthHeader.tsx
      DisciplinePanel.tsx
    sheets/                # GridHeim sheets
      GridHeimSheets.tsx
  data/
    sixd.types.ts          # Type definitions
    sixd.config.ts         # Labels, colors, weights
    sixd.state.ts          # Redux slice
    sixd.selectors.ts      # Derived state & scoring
    sixd.mappers.ts        # THOR → 6D conversion
  services/
    thor.client.ts         # THOR API client
  theme/
    aurora-tokens.ts       # Color palette & tokens
    lcars-layout.css.ts    # LCARS CSS
  tests/
    e2e/                   # Playwright tests
      dashboard-6d.spec.ts
    unit/                  # Jest tests
      sixd.selectors.test.ts

Data Flow​

THOR API
   ↓
ThorSixDClient.getOverview()
   ↓
sixd.mappers (transform)
   ↓
Redux store (sixd.state)
   ↓
Components (via selectors)
   ↓
UI Updates + 3D Scene

Key Features​

3D Ring Visualization​

  • Six interactive wedges representing disciplines
  • Colors indicate health status (healthy/watch/risk/critical/paused)
  • Glow intensity bound to discipline score (0..100)
  • Pulse frequency reflects 7-day trend
  • Hover lifts wedge and shows tooltip
  • Click focuses discipline, tweens camera, opens panel
  • Keyboard: ←/→ cycle, Enter focus, Esc reset

Health Scoring​

Hysteresis-aware formula (default weights):

  • KR attainment: 60%
  • Plan throughput: 20%
  • Variance stability: 10%
  • Risk posture: 10%

Status bands with hysteresis prevent flickering:

  • Healthy: 65–100
  • Watch: 40–70
  • Risk: 20–45
  • Critical: 0–25

GridHeim Sheets​

All sheets are cross-linked and editable:

  • OKRs: Objectives, key results, targets, owners
  • Budget: Plan vs. actual, variance
  • Projections: Time-series forecasts (t0/t30/t60/t90)
  • Plan: Tasks, assignees, WIP state, blockers
  • SWOT: Strengths, weaknesses, opportunities, threats
  • Risks: Risk ID, likelihood, impact, mitigation

LCARS Layout​

LCARS-inspired grid layout with Aurora Valkyr theme:

  • Header: Overall health, trends, next milestone
  • Sidebar: Discipline filter (all / 1–6)
  • Content: 3D scene + right panel (discipline details or how-it-works)
  • Footer: Sheet tabs & data tables

Accessibility​

  • ARIA labels and roles on all interactive elements
  • Keyboard navigation (arrow keys, Enter, Esc)
  • Screen reader announcements for status changes
  • prefers-reduced-motion: disables animations & bloom
  • Contrast ≥ 4.5:1 (WCAG AA)
  • Hit targets ≥ 44px

Environment Variables​

# Required for production
REACT_APP_THOR_API_URL=https://api.valkyrlabs.com/v1
REACT_APP_ORGANIZATION_ID=<org-id>
REACT_APP_JWT_TOKEN=<token>

# Optional
REACT_APP_LOG_LEVEL=info
REACT_APP_ENABLE_DEVTOOLS=false

Testing​

Unit Tests (Jest)​

pnpm test

Tests include:

  • Scoring algorithms (KR attainment, hysteresis)
  • Status transitions (no flicker)
  • Selectors & derived state
  • Data mappers

E2E Tests (Playwright)​

pnpm e2e

Tests cover:

  • Load dashboard, display health
  • Hover/click wedges
  • Keyboard navigation
  • Open sheets, edit cells
  • Accessibility scans
  • Performance metrics (FCP < 2s)

Coverage​

pnpm test:coverage

Target: ≥ 80% coverage for data & selectors, ≥ 60% for components.

Performance​

  • JS bundle: < 230KB gzip (initial route)
  • 3D render: ≤ 8ms per frame on M1 (55+ FPS)
  • TTI: ≤ 2.0s on mid-tier hardware
  • Memory: < 100MB peak

Optimization tactics:

  • Lazy-load GridHeim sheets (only active sheet renders)
  • Instanced 3D geometry for wedges
  • Debounced THOR queries (300ms)
  • Memoized selectors (reselect)
  • Frozen transforms in 3D scene
  • PostProcessing disabled on prefers-reduced-motion

Configuration​

Custom Discipline Labels​

// In app initialization:
import { mergeSixDConfig } from './data/sixd.config';

const config = mergeSixDConfig({
  labels: {
    decide: 'Define Strategy',
    set_goals: 'Set Targets',
    // ...
  },
  tooltips: {
    decide: 'Your custom tooltip',
    // ...
  },
  scoringWeights: {
    krAttainment: 0.7, // increased weight
    planThroughput: 0.2,
    varianceStability: 0.05,
    riskPosture: 0.05,
  },
});

Integration with THOR​

The dashboard pulls data from THOR APIs:

  • GET /v1/goals → KPIs per discipline
  • GET /v1/tasks?type=start_stop → Start/Stop items
  • GET /v1/budgets → Budget sheets
  • POST /v1/start_stop/{id} → Update item status

See services/thor.client.ts for mock implementations.

Instrumentation​

All key user actions are instrumented:

window.vlk?.instrument?.('sixd.disciplineSelected', {
  discipline: 'set_goals',
  timestamp: Date.now(),
});

window.vlk?.instrument?.('sixd.sheetOpened', {
  sheet: 'okrs',
  timestamp: Date.now(),
});

Track via your observability platform (Segment, Mixpanel, etc.).

Deployment​

Local Dev Harness​

make harness-up
# App will be at http://localhost:3000
make harness-down

Docker​

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN pnpm install
RUN pnpm build
EXPOSE 3000
CMD ["pnpm", "start"]

Cloud (Vercel/Netlify)​

# Vercel
vercel

# Netlify
netlify deploy --prod --dir=dist

Known Issues & Gotchas​

  1. 3D Scene flicker on focus: Ensure Camera tween completes before allowing re-focus.
  2. Grid cell edit loses focus: Click outside to finalize, or press Enter.
  3. Bloom effect on low-end devices: Auto-detect and disable on devicePixelRatio < 1.5.
  4. THOR auth context: Always propagate auth token to async THOR calls.
  5. Lazy-loaded sheet data: Sheets render only when active (footer scrolls to view).

Future Enhancements​

  • Real-time WebSocket updates from THOR
  • Historical trend charts (30/90-day KPI history)
  • Custom discipline order via drag-reorder
  • Export dashboard as PDF report
  • Multi-organization switching
  • Discipline-level drill-down (mini dashboards)
  • Mobile app (React Native parity)
  • Dark mode toggle (already in theme tokens)

Contributing​

  1. Follow the 6D codegen pattern: modify OpenAPI specs in thorapi/, regenerate, then hand-write business logic in src/.
  2. Add tests for new features (unit + e2e).
  3. Update docs in this README and ValorIDE_docs/.
  4. Use the provided mock THOR client for dev; test with real API in staging.

Resources​

Support​

  • Issues: File in GitHub
  • Slack: #valkyr-6d-dashboard
  • Docs: See docs/ folder

Built with ❤️ by Valkyr Labs