@oddessentials/agent-guild 0.17.0 → 0.19.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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.17.0",
+  "version": "0.19.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/web/app.js

@@ -12,6 +12,7 @@ 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 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)');
@@ -2585,6 +2586,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 +2635,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 +2677,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 +2715,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 +2730,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 +2792,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 = {
@@ -3392,7 +3627,40 @@ $('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();
+  // 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;

package/web/index.html

@@ -62,6 +62,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 +348,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/styles.css

@@ -27,6 +27,7 @@
   --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 +264,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; }
@@ -637,6 +672,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) {