xtralab 0.5.0 → 0.7.0

package/style/terminals.css

@@ -0,0 +1,235 @@
+/*
+ * Left-sidebar panel listing running terminal sessions. Each row shows
+ * the session's real (program-published) title 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.
+ */
+
+.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 {
+  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);
+}
+
+.jp-xtralab-Terminals-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 2px;
+}
+
+.jp-xtralab-Terminals-action {
+  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;
+}
+
+.jp-xtralab-Terminals-empty {
+  margin: 0;
+  padding: 12px;
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-xtralab-Terminals-list {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 4px 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.jp-xtralab-Terminals-item {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+}
+
+.jp-xtralab-Terminals-item:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+/*
+ * The main click target: terminal icon + label, filling the row so the
+ * whole strip activates the session. The close button sits to its right
+ * and intercepts its own clicks via the React handler.
+ */
+.jp-xtralab-Terminals-item-activate {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 0 4px 0 12px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.jp-xtralab-Terminals-item-activate:focus-visible {
+  outline: var(--jp-border-width) solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.jp-xtralab-Terminals-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Close button. Hidden by default so the row reads as plain text; fades
+ * in when the row is hovered or the button itself takes focus.
+ */
+.jp-xtralab-Terminals-item-close {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  margin-right: 4px;
+  background: transparent;
+  border: none;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 80ms linear;
+}
+
+.jp-xtralab-Terminals-item-close:hover {
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-xtralab-Terminals-item-close:focus-visible {
+  opacity: 1;
+  outline: var(--jp-border-width) solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+/* Higher specificity than the bare-button rules above, so it comes
+ * last to keep stylelint's no-descending-specificity rule happy. */
+.jp-xtralab-Terminals-item:hover .jp-xtralab-Terminals-item-close {
+  opacity: 1;
+}
+
+/* Keep the row/header icons at the standard 16px sidebar size. */
+.jp-xtralab-Terminals-item svg,
+.jp-xtralab-Terminals-action svg {
+  width: 16px;
+  height: 16px;
+}
+
+/*
+ * The terminal that is currently the active widget in the main area — the
+ * running-session counterpart of the file browser highlighting the open
+ * document. It reuses the file listing's brand-color treatment so "this is
+ * the focused terminal" reads at a glance, and the panel highlights nothing
+ * while a notebook (or any non-terminal widget) holds the focus instead.
+ * Driven from `widget.tsx` via the terminal tracker + the shell's current
+ * widget.
+ */
+.jp-xtralab-Terminals-item.jp-mod-current {
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-brand-color1);
+}
+
+/* Hovering the current row keeps the highlight rather than falling back to
+ * the neutral hover background. */
+.jp-xtralab-Terminals-item.jp-mod-current:hover {
+  background-color: var(--jp-brand-color1);
+}
+
+/*
+ * Invert the monochrome terminal glyph against the brand background, exactly
+ * as the file listing does for its selected rows. Colored agent logos carry
+ * no selectable classes, so they keep their own colors.
+ */
+.jp-xtralab-Terminals-item.jp-mod-current .jp-icon-selectable[fill] {
+  fill: #fff;
+}
+
+.jp-xtralab-Terminals-item.jp-mod-current .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/* Keep the inline shutdown button legible on the brand background, including
+ * while it is itself hovered. */
+.jp-xtralab-Terminals-item.jp-mod-current .jp-xtralab-Terminals-item-close,
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-close:hover {
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+/* Focus rings need a color that contrasts with the brand background. */
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-activate:focus-visible,
+.jp-xtralab-Terminals-item.jp-mod-current
+  .jp-xtralab-Terminals-item-close:focus-visible {
+  outline-color: var(--jp-layout-color1);
+}

package/style/topBar.css

@@ -0,0 +1,38 @@
+/* Sidebar toggle buttons in the top bar (xtralab:top-bar). */
+
+.xtralab-TopBarButton {
+  display: flex;
+  align-items: center;
+}
+
+/*
+ * The right-area button is added to the flex container `#jp-top-panel` after
+ * the main menu (a high rank). `margin-left: auto` consumes the free space to
+ * its left so it floats to the far right, mirroring the left button at the
+ * leading edge.
+ */
+.xtralab-TopBarButton-right {
+  margin-left: auto;
+}
+
+/*
+ * The buttons are FAST `<jp-button appearance="stealth">` elements. The design
+ * system paints state chrome directly on the button host that reads as an
+ * unwanted box/border in the top bar (see
+ * `@jupyter/web-components/.../styles/patterns/button.js`):
+ *   - `:host([aria-pressed='true'])` (the matching sidebar is open) adds an
+ *     inset `box-shadow`;
+ *   - `:host([disabled])` (e.g. the right area is empty) fills the host with
+ *     `neutralFillRest`.
+ * Neutralize both so the control stays a flat icon like the menu.
+ * The hover/active stealth fills are left untouched as a normal affordance.
+ * `!important` is needed to override the (non-important) `:host(...)` rules
+ * defined inside the component's shadow DOM.
+ */
+.xtralab-TopBarButton .jp-ToolbarButtonComponent {
+  box-shadow: none !important;
+}
+
+.xtralab-TopBarButton .jp-ToolbarButtonComponent[disabled] {
+  background: transparent !important;
+}

package/lib/statusBar/index.d.ts

@@ -1,14 +0,0 @@
-import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-/**
- * Surfaces every running terminal session as its own item on the left
- * side of the status bar. The list is driven by
- * `serviceManager.terminals.runningChanged`, not by the widget tracker,
- * so a session that has its tab closed but is still running on the
- * backend keeps its slot — the typical state for an agent the user has
- * stepped away from. Clicking an item activates the existing tab if one
- * is open, or reopens the session in a fresh terminal widget. The
- * inline `×` button shuts the session down on the server, which
- * cascades through the widget if it is currently open.
- */
-declare const plugin: JupyterFrontEndPlugin<void>;
-export default plugin;

package/lib/statusBar/index.js

@@ -1,89 +0,0 @@
-import { IStatusBar } from '@jupyterlab/statusbar';
-import { ITerminalTracker } from '@jupyterlab/terminal';
-import { ITranslator, nullTranslator } from '@jupyterlab/translation';
-import { DisposableSet } from '@lumino/disposable';
-import { SessionRegistry, TerminalSessionItem } from './widget';
-const PLUGIN_ID = 'xtralab:statusBar';
-/**
- * Surfaces every running terminal session as its own item on the left
- * side of the status bar. The list is driven by
- * `serviceManager.terminals.runningChanged`, not by the widget tracker,
- * so a session that has its tab closed but is still running on the
- * backend keeps its slot — the typical state for an agent the user has
- * stepped away from. Clicking an item activates the existing tab if one
- * is open, or reopens the session in a fresh terminal widget. The
- * inline `×` button shuts the session down on the server, which
- * cascades through the widget if it is currently open.
- */
-const plugin = {
-    id: PLUGIN_ID,
-    description: 'Surface each running terminal session as its own status bar item so users can jump to (or reopen) backgrounded agents from anywhere in the workspace.',
-    autoStart: true,
-    requires: [IStatusBar, ITerminalTracker],
-    optional: [ITranslator],
-    activate: (app, statusBar, tracker, translator) => {
-        const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
-        const registry = new SessionRegistry(app.serviceManager, tracker);
-        // One DisposableSet per session — registerStatusItem returns an
-        // IDisposable for the registration, and the item widget itself
-        // implements IDisposable. Bundling them lets a single `dispose()`
-        // tear the slot down completely when the session goes away.
-        const items = new Map();
-        const onActivate = (name) => {
-            // `terminal:open` is the upstream entry point that handles both
-            // sides of this: if a widget is already attached to the named
-            // session it activates that tab, otherwise it spins up a fresh
-            // widget connected to the live session. Reusing it keeps the
-            // path identical to a click in the running-sessions sidebar.
-            void app.commands.execute('terminal:open', { name });
-        };
-        const onShutdown = (name) => {
-            void app.serviceManager.terminals.shutdown(name).catch(reason => {
-                console.error(`xtralab: failed to shut down terminal ${name}: ${reason}`);
-            });
-        };
-        const sync = () => {
-            const live = new Set(registry.sessionNames());
-            // Add items for newly-seen sessions. We register each at its
-            // stable rank from the registry so re-creating an item between
-            // syncs (e.g. if we ever decide to swap representations) lands
-            // in the same slot.
-            for (const name of live) {
-                if (items.has(name)) {
-                    continue;
-                }
-                const item = new TerminalSessionItem({
-                    registry,
-                    sessionName: name,
-                    trans,
-                    onActivate,
-                    onShutdown
-                });
-                const registration = statusBar.registerStatusItem(`${PLUGIN_ID}:${name}`, {
-                    item,
-                    align: 'left',
-                    rank: registry.rankFor(name)
-                });
-                const set = new DisposableSet();
-                set.add(registration);
-                set.add(item);
-                items.set(name, set);
-            }
-            // Remove items for sessions the server no longer knows about.
-            for (const [name, disposable] of Array.from(items.entries())) {
-                if (!live.has(name)) {
-                    disposable.dispose();
-                    items.delete(name);
-                }
-            }
-        };
-        registry.stateChanged.connect(sync);
-        void app.serviceManager.terminals.ready.then(() => {
-            // The first `runningChanged` may have fired before our connect,
-            // depending on how the manager initialises — refresh once after
-            // it is ready so any pre-existing sessions get their items.
-            sync();
-        });
-    }
-};
-export default plugin;

package/lib/statusBar/widget.d.ts

@@ -1,121 +0,0 @@
-import type { MainAreaWidget } from '@jupyterlab/apputils';
-import type { ServiceManager } from '@jupyterlab/services';
-import type { ITerminal, ITerminalTracker } from '@jupyterlab/terminal';
-import { type TranslationBundle } from '@jupyterlab/translation';
-import { VDomModel, VDomRenderer } from '@jupyterlab/ui-components';
-import * as React from 'react';
-/**
- * The widget shape every entry in `ITerminalTracker` takes — kept here
- * so the registry's call sites read cleanly.
- */
-export type TerminalWidget = MainAreaWidget<ITerminal.ITerminal>;
-/**
- * Source-of-truth model for the status bar. Each running terminal
- * session known to the server is one entry; the registry caches the
- * last `widget.title.label` we observed so the agent name (or any
- * xterm-published title) survives the user closing the tab while the
- * session continues running on the backend.
- *
- * Two upstream signals feed the model:
- *   - `serviceManager.terminals.runningChanged` is the authoritative
- *     list of live sessions; everything not in it has been shut down
- *     server-side and we must drop it.
- *   - `tracker.widgetAdded` plus the per-widget `title.changed` /
- *     `disposed` signals keep our label cache in sync with whatever
- *     xterm/the launcher has set on the open tabs.
- *
- * `stateChanged` is reused for both kinds of update so consumers
- * (the per-session status item, the plugin's add/remove sync) can
- * subscribe once.
- */
-export declare class SessionRegistry extends VDomModel {
-    constructor(serviceManager: ServiceManager.IManager, tracker: ITerminalTracker);
-    /**
-     * Names of all live sessions, ordered by their stable rank so the
-     * status bar items keep their slots as new sessions are added.
-     */
-    sessionNames(): string[];
-    /**
-     * True iff the named session is still on the server. Used by the
-     * per-session item to render `null` during the brief window between
-     * the session's shutdown and the plugin disposing the item.
-     */
-    has(name: string): boolean;
-    /**
-     * Display name for the session. The cache wins because it only
-     * holds "real" labels (the launcher's agent name or an xterm escape
-     * sequence — see `_cacheLabel` for the filter); reading it first
-     * prevents the transient `Terminal {name}` an XTerm widget shows
-     * during reconnect from flickering into the status bar. The live
-     * widget title is used when no cache exists, and the
-     * `Terminal {name}` fallback covers sessions we have never seen a
-     * widget for (e.g. surviving a lab reload).
-     */
-    labelFor(name: string): string;
-    /**
-     * Return the open widget for a session, if any. The status item
-     * uses this to switch behaviour between "activate existing tab"
-     * and "open a new tab connected to the live session".
-     */
-    widgetFor(name: string): TerminalWidget | null;
-    /**
-     * Stable per-session rank assigned in observation order. Reused
-     * across `registerStatusItem` calls so an item that is briefly
-     * unregistered (e.g. while a widget is being recreated) lands back
-     * in the same slot. Cleaned up when the session is shut down so the
-     * counter does not grow without bound across long sessions.
-     */
-    rankFor(name: string): number;
-    dispose(): void;
-    private _refreshLive;
-    private _onRunningChanged;
-    private _onWidgetAdded;
-    private _trackWidget;
-    private _untrackWidget;
-    private _onTitleChanged;
-    /**
-     * Update the cached label for a session, but only when the new
-     * label is "real" — non-empty and not one of the transient defaults
-     * the XTerm widget cycles through during reconnect (`'...'` while
-     * the websocket is opening, `'Terminal {name}'` once
-     * `_initialConnection` fires). Without the filter, briefly
-     * reopening a tab while an agent has yet to re-emit its xterm
-     * title escape sequence would clobber the cached agent name with
-     * `Terminal 1`, which is exactly the regression we are guarding
-     * against. Live widget titles still display whatever the widget
-     * currently holds because `labelFor` consults the widget first;
-     * the filter only affects what survives a tab close.
-     */
-    private _cacheLabel;
-    private _onWidgetDisposed;
-    private _terminals;
-    private _tracker;
-    private _labels;
-    private _ranks;
-    private _live;
-    private _nextRank;
-}
-/**
- * One status bar item per live terminal session. Renders a terminal
- * icon plus the session's label, with an inline shutdown button that
- * appears on hover/focus. The item delegates click handling to the
- * plugin so the lifecycle (create/dispose) and the user-facing
- * behaviour (activate vs. reopen, shutdown) live in one place.
- */
-export declare class TerminalSessionItem extends VDomRenderer<SessionRegistry> {
-    constructor(options: TerminalSessionItem.IOptions);
-    render(): React.ReactElement | null;
-    private _sessionName;
-    private _trans;
-    private _onActivate;
-    private _onShutdown;
-}
-export declare namespace TerminalSessionItem {
-    interface IOptions {
-        registry: SessionRegistry;
-        sessionName: string;
-        trans?: TranslationBundle;
-        onActivate: (sessionName: string) => void;
-        onShutdown: (sessionName: string) => void;
-    }
-}