fix(canvas): navigate share links in-app instead of via the browser

Clicking a canvas/channel share link in a channel thread bounced out to the
browser (PostHog Cloud interstitial) which then deep-linked back into the app.
The thread feed renders server-emitted announcement messages whose content
embeds a portable https share link; those links were rendered as plain
external anchors with no in-app interception.

Add a client-side parser that recognizes our own share-link URLs
(/code/canvas/... and /code/channel/...) and navigates via the in-app router,
short-circuiting the browser round-trip. Wired into MentionText (thread +
channel surfaces) and MarkdownRenderer (agent chat). External links are
untouched.

Generated-By: PostHog Code
Task-Id: a3001315-524a-4902-b23c-5c6f5b010827

Author: adboio

packages/ui/src/features/canvas/components/MentionText.test.tsx

@@ -1,7 +1,20 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MentionText } from "./MentionText";
 
+const navigateToChannelDashboard = vi.fn();
+
+vi.mock("@posthog/ui/router/navigationBridge", () => ({
+  navigateToChannel: vi.fn(),
+  navigateToChannelDashboard: (...args: unknown[]) =>
+    navigateToChannelDashboard(...args),
+  navigateToChannelTask: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
 describe("MentionText", () => {
   it("uses the shared mention styles and emphasizes the current user", () => {
     render(
@@ -42,6 +55,28 @@ describe("MentionText", () => {
     expect(screen.queryByText("@agent")).not.toBeInTheDocument();
   });
 
+  it("navigates in-app instead of the browser for a canvas share link", () => {
+    render(
+      <MentionText content="[Signups](https://us.posthog.com/code/canvas/chan1/dash1) has been created" />,
+    );
+
+    const link = screen.getByRole("link", { name: "Signups" });
+    const defaultAllowed = fireEvent.click(link);
+
+    expect(defaultAllowed).toBe(false); // preventDefault was called
+    expect(navigateToChannelDashboard).toHaveBeenCalledWith("chan1", "dash1");
+  });
+
+  it("leaves an external link opening in the browser", () => {
+    render(<MentionText content="[Docs](https://example.com/guide) is here" />);
+
+    const link = screen.getByRole("link", { name: "Docs" });
+    const defaultAllowed = fireEvent.click(link);
+
+    expect(defaultAllowed).toBe(true); // default not prevented
+    expect(navigateToChannelDashboard).not.toHaveBeenCalled();
+  });
+
   it("inherits the surrounding message text size", () => {
     render(<MentionText content="A thread reply" />);
 

packages/ui/src/features/canvas/components/MentionText.tsx

@@ -1,5 +1,6 @@
 import { splitMentionSegments } from "@posthog/shared";
 import { splitLinkSegments } from "@posthog/ui/features/canvas/utils/linkify";
+import { handleShareLinkClick } from "@posthog/ui/utils/shareLinks";
 import { Fragment, useMemo } from "react";
 import "./mention-chip.css";
 
@@ -105,6 +106,7 @@ export function MentionText({
             <a
               key={key}
               href={segment.href}
+              onClick={(event) => handleShareLinkClick(segment.href, event)}
               target="_blank"
               rel="noopener noreferrer"
               className="text-[var(--accent-11)] underline underline-offset-2 hover:text-[var(--accent-12)]"

packages/ui/src/features/editor/components/MarkdownRenderer.tsx

@@ -5,6 +5,7 @@ import { CodeBlock } from "@posthog/ui/primitives/CodeBlock";
 import { Divider } from "@posthog/ui/primitives/Divider";
 import { HighlightedCode } from "@posthog/ui/primitives/HighlightedCode";
 import { List, ListItem } from "@posthog/ui/primitives/List";
+import { handleShareLinkClick } from "@posthog/ui/utils/shareLinks";
 import { Blockquote, Checkbox, Code, Kbd, Text } from "@radix-ui/themes";
 import { memo, useMemo } from "react";
 import type { Components } from "react-markdown";
@@ -91,6 +92,7 @@ export const baseComponents: Components = {
       <a
         href={href}
         onClick={(event) => {
+          if (handleShareLinkClick(href, event)) return;
           if (!isDeeplink || !href) return;
           event.preventDefault();
           openExternalUrl(href);

packages/ui/src/utils/shareLinks.test.ts

@@ -0,0 +1,111 @@
+import {
+  handleShareLinkClick,
+  parseShareLink,
+} from "@posthog/ui/utils/shareLinks";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const navigateToChannel = vi.fn();
+const navigateToChannelDashboard = vi.fn();
+const navigateToChannelTask = vi.fn();
+
+vi.mock("@posthog/ui/router/navigationBridge", () => ({
+  navigateToChannel: (...args: unknown[]) => navigateToChannel(...args),
+  navigateToChannelDashboard: (...args: unknown[]) =>
+    navigateToChannelDashboard(...args),
+  navigateToChannelTask: (...args: unknown[]) => navigateToChannelTask(...args),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("parseShareLink", () => {
+  it.each([
+    [
+      "canvas link",
+      "https://us.posthog.com/code/canvas/chan1/dash1",
+      { kind: "canvas", channelId: "chan1", dashboardId: "dash1" },
+    ],
+    [
+      "canvas link with encoded ids",
+      "https://us.posthog.com/code/canvas/chan%2F1/dash%202",
+      { kind: "canvas", channelId: "chan/1", dashboardId: "dash 2" },
+    ],
+    [
+      "channel link on the eu host",
+      "https://eu.posthog.com/code/channel/chan1",
+      { kind: "channel", channelId: "chan1" },
+    ],
+    [
+      "channel thread link",
+      "https://us.posthog.com/code/channel/chan1/tasks/task1",
+      { kind: "channel", channelId: "chan1", taskId: "task1" },
+    ],
+  ])("parses a %s", (_label, href, expected) => {
+    expect(parseShareLink(href)).toEqual(expected);
+  });
+
+  it.each([
+    ["a non-PostHog host", "https://evil.com/code/canvas/chan1/dash1"],
+    [
+      "an unrelated PostHog path",
+      "https://us.posthog.com/project/2/dashboard/1",
+    ],
+    [
+      "a canvas link missing the dashboard id",
+      "https://us.posthog.com/code/canvas/chan1",
+    ],
+    [
+      "a channel thread link with a malformed tail",
+      "https://us.posthog.com/code/channel/chan1/foo/task1",
+    ],
+    ["a malformed url", "not a url"],
+  ])("returns null for %s", (_label, href) => {
+    expect(parseShareLink(href)).toBeNull();
+  });
+});
+
+describe("handleShareLinkClick", () => {
+  it("navigates in-app and cancels the default open for a share link", () => {
+    const event = { preventDefault: vi.fn() };
+
+    const handled = handleShareLinkClick(
+      "https://us.posthog.com/code/canvas/chan1/dash1",
+      event,
+    );
+
+    expect(handled).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(navigateToChannelDashboard).toHaveBeenCalledWith("chan1", "dash1");
+  });
+
+  it("routes a channel thread link to the task navigator", () => {
+    const event = { preventDefault: vi.fn() };
+
+    handleShareLinkClick(
+      "https://us.posthog.com/code/channel/chan1/tasks/task1",
+      event,
+    );
+
+    expect(navigateToChannelTask).toHaveBeenCalledWith("chan1", "task1");
+  });
+
+  it("leaves an external link alone", () => {
+    const event = { preventDefault: vi.fn() };
+
+    const handled = handleShareLinkClick("https://example.com/docs", event);
+
+    expect(handled).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToChannel).not.toHaveBeenCalled();
+    expect(navigateToChannelDashboard).not.toHaveBeenCalled();
+    expect(navigateToChannelTask).not.toHaveBeenCalled();
+  });
+
+  it("returns false for a missing href", () => {
+    const event = { preventDefault: vi.fn() };
+
+    expect(handleShareLinkClick(undefined, event)).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+});

packages/ui/src/utils/shareLinks.ts

@@ -0,0 +1,107 @@
+import { type CloudRegion, getCloudUrlFromRegion } from "@posthog/shared";
+import {
+  navigateToChannel,
+  navigateToChannelDashboard,
+  navigateToChannelTask,
+} from "@posthog/ui/router/navigationBridge";
+
+// The in-app destination a PostHog Code share link points at. The inverse of the
+// `canvasShareUrl` / `channelShareUrl` builders in `posthogLinks.ts`.
+export type ShareLinkTarget =
+  | { kind: "canvas"; channelId: string; dashboardId: string }
+  | { kind: "channel"; channelId: string; taskId?: string };
+
+const REGIONS: CloudRegion[] = ["us", "eu", "dev"];
+
+// Hosts we recognise as PostHog share-link origins. We match every region (not
+// just the signed-in one) so a link works in-app regardless of which instance
+// it was minted on — the inbound deep-link handlers already navigate by id
+// against the current session, so bouncing through the browser buys nothing.
+const POSTHOG_HOSTS = new Set(
+  REGIONS.map((region) => {
+    try {
+      return new URL(getCloudUrlFromRegion(region)).host;
+    } catch {
+      return "";
+    }
+  }).filter(Boolean),
+);
+
+/**
+ * Parse a PostHog Code share link into its in-app navigation target, or `null`
+ * if it isn't one. Recognises `/code/canvas/<channelId>/<dashboardId>` and
+ * `/code/channel/<channelId>[/tasks/<taskId>]` on a known PostHog host. The
+ * host check keeps us from hijacking unrelated links that happen to share the
+ * path shape.
+ */
+export function parseShareLink(href: string): ShareLinkTarget | null {
+  let url: URL;
+  try {
+    url = new URL(href);
+  } catch {
+    return null;
+  }
+  if (!POSTHOG_HOSTS.has(url.host)) return null;
+
+  // Split the still-encoded pathname first, then decode each segment, so an id
+  // containing an encoded slash (`%2F`) stays a single segment.
+  const segments = url.pathname
+    .split("/")
+    .filter(Boolean)
+    .map((segment) => {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    });
+
+  if (segments[0] !== "code") return null;
+
+  if (segments[1] === "canvas" && segments.length === 4) {
+    return { kind: "canvas", channelId: segments[2], dashboardId: segments[3] };
+  }
+
+  if (segments[1] === "channel") {
+    if (segments.length === 3) {
+      return { kind: "channel", channelId: segments[2] };
+    }
+    if (segments.length === 5 && segments[3] === "tasks") {
+      return { kind: "channel", channelId: segments[2], taskId: segments[4] };
+    }
+  }
+
+  return null;
+}
+
+export function navigateToShareTarget(target: ShareLinkTarget): void {
+  switch (target.kind) {
+    case "canvas":
+      navigateToChannelDashboard(target.channelId, target.dashboardId);
+      break;
+    case "channel":
+      if (target.taskId) {
+        navigateToChannelTask(target.channelId, target.taskId);
+      } else {
+        navigateToChannel(target.channelId);
+      }
+      break;
+  }
+}
+
+/**
+ * If `href` is a PostHog Code share link, navigate to it in-app and return true
+ * (cancelling the click's default open-in-browser). Otherwise return false so
+ * the caller lets the link open externally as usual.
+ */
+export function handleShareLinkClick(
+  href: string | undefined,
+  event: { preventDefault: () => void },
+): boolean {
+  if (!href) return false;
+  const target = parseShareLink(href);
+  if (!target) return false;
+  event.preventDefault();
+  navigateToShareTarget(target);
+  return true;
+}