Fix: Allow opening external links in Tauri app

frontend/src-tauri/capabilities/default.json

@@ -65,6 +65,9 @@
         },
         {
           "url": "https://opensecret.cloud/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     },

frontend/src-tauri/capabilities/mobile-android.json

@@ -75,6 +75,9 @@
         },
         {
           "url": "https://*.google.com/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     }

frontend/src-tauri/capabilities/mobile-ios.json

@@ -32,6 +32,9 @@
         },
         {
           "url": "https://opensecret.cloud/*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     },

frontend/src/components/ExternalUrlConfirmDialog.tsx

@@ -0,0 +1,49 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+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 (
+    <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>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm}>Open</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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 || ""}
+    />
+  );
+}

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)}

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 { openExternalUrlWithConfirmation } 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, show confirmation before opening
+          if (!isInternal && href) {
+            return (
+              <a
+                {...aProps}
+                target={target}
+                onClick={(e) => {
+                  e.preventDefault();
+                  openExternalUrlWithConfirmation(href);
+                }}
+                style={{ cursor: "pointer" }}
+              />
+            );
+          }
+
           return <a {...aProps} target={target} />;
         }
       }}

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 />
+    </>
+  );
 }

frontend/src/utils/openUrl.ts

@@ -0,0 +1,103 @@
+/**
+ * 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";
+
+// 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
+ *
+ * - 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
+      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 {
+      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);
+  }
+}