@sentry/junior-dashboard 0.240.0 → 0.241.0

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

@@ -34,9 +34,11 @@ import { cn } from "../../styles";
 import {
   type MemoryDashboardData,
   useMemoryDashboardData,
+  useMemorySearchCounts,
 } from "./memoryDashboard";
 import { MemoryDetailsDrawer } from "./MemoryDetailsDrawer";
 import { MemoryPageLayout } from "./MemoryPageLayout";
+import { MemorySearchHighlight } from "./MemorySearchHighlight";
 import { MemoryTimeline } from "./MemoryTimeline";
 import { MemoryCostChart } from "./MemoryCostChart";
 import { useMemoryRecord } from "./memoryRecord";
@@ -151,6 +153,11 @@ function MemoryLibrary(props: {
     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();
@@ -217,17 +224,17 @@ function MemoryLibrary(props: {
         ariaLabel="Memory collections"
         items={[
           {
-            count: dashboardQuery.data?.stats?.active,
+            count: counts?.active,
             label: "All",
             value: "",
           },
           {
-            count: dashboardQuery.data?.stats?.personal,
+            count: counts?.personal,
             label: "Private",
             value: "private",
           },
           {
-            count: dashboardQuery.data?.stats?.public,
+            count: counts?.public,
             label: "Public",
             value: "public",
           },
@@ -274,6 +281,7 @@ function MemoryLibrary(props: {
                   )
                 }
                 record={record}
+                searchQuery={searchQuery}
                 selected={record.id === memoryId}
               />
             ))}
@@ -472,6 +480,7 @@ function MemoryRow(props: {
   first: boolean;
   onSelect(): void;
   record: PluginUserPageRecord;
+  searchQuery: string;
   selected: boolean;
 }) {
   const kind = metadataValue(props.record, "Type");
@@ -506,7 +515,10 @@ function MemoryRow(props: {
               size={14}
             />
             <h3 className="m-0 truncate font-display text-base font-medium leading-snug text-dashboard-text">
-              {props.record.title}
+              <MemorySearchHighlight
+                query={props.searchQuery}
+                text={props.record.title}
+              />
             </h3>
           </div>
           <div className="mt-1.5 truncate font-mono text-xs leading-relaxed text-dashboard-text-muted">

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

@@ -0,0 +1,49 @@
+/**
+ * Split a search query into the terms that memory search matches. Keep this
+ * in step with `searchTerms` in `@sentry/junior-memory` `src/viewer.ts`.
+ */
+function memorySearchTerms(query: string): string[] {
+  return [
+    ...new Set(
+      query
+        .toLowerCase()
+        .split(/[^a-z0-9_'-]+/)
+        .filter((term) => term.length >= 2),
+    ),
+  ];
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/** Render memory text with each matched search term marked. */
+export function MemorySearchHighlight(props: { query: string; text: string }) {
+  const terms = memorySearchTerms(props.query);
+  if (terms.length === 0) return <>{props.text}</>;
+  // Longer terms first so a term that contains another term wins the match.
+  const pattern = new RegExp(
+    `(${terms
+      .sort((a, b) => b.length - a.length)
+      .map(escapeRegExp)
+      .join("|")})`,
+    "gi",
+  );
+  // `split` with one capture group puts the matches at odd indexes.
+  return (
+    <>
+      {props.text.split(pattern).map((part, index) =>
+        index % 2 === 1 ? (
+          <mark
+            className="rounded-sm bg-amber-300/25 text-dashboard-text"
+            key={index}
+          >
+            {part}
+          </mark>
+        ) : (
+          part
+        ),
+      )}
+    </>
+  );
+}

package/src/client/pages/memory/memoryDashboard.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
 import { fetchDashboardJson } from "../../http";
@@ -64,3 +64,36 @@ export function useMemoryDashboardData() {
     retry: false,
   });
 }
+
+const memoryCountsSchema = z
+  .object({
+    active: z.number().int().min(0),
+    personal: z.number().int().min(0),
+    public: z.number().int().min(0),
+  })
+  .strict();
+
+/**
+ * Load viewer-scoped memory totals that match a search query. The query stays
+ * idle without a search, because the dashboard summary owns unfiltered totals.
+ */
+export function useMemorySearchCounts(searchQuery: string) {
+  return useQuery({
+    enabled: Boolean(searchQuery),
+    placeholderData: keepPreviousData,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        memoryCountsSchema,
+        `/api/plugins/memory/counts?${new URLSearchParams({ q: searchQuery })}`,
+        signal,
+      ),
+    queryKey: [
+      "dashboard",
+      "plugin-user-page",
+      "memory",
+      "counts",
+      searchQuery,
+    ],
+    retry: false,
+  });
+}