@sentry/junior-dashboard 0.290.0 → 0.291.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.290.0",
+  "version": "0.291.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,10 +45,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.290.0"
+    "@sentry/junior-plugin-api": "0.291.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.290.0"
+    "@sentry/junior": "0.291.0"
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.3.0",
@@ -72,7 +72,7 @@
     "typescript": "^7.0.2",
     "unrun": "^0.3.1",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.290.0"
+    "@sentry/junior": "0.291.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:css && pnpm run build:client && pnpm run build:server",

package/src/client/conversations/ConversationMeta.tsx

@@ -9,7 +9,13 @@ import {
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
-import { useSyncExternalStore, type ReactNode } from "react";
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
 import { Link } from "react-router";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
@@ -184,50 +190,137 @@ function SidebarAnnotationIconFacepile(props: {
     <span
       className={cn(
         // Isolate stacking context so z-index only orders chips inside the pile.
-        // Extra right pad keeps the last chip's cutout ring from clipping.
-        "relative isolate inline-flex h-[18px] items-center pr-0.5",
+        "relative isolate inline-flex h-[18px] min-w-0 items-center",
         props.className,
       )}
     >
-      {props.annotations.map((annotation, index) => (
-        <SidebarAnnotationStatusChip
-          annotation={annotation}
-          cutoutColor={props.cutoutColor}
-          key={annotation.key}
-          // Each chip to the right layers above the chip before it.
-          stacked={index > 0}
-          zIndex={index + 1}
-        />
-      ))}
+      <FittingIcons
+        // The padding keeps the cutout rings inside the clipped row.
+        className="-m-0.5 h-[22px] min-w-[22px] p-0.5"
+        icons={props.annotations.map((annotation, index) => (
+          <SidebarAnnotationStatusChip
+            annotation={annotation}
+            cutoutColor={props.cutoutColor}
+            key={annotation.key}
+            // Each chip to the right layers above the chip before it.
+            stacked={index > 0}
+            zIndex={index + 1}
+          />
+        ))}
+        overflow={(count) => (
+          <span
+            aria-hidden="true"
+            className="relative -ml-0.5 box-border inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full border border-dashboard-border-strong bg-dashboard-control px-1 font-sans text-2xs tabular-nums leading-none text-dashboard-text-muted"
+            style={{
+              boxShadow: `0 0 0 2px ${props.cutoutColor}`,
+              zIndex: props.annotations.length + 1,
+            }}
+          >
+            +{count}
+          </span>
+        )}
+      />
     </span>
   );
 }
 
-/** One shared label with every status icon for that label. */
+/**
+ * Show the icons that fit in the row and a +N count for the rest. Icons that
+ * do not fit wrap onto lines that the row clips, so the count follows the
+ * real width.
+ */
+function FittingIcons(props: {
+  className: string;
+  icons: ReactNode[];
+  overflow(count: number): ReactNode;
+}) {
+  const rowRef = useRef<HTMLSpanElement>(null);
+  const overflowRef = useRef<HTMLSpanElement>(null);
+  const total = props.icons.length;
+  const [shown, setShown] = useState(total);
+
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!row) return;
+    const countFirstLine = () => {
+      const items = Array.from(row.children);
+      const bottom = items[0]?.getBoundingClientRect().bottom ?? 0;
+      return items.filter((item) => item.getBoundingClientRect().top < bottom)
+        .length;
+    };
+    const measure = () => {
+      // Measure without the +N first. Otherwise its own width keeps the
+      // last icons hidden after the row grows wide enough for all of them.
+      const overflow = overflowRef.current;
+      if (overflow) overflow.style.display = "none";
+      const fitting = countFirstLine();
+      if (overflow) overflow.style.display = "";
+      setShown(fitting === total || !overflow ? fitting : countFirstLine());
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(row);
+    return () => observer.disconnect();
+    // Run again when `shown` changes: the +N that mounts takes width, and
+    // this pass counts it before paint. The observer would run after paint.
+  }, [shown, total]);
+
+  return (
+    <>
+      <span
+        className={cn(
+          // The row gap pushes wrapped lines fully outside the clip.
+          "flex flex-wrap items-center gap-y-6 overflow-hidden",
+          props.className,
+        )}
+        ref={rowRef}
+      >
+        {props.icons}
+      </span>
+      {shown < total ? (
+        <span className="contents" ref={overflowRef}>
+          {props.overflow(total - shown)}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+/** One shared label with the status icons that fit and a count of the rest. */
 function SidebarAnnotationGroupChip(props: {
   group: SidebarAnnotationBadgeGroup;
 }) {
   return (
-    <span className="inline-flex h-5 min-w-0 max-w-60 shrink-0 items-center gap-1 truncate rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs leading-none text-dashboard-text-muted">
-      {props.group.annotations.map((annotation) =>
-        annotation.objectType ? (
-          <ObjectIcon
-            {...annotation}
-            objectType={annotation.objectType}
-            key={annotation.key}
-            decorative
-            size={14}
-          />
-        ) : annotation.icon ? (
-          <SidebarAnnotationIcon
-            decorative
-            icon={annotation.icon}
-            key={annotation.key}
-            size={11}
-          />
-        ) : null,
-      )}
-      <span className="min-w-0 truncate whitespace-nowrap">
+    // No min-w-0: a chip shrinks only to one icon and its label, so the
+    // longest group gives up icons before a shorter one loses its label.
+    <span className="inline-flex h-5 items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs leading-none text-dashboard-text-muted">
+      <FittingIcons
+        className="h-3.5 min-w-3.5 gap-x-1"
+        icons={props.group.annotations.flatMap((annotation) =>
+          annotation.objectType ? (
+            <ObjectIcon
+              {...annotation}
+              objectType={annotation.objectType}
+              key={annotation.key}
+              decorative
+              size={14}
+            />
+          ) : annotation.icon ? (
+            <SidebarAnnotationIcon
+              decorative
+              icon={annotation.icon}
+              key={annotation.key}
+              size={11}
+            />
+          ) : (
+            []
+          ),
+        )}
+        overflow={(count) => (
+          <span className="shrink-0 tabular-nums">+{count}</span>
+        )}
+      />
+      <span className="max-w-40 shrink-0 truncate whitespace-nowrap">
         {props.group.label}
       </span>
     </span>

package/src/client/conversations/conversationSections.ts

@@ -65,8 +65,8 @@ export function buildConversationSections(
 
 /**
  * True when the conversation waits on a person: its id is in `attentionIds`,
- * or it has unfinished work, such as an open pull request, while Junior is
- * not running in it.
+ * a Turn waits on a person to finish an authorization, or it has unfinished
+ * work, such as an open pull request, while Junior is not running in it.
  */
 function needsAttention(
   conversation: Conversation,
@@ -74,6 +74,7 @@ function needsAttention(
 ): boolean {
   return (
     attentionIds.has(conversation.id) ||
+    conversation.awaitingAuthorization === true ||
     (conversation.unfinishedWork === true && conversation.status !== "active")
   );
 }

package/src/client/format.ts

@@ -910,6 +910,7 @@ export function buildConversations(
       parentConversationId: summary.parentConversationId,
       threads: summary.threads && buildConversations(summary.threads),
       unfinishedWork: summary.unfinishedWork,
+      awaitingAuthorization: summary.awaitingAuthorization,
       visibility: summary.visibility,
     }))
     .sort((a, b) => compareTimeDesc(a.lastSeenAt, b.lastSeenAt));

package/src/client/types.ts

@@ -199,6 +199,8 @@ export type Conversation = {
   /** Visible Threads under this row, newest first. */
   threads?: Conversation[];
   unfinishedWork?: boolean;
+  /** A Turn waits on a person to finish an authorization. Server-owned. */
+  awaitingAuthorization?: boolean;
   visibility?: ConversationSummaryReport["visibility"];
 };