feat: add skill packs management with support for category, risk, and source fields

frontend/src/app/skills/marketplace/page.tsx

@@ -3,7 +3,7 @@
 export const dynamic = "force-dynamic";
 
 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 
 import { useAuth } from "@/auth/clerk";
@@ -26,18 +26,15 @@ import {
   type listSkillPacksApiV1SkillsPacksGetResponse,
   useListSkillPacksApiV1SkillsPacksGet,
 } from "@/api/generated/skills/skills";
+import { SkillInstallDialog } from "@/components/skills/SkillInstallDialog";
 import { MarketplaceSkillsTable } from "@/components/skills/MarketplaceSkillsTable";
 import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { buttonVariants } from "@/components/ui/button";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
+import {
+  normalizeRepoSourceUrl,
+  repoBaseFromSkillSourceUrl,
+} from "@/lib/skills-source";
 import { useUrlSorting } from "@/lib/use-url-sorting";
 
 const MARKETPLACE_SKILLS_SORTABLE_COLUMNS = [
@@ -48,25 +45,6 @@ const MARKETPLACE_SKILLS_SORTABLE_COLUMNS = [
   "updated_at",
 ];
 
-const normalizeRepoSourceUrl = (sourceUrl: string): string => {
-  const trimmed = sourceUrl.trim().replace(/\/+$/, "");
-  return trimmed.endsWith(".git") ? trimmed.slice(0, -4) : trimmed;
-};
-
-const repoBaseFromSkillSourceUrl = (skillSourceUrl: string): string | null => {
-  try {
-    const parsed = new URL(skillSourceUrl);
-    const marker = "/tree/";
-    const markerIndex = parsed.pathname.indexOf(marker);
-    if (markerIndex <= 0) return null;
-    return normalizeRepoSourceUrl(
-      `${parsed.origin}${parsed.pathname.slice(0, markerIndex)}`,
-    );
-  } catch {
-    return null;
-  }
-};
-
 export default function SkillsMarketplacePage() {
   const queryClient = useQueryClient();
   const searchParams = useSearchParams();
@@ -159,6 +137,51 @@ export default function SkillsMarketplacePage() {
     });
   }, [selectedPack, skills]);
 
