@sentry/junior-dashboard 0.280.0 → 0.281.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.280.0",
+  "version": "0.281.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -42,10 +42,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.280.0"
+    "@sentry/junior-plugin-api": "0.281.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.280.0"
+    "@sentry/junior": "0.281.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -66,7 +66,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.280.0"
+    "@sentry/junior": "0.281.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/client/components/BottomSheet.tsx

@@ -31,7 +31,7 @@ export function BottomSheet(props: {
             {props.title ?? props.label}
           </SheetTitle>
         </SheetHeader>
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
           {props.children}
         </div>
       </SheetContent>

package/src/client/components/DetailsPanel.tsx

@@ -117,6 +117,7 @@ export function DetailsPanel(props: {
           <Button
             ref={closeRef}
             aria-label={closeLabel}
+            data-slot="details-panel-close"
             onClick={onClose}
             size="icon"
           >
@@ -124,7 +125,7 @@ export function DetailsPanel(props: {
           </Button>
         </div>
       </header>
-      <div className="thin-scrollbar min-h-0 overflow-y-auto overscroll-contain">
+      <div className="thin-scrollbar min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
         {props.children}
       </div>
     </aside>

package/src/client/conversations/ConversationBrief.tsx

@@ -1,5 +1,11 @@
-import { ChevronRight } from "lucide-react";
-import type { ReactNode } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import type {
   ActorIdentity,
   ConversationDetailReport,
@@ -20,6 +26,9 @@ type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
 
 type BriefContent = ConversationBriefReport["content"];
 
+const SUMMARY_PREVIEW_LINES = 4;
+const SUMMARY_FADE_LINES = 1.65;
+
 const outcomeTones: Record<BriefContent["outcome"]["status"], StatusChipTone> =
   {
     abandoned: "neutral",
@@ -39,20 +48,9 @@ export function ConversationBrief(props: {
   const mentions = props.brief.mentions;
   if (props.variant === "summary") {
     return (
-      <div className="grid min-w-0 gap-4">
+      <BriefSummary>
         <DisplayText mentions={mentions} text={content.summary} />
-        {content.openDecisions.length > 0 ? (
-          <div className="grid gap-2">
-            <h4 className="m-0 text-sm font-medium text-dashboard-text">
-              Open decisions
-            </h4>
-            <BriefOpenDecisions
-              decisions={content.openDecisions}
-              mentions={mentions}
-            />
-          </div>
-        ) : null}
-      </div>
+      </BriefSummary>
     );
   }
   return (
@@ -80,26 +78,9 @@ export function ConversationBrief(props: {
           </Detail>
         </DetailList>
       </BriefSection>
-      {content.decisions.length || content.openDecisions.length ? (
+      {content.decisions.length ? (
         <BriefSection title="Decisions">
-          <DetailList>
-            {content.decisions.length ? (
-              <Detail label="Decisions">
-                <BriefDecisions
-                  decisions={content.decisions}
-                  mentions={mentions}
-                />
-              </Detail>
-            ) : null}
-            {content.openDecisions.length ? (
-              <Detail label="Open decisions">
-                <BriefOpenDecisions
-                  decisions={content.openDecisions}
-                  mentions={mentions}
-                />
-              </Detail>
-            ) : null}
-          </DetailList>
+          <BriefDecisions decisions={content.decisions} mentions={mentions} />
         </BriefSection>
       ) : null}
       {content.facts.length ||
@@ -162,6 +143,120 @@ export function ConversationBrief(props: {
   );
 }
 
+function BriefSummary(props: { children: ReactNode }) {
+  const id = useId();
+  const previewRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const collapsed = hasMore && !expanded;
+
+  useLayoutEffect(() => {
+    const preview = previewRef.current;
+    const content = contentRef.current;
+    if (!preview || !content) return;
+
+    const measure = () => {
+      const lineHeight = Number.parseFloat(
+        getComputedStyle(preview).lineHeight,
+      );
+      const height = lineHeight * SUMMARY_PREVIEW_LINES;
+      const overflows = content.getBoundingClientRect().height > height + 0.5;
+      const focused = document.activeElement;
+      if (
+        overflows &&
+        focused &&
+        content.contains(focused) &&
+        focused.getBoundingClientRect().bottom >
+          preview.getBoundingClientRect().top +
+            height -
+            lineHeight * SUMMARY_FADE_LINES
+      ) {
+        setExpanded(true);
+      } else if (!overflows && focused && focused === toggleRef.current) {
+        preview.focus({ preventScroll: true });
+      }
+      setHasMore(overflows);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  useLayoutEffect(() => {
+    const toggle = toggleRef.current;
+    if (!expanded && toggle && document.activeElement === toggle) {
+      toggle.scrollIntoView({ block: "nearest" });
+    }
+  }, [expanded]);
+
+  return (
+    <div className="relative min-w-0">
+      <div
+        className={cn("leading-6 md:leading-7", collapsed && "overflow-clip")}
+        id={id}
+        onFocusCapture={(event) => {
+          if (!collapsed) return;
+          // Keep focused links clear of both the clipping and the fade.
+          const preview = event.currentTarget;
+          const lineHeight = Number.parseFloat(
+            getComputedStyle(preview).lineHeight,
+          );
+          if (
+            event.target.getBoundingClientRect().bottom >
+            preview.getBoundingClientRect().bottom -
+              lineHeight * SUMMARY_FADE_LINES
+          ) {
+            setExpanded(true);
+          }
+        }}
+        ref={previewRef}
+        style={
+          collapsed
+            ? {
+                maskImage: `linear-gradient(black calc(100% - ${SUMMARY_FADE_LINES}lh), transparent)`,
+                maxHeight: `${SUMMARY_PREVIEW_LINES}lh`,
+              }
+            : undefined
+        }
+        tabIndex={-1}
+      >
+        <div ref={contentRef}>{props.children}</div>
+      </div>
+      {hasMore ? (
+        <button
+          aria-controls={id}
+          aria-expanded={expanded}
+          aria-label={
+            expanded ? "Collapse Brief summary" : "Expand Brief summary"
+          }
+          className={cn(
+            "group flex h-6 w-8 cursor-pointer items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+            collapsed
+              ? "absolute bottom-0 left-1/2 -translate-x-1/2"
+              : "mx-auto mt-1",
+          )}
+          onClick={() => setExpanded((open) => !open)}
+          ref={toggleRef}
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            className="grid size-5 place-items-center rounded-full border border-dashboard-border bg-dashboard-ink text-dashboard-text-solid transition-[filter] group-hover:brightness-95 dark:bg-dashboard-text-solid dark:text-dashboard-text-inverse"
+          >
+            <ChevronDown
+              className="size-4 group-aria-expanded:rotate-180"
+              strokeWidth={2.25}
+            />
+          </span>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
 function BriefSection(props: { children: ReactNode; title: string }) {
   return (
     <Collapsible className="min-w-0 border-t border-dashboard-border pt-3">
@@ -221,37 +316,6 @@ function BriefDecisions(props: {
   );
 }
 
-function BriefOpenDecisions(props: {
-  decisions: BriefContent["openDecisions"];
-  mentions?: readonly ActorIdentity[];
-}) {
-  return (
-    <ul className="m-0 grid list-none gap-2 p-0">
-      {props.decisions.map((decision, index) => (
-        <li key={`${decision.text}:${index}`}>
-          <div>
-            <DisplayText
-              inline
-              mentions={props.mentions}
-              text={decision.text}
-            />
-          </div>
-          {decision.owner ? (
-            <div className="mt-1 text-xs text-dashboard-text-muted">
-              Owner:{" "}
-              <DisplayText
-                inline
-                mentions={props.mentions}
-                text={decision.owner}
-              />
-            </div>
-          ) : null}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 function BriefList(props: {
   items: string[];
   mentions?: readonly ActorIdentity[];

package/src/client/conversations/ConversationDetails.tsx

@@ -37,9 +37,7 @@ import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 type Brief = NonNullable<ConversationDetailReport["brief"]>;
 
 /**
- * Show conversation details in the order a reader asks about them: what the
- * work is (the Brief), what needs them, what it changed or waits on, who did
- * it, and what it cost. Each fact shows here only, not in the title bar.
+ * Surface work that needs the reader, then the Brief and its linked work.
  */
 export function ConversationDetails(props: {
   /** Viewer's auto-archive control. Null for non-participants. */
@@ -153,21 +151,22 @@ export function ConversationDetails(props: {
       }
       onClose={props.onClose}
     >
-      <div className="grid min-w-0 content-start gap-3 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3">
+      <div className="grid min-w-0 content-start gap-2 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3">
+        <ConversationReviewItems
+          conversationId={props.conversationId}
+          highlight={props.highlightReview}
+        />
         {props.brief ? (
           <div className="min-w-0 break-words px-1 pb-1 font-sans text-sm leading-relaxed text-dashboard-text-muted">
             <ConversationBrief brief={props.brief} variant="summary" />
           </div>
         ) : null}
-        <ConversationReviewItems
-          conversationId={props.conversationId}
-          highlight={props.highlightReview}
-        />
         {props.links.length > 0 || watches.length > 0 ? (
           // A Watch waits on something. It shows with linked work, so the
           // work and what Junior waits on read as one list.
           <DetailsCard
             count={props.links.length || watches.length}
+            flat
             title={props.links.length > 0 ? "Linked work" : "Waiting on"}
           >
             {props.links.length > 0 ? (
@@ -191,7 +190,7 @@ export function ConversationDetails(props: {
           <DetailsCard>{props.autoArchive}</DetailsCard>
         ) : null}
         {agents?.length ? (
-          <DetailsCard count={agents.length} title="Subagents">
+          <DetailsCard count={agents.length} flat title="Subagents">
             <ConversationChildAgents
               conversationId={props.conversationId}
               onOpenAgent={(target) => {
@@ -203,13 +202,13 @@ export function ConversationDetails(props: {
           </DetailsCard>
         ) : null}
         {props.overview != null ? (
-          <DetailsCard>{props.overview}</DetailsCard>
-        ) : null}
-        {props.usage != null ? (
-          <DetailsCard title="Usage">{props.usage}</DetailsCard>
+          <DetailsCard flat>{props.overview}</DetailsCard>
         ) : null}
+        {props.usage}
         {props.identity != null ? (
-          <DetailsCard title="Participants">{props.identity}</DetailsCard>
+          <DetailsCard flat title="Participants">
+            {props.identity}
+          </DetailsCard>
         ) : null}
         {memoryList?.events.length ? (
           <ConversationMemoryCard

package/src/client/conversations/ConversationEventLog.tsx

@@ -1,17 +1,4 @@
-import {
-  defaultRangeExtractor,
-  useVirtualizer,
-  type Range,
-} from "@tanstack/react-virtual";
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { Skeleton } from "../components/ui/skeleton";
@@ -25,11 +12,10 @@ import {
   eventLogRows,
   eventLogTone,
   filterEventLogRows,
-  type EventLogRow,
 } from "./eventLog";
 import { ConversationEventDetails } from "./ConversationEventDetails";
-import { scrollRootFor } from "./transcriptBottomPinning";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
+import { useVirtualRows } from "./virtualRows";
 
 const rowClass =
   "grid grid-cols-[12ch_minmax(0,1fr)] items-baseline gap-x-3 px-4 @min-[32rem]:grid-cols-[12ch_17ch_minmax(0,1fr)]";
@@ -70,14 +56,25 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   // An arrow key can select a row that mounts only on the next render.
   const focusSeqRef = useRef<number>(undefined);
   const focusedSeqRef = useRef<number>(undefined);
-  const virtualizer = useEventLogVirtualizer({
-    listRef,
-    rows: visibleRows,
-    keptSeqs: () => [
-      selectedSeq,
-      focusedSeqRef.current,
-      anchorSeq(props.scrollAnchorKey?.()),
+  const indexBySeq = useMemo(
+    () => new Map(visibleRows.map((row, index) => [row.event.seq, index])),
+    [visibleRows],
+  );
+  const indexOf = (seq: number | undefined) =>
+    seq === undefined ? undefined : indexBySeq.get(seq);
+  // The open entry, the focused row, and the row that holds the reader's
+  // place stay mounted.
+  const virtualizer = useVirtualRows({
+    count: visibleRows.length,
+    defaultSize: (sizeClass) => (sizeClass === "metadata" ? 56 : 40),
+    getItemKey: (index) => visibleRows[index]?.event.seq ?? index,
+    keptIndexes: [
+      indexOf(selectedSeq),
+      indexOf(focusedSeqRef.current),
+      indexOf(anchorSeq(props.scrollAnchorKey?.())),
     ],
+    listRef,
+    sizeClass: (index) => (visibleRows[index]?.metadata ? "metadata" : "plain"),
   });
   const virtualRows = virtualizer.getVirtualItems();
   useEffect(() => {
@@ -268,85 +265,11 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   );
 });
 
-/** Rows mounted beyond the viewport on each side. */
-const OVERSCAN_ROWS = 10;
-
 /** Read the event seq from a `data-scroll-anchor` key. */
 function anchorSeq(key: string | undefined): number | undefined {
   return key?.startsWith("event:") ? Number(key.slice(6)) : undefined;
 }
 
-/**
- * Pick and measure the rows near the viewport. The scroll owner holds the
- * reader's place, so this never moves the scroll position. `keptSeqs` rows
- * stay mounted outside the viewport: the open entry, the focused row, and
- * the row that holds the reader's place. Code that finds them in the DOM
- * then keeps working.
- */
-function useEventLogVirtualizer(input: {
-  keptSeqs: () => (number | undefined)[];
-  listRef: React.RefObject<HTMLOListElement | null>;
-  rows: EventLogRow[];
-}) {
-  const { keptSeqs, listRef, rows } = input;
-  const [scrollMargin, setScrollMargin] = useState(0);
-  const indexBySeq = useMemo(
-    () => new Map(rows.map((row, index) => [row.event.seq, index])),
-    [rows],
-  );
-  const kept = keptSeqs();
-  const keptKey = kept.join(",");
-  const rangeExtractor = useCallback(
-    (range: Range) => {
-      const indexes = new Set(defaultRangeExtractor(range));
-      for (const seq of keptKey.split(",")) {
-        const index = seq ? indexBySeq.get(Number(seq)) : undefined;
-        if (index !== undefined) indexes.add(index);
-      }
-      // Rows stay in document order, so the scroll owner can search them.
-      return [...indexes].sort((left, right) => left - right);
-    },
-    [indexBySeq, keptKey],
-  );
-  // The toolbar and earlier-page control sit above the rows, and the
-  // virtualizer counts offsets from the top of the scroll content. The
-  // margin only picks which rows mount, so a reading from the last scroll
-  // or resize is close enough: the overscan rows cover a small error.
-  const measureScrollMargin = useCallback(() => {
-    const list = listRef.current;
-    const root = scrollRootFor(list);
-    if (!list || !(root instanceof Element)) return;
-    const margin =
-      list.getBoundingClientRect().top -
-      root.getBoundingClientRect().top +
-      root.scrollTop;
-    setScrollMargin((current) =>
-      Math.abs(margin - current) >= 1 ? margin : current,
-    );
-  }, [listRef]);
-  useLayoutEffect(measureScrollMargin, [measureScrollMargin]);
-  // The dashboard build does not use React Compiler, so nothing memoizes
-  // the values that this hook returns.
-  // oxlint-disable-next-line react/incompatible-library
-  const virtualizer = useVirtualizer<Element, HTMLLIElement>({
-    count: rows.length,
-    estimateSize: (index) => (rows[index]?.metadata ? 56 : 40),
-    getItemKey: (index) => rows[index]?.event.seq ?? index,
-    getScrollElement: () => {
-      const root = scrollRootFor(listRef.current);
-      return root instanceof Element ? root : null;
-    },
-    onChange: measureScrollMargin,
-    overscan: OVERSCAN_ROWS,
-    rangeExtractor,
-    scrollMargin,
-    // The scroll owner moves the scroll position. This only reads it.
-    scrollToFn: () => {},
-  });
-  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => false;
-  return virtualizer;
-}
-
 const loadingRowWidths = ["w-3/5", "w-2/5", "w-4/5", "w-1/2", "w-2/3", "w-1/3"];
 
 /** Match the event log toolbar, columns, and rows while the transcript loads. */

package/src/client/conversations/ConversationHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { Menu, PanelRight, ScrollText, X } from "lucide-react";
+import { Menu, PanelRight } from "lucide-react";
 
 import { SearchInput } from "../components/SearchInput";
 import { Button } from "../components/ui/button";
@@ -171,9 +171,35 @@ export function ConversationHeader(props: {
             {props.sidebarToggle ? (
               <div className="shrink-0">{props.sidebarToggle}</div>
             ) : null}
-            <h2 className="m-0 min-w-0 truncate font-display text-base font-medium leading-6 tracking-tight">
-              {props.title}
-            </h2>
+            {props.view === "raw" ? (
+              // Event log is a debug view reached from the `⋯` menu. The
+              // title leads back to the Conversation.
+              <>
+                <h2 className="m-0 min-w-0 font-display text-base font-medium leading-6 tracking-tight">
+                  <button
+                    className="block max-w-full cursor-pointer truncate text-left text-dashboard-text-muted hover:text-dashboard-text hover:underline"
+                    onClick={() => props.onViewChange("rich")}
+                    title="Back to conversation"
+                    type="button"
+                  >
+                    {props.title}
+                  </button>
+                </h2>
+                <span aria-hidden="true" className="text-dashboard-text-faint">
+                  ›
+                </span>
+                <span
+                  aria-current="page"
+                  className="shrink-0 font-display text-base font-medium leading-6 tracking-tight"
+                >
+                  Event log
+                </span>
+              </>
+            ) : (
+              <h2 className="m-0 min-w-0 truncate font-display text-base font-medium leading-6 tracking-tight">
+                {props.title}
+              </h2>
+            )}
             {liveIndicator}
             {props.privacy ? (
               <span className="shrink-0">{props.privacy}</span>
@@ -194,20 +220,7 @@ export function ConversationHeader(props: {
                 {props.cost}
               </span>
             ) : null}
-            {props.view === "raw" ? (
-              // Event log is a debug view reached from the menu. Say which
-              // view this is, and give one click back.
-              <Button
-                aria-label="Close event log"
-                className="mr-1 h-8 px-2.5"
-                onClick={() => props.onViewChange("rich")}
-                variant="quiet"
-              >
-                <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
-                Event log
-                <X aria-hidden="true" size={14} strokeWidth={2} />
-              </Button>
-            ) : (
+            {props.view === "raw" ? null : (
               <TranscriptSearchToggle
                 onClick={toggleSearch}
                 open={searchOpenVisible}
@@ -216,14 +229,16 @@ export function ConversationHeader(props: {
             <ConversationOverflowMenu>
               {(close) => menuActions("desktop", close)}
             </ConversationOverflowMenu>
-            <HeaderIconButton
-              ref={detailsButtonRef}
-              expanded={detailsOpen}
-              label="Conversation details"
-              onClick={props.onDetailsClick}
-            >
-              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
-            </HeaderIconButton>
+            {detailsOpen ? null : (
+              <HeaderIconButton
+                ref={detailsButtonRef}
+                expanded={false}
+                label="Conversation details"
+                onClick={props.onDetailsClick}
+              >
+                <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+              </HeaderIconButton>
+            )}
           </div>
         </div>
         {props.forks ? (

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -82,8 +82,10 @@ export function ConversationHeaderActions(props: {
           <Info aria-hidden="true" size={16} strokeWidth={2} />
         </MenuActionButton>
       ) : null}
+      {/* The copy action is a sibling keyed by the same id. Unique keys keep
+          React from duplicating menu rows on re-render. */}
       <ShareConversationButton
-        key={props.conversationId}
+        key={`share:${props.conversationId}`}
         conversationId={props.conversationId}
       />
       {props.copyAction}

package/src/client/conversations/ConversationLinkedWork.tsx

@@ -7,6 +7,11 @@ import type {
 
 import { ObjectIcon } from "../components/ObjectIcon";
 import { Collapsible } from "../components/ui/collapsible";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { WatchDetails, WatchDetailsRow } from "./ConversationWatches";
 import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
 
@@ -88,7 +93,7 @@ export function conversationLinks(
  * Show the outside work that a Conversation links to, one row each. A row
  * that Junior also watches shows the Watch details under a chevron, so the
  * same resource does not show twice. When one row has a chevron, the other
- * rows keep the same space, so their statuses stay aligned.
+ * rows keep the same space, so all rows keep the same width.
  */
 export function ConversationLinkedWork(props: {
   links: ConversationLink[];
@@ -133,20 +138,35 @@ function ChevronSpace(props: { children: ReactNode }) {
 function LinkRow(props: { link: ConversationLink }) {
   const { link } = props;
   const status = linkStatusLabel(link.status);
+  const icon = (
+    <ObjectIcon
+      decorative
+      facts={link.facts}
+      objectType={link.objectType}
+      size={14}
+      status={link.status}
+    />
+  );
   return (
     <DetailsRow
       href={link.url}
       icon={
-        // The row text names the status, so the icon stays silent.
-        <ObjectIcon
-          decorative
-          facts={link.facts}
-          objectType={link.objectType}
-          size={14}
-          status={link.status}
-        />
+        // The icon shows the status, so the row does not repeat it in text.
+        status ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <span aria-label={status} className="inline-flex" role="img">
+                  {icon}
+                </span>
+              }
+            />
+            <TooltipContent size="compact">{status}</TooltipContent>
+          </Tooltip>
+        ) : (
+          icon
+        )
       }
-      meta={status}
       title={link.label}
       tooltip={[link.label, link.plugin, status, link.description]
         .filter(Boolean)