larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/settings/hub/marketplace-section.tsx

@@ -0,0 +1,574 @@
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
+import {
+  Download,
+  Trash2,
+  Check,
+  Loader2,
+  ExternalLink,
+  Search,
+  type LucideIcon,
+  Film,
+  ScanEye,
+  Megaphone,
+  AlertTriangle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { Input } from '../../ui/input';
+import { GenericAlert } from '@/components/alerts/generic-alert';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface MarketplaceTool {
+  id: string;
+  name: string;
+  description: string;
+  longDescription?: string;
+  category: string;
+  version: string;
+  pricing: 'free' | 'pro' | 'enterprise';
+  installSize: string;
+  systemDeps?: string[];
+  requiresSandbox?: boolean;
+  emoji?: string;
+  iconUrl?: string;
+  icon: string;
+  author: string;
+  capabilities: string[];
+  tags?: string[];
+  downloads: number;
+  repositoryUrl?: string;
+  license?: string;
+  updatedAt?: string;
+  status: 'available' | 'installed' | 'installing' | 'uninstalling' | 'error';
+  comingSoon?: boolean;
+  installedAt?: string;
+  /** Version recorded when this tool was installed on this machine. */
+  installedVersion?: string;
+  /** Newest version supplied by the Marketplace catalog. */
+  availableVersion?: string;
+  updateAvailable?: boolean;
+  runtime?: {
+    defaultMode: string;
+    modes: Array<{ id: string; label: string; description: string; icon?: string }>;
+  };
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Film,
+  ScanEye,
+};
+function formatDownloads(count: number): string {
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
+  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`;
+  return String(count);
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  all: 'All',
+  media: 'Media',
+  search: 'Search',
+  analytics: 'Analytics',
+  integration: 'Integration',
+  embedding: 'Embedding',
+  ai: 'AI',
+  automation: 'Automation',
+  utility: 'Utility',
+};
+
+const fetcher = (url: string) =>
+  fetch(url).then((r) => r.json() as Promise<{ tools: MarketplaceTool[] }>);
+
+export function MarketplaceSection({ embedded = false }: { embedded?: boolean }) {
+  const router = useRouter();
+  const { data, isLoading, mutate } = useSWR('/api/marketplace', fetcher, {
+    refreshInterval: (data) =>
+      data?.tools.some((t) => t.status === 'installing' || t.status === 'uninstalling') ? 2000 : 0,
+  });
+  const [installing, setInstalling] = useState<Set<string>>(new Set());
+  const [uninstalling, setUninstalling] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState('all');
+  const [toolToDelete, setToolToDelete] = useState<string | null>(null);
+  const [toolToInstall, setToolToInstall] = useState<MarketplaceTool | null>(null);
+  const [runtimeMode, setRuntimeMode] = useState<string | null>(null);
+
+  const handleInstall = useCallback(
+    async (tool: MarketplaceTool, selectedRuntimeMode?: string, forceUpdate = false) => {
+      const toolId = tool.id;
+      setInstalling((prev) => new Set(prev).add(toolId));
+      const toastId = toast.loading(
+        forceUpdate ? 'Updating tool…' : 'Downloading and installing tool…',
+        {
+          description: forceUpdate
+            ? 'Your existing configuration will be kept.'
+            : 'This may take a minute on first install.',
+        },
+      );
+      try {
+        const res = await fetch(`/api/marketplace/${toolId}${forceUpdate ? '?force=true' : ''}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(selectedRuntimeMode ? { runtimeMode: selectedRuntimeMode } : {}),
+        });
+        if (!res.ok) {
+          const err = await res.json();
+          throw new Error(err.error || 'Install failed');
+        }
+        toast.dismiss(toastId);
+        if (selectedRuntimeMode === 'managed-cloud') {
+          const runtime = await fetch(`/api/tools/${encodeURIComponent(toolId)}/runtime`, {
+            method: 'POST',
+          });
+          if (!runtime.ok) {
+            const result = await runtime.json().catch(() => ({}));
+            toast.warning('Tool installed, but cloud setup needs attention.', {
+              description: result.error || 'Open Installed Tools to reconnect your cloud runtime.',
+              action: {
+                label: 'Open settings',
+                onClick: () => router.push('/settings?section=tool-settings'),
+              },
+            });
+          } else {
+            toast.success('Tool installed and cloud access is ready.', {
+              action: {
+                label: 'Open settings',
+                onClick: () => router.push('/settings?section=tool-settings'),
+              },
+            });
+          }
+        } else {
+          toast.success(forceUpdate ? 'Tool updated successfully' : 'Tool installed successfully', {
+            action: tool.runtime
+              ? {
+                  label: 'Open settings',
+                  onClick: () => router.push('/settings?section=tool-settings'),
+                }
+              : undefined,
+          });
+        }
+        await mutate();
+      } catch (err) {
+        toast.dismiss(toastId);
+        toast.error(err instanceof Error ? err.message : 'Failed to install tool');
+      } finally {
+        setInstalling((prev) => {
+          const next = new Set(prev);
+          next.delete(toolId);
+          return next;
+        });
+      }
+    },
+    [mutate, router],
+  );
+
+  const handleUpdate = useCallback(
+    async (tool: MarketplaceTool) => {
+      await handleInstall(tool, undefined, true);
+    },
+    [handleInstall],
+  );
+
+  function chooseInstall(tool: MarketplaceTool) {
+    const modes = tool.runtime?.modes ?? [];
+    if (modes.length < 2) {
+      void handleInstall(tool, modes[0]?.id);
+      return;
+    }
+    setRuntimeMode(tool.runtime?.defaultMode ?? modes[0]?.id ?? null);
+    setToolToInstall(tool);
+  }
+
+  const handleUninstall = useCallback(
+    async (toolId: string) => {
+      setUninstalling((prev) => new Set(prev).add(toolId));
+      const toastId = toast.loading('Removing tool…', {
+        description: 'This may take a moment.',
+      });
+      try {
+        const res = await fetch(`/api/marketplace/${toolId}?purgeConfig=true`, {
+          method: 'DELETE',
+        });
+        if (!res.ok) throw new Error('Uninstall failed');
+        toast.dismiss(toastId);
+        toast.success('Tool removed');
+        await mutate();
+      } catch {
+        toast.dismiss(toastId);
+        toast.error('Failed to remove tool');
+      } finally {
+        setUninstalling((prev) => {
+          const next = new Set(prev);
+          next.delete(toolId);
+          return next;
+        });
+      }
+    },
+    [mutate],
+  );
+
+  const tools = data?.tools ?? [];
+
+  // Derive available categories from tools
+  const categories = useMemo(() => {
+    const cats = new Set(tools.map((t) => t.category));
+    return ['all', ...Array.from(cats).sort()];
+  }, [tools]);
+
+  // Filter tools
+  const filteredTools = useMemo(() => {
+    let result = tools;
+
+    if (activeCategory !== 'all') {
+      result = result.filter((t) => t.category === activeCategory);
+    }
+
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (t) =>
+          t.name.toLowerCase().includes(q) ||
+          t.description.toLowerCase().includes(q) ||
+          t.tags?.some((tag) => tag.toLowerCase().includes(q)) ||
+          t.author.toLowerCase().includes(q),
+      );
+    }
+
+    return result;
+  }, [tools, activeCategory, searchQuery]);
+
+  const toolToDeleteObj = useMemo(
+    () => tools.find((t) => t.id === toolToDelete),
+    [tools, toolToDelete],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Header */}
+      {!embedded && (
+        <div>
+          <h2 className="text-lg font-semibold text-foreground">Marketplace</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Extend Larkup with optional tools and capabilities.
+          </p>
+        </div>
+      )}
+
+      {/* Search + Category filters */}
+      <div className="flex flex-col gap-3">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="Search tools…"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className={cn(
+              'w-full rounded-lg border border-border bg-background pl-9 pr-3 py-2',
+              'text-[13px] text-foreground placeholder:text-muted-foreground/50',
+              'outline-none transition-colors',
+              'focus:border-foreground/20 bg-white/70',
+            )}
+          />
+        </div>
+
+        {/* Category pills */}
+        {categories.length > 2 && (
+          <div className="flex items-center gap-1.5 overflow-x-auto">
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                type="button"
+                onClick={() => setActiveCategory(cat)}
+                className={cn(
+                  'shrink-0 rounded-md px-2.5 py-1 text-[12px] font-medium transition-colors',
+                  activeCategory === cat
+                    ? 'bg-foreground text-background'
+                    : 'text-muted-foreground hover:bg-secondary hover:text-foreground',
+                )}
+              >
+                {CATEGORY_LABELS[cat] ?? cat}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Tools list */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : filteredTools.length === 0 ? (
+        <div className="py-16 text-center text-sm text-muted-foreground">
+          {searchQuery || activeCategory !== 'all'
+            ? 'No tools match your search.'
+            : 'No tools available yet.'}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {filteredTools.map((tool) => (
+            <ToolRow
+              key={tool.id}
+              tool={tool}
+              installing={installing.has(tool.id) || tool.status === 'installing'}
+              uninstalling={uninstalling.has(tool.id) || tool.status === 'uninstalling'}
+              onInstall={() => chooseInstall(tool)}
+              onUpdate={() => void handleUpdate(tool)}
+              onUninstall={(id) => setToolToDelete(id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <GenericAlert
+        open={!!toolToDelete}
+        onOpenChange={(open) => !open && setToolToDelete(null)}
+        title="Remove Tool?"
+        description={
+          <>
+            Are you sure you want to remove <strong>{toolToDeleteObj?.name}</strong>?
+            <br />
+            <br />
+            Any related installed tools credentials and configurations will be removed too.
+          </>
+        }
+        cancelText="Cancel"
+        actionText="Remove"
+        variant="destructive"
+        icon={<AlertTriangle className="size-5 text-destructive" />}
+        onAction={() => {
+          if (toolToDelete) handleUninstall(toolToDelete);
+        }}
+      />
+      <Dialog
+        open={Boolean(toolToInstall)}
+        onOpenChange={(open) => {
+          if (!open) setToolToInstall(null);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Choose how to run {toolToInstall?.name}</DialogTitle>
+            <DialogDescription>
+              This choice is saved with the installed tool and can be changed later in Installed
+              Tools.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-2">
+            {toolToInstall?.runtime?.modes.map((mode) => (
+              <button
+                key={mode.id}
+                type="button"
+                onClick={() => setRuntimeMode(mode.id)}
+                className={cn(
+                  'rounded-lg border px-3 py-3 text-left transition-colors',
+                  runtimeMode === mode.id
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:bg-muted/50',
+                )}
+              >
+                <span className="flex items-center gap-2 text-sm font-medium">
+                  {mode.icon && <img src={mode.icon} alt="" className="size-4 object-contain" />}
+                  {mode.label}
+                </span>
+                <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">
+                  {mode.description}
+                </span>
+              </button>
+            ))}
+          </div>
+          <Button
+            disabled={!toolToInstall || !runtimeMode}
+            onClick={() => {
+              if (!toolToInstall || !runtimeMode) return;
+              const selectedTool = toolToInstall;
+              const selectedMode = runtimeMode;
+              setToolToInstall(null);
+              void handleInstall(selectedTool, selectedMode);
+            }}
+          >
+            Install with this runtime
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function ToolRow({
+  tool,
+  installing,
+  uninstalling,
+  onInstall,
+  onUpdate,
+  onUninstall,
+}: {
+  tool: MarketplaceTool;
+  installing: boolean;
+  uninstalling: boolean;
+  onInstall: () => void;
+  onUpdate: () => void;
+  onUninstall: (id: string) => void;
+}) {
+  const Icon = ICON_MAP[tool.icon] ?? Film;
+  const isInstalled = tool.status === 'installed';
+  const isComingSoon = tool.comingSoon;
+
+  return (
+    <div
+      className={cn(
+        'group flex min-h-24 items-center gap-4 rounded-xl border border-border bg-white/70 px-4 py-4 dark:bg-card/70',
+        'transition-colors hover:border-border/80',
+      )}
+    >
+      {/* Icon */}
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted/50 border">
+        {tool.iconUrl ? (
+          <img
+            src={tool.iconUrl}
+            alt=""
+            className="size-5 object-contain"
+            onError={(event) => {
+              event.currentTarget.style.display = 'none';
+            }}
+          />
+        ) : tool.emoji ? (
+          <span className="text-xl leading-none">{tool.emoji}</span>
+        ) : (
+          <Icon className="size-5 text-foreground" strokeWidth={1.75} />
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <h3 className="text-[13px] font-medium text-foreground truncate">{tool.name}</h3>
+          <span className="shrink-0 text-[11px] text-muted-foreground/60">
+            v{tool.availableVersion ?? tool.version}
+          </span>
+          <span className="shrink-0 text-[11px] text-muted-foreground/40">·</span>
+          <span className="shrink-0 text-[11px] text-muted-foreground/60">{tool.author}</span>
+        </div>
+
+        <p className="mt-0.5 text-[12px] text-muted-foreground leading-relaxed line-clamp-1">
+          {tool.description}
+        </p>
+
+        {/* Tags */}
+        {tool.tags && tool.tags.length > 0 && (
+          <div className="mt-1.5 flex items-center gap-1 overflow-hidden">
+            {tool.requiresSandbox && (
+              <span className="rounded-md bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400">
+                Sandbox required
+              </span>
+            )}
+            {tool.tags.slice(0, 4).map((tag) => (
+              <span
+                key={tag}
+                className="rounded-md bg-secondary px-1.5 py-0.5 text-[10px] text-muted-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+            {tool.tags.length > 4 && (
+              <span className="text-[10px] text-muted-foreground/50">+{tool.tags.length - 4}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Meta column */}
+      <div className="hidden sm:flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground/60">
+        <span className="tabular-nums">{tool.installSize}</span>
+        {tool.downloads > 0 && (
+          <span className="tabular-nums">↓ {formatDownloads(tool.downloads)}</span>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="shrink-0 flex items-center gap-1.5">
+        {tool.repositoryUrl && (
+          <a
+            href={tool.repositoryUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-1.5 rounded-md text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+          >
+            <ExternalLink className="size-3.5" />
+          </a>
+        )}
+
+        {isComingSoon ? (
+          <Button size="sm" className={'h-7 text-[11px]'} variant={'default'} disabled>
+            <Megaphone className="size-3" />
+            Soon
+          </Button>
+        ) : isInstalled ? (
+          <div className="flex items-center gap-1.5">
+            {tool.updateAvailable ? (
+              <Button
+                variant="default"
+                size="sm"
+                disabled={installing}
+                className="h-7 gap-1.5 px-3 text-[11px]"
+                onClick={onUpdate}
+              >
+                {installing ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  <Download className="size-3" />
+                )}
+                {installing ? 'Updating…' : 'Update'}
+              </Button>
+            ) : (
+              <span className="flex items-center gap-1 text-[11px] font-medium text-emerald-600">
+                <Check className="size-3" />
+                Installed
+              </span>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={uninstalling}
+              className="size-7 p-0 text-muted-foreground/40 hover:text-destructive"
+              onClick={() => onUninstall(tool.id)}
+            >
+              {uninstalling ? (
+                <Loader2 className="size-3 animate-spin" />
+              ) : (
+                <Trash2 className="size-3" />
+              )}
+            </Button>
+          </div>
+        ) : (
+          <Button
+            variant="default"
+            size="sm"
+            className="h-7 gap-1.5 text-[11px] px-3"
+            disabled={installing}
+            onClick={onInstall}
+          >
+            {installing ? (
+              <Loader2 className="size-3 animate-spin" />
+            ) : (
+              <Download className="size-3" />
+            )}
+            {installing ? 'Installing…' : 'Install'}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}