xtralab 0.14.0 → 0.15.0

package/src/terminals/widget.tsx

@@ -1,3 +1,8 @@
+import {
+  IMovableSectionDestination,
+  IMovableSectionSource,
+  ISectionEntry
+} from '@jupyterlab/apputils';
 import {
   type TranslationBundle,
   nullTranslator
@@ -6,11 +11,16 @@ import {
   addIcon,
   closeIcon,
   LabIcon,
+  PanelWithToolbar,
   ReactWidget,
+  SidePanel,
   stopIcon,
   terminalIcon,
+  ToolbarButton,
   UseSignal
 } from '@jupyterlab/ui-components';
+import { ISignal, Signal } from '@lumino/signaling';
+import { AccordionPanel, Widget } from '@lumino/widgets';
 import * as React from 'react';
 
 import { SessionRegistry } from './model';
@@ -22,37 +32,134 @@ import { SessionRegistry } from './model';
 const RUNNING_TERMINALS_ID = 'xtralab-running-terminals';
 
 /**
- * Left-sidebar panel listing every running terminal session. It is the
- * sidebar counterpart of the launcher's terminal tiles: where the
- * launcher *starts* sessions, this panel surfaces the ones already
- * running so the user can jump back to a backgrounded agent — including
- * sessions whose tab has been closed but which are still alive on the
- * server. Each row is labelled with the session's title and, for a session
- * running a coding agent, a smaller line below it showing the agent's latest
- * line of output (from {@link SessionRegistry.activityFor}).
- *
- * 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 behavior (activate vs. reopen, shutdown, new terminal) is
- * delegated to plugin-supplied callbacks so the widget never imports
- * `app`.
+ * Id of the accordion section holding the terminals list. Persisted by the
+ * movable-sections plugin, so it must stay stable across releases.
  */
-export class RunningTerminals extends ReactWidget {
+const TERMINALS_SECTION_ID = 'xtralab-terminals-section';
+
+/**
+ * Left-sidebar panel listing every running terminal session, including the
+ * sessions whose tab is closed but which are still alive on the server. The
+ * list is a single movable "Terminals" section.
+ */
+export class RunningTerminals
+  extends SidePanel
+  implements IMovableSectionSource, IMovableSectionDestination
+{
   constructor(options: RunningTerminals.IOptions) {
     super();
     this._registry = options.registry;
-    this._trans = options.trans ?? nullTranslator.load('jupyterlab');
-    this._iconForCommand = options.iconForCommand;
-    this._onActivate = options.onActivate;
-    this._onShutdown = options.onShutdown;
-    this._onShutdownAll = options.onShutdownAll;
-    this._onCreate = options.onCreate;
+    const trans = options.trans ?? nullTranslator.load('jupyterlab');
 
     this.id = RUNNING_TERMINALS_ID;
     this.title.icon = terminalIcon;
-    this.title.caption = this._trans.__('Running Terminals');
+    this.title.caption = trans.__('Running Terminals');
     this.addClass('jp-xtralab-Terminals');
+
+    const section = (this._section = new PanelWithToolbar());
+    section.id = TERMINALS_SECTION_ID;
+    section.title.label = trans.__('Terminals');
+    section.addClass('jp-xtralab-Terminals-section');
+
+    const shutdownAll = new ToolbarButton({
+      icon: stopIcon,
+      onClick: options.onShutdownAll,
+      tooltip: trans.__('Shut Down All Terminals'),
+      enabled: this._registry.sessionNames().length > 0
+    });
+    this._registry.stateChanged.connect(() => {
+      shutdownAll.enabled = this._registry.sessionNames().length > 0;
+    });
+    section.toolbar.addItem('shutdown-all', shutdownAll);
+
+    const newTerminal = new ToolbarButton({
+      icon: addIcon,
+      onClick: () => {
+        // Anchor whatever the plugin shows (usually an agent menu) to the
+        // button's bottom-left, in the viewport coordinates `Menu.open` wants.
+        const rect = newTerminal.node.getBoundingClientRect();
+        options.onCreate({ x: rect.left, y: rect.bottom });
+      },
+      tooltip: trans.__('New Terminal')
+    });
+    section.toolbar.addItem('new-terminal', newTerminal);
+
+    section.addWidget(
+      new TerminalsListing({
+        registry: this._registry,
+        trans,
+        iconForCommand: options.iconForCommand,
+        onActivate: options.onActivate,
+        onShutdown: options.onShutdown
+      })
+    );
+
+    this.addWidget(section);
+  }
+
+  get accordionPanel(): AccordionPanel {
+    return this.content as AccordionPanel;
+  }
+
+  get sectionAdded(): ISignal<this, ISectionEntry> {
+    return this._sectionAdded;
+  }
+
+  get sections(): ReadonlyArray<Widget> {
+    return this.accordionPanel.widgets.filter(w => w !== this._section);
+  }
+
+  getSections(): ReadonlyArray<ISectionEntry> {
+    const entry = this._sectionEntry();
+    return entry ? [entry] : [];
+  }
+
+  removeSectionById(sectionId: string): Widget | null {
+    if (
+      sectionId !== TERMINALS_SECTION_ID ||
+      this._section.parent !== this.content
+    ) {
+      return null;
+    }
+    this._section.parent = null;
+    return this._section;
+  }
+
+  reinsertSection(widget: Widget): void {
+    this.addWidget(widget);
+  }
+
+  addSection(widget: Widget): void {
+    this.addWidget(widget);
+  }
+
+  removeSectionWidget(widget: Widget): void {
+    if (widget.parent === this.content) {
+      widget.parent = null;
+    }
+  }
+
+  /**
+   * The layout restorer stores a section as collapsed whenever its panel is off
+   * screen at save time, so it can come back collapsed without the user asking.
+   */
+  expandOwnSection(): void {
+    const accordion = this.accordionPanel;
+    const index = Array.from(accordion.widgets).indexOf(this._section);
+    if (index >= 0) {
+      accordion.expand(index);
+    }
+  }
+
+  /**
+   * The move plugin reconciles persisted moves only against sections announced
+   * after `registerSource`, and this panel builds its section in the constructor.
+   */
+  announceSections(): void {
+    const entry = this._sectionEntry();
+    if (entry) {
+      this._sectionAdded.emit(entry);
+    }
   }
 
   dispose(): void {
@@ -65,31 +172,23 @@ export class RunningTerminals extends ReactWidget {
     super.dispose();
   }
 
-  protected render(): React.ReactElement {
-    return (
-      <UseSignal signal={this._registry.stateChanged}>
-        {() => (
-          <RunningTerminalsComponent
-            registry={this._registry}
-            trans={this._trans}
-            iconForCommand={this._iconForCommand}
-            onActivate={this._onActivate}
-            onShutdown={this._onShutdown}
-            onShutdownAll={this._onShutdownAll}
-            onCreate={this._onCreate}
-          />
-        )}
-      </UseSignal>
-    );
+  private _sectionEntry(): ISectionEntry | null {
+    const accordion = this.accordionPanel;
+    const index = Array.from(accordion.widgets).indexOf(this._section);
+    const titleNode = accordion.titles[index] as HTMLElement | undefined;
+    if (index < 0 || !titleNode) {
+      return null;
+    }
+    return {
+      id: TERMINALS_SECTION_ID,
+      titleNode,
+      widget: this._section
+    };
   }
 
   private _registry: SessionRegistry;
-  private _trans: TranslationBundle;
-  private _iconForCommand: (command: string | null) => LabIcon;
-  private _onActivate: (sessionName: string) => void;
-  private _onShutdown: (sessionName: string) => void;
-  private _onShutdownAll: () => void;
-  private _onCreate: (anchor: { x: number; y: number }) => void;
+  private _section: PanelWithToolbar;
+  private _sectionAdded = new Signal<this, ISectionEntry>(this);
 }
 
 export namespace RunningTerminals {
@@ -128,24 +227,55 @@ export namespace RunningTerminals {
   }
 }
 
+/**
+ * The body of the Terminals section.
+ */
+class TerminalsListing extends ReactWidget {
+  constructor(options: {
+    registry: SessionRegistry;
+    trans: TranslationBundle;
+    iconForCommand: (command: string | null) => LabIcon;
+    onActivate: (sessionName: string) => void;
+    onShutdown: (sessionName: string) => void;
+  }) {
+    super();
+    this._options = options;
+    this.addClass('jp-xtralab-Terminals-listing');
+  }
+
+  protected render(): React.ReactElement {
+    return (
+      <UseSignal signal={this._options.registry.stateChanged}>
+        {() => (
+          <RunningTerminalsComponent
+            registry={this._options.registry}
+            trans={this._options.trans}
+            iconForCommand={this._options.iconForCommand}
+            onActivate={this._options.onActivate}
+            onShutdown={this._options.onShutdown}
+          />
+        )}
+      </UseSignal>
+    );
+  }
+
+  private _options: {
+    registry: SessionRegistry;
+    trans: TranslationBundle;
+    iconForCommand: (command: string | null) => LabIcon;
+    onActivate: (sessionName: string) => void;
+    onShutdown: (sessionName: string) => void;
+  };
+}
+
 function RunningTerminalsComponent(props: {
   registry: SessionRegistry;
   trans: TranslationBundle;
   iconForCommand: (command: string | null) => LabIcon;
   onActivate: (sessionName: string) => void;
   onShutdown: (sessionName: string) => void;
-  onShutdownAll: () => void;
-  onCreate: (anchor: { x: number; y: number }) => void;
 }): React.ReactElement {
-  const {
-    registry,
-    trans,
-    iconForCommand,
-    onActivate,
-    onShutdown,
-    onShutdownAll,
-    onCreate
-  } = props;
+  const { registry, trans, iconForCommand, onActivate, onShutdown } = props;
   const names = registry.sessionNames();
   // The session whose terminal is the current widget in the main area, so its
   // row can be highlighted. `null` when the current tab is a notebook or any
@@ -154,37 +284,6 @@ function RunningTerminalsComponent(props: {
 
   return (
     <div className="jp-xtralab-Terminals-body">
-      <div className="jp-xtralab-Terminals-header">
-        <h2 className="jp-xtralab-Terminals-title">{trans.__('Terminals')}</h2>
-        <div className="jp-xtralab-Terminals-actions">
-          <button
-            type="button"
-            className="jp-xtralab-Terminals-action jp-xtralab-Terminals-shutdown-all"
-            onClick={onShutdownAll}
-            disabled={names.length === 0}
-            title={trans.__('Shut Down All Terminals')}
-            aria-label={trans.__('Shut Down All Terminals')}
-          >
-            <stopIcon.react tag="span" verticalAlign="middle" />
-          </button>
-          <button
-            type="button"
-            className="jp-xtralab-Terminals-action jp-xtralab-Terminals-new"
-            onClick={event => {
-              // Anchor whatever the plugin shows (usually an agent menu) to
-              // the button's bottom-left, in viewport coordinates — what
-              // `Menu.open(x, y)` expects.
-              const rect = event.currentTarget.getBoundingClientRect();
-              onCreate({ x: rect.left, y: rect.bottom });
-            }}
-            title={trans.__('New Terminal')}
-            aria-label={trans.__('New Terminal')}
-            aria-haspopup="menu"
-          >
-            <addIcon.react tag="span" verticalAlign="middle" />
-          </button>
-        </div>
-      </div>
       {names.length === 0 ? (
         <p className="jp-xtralab-Terminals-empty">
           {trans.__('No running terminals.')}

package/style/base.css

@@ -4,10 +4,22 @@
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
 
+/*
+ * Rules live on the section class below, so they travel when the tree moves.
+ */
+.jp-xtralab-FileBrowserPanel {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  overflow: hidden;
+}
+
 .jp-xtralab-FileBrowser {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   min-width: 200px;
+  min-height: 0;
   overflow: hidden;
   background-color: var(--jp-layout-color1);
 
@@ -129,46 +141,22 @@
   min-height: 0;
 }
 
-.jp-xtralab-FileBrowser file-tree-container {
+.jp-xtralab-FileBrowser-accordion {
   flex: 1 1 auto;
   min-height: 0;
 }
 
 /*
- * Drag image shown next to the cursor while dragging files out of the
- * tree. Mirrors the visual weight of the default file browser's drag
- * preview without depending on its DOM.
+ * In an accordion the toolbar shares the title row, so it must be able to
+ * shrink.
  */
-.jp-xtralab-DragImage {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  background-color: var(--jp-layout-color1);
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 6px;
-  color: var(--jp-ui-font-color1);
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  pointer-events: none;
-}
-
-.jp-xtralab-DragImage-icon {
-  display: inline-flex;
-  align-items: center;
+.jp-AccordionPanel-title > .jp-xtralab-FileBrowser-toolbar {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
 }
 
-.jp-xtralab-DragImage-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  background-color: var(--jp-brand-color1);
-  border-radius: 8px;
-  color: var(--jp-ui-inverse-font-color1);
-  font-size: var(--jp-ui-font-size0);
-  line-height: 1;
+.jp-xtralab-FileBrowser file-tree-container {
+  flex: 1 1 auto;
+  min-height: 0;
 }

package/style/customPanel.css

@@ -0,0 +1,9 @@
+/*
+ * All visible content comes from the hosted sections, which carry their own
+ * styles.
+ */
+
+.jp-xtralab-CustomPanel {
+  min-width: 200px;
+  overflow: hidden;
+}

package/style/index.js

@@ -3,6 +3,7 @@ import './about.css';
 import './askAgent.css';
 import './chrome.css';
 import './commandBar.css';
+import './customPanel.css';
 import './editorBreadcrumbs.css';
 import './git.css';
 import './highlight.css';

package/style/terminals.css

@@ -1,93 +1,36 @@
 /*
- * Left-sidebar panel listing running terminal sessions. Each row shows
- * the session's real (program-published) title, a smaller line below it
- * with the latest output from a running coding agent, and an inline
- * shutdown button that fades in on hover; the header carries the panel
- * title and a "new terminal" button. Colors and spacing pull from
- * `--jp-*` custom properties so the panel tracks the active JupyterLab
- * theme.
+ * Left-sidebar panel listing running terminal sessions, as a single movable
+ * "Terminals" section. Each row shows the session's real (program-published)
+ * title, a smaller line below it with the latest output from a running coding
+ * agent, and an inline shutdown button that fades in on hover. Colors and
+ * spacing pull from `--jp-*` custom properties so the panel tracks the active
+ * JupyterLab theme.
  */
 
 .jp-xtralab-Terminals {
-  display: flex;
-  flex-direction: column;
   min-width: 200px;
   overflow: hidden;
-  background-color: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  font-size: var(--jp-ui-font-size1);
 }
 
-.jp-xtralab-Terminals-body {
+/* On the section, not the panel, so the rules travel when the section moves. */
+.jp-xtralab-Terminals-section {
   display: flex;
-  flex: 1 1 auto;
   flex-direction: column;
-  min-height: 0;
-}
-
-.jp-xtralab-Terminals-header {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
-}
-
-.jp-xtralab-Terminals-title {
-  margin: 0;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--jp-ui-font-color1);
+  overflow: hidden;
 }
 
-.jp-xtralab-Terminals-actions {
+.jp-xtralab-Terminals-listing {
   display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 2px;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.jp-xtralab-Terminals-action {
+.jp-xtralab-Terminals-body {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  color: var(--jp-ui-font-color2);
-  cursor: pointer;
-}
-
-.jp-xtralab-Terminals-action:hover {
-  background-color: var(--jp-layout-color2);
-  color: var(--jp-ui-font-color1);
-}
-
-.jp-xtralab-Terminals-action:focus-visible {
-  outline: var(--jp-border-width) solid var(--jp-brand-color1);
-  outline-offset: -1px;
-}
-
-/*
- * "Shut down all" is disabled when there are no running terminals. Dim the
- * whole control with opacity rather than `color`: the stop glyph is an SVG
- * whose fill comes from its own `jp-icon3` class (not `currentColor`), so a
- * `color` change alone leaves the icon looking fully active — which is why the
- * button did not read as disabled.
- */
-.jp-xtralab-Terminals-action:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.jp-xtralab-Terminals-action:disabled:hover {
-  background: transparent;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .jp-xtralab-Terminals-empty {
@@ -214,9 +157,8 @@
   opacity: 1;
 }
 
-/* Keep the row/header icons at the standard 16px sidebar size. */
-.jp-xtralab-Terminals-item svg,
-.jp-xtralab-Terminals-action svg {
+/* Keep the row icons at the standard 16px sidebar size. */
+.jp-xtralab-Terminals-item svg {
   width: 16px;
   height: 16px;
 }