@oddessentials/agent-guild 0.18.0 → 0.20.0

package/README.md

@@ -56,7 +56,9 @@ own. The cloud icon on each card opens the vendor's web app.
 **Real terminals that outlive the page.** Every session is a full interactive
 terminal: type instructions, answer prompts, watch output. Run as many as you
 like. A local session manager owns them, so you can close or reload the page
-and come back to the same screens.
+and come back to the same screens. Drag a session card by its grip, with a
+mouse or a finger, to put the cards in the order you want; this browser
+remembers it, and new sessions join at the end.
 
 **Pick your shell.** The Shell card offers the shells installed on your
 computer and remembers your choice in this browser. On Windows it defaults
@@ -118,7 +120,23 @@ puts a crew of little robots in deep space; **Grove** is a calm moss garden
 of gentle nature spirits; **Gnomeland** is a lantern-lit village of gnome
 builders, engineers with a little magic. The page
 follows your system's light or dark setting until you pick one. See
-[docs/SKINS.md](docs/SKINS.md) to make another.
+[docs/SKINS.md](docs/SKINS.md) to make another. **Alert sounds**, off until
+you turn them on in the same menu, chime when the session manager confirms
+a stop or restart, remains unavailable after a brief recovery check, or a
+new version is discovered after the initial version check. Session activity
+and assistant responses have no sounds:
+the providers do not yet offer consistently reliable completion signals.
+
+Sounds play in one eligible tab per browser and origin after browser playback
+permission (usually a click or keypress). They require Web Locks and writable
+local storage. Opening or reconnecting a page does not replay old alerts,
+even when a different manager has taken over. Closing a browser does not
+stop the manager. After an unexpected disconnect, an already connected page
+checks the local health endpoint twice, two seconds apart, with a one-second
+timeout per request. If both fail, it shows “Manager unavailable” and alerts
+once; it cannot confirm whether the process exited or sessions ended.
+A successful health check, reconnection, or closing the page cancels the alert.
+There is no added polling while connected and no additional monitoring process.
 
 ## Commands
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/src/manager/server.mjs

@@ -25,6 +25,7 @@ const MIME = {
   '.webp': 'image/webp',
   '.woff2': 'font/woff2',
   '.ico': 'image/x-icon',
+  '.wav': 'audio/wav',
   '.json': 'application/json; charset=utf-8',
 };
 
