quill/oracle Public Public: anyone can read this; nobody can change it.

/**

 * Every page, server-rendered, script-free. The oracle speaks in a serif and

 * keeps its bookkeeping in a sans — the voice and the ledger should not look

 * like the same thing.

 */

import { calibrate, verdictOnItself, type Calibration } from "./oracle.ts";

import type { Filter, Row } from "./db.ts";

export const escape = (s: string): string =>

  s.replace(

    /[&<>"']/g,

    (c) =>

      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ??

      c,

  );

const STYLE = `

  :root {

    color-scheme: light dark;

    --ink: light-dark(#1b1a17, #ece7dd);

    --dim: light-dark(#6b665c, #9a9387);

    --rule: light-dark(#1b1a1722, #ece7dd22);

    --ground: light-dark(#faf7f1, #16151a);

    font: 17px/1.6 system-ui, sans-serif;

  }

  * { box-sizing: border-box; }

  body { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 4rem; background: var(--ground); color: var(--ink); }

  a { color: inherit; }

  h1 { font: 600 1.5rem/1.2 ui-serif, Georgia, serif; letter-spacing: .02em; margin: 0; }

  h1 a { text-decoration: none; }

  .sub { color: var(--dim); margin: .25rem 0 2rem; font-size: .95rem; }

  .stance { font: 400 1.6rem/1.35 ui-serif, Georgia, serif; margin: .5rem 0 1rem; }

  .auspice { font: italic 400 1.05rem/1.5 ui-serif, Georgia, serif; color: var(--dim); }

  .label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

  form.ask { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }

  input[type=text] { flex: 1 1 14rem; min-height: 48px; padding: .7rem .9rem; font: inherit;

    color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: .6rem; }

  button { min-height: 48px; padding: .7rem 1.1rem; font: inherit; cursor: pointer;

    border: 1px solid var(--rule); border-radius: .6rem; background: var(--ink); color: var(--ground); }

  button.quiet { background: transparent; color: var(--ink); }

  .meter { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: .4rem 0 1rem; }

  .meter div { height: 100%; background: var(--ink); }

  .card { border-top: 1px solid var(--rule); padding: 1.1rem 0; }

  .card p { margin: .3rem 0; }

  .q { font-weight: 600; }

  .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

  .tag { font-size: .78rem; padding: .15rem .5rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--dim); }

  .tag.right { color: light-dark(#166534, #86efac); }

  .tag.wrong { color: light-dark(#9f1239, #fda4af); }

  footer { margin-top: 3rem; color: var(--dim); font-size: .85rem; border-top: 1px solid var(--rule); padding-top: 1rem; }

  nav { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .9rem; }

  ul { padding: 0; margin: 0; list-style: none; }

`;

interface Chrome {

  env: string;

  pull: string | undefined;

  commit: string;

  ssh: string | undefined;

}

function where(chrome: Chrome): string {

  return chrome.env === "preview"

    ? `preview of pull #${chrome.pull ?? "?"}`

    : chrome.env;

}

function layout(chrome: Chrome, title: string, body: string): string {

  return `<!doctype html>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>${escape(title)}</title>

<style>${STYLE}</style>

<h1><a href="/">the oracle</a></h1>

<p class="sub">Ask once. It answers with conviction, never twice differently, and keeps score of how often it was right.</p>

${body}

<footer>

  <p><span class="tag">${escape(where(chrome))}</span>${chrome.commit ? ` <span class="tag">@ ${escape(chrome.commit)}</span>` : ""}</p>

  ${chrome.ssh ? `<p>Same ledger in a terminal: <code>${escape(chrome.ssh)}</code></p>` : ""}

  <p>Verdicts are derived from the question itself, not from chance — the joke and the honesty are the same mechanism.</p>

</footer>

`;

}

function meter(confidence: number): string {

  return `<div class="meter"><div style="width:${Math.max(0, Math.min(100, confidence))}%"></div></div>`;

}

function outcomeTag(row: Row): string {

  if (row.outcome === "right") return `<span class="tag right">judged right</span>`;

  if (row.outcome === "wrong") return `<span class="tag wrong">judged wrong</span>`;

  return `<span class="tag">unjudged</span>`;

}

function card(row: Row): string {

  return `<li class="card">

  <p class="q"><a href="/v/${row.id}">${escape(row.question)}</a></p>

  <p>${escape(row.stance)}</p>

  <p class="row"><span class="tag">${row.confidence}% sure</span>${outcomeTag(row)}${

    row.asked_count > 1 ? `<span class="tag">asked ${row.asked_count}×</span>` : ""

  }</p>

</li>`;

}

function calibrationBlock(c: Calibration): string {

  const line = escape(verdictOnItself(c));

  if (c.accuracy === undefined) return `<p class="label">its record</p><p>${line}</p>`;

  return `<p class="label">its record</p>

<p>${line}</p>

${meter(c.accuracy)}

<p class="row"><span class="tag">${c.right} right of ${c.judged}</span><span class="tag">claimed ${c.claimed}%</span><span class="tag">${

    (c.gap ?? 0) > 0 ? `overconfident by ${c.gap}` : (c.gap ?? 0) < 0 ? `modest by ${-(c.gap ?? 0)}` : "square"

  }</span></p>`;

}

export function homePage(

  chrome: Chrome,

  rows: readonly Row[],

  scores: readonly { confidence: number; outcome: string }[],

): string {

  const recent =

    rows.length === 0

      ? `<p class="auspice">No one has asked it anything yet. Be the first; it has been waiting.</p>`

      : `<p class="label">lately</p><ul>${rows.map(card).join("")}</ul>`;

  return layout(

    chrome,

    "the oracle",

    `<form class="ask" method="post" action="/ask">

  <input type="text" name="question" placeholder="Should I ship it on Friday?" required maxlength="280" autofocus>

  <button>Ask</button>

</form>

${calibrationBlock(calibrate(scores))}

${recent}

<nav><a href="/ledger">the whole ledger →</a></nav>`,

  );

}

export function verdictPage(chrome: Chrome, row: Row): string {

  return layout(

    chrome,

    `${row.question} — the oracle`,

    `<p class="label">you asked</p>

<p class="q">${escape(row.question)}</p>

<p class="stance">${escape(row.stance)}</p>

${meter(row.confidence)}

<p class="row"><span class="tag">${row.confidence}% sure</span>${outcomeTag(row)}${

      row.asked_count > 1 ? `<span class="tag">asked ${row.asked_count}×</span>` : ""

    }<span class="tag">${escape(row.asked_at)}</span></p>

<p class="label">the sign it read</p>

<p class="auspice">${escape(row.auspice)}</p>

<p class="label">how did it turn out?</p>

<form class="ask" method="post" action="/v/${row.id}/judge">

  <button name="outcome" value="right">It was right</button>

  <button class="quiet" name="outcome" value="wrong">It was wrong</button>

  ${row.outcome === "unjudged" ? "" : `<button class="quiet" name="outcome" value="unjudged">Take that back</button>`}

</form>

<nav><a href="/">ask another</a> <a href="/ledger">the ledger</a></nav>`,

  );

}

export function ledgerPage(chrome: Chrome, rows: readonly Row[], filter: Filter): string {

  const tab = (f: Filter, label: string): string =>

    f === filter ? `<strong>${label}</strong>` : `<a href="/ledger?show=${f}">${label}</a>`;

  return layout(

    chrome,

    "the ledger — the oracle",

    `<nav>${tab("all", "all")} ${tab("unjudged", "unjudged")} ${tab("right", "right")} ${tab("wrong", "wrong")} <a href="/">ask</a></nav>

${rows.length === 0 ? `<p class="auspice">Nothing here.</p>` : `<ul>${rows.map(card).join("")}</ul>`}`,

  );

}

export function notFoundPage(chrome: Chrome): string {

  return layout(

    chrome,

    "not found — the oracle",

    `<p class="stance">There is no such verdict.</p>

<p class="auspice">It may never have been asked, or you may have invented the number.</p>

<nav><a href="/">ask something real</a></nav>`,

  );

}