@sentry/junior-dashboard 0.279.0 → 0.280.0

package/src/client/conversations/ConversationCatchUp.tsx

@@ -0,0 +1,107 @@
+import { useContext, useEffect, useRef } from "react";
+import { ArrowDown, Sparkles } from "lucide-react";
+
+import { Button } from "../components/ui/button";
+import { Skeleton } from "../components/ui/skeleton";
+import { InlineError } from "../components/InlineError";
+import { DisplayText } from "../display-text/DisplayText";
+import { useConversationCatchUpState } from "./conversationCatchUpState";
+import { TranscriptJumpToLatestContext } from "./transcriptBottomPinning";
+
+const cardClass =
+  "grid gap-2.5 rounded-lg border border-dashboard-accent/20 bg-dashboard-accent/10 px-3.5 py-3 font-sans text-sm leading-relaxed text-dashboard-text";
+
+/** Offer the catch-up inside the "New" marker, so it takes no extra row. */
+export function ConversationCatchUpButton() {
+  const state = useConversationCatchUpState();
+  if (!state || state.data || state.pending) return null;
+  return (
+    <button
+      className="inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-full border border-dashboard-accent/30 bg-transparent px-2.5 font-sans text-xs font-medium text-dashboard-accent-text transition-colors hover:border-dashboard-accent/60 hover:bg-dashboard-accent/10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus/55"
+      onClick={state.request}
+      type="button"
+    >
+      <Sparkles aria-hidden="true" size={12} strokeWidth={2} />
+      Catch me up
+    </button>
+  );
+}
+
+/** Show the loading, loaded, or failed catch-up under the "New" marker. */
+export function ConversationCatchUpCard() {
+  const state = useConversationCatchUpState();
+  const jumpToLatest = useContext(TranscriptJumpToLatestContext);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const shown = state?.data ? "data" : state?.pending ? "pending" : undefined;
+  // The transcript holds the row below the reader's place, so the card grows
+  // up, out of view. Bring it back after that scroll fix runs.
+  useEffect(() => {
+    if (!shown) return;
+    const frame = requestAnimationFrame(() => {
+      // Keep the "New" marker above the card in view too.
+      const marker = cardRef.current?.closest(
+        "[data-transcript-unread-marker]",
+      );
+      marker?.scrollIntoView({ block: "nearest" });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [shown]);
+
+  if (state?.data) {
+    return (
+      <div
+        aria-label="Catch-up"
+        className={cardClass}
+        ref={cardRef}
+        role="group"
+      >
+        <DisplayText text={state.data.summary} />
+        {state.data.needsYou ? (
+          <p className="m-0 border-t border-dashboard-accent/15 pt-2.5">
+            <span className="font-semibold text-dashboard-accent-text">
+              Needs you
+            </span>
+            <span
+              aria-hidden="true"
+              className="px-1.5 text-dashboard-text-muted"
+            >
+              ·
+            </span>
+            {state.data.needsYou}
+          </p>
+        ) : null}
+        {jumpToLatest ? (
+          <Button
+            className="-mb-1 h-7 justify-self-center gap-1.5 px-2 text-xs"
+            onClick={jumpToLatest}
+            variant="quiet"
+          >
+            <ArrowDown aria-hidden="true" size={14} strokeWidth={2} />
+            Jump to latest
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+  if (state?.error) {
+    return (
+      <InlineError className="text-center text-xs">
+        Catch-up failed. Try again.
+      </InlineError>
+    );
+  }
+  if (state?.pending) {
+    return (
+      <div
+        aria-label="Summarizing new messages"
+        className={cardClass}
+        ref={cardRef}
+        role="status"
+      >
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+    );
+  }
+  return null;
+}

package/src/client/conversations/ConversationContextTags.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+
+import { slackLocationLabel } from "../format";
+import { cn } from "../styles";
+import type { Conversation } from "../types";
+import { SlackMark } from "./SlackMark";
+
+function githubRepositoryFromUrl(href: string) {
+  const url = new URL(href);
+  if (url.origin !== "https://github.com") return undefined;
+  const [, owner, repo] = url.pathname.split("/");
+  if (!owner || !repo) return undefined;
+  return {
+    label: `${owner}/${repo}`,
+    href: `${url.origin}/${owner}/${repo}`,
+  };
+}
+
+function singleGitHubRepository(annotations: Conversation["annotations"]) {
+  let repository: ReturnType<typeof githubRepositoryFromUrl>;
+  for (const annotation of annotations ?? []) {
+    if (annotation.plugin !== "github" || !annotation.url) continue;
+    const candidate = githubRepositoryFromUrl(annotation.url);
+    if (!candidate) continue;
+    if (
+      repository &&
+      repository.href.toLowerCase() !== candidate.href.toLowerCase()
+    ) {
+      return undefined;
+    }
+    repository ??= candidate;
+  }
+  return repository;
+}
+
+function ContextTag(props: {
+  href?: string;
+  icon: ReactNode;
+  label: string;
+  title?: string;
+}) {
+  const className =
+    "group/context-tag inline-flex h-6 min-w-0 items-center gap-1 rounded-md border border-dashboard-border-subtle px-1.5 font-sans text-xs font-medium text-dashboard-text-muted";
+  const content = (
+    <>
+      {props.icon}
+      <span className="truncate">{props.label}</span>
+    </>
+  );
+
+  return props.href ? (
+    <a
+      className={cn(
+        className,
+        "no-underline transition-colors hover:border-dashboard-border-strong hover:bg-dashboard-fill-soft hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
+      )}
+      href={props.href}
+      rel="noreferrer"
+      target="_blank"
+      title={props.title ?? props.label}
+    >
+      {content}
+    </a>
+  ) : (
+    <span className={className} title={props.label}>
+      {content}
+    </span>
+  );
+}
+
+function GitHubMark() {
+  return (
+    <svg
+      aria-label="GitHub"
+      className="size-3 shrink-0 transition-colors group-hover/context-tag:text-dashboard-text-solid group-focus-visible/context-tag:text-dashboard-text-solid"
+      fill="currentColor"
+      role="img"
+      viewBox="0 0 24 24"
+    >
+      {/* Keep the geometry from packages/docs/public/integrations/github.svg. */}
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+}
+
+/** Show source context and a repository tag when linked work points to one repository. */
+export function conversationContextTags(
+  conversation: Conversation | undefined,
+) {
+  const location =
+    conversation && slackLocationLabel(conversation, { includeId: false });
+  const repository = singleGitHubRepository(conversation?.annotations);
+  if (!location && !repository) return null;
+
+  return (
+    <div className="flex min-w-0 items-center gap-1.5">
+      {location ? (
+        <ContextTag
+          href={conversation?.locationUrl}
+          icon={
+            <SlackMark className="size-3 shrink-0 group-hover/context-tag:[&>path]:fill-(--slack-mark-color) group-focus-visible/context-tag:[&>path]:fill-(--slack-mark-color)" />
+          }
+          label={location}
+          title={`Open ${location} in Slack`}
+        />
+      ) : null}
+      {repository ? <ContextTag {...repository} icon={<GitHubMark />} /> : null}
+    </div>
+  );
+}

package/src/client/conversations/ConversationEventLog.tsx

@@ -1,4 +1,17 @@
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import {
+  defaultRangeExtractor,
+  useVirtualizer,
+  type Range,
+} from "@tanstack/react-virtual";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 
 import { Skeleton } from "../components/ui/skeleton";
@@ -12,8 +25,10 @@ import {
   eventLogRows,
   eventLogTone,
   filterEventLogRows,
+  type EventLogRow,
 } from "./eventLog";
 import { ConversationEventDetails } from "./ConversationEventDetails";
+import { scrollRootFor } from "./transcriptBottomPinning";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
 const rowClass =
@@ -28,6 +43,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   conversation: ConversationTranscript;
   onSearchChange(value: string): void;
   onSelectedSeqChange?(seq: number | undefined): void;
+  /** The row that holds the reader's place, from the scroll owner. */
+  scrollAnchorKey?: () => string | undefined;
   selectedSeq?: number;
 }) {
   const { conversation } = props;
@@ -50,17 +67,35 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   );
   // Resolve the selection from current data so polling cannot leave stale details.
   const selected = events.find((event) => event.seq === selectedSeq);
+  // 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 virtualRows = virtualizer.getVirtualItems();
   useEffect(() => {
-    if (selectedSeq === undefined || revealedSeqRef.current === selectedSeq) {
-      return;
-    }
+    if (selectedSeq === undefined) return;
     const row = listRef.current?.querySelector(
       `[data-event-seq="${selectedSeq}"]`,
     );
     if (!row) return;
+    if (focusSeqRef.current === selectedSeq) {
+      focusSeqRef.current = undefined;
+      row
+        .querySelector<HTMLButtonElement>("button")
+        ?.focus({ preventScroll: true });
+    }
+    if (revealedSeqRef.current === selectedSeq) return;
     revealedSeqRef.current = selectedSeq;
     row.scrollIntoView({ block: "nearest" });
-  }, [selectedSeq, visibleRows]);
+  }, [selectedSeq, virtualRows]);
 
   if (conversation.eventHistory.status === "expired") {
     return (
@@ -101,84 +136,112 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
         <EventLogColumns />
       </div>
       <div className="font-mono text-xs">
+        {/* Only rows near the viewport mount. Each row is placed at its
+            measured offset, so the list keeps its full height. */}
         <ol
           aria-label="Events"
-          className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
+          className="relative m-0 list-none p-0"
           ref={listRef}
+          style={{ height: virtualizer.getTotalSize() }}
         >
-          {visibleRows.map(({ event, summary, metadata }, index) => (
-            <li
-              className="scroll-mt-32 scroll-mb-2"
-              data-event-seq={event.seq}
-              data-scroll-anchor={`event:${event.seq}`}
-              key={event.seq}
-            >
-              <button
-                aria-expanded={selectedSeq === event.seq}
-                aria-label={`Event ${event.seq}: ${event.data.type}`}
+          {virtualRows.map((virtualRow) => {
+            const { event, summary, metadata } = visibleRows[virtualRow.index]!;
+            const index = virtualRow.index;
+            return (
+              <li
                 className={cn(
-                  rowClass,
-                  "relative min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
-                  selectedSeq === event.seq &&
-                    "bg-dashboard-fill-strong before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-dashboard-accent before:content-['']",
+                  "absolute left-0 top-0 w-full scroll-mt-32 scroll-mb-2",
+                  index > 0 && "border-t border-dashboard-border-subtle",
                 )}
-                onClick={() => {
-                  revealedSeqRef.current = event.seq;
-                  setSelectedSeq(event.seq);
+                data-event-seq={event.seq}
+                data-index={index}
+                data-scroll-anchor={`event:${event.seq}`}
+                key={virtualRow.key}
+                onBlur={() => {
+                  if (focusedSeqRef.current === event.seq) {
+                    focusedSeqRef.current = undefined;
+                  }
                 }}
-                onKeyDown={(keyEvent) => {
-                  if (
-                    keyEvent.altKey ||
-                    keyEvent.ctrlKey ||
-                    keyEvent.metaKey ||
-                    keyEvent.shiftKey ||
-                    (keyEvent.key !== "ArrowUp" && keyEvent.key !== "ArrowDown")
-                  )
-                    return;
-                  keyEvent.preventDefault();
-                  const next =
-                    visibleRows[
-                      index + (keyEvent.key === "ArrowDown" ? 1 : -1)
-                    ];
-                  if (!next) return;
-                  setSelectedSeq(next.event.seq);
-                  listRef.current
-                    ?.querySelector<HTMLButtonElement>(
-                      `[data-event-seq="${next.event.seq}"] button`,
-                    )
-                    ?.focus({ preventScroll: true });
+                onFocus={() => {
+                  focusedSeqRef.current = event.seq;
+                }}
+                ref={virtualizer.measureElement}
+                style={{
+                  transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
                 }}
-                type="button"
               >
-                <time
-                  className="tabular-nums text-dashboard-text-muted"
-                  dateTime={event.createdAt}
-                  title={time.formatTimestamp(event.createdAt)}
-                >
-                  {time.formatClock(event.createdAt)}
-                </time>
-                <span
-                  className={cn("truncate", eventLogTone(event.data))}
-                  title={event.data.type}
+                <button
+                  aria-expanded={selectedSeq === event.seq}
+                  aria-label={`Event ${event.seq}: ${event.data.type}`}
+                  className={cn(
+                    rowClass,
+                    "relative min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
+                    selectedSeq === event.seq &&
+                      "bg-dashboard-fill-strong before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-dashboard-accent before:content-['']",
+                  )}
+                  onClick={() => {
+                    revealedSeqRef.current = event.seq;
+                    setSelectedSeq(event.seq);
+                  }}
+                  onKeyDown={(keyEvent) => {
+                    if (
+                      keyEvent.altKey ||
+                      keyEvent.ctrlKey ||
+                      keyEvent.metaKey ||
+                      keyEvent.shiftKey ||
+                      (keyEvent.key !== "ArrowUp" &&
+                        keyEvent.key !== "ArrowDown")
+                    )
+                      return;
+                    keyEvent.preventDefault();
+                    const next =
+                      visibleRows[
+                        index + (keyEvent.key === "ArrowDown" ? 1 : -1)
+                      ];
+                    if (!next) return;
+                    setSelectedSeq(next.event.seq);
+                    // Focus a mounted row now, so the next key press reaches
+                    // it. A row past the mounted range gets focus after it
+                    // mounts.
+                    const nextButton =
+                      listRef.current?.querySelector<HTMLButtonElement>(
+                        `[data-event-seq="${next.event.seq}"] button`,
+                      );
+                    if (nextButton) nextButton.focus({ preventScroll: true });
+                    else focusSeqRef.current = next.event.seq;
+                  }}
+                  type="button"
                 >
-                  <HighlightText text={event.data.type} />
-                </span>
-                <span className="col-span-2 row-start-2 grid min-w-0 gap-0.5 text-dashboard-text @min-[32rem]:col-span-1 @min-[32rem]:row-auto">
-                  <span className="truncate" title={summary}>
-                    <HighlightText text={summary} />
+                  <time
+                    className="tabular-nums text-dashboard-text-muted"
+                    dateTime={event.createdAt}
+                    title={time.formatTimestamp(event.createdAt)}
+                  >
+                    {time.formatClock(event.createdAt)}
+                  </time>
+                  <span
+                    className={cn("truncate", eventLogTone(event.data))}
+                    title={event.data.type}
+                  >
+                    <HighlightText text={event.data.type} />
                   </span>
-                  {metadata ? (
-                    <span
-                      className="truncate text-dashboard-text-muted"
-                      title={metadata}
-                    >
-                      <HighlightText text={metadata} />
+                  <span className="col-span-2 row-start-2 grid min-w-0 gap-0.5 text-dashboard-text @min-[32rem]:col-span-1 @min-[32rem]:row-auto">
+                    <span className="truncate" title={summary}>
+                      <HighlightText text={summary} />
                     </span>
-                  ) : null}
-                </span>
-              </button>
-            </li>
-          ))}
+                    {metadata ? (
+                      <span
+                        className="truncate text-dashboard-text-muted"
+                        title={metadata}
+                      >
+                        <HighlightText text={metadata} />
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
         </ol>
         {visibleRows.length === 0 ? (
           <p className="m-0 px-3 py-6 text-sm text-dashboard-text-muted">
@@ -205,6 +268,85 @@ 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. */