heyquilt 0.0.1 → 0.3.106

package/src/ui/fileview.js

@@ -0,0 +1,150 @@
+// A read-only view of one shared file, with who's editing it, its claim, and
+// freshly changed lines highlighted for a few seconds. Its Changes tab lists
+// every change to the file with its diff (diffview.js).
+import { esc, bytes, I, loadingNote } from './common.js'
+import { claimFolder, claimHolder, claimTitle } from './tree.js'
+import { historyMarkup, changeCount } from './diffview.js'
+
+const MAX_LINES = 20000
+
+/**
+ * @param {HTMLElement} el
+ * @param {object} o
+ * @param {object|null} o.file   response from /file, or { missing: true }
+ * @param {object|null} o.meta   tree entry ({ edited, claim })
+ * @param {string} o.me
+ * @param {string|null} o.prevText previous text, to highlight what changed
+ * @param {'file'|'changes'} [o.tab] which tab is shown
+ * @param {object[]|null} [o.history] the file's changes, newest first (null: not loaded yet)
+ * @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, 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
+  const editedText = edited ? `Edited by ${edited.by === me ? 'you' : esc(edited.by)} ${agoLong(edited.ts)}` : 'Not edited recently'
+  const claimText = claim
+    ? `<span class="fv-claim" title="${esc(claimTitle(claim, me))}">${I.lock}Claimed by ${esc(claimHolder(claim, me))}${claimFolder(claim.pattern) !== path ? ` (via <code>${esc(claim.pattern)}</code>)` : ''}${claim.note ? `: ${esc(claim.note)}` : ''}${claim.queue && claim.queue.length ? ` · ${claim.queue.length} waiting` : ''}</span>`
+    : '<span class="hint">Not claimed</span>'
+  let action = ''
+  if (!file || !file.missing) {
+    if (!claim) action = `<button class="btn sm" data-fv="claim">${I.lock}Claim</button>`
+    else if (claim.by === me && !(claim.queue || []).length) action = `<button class="btn sm ghost" data-fv="release" data-pattern="${esc(claim.pattern)}">Release</button>`
+  }
+
+  const banner = `<div class="fv-banner"><span class="fv-path mono">${esc(path)}</span><span class="fv-edited">${editedText}</span>${claimText}<span class="spacer"></span>${action}<span class="tag">Read-only</span></div>`
+  // Refresh who-edited/claim info without re-rendering (and un-highlighting) the code.
+  const existing = el.querySelector('.fv-banner')
+  if (bannerOnly && existing && scroller && scroller.dataset.path === path) { existing.outerHTML = banner; return }
+
+  let body
+  if (tab === 'changes') body = history ? `<div class="fv-history">${historyMarkup(history, { ...people, summary })}</div>` : '<div class="fv-note">Reading what changed…</div>'
+  else if (!file) body = `<div class="fv-note">${loadingNote()}</div>`
+  else if (file.missing) body = `<div class="fv-note">${file.deleted ? 'This file was deleted.' : 'This file isn’t in the session. It may be too large to sync, or ignored.'}</div>`
+  else if (file.binary) body = `<div class="fv-note">${I.file} Binary file · ${bytes(file.size)}. Only text files can be shown here.</div>`
+  else {
+    const lines = file.text.split('\n')
+    if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
+    const changed = prevText != null && prevText !== file.text ? changedLines(prevText.split('\n'), lines) : new Set()
+    const shown = lines.slice(0, MAX_LINES)
+    body = `<table class="fv-code"><tbody>${shown.map((l, i) =>
+      `<tr${changed.has(i) ? ' class="chg"' : ''}><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}${tabsMarkup(tab, history, summary)}<div class="fv-scroll" data-path="${esc(path)}" data-tab="${tab}">${body}</div></div>`
+  const s = el.querySelector('.fv-scroll')
+  if (scroller && scroller.dataset.path === path && scroller.dataset.tab !== s.dataset.tab) { s.scrollTop = 0; return } // the other tab starts at the top
+  const first = s.querySelector('tr.chg')
+  if (first && prevText != null) {
+    // Bring the change into view if it's off screen.
+    s.scrollTop = keep
+    const top = first.offsetTop
+    if (top < s.scrollTop || top > s.scrollTop + s.clientHeight - 40) s.scrollTop = Math.max(0, top - 80)
+  } else {
+    s.scrollTop = keep
+  }
+}
+
+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>
+  </div>`
+
+/** Updates the tabs (the Changes count) without re-rendering, so freshly changed lines stay lit. */
+export function renderFileTabs (el, { tab, history, summary = null }) {
+  const tabs = el.querySelector('.fv-tabs')
+  if (tabs) tabs.outerHTML = tabsMarkup(tab, history, summary)
+}
+
+function agoLong (ts) {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000))
+  if (s < 5) return 'just now'
+  if (s < 60) return `${s}s ago`
+  if (s < 3600) return `${Math.round(s / 60)}m ago`
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`
+  return new Date(ts).toLocaleDateString()
+}
+
+/** Indexes of lines in `b` that are new or changed compared with `a`. */
+export function changedLines (a, b) {
+  const out = new Set()
+  let start = 0
+  while (start < a.length && start < b.length && a[start] === b[start]) start++
+  let endA = a.length - 1
+  let endB = b.length - 1
+  while (endA >= start && endB >= start && a[endA] === b[endB]) { endA--; endB-- }
+  if (endB < start) return out // only deletions
+  const midA = a.slice(start, endA + 1)
+  const midB = b.slice(start, endB + 1)
+  if (midA.length * midB.length > 1_000_000) {
+    for (let i = start; i <= endB; i++) out.add(i)
+    return out
+  }
+  // Longest common subsequence over the changed middle section.
+  const n = midA.length
+  const m = midB.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] = midA[i] === midB[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1])
+    }
+  }
+  let i = 0
+  let j = 0
+  while (j < m) {
+    if (i < n && midA[i] === midB[j]) { i++; j++ } else if (i < n && dp[i + 1][j] >= dp[i][j + 1]) i++
+    else { out.add(start + j); j++ }
+  }
+  return out
+}

package/src/ui/git-rule.js

@@ -0,0 +1,60 @@
+// Git for everyone's one control (docs/superpowers/specs/2026-10-17-git-for-everyone.md, mockup option A):
+// off for everyone, or on with agents pushing to branches of their own or to any branch. The same
+// segmented control in the session's settings, a workspace's and an org's GitHub settings (the app) and a
+// team's and an org's settings (the website, which imports this file). A rule above (org, team, workspace)
+// is a ceiling: the choices above it are greyed, with who set it and who changes it. Pure: no DOM.
+
+export const GIT_SEGMENTS = [
+  { value: 'off', head: 'Off', sub: 'for everyone' },
+  { value: 'branches', head: 'On', sub: 'agents: own branches' },
+  { value: 'any', head: 'On', sub: 'agents: any branch' }
+]
+const RANK = { off: 0, branches: 1, any: 2 }
+const UP_TO = { off: 'git off', branches: 'up to own branches', any: 'up to any branch' }
+const LEVEL = { org: 'Org', team: 'Team', workspace: 'Workspace' }
+const FIXER = {
+  workspace: 'Its admins change that in its GitHub settings.',
+  org: 'Its admins change that in the org\'s settings.',
+  team: 'Whoever may update the org\'s teams changes that in the team\'s settings, on the website.'
+}
+
+/** "Workspace Platform", "Org Acme", "Team Night shift" (or "The workspace" without a name). */
+export function ruleWho (rule) {
+  const level = LEVEL[rule && rule.by] || 'Workspace'
+  return rule && rule.name ? `${level} ${rule.name}` : `The ${level.toLowerCase()}`
+}
+
+/**
+ * The control's state. `value`: the level's own choice ('' when it sets nothing), or for a session what
+ * holds. `rule`: { by, name, mode } from the level above that holds, or null. `canEdit`: false greys it all.
+ */
+export function gitControl ({ value = '', rule = null, canEdit = true } = {}) {
+  const ceiling = rule && rule.mode in RANK ? rule.mode : null
+  const above = (v) => ceiling !== null && RANK[v] > RANK[ceiling]
+  const holds = value in RANK ? (above(value) ? ceiling : value) : ''
+  const segments = GIT_SEGMENTS.map((s) => ({ ...s, on: s.value === holds, disabled: !canEdit || above(s.value) }))
+  if (!ceiling) return { segments, rulePill: '', lockedHint: '' }
+  const who = ruleWho(rule)
+  const whoLower = who.charAt(0).toLowerCase() + who.slice(1)
+  const allows = whoLower.startsWith('the ') ? `what ${whoLower} allows` : `what the ${whoLower} allows`
+  const fixer = FIXER[rule.by] || FIXER.workspace
+  const lockedHint = ceiling === 'off'
+    ? `Git on is above ${allows}: it turned git off. ${fixer}`
+    : ceiling === 'branches' ? `"Any branch" is above ${allows}. ${fixer}` : ''
+  return { segments, rulePill: `${who}: ${UP_TO[ceiling]}`, lockedHint }
+}
+
+/** The status line ("Git is on for everyone here, through …"), its first clause bold as in the mockup. */
+export function gitStatusParts (words) {
+  const s = String(words || '')
+  const m = s.match(/^(.*?)(, | \(|: )/)
+  return m ? { strong: m[1], rest: s.slice(m[1].length) } : { strong: s, rest: '' }
+}
+
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+
+/** The control as the app draws it: `attr` is the data attribute each button carries its value in. */
+export function gitSegHtml (model, { attr, label }) {
+  return `<div class="seg" role="group" aria-label="${esc(label)}">${model.segments.map((s) =>
+    `<button type="button"${s.on ? ' class="on"' : ''} ${attr}="${s.value}" aria-pressed="${s.on}"${s.disabled ? ' disabled' : ''}><b>${esc(s.head)}</b>${esc(s.sub)}</button>`).join('')}</div>`
+}