k0-board 0.3.0 → 0.5.0

package/web/fuzzy.js

@@ -1,47 +1,99 @@
 // ── Searching the names ───────────────────────────────────────────────────────
 // It does not look for the exact word: it looks for the letters you typed, in the order you
-// typed them, scattered through the path. So `audrep` finds `docs/audit-report.md` and `bapl`
-// finds `docs/backlog/plans/`.
+// typed them, scattered through the file's **name**. So `audrep` finds `docs/audit-report.md`.
+//
+// The directory is never searched. It was, once: `.env` scattered its four letters across
+// `.planning/milestones/` and turned up `v1.0-ROADMAP.md`, a file that has nothing to do with
+// what was typed and gives no way to see why it is there — three of the four letters are in a
+// folder name nobody is looking at. A path is not a sentence you meant to write; a file name is.
 //
 // The score exists to put what you actually meant at the top. Worth more: a letter next to the
-// previous one, a letter at the start of a word, and anything in the file's name rather than in
-// the directory — because you usually reach a file through its name, not through where it is.
+// previous one, and a letter at the start of a word.
+
+const BOUNDARY = new Set(['-', '_', '.', ' '])
 
-const BOUNDARY = new Set(['/', '-', '_', '.', ' '])
+/** What is really searched for: the spaces mean nothing here, and neither does the case. */
+const wanted = (query) => String(query ?? '').trim().toLowerCase().replace(/\s+/g, '')
 
 /**
- * How much `text` looks like `query`: the higher, the more alike. `-1` when the letters simply
- * are not there. With an empty search it is 0 for everybody, and the caller decides the order.
+ * The one walk through the file's name, which produces both numbers this file exists for: how
+ * alike the two are, and **which letters** made it so.
+ *
+ * They come out of the same walk on purpose. Underlining letters that a second, separate pass had
+ * chosen would sooner or later underline something the ranking had not used — and a row that says
+ * "this is why I am here" has to be telling the truth.
+ *
+ * `at` comes back as positions inside the whole `text`, not just the name: the caller was handed
+ * a path, and a position only means something next to the path it was taken from.
+ *
+ * Returns `null` when the letters are not there at all.
  */
