@sentry/junior-dashboard 0.244.0 → 0.246.0

package/src/client/conversations/ConversationPage.tsx

@@ -12,6 +12,7 @@ import {
   useArchiveConversation,
   useCancelConversationPendingMessages,
   useConversationData,
+  useStopConversationTurn,
   type PendingArchiveConversationUpdate,
 } from "./queries";
 import { conversationIsResponding } from "./transcript";
@@ -26,6 +27,7 @@ import {
 import { ConversationComposer } from "./ConversationComposer";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationForkLinks } from "./ConversationForkLinks";
+import { ConversationAgentTree } from "./ConversationAgentTree";
 import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
 import {
   ConversationAnnotations,
@@ -38,10 +40,12 @@ import {
 import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
+  conversationDetailTitle,
   conversationDisplayTitle,
   conversationFromDetail,
   visualStatusForConversation,
 } from "../format";
+import { useDocumentTitle } from "../documentTitle";
 import { Card } from "../components/layout/Card";
 import {
   conversationParticipants,
@@ -103,6 +107,11 @@ 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;
     onRead?.(conversation.id, conversation.lastSeenAt);
@@ -177,7 +186,8 @@ export function ConversationPage(props: {
     }) => {
       setSubagentTarget({
         conversationId: part.childConversationId,
-        part,
+        label: part.title ?? part.agentName,
+        status: part.status,
       });
     },
     [],
@@ -192,6 +202,9 @@ export function ConversationPage(props: {
         scroll={
           <section className="min-w-0">
             <ConversationHeader
+              agentTree={
+                agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
+              }
               conversationId={conversationId}
               forks={
                 detail.data?.forkedFromConversationId ||
@@ -273,6 +286,7 @@ export function ConversationPage(props: {
                   }
                 />
               }
+              onOpenSubagent={setSubagentTarget}
               onSearchChange={setSearch}
               onViewChange={onViewChange}
               privacy={
@@ -292,7 +306,7 @@ export function ConversationPage(props: {
                   />
                 ) : null
               }
-              title={conversationDisplayTitle(conversation)}
+              title={title}
               view={view}
             />
 
@@ -341,7 +355,9 @@ export function ConversationPage(props: {
           </section>
         }
         dock={
-          view === "rich" && detail.data?.isParticipant ? (
+          // A child Conversation takes input only from its parent agent, and it
+          // runs without interactive auth, so it has no approval to show.
+          view === "rich" && detail.data?.isParticipant && !agentTree ? (
             <ConversationReplyFooter
               conversationId={conversationId}
               // Only pass committed ids for mailbox de-dupe. The full transcript is
@@ -353,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
         }
@@ -379,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,
   );
@@ -433,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
@@ -458,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();
@@ -491,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/SubagentTranscriptDrawer.tsx

@@ -4,11 +4,12 @@ import { Link } from "react-router";
 
 import { useConversationData } from "./queries";
 import { conversationPath } from "./conversationRoutes";
-import { formatMessageTimestamp } from "../format";
+import { conversationDetailTitle, formatMessageTimestamp } from "../format";
 import { buildConversationMarkdown } from "../markdownExport";
-import type { TranscriptViewSubagentPart } from "../types";
 import { Drawer } from "../components/Drawer";
 import { SearchInput } from "../components/SearchInput";
+import { StatusChip } from "../components/StatusChip";
+import { subagentStatusTone } from "./ConversationChildAgents";
 import { CopyMarkdownButton } from "./CopyMarkdownButton";
 import {
   TranscriptSearchToggle,
@@ -19,9 +20,13 @@ import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { transcriptEmptyClass } from "./transcriptStyles";
 
+/** One child Conversation to show, with what its parent already knows. */
 export interface SubagentTranscriptTarget {
   conversationId: string;
-  part: TranscriptViewSubagentPart;
+  /** Task title or agent name, shown before the child loads. */
+  label?: string;
+  /** Child status from the parent, which knows how the child ended. */
+  status?: string;
 }
 
 /** Show a child conversation through the ordinary authorized detail API. */
@@ -51,13 +56,8 @@ function SubagentTranscriptDrawerContent(props: {
 
   const detail = query.data;
   const label =
-    props.target.part.title ||
-    detail?.displayTitle ||
-    props.target.part.subagentKind;
-  const meta = [
-    statusLabel(props.target.part, detail?.status),
-    detail ? formatMessageTimestamp(Date.parse(detail.startedAt)) : undefined,
-  ].filter(isString);
+    props.target.label ?? conversationDetailTitle(detail) ?? "Subagent";
+  const status = statusLabel(props.target.status, detail?.status);
   const searchOpenVisible = searchOpen || search.length > 0;
 
   const titleId = "subagent-transcript-drawer-title";
@@ -122,9 +122,20 @@ function SubagentTranscriptDrawerContent(props: {
               <ExternalLink aria-hidden="true" size={12} strokeWidth={2.25} />
             </Link>
           </div>
-          <div className="mt-1 break-words font-mono text-xs leading-snug text-dashboard-text-muted">
-            {meta.join(" · ")}
-          </div>
+          {status || detail ? (
+            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-dashboard-text-muted">
+              {status ? (
+                <StatusChip size="compact" tone={subagentStatusTone(status)}>
+                  {status}
+                </StatusChip>
+              ) : null}
+              {detail ? (
+                <time className="font-mono" dateTime={detail.startedAt}>
+                  {formatMessageTimestamp(Date.parse(detail.startedAt))}
+                </time>
+              ) : null}
+            </div>
+          ) : null}
           {searchOpenVisible ? (
             <div className="mt-3 min-w-0">
               <SearchInput
@@ -169,13 +180,13 @@ function SubagentTranscriptDrawerContent(props: {
 }
 
 function statusLabel(
-  part: TranscriptViewSubagentPart,
-  detailStatus?: string,
-): string {
-  if (part.status !== "running" && part.status !== "completed") {
-    return part.status;
+  status: string | undefined,
+  detailStatus: string | undefined,
+): string | undefined {
+  if (status && status !== "running" && status !== "completed") {
+    return status;
   }
-  return detailStatus ?? part.status;
+  return detailStatus ?? status;
 }
 
 function DrawerEmptyState(props: {
@@ -193,7 +204,3 @@ function DrawerEmptyState(props: {
     </div>
   );
 }
-
-function isString(value: string | undefined): value is string {
-  return typeof value === "string" && value.length > 0;
-}

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/format.ts

@@ -660,6 +660,21 @@ function compareTimeDesc(a: string | undefined, b: string | undefined): number {
   return (parseTime(b) ?? 0) - (parseTime(a) ?? 0);
 }
 
+/**
+ * Return the title of a loaded Conversation. A child agent Conversation uses
+ * its agent label from the agent tree, because it has no title of its own.
+ */
+export function conversationDetailTitle(
+  detail:
+    | Pick<ConversationTranscript, "agentTree" | "displayTitle">
+    | undefined,
+): string | undefined {
+  return (
+    detail?.agentTree?.at(-1)?.label ??
+    (detail?.displayTitle?.trim() || undefined)
+  );
+}
+
 /** Return the display title prepared by the reporting API. */
 export function conversationDisplayTitle(
   conversation: Conversation | undefined,

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" ? (

package/src/client/pages/dev/SegmentedFixtures.tsx

@@ -11,7 +11,7 @@ export function SegmentedTabsFixture() {
       <SegmentedTabs
         items={[
           { label: "Details", value: "details" },
-          { label: "Memories", value: "memories" },
+          { count: 3, label: "Memories", value: "memories" },
           { label: "Usage", value: "usage" },
         ]}
         label="Conversation panels"