xtralab 0.11.1 → 0.12.0

package/lib/git/diffSurface.js

@@ -143,7 +143,7 @@ export function isPierreTheme(themeManager) {
  * Shared renderer for text, notebook and image diffs.
  */
 export function DiffSurface(props) {
-    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, pierreTheme, rendermime, notebookViewMode, diffStyle, onNotebookAvailabilityChange, onFileDiffActiveChange, onMetadataChange, hunkDiscard } = props;
+    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, pierreTheme, rendermime, notebookViewMode, diffStyle, onNotebookAvailabilityChange, onFileDiffActiveChange, onMetadataChange, hunkDiscard, onLineAsk, trans } = props;
     const hasContent = !loading && error === null && !isBinary;
     // Raster images take a dedicated `<img>`-based view instead of a
     // text/notebook diff; the host passes the two sides as base64 strings in
@@ -248,9 +248,20 @@ export function DiffSurface(props) {
         }
         const { hunkIndex } = annotation.metadata;
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-hunkAnnotation" },
-            React.createElement("button", { type: "button", className: "jp-xtralab-DiffWidget-hunkButton", title: "Discard this hunk's changes", "aria-label": "Discard hunk", onClick: () => void handleDiscardHunk(hunkIndex) },
+            React.createElement("button", { type: "button", className: "jp-xtralab-DiffWidget-hunkButton", title: trans.__("Discard this hunk's changes"), "aria-label": trans.__('Discard hunk'), onClick: () => void handleDiscardHunk(hunkIndex) },
                 React.createElement(undoIcon.react, { tag: "span", className: "jp-xtralab-DiffWidget-hunkButton-icon", elementSize: "normal" }))));
-    }, [handleDiscardHunk]);
+    }, [handleDiscardHunk, trans]);
+    const handleGutterUtilityClick = React.useCallback((range) => {
+        var _a, _b, _c;
+        if (onLineAsk === undefined) {
+            return;
+        }
+        // Anchor to the gutter "+" button that was just clicked. It lives in
+        // the `@pierre/diffs` shadow root (which is open), parked on the
+        // hovered/selected line's number element.
+        const slot = (_c = (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('diffs-container')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('[data-gutter-utility-slot]');
+        onLineAsk(range, slot instanceof Element ? slot.getBoundingClientRect() : null);
+    }, [onLineAsk]);
     const handleResizerPointerDown = React.useCallback((event) => {
         // Only react to primary-button drags. Right-click / middle-click on
         // the handle should pass through to the browser default.
@@ -294,24 +305,49 @@ export function DiffSurface(props) {
         setLeftRatio(DEFAULT_SPLIT_RATIO);
         writeStoredSplitRatio(DEFAULT_SPLIT_RATIO);
     }, []);
+    const handleResizerKeyDown = React.useCallback((event) => {
+        const step = event.shiftKey ? 0.1 : 0.01;
+        let next = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = leftRatioRef.current - step;
+                break;
+            case 'ArrowRight':
+                next = leftRatioRef.current + step;
+                break;
+            case 'Home':
+                next = MIN_SPLIT_RATIO;
+                break;
+            case 'End':
+                next = MAX_SPLIT_RATIO;
+                break;
+        }
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        const clamped = Math.max(MIN_SPLIT_RATIO, Math.min(MAX_SPLIT_RATIO, next));
+        setLeftRatio(clamped);
+        writeStoredSplitRatio(clamped);
+    }, []);
     if (loading) {
-        return React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "Loading diff\u2026");
+        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, trans.__('Loading diff…')));
     }
     if (error !== null) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status", "data-error": "true" }, error));
     }
     if (isBinary) {
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "Binary file \u2014 diff not supported."));
+        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, trans.__('Binary file — diff not supported.')));
     }
     if (imageType !== null) {
         // `oldText`/`newText` carry the two revisions as base64 here. The
         // image view owns its own layout and mode selector, so it does not
         // use the split resizer or the notebook/JSON toggle.
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
-            React.createElement(ImageDiffView, { reference: oldText, challenger: newText, fileType: imageType })));
+            React.createElement(ImageDiffView, { reference: oldText, challenger: newText, fileType: imageType, trans: trans })));
     }
     if (!showNotebookView && !showFileDiff) {
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "No content to diff."));
+        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, trans.__('No content to diff.')));
     }
     // Custom property set on the diffs-container host. The library's
     // shadow-root rule consumes it via `var(--xtralab-split-cols, …)` (see
