fix(dashboard): Render transcript links safely

packages/junior-dashboard/src/client/components/TranscriptText.tsx

@@ -1,9 +1,15 @@
+import type { ReactNode } from "react";
+
 import {
   countStructuredBlockChildren,
   HighlightedCode,
   StructuredMarkup,
 } from "../code";
-import { canRenderStructuredMarkup, parseMarkdownBlocks, transcriptRoleKind } from "../format";
+import {
+  canRenderStructuredMarkup,
+  parseMarkdownBlocks,
+  transcriptRoleKind,
+} from "../format";
 
 /** Render transcript markdown/code blocks with structured markup expansion. */
 export function TranscriptText(props: {
@@ -24,6 +30,10 @@ export function TranscriptText(props: {
         const childCount = countStructuredBlockChildren(block);
         seenChildren += childCount;
 
+        if (block.language === "markdown" && !block.fenced) {
+          return <MarkdownProse key={index} text={block.code} />;
+        }
+
         if (!canRenderStructuredMarkup(block)) {
           return (
             <HighlightedCode
@@ -46,3 +56,189 @@ export function TranscriptText(props: {
     </div>
   );
 }
+
+function MarkdownProse(props: { text: string }) {
+  return (
+    <div className="min-w-0 whitespace-pre-wrap break-words text-[0.92rem] leading-relaxed [overflow-wrap:anywhere]">
+      {renderMarkdownInline(props.text)}
+    </div>
+  );
+}
+
+function renderMarkdownInline(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  let cursor = 0;
+
+  while (cursor < text.length) {
+    const link = findNextInlineLink(text, cursor);
+    if (!link) break;
+
+    if (link.start > cursor) nodes.push(text.slice(cursor, link.start));
+    nodes.push(
+      <TranscriptAnchor href={link.href} key={`link-${link.start}`}>
+        {link.label}
+      </TranscriptAnchor>,
+    );
+    if (link.suffix) nodes.push(link.suffix);
+    cursor = link.end;
+  }
+
+  if (cursor < text.length) nodes.push(text.slice(cursor));
+  return nodes;
+}
+
+function TranscriptAnchor(props: { children: ReactNode; href: string }) {
+  const opensNewTab = /^https?:/i.test(props.href);
+  return (
+    <a
+      className="font-medium text-[#d8ccff] underline decoration-[#beaaff]/45 underline-offset-2 transition-colors hover:text-white hover:decoration-white"
+      href={props.href}
+      rel={opensNewTab ? "noreferrer" : undefined}
+      target={opensNewTab ? "_blank" : undefined}
+    >
+      {props.children}
+    </a>
+  );
+}
+
+type InlineLink = {
+  end: number;
+  href: string;
+  label: string;
+  start: number;
+  suffix?: string;
+};
+
+function findNextInlineLink(
+  text: string,
+  start: number,
+): InlineLink | undefined {
+  const markdownLink = findNextMarkdownLink(text, start);
+  const bareLink = findNextBareLink(text, start);
+
+  if (!markdownLink) return bareLink;
+  if (!bareLink) return markdownLink;
+  return markdownLink.start <= bareLink.start ? markdownLink : bareLink;
+}
+
+function findNextMarkdownLink(
+  text: string,
+  start: number,
+): InlineLink | undefined {
+  for (
+    let linkStart = text.indexOf("[", start);
+    linkStart >= 0;
+    linkStart = text.indexOf("[", linkStart + 1)
+  ) {
+    const labelEnd = text.indexOf("]", linkStart + 1);
+    if (labelEnd < 0) return undefined;
+    if (text[labelEnd + 1] !== "(") continue;
+
+    const label = text.slice(linkStart + 1, labelEnd);
+    if (!label || label.includes("\n")) continue;
+
+    const destination = readMarkdownDestination(text, labelEnd + 2);
+    if (!destination) continue;
+
+    const href = safeMarkdownHref(destination.href);
+    if (!href) continue;
+
+    return {
+      end: destination.end,
+      href,
+      label,
+      start: linkStart,
+    };
+  }
+}
+
+function readMarkdownDestination(
+  text: string,
+  start: number,
+): { end: number; href: string } | undefined {
+  let depth = 0;
+  for (let index = start; index < text.length; index += 1) {
+    const char = text[index];
+    if (char === "\\") {
+      index += 1;
+      continue;
+    }
+    if (char === "(") {
+      depth += 1;
+      continue;
+    }
+    if (char !== ")") continue;
+
+    if (depth > 0) {
+      depth -= 1;
+      continue;
+    }
+
+    const href = text.slice(start, index);
+    return href ? { end: index + 1, href } : undefined;
+  }
+}
+
+function findNextBareLink(text: string, start: number): InlineLink | undefined {
+  const bareUrlPattern = /(https?:\/\/[^\s<>"']+|mailto:[^\s<>"']+)/gi;
+  bareUrlPattern.lastIndex = start;
+
+  let match: RegExpExecArray | null;
+  while ((match = bareUrlPattern.exec(text))) {
+    const rawHref = match[0];
+    const bareLink = trimBareUrl(rawHref);
+    const href = safeMarkdownHref(bareLink.href);
+    if (!href) continue;
+
+    return {
+      end: match.index + rawHref.length,
+      href,
+      label: href,
+      start: match.index,
+      ...(bareLink.suffix ? { suffix: bareLink.suffix } : {}),
+    };
+  }
+}
+
+function safeMarkdownHref(href: string): string | undefined {
+  const trimmed = href.trim();
+  if (!trimmed || /[\u0000-\u001f\u007f\s]/.test(trimmed)) return undefined;
+  try {
+    const url = new URL(trimmed);
+    return url.protocol === "http:" ||
+      url.protocol === "https:" ||
+      url.protocol === "mailto:"
+      ? trimmed
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function trimBareUrl(href: string): { href: string; suffix: string } {
+  let trimmed = href;
+  let suffix = "";
+
+  while (shouldTrimBareUrlSuffix(trimmed)) {
+    suffix = `${trimmed.slice(-1)}${suffix}`;
+    trimmed = trimmed.slice(0, -1);
+  }
+
+  return { href: trimmed, suffix };
+}
+
+function shouldTrimBareUrlSuffix(href: string): boolean {
+  const last = href.at(-1);
+  if (!last) return false;
+  if (/[.,;:!?]/.test(last)) return true;
+  return last === ")" && closingParensExceedOpening(href);
+}
+
+function closingParensExceedOpening(value: string): boolean {
+  let balance = 0;
+  for (const char of value) {
+    if (char === "(") balance += 1;
+    if (char === ")") balance -= 1;
+  }
+  return balance < 0;
+}

packages/junior-dashboard/src/client/components/TranscriptTurn.tsx

@@ -46,6 +46,7 @@ import { TranscriptText } from "./TranscriptText";
 import { TranscriptThinkingView } from "./TranscriptThinkingView";
 import { TranscriptToolRun } from "./TranscriptToolRun";
 import { TranscriptToolView } from "./TranscriptToolView";
+import { shouldCopyRawTranscript } from "./transcriptCopy";
 import {
   countRenderedTranscriptChildren,
   groupTranscriptMessages,
@@ -74,7 +75,7 @@ export function ConversationTranscriptSegment(props: {
 
   return (
     <section className="grid min-w-0 grid-cols-[0.875rem_minmax(0,1fr)] gap-3 border-t border-white/10 py-4 first:border-t-0">
-      <div className="flex flex-col items-center pt-2" aria-hidden="true">
+      <div className="flex flex-col items-center pt-1.5" aria-hidden="true">
         <span className={turnMarkerClass(status)} />
         <span className="mt-2 w-px flex-1 bg-[#beaaff]/20" />
       </div>
@@ -627,7 +628,17 @@ function TranscriptMessageView(props: {
     <TranscriptMessageShell
       role={props.message.role}
       onCopy={(event) => {
-        if (props.view !== "rich" || !rawText) return;
+        const selection = event.currentTarget.ownerDocument.getSelection();
+        if (
+          !shouldCopyRawTranscript(
+            props.view,
+            rawText,
+            selection,
+            event.currentTarget,
+          )
+        ) {
+          return;
+        }
         event.clipboardData.setData("text/plain", rawText);
         event.preventDefault();
       }}

packages/junior-dashboard/src/client/components/transcriptCopy.ts

@@ -0,0 +1,38 @@
+type IntersectingRange = Pick<Range, "intersectsNode">;
+
+type TranscriptCopySelection = Pick<
+  Selection,
+  "isCollapsed" | "rangeCount" | "toString"
+> & {
+  getRangeAt(index: number): IntersectingRange;
+};
+
+function selectionIntersectsNode(
+  selection: TranscriptCopySelection | null,
+  node: Node,
+): boolean {
+  if (
+    !selection ||
+    selection.isCollapsed ||
+    selection.toString().length === 0
+  ) {
+    return false;
+  }
+
+  for (let index = 0; index < selection.rangeCount; index += 1) {
+    if (selection.getRangeAt(index).intersectsNode(node)) return true;
+  }
+
+  return false;
+}
+
+/** Decide when rich transcript copy should fall back to the raw message payload. */
+export function shouldCopyRawTranscript(
+  view: string,
+  rawText: string,
+  selection: TranscriptCopySelection | null,
+  node: Node,
+): boolean {
+  if (view !== "rich" || !rawText) return false;
+  return !selectionIntersectsNode(selection, node);
+}

packages/junior-dashboard/tests/telemetry-components.test.tsx

@@ -237,11 +237,60 @@ describe("dashboard telemetry components", () => {
 
     expect(html).toContain("flex min-w-0 items-center justify-between gap-3");
     expect(html).toContain("font-mono leading-none text-[0.78rem] text-[#888]");
+    expect(html).toContain("flex flex-col items-center pt-1.5");
     expect(html).not.toContain("+10s");
     expect(html).not.toContain("· +");
     expect(html).not.toContain("items-baseline gap-2 text-[0.88rem]");
   });
 
+  it("renders safe markdown links as transcript anchors", () => {
+    const turn = {
+      conversationId: "conversation-1",
+      id: "turn-1",
+      lastProgressAt: "2026-01-01T00:00:10.000Z",
+      lastSeenAt: "2026-01-01T00:00:10.000Z",
+      startedAt: "2026-01-01T00:00:00.000Z",
+      status: "completed",
+      surface: "slack",
+      title: "Turn turn-1",
+      transcript: [
+        {
+          role: "assistant",
+          timestamp: Date.parse("2026-01-01T00:00:10.000Z"),
+          parts: [
+            {
+              type: "text",
+              text: "See [the trace](https://sentry.example/trace/abc), [wiki](https://en.wikipedia.org/wiki/Foo_(bar)), https://docs.example/Foo_(bar)., https://., https://after-invalid.example/ok, [local](/api/dashboard/me), and [bad](javascript:alert).",
+            },
+          ],
+        },
+      ],
+      transcriptAvailable: true,
+    } as ConversationTurn;
+
+    const html = renderToStaticMarkup(
+      <QueryClientProvider client={client}>
+        <ConversationTranscriptSegment turn={turn} view="rich" />
+      </QueryClientProvider>,
+    );
+
+    expect(html).toContain('href="https://sentry.example/trace/abc"');
+    expect(html).toContain('target="_blank"');
+    expect(html).toContain('rel="noreferrer"');
+    expect(html).toContain(">the trace</a>");
+    expect(html).toContain('href="https://en.wikipedia.org/wiki/Foo_(bar)"');
+    expect(html).toContain(">wiki</a>");
+    expect(html).toContain('href="https://docs.example/Foo_(bar)"');
+    expect(html).toContain(">https://docs.example/Foo_(bar)</a>.");
+    expect(html).toContain("https://.");
+    expect(html).toContain('href="https://after-invalid.example/ok"');
+    expect(html).toContain(">https://after-invalid.example/ok</a>");
+    expect(html).toContain("[local](/api/dashboard/me)");
+    expect(html).toContain("[bad](javascript:alert)");
+    expect(html).not.toContain('href="/api/dashboard/me"');
+    expect(html).not.toContain('href="javascript:alert"');
+  });
+
   it("renders the conversation duration chart title", () => {
     const session = {
       conversationId: "conversation-1",