xtralab 0.15.1 → 0.15.2

package/lib/git/diffWidget.js

@@ -5,7 +5,8 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import { buildDiffAskRequest } from './askRequest';
-import { DIFF_WIDGET_CSS_CLASS, DiffStyleControl, DiffSurface, NotebookViewModeControl, isDarkTheme, isPierreTheme, readStoredDiffStyle, readStoredNotebookViewMode, writeStoredDiffStyle, writeStoredNotebookViewMode } from './diffSurface';
+import { useDiffPreferences } from './diffPreferences';
+import { DIFF_WIDGET_CSS_CLASS, DiffStyleControl, DiffSurface, LineWrapControl, NotebookViewModeControl, isDarkTheme, isPierreTheme } from './diffSurface';
 import { imageDataType } from './imageDiff';
 export { DIFF_WIDGET_CSS_CLASS };
 /**
@@ -16,17 +17,13 @@ export class XtralabDiffWidget extends ReactWidget {
         super();
         this._reloadNonce = 0;
         this._pendingRefresh = null;
-        this._notebookViewModeChanged = new Signal(this);
         this._hasNotebookView = false;
         this._hasNotebookViewChanged = new Signal(this);
-        this._diffStyleChanged = new Signal(this);
         this._fileDiffActive = false;
         this._fileDiffActiveChanged = new Signal(this);
         this._emptied = new Signal(this);
         this._model = model;
         this._context = context;
-        this._notebookViewMode = readStoredNotebookViewMode();
-        this._diffStyle = readStoredDiffStyle();
         // Reuse jupyterlab-git's host sizing while applying xtralab styling.
         this.addClass('jp-git-diff-root');
         this.addClass(DIFF_WIDGET_CSS_CLASS);
@@ -77,29 +74,6 @@ export class XtralabDiffWidget extends ReactWidget {
         this.update();
         await done.promise;
     }
-    /**
-     * The current rendered-vs-JSON choice for notebook diffs.
-     */
-    get notebookViewMode() {
-        return this._notebookViewMode;
-    }
-    /**
-     * Set the notebook view mode and persist it.
-     */
-    setNotebookViewMode(mode) {
-        if (mode === this._notebookViewMode) {
-            return;
-        }
-        this._notebookViewMode = mode;
-        writeStoredNotebookViewMode(mode);
-        this._notebookViewModeChanged.emit(mode);
-    }
-    /**
-     * A signal emitted when the notebook view mode changes.
-     */
-    get notebookViewModeChanged() {
-        return this._notebookViewModeChanged;
-    }
     /**
      * Whether a rendered notebook view is currently available.
      */