@@ -323,7 +359,7 @@ export function DiffSurface(props) {
     };
     return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
         React.createElement("div", { ref: wrapperRef, className: "jp-xtralab-DiffWidget-body" },
-            React.createElement("div", { className: "jp-xtralab-DiffWidget-scroll" }, showNotebookView && notebookDiff !== null ? (React.createElement(NotebookDiffView, { diff: notebookDiff, dark: dark, pierreTheme: pierreTheme, rendermime: rendermime })) : showFileDiff && metadata !== null ? (React.createElement(FileDiff, { fileDiff: metadata, lineAnnotations: lineAnnotations, renderAnnotation: renderAnnotation, style: hostStyle, 
+            React.createElement("div", { className: "jp-xtralab-DiffWidget-scroll" }, showNotebookView && notebookDiff !== null ? (React.createElement(NotebookDiffView, { diff: notebookDiff, dark: dark, pierreTheme: pierreTheme, rendermime: rendermime, trans: trans })) : showFileDiff && metadata !== null ? (React.createElement(FileDiff, { fileDiff: metadata, lineAnnotations: lineAnnotations, renderAnnotation: renderAnnotation, style: hostStyle, 
                 // Disable the worker pool: JupyterLab's webpack federation
                 // pipeline doesn't ship the library's
                 // `@pierre/diffs/worker/worker.js` file at a URL the worker
@@ -343,9 +379,19 @@ export function DiffSurface(props) {
                     // string constant lets the library short-circuit the
                     // re-render path it uses when this option actually
                     // changes.
-                    unsafeCSS: SPLIT_RESIZE_CSS
+                    unsafeCSS: SPLIT_RESIZE_CSS,
+                    // Line selection + the gutter "+" button feed the
+                    // ask-agent popup; only wired up when a handler exists so
+                    // a plain diff keeps its passive gutter.
+                    ...(onLineAsk !== undefined
+                        ? {
+                            enableLineSelection: true,
+                            enableGutterUtility: true,
+                            onGutterUtilityClick: handleGutterUtilityClick
+                        }
+                        : {})
                 } })) : null),
-            showFileDiff && diffStyle === 'split' ? (React.createElement("div", { className: "jp-xtralab-DiffWidget-resizer", style: { left: `${leftPercent}%` }, role: "separator", "aria-orientation": "vertical", "aria-valuenow": Math.round(leftPercent), "aria-valuemin": Math.round(MIN_SPLIT_RATIO * 100), "aria-valuemax": Math.round(MAX_SPLIT_RATIO * 100), title: "Drag to resize the diff panes (double-click to reset)", onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick })) : null)));
+            showFileDiff && diffStyle === 'split' ? (React.createElement("div", { className: "jp-xtralab-DiffWidget-resizer", style: { left: `${leftPercent}%` }, role: "separator", "aria-orientation": "vertical", "aria-valuenow": Math.round(leftPercent), "aria-valuemin": Math.round(MIN_SPLIT_RATIO * 100), "aria-valuemax": Math.round(MAX_SPLIT_RATIO * 100), "aria-label": trans.__('Resize the diff panes'), tabIndex: 0, title: trans.__('Drag to resize the diff panes (double-click to reset)'), onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick, onKeyDown: handleResizerKeyDown })) : null)));
 }
 /**
  * Segmented Notebook/JSON selector. Hosts mount this into whatever toolbar
@@ -354,13 +400,13 @@ export function DiffSurface(props) {
  * from the same state they pass to {@link DiffSurface}.
  */
 export function NotebookViewModeControl(props) {
-    const { mode, available, onChange } = props;
+    const { mode, available, onChange, trans } = props;
     if (!available) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": "Notebook diff view mode" },
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'notebook', "data-active": mode === 'notebook', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onChange('notebook') }, "Notebook"),
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'json', "data-active": mode === 'json', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onChange('json') }, "JSON")));
+    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": trans.__('Notebook diff view mode') },
+        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'notebook', "data-active": mode === 'notebook', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onChange('notebook') }, trans.__('Notebook')),
+        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'json', "data-active": mode === 'json', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onChange('json') }, trans.__('JSON'))));
 }
 /**
  * Split / unified glyphs, inlined from the `@pierre/diffs` icon sprite
@@ -387,13 +433,13 @@ function DiffUnifiedIcon() {
  * surface's `onFileDiffActiveChange`.
  */
 export function DiffStyleControl(props) {
-    const { diffStyle, available, onChange } = props;
+    const { diffStyle, available, onChange, trans } = props;
     if (!available) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": "Diff view style" },
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'split', "data-active": diffStyle === 'split', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: "Split (side-by-side) view", "aria-label": "Split view", onClick: () => onChange('split') },
+    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": trans.__('Diff view style') },
+        React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'split', "data-active": diffStyle === 'split', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: trans.__('Split (side-by-side) view'), "aria-label": trans.__('Split view'), onClick: () => onChange('split') },
             React.createElement(DiffSplitIcon, null)),
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'unified', "data-active": diffStyle === 'unified', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: "Unified (inline) view", "aria-label": "Unified view", onClick: () => onChange('unified') },
+        React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'unified', "data-active": diffStyle === 'unified', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: trans.__('Unified (inline) view'), "aria-label": trans.__('Unified view'), onClick: () => onChange('unified') },
             React.createElement(DiffUnifiedIcon, null))));
 }

