xtralab 0.15.0 → 0.15.1

package/style/commandBar.css

@@ -1,19 +1,5 @@
-/* Command bar pill in the top bar toolbar (xtralab:command-bar). */
-
-/*
- * The widget is a settings-driven item of JupyterLab's top bar toolbar
- * (`#jp-top-bar`, factory "TopBar"), declared in schema/command-bar.json with
- * a rank past the toolbar's built-in spacer, so it sits at the trailing end of
- * the toolbar next to the right-sidebar toggle button.
- *
- * The widget's root (`.jp-xtralab-CommandBar`) is a plain wrapper that takes
- * the core `.jp-Toolbar > .jp-Toolbar-item` sizing — full toolbar height,
- * centered flex — so it needs no rules of its own; the pill button inside
- * keeps its own compact height. It is styled with the theme's input-field
- * fill so it reads as a search box and tracks each theme's input styling
- * across light and dark (a flat layout color is near-black in some dark
- * themes).
- */
+/* The bare root takes core toolbar-item sizing; the input-field fill reads as
+ * a search box (a flat layout color is near-black in some dark themes). */
 .jp-xtralab-CommandBar-button {
   display: flex;
   flex: 0 0 auto;
@@ -56,9 +42,8 @@
   height: 14px;
 }
 
-/* The built-in JupyterLab search icon (@jupyterlab/ui-components) paints with a
-   fixed `jp-icon3` theme gray; override it to currentColor so the magnifier
-   tracks the pill's text color and brightens with the label on hover. */
+/* Core's search icon paints with a fixed `jp-icon3` gray; currentColor makes
+   the magnifier track the pill's text color. */
 .jp-xtralab-CommandBar-button .jp-icon3[fill] {
   fill: currentcolor;
 }
@@ -70,7 +55,6 @@
   white-space: nowrap;
 }
 
-/* Keyboard-shortcut hint, pushed to the trailing edge by the growing label. */
 .jp-xtralab-CommandBar-shortcut {
   flex: 0 0 auto;
   margin-left: 6px;

package/style/customPanel.css

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

package/style/git.css

@@ -1,19 +1,8 @@
 /*
- * Styles for xtralab's @pierre/diffs viewer. The same surface is used by
- * the launcher dashboard's own diff tab and by the jupyterlab-git diff
- * providers, so these rules cover both hosts.
+ * @pierre/diffs viewer styles, shared by the launcher dashboard's diff tab
+ * and the jupyterlab-git diff providers.
  */
 
-/*
- * Diff viewer (main area). The `MainAreaWidget` holding the React content
- * gets sized by JupyterLab's box layout; the inner content div fills it
- * and provides vertical scroll. Horizontal scrolling within each code
- * block is owned by `@pierre/diffs` via its internal `data-code` rules.
- *
- * The block also forwards JupyterLab's theme variables onto the
- * `--diffs-*-override` properties the library exposes, so the diff
- * recolors with the active theme.
- */
 .jp-xtralab-DiffWidget {
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
@@ -23,13 +12,6 @@
   font-style: italic;
 }
 
-/*
- * Flex-column container: an optional toolbar at the top (notebook view
- * mode toggle) plus a body that hosts the scrollable diff and the
- * column resize handle. Splitting these responsibilities keeps the
- * resize handle pinned to the visible viewport while the diff content
- * scrolls underneath, and keeps the toolbar always visible.
- */
 .jp-xtralab-DiffWidget-content {
   display: flex;
   flex-direction: column;
@@ -38,9 +20,6 @@
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
 
-  /*
-   * Feed JupyterLab theme colors into @pierre/diffs.
-   */
   --diffs-bg-override: var(--jp-layout-color1);
   --diffs-bg-buffer-override: var(--jp-layout-color1);
   --diffs-bg-context-override: var(--jp-layout-color1);
@@ -56,12 +35,8 @@
   --diffs-deletion-color-override: var(--jp-error-color1);
 }
 
-/*
- * Body wrapping the scrollable diff + the column resize handle. Owns
- * its own positioning context so the resizer can be absolutely placed
- * within the body's bounds (and therefore aligned with the visible
- * scroll area, not the toolbar above it).
- */
+/* Positioning context for the resizer, aligning it with the scroll area
+   rather than the toolbar. */
 .jp-xtralab-DiffWidget-body {
   position: relative;
   flex: 1 1 auto;
@@ -74,12 +49,6 @@
   overflow: auto;
 }
 
-/*
- * Segmented selectors that live in the diff toolbar: the Notebook/JSON
- * view-mode toggle (for `.ipynb` diffs) and the Split/Unified diff-style
- * toggle (for textual/code diffs). The host toolbar provides its own
- * background and border, so these are just the segmented controls.
- */
 .jp-xtralab-DiffWidget-viewModeToolbarItem,
 .jp-xtralab-DiffWidget-diffStyleToolbarItem {
   display: flex;
@@ -87,9 +56,6 @@
   font-size: var(--jp-ui-font-size0);
 }
 
-/*
- * Breathing room when both toggles appear (notebook diff in JSON view).
- */
 .jp-xtralab-DiffWidget-diffStyleToolbarItem {
   margin-left: 4px;
 }
@@ -116,12 +82,6 @@
   background-color: var(--jp-layout-color2);
 }
 
