@1agh/maude 1.4.3 → 1.4.5

package/apps/studio/client/app.jsx

@@ -46,6 +46,7 @@ import {
   recordBrowserExport,
 } from './export-lane.js';
 import { TreeRowMenu, useRowMenu } from './tree-row-menu.jsx';
+import { FileTree, FileTreeItem } from './file-tree.jsx';
 import { useTreeDrag } from './use-tree-drag.js';
 import ChatPanel from './panels/ChatPanel.jsx';
 import DiffView from './panels/DiffView.jsx';
@@ -2199,10 +2200,8 @@ function DirRow({ name, depth, defaultOpen, children, dirPath, drag, menu }) {
     </button>
   );
   return (
-    <Fragment>
-      {menu ? (
-        <div className="st-row-wrap" role="none">
-          {row}
+    <FileTreeItem label={name} row={row} expanded={open} busy={isBusy}
+      onToggle={() => setOpen(v => !v)} actions={menu ? (
           <button
             type="button"
             className="st-row-menu-btn"
@@ -2214,12 +2213,9 @@ function DirRow({ name, depth, defaultOpen, children, dirPath, drag, menu }) {
           >
             <Icon d="M12 6a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 20a1 1 0 100-2 1 1 0 000 2z" size={12} />
           </button>
-        </div>
-      ) : (
-        row
-      )}
+      ) : null}>
       {open && children}
-    </Fragment>
+    </FileTreeItem>
   );
 }
 
@@ -2230,12 +2226,11 @@ function DirRow({ name, depth, defaultOpen, children, dirPath, drag, menu }) {
 function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, children }) {
   const [open, setOpen] = useState(defaultOpen);
   return (
-    <Fragment>
+    <FileTreeItem label={name} expanded={open} selected={active}
+      onToggle={() => setOpen(v => !v)} row={
       <div
         className={'st-row st-ds-folder' + (active ? ' is-sel' : '')}
         style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
-        role="treeitem"
-        aria-expanded={open}
       >
         <button
           type="button"
@@ -2249,6 +2244,8 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
         <button
           type="button"
           className="st-ds-open"
+          data-tree-primary=""
+          tabIndex={-1}
           onClick={() => onOpenSystem(dsName)}
           aria-label={`Open ${dsName} design system view`}
           title="Open the design system view"
@@ -2258,9 +2255,9 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
           </span>
           <span className="st-row-name">{name}</span>
         </button>
-      </div>
+      </div>}>
       {open && children}
-    </Fragment>
+    </FileTreeItem>
   );
 }
 
