kcg-code 0.1.0 → 0.2.0

package/src/components/skills/SkillCards.tsx

@@ -3,21 +3,25 @@
  *
  * - `RegistrySkillCard`: hasil skills.sh — nama (tautan), owner/repo, jumlah
  *   install, tombol Install / "Installing…" (klik = lihat progres) /
- *   status "Installed".
+ *   status "Installed" (bila sudah terpasang untuk semua agent).
  * - `InstalledSkillCard`: skill terpasang — nama, label asal, deskripsi.
+ * - Kedua kartu menampilkan logo agent tempat skill terpasang (`AgentBadges`)
+ *   di pojok kanan atas.
  * - `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 { AgentLogo } from "@/components/sessions/AgentLogo";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS, AGENT_TYPES } from "@/lib/agent-types";
 import { SKILL_SOURCE_LABEL } from "@/lib/project-extensions";
-import { formatInstalls, githubOwner } from "@/lib/skills-catalog";
+import { formatInstalls, githubOwner, type InstalledSkill } 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";
+import type { AgentType } from "@/types";
 
 /** Grid kartu: 1 kolom di HP, 2 kolom mulai `md`. */
 export function SkillGrid({ label, children }: { label: string; children: ReactNode }) {
@@ -42,7 +46,7 @@ function CardShell({ className, children }: { className?: string; children: Reac
 }
 
 /** Avatar owner GitHub; jatuh ke ikon bila bukan sumber GitHub / gagal dimuat. */
-function SourceAvatar({ source }: { source: string }) {
+export 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">
@@ -63,21 +67,59 @@ function SourceAvatar({ source }: { source: string }) {
   );
 }
 
+/**
+ * Logo agent tempat skill terpasang; kosong -> tidak dirender.
+ * `sm` untuk baris daftar yang rapat (panel samping Project).
+ */
+export function AgentBadges({
+  agents,
+  size = "md",
+}: {
+  agents: readonly AgentType[];
+  size?: "sm" | "md";
+}) {
+  if (agents.length === 0) return null;
+  const label = `Installed for ${agents.map((a) => AGENT_TYPE_LABELS[a]).join(" and ")}`;
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      title={label}
+      className={cn("flex shrink-0 items-center", size === "sm" ? "gap-0.5" : "gap-1")}
+    >
+      {agents.map((a) => (
+        <span
+          key={a}
+          className={cn(
+            "flex items-center justify-center border bg-background text-foreground",
+            size === "sm" ? "size-5 rounded" : "size-6 rounded-md",
+          )}
+        >
+          <AgentLogo agentType={a} className={size === "sm" ? "size-3" : "size-3.5"} />
+        </span>
+      ))}
+    </span>
+  );
+}
+
 export function RegistrySkillCard({
   skill,
-  installed,
+  installedAgents,
   installing,
   onInstall,
   onShowProgress,
 }: {
   skill: RegistrySkill;
-  installed: boolean;
+  /** Agent yang sudah memuat skill ini dari folder Project. */
+  installedAgents: readonly AgentType[];
   /** Ada job instalasi berjalan untuk skill ini di Project terpilih. */
   installing: boolean;
   onInstall: (skill: RegistrySkill) => void;
   /** Tampilkan lagi notifikasi progres instalasinya. */
   onShowProgress: () => void;
 }) {
+  // Masih bisa dipasang selama ada agent yang belum memuatnya.
+  const installedEverywhere = installedAgents.length === AGENT_TYPES.length;
   return (
     <CardShell className="hover:border-foreground/20">
       <div className="flex min-w-0 items-start gap-3">
@@ -101,6 +143,7 @@ export function RegistrySkillCard({
             {skill.source}
           </span>
         </div>
+        <AgentBadges agents={installedAgents} />
       </div>
 
       <div className="mt-auto flex items-center justify-between gap-2">
@@ -121,7 +164,7 @@ export function RegistrySkillCard({
             <Spinner data-icon="inline-start" />
             Installing…
           </Button>
-        ) : installed ? (
+        ) : installedEverywhere ? (
           <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
@@ -143,7 +186,7 @@ export function RegistrySkillCard({
   );
 }
 
-export function InstalledSkillCard({ skill }: { skill: SkillInfo }) {
+export function InstalledSkillCard({ skill }: { skill: InstalledSkill }) {
   const isProject = skill.source === "project";
   return (
     <CardShell>
@@ -180,6 +223,7 @@ export function InstalledSkillCard({ skill }: { skill: SkillInfo }) {
             {skill.description ?? "No description"}
           </p>
         </div>
+        <AgentBadges agents={skill.agents} />
       </div>
     </CardShell>
   );

package/src/components/ui/adw-dialog.tsx

@@ -0,0 +1,114 @@
+/**
+ * Kerangka dialog ala AdwDialog (libadwaita) di atas `DialogContent`:
+ * - Header bar: slot kiri (`start`), judul + subjudul di tengah
+ *   (AdwWindowTitle), slot kanan (`end`). Tanpa `end` -> tombol tutup bundar.
+ * - Tinggi dipatok (isi panjang men-scroll di dalam), sudut 2xl.
+ * - Layar sempit (< sm): tampil sebagai bottom sheet dengan pegangan, seperti
+ *   AdwDialog di jendela sempit; padding bawah menghormati safe-area iOS.
+ * - Fokus awal: desktop -> kolom cari pertama (bila ada); HP -> dialog itu
+ *   sendiri agar keyboard virtual tidak langsung muncul.
+ * - Esc saat kolom cari berisi: kosongkan cari dulu (lihat `SearchEntry`),
+ *   tidak menutup dialog.
+ */
+import { XIcon } from "lucide-react";
+import { type ReactNode, useRef } from "react";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export interface AdwDialogContentProps {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** Aksi di kiri header bar (mis. "Cancel"). */
+  start?: ReactNode;
+  /** Aksi di kanan header bar (mis. tombol utama). Kosong -> tombol tutup. */
+  end?: ReactNode;
+  /** Kunci tombol tutup bawaan (mis. saat menyimpan). */
+  closeDisabled?: boolean;
+  /** Kelas area isi di bawah header bar. */
+  bodyClassName?: string;
+  children: ReactNode;
+}
+
+export function AdwDialogContent({
+  title,
+  subtitle,
+  start,
+  end,
+  closeDisabled = false,
+  bodyClassName,
+  children,
+}: AdwDialogContentProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const hasSides = start !== undefined || end !== undefined;
+
+  return (
+    <DialogContent
+      ref={contentRef}
+      showCloseButton={false}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault();
+        const wide = window.matchMedia("(min-width: 640px)").matches;
+        const search = contentRef.current?.querySelector<HTMLInputElement>('input[type="search"]');
+        (wide && search ? search : contentRef.current)?.focus();
+      }}
+      onEscapeKeyDown={(e) => {
+        const el = document.activeElement;
+        if (el instanceof HTMLInputElement && el.type === "search" && el.value !== "") {
+          e.preventDefault();
+        }
+      }}
+      className={cn(
+        "flex h-[min(640px,85dvh)] flex-col gap-0 overflow-hidden rounded-2xl p-0 sm:max-w-md",
+        "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:h-[85dvh] max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none max-sm:border-x-0 max-sm:border-b-0",
+        "max-sm:data-[state=closed]:slide-out-to-bottom-8 max-sm:data-[state=open]:slide-in-from-bottom-8",
+      )}
+    >
+      {/* Pegangan sheet (dekoratif) — hanya di HP. */}
+      <span
+        aria-hidden
+        className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30 sm:hidden"
+      />
+      <DialogHeader
+        className={cn(
+          "grid shrink-0 items-center gap-2 px-3 pt-2.5 pb-2 sm:pt-3",
+          // Kolom kiri/kanan selebar slot terlebar agar judul tetap di tengah.
+          hasSides ? "grid-cols-[1fr_auto_1fr]" : "grid-cols-[2rem_1fr_2rem]",
+        )}
+      >
+        <div className="flex min-w-0 justify-start">{start}</div>
+        <div className="flex min-w-0 flex-col items-center gap-0.5 text-center">
+          <DialogTitle className="truncate text-[15px] leading-5 font-bold">{title}</DialogTitle>
+          {subtitle && (
+            <DialogDescription className="truncate text-xs leading-4">{subtitle}</DialogDescription>
+          )}
+        </div>
+        <div className="flex min-w-0 justify-end">
+          {end ?? (
+            <DialogClose
+              disabled={closeDisabled}
+              aria-label="Close"
+              className="flex size-7 items-center justify-center rounded-full bg-black/[0.06] text-foreground/80 transition-colors outline-none hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-50 dark:bg-white/[0.08] dark:hover:bg-white/15"
+            >
+              <XIcon className="size-3.5" strokeWidth={2.5} />
+            </DialogClose>
+          )}
+        </div>
+      </DialogHeader>
+
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col gap-3 px-4 pt-1 pb-[max(1rem,env(safe-area-inset-bottom))]",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </div>
+    </DialogContent>
+  );
+}

package/src/components/ui/adw-toggle-group.tsx

@@ -0,0 +1,75 @@
+/**
+ * Toggle group ala AdwToggleGroup (libadwaita 1.7): palung terisi berisi
+ * beberapa pilihan sejajar; pilihan aktif "terangkat" (latar terang +
+ * bayangan di mode terang, lebih terang dari palung di mode gelap).
+ *
+ * Satu pilihan selalu aktif (bukan multi-select). Tombol memakai
+ * `aria-pressed` di dalam `role="group"` berlabel.
+ */
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface AdwToggleOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  /** Ikon / logo di kiri label. */
+  icon?: ReactNode;
+  /** Label aksesibel bila `label` bukan teks biasa. */
+  ariaLabel?: string;
+  title?: string;
+}
+
+export interface AdwToggleGroupProps<T extends string> {
+  /** Label grup untuk pembaca layar. */
+  label: string;
+  value: T;
+  options: readonly AdwToggleOption<T>[];
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function AdwToggleGroup<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  disabled = false,
+  className,
+}: AdwToggleGroupProps<T>) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: grup tombol segmented, bukan fieldset form.
+    <div
+      role="group"
+      aria-label={label}
+      className={cn(
+        "grid shrink-0 auto-cols-fr grid-flow-col gap-0.5 rounded-[10px] bg-black/[0.06] p-[3px] dark:bg-white/[0.07]",
+        className,
+      )}
+    >
+      {options.map((o) => {
+        const active = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            aria-pressed={active}
+            aria-label={o.ariaLabel}
+            title={o.title}
+            disabled={disabled}
+            onClick={() => onChange(o.value)}
+            className={cn(
+              "flex h-8 min-w-0 items-center justify-center gap-2 rounded-[7px] px-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-60",
+              active
+                ? "bg-white text-foreground shadow-sm dark:bg-white/[0.15] dark:shadow-none"
+                : "text-foreground/70 hover:bg-black/[0.04] hover:text-foreground dark:hover:bg-white/[0.05]",
+            )}
+          >
+            {o.icon}
+            <span className="truncate">{o.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/search-entry.tsx

@@ -0,0 +1,70 @@
+/**
+ * Kolom cari ala GtkSearchEntry (libadwaita): latar terisi tanpa border,
+ * ikon kaca pembesar di kiri, tombol hapus bundar saat berisi, ring fokus
+ * aksen. Esc mengosongkan isi (bila ada) sebelum diteruskan ke pemanggil.
+ *
+ * Teks 16px di HP agar iOS Safari tidak men-zoom halaman saat fokus.
+ */
+import { SearchIcon, XIcon } from "lucide-react";
+import { type ComponentProps, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export interface SearchEntryProps
+  extends Omit<ComponentProps<"input">, "value" | "onChange" | "type"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Kelas untuk pembungkus (lebar, margin). */
+  className?: string;
+}
+
+export function SearchEntry({
+  value,
+  onValueChange,
+  className,
+  onKeyDown,
+  ref,
+  ...props
+}: SearchEntryProps) {
+  const localRef = useRef<HTMLInputElement | null>(null);
+  return (
+    <div className={cn("relative", className)}>
+      <SearchIcon
+        className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+        aria-hidden
+      />
+      <input
+        ref={(el) => {
+          localRef.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        }}
+        type="search"
+        value={value}
+        onChange={(e) => onValueChange(e.target.value)}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented) return;
+          if (e.key === "Escape" && value !== "") {
+            e.preventDefault();
+            onValueChange("");
+          }
+        }}
+        className="h-9 w-full rounded-lg bg-black/[0.06] pr-9 pl-9 text-base outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/60 sm:text-sm dark:bg-white/[0.08] [&::-webkit-search-cancel-button]:hidden"
+        {...props}
+      />
+      {value !== "" && (
+        <button
+          type="button"
+          onClick={() => {
+            onValueChange("");
+            localRef.current?.focus();
+          }}
+          aria-label="Clear search"
+          className="absolute top-1/2 right-1.5 flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-black/10 hover:text-foreground dark:hover:bg-white/10"
+        >
+          <XIcon className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/config.ts

@@ -2,14 +2,14 @@
  * Config_File & validasi Sandbox_Root saat startup.
  * Sesuai `design.md` — `config.ts`.
  *
- * Skema minimal: `{ "sandboxRoot": "/abs/path" }`.
+ * Skema minimal: `{ "sandboxRoot": "/abs/path" }`, opsional `"port": 3000`.
  * Path default mengikuti mode runtime (`src/runtime.ts`):
  * - **cli** (`kcgcode`): `~/.kcgcode/config.json`
  * - **dev** (`bun dev`): `./kcg-code.config.json` bila ada, else user config
  * `loadConfig()` keluar dengan kode error bila `sandboxRoot` tidak diatur
  * atau direktori yang ditunjuk tidak ditemukan (Requirement 10.1).
  */
-import { readFileSync, realpathSync } from "node:fs";
+import { readFileSync, realpathSync, writeFileSync } from "node:fs";
 import { DEFAULT_CONFIG_PATH, resolveEffectiveConfigPath } from "./paths";
 import type { Result } from "./server/result";
 
@@ -20,6 +20,12 @@ export interface AppConfig {
   sandboxRoot: string;
   /** Path berkas konfigurasi yang dibaca. */
   configPath: string;
+  /** Port HTTP pilihan user (diatur lewat menu CLI); kosong = default. */
+  port?: number;
+}
+
+export function isValidPort(n: unknown): n is number {
+  return typeof n === "number" && Number.isInteger(n) && n > 0 && n <= 65535;
 }
 
 /**
@@ -68,7 +74,30 @@ export function resolveConfig(configPath?: string): Result<AppConfig> {
     };
   }
 
-  return { ok: true, data: { sandboxRoot: resolved, configPath: file } };
+  const port = obj.port;
+  if (port !== undefined && !isValidPort(port)) {
+    return {
+      ok: false,
+      error: `[config] "port" must be an integer 1-65535 in "${file}" (got ${JSON.stringify(port)})`,
+    };
+  }
+
+  return {
+    ok: true,
+    data: { sandboxRoot: resolved, configPath: file, ...(port !== undefined && { port }) },
+  };
+}
+
+/** Simpan `port` ke Config_File; key lain dipertahankan apa adanya. */
+export function saveConfigPort(configPath: string, port: number): Result<void> {
+  try {
+    const obj = JSON.parse(readFileSync(configPath, "utf8")) as Record<string, unknown>;
+    obj.port = port;
+    writeFileSync(configPath, `${JSON.stringify(obj, null, 2)}\n`, "utf8");
+    return { ok: true, data: undefined };
+  } catch (err) {
+    return { ok: false, error: `cannot save port to "${configPath}": ${(err as Error).message}` };
+  }
 }
 
 /**

package/src/hooks/useAgentPicker.ts

@@ -7,8 +7,10 @@
  * di Sheet tidak perlu buka popover lagi di dalam popover.
  */
 import { useCallback, useRef, useState } from "react";
+import { agentQuery } from "@/lib/agent-types";
 import { ApiError, apiFetch } from "@/lib/api";
 import type { AgentOption } from "@/server/services/opencode-client";
+import type { AgentType } from "@/types";
 
 export interface UseAgentPickerResult {
   agents: AgentOption[] | null;
@@ -26,6 +28,8 @@ export function useAgentPicker(
   /** null = Session belum ada (composer homepage): pilihan tidak di-PUT. */
   sessionId: string | null,
   onChanged: (agent: string | null) => void,
+  /** Backend Session — Claude Code menawarkan mode permission sebagai agent. */
+  agentType: AgentType = "opencode",
 ): UseAgentPickerResult {
   const [agents, setAgents] = useState<AgentOption[] | null>(null);
   const [loading, setLoading] = useState(false);
@@ -55,7 +59,7 @@ export function useAgentPicker(
     setError(null);
     void (async () => {
       try {
-        const res = await apiFetch(`/api/projects/${projectId}/agents`);
+        const res = await apiFetch(`/api/projects/${projectId}/agents${agentQuery(agentType)}`);
         const body = (await res.json()) as { agents: AgentOption[] };
         setAgents(body.agents);
       } catch (e) {
@@ -66,7 +70,7 @@ export function useAgentPicker(
         setLoading(false);
       }
     })();
-  }, [projectId]);
+  }, [projectId, agentType]);
 
   const pick = useCallback(
     async (name: string | null) => {

package/src/hooks/useSessionList.ts

@@ -2,8 +2,8 @@
  * Engine halaman daftar Session milik satu Project (`SessionList.tsx`).
  *
  * Mengelola pemuatan daftar (`GET /api/sessions` di-filter per Project),
- * aksi per-Session (stop/start/hapus), serta dialog konfirmasi hapus Project
- * (yang menghapus seluruh Session-nya). Sisa logika form pembuatan Session
+ * aksi per-Session (stop/start/hapus), selection mode untuk hapus massal,
+ * serta dialog konfirmasi hapus Project (yang menghapus seluruh Session-nya). Sisa logika form pembuatan Session
  * baru hidup di `NewSessionDialog`.
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -12,6 +12,7 @@ import { useResyncOnReconnect } from "@/hooks/useResyncOnReconnect";
 import { useWebSocket } from "@/hooks/useWebSocket";
 import { ApiError, apiFetch } from "@/lib/api";
 import { notifyDataChanged } from "@/lib/data-events";
+import { pluralSessions, pruneSelection, toggleSelection } from "@/lib/session-selection";
 import { type SessionSummary, sortSessions, summarizeSessions } from "@/lib/session-summary";
 import type { Session } from "@/types";
 
@@ -42,6 +43,22 @@ export interface SessionListEngine {
   cancelDelete: () => void;
   confirmRemove: () => Promise<void>;
 
+  // Selection mode (hapus massal)
+  selecting: boolean;
+  startSelecting: () => void;
+  stopSelecting: () => void;
+  /** Id Session terpilih (hanya yang masih ada). */
+  selected: ReadonlySet<string>;
+  toggleSelect: (sessionId: string) => void;
+  /** Pilih semua; bila semua sudah terpilih -> kosongkan. */
+  toggleSelectAll: () => void;
+  bulkDeleteOpen: boolean;
+  requestBulkDelete: () => void;
+  cancelBulkDelete: () => void;
+  /** Progres hapus massal; null = tidak berjalan. */
+  bulkProgress: { done: number; total: number } | null;
+  confirmBulkRemove: () => Promise<void>;
+
   // Hapus Project (beserta seluruh Session-nya)
   projectDeleteOpen: boolean;
   openProjectDelete: () => void;
@@ -62,6 +79,10 @@ export function useSessionList({ projectId, onDeleted }: UseSessionListOptions):
   /** Konfirmasi hapus Project (beserta seluruh Session-nya). */
   const [projectDeleteOpen, setProjectDeleteOpen] = useState(false);
   const [deletingProject, setDeletingProject] = useState(false);
+  const [selecting, setSelecting] = useState(false);
+  const [rawSelected, setRawSelected] = useState<ReadonlySet<string>>(() => new Set());
+  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+  const [bulkProgress, setBulkProgress] = useState<{ done: number; total: number } | null>(null);
 
   /** `silent`: muat ulang di latar (tanpa skeleton) — sinkron dari server. */
   const refresh = useCallback(
@@ -125,6 +146,10 @@ export function useSessionList({ projectId, onDeleted }: UseSessionListOptions):
   const ordered = useMemo(() => sortSessions(sessions), [sessions]);
   const summary = useMemo(() => summarizeSessions(sessions), [sessions]);
 
+  // Session yang hilang (dihapus di tab/perangkat lain) otomatis tidak
+  // terpilih lagi.
+  const selected = useMemo(() => pruneSelection(rawSelected, sessions), [rawSelected, sessions]);
+
   /** Stop ≠ hapus: POST /stop hanya mengubah status; data tetap ada dan
       bisa dihidupkan kembali lewat aksi Hidupkan (resume). */
   const stop = useCallback(
@@ -187,6 +212,63 @@ export function useSessionList({ projectId, onDeleted }: UseSessionListOptions):
     }
   }, [pendingDelete, refresh]);
 
+  const startSelecting = useCallback(() => {
+    setRawSelected(new Set());
+    setSelecting(true);
+  }, []);
+  const stopSelecting = useCallback(() => {
+    setSelecting(false);
+    setRawSelected(new Set());
+  }, []);
+  const toggleSelect = useCallback(
+    (sessionId: string) => setRawSelected((prev) => toggleSelection(prev, sessionId)),
+    [],
+  );
+  const toggleSelectAll = useCallback(() => {
+    setRawSelected((prev) =>
+      sessions.length > 0 && sessions.every((s) => prev.has(s.id))
+        ? new Set()
+        : new Set(sessions.map((s) => s.id)),
+    );
+  }, [sessions]);
+  const requestBulkDelete = useCallback(() => setBulkDeleteOpen(true), []);
+  const cancelBulkDelete = useCallback(() => setBulkDeleteOpen(false), []);
+
+  /**
+   * Hapus massal Session terpilih — satu per satu (berurutan, agar server
+   * headless tidak dibanjiri), progres tampil di dialog konfirmasi. Yang
+   * gagal tetap terpilih supaya bisa dicoba lagi.
+   */
+  const confirmBulkRemove = useCallback(async () => {
+    const ids = [...selected];
+    if (ids.length === 0) return;
+    const failed: string[] = [];
+    setBulkProgress({ done: 0, total: ids.length });
+    for (const [i, id] of ids.entries()) {
+      setDeleting(id);
+      try {
+        await apiFetch(`/api/sessions/${id}`, { method: "DELETE" });
+      } catch {
+        failed.push(id);
+      }
+      setBulkProgress({ done: i + 1, total: ids.length });
+    }
+    setDeleting(null);
+    setBulkProgress(null);
+    setBulkDeleteOpen(false);
+    const removed = ids.length - failed.length;
+    if (failed.length === 0) {
+      toast.success(`Deleted ${pluralSessions(removed)}.`);
+      setSelecting(false);
+      setRawSelected(new Set());
+    } else {
+      toast.error(`Couldn't delete ${failed.length} of ${pluralSessions(ids.length)}.`);
+      setRawSelected(new Set(failed));
+    }
+    await refresh({ silent: true });
+    notifyDataChanged();
+  }, [selected, refresh]);
+
   const openProjectDelete = useCallback(() => setProjectDeleteOpen(true), []);
   const closeProjectDelete = useCallback(() => setProjectDeleteOpen(false), []);
 
