feat: add skill pack management features including creation, editing, and syncing

frontend/src/app/skills/marketplace/[skillId]/edit/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+
+type EditMarketplaceSkillPageProps = {
+  params: Promise<{ skillId: string }>;
+};
+
+export default async function EditMarketplaceSkillPage({
+  params,
+}: EditMarketplaceSkillPageProps) {
+  const { skillId } = await params;
+  redirect(`/skills/packs/${skillId}/edit`);
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function NewMarketplaceSkillPage() {
+  redirect("/skills/packs/new");
+}

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

@@ -0,0 +1,408 @@
+"use client";
+
+export const dynamic = "force-dynamic";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+import { useAuth } from "@/auth/clerk";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { ApiError } from "@/api/mutator";
+import {
+  type listGatewaysApiV1GatewaysGetResponse,
+  useListGatewaysApiV1GatewaysGet,
+} from "@/api/generated/gateways/gateways";
+import type { MarketplaceSkillCardRead } from "@/api/generated/model";
+import {
+  listMarketplaceSkillsApiV1SkillsMarketplaceGet,
+  type listMarketplaceSkillsApiV1SkillsMarketplaceGetResponse,
+  useInstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdInstallPost,
+  useListMarketplaceSkillsApiV1SkillsMarketplaceGet,
+  useUninstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdUninstallPost,
+} from "@/api/generated/skills-marketplace/skills-marketplace";
+import {
+  type listSkillPacksApiV1SkillsPacksGetResponse,
+  useListSkillPacksApiV1SkillsPacksGet,
+} from "@/api/generated/skills/skills";
+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 { useOrganizationMembership } from "@/lib/use-organization-membership";
+import { useUrlSorting } from "@/lib/use-url-sorting";
+
+const MARKETPLACE_SKILLS_SORTABLE_COLUMNS = [
+  "name",
+  "category",
+  "risk",
+  "source",
+  "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();
+  const { isSignedIn } = useAuth();
+  const { isAdmin } = useOrganizationMembership(isSignedIn);
+  const [selectedSkill, setSelectedSkill] = useState<MarketplaceSkillCardRead | null>(null);
+  const [gatewayInstalledById, setGatewayInstalledById] = useState<
+    Record<string, boolean>
+  >({});
+  const [isGatewayStatusLoading, setIsGatewayStatusLoading] = useState(false);
+  const [gatewayStatusError, setGatewayStatusError] = useState<string | null>(null);
+  const [installingGatewayId, setInstallingGatewayId] = useState<string | null>(null);
+
+  const { sorting, onSortingChange } = useUrlSorting({
+    allowedColumnIds: MARKETPLACE_SKILLS_SORTABLE_COLUMNS,
+    defaultSorting: [{ id: "name", desc: false }],
+    paramPrefix: "skills_marketplace",
+  });
+
+  const gatewaysQuery = useListGatewaysApiV1GatewaysGet<
+    listGatewaysApiV1GatewaysGetResponse,
+    ApiError
+  >(undefined, {
+    query: {
+      enabled: Boolean(isSignedIn && isAdmin),
+      refetchOnMount: "always",
+      refetchInterval: 30_000,
+    },
+  });
+
+  const gateways = useMemo(
+    () =>
+      gatewaysQuery.data?.status === 200
+        ? (gatewaysQuery.data.data.items ?? [])
+        : [],
+    [gatewaysQuery.data],
+  );
+
+  const resolvedGatewayId = gateways[0]?.id ?? "";
+
+  const skillsQuery = useListMarketplaceSkillsApiV1SkillsMarketplaceGet<
+    listMarketplaceSkillsApiV1SkillsMarketplaceGetResponse,
+    ApiError
+  >(
+    { gateway_id: resolvedGatewayId },
+    {
+      query: {
+        enabled: Boolean(isSignedIn && isAdmin && resolvedGatewayId),
+        refetchOnMount: "always",
+        refetchInterval: 15_000,
+      },
+    },
+  );
+
+  const skills = useMemo<MarketplaceSkillCardRead[]>(
+    () => (skillsQuery.data?.status === 200 ? skillsQuery.data.data : []),
+    [skillsQuery.data],
+  );
+
+  const packsQuery = useListSkillPacksApiV1SkillsPacksGet<
+    listSkillPacksApiV1SkillsPacksGetResponse,
+    ApiError
+  >({
+    query: {
+      enabled: Boolean(isSignedIn && isAdmin),
+      refetchOnMount: "always",
+    },
+  });
+
+  const packs = useMemo(
+    () => (packsQuery.data?.status === 200 ? packsQuery.data.data : []),
+    [packsQuery.data],
+  );
+
+  const selectedPackId = searchParams.get("packId");
+  const selectedPack = useMemo(
+    () => packs.find((pack) => pack.id === selectedPackId) ?? null,
+    [packs, selectedPackId],
+  );
+
+  const visibleSkills = useMemo(() => {
+    if (!selectedPack) return skills;
+    const selectedRepo = normalizeRepoSourceUrl(selectedPack.source_url);
+    return skills.filter((skill) => {
+      const skillRepo = repoBaseFromSkillSourceUrl(skill.source_url);
+      return skillRepo === selectedRepo;
+    });
+  }, [selectedPack, skills]);
+
+  const installMutation =
+    useInstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdInstallPost<ApiError>(
+      {
+        mutation: {
+          onSuccess: async (_, variables) => {
+            await queryClient.invalidateQueries({
+              queryKey: ["/api/v1/skills/marketplace"],
+            });
+            setGatewayInstalledById((previous) => ({
+              ...previous,
+              [variables.params.gateway_id]: true,
+            }));
+          },
+        },
+      },
+      queryClient,
+    );
+
+  const uninstallMutation =
+    useUninstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdUninstallPost<ApiError>(
+      {
+        mutation: {
+          onSuccess: async () => {
+            await queryClient.invalidateQueries({
+              queryKey: ["/api/v1/skills/marketplace"],
+            });
+          },
+        },
+      },
+      queryClient,
+    );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadGatewayStatus = async () => {
+      if (!selectedSkill) {
+        setGatewayInstalledById({});
+        setGatewayStatusError(null);
+        setIsGatewayStatusLoading(false);
+        return;
+      }
+
+      if (gateways.length === 0) {
+        setGatewayInstalledById({});
+        setGatewayStatusError(null);
+        setIsGatewayStatusLoading(false);
+        return;
+      }
+
+      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;
+          }),
+        );
+        if (cancelled) return;
+        setGatewayInstalledById(Object.fromEntries(entries));
+      } catch (error) {
+        if (cancelled) return;
+        setGatewayStatusError(
+          error instanceof Error ? error.message : "Unable to load gateway status.",
+        );
+      } finally {
+        if (!cancelled) {
+          setIsGatewayStatusLoading(false);
+        }
+      }
+    };
+
+    void loadGatewayStatus();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [gateways, selectedSkill]);
+
+  const mutationError =
+    installMutation.error?.message ?? uninstallMutation.error?.message;
+
+  const isMutating = installMutation.isPending || uninstallMutation.isPending;
+
+  const handleInstallToGateway = async (gatewayId: string) => {
+    if (!selectedSkill) return;
+    setInstallingGatewayId(gatewayId);
+    try {
+      await installMutation.mutateAsync({
+        skillId: selectedSkill.id,
+        params: { gateway_id: gatewayId },
+      });
+    } finally {
+      setInstallingGatewayId(null);
+    }
+  };
+
+  return (
+    <>
+      <DashboardPageLayout
+        signedOut={{
+          message: "Sign in to manage marketplace skills.",
+          forceRedirectUrl: "/skills/marketplace",
+        }}
+        title="Skills Marketplace"
+        description={
+          selectedPack
+            ? `${visibleSkills.length} skill${
+                visibleSkills.length === 1 ? "" : "s"
+              } for ${selectedPack.name}.`
+            : `${visibleSkills.length} skill${
+                visibleSkills.length === 1 ? "" : "s"
+              } synced from packs.`
+        }
+        isAdmin={isAdmin}
+        adminOnlyMessage="Only organization owners and admins can manage skills."
+        stickyHeader
+      >
+        <div className="space-y-6">
+          {gateways.length === 0 ? (
+            <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
+              <p className="font-medium text-slate-900">No gateways available yet.</p>
+              <p className="mt-2">
+                Create a gateway first, then return here to manage installs.
+              </p>
+              <Link
+                href="/gateways/new"
+                className={`${buttonVariants({ variant: "primary", size: "md" })} mt-4`}
+              >
+                Create gateway
+              </Link>
+            </div>
+          ) : (
+            <>
+              <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+                <MarketplaceSkillsTable
+                  skills={visibleSkills}
+                  isLoading={skillsQuery.isLoading}
+                  sorting={sorting}
+                  onSortingChange={onSortingChange}
+                  stickyHeader
+                  canInstallActions={Boolean(resolvedGatewayId)}
+                  isMutating={isMutating}
+                  onSkillClick={setSelectedSkill}
+                  onUninstall={(skill) =>
+                    uninstallMutation.mutate({
+                      skillId: skill.id,
+                      params: { gateway_id: resolvedGatewayId },
+                    })
+                  }
+                  emptyState={{
+                    title: "No marketplace skills yet",
+                    description: "Add packs first, then synced skills will appear here.",
+                    actionHref: "/skills/packs/new",
+                    actionLabel: "Add your first pack",
+                  }}
+                />
+              </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)}
+        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 isInstalling =
+                  installMutation.isPending && installingGatewayId === gateway.id;
+                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>
+                      <p className="text-xs text-slate-500">
+                        {isInstalled ? "Installed" : "Not installed"}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      size="sm"
+                      onClick={() => void handleInstallToGateway(gateway.id)}
+                      disabled={isInstalled || installMutation.isPending}
+                    >
+                      {isInstalled ? "Installed" : isInstalling ? "Installing..." : "Install"}
+                    </Button>
+                  </div>
+                );
+              })
+            )}
+            {gatewayStatusError ? (
+              <p className="text-sm text-rose-600">{gatewayStatusError}</p>
+            ) : null}
+            {installMutation.error ? (
+              <p className="text-sm text-rose-600">{installMutation.error.message}</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>
+    </>
+  );
+}

