heyquilt 0.3.121 → 0.3.138

package/src/ui/home.js

@@ -316,10 +316,6 @@ export function newSessionDialog (workspace = '') {
   const { form, close } = dialog(`
     <h3>New session${workspace ? ` in ${esc(state.workspaces?.find((w) => w.id === workspace)?.name || 'this workspace')}` : ''}</h3>
     <p class="lead">Pick what you want to work on together. You'll get invites to send once it starts.</p>
-    <div class="segmented src-switch" role="tablist" aria-label="Start from">
-      <button type="button" role="tab" data-src="folder" class="on" aria-selected="true">${I.folder}<span>Folder</span></button>
-      <button type="button" role="tab" data-src="github" aria-selected="false">${I.branch}<span>GitHub</span></button>
-    </div>
     <div id="src-folder">
     <div class="field">
       <label for="n-dir">Project folder</label>
@@ -327,33 +323,11 @@ export function newSessionDialog (workspace = '') {
       <button type="button" class="btn icon" id="n-browse" title="Browse" aria-label="Browse">${I.folder}</button></div>
     </div>
     </div>
-    <div id="src-github" hidden></div>
     <p class="error" id="n-error"></p>
     <div class="actions"><button type="button" class="btn ghost" data-cancel>Cancel</button><button class="btn primary" type="submit">Start session</button></div>`)
-  let src = 'folder'
-  const gh = githubPicker(form.querySelector('#src-github'))
-  form.querySelectorAll('[data-src]').forEach((b) => {
-    b.onclick = () => {
-      src = b.dataset.src
-      form.querySelectorAll('[data-src]').forEach((x) => { x.classList.toggle('on', x === b); x.setAttribute('aria-selected', String(x === b)) })
-      form.querySelector('#src-folder').hidden = src !== 'folder'
-      form.querySelector('#src-github').hidden = src !== 'github'
-      form.querySelector('#n-dir').required = src === 'folder'
-      form.querySelector('button[type=submit]').textContent = src === 'github' ? 'Clone and start' : 'Start session'
-      form.querySelector('#n-error').textContent = ''
-      if (src === 'github') gh.open()
-      else form.querySelector('#n-dir').focus()
-    }
-  })
   form.querySelector('#n-browse').onclick = () => pickFolder(form.querySelector('#n-dir'))
   form.onsubmit = async (e) => {
     e.preventDefault()
-    if (src === 'github') {
-      let body
-      try { body = gh.value() } catch (err) { form.querySelector('#n-error').textContent = err.message; return }
-      if (await submit(form, '#n-error', { mode: 'github', ...body, workspace }, 'Cloning…')) close()
-      return
-    }
     const dir = form.querySelector('#n-dir').value
     state.lastCreateDir = dir
     if (await submit(form, '#n-error', { mode: 'create', dir, workspace })) close()
@@ -547,127 +521,6 @@ function workspaceInviteDialog (id) {
   return close
 }
 
-/** The GitHub side of the New session dialog: repo, branch, and where to clone it. */
-function githubPicker (root) {
-  let repos = null
-  let repo = null // { name, defaultBranch }
-  let branches = null // { branches, defaultBranch }
-  let loaded = false
-
-  async function open () {
-    if (loaded) return root.querySelector('#gh-search')?.focus()
-    loaded = true
-    root.innerHTML = `<p class="hint gh-wait">${loadingNote('Checking GitHub…')}</p>`
-    let st
-    try { st = await api('GET', '/api/github/status') } catch (err) { st = { authenticated: false, message: err.message } }
-    if (!st.authenticated) {
-      loaded = false
-      root.innerHTML = `<div class="note gh-setup">${I.branch}<span>Quilt can't list your GitHub repositories on this computer. Start from a folder instead: a clone of the repository works the same, and once anyone connects GitHub for the session, git is on for everyone in it.</span></div>`
-      return
-    }
-    root.innerHTML = `
-      <div class="field">
-        <label for="gh-search">Repository${st.user ? ` <span class="hint">· signed in as ${esc(st.user)}</span>` : ''}</label>
-        <input class="input" id="gh-search" placeholder="Search your repositories" spellcheck="false" autocomplete="off">
-        <div class="gh-list" id="gh-list" role="listbox" aria-label="Repositories"><p class="hint">${loadingNote('Loading repositories…')}</p></div>
-      </div>
-      <div id="gh-branch" hidden>
-        <div class="field">
-          <span class="label">Branch</span>
-          <div class="choice-cards">
-            <label class="choice-card"><input type="radio" name="ghb" value="existing" checked><span><b>Use an existing branch</b></span></label>
-            <label class="choice-card"><input type="radio" name="ghb" value="new"><span><b>Create a new branch</b></span></label>
-          </div>
-          <div id="gh-existing"><select class="input" id="gh-branch-select" aria-label="Branch"></select></div>
-          <div id="gh-new" class="row" hidden>
-            <input class="input grow" id="gh-new-name" placeholder="my-feature" spellcheck="false" aria-label="New branch name">
-            <span class="hint">from</span>
-            <select class="input gh-base" id="gh-base" aria-label="Start from branch"></select>
-          </div>
-        </div>
-        <div class="field">
-          <label for="gh-dir">Clone into</label>
-          <div class="row"><input class="input grow" id="gh-dir" spellcheck="false">
-          <button type="button" class="btn icon" id="gh-browse" title="Browse" aria-label="Browse">${I.folder}</button></div>
-          <span class="hint">Leave empty to use a new folder in ${esc(state.profile.joinDir)}.</span>
-        </div>
-      </div>`
-    const search = root.querySelector('#gh-search')
-    search.addEventListener('input', paintRepos)
-    search.addEventListener('keydown', (e) => {
-      if (e.key !== 'Enter') return
-      e.preventDefault() // pick the first match rather than submitting
-      root.querySelector('#gh-list [data-repo]')?.click()
-    })
-    root.querySelector('#gh-browse').onclick = () => pickFolder(root.querySelector('#gh-dir'))
-    root.querySelectorAll('[name=ghb]').forEach((r) => {
-      r.onchange = () => {
-        root.querySelector('#gh-existing').hidden = r.value !== 'existing'
-        root.querySelector('#gh-new').hidden = r.value !== 'new'
-        if (r.value === 'new') root.querySelector('#gh-new-name').focus()
-      }
-    })
-    search.focus()
-    try {
-      repos = (await api('GET', '/api/github/repos')).repos
-    } catch (err) {
-      root.querySelector('#gh-list').innerHTML = `<p class="hint warn">${esc(err.message)}</p>`
-      return
-    }
-    paintRepos()
-  }
-
-  function paintRepos () {
-    const list = root.querySelector('#gh-list')
-    if (!list || !repos) return
-    const q = root.querySelector('#gh-search').value.trim().toLowerCase()
-    const shown = repos.filter((r) => !q || r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q)).slice(0, 60)
-    list.innerHTML = shown.length
-      ? shown.map((r) => `<button type="button" class="gh-repo${repo && repo.name === r.name ? ' on' : ''}" role="option" aria-selected="${repo && repo.name === r.name}" data-repo="${esc(r.name)}">
-          <span class="grow"><b>${esc(r.name)}</b>${r.description ? `<span class="hint">${esc(r.description)}</span>` : ''}</span>
-          ${r.updatedAt ? `<span class="hint">${esc(ago(Date.parse(r.updatedAt)))}</span>` : ''}</button>`).join('')
-      : `<p class="hint">${repos.length ? 'No repositories match.' : 'You have no repositories on GitHub yet.'}</p>`
-    list.querySelectorAll('[data-repo]').forEach((b) => { b.onclick = () => pickRepo(repos.find((r) => r.name === b.dataset.repo)) })
-  }
-
-  async function pickRepo (r) {
-    repo = r
-    branches = null
-    paintRepos()
-    root.querySelector('#gh-branch').hidden = false
-    root.querySelector('#gh-dir').placeholder = `${state.profile.joinDir}/${r.name.split('/').pop()}`
-    const sel = root.querySelector('#gh-branch-select')
-    const baseSel = root.querySelector('#gh-base')
-    sel.innerHTML = baseSel.innerHTML = '<option>Loading…</option>'
-    sel.disabled = baseSel.disabled = true
-    try {
-      const b = await api('GET', `/api/github/branches?repo=${encodeURIComponent(r.name)}`)
-      if (repo !== r) return // picked another meanwhile
-      branches = b
-      const opts = b.branches.map((n) => `<option value="${esc(n)}" ${n === b.defaultBranch ? 'selected' : ''}>${esc(n)}${n === b.defaultBranch ? ' (default)' : ''}</option>`).join('')
-      sel.innerHTML = baseSel.innerHTML = opts || '<option value="">No branches</option>'
-      sel.disabled = baseSel.disabled = false
-    } catch (err) {
-      sel.innerHTML = baseSel.innerHTML = '<option value="">Couldn’t load branches</option>'
-      toast(err.message)
-    }
-  }
-
-  function value () {
-    if (!repo) throw new Error('Pick a repository.')
-    if (!branches) throw new Error('Wait for the branches to load.')
-    const dir = root.querySelector('#gh-dir').value.trim() || undefined
-    if (root.querySelector('[name=ghb]:checked').value === 'new') {
-      const newBranch = root.querySelector('#gh-new-name').value.trim()
-      if (!newBranch) throw new Error('Name your new branch.')
-      return { repo: repo.name, newBranch, base: root.querySelector('#gh-base').value || undefined, dir }
-    }
-    return { repo: repo.name, branch: root.querySelector('#gh-branch-select').value || undefined, dir }
-  }
-
-  return { open, value }
-}
-
 export function joinSessionDialog (invite = '') {
   const p = state.profile
   const { form, close } = dialog(`

package/src/ui/loom-model.js

@@ -302,6 +302,20 @@ export function foldAiLanes ({ people = [], owners = new Map(), feeds = new Map(
   }
 }
 
+/**
+ * Whether someone's AI is working right now, for the loom's needle and the tab pulse.
+ * A tool with hooks reports its AI's status; an agent without them (a CLI, a script) says so
+ * with quilt_set_work. A reader that is `unavailable` (no such tool on that machine) counts as
+ * no tool at all, so it can't silence quilt_set_work. Paused sharing hides it.
+ */
+export function aiWorking (p) {
+  const agent = (p && p.agent) || null
+  if (agent && agent.sharing === false) return false
+  if (agent && agent.status === 'working') return true
+  const hooked = !!(agent && agent.tool && agent.status !== 'unavailable')
+  return !hooked && !!(p && p.work && p.work.state === 'working')
+}
+
 /**
  * Everything the Loom shows. `people`: [{ name, color, isMe, kind, tool, online,
  * agent, optional, focus, focusAt }] in lane order; `feeds`: Map name -> feed entries; `messages`: the
@@ -334,7 +348,7 @@ export function buildLoom ({ people = [], feeds = new Map(), messages = [], task
       sharing,
       // A tool with hooks reports its AI's status; an agent without them (a CLI, a script) says so
       // with quilt_set_work, or Quilt says it for it while it edits (Session.reportWorking).
-      working: sharing && ((!!agent && agent.status === 'working') || (!(agent && agent.tool) && !!p.work && p.work.state === 'working')),
+      working: aiWorking(p),
       // Since when they've been on their focus (stitching); hidden like their status while paused.
       since: sharing && p.focusAt > 0 ? p.focusAt : 0,
       focus: sharing && p.focusAt > 0 ? String(p.focus || '') : '',

package/src/ui/quiltview.js

@@ -0,0 +1,213 @@
+// A file in a session linked to a quilt (Seam): its History (the live changes not committed yet,
+// then the patches that touched it, from the quilt's log, the chronology quilt_history gives
+// agents), its Blame (who wrote each line, in which patch), and code search over main. The data
+// comes through the relay (src/server.js quiltBlame, quiltSearch, quiltShow). A session that isn't
+// linked never shows any of it.
+import { esc, avatar, colorFor, I } from './common.js'
+import { diffLines } from './diffview.js'
+
+export const SEARCH_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>'
+
+/** How long ago, short: now, 5m, 3h, 2d, 3w, 4mo, 2y. */
+export function shortAgo (ts, now = Date.now()) {
+  const s = Math.max(0, (now - ts) / 1000)
+  if (s < 60) return 'now'
+  if (s < 3600) return `${Math.round(s / 60)}m`
+  if (s < 86400) return `${Math.round(s / 3600)}h`
+  if (s < 14 * 86400) return `${Math.round(s / 86400)}d`
+  if (s < 60 * 86400) return `${Math.round(s / (7 * 86400))}w`
+  if (s < 365 * 86400) return `${Math.round(s / (30 * 86400))}mo`
+  return `${Math.round(s / (365 * 86400))}y`
+}
+
+/** The live changes, one row per person: what they changed in the file, summed, newest first. */
+export function liveByPerson (entries) {
+  const by = new Map()
+  for (const e of entries || []) {
+    const p = by.get(e.by) || by.set(e.by, { by: e.by, ts: 0, added: 0, removed: 0, entries: [] }).get(e.by)
+    p.ts = Math.max(p.ts, e.ts || 0)
+    p.added += e.added || 0
+    p.removed += e.removed || 0
+    p.entries.push(e)
+  }
+  return [...by.values()].sort((a, b) => b.ts - a.ts)
+}
+
+/**
+ * What a file view still has to read when it is drawn, so a tab put back after a reload (on any
+ * segment) fetches its data instead of waiting for a click: 'history' (the file's changes, or in
+ * a linked session its History) until it is read, and 'blame' on the Blame segment of a linked
+ * file. `history`/`blame` are undefined until asked for; `busy` names reads already under way.
+ */
+export function fileReadsNeeded ({ tab, linked = false, history, blame, busy = new Set() }) {
+  const out = []
+  if (history === undefined && !busy.has('history')) out.push('history')
+  if (tab === 'blame' && linked && blame === undefined && !busy.has('blame')) out.push('blame')
+  return out
+}
+
+/** How many rows History lists: a row per person changing the file now, and one per patch. */
+export const historyCount = (live, patches) => liveByPerson(live).length + (patches || []).length
+
+/** Whether a patch came in from git (the session shadows the quilt, or it is from before the cut-over) or was merged in Seam. */
+const fromGit = (p, quilt) => !!(quilt && (quilt.shadow || (quilt.at && p.ts < Date.parse(quilt.at))))
+
+/**
+ * The History tab of a linked file.
+ * @param {object} o
+ * @param {string} o.path the file
+ * @param {object[]} o.live the session's own changes not in the log yet, newest first
+ * @param {object[]} o.patches the log's patches that touched the file, newest first (quilt-history.js entries)
+ * @param {object} o.quilt the link ({ slug, shadow, at })
+ * @param {string|null} o.open the row opened: a commit id, or `live:<name>`
+ * @param {object|null} o.shown the opened patch: { files, diff }, { error }, or null while it loads
+ * @param {string} [o.note] why the log is missing, when it is
+ */
+export function patchesMarkup ({ path, live = [], patches = [], quilt = null, open = null, shown = null, note = '', who = (n) => n, colorOf = () => null }) {
+  const people = liveByPerson(live)
+  const head = note ? `<p class="hint qt-shadow">${esc(note)}</p>` : ''
+  if (!people.length && !patches.length) return `${head}<div class="fv-note">No patch in ${esc((quilt && quilt.slug) || 'the quilt')} touched this file, and nobody is changing it now.</div>`
+  const rows = people.map((p) => {
+    const on = open === `live:${p.by}`
+    const diffs = p.entries.filter((e) => e.diff).map((e) => diffLines(e.diff)).join('')
+    return `<article class="chg-entry qt-patch qt-live${on ? ' on' : ''}">
+      <button type="button" class="chg-row qt-row" data-qt-patch="live:${esc(p.by)}" aria-expanded="${on}">${avatar(p.by, colorFor(p.by, colorOf(p.by)))}<b>${esc(who(p.by))}</b><span class="qt-msg">${who(p.by) === 'you' ? 'are' : 'is'} changing <code>${esc(path)}</code>, not committed yet</span><span class="chg-kind">live</span><span class="spacer"></span><span class="hint">${esc(shortAgo(p.ts))}</span><span class="chg-delta"><span class="add">+${p.added}</span> <span class="del">−${p.removed}</span></span></button>
+      ${on ? (diffs ? `<pre class="chg-diff">${diffs}</pre>` : '<p class="hint">No lines changed.</p>') : ''}
+    </article>`
+  })
+  for (const p of patches) {
+    const on = open === p.commit
+    const mine = on && shown && shown.files ? shown.files.find((f) => f.path === path) : null
+    rows.push(`<article class="chg-entry qt-patch${on ? ' on' : ''}">
+      <button type="button" class="chg-row qt-row" data-qt-patch="${esc(p.commit)}" aria-expanded="${on}">${avatar(p.by, colorFor(p.by, colorOf(p.by)))}<b>${esc(who(p.by))}</b><span class="qt-no">${p.patch ? `#${esc(p.patch.no)}` : esc(p.short || '')}</span><span class="qt-msg">${esc(p.message)}</span>${fromGit(p, quilt) ? '<span class="chg-kind pulled">from git</span>' : '<span class="chg-kind">merged in Seam</span>'}<span class="spacer"></span><span class="hint">${esc(shortAgo(p.ts))}</span>${mine ? delta(mine) : ''}</button>
+      ${on ? patchBody(shown) : ''}
+    </article>`)
+  }
+  return head + rows.join('')
+}
+
+const delta = (f) => `<span class="chg-delta"><span class="add">+${f.added}</span> <span class="del">−${f.removed}</span></span>`
+
+function patchBody (shown) {
+  if (!shown) return '<p class="hint">Reading the patch…</p>'
+  if (shown.error) return `<p class="hint">${esc(shown.error)}</p>`
+  const files = (shown.files || []).map((f) => `<button type="button" class="chg-file" data-qt-file="${esc(f.path)}"><code>${esc(f.path)}</code></button>${f.binary ? '<span class="hint">binary</span>' : delta(f)}`).join('')
+  return `${files ? `<div class="qt-files">${files}</div>` : ''}${shown.diff ? `<pre class="chg-diff">${diffLines(shown.diff)}</pre>` : '<p class="hint">No lines of this file changed in it.</p>'}`
+}
+
+/**
+ * For each line of `live` (the file now), the index of the same line in `base` (the file on
+ * main, as blamed), or -1 for a line typed since and not committed: common start and end, then
+ * the longest common subsequence of what is between.
+ */
+export function alignLines (base, live) {
+  const out = new Array(live.length).fill(-1)
+  let s = 0
+  while (s < base.length && s < live.length && base[s] === live[s]) { out[s] = s; s++ }
+  let ea = base.length - 1
+  let eb = live.length - 1
+  while (ea >= s && eb >= s && base[ea] === live[eb]) { out[eb] = ea; ea--; eb-- }
+  const a = base.slice(s, ea + 1)
+  const b = live.slice(s, eb + 1)
+  if (!a.length || !b.length) return out
+  if (a.length * b.length > 4_000_000) return out // too far apart to line up: what differs is live
+  const n = a.length
+  const m = b.length
+  const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1))
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1])
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    if (a[i] === b[j]) { out[s + j] = s + i; i++; j++ } else if (dp[i + 1][j] >= dp[i][j + 1]) i++
+    else j++
+  }
+  return out
+}
+
+const MAX_BLAME_LINES = 20000
+
+/**
+ * The Blame tab: runs of lines, each headed by who wrote them, in which patch and how long ago.
+ * Lines typed now and not committed are tinted and say "live".
+ * @param {object} o
+ * @param {string} o.text the file now
+ * @param {object|null} o.blame the relay's answer: { blame }, { missing }, { working }, { error }, or null while it loads
+ * @param {string} [o.liveBy] who is changing the file now (its live lines are theirs)
+ */
+export function blameMarkup ({ text, blame, liveBy = '', who = (n) => n, colorOf = () => null, now = Date.now() }) {
+  if (!blame) return '<div class="fv-note">Reading who wrote each line…</div>'
+  if (blame.error) return `<div class="fv-note">${esc(blame.error)}</div>`
+  if (blame.working) return '<div class="fv-note">Seam is working out who wrote each line. This takes a moment the first time.</div>'
+  if (text == null) return '<div class="fv-note">Reading the file…</div>'
+  const lines = String(text).split('\n')
+  if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
+  const b = blame.blame || { who: [], lines: [] }
+  const map = blame.missing ? lines.map(() => -1) : alignLines(b.lines.map((l) => l[0]), lines)
+  let prev = null
+  const rows = lines.slice(0, MAX_BLAME_LINES).map((l, i) => {
+    const at = map[i]
+    const w = at >= 0 ? b.who[b.lines[at][1]] || null : null
+    const src = at < 0 ? 'live' : w ? w.commit : 'none'
+    const run = src !== prev
+    prev = src
+    let gutter = ''
+    if (run && src === 'live') {
+      gutter = `${liveBy ? avatar(liveBy, colorFor(liveBy, colorOf(liveBy))) : ''}<span class="qt-bw">${esc(liveBy ? who(liveBy) : 'Not committed')}</span><span class="qt-bp">live</span><span class="qt-bt">now</span>`
+    } else if (run && w) {
+      gutter = `${avatar(w.by, colorFor(w.by, colorOf(w.by)))}<span class="qt-bw">${esc(who(w.by))}</span><button type="button" class="qt-bp" data-qt-blame="${esc(w.commit)}" title="Open this patch in History">${w.patch != null ? `#${esc(w.patch)}` : esc(w.short)}</button><span class="qt-bt">${esc(shortAgo(w.at, now))}</span>`
+    }
+    return `<tr class="${[run ? 'qt-run' : '', src === 'live' ? 'qt-live' : ''].filter(Boolean).join(' ')}"><td class="qt-bg">${gutter}</td><td class="ln">${i + 1}</td><td class="lt">${esc(l) || ' '}</td></tr>`
+  })
+  return `<table class="fv-code qt-blame"><tbody>${rows.join('')}</tbody></table>${lines.length > MAX_BLAME_LINES ? `<div class="fv-note">Showing the first ${MAX_BLAME_LINES.toLocaleString()} lines.</div>` : ''}`
+}
+
+/** The plain words of a Seam search, to mark in the hits (not path:, lang: or -excluded terms). */
+export function searchWords (q) {
+  return (String(q).match(/"[^"]+"|\S+/g) || [])
+    .filter((t) => !t.startsWith('-') && !/^[a-z]+:/i.test(t) && t !== 'OR' && !(t.startsWith('/') && t.endsWith('/') && t.length > 1))
+    .map((t) => t.replace(/^"|"$/g, ''))
+    .filter(Boolean)
+}
+
+function marked (text, words) {
+  if (!words.length) return esc(text) || ' '
+  const re = new RegExp(`(${words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi')
+  return String(text).split(re).map((part, i) => i % 2 ? `<mark>${esc(part)}</mark>` : esc(part)).join('') || ' '
+}
+
+/**
+ * A search tab: the field to search again, how much was found, and the hits grouped by file.
+ * Each hit opens its file at its line.
+ * @param {object} o
+ * @param {string} o.q what was searched
+ * @param {object|null} o.result the relay's answer: { search }, { working }, { error }, or null while it loads
+ */
+export function searchMarkup ({ q, result }) {
+  const form = `<form class="qt-sform" data-qt-search-form><span class="qt-sico">${SEARCH_ICON}</span><input class="input" name="q" value="${esc(q)}" aria-label="Search the code on main" autocomplete="off" spellcheck="false"></form>`
+  let body
+  if (!result) body = '<p class="hint qt-scount">Searching main…</p>'
+  else if (result.error) body = `<p class="hint qt-scount">${esc(result.error)}</p>`
+  else if (result.working) body = '<p class="hint qt-scount">Seam is still searching. It answers in a moment.</p>'
+  else if (result.quilt === null) body = '<p class="hint qt-scount">This session is no longer linked to a quilt.</p>'
+  else {
+    const s = result.search
+    const files = new Map()
+    for (const h of s.hits) (files.get(h.path) || files.set(h.path, []).get(h.path)).push(h)
+    const n = s.hits.filter((h) => h.line).length
+    const words = searchWords(q)
+    const count = s.hits.length
+      ? `${n} line${n === 1 ? '' : 's'} in ${files.size} file${files.size === 1 ? '' : 's'} on main${s.more ? ', the first ones' : ''}`
+      : 'Nothing on main matches.'
+    body = `<p class="hint qt-scount">${count}</p>` + [...files].map(([p, hits]) => {
+      const lines = hits.filter((h) => h.line)
+      return `<section class="qt-hit"><div class="qt-hitpath"><button type="button" class="chg-file" data-qt-hit="${esc(p)}"><code>${esc(p)}</code></button><span class="hint">${lines.length ? `${lines.length} line${lines.length === 1 ? '' : 's'}` : 'its name'}</span></div>${lines.length ? `
+      <table class="fv-code"><tbody>${lines.map((h) => `<tr data-qt-hit="${esc(p)}" data-line="${h.line}"><td class="ln">${h.line}</td><td class="lt">${h.symbol ? `<mark>${esc(h.symbol)}</mark>` : marked(h.text || '', words)}</td></tr>`).join('')}</tbody></table>` : ''}</section>`
+    }).join('')
+  }
+  return `<div class="qt-search">${form}${body}</div>`
+}
+
+/** The search tab's label in the tab row. */
+export const searchTabMarkup = (q, on) => `<div class="ws-tab qt-tab${on ? ' on' : ''}" role="tab" aria-selected="${on}" tabindex="0" data-kind="search" data-tab="${esc(q)}" title="${esc(`Search: ${q}`)}">
+      <span class="ico">${SEARCH_ICON}</span><span class="nm">Search: ${esc(q)}</span>
+      <button class="x" data-kind="search" data-close="${esc(q)}" aria-label="Close search ${esc(q)}">${I.x}</button></div>`