✨ Add "View details" dialog for long JupyterLab notifications

src/helpers/notificationAugmentor.ts

@@ -0,0 +1,105 @@
+import { Notification, showDialog, Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import { copyIcon } from '@jupyterlab/ui-components';
+
+const MAX_VISIBLE_CHARS = 140;
+const VIEW_DETAILS_LABEL = 'View details';
+
+function toPlainText(value: unknown): string {
+  try {
+    return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+  } catch {
+    return String(value ?? '');
+  }
+}
+
+function createViewDetailsAction(fullMessage: string, dialogTitle = 'Details'): Notification.IAction {
+  return {
+    label: VIEW_DETAILS_LABEL,
+    caption: 'Show full message',
+    callback: async () => {
+      const DURATION = 1200;
+
+      const dialogBody = new Widget();
+      dialogBody.addClass('xircuits-notification-details');
+
+      const wrap = document.createElement('div');
+      wrap.className = 'x-details-copyWrap';
+
+      const copyBtn = document.createElement('button');
+      copyBtn.className = 'x-copy-icon-btn jp-Button jp-mod-minimal';
+      copyBtn.type = 'button';
+      copyBtn.title = 'Copy';
+      copyBtn.setAttribute('aria-label', 'Copy');
+      copyIcon.element({ container: copyBtn, height: '16px', width: '16px' });
+
+      wrap.appendChild(copyBtn);
+
+      const pre = document.createElement('pre');
+      pre.className = 'x-details-pre';
+      pre.textContent = fullMessage;
+
+      dialogBody.node.append(wrap, pre);
+
+      let timer: number | null = null;
+      copyBtn.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(fullMessage);
+
+          copyBtn.classList.add('is-copied');
+          copyBtn.title = 'Copied';
+          copyBtn.setAttribute('aria-label', 'Copied');
+
+          if (timer) clearTimeout(timer);
+          timer = window.setTimeout(() => {
+            copyBtn.classList.remove('is-copied');
+            copyBtn.title = 'Copy';
+            copyBtn.setAttribute('aria-label', 'Copy');
+            timer = null;
+          }, DURATION);
+        } catch (err) {
+          console.error('Copy failed', err);
+        }
+      });
+
+      await showDialog({
+        title: dialogTitle,
+        body: dialogBody,
+        buttons: [Dialog.okButton({ label: 'Close' })]
+      });
+    }
+  };
+}
+
+function ensureViewDetailsAction(
+  messageText: string,
+  options: any = {},
+  title?: string
+): any {
+  if (messageText.length <= MAX_VISIBLE_CHARS) return options;
+  const actions = [...(options.actions ?? [])];
+  if (!actions.some((a: any) => a?.label === VIEW_DETAILS_LABEL)) {
+    actions.push(createViewDetailsAction(messageText, title));
+  }
+  return { ...options, actions };
+}
+
+export function augmentNotifications(): void {
+  const NotificationObj: any = Notification as any;
+  if (NotificationObj.__xircuitsAugmented) return;
+
+  const wrap = (method: 'error' | 'warning' | 'info' | 'success') => {
+    const original = NotificationObj[method]?.bind(Notification);
+    if (!original) return;
+
+    NotificationObj[method] = (...args: any[]) => {
+      const [rawMessage, rawOptions] = args;
+      const text = toPlainText(rawMessage);
+      const options = ensureViewDetailsAction(text, rawOptions);
+      return original(text, options);
+    };
+  };
+
+  ['error', 'warning', 'info', 'success'].forEach(wrap);
+  NotificationObj.__xircuitsAugmented = true;
+}

src/helpers/notificationEffects.ts

@@ -92,9 +92,11 @@ export async function resolveLibraryForNode(
   const candidateId = pathToLibraryId(extras.path);
   if (!candidateId) return { libId: null, status: 'unknown' };
 
+  const cleanLibId = candidateId.replace(/^xai_components[\/\\]/i, '');
+
   const idx = await loadLibraryIndex();
   const entry = idx.get(candidateId);
-  return computeStatusFromEntry(entry, candidateId);
+  return computeStatusFromEntry(entry, cleanLibId);
 }
 
 export async function showInstallForRemoteLibrary(args: {

src/index.tsx

@@ -33,9 +33,10 @@ import type { Signal } from "@lumino/signaling";
 import { commandIDs } from "./commands/CommandIDs";
 import { IEditorTracker } from '@jupyterlab/fileeditor';
 import { IMainMenu } from '@jupyterlab/mainmenu';
-import { installLibrarySilently } from './context-menu/TrayContextMenu';
-import { normalizeLibraryName } from './tray_library/ComponentLibraryConfig';
+import { handleInstall, installLibrarySilently } from './context-menu/TrayContextMenu';
+import { augmentNotifications } from './helpers/notificationAugmentor';
 import { loadLibraryIndex } from './helpers/notificationEffects';
+import { normalizeLibraryName } from './tray_library/ComponentLibraryConfig';
 import { installComponentPreview } from './component_info_sidebar/previewHelper';
 const FACTORY = 'Xircuits editor';
 
@@ -81,6 +82,9 @@ const xircuits: JupyterFrontEndPlugin<void> = {
 
     console.log('Xircuits is activated!');
 
+    // Add "View details" to long notifications
+    augmentNotifications();
+
     // Creating the widget factory to register it so the document manager knows about
     // our new DocumentWidget
     const widgetFactory = new XircuitsFactory({

style/base.css

@@ -158,6 +158,50 @@ body.light-mode jp-button[title="Toggle Light/Dark Mode"]  .moon  { visibility:
 
 body.light-mode jp-button[title="Toggle Light/Dark Mode"]  .sun  { visibility: visible; }
 
+.xircuits-notification-details {
+  max-height: 60vh;
+  overflow: auto;
+  padding: 0.25rem;
+}
+
+.xircuits-notification-details pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+}
+
+.xircuits-notification-details { position: relative; }
+
+.x-details-copyWrap {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+
+.x-copy-icon-btn { position: relative; }
+
+.x-copy-icon-btn.is-copied::after {
+  content: "Copied";
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+  white-space: nowrap;
+  pointer-events: none;
+  padding: 2px 6px;
+  background: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  font-size: var(--jp-ui-font-size1);
+  line-height: 1.4;
+  z-index: 1;
+}
+
+.xircuits-notification-details .x-details-pre {
+  margin-top: 36px;
+}