kcg-code 0.0.0-stage → 0.1.0

package/src/hooks/__tests__/useSmoothText.react.test.ts

@@ -0,0 +1,194 @@
+/**
+ * Test perilaku `useSmoothText` di React SUNGGUHAN (StrictMode), tanpa DOM.
+ *
+ * Renderer minimal dibangun dari `react-reconciler` (sudah terpasang sebagai
+ * dependensi transitif) — cukup untuk menjalankan hook, effect, dan
+ * StrictMode (effect dipasang -> dibongkar -> dipasang ulang). rAF diganti
+ * antrean manual agar frame bisa "dijalankan" deterministik.
+ *
+ * Regresi yang dijaga: di StrictMode loop rAF pernah mati setelah remount
+ * simulasi, sehingga teks baru muncul sekaligus saat streaming selesai.
+ */
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, createElement, StrictMode } from "react";
+import Reconciler from "react-reconciler";
+import { useSmoothText } from "../useSmoothText";
+
+// ---- rAF palsu ----------------------------------------------------------
+let rafQueue = new Map<number, FrameRequestCallback>();
+let rafId = 0;
+let now = 0;
+const g = globalThis as Record<string, unknown>;
+const saved = {
+  raf: g.requestAnimationFrame,
+  caf: g.cancelAnimationFrame,
+  win: g.window,
+  actEnv: g.IS_REACT_ACT_ENVIRONMENT,
+};
+
+function runFrames(n: number, dt = 16) {
+  for (let i = 0; i < n; i++) {
+    now += dt;
+    const batch = rafQueue;
+    rafQueue = new Map();
+    act(() => {
+      for (const cb of batch.values()) cb(now);
+    });
+  }
+}
+
+beforeEach(() => {
+  rafQueue = new Map();
+  rafId = 0;
+  now = 0;
+  g.requestAnimationFrame = (cb: FrameRequestCallback) => {
+    rafId += 1;
+    rafQueue.set(rafId, cb);
+    return rafId;
+  };
+  g.cancelAnimationFrame = (id: number) => {
+    rafQueue.delete(id);
+  };
+  // `prefersReducedMotion` membaca window.matchMedia.
+  g.window = { matchMedia: () => ({ matches: false }) };
+  g.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  g.requestAnimationFrame = saved.raf;
+  g.cancelAnimationFrame = saved.caf;
+  g.window = saved.win;
+  g.IS_REACT_ACT_ENVIRONMENT = saved.actEnv;
+});
+
+// ---- renderer tanpa DOM ---------------------------------------------------
+/** Renderer "null": tidak membuat node apa pun, cukup menjalankan komponen. */
+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,
+} as never);
+
+function mount() {
+  let latest = "";
+  function Probe({ text, on }: { text: string; on: boolean }) {
+    latest = useSmoothText(text, on);
+    return null;
+  }
+  const root = (
+    reconciler as never as {
+      createContainer: (...a: unknown[]) => unknown;
+    }
+  ).createContainer(
+    {},
+    1,
+    null,
+    false,
+    null,
+    "",
+    () => {},
+    () => {},
+    () => {},
+    null,
+  );
+  const render = (text: string, on: boolean) =>
+    act(() => {
+      reconciler.updateContainer(
+        createElement(StrictMode, null, createElement(Probe, { text, on })),
+        root as never,
+        null,
+        null,
+      );
+    });
+  return { render, shown: () => latest };
+}
+
+describe("useSmoothText (StrictMode)", () => {
+  test("teks tampil bertahap SELAMA streaming, bukan sekaligus di akhir", () => {
+    const h = mount();
+    h.render("", true);
+    h.render("Kucing adalah hewan peliharaan yang sudah lama hidup bersama manusia.", true);
+
+    runFrames(3);
+    const partial = h.shown();
+    // Sudah mulai tampil, tapi belum semuanya -> benar-benar bertahap.
+    expect(partial.length).toBeGreaterThan(0);
+    expect(partial.length).toBeLessThan(70);
+
+    runFrames(200);
+    expect(h.shown()).toBe("Kucing adalah hewan peliharaan yang sudah lama hidup bersama manusia.");
+  });
+
+  test("delta baru yang tiba di tengah animasi ikut dikejar", () => {
+    const h = mount();
+    h.render("Halo", true);
+    runFrames(100);
+    expect(h.shown()).toBe("Halo");
+
+    h.render("Halo, apa kabar hari ini?", true);
+    runFrames(1);
+    expect(h.shown().length).toBeLessThan("Halo, apa kabar hari ini?".length);
+    runFrames(200);
+    expect(h.shown()).toBe("Halo, apa kabar hari ini?");
+  });
+
+  test("streaming selesai -> teks penuh seketika", () => {
+    const h = mount();
+    h.render("", true);
+    h.render("Jawaban panjang yang belum sempat tampil semua.", true);
+    runFrames(1);
+    h.render("Jawaban panjang yang belum sempat tampil semua.", false);
+    expect(h.shown()).toBe("Jawaban panjang yang belum sempat tampil semua.");
+  });
+
+  test("tidak streaming (riwayat) -> teks penuh tanpa animasi", () => {
+    const h = mount();
+    h.render("Pesan lama dari riwayat.", false);
+    expect(h.shown()).toBe("Pesan lama dari riwayat.");
+    expect(rafQueue.size).toBe(0);
+  });
+});

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

