xtralab 0.7.0 → 0.8.0

package/README.md

@@ -1,4 +1,4 @@
-# xtralab
+![xtralab-logo](./logo.png)
 
 An opinionated JupyterLab meta-package for use with coding agents.
 
@@ -38,9 +38,10 @@ build instructions.
 
 xtralab builds on [`ajlab`](https://github.com/jtpio/ajlab), the agent-ready
 JupyterLab base. On top of it, xtralab pulls in JupyterLab 4.6+ with
-`jupyterlab-git`, `jupyterlab-lsp`, `jupyterlab-quickopen`, `jupyterlab-vim`,
-and a set of light and dark themes (`jupyterlab-cursor-light`,
-`jupyterlab-cursor-dark`, `jupyterlab-day`, `jupyterlab-night`). See
+`jupyterlab-git`, `jupyterlab-lsp`, `jupyterlab-quickopen`,
+`jupyterlab-search-replace`, `jupyterlab-vim`, and a set of light and dark
+themes (`jupyterlab-cursor-light`, `jupyterlab-cursor-dark`,
+`jupyterlab-day`, `jupyterlab-night`). See
 [`pyproject.toml`](./pyproject.toml) for the full list and pinned versions.
 
 The bundled xtralab labextension then adds:

package/lib/git/diffProvider.js

@@ -6,7 +6,7 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import { Git, IGitExtension } from '@jupyterlab/git';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { DIFF_WIDGET_CSS_CLASS, DiffSurface, NotebookViewModeControl, isDarkTheme, readStoredNotebookViewMode, writeStoredNotebookViewMode } from './diffSurface';
+import { DIFF_WIDGET_CSS_CLASS, DiffStyleControl, DiffSurface, NotebookViewModeControl, isDarkTheme, readStoredDiffStyle, readStoredNotebookViewMode, writeStoredDiffStyle, writeStoredNotebookViewMode } from './diffSurface';
 import { IMAGE_DIFF_EXTENSIONS, imageDataType } from './imageDiff';
 /**
  * A `Git.Diff.IDiffWidget` that renders through {@link DiffSurface}.
@@ -25,9 +25,13 @@ class XtralabDiffWidget extends ReactWidget {
         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._model = model;
         this._context = context;
         this._notebookViewMode = readStoredNotebookViewMode();
+        this._diffStyle = readStoredDiffStyle();
         // `jp-git-diff-root` borrows jupyterlab-git's host sizing (height:100%
         // flex column inside its PreviewMainAreaWidget); `jp-xtralab-DiffWidget`
         // brings our diff theming + the `.jp-xtralab-DiffWidget-*` styles.
@@ -102,6 +106,39 @@ class XtralabDiffWidget extends ReactWidget {
     get hasNotebookViewChanged() {
         return this._hasNotebookViewChanged;
     }
+    /** The user's current split-vs-unified layout choice for file diffs. */
+    get diffStyle() {
+        return this._diffStyle;
+    }
+    setDiffStyle(style) {
+        if (style === this._diffStyle) {
+            return;
+        }
+        this._diffStyle = style;
+        writeStoredDiffStyle(style);
+        this._diffStyleChanged.emit(style);
+    }
+    get diffStyleChanged() {
+        return this._diffStyleChanged;
+    }
+    /**
+     * Whether the textual/code file diff (the only view the split-vs-unified
+     * choice affects) is currently active; mirrored into the toolbar so the
+     * Split/Unified selector only shows when it applies.
+     */
+    get fileDiffActive() {
+        return this._fileDiffActive;
+    }
+    setFileDiffActive(value) {
+        if (value === this._fileDiffActive) {
+            return;
+        }
+        this._fileDiffActive = value;
+        this._fileDiffActiveChanged.emit(value);
+    }
+    get fileDiffActiveChanged() {
+        return this._fileDiffActiveChanged;
+    }
     /** Resolve the in-flight {@link refresh} promise, if any. */
     settleRefresh() {
         const pending = this._pendingRefresh;
@@ -146,6 +183,22 @@ function ModelDiffView(props) {
     const handleNotebookAvailabilityChange = React.useCallback((available) => {
         widget.setHasNotebookView(available);
     }, [widget]);
+    // Mirror the widget's diff-style choice so toolbar-driven changes
+    // re-render the diff. The widget owns the canonical value.
+    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 handleFileDiffActiveChange = React.useCallback((active) => {
+        widget.setFileDiffActive(active);
+    }, [widget]);
     const [dark, setDark] = React.useState(() => isDarkTheme(themeManager));
     React.useEffect(() => {
         if (themeManager !== null) {
@@ -232,7 +285,7 @@ function ModelDiffView(props) {
             void widget.refresh();
         }
     }), [canDiscardHunk, contentsManager, serverPath, widget]);
-    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: false, oldText: state.oldText, newText: state.newText, newName: model.filename, oldName: model.filename, dark: dark, rendermime: rendermime, notebookViewMode: notebookViewMode, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, hunkDiscard: hunkDiscard }));
+    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: false, oldText: state.oldText, newText: state.newText, newName: model.filename, oldName: model.filename, dark: dark, rendermime: rendermime, notebookViewMode: notebookViewMode, diffStyle: diffStyle, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onFileDiffActiveChange: handleFileDiffActiveChange, hunkDiscard: hunkDiscard }));
 }
 /**
  * Notebook/JSON toggle mounted into the diff toolbar that jupyterlab-git
@@ -271,6 +324,44 @@ function ToolbarControl(props) {
     }, [widget]);
     return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => widget.setNotebookViewMode(next) }));
 }
+/**
+ * Split/Unified toggle mounted into the diff toolbar jupyterlab-git passes
+ * to the factory. Bound to the widget's signals so it stays in sync with the
+ * rendered surface and only appears while the textual/code file diff is the
+ * active view.
+ */
+class DiffStyleToolbarItem extends ReactWidget {
+    constructor(widget) {
+        super();
+        this._widget = widget;
+        this.addClass('jp-xtralab-DiffWidget-diffStyleToolbarItem');
+    }
+    render() {
+        return React.createElement(DiffStyleControlBound, { widget: this._widget });
+    }
+}
+function DiffStyleControlBound(props) {
+    const { widget } = props;
+    const [style, setStyle] = React.useState(() => widget.diffStyle);
+    const [available, setAvailable] = React.useState(() => widget.fileDiffActive);
+    React.useEffect(() => {
+        const onStyle = (_sender, next) => {
+            setStyle(next);
+        };
+        const onAvailable = (_sender, next) => {
+            setAvailable(next);
+        };
+        widget.diffStyleChanged.connect(onStyle);
+        widget.fileDiffActiveChanged.connect(onAvailable);
+        setStyle(widget.diffStyle);
+        setAvailable(widget.fileDiffActive);
+        return () => {
+            widget.diffStyleChanged.disconnect(onStyle);
+            widget.fileDiffActiveChanged.disconnect(onAvailable);
+        };
+    }, [widget]);
+    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => widget.setDiffStyle(next) }));
+}
 /**
  * Build the `Git.Diff.Factory` xtralab registers with jupyterlab-git. The
  * factory closes over the application-level context (contents manager for
@@ -282,6 +373,7 @@ function makeXtralabDiffFactory(context) {
         const widget = new XtralabDiffWidget(options.model, context);
         if (options.toolbar) {
             options.toolbar.addItem('xtralab-notebook-view-mode', new NotebookViewModeToolbarItem(widget));
+            options.toolbar.addItem('xtralab-diff-style', new DiffStyleToolbarItem(widget));
         }
         return widget;
     };

package/lib/git/diffSurface.d.ts

@@ -21,6 +21,14 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
  * style the embedded `@pierre/diffs` viewer hang off this class.
  */
 export declare const DIFF_WIDGET_CSS_CLASS = "jp-xtralab-DiffWidget";
