feat(scouts): add per-finding share link on scout detail page (#2646)

Author: andrewm4894

packages/shared/src/analytics-events.ts

@@ -648,6 +648,7 @@ export type ScoutActionType =
   | "open_task_run"
   | "open_skill_in_posthog"
   | "open_helper_skill"
+  | "copy_finding_link"
   | "show_more_emitted_runs"
   | "filter_runs"
   | "toggle_hide_disabled"

packages/ui/src/features/scouts/components/ScoutDetailView.tsx

@@ -43,7 +43,14 @@ const FILTERS: { value: ScoutRunFilter; label: string }[] = [
   { value: "failed", label: "Failed" },
 ];
 
-export function ScoutDetailView({ skillSlug }: { skillSlug: string }) {
+export function ScoutDetailView({
+  skillSlug,
+  highlightFindingId,
+}: {
+  skillSlug: string;
+  /** Emission id from a shared finding link – expanded and scrolled to when present. */
+  highlightFindingId?: string;
+}) {
   const skillName = scoutSkillNameFromSlug(skillSlug);
   const displayName = prettifyScoutSkillName(skillName);
 
@@ -178,6 +185,7 @@ export function ScoutDetailView({ skillSlug }: { skillSlug: string }) {
               windowLabel={scoutRunsWindowLabel(runsWindow)}
               loading={runsLoading}
               error={runsError}
+              highlightFindingId={highlightFindingId}
             />
 
             <Flex direction="column" gap="3">

packages/ui/src/features/scouts/components/ScoutEmissionCard.tsx

@@ -5,7 +5,7 @@ import { MarkdownRenderer } from "@posthog/ui/features/editor/components/Markdow
 import { RelativeTimestamp } from "@posthog/ui/primitives/RelativeTimestamp";
 import { track } from "@posthog/ui/shell/analytics";
 import { Box, Flex, Text } from "@radix-ui/themes";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { SeverityBadge } from "./ScoutBadges";
 
 export function ScoutEmissionCard({
@@ -14,6 +14,7 @@ export function ScoutEmissionCard({
   actions,
   footerEnd,
   defaultExpanded = false,
+  highlighted = false,
 }: {
   emission: ScoutEmission;
   /** The emitting scout, attached to analytics events when known. */
@@ -23,10 +24,27 @@ export function ScoutEmissionCard({
   /** Replaces the default pipeline note at the footer's right edge. */
   footerEnd?: ReactNode;
   defaultExpanded?: boolean;
+  /** True when a shared finding link targets this card – scrolls it into view. */
+  highlighted?: boolean;
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
+  const cardRef = useRef<HTMLDivElement>(null);
+  // setExpanded too: when a shared link targets a different finding on an
+  // already-mounted route, only the search param changes, so the useState
+  // initializer's defaultExpanded never re-runs.
+  useEffect(() => {
+    if (highlighted) {
+      setExpanded(true);
+      cardRef.current?.scrollIntoView({ block: "center" });
+    }
+  }, [highlighted]);
   return (
-    <Box className="min-w-0 overflow-hidden rounded-(--radius-2) border border-(--gray-6) bg-gray-1 p-3">
+    <Box
+      ref={cardRef}
+      className={`min-w-0 overflow-hidden rounded-(--radius-2) border bg-gray-1 p-3 ${
+        highlighted ? "border-(--accent-8)" : "border-(--gray-6)"
+      }`}
+    >
       <button
         type="button"
         onClick={() => {

packages/ui/src/features/scouts/components/ScoutFindingShareButton.tsx

@@ -0,0 +1,54 @@
+import { LinkIcon } from "@phosphor-icons/react";
+import type { ScoutEmission } from "@posthog/api-client/posthog-client";
+import { scoutSkillSlug } from "@posthog/core/scouts/scoutPresentation";
+import { ANALYTICS_EVENTS } from "@posthog/shared";
+import { track } from "@posthog/ui/shell/analytics";
+import { toast } from "sonner";
+
+/**
+ * Per-finding "Share" CTA on a scout emission card: copies a link that drops
+ * a coworker onto this scout's detail page with the finding expanded and
+ * scrolled into view. Best effort – the link only resolves while the finding
+ * is still inside the scout's runs window.
+ */
+export function ScoutFindingShareButton({
+  emission,
+  skillName,
+}: {
+  emission: ScoutEmission;
+  skillName: string;
+}) {
+  const handleCopyLink = () => {
+    // The app router uses hash history, so the route (and its search params)
+    // must live after the `#`. Keep the pre-hash part of the current URL so
+    // host-level query params survive in the copied link.
+    const base = window.location.href.split("#")[0];
+    const url = `${base}#/code/agents/scouts/${scoutSkillSlug(
+      skillName,
+    )}?finding=${encodeURIComponent(emission.id)}`;
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        toast.success("Finding link copied");
+        track(ANALYTICS_EVENTS.SCOUT_ACTION, {
+          action_type: "copy_finding_link",
+          surface: "scout_detail",
+          skill_name: skillName,
+          severity: emission.severity,
+        });
+      })
+      .catch(() => toast.error("Couldn't copy link"));
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopyLink}
+      title="Copy a link to this finding"
+      className="inline-flex shrink-0 items-center gap-1 text-[11px] text-accent-11 no-underline transition-colors hover:text-accent-12"
+    >
+      <LinkIcon size={11} />
+      Share
+    </button>
+  );
+}

packages/ui/src/features/scouts/components/ScoutSignalsSection.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { useScoutRunEmissions } from "../hooks/useScoutRunEmissions";
 import { ScoutEmissionCard } from "./ScoutEmissionCard";
 import { ScoutFindingDiscussButton } from "./ScoutFindingDiscussButton";
+import { ScoutFindingShareButton } from "./ScoutFindingShareButton";
 import { ScoutTaskRunLink } from "./ScoutTaskRunLink";
 
 /**
@@ -26,11 +27,14 @@ export function ScoutSignalsSection({
   windowLabel,
   loading,
   error,
+  highlightFindingId,
 }: {
   runs: ScoutRun[];
   windowLabel: string;
   loading: boolean;
   error?: boolean;
+  /** Emission id from a shared finding link – expanded and scrolled to when present. */
+  highlightFindingId?: string;
 }) {
   const [showAll, setShowAll] = useState(false);
   const emittedRuns = runs.filter((run) => (run.emitted_count ?? 0) > 0);
@@ -56,7 +60,11 @@ export function ScoutSignalsSection({
       ) : (
         <Flex direction="column" gap="2">
           {visibleRuns.map((run) => (
-            <RunEmissions key={run.run_id} run={run} />
+            <RunEmissions
+              key={run.run_id}
+              run={run}
+              highlightFindingId={highlightFindingId}
+            />
           ))}
           {hiddenCount > 0 ? (
             <button
@@ -81,7 +89,13 @@ export function ScoutSignalsSection({
   );
 }
 
-function RunEmissions({ run }: { run: ScoutRun }) {
+function RunEmissions({
+  run,
+  highlightFindingId,
+}: {
+  run: ScoutRun;
+  highlightFindingId?: string;
+}) {
   const {
     data: emissions,
     isLoading,
@@ -123,11 +137,19 @@ function RunEmissions({ run }: { run: ScoutRun }) {
           key={emission.id}
           emission={emission}
           skillName={run.skill_name}
+          defaultExpanded={emission.id === highlightFindingId}
+          highlighted={emission.id === highlightFindingId}
           actions={
-            <ScoutFindingDiscussButton
-              emission={emission}
-              skillName={run.skill_name}
-            />
+            <>
+              <ScoutFindingDiscussButton
+                emission={emission}
+                skillName={run.skill_name}
+              />
+              <ScoutFindingShareButton
+                emission={emission}
+                skillName={run.skill_name}
+              />
+            </>
           }
           footerEnd={
             taskRunUrl ? (

packages/ui/src/router/routes/code/agents/scouts.$skillName.index.tsx

@@ -2,10 +2,14 @@ import { ScoutDetailView } from "@posthog/ui/features/scouts/components/ScoutDet
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/code/agents/scouts/$skillName/")({
+  validateSearch: (search: Record<string, unknown>): { finding?: string } => ({
+    finding: typeof search.finding === "string" ? search.finding : undefined,
+  }),
   component: ScoutDetailRoute,
 });
 
 function ScoutDetailRoute() {
   const { skillName } = Route.useParams();
-  return <ScoutDetailView skillSlug={skillName} />;
+  const { finding } = Route.useSearch();
+  return <ScoutDetailView skillSlug={skillName} highlightFindingId={finding} />;
 }