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

2026-02-14 03:30:13 +05:30
parent da6cc2544b
commit 10748f71a8
11 changed files with 522 additions and 490 deletions
--- a/frontend/src/app/skills/marketplace/page.tsx
+++ b/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);
+        }}
+      />
    </>
  );
 }
--- a/frontend/src/app/skills/packs/page.tsx
+++ b/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={{
--- a/frontend/src/components/skills/MarketplaceSkillsTable.tsx
+++ b/frontend/src/components/skills/MarketplaceSkillsTable.tsx
@@ -1,11 +1,10 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import Link from "next/link";

 import {
  type ColumnDef,
  type OnChangeFn,
  type SortingState,
-  type Updater,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
@@ -15,7 +14,16 @@ import type { MarketplaceSkillCardRead } from "@/api/generated/model";
 import { DataTable, type DataTableEmptyState } from "@/components/tables/DataTable";
 import { dateCell } from "@/components/tables/cell-formatters";
 import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  SKILLS_TABLE_EMPTY_ICON,
+  useTableSortingState,
+} from "@/components/skills/table-helpers";
 import { truncateText as truncate } from "@/lib/formatters";
+import {
+  packLabelFromUrl,
+  packUrlFromSkillSourceUrl,
+  packsHrefFromPackUrl,
+} from "@/lib/skills-source";

 type MarketplaceSkillsTableProps = {
  skills: MarketplaceSkillCardRead[];
@@ -34,57 +42,6 @@ type MarketplaceSkillsTableProps = {
  };
 };

-const DEFAULT_EMPTY_ICON = (
-  <svg
-    className="h-16 w-16 text-slate-300"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M4 7h16" />
-    <path d="M4 12h16" />
-    <path d="M4 17h16" />
-    <path d="M8 7v10" />
-    <path d="M16 7v10" />
-  </svg>
-);
-
-const toPackUrl = (sourceUrl: string): string => {
-  try {
-    const parsed = new URL(sourceUrl);
-    const treeMarker = "/tree/";
-    const markerIndex = parsed.pathname.indexOf(treeMarker);
-    if (markerIndex > 0) {
-      const repoPath = parsed.pathname.slice(0, markerIndex);
-      return `${parsed.origin}${repoPath}`;
-    }
-    return sourceUrl;
-  } catch {
-    return sourceUrl;
-  }
-};
-
-const toPackLabel = (packUrl: string): string => {
-  try {
-    const parsed = new URL(packUrl);
-    const segments = parsed.pathname.split("/").filter(Boolean);
-    if (segments.length >= 2) {
-      return `${segments[0]}/${segments[1]}`;
-    }
-    return parsed.host;
-  } catch {
-    return "Open pack";
-  }
-};
-
-const toPacksHref = (packUrl: string): string => {
-  const params = new URLSearchParams({ source_url: packUrl });
-  return `/skills/packs?${params.toString()}`;
-};
-
 export function MarketplaceSkillsTable({
  skills,
  installedGatewayNamesBySkillId,
@@ -99,15 +56,11 @@ export function MarketplaceSkillsTable({
  getEditHref,
  emptyState,
 }: MarketplaceSkillsTableProps) {
-  const [internalSorting, setInternalSorting] = useState<SortingState>([
-    { id: "name", desc: false },
-  ]);
-  const resolvedSorting = sorting ?? internalSorting;
-  const handleSortingChange: OnChangeFn<SortingState> =
-    onSortingChange ??
-    ((updater: Updater<SortingState>) => {
-      setInternalSorting(updater);
-    });
+  const { resolvedSorting, handleSortingChange } = useTableSortingState(
+    sorting,
+    onSortingChange,
+    [{ id: "name", desc: false }],
+  );

  const columns = useMemo<ColumnDef<MarketplaceSkillCardRead>[]>(() => {
    const baseColumns: ColumnDef<MarketplaceSkillCardRead>[] = [
@@ -140,13 +93,13 @@ export function MarketplaceSkillsTable({
        accessorKey: "source_url",
        header: "Pack",
        cell: ({ row }) => {
-          const packUrl = toPackUrl(row.original.source_url);
+          const packUrl = packUrlFromSkillSourceUrl(row.original.source_url);
          return (
            <Link
-              href={toPacksHref(packUrl)}
+              href={packsHrefFromPackUrl(packUrl)}
              className="inline-flex items-center gap-1 text-sm font-medium text-slate-700 hover:text-blue-600"
            >
-              {truncate(toPackLabel(packUrl), 40)}
+              {truncate(packLabelFromUrl(packUrl), 40)}
            </Link>
          );
        },
@@ -271,7 +224,7 @@ export function MarketplaceSkillsTable({
      emptyState={
        emptyState
          ? {
-              icon: emptyState.icon ?? DEFAULT_EMPTY_ICON,
+              icon: emptyState.icon ?? SKILLS_TABLE_EMPTY_ICON,
              title: emptyState.title,
              description: emptyState.description,
              actionHref: emptyState.actionHref,
--- a/frontend/src/components/skills/SkillInstallDialog.tsx
+++ b/frontend/src/components/skills/SkillInstallDialog.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import type { MarketplaceSkillCardRead } from "@/api/generated/model";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+type GatewaySummary = {
+  id: string;
+  name: string;
+};
+
+type SkillInstallDialogProps = {
+  selectedSkill: MarketplaceSkillCardRead | null;
+  gateways: GatewaySummary[];
+  gatewayInstalledById: Record<string, boolean>;
+  isGatewayStatusLoading: boolean;
+  installingGatewayId: string | null;
+  isMutating: boolean;
+  gatewayStatusError: string | null;
+  mutationError: string | null;
+  onOpenChange: (open: boolean) => void;
+  onToggleInstall: (gatewayId: string, isInstalled: boolean) => void;
+};
+
+export function SkillInstallDialog({
+  selectedSkill,
+  gateways,
+  gatewayInstalledById,
+  isGatewayStatusLoading,
+  installingGatewayId,
+  isMutating,
+  gatewayStatusError,
+  mutationError,
+  onOpenChange,
+  onToggleInstall,
+}: SkillInstallDialogProps) {
+  return (
+    <Dialog open={Boolean(selectedSkill)} onOpenChange={onOpenChange}>
+      <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 && isMutating;
+              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={() => onToggleInstall(gateway.id, isInstalled)}
+                    disabled={isMutating}
+                  >
+                    {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={() => onOpenChange(false)} disabled={isMutating}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/frontend/src/components/skills/SkillPacksTable.tsx
+++ b/frontend/src/components/skills/SkillPacksTable.tsx
@@ -1,11 +1,10 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import Link from "next/link";

 import {
  type ColumnDef,
  type OnChangeFn,
  type SortingState,
-  type Updater,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
@@ -15,6 +14,10 @@ import type { SkillPackRead } from "@/api/generated/model";
 import { DataTable, type DataTableEmptyState } from "@/components/tables/DataTable";
 import { dateCell } from "@/components/tables/cell-formatters";
 import { Button } from "@/components/ui/button";
+import {
+  SKILLS_TABLE_EMPTY_ICON,
+  useTableSortingState,
+} from "@/components/skills/table-helpers";
 import { truncateText as truncate } from "@/lib/formatters";

 type SkillPacksTableProps = {
@@ -33,24 +36,6 @@ type SkillPacksTableProps = {
  };
 };

-const DEFAULT_EMPTY_ICON = (
-  <svg
-    className="h-16 w-16 text-slate-300"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M4 7h16" />
-    <path d="M4 12h16" />
-    <path d="M4 17h16" />
-    <path d="M8 7v10" />
-    <path d="M16 7v10" />
-  </svg>
-);
-
 export function SkillPacksTable({
  packs,
  isLoading = false,
@@ -64,15 +49,11 @@ export function SkillPacksTable({
  getEditHref,
  emptyState,
 }: SkillPacksTableProps) {
-  const [internalSorting, setInternalSorting] = useState<SortingState>([
-    { id: "name", desc: false },
-  ]);
-  const resolvedSorting = sorting ?? internalSorting;
-  const handleSortingChange: OnChangeFn<SortingState> =
-    onSortingChange ??
-    ((updater: Updater<SortingState>) => {
-      setInternalSorting(updater);
-    });
+  const { resolvedSorting, handleSortingChange } = useTableSortingState(
+    sorting,
+    onSortingChange,
+    [{ id: "name", desc: false }],
+  );

  const columns = useMemo<ColumnDef<SkillPackRead>[]>(() => {
    const baseColumns: ColumnDef<SkillPackRead>[] = [
@@ -175,7 +156,7 @@ export function SkillPacksTable({
      emptyState={
        emptyState
          ? {
-              icon: emptyState.icon ?? DEFAULT_EMPTY_ICON,
+              icon: emptyState.icon ?? SKILLS_TABLE_EMPTY_ICON,
              title: emptyState.title,
              description: emptyState.description,
              actionHref: emptyState.actionHref,
--- a/frontend/src/components/skills/table-helpers.tsx
+++ b/frontend/src/components/skills/table-helpers.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  type OnChangeFn,
+  type SortingState,
+  type Updater,
+} from "@tanstack/react-table";
+
+export const SKILLS_TABLE_EMPTY_ICON = (
+  <svg
+    className="h-16 w-16 text-slate-300"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 7h16" />
+    <path d="M4 12h16" />
+    <path d="M4 17h16" />
+    <path d="M8 7v10" />
+    <path d="M16 7v10" />
+  </svg>
+);
+
+export const useTableSortingState = (
+  sorting: SortingState | undefined,
+  onSortingChange: OnChangeFn<SortingState> | undefined,
+  defaultSorting: SortingState,
+): {
+  resolvedSorting: SortingState;
+  handleSortingChange: OnChangeFn<SortingState>;
+} => {
+  const [internalSorting, setInternalSorting] = useState<SortingState>(defaultSorting);
+  const resolvedSorting = sorting ?? internalSorting;
+  const handleSortingChange: OnChangeFn<SortingState> =
+    onSortingChange ??
+    ((updater: Updater<SortingState>) => {
+      setInternalSorting(updater);
+    });
+
+  return {
+    resolvedSorting,
+    handleSortingChange,
+  };
+};
--- a/frontend/src/lib/skills-source.ts
+++ b/frontend/src/lib/skills-source.ts
@@ -0,0 +1,39 @@
+export const normalizeRepoSourceUrl = (sourceUrl: string): string => {
+  const trimmed = sourceUrl.trim().replace(/\/+$/, "");
+  return trimmed.endsWith(".git") ? trimmed.slice(0, -4) : trimmed;
+};
+
+export 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 const packUrlFromSkillSourceUrl = (skillSourceUrl: string): string => {
+  const repoBase = repoBaseFromSkillSourceUrl(skillSourceUrl);
+  return repoBase ?? skillSourceUrl;
+};
+
+export const packLabelFromUrl = (packUrl: string): string => {
+  try {
+    const parsed = new URL(packUrl);
+    const segments = parsed.pathname.split("/").filter(Boolean);
+    if (segments.length >= 2) {
+      return `${segments[0]}/${segments[1]}`;
+    }
+    return parsed.host;
+  } catch {
+    return "Open pack";
+  }
+};
+
+export const packsHrefFromPackUrl = (packUrl: string): string => {
+  const params = new URLSearchParams({ source_url: packUrl });
+  return `/skills/packs?${params.toString()}`;
+};