@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -0,0 +1,218 @@
+import { Globe2, Lock, Trash2 } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import { DetailsPanel } from "../../components/DetailsPanel";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../../components/ui/alert-dialog";
+import { Button } from "../../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { TranscriptText } from "../../conversations/TranscriptText";
+import type {
+  PluginUserPageRecord,
+  PluginUserPageRecordAction,
+} from "../user/pluginUserPageData";
+
+// The memory plugin API does not resolve mentions yet, so memory text shows
+// Slack ids instead of names.
+const NO_MEMORY_MENTIONS: readonly [] = [];
+
+// The heading, origin, and scope rows already show these values.
+const SUMMARIZED_METADATA = new Set([
+  "Learned",
+  "Memory ID",
+  "Source",
+  "Type",
+  "Visibility",
+]);
+
+/** Show one memory beside the library, or in a bottom sheet on small screens. */
+export function MemoryDetails(props: {
+  forgetPending: boolean;
+  onClose(): void;
+  onForget(action: PluginUserPageRecordAction): void;
+  record: PluginUserPageRecord | undefined;
+}) {
+  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",
+  );
+
+  return (
+    <DetailsPanel
+      label="Memory details"
+      onClose={props.onClose}
+      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>
+      }
+    >
+      <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
+        <div
+          aria-label="Memory content"
+          role="region"
+          tabIndex={0}
+          className="grid min-h-0 min-w-0 content-start gap-4 overflow-y-auto overscroll-contain p-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [overflow-wrap:anywhere]"
+        >
+          {record ? (
+            <>
+              <div className="grid gap-3 text-sm leading-relaxed">
+                <TranscriptText
+                  mentions={NO_MEMORY_MENTIONS}
+                  text={record.title}
+                />
+                {record.description ? (
+                  <TranscriptText
+                    mentions={NO_MEMORY_MENTIONS}
+                    text={record.description}
+                  />
+                ) : null}
+              </div>
+              <MemoryFacts record={record} />
+            </>
+          ) : (
+            <PageContentSkeleton label="Loading memory" variant="panel" />
+          )}
+        </div>
+        {record && forgetAction ? (
+          // Keep the destructive action away from the title and close control.
+          <footer
+            aria-label="Memory actions"
+            className="flex items-center gap-2 border-t border-dashboard-border bg-dashboard-bg-elevated p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+          >
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    aria-label="Forget this memory"
+                    className="min-h-11 min-w-11"
+                    disabled={props.forgetPending}
+                    onClick={() => {
+                      if (forgetAction.confirmation) setConfirmOpen(true);
+                      else props.onForget(forgetAction);
+                    }}
+                    size="icon"
+                    variant="danger"
+                  >
+                    <Trash2 aria-hidden="true" size={16} />
+                  </Button>
+                }
+              />
+              <TooltipContent size="compact">Forget this memory</TooltipContent>
+            </Tooltip>
+          </footer>
+        ) : null}
+      </div>
+      {forgetAction?.confirmation && record ? (
+        <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogTitle>{forgetAction.confirmation}</AlertDialogTitle>
+            <AlertDialogDescription>{record.title}</AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  setConfirmOpen(false);
+                  props.onForget(forgetAction);
+                }}
+                variant="danger"
+              >
+                {forgetAction.label}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ) : null}
+    </DetailsPanel>
+  );
+}
+
+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"
+        : learned
+          ? "Before origin tracking"
+          : undefined;
+  const remembered = metadataValue(record, "Remembered");
+  // Most memories are saved when Junior sees them. Show one date in that case.
+  const dates = (record.metadata ?? []).filter(
+    (item) =>
+      !SUMMARIZED_METADATA.has(item.label) &&
+      !(item.label === "Observed" && item.value === remembered),
+  );
+  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}
+        </MemoryFact>
+      ))}
+    </dl>
+  );
+}
+
+function MemoryFact(props: { children: ReactNode; label: string }) {
+  return (
+    <div className="flex min-w-0 items-baseline justify-between gap-4">
+      <dt className="shrink-0 text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
+        {props.children}
+      </dd>
+    </div>
+  );
+}
+
+/** Name a memory by visibility and type, such as "Private 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;
+}
+
+function metadataValue(
+  record: PluginUserPageRecord,
+  label: string,
+): string | undefined {
+  return record.metadata?.find((item) => item.label === label)?.value;
+}

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

@@ -8,7 +8,7 @@ import {
   Sparkles,
   UserRound,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Navigate, useLocation, useNavigate, useParams } from "react-router";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 
@@ -25,8 +25,10 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
+import { PageLayout } from "../../components/layout/PageLayout";
 import {
   type PluginUserPageRecord,
+  type PluginUserPageRecordAction,
   usePluginUserPageData,
 } from "../user/pluginUserPageData";
 import { pathWithSearch } from "../../searchParams";
@@ -36,7 +38,7 @@ import {
   useMemoryDashboardData,
   useMemorySearchCounts,
 } from "./memoryDashboard";
-import { MemoryDetailsDrawer } from "./MemoryDetailsDrawer";
+import { MemoryDetails } from "./MemoryDetails";
 import { MemoryPageLayout } from "./MemoryPageLayout";
 import { MemorySearchHighlight } from "./MemorySearchHighlight";
 import { MemoryTimeline } from "./MemoryTimeline";
@@ -64,13 +66,16 @@ export function MemoryPage(props: { page: PluginUserPageLink }) {
 
   return (
     <MemoryPageLayout>
-      <PageHeader
-        description={props.page.description}
-        {...(overview ? { onRangeChange: setRange, range } : {})}
-        title={props.page.label}
-      />
       {overview ? (
-        <MemoryOverview range={range} />
+        <>
+          <PageHeader
+            description={props.page.description}
+            onRangeChange={setRange}
+            range={range}
+            title={props.page.label}
+          />
+          <MemoryOverview range={range} />
+        </>
       ) : (
         <MemoryLibrary libraryPath={libraryPath} page={props.page} />
       )}
@@ -161,11 +166,34 @@ function MemoryLibrary(props: {
   const navigate = useNavigate();
   const location = useLocation();
   const { memoryId } = useParams();
+  const listRef = useRef<HTMLDivElement>(null);
   const memoryQuery = useMemoryRecord(memoryId);
   const selectedRecord =
     memoryQuery.data ?? records.find((record) => record.id === memoryId);
   const memoryPath = (pathname: string) =>
     pathWithSearch(pathname, location.search);
+  const closeDetails = () => {
+    const trigger = memoryId
+      ? listRef.current?.querySelector<HTMLButtonElement>(
+          `button[data-memory-id="${CSS.escape(memoryId)}"]`,
+        )
+      : undefined;
+    navigate(memoryPath(props.libraryPath));
+    (trigger ?? listRef.current)?.focus();
+  };
+  const forget = (recordAction: PluginUserPageRecordAction) => {
+    // The forgotten row leaves the list, so focus the list instead.
+    navigate(memoryPath(props.libraryPath));
+    listRef.current?.focus();
+    runAction(recordAction);
+  };
+
+  useEffect(() => {
+    // Forget leaves the shared mutation in success or error. Clear it when
+    // another memory opens, so old action feedback does not stay visible.
+    if (memoryId) action.reset();
+    // oxlint-disable-next-line react/exhaustive-deps -- reset only on open id change
+  }, [memoryId]);
 
   useEffect(() => {
     // Drop stale permalinks after a forget/archive or unknown id once the
@@ -198,116 +226,143 @@ function MemoryLibrary(props: {
   const loading = !query.data && !query.error;
 
   return (
-    <section className="grid gap-4" aria-labelledby="memory-library-title">
-      <div className="flex flex-wrap items-end justify-between gap-4">
-        <div>
-          <h2
-            className="m-0 font-display text-xl font-medium tracking-[-0.02em] text-dashboard-text"
-            id="memory-library-title"
-          >
-            {searchQuery ? "Search results" : "What Junior remembers"}
-          </h2>
-        </div>
-        {content?.searchPlaceholder ? (
-          <SearchInput
-            className="w-full max-w-md sm:w-auto"
-            label={content.searchPlaceholder}
-            onChange={setSearchText}
-            placeholder={content.searchPlaceholder}
-            size="default"
-            value={searchText}
+    <div
+      className={cn(
+        "grid h-full min-h-0 min-w-0",
+        memoryId && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+      )}
+    >
+      <div
+        aria-label="Memories list"
+        className="min-h-0 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+        ref={listRef}
+        role="region"
+        tabIndex={0}
+      >
+        <PageLayout className="gap-6 sm:gap-8">
+          <PageHeader
+            description={props.page.description}
+            title={props.page.label}
           />
-        ) : 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}
-      />
+          <section
+            className="grid gap-4"
+            aria-labelledby="memory-library-title"
+          >
+            <div className="flex flex-wrap items-end justify-between gap-4">
+              <div>
+                <h2
+                  className="m-0 font-display text-xl font-medium tracking-[-0.02em] text-dashboard-text"
+                  id="memory-library-title"
+                >
+                  {searchQuery ? "Search results" : "What Junior remembers"}
+                </h2>
+              </div>
+              {content?.searchPlaceholder ? (
+                <SearchInput
+                  className="w-full max-w-md sm:w-auto"
+                  label={content.searchPlaceholder}
+                  onChange={setSearchText}
+                  placeholder={content.searchPlaceholder}
+                  size="default"
+                  value={searchText}
+                />
+              ) : null}
+            </div>
 
-      {loading ? (
-        <PageContentSkeleton label="Loading memories" variant="panel" />
-      ) : query.error ? (
-        <Card className="flex items-center gap-3 border-rose-300/20 p-5 text-sm text-rose-200">
-          <CircleAlert aria-hidden="true" size={18} />
-          {query.error.message}
-        </Card>
-      ) : records.length === 0 ? (
-        <Card className="grid min-h-56 place-items-center p-8 text-center">
-          <div>
-            <Database
-              aria-hidden="true"
-              className="mx-auto text-dashboard-text-muted"
-              size={26}
+            <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}
             />
-            <p className="mt-4 mb-0 text-sm text-dashboard-text-muted">
-              {content?.emptyText ?? "No memories yet."}
-            </p>
-          </div>
-        </Card>
-      ) : (
-        <div className="grid gap-3">
-          <Card padding="none">
-            <MemoryListHeader />
-            {records.map((record, index) => (
-              <MemoryRow
-                first={index === 0}
-                key={record.id}
-                onSelect={() =>
-                  navigate(
-                    memoryPath(
-                      memoryId === record.id
-                        ? props.libraryPath
-                        : `/memories/${encodeURIComponent(record.id)}`,
-                    ),
-                  )
-                }
-                record={record}
-                searchQuery={searchQuery}
-                selected={record.id === memoryId}
-              />
-            ))}
-          </Card>
-          <LoadMorePagination
-            className="mt-2"
-            hasMore={!query.isPlaceholderData && Boolean(query.hasNextPage)}
-            loading={query.isFetchingNextPage}
-            onLoadMore={() => void query.fetchNextPage()}
-          />
-          {action.error ? (
-            <InlineError className="text-center">
-              Could not complete this action. Try again.
-            </InlineError>
-          ) : null}
-        </div>
-      )}
-      {!loading ? (
-        <MemoryDetailsDrawer
-          action={action}
-          onAction={runAction}
-          onClose={() => navigate(memoryPath(props.libraryPath))}
+
+            {loading ? (
+              <PageContentSkeleton label="Loading memories" variant="panel" />
+            ) : query.error ? (
+              <Card className="flex items-center gap-3 border-rose-300/20 p-5 text-sm text-rose-200">
+                <CircleAlert aria-hidden="true" size={18} />
+                {query.error.message}
+              </Card>
+            ) : records.length === 0 ? (
+              <Card className="grid min-h-56 place-items-center p-8 text-center">
+                <div>
+                  <Database
+                    aria-hidden="true"
+                    className="mx-auto text-dashboard-text-muted"
+                    size={26}
+                  />
+                  <p className="mt-4 mb-0 text-sm text-dashboard-text-muted">
+                    {content?.emptyText ?? "No memories yet."}
+                  </p>
+                </div>
+              </Card>
+            ) : (
+              <div className="grid gap-3">
+                <Card padding="none">
+                  <MemoryListHeader />
+                  {records.map((record, index) => (
+                    <MemoryRow
+                      first={index === 0}
+                      key={record.id}
+                      onSelect={() =>
+                        navigate(
+                          memoryPath(
+                            memoryId === record.id
+                              ? props.libraryPath
+                              : `/memories/${encodeURIComponent(record.id)}`,
+                          ),
+                        )
+                      }
+                      record={record}
+                      searchQuery={searchQuery}
+                      selected={record.id === memoryId}
+                    />
+                  ))}
+                </Card>
+                <LoadMorePagination
+                  className="mt-2"
+                  hasMore={
+                    !query.isPlaceholderData && Boolean(query.hasNextPage)
+                  }
+                  loading={query.isFetchingNextPage}
+                  onLoadMore={() => void query.fetchNextPage()}
+                />
+                {action.error ? (
+                  <InlineError className="text-center">
+                    Could not complete this action. Try again.
+                  </InlineError>
+                ) : null}
+              </div>
+            )}
+          </section>
+        </PageLayout>
+      </div>
+      {memoryId ? (
+        <MemoryDetails
+          forgetPending={action.isPending}
+          key={memoryId}
+          onClose={closeDetails}
+          onForget={forget}
           record={selectedRecord}
         />
       ) : null}
-    </section>
+    </div>
   );
 }
 
@@ -500,6 +555,7 @@ function MemoryRow(props: {
       <button
         aria-expanded={props.selected}
         aria-label={`View memory details: ${props.record.title}`}
+        data-memory-id={props.record.id}
         className={cn(
           "grid min-w-0 flex-1 cursor-pointer items-center gap-3 border-0 bg-transparent px-4 py-3 text-left",
           MEMORY_GRID,

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

@@ -10,7 +10,8 @@ const MEMORY_BASE_PATH = "/memories";
 const MEMORY_LIBRARY_PATH = `${MEMORY_BASE_PATH}/library`;
 const RESERVED_MEMORY_SEGMENTS = new Set(["library"]);
 
-function isMemoriesLibraryPath(pathname: string): boolean {
+/** Identify library and memory routes that keep the list beside its details. */
+export function isMemoryLibraryPath(pathname: string): boolean {
   if (
     pathname === MEMORY_LIBRARY_PATH ||
     pathname.startsWith(`${MEMORY_LIBRARY_PATH}/`)
@@ -21,21 +22,34 @@ function isMemoriesLibraryPath(pathname: string): boolean {
   return Boolean(match?.[1] && !RESERVED_MEMORY_SEGMENTS.has(match[1]));
 }
 
-/** Place the shared secondary navigation above one Memories page. */
+/**
+ * Place the shared secondary navigation above one Memories page. Library
+ * children fill the remaining height and own their scroll frames.
+ */
 export function MemoryPageLayout(props: { children: ReactNode }) {
+  const library = isMemoryLibraryPath(useLocation().pathname);
   return (
     <SecondaryNavigation
       ariaLabel="Memory navigation"
+      className={
+        library
+          ? "grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]"
+          : undefined
+      }
       items={[
         { end: true, label: "Overview", to: MEMORY_BASE_PATH },
         {
-          isActive: isMemoriesLibraryPath,
+          isActive: isMemoryLibraryPath,
           label: "Memories",
           to: MEMORY_LIBRARY_PATH,
         },
       ]}
     >
-      <PageLayout className="gap-6 sm:gap-8">{props.children}</PageLayout>
+      {library ? (
+        <div className="min-h-0">{props.children}</div>
+      ) : (
+        <PageLayout className="gap-6 sm:gap-8">{props.children}</PageLayout>
+      )}
     </SecondaryNavigation>
   );
 }
@@ -46,10 +60,9 @@ export function MemoryRouteLoading(props: {
   label: string;
   title?: string;
 }) {
-  const location = useLocation();
-  const overview = location.pathname === MEMORY_BASE_PATH;
-  return (
-    <MemoryPageLayout>
+  const library = isMemoryLibraryPath(useLocation().pathname);
+  const content = (
+    <>
       <PageHeader
         description={
           props.description ??
@@ -59,8 +72,19 @@ export function MemoryRouteLoading(props: {
       />
       <PageContentSkeleton
         label={props.label}
-        variant={overview ? "overview" : "library"}
+        variant={library ? "library" : "overview"}
       />
+    </>
+  );
+  return (
+    <MemoryPageLayout>
+      {library ? (
+        <div className="h-full overflow-y-auto">
+          <PageLayout className="gap-6 sm:gap-8">{content}</PageLayout>
+        </div>
+      ) : (
+        content
+      )}
     </MemoryPageLayout>
   );
 }