@sentry/junior-dashboard 0.230.0 → 0.232.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.230.0",
+  "version": "0.232.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": "0.230.0",
-    "@sentry/junior-plugin-api": "0.230.0"
+    "@sentry/junior": "0.232.0",
+    "@sentry/junior-plugin-api": "0.232.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",

package/src/client/conversations/ConversationDetailsDrawer.tsx

@@ -6,6 +6,7 @@ import { ButtonLink } from "../components/Button";
 import { Drawer } from "../components/Drawer";
 import { SegmentedTabs } from "../components/SegmentedTabs";
 import { ConversationMemories } from "./ConversationMemories";
+import { ShareConversationButton } from "./ShareConversationButton";
 
 const tabs = [
   { label: "Details", value: "details" },
@@ -85,9 +86,8 @@ export function ConversationDetailsDrawer(props: {
             No additional conversation details.
           </p>
         )}
-        {tab === "details" &&
-        (props.lastActivityAt || props.sentryConversationUrl) ? (
-          <footer className="mt-5 grid gap-3 border-t border-dashboard-border pt-4 text-xs text-dashboard-text-muted">
+        {tab === "details" ? (
+          <footer className="mt-5 grid gap-6 border-t border-dashboard-border pt-4 text-xs text-dashboard-text-muted">
             {props.lastActivityAt ? (
               <div className="flex flex-wrap items-baseline justify-between gap-2">
                 <span>Last activity</span>
@@ -102,20 +102,26 @@ export function ConversationDetailsDrawer(props: {
                 </time>
               </div>
             ) : null}
-            {props.sentryConversationUrl ? (
-              <ButtonLink
-                className="w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-                to={props.sentryConversationUrl}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Open in Sentry
-                <ExternalLink
-                  aria-hidden="true"
-                  className="size-3.5 shrink-0"
-                />
-              </ButtonLink>
-            ) : null}
+            <div className="flex flex-wrap items-center gap-2">
+              <ShareConversationButton
+                key={props.conversationId}
+                conversationId={props.conversationId}
+              />
+              {props.sentryConversationUrl ? (
+                <ButtonLink
+                  className="w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                  to={props.sentryConversationUrl}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Open in Sentry
+                  <ExternalLink
+                    aria-hidden="true"
+                    className="size-3.5 shrink-0"
+                  />
+                </ButtonLink>
+              ) : null}
+            </div>
           </footer>
         ) : null}
       </SegmentedTabs>

package/src/client/conversations/ConversationHeader.tsx

@@ -111,6 +111,7 @@ export function ConversationHeader(props: {
         <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-white/[0.08] bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
           <ConversationHeaderActions
             archive={props.archive}
+            conversationId={props.conversationId}
             copyAction={menuCopyAction}
             detailsOpen={detailsOpen}
             layout="menu"
@@ -185,6 +186,7 @@ export function ConversationHeader(props: {
           </div>
           <ConversationHeaderActions
             archive={props.archive}
+            conversationId={props.conversationId}
             copyAction={props.copyAction}
             detailsOpen={detailsOpen}
             onDetailsClick={() => setDetailsOpen(true)}

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -14,6 +14,7 @@ import { Button, ToggleButton } from "../components/Button";
 import { IconButtonTooltip } from "../components/Tooltip";
 import { cn } from "../styles";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import { ShareConversationButton } from "./ShareConversationButton";
 
 export type ConversationArchiveAction = {
   archived: boolean;
@@ -26,6 +27,7 @@ export type ConversationArchiveAction = {
 /** Show conversation actions in the header or mobile menu. */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
+  conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
   /** `bar` is the desktop icon row. `menu` stacks actions for mobile overflow. */
@@ -65,6 +67,11 @@ export function ConversationHeaderActions(props: {
         >
           <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
         </MenuActionButton>
+        <ShareConversationButton
+          key={props.conversationId}
+          conversationId={props.conversationId}
+          layout="menu"
+        />
         {props.copyAction}
         <ArchiveConversationButton {...props.archive} layout="menu" />
         <MenuActionButton

package/src/client/conversations/ShareConversationButton.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useHref } from "react-router";
+import { Check, Share2 } from "lucide-react";
+
+import { Button } from "../components/Button";
+import { conversationPath } from "./conversationRoutes";
+
+/** Share a conversation link without changing who can access it. */
+export function ShareConversationButton(props: {
+  conversationId: string;
+  layout?: "button" | "menu";
+}) {
+  const href = useHref(conversationPath(props.conversationId));
+  const [status, setStatus] = useState<
+    "idle" | "sharing" | "copied" | "copy-failed" | "share-failed"
+  >("idle");
+  const label =
+    status === "copied"
+      ? "Link copied"
+      : status === "copy-failed"
+        ? "Copy failed — retry"
+        : status === "share-failed"
+          ? "Share failed — retry"
+          : "Share";
+  const Icon = status === "copied" ? Check : Share2;
+  const feedback =
+    status === "copied"
+      ? "Conversation link copied. Access has not changed."
+      : status === "copy-failed"
+        ? "Could not copy the link. Try again or copy it from the address bar."
+        : status === "share-failed"
+          ? "Could not share the link. Try again or copy it from the address bar."
+          : "";
+
+  async function shareLink() {
+    setStatus("sharing");
+    const url = new URL(href, window.location.origin).href;
+    // Touch-first devices use the native sheet, including tablets. Desktop
+    // browsers keep copy-link behavior even when they support native sharing.
+    if (
+      window.matchMedia("(pointer: coarse)").matches &&
+      typeof navigator.share === "function"
+    ) {
+      try {
+        await navigator.share({ url });
+        setStatus("idle");
+      } catch (error) {
+        // Dismissing the sheet must not copy a link or show an error.
+        setStatus(
+          error instanceof DOMException && error.name === "AbortError"
+            ? "idle"
+            : "share-failed",
+        );
+      }
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(url);
+      setStatus("copied");
+    } catch {
+      setStatus("copy-failed");
+    }
+  }
+
+  const content = (
+    <>
+      <Icon aria-hidden="true" size={16} strokeWidth={2} />
+      <span>{label}</span>
+    </>
+  );
+  const button =
+    props.layout === "menu" ? (
+      <button
+        aria-label={label}
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={status === "sharing"}
+        onClick={() => void shareLink()}
+        type="button"
+      >
+        {content}
+      </button>
+    ) : (
+      <Button
+        aria-label={label}
+        disabled={status === "sharing"}
+        onClick={() => void shareLink()}
+      >
+        {content}
+      </Button>
+    );
+
+  return (
+    <>
+      {button}
+      <span className="sr-only" role="status">
+        {feedback}
+      </span>
+    </>
+  );
+}

package/src/client/conversations/SlackMark.tsx

@@ -6,9 +6,13 @@ export function SlackMark(props: { className?: string }) {
       className={props.className}
       fill="currentColor"
       role="img"
-      viewBox="0 0 24 24"
+      viewBox="0 0 127 127"
     >
-      <path d="M6.2 15.3c0 1.4-1.1 2.5-2.5 2.5S1.2 16.7 1.2 15.3s1.1-2.5 2.5-2.5h2.5v2.5zm1.3 0c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v6.2c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5v-6.2zM8.7 6.2c-1.4 0-2.5-1.1-2.5-2.5S7.3 1.2 8.7 1.2s2.5 1.1 2.5 2.5v2.5H8.7zm0 1.3c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5H2.5C1.1 12.5 0 11.4 0 10s1.1-2.5 2.5-2.5h6.2zM17.8 8.7c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5h-2.5V8.7zm-1.3 0c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V2.5C11.5 1.1 12.6 0 14 0s2.5 1.1 2.5 2.5v6.2zM14 17.8c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5v-2.5H14zm0-1.3c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h6.2c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5H14z" />
+      {/* Keep the geometry from packages/docs/public/integrations/slack.svg. */}
+      <path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" />
+      <path d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z" />
+      <path d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z" />
+      <path d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z" />
     </svg>
   );
 }

package/src/client/conversations/conversationOutbox.ts

@@ -1,10 +1,12 @@
 import type {
+  ActorIdentity,
   ConversationPendingMessage,
   InputImage,
 } from "@sentry/junior/api/schema";
 
 /** Client-owned mailbox row waiting on accept, server visibility, or retry. */
 export type ConversationOutboxMessage = {
+  actorIdentity?: ActorIdentity;
   createdAt: string;
   idempotencyKey: string;
   message: string;
@@ -27,6 +29,7 @@ export function conversationOutboxQueryKey(conversationId: string | undefined) {
 
 /** Build one optimistic outbox row for a composer submit. */
 export function conversationOutboxMessageForSubmit(input: {
+  actorIdentity?: ActorIdentity;
   idempotencyKey: string;
   message: string;
   images?: InputImage[];
@@ -35,6 +38,7 @@ export function conversationOutboxMessageForSubmit(input: {
 }): ConversationOutboxMessage {
   const createdAt = input.now ?? new Date().toISOString();
   return {
+    actorIdentity: input.actorIdentity,
     createdAt,
     idempotencyKey: input.idempotencyKey,
     message: input.message,
@@ -49,6 +53,7 @@ export function mailboxMessageFromOutbox(
   message: ConversationOutboxMessage,
 ): ConversationMailboxMessage {
   return {
+    actorIdentity: message.actorIdentity,
     clientStatus: message.status,
     createdAt: message.createdAt,
     delivery: "defer",

package/src/client/conversations/queries.ts

@@ -1,6 +1,7 @@
 import { useDeferredValue, useEffect, useMemo, useRef } from "react";
 import {
   queryOptions,
+  type QueryClient,
   useInfiniteQuery,
   useMutation,
   useMutationState,
@@ -8,6 +9,7 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import type {
+  ActorIdentity,
   ConversationDetailReport,
   ConversationEventPage,
   ConversationFeed,
@@ -25,6 +27,7 @@ import {
   conversationPendingMessagesReportSchema,
 } from "@sentry/junior/api/schema";
 
+import type { DashboardCoreData } from "../types";
 import {
   DashboardApiError,
   del,
@@ -176,6 +179,20 @@ export function conversationDetailQueryOptions(
   });
 }
 
+function outboxActorIdentity(
+  queryClient: QueryClient,
+): ActorIdentity | undefined {
+  const user = queryClient.getQueryData<DashboardCoreData>([
+    "dashboard",
+    "core",
+  ])?.me.user;
+  if (!user?.email) return undefined;
+  return {
+    email: user.email,
+    fullName: user.name || undefined,
+  };
+}
+
 /** Create one dashboard conversation and refresh the personal feed. */
 export function useCreateConversation() {
   const queryClient = useQueryClient();
@@ -193,6 +210,7 @@ export function useCreateConversation() {
           upsertConversationOutboxMessage(current, {
             ...conversationOutboxMessageForSubmit({
               ...args,
+              actorIdentity: outboxActorIdentity(queryClient),
               messageId: accepted.messageId,
             }),
             status: "accepted",
@@ -233,6 +251,7 @@ export function useAppendConversationMessage(conversationId: string) {
       });
       const optimistic = conversationOutboxMessageForSubmit({
         ...args,
+        actorIdentity: outboxActorIdentity(queryClient),
         messageId,
       });
       queryClient.setQueryData<ConversationOutboxMessage[]>(

package/src/client/conversations/transcriptBottomPinning.ts

@@ -15,7 +15,6 @@ import type { ConversationTranscript } from "../types";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 const BOTTOM_PROXIMITY_PX = 96;
-const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 const USER_SCROLL_DELTA_PX = 2;
 
 type ScrollRoot = HTMLElement | Window;
@@ -528,16 +527,8 @@ export function usePinnedTranscriptBottom(input: {
       }
     }
 
-    // Mobile follows new tail content, but switching views is not new activity.
-    if (
-      tailChanged &&
-      input.enabled &&
-      typeof window !== "undefined" &&
-      window.matchMedia(MOBILE_MEDIA_QUERY).matches
-    ) {
-      setFollowingIntent(true);
-    }
-
+    // New activity must preserve scroll-away intent on mobile and desktop.
+    // The reader can resume following with the jump control or by scrolling down.
     if (
       shouldAutoPinTranscriptBottom({
         enabled: input.enabled,

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

@@ -13,6 +13,7 @@ const EVENTS: ConversationReportEventData[] = [
     type: "message",
     messageId: "gallery-user",
     role: "user",
+    source: "slack",
     actorIdentity: { fullName: "Alex Rivera" },
     text: "Show me the visual QA.",
   },
@@ -39,6 +40,7 @@ const EVENTS: ConversationReportEventData[] = [
     type: "message",
     messageId: "gallery-reply",
     role: "assistant",
+    source: "slack",
     text: "The change is ready for review.\n\nI tightened the conversation layout and kept the event details available below.",
     cards: [
       {
@@ -117,7 +119,7 @@ const CONVERSATION: ConversationDetailReport = {
   lastSeenAt: TIMESTAMP,
   lastProgressAt: TIMESTAMP,
   generatedAt: TIMESTAMP,
-  surface: "internal",
+  surface: "slack",
   eventHistory: { status: "available" },
   annotations: [
     {