k0-board 0.1.2 → 0.3.0

package/server/writer.js

@@ -0,0 +1,128 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { spawn } from 'node:child_process'
+import { which } from '../platform/shared/run.js'
+import { ROOT } from './paths.js'
+
+// ── Who writes the words ─────────────────────────────────────────────────────
+// k0 can work out the facts on its own. It cannot write them up, and it must not learn how:
+// that would mean a key to keep, an account to configure, and a request leaving this machine
+// carrying your commit messages and the names of your repositories. k0 makes no network
+// requests, and that promise is worth more than a better-written paragraph.
+//
+// It does not need to. Everybody running k0 already has Claude Code installed, signed in and
+// paid for — that is the whole premise of the product — so the model is already here. k0 hands
+// it the facts and gets prose back, the same arrangement `/k0-import` has always had, except
+// this one is invisible: no terminal opens and nothing lands on the board. `sessions.js`
+// already drops `claude -p` runs when it looks for sessions to import, so these cannot come
+// back later as cards.
+
+// `K0_CLAUDE` names the executable outright. It exists for two reasons: a test must never be
+// able to reach the real Claude Code by accident, and an installation that keeps it somewhere
+// nobody thought of should not be told it has no Claude Code at all. A path that is not there
+// counts as not there, rather than as a promise that fails at the worst moment.
+const CLAUDE = () => {
+  const named = process.env.K0_CLAUDE
+  if (named) return fs.existsSync(named) ? named : null
+  return which('claude', [
+    path.join(process.env.HOME || '', '.local/bin/claude'),
+    path.join(process.env.HOME || '', '.claude/local/claude'),
+    '/opt/homebrew/bin/claude',
+    '/usr/local/bin/claude',
+  ])
+}
+
+const SKILL = path.join(ROOT, '.claude', 'skills', 'k0-changelog', 'SKILL.md')
+const TIMEOUT = 3 * 60 * 1000
+const MAX_OUTPUT = 1 << 20
+
+/**
+ * Whether the write-up can happen at all and, if not, why — in a sentence meant for the page
+ * rather than for a log. An adapter never pretends, and neither does this: the facts are shown
+ * either way, with the missing half explained instead of quietly absent.
+ */
+export function capability() {
+  if (!CLAUDE()) {
+    return { can: false, why: 'Claude Code is not on this machine, so there is nobody here to write the summary.' }
+  }
+  if (!fs.existsSync(SKILL)) {
+    return { can: false, why: 'The k0-changelog skill is missing from this copy of k0.' }
+  }
+  return { can: true, why: null }
+}
+
+// One at a time: a second window of the same page must not start a second model. Each run gets
+// a number, and only the run that is still the current one is allowed to record anything —
+// otherwise a run abandoned halfway would come back later and overwrite the answer somebody is
+// already reading.
+let job = null
+let runs = 0
+
+/** Starts the write-up for a window, unless that window is already running or already done. */
+export function write(key, payload) {
+  if (job && job.key === key && (job.running || job.text)) return state(key)
+
+  const can = capability()
+  if (!can.can) {
+    job = { id: ++runs, key, running: false, text: null, error: can.why, child: null }
+    return state(key)
+  }
+
+  if (job?.child) job.child.kill('SIGTERM')
+  const id = ++runs
+  const child = spawn(CLAUDE(), ['-p', '/k0-changelog', '--output-format', 'text'], {
+    cwd: ROOT, // where the project skill lives, whether k0 runs installed or from a checkout
+    stdio: ['pipe', 'pipe', 'pipe'],
+  })
+  job = { id, key, running: true, text: null, error: null, child }
+
+  /** Records the end of THIS run, once. A run that has already ended cannot end again. */
+  const finish = (patch) => {
+    if (job?.id !== id || !job.running) return
+    job = { ...job, ...patch, running: false, child: null }
+  }
+
+  let out = ''
+  let err = ''
+  const timer = setTimeout(() => {
+    child.kill('SIGTERM')
+    finish({ error: 'The summary took too long to write and was given up on.' })
+  }, TIMEOUT)
+
+  child.stdout.on('data', (d) => {
+    if (out.length < MAX_OUTPUT) out += d
+  })
+  child.stderr.on('data', (d) => {
+    if (err.length < 4096) err += d
+  })
+  child.on('error', (e) => {
+    clearTimeout(timer)
+    finish({ error: `Claude Code would not start: ${e.message}` })
+  })
+  child.on('close', (code) => {
+    clearTimeout(timer)
+    const text = out.trim()
+    if (code === 0 && text) finish({ text })
+    else finish({ error: err.trim().split('\n').pop() || 'The summary came back empty.' })
+  })
+
+  // The facts go in on standard input rather than in the prompt: the skill then needs no tools,
+  // no permissions and no file of its own, and a month of commits does not have to fit on a
+  // command line. Claude Code waits for standard input, so it must always be closed.
+  child.stdin.on('error', () => {})
+  child.stdin.end(payload)
+
+  return state(key)
+}
+
+/** What the page is waiting for. A window nobody has asked about is simply not running. */
+export function state(key) {
+  if (!job || job.key !== key) return { running: false, text: null, error: null }
+  return { running: !!job.running, text: job.text ?? null, error: job.error ?? null }
+}
+
+/** Called on the way out, so a model left mid-sentence does not outlive the server. */
+export function stop() {
+  if (job?.child) job.child.kill('SIGTERM')
+  job = null
+}

