k0-board 0.1.0

package/server/watcher.js

@@ -0,0 +1,200 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import os from 'node:os'
+import { alive as isAlive } from '../platform/shared/run.js'
+
+const SESSIONS_DIR = path.join(os.homedir(), '.claude', 'sessions')
+export const PROJECTS_DIR = path.join(os.homedir(), '.claude', 'projects')
+
+const SLUG_MAX = 200
+
+/**
+ * Reproduces exactly the slug Claude Code uses to name the transcript directory: every
+ * non-alphanumeric character becomes `-`, and above 200 characters the name is truncated and
+ * closed with a hash of the original path.
+ *   /home/you/my-project -> -home-you-my-project
+ */
+export function projectSlug(cwd) {
+  const s = cwd.replace(/[^a-zA-Z0-9]/g, '-')
+  if (s.length <= SLUG_MAX) return s
+  let h = 0
+  for (let i = 0; i < cwd.length; i++) h = ((h << 5) - h + cwd.charCodeAt(i)) | 0
+  return `${s.slice(0, SLUG_MAX)}-${Math.abs(h).toString(36)}`
+}
+
+export function transcriptPath(cwd, sessionId) {
+  return path.join(PROJECTS_DIR, projectSlug(cwd), `${sessionId}.jsonl`)
+}
+
+/**
+ * Changes the name of a session that has already ended, so that renaming a card makes the new
+ * name show up in the list of sessions you can resume.
+ *
+ * These are the two lines Claude Code writes for itself at the end of the transcript on every
+ * turn, and the last one wins: all this does is write another copy.
+ *
+ * Only on a closed session: if the process is alive it holds the file open for appending and
+ * would put the old name back on the next turn. There, the `-n` of Resume takes care of it.
+ */
+export function renameSession(cwd, sessionId, name) {
+  const file = transcriptPath(cwd, sessionId)
+  if (!fs.existsSync(file)) return false
+  const line = (o) => JSON.stringify({ ...o, sessionId }) + '\n'
+  fs.appendFileSync(
+    file,
+    line({ type: 'custom-title', customTitle: name }) + line({ type: 'agent-name', agentName: name })
+  )
+  return true
+}
+
+/**
+ * Reads the live sessions: ~/.claude/sessions/<pid>.json.
+ * `status` is busy | shell | idle | waiting; with waiting, `waitingFor` says why.
+ */
+export function readLiveSessions() {
+  const map = new Map()
+  let files
+  try {
+    files = fs.readdirSync(SESSIONS_DIR)
+  } catch {
+    return map
+  }
+  for (const f of files) {
+    if (!/^\d+\.json$/.test(f)) continue
+    let s
+    try {
+      s = JSON.parse(fs.readFileSync(path.join(SESSIONS_DIR, f), 'utf8'))
+    } catch {
+      continue
+    }
+    if (!s.sessionId || !isAlive(s.pid)) continue
+    map.set(s.sessionId, s)
+  }
+  return map
+}
+
+/**
+ * State read from the transcript, kept incrementally: on the first look the whole file is
+ * read, then only the new part. It has to work this way because the `permission-mode` line is
+ * written when the mode changes, and in a long session it would fall outside any window on
+ * the end of the file.
+ */
+const scans = new Map() // sessionId -> { offset, permissionMode, pending: Map<id,name>, tail }
+
+const WATCHED_TOOLS = new Set(['ExitPlanMode', 'AskUserQuestion'])
+
+export function scanTranscript(cwd, sessionId) {
+  const file = transcriptPath(cwd, sessionId)
+  let scan = scans.get(sessionId)
+  if (!scan) {
+    scan = { offset: 0, permissionMode: null, pending: new Map(), tail: '' }
+    scans.set(sessionId, scan)
+  }
+
+  let size
+  try {
+    size = fs.statSync(file).size
+  } catch {
+    return summarise(scan)
+  }
+  // File recreated or truncated: start over.
+  if (size < scan.offset) Object.assign(scan, { offset: 0, permissionMode: null, pending: new Map(), tail: '' })
+  if (size === scan.offset) return summarise(scan)
+
+  const fd = fs.openSync(file, 'r')
+  try {
+    const len = size - scan.offset
+    const buf = Buffer.alloc(len)
+    fs.readSync(fd, buf, 0, len, scan.offset)
+    scan.offset = size
+    const chunk = scan.tail + buf.toString('utf8')
+    const lines = chunk.split('\n')
+    // The last line may still be half written: we pick it up again next round.
+    scan.tail = lines.pop() ?? ''
+    for (const line of lines) applyLine(scan, line)
+  } finally {
+    fs.closeSync(fd)
+  }
+  return summarise(scan)
+}
+
+function applyLine(scan, line) {
+  if (!line.trim()) return
+  let d
+  try {
+    d = JSON.parse(line)
+  } catch {
+    return
+  }
+  if (d.type === 'permission-mode' && d.permissionMode) {
+    scan.permissionMode = d.permissionMode
+    return
+  }
+  const content = d.message?.content
+  if (!Array.isArray(content)) return
+  for (const c of content) {
+    if (c?.type === 'tool_use' && WATCHED_TOOLS.has(c.name)) {
+      scan.pending.set(c.id, c.name)
+      continue
+    }
+    if (c?.type !== 'tool_result' || !c.tool_use_id) continue
+    const was = scan.pending.get(c.tool_use_id)
+    scan.pending.delete(c.tool_use_id)
+    // Plan approved: leave plan mode straight away, without waiting for the `permission-mode`
+    // line that only arrives on the next turn. If the plan was rejected instead, we stay in
+    // planning.
+    if (was === 'ExitPlanMode' && typeof c.content === 'string' && c.content.includes('approved your plan')) {
+      scan.permissionMode = 'auto'
+    }
+  }
+}
+
+function summarise(scan) {
+  const names = [...scan.pending.values()]
+  return {
+    planMode: scan.permissionMode === 'plan',
+    pendingPlan: names.includes('ExitPlanMode'),
+    pendingAsk: names.includes('AskUserQuestion'),
+  }
+}
+
+export function forgetSession(sessionId) {
+  scans.delete(sessionId)
+}
+
+/**
+ * Translates Claude Code's signals into the board's statuses.
+ * Returns { status, alive }.
+ */
+export function deriveStatus(card, live) {
+  if (card.completed_at) return { status: 'COMPLETED', alive: false }
+  if (!card.session_id) return { status: 'BACKLOG', alive: false }
+
+  const session = live.get(card.session_id)
+  if (!session) {
+    // Process dead: the session can still be resumed. We keep the last status only if it said
+    // something about you (an open question, a plan left sitting there); WORKING and PLANNING
+    // would be a lie, nothing is grinding away any more.
+    const stale = card.status === 'WORKING' || card.status === 'PLANNING' || card.status === 'BACKLOG'
+    return { status: stale ? 'IDLE' : card.status, alive: false }
+  }
+
+  const t = scanTranscript(session.cwd || card.project_path, card.session_id)
+
+  switch (session.status) {
+    case 'busy':
+      return { status: t.planMode ? 'PLANNING' : 'WORKING', alive: true }
+
+    case 'waiting':
+      // While a dialog is open the transcript has not yet written the call that caused it
+      // (verified: with the plan on screen, there is no trace of ExitPlanMode). The
+      // distinction comes from `waitingFor`, which the session file writes immediately:
+      // "input needed" is a question, "permission prompt" in plan mode is a plan to approve.
+      if (session.waitingFor === 'input needed') return { status: 'ASK', alive: true }
+      if (t.planMode || t.pendingPlan) return { status: 'PLANNED', alive: true }
+      return { status: 'ASK', alive: true }
+
+    default: // idle | shell — no dialog open, the ball is in your court
+      return { status: 'IDLE', alive: true }
+  }
+}

