@davmash/bygone 0.8.6 → 0.8.7

package/out/standalone-main.js

@@ -8772,6 +8772,20 @@ var require_present = __commonJS({
       let presenterIndexTemplate;
       const server = createServer((request, response) => {
         const requestUrl = new URL(request.url || "/", "http://127.0.0.1");
+        if (requestUrl.pathname === "/narration/claim") {
+          if (request.method !== "POST") {
+            respond(response, 405, "Method not allowed");
+            return;
+          }
+          if (!isSameOriginLoopbackRequest(request)) {
+            respond(response, 403, "Forbidden");
+            return;
+          }
+          options.onNarrationClaim?.();
+          response.writeHead(204, { "Cache-Control": "no-store" });
+          response.end();
+          return;
+        }
         if (requestUrl.pathname === "/tour.json") {
           response.writeHead(200, {
             "Content-Type": "application/json; charset=utf-8",
@@ -8897,6 +8911,17 @@ var require_present = __commonJS({
       }
       response.end(message);
     }
+    function isSameOriginLoopbackRequest(request) {
+      const origin = request.headers.origin;
+      const host = request.headers.host;
+      if (typeof origin !== "string" || typeof host !== "string") return false;
+      try {
+        const parsed = new URL(origin);
+        return parsed.protocol === "http:" && parsed.hostname === "127.0.0.1" && parsed.host === host;
+      } catch {
+        return false;
+      }
+    }
     function escapeHtml(text) {
       return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
     }
@@ -8951,6 +8976,116 @@ var require_launchArgs = __commonJS({
   }
 });
 
+// standalone/windowState.js
+var require_windowState = __commonJS({
+  "standalone/windowState.js"(exports2, module2) {
+    "use strict";
+    var fs8 = require("fs");
+    var path9 = require("path");
+    var WINDOW_STATE_VERSION = 1;
+    function readWindowState2(filePath) {
+      try {
+        return normalizeWindowState(JSON.parse(fs8.readFileSync(filePath, "utf8")));
+      } catch {
+        return null;
+      }
+    }
+    function writeWindowState2(filePath, state) {
+      const normalized = normalizeWindowState(state);
+      if (!normalized) {
+        throw new Error("Cannot save invalid Bygone window state.");
+      }
+      fs8.mkdirSync(path9.dirname(filePath), { recursive: true });
+      const temporaryPath = `${filePath}.${process.pid}.tmp`;
+      try {
+        fs8.writeFileSync(temporaryPath, `${JSON.stringify(normalized, null, 2)}
+`, "utf8");
+        fs8.renameSync(temporaryPath, filePath);
+      } finally {
+        try {
+          fs8.unlinkSync(temporaryPath);
+        } catch {
+        }
+      }
+    }
+    function normalizeWindowState(value) {
+      if (!value || typeof value !== "object" || value.version !== WINDOW_STATE_VERSION) {
+        return null;
+      }
+      const mainSource = value.main === null ? null : normalizeSessionSource(value.main?.source);
+      if (value.main !== null && !mainSource) {
+        return null;
+      }
+      if (!Array.isArray(value.tours)) {
+        return null;
+      }
+      const tours = value.tours.map(normalizeTourLaunch).filter(Boolean);
+      if (tours.length !== value.tours.length) {
+        return null;
+      }
+      return {
+        version: WINDOW_STATE_VERSION,
+        main: mainSource ? { source: mainSource } : null,
+        tours
+      };
+    }
+    function normalizeSessionSource(source) {
+      if (!source || typeof source !== "object" || typeof source.kind !== "string") {
+        return null;
+      }
+      if (source.kind === "blank") {
+        return { kind: "blank" };
+      }
+      if (source.kind === "files" || source.kind === "directories") {
+        if (!isStringArray(source.paths) || source.paths.length === 0) return null;
+        return {
+          kind: source.kind,
+          paths: [...source.paths],
+          ...source.kind === "directories" && isStringArray(source.labels) ? { labels: [...source.labels] } : {}
+        };
+      }
+      if (source.kind === "file-history" || source.kind === "directory-history") {
+        if (typeof source.path !== "string" || source.path.length === 0) return null;
+        return {
+          kind: source.kind,
+          path: source.path,
+          includeStaged: Boolean(source.includeStaged),
+          skipUnchanged: Boolean(source.skipUnchanged)
+        };
+      }
+      if (source.kind === "git-refs") {
+        if (typeof source.repoRoot !== "string" || !isStringArray(source.refs) || source.refs.length < 2) return null;
+        return { kind: source.kind, repoRoot: source.repoRoot, refs: [...source.refs] };
+      }
+      if (source.kind === "branch-review") {
+        if (typeof source.repoRoot !== "string" || typeof source.headRef !== "string") return null;
+        return {
+          kind: source.kind,
+          repoRoot: source.repoRoot,
+          headRef: source.headRef,
+          ...typeof source.baseRef === "string" ? { baseRef: source.baseRef } : {}
+        };
+      }
+      return null;
+    }
+    function normalizeTourLaunch(value) {
+      if (!value || typeof value !== "object" || !isStringArray(value.args) || typeof value.cwd !== "string") {
+        return null;
+      }
+      return { args: [...value.args], cwd: value.cwd };
+    }
+    function isStringArray(value) {
+      return Array.isArray(value) && value.every((item) => typeof item === "string");
+    }
+    module2.exports = {
+      WINDOW_STATE_VERSION,
+      normalizeWindowState,
+      readWindowState: readWindowState2,
+      writeWindowState: writeWindowState2
+    };
+  }
+});
+
 // src/windowTitle.ts
 var windowTitle_exports = {};
 __export(windowTitle_exports, {
@@ -9075,7 +9210,7 @@ var require_package = __commonJS({
       displayName: "Bygone",
       desktopName: "com.davidmashburn.bygone.desktop",
       description: "See how change happened. Visual diff and file history for VS Code.",
-      version: "0.8.6",
+      version: "0.8.7",
       author: "David Mashburn",
       license: "MIT",
       private: false,
@@ -22324,6 +22459,7 @@ var { tokenMatches, tokensFor } = require_commandSpec();
 var { startPresentation } = require_present();
 var { resolveWorkingDirectory } = require_workingDirectory();
 var { getCliArgsFromArgv, getForwardedLaunchArgs } = require_launchArgs();
+var { readWindowState, writeWindowState } = require_windowState();
 var {
   buildHistoryTitle: buildHistoryTitle2,
   buildStandaloneSessionTitle: buildStandaloneSessionTitle2,
@@ -22343,13 +22479,15 @@ var parsedDirectoryHistoryCacheSize = Number.parseInt(process.env.BYGONE_DIR_HIS
 var DIRECTORY_HISTORY_CACHE_SIZE = Number.isFinite(parsedDirectoryHistoryCacheSize) && parsedDirectoryHistoryCacheSize > 0 ? parsedDirectoryHistoryCacheSize : DEFAULT_DIRECTORY_HISTORY_CACHE_SIZE;
 var commandLineToolPath = process.platform === "win32" ? path8.join(process.env.LOCALAPPDATA || os.homedir(), "Microsoft", "WindowsApps", "bygone.cmd") : "/usr/local/bin/bygone";
 var gitHistoryService = new GitHistoryService2();
-var launchArguments = parseLaunchArgs(getCliArgs());
+var initialCliArgs = getCliArgs();
+var launchArguments = parseLaunchArgs(initialCliArgs);
 var smokeTestMode = launchArguments.kind === "smoke" || launchArguments.kind === "smoke-multi" || launchArguments.kind === "smoke-directory";
 var captureOutputPath = launchArguments.capturePath ? path8.resolve(launchArguments.capturePath) : null;
 var captureMode = Boolean(captureOutputPath);
 var launchWindowWidth = Number.isFinite(launchArguments.windowWidth) ? launchArguments.windowWidth : 1500;
 var launchWindowHeight = Number.isFinite(launchArguments.windowHeight) ? launchArguments.windowHeight : 960;
 var shouldUseSingleInstanceLock = app.isPackaged && !smokeTestMode && !captureMode;
+var shouldRestoreWindowState = initialCliArgs.length === 0 && !smokeTestMode && !captureMode;
 app.setName(APP_NAME);
 if (typeof app.setAppUserModelId === "function") {
   app.setAppUserModelId("com.davidmashburn.bygone");
@@ -22383,6 +22521,8 @@ var wordWrapEnabled = false;
 var wordWrapAvailable = false;
 var repositorySearch = null;
 var lastRepositoryReplacement = null;
+var appIsQuitting = false;
+var restoringWindowState = false;
 if (!singleInstanceLock) {
   app.quit();
 }
@@ -22399,6 +22539,10 @@ app.on("window-all-closed", () => {
     app.quit();
   }
 });
+app.on("before-quit", () => {
+  appIsQuitting = true;
+  persistOpenWindowState();
+});
 app.on("will-quit", () => {
   repositorySearch?.handle?.cancel();
   for (const server of [...activeTourServers]) {
@@ -22548,6 +22692,9 @@ function createMainWindow({ show = !smokeTestMode } = {}) {
     smokeTimeout = void 0;
     captureScheduled = false;
     captureRenderReady = false;
+    if (!appIsQuitting && (process.platform === "darwin" || BrowserWindow.getAllWindows().length > 0)) {
+      persistOpenWindowState();
+    }
   });
 }
 function ensureMainWindow() {
@@ -22557,13 +22704,18 @@ function ensureMainWindow() {
   }
 }
 async function openTourPresentation(args, cwd) {
+  let ownerWindow = null;
   const presentation = await startPresentation(args, cwd, packageRoot, {
     announce: false,
-    open: false
+    open: false,
+    onNarrationClaim: () => claimTourNarration(ownerWindow)
   });
   activeTourServers.add(presentation.server);
   try {
-    await showTourWindow(presentation.url, presentation.server, presentation.manifest);
+    ownerWindow = await showTourWindow(presentation.url, presentation.server, presentation.manifest, {
+      args: [...args],
+      cwd: path8.resolve(cwd)
+    });
   } catch (error) {
     closeTourServer(presentation.server);
     throw error;
@@ -22573,7 +22725,7 @@ async function openAuthoredTourDocument(sourcePath) {
   const document2 = discoverAuthoredTourDocument2(sourcePath);
   await openTourPresentation(["--tour", document2.documentPath], document2.repoRoot);
 }
-async function showTourWindow(url, server, manifest) {
+async function showTourWindow(url, server, manifest, launch) {
   const parsedUrl = new URL(url);
   if (parsedUrl.protocol !== "http:" || parsedUrl.hostname !== "127.0.0.1") {
     throw new Error("Tour presenter URL must use the local Bygone server.");
@@ -22595,7 +22747,8 @@ async function showTourWindow(url, server, manifest) {
     }
   });
   latestTourWindow = tourWindow;
-  tourPresentations.set(tourWindow, { server, origin: tourOrigin });
+  tourPresentations.set(tourWindow, { server, origin: tourOrigin, launch });
+  installApplicationMenu();
   tourWindow.webContents.setWindowOpenHandler(({ url: externalUrl }) => {
     if (/^https?:\/\//i.test(externalUrl)) {
       void shell.openExternal(externalUrl);
@@ -22622,6 +22775,10 @@ async function showTourWindow(url, server, manifest) {
     if (latestTourWindow === tourWindow) {
       latestTourWindow = getLatestTourWindow();
     }
+    installApplicationMenu();
+    if (!appIsQuitting && (process.platform === "darwin" || BrowserWindow.getAllWindows().length > 0)) {
+      persistOpenWindowState();
+    }
   });
   const tourWindowTitle = buildTourWindowTitle2(manifest, APP_NAME);
   const applyTourWindowTitle = () => {
@@ -22643,11 +22800,30 @@ async function showTourWindow(url, server, manifest) {
   applyTourWindowTitle();
   tourWindow.show();
   tourWindow.focus();
+  persistOpenWindowState();
   return tourWindow;
 }
 function getLatestTourWindow() {
   return [...tourPresentations.keys()].reverse().find((window2) => !window2.isDestroyed());
 }
+function claimTourNarration(ownerWindow) {
+  if (!ownerWindow || ownerWindow.isDestroyed()) return;
+  for (const tourWindow of tourPresentations.keys()) {
+    if (tourWindow !== ownerWindow && !tourWindow.isDestroyed()) {
+      dispatchTourPresenterCommand(tourWindow, "pauseNarration");
+    }
+  }
+}
+function dispatchTourPresenterCommand(tourWindow, command) {
+  if (!tourWindow || tourWindow.isDestroyed()) return;
+  const script = `window.dispatchEvent(new CustomEvent('bygone:tour-command', { detail: ${JSON.stringify(command)} }))`;
+  void tourWindow.webContents.executeJavaScript(script).catch(() => {
+  });
+}
+function toggleLatestTourNarration() {
+  const tourWindow = getLatestTourWindow();
+  if (tourWindow) dispatchTourPresenterCommand(tourWindow, "toggleNarration");
+}
 function closeTourServer(server) {
   if (!server || !activeTourServers.delete(server)) {
     return;
@@ -22962,6 +23138,12 @@ ${HELP_URL}`,
           click: () => {
             void openAuthoredTourDialog().catch((error) => showError(`Could not open Bygone presentation: ${getErrorMessage(error)}`));
           }
+        },
+        { type: "separator" },
+        {
+          label: "Listen to Tour",
+          enabled: Boolean(getLatestTourWindow()),
+          click: toggleLatestTourNarration
         }
       ]
     },
@@ -23320,8 +23502,73 @@ async function openInitialLaunchTarget() {
     await routePendingOpenPaths();
     return;
   }
+  if (shouldRestoreWindowState && await restoreOpenWindowState()) {
+    return;
+  }
   await routeLaunchTarget(launchArguments);
 }
+async function restoreOpenWindowState() {
+  const savedState = readWindowState(getWindowStatePath());
+  if (!savedState || !savedState.main && savedState.tours.length === 0) {
+    return false;
+  }
+  let restoredAnyWindow = false;
+  restoringWindowState = true;
+  try {
+    if (savedState.main) {
+      ensureMainWindow();
+      try {
+        await restoreMainSession(savedState.main.source);
+      } catch (error) {
+        console.error(`Could not restore the previous Bygone session: ${getErrorMessage(error)}`);
+        await openBlankDiff();
+      }
+      restoredAnyWindow = true;
+    }
+    for (const tour of savedState.tours) {
+      try {
+        await openTourPresentation(tour.args, tour.cwd);
+        restoredAnyWindow = true;
+      } catch (error) {
+        console.error(`Could not restore a previous Bygone tour: ${getErrorMessage(error)}`);
+      }
+    }
+  } finally {
+    restoringWindowState = false;
+    persistOpenWindowState();
+  }
+  return restoredAnyWindow;
+}
+async function restoreMainSession(source) {
+  if (source.kind === "blank") {
+    await openBlankDiff();
+    return;
+  }
+  session = buildSessionFromSource(source);
+  historyIncludeStagedPreference = Boolean(source.includeStaged ?? historyIncludeStagedPreference);
+  historySkipUnchangedPreference = Boolean(source.skipUnchanged ?? historySkipUnchangedPreference);
+  clearWatchers();
+  updateWatchers();
+  await sendCurrentSession();
+}
+function persistOpenWindowState() {
+  if (restoringWindowState || !app.isReady()) return;
+  const hasMainWindow = Boolean(mainWindow && !mainWindow.isDestroyed());
+  const mainSource = hasMainWindow && (isRefreshableSource(session.source) || session.source?.kind === "blank") ? cloneSessionSource(session.source) : hasMainWindow ? { kind: "blank" } : null;
+  const tours = [...tourPresentations.entries()].filter(([window2, presentation]) => !window2.isDestroyed() && presentation.launch).map(([, presentation]) => presentation.launch);
+  try {
+    writeWindowState(getWindowStatePath(), {
+      version: 1,
+      main: mainSource ? { source: mainSource } : null,
+      tours
+    });
+  } catch (error) {
+    console.error(`Could not save Bygone window state: ${getErrorMessage(error)}`);
+  }
+}
+function getWindowStatePath() {
+  return path8.join(app.getPath("userData"), "open-windows.json");
+}
 async function routeLaunchTarget(launchTarget) {
   if (launchTarget.kind === "unsupported-launch-intent") {
     ensureMainWindow();
@@ -26928,6 +27175,7 @@ async function refreshSession(options = {}) {
 function postOrQueue(message) {
   installApplicationMenu();
   if (message && typeof message === "object" && typeof message.type === "string" && message.type.startsWith("show")) {
+    persistOpenWindowState();
     if (!refreshInProgress) {
       refreshFailure = null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davmash/bygone",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "See how change happened. Visual diff and file history.",
   "author": "David Mashburn",
   "license": "MIT",

package/standalone/index.html

@@ -30,13 +30,13 @@
             <div id="change-toolbar" class="change-toolbar header-align-diff" hidden>
                 <div class="change-toolbar-main">
                     <div class="change-toolbar-nav">
-                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" aria-label="Previous file">
+                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" data-tooltip="Open previous file" aria-label="Previous file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M17 11l-5-5-5 5"></path>
                                 <path d="M17 18l-5-5-5 5" opacity="0.7"></path>
                             </svg>
                         </button>
-                        <button id="next-file" class="change-button change-button-primary icon-button" type="button" title="Open next file" aria-label="Next file">
+                        <button id="next-file" class="change-button change-button-primary icon-button" type="button" title="Open next file" data-tooltip="Open next file" aria-label="Next file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M7 13l5 5 5-5"></path>
                                 <path d="M7 6l5 5 5-5" opacity="0.7"></path>
@@ -72,8 +72,15 @@
                         </svg>
                     </button>
                     </div>
+                    <div class="change-toolbar-actions">
                     <button id="toggle-word-wrap" class="change-button icon-button" type="button" title="Enable line wrapping (Alt+Z)" aria-label="Enable line wrapping" aria-pressed="false" hidden>
-                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <svg class="word-wrap-icon-off" viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
+                            <path d="M12 9l-3 3 3 3"></path>
+                            <path d="M4 18h8"></path>
+                            <path d="M5 4l14 16"></path>
+                        </svg>
+                        <svg class="word-wrap-icon-on" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
                             <path d="M12 9l-3 3 3 3"></path>
                             <path d="M4 18h8"></path>
@@ -85,6 +92,7 @@
                             <path d="M20 5v6h-6"></path>
                         </svg>
                     </button>
+                    </div>
                 </div>
                 <div class="change-hint">F7 / Shift+F7 · Cmd/Ctrl+Shift+Up/Down to jump.</div>
             </div>
@@ -94,14 +102,14 @@
                     <div id="history-left-time" class="history-time"></div>
                 </div>
                 <div class="history-nav">
-                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit (Alt+Left)" aria-label="Older commit">
+                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit (Alt+Left)" data-tooltip="Open older commit" aria-label="Older commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M15 18l-6-6 6-6"></path>
                             <path d="M10 18l-6-6 6-6" opacity="0.7"></path>
                         </svg>
                     </button>
                     <div id="history-position" class="history-position" role="status" aria-live="polite" aria-atomic="true"></div>
-                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit (Alt+Right)" aria-label="Newer commit">
+                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit (Alt+Right)" data-tooltip="Open newer commit" aria-label="Newer commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M9 18l6-6-6-6"></path>
                             <path d="M14 18l6-6-6-6" opacity="0.7"></path>

package/web/index.html

@@ -60,6 +60,34 @@
             <span id="tour-breadcrumb" class="tour-breadcrumb"></span>
             <button id="tour-next" type="button" title="Next tour item (Right or Page Down)">Next →</button>
         </nav>
+        <div id="tour-narration-controls" class="tour-narration-controls" role="group" aria-label="Tour narration">
+            <div class="tour-narration-transport" role="group" aria-label="Narration playback">
+                <button id="tour-narration-skip-back" type="button" title="Previous sentence" aria-label="Previous sentence" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
+                </button>
+                <button id="tour-listen" type="button" title="Listen from the current tour item" aria-label="Listen from the current tour item">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="tour-icon-fill tour-play-pause-icon" d="m8 5 11 7-11 7Z"/></svg>
+                </button>
+                <button id="tour-stop" type="button" title="Stop narration" aria-label="Stop narration" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="tour-icon-fill" d="M6 6h12v12H6z"/></svg>
+                </button>
+                <button id="tour-narration-skip-ahead" type="button" title="Next sentence" aria-label="Next sentence" disabled>
+                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
+                </button>
+            </div>
+            <div class="tour-narration-settings">
+                <select id="tour-narration-voice" aria-label="Narration voice" title="Narration voice" disabled>
+                    <option value="">System default voice</option>
+                </select>
+                <select id="tour-narration-rate" aria-label="Narration speed" title="Narration speed">
+                    <option value="0.75">0.75×</option>
+                    <option value="1">1×</option>
+                    <option value="1.25">1.25×</option>
+                    <option value="1.5">1.5×</option>
+                </select>
+            </div>
+            <span id="tour-narration-status" class="tour-narration-status" role="status" aria-live="polite" aria-atomic="true">Device voice ready</span>
+        </div>
         <div class="tour-narrative-layout">
             <div class="tour-narrative-prose">
                 <div id="tour-narrative-chapter" class="tour-narrative-chapter"></div>
@@ -113,13 +141,13 @@
             <div id="change-toolbar" class="change-toolbar header-align-diff" hidden>
                 <div class="change-toolbar-main">
                     <div class="change-toolbar-nav">
-                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" aria-label="Previous file">
+                        <button id="previous-file" class="change-button icon-button" type="button" title="Open previous file" data-tooltip="Open previous file" aria-label="Previous file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M17 11l-5-5-5 5"></path>
                                 <path d="M17 18l-5-5-5 5"></path>
                             </svg>
                         </button>
-                        <button id="next-file" class="change-button icon-button" type="button" title="Open next file" aria-label="Next file">
+                        <button id="next-file" class="change-button icon-button" type="button" title="Open next file" data-tooltip="Open next file" aria-label="Next file">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M7 13l5 5 5-5"></path>
                                 <path d="M7 6l5 5 5-5"></path>
@@ -155,8 +183,15 @@
                             </svg>
                         </button>
                     </div>
+                    <div class="change-toolbar-actions">
                     <button id="toggle-word-wrap" class="change-button icon-button" type="button" title="Enable line wrapping (Alt+Z)" aria-label="Enable line wrapping" aria-pressed="false" hidden>
-                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <svg class="word-wrap-icon-off" viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
+                            <path d="M12 9l-3 3 3 3"></path>
+                            <path d="M4 18h8"></path>
+                            <path d="M5 4l14 16"></path>
+                        </svg>
+                        <svg class="word-wrap-icon-on" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M4 6h13a3 3 0 0 1 0 6H9"></path>
                             <path d="M12 9l-3 3 3 3"></path>
                             <path d="M4 18h8"></path>
@@ -168,6 +203,7 @@
                             <path d="M20 5v6h-6"></path>
                         </svg>
                     </button>
+                    </div>
                 </div>
                 <div class="change-hint">F7 / Shift+F7 · Cmd/Ctrl+Shift+Up/Down to jump.</div>
             </div>
@@ -177,14 +213,14 @@
                     <div id="history-left-time" class="history-time"></div>
                 </div>
                 <div class="history-nav">
-                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit" aria-label="Older commit">
+                    <button id="history-back" class="history-button icon-button" type="button" title="Open older commit" data-tooltip="Open older commit" aria-label="Older commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M15 18l-6-6 6-6"></path>
                             <path d="M10 18l-6-6 6-6" opacity="0.7"></path>
                         </svg>
                     </button>
                     <div id="history-position" class="history-position" role="status" aria-live="polite" aria-atomic="true"></div>
-                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit" aria-label="Newer commit">
+                    <button id="history-forward" class="history-button icon-button" type="button" title="Open newer commit" data-tooltip="Open newer commit" aria-label="Newer commit">
                         <svg viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M9 18l6-6-6-6"></path>
                             <path d="M14 18l6-6-6-6" opacity="0.7"></path>