xtralab 0.14.1 → 0.15.0

package/src/fileBrowser/index.ts

@@ -4,16 +4,16 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { ICommandPalette } from '@jupyterlab/apputils';
+import { ICommandPalette, IMovableSectionRegistry } from '@jupyterlab/apputils';
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
-import { ITranslator } from '@jupyterlab/translation';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 
 import { populateToolbar, registerCommands } from './commands';
-import { XtralabFileBrowser } from './widget';
+import { FILE_BROWSER_ID, XtralabFileBrowser } from './widget';
 
 const PLUGIN_ID = 'xtralab:plugin';
 
@@ -27,21 +27,29 @@ const plugin: JupyterFrontEndPlugin<void> = {
     'A path-first file browser for JupyterLab built on @pierre/trees.',
   autoStart: true,
   requires: [IDocumentManager],
-  optional: [ILayoutRestorer, ISettingRegistry, ICommandPalette, ITranslator],
+  optional: [
+    ILayoutRestorer,
+    ISettingRegistry,
+    ICommandPalette,
+    ITranslator,
+    IMovableSectionRegistry
+  ],
   activate: (
     app: JupyterFrontEnd,
     docManager: IDocumentManager,
     restorer: ILayoutRestorer | null,
     settingRegistry: ISettingRegistry | null,
     palette: ICommandPalette | null,
-    translator: ITranslator | null
+    translator: ITranslator | null,
+    movableSections: IMovableSectionRegistry | null
   ): void => {
     const browser = new XtralabFileBrowser({
       contentsManager: app.serviceManager.contents,
       docManager,
       onOpenFile: (serverPath: string) => {
         void app.commands.execute('docmanager:open', { path: serverPath });
-      }
+      },
+      translator: translator ?? undefined
     });
     // Ranks just under the Terminals panel in the left sidebar. The shipped
     // `layout` setting assigns the default ranks (rank only, no area pin),
@@ -55,6 +63,33 @@ const plugin: JupyterFrontEndPlugin<void> = {
     registerCommands({ app, browser, docManager, palette, translator });
     populateToolbar({ app, browser });
 
+    if (movableSections) {
+      const label = (translator ?? nullTranslator)
+        .load('jupyterlab')
+        .__('Files');
+      movableSections.registerSource(FILE_BROWSER_ID, label, browser);
+      movableSections.registerTarget(FILE_BROWSER_ID, label, browser);
+
+      // Only a user move should switch the sidebar, not the startup restoration.
+      let settled = false;
+      void app.restored.then(() => {
+        settled = true;
+      });
+      browser.contentChanged.connect(() => {
+        if (browser.isEmpty) {
+          if (browser.parent) {
+            browser.parent = null;
+          }
+        } else if (!browser.parent) {
+          app.shell.add(browser, 'left', { rank: 2 });
+          if (settled) {
+            app.shell.activateById(browser.id);
+          }
+        }
+      });
+      browser.announceSections();
+    }
+
     if (settingRegistry) {
       settingRegistry.load(PLUGIN_ID).catch(reason => {
         console.error('Failed to load settings for xtralab.', reason);

package/src/fileBrowser/widget.tsx

@@ -1,10 +1,21 @@
 import * as React from 'react';
 
+import {
+  IMovableSectionDestination,
+  IMovableSectionSource,
+  ISectionEntry
+} from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Contents } from '@jupyterlab/services';
-import { ReactWidget, Toolbar } from '@jupyterlab/ui-components';
+import { ITranslator } from '@jupyterlab/translation';
+import {
+  AccordionToolbar,
+  PanelWithToolbar,
+  ReactWidget,
+  Toolbar
+} from '@jupyterlab/ui-components';
 import { Signal, ISignal } from '@lumino/signaling';
-import { PanelLayout, Widget } from '@lumino/widgets';
+import { AccordionPanel, PanelLayout, Widget } from '@lumino/widgets';
 
 import { FileBrowserComponent } from './fileBrowser';
 import { xtralabFileBrowserIcon } from './icons';
@@ -12,20 +23,30 @@ 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
- * 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`).
+ * Persisted by the movable-sections plugin, so it must stay stable.
+ */
+const TREE_SECTION_ID = 'xtralab-file-tree-section';
+
+/**
+ * Context menu selectors hang off this class, so it sits on the section and
+ * keeps matching once the tree moves to another panel.
  */
 const FILE_BROWSER_CSS_CLASS = 'jp-xtralab-FileBrowser';
 
+const PANEL_CSS_CLASS = 'jp-xtralab-FileBrowserPanel';
+
 const TOOLBAR_CSS_CLASS = 'jp-xtralab-FileBrowser-toolbar';
 const CONTENT_CSS_CLASS = 'jp-xtralab-FileBrowser-content';
 
+const ACCORDION_CSS_CLASS = 'jp-xtralab-FileBrowser-accordion';
+
+const MOVABLE_SECTION_CLASS = 'jp-movable-section';
+
 interface IXtralabFileBrowserOptions {
   contentsManager: Contents.IManager;
   docManager: IDocumentManager;
   onOpenFile?: (serverPath: string) => void;
+  translator?: ITranslator;
 }
 
 /**
@@ -155,39 +176,56 @@ export interface IXtralabFileBrowser {
    * Toggle the filter box above the tree.
    */
   toggleFileFilter(): void;
+
+  readonly sectionNode: HTMLElement;
 }
 
 /**
- * Lumino widget that hosts the React-based `@pierre/trees` file browser.
- * The widget is laid out with a JupyterLab `Toolbar` on top and the tree
- * filling the remaining space.
+ * Lumino widget hosting the React-based `@pierre/trees` file browser. The tree
+ * and its toolbar form one movable "Files" section, and sections from other
+ * panels can be moved in below it.
  */
-export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
+export class XtralabFileBrowser
+  extends Widget
+  implements
+    IXtralabFileBrowser,
+    IMovableSectionSource,
+    IMovableSectionDestination
+{
   constructor(options: IXtralabFileBrowserOptions) {
     super();
-    const layout = (this.layout = new PanelLayout());
+    const layout = (this._panelLayout = this.layout = new PanelLayout());
 
     this._contentsManager = options.contentsManager;
     this._docManager = options.docManager;
     this._onOpenFile = options.onOpenFile;
+    this._translator = options.translator;
     this.id = FILE_BROWSER_ID;
     this.title.icon = xtralabFileBrowserIcon;
     this.title.caption = 'xtralab File Browser';
-    this.addClass(FILE_BROWSER_CSS_CLASS);
+    this.addClass(PANEL_CSS_CLASS);
 
     this._toolbar = new Toolbar();
     this._toolbar.addClass(TOOLBAR_CSS_CLASS);
     this._toolbar.node.setAttribute('aria-label', 'file browser');
-    layout.addWidget(this._toolbar);
 
     this._content = new XtralabFileTreeContent({
       contentsManager: this._contentsManager,
       docManager: this._docManager,
       onOpenFile: this._onOpenFile,
+      translator: this._translator,
       browser: this
     });
     this._content.addClass(CONTENT_CSS_CLASS);
-    layout.addWidget(this._content);
+
+    this._section = new PanelWithToolbar({ toolbar: this._toolbar });
+    this._section.id = TREE_SECTION_ID;
+    // Only an accordion host draws this; a plain `PanelLayout` shows no title.
+    this._section.title.label = 'Files';
+    this._section.addClass(FILE_BROWSER_CSS_CLASS);
+    this._section.addWidget(this._toolbar);
+    this._section.addWidget(this._content);
+    layout.addWidget(this._section);
   }
 
   get contentsManager(): Contents.IManager {
@@ -280,9 +318,145 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     this.setFileFilterVisible(!this._fileFilterVisible);
   }
 
+  get sectionNode(): HTMLElement {
+    return this._section.node;
+  }
+
+  get isEmpty(): boolean {
+    return this._panelLayout.widgets.length === 0;
+  }
+
+  get contentChanged(): ISignal<this, void> {
+    return this._contentChanged;
+  }
+
+  get sectionAdded(): ISignal<this, ISectionEntry> {
+    return this._sectionAdded;
+  }
+
+  get accordionPanel(): AccordionPanel | null {
+    return this._accordion;
+  }
+
+  get sections(): ReadonlyArray<Widget> {
+    if (!this._accordion) {
+      return [];
+    }
+    return this._accordion.widgets.filter(w => w !== this._section);
+  }
+
+  /**
+   * The toolbar is the section's title node: it is the tree's header row at
+   * home, and an accordion host renders it inside the section title.
+   */
+  getSections(): ReadonlyArray<ISectionEntry> {
+    return this._isSectionHome()
+      ? [
+          {
+            id: TREE_SECTION_ID,
+            titleNode: this._toolbar.node,
+            widget: this._section
+          }
+        ]
+      : [];
+  }
+
+  removeSectionById(sectionId: string): Widget | null {
+    if (sectionId !== TREE_SECTION_ID || !this._isSectionHome()) {
+      return null;
+    }
+    this._section.parent = null;
+    if (this._accordion && this._accordion.widgets.length === 0) {
+      this._accordion.dispose();
+      this._accordion = null;
+    }
+    // Away from home the toolbar must not offer "Move to …" as well;
+    // `getSections` re-marks it on the way back.
+    this._toolbar.node.classList.remove(MOVABLE_SECTION_CLASS);
+    this._contentChanged.emit();
+    return this._section;
+  }
+
+  reinsertSection(widget: Widget): void {
+    if (this._accordion) {
+      this._accordion.insertWidget(0, widget);
+    } else {
+      this._panelLayout.addWidget(widget);
+      this._restoreToolbar();
+    }
+    this._contentChanged.emit();
+  }
+
+  /**
+   * The move plugin reconciles persisted moves only against sections announced
+   * after `registerSource`, and this panel builds its section in the constructor.
+   */
+  announceSections(): void {
+    for (const entry of this.getSections()) {
+      this._sectionAdded.emit(entry);
+    }
+  }
+
+  /**
+   * The first hosted section moves the tree into an accordion.
+   */
+  addSection(widget: Widget): void {
+    if (!this._accordion) {
+      const accordion = new AccordionPanel({
+        layout: AccordionToolbar.createLayout({})
+      });
+      accordion.addClass(ACCORDION_CSS_CLASS);
+      if (this._section.parent === this) {
+        accordion.addWidget(this._section);
+      }
+      accordion.addWidget(widget);
+      this._accordion = accordion;
+      this._panelLayout.addWidget(accordion);
+    } else {
+      this._accordion.addWidget(widget);
+    }
+    this._contentChanged.emit();
+  }
+
+  removeSectionWidget(widget: Widget): void {
+    if (!this._accordion || widget.parent !== this._accordion) {
+      return;
+    }
+    widget.parent = null;
+    const remaining = this._accordion.widgets;
+    const treeOnly = remaining.length === 1 && remaining[0] === this._section;
+    if (treeOnly || remaining.length === 0) {
+      if (treeOnly) {
+        if (this._section.isHidden) {
+          this._section.show();
+        }
+        this._panelLayout.addWidget(this._section);
+        this._restoreToolbar();
+      }
+      this._accordion.dispose();
+      this._accordion = null;
+    }
+    this._contentChanged.emit();
+  }
+
+  private _isSectionHome(): boolean {
+    const parent = this._section.parent;
+    return parent === this || (!!this._accordion && parent === this._accordion);
+  }
+
+  /**
+   * An accordion host moves the toolbar node into the section title and leaves
+   * it orphaned on detach; re-parenting makes the layout attach it again.
+   */
+  private _restoreToolbar(): void {
+    this._toolbar.parent = null;
+    this._section.insertWidget(0, this._toolbar);
+  }
+
   private _contentsManager: Contents.IManager;
   private _docManager: IDocumentManager;
   private _onOpenFile: ((serverPath: string) => void) | undefined;
+  private _translator: ITranslator | undefined;
   private _selectedPaths: readonly string[] = [];
   private _selectionChanged = new Signal<this, readonly string[]>(this);
   private _refreshRequested = new Signal<this, void>(this);
@@ -294,12 +468,18 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
   private _fileFilterVisibleChanged = new Signal<this, boolean>(this);
   private _toolbar: Toolbar;
   private _content: XtralabFileTreeContent;
+  private _section: PanelWithToolbar;
+  private _panelLayout: PanelLayout;
+  private _accordion: AccordionPanel | null = null;
+  private _contentChanged = new Signal<this, void>(this);
+  private _sectionAdded = new Signal<this, ISectionEntry>(this);
 }
 
 interface IFileTreeContentOptions {
   contentsManager: Contents.IManager;
   docManager: IDocumentManager;
   onOpenFile?: (serverPath: string) => void;
+  translator?: ITranslator;
   browser: XtralabFileBrowser;
 }
 
@@ -319,6 +499,7 @@ class XtralabFileTreeContent extends ReactWidget {
         contentsManager={this._options.contentsManager}
         docManager={this._options.docManager}
         onOpenFile={this._options.onOpenFile}
+        translator={this._options.translator}
         widget={this._options.browser}
       />
     );

package/src/index.ts

@@ -4,6 +4,7 @@ import aboutPlugin from './about';
 import agentSessionsPlugin from './agentSessions';
 import askAgentPlugin from './askAgent';
 import commandBarPlugin from './commandBar';
+import customPanelPlugin from './customPanel';
 import fileBrowserPlugin from './fileBrowser';
 import fileTypeIconsPlugin from './fileTypeIcons';
 import editorBreadcrumbsPlugin from './editorBreadcrumbs';
@@ -36,6 +37,7 @@ const plugins: JupyterFrontEndPlugin<unknown>[] = [
   agentSessionsPlugin,
   askAgentPlugin,
   commandBarPlugin,
+  customPanelPlugin,
   editorBreadcrumbsPlugin,
   editorIndentPlugin,
   fileBrowserPlugin,

package/src/launcher/agents.ts

@@ -26,7 +26,7 @@ export interface IAgent {
    * the user types one into the launcher's prompt box. The semantics:
    *
    *   - `[]` → prompt is appended as a positional argument:
-   *     `<command> 'PROMPT'`. (Used by claude, codex, vibe.)
+   *     `<command> 'PROMPT'`. (Used by claude, codex, vibe, pi.)
    *   - `['-i']` / `['--prompt']` → the prompt is preceded by a flag:
    *     `<command> -i 'PROMPT'`. (Used by copilot, opencode.)
    *   - `undefined` → the agent does not accept an initial prompt. The
@@ -86,8 +86,9 @@ export interface IAgentSettings {
  * icons come from), but use the bare CLI names a user would type in a
  * terminal rather than the ACP wrapper binaries that project spawns.
  * Antigravity (Google's agent-first IDE/CLI, `agy`) is the Google agent.
- * Anything not on the user's `$PATH` is filtered out at activation time, so
- * the wider list is harmless.
+ * Pi (https://pi.dev, `earendil-works/pi`) is a minimal extensible coding
+ * agent; its mark comes straight from its site. Anything not on the user's
+ * `$PATH` is filtered out at activation time, so the wider list is harmless.
  */
 const DEFAULTS: IAgent[] = [
   {
@@ -179,6 +180,18 @@ const DEFAULTS: IAgent[] = [
     rank: 7,
     requireAvailable: true,
     promptArgs: []
+  },
+  {
+    id: 'pi',
+    label: 'Pi',
+    caption: 'Start Pi in a new terminal.',
+    command: 'pi',
+    icon: BUILTIN_AGENT_ICONS.pi,
+    rank: 8,
+    requireAvailable: true,
+    // `pi [messages...]` starts the interactive TUI and sends the messages
+    // as the first user prompt, so the positional form applies.
+    promptArgs: []
   }
 ];
 

package/src/launcher/icons.ts

@@ -6,11 +6,14 @@ import { LabIcon } from '@jupyterlab/ui-components';
  * (`jupyter_ai_acp_client/static/*.svg`, BSD-3-Clause); Antigravity post-dates
  * that set, so its mark is the official glyph from `@lobehub/icons-static-svg`
  * (MIT) — we ship the brand-colored `antigravity-color` variant so Antigravity
- * reads as a multi-color Google mark. Small adjustments are applied
+ * reads as a multi-color Google mark. Pi's mark is the official `logo-auto.svg`
+ * from https://pi.dev (MIT, `earendil-works/pi`). Small adjustments are applied
  * to play nicely with JupyterLab themes:
- *   - Monochrome marks (Codex, Copilot, Goose) use `currentColor` so they
+ *   - Monochrome marks (Codex, Copilot, Goose, Pi) use `currentColor` so they
  *     inherit the surrounding launcher card's text color rather than
- *     hard-coding black, which disappears on the dark theme.
+ *     hard-coding black, which disappears on the dark theme. For Pi this
+ *     replaces the upstream `prefers-color-scheme` style block, which follows
+ *     the OS scheme rather than the active JupyterLab theme.
  *   - The Goose mark upstream is rendered on a white rounded rect; we drop
  *     the rect so the silhouette can sit on the launcher card directly.
  *   - SVG ids that would collide if two copies of the same artwork ended up
@@ -179,6 +182,14 @@ const opencodeIcon = new LabIcon({
 </svg>`
 });
 
+const piIcon = new LabIcon({
+  name: 'xtralab:agent-pi',
+  svgstr: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" fill="currentColor">
+  <path fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/>
+  <path d="M517.36 400H634.72V634.72H517.36Z"/>
+</svg>`
+});
+
 const neovimIcon = new LabIcon({
   name: 'xtralab:editor-neovim',
   svgstr: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#57A143">
@@ -207,7 +218,8 @@ export const BUILTIN_AGENT_ICONS: Record<string, LabIcon> = {
   goose: gooseIcon,
   kiro: kiroIcon,
   'mistral-vibe': mistralVibeIcon,
-  opencode: opencodeIcon
+  opencode: opencodeIcon,
+  pi: piIcon
 };
 
 /**

package/src/launcher/schemaDefaults.ts

@@ -10,21 +10,39 @@ import { defaultEditorSettings } from './editors';
 export const LAUNCHER_PLUGIN_ID = 'xtralab:launcher';
 
 /**
- * Setting registries that already have the transform, so both callers skip
- * re-registering (the registry rejects a duplicate transformer).
+ * Registries that already have the transform (duplicates are rejected).
  */
 const registered = new WeakSet<ISettingRegistry>();
 
 /**
- * Register a `fetch` transform that injects xtralab's built-in agent and
- * editor lists as the schema defaults for the `xtralab:launcher` settings, so
- * the Settings Editor shows the shipped list.
- *
- * The schema declares `jupyter.lab.transform: true`, so the registry defers
- * loading the plugin until a transform is registered: callers must invoke this
- * before their first `settingRegistry.load(LAUNCHER_PLUGIN_ID)`. Idempotent, so
- * the two plugins that load these settings can both call it regardless of
- * activation order.
+ * Merge sparse user entries over the built-in defaults, keyed by `id`.
+ */
+function mergeSettingsById<
+  T extends { id: string; enabled?: boolean; requireAvailable?: boolean }
+>(defaults: T[], user: PartialJSONValue | undefined): T[] {
+  const entries = Array.isArray(user) ? (user as unknown as T[]) : [];
+  const overrideById = new Map(entries.map(entry => [entry.id, entry]));
+  const merged = defaults.map(base => {
+    const override = overrideById.get(base.id);
+    if (!override) {
+      return base;
+    }
+    overrideById.delete(base.id);
+    return { ...base, ...override };
+  });
+  merged.push(...overrideById.values());
+  // Item schema defaults are applied before this transform runs; without the
+  // refill, sparse entries render with unchecked boxes.
+  return merged.map(entry => ({
+    ...entry,
+    enabled: entry.enabled ?? true,
+    requireAvailable: entry.requireAvailable ?? true
+  }));
+}
+
+/**
+ * Must run before the first `load(LAUNCHER_PLUGIN_ID)` (the schema sets
+ * `jupyter.lab.transform: true`); idempotent across callers.
  */
 export function registerLauncherSchemaDefaults(
   settingRegistry: ISettingRegistry
@@ -35,11 +53,23 @@ export function registerLauncherSchemaDefaults(
   registered.add(settingRegistry);
 
   settingRegistry.transform(LAUNCHER_PLUGIN_ID, {
+    compose: plugin => {
+      const { user } = plugin.data;
+      const composite = { ...plugin.data.composite };
+      composite.agents = mergeSettingsById(
+        defaultAgentSettings(),
+        user.agents
+      ) as unknown as PartialJSONValue;
+      composite.editors = mergeSettingsById(
+        defaultEditorSettings(),
+        user.editors
+      ) as unknown as PartialJSONValue;
+      plugin.data = { composite, user };
+      return plugin;
+    },
     fetch: plugin => {
       const properties = plugin.schema.properties;
       if (properties) {
-        // The settings shapes are plain JSON by construction, but their named
-        // interfaces lack an index signature, so cast at this TS→JSON boundary.
         if (properties.agents) {
           properties.agents.default =
             defaultAgentSettings() as unknown as PartialJSONValue;