xtralab 0.14.1 → 0.15.0

package/src/sidebar/index.ts

@@ -10,21 +10,46 @@ import type { Widget } from '@lumino/widgets';
 const PLUGIN_ID = 'xtralab:sidebar';
 
 /**
- * Each entry pairs an upstream sidebar widget id with the rank it was
- * originally added at. The ranks come from the upstream extensions —
- * `filebrowser-extension` adds the default browser at rank 100 and
- * `running-extension` adds the running panel at rank 200 — and we reuse
- * them when re-adding so the tab lands back in its usual position.
+ * `rank` is the fallback used when re-adding a hidden tab; the shipped
+ * `layout` setting normally wins because `LabShell.add` merges its
+ * per-widget options over the ones passed in.
  */
 interface ITarget {
   id: string;
   rank: number;
-  settingKey: 'showDefaultFileBrowser' | 'showRunningSessions';
+  settingKey:
+    | 'showTerminals'
+    | 'showFileBrowser'
+    | 'showGitPanel'
+    | 'showDefaultFileBrowser'
+    | 'showRunningSessions'
+    | 'showSearchReplace';
   command: string;
   label: (trans: ReturnType<ITranslator['load']>) => string;
 }
 
 const TARGETS: ITarget[] = [
+  {
+    id: 'xtralab-running-terminals',
+    rank: 1,
+    settingKey: 'showTerminals',
+    command: 'xtralab:toggle-terminals',
+    label: trans => trans.__('Terminals')
+  },
+  {
+    id: 'xtralab:file-browser',
+    rank: 2,
+    settingKey: 'showFileBrowser',
+    command: 'xtralab:toggle-file-browser',
+    label: trans => trans.__('File Browser')
+  },
+  {
+    id: 'jp-git-sessions',
+    rank: 200,
+    settingKey: 'showGitPanel',
+    command: 'xtralab:toggle-git-panel',
+    label: trans => trans.__('Git')
+  },
   {
     id: 'filebrowser',
     rank: 100,
@@ -38,28 +63,29 @@ const TARGETS: ITarget[] = [
     settingKey: 'showRunningSessions',
     command: 'xtralab:toggle-running-sessions',
     label: trans => trans.__('Running Terminals and Kernels')
+  },
+  {
+    id: 'jp-search-replace',
+    rank: 900,
+    settingKey: 'showSearchReplace',
+    command: 'xtralab:toggle-search-replace',
+    label: trans => trans.__('Search and Replace')
   }
 ];
 
 /**
- * Lets the user toggle individual left-sidebar tabs from
- * View > Appearance > Left Sidebar. Removing a widget from a `LabShell`
- * side area is done by setting `widget.parent = null`: the StackedPanel
- * emits `widgetRemoved`, which the SideBarHandler responds to by removing
- * the matching tab. The widget instance is preserved, so we can re-add it
- * later via `labShell.add` with its original rank.
- *
- * The menu placement is contributed declaratively in
- * `schema/sidebar.json`, so this plugin only registers commands and
- * applies state — it does not touch `IMainMenu` directly.
- *
- * The preference is persisted to `xtralab:sidebar` settings so the choice
- * survives reloads.
+ * Toggles individual sidebar tabs from View > Appearance > Sidebars,
+ * whichever side a tab currently lives on. Hiding detaches the widget
+ * (`widget.parent = null`) while keeping the instance for a later
+ * re-add; the preference persists in this plugin's settings. Which side
+ * a hidden tab came from is only tracked in-memory, so after a reload a
+ * re-shown tab lands on the left. The menu placement is contributed
+ * declaratively in `schema/sidebar.json`.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
   id: PLUGIN_ID,
   description:
-    'Toggle visibility of selected sidebar tabs (default file browser, running sessions) from the View menu.',
+    'Toggle visibility of individual sidebar tabs from the View menu.',
   autoStart: true,
   requires: [ILabShell],
   optional: [ISettingRegistry, ITranslator],
@@ -72,31 +98,40 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const trans = (translator ?? nullTranslator).load('jupyterlab');
     const { commands } = app;
 
-    // Cache widget instances so we can re-add them after `widget.parent =
-    // null` has detached them from the sidebar. The widget is no longer
-    // reachable through `labShell.widgets('left')` once removed, so a
-    // missing cache entry would leave us unable to bring the tab back.
+    // Detached widgets are unreachable via `labShell.widgets(...)`; keep
+    // instances here so hidden tabs can be re-added.
     const widgetCache = new Map<string, Widget>();
 
-    const findInSidebar = (id: string): Widget | null => {
-      for (const w of labShell.widgets('left')) {
-        if (w.id === id) {
-          return w;
+    // Side each hidden widget was removed from, so re-showing restores it
+    // there.
+    const hiddenFrom = new Map<string, 'left' | 'right'>();
+
+    const findInSidebars = (
+      id: string
+    ): { widget: Widget; area: 'left' | 'right' } | null => {
+      for (const area of ['left', 'right'] as const) {
+        for (const widget of labShell.widgets(area)) {
+          if (widget.id === id) {
+            return { widget, area };
+          }
         }
       }
       return null;
     };
 
+    const locate = (id: string): 'left' | 'right' | null =>
+      findInSidebars(id)?.area ?? null;
+
     const captureWidget = (id: string): Widget | null => {
       const cached = widgetCache.get(id);
       if (cached && !cached.isDisposed) {
         return cached;
       }
-      const found = findInSidebar(id);
+      const found = findInSidebars(id);
       if (found) {
-        widgetCache.set(id, found);
+        widgetCache.set(id, found.widget);
       }
-      return found;
+      return found?.widget ?? null;
     };
 
     let settings: ISettingRegistry.ISettings | null = null;
@@ -112,19 +147,24 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const apply = (target: ITarget): void => {
       const widget = captureWidget(target.id);
       if (!widget) {
-        // The upstream widget hasn't been added yet (or the extension is
-        // disabled). Nothing to do — the next time `apply` runs and finds
-        // it, the preference will take effect.
+        // Not seen yet (extension disabled or not added) — nothing to do.
+        return;
+      }
+      const area = locate(target.id);
+      if (!area && widget.parent !== null) {
+        // Attached outside the sidebars — leave it alone.
         return;
       }
-      const present = findInSidebar(target.id) !== null;
       const wantPresent = readPreference(target);
-      if (wantPresent && !present) {
-        labShell.add(widget, 'left', { rank: target.rank });
-      } else if (!wantPresent && present) {
-        // Setting `parent = null` triggers SideBarHandler's
-        // `_onWidgetRemoved`, which strips the tab while leaving the
-        // widget instance alive for a later re-add.
+      if (wantPresent && !area) {
+        labShell.add(widget, hiddenFrom.get(target.id) ?? 'left', {
+          rank: target.rank
+        });
+        hiddenFrom.delete(target.id);
+      } else if (!wantPresent && area) {
+        hiddenFrom.set(target.id, area);
+        // Detaching makes the SideBarHandler remove the tab while the
+        // widget instance stays alive for a later re-add.
         widget.parent = null;
       }
     };
@@ -139,14 +179,21 @@ const plugin: JupyterFrontEndPlugin<void> = {
       commands.addCommand(target.command, {
         label: target.label(trans),
         isToggled: () => readPreference(target),
+        isVisible: () => {
+          // List only tabs this plugin can manage: in a sidebar, or
+          // hidden by this plugin (`parent === null`).
+          const widget = captureWidget(target.id);
+          return (
+            widget !== null &&
+            (widget.parent === null || locate(target.id) !== null)
+          );
+        },
         execute: async () => {
           const next = !readPreference(target);
           if (settings) {
             try {
               await settings.set(target.settingKey, next);
-              // `settings.changed` will fire and drive `apply` + the
-              // command-state refresh. Returning here keeps the toggle's
-              // single source of truth in the settings registry.
+              // `settings.changed` drives `apply` and the state refresh.
               return;
             } catch (reason) {
               console.error(
@@ -155,9 +202,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
               );
             }
           }
-          // No settings registry available (or the write failed): fall
-          // back to applying the change in-memory so the toggle still
-          // works for the current session.
+          // No settings registry (or the write failed): apply in-memory
+          // for the current session only.
           apply(target);
           commands.notifyCommandChanged(target.command);
         }
@@ -179,11 +225,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
     }
 
     void app.restored.then(() => {
-      // Capture references first so a hidden-on-startup widget is still
-      // recoverable later. `apply` would also do the lookup, but only on
-      // the targets that need to stay visible — by capturing every target
-      // here we keep the cache populated for both directions of the
-      // toggle.
+      // Capture every widget before applying, so tabs hidden on startup
+      // stay recoverable.
       for (const target of TARGETS) {
         captureWidget(target.id);
       }

package/src/terminals/index.ts

@@ -3,7 +3,11 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { Dialog, showDialog } from '@jupyterlab/apputils';
+import {
+  Dialog,
+  IMovableSectionRegistry,
+  showDialog
+} from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminalTracker } from '@jupyterlab/terminal';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
@@ -36,9 +40,11 @@ const PLUGIN_ID = 'xtralab:terminals';
  *
  * Clicking a row activates the existing tab if one is open, or reopens
  * the session in a fresh terminal widget (`terminal:open`). The inline
- * `×` button shuts the session down on the server. The header carries a
- * `+` button and a stop button (the latter shuts every session down at
- * once, after a confirmation).
+ * `×` button shuts the session down on the server. The Terminals
+ * section's title toolbar carries a `+` button and a stop button (the
+ * latter shuts every session down at once, after a confirmation).
+ *
+ * The list is one movable section, and other panels' sections can move in.
  *
  * The `+` button drops down a menu — built from the launcher's shared
  * `IAgentRegistry` — listing each available agent (Claude, Codex, …)
@@ -65,7 +71,8 @@ const plugin: JupyterFrontEndPlugin<IAgentTerminals> = {
     IAgentRegistry,
     IEditorRegistry,
     IAgentSessions,
-    ISettingRegistry
+    ISettingRegistry,
+    IMovableSectionRegistry
   ],
   activate: (
     app: JupyterFrontEnd,
@@ -75,7 +82,8 @@ const plugin: JupyterFrontEndPlugin<IAgentTerminals> = {
     agentRegistry: IAgentRegistry | null,
     editorRegistry: IEditorRegistry | null,
     agentSessions: IAgentSessions | null,
-    settingRegistry: ISettingRegistry | null
+    settingRegistry: ISettingRegistry | null,
+    movableSections: IMovableSectionRegistry | null
   ): IAgentTerminals => {
     const trans = (translator ?? nullTranslator).load('jupyterlab');
 
@@ -262,6 +270,16 @@ const plugin: JupyterFrontEndPlugin<IAgentTerminals> = {
       restorer.add(panel, panel.id);
     }
 
+    void app.restored.then(() => {
+      panel.expandOwnSection();
+    });
+
+    if (movableSections) {
+      movableSections.registerSource(PLUGIN_ID, trans.__('Terminals'), panel);
+      movableSections.registerTarget(PLUGIN_ID, trans.__('Terminals'), panel);
+      panel.announceSections();
+    }
+
     // The latest-activity line under each agent row is on by default; honour
     // the `showAgentActivity` setting so it can be turned off. Read on load and
     // re-applied on every change.

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.')}