k0-board 0.3.0 → 0.5.0

package/web/mentions.js

@@ -8,6 +8,10 @@
 // is why it costs nothing and never goes near the server: the file listing is already in the
 // browser.
 //
+// The listing is not quite everything there is, though, so what it could not place it hands back
+// under `unknown` rather than swallowing it. Asking the disk about those names is somebody
+// else's job; this module stays a pure function of a text and a list.
+//
 // What is written out in full and what is merely guessed at stay separate, because they are
 // two different degrees of certainty: mixing them would make a word that is only a hunch look
 // like a fact.
@@ -59,13 +63,17 @@ function index(files) {
   return { byName, byStem, byDir, dirTail, exts, stems: [...byStem.keys()] }
 }
 
-/** The pieces of text worth trying, lower case and in the order they appear. */
+/**
+ * The pieces of text worth trying, in the order they appear: each one lower case for the
+ * matching, and as it was written for whoever has to go and look on a disk — there are file
+ * systems where `Report.pdf` and `report.pdf` are two different files.
+ */
 function tokens(text) {
   const out = []
   for (const m of String(text ?? '').matchAll(TOKEN)) {
     // Punctuation stuck on the end is not part of the name: "…it is in from-the-call.md."
-    const t = low(m[0]).replace(/[._/-]+$/, '')
-    if (t) out.push(t)
+    const raw = m[0].replace(/[._/-]+$/, '')
+    if (raw) out.push([low(raw), raw])
   }
   return out
 }
