@sentry/junior-dashboard 0.276.0 → 0.278.0

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -4,6 +4,8 @@ import {
   ArchiveRestore,
   Info,
   MessagesSquare,
+  Pin,
+  PinOff,
   ScrollText,
   Search,
   X,
@@ -28,12 +30,20 @@ export type ConversationArchiveAction = {
   pending: boolean;
 };
 
+export type ConversationPinAction = {
+  disabled: boolean;
+  error: boolean;
+  onClick(): void;
+  pinned: boolean;
+};
+
 /**
  * Show conversation actions in the `⋯` menu. On desktop the title bar shows
  * search, share, and details, so the menu leaves them out.
  */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
+  pin: ConversationPinAction;
   conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
@@ -83,6 +93,17 @@ export function ConversationHeaderActions(props: {
         />
       ) : null}
       {props.copyAction}
+      <MenuActionButton
+        disabled={props.pin.disabled}
+        label={props.pin.pinned ? "Unpin" : "Pin"}
+        onClick={props.pin.onClick}
+      >
+        {props.pin.pinned ? (
+          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        ) : (
+          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+        )}
+      </MenuActionButton>
       <ArchiveConversationButton {...props.archive} />
       {props.sentryConversationUrl ? (
         <a
@@ -158,6 +179,8 @@ function ViewModeItem(props: {
 /** Shared icon control used by conversation and subagent transcript headers. */
 export function HeaderIconButton(props: {
   children: ReactNode;
+  controls?: string;
+  expanded?: boolean;
   ref?: Ref<HTMLButtonElement>;
   label: string;
   onClick(): void;
@@ -171,6 +194,8 @@ export function HeaderIconButton(props: {
         render={
           <Button
             ref={props.ref}
+            aria-controls={props.controls}
+            aria-expanded={props.expanded}
             aria-label={props.label}
             aria-pressed={props.pressed}
             className={cn(
@@ -211,6 +236,7 @@ export function TranscriptSearchToggle(props: {
 
 function MenuActionButton(props: {
   children: ReactNode;
+  disabled?: boolean;
   label: string;
   onClick(): void;
   pressed?: boolean;
@@ -220,6 +246,7 @@ function MenuActionButton(props: {
       aria-label={props.label}
       aria-pressed={props.pressed}
       className={props.pressed ? "bg-dashboard-fill-strong" : undefined}
+      disabled={props.disabled}
       onClick={props.onClick}
       size="menu"
     >

package/src/client/conversations/ConversationHomeList.tsx

@@ -20,7 +20,7 @@ import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
-import { useArchiveConversation } from "./queries";
+import { useArchiveConversation } from "./conversationArchive";
 import { DisplayText } from "../display-text/DisplayText";
 import {
   attentionConversationIds,

package/src/client/conversations/ConversationMemories.tsx

@@ -1,5 +1,4 @@
-import { ChevronRight } from "lucide-react";
-import type { ConversationDetailReport } from "@sentry/junior/api/schema";
+import { ArrowRight, BookmarkPlus, Brain, ChevronRight } from "lucide-react";
 
 import { dashboardDisclosureChevronClass } from "../styles";
 import type {
@@ -7,6 +6,7 @@ import type {
   ConversationMemoryList,
 } from "./conversationMemory";
 import { DetailsCard } from "./DetailsList";
+import { PrivateMemoryIcon } from "./MemoryIcons";
 
 /** Count the distinct memories that a Conversation recalled and captured. */
 function conversationMemoryCounts(list: ConversationMemoryList) {
@@ -48,28 +48,38 @@ export function ConversationMemoryCard(props: {
   );
 }
 
-/**
- * Map each loaded Turn to the prompt that started it, so a memory can say
- * where it came from. A Turn starts from its last user input message.
- */
-export function turnPrompts(
-  events: ConversationDetailReport["events"] | undefined,
-): Map<string, string> {
-  const texts = new Map<string, string>();
-  const prompts = new Map<string, string>();
-  for (const { data } of events ?? []) {
-    if (data.type === "message" && data.role === "user" && data.text) {
-      texts.set(data.messageId, data.text);
-    }
-    if (data.type === "turn_lifecycle" && data.state === "started") {
-      const prompt = data.inputMessageIds
-        ?.map((id) => texts.get(id))
-        .filter((text) => text !== undefined)
-        .at(-1);
-      if (prompt) prompts.set(data.turnId, prompt);
-    }
-  }
-  return prompts;
+/** One memory with its full text, its visibility, and a jump to its Turn. */
+function MemoryCard(props: {
+  entry: ConversationMemoryEntry;
+  onSelect(entry: ConversationMemoryEntry & { turnId: string }): void;
+}) {
+  const { entry } = props;
+  const { turnId } = entry;
+  return (
+    <li className="grid overflow-hidden rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel">
+      {/* Break long URLs so the card keeps the panel width. */}
+      <p className="m-0 whitespace-pre-wrap px-3 py-2.5 text-sm leading-relaxed text-dashboard-text [overflow-wrap:anywhere]">
+        {entry.memory.content}
+      </p>
+      <div className="flex min-h-8 items-center justify-between gap-2 border-t border-dashboard-border-subtle bg-dashboard-fill-faint px-3 py-1 text-xs text-dashboard-text-muted">
+        {entry.memory.visibility === "private" ? (
+          <PrivateMemoryIcon />
+        ) : (
+          <span />
+        )}
+        {turnId ? (
+          <button
+            className="-mr-1.5 inline-flex cursor-pointer items-center gap-1 rounded-md border-0 bg-transparent px-1.5 py-1 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            onClick={() => props.onSelect({ ...entry, turnId })}
+            type="button"
+          >
+            Go to message
+            <ArrowRight aria-hidden="true" size={13} />
+          </button>
+        ) : null}
+      </div>
+    </li>
+  );
 }
 
 /**
@@ -79,52 +89,39 @@ export function turnPrompts(
 export function ConversationMemoryEntries(props: {
   entries: ConversationMemoryEntry[];
   onSelect(entry: ConversationMemoryEntry & { turnId: string }): void;
-  prompts: Map<string, string>;
 }) {
+  const groups = (["recalled", "captured"] as const)
+    .map((source) => ({
+      entries: props.entries.filter((entry) => entry.source === source),
+      source,
+    }))
+    .filter((group) => group.entries.length > 0);
   return (
-    <ol className="m-0 grid list-none gap-2 p-0">
-      {props.entries.map((entry) => {
-        const { turnId } = entry;
-        const prompt = turnId ? props.prompts.get(turnId) : undefined;
-        const source =
-          entry.source === "recalled"
-            ? prompt
-              ? `Recalled for “${prompt}”`
-              : "Recalled"
-            : prompt
-              ? `Captured after “${prompt}”`
-              : "Captured";
-        const body = (
-          <>
-            <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-              {entry.memory.content}
-            </p>
-            <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
-              <span className="min-w-0 truncate">{source}</span>
-              {entry.memory.visibility === "private" ? (
-                <span className="shrink-0">· Private</span>
-              ) : null}
-            </span>
-          </>
-        );
-        const className =
-          "grid w-full gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 text-left font-sans";
-        return (
-          <li key={`${entry.source}:${entry.memory.id}`}>
-            {turnId ? (
-              <button
-                className={`${className} cursor-pointer transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus`}
-                onClick={() => props.onSelect({ ...entry, turnId })}
-                type="button"
-              >
-                {body}
-              </button>
+    <div className="grid gap-5">
+      {groups.map((group) => (
+        <section className="grid gap-2" key={group.source}>
+          <h3 className="m-0 flex items-center gap-1.5 font-sans text-xs font-semibold text-dashboard-text">
+            {group.source === "recalled" ? (
+              <Brain aria-hidden="true" size={13} strokeWidth={1.8} />
             ) : (
-              <div className={className}>{body}</div>
+              <BookmarkPlus aria-hidden="true" size={13} strokeWidth={1.8} />
             )}
-          </li>
-        );
-      })}
-    </ol>
+            {group.source === "recalled" ? "Recalled" : "Captured"}
+            <span className="font-normal tabular-nums text-dashboard-text-muted">
+              {group.entries.length}
+            </span>
+          </h3>
+          <ol className="m-0 grid list-none gap-2 p-0">
+            {group.entries.map((entry) => (
+              <MemoryCard
+                entry={entry}
+                key={`${entry.source}:${entry.memory.id}`}
+                onSelect={props.onSelect}
+              />
+            ))}
+          </ol>
+        </section>
+      ))}
+    </div>
   );
 }

package/src/client/conversations/ConversationMeta.tsx

@@ -469,7 +469,7 @@ function SourceTask(props: {
   );
 }
 
-/** Resolve the model still running an open turn, including mid-turn handoffs. */
+/** Resolve the model that an open turn last called. */
 export function liveModelId(
   detail: ConversationDetailReport | undefined,
 ): string | undefined {
@@ -484,12 +484,7 @@ export function liveModelId(
       if (openTurns.size === 0) modelId = undefined;
       continue;
     }
-    if (openTurns.size === 0) continue;
-    if (data.type === "turn_routed" && openTurns.has(data.turnId)) {
-      modelId = data.modelId;
-      continue;
-    }
-    if (data.type === "handoff") modelId = data.modelId;
+    if (openTurns.size > 0 && event.model) modelId = event.model.modelId;
   }
   return openTurns.size > 0 ? modelId : undefined;
 }