@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/conversations/ConversationTranscript.tsx

@@ -28,6 +28,11 @@ import { TranscriptToolView } from "./TranscriptToolView";
 import { TranscriptReasoningView } from "./TranscriptReasoningView";
 import { TranscriptAttachmentsDeliveredView } from "./TranscriptAttachmentsDeliveredView";
 import { TranscriptStructuredEventView } from "./TranscriptStructuredEventView";
+import {
+  TranscriptCapturedMemories,
+  TranscriptRecalledMemories,
+} from "./TranscriptMemoryPopover";
+import { isMemoryCaptureEvent } from "./conversationMemory";
 import { TranscriptFailureView } from "./TranscriptFailureView";
 import {
   structuredEventIcon,
@@ -248,16 +253,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
       renderMessage={(entry) =>
         props.conversation.sourceTask &&
         isAutomationTriggerMessage(props.conversation, entry.message) ? (
-          <TranscriptAutomationTriggerView
-            message={entry.message}
-            sourceTask={props.conversation.sourceTask}
-          />
+          <div className="grid min-w-0 gap-2">
+            <TranscriptAutomationTriggerView
+              message={entry.message}
+              sourceTask={props.conversation.sourceTask}
+            />
+            <TranscriptRecalledMemories message={entry.message} />
+          </div>
         ) : entry.message.eventType ? (
           <TranscriptRailEvent
             kind="event"
             objectType={entry.message.eventObjectType}
           >
             <TranscriptEventView message={entry.message} />
+            <TranscriptRecalledMemories
+              className="mt-1"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : entry.message.context ? (
           <TranscriptRailEvent kind="message_context">
@@ -265,6 +277,10 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
               message={entry.message}
               conversation={props.conversation}
             />
+            <TranscriptRecalledMemories
+              className="mt-2"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : (
           <TranscriptMessageView
@@ -285,10 +301,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
           icon={structuredEventIcon(entry.part.presentation.icon)}
           kind="structured_event"
         >
-          <TranscriptStructuredEventView
-            part={entry.part}
-            timestamp={entry.timestamp}
-          />
+          {isMemoryCaptureEvent(entry.part) ? (
+            <TranscriptCapturedMemories
+              fallback={
+                <TranscriptStructuredEventView
+                  part={entry.part}
+                  timestamp={entry.timestamp}
+                />
+              }
+              timestamp={entry.timestamp}
+              turnId={entry.part.turnId}
+            />
+          ) : (
+            <TranscriptStructuredEventView
+              part={entry.part}
+              timestamp={entry.timestamp}
+            />
+          )}
         </TranscriptRailEvent>
       )}
       renderSubagent={(entry) => (

package/src/client/conversations/ConversationWatches.tsx

@@ -15,7 +15,7 @@ import {
   Timer,
   Users,
 } from "lucide-react";
-import { useState, type ReactNode } from "react";
+import type { ReactNode } from "react";
 import {
   conversationWatchesReportSchema,
   type ConversationWatch,
@@ -24,6 +24,12 @@ import {
 import { DisplayText } from "../display-text/DisplayText";
 import { formatTime } from "../format";
 import { fetchDashboardJson } from "../http";
+import { conversationSideReadQueryKey } from "./queries";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { dashboardDisclosureChevronClass } from "../styles";
 import { DetailsList, DetailsRow } from "./DetailsList";
 
@@ -36,7 +42,7 @@ export function useConversationWatches(conversationId: string) {
         `/api/conversations/${encodeURIComponent(conversationId)}/watches`,
         signal,
       ),
-    queryKey: ["conversation", conversationId, "watches"],
+    queryKey: conversationSideReadQueryKey(conversationId, "watches"),
     retry: false,
   });
 }
@@ -69,13 +75,13 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
 };
 
 /**
- * Show one Watch as a single line with its resource. Clicking the line shows
- * why the Watch exists and which events wake the Conversation. The expiry is
- * an internal limit, so the row does not show it.
+ * Show one Watch as a single line with its resource. When the resource has a
+ * web page, the line opens it and a chevron shows the details. Otherwise the
+ * line itself shows why the Watch exists and which events wake the
+ * Conversation. The expiry is an internal limit, so the row does not show it.
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
-  const [expanded, setExpanded] = useState(false);
   const Icon = watch.redacted
     ? LockKeyhole
     : (resourceIcons[watch.resourceType] ?? Eye);
@@ -83,29 +89,39 @@ function WatchRow(props: { watch: ConversationWatch }) {
   // A timer has one event, and its fire time already says when it wakes.
   const events = watch.firesAt ? [] : watch.events;
   const filters = Object.entries(watch.match ?? {});
-  const row = (
-    <DetailsRow
-      expanded={expanded}
-      icon={<Icon aria-hidden="true" className="size-3.5" />}
-      meta={
-        <span className="grid size-5 place-items-center">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-        </span>
-      }
-      onToggle={() => setExpanded((value) => !value)}
-      title={watch.label ?? `Private ${resource}`}
-    />
+  const icon = <Icon aria-hidden="true" className="size-3.5" />;
+  const title = watch.label ?? `Private ${resource}`;
+  const chevron = (
+    <span className="grid size-5 place-items-center">
+      <ChevronRight
+        aria-hidden="true"
+        className={dashboardDisclosureChevronClass}
+      />
+    </span>
+  );
+  const row = watch.url ? (
+    // The row opens the watched resource, like a linked work row. The
+    // chevron beside it shows the details.
+    <div className="flex min-w-0 items-start gap-0.5">
+      <div className="min-w-0 flex-1">
+        <DetailsRow href={watch.url} icon={icon} title={title} />
+      </div>
+      <CollapsibleTrigger
+        aria-label={`Details for ${title}`}
+        className="group grid size-8 shrink-0 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+      >
+        {chevron}
+      </CollapsibleTrigger>
+    </div>
+  ) : (
+    <DetailsRow disclosure icon={icon} meta={chevron} title={title} />
   );
-  if (!expanded) return row;
 
   return (
-    <>
+    <Collapsible className="min-w-0">
       {row}
       {/* Indent under the title: icon column, column gap, and row padding. */}
-      <div className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
+      <CollapsibleContent className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
         {watch.intent ? (
           <p className="m-0 break-words">
             <DisplayText inline text={watch.intent} />
@@ -144,8 +160,8 @@ function WatchRow(props: { watch: ConversationWatch }) {
             </span>
           </p>
         ) : null}
-      </div>
-    </>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 

package/src/client/conversations/ConversationWorkspace.tsx

@@ -11,14 +11,14 @@ import { pageCount, pageItems, PagePagination } from "../components/Pagination";
 import { ConversationHomeList } from "./ConversationHomeList";
 import { ConversationComposer } from "./ConversationComposer";
 import {
-  useCreateConversation,
   usePendingArchiveConversationUpdates,
   type PendingArchiveConversationUpdate,
-} from "./queries";
+} from "./conversationArchive";
+import { useCreateConversation } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import {
   attentionConversationIds,
-  attentionFirst,
+  pinnedAndAttentionFirst,
 } from "./conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
@@ -73,7 +73,7 @@ export function ConversationWorkspace() {
   const pagedConversations = useMemo(
     () =>
       pageItems(
-        attentionFirst(
+        pinnedAndAttentionFirst(
           conversations,
           attentionConversationIds(
             waitingConversationIds,

package/src/client/conversations/DetailsList.tsx

@@ -1,6 +1,7 @@
 import { ChevronRight } from "lucide-react";
 import { useState, type ReactNode } from "react";
 
+import { CollapsibleTrigger } from "../components/ui/collapsible";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
 
 /**
@@ -87,21 +88,20 @@ export function DetailsList<T>(props: {
 /**
  * Lay out one details list row: an icon, a title, and short trailing text on
  * the first line, then optional lines under the title. A row with `href`
- * opens that link in a new tab. A row with `onToggle` is a disclosure button
- * that shows or hides content the caller renders under it.
+ * opens that link in a new tab. A `disclosure` row is the trigger of the
+ * enclosing `Collapsible`, so it shows or hides the content under it.
  */
 export function DetailsRow(props: {
   children?: ReactNode;
-  expanded?: boolean;
+  disclosure?: boolean;
   href?: string;
   icon: ReactNode;
   meta?: ReactNode;
-  onToggle?(): void;
   title: ReactNode;
   /** Native hover text with detail that the row does not show. */
   tooltip?: string;
 }) {
-  const interactive = props.href !== undefined || props.onToggle !== undefined;
+  const interactive = props.href !== undefined || props.disclosure === true;
   const className = cn(
     "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-1.5 py-1.5 text-left text-inherit no-underline",
     interactive &&
@@ -134,17 +134,11 @@ export function DetailsRow(props: {
       </a>
     );
   }
-  if (props.onToggle) {
+  if (props.disclosure) {
     return (
-      <button
-        aria-expanded={props.expanded ?? false}
-        className={className}
-        onClick={props.onToggle}
-        title={props.tooltip}
-        type="button"
-      >
+      <CollapsibleTrigger className={className} title={props.tooltip}>
         {content}
-      </button>
+      </CollapsibleTrigger>
     );
   }
   return (

package/src/client/conversations/MemoryIcons.tsx

@@ -0,0 +1,23 @@
+import { ArrowUpRight, Lock } from "lucide-react";
+
+/** Mark a memory that only its owner can see. */
+export function PrivateMemoryIcon() {
+  return <Lock aria-label="Private" role="img" size={13} strokeWidth={1.8} />;
+}
+
+/**
+ * End a memory row that links to the memory's page. Its parent link needs
+ * the `group` class, so the arrow follows the row hover.
+ */
+export function MemoryLinkIcons(props: { private: boolean }) {
+  return (
+    <span className="flex items-center gap-1.5 pt-1 text-dashboard-text-faint">
+      {props.private ? <PrivateMemoryIcon /> : null}
+      <ArrowUpRight
+        aria-hidden="true"
+        className="transition-colors group-hover:text-dashboard-text"
+        size={14}
+      />
+    </span>
+  );
+}

package/src/client/conversations/PendingMailboxStack.tsx

@@ -42,6 +42,7 @@ import {
 } from "./TranscriptHeadingRow";
 import { SlackMark } from "./SlackMark";
 import { DisplayText } from "../display-text/DisplayText";
+import { ReviewItemChangeLabel } from "../review-desk/ReviewItemChangeRow";
 import { displayPlainText } from "../display-text/plainText";
 
 // Rows are one line each, so the stack can show five before it collapses.
@@ -349,7 +350,16 @@ function PendingRow(props: {
                 className="m-0 min-w-0 truncate font-sans text-sm leading-snug text-dashboard-text-subtle"
                 title={displayPlainText(text, mentions)}
               >
-                <DisplayText inline mentions={mentions} text={text} />
+                {props.message.reviewItemChange ? (
+                  <ReviewItemChangeLabel
+                    fallback={
+                      <DisplayText inline mentions={mentions} text={text} />
+                    }
+                    record={props.message.reviewItemChange}
+                  />
+                ) : (
+                  <DisplayText inline mentions={mentions} text={text} />
+                )}
               </p>
             ) : null}
           </>