@@ -0,0 +1,61 @@
+/**
+ * Unit test laju penghalusan teks streaming (`nextSmoothLength`) — logika
+ * murni di balik `useSmoothText` (tanpa DOM / rAF).
+ */
+import { describe, expect, test } from "bun:test";
+import { nextSmoothLength } from "../useSmoothText";
+
+const FRAME = 16;
+
+describe("nextSmoothLength", () => {
+  test("selalu maju minimal satu karakter per frame", () => {
+    expect(nextSmoothLength(0, "abcdef", 1)).toBeGreaterThan(0);
+  });
+
+  test("tidak melewati panjang target", () => {
+    expect(nextSmoothLength(3, "abc", FRAME)).toBe(3);
+    expect(nextSmoothLength(0, "ab", 1000)).toBe(2);
+  });
+
+  test("antrean kecil: laju dasar (beberapa karakter per frame)", () => {
+    const text = "x".repeat(20);
+    const next = nextSmoothLength(0, text, FRAME);
+    expect(next).toBeGreaterThan(0);
+    expect(next).toBeLessThan(6);
+  });
+
+  test("antrean besar: laju naik agar tidak tertinggal", () => {
+    const text = "x".repeat(4000);
+    const small = nextSmoothLength(0, "x".repeat(20), FRAME);
+    const big = nextSmoothLength(0, text, FRAME);
+    expect(big).toBeGreaterThan(small * 5);
+  });
+
+  test("lonjakan besar: ~90% tampil dalam ~1 detik, tuntas dalam 3 detik", () => {
+    const text = "kata ".repeat(800); // 4000 karakter tiba sekaligus
+    let shown = 0;
+    let frames = 0;
+    let at90: number | null = null;
+    while (shown < text.length && frames < 1000) {
+      shown = nextSmoothLength(shown, text, FRAME);
+      frames++;
+      if (at90 === null && shown >= text.length * 0.9) at90 = frames * FRAME;
+    }
+    expect(shown).toBe(text.length);
+    expect(at90).not.toBeNull();
+    expect(at90 ?? Number.POSITIVE_INFINITY).toBeLessThan(1200);
+    expect(frames * FRAME).toBeLessThan(3000);
+  });
+
+  test("menempel ke batas kata bila dekat", () => {
+    const text = "halo dunia yang indah";
+    const next = nextSmoothLength(0, text, FRAME);
+    // Tidak berhenti di tengah kata "halo".
+    expect([" ", undefined]).toContain(text[next]);
+  });
+
+  test("lonjakan waktu (tab kembali aktif) dibatasi", () => {
+    const text = "x".repeat(20);
+    expect(nextSmoothLength(0, text, 10_000)).toBe(nextSmoothLength(0, text, 100));
+  });
+});

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

