heyquilt 0.0.1 → 0.3.106

package/src/ui/secrets-view.js

@@ -0,0 +1,162 @@
+// The Secrets card (mockup docs/mockups/2026-10-18-secrets.html, option B), as HTML from the
+// API's view of one scope and the card's own state. Pure: secrets.js draws it and binds it in
+// the app; tests read it. A value never appears here: the API has none to give, and the value
+// a person types stays in its input (secrets.js sets it back after a redraw, never in markup).
+import { FORMATS, FORMAT_IDS, formatLabel } from './secret-rules.js'
+
+export const LEVEL_WORDS = { org: 'Team', workspace: 'Workspace', session: 'Session' }
+const ORDER = ['org', 'workspace', 'session']
+const LOCK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>'
+const AVATAR_COLORS = ['#24706b', '#8a5a08', '#5b4bb7', '#2f5d8a', '#a8263e', '#2f6b40']
+
+export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+
+/** "2 min ago", "1 h ago", "today", a date; "never" for nothing. */
+export function usedText (ts, now = Date.now()) {
+  if (!ts) return 'never'
+  const s = Math.max(0, Math.round((now - ts) / 1000))
+  if (s < 60) return 'just now'
+  if (s < 3600) return `${Math.round(s / 60)} min ago`
+  if (s < 6 * 3600) return `${Math.round(s / 3600)} h ago`
+  if (new Date(ts).toDateString() === new Date(now).toDateString()) return 'today'
+  return new Date(ts).toLocaleDateString([], { day: 'numeric', month: 'short' })
+}
+
+/** The levels a place has, Team first: [{ type, id, label }]. */
+export function levelTabs (view) {
+  return [...(view?.levels || [])].sort((a, b) => ORDER.indexOf(a.type) - ORDER.indexOf(b.type)).map((l) => ({ type: l.type, id: l.id, label: LEVEL_WORDS[l.type], name: l.name }))
+}
+
+/** What the inherit switch says: "Workspace and team secrets here", "Team secrets here". */
+export function inheritLabel (view) {
+  const above = (view.levels || []).slice(1).map((l) => l.type)
+  const words = above.map((t) => (t === 'org' ? 'team' : 'workspace'))
+  if (!words.length) return ''
+  const list = words.length === 1 ? words[0] : `${words.slice(0, -1).join(', ')} and ${words.at(-1)}`
+  return `${list[0].toUpperCase()}${list.slice(1)} secrets here`
+}
+
+/** "X-Token: Token {value}" as a format, or null. */
+export function parseCustomFormat (text) {
+  const m = /^\s*([A-Za-z0-9-]{1,64})\s*:\s*(.*\{value\}.*)$/.exec(String(text || ''))
+  return m ? { in: 'header', name: m[1].toLowerCase(), template: m[2].trim() } : null
+}
+
+const sw = (on, attrs, label, { disabled = false, small = false } = {}) =>
+  `<button type="button" class="sx-sw${small ? ' sm' : ''}${on ? ' on' : ''}" role="switch" aria-checked="${on}" ${attrs}${disabled ? ' disabled' : ''}><i aria-hidden="true"></i><span>${label}</span></button>`
+
+const formatOptions = (selected) => [...FORMAT_IDS.map((id) => `<option value="${id}"${selected === id ? ' selected' : ''}>${esc(FORMATS[id].label)}</option>`), `<option value="custom"${selected === 'custom' ? ' selected' : ''}>A header of your own…</option>`].join('')
+
+function avatars (view) {
+  const s = view.settings
+  const list = s.agents === 'all' ? view.agentChoices : view.agentChoices.filter((a) => s.agents.includes(a.id))
+  if (!s.agentsOn) return '<span class="sx-faint">off</span>'
+  if (s.agents === 'all') return `<span class="sx-faint">All agents${list.length ? ` (${list.length})` : ''}</span>`
+  if (!list.length) return '<span class="sx-faint">none chosen</span>'
+  return `<span class="sx-who">${list.slice(0, 5).map((a, i) => `<span class="sx-av" title="${esc(a.name)}" style="background:${AVATAR_COLORS[i % AVATAR_COLORS.length]}">${esc([...a.name][0] || '?')}</span>`).join('')}${list.length > 5 ? `<span class="sx-faint">+${list.length - 5}</span>` : ''}</span>`
+}
+
+function inheritRight (view) {
+  const s = view.settings
+  if (s.inheritOff) return `<span class="sx-faint">off${s.inheritOffAt ? ` since ${new Date(s.inheritOffAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}` : ''}${s.inheritOffBy ? ` by ${esc(s.inheritOffBy)}` : ''}</span>`
+  const parents = (view.levels || []).slice(1)
+  const n = (view.inherited || []).length
+  return `<span class="sx-faint">${esc(parents.map((l) => l.name).filter(Boolean).join(' · '))}${parents.length ? ' · ' : ''}${n} secret${n === 1 ? '' : 's'}</span>`
+}
+
+function chooseHtml (view, ui) {
+  const sel = ui.chooseSel
+  const all = sel === 'all'
+  return `<div class="sx-choose" data-choose-panel>
+    <label class="sx-check"><input type="radio" name="sx-choose" value="all" ${all ? 'checked' : ''} data-choose-all> All agents here, and ones added later</label>
+    <label class="sx-check"><input type="radio" name="sx-choose" value="some" ${all ? '' : 'checked'} data-choose-some> Only these:</label>
+    <div class="sx-choose-list">${view.agentChoices.length ? view.agentChoices.map((a) => `<label class="sx-check"><input type="checkbox" data-choose-agent="${esc(a.id)}" ${!all && sel.includes(a.id) ? 'checked' : ''} ${all ? 'disabled' : ''}> ${esc(a.name)}</label>`).join('') : '<span class="sx-faint">No agents here yet.</span>'}</div>
+    <span class="sx-choose-acts"><button type="button" class="btn sm ghost" data-choose-cancel>Cancel</button><button type="button" class="btn sm primary" data-choose-save>Save</button></span>
+  </div>`
+}
+
+function importHtml (ui) {
+  const im = ui.import
+  if (im.loading) return '<div class="sx-import"><span class="sx-faint">Looking for .env files…</span></div>'
+  if (im.done) {
+    return `<div class="sx-import"><div class="sx-import-done">
+      <span>Saved ${im.done.saved.length} secret${im.done.saved.length === 1 ? '' : 's'} from <code>${esc(im.done.rel)}</code>. Your project reaches them through <code>quilt run</code> now${im.done.deleted ? ', and the file is deleted.' : ': the file is no longer needed.'}</span>
+      <span class="sx-grow"></span>${im.done.deleted ? '' : `<button type="button" class="btn sm danger" data-import-delete>Delete ${esc(im.done.rel)}</button><button type="button" class="btn sm ghost" data-import-close>Keep it</button>`}${im.done.deleted ? '<button type="button" class="btn sm ghost" data-import-close>Done</button>' : ''}
+    </div></div>`
+  }
+  if (!im.files.length) return `<div class="sx-import"><div class="sx-import-done"><span>${esc(im.empty || 'No .env files in this session\'s folder.')}</span><span class="sx-grow"></span><button type="button" class="btn sm ghost" data-import-close>Close</button></div></div>`
+  const f = im.files[im.fileIdx]
+  const picked = im.rows.filter((r) => r.pick && !r.skip).length
+  return `<div class="sx-import">
+    <div class="sx-import-head"><b>Import</b>${im.files.length > 1 ? `<select class="input sx-in" data-import-file aria-label=".env file">${im.files.map((x, i) => `<option value="${i}"${i === im.fileIdx ? ' selected' : ''}>${esc(x.rel)}</option>`).join('')}</select>` : `<code>${esc(f.rel)}</code>`}<span class="sx-faint">Names and where each goes. The values go from this computer straight to Quilt's vault.</span></div>
+    <div class="sx-import-rows">${im.rows.map((r, i) => r.skip
+      ? `<div class="sx-import-row skip"><span class="sx-name">${esc(r.name)}</span><span class="sx-faint">${esc(r.skip)}</span></div>`
+      : `<div class="sx-import-row"><label class="sx-check"><input type="checkbox" data-import-pick="${i}" ${r.pick ? 'checked' : ''}><span class="sx-name">${esc(r.name)}</span></label><input class="input sx-in mono" data-import-host="${i}" value="${esc(r.upstream)}" placeholder="sends to: api.example.com" aria-label="Where ${esc(r.name)} is sent"><select class="input sx-in" data-import-format="${i}" aria-label="How ${esc(r.name)} is sent">${formatOptions(r.format)}</select>${sw(r.who !== 'people', `data-import-who="${i}"`, r.who === 'people' ? 'People only' : 'Agents', { small: true })}</div>`).join('')}</div>
+    <div class="sx-import-foot"><span class="sx-grow"></span><button type="button" class="btn sm ghost" data-import-close>Cancel</button><button type="button" class="btn sm primary" data-import-save ${picked ? '' : 'disabled'}>Save ${picked} secret${picked === 1 ? '' : 's'}</button></div>
+  </div>`
+}
+
+function rowHtml (r, view, ui, inherited) {
+  const manage = view.canManage
+  const usedNow = inherited && r.off ? '—' : usedText(r.usedAt, ui.now)
+  // In a narrow card the digest and when it was used go under the name (their columns hide).
+  const name = `<td class="sx-name">${esc(r.name)}${inherited ? ` <span class="sx-lvl ${r.level}${r.overridden ? ' over' : ''}">${LEVEL_WORDS[r.level]}</span>` : ''}<span class="sx-sub">${esc(r.digest)} · ${inherited && r.off ? 'off here' : usedNow === 'never' ? 'never used' : `used ${esc(usedNow)}`}</span></td>`
+  const who = `<td class="sx-who-td">${sw(r.who !== 'people', inherited ? 'data-who-view' : `data-who="${esc(r.name)}"`, r.who === 'people' ? 'People only' : 'Agents', { small: true, disabled: inherited || !manage })}</td>`
+  const used = `<td class="sx-hide-m"><span class="sx-status${r.usedAt && !(inherited && r.off) ? '' : ' unused'}">${esc(usedNow)}</span></td>`
+  let act = ''
+  if (!inherited && manage) {
+    act = ui.confirmDelete === r.name
+      ? ''
+      : `<button type="button" class="btn sm" data-replace="${esc(r.name)}">Replace</button><button type="button" class="btn sm danger" data-delete="${esc(r.name)}">Delete</button>`
+  } else if (inherited && r.off) act = '<span class="sx-faint">off here</span>'
+  else if (inherited && manage) act = `<button type="button" class="btn sm" data-override="${esc(r.name)}">Override</button>`
+  // Delete asks in place, on a line of its own under the secret.
+  const confirm = !inherited && manage && ui.confirmDelete === r.name
+    ? `<tr class="sx-confirm-row"><td colspan="6"><div class="sx-confirm-in"><span class="sx-confirm">Delete ${esc(r.name)}? Nothing can use it after, and its value is gone for good.</span><span class="sx-confirm-acts"><button type="button" class="btn sm ghost" data-delete-no>Keep</button><button type="button" class="btn sm danger" data-delete-yes="${esc(r.name)}">Delete</button></span></div></td></tr>`
+    : ''
+  return `<tr class="${inherited && r.off ? 'sx-off' : ''}${ui.flash === r.name ? ' sx-flash' : ''}">${name}<td class="sx-hide-m mono sx-faint">${esc(r.digest)}</td><td class="sx-host-td"><span class="sx-host" title="${esc(r.formatLabel || formatLabel(r.format))}">${esc(r.upstream)}</span></td>${who}${used}<td class="sx-act"><span class="sx-acts">${act}</span></td></tr>${confirm}`
+}
+
+/** The whole card for `view` (GET /v1/secrets/:scope/:id) and the card's state `ui`. */
+export function secretsCardHtml (view, ui = {}) {
+  ui = { now: Date.now(), tabs: [], form: {}, ...ui }
+  const tabs = ui.tabs.length ? ui.tabs : levelTabs(view)
+  const cur = view ? view.scope.type : ui.cur?.type
+  const seg = tabs.length > 1 ? `<span class="sx-seg" role="tablist" aria-label="Secrets for">${tabs.map((t) => `<button type="button" role="tab" aria-selected="${t.type === cur}" class="${t.type === cur ? 'on' : ''}" data-level="${t.type}" data-level-id="${esc(t.id)}">${t.label}</button>`).join('')}</span>` : `<span class="sx-lvl ${cur}">${LEVEL_WORDS[cur] || ''}</span>`
+  const head = `<div class="sx-head">${LOCK}<span class="sx-title">Secrets</span>${seg}${view && view.scope.name ? `<span class="sx-faint sx-scope">${esc(view.scope.name)}</span>` : ''}<span class="sx-grow"></span>${view && view.canManage && ui.canImport ? `<button type="button" class="btn sm" data-import ${ui.import ? 'disabled' : ''}>Import .env</button>` : ''}</div>`
+  if (!view) return `<div class="sx">${head}<div class="sx-empty">${ui.error ? `<span class="sx-err">${esc(ui.error)}</span>` : '<span class="sx-faint">Loading…</span>'}</div></div>`
+
+  const manage = view.canManage
+  const inheritable = (view.levels || []).length > 1
+  const s = view.settings
+  const controls = `<div class="sx-controls">
+    ${inheritable ? `<div>${sw(!s.inheritOff, 'data-inherit', `<b>${esc(inheritLabel(view))}</b>`, { disabled: !manage })}<span class="sx-grow"></span>${inheritRight(view)}</div>` : ''}
+    <div>${sw(s.agentsOn, 'data-agents-on', '<b>Agents can use secrets</b>', { disabled: !manage })}<span class="sx-grow"></span>${avatars(view)}${manage && s.agentsOn ? `<button type="button" class="btn sm ghost" data-choose ${ui.choose ? 'aria-expanded="true"' : ''}>Choose</button>` : ''}</div>
+  </div>`
+  const off = s.inheritOff && view.offCount ? `<div class="sx-off-note"><span>${view.offCount} ${esc(inheritLabel(view).replace(/ here$/, '').replace(/^./, (c) => c.toLowerCase()))} ${view.offCount === 1 ? 'is' : 'are'} off ${view.scope.type === 'session' ? 'in this session' : 'in this workspace'}. Nothing here can use them.</span><span class="sx-grow"></span>${manage ? '<button type="button" class="btn sm" data-inherit-on>Turn back on</button>' : ''}</div>` : ''
+  const f = ui.form
+  const mode = ui.mode && ui.mode.name ? ui.mode : null
+  const add = manage ? `<form class="sx-new" data-add autocomplete="off">
+    <input class="input sx-in mono" name="name" value="${esc(f.name || '')}" placeholder="NAME" aria-label="Name" spellcheck="false" autocapitalize="characters" ${mode && mode.kind === 'replace' ? 'readonly' : ''}>
+    <input class="input sx-in mono" name="value" type="password" placeholder="${mode && mode.kind === 'replace' ? `new value for ${esc(mode.name)}` : 'value'}" aria-label="Value" autocomplete="new-password" spellcheck="false">
+    <input class="input sx-in mono" name="upstream" value="${esc(f.upstream || '')}" placeholder="sends to: api.stripe.com" aria-label="Where it is sent (its one host)" spellcheck="false">
+    <select class="input sx-in" name="format" aria-label="How it is sent">${formatOptions(f.format || 'bearer')}</select>
+    ${f.format === 'custom' ? `<input class="input sx-in mono sx-custom" name="custom" value="${esc(f.custom || '')}" placeholder="X-Token: Token {value}" aria-label="Your header, with {value}">` : ''}
+    <span class="sx-new-acts">${mode ? '<button type="button" class="btn sm ghost" data-add-cancel>Cancel</button>' : ''}<button type="submit" class="btn sm primary" ${ui.busy ? 'disabled' : ''}>${mode && mode.kind === 'replace' ? 'Replace' : mode && mode.kind === 'override' ? 'Override' : 'Add'}</button></span>
+  </form>` : ''
+  const msg = ui.msg ? `<div class="sx-msg ${ui.msg.kind || ''}" role="status">${esc(ui.msg.text)}</div>` : ''
+  const rows = [...view.secrets.map((r) => rowHtml(r, view, ui, false)), ...(view.inherited || []).map((r) => rowHtml(r, view, ui, true))]
+  const table = rows.length
+    ? `<div class="sx-scroll"><table class="sx-tbl"><thead><tr><th>Name</th><th class="sx-hide-m">Digest</th><th>Sent to</th><th>Who can use</th><th class="sx-hide-m">Used</th><th><span class="sx-sr">Actions</span></th></tr></thead><tbody>${rows.join('')}</tbody></table></div>`
+    : `<div class="sx-empty"><span class="sx-faint">No secrets ${view.scope.type === 'org' ? 'for the team' : `in this ${view.scope.type}`} yet.${manage ? ' Add one above: its value goes straight to Quilt\'s vault and is never shown again, to anyone.' : ''}</span></div>`
+  const foot = `<div class="sx-foot sx-faint">Commands use them through <code>quilt run -- &lt;command&gt;</code>; nobody can read a value back. ${manage ? 'Replace or delete only.' : ''}</div>`
+  return `<div class="sx">${head}${controls}${ui.choose ? chooseHtml(view, ui) : ''}${off}${ui.import ? importHtml(ui) : ''}${add}${msg}${table}${foot}</div>`
+}
+
+/** The inline bar asking a person to allow a people-only secret for one run of a command. */
+export function asksBarHtml (asks) {
+  if (!asks || !asks.length) return ''
+  const a = asks[0]
+  const names = a.names.join(', ')
+  return `<div class="ask-bar-in" role="alert">${LOCK}<span class="ask-text"><b>Allow ${esc(names)}</b> (people only) for one run of <code>${esc(a.label || 'a command')}</code>${a.sessionName ? ` in ${esc(a.sessionName)}` : ''}?</span>${asks.length > 1 ? `<span class="ask-more">+${asks.length - 1} more</span>` : ''}<span class="sx-grow"></span><button type="button" class="btn sm ghost ask-deny" data-ask-deny="${esc(a.runId)}">Deny</button><button type="button" class="btn sm ask-allow" data-ask-allow="${esc(a.runId)}">Allow</button></div>`
+}

package/src/ui/secrets.js

@@ -0,0 +1,283 @@
+// The Secrets card in the app (Session settings → Secrets, and a workspace's page), and the bar
+// that asks a person to allow a people-only secret for one run. The HTML is secrets-view.js's;
+// this file loads, binds and saves. A typed value lives in its input and in `typed` here until it
+// goes to the app's server, which sends it straight to the vault; it is never put in markup.
+import { api, toast } from './common.js'
+import { secretsCardHtml, levelTabs, parseCustomFormat, asksBarHtml } from './secrets-view.js'
+import { cleanSecretName, FORMAT_IDS, formatId } from './secret-rules.js'
+
+const views = new Map() // `${type}:${id}` -> the last view, so a redraw shows it at once
+const urlOf = (type, id, rest = '') => `/api/secrets/${type}/${encodeURIComponent(id)}${rest}`
+
+/**
+ * Draws the card into `root` for one scope ({ type, id }: a session's room, a workspace's id, a
+ * team's slug). `importFrom` says where .env files may be read from ({ sessionId } or
+ * { workspaceId }); without it there is no Import .env. Answers { refresh, destroy }.
+ */
+export function mountSecrets (root, { type, id, importFrom = null }) {
+  const ui = { tabs: [], cur: { type, id }, form: { format: 'bearer' }, mode: null, choose: false, chooseSel: 'all', import: null, msg: null, busy: false, confirmDelete: null, canImport: !!importFrom, error: '', flash: '' }
+  let view = views.get(`${type}:${id}`) || null
+  if (view) ui.tabs = levelTabs(view)
+  let typed = ''
+  let alive = true
+  let fresh = false
+
+  /** What the add row holds now (the value only in memory). */
+  function capture () {
+    const f = root.querySelector('[data-add]')
+    if (!f) return
+    ui.form = { ...ui.form, name: f.elements.name.value, upstream: f.elements.upstream.value, format: f.elements.format.value, custom: f.elements.custom ? f.elements.custom.value : ui.form.custom }
+    typed = f.elements.value.value
+  }
+
+  function draw ({ focus } = {}) {
+    if (!alive) return
+    const had = root.contains(document.activeElement) ? document.activeElement.getAttribute('name') : null
+    // Keep what was typed, unless the form was just cleared on purpose.
+    if (fresh) fresh = false
+    else capture()
+    root.innerHTML = secretsCardHtml(view, { ...ui, now: Date.now() })
+    const f = root.querySelector('[data-add]')
+    if (f) f.elements.value.value = typed
+    const want = focus || had
+    if (want && f && f.elements[want]) f.elements[want].focus()
+  }
+
+  async function load () {
+    try {
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+      if (!ui.tabs.length) ui.tabs = levelTabs(view)
+      ui.error = ''
+    } catch (err) {
+      ui.error = err.status === 503 ? 'Secrets are not switched on for your account\'s server yet.' : err.message
+      view = null
+    }
+    draw()
+  }
+
+  const say = (text, kind = '') => { ui.msg = text ? { text, kind } : null }
+  const resetForm = () => { ui.form = { format: 'bearer' }; ui.mode = null; typed = ''; fresh = true }
+  const scopeUrl = (rest) => urlOf(ui.cur.type, ui.cur.id, rest)
+
+  async function act (fn) {
+    if (ui.busy) return
+    ui.busy = true
+    try { await fn() } catch (err) { say(err.message, 'bad') } finally { ui.busy = false; draw() }
+  }
+
+  const setSettings = (patch) => act(async () => { view = await api('POST', scopeUrl('/settings'), patch); views.set(`${ui.cur.type}:${ui.cur.id}`, view); say('') })
+
+  function formatOf (f) {
+    if (f.format === 'custom') {
+      const c = parseCustomFormat(f.custom)
+      if (!c) throw new Error('Write your header like X-Token: Token {value}')
+      return c
+    }
+    return FORMAT_IDS.includes(f.format) ? f.format : 'bearer'
+  }
+
+  async function save () {
+    capture()
+    const f = ui.form
+    let name
+    try { name = cleanSecretName(f.name) } catch (err) { say(err.message, 'bad'); return draw({ focus: 'name' }) }
+    if (!typed) { say(`Type ${name}'s value.`, 'bad'); return draw({ focus: 'value' }) }
+    let format
+    try { format = formatOf(f) } catch (err) { say(err.message, 'bad'); return draw({ focus: 'custom' }) }
+    const had = view.secrets.find((s) => s.name === name)
+    await act(async () => {
+      const r = await api('POST', scopeUrl('/save'), { entries: [{ name, upstream: f.upstream, format, who: had ? had.who : 'agents' }], values: { [name]: typed } })
+      typed = ''
+      resetForm()
+      const d = r.saved && r.saved[0]
+      say(`${had ? 'Replaced' : 'Saved'} ${name}${d ? ` (${d.digest})` : ''}. Nobody can see its value again, you included.`, 'ok')
+      ui.flash = name
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+    })
+  }
+
+  // --------------------------------------------------------------- Import .env --
+  async function openImport () {
+    ui.import = { loading: true, files: [], rows: [], fileIdx: 0 }
+    draw()
+    try {
+      const r = await api('POST', '/api/secrets/env-scan', importFrom)
+      ui.import = { files: r.files, fileIdx: 0, rows: [], empty: r.empty || '' }
+      pickFile(0)
+    } catch (err) { ui.import = null; say(err.message, 'bad') }
+    draw()
+  }
+  function pickFile (i) {
+    const f = ui.import.files[i]
+    ui.import.fileIdx = i
+    ui.import.rows = f ? f.entries.map((e) => ({ name: e.name, upstream: e.upstream || '', format: e.format || 'bearer', who: 'agents', skip: e.skip || '', pick: !e.skip && !!e.upstream })) : []
+  }
+  function captureImport () {
+    if (!ui.import) return
+    root.querySelectorAll('[data-import-host]').forEach((el) => { ui.import.rows[+el.dataset.importHost].upstream = el.value })
+    root.querySelectorAll('[data-import-format]').forEach((el) => { ui.import.rows[+el.dataset.importFormat].format = el.value })
+  }
+  async function importSave () {
+    captureImport()
+    const im = ui.import
+    const rows = im.rows.filter((r) => r.pick && !r.skip)
+    if (rows.some((r) => r.format === 'custom')) { say('An imported secret uses one of the listed formats; add a header of your own one at a time.', 'bad'); return draw() }
+    const file = im.files[im.fileIdx]
+    await act(async () => {
+      const r = await api('POST', '/api/secrets/env-import', { ...importFrom, scope: ui.cur.type, id: ui.cur.id, file: file.path, entries: rows.map((x) => ({ name: x.name, upstream: x.upstream, format: x.format, who: x.who })) })
+      ui.import = { ...im, done: { rel: file.rel, path: file.path, saved: r.saved, deleted: false } }
+      say('')
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+    })
+  }
+
+  // --------------------------------------------------------------- events --
+  async function onClick (e) {
+    const t = (sel) => e.target.closest(sel)
+    let b
+    if ((b = t('[data-level]'))) {
+      if (b.classList.contains('on')) return
+      capture(); resetForm(); ui.choose = false; ui.import = null; ui.confirmDelete = null; say('')
+      ui.cur = { type: b.dataset.level, id: b.dataset.levelId }
+      view = views.get(`${ui.cur.type}:${ui.cur.id}`) || null
+      draw()
+      return load()
+    }
+    if (!view) return
+    if ((b = t('[data-inherit]')) && !b.disabled) return setSettings({ inheritOff: !view.settings.inheritOff })
+    if (t('[data-inherit-on]')) return setSettings({ inheritOff: false })
+    if ((b = t('[data-agents-on]')) && !b.disabled) { ui.choose = false; return setSettings({ agentsOn: !view.settings.agentsOn }) }
+    if (t('[data-choose]')) { ui.choose = !ui.choose; ui.chooseSel = view.settings.agents === 'all' ? 'all' : [...view.settings.agents]; return draw() }
+    if (t('[data-choose-cancel]')) { ui.choose = false; return draw() }
+    if (t('[data-choose-save]')) { ui.choose = false; return setSettings({ agents: ui.chooseSel }) }
+    if ((b = t('[data-who]')) && !b.disabled) {
+      const r = view.secrets.find((s) => s.name === b.dataset.who)
+      return act(async () => { view = await api('POST', scopeUrl('/who'), { name: r.name, who: r.who === 'people' ? 'agents' : 'people' }); say('') })
+    }
+    if ((b = t('[data-replace]')) || (b = t('[data-override]'))) {
+      const replace = !!b.dataset.replace
+      const name = replace ? b.dataset.replace : b.dataset.override
+      const r = (replace ? view.secrets : view.inherited).find((s) => s.name === name)
+      ui.mode = { kind: replace ? 'replace' : 'override', name }
+      const fid = formatId(r.format)
+      ui.form = { name, upstream: r.upstream, format: fid || 'custom', custom: fid ? '' : `${r.format.name}: ${r.format.template}` }
+      typed = ''
+      fresh = true
+      say(replace ? `A new value for ${name}. Where it goes and how can change with it.` : `${name} for this ${ui.cur.type === 'org' ? 'team' : ui.cur.type} only: it overrides the ${r.level === 'org' ? 'team' : r.level}'s.`)
+      return draw({ focus: 'value' })
+    }
+    if (t('[data-add-cancel]')) { resetForm(); say(''); return draw() }
+    if ((b = t('[data-delete]'))) { ui.confirmDelete = b.dataset.delete; return draw() }
+    if (t('[data-delete-no]')) { ui.confirmDelete = null; return draw() }
+    if ((b = t('[data-delete-yes]'))) {
+      const name = b.dataset.deleteYes
+      ui.confirmDelete = null
+      return act(async () => { view = await api('POST', scopeUrl('/delete'), { name }); say(`Deleted ${name}.`, 'ok') })
+    }
+    if (t('[data-import]')) return openImport()
+    if (t('[data-import-close]')) { ui.import = null; return draw() }
+    if ((b = t('[data-import-who]'))) { captureImport(); const r = ui.import.rows[+b.dataset.importWho]; r.who = r.who === 'people' ? 'agents' : 'people'; return draw() }
+    if (t('[data-import-save]')) return importSave()
+    if (t('[data-import-delete]')) {
+      const d = ui.import.done
+      return act(async () => { await api('POST', '/api/secrets/env-delete', { ...importFrom, file: d.path }); d.deleted = true; toast(`Deleted ${d.rel}`) })
+    }
+  }
+
+  function onChange (e) {
+    const el = e.target
+    if (el.matches('[data-choose-all]')) { ui.chooseSel = 'all'; return draw() }
+    if (el.matches('[data-choose-some]')) { ui.chooseSel = view.agentChoices.map((a) => a.id); return draw() }
+    if (el.matches('[data-choose-agent]')) {
+      const set = new Set(ui.chooseSel === 'all' ? [] : ui.chooseSel)
+      if (el.checked) set.add(el.dataset.chooseAgent); else set.delete(el.dataset.chooseAgent)
+      ui.chooseSel = [...set]
+      return
+    }
+    if (el.matches('[data-add] [name=format]')) { capture(); return draw({ focus: el.value === 'custom' ? 'custom' : 'format' }) }
+    if (el.matches('[data-import-file]')) { pickFile(+el.value); return draw() }
+    if (el.matches('[data-import-pick]')) { captureImport(); ui.import.rows[+el.dataset.importPick].pick = el.checked; return draw() }
+  }
+
+  function onInput (e) {
+    // Names are capitals: typed as such.
+    if (e.target.matches('[data-add] [name=name]')) {
+      const s = e.target.selectionStart
+      e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_')
+      e.target.setSelectionRange(s, s)
+    }
+  }
+
+  function onSubmit (e) {
+    if (!e.target.matches('[data-add]')) return
+    e.preventDefault()
+    save()
+  }
+
+  root.addEventListener('click', onClick)
+  root.addEventListener('change', onChange)
+  root.addEventListener('input', onInput)
+  root.addEventListener('submit', onSubmit)
+  draw()
+  load()
+  return {
+    refresh: load,
+    destroy () { alive = false; typed = ''; root.removeEventListener('click', onClick); root.removeEventListener('change', onChange); root.removeEventListener('input', onInput); root.removeEventListener('submit', onSubmit) }
+  }
+}
+
+// ------------------------------------------------- people-only asks, app-wide --
+let asking = false
+let asks = []
+
+function drawAsks () {
+  let bar = document.getElementById('ask-bar')
+  const show = asks.length > 0
+  document.body.classList.toggle('has-asks', show)
+  if (!show) { bar?.remove(); return }
+  if (!bar) {
+    bar = document.createElement('div')
+    bar.id = 'ask-bar'
+    bar.addEventListener('click', async (e) => {
+      const b = e.target.closest('[data-ask-allow],[data-ask-deny]')
+      if (!b) return
+      const allow = !!b.dataset.askAllow
+      const runId = allow ? b.dataset.askAllow : b.dataset.askDeny
+      b.disabled = true
+      try {
+        await api('POST', `/api/secret-asks/${encodeURIComponent(runId)}`, { allow })
+        asks = asks.filter((a) => a.runId !== runId)
+        toast(allow ? 'Allowed for that run' : 'Denied')
+      } catch (err) { toast(err.message) }
+      drawAsks()
+    })
+    document.body.prepend(bar)
+  }
+  bar.innerHTML = asksBarHtml(asks)
+}
+
+/**
+ * Watches for runs of yours waiting for you to allow a people-only secret (a held request that
+ * the API answers when one comes, or after 25 seconds), and shows them in the bar. Once per page.
+ */
+export function watchSecretAsks () {
+  if (asking) return
+  asking = true
+  const loop = async () => {
+    let wait = 2000
+    try {
+      const r = await api('GET', '/api/secret-asks?wait=1')
+      asks = r.asks || []
+      drawAsks()
+      wait = asks.length ? 3000 : 250
+    } catch (err) {
+      // Secrets off on the server, or signed out: look again much later.
+      wait = err.status === 503 || err.status === 404 ? 10 * 60 * 1000 : 15000
+    }
+    setTimeout(loop, wait)
+  }
+  loop()
+}