package/lib/git/diffTheme.d.ts

@@ -1,8 +1,4 @@
 import { type DiffsThemeNames } from '@pierre/diffs';
-/**
- * Shiki CSS-variable theme used for non-Pierre JupyterLab themes.
- */
-export declare const JUPYTERLAB_DIFF_THEME: DiffsThemeNames;
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/lib/git/diffTheme.js

@@ -2,7 +2,7 @@ import { registerCustomCSSVariableTheme } from '@pierre/diffs';
 /**
  * Shiki CSS-variable theme used for non-Pierre JupyterLab themes.
  */
-export const JUPYTERLAB_DIFF_THEME = 'jupyterlab';
+const JUPYTERLAB_DIFF_THEME = 'jupyterlab';
 /**
  * Register a Shiki theme whose token colors read JupyterLab's editor
  * variables. The values are CSS variables, so theme changes recolor the diff.

package/lib/git/diffWidget.d.ts

@@ -3,9 +3,11 @@ import { IThemeManager } from '@jupyterlab/apputils';
 import { Git } from '@jupyterlab/git';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
+import type { IAskAgent } from '../askAgent/tokens';
 import { DIFF_WIDGET_CSS_CLASS, type DiffStyle, type NotebookDiffViewMode } from './diffSurface';
 export { DIFF_WIDGET_CSS_CLASS };
 /**
@@ -23,6 +25,12 @@ export interface IXtralabDiffContext {
     contentsManager: Contents.IManager;
     rendermime: IRenderMimeRegistry | null;
     themeManager: IThemeManager | null;
+    /**
+     * The ask-agent popup; when available, diff line selections get an
+     * "ask an agent about these lines" gutter button.
+     */
+    askAgent: IAskAgent | null;
+    trans: TranslationBundle;
 }
 /**
  * Shared diff widget used by the launcher and by `jupyterlab-git`.
@@ -67,6 +75,7 @@ export declare class XtralabDiffWidget extends ReactWidget implements Git.Diff.I
     get emptied(): ISignal<this, void>;
     notifyEmptied(): void;
     settleRefresh(): void;
+    dispose(): void;
     get reloadNonce(): number;
     get context(): IXtralabDiffContext;
     protected render(): React.ReactElement;

package/lib/git/diffWidget.js

@@ -4,6 +4,7 @@ import { Git } from '@jupyterlab/git';
 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 { imageDataType } from './imageDiff';
 export { DIFF_WIDGET_CSS_CLASS };
@@ -64,6 +65,9 @@ export class XtralabDiffWidget extends ReactWidget {
      * Re-pull both sides of the model and re-render.
      */
     async refresh() {
+        // Settle any refresh still awaiting so a rapid second call cannot orphan
+        // the earlier caller's promise.
+        this.settleRefresh();
         const done = new PromiseDelegate();
         this._pendingRefresh = done;
         this._reloadNonce += 1;
@@ -141,6 +145,13 @@ export class XtralabDiffWidget extends ReactWidget {
         this._pendingRefresh = null;
         pending === null || pending === void 0 ? void 0 : pending.resolve();
     }
+    dispose() {
+        // Release any in-flight refresh awaiter so a host that awaits refresh()
+        // (jupyterlab-git re-shows its diff button only once it resolves) does not
+        // hang when the widget is torn down mid-fetch.
+        this.settleRefresh();
+        super.dispose();
+    }
     get reloadNonce() {
         return this._reloadNonce;
     }
@@ -155,7 +166,7 @@ function ModelDiffView(props) {
     var _a, _b;
     const { widget } = props;
     const model = widget.model;
-    const { contentsManager, rendermime, themeManager } = widget.context;
+    const { contentsManager, rendermime, themeManager, askAgent, trans } = widget.context;
     const nonce = widget.reloadNonce;
     const [state, setState] = React.useState({
         loading: true,
@@ -166,7 +177,7 @@ function ModelDiffView(props) {
     // Mirror toolbar-driven notebook view changes into React state.
     const [notebookViewMode, setNotebookViewMode] = React.useState(() => widget.notebookViewMode);
     React.useEffect(() => {
-        const handler = (_sender, mode) => {
+        const handler = (sender, mode) => {
             setNotebookViewMode(mode);
         };
         widget.notebookViewModeChanged.connect(handler);
@@ -181,7 +192,7 @@ function ModelDiffView(props) {
     // Mirror toolbar-driven diff-style changes into React state.
     const [diffStyle, setDiffStyle] = React.useState(() => widget.diffStyle);
     React.useEffect(() => {
-        const handler = (_sender, style) => {
+        const handler = (sender, style) => {
             setDiffStyle(style);
         };
         widget.diffStyleChanged.connect(handler);
@@ -302,7 +313,22 @@ function ModelDiffView(props) {
             void widget.refresh();
         }
     }), [canDiscardHunk, contentsManager, serverPath, widget]);
-    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 }));
+    const handleLineAsk = React.useMemo(() => {
+        if (askAgent === null) {
+            return undefined;
+        }
+        return (range, anchor) => {
+            askAgent.open(buildDiffAskRequest({
+                model,
+                oldText: state.oldText,
+                newText: state.newText,
+                range,
+                anchor,
+                trans
+            }));
+        };
+    }, [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 }));
 }
 /**
  * Notebook/JSON toggle mounted into a host-owned toolbar.
@@ -322,10 +348,10 @@ function NotebookViewModeToolbarControl(props) {
     const [mode, setMode] = React.useState(() => widget.notebookViewMode);
     const [available, setAvailable] = React.useState(() => widget.hasNotebookView);
     React.useEffect(() => {
-        const onMode = (_sender, next) => {
+        const onMode = (sender, next) => {
             setMode(next);
         };
-        const onAvailable = (_sender, next) => {
+        const onAvailable = (sender, next) => {
             setAvailable(next);
         };
         widget.notebookViewModeChanged.connect(onMode);
@@ -337,7 +363,8 @@ function NotebookViewModeToolbarControl(props) {
             widget.hasNotebookViewChanged.disconnect(onAvailable);
         };
     }, [widget]);
-    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => widget.setNotebookViewMode(next) }));
+    const trans = widget.context.trans;
+    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => widget.setNotebookViewMode(next), trans: trans }));
 }
 /**
  * Split/Unified toggle mounted into a host-owned toolbar.
@@ -357,10 +384,10 @@ function DiffStyleToolbarControl(props) {
     const [style, setStyle] = React.useState(() => widget.diffStyle);
     const [available, setAvailable] = React.useState(() => widget.fileDiffActive);
     React.useEffect(() => {
-        const onStyle = (_sender, next) => {
+        const onStyle = (sender, next) => {
             setStyle(next);
         };
-        const onAvailable = (_sender, next) => {
+        const onAvailable = (sender, next) => {
             setAvailable(next);
         };
         widget.diffStyleChanged.connect(onStyle);
@@ -372,7 +399,8 @@ function DiffStyleToolbarControl(props) {
             widget.fileDiffActiveChanged.disconnect(onAvailable);
         };
     }, [widget]);
-    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => widget.setDiffStyle(next) }));
+    const trans = widget.context.trans;
+    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => widget.setDiffStyle(next), trans: trans }));
 }
 /**
  * Mount the shared diff toolbar controls into a host-owned toolbar.

package/lib/git/imageDiff.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-/** The file extensions registered as the xtralab image diff provider. */
+import type { TranslationBundle } from '@jupyterlab/translation';
+/**
+ * The file extensions registered as the xtralab image diff provider.
+ */
 export declare const IMAGE_DIFF_EXTENSIONS: string[];
 /**
  * The `data:` MIME subtype for a path xtralab renders as an image, or
@@ -7,12 +10,22 @@ export declare const IMAGE_DIFF_EXTENSIONS: string[];
  */
 export declare function imageDataType(path: string): string | null;
 interface IImageDiffViewProps {
-    /** Base64 of the reference (old) revision; empty when added. */
+    /**
+     * Base64 of the reference (old) revision; empty when added.
+     */
     reference: string;
-    /** Base64 of the challenger (new) revision; empty when deleted. */
+    /**
+     * Base64 of the challenger (new) revision; empty when deleted.
+     */
     challenger: string;
-    /** MIME subtype from {@link imageDataType}. */
+    /**
+     * MIME subtype from {@link imageDataType}.
+     */
     fileType: string;
+    /**
+     * Translation bundle for user-facing strings.
+     */
+    trans: TranslationBundle;
 }
 /**
  * The image comparison surface: a segmented mode selector (reusing the

package/lib/git/imageDiff.js

@@ -25,7 +25,9 @@ const IMAGE_DATA_TYPES = {
     '.bmp': 'bmp',
     '.ico': 'x-icon'
 };
-/** The file extensions registered as the xtralab image diff provider. */
+/**
+ * The file extensions registered as the xtralab image diff provider.
+ */
 export const IMAGE_DIFF_EXTENSIONS = Object.keys(IMAGE_DATA_TYPES);
 /**
  * The `data:` MIME subtype for a path xtralab renders as an image, or
@@ -71,7 +73,9 @@ function writeStoredImageViewMode(mode) {
 function cleanBase64(value) {
     return value.replace(/\s+/g, '');
 }
-/** Decoded byte length of a (whitespace-free) base64 string. */
+/**
+ * Decoded byte length of a (whitespace-free) base64 string.
+ */
 function base64ByteLength(clean) {
     if (clean.length === 0) {
         return 0;
@@ -108,7 +112,7 @@ function toSide(raw, fileType) {
  * plus the selected 2-up / swipe / onion-skin view.
  */
 export function ImageDiffView(props) {
-    const { reference, challenger, fileType } = props;
+    const { reference, challenger, fileType, 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());
@@ -118,12 +122,12 @@ export function ImageDiffView(props) {
     }, []);
     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": "Image diff view mode" }, [
-                ['2-up', '2-up'],
-                ['swipe', 'Swipe'],
-                ['onion', 'Onion Skin']
+            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))))),
-        React.createElement("div", { className: "jp-xtralab-ImageDiff-body" }, mode === '2-up' ? (React.createElement(TwoUp, { reference: ref, challenger: chall })) : mode === 'swipe' ? (React.createElement(Swipe, { reference: ref, challenger: chall })) : (React.createElement(OnionSkin, { reference: ref, challenger: chall })))));
+        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() {
     const [size, setSize] = React.useState(null);
@@ -142,16 +146,16 @@ function caption(side, size, emptyLabel) {
     const dims = size !== null ? `${size[0]}×${size[1]} · ` : '';
     return `${dims}${formatBytes(side.bytes)}`;
 }
-function TwoUp({ reference, challenger }) {
+function TwoUp({ reference, challenger, trans }) {
     const [refSize, onRefLoad] = useNaturalSize();
     const [challSize, onChallLoad] = useNaturalSize();
     return (React.createElement("div", { className: "jp-xtralab-ImageDiff-twoUp" },
         React.createElement("figure", { className: "jp-xtralab-ImageDiff-col" },
-            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "reference" }, reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: reference.uri, alt: "Reference revision", onLoad: onRefLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, "No previous image"))),
-            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(reference, refSize, 'Added'))),
+            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "reference" }, reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: reference.uri, alt: trans.__('Reference revision'), onLoad: onRefLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, trans.__('No previous image')))),
+            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(reference, refSize, trans.__('Added')))),
         React.createElement("figure", { className: "jp-xtralab-ImageDiff-col" },
-            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "challenger" }, challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: challenger.uri, alt: "Challenger revision", onLoad: onChallLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, "Deleted"))),
-            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(challenger, challSize, 'Deleted')))));
+            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "challenger" }, challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: challenger.uri, alt: trans.__('Challenger revision'), onLoad: onChallLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, trans.__('Deleted')))),
+            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(challenger, challSize, trans.__('Deleted'))))));
 }
 /**
  * Range slider shared by the swipe and onion-skin views. A native
@@ -162,10 +166,64 @@ function RangeSlider(props) {
     const { value, onChange, ariaLabel } = props;
     return (React.createElement("input", { className: "jp-xtralab-ImageDiff-slider", type: "range", min: 0, max: 100, step: 1, value: value, "aria-label": ariaLabel, onChange: event => onChange(Number(event.target.value)) }));
 }
-function Swipe({ reference, challenger }) {
+/**
+ * Fit a `naturalWidth × naturalHeight` image inside an `areaWidth ×
+ * areaHeight` box without upscaling past its intrinsic size — the same
+ * "contain, never enlarge" rule the 2-up and onion views get for free from
+ * `max-width/height: 100%; width/height: auto`. Returns the displayed pixel
+ * box, or `null` until both the image and the area have been measured.
+ */
+function containBox(naturalWidth, naturalHeight, areaWidth, areaHeight) {
+    if (naturalWidth <= 0 ||
+        naturalHeight <= 0 ||
+        areaWidth <= 0 ||
+        areaHeight <= 0) {
+        return null;
+    }
+    const scale = Math.min(areaWidth / naturalWidth, areaHeight / naturalHeight, 1);
+    return { width: naturalWidth * scale, height: naturalHeight * scale };
+}
+/**
+ * Track an element's content-box size, kept current across layout changes.
+ */
+function useElementSize() {
+    const ref = React.useRef(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        const el = ref.current;
+        if (el === null) {
+            return;
+        }
+        const measure = () => {
+            setSize({ width: el.clientWidth, height: el.clientHeight });
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return [ref, size];
+}
+function Swipe({ reference, challenger, trans }) {
+    var _a, _b, _c, _d;
     const [position, setPosition] = React.useState(50);
     const [dragging, setDragging] = React.useState(false);
+    const [refSize, onRefLoad] = useNaturalSize();
+    const [challSize, onChallLoad] = useNaturalSize();
+    const [areaRef, area] = useElementSize();
     const frameRef = React.useRef(null);
+    // Display both revisions in a single box — the union of their intrinsic
+    // sizes, scaled down to fit but never enlarged — and size the frame to
+    // exactly that box. The divider's `left: N%`, the pointer-to-percent
+    // mapping (below) and each image's `clip-path` inset then all resolve
+    // against the same width, so the white line sits precisely on the seam
+    // between the two revisions at every position. A full-width frame instead
+    // let the line drift off the seam by as much as half the letterbox.
+    const naturalWidth = Math.max((_a = refSize === null || refSize === void 0 ? void 0 : refSize[0]) !== null && _a !== void 0 ? _a : 0, (_b = challSize === null || challSize === void 0 ? void 0 : challSize[0]) !== null && _b !== void 0 ? _b : 0);
+    const naturalHeight = Math.max((_c = refSize === null || refSize === void 0 ? void 0 : refSize[1]) !== null && _c !== void 0 ? _c : 0, (_d = challSize === null || challSize === void 0 ? void 0 : challSize[1]) !== null && _d !== void 0 ? _d : 0);
+    const box = containBox(naturalWidth, naturalHeight, area.width, area.height);
     const setFromClientX = React.useCallback((clientX) => {
         const frame = frameRef.current;
         if (frame === null) {
@@ -230,27 +288,29 @@ function Swipe({ reference, challenger }) {
         setPosition(Math.max(0, Math.min(100, next)));
     }, [position]);
     return (React.createElement("div", { className: "jp-xtralab-ImageDiff-interactive" },
-        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeFrame", ref: frameRef, onPointerDown: onPointerDown, "data-dragging": dragging ? 'true' : undefined },
-            React.createElement("div", { className: "jp-xtralab-ImageDiff-stack" },
-                reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: reference.uri, alt: "Reference revision", draggable: false, style: {
+        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeArea", ref: areaRef },
+            React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeFrame", ref: frameRef, style: box !== null
+                    ? { width: `${box.width}px`, height: `${box.height}px` }
+                    : { width: 0, height: 0, visibility: 'hidden' }, onPointerDown: onPointerDown, "data-dragging": dragging ? 'true' : undefined },
+                reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-swipeImg", src: reference.uri, alt: trans.__('Reference revision'), draggable: false, onLoad: onRefLoad, style: {
                         clipPath: `inset(0 ${100 - position}% 0 0)`
                     } })) : null,
-                challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: challenger.uri, alt: "Challenger revision", draggable: false, style: {
+                challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-swipeImg", src: challenger.uri, alt: trans.__('Challenger revision'), draggable: false, onLoad: onChallLoad, style: {
                         clipPath: `inset(0 0 0 ${position}%)`
-                    } })) : null),
-            React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDivider", style: { left: `${position}%` }, role: "slider", "aria-label": "Swipe between reference and challenger", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), "aria-orientation": "vertical", tabIndex: 0, onKeyDown: onKeyDown },
-                React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-top" },
-                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" }),
-                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" })),
-                React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-bottom" },
-                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" }),
-                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" }))))));
+                    } })) : null,
+                React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDivider", style: { left: `${position}%` }, role: "slider", "aria-label": trans.__('Swipe between reference and challenger'), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), "aria-orientation": "vertical", tabIndex: 0, onKeyDown: onKeyDown },
+                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-top" },
+                        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" }),
+                        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" })),
+                    React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-bottom" },
+                        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" }),
+                        React.createElement("div", { className: "jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" })))))));
 }
