fix: open external links in chat via Tauri opener plugin

External links in chat messages were silently ignored in Tauri's
WKWebView. Add a custom MarkdownLink component that splits link
behavior by type: external links show a LinkSafetyModal confirmation
dialog before opening via @tauri-apps/plugin-opener, while internal
links render as plain <a> elements so useArtifactLinkHandler can
intercept them for artifact navigation.

This replaces Streamdown's built-in linkSafety which converts all
links to <button> elements, breaking the artifact policy layer that
relies on closest("a") to resolve internal paths.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: matt2e

ui/goose2/src/features/chat/hooks/__tests__/useArtifactLinkHandler.test.tsx

@@ -110,14 +110,12 @@ describe("useArtifactLinkHandler", () => {
     );
   });
 
-  it("ignores external URLs (does not call resolveMarkdownHref)", async () => {
+  it("does not intercept external URLs (defers to Streamdown linkSafety modal)", async () => {
     const user = userEvent.setup();
-    mockResolveMarkdownHref.mockReturnValue(null);
 
     render(<Harness href="https://example.com" label="External" />);
     await user.click(screen.getByText("External"));
 
-    // isExternalHref returns true, so resolveMarkdownHref is never called
     expect(mockResolveMarkdownHref).not.toHaveBeenCalled();
     expect(mockOpenResolvedPath).not.toHaveBeenCalled();
   });

ui/goose2/src/features/chat/hooks/useArtifactLinkHandler.ts

@@ -5,6 +5,9 @@ import { useArtifactPolicyContext } from "@/features/chat/hooks/ArtifactPolicyCo
 /**
  * Delegated click handler that intercepts local link clicks within a
  * container and routes them through the artifact policy layer.
+ *
+ * External links are intentionally not handled here — Streamdown's
+ * linkSafety modal shows a confirmation dialog before opening them.
  */
 export function useArtifactLinkHandler() {
   const { resolveMarkdownHref, openResolvedPath } = useArtifactPolicyContext();
@@ -15,7 +18,9 @@ export function useArtifactLinkHandler() {
       const anchor = (event.target as HTMLElement).closest("a");
       if (!anchor) return;
       const href = anchor.getAttribute("href");
-      if (!href || isExternalHref(href)) return;
+      if (!href) return;
+
+      if (isExternalHref(href)) return;
 
       event.preventDefault();
       const resolved = resolveMarkdownHref(href);

ui/goose2/src/shared/ui/ai-elements/link-safety-modal.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+
+interface LinkSafetyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  url: string;
+}
+
+export function LinkSafetyModal({
+  isOpen,
+  onClose,
+  url,
+}: LinkSafetyModalProps) {
+  const handleOpen = useCallback(() => {
+    openUrl(url).catch((e: unknown) =>
+      console.error("[linkSafety] openUrl failed:", e),
+    );
+    onClose();
+  }, [url, onClose]);
+
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  const handleCopy = useCallback(() => {
+    if (isCopied) return;
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        setIsCopied(true);
+        timeoutRef.current = window.setTimeout(() => setIsCopied(false), 2000);
+      })
+      .catch((e: unknown) =>
+        console.error("[linkSafety] clipboard write failed:", e),
+      );
+  }, [url, isCopied]);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Open external link?</DialogTitle>
+          <DialogDescription>
+            You&apos;re about to visit an external website.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="break-all rounded-md bg-muted p-3 font-mono text-sm">
+          {url}
+        </div>
+        <DialogFooter className="flex-row">
+          <Button
+            className="flex-1"
+            onClick={handleCopy}
+            type="button"
+            variant="outline"
+          >
+            {isCopied ? "Copied!" : "Copy link"}
+          </Button>
+          <Button className="flex-1" onClick={handleOpen} type="button">
+            Open link
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/goose2/src/shared/ui/ai-elements/message.tsx

@@ -6,6 +6,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/shared/ui/tooltip";
+import { isExternalHref } from "@/features/chat/lib/artifactPathPolicy";
+import { LinkSafetyModal } from "@/shared/ui/ai-elements/link-safety-modal";
 import { cn } from "@/shared/lib/cn";
 import { cjk } from "@streamdown/cjk";
 import { code } from "@streamdown/code";
@@ -325,13 +327,73 @@ export type MessageResponseProps = ComponentProps<typeof Streamdown>;
 
 const streamdownPlugins = { cjk, code, math, mermaid };
 
+/**
+ * Custom link component that splits behavior by link type:
+ * - External links → button + LinkSafetyModal (confirmation before opening)
+ * - Internal links → plain <a> so useArtifactLinkHandler can intercept via closest("a")
+ *
+ * This replaces Streamdown's built-in linkSafety which renders <button> for ALL
+ * links, breaking artifact navigation since useArtifactLinkHandler matches on <a>.
+ */
+const MarkdownLink = memo(
+  ({
+    children,
+    href,
+    node: _node,
+    ...rest
+  }: ComponentProps<"a"> & { node?: unknown }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (isExternalHref(href)) {
+      return (
+        <>
+          <button
+            className="wrap-anywhere appearance-none text-left font-medium text-primary underline"
+            data-streamdown="link"
+            onClick={() => setIsOpen(true)}
+            type="button"
+          >
+            {children}
+          </button>
+          <LinkSafetyModal
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            url={href ?? ""}
+          />
+        </>
+      );
+    }
+
+    return (
+      <a
+        className="wrap-anywhere font-medium text-primary underline"
+        data-streamdown="link"
+        href={href}
+        rel="noreferrer"
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+MarkdownLink.displayName = "MarkdownLink";
+
+const streamdownComponents = { a: MarkdownLink };
+
+const linkSafetyConfig: ComponentProps<typeof Streamdown>["linkSafety"] = {
+  enabled: false,
+};
+
 export const MessageResponse = memo(
   ({ className, ...props }: MessageResponseProps) => (
     <Streamdown
       className={cn(
         "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
         className,
       )}
+      components={streamdownComponents}
+      linkSafety={linkSafetyConfig}
       plugins={streamdownPlugins}
       {...props}
     />