kcg-code 0.0.0-stage → 0.2.0

package/src/components/ui/sonner.tsx

@@ -0,0 +1,45 @@
+/**
+ * Toaster shadcn/ui (Sonner). Disesuaikan dari `shadcn add sonner`: tema
+ * mengikuti `useTheme` milik proyek (bukan `next-themes`).
+ *
+ * Pakai: `import { toast } from "sonner"` lalu `toast.success(...)` /
+ * `toast.error(...)`. Mount `<Toaster />` sekali di akar aplikasi.
+ */
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useTheme } from "@/hooks/useTheme";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,51 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/config.ts

@@ -0,0 +1,114 @@
+/**
+ * Config_File & validasi Sandbox_Root saat startup.
+ * Sesuai `design.md` — `config.ts`.
+ *
+ * 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, writeFileSync } from "node:fs";
+import { DEFAULT_CONFIG_PATH, resolveEffectiveConfigPath } from "./paths";
+import type { Result } from "./server/result";
+
+export { DEFAULT_CONFIG_PATH };
+
+export interface AppConfig {
+  /** Path absolut hasil `realpath` dari `sandboxRoot`. */
+  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;
+}
+
+/**
+ * Membaca dan memvalidasi Config_File tanpa menghentikan proses.
+ * Dipisah dari `loadConfig()` agar dapat diuji secara unit (task 2.2).
+ */
+export function resolveConfig(configPath?: string): Result<AppConfig> {
+  const file = resolveEffectiveConfigPath(configPath);
+
+  let raw: string;
+  try {
+    raw = readFileSync(file, "utf8");
+  } catch (err) {
+    return {
+      ok: false,
+      error: `[config] cannot read config file "${file}": ${(err as Error).message}`,
+    };
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err) {
+    return {
+      ok: false,
+      error: `[config] invalid JSON in "${file}": ${(err as Error).message}`,
+    };
+  }
+
+  const obj = parsed as Record<string, unknown>;
+  const sandboxRoot = obj.sandboxRoot;
+  if (typeof sandboxRoot !== "string" || sandboxRoot.trim() === "") {
+    return {
+      ok: false,
+      error: `[config] "sandboxRoot" is not set in "${file}"`,
+    };
+  }
+
+  let resolved: string;
+  try {
+    resolved = realpathSync(sandboxRoot);
+  } catch (err) {
+    return {
+      ok: false,
+      error: `[config] sandboxRoot directory not found: ${sandboxRoot} (${(err as Error).message})`,
+    };
+  }
+
+  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}` };
+  }
+}
+
+/**
+ * Memuat konfigurasi saat startup. Bila tidak valid, log pesan jelas dan
+ * proses keluar dengan kode error (Requirement 10.1).
+ */
+export function loadConfig(): AppConfig {
+  const res = resolveConfig();
+  if (!res.ok) {
+    console.error(res.error);
+    process.exit(1);
+  }
+  return res.data;
+}

package/src/db.ts

@@ -0,0 +1,146 @@
+/**
+ * `Session_Store` — komposisi root persistensi `bun:sqlite` (headless).
+ * Sesuai `design.md`: koneksi DB + migrasi + penyatuan repository per-domain.
+ *
+ * Lapisan repository hidup di `src/server/db/`:
+ * - `schema.ts`        — skema SQLite & migrasi idempoten
+ * - `rows.ts`          — pemetaan baris SQLite -> tipe domain
+ * - `projects.ts`      — repository Projects
+ * - `sessions.ts`      — repository Sessions + riwayat status (append-only)
+ * - `messages.ts`      — repository pesan terstruktur (append-only)
+ * - `prompts.ts`       — repository prompt interaktif
+ * - `auth.ts`          — kunci aplikasi (lock screen) & sesi login
+ * - `tunnel.ts`        — akun tunnel publik (Google + kcgcode-rp)
+ *
+ * Konvensi: `session_status_history` dan `messages` bersifat **append-only**
+ * (insert-only) sehingga Requirement 3.1/3.3 terpenuhi secara struktural.
+ * Seluruh operasi tulis dibungkus try/catch; kegagalan mengembalikan
+ * `{ ok: false, error }` tanpa menghapus data lama (Requirement 3.2).
+ */
+import { Database } from "bun:sqlite";
+import { mkdirSync } from "node:fs";
+import path from "node:path";
+import { DEFAULT_DB_PATH, resolveEffectiveDbPath } from "./paths";
+import { type AuthRepo, createAuthRepo } from "./server/db/auth";
+import { createMessageRepo, type MessageRepo } from "./server/db/messages";
+import { createProjectRepo, type ProjectRepo } from "./server/db/projects";
+import { createPromptRepo, type PromptRepo } from "./server/db/prompts";
+import { runMigrations } from "./server/db/schema";
+import { createSessionRepo, type SessionRepo, type StatusHistoryEntry } from "./server/db/sessions";
+import { createTunnelRepo, type TunnelRepo } from "./server/db/tunnel";
+import type { Result, SimpleResult } from "./server/result";
+import type {
+  InteractivePrompt,
+  Project,
+  PromptStatus,
+  Session,
+  SessionMessage,
+  SessionModel,
+  SessionStatus,
+} from "./types";
+
+export { DEFAULT_DB_PATH };
+
+export interface SessionStore extends AuthRepo, TunnelRepo {
+  // ---- Pesan terstruktur (append-only) ----
+  insertMessage(message: SessionMessage): Result<SessionMessage>;
+  getMessages(sessionId: string): Result<SessionMessage[]>;
+
+  // ---- Riwayat status (append-only) ----
+  insertStatusHistory(
+    sessionId: string,
+    status: SessionStatus,
+    changedAt?: number,
+  ): Result<StatusHistoryEntry>;
+  getStatusHistory(sessionId: string): Result<StatusHistoryEntry[]>;
+
+  // ---- Sessions (CRUD) ----
+  insertSession(session: Session): Result<Session>;
+  updateSessionStatus(
+    sessionId: string,
+    status: SessionStatus,
+    changedAt?: number,
+  ): Result<Session>;
+  /** Perbarui ocSessionId tanpa mengubah status (dipakai resumeSession). */
+  updateSessionOcId(sessionId: string, ocSessionId: string | null): Result<Session>;
+  /** Perbarui model pilihan Session; `null` = kembali ke default opencode. */
+  updateSessionModel(sessionId: string, model: SessionModel | null): Result<Session>;
+  /** Perbarui agent (mode) pilihan Session; `null` = default opencode. */
+  updateSessionAgent(sessionId: string, agent: string | null): Result<Session>;
+  /** Simpan judul Session hasil generate opencode (SSE `session.updated`). */
+  updateSessionTitle(sessionId: string, title: string): Result<Session>;
+  getSession(sessionId: string): Result<Session>;
+  getSessionByOcId(ocSessionId: string): Result<Session>;
+  listSessions(): Session[];
+  /**
+   * Hapus Session beserta seluruh baris anaknya (messages, prompts,
+   * status history) dalam satu transaksi. `ok: false` bila tidak ada.
+   */
+  deleteSession(sessionId: string): SimpleResult;
+
+  // ---- Projects (CRUD) ----
+  insertProject(project: Project): Result<Project>;
+  getProjectById(id: string): Result<Project>;
+  getProjectByName(name: string): Result<Project>;
+  getProjectByPath(filePath: string): Result<Project>;
+  listProjects(): Project[];
+  /** Simpan custom instruction Project; `null` = hapus instruksi. */
+  updateProjectInstructions(projectId: string, instructions: string | null): Result<Project>;
+  /** Session milik satu Project (dipakai sebelum menghapus Project). */
+  listProjectSessions(projectId: string): Session[];
+  /**
+   * Hapus baris Project. Menolak (`PROJECT_HAS_SESSIONS`) bila masih ada
+   * Session yang menunjuk Project ini — Session harus dihapus lebih dulu
+   * lewat `SessionManager.deleteSession` agar sesi remote opencode dan
+   * lampirannya ikut dibersihkan, bukan ditinggal yatim.
+   */
+  deleteProject(projectId: string): SimpleResult;
+
+  // ---- Prompts (CRUD) ----
+  insertPrompt(prompt: InteractivePrompt): Result<InteractivePrompt>;
+  getPrompt(promptId: string): Result<InteractivePrompt>;
+  listPendingPrompts(sessionId: string): InteractivePrompt[];
+  updatePromptStatus(
+    promptId: string,
+    status: PromptStatus,
+    resolvedAt?: number,
+  ): Result<InteractivePrompt>;
+
+  close(): void;
+}
+
+/**
+ * Membuka koneksi ke database, menyalakan WAL, menjalankan migrasi
+ * idempoten, lalu menyatukan repository per-domain menjadi satu `SessionStore`.
+ * Default sesuai mode: dev `./data/kcg-code.sqlite`, cli `~/.kcgcode/data/...`.
+ */
+export function openSessionStore(dbPath?: string): SessionStore {
+  const resolvedPath = dbPath ?? resolveEffectiveDbPath();
+  if (resolvedPath !== ":memory:") {
+    mkdirSync(path.dirname(path.resolve(resolvedPath)), { recursive: true });
+  }
+  const db = new Database(resolvedPath, { create: true });
+  db.exec("PRAGMA journal_mode = WAL;");
+  runMigrations(db);
+
+  const projects: ProjectRepo = createProjectRepo(db);
+  const sessions: SessionRepo = createSessionRepo(db);
+  const messages: MessageRepo = createMessageRepo(db);
+  const prompts: PromptRepo = createPromptRepo(db);
+  const auth: AuthRepo = createAuthRepo(db);
+  const tunnel: TunnelRepo = createTunnelRepo(db);
+
+  const store: SessionStore = {
+    ...projects,
+    ...sessions,
+    ...messages,
+    ...prompts,
+    ...auth,
+    ...tunnel,
+    close() {
+      db.close();
+    },
+  };
+
+  return store;
+}

package/src/frontend.tsx

@@ -0,0 +1,51 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const elem = document.getElementById("root");
+if (!elem) {
+  throw new Error("Root element #root not found in index.html");
+}
+const app = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+// https://bun.com/docs/bundler/hot-reloading#import-meta-hot-data
+//
+// API HMR (`import.meta.hot`) hanya ada saat `bun --hot`; pada build produksi
+// Bun mengganti/menghilangkannya, jadi pola di bawah memakai guard literal
+// `if (import.meta.hot)` yang di-tree-shake bundler saat produksi — blok else
+// itulah yang tersisa di bundle produksi (createRoot sekali, tanpa HMR API).
+if (import.meta.hot) {
+  if (!import.meta.hot.data.root) {
+    import.meta.hot.data.root = createRoot(elem);
+  }
+  import.meta.hot.data.root.render(app);
+} else {
+  // Produksi: PWA_Shell (Requirement 8.1) — registrasi service worker & inject
+  // link manifest hanya di sini agar asset statis di-cache untuk instalasi PWA
+  // tanpa merusak HMR saat dev. Manifest di-inject runtime agar URL tetap
+  // `/manifest.json` (tidak di-rewrite bundler menjadi hashed asset), disajikan
+  // route server.
+  createRoot(elem).render(app);
+
+  const manifestLink = document.createElement("link");
+  manifestLink.rel = "manifest";
+  manifestLink.href = "/manifest.json";
+  document.head.appendChild(manifestLink);
+
+  if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/sw.js").catch(() => {
+      // Gagal registrasi SW tidak menghalangi aplikasi.
+    });
+  }
+}

package/src/hooks/__tests__/useMention.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Unit test logika murni referensi `@file` (src/hooks/useMention.ts).
+ *
+ * `bun test` tidak menyediakan DOM, sehingga yang diuji adalah
+ * `activeMention()` (deteksi token @query pada posisi kursor) dan
+ * `applyMention()` (substitusi token saat saran dipilih) — pola yang sama
+ * dengan test `useTheme.ts` / `useRouter.ts`.
+ */
+import { describe, expect, test } from "bun:test";
+import { activeMention, applyMention } from "../useMention";
+
+describe("activeMention", () => {
+  test("token @ aktif di akhir input", () => {
+    expect(activeMention("lihat @", 7)).toEqual({ query: "", start: 6, end: 7 });
+    expect(activeMention("lihat @sr", 9)).toEqual({ query: "sr", start: 6, end: 9 });
+  });
+
+  test("kursor di tengah token", () => {
+    // caret 6 pada "@src/app" -> token "@src/a"
+    expect(activeMention("@src/app", 6)).toEqual({ query: "src/a", start: 0, end: 6 });
+    // caret 8 -> token "@src/app"
+    expect(activeMention("@src/app", 8)).toEqual({ query: "src/app", start: 0, end: 8 });
+  });
+
+  test("bukan mention: tanpa @, @ tertutup spasi, atau kursor setelah spasi", () => {
+    expect(activeMention("halo", 4)).toBeNull();
+    expect(activeMention("@src done", 9)).toBeNull(); // spasi menutup token
+    expect(activeMention("a @ b", 5)).toBeNull();
+  });
+
+  test("@ yang menempel kata lain (email) bukan mention", () => {
+    expect(activeMention("user@mail", 9)).toBeNull();
+  });
+
+  test("spasi di dalam path menghentikan token", () => {
+    // kursor tepat sebelum spasi masih aktif
+    expect(activeMention("@src/ app", 5)).toEqual({ query: "src/", start: 0, end: 5 });
+    // setelah spasi -> tidak aktif
+    expect(activeMention("@src/ app", 9)).toBeNull();
+  });
+
+  test("properti — kursor di luar rentang wajar", () => {
+    expect(activeMention("abc", -1)).toBeNull();
+    expect(activeMention("abc", 10)).toBeNull();
+  });
+});
+
+describe("applyMention", () => {
+  test("mengganti token @query dengan @path di posisi tepat", () => {
+    const range = activeMention("lihat @sr", 9);
+    if (!range) throw new Error("range null");
+    expect(applyMention("lihat @sr", range, "src/App.tsx")).toBe("lihat @src/App.tsx");
+  });
+
+  test("menambah spasi penutup bila karakter berikut non-pemisah", () => {
+    // range.end = 8 tepat sebelum spasi? tidak — pakai teks tanpa spasi:
+    const t2 = "@src/app";
+    const range2 = activeMention(t2, 8);
+    if (!range2) throw new Error("range null");
+    expect(applyMention(t2, range2, "src/app.tsx")).toBe("@src/app.tsx");
+    // Suffix spasi terjadi bila token disusul karakter non-pemisah:
+    // "@sr|c x" (kursor di |, end=3) -> ganti "@sr" -> "@s/x.ts" + " c x".
+    const range = { query: "sr", start: 0, end: 3 };
+    expect(applyMention("@src x", range, "s/x.ts")).toBe("@s/x.ts c x");
+  });
+
+  test("tanpa spasi ekstra bila di akhir teks", () => {
+    const range = activeMention("@a", 2);
+    if (!range) throw new Error("range null");
+    expect(applyMention("@a", range, "a.ts")).toBe("@a.ts");
+  });
+
+  test("sisa teks setelah token tetap utuh", () => {
+    const text = "@sr dan sisa";
+    const range = activeMention(text, 3);
+    if (!range) throw new Error("range null");
+    expect(applyMention(text, range, "src/x.ts")).toBe("@src/x.ts dan sisa");
+  });
+});

package/src/hooks/__tests__/useResyncOnReconnect.test.ts

@@ -0,0 +1,128 @@
+/**
+ * Test `useResyncOnReconnect` di React sungguhan (tanpa DOM, renderer minimal
+ * dari `react-reconciler` — pola yang sama dengan `useSmoothText.react.test`).
+ */
+import { beforeEach, describe, expect, test } from "bun:test";
+import { act, createElement, StrictMode } from "react";
+import Reconciler from "react-reconciler";
+import { useResyncOnReconnect } from "../useResyncOnReconnect";
+import type { WsConnectionStatus } from "../useWebSocket";
+
+const g = globalThis as Record<string, unknown>;
+
+const reconciler = Reconciler({
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  createInstance: () => ({}),
+  createTextInstance: () => ({}),
+  appendInitialChild: () => {},
+  appendChild: () => {},
+  appendChildToContainer: () => {},
+  insertBefore: () => {},
+  insertInContainerBefore: () => {},
+  removeChild: () => {},
+  removeChildFromContainer: () => {},
+  commitTextUpdate: () => {},
+  commitUpdate: () => {},
+  finalizeInitialChildren: () => false,
+  shouldSetTextContent: () => false,
+  getRootHostContext: () => ({}),
+  getChildHostContext: () => ({}),
+  getPublicInstance: (i: unknown) => i,
+  prepareForCommit: () => null,
+  resetAfterCommit: () => {},
+  preparePortalMount: () => {},
+  clearContainer: () => {},
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  getCurrentUpdatePriority: () => 32,
+  setCurrentUpdatePriority: () => {},
+  resolveUpdatePriority: () => 32,
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  prepareScopeUpdate: () => {},
+  getInstanceFromScope: () => null,
+  detachDeletedInstance: () => {},
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  startSuspendingCommit: () => {},
+  suspendInstance: () => {},
+  waitForCommitToBeReady: () => null,
+  NotPendingTransition: null,
+  HostTransitionContext: { $$typeof: Symbol.for("react.context"), _currentValue: null },
+  resetFormInstance: () => {},
+  requestPostPaintCallback: () => {},
+  shouldAttemptEagerTransition: () => false,
+  trackSchedulerEvent: () => {},
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+});
+
+function mount() {
+  let calls = 0;
+  function Probe({ status }: { status: WsConnectionStatus }) {
+    useResyncOnReconnect(status, () => {
+      calls += 1;
+    });
+    return null;
+  }
+  const root = reconciler.createContainer(
+    {},
+    1,
+    null,
+    false,
+    null,
+    "",
+    () => {},
+    () => {},
+    () => {},
+    null,
+  );
+  const render = (status: WsConnectionStatus) =>
+    act(() => {
+      reconciler.updateContainer(
+        createElement(StrictMode, null, createElement(Probe, { status })),
+        root,
+        null,
+        null,
+      );
+    });
+  return { render, calls: () => calls };
+}
+
+beforeEach(() => {
+  g.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+describe("useResyncOnReconnect", () => {
+  test("koneksi pertama TIDAK memicu resync", () => {
+    const h = mount();
+    h.render("connecting");
+    h.render("connected");
+    expect(h.calls()).toBe(0);
+  });
+
+  test("tersambung ulang setelah putus -> resync sekali", () => {
+    const h = mount();
+    h.render("connecting");
+    h.render("connected");
+    h.render("reconnecting");
+    h.render("connected");
+    expect(h.calls()).toBe(1);
+    // Tetap terhubung -> tidak berulang.
+    h.render("connected");
+    expect(h.calls()).toBe(1);
+  });
+
+  test("setiap putus-sambung memicu resync", () => {
+    const h = mount();
+    h.render("connected");
+    for (let i = 0; i < 3; i++) {
+      h.render("reconnecting");
+      h.render("connected");
+    }
+    expect(h.calls()).toBe(3);
+  });
+});