xtralab 0.3.0 → 0.4.0

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,6 +2,7 @@ import * as React from 'react';
 
 import type { CommandRegistry } from '@lumino/commands';
 import type { ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { Poll } from '@lumino/polling';
 import {
   LabIcon,
   ReactWidget,
@@ -90,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 {
@@ -114,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(
@@ -320,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';
 
@@ -362,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}

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%);
+}