@sentry/junior-dashboard 0.245.0 → 0.246.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.245.0",
+  "version": "0.246.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,8 +34,8 @@
     "react-router": "^7.18.2",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.245.0",
-    "@sentry/junior": "0.245.0"
+    "@sentry/junior-plugin-api": "0.246.0",
+    "@sentry/junior": "0.246.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",

package/src/client/components/layout/PageHeader.tsx

@@ -4,16 +4,27 @@ import {
   TimeRangeSelector,
   type TimeRangeDays,
 } from "../controls/TimeRangeSelector";
+import { useDocumentTitle } from "../../documentTitle";
 
-/** Render a spacious analytics page heading with optional controls. */
+/**
+ * Render a spacious analytics page heading with optional controls.
+ *
+ * Also names the browser tab after the page. Pass `documentTitle` when the tab
+ * needs more context than the visible heading.
+ */
 export function PageHeader(props: {
   actions?: ReactNode;
   description: ReactNode;
+  documentTitle?: string;
   onRangeChange?(value: TimeRangeDays): void;
   range?: TimeRangeDays;
   rangeOptions?: TimeRangeDays[];
   title: ReactNode;
 }) {
+  useDocumentTitle(
+    props.documentTitle ??
+      (typeof props.title === "string" ? props.title : undefined),
+  );
   const rangeActions =
     props.range !== undefined && props.onRangeChange ? (
       <TimeRangeSelector

package/src/client/conversations/ConversationComposer.tsx

@@ -10,7 +10,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
-import { ImagePlus, Send } from "lucide-react";
+import { ImagePlus, Send, Square } from "lucide-react";
 
 import { Button } from "../components/Button";
 import { useDashboardOnline } from "../connection";
@@ -78,6 +78,12 @@ type ConversationComposerProps = {
     images?: InputImage[],
   ): Promise<void>;
   onSubmitStart?: () => void;
+  /**
+   * Stop the active Turn. Present only while a Turn can be stopped. Resolves
+   * with queued text that the stop removed, which returns to the draft.
+   */
+  onStop?: () => Promise<string | undefined>;
+  stopPending?: boolean;
 };
 
 /** Render the dashboard message composer for a new or existing conversation. */
@@ -115,6 +121,7 @@ export const ConversationComposer = memo(function ConversationComposer(
   });
   // Blocks same-tick double fire. For create restore, also blocks until settle.
   const submittingRef = useRef(false);
+  const stoppingRef = useRef(false);
   // Monotonic token so a late failed create never restores over a newer submit.
   const submitTokenRef = useRef(0);
   const sendLocked =
@@ -304,6 +311,30 @@ export const ConversationComposer = memo(function ConversationComposer(
     }
   };
 
+  // Put queued text back ahead of anything the reader already typed.
+  const stopTurn = async () => {
+    if (!props.onStop || stoppingRef.current) return;
+    stoppingRef.current = true;
+    let restored: string | undefined;
+    try {
+      restored = await props.onStop();
+    } catch {
+      // The parent owns the stop error message.
+      return;
+    } finally {
+      stoppingRef.current = false;
+    }
+    if (!restored) return;
+    const current = draftRef.current.text;
+    const next: ConversationDraft = {
+      ...draftRef.current,
+      text: current.trim() ? `${restored}\n${current}` : restored,
+    };
+    replaceMessage(next);
+    storeDraft(storageKey, next);
+    textareaRef.current?.focus({ preventScroll: true });
+  };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (
       event.key === "Enter" &&
@@ -317,20 +348,12 @@ export const ConversationComposer = memo(function ConversationComposer(
 
   return (
     <div className="grid min-w-0 gap-1.5">
-      {!online || props.error || imageError ? (
+      {props.error || imageError ? (
         <div
           aria-live="polite"
-          className={
-            !online
-              ? "min-w-0 font-mono text-xs leading-relaxed text-amber-100/80"
-              : "min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
-          }
+          className="min-w-0 font-mono text-xs leading-relaxed text-red-300/80"
         >
-          {!online
-            ? images.length
-              ? "Connect to send. Image drafts stay here until you leave."
-              : "Connect to send. Your draft is saved."
-            : (imageError ?? props.error)}
+          {imageError ?? props.error}
         </div>
       ) : null}
       <form
@@ -451,29 +474,39 @@ export const ConversationComposer = memo(function ConversationComposer(
               </div>
             )}
           </div>
-          <Button
-            aria-label={sendLocked ? "Sending message" : props.submitLabel}
-            className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
-            disabled={
-              (!canSend && !images.length) ||
-              !online ||
-              sendLocked ||
-              readingImages
-            }
-            title={
-              !online
-                ? "Connect to send"
-                : sendLocked
-                  ? "Sending message"
-                  : props.submitLabel
-            }
-            type="submit"
-          >
-            <Send aria-hidden="true" size={14} />
-            <span className="hidden md:inline">
-              {sendLocked ? "Sending…" : props.submitLabel}
-            </span>
-          </Button>
+          <div className="flex shrink-0 items-center gap-2">
+            {props.onStop ? (
+              <Button
+                aria-label={props.stopPending ? "Stopping" : "Stop"}
+                className="rounded-lg font-sans"
+                disabled={props.stopPending || !online}
+                onClick={() => void stopTurn()}
+                title="Stop Junior"
+              >
+                <Square aria-hidden="true" fill="currentColor" size={12} />
+                <span className="hidden md:inline">
+                  {props.stopPending ? "Stopping…" : "Stop"}
+                </span>
+              </Button>
+            ) : null}
+            <Button
+              aria-label={sendLocked ? "Sending message" : props.submitLabel}
+              className="rounded-lg !border-0 !bg-cyan-100 font-sans !text-dashboard-text-inverse hover:!bg-cyan-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-cyan-300/55 disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted"
+              disabled={
+                (!canSend && !images.length) ||
+                !online ||
+                sendLocked ||
+                readingImages
+              }
+              title={sendLocked ? "Sending message" : props.submitLabel}
+              type="submit"
+            >
+              <Send aria-hidden="true" size={14} />
+              <span className="hidden md:inline">
+                {sendLocked ? "Sending…" : props.submitLabel}
+              </span>
+            </Button>
+          </div>
         </div>
       </form>
     </div>

package/src/client/conversations/ConversationPage.tsx

@@ -12,6 +12,7 @@ import {
   useArchiveConversation,
   useCancelConversationPendingMessages,
   useConversationData,
+  useStopConversationTurn,
   type PendingArchiveConversationUpdate,
 } from "./queries";
 import { conversationIsResponding } from "./transcript";
@@ -44,6 +45,7 @@ import {
   conversationFromDetail,
   visualStatusForConversation,
 } from "../format";
+import { useDocumentTitle } from "../documentTitle";
 import { Card } from "../components/layout/Card";
 import {
   conversationParticipants,
@@ -105,6 +107,10 @@ export function ConversationPage(props: {
       <ParticipantAvatarStack participants={participants} size="detail" />
     ) : null;
   const conversationDetail = detail.data;
+  const title =
+    conversationDetailTitle(detail.data) ??
+    conversationDisplayTitle(conversation);
+  useDocumentTitle(detail.data || conversation ? title : undefined);
   const agentTree = detail.data?.agentTree;
   useEffect(() => {
     if (!conversation) return;
@@ -300,10 +306,7 @@ export function ConversationPage(props: {
                   />
                 ) : null
               }
-              title={
-                conversationDetailTitle(detail.data) ??
-                conversationDisplayTitle(conversation)
-              }
+              title={title}
               view={view}
             />
 
@@ -366,6 +369,7 @@ export function ConversationPage(props: {
               // every 2s; a prop would bust footer memo while the reader types.
               pendingGeneratedAtRef={pendingGeneratedAtRef}
               pendingMessages={detail.pendingMessages}
+              stoppable={live}
             />
           ) : undefined
         }
@@ -392,8 +396,13 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
   pendingGeneratedAtRef: { current: string | undefined };
   pendingMessages: readonly ConversationMailboxMessage[];
+  /** True while the conversation has a Turn that a stop can end. */
+  stoppable: boolean;
 }) {
   const appendMessage = useAppendConversationMessage(props.conversationId);
+  const stopTurn = useStopConversationTurn(props.conversationId);
+  const stopTurnRef = useRef(stopTurn);
+  stopTurnRef.current = stopTurn;
   const cancelPendingMessages = useCancelConversationPendingMessages(
     props.conversationId,
   );
@@ -446,6 +455,7 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     if (!cancelPendingMessagesRef.current.isPending) {
       cancelPendingMessagesRef.current.reset();
     }
+    if (!stopTurnRef.current.isPending) stopTurnRef.current.reset();
     onPinRequestRef.current();
   }, []);
   const cancellableMessageIds = props.pendingMessages
@@ -471,6 +481,12 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     ),
   );
 
+  const onStop = useCallback(async () => {
+    const result = await stopTurnRef.current.mutateAsync();
+    const restored = result.stoppedMessages.map((message) => message.text);
+    return restored.length ? restored.join("\n") : undefined;
+  }, []);
+
   const onMailboxLayoutChange = useCallback(() => {
     if (!window.matchMedia("(max-width: 767px)").matches) return;
     onPinRequestRef.current();
@@ -504,9 +520,12 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     >
       <ConversationComposer
         draftId={props.conversationId}
+        error={stopTurn.error ? "Could not stop Junior. Try again." : undefined}
         label="Continue this conversation"
         submitLabel="Send"
         onFocus={onComposerFocus}
+        onStop={props.stoppable ? onStop : undefined}
+        stopPending={stopTurn.isPending}
         onSubmitStart={onSubmitStart}
         onSubmit={onSubmit}
       />

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -20,6 +20,8 @@ export function isCollapsibleActivityEntry(
   if (entry.kind === "failure") return false;
   // Delivered files are human-facing media, not collapsible tool chrome.
   if (entry.kind === "attachments_delivered") return false;
+  // Child agent rows stay in the main view, like their result events.
+  if (entry.kind === "subagent") return false;
   if (entry.kind === "message") return false;
   return true;
 }
@@ -91,9 +93,6 @@ export function activityGroupSummary(
       ? [entry.part.event]
       : [],
   );
-  const subagentCount = entries.filter(
-    (entry) => entry.kind === "subagent",
-  ).length;
   const structuredCount = entries.filter(
     (entry) => entry.kind === "structured_event",
   ).length;
@@ -115,9 +114,6 @@ export function activityGroupSummary(
     reasoningCount > 0
       ? countLabel(reasoningCount, "1 reasoning entry", "reasoning entries")
       : undefined,
-    subagentCount > 0
-      ? countLabel(subagentCount, "1 subagent", "subagents")
-      : undefined,
     compactionCount > 0
       ? countLabel(compactionCount, "context compacted", "context compacted")
       : undefined,
@@ -135,11 +131,9 @@ export function activityGroupSummary(
 }
 
 function hasLiveActivity(entries: RenderedTranscriptEntry[]): boolean {
-  return entries.some((entry) => {
-    if (entry.kind === "tool") return entry.part.status === "running";
-    if (entry.kind === "subagent") return entry.part.status === "running";
-    return false;
-  });
+  return entries.some(
+    (entry) => entry.kind === "tool" && entry.part.status === "running",
+  );
 }
 
 /** Keep activity collapsed until the reader explicitly opens it. */

package/src/client/conversations/queries.ts

@@ -26,6 +26,7 @@ import {
   conversationEventPageSchema,
   conversationPendingMessagesReportSchema,
   forkConversationResponseSchema,
+  stopConversationTurnResponseSchema,
 } from "@sentry/junior/api/schema";
 
 import type { DashboardCoreData } from "../types";
@@ -395,6 +396,49 @@ export function useCancelConversationPendingMessages(conversationId: string) {
   });
 }
 
+/**
+ * Local cache of queued rows that a stop removed. The worker drops them only
+ * when it observes the stop, so the mailbox can still list them for a while.
+ * Inbound ids are unique, so the cache never needs to forget one.
+ */
+function stoppedMessageIdsQueryKey(conversationId: string | undefined) {
+  return ["conversation", conversationId, "stopped-messages"] as const;
+}
+
+/** Stop the active Turn and hide its removed queued rows until polls agree. */
+export function useStopConversationTurn(conversationId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () =>
+      post(
+        stopConversationTurnResponseSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/stop`,
+        {},
+      ),
+    onSuccess: (result) => {
+      const stopped = result.stoppedInboundMessageIds;
+      if (!stopped.length) return;
+      queryClient.setQueryData<readonly string[]>(
+        stoppedMessageIdsQueryKey(conversationId),
+        (current) => [...(current ?? []), ...stopped],
+      );
+      // A web row keeps its Message id as its inbound id. Drop local sends the
+      // stop removed so they do not wait for a mailbox row that never comes.
+      queryClient.setQueryData<ConversationOutboxMessage[]>(
+        conversationOutboxQueryKey(conversationId),
+        (current) =>
+          current?.filter((message) => !stopped.includes(message.messageId)),
+      );
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({
+        exact: true,
+        queryKey: conversationDetailQueryKey(conversationId),
+      });
+    },
+  });
+}
+
 /** Archive or restore one conversation with an immediate reversible cache update. */
 export function useArchiveConversation(
   conversationId: string,
@@ -571,6 +615,18 @@ export function useConversationData(conversationId: string | undefined) {
     staleTime: Infinity,
     gcTime: Infinity,
   });
+  const stoppedMessageIds = useQuery({
+    enabled: Boolean(conversationId),
+    // Local-only cache written by useStopConversationTurn.
+    queryFn: async (): Promise<readonly string[]> =>
+      queryClient.getQueryData<readonly string[]>(
+        stoppedMessageIdsQueryKey(conversationId),
+      ) ?? [],
+    queryKey: stoppedMessageIdsQueryKey(conversationId),
+    initialData: [],
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
   const awaitingMessage = outbox.data.some(
     (message) => message.status !== "failed",
   );
@@ -643,14 +699,23 @@ export function useConversationData(conversationId: string | undefined) {
     undefined,
   );
   const pendingMessages = useMemo(() => {
+    // Hide stopped rows from both sources, or the outbox copy of a stopped
+    // send would look unseen and come back.
+    const stopped = stoppedMessageIds.data;
     const next = mergeConversationMailboxMessages(
-      mailbox?.messages,
-      outbox.data,
+      stopped.length
+        ? mailbox?.messages.filter(
+            (message) => !stopped.includes(message.inboundMessageId),
+          )
+        : mailbox?.messages,
+      stopped.length
+        ? outbox.data.filter((message) => !stopped.includes(message.messageId))
+        : outbox.data,
       pendingMessagesRef.current,
     );
     pendingMessagesRef.current = next;
     return next;
-  }, [outbox.data, mailbox?.messages]);
+  }, [outbox.data, mailbox?.messages, stoppedMessageIds.data]);
   const invalidHistoryCursor = isInvalidCursorError(history.error);
   const shouldRefreshDetail = Boolean(
     detailData &&

package/src/client/documentTitle.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+import { getDashboardAgentName } from "./agentName";
+
+/** Format a browser tab title as `{page} - {agent}`, or the agent name alone. */
+export function formatDocumentTitle(
+  title: string | undefined,
+  agentName = getDashboardAgentName(),
+): string {
+  const page = title?.trim();
+  return page ? `${page} - ${agentName}` : agentName;
+}
+
+/**
+ * Show the current page in the browser tab title.
+ *
+ * An empty title leaves the tab alone, so a parent without a title cannot
+ * replace a child's title. Unmount restores the agent name.
+ */
+export function useDocumentTitle(title: string | undefined): void {
+  useEffect(() => {
+    if (!title?.trim()) return;
+    document.title = formatDocumentTitle(title);
+    return () => {
+      document.title = formatDocumentTitle(undefined);
+    };
+  }, [title]);
+}

package/src/client/pages/PersonalTokensPage.tsx

@@ -9,6 +9,7 @@ import {
 import { deleteDashboardResource, fetchDashboardJson, post } from "../http";
 import { dashboardContainerClass } from "../styles";
 import { getDashboardAgentName } from "../agentName";
+import { useDocumentTitle } from "../documentTitle";
 import { Button } from "../components/Button";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
@@ -18,6 +19,7 @@ const personalTokensQueryKey = ["dashboard", "personal-tokens"] as const;
 
 /** Create and revoke personal API tokens for local clients. */
 export function PersonalTokensPage() {
+  useDocumentTitle("API tokens");
   const queryClient = useQueryClient();
   const createTokenStarted = useRef(false);
   const [name, setName] = useState("Local agent");

package/src/client/pages/SettingsPage.tsx

@@ -10,6 +10,7 @@ import { Field } from "../components/Field";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
 import { TextInput } from "../components/TextInput";
+import { useDocumentTitle } from "../documentTitle";
 import { patch } from "../http";
 import { dashboardContainerClass } from "../styles";
 import type { DashboardCoreData } from "../types";
@@ -22,6 +23,7 @@ type SettingsPageProps = {
 
 /** Let the signed-in user manage their dashboard profile. */
 export function SettingsPage({ identity }: SettingsPageProps) {
+  useDocumentTitle("Settings");
   const queryClient = useQueryClient();
   const [displayName, setDisplayName] = useState(identity.user.name ?? "");
   useEffect(() => {

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

@@ -6,6 +6,7 @@ import {
   type AutomationSummary,
 } from "@sentry/junior/api/schema";
 import { useAutomationData } from "../../api";
+import { useDocumentTitle } from "../../documentTitle";
 import { fetchDashboardJson } from "../../http";
 import { Button } from "../../components/Button";
 import { FormNotice } from "../../components/FormNotice";
@@ -37,6 +38,13 @@ export function AutomationEditPage(props: { enabled: boolean }) {
   });
   const returnPath = `/automations/list${location.search}`;
   const value = summary.data;
+  useDocumentTitle(
+    value
+      ? canEdit
+        ? `${value.title} · Edit`
+        : value.title
+      : "Edit automation",
+  );
   const status =
     value?.kind === "event"
       ? value.status !== "active"

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

@@ -133,6 +133,7 @@ function AutomationExecutionsView(props: {
           {...(data.executionDays.length > 0
             ? { onRangeChange: setRange, range }
             : {})}
+          documentTitle={`${data.automation.title} · Executions`}
           title={data.automation.title}
         />
       </div>

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

@@ -125,6 +125,7 @@ function AutomationVersionsView(props: {
         <BackLink to={props.backTo} />
         <PageHeader
           description={`${automation.kind} automation · ${automation.destination.label} · ${data.versions.length} ${data.versions.length === 1 ? "version" : "versions"}`}
+          documentTitle={`${automation.title} · Version history`}
           title={automation.title}
         />
       </div>

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

@@ -27,6 +27,7 @@ import { PageHeader } from "../../components/layout/PageHeader";
 import { StatCard } from "../../components/metrics/StatCard";
 import { deleteDashboardResource } from "../../http";
 import { automationPath } from "../../format";
+import { useDocumentTitle } from "../../documentTitle";
 import {
   pathWithSearch,
   useDebouncedSearchParam,
@@ -122,6 +123,12 @@ export function AutomationsPage(props: {
   const totalPages = pageCount(visibleTaskCount, filters.pageSize);
   const page = query.data?.page ?? filters.page;
   const selectedTask = detail.data;
+  // Overview names the tab through PageHeader; the list has a plain heading.
+  useDocumentTitle(
+    props.view === "list"
+      ? (selectedTask?.title ?? "All automations")
+      : undefined,
+  );
   // A deletion or a shared URL can leave the requested page past the last page.
   useEffect(() => {
     if (

package/src/client/pages/code/RepositoryPage.tsx

@@ -113,6 +113,11 @@ export function RepositoryPage(props: { tab: CodeRepositoryTab }) {
             </div>
           }
           description={<RepositoryDescription data={data} />}
+          documentTitle={
+            props.tab === "overview"
+              ? repository.name
+              : `${repository.name} · ${props.tab === "changes" ? "Changes" : "Conversations"}`
+          }
           title={repository.name}
         />
         {props.tab === "overview" ? (