@@ -0,0 +1,118 @@
+/**
+ * Unit test persistensi tema (task 22.2, Requirement 8.2 & 8.6).
+ *
+ * `bun test` tidak menyediakan DOM, sehingga hook diuji lewat fungsi murni
+ * (`resolveInitialTheme`, `applyTheme`, `nextTheme`, `getStoredTheme`) dengan
+ * mock `localStorage` (`ThemeStorageLike`) dan root `<html>` (`ThemeRootLike`)
+ * yang meniru urutan operasi yang dijalankan hook saat mount/toggle/remount.
+ */
+import { expect, test } from "bun:test";
+import {
+  applyTheme,
+  getStoredPreference,
+  getStoredTheme,
+  nextTheme,
+  resolveInitialTheme,
+  resolveTheme,
+  THEME_STORAGE_KEY,
+  type ThemeRootLike,
+  type ThemeStorageLike,
+} from "../useTheme";
+
+function makeStorage(initial: Record<string, string> = {}): ThemeStorageLike {
+  const map = new Map(Object.entries(initial));
+  return {
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => void map.set(key, value),
+  };
+}
+
+interface MockRoot extends ThemeRootLike {
+  dark: boolean;
+}
+
+function makeRoot(): MockRoot {
+  const root: MockRoot = {
+    dark: false,
+    classList: {
+      add: (name) => {
+        if (name === "dark") root.dark = true;
+      },
+      remove: (name) => {
+        if (name === "dark") root.dark = false;
+      },
+      toggle: (name, force) => {
+        if (name === "dark") root.dark = force ?? !root.dark;
+      },
+    },
+  };
+  return root;
+}
+
+test("22.2 (8.2): toggle mengubah tema saat ini + disimpan", () => {
+  const storage = makeStorage();
+  const root = makeRoot();
+
+  // Simulasi mount pertama: tanpa preferensi & sistem light -> light.
+  let theme = resolveInitialTheme(storage.getItem(THEME_STORAGE_KEY), () => false);
+  applyTheme(root, theme);
+  storage.setItem(THEME_STORAGE_KEY, theme);
+  expect(theme).toBe("light");
+  expect(root.dark).toBe(false);
+
+  // Toggle -> dark, class `dark` terpasang, preferensi tersimpan (8.2).
+  theme = nextTheme(theme);
+  applyTheme(root, theme);
+  storage.setItem(THEME_STORAGE_KEY, theme);
+  expect(theme).toBe("dark");
+  expect(root.dark).toBe(true);
+  expect(storage.getItem(THEME_STORAGE_KEY)).toBe("dark");
+
+  // Toggle lagi -> kembali light.
+  theme = nextTheme(theme);
+  applyTheme(root, theme);
+  expect(theme).toBe("light");
+  expect(root.dark).toBe(false);
+});
+
+test("22.2 (8.6): remount dengan preferensi tersimpan menerapkan dark otomatis", () => {
+  // Sesi sebelumnya mengaktifkan dark mode -> tersimpan di localStorage.
+  const storage = makeStorage({ [THEME_STORAGE_KEY]: "dark" });
+  const root = makeRoot();
+
+  // Simulasi mount ulang: tema awal dibaca dari preferensi tersimpan (8.6).
+  const theme = resolveInitialTheme(storage.getItem(THEME_STORAGE_KEY), () => false);
+  applyTheme(root, theme);
+  expect(theme).toBe("dark");
+  expect(root.dark).toBe(true);
+});
+
+test("22.2: tanpa preferensi -> mengikuti preferensi sistem", () => {
+  expect(resolveInitialTheme(null, () => true)).toBe("dark");
+  expect(resolveInitialTheme(null, () => false)).toBe("light");
+  // Preferensi tersimpan lebih diutamakan daripada preferensi sistem.
+  expect(resolveInitialTheme("light", () => true)).toBe("light");
+  expect(resolveInitialTheme("dark", () => false)).toBe("dark");
+});
+
+test("22.2: getStoredTheme hanya mengenali nilai valid", () => {
+  expect(getStoredTheme(makeStorage({ [THEME_STORAGE_KEY]: "dark" }))).toBe("dark");
+  expect(getStoredTheme(makeStorage({ [THEME_STORAGE_KEY]: "light" }))).toBe("light");
+  expect(getStoredTheme(makeStorage({ [THEME_STORAGE_KEY]: "bogus" }))).toBeNull();
+  expect(getStoredTheme(makeStorage())).toBeNull();
+});
+
+test("preferensi 'system' mengikuti sistem; 'light'/'dark' tetap", () => {
+  expect(resolveTheme("system", () => true)).toBe("dark");
+  expect(resolveTheme("system", () => false)).toBe("light");
+  expect(resolveTheme("light", () => true)).toBe("light");
+  expect(resolveTheme("dark", () => false)).toBe("dark");
+});
+
+test("getStoredPreference: nilai valid; kosong/tak dikenal -> system", () => {
+  expect(getStoredPreference(makeStorage({ [THEME_STORAGE_KEY]: "dark" }))).toBe("dark");
+  expect(getStoredPreference(makeStorage({ [THEME_STORAGE_KEY]: "light" }))).toBe("light");
+  expect(getStoredPreference(makeStorage({ [THEME_STORAGE_KEY]: "system" }))).toBe("system");
+  expect(getStoredPreference(makeStorage({ [THEME_STORAGE_KEY]: "bogus" }))).toBe("system");
+  expect(getStoredPreference(makeStorage())).toBe("system");
+});