@@ -110,6 +118,12 @@ function dirFor(token, ix) {
  *   ("summary"), or the whole beginning of a name ("survey" for `survey-round-two.md`).
  * - `missing` — names written with a dot that do not exist in here. Only those with an
  *   extension the repository actually uses, otherwise `example.com` would look like a lost file.
+ * - `unknown` — the same names, all of them, before that judgement is made. The listing is not
+ *   everything there is: a generated directory gives it only its finished documents, an ignored
+ *   one gives it nothing, and `out/report.html` is in neither while being written out in full
+ *   right there in the text. Whoever calls this can go and ask the disk about them; existence is
+ *   a better answer than a guess about extensions, and it is the one thing this module cannot
+ *   reach by itself.
  *
  * Every entry is `{ token, file, more }` for a file — `file` is the most recently touched one
  * when a name points at several, `more` are the rest — or `{ token, dir, files }` for a
@@ -123,6 +137,7 @@ export function mentions(text, files) {
   const named = []
   const maybe = []
   const missing = []
+  const unknown = []
   const missed = new Set()
 
   /** Drops the ones already listed and puts the most recent first. */
@@ -133,13 +148,16 @@ export function mentions(text, files) {
   }
 
   // First pass: what is written out in full.
-  for (const t of toks) {
+  for (const [t, raw] of toks) {
     if (EXT.test(t)) {
       const hits = filesFor(t, ix)
       if (!hits) {
-        if (ix.exts.has(EXT.exec(t)[1]) && !missed.has(t)) {
+        if (!missed.has(t)) {
           missed.add(t)
-          missing.push(t)
+          unknown.push(raw)
+          // The listing knows this extension and still has no such file: that is a name worth
+          // saying out loud. Otherwise silence — `example.com` is not a lost document.
+          if (ix.exts.has(EXT.exec(t)[1])) missing.push(t)
         }
         continue
       }
@@ -159,7 +177,7 @@ export function mentions(text, files) {
 
   // File names first: the whole name without the dot, failing that the whole beginning of a
   // name cut at a dash — "survey" for `survey-round-two.md`.
-  for (const t of toks) {
+  for (const [t] of toks) {
     if (!guess(t)) continue
     const hits =
       ix.byStem.get(t) ||
@@ -172,14 +190,14 @@ export function mentions(text, files) {
   // clue there is: "onboarding" in a text about onboarding is an ordinary word, and if it came
   // first it would carry off `interviews/onboarding/summary.md`, leaving "summary" to show the
   // summary of something else entirely.
-  for (const t of toks) {
+  for (const [t] of toks) {
     if (!guess(t)) continue
     const d = dirFor(t, ix)
     const f = d ? fresh(ix.byDir.get(d)) : []
     if (f.length) keep(maybe, { token: t, dir: d, files: f }, f)
   }
 
-  return { named, maybe, missing }
+  return { named, maybe, missing, unknown }
 }
 
 /** How many files a group of entries opens: a directory counts for what is inside it. */

package/web/recency.js

@@ -14,19 +14,19 @@ export const DAY = 24 * 60 * 60 * 1000
  *
  * `IDLE` is deliberately not one of them, and it is the only debatable line in this file. It
  * means "your turn", so it looks like it belongs — but it is also the resting state of every
- * terminal you have left open, and on a real board nearly every live card is sitting in it. Let
+ * terminal you have left open, and on a real board nearly every live story is sitting in it. Let
  * it hold a column and nothing ever folds: a session you finished with three weeks ago and never
  * closed would keep its column at full width for ever. So `IDLE` gets the same treatment as
  * everything else — recent, and it stays; a fortnight old, and it goes to `Old`, where it is one
- * click away. Nothing is closed either way: the terminal is still open, and the card is still
+ * click away. Nothing is closed either way: the terminal is still open, and the story is still
  * exactly where you left it.
  */
 const DEMANDING = new Set(['ASK', 'PLANNED', 'WORKING', 'PLANNING'])
 
-/** The last time each repository was touched: the freshest of its cards. */
-export function lastTouched(cards) {
+/** The last time each repository was touched: the freshest of its stories. */
+export function lastTouched(stories) {
   const map = new Map()
-  for (const c of cards) {
+  for (const c of stories) {
     const t = Number(c.updated_at) || 0
     if (t > (map.get(c.project_path) ?? 0)) map.set(c.project_path, t)
   }
@@ -34,9 +34,9 @@ export function lastTouched(cards) {
 }
 
 /** The repositories with something going on in them right now. */
-export function busy(cards) {
+export function busy(stories) {
   const set = new Set()
-  for (const c of cards) if (DEMANDING.has(c.status)) set.add(c.project_path)
+  for (const c of stories) if (DEMANDING.has(c.status)) set.add(c.project_path)
   return set
 }
 
@@ -71,10 +71,10 @@ export function cutoff(touched) {
  *
  * The order of `paths` is kept: whoever asked has already sorted them.
  */
-export function split({ paths, cards, folded = new Set(), held = new Set() }) {
-  const touched = lastTouched(cards)
+export function split({ paths, stories, folded = new Set(), held = new Set() }) {
+  const touched = lastTouched(stories)
   const line = cutoff(touched)
-  const alive = busy(cards)
+  const alive = busy(stories)
   const open = []
   const old = []
   for (const p of paths) {

package/web/units.js

@@ -9,7 +9,7 @@ const GB = 1073741824
 /**
  * What a session weighs, rounded in steps: tens of MB below a gigabyte, tenths of a GB above.
  *
- * The rounding is not decoration. It is the rounded number — the one you read on the card —
+ * The rounding is not decoration. It is the rounded number — the one you read on the post-it —
  * that goes into the signature of the refresh round: that way the board only redraws when the
  * figure on screen really changes, instead of on every sample, throwing away the pointer and
  * the buttons that appear under it.

package/web/usage.css

@@ -0,0 +1,169 @@
+/* Usage: what the sessions consumed, a week at a time. Colours and fonts live in base.css.
+
+   One wide column. It is a page of numbers and charts read on a wide screen, so the container
+   takes the width and everything inside it — paragraphs included — goes edge to edge. */
+@import url('/base.css');
+
+:root {
+  /* The categorical order is fixed and follows the entity, never its rank: a model keeps its
+     colour from one week to the next. Validated for colour blindness on --paper. */
+  --s1: #2a78d6;
+  --s2: #eb6834;
+  --s3: #1baf7a;
+  --s4: #eda100;
+  --s5: #e87ba4;
+  --s6: #008300;
+  --other: #a8a293;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 1rem;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── The top bar ─────────────────────────────────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 18px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+.topbar .home {
+  font: 700 1.2rem/1 var(--mono);
+  letter-spacing: 1px;
+  color: var(--ink);
+  text-decoration: none;
+}
+.topbar .home:hover { color: var(--muted); }
+.topbar h1 { margin: 0; font: 600 1rem/1 var(--sans); color: var(--muted); flex: 1; }
+
+.week { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
+.week button { padding: 3px 11px; font-size: 1rem; line-height: 1.2; }
+.week button:disabled { opacity: .35; cursor: default; }
+#span { min-width: 11rem; text-align: center; }
+
+.topbar select {
+  font: inherit;
+  font-size: .82rem;
+  font-weight: 600;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  background: var(--paper);
+  border-radius: 8px;
+  padding: 5px 9px;
+  cursor: pointer;
+}
+
+/* ── The sheet ───────────────────────────────────────────────────────── */
+.sheet {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 20px 18px 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.notes:empty { display: none; }
+.notes { display: flex; flex-direction: column; gap: 8px; }
+.note {
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  font-size: .9rem;
+  color: var(--muted);
+}
+.note b { color: var(--ink); }
+.note code { font: .82rem var(--mono); background: var(--bg); padding: 1px 5px; border-radius: 4px; }
+
+.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
+.tile {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 12px 16px;
+}
+.tile .v { font: 700 1.6rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
+.tile .k { font-size: .8rem; color: var(--muted); }
+.tile .s { font-size: .78rem; color: var(--muted); margin-top: 2px; }
+
+.panel {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 14px 18px;
+  min-width: 0;
+}
+.panel h2 { margin: 0 0 4px; font: 600 .95rem/1.3 var(--sans); }
+.caption { margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
+
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
+
+/* ── Charts ──────────────────────────────────────────────────────────── */
+.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
+.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
+.chart .grid-line { stroke: var(--line); stroke-width: 1; }
+.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
+.chart .label { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--sans); }
+.chart .empty { fill: var(--muted); font-size: 13px; font-family: var(--sans); }
+.chart .hit { fill: transparent; cursor: default; }
+.chart .hit:hover + .bar-outline, .chart .col:hover .seg { opacity: .85; }
+.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.chart .dot { stroke: var(--paper); stroke-width: 2; }
+
+.tip {
+  position: fixed;
+  z-index: 10;
+  pointer-events: none;
+  background: var(--ink);
+  color: var(--paper);
+  font-size: .78rem;
+  line-height: 1.4;
+  padding: 7px 10px;
+  border-radius: 8px;
+  max-width: 320px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
+}
+.tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
+
+/* ── Tables ──────────────────────────────────────────────────────────── */
+table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
+th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--muted);
+  font-size: .75rem;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+td { padding: 6px 8px; border-bottom: 1px solid #efebe0; vertical-align: top; }
+tr:last-child td { border-bottom: none; }
+td.n, th.n { text-align: right; white-space: nowrap; }
+td .sub { display: block; color: var(--muted); font-size: .75rem; }
+td a { color: var(--ink); }
+.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 7px; }
+.muted { color: var(--muted); }
+.warn { color: var(--warn); font-weight: 600; }
+.scroll { overflow-x: auto; }
+.sessions td:first-child { min-width: 16rem; }
+.key { font: 600 .75rem var(--mono); color: var(--muted); margin-right: 6px; }
+#more { margin-top: 10px; }
+
+@media (max-width: 600px) {
+  .sheet { padding: 14px 16px 40px; }
+  .grid { grid-template-columns: 1fr; }
+  #span { min-width: 0; }
+}

package/web/usage.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>k0 — Usage</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="stylesheet" href="/usage.css">
+</head>
+<body>
+  <header class="topbar">
+    <a class="home" href="/" title="Back to the dashboard">k0</a>
+    <h1>Usage</h1>
+
+    <!-- A week at a time, because the limit that matters is a weekly one. -->
+    <div class="week" role="group" aria-label="Week">
+      <button type="button" id="prev" aria-label="Previous week">‹</button>
+      <span id="span"></span>
+      <button type="button" id="next" aria-label="Next week">›</button>
+    </div>
+
+    <select id="account" aria-label="Account"></select>
+  </header>
+
+  <main class="sheet">
+    <div class="notes" id="notes"></div>
+
+    <section class="tiles" id="tiles" aria-label="The week in numbers"></section>
+
+    <section class="panel">
+      <h2>What each day would have cost at API prices</h2>
+      <p class="caption">Stacked by model. With a subscription you do not pay this: it is the one scale on which a
+        Fable hour and a Sonnet hour can be compared.</p>
+      <div class="legend" id="cost-legend"></div>
+      <div class="chart" id="cost-chart"></div>
+    </section>
+
+    <section class="panel">
+      <h2>How full the weekly limit was</h2>
+      <p class="caption" id="limits-caption"></p>
+      <div class="legend" id="limits-legend"></div>
+      <div class="chart" id="limits-chart"></div>
+    </section>
+
+    <div class="grid">
+      <section class="panel">
+        <h2>By model and effort</h2>
+        <table id="t-models"></table>
+      </section>
+      <section class="panel">
+        <h2>Who did the work</h2>
+        <table id="t-agents"></table>
+      </section>
+      <section class="panel">
+        <h2>By repository</h2>
+        <table id="t-repos"></table>
+      </section>
+      <section class="panel">
+        <h2>By account</h2>
+        <table id="t-accounts"></table>
+      </section>
+    </div>
+
+    <section class="panel">
+      <h2>Sessions, the most expensive first</h2>
+      <p class="caption">“Worked” is the time Claude spent on your turns, not the time the window was open. The share of
+        the weekly limit is an estimate: the statusline says how full the week is, not who filled it, so each rise is
+        shared among the sessions that ran in the same hour.</p>
+      <div class="scroll"><table id="t-sessions" class="sessions"></table></div>
+      <button type="button" id="more" hidden></button>
+    </section>
+  </main>
+
+  <div class="tip" id="tip" role="tooltip" hidden></div>
+
+  <script type="module" src="/usage.js"></script>
+</body>
+</html>