+/**
+ * Layout for textual/code diffs, forwarded to `@pierre/diffs` as its
+ * `diffStyle` option. `split` is the side-by-side old|new view; `unified`
+ * is the single-column inline view (what diffs.com calls "stacked").
+ */
+export type DiffStyle = 'split' | 'unified';
+export declare function readStoredDiffStyle(): DiffStyle;
+export declare function writeStoredDiffStyle(style: DiffStyle): void;
 /**
  * View modes available for `.ipynb` diffs. `notebook` is the cell-by-cell
  * rendered view; `json` is the raw nbformat JSON file diff, for inspecting
@@ -81,11 +89,20 @@ export interface IDiffSurfaceProps {
     rendermime: IRenderMimeRegistry | null;
     /** Current rendered-vs-JSON choice for notebook diffs (host-controlled). */
     notebookViewMode: NotebookDiffViewMode;
+    /** Split vs unified layout for the textual/code file diff (host-controlled). */
+    diffStyle: DiffStyle;
     /**
      * Called whenever the availability of a rendered notebook view changes,
      * so the host can show/hide its Notebook/JSON toolbar toggle.
      */
     onNotebookAvailabilityChange?: (available: boolean) => void;
+    /**
+     * Called whenever the textual/code file diff (the only view the split vs
+     * unified choice affects) becomes the active view, so the host can
+     * show/hide its Split/Unified toolbar toggle. False for image, binary,
+     * rendered-notebook, loading and error states.
+     */
+    onFileDiffActiveChange?: (active: boolean) => void;
     /**
      * Called after each (re)computation of the diff with the number of hunks
      * (or `null` when no textual diff exists). Hosts use this to implement
@@ -113,3 +130,15 @@ export declare function NotebookViewModeControl(props: {
     available: boolean;
     onChange: (mode: NotebookDiffViewMode) => void;
 }): React.ReactElement;
+/**
+ * Segmented Split/Unified selector. Mirrors {@link NotebookViewModeControl}:
+ * hosts mount it into their own toolbar and drive its value/visibility from
+ * the same state they pass to {@link DiffSurface}. Only meaningful while the
+ * textual/code file diff is the active view, so `available` mirrors the
+ * surface's `onFileDiffActiveChange`.
+ */
+export declare function DiffStyleControl(props: {
+    diffStyle: DiffStyle;
+    available: boolean;
+    onChange: (style: DiffStyle) => void;
+}): React.ReactElement;

package/lib/git/diffSurface.js

@@ -79,6 +79,27 @@ function writeStoredSplitRatio(ratio) {
         // See readStoredSplitRatio — best-effort persistence.
     }
 }
+const DIFF_STYLE_STORAGE_KEY = 'xtralab:diff-style';
+export function readStoredDiffStyle() {
+    try {
+        const raw = window.localStorage.getItem(DIFF_STYLE_STORAGE_KEY);
+        if (raw === 'split' || raw === 'unified') {
+            return raw;
+        }
+    }
+    catch (_a) {
+        // See readStoredSplitRatio — privacy-mode / sandboxed contexts can throw.
+    }
+    return 'split';
+}
+export function writeStoredDiffStyle(style) {
+    try {
+        window.localStorage.setItem(DIFF_STYLE_STORAGE_KEY, style);
+    }
+    catch (_a) {
+        // Best-effort.
+    }
+}
 const NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:notebook-diff-view-mode';
 export function readStoredNotebookViewMode() {
     try {
@@ -129,7 +150,7 @@ export function isDarkTheme(themeManager) {
  * docstring for the division of labor between this surface and its hosts.
  */
 export function DiffSurface(props) {
-    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, rendermime, notebookViewMode, onNotebookAvailabilityChange, onMetadataChange, hunkDiscard } = props;
+    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, rendermime, notebookViewMode, diffStyle, onNotebookAvailabilityChange, onFileDiffActiveChange, onMetadataChange, hunkDiscard } = 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
@@ -171,6 +192,19 @@ export function DiffSurface(props) {
             hunkCount: metadata !== null ? metadata.hunks.length : null
         });
     }, [onMetadataChange, metadata]);
+    // Decide which view to render. The notebook view requires a successful
+    // nbformat parse; if that failed, we only show the raw JSON file diff.
+    // Computed before the early returns below so the file-diff-active effect
+    // can depend on it without violating the rules of hooks.
+    const hasNotebookView = notebookDiff !== null;
+    const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
+    const showFileDiff = !showNotebookView && metadata !== null;
+    // The split vs unified choice only affects the textual/code file diff, so
+    // tell the host whether that view is active to drive its Split/Unified
+    // toolbar toggle.
+    React.useEffect(() => {
+        onFileDiffActiveChange === null || onFileDiffActiveChange === void 0 ? void 0 : onFileDiffActiveChange(showFileDiff);
+    }, [onFileDiffActiveChange, showFileDiff]);
     // Split ratio for the diff columns: fraction of width given to the
     // deletions (left) pane. Persisted across sessions so the user only
     // dials in their layout once.