@@ -123,30 +97,7 @@ export class XtralabDiffWidget extends ReactWidget {
         return this._hasNotebookViewChanged;
     }
     /**
-     * The current split/unified layout for textual file diffs.
-     */
-    get diffStyle() {
-        return this._diffStyle;
-    }
-    /**
-     * Set the diff style and persist it.
-     */
-    setDiffStyle(style) {
-        if (style === this._diffStyle) {
-            return;
-        }
-        this._diffStyle = style;
-        writeStoredDiffStyle(style);
-        this._diffStyleChanged.emit(style);
-    }
-    /**
-     * A signal emitted when the diff style changes.
-     */
-    get diffStyleChanged() {
-        return this._diffStyleChanged;
-    }
-    /**
-     * Whether the Split/Unified toolbar selector currently applies.
+     * Whether the Split/Unified and line-wrap toolbar controls currently apply.
      */
     get fileDiffActive() {
         return this._fileDiffActive;
@@ -219,7 +170,8 @@ function ModelDiffView(props) {
     var _a, _b;
     const { widget } = props;
     const model = widget.model;
-    const { contentsManager, rendermime, themeManager, askAgent, trans } = widget.context;
+    const { contentsManager, rendermime, themeManager, askAgent, preferences, trans } = widget.context;
+    const values = useDiffPreferences(preferences);
     const nonce = widget.reloadNonce;
     const [state, setState] = React.useState({
         loading: true,
@@ -227,31 +179,15 @@ function ModelDiffView(props) {
         newText: '',
         error: null
     });
-    const [notebookViewMode, setNotebookViewMode] = React.useState(() => widget.notebookViewMode);
-    React.useEffect(() => {
-        const handler = (sender, mode) => {
-            setNotebookViewMode(mode);
-        };
-        widget.notebookViewModeChanged.connect(handler);
-        setNotebookViewMode(widget.notebookViewMode);
-        return () => {
-            widget.notebookViewModeChanged.disconnect(handler);
-        };
-    }, [widget]);
     const handleNotebookAvailabilityChange = React.useCallback((available) => {
         widget.setHasNotebookView(available);
     }, [widget]);
-    const [diffStyle, setDiffStyle] = React.useState(() => widget.diffStyle);
-    React.useEffect(() => {
-        const handler = (sender, style) => {
-            setDiffStyle(style);
-        };
-        widget.diffStyleChanged.connect(handler);
-        setDiffStyle(widget.diffStyle);
-        return () => {
-            widget.diffStyleChanged.disconnect(handler);
-        };
-    }, [widget]);
+    const handleSplitRatioChange = React.useCallback((splitRatio) => {
+        preferences.update({ splitRatio });
+    }, [preferences]);
+    const handleImageViewModeChange = React.useCallback((imageViewMode) => {
+        preferences.update({ imageViewMode });
+    }, [preferences]);
     const handleFileDiffActiveChange = React.useCallback((active) => {
         widget.setFileDiffActive(active);
     }, [widget]);
@@ -372,7 +308,7 @@ function ModelDiffView(props) {
             }));
         };
     }, [askAgent, model, state.oldText, state.newText, trans]);