-/*
- * Active segment: brand-colour fill with the inverse UI font colour — the
- * same pair JupyterLab uses to mark selected items (the command palette
- * active item, the file browser selection). The inverse font colour adapts
- * per theme, so the label stays legible on the brand fill in both themes.
- */
 .jp-xtralab-DiffWidget-segmentedButton[data-active='true'] {
   background-color: var(--jp-brand-color1);
   color: var(--jp-ui-inverse-font-color1);
@@ -131,11 +91,6 @@
   background-color: var(--jp-brand-color1);
 }
 
-/*
- * Icon variant of the segmented button, used by the Split/Unified toggle.
- * The inline SVGs fill with `currentColor`, so the active/hover color rules
- * above carry over to the glyph.
- */
 .jp-xtralab-DiffWidget-segmentedButton-icon {
   display: inline-flex;
   align-items: center;
@@ -149,12 +104,6 @@
   height: 14px;
 }
 
-/*
- * Draggable column splitter. Sits on top of the diff (z-index above the
- * content) but stays a thin strip so it doesn't visually intrude. The
- * `transform: translateX(-50%)` centers the strip on the column boundary
- * the inline `left` percentage points to.
- */
 .jp-xtralab-DiffWidget-resizer {
   position: absolute;
   top: 0;
@@ -192,12 +141,7 @@
   color: var(--jp-ui-font-color1);
 }
 
-/*
- * Per-hunk action overlay. The diff library injects a row at the
- * annotation's anchor line and renders this content inside it; we keep the
- * row visually unobtrusive — a single small icon button that fades in on
- * row hover — so the annotation does not compete with the diff content.
- */
+/* The diff library injects this per-hunk row at the anchor line. */
 .jp-xtralab-DiffWidget-hunkAnnotation {
   display: flex;
   justify-content: flex-end;
@@ -234,16 +178,8 @@
   height: 14px;
 }
 
-/*
- * Notebook diff. Renders one block per cell stacked vertically, plus an
- * optional notebook-level metadata block at the bottom. Each cell carries
- * its own header (kind badge + cell index + cell type) and a body with the
- * source / outputs / metadata sub-diffs the @pierre/diffs library produces.
- *
- * The sticky header keeps the scope visible while the user scrolls through
- * a long cell, and the data-kind attributes drive the colored badges and
- * left borders that distinguish added / removed / modified / unchanged.
- */
+/* Notebook diff: one block per cell plus an optional notebook-level
+   metadata block. */
 .jp-xtralab-NotebookDiff {
   display: flex;
   flex-direction: column;
@@ -251,13 +187,6 @@
   gap: 8px;
 }
 
-/*
- * The cell entry grid. Two equal columns mirror the old / new mental model
- * the column header bar establishes; each cell entry below either spans
- * both columns (modified / unchanged) or sits in a single column with an
- * empty placeholder on the other side (added / removed). Auto rows let
- * each cell pick its own height naturally.
- */
 .jp-xtralab-NotebookDiff-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -277,12 +206,6 @@
   grid-column: 2;
 }
 
