@sentry/junior-dashboard 0.244.0 → 0.246.0

package/src/client/components/SegmentedTabs.tsx

@@ -19,11 +19,12 @@ export function segmentedTabClass(selected: boolean): string {
   );
 }
 
-/** Switch between related panels with equal-width tabs and keyboard navigation. */
+/** Switch between related panels. Tabs share the row equally on wide screens. */
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
   label: string;
-  items: readonly { label: string; value: Value }[];
+  /** `count` is the number of entries in the panel. Zero and unknown counts are hidden. */
+  items: readonly { count?: number; label: string; value: Value }[];
   onChange(value: NoInfer<Value>): void;
   value: NoInfer<Value>;
 }) {
@@ -33,11 +34,7 @@ export function SegmentedTabs<const Value extends string>(props: {
     <div className="grid min-w-0 gap-4">
       <div
         aria-label={props.label}
-        className={cn(
-          "grid auto-cols-fr grid-flow-col",
-          segmentedTabsFrameClass,
-          segmentedTabsInsetClass,
-        )}
+        className={cn("flex", segmentedTabsFrameClass, segmentedTabsInsetClass)}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -45,7 +42,7 @@ export function SegmentedTabs<const Value extends string>(props: {
             aria-controls={`${id}-panel`}
             aria-selected={props.value === item.value}
             className={cn(
-              "min-w-0",
+              "inline-flex min-w-0 flex-auto items-center justify-center gap-1.5 sm:flex-1",
               segmentedTabClass(props.value === item.value),
             )}
             id={`${id}-${item.value}`}
@@ -80,7 +77,12 @@ export function SegmentedTabs<const Value extends string>(props: {
             tabIndex={props.value === item.value ? 0 : -1}
             type="button"
           >
-            {item.label}
+            <span className="truncate">{item.label}</span>
+            {item.count ? (
+              <span className="min-w-5 shrink-0 rounded-full bg-dashboard-fill-strong px-1.5 text-center text-xs font-semibold leading-5 tabular-nums">
+                {item.count.toLocaleString("en-US")}
+              </span>
+            ) : null}
           </button>
         ))}
       </div>

package/src/client/components/layout/PageHeader.tsx

@@ -4,16 +4,27 @@ import {
   TimeRangeSelector,
   type TimeRangeDays,
 } from "../controls/TimeRangeSelector";
+import { useDocumentTitle } from "../../documentTitle";
 
-/** Render a spacious analytics page heading with optional controls. */
+/**
+ * Render a spacious analytics page heading with optional controls.
+ *
+ * Also names the browser tab after the page. Pass `documentTitle` when the tab
+ * needs more context than the visible heading.
+ */
 export function PageHeader(props: {
   actions?: ReactNode;
   description: ReactNode;
+  documentTitle?: string;
   onRangeChange?(value: TimeRangeDays): void;
   range?: TimeRangeDays;
   rangeOptions?: TimeRangeDays[];
   title: ReactNode;
 }) {
+  useDocumentTitle(
+    props.documentTitle ??
+      (typeof props.title === "string" ? props.title : undefined),
+  );
   const rangeActions =
     props.range !== undefined && props.onRangeChange ? (
       <TimeRangeSelector

package/src/client/conversations/ConversationAgentTree.tsx

@@ -0,0 +1,42 @@
+import { Bot, ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import type { ConversationAgentTreeNode } from "@sentry/junior/api/schema";
+
+import { conversationPath } from "./conversationRoutes";
+
+/**
+ * Show the parents of a child Conversation, root first. The page title already
+ * names this agent, so the last node is not shown. Root Conversations have no
+ * tree.
+ */
+export function ConversationAgentTree(props: {
+  nodes: readonly ConversationAgentTreeNode[];
+}) {
+  return (
+    <nav
+      aria-label="Agent tree"
+      className="flex min-w-0 items-center gap-1.5 text-xs leading-snug text-dashboard-text-muted"
+    >
+      <Bot aria-hidden="true" className="shrink-0 text-cyan-300" size={12} />
+      <ol className="m-0 flex min-w-0 list-none items-center gap-1 p-0">
+        {props.nodes.slice(0, -1).map((node, index) => (
+          <li
+            className="inline-flex min-w-0 items-center gap-1"
+            key={node.conversationId}
+          >
+            {index > 0 ? (
+              <ChevronRight aria-hidden="true" className="shrink-0" size={12} />
+            ) : null}
+            <Link
+              className="min-w-0 max-w-[16rem] truncate font-medium text-dashboard-text no-underline underline-offset-2 hover:underline"
+              title={node.label}
+              to={conversationPath(node.conversationId)}
+            >
+              {node.label}
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/src/client/conversations/ConversationChildAgents.tsx

@@ -1,42 +1,65 @@
 import { useQuery } from "@tanstack/react-query";
-import { Bot } from "lucide-react";
-import { Link } from "react-router";
+import { Bot, CircleAlert, LockKeyhole } from "lucide-react";
 import {
   conversationChildAgentsReportSchema,
   type ConversationChildAgent,
 } from "@sentry/junior/api/schema";
 
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
-import { formatMessageTimestamp } from "../format";
+import {
+  formatConversationCostTotal,
+  formatRelativeTime,
+  formatRuntime,
+  formatTime,
+  formatUsageTotal,
+} from "../format";
 import { fetchDashboardJson } from "../http";
-import { conversationPath } from "./conversationRoutes";
+import { cn } from "../styles";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-const statusTone: Record<ConversationChildAgent["status"], StatusChipTone> = {
+const statusTones: Partial<Record<string, StatusChipTone>> = {
+  active: "info",
   blocked: "warning",
   completed: "success",
+  error: "danger",
   failed: "danger",
   paused: "info",
-  pending: "neutral",
   running: "info",
-  stopped: "neutral",
 };
 
-/** Load and show the child agents of one Conversation with runtime status. */
-export function ConversationChildAgents(props: {
-  conversationId: string;
-  /** Called before a child link leaves the current Conversation. */
-  onNavigate(): void;
-}) {
-  const query = useQuery({
+/** Pick the status tone for a child agent, its transcript row, or its detail. */
+export function subagentStatusTone(status: string): StatusChipTone {
+  return statusTones[status] ?? "neutral";
+}
+
+const errorToneClass: Partial<Record<StatusChipTone, string>> = {
+  danger: "text-rose-200/85",
+  warning: "text-amber-200/85",
+};
+
+/** Load the child agents of one Conversation with runtime status. */
+export function useConversationChildAgents(conversationId: string) {
+  return useQuery({
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         conversationChildAgentsReportSchema,
-        `/api/conversations/${encodeURIComponent(props.conversationId)}/agents`,
+        `/api/conversations/${encodeURIComponent(conversationId)}/agents`,
         signal,
       ),
-    queryKey: ["conversation", props.conversationId, "agents"],
+    queryKey: ["conversation", conversationId, "agents"],
     retry: false,
   });
+}
+
+/**
+ * Show the child agents of one Conversation with runtime status. A row opens
+ * that child's transcript.
+ */
+export function ConversationChildAgents(props: {
+  conversationId: string;
+  onOpenAgent(target: SubagentTranscriptTarget): void;
+}) {
+  const query = useConversationChildAgents(props.conversationId);
 
   if (query.isPending) {
     return (
@@ -62,51 +85,104 @@ export function ConversationChildAgents(props: {
   }
 
   return (
-    <ol aria-label="Subagents" className="m-0 grid list-none gap-3 p-0">
+    <ol aria-label="Subagents" className="m-0 grid list-none gap-2 p-0">
       {query.data.agents.map((agent) => (
-        <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-3"
-          key={agent.conversationId}
-        >
-          <div className="flex min-w-0 flex-wrap items-center gap-2">
-            <Link
-              className="min-w-0 truncate font-mono text-xs font-semibold text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-              onClick={props.onNavigate}
-              to={conversationPath(agent.conversationId)}
-            >
-              {agent.redacted ? "Private subagent" : (agent.name ?? "agent")}
-            </Link>
-            <StatusChip
-              className="ml-auto"
-              size="compact"
-              tone={statusTone[agent.status]}
-            >
-              {agent.status}
-            </StatusChip>
-          </div>
-          {agent.title ? (
-            <p className="m-0 break-words text-sm font-semibold text-dashboard-text">
-              {agent.title}
-            </p>
-          ) : null}
-          {agent.task ? (
-            <p className="m-0 line-clamp-4 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-              {agent.task}
-            </p>
-          ) : null}
-          {agent.error ? (
-            <p className="m-0 whitespace-pre-wrap break-words text-xs leading-relaxed text-dashboard-text-muted">
-              {agent.error}
-            </p>
-          ) : null}
-          <time
-            className="font-mono text-xs text-dashboard-text-muted"
-            dateTime={agent.updatedAt}
-          >
-            {formatMessageTimestamp(Date.parse(agent.updatedAt), true)}
-          </time>
+        <li key={agent.conversationId}>
+          <ChildAgentRow agent={agent} onOpen={props.onOpenAgent} />
         </li>
       ))}
     </ol>
   );
 }
+
+/**
+ * Show who ran, what it was asked to do, and what it cost. The row text is the
+ * accessible name, so status, title, task, and error stay audible.
+ */
+function ChildAgentRow(props: {
+  agent: ConversationChildAgent;
+  onOpen(target: SubagentTranscriptTarget): void;
+}) {
+  const { agent } = props;
+  const tone = subagentStatusTone(agent.status);
+  const task = agent.task?.trim();
+  const headline = agent.title ?? task;
+  // A title is often a short form of the task. Skip the task when it adds nothing.
+  const detail = agent.title && task && task !== agent.title ? task : undefined;
+  const runtime = formatRuntime(agent.cumulativeDurationMs);
+  const stats = [
+    formatUsageTotal(agent.cumulativeUsage),
+    formatConversationCostTotal(agent.cumulativeUsage, agent.auxiliaryCosts),
+    runtime ? `${runtime} runtime` : "",
+  ].filter(Boolean);
+
+  return (
+    <button
+      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis 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({
+          conversationId: agent.conversationId,
+          ...(agent.redacted
+            ? undefined
+            : { label: agent.title ?? agent.name }),
+          status: agent.status,
+        })
+      }
+      type="button"
+    >
+      <span className="flex min-w-0 items-center gap-2 text-xs">
+        {agent.redacted ? (
+          <span className="flex min-w-0 items-center gap-1.5 text-dashboard-text-muted">
+            <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
+            Private subagent
+          </span>
+        ) : (
+          <span className="min-w-0 truncate font-mono text-dashboard-text-muted">
+            {agent.name ?? "subagent"}
+          </span>
+        )}
+        <StatusChip className="ml-auto shrink-0" size="compact" tone={tone}>
+          {agent.status}
+        </StatusChip>
+        <time
+          className="shrink-0 text-dashboard-text-faint"
+          dateTime={agent.updatedAt}
+          title={`Updated ${formatTime(agent.updatedAt, {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })}`}
+        >
+          {formatRelativeTime(agent.updatedAt)}
+        </time>
+      </span>
+      {headline ? (
+        <span className="line-clamp-2 break-words text-sm font-semibold leading-snug text-dashboard-text">
+          {headline}
+        </span>
+      ) : null}
+      {detail ? (
+        <span className="line-clamp-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-muted">
+          {detail}
+        </span>
+      ) : null}
+      {agent.error ? (
+        <span
+          className={cn(
+            "flex min-w-0 items-start gap-1.5 text-xs leading-relaxed",
+            errorToneClass[tone] ?? "text-dashboard-text-muted",
+          )}
+        >
+          <CircleAlert aria-hidden="true" className="mt-0.5 size-3 shrink-0" />
+          <span className="line-clamp-3 min-w-0 whitespace-pre-wrap break-words">
+            {agent.error}
+          </span>
+        </span>
+      ) : null}
+      {stats.length > 0 ? (
+        <span className="block font-mono text-xs tabular-nums text-dashboard-text-muted">
+          {stats.join(" · ")}
+        </span>
+      ) : null}
+    </button>
+  );
+}

package/src/client/conversations/ConversationComposer.tsx

@@ -10,7 +10,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
-import { ImagePlus, Send } from "lucide-react";
+import { ImagePlus, Send, Square } from "lucide-react";
 
 import { Button } from "../components/Button";
 import { useDashboardOnline } from "../connection";
@@ -78,6 +78,12 @@ type ConversationComposerProps = {
     images?: InputImage[],
   ): Promise<void>;
   onSubmitStart?: () => void;
+  /**
+   * Stop the active Turn. Present only while a Turn can be stopped. Resolves
+   * with queued text that the stop removed, which returns to the draft.
+   */
+  onStop?: () => Promise<string | undefined>;
+  stopPending?: boolean;
 };
 
 /** Render the dashboard message composer for a new or existing conversation. */
@@ -115,6 +121,7 @@ export const ConversationComposer = memo(function ConversationComposer(
   });
   // Blocks same-tick double fire. For create restore, also blocks until settle.
   const submittingRef = useRef(false);
+  const stoppingRef = useRef(false);
   // Monotonic token so a late failed create never restores over a newer submit.
   const submitTokenRef = useRef(0);
   const sendLocked =
@@ -304,6 +311,30 @@ export const ConversationComposer = memo(function ConversationComposer(
     }
   };
 
+  // Put queued text back ahead of anything the reader already typed.
+  const stopTurn = async () => {
+    if (!props.onStop || stoppingRef.current) return;
+    stoppingRef.current = true;
+    let restored: string | undefined;
+    try {
+      restored = await props.onStop();
+    } catch {
+      // The parent owns the stop error message.
+      return;
+    } finally {
+      stoppingRef.current = false;
+    }
+    if (!restored) return;
+    const current = draftRef.current.text;
+    const next: ConversationDraft = {
+      ...draftRef.current,
+      text: current.trim() ? `${restored}\n${current}` : restored,
+    };
+    replaceMessage(next);
+    storeDraft(storageKey, next);
+    textareaRef.current?.focus({ preventScroll: true });
+  };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (
       event.key === "Enter" &&
@@ -317,20 +348,12 @@ export const ConversationComposer = memo(function ConversationComposer(
 
   return (
     <div className="grid min-w-0 gap-1.5">
-      {!online || props.error || imageError ? (
+      {props.error || imageError ? (
         <div
           aria-live="polite"
-          className={
-            !online
-              ? "min-w-0 font-mono text-xs leading-relaxed text-amber-100/80"
-              : "min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
-          }
+          className="min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
         >
-          {!online
-            ? images.length
-              ? "Connect to send. Image drafts stay here until you leave."
-              : "Connect to send. Your draft is saved."
-            : (imageError ?? props.error)}
+          {imageError ?? props.error}
         </div>
       ) : null}
       <form
@@ -451,29 +474,39 @@ export const ConversationComposer = memo(function ConversationComposer(
               </div>
             )}
           </div>
-          <Button
-            aria-label={sendLocked ? "Sending message" : props.submitLabel}
-            className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
-            disabled={
-              (!canSend && !images.length) ||
-              !online ||
-              sendLocked ||
-              readingImages
-            }
-            title={
-              !online
-                ? "Connect to send"
-                : sendLocked
-                  ? "Sending message"
-                  : props.submitLabel
-            }
-            type="submit"
-          >
-            <Send aria-hidden="true" size={14} />
-            <span className="hidden md:inline">
-              {sendLocked ? "Sending…" : props.submitLabel}
-            </span>
-          </Button>
+          <div className="flex shrink-0 items-center gap-2">
+            {props.onStop ? (
+              <Button
+                aria-label={props.stopPending ? "Stopping" : "Stop"}
+                className="rounded-lg font-sans"
+                disabled={props.stopPending || !online}
+                onClick={() => void stopTurn()}
+                title="Stop Junior"
+              >
+                <Square aria-hidden="true" fill="currentColor" size={12} />
+                <span className="hidden md:inline">
+                  {props.stopPending ? "Stopping…" : "Stop"}
+                </span>
+              </Button>
+            ) : null}
+            <Button
+              aria-label={sendLocked ? "Sending message" : props.submitLabel}
+              className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
+              disabled={
+                (!canSend && !images.length) ||
+                !online ||
+                sendLocked ||
+                readingImages
+              }
+              title={sendLocked ? "Sending message" : props.submitLabel}
+              type="submit"
+            >
+              <Send aria-hidden="true" size={14} />
+              <span className="hidden md:inline">
+                {sendLocked ? "Sending…" : props.submitLabel}
+              </span>
+            </Button>
+          </div>
         </div>
       </form>
     </div>

package/src/client/conversations/ConversationDetailsDrawer.tsx

@@ -5,15 +5,18 @@ import { formatRelativeTime, formatTime } from "../format";
 import { ButtonLink } from "../components/Button";
 import { Drawer } from "../components/Drawer";
 import { SegmentedTabs } from "../components/SegmentedTabs";
-import { ConversationChildAgents } from "./ConversationChildAgents";
-import { ConversationMemories } from "./ConversationMemories";
+import {
+  ConversationChildAgents,
+  useConversationChildAgents,
+} from "./ConversationChildAgents";
+import {
+  ConversationMemories,
+  useConversationMemories,
+} from "./ConversationMemories";
 import { ShareConversationButton } from "./ShareConversationButton";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
-const tabs = [
-  { label: "Details", value: "details" },
-  { label: "Memories", value: "memories" },
-  { label: "Subagents", value: "agents" },
-] as const;
+type DetailsTab = "agents" | "details" | "memories";
 
 /** Put conversation context before usage and diagnostic links. */
 export function ConversationDetailsDrawer(props: {
@@ -23,12 +26,26 @@ export function ConversationDetailsDrawer(props: {
   identity: ReactNode;
   lastActivityAt?: string;
   onClose(): void;
+  /** Open one child agent transcript. The details drawer closes first. */
+  onOpenSubagent(target: SubagentTranscriptTarget): void;
   sentryConversationUrl?: string;
   privacy: ReactNode;
   stats: ReactNode;
   title: string;
 }) {
-  const [tab, setTab] = useState<(typeof tabs)[number]["value"]>("details");
+  const [tab, setTab] = useState<DetailsTab>("details");
+  // Load both lists with the drawer so each tab can show its count.
+  const memories = useConversationMemories(props.conversationId);
+  const agents = useConversationChildAgents(props.conversationId);
+  const tabs = [
+    { label: "Details", value: "details" },
+    {
+      count: memories.data?.memories.length,
+      label: "Memories",
+      value: "memories",
+    },
+    { count: agents.data?.agents.length, label: "Subagents", value: "agents" },
+  ] as const;
   const titleId = "conversation-details-drawer-title";
   const sections = [
     { content: props.brief, title: "Summary" },
@@ -70,7 +87,10 @@ export function ConversationDetailsDrawer(props: {
         ) : tab === "agents" ? (
           <ConversationChildAgents
             conversationId={props.conversationId}
-            onNavigate={props.onClose}
+            onOpenAgent={(target) => {
+              props.onClose();
+              props.onOpenSubagent(target);
+            }}
           />
         ) : sections.length > 0 ? (
           <div className="grid min-w-0 gap-5">

package/src/client/conversations/ConversationHeader.tsx

@@ -24,9 +24,12 @@ import {
 } from "./ConversationHeaderActions";
 import { ConversationDetailsDrawer } from "./ConversationDetailsDrawer";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
 /** Show the conversation title, search, and details. */
 export function ConversationHeader(props: {
+  /** Parent chain of a child Conversation. Root Conversations omit it. */
+  agentTree?: ReactNode;
   copyAction?: ReactNode;
   annotations: ReactNode;
   archive: ConversationArchiveAction;
@@ -40,6 +43,7 @@ export function ConversationHeader(props: {
   sentryConversationUrl?: string;
   live: boolean;
   meta?: ReactNode;
+  onOpenSubagent(target: SubagentTranscriptTarget): void;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   privacy: ReactNode;
@@ -154,7 +158,8 @@ export function ConversationHeader(props: {
     searchOpenVisible ||
     props.archive.error ||
     Boolean(props.linkedWork) ||
-    Boolean(props.forks);
+    Boolean(props.forks) ||
+    Boolean(props.agentTree);
 
   const liveIndicator = props.live ? (
     <span
@@ -176,6 +181,9 @@ export function ConversationHeader(props: {
       >
         <div className="hidden min-w-0 items-start justify-between gap-4 px-7 py-5 md:flex">
           <div className="min-w-0">
+            {props.agentTree ? (
+              <div className="mb-1.5 min-w-0">{props.agentTree}</div>
+            ) : null}
             <div className="flex min-w-0 items-center gap-2">
               <h2 className="m-0 line-clamp-1 min-w-0 font-display text-xl font-medium leading-tight tracking-tight">
                 {props.title}
@@ -204,6 +212,9 @@ export function ConversationHeader(props: {
             view={props.view}
           />
         </div>
+        {props.agentTree ? (
+          <div className="px-4 py-2 md:hidden">{props.agentTree}</div>
+        ) : null}
         {props.forks ? (
           <div className="px-4 py-2 md:hidden">{props.forks}</div>
         ) : null}
@@ -251,6 +262,7 @@ export function ConversationHeader(props: {
           lastActivityAt={props.lastActivityAt}
           sentryConversationUrl={props.sentryConversationUrl}
           onClose={() => setDetailsOpen(false)}
+          onOpenSubagent={props.onOpenSubagent}
           privacy={props.privacy}
           stats={props.stats}
           title={props.title}

package/src/client/conversations/ConversationMemories.tsx

@@ -21,18 +21,23 @@ const conversationMemoryListSchema = z
   })
   .strict();
 
-/** Load and show the memories captured from one Conversation. */
-export function ConversationMemories(props: { conversationId: string }) {
-  const query = useQuery({
+/** Load the memories captured from one Conversation. */
+export function useConversationMemories(conversationId: string) {
+  return useQuery({
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         conversationMemoryListSchema,
-        `/api/plugins/memory/conversations/${encodeURIComponent(props.conversationId)}/memories`,
+        `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
         signal,
       ),
-    queryKey: ["conversation", props.conversationId, "memories"],
+    queryKey: ["conversation", conversationId, "memories"],
     retry: false,
   });
+}
+
+/** Show the memories captured from one Conversation. */
+export function ConversationMemories(props: { conversationId: string }) {
+  const query = useConversationMemories(props.conversationId);
 
   if (query.isPending) {
     return (