@@ -504,6 +592,7 @@ const MD_DOCS = [
const PANEL_META = {
jason: ['Jason', 'Gemini 2.5 Pro · ADK'],
billing: ['CostGuard', 'Token & kostnad · live'],
+ pricing: ['Prisingskalkulator', 'CostGuard · ROI-estimat'],
build: ['Cloud Build', 'Pipeline · propane-will-491900-m5'],
vms: ['VM-er', 'Compute Engine · us-central1-b'],
sites: ['Sites & Moduler', 'Alle Vauco-flater'],
@@ -520,6 +609,67 @@ const SITES_DATA = [
{icon:'🔧', name:'Jason Chat', url:'https://opax.vauco.no/static/jason.html', desc:'Jason standalone UI', status:'live'},
]
+// PRICING TIERS (CG4d — locked from MASTERPLAN)
+const TIERS = [
+ { name:'Starter', min:0, max:3000, price:499, color:'var(--accent-2)' },
+ { name:'Guard', min:3000, max:15000, price:999, color:'var(--accent)' },
+ { name:'Shield', min:15000, max:50000, price:1999, color:'var(--amber)' },
+ { name:'Enterprise', min:50000, max:Infinity,price:3500, color:'var(--danger)' },
+]
+
+function fmtUSD(n){
+ if(n>=1000) return '$'+Math.round(n).toLocaleString('en-US')
+ return '$'+n
+}
+function activeTier(spend){
+ return TIERS.find(t => spend >= t.min && spend < t.max) || TIERS[TIERS.length-1]
+}
+
+function renderTierGrid(spend){
+ const active = activeTier(spend)
+ const grid = document.getElementById('tier-grid')
+ grid.innerHTML = TIERS.map(t => {
+ const isActive = t.name === active.name
+ const rangeStr = t.max === Infinity ? fmtUSD(t.min)+'+' : fmtUSD(t.min)+'–'+fmtUSD(t.max)
+ return `
+
${t.name}
+
${rangeStr}/mnd
+
${fmtUSD(t.price)}
+
per måned
+
`
+ }).join('')
+}
+
+function updatePricing(val){
+ const spend = Number(val)
+ const tier = activeTier(spend)
+
+ document.getElementById('spend-display').textContent = fmtUSD(spend)
+
+ renderTierGrid(spend)
+
+ // ROI: 15% of spend saved via CostGuard optimisation
+ const savings = spend * 0.15
+ const net_monthly = savings - tier.price
+ const net_annual = net_monthly * 12
+ const multiplier = tier.price > 0 ? (savings / tier.price) : 0
+
+ document.getElementById('roi-savings').textContent = fmtUSD(Math.round(savings))
+ document.getElementById('roi-savings-sub').textContent = '15% av ' + fmtUSD(spend) + ' via optimalisering og varsler'
+
+ document.getElementById('roi-multiplier').textContent = multiplier.toFixed(2) + '×'
+ document.getElementById('roi-multiplier-sub').textContent = 'per måned · basert på ' + fmtUSD(tier.price) + '/mnd'
+
+ const annualEl = document.getElementById('roi-annual')
+ if(net_annual >= 0){
+ annualEl.textContent = fmtUSD(Math.round(net_annual))
+ annualEl.style.color = 'var(--green)'
+ } else {
+ annualEl.textContent = '−' + fmtUSD(Math.round(Math.abs(net_annual)))
+ annualEl.style.color = 'var(--danger)'
+ }
+}
+
// SESSION
function sid(){
let s = sessionStorage.getItem(SESSION_KEY)
@@ -547,6 +697,13 @@ function go(name){
if(name==='sites') renderSites()
if(name==='terminal') initTerminal()
if(name==='md') renderMdGrid()
+ if(name==='pricing') initPricing()
+}
+
+function initPricing(){
+ const slider = document.getElementById('spend-slider')
+ renderTierGrid(Number(slider.value))
+ updatePricing(slider.value)
}
// BUILD STATUS POLL
@@ -589,7 +746,7 @@ async function loadBilling(){
h+='
⚠️ Anomalier
'
anoms.slice(0,5).forEach(a=>{
const sev=(a.severity||'').toLowerCase()
- h+=`
${sev==='high'?'🔴':'🟡'}
${esc(a.service||a.type||'Ukjent')}
${esc(a.description||a.message||'')}
${esc(a.severity||'medium')}
`
+ h+=`
${sev==='high'?'🔴':'🟡'}
${esc(a.service||a.type||'Ukjent')}
${esc(a.description||a.message||'')}
${esc(a.severity||'medium')}
`
})
h+='
'
}else{ h+='
✅ Ingen anomalier
' }
@@ -890,6 +1047,9 @@ function exportHistory(){
}
;(function(){ const h=lh();if(!h.length)return;h.forEach(m=>appendMsg(m.role,m.text,m.ts));document.getElementById('messages').scrollTop=99999 })()
inp.focus()
+// Init pricing on load so slider is ready if user navigates directly
+renderTierGrid(5000)
+updatePricing(5000)