k0-board 0.1.2 → 0.2.0

package/web/board.css

@@ -95,7 +95,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 +106,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 +195,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 +245,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 +263,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 +448,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 +460,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 +505,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 +595,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 +685,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; }

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
@@ -108,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()
@@ -127,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
@@ -148,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) =>
@@ -200,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 —
@@ -261,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
@@ -406,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()
@@ -627,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) {