kcg-code 0.1.0 → 0.2.1

package/src/components/settings/prefs.tsx

@@ -6,10 +6,12 @@
  *                  diklik (tombol / tautan) dengan chevron seperti GNOME.
  * - `EntryRow`     label kecil di atas input sebaris; tombol ✓ muncul saat
  *                  nilai berubah (seperti AdwEntryRow "apply button").
+ * - `ExpanderRow`  baris yang membuka isi tambahan di bawahnya (seperti
+ *                  AdwExpanderRow): chevron berputar, isi berlatar redup.
  * - `SwitchRow` tidak dibutuhkan saat ini; `ComboRow` diwakili ActionRow +
  *   Select di suffix.
  */
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { type ReactNode, useId, useState } from "react";
 import { Spinner } from "@/components/ui/spinner";
 import { cn } from "@/lib/utils";
@@ -19,6 +21,7 @@ export function PrefsGroup({
   title,
   description,
   suffix,
+  toolbar,
   children,
 }: {
   id?: string;
@@ -26,6 +29,8 @@ export function PrefsGroup({
   description?: ReactNode;
   /** Aksi kecil di kanan judul grup (mis. tombol). */
   suffix?: ReactNode;
+  /** Kontrol di antara judul & boxed list (mis. kolom cari, filter). */
+  toolbar?: ReactNode;
   children: ReactNode;
 }) {
   const headingId = useId();
@@ -50,6 +55,7 @@ export function PrefsGroup({
           {description && <p className="text-[13px] text-muted-foreground">{description}</p>}
         </div>
       )}
+      {toolbar}
       <div className="overflow-hidden rounded-xl border bg-card shadow-xs">
         <ul className="flex flex-col divide-y">{children}</ul>
       </div>
@@ -242,6 +248,68 @@ export function EntryRow({
   );
 }
 
+/**
+ * Baris ala AdwExpanderRow: judul + subjudul (1 baris), suffix, chevron;
+ * klik membuka `children` di bawahnya (latar redup, dipisah garis). Tanpa
+ * `children` baris tampil biasa (tidak bisa dibuka).
+ */
+export function ExpanderRow({
+  title,
+  subtitle,
+  prefix,
+  suffix,
+  children,
+  className,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const contentId = useId();
+  const expandable = children !== undefined && children !== null && children !== false;
+  return (
+    <li className={className}>
+      <button
+        type="button"
+        onClick={() => expandable && setOpen((v) => !v)}
+        aria-expanded={expandable ? open : undefined}
+        aria-controls={expandable ? contentId : undefined}
+        disabled={!expandable}
+        className="flex min-h-14 w-full items-center gap-3 px-4 py-2.5 text-left transition-colors outline-none hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset active:bg-muted disabled:cursor-default disabled:hover:bg-transparent"
+      >
+        {prefix && <span className="flex shrink-0 items-center">{prefix}</span>}
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5 py-0.5">
+          <span className="flex min-w-0 items-center gap-2 text-[15px] leading-5">{title}</span>
+          {subtitle && (
+            <span className="truncate text-[13px] leading-snug text-muted-foreground">
+              {subtitle}
+            </span>
+          )}
+        </span>
+        {suffix && <span className="flex shrink-0 items-center gap-2">{suffix}</span>}
+        {expandable && (
+          <ChevronDownIcon
+            className={cn(
+              "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180",
+            )}
+            aria-hidden
+          />
+        )}
+      </button>
+      {expandable && open && (
+        <div id={contentId} className="border-t bg-muted/30 px-4 py-3">
+          {children}
+        </div>
+      )}
+    </li>
+  );
+}
+
 /** Pil status kecil untuk suffix baris (mis. "On" / "Off"). */
 export function RowBadge({
   tone = "muted",

package/src/components/skills/InstallNotifications.tsx

@@ -24,6 +24,7 @@ import {
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS } from "@/lib/agent-types";
 import { apiErrorMessage } from "@/lib/api";
 import {
   cancelInstall,
@@ -123,9 +124,9 @@ function InstallCard({ entry }: { entry: InstallEntry }) {
       ? apiErrorMessage(job.error ?? "SKILL_INSTALL_FAILED")
       : awaitingActivation
         ? `Added to ${job.projectName}. Activates automatically when the running chat finishes.`
-        : `${running ? "into" : "Added to"} ${job.projectName}${
-            job.status === "succeeded" ? " · active" : ""
-          }`;
+        : `${running ? "into" : "Added to"} ${job.projectName} · ${(job.agentTypes ?? ["opencode"])
+            .map((a) => AGENT_TYPE_LABELS[a])
+            .join(" + ")}${job.status === "succeeded" ? " · active" : ""}`;
 
   return (
     <article

package/src/components/skills/InstallSkillDialog.tsx

@@ -1,21 +1,30 @@
 /**
  * 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.
+ * Susunan (atas -> bawah), dari yang paling sering diputuskan:
+ * 1. Identitas skill: avatar owner, nama, `source · installs · skills.sh ↗`.
+ * 2. Agent tujuan: dua tile berdampingan (OpenCode / Claude Code, bisa
+ *    keduanya). Agent yang belum memuat skill ini terpilih secara default;
+ *    yang sudah memuatnya ditandai "Installed" (memilihnya = pasang ulang).
+ * 3. Audit keamanan (`GET /api/skills/audit`) dalam satu baris ringkas;
+ *    rincian per partner dilipat dan otomatis terbuka bila ada temuan
+ *    (`warn`/`fail`). Skill `fail` tetap boleh dipasang, tombolnya destruktif.
  *
- * Konfirmasi hanya MEMULAI job instalasi; dialog lalu ditutup dan progres +
- * output CLI tampil di notifikasi instalasi (`InstallNotifications`).
+ * Label tombol menyebut agent tujuan ("Install for Claude Code"). Konfirmasi
+ * hanya MEMULAI job instalasi; progres + output CLI tampil di notifikasi
+ * instalasi (`InstallNotifications`).
  */
 import {
+  CheckIcon,
+  ChevronDownIcon,
   ExternalLinkIcon,
   ShieldAlertIcon,
   ShieldCheckIcon,
   ShieldQuestionIcon,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { SourceAvatar } from "@/components/skills/SkillCards";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -26,12 +35,15 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS, AGENT_TYPES } from "@/lib/agent-types";
 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";
+import type { AgentType } from "@/types";
 
 type AuditState =
   | { phase: "loading" }
@@ -42,23 +54,52 @@ export interface InstallSkillDialogProps {
   /** Skill yang akan dipasang; `null` = dialog tertutup. */
   skill: RegistrySkill | null;
   projectName: string;
+  /** Agent yang sudah memuat skill ini dari folder Project. */
+  installedAgents: readonly AgentType[];
   /** 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;
+  onConfirm: (skill: RegistrySkill, agents: AgentType[]) => void;
+}
+
+/** Folder skill di Project per agent (petunjuk di tile). */
+const AGENT_SKILLS_DIR: Record<AgentType, string> = {
+  opencode: ".agents/skills",
+  "claude-code": ".claude/skills",
+};
+
+/** Label tombol utama sesuai agent terpilih. */
+function installLabel(agents: readonly AgentType[], flagged: boolean): string {
+  const verb = flagged ? "Install anyway" : "Install";
+  if (agents.length === 0) return verb;
+  if (agents.length === AGENT_TYPES.length) return `${verb} for both`;
+  return `${verb} for ${agents.map((a) => AGENT_TYPE_LABELS[a]).join(" + ")}`;
 }
 
 export function InstallSkillDialog({
   skill,
   projectName,
+  installedAgents,
   starting,
   startError,
   onOpenChange,
   onConfirm,
 }: InstallSkillDialogProps) {
   const [audit, setAudit] = useState<AuditState>({ phase: "loading" });
+  const [agents, setAgents] = useState<AgentType[]>([]);
+
+  // Dialog dibuka untuk skill baru -> pilih agent yang belum memuatnya.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: hanya saat skill berganti
+  useEffect(() => {
+    if (!skill) return;
+    const missing = AGENT_TYPES.filter((a) => !installedAgents.includes(a));
+    setAgents(missing.length > 0 ? missing : [...AGENT_TYPES]);
+  }, [skill]);
+
+  const toggleAgent = (agent: AgentType, on: boolean) =>
+    setAgents((prev) => AGENT_TYPES.filter((a) => (a === agent ? on : prev.includes(a))));
 
   useEffect(() => {
     if (!skill) return;
@@ -92,45 +133,68 @@ export function InstallSkillDialog({
         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.
+      {/* Tinggi dibatasi agar dialog (audit terbuka) tetap muat di layar HP. */}
+      <AlertDialogContent className="max-h-[calc(100dvh-2rem)] gap-5 overflow-y-auto sm:max-w-md">
+        <AlertDialogHeader className="text-left">
+          <div className="flex min-w-0 items-center gap-3">
+            {skill && <SourceAvatar source={skill.source} />}
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <AlertDialogTitle className="truncate" title={skill?.name}>
+                Install {skill?.name}
+              </AlertDialogTitle>
+              {skill && (
+                <p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+                  <span className="truncate font-mono" title={skill.source}>
+                    {skill.source}
+                  </span>
+                  <span aria-hidden>·</span>
+                  <span className="shrink-0 tabular-nums">
+                    {formatInstalls(skill.installs)} installs
+                  </span>
+                  <span aria-hidden>·</span>
+                  <a
+                    href={skill.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex shrink-0 items-center gap-0.5 font-medium text-foreground underline-offset-4 hover:underline"
+                  >
+                    skills.sh
+                    <ExternalLinkIcon className="size-3" aria-hidden />
+                    <span className="sr-only">(opens in a new tab)</span>
+                  </a>
+                </p>
+              )}
+            </div>
+          </div>
+          <AlertDialogDescription className="sr-only">
+            Choose which agents in {projectName} get this skill, then review its security audit.
           </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>
+          <div className="flex min-w-0 flex-col gap-4 text-sm">
+            <fieldset className="flex flex-col gap-2" disabled={starting}>
+              <legend className="mb-2 text-xs text-muted-foreground">
+                Add to <span className="font-medium text-foreground">{projectName}</span> for
+              </legend>
+              <div className="grid grid-cols-2 gap-2">
+                {AGENT_TYPES.map((a) => (
+                  <AgentTile
+                    key={a}
+                    agent={a}
+                    checked={agents.includes(a)}
+                    installed={installedAgents.includes(a)}
+                    onChange={(on) => toggleAgent(a, on)}
+                  />
+                ))}
+              </div>
+              {agents.length === 0 && (
+                <p className="text-xs text-muted-foreground">Pick at least one agent.</p>
+              )}
+            </fieldset>
+
+            <AuditPanel state={audit} />
 
-            <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}
@@ -139,64 +203,148 @@ export function InstallSkillDialog({
           </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>
+        <div className="flex flex-col gap-3">
+          <p className="text-xs text-muted-foreground">
+            Skills run with the agent's full permissions. Installation continues in the background —
+            follow it in the notification.
+          </p>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={starting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              variant={flagged ? "destructive" : "default"}
+              disabled={starting || !skill || agents.length === 0}
+              onClick={(e) => {
+                // Dialog tetap terbuka sampai job berhasil dibuat.
+                e.preventDefault();
+                if (skill && agents.length > 0) onConfirm(skill, agents);
+              }}
+            >
+              {starting ? (
+                <>
+                  <Spinner data-icon="inline-start" />
+                  Starting…
+                </>
+              ) : (
+                installLabel(agents, flagged)
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </div>
       </AlertDialogContent>
     </AlertDialog>
   );
 }
 
-function AuditSummary({ state }: { state: AuditState }) {
+/**
+ * Tile agent yang bisa dipilih: logo, nama, folder tujuan, indikator centang
+ * di pojok. Checkbox asli disembunyikan (`sr-only`) tapi tetap jadi kontrol
+ * yang dibaca screen reader & menerima fokus keyboard (Spasi).
+ */
+function AgentTile({
+  agent,
+  checked,
+  installed,
+  onChange,
+}: {
+  agent: AgentType;
+  checked: boolean;
+  installed: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label
+      className={cn(
+        "relative flex cursor-pointer flex-col gap-2.5 rounded-xl border p-3 transition-colors select-none",
+        "has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-disabled:cursor-not-allowed has-disabled:opacity-60",
+        checked ? "border-primary bg-primary/5" : "hover:border-foreground/20 hover:bg-accent/30",
+      )}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="peer sr-only"
+      />
+      <span className="flex items-start justify-between">
+        <span className="flex size-8 items-center justify-center rounded-lg bg-muted text-foreground">
+          <AgentLogo agentType={agent} className="size-4" />
+        </span>
+        <span
+          aria-hidden
+          className={cn(
+            "flex size-5 items-center justify-center rounded-full border transition-colors",
+            checked ? "border-primary bg-primary text-primary-foreground" : "bg-background",
+          )}
+        >
+          {checked && <CheckIcon className="size-3" strokeWidth={3} />}
+        </span>
+      </span>
+      <span className="flex min-w-0 flex-col gap-0.5">
+        <span className="text-sm font-medium leading-5">{AGENT_TYPE_LABELS[agent]}</span>
+        <span className="truncate font-mono text-[11px] text-muted-foreground">
+          {installed ? (checked ? "Installed · reinstall" : "Installed") : AGENT_SKILLS_DIR[agent]}
+        </span>
+      </span>
+    </label>
+  );
+}
+
+/**
+ * Audit keamanan sebagai satu baris ringkas (ikon, status, jumlah partner
+ * yang lolos). Rincian per partner bisa dibuka; terbuka otomatis bila ada
+ * temuan agar tidak terlewat.
+ */
+function AuditPanel({ state }: { state: AuditState }) {
+  const shell = "rounded-xl border bg-muted/30";
+
   if (state.phase === "loading") {
     return (
-      <div role="status" className="flex flex-col gap-2" aria-busy="true">
+      <div role="status" aria-busy="true" className={cn(shell, "flex items-center gap-3 p-3")}>
         <span className="sr-only">Loading security audit…</span>
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-3 w-3/4" />
+        <Skeleton className="size-4 rounded-full" />
+        <Skeleton className="h-4 w-40" />
       </div>
     );
   }
   if (state.phase === "error") {
-    return <p className="text-xs text-muted-foreground">{state.message}</p>;
+    return (
+      <p className={cn(shell, "flex items-center gap-2 p-3 text-xs text-muted-foreground")}>
+        <ShieldQuestionIcon className="size-4 shrink-0" aria-hidden />
+        {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">
+      <p className={cn(shell, "flex items-start gap-2 p-3 text-xs text-muted-foreground")}>
         <ShieldQuestionIcon className="size-4 shrink-0" aria-hidden />
-        No security audit is available for this skill yet.
+        <span>
+          <span className="font-medium text-foreground">Not audited yet.</span> Review the skill on
+          skills.sh before installing.
+        </span>
       </p>
     );
   }
 
+  const passed = audits.filter((a) => a.status === "pass").length;
   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
+    <Collapsible defaultOpen={overall !== "pass"} className={shell}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 rounded-xl p-3 text-left text-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+        <Icon
+          className={cn(
+            "size-4 shrink-0",
+            overall === "pass"
+              ? "text-emerald-600 dark:text-emerald-400"
+              : overall === "warn"
+                ? "text-amber-600 dark:text-amber-400"
+                : "text-destructive",
+          )}
+          aria-hidden
+        />
+        <span className="font-medium">Security audit</span>
         <span
           className={cn(
             "rounded px-1.5 text-[11px] leading-5 font-medium",
@@ -205,29 +353,38 @@ function AuditSummary({ state }: { state: AuditState }) {
         >
           {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>
-    </>
+        <span className="ml-auto text-muted-foreground tabular-nums">
+          {passed}/{audits.length} passed
+        </span>
+        <ChevronDownIcon
+          className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+          aria-hidden
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ul className="flex flex-col gap-2 border-t px-3 py-3">
+          {audits.map((a) => (
+            <li key={a.provider} className="flex items-start justify-between gap-3 text-xs">
+              <span className="flex min-w-0 flex-col">
+                <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>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }