k0-board 0.4.0 → 0.6.0

package/server/writer.js

@@ -15,7 +15,7 @@ import { ROOT } from './paths.js'
 // 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.
+// back later as stories.
 
 // `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
@@ -32,54 +32,125 @@ const CLAUDE = () => {
   ])
 }
 
-const SKILL = path.join(ROOT, '.claude', 'skills', 'k0-changelog', 'SKILL.md')
+const skillFile = (skill) => path.join(ROOT, '.claude', 'skills', skill, 'SKILL.md')
 const TIMEOUT = 3 * 60 * 1000
 const MAX_OUTPUT = 1 << 20
 
+// A skill name goes onto a command line as `/<name>`, so it is not allowed to be anything the
+// caller feels like. Nothing here takes one from a request today, and the guard is what keeps that
+// true after somebody adds an endpoint that does.
+const NAMED = /^[a-z0-9][a-z0-9-]{0,63}$/
+
 /**
  * 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() {
+export function capability(skill) {
+  if (!NAMED.test(String(skill ?? ''))) return { can: false, why: `${skill} is not the name of a skill.` }
   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.' }
+  if (!fs.existsSync(skillFile(skill))) {
+    return { can: false, why: `The ${skill} 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
+// One job per key, and the key is whatever the page that asked is waiting on: the ChangeLog's
+// window, or What's New in one language at one level. Two pages can be writing at once — they
+// were not able to before, and they have to be, because one of them opens on top of the other.
+//
+// Within a key it is still 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 for its
+// key may record anything — otherwise a run abandoned halfway would come back later and
+// overwrite the answer somebody is already reading.
+const jobs = new Map()
 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)
+// A finished job holds its whole page in memory, and a key is a window or a language: leave them
+// all in and a tab left open for a week keeps every summary it ever asked for. A Map hands them
+// back in the order they were made, so the oldest finished one goes first; anything still running
+// stays, whatever else has to.
+const MAX_JOBS = 8
+
+/** Room for the job about to be made — one more than is there, unless this key is already held. */
+function makeRoom(incoming) {
+  const ceiling = jobs.has(incoming) ? MAX_JOBS : MAX_JOBS - 1
+  for (const [key, job] of jobs) {
+    if (jobs.size <= ceiling) return
+    if (!job.running) jobs.delete(key)
+  }
+}
 
