heyquilt 0.3.90 → 0.3.106

package/src/ui/secret-rules.js

@@ -0,0 +1,255 @@
+// Secrets (docs/superpowers/specs/2026-10-18-secrets.md): the rules every part shares, the
+// accounts API, the vault, `quilt run`, the app and the website. Pure, no Node built-ins, so the
+// app's page and the website import it too. Nothing here ever sees a value except
+// applyCredential (the vault, as it forwards a request) and parseDotenv (the app, as it sends an
+// .env file's values straight to the vault).
+
+export const SCOPES = ['org', 'workspace', 'session']
+export const WHO = ['agents', 'people']
+export const MAX_VALUE_BYTES = 16 * 1024
+export const MAX_ENTRIES = 100
+// What `quilt run` puts where a value would be. SDKs that insist on a key get one.
+export const STAND_IN = 'quilt'
+
+const NAME = /^[A-Z_][A-Z0-9_]{0,63}$/
+export const BAD_NAME = 'A secret name is capital letters, digits and underscores, like STRIPE_KEY (at most 64).'
+
+/** A secret's name, or an error saying what one looks like. */
+export function cleanSecretName (value) {
+  const s = String(value ?? '').trim()
+  if (!NAME.test(s)) throw new Error(BAD_NAME)
+  return s
+}
+
+const HOST_LABEL = /^(?!-)[a-z0-9-]{1,63}(?<!-)$/
+const IPV4 = /^\d{1,3}(\.\d{1,3}){3}$/
+const INSIDE = /(^|\.)(localhost|local|internal|localdomain|home|lan|intranet|corp|private|test|invalid|example|onion|arpa)$/
+export const NOT_HTTPS = 'Only HTTPS services for now: Postgres and other database secrets are not supported yet.'
+
+/**
+ * The one host a secret is sent to: `api.stripe.com`, from that or from `https://api.stripe.com/`.
+ * A port is allowed (`api.example.com:8443`). Never an IP address, a single-label name or an
+ * internal one (`localhost`, `*.internal`): the vault would otherwise reach inside its own
+ * network. `allowLocal` is for tests only (a stand-in upstream on 127.0.0.1).
+ */
+export function cleanUpstream (value, { allowLocal = false } = {}) {
+  let s = String(value ?? '').trim().toLowerCase()
+  if (!s) throw new Error('Say where the secret is sent: its service\'s host, like api.stripe.com.')
+  const scheme = /^([a-z][a-z0-9+.-]*):\/\//.exec(s)
+  if (scheme) {
+    if (scheme[1] !== 'https' && !(allowLocal && scheme[1] === 'http')) throw new Error(NOT_HTTPS)
+    s = s.slice(scheme[0].length)
+  }
+  s = s.replace(/\/+$/, '')
+  if (/[/?#@\s\\]/.test(s)) throw new Error('Just the host, like api.stripe.com: no path.')
+  const m = /^(\[[^\]]*\]|[^:]+)(?::(\d{1,5}))?$/.exec(s)
+  if (!m) throw new Error('That is not a host name.')
+  const [, host, port] = m
+  if (port !== undefined && (Number(port) < 1 || Number(port) > 65535)) throw new Error('That port is not right.')
+  if (allowLocal && (host === '127.0.0.1' || host === 'localhost')) return port ? `${host}:${Number(port)}` : host
+  if (host.startsWith('[') || IPV4.test(host)) throw new Error('A host name, not an IP address.')
+  const labels = host.split('.')
+  if (labels.length < 2 || host.length > 253 || !labels.every((l) => HOST_LABEL.test(l)) || /^\d+$/.test(labels.at(-1))) throw new Error('That is not a host name.')
+  if (INSIDE.test(host)) throw new Error('That host is inside a private network; secrets go to public services only.')
+  return port && Number(port) !== 443 ? `${host}:${Number(port)}` : host
+}
+
+// How the vault attaches the value. `{value}` is the value; `{basic}` is base64 of "value:"
+// (HTTP Basic with the key as the user name).
+export const FORMATS = {
+  bearer: { in: 'header', name: 'authorization', template: 'Bearer {value}', label: 'Authorization: Bearer' },
+  'x-api-key': { in: 'header', name: 'x-api-key', template: '{value}', label: 'x-api-key header' },
+  basic: { in: 'header', name: 'authorization', template: 'Basic {basic}', label: 'Basic (key as user)' },
+  query: { in: 'query', name: 'key', template: '{value}', label: 'Query ?key=' },
+  // A webhook URL: the value (the URL, or its path) starts the request's path.
+  path: { in: 'path', name: '', template: '{value}', label: 'In the path (webhook URL)' }
+}
+export const FORMAT_IDS = Object.keys(FORMATS)
+const TOKEN = /^[a-z0-9!#$%&'*+.^_`|~-]{1,64}$/
+const PARAM = /^[A-Za-z0-9_.~-]{1,64}$/
+// Headers a secret may not be put in: they belong to the connection, not to the service.
+const RESERVED = new Set(['host', 'connection', 'content-length', 'transfer-encoding', 'te', 'upgrade', 'keep-alive', 'proxy-authorization', 'proxy-connection', 'trailer', 'accept-encoding', 'content-encoding'])
+export const BAD_FORMAT = 'Pick how the secret is sent: Authorization: Bearer, an x-api-key header, Basic, a query parameter, in the path, or a header of your own with {value} in it.'
+
+/**
+ * A credential format: a preset's id, or { in: 'header'|'query', name, template } with
+ * `{value}` (or `{basic}`) exactly once. Answers { in, name, template }.
+ */
+export function cleanFormat (value) {
+  if (typeof value === 'string' && FORMATS[value]) { const { label, ...f } = FORMATS[value]; return f }
+  if (!value || typeof value !== 'object') throw new Error(BAD_FORMAT)
+  const where = ['query', 'header', 'path'].includes(value.in) ? value.in : null
+  const name = String(value.name ?? '').trim()
+  const template = String(value.template ?? '{value}')
+  if (!where) throw new Error(BAD_FORMAT)
+  if (where === 'path') return { in: 'path', name: '', template: '{value}' }
+  if (where === 'header' ? !TOKEN.test(name.toLowerCase()) || RESERVED.has(name.toLowerCase()) : !PARAM.test(name)) throw new Error(BAD_FORMAT)
+  const holes = (template.match(/\{(value|basic)\}/g) || []).length
+  if (holes !== 1 || template.length > 200 || /[\r\n\0]/.test(template) || /\{(?!value\}|basic\})/.test(template)) throw new Error(BAD_FORMAT)
+  return { in: where, name: where === 'header' ? name.toLowerCase() : name, template }
+}
+
+/** A short label for a format, for the table: "Authorization: Bearer", "?key=". */
+export function formatLabel (f) {
+  for (const p of Object.values(FORMATS)) if (p.in === f?.in && p.name === f?.name && p.template === f?.template) return p.label
+  if (!f) return ''
+  if (f.in === 'path') return FORMATS.path.label
+  return f.in === 'query' ? `?${f.name}=` : `${f.name}: ${f.template.replace(/\{(value|basic)\}/, '…')}`
+}
+
+/** The preset id a format is, or '' for one of a person's own. */
+export function formatId (f) {
+  return FORMAT_IDS.find((id) => FORMATS[id].in === f?.in && FORMATS[id].name === f?.name && FORMATS[id].template === f?.template) || ''
+}
+
+function base64 (s) {
+  const bytes = new TextEncoder().encode(s)
+  let bin = ''
+  for (const b of bytes) bin += String.fromCharCode(b)
+  return btoa(bin)
+}
+
+/**
+ * What the vault puts on the request: { header: [name, text] }, { query: [name, text] }, or
+ * { path: text } (to put before the request's own path; a whole https URL is cut to its path).
+ */
+export function applyCredential (format, value) {
+  const f = cleanFormat(format)
+  if (f.in === 'path') return { path: String(value).replace(/^https:\/\/[^/]+/i, '').replace(/^\/+/, '') }
+  const text = f.template.replace('{value}', () => value).replace('{basic}', () => base64(`${value}:`))
+  return f.in === 'query' ? { query: [f.name, text] } : { header: [f.name, text] }
+}
+
+/** The forms of a value the vault masks in an answer: as sent, and as the format spelled it. */
+export function maskForms (format, value) {
+  const out = new Set([String(value)])
+  try {
+    const c = applyCredential(format, value)
+    const text = c.path !== undefined ? c.path : (c.header || c.query)[1]
+    if (text !== value) out.add(text)
+    if (/\{basic\}/.test(cleanFormat(format).template)) out.add(base64(`${value}:`))
+  } catch {}
+  try { const enc = encodeURIComponent(value); if (enc !== value) out.add(enc) } catch {}
+  return [...out].filter((s) => s.length >= 4)
+}
+
+// SDKs that read a base URL from the environment, by host: [variable, path after the host].
+export const KNOWN_BASE_URLS = {
+  'api.openai.com': [['OPENAI_BASE_URL', 'v1']],
+  'api.anthropic.com': [['ANTHROPIC_BASE_URL', '']],
+  'api.groq.com': [['GROQ_BASE_URL', '']]
+}
+
+/** The variable `quilt run` gives a secret's gateway in: STRIPE_KEY → STRIPE_BASE_URL. */
+export function baseUrlVar (name) {
+  const m = /^(.+?)_(API_KEY|SECRET_KEY|ACCESS_TOKEN|KEY|SECRET|TOKEN)$/.exec(name)
+  return `${m ? m[1] : name}_BASE_URL`
+}
+
+/** Every variable `quilt run` sets for a secret: its name (the stand-in) and its base URLs. */
+export function envVarsFor (name, upstream) {
+  return [name, baseUrlVar(name), ...(KNOWN_BASE_URLS[String(upstream || '').toLowerCase()] || []).map(([v]) => v)]
+    .filter((v, i, a) => a.indexOf(v) === i)
+}
+
+/**
+ * The environment `quilt run` gives a command: for each secret, the stand-in and the gateway
+ * (`<vault>/g/<token>/<NAME>/`), plus the conventional base URL of a known service (the first
+ * secret for that service wins). Never a value: there is none here.
+ */
+export function runEnv (secrets, { vault, token }) {
+  const base = String(vault).replace(/\/+$/, '')
+  const env = {}
+  const taken = new Set()
+  for (const s of secrets) {
+    const gateway = `${base}/g/${token}/${s.name}/`
+    env[s.name] = STAND_IN
+    const own = baseUrlVar(s.name)
+    if (own !== s.name) { env[own] = gateway; taken.add(own) }
+  }
+  for (const s of secrets) {
+    const gateway = `${base}/g/${token}/${s.name}/`
+    for (const [v, p] of KNOWN_BASE_URLS[String(s.upstream || '').toLowerCase()] || []) {
+      if (taken.has(v) || secrets.some((x) => x.name === v)) continue
+      env[v] = p ? `${gateway}${p}` : gateway.replace(/\/$/, '')
+      taken.add(v)
+    }
+  }
+  return env
+}
+
+/**
+ * An .env file's names and values, in order (the last of a repeated name wins). Understands
+ * `export`, comments, single quotes (as is), double quotes (\n, \t, \", \\) and a value that
+ * runs on to the closing quote across lines.
+ */
+export function parseDotenv (text) {
+  const out = new Map()
+  const src = String(text ?? '').replace(/\r\n?/g, '\n')
+  const re = /^[ \t]*(?:export[ \t]+)?([A-Za-z_][A-Za-z0-9_.-]*)[ \t]*=[ \t]*(?:"((?:\\[\s\S]|[^"\\])*)"|'([^']*)'|([^\n]*))[ \t]*(?:#[^\n]*)?$/gm
+  let m
+  while ((m = re.exec(src))) {
+    const [, name, dq, sq, bare] = m
+    let value
+    if (dq !== undefined) value = dq.replace(/\\(.)/g, (_, c) => ({ n: '\n', r: '\r', t: '\t' }[c] ?? c))
+    else if (sq !== undefined) value = sq
+    else value = bare.replace(/[ \t]+#.*$/, '').trim()
+    out.delete(name)
+    out.set(name, value)
+  }
+  return [...out].map(([name, value]) => ({ name, value }))
+}
+
+// Where well-known keys go, by the start of their name: [prefix, host, format].
+const GUESSES = [
+  ['STRIPE', 'api.stripe.com', 'bearer'],
+  ['OPENAI', 'api.openai.com', 'bearer'],
+  ['ANTHROPIC', 'api.anthropic.com', 'x-api-key'],
+  ['CLAUDE', 'api.anthropic.com', 'x-api-key'],
+  ['GROQ', 'api.groq.com', 'bearer'],
+  ['MISTRAL', 'api.mistral.ai', 'bearer'],
+  ['OPENROUTER', 'openrouter.ai', 'bearer'],
+  ['XAI', 'api.x.ai', 'bearer'],
+  ['GROK', 'api.x.ai', 'bearer'],
+  ['GITHUB', 'api.github.com', 'bearer'],
+  ['GH_', 'api.github.com', 'bearer'],
+  ['SENDGRID', 'api.sendgrid.com', 'bearer'],
+  ['RESEND', 'api.resend.com', 'bearer'],
+  ['POSTMARK', 'api.postmarkapp.com', 'bearer'],
+  ['MAILGUN', 'api.mailgun.net', 'basic'],
+  ['TWILIO', 'api.twilio.com', 'basic'],
+  ['REPLICATE', 'api.replicate.com', 'bearer'],
+  ['HUGGINGFACE', 'huggingface.co', 'bearer'],
+  ['HF_', 'huggingface.co', 'bearer'],
+  ['CLOUDFLARE', 'api.cloudflare.com', 'bearer'],
+  ['VERCEL', 'api.vercel.com', 'bearer'],
+  ['NETLIFY', 'api.netlify.com', 'bearer'],
+  ['LINEAR', 'api.linear.app', 'bearer'],
+  ['NOTION', 'api.notion.com', 'bearer'],
+  ['SLACK', 'slack.com', 'bearer'],
+  ['DEEPSEEK', 'api.deepseek.com', 'bearer'],
+  ['ELEVENLABS', 'api.elevenlabs.io', 'bearer'],
+  ['PERPLEXITY', 'api.perplexity.ai', 'bearer']
+]
+
+/**
+ * What the app suggests for an .env entry: { upstream, format } when the name or value says
+ * (an https URL's host), { skip: reason } for a value that can't go through the gateway (a
+ * database URL), or {} when the person has to say.
+ */
+export function guessUpstream (name, value = '') {
+  const v = String(value || '').trim()
+  const scheme = /^([a-z][a-z0-9+.-]*):\/\//i.exec(v)
+  if (scheme && scheme[1].toLowerCase() !== 'https') return { skip: NOT_HTTPS }
+  // A whole URL (a webhook): sent to its host, with the URL's path as the secret part.
+  if (scheme) { try { return { upstream: cleanUpstream(new URL(v).host), format: 'path' } } catch { return {} } }
+  const n = String(name).toUpperCase()
+  const g = GUESSES.find(([p]) => n.startsWith(p))
+  return g ? { upstream: g[1], format: g[2] } : {}
+}
+
+/** A digest as the table shows it: a91e…07c2. */
+export function shortDigest (d) {
+  const s = String(d || '')
+  return s.length > 8 ? `${s.slice(0, 4)}…${s.slice(-4)}` : s
+}

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>`
+}