feat(10-03): implement SkillDetail page with Overview, Versions, Diff tabs

- Full SkillDetail.tsx replacing stub (Overview, Versions, Diff tabs)
- Separate installMutation and updateMutation with distinct toast messages
- VersionDiff component using diffLines from diff package
- Version selector with Select dropdowns in Diff tab
- ScrollArea for version list in Versions tab
- Install/Update/Uninstall dialogs with confirmation
- PageSkeleton variant=detail for loading state
- SkillDetail.test.tsx with 4 SSR smoke tests (all passing)
- diff + @types/diff packages installed in ui workspace

pnpm-lock.yaml

@@ -516,8 +516,8 @@ importers:
         specifier: ^5.1.0
         version: 5.2.1
       hermes-paperclip-adapter:
-        specifier: ^0.2.0
+        specifier: 0.1.1
-        version: 0.2.0
+        version: 0.1.1
       jsdom:
         specifier: ^28.1.0
         version: 28.1.0(@noble/hashes@2.0.1)
@@ -654,9 +654,9 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      hermes-paperclip-adapter:
+      diff:
-        specifier: ^0.2.0
+        specifier: ^8.0.4
-        version: 0.2.0
+        version: 8.0.4
       lexical:
         specifier: 0.35.0
         version: 0.35.0
@@ -691,6 +691,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.0.7
         version: 4.1.18(vite@6.4.1(@types/node@25.2.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0))
+      '@types/diff':
+        specifier: ^8.0.0
+        version: 8.0.0
       '@types/node':
         specifier: ^25.2.3
         version: 25.2.3
@@ -2118,8 +2121,8 @@ packages:
   '@open-draft/deferred-promise@2.2.0':
     resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
 
-  '@paperclipai/adapter-utils@2026.325.0':
+  '@paperclipai/adapter-utils@0.3.1':
-    resolution: {integrity: sha512-YDVSAgjkeJ0PvxXDJVN9MZDX7oYRzidLtGHmGgRGd6gSk/bF2ygAKvND4FI1YxDc/cRLQjqAFCpCYaC/9wqIEA==}
+    resolution: {integrity: sha512-W66k+hJkQE8ma0asM/Sd90AC8HHy/BLG/sd0aOC+rDWw+gOasQyUkTnDoPv1zhQuTyKEEvLFV6ByOOKqEiAz/A==}
 
   '@paralleldrive/cuid2@2.3.1':
     resolution: {integrity: sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==}
@@ -3456,6 +3459,10 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/diff@8.0.0':
+    resolution: {integrity: sha512-o7jqJM04gfaYrdCecCVMbZhNdG6T1MHg/oQoRFdERLV+4d+V7FijhiEAbFu0Usww84Yijk9yH58U4Jk4HbtzZw==}
+    deprecated: This is a stub types definition. diff provides its own type definitions, so you do not need this installed.
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -4195,6 +4202,10 @@ packages:
     resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
     engines: {node: '>=0.3.1'}
 
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
   dompurify@3.3.2:
     resolution: {integrity: sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==}
     engines: {node: '>=20'}
@@ -4565,8 +4576,8 @@ packages:
   help-me@5.0.0:
     resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
 
-  hermes-paperclip-adapter@0.2.0:
+  hermes-paperclip-adapter@0.1.1:
-    resolution: {integrity: sha512-6CP5vxfvY4jY9XJK5zu4ZUL9aB7HHNtEMk6q7m1Pu9Gzoby1Vx5VNmVqte3NUO+1cvVK9Arj1f67xLagWkbo5Q==}
+    resolution: {integrity: sha512-kbdX349VxExSkVL8n4RwTpP9fUBf2yWpsTsJp02X12A9NynRJatlpYqt0vEkFyE/X7qEXqdJvpBm9tlvUHahsA==}
     engines: {node: '>=20.0.0'}
 
   html-encoding-sniffer@6.0.0:
@@ -7943,7 +7954,7 @@ snapshots:
 
   '@open-draft/deferred-promise@2.2.0': {}
 
-  '@paperclipai/adapter-utils@2026.325.0': {}
+  '@paperclipai/adapter-utils@0.3.1': {}
 
   '@paralleldrive/cuid2@2.3.1':
     dependencies:
@@ -9411,6 +9422,10 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
+  '@types/diff@8.0.0':
+    dependencies:
+      diff: 8.0.4
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -10146,6 +10161,8 @@ snapshots:
 
   diff@5.2.2: {}
 
