@sentry/junior-dashboard 0.265.0 → 0.266.0

package/src/client/conversations/TranscriptStructuredEventView.tsx

@@ -1,8 +1,9 @@
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewStructuredEventPart } from "../types";
 import { MentionText } from "./transcriptMentions";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 type TranscriptPresentationEventPart = TranscriptViewStructuredEventPart;
 
@@ -58,27 +59,34 @@ export function TranscriptStructuredEventView(props: {
         ))}
       </div>
     ) : null;
+  const collapsible = details.length > 0 && !search.active;
+  // The header can sit inside the row button, so it uses only inline elements
+  // and no links.
   const header = (
-    <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2 max-md:grid-cols-[minmax(0,1fr)]">
-      <div className="min-w-0">
-        <div className="text-sm font-medium leading-6 text-dashboard-text">
+    <span className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2 max-md:grid-cols-[minmax(0,1fr)]">
+      <span className="min-w-0">
+        <span className="block text-sm font-medium leading-6 text-dashboard-text">
           <HighlightText text={presentation.title} />
-        </div>
+        </span>
         {presentation.preview ? (
-          <div className="mt-0.5 truncate text-xs text-dashboard-text-muted">
-            <MentionText mentions={mentions} text={presentation.preview} />
-          </div>
+          <span className="mt-0.5 block truncate text-xs text-dashboard-text-muted">
+            <MentionText
+              links={!collapsible}
+              mentions={mentions}
+              text={presentation.preview}
+            />
+          </span>
         ) : null}
-      </div>
+      </span>
       {timestamp ? (
         <span className="text-xs leading-6 tabular-nums text-dashboard-text-muted max-md:hidden">
           {timestamp}
         </span>
       ) : null}
-    </div>
+    </span>
   );
 