-    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: isBinary, oldText: state.oldText, newText: state.newText, newName: model.filename, oldName: (_b = model.oldFilename) !== null && _b !== void 0 ? _b : model.filename, dark: dark, pierreTheme: pierre, rendermime: rendermime, notebookViewMode: notebookViewMode, diffStyle: diffStyle, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onFileDiffActiveChange: handleFileDiffActiveChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard, onLineAsk: handleLineAsk, trans: trans }));
+    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: isBinary, oldText: state.oldText, newText: state.newText, newName: model.filename, oldName: (_b = model.oldFilename) !== null && _b !== void 0 ? _b : model.filename, dark: dark, pierreTheme: pierre, rendermime: rendermime, notebookViewMode: values.notebookViewMode, diffStyle: values.diffStyle, lineWrap: values.lineWrap, splitRatio: values.splitRatio, onSplitRatioChange: handleSplitRatioChange, imageViewMode: values.imageViewMode, onImageViewModeChange: handleImageViewModeChange, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onFileDiffActiveChange: handleFileDiffActiveChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard, onLineAsk: handleLineAsk, trans: trans }));
 }
 /**
  * Notebook/JSON toggle mounted into a host-owned toolbar.
@@ -392,26 +328,20 @@ class NotebookViewModeToolbarItem extends ReactWidget {
 }
 function NotebookViewModeToolbarControl(props) {
     const { widget } = props;
-    const [mode, setMode] = React.useState(() => widget.notebookViewMode);
+    const { preferences, trans } = widget.context;
+    const { notebookViewMode } = useDiffPreferences(preferences);
     const [available, setAvailable] = React.useState(() => widget.hasNotebookView);
     React.useEffect(() => {
-        const onMode = (sender, next) => {
-            setMode(next);
-        };
         const onAvailable = (sender, next) => {
             setAvailable(next);
         };
-        widget.notebookViewModeChanged.connect(onMode);
         widget.hasNotebookViewChanged.connect(onAvailable);
-        setMode(widget.notebookViewMode);
         setAvailable(widget.hasNotebookView);
         return () => {
-            widget.notebookViewModeChanged.disconnect(onMode);
             widget.hasNotebookViewChanged.disconnect(onAvailable);
         };
     }, [widget]);
-    const trans = widget.context.trans;
-    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => widget.setNotebookViewMode(next), trans: trans }));
+    return (React.createElement(NotebookViewModeControl, { mode: notebookViewMode, available: available, onChange: next => preferences.update({ notebookViewMode: next }), trans: trans }));
 }
 /**
  * Split/Unified toggle mounted into a host-owned toolbar.
@@ -431,26 +361,51 @@ class DiffStyleToolbarItem extends ReactWidget {
 }
 function DiffStyleToolbarControl(props) {
     const { widget } = props;
-    const [style, setStyle] = React.useState(() => widget.diffStyle);
-    const [available, setAvailable] = React.useState(() => widget.fileDiffActive);
+    const { preferences, trans } = widget.context;
+    const { diffStyle, diffStyleControl } = useDiffPreferences(preferences);
+    const available = useFileDiffActive(widget);
+    return (React.createElement(DiffStyleControl, { diffStyle: diffStyle, control: diffStyleControl, available: available, onChange: next => preferences.update({ diffStyle: next }), trans: trans }));
+}
+/**
+ * Line-wrap toggle mounted into a host-owned toolbar.
+ */
+class LineWrapToolbarItem extends ReactWidget {
+    constructor(widget) {
+        super();
+        this._widget = widget;
+        this.addClass('jp-xtralab-DiffWidget-lineWrapToolbarItem');
+    }
+    /**
+     * Render the line-wrap toggle.
+     */
+    render() {
+        return React.createElement(LineWrapToolbarControl, { widget: this._widget });
+    }
+}
+function LineWrapToolbarControl(props) {
+    const { widget } = props;
+    const { preferences, trans } = widget.context;
+    const { lineWrap } = useDiffPreferences(preferences);
+    const available = useFileDiffActive(widget);
+    return (React.createElement(LineWrapControl, { lineWrap: lineWrap, available: available, onChange: next => preferences.update({ lineWrap: next }), trans: trans }));
+}
+/**
+ * Track {@link XtralabDiffWidget.fileDiffActive} for the split/unified and
+ * line-wrap controls.
+ */
+function useFileDiffActive(widget) {
+    const [active, setActive] = React.useState(() => widget.fileDiffActive);
     React.useEffect(() => {
-        const onStyle = (sender, next) => {
-            setStyle(next);
-        };
-        const onAvailable = (sender, next) => {
-            setAvailable(next);
+        const onActive = (sender, next) => {
+            setActive(next);
         };
-        widget.diffStyleChanged.connect(onStyle);
-        widget.fileDiffActiveChanged.connect(onAvailable);
-        setStyle(widget.diffStyle);
-        setAvailable(widget.fileDiffActive);
+        widget.fileDiffActiveChanged.connect(onActive);
+        setActive(widget.fileDiffActive);
         return () => {
-            widget.diffStyleChanged.disconnect(onStyle);
-            widget.fileDiffActiveChanged.disconnect(onAvailable);
+            widget.fileDiffActiveChanged.disconnect(onActive);
         };
     }, [widget]);
-    const trans = widget.context.trans;
-    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => widget.setDiffStyle(next), trans: trans }));
+    return active;
 }
 /**
  * Mount the shared diff toolbar controls into a host-owned toolbar.
@@ -458,4 +413,5 @@ function DiffStyleToolbarControl(props) {
 export function addDiffToolbarItems(toolbar, widget) {
     toolbar.addItem('xtralab-notebook-view-mode', new NotebookViewModeToolbarItem(widget));
     toolbar.addItem('xtralab-diff-style', new DiffStyleToolbarItem(widget));
+    toolbar.addItem('xtralab-diff-line-wrap', new LineWrapToolbarItem(widget));
 }

package/lib/git/imageDiff.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { TranslationBundle } from '@jupyterlab/translation';
+import type { ImageDiffViewMode } from './diffPreferences';
 export declare const IMAGE_DIFF_EXTENSIONS: string[];
 /**
  * The `data:` MIME subtype for a path xtralab renders as an image, or
@@ -22,6 +23,14 @@ interface IImageDiffViewProps {
      * MIME subtype from {@link imageDataType}.
      */
     fileType: string;
