@leftoff/cli 0.9.17-beta.4 → 0.9.17-beta.6

package/ui/navrail.js

@@ -0,0 +1,99 @@
+// 0.9.18 The left nav on every screen (feedback, Oct 28: "it seems weird that I
+// need to click on Board first to see the left hand nav").
+//
+// From 700px the rail stays beside every page, full screen and the walkthrough
+// included. Two widths: expanded (84px, icon over label, the rail as it always
+// was) and collapsed (56px, icons with a tip). The toggle at the rail's foot,
+// ⌘B, or [ when you're not typing, switches them, remembered on this device. When the
+// room is short (under 1100px, or a full-screen chat that would get narrower
+// than NAV_CHAT_MIN beside the session panel) the rail collapses for that view
+// only: your saved choice is untouched and comes back when there's room.
+//
+// Under 700px there's no rail: a menu button (and, in a Home Screen app or a
+// non-Safari browser, a swipe in from the left edge) opens the nav as a drawer
+// over the page. Safari's own back-swipe owns that edge in the browser, so there
+// the button is the way in.
+//
+// Pure functions and a tiny store (the unit tests use a fake storage); app.js wires them.
+
+export const NAV_KEY = 'lo-nav-v1' // '1' collapsed, '0' expanded (an explicit choice); none: expanded
+export const RAIL_MIN = 700 // from here the rail; under it the phone's bar and the drawer
+export const RAIL_ROOMY = 1100 // under this the rail is collapsed whatever you chose
+export const RAIL_W_OPEN = 84, RAIL_W_SLIM = 56
+export const NAV_CHAT_MIN = 560 // a full-screen chat keeps at least this beside an expanded rail
+export const EDGE_PX = 20 // a drawer swipe starts this close to the left edge
+export const SWIPE_MIN = 48 // and travels at least this far, mostly sideways
+
+export function createNavStore(storage) {
+  const stored = () => { try { const v = storage ? storage.getItem(NAV_KEY) : null; return v === '1' || v === '0' ? v : null } catch { return null } }
+  return {
+    collapsed: () => stored() === '1',
+    explicit: () => stored() != null,
+    set(collapsed) { try { storage && storage.setItem(NAV_KEY, collapsed ? '1' : '0') } catch {} },
+    toggle() { const c = stored() !== '1'; this.set(c); return c },
+  }
+}
+
+// What the rail shows now. width: the window's CSS width; saved: your choice
+// (true = collapsed); side: the full-screen session panel's width when it's open
+// beside the chat (0 when there's none, or it's a rail / collapsed).
+// → { rail, collapsed, auto } — auto: collapsed by the room, not by you.
+export function navState({ width = 0, saved = false, side = 0 } = {}) {
+  const w = Number(width) || 0
+  if (w < RAIL_MIN) return { rail: false, collapsed: false, auto: false }
+  const tight = w < RAIL_ROOMY || (side > 0 && w - RAIL_W_OPEN - side < NAV_CHAT_MIN)
+  if (saved) return { rail: true, collapsed: true, auto: false }
+  return { rail: true, collapsed: tight, auto: tight }
+}
+
+// The toggle's words for the state shown.
+export function toggleWords({ collapsed = false, auto = false } = {}, key = '⌘B') {
+  if (auto) return { label: 'Expand the sidebar', tip: 'Not enough room to expand here', icon: 'panel-left-open' }
+  return collapsed
+    ? { label: 'Expand the sidebar', tip: 'Expand sidebar (' + key + ')', icon: 'panel-left-open' }
+    : { label: 'Collapse the sidebar', tip: 'Collapse sidebar (' + key + ')', icon: 'panel-left-close' }
+}
+
+// ⌘B (Ctrl+B off a Mac) toggles the rail from anywhere, the composer included,
+// but not inside the terminal (Ctrl+B is tmux's); [ does too when you're not typing.
+// (⌘\ is the session panel's, ⌘⇧[ ] the tabs'.)
+export function isNavKey(ev, { typing = false, term = false, mac = true } = {}) {
+  if (!ev || ev.altKey) return false
+  const mod = mac ? ev.metaKey && !ev.ctrlKey : ev.ctrlKey && !ev.metaKey
+  if (mod && !ev.shiftKey && (ev.key === 'b' || ev.key === 'B')) return !term
+  return ev.key === '[' && !ev.metaKey && !ev.ctrlKey && !typing
+}
+export const navKeyLabel = (mac = true) => (mac ? '⌘B' : 'Ctrl+B')
+
+// Mobile Safari in the browser (not a Home Screen app): its back-swipe owns the left edge.
+export function safariOwnsEdge(ua = '', standalone = false) {
+  const s = String(ua)
+  const ios = /iP(hone|ad|od)/.test(s) || (/Macintosh/.test(s) && /Mobile/.test(s))
+  return ios && !standalone && /Safari/.test(s) && !/CriOS|FxiOS|EdgiOS/.test(s)
+}
+
+// A touch that starts this close to the left edge may open the drawer.
+export const edgeStart = (x, edge = EDGE_PX) => Number(x) >= 0 && Number(x) <= edge
+// What a finished swipe means: 'open' (rightwards from the edge), 'close'
+// (leftwards on the open drawer) or null (too short, or mostly up and down).
+export function swipeIntent(dx, dy, open) {
+  const x = Number(dx) || 0, y = Number(dy) || 0
+  if (Math.abs(x) < SWIPE_MIN || Math.abs(x) < Math.abs(y) * 1.5) return null
+  if (!open && x > 0) return 'open'
+  if (open && x < 0) return 'close'
+  return null
+}
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// The drawer: the nav's destinations as one list. items: [{ href, route, label, svg, on, count }]
+// (svg is the nav's own inline icon markup).
+export function drawerHtml(items = [], { title = 'Leftoff' } = {}) {
+  const row = (it) => '<a class="nd-item' + (it.on ? ' on' : '') + '" href="' + esc(it.href) + '"' + (it.route ? ' data-route="' + esc(it.route) + '"' : '') + (it.on ? ' aria-current="page"' : '') + '>' +
+    (it.svg || '') + '<span class="nd-lbl">' + esc(it.label) + '</span>' + (it.on ? '<span class="nd-cur">Current</span>' : '') +
+    (it.count ? '<span class="nd-n" aria-label="' + esc(it.count + ' waiting') + '">' + esc(String(it.count)) + '</span>' : '') + '</a>'
+  return '<div class="nd-head"><img src="favicon.svg" class="logo" alt="" width="22" height="22"><span class="nd-title">' + esc(title) + '</span>' +
+    '<button type="button" class="nd-x" data-nd-close aria-label="Close the menu" data-tip="Close (Esc)"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div>' +
+    '<nav class="nd-list" aria-label="Sections">' + items.map(row).join('') + '</nav>'
+}

