k0-board 0.4.0 → 0.5.0

package/web/changelog.js

@@ -98,8 +98,8 @@ function pending(r) {
   if (r.unpushedTotal) lines.push(`${plural(r.unpushedTotal, 'commit')} still on this machine`)
   if (r.dirtyTotal) lines.push(`${plural(r.dirtyTotal, 'file')} changed and never committed`)
   if (r.unreleased) lines.push(`${plural(r.unreleased.filter((l) => l.startsWith('-')).length, 'changelog line')} not yet released`)
-  const open = r.cards.filter((c) => !c.done)
-  if (open.length) lines.push(`${plural(open.length, 'card')} still open`)
+  const open = r.stories.filter((c) => !c.done)
+  if (open.length) lines.push(`${plural(open.length, 'story', 'stories')} still open`)
   if (!lines.length) return null
   const p = document.createElement('p')
   p.className = 'pending'
@@ -116,7 +116,7 @@ function factsBlock(r) {
   if (r.commits.length) bits.push(plural(r.commits.length, 'commit'))
   if (local) bits.push(`${local} not out yet`)
   if (r.dirty.length) bits.push(plural(r.dirty.length, 'file touched', 'files touched'))
-  if (r.cards.length) bits.push(plural(r.cards.length, 'card'))
+  if (r.stories.length) bits.push(plural(r.stories.length, 'story', 'stories'))
   s.textContent = bits.join(' · ') || 'nothing recorded'
   d.append(s)
   if (r.commits.length) d.append(commitList(r))

package/web/files.js

@@ -6,10 +6,11 @@ import { mentions, countIn } from '/mentions.js'
 import { resolveRel, index as refIndexOf, resolve as resolveRef, candidates, worth, trim, TOKEN_SRC } from '/refs.js'
 import { bytes } from '/units.js'
 import { setFavicon } from '/favicon.js'
+import { whileVisible } from '/awake.js'
 
 // ── The viewer ────────────────────────────────────────────────────────
 // k0's second tab: the files on the left, what they say on the right. It opens from the mark on
-// a card and does not take the board away, which stays where it is.
+// a post-it and does not take the board away, which stays where it is.
 //
 // There is no index: the listing arrives from the server ready-made and the search runs here, on
 // the names. First the files the session touched, then the recently modified ones — which is also
@@ -24,7 +25,9 @@ import { setFavicon } from '/favicon.js'
 const $ = (s) => document.querySelector(s)
 const params = new URLSearchParams(location.search)
 const REPO = params.get('repo') || ''
-const CARD = params.get('card') || ''
+// `card` is the name this parameter had before stories were called stories, and somebody
+// somewhere has this address bookmarked: both are read, only the new one is ever written.
+const STORY = params.get('story') || params.get('card') || ''
 /** Nobody is watching: the page is open only to be printed into a PDF. */
 const HEADLESS = params.has('pdf')
 
@@ -36,7 +39,7 @@ const api = async (url, opts) => {
 }
 
 const qs = (extra = {}) =>
-  new URLSearchParams({ repo: REPO, ...(CARD ? { card: CARD } : {}), ...extra }).toString()
+  new URLSearchParams({ repo: REPO, ...(STORY ? { story: STORY } : {}), ...extra }).toString()
 
 /** The address of a file's real bytes: images and PDFs come through here. */
 const rawUrl = (p) => `/api/file/raw?${qs({ path: p })}`
@@ -209,12 +212,34 @@ function hiddenByTheSwitch(q) {
  */
 let memo = { text: null, from: null, out: null }
 function mentioned() {
-  if (memo.text !== scope.text || memo.from !== all) {
-    memo = { text: scope.text, from: all, out: mentions(scope.text, all) }
+  const from = searchable()
+  if (memo.text !== scope.text || memo.from !== from) {
+    memo = { text: scope.text, from, out: mentions(scope.text, from) }
   }
   return memo.out
 }
 
+/**
+ * The files the pasted text is read against: the listing, plus the ones the disk confirmed when
+ * the text named something the listing does not carry — an HTML beside its PDF, anything under an
+ * ignored directory. They are handed over as ordinary files on purpose: order, the "7 more" fold,
+ * the count in the chip and the first one opening by itself all go on working without knowing
+ * where a row came from. `listed()` is untouched, so the listing on the left does not grow with
+ * what was merely named.
+ */
+let found = []
+let searchMemo = { from: null, with: null, out: null }
+function searchable() {
+  if (!found.length) return all
+  if (searchMemo.from !== all || searchMemo.with !== found) {
+    // Rebuilt only when one of the two changes: `paint()` runs every three seconds, and a fresh
+    // array each round would throw the memo above away every time.
+    const have = new Set(all.map((f) => f.p))
+    searchMemo = { from: all, with: found, out: all.concat(found.filter((f) => !have.has(f.p))) }
+  }
+  return searchMemo.out
+}
+
 /** How many files the text touches, open or closed: the number must not jump about. */
 const howMany = (out) => countIn(out.named) + countIn(out.maybe)
 
@@ -499,10 +524,15 @@ function openPaste(text) {
  * Takes the text and narrows the listing to what it names. If it names nothing the dialog does
  * **not** close and the listing is not thrown away: it says what happened, so the text can be
  * corrected where it is instead of being pasted again.
+ *
+ * Almost always it finishes without asking anybody anything. The one question goes out when the
+ * text writes a document's name in full and the listing has no such file — then the disk is asked,
+ * once, about those names and no others.
  */
-function applyPaste(text) {
+async function applyPaste(text) {
   const t = String(text ?? '').trim()
-  const out = mentions(t, all)
+  found = await confirmed(mentions(t, all).unknown)
+  const out = mentions(t, searchable())
   if (!howMany(out)) {
     const note = $('#p-note')
     note.hidden = false
@@ -512,7 +542,7 @@ function applyPaste(text) {
     return
   }
   scope = { kind: 'text', text: t }
-  memo = { text: t, from: all, out }
+  memo = { text: t, from: searchable(), out }
   opened = new Set()
   active = -1
   $('#q').value = ''
@@ -526,11 +556,26 @@ function applyPaste(text) {
 }
 
 /**
- * Back to the whole listing. The file open on the right stays where it is.
+ * The names the listing does not have, handed to the disk and given back as rows.
  *
- * A directory is also in the address, because it is a page that can be reloaded and sent: on the
- * way out it has to be taken off, otherwise a reload would put you back inside.
+ * Only the ones that look like a document are worth a question: `example.com` is a website and
+ * `v1.5` is a number. The same rules as the server's, written a second time on purpose — the
+ * server checks them again anyway, this only keeps the question short. Change one, change the
+ * other.
  */
+const DOC_EXT = /\.(md|markdown|mdx|html?|txt|rtf|pdf|docx?|odt|pages)$/i
+async function confirmed(unknown) {
+  const paths = (unknown || []).filter((t) => DOC_EXT.test(t)).slice(0, MAX_ASK)
+  if (!paths.length) return []
+  try {
+    const r = await api('/api/files/exist', { method: 'POST', body: JSON.stringify({ repo: REPO, paths }) })
+    return r.files || []
+  } catch {
+    // The server is not answering: what is left is what the listing could answer on its own.
+    return []
+  }
+}
+
 /**
  * Into a folder. The file open on the right stays open: you go looking for the next one without
  * losing the one you were reading.
@@ -549,9 +594,17 @@ function enterDir(d) {
   history.replaceState(null, '', open ? `?${qs({ dir: d, f: open.path })}` : dirUrl(d))
 }
 
+/**
+ * Back to the whole listing. The file open on the right stays where it is.
+ *
+ * A directory is also in the address, because it is a page that can be reloaded and sent: on the
+ * way out it has to be taken off, otherwise a reload would put you back inside.
+ */
 function clearScope() {
   const wasDir = scope?.kind === 'dir'
   scope = null
+  // What the disk confirmed belonged to that text and to no other: it goes out with it.
+  found = []
   opened = new Set()
   active = -1
   paint()
@@ -579,8 +632,8 @@ const dirUrl = (d) => `?${qs({ dir: d })}`
 /**
  * What this document names that can really be opened: from a written name to an address. Almost
  * always it finishes without asking anybody anything, because the file listing is already here;
- * the server is only reached for the names the listing does not have, which are the documents
- * inside the directories the listing skips.
+ * the server is only reached for the names the listing does not have — the page beside a finished
+ * PDF, anything under a directory git was told to ignore.
  */
 async function refsIn(docPath, text) {
   const ix = refIndex()
@@ -1136,7 +1189,7 @@ function keys() {
 
 async function boot() {
   if (!REPO) {
-    document.body.innerHTML = '<p class="blank">No repository. Open this from a card on the dashboard.</p>'
+    document.body.innerHTML = '<p class="blank">No repository. Open this from a story on the dashboard.</p>'
     return
   }
   split(Number(localStorage.getItem('k0-files-split')) || 28)
@@ -1270,9 +1323,13 @@ async function boot() {
   // When it is the server printing us, the page has nothing to do but show itself: interrogating
   // git every three seconds while a sheet is being waited for is of no use to anybody.
   if (HEADLESS) return
-  setInterval(poll, 3000)
+  // And only while the tab is in front of you: both of these run git, and a viewer left open in a
+  // window you are not in has nothing to show anybody. See `whileVisible`.
+  // Ten seconds, not three. Every round of this runs two git processes against the repository you
+  // are reading, and you are reading it, not watching a counter for the moment a file changes.
+  whileVisible(poll, 10000)
   // The full listing ages slowly, but the dates do not: half a minute is enough.
-  setInterval(() => loadAll().catch(() => {}), 30000)
+  whileVisible(() => loadAll().catch(() => {}), 30000)
 }
 
 boot()

package/web/index.html

@@ -10,18 +10,61 @@
 <body>
   <header class="topbar">
     <h1>k0</h1>
-    <button class="new" id="new-card" title="New card" aria-label="New card">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
-    </button>
+    <!-- The one mark on this bar that appears by itself, and only for one of two reasons: k0
+         moved on under you while you were not looking, or npm says there is a newer version than
+         the one installed here. It never opens the page — it sits next to the name and waits. -->
+    <a class="whatsnew" id="whatsnew" href="/whatsnew.html" hidden>
+      <span id="whatsnew-dot" aria-hidden="true"></span>
+    </a>
+    <!-- The "+" is a menu now, because there are two things it can make and they are made in
+         two different ways: a story is typed here, an epic is told to Claude in a terminal. With
+         the backlog off there is only one of them and the menu never opens — the plus is the
+         plus it has always been. -->
+    <div class="new-wrap">
+      <button class="new" id="new-story" title="New story" aria-label="New story"
+              aria-haspopup="true" aria-expanded="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+      </button>
+      <div class="menu" id="new-menu" role="menu" hidden>
+        <button type="button" role="menuitem" data-new="story">Story<em>a post-it, written here</em></button>
+        <button type="button" role="menuitem" data-new="epic">Epic<em>talked through in a terminal</em></button>
+      </div>
+    </div>
     <!-- Next to the plus, because they are the two ends of the same thing: one starts a piece
          of work, the other tells you how the ones before it went. A plain link, and a quiet
          one — no dot, no badge. It is there when you want it. -->
     <a class="log" href="/changelog.html" title="What you have been doing" aria-label="What you have been doing">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h11M4 17h7"/></svg>
     </a>
-    <div class="filters" id="filters"></div>
+    <!-- Its neighbour, and just as quiet: what those sessions consumed, a week at a time. -->
+    <a class="log" href="/usage.html" title="What your sessions consumed" aria-label="What your sessions consumed">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 20V11M12 20V5M19 20v-6"/></svg>
+    </a>
+    <!-- The state pills, the repository and the shape of the view: one group, because they are
+         one question. The pills and the repository say WHAT you are looking at; Kanban or List
+         says what shape it comes in. Switching shape never changes what is in scope. -->
+    <div class="filterbar">
+      <div class="filters" id="filters"></div>
+      <!-- Two answers and no third: the board as it has always been, or the same stories as rows.
+           It is only here when there is a backlog behind the board — with the feature off there is
+           one answer, and a switch offering it would be a switch that does nothing. -->
+      <div class="columns" id="columns" role="radiogroup" aria-label="How to look at it" hidden>
+        <button type="button" role="radio" data-columns="kanban" aria-checked="true">Kanban</button>
+        <button type="button" role="radio" data-columns="list" aria-checked="false">List</button>
+      </div>
+      <!-- Which repository, for both views. Empty means all of them. -->
+      <div class="picker repo-filter" id="repo-filter" hidden>
+        <button type="button" id="repo-filter-btn" aria-haspopup="listbox" aria-expanded="false"
+          aria-label="Which repository">All repositories</button>
+        <div class="picker-list" id="repo-filter-list" hidden>
+          <input id="repo-filter-q" autocomplete="off" spellcheck="false" placeholder="search a repository…"
+            aria-label="Search a repository">
+          <div id="repo-filter-rows" role="listbox"></div>
+        </div>
+      </div>
+    </div>
 
-    <!-- How the computer is doing. Always visible; clicking it switches off the weights on the cards. -->
+    <!-- How the computer is doing. Always visible; clicking it switches off the weights on the stories. -->
     <button class="gauge" id="gauge" type="button" hidden></button>
 
     <!-- The four modes: how awake the machine has to stay. It is a scale, not four switches —
@@ -44,9 +87,22 @@
     </div>
   </header>
 
+  <!-- Inside an epic. The board is that epic and nothing else, and this strip is the only thing
+       that says so: which one, how far it has got, and the way back out. It is not on the page
+       until you have gone in — an epic you are not in has nothing to say up here. -->
+  <div class="lane" id="epic-lane" hidden>
+    <span class="key" id="epic-key"></span>
+    <span class="name" id="epic-name"></span>
+    <span class="repo" id="epic-repo"></span>
+    <span class="bar"><i id="epic-fill"></i></span>
+    <span class="count" id="epic-count"></span>
+    <span class="spacer"></span>
+    <button type="button" id="epic-out">Leave the epic</button>
+  </div>
+
   <main id="viewport" class="viewport">
     <div id="board" class="board"></div>
-    <p class="empty" id="empty">The dashboard is empty. Add your first card.</p>
+    <p class="empty" id="empty">The dashboard is empty. Add your first story.</p>
 
     <!-- Where the board continues past the edge: with no scrollbars, it is the only way to tell. -->
     <div class="edges" id="edges" aria-hidden="true"><i class="l"></i><i class="r"></i><i class="t"></i><i class="b"></i></div>
@@ -68,7 +124,7 @@
   <dialog id="editor">
     <form id="editor-form">
       <div class="head">
-        <h2 id="editor-title">New card</h2>
+        <h2 id="editor-title">New story</h2>
         <button type="button" id="f-close" class="x" title="Close" aria-label="Close">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
         </button>
@@ -81,20 +137,61 @@
         </div>
       </label>
 
-      <label>Title
+      <label>Title <small class="aside">(this is also the session name)</small>
         <input id="f-title" required autocomplete="off" spellcheck="false" placeholder="Fix-Login-Bug">
-        <small>this is also the session name</small>
       </label>
 
-      <label>What Claude should do when it starts
-        <textarea id="f-prompt" rows="6" placeholder="you can leave this empty and type straight into Claude Code"></textarea>
+      <!-- Notes, and only notes: they stay on the note and on the post-it, and nothing ever sends
+           them to a terminal. A new story does not have them at all — at that moment there is
+           nothing to note down yet, and a box asking to be filled in is a box that delays the
+           only two things worth doing with a new story, which are the two buttons at the bottom. -->
+      <label id="f-notes-row" hidden>Notes
+        <textarea id="f-notes" rows="6" placeholder="- what you want to remember about it&#10;- one per line"></textarea>
+        <small>they sit on the post-it for you to read — they are never sent to Claude Code</small>
       </label>
 
+      <!-- The epic this story belongs to. A list of the ones this repository already has, or a
+           name typed in that is made on the spot: an epic somebody wanted while writing a story
+           should not cost a trip to another screen. Only here when there is a backlog. -->
+      <label id="f-epic-row" hidden>Epic
+        <input id="f-epic" list="f-epics" autocomplete="off" placeholder="none — or type a new one">
+        <datalist id="f-epics"></datalist>
+      </label>
+
+
       <footer>
         <button type="button" id="f-delete" class="danger">Delete</button>
         <span class="spacer"></span>
         <button type="submit" id="f-save">Save</button>
-        <button type="button" id="f-start" class="primary">Start</button>
+        <button type="button" id="f-discuss">Discuss</button>
+        <button type="button" id="f-start" class="primary">Quick Start</button>
+      </footer>
+    </form>
+  </dialog>
+
+  <!-- A new epic. It asks for the repository and nothing else, then opens a terminal: an epic is
+       born by being told, not by being typed into a form. -->
+  <dialog id="epic-new">
+    <form id="epic-form">
+      <div class="head">
+        <h2>New epic</h2>
+        <button type="button" id="e-close" class="x" title="Close" aria-label="Close">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
+        </button>
+      </div>
+
+      <label>Repository
+        <select id="e-project" required></select>
+      </label>
+
+      <p class="note">k0 opens a terminal and <code>/k0-epic</code> asks what this is, a round of
+        questions at a time, until nothing is left that would change the work. It writes the epic
+        down itself, and the stories under it, once it knows.</p>
+
+      <footer>
+        <span class="spacer"></span>
+        <button type="button" id="e-cancel">Cancel</button>
+        <button type="submit" class="primary">Start the discussion</button>
       </footer>
     </form>
   </dialog>