xtralab 0.4.0 → 0.6.0

package/style/git.css

@@ -1,272 +1,10 @@
 /*
- * Styles for the git changes panel and the diff viewer. The panel mirrors
- * the visual rhythm of the default JupyterLab side panels so it does not
- * stand out from the rest of the UI.
+ * 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. (xtralab no longer ships a
+ * git changes panel — the upstream jupyterlab-git panel is reused.)
  */
 
-.jp-xtralab-GitPanel {
-  display: flex;
-  flex-direction: column;
-  min-width: 240px;
-  background-color: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  overflow: hidden;
-}
-
-.jp-xtralab-GitPanel-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.jp-xtralab-GitPanel-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--jp-border-color2);
-}
-
-.jp-xtralab-GitPanel-headerInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.jp-xtralab-GitPanel-repo {
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.jp-xtralab-GitPanel-branch {
-  color: var(--jp-ui-font-color2);
-  font-size: var(--jp-ui-font-size0);
-}
-
-.jp-xtralab-GitPanel-error {
-  margin: 12px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: var(
-    --jp-error-color3,
-    var(--jp-rendermime-error-background)
-  );
-  color: var(--jp-ui-font-color1);
-  font-size: var(--jp-ui-font-size1);
-  white-space: pre-wrap;
-}
-
-.jp-xtralab-GitPanel-empty {
-  margin: 12px;
-  color: var(--jp-ui-font-color2);
-  font-style: italic;
-  text-align: center;
-}
-
-.jp-xtralab-GitPanel-section {
-  display: flex;
-  flex-direction: column;
-}
-
-/*
- * Section headers and rows place their hover actions between the label
- * and the trailing count/badge, so the count stays pinned to the right
- * edge regardless of whether the section has any bulk actions. Reserving
- * the action width via `visibility: hidden` keeps the layout from
- * shifting when the cursor enters and leaves.
- */
-.jp-xtralab-GitPanel-sectionHeader {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 28px;
-  padding: 0 12px;
-  cursor: pointer;
-  user-select: none;
-  text-transform: uppercase;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--jp-ui-font-color2);
-}
-
-.jp-xtralab-GitPanel-sectionHeader:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-xtralab-GitPanel-sectionChevron {
-  width: 12px;
-  text-align: center;
-  font-size: 10px;
-}
-
-.jp-xtralab-GitPanel-sectionLabel {
-  flex: 1 1 auto;
-}
-
-.jp-xtralab-GitPanel-sectionCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 4px;
-  background-color: var(--jp-layout-color3);
-  color: var(--jp-ui-font-color1);
-  border-radius: 8px;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  line-height: 1;
-}
-
-.jp-xtralab-GitPanel-sectionActions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  visibility: hidden;
-}
-
-.jp-xtralab-GitPanel-sectionHeader:hover .jp-xtralab-GitPanel-sectionActions {
-  visibility: visible;
-}
-
-.jp-xtralab-GitPanel-sectionBody {
-  display: flex;
-  flex-direction: column;
-}
-
-/*
- * Three-column row layout: the label group on the left grows, the actions
- * column has a fixed reserved width that fits the worst-case button count,
- * and the badge column is auto-sized on the right edge. Reserving the
- * action column keeps the badge horizontally pinned regardless of the
- * row's hover state.
- */
-.jp-xtralab-GitPanel-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 26px;
-  padding: 0 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.jp-xtralab-GitPanel-row:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-xtralab-GitPanel-rowLabel {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.jp-xtralab-GitPanel-rowName {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
-.jp-xtralab-GitPanel-rowPath {
-  color: var(--jp-ui-font-color2);
-  font-size: var(--jp-ui-font-size0);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
-.jp-xtralab-GitPanel-rowActions {
-  /*
-   * Reserved width matches the worst case of two 20px buttons + a 2px
-   * gap. Staged rows only host the unstage button, but pinning the
-   * column width keeps the trailing badge horizontally aligned across
-   * the staged and unstaged sections.
-   */
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 2px;
-  flex: 0 0 42px;
-  visibility: hidden;
-}
-
-.jp-xtralab-GitPanel-row:hover .jp-xtralab-GitPanel-rowActions,
-.jp-xtralab-GitPanel-rowActions[data-pending='true'] {
-  visibility: visible;
-}
-
-.jp-xtralab-GitPanel-rowBadge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 16px;
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  font-family: var(--jp-code-font-family);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='modified'] {
-  color: var(--jp-warn-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='added'],
-.jp-xtralab-GitPanel-rowBadge[data-status='untracked'] {
-  color: var(--jp-success-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='deleted'] {
-  color: var(--jp-error-color1);
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='renamed'] {
-  color: var(--jp-info-color1, var(--jp-brand-color1));
-}
-
-.jp-xtralab-GitPanel-rowBadge[data-status='unmerged'] {
-  color: var(--jp-error-color1);
-}
-
-.jp-xtralab-GitPanel-iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  color: var(--jp-ui-font-color1);
-  cursor: pointer;
-  border-radius: 2px;
-  font-size: var(--jp-ui-font-size1);
-  line-height: 1;
-}
-
-.jp-xtralab-GitPanel-iconButton:hover {
-  background-color: var(--jp-layout-color3);
-}
-
-.jp-xtralab-GitPanel-iconButton:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
 /*
  * Diff viewer (main area). The `MainAreaWidget` holding the React content
  * gets sized by JupyterLab's box layout; the inner content div fills it
@@ -763,3 +501,266 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+/*
+ * 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.
+ */
+.jp-xtralab-ImageDiff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.jp-xtralab-ImageDiff-header {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  background-color: var(--jp-layout-color1);
+  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).
+ */
+.jp-xtralab-ImageDiff-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.jp-xtralab-ImageDiff-twoUp {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  gap: 16px;
+}
+
+.jp-xtralab-ImageDiff-col {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+.jp-xtralab-ImageDiff-frame,
+.jp-xtralab-ImageDiff-stack {
+  /* Checkerboard so transparent regions are obvious; theme-neutral. */
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
+    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
+  background-size: 16px 16px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  border: 1px solid var(--jp-border-color2);
+}
+
+.jp-xtralab-ImageDiff-frame {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
+
+.jp-xtralab-ImageDiff-img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.jp-xtralab-ImageDiff-empty {
+  padding: 32px 24px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size1);
+  font-style: italic;
+}
+
+.jp-xtralab-ImageDiff-caption {
+  flex: 0 0 auto;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  font-family: var(--jp-code-font-family);
+  text-align: center;
+  word-break: break-word;
+}
+
+.jp-xtralab-ImageDiff-interactive {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+/*
+ * Both revisions occupy the same grid cell so swipe/onion can overlay
+ * them. `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.
+ */
+.jp-xtralab-ImageDiff-stack {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  display: grid;
+  place-items: center;
+  padding: 4px;
+}
+
+.jp-xtralab-ImageDiff-stackImg {
+  grid-area: 1 / 1;
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+/*
+ * Swipe view wraps the stack in a positioning context so the divider
+ * can be overlaid without joining the grid. Keeping the divider as a
+ * sibling of `.jp-xtralab-ImageDiff-stack` (rather than a child)
+ * preserves the stack's existing flex sizing — it stays the only flex
+ * item the interactive column needs to shrink, so `max-height: 100%`
+ * on the image still keeps big revisions inside the available area.
+ *
+ * The whole frame is the drag target: pressing anywhere over the image
+ * sets the divider to that x position and drag-tracks the pointer. The
+ * dedicated bottom slider was removed because its thumb sat on a
+ * narrow centered track that drifted out of sync with the wide
+ * divider, which felt off. Dragging directly on the image (GitHub /
+ * Pierre style) keeps cursor and divider visually aligned.
+ */
+.jp-xtralab-ImageDiff-swipeFrame {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+  display: flex;
+  user-select: none;
+  touch-action: none;
+}
+
+/*
+ * 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.
+ */
+.jp-xtralab-ImageDiff-swipeDivider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin-left: -1px;
+  background-color: #fff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 0 6px rgb(0 0 0 / 45%);
+  cursor: ew-resize;
+  outline: none;
+}
+
+.jp-xtralab-ImageDiff-swipeDivider:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--jp-brand-color1),
+    0 0 0 3px rgb(33 150 243 / 35%),
+    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%;
+  width: 28px;
+  height: 28px;
+  margin-left: -14px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 55%),
+    0 2px 6px rgb(0 0 0 / 40%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  cursor: ew-resize;
+}
+
+.jp-xtralab-ImageDiff-swipeDividerHandle.jp-mod-top {
+  top: -14px;
+}
+
+.jp-xtralab-ImageDiff-swipeDividerHandle.jp-mod-bottom {
+  bottom: -14px;
+}
+
+/* Chevron triangles drawn with borders so no asset is needed. */
+.jp-xtralab-ImageDiff-swipeDividerArrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.jp-xtralab-ImageDiff-swipeDividerArrow.jp-mod-left {
+  border-width: 5px 5px 5px 0;
+  border-color: transparent #333 transparent transparent;
+}
+
+.jp-xtralab-ImageDiff-swipeDividerArrow.jp-mod-right {
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent #333;
+}
+
+.jp-xtralab-ImageDiff-slider {
+  flex: 0 0 auto;
+  width: min(480px, 100%);
+  accent-color: var(--jp-brand-color1);
+  cursor: ew-resize;
+}

package/style/index.css

@@ -2,5 +2,6 @@
 @import url('editorBreadcrumbs.css');
 @import url('git.css');
 @import url('launcher.css');
-@import url('statusBar.css');
 @import url('tabs.css');
+@import url('terminals.css');
+@import url('topBar.css');

package/style/index.js

@@ -1,5 +1,6 @@
 import './base.css';
 import './git.css';
 import './launcher.css';
-import './statusBar.css';
 import './tabs.css';
+import './terminals.css';
+import './topBar.css';

package/style/launcher.css

@@ -58,7 +58,8 @@
  * 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-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. */
   display: flex;
@@ -70,7 +71,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  list-style-position: outside;
+  list-style: none;
   cursor: pointer;
   user-select: none;
   padding: 2px 0;
@@ -86,6 +87,31 @@
   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.
+ */
+.jp-xtralab-Launcher-section-summary::-webkit-details-marker {
+  display: none;
+}
+
+.jp-xtralab-Launcher-section-summary::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 0 4px 6px;
+  border-color: transparent transparent transparent currentcolor;
+  transition: transform 120ms ease;
+}
+
+.jp-xtralab-Launcher-section[open]
+  > .jp-xtralab-Launcher-section-summary::before {
+  transform: rotate(90deg);
+}
+
 .jp-xtralab-Launcher-section-count {
   display: inline-flex;
   align-items: center;
@@ -316,3 +342,99 @@
   font-weight: 500;
   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;
+  letter-spacing: normal;
+}
+
+.jp-xtralab-Launcher-mcp-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.jp-xtralab-Launcher-mcp-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jp-xtralab-Launcher-mcp-command {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 6px 10px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  white-space: pre;
+  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.
+ */
+.jp-xtralab-Launcher-mcp-copy {
+  flex: 0 0 auto;
+  min-width: 4.5rem;
+  padding: 4px 12px;
+  text-align: center;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--jp-ui-font-size0);
+}
+
+.jp-xtralab-Launcher-mcp-copy:hover {
+  background-color: var(--jp-layout-color2);
+  border-color: var(--jp-border-color1);
+}
+
+.jp-xtralab-Launcher-mcp-copy:focus-visible {
+  outline: 1px solid var(--jp-brand-color1);
+  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));
+}
+
+.jp-xtralab-Launcher-mcp-note {
+  margin: 4px 0 0;
+  color: var(--jp-ui-font-color3);
+  font-size: var(--jp-ui-font-size0);
+  line-height: 1.4;
+}
+
+.jp-xtralab-Launcher-mcp-note code {
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+}