frontend/src/app/skills/packs/[packId]/edit/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+export const dynamic = "force-dynamic";
+
+import { useParams, useRouter } from "next/navigation";
+
+import { useAuth } from "@/auth/clerk";
+
+import { ApiError } from "@/api/mutator";
+import {
+  type getSkillPackApiV1SkillsPacksPackIdGetResponse,
+  useGetSkillPackApiV1SkillsPacksPackIdGet,
+  useUpdateSkillPackApiV1SkillsPacksPackIdPatch,
+} from "@/api/generated/skills/skills";
+import { MarketplaceSkillForm } from "@/components/skills/MarketplaceSkillForm";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
+import { useOrganizationMembership } from "@/lib/use-organization-membership";
+
+export default function EditSkillPackPage() {
+  const router = useRouter();
+  const params = useParams();
+  const { isSignedIn } = useAuth();
+  const { isAdmin } = useOrganizationMembership(isSignedIn);
+
+  const packIdParam = params?.packId;
+  const packId = Array.isArray(packIdParam) ? packIdParam[0] : packIdParam;
+
+  const packQuery = useGetSkillPackApiV1SkillsPacksPackIdGet<
+    getSkillPackApiV1SkillsPacksPackIdGetResponse,
+    ApiError
+  >(packId ?? "", {
+    query: {
+      enabled: Boolean(isSignedIn && isAdmin && packId),
+      refetchOnMount: "always",
+      retry: false,
+    },
+  });
+
+  const pack = (
+    packQuery.data?.status === 200 ? packQuery.data.data : null
+  );
+
+  const saveMutation = useUpdateSkillPackApiV1SkillsPacksPackIdPatch<ApiError>();
+
+  return (
+    <DashboardPageLayout
+      signedOut={{
+        message: "Sign in to edit skill packs.",
+        forceRedirectUrl: `/skills/packs/${packId ?? ""}/edit`,
+      }}
+      title={pack ? `Edit ${pack.name}` : "Edit skill pack"}
+      description="Update skill URL pack details."
+      isAdmin={isAdmin}
+      adminOnlyMessage="Only organization owners and admins can manage skill packs."
+      stickyHeader
+    >
+      {packQuery.isLoading ? (
+        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+          Loading pack...
+        </div>
+      ) : packQuery.error ? (
+        <div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700 shadow-sm">
+          {packQuery.error.message}
+        </div>
+      ) : !pack ? (
+        <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+          Pack not found.
+        </div>
+      ) : (
+        <MarketplaceSkillForm
+          key={pack.id}
+          initialValues={{
+            sourceUrl: pack.source_url,
+            name: pack.name,
+            description: pack.description ?? "",
+          }}
+          sourceLabel="Pack URL"
+          nameLabel="Pack name (optional)"
+          descriptionLabel="Pack description (optional)"
+          descriptionPlaceholder="Short summary shown in the packs list."
+          requiredUrlMessage="Pack URL is required."
+          submitLabel="Save changes"
+          submittingLabel="Saving..."
+          isSubmitting={saveMutation.isPending}
+          onCancel={() => router.push("/skills/packs")}
+          onSubmit={async (values) => {
+            const result = await saveMutation.mutateAsync({
+              packId: pack.id,
+              data: {
+                source_url: values.sourceUrl,
+                name: values.name || undefined,
+                description: values.description || undefined,
+              },
+            });
+            if (result.status !== 200) {
+              throw new Error("Unable to update pack.");
+            }
+            router.push("/skills/packs");
+          }}
+        />
+      )}
+    </DashboardPageLayout>
+  );
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+export const dynamic = "force-dynamic";
+
+import { useRouter } from "next/navigation";
+
+import { useAuth } from "@/auth/clerk";
+
+import { ApiError } from "@/api/mutator";
+import { useCreateSkillPackApiV1SkillsPacksPost } from "@/api/generated/skills/skills";
+import { MarketplaceSkillForm } from "@/components/skills/MarketplaceSkillForm";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
+import { useOrganizationMembership } from "@/lib/use-organization-membership";
+
+export default function NewSkillPackPage() {
+  const router = useRouter();
+  const { isSignedIn } = useAuth();
+  const { isAdmin } = useOrganizationMembership(isSignedIn);
+
+  const createMutation = useCreateSkillPackApiV1SkillsPacksPost<ApiError>();
+
+  return (
+    <DashboardPageLayout
+      signedOut={{
+        message: "Sign in to add skill packs.",
+        forceRedirectUrl: "/skills/packs/new",
+      }}
+      title="Add skill pack"
+      description="Add a new skill URL pack for your organization."
+      isAdmin={isAdmin}
+      adminOnlyMessage="Only organization owners and admins can manage skill packs."
+      stickyHeader
+    >
+      <MarketplaceSkillForm
+        sourceLabel="Pack URL"
+        nameLabel="Pack name (optional)"
+        descriptionLabel="Pack description (optional)"
+        descriptionPlaceholder="Short summary shown in the packs list."
+        requiredUrlMessage="Pack URL is required."
+        submitLabel="Add pack"
+        submittingLabel="Adding..."
+        isSubmitting={createMutation.isPending}
+        onCancel={() => router.push("/skills/packs")}
+        onSubmit={async (values) => {
+          const result = await createMutation.mutateAsync({
+            data: {
+              source_url: values.sourceUrl,
+              name: values.name || undefined,
+              description: values.description || undefined,
+            },
+          });
+          if (result.status !== 200) {
+            throw new Error("Unable to add pack.");
+          }
+          router.push("/skills/packs");
+        }}
+      />
+    </DashboardPageLayout>
+  );
+}

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

@@ -0,0 +1,188 @@
+"use client";
+
+export const dynamic = "force-dynamic";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+
+import { useAuth } from "@/auth/clerk";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { ApiError } from "@/api/mutator";
+import type { SkillPackRead } from "@/api/generated/model";
+import {
+  getListSkillPacksApiV1SkillsPacksGetQueryKey,
+  type listSkillPacksApiV1SkillsPacksGetResponse,
+  useDeleteSkillPackApiV1SkillsPacksPackIdDelete,
+  useListSkillPacksApiV1SkillsPacksGet,
+  useSyncSkillPackApiV1SkillsPacksPackIdSyncPost,
+} from "@/api/generated/skills/skills";
+import { SkillPacksTable } from "@/components/skills/SkillPacksTable";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
+import { buttonVariants } from "@/components/ui/button";
+import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
+import { useOrganizationMembership } from "@/lib/use-organization-membership";
+import { useUrlSorting } from "@/lib/use-url-sorting";
+
+const PACKS_SORTABLE_COLUMNS = ["name", "source_url", "skill_count", "updated_at"];
+
+export default function SkillsPacksPage() {
+  const queryClient = useQueryClient();
+  const { isSignedIn } = useAuth();
+  const { isAdmin } = useOrganizationMembership(isSignedIn);
+  const [deleteTarget, setDeleteTarget] = useState<SkillPackRead | null>(null);
+  const [syncingPackIds, setSyncingPackIds] = useState<Set<string>>(new Set());
+
+  const { sorting, onSortingChange } = useUrlSorting({
+    allowedColumnIds: PACKS_SORTABLE_COLUMNS,
+    defaultSorting: [{ id: "name", desc: false }],
+    paramPrefix: "skill_packs",
+  });
+
+  const packsQuery = useListSkillPacksApiV1SkillsPacksGet<
+    listSkillPacksApiV1SkillsPacksGetResponse,
+    ApiError
+  >({
+    query: {
+      enabled: Boolean(isSignedIn && isAdmin),
+      refetchOnMount: "always",
+      refetchInterval: 15_000,
+    },
+  });
+
+  const packsQueryKey = getListSkillPacksApiV1SkillsPacksGetQueryKey();
+
+  const packs = useMemo<SkillPackRead[]>(
+    () => (packsQuery.data?.status === 200 ? packsQuery.data.data : []),
+    [packsQuery.data],
+  );
+
+  const deleteMutation =
+    useDeleteSkillPackApiV1SkillsPacksPackIdDelete<ApiError>(
+      {
+        mutation: {
+          onSuccess: async () => {
+            setDeleteTarget(null);
+            await queryClient.invalidateQueries({
+              queryKey: packsQueryKey,
+            });
+          },
+        },
+      },
+      queryClient,
+    );
+  const syncMutation =
+    useSyncSkillPackApiV1SkillsPacksPackIdSyncPost<ApiError>(
+      {
+        mutation: {
+          onSuccess: async () => {
+            await queryClient.invalidateQueries({
+              queryKey: packsQueryKey,
+            });
+          },
+        },
+      },
+      queryClient,
+    );
+
+  const handleDelete = () => {
+    if (!deleteTarget) return;
+    deleteMutation.mutate({ packId: deleteTarget.id });
+  };
+
+  return (
+    <>
+      <DashboardPageLayout
+        signedOut={{
+          message: "Sign in to manage skill packs.",
+          forceRedirectUrl: "/skills/packs",
+        }}
+        title="Skill Packs"
+        description={`${packs.length} pack${packs.length === 1 ? "" : "s"} configured.`}
+        headerActions={
+          isAdmin ? (
+            <Link
+              href="/skills/packs/new"
+              className={buttonVariants({ variant: "primary", size: "md" })}
+            >
+              Add pack
+            </Link>
+          ) : null
+        }
+        isAdmin={isAdmin}
+        adminOnlyMessage="Only organization owners and admins can manage skill packs."
+        stickyHeader
+      >
+        <div className="space-y-6">
+          <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+            <SkillPacksTable
+              packs={packs}
+              isLoading={packsQuery.isLoading}
+              sorting={sorting}
+              onSortingChange={onSortingChange}
+              stickyHeader
+              getEditHref={(pack) => `/skills/packs/${pack.id}/edit`}
+              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;
+                    });
+                  }
+                })();
+              }}
+              onDelete={setDeleteTarget}
+              emptyState={{
+                title: "No packs yet",
+                description: "Add your first skill URL pack to get started.",
+                actionHref: "/skills/packs/new",
+                actionLabel: "Add your first pack",
+              }}
+            />
+          </div>
+
+          {packsQuery.error ? (
+            <p className="text-sm text-rose-600">{packsQuery.error.message}</p>
+          ) : null}
+          {deleteMutation.error ? (
+            <p className="text-sm text-rose-600">{deleteMutation.error.message}</p>
+          ) : null}
+          {syncMutation.error ? (
+            <p className="text-sm text-rose-600">{syncMutation.error.message}</p>
+          ) : null}
+        </div>
+      </DashboardPageLayout>
+
+      <ConfirmActionDialog
+        open={Boolean(deleteTarget)}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+        ariaLabel="Delete skill pack"
+        title="Delete skill pack"
+        description={
+          <>
+            This will remove <strong>{deleteTarget?.name}</strong> from your
+            pack list. This action cannot be undone.
+          </>
+        }
+        errorMessage={deleteMutation.error?.message}
+        onConfirm={handleDelete}
+        isConfirming={deleteMutation.isPending}
+      />
+    </>
+  );
+}

