xtralab 0.10.0 → 0.11.0

package/style/terminals.css

@@ -1,9 +1,11 @@
 /*
  * 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.
+ * the session's real (program-published) title, a smaller line below it
+ * with the latest output from a running coding agent, 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 {
@@ -105,7 +107,7 @@
 .jp-xtralab-Terminals-item {
   display: flex;
   align-items: stretch;
-  height: 28px;
+  min-height: 28px;
 }
 
 .jp-xtralab-Terminals-item:hover {
@@ -113,17 +115,19 @@
 }
 
 /*
- * 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.
+ * The main click target: terminal icon + the title/activity text block,
+ * 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.
+ * Top-aligned so the icon sits on the title line when an activity line wraps
+ * the row to a second line.
  */
 .jp-xtralab-Terminals-item-activate {
   display: flex;
   flex: 1 1 auto;
-  align-items: center;
+  align-items: flex-start;
   gap: 6px;
   min-width: 0;
-  padding: 0 4px 0 12px;
+  padding: 5px 4px 5px 12px;
   background: transparent;
   border: none;
   color: inherit;
@@ -137,12 +141,44 @@
   outline-offset: -2px;
 }
 
+/* Nudge the 16px icon down a touch so it lines up with the title's cap
+ * height rather than the very top of the text block. */
+.jp-xtralab-Terminals-item-icon {
+  margin-top: 1px;
+}
+
+/* The title + activity column, between the icon and the close button. */
+.jp-xtralab-Terminals-item-text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
 .jp-xtralab-Terminals-item-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/*
+ * The latest line of agent output, shown under the title. Smaller and dimmer
+ * than the title so it reads as secondary, and clamped to two lines with an
+ * ellipsis so a long line can't stretch the row indefinitely.
+ */
+.jp-xtralab-Terminals-item-detail {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: var(--jp-ui-font-size0);
+  line-height: 1.3;
+  color: var(--jp-ui-font-color3);
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 /*
  * 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.
@@ -205,6 +241,14 @@
   background-color: var(--jp-brand-color1);
 }
 
+/* Keep the activity line legible on the brand background: swap the dim
+ * neutral for the inverse font color, held a touch lighter than the title so
+ * it still reads as secondary. */
+.jp-xtralab-Terminals-item.jp-mod-current .jp-xtralab-Terminals-item-detail {
+  color: var(--jp-ui-inverse-font-color1);
+  opacity: 0.85;
+}
+
 /*
  * Invert the monochrome terminal glyph against the brand background, exactly
  * as the file listing does for its selected rows. Colored agent logos carry

package/style/walkthrough.css

@@ -0,0 +1,80 @@
+/*
+ * The read-only walkthrough panel (`xtralab:walkthrough`) in the side area. A
+ * scrollable column of step cards, each holding rendered Markdown, an optional
+ * embedded visual, and an optional "jump to code" button.
+ */
+
+.jp-xtralab-Walkthrough {
+  overflow-y: auto;
+  padding: 4px 0;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.jp-xtralab-Walkthrough-step {
+  padding: 10px 12px 14px;
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.jp-xtralab-Walkthrough-stepTitle {
+  margin: 0 0 6px;
+  font-size: var(--jp-ui-font-size2);
+  font-weight: 600;
+  color: var(--jp-ui-font-color0);
+}
+
+.jp-xtralab-Walkthrough-content {
+  overflow-x: auto;
+}
+
+.jp-xtralab-Walkthrough-jumpRow {
+  margin-top: 8px;
+}
+
+/* A subtle native-feeling button: UI font and neutral colors, like the rest of
+   the JupyterLab chrome, with a leading file icon and a hover background. */
+.jp-xtralab-Walkthrough-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 2px 8px 2px 5px;
+  border: var(--jp-border-width) solid var(--jp-border-color2);
+  border-radius: var(--jp-border-radius);
+  background: none;
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.jp-xtralab-Walkthrough-jump:hover {
+  background-color: var(--jp-layout-color2);
+  border-color: var(--jp-border-color1);
+}
+
+.jp-xtralab-Walkthrough-jump:focus-visible {
+  outline: none;
+  border-color: var(--jp-brand-color1);
+  box-shadow: inset 0 0 0 1px var(--jp-brand-color1);
+}
+
+.jp-xtralab-Walkthrough-jumpIcon {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.jp-xtralab-Walkthrough-jumpIcon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.jp-xtralab-Walkthrough-jumpLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}