package/ui/semdiff.js

@@ -19,6 +19,31 @@ const GROUP_ICON = { repeated: 'repeat', tests: 'list-checks', mechanical: 'laye
 const n0 = (n) => Number(n || 0).toLocaleString('en-US')
 const plural = (n, w, ws) => n0(n) + ' ' + (n === 1 ? w : ws || w + 's')
 
+// 0.9.18 (Joel): a file's status the way GitHub draws it, by shape: a square with
+// + (added), a dot (modified), − (deleted) or an arrow (renamed), with a word in
+// its tip and label. Colour helps but is never the only signal.
+export const FILE_STATUS = {
+  added: { word: 'Added', icon: 'square-plus' },
+  modified: { word: 'Modified', icon: 'square-dot' },
+  deleted: { word: 'Deleted', icon: 'square-minus' },
+  renamed: { word: 'Renamed', icon: 'square-arrow-right' },
+}
+export function statusWord(f) {
+  const st = FILE_STATUS[f && f.status] ? f.status : 'modified'
+  return st === 'renamed' && f.oldPath ? 'Renamed from ' + f.oldPath : FILE_STATUS[st].word
+}
+export function statusHtml(f, { esc, icon }) {
+  const st = FILE_STATUS[f && f.status] ? f.status : 'modified'
+  const w = statusWord(f)
+  return '<span class="wt-fst wt-fst-' + st + '" data-st="' + st + '" data-tip="' + esc(w) + '" role="img" aria-label="' + esc(w) + '">' + icon(FILE_STATUS[st].icon) + '</span>'
+}
+// path -> { status, oldPath } from the answer's own Files list (git's new / deleted file mode, rename)
+export function statusMap(data) {
+  const m = new Map()
+  for (const f of (data && Array.isArray(data.files) ? data.files : [])) m.set(f.path, f)
+  return m
+}
+
 // The quiet count on a tab and a board card: an eye and a number, only when there's something.
 export function eyeCountHtml(n, { esc }) {
   n = Number(n) || 0
@@ -126,26 +151,28 @@ const FM_KEY = 'lo-wt-fm:'
 export function fmClosed(fp) { try { return new Set(JSON.parse(sessionStorage.getItem(FM_KEY + fp) || '[]')) } catch { return new Set() } }
 export function fmToggle(fp, key, closed) { try { const s = fmClosed(fp); if (closed) s.add(key); else s.delete(key); sessionStorage.setItem(FM_KEY + fp, JSON.stringify([...s])) } catch {} }
 const LOOK_TIP = 'Worth a close look: the walkthrough flags this file'
-function fmFileHtml(it, { esc, icon, cur, depth }) {
-  return '<a class="wt-fm-i' + (it.step === cur ? ' cur' : '') + '" href="#" data-action="wt-go" data-step="' + esc(it.step) + '" data-path="' + esc(it.file) + '"' + (depth ? ' data-d="' + Math.min(depth, 6) + '"' : '') + ' aria-label="' + esc(it.file + ', step ' + it.n + (it.look ? ', worth a close look' : '')) + '">' +
+function fmFileHtml(it, { esc, icon, cur, depth, stat }) {
+  const f = stat && stat.get(it.file)
+  return '<a class="wt-fm-i' + (it.step === cur ? ' cur' : '') + '" href="#" data-action="wt-go" data-step="' + esc(it.step) + '" data-path="' + esc(it.file) + '"' + (depth ? ' data-d="' + Math.min(depth, 6) + '"' : '') + ' aria-label="' + esc(it.file + ', step ' + it.n + (f ? ', ' + statusWord(f).toLowerCase() : '') + (it.look ? ', worth a close look' : '')) + '">' +
     '<span class="wt-fm-n" data-tip="Step ' + esc(String(it.n)) + ' of the walkthrough">' + it.n + '</span><span class="wt-fm-f">' + esc(it.base) + '</span>' +
-    (it.look ? '<span class="wt-fm-x" data-tip="' + LOOK_TIP + '">' + icon('eye') + '</span>' : '') + '</a>'
+    (it.look ? '<span class="wt-fm-x" data-tip="' + LOOK_TIP + '">' + icon('eye') + '</span>' : '') + (f ? statusHtml(f, { esc, icon }) : '') + '</a>'
 }
-function fmDirHtml(d, { esc, icon, cur, depth, closed, sec }) {
+function fmDirHtml(d, { esc, icon, cur, depth, closed, sec, stat, fileHtml = fmFileHtml }) {
   const key = sec + ':' + d.path
   const shut = closed.has(key)
   let h = '<div class="wt-fm-d" data-key="' + esc(key) + '"><button type="button" class="wt-fm-dr" data-action="wt-fm-dir" data-key="' + esc(key) + '" aria-expanded="' + !shut + '"' + (depth ? ' data-d="' + Math.min(depth, 6) + '"' : '') + '>' +
     icon(shut ? 'chevron-right' : 'chevron-down') + icon('folder') + '<span class="wt-fm-dp"' + (d.name.length > 26 ? ' data-tip="' + esc(d.path) + '"' : '') + '>' + esc(midTrunc(d.name, 26)) + '</span><span class="wt-fm-dc" aria-label="' + esc(plural(countFiles(d), 'file')) + '">' + countFiles(d) + '</span></button>'
   h += '<div class="wt-fm-dk" role="group"' + (shut ? ' hidden' : '') + '>'
-  for (const c of d.dirs) h += fmDirHtml(c, { esc, icon, cur, depth: depth + 1, closed, sec })
-  for (const f of d.files) h += fmFileHtml(f, { esc, icon, cur, depth: depth + 1 })
+  for (const c of d.dirs) h += fmDirHtml(c, { esc, icon, cur, depth: depth + 1, closed, sec, stat, fileHtml })
+  for (const f of d.files) h += fileHtml(f, { esc, icon, cur, depth: depth + 1, stat })
   return h + '</div></div>'
 }
 function fileMapHtml(data, { esc, icon, cur }) {
   const anyLook = (data.fileMap || []).some((sec) => sec.items.some((x) => x.look))
-  let h = '<nav class="wt-fm" aria-label="Files in this change"><div class="wt-fm-h">Files <span class="faint">' + n0(data.stats.files) + '</span>' +
+  let h = '<nav class="wt-fm wt-side" aria-label="Files in this change"><div class="wt-fm-h">Files <span class="faint">' + n0(data.stats.files) + '</span>' +
     (anyLook ? '<span class="wt-fm-hint">' + icon('eye') + '= worth a close look</span>' : '') + '</div>'
   const closed = fmClosed(data.fingerprint || '')
+  const stat = statusMap(data)
   for (const sec of data.fileMap || []) {
     const count = sec.items.reduce((a, x) => a + (x.count || 1), 0)
     h += '<div class="wt-fm-s"><span class="wt-fm-st"><i class="wt-sw wt-bk-' + esc(sec.kind) + '" aria-hidden="true"></i>' + esc(sec.label) + '</span><span class="faint">' + count + '</span></div>'
@@ -156,10 +183,10 @@ function fileMapHtml(data, { esc, icon, cur }) {
         // one folder: say it once
         const d = t.dirs[0]
         h += '<div class="wt-fm-sub mono"' + (d.path.length > 30 ? ' data-tip="' + esc(d.path) + '"' : '') + '>' + icon('folder') + '<span>' + esc(midTrunc(d.path, 30)) + '/</span></div>'
-        for (const f of d.files) h += fmFileHtml(f, { esc, icon, cur, depth: 0 })
+        for (const f of d.files) h += fmFileHtml(f, { esc, icon, cur, depth: 0, stat })
       } else {
-        for (const d of t.dirs) h += fmDirHtml(d, { esc, icon, cur, depth: 0, closed, sec: sec.kind })
-        for (const f of t.files) h += fmFileHtml(f, { esc, icon, cur, depth: 0 })
+        for (const d of t.dirs) h += fmDirHtml(d, { esc, icon, cur, depth: 0, closed, sec: sec.kind, stat })
+        for (const f of t.files) h += fmFileHtml(f, { esc, icon, cur, depth: 0, stat })
       }
     }
     for (const it of sec.items) {
@@ -198,7 +225,8 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
     '<div class="wt-ctl">' + scopesHtml(data, scope, { esc, icon, sid }) +
     '<div class="wt-seg wt-seg-sm" role="group" aria-label="View"><button type="button" data-action="wt-view" data-view="story" aria-pressed="' + (view === 'story') + '">Story</button><button type="button" data-action="wt-view" data-view="files" aria-pressed="' + (view === 'files') + '">Files</button></div>' +
     // 0.9.18 slides or one long page (kept per device)
-    (ok && view === 'story' && (data.steps || []).length ? '<button type="button" class="btn wt-deckt" data-action="wt-deck" aria-pressed="' + (ui.deck === false) + '" data-tip="' + (ui.deck === false ? 'One step at a time, as slides' : 'Every step on one long page') + '" aria-label="' + (ui.deck === false ? 'Slides' : 'Show all') + '">' + icon(ui.deck === false ? 'layers' : 'list-checks') + '<span class="wt-deckt-l">' + (ui.deck === false ? 'Slides' : 'Show all') + '</span></button>' : '') +
+    // (Joel: the icon needs a tip) what a click does, and how it's showing now
+    (ok && view === 'story' && (data.steps || []).length ? '<button type="button" class="btn wt-deckt" data-action="wt-deck" aria-pressed="' + (ui.deck === false) + '" data-tip="' + (ui.deck === false ? 'Show as slides, one step at a time · now: all steps on one page' : 'Show all steps on one page · now: slides') + '" aria-label="' + (ui.deck === false ? 'Show as slides' : 'Show all steps on one page') + '">' + icon(ui.deck === false ? 'gallery-horizontal' : 'rows-3') + '<span class="wt-deckt-l">' + (ui.deck === false ? 'Slides' : 'Show all') + '</span></button>' : '') +
     exportsHtml(ok, ui, { icon }) + '</div>' +
     '<button type="button" class="wt-x" data-action="wt-close" data-id="' + esc(sid) + '" aria-label="Close the walkthrough">' + icon('x') + '</button></div>'
   // which model wrote it (Settings → Models → Walk me through it picks it)
@@ -253,16 +281,20 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
         groups.map((g) => groupHtml(g, { esc, icon, open: ui.groups && ui.groups.has(g.kind) })).join('')
     }
     body += '<p class="wt-cov">' + icon('circle-check') + 'Every changed line is in a step or a group: ' + n0(data.coverage.covered) + ' of ' + n0(data.coverage.total) + '.</p>'
-  } else if (data && Array.isArray(data.files) && data.files.length && !ui.loading) {
+  }
+  let fl = ''
+  if (!(ok && view === 'story') && data && Array.isArray(data.files) && data.files.length && !ui.loading) {
+    if (data.files.length > 1) { fl = filesListHtml(data, { esc, icon }); body += filesListHtml(data, { esc, icon, mobile: true }) }
     body += filesHtml(data.files, { esc, icon })
   }
-  const fm = big ? fileMapHtml(data, { esc, icon, cur: ui.cur }) : ''
+  const fm = big ? fileMapHtml(data, { esc, icon, cur: ui.cur }) : fl
   const dock = '<form class="wt-ask" data-action-form="wt-ask" data-id="' + esc(sid) + '"><label class="lo-vh" for="wtAsk">Ask about this change</label><input id="wtAsk" class="wt-ask-in" type="text" autocomplete="off" placeholder="Ask about this change…" value="' + esc(ui.ask || '') + '"><button type="submit" class="wt-ask-b" aria-label="Put the question in the chat" data-tip="Into the chat box">' + icon('arrow-up') + '</button></form>'
   const pnav = ok && view === 'story' && (data.steps || []).length ? '<div class="wt-pnav"><button type="button" class="btn" data-action="wt-step" data-dir="-1">' + icon('chevron-left') + 'Back</button><span class="faint" id="wtPnavN">' + stepPos(data.steps, ui) + '</span><button type="button" class="btn" data-action="wt-step" data-dir="1">Next' + icon('chevron-right') + '</button></div>' : ''
   const dk = deck ? deckSlides(data, ui) : null
-  return '<div class="wt' + (fm ? ' wt-big' : '') + (deck ? ' wt-deckmode' : '') + '" id="wt" data-sid="' + esc(sid) + '" role="region" aria-labelledby="wtTitle"><div class="wt-grab" aria-hidden="true"></div>' +
+  return '<div class="wt' + (big ? ' wt-big' : fl ? ' wt-fls' : '') + (deck ? ' wt-deckmode' : '') + '" id="wt" data-sid="' + esc(sid) + '" role="region" aria-labelledby="wtTitle"><div class="wt-grab" aria-hidden="true"></div>' +
     (deck ? '<div class="wt-dprog" aria-hidden="true"><i id="wtDprog" data-p="' + Math.round(((dk.cur + 1) / dk.slides.length) * 1000) / 10 + '"></i></div>' : '') +
-    '<div class="wt-scroll" id="wtScroll"><div class="wt-hw">' + fm + '<div class="wt-in">' + h + body + '</div></div></div>' + (deck ? deckNavHtml(dk, { esc, icon, reviewed }) : pnav) + dock + '</div>'
+    // 0.9.18 (Joel): with a file list on the left, the list and the reading each scroll on their own
+    (fm ? '<div class="wt-2p">' + fm : '') + '<div class="wt-scroll" id="wtScroll"><div class="wt-hw"><div class="wt-in">' + h + body + '</div></div></div>' + (fm ? '</div>' : '') + (deck ? deckNavHtml(dk, { esc, icon, reviewed }) : pnav) + dock + '</div>'
 }
 
 // 0.9.18 the walkthrough as slides (Joel: "almost a slide show, each slide was
@@ -318,14 +350,14 @@ function deckHtml(data, ui, { esc, icon, reviewed, sid }) {
 // the bar under the slides: ← Prev · the current title · numbered dots · 3 / 12 · Next →
 export function deckNavHtml({ slides, cur }, { esc, icon, reviewed = new Set() }) {
   const dot = (s, i) => '<button type="button" class="wt-dot' + (i === cur ? ' cur' : '') + (s.step && reviewed.has(s.step.id) ? ' done' : '') + '" data-action="wt-slide" data-slide="' + i + '"' + (s.step ? ' data-step="' + esc(s.step.id) + '"' : '') +
-    ' aria-label="' + esc((i === 0 ? 'Overview' : s.step ? 'Step ' + s.step.n + ': ' + s.title : s.title) + (s.step && reviewed.has(s.step.id) ? ', reviewed' : '')) + '"' + (i === cur ? ' aria-current="step"' : '') + '>' +
+    ' aria-label="' + esc((i === 0 ? 'Overview' : s.step ? 'Step ' + s.step.n + ': ' + s.title : s.title) + (s.step && reviewed.has(s.step.id) ? ', reviewed' : '')) + '" data-tip="' + esc(i === 0 ? 'Overview' : s.step ? 'Step ' + s.step.n + ': ' + s.title : s.title) + '"' + (i === cur ? ' aria-current="step"' : '') + '>' +
     (i === 0 ? icon('route') : s.step ? '<span class="wt-dot-n">' + s.step.n + '</span>' : icon('layers')) + '<span class="wt-dot-ok" aria-hidden="true">' + icon('check') + '</span></button>'
   return '<nav class="wt-dnav" aria-label="Slides">' +
-    '<button type="button" class="btn wt-dprev" data-action="wt-dstep" data-dir="-1" aria-label="Previous slide"' + (cur === 0 ? ' disabled' : '') + '>' + icon('chevron-left') + '<span class="wt-dl">Prev</span></button>' +
+    '<button type="button" class="btn wt-dprev" data-action="wt-dstep" data-dir="-1" aria-label="Previous slide" data-tip="Previous slide (←)"' + (cur === 0 ? ' disabled' : '') + '>' + icon('chevron-left') + '<span class="wt-dl">Prev</span></button>' +
     '<span class="wt-dnow" id="wtDnow">' + esc(slides[cur].title) + '</span>' +
     '<div class="wt-dots" id="wtDots" role="group" aria-label="Go to a slide">' + slides.map(dot).join('') + '</div>' +
     '<span class="wt-dcount" id="wtDcount" aria-live="polite">' + (cur + 1) + ' / ' + slides.length + '</span>' +
-    '<button type="button" class="btn wt-dnext" data-action="wt-dstep" data-dir="1" aria-label="Next slide"' + (cur === slides.length - 1 ? ' disabled' : '') + '><span class="wt-dl">Next</span>' + icon('chevron-right') + '</button></nav>'
+    '<button type="button" class="btn wt-dnext" data-action="wt-dstep" data-dir="1" aria-label="Next slide" data-tip="Next slide (→)"' + (cur === slides.length - 1 ? ' disabled' : '') + '><span class="wt-dl">Next</span>' + icon('chevron-right') + '</button></nav>'
 }
 export function stepPos(steps, ui) {
   const vis = visibleSteps(steps || [], ui.filter)
@@ -336,12 +368,33 @@ export function stepPos(steps, ui) {
 export function filesHtml(files, { esc, icon }) {
   const open = files.length <= 10
   return '<div class="wt-files-v">' + files.map((f, i) => {
-    const what = f.hidden ? 'not shown (keys and env files never are)' : f.binary ? 'binary file' : f.generated ? 'generated or lockfile · ' + plural(f.add + f.del, 'line') : ''
-    return '<details class="wt-file" data-file-i="' + i + '"' + (open && !what ? ' open' : '') + '><summary>' + icon('chevron-right', 'ic wt-g-chev') + '<span class="mono wt-file-p">' + esc(f.path) + '</span>' + (f.oldPath ? '<span class="faint">from ' + esc(f.oldPath) + '</span>' : '') +
+    const what = f.hidden ? 'not shown (keys and env files never are)' : f.binary ? 'binary file' : f.generated ? 'generated or lockfile · ' + plural(f.add + f.del, 'line') : !f.lines ? (f.status === 'renamed' ? 'renamed, nothing changed inside' : 'no lines changed') : ''
+    return '<details class="wt-file" id="wt-f-' + i + '" data-file-i="' + i + '"' + (open && !what ? ' open' : '') + '><summary>' + icon('chevron-right', 'ic wt-g-chev') + statusHtml(f, { esc, icon }) + '<span class="mono wt-file-p">' + esc(f.path) + '</span>' + (f.oldPath ? '<span class="faint wt-file-o">from ' + esc(f.oldPath) + '</span>' : '') +
       '<span class="wt-file-n"><span class="wt-add">+' + n0(f.add) + '</span> <span class="wt-del">−' + n0(f.del) + '</span></span></summary>' +
       (what ? '<p class="faint wt-g-p">' + esc(what) + '</p>' : '<div class="wt-snip-d" data-file="' + i + '"></div>' + (f.clipped ? '<p class="faint wt-g-p">… too big to show all of it here</p>' : '')) + '</details>'
   }).join('') + '</div>'
 }
+// 0.9.18 (Joel): the Files view's list of files, beside the diff on a wide screen (each
+// scrolls on its own) and folded above it on a phone. Folders like the file map;
+// each file with its status by shape and its +/− count; a click opens that file's diff.
+function flFileHtml(it, { esc, icon, depth }) {
+  const f = it.f
+  return '<a class="wt-fm-i wt-fl-i" href="#" data-action="wt-file" data-i="' + it.i + '"' + (depth ? ' data-d="' + Math.min(depth, 6) + '"' : '') + ' aria-label="' + esc(f.path + ', ' + statusWord(f).toLowerCase() + ', ' + f.add + ' added, ' + f.del + ' removed') + '">' +
+    statusHtml(f, { esc, icon }) + '<span class="wt-fm-f">' + esc(it.base) + '</span><span class="wt-fl-n" aria-hidden="true"><span class="wt-add">+' + n0(f.add) + '</span><span class="wt-del">−' + n0(f.del) + '</span></span></a>'
+}
+export function filesListHtml(data, { esc, icon, mobile = false }) {
+  const files = (data && data.files) || []
+  const items = files.map((f, i) => ({ file: f.path, n: 0, i, f }))
+  const t = folderTree(items)
+  const closed = fmClosed(data.fingerprint || '')
+  let rows = ''
+  for (const d of t.dirs) rows += fmDirHtml(d, { esc, icon, depth: 0, closed, sec: 'files', fileHtml: flFileHtml })
+  for (const f of t.files) rows += flFileHtml(f, { esc, icon, depth: 0 })
+  const add = files.reduce((a, f) => a + (f.add || 0), 0), del = files.reduce((a, f) => a + (f.del || 0), 0)
+  const head = 'Files <span class="faint">' + n0(files.length) + '</span><span class="wt-fl-tot"><span class="wt-add">+' + n0(add) + '</span><span class="wt-del">−' + n0(del) + '</span></span>'
+  if (mobile) return '<details class="wt-fl-m"><summary>' + icon('chevron-right', 'ic wt-g-chev') + head + '</summary><nav class="wt-fm wt-fl" aria-label="Files in this change">' + rows + '</nav></details>'
+  return '<nav class="wt-fm wt-fl wt-side" aria-label="Files in this change"><div class="wt-fm-h">' + head + '</div>' + rows + '</nav>'
+}
 
 // Draw the snippets (diff-view.js's renderDiff) and put each callout under its
 // line, the line marked in the gutter. Drawn nodes are kept per answer, so a