@@ -450,7 +451,7 @@ export function createManagerServer({
 
   function handleEvents(ws) {
     eventClients.add(ws);
-    safeSend(ws, { type: 'hello', version, pid: process.pid, launcher, upgrade: upgradeInfo(), sessions: manager.list() });
+    safeSend(ws, { type: 'hello', version, pid: process.pid, startedAt, launcher, upgrade: upgradeInfo(), sessions: manager.list() });
     ws.on('close', () => eventClients.delete(ws));
     ws.on('message', () => { /* events socket is server -> client only */ });
   }

package/web/alerts.js

@@ -0,0 +1,155 @@
+// Sounds follow manager availability and new releases, never session activity.
+export const SOUNDS = {
+  stopped: 'sounds/manager-stopped.wav',
+  update: 'sounds/update-available.wav',
+};
+
+export const MAX_ALERT_AGE_MS = 10000;
+export const RECOVERY_WAIT_MS = 2000;
+export const HEALTH_TIMEOUT_MS = 1000;
+const PLAYED_KEY = 'agentGuild.playedSounds';
+
+/** Queue eligible pages, allowing another page to try if playback fails.
+ * Record only successful playback, under the same cross-tab lock. A bounded
+ * ledger prevents delayed tabs from replaying the event after lock release.
+ * Without shared coordination, stay silent rather than multiply alerts.
+ */
+export async function playOnce(key, play, { locks = globalThis.navigator?.locks, storage, fresh = () => true, related = [] } = {}) {
+  if (!locks) return false;
+  try {
+    storage ??= globalThis.localStorage;
+    if (!storage) return false;
+    return await locks.request('agentGuild.sound', async () => {
+      if (!fresh()) return false;
+      let played = JSON.parse(storage.getItem(PLAYED_KEY) || '[]');
+      if (!Array.isArray(played)) played = [];
+      if (played.includes(key) || related.some((other) => played.includes(other))) return false;
+      // Check storage is writable before making a sound.
+      storage.setItem(PLAYED_KEY, JSON.stringify(played.slice(-127)));
+      try {
+        if (await play() === false) return false;
+      } catch { return false; }
+      storage.setItem(PLAYED_KEY, JSON.stringify([...played.slice(-127), key]));
+      return true;
+    });
+  } catch { return false; }
+}
+
+/** A live connection rearms an availability alert for a later outage. */
+export async function rearmSound(key, { locks = globalThis.navigator?.locks, storage } = {}) {
+  if (!locks) return;
+  try {
+    storage ??= globalThis.localStorage;
+    if (!storage) return;
+    await locks.request('agentGuild.sound', () => {
+      const played = JSON.parse(storage.getItem(PLAYED_KEY) || '[]');
+      if (Array.isArray(played) && played.includes(key)) {
+        storage.setItem(PLAYED_KEY, JSON.stringify(played.filter((item) => item !== key)));
+      }
+    });
+  } catch { /* Optional sound coordination may be unavailable. */ }
+}
+
+/** Two bounded health checks, only after losing a previously live connection.
+ * Reconnect, shutdown and page departure cancel both requests and timers.
+ * The callback's freshness check also cancels playback waiting on another tab.
+ */
+export function managerLossWatcher({ reachable, unavailable, now = Date.now, setTimer = setTimeout, clearTimer = clearTimeout }) {
+  let live = false;
+  let pending = null;
+  const cancel = () => {
+    pending?.abort();
+    pending = null;
+    live = false;
+  };
+  const check = async (signal) => {
+    const request = new AbortController();
+    const abort = () => request.abort();
+    signal.addEventListener('abort', abort, { once: true });
+    const timer = setTimer(abort, HEALTH_TIMEOUT_MS);
+    try { return await reachable(request.signal); }
+    catch { return false; }
+    finally {
+      clearTimer(timer);
+      signal.removeEventListener('abort', abort);
+    }
+  };
+  const wait = (signal) => new Promise((resolve) => {
+    const done = () => {
+      clearTimer(timer);
+      signal.removeEventListener('abort', done);
+      resolve();
+    };
+    const timer = setTimer(done, RECOVERY_WAIT_MS);
+    signal.addEventListener('abort', done, { once: true });
+  });
+  return {
+    connected() { cancel(); live = true; },
+    cancel,
+    async disconnected() {
+      if (!live) return;
+      live = false;
+      const controller = new AbortController();
+      pending = controller;
+      const at = now();
+      const fresh = () => pending === controller && !controller.signal.aborted && now() - at <= MAX_ALERT_AGE_MS;
+      if (await check(controller.signal) || !fresh()) return;
+      await wait(controller.signal);
+      if (!fresh() || await check(controller.signal) || !fresh()) return;
+      unavailable(at, fresh);
+    },
+  };
+}
+
+/** Reconnecting establishes a baseline; only a live stop event alerts. */
+export function stopWatcher() {
+  let instance = null;
+  let stopped = false;
+  return {
+    connected(next) {
+      if (next !== instance) stopped = false;
+      instance = next;
+    },
+    stopped() {
+      if (!instance || stopped) return null;
+      stopped = true;
+      return instance;
+    },
+  };
+}
+
+// Published releases use semantic versions, including numerically ordered
+// prerelease identifiers. Build metadata does not affect precedence.
+function versionParts(value) {
+  return typeof value === 'string' ? value.match(/^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/) : null;
+}
+function newer(a, b) {
+  const av = versionParts(a), bv = versionParts(b);
+  for (let i = 1; i <= 3; i++) if (+av[i] !== +bv[i]) return +av[i] > +bv[i];
+  if (!av[4] || !bv[4]) return Boolean(bv[4]) && !av[4];
+  const ap = av[4].split('.'), bp = bv[4].split('.');
+  for (let i = 0; i < Math.max(ap.length, bp.length); i++) {
+    if (ap[i] === bp[i]) continue;
+    if (ap[i] === undefined || bp[i] === undefined) return bp[i] === undefined;
+    const an = /^\d+$/.test(ap[i]), bn = /^\d+$/.test(bp[i]);
+    if (an && bn) return +ap[i] > +bp[i];
+    if (an !== bn) return bn;
+    return ap[i] > bp[i];
+  }
+  return false;
+}
+
+/** The first successful version report is a baseline, even after nulls.
+ * Reconnect snapshots also advance it silently. Never alert on a rollback.
+ */
+export function updateWatcher() {
+  let seen = null;
+  return (upgrade, baseline = false) => {
+    const version = upgrade?.latestVersion;
+    if (!versionParts(version)) return false;
+    if (!seen) { seen = version; return false; }
+    if (!newer(version, seen)) return false;
+    seen = version;
+    return !baseline && upgrade.available === true;
+  };
+}

package/web/app.js

@@ -1,6 +1,8 @@
 // Agent Guild web page. A thin client of the session manager's local API:
 // it never owns sessions, so closing the page leaves them running.
 
+import { SOUNDS, MAX_ALERT_AGE_MS, playOnce, rearmSound, managerLossWatcher, stopWatcher, updateWatcher } from './alerts.js';
+
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
 const ACCOUNTS_KEY = 'agentGuild.accounts';
@@ -12,6 +14,8 @@ const NEWS_FILTER_KEY = 'agentGuild.newsFilter';
 const CHANGELOG_SEEN_KEY = 'agentGuild.changelogSeen';
 const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
+const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
+const SOUND_KEY = 'agentGuild.sound';
 const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -35,6 +39,8 @@ const state = {
   activeId: null,
   eventsSocket: null,
   eventsRetry: 0,
+  pageAway: false,
+  managerUnavailable: false,
   /** True while the events socket is open. */
   connected: false,
   /** The manager's own version check, from `hello` and `manager.upgrade`. */
@@ -205,6 +211,80 @@ function changeSkin(input) {
   revealChange(input.closest('label'), () => { document.documentElement.dataset.skin = skin; });
 }
 
+// ---- sound ----------------------------------------------------------------
+
+const audio = {};
+const stopAlert = stopWatcher();
+const updateAlert = updateWatcher();
+const managerLoss = managerLossWatcher({
+  async reachable(signal) {
+    const res = await fetch('/api/v1/health', { cache: 'no-store', signal });
+    const health = await res.json();
+    return res.ok && health.ok === true && health.name === 'agent-guild';
+  },
+  unavailable(at, fresh) {
+    state.managerUnavailable = true;
+    showManagerUnavailable();
+    alertSound('stopped', `unavailable.${state.managerInstance}`, at, fresh, [`stopped.${state.managerInstance}`]);
+  },
+});
+
+function soundOn() {
+  return load(SOUND_KEY) === 'on';
+}
+
+/** Keep the tiny clips ready while the manager can still serve them. */
+function prepareSounds() {
+  if (!soundOn()) return;
+  for (const [name, file] of Object.entries(SOUNDS)) {
+    audio[name] ??= new Audio(file);
+    audio[name].preload = 'auto';
+    if (audio[name].error) audio[name].load();
+  }
+}
+
+/** Plays a sound when sounds are on. Browsers allow it once the user has clicked or typed on the page. */
+function playSound(name) {
+  if (!soundOn()) return Promise.resolve(false);
+  audio[name] ??= new Audio(SOUNDS[name]);
+  audio[name].currentTime = 0;
+  return audio[name].play().then(() => true);
+}
+
+/** Plays an alert in one open page only; `key` names the event. */
+function alertSound(name, key, at = Date.now(), fresh = () => true, related = []) {
+  if (soundOn()) playOnce(key, () => playSound(name), {
+    fresh: () => !state.pageAway && soundOn() && fresh() && Date.now() - at <= MAX_ALERT_AGE_MS,
+    related,
+  });
+}
+
+function changeSound(input) {
+  save(SOUND_KEY, input.checked ? 'on' : null);
+  prepareSounds();
+  playSound('update').catch(() => {});
+}
+
+/** A hello identifies this manager lifetime, independent of connections. */
+function managerConnected(msg) {
+  prepareSounds();
+  state.managerInstance = msg.startedAt && msg.pid ? `${msg.pid}.${msg.startedAt}` : null;
+  stopAlert.connected(state.managerInstance);
+  state.managerUnavailable = false;
+  if (state.managerInstance) managerLoss.connected();
+  else managerLoss.cancel();
+  if (state.managerInstance) rearmSound(`unavailable.${state.managerInstance}`);
+}
+
+/** A confirmed manager stop; a browser socket closing never calls this. */
+function managerGone() {
+  managerLoss.cancel();
+  state.managerUnavailable = false;
+  const instance = stopAlert.stopped();
+  if (instance) alertSound('stopped', `stopped.${instance}`, Date.now(),
+    () => state.managerInstance === instance && !state.connected, [`unavailable.${instance}`]);
+}
+
 /** Places the open menu under its button, right-aligned with it and kept on screen. */
 function placeAppearanceMenu() {
   const menu = $('appearance-menu');
@@ -268,9 +348,10 @@ function renderUpgrade() {
   note.title = title;
 }
 
-function setUpgrade(upgrade) {
+function setUpgrade(upgrade, baseline = false) {
   const before = state.upgrade;
   state.upgrade = upgrade || null;
+  if (updateAlert(state.upgrade, baseline)) alertSound('update', `update.${state.upgrade.latestVersion}`);
   renderUpgrade();
   renderVersion();
   if ($('changelog').open) renderChangelog();
@@ -2585,6 +2666,8 @@ function useFolder(dir) {
 
 const cards = new Map();
 let sessionsShown = false;
+/** Session ids in the order the user arranged the cards, kept in this browser. */
+let sessionOrder = parseOrder(load(SESSION_ORDER_KEY));
 
 const MODEL_SOURCES = { report: 'reported by the tool', screen: 'seen on the tool\'s screen', args: 'from the --model argument' };
 
@@ -2632,6 +2715,7 @@ function buildCard(session) {
     if (id) copyId(id);
   });
   node.querySelector('.model-pill').addEventListener('click', () => openSessionModel(session.id));
+  node.querySelector('.drag-handle').addEventListener('keydown', (e) => moveByKey(e, session.id));
   // Skins name their own keyframes, so the one-shot classes clear on any animation they run.
   node.addEventListener('animationend', (e) => {
     if (e.target.classList.contains('level-up')) e.target.classList.remove('level-up');
@@ -2673,6 +2757,7 @@ function updateCard(node, s) {
   badge.textContent = level;
   badge.title = `Level ${level}`;
   node.querySelector('.name').textContent = s.name;
+  node.querySelector('.drag-handle').setAttribute('aria-label', `Move ${s.name}`);
   const id = toolSessionId(s);
   const resumed = s.resume && s.resume !== id ? ` · resumed ${s.resume}` : s.resume ? ' · resumed' : '';
   node.querySelector('.meta-text').textContent = [s.provider.vendor, s.provider.tool, accountLabel(s), `started ${relativeTime(s.createdAt)}${resumed}`].filter(Boolean).join(' · ');
@@ -2710,9 +2795,12 @@ function updateCard(node, s) {
 
 function renderSessions() {
   const grid = $('sessions');
-  const sessions = [...state.sessions.values()].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+  const sessions = orderSessions(state.sessions.values(), sessionOrder);
   for (const [id, node] of cards) {
-    if (!state.sessions.has(id)) { node.remove(); cards.delete(id); }
+    if (state.sessions.has(id)) continue;
+    if (drag?.id === id) releaseDrag();
+    node.remove();
+    cards.delete(id);
   }
   sessions.forEach((s, index) => {
     let node = cards.get(s.id);
@@ -2722,6 +2810,8 @@ function renderSessions() {
       if (sessionsShown) node.classList.add('enter');
     }
     updateCard(node, s);
+    // With one card there is nothing to reorder.
+    node.querySelector('.drag-handle').hidden = sessions.length < 2;
     // Move a card only when it is out of place: re-inserting a node drops
     // keyboard focus and can swallow a click that is in progress.
     if (grid.children[index] !== node) grid.insertBefore(node, grid.children[index] || null);
@@ -2782,6 +2872,231 @@ async function renameSession(id) {
   try { upsertSession((await api('PATCH', `/sessions/${id}`, { name })).session); } catch (err) { toast(err.message); }
 }
 
+// ---- reordering session cards ---------------------------------------------
+
+/** The saved card order: session ids. Anything unreadable counts as no order. */
+function parseOrder(raw) {
+  try {
+    const ids = JSON.parse(raw);
+    return Array.isArray(ids) ? ids.filter((id) => typeof id === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+/** Sessions in the user's order. Any the order does not name, such as new ones, follow oldest first. */
+function orderSessions(sessions, order) {
+  const rank = new Map(order.map((id, index) => [id, index]));
+  const at = (s) => rank.get(s.id) ?? Infinity;
+  return [...sessions].sort((a, b) => (at(a) - at(b)) || a.createdAt.localeCompare(b.createdAt));
+}
+
+/** The ids with one of them moved to a new index. */
+function moveId(ids, id, index) {
+  const rest = ids.filter((other) => other !== id);
+  rest.splice(Math.max(0, Math.min(index, rest.length)), 0, id);
+  return rest;
+}
+
+const shownIds = () => orderSessions(state.sessions.values(), sessionOrder).map((s) => s.id);
+const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+const REORDER_EASE = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
+/** How close to the top or bottom of the window a carried card scrolls the page. */
+const SCROLL_EDGE = 72;
+
+/** The card being carried, or null. */
+let drag = null;
+
+function saveOrder() {
+  sessionOrder = shownIds();
+  save(SESSION_ORDER_KEY, JSON.stringify(sessionOrder));
+}
+
+function announceOrder(id) {
+  const ids = shownIds();
+  const s = state.sessions.get(id);
+  if (s) $('reorder-status').textContent = `${s.name} moved to position ${ids.indexOf(id) + 1} of ${ids.length}.`;
+}
+
+/** Plays a card's move from where it was drawn to where it now sits. Returns the animation, if any. */
+function slideFrom(node, was) {
+  for (const animation of node.getAnimations()) if (animation.id === 'reorder') animation.cancel();
+  if (reducedMotion.matches) return null;
+  const now = node.getBoundingClientRect();
+  const dx = was.left + was.width / 2 - (now.left + now.width / 2);
+  const dy = was.top + was.height / 2 - (now.top + now.height / 2);
+  if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return null;
+  const slide = node.animate([{ translate: `${dx}px ${dy}px` }, { translate: '0 0' }], { duration: 260, easing: REORDER_EASE });
+  slide.id = 'reorder';
+  return slide;
+}
+
+/** Lays the cards out in a new order, sliding each one from its old place. */
+function arrange(order) {
+  const focused = $('sessions').contains(document.activeElement) ? document.activeElement : null;
+  const was = new Map([...cards.values()].map((node) => [node, node.getBoundingClientRect()]));
+  sessionOrder = order;
+  renderSessions();
+  // Moving a card can take keyboard focus with it, as when another tab reorders the cards.
+  if (focused?.isConnected && document.activeElement !== focused) focused.focus({ preventScroll: true });
+  for (const [node, rect] of was) if (node !== drag?.node) slideFrom(node, rect);
+}
+
+function moveByKey(e, id) {
+  if (drag || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+  const step = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 }[e.key];
+  if (!step && e.key !== 'Home' && e.key !== 'End') return;
+  e.preventDefault();
+  const ids = shownIds();
+  const from = ids.indexOf(id);
+  const to = e.key === 'Home' ? 0 : e.key === 'End' ? ids.length - 1 : from + step;
+  if (from === -1 || to < 0 || to >= ids.length || to === from) return;
+  arrange(moveId(ids, id, to));
+  saveOrder();
+  announceOrder(id);
+}
+
+/** A card's place in the grid, ignoring the transforms that animate it. */
+function layoutBox(node) {
+  return { left: node.offsetLeft, top: node.offsetTop, right: node.offsetLeft + node.offsetWidth, bottom: node.offsetTop + node.offsetHeight };
+}
+
+function startDrag(e, handle) {
+  const node = handle.closest('.session-card');
+  const grid = $('sessions');
+  if (drag || !node || !e.isPrimary || (e.pointerType === 'mouse' && e.button !== 0)) return;
+  e.preventDefault();
+  // Where on the card, as drawn, it was picked up: it may still be sliding into place.
+  const seen = node.getBoundingClientRect();
+  drag = {
+    id: node.dataset.id, node, grid, pointerId: e.pointerId,
+    before: sessionOrder, start: shownIds(),
+    grabX: e.clientX - seen.left, grabY: e.clientY - seen.top,
+    x: e.clientX, y: e.clientY,
+    // The card just stepped over; it is not a target again until the pointer leaves it.
+    passed: null, frame: 0,
+  };
+  // The grid is never moved, so it keeps the pointer while the cards inside it are.
+  try { grid.setPointerCapture(e.pointerId); } catch { /* the pointer is already gone */ }
+  // A card picked up again while it settles would otherwise be held in place by that animation.
+  for (const animation of node.getAnimations()) if (animation.id === 'reorder') animation.cancel();
+  node.classList.remove('settling');
+  // The card lifts around the point it was picked up by, which stays under the pointer.
+  node.style.transformOrigin = `${drag.grabX}px ${drag.grabY}px`;
+  node.classList.add('dragging');
+  follow();
+  grid.getBoundingClientRect(); // the outline appears where the card is, rather than gliding in
+  grid.classList.add('reordering');
+  document.documentElement.classList.add('reordering');
+  if (e.pointerType !== 'mouse' && navigator.userActivation?.hasBeenActive) navigator.vibrate?.(8);
+}
+
+/** Puts the carried card under the pointer and the outline where it will land. */
+function follow() {
+  const { node, grid } = drag;
+  const origin = grid.getBoundingClientRect();
+  const box = layoutBox(node);
+  node.style.translate = `${drag.x - drag.grabX - origin.left - box.left}px ${drag.y - drag.grabY - origin.top - box.top}px`;
+  grid.style.setProperty('--slot-x', `${box.left}px`);
+  grid.style.setProperty('--slot-y', `${box.top}px`);
+  grid.style.setProperty('--slot-w', `${box.right - box.left}px`);
+  grid.style.setProperty('--slot-h', `${box.bottom - box.top}px`);
+}
+
+/** Moves the carried card to the place the pointer is over, if that is another card's. */
+function retarget() {
+  const { node, grid } = drag;
+  const origin = grid.getBoundingClientRect();
+  // The middle of the carried card, not the grip at its corner, picks the place, the same in every direction.
+  const x = drag.x - drag.grabX - origin.left + node.offsetWidth / 2;
+  const y = drag.y - drag.grabY - origin.top + node.offsetHeight / 2;
+  const over = (n) => {
+    const box = layoutBox(n);
+    return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
+  };
+  if (drag.passed && !(drag.passed.isConnected && over(drag.passed))) drag.passed = null;
+  const shown = [...grid.children];
+  let target = shown.find((n) => n !== node && n !== drag.passed && over(n));
+  // Past the last card, beside it or below it, is the last place.
+  const last = shown.at(-1);
+  if (!target && last !== node && last !== drag.passed) {
+    const box = layoutBox(last);
+    if (y >= box.bottom || (y >= box.top && x >= box.right)) target = last;
+  }
+  if (!target) return;
+  const next = moveId(shownIds(), drag.id, shown.indexOf(target));
+  if (sameOrder(next, shownIds())) return;
+  arrange(next);
+  drag.passed = target;
+}
+
+/** Scrolls the page while the pointer is near its top or bottom edge. Returns whether it moved. */
+function autoScroll() {
+  const top = topbar.getBoundingClientRect().bottom;
+  const bottom = window.innerHeight;
+  let pull = 0;
+  if (drag.y < top + SCROLL_EDGE) pull = -(top + SCROLL_EDGE - drag.y) / SCROLL_EDGE;
+  else if (drag.y > bottom - SCROLL_EDGE) pull = (drag.y - bottom + SCROLL_EDGE) / SCROLL_EDGE;
+  const step = Math.round(Math.max(-1, Math.min(1, pull)) * 18);
+  if (!step) return false;
+  const was = window.scrollY;
+  window.scrollBy(0, step);
+  return window.scrollY !== was;
+}
+
+function scheduleDragFrame() {
+  if (drag && !drag.frame) drag.frame = requestAnimationFrame(dragFrame);
+}
+
+function dragFrame() {
+  drag.frame = 0;
+  const scrolled = autoScroll();
+  retarget();
+  if (!drag) return;
+  follow();
+  if (scrolled) drag.frame = requestAnimationFrame(dragFrame);
+}
+
+/** Lets go of the carried card without touching the order, as when its session is removed. */
+function releaseDrag() {
+  if (!drag) return null;
+  const ended = drag;
+  drag = null;
+  cancelAnimationFrame(ended.frame);
+  // The grid keeps the pointer until the button comes up, which ends the capture: a drag cancelled with
+  // Escape or by leaving the window must not end in a click that opens the card under the pointer.
+  ended.node.style.translate = '';
+  ended.node.classList.remove('dragging');
+  ended.grid.classList.remove('reordering');
+  document.documentElement.classList.remove('reordering');
+  return ended;
+}
+
+/** Drops the carried card where it is, or with `keep` false puts every card back. */
+function endDrag(keep) {
+  if (!drag) return;
+  const { node } = drag;
+  const was = node.getBoundingClientRect();
+  const ended = releaseDrag();
+  if (!keep) arrange(ended.before);
+  // Compare only the sessions there before and after: one created or removed meanwhile is no move.
+  const now = shownIds().filter((id) => ended.start.includes(id));
+  const moved = !sameOrder(now, ended.start.filter((id) => now.includes(id)));
+  if (keep && moved) {
+    saveOrder();
+    announceOrder(ended.id);
+  }
+  node.classList.add('settling');
+  const settle = slideFrom(node, was);
+  const done = () => {
+    if (node.classList.contains('dragging')) return; // picked up again
+    node.classList.remove('settling');
+    node.style.transformOrigin = '';
+  };
+  if (settle) settle.finished.then(done, done);
+  else done();
+}
+
 // ---- terminal views -------------------------------------------------------
 
 const TERMINAL_THEME = {
@@ -2833,7 +3148,9 @@ class TerminalView {
     this.term.loadAddon(new window.WebLinksAddon.WebLinksAddon((_e, uri) => window.open(uri, '_blank', 'noopener,noreferrer')));
     this.term.attachCustomKeyEventHandler((e) => this.handleKey(e));
     suppressQueryReplies(this.term);
-    this.term.onData((data) => this.send({ type: 'input', data }));
+    this.term.onData((data) => {
+      this.send({ type: 'input', data });
+    });
     this.opened = false;
     this.disposed = false;
     this.retry = 0;
@@ -3089,7 +3406,7 @@ function leaveStopping() {
 function restartGaveUp() {
   if (!state.stopping || !state.restarting) return;
   state.restarting = false;
-  setConnection('down', 'Session manager stopped');
+  setConnection('down', state.stopRemaining === null ? 'Manager unavailable' : 'Session manager stopped');
   showStopped('stopped', 'The session manager did not come back',
     `Nothing answered within ${Math.round(RESTART_WAIT_MS / 1000)} seconds of the restart. Check manager.log in the Agent Guild data folder, then start it yourself.`);
 }
@@ -3151,14 +3468,26 @@ function showManagerStopped() {
 
 // ---- events ---------------------------------------------------------------
 
+function showManagerUnavailable() {
+  setConnection('down', 'Manager unavailable. Trying to reconnect…');
+  if (state.stopping) {
+    clearTimeout(restartTimer);
+    showStopped('stopped', 'Manager unavailable', 'The manager stopped responding before confirming shutdown. Sessions may still be running. This page will reconnect automatically.');
+  }
+}
+
 function connectEvents() {
+  if (state.pageAway) return;
   const ws = new WebSocket(wsUrl('/events'));
   state.eventsSocket = ws;
   ws.onopen = () => {
+    if (state.pageAway || state.eventsSocket !== ws) return;
+    managerLoss.cancel();
     state.eventsRetry = 0;
     setConnection('ok', 'Connected to session manager');
   };
   ws.onmessage = (event) => {
+    if (state.pageAway || state.eventsSocket !== ws) return;
     const msg = JSON.parse(event.data);
     if (msg.type === 'hello') {
       // The manager is back after a stop or restart; the page picks up where it was.
@@ -3171,9 +3500,10 @@ function connectEvents() {
       setConnection('ok', 'Connected to session manager');
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
       for (const id of [...state.views.keys()]) if (!state.sessions.has(id)) dropSession(id);
+      managerConnected(msg);
       renderSessions();
       sessionsShown = true;
-      setUpgrade(msg.upgrade);
+      setUpgrade(msg.upgrade, true);
       loadNews();
       // A changelog.updated sent while the socket was down is lost; catch up the open panel.
       if ($('changelog').open) loadChangelog();
@@ -3192,6 +3522,7 @@ function connectEvents() {
       enterStopping(0, msg.restart === true);
       state.stopRemaining = Number(msg.remaining) || 0;
       showManagerStopped();
+      managerGone();
     } else if (msg.type === 'session.created' || msg.type === 'session.updated') {
       upsertSession(msg.session);
     } else if (msg.type === 'session.removed') {
@@ -3204,16 +3535,21 @@ function connectEvents() {
     }
   };
   ws.onclose = () => {
-    if (state.stopping) {
+    if (state.pageAway || state.eventsSocket !== ws) return;
+    if (state.managerUnavailable) {
+      showManagerUnavailable();
+    } else if (state.stopping && state.stopRemaining !== null) {
       showManagerStopped();
     } else {
-      setConnection('down', 'Session manager not reachable. Run "agent-guild open" to start it.');
+      setConnection('down', 'Connection interrupted. Trying to reconnect…');
     }
+    managerLoss.disconnected();
     // Keep trying: after a stop, a relaunched manager brings the page back by itself.
     const delay = Math.min(5000, 500 * 2 ** state.eventsRetry++);
     setTimeout(async () => {
+      if (state.pageAway || state.eventsSocket !== ws) return;
       try { await loadProviders(); } catch (err) { if (err instanceof AuthError) return showAuth(err.message); }
-      connectEvents();
+      if (!state.pageAway && state.eventsSocket === ws) connectEvents();
     }, delay);
   };
 }
@@ -3241,6 +3577,7 @@ let statsInterval;
 let newsTimer;
 
 function showAuth(message = '') {
+  managerLoss.cancel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3376,6 +3713,16 @@ $('news').addEventListener('close', () => {
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
 });
+addEventListener('pagehide', () => {
+  state.pageAway = true;
+  managerLoss.cancel();
+  state.eventsSocket?.close();
+});
+addEventListener('pageshow', (event) => {
+  if (!event.persisted) return;
+  state.pageAway = false;
+  connectEvents();
+});
 $('version').addEventListener('click', openChangelog);
 $('changelog-close').addEventListener('click', closeChangelog);
 $('changelog').addEventListener('click', (e) => { if (e.target === $('changelog')) closeChangelog(); });
@@ -3392,7 +3739,41 @@ $('changelog-restart').addEventListener('click', () => {
   closeChangelog();
   stopManager({ restart: true });
 });
-addEventListener('storage', (e) => { if (e.key === CHANGELOG_SEEN_KEY) renderVersion(); });
+addEventListener('storage', (e) => {
+  if (e.key === CHANGELOG_SEEN_KEY) renderVersion();
+  else if (e.key === SOUND_KEY) { $('sound').checked = soundOn(); prepareSounds(); }
+  // Another tab reordered the cards.
+  else if (e.key === SESSION_ORDER_KEY && !drag) arrange(parseOrder(e.newValue));
+});
+$('sessions').addEventListener('pointerdown', (e) => {
+  const handle = e.target.closest?.('.drag-handle');
+  if (handle) startDrag(e, handle);
+});
+$('sessions').addEventListener('pointermove', (e) => {
+  if (drag?.pointerId !== e.pointerId) return;
+  // A mouse released outside the window sends no pointerup.
+  if (e.pointerType === 'mouse' && !(e.buttons & 1)) return endDrag(true);
+  drag.x = e.clientX;
+  drag.y = e.clientY;
+  scheduleDragFrame();
+});
+$('sessions').addEventListener('pointerup', (e) => { if (drag?.pointerId === e.pointerId) endDrag(true); });
+$('sessions').addEventListener('pointercancel', (e) => { if (drag?.pointerId === e.pointerId) endDrag(false); });
+// The loss from the last drop can arrive after a quick new pickup, which holds the capture again.
+$('sessions').addEventListener('lostpointercapture', (e) => {
+  if (drag?.pointerId === e.pointerId && !drag.grid.hasPointerCapture(e.pointerId)) endDrag(true);
+});
+// A long press on the grip would open the context menu on a touch screen.
+$('sessions').addEventListener('contextmenu', (e) => { if (e.target.closest?.('.drag-handle')) e.preventDefault(); });
+// The page can move under a carried card without the pointer moving.
+addEventListener('scroll', scheduleDragFrame, { passive: true });
+addEventListener('resize', scheduleDragFrame);
+document.addEventListener('keydown', (e) => {
+  if (!drag || e.key !== 'Escape') return;
+  e.preventDefault();
+  endDrag(false);
+});
+addEventListener('blur', () => endDrag(false));
 $('models-more').addEventListener('click', () => {
   const before = $('models-list').childElementCount;
   modelsView.all = true;
@@ -3406,6 +3787,7 @@ $('upgrade').addEventListener('click', upgradeManager);
 $('appearance-menu').addEventListener('change', (e) => {
   if (e.target.name === 'skin') changeSkin(e.target);
   else if (e.target.name === 'theme') changeTheme(e.target);
+  else if (e.target.name === 'sound') changeSound(e.target);
 });
 $('appearance-menu').addEventListener('toggle', (e) => {
   if (e.newState !== 'open') return;
@@ -3439,6 +3821,7 @@ $('providers').addEventListener('pointerout', (e) => {
 });
 applyTheme(currentTheme());
 renderSkinChoices();
+$('sound').checked = soundOn();
 // Follow the system setting until the user picks a theme.
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
   if (!load(THEME_KEY)) applyTheme(e.matches ? 'dark' : 'light');

package/web/index.html

@@ -36,6 +36,10 @@
           <label class="choice"><input type="radio" name="theme" value="light"><span class="mode-light">Light</span></label>
           <label class="choice"><input type="radio" name="theme" value="dark"><span class="mode-dark">Dark</span></label>
         </fieldset>
+        <fieldset>
+          <legend>Sound</legend>
+          <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
+        </fieldset>
       </div>
       <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
       <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
@@ -62,6 +66,8 @@
         <h2 id="sessions-heading">Sessions <span id="session-count" class="count"></span></h2>
       </div>
       <div id="sessions" class="session-grid" role="list"></div>
+      <p id="reorder-status" class="visually-hidden" aria-live="polite"></p>
+      <p id="reorder-help" hidden>Drag to move the card, or press the arrow keys, Home or End.</p>
       <p id="empty" class="empty">No sessions yet. Pick a provider above to start one. Sessions keep running when you close this page.</p>
     </section>
 
@@ -346,7 +352,10 @@
       <div class="card-top">
         <span class="provider-icon"></span>
         <div class="card-title">
-          <div class="name"></div>
+          <div class="name-row">
+            <div class="name"></div>
+            <button class="drag-handle" type="button" title="Drag to move this card, or use the arrow keys" aria-describedby="reorder-help"></button>
+          </div>
           <div class="meta"><span class="meta-text"></span><button class="session-id" type="button" hidden></button></div>
         </div>
         <button class="model-pill" type="button"></button>

package/web/skins/grove/skin.css

@@ -147,6 +147,8 @@
   .session-card .card-top > .provider-icon { display: none; }
   .session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
   .session-card .card-title { flex-basis: 100%; }
+  /* The reorder grip steps out from under the corner sprig. */
+  .session-card .drag-handle { margin-right: 24px; }
 
   /* Working: ripples spread across still water beneath the spirit while fireflies rise around it. */
   .card-aura { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease); }

package/web/sounds/License.txt

@@ -0,0 +1,22 @@
+	
+
+	Interface Sounds (1.0)
+
+	Created/distributed by Kenney (www.kenney.nl)
+	Creation date: 11-02-2020
+
+			------------------------------
+
+	License: (Creative Commons Zero, CC0)
+	http://creativecommons.org/publicdomain/zero/1.0/
+
+	This content is free to use in personal, educational and commercial projects.
+	Support us by crediting Kenney or www.kenney.nl (this is not mandatory)
+
+			------------------------------
+
+	Donate:   http://support.kenney.nl
+	Patreon:  http://patreon.com/kenney/
+
+	Follow on Twitter for updates:
+	http://twitter.com/KenneyNL

package/web/styles.css

@@ -22,11 +22,13 @@
   --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
   --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
-  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
+  --icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.3 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");
+  --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
   --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.5 9.6 4.5 4.5 0 0 0 7 18.5z'/%3E%3C/svg%3E");
   --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
   --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
   --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 10.8v6.2' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='7.3' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
+  --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='5.5' r='1.9'/%3E%3Ccircle cx='15' cy='5.5' r='1.9'/%3E%3Ccircle cx='9' cy='12' r='1.9'/%3E%3Ccircle cx='15' cy='12' r='1.9'/%3E%3Ccircle cx='9' cy='18.5' r='1.9'/%3E%3Ccircle cx='15' cy='18.5' r='1.9'/%3E%3C/svg%3E");
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 15px;
   color-scheme: light;
@@ -263,6 +265,40 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 }
 .status-pill.exited { color: var(--danger); }
 
+/* Reordering. The grip ends the name line without making it taller; its hit area grows for a finger. */
+.name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.name-row .name { flex: 1; min-width: 0; }
+.drag-handle {
+  position: relative; flex: none; align-self: stretch; display: grid; place-items: center; width: 24px; margin-right: -4px; padding: 0;
+  border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; cursor: grab; opacity: 0.85;
+  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
+}
+.drag-handle::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: var(--icon-grip) center / contain no-repeat; }
+/* Grown up and sideways, never down over the id chip on the line below. */
+.drag-handle::after { content: ""; position: absolute; inset: -20px -10px 0; }
+.session-card:hover .drag-handle, .session-card:focus-within .drag-handle { opacity: 1; }
+.drag-handle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
+.drag-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; opacity: 1; }
+/* While a card is carried, the grid's own outline marks the place it will land. */
+.session-grid { position: relative; }
+.session-grid::before {
+  content: ""; position: absolute; left: 0; top: 0; width: var(--slot-w, 0); height: var(--slot-h, 0); translate: var(--slot-x, 0) var(--slot-y, 0);
+  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--radius);
+  background: color-mix(in srgb, var(--accent) 9%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
+}
+.session-grid.reordering::before { opacity: 1; transition: opacity 0.2s var(--ease), translate 0.24s var(--ease); }
+.session-grid > .session-card.dragging, .session-grid > .session-card.settling { z-index: 4; transform: none; }
+.session-grid > .session-card.dragging {
+  scale: 1.03; cursor: grabbing;
+  box-shadow: 0 24px 48px -14px rgb(0 0 0 / 0.5), 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
+  transition: scale 0.18s var(--ease), box-shadow 0.18s var(--ease);
+}
+.session-grid > .session-card.settling { transition: scale 0.24s var(--ease), box-shadow 0.24s var(--ease); }
+.session-grid > .session-card.dragging .drag-handle { opacity: 1; color: var(--text); cursor: grabbing; }
+:root.reordering, :root.reordering * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
 .agents-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
 .agents-label { font-size: 0.75rem; color: var(--muted); }
 .agents { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -306,6 +342,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
   background: currentColor; mask: var(--icon-sun) center / contain no-repeat;
 }
 :root[data-theme="dark"] .appearance::before, .appearance-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
+.appearance-menu .choice > .sound-alerts::before { mask-image: var(--icon-sound); }
 .appearance::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
 .appearance:has(+ :popover-open)::after { transform: rotate(-90deg); }
 .appearance-menu {
@@ -637,6 +674,8 @@ a.news-link:visited { color: var(--muted); }
   .model-name::before, .provider .copies summary::before, .appearance::after, .btn, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
   .github-waiting::before, body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after { animation: none; }
   .btn:active:not(:disabled) { transform: none; }
+  .drag-handle, .session-grid::before, .session-grid.reordering::before,
+  .session-grid > .session-card.dragging, .session-grid > .session-card.settling { transition: none; }
 }
 
 @media (max-width: 640px) {