frontend/src/app/skills/page.tsx

@@ -1,412 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-export const dynamic = "force-dynamic";
-
-import Link from "next/link";
-import { FormEvent, useMemo, useState } from "react";
-
-import { useAuth } from "@/auth/clerk";
-import { useQueryClient } from "@tanstack/react-query";
-import { ExternalLink, Package, PlusCircle, Trash2 } from "lucide-react";
-
-import { ApiError } from "@/api/mutator";
-import {
-  type listGatewaysApiV1GatewaysGetResponse,
-  useListGatewaysApiV1GatewaysGet,
-} from "@/api/generated/gateways/gateways";
-import type { MarketplaceSkillCardRead } from "@/api/generated/model";
-import {
-  getListMarketplaceSkillsApiV1SkillsMarketplaceGetQueryKey,
-  type listMarketplaceSkillsApiV1SkillsMarketplaceGetResponse,
-  useCreateMarketplaceSkillApiV1SkillsMarketplacePost,
-  useDeleteMarketplaceSkillApiV1SkillsMarketplaceSkillIdDelete,
-  useInstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdInstallPost,
-  useListMarketplaceSkillsApiV1SkillsMarketplaceGet,
-  useUninstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdUninstallPost,
-} from "@/api/generated/skills-marketplace/skills-marketplace";
-import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import { formatRelativeTimestamp } from "@/lib/formatters";
-import { useOrganizationMembership } from "@/lib/use-organization-membership";
-
-export default function SkillsMarketplacePage() {
-  const queryClient = useQueryClient();
-  const { isSignedIn } = useAuth();
-  const { isAdmin } = useOrganizationMembership(isSignedIn);
-  const [selectedGatewayId, setSelectedGatewayId] = useState("");
-  const [sourceUrl, setSourceUrl] = useState("");
-  const [skillName, setSkillName] = useState("");
-  const [description, setDescription] = useState("");
-
-  const gatewaysQuery = useListGatewaysApiV1GatewaysGet<
-    listGatewaysApiV1GatewaysGetResponse,
-    ApiError
-  >(undefined, {
-    query: {
-      enabled: Boolean(isSignedIn && isAdmin),
-      refetchOnMount: "always",
-      refetchInterval: 30_000,
-    },
-  });
-
-  const gateways = useMemo(
-    () =>
-      gatewaysQuery.data?.status === 200
-        ? (gatewaysQuery.data.data.items ?? [])
-        : [],
-    [gatewaysQuery.data],
-  );
-
-  const resolvedGatewayId = useMemo(() => {
-    if (selectedGatewayId && gateways.some((gateway) => gateway.id === selectedGatewayId)) {
-      return selectedGatewayId;
-    }
-    return gateways[0]?.id ?? "";
-  }, [gateways, selectedGatewayId]);
-
-  const skillsQueryKey = getListMarketplaceSkillsApiV1SkillsMarketplaceGetQueryKey(
-    resolvedGatewayId ? { gateway_id: resolvedGatewayId } : undefined,
-  );
-
-  const skillsQuery = useListMarketplaceSkillsApiV1SkillsMarketplaceGet<
-    listMarketplaceSkillsApiV1SkillsMarketplaceGetResponse,
-    ApiError
-  >(
-    { gateway_id: resolvedGatewayId },
-    {
-      query: {
-        enabled: Boolean(isSignedIn && isAdmin && resolvedGatewayId),
-        refetchOnMount: "always",
-        refetchInterval: 15_000,
-      },
-    },
-  );
-
-  const skills = useMemo<MarketplaceSkillCardRead[]>(
-    () => (skillsQuery.data?.status === 200 ? skillsQuery.data.data : []),
-    [skillsQuery.data],
-  );
-
-  const createMutation =
-    useCreateMarketplaceSkillApiV1SkillsMarketplacePost<ApiError>(
-      {
-        mutation: {
-          onSuccess: async () => {
-            setSourceUrl("");
-            setSkillName("");
-            setDescription("");
-            await queryClient.invalidateQueries({
-              queryKey: skillsQueryKey,
-            });
-          },
-        },
-      },
-      queryClient,
-    );
-
-  const installMutation =
-    useInstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdInstallPost<ApiError>(
-      {
-        mutation: {
-          onSuccess: async () => {
-            await queryClient.invalidateQueries({
-              queryKey: skillsQueryKey,
-            });
-          },
-        },
-      },
-      queryClient,
-    );
-
-  const uninstallMutation =
-    useUninstallMarketplaceSkillApiV1SkillsMarketplaceSkillIdUninstallPost<ApiError>(
-      {
-        mutation: {
-          onSuccess: async () => {
-            await queryClient.invalidateQueries({
-              queryKey: skillsQueryKey,
-            });
-          },
-        },
-      },
-      queryClient,
-    );
-
-  const deleteMutation =
-    useDeleteMarketplaceSkillApiV1SkillsMarketplaceSkillIdDelete<ApiError>(
-      {
-        mutation: {
-          onSuccess: async () => {
-            await queryClient.invalidateQueries({
-              queryKey: skillsQueryKey,
-            });
-          },
-        },
-      },
-      queryClient,
-    );
-
-  const mutationError =
-    createMutation.error?.message ??
-    installMutation.error?.message ??
-    uninstallMutation.error?.message ??
-    deleteMutation.error?.message;
-
-  const handleAddSkill = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const normalizedUrl = sourceUrl.trim();
-    if (!normalizedUrl) return;
-    createMutation.mutate({
-      data: {
-        source_url: normalizedUrl,
-        name: skillName.trim() || undefined,
-        description: description.trim() || undefined,
-      },
-    });
-  };
-
-  const isMutating =
-    createMutation.isPending ||
-    installMutation.isPending ||
-    uninstallMutation.isPending ||
-    deleteMutation.isPending;
-
-  return (
-    <DashboardPageLayout
-      signedOut={{
-        message: "Sign in to manage marketplace skills.",
-        forceRedirectUrl: "/skills",
-      }}
-      title="Skills Marketplace"
-      description="Register skill links and install or uninstall them per gateway."
-      isAdmin={isAdmin}
-      adminOnlyMessage="Only organization owners and admins can manage skills."
-      stickyHeader
-    >
-      <div className="space-y-6">
-        {gateways.length === 0 ? (
-          <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
-            <p className="font-medium text-slate-900">No gateways available yet.</p>
-            <p className="mt-2">
-              Create a gateway first, then return here to install skills.
-            </p>
-            <Link
-              href="/gateways/new"
-              className={`${buttonVariants({ variant: "primary", size: "md" })} mt-4`}
-            >
-              Create gateway
-            </Link>
-          </div>
-        ) : (
-          <Card>
-            <CardHeader className="border-b border-[color:var(--border)] pb-4">
-              <h2 className="font-heading text-lg font-semibold text-slate-900">
-                Add skill source
-              </h2>
-              <p className="text-sm text-slate-500">
-                Add a URL once, then install or uninstall the skill for the selected gateway.
-              </p>
-            </CardHeader>
-            <CardContent className="pt-5">
-              <form className="space-y-4" onSubmit={handleAddSkill}>
-                <div className="grid gap-4 md:grid-cols-[260px_1fr]">
-                  <div className="space-y-2">
-                    <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
-                      Gateway
-                    </label>
-                    <Select value={resolvedGatewayId} onValueChange={setSelectedGatewayId}>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select gateway" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {gateways.map((gateway) => (
-                          <SelectItem key={gateway.id} value={gateway.id}>
-                            {gateway.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <label
-                      htmlFor="skill-url"
-                      className="text-xs font-semibold uppercase tracking-wide text-slate-500"
-                    >
-                      Skill URL
-                    </label>
-                    <Input
-                      id="skill-url"
-                      type="url"
-                      value={sourceUrl}
-                      onChange={(event) => setSourceUrl(event.target.value)}
-                      placeholder="https://github.com/org/skill-repo"
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <label
-                      htmlFor="skill-name"
-                      className="text-xs font-semibold uppercase tracking-wide text-slate-500"
-                    >
-                      Display name (optional)
-                    </label>
-                    <Input
-                      id="skill-name"
-                      value={skillName}
-                      onChange={(event) => setSkillName(event.target.value)}
-                      placeholder="Deploy Helper"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label
-                      htmlFor="skill-description"
-                      className="text-xs font-semibold uppercase tracking-wide text-slate-500"
-                    >
-                      Description (optional)
-                    </label>
-                    <Textarea
-                      id="skill-description"
-                      value={description}
-                      onChange={(event) => setDescription(event.target.value)}
-                      placeholder="Short summary shown on the marketplace card."
-                      className="min-h-[44px] py-3"
-                    />
-                  </div>
-                </div>
-
-                <div className="flex items-center gap-3">
-                  <Button
-                    type="submit"
-                    disabled={createMutation.isPending || !resolvedGatewayId}
-                  >
-                    <PlusCircle className="h-4 w-4" />
-                    {createMutation.isPending ? "Adding…" : "Add skill"}
-                  </Button>
-                  {createMutation.error ? (
-                    <p className="text-sm text-rose-600">
-                      {createMutation.error.message}
-                    </p>
-                  ) : null}
-                </div>
-              </form>
-            </CardContent>
-          </Card>
-        )}
-
-        {mutationError ? <p className="text-sm text-rose-600">{mutationError}</p> : null}
-
-        <div className="space-y-3">
-          <h2 className="font-heading text-lg font-semibold text-slate-900">
-            Marketplace skills
-          </h2>
-          {skillsQuery.isLoading ? (
-            <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
-              Loading skills…
-            </div>
-          ) : skillsQuery.error ? (
-            <div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
-              {skillsQuery.error.message}
-            </div>
-          ) : skills.length === 0 ? (
-            <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600 shadow-sm">
-              No skill links added yet.
-            </div>
-          ) : (
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {skills.map((skill) => (
-                <Card key={skill.id}>
-                  <CardHeader className="border-b border-[color:var(--border)] pb-4">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="space-y-1">
-                        <h3 className="text-base font-semibold text-slate-900">
-                          {skill.name}
-                        </h3>
-                        <p className="text-sm text-slate-500">
-                          {skill.description || "No description provided."}
-                        </p>
-                      </div>
-                      <Badge variant={skill.installed ? "success" : "outline"}>
-                        {skill.installed ? "Installed" : "Not installed"}
-                      </Badge>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-4 pt-5">
-                    <a
-                      href={skill.source_url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-2 text-sm font-medium text-[color:var(--accent)] hover:underline"
-                    >
-                      <ExternalLink className="h-4 w-4" />
-                      Open source link
-                    </a>
-                    <p className="text-xs text-slate-500">
-                      {skill.installed && skill.installed_at
-                        ? `Installed ${formatRelativeTimestamp(skill.installed_at)}`
-                        : "Not installed on selected gateway"}
-                    </p>
-                    <div className="flex items-center gap-2">
-                      {skill.installed ? (
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={() =>
-                            uninstallMutation.mutate({
-                              skillId: skill.id,
-                              params: { gateway_id: resolvedGatewayId },
-                            })
-                          }
-                          disabled={isMutating || !resolvedGatewayId}
-                        >
-                          <Package className="h-4 w-4" />
-                          Uninstall
-                        </Button>
-                      ) : (
-                        <Button
-                          type="button"
-                          onClick={() =>
-                            installMutation.mutate({
-                              skillId: skill.id,
-                              params: { gateway_id: resolvedGatewayId },
-                            })
-                          }
-                          disabled={isMutating || !resolvedGatewayId}
-                        >
-                          <Package className="h-4 w-4" />
-                          Install
-                        </Button>
-                      )}
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={() => deleteMutation.mutate({ skillId: skill.id })}
-                        disabled={isMutating}
-                        aria-label={`Delete ${skill.name}`}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </DashboardPageLayout>
-  );
+export default function SkillsIndexPage() {
+  redirect("/skills/marketplace");
 }