@sentry/junior-dashboard 0.231.0 → 0.232.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.231.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.231.0",
-    "@sentry/junior-plugin-api": "0.231.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>
+    </>
+  );
+}