-  if (details.length === 0 || search.active) {
+  if (!collapsible) {
     return (
       <div className={surfaceClass}>
         {header}
@@ -87,9 +95,11 @@ export function TranscriptStructuredEventView(props: {
     );
   }
   return (
-    <details className={`group/plugin-event ${surfaceClass}`}>
-      <TranscriptSummary flush>{header}</TranscriptSummary>
-      {body}
-    </details>
+    <Collapsible className={surfaceClass}>
+      <TranscriptSummaryTrigger flush className="block">
+        {header}
+      </TranscriptSummaryTrigger>
+      <CollapsibleContent hiddenUntilFound>{body}</CollapsibleContent>
+    </Collapsible>
   );
 }

package/src/client/conversations/TranscriptSummary.tsx

@@ -1,7 +1,11 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
 
+import { CollapsibleTrigger } from "../components/ui/collapsible";
 import { cn } from "../styles";
 
+const summaryClass =
+  "cursor-pointer rounded-md px-2 py-1.5 transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus";
+
 /** Keep hover and keyboard focus around a padded transcript cell. */
 export function TranscriptSummary({
   className,
@@ -15,10 +19,38 @@ export function TranscriptSummary({
     <summary
       {...props}
       className={cn(
-        "cursor-pointer list-none rounded-md px-2 py-1.5 transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [&::-webkit-details-marker]:hidden",
+        summaryClass,
+        "list-none [&::-webkit-details-marker]:hidden",
         flush && "-mx-2 -my-1.5",
         className,
       )}
     />
   );
 }
+
+/**
+ * Give a `Collapsible` trigger the same padding, hover, and focus as
+ * `TranscriptSummary`. The caller sets the display. Put only inline elements,
+ * such as `span`, inside the trigger.
+ */
+export function TranscriptSummaryTrigger({
+  className,
+  flush = false,
+  ...props
+}: Omit<ComponentProps<typeof CollapsibleTrigger>, "className"> & {
+  className?: string;
+  /** Extend padding around text that already sits on the transcript edge. */
+  flush?: boolean;
+}) {
+  return (
+    <CollapsibleTrigger
+      {...props}
+      className={cn(
+        summaryClass,
+        "text-left disabled:cursor-default disabled:hover:bg-transparent",
+        flush ? "-mx-2 -my-1.5 w-[calc(100%+1rem)]" : "w-full",
+        className,
+      )}
+    />
+  );
+}

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -9,13 +9,14 @@ import {
 import { createPortal } from "react-dom";
 
 import { DetailsPanel } from "../components/DetailsPanel";
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { Drawer } from "../components/Drawer";
 import type { TranscriptViewTurnContext } from "../types";
 import { formatMessageTimestamp, formatTime } from "../format";
 import { memoryRecallContent, type MemoryRecallContent } from "./turnContext";
-import { cn } from "../styles";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { HighlightText } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
+import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
 /** The turn context that a page panel shows, keyed by its message. */
 export type TurnContextSelection = {
@@ -189,15 +190,17 @@ function MemoryRecall(props: {
   return (
     <div className="overflow-hidden rounded-lg border border-dashboard-border-strong">
       {props.memories.map((memory, index) => (
-        <details
-          className="group/memory border-t border-dashboard-border-strong first:border-t-0"
+        <Collapsible
+          className="border-t border-dashboard-border-strong first:border-t-0"
           key={memory.id}
         >
-          <TranscriptSummary className="flex items-start gap-2.5">
+          <TranscriptSummaryTrigger className="group flex items-start gap-2.5">
             <ChevronRight
               aria-hidden="true"
-              className="mt-0.5 shrink-0 text-dashboard-text-muted transition-transform group-open/memory:rotate-90"
-              size={15}
+              className={cn(
+                dashboardDisclosureChevronClass,
+                "mt-0.5 text-dashboard-text-muted",
+              )}
             />
             <span className="min-w-0 flex-1">
               <span className="flex items-center justify-between gap-3">
@@ -212,39 +215,43 @@ function MemoryRecall(props: {
                 <HighlightText text={memory.content} />
               </span>
             </span>
-          </TranscriptSummary>
-
-          <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
-            <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
-              <HighlightText text={memory.content} />
-            </div>
+          </TranscriptSummaryTrigger>
 
-            <dl className="mt-4 grid gap-2 text-xs">
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Memory ID</dt>
-                <dd className="m-0 break-all font-mono text-dashboard-text-muted">
-                  <HighlightText text={memory.id} />
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Observed</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {formatTime(new Date(memory.observedAtMs).toISOString())}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Scope</dt>
-                <dd className="m-0 text-dashboard-text-muted">
-                  {memory.scope}
-                </dd>
-              </div>
-              <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                <dt className="text-dashboard-text-muted">Kind</dt>
-                <dd className="m-0 text-dashboard-text-muted">{memory.kind}</dd>
+          <CollapsibleContent hiddenUntilFound>
+            <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
+              <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
+                <HighlightText text={memory.content} />
               </div>
-            </dl>
-          </div>
-        </details>
+
+              <dl className="mt-4 grid gap-2 text-xs">
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Memory ID</dt>
+                  <dd className="m-0 break-all font-mono text-dashboard-text-muted">
+                    <HighlightText text={memory.id} />
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Observed</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {formatTime(new Date(memory.observedAtMs).toISOString())}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Scope</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.scope}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
+                  <dt className="text-dashboard-text-muted">Kind</dt>
+                  <dd className="m-0 text-dashboard-text-muted">
+                    {memory.kind}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       ))}
       <p className="m-0 border-t border-dashboard-border-strong px-3 py-2 text-xs text-dashboard-text-muted">
         {props.memories.length}{" "}

package/src/client/conversations/eventLog.ts

@@ -111,6 +111,7 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   if (
     (data.type === "guardian_action_reviewed" && data.decision === "ask") ||
+    (data.type === "turn_lifecycle" && data.state === "blocked") ||
     (data.type === "subagent" &&
       (data.status === "aborted" || data.status === "blocked"))
   ) {

package/src/client/conversations/transcriptMentions.tsx

@@ -43,12 +43,17 @@ export function MentionPeopleProvider(props: {
 
 /** Render one line of display text with the people the API resolved for it. */
 export function MentionText(props: {
+  /**
+   * Link people to their page. Set false inside a button, which cannot hold
+   * a link.
+   */
+  links?: boolean;
   mentions: readonly ActorIdentity[];
   text: string;
 }) {
   return (
     <MentionPeopleProvider mentions={props.mentions}>
-      {renderMentionText(props.text, "mention-text")}
+      {renderMentionText(props.text, "mention-text", props.links)}
     </MentionPeopleProvider>
   );
 }
@@ -57,7 +62,11 @@ export function MentionText(props: {
  * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
  * mentions. It reads people from the nearest `MentionPeopleProvider`.
  */
-export function renderMentionText(text: string, keyBase: string): ReactNode[] {
+export function renderMentionText(
+  text: string,
+  keyBase: string,
+  links = true,
+): ReactNode[] {
   const nodes: ReactNode[] = [];
   let cursor = 0;
   for (const mention of findMentions(text)) {
@@ -70,7 +79,11 @@ export function renderMentionText(text: string, keyBase: string): ReactNode[] {
       );
     }
     nodes.push(
-      <MentionView key={`${keyBase}-m-${mention.start}`} mention={mention} />,
+      <MentionView
+        key={`${keyBase}-m-${mention.start}`}
+        links={links}
+        mention={mention}
+      />,
     );
     cursor = mention.end;
   }
@@ -95,13 +108,13 @@ function findMentions(text: string): TranscriptMention[] {
   }));
 }
 
-function MentionView(props: { mention: TranscriptMention }) {
+function MentionView(props: { links: boolean; mention: TranscriptMention }) {
   const people = useContext(TranscriptMentionPeople);
   const { id, label, sigil } = props.mention;
   const person = sigil === "@" ? people.get(id) : undefined;
   const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
   const text = <HighlightText text={`${sigil}${name.replace(/^[@#]/, "")}`} />;
-  if (person?.email) {
+  if (props.links && person?.email) {
     return (
       <Link
         // Previews sit in cards that disable pointer events on their text.

package/src/mock-reporting/watches.ts

@@ -8,7 +8,7 @@ const HOUR_MS = 60 * 60_000;
 const DAY_MS = 24 * HOUR_MS;
 
 // Watch times are relative to the real clock, not the fixed fixture time, so
-// time-left labels stay readable.
+// the timer fire time stays in the future.
 function iso(offsetMs: number): string {
   return new Date(Date.now() + offsetMs).toISOString();
 }