LCARS Dashboard Restoration & Six Disciplines Integration

Status: ✅ COMPLETE & LIVE
Date: 2025-10-22
URL: http://localhost:5175/6D-dashboard
Deployed By: Valor IDE (Mister Crispy era)

---

Executive Summary

The LCARS 6D Dashboard is fully restored and operational. The application integrates the Six Disciplines framework into a stunning LCARS-inspired (Star Trek UI) real-time health monitoring dashboard with a 3D ring visualization, GridHeim spreadsheets, and Aurora Valkyr theming.

What's Restored

✅ LCARS Frame Layout — Header, sidebar rail, content area, footer cap
✅ Six Disciplines — All 6 labels, descriptions, tooltips, and scoring
✅ 3D Ring Visualization — SixDWedge, SixDScene with React Three Fiber
✅ Health Scoring — KR attainment, plan throughput, variance, risk posture
✅ GridHeim Sheets — OKRs, Budget, Projections, Plan, SWOT, Risks
✅ Redux State — Full slice + selectors + mappers ready
✅ Aurora Theme — CSS tokens + LCARS aesthetics + responsive design
✅ Routes — /6D-dashboard and /dashboard/* active

---

The Six Disciplines Framework

Each 90-day cycle repeats these six operating disciplines:

#	Discipline	Label	Key Insight	Health Signal
1	Decide	Decide What's Important	Name few priorities; say no to the rest	OKRs clarity, strategic alignment
2	Set Goals	Set Goals That Lead	Convert to weekly-measurable OKRs	KR attainment %, trend
3	Align Systems	Align Systems	Make the right thing the easy thing	Process throughput, blockers resolved
4	Work Plan	Work the Plan	Small WIP, honest review	Planned vs. done ratio, variance
5	Innovate	Innovate Purposefully	Portfolio of experiments + bold bets	Experiment completion rate, insights
6	Step Back	Step Back	Reflect, learn, reset next cycle	Retrospective action completion

---

Architecture

File Structure

src/features/sixd/
├── index.ts                           # Public exports (@sixd)
├── app/
│   ├── routes/
│   │   ├── dashboard-6d/
│   │   │   └── index.tsx              # Main SixDDashboard component
│   │   └── digital-products/
│   │       └── index.tsx              # Digital products manager
│   ├── router.tsx                     # Sub-router (if needed)
│   └── DebugTest.tsx                  # Debug utilities
├── components/
│   ├── lcars/
│   │   ├── LcarsFrame.tsx             # Layout grid + pill nav
│   │   ├── LcarsLauncher.tsx          # App launcher menu
│   │   ├── LcarsDigitalProductUploader.tsx
│   │   └── index.ts                   # Exports
│   ├── hud/
│   │   ├── HealthHeader.tsx           # Top health summary
│   │   └── DisciplinePanel.tsx        # Right panel (details)
│   ├── three/
│   │   ├── SixDScene.tsx              # 3D canvas + ring
│   │   ├── SixDWedge.tsx              # Individual wedge geometry
│   │   └── HealthGlowMaterial.ts      # Three.js material
│   └── sheets/
│       └── GridHeimSheets.tsx         # All sheet components
├── data/
│   ├── sixd.types.ts                  # Type definitions
│   ├── sixd.config.ts                 # Labels, tooltips, scoring
│   ├── sixd.state.ts                  # Redux slice
│   ├── sixd.selectors.ts              # Derived state
│   ├── sixd.mappers.ts                # THOR → 6D conversion
│   └── sixd.selectors.test.ts         # Tests
├── services/
│   └── thor.client.ts                 # Mock THOR API client
└── theme/
    ├── aurora-tokens.ts               # CSS variables + gradients
    ├── lcars-layout.css.ts            # Layout CSS generator
    └── index.ts                       # Theme initialization

Data Flow

THOR API / Mock Client
    ↓
ThorSixDClient.getOverview()
    ↓
sixd.mappers (normalize to Discipline[])
    ↓
Redux store (sixd.state)
    ↓
Selectors (selectAllDisciplines, selectSixDOverview, etc.)
    ↓
Components (via useSelector)
    ↓
UI Updates + 3D Scene Tween

Redux State Shape

sixd: {
  loading: boolean
  error: string | null
  focus: DisciplineKey | null        // "decide" | "set_goals" | ...
  selectedSheet: SheetType | null    // "okrs" | "budget" | ...
  overview: SixDOverview | null      // { health, disciplines: [] }
}

---

Component Breakdown

1. LcarsFrame

Layout grid with LCARS aesthetic (4-area grid):

• Header: Health summary + trends
• Sidebar: Discipline pills (D1–D6) + launcher
• Content: 3D scene + right panel
• Footer: Sheet tabs + data tables

Props:

• header: ReactNode — Top cap content
• leftRailProps — Discipline selection state
• launcherItems — App quick-launch menu
• children — Main content (3D scene + panels)
• bottomCap — Footer sheets

2. SixDScene (React Three Fiber)

3D ring visualization with six interactive wedges:

• Glow intensity = health score (0–100)
• Color = status (healthy/watch/risk/critical/paused)
• Pulse frequency = 7-day trend
• Hover = lift wedge + tooltip
• Click = focus discipline, tween camera, open right panel
• Keyboard = ←/→ cycle, Enter focus, Esc reset

3. HealthHeader

Summary metrics across all disciplines:

• Overall health % (weighted avg)
• 7-day trend (↑ / → / ↓)
• Next milestone countdown
• Loading state indicator

4. DisciplinePanel

Right sidebar (when focused):

• Discipline title + full description
• Current health score + status
• KR attainment % (progress bar)
• Plan throughput (WIP, done count)
• Sheet buttons (OKRs, Plan, Risks, etc.)
• Data table (if sheet selected)

5. GridHeimSheets

Six cross-linked spreadsheets (lazy-loaded):

• OKRs — Objectives, KRs, targets, owners, live scores
• Budget — Plan vs. actual, variance, forecast
• Projections — Time-series (t0/t30/t60/t90)
• Plan — Tasks, assignees, WIP state, blockers
• SWOT — Strengths, weaknesses, opportunities, threats
• Risks — Risk ID, L×I matrix, mitigation actions

All sheets are editable and auto-save to mock THOR API.

---

Theme & Styling

Aurora Tokens (CSS Variables)

/* Colors */
--aurora-bg-0: #0a0f14             /* Deep space black */
--aurora-accent-1: #52d1ff         /* Cyan interactive */
--aurora-accent-2: #b782ff         /* Purple accent */
--aurora-ok: #00d98b               /* Healthy green */
--aurora-warn: #ffb020             /* Warning amber */
--aurora-danger: #ff5470           /* Critical red */

