fix: get the dashboard to load on every page

README.md

@@ -213,11 +213,24 @@ chel serve --dashboard-port 8888 --port 8000 ./my-app
 ```
 
 The serve command will:
-- Start a dashboard server (default: http://localhost:8888)
+- Start a dashboard server (default: http://localhost:8888, see below)
 - Start an application server (default: http://localhost:8000)
 - Serve static assets and handle API routes
 - Support different database backends (memory, filesystem, SQLite, Redis)
 
+The dashboard shows the server's registered usernames, the contracts it
+stores, how much space each account uses and each account's credits. It never
+shows what is inside a contract, since that is encrypted. Because of the
+usernames, it has two settings under `[server]` in `chel.toml`:
+
+- `dashboardListenIP`: the address it listens on, `127.0.0.1` by default, so
+  only this machine can open it.
+- `dashboardAdminPassword`: until this is set, the dashboard shows no data.
+  Once it is, the browser asks for it (any user name works). To keep it out of
+  the file, set `server__dashboardAdminPassword` in the environment instead.
+  The password travels with every request, so put the dashboard behind HTTPS
+  before opening it to other machines.
+
 ### `chel manifest`
 
 Let's say you have the following files:
@@ -412,6 +425,10 @@ The project uses two separate configuration files for different purposes:
 host = "0.0.0.0"
 port = 8000
 dashboardPort = 8888
+# The dashboard listens on this machine only, unless you change this
+dashboardListenIP = "127.0.0.1"
+# The dashboard shows no data until this is set to a long, random password
+# dashboardAdminPassword = "..."
 
 [server.vapid]
 email = "admin@example.com"

build/dist-dashboard/assets/css/main.css

@@ -1248,7 +1248,7 @@ p.error.is-hidden {
   color: var(--danger);
   background-color: var(--danger_bg);
 }
-.pill.is-neautral {
+.pill.is-neutral {
   color: var(--text_0);
   background-color: var(--border);
 }

build/dist-dashboard/assets/js/Billing-7PZQ3UDA.js → build/dist-dashboard/assets/js/Billing-A74SC3JT.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-QDEOMRTG.js";
 import {
   Dropdown_default
-} from "./chunk-RY67CCHC.js";
+} from "./chunk-HIDYDI3R.js";
 import {
   PageTemplate_default
 } from "./chunk-3KF7JRLD.js";

build/dist-dashboard/assets/js/chunk-5LHST2UP.js

@@ -0,0 +1,72 @@
+import {
+  NoPasswordError
+} from "./chunk-LFSZ3O36.js";
+import {
+  L
+} from "./chunk-ZI2WDK4P.js";
+import {
+  esm_default
+} from "./chunk-UHFMZPCY.js";
+
+// src/serve/dashboard/views/utils/liveData.ts
+var liveData_default = (path) => ({
+  data() {
+    return { live: { data: null, error: "" } };
+  },
+  async created() {
+    try {
+      this.live.data = await esm_default("backend/dashboard/get", path);
+    } catch (e) {
+      if (e instanceof NoPasswordError) {
+        this.live.error = L("The dashboard shows no data until it has a password. Set dashboardAdminPassword under [server] in chel.toml, then restart chel.");
+        return;
+      }
+      console.error(`[dashboard] could not load /api/${path}`, e);
+      this.live.error = L("Could not load the data. The browser console has the details.");
+    }
+  }
+});
+
+// src/serve/dashboard/views/utils/format.ts
+var hasIntl = typeof Intl !== "undefined" && typeof Intl.NumberFormat === "function";
+var humanBytes = (bytes, locale) => {
+  const units = ["B", "KiB", "MiB", "GiB", "TiB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  const digits = unit === 0 ? 0 : 1;
+  const number = hasIntl ? new Intl.NumberFormat(locale, { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(value) : value.toFixed(digits);
+  return `${number} ${units[unit]}`;
+};
+var PICOCREDITS_PER_CREDIT = 1000000000000n;
+var PICOCREDIT_DIGITS = 12;
+var PICOCREDITS_PER_CENT = PICOCREDITS_PER_CREDIT / 100n;
+var credits = (picocredits, locale) => {
+  const balance = BigInt(picocredits);
+  const abs = balance < 0n ? -balance : balance;
+  const whole = abs / PICOCREDITS_PER_CREDIT;
+  const fraction = abs % PICOCREDITS_PER_CREDIT;
+  if (hasIntl) {
+    const exact = `${balance < 0n ? "-" : ""}${whole}.${String(fraction).padStart(PICOCREDIT_DIGITS, "0")}`;
+    try {
+      return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        roundingMode: "trunc",
+        signDisplay: "negative"
+      }).format(exact);
+    } catch {
+    }
+  }
+  const shown = `${whole}.${String(fraction / PICOCREDITS_PER_CENT).padStart(2, "0")}`;
+  return balance < 0n && shown !== "0.00" ? `-${shown}` : shown;
+};
+
+export {
+  liveData_default,
+  humanBytes,
+  credits
+};