@sentry/junior-dashboard 0.275.0 → 0.276.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.275.0",
+  "version": "0.276.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@sentry/browser": "11.10.0",
     "@tanstack/react-query": "^5.100.14",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "^0.7.1",
@@ -39,10 +40,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.275.0"
+    "@sentry/junior-plugin-api": "0.276.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.275.0"
+    "@sentry/junior": "0.276.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +64,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.275.0"
+    "@sentry/junior": "0.276.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/app.ts

@@ -11,7 +11,10 @@ import {
   type JuniorApiVariables,
 } from "@sentry/junior/api";
 import { apiErrorSchema } from "@sentry/junior/api/schema";
-import { initSentry } from "@sentry/junior/instrumentation";
+import {
+  getBrowserSentryConfig,
+  initSentry,
+} from "@sentry/junior/instrumentation";
 import { JUNIOR_VERSION } from "@sentry/junior/version";
 import { DASHBOARD_VERSION_HEADER } from "./dashboard-version";
 import { revalidateConversation } from "./conversation-cache";
@@ -527,10 +530,12 @@ export function createDashboardApp(
     }
   }
 
+  const renderPage = () =>
+    renderDashboard(basePath, agentName, getBrowserSentryConfig());
   for (const { nested, path } of dashboardPagePaths(basePath)) {
-    app.get(path, () => renderDashboard(basePath, agentName));
+    app.get(path, renderPage);
     if (nested) {
-      app.get(`${path}/*`, () => renderDashboard(basePath, agentName));
+      app.get(`${path}/*`, renderPage);
     }
   }
   for (const route of options.pluginRoutes ?? []) {

package/src/client/conversations/ConversationComposer.tsx

@@ -81,7 +81,10 @@ type ConversationComposerProps = {
    * crushed beside the mobile send button.
    */
   footerStart?: ReactNode;
+  /** Text only, for a narrow panel: no images, no key hint, icon-only send. */
+  compact?: boolean;
   label: string;
+  placeholder?: string;
   /**
    * Restore the submitted text after a failed accept when there is no mailbox
    * outbox (new conversation create). Existing conversations keep failures in
@@ -433,7 +436,12 @@ export const ConversationComposer = memo(function ConversationComposer(
         )}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
+          // Always cancel a file drop, or the browser opens the file.
           event.preventDefault();
+          if (props.compact) {
+            event.dataTransfer.dropEffect = "none";
+            return;
+          }
           event.dataTransfer.dropEffect = "copy";
           setDragging(true);
         }}
@@ -444,12 +452,13 @@ export const ConversationComposer = memo(function ConversationComposer(
         onDrop={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
           event.preventDefault();
+          if (props.compact) return;
           setDragging(false);
           void addImages(Array.from(event.dataTransfer.files));
         }}
         onPaste={(event) => {
           const files = Array.from(event.clipboardData.files);
-          if (!files.length) return;
+          if (props.compact || !files.length) return;
           event.preventDefault();
           void addImages(files);
         }}
@@ -510,7 +519,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           }}
           onFocus={props.onFocus}
           onKeyDown={handleKeyDown}
-          placeholder="Message Junior…"
+          placeholder={props.placeholder ?? "Message Junior…"}
           ref={textareaRef}
           rows={1}
           spellCheck={autocorrect}
@@ -524,27 +533,29 @@ export const ConversationComposer = memo(function ConversationComposer(
           )}
         >
           <div className="flex min-w-0 items-center gap-3">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    focusableWhenDisabled
-                    aria-label="Attach images"
-                    disabled={sendLocked || readingImages}
-                    onClick={() => fileInputRef.current?.click()}
-                    size="icon"
-                    type="button"
-                  >
-                    <ImagePlus aria-hidden="true" size={16} />
-                  </Button>
-                }
-              />
-              <TooltipContent size="compact">
-                Attach images (up to 3 MB total)
-              </TooltipContent>
-            </Tooltip>
+            {props.compact ? null : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      focusableWhenDisabled
+                      aria-label="Attach images"
+                      disabled={sendLocked || readingImages}
+                      onClick={() => fileInputRef.current?.click()}
+                      size="icon"
+                      type="button"
+                    >
+                      <ImagePlus aria-hidden="true" size={16} />
+                    </Button>
+                  }
+                />
+                <TooltipContent size="compact">
+                  Attach images (up to 3 MB total)
+                </TooltipContent>
+              </Tooltip>
+            )}
             {props.footerStart}
-            {props.footerStart ? null : (
+            {props.footerStart || props.compact ? null : (
               <div className="hidden min-w-0 font-sans text-xs leading-relaxed text-dashboard-text-muted md:block">
                 Enter to send · Shift+Enter for a new line
               </div>
@@ -565,7 +576,10 @@ export const ConversationComposer = memo(function ConversationComposer(
             ) : null}
             <Button
               aria-label={sendLocked ? "Sending message" : props.submitLabel}
-              className="disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100"
+              className={cn(
+                "disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100",
+                props.compact && "w-9 px-0",
+              )}
               disabled={
                 (!canSend && !images.length) ||
                 !online ||
@@ -576,9 +590,11 @@ export const ConversationComposer = memo(function ConversationComposer(
               type="submit"
             >
               <Send aria-hidden="true" size={14} />
-              <span className="hidden md:inline">
-                {sendLocked ? "Sending…" : props.submitLabel}
-              </span>
+              {props.compact ? null : (
+                <span className="hidden md:inline">
+                  {sendLocked ? "Sending…" : props.submitLabel}
+                </span>
+              )}
             </Button>
           </div>
         </div>

package/src/client/conversations/ConversationDetails.tsx

@@ -1,11 +1,11 @@
-import { ChevronRight } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import { DetailsPanel, useDetailsPanel } from "../components/DetailsPanel";
 import { formatRelativeTime, formatTime } from "../format";
 import { ConversationReviewItems } from "../review-desk/ConversationReviewItems";
-import { dashboardDisclosureChevronClass } from "../styles";
+import { Button } from "../components/ui/button";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   ConversationChildAgents,
@@ -16,9 +16,14 @@ import {
   type ConversationLink,
 } from "./ConversationLinkedWork";
 import {
-  ConversationMemories,
-  useConversationMemories,
+  ConversationMemoryCard,
+  ConversationMemoryEntries,
 } from "./ConversationMemories";
+import {
+  conversationMemoryEntries,
+  useConversationMemoryState,
+  type ConversationMemoryEntry,
+} from "./conversationMemory";
 import {
   ConversationWatches,
   useConversationWatches,
@@ -43,15 +48,63 @@ export function ConversationDetails(props: {
   onClose(): void;
   /** Open one child agent transcript. A details sheet closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
+  /** Show one memory where its Turn recalled or captured it. */
+  onSelectMemory(entry: ConversationMemoryEntry & { turnId: string }): void;
+  /** The prompt that started each loaded Turn. */
+  memoryPrompts: Map<string, string>;
   overview: ReactNode;
   usage: ReactNode;
 }) {
   const panel = useDetailsPanel();
-  const memories = useConversationMemories(props.conversationId).data?.memories;
+  const memoryList = useConversationMemoryState()?.list;
+  const [memoriesOpen, setMemoriesOpen] = useState(false);
+  const [memoryConversationId, setMemoryConversationId] = useState(
+    props.conversationId,
+  );
+  if (memoryConversationId !== props.conversationId) {
+    setMemoryConversationId(props.conversationId);
+    setMemoriesOpen(false);
+  }
   const agents = useConversationChildAgents(props.conversationId).data?.agents;
   const watches =
     useConversationWatches(props.conversationId).data?.watches ?? [];
 
+  if (memoriesOpen && memoryList) {
+    // The list replaces details in place, so nothing stacks over the panel.
+    return (
+      <DetailsPanel
+        label="Conversation details"
+        onClose={props.onClose}
+        title={
+          <div className="-ml-2 flex min-w-0 items-center gap-1">
+            <Button
+              aria-label="Back to details"
+              onClick={() => setMemoriesOpen(false)}
+              size="icon"
+            >
+              <ArrowLeft aria-hidden="true" size={15} />
+            </Button>
+            <h2 className="m-0 truncate font-sans text-sm font-semibold text-dashboard-text">
+              Memories
+            </h2>
+          </div>
+        }
+      >
+        <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3">
+          <ConversationMemoryEntries
+            entries={conversationMemoryEntries(memoryList)}
+            onSelect={(entry) => {
+              // The transcript sits under a details sheet. Close it first.
+              if (!panel) props.onClose();
+              props.onSelectMemory(entry);
+            }}
+            prompts={props.memoryPrompts}
+          />
+        </div>
+      </DetailsPanel>
+    );
+  }
+
   return (
     <DetailsPanel
       label="Conversation details"
@@ -135,38 +188,13 @@ export function ConversationDetails(props: {
         {props.identity != null ? (
           <DetailsCard title="Participants">{props.identity}</DetailsCard>
         ) : null}
-        {memories?.length ? (
-          <DetailsCard count={memories.length} title="Memories">
-            <Disclosure label="memories">
-              <ConversationMemories conversationId={props.conversationId} />
-            </Disclosure>
-          </DetailsCard>
+        {memoryList?.events.length ? (
+          <ConversationMemoryCard
+            list={memoryList}
+            onOpen={() => setMemoriesOpen(true)}
+          />
         ) : null}
       </div>
     </DetailsPanel>
   );
 }
-
-/** Hide long, rarely read content behind one show/hide row. */
-function Disclosure(props: { children: ReactNode; label: string }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <div className="grid min-w-0 gap-2">
-      <button
-        aria-expanded={open}
-        className="group -mx-1.5 -my-1 flex min-h-8 items-center gap-2.5 rounded-md px-1.5 py-1.5 text-left text-xs font-medium leading-4 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={() => setOpen((value) => !value)}
-        type="button"
-      >
-        <span className="grid size-5 shrink-0 place-items-center">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-        </span>
-        {open ? `Hide ${props.label}` : `Show ${props.label}`}
-      </button>
-      {open ? props.children : null}
-    </div>
-  );
-}

package/src/client/conversations/ConversationHeader.tsx

@@ -20,14 +20,17 @@ import { ShareConversationButton } from "./ShareConversationButton";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 /**
- * Show the conversation title bar: where it runs, the title, and actions.
- * Run facts, linked work, and the Brief live in Conversation details.
+ * Show the conversation title bar: where it runs, the title, its cost, and
+ * actions. Other run facts, linked work, and the Brief live in Conversation
+ * details.
  */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
   /** A `menu` layout copy action for the `⋯` menu. */
   copyAction?: ReactNode;
+  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
+  cost?: ReactNode;
   archive: ConversationArchiveAction;
   conversationId: string;
   detailsOpen: boolean;
@@ -179,6 +182,11 @@ export function ConversationHeader(props: {
             <span className="shrink-0">{props.privacy}</span>
           </div>
           <div className="flex shrink-0 items-center gap-0.5">
+            {props.cost ? (
+              <span className="mr-2 text-xs tabular-nums text-dashboard-text-muted">
+                {props.cost}
+              </span>
+            ) : null}
             {props.view === "raw" ? (
               // Event log is a debug view reached from the menu. Say which
               // view this is, and give one click back.

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -1,12 +1,13 @@
 import { LockKeyhole } from "lucide-react";
 
-import { ActiveIndicator } from "../components/ActiveIndicator";
+import { Spinner } from "../components/ui/spinner";
 import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
 /**
  * Render a conversation status marker. "Waiting on you" replaces every other
- * marker, then new completions take priority.
+ * marker. A running conversation shows a spinner, so it never looks like an
+ * ended one.
  */
 export function ConversationListStatusIcon(props: {
   finishedSinceSeen: boolean;
@@ -24,6 +25,10 @@ export function ConversationListStatusIcon(props: {
     );
   }
 
+  if (props.status === "active") {
+    return <Spinner aria-label="Running" className="size-3 text-emerald-300" />;
+  }
+
   if (props.finishedSinceSeen) {
     return (
       <span
@@ -40,8 +45,6 @@ export function ConversationListStatusIcon(props: {
         aria-label="Private conversation"
         className={cn(
           "size-3 shrink-0",
-          props.status === "active" &&
-            "animate-[junior-active-indicator_1.8s_ease-in-out_infinite] text-emerald-300 drop-shadow-[0_0_6px_rgba(110,231,183,0.55)] motion-reduce:animate-none",
           props.status === "failed" && "text-rose-300",
           props.status === "idle" && "text-dashboard-text-muted",
         )}
@@ -49,18 +52,20 @@ export function ConversationListStatusIcon(props: {
     );
   }
 
-  if (props.status === "active") {
-    return <ActiveIndicator className="size-1.5" />;
+  if (props.status === "failed") {
+    return (
+      <span
+        aria-label="Failed"
+        className="size-1.5 shrink-0 rounded-full bg-rose-300"
+        role="img"
+      />
+    );
   }
 
   return (
     <span
       aria-hidden="true"
-      className={cn(
-        "size-1.5 shrink-0 rounded-full",
-        props.status === "failed" && "bg-rose-300",
-        props.status === "idle" && "bg-dashboard-text-faint",
-      )}
+      className="size-1.5 shrink-0 rounded-full bg-dashboard-text-faint"
     />
   );
 }

package/src/client/conversations/ConversationMemories.tsx

@@ -1,90 +1,130 @@
-import { useQuery } from "@tanstack/react-query";
-import { Brain } from "lucide-react";
-import { z } from "zod";
+import { ChevronRight } from "lucide-react";
+import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
-import { formatMessageTimestamp } from "../format";
-import { fetchDashboardJson } from "../http";
+import { dashboardDisclosureChevronClass } from "../styles";
+import type {
+  ConversationMemoryEntry,
+  ConversationMemoryList,
+} from "./conversationMemory";
+import { DetailsCard } from "./DetailsList";
 
-const conversationMemoryListSchema = z
-  .object({
-    memories: z.array(
-      z
-        .object({
-          capturedAt: z.iso.datetime(),
-          content: z.string().min(1),
-          id: z.string().min(1),
-          kind: z.enum(["preference", "procedure", "knowledge"]),
-          visibility: z.enum(["private", "public"]),
-        })
-        .strict(),
-    ),
-  })
-  .strict();
-
-/** Load the memories captured from one Conversation. */
-export function useConversationMemories(conversationId: string) {
-  return useQuery({
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
-        conversationMemoryListSchema,
-        `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
-        signal,
-      ),
-    queryKey: ["conversation", conversationId, "memories"],
-    retry: false,
-  });
+/** Count the distinct memories that a Conversation recalled and captured. */
+function conversationMemoryCounts(list: ConversationMemoryList) {
+  const ids = (source: "captured" | "recalled") =>
+    new Set(
+      list.events
+        .filter((event) => event.source === source)
+        .flatMap((event) => event.memoryIds),
+    ).size;
+  return { captured: ids("captured"), recalled: ids("recalled") };
 }
 
-/** Show the memories captured from one Conversation. */
-export function ConversationMemories(props: { conversationId: string }) {
-  const query = useConversationMemories(props.conversationId);
+/** Show memory counts in one row that opens the full memory list. */
+export function ConversationMemoryCard(props: {
+  list: ConversationMemoryList;
+  onOpen(): void;
+}) {
+  const counts = conversationMemoryCounts(props.list);
+  const summary = [
+    counts.recalled ? `${counts.recalled} recalled` : undefined,
+    counts.captured ? `${counts.captured} captured` : undefined,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  return (
+    <DetailsCard title="Memories">
+      <button
+        className="group -mx-1.5 -my-1 flex min-h-8 w-[calc(100%+0.75rem)] items-center justify-between gap-2.5 rounded-md px-1.5 py-1.5 text-left text-sm tabular-nums text-dashboard-text 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.onOpen}
+        type="button"
+      >
+        {summary}
+        <ChevronRight
+          aria-hidden="true"
+          className={dashboardDisclosureChevronClass}
+        />
+      </button>
+    </DetailsCard>
+  );
+}
 
-  if (query.isPending) {
-    return (
-      <p className="m-0 text-sm text-dashboard-text-muted" role="status">
-        Loading memories…
-      </p>
-    );
-  }
-  if (query.error) {
-    return (
-      <p className="m-0 text-sm text-red-300/80">
-        Could not load memories from this Conversation.
-      </p>
-    );
-  }
-  if (query.data.memories.length === 0) {
-    return (
-      <div className="grid justify-items-center gap-2 py-10 text-center text-dashboard-text-muted">
-        <Brain aria-hidden="true" className="size-5 opacity-60" />
-        <p className="m-0 text-sm">No memories were captured.</p>
-      </div>
-    );
+/**
+ * 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;
+}
 
+/**
+ * List every memory that a Conversation recalled or captured, with its full
+ * text. Selecting one shows it in the transcript.
+ */
+export function ConversationMemoryEntries(props: {
+  entries: ConversationMemoryEntry[];
+  onSelect(entry: ConversationMemoryEntry & { turnId: string }): void;
+  prompts: Map<string, string>;
+}) {
   return (
-    <ol className="m-0 grid list-none gap-3 p-0">
-      {query.data.memories.map((memory) => (
-        <li
-          className="grid gap-2 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-3"
-          key={memory.id}
-        >
-          <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
-            {memory.content}
-          </p>
-          <div className="flex flex-wrap items-center gap-1.5 text-xs tabular-nums text-dashboard-text-muted">
-            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
-              {memory.kind}
-            </span>
-            <span className="rounded-md border border-dashboard-border-subtle bg-dashboard-surface-raised px-1.5 py-0.5">
-              {memory.visibility}
+    <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>
-            <time className="ml-auto" dateTime={memory.capturedAt}>
-              {formatMessageTimestamp(Date.parse(memory.capturedAt), true)}
-            </time>
-          </div>
-        </li>
-      ))}
+          </>
+        );
+        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={className}>{body}</div>
+            )}
+          </li>
+        );
+      })}
     </ol>
   );
 }