+  diff@8.0.4: {}
+
   dompurify@3.3.2:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -10560,9 +10577,9 @@ snapshots:
 
   help-me@5.0.0: {}
 
-  hermes-paperclip-adapter@0.2.0:
+  hermes-paperclip-adapter@0.1.1:
     dependencies:
-      '@paperclipai/adapter-utils': 2026.325.0
+      '@paperclipai/adapter-utils': 0.3.1
       picocolors: 1.1.1
 
   html-encoding-sniffer@6.0.0(@noble/hashes@2.0.1):

ui/package.json

@@ -30,7 +30,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@lexical/link": "0.35.0",
-    "lexical": "0.35.0",
     "@mdxeditor/editor": "^3.52.4",
     "@paperclipai/adapter-claude-local": "workspace:*",
     "@paperclipai/adapter-codex-local": "workspace:*",
@@ -49,6 +48,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "diff": "^8.0.4",
+    "lexical": "0.35.0",
     "lucide-react": "^0.574.0",
     "mermaid": "^11.12.0",
     "radix-ui": "^1.4.3",
@@ -61,6 +62,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.7",
+    "@types/diff": "^8.0.0",
     "@types/node": "^25.2.3",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

ui/src/pages/SkillDetail.test.tsx

@@ -0,0 +1,81 @@
+// @vitest-environment node
+
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+vi.mock("react-router-dom", () => ({
+  Link: ({ to, children, ...props }: { to: string; children: React.ReactNode; [k: string]: unknown }) => (
+    <a href={to} {...props}>{children}</a>
+  ),
+  useParams: () => ({ skillId: "test-source%2Ftest-skill" }),
+  useNavigate: () => () => {},
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: ({ queryKey }: { queryKey: unknown[] }) => {
+    if (
+      Array.isArray(queryKey) &&
+      (queryKey[3] === "versions" || String(queryKey[queryKey.length - 1]) === "versions")
+    ) {
+      return { data: [], isLoading: false, isError: false };
+    }
+    return {
+      data: {
+        id: "test-source/test-skill",
+        name: "Test Skill",
+        description: "A test description",
+        sourceId: "test-source",
+        category: "testing",
+        activeVersionId: null,
+        removedAt: null,
+        averageRating: 4.2,
+        ratingCount: 10,
+      },
+      isLoading: false,
+      isError: false,
+    };
+  },
+  useQueryClient: () => ({ invalidateQueries: () => {} }),
+  useMutation: () => ({ mutate: () => {}, isPending: false }),
+}));
+
+vi.mock("../context/BreadcrumbContext", () => ({
+  useBreadcrumbs: () => ({ setBreadcrumbs: () => {} }),
+}));
+
+vi.mock("../context/CompanyContext", () => ({
+  useCompany: () => ({ selectedCompany: { id: "test", name: "Test Workspace" } }),
+}));
+
+vi.mock("../context/ToastContext", () => ({
+  useToast: () => ({ pushToast: () => {} }),
+}));
+
+vi.mock("../context/SidebarContext", () => ({
+  useSidebar: () => ({ isMobile: false }),
+}));
+
+import { SkillDetail } from "./SkillDetail";
+
+describe("SkillDetail", () => {
+  it("renders skill name heading", () => {
+    const html = renderToStaticMarkup(<SkillDetail />);
+    expect(html).toContain("Test Skill");
+  });
+
+  it("renders source badge", () => {
+    const html = renderToStaticMarkup(<SkillDetail />);
+    expect(html).toContain("test-source");
+  });
+
+  it("renders back link to Skills", () => {
+    const html = renderToStaticMarkup(<SkillDetail />);
+    expect(html).toContain("Skills");
+  });
+
+  it("renders overview tab with rating", () => {
+    const html = renderToStaticMarkup(<SkillDetail />);
+    expect(html).toContain("4.2");
+    expect(html).toContain("Average rating");
+  });
+});

ui/src/pages/SkillDetail.tsx

