MCP Apps: Open created issue/PR link via host open-link capability (#2593)

* Open created issue/PR link via host open-link capability

The success views for issue-write and pr-write rendered a plain anchor
to the created/updated issue or PR. MCP Apps run in a sandboxed iframe
where target="_blank" navigation may be blocked, so clicking the link
did nothing in some hosts.

Route the click through the host's ui/open-link capability (already
exposed by useMcpApp as openLink), which asks the host to open the URL
in the user's browser. The hook now also falls back to window.open when
the host denies the request, in addition to the existing no-app
fallback. The href is retained so right-click/copy and native fallback
still work.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Prevent default anchor navigation before URL check

When the success-view link URL was unavailable ("#"), the click handler
returned before calling e.preventDefault(), so the anchor's default
target="_blank" navigation still ran and could open a stray blank tab.
Call preventDefault() first, then no-op when the URL is unavailable.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: mattdholloway

ui/src/apps/issue-write/App.tsx

@@ -33,12 +33,14 @@ function SuccessView({
   repo,
   submittedTitle,
   isUpdate,
+  openLink,
 }: {
   issue: IssueResult;
   owner: string;
   repo: string;
   submittedTitle: string;
   isUpdate: boolean;
+  openLink: (url: string) => Promise<void>;
 }) {
   const issueUrl = issue.html_url || issue.url || issue.URL || "#";
 
@@ -87,6 +89,14 @@ function SuccessView({
             href={issueUrl}
             target="_blank"
             rel="noopener noreferrer"
+            onClick={(e) => {
+              // MCP Apps run in a sandboxed iframe where a plain anchor may be
+              // blocked, so route the click through the host's open-link
+              // capability (falls back to window.open).
+              e.preventDefault();
+              if (issueUrl === "#") return;
+              void openLink(issueUrl);
+            }}
             style={{
               fontWeight: 600,
               fontSize: "14px",
@@ -121,7 +131,7 @@ function CreateIssueApp() {
   const [error, setError] = useState<string | null>(null);
   const [successIssue, setSuccessIssue] = useState<IssueResult | null>(null);
 
-  const { app, error: appError, toolInput, callTool, hostContext, setModelContext } = useMcpApp({
+  const { app, error: appError, toolInput, callTool, hostContext, setModelContext, openLink } = useMcpApp({
     appName: "github-mcp-server-issue-write",
   });
 
@@ -232,6 +242,7 @@ function CreateIssueApp() {
         repo={repo}
         submittedTitle={title}
         isUpdate={isUpdateMode}
+        openLink={openLink}
       />
     );
   }

ui/src/apps/pr-write/App.tsx

@@ -36,11 +36,13 @@ function SuccessView({
   owner,
   repo,
   submittedTitle,
+  openLink,
 }: {
   pr: PRResult;
   owner: string;
   repo: string;
   submittedTitle: string;
+  openLink: (url: string) => Promise<void>;
 }) {
   const prUrl = pr.html_url || pr.url || pr.URL || "#";
 
@@ -89,6 +91,14 @@ function SuccessView({
             href={prUrl}
             target="_blank"
             rel="noopener noreferrer"
+            onClick={(e) => {
+              // MCP Apps run in a sandboxed iframe where a plain anchor may be
+              // blocked, so route the click through the host's open-link
+              // capability (falls back to window.open).
+              e.preventDefault();
+              if (prUrl === "#") return;
+              void openLink(prUrl);
+            }}
             style={{
               fontWeight: 600,
               fontSize: "14px",
@@ -126,7 +136,7 @@ function CreatePRApp() {
   const [isDraft, setIsDraft] = useState(false);
   const [maintainerCanModify, setMaintainerCanModify] = useState(true);
 
-  const { app, error: appError, toolInput, callTool, hostContext, setModelContext } = useMcpApp({
+  const { app, error: appError, toolInput, callTool, hostContext, setModelContext, openLink } = useMcpApp({
     appName: "github-mcp-server-create-pull-request",
   });
 
@@ -199,7 +209,7 @@ function CreatePRApp() {
   if (successPR) {
     return (
       <AppProvider hostContext={hostContext}>
-        <SuccessView pr={successPR} owner={owner} repo={repo} submittedTitle={submittedTitle} />
+        <SuccessView pr={successPR} owner={owner} repo={repo} submittedTitle={submittedTitle} openLink={openLink} />
       </AppProvider>
     );
   }

ui/src/hooks/useMcpApp.ts

@@ -106,7 +106,12 @@ export function useMcpApp({
         window.open(url, "_blank", "noopener,noreferrer");
         return;
       }
-      await app.openLink({ url });
+      const result = await app.openLink({ url });
+      // The host may deny the request (e.g. blocked domain or user cancelled).
+      // Fall back to a direct window.open so the link still works.
+      if (result?.isError) {
+        window.open(url, "_blank", "noopener,noreferrer");
+      }
     },
     [app]
   );