-/*
- * Empty placeholder rendered in the column opposite an added or removed
- * cell. Visible (dashed outline) so the user can see the alignment gap
- * the missing cell creates between old and new. Sized roughly like a
- * minimal cell card so the row height is consistent.
- */
 .jp-xtralab-NotebookDiff-empty {
   display: flex;
   align-items: center;
@@ -437,12 +360,6 @@
   border-bottom: 1px solid var(--jp-border-color3);
 }
 
-/*
- * The verbatim source listing rendered when the user expands an unchanged
- * cell. We don't pass it through @pierre/diffs because there is no diff —
- * just the cell contents — but match the diff library's monospace rhythm
- * so the surrounding cells still look uniform.
- */
 .jp-xtralab-NotebookDiff-unchangedSource {
   margin: 0;
   padding: 8px 12px;
@@ -463,12 +380,6 @@
   border-top: 1px solid var(--jp-border-color3);
 }
 
-/*
- * Side-by-side panes used by both OutputsSection and MarkdownPreviewSection.
- * The grid columns mirror the split-mode FileDiff above so the two halves
- * read as the same left=old / right=new mental model the user is already
- * tracking on the source diff.
- */
 .jp-xtralab-NotebookDiff-sideBySide {
   display: flex;
   flex-direction: column;
@@ -486,11 +397,6 @@
   grid-template-columns: 1fr;
 }
 
-/*
- * Each pane takes one column. The data-side colored bar on the left edge
- * matches the cell-block kind colors so the pane's role (old vs new) is
- * clear even in dark theme where the diff library's column-tint is subtle.
- */
 .jp-xtralab-NotebookDiff-sidePane {
   padding: 8px 12px;
   min-width: 0;
@@ -507,11 +413,6 @@
   background-color: var(--jp-layout-color1);
 }
 
-/*
- * Rendermime widgets bring their own padding/margin defaults; we constrain
- * them to the pane width so a wide HTML output (table, image) doesn't push
- * the grid out of shape.
- */
 .jp-xtralab-NotebookDiff-sidePane .jp-RenderedHTMLCommon,
 .jp-xtralab-NotebookDiff-sidePane .jp-OutputArea {
   max-width: 100%;
@@ -532,16 +433,10 @@
 }
 
 /*
- * Image diff (raster files). xtralab's replacement for the upstream
- * jupyterlab-git image diff: a sticky mode selector (reusing the diff
- * segmented-control styling) over the 2-up / swipe / onion-skin views.
- *
- * Every mode is sized to *fit the widget*: the images are contained
- * within the available area (never upscaled past their natural size, and
- * scaled down to fit when larger) so nothing overflows. In particular the
- * swipe/onion slider stays on screen even when the two revisions have very
- * different dimensions. A neutral checkerboard sits behind each image so
- * transparency reads clearly in both light and dark themes.
+ * Image diff: xtralab's replacement for the jupyterlab-git image diff —
+ * 2-up / swipe / onion-skin under a sticky mode selector. Every mode fits
+ * the widget (images scale down, never upscale past natural size), with a
+ * theme-aware checkerboard behind transparency.
  */
 .jp-xtralab-ImageDiff {
   display: flex;
@@ -559,12 +454,8 @@
   border-bottom: 1px solid var(--jp-border-color2);
 }
 
-/*
- * The body fills the remaining height and never scrolls — each view is a
- * flex child that fits inside it (`min-height: 0` lets the flex/grid
- * children shrink below their intrinsic size so `max-height` on the
- * images can take effect).
- */
+/* The body never scrolls; min-height: 0 lets children shrink below their
+   intrinsic size so the image max-heights engage. */
 .jp-xtralab-ImageDiff-body {
   flex: 1 1 auto;
   min-height: 0;
@@ -591,18 +482,6 @@
   margin: 0;
 }
 
