@sentry/junior-dashboard 0.276.0 → 0.277.0

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/ConversationPage.tsx

@@ -14,9 +14,10 @@ import type {
 
 import {
   useArchiveConversation,
-  useConversationData,
   type PendingArchiveConversationUpdate,
-} from "./queries";
+} from "./conversationArchive";
+import { useConversationData } from "./queries";
+import { usePinConversation } from "./usePinConversation";
 import { conversationIsResponding } from "./transcript";
 import { buildConversationMarkdown } from "../markdownExport";
 import { CopyButton } from "../components/CopyButton";
@@ -31,7 +32,7 @@ import {
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationReplyFooter } from "./ConversationReplyFooter";
 import { ConversationDetails } from "./ConversationDetails";
-import { turnPrompts } from "./ConversationMemories";
+import { AutoArchiveToggle } from "./AutoArchiveToggle";
 import {
   ConversationMemoryContext,
   memoryAnchorKey,
@@ -208,6 +209,7 @@ export function ConversationPage(props: {
     [memoryList, memoryPopover],
   );
   const archive = useArchiveConversation(conversationId);
+  const pin = usePinConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
   const feedConversation = conversations.find(
@@ -330,10 +332,6 @@ export function ConversationPage(props: {
   }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
   // Show a chosen memory at its transcript row. Wait for the first page, then
   // load earlier pages until the row renders, or stop when history ends.
-  const memoryPrompts = useMemo(
-    () => turnPrompts(transcript?.events),
-    [transcript?.events],
-  );
   useEffect(() => {
     if (!memoryJump || !transcript) return;
     const anchor = pageRef.current?.querySelector(
@@ -488,6 +486,14 @@ export function ConversationPage(props: {
                 <ConversationAnnotations detail={detail.data} />
               ) : null
             }
+            pin={{
+              // The API lets only participants pin, the same as archive.
+              disabled:
+                !conversation || !detail.data?.isParticipant || pin.isPending,
+              error: Boolean(pin.error),
+              onClick: () => pin.mutate(!conversation?.pinnedAt),
+              pinned: Boolean(conversation?.pinnedAt),
+            }}
             archive={{
               archived: Boolean(conversation?.archivedAt),
               disabled: !conversation || archive.isPending,
@@ -612,13 +618,20 @@ export function ConversationPage(props: {
       {showDetails ? (
         <ConversationMemoryContext value={memoryState}>
           <ConversationDetails
+            autoArchive={
+              detail.data?.autoArchive === undefined ? null : (
+                <AutoArchiveToggle
+                  autoArchive={detail.data.autoArchive}
+                  conversationId={conversationId}
+                />
+              )
+            }
             brief={detail.data?.brief}
             conversationId={conversationId}
             highlightReview={reviewOpen}
             identity={identity}
             onClose={closeDetails}
             onOpenSubagent={setSubagentTarget}
-            memoryPrompts={memoryPrompts}
             onSelectMemory={(entry) => {
               // Memory rows show only in the Conversation view, and search
               // can hide them.

package/src/client/conversations/ConversationSidebar.tsx

@@ -6,11 +6,13 @@ import {
   CircleAlert,
   Inbox,
   LockKeyhole,
+  Pin,
   SquarePen,
 } from "lucide-react";
 import { Link } from "react-router";
 
-import { useArchiveConversation } from "./queries";
+import { useArchiveConversation } from "./conversationArchive";
+import { usePinConversation } from "./usePinConversation";
 import { conversationPath } from "./conversationRoutes";
 import {
   conversationDisplayTitle,
@@ -51,9 +53,12 @@ type ConversationSidebarEntry =
     }
   | { conversation: Conversation; key: string; kind: "conversation" };
 
-// Tracks the attempted direction alongside the conversation so a failed
-// archive can never read the row's already-optimistic archived state.
-type ArchiveErrorState = { conversation: Conversation; wasArchiving: boolean };
+// The title names the attempted action, so a failed archive or pin never
+// reads the row's already-optimistic state.
+type RowActionError = { conversation: Conversation; title: string };
+
+const ROW_ACTION_BUTTON_CLASS =
+  "absolute top-0.5 z-10 grid size-7 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed";
 
 const conversationEntryKey = (entry: ConversationSidebarEntry) => entry.key;
 
@@ -81,23 +86,42 @@ export function ConversationSidebar(props: {
   const isLanding = variant === "landing";
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
-  const [archiveError, setArchiveError] = useState<ArchiveErrorState>();
+  const [rowError, setRowError] = useState<RowActionError>();
   const dismissArchivedConversation = useCallback(
     () => setArchivedConversation(undefined),
     [],
   );
   const handleArchiveError = useCallback(
     (conversation: Conversation, wasArchiving: boolean) => {
-      setArchiveError({ conversation, wasArchiving });
+      setRowError({
+        conversation,
+        title: wasArchiving ? "Could not archive" : "Could not restore",
+      });
+    },
+    [],
+  );
+  const handlePinError = useCallback(
+    (conversation: Conversation, wasPinning: boolean) => {
+      setRowError({
+        conversation,
+        title: wasPinning ? "Could not pin" : "Could not unpin",
+      });
     },
     [],
   );
-  const handleArchived = useCallback((conversation: Conversation) => {
-    setArchiveError((current) =>
+  // A later success on the same row replaces its error notice.
+  const clearRowError = useCallback((conversation: Conversation) => {
+    setRowError((current) =>
       current?.conversation.id === conversation.id ? undefined : current,
     );
-    setArchivedConversation(conversation);
   }, []);
+  const handleArchived = useCallback(
+    (conversation: Conversation) => {
+      clearRowError(conversation);
+      setArchivedConversation(conversation);
+    },
+    [clearRowError],
+  );
   const { collapsedKeys, toggle: toggleSection } =
     useCollapsedConversationSections();
   // Rebuild section rows only when their inputs change. Avoid fresh Date.now()
@@ -217,6 +241,8 @@ export function ConversationSidebar(props: {
                   conversation={entry.conversation}
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
+                  onPinError={handlePinError}
+                  onPinned={clearRowError}
                   selected={entry.conversation.id === props.selectedId}
                   unread={props.finishedConversationIds.has(
                     entry.conversation.id,
@@ -231,7 +257,7 @@ export function ConversationSidebar(props: {
           />
         )}
       </div>
-      {archivedConversation || archiveError ? (
+      {archivedConversation || rowError ? (
         <div
           className={cn(
             // Landing is content-tall (parent scrolls). Keep notices on the
@@ -241,11 +267,11 @@ export function ConversationSidebar(props: {
               : "absolute bottom-[max(0.75rem,env(safe-area-inset-bottom))] left-3 right-3 z-20 grid gap-2",
           )}
         >
-          {archiveError ? (
-            <ArchiveConversationErrorNotice
-              conversation={archiveError.conversation}
-              onDismiss={() => setArchiveError(undefined)}
-              wasArchiving={archiveError.wasArchiving}
+          {rowError ? (
+            <ConversationActionErrorNotice
+              conversation={rowError.conversation}
+              onDismiss={() => setRowError(undefined)}
+              title={rowError.title}
             />
           ) : null}
           {archivedConversation ? (
@@ -317,6 +343,8 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   conversation: Conversation;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  onPinError(conversation: Conversation, wasPinning: boolean): void;
+  onPinned(conversation: Conversation): void;
   selected: boolean;
   unread: boolean;
   waiting?: WaitingConversation;
@@ -334,6 +362,11 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
       if (archived) props.onArchived(props.conversation);
     },
   });
+  const pin = usePinConversation(props.conversation.id, {
+    onError: (pinned) => props.onPinError(props.conversation, pinned),
+    onSuccess: () => props.onPinned(props.conversation),
+  });
+  const pinned = Boolean(props.conversation.pinnedAt);
   const status = visualStatusForConversation(props.conversation);
   const title = conversationDisplayTitle(props.conversation);
   // Unread and waiting rows read like unread mail: a dot and a bold title.
@@ -405,12 +438,39 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
           />
         </Link>
       ) : null}
+      {/* Mobile rows pin from the conversation menu, so only the archive
+          button takes row space there. Archived rows restore before they pin. */}
+      {props.conversation.archivedAt ? null : (
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label={`${pinned ? "Unpin" : "Pin"} ${title}`}
+                aria-pressed={pinned}
+                className={cn(ROW_ACTION_BUTTON_CLASS, "right-9 max-sm:hidden")}
+                disabled={pin.isPending}
+                onClick={() => pin.mutate(!pinned)}
+                type="button"
+              >
+                <Pin
+                  aria-hidden="true"
+                  fill={pinned ? "currentColor" : "none"}
+                  size={14}
+                />
+              </button>
+            }
+          />
+          <TooltipContent size="compact">
+            {pinned ? "Unpin" : "Pin"}
+          </TooltipContent>
+        </Tooltip>
+      )}
       <Tooltip>
         <TooltipTrigger
           render={
             <button
               aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-              className="absolute right-1.5 top-0.5 z-10 grid size-7 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
+              className={cn(ROW_ACTION_BUTTON_CLASS, "right-1.5")}
               disabled={archive.isPending}
               onClick={() =>
                 archive.mutate({
@@ -459,15 +519,11 @@ function ConversationRowState(props: {
   );
 }
 
-function ArchiveConversationErrorNotice(props: {
+function ConversationActionErrorNotice(props: {
   conversation: Conversation;
   onDismiss(): void;
-  wasArchiving: boolean;
+  title: string;
 }) {
-  const title = conversationDisplayTitle(props.conversation);
-  const actionTitle = props.wasArchiving
-    ? "Could not archive"
-    : "Could not restore";
   return (
     <Notice
       action={
@@ -475,9 +531,9 @@ function ArchiveConversationErrorNotice(props: {
           Dismiss
         </NoticeAction>
       }
-      detail={title}
+      detail={conversationDisplayTitle(props.conversation)}
       icon={CircleAlert}
-      title={actionTitle}
+      title={props.title}
       tone="error"
     />
   );

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,
   });
 }
@@ -76,7 +82,6 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
-  const [expanded, setExpanded] = useState(false);
   const Icon = watch.redacted
     ? LockKeyhole
     : (resourceIcons[watch.resourceType] ?? Eye);
@@ -94,7 +99,6 @@ function WatchRow(props: { watch: ConversationWatch }) {
       />
     </span>
   );
-  const toggle = () => setExpanded((value) => !value);
   const row = watch.url ? (
     // The row opens the watched resource, like a linked work row. The
     // chevron beside it shows the details.
@@ -102,32 +106,22 @@ function WatchRow(props: { watch: ConversationWatch }) {
       <div className="min-w-0 flex-1">
         <DetailsRow href={watch.url} icon={icon} title={title} />
       </div>
-      <button
-        aria-expanded={expanded}
+      <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"
-        onClick={toggle}
-        type="button"
       >
         {chevron}
-      </button>
+      </CollapsibleTrigger>
     </div>
   ) : (
-    <DetailsRow
-      expanded={expanded}
-      icon={icon}
-      meta={chevron}
-      onToggle={toggle}
-      title={title}
-    />
+    <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} />
@@ -166,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>
+  );
+}