@sentry/junior-dashboard 0.276.0 → 0.277.0

package/src/client/conversations/TranscriptMemoryPopover.tsx

@@ -18,6 +18,7 @@ import {
   type ConversationMemoryState,
   type MemoryAnchor,
 } from "./conversationMemory";
+import { MemoryLinkIcons } from "./MemoryIcons";
 import { memoryRecallContent } from "./turnContext";
 
 function memoryCount(count: number): string {
@@ -54,32 +55,26 @@ function MemoryPopover(props: {
         aria-label={props.label}
         className="max-h-[min(28rem,var(--available-height))] w-96 p-1.5"
       >
-        <ul className="m-0 grid list-none gap-0.5 p-0">
+        <ul className="m-0 grid list-none divide-y divide-dashboard-border-subtle p-0">
           {props.memories.map((memory) => (
-            <li
-              className={cn(
-                "grid gap-1.5 rounded-md px-2.5 py-2",
-                memory.id === highlightId && "bg-dashboard-fill-strong",
-              )}
-              key={memory.id}
-              ref={
-                memory.id === highlightId
-                  ? (node) => node?.scrollIntoView({ block: "nearest" })
-                  : undefined
-              }
-            >
-              <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-                {memory.content}
-              </p>
-              <div className="flex items-center gap-3 text-xs text-dashboard-text-muted">
-                {memory.visibility === "private" ? <span>Private</span> : null}
-                <Link
-                  className="text-dashboard-text-muted no-underline hover:text-dashboard-text hover:underline"
-                  to={memoryPath(memory.id)}
-                >
-                  Open
-                </Link>
-              </div>
+            <li className="py-1 first:pt-0 last:pb-0" key={memory.id}>
+              <Link
+                className={cn(
+                  "group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-md px-2.5 py-2 no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
+                  memory.id === highlightId && "bg-dashboard-fill-strong",
+                )}
+                ref={
+                  memory.id === highlightId
+                    ? (node) => node?.scrollIntoView({ block: "nearest" })
+                    : undefined
+                }
+                to={memoryPath(memory.id)}
+              >
+                <p className="m-0 line-clamp-4 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
+                  {memory.content}
+                </p>
+                <MemoryLinkIcons private={memory.visibility === "private"} />
+              </Link>
             </li>
           ))}
         </ul>

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -29,6 +29,7 @@ import {
 } from "./turnContext";
 import { cn } from "../styles";
 import { DetailsCard } from "./DetailsList";
+import { MemoryLinkIcons } from "./MemoryIcons";
 import { HighlightText } from "./transcriptSearch";
 
 /** What one turn context view shows: who spoke, when, and the context. */
@@ -270,17 +271,20 @@ function TurnContextCard(props: { context: TranscriptViewTurnContext }) {
   );
 }
 
-// Each row links to the memory's page, which shows its details.
+// Each row shows the full memory and links to the memory's page.
 function MemoryRecall(props: { memories: MemoryRecallContent["memories"] }) {
   return (
-    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none divide-y divide-dashboard-border-subtle p-0">
       {props.memories.map((memory) => (
-        <li key={memory.id}>
+        <li className="py-1 first:pt-0 last:pb-0" key={memory.id}>
           <Link
-            className="line-clamp-2 rounded-md px-1.5 py-1.5 text-sm leading-5 text-dashboard-text no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            className="group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-md px-1.5 py-1.5 no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
             to={memoryPath(memory.id)}
           >
-            <HighlightText text={memory.content} />
+            <span className="whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
+              <HighlightText text={memory.content} />
+            </span>
+            <MemoryLinkIcons private={memory.scope === "personal"} />
           </Link>
         </li>
       ))}

package/src/client/conversations/autoArchiveQueries.ts

@@ -0,0 +1,53 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  archiveDoneConversationsResponseSchema,
+  conversationAutoArchiveSchema,
+  type ConversationDetailReport,
+} from "@sentry/junior/api/schema";
+
+import { patch, post } from "../http";
+import { conversationDetailQueryKey } from "./queries";
+
+/** Turn auto-archive on or off for one conversation and the viewer. */
+export function useSetConversationAutoArchive(conversationId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (autoArchive: boolean) =>
+      patch(
+        conversationAutoArchiveSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/auto-archive`,
+        { autoArchive },
+      ),
+    onSuccess: (result) => {
+      queryClient.setQueryData<
+        ConversationDetailReport & { detailEtag?: string }
+      >(conversationDetailQueryKey(conversationId), (detail) =>
+        detail
+          ? {
+              ...detail,
+              autoArchive: result.autoArchive,
+              detailEtag: undefined,
+            }
+          : detail,
+      );
+    },
+  });
+}
+
+/** Archive all of the viewer's done conversations once. */
+export function useArchiveDoneConversations() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () =>
+      post(
+        archiveDoneConversationsResponseSchema,
+        "/api/conversations/archive-done",
+        {},
+      ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "conversations"],
+      });
+    },
+  });
+}

package/src/client/conversations/conversationArchive.ts

@@ -0,0 +1,255 @@
+import {
+  useMutation,
+  useMutationState,
+  useQueryClient,
+} from "@tanstack/react-query";
+import type {
+  ConversationDetailReport,
+  ConversationFeed,
+  ConversationSummaryReport,
+} from "@sentry/junior/api/schema";
+import { archiveConversationResponseSchema } from "@sentry/junior/api/schema";
+
+import { patch } from "../http";
+import {
+  conversationDetailQueryKey,
+  type ConversationSnapshot,
+} from "./queries";
+
+function archivedConversationQueryKey(conversationId: string) {
+  return ["dashboard", "archived-conversation", conversationId] as const;
+}
+
+/** Read active/archived status from a dashboard conversations query key. */
+function conversationFeedStatus(
+  queryKey: readonly unknown[],
+): "active" | "archived" | undefined {
+  const status = queryKey[queryKey.length - 1];
+  return status === "active" || status === "archived" ? status : undefined;
+}
+
+type ArchivedConversationSnapshot = {
+  conversation: ConversationSummaryReport;
+  feedQueryHashes: string[];
+};
+
+const archiveConversationMutationKey = [
+  "dashboard",
+  "archive-conversation",
+] as const;
+
+type ArchiveConversationVariables = {
+  archived: boolean;
+  lastSeenAt: string;
+};
+
+type ArchiveConversationMutationContext = {
+  archivedQueryKey: ReturnType<typeof archivedConversationQueryKey>;
+  archivedSnapshot?: ArchivedConversationSnapshot;
+  detailQueryKey: ReturnType<typeof conversationDetailQueryKey>;
+  previousArchivedSnapshot?: ArchivedConversationSnapshot;
+  previousDetail?: ConversationDetailReport;
+  previousFeeds: Array<[readonly unknown[], ConversationFeed | undefined]>;
+};
+
+export type PendingArchiveConversationUpdate = {
+  archived: boolean;
+  conversation?: ConversationSummaryReport;
+  conversationId: string;
+};
+
+/** Read pending archive state so refetches cannot visually replace optimistic UI. */
+export function usePendingArchiveConversationUpdates() {
+  return useMutationState({
+    filters: {
+      mutationKey: archiveConversationMutationKey,
+      status: "pending",
+    },
+    select: (mutation) => {
+      const variables = mutation.state
+        .variables as ArchiveConversationVariables;
+      const context = mutation.state.context as
+        | ArchiveConversationMutationContext
+        | undefined;
+      const conversationId = mutation.options.mutationKey?.[2];
+      return {
+        archived: variables.archived,
+        conversation: context?.archivedSnapshot?.conversation,
+        conversationId:
+          typeof conversationId === "string" ? conversationId : "",
+      } satisfies PendingArchiveConversationUpdate;
+    },
+  });
+}
+
+/** Archive or restore one conversation with an immediate reversible cache update. */
+export function useArchiveConversation(
+  conversationId: string,
+  options?: {
+    onError?(): void;
+    onSuccess?(archivedAt: string | null): void;
+  },
+) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: [...archiveConversationMutationKey, conversationId],
+    mutationFn: (args: ArchiveConversationVariables) =>
+      patch(
+        archiveConversationResponseSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/archive`,
+        args,
+      ),
+    onMutate: async (args) => {
+      const conversationQueries = { queryKey: ["dashboard", "conversations"] };
+      const detailQueryKey = conversationDetailQueryKey(conversationId);
+      const archivedQueryKey = archivedConversationQueryKey(conversationId);
+      await Promise.all([
+        queryClient.cancelQueries(conversationQueries),
+        queryClient.cancelQueries({ queryKey: detailQueryKey }),
+      ]);
+      const previousFeeds =
+        queryClient.getQueriesData<ConversationFeed>(conversationQueries);
+      const previousDetail =
+        queryClient.getQueryData<ConversationDetailReport>(detailQueryKey);
+      const previousArchivedSnapshot =
+        queryClient.getQueryData<ArchivedConversationSnapshot>(
+          archivedQueryKey,
+        );
+      const archivedAt = args.archived ? new Date().toISOString() : null;
+      // Match the API: archive also unpins.
+      const viewerMarks = args.archived
+        ? { archivedAt, pinnedAt: null }
+        : { archivedAt };
+      // Snapshot from any loaded feed, including archived-only fixtures that
+      // were never archived through this client session.
+      const archivedSnapshot =
+        buildArchivedConversationSnapshot(previousFeeds, conversationId) ??
+        previousArchivedSnapshot;
+
+      previousFeeds.forEach(([queryKey, feed]) => {
+        if (!feed) return;
+        const conversationExists = feed.conversations.some(
+          (conversation) => conversation.conversationId === conversationId,
+        );
+        const feedStatus = conversationFeedStatus(queryKey);
+        const shouldRestore =
+          !args.archived &&
+          !conversationExists &&
+          Boolean(archivedSnapshot) &&
+          feedStatus !== "archived";
+        const conversations = shouldRestore
+          ? [
+              ...feed.conversations,
+              // The archive cleared the pin, so the restored row is unpinned.
+              {
+                ...archivedSnapshot!.conversation,
+                archivedAt: null,
+                pinnedAt: null,
+              },
+            ].sort((a, b) => b.lastSeenAt.localeCompare(a.lastSeenAt))
+          : feed.conversations.map((conversation) =>
+              conversation.conversationId === conversationId
+                ? { ...conversation, ...viewerMarks }
+                : conversation,
+            );
+        queryClient.setQueryData<ConversationFeed>(queryKey, {
+          ...feed,
+          conversations,
+        });
+      });
+      queryClient.setQueryData<ConversationSnapshot>(
+        detailQueryKey,
+        (detail) =>
+          detail
+            ? { ...detail, ...viewerMarks, detailEtag: undefined }
+            : detail,
+      );
+      if (archivedSnapshot) {
+        queryClient.setQueryData(archivedQueryKey, archivedSnapshot);
+      }
+      return {
+        archivedQueryKey,
+        archivedSnapshot,
+        detailQueryKey,
+        previousArchivedSnapshot,
+        previousDetail,
+        previousFeeds,
+      } satisfies ArchiveConversationMutationContext;
+    },
+    onError: (_error, _args, context) => {
+      context?.previousFeeds.forEach(([queryKey, feed]) => {
+        queryClient.setQueryData(queryKey, feed);
+      });
+      if (context) {
+        queryClient.setQueryData(
+          context.detailQueryKey,
+          context.previousDetail,
+        );
+        if (context.previousArchivedSnapshot) {
+          queryClient.setQueryData(
+            context.archivedQueryKey,
+            context.previousArchivedSnapshot,
+          );
+        } else {
+          queryClient.removeQueries({
+            exact: true,
+            queryKey: context.archivedQueryKey,
+          });
+        }
+      }
+      options?.onError?.();
+    },
+    onSuccess: (result, args) => {
+      queryClient.setQueryData<ConversationSnapshot>(
+        conversationDetailQueryKey(conversationId),
+        (detail) =>
+          detail
+            ? {
+                ...detail,
+                archivedAt: result.archivedAt,
+                detailEtag: undefined,
+              }
+            : detail,
+      );
+      if (!args.archived) {
+        queryClient.removeQueries({
+          exact: true,
+          queryKey: archivedConversationQueryKey(conversationId),
+        });
+      }
+      options?.onSuccess?.(result.archivedAt);
+    },
+    onSettled: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: ["dashboard", "conversations"],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ["dashboard", "locations"],
+        }),
+        queryClient.invalidateQueries({ queryKey: ["dashboard", "people"] }),
+        queryClient.invalidateQueries({
+          exact: true,
+          queryKey: conversationDetailQueryKey(conversationId),
+        }),
+      ]);
+    },
+  });
+}
+
+function buildArchivedConversationSnapshot(
+  feeds: Array<[readonly unknown[], ConversationFeed | undefined]>,
+  conversationId: string,
+): ArchivedConversationSnapshot | undefined {
+  let conversation: ConversationSummaryReport | undefined;
+  const feedQueryHashes: string[] = [];
+  for (const [queryKey, feed] of feeds) {
+    const feedConversation = feed?.conversations.find(
+      (item) => item.conversationId === conversationId,
+    );
+    if (!feedConversation) continue;
+    conversation ??= feedConversation;
+    feedQueryHashes.push(JSON.stringify(queryKey));
+  }
+  return conversation ? { conversation, feedQueryHashes } : undefined;
+}