package/web/board.css

@@ -88,6 +88,10 @@ body {
   flex: none;
   background: var(--calm);
 }
+/* That k0 is looking after the memory for you is worth knowing once and then forgetting: it sits
+   on the same chip, lighter than the numbers beside it, because the numbers are what you came to
+   read and this is only there so the closing is never a surprise. */
+.gauge .idle { font-weight: 500; opacity: .6; margin-left: -2px; white-space: nowrap; }
 .gauge.warn i { background: var(--warn); }
 .gauge.bad i { background: var(--alert); }
 /* Solid red only when it is critical: the one moment it is allowed to interrupt. */
@@ -95,7 +99,8 @@ body {
 
 /* The "+" sits next to k0, at the start of the bar: that is where a card is born.
    The sign is drawn, not typed: a font glyph never sits in the middle of the circle. */
-.new {
+.new,
+.log {
   flex: none;
   padding: 0;
   width: 34px;
@@ -105,7 +110,17 @@ body {
   align-items: center;
   justify-content: center;
 }
-.new svg { width: 17px; height: 17px; display: block; }
+.new svg,
+.log svg { width: 17px; height: 17px; display: block; }
+
+/* The way out to the ChangeLog. It is a link, not a button, because it goes somewhere — and it
+   is drawn quieter than the plus, because starting work matters more than reading about it. */
+.log {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--muted);
+}
+.log:hover { background: #fff; border-color: #c9c3b4; color: var(--ink); }
 
 /* ── The four modes ───────────────────────────────────────────────────
    At the end of the bar, a row of four: how awake the machine has to stay. Switched off they are
@@ -184,11 +199,47 @@ body {
    too: a post-it is never taller than it is wide. */
 :root { --card-w: 268px; }
 .column { flex: 0 0 var(--card-w); }
+/* Two groups with the name between them: on the left what you press — the `+` and the fold — and
+   on the right what tells you how things stand, the git mark and the globe. The count of post-its
+   that used to follow the name is gone: it took the room the name now has, and answered nothing.
+   Flex is what lets the name give up characters instead of pushing the marks off the end. */
 .column > h2 {
+  display: flex;
+  align-items: center;
   margin: 0 0 14px 4px;
   font: 600 1.5rem/1 var(--hand);
   color: #5f5a4e;
 }
+.column > h2 .name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+}
+/* With the server up the name is the way into the site, and it says so standing still — a dotted
+   line under it, there for as long as the server is. Waiting for a hover was the first idea and it
+   was the wrong one: the whole question the globe answers is "is this one up", and a heading you
+   have to go and touch to find out is a second place to ask it. Dotted rather than solid because
+   this is a hand-written heading, not a link in a paragraph: enough to say there is something
+   underneath, not enough to turn the row into a web page. Under the pointer it firms up. */
+.column > h2 a.name {
+  /* Dashed, and the same green as the globe, so the two marks say one thing. The first attempt
+     was a grey dotted line at half opacity, which is in the stylesheet and invisible on the
+     board: next to a lit globe it read as nothing at all. What rescued it was the dash and the
+     colour, not weight — a hairline is enough once it is green, and anything thicker starts
+     underlining the heading rather than marking it. */
+  text-decoration: underline dashed;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--calm);
+  /* The ellipsis needs `overflow: hidden`, and that clips the underline too. This is the room it
+     needs to survive. */
+  padding-bottom: 3px;
+}
+.column > h2 a.name:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
 .column > h2 small {
   font-family: var(--sans);
   color: var(--muted);
@@ -198,8 +249,10 @@ body {
   vertical-align: middle;
 }
 /* The column's "+": from here a card is born already addressed to this repository.
-   It sits to the left of the name, faded, and darkens when you hover over it. */
-.column .add {
+   It sits to the left of the name, faded, and darkens when you hover over it. The button that
+   puts the column away stands next to it and is cut from the same cloth. */
+.column .add,
+.column > h2 .fold {
   padding: 0;
   width: 19px;
   height: 19px;
@@ -214,8 +267,17 @@ body {
   align-items: center;
   justify-content: center;
 }
-.column .add svg { width: 15px; height: 15px; display: block; }
+.column .add svg,
+.column > h2 .fold svg { width: 15px; height: 15px; display: block; }
 .column .add:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+/* And next to it, the one that puts the column away. It stands there in plain sight, exactly as
+   faint as the `+`: a button that only comes out on hover is a button nobody knows exists. Where
+   the column cannot be put away it goes fainter still and stops answering — it does not leave,
+   because a column runs and goes back to your turn every few seconds and the button would spend
+   the session blinking. */
+.column > h2 .fold:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+.column > h2 .fold[disabled] { opacity: .12; cursor: default; }
+.column > h2 .fold[disabled]:hover { opacity: .12; background: none; }
 
 .empty {
   position: absolute;
@@ -390,11 +452,11 @@ body {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 3px 0;
+  padding: 4px 0;
   min-width: 0;
 }
 .column.repos .name {
-  font: 500 1.1rem/1.25 var(--hand);
+  font: 500 1.35rem/1.25 var(--hand);
   color: var(--muted);
   min-width: 0;
   overflow-wrap: anywhere;
@@ -402,6 +464,20 @@ body {
 .column.repos .repo:hover .name { color: var(--ink); }
 .column.repos .git { margin-left: auto; }
 
+/* ── Old ──────────────────────────────────────────────────────────────
+   The repositories that do have work on the board, just not lately. Built like `Others` next to
+   it, because it is the same gesture — one click from being a column again — with two things
+   `Others` has nothing to say about: how much work is parked in there, and how long it has been
+   quiet. The name is a button here, not a label: it is what brings the column back. */
+.column.old .repo { cursor: pointer; }
+.column.old .name {
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
 /* ── The git mark ─────────────────────────────────────────────────────
    One symbol: the dot if there is work that is nowhere yet, the arrow if it is committed but not
    pushed, the tick if everything is safe. The detail is in the title, which comes out on hover.
@@ -433,6 +509,38 @@ body {
 .git.none { color: rgba(0, 0, 0, .32); }
 .column > h2 .git { margin-left: 8px; vertical-align: middle; }
 
+/* ── The dev server ───────────────────────────────────────────────────
+   The last thing on the right, after the git mark: is this repository's site up. Grey is off,
+   green is up — the same green as the git tick, because it means the same thing — and red is
+   tried and could not. One click switches it, two restart it.
+
+   While it is coming up it breathes rather than spins. Breathing is already what a card does
+   while a session is working (see `.postit.WORKING` above), and there is no reason for the board
+   to have two different ways of saying the same thing. */
+.column > h2 .globe {
+  flex: none;
+  padding: 0;
+  margin-left: 7px;
+  width: 19px;
+  height: 19px;
+  border: none;
+  background: none;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, .32);
+}
+.column > h2 .globe svg { width: 14px; height: 14px; display: block; }
+.column > h2 .globe:hover { background: rgba(0, 0, 0, .07); }
+.column > h2 .globe.up { color: var(--calm); }
+.column > h2 .globe.failed { color: var(--alert); }
+.column > h2 .globe.starting { color: var(--muted); cursor: default; animation: pulse 1.4s ease-in-out infinite; }
+.column > h2 .globe[disabled] { cursor: default; }
+.column > h2 .globe[disabled]:hover { background: none; }
+@keyframes pulse { 50% { opacity: .3; } }
+
 /* ── What a session weighs ────────────────────────────────────────────
    At the head of the card, after the repository name and the git mark: repository · changes ·
    load. Grey like the rest of the row — the colour comes from the gauge at the top — except for
@@ -491,6 +599,19 @@ body {
   background: rgba(255, 255, 255, .72);
   border-color: rgba(0, 0, 0, .14);
 }
+/* The one you reach for rarely: a link at the end of the row, so it is there without competing
+   with the button next to it. */
+.postit .actions button.link {
+  font-weight: 500;
+  padding: 6px 2px;
+  background: none;
+  border-color: transparent;
+  box-shadow: none;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  opacity: .55;
+}
+.postit .actions button.link:hover, .postit .actions button.link:focus-visible { opacity: 1; }
 
 /* ── Editor ───────────────────────────────────────────────────────────
    The dialog and its buttons live in base.css, which belongs to both pages: the file viewer opens
@@ -568,9 +689,18 @@ html[data-driving] .modes button svg { width: 27px; height: 27px; }
 html[data-driving] .column .add { width: 26px; height: 26px; }
 html[data-driving] .column .add svg { width: 20px; height: 20px; }
 
+/* Putting a column away: the same target as the `+`, and it grows with it. */
+html[data-driving] .column > h2 .fold { width: 26px; height: 26px; }
+html[data-driving] .column > h2 .fold svg { width: 20px; height: 20px; }
+html[data-driving] .column > h2 .fold[disabled] { opacity: .12; }
+
 /* The git lens: it is the door to the files, and at 12px it is a target for sitting still. */
 html[data-driving] .git svg { width: 18px; height: 18px; }
 
+/* The globe, which is a switch and so needs a target rather than a glyph. */
+html[data-driving] .column > h2 .globe { width: 26px; height: 26px; }
+html[data-driving] .column > h2 .globe svg { width: 20px; height: 20px; }
+
 /* The corner pencil. As well as growing, it stays visible: normally it appears on hover, and a
    target that expects to be found before it will show itself is, in driving mode, not a target. */
 html[data-driving] .postit .corner { width: 34px; height: 34px; opacity: 1; }