k0-board 0.1.1 → 0.2.0

package/web/board.js

@@ -2,6 +2,7 @@ import { titleCase } from '/title.js'
 import { initView, refit } from '/view.js'
 import { weight, gb } from '/units.js'
 import { setFavicon } from '/favicon.js'
+import { split } from '/recency.js'
 
 // ── Statuses ───────────────────────────────────────────────────────
 // The order is the attention priority inside a column: first whoever is waiting for you,
@@ -19,6 +20,10 @@ const LABEL = {
   COMPLETED: 'Done',
 }
 
+// The statuses where something is really running. The server holds the same rule — a browser
+// cannot import a module that reads the filesystem — the way `ORDER` is already written twice.
+const BUSY = new Set(['WORKING', 'PLANNING'])
+
 const $ = (s) => document.querySelector(s)
 const api = async (url, opts) => {
   const r = await fetch(url, { headers: { 'content-type': 'application/json' }, ...opts })
@@ -37,6 +42,16 @@ let lastSignature = ''
 const hidden = new Set(JSON.parse(localStorage.getItem('k0-hidden') || '["COMPLETED"]'))
 const saveHidden = () => localStorage.setItem('k0-hidden', JSON.stringify([...hidden]))
 
+// The repositories you have put away by hand. Unlike `held` this outlives the page: putting a
+// column away is a decision, not a glance.
+const folded = new Set(JSON.parse(localStorage.getItem('k0-folded') || '[]'))
+const saveFolded = () => localStorage.setItem('k0-folded', JSON.stringify([...folded]))
+
+// The columns open in this visit. Within one visit the set only ever grows: a column does not
+// fold out from under you while you are working — it folds the next time the page loads. It is
+// deliberately not remembered, so that reloading is what tidies the board up.
+const held = new Set()
+
 // The weight of each session: on to begin with, switched off from the gauge at the top.
 let showLoad = localStorage.getItem('k0-load') !== '0'
 let machine = null // how the computer is doing right now
@@ -84,8 +99,17 @@ function postit(card, now) {
       card.id
     )}${loadChip(card)}</div>
     <div class="title">${esc(card.title)}</div>
-    ${card.description ? `<div class="desc">${esc(card.description)}</div>` : ''}
-    ${card.prompt ? `<div class="prompt">${esc(card.prompt)}</div>` : ''}
+    ${
+      // Description and prompt travel together in one box, and that box is the only part of the
+      // card allowed to shrink: whatever the text does, the repository, the title, the age and
+      // the buttons stay where they are.
+      card.description || card.prompt
+        ? `<div class="body">
+             ${card.description ? `<div class="desc">${esc(card.description)}</div>` : ''}
+             ${card.prompt ? `<div class="prompt">${esc(card.prompt)}</div>` : ''}
+           </div>`
+        : ''
+    }
     <div class="foot">
       ${dead ? '<span class="dead">session closed</span>' : ''}
       <span class="since" title="${LABEL[card.status]} for ${since(card.status_since, now)}">${since(card.status_since, now)}</span>
@@ -99,10 +123,11 @@ function postit(card, now) {
   }
 
   const actions = el.querySelector('.actions')