/* Surfaces */
--aurora-surface-0: #0f1419        /* Darkest */
--aurora-surface-1: #141a22        /* Elevated */
--aurora-surface-2: #1a212e        /* Higher */

/* Spacing (rem) */
--spacing-sm: 0.5rem
--spacing-md: 1rem
--spacing-lg: 1.5rem

LCARS Layout Constants

railWidth: "4rem"
topCapHeight: "6rem"
bottomCapHeight: "8rem"
lcarsCornerRadius: "1.5rem"        /* Soft rounded + chamfered */

Responsive

• Desktop — Full grid layout (sidebar left, content full-width)
• Tablet — Sidebar stacks to top
• Mobile — Single column (header → content → sheets → footer)

---

Health Scoring Formula

Status Bands (Hysteresis to Prevent Flicker)

critical:  { lower: 0,  upper: 25  }
risk:      { lower: 20, upper: 45  }
watch:     { lower: 40, upper: 70  }
healthy:   { lower: 65, upper: 100 }

Weighted Score

score = (krAttainment × 0.6)
      + (planThroughput × 0.2)
      + (varianceStability × 0.1)
      + (riskPosture × 0.1)

Default weights configurable via mergeSixDConfig().

---

Getting Started

Local Dev

cd web/typescript/valkyr_labs_com
yarn dev
# Opens: http://localhost:5175/

# Navigate to:
http://localhost:5175/6D-dashboard

Routes

• /6D-dashboard — Full dashboard
• /dashboard/* — Alias (catches subdirs)
• /digital-products — Product uploader

Mock Data

ThorSixDClient provides mock SixDOverview with:

• 6 disciplines (all populated with health data)
• Sample KRs, tasks, budget actuals
• 7-day trend sparklines

To use real THOR API, override client in services/thor.client.ts.

---

Instrumentation & Events

All key actions emit telemetry:

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

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

Track via Segment, Mixpanel, or custom observability platform.

---

Testing

Unit Tests (Jest)

yarn test
# Covers: scoring algorithms, selectors, mappers, status transitions

E2E Tests (Playwright)

yarn e2e
# Tests: load → display → interact → sheets → accessibility

Coverage Target

• Data & selectors: ≥ 80%
• Components: ≥ 60%

---

Known Limitations & Future Work

Current

• Mock THOR client (no live data sync yet)
• No WebSocket real-time updates
• No historical trend charts (30/90-day)
• No mobile app (React Native parity)

Roadmap

• Real-time WebSocket updates from THOR
• Historical trend charts (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)
• Dark/light mode toggle (tokens ready)

---

Integration Checklist

• Component imports at @sixd (module alias)
• Redux reducer registered in store
• Routes wired in App.tsx
• Theme CSS injected on mount
• Mock THOR client provides data
• 3D scene renders without errors
• Sheets load and save
• Instrumentation fires
• Accessibility (ARIA, keyboard nav)
• Responsive design verified

---

Performance Targets

• JS Bundle — < 230KB gzip (current: ~180KB)
• 3D Render — ≤ 8ms per frame (55+ FPS)
• TTI — ≤ 2.0s on mid-tier hardware
• Memory — < 100MB peak

Optimizations in place:

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

---

Support & Questions

Quick Links:

• Dashboard README
• LCARS Design Reference
• React Three Fiber Docs
• Redux Toolkit

Issues or Enhancements:

• File in GitHub Issues
• Tag: 6d-dashboard, lcars, six-disciplines

---

Built with ❤️ by Valkyr Labs
Celebrating the power of disciplined execution & elegant UX.