xtralab 0.7.0 → 0.9.0

package/src/git/index.ts

@@ -5,14 +5,15 @@ import {
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
-import { CommandArguments, CommandIDs, registerGitCommands } from './commands';
 import {
-  DiffContentWidget,
+  CommandArguments,
+  CommandIDs,
+  DiffMainAreaWidget,
   PREVIEW_DIFF_WIDGET_ID,
-  pinnedDiffWidgetId
-} from './diffWidget';
+  pinnedDiffWidgetId,
+  registerGitCommands
+} from './commands';
 import diffProviderPlugin from './diffProvider';
-import type { MainAreaWidget } from '@jupyterlab/apputils';
 import { IFileChange } from './tokens';
 
 const GIT_DIFF_COMMAND_PLUGIN_ID = 'xtralab:git-diff-command';
@@ -21,12 +22,8 @@ const GIT_DIFF_TRACKER_NAMESPACE = 'xtralab-git-diff';
 /**
  * The launcher's git diff command plugin.
  *
- * The `@jupyterlab/git` frontend stays enabled (only its diff plugins are
- * swapped — see `diffProvider.tsx`), so the upstream git panel is what the
- * user sees in the sidebar. This plugin is the launcher dashboard's
- * independent diff path: the `xtralab:git:open-diff` command the
- * dashboard's "Changes" section calls, plus a tracker so reopening a diff
- * reveals the existing tab and the preview/pin behavior keeps working.
+ * The upstream git panel stays enabled; this plugin only gives the launcher
+ * its own `xtralab:git:open-diff` command and preview/pinned-tab tracking.
  */
 const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
   id: GIT_DIFF_COMMAND_PLUGIN_ID,
