kcg-code 0.0.0-stage → 0.1.0

package/src/components/skills/InstallSkillDialog.tsx

@@ -0,0 +1,233 @@
+/**
+ * Dialog konfirmasi instalasi skill dari skills.sh.
+ *
+ * Menampilkan sumber, tautan ke halaman skill, dan hasil audit keamanan
+ * (`GET /api/skills/audit`) SEBELUM user menekan Install — skill berjalan
+ * dengan izin penuh agent, jadi keputusan dibuat dengan informasi lengkap.
+ * Skill berstatus `fail` tetap boleh dipasang tapi tombolnya destruktif.
+ *
+ * Konfirmasi hanya MEMULAI job instalasi; dialog lalu ditutup dan progres +
+ * output CLI tampil di notifikasi instalasi (`InstallNotifications`).
+ */
+import {
+  ExternalLinkIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldQuestionIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { AUDIT_BADGE_CLASS, AUDIT_LABEL, formatInstalls } from "@/lib/skills-catalog";
+import { cn } from "@/lib/utils";
+import type { RegistrySkill, SkillAudit } from "@/server/services/skills-registry";
+
+type AuditState =
+  | { phase: "loading" }
+  | { phase: "error"; message: string }
+  | { phase: "ready"; audit: SkillAudit };
+
+export interface InstallSkillDialogProps {
+  /** Skill yang akan dipasang; `null` = dialog tertutup. */
+  skill: RegistrySkill | null;
+  projectName: string;
+  /** Permintaan memulai instalasi sedang dikirim. */
+  starting: boolean;
+  /** Pesan bila server menolak memulai (mis. instalasi lain sedang berjalan). */
+  startError: string | null;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (skill: RegistrySkill) => void;
+}
+
+export function InstallSkillDialog({
+  skill,
+  projectName,
+  starting,
+  startError,
+  onOpenChange,
+  onConfirm,
+}: InstallSkillDialogProps) {
+  const [audit, setAudit] = useState<AuditState>({ phase: "loading" });
+
+  useEffect(() => {
+    if (!skill) return;
+    let cancelled = false;
+    setAudit({ phase: "loading" });
+    const params = new URLSearchParams({ source: skill.source, skill: skill.skillId });
+    apiFetch(`/api/skills/audit?${params}`)
+      .then((res) => res.json() as Promise<{ audit: SkillAudit }>)
+      .then(({ audit }) => {
+        if (!cancelled) setAudit({ phase: "ready", audit });
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) {
+          setAudit({
+            phase: "error",
+            message: e instanceof ApiError ? e.message : "Failed to load the security audit.",
+          });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [skill]);
+
+  const flagged = audit.phase === "ready" && audit.audit.overall === "fail";
+
+  return (
+    <AlertDialog
+      open={skill !== null}
+      onOpenChange={(next) => {
+        if (!starting) onOpenChange(next);
+      }}
+    >
+      <AlertDialogContent className="sm:max-w-md">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="break-all">Install {skill?.name}?</AlertDialogTitle>
+          <AlertDialogDescription>
+            The skill will be added to <span className="font-medium">{projectName}</span> under{" "}
+            <code className="font-mono text-xs">.agents/skills/</code>. Skills run with the agent's
+            full permissions, so review them before use.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {skill && (
+          <div className="flex flex-col gap-3 text-sm">
+            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
+              <dt className="text-muted-foreground">Source</dt>
+              <dd className="min-w-0 truncate font-mono text-xs leading-5">{skill.source}</dd>
+              <dt className="text-muted-foreground">Installs</dt>
+              <dd className="tabular-nums">{formatInstalls(skill.installs)}</dd>
+            </dl>
+            <a
+              href={skill.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex w-fit items-center gap-1 text-xs font-medium underline underline-offset-4"
+            >
+              View on skills.sh
+              <ExternalLinkIcon className="size-3" aria-hidden />
+              <span className="sr-only">(opens in a new tab)</span>
+            </a>
+
+            <section
+              aria-label="Security audit"
+              className="flex flex-col gap-2 rounded-xl border p-3"
+            >
+              <AuditSummary state={audit} />
+            </section>
+
+            <p className="text-xs text-muted-foreground">
+              Installation runs in the background. You can follow the output in the notification.
+            </p>
+            {startError && (
+              <p role="alert" className="text-xs text-destructive">
+                {startError}
+              </p>
+            )}
+          </div>
+        )}
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={starting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant={flagged ? "destructive" : "default"}
+            disabled={starting || !skill}
+            onClick={(e) => {
+              // Dialog tetap terbuka selama instalasi berjalan.
+              e.preventDefault();
+              if (skill) onConfirm(skill);
+            }}
+          >
+            {starting ? (
+              <>
+                <Spinner data-icon="inline-start" />
+                Starting…
+              </>
+            ) : flagged ? (
+              "Install anyway"
+            ) : (
+              "Install"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function AuditSummary({ state }: { state: AuditState }) {
+  if (state.phase === "loading") {
+    return (
+      <div role="status" className="flex flex-col gap-2" aria-busy="true">
+        <span className="sr-only">Loading security audit…</span>
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-3 w-3/4" />
+      </div>
+    );
+  }
+  if (state.phase === "error") {
+    return <p className="text-xs text-muted-foreground">{state.message}</p>;
+  }
+
+  const { audits, overall } = state.audit;
+  if (audits === null || overall === null) {
+    return (
+      <p className="flex items-center gap-2 text-xs text-muted-foreground">
+        <ShieldQuestionIcon className="size-4 shrink-0" aria-hidden />
+        No security audit is available for this skill yet.
+      </p>
+    );
+  }
+
+  const Icon = overall === "pass" ? ShieldCheckIcon : ShieldAlertIcon;
+  return (
+    <>
+      <p className="flex items-center gap-2 text-xs font-medium">
+        <Icon className="size-4 shrink-0" aria-hidden />
+        Security audit
+        <span
+          className={cn(
+            "rounded px-1.5 text-[11px] leading-5 font-medium",
+            AUDIT_BADGE_CLASS[overall],
+          )}
+        >
+          {AUDIT_LABEL[overall]}
+        </span>
+      </p>
+      <ul className="flex flex-col gap-1.5">
+        {audits.map((a) => (
+          <li key={a.provider} className="flex items-start justify-between gap-3 text-xs">
+            <span className="min-w-0">
+              <span className="font-medium">{a.provider}</span>
+              {a.summary && (
+                <span className="line-clamp-2 text-muted-foreground" title={a.summary}>
+                  {a.summary}
+                </span>
+              )}
+            </span>
+            <span
+              className={cn(
+                "shrink-0 rounded px-1.5 text-[11px] leading-5 font-medium",
+                AUDIT_BADGE_CLASS[a.status],
+              )}
+            >
+              {AUDIT_LABEL[a.status]}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/components/skills/SkillCards.tsx

@@ -0,0 +1,210 @@
+/**
+ * Kartu skill untuk grid 2 kolom di halaman Skills.
+ *
+ * - `RegistrySkillCard`: hasil skills.sh — nama (tautan), owner/repo, jumlah
+ *   install, tombol Install / "Installing…" (klik = lihat progres) /
+ *   status "Installed".
+ * - `InstalledSkillCard`: skill terpasang — nama, label asal, deskripsi.
+ * - `SkillCardSkeleton`: placeholder saat memuat.
+ * Semua kartu setinggi baris grid (`h-full`) agar grid rapi.
+ */
+import { CheckIcon, DownloadIcon, ExternalLinkIcon, PlusIcon, SparklesIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import { SKILL_SOURCE_LABEL } from "@/lib/project-extensions";
+import { formatInstalls, githubOwner } from "@/lib/skills-catalog";
+import { cn } from "@/lib/utils";
+import type { SkillInfo } from "@/server/services/opencode-client";
+import type { RegistrySkill } from "@/server/services/skills-registry";
+
+/** Grid kartu: 1 kolom di HP, 2 kolom mulai `md`. */
+export function SkillGrid({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <ul aria-label={label} className="grid grid-cols-1 gap-3 md:grid-cols-2">
+      {children}
+    </ul>
+  );
+}
+
+function CardShell({ className, children }: { className?: string; children: ReactNode }) {
+  return (
+    <li
+      className={cn(
+        "flex h-full min-w-0 flex-col gap-3 rounded-xl border bg-card p-4 shadow-xs transition-colors",
+        className,
+      )}
+    >
+      {children}
+    </li>
+  );
+}
+
+/** Avatar owner GitHub; jatuh ke ikon bila bukan sumber GitHub / gagal dimuat. */
+function SourceAvatar({ source }: { source: string }) {
+  const owner = githubOwner(source);
+  return (
+    <span className="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-muted-foreground">
+      <SparklesIcon className="size-4" aria-hidden />
+      {owner && (
+        <img
+          src={`https://github.com/${encodeURIComponent(owner)}.png?size=80`}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          className="absolute inset-0 size-full object-cover"
+          onError={(e) => {
+            e.currentTarget.style.display = "none";
+          }}
+        />
+      )}
+    </span>
+  );
+}
+
+export function RegistrySkillCard({
+  skill,
+  installed,
+  installing,
+  onInstall,
+  onShowProgress,
+}: {
+  skill: RegistrySkill;
+  installed: boolean;
+  /** Ada job instalasi berjalan untuk skill ini di Project terpilih. */
+  installing: boolean;
+  onInstall: (skill: RegistrySkill) => void;
+  /** Tampilkan lagi notifikasi progres instalasinya. */
+  onShowProgress: () => void;
+}) {
+  return (
+    <CardShell className="hover:border-foreground/20">
+      <div className="flex min-w-0 items-start gap-3">
+        <SourceAvatar source={skill.source} />
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <a
+            href={skill.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={skill.name}
+            className="group/link flex min-w-0 items-center gap-1 text-sm font-semibold leading-5 hover:underline"
+          >
+            <span className="truncate">{skill.name}</span>
+            <ExternalLinkIcon
+              className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/link:opacity-100 group-focus-visible/link:opacity-100"
+              aria-hidden
+            />
+            <span className="sr-only"> on skills.sh (opens in a new tab)</span>
+          </a>
+          <span className="truncate font-mono text-xs text-muted-foreground" title={skill.source}>
+            {skill.source}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-auto flex items-center justify-between gap-2">
+        <span className="flex items-center gap-1 text-xs tabular-nums text-muted-foreground">
+          <DownloadIcon className="size-3.5" aria-hidden />
+          <span className="sr-only">Installs:</span>
+          {formatInstalls(skill.installs)}
+          <span aria-hidden> installs</span>
+        </span>
+        {installing ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={onShowProgress}
+            aria-label={`Installing ${skill.name}. Show progress`}
+          >
+            <Spinner data-icon="inline-start" />
+            Installing…
+          </Button>
+        ) : installed ? (
+          <span className="flex h-8 items-center gap-1 rounded-md bg-emerald-500/10 px-2.5 text-xs font-medium text-emerald-700 dark:text-emerald-400">
+            <CheckIcon className="size-3.5" aria-hidden />
+            Installed
+          </span>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onInstall(skill)}
+            aria-label={`Install ${skill.name}`}
+          >
+            <PlusIcon data-icon="inline-start" />
+            Install
+          </Button>
+        )}
+      </div>
+    </CardShell>
+  );
+}
+
+export function InstalledSkillCard({ skill }: { skill: SkillInfo }) {
+  const isProject = skill.source === "project";
+  return (
+    <CardShell>
+      <div className="flex min-w-0 items-start gap-3">
+        <span
+          className={cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-lg",
+            isProject ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+          )}
+        >
+          <SparklesIcon className="size-4" aria-hidden />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="flex min-w-0 items-center gap-1.5">
+            <span className="truncate text-sm font-semibold leading-5" title={skill.name}>
+              {skill.name}
+            </span>
+            <span
+              className={cn(
+                "shrink-0 rounded px-1.5 text-[10px] leading-4 font-medium",
+                isProject ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+              )}
+            >
+              {SKILL_SOURCE_LABEL[skill.source]}
+            </span>
+          </span>
+          <p
+            className={cn(
+              "line-clamp-3 text-xs leading-relaxed",
+              skill.description ? "text-muted-foreground" : "text-muted-foreground/60 italic",
+            )}
+            title={skill.description ?? undefined}
+          >
+            {skill.description ?? "No description"}
+          </p>
+        </div>
+      </div>
+    </CardShell>
+  );
+}
+
+export function SkillCardSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <div role="status" aria-busy="true" className="grid grid-cols-1 gap-3 md:grid-cols-2">
+      <span className="sr-only">Loading skills…</span>
+      {Array.from({ length: count }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
+        <div key={i} className="flex flex-col gap-3 rounded-xl border bg-card p-4" aria-hidden>
+          <div className="flex items-start gap-3">
+            <Skeleton className="size-10 shrink-0 rounded-lg" />
+            <div className="flex flex-1 flex-col gap-1.5">
+              <Skeleton className="h-4" style={{ width: `${75 - (i % 3) * 15}%` }} />
+              <Skeleton className="h-3 w-1/2" />
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="h-8 w-20 rounded-md" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/skills/SkillsProjectPicker.tsx

@@ -0,0 +1,178 @@
+/**
+ * Pemilih Project di halaman Skills — pil ringkas "Install to <project>"
+ * yang membuka popover berisi daftar Project dengan kotak cari.
+ *
+ * Kotak cari hanya muncul bila Project cukup banyak. Navigasi keyboard:
+ * ↑/↓ memindah sorotan, Enter memilih, Esc menutup (bawaan Popover).
+ */
+import { CheckIcon, ChevronsUpDownIcon, FolderIcon, SearchIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import type { Project } from "@/types";
+
+/** Kotak cari tampil mulai jumlah Project ini. */
+const SEARCH_THRESHOLD = 6;
+
+export interface SkillsProjectPickerProps {
+  projects: Project[];
+  selected: Project | null;
+  onSelect: (projectId: string) => void;
+}
+
+export function SkillsProjectPicker({ projects, selected, onSelect }: SkillsProjectPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlight, setHighlight] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const showSearch = projects.length >= SEARCH_THRESHOLD;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q === "") return projects;
+    return projects.filter(
+      (p) => p.name.toLowerCase().includes(q) || p.path.toLowerCase().includes(q),
+    );
+  }, [projects, query]);
+
+  // Buka: reset pencarian, sorot Project terpilih.
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    const idx = projects.findIndex((p) => p.id === selected?.id);
+    setHighlight(idx >= 0 ? idx : 0);
+  }, [open, projects, selected?.id]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset saat query berubah
+  useEffect(() => {
+    setHighlight(0);
+  }, [query]);
+
+  useEffect(() => {
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-index="${highlight}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [highlight]);
+
+  const pick = (p: Project | undefined) => {
+    if (!p) return;
+    onSelect(p.id);
+    setOpen(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight((h) => Math.min(h + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight((h) => Math.max(h - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      pick(filtered[highlight]);
+    }
+  };
+
+  const activeId = filtered[highlight] ? `skills-project-${highlight}` : undefined;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {/* Pemilih konteks yang ringkas (pil), terpisah dari kolom cari:
+            menjawab "skill dipasang ke mana", bukan bagian dari pencarian. */}
+        <button
+          type="button"
+          aria-haspopup="listbox"
+          aria-label={
+            selected ? `Install to project ${selected.name}. Change project` : "Select a project"
+          }
+          className="group inline-flex h-9 max-w-full min-w-0 items-center gap-2 rounded-full border bg-card pr-2.5 pl-3 text-sm shadow-xs transition-colors outline-none hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=open]:border-ring"
+        >
+          <FolderIcon
+            className={cn("size-4 shrink-0", selected ? "text-primary" : "text-muted-foreground")}
+            aria-hidden
+          />
+          <span className="shrink-0 text-muted-foreground">Install to</span>
+          <span className={cn("truncate font-medium", !selected && "text-muted-foreground")}>
+            {selected?.name ?? "Select a project"}
+          </span>
+          <ChevronsUpDownIcon className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-80 max-w-[calc(100vw-2rem)] p-0"
+        onOpenAutoFocus={(e) => {
+          // Fokus ke kotak cari (bila ada), selain itu ke daftar agar ↑/↓ jalan.
+          e.preventDefault();
+          (searchRef.current ?? listRef.current)?.focus();
+        }}
+      >
+        {showSearch && (
+          <div className="flex items-center gap-2 border-b px-3">
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+            <input
+              ref={searchRef}
+              type="text"
+              role="combobox"
+              aria-expanded
+              aria-controls="skills-project-list"
+              aria-activedescendant={activeId}
+              aria-label="Search projects"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder="Search projects…"
+              className="h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        )}
+        <div
+          ref={listRef}
+          id="skills-project-list"
+          role="listbox"
+          aria-label="Projects"
+          aria-activedescendant={showSearch ? undefined : activeId}
+          tabIndex={showSearch ? -1 : 0}
+          onKeyDown={showSearch ? undefined : onKeyDown}
+          className="max-h-72 overflow-y-auto p-1 outline-none"
+        >
+          {filtered.length === 0 ? (
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+              No projects match “{query.trim()}”.
+            </p>
+          ) : (
+            filtered.map((p, i) => {
+              const isSelected = p.id === selected?.id;
+              return (
+                <div
+                  key={p.id}
+                  id={`skills-project-${i}`}
+                  data-index={i}
+                  role="option"
+                  aria-selected={isSelected}
+                  tabIndex={-1}
+                  onMouseMove={() => setHighlight(i)}
+                  onClick={() => pick(p)}
+                  onKeyDown={() => {}}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-sm",
+                    i === highlight && "bg-accent text-accent-foreground",
+                  )}
+                >
+                  <FolderIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium">{p.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">{p.path}</span>
+                  </span>
+                  {isSelected && <CheckIcon className="size-4 shrink-0" aria-hidden />}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}