generated from coulomb/repo-seed
416 lines
14 KiB
JavaScript
416 lines
14 KiB
JavaScript
const euro = (value) => `€${Number(value).toFixed(2)}`;
|
||
|
||
const SECTION_META = {
|
||
"cost-floor": {
|
||
eyebrow: "Economic Observatory · Cost Floor",
|
||
title: "Operator liquidity",
|
||
lede: (data) =>
|
||
`Period ${data.period}. Minimum viable economics: platform cost, margin, and liquidity burn from ledgers.`,
|
||
},
|
||
"value-range": {
|
||
eyebrow: "Economic Observatory · Value Range",
|
||
title: "Customer value bands",
|
||
lede: (data) =>
|
||
`Period ${data.period}. Segment-level willingness-to-pay hypotheses above the cost floor.`,
|
||
},
|
||
"market-price": {
|
||
eyebrow: "Economic Observatory · Market Price",
|
||
title: "Competitive context",
|
||
lede: (data) =>
|
||
`Reviewed ${data.market_price.last_reviewed ?? "—"}. Evidence about alternatives, capabilities, and public pricing.`,
|
||
},
|
||
};
|
||
|
||
let currentData = null;
|
||
let activeSection = "cost-floor";
|
||
|
||
function normalizeData(data) {
|
||
const snapshot = data.snapshot ?? {};
|
||
const active = (data.pricing_models ?? []).find((model) => model.status === "active");
|
||
|
||
if (!data.cost_floor) {
|
||
data.cost_floor = {
|
||
cost_per_member: snapshot.cost_per_member ?? "0",
|
||
monthly_total_platform_cost: snapshot.monthly_total_platform_cost ?? "0",
|
||
active_price: active?.access_fee_amount ?? snapshot.monthly_revenue ?? "0",
|
||
active_model_name: active?.name ?? null,
|
||
};
|
||
}
|
||
|
||
if (!data.value_range) {
|
||
data.value_range = {
|
||
current_price_eur: active?.access_fee_amount ?? snapshot.monthly_revenue ?? "0",
|
||
aggregate_low_eur: active?.access_fee_amount ?? "0",
|
||
aggregate_high_eur: active?.access_fee_amount ?? "0",
|
||
cost_per_member_eur: snapshot.cost_per_member ?? "0",
|
||
segments: [],
|
||
value_drivers: [],
|
||
notes: "Value range data unavailable — restart observatory.server to load the latest API.",
|
||
};
|
||
}
|
||
|
||
if (!data.market_price) {
|
||
data.market_price = {
|
||
alternative_count: 0,
|
||
priced_alternative_count: 0,
|
||
market_low_eur: null,
|
||
market_high_eur: null,
|
||
last_reviewed: null,
|
||
alternatives: [],
|
||
notes: "Market signals unavailable — restart observatory.server to load the latest API.",
|
||
};
|
||
}
|
||
|
||
return data;
|
||
}
|
||
|
||
async function loadDashboard(period) {
|
||
const query = period ? `?period=${encodeURIComponent(period)}` : "";
|
||
const response = await fetch(`/api/dashboard${query}`);
|
||
if (!response.ok) throw new Error("Failed to load dashboard");
|
||
return response.json();
|
||
}
|
||
|
||
function setBadge(el, status) {
|
||
el.textContent = status;
|
||
el.active = status === "generating" || status === "neutral";
|
||
el.draft = status === "burning";
|
||
}
|
||
|
||
function setSection(sectionId) {
|
||
activeSection = sectionId;
|
||
document.querySelectorAll(".obs-panel").forEach((panel) => {
|
||
const active = panel.dataset.section === sectionId;
|
||
panel.hidden = !active;
|
||
panel.classList.toggle("obs-panel--active", active);
|
||
});
|
||
document.querySelectorAll("wn-sidebar-item[data-section]").forEach((item) => {
|
||
item.active = item.dataset.section === sectionId;
|
||
});
|
||
|
||
const meta = SECTION_META[sectionId];
|
||
const header = document.getElementById("page-header");
|
||
header.eyebrow = meta.eyebrow;
|
||
header.title = meta.title;
|
||
if (currentData) {
|
||
header.lede = meta.lede(currentData);
|
||
}
|
||
|
||
const badge = document.getElementById("liquidity-badge");
|
||
badge.style.display = sectionId === "cost-floor" ? "" : "none";
|
||
}
|
||
|
||
function bindNavigation() {
|
||
document.querySelectorAll("wn-sidebar-item[data-section]").forEach((item) => {
|
||
item.addEventListener("click", () => setSection(item.dataset.section));
|
||
});
|
||
}
|
||
|
||
function renderCostFloor(data) {
|
||
const { snapshot, liquidity } = data;
|
||
const cards = [
|
||
{
|
||
label: "Remaining budget",
|
||
value: euro(liquidity.remaining_budget),
|
||
sub: `${liquidity.months_tracked} months tracked`,
|
||
},
|
||
{
|
||
label: "Period net liquidity",
|
||
value: euro(snapshot.period_net_liquidity),
|
||
sub: snapshot.liquidity_status,
|
||
},
|
||
{
|
||
label: "Cost per member",
|
||
value: euro(data.cost_floor.cost_per_member),
|
||
sub: `Platform ${euro(data.cost_floor.monthly_total_platform_cost)} / mo`,
|
||
},
|
||
{
|
||
label: "Gross margin",
|
||
value: euro(snapshot.gross_margin),
|
||
sub: `${snapshot.gross_margin_pct}% of gross revenue`,
|
||
},
|
||
{
|
||
label: "Infrastructure / month",
|
||
value: euro(snapshot.monthly_infrastructure_cost),
|
||
sub: `Processing ${euro(snapshot.monthly_payment_processing_cost)}`,
|
||
},
|
||
{
|
||
label: "Active price",
|
||
value: euro(data.cost_floor.active_price),
|
||
sub: data.cost_floor.active_model_name ?? "—",
|
||
},
|
||
];
|
||
|
||
document.getElementById("metric-grid").innerHTML = cards
|
||
.map(
|
||
(card) => `
|
||
<wn-card size="sm">
|
||
<wn-eyebrow slot="header">${card.label}</wn-eyebrow>
|
||
<div class="obs-metric__value">${card.value}</div>
|
||
<span slot="footer">${card.sub}</span>
|
||
</wn-card>`
|
||
)
|
||
.join("");
|
||
|
||
const initial = Number(liquidity.initial_budget);
|
||
const remaining = Number(liquidity.remaining_budget);
|
||
const pct = Math.max(0, Math.min(100, (remaining / initial) * 100));
|
||
const banner = document.getElementById("budget-banner");
|
||
document.getElementById("budget-fill").style.width = `${pct}%`;
|
||
document.getElementById("budget-caption").textContent =
|
||
remaining >= 0 ? "Within allocated budget" : "Over allocated budget";
|
||
banner.variant = remaining < initial * 0.25 ? "warn" : "info";
|
||
|
||
document.getElementById("budget-stats").innerHTML = [
|
||
["Initial budget", euro(initial)],
|
||
["Cumulative member payments (net)", euro(liquidity.cumulative_member_payments)],
|
||
["Cumulative infrastructure", euro(liquidity.cumulative_infrastructure_cost)],
|
||
["Cumulative processing", euro(liquidity.cumulative_payment_processing_cost)],
|
||
]
|
||
.map(
|
||
([label, value]) => `
|
||
<wn-field-row label="${label}" narrow>
|
||
<span class="wn-field-row__value">${value}</span>
|
||
</wn-field-row>`
|
||
)
|
||
.join("");
|
||
|
||
const max = Math.max(...data.history.map((row) => Math.abs(Number(row.net_liquidity))), 1);
|
||
document.getElementById("liquidity-chart").innerHTML = data.history
|
||
.map((row) => {
|
||
const value = Number(row.net_liquidity);
|
||
const width = (Math.abs(value) / max) * 50;
|
||
const barClass = value < 0 ? "obs-liquidity-row__bar--neg" : "obs-liquidity-row__bar--pos";
|
||
const valueClass = value < 0 ? "obs-liquidity-row__value--neg" : "";
|
||
return `
|
||
<div class="obs-liquidity-row">
|
||
<div class="obs-liquidity-row__period">${row.period}</div>
|
||
<div class="obs-liquidity-row__bar-wrap">
|
||
<div class="obs-liquidity-row__bar ${barClass}" style="width:${width}%"></div>
|
||
</div>
|
||
<div class="obs-liquidity-row__value ${valueClass}">${euro(value)}</div>
|
||
</div>`;
|
||
})
|
||
.join("");
|
||
|
||
const domains = data.infrastructure.domains?.domains ?? [];
|
||
const servers = data.infrastructure.virtual_servers?.servers ?? [];
|
||
const stripe = data.infrastructure.stripe?.membership ?? {};
|
||
const payout = data.infrastructure.stripe?.payout_account ?? "payout";
|
||
const infraItems = [
|
||
...domains.map(
|
||
(d) =>
|
||
`<wn-field-row label="${d.name}" narrow><span class="wn-field-row__value">${d.monthly_eur} EUR/mo · ${d.tld}</span></wn-field-row>`
|
||
),
|
||
...servers.map(
|
||
(s) =>
|
||
`<wn-field-row label="${s.name}" narrow><span class="wn-field-row__value">${s.monthly_eur} EUR/mo · since ${s.started}</span></wn-field-row>`
|
||
),
|
||
`<wn-field-row label="Stripe · ${stripe.member_username ?? "member"}" narrow><span class="wn-field-row__value">${stripe.gross_monthly_eur} gross · ${stripe.fee_monthly_eur} fee · ${stripe.net_payout_monthly_eur} net to ${payout}</span></wn-field-row>`,
|
||
];
|
||
document.getElementById("infra-stack").innerHTML = `<div class="obs-infra-list">${infraItems.join("")}</div>`;
|
||
|
||
document.getElementById("history-body").innerHTML = data.history
|
||
.map(
|
||
(row) => `
|
||
<tr>
|
||
<td class="mono">${row.period}</td>
|
||
<td class="mono">${row.active_members}</td>
|
||
<td class="obs-num mono">${euro(row.gross_revenue)}</td>
|
||
<td class="obs-num mono">${euro(row.infrastructure_cost)}</td>
|
||
<td class="obs-num mono">${euro(row.payment_processing_cost)}</td>
|
||
<td class="obs-num mono">${euro(row.net_liquidity)}</td>
|
||
</tr>`
|
||
)
|
||
.join("");
|
||
|
||
document.getElementById("pricing-body").innerHTML = data.pricing_models
|
||
.map(
|
||
(model) => `
|
||
<tr>
|
||
<td class="mono">${model.id}</td>
|
||
<td>${model.name}</td>
|
||
<td class="mono">${model.model_type}</td>
|
||
<td><wn-tag>${model.status}</wn-tag></td>
|
||
</tr>`
|
||
)
|
||
.join("");
|
||
|
||
setBadge(document.getElementById("liquidity-badge"), snapshot.liquidity_status);
|
||
}
|
||
|
||
function renderValueRangeBand(low, high, current) {
|
||
const min = Number(low);
|
||
const max = Number(high);
|
||
const cur = Number(current);
|
||
const span = Math.max(max - min, 0.01);
|
||
const curPct = Math.max(0, Math.min(100, ((cur - min) / span) * 100));
|
||
return `
|
||
<div class="obs-range">
|
||
<div class="obs-range__labels">
|
||
<span class="mono">${euro(min)}</span>
|
||
<span class="mono obs-range__current">${euro(cur)} now</span>
|
||
<span class="mono">${euro(max)}</span>
|
||
</div>
|
||
<div class="obs-range__track">
|
||
<div class="obs-range__fill" style="width:${curPct}%"></div>
|
||
<div class="obs-range__marker" style="left:${curPct}%"></div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function renderValueRange(data) {
|
||
const vr = data.value_range;
|
||
document.getElementById("value-summary").innerHTML = [
|
||
{
|
||
label: "Current price",
|
||
value: euro(vr.current_price_eur),
|
||
sub: data.cost_floor.active_model_name ?? "—",
|
||
},
|
||
{
|
||
label: "Aggregate band",
|
||
value: `${euro(vr.aggregate_low_eur)} – ${euro(vr.aggregate_high_eur)}`,
|
||
sub: `${vr.segments.length} segments`,
|
||
},
|
||
{
|
||
label: "Cost per member",
|
||
value: euro(vr.cost_per_member_eur),
|
||
sub: "Cost floor reference",
|
||
},
|
||
]
|
||
.map(
|
||
(card) => `
|
||
<wn-card size="sm">
|
||
<wn-eyebrow slot="header">${card.label}</wn-eyebrow>
|
||
<div class="obs-metric__value obs-metric__value--sm">${card.value}</div>
|
||
<span slot="footer">${card.sub}</span>
|
||
</wn-card>`
|
||
)
|
||
.join("");
|
||
|
||
document.getElementById("value-range-notes").textContent = vr.notes || "";
|
||
document.getElementById("value-segments").innerHTML = vr.segments
|
||
.map(
|
||
(segment) => `
|
||
<wn-card>
|
||
<wn-eyebrow slot="header">${segment.name}</wn-eyebrow>
|
||
<wn-tag slot="header">${segment.confidence}</wn-tag>
|
||
${renderValueRangeBand(segment.low_eur, segment.high_eur, vr.current_price_eur)}
|
||
<p class="small">${segment.evidence}</p>
|
||
<span slot="footer">Headroom ${euro(segment.headroom_to_high_eur)}</span>
|
||
<span slot="footer">${segment.drivers.join(" · ")}</span>
|
||
</wn-card>`
|
||
)
|
||
.join("");
|
||
|
||
document.getElementById("value-drivers").innerHTML = vr.value_drivers
|
||
.map(
|
||
(driver) => `
|
||
<wn-field-row label="${driver.label}" narrow>
|
||
<span class="wn-field-row__value">${driver.note}</span>
|
||
<span class="wn-field-row__aside">${driver.strength}</span>
|
||
</wn-field-row>`
|
||
)
|
||
.join("");
|
||
}
|
||
|
||
function renderMarketPrice(data) {
|
||
const market = data.market_price;
|
||
const span =
|
||
market.market_low_eur != null && market.market_high_eur != null
|
||
? `${euro(market.market_low_eur)} – ${euro(market.market_high_eur)}`
|
||
: "—";
|
||
|
||
document.getElementById("market-summary").innerHTML = [
|
||
{
|
||
label: "Alternatives tracked",
|
||
value: market.alternative_count,
|
||
sub: `${market.priced_alternative_count} with public monthly price`,
|
||
},
|
||
{
|
||
label: "Priced span",
|
||
value: span,
|
||
sub: `Reviewed ${market.last_reviewed ?? "—"}`,
|
||
},
|
||
{
|
||
label: "Coulomb list price",
|
||
value: euro(data.value_range.current_price_eur),
|
||
sub: data.cost_floor.active_model_name ?? "—",
|
||
},
|
||
]
|
||
.map(
|
||
(card) => `
|
||
<wn-card size="sm">
|
||
<wn-eyebrow slot="header">${card.label}</wn-eyebrow>
|
||
<div class="obs-metric__value obs-metric__value--sm">${card.value}</div>
|
||
<span slot="footer">${card.sub}</span>
|
||
</wn-card>`
|
||
)
|
||
.join("");
|
||
|
||
document.getElementById("market-notes").textContent = market.notes || "";
|
||
document.getElementById("market-body").innerHTML = market.alternatives
|
||
.map((alt) => {
|
||
const price =
|
||
alt.price_monthly_eur && Number(alt.price_monthly_eur) > 0
|
||
? euro(alt.price_monthly_eur)
|
||
: "—";
|
||
const features = (alt.features ?? []).join(", ");
|
||
return `
|
||
<tr>
|
||
<td><strong>${alt.name}</strong><div class="small mono">${alt.id}</div></td>
|
||
<td><wn-tag>${alt.category}</wn-tag></td>
|
||
<td class="obs-num mono">${price}</td>
|
||
<td><wn-stage-dot level="${alt.signal_level}">${alt.signal_level}</wn-stage-dot></td>
|
||
<td>${features}</td>
|
||
<td class="small">${alt.source} · ${alt.observed}<br>${alt.note}</td>
|
||
</tr>`;
|
||
})
|
||
.join("");
|
||
}
|
||
|
||
function populatePeriods(history, current) {
|
||
const select = document.getElementById("period-select");
|
||
select.innerHTML = [...history].reverse().map(
|
||
(row) => `<option value="${row.period}" ${row.period === current ? "selected" : ""}>${row.period}</option>`
|
||
);
|
||
select.value = current;
|
||
if (!select._obsBound) {
|
||
select.addEventListener("wn-change", async (event) => {
|
||
const next = await loadDashboard(event.detail.value);
|
||
render(next);
|
||
});
|
||
select._obsBound = true;
|
||
}
|
||
}
|
||
|
||
async function loadDesignRefLabel() {
|
||
try {
|
||
const response = await fetch("/ui/vendor/whynot-design/.whynot-design-ref");
|
||
if (!response.ok) return;
|
||
const ref = (await response.text()).trim().slice(0, 7);
|
||
const label = document.getElementById("design-ref-label");
|
||
if (label && ref) label.textContent = `whynot-design @ ${ref}`;
|
||
} catch {
|
||
// optional footer detail
|
||
}
|
||
}
|
||
|
||
function render(data) {
|
||
currentData = normalizeData(data);
|
||
document.getElementById("design-link").href = data.design_reference;
|
||
loadDesignRefLabel();
|
||
setSection(activeSection);
|
||
renderCostFloor(data);
|
||
renderValueRange(data);
|
||
renderMarketPrice(data);
|
||
populatePeriods(data.history, data.period);
|
||
}
|
||
|
||
bindNavigation();
|
||
|
||
loadDashboard()
|
||
.then(render)
|
||
.catch((error) => {
|
||
document.body.innerHTML = `<main class="wn-main"><wn-banner variant="error" title="Load failed">${error}</wn-banner></main>`;
|
||
}); |