heyquilt 0.3.90 → 0.3.107

package/src/ui/fileview.js

@@ -19,9 +19,11 @@ const MAX_LINES = 20000
  * @param {object} [o.people] { who, colorOf } for the Changes tab
  * @param {object|null} [o.summary] the file's totals in this session (changes.js fileChanges)
  */
-export function renderFileView (el, { path, file, meta, me, prevText, bannerOnly = false, tab = 'file', history = null, people, summary = null }) {
+export function renderFileView (el, { path, file, meta, me, prevText, bannerOnly = false, tab = 'file', history = null, people, summary = null, chatHref = null }) {
   const scroller = el.querySelector('.fv-scroll')
   const keep = scroller && scroller.dataset.path === path ? scroller.scrollTop : 0
+  // The tree tells which files came from chat: one opened before it loaded is drawn again once it has.
+  if (meta && meta.chat) return bannerOnly && scroller && scroller.dataset.tab === 'chat' && scroller.dataset.path === path ? undefined : renderChatFile(el, { path, file, chat: meta.chat, me, href: chatHref, keep: scroller && scroller.dataset.path === path ? keep : 0 })
 
   const edited = meta && meta.edited
   const claim = meta && meta.claim
@@ -69,6 +71,31 @@ export function renderFileView (el, { path, file, meta, me, prevText, bannerOnly
   }
 }
 
+const IMAGE = /\.(png|jpe?g|gif|webp)$/i
+
+/**
+ * A file sent in chat, from the chat files folder: who sent it, a download, and the file itself
+ * (text, or a picture). No claim and no changes: it is this person's copy, never synced.
+ */
+function renderChatFile (el, { path, file, chat, me, href, keep }) {
+  const who = (n) => n === me ? 'you' : esc(n)
+  const banner = `<div class="fv-banner"><span class="fv-path mono">${esc(path)}</span><span class="fv-edited">Sent in chat by ${who(chat.by)}${chat.to ? ` to ${who(chat.to)}` : ''} ${agoLong(chat.ts)}</span>
+    <span class="hint">Only people in the session get it. Never synced or committed.</span><span class="spacer"></span>${href ? `<a class="btn sm" href="${href}" download>${I.down}<span>Download</span></a>` : ''}</div>`
+  let body
+  if (!file) body = `<div class="fv-note">${loadingNote()}</div>`
+  else if (file.missing) body = '<div class="fv-note">This file is no longer in your Chat files folder.</div>'
+  else if (file.binary && IMAGE.test(path) && href) body = `<div class="fv-image"><img src="${href}&amp;inline=1" alt="${esc(path.split('/').pop())}"></div>`
+  else if (file.binary) body = `<div class="fv-note">${I.file} ${bytes(file.size)}. It is in the Chat files folder in this session's folder.</div>`
+  else {
+    const lines = file.text.split('\n')
+    if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
+    body = `<table class="fv-code"><tbody>${lines.slice(0, MAX_LINES).map((l, i) => `<tr><td class="ln">${i + 1}</td><td class="lt">${esc(l) || ' '}</td></tr>`).join('')}</tbody></table>
+      ${lines.length > MAX_LINES ? `<div class="fv-note">Showing the first ${MAX_LINES.toLocaleString()} lines.</div>` : ''}`
+  }
+  el.innerHTML = `<div class="fv">${banner}<div class="fv-scroll" data-path="${esc(path)}" data-tab="chat">${body}</div></div>`
+  el.querySelector('.fv-scroll').scrollTop = keep
+}
+
 const tabsMarkup = (tab, history, summary) => `<div class="fv-tabs segmented" role="tablist" aria-label="File or its changes">
     <button type="button" role="tab" data-fvtab="file" class="${tab === 'file' ? 'on' : ''}" aria-selected="${tab === 'file'}">File</button>
     <button type="button" role="tab" data-fvtab="changes" class="${tab === 'changes' ? 'on' : ''}" aria-selected="${tab === 'changes'}" title="Every change to this file, with who made it and what changed">Changes${history ? ` <span class="n">${changeCount(history, summary)}</span>` : ''}</button>

package/src/ui/home.js

@@ -10,6 +10,7 @@ import { workspacesHtml, bindWorkspaces, workspacePageHtml, bindWorkspacePage, l
 import { allFilesHtml, bindAllFiles } from './files.js'
 import { invitesHtml, bindInvites } from './invites.js'
 import { agentCardHtml, bindPlacement, placeableWorkspaces, agentMiniHtml, openAgentMenu } from './agent-place.js'
+import { bindSandboxKeys } from './sandbox-keys.js'
 import { SOUND_EVENTS, playSound } from './sounds.js'
 import { gitControl, gitSegHtml } from './git-rule.js'
 import { cloudAiCardHtml, bindCloudAi } from './cloud-ai.js'
@@ -729,44 +730,34 @@ function agentsPageHtml () {
       <label class="search-box"><span class="sr-only">Search agents</span><input class="input" id="agents-search" type="search" placeholder="Search agents…" autocomplete="off"></label>
       <button class="btn primary" type="button" id="agents-make" aria-haspopup="menu" aria-expanded="false">${I.bot}<span>Invite an agent</span></button>
     </header>
-    <p class="hint ag-lead">AIs that work with you as their own members. Global agents are in all your workspaces; workspace and session agents in one. Open a card to choose where it works.</p>
+    <p class="hint ag-lead">AIs that work with you as their own members. Global agents are in all your workspaces; workspace and session agents in one. Open a card for where it works and its keys.</p>
     <div id="agents-invite"><p class="error" id="agents-error"></p></div>
     <div id="agents-list"><p class="hint">${loadingNote()}</p></div>
     <div class="ag-pages" id="agents-pages" hidden></div>
+    <div class="ag-details" id="agent-details" hidden></div>
     <p class="hint ag-foot"><a href="https://heyquilt.com/docs/agents#kinds" target="_blank" rel="noopener">How agent kinds work</a> · Revoke agents on <a href="https://heyquilt.com/dashboard/agents" target="_blank" rel="noopener">heyquilt.com</a></p>
   </div>`
 }
 
 /**
- * Where an agent works, in a dialog: the card with Works in (all workspaces, chosen ones, or
- * only where added) and Invited to new sessions; each change saves. `onChange` is told after a save.
+ * An agent's details, in place under the cards (no dialog): with workspaces on, where it works
+ * (Works in and Invited to new sessions; each change saves), then its sandbox keys (sandbox-keys.js).
  */
-async function openPlacementDialog (a, { onChange = () => {} } = {}) {
+async function showAgentDetails (root, a) {
+  const box = $('#agent-details', root)
+  box.hidden = false
+  box.dataset.agent = a.id
+  box.innerHTML = `${state.workspacesOn ? '<div data-ag-place-slot></div>' : ''}<div data-sk-slot></div>`
+  bindSandboxKeys($('[data-sk-slot]', box), a)
+  box.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })
+  if (!state.workspacesOn) return
+  const slot = $('[data-ag-place-slot]', box)
   let place
-  try { place = (await api('GET', `/api/agents/${encodeURIComponent(a.id)}/placement`)).placement } catch (err) { toast(err.message); return }
-  if (!place) { toast('This agent has no placement yet.'); return }
-  $('#agent-place-back')?.remove()
-  const back = document.createElement('div')
-  back.id = 'agent-place-back'
-  back.className = 'modal-back settings-back'
-  back.innerHTML = `
-  <div class="settings-modal agent-modal" role="dialog" aria-modal="true" aria-labelledby="agent-place-title">
-    <header class="settings-head">
-      <h2 id="agent-place-title">${I.bot}<span>${esc(a.name)}</span></h2>
-      <p>Where it works, and whether it is invited to new sessions. Changes save at once.</p>
-      <button class="btn icon ghost settings-close" type="button" data-settings-close aria-label="Close">${I.x}</button>
-    </header>
-    <div class="settings-body">${agentCardHtml(a, place, placeableWorkspaces(state.workspaces), { when: a.lastUsedAt ? `last used ${ago(a.lastUsedAt)}` : `added ${ago(a.createdAt)}` })}</div>
-  </div>`
-  document.body.appendChild(back)
-  bindPlacement(back.querySelector('[data-agent-place]'), a, place, placeableWorkspaces(state.workspaces))
-  back.addEventListener('change', onChange)
-  back.addEventListener('click', (e) => { if (e.target.closest('[data-placement-reach], [data-placement-sessions], [data-placement-ws]')) onChange() })
-  const close = () => back.remove()
-  back.addEventListener('mousedown', (e) => { if (e.target === back) close() })
-  back.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
-  back.querySelector('[data-settings-close]').onclick = close
-  back.querySelector('[data-settings-close]').focus()
+  try { place = (await api('GET', `/api/agents/${encodeURIComponent(a.id)}/placement`)).placement } catch (err) { slot.innerHTML = `<p class="hint warn">${esc(err.message)}</p>`; return }
+  if (box.dataset.agent !== a.id) return
+  if (!place) { slot.innerHTML = '<p class="hint">This agent has no placement yet.</p>'; return }
+  slot.innerHTML = agentCardHtml(a, place, placeableWorkspaces(state.workspaces), { when: a.lastUsedAt ? `last used ${ago(a.lastUsedAt)}` : `added ${ago(a.createdAt)}` })
+  bindPlacement(slot.querySelector('[data-agent-place]'), a, place, placeableWorkspaces(state.workspaces))
 }
 
 // Settings come in tabs: You (profile, appearance, sounds), Sessions (defaults for starting and
