xtralab 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtralab",
-    "version": "0.6.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/src/launcher/dashboard.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { CommandRegistry } from '@lumino/commands';
 import type { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { Poll } from '@lumino/polling';
+import type { IDocumentWidget } from '@jupyterlab/docregistry';
 import {
   LabIcon,
   ReactWidget,
@@ -193,13 +194,28 @@ function LauncherDashboardComponent(
   }, [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
-    })) as Widget | undefined;
+    // 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'
+    })) as { path: string } | undefined;
+    if (!file) {
+      return;
+    }
+    const result = (await commands.execute('docmanager:open', {
+      path: file.path,
+      factory: 'Notebook',
+      kernelPreference: { shouldStart: false, canStart: true }
+    })) as IDocumentWidget | undefined;
     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/src/topBar/index.ts

@@ -86,6 +86,19 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const { commands } = app;
     const trans = (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` /