@@ -283,11 +317,6 @@ export function DiffSurface(props) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
             React.createElement(ImageDiffView, { reference: oldText, challenger: newText, fileType: imageType })));
     }
-    // Decide which view to render. The notebook view requires a successful
-    // nbformat parse; if that failed, we only show the raw JSON file diff.
-    const hasNotebookView = notebookDiff !== null;
-    const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
-    const showFileDiff = !showNotebookView && metadata !== null;
     if (!showNotebookView && !showFileDiff) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "No content to diff."));
     }
@@ -309,7 +338,7 @@ export function DiffSurface(props) {
                 // crashes on instantiation. Running on the main thread is
                 // fine for the small files git diffs typically operate on.
                 disableWorkerPool: true, options: {
-                    diffStyle: 'split',
+                    diffStyle,
                     // Drop the file header — the tab title already shows the
                     // file name and the panel header carries the change
                     // context.
@@ -323,7 +352,7 @@ export function DiffSurface(props) {
                     // changes.
                     unsafeCSS: SPLIT_RESIZE_CSS
                 } })) : null),
-            showFileDiff ? (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), title: "Drag to resize the diff panes (double-click to reset)", onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick })) : null)));
 }
 /**
  * Segmented Notebook/JSON selector. Hosts mount this into whatever toolbar
@@ -340,3 +369,38 @@ export function NotebookViewModeControl(props) {
         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")));
 }
+/**
+ * Split / unified glyphs, inlined from the `@pierre/diffs` icon sprite
+ * (`diffs-icon-diff-split` / `diffs-icon-diff-unified`) so the toggle looks
+ * like the one on the library's own docs site without depending on the
+ * sprite sheet being injected into the document. `currentColor` lets the
+ * segmented-button styling drive the fill (including the active state).
+ */
+function DiffSplitIcon() {
+    return (React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" },
+        React.createElement("path", { d: "M14 0H8.5v16H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-1.5 6.5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0" }),
+        React.createElement("path", { d: "M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5.5V0zm.5 7.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1", opacity: ".3" })));
+}
+function DiffUnifiedIcon() {
+    return (React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" },
+        React.createElement("path", { fillRule: "evenodd", d: "M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5h16zm-8-4a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1A.5.5 0 0 0 8 10", clipRule: "evenodd" }),
+        React.createElement("path", { fillRule: "evenodd", d: "M14 0a2 2 0 0 1 2 2v5.5H0V2a2 2 0 0 1 2-2zM6.5 3.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z", clipRule: "evenodd", opacity: ".4" })));
+}
+/**
+ * Segmented Split/Unified selector. Mirrors {@link NotebookViewModeControl}:
+ * hosts mount it into their own toolbar and drive its value/visibility from
+ * the same state they pass to {@link DiffSurface}. Only meaningful while the
+ * textual/code file diff is the active view, so `available` mirrors the
+ * surface's `onFileDiffActiveChange`.
+ */
+export function DiffStyleControl(props) {
+    const { diffStyle, available, onChange } = 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') },
+            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(DiffUnifiedIcon, null))));
+}

package/lib/git/diffWidget.d.ts

@@ -4,7 +4,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
-import { DIFF_WIDGET_CSS_CLASS, type NotebookDiffViewMode } from './diffSurface';
+import { DIFF_WIDGET_CSS_CLASS, type DiffStyle, type NotebookDiffViewMode } from './diffSurface';
 import { GitReference, IFileChange } from './tokens';
 export { DIFF_WIDGET_CSS_CLASS };
 export declare const PREVIEW_DIFF_WIDGET_ID = "xtralab:diff:preview";
