@sentry/junior-dashboard 0.279.0 → 0.281.0

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/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/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