xtralab 0.2.0 → 0.4.0

package/src/fileBrowser/widget.tsx

@@ -12,7 +12,7 @@ import { xtralabFileBrowserIcon } from './icons';
 export const FILE_BROWSER_ID = 'xtralab:file-browser';
 
 /**
- * The CSS class added to the Xtralab file browser widget. The selectors that
+ * The CSS class added to the xtralab file browser widget. The selectors that
  * bind application context menu items hang off this class, so it must remain
  * specific enough not to clash with other browsers (such as the default
  * `jp-FileBrowser`).
@@ -29,7 +29,7 @@ export interface IXtralabFileBrowserOptions {
 }
 
 /**
- * Public API of the Xtralab file browser used by command handlers and other
+ * Public API of the xtralab file browser used by command handlers and other
  * collaborators. Kept narrow on purpose so the React component stays free to
  * evolve the underlying tree integration.
  */
@@ -74,6 +74,31 @@ export interface IXtralabFileBrowser {
    */
   readonly pathAdded: ISignal<IXtralabFileBrowser, string>;
 
+  /**
+   * Emits when an external caller asks the tree to scroll to and select
+   * the given canonical path. The React component listens, lazily loads
+   * any unloaded ancestor directories, expands them, and selects the
+   * target. Used by the editor breadcrumbs to jump back to a file or
+   * folder shown in the breadcrumb trail.
+   */
+  readonly revealRequested: ISignal<IXtralabFileBrowser, string>;
+
+  /**
+   * Emits when an external caller asks the tree to return to the
+   * workspace root: clear any current selection and scroll back to the
+   * first row. Distinct from {@link revealRequested} because the
+   * workspace root has no tree row of its own — it cannot be reached
+   * by passing a path.
+   */
+  readonly rootRequested: ISignal<IXtralabFileBrowser, void>;
+
+  /**
+   * Emits when an external caller asks the tree to collapse every
+   * expanded folder. The React component listens and walks the loaded
+   * directories, calling `.collapse()` on each expanded one.
+   */
+  readonly collapseAllRequested: ISignal<IXtralabFileBrowser, void>;
+
   /** Trigger a refresh of every loaded directory in the tree. */
   refresh(): void;
 
@@ -83,6 +108,26 @@ export interface IXtralabFileBrowser {
    * convention: directories carry a trailing slash, files do not.
    */
   notifyPathAdded(canonicalPath: string): void;
+
+  /**
+   * Ask the tree to reveal {@link canonicalPath}: load and expand any
+   * unloaded ancestor directories, then select and scroll the target
+   * into view. `canonicalPath` follows the `@pierre/trees` convention
+   * (directories carry a trailing slash, files do not). Must be a
+   * non-empty path — use {@link scrollToRoot} for the root gesture.
+   */
+  reveal(canonicalPath: string): void;
+
+  /**
+   * Ask the tree to return to the workspace root: clear any current
+   * selection and scroll back to the top of the tree.
+   */
+  scrollToRoot(): void;
+
+  /**
+   * Ask the tree to collapse every currently expanded folder.
+   */
+  collapseAll(): void;
 }
 
 /**
@@ -100,7 +145,7 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     this._onOpenFile = options.onOpenFile;
     this.id = FILE_BROWSER_ID;
     this.title.icon = xtralabFileBrowserIcon;
-    this.title.caption = 'Xtralab File Browser';
+    this.title.caption = 'xtralab File Browser';
     this.addClass(FILE_BROWSER_CSS_CLASS);
 
     this._toolbar = new Toolbar();
@@ -142,6 +187,18 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     return this._pathAdded;
   }
 
+  get revealRequested(): ISignal<this, string> {
+    return this._revealRequested;
+  }
+
+  get rootRequested(): ISignal<this, void> {
+    return this._rootRequested;
+  }
+
+  get collapseAllRequested(): ISignal<this, void> {
+    return this._collapseAllRequested;
+  }
+
   /**
    * Update the cached selection. Called from the React tree when the
    * underlying `@pierre/trees` model emits a selection change.
@@ -159,6 +216,23 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     this._pathAdded.emit(canonicalPath);
   }
 
+  reveal(canonicalPath: string): void {
+    if (canonicalPath.length === 0) {
+      throw new Error(
+        'XtralabFileBrowser.reveal requires a non-empty canonical path; use scrollToRoot for the workspace root.'
+      );
+    }
+    this._revealRequested.emit(canonicalPath);
+  }
+
+  scrollToRoot(): void {
+    this._rootRequested.emit();
+  }
+
+  collapseAll(): void {
+    this._collapseAllRequested.emit();
+  }
+
   private _contentsManager: Contents.IManager;
   private _docManager: IDocumentManager;
   private _onOpenFile: ((serverPath: string) => void) | undefined;
@@ -166,6 +240,9 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
   private _selectionChanged = new Signal<this, readonly string[]>(this);
   private _refreshRequested = new Signal<this, void>(this);
   private _pathAdded = new Signal<this, string>(this);
+  private _revealRequested = new Signal<this, string>(this);
+  private _rootRequested = new Signal<this, void>(this);
+  private _collapseAllRequested = new Signal<this, void>(this);
   private _toolbar: Toolbar;
   private _content: XtralabFileTreeContent;
 }

package/src/git/icons.ts

@@ -6,7 +6,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
  * recoloring and inverse-color sidebar painting automatically.
  *
  * Source: `git-branch` from SVG Repo (https://www.svgrepo.com/svg/377352/git-branch),
- * part of the same Pixelarticons family as the Xtralab file browser's `file-tree`
+ * part of the same Pixelarticons family as the xtralab file browser's `file-tree`
  * icon, so the two sidebar tab glyphs read as a matched set. The original
  * `fill="#000000"` is replaced with `fill="currentColor"` and the root element
  * is given the `jp-icon3` class so the icon picks up JupyterLab's theme color

package/src/git/panelComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Poll } from '@lumino/polling';
 import { ISignal } from '@lumino/signaling';
 
 import {
@@ -49,6 +50,14 @@ interface IPanelState {
  */
 const STATUS_POLL_INTERVAL_MS = 5000;
 
+/**
+ * Upper bound on the poll's exponential backoff when status requests fail
+ * repeatedly. Matches the default JupyterLab file browser's `max`: long
+ * enough that a server outage stops hammering the API, short enough that
+ * a transient failure heals on its own.
+ */
+const STATUS_POLL_MAX_MS = 300_000;
+
 /**
  * Top-level React component rendered inside the {@link GitPanel} widget.
  * Owns the polling + refresh wiring around the `/git/status` endpoint and
@@ -109,27 +118,32 @@ export function GitPanelComponent(props: {
     }
   }, [repoPath]);
 
-  // Initial load + polling. `refresh` is stable for a given `repoPath`, so
-  // the polling interval is only re-created when the repo path changes.
-  React.useEffect(() => {
-    void refresh();
-    const interval = window.setInterval(
-      () => void refresh(),
-      STATUS_POLL_INTERVAL_MS
-    );
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [refresh]);
-
-  // External refresh triggers (toolbar button, plugin-level events).
+  // Initial load + polling. Driven by a Lumino `Poll` so the panel stops
+  // hitting the git endpoint while the JupyterLab tab is hidden, and so
+  // repeated failures back off exponentially instead of spinning at 5s.
+  // External refresh triggers (toolbar button, plugin-level events) call
+  // `poll.refresh()` to schedule an immediate tick instead of running
+  // `refresh()` directly — that keeps the panel from issuing two parallel
+  // status requests when an automatic tick happens to land at the same
+  // time as an external trigger.
   React.useEffect(() => {
+    const poll = new Poll({
+      name: '@xtralab/git:panelStatus',
+      factory: () => refresh(),
+      frequency: {
+        interval: STATUS_POLL_INTERVAL_MS,
+        backoff: true,
+        max: STATUS_POLL_MAX_MS
+      },
+      standby: 'when-hidden'
+    });
     const handler = (): void => {
-      void refresh();
+      void poll.refresh();
     };
     refreshSignal.connect(handler);
     return () => {
       refreshSignal.disconnect(handler);
+      poll.dispose();
     };
   }, [refresh, refreshSignal]);
 

package/src/index.ts

@@ -1,6 +1,8 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 
 import fileBrowserPlugin from './fileBrowser';
+import editorBreadcrumbsPlugin from './editorBreadcrumbs';
+import editorIndentPlugin from './editorIndent';
 import gitPlugin from './git';
 import launcherPlugin from './launcher';
 import menusPlugin from './menus';
@@ -15,6 +17,8 @@ import statusBarPlugin from './statusBar';
  * available end up running.
  */
 const plugins: JupyterFrontEndPlugin<unknown>[] = [
+  editorBreadcrumbsPlugin,
+  editorIndentPlugin,
   fileBrowserPlugin,
   gitPlugin,
   launcherPlugin,

package/src/launcher/dashboard.tsx

@@ -2,7 +2,15 @@ import * as React from 'react';
 
 import type { CommandRegistry } from '@lumino/commands';
 import type { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { LabIcon, ReactWidget, refreshIcon } from '@jupyterlab/ui-components';
+import { Poll } from '@lumino/polling';
+import {
+  LabIcon,
+  ReactWidget,
+  consoleIcon,
+  notebookIcon,
+  refreshIcon,
+  terminalIcon
+} from '@jupyterlab/ui-components';
 import type { Widget } from '@lumino/widgets';
 
 import { expandStatusFiles, status } from '../git/api';
@@ -83,6 +91,13 @@ interface IGitState {
  */
 const CHANGES_POLL_INTERVAL_MS = 8000;
 
+/**
+ * Upper bound on the exponential backoff when the status request fails
+ * repeatedly. Matches the rest of the plugin's polls so behavior is
+ * consistent across the dashboard, the git panel, and the file tree.
+ */
+const CHANGES_POLL_MAX_MS = 300_000;
+
 function LauncherDashboardComponent(
   props: ILauncherDashboardOptions
 ): React.ReactElement {
@@ -107,12 +122,23 @@ function LauncherDashboardComponent(
     }
   }, [repoPath]);
 
+  // Driven by a Lumino `Poll` so the dashboard stops hitting the git
+  // endpoint while the JupyterLab tab is hidden, and so repeated
+  // failures back off exponentially instead of pegging the 8s cadence.
   React.useEffect(() => {
-    void refresh();
-    const handle = window.setInterval(() => {
-      void refresh();
-    }, CHANGES_POLL_INTERVAL_MS);
-    return () => window.clearInterval(handle);
+    const poll = new Poll({
+      name: '@xtralab/launcher:gitChanges',
+      factory: () => refresh(),
+      frequency: {
+        interval: CHANGES_POLL_INTERVAL_MS,
+        backoff: true,
+        max: CHANGES_POLL_MAX_MS
+      },
+      standby: 'when-hidden'
+    });
+    return () => {
+      poll.dispose();
+    };
   }, [refresh]);
 
   const launch = React.useCallback(
@@ -133,6 +159,36 @@ function LauncherDashboardComponent(
     [commands, cwd, prompt, onAgentLaunch]
   );
 
+  const launchTerminal = React.useCallback(async () => {
+    const result = (await commands.execute('terminal:create-new', {
+      cwd
+    })) as Widget | undefined;
+    if (result) {
+      onAgentLaunch(result);
+    }
+  }, [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;
+    if (result) {
+      onAgentLaunch(result);
+    }
+  }, [commands, cwd, onAgentLaunch]);
+
+  const launchConsole = React.useCallback(async () => {
+    const result = (await commands.execute('console:create', {
+      cwd
+    })) as Widget | undefined;
+    if (result) {
+      onAgentLaunch(result);
+    }
+  }, [commands, cwd, onAgentLaunch]);
+
   const openDiff = React.useCallback(
     (change: IFileChange) => {
       const args: GitCommandArguments.IOpenDiff = { repoPath, change };
@@ -152,6 +208,11 @@ function LauncherDashboardComponent(
         onPromptChange={setPrompt}
         onLaunch={launch}
       />
+      <OpenSection
+        onLaunchTerminal={launchTerminal}
+        onLaunchNotebook={launchNotebook}
+        onLaunchConsole={launchConsole}
+      />
       <ChangesSection
         git={git}
         onOpen={openDiff}
@@ -278,10 +339,9 @@ function AgentSection(props: {
   const { agents, prompt, onPromptChange, onLaunch } = props;
   const trimmed = prompt.trim();
   const promptActive = trimmed.length > 0;
-  // The "primary" agent is the first prompt-capable one in the rendered
-  // order. We mark it visually so the keyboard shortcut target isn't a
-  // mystery, and reuse the same agent when Cmd/Ctrl+Enter fires from the
-  // textarea — picking by the same rule keeps the two behaviors in sync.
+  // The first prompt-capable agent is what Cmd/Ctrl+Enter fires; the hint
+  // text below the textarea names it so the keyboard shortcut target
+  // isn't a mystery.
   const primaryAgent = agents.find(agent => agent.promptArgs !== undefined);
   const hintId = 'jp-xtralab-Launcher-agent-hint';
 
@@ -320,19 +380,14 @@ function AgentSection(props: {
         {agents.map(agent => {
           const supportsPrompt = agent.promptArgs !== undefined;
           const disabled = promptActive && !supportsPrompt;
-          const isPrimary = agent === primaryAgent;
           const tooltip = disabled
             ? `${agent.label} doesn't accept an initial prompt — clear the prompt to launch.`
             : agent.caption;
-          const classes = ['jp-xtralab-Launcher-agent'];
-          if (isPrimary) {
-            classes.push('jp-xtralab-Launcher-agent-primary');
-          }
           return (
             <button
               key={agent.id}
               type="button"
-              className={classes.join(' ')}
+              className="jp-xtralab-Launcher-agent"
               title={tooltip}
               aria-label={agent.label}
               aria-describedby={hintId}
@@ -354,3 +409,67 @@ function AgentSection(props: {
     </section>
   );
 }
+
+/**
+ * The non-agent launch tiles — a plain terminal, a new notebook, and a
+ * new console. They sit in a separate section below the agent grid so
+ * they don't compete with the AI agents visually, and they're always
+ * available regardless of the agent prompt textarea (which doesn't
+ * apply to them).
+ */
+function OpenSection(props: {
+  onLaunchTerminal: () => void;
+  onLaunchNotebook: () => void;
+  onLaunchConsole: () => void;
+}): React.ReactElement {
+  const { onLaunchTerminal, onLaunchNotebook, onLaunchConsole } = props;
+  return (
+    <section className="jp-xtralab-Launcher-section">
+      <h2 className="jp-xtralab-Launcher-section-title">Open</h2>
+      <div className="jp-xtralab-Launcher-agents">
+        <button
+          type="button"
+          className="jp-xtralab-Launcher-agent"
+          title="Open a new terminal."
+          aria-label="Open a new terminal"
+          onClick={onLaunchTerminal}
+        >
+          <LabIcon.resolveReact
+            icon={terminalIcon}
+            tag="span"
+            className="jp-xtralab-Launcher-agent-icon"
+          />
+          <span className="jp-xtralab-Launcher-agent-label">Terminal</span>
+        </button>
+        <button
+          type="button"
+          className="jp-xtralab-Launcher-agent"
+          title="Create a new notebook."
+          aria-label="Create a new notebook"
+          onClick={onLaunchNotebook}
+        >
+          <LabIcon.resolveReact
+            icon={notebookIcon}
+            tag="span"
+            className="jp-xtralab-Launcher-agent-icon"
+          />
+          <span className="jp-xtralab-Launcher-agent-label">Notebook</span>
+        </button>
+        <button
+          type="button"
+          className="jp-xtralab-Launcher-agent"
+          title="Create a new console."
+          aria-label="Create a new console"
+          onClick={onLaunchConsole}
+        >
+          <LabIcon.resolveReact
+            icon={consoleIcon}
+            tag="span"
+            className="jp-xtralab-Launcher-agent-icon"
+          />
+          <span className="jp-xtralab-Launcher-agent-label">Console</span>
+        </button>
+      </div>
+    </section>
+  );
+}

package/style/editorBreadcrumbs.css

@@ -0,0 +1,86 @@
+.jp-xtralab-EditorBreadcrumbs.jp-Toolbar-item {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  align-self: center;
+  box-sizing: border-box;
+  min-width: 0;
+  height: 28px;
+  min-height: 28px;
+  max-height: 28px;
+  margin: 0;
+  padding: 0 10px;
+  color: var(--jp-ui-font-color2);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  overflow: hidden;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-container {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  height: 100%;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-home {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-right: 2px;
+  padding: 2px;
+  border-radius: var(--jp-border-radius);
+  cursor: pointer;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-home:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-home:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-item {
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0 2px;
+  overflow: hidden;
+  padding: 2px;
+  border-radius: var(--jp-border-radius);
+  cursor: pointer;
+  line-height: 18px;
+  text-overflow: ellipsis;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-item,
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-separator {
+  vertical-align: middle;
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-item:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-item:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-item.jp-mod-current {
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-xtralab-EditorBreadcrumbs .jp-BreadCrumbs-separator {
+  flex: 0 0 auto;
+  line-height: 18px;
+}

package/style/index.css

@@ -1,4 +1,6 @@
 @import url('base.css');
+@import url('editorBreadcrumbs.css');
 @import url('git.css');
 @import url('launcher.css');
 @import url('statusBar.css');
+@import url('tabs.css');

package/style/index.js

@@ -2,3 +2,4 @@ import './base.css';
 import './git.css';
 import './launcher.css';
 import './statusBar.css';
+import './tabs.css';

package/style/launcher.css

@@ -295,11 +295,6 @@
   cursor: not-allowed;
 }
 
-.jp-xtralab-Launcher-agent-primary {
-  border-color: var(--jp-brand-color2);
-  box-shadow: 0 0 0 1px var(--jp-brand-color2);
-}
-
 .jp-xtralab-Launcher-agent:hover:not(:disabled) {
   background-color: var(--jp-layout-color2);
   border-color: var(--jp-border-color1);

package/style/tabs.css

@@ -0,0 +1,66 @@
+/*
+ * Adaptive (VS Code-style) document tab widths. Tabs size to their filename
+ * instead of being pinned to --jp-private-horizontal-tab-width (216px), and
+ * the horizontal tab strip becomes scrollable when tabs overflow.
+ *
+ * Mostly mirrors jupyterlab/jupyterlab#18796, with one deliberate divergence:
+ * .lm-TabBar-content uses `flex: 0 1 auto` (not `1 1 auto`) so the +/add
+ * button sits next to the last tab instead of being pushed to the right
+ * edge of the bar. Overflow scrolling still works because `flex-shrink: 1`
+ * plus `min-width: 0` lets content shrink when tabs exceed the bar width.
+ */
+
+.lm-DockPanel-tabBar .lm-TabBar-tab,
+.lm-TabPanel-tabBar .lm-TabBar-tab {
+  flex: 0 0 auto;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-addButton,
+.lm-TabPanel-tabBar .lm-TabBar-addButton {
+  cursor: pointer;
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab {
+  width: auto;
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-content {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.lm-DockPanel-tabBar[data-orientation='horizontal'] {
+  overflow: hidden;
+}
+
+.lm-DockPanel-tabBar[data-orientation='horizontal'] > .lm-TabBar-content {
+  overflow: auto hidden;
+  position: relative;
+  z-index: 3;
+}
+
+.lm-TabBar-content::-webkit-scrollbar {
+  height: 2px;
+  background: var(--jp-layout-color1);
+}
+
+.lm-TabBar-content::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.lm-TabBar-content::-webkit-scrollbar-track {
+  background: var(--jp-layout-color1);
+}
+
+.lm-TabBar-content::-webkit-scrollbar-thumb {
+  background: rgb(120 120 120 / 40%);
+  border-radius: 999px;
+}
+
+.lm-TabBar-content:hover::-webkit-scrollbar-thumb {
+  background: rgb(160 160 160 / 60%);
+}