package/web/base.css

@@ -0,0 +1,134 @@
+/* Type and scale: the system font, 17px base, with Caveat for the handwritten touches only.
+   The house variables live here, and they live here because there are two pages: the board
+   and the file viewer. If you change a colour, change it once — this is the place.
+
+   The font is bundled rather than linked. k0 is a local tool and should stay one: a link to a
+   font service would mean a request to a third party every time you open the board, and a
+   board that comes up wrong on a laptop with no connection. See web/fonts/README.md. */
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 500 600;
+  font-display: swap;
+  src: url('fonts/caveat-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 500 600;
+  font-display: swap;
+  src: url('fonts/caveat-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
+    U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+:root {
+  --bg: #f3f1ea;
+  --ink: #2b2b2b;
+  --muted: #7d7869;
+  --line: #ddd8cb;
+  --paper: #fffdf7;
+
+  /* One colour per status: the whole card is what tells you where you are. */
+  --ASK: #fbb4b4;
+  --PLANNED: #fdd0a2;
+  --IDLE: #fde68a;
+  --WORKING: #a9c9f5;
+  --PLANNING: #c9dbfb;
+  --BACKLOG: #e2dfd6;
+  --COMPLETED: #b7e8c4;
+
+  /* The two signals: red if something is outstanding, green if everything is safe.
+     The red is the house red, the same one the bin and Delete use. */
+  --alert: #b91c1c;
+  --calm: #15803d;
+  --warn: #b45309;
+
+  --sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --hand: 'Caveat', ui-sans-serif, system-ui, sans-serif;
+  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html { font-size: 17px; }
+html, body { height: 100%; }
+
+/* ── Buttons and dialogs ─────────────────────────────────────────────────────
+   They live here, and not on the board where they were born, because both pages open
+   dialogs: the card editor over there, the paste-a-chunk-of-chat box over here. A dialog
+   without its buttons would be half a dialog, so they come together. */
+button {
+  font: inherit;
+  border: 1px solid var(--line);
+  background: #fffdf7;
+  border-radius: 8px;
+  padding: 8px 15px;
+  cursor: pointer;
+}
+button:hover { background: #fff; border-color: #c9c3b4; }
+button.primary { background: var(--ink); color: #fffdf7; border-color: var(--ink); font-weight: 600; }
+button.danger { color: #b91c1c; border-color: #f1c9c9; }
+button.destructive { background: #b91c1c; border-color: #b91c1c; color: #fffdf7; font-weight: 600; }
+button.destructive:hover { background: #a11717; border-color: #a11717; }
+
+dialog {
+  border: none;
+  border-radius: 14px;
+  padding: 26px;
+  width: min(560px, 93vw);
+  background: #fffdf7;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 1rem;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
+}
+dialog::backdrop { background: rgba(40, 38, 32, .42); }
+dialog h2 { margin: 0; font: 700 1.3rem/1 var(--sans); }
+
+/* The X sits top right, where you expect to find it: closing without saving is a way out,
+   not a choice to line up next to the buttons that do something. */
+dialog .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+dialog .x {
+  flex: none;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  margin: -4px -4px 0 0;
+  border: none;
+  background: none;
+  border-radius: 999px;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+dialog .x svg { width: 17px; height: 17px; display: block; }
+dialog .x:hover { background: #f0ede3; color: var(--ink); border: none; }
+dialog label { display: block; margin-bottom: 18px; font-size: .82rem; font-weight: 600; color: var(--muted); }
+dialog label small { display: block; margin-top: 5px; font-weight: 400; }
+dialog input, dialog textarea {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  font: inherit;
+  font-size: 1rem;
+  color: var(--ink);
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+}
+dialog textarea { resize: vertical; line-height: 1.5; }
+/* A repository typed but never picked from the list: it does not exist, and it shows. */
+dialog input.bad { border-color: #d97070; background: #fff6f6; }
+dialog footer { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
+dialog .spacer { flex: 1; }
+
+/* The house confirmation: only ever asked before throwing a card away. */
+dialog.ask { width: min(380px, 88vw); padding: 22px 24px 18px; }
+dialog.ask p { margin: 0 0 20px; font-size: 1rem; }
+dialog.ask footer { margin: 0; }