-  const btn = (text, fn, title) => {
+  const btn = (text, fn, title, cls) => {
     const b = document.createElement('button')
     b.textContent = text
     if (title) b.title = title
+    if (cls) b.className = cls
     b.onclick = (e) => {
       e.stopPropagation()
       fn()
@@ -118,6 +143,16 @@ function postit(card, now) {
     if (dead) btn('Resume', () => start(card.id, 'resume'))
     // An idea in the backlog cannot be "done": it never started.
     btn('Done', () => setCompleted(card.id, true), 'close this job and its terminal')
+    // Close gives the memory back without declaring the work over, and it comes after Done, as a
+    // link rather than a button: it is the rarer of the two and should not compete with it. Not
+    // while the session is working — stopping one mid-thought is not memory saved, it is work lost.
+    if (!dead && !BUSY.has(card.status))
+      btn(
+        'Close',
+        () => closeSession(card.id),
+        'stop the session and its terminal, and leave the card where it is',
+        'link'
+      )
   }
 
   // The git mark is a link: a double click on it would open two tabs and bring the terminal to
@@ -139,6 +174,11 @@ const ICON = {
   edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',
   del: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg>',
   plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
+  // Put this column away: it slides off to the right, where `Old` is.
+  fold: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6l6 6-6 6"/><path d="M19 5v14"/></svg>',
+  // The dev server: a world, because what is behind it is a site. A meridian and a parallel are
+  // enough to read it at twelve pixels — more lines and it goes back to being a circle.
+  globe: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><ellipse cx="12" cy="12" rx="4" ry="9"/></svg>',
 }
 
 const esc = (s) =>
@@ -191,6 +231,95 @@ function gitChip(g, repo, card) {
   }${n}</a>`
 }
 
+// ── The dev server ────────────────────────────────────────────────────
+// The globe next to a repository's name: grey when its server is off, green when it is up,
+// spinning while it is coming up, red when it tried and could not. One click switches it, two
+// restart it, and when it is green the repository's name becomes the way into the site.
+//
+// The four states are the ones the server sends; nothing is guessed here. The only thing the
+// page knows that the server does not is that a click has just happened and no answer has come
+// back yet — which is what `switching` is for.
+const switching = new Set()
+
+/** Everything the globe knows, for the tooltip. Same idea as `gitDetail`: the detail is on hover. */
+function serverDetail(s, state) {
+  const bits = []
+  if (state === 'up') bits.push(s.adopted ? `up on port ${s.port}, started outside k0` : `up on port ${s.port}`)
+  else if (state === 'starting') bits.push('starting…')
+  else if (state === 'failed') bits.push(s.error ? `it did not come up: ${s.error}` : 'it did not come up')
+  else bits.push('the server is off')
+  bits.push(s.command)
+  if (state === 'up') bits.push('click to stop, double-click to restart')
+  else if (state !== 'starting') bits.push('click to start')
+  // Where it went wrong is worth more than any sentence about it going wrong.
+  if (state === 'failed') bits.push(s.log)
+  return bits.join(' · ')
+}
+
+/**
+ * The globe, or nothing at all. A repository with no way to start a server does not get a
+ * button that would quietly do nothing — the server sends null and this draws none.
+ */
+function serverChip(s, repo) {
+  if (!s) return ''
+  const state = switching.has(repo) ? 'starting' : s.state
+  const title = serverDetail(s, state)
+  const off = s.can.run ? '' : ' disabled'
+  return `<button class="globe ${state}" title="${esc(title)}" aria-label="${esc(title)}"${off}>${ICON.globe}</button>`
+}
+
+/**
+ * One click switches, two restart, and they are fighting over the same first click.
+ *
+ * What settles it without being seen: when the server is OFF there is nothing to wait for,
+ * because "start" and "restart" are the same thing there, so the click goes straight through.
+ * Only STOPPING waits the quarter second it takes to learn whether a second click is coming —
+ * and even that is invisible, because the globe starts spinning the moment it is pressed.
+ */
+function wireGlobe(el, repo, s) {
+  if (!s.can.run) return
+  if (s.state === 'starting' || switching.has(repo)) {
+    el.disabled = true
+    return
+  }
+  if (s.state !== 'up') {
+    el.onclick = () => switchServer(repo, 'start')
+    return
+  }
+  let timer = null
+  el.onclick = () => {
+    if (timer) return // the second click of a double: let `ondblclick` have it
+    timer = setTimeout(() => {
+      timer = null
+      switchServer(repo, 'stop')
+    }, 250)
+  }
+  el.ondblclick = () => {
+    clearTimeout(timer)
+    timer = null
+    switchServer(repo, 'restart')
+  }
+}
+
+async function switchServer(repo, action) {
+  switching.add(repo)
+  lastSignature = '' // the globe has to start spinning now, not at the next round
+  await refresh()
+  try {
+    const s = await api('/api/server', { method: 'POST', body: JSON.stringify({ path: repo, action }) })
+    if (s.state === 'failed') toast(s.error || 'The server did not come up. Hover the globe for the log.', 8000)
+  } catch (err) {
+    toast(err.message)
+  } finally {
+    switching.delete(repo)
+    lastSignature = ''
+    refresh()
+  }
+}
+
+/** Just enough to compare one round with the next, exactly as `gitSig` does for git. */
+const serverSig = (s) => (s ? `${s.state}/${s.port ?? ''}/${s.adopted ? 1 : 0}` : '')
+
 // ── What a session weighs ────────────────────────────────────────────
 /**
  * How much this session eats, counting everything it has opened underneath itself. The detail —
@@ -252,24 +381,140 @@ function render(data) {
   // still in alphabetical order — the server's, which is not touched here.
   if (data.mode === 'driving') columns.sort((a, b) => byAttention(a.cards[0], b.cards[0]))
 
-  for (const { col, cards } of columns) {
+  // Which of them are still warm. Everything else folds away into `Old` — see recency.js for the
+  // four rules and for why the day is counted back from your last piece of work rather than from
+  // the clock.
+  const { open, alive } = split({
+    paths: columns.map((c) => c.col.path),
+    cards: data.cards,
+    folded,
+    held,
+  })
+  // A column open now is open for the rest of the visit, and a column that is open is not one
+  // you have put away: a session woke up in there, or you went and fetched it back yourself.
+  let forget = false
+  for (const p of open) {
+    held.add(p)
+    if (folded.delete(p)) forget = true
+  }
+  if (forget) saveFolded()
+
+  const openSet = new Set(open)
+  for (const { col, cards } of columns.filter(({ col }) => openSet.has(col.path))) {
     const wrap = document.createElement('section')
     wrap.className = 'column'
     // The "+" next to the name: a new card on THIS repository, without picking it.
     const add = `New card in ${esc(col.name)}`
-    wrap.innerHTML = `<h2><button class="add" title="${add}" aria-label="${add}">${ICON.plus}</button>${esc(
-      col.name
-    )}<small>${cards.length}</small>${gitChip(col.git, col.path)}</h2>`
+    // And next to it, the one that puts the column away without waiting for it to go quiet on
+    // its own. It sits there in plain sight next to the `+`, because a button you have to go
+    // hunting for with the pointer is a button nobody knows exists.
+    //
+    // Where the column cannot be put away it goes faint and refuses, rather than not being drawn
+    // at all. Not being drawn was the first idea and it was the wrong one: a column runs and
+    // goes back to your turn every few seconds, so the button would have spent the whole session
+    // blinking in and out — and it would have done it on exactly the columns you are working on.
+    // A control that stays where it was and says why it will not move is worth more than one
+    // that is only there when it agrees with you. The title carries the reason.
+    const live = alive.has(col.path)
+    const away = live ? `${col.name} has something going on: it cannot be put away` : `Put ${col.name} away`
+    const fold = `<button class="fold" title="${esc(away)}" aria-label="${esc(away)}"${
+      live ? ' disabled' : ''
+    }>${ICON.fold}</button>`
+    // Two groups and a name between them: what you press on the left, what tells you how things
+    // stand on the right. The count of post-its that used to sit after the name is gone — it
+    // took up the room the name now uses, and it never answered a question anybody had.
+    //
+    // With the server up, the name is the door to it. It is the right thing to click for the
+    // same reason the git mark is the right thing to click to reach the files: the obvious
+    // gesture on the obvious word, leaving the globe free to mean only on and off.
+    const url = col.server?.state === 'up' ? col.server.url : null
+    const name = url
+      ? `<a class="name" href="${esc(url)}" target="_blank" title="${esc(url)}">${esc(col.name)}</a>`
+      : `<span class="name">${esc(col.name)}</span>`
+    wrap.innerHTML = `<h2><button class="add" title="${add}" aria-label="${add}">${
+      ICON.plus
+    }</button>${fold}${name}${gitChip(col.git, col.path)}${serverChip(col.server, col.path)}</h2>`
     wrap.querySelector('.add').onclick = () => openEditor(null, col.path)
+    wrap.querySelector('.fold').onclick = () => putAway(col.path)
+    const globe = wrap.querySelector('.globe')
+    if (globe) wireGlobe(globe, col.path, col.server)
     for (const c of cards) wrap.append(postit(c, data.now))
     board.append(wrap)
   }
 
+  board.append(oldColumn(columns.filter(({ col }) => !openSet.has(col.path))))
   board.append(repoColumn(data.projects ?? [], new Set(columns.map((c) => c.col.path))))
   $('#empty').style.display = columns.length ? 'none' : 'grid'
   refit() // the board changed size: the view comes back inside its limits
 }
 
+/** Put a column away by hand, and let go of the place it was holding for this visit. */
+function putAway(path) {
+  folded.add(path)
+  held.delete(path)
+  saveFolded()
+  lastSignature = ''
+  refresh()
+}
+
+/** Fetch one back: it stays for the rest of the visit, and folds again on the next load. */
+function bringBack(path) {
+  held.add(path)
+  folded.delete(path)
+  saveFolded()
+  lastSignature = ''
+  refresh()
+}
+
+/**
+ * The second-to-last column: the repositories that DO have work on the board, just not lately —
+ * nothing touched in the day before your most recent piece of work, and nothing alive inside.
+ * They are the reason the board was three screens wide: a dozen of them, standing at full width
+ * between the three you are actually on.
+ *
+ * They are folded, not thrown away. Click the row and the column comes back at full width for the
+ * rest of the visit.
+ *
+ * It sits next to `Others` and is built the same way, down to the row: a `+`, a name, a git mark
+ * and nothing else. How many cards are parked in there and how long it has been quiet were both
+ * in here once, and both had to go — three numbers on a row you are meant to read at a glance is
+ * two too many, and the answer to either is one click away in the column itself.
+ */
+function oldColumn(columns) {
+  if (!columns.length) return document.createDocumentFragment()
+
+  const wrap = document.createElement('section')
+  wrap.className = 'column repos old'
+  // Alphabetical, for the same reason `Others` is: these are rows you scan with your eye looking
+  // for a name. In driving mode the columns above have queued up by urgency, and letting that
+  // order through to here would be a list that reshuffles itself with nothing urgent in it.
+  wrap.innerHTML =
+    '<h2>Old<small>' +
+    columns.length +
+    '</small></h2>' +
+    [...columns]
+      .sort((a, b) => a.col.name.localeCompare(b.col.name, undefined, { sensitivity: 'base' }))
+      .map(({ col }) => {
+        const add = `New card in ${esc(col.name)}`
+        const back = `Bring ${col.name} back onto the board`
+        return `<div class="repo" data-p="${esc(col.path)}">
+          <button class="add" title="${add}" aria-label="${add}">${ICON.plus}</button>
+          <button class="name" title="${esc(back)}">${esc(col.name)}</button>${gitChip(col.git, col.path)}
+        </div>`
+      })
+      .join('')
+  // The whole row brings the column back, not only the name: at this size, asking for the four
+  // words exactly is asking for a second click. The `+` and the git lens are the two things in
+  // there that mean something else, and they keep meaning it.
+  wrap.onclick = (e) => {
+    const path = e.target.closest('.repo')?.dataset.p
+    if (!path || e.target.closest('.git')) return
+    if (e.target.closest('.add')) openEditor(null, path)
+    else bringBack(path)
+  }
+  return wrap
+}
+
 /**
  * The last column: the OTHER repositories, the ones with no column because they have not one
  * card between them. Repeating the ones already on the left would be saying the same thing
@@ -397,6 +642,21 @@ async function remove(card) {
   refresh()
 }
 
+/**
+ * The terminal goes, the card stays. Stopping the session takes a couple of seconds — it is asked
+ * to leave and given the time to — so it says what it is doing while it waits.
+ */
+async function closeSession(id) {
+  toast('Closing the terminal…', 10000)
+  try {
+    await api(`/api/card/${id}/close`, { method: 'POST' })
+    toast('Closed. Resume picks the conversation up where it was')
+  } catch (e) {
+    toast(`Couldn't do it: ${e.message}`, 8000)
+  }
+  refresh()
+}
+
 async function setCompleted(id, completed) {
   await api(`/api/card/${id}`, { method: 'PATCH', body: JSON.stringify({ completed }) })
   refresh()
@@ -419,7 +679,6 @@ function openEditor(card, presetPath = null) {
   $('#f-project').disabled = !!card?.session_id
   $('#f-project').classList.remove('bad')
   $('#f-title').value = card?.title ?? ''
-  $('#f-desc').value = card?.description ?? ''
   $('#f-prompt').value = card?.prompt ?? ''
   $('#f-delete').style.display = card ? '' : 'none'
   // A live session is not restarted: there is only saving to do there.
@@ -513,9 +772,12 @@ async function save() {
     toast('A title is required')
     return null
   }
+  // No description here on purpose: a card written by hand does not need one. The field only
+  // ever mattered for an imported session, where it is the one line saying what happened in
+  // there — and that one is written by the import. Leaving the key out of the payload is what
+  // keeps it: `patchCard` writes only the keys it is given.
   const payload = {
     title,
-    description: $('#f-desc').value.trim(),
     project_path: chosenProject,
     prompt: $('#f-prompt').value,
   }
@@ -616,10 +878,16 @@ async function refresh() {
         c.description,
         c.prompt,
         c.project_path,
+        // What folds a column away and what brings it back: the day is measured from the
+        // freshest of these, so when none of them moves nothing can fold, and the board is
+        // spared a redraw on a timer.
+        c.updated_at,
         gitSig(c.git),
         c.load ? weight(c.load.rss) : '',
       ]),
-      data.columns.map((col) => [col.path, gitSig(col.git)]),
+      // The server state belongs in here for the same reason the git state does: without it the
+      // globe would keep the colour it had on the first round for the rest of the visit.
+      data.columns.map((col) => [col.path, gitSig(col.git), serverSig(col.server)]),
       (data.projects ?? []).map((p) => [p.path, gitSig(p.git)]),
     ])
     if (sig !== lastSignature) {

package/web/changelog.css

@@ -0,0 +1,185 @@
+/* The ChangeLog: k0's third page. Colours and fonts live in base.css.
+
+   This one is a sheet of paper, not a board — it is the only page in k0 you read top to bottom
+   rather than look at. So it scrolls, it has a measure narrow enough to read comfortably, and
+   nothing on it moves. */
+@import url('/base.css');
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 1rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ── The top bar ─────────────────────────────────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 18px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+  flex: none;
+}
+.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;
+}
+.topbar .when {
+  font-size: .82rem;
+  font-weight: 600;
+  color: var(--muted);
+  flex: none;
+  white-space: nowrap;
+}
+
+/* The four windows, as one connected control rather than four loose buttons: they are a scale
+   of how far back to look, and exactly one of them is always the answer. */
+.periods { display: flex; flex: none; }
+.periods button {
+  border-radius: 0;
+  border-left-width: 0;
+  padding: 5px 13px;
+  font-size: .82rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+.periods button:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
+.periods button:last-child { border-radius: 0 8px 8px 0; }
+.periods button[aria-checked='true'] {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--paper);
+}
+.periods button[aria-checked='true'] + button { border-left-color: var(--ink); }
+
+/* ── The sheet ───────────────────────────────────────────────────────── */
+.sheet {
+  flex: 1;
+  overflow-y: auto;
+  padding: 30px 18px 80px;
+}
+.sheet > * { max-width: 44rem; margin-inline: auto; }
+
+.intro { font-size: 1.08rem; }
+.intro p { margin: 0 0 14px; }
+.intro p.note { color: var(--muted); font-size: .95rem; }
+.blank { color: var(--muted); text-align: center; padding: 40px 0; }
+
+/* The repositories you have put away for this visit. Not a preference and not remembered: the
+   page is written afresh every time it is opened, so a filter that outlived it would be a
+   filter you had forgotten setting. */
+.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px auto 22px; }
+.chips button {
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: .78rem;
+  font-weight: 600;
+  font-family: var(--mono);
+  color: var(--ink);
+}
+.chips button[aria-pressed='false'] { color: var(--muted); background: transparent; opacity: .6; }
+
+/* ── One repository ──────────────────────────────────────────────────── */
+.repo {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 16px;
+}
+.repo h2 {
+  margin: 0 0 12px;
+  font: 700 .95rem/1 var(--mono);
+  letter-spacing: .5px;
+}
+.prose > :first-child { margin-top: 0; }
+.prose > :last-child { margin-bottom: 0; }
+.prose p { margin: 0 0 12px; }
+/* The bold opening line of a block is the whole point of it: it says what is different now. */
+.prose p > strong:only-child { font-size: 1.05rem; }
+.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; }
+.prose li { margin-bottom: 3px; }
+.prose code {
+  font: .85em var(--mono);
+  background: var(--bg);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+.prose h3 { margin: 16px 0 8px; font-size: .95rem; }
+.prose a { color: inherit; }
+
+/* ── The facts underneath ────────────────────────────────────────────── */
+/* Folded away by default. The written summary is what you came for; this is what to open when
+   you do not believe it. */
+.facts { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
+.facts summary {
+  cursor: pointer;
+  font-size: .78rem;
+  color: var(--muted);
+  list-style: none;
+}
+.facts summary::-webkit-details-marker { display: none; }
+.facts summary::before { content: '▸ '; }
+.facts[open] summary::before { content: '▾ '; }
+
+.commits { list-style: none; margin: 12px 0 0; padding: 0; font-size: .88rem; }
+.commits li { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
+.commits i {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--calm);
+}
+/* The one distinction the whole page is built on: out of here, or still only here. */
+.commits i.local { background: var(--warn); }
+
+.pending { margin: 12px 0 0; font-size: .82rem; color: var(--warn); }
+
+/* ── While the words are being written ───────────────────────────────── */
+.waiting { margin-bottom: 26px; }
+.waiting .bar {
+  height: 3px;
+  background: var(--line);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.waiting .bar i {
+  display: block;
+  height: 100%;
+  width: 32%;
+  border-radius: 2px;
+  background: var(--ink);
+  animation: sweep 1.5s ease-in-out infinite;
+}
+@keyframes sweep {
+  from { transform: translateX(-105%); }
+  to { transform: translateX(420%); }
+}
+/* Handwriting, like the other places where k0 speaks rather than reports. */
+.waiting .phrase {
+  margin: 10px 0 0;
+  font: 600 1.25rem/1 var(--hand);
+  color: var(--muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .waiting .bar i { animation: none; width: 100%; opacity: .35; }
+}

package/web/changelog.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>k0 — ChangeLog</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="stylesheet" href="/changelog.css">
+</head>
+<body>
+  <header class="topbar">
+    <a class="home" href="/" title="Back to the dashboard">k0</a>
+    <h1>ChangeLog</h1>
+
+    <!-- Four windows and no date picker. A summary is something you glance at, and every extra
+         control is one more decision to make before reading a word. -->
+    <div class="periods" id="periods" role="radiogroup" aria-label="Period">
+      <button type="button" role="radio" data-period="today" aria-checked="false">Today</button>
+      <button type="button" role="radio" data-period="yesterday" aria-checked="false">Yesterday</button>
+      <button type="button" role="radio" data-period="week" aria-checked="false">Week</button>
+      <button type="button" role="radio" data-period="month" aria-checked="false">Month</button>
+    </div>
+
+    <span class="when" id="when"></span>
+  </header>
+
+  <main class="sheet" id="sheet">
+    <!-- While the words are being written the facts are already here, so the page is never a
+         spinner on an empty screen: it is the summary, filling in. -->
+    <div class="waiting" id="waiting" hidden>
+      <div class="bar"><i></i></div>
+      <p class="phrase" id="phrase"></p>
+    </div>
+
+    <div class="intro" id="intro"></div>
+    <div class="chips" id="chips" hidden></div>
+    <div class="repos" id="repos"></div>
+    <p class="blank" id="blank" hidden></p>
+  </main>
+
+  <script type="module" src="/changelog.js"></script>
+</body>
+</html>