@@ -99,6 +99,21 @@ export declare class DiffContentWidget extends ReactWidget {
     setHasNotebookView(value: boolean): void;
     /** Emits whenever {@link hasNotebookView} changes. */
     get hasNotebookViewChanged(): ISignal<this, boolean>;
+    /** The user's current split-vs-unified layout choice for file diffs. */
+    get diffStyle(): DiffStyle;
+    /** Update the diff layout and persist it across sessions. */
+    setDiffStyle(style: DiffStyle): void;
+    /** Emits whenever {@link diffStyle} changes. */
+    get diffStyleChanged(): ISignal<this, DiffStyle>;
+    /**
+     * Whether the textual/code file diff (the only view the split-vs-unified
+     * choice affects) is currently active. Set by the React content; the
+     * toolbar reads it to decide whether to show the Split/Unified selector.
+     */
+    get fileDiffActive(): boolean;
+    setFileDiffActive(value: boolean): void;
+    /** Emits whenever {@link fileDiffActive} changes. */
+    get fileDiffActiveChanged(): ISignal<this, boolean>;
     get pinned(): boolean;
     pin(): void;
     get pinnedChanged(): ISignal<this, boolean>;
@@ -109,6 +124,10 @@ export declare class DiffContentWidget extends ReactWidget {
     private _notebookViewModeChanged;
     private _hasNotebookView;
     private _hasNotebookViewChanged;
+    private _diffStyle;
+    private _diffStyleChanged;
+    private _fileDiffActive;
+    private _fileDiffActiveChanged;
     private _pinned;
     private _pinnedChanged;
 }

package/lib/git/diffWidget.js

@@ -6,7 +6,7 @@ import { Signal } from '@lumino/signaling';
 import { getTreeIcon } from '../fileBrowser/icons';
 import { content } from './api';
 import { imageDataType } from './imageDiff';
-import { DIFF_WIDGET_CSS_CLASS, DiffSurface, NotebookViewModeControl, isDarkTheme, readStoredNotebookViewMode, writeStoredNotebookViewMode } from './diffSurface';
+import { DIFF_WIDGET_CSS_CLASS, DiffStyleControl, DiffSurface, NotebookViewModeControl, isDarkTheme, readStoredDiffStyle, readStoredNotebookViewMode, writeStoredDiffStyle, writeStoredNotebookViewMode } from './diffSurface';
 export { DIFF_WIDGET_CSS_CLASS };
 export const PREVIEW_DIFF_WIDGET_ID = 'xtralab:diff:preview';
 export function pinnedDiffWidgetId(change) {
@@ -101,18 +101,19 @@ export function createGitDiffWidget(options) {
     }
     widget.toolbar.addItem('pin', pinButton);
     widget.toolbar.addItem('notebook-view-mode', new NotebookViewModeToolbarItem(content));
+    widget.toolbar.addItem('diff-style', new DiffStyleToolbarItem(content));
     const syncToolbarVisibility = () => {
         if (widget === null || widget.isDisposed) {
             return;
         }
-        if (!content.pinned || content.hasNotebookView) {
+        if (!content.pinned || content.hasNotebookView || content.fileDiffActive) {
             widget.toolbar.show();
         }
         else {
             widget.toolbar.hide();
         }
     };
-    const onHasNotebookViewChanged = () => {
+    const onToolbarStateChanged = () => {
         if (widget === null || widget.isDisposed) {
             return;
         }
@@ -134,11 +135,13 @@ export function createGitDiffWidget(options) {
         }
         syncToolbarVisibility();
     };
-    content.hasNotebookViewChanged.connect(onHasNotebookViewChanged);
+    content.hasNotebookViewChanged.connect(onToolbarStateChanged);
+    content.fileDiffActiveChanged.connect(onToolbarStateChanged);
     content.pinnedChanged.connect(onPinnedChanged);
     syncToolbarVisibility();
     widget.disposed.connect(() => {
-        content.hasNotebookViewChanged.disconnect(onHasNotebookViewChanged);
+        content.hasNotebookViewChanged.disconnect(onToolbarStateChanged);
+        content.fileDiffActiveChanged.disconnect(onToolbarStateChanged);
         content.pinnedChanged.disconnect(onPinnedChanged);
     });
     return widget;
@@ -167,10 +170,14 @@ export class DiffContentWidget extends ReactWidget {
         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._pinnedChanged = new Signal(this);
         this._options = options;
         this._pinned = options.pinned === true;
         this._notebookViewMode = readStoredNotebookViewMode();
+        this._diffStyle = readStoredDiffStyle();
     }
     /** The change this widget renders, used by callers to identify the widget. */
     get change() {
@@ -212,6 +219,42 @@ export class DiffContentWidget extends ReactWidget {
     get hasNotebookViewChanged() {
         return this._hasNotebookViewChanged;
     }
+    /** The user's current split-vs-unified layout choice for file diffs. */
+    get diffStyle() {
+        return this._diffStyle;
+    }
+    /** Update the diff layout and persist it across sessions. */
+    setDiffStyle(style) {
+        if (style === this._diffStyle) {
+            return;
+        }
+        this._diffStyle = style;
+        writeStoredDiffStyle(style);
+        this._diffStyleChanged.emit(style);
+    }
+    /** Emits whenever {@link diffStyle} changes. */
+    get diffStyleChanged() {
+        return this._diffStyleChanged;
+    }
+    /**
+     * Whether the textual/code file diff (the only view the split-vs-unified
+     * choice affects) is currently active. Set by the React content; the
+     * toolbar reads it to decide whether to show the Split/Unified selector.
+     */
+    get fileDiffActive() {
+        return this._fileDiffActive;
+    }
+    setFileDiffActive(value) {
+        if (value === this._fileDiffActive) {
+            return;
+        }
+        this._fileDiffActive = value;
+        this._fileDiffActiveChanged.emit(value);
+    }
+    /** Emits whenever {@link fileDiffActive} changes. */
+    get fileDiffActiveChanged() {
+        return this._fileDiffActiveChanged;
+    }
     get pinned() {
         return this._pinned;
     }
@@ -264,6 +307,25 @@ function DiffViewer(props) {
             widget.notebookViewModeChanged.disconnect(handler);
         };
     }, [widget]);
+    // Mirror the widget's diff-style choice the same way (the widget owns the
+    // canonical value so the toolbar can read and write it without going
+    // through React).
+    const [diffStyle, setDiffStyleLocal] = React.useState(() => widget.diffStyle);
+    React.useEffect(() => {
+        const handler = (_sender, style) => {
+            setDiffStyleLocal(style);
+        };
+        widget.diffStyleChanged.connect(handler);
+        setDiffStyleLocal(widget.diffStyle);
+        return () => {
+            widget.diffStyleChanged.disconnect(handler);
+        };
+    }, [widget]);
+    // Tell the host widget whether the textual/code file diff is the active
+    // view, so the toolbar's Split/Unified selector only shows when it applies.
+    const handleFileDiffActiveChange = React.useCallback((active) => {
+        widget.setFileDiffActive(active);
+    }, [widget]);
     // Tell the host widget whether a rendered notebook view is currently
     // available. The toolbar item that lives in the `MainAreaWidget`
     // toolbar reads this flag to decide whether to show the
@@ -408,7 +470,7 @@ function DiffViewer(props) {
             setReloadKey(key => key + 1);
         }
     }), [canDiscardHunk, contentsManager, onChanged, state.serverPath]);
-    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: state.isBinary, oldText: state.oldText, newText: state.newText, newName: change.path, oldName: (_a = change.from) !== null && _a !== void 0 ? _a : change.path, dark: dark, rendermime: rendermime, notebookViewMode: notebookViewMode, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard }));
+    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: state.isBinary, oldText: state.oldText, newText: state.newText, newName: change.path, oldName: (_a = change.from) !== null && _a !== void 0 ? _a : change.path, dark: dark, rendermime: rendermime, notebookViewMode: notebookViewMode, diffStyle: diffStyle, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onFileDiffActiveChange: handleFileDiffActiveChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard }));
 }
 /**
  * Segmented Notebook/JSON selector mounted into the `MainAreaWidget`
@@ -451,6 +513,45 @@ function NotebookViewModeToolbarControl(props) {
     }, [content]);
     return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => content.setNotebookViewMode(next) }));
 }
+/**
+ * Split/Unified selector mounted into the `MainAreaWidget` toolbar. Mirrors
+ * {@link NotebookViewModeToolbarItem}: it reads from and writes to the
+ * {@link DiffContentWidget} so toolbar interactions and React state stay in
+ * sync, and only appears while the textual/code file diff is the active view
+ * (driven by the same `fileDiffActive` signal that gates toolbar visibility).
+ */
+class DiffStyleToolbarItem extends ReactWidget {
+    constructor(content) {
+        super();
+        this._content = content;
+        this.addClass('jp-xtralab-DiffWidget-diffStyleToolbarItem');
+    }
+    render() {
+        return React.createElement(DiffStyleToolbarControl, { content: this._content });
+    }
+}
+function DiffStyleToolbarControl(props) {
+    const { content } = props;
+    const [style, setStyle] = React.useState(() => content.diffStyle);
+    const [available, setAvailable] = React.useState(() => content.fileDiffActive);
+    React.useEffect(() => {
+        const onStyle = (_sender, next) => {
+            setStyle(next);
+        };
+        const onAvailable = (_sender, next) => {
+            setAvailable(next);
+        };
+        content.diffStyleChanged.connect(onStyle);
+        content.fileDiffActiveChanged.connect(onAvailable);
+        setStyle(content.diffStyle);
+        setAvailable(content.fileDiffActive);
+        return () => {
+            content.diffStyleChanged.disconnect(onStyle);
+            content.fileDiffActiveChanged.disconnect(onAvailable);
+        };
+    }, [content]);
+    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => content.setDiffStyle(next) }));
+}
 function formatTitle(change) {
     var _a;
     const name = (_a = change.path.split('/').pop()) !== null && _a !== void 0 ? _a : change.path;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtralab",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "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",

package/src/git/diffProvider.tsx

@@ -15,11 +15,15 @@ import { ISignal, Signal } from '@lumino/signaling';
 
 import {
   DIFF_WIDGET_CSS_CLASS,
+  DiffStyleControl,
   DiffSurface,
   NotebookViewModeControl,
   isDarkTheme,
+  readStoredDiffStyle,
   readStoredNotebookViewMode,
+  writeStoredDiffStyle,
   writeStoredNotebookViewMode,
+  type DiffStyle,
   type NotebookDiffViewMode
 } from './diffSurface';
 import { IMAGE_DIFF_EXTENSIONS, imageDataType } from './imageDiff';
@@ -60,6 +64,7 @@ class XtralabDiffWidget extends ReactWidget implements Git.Diff.IDiffWidget {
     this._model = model;
     this._context = context;
     this._notebookViewMode = readStoredNotebookViewMode();
+    this._diffStyle = readStoredDiffStyle();
     // `jp-git-diff-root` borrows jupyterlab-git's host sizing (height:100%
     // flex column inside its PreviewMainAreaWidget); `jp-xtralab-DiffWidget`
     // brings our diff theming + the `.jp-xtralab-DiffWidget-*` styles.
@@ -146,6 +151,45 @@ class XtralabDiffWidget extends ReactWidget implements Git.Diff.IDiffWidget {
     return this._hasNotebookViewChanged;
   }
 
+  /** The user's current split-vs-unified layout choice for file diffs. */
+  get diffStyle(): DiffStyle {
+    return this._diffStyle;
+  }
+
+  setDiffStyle(style: DiffStyle): void {
+    if (style === this._diffStyle) {
+      return;
+    }
+    this._diffStyle = style;
+    writeStoredDiffStyle(style);
+    this._diffStyleChanged.emit(style);
+  }
+
+  get diffStyleChanged(): ISignal<this, DiffStyle> {
+    return this._diffStyleChanged;
+  }
+
+  /**
+   * Whether the textual/code file diff (the only view the split-vs-unified
+   * choice affects) is currently active; mirrored into the toolbar so the
+   * Split/Unified selector only shows when it applies.
+   */
+  get fileDiffActive(): boolean {
+    return this._fileDiffActive;
+  }
+
+  setFileDiffActive(value: boolean): void {
+    if (value === this._fileDiffActive) {
+      return;
+    }
+    this._fileDiffActive = value;
+    this._fileDiffActiveChanged.emit(value);
+  }
+
+  get fileDiffActiveChanged(): ISignal<this, boolean> {
+    return this._fileDiffActiveChanged;
+  }
+
   /** Resolve the in-flight {@link refresh} promise, if any. */
   settleRefresh(): void {
     const pending = this._pendingRefresh;
@@ -175,6 +219,10 @@ class XtralabDiffWidget extends ReactWidget implements Git.Diff.IDiffWidget {
   );
   private _hasNotebookView = false;
   private _hasNotebookViewChanged = new Signal<this, boolean>(this);
+  private _diffStyle: DiffStyle;
+  private _diffStyleChanged = new Signal<this, DiffStyle>(this);
+  private _fileDiffActive = false;
+  private _fileDiffActiveChanged = new Signal<this, boolean>(this);
 }
 
 interface IModelDiffState {
@@ -225,6 +273,29 @@ function ModelDiffView(props: {
     [widget]
   );
 
+  // Mirror the widget's diff-style choice so toolbar-driven changes
+  // re-render the diff. The widget owns the canonical value.
+  const [diffStyle, setDiffStyle] = React.useState<DiffStyle>(
+    () => widget.diffStyle
+  );
+  React.useEffect(() => {
+    const handler = (_sender: XtralabDiffWidget, style: DiffStyle): void => {
+      setDiffStyle(style);
+    };
+    widget.diffStyleChanged.connect(handler);
+    setDiffStyle(widget.diffStyle);
+    return () => {
+      widget.diffStyleChanged.disconnect(handler);
+    };
+  }, [widget]);
+
+  const handleFileDiffActiveChange = React.useCallback(
+    (active: boolean) => {
+      widget.setFileDiffActive(active);
+    },
+    [widget]
+  );
+
   const [dark, setDark] = React.useState<boolean>(() =>
     isDarkTheme(themeManager)
   );
@@ -337,7 +408,9 @@ function ModelDiffView(props: {
       dark={dark}
       rendermime={rendermime}
       notebookViewMode={notebookViewMode}
+      diffStyle={diffStyle}
       onNotebookAvailabilityChange={handleNotebookAvailabilityChange}
+      onFileDiffActiveChange={handleFileDiffActiveChange}
       hunkDiscard={hunkDiscard}
     />
   );
@@ -401,6 +474,60 @@ function ToolbarControl(props: {
   );
 }
 
+/**
+ * Split/Unified toggle mounted into the diff toolbar jupyterlab-git passes
+ * to the factory. Bound to the widget's signals so it stays in sync with the
+ * rendered surface and only appears while the textual/code file diff is the
+ * active view.
+ */
+class DiffStyleToolbarItem extends ReactWidget {
+  constructor(widget: XtralabDiffWidget) {
+    super();
+    this._widget = widget;
+    this.addClass('jp-xtralab-DiffWidget-diffStyleToolbarItem');
+  }
+
+  protected render(): React.ReactElement {
+    return <DiffStyleControlBound widget={this._widget} />;
+  }
+
+  private _widget: XtralabDiffWidget;
+}
+
+function DiffStyleControlBound(props: {
+  widget: XtralabDiffWidget;
+}): React.ReactElement {
+  const { widget } = props;
+  const [style, setStyle] = React.useState<DiffStyle>(() => widget.diffStyle);
+  const [available, setAvailable] = React.useState<boolean>(
+    () => widget.fileDiffActive
+  );
+  React.useEffect(() => {
+    const onStyle = (_sender: XtralabDiffWidget, next: DiffStyle): void => {
+      setStyle(next);
+    };
+    const onAvailable = (_sender: XtralabDiffWidget, next: boolean): void => {
+      setAvailable(next);
+    };
+    widget.diffStyleChanged.connect(onStyle);
+    widget.fileDiffActiveChanged.connect(onAvailable);
+    setStyle(widget.diffStyle);
+    setAvailable(widget.fileDiffActive);
+    return () => {
+      widget.diffStyleChanged.disconnect(onStyle);
+      widget.fileDiffActiveChanged.disconnect(onAvailable);
+    };
+  }, [widget]);
+
+  return (
+    <DiffStyleControl
+      diffStyle={style}
+      available={available}
+      onChange={next => widget.setDiffStyle(next)}
+    />
+  );
+}
+
 /**
  * Build the `Git.Diff.Factory` xtralab registers with jupyterlab-git. The
  * factory closes over the application-level context (contents manager for
@@ -417,6 +544,10 @@ function makeXtralabDiffFactory(
         'xtralab-notebook-view-mode',
         new NotebookViewModeToolbarItem(widget)
       );
+      options.toolbar.addItem(
+        'xtralab-diff-style',
+        new DiffStyleToolbarItem(widget)
+      );
     }
     return widget;
   };

package/src/git/diffSurface.tsx

@@ -101,6 +101,35 @@ function writeStoredSplitRatio(ratio: number): void {
   }
 }
 
+/**
+ * Layout for textual/code diffs, forwarded to `@pierre/diffs` as its
+ * `diffStyle` option. `split` is the side-by-side old|new view; `unified`
+ * is the single-column inline view (what diffs.com calls "stacked").
+ */
+export type DiffStyle = 'split' | 'unified';
+
+const DIFF_STYLE_STORAGE_KEY = 'xtralab:diff-style';
+
+export function readStoredDiffStyle(): DiffStyle {
+  try {
+    const raw = window.localStorage.getItem(DIFF_STYLE_STORAGE_KEY);
+    if (raw === 'split' || raw === 'unified') {
+      return raw;
+    }
+  } catch {
+    // See readStoredSplitRatio — privacy-mode / sandboxed contexts can throw.
+  }
+  return 'split';
+}
+
+export function writeStoredDiffStyle(style: DiffStyle): void {
+  try {
+    window.localStorage.setItem(DIFF_STYLE_STORAGE_KEY, style);
+  } catch {
+    // Best-effort.
+  }
+}
+
 /**
  * View modes available for `.ipynb` diffs. `notebook` is the cell-by-cell
  * rendered view; `json` is the raw nbformat JSON file diff, for inspecting
@@ -212,11 +241,20 @@ export interface IDiffSurfaceProps {
   rendermime: IRenderMimeRegistry | null;
   /** Current rendered-vs-JSON choice for notebook diffs (host-controlled). */
   notebookViewMode: NotebookDiffViewMode;
+  /** Split vs unified layout for the textual/code file diff (host-controlled). */
+  diffStyle: DiffStyle;
   /**
    * Called whenever the availability of a rendered notebook view changes,
    * so the host can show/hide its Notebook/JSON toolbar toggle.
    */
   onNotebookAvailabilityChange?: (available: boolean) => void;
+  /**
+   * Called whenever the textual/code file diff (the only view the split vs
+   * unified choice affects) becomes the active view, so the host can
+   * show/hide its Split/Unified toolbar toggle. False for image, binary,
+   * rendered-notebook, loading and error states.
+   */
+  onFileDiffActiveChange?: (active: boolean) => void;
   /**
    * Called after each (re)computation of the diff with the number of hunks
    * (or `null` when no textual diff exists). Hosts use this to implement
@@ -243,7 +281,9 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
     dark,
     rendermime,
     notebookViewMode,
+    diffStyle,
     onNotebookAvailabilityChange,
+    onFileDiffActiveChange,
     onMetadataChange,
     hunkDiscard
   } = props;
@@ -295,6 +335,21 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
     });
   }, [onMetadataChange, metadata]);
 
+  // Decide which view to render. The notebook view requires a successful
+  // nbformat parse; if that failed, we only show the raw JSON file diff.
+  // Computed before the early returns below so the file-diff-active effect
+  // can depend on it without violating the rules of hooks.
+  const hasNotebookView = notebookDiff !== null;
+  const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
+  const showFileDiff = !showNotebookView && metadata !== null;
+
+  // The split vs unified choice only affects the textual/code file diff, so
+  // tell the host whether that view is active to drive its Split/Unified
+  // toolbar toggle.
+  React.useEffect(() => {
+    onFileDiffActiveChange?.(showFileDiff);
+  }, [onFileDiffActiveChange, showFileDiff]);
+
   // Split ratio for the diff columns: fraction of width given to the
   // deletions (left) pane. Persisted across sessions so the user only
   // dials in their layout once.
@@ -461,12 +516,6 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
       </div>
     );
   }
-  // Decide which view to render. The notebook view requires a successful
-  // nbformat parse; if that failed, we only show the raw JSON file diff.
-  const hasNotebookView = notebookDiff !== null;
-  const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
-  const showFileDiff = !showNotebookView && metadata !== null;
-
   if (!showNotebookView && !showFileDiff) {
     return (
       <div className="jp-xtralab-DiffWidget-status">No content to diff.</div>
@@ -506,7 +555,7 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
               // fine for the small files git diffs typically operate on.
               disableWorkerPool={true}
               options={{
-                diffStyle: 'split',
+                diffStyle,
                 // Drop the file header — the tab title already shows the
                 // file name and the panel header carries the change
                 // context.
@@ -523,7 +572,7 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
             />
           ) : null}
         </div>
-        {showFileDiff ? (
+        {showFileDiff && diffStyle === 'split' ? (
           <div
             className="jp-xtralab-DiffWidget-resizer"
             style={{ left: `${leftPercent}%` }}
@@ -586,3 +635,90 @@ export function NotebookViewModeControl(props: {
     </div>
   );
 }
+
+/**
+ * Split / unified glyphs, inlined from the `@pierre/diffs` icon sprite
+ * (`diffs-icon-diff-split` / `diffs-icon-diff-unified`) so the toggle looks
+ * like the one on the library's own docs site without depending on the
+ * sprite sheet being injected into the document. `currentColor` lets the
+ * segmented-button styling drive the fill (including the active state).
+ */
+function DiffSplitIcon(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M14 0H8.5v16H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-1.5 6.5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0" />
+      <path
+        d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5.5V0zm.5 7.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1"
+        opacity=".3"
+      />
+    </svg>
+  );
+}
+
+function DiffUnifiedIcon(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5h16zm-8-4a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1A.5.5 0 0 0 8 10"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M14 0a2 2 0 0 1 2 2v5.5H0V2a2 2 0 0 1 2-2zM6.5 3.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"
+        clipRule="evenodd"
+        opacity=".4"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Segmented Split/Unified selector. Mirrors {@link NotebookViewModeControl}:
+ * hosts mount it into their own toolbar and drive its value/visibility from
+ * the same state they pass to {@link DiffSurface}. Only meaningful while the
+ * textual/code file diff is the active view, so `available` mirrors the
+ * surface's `onFileDiffActiveChange`.
+ */
+export function DiffStyleControl(props: {
+  diffStyle: DiffStyle;
+  available: boolean;
+  onChange: (style: DiffStyle) => void;
+}): React.ReactElement {
+  const { diffStyle, available, onChange } = props;
+  if (!available) {
+    return <></>;
+  }
+  return (
+    <div
+      className="jp-xtralab-DiffWidget-segmented"
+      role="tablist"
+      aria-label="Diff view style"
+    >
+      <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')}
+      >
+        <DiffSplitIcon />
+      </button>
+      <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')}
+      >
+        <DiffUnifiedIcon />
+      </button>
+    </div>
+  );
+}

package/src/git/diffWidget.tsx

@@ -16,11 +16,15 @@ import { content } from './api';
 import { imageDataType } from './imageDiff';
 import {
   DIFF_WIDGET_CSS_CLASS,
+  DiffStyleControl,
   DiffSurface,
   NotebookViewModeControl,
   isDarkTheme,
+  readStoredDiffStyle,
   readStoredNotebookViewMode,
+  writeStoredDiffStyle,
   writeStoredNotebookViewMode,
+  type DiffStyle,
   type NotebookDiffViewMode
 } from './diffSurface';
 import { GitReference, IFileChange } from './tokens';
@@ -158,17 +162,18 @@ export function createGitDiffWidget(
     'notebook-view-mode',
     new NotebookViewModeToolbarItem(content)
   );
+  widget.toolbar.addItem('diff-style', new DiffStyleToolbarItem(content));
   const syncToolbarVisibility = (): void => {
     if (widget === null || widget.isDisposed) {
       return;
     }
-    if (!content.pinned || content.hasNotebookView) {
+    if (!content.pinned || content.hasNotebookView || content.fileDiffActive) {
       widget.toolbar.show();
     } else {
       widget.toolbar.hide();
     }
   };
-  const onHasNotebookViewChanged = (): void => {
+  const onToolbarStateChanged = (): void => {
     if (widget === null || widget.isDisposed) {
       return;
     }
@@ -190,11 +195,13 @@ export function createGitDiffWidget(
     }
     syncToolbarVisibility();
   };
-  content.hasNotebookViewChanged.connect(onHasNotebookViewChanged);
+  content.hasNotebookViewChanged.connect(onToolbarStateChanged);
+  content.fileDiffActiveChanged.connect(onToolbarStateChanged);
   content.pinnedChanged.connect(onPinnedChanged);
   syncToolbarVisibility();
   widget.disposed.connect(() => {
-    content.hasNotebookViewChanged.disconnect(onHasNotebookViewChanged);
+    content.hasNotebookViewChanged.disconnect(onToolbarStateChanged);
+    content.fileDiffActiveChanged.disconnect(onToolbarStateChanged);
     content.pinnedChanged.disconnect(onPinnedChanged);
   });
   return widget;
@@ -228,6 +235,7 @@ export class DiffContentWidget extends ReactWidget {
     this._options = options;
     this._pinned = options.pinned === true;
     this._notebookViewMode = readStoredNotebookViewMode();
+    this._diffStyle = readStoredDiffStyle();
   }
 
   /** The change this widget renders, used by callers to identify the widget. */
@@ -277,6 +285,48 @@ export class DiffContentWidget extends ReactWidget {
     return this._hasNotebookViewChanged;
   }
 
+  /** The user's current split-vs-unified layout choice for file diffs. */
+  get diffStyle(): DiffStyle {
+    return this._diffStyle;
+  }
+
+  /** Update the diff layout and persist it across sessions. */
+  setDiffStyle(style: DiffStyle): void {
+    if (style === this._diffStyle) {
+      return;
+    }
+    this._diffStyle = style;
+    writeStoredDiffStyle(style);
+    this._diffStyleChanged.emit(style);
+  }
+
+  /** Emits whenever {@link diffStyle} changes. */
+  get diffStyleChanged(): ISignal<this, DiffStyle> {
+    return this._diffStyleChanged;
+  }
+
+  /**
+   * Whether the textual/code file diff (the only view the split-vs-unified
+   * choice affects) is currently active. Set by the React content; the
+   * toolbar reads it to decide whether to show the Split/Unified selector.
+   */
+  get fileDiffActive(): boolean {
+    return this._fileDiffActive;
+  }
+
+  setFileDiffActive(value: boolean): void {
+    if (value === this._fileDiffActive) {
+      return;
+    }
+    this._fileDiffActive = value;
+    this._fileDiffActiveChanged.emit(value);
+  }
+
+  /** Emits whenever {@link fileDiffActive} changes. */
+  get fileDiffActiveChanged(): ISignal<this, boolean> {
+    return this._fileDiffActiveChanged;
+  }
+
   get pinned(): boolean {
     return this._pinned;
   }
@@ -309,6 +359,10 @@ export class DiffContentWidget extends ReactWidget {
   );
   private _hasNotebookView = false;
   private _hasNotebookViewChanged = new Signal<this, boolean>(this);
+  private _diffStyle: DiffStyle;
+  private _diffStyleChanged = new Signal<this, DiffStyle>(this);
+  private _fileDiffActive = false;
+  private _fileDiffActiveChanged = new Signal<this, boolean>(this);
   private _pinned: boolean;
   private _pinnedChanged = new Signal<this, boolean>(this);
 }
@@ -379,6 +433,32 @@ function DiffViewer(
     };
   }, [widget]);
 
+  // Mirror the widget's diff-style choice the same way (the widget owns the
+  // canonical value so the toolbar can read and write it without going
+  // through React).
+  const [diffStyle, setDiffStyleLocal] = React.useState<DiffStyle>(
+    () => widget.diffStyle
+  );
+  React.useEffect(() => {
+    const handler = (_sender: DiffContentWidget, style: DiffStyle): void => {
+      setDiffStyleLocal(style);
+    };
+    widget.diffStyleChanged.connect(handler);
+    setDiffStyleLocal(widget.diffStyle);
+    return () => {
+      widget.diffStyleChanged.disconnect(handler);
+    };
+  }, [widget]);
+
+  // Tell the host widget whether the textual/code file diff is the active
+  // view, so the toolbar's Split/Unified selector only shows when it applies.
+  const handleFileDiffActiveChange = React.useCallback(
+    (active: boolean) => {
+      widget.setFileDiffActive(active);
+    },
+    [widget]
+  );
+
   // Tell the host widget whether a rendered notebook view is currently
   // available. The toolbar item that lives in the `MainAreaWidget`
   // toolbar reads this flag to decide whether to show the
@@ -558,7 +638,9 @@ function DiffViewer(
       dark={dark}
       rendermime={rendermime}
       notebookViewMode={notebookViewMode}
+      diffStyle={diffStyle}
       onNotebookAvailabilityChange={handleNotebookAvailabilityChange}
+      onFileDiffActiveChange={handleFileDiffActiveChange}
       onMetadataChange={handleMetadataChange}
       hunkDiscard={hunkDiscard}
     />
@@ -627,6 +709,61 @@ function NotebookViewModeToolbarControl(props: {
   );
 }
 
+/**
+ * Split/Unified selector mounted into the `MainAreaWidget` toolbar. Mirrors
+ * {@link NotebookViewModeToolbarItem}: it reads from and writes to the
+ * {@link DiffContentWidget} so toolbar interactions and React state stay in
+ * sync, and only appears while the textual/code file diff is the active view
+ * (driven by the same `fileDiffActive` signal that gates toolbar visibility).
+ */
+class DiffStyleToolbarItem extends ReactWidget {
+  constructor(content: DiffContentWidget) {
+    super();
+    this._content = content;
+    this.addClass('jp-xtralab-DiffWidget-diffStyleToolbarItem');
+  }
+
+  protected render(): React.ReactElement {
+    return <DiffStyleToolbarControl content={this._content} />;
+  }
+
+  private _content: DiffContentWidget;
+}
+
+function DiffStyleToolbarControl(props: {
+  content: DiffContentWidget;
+}): React.ReactElement {
+  const { content } = props;
+  const [style, setStyle] = React.useState<DiffStyle>(() => content.diffStyle);
+  const [available, setAvailable] = React.useState<boolean>(
+    () => content.fileDiffActive
+  );
+  React.useEffect(() => {
+    const onStyle = (_sender: DiffContentWidget, next: DiffStyle): void => {
+      setStyle(next);
+    };
+    const onAvailable = (_sender: DiffContentWidget, next: boolean): void => {
+      setAvailable(next);
+    };
+    content.diffStyleChanged.connect(onStyle);
+    content.fileDiffActiveChanged.connect(onAvailable);
+    setStyle(content.diffStyle);
+    setAvailable(content.fileDiffActive);
+    return () => {
+      content.diffStyleChanged.disconnect(onStyle);
+      content.fileDiffActiveChanged.disconnect(onAvailable);
+    };
+  }, [content]);
+
+  return (
+    <DiffStyleControl
+      diffStyle={style}
+      available={available}
+      onChange={next => content.setDiffStyle(next)}
+    />
+  );
+}
+
 function formatTitle(change: IFileChange): string {
   const name = change.path.split('/').pop() ?? change.path;
   const groupLabel = change.group === 'staged' ? 'Staged' : 'Working';

package/style/base.css

@@ -21,6 +21,7 @@
   --trees-bg-muted-override: var(--jp-layout-color2);
   --trees-fg-override: var(--jp-ui-font-color1);
   --trees-fg-muted-override: var(--jp-ui-font-color2);
+  --trees-status-ignored-override: var(--jp-ui-font-color2);
   --trees-accent-override: var(--jp-brand-color1);
   --trees-border-color-override: var(--jp-border-color2);
   --trees-indent-guide-bg-override: var(--jp-border-color3);

package/style/git.css

@@ -79,16 +79,23 @@
 }
 
 /*
- * Notebook/JSON view-mode selector that lives in the `MainAreaWidget`
- * toolbar for `.ipynb` diffs. The host toolbar provides its own
- * background and border, so this is just the segmented control itself.
+ * Segmented selectors that live in the diff toolbar: the Notebook/JSON
+ * view-mode toggle (for `.ipynb` diffs) and the Split/Unified diff-style
+ * toggle (for textual/code diffs). The host toolbar provides its own
+ * background and border, so these are just the segmented controls.
  */
-.jp-xtralab-DiffWidget-viewModeToolbarItem {
+.jp-xtralab-DiffWidget-viewModeToolbarItem,
+.jp-xtralab-DiffWidget-diffStyleToolbarItem {
   display: flex;
   align-items: center;
   font-size: var(--jp-ui-font-size0);
 }
 
+/* Breathing room when both toggles appear (notebook diff in JSON view). */
+.jp-xtralab-DiffWidget-diffStyleToolbarItem {
+  margin-left: 4px;
+}
+
 .jp-xtralab-DiffWidget-segmented {
   display: inline-flex;
   border: 1px solid var(--jp-border-color2);
@@ -120,6 +127,24 @@
   background-color: var(--jp-brand-color1);
 }
 
+/*
+ * Icon variant of the segmented button, used by the Split/Unified toggle.
+ * The inline SVGs fill with `currentColor`, so the active/hover color rules
+ * above carry over to the glyph.
+ */
+.jp-xtralab-DiffWidget-segmentedButton-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+}
+
+.jp-xtralab-DiffWidget-segmentedButton-icon svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
 /*
  * Draggable column splitter. Sits on top of the diff (z-index above the
  * content) but stays a thin strip so it doesn't visually intrude. The