feat: implement marketplace deep links and real app installation

- Add syft://marketplace/{appId}?action=install deep link support
- Integrate real installApp API throughout marketplace components
- Update marketplace API to populate installed field from listApps
- Add automatic installation when action=install parameter present
- Implement consistent toast notifications with app icons
- Add install/uninstall functionality to marketplace cards and detail page
- Support auto-refresh of installation status across marketplace UI
- Add uninstall functionality to marketplace detail page
- Change action button in marketplace list app card to open installed app

Author: itstauq

src-frontend/app/layout.tsx

@@ -47,8 +47,12 @@ function MainLayout({ children }: { children: React.ReactNode }) {
         logger: (message: string) => Promise<void>,
       ) {
         const original = console[fnName];
-        console[fnName] = (message) => {
-          original(message);
+        console[fnName] = (...args) => {
+          original(...args);
+          // Convert all arguments to strings and join them
+          const message = args
+            .map((arg) => (typeof arg === "string" ? arg : JSON.stringify(arg)))
+            .join(" ");
           logger(message);
         };
       }

src-frontend/components/deep-link-router.tsx

@@ -7,27 +7,32 @@ import { parseDeepLink } from "@/lib/deep-links/parser";
 import { createDeepLinkRouter } from "@/lib/deep-links/router";
 import { createWorkspaceHandler } from "@/lib/deep-links/handlers/workspace";
 import { createAppsHandler } from "@/lib/deep-links/handlers/apps";
+import { createMarketplaceHandler } from "@/lib/deep-links/handlers/marketplace";
+
+const INITIAL_DEEP_LINKS_PROCESSED_KEY = "syft_initial_deep_links_processed";
 
 export function DeepLinkRouter() {
   const router = useRouter();
 
   useEffect(() => {
     const handleDeepLink = async () => {
       if (typeof window !== "undefined" && window.__TAURI__) {
-        const { onOpenUrl } = window.__TAURI__.deepLink;
+        const { onOpenUrl, getCurrent } = window.__TAURI__.deepLink;
 
         // Create handlers with dependencies
         const workspaceHandler = createWorkspaceHandler({ router });
         const appsHandler = createAppsHandler({ router });
+        const marketplaceHandler = createMarketplaceHandler({ router });
 
         // Create the router
         const deepLinkRouter = createDeepLinkRouter({
           workspaceHandler,
           appsHandler,
+          marketplaceHandler,
         });
 
-        await onOpenUrl(async (urls) => {
-          console.log("Deep link received:", urls);
+        const processUrls = async (urls: string[]) => {
+          console.log("Processing deep links:", urls);
 
           for (const url of urls) {
             try {
@@ -56,7 +61,27 @@ export function DeepLinkRouter() {
               });
             }
           }
-        });
+        };
+
+        // Check for initial URLs that launched the app (run once per session)
+        const hasProcessed = sessionStorage.getItem(
+          INITIAL_DEEP_LINKS_PROCESSED_KEY,
+        );
+        if (!hasProcessed) {
+          sessionStorage.setItem(INITIAL_DEEP_LINKS_PROCESSED_KEY, "true");
+          try {
+            const initialUrls = await getCurrent();
+            if (initialUrls && initialUrls.length > 0) {
+              console.log("Processing initial launch URLs:", initialUrls);
+              await processUrls(initialUrls);
+            }
+          } catch (error) {
+            console.log("No initial URLs or failed to get them:", error);
+          }
+        }
+
+        // Listen for new deep link events while app is running
+        await onOpenUrl(processUrls);
       }
     };
 

src-frontend/components/marketplace/app-card.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { Star } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -11,13 +12,18 @@ import { InstallConfirmationDialog } from "./install-confirmation-dialog";
 interface AppCardProps {
   app: MarketplaceApp;
   onClick: (appId: string) => void;
-  onActionClick?: (appId: string) => void;
+  onAppInstalled?: () => void;
 }
 
-export function AppCard({ app, onClick, onActionClick }: AppCardProps) {
-  const [isProcessing, setIsProcessing] = useState(false);
+export function AppCard({ app, onClick, onAppInstalled }: AppCardProps) {
+  const router = useRouter();
   const [isInstalled, setIsInstalled] = useState(app.installed);
   const [showInstallDialog, setShowInstallDialog] = useState(false);
+
+  // Sync with app.installed prop when it changes
+  useEffect(() => {
+    setIsInstalled(app.installed);
+  }, [app.installed]);
   return (
     <>
       <motion.div
@@ -58,35 +64,21 @@ export function AppCard({ app, onClick, onActionClick }: AppCardProps) {
                 size="sm"
                 className={
                   isInstalled
-                    ? "transition-colors hover:border-red-500 hover:text-red-500"
+                    ? "hover:border-primary hover:text-primary transition-colors"
                     : ""
                 }
-                disabled={isProcessing}
                 onClick={(e) => {
                   e.stopPropagation();
                   if (isInstalled) {
-                    if (onActionClick) {
-                      setIsProcessing(true);
-                      // Simulate installation/uninstallation process
-                      setTimeout(() => {
-                        setIsInstalled(!isInstalled);
-                        setIsProcessing(false);
-                        onActionClick(app.id);
-                      }, 2000);
-                    }
+                    // Navigate to the apps page to open the installed app
+                    router.push(`/apps?id=${app.id}`);
                   } else {
                     // Show install confirmation dialog
                     setShowInstallDialog(true);
                   }
                 }}
               >
-                {isProcessing
-                  ? isInstalled
-                    ? "Uninstalling..."
-                    : "Installing..."
-                  : isInstalled
-                    ? "Uninstall"
-                    : "Install"}
+                {isInstalled ? "Open App" : "Install"}
               </Button>
             </div>
           </div>
@@ -107,9 +99,9 @@ export function AppCard({ app, onClick, onActionClick }: AppCardProps) {
         onOpenChange={setShowInstallDialog}
         app={app}
         onConfirm={() => {
-          setIsInstalled(!isInstalled);
-          if (onActionClick) {
-            onActionClick(app.id);
+          setIsInstalled(true);
+          if (onAppInstalled) {
+            onAppInstalled();
           }
           setShowInstallDialog(false);
         }}

src-frontend/components/marketplace/app-detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { ReviewDialog } from "./review-dialog";
 import { ChevronLeft, Star, ExternalLink } from "lucide-react";
 import ReactMarkdown from "react-markdown";
@@ -10,13 +10,15 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Toolbar } from "@/components/ui/toolbar";
 import { type MarketplaceApp, getMarketplaceApp } from "@/lib/api/marketplace";
+import { installApp, uninstallApp } from "@/lib/api/apps";
+import { toast } from "@/hooks/use-toast";
 import { useBreadcrumbStore } from "@/stores";
 import { MarketplaceBreadcrumb } from "./marketplace-breadcrumb";
 
 import { getAssetPath } from "@/lib/utils";
 import Image from "next/image";
 import remarkGfm from "remark-gfm";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Separator } from "@radix-ui/react-separator";
 
 interface AppDetailProps {
@@ -62,13 +64,102 @@ interface AppDetailProps {
 
 export function AppDetail({ appId, onBack }: AppDetailProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [app, setApp] = useState<MarketplaceApp | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isUninstalling, setIsUninstalling] = useState(false);
   const [isInstalled, setIsInstalled] = useState(false);
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
   const { setBreadcrumb, clearBreadcrumb } = useBreadcrumbStore();
 
+  const handleInstall = useCallback(async () => {
+    if (!app || !app.repository) {
+      toast({
+        icon: "❌",
+        title: "Installation Failed",
+        description: "App repository URL is not available",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsProcessing(true);
+
+    try {
+      // Show loading toast
+      toast({
+        icon: app.icon || "📦",
+        title: "Installing app",
+        description: `Installing ${app.name}...`,
+      });
+
+      // Install app using repository URL
+      await installApp({
+        repoURL: app.repository,
+        branch: app.branch || "main",
+        force: false,
+      });
+
+      // Success toast
+      toast({
+        icon: "🎉",
+        title: "App Installed!",
+        description: `${app.name} has been successfully installed.`,
+        variant: "default",
+      });
+
+      setIsInstalled(true);
+    } catch (error) {
+      console.error("Failed to install app:", error);
+
+      toast({
+        icon: "❌",
+        title: "Installation Failed",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [app]);
+
+  const handleUninstall = useCallback(async () => {
+    if (!app) return;
+
+    setIsUninstalling(true);
+    const appName = app.name;
+
+    try {
+      toast({
+        icon: "🗑️",
+        title: "Uninstalling...",
+        description: `Uninstalling ${appName}...`,
+      });
+
+      await uninstallApp(app.id);
+
+      toast({
+        icon: "🗑️",
+        title: "App uninstalled",
+        description: `${appName} has been uninstalled.`,
+      });
+
+      setIsInstalled(false);
+    } catch (error) {
+      toast({
+        icon: "❌",
+        title: "Uninstall Failed",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsUninstalling(false);
+    }
+  }, [app]);
+
   useEffect(() => {
     const fetchApp = async () => {
       try {
@@ -85,21 +176,19 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
     fetchApp();
   }, [appId]);
 
+  useEffect(() => {
+    const action = searchParams.get("action");
+    if (action === "install" && app && !isInstalled && !isProcessing) {
+      // Automatically trigger installation
+      handleInstall();
+    }
+  }, [searchParams, app, isInstalled, isProcessing, handleInstall]);
+
   useEffect(() => {
     setBreadcrumb(<MarketplaceBreadcrumb app={app} />);
     return () => clearBreadcrumb();
   }, [setBreadcrumb, clearBreadcrumb, app]);
 
-  const handleInstall = () => {
-    setIsProcessing(true);
-
-    // Simulate installation
-    setTimeout(() => {
-      setIsProcessing(false);
-      setIsInstalled(true);
-    }, 1500);
-  };
-
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -133,11 +222,19 @@ export function AppDetail({ appId, onBack }: AppDetailProps) {
             <Button
               variant="default"
               onClick={() => {
-                router.push(`/apps/${app.id}`);
+                router.push(`/apps/?id=${app.id}`);
               }}
             >
               Open App
             </Button>
+            <Button
+              variant="outline"
+              className="border-destructive text-destructive hover:text-destructive hover:bg-none"
+              onClick={handleUninstall}
+              disabled={isUninstalling}
+            >
+              {isUninstalling ? "Uninstalling..." : "Uninstall App"}
+            </Button>
           </div>
         )}
       </Toolbar>