-/*
- * Checkerboard + border so transparent regions read clearly. The squares
- * are theme-aware (JupyterLab layout colors) so the frame stays a calm
- * light checkerboard in the light theme and a calm dark one in the dark
- * theme, rather than a bright white block.
- *
- * 2-up and onion fill their whole panel with it; the swipe view instead
- * carries it on its image-sized *frame* (not the surrounding area) so the
- * checkerboard hugs the image. That keeps the divider's top/bottom handles
- * sitting at the image edges instead of floating in the middle of a
- * checkerboard expanse.
- */
 .jp-xtralab-ImageDiff-frame,
 .jp-xtralab-ImageDiff-stack,
 .jp-xtralab-ImageDiff-swipeFrame {
@@ -665,12 +544,7 @@
   gap: 12px;
 }
 
-/*
- * Onion-skin view: both revisions occupy the same grid cell so they
- * overlay. `place-items: center` keeps each image at its own size (no
- * stretching the smaller revision up to the larger one's box) while
- * `max-height/width` scale either one down to fit the available space.
- */
+/* Onion-skin: both revisions share one grid cell. */
 .jp-xtralab-ImageDiff-stack {
   flex: 1 1 auto;
   min-height: 0;
@@ -691,12 +565,6 @@
   object-fit: contain;
 }
 
-/*
- * Swipe view: a transparent container that just centers the image-sized
- * frame in whatever space the body leaves. The checkerboard lives on the
- * frame (above), not here, so it hugs the image rather than spanning the
- * panel.
- */
 .jp-xtralab-ImageDiff-swipeArea {
   flex: 1 1 auto;
   min-height: 0;
@@ -708,17 +576,11 @@
 }
 
 /*
- * The frame is sized in JS (inline `width`/`height`) to exactly the
- * displayed image box. Because the frame *is* that box, the divider's
- * `left: N%`, the pointer-to-percent mapping in `setFromClientX` and each
- * image's `clip-path` inset all resolve against the same width — so the
- * white divider line sits precisely on the seam between the two revisions
- * as it is dragged. (A full-width frame instead let the line drift off the
- * seam by up to half the surrounding letterbox.)
- *
- * The whole frame is the drag target: pressing anywhere over the image
- * jumps the divider to that x and then drag-tracks the pointer (GitHub /
- * Pierre style), keeping cursor, divider and seam together.
+ * The frame is JS-sized (inline width/height) to exactly the displayed
+ * image box, so the divider's `left: N%`, the pointer mapping in
+ * setFromClientX, and the images' clip-path insets all resolve against the
+ * same width — the divider stays on the seam. The whole frame is the drag
+ * target: pressing jumps the divider there, then drag-tracks the pointer.
  */
 .jp-xtralab-ImageDiff-swipeFrame {
   position: relative;
@@ -728,12 +590,6 @@
   touch-action: none;
 }
 
-/*
- * Both revisions fill the frame, so an image's clip inset of N% and the
- * divider at `left: N%` cut at the same x. `object-fit: contain` only
- * letterboxes when the two revisions differ in aspect ratio; for the
- * common same-dimensions edit it fills the box exactly.
- */
 .jp-xtralab-ImageDiff-swipeImg {
   position: absolute;
   inset: 0;
@@ -743,19 +599,9 @@
   object-fit: contain;
 }
 
-/*
- * Swipe divider: a vertical line marking the boundary between the two
- * clipped revisions. The natural seam between two clipped images is
- * barely visible — especially on light content where it disappears into
- * the background — so an explicit divider with high-contrast styling is
- * drawn on top. White core with dark outline + soft shadow keeps it
- * legible against any image, light or dark.
- *
- * The divider and its handles are the only elements that show the
- * `ew-resize` cursor — clicks anywhere over the image still bubble up
- * to the frame's drag handler, but the cursor only signals "drag me"
- * over the actual control affordances.
- */
+/* The natural seam between the clipped revisions is barely visible, so an
+   explicit high-contrast divider is drawn on top: white core + dark
+   outline reads on any image. */
 .jp-xtralab-ImageDiff-swipeDivider {
   position: absolute;
   top: 0;
@@ -777,11 +623,6 @@
     0 0 6px rgb(0 0 0 / 45%);
 }
 
-/*
- * Handle pucks at the top and bottom of the divider. The two arrows
- * inside (left + right chevrons) signal that the line can be dragged
- * sideways — matching GitHub's image diff swipe affordance.
- */
 .jp-xtralab-ImageDiff-swipeDividerHandle {
   position: absolute;
   left: 50%;
@@ -808,9 +649,6 @@
   bottom: -14px;
 }
 