+    /**
+     * The selected comparison mode (host-controlled).
+     */
+    mode: ImageDiffViewMode;
+    /**
+     * Called when the user picks another comparison mode.
+     */
+    onModeChange: (mode: ImageDiffViewMode) => void;
     /**
      * Translation bundle for user-facing strings.
      */

package/lib/git/imageDiff.js

@@ -33,27 +33,6 @@ export function imageDataType(path) {
     }
     return (_a = IMAGE_DATA_TYPES[lower.slice(dot)]) !== null && _a !== void 0 ? _a : null;
 }
-const IMAGE_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:image-diff-view-mode';
-function readStoredImageViewMode() {
-    try {
-        const raw = window.localStorage.getItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY);
-        if (raw === '2-up' || raw === 'swipe' || raw === 'onion') {
-            return raw;
-        }
-    }
-    catch (_a) {
-        // localStorage can throw in privacy/sandboxed contexts.
-    }
-    return '2-up';
-}
-function writeStoredImageViewMode(mode) {
-    try {
-        window.localStorage.setItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY, mode);
-    }
-    catch (_a) {
-        // Best-effort.
-    }
-}
 /**
  * Strip whitespace from a base64 payload: the server's `base64.encodebytes`
  * inserts newlines some browsers reject in `data:` URLs, and the cleaned
@@ -97,21 +76,16 @@ function toSide(raw, fileType) {
  * segmented-control styling) plus the selected 2-up / swipe / onion view.
  */
 export function ImageDiffView(props) {
-    const { reference, challenger, fileType, trans } = props;
+    const { reference, challenger, fileType, mode, onModeChange, trans } = props;
     const ref = React.useMemo(() => toSide(reference, fileType), [reference, fileType]);
     const chall = React.useMemo(() => toSide(challenger, fileType), [challenger, fileType]);
-    const [mode, setMode] = React.useState(() => readStoredImageViewMode());
-    const changeMode = React.useCallback((next) => {
-        setMode(next);
-        writeStoredImageViewMode(next);
-    }, []);
     return (React.createElement("div", { className: "jp-xtralab-ImageDiff" },
         React.createElement("div", { className: "jp-xtralab-ImageDiff-header" },
             React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": trans.__('Image diff view mode') }, [
                 ['2-up', trans.__('2-up')],
                 ['swipe', trans.__('Swipe')],
                 ['onion', trans.__('Onion Skin')]
-            ].map(([value, label]) => (React.createElement("button", { key: value, type: "button", role: "tab", "aria-selected": mode === value, "data-active": mode === value, className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => changeMode(value) }, label))))),
+            ].map(([value, label]) => (React.createElement("button", { key: value, type: "button", role: "tab", "aria-selected": mode === value, "data-active": mode === value, className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onModeChange(value) }, label))))),
         React.createElement("div", { className: "jp-xtralab-ImageDiff-body" }, mode === '2-up' ? (React.createElement(TwoUp, { reference: ref, challenger: chall, trans: trans })) : mode === 'swipe' ? (React.createElement(Swipe, { reference: ref, challenger: chall, trans: trans })) : (React.createElement(OnionSkin, { reference: ref, challenger: chall, trans: trans })))));
 }
 function useNaturalSize() {

package/lib/git/index.js

@@ -1,11 +1,42 @@
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { IAskAgent } from '../askAgent/tokens';
 import { CommandIDs, PREVIEW_DIFF_WIDGET_ID, pinnedDiffWidgetId, registerGitCommands } from './commands';
+import { DiffPreferences, IDiffPreferences } from './diffPreferences';
 import diffProviderPlugin from './diffProvider';
 const GIT_DIFF_COMMAND_PLUGIN_ID = 'xtralab:git-diff-command';
+const GIT_DIFF_PREFERENCES_PLUGIN_ID = 'xtralab:git-diff-preferences';
 const GIT_DIFF_TRACKER_NAMESPACE = 'xtralab-git-diff';
+/**
+ * The display choices shared by the launcher diff and the Git panel diff.
+ */
+const diffPreferencesPlugin = {
+    id: GIT_DIFF_PREFERENCES_PLUGIN_ID,
+    description: 'Keeps the git diff display choices in the settings and the state database.',
+    autoStart: true,
+    provides: IDiffPreferences,
+    optional: [ISettingRegistry, IStateDB],
+    activate: (app, settingRegistry, state) => {
+        const preferences = new DiffPreferences();
+        if (settingRegistry !== null) {
+            settingRegistry
+                .load(GIT_DIFF_PREFERENCES_PLUGIN_ID)
+                .then(settings => preferences.connectSettings(settings))
+                .catch(reason => {
+                console.error(`xtralab: failed to load settings for ${GIT_DIFF_PREFERENCES_PLUGIN_ID}`, reason);
+            });
+        }
+        if (state !== null) {
+            preferences.connectState(state).catch(reason => {
+                console.error('xtralab: failed to restore the diff split', reason);
+            });
+        }
+        return preferences;
+    }
+};
 /**
  * The launcher's git diff command plugin. The upstream git panel stays
  * enabled; this only adds `xtralab:git:open-diff` and preview/pinned-tab
@@ -15,8 +46,14 @@ const diffCommandPlugin = {
     id: GIT_DIFF_COMMAND_PLUGIN_ID,
     description: "The launcher dashboard's side-by-side git diff command, powered by @pierre/diffs.",
     autoStart: true,
-    optional: [IThemeManager, IRenderMimeRegistry, ITranslator, IAskAgent],
-    activate: (app, themeManager, rendermime, translator, askAgent) => {
+    optional: [
+        IThemeManager,
+        IRenderMimeRegistry,
+        ITranslator,
+        IAskAgent,
+        IDiffPreferences
+    ],
+    activate: (app, themeManager, rendermime, translator, askAgent, preferences) => {
         const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
         const tracker = new WidgetTracker({
             namespace: GIT_DIFF_TRACKER_NAMESPACE
@@ -32,6 +69,7 @@ const diffCommandPlugin = {
             contentsManager: app.serviceManager.contents,
             rendermime,
             askAgent,
+            preferences: preferences !== null && preferences !== void 0 ? preferences : new DiffPreferences(),
             trans,
             trackDiff: widget => tracker.add(widget),
             onPinned: current => {
@@ -52,6 +90,7 @@ const diffCommandPlugin = {
     }
 };
 const plugins = [
+    diffPreferencesPlugin,
     diffCommandPlugin,
     diffProviderPlugin
 ];

package/lib/git/notebookDiff.js

@@ -5,7 +5,7 @@ import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
 import { FileDiff } from '@pierre/diffs/react';
 import { parseDiffFromFile } from '@pierre/diffs';
-import { resolveDiffTheme } from './diffTheme';
+import { DIFF_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
 const NOTEBOOK_DIFF_CSS_CLASS = 'jp-xtralab-NotebookDiff';
 /**
  * Parse notebook JSON. Returns `null` when the text is not a notebook so
@@ -317,7 +317,8 @@ function diffLibraryOptions(theme, dark) {
         diffStyle: 'split',
         disableFileHeader: true,
         theme,
-        themeType: dark ? 'dark' : 'light'
+        themeType: dark ? 'dark' : 'light',
+        unsafeCSS: DIFF_SCROLLBAR_CSS
     };
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtralab",
-    "version": "0.15.1",
+    "version": "0.15.2",
     "description": "An opinionated JupyterLab meta-package that bundles a curated set of extensions, ships a path-first file browser, renders jupyterlab-git's text, notebook and image diffs with its own viewers, and applies a quieter default workspace configuration.",
     "keywords": [
         "jupyter",
@@ -90,7 +90,8 @@
         "@lumino/polling": "^2.1.5",
         "@lumino/signaling": "^2.1.5",
         "@lumino/widgets": "^2.8.0",
-        "@pierre/diffs": "^1.4.1",
+        "@pierre/diffs": "^1.5.1",
+        "@pierre/icons": "^0.9.0",
         "@pierre/trees": "1.0.0-beta.4",
         "detect-indent": "^7.0.2",
         "ignore": "^5.3.2",
@@ -136,7 +137,8 @@
             "@jupyterlab/git": {
                 "bundled": false,
                 "singleton": true
-            }
+            },
+            "@pierre/icons": false
         },
         "disabledExtensions": [
             "@jupyterlab/git:notebook-diff",

package/schema/git-diff-preferences.json

@@ -0,0 +1,42 @@
+{
+  "title": "xtralab Git Diff",
+  "description": "Display options for the git diff views in the launcher and the Git panel.",
+  "type": "object",
+  "properties": {
+    "diffStyle": {
+      "type": "string",
+      "enum": ["split", "unified"],
+      "title": "Layout",
+      "description": "Show text diffs side by side (split) or in one column (unified).",
+      "default": "split"
+    },
+    "diffStyleControl": {
+      "type": "string",
+      "enum": ["buttons", "toggle"],
+      "title": "Layout buttons",
+      "description": "Show two toolbar buttons for the split and unified layouts (buttons), or one button that switches between them (toggle).",
+      "default": "buttons"
+    },
+    "lineWrap": {
+      "type": "boolean",
+      "title": "Wrap long lines",
+      "description": "When true, long lines in text diffs wrap to the width of the view. When false, they scroll horizontally.",
+      "default": false
+    },
+    "notebookViewMode": {
+      "type": "string",
+      "enum": ["notebook", "json"],
+      "title": "Notebook diff view",
+      "description": "Show notebook diffs cell by cell (notebook) or as the diff of the notebook JSON (json).",
+      "default": "notebook"
+    },
+    "imageViewMode": {
+      "type": "string",
+      "enum": ["2-up", "swipe", "onion"],
+      "title": "Image diff view",
+      "description": "Compare images side by side (2-up), with a slider (swipe), or overlaid (onion).",
+      "default": "2-up"
+    }
+  },
+  "additionalProperties": false
+}

package/src/fileBrowser/commands.ts

@@ -21,6 +21,7 @@ import {
   fileIcon,
   filterIcon,
   IDisposableMenuItem,
+  LabIcon,
   newFolderIcon,
   RankedMenu,
   refreshIcon
@@ -28,7 +29,13 @@ import {
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { ContextMenu, Widget } from '@lumino/widgets';
 
+import {
+  CommandArguments as GitCommandArguments,
+  CommandIDs as GitCommandIDs
+} from '../git/commands';
+import type { IFileChange } from '../git/tokens';
 import { toCanonicalPath, toServerPath } from './contents';
+import { GIT_REPO_PATH } from './gitStatus';
 import { FILE_BROWSER_ID, IXtralabFileBrowser } from './widget';
 
 /**
@@ -39,6 +46,7 @@ import { FILE_BROWSER_ID, IXtralabFileBrowser } from './widget';
 export namespace CommandIDs {
   export const open = 'xtralab:open';
   export const openBrowserTab = 'xtralab:open-browser-tab';
+  export const openGitDiff = 'xtralab:open-git-diff';
   export const rename = 'xtralab:rename';
   export const del = 'xtralab:delete';
   export const duplicate = 'xtralab:duplicate';
@@ -135,6 +143,23 @@ function getOpenPaths(
   return candidates.filter(path => !path.endsWith('/'));
 }
 
+/**
+ * Git changes of the target file, at most one staged and one unstaged.
+ * Status paths are repo-relative; like the tree's git badges, this assumes
+ * the repo root is the server root.
+ */
+function getTargetChanges(
+  app: JupyterFrontEnd,
+  browser: IXtralabFileBrowser
+): IFileChange[] {
+  const targetPath = getTargetPath(app, browser);
+  if (targetPath === undefined) {
+    return [];
+  }
+  const serverPath = toServerPath(targetPath);
+  return browser.gitChanges.filter(change => change.path === serverPath);
+}
+
 function hasTarget(
   app: JupyterFrontEnd,
   browser: IXtralabFileBrowser
@@ -242,6 +267,19 @@ function makeOpenWithUpdater(
         command: CommandIDs.open
       })
     );