@@ -2392,12 +2389,10 @@ function FileRow({
       {oc > 0 && <span className="st-row-badge">{oc}</span>}
     </button>
   );
-  if (!canDelete && !canShare) return row;
-  // Sibling menu/delete buttons (can't nest a button in the row button). The
-  // wrapper is presentational so the treeitem stays the tree's child for a11y.
+  // The named treeitem owns the primary action and its independent buttons.
   return (
-    <div className="st-row-wrap" role="none">
-      {row}
+    <FileTreeItem label={label} row={row} selected={isSel} disabled={inert} busy={isBusy}
+      actions={<>
       {canShare && (
         <button
           type="button"
@@ -2434,7 +2429,7 @@ function FileRow({
           <Icon d="M3 6h18 M8 6V4h8v2 M6 6l1 14h10l1-14 M10 11v6 M14 11v6" size={12} />
         </button>
       )}
-    </div>
+      </>} />
   );
 }
 
@@ -2557,10 +2552,9 @@ function CanvasRow({
     </button>
   );
   return (
-    <Fragment>
-      {canShare ? (
-        <div className="st-row-wrap" role="none">
-          {row}
+    <FileTreeItem label={displayName(primary.name)} row={row} selected={isSel}
+      expanded={open} busy={isBusy} onToggle={() => setOpenState(v => !v)}
+      actions={canShare ? (
           <button
             type="button"
             className="st-row-menu-btn"
@@ -2572,10 +2566,7 @@ function CanvasRow({
           >
             <Icon d="M12 6a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 20a1 1 0 100-2 1 1 0 000 2z" size={12} />
           </button>
-        </div>
-      ) : (
-        row
-      )}
+      ) : null}>
       {open &&
         sidecars.map((sc) => (
           <FileRow
@@ -2592,7 +2583,7 @@ function CanvasRow({
             sidecar
           />
         ))}
-    </Fragment>
+    </FileTreeItem>
   );
 }
 
@@ -3201,7 +3192,7 @@ function Sidebar({
         </div>
       </div>
 
-      <div className="st-tree" role="tree" aria-label="Project file tree" data-testid="canvas-list">
+      <FileTree aria-label="Project file tree" data-testid="canvas-list">
         {filteredGroups.map((g) => {
           // Hide gitignored runtime / orphan-only project sections by default.
           // Active search overrides — if the user typed a query, they want hits
@@ -3235,7 +3226,8 @@ function Sidebar({
           const rootDropHandlers = canDropOnRoot ? treeDrag.dropProps(g.fullPath, true) : {};
           const isRootOver = treeDrag.overDir === g.fullPath;
           return (
-            <div className="st-tree-section" key={g.label}>
+            <FileTreeItem className="st-tree-section" key={g.label} label={meta.title}
+              expanded={sectionOpen} onToggle={() => onToggleSection(g.label, defaultOpen)} row={
               <button
                 type="button"
                 className={'st-tree-sec-hd' + (isRootOver ? ' is-drop-target' : '')}
@@ -3249,7 +3241,7 @@ function Sidebar({
                 <StIcon name="chevron-right" className={'st-chev' + (sectionOpen ? ' is-open' : '')} size={13} />
                 <span className="st-sec-name">{meta.title}</span>
                 {pill && <span className="st-pill">{pill}</span>}
-              </button>
+              </button>}>
               {sectionOpen &&
                 (hasItems ? (
                   <Tree
@@ -3276,10 +3268,10 @@ function Sidebar({
                 ) : (
                   <div className="st-tree-empty">{search ? 'No matches.' : 'Empty.'}</div>
                 ))}
-            </div>
+            </FileTreeItem>
           );
         })}
-      </div>
+      </FileTree>
       <TreeRowMenu
         state={rowMenu.state}
         onClose={rowMenu.close}
@@ -4386,7 +4378,6 @@ function Menubar({
   return (
     <header
       className="st-menubar"
-      role="menubar"
       aria-label="Application menubar"
       data-testid="menubar"
     >
@@ -4428,7 +4419,7 @@ function Menubar({
           ) : null}
         </span>
       ) : null}
-      <nav className="st-menus" aria-label="Application menus" data-tour="menus">
+      <nav className="st-menus" role="menubar" aria-label="Application menus" data-tour="menus">
         {MENU_NAMES.map((name) => {
           const key = name.toLowerCase();
           const hasDropdown = DROPDOWN_MENUS.includes(key);
@@ -4794,6 +4785,7 @@ function Viewport({
             key={`${t.path}#${canvasReloadNonce}`}
             ref={(el) => registerIframe(t.path, el)}
             src={stableSrc(t.path)}
+            title={`Canvas: ${t.path}`}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
             data-testid={t.path === activePath ? 'canvas-frame' : undefined}
@@ -6589,6 +6581,25 @@ function GridTracksEditor({ label, tracks, editable, onChange }) {
   );
 }
 
+// Writes whose success ends in a `record-edit` post to the canvas. The canvas
+// asks (`undo-barrier`) before Cmd+Z so it never undoes past an edit whose
+// record is still on its way (see afterShellRecords in canvas-shell.tsx).
+const recordableWrites = { pending: 0, waiters: [] };
+function trackRecordableWrite(promise) {
+  recordableWrites.pending += 1;
+  const settle = () => {
+    recordableWrites.pending -= 1;
+    if (recordableWrites.pending === 0) for (const w of recordableWrites.waiters.splice(0)) w();
+  };
+  promise.then(settle, settle);
+  return promise;
+}
+function afterRecordableWrites() {
+  return recordableWrites.pending === 0
+    ? Promise.resolve()
+    : new Promise((resolve) => recordableWrites.waiters.push(resolve));
+}
+
 function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoRedo, mode, onSetMode }) {
   const editable = !!el.id;
   const computed = el.computed || {};
@@ -6704,13 +6715,15 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
   // Serialized so the stack keeps edit order; a failed write records nothing.
   const writeChainRef = useRef(Promise.resolve());
   const writeAndRecord = (url, payload, key, op, prop, fallbackBefore, after) => {
-    writeChainRef.current = writeChainRef.current.then(async () => {
-      const j = await post(url, payload, key);
-      if (!j?.ok) return;
-      const before = Object.hasOwn(j, 'previous') ? j.previous : fallbackBefore;
-      if ((before ?? null) === (after ?? null)) return; // nothing changed to undo
-      record(op, prop, before, after);
-    });
+    writeChainRef.current = trackRecordableWrite(
+      writeChainRef.current.then(async () => {
+        const j = await post(url, payload, key);
+        if (!j?.ok) return;
+        const before = Object.hasOwn(j, 'previous') ? j.previous : fallbackBefore;
+        if ((before ?? null) === (after ?? null)) return; // nothing changed to undo
+        record(op, prop, before, after);
+      })
+    );
   };
   // Optimistic preview: nudge the live element so the change shows before the
   // edit → HMR reload lands. `value` null = remove (reset path). No-op when the
@@ -9277,7 +9290,7 @@ function InspectorPanel({
   // HMR reload re-posts the tree with the new label.
   const renameLayer = (node, value) => {
     if (!canvasFile || !node?.id) return;
-    fetch('/_api/edit-attr', {
+    trackRecordableWrite(fetch('/_api/edit-attr', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ canvas: canvasFile, id: node.id, attr: 'data-dc-element', value }),
@@ -9294,7 +9307,7 @@ function InspectorPanel({
           after: value,
         });
       })
-      .catch(() => {});
+      .catch(() => {}));
   };
   const handleReorder = onReorderLayer
     ? (dragged, ref, position) => {
@@ -10779,7 +10792,7 @@ function App() {
         openPanelExclusive('tree');
         setTimeout(() => {
           try {
-            document.querySelector('.st-sidebar [role="treeitem"]')?.click();
+            document.querySelector('.st-sidebar [data-testid^="canvas-row-"]')?.click();
           } catch {}
         }, 80);
       }
@@ -12245,6 +12258,7 @@ function App() {
   // actions (who did what, when), not Git commits; a row previews as `r<rev>`
   // through the same version preview. `'legacy'` means "use Git history".
   const [projectHistoryOn, setProjectHistoryOn] = useState(false);
+  const [projectHistoryRefresh, setProjectHistoryRefresh] = useState(0);
   const loadAcceptedLog = useCallback(async (path) => {
     try {
       const qs =
@@ -12273,6 +12287,31 @@ function App() {
     }
   }, []);
 
+  // An accepted preview must stay on project history even if loading fails:
+  // switching to Git would turn Restore into an unrelated discard operation.
+  const acceptedDiff = /^r\d+$/.test(diffTarget?.beforeSha || '');
+  const loadDiffLog = useCallback(async (path) => {
+    if (!acceptedDiff) return gitLoadLog(path);
+    const entries = await loadAcceptedLog(path);
+    return Array.isArray(entries) ? entries : [];
+  }, [acceptedDiff, gitLoadLog, loadAcceptedLog]);
+  const restoreProjectVersion = useCallback(async (path, revision) => {
+    if (!path || !Number.isSafeInteger(revision) || revision < 0) {
+      return { ok: false, error: 'Choose a saved project version to restore.' };
+    }
+    const r = await fetch('/_api/project/restore', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, revision }),
+    }).catch(() => null);
+    const result = r ? await r.json().catch(() => null) : null;
+    if (r?.ok && result?.ok) {
+      setProjectHistoryRefresh((version) => version + 1);
+      return result;
+    }
+    return { ok: false, error: result?.error };
+  }, []);
+
   // Repo-relative path → M/A/D/U badge for the tree (paths match: both the tree
   // and gitStatus use `.design/ui/Foo.tsx`). Keyed off gitStatus so it updates
   // live with the WS broadcast.
@@ -13097,7 +13136,8 @@ function App() {
         m.dgn === 'select-set' ||
         m.dgn === 'clear-select' ||
         m.dgn === 'edit-text' ||
-        m.dgn === 'apply-edit'
+        m.dgn === 'apply-edit' ||
+        m.dgn === 'undo-barrier'
       ) {
         const activeWin =
           activePath && activePath !== SYSTEM_TAB
@@ -13175,6 +13215,16 @@ function App() {
             if (!j.ok) revert(j.error || "this element can't be edited inline");
           })
           .catch(() => revert('network error'));
+      } else if (m.dgn === 'undo-barrier' && typeof m.requestId === 'string') {
+        // Answer once every write that will post a `record-edit` has settled
+        // (and so posted it — window messages arrive in order), so the canvas's
+        // Cmd+Z sees the edit that is on screen. Read-only; nothing is written.
+        const source = e.source;
+        Promise.all([editApplyChainRef.current.catch(() => {}), afterRecordableWrites()]).then(() => {
+          try {
+            source?.postMessage({ dgn: 'undo-barrier-ok', requestId: m.requestId }, '*');
+          } catch {}
+        });
       } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
         // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
         // `edit-source` command can't call the main-origin-only `/_api/edit-*`
@@ -15709,15 +15759,8 @@ function App() {
             return (cloudManaged ? gitLoadCloudLog : gitLoadLog)(path);
           }}
           historySource={projectHistoryOn ? 'project' : cloudManaged ? 'cloud' : 'local'}
-          onRestoreVersion={async (revision) => {
-            const r = await fetch('/_api/project/restore', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ path: activePath, revision }),
-            }).catch(() => null);
-            const j = r ? await r.json().catch(() => null) : null;
-            return !!j?.ok;
-          }}
+          historyRefresh={`${syncStatus?.appliedRevision ?? 0}:${projectHistoryRefresh}`}
+          onRestoreVersion={(revision) => restoreProjectVersion(activePath, revision).then((r) => !!r.ok)}
           // Not through a cell's door: every browser editor proposes under the
           // studio's one credential there, so "your own action" is not
           // knowable and the hub refuses the route (studio-manifest.mjs).
@@ -16823,7 +16866,7 @@ function App() {
           // and was simply unreachable here. Found running S20 against a live
           // deployment; asserted in `team-project.e2e.ts` step 4b.
           onOpenChanges={
-            gitStatus?.repo || savingIsManaged ? () => setChangesOpen(true) : undefined
+            gitStatus?.repo || savingIsManaged ? () => openRightPanel('changes') : undefined
           }
           version={cfg?.version}
         />
@@ -16966,10 +17009,12 @@ function App() {
         <DiffView
           target={diffTarget}
           cfg={cfg}
-          loadLog={gitLoadLog}
+          loadLog={loadDiffLog}
           onClose={() => setDiffTarget(null)}
-          onRestore={async (file) => {
-            const res = await gitDiscard([file]);
+          onRestore={async (file, version) => {
+            const res = acceptedDiff
+              ? await restoreProjectVersion(file, /^r\d+$/.test(version || '') ? Number(version.slice(1)) : NaN)
+              : await gitDiscard([file]);
             if (res?.ok) setDiffTarget(null);
             else window.alert(res?.error || 'Could not restore that version. Try again.');
           }}

package/apps/studio/client/file-tree.jsx

@@ -0,0 +1,157 @@
+import { cloneElement, useLayoutEffect, useRef } from 'react';
+
+const ITEM = '[role="treeitem"]';
+
+/** One tree tab stop. Arrow focus does not open files or change selection. */
+export function FileTree({ children, ...props }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const tree = ref.current;
+    const items = () => Array.from(tree.querySelectorAll(ITEM));
+    const focusItem = (item, focus = true) => {
+      if (!item) return;
+      for (const row of items()) row.tabIndex = row === item ? 0 : -1;
+      if (focus) item.focus();
+    };
+    const repairTabStop = () => {
+      const rows = items();
+      const current = rows.find((row) => row.tabIndex === 0);
+      focusItem(
+        current || rows.find((row) => row.getAttribute('aria-selected') === 'true') || rows[0],
+        tree.ownerDocument.activeElement === tree
+      );
+      tree.tabIndex = rows.length ? -1 : 0;
+    };
+    const onFocus = (event) => {
+      const item = event.target.closest?.(ITEM);
+      if (item && tree.contains(item)) focusItem(item, false);
+    };
+    const onKey = (event) => {
+      const item = event.target.closest?.(ITEM);
+      if (!item || !tree.contains(item) || event.metaKey || event.ctrlKey || event.altKey) return;
+      const row = item.querySelector(':scope > .st-row-wrap');
+      const primary = row?.querySelector('[data-tree-primary]');
+      // Extra buttons keep their native Enter/Space/Tab behavior. Escape
+      // returns from a row action to the tree; open menus own their own keys.
+      if (event.target !== item && event.target !== primary) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          focusItem(item);
+        }
+        return;
+      }
+      const rows = items();
+      const index = rows.indexOf(item);
+      const expanded = item.getAttribute('aria-expanded');
+      const toggle = () => item.dispatchEvent(new Event('tree-toggle'));
+      switch (event.key) {
+        case 'ArrowDown':
+          focusItem(rows[Math.min(index + 1, rows.length - 1)]);
+          break;
+        case 'ArrowUp':
+          focusItem(rows[Math.max(index - 1, 0)]);
+          break;
+        case 'Home':
+          focusItem(rows[0]);
+          break;
+        case 'End':
+          focusItem(rows.at(-1));
+          break;
+        case 'ArrowRight':
+          if (expanded === 'false') toggle();
+          else if (expanded === 'true')
+            focusItem(item.querySelector(':scope > [role="group"] ' + ITEM));
+          break;
+        case 'ArrowLeft':
+          if (expanded === 'true') toggle();
+          else focusItem(item.parentElement?.closest(ITEM));
+          break;
+        case 'Enter':
+        case ' ':
+          if (event.target !== item) return;
+          if (item.getAttribute('aria-disabled') !== 'true') primary?.click();
+          break;
+        default: {
+          if (event.key.length !== 1 || event.shiftKey) return;
+          const ordered = [...rows.slice(index + 1), ...rows.slice(0, index + 1)];
+          focusItem(
+            ordered.find((candidate) =>
+              candidate
+                .getAttribute('aria-label')
+                ?.toLocaleLowerCase()
+                .startsWith(event.key.toLocaleLowerCase())
+            )
+          );
+        }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    repairTabStop();
+    const observer = new MutationObserver(repairTabStop);
+    observer.observe(tree, { childList: true, subtree: true });
+    tree.addEventListener('focusin', onFocus);
+    tree.addEventListener('keydown', onKey);
+    return () => {
+      observer.disconnect();
+      tree.removeEventListener('focusin', onFocus);
+      tree.removeEventListener('keydown', onKey);
+    };
+  }, []);
+  return (
+    <div {...props} ref={ref} className="st-tree" role="tree">
+      {children}
+    </div>
+  );
+}
+
+/** Row actions belong to the item; descendants belong to its named group.
+ * Native buttons remain the activation targets, never nested in a button. */
+export function FileTreeItem({
+  label,
+  row,
+  actions,
+  expanded,
+  selected,
+  disabled,
+  busy,
+  onToggle,
+  children,
+  className = '',
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const item = ref.current;
+    const toggle = () => onToggle?.();
+    item.addEventListener('tree-toggle', toggle);
+    return () => item.removeEventListener('tree-toggle', toggle);
+  }, [onToggle]);
+  const primary =
+    row.type === 'button'
+      ? cloneElement(row, {
+          role: undefined,
+          'aria-selected': undefined,
+          tabIndex: -1,
+          'data-tree-primary': '',
+        })
+      : row;
+  return (
+    <div
+      ref={ref}
+      className={`st-tree-item ${className}`}
+      role="treeitem"
+      tabIndex={-1}
+      aria-label={label}
+      aria-expanded={expanded}
+      aria-selected={selected}
+      aria-disabled={disabled || undefined}
+      aria-busy={busy || undefined}
+    >
+      <div className="st-row-wrap">
+        {primary}
+        {actions}
+      </div>
+      {children && <div role="group">{children}</div>}
+    </div>
+  );
+}

package/apps/studio/client/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html data-theme="dark">
+<html lang="en" data-theme="dark">
 <head>
 <meta charset="utf-8">
 <title>maude · studio</title>

package/apps/studio/client/panels/DiffView.jsx

@@ -170,7 +170,9 @@ function CanvasView({ src, view, setView, label }) {
           className="dv-frame-wrap"
           style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}
         >
-          <iframe className="dv-frame" src={src} title={label} />
+          {/* A read-only preview: out of the tab order, so the modal's focus
+              never falls into a document whose keys the shell cannot see. */}
+          <iframe className="dv-frame" src={src} title={label} tabIndex={-1} />
         </div>
       ) : (
         <div className="dv-thumb-note">No saved version of this canvas to compare yet.</div>
@@ -236,6 +238,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
   // HEAD), then re-pointable in-place via the "Saved version" picker.
   const tgtFile = target?.file;
   const tgtBeforeSha = target?.beforeSha;
+  const acceptedPreview = /^r\d+$/.test(tgtBeforeSha || '');
   const [beforeSha, setBeforeSha] = useState(tgtBeforeSha || 'HEAD');
   const [versions, setVersions] = useState(null); // per-file saved versions, or null while loading
 
@@ -253,7 +256,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
     let cancelled = false;
     (async () => {
       const entries = (await loadLog(tgtFile)) || [];
-      if (!cancelled) setVersions(entries);
+      if (!cancelled) setVersions(Array.isArray(entries) ? entries : []);
     })();
     return () => {
       cancelled = true;
@@ -263,16 +266,38 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
   useEffect(() => {
     if (!target) return;
     const opener = document.activeElement;
+    // A modal keeps the keyboard inside it (S19): Tab / Shift+Tab cycle the
+    // sheet's own controls, and Escape is taken before anything behind it.
+    const controls = () =>
+      [
+        ...(sheetRef.current?.querySelectorAll(
+          'button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        ) ?? []),
+      ].filter((el) => !el.closest('[hidden]'));
     const onKey = (e) => {
       if (e.key === 'Escape') {
         e.preventDefault();
+        e.stopImmediatePropagation();
         onClose();
+      } else if (e.key === 'Tab') {
+        const items = controls();
+        if (!items.length) return;
+        const inside = sheetRef.current?.contains(document.activeElement);
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (e.shiftKey && (!inside || document.activeElement === first || document.activeElement === sheetRef.current)) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && (!inside || document.activeElement === last)) {
+          e.preventDefault();
+          first.focus();
+        }
       }
     };
-    window.addEventListener('keydown', onKey);
+    document.addEventListener('keydown', onKey, true);
     sheetRef.current?.focus();
     return () => {
-      window.removeEventListener('keydown', onKey);
+      document.removeEventListener('keydown', onKey, true);
       if (opener instanceof HTMLElement) opener.focus();
     };
   }, [target, onClose]);
@@ -335,12 +360,13 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
             <label className="dv-verpick">
               <span className="dv-verpick-lbl">Compare against</span>
               <select
+                data-testid="history-preview-version"
                 className="dv-verpick-sel"
                 value={beforeSha}
                 onChange={(e) => setBeforeSha(e.target.value)}
                 aria-label={`Saved version of ${baseName(file)} to compare against`}
               >
-                <option value="HEAD">Last saved</option>
+                {!acceptedPreview && <option value="HEAD">Last saved</option>}
                 {versions.map((v) => (
                   <option key={v.sha} value={v.sha}>
                     {`${v.message || 'Saved version'} · ${timeAgo(v.date)}`}
@@ -506,7 +532,7 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
                   <div className="dv-col">
                     <div className="dv-col-hd">
                       <span className="dv-col-tag is-after">Your version</span>
-                      <span className="dv-col-who">now · unsaved</span>
+                      <span className="dv-col-who">{acceptedPreview ? 'now · working copy' : 'now · unsaved'}</span>
                     </div>
                     <div className="dv-thumb is-after">
                       <CanvasView
@@ -559,17 +585,20 @@ export default function DiffView({ target, cfg, loadLog, onResolve, onRestore, o
                 <button
                   type="button"
                   className="btn btn--ghost btn--sm"
+                  data-testid="history-preview-restore"
                   disabled={busy}
                   onClick={async () => {
                     if (
                       !window.confirm(
-                        `Restore the saved version of “${baseName(file)}”? Your unsaved changes to it are discarded.`
+                        acceptedPreview
+                          ? `Restore version ${beforeSha.slice(1)} of “${baseName(file)}” as a new saved version?`
+                          : `Restore the saved version of “${baseName(file)}”? Your unsaved changes to it are discarded.`
                       )
                     )
                       return;
                     setBusy(true);
                     try {
-                      await onRestore(file);
+                      await onRestore(file, beforeSha);
                     } finally {
                       setBusy(false);
                     }

package/apps/studio/client/panels/GitPanel.jsx

@@ -182,6 +182,7 @@ export default function GitPanel({
   // is swapped at the same call site; this prop is only how the panel knows
   // which repo the rows it just received describe, so it can name it.
   historySource = 'local',
+  historyRefresh = 0, // applied project revisions and restores invalidate this list
   // `{ branch, project, hubHost }` — what the cell reported alongside the log.
   // Null until the first successful cloud load.
   cloudHistory = null,
@@ -465,7 +466,7 @@ export default function GitPanel({
   useEffect(() => {
     setLogFailed(false);
     setLogScope(undefined);
-  }, [historySource]);
+  }, [historySource, historyRefresh]);
 
   function toggleAll() {
     setUnchecked((prev) => (prev.size === 0 ? new Set(files.map((f) => f.path)) : new Set()));