xtralab 0.6.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:
@@ -82,6 +83,36 @@ See the [`jupyter-server-mcp` README][mcp] for other MCP clients.
 [mcp]: https://github.com/jupyter-ai-contrib/jupyter-server-mcp
 [mcp-spec]: https://modelcontextprotocol.io
 
+## Agent skill
+
+xtralab ships an [Agent Skills][skills] entry at [`agent-skill/`](./agent-skill)
+that teaches any coding agent how to customize JupyterLab from plain-English
+requests like "hide the status bar", "change the theme", or "add a language
+server". The same SKILL.md file works with Claude Code, Codex CLI, Gemini CLI,
+GitHub Copilot, and other tools that read the Agent Skills format.
+
+For Claude Code, this repository doubles as a one-plugin marketplace. Inside a
+Claude Code session:
+
+```text
+/plugin marketplace add jtpio/xtralab
+/plugin install xtralab-skills@xtralab
+```
+
+For agents that read from `~/.agents/skills/`, such as Codex CLI or Gemini CLI,
+clone and copy the skill directory:
+
+```bash
+git clone --depth=1 https://github.com/jtpio/xtralab.git /tmp/xtralab
+mkdir -p ~/.agents/skills
+cp -r /tmp/xtralab/agent-skill/skills/customize-jupyterlab ~/.agents/skills/
+```
+
+See [`agent-skill/README.md`](./agent-skill/README.md) for additional install
+paths, the list of supported agents, and what the skill knows.
+
+[skills]: https://agentskills.io
+
 ## Language servers
 
 xtralab ships [`jupyterlab-lsp`][lsp] with two language servers pre-registered:

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/lib/launcher/dashboard.js

@@ -91,13 +91,28 @@ function LauncherDashboardComponent(props) {
         }
     }, [commands, cwd, onAgentLaunch]);
     const launchNotebook = React.useCallback(async () => {
-        // No `kernelName` — let the notebook extension fall back to the default
-        // kernel or prompt the user, matching the stock launcher's notebook
-        // tile behavior.
-        const result = (await commands.execute('notebook:create-new', {
-            cwd
+        // Open a fresh notebook with no kernel attached — equivalent to clicking
+        // "No Kernel" in the Select Kernel dialog. `notebook:create-new` always
+        // routes through that dialog when no kernelName is given, so drive the
+        // underlying docmanager steps directly and pass `shouldStart: false` to
+        // suppress kernel selection. The user picks a kernel from the notebook
+        // toolbar when they're ready.
+        const file = (await commands.execute('docmanager:new-untitled', {
+            path: cwd,
+            type: 'notebook'
+        }));
+        if (!file) {
+            return;
+        }
+        const result = (await commands.execute('docmanager:open', {
+            path: file.path,
+            factory: 'Notebook',
+            kernelPreference: { shouldStart: false, canStart: true }
         }));
         if (result) {
+            // Match `notebook:create-new`'s post-open marker so the first manual
+            // save offers a rename instead of overwriting the auto-generated name.
+            result.isUntitled = true;
             onAgentLaunch(result);
         }
     }, [commands, cwd, onAgentLaunch]);

package/lib/topBar/index.js

@@ -52,6 +52,18 @@ const plugin = {
     activate: (app, labShell, translator) => {
         const { commands } = app;
         const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
+        // The upstream toggle-{left,right}-area commands derive `isEnabled` from
+        // `!labShell.isEmpty(side)` but don't fire `commandChanged` when widgets
+        // move in or out of a side area. `CommandToolbarButton` only re-renders on
+        // `commandChanged` for its own id, so the buttons need an explicit notify
+        // whenever the shell layout shifts — `layoutModified` covers each side
+        // handler's `_updated` (add/remove, expand/collapse), keeping both
+        // `isEnabled` and `isToggled` in sync.
+        labShell.layoutModified.connect(() => {
+            for (const spec of BUTTONS) {
+                commands.notifyCommandChanged(spec.command);
+            }
+        });
         // Defer to `app.restored` so the upstream toggle commands are already in
         // the registry: `CommandToolbarButton` renders nothing until its command
         // exists and only re-renders on `commandChanged` of type `changed` /