@@ -225,6 +307,17 @@ export function useSessionList({ projectId, onDeleted }: UseSessionListOptions):
     requestDelete,
     cancelDelete,
     confirmRemove,
+    selecting,
+    startSelecting,
+    stopSelecting,
+    selected,
+    toggleSelect,
+    toggleSelectAll,
+    bulkDeleteOpen,
+    requestBulkDelete,
+    cancelBulkDelete,
+    bulkProgress,
+    confirmBulkRemove,
     projectDeleteOpen,
     openProjectDelete,
     closeProjectDelete,

package/src/lib/__tests__/project-extensions.test.ts

@@ -3,7 +3,13 @@
  */
 import { describe, expect, test } from "bun:test";
 import type { SkillInfo } from "@/server/services/opencode-client";
-import { describeMcpSummary, filterSkills, groupSkills } from "../project-extensions";
+import {
+  describeMcpEntries,
+  describeMcpSummary,
+  filterSkills,
+  groupSkills,
+  mergeMcpServers,
+} from "../project-extensions";
 
 function skill(name: string, source: SkillInfo["source"], description: string | null = null) {
   return { name, description, location: null, source } satisfies SkillInfo;
@@ -25,6 +31,31 @@ describe("describeMcpSummary", () => {
   });
 });
 
+describe("mergeMcpServers", () => {
+  test("gabung per nama, catat agent, urut yang bermasalah dulu", () => {
+    const entries = mergeMcpServers({
+      opencode: [
+        { name: "web", status: "connected", error: null },
+        { name: "db", status: "connected", error: null },
+      ],
+      "claude-code": [
+        { name: "web", status: "unknown", error: null },
+        { name: "db", status: "failed", error: "boom" },
+        { name: "cc-only", status: "disabled", error: null },
+      ],
+    });
+    expect(entries.map((e) => [e.name, e.status, e.agents])).toEqual([
+      ["db", "failed", ["opencode", "claude-code"]],
+      ["web", "connected", ["opencode", "claude-code"]],
+      ["cc-only", "disabled", ["claude-code"]],
+    ]);
+    expect(entries[0]?.byAgent["claude-code"]?.error).toBe("boom");
+    // Tersambung di salah satu agent sudah dihitung "connected".
+    expect(describeMcpEntries(entries)).toBe("2 of 3 connected");
+    expect(describeMcpEntries([])).toBe("None configured");
+  });
+});
+
 describe("groupSkills", () => {
   test("urutan project -> global -> builtin, kelompok kosong dibuang", () => {
     const groups = groupSkills([