kcg-code 0.1.0 → 0.2.0

package/src/pages/skills/SkillsPage.tsx

@@ -4,6 +4,9 @@
  * - Header: judul + pemilih Project (pil "Install to"). Project terpilih =
  *   `?project=` (dari sidebar) > pilihan terakhir (localStorage) > satu-
  *   satunya Project. Pilihan memperbarui URL (`replaceState`).
+ * - Skill terpasang dibaca dari KEDUA agent (OpenCode & Claude Code) lalu
+ *   digabung (`mergeInstalledSkills`); tiap kartu menampilkan logo agent
+ *   tempat skill itu terpasang. Agent tujuan dipilih di dialog Install.
  * - Dua tab memakai kolom cari yang sama, tapi query disimpan per tab:
  *   - Browse: hasil skills.sh (debounce, min. 2 karakter); saat kosong
  *     tampil chip saran kata kunci.
@@ -37,6 +40,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { useRouter } from "@/hooks/useRouter";
+import { AGENT_TYPE_LABELS, AGENT_TYPES, agentQuery } from "@/lib/agent-types";
 import { ApiError, apiFetch } from "@/lib/api";
 import { parseSkillsProject, projectsPath, skillsPath } from "@/lib/routes";
 import {
@@ -47,9 +51,10 @@ import {
   useInstalls,
 } from "@/lib/skill-installs";
 import {
-  installedProjectSkillNames,
-  isInstalled,
+  type InstalledSkill,
+  installedAgentsFor,
   LAST_SKILLS_PROJECT_KEY,
+  mergeInstalledSkills,
   resolveSkillsProject,
   SEARCH_SUGGESTIONS,
   visibleInstalledSkills,
@@ -57,7 +62,9 @@ import {
 import { cn } from "@/lib/utils";
 import type { SkillInfo } from "@/server/services/opencode-client";
 import type { RegistrySkill } from "@/server/services/skills-registry";
-import type { Project } from "@/types";
+import type { AgentType, Project } from "@/types";
+
+const EMPTY_INSTALLED: InstalledSkill[] = [];
 
 /** Jeda ketik sebelum memanggil skills.sh. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -219,7 +226,9 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
   const [queries, setQueries] = useState<Record<Tab, string>>({ browse: "", installed: "" });
   const query = queries[tab];
   const setQuery = useCallback((q: string) => setQueries((prev) => ({ ...prev, [tab]: q })), [tab]);
-  const [installed, setInstalled] = useState<Load<SkillInfo[]>>({ phase: "idle" });
+  const [installed, setInstalled] = useState<Load<InstalledSkill[]>>({ phase: "idle" });
+  /** Sebagian agent gagal dibaca (daftar tetap tampil dari agent lain). */
+  const [installedWarning, setInstalledWarning] = useState<string | null>(null);
   const [reloadKey, setReloadKey] = useState(0);
   const [results, setResults] = useState<Load<RegistrySkill[]>>({ phase: "idle" });
   /** Permintaan pencarian sedang berjalan (hasil lama tetap tampil). */
@@ -244,22 +253,41 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
     return () => window.removeEventListener("keydown", onKey);
   }, []);
 
-  // Skill terpasang (dibaca dari server headless opencode Project).
+  // Skill terpasang dari semua agent (opencode: server headless Project;
+  // Claude Code: `.claude/skills` Project + global), dibaca bersamaan lalu
+  // digabung. Satu agent gagal tidak menggagalkan yang lain.
   useEffect(() => {
     void reloadKey;
     if (!project) return;
     let cancelled = false;
     setInstalled((prev) => (prev.phase === "ready" ? prev : { phase: "loading" }));
-    apiFetch(`/api/projects/${project.id}/skills`)
-      .then((res) => res.json() as Promise<{ skills: SkillInfo[] }>)
-      .then(({ skills }) => {
-        if (!cancelled) setInstalled({ phase: "ready", data: skills });
-      })
-      .catch((e) => {
-        if (!cancelled) {
-          setInstalled({ phase: "error", message: errorMessage(e, "Failed to load skills") });
-        }
+    void Promise.allSettled(
+      AGENT_TYPES.map((a) =>
+        apiFetch(`/api/projects/${project.id}/skills${agentQuery(a)}`)
+          .then((res) => res.json() as Promise<{ skills: SkillInfo[] }>)
+          .then(({ skills }) => skills),
+      ),
+    ).then((results) => {
+      if (cancelled) return;
+      const byAgent: Partial<Record<AgentType, SkillInfo[]>> = {};
+      const failed: { agent: AgentType; message: string }[] = [];
+      results.forEach((r, i) => {
+        const agent = AGENT_TYPES[i] as AgentType;
+        if (r.status === "fulfilled") byAgent[agent] = r.value;
+        else failed.push({ agent, message: errorMessage(r.reason, "Failed to load skills") });
       });
+      if (failed.length === AGENT_TYPES.length) {
+        setInstalled({ phase: "error", message: failed[0]?.message ?? "Failed to load skills" });
+        setInstalledWarning(null);
+        return;
+      }
+      setInstalled({ phase: "ready", data: mergeInstalledSkills(byAgent) });
+      setInstalledWarning(
+        failed.length > 0
+          ? `Couldn't read ${failed.map((f) => AGENT_TYPE_LABELS[f.agent]).join(", ")} skills: ${failed[0]?.message}`
+          : null,
+      );
+    });
     return () => {
       cancelled = true;
     };
@@ -298,11 +326,7 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
     };
   }, [browseQuery, canSearch]);
 
-  const installedNames = useMemo(
-    () =>
-      installed.phase === "ready" ? installedProjectSkillNames(installed.data) : new Set<string>(),
-    [installed],
-  );
+  const installedList = installed.phase === "ready" ? installed.data : EMPTY_INSTALLED;
   const installedAll = useMemo(
     () => (installed.phase === "ready" ? visibleInstalledSkills(installed.data, "") : []),
     [installed],
@@ -325,12 +349,12 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
   }, [project]);
 
   /** Mulai job instalasi; progres & output tampil di notifikasi global. */
-  const install = async (skill: RegistrySkill) => {
+  const install = async (skill: RegistrySkill, agents: AgentType[]) => {
     if (!project) return;
     setStarting(true);
     setStartError(null);
     try {
-      await startInstall(project.id, skill.source, skill.skillId);
+      await startInstall(project.id, skill.source, skill.skillId, agents);
       setPending(null);
     } catch (e) {
       // Dialog tetap terbuka agar user melihat alasannya.
@@ -440,7 +464,7 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
                 query={trimmed}
                 canSearch={canSearch}
                 results={results}
-                installedNames={installedNames}
+                installedAgents={(skill) => installedAgentsFor(skill, installedList)}
                 isInstalling={(skill) =>
                   findRunningInstall(installs, project.id, skill.source, skill.skillId)?.job.id ??
                   null
@@ -454,6 +478,7 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
             ) : (
               <InstalledPanel
                 state={installed}
+                warning={installedWarning}
                 skills={installedFiltered}
                 total={installedAll.length}
                 query={trimmed}
@@ -468,6 +493,7 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
           <InstallSkillDialog
             skill={pending}
             projectName={project.name}
+            installedAgents={pending ? installedAgentsFor(pending, installedList) : []}
             starting={starting}
             startError={startError}
             onOpenChange={(open) => {
@@ -476,7 +502,7 @@ function SkillsWorkspace({ project }: SkillsWorkspaceProps) {
                 setStartError(null);
               }
             }}
-            onConfirm={(s) => void install(s)}
+            onConfirm={(s, agents) => void install(s, agents)}
           />
         </>
       )}
@@ -531,7 +557,7 @@ function BrowsePanel({
   query,
   canSearch,
   results,
-  installedNames,
+  installedAgents,
   isInstalling,
   onSuggest,
   onInstall,
@@ -539,7 +565,8 @@ function BrowsePanel({
   query: string;
   canSearch: boolean;
   results: Load<RegistrySkill[]>;
-  installedNames: ReadonlySet<string>;
+  /** Agent yang sudah memuat skill katalog ini dari folder Project. */
+  installedAgents: (skill: RegistrySkill) => AgentType[];
   /** Id job instalasi berjalan untuk skill ini (null bila tidak ada). */
   isInstalling: (skill: RegistrySkill) => string | null;
   onSuggest: (q: string) => void;
@@ -615,7 +642,7 @@ function BrowsePanel({
             <RegistrySkillCard
               key={skill.id}
               skill={skill}
-              installed={isInstalled(skill, installedNames)}
+              installedAgents={installedAgents(skill)}
               installing={jobId !== null}
               onInstall={onInstall}
               onShowProgress={() => {
@@ -631,13 +658,16 @@ function BrowsePanel({
 
 function InstalledPanel({
   state,
+  warning,
   skills,
   total,
   query,
   onBrowse,
 }: {
-  state: Load<SkillInfo[]>;
-  skills: SkillInfo[];
+  state: Load<InstalledSkill[]>;
+  /** Sebagian agent gagal dibaca. */
+  warning: string | null;
+  skills: InstalledSkill[];
   total: number;
   query: string;
   onBrowse: () => void;
@@ -654,25 +684,34 @@ function InstalledPanel({
     );
   }
 
+  const warningNote = warning && (
+    <p role="status" className="mb-3 text-xs text-muted-foreground">
+      {warning}
+    </p>
+  );
+
   if (total === 0) {
     return (
-      <Empty className="border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <SparklesIcon />
-          </EmptyMedia>
-          <EmptyTitle>No skills installed yet</EmptyTitle>
-          <EmptyDescription>
-            Browse skills.sh to add your first skill to this project.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <Button type="button" variant="outline" onClick={onBrowse}>
-            <SearchIcon data-icon="inline-start" />
-            Browse skills
-          </Button>
-        </EmptyContent>
-      </Empty>
+      <>
+        {warningNote}
+        <Empty className="border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <SparklesIcon />
+            </EmptyMedia>
+            <EmptyTitle>No skills installed yet</EmptyTitle>
+            <EmptyDescription>
+              Browse skills.sh to add your first skill to this project.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button type="button" variant="outline" onClick={onBrowse}>
+              <SearchIcon data-icon="inline-start" />
+              Browse skills
+            </Button>
+          </EmptyContent>
+        </Empty>
+      </>
     );
   }
 
@@ -686,6 +725,11 @@ function InstalledPanel({
 
   return (
     <section aria-label="Installed skills" className="flex flex-col gap-3">
+      {warning && (
+        <p role="status" className="text-xs text-muted-foreground">
+          {warning}
+        </p>
+      )}
       {query !== "" && (
         <p className="text-xs text-muted-foreground" aria-live="polite">
           {skills.length} of {total} installed skills

package/src/server/__tests__/app.test.ts

@@ -261,6 +261,7 @@ describe("createKcgServer — alur utama e2e (headless)", () => {
   let app: KcgServer;
   let root: string;
   let servers: FakeServers;
+  let claudeServers: FakeServers;
   /** Instalasi yang diminta ke Skills_Registry palsu: [cwd, source, skill]. */
   const installCalls: [string, string, string][] = [];
   const skillsRegistry: SkillsRegistry = {
@@ -297,10 +298,12 @@ describe("createKcgServer — alur utama e2e (headless)", () => {
     root = mkdtempSync(path.join(tmpdir(), "kcg-e2e2-"));
     mkdirSync(path.join(root, "proj"), { recursive: true });
     servers = makeFakeServers();
+    claudeServers = makeFakeServers();
     app = createKcgServer({
       config: { sandboxRoot: root, configPath: "test" },
       store,
       servers: servers.manager,
+      claudeServers: claudeServers.manager,
       uploadsRoot: path.join(root, "uploads"),
       port: 0,
       skillsRegistry,
@@ -658,7 +661,7 @@ describe("createKcgServer — alur utama e2e (headless)", () => {
     expect(sessRes.status).toBe(200);
   });
 
-  test("agentType claude-code ditolak (v1 headless hanya opencode)", async () => {
+  test("agentType claude-code memakai backend Claude Code; tipe tak dikenal ditolak", async () => {
     const projRes = await fetch(`${baseUrl()}/api/projects`, {
       method: "POST",
       headers: { "content-type": "application/json" },
@@ -678,10 +681,20 @@ describe("createKcgServer — alur utama e2e (headless)", () => {
     const sessRes = await fetch(`${baseUrl()}/api/sessions`, {
       method: "POST",
       headers: { "content-type": "application/json" },
-      body: JSON.stringify({ agentType: "claude-code", projectId: body2.project.id }),
+      body: JSON.stringify({ agentType: "codex", projectId: body2.project.id }),
     });
     expect(sessRes.status).toBe(400);
     expect(((await sessRes.json()) as { error: string }).error).toBe("UNSUPPORTED_AGENT_TYPE");
+
+    const claudeRes = await fetch(`${baseUrl()}/api/sessions`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ agentType: "claude-code", projectId: body2.project.id }),
+    });
+    expect(claudeRes.status).toBe(201);
+    const { session } = (await claudeRes.json()) as { session: Session };
+    expect(session.agentType).toBe("claude-code");
+    expect(session.ocSessionId).toBe(`ses_${body2.project.id}`);
   });
 
   test("body JSON tidak valid -> 400 INVALID_JSON", async () => {

package/src/server/app.ts

@@ -42,6 +42,7 @@ import { workspaceRoutes } from "./routes/workspace.routes";
 import { type AttachmentManager, createAttachmentManager } from "./services/attachments";
 import { type AuthService, createAuthService } from "./services/auth";
 import { createPasskeyService } from "./services/auth-passkeys";
+import { createClaudeCodeServerManager } from "./services/claude-code-client";
 import { createFrpcInstaller } from "./services/frpc-installer";
 import {
   createOpenCodeServerManager,
@@ -79,6 +80,8 @@ export interface KcgServerOptions {
   store?: SessionStore;
   /** Injeksi OpenCode_Server_Manager (untuk pengujian, task 20.2). */
   servers?: OpenCodeServerManager;
+  /** Injeksi backend Claude Code (Agent SDK) untuk pengujian. */
+  claudeServers?: OpenCodeServerManager;
   /** Injeksi Skills_Registry (skills.sh + CLI `skills`) untuk pengujian. */
   skillsRegistry?: SkillsRegistry;
   /** Injeksi Auth_Service (mis. hash cepat untuk test). */
@@ -125,6 +128,10 @@ export interface KcgServer {
   auth: AuthService;
   /** Tunnel publik (diekspos untuk dashboard terminal & pengujian). */
   tunnel: TunnelManager;
+  /** Tunnel localhost.run (diekspos untuk dashboard terminal). */
+  lhr: LhrManager;
+  /** Provider tunnel terpilih: "kcg" | "lhr". */
+  tunnelProvider: () => "kcg" | "lhr";
   /** Pola rute `/api/*` yang terdaftar (untuk test cakupan penjaga). */
   apiRoutePatterns: string[];
   /** Shutdown: simpan status running (budget 5s) -> stop server -> tutup store. */
@@ -166,6 +173,8 @@ export function createKcgServer(opts: KcgServerOptions = {}): KcgServer {
 
   const projectManager = createProjectManager(config.sandboxRoot, store);
   const servers = opts.servers ?? createOpenCodeServerManager();
+  // Proses `claude` baru di-spawn saat Session Claude Code menerima prompt.
+  const claudeServers = opts.claudeServers ?? createClaudeCodeServerManager();
   const attachments: AttachmentManager = createAttachmentManager(uploadsRoot);
 
   // Skills_Registry & job instalasi dibuat lebih dulu: session manager
@@ -174,7 +183,7 @@ export function createKcgServer(opts: KcgServerOptions = {}): KcgServer {
   const skillsRegistry = opts.skillsRegistry ?? createSkillsRegistry();
   const skillInstalls = createSkillInstallJobs({
     registry: skillsRegistry,
-    refreshSkills: (projectId) => sessionManager.refreshSkills(projectId),
+    refreshSkills: (projectId, agentType) => sessionManager.refreshSkills(projectId, agentType),
     validate: (source, skill) => isValidSource(source) && isValidSkillId(skill),
   });
 
@@ -182,6 +191,7 @@ export function createKcgServer(opts: KcgServerOptions = {}): KcgServer {
   const sessionManager = createSessionManager({
     store,
     servers,
+    claudeServers,
     attachments,
     onMessage: (message) => gateway.notifyMessage(message.sessionId, message),
     onMessagePart: (sessionId, messageId, part) =>
@@ -409,6 +419,8 @@ export function createKcgServer(opts: KcgServerOptions = {}): KcgServer {
     skillInstalls,
     auth,
     tunnel,
+    lhr,
+    tunnelProvider: () => store.getTunnelSettings(Date.now()).provider,
     apiRoutePatterns: Object.keys(apiRoutes),
     close,
   };

package/src/server/routes/projects.routes.ts

@@ -9,9 +9,19 @@
  * (`app.ts`) bersama tabel rute lain — pola kcgcode (`*.routes.ts`).
  */
 import type { BunRequest } from "bun";
+import type { AgentType } from "../../types";
 import { errorStatus, json, readJson, serverError } from "./helpers";
 import type { ApiRouteContext } from "./types";
 
+/**
+ * Backend yang ditanyakan lewat `?agent=` (default opencode) — daftar model &
+ * agent berbeda antara opencode dan Claude Code.
+ */
+function agentTypeParam(req: Request): AgentType {
+  const agent = new URL(req.url).searchParams.get("agent");
+  return agent === "claude-code" ? "claude-code" : "opencode";
+}
+
 export function projectsRoutes(ctx: ApiRouteContext) {
   const { projectManager, sessionManager, notifyDataChanged } = ctx;
   return {
@@ -107,7 +117,7 @@ export function projectsRoutes(ctx: ApiRouteContext) {
     "/api/projects/:id/models": {
       GET: async (req: BunRequest<"/api/projects/:id/models">) => {
         try {
-          const res = await sessionManager.listModels(req.params.id);
+          const res = await sessionManager.listModels(req.params.id, agentTypeParam(req));
           if (!res.ok) return json({ error: res.error }, errorStatus(res.error));
           return json({ models: res.data });
         } catch (e) {
@@ -120,7 +130,7 @@ export function projectsRoutes(ctx: ApiRouteContext) {
     "/api/projects/:id/mcp": {
       GET: async (req: BunRequest<"/api/projects/:id/mcp">) => {
         try {
-          const res = await sessionManager.listMcp(req.params.id);
+          const res = await sessionManager.listMcp(req.params.id, agentTypeParam(req));
           if (!res.ok) return json({ error: res.error }, errorStatus(res.error));
           return json({ mcp: res.data });
         } catch (e) {
@@ -132,7 +142,7 @@ export function projectsRoutes(ctx: ApiRouteContext) {
     "/api/projects/:id/skills": {
       GET: async (req: BunRequest<"/api/projects/:id/skills">) => {
         try {
-          const res = await sessionManager.listSkills(req.params.id);
+          const res = await sessionManager.listSkills(req.params.id, agentTypeParam(req));
           if (!res.ok) return json({ error: res.error }, errorStatus(res.error));
           return json({ skills: res.data });
         } catch (e) {
@@ -145,7 +155,7 @@ export function projectsRoutes(ctx: ApiRouteContext) {
     "/api/projects/:id/agents": {
       GET: async (req: BunRequest<"/api/projects/:id/agents">) => {
         try {
-          const res = await sessionManager.listAgents(req.params.id);
+          const res = await sessionManager.listAgents(req.params.id, agentTypeParam(req));
           if (!res.ok) return json({ error: res.error }, errorStatus(res.error));
           return json({ agents: res.data });
         } catch (e) {

package/src/server/routes/sessions.routes.ts

@@ -127,7 +127,7 @@ export function sessionsRoutes(ctx: ApiRouteContext) {
           const cur = sessionManager.getSession(req.params.id);
           if (!cur.ok)
             return json({ error: "SESSION_NOT_FOUND" }, errorStatus("SESSION_NOT_FOUND"));
-          const res = await sessionManager.findFiles(cur.data.projectId, query);
+          const res = await sessionManager.findFiles(cur.data.projectId, query, cur.data.agentType);
           if (!res.ok) return json({ error: res.error }, errorStatus(res.error));
           return json({ files: res.data });
         } catch (e) {

package/src/server/routes/skills.routes.ts

@@ -3,20 +3,32 @@
  *
  * - `GET  /api/skills/search?q=` — cari skill di skills.sh (proxy + cache).
  * - `GET  /api/skills/audit?source=&skill=` — hasil audit keamanan skill.
- * - `POST /api/projects/:id/skills/install` `{ source, skill }` — mulai job
- *   instalasi (202 + job). CLI `skills` berjalan di latar.
+ * - `POST /api/projects/:id/skills/install` `{ source, skill, agents? }` —
+ *   mulai job instalasi (202 + job) untuk satu atau beberapa agent
+ *   (`opencode` default, `claude-code`). CLI `skills` berjalan di latar.
  * - `GET  /api/skills/installs` — job berjalan & yang baru selesai.
  * - `GET  /api/skills/installs/:jobId?from=<n>` — status job + baris log
  *   mulai indeks `n` (polling bertahap untuk output live).
  * - `POST /api/skills/installs/:jobId/cancel` — batalkan job berjalan.
  *
- * Daftar skill terpasang tetap lewat `GET /api/projects/:id/skills`
- * (dibaca dari opencode) di `projects.routes.ts`.
+ * Daftar skill terpasang tetap lewat `GET /api/projects/:id/skills?agent=`
+ * di `projects.routes.ts`.
  */
 import type { BunRequest } from "bun";
+import type { AgentType } from "../../types";
 import { errorStatus, json, readJson, serverError } from "./helpers";
 import type { ApiRouteContext } from "./types";
 
+const INSTALL_AGENTS: readonly AgentType[] = ["opencode", "claude-code"];
+
+/** `agents` body -> daftar unik terurut; `null` bila tidak valid / kosong. */
+function parseInstallAgents(raw: unknown): AgentType[] | null {
+  if (raw === undefined) return ["opencode"];
+  if (!Array.isArray(raw) || raw.length === 0) return null;
+  if (!raw.every((a) => INSTALL_AGENTS.includes(a as AgentType))) return null;
+  return INSTALL_AGENTS.filter((a) => raw.includes(a));
+}
+
 export function skillsRoutes(ctx: ApiRouteContext) {
   const { projectManager, skillsRegistry, skillInstalls } = ctx;
   return {
@@ -54,10 +66,16 @@ export function skillsRoutes(ctx: ApiRouteContext) {
         try {
           const body = await readJson(req);
           if (!body.ok) return json({ error: "INVALID_JSON" }, 400);
-          const { source, skill } = (body.data ?? {}) as { source?: unknown; skill?: unknown };
+          const { source, skill, agents } = (body.data ?? {}) as {
+            source?: unknown;
+            skill?: unknown;
+            agents?: unknown;
+          };
           if (typeof source !== "string" || typeof skill !== "string") {
             return json({ error: "INVALID_SKILL_ID" }, 400);
           }
+          const agentTypes = parseInstallAgents(agents);
+          if (agentTypes === null) return json({ error: "UNSUPPORTED_AGENT_TYPE" }, 400);
           const project = projectManager.getProject(req.params.id);
           if (!project.ok) return json({ error: project.error }, errorStatus(project.error));
 
@@ -67,6 +85,7 @@ export function skillsRoutes(ctx: ApiRouteContext) {
             projectPath: project.data.path,
             source,
             skillId: skill,
+            agentTypes,
           });
           if (!job.ok) return json({ error: job.error }, errorStatus(job.error));
           return json({ job: job.data }, 202);