jupyterlab_ai_code_assistants_extension 1.2.4 → 1.2.7

package/lib/core/icons.d.ts

@@ -9,6 +9,7 @@ export declare const addIcon: LabIcon;
 export declare const branchIcon: LabIcon;
 export declare const switchIcon: LabIcon;
 export declare const filterIcon: LabIcon;
+export declare const statusDotIcon: LabIcon;
 /** Build (or reuse) the LabIcon for a provider's own glyph. */
 export declare function providerIcon(name: string, svgstr: string): LabIcon;
 /**

package/lib/core/icons.js

@@ -103,6 +103,17 @@ export const filterIcon = new LabIcon({
     name: `${ICON_PREFIX}:filter`,
     svgstr: filterSvgStr
 });
+// Row status mark - one filled circle, drawn for a conversation that is live
+// or under remote control. An SVG rather than a rounded span so its colour is
+// a CSS `fill` on the circle itself and the theme decides it, the way every
+// other glyph here is recoloured through its class (DEF-PANE-174).
+const statusDotSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <circle class="jp-AiAssistantsPanel-dotGlyph" cx="8" cy="8" r="8" fill="#388e3c"/>
+</svg>`;
+export const statusDotIcon = new LabIcon({
+    name: `${ICON_PREFIX}:status-dot`,
+    svgstr: statusDotSvgStr
+});
 // Provider glyphs already built, by icon name. LabIcon warns and returns the
 // first registration for a duplicate name, so a provider re-registered by a
 // live settings toggle must resolve to the icon it built the first time

package/lib/core/panel.js

@@ -4,7 +4,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 import { Widget } from '@lumino/widgets';
 import { ColourStore } from './colour';
-import { addIcon, branchIcon, cleanupIcon, filterIcon, providerIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon, switchIcon } from './icons';
+import { addIcon, branchIcon, cleanupIcon, filterIcon, providerIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon, statusDotIcon, switchIcon } from './icons';
 import { DEFAULT_RECENT_LIMIT, MAX_RECENT_LIMIT, MIN_RECENT_LIMIT } from './limits';
 import { resolveLaunchMode, resolvedLaunchModeEntry } from './modes';
 import { showManageSessionsPopup } from './popup';
@@ -1625,12 +1625,14 @@ export class AssistantSessionsPanel extends Widget {
         // words go on an aria-label.
         if (this._descriptor.hasRemoteControl && session.remote_control) {
             dot.className = 'jp-AiAssistantsPanel-dot';
+            statusDotIcon.element({ container: dot });
             dot.title = 'Remote control session is active';
             dot.setAttribute('aria-label', dot.title);
             return dot;
         }
         if (this._descriptor.hasLiveProcess && session.live) {
             dot.className = 'jp-AiAssistantsPanel-dot';
+            statusDotIcon.element({ container: dot });
             dot.title = `A ${this._descriptor.label} session is active in this project`;
             dot.setAttribute('aria-label', dot.title);
             return dot;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_ai_code_assistants_extension",
-    "version": "1.2.4",
+    "version": "1.2.7",
     "description": "Jupyterlab extension to replace individual jupyterlab_*_code_extension and integrate into one, that offers joint capability, joint settings page and individual right toolbar panels per code assistant, with the ability in settings to decide which code assistant support is on (default - all are enabled)",
     "keywords": [
         "jupyter",
@@ -72,7 +72,7 @@
         "@lumino/disposable": "^2.0.0",
         "@lumino/messaging": "^2.0.0",
         "@lumino/widgets": "^2.0.0",
-        "jupyterlab_colourful_tab_extension": "^1.0.19",
+        "jupyterlab_colourful_tab_extension": "^1.1.20",
         "react": "^18.2.0"
     },
     "devDependencies": {

package/src/core/icons.ts

@@ -126,6 +126,19 @@ export const filterIcon = new LabIcon({
   svgstr: filterSvgStr
 });
 
+// Row status mark - one filled circle, drawn for a conversation that is live
+// or under remote control. An SVG rather than a rounded span so its colour is
+// a CSS `fill` on the circle itself and the theme decides it, the way every
+// other glyph here is recoloured through its class (DEF-PANE-174).
+const statusDotSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <circle class="jp-AiAssistantsPanel-dotGlyph" cx="8" cy="8" r="8" fill="#388e3c"/>
+</svg>`;
+
+export const statusDotIcon = new LabIcon({
+  name: `${ICON_PREFIX}:status-dot`,
+  svgstr: statusDotSvgStr
+});
+
 // Provider glyphs already built, by icon name. LabIcon warns and returns the
 // first registration for a duplicate name, so a provider re-registered by a
 // live settings toggle must resolve to the icon it built the first time

package/src/core/panel.ts

@@ -33,6 +33,7 @@ import {
   removeIcon,
   shieldIcon,
   starFilledIcon,
+  statusDotIcon,
   switchIcon
 } from './icons';
 import {
@@ -1925,12 +1926,14 @@ export class AssistantSessionsPanel extends Widget {
     // words go on an aria-label.
     if (this._descriptor.hasRemoteControl && session.remote_control) {
       dot.className = 'jp-AiAssistantsPanel-dot';
+      statusDotIcon.element({ container: dot });
       dot.title = 'Remote control session is active';
       dot.setAttribute('aria-label', dot.title);
       return dot;
     }
     if (this._descriptor.hasLiveProcess && session.live) {
       dot.className = 'jp-AiAssistantsPanel-dot';
+      statusDotIcon.element({ container: dot });
       dot.title = `A ${this._descriptor.label} session is active in this project`;
       dot.setAttribute('aria-label', dot.title);
       return dot;

package/style/base.css

@@ -349,17 +349,32 @@
   flex: 0 0 auto;
   width: 8px;
   height: 8px;
-  border-radius: 50%;
   display: inline-block;
 }
 
 .jp-AiAssistantsPanel-dot {
-  /* color0, at full opacity. This dot is the ONLY graphic for "a process is
-     running here", so WCAG 1.4.11's 3:1 applies to it; softened over color1 it
-     measured 2.12:1 on the stock light theme. color0 is the darker token, so
-     it reads quieter than a saturated color1 while clearing the bar. */
-  background-color: var(--jp-success-color0);
-  box-shadow: 0 0 4px var(--jp-success-color0);
+  display: inline-flex;
+  align-items: center;
+
+  /* drop-shadow, not box-shadow: the glyph is an svg now, and box-shadow would
+     halo its square element box rather than the circle inside it. */
+  filter: drop-shadow(0 0 2px var(--jp-success-color1));
+}
+
+.jp-AiAssistantsPanel-dot svg {
+  width: 8px;
+  height: 8px;
+}
+
+/* The theme picks the green, through the circle's own fill. This dot is the
+   ONLY graphic for "a process is running here", so WCAG 1.4.11's 3:1 applies:
+   color1 is md-green-700 on the light theme and md-green-500 on the dark one,
+   measuring 4.11:1 on white and 5.79:1 on the dark row. color0 clears the bar
+   too and was used before, but on the light theme it is md-green-900 - dark
+   enough at 8px to read as a near-black mark rather than a green light, which
+   is the whole of what the dot has to say (DEF-PANE-174). */
+.jp-AiAssistantsPanel-dotGlyph {
+  fill: var(--jp-success-color1);
 }
 
 .jp-AiAssistantsPanel-dotPlaceholder {