coulomb/adaptive-pricing
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Economic Observatory web UI with ledger-backed API

Browse Source 
Introduce ui/ dashboard (dark observatory layout), JSON API, and local
dev server. All metrics load from expense and payment record ledgers.
Links Claude design reference for visual alignment.
This commit is contained in:
Bernd Worsch
2026-06-22 02:48:52 +02:00
parent 7b84d34ea6
commit 9c1c2142fc
8 changed files with 795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
projects/coulomb-pricing/ui/index.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Coulomb Economic Observatory</title>
<link rel="stylesheet" href="/ui/styles.css" />
</head>
<body>
<div class="app">
<header class="topbar">
<div>
<p class="eyebrow">Adaptive Pricing · Coulomb Social MVP</p>
<h1>Economic Observatory</h1>
</div>
<div class="topbar-actions">
<label>
Period
<select id="period-select"></select>
</label>
<span class="badge" id="liquidity-badge">—</span>
</div>
</header>
<section class="hero-grid" id="hero-grid"></section>
<section class="panel budget-panel">
<div class="panel-head">
<h2>Liquidity &amp; Budget</h2>
<p id="budget-caption">Operator liquidity pool</p>
</div>
<div class="budget-bar">
<div class="budget-fill" id="budget-fill"></div>
</div>
<div class="budget-stats" id="budget-stats"></div>
</section>
<div class="split-grid">
<section class="panel">
<div class="panel-head">
<h2>Monthly Net Liquidity</h2>
<p>Member net payments minus infrastructure</p>
</div>
<div class="chart" id="liquidity-chart"></div>
</section>
<section class="panel">
<div class="panel-head">
<h2>Infrastructure Stack</h2>
<p>Domains, hosting, and Stripe reference</p>
</div>
<div id="infra-stack"></div>
</section>
</div>
<section class="panel">
<div class="panel-head">
<h2>Monthly Ledger</h2>
<p>Computed from expense and payment record tables</p>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Period</th>
<th>Members</th>
<th>Gross</th>
<th>Infrastructure</th>
<th>Processing</th>
<th>Net liquidity</th>
</tr>
</thead>
<tbody id="history-body"></tbody>
</table>
</div>
</section>
<section class="panel">
<div class="panel-head">
<h2>Pricing Model Registry</h2>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody id="pricing-body"></tbody>
</table>
</div>
</section>
<footer class="footer">
<p>
Design reference:
<a id="design-link" href="#" target="_blank" rel="noreferrer">Claude design share</a>
· Totals computed programmatically from ledgers · Customer cost-pass-through billing not active
</p>
</footer>
</div>
<script src="/ui/app.js"></script>
</body>
</html>