-  const can = capability()
-  if (!can.can) {
-    job = { id: ++runs, key, running: false, text: null, error: can.why, child: null }
-    return state(key)
+// Three at a time, and the machine they think on is the user's own — the one they are also trying
+// to work on. Two pages open at once is the real case; three is already generous.
+const MAX_RUNNING = 3
+
+const running = () => {
+  let n = 0
+  for (const job of jobs.values()) if (job.running) n++
+  return n
+}
+
+/**
+ * Room for one more model to think in: the oldest run still going gives up its place.
+ *
+ * Not a summary snatched away from somebody. Two pages write, and each of them watches one key at
+ * a time — switching the period on the ChangeLog stops reading the run it started and asks for
+ * another, in the same second. So a fourth run means three keys have already been walked away
+ * from, and the oldest of them is the one nobody is waiting for.
+ *
+ * Refusing instead is what the page cannot do anything with, and it is what this used to do: click
+ * through Today, Yesterday and Week and the fourth click printed "ask again when one of them is
+ * done" to somebody who had only pressed a button. The job is dropped before the child is killed,
+ * so its own `close` finds nothing under its key and writes no error over a key that has moved on.
+ */
+function retireOldest() {
+  for (const [key, job] of jobs) {
+    if (!job.running) continue
+    jobs.delete(key)
+    job.child?.kill('SIGTERM')
+    return true
   }
+  return false
+}
+
+// A run that never started, remembered under its key as though it had finished badly. The page
+// asks once and then polls, so a refusal nobody wrote down would leave it waiting for ever.
+const refuse = (key, why) => {
+  jobs.set(key, { id: ++runs, key, running: false, text: null, error: why, child: null })
+  return state(key)
+}
+
+/**
+ * Starts `claude -p /<skill>` for a key, unless that key is already running or already done.
+ * The payload goes in on standard input; what comes back is read with `state(key)`.
+ *
+ * A run belongs to its key and to nothing else: it never touches another key's job, so the
+ * ChangeLog cannot cancel What's New by being asked for a second time.
+ */
+export function run(skill, key, payload) {
+  const held = jobs.get(key)
+  if (held && (held.running || held.text)) return state(key)
+  makeRoom(key)
+
+  const can = capability(skill)
+  if (!can.can) return refuse(key, can.why)
+  while (running() >= MAX_RUNNING) if (!retireOldest()) break
 
-  if (job?.child) job.child.kill('SIGTERM')
   const id = ++runs
-  const child = spawn(CLAUDE(), ['-p', '/k0-changelog', '--output-format', 'text'], {
+  const child = spawn(CLAUDE(), ['-p', `/${skill}`, '--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 }
+  jobs.set(key, { 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 }
+    const mine = jobs.get(key)
+    if (mine?.id !== id || !mine.running) return
+    jobs.set(key, { ...mine, ...patch, running: false, child: null })
   }
 
   let out = ''
@@ -115,14 +186,15 @@ export function write(key, payload) {
   return state(key)
 }
 
-/** What the page is waiting for. A window nobody has asked about is simply not running. */
+/** What the page is waiting for. A key nobody has asked about is simply not running. */
 export function state(key) {
-  if (!job || job.key !== key) return { running: false, text: null, error: null }
+  const job = jobs.get(key)
+  if (!job) 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
+  for (const job of jobs.values()) if (job.child) job.child.kill('SIGTERM')
+  jobs.clear()
 }

package/web/account.js

@@ -0,0 +1,265 @@
+// ── The account, on the board ────────────────────────────────────────────────
+// Two things, and only two. A chip at the end of the top bar saying who is signed in and whether
+// the cloud has everything — a dot, green when it does, amber while something is waiting to go
+// up, grey when k0 Cloud cannot be reached and the board is carrying on by itself. And, until an
+// account is linked and let in, a screen in front of the board that says what to do about it.
+//
+// The screen only appears when there is a way past it: if the cloud has no way of signing in
+// switched on yet, there is nothing the person in front of it could do, and blocking their board
+// for that would be k0's failure dressed up as theirs. Offline at the first start is the same: the
+// screen says so rather than offering buttons that cannot work.
+
+const $ = (sel, root = document) => root.querySelector(sel)
+
+const NAMES = { github: 'GitHub', google: 'Google' }
+
+let last = null
+
+async function get() {
+  const res = await fetch('/api/cloud', { cache: 'no-store' })
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  return res.json()
+}
+
+async function post(action, body = {}) {
+  const res = await fetch(`/api/cloud/${action}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
+  return data
+}
+
+function el(tag, attrs = {}, ...children) {
+  const node = document.createElement(tag)
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'class') node.className = v
+    else if (k.startsWith('on')) node.addEventListener(k.slice(2), v)
+    else if (v != null) node.setAttribute(k, v)
+  }
+  for (const c of children) if (c != null) node.append(c)
+  return node
+}
+
+// ── The screen in front of the board ─────────────────────────────────────────
+
+let later = false
+
+function gate(s) {
+  let box = $('#account-gate')
+  // The page that says the move is done stays until it is read and closed.
+  if (box?.dataset.kind === 'done') return
+  const signIn = s.enabled && (!s.linked || !s.approved) && (s.providers?.length || (!s.linked && s.online === false))
+  // The move is offered, not imposed: the board keeps working on its own numbers until its owner
+  // has looked at the new ones and said yes, and "Not now" really means not now.
+  const moving = s.enabled && s.linked && s.approved && s.needs_move && !later
+  if (!signIn && !moving) {
+    box?.remove()
+    document.body.classList.remove('gated')
+    return
+  }
+  if (box?.dataset.kind === 'move' && moving) return
+  if (!box) {
+    box = el('div', { id: 'account-gate', class: 'account-gate', role: 'dialog', 'aria-modal': 'true' })
+    document.body.append(box)
+  }
+  document.body.classList.add('gated')
+  box.dataset.kind = moving ? 'move' : 'gate'
+  box.replaceChildren(moving ? move(s) : s.linked ? waiting(s) : signInCard(s))
+}
+
+function move(s) {
+  const card = el('div', { class: 'gate-card wide' },
+    el('h2', {}, 'Move your board to k0 Cloud'),
+    el('p', {}, `You are signed in as ${s.email || s.name || 'you'}. The stories already on this machine were numbered here, ` +
+      'and from now on a number is one for your whole account, whichever repository and whichever machine. ' +
+      'Moving the board renumbers every story and epic once, in the order they were made, renames their files in .k0/, ' +
+      'and sends the board up. A copy of the database is kept first.'),
+  )
+  const table = el('div', { class: 'move-table' })
+  const buttons = el('div', { class: 'gate-buttons' })
+  const show = el('button', {
+    type: 'button',
+    onclick: async () => {
+      show.disabled = true
+      try {
+        const res = await fetch('/api/cloud/move', { cache: 'no-store' })
+        const plan = await res.json()
+        if (!res.ok) throw new Error(plan.error || `HTTP ${res.status}`)
+        table.replaceChildren(numbers(plan.rows, plan.texts))
+        go.hidden = false
+        show.hidden = true
+      } catch (err) {
+        show.disabled = false
+        note(card, err.message)
+      }
+    },
+  }, 'Show me the new numbers')
+  const go = el('button', {
+    type: 'button',
+    class: 'primary',
+    hidden: '',
+    onclick: async () => {
+      go.disabled = true
+      try {
+        const done = await post('move')
+        const box = $('#account-gate')
+        if (box) box.dataset.kind = 'done'
+        card.replaceChildren(
+          el('h2', {}, 'Moved'),
+          el('p', {}, `${done.moved} stories and epics now carry their account-wide numbers, starting at K${done.start}.`),
+          el('p', { class: 'gate-note' }, `The copy taken before the move: ${done.backup}`),
+          el('p', { class: 'gate-note' }, `Every old number beside its new one: ${done.map}`),
+          el('div', { class: 'gate-buttons' }, el('button', { type: 'button', class: 'primary', onclick: () => location.reload() }, 'Back to the board')),
+        )
+      } catch (err) {
+        go.disabled = false
+        note(card, err.message)
+      }
+    },
+  }, 'Move it')
+  const notNow = el('button', {
+    type: 'button',
+    onclick: () => {
+      later = true
+      $('#account-gate')?.remove()
+      document.body.classList.remove('gated')
+    },
+  }, 'Not now')
+  buttons.append(show, go, notNow)
+  card.append(buttons, table)
+  return card
+}
+
+/** Old number beside new, a repository at a time, the way the person reading it thinks of them. */
+function numbers(rows, texts = 0) {
+  const byRepo = new Map()
+  for (const r of rows) {
+    const name = (r.project_path || '').split(/[\\/]/).filter(Boolean).pop() || r.project_path
+    if (!byRepo.has(name)) byRepo.set(name, [])
+    byRepo.get(name).push(r)
+  }
+  const wrap = el('div')
+  wrap.append(el('p', { class: 'gate-note' }, `${rows.length} in all, across ${byRepo.size} repositor${byRepo.size === 1 ? 'y' : 'ies'}.` +
+    (texts ? ` ${texts} pieces of text name a story by its number — a plan, a prompt, a decision — and are updated to the new one, inside the same repository.` : '')))
+  for (const [name, list] of byRepo) {
+    wrap.append(el('h3', {}, name))
+    const t = el('table')
+    t.append(el('tr', {}, el('th', {}, 'Was'), el('th', {}, 'Will be'), el('th', {}, '')))
+    for (const r of list) t.append(el('tr', {}, el('td', {}, r.old), el('td', {}, r.new), el('td', {}, `${r.kind === 'epic' ? 'Epic · ' : ''}${r.title}`)))
+    wrap.append(t)
+  }
+  return wrap
+}
+
+function signInCard(s) {
+  const providers = s.providers || []
+  const card = el('div', { class: 'gate-card' },
+    el('h2', {}, 'Connect your account'),
+    el('p', {}, 'k0 keeps your board in k0 Cloud, so it survives a lost laptop, reaches your other machines and can be read from a browser. ' +
+      'It keeps working here without a connection and catches up when it has one.'),
+  )
+  if (!providers.length) {
+    card.append(el('p', { class: 'gate-note' }, 'k0 Cloud cannot be reached right now. Connect to the internet and this page will offer the way in.'))
+    return card
+  }
+  const row = el('div', { class: 'gate-buttons' })
+  for (const p of providers) {
+    row.append(el('button', {
+      type: 'button',
+      class: 'primary',
+      onclick: async (e) => {
+        e.currentTarget.disabled = true
+        try {
+          const { url } = await post('login', { provider: p })
+          location.href = url
+        } catch (err) {
+          e.currentTarget.disabled = false
+          note(card, err.message)
+        }
+      },
+    }, `Continue with ${NAMES[p] || p}`))
+  }
+  card.append(row)
+  card.append(el('p', { class: 'gate-note' }, 'k0 is in early access: after you sign in, your account opens as soon as it has been approved.'))
+  return card
+}
+
+function waiting(s) {
+  const card = el('div', { class: 'gate-card' },
+    el('h2', {}, 'You are on the list'),
+    el('p', {}, `Signed in as ${s.email || s.name || 'you'}. k0 is in early access, and your account opens as soon as it has been approved — this page notices by itself.`),
+  )
+  card.append(el('div', { class: 'gate-buttons' },
+    el('button', { type: 'button', onclick: () => post('logout').then(refresh) }, 'Use another account'),
+  ))
+  return card
+}
+
+function note(card, text) {
+  let n = $('.gate-error', card)
+  if (!n) card.append((n = el('p', { class: 'gate-error' })))
+  n.textContent = text
+}
+
+// ── The chip on the bar ──────────────────────────────────────────────────────
+
+function chip(s) {
+  let c = $('#account')
+  if (!s.enabled || !s.linked) {
+    c?.remove()
+    return
+  }
+  if (!c) {
+    c = el('div', { class: 'account', id: 'account' })
+    $('.topbar')?.append(c)
+  }
+  const state = s.online === false ? 'offline' : s.pending > 0 || s.provisional > 0 ? 'pending' : s.sync_error ? 'offline' : 'synced'
+  const said = {
+    synced: 'Everything is in k0 Cloud.',
+    pending: `${s.pending} change${s.pending === 1 ? '' : 's'} on the way to k0 Cloud.`,
+    offline: s.sync_error || 'k0 Cloud cannot be reached; the board carries on here and catches up later.',
+  }[state]
+  const menu = el('div', { class: 'menu account-menu', role: 'menu', hidden: '' },
+    el('p', {}, s.email || s.name || ''),
+    el('p', { class: 'account-said' }, said),
+    el('button', { type: 'button', role: 'menuitem', onclick: () => post('sync').then(refresh) }, 'Sync now'),
+    el('button', { type: 'button', role: 'menuitem', onclick: () => post('logout').then(refresh) }, 'Sign out'),
+  )
+  const button = el('button', {
+    type: 'button',
+    class: `account-chip ${state}`,
+    title: said,
+    'aria-label': `Account: ${said}`,
+    'aria-haspopup': 'true',
+    onclick: (e) => {
+      e.stopPropagation()
+      menu.hidden = !menu.hidden
+    },
+  },
+    s.avatar_url ? el('img', { src: s.avatar_url, alt: '', referrerpolicy: 'no-referrer' }) : el('span', { class: 'initial' }, (s.email || s.name || '?')[0].toUpperCase()),
+    el('span', { class: 'dot', 'aria-hidden': 'true' }),
+  )
+  c.replaceChildren(button, menu)
+  document.addEventListener('click', () => (menu.hidden = true), { once: true })
+}
+
+async function refresh() {
+  try {
+    const s = await get()
+    last = s
+    gate(s)
+    chip(s)
+  } catch {
+    // The server itself is not answering: the board has its own way of saying that.
+  }
+}
+
+refresh()
+// Often enough to notice an approval or a sync finishing, rarely enough to cost nothing; and not
+// at all while the tab is hidden, like everything else on this page.
+setInterval(() => {
+  if (!document.hidden) refresh()
+}, last?.linked && last?.approved ? 15000 : 5000)

package/web/awake.js

@@ -0,0 +1,62 @@
+// How many rounds in a row have to say "nothing moved" before the page stops asking so often.
+// Five is about ten seconds of a still board, which is long enough that nobody is watching it
+// happen and short enough that the slow pace is rarely the one you arrive back to.
+const QUIET = 5
+
+/**
+ * A job that repeats only while somebody can see the page, and only as often as it is worth.
+ *
+ * Every page here polls: the board asks for the whole board, the file viewer asks git what
+ * changed. None of them ever asked whether anyone was looking, so a tab left open in another
+ * window went on asking for days. That is worse than it sounds, because asking is itself the
+ * signal: `/api/board` is what tells the server somebody is watching, and the server uses that to
+ * decide whether to sample the machine, walk the process table and ask git about every repository.
+ * One forgotten tab kept all of it running, for nothing.
+ *
+ * And a job may now say that nothing moved, by answering `false`. After a few such rounds the
+ * page drops to `resting`, and the first round that moves anything — or your coming back to the
+ * tab — puts it straight back. A job that says nothing at all is taken to have moved something,
+ * which is the safe way round: a page that does not know cannot be the one that goes quiet.
+ *
+ * Coming back runs the job at once — the first look at a tab you left yesterday must not show
+ * yesterday. The first start is left alone: pages that want a reading before the first interval
+ * already take it themselves.
+ *
+ * Gives back the way to stop it for good, which nothing needs yet and costs one line to offer.
+ */
+export function whileVisible(job, every, resting = every) {
+  let timer = null
+  let quiet = 0
+
+  const stop = () => {
+    if (timer) clearTimeout(timer)
+    timer = null
+  }
+
+  const arm = (ms) => {
+    stop()
+    timer = setTimeout(round, ms)
+  }
+
+  async function round() {
+    let moved = true
+    try {
+      moved = await job()
+    } catch {
+      /* the job fell over: it has told us nothing, so keep the working pace and try again */
+    }
+    quiet = moved === false ? quiet + 1 : 0
+    arm(quiet >= QUIET ? resting : every)
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) return stop()
+    quiet = 0
+    round()
+  })
+
+  // A page opened in a background tab is hidden from the first frame: it should not start either.
+  if (!document.hidden) arm(every)
+
+  return stop
+}

package/web/base.css

@@ -109,6 +109,10 @@ dialog .x {
 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); }
+/* `display: block` beats the browser's `[hidden]`, the same trap the marks on the top bar fall
+   into. A dialog can have a field that only exists sometimes — the epic, which is nothing at all
+   with the backlog switched off — and without this it would stand there whatever the answer was. */
+dialog label[hidden] { display: none; }
 dialog label small { display: block; margin-top: 5px; font-weight: 400; }
 dialog input, dialog textarea {
   display: block;
@@ -132,3 +136,96 @@ dialog .spacer { flex: 1; }
 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; }
+
+/* ── The account ──────────────────────────────────────────────────────────────
+   The chip at the end of the bar, and the screen in front of the board until an account is
+   linked and let in. See web/account.js. */
+.account { position: relative; flex: none; }
+.account-chip {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+}
+.account-chip img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
+.account-chip .initial { font-weight: 600; }
+.account-chip .dot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 11px;
+  height: 11px;
+  border-radius: 999px;
+  border: 2px solid var(--bg);
+  background: var(--calm);
+}
+.account-chip.pending .dot { background: var(--warn); }
+.account-chip.offline .dot { background: var(--muted); }
+.account-menu {
+  position: absolute;
+  z-index: 6;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 240px;
+  padding: 10px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.account-menu[hidden] { display: none; }
+.account-menu button {
+  width: 100%;
+  border: none;
+  background: none;
+  border-radius: 7px;
+  padding: 8px 11px;
+  text-align: left;
+  font-weight: 600;
+}
+.account-menu button:hover { background: #f0ede3; }
+.account-menu p { margin: 0 0 6px; overflow-wrap: anywhere; }
+.account-menu .account-said { color: var(--muted); font-size: 0.85rem; }
+
+body.gated { overflow: hidden; }
+.account-gate {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(6px);
+}
+.gate-card {
+  width: 100%;
+  max-width: 520px;
+  padding: 28px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--paper);
+  box-shadow: 0 10px 40px rgb(0 0 0 / 0.08);
+}
+.gate-card h2 { margin: 0 0 10px; font-family: var(--hand); font-size: 2rem; font-weight: 600; }
+.gate-card p { margin: 0 0 14px; line-height: 1.5; }
+.gate-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
+.gate-note { color: var(--muted); font-size: 0.9rem; }
+.gate-error { color: var(--alert); font-size: 0.9rem; }
+
+.auth-page main { max-width: 520px; margin: 15vh auto; padding: 0 16px; font-family: var(--sans); }
+.gate-card.wide { max-width: 860px; max-height: calc(100vh - 32px); overflow: auto; }
+.move-table h3 { margin: 18px 0 6px; font-size: 1rem; }
+.move-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: fixed; }
+.move-table th:first-child, .move-table th:nth-child(2) { width: 90px; }
+.move-table th, .move-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
+.move-table td:first-child, .move-table td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }