@sentry/junior-dashboard 0.274.0 → 0.276.0

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -1,12 +1,13 @@
 import { LockKeyhole } from "lucide-react";
 
-import { ActiveIndicator } from "../components/ActiveIndicator";
+import { Spinner } from "../components/ui/spinner";
 import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
 /**
  * Render a conversation status marker. "Waiting on you" replaces every other
- * marker, then new completions take priority.
+ * marker. A running conversation shows a spinner, so it never looks like an
+ * ended one.
  */
 export function ConversationListStatusIcon(props: {
   finishedSinceSeen: boolean;
@@ -24,6 +25,10 @@ export function ConversationListStatusIcon(props: {
     );
   }
 
+  if (props.status === "active") {
+    return <Spinner aria-label="Running" className="size-3 text-emerald-300" />;
+  }
+
   if (props.finishedSinceSeen) {
     return (
       <span
@@ -40,8 +45,6 @@ export function ConversationListStatusIcon(props: {
         aria-label="Private conversation"
         className={cn(
           "size-3 shrink-0",
-          props.status === "active" &&
-            "animate-[junior-active-indicator_1.8s_ease-in-out_infinite] text-emerald-300 drop-shadow-[0_0_6px_rgba(110,231,183,0.55)] motion-reduce:animate-none",
           props.status === "failed" && "text-rose-300",
           props.status === "idle" && "text-dashboard-text-muted",
         )}
@@ -49,18 +52,20 @@ export function ConversationListStatusIcon(props: {
     );
   }
 
-  if (props.status === "active") {
-    return <ActiveIndicator className="size-1.5" />;
+  if (props.status === "failed") {
+    return (
+      <span
+        aria-label="Failed"
+        className="size-1.5 shrink-0 rounded-full bg-rose-300"
+        role="img"
+      />
+    );
   }
 
   return (
     <span
       aria-hidden="true"
-      className={cn(
-        "size-1.5 shrink-0 rounded-full",
-        props.status === "failed" && "bg-rose-300",
-        props.status === "idle" && "bg-dashboard-text-faint",
-      )}
+      className="size-1.5 shrink-0 rounded-full bg-dashboard-text-faint"
     />
   );
 }

package/src/client/conversations/ConversationMemories.tsx

@@ -1,90 +1,130 @@
-import { useQuery } from "@tanstack/react-query";
-import { Brain } from "lucide-react";
-import { z } from "zod";
+import { ChevronRight } from "lucide-react";
+import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
-import { formatMessageTimestamp } from "../format";
-import { fetchDashboardJson } from "../http";
+import { dashboardDisclosureChevronClass } from "../styles";
+import type {
+  ConversationMemoryEntry,
+  ConversationMemoryList,
+} from "./conversationMemory";
+import { DetailsCard } from "./DetailsList";
 
-const conversationMemoryListSchema = z
-  .object({
-    memories: z.array(
-      z
-        .object({
-          capturedAt: z.iso.datetime(),
-          content: z.string().min(1),
-          id: z.string().min(1),
-          kind: z.enum(["preference", "procedure", "knowledge"]),
-          visibility: z.enum(["private", "public"]),
-        })
-        .strict(),
-    ),
-  })
-  .strict();
-
-/** Load the memories captured from one Conversation. */
-export function useConversationMemories(conversationId: string) {
-  return useQuery({
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
-        conversationMemoryListSchema,
-        `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
-        signal,
-      ),
-    queryKey: ["conversation", conversationId, "memories"],
-    retry: false,
-  });
+/** Count the distinct memories that a Conversation recalled and captured. */
+function conversationMemoryCounts(list: ConversationMemoryList) {
+  const ids = (source: "captured" | "recalled") =>
+    new Set(
+      list.events
+        .filter((event) => event.source === source)
+        .flatMap((event) => event.memoryIds),
+    ).size;
+  return { captured: ids("captured"), recalled: ids("recalled") };
 }
 
-/** Show the memories captured from one Conversation. */
-export function ConversationMemories(props: { conversationId: string }) {
-  const query = useConversationMemories(props.conversationId);
+/** Show memory counts in one row that opens the full memory list. */
+export function ConversationMemoryCard(props: {
+  list: ConversationMemoryList;
+  onOpen(): void;
+}) {
+  const counts = conversationMemoryCounts(props.list);
+  const summary = [
+    counts.recalled ? `${counts.recalled} recalled` : undefined,
+    counts.captured ? `${counts.captured} captured` : undefined,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  return (
+    <DetailsCard title="Memories">
+      <button
+        className="group -mx-1.5 -my-1 flex min-h-8 w-[calc(100%+0.75rem)] items-center justify-between gap-2.5 rounded-md px-1.5 py-1.5 text-left text-sm tabular-nums text-dashboard-text 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.onOpen}
+        type="button"
+      >
+        {summary}
+        <ChevronRight
+          aria-hidden="true"
+          className={dashboardDisclosureChevronClass}
+        />
+      </button>
+    </DetailsCard>
+  );
+}
 
-  if (query.isPending) {
-    return (
-      <p className="m-0 text-sm text-dashboard-text-muted" role="status">
-        Loading memories…
-      </p>
-    );
-  }
-  if (query.error) {
-    return (
-      <p className="m-0 text-sm text-red-300/80">
-        Could not load memories from this Conversation.
-      </p>
-    );
-  }
-  if (query.data.memories.length === 0) {
-    return (
-      <div className="grid justify-items-center gap-2 py-10 text-center text-dashboard-text-muted">
-        <Brain aria-hidden="true" className="size-5 opacity-60" />
-        <p className="m-0 text-sm">No memories were captured.</p>
-      </div>
-    );
+/**
+ * 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;
+}
 
+/**
+ * List every memory that a Conversation recalled or captured, with its full
+ * text. Selecting one shows it in the transcript.
+ */
+export function ConversationMemoryEntries(props: {
+  entries: ConversationMemoryEntry[];
+  onSelect(entry: ConversationMemoryEntry & { turnId: string }): void;
+  prompts: Map<string, string>;
+}) {
   return (
-    <ol className="m-0 grid list-none gap-3 p-0">
-      {query.data.memories.map((memory) => (
-        <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-3"
-          key={memory.id}
-        >
-          <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-            {memory.content}
-          </p>
-          <div className="flex flex-wrap items-center gap-1.5 text-xs tabular-nums text-dashboard-text-muted">
-            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
-              {memory.kind}
-            </span>
-            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
-              {memory.visibility}
+    <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>
-            <time className="ml-auto" dateTime={memory.capturedAt}>
-              {formatMessageTimestamp(Date.parse(memory.capturedAt), true)}
-            </time>
-          </div>
-        </li>
-      ))}
+          </>
+        );
+        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={className}>{body}</div>
+            )}
+          </li>
+        );
+      })}
     </ol>
   );
 }

package/src/client/conversations/ConversationMeta.tsx

@@ -6,11 +6,10 @@ import {
   CircleX,
   GitMerge,
   GitPullRequest,
-  Globe2,
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore, type ReactNode } from "react";
 import { Link } from "react-router";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
@@ -30,7 +29,6 @@ import {
   TooltipTitle,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { MetricList, type MetricListItem } from "../components/Metric";
 import { cn, dashboardInlineLinkClass } from "../styles";
 import {
   CostMetric,
@@ -73,35 +71,24 @@ export function PendingAuthorization(props: {
   );
 }
 
-/** Show whether the selected conversation is public or private. */
+/**
+ * Mark a private conversation with a lock icon. Public is the default, so it
+ * gets no marker, which keeps the title bar short.
+ */
 export function ConversationPrivacyChip(props: {
   visibility: Conversation["visibility"];
 }) {
-  if (!props.visibility) return null;
-  const isPublic = props.visibility === "public";
-  const Icon = isPublic ? Globe2 : LockKeyhole;
-  const shortLabel = isPublic ? "Public" : "Private";
-  const fullLabel = isPublic ? "Public conversation" : "Private conversation";
-  const detail = isPublic
-    ? "Anyone in this workspace can see this transcript."
-    : "Only members of this conversation can see this transcript.";
+  if (props.visibility !== "private") return null;
+  const label =
+    "Private conversation. Only members of this conversation can see this transcript.";
   return (
     <span
-      className={
-        isPublic
-          ? "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-emphasis bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-          : "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-      }
+      className="inline-flex items-center text-dashboard-text-muted"
       role="note"
-      title={`${fullLabel}. ${detail}`}
+      title={label}
     >
-      <Icon aria-hidden="true" className="size-3 shrink-0" />
-      <span aria-hidden="true" className="truncate">
-        {shortLabel}
-      </span>
-      <span className="sr-only">
-        {fullLabel}. {detail}
-      </span>
+      <LockKeyhole aria-hidden="true" className="size-3.5 shrink-0" />
+      <span className="sr-only">{label}</span>
     </span>
   );
 }
@@ -507,52 +494,95 @@ export function liveModelId(
   return openTurns.size > 0 ? modelId : undefined;
 }
 
-/** True when runtime stats have content for the requested presentation. */
+/** True when runtime stats have content to show in details. */
 export function hasConversationStats(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }): boolean {
   return conversationStatItems(props).length > 0;
 }
 
-type ConversationStatItem = MetricListItem & { label: string };
+type ConversationStatItem = {
+  content: ReactNode;
+  key: string;
+  label: string;
+  /** Shown below `md` only, where the title bar is hidden. */
+  mobileOnly?: boolean;
+};
 
-/**
- * Render runtime, source, token, and cost metadata. The compact variant is one
- * line under the conversation title. The full variant is a labeled list for
- * conversation details.
- */
+/** Render runtime, source, token, and cost metadata as a labeled list. */
 export function ConversationStats(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }) {
   const stats = conversationStatItems(props);
   if (stats.length === 0) return null;
+  return (
+    <dl className="m-0 grid min-w-0 gap-2 text-xs leading-snug">
+      {stats.map((item) => (
+        <div
+          className={cn(
+            "flex min-w-0 items-baseline justify-between gap-4",
+            item.mobileOnly && "md:hidden",
+          )}
+          key={item.key}
+        >
+          <dt className="shrink-0 text-dashboard-text-muted">{item.label}</dt>
+          <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
+            {item.content}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
 
-  if ((props.variant ?? "full") === "full") {
-    return (
-      <dl className="m-0 grid min-w-0 gap-2 text-xs leading-snug">
-        {stats.map((item) => (
-          <div
-            className="flex min-w-0 items-baseline justify-between gap-4"
-            key={item.key}
-          >
-            <dt className="shrink-0 text-dashboard-text-muted">{item.label}</dt>
-            <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
-              {item.content}
-            </dd>
-          </div>
-        ))}
-      </dl>
-    );
-  }
+/**
+ * Name where a conversation runs, linked when the source has a URL. Returns
+ * null without a location, so callers can drop the slot around it.
+ */
+export function conversationLocation(
+  conversation: Conversation | undefined,
+  detail: ConversationDetailReport | undefined,
+): ReactNode {
+  if (!conversation) return null;
+  const location = slackLocationLabel(conversation, { includeId: false });
+  if (!location) return null;
+  return (
+    <LocationLink
+      label={location}
+      locationUrl={detail?.locationUrl ?? conversation.locationUrl}
+    />
+  );
+}
 
+/**
+ * Show the estimated cost of a conversation with its breakdown tooltip.
+ * Returns null until there is a cost or a live run to show.
+ */
+export function conversationCost(
+  conversation: Conversation | undefined,
+  detail: ConversationDetailReport | undefined,
+  tooltipPlacement?: "above" | "below",
+): ReactNode {
+  if (!conversation) return null;
+  const costSummary = summarizeCost(
+    detail?.cumulativeUsage ?? conversation.cumulativeUsage,
+  );
+  const auxiliaryCosts = detail?.auxiliaryCosts ?? conversation.auxiliaryCosts;
+  const live = (detail?.status ?? conversation.status) === "active";
+  if (!costSummary && !auxiliaryCosts && !live) return null;
   return (
-    <MetricList
-      className="break-words text-xs leading-[1.45] text-dashboard-text-muted"
-      items={stats}
+    <CostMetric
+      auxiliaryCosts={auxiliaryCosts}
+      childAgentTotals={
+        detail?.childAgentTotals ?? conversation.childAgentTotals
+      }
+      live={live}
+      liveModelId={liveModelId(detail)}
+      modelUsage={detail?.modelUsage}
+      summary={costSummary}
+      tooltipPlacement={tooltipPlacement}
     />
   );
 }
@@ -560,10 +590,8 @@ export function ConversationStats(props: {
 function conversationStatItems(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }): ConversationStatItem[] {
   if (!props.conversation) return [];
-  const variant = props.variant ?? "full";
   const completeDetail = props.detail?.previousCursor
     ? undefined
     : props.detail;
@@ -571,12 +599,6 @@ function conversationStatItems(props: {
     props.detail?.cumulativeUsage ?? props.conversation.cumulativeUsage;
   const tokenSummary =
     summarizeModelUsage(props.detail?.modelUsage) ?? summarizeUsage(usage);
-  const costSummary = summarizeCost(usage);
-  const location = slackLocationLabel(props.conversation, {
-    includeId: false,
-  });
-  const locationUrl =
-    props.detail?.locationUrl ?? props.conversation.locationUrl;
   const durationLabel = formatConversationDuration(props.conversation);
   const live = (props.detail?.status ?? props.conversation.status) === "active";
   const activeModelId = liveModelId(props.detail);
@@ -584,22 +606,26 @@ function conversationStatItems(props: {
   const childAgentTotals =
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
+  const location = conversationLocation(props.conversation, props.detail);
+  const cost = conversationCost(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
+    // The desktop title bar shows the location and cost. Mobile hides that bar.
     location
       ? {
-          content: <LocationLink label={location} locationUrl={locationUrl} />,
+          content: location,
           key: "location",
           label: "Location",
+          mobileOnly: true,
         }
       : undefined,
-    variant === "full" && sourceTask
+    sourceTask
       ? {
           content: <SourceTask sourceTask={sourceTask} />,
           key: "source-task",
           label: "Source",
         }
       : undefined,
-    variant === "full" && lastActivityAt
+    lastActivityAt
       ? {
           content: (
             <time
@@ -635,7 +661,6 @@ function conversationStatItems(props: {
       ? {
           content: (
             <TokenMetric
-              detailsHint={variant === "compact"}
               childAgentTotals={childAgentTotals}
               compactionCount={
                 completeDetail
@@ -654,27 +679,12 @@ function conversationStatItems(props: {
           label: "Tokens",
         }
       : undefined,
-    costSummary ||
-    props.detail?.auxiliaryCosts ||
-    props.conversation.auxiliaryCosts ||
-    live
+    cost
       ? {
-          content: (
-            <CostMetric
-              detailsHint={variant === "compact"}
-              auxiliaryCosts={
-                props.detail?.auxiliaryCosts ??
-                props.conversation.auxiliaryCosts
-              }
-              childAgentTotals={childAgentTotals}
-              live={live}
-              liveModelId={activeModelId}
-              modelUsage={props.detail?.modelUsage}
-              summary={costSummary}
-            />
-          ),
+          content: cost,
           key: "cost",
           label: "Cost",
+          mobileOnly: true,
         }
       : undefined,
     childAgentTotals

package/src/client/conversations/ConversationOverflowMenu.tsx

@@ -0,0 +1,59 @@
+import { Ellipsis } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode, type Ref } from "react";
+
+import { HeaderIconButton } from "./ConversationHeaderActions";
+
+/**
+ * Show the conversation `⋯` button and its menu. The menu closes on an
+ * outside click or Escape. `children` gets `close` so an item can close the
+ * menu before it acts.
+ */
+export function ConversationOverflowMenu(props: {
+  buttonRef?: Ref<HTMLButtonElement>;
+  children(close: () => void): ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function closeOnOutsideClick(event: PointerEvent) {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
+    }
+
+    // Capture runs before the details panel's document listener, and
+    // preventDefault tells it that this Escape is taken.
+    function closeOnEscape(event: KeyboardEvent) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      setOpen(false);
+    }
+
+    document.addEventListener("pointerdown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape, true);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape, true);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <HeaderIconButton
+        ref={props.buttonRef}
+        label={open ? "Close conversation menu" : "Conversation menu"}
+        onClick={() => setOpen((value) => !value)}
+        pressed={open}
+        tooltipDisabled={open}
+      >
+        <Ellipsis aria-hidden="true" size={18} strokeWidth={2} />
+      </HeaderIconButton>
+      {open ? (
+        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-dashboard-border-strong bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
+          {props.children(() => setOpen(false))}
+        </div>
+      ) : null}
+    </div>
+  );
+}