@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/conversations/ConversationDetails.tsx

@@ -1,11 +1,11 @@
-import { ChevronRight } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import { DetailsPanel, useDetailsPanel } from "../components/DetailsPanel";
 import { formatRelativeTime, formatTime } from "../format";
 import { ConversationReviewItems } from "../review-desk/ConversationReviewItems";
-import { dashboardDisclosureChevronClass } from "../styles";
+import { Button } from "../components/ui/button";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   ConversationChildAgents,
@@ -16,9 +16,14 @@ import {
   type ConversationLink,
 } from "./ConversationLinkedWork";
 import {
-  ConversationMemories,
-  useConversationMemories,
+  ConversationMemoryCard,
+  ConversationMemoryEntries,
 } from "./ConversationMemories";
+import {
+  conversationMemoryEntries,
+  useConversationMemoryState,
+  type ConversationMemoryEntry,
+} from "./conversationMemory";
 import {
   ConversationWatches,
   useConversationWatches,
@@ -34,6 +39,8 @@ type Brief = NonNullable<ConversationDetailReport["brief"]>;
  * it, and what it cost. Each fact shows here only, not in the title bar.
  */
 export function ConversationDetails(props: {
+  /** Viewer's auto-archive control. Null for non-participants. */
+  autoArchive: ReactNode;
   brief?: Brief;
   conversationId: string;
   /** True when a sidebar review chip opened details. */
@@ -43,15 +50,60 @@ export function ConversationDetails(props: {
   onClose(): void;
   /** Open one child agent transcript. A details sheet closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
+  /** Show one memory where its Turn recalled or captured it. */
+  onSelectMemory(entry: ConversationMemoryEntry & { turnId: string }): void;
   overview: ReactNode;
   usage: ReactNode;
 }) {
   const panel = useDetailsPanel();
-  const memories = useConversationMemories(props.conversationId).data?.memories;
+  const memoryList = useConversationMemoryState()?.list;
+  const [memoriesOpen, setMemoriesOpen] = useState(false);
+  const [memoryConversationId, setMemoryConversationId] = useState(
+    props.conversationId,
+  );
+  if (memoryConversationId !== props.conversationId) {
+    setMemoryConversationId(props.conversationId);
+    setMemoriesOpen(false);
+  }
   const agents = useConversationChildAgents(props.conversationId).data?.agents;
   const watches =
     useConversationWatches(props.conversationId).data?.watches ?? [];
 
+  if (memoriesOpen && memoryList) {
+    // The list replaces details in place, so nothing stacks over the panel.
+    return (
+      <DetailsPanel
+        label="Conversation details"
+        onClose={props.onClose}
+        title={
+          <div className="-ml-2 flex min-w-0 items-center gap-1">
+            <Button
+              aria-label="Back to details"
+              onClick={() => setMemoriesOpen(false)}
+              size="icon"
+            >
+              <ArrowLeft aria-hidden="true" size={15} />
+            </Button>
+            <h2 className="m-0 truncate font-sans text-sm font-semibold text-dashboard-text">
+              Memories
+            </h2>
+          </div>
+        }
+      >
+        <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3">
+          <ConversationMemoryEntries
+            entries={conversationMemoryEntries(memoryList)}
+            onSelect={(entry) => {
+              // The transcript sits under a details sheet. Close it first.
+              if (!panel) props.onClose();
+              props.onSelectMemory(entry);
+            }}
+          />
+        </div>
+      </DetailsPanel>
+    );
+  }
+
   return (
     <DetailsPanel
       label="Conversation details"
@@ -114,6 +166,10 @@ export function ConversationDetails(props: {
             ) : null}
           </DetailsCard>
         ) : null}
+        {/* Linked work decides when auto-archive runs, so it follows. */}
+        {props.autoArchive != null ? (
+          <DetailsCard>{props.autoArchive}</DetailsCard>
+        ) : null}
         {agents?.length ? (
           <DetailsCard count={agents.length} title="Subagents">
             <ConversationChildAgents
@@ -135,38 +191,13 @@ export function ConversationDetails(props: {
         {props.identity != null ? (
           <DetailsCard title="Participants">{props.identity}</DetailsCard>
         ) : null}
-        {memories?.length ? (
-          <DetailsCard count={memories.length} title="Memories">
-            <Disclosure label="memories">
-              <ConversationMemories conversationId={props.conversationId} />
-            </Disclosure>
-          </DetailsCard>
+        {memoryList?.events.length ? (
+          <ConversationMemoryCard
+            list={memoryList}
+            onOpen={() => setMemoriesOpen(true)}
+          />
         ) : null}
       </div>
     </DetailsPanel>
   );
 }
-
-/** Hide long, rarely read content behind one show/hide row. */
-function Disclosure(props: { children: ReactNode; label: string }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <div className="grid min-w-0 gap-2">
-      <button
-        aria-expanded={open}
-        className="group -mx-1.5 -my-1 flex min-h-8 items-center gap-2.5 rounded-md px-1.5 py-1.5 text-left text-xs font-medium leading-4 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"
-        onClick={() => setOpen((value) => !value)}
-        type="button"
-      >
-        <span className="grid size-5 shrink-0 place-items-center">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-        </span>
-        {open ? `Hide ${props.label}` : `Show ${props.label}`}
-      </button>
-      {open ? props.children : null}
-    </div>
-  );
-}

package/src/client/conversations/ConversationHeader.tsx

@@ -14,20 +14,24 @@ import {
   HeaderIconButton,
   TranscriptSearchToggle,
   type ConversationArchiveAction,
+  type ConversationPinAction,
 } from "./ConversationHeaderActions";
 import { ConversationOverflowMenu } from "./ConversationOverflowMenu";
 import { ShareConversationButton } from "./ShareConversationButton";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 /**
- * Show the conversation title bar: where it runs, the title, and actions.
- * Run facts, linked work, and the Brief live in Conversation details.
+ * Show the conversation title bar: where it runs, the title, its cost, and
+ * actions. Other run facts, linked work, and the Brief live in Conversation
+ * details.
  */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
   /** A `menu` layout copy action for the `⋯` menu. */
   copyAction?: ReactNode;
+  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
+  cost?: ReactNode;
   archive: ConversationArchiveAction;
   conversationId: string;
   detailsOpen: boolean;
@@ -41,6 +45,7 @@ export function ConversationHeader(props: {
   location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
+  pin: ConversationPinAction;
   privacy: ReactNode;
   search: string;
   sentryConversationUrl?: string;
@@ -89,6 +94,7 @@ export function ConversationHeader(props: {
     <ConversationHeaderActions
       archive={props.archive}
       conversationId={props.conversationId}
+      pin={props.pin}
       copyAction={props.copyAction}
       detailsOpen={detailsOpen}
       onDetailsClick={() => {
@@ -113,6 +119,7 @@ export function ConversationHeader(props: {
   const showMobileHeader =
     searchOpenVisible ||
     props.archive.error ||
+    props.pin.error ||
     Boolean(props.linkedWork) ||
     Boolean(props.forks) ||
     Boolean(props.agentTree);
@@ -179,6 +186,11 @@ export function ConversationHeader(props: {
             <span className="shrink-0">{props.privacy}</span>
           </div>
           <div className="flex shrink-0 items-center gap-0.5">
+            {props.cost ? (
+              <span className="mr-2 text-xs tabular-nums text-dashboard-text-muted">
+                {props.cost}
+              </span>
+            ) : null}
             {props.view === "raw" ? (
               // Event log is a debug view reached from the menu. Say which
               // view this is, and give one click back.
@@ -251,6 +263,11 @@ export function ConversationHeader(props: {
             Could not update archive state.
           </div>
         ) : null}
+        {props.pin.error ? (
+          <div className="px-4 pb-3 text-xs text-red-300 md:px-7">
+            Could not update pin.
+          </div>
+        ) : null}
       </header>
     </>
   );

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
@@ -211,6 +232,7 @@ export function TranscriptSearchToggle(props: {
 
 function MenuActionButton(props: {
   children: ReactNode;
+  disabled?: boolean;
   label: string;
   onClick(): void;
   pressed?: boolean;
@@ -220,6 +242,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/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,127 @@
-import { useQuery } from "@tanstack/react-query";
-import { Brain } from "lucide-react";
-import { z } from "zod";
+import { ArrowRight, BookmarkPlus, Brain, ChevronRight } from "lucide-react";
 
-import { formatMessageTimestamp } from "../format";
-import { fetchDashboardJson } from "../http";
+import { dashboardDisclosureChevronClass } from "../styles";
+import type {
+  ConversationMemoryEntry,
+  ConversationMemoryList,
+} from "./conversationMemory";
+import { DetailsCard } from "./DetailsList";
+import { PrivateMemoryIcon } from "./MemoryIcons";
 
-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.
+/** 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>
-    );
-  }
-  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 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>
+  );
+}
 
+/**
+ * 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;
+}) {
+  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-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}
+    <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} />
+            ) : (
+              <BookmarkPlus aria-hidden="true" size={13} strokeWidth={1.8} />
+            )}
+            {group.source === "recalled" ? "Recalled" : "Captured"}
+            <span className="font-normal tabular-nums text-dashboard-text-muted">
+              {group.entries.length}
             </span>
-            <time className="ml-auto" dateTime={memory.capturedAt}>
-              {formatMessageTimestamp(Date.parse(memory.capturedAt), true)}
-            </time>
-          </div>
-        </li>
+          </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>
       ))}
-    </ol>
+    </div>
   );
 }