@@ -905,7 +896,8 @@ function settingsHtml ({ head = true } = {}) {
       <div id="agents-invite"><p class="error" id="agents-error"></p></div>
       <div id="agents-list"><p class="hint">${loadingNote()}</p></div>
       <div class="ag-pages" id="agents-pages" hidden></div>
-      <div class="sec-actions"><span class="hint">${state.workspacesOn ? 'Open a card to choose where the agent works and whether it joins new sessions.' : 'An invite is pasted into the AI once; from then on it joins any session you send it.'} Revoke agents on <a href="https://heyquilt.com/dashboard/agents" target="_blank" rel="noopener">heyquilt.com</a>.</span>${state.workspacesOn ? `<button class="btn sm" type="button" data-view="agents">Open Agents</button>` : ''}</div>
+      <div class="ag-details" id="agent-details" hidden></div>
+      <div class="sec-actions"><span class="hint">${state.workspacesOn ? 'Open a card for where the agent works, whether it joins new sessions, and its keys.' : 'An invite is pasted into the AI once; from then on it joins any session you send it. Open a card for its keys.'} Revoke agents on <a href="https://heyquilt.com/dashboard/agents" target="_blank" rel="noopener">heyquilt.com</a>.</span>${state.workspacesOn ? `<button class="btn sm" type="button" data-view="agents">Open Agents</button>` : ''}</div>
     </div>
   </section>` : ''}
 
@@ -1017,6 +1009,12 @@ function bindAgentsGrid (root, list) {
   const search = $('#agents-search', root)
   let all = []
   let page = 0
+  let open = '' // the agent whose details show under the cards
+  const details = (a) => {
+    open = a.id
+    for (const c of list.querySelectorAll('[data-agent]')) c.setAttribute('aria-pressed', String(c.dataset.agent === a.id))
+    showAgentDetails(root, a)
+  }
   const matching = () => {
     const q = (search.value || '').trim().toLowerCase()
     return q ? all.filter((a) => [a.name, a.type, a.provider].some((x) => String(x || '').toLowerCase().includes(q))) : all
@@ -1028,7 +1026,7 @@ function bindAgentsGrid (root, list) {
     const from = page * AGENTS_PAGE
     const shown = hits.slice(from, from + AGENTS_PAGE)
     list.innerHTML = shown.length
-      ? `<div class="ag-grid">${shown.map((a) => agentMiniHtml(a, { opens: state.workspacesOn })).join('')}</div>`
+      ? `<div class="ag-grid">${shown.map((a) => agentMiniHtml(a, { opens: true })).join('').replace(`data-agent="${esc(open)}"`, `data-agent="${esc(open)}" aria-pressed="true"`)}</div>`
       : `<p class="hint">${all.length ? 'No agent matches that.' : 'No agents yet. Invite one above.'}</p>`
     pages.hidden = hits.length <= AGENTS_PAGE
     pages.innerHTML = `<span>${from + 1}–${from + shown.length} of ${hits.length}</span>
@@ -1048,23 +1046,24 @@ function bindAgentsGrid (root, list) {
     if (!card || e.target !== card || (e.key !== 'Enter' && e.key !== ' ')) return
     e.preventDefault()
     const a = all.find((x) => x.id === card.dataset.agent)
-    if (a) openPlacementDialog(a)
+    if (a) details(a)
   })
   list.addEventListener('click', (e) => {
     const b = e.target.closest('[data-agent-menu]')
     const card = e.target.closest('[data-agent]')
     const a = all.find((x) => x.id === (b ? b.dataset.agentMenu : card && card.dataset.agent))
     if (!a) return
-    if (!b) { if (state.workspacesOn) openPlacementDialog(a); return }
+    if (!b) { details(a); return }
     const items = [
       ...(state.workspacesOn ? [{ act: 'place', label: 'Where it works', icon: I.grid }] : []),
+      { act: 'keys', label: 'Keys', icon: I.lock },
       { act: 'revoke', label: 'Revoke on heyquilt.com', icon: I.external, danger: true }
     ]
     openAgentMenu(b, {
       label: `Actions for ${a.name}`,
       items,
       on: (act) => {
-        if (act === 'place') openPlacementDialog(a)
+        if (act === 'place' || act === 'keys') details(a)
         if (act === 'revoke') window.open('https://heyquilt.com/dashboard/agents', '_blank', 'noopener')
       }
     })

package/src/ui/loom.css

@@ -150,7 +150,22 @@
 .lh-conv-ren:focus-visible { opacity: 1; }
 .lh-conv-ren:hover { color: var(--text); background: var(--panel-2); }
 .lh-conv.editing { flex: 0 1 auto; min-width: 0; gap: 5px; padding-left: 6px; border-color: var(--c); }
-.lh-conv-edit { width: 170px; min-width: 60px; height: 22px; padding: 0 6px 0 0; border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--text); outline: none; }
+.lh-conv-edit { flex: 1 1 auto; width: 170px; max-width: 100%; min-width: 60px; height: 22px; padding: 0 6px 0 0; border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--text); outline: none; }
+/* Following one: it leads and its name has the room; the rest condense to bare marks after it, and fold
+   into "+N" when even that leaves the name too little (.packed, set by packConvs in loom.js). */
+.lh-convs.following { overflow: visible; gap: 6px; }
+.lh-convs.following .lh-conv-name { max-width: none; }
+.lh-others { position: relative; display: inline-flex; align-items: center; flex: none; }
+.lh-pop { display: inline-flex; align-items: center; gap: 1px; }
+.lh-pop .lh-conv { border-color: transparent; background: none; }
+.lh-pop .lh-conv-btn { padding: 3px; border-radius: 4px; }
+.lh-pop .lh-conv-btn:hover, .lh-pop .lh-conv-btn:focus-visible { background: var(--panel-2); }
+.lh-more { display: none; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
+.lh-more:hover, .lh-others.open .lh-more { color: var(--text); border-color: var(--border-strong); }
+.lh-convs.packed .lh-more { display: inline-flex; }
+.lh-convs.packed .lh-pop { display: none; position: absolute; top: 100%; right: 0; z-index: 6; gap: 2px; margin-top: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-pop); }
+.lh-convs.packed .lh-others::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 4px; } /* keeps the hover across the gap */
+.lh-convs.packed .lh-others:is(:hover, :focus-within, .open) .lh-pop { display: inline-flex; }
 
 .lc-prompt { font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .lc-reply { margin-top: 4px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-left: 8px; border-left: 2px solid var(--border); }
@@ -270,7 +285,8 @@
 .loom-empty .t { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
 .loom-empty .hint { color: var(--muted); }
 
-.loom-jump { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6; box-shadow: var(--shadow-pop); }
+/* Centred with margins, not a transform: .btn:active's press would replace it and slide the button off the pointer. */
+.loom-jump { position: absolute; bottom: 16px; left: 0; right: 0; width: max-content; margin: 0 auto; z-index: 6; box-shadow: var(--shadow-pop); }
 .loom-jump svg { width: 14px; height: 14px; }
 
 .loom-tip { position: fixed; z-index: 50; max-width: 340px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-pop); padding: 8px 11px; font-size: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }

package/src/ui/loom.js

@@ -72,6 +72,7 @@ export function renderLoom (el, { build, prefs, me, names, meAgent, onAction })
   lastHtml = html
   el.innerHTML = html
   phaseNeedles(el)
+  packConvs(el)
   const edit = el.querySelector('.lh-conv-edit')
   if (edit) { edit.focus(); edit.select() }
   const s = el.querySelector('.loom-scroll')
@@ -217,24 +218,46 @@ function headHtml (l, color) {
 }
 
 /**
- * A lane's conversations, when there's more than one: each with its piece of the mark and its
- * name. Click one to follow just that conversation in the lane; the pencil renames it (on this
- * computer). A conversation quiet a while keeps its piece, greyed.
+ * A lane's conversations, when there's more than one: one row of chips, each its piece of the mark.
+ * Click one to follow just that conversation: it moves to the front and opens out to its name (and
+ * the pencil, to rename it on this computer), and the others condense to bare marks after it, still a
+ * click away. Where even those leave the name no room, they fold into a "+N" that shows them on hover
+ * or click (packConvs). A conversation quiet a while keeps its piece, greyed; one working now laps.
  */
 function convsHtml (l) {
   if (!l.convs || l.convs.length < 2) return ''
   const live = l.convs.filter((c) => c.live).length
   const label = `${l.isMe ? 'Your' : `${l.name}'s`} conversations: ${l.convs.length}, ${live} live`
-  return `<div class="lh-convs" role="group" aria-label="${esc(label)}">${l.convs.map((c) => {
+  const picked = (at) => !!at && at.lane === l.name && l.convs.some((c) => c.conv === at.conv) ? at.conv : null
+  const sel = picked(renaming) || picked(convFocus)
+  const chip = (c) => {
     const at = `data-lane="${esc(l.name)}" data-conv="${esc(c.conv)}"`
     if (renaming && renaming.lane === l.name && renaming.conv === c.conv) {
-      return `<span class="lh-conv editing">${CONV_MARKS[c.slot]}<input class="lh-conv-edit" ${at} value="${esc(c.name)}" maxlength="60" aria-label="Name this conversation (Enter to keep, Esc to cancel, empty for its own name)"></span>`
+      return `<span class="lh-conv on editing">${CONV_MARKS[c.slot]}<input class="lh-conv-edit" ${at} value="${esc(c.name)}" maxlength="60" aria-label="Name this conversation (Enter to keep, Esc to cancel, empty for its own name)"></span>`
     }
-    const on = !!convFocus && convFocus.lane === l.name && convFocus.conv === c.conv
+    const on = c.conv === sel
     const state = c.active ? 'working now' : c.live ? 'live' : `quiet since ${clock(c.last)}`
     const tip = `${c.name}: ${c.turns} turn${c.turns === 1 ? '' : 's'}, ${state}. ${on ? 'Click to see every conversation' : 'Click to follow just this conversation'}`
-    return `<span class="lh-conv${on ? ' on' : ''}${c.live ? '' : ' quiet'}"><button class="lh-conv-btn" data-loom-follow ${at} aria-pressed="${on}" aria-label="${esc(c.name)}" title="${esc(tip)}">${(c.active ? CONV_MARKS_LIVE : CONV_MARKS)[c.slot]}<span class="lh-conv-name">${esc(c.name)}</span></button><button class="lh-conv-ren" data-loom-rename ${at} title="Rename it (on this computer)" aria-label="${esc(`Rename ${c.name}`)}">${I.pencil}</button></span>`
-  }).join('')}</div>`
+    return `<span class="lh-conv${on ? ' on' : ''}${c.live ? '' : ' quiet'}"><button class="lh-conv-btn" data-loom-follow ${at} aria-pressed="${on}" aria-label="${esc(c.name)}" title="${esc(tip)}">${(c.active ? CONV_MARKS_LIVE : CONV_MARKS)[c.slot]}<span class="lh-conv-name">${esc(c.name)}</span></button>${on ? `<button class="lh-conv-ren" data-loom-rename ${at} title="Rename it (on this computer)" aria-label="${esc(`Rename ${c.name}`)}">${I.pencil}</button>` : ''}</span>`
+  }
+  if (!sel) return `<div class="lh-convs" role="group" aria-label="${esc(label)}">${l.convs.map(chip).join('')}</div>`
+  const others = l.convs.filter((c) => c.conv !== sel)
+  return `<div class="lh-convs following" role="group" aria-label="${esc(label)}">${chip(l.convs.find((c) => c.conv === sel))}<span class="lh-others">
+    <button class="lh-more" data-loom-more aria-expanded="false" title="${esc(`${others.length} other conversation${others.length === 1 ? '' : 's'}: ${others.map((c) => c.name).join(', ')}`)}">+${others.length}</button>
+    <span class="lh-pop">${others.map(chip).join('')}</span></span></div>`
+}
+
+/**
+ * A followed conversation's name gets the row; where the condensed marks beside it still leave it
+ * less than NAME_ROOM, they fold into their "+N" (.packed). Run after each render and resize.
+ */
+const NAME_ROOM = 100
+function packConvs (root) {
+  for (const row of root.querySelectorAll('.lh-convs.following')) {
+    row.classList.remove('packed')
+    const name = row.querySelector('.lh-conv.on .lh-conv-name, .lh-conv.on .lh-conv-edit')
+    if (name && name.clientWidth < NAME_ROOM && name.scrollWidth > name.clientWidth) row.classList.add('packed')
+  }
 }
 
 /** How long a lane has been on its focus (stitching), beside its status; tickClocks counts it up. */