-/*
- * Chevron triangles drawn with borders so no asset is needed.
- */
 .jp-xtralab-ImageDiff-swipeDividerArrow {
   width: 0;
   height: 0;

package/style/highlight.css

@@ -1,8 +1,6 @@
 /*
  * Line highlight applied by `xtralab:highlight-lines`. The class lands on the
- * CodeMirror line wrapper (`.cm-line`), so the tint spans the full editor width
- * and a left accent bar marks the run. The translucent background keeps the
- * code legible on both light and dark themes.
+ * CodeMirror `.cm-line` wrapper, so the tint spans the full editor width.
  */
 
 .jp-xtralab-highlightLine {

package/style/launcher.css

@@ -1,14 +1,3 @@
-/*
- * Styling for the launcher dashboard widget. The widget replaces
- * JupyterLab's stock `jp-Launcher`, so we don't piggy-back on the
- * `jp-Launcher-*` classes — every selector is scoped under
- * `jp-xtralab-Launcher` to keep the rules from leaking elsewhere.
- *
- * Colors and spacing pull from the active JupyterLab theme via the
- * standard `--jp-*` custom properties so the launcher tracks dark/light
- * mode automatically.
- */
-
 .jp-xtralab-Launcher {
   display: flex;
   flex-direction: column;
@@ -32,12 +21,6 @@
   box-sizing: border-box;
 }
 
-/*
- * Sections — grouped content blocks. The agent picker uses a regular
- * `<section>`; the changes panel uses a `<details>` so the user can
- * collapse it. Both share the same gap + alignment so the page reads
- * uniformly regardless of which element type is underneath.
- */
 .jp-xtralab-Launcher-section {
   display: flex;
   flex-direction: column;
@@ -53,15 +36,10 @@
   text-transform: uppercase;
 }
 
-/*
- * Collapsible changes section. The native `<summary>` is a flex row
- * that hosts the title, count badge, and refresh action; the disclosure
- * triangle is the browser default — it rotates when the section opens.
- */
 .jp-xtralab-Launcher-changes-section,
 .jp-xtralab-Launcher-mcp-section {
   /* Reset the default `<details>` block so its contents inherit the
-     section's gap-aligned column layout instead of stacking flush. */
+     section's gap-aligned column layout. */
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -87,11 +65,8 @@
   outline-offset: 1px;
 }
 
-/*
- * Disclosure caret. `display: flex` on the `<summary>` drops the browser's
- * native triangle, so draw one (a CSS border triangle in `currentColor`) and
- * rotate it from pointing right to pointing down when the section is open.
- */
+/* `display: flex` on the `<summary>` drops the browser's native disclosure
+ * triangle, so draw a border triangle and rotate it when the section opens. */
 .jp-xtralab-Launcher-section-summary::-webkit-details-marker {
   display: none;
 }
@@ -164,11 +139,6 @@
   font-size: var(--jp-ui-font-size1);
 }
 
-/*
- * Changed files list. Each row is a button so click + keyboard activate
- * both work; the letter on the left is the file's single-letter git status,
- * colored to match the @pierre/trees file tree's decorations.
- */
 .jp-xtralab-Launcher-changes {
   list-style: none;
   margin: 0;
@@ -179,13 +149,8 @@
   border-radius: 4px;
   overflow: hidden;
 
-  /*
-   * Git status letter palette, mirroring the @pierre/trees `--trees-status-*`
-   * defaults. The file tree resolves those through `light-dark()` under
-   * `color-scheme: light dark` — i.e. by OS appearance — so the
-   * `prefers-color-scheme` override below reproduces that exact resolution
-   * and keeps these letters in lockstep with the tree's.
-   */
+  /* Mirrors the @pierre/trees `--trees-status-*` defaults, which resolve via
+     `light-dark()` by OS appearance — hence the `prefers-color-scheme` override below. */
   --xtralab-git-status-added: #16a994;
   --xtralab-git-status-modified: #1ca1c7;
   --xtralab-git-status-renamed: #d5a910;
@@ -228,11 +193,6 @@
   outline-offset: -1px;
 }
 
-/*
- * Bare colored letter, not a filled badge — the same treatment the
- * @pierre/trees file tree gives its git status decorations. The fixed width
- * keeps the letters in a tidy gutter so the paths stay column-aligned.
- */
 .jp-xtralab-Launcher-change-badge {
   display: inline-flex;
   align-items: center;
@@ -283,10 +243,6 @@
   letter-spacing: 0.04em;
 }
 
-/*
- * Prompt textarea + agent grid. The textarea is full-width and resizable
- * vertically; the grid renders agent buttons as compact, icon-led tiles.
- */
 .jp-xtralab-Launcher-prompt {
   width: 100%;
   min-height: 72px;
@@ -373,20 +329,6 @@
   text-align: center;
 }
 
-/*
- * MCP registration hint. A collapsed-by-default `<details>` listing the
- * one-line `mcp add` command for each installed agent that supports one,
- * each paired with a Copy button. The command sits in a read-only `<code>`
- * box — the user copies it and runs it in their own terminal — so the row
- * is not itself a button.
- */
-
-/*
- * The MCP hint is an optional helper, not a primary section, so its summary
- * is rendered lighter and in sentence case rather than reusing the bold,
- * uppercase treatment of the `START AN AGENT` / `OPEN` headers — otherwise a
- * collapsed disclosure reads as a misplaced top-level section.
- */
 .jp-xtralab-Launcher-mcp-section .jp-xtralab-Launcher-section-title {
   font-weight: 500;
   text-transform: none;
@@ -421,11 +363,7 @@
   overflow-x: auto;
 }
 
-/*
- * Copy buttons are sized to the longest label ("Copied!") and centered, so
- * swapping "Copy" ↔ "Copied!" never resizes the button or ragged-aligns the
- * column.
- */
+/* Sized to the longest label ("Copied!") so the swap never resizes the button. */
 .jp-xtralab-Launcher-mcp-copy {
   flex: 0 0 auto;
   min-width: 4.5rem;
@@ -451,8 +389,6 @@
   outline-offset: 1px;
 }
 
-/* Confirmation state after a successful copy — a clear color shift, paired
-   with the button's "Copied!" label, so the action is unmistakable. */
 .jp-xtralab-Launcher-mcp-copy.jp-mod-copied {
   color: var(--jp-success-color1, var(--jp-ui-font-color1));
   border-color: var(--jp-success-color1, var(--jp-border-color1));

package/style/omnibox.css

@@ -1,16 +1,9 @@
-/* Omnibox overlay (xtralab:omnibox): a centered search box over the shell. */
-
-/*
- * The widget node is attached to `document.body` (outside the shell) and only
- * carries theme variables via `jp-ThemedContainer`; the React tree renders the
- * fixed full-screen overlay below it.
- */
+/* The widget node attaches to `document.body` and carries `jp-ThemedContainer`
+   for theme variables; the React tree renders the fixed overlay below. */
 .jp-xtralab-Omnibox {
   position: absolute;
 }
 
-/* Transparent full-viewport layer that centers the panel and catches
-   click-outside to dismiss. */
 .jp-xtralab-Omnibox-overlay {
   position: fixed;
   inset: 0;
@@ -26,8 +19,6 @@
   width: min(640px, 92vw);
   max-height: 60vh;
   overflow: hidden;
-
-  /* Drop just below the top bar so it reads as a command-center dropdown. */
   margin-top: calc(var(--jp-private-menubar-height, 28px) + 4px);
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid
@@ -51,9 +42,6 @@
   color: var(--jp-ui-font-color3);
 }
 
-/* Side gutters float the active-row highlight inside the panel edge,
-   matching the menu/palette treatment; section headers and items shift
-   together so their left alignment is preserved. */
 .jp-xtralab-Omnibox-results {
   padding: 5px 6px;
   overflow-y: auto;

package/style/showOutput.css

@@ -1,9 +1,3 @@
-/*
- * The panel `xtralab:show` renders into. It holds a single rendered output and
- * scrolls when that output is taller (or wider) than the panel, which matters
- * most in the narrow side area.
- */
-
 .jp-xtralab-ShowPanel {
   overflow: auto;
   padding: 8px;