package/src/hooks/use-mobile.ts

@@ -0,0 +1,16 @@
+/**
+ * Deteksi viewport di bawah breakpoint `md` (768px) untuk komponen shadcn
+ * `sidebar` — di bawah ambang ini sidebar dirender sebagai Sheet (off-canvas).
+ *
+ * Memakai `useMediaQuery` agar render pertama langsung benar (tanpa flash
+ * sidebar desktop di HP). Ambang sengaja `md`, bukan `sm` seperti
+ * `useIsMobile` di `useMediaQuery.ts`, karena kelas responsif di
+ * `components/ui/sidebar.tsx` memakai varian `md:`.
+ */
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  return useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+}

package/src/hooks/useAgentPicker.ts

@@ -0,0 +1,97 @@
+/**
+ * Logika bersama pemilih agent (mode) opencode: memuat daftar agent project
+ * (lazy, sekali per komponen) + mengirim perubahan agent Session.
+ *
+ * Dipakai oleh `AgentPicker` (trigger + popover di desktop) dan langsung oleh
+ * `SessionView` untuk daftar mode di Sheet aksi mobile — supaya tap satu mode
+ * di Sheet tidak perlu buka popover lagi di dalam popover.
+ */
+import { useCallback, useRef, useState } from "react";
+import { ApiError, apiFetch } from "@/lib/api";
+import type { AgentOption } from "@/server/services/opencode-client";
+
+export interface UseAgentPickerResult {
+  agents: AgentOption[] | null;
+  loading: boolean;
+  saving: boolean;
+  error: string | null;
+  /** Muat daftar agent project (no-op bila sudah dimuat / sedang memuat). */
+  load: () => void;
+  /** Ganti agent Session; `null` = kembali ke default opencode. */
+  pick: (name: string | null) => Promise<void>;
+}
+
+export function useAgentPicker(
+  projectId: string,
+  /** null = Session belum ada (composer homepage): pilihan tidak di-PUT. */
+  sessionId: string | null,
+  onChanged: (agent: string | null) => void,
+): UseAgentPickerResult {
+  const [agents, setAgents] = useState<AgentOption[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  /**
+   * Penanda fetch sedang berjalan — ref, BUKAN state `loading`. Bila `load`
+   * bergantung pada `loading`, identitasnya berganti tiap fetch selesai, dan
+   * efek pemanggil (`if (open) load()`) jalan lagi -> fetch tanpa henti
+   * (spinner berkedip terus).
+   */
+  const inFlight = useRef(false);
+  const saveInFlight = useRef(false);
+  /** Callback terbaru via ref — pemanggil sering mengoper arrow function inline. */
+  const onChangedRef = useRef(onChanged);
+  onChangedRef.current = onChanged;
+
+  /**
+   * Muat daftar agent project. Selalu fetch ulang (no-op bila sedang memuat)
+   * — config opencode bisa berubah dan server headless tidak hot-reload.
+   * Identitas stabil per `projectId`.
+   */
+  const load = useCallback(() => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const res = await apiFetch(`/api/projects/${projectId}/agents`);
+        const body = (await res.json()) as { agents: AgentOption[] };
+        setAgents(body.agents);
+      } catch (e) {
+        setError(e instanceof ApiError ? e.message : "Failed to load agent list");
+        setAgents([]);
+      } finally {
+        inFlight.current = false;
+        setLoading(false);
+      }
+    })();
+  }, [projectId]);
+
+  const pick = useCallback(
+    async (name: string | null) => {
+      if (saveInFlight.current) return;
+      saveInFlight.current = true;
+      setSaving(true);
+      setError(null);
+      try {
+        if (sessionId !== null) {
+          await apiFetch(`/api/sessions/${sessionId}`, {
+            method: "PUT",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ agent: name }),
+          });
+        }
+        onChangedRef.current(name);
+      } catch (e) {
+        setError(e instanceof ApiError ? e.message : "Failed to change agent");
+      } finally {
+        saveInFlight.current = false;
+        setSaving(false);
+      }
+    },
+    [sessionId],
+  );
+
+  return { agents, loading, saving, error, load, pick };
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,49 @@
+/**
+ * Deteksi viewport sempit (layar HP) untuk penyesuaian UI yang tidak bisa
+ * dilakukan lewat CSS saja — mis. memilih teks placeholder yang lebih pendek
+ * atau merender picker sebagai dialog penuh, bukan dropdown.
+ *
+ * Untuk perbedaan yang murni tampilan, tetap pakai varian Tailwind (`sm:`);
+ * hook ini hanya untuk keputusan di level JavaScript.
+ *
+ * Ambang 640px mengikuti breakpoint `sm` Tailwind agar konsisten dengan
+ * kelas responsif di komponen.
+ */
+
+import { useEffect, useState } from "react";
+
+/** Ambang lebar viewport "mobile" (px) — sinkron dengan breakpoint `sm`. */
+export const MOBILE_MAX_WIDTH = 639;
+
+/** Media query default: viewport lebih sempit dari breakpoint `sm`. */
+export const MOBILE_QUERY = `(max-width: ${MOBILE_MAX_WIDTH}px)`;
+
+/**
+ * `true` selama viewport cocok dengan `query`. Server-side / lingkungan tanpa
+ * `matchMedia` mengembalikan `false` (asumsi layar lebar) sehingga render
+ * pertama tidak pernah gagal.
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    // Sinkronkan sekali: `query` bisa berubah, atau viewport sudah bergeser
+    // antara render pertama dan efek ini berjalan.
+    setMatches(mql.matches);
+    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}
+
+/** Pintasan: viewport selebar HP (di bawah breakpoint `sm`). */
+export function useIsMobile(): boolean {
+  return useMediaQuery(MOBILE_QUERY);
+}