@plmbr/notebook-intelligence 5.0.0 → 5.1.0-a.1

package/src/chat-sidebar.tsx

@@ -72,14 +72,16 @@ import type { Contents } from '@jupyterlab/services';
 import {
   extractLLMGeneratedCode,
   isDarkTheme,
-  safeAnchorUri,
   writeTextToClipboard
 } from './utils';
 import { CheckBoxItem } from './components/checkbox';
+import { SafeAnchor } from './components/safe-anchor';
 import { mcpServerSettingsToEnabledState } from './components/mcp-util';
 import claudeSvgStr from '../style/icons/claude.svg';
 import { AskUserQuestion } from './components/ask-user-question';
 import { ClaudeSessionPicker } from './components/claude-session-picker';
+import { ToolCallGroup } from './components/tool-call-group';
+import { upsertToolCallContent } from './tool-call-stream';
 import { TourOverlay } from './tour/tour-overlay';
 import { TOUR_ANCHOR } from './tour/tour-anchors';
 import { TOUR_START_EVENT, TOUR_STOP_EVENT } from './tour/tour-events';
@@ -522,6 +524,92 @@ function ChatResponseHTMLFrame(props: any) {
 // Memoize ChatResponse for performance
 function ChatResponse(props: any) {
   const [renderCount, setRenderCount] = useState(0);
+  const shuffledOrder = useRef<number[]>([]);
+  const shufflePos = useRef(0);
+
+  const _spinnerVerbs = NBIAPI.config.isInClaudeCodeMode
+    ? (NBIAPI.config.spinnerVerbs ?? null)
+    : null;
+  const hasCustomVerbs =
+    _spinnerVerbs?.mode === 'replace' &&
+    Array.isArray(_spinnerVerbs.verbs) &&
+    _spinnerVerbs.verbs.length > 0;
+
+  // Fisher-Yates shuffle. When `avoidFirst` is set, swap it out of
+  // position 0 so the new first verb is never the same as the last shown
+  // (prevents an identical repeat at the wrap point between passes).
+  const shuffleVerbs = (verbs: any[], avoidFirst?: number): number[] => {
+    const order = verbs.map((_, i) => i);
+    for (let i = order.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [order[i], order[j]] = [order[j], order[i]];
+    }
+    if (
+      avoidFirst !== undefined &&
+      order[0] === avoidFirst &&
+      order.length > 1
+    ) {
+      [order[0], order[1]] = [order[1], order[0]];
+    }
+    return order;
+  };
+
+  // Initialize the shuffle synchronously in useState so the correct verb
+  // is shown on the very first paint. A useEffect-based init fires after
+  // paint and causes a single-frame flash of verbs[0] before correcting.
+  const [verbIndex, setVerbIndex] = useState(() => {
+    const sv = NBIAPI.config.isInClaudeCodeMode
+      ? (NBIAPI.config.spinnerVerbs ?? null)
+      : null;
+    if (
+      !sv ||
+      sv.mode !== 'replace' ||
+      !Array.isArray(sv.verbs) ||
+      sv.verbs.length === 0
+    ) {
+      return 0;
+    }
+    const order = shuffleVerbs(sv.verbs);
+    shuffledOrder.current = order;
+    shufflePos.current = 0;
+    return order[0];
+  });
+
+  useEffect(() => {
+    if (!props.showGenerating || !hasCustomVerbs) {
+      return;
+    }
+
+    const verbs = _spinnerVerbs!.verbs;
+
+    // Shuffle already initialized by useState on mount. Only re-initialize
+    // if hasCustomVerbs just became true after a capabilities refresh
+    // (shuffledOrder would be empty because the lazy init found no verbs).
+    if (shuffledOrder.current.length === 0) {
+      shuffledOrder.current = shuffleVerbs(verbs);
+      shufflePos.current = 0;
+      setVerbIndex(shuffledOrder.current[0]);
+    }
+
+    let id: ReturnType<typeof setTimeout>;
+    const scheduleNext = () => {
+      const delay = 4000 + Math.random() * 3000;
+      id = setTimeout(() => {
+        shufflePos.current++;
+        if (shufflePos.current >= shuffledOrder.current.length) {
+          const lastShown =
+            shuffledOrder.current[shuffledOrder.current.length - 1];
+          shuffledOrder.current = shuffleVerbs(verbs, lastShown);
+          shufflePos.current = 0;
+        }
+        setVerbIndex(shuffledOrder.current[shufflePos.current]);
+        scheduleNext();
+      }, delay);
+    };
+    scheduleNext();
+    return () => clearTimeout(id);
+  }, [props.showGenerating, hasCustomVerbs]);
+
   const msg: IChatMessage = props.message;
   const timestamp = msg.date.toLocaleTimeString('en-US', { hour12: false });
 
@@ -630,6 +718,19 @@ function ChatResponse(props: any) {
       if (item.reasoningFinished) {
         lastItem.reasoningFinished = true;
       }
+    } else if (
+      item.type === ResponseStreamDataType.ToolCall &&
+      lastItemType === ResponseStreamDataType.ToolCall
+    ) {
+      // Bundle a run of consecutive tool calls into one group item so the
+      // renderer can collapse them; ToolCallGroup unwraps content.toolCalls.
+      const lastItem = groupedContents[groupedContents.length - 1];
+      lastItem.content.toolCalls.push(structuredClone(item.content));
+    } else if (item.type === ResponseStreamDataType.ToolCall) {
+      const grouped = structuredClone(item);
+      grouped.content = { toolCalls: [structuredClone(item.content)] };
+      groupedContents.push(grouped);
+      lastItemType = item.type;
     } else {
       groupedContents.push(structuredClone(item));
       lastItemType = item.type;
@@ -712,18 +813,26 @@ function ChatResponse(props: any) {
               }`}
               aria-hidden="true"
             />
-            <div
-              className="generating-label"
-              aria-live="polite"
-              aria-atomic="true"
-            >
+            <div className="generating-label" aria-hidden="true">
               {props.isStalled
                 ? 'Still working, server may be slow'
-                : 'Generating'}
+                : hasCustomVerbs
+                  ? _spinnerVerbs!.verbs[verbIndex]
+                  : 'Generating'}
               {props.showGenerating && props.elapsedSeconds > 0
                 ? ` (${formatElapsedSeconds(props.elapsedSeconds)})`
                 : ''}
             </div>
+            {/* aria-live region contains only the verb — no elapsed suffix —
+                so screen readers announce only on verb changes, not on every
+                elapsed-seconds tick. */}
+            <div className="nbi-sr-only" aria-live="polite" aria-atomic="true">
+              {props.isStalled
+                ? 'Still working, server may be slow'
+                : hasCustomVerbs
+                  ? _spinnerVerbs!.verbs[verbIndex]
+                  : 'Generating'}
+            </div>
           </div>
         </div>
         <div className="chat-message-timestamp">{timestamp}</div>
@@ -836,23 +945,11 @@ function ChatResponse(props: any) {
                 </div>
               );
             case ResponseStreamDataType.Anchor: {
-              const safeUri = safeAnchorUri(item.content.uri);
-              if (!safeUri) {
-                return (
-                  <div className="chat-response-anchor" key={`key-${index}`}>
-                    <span>
-                      {item.content.title}
-                      <span className="nbi-sr-only"> (link blocked)</span>
-                    </span>
-                  </div>
-                );
-              }
               return (
                 <div className="chat-response-anchor" key={`key-${index}`}>
-                  <a href={safeUri} target="_blank" rel="noopener noreferrer">
+                  <SafeAnchor href={item.content.uri}>
                     {item.content.title}
-                    <span className="nbi-sr-only"> (opens in new tab)</span>
-                  </a>
+                  </SafeAnchor>
                 </div>
               );
             }
@@ -869,6 +966,17 @@ function ChatResponse(props: any) {
                   {item.content}
                 </div>
               ) : null;
+            case ResponseStreamDataType.ToolCall:
+              // Unlike Progress, tool-call cards persist after the turn ends,
+              // so they render regardless of `showGenerating`. The grouping
+              // pass bundled this run's calls into content.toolCalls; the
+              // group renders a single card or a collapsible group.
+              return (
+                <ToolCallGroup
+                  key={`key-${index}`}
+                  toolCalls={item.content.toolCalls}
+                />
+              );
             case ResponseStreamDataType.Confirmation:
               return answeredForms.get(item.id) ===
                 'confirmed' ? null : answeredForms.get(item.id) ===
@@ -985,9 +1093,13 @@ function ChatResponse(props: any) {
         )}
       </div>
       {msg.from === 'copilot' &&
-        !props.showGenerating &&
+        (NBIAPI.config.chatFeedbackAlwaysVisible || !props.showGenerating) &&
         NBIAPI.config.chatFeedbackEnabled && (
-          <div className="chat-message-feedback">
+          <div
+            className={`chat-message-feedback${
+              NBIAPI.config.chatFeedbackAlwaysVisible ? ' always-visible' : ''
+            }`}
+          >
             <button
               className={`chat-feedback-btn ${msg.feedback === 'positive' ? 'selected' : ''}`}
               onClick={() => {
@@ -1006,9 +1118,9 @@ function ChatResponse(props: any) {
                   });
                 }
               }}
-              aria-label="Rate as helpful"
+              aria-label="Rate response as good"
               aria-pressed={msg.feedback === 'positive'}
-              title="Helpful"
+              title="Good response"
             >
               {msg.feedback === 'positive' ? (
                 <VscThumbsupFilled />
@@ -1034,9 +1146,9 @@ function ChatResponse(props: any) {
                   });
                 }
               }}
-              aria-label="Rate as unhelpful"
+              aria-label="Rate response as bad"
               aria-pressed={msg.feedback === 'negative'}
-              title="Not helpful"
+              title="Bad response"
             >
               {msg.feedback === 'negative' ? (
                 <VscThumbsdownFilled />
@@ -2932,22 +3044,33 @@ function SidebarComponent(props: any) {
             }
             if (delta['nbiContent']) {
               const nbiContent = delta['nbiContent'];
-              contents.push({
-                id: UUID.uuid4(),
-                type: nbiContent.type,
-                content: nbiContent.content || '',
-                reasoningContent: nbiContent.reasoning_content || '',
-                reasoningTag: nbiContent.reasoning_content
-                  ? '<think>'
-                  : undefined,
-                reasoningFinished:
-                  nbiContent.type === ResponseStreamDataType.Markdown &&
-                  nbiContent.reasoning_content
-                    ? true
-                    : false,
-                contentDetail: nbiContent.detail,
-                created: new Date(response.created)
-              });
+              if (nbiContent.type === ResponseStreamDataType.ToolCall) {
+                // A tool call streams twice under one id (start, then finish);
+                // merge by id so it stays one persistent card. See
+                // upsertToolCallContent.
+                upsertToolCallContent(
+                  contents,
+                  nbiContent.content,
+                  new Date(response.created)
+                );
+              } else {
+                contents.push({
+                  id: UUID.uuid4(),
+                  type: nbiContent.type,
+                  content: nbiContent.content || '',
+                  reasoningContent: nbiContent.reasoning_content || '',
+                  reasoningTag: nbiContent.reasoning_content
+                    ? '<think>'
+                    : undefined,
+                  reasoningFinished:
+                    nbiContent.type === ResponseStreamDataType.Markdown &&
+                    nbiContent.reasoning_content
+                      ? true
+                      : false,
+                  contentDetail: nbiContent.detail,
+                  created: new Date(response.created)
+                });
+              }
             } else {
               responseMessage =
                 response.data['choices']?.[0]?.['delta']?.['content'];
@@ -3368,22 +3491,33 @@ function SidebarComponent(props: any) {
 
             if (delta['nbiContent']) {
               const nbiContent = delta['nbiContent'];
-              contents.push({
-                id: UUID.uuid4(),
-                type: nbiContent.type,
-                content: nbiContent.content || '',
-                reasoningContent: nbiContent.reasoning_content || '',
-                reasoningTag: nbiContent.reasoning_content
-                  ? '<think>'
-                  : undefined,
-                reasoningFinished:
-                  nbiContent.type === ResponseStreamDataType.Markdown &&
-                  nbiContent.reasoning_content
-                    ? true
-                    : false,
-                contentDetail: nbiContent.detail,
-                created: new Date(response.created)
-              });
+              if (nbiContent.type === ResponseStreamDataType.ToolCall) {
+                // A tool call streams twice under one id (start, then finish);
+                // merge by id so it stays one persistent card. See
+                // upsertToolCallContent.
+                upsertToolCallContent(
+                  contents,
+                  nbiContent.content,
+                  new Date(response.created)
+                );
+              } else {
+                contents.push({
+                  id: UUID.uuid4(),
+                  type: nbiContent.type,
+                  content: nbiContent.content || '',
+                  reasoningContent: nbiContent.reasoning_content || '',
+                  reasoningTag: nbiContent.reasoning_content
+                    ? '<think>'
+                    : undefined,
+                  reasoningFinished:
+                    nbiContent.type === ResponseStreamDataType.Markdown &&
+                    nbiContent.reasoning_content
+                      ? true
+                      : false,
+                  contentDetail: nbiContent.detail,
+                  created: new Date(response.created)
+                });
+              }
             } else {
               const responseMessage =
                 response.data['choices']?.[0]?.['delta']?.['content'];
@@ -4956,48 +5090,28 @@ function GitHubCopilotLoginDialogBodyComponent(props: any) {
             memory.
           </div>
           <div>
-            <a
-              href="https://github.com/features/copilot"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <SafeAnchor href="https://github.com/features/copilot">
               GitHub Copilot
-              <span className="nbi-sr-only"> (opens in new tab)</span>
-            </a>{' '}
+            </SafeAnchor>{' '}
             requires a subscription and it has a free tier. GitHub Copilot is
             subject to the{' '}
-            <a
-              href="https://docs.github.com/en/site-policy/github-terms/github-terms-for-additional-products-and-features"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <SafeAnchor href="https://docs.github.com/en/site-policy/github-terms/github-terms-for-additional-products-and-features">
               GitHub Terms for Additional Products and Features
-              <span className="nbi-sr-only"> (opens in new tab)</span>
-            </a>
+            </SafeAnchor>
             .
           </div>
           <div>
             <h4>Privacy and terms</h4>
             By using Notebook Intelligence with GitHub Copilot subscription you
             agree to{' '}
-            <a
-              href="https://docs.github.com/en/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-copilot-chat-in-your-ide"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <SafeAnchor href="https://docs.github.com/en/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-copilot-chat-in-your-ide">
               GitHub Copilot chat terms
-              <span className="nbi-sr-only"> (opens in new tab)</span>
-            </a>
+            </SafeAnchor>
             . Review the terms to understand about usage, limitations and ways
             to improve GitHub Copilot. Please review{' '}
-            <a
-              href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <SafeAnchor href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement">
               Privacy Statement
-              <span className="nbi-sr-only"> (opens in new tab)</span>
-            </a>
+            </SafeAnchor>
             .
           </div>
           <div>
@@ -5046,13 +5160,9 @@ function GitHubCopilotLoginDialogBodyComponent(props: any) {
                 </b>
               </span>{' '}
               and enter at{' '}
-              <a
-                href={deviceActivationURL}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <SafeAnchor href={deviceActivationURL}>
                 {deviceActivationURL}
-              </a>{' '}
+              </SafeAnchor>{' '}
               to allow access to GitHub Copilot from this app. Activation could
               take up to a minute after you enter the code.
             </div>

package/src/components/markdown-link.tsx

@@ -0,0 +1,161 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React from 'react';
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { PathExt } from '@jupyterlab/coreutils';
+import { SafeAnchor } from './safe-anchor';
+import { hasDangerousTextCodepoints } from '../utils';
+
+// Match an absolute URI by its scheme prefix so a workspace-relative path
+// (`README.md`) is distinguished from a protocol-rooted URL (`http://...`).
+// Mirrors the SCHEME_RE in utils.ts; kept local because this discriminant
+// answers a different question (presence vs. allowlist).
+const SCHEME_PREFIX_RE = /^[A-Za-z][A-Za-z0-9+.-]*:/;
+
+/**
+ * True when a freshly-joined workspace path is *not* safe to hand to
+ * `docmanager:open` or expose on a rendered anchor. Rejects:
+ *
+ * - leading `..` segments or absolute paths: the join didn't anchor and
+ *   the path escapes the Jupyter root (ContentsManager rejects too, but
+ *   we want to fail closed visually as well so the status bar/title
+ *   never previews a traversal target),
+ * - any embedded scheme: `PathExt.join('', 'java\tscript:alert(1)')`
+ *   returns the input verbatim, so a path that looks workspace-relative
+ *   pre-join can unmask into a `javascript:` href when `baseDir` is
+ *   empty (any active doc at server root),
+ * - dangerous codepoints (bidi-override, zero-width, C0/C1/DEL, etc.):
+ *   the WHATWG URL parser strips these from the scheme during
+ *   recognition, and they also visually impersonate the link target on
+ *   hover / in dev-tools logs.
+ */
+function isUnsafeWorkspacePath(path: string): boolean {
+  // Empty / cwd-only paths reach here when react-markdown's built-in
+  // `urlTransform` strips an unsafe scheme (`javascript:`, `data:`, ...)
+  // to an empty string before our override runs: the result joins to
+  // either `""` or `"."`, both of which would render as a dead
+  // `<a href="#">` that 404s on click. Surface them as blocked-link
+  // spans so the user sees why nothing happened.
+  if (path === '' || path === '.' || path === './') {
+    return true;
+  }
+  if (path.startsWith('/') || path === '..' || path.startsWith('../')) {
+    return true;
+  }
+  if (SCHEME_PREFIX_RE.test(path)) {
+    return true;
+  }
+  if (hasDangerousTextCodepoints(path)) {
+    return true;
+  }
+  return false;
+}
+
+type MarkdownLinkProps = {
+  app: JupyterFrontEnd;
+  // Directory the LLM-emitted relative link should resolve against. The
+  // active document's directory matches the user's mental model: a
+  // workspace-relative link like `[file](README.md)` in a chat scoped to
+  // `notebooks/proj/work.ipynb` lands at `notebooks/proj/README.md`, not
+  // at the server-root README. Empty string is treated as "server root".
+  baseDir: string;
+  href: unknown;
+  title?: unknown;
+  children?: React.ReactNode;
+};
+
+/**
+ * Render an anchor node coming out of `react-markdown` so chat-sidebar
+ * links can never replace the JupyterLab shell or pivot through the
+ * lab origin.
+ *
+ * Three branches:
+ *   - Fragment-only (`#section`): inert plain text. A new-tab open would
+ *     navigate to `about:blank#section`, and a same-tab open would scroll
+ *     the wrong document; neither matches what the LLM meant.
+ *   - Workspace-relative (no scheme, no leading `/`, no `//` prefix):
+ *     resolved against the active document's directory, re-validated,
+ *     and routed through JupyterLab's `docmanager:open` command so a
+ *     `.ipynb` opens with the notebook factory and a `.md` opens in the
+ *     editor. The anchor's `href` stays `"#"` because a populated `href`
+ *     bypasses React's onClick on middle/Cmd-click, letting the browser
+ *     navigate `/lab/<path>` with session cookies attached; the hover
+ *     preview moves to `title` so the user still sees the intended
+ *     target.
+ *   - Everything else: handed to `SafeAnchor`, which enforces the
+ *     `safeAnchorUri` scheme allowlist and emits a `_blank` anchor with
+ *     `rel="noopener noreferrer"`.
+ */
+export function MarkdownLink({
+  app,
+  baseDir,
+  href,
+  title,
+  children
+}: MarkdownLinkProps): React.ReactElement {
+  if (typeof href === 'string') {
+    if (href.startsWith('#')) {
+      return <span>{children}</span>;
+    }
+    if (
+      !SCHEME_PREFIX_RE.test(href) &&
+      !href.startsWith('/') &&
+      !href.startsWith('//')
+    ) {
+      // PathExt.join: plain concatenation + normalization. Resolve()
+      // would fall back to the browser process cwd when `baseDir` is
+      // relative, which gives nonsense like `/Users/.../notebooks/...`.
+      const resolvedPath = PathExt.join(baseDir, href);
+      // Re-validate post-join. Two attack/confusion shapes the pre-check
+      // alone misses: `[x](java\tscript:alert(1))` survives the scheme
+      // sniff because `\t` isn't a scheme char, then unmasks once the
+      // WHATWG parser sees the joined href; `[x](../../../etc/passwd)`
+      // looks workspace-relative but escapes the workspace root.
+      if (isUnsafeWorkspacePath(resolvedPath)) {
+        return (
+          <SafeAnchor href={null} title={undefined}>
+            {children}
+          </SafeAnchor>
+        );
+      }
+      // href="#" rather than href={resolvedPath}: a modifier-click on a
+      // populated href bypasses the React onClick, lets the browser
+      // navigate the chat sidebar to /lab/<path> in a new tab, and would
+      // ride along the user's Jupyter session cookies. The hover preview
+      // moves to `title` so the user still sees the intended target.
+      const safeTitleFromMd =
+        typeof title === 'string' && !hasDangerousTextCodepoints(title)
+          ? title
+          : undefined;
+      const hoverTitle = safeTitleFromMd ?? resolvedPath;
+      const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        // ContentsManager rejects paths outside the Jupyter root with a
+        // promise rejection. Catch so the failure surfaces in logs instead
+        // of an unhandled rejection, and the user can see the rendered
+        // anchor was attempted even when the target doesn't exist.
+        Promise.resolve(
+          app.commands.execute('docmanager:open', { path: resolvedPath })
+        ).catch(err => {
+          console.warn(
+            `NBI: failed to open workspace path "${resolvedPath}":`,
+            err
+          );
+        });
+      };
+      return (
+        <a href="#" title={hoverTitle} onClick={onClick}>
+          {children}
+        </a>
+      );
+    }
+  }
+  return (
+    <SafeAnchor
+      href={typeof href === 'string' ? href : null}
+      title={typeof title === 'string' ? title : undefined}
+    >
+      {children}
+    </SafeAnchor>
+  );
+}

package/src/components/safe-anchor.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React from 'react';
+import { hasDangerousTextCodepoints, safeAnchorUri } from '../utils';
+
+type SafeAnchorProps = {
+  href: string | undefined | null;
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+};
+
+/**
+ * The single render path for anchor elements driven by LLM / tool output.
+ *
+ * Runs `href` through `safeAnchorUri`, which mirrors the server-side
+ * `safe_anchor_uri` allowlist (`http` / `https` / `mailto`) and rejects
+ * dangerous codepoints. On accept it renders a `_blank` anchor with
+ * `rel="noopener noreferrer"` and an SR-only "(opens in new tab)" suffix;
+ * on reject it falls through to plain text plus an SR-only "(link
+ * blocked)" note so screen readers can tell why the link disappeared.
+ *
+ * The `title` attribute is scrubbed for the same dangerous codepoints
+ * the URI check rejects, since react-markdown forwards CommonMark
+ * `[text](url "title")` titles to the rendered anchor and an LLM can
+ * smuggle bidi-override or zero-width characters there to visually
+ * impersonate the link target on hover.
+ */
+export function SafeAnchor({
+  href,
+  children,
+  title,
+  className
+}: SafeAnchorProps): React.ReactElement {
+  const safeUri = safeAnchorUri(href ?? '');
+  if (!safeUri) {
+    return (
+      <span className={className}>
+        {children}
+        <span className="nbi-sr-only"> (link blocked)</span>
+      </span>
+    );
+  }
+  const safeTitle =
+    typeof title === 'string' && !hasDangerousTextCodepoints(title)
+      ? title
+      : undefined;
+  return (
+    <a
+      href={safeUri}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={safeTitle}
+      className={className}
+    >
+      {children}
+      <span className="nbi-sr-only"> (opens in new tab)</span>
+    </a>
+  );
+}