-function OnionSkin({ reference, challenger }) {
+function OnionSkin({ reference, challenger, trans }) {
     const [opacity, setOpacity] = React.useState(50);
     return (React.createElement("div", { className: "jp-xtralab-ImageDiff-interactive" },
         React.createElement("div", { className: "jp-xtralab-ImageDiff-stack" },
-            reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: reference.uri, alt: "Reference revision" })) : null,
-            challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: challenger.uri, alt: "Challenger revision", style: { opacity: opacity / 100 } })) : null),
-        React.createElement(RangeSlider, { value: opacity, onChange: setOpacity, ariaLabel: "Fade between reference and challenger" })));
+            reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: reference.uri, alt: trans.__('Reference revision') })) : null,
+            challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: challenger.uri, alt: trans.__('Challenger revision'), style: { opacity: opacity / 100 } })) : null),
+        React.createElement(RangeSlider, { value: opacity, onChange: setOpacity, ariaLabel: trans.__('Fade between reference and challenger') })));
 }

package/lib/git/index.js

@@ -1,5 +1,7 @@
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { IAskAgent } from '../askAgent/tokens';
 import { CommandIDs, PREVIEW_DIFF_WIDGET_ID, pinnedDiffWidgetId, registerGitCommands } from './commands';
 import diffProviderPlugin from './diffProvider';
 const GIT_DIFF_COMMAND_PLUGIN_ID = 'xtralab:git-diff-command';
@@ -14,8 +16,9 @@ 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],
-    activate: (app, themeManager, rendermime) => {
+    optional: [IThemeManager, IRenderMimeRegistry, ITranslator, IAskAgent],
+    activate: (app, themeManager, rendermime, translator, askAgent) => {
+        const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
         // Track open diffs so repeated opens reveal the existing tab.
         const tracker = new WidgetTracker({
             namespace: GIT_DIFF_TRACKER_NAMESPACE
@@ -30,6 +33,8 @@ const diffCommandPlugin = {
             themeManager,
             contentsManager: app.serviceManager.contents,
             rendermime,
+            askAgent,
+            trans,
             trackDiff: widget => tracker.add(widget),
             onPinned: current => {
                 const existing = findDiff(current.change, true);