@@ -437,6 +460,7 @@ function watchSize (el) {
       const root = el.querySelector(':scope > .loom')
       if (!root) return
       drawThreads(el)
+      packConvs(root)
       // A new width can fit more lanes or fewer (or fold them into one column): render again, once it settles.
       clearTimeout(settle)
       if (el.clientWidth !== lastWidth) {
@@ -660,6 +684,15 @@ function bind (el) {
       followed = !same
       return act('refresh')
     }
+    for (const o of r.querySelectorAll('.lh-others.open')) {
+      if (!o.contains(t)) { o.classList.remove('open'); o.querySelector('.lh-more').setAttribute('aria-expanded', 'false') }
+    }
+    if ((b = pick('[data-loom-more]'))) {
+      const open = b.getAttribute('aria-expanded') !== 'true'
+      b.setAttribute('aria-expanded', String(open))
+      b.closest('.lh-others').classList.toggle('open', open)
+      return
+    }
     if ((b = pick('[data-loom-rename]'))) { renaming = { lane: b.dataset.lane, conv: b.dataset.conv }; return act('refresh') }
     if (pick('.lh-conv-edit')) return
     if ((b = pick('[data-loom-conv]'))) return act('conv', { name: b.dataset.loomConv, conv: b.dataset.loomConvid })

package/src/ui/rail-model.js

@@ -1,5 +1,5 @@
 // The Files rail (rail.js): the folded Files pane as signals instead of names. Who holds
-// what, since when, why, who waits for it and when it frees up on its own; files to merge.
+// what, since when, why, who waits for it and when it frees up on its own.
 // Pure, so tests can run it without a page.
 import { stitchTime } from './loom-model.js'
 
@@ -11,14 +11,14 @@ const claimFolder = (pattern) => String(pattern).replace(/\/\*\*$/, '').replace(
 
 /**
  * Everything the rail and its lock list show. `claims`: the session's ({ pattern, by, ts, note,
- * active, activeAt, queue }); `merges`: files to merge ({ id, path, state }); `me`: your name;
+ * active, activeAt, queue }); `me`: your name;
  * `owners`: AI session name -> its person (chat.js aiOwners), so a person's AI sessions are one
  * holder, "<person>'s AI"; `aiName`: person -> that name; `files`: the session's paths (to count a
- * folder's); `open`: paths you have open (a merge there is urgent); `focusOf`: name -> what they
+ * folder's); `focusOf`: name -> what they
  * said they're doing (a lock's why when it has no note); `kindOf`: name -> 'agent' for an AI agent.
- * Returns { locks, holders, waiting, mine, merges: { count, urgent } }, locks oldest first.
+ * Returns { locks, holders, waiting, mine }, locks oldest first.
  */
-export function railModel ({ claims = [], merges = [], me = '', owners = new Map(), aiName = (p) => `${p}'s AI`, files = [], open = [], focusOf = () => '', kindOf = () => '', now = Date.now(), idleMs = CLAIM_IDLE_MS } = {}) {
+export function railModel ({ claims = [], me = '', owners = new Map(), aiName = (p) => `${p}'s AI`, files = [], focusOf = () => '', kindOf = () => '', now = Date.now(), idleMs = CLAIM_IDLE_MS } = {}) {
   const fileSet = new Set(files)
   const holderOf = (by) => owners.has(by) ? aiName(owners.get(by)) : by
   const locks = (claims || []).filter((c) => c && c.pattern && c.by).map((c) => {
@@ -52,14 +52,11 @@ export function railModel ({ claims = [], merges = [], me = '', owners = new Map
     h.locks++
     h.waiting += l.queue.length
   }
-  const openSet = new Set(open)
-  const toMerge = (merges || []).filter((m) => m && m.state !== 'done')
   return {
     locks,
     holders,
     waiting: locks.filter((l) => l.mine && l.queue.length), // someone waits for a file you hold: yours to act on
-    mine: locks.filter((l) => l.ours).length,
-    merges: { count: toMerge.length, urgent: toMerge.some((m) => openSet.has(m.path)) }
+    mine: locks.filter((l) => l.ours).length
   }
 }
 

package/src/ui/releases.js

@@ -144,7 +144,7 @@ export function openReleaseNotes () {
       <div class="rn-body">
         ${newer.map((rel) => releaseHtml(rel, 0, { latest: true })).join('')}
         ${rels.map((rel, i) => releaseHtml(rel, i + newer.length, { current: rel.version === r.version })).join('')}
-        <footer class="rn-foot">All releases live on <a href="https://github.com/DanielCarmichaelGit/heyquilt/releases" target="_blank" rel="noopener">GitHub</a>.</footer>
+        <footer class="rn-foot">Every download is on <a href="https://heyquilt.com/#download" target="_blank" rel="noopener">heyquilt.com</a>.</footer>
       </div>
     </div>
   </div>`

package/src/ui/sandbox-keys-model.js

@@ -0,0 +1,53 @@
+// The Keys table on each agent (sandbox keys, QUILT_AGENT_KEY): its words and numbers, shared by
+// the app (sandbox-keys.js) and heyquilt.com (web/components/SandboxKeys.js). Pure, no page.
+const MIN = 60 * 1000
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+/** When a key was last used: "Just now", "2 min ago", "5 h ago", "3 days ago", then "Oct 12". */
+export function usedText (ts, now = Date.now()) {
+  if (!ts) return 'Never'
+  const m = Math.max(0, Math.floor((now - ts) / MIN))
+  if (m < 1) return 'Just now'
+  if (m < 60) return `${m} min ago`
+  if (m < 24 * 60) return `${Math.floor(m / 60)} h ago`
+  const d = Math.floor(m / (24 * 60))
+  if (d < 7) return `${d} ${d === 1 ? 'day' : 'days'} ago`
+  const at = new Date(ts)
+  return `${MONTHS[at.getMonth()]} ${at.getDate()}`
+}
+
+/** Each day's bar as a percentage of the busiest day's. */
+export function sparkHeights (uses) {
+  const top = Math.max(0, ...uses)
+  return uses.map((n) => (top ? Math.round((n / top) * 100) : 0))
+}
+
+const LABELS = { 'in-use': 'In use', idle: 'Idle', revoked: 'Revoked' }
+const CLASSES = { 'in-use': 'live', idle: 'idle', revoked: 'revoked' }
+export const stateLabel = (s) => LABELS[s] || LABELS.idle
+export const stateClass = (s) => CLASSES[s] || CLASSES.idle
+
+/** How a key is shown: never the key, its last four characters. */
+export const keyLabel = (hint) => `qak_…${hint || '????'}`
+
+/** One of four colours for a session's dot, the same for its room everywhere. */
+export const sessionTone = (room) => [...String(room)].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7) % 4
+
+/** Keys whose name or session has the search in it. */
+export function matchKeys (keys, q) {
+  const s = String(q || '').trim().toLowerCase()
+  return s ? keys.filter((k) => [k.name, k.session].some((x) => String(x || '').toLowerCase().includes(s))) : keys
+}
+
+/**
+ * The New key session picker: `local` sessions ({ value, room, name }, on this computer, so their
+ * links are at hand) first, then `known` ones a key already works in ({ room, name }), each room once.
+ */
+export function sessionOptions (local = [], known = []) {
+  const rooms = new Set(local.map((s) => s.room))
+  const named = new Map(known.map((s) => [s.room, s.name]))
+  return [
+    ...local.map((s) => ({ value: s.value, name: named.get(s.room) || s.name })),
+    ...known.filter((s) => !rooms.has(s.room)).map((s) => ({ value: `room:${s.room}`, name: s.name }))
+  ]
+}

package/src/ui/sandbox-keys.js

@@ -0,0 +1,132 @@
+// An agent's Keys table in the app (Settings › Agents, opened from its card; mockup
+// docs/mockups/2026-10-18-sandbox-keys.html, option A): its sandbox keys (QUILT_AGENT_KEY), each
+// with its session, last use, use over seven days and state, Rotate and Revoke (Remove once
+// revoked). New key opens a row at the top; a new key shows once, with Copy. The words and numbers
+// are sandbox-keys-model.js, which heyquilt.com shares.
+import { I, esc, api, toast } from './common.js'
+import { usedText, sparkHeights, stateLabel, stateClass, keyLabel, sessionTone, matchKeys, sessionOptions } from './sandbox-keys-model.js'
+
+const KEY = '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="5" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 8h6M12 8v2.5M14 8v2" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>'
+const ROTATE = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13 8a5 5 0 1 1-1.5-3.5M13 2v3h-3" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>'
+
+function sparkHtml (k) {
+  if (k.state === 'revoked') return ''
+  const total = k.uses.reduce((a, b) => a + b, 0)
+  return `<span class="sk-spark" title="${total} ${total === 1 ? 'request' : 'requests'} in 7 days">${sparkHeights(k.uses).map((h) => `<i${h ? ` style="height:${h}%"` : ' class="z"'}></i>`).join('')}</span>`
+}
+
+function rowHtml (k, now, q) {
+  const hidden = matchKeys([k], q).length ? '' : ' hidden'
+  const revoked = k.state === 'revoked'
+  const acts = revoked
+    ? `<button type="button" class="btn sm ghost" data-sk-remove="${esc(k.id)}">Remove</button>`
+    : `<button type="button" class="btn sm" data-sk-rotate="${esc(k.id)}">${ROTATE}<span>Rotate</span></button><button type="button" class="btn sm danger" data-sk-revoke="${esc(k.id)}"><span>Revoke</span></button>`
+  return `<tr data-sk-row="${esc(k.id)}"${revoked ? ' class="sk-revoked"' : ''}${hidden}>
+    <td><b>${esc(k.name)}</b><div class="sk-hint">${esc(keyLabel(k.hint))}</div></td>
+    <td><span class="sk-chip" title="${esc(k.session)}"><span class="sk-dot t${sessionTone(k.room)}"></span><span class="sk-chip-t">${esc(k.session)}</span></span></td>
+    <td class="sk-n">${esc(usedText(k.lastUsedAt, now))}</td>
+    <td class="sk-n sk-m">${sparkHtml(k)}</td>
+    <td><span class="pill ${stateClass(k.state)}">${stateLabel(k.state)}</span></td>
+    <td class="sk-act"><span>${acts}</span></td>
+  </tr>`
+}
+
+function newRowHtml (sessions) {
+  const where = sessions.length
+    ? `<select class="input sm" name="sk-session" aria-label="Session">${sessions.map((s) => `<option value="${esc(s.value)}">${esc(s.name)}</option>`).join('')}</select>`
+    : '<input class="input sm" name="sk-link" type="url" placeholder="Session invite link" aria-label="Session invite link" autocomplete="off">'
+  return `<tr class="sk-newrow"><td colspan="6"><form class="sk-inline" data-sk-form>
+    <input class="input sm" name="sk-name" maxlength="40" placeholder="Name, e.g. bolt.new · checkout" aria-label="Key name" autocomplete="off" required>
+    ${where}
+    <button type="submit" class="btn primary sm" data-sk-create>Create</button><button type="button" class="btn ghost sm" data-sk-cancel>Cancel</button>
+  </form></td></tr>`
+}
+
+/**
+ * The Keys card for `agent`. `v`: { keys, sessions (picker options), adding, fresh ({ envKey }),
+ * error, query, loading, now }.
+ */
+export function keysCardHtml (agent, v) {
+  const now = v.now || Date.now()
+  const keys = v.keys || []
+  const body = v.loading
+    ? '<tr><td colspan="6" class="hint">Loading…</td></tr>'
+    : keys.length ? keys.map((k) => rowHtml(k, now, v.query)).join('') : '<tr><td colspan="6" class="hint">No keys yet.</td></tr>'
+  return `<div class="sk-card card" data-sk-agent="${esc(agent.id)}">
+    <div class="sk-head"><span class="sk-ico">${KEY}</span><span class="sk-t">Keys</span><span class="sk-who">${esc(agent.name)} (agent)</span><span class="sk-grow"></span>
+      <label class="sk-search"><span class="sr-only">Search keys</span><input class="input sm" data-sk-search type="search" placeholder="Search keys" value="${esc(v.query || '')}" autocomplete="off"></label>
+      <button type="button" class="btn primary sm" data-sk-new${v.adding ? ' disabled' : ''}>New key</button></div>
+    ${v.fresh ? `<div class="sk-once"><span class="pill live">New</span><code class="sk-key" data-sk-value>${esc(v.fresh.envKey)}</code><span class="sk-acts"><button type="button" class="btn sm" data-sk-copy>${I.copy}<span>Copy</span></button><span class="hint">shown once</span></span></div>` : ''}
+    ${v.error ? `<p class="error sk-error">${esc(v.error)}</p>` : ''}
+    <div class="sk-scroll"><table class="sk-tbl">
+      <thead><tr><th>Key</th><th>Session</th><th class="sk-n">Last used</th><th class="sk-n sk-m">Use, 7 days</th><th>Status</th><th><span class="sr-only">Actions</span></th></tr></thead>
+      <tbody>${v.adding ? newRowHtml(v.sessions || []) : ''}${body}</tbody>
+    </table></div>
+  </div>`
+}
+
+/** Draws and runs one agent's Keys card in `el`. */
+export function bindSandboxKeys (el, agent) {
+  const base = `/api/agents/${encodeURIComponent(agent.id)}/sandbox-keys`
+  const v = { keys: [], sessions: [], adding: false, fresh: null, error: '', query: '', loading: true }
+  const draw = () => { el.innerHTML = keysCardHtml(agent, v) }
+  const load = async () => {
+    try {
+      const r = await api('GET', base)
+      Object.assign(v, { keys: r.keys, sessions: sessionOptions(r.local, r.sessions), loading: false })
+    } catch (err) { Object.assign(v, { loading: false, error: err.message }) }
+    draw()
+  }
+  // Rotate and Revoke ask once more on the button itself (no dialog): a second click within 4 s does it.
+  const armed = (b, label) => {
+    if (b.dataset.armed) return true
+    b.dataset.armed = '1'
+    b.classList.add('sk-armed')
+    b.querySelector('span').textContent = label
+    setTimeout(() => { if (b.isConnected) { delete b.dataset.armed; b.classList.remove('sk-armed'); b.querySelector('span').textContent = label.replace(' now', '') } }, 4000)
+    return false
+  }
+  const act = async (fn) => {
+    v.error = ''
+    try { await fn() } catch (err) { v.error = err.message }
+    await load()
+  }
+  el.addEventListener('click', async (e) => {
+    const b = e.target.closest('button')
+    if (!b || b.disabled) return
+    if (b.matches('[data-sk-new]')) { v.adding = true; draw(); el.querySelector('[name="sk-name"]')?.focus(); return }
+    if (b.matches('[data-sk-cancel]')) { v.adding = false; v.error = ''; draw(); return }
+    if (b.matches('[data-sk-copy]')) {
+      try { await navigator.clipboard.writeText(v.fresh.envKey); toast('Copied') } catch { toast('Select the key and press ⌘/Ctrl+C to copy') }
+      return
+    }
+    if (b.dataset.skRotate && armed(b, 'Rotate now')) {
+      b.disabled = true
+      return act(async () => { const r = await api('POST', `${base}/rotate`, { keyId: b.dataset.skRotate }); v.fresh = { envKey: r.envKey } })
+    }
+    if (b.dataset.skRevoke && armed(b, 'Revoke now')) {
+      b.disabled = true
+      return act(() => api('POST', `${base}/revoke`, { keyId: b.dataset.skRevoke }))
+    }
+    if (b.dataset.skRemove) { b.disabled = true; return act(() => api('POST', `${base}/remove`, { keyId: b.dataset.skRemove })) }
+  })
+  el.addEventListener('submit', async (e) => {
+    e.preventDefault()
+    const f = e.target
+    const name = f.elements['sk-name'].value.trim()
+    const pick = f.elements['sk-session']?.value || ''
+    const link = f.elements['sk-link']?.value.trim() || ''
+    f.querySelector('[data-sk-create]').disabled = true
+    await act(async () => {
+      const r = await api('POST', base, { name, ...(pick ? { session: pick } : { link }) })
+      Object.assign(v, { fresh: { envKey: r.envKey }, adding: false })
+    })
+  })
+  el.addEventListener('input', (e) => {
+    if (!e.target.matches('[data-sk-search]')) return
+    v.query = e.target.value
+    for (const tr of el.querySelectorAll('[data-sk-row]')) tr.hidden = !matchKeys(v.keys.filter((k) => k.id === tr.dataset.skRow), v.query).length
+  })
+  draw()
+  load()
+}