+  const loadSkillsByGateway = useCallback(
+    async () =>
+      Promise.all(
+        gateways.map(async (gateway) => {
+          const response = await listMarketplaceSkillsApiV1SkillsMarketplaceGet({
+            gateway_id: gateway.id,
+          });
+          return {
+            gatewayId: gateway.id,
+            gatewayName: gateway.name,
+            skills: response.status === 200 ? response.data : [],
+          };
+        }),
+      ),
+    [gateways],
+  );
+
+  const updateInstalledGatewayNames = useCallback(
+    ({
+      skillId,
+      gatewayName,
+      installed,
+    }: {
+      skillId: string;
+      gatewayName: string;
+      installed: boolean;
+    }) => {
+      setInstalledGatewayNamesBySkillId((previous) => {
+        const installedOn = previous[skillId] ?? [];
+        if (installed) {
+          if (installedOn.includes(gatewayName)) return previous;
+          return {
+            ...previous,
+            [skillId]: [...installedOn, gatewayName],
+          };
+        }
+        return {
+          ...previous,
+          [skillId]: installedOn.filter((name) => name !== gatewayName),
+        };
+      });
+    },
+    [],
+  );
+
   useEffect(() => {
     let cancelled = false;
 
@@ -169,14 +192,7 @@ export default function SkillsMarketplacePage() {
       }
 
       try {
-        const responses = await Promise.all(
-          gateways.map(async (gateway) => {
-            const response = await listMarketplaceSkillsApiV1SkillsMarketplaceGet({
-              gateway_id: gateway.id,
-            });
-            return { gatewayName: gateway.name, response };
-          }),
-        );
+        const gatewaySkills = await loadSkillsByGateway();
 
         if (cancelled) return;
 
@@ -185,9 +201,8 @@ export default function SkillsMarketplacePage() {
           nextInstalledGatewayNamesBySkillId[skill.id] = [];
         }
 
-        for (const { gatewayName, response } of responses) {
-          if (response.status !== 200) continue;
-          for (const skill of response.data) {
+        for (const { gatewayName, skills: gatewaySkillRows } of gatewaySkills) {
+          for (const skill of gatewaySkillRows) {
             if (!skill.installed) continue;
             if (!nextInstalledGatewayNamesBySkillId[skill.id]) continue;
             nextInstalledGatewayNamesBySkillId[skill.id].push(gatewayName);
@@ -206,7 +221,7 @@ export default function SkillsMarketplacePage() {
     return () => {
       cancelled = true;
     };
-  }, [gateways, isAdmin, isSignedIn, skills]);
+  }, [gateways, isAdmin, isSignedIn, loadSkillsByGateway, skills]);
 
   const installMutation =
     useInstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdInstallPost<ApiError>(
@@ -223,13 +238,10 @@ export default function SkillsMarketplacePage() {
             const gatewayName =
               gateways.find((gateway) => gateway.id === variables.params.gateway_id)?.name;
             if (gatewayName) {
-              setInstalledGatewayNamesBySkillId((previous) => {
-                const installedOn = previous[variables.skillId] ?? [];
-                if (installedOn.includes(gatewayName)) return previous;
-                return {
-                  ...previous,
-                  [variables.skillId]: [...installedOn, gatewayName],
-                };
+              updateInstalledGatewayNames({
+                skillId: variables.skillId,
+                gatewayName,
+                installed: true,
               });
             }
           },
@@ -253,12 +265,10 @@ export default function SkillsMarketplacePage() {
             const gatewayName =
               gateways.find((gateway) => gateway.id === variables.params.gateway_id)?.name;
             if (gatewayName) {
-              setInstalledGatewayNamesBySkillId((previous) => {
-                const installedOn = previous[variables.skillId] ?? [];
-                return {
-                  ...previous,
-                  [variables.skillId]: installedOn.filter((name) => name !== gatewayName),
-                };
+              updateInstalledGatewayNames({
+                skillId: variables.skillId,
+                gatewayName,
+                installed: false,
               });
             }
           },
@@ -288,18 +298,11 @@ export default function SkillsMarketplacePage() {
       setIsGatewayStatusLoading(true);
       setGatewayStatusError(null);
       try {
-        const entries = await Promise.all(
-          gateways.map(async (gateway) => {
-            const response = await listMarketplaceSkillsApiV1SkillsMarketplaceGet({
-              gateway_id: gateway.id,
-            });
-            const row =
-              response.status === 200
-                ? response.data.find((skill) => skill.id === selectedSkill.id)
-                : null;
-            return [gateway.id, Boolean(row?.installed)] as const;
-          }),
-        );
+        const gatewaySkills = await loadSkillsByGateway();
+        const entries = gatewaySkills.map(({ gatewayId, skills: gatewaySkillRows }) => {
+          const row = gatewaySkillRows.find((skill) => skill.id === selectedSkill.id);
+          return [gatewayId, Boolean(row?.installed)] as const;
+        });
         if (cancelled) return;
         setGatewayInstalledById(Object.fromEntries(entries));
       } catch (error) {
@@ -319,10 +322,10 @@ export default function SkillsMarketplacePage() {
     return () => {
       cancelled = true;
     };
-  }, [gateways, selectedSkill]);
+  }, [gateways, loadSkillsByGateway, selectedSkill]);
 
   const mutationError =
-    installMutation.error?.message ?? uninstallMutation.error?.message;
+    installMutation.error?.message ?? uninstallMutation.error?.message ?? null;
 
   const isMutating = installMutation.isPending || uninstallMutation.isPending;
 
@@ -407,92 +410,34 @@ export default function SkillsMarketplacePage() {
             </>
           )}
 
-        {skillsQuery.error ? (
-          <p className="text-sm text-rose-600">{skillsQuery.error.message}</p>
-        ) : null}
-        {packsQuery.error ? (
-          <p className="text-sm text-rose-600">{packsQuery.error.message}</p>
-        ) : null}
-        {mutationError ? <p className="text-sm text-rose-600">{mutationError}</p> : null}
-      </div>
+          {skillsQuery.error ? (
+            <p className="text-sm text-rose-600">{skillsQuery.error.message}</p>
+          ) : null}
+          {packsQuery.error ? (
+            <p className="text-sm text-rose-600">{packsQuery.error.message}</p>
+          ) : null}
+          {mutationError ? <p className="text-sm text-rose-600">{mutationError}</p> : null}
+        </div>
       </DashboardPageLayout>
 
-      <Dialog
-        open={Boolean(selectedSkill)}
+      <SkillInstallDialog
+        selectedSkill={selectedSkill}
+        gateways={gateways}
+        gatewayInstalledById={gatewayInstalledById}
+        isGatewayStatusLoading={isGatewayStatusLoading}
+        installingGatewayId={installingGatewayId}
+        isMutating={isMutating}
+        gatewayStatusError={gatewayStatusError}
+        mutationError={mutationError}
         onOpenChange={(open) => {
           if (!open) {
             setSelectedSkill(null);
           }
         }}
-      >
-        <DialogContent
-          aria-label="Install skill on gateways"
-          className="max-w-xl p-6 sm:p-7"
-        >
-          <DialogHeader className="pb-1">
-            <DialogTitle>{selectedSkill ? selectedSkill.name : "Install skill"}</DialogTitle>
-            <DialogDescription>
-              Choose one or more gateways where this skill should be installed.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="mt-2 space-y-3.5">
-            {isGatewayStatusLoading ? (
-              <p className="text-sm text-slate-500">Loading gateways...</p>
-            ) : (
-              gateways.map((gateway) => {
-                const isInstalled = gatewayInstalledById[gateway.id] === true;
-                const isUpdatingGateway =
-                  installingGatewayId === gateway.id &&
-                  (installMutation.isPending || uninstallMutation.isPending);
-                return (
-                  <div
-                    key={gateway.id}
-                    className="flex items-center justify-between rounded-xl border border-slate-200 bg-white p-4"
-                  >
-                    <div>
-                      <p className="text-sm font-medium text-slate-900">{gateway.name}</p>
-                    </div>
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant={isInstalled ? "outline" : "primary"}
-                      onClick={() =>
-                        void handleGatewayInstallAction(gateway.id, isInstalled)
-                      }
-                      disabled={installMutation.isPending || uninstallMutation.isPending}
-                    >
-                      {isInstalled
-                        ? isUpdatingGateway
-                          ? "Uninstalling..."
-                          : "Uninstall"
-                        : isUpdatingGateway
-                          ? "Installing..."
-                          : "Install"}
-                    </Button>
-                  </div>
-                );
-              })
-            )}
-            {gatewayStatusError ? (
-              <p className="text-sm text-rose-600">{gatewayStatusError}</p>
-            ) : null}
-            {mutationError ? (
-              <p className="text-sm text-rose-600">{mutationError}</p>
-            ) : null}
-          </div>
-
-          <DialogFooter className="mt-6 border-t border-slate-200 pt-4">
-            <Button
-              variant="outline"
-              onClick={() => setSelectedSkill(null)}
-              disabled={installMutation.isPending}
-            >
-              Close
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        onToggleInstall={(gatewayId, isInstalled) => {
+          void handleGatewayInstallAction(gatewayId, isInstalled);
+        }}
+      />
     </>
   );
 }

frontend/src/app/skills/packs/page.tsx

@@ -90,6 +90,25 @@ export default function SkillsPacksPage() {
     deleteMutation.mutate({ packId: deleteTarget.id });
   };
 
+  const handleSyncPack = async (pack: SkillPackRead) => {
+    setSyncingPackIds((previous) => {
+      const next = new Set(previous);
+      next.add(pack.id);
+      return next;
+    });
+    try {
+      await syncMutation.mutateAsync({
+        packId: pack.id,
+      });
+    } finally {
+      setSyncingPackIds((previous) => {
+        const next = new Set(previous);
+        next.delete(pack.id);
+        return next;
+      });
+    }
+  };
+
   return (
     <>
       <DashboardPageLayout
@@ -125,24 +144,7 @@ export default function SkillsPacksPage() {
               canSync
               syncingPackIds={syncingPackIds}
               onSync={(pack) => {
-                void (async () => {
-                  setSyncingPackIds((previous) => {
-                    const next = new Set(previous);
-                    next.add(pack.id);
-                    return next;
-                  });
-                  try {
-                    await syncMutation.mutateAsync({
-                      packId: pack.id,
-                    });
-                  } finally {
-                    setSyncingPackIds((previous) => {
-                      const next = new Set(previous);
-                      next.delete(pack.id);
-                      return next;
-                    });
-                  }
-                })();
+                void handleSyncPack(pack);
               }}
               onDelete={setDeleteTarget}
               emptyState={{