@@ -39,17 +36,15 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
     themeManager: IThemeManager | null,
     rendermime: IRenderMimeRegistry | null
   ): void => {
-    // Track open diff widgets so the openDiff handler can reveal an
-    // already-open diff for the same file instead of creating a duplicate
-    // (and so a promoted preview can find its pinned twin).
-    const tracker = new WidgetTracker<MainAreaWidget<DiffContentWidget>>({
+    // Track open diffs so repeated opens reveal the existing tab.
+    const tracker = new WidgetTracker<DiffMainAreaWidget>({
       namespace: GIT_DIFF_TRACKER_NAMESPACE
     });
 
     const findDiff = (
       change: IFileChange,
       pin = false
-    ): MainAreaWidget<DiffContentWidget> | undefined => {
+    ): DiffMainAreaWidget | undefined => {
       const id = pin ? pinnedDiffWidgetId(change) : PREVIEW_DIFF_WIDGET_ID;
       const existing = tracker.find(
         widget => !widget.isDisposed && widget.id === id
@@ -62,13 +57,9 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
       themeManager,
       contentsManager: app.serviceManager.contents,
       rendermime,
-      // The launcher polls git status on its own cadence and the
-      // jupyterlab-git panel auto-refreshes on the contents `fileChanged`
-      // signal a hunk-discard save emits, so no extra refresh is needed.
-      onChanged: () => undefined,
       trackDiff: widget => tracker.add(widget),
       onPinned: current => {
-        const existing = findDiff(current.content.change, true);
+        const existing = findDiff(current.change, true);
         if (
           existing !== undefined &&
           existing !== current &&
@@ -78,7 +69,7 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
           current.close();
           return;
         }
-        current.id = pinnedDiffWidgetId(current.content.change);
+        current.id = pinnedDiffWidgetId(current.change);
         current.title.className = '';
         app.shell.activateById(current.id);
       },
@@ -88,12 +79,7 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
 };
 
 /**
- * Every plugin contributed by xtralab's git integration:
- *
- *   1. {@link diffCommandPlugin} — the launcher's `xtralab:git:open-diff`.
- *   2. `diffProviderPlugin` — registers the `@pierre/diffs` rendering as
- *      jupyterlab-git's diff providers (replacing its disabled
- *      notebook/text diff plugins).
+ * Plugins contributed by xtralab's git integration.
  */
 const plugins: JupyterFrontEndPlugin<unknown>[] = [
   diffCommandPlugin,

package/src/git/notebookDiff.tsx

@@ -13,6 +13,8 @@ import {
   type FileDiffMetadata
 } from '@pierre/diffs';
 
+import { resolveDiffTheme } from './diffTheme';
+
 /**
  * The CSS class added to the root of the notebook diff. Selectors that
  * style cell sections, headers, and the per-cell diff blocks hang off this
@@ -151,7 +153,7 @@ function emptyNotebook(): INotebook {
  * nbformat allows multiline string fields (`source`, stream `text`,
  * `text/plain` outputs, …) to be either a single string or an array of
  * strings. Normalize to one string so equality checks and diffs see the
- * same shape regardless of how the writer chose to serialise it.
+ * same shape regardless of how the writer chose to serialize it.
  */
 export function joinMultiline(value: string | string[] | undefined): string {
   if (value === undefined) {
@@ -836,6 +838,11 @@ function MarkdownPreviewSection(props: {
 interface INotebookDiffViewProps {
   diff: INotebookDiffResult;
   dark: boolean;
+  /**
+   * Whether a Pierre JupyterLab theme is active; selects Pierre's rich
+   * highlighting vs the CSS-variable theme (see {@link resolveDiffTheme}).
+   */
+  pierreTheme: boolean;
   rendermime: IRenderMimeRegistry | null;
 }
 
@@ -852,8 +859,8 @@ interface INotebookDiffViewProps {
 export function NotebookDiffView(
   props: INotebookDiffViewProps
 ): React.ReactElement {
-  const { diff, dark, rendermime } = props;
-  const theme: DiffsThemeNames = dark ? 'pierre-dark' : 'pierre-light';
+  const { diff, dark, pierreTheme, rendermime } = props;
+  const theme: DiffsThemeNames = resolveDiffTheme(dark, pierreTheme);
   const summary = React.useMemo(() => summarize(diff.cells), [diff.cells]);
   return (
     <div className={NOTEBOOK_DIFF_CSS_CLASS}>

package/src/index.ts

@@ -2,6 +2,7 @@ import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 
 import agentSessionsPlugin from './agentSessions';
 import fileBrowserPlugin from './fileBrowser';
+import fileTypeIconsPlugin from './fileTypeIcons';
 import editorBreadcrumbsPlugin from './editorBreadcrumbs';
 import editorIndentPlugin from './editorIndent';
 import gitPlugins from './git';
@@ -25,6 +26,7 @@ const plugins: JupyterFrontEndPlugin<unknown>[] = [
   editorBreadcrumbsPlugin,
   editorIndentPlugin,
   fileBrowserPlugin,
+  fileTypeIconsPlugin,
   ...gitPlugins,
   ...launcherPlugins,
   menusPlugin,

package/src/terminals/model.ts

@@ -194,7 +194,7 @@ export class SessionRegistry implements IDisposable {
 
   /**
    * Return the open widget for a session, if any. The panel uses this to
-   * switch behaviour between "activate existing tab" and "open a new tab
+   * switch behavior between "activate existing tab" and "open a new tab
    * connected to the live session".
    */
   widgetFor(name: string): TerminalWidget | null {

package/src/terminals/widget.tsx

@@ -32,7 +32,7 @@ export const RUNNING_TERMINALS_ID = 'xtralab-running-terminals';
  * Backed by {@link SessionRegistry}: a `UseSignal` re-renders the list
  * whenever the registry emits `stateChanged`, so it tracks
  * `runningChanged` and the agent-title cache without any local state.
- * Click behaviour (activate vs. reopen, shutdown, new terminal) is
+ * Click behavior (activate vs. reopen, shutdown, new terminal) is
  * delegated to plugin-supplied callbacks so the widget never imports
  * `app`.
  */

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

@@ -40,12 +40,7 @@
   color: var(--jp-ui-font-color1);
 
   /*
-   * Map JupyterLab's theme variables onto the `--diffs-*-override`
-   * properties the library exposes. The `*-override` variants take
-   * precedence over the library's defaults, so these values track the
-   * JupyterLab theme automatically — no JS needed when the theme
-   * switches. Theme-dependent colors (insertion green, deletion red, …)
-   * still come from the active Shiki theme passed via `options.theme`.
+   * Feed JupyterLab theme colors into @pierre/diffs.
    */
   --diffs-bg-override: var(--jp-layout-color1);
   --diffs-bg-buffer-override: var(--jp-layout-color1);
@@ -58,6 +53,8 @@
   --diffs-fg-number-override: var(--jp-ui-font-color3);
   --diffs-fg-conflict-marker-override: var(--jp-warn-color1);
   --diffs-modified-color-override: var(--jp-warn-color1);
+  --diffs-addition-color-override: var(--jp-success-color1);
+  --diffs-deletion-color-override: var(--jp-error-color1);
 }
 
 /*
@@ -79,16 +76,25 @@
 }
 
 /*
- * 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 +126,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
@@ -564,7 +588,9 @@
 
 .jp-xtralab-ImageDiff-frame,
 .jp-xtralab-ImageDiff-stack {
-  /* Checkerboard so transparent regions are obvious; theme-neutral. */
+  /*
+   * Checkerboard so transparent regions are obvious; theme-neutral.
+   */
   background-color: #fff;
   background-image:
     linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
@@ -741,7 +767,9 @@
   bottom: -14px;
 }
 
-/* Chevron triangles drawn with borders so no asset is needed. */
+/*
+ * Chevron triangles drawn with borders so no asset is needed.
+ */
 .jp-xtralab-ImageDiff-swipeDividerArrow {
   width: 0;
   height: 0;

package/style/index.css

@@ -2,6 +2,7 @@
 @import url('editorBreadcrumbs.css');
 @import url('git.css');
 @import url('launcher.css');
+@import url('sidebar.css');
 @import url('tabs.css');
 @import url('terminals.css');
 @import url('topBar.css');

package/style/index.js

@@ -1,6 +1,7 @@
 import './base.css';
 import './git.css';
 import './launcher.css';
+import './sidebar.css';
 import './tabs.css';
 import './terminals.css';
 import './topBar.css';

package/style/launcher.css

@@ -166,8 +166,8 @@
 
 /*
  * Changed files list. Each row is a button so click + keyboard activate
- * both work; the badge on the left mirrors the single-letter status
- * indicator the git panel uses, kept in sync via FileChangeStatus.
+ * both work; the letter on the left is the file's single-letter git status,
+ * colored to match the @pierre/trees file tree's decorations.
  */
 .jp-xtralab-Launcher-changes {
   list-style: none;
@@ -178,6 +178,27 @@
   border: 1px solid var(--jp-border-color2);
   border-radius: 4px;
   overflow: hidden;
+
+  /*
+   * Git status letter palette, mirroring the @pierre/trees `--trees-status-*`
+   * defaults. The file tree resolves those through `light-dark()` under
+   * `color-scheme: light dark` — i.e. by OS appearance — so the
+   * `prefers-color-scheme` override below reproduces that exact resolution
+   * and keeps these letters in lockstep with the tree's.
+   */
+  --xtralab-git-status-added: #16a994;
+  --xtralab-git-status-modified: #1ca1c7;
+  --xtralab-git-status-renamed: #d5a910;
+  --xtralab-git-status-deleted: #ff2e3f;
+}
+
+@media (prefers-color-scheme: dark) {
+  .jp-xtralab-Launcher-changes {
+    --xtralab-git-status-added: #00cab1;
+    --xtralab-git-status-modified: #08c0ef;
+    --xtralab-git-status-renamed: #ffd452;
+    --xtralab-git-status-deleted: #ff6762;
+  }
 }
 
 .jp-xtralab-Launcher-changes > li + li {
@@ -207,35 +228,42 @@
   outline-offset: -1px;
 }
 
+/*
+ * Bare colored letter, not a filled badge — the same treatment the
+ * @pierre/trees file tree gives its git status decorations. The fixed width
+ * keeps the letters in a tidy gutter so the paths stay column-aligned.
+ */
 .jp-xtralab-Launcher-change-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
-  font-size: 10px;
-  font-weight: 700;
-  border-radius: 3px;
+  width: 14px;
+  flex: 0 0 auto;
   font-family: var(--jp-code-font-family);
-  background-color: var(--jp-layout-color2);
+  font-size: var(--jp-code-font-size);
+  font-weight: 600;
   color: var(--jp-ui-font-color2);
-  flex: 0 0 auto;
-}
-
-.jp-xtralab-Launcher-change-modified {
-  background-color: var(--jp-warn-color3, var(--jp-layout-color2));
-  color: var(--jp-warn-color1, var(--jp-ui-font-color1));
 }
 
 .jp-xtralab-Launcher-change-added,
 .jp-xtralab-Launcher-change-untracked {
-  background-color: var(--jp-success-color3, var(--jp-layout-color2));
-  color: var(--jp-success-color1, var(--jp-ui-font-color1));
+  color: var(--xtralab-git-status-added);
+}
+
+/* The file tree folds unmerged/typechange/unknown onto modified; match it. */
+.jp-xtralab-Launcher-change-modified,
+.jp-xtralab-Launcher-change-unmerged,
+.jp-xtralab-Launcher-change-typechange,
+.jp-xtralab-Launcher-change-unknown {
+  color: var(--xtralab-git-status-modified);
+}
+
+.jp-xtralab-Launcher-change-renamed {
+  color: var(--xtralab-git-status-renamed);
 }
 
 .jp-xtralab-Launcher-change-deleted {
-  background-color: var(--jp-error-color3, var(--jp-layout-color2));
-  color: var(--jp-error-color1, var(--jp-ui-font-color1));
+  color: var(--xtralab-git-status-deleted);
 }
 
 .jp-xtralab-Launcher-change-path {

package/style/sidebar.css

@@ -0,0 +1,14 @@
+/*
+ * The side activity bar is shipped horizontally (activityBarPosition: "top",
+ * see jupyter-config/labconfig). In that mode the TabBar content node spans
+ * the full width (@jupyterlab/application/style/sidepanel.css) with no
+ * justify-content, so the icons sit at the leading edge. Center them under
+ * the menu bar instead.
+ *
+ * `safe center` keeps the row start-aligned should the icons ever exceed the
+ * bar width, so none are pushed past the leading edge out of reach of the
+ * content node's horizontal overflow scroll.
+ */
+.jp-SideBar[data-orientation='horizontal'] .lm-TabBar-content {
+  justify-content: safe center;
+}