@sentry/junior-dashboard 0.277.0 → 0.278.0

package/src/client/conversations/transcriptUnreadHistory.ts

@@ -0,0 +1,248 @@
+/**
+ * Open a long Conversation at the reader's read position.
+ *
+ * The detail holds the latest page of events. When the read position is
+ * older than that page, the transcript starts with the page around the read
+ * position instead: the last read events and the unread events after them.
+ * The first detail fetch of a visit brings that page, so it needs no second
+ * request.
+ * Like earlier pages, newer pages load when the reader scrolls near them, so
+ * the server reads only the pages that the reader reaches.
+ *
+ * The latest page joins the transcript only after the newer pages reach it,
+ * so the transcript never has a gap. Until then the transcript ends with a
+ * row that loads the next newer page. A reader who jumps to the latest skips
+ * the newer pages: the transcript shows the latest page from the detail at
+ * once, and earlier pages load above it as the reader scrolls up. When a
+ * poll skips past the newer pages after they join the latest page, or past a
+ * newer page that has nothing after it, the transcript shows the latest page
+ * in the same way, so it never drops the skipped events.
+ */
+import { useEffect, useMemo, useRef } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import {
+  conversationEventPageSchema,
+  type ConversationDetailReport,
+  type ConversationEventPage,
+  type ConversationReportEvent,
+} from "@sentry/junior/api/schema";
+
+import { fetchDashboardJson } from "../http";
+import { readConversationEvents } from "./queries";
+import {
+  buildUnreadConversationTranscript,
+  conversationHistoryVersion,
+} from "./transcript";
+
+/** The transcript to show and how to load more of it. */
+export type TranscriptHistory = {
+  data: ConversationDetailReport | undefined;
+  hasPreviousPage: boolean;
+  historyError: Error | null;
+  historyVersion: string;
+  isLoadingPreviousPage: boolean;
+  loadPreviousPage: () => void;
+  /** Set while newer pages have not reached the latest page. */
+  newer?: {
+    error: Error | null;
+    /** Load the next newer page, or retry a failed one. */
+    load: () => void;
+    loading: boolean;
+    /** Skip the newer pages and show the latest page. */
+    showLatest: () => void;
+  };
+};
+
+/**
+ * Load the transcript from `unreadCursor`. Returns `undefined` when there is
+ * no cursor, or when the first page fails, so the caller shows the latest
+ * page instead.
+ */
+export function useUnreadHistory(input: {
+  conversationId: string;
+  /** The latest page, from the polled detail. */
+  detail: ConversationDetailReport | undefined;
+  /** `unreadCursor` from the detail when the Conversation opened. */
+  unreadCursor: string | undefined;
+  /** Skip the newer pages. The caller then passes no `unreadCursor`. */
+  onShowLatest: () => void;
+  /** The page around `unreadCursor`, when the detail brought it. */
+  unreadPage?: ConversationEventPage;
+}): (TranscriptHistory & { isPending: boolean }) | undefined {
+  const { conversationId, detail, onShowLatest, unreadCursor, unreadPage } =
+    input;
+  const latestEventsRef = useRef<ConversationReportEvent[]>([]);
+  const latestEvents = useMemo(() => {
+    const kept = keepLatestEvents(latestEventsRef.current, detail?.events);
+    latestEventsRef.current = kept;
+    return kept;
+  }, [detail?.events]);
+  const latestFirstSeq = latestEvents[0]?.seq;
+  const joinedRef = useRef(false);
+  const newer = useInfiniteQuery({
+    // Only the page around the read position loads by itself. The data never
+    // goes stale, so a refetch cannot reload every newer page at once.
+    enabled: Boolean(unreadCursor),
+    staleTime: Infinity,
+    // Each visit starts again from the page around the read position. Pages
+    // from an earlier visit can end at an old latest event, which would
+    // leave a gap before the latest page.
+    gcTime: 0,
+    queryKey: ["conversation", conversationId, "unread", unreadCursor, "newer"],
+    queryFn: ({ pageParam, signal }) =>
+      readConversationEventsFrom(conversationId, pageParam, signal),
+    initialPageParam: { around: unreadCursor ?? "" } as NewerPageParam,
+    // The page that came with the detail. Without it, the query reads it.
+    ...(unreadPage
+      ? {
+          initialData: {
+            pageParams: [{ around: unreadCursor ?? "" }],
+            pages: [unreadPage],
+          },
+        }
+      : undefined),
+    getNextPageParam: (page): NewerPageParam | undefined =>
+      reachesLatest(page, latestFirstSeq) || !page.nextCursor
+        ? undefined
+        : { after: page.nextCursor },
+    retry: false,
+  });
+  const firstNewerPage = newer.data?.pages[0];
+  const earlier = useInfiniteQuery({
+    enabled: false,
+    queryKey: [
+      "conversation",
+      conversationId,
+      "unread",
+      unreadCursor,
+      "earlier",
+    ],
+    queryFn: ({ pageParam, signal }) =>
+      readConversationEvents(conversationId, pageParam, signal),
+    initialPageParam: firstNewerPage?.previousCursor ?? "",
+    getNextPageParam: (page) => page.previousCursor,
+    retry: false,
+  });
+
+  const newerPages = newer.data?.pages;
+  const earlierPages = earlier.data?.pages;
+  const lastNewerPage = newerPages?.at(-1);
+  const reached = lastNewerPage
+    ? reachesLatest(lastNewerPage, latestFirstSeq)
+    : false;
+  if (reached) joinedRef.current = true;
+  // No newer page can fill the gap before the latest page, or the latest
+  // events already on screen would leave until one does.
+  const skipped =
+    lastNewerPage !== undefined &&
+    !reached &&
+    (joinedRef.current || !lastNewerPage.nextCursor);
+  useEffect(() => {
+    if (skipped) onShowLatest();
+  }, [onShowLatest, skipped]);
+  const pages = useMemo(
+    () => [...(earlierPages ?? []), ...(newerPages ?? [])],
+    [earlierPages, newerPages],
+  );
+  const data = useMemo(
+    () =>
+      detail && newerPages
+        ? buildUnreadConversationTranscript(
+            detail,
+            pages,
+            reached ? latestEvents : [],
+          )
+        : undefined,
+    [detail, latestEvents, newerPages, pages, reached],
+  );
+
+  if (!unreadCursor || skipped || (newer.error && !newerPages)) {
+    return undefined;
+  }
+
+  const hasPreviousPage = earlier.data
+    ? earlier.hasNextPage
+    : Boolean(firstNewerPage?.previousCursor);
+  // `cancelRefetch: false` lets a second call join the page read in flight.
+  // By default it cancels that read and starts the same read again.
+  return {
+    data,
+    hasPreviousPage,
+    historyError: earlier.error,
+    historyVersion: conversationHistoryVersion(pages),
+    isLoadingPreviousPage: earlier.isFetchingNextPage,
+    isPending: !newerPages,
+    loadPreviousPage: () => {
+      if (hasPreviousPage) void earlier.fetchNextPage({ cancelRefetch: false });
+    },
+    ...(reached
+      ? undefined
+      : {
+          newer: {
+            error: newer.error,
+            load: () => {
+              if (newer.hasNextPage) {
+                void newer.fetchNextPage({ cancelRefetch: false });
+              }
+            },
+            loading: newer.isFetchingNextPage,
+            showLatest: onShowLatest,
+          },
+        }),
+  };
+}
+
+/**
+ * Keep the events that new events push out of the latest page. Without them,
+ * the latest page would start after the newer pages again, and the transcript
+ * would drop its latest events until one more page loads. A poll that skips
+ * past the kept events starts over from its own events.
+ */
+function keepLatestEvents(
+  kept: ConversationReportEvent[],
+  events: ConversationReportEvent[] | undefined,
+): ConversationReportEvent[] {
+  const firstSeq = events?.[0]?.seq;
+  const keptLastSeq = kept.at(-1)?.seq;
+  if (!events || firstSeq === undefined) return kept;
+  if (keptLastSeq === undefined || firstSeq > keptLastSeq + 1) return events;
+  const slid = kept.filter((event) => event.seq < firstSeq);
+  return slid.length ? [...slid, ...events] : events;
+}
+
+/**
+ * The newer pages reach the latest page when the latest page starts right
+ * after them. Without latest events, they reach it when nothing follows them.
+ */
+function reachesLatest(
+  page: ConversationEventPage,
+  latestFirstSeq: number | undefined,
+): boolean {
+  const lastSeq = page.events.at(-1)?.seq;
+  if (lastSeq === undefined || latestFirstSeq === undefined) {
+    return !page.nextCursor;
+  }
+  return lastSeq + 1 >= latestFirstSeq;
+}
+
+/** The first page is around the read position. The rest follow it. */
+type NewerPageParam = { around: string } | { after: string };
+
+/** Read one bounded page of events around or after a history cursor. */
+function readConversationEventsFrom(
+  conversationId: string,
+  param: NewerPageParam,
+  signal?: AbortSignal,
+): Promise<ConversationEventPage> {
+  const query = new URLSearchParams(param);
+  return fetchDashboardJson(
+    conversationEventPageSchema,
+    `/api/conversations/${encodeURIComponent(conversationId)}/events?${query}`,
+    signal,
+  ).then((page) => {
+    if ("after" in param && page.nextCursor === param.after) {
+      throw new Error("Conversation history cursor did not advance");
+    }
+    return page;
+  });
+}

