2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > LIFE KPI Pyramid — Mission to Metrics< / title >
2026-07-07 07:11:50 +00:00
< link rel = "stylesheet" href = "/assets/css/landvex-complete.css" >
< style >
2026-07-05 06:41:32 +00:00
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body { font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ; background : #000 ; color : #fff ; line-height : 1.6 ; }
2026-07-07 07:11:50 +00:00
. header { background : #0a0a0a ; border-bottom : 1 px solid #333 ; padding : 24 px ; }
2026-07-05 06:41:32 +00:00
. header h1 { font-size : 1.5 rem ; color : #00d4ff ; }
. header . subtitle { color : #666 ; font-size : 0.85 rem ; }
. main { padding : 40 px ; max-width : 1200 px ; margin : 0 auto ; }
. pyramid { display : flex ; flex-direction : column ; gap : 16 px ; }
2026-07-07 07:11:50 +00:00
. level { border-radius : var ( - - radius - md ) ; padding : 24 px ; position : relative ; }
2026-07-05 06:41:32 +00:00
. level-mission { background : linear-gradient ( 135 deg , #7c3aed , #00d4ff ) ; }
. level-customer { background : #1a1a2e ; border : 2 px solid #7c3aed ; }
. level-platform { background : #1a1a2e ; border : 2 px solid #00d4ff ; }
. level-operational { background : #111 ; border : 1 px solid #333 ; }
. level-engineering { background : #111 ; border : 1 px solid #222 ; }
. level-label { font-size : 0.75 rem ; text-transform : uppercase ; letter-spacing : 2 px ; margin-bottom : 8 px ; opacity : 0.8 ; }
. level h2 { font-size : 1.3 rem ; margin-bottom : 8 px ; }
. level p { font-size : 0.9 rem ; opacity : 0.9 ; }
2026-07-07 07:11:50 +00:00
. metric-highlight { display : inline-block ; background : rgba ( 255 , 255 , 255 , 0.1 ) ; padding : 24 px ; border-radius : var ( - - radius - md ) ; margin-top : 12 px ; font-size : 1.1 rem ; font-weight : 600 ; }
. metrics-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 200 px , 1 fr ) ) ; gap : 16 px ; margin-top : 16 px ; }
. metric-card { background : rgba ( 0 , 0 , 0 , 0.3 ) ; border-radius : var ( - - radius - md ) ; padding : 12 px ; }
2026-07-05 06:41:32 +00:00
. metric-name { font-size : 0.8 rem ; opacity : 0.8 ; }
. metric-value { font-size : 1.5 rem ; font-weight : 700 ; margin-top : 4 px ; }
. metric-target { font-size : 0.75 rem ; opacity : 0.6 ; }
2026-07-07 07:11:50 +00:00
. rl-highlight { background : #111 ; border : 2 px solid #fbbf24 ; border-radius : var ( - - radius - md ) ; padding : 24 px ; margin : 24 px 0 ; }
2026-07-05 06:41:32 +00:00
. rl-highlight h2 { color : #fbbf24 ; margin-bottom : 12 px ; }
2026-07-07 07:11:50 +00:00
. event-log { background : #111 ; border-radius : var ( - - radius - md ) ; padding : 16 px ; margin-top : 16 px ; }
2026-07-05 06:41:32 +00:00
. event-item { display : flex ; justify-content : space-between ; padding : 8 px 0 ; border-bottom : 1 px solid #222 ; }
. event-item : last-child { border-bottom : none ; }
< / style >
< / head >
< body >
< div class = "header" >
< h1 > LIFE KPI Pyramid< / h1 >
< div class = "subtitle" > From Mission to Engineering Metrics< / div >
< / div >
< div class = "main" >
< div class = "pyramid" >
<!-- Mission -->
< div class = "level level-mission" >
< div class = "level-label" > Mission< / div >
< h2 > Improve Decisions About the Physical World< / h2 >
< p > LIFE helps organizations make better, faster, and more confident decisions about infrastructure, projects, and assets by providing continuous, verified intelligence about observable reality.< / p >
< / div >
<!-- Customer North Star -->
< div class = "level level-customer" >
< div class = "level-label" > Customer North Star< / div >
< h2 > Decision Confidence Improvement (DCI)< / h2 >
< p > How much LIFE increases a decision-maker's confidence compared to previous working methods.< / p >
< div class = "metric-highlight" > Target: +50% confidence improvement< / div >
< div class = "metrics-grid" >
< div class = "metric-card" >
< div class = "metric-name" > Better Decisions< / div >
< div class = "metric-value" > 0%< / div >
< div class = "metric-target" > Target: 80%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Faster Verification< / div >
< div class = "metric-value" > 0%< / div >
< div class = "metric-target" > Target: 70%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Lower Risk< / div >
< div class = "metric-value" > 0%< / div >
< div class = "metric-target" > Target: 60%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Efficient Prioritization< / div >
< div class = "metric-value" > 0%< / div >
< div class = "metric-target" > Target: 50%< / div >
< / div >
< / div >
< / div >
<!-- Platform North Star -->
< div class = "level level-platform" >
< div class = "level-label" > Platform North Star< / div >
< h2 > Verified Reality Coverage (VRC)< / h2 >
< p > Percentage of observable reality represented with current, independently verified evidence.< / p >
< div class = "metric-highlight" id = "vrc-value" > Loading...< / div >
< div class = "metrics-grid" >
< div class = "metric-card" >
< div class = "metric-name" > Object Coverage< / div >
< div class = "metric-value" id = "obj-cov" > —< / div >
< div class = "metric-target" > Target: 95%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Multi-source< / div >
< div class = "metric-value" id = "multi-src" > —< / div >
< div class = "metric-target" > Target: 60%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Freshness< / div >
< div class = "metric-value" id = "fresh" > —< / div >
< div class = "metric-target" > Target: 7d< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Confidence< / div >
< div class = "metric-value" id = "conf" > —< / div >
< div class = "metric-target" > Target: 80%< / div >
< / div >
< / div >
< / div >
<!-- Reality Latency -->
< div class = "rl-highlight" >
2026-07-07 07:11:50 +00:00
< h2 > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M9 2L5 9H8L7 14L11 7H8L9 2Z" fill = "#f59e0b" / > < / svg > Reality Latency (RL)< / h2 >
2026-07-05 06:41:32 +00:00
< p > < strong > Signature Metric:< / strong > Time between reality changing and LIFE knowing about it.< / p >
< p > Current Average: < strong id = "rl-value" > Loading...< / strong > hours | Target: 24h< / p >
< div class = "event-log" id = "event-log" >
2026-07-07 07:11:50 +00:00
< div > Loading events...< / div >
2026-07-05 06:41:32 +00:00
< / div >
< / div >
<!-- Operational -->
< div class = "level level-operational" >
< div class = "level-label" > Operational Metrics< / div >
< h2 > Platform Operations< / h2 >
< div class = "metrics-grid" >
< div class = "metric-card" >
< div class = "metric-name" > Ingestion Latency< / div >
< div class = "metric-value" > 4h< / div >
< div class = "metric-target" > Target: 1h< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Mission Completion< / div >
< div class = "metric-value" > 78%< / div >
< div class = "metric-target" > Target: 95%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > AI Precision< / div >
< div class = "metric-value" > 72%< / div >
< div class = "metric-target" > Target: 85%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Evidence Density< / div >
< div class = "metric-value" > 0.4< / div >
< div class = "metric-target" > Target: 5/km< / div >
< / div >
< / div >
< / div >
<!-- Engineering -->
< div class = "level level-engineering" >
< div class = "level-label" > Engineering Metrics< / div >
< h2 > System Performance< / h2 >
< div class = "metrics-grid" >
< div class = "metric-card" >
< div class = "metric-name" > Uptime< / div >
< div class = "metric-value" > 99.5%< / div >
< div class = "metric-target" > Target: 99.9%< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > API Response< / div >
< div class = "metric-value" > 120ms< / div >
< div class = "metric-target" > Target: 50ms< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > Cost/km< / div >
< div class = "metric-value" > $0.45< / div >
< div class = "metric-target" > Target: $0.20< / div >
< / div >
< div class = "metric-card" >
< div class = "metric-name" > GPU Util< / div >
< div class = "metric-value" > 65%< / div >
< div class = "metric-target" > Target: 80%< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< script >
async function loadKPIs ( ) {
try {
const response = await fetch ( '/api/v1/life-kpi/public/kpi-pyramid' ) ;
const data = await response . json ( ) ;
document . getElementById ( 'vrc-value' ) . textContent =
` VRC: ${ data . platform _north _star . current _value } % (Target: ${ data . platform _north _star . target _2026 } %) ` ;
document . getElementById ( 'obj-cov' ) . textContent = data . platform _north _star . breakdown . object _coverage + '%' ;
document . getElementById ( 'multi-src' ) . textContent = data . platform _north _star . breakdown . multi _source _verification + '%' ;
document . getElementById ( 'fresh' ) . textContent = data . platform _north _star . breakdown . evidence _freshness _days + 'd' ;
document . getElementById ( 'conf' ) . textContent = data . platform _north _star . breakdown . average _confidence + '%' ;
} catch ( e ) {
console . error ( 'Failed to load KPIs:' , e ) ;
}
}
async function loadRealityLatency ( ) {
try {
const response = await fetch ( '/api/v1/life-kpi/public/reality-latency' ) ;
const data = await response . json ( ) ;
document . getElementById ( 'rl-value' ) . textContent = data . reality _latency . current _average _hours ;
const eventLog = document . getElementById ( 'event-log' ) ;
eventLog . innerHTML = data . reality _latency . recent _events . map ( evt => `
<div class="event-item">
<div>
<strong> ${ evt . event _type } </strong><br>
2026-07-07 07:11:50 +00:00
<span> ${ evt . description } </span>
2026-07-05 06:41:32 +00:00
</div>
2026-07-07 07:11:50 +00:00
<div>
<span> ${ evt . latency _hours } h</span><br>
<span> ${ evt . detection _source } </span>
2026-07-05 06:41:32 +00:00
</div>
</div>
` ) . join ( '' ) ;
} catch ( e ) {
console . error ( 'Failed to load RL:' , e ) ;
}
}
loadKPIs ( ) ;
loadRealityLatency ( ) ;
< / script >
< / body >
< / html >