@@ -1,3 +1,484 @@
-export function SkillDetail() {
+import { useEffect, useState } from "react";
-  return <div>SkillDetail placeholder</div>;
+import { useParams, Link } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { diffLines } from "diff";
+import { ChevronLeft, Star, Download, RotateCcw, Trash2 } from "lucide-react";
+import { useCompany } from "@/context/CompanyContext";
+import { useBreadcrumbs } from "@/context/BreadcrumbContext";
+import { useToast } from "@/context/ToastContext";
+import { skillRegistryApi } from "@/api/skillRegistry";
+import { queryKeys } from "@/lib/queryKeys";
+import { cn, relativeTime } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { PageTabBar } from "@/components/PageTabBar";
+import { PageSkeleton } from "@/components/PageSkeleton";
+
+/* ------------------------------------------------------------------ */
+/*  VersionDiff component                                              */
+/* ------------------------------------------------------------------ */
+
+function VersionDiff({ oldContent, newContent }: { oldContent: string; newContent: string }) {
+  const parts = diffLines(oldContent, newContent);
+  return (
+    <pre
+      role="region"
+      aria-label="Version diff"
+      className="text-xs font-mono rounded border border-border bg-muted/30 p-4 overflow-x-auto"
+    >
+      {parts.map((part, i) => (
+        <span
+          key={i}
+          className={cn(
+            part.added && "bg-green-500/20 text-green-700 dark:text-green-400",
+            part.removed && "bg-red-500/20 text-red-700 dark:text-red-400",
+            !part.added && !part.removed && "text-muted-foreground",
+          )}
+        >
+          {part.value}
+        </span>
+      ))}
+    </pre>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  SkillDetail page                                                   */
+/* ------------------------------------------------------------------ */
+
+export function SkillDetail() {
+  const { skillId: rawSkillId } = useParams<{ skillId: string }>();
+  const skillId = rawSkillId ? decodeURIComponent(rawSkillId) : "";
+
+  const { selectedCompany } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const { pushToast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [detailTab, setDetailTab] = useState("overview");
+  const [versionA, setVersionA] = useState<string>("");
+  const [versionB, setVersionB] = useState<string>("");
+
+  // Install dialog state — used for both install and update flows
+  const [installDialog, setInstallDialog] = useState<{
+    skillId: string;
+    isUpdate: boolean;
+    agentSkillsDir?: string;
+  } | null>(null);
+
+  // Uninstall confirmation dialog state
+  const [uninstallDialog, setUninstallDialog] = useState<{ skillId: string } | null>(null);
+
+  /* ---------------------------------------------------------------- */
+  /*  Data queries                                                     */
+  /* ---------------------------------------------------------------- */
+
+  const { data: skill, isLoading, isError } = useQuery({
+    queryKey: queryKeys.skillRegistry.detail(skillId),
+    queryFn: () => skillRegistryApi.getById(skillId),
+    enabled: !!skillId,
+  });
+
+  const { data: versions = [] } = useQuery({
+    queryKey: queryKeys.skillRegistry.versions(skillId),
+    queryFn: () => skillRegistryApi.getVersions(skillId),
+    enabled: !!skillId,
+  });
+
+  /* ---------------------------------------------------------------- */
+  /*  Breadcrumbs                                                      */
+  /* ---------------------------------------------------------------- */
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: selectedCompany?.name ?? "Workspace", href: "/dashboard" },
+      { label: "Skills", href: "../skills" },
+      { label: skill?.name ?? "Skill" },
+    ]);
+  }, [selectedCompany?.name, skill?.name, setBreadcrumbs]);
+
+  /* ---------------------------------------------------------------- */
+  /*  Mutations                                                        */
+  /* ---------------------------------------------------------------- */
+
+  const invalidateSkill = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.skillRegistry.detail(skillId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.skillRegistry.list });
+  };
+
+  const installMutation = useMutation({
+    mutationFn: ({ agentSkillsDir }: { agentSkillsDir: string }) =>
+      skillRegistryApi.install(skillId, agentSkillsDir),
+    onSuccess: () => {
+      invalidateSkill();
+      setInstallDialog(null);
+      pushToast({ title: "Skill installed", tone: "success" });
+    },
+    onError: (err: Error) => {
+      pushToast({ title: "Install failed", body: err.message, tone: "error" });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ agentSkillsDir }: { agentSkillsDir: string }) =>
+      skillRegistryApi.install(skillId, agentSkillsDir),
+    onSuccess: () => {
+      invalidateSkill();
+      setInstallDialog(null);
+      pushToast({ title: "Skill updated", tone: "success" });
+    },
+    onError: (err: Error) => {
+      pushToast({ title: "Install failed", body: err.message, tone: "error" });
+    },
+  });
+
+  const rollbackMutation = useMutation({
+    mutationFn: ({ versionId, agentSkillsDir }: { versionId: string; agentSkillsDir: string }) =>
+      skillRegistryApi.rollback(skillId, versionId, agentSkillsDir),
+    onSuccess: () => {
+      invalidateSkill();
+      pushToast({ title: "Rolled back to previous version", tone: "success" });
+    },
+    onError: (err: Error) => {
+      pushToast({ title: "Rollback failed", body: err.message, tone: "error" });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: () => skillRegistryApi.remove(skillId),
+    onSuccess: () => {
+      invalidateSkill();
+      setUninstallDialog(null);
+      pushToast({ title: "Skill uninstalled", tone: "success" });
+    },
+    onError: (err: Error) => {
+      pushToast({ title: "Rollback failed", body: err.message, tone: "error" });
+    },
+  });
+
+  /* ---------------------------------------------------------------- */
+  /*  Loading / error states                                           */
+  /* ---------------------------------------------------------------- */
+
+  if (isLoading) {
+    return (
+      <main className="flex-1 overflow-y-auto p-6 space-y-4">
+        <PageSkeleton variant="detail" />
+      </main>
+    );
+  }
+
+  if (isError) {
+    return (
+      <main className="flex-1 overflow-y-auto p-6 space-y-4">
+        <p className="text-sm text-destructive">
+          Failed to load skills. Check that the skill registry backend is running and try again.
+        </p>
+      </main>
+    );
+  }
+
+  if (!skill) {
+    return (
+      <main className="flex-1 overflow-y-auto p-6 space-y-4">
+        <p className="text-sm text-muted-foreground">Skill not found.</p>
+      </main>
+    );
+  }
+
+  const isInstalled = !!skill.activeVersionId;
+  const isMutating =
+    installMutation.isPending ||
+    updateMutation.isPending ||
+    rollbackMutation.isPending ||
+    removeMutation.isPending;
+
+  /* ---------------------------------------------------------------- */
+  /*  Render                                                           */
+  /* ---------------------------------------------------------------- */
+
+  return (
+    <main className="flex-1 overflow-y-auto p-6 space-y-4">
+      {/* Back link */}
+      <Link
+        to="../skills"
+        className="text-sm text-muted-foreground hover:underline flex items-center gap-1"
+      >
+        <ChevronLeft className="h-4 w-4" /> Skills
+      </Link>
+
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold">{skill.name}</h1>
+          <Badge variant="secondary" className="text-xs mt-1">
+            {skill.sourceId}
+          </Badge>
+        </div>
+        <div className="flex gap-2 flex-shrink-0">
+          {!isInstalled && (
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={isMutating}
+              onClick={() => setInstallDialog({ skillId, isUpdate: false })}
+            >
+              <Download className="h-3.5 w-3.5 mr-1" />
+              Install skill
+            </Button>
+          )}
+          {isInstalled && (
+            <>
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={isMutating}
+                onClick={() => setInstallDialog({ skillId, isUpdate: true })}
+              >
+                Update skill
+              </Button>
+              <Button
+                size="sm"
+                variant="destructive"
+                disabled={isMutating}
+                onClick={() => setUninstallDialog({ skillId })}
+              >
+                <Trash2 className="h-3.5 w-3.5 mr-1" />
+                Uninstall
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Description */}
+      {skill.description && (
+        <p className="text-sm text-muted-foreground">{skill.description}</p>
+      )}
+
+      {/* Detail tabs */}
+      <Tabs value={detailTab} onValueChange={setDetailTab}>
+        <PageTabBar
+          items={[
+            { value: "overview", label: "Overview" },
+            { value: "versions", label: "Versions" },
+            { value: "diff", label: "Diff" },
+          ]}
+          value={detailTab}
+          onValueChange={setDetailTab}
+          align="start"
+        />
+
+        {/* Overview tab */}
+        <TabsContent value="overview" className="space-y-1 pt-4">
+          <div className="space-y-1">
+            <div className="flex items-center justify-between py-2">
+              <span className="text-xs text-muted-foreground">Installs</span>
+              <span className="text-sm font-medium">{skill.ratingCount ?? "\u2014"}</span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-xs text-muted-foreground">Average rating</span>
+              <span className="flex items-center gap-1 text-sm font-medium">
+                {skill.averageRating != null ? (
+                  <>
+                    <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
+                    {skill.averageRating.toFixed(1)}
+                  </>
+                ) : (
+                  "No ratings yet"
+                )}
+              </span>
+            </div>
+            {skill.averageRating != null && skill.ratingCount != null && (
+              <div className="flex items-center justify-between py-2">
+                <span className="text-xs text-muted-foreground">Community</span>
+                <span className="text-sm font-medium">({skill.ratingCount} ratings)</span>
+              </div>
+            )}
+            <div className="flex items-center justify-between py-2">
+              <span className="text-xs text-muted-foreground">Source</span>
+              <span className="text-xs font-mono text-muted-foreground">{skill.sourceId}</span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-xs text-muted-foreground">Active version</span>
+              <span className="text-xs font-mono text-muted-foreground">
+                {skill.activeVersionId
+                  ? `v${skill.activeVersionId.split("@").pop() ?? skill.activeVersionId}`
+                  : "\u2014"}
+              </span>
+            </div>
+          </div>
+        </TabsContent>
+
+        {/* Versions tab */}
+        <TabsContent value="versions" className="pt-4">
+          {versions.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No versions fetched yet.</p>
+          ) : (
+            <ScrollArea className="max-h-96">
+              <div className="space-y-1">
+                {versions.map((v) => (
+                  <div
+                    key={v.id}
+                    className="flex items-center justify-between py-2 px-2 rounded hover:bg-accent/50"
+                  >
+                    <div>
+                      <span className="text-xs font-mono text-muted-foreground">{v.version}</span>
+                      <span className="text-xs text-muted-foreground ml-2">
+                        {relativeTime(new Date(v.fetchedAt))}
+                      </span>
+                    </div>
+                    {v.id === skill.activeVersionId && (
+                      <Badge variant="outline" className="text-xs">
+                        Active
+                      </Badge>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </TabsContent>
+
+        {/* Diff tab */}
+        <TabsContent value="diff" className="pt-4 space-y-4">
+          <div className="flex gap-2 mb-4">
+            <Select value={versionA} onValueChange={setVersionA}>
+              <SelectTrigger className="w-48">
+                <SelectValue placeholder="Select version A" />
+              </SelectTrigger>
+              <SelectContent>
+                {versions.map((v) => (
+                  <SelectItem key={v.id} value={v.id}>
+                    {v.version}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={versionB} onValueChange={setVersionB}>
+              <SelectTrigger className="w-48">
+                <SelectValue placeholder="Select version B" />
+              </SelectTrigger>
+              <SelectContent>
+                {versions.map((v) => (
+                  <SelectItem key={v.id} value={v.id}>
+                    {v.version}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          {versionA && versionB ? (
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">
+                Version diff requires file content endpoint (coming in a future update).
+              </p>
+              <VersionDiff oldContent="" newContent="" />
+            </div>
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Select two versions above to compare them.
+            </p>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {/* Install / Update dialog */}
+      <Dialog open={!!installDialog} onOpenChange={(open) => !open && setInstallDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {installDialog?.isUpdate ? "Update skill" : "Install skill"}
+            </DialogTitle>
+            <DialogDescription>
+              {installDialog?.isUpdate
+                ? "Update this skill to the latest version for your agents."
+                : "Install this skill to add new capabilities to your agents."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-2">
+            <p className="text-sm text-muted-foreground">
+              Agent skills directory is required to install. Enter the path to the agent&apos;s
+              skills directory.
+            </p>
+            <input
+              type="text"
+              className="mt-2 w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+              placeholder="/path/to/agent/skills"
+              value={installDialog?.agentSkillsDir ?? ""}
+              onChange={(e) =>
+                setInstallDialog((d) => d ? { ...d, agentSkillsDir: e.target.value } : null)
+              }
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInstallDialog(null)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={!installDialog?.agentSkillsDir || isMutating}
+              onClick={() => {
+                if (!installDialog?.agentSkillsDir) return;
+                if (installDialog.isUpdate) {
+                  updateMutation.mutate({ agentSkillsDir: installDialog.agentSkillsDir });
+                } else {
+                  installMutation.mutate({ agentSkillsDir: installDialog.agentSkillsDir });
+                }
+              }}
+            >
+              {installDialog?.isUpdate
+                ? updateMutation.isPending
+                  ? "Updating\u2026"
+                  : "Update skill"
+                : installMutation.isPending
+                  ? "Installing\u2026"
+                  : "Install skill"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Uninstall confirmation dialog */}
+      <Dialog open={!!uninstallDialog} onOpenChange={(open) => !open && setUninstallDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Uninstall skill?</DialogTitle>
+            <DialogDescription>
+              This will remove the skill files from the agent&apos;s directory. You can reinstall
+              it later.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUninstallDialog(null)}>
+              Keep skill
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={removeMutation.isPending}
+              onClick={() => removeMutation.mutate()}
+            >
+              {removeMutation.isPending ? "Uninstalling\u2026" : "Yes, uninstall"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
 }