package/src/client/conversations/conversationMemory.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 import { z } from "zod";
 
 import { fetchDashboardJson } from "../http";
+import { conversationSideReadQueryKey } from "./queries";
 
 const conversationMemoryListSchema = z
   .object({
@@ -45,7 +46,7 @@ export function useConversationMemories(conversationId: string) {
         `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
         signal,
       ),
-    queryKey: ["conversation", conversationId, "memories"],
+    queryKey: conversationSideReadQueryKey(conversationId, "memories"),
     retry: false,
   });
 }

package/src/client/conversations/conversationSections.ts

@@ -7,18 +7,22 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
-// Sorts before every time section.
+// Pinned sorts first, then Needs attention, then every time section.
+const PINNED_SECTION = { key: "pinned", label: "Pinned", order: -2 };
 const ATTENTION_SECTION = {
   key: "attention",
   label: "Needs attention",
-  order: Number.NEGATIVE_INFINITY,
+  order: -1,
 };
 
 /**
- * Group conversations into Needs attention, then by last activity: Today,
- * Yesterday, Previous 7 days, Previous 30 days, then one section per month.
+ * Group conversations into Pinned, then Needs attention, then by last
+ * activity: Today, Yesterday, Previous 7 days, Previous 30 days, then one
+ * section per month.
  *
- * Conversations in `attentionIds` go to Needs attention, newest first.
+ * A pinned conversation shows only in Pinned, even when it needs attention.
+ * Conversations in `attentionIds` go to Needs attention. Each section lists
+ * the newest first.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -35,14 +39,16 @@ export function buildConversationSections(
   );
 
   for (const conversation of sorted) {
-    const section = options.attentionIds?.has(conversation.id)
-      ? ATTENTION_SECTION
-      : conversationSection(
-          activityTime(conversation),
-          nowDay,
-          options.nowMs,
-          options.timeZone,
-        );
+    const section = conversation.pinnedAt
+      ? PINNED_SECTION
+      : options.attentionIds?.has(conversation.id)
+        ? ATTENTION_SECTION
+        : conversationSection(
+            activityTime(conversation),
+            nowDay,
+            options.nowMs,
+            options.timeZone,
+          );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);
@@ -65,16 +71,16 @@ export function attentionConversationIds(
 }
 
 /**
- * Sort attention conversations to the front. The sort is stable, so each group
- * keeps the feed order. Paginated lists call this before paging, so page 1
- * holds every attention conversation.
+ * Sort pinned, then attention conversations to the front. The sort is stable,
+ * so each group keeps the feed order. Paginated lists call this before paging,
+ * so page 1 holds every pinned and attention conversation.
  */
-export function attentionFirst(
+export function pinnedAndAttentionFirst(
   conversations: Conversation[],
   attentionIds: ReadonlySet<string>,
 ): Conversation[] {
   const rank = (conversation: Conversation) =>
-    attentionIds.has(conversation.id) ? 0 : 1;
+    conversation.pinnedAt ? 0 : attentionIds.has(conversation.id) ? 1 : 2;
   return [...conversations].sort((left, right) => rank(left) - rank(right));
 }