-export function score(text, query) {
-  const q = String(query ?? '').trim().toLowerCase().replace(/\s+/g, '')
-  if (!q) return 0
+function trace(text, q) {
   const s = String(text ?? '')
-  const low = s.toLowerCase()
-
-  // Where the file name starts: from there on every hit is worth more.
+  // Where the file name starts. Everything before this is the directory, and it is not searched.
   const nameAt = s.lastIndexOf('/') + 1
+  const name = s.slice(nameAt)
+  const low = name.toLowerCase()
 
+  const at = []
   let total = 0
-  let at = 0
+  let from = 0
   let last = -2
   for (const ch of q) {
-    const hit = low.indexOf(ch, at)
-    if (hit === -1) return -1
+    const hit = low.indexOf(ch, from)
+    if (hit === -1) return null
 
     let point = 1
     if (hit === last + 1) point += 4 // next to the previous one
-    if (hit === 0 || BOUNDARY.has(s[hit - 1])) point += 3 // the start of a word
-    else if (s[hit] >= 'A' && s[hit] <= 'Z') point += 2 // the start of a word in camelCase
-    if (hit >= nameAt) point += 2 // in the file name, not the directory
+    if (hit === 0 || BOUNDARY.has(name[hit - 1])) point += 3 // the start of a word
+    else if (name[hit] >= 'A' && name[hit] <= 'Z') point += 2 // the start of a word in camelCase
 
     total += point
+    at.push(hit + nameAt)
     last = hit
-    at = hit + 1
+    from = hit + 1
   }
 
   // On equal hits the shorter name wins: there is less around what you were looking for.
-  return total - s.length * 0.01
+  return { total: total - name.length * 0.01, at }
+}
+
+/**
+ * How much `text` looks like `query`: the higher, the more alike. `-1` when the letters simply
+ * are not there. With an empty search it is 0 for everybody, and the caller decides the order.
+ */
+export function score(text, query) {
+  const q = wanted(query)
+  if (!q) return 0
+  return trace(text, q)?.total ?? -1
+}
+
+/**
+ * Where in `text` the letters of `query` were found, in order — the positions the score was built
+ * from, so a row can underline them and show why it matched. `null` when there was no match, or
+ * nothing to search for.
+ */
+export function positions(text, query) {
+  const q = wanted(query)
+  if (!q) return null
+  return trace(text, q)?.at ?? null
+}
+
+/**
+ * The same positions gathered into stretches — `[[from, to], …]`, the end not included.
+ *
+ * Neighbouring letters belong together: `audrep` against `audit-report.md` found two pieces of
+ * two words, and that is what it should look like. Marked one letter at a time it looks like six
+ * separate coincidences, which is the opposite of what happened.
+ */
+export function runs(at) {
+  const out = []
+  for (const i of at ?? []) {
+    const last = out[out.length - 1]
+    if (last && last[1] === i) last[1] = i + 1
+    else out.push([i, i + 1])
+  }
+  return out
 }
 
 /** The rows that match, most alike first. `key` says where to look. */

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>

package/web/json.js

@@ -0,0 +1,145 @@
+// ── A JSON file, laid out ─────────────────────────────────────────────────────
+// A `package.json` shown as text is a wall you read with your finger. What you actually want to
+// know is what is under `scripts`, and everything else can stay shut until you ask for it.
+//
+// So: a tree that folds. The folding is `<details>`, which the browser already knows how to do —
+// no state to keep, nothing to wire up, and it works before any script has run.
+//
+// And with the folding comes the reason this file also does the searching. The browser's own find
+// does not look inside a closed `<details>`: on a folded tree ⌘F says "not found" for something
+// that is right there. So the search is done here, on the data, and the branches that hold a
+// result are handed back already open.
+//
+// It knows nothing about the page: text in, a string of HTML out. That is what makes it testable.
+
+/**
+ * Written again rather than imported: this module is pulled in by the tests, which run in Node,
+ * where the browser's absolute `/md.js` does not resolve. Four lines are cheaper than making
+ * every pure module share a build.
+ */
+const esc = (s) =>
+  String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
+
+/** How deep it arrives open. Two levels is the shape of the file; three is already its contents. */
+const OPEN_DEPTH = 2
+
+/**
+ * Past this it is not a document any more, it is a dump — and the tree would be a megabyte of
+ * HTML that no browser lays out quickly. The page falls back to showing the text as it is.
+ */
+const MAX_NODES = 20000
+
+/**
+ * The word found inside a piece of text, wrapped so it can be seen, and how many times it is
+ * there. The count is what the page shows next to the box: without it a search that finds
+ * nothing looks exactly like a search that has not run.
+ */
+export function mark(value, query) {
+  const text = String(value ?? '')
+  if (!query) return { html: esc(text), n: 0 }
+  const hay = text.toLowerCase()
+  const needle = query.toLowerCase()
+  let out = ''
+  let at = 0
+  let n = 0
+  for (let i = hay.indexOf(needle, at); i !== -1; i = hay.indexOf(needle, at)) {
+    out += `${esc(text.slice(at, i))}<mark>${esc(text.slice(i, i + needle.length))}</mark>`
+    at = i + needle.length
+    n += 1
+  }
+  return { html: out + esc(text.slice(at)), n }
+}
+
+/** How a value is written, and what colour it is: the type is the colour. */
+function leafValue(value) {
+  if (value === null) return { text: 'null', cls: 'nil' }
+  if (typeof value === 'string') return { text: value, cls: 'str' }
+  if (typeof value === 'number') return { text: String(value), cls: 'num' }
+  if (typeof value === 'boolean') return { text: String(value), cls: 'bool' }
+  return { text: String(value), cls: 'str' }
+}
+
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`
+
+/**
+ * One entry of the tree, and everything under it.
+ *
+ * The number of results comes back up from the leaves rather than being counted again at the
+ * top, because it is the same walk: whoever found a result also knows which branch has to be
+ * open for it to be visible.
+ */
+function node(key, value, depth, query, budget) {
+  if (budget.left <= 0) return { html: '', n: 0 }
+  budget.left -= 1
+
+  const label = key === null ? null : mark(key, query)
+  const name = label ? `<b class="key">${label.html}</b>` : ''
+
+  if (value !== null && typeof value === 'object') {
+    const entries = Array.isArray(value)
+      ? value.map((v, i) => [String(i), v])
+      : Object.entries(value)
+    const brace = Array.isArray(value) ? ['[', ']'] : ['{', '}']
+    const size = Array.isArray(value)
+      ? plural(entries.length, 'item', 'items')
+      : plural(entries.length, 'key', 'keys')
+
+    // An empty object has nothing to open: a summary with no contents is a fold that lies.
+    if (!entries.length) {
+      return {
+        html: `<div class="leaf">${name}<span class="v empty">${brace[0]}${brace[1]}</span></div>`,
+        n: label?.n ?? 0,
+      }
+    }
+
+    let inner = ''
+    let n = label?.n ?? 0
+    for (const [k, v] of entries) {
+      const child = node(k, v, depth + 1, query, budget)
+      inner += child.html
+      n += child.n
+    }
+    // With something searched for, only the branches holding a result open — that is the whole
+    // point of doing the search here. With nothing searched for, the first levels open, which is
+    // the shape of the file without its contents.
+    const open = query ? n > 0 : depth < OPEN_DEPTH
+    return {
+      html:
+        `<details class="node"${open ? ' open' : ''}><summary>${name}` +
+        `<span class="brace">${brace[0]}${brace[1]}</span><em>${size}</em></summary>` +
+        `<div class="kids">${inner}</div></details>`,
+      n,
+    }
+  }
+
+  const { text, cls } = leafValue(value)
+  const hit = mark(text, query)
+  return {
+    html: `<div class="leaf">${name}<span class="v ${cls}">${hit.html}</span></div>`,
+    n: (label?.n ?? 0) + hit.n,
+  }
+}
+
+/**
+ * The whole file as a tree, with `query` picked out inside it.
+ *
+ * When it does not parse, nothing is invented: the reason comes back and the page shows the text
+ * exactly as it is on disk, which is the only honest thing to show for a file that is broken —
+ * and usually the reason you opened it.
+ *
+ * Returns `{ html, matches, error }`.
+ */
+export function tree(text, query = '') {
+  let data
+  try {
+    data = JSON.parse(text)
+  } catch (e) {
+    return { html: '', matches: 0, error: String(e.message || e) }
+  }
+  const budget = { left: MAX_NODES }
+  const out = node(null, data, 0, String(query || '').trim(), budget)
+  if (budget.left <= 0) {
+    return { html: '', matches: 0, error: 'This file is too big to lay out as a tree.' }
+  }
+  return { html: `<div class="json">${out.html}</div>`, matches: out.n, error: null }
+}