+
+    const changes = getTargetChanges(app, browser);
+    if (changes.length > 0) {
+      items.push(submenu.addItem({ type: 'separator' }));
+      for (const change of changes) {
+        items.push(
+          submenu.addItem({
+            args: { group: change.group },
+            command: CommandIDs.openGitDiff
+          })
+        );
+      }
+    }
   };
 }
 
@@ -303,6 +341,32 @@ export function registerCommands(opts: IRegisterCommandsOptions): () => void {
     }
   });
 
+  commands.addCommand(CommandIDs.openGitDiff, {
+    label: args =>
+      args.group === 'staged'
+        ? trans.__('Git Diff (Staged)')
+        : trans.__('Git Diff (Working)'),
+    icon: LabIcon.resolve({ icon: 'git:diff' }).bindprops({
+      stylesheet: 'menuItem'
+    }),
+    execute: async (args: ReadonlyPartialJSONObject) => {
+      const change = getTargetChanges(app, browser).find(
+        candidate => candidate.group === args.group
+      );
+      if (change === undefined) {
+        return;
+      }
+      const diffArgs: GitCommandArguments.IOpenDiff = {
+        repoPath: GIT_REPO_PATH,
+        change
+      };
+      return commands.execute(
+        GitCommandIDs.openDiff,
+        diffArgs as unknown as ReadonlyPartialJSONObject
+      );
+    }
+  });
+
   commands.addCommand(CommandIDs.rename, {
     label: trans.__('Rename…'),
     icon: editIcon.bindprops({ stylesheet: 'menuItem' }),

package/src/fileBrowser/fileBrowser.tsx

@@ -32,7 +32,7 @@ import {
   useRootDropZone
 } from './dragAndDrop';
 import { buildIgnoredEntries, loadGitignoreMatcher } from './gitignore';
-import { loadGitStatusEntries } from './gitStatus';
+import { GIT_REPO_PATH, loadGitChanges, toGitStatusEntries } from './gitStatus';
 import { FILE_BROWSER_ICONS } from './icons';
 import type { XtralabFileBrowser } from './widget';
 
@@ -54,12 +54,6 @@ const FILE_LISTING_REFRESH_INTERVAL_MS = 10000;
 
 const FILE_LISTING_REFRESH_MAX_MS = 300_000;
 
-/**
- * Repo path for `/git/*` calls; empty means the server root, letting git
- * resolve the enclosing repo (same convention as the git panel).
- */
-const GIT_REPO_PATH = '';
-
 const FILE_TREE_TAG = 'file-tree-container';
 
 /**
@@ -180,11 +174,12 @@ export function FileBrowserComponent(
     };
 
     const refreshGitStatus = async (): Promise<void> => {
-      const next = await loadGitStatusEntries(GIT_REPO_PATH);
+      const changes = await loadGitChanges(GIT_REPO_PATH);
       if (cancelled) {
         return;
       }
-      gitStatusEntries = next;
+      gitStatusEntries = toGitStatusEntries(changes);
+      widget?.updateGitChanges(changes);
       syncGitStatus();
     };