@sentry/junior-dashboard 0.271.0 → 0.272.0

package/src/client/conversations/transcriptReadPosition.ts

@@ -0,0 +1,267 @@
+/**
+ * Track how far the reader has read a Conversation transcript.
+ *
+ * Rows from stored events carry `data-transcript-seq`. While the page is
+ * visible, the reporter sends the sequence of the last row that has reached
+ * the viewport. The server keeps the highest value, so every client of the
+ * same user shares one position. Detail polls bring it back to other clients.
+ *
+ * The page reads the position once when a Conversation opens. That value
+ * places the "New" marker and, by the reader's preference, where the
+ * transcript starts. It does not move during the visit, like Slack.
+ */
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useLocalStorage } from "@uidotdev/usehooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  conversationReadPositionSchema,
+  type ConversationDetailReport,
+  type ConversationReadPosition,
+} from "@sentry/junior/api/schema";
+import { put } from "../http";
+import { conversationDetailQueryKey } from "./queries";
+import { scrollRootFor } from "./transcriptBottomPinning";
+
+const READ_REPORT_DELAY_MS = 750;
+const SEQ_ATTRIBUTE = "data-transcript-seq";
+const ROW_SELECTOR = `[${SEQ_ATTRIBUTE}]`;
+const START_POSITION_STORAGE_KEY = "junior:conversation:start-position";
+
+/** Where a Conversation opens: at the first unread row or at the latest. */
+export type ConversationStartPosition = "unread" | "latest";
+
+/**
+ * Event sequences that were unread when the Conversation opened. Rows that
+ * arrive later are not in it, so a reader who follows new replies gets no
+ * marker for them.
+ */
+export type TranscriptUnreadRange = { afterSeq: number; throughSeq: number };
+
+/** The read state when the Conversation opened. */
+export type ReadPositionAtOpen = {
+  lastReadSeq?: number;
+  unread?: TranscriptUnreadRange;
+};
+
+/** Edit the browser-only preference for where Conversations open. */
+export function useConversationStartPosition() {
+  return useLocalStorage<ConversationStartPosition>(
+    START_POSITION_STORAGE_KEY,
+    "unread",
+  );
+}
+
+/**
+ * Read the start preference without subscribing. A Conversation reads it once
+ * when it opens, and this works where `useLocalStorage` cannot, such as
+ * server rendering.
+ */
+export function readConversationStartPosition(): ConversationStartPosition {
+  if (typeof window === "undefined") return "unread";
+  try {
+    const stored = window.localStorage.getItem(START_POSITION_STORAGE_KEY);
+    return stored && JSON.parse(stored) === "latest" ? "latest" : "unread";
+  } catch {
+    return "unread";
+  }
+}
+
+/**
+ * Keep the read state from when the reader opened the Conversation. The page
+ * is keyed by Conversation, so this runs once for each visit.
+ *
+ * The read position comes from the first detail, which can be a cached copy.
+ * The last unread row comes from the first detail fetched in this visit, so a
+ * stale cache cannot hide messages that arrived while the reader was away,
+ * and later polls cannot add rows that arrived after open.
+ */
+export function useReadPositionAtOpen(
+  detail: DetailAtOpen | undefined,
+  /** The first detail fetched in this visit, not only read from the cache. */
+  fetched: DetailAtOpen | undefined,
+): ReadPositionAtOpen {
+  // Store derived state during render so the first transcript render has it.
+  const [opened, setOpened] = useState<{ lastReadSeq?: number }>();
+  const [fetchedEnd, setFetchedEnd] = useState<{ throughSeq?: number }>();
+  const read =
+    opened ??
+    (detail ? { lastReadSeq: detail.readPosition?.lastReadSeq } : undefined);
+  if (!opened && read) setOpened(read);
+  const end =
+    fetchedEnd ??
+    (fetched ? { throughSeq: fetched.events.at(-1)?.seq } : undefined);
+  if (!fetchedEnd && end) setFetchedEnd(end);
+  return readPositionAtOpen(
+    read?.lastReadSeq,
+    end ? end.throughSeq : detail?.events.at(-1)?.seq,
+  );
+}
+
+type DetailAtOpen = {
+  events: readonly { seq: number }[];
+  readPosition?: ConversationReadPosition;
+};
+
+/** Find the rows after the read position, through the last row at open. */
+function readPositionAtOpen(
+  lastReadSeq: number | undefined,
+  throughSeq: number | undefined,
+): ReadPositionAtOpen {
+  if (lastReadSeq === undefined) return {};
+  if (throughSeq === undefined || throughSeq <= lastReadSeq) {
+    return { lastReadSeq };
+  }
+  return { lastReadSeq, unread: { afterSeq: lastReadSeq, throughSeq } };
+}
+
+/**
+ * Send read positions for one Conversation. A position at or before the one
+ * in the cached detail is not sent, because the server already has it. The
+ * cached detail keeps the stored value, so the next visit in this session
+ * opens at the right place.
+ */
+export function useMarkConversationRead(conversationId: string) {
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation({
+    mutationFn: (lastReadSeq: number) =>
+      put(
+        conversationReadPositionSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/read-position`,
+        { lastReadSeq },
+      ),
+    onSuccess: (readPosition) => {
+      queryClient.setQueryData<ConversationDetailReport>(
+        conversationDetailQueryKey(conversationId),
+        (detail) => (detail ? { ...detail, readPosition } : detail),
+      );
+    },
+  });
+  return useCallback(
+    (lastReadSeq: number) => {
+      const stored = queryClient.getQueryData<ConversationDetailReport>(
+        conversationDetailQueryKey(conversationId),
+      )?.readPosition?.lastReadSeq;
+      if (stored !== undefined && lastReadSeq <= stored) return;
+      mutate(lastReadSeq);
+    },
+    [conversationId, mutate, queryClient],
+  );
+}
+
+/**
+ * Report the last transcript row that the reader saw.
+ *
+ * An IntersectionObserver keeps the set of rows in the viewport, so a scroll
+ * does not measure rows. Reports send the highest seq in that set. They wait
+ * a short time and only move forward. A hidden or paused page does not
+ * report. Leaving the page or hiding it sends the pending row at once, so a
+ * quick exit keeps progress.
+ */
+export function useTranscriptReadReporter(input: {
+  content: HTMLElement | null;
+  /** The stored position when the Conversation opened. */
+  lastReadSeq?: number;
+  onRead?: (seq: number) => void;
+  /**
+   * Stop reporting while the rows are not in reading order, such as search
+   * results. This is read when a report is scheduled, so the render that
+   * changes the rows also stops their report.
+   */
+  paused?: boolean;
+}): void {
+  const onReadRef = useRef(input.onRead);
+  onReadRef.current = input.onRead;
+  const pausedRef = useRef(input.paused);
+  pausedRef.current = input.paused;
+  const reportedRef = useRef(input.lastReadSeq ?? -1);
+  const enabled = Boolean(input.onRead);
+
+  useEffect(() => {
+    const content = input.content;
+    const root = scrollRootFor(content);
+    if (!enabled || !content || !root) return;
+    if (typeof IntersectionObserver === "undefined") return;
+
+    const visibleRows = new Set<HTMLElement>();
+    let timer: number | undefined;
+    let seenSeq: number | null = null;
+    const send = () => {
+      if (timer !== undefined) window.clearTimeout(timer);
+      timer = undefined;
+      const seq = seenSeq;
+      seenSeq = null;
+      if (seq === null || seq <= reportedRef.current) return;
+      reportedRef.current = seq;
+      onReadRef.current?.(seq);
+    };
+    const schedule = () => {
+      if (pausedRef.current || document.visibilityState !== "visible") return;
+      // Read the seq now: an activity group row moves its seq as it grows.
+      for (const row of visibleRows) {
+        const seq = Number(row.dataset.transcriptSeq);
+        if (Number.isSafeInteger(seq)) seenSeq = Math.max(seenSeq ?? -1, seq);
+      }
+      if (seenSeq === null) return;
+      timer ??= window.setTimeout(send, READ_REPORT_DELAY_MS);
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") schedule();
+      else send();
+    };
+
+    const intersections = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const row = entry.target as HTMLElement;
+          if (entry.isIntersecting && row.isConnected) visibleRows.add(row);
+          else visibleRows.delete(row);
+        }
+        schedule();
+      },
+      { root: root === window ? null : (root as HTMLElement) },
+    );
+    const rowsIn = (node: Node): HTMLElement[] => {
+      if (!(node instanceof HTMLElement)) return [];
+      const rows = [...node.querySelectorAll<HTMLElement>(ROW_SELECTOR)];
+      return node.matches(ROW_SELECTOR) ? [node, ...rows] : rows;
+    };
+    const observeRows = (node: Node) => {
+      for (const row of rowsIn(node)) intersections.observe(row);
+    };
+    const forgetRows = (node: Node) => {
+      for (const row of rowsIn(node)) {
+        intersections.unobserve(row);
+        visibleRows.delete(row);
+      }
+    };
+    // Rows mount and unmount as history loads and replies arrive. An
+    // activity group row keeps its node and raises its seq as tools arrive.
+    const mutations = new MutationObserver((records) => {
+      let seqChanged = false;
+      for (const record of records) {
+        record.addedNodes.forEach(observeRows);
+        record.removedNodes.forEach(forgetRows);
+        if (record.type === "attributes") {
+          const row = record.target as HTMLElement;
+          intersections.observe(row);
+          seqChanged ||= visibleRows.has(row);
+        }
+      }
+      if (seqChanged) schedule();
+    });
+    mutations.observe(content, {
+      attributeFilter: [SEQ_ATTRIBUTE],
+      childList: true,
+      subtree: true,
+    });
+    observeRows(content);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      send();
+      intersections.disconnect();
+      mutations.disconnect();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [enabled, input.content]);
+}

package/src/client/conversations/transcriptRenderModel.ts

@@ -75,7 +75,7 @@ export type RenderedMessageEntry = {
   };
 };
 
-export type RenderedTranscriptEntry =
+export type RenderedTranscriptEntry = (
   | RenderedAttachmentsDeliveredEntry
   | RenderedContextEventEntry
   | RenderedFailureEntry
@@ -83,7 +83,11 @@ export type RenderedTranscriptEntry =
   | RenderedStructuredEventEntry
   | RenderedReasoningEntry
   | RenderedSubagentEntry
-  | RenderedToolEntry;
+  | RenderedToolEntry
+) & {
+  /** Event sequence of the source message. Pending sends have none. */
+  seq?: number;
+};
 
 export type TranscriptViewMode = "raw" | "rich";
 
@@ -94,6 +98,8 @@ export function groupTranscriptMessages(
   const entries: RenderedTranscriptEntry[] = [];
 
   for (const message of messages) {
+    const seq = message.pending ? undefined : message.sourceSeq;
+    const source = seq === undefined ? {} : { seq };
     let textParts: TranscriptViewTextPart[] = [];
     let textGroup = 0;
     const flushMessage = () => {
@@ -108,6 +114,7 @@ export function groupTranscriptMessages(
         key: `${message.sourceSeq}:message:${textGroup}`,
         kind: "message",
         message: nextMessage as RenderedMessageEntry["message"],
+        ...source,
       });
       textParts = [];
       textGroup += 1;
@@ -124,6 +131,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `tool:${part.id}`,
           kind: "tool",
+          ...source,
           part,
           timestamp: part.startedTimestamp ?? message.timestamp,
         });
@@ -131,6 +139,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `${message.sourceSeq}:reasoning:${partIndex}`,
           kind: "reasoning",
+          ...source,
           part,
           timestamp: message.timestamp,
         });
@@ -138,6 +147,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `subagent:${part.id}`,
           kind: "subagent",
+          ...source,
           part,
           timestamp: message.timestamp,
         });
@@ -145,6 +155,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `${message.sourceSeq}:structured-event:${part.namespace}:${part.name}`,
           kind: "structured_event",
+          ...source,
           part,
           timestamp: message.timestamp,
         });
@@ -152,6 +163,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `${message.sourceSeq}:attachments-delivered`,
           kind: "attachments_delivered",
+          ...source,
           part,
           timestamp: message.timestamp,
         });
@@ -159,6 +171,7 @@ export function groupTranscriptMessages(
         entries.push({
           key: `${message.sourceSeq}:context:${partIndex}`,
           kind: "context",
+          ...source,
           part,
           timestamp: message.timestamp,
         });
@@ -170,6 +183,7 @@ export function groupTranscriptMessages(
       entries.push({
         key: `${message.sourceSeq}:failure`,
         kind: "failure",
+        ...source,
         failureCode: message.failureCode,
         ...(message.failureReason
           ? { failureReason: message.failureReason }

package/src/client/pages/automations/AutomationActions.tsx

@@ -22,9 +22,8 @@ import { FormNotice } from "../../components/FormNotice";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 
 /**
- * Header actions for one Automation: Edit, then creator-only Pause or Resume
- * and Delete. Public readers can edit settings, but only the creator controls
- * lifecycle. Lifecycle actions re-read the revision before they apply.
+ * Header actions for one Automation: Edit, Pause or Resume, and Delete.
+ * Lifecycle actions re-read the revision before they apply.
  */
 export function AutomationActions({
   automation,

package/src/client/pages/automations/AutomationEditor.tsx

@@ -20,10 +20,7 @@ import { AutomationDraftChanges } from "./AutomationDraftChanges";
 import { AutomationFormSection } from "./AutomationFormSection";
 import { AutomationScheduleFields } from "./AutomationScheduleFields";
 import { AutomationEventFields } from "./AutomationEventFields";
-import {
-  AutomationOutcomeFields,
-  AutomationOutcomeList,
-} from "./AutomationOutcomeFields";
+import { AutomationOutcomeFields } from "./AutomationOutcomeFields";
 import {
   automationDraftChanges,
   createAutomationDraft,
@@ -131,11 +128,14 @@ export function AutomationEditor(props: {
   const triggerField = original.kind === "scheduled" ? "schedule" : "trigger";
   const owned = original.ownedByViewer;
   const creator = props.summary.createdBy;
-  // Core switches a non-creator's execution change to system credentials.
+  // Core switches a non-creator's execution or outcome change to system
+  // credentials.
   const dropsCreatorCredentials =
     !owned &&
     original.credentialMode === "creator" &&
-    (changes.instruction !== undefined || changes[triggerField] !== undefined);
+    (changes.instruction !== undefined ||
+      changes[triggerField] !== undefined ||
+      changes.outcomes !== undefined);
   const triggerError = fieldError(triggerField);
   const inputState = (key: string) => ({
     "aria-invalid": Boolean(fieldError(key)) || undefined,
@@ -252,8 +252,8 @@ export function AutomationEditor(props: {
       {owned ? null : (
         <p className="mt-0 mb-6 max-w-2xl text-sm leading-relaxed text-dashboard-text-muted">
           {creator} created this automation. You can edit it because it is in a
-          public channel. Only {creator} can change where results go or turn on
-          their connected accounts. Version history keeps every saved change.
+          public channel. Only {creator} can turn on their connected accounts.
+          Version history keeps every saved change.
         </p>
       )}
       <div className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-10">
@@ -345,25 +345,13 @@ export function AutomationEditor(props: {
                 {fieldError("outcomes")}
               </p>
             ) : null}
-            {owned ? (
-              <AutomationOutcomeFields
-                value={draft.outcomes}
-                original={original.outcomes}
-                destination={props.summary.destination}
-                disabled={save.isPending}
-                onChange={(outcomes) => change({ outcomes })}
-              />
-            ) : (
-              <>
-                <AutomationOutcomeList
-                  outcomes={original.outcomes}
-                  destination={props.summary.destination}
-                />
-                <p className="m-0 text-xs text-dashboard-text-muted">
-                  Only {creator} can change where results go.
-                </p>
-              </>
-            )}
+            <AutomationOutcomeFields
+              value={draft.outcomes}
+              original={original.outcomes}
+              destination={props.summary.destination}
+              disabled={save.isPending}
+              onChange={(outcomes) => change({ outcomes })}
+            />
           </AutomationFormSection>
           <AutomationFormSection
             changed={changes.credentialMode !== undefined}
@@ -424,9 +412,9 @@ export function AutomationEditor(props: {
             </RadioGroup>
             {dropsCreatorCredentials ? (
               <FormNotice title="Saving switches this automation to system credentials.">
-                Only {creator} can let a changed instruction
-                {original.kind === "event" ? " or trigger" : " or schedule"} use
-                their connected accounts.
+                Only {creator} can let a changed instruction,
+                {original.kind === "event" ? " trigger," : " schedule,"} or
+                result destination use their connected accounts.
               </FormNotice>
             ) : null}
             {fieldError("credentialMode") ? (

package/src/client/pages/automations/AutomationOverview.tsx

@@ -198,8 +198,8 @@ function AutomationAbout(props: { automation: AutomationSummary }) {
           {automation.destination.visibility === "private"
             ? null
             : "You can edit, pause, or delete it because it is in a public channel. "}
-          Only {automation.createdBy} can change where results go, turn on their
-          connected accounts, or resume or run it while it uses them.
+          Only {automation.createdBy} can turn on their connected accounts, or
+          resume or run it while it uses them.
         </p>
       )}
     </RailCard>

package/src/client/pages/automations/AutomationVersionsTab.tsx

@@ -223,7 +223,7 @@ function AutomationVersionsView(props: {
             Junior saves these settings as a new version. Future runs use them.
             {automation.ownedByViewer
               ? null
-              : ` Only ${automation.createdBy} can turn on their connected accounts or change where results go.`}
+              : ` Only ${automation.createdBy} can turn on their connected accounts.`}
           </AlertDialogDescription>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>

package/src/client/pages/settings/SettingsPage.tsx

@@ -13,6 +13,11 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Textarea } from "../../components/ui/textarea";
 import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
+import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
+import {
+  useConversationStartPosition,
+  type ConversationStartPosition,
+} from "../../conversations/transcriptReadPosition";
 import { InlineError } from "../../components/InlineError";
 import { Card } from "../../components/layout/Card";
 import { DashboardApiError, fetchDashboardJson, patch, put } from "../../http";
@@ -99,11 +104,68 @@ export function SettingsPage({ identity }: SettingsPageProps) {
           </div>
         </Card>
       </form>
+      <ConversationStartSetting />
       <CustomizationForm />
     </SettingsPageLayout>
   );
 }
 
+const startPositionOptions: {
+  description: string;
+  label: string;
+  value: ConversationStartPosition;
+}[] = [
+  {
+    description: "Open at the first new message, below a “New” line.",
+    label: "Where I left off",
+    value: "unread",
+  },
+  {
+    description: "Always open at the newest message.",
+    label: "Latest message",
+    value: "latest",
+  },
+];
+
+/** Let the user choose where a Conversation opens on this browser. */
+function ConversationStartSetting() {
+  const [startPosition, setStartPosition] = useConversationStartPosition();
+  return (
+    <Card className="mt-6 mb-0" padding="md" variant="raised">
+      <fieldset className="m-0 min-w-0 border-0 p-0">
+        <legend className="m-0 p-0 text-lg font-bold">
+          Open conversations at
+        </legend>
+        <p className="mt-1 mb-4 text-sm text-dashboard-text-muted">
+          Junior keeps your place in each conversation on all your devices. This
+          choice applies to this browser.
+        </p>
+        <RadioGroup<ConversationStartPosition>
+          aria-label="Open conversations at"
+          className="grid gap-3"
+          onValueChange={setStartPosition}
+          value={startPosition}
+        >
+          {startPositionOptions.map((option) => (
+            <label
+              className="flex cursor-pointer items-start gap-3"
+              key={option.value}
+            >
+              <RadioGroupItem className="mt-0.5" value={option.value} />
+              <span className="grid gap-0.5">
+                <span className="text-sm font-medium">{option.label}</span>
+                <span className="text-xs text-dashboard-text-muted">
+                  {option.description}
+                </span>
+              </span>
+            </label>
+          ))}
+        </RadioGroup>
+      </fieldset>
+    </Card>
+  );
+}
+
 /**
  * Let the user save text that changes how the agent replies to them. The
  * server returns 404 when the app does not enable this experiment.