package/src/client/http.ts

@@ -174,21 +174,21 @@ export async function fetchDashboardJson<T>(
   return schema.parse(await response.json());
 }
 
-/** Read an authenticated response, allowing 304 only for an explicit validator. */
+/** Read an authenticated response, allowing 304 only for explicit validator headers. */
 export async function readDashboardResponse(
   path: string,
   signal?: AbortSignal,
-  etag?: string,
+  validator?: Record<string, string>,
 ): Promise<Response> {
   const response = await fetchDashboard(path, {
     credentials: "same-origin",
     ...(signal ? { signal } : undefined),
-    ...(etag
-      ? { cache: "no-store" as const, headers: { "if-none-match": etag } }
+    ...(validator
+      ? { cache: "no-store" as const, headers: validator }
       : undefined),
   });
   if (response.status === 401) restartDashboardSignIn();
-  if (!response.ok && !(etag && response.status === 304)) {
+  if (!response.ok && !(validator && response.status === 304)) {
     await throwDashboardApiError(path, response);
   }
   return response;

package/src/client/markdownExport.ts

@@ -247,53 +247,43 @@ function appendContextEvent(
   timestamp: number | undefined,
 ): void {
   const event = part.event;
-  lines.push(
-    "",
-    event.type === "handoff" ? "### Model handoff" : "### Context compacted",
-  );
+  lines.push("", "### Context compacted");
   addEventMeta(lines, conversationTranscript, timestamp);
-  if (event.type === "handoff") {
-    addMetaLine(lines, "Model", event.modelId);
-    addMetaLine(lines, "Profile", event.modelProfile);
-    addMetaLine(lines, "Reasoning", event.reasoningLevel);
-  } else {
-    addMetaLine(lines, "Profile", event.modelProfile);
-    addMetaLine(lines, "Model", event.modelId);
-    if (event.details) {
-      addMetaLine(
-        lines,
-        "Estimated input tokens",
-        String(event.details.estimatedInputTokens),
-      );
-      if (event.details.replacementInputTokens !== undefined) {
-        addMetaLine(
-          lines,
-          "Replacement input tokens",
-          String(event.details.replacementInputTokens),
-        );
-      }
-      addMetaLine(
-        lines,
-        "Compaction trigger",
-        String(event.details.triggerTokens),
-      );
-      addMetaLine(lines, "Input limit", String(event.details.inputLimitTokens));
-      addMetaLine(
-        lines,
-        "Input messages",
-        String(event.details.inputMessageCount),
-      );
-      addMetaLine(
-        lines,
-        "Retained messages",
-        String(event.details.retainedMessageCount),
-      );
+  addMetaLine(lines, "Model", event.modelId);
+  if (event.details) {
+    addMetaLine(
+      lines,
+      "Estimated input tokens",
+      String(event.details.estimatedInputTokens),
+    );
+    if (event.details.replacementInputTokens !== undefined) {
       addMetaLine(
         lines,
-        "Summary characters",
-        String(event.details.summaryChars),
+        "Replacement input tokens",
+        String(event.details.replacementInputTokens),
       );
     }
+    addMetaLine(
+      lines,
+      "Compaction trigger",
+      String(event.details.triggerTokens),
+    );
+    addMetaLine(lines, "Input limit", String(event.details.inputLimitTokens));
+    addMetaLine(
+      lines,
+      "Input messages",
+      String(event.details.inputMessageCount),
+    );
+    addMetaLine(
+      lines,
+      "Retained messages",
+      String(event.details.retainedMessageCount),
+    );
+    addMetaLine(
+      lines,
+      "Summary characters",
+      String(event.details.summaryChars),
+    );
   }
   if (event.summary) {
     lines.push("", "#### Continuation summary", "", event.summary);

package/src/client/pages/memory/MemoryDetails.tsx

@@ -1,4 +1,4 @@
-import { Globe2, Lock, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { useState, type ReactNode } from "react";
 
 import { DetailsPanel } from "../../components/DetailsPanel";
@@ -24,14 +24,8 @@ import type {
   PluginUserPageRecordAction,
 } from "../user/pluginUserPageData";
 
-// The heading, origin, and scope rows already show these values.
-const SUMMARIZED_METADATA = new Set([
-  "Learned",
-  "Memory ID",
-  "Source",
-  "Type",
-  "Visibility",
-]);
+// The heading and origin rows already show these values.
+const SUMMARIZED_METADATA = new Set(["Learned", "Memory ID", "Source", "Type"]);
 
 /** Show one memory beside the library, or in a bottom sheet on small screens. */
 export function MemoryDetails(props: {
@@ -43,8 +37,6 @@ export function MemoryDetails(props: {
   const { record } = props;
   const [confirmOpen, setConfirmOpen] = useState(false);
   const heading = record ? memoryHeading(record) : "Memory details";
-  const isPublic = record && metadataValue(record, "Visibility") === "Public";
-  const VisibilityIcon = isPublic ? Globe2 : Lock;
   const forgetAction = record?.actions?.find(
     (recordAction) => recordAction.tone === "danger",
   );
@@ -56,13 +48,6 @@ export function MemoryDetails(props: {
       sheetTitle={heading}
       title={
         <h2 className="m-0 flex items-center gap-2 font-display text-base font-medium text-dashboard-text">
-          {record ? (
-            <VisibilityIcon
-              aria-hidden="true"
-              className="shrink-0 text-dashboard-text-muted"
-              size={14}
-            />
-          ) : null}
           <span className="truncate">{heading}</span>
         </h2>
       }
@@ -147,15 +132,11 @@ function MemoryFacts(props: { record: PluginUserPageRecord }) {
   const { record } = props;
   const learned = metadataValue(record, "Learned");
   const source = metadataValue(record, "Source");
-  const visibility = metadataValue(record, "Visibility");
-  const isPublic = visibility === "Public";
   const origin =
     learned === "Automatic"
       ? `From a ${source ?? "past"} conversation`
       : learned === "Explicit"
-        ? isPublic
-          ? "Someone asked Junior"
-          : "You asked Junior"
+        ? "Someone asked Junior"
         : learned
           ? "Before origin tracking"
           : undefined;
@@ -169,11 +150,6 @@ function MemoryFacts(props: { record: PluginUserPageRecord }) {
   return (
     <dl className="m-0 grid min-w-0 gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3 text-xs leading-snug">
       {origin ? <MemoryFact label="Learned">{origin}</MemoryFact> : null}
-      {visibility ? (
-        <MemoryFact label="Used in">
-          {isPublic ? "Future workspace channels" : "Your future conversations"}
-        </MemoryFact>
-      ) : null}
       {dates.map((item) => (
         <MemoryFact key={item.label} label={item.label}>
           {item.value}
@@ -194,12 +170,9 @@ function MemoryFact(props: { children: ReactNode; label: string }) {
   );
 }
 
-/** Name a memory by visibility and type, such as "Private preference". */
+/** Name a memory by type, such as "Preference". */
 function memoryHeading(record: PluginUserPageRecord): string {
-  const kind = metadataValue(record, "Type");
-  const visibility = metadataValue(record, "Visibility");
-  if (!kind) return visibility ? `${visibility} memory` : "Memory";
-  return visibility ? `${visibility} ${kind.toLowerCase()}` : kind;
+  return metadataValue(record, "Type") ?? "Memory";
 }
 
 function metadataValue(

package/src/client/pages/memory/MemoryPage.tsx

@@ -3,8 +3,6 @@ import {
   BrainCircuit,
   CircleAlert,
   Database,
-  Globe2,
-  Lock,
   Sparkles,
   UserRound,
 } from "lucide-react";
@@ -12,7 +10,6 @@ import { useEffect, useRef, useState } from "react";
 import { Navigate, useLocation, useNavigate, useParams } from "react-router";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 
-import { FilterTabList } from "../../components/FilterBar";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { LoadMorePagination } from "../../components/Pagination";
@@ -36,7 +33,6 @@ import { cn } from "../../styles";
 import {
   type MemoryDashboardData,
   useMemoryDashboardData,
-  useMemorySearchCounts,
 } from "./memoryDashboard";
 import { MemoryDetails } from "./MemoryDetails";
 import { MemoryPageLayout } from "./MemoryPageLayout";
@@ -47,11 +43,9 @@ import { useMemoryRecord } from "./memoryRecord";
 
 /**
  * Leading memory column flexes; type and date columns stay equal fixed
- * widths on `sm` and up. Below `sm` those columns are hidden, so the grid
- * collapses to just the label and trailing visibility icon.
+ * widths on `sm` and up. Below `sm` those columns are hidden.
  */
-const MEMORY_GRID =
-  "grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[minmax(0,1fr)_7rem_9rem_auto]";
+const MEMORY_GRID = "grid-cols-1 sm:grid-cols-[minmax(0,1fr)_7rem_9rem]";
 
 /** Render the temporary first-class dashboard experience for memory. */
 export function MemoryPage(props: { page: PluginUserPageLink }) {
@@ -111,7 +105,7 @@ function MemoryOverview(props: { range: TimeRangeDays }) {
             days: dashboardQuery.data.days,
             hours: dashboardQuery.data.hours,
             range: props.range,
-            emptySixHour: (date) => ({ date, personal: 0, public: 0 }),
+            emptySixHour: (date) => ({ count: 0, date }),
           })}
           range={props.range}
         />
@@ -148,21 +142,13 @@ function MemoryLibrary(props: {
   const {
     action,
     content,
-    filter,
     query,
     records,
     runAction,
     searchQuery,
     searchText,
-    setFilter,
     setSearchText,
   } = usePluginUserPageData(props.page);
-  const dashboardQuery = useMemoryDashboardData();
-  const searchCountsQuery = useMemorySearchCounts(searchQuery);
-  // Tab totals follow the search. Without a search, the summary owns them.
-  const counts = searchQuery
-    ? searchCountsQuery.data
-    : dashboardQuery.data?.stats;
   const navigate = useNavigate();
   const location = useLocation();
   const { memoryId } = useParams();
@@ -269,29 +255,6 @@ function MemoryLibrary(props: {
               ) : null}
             </div>
 
-            <FilterTabList
-              ariaLabel="Memory collections"
-              items={[
-                {
-                  count: counts?.active,
-                  label: "All",
-                  value: "",
-                },
-                {
-                  count: counts?.personal,
-                  label: "Private",
-                  value: "private",
-                },
-                {
-                  count: counts?.public,
-                  label: "Public",
-                  value: "public",
-                },
-              ]}
-              onChange={setFilter}
-              value={filter}
-            />
-
             {loading ? (
               <PageContentSkeleton label="Loading memories" variant="panel" />
             ) : query.error ? (
@@ -378,7 +341,6 @@ function MemoryListHeader() {
       <div>Memory</div>
       <div>Type</div>
       <div>Learned</div>
-      <div className="sr-only">Visibility</div>
     </div>
   );
 }
@@ -387,20 +349,10 @@ function MemorySummary(props: { data: MemoryDashboardData }) {
   const { stats } = props.data;
   const items = [
     {
-      detail: "personal + public",
+      detail: "shared across the workspace",
       label: "Total active",
-      value: stats.active.toLocaleString("en-US"),
-    },
-    {
-      detail: "private to you",
-      label: "Personal",
-      value: stats.personal.toLocaleString("en-US"),
-    },
-    {
-      detail: "workspace shareable",
-      label: "Public",
       tone: "text-dashboard-accent-text",
-      value: stats.public.toLocaleString("en-US"),
+      value: stats.active.toLocaleString("en-US"),
     },
     {
       detail: "in the last 30 days",
@@ -411,7 +363,7 @@ function MemorySummary(props: { data: MemoryDashboardData }) {
   return (
     <section
       aria-label="Memory summary"
-      className="grid grid-cols-2 gap-px border-y border-dashboard-border-subtle bg-dashboard-fill-hover lg:grid-cols-4"
+      className="grid grid-cols-2 gap-px border-y border-dashboard-border-subtle bg-dashboard-fill-hover"
     >
       {items.map((item) => (
         <div className="bg-dashboard-bg px-4 py-4 sm:px-5" key={item.label}>
@@ -442,12 +394,9 @@ function MemoryKindPanel(props: { data: MemoryDashboardData }) {
       <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
         What Junior remembers
       </h2>
-      <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
-        Across personal and public scopes.
-      </p>
       <div className="mt-5 grid gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover">
         <OverviewBreakdownRow
-          detail="Almost entirely personal"
+          detail="How people like to work"
           icon={UserRound}
           label="Preferences"
           value={stats.preference}
@@ -541,8 +490,6 @@ function MemoryRow(props: {
   const kind = metadataValue(props.record, "Type");
   const remembered = metadataValue(props.record, "Remembered");
   const source = metadataValue(props.record, "Source");
-  const visibility = metadataValue(props.record, "Visibility");
-  const isPublic = visibility === "Public";
   return (
     <SelectableRow
       className={cn(
@@ -565,11 +512,6 @@ function MemoryRow(props: {
       >
         <div className="min-w-0 overflow-hidden">
           <div className="flex min-w-0 items-center gap-2 overflow-hidden">
-            <VisibilityIcon
-              className="sm:hidden"
-              isPublic={isPublic}
-              size={14}
-            />
             <h3 className="m-0 truncate font-display text-base font-medium leading-snug text-dashboard-text">
               <MemorySearchHighlight
                 query={props.searchQuery}
@@ -591,38 +533,11 @@ function MemoryRow(props: {
         <span className="hidden truncate font-mono text-xs text-dashboard-text sm:block">
           {shortDate(remembered)}
         </span>
-        <VisibilityIcon
-          className="hidden justify-self-center sm:inline-flex"
-          isPublic={isPublic}
-          size={15}
-        />
       </button>
     </SelectableRow>
   );
 }
 
-/** Render the lock (private) or globe (public) mark for one memory's visibility. */
-function VisibilityIcon(props: {
-  className?: string;
-  isPublic: boolean;
-  size: number;
-}) {
-  const Icon = props.isPublic ? Globe2 : Lock;
-  const label = props.isPublic ? "Public" : "Private";
-  return (
-    <span
-      className={cn(
-        "inline-flex shrink-0 items-center text-dashboard-text-muted",
-        props.className,
-      )}
-      title={label}
-    >
-      <Icon aria-hidden="true" size={props.size} />
-      <span className="sr-only">{label}</span>
-    </span>
-  );
-}
-
 function metadataValue(record: PluginUserPageRecord, label: string): string {
   return record.metadata?.find((item) => item.label === label)?.value ?? "—";
 }