From 521eb9392bad097e812df261435552b2a2be0ce8 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 22 Oct 2025 15:59:21 +0000
Subject: [PATCH 1/4] Fix: Allow opening external links in Tauri app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created openUrl utility to intelligently handle URL opening for Tauri and web
- Updated markdown component to use openExternalUrl for external links
- Updated UnifiedChat tool renderer to use Markdown component for proper link parsing
- Links in web search results and tool outputs now work in both Tauri and web

Fixes #280

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/UnifiedChat.tsx | 16 +++----
 frontend/src/components/markdown.tsx    | 17 ++++++++
 frontend/src/utils/openUrl.ts           | 57 +++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/utils/openUrl.ts

diff --git a/frontend/src/components/UnifiedChat.tsx b/frontend/src/components/UnifiedChat.tsx
index a8b97b7d3..d3b3db8e6 100644
--- a/frontend/src/components/UnifiedChat.tsx
+++ b/frontend/src/components/UnifiedChat.tsx
@@ -245,9 +245,9 @@ function ToolCallRenderer({
                 {query ? `Searched: "${query}"` : "Web Search"}
               </span>
             </div>
-            {/* Search result - indented to align with text */}
-            <div className="pl-6 text-foreground/80 whitespace-pre-wrap break-words">
-              {isExpanded ? output : preview}
+            {/* Search result - indented to align with text, render as markdown for links */}
+            <div className="pl-6 text-foreground/80">
+              <Markdown content={isExpanded ? output : preview} fontSize={14} />
               {hasMore && (
                 <button
                   onClick={() => setIsExpanded(!isExpanded)}
@@ -275,9 +275,9 @@ function ToolCallRenderer({
             <Check className="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0" />
             <span className="font-medium text-foreground">{statusText}</span>
           </div>
-          {/* Tool output - indented */}
-          <div className="pl-6 text-foreground/80 whitespace-pre-wrap break-words">
-            {isExpanded ? output : preview}
+          {/* Tool output - indented, render as markdown for links */}
+          <div className="pl-6 text-foreground/80">
+            <Markdown content={isExpanded ? output : preview} fontSize={14} />
             {hasMore && (
               <button
                 onClick={() => setIsExpanded(!isExpanded)}
@@ -328,8 +328,8 @@ function ToolCallRenderer({
           <Check className="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0" />
           <span className="font-medium text-foreground">Tool Result</span>
         </div>
-        <div className="pl-6 text-foreground/80 whitespace-pre-wrap break-words">
-          {isExpanded ? output : preview}
+        <div className="pl-6 text-foreground/80">
+          <Markdown content={isExpanded ? output : preview} fontSize={14} />
           {hasMore && (
             <button
               onClick={() => setIsExpanded(!isExpanded)}
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 11888cc30..c96ec9d60 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -12,6 +12,7 @@ import React from "react";
 import { Button } from "./ui/button";
 import { Check, Copy, ChevronDown, ChevronRight, Brain, FileText } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { openExternalUrl } from "@/utils/openUrl";
 
 async function copyToClipboard(text: string) {
   try {
@@ -374,6 +375,22 @@ function MarkDownContentToMemo(props: { content: string }) {
           const href = aProps.href || "";
           const isInternal = /^\/#/i.test(href);
           const target = isInternal ? "_self" : (aProps.target ?? "_blank");
+
+          // For external links, use our openExternalUrl utility to handle Tauri vs web
+          if (!isInternal && href) {
+            return (
+              <a
+                {...aProps}
+                target={target}
+                onClick={(e) => {
+                  e.preventDefault();
+                  openExternalUrl(href);
+                }}
+                style={{ cursor: "pointer" }}
+              />
+            );
+          }
+
           return <a {...aProps} target={target} />;
         }
       }}
diff --git a/frontend/src/utils/openUrl.ts b/frontend/src/utils/openUrl.ts
new file mode 100644
index 000000000..31c3abd27
--- /dev/null
+++ b/frontend/src/utils/openUrl.ts
@@ -0,0 +1,57 @@
+/**
+ * Utility for opening external URLs
+ *
+ * This module provides a unified way to open external URLs that works
+ * correctly in both web browsers and Tauri environments.
+ *
+ * In Tauri apps, regular <a> tags with target="_blank" don't work properly.
+ * We need to use the Tauri opener plugin to open URLs in the system browser.
+ */
+
+import { isTauri } from "@/utils/platform";
+
+/**
+ * Opens an external URL in the appropriate way for the current environment
+ *
+ * - In web browsers: uses window.open()
+ * - In Tauri apps: uses the opener plugin to open in system browser
+ *
+ * @param url - The URL to open
+ * @returns Promise that resolves when the URL is opened (or rejects on error)
+ *
+ * @example
+ * ```typescript
+ * // In a component
+ * import { openExternalUrl } from '@/utils/openUrl';
+ *
+ * <a
+ *   href={url}
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     openExternalUrl(url);
+ *   }}
+ * >
+ *   Click me
+ * </a>
+ * ```
+ */
+export async function openExternalUrl(url: string): Promise<void> {
+  try {
+    if (isTauri()) {
+      // In Tauri, use the opener plugin
+      const { openUrl } = await import("@tauri-apps/plugin-opener");
+      await openUrl(url);
+    } else {
+      // In web browsers, use window.open
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  } catch (error) {
+    console.error("Failed to open URL:", url, error);
+    // Fallback: try window.open anyway
+    try {
+      window.open(url, "_blank", "noopener,noreferrer");
+    } catch (fallbackError) {
+      console.error("Fallback also failed:", fallbackError);
+    }
+  }
+}

From 58d1b4ad787aba2da0606f68b646abc1aeba1794 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Sun, 2 Nov 2025 13:52:04 -0600
Subject: [PATCH 2/4] Fix: Add HTTPS wildcard to Tauri capabilities

- Add https://* to opener:allow-open-url in all capabilities files (desktop, mobile-android, mobile-ios)
- Allows opening any HTTPS URL in web search results and other external links

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 frontend/src-tauri/capabilities/default.json        | 3 +++
 frontend/src-tauri/capabilities/mobile-android.json | 3 +++
 frontend/src-tauri/capabilities/mobile-ios.json     | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/frontend/src-tauri/capabilities/default.json b/frontend/src-tauri/capabilities/default.json
index e5a1a41ea..65f9bb444 100644
--- a/frontend/src-tauri/capabilities/default.json
+++ b/frontend/src-tauri/capabilities/default.json
@@ -65,6 +65,9 @@
         },
         {
           "url": "https://opensecret.cloud/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     },
diff --git a/frontend/src-tauri/capabilities/mobile-android.json b/frontend/src-tauri/capabilities/mobile-android.json
index 220126637..223abc712 100644
--- a/frontend/src-tauri/capabilities/mobile-android.json
+++ b/frontend/src-tauri/capabilities/mobile-android.json
@@ -75,6 +75,9 @@
         },
         {
           "url": "https://*.google.com/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     }
diff --git a/frontend/src-tauri/capabilities/mobile-ios.json b/frontend/src-tauri/capabilities/mobile-ios.json
index 324da9fbf..8fb36bd8f 100644
--- a/frontend/src-tauri/capabilities/mobile-ios.json
+++ b/frontend/src-tauri/capabilities/mobile-ios.json
@@ -32,6 +32,9 @@
         },
         {
           "url": "https://opensecret.cloud/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     },

From a9299b210dc7143277c533e2be5790d4cec8ba6c Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Sun, 2 Nov 2025 14:22:13 -0600
Subject: [PATCH 3/4] Add confirmation dialog for external URLs in markdown

- Create ExternalUrlConfirmDialog component to show URL before opening
- Add ExternalUrlConfirmHandler to manage dialog state
- Implement openExternalUrlWithConfirmation wrapper function
- Apply confirmation only to markdown-rendered links (tool outputs)
- Existing link openers remain unchanged

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .../components/ExternalUrlConfirmDialog.tsx   | 48 ++++++++++++++++++
 .../components/ExternalUrlConfirmHandler.tsx  | 32 ++++++++++++
 frontend/src/components/markdown.tsx          |  6 +--
 frontend/src/routes/__root.tsx                |  8 ++-
 frontend/src/utils/openUrl.ts                 | 50 ++++++++++++++++++-
 5 files changed, 138 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/ExternalUrlConfirmDialog.tsx
 create mode 100644 frontend/src/components/ExternalUrlConfirmHandler.tsx

diff --git a/frontend/src/components/ExternalUrlConfirmDialog.tsx b/frontend/src/components/ExternalUrlConfirmDialog.tsx
new file mode 100644
index 000000000..4a787784d
--- /dev/null
+++ b/frontend/src/components/ExternalUrlConfirmDialog.tsx
@@ -0,0 +1,48 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+
+interface ExternalUrlConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  url: string;
+}
+
+export function ExternalUrlConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  url
+}: ExternalUrlConfirmDialogProps) {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Open External Link?</AlertDialogTitle>
+          <AlertDialogDescription>
+            You are about to open an external URL in your browser:
+            <div className="mt-2 p-2 bg-muted rounded-md break-all text-sm font-mono">{url}</div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm}>Open</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/frontend/src/components/ExternalUrlConfirmHandler.tsx b/frontend/src/components/ExternalUrlConfirmHandler.tsx
new file mode 100644
index 000000000..eca30a57a
--- /dev/null
+++ b/frontend/src/components/ExternalUrlConfirmHandler.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { ExternalUrlConfirmDialog } from "@/components/ExternalUrlConfirmDialog";
+import { setUrlConfirmationCallback, openExternalUrl } from "@/utils/openUrl";
+
+export function ExternalUrlConfirmHandler() {
+  const [pendingUrl, setPendingUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const register = (url: string) => {
+      // Only set if no pending URL (ignore rapid clicks while dialog is open)
+      setPendingUrl((current) => (current !== null ? current : url));
+    };
+    setUrlConfirmationCallback(register);
+    return () => setUrlConfirmationCallback(null);
+  }, []);
+
+  const handleConfirm = () => {
+    if (pendingUrl) {
+      openExternalUrl(pendingUrl);
+      setPendingUrl(null);
+    }
+  };
+
+  return (
+    <ExternalUrlConfirmDialog
+      open={pendingUrl !== null}
+      onOpenChange={(open) => !open && setPendingUrl(null)}
+      onConfirm={handleConfirm}
+      url={pendingUrl || ""}
+    />
+  );
+}
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index c96ec9d60..8e22c5c6f 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -12,7 +12,7 @@ import React from "react";
 import { Button } from "./ui/button";
 import { Check, Copy, ChevronDown, ChevronRight, Brain, FileText } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
-import { openExternalUrl } from "@/utils/openUrl";
+import { openExternalUrlWithConfirmation } from "@/utils/openUrl";
 
 async function copyToClipboard(text: string) {
   try {
@@ -376,7 +376,7 @@ function MarkDownContentToMemo(props: { content: string }) {
           const isInternal = /^\/#/i.test(href);
           const target = isInternal ? "_self" : (aProps.target ?? "_blank");
 
-          // For external links, use our openExternalUrl utility to handle Tauri vs web
+          // For external links, show confirmation before opening
           if (!isInternal && href) {
             return (
               <a
@@ -384,7 +384,7 @@ function MarkDownContentToMemo(props: { content: string }) {
                 target={target}
                 onClick={(e) => {
                   e.preventDefault();
-                  openExternalUrl(href);
+                  openExternalUrlWithConfirmation(href);
                 }}
                 style={{ cursor: "pointer" }}
               />
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 60f5b7bc3..5ce200691 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,6 +1,7 @@
 import { useOpenSecret } from "@opensecret/react";
 import { OpenSecretContextType } from "@opensecret/react";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import { ExternalUrlConfirmHandler } from "@/components/ExternalUrlConfirmHandler";
 
 interface RootRouterContext {
   os: OpenSecretContextType;
@@ -35,5 +36,10 @@ function Root() {
     return <></>;
   }
 
-  return <Outlet />;
+  return (
+    <>
+      <Outlet />
+      <ExternalUrlConfirmHandler />
+    </>
+  );
 }
diff --git a/frontend/src/utils/openUrl.ts b/frontend/src/utils/openUrl.ts
index 31c3abd27..408ddbfe5 100644
--- a/frontend/src/utils/openUrl.ts
+++ b/frontend/src/utils/openUrl.ts
@@ -10,6 +10,13 @@
 
 import { isTauri } from "@/utils/platform";
 
+// State management for confirmation dialog
+let urlConfirmationCallback: ((url: string) => void) | null = null;
+
+export function setUrlConfirmationCallback(callback: ((url: string) => void) | null) {
+  urlConfirmationCallback = callback;
+}
+
 /**
  * Opens an external URL in the appropriate way for the current environment
  *
@@ -43,15 +50,54 @@ export async function openExternalUrl(url: string): Promise<void> {
       await openUrl(url);
     } else {
       // In web browsers, use window.open
-      window.open(url, "_blank", "noopener,noreferrer");
+      const popup = window.open(url, "_blank", "noopener,noreferrer");
+      if (!popup) {
+        throw new Error("Failed to open URL - popup may be blocked");
+      }
     }
   } catch (error) {
     console.error("Failed to open URL:", url, error);
     // Fallback: try window.open anyway
     try {
-      window.open(url, "_blank", "noopener,noreferrer");
+      const popup = window.open(url, "_blank", "noopener,noreferrer");
+      if (!popup) {
+        console.error("Fallback window.open was also blocked");
+      }
     } catch (fallbackError) {
       console.error("Fallback also failed:", fallbackError);
     }
   }
 }
+
+/**
+ * Opens an external URL with user confirmation
+ *
+ * Shows a confirmation dialog to the user before opening the URL.
+ * Requires ExternalUrlConfirmHandler to be mounted in the app.
+ *
+ * @param url - The URL to open
+ *
+ * @example
+ * ```typescript
+ * // In a component
+ * import { openExternalUrlWithConfirmation } from '@/utils/openUrl';
+ *
+ * <a
+ *   href={url}
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     openExternalUrlWithConfirmation(url);
+ *   }}
+ * >
+ *   Click me
+ * </a>
+ * ```
+ */
+export function openExternalUrlWithConfirmation(url: string): void {
+  if (urlConfirmationCallback) {
+    urlConfirmationCallback(url);
+  } else {
+    console.warn("URL confirmation callback not set, opening directly");
+    openExternalUrl(url);
+  }
+}

From 4563bc625d14a6b2c53a84671d095d775f6d23c1 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 5 Nov 2025 14:22:48 +0000
Subject: [PATCH 4/4] Switch ExternalUrlConfirmDialog from AlertDialog to
 Dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace AlertDialog with regular Dialog component to allow users to
dismiss the confirmation dialog by clicking outside of it or pressing
Escape. AlertDialog blocks these interactions by design, requiring
explicit user action. The regular Dialog provides a more flexible UX
while maintaining the same visual appearance and functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 .../components/ExternalUrlConfirmDialog.tsx   | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/ExternalUrlConfirmDialog.tsx b/frontend/src/components/ExternalUrlConfirmDialog.tsx
index 4a787784d..cf59feeaf 100644
--- a/frontend/src/components/ExternalUrlConfirmDialog.tsx
+++ b/frontend/src/components/ExternalUrlConfirmDialog.tsx
@@ -1,13 +1,12 @@
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from "@/components/ui/alert-dialog";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 
 interface ExternalUrlConfirmDialogProps {
   open: boolean;
@@ -29,20 +28,22 @@ export function ExternalUrlConfirmDialog({
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Open External Link?</AlertDialogTitle>
-          <AlertDialogDescription>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Open External Link?</DialogTitle>
+          <DialogDescription>
             You are about to open an external URL in your browser:
             <div className="mt-2 p-2 bg-muted rounded-md break-all text-sm font-mono">{url}</div>
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleConfirm}>Open</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm}>Open</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }