kcg-code 0.0.0-stage → 0.2.0

package/src/hooks/useTheme.ts

@@ -0,0 +1,164 @@
+/**
+ * Hook tema (Requirement 8.2, 8.6).
+ *
+ * - Preferensi: `light`, `dark`, atau `system` (ikuti perangkat), disimpan di
+ *   `localStorage["kcg-theme"]`. Tanpa nilai tersimpan -> `system`.
+ * - Tema efektif diterapkan ke `<html>` (class `dark`, Requirement 8.6). Pada
+ *   `system`, perubahan tema OS diikuti langsung (media query listener).
+ * - State dibagi global (satu store modul) sehingga semua pemakai — footer
+ *   sidebar, header Session — selalu sinkron, termasuk antar tab (event
+ *   `storage`).
+ * - `toggleTheme()` tetap ada (Requirement 8.2): berpindah light <-> dark.
+ *
+ * Logika inti dipisah ke fungsi murni (`resolveTheme`, `resolveInitialTheme`,
+ * `applyTheme`, `nextTheme`, `getStoredTheme`, `getStoredPreference`) agar
+ * dapat diuji tanpa DOM (bun test).
+ */
+import { useCallback, useSyncExternalStore } from "react";
+
+export type Theme = "light" | "dark";
+export type ThemePreference = Theme | "system";
+
+export const THEME_STORAGE_KEY = "kcg-theme";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+/** Minimal kontrak storage & root agar dapat di-mock pada unit test. */
+export interface ThemeStorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface ThemeRootLike {
+  classList: {
+    add(name: string): void;
+    remove(name: string): void;
+    toggle(name: string, force?: boolean): void;
+  };
+}
+
+// ------------------------------------------------------------ murni ----
+
+/** Tema selanjutnya saat toggle (Requirement 8.2). */
+export function nextTheme(theme: Theme): Theme {
+  return theme === "dark" ? "light" : "dark";
+}
+
+/** Baca tema eksplisit tersimpan, atau null bila belum ada / `system` / tak dikenal. */
+export function getStoredTheme(storage: ThemeStorageLike): Theme | null {
+  const value = storage.getItem(THEME_STORAGE_KEY);
+  return value === "dark" || value === "light" ? value : null;
+}
+
+/** Preferensi tersimpan; kosong / tak dikenal -> `system`. */
+export function getStoredPreference(storage: ThemeStorageLike): ThemePreference {
+  const value = storage.getItem(THEME_STORAGE_KEY);
+  return value === "dark" || value === "light" || value === "system" ? value : "system";
+}
+
+/** Tema efektif dari preferensi. */
+export function resolveTheme(pref: ThemePreference, prefersDark: () => boolean): Theme {
+  if (pref === "system") return prefersDark() ? "dark" : "light";
+  return pref;
+}
+
+/**
+ * Tema awal: preferensi tersimpan; bila tidak ada, fallback ke preferensi
+ * sistem (`prefers-color-scheme: dark`), lalu light.
+ */
+export function resolveInitialTheme(stored: string | null, prefersDark: () => boolean): Theme {
+  if (stored === "dark" || stored === "light") return stored;
+  return prefersDark() ? "dark" : "light";
+}
+
+/** Terapkan tema ke elemen root (`classList.toggle("dark", ...)`, Requirement 8.6). */
+export function applyTheme(root: ThemeRootLike, theme: Theme): void {
+  root.classList.toggle("dark", theme === "dark");
+}
+
+// ---------------------------------------------------- store global ----
+
+interface ThemeState {
+  preference: ThemePreference;
+  theme: Theme;
+}
+
+const hasDom = typeof window !== "undefined" && typeof document !== "undefined";
+const media = hasDom ? window.matchMedia?.(DARK_QUERY) : undefined;
+const systemDark = () => Boolean(media?.matches);
+
+function readStorage(): ThemePreference {
+  try {
+    return typeof localStorage !== "undefined" ? getStoredPreference(localStorage) : "system";
+  } catch {
+    return "system";
+  }
+}
+
+let state: ThemeState = (() => {
+  const preference = readStorage();
+  return { preference, theme: resolveTheme(preference, systemDark) };
+})();
+const listeners = new Set<() => void>();
+
+function commit(preference: ThemePreference, persist: boolean): void {
+  const next: ThemeState = { preference, theme: resolveTheme(preference, systemDark) };
+  if (hasDom) applyTheme(document.documentElement, next.theme);
+  if (persist) {
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, preference);
+    } catch {
+      // Storage tidak tersedia — preferensi hanya berlaku di sesi ini.
+    }
+  }
+  if (next.preference === state.preference && next.theme === state.theme) return;
+  state = next;
+  for (const l of listeners) l();
+}
+
+if (hasDom) {
+  applyTheme(document.documentElement, state.theme);
+  // OS berganti tema -> ikuti bila preferensi `system`.
+  media?.addEventListener?.("change", () => {
+    if (state.preference === "system") commit("system", false);
+  });
+  // Tab lain mengubah preferensi -> sinkronkan.
+  window.addEventListener("storage", (e) => {
+    if (e.key === THEME_STORAGE_KEY) commit(readStorage(), false);
+  });
+}
+
+export function setThemePreference(preference: ThemePreference): void {
+  commit(preference, true);
+}
+
+function subscribe(l: () => void): () => void {
+  listeners.add(l);
+  return () => listeners.delete(l);
+}
+
+function snapshot(): ThemeState {
+  return state;
+}
+
+// ------------------------------------------------------------ hook ----
+
+export interface UseThemeResult {
+  /** Tema efektif yang sedang tampil. */
+  theme: Theme;
+  /** Pilihan pengguna (termasuk `system`). */
+  preference: ThemePreference;
+  setPreference(pref: ThemePreference): void;
+  /** Light <-> dark (keluar dari `system`). */
+  toggleTheme(): void;
+}
+
+export function useTheme(): UseThemeResult {
+  const current = useSyncExternalStore(subscribe, snapshot, snapshot);
+  const toggleTheme = useCallback(() => setThemePreference(nextTheme(state.theme)), []);
+  return {
+    theme: current.theme,
+    preference: current.preference,
+    setPreference: setThemePreference,
+    toggleTheme,
+  };
+}

package/src/hooks/useWebSocket.ts

@@ -0,0 +1,196 @@
+/**
+ * Hook WebSocket Client (task 22.3).
+ *
+ * Mengelola koneksi ke `/ws` server KCG Code:
+ * - `attach(sessionId)` membuka koneksi (bila perlu) dan mengirim pesan
+ *   `attach` — setelah reconnect otomatis, `attach` dikirim ulang agar riwayat
+ *   tersinkronisasi (Requirement 4.1).
+ * - Reconnect otomatis dengan jeda konfigurabel saat koneksi putus tak terduga;
+ *   `disconnect()` menutup koneksi secara manual tanpa reconnect.
+ * - Pesan masuk (`history`, `output`, `prompt`, `prompt_resolved`,
+ *   `session_status`, `error`) diteruskan ke `onMessage` sesuai `ws-protocol.ts`.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { markLocked, refreshAuth } from "@/lib/auth";
+import type { ClientMessage, ServerMessage } from "../ws-protocol";
+
+/** Kode close server: sesi login dicabut / terkunci (lihat `app.ts`). */
+const WS_CLOSE_LOCKED = 4401;
+
+export type WsConnectionStatus = "idle" | "connecting" | "connected" | "reconnecting" | "closed";
+
+export interface UseWebSocketOptions {
+  /** URL WebSocket; default: `ws(s)://<host>/ws`. */
+  url?: string;
+  /** Dipanggil untuk setiap pesan Server -> Client. */
+  onMessage?: (msg: ServerMessage) => void;
+  /** Jeda reconnect setelah koneksi putus tak terduga (ms). */
+  reconnectDelayMs?: number;
+}
+
+export interface UseWebSocketResult {
+  status: WsConnectionStatus;
+  /** Buka/reattach ke Session (kirim pesan `attach`). */
+  attach(sessionId: string): void;
+  /**
+   * Kirim pesan Client -> Server sesuai protokol ws-protocol.ts.
+   * `false` bila socket belum/tidak terbuka (pesan tidak terkirim).
+   */
+  send(msg: ClientMessage): boolean;
+  /** Tutup koneksi secara manual (tanpa reconnect otomatis). */
+  disconnect(): void;
+}
+
+function defaultWsUrl(): string | null {
+  if (typeof location === "undefined") return null;
+  const proto = location.protocol === "https:" ? "wss" : "ws";
+  return `${proto}://${location.host}/ws`;
+}
+
+export function useWebSocket(opts: UseWebSocketOptions = {}): UseWebSocketResult {
+  const { onMessage, reconnectDelayMs = 1500, url } = opts;
+  const [status, setStatus] = useState<WsConnectionStatus>("idle");
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const sessionRef = useRef<string | null>(null);
+  const manualRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  /** Socket saat ini sempat terbuka (membedakan putus vs upgrade ditolak). */
+  const openedRef = useRef(false);
+  /** Kegagalan membuka koneksi beruntun. */
+  const failuresRef = useRef(0);
+  const onMessageRef = useRef(onMessage);
+  onMessageRef.current = onMessage;
+
+  const buildUrl = useCallback(() => url ?? defaultWsUrl(), [url]);
+
+  const open = useCallback(() => {
+    if (wsRef.current) return;
+    const target = buildUrl();
+    if (!target) return;
+
+    manualRef.current = false;
+    setStatus("connecting");
+    const ws = new WebSocket(target);
+    wsRef.current = ws;
+
+    // Handler socket lama diabaikan: `disconnect()` + `attach()` beruntun
+    // (mis. StrictMode / remount) membuat socket baru sebelum `close` socket
+    // lama tiba. Tanpa guard ini `onclose` lama menimpa `wsRef` socket baru
+    // dengan null sehingga `send()` diam-diam membuang pesan.
+    ws.onopen = () => {
+      if (wsRef.current !== ws) return;
+      openedRef.current = true;
+      failuresRef.current = 0;
+      setStatus("connected");
+      // Re-attach otomatis setelah reconnect (Requirement 4.1). `!== null`
+      // (bukan truthy) agar mode daftar (`attach("")`) ikut dikirim ulang.
+      const sid = sessionRef.current;
+      if (sid !== null)
+        ws.send(JSON.stringify({ type: "attach", sessionId: sid } satisfies ClientMessage));
+    };
+    ws.onmessage = (event) => {
+      if (wsRef.current !== ws) return;
+      try {
+        const msg = JSON.parse(String(event.data)) as ServerMessage;
+        onMessageRef.current?.(msg);
+      } catch {
+        // Abaikan frame yang bukan JSON valid.
+      }
+    };
+    ws.onerror = () => {
+      // Penanganan dilakukan di onclose.
+    };
+    ws.onclose = (event) => {
+      if (wsRef.current !== ws) return;
+      wsRef.current = null;
+      if (manualRef.current) {
+        setStatus("closed");
+        return;
+      }
+      // Server menutup karena sesi MILIK SOCKET INI berakhir. Itu belum tentu
+      // berarti perangkat terkunci: setelah ganti kunci, sesi lama dicabut
+      // tapi cookie sudah berisi sesi baru. Cek ke server dulu — terkunci ->
+      // lock screen; masih valid -> sambung ulang dengan cookie baru.
+      if (event.code === WS_CLOSE_LOCKED) {
+        setStatus("reconnecting");
+        void refreshAuth().then((st) => {
+          if (manualRef.current) return;
+          if (st?.protected && !st.authenticated) {
+            manualRef.current = true;
+            setStatus("closed");
+            markLocked();
+            return;
+          }
+          open();
+        });
+        return;
+      }
+      // Upgrade ditolak (401) tampak sebagai putus biasa di browser; cek
+      // status kunci agar tidak reconnect tanpa akhir saat terkunci.
+      if (!openedRef.current) {
+        failuresRef.current += 1;
+        if (failuresRef.current >= 2) {
+          void refreshAuth().then((st) => {
+            if (st?.protected && !st.authenticated) {
+              manualRef.current = true;
+              setStatus("closed");
+              markLocked();
+            }
+          });
+        }
+      }
+      openedRef.current = false;
+      setStatus("reconnecting");
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        open();
+      }, reconnectDelayMs);
+    };
+  }, [buildUrl, reconnectDelayMs]);
+
+  const send = useCallback((msg: ClientMessage): boolean => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(JSON.stringify(msg));
+    return true;
+  }, []);
+
+  const attach = useCallback(
+    (sessionId: string) => {
+      sessionRef.current = sessionId;
+      if (!wsRef.current) {
+        open();
+        return;
+      }
+      if (wsRef.current.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: "attach", sessionId } satisfies ClientMessage));
+      }
+      // Bila masih connecting, onopen akan mengirim attach otomatis.
+    },
+    [open],
+  );
+
+  const disconnect = useCallback(() => {
+    manualRef.current = true;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    wsRef.current?.close();
+    wsRef.current = null;
+    setStatus("closed");
+  }, []);
+
+  // Bersihkan koneksi & timer saat komponen unmount.
+  useEffect(() => {
+    return () => {
+      manualRef.current = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, []);
+
+  return { status, attach, send, disconnect };
+}

package/src/index.css

@@ -0,0 +1,27 @@
+@import "../styles/globals.css";
+
+@layer base {
+  :root {
+    @apply font-sans;
+  }
+
+  html {
+    @apply overflow-x-hidden;
+  }
+
+  /* Tanpa display: grid — auto track grid mengikuti max-content item
+     terlebar sehingga di layar HP seluruh halaman ikut selebar konten
+     terlebar lalu terpotong (overflow horizontal 414px -> 465px pada bug
+     #25.1). Shell app sudah h-dvh w-full, jadi body cukup block biasa. */
+  body {
+    @apply block relative m-0 min-h-screen min-w-[320px] bg-background text-foreground overflow-x-hidden;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  *,
+  ::before,
+  ::after {
+    animation: none !important;
+  }
+}

package/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./logo.svg" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>KCG Code</title>
+    <script type="module" src="./frontend.tsx" async></script>
+  </head>
+  <body class="font-sans">
+    <div id="root"></div>
+  </body>
+</html>

package/src/index.ts

@@ -0,0 +1,49 @@
+/**
+ * KCG Code — entry server dev (`bun dev` / `bun start`).
+ *
+ * Mode runtime default `dev`: config prioritaskan `./kcg-code.config.json`,
+ * data di `./data/`, HMR aktif. Binary global `kcgcode` memanggil
+ * `setRunMode("cli")` di `bin/kcgcode.ts` (data di `~/.kcgcode`).
+ *
+ * Wiring `Bun.serve` diimplementasikan di `src/server/app.ts`
+ * (`createKcgServer`) agar dapat diuji secara e2e (task 20.2). File ini:
+ * - mendaftarkan rute halaman yang menyajikan shell SPA (`index.html`)
+ *   secara eksplisit — `spaPaths` di bawah, pola yang sama dengan daftar
+ *   rute SPA di entry kcgcode; path lain di luar daftar mengembalikan 404
+ *   (bukan catch-all seperti sebelumnya),
+ * - memulai server,
+ * - mendaftarkan handler shutdown SIGINT/SIGTERM yang menyimpan status
+ *   Session `running` dalam anggaran 5 detik sebelum berhenti (Req 2.3).
+ */
+import index from "./index.html";
+import { setRunMode } from "./runtime";
+import { createKcgServer } from "./server/app";
+
+// Entry ini = development di repo. (CLI global men-set "cli" di bin/.)
+setRunMode("dev");
+
+if (import.meta.main) {
+  const app = createKcgServer({
+    spa: index,
+    // Rute halaman SPA: `/`, `/projects/:projectId`, dan Session view
+    // (`/projects/:projectId/sessions/:sessionId` — tercakup wildcard).
+    spaPaths: ["/", "/projects", "/projects/*", "/skills", "/settings", "/settings/*"],
+  });
+  console.log(`🚀 KCG Code berjalan di ${app.server.url}`);
+
+  let shuttingDown = false;
+  async function shutdown(signal: string): Promise<void> {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    console.log(`\n${signal} diterima — menyimpan status Session lalu menghentikan server...`);
+    try {
+      await app.close();
+    } catch (err) {
+      console.error("Error saat shutdown:", err);
+    }
+    process.exit(0);
+  }
+
+  process.on("SIGINT", () => void shutdown("SIGINT"));
+  process.on("SIGTERM", () => void shutdown("SIGTERM"));
+}

package/src/lib/__tests__/attachments.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from "bun:test";
+import {
+  attachmentKind,
+  fileExtension,
+  formatBytes,
+  modelFacingMime,
+  normalizeMime,
+} from "../attachments";
+
+describe("attachmentKind", () => {
+  test("gambar umum & PDF dikenali dari mime", () => {
+    expect(attachmentKind("image/png", "a.png")).toBe("image");
+    expect(attachmentKind("image/webp", "a.webp")).toBe("image");
+    expect(attachmentKind("application/pdf", "doc.pdf")).toBe("pdf");
+  });
+
+  test("file kode dikenali dari ekstensi walau mime salah / kosong", () => {
+    expect(attachmentKind("video/mp2t", "main.ts")).toBe("text");
+    expect(attachmentKind("", "lib.rs")).toBe("text");
+    expect(attachmentKind("", "Dockerfile")).toBe("text");
+    expect(attachmentKind("application/json", "data")).toBe("text");
+    expect(attachmentKind("text/csv", "x.csv")).toBe("text");
+  });
+
+  test("SVG diperlakukan teks, bukan gambar pratinjau", () => {
+    expect(attachmentKind("image/svg+xml", "logo.svg")).toBe("text");
+  });
+
+  test("lainnya biner", () => {
+    expect(attachmentKind("application/zip", "a.zip")).toBe("binary");
+    expect(attachmentKind("image/heic", "p.heic")).toBe("binary");
+    expect(attachmentKind("", "blob")).toBe("binary");
+  });
+});
+
+describe("modelFacingMime", () => {
+  test("teks dikirim sebagai text/plain, biner tidak dikirim", () => {
+    expect(modelFacingMime("text/csv", "x.csv")).toBe("text/plain");
+    expect(modelFacingMime("image/png", "a.png")).toBe("image/png");
+    expect(modelFacingMime("application/pdf", "a.pdf")).toBe("application/pdf");
+    expect(modelFacingMime("application/zip", "a.zip")).toBeNull();
+  });
+});
+
+test("normalizeMime menolak nilai yang bisa menyuntik header", () => {
+  expect(normalizeMime("Text/Plain")).toBe("text/plain");
+  expect(normalizeMime("")).toBe("application/octet-stream");
+  expect(normalizeMime("text/html\r\nx-evil: 1")).toBe("application/octet-stream");
+  expect(normalizeMime("text/plain; charset=utf-8")).toBe("application/octet-stream");
+});
+
+test("fileExtension & formatBytes", () => {
+  expect(fileExtension("a/b/c.TAR.GZ")).toBe("gz");
+  expect(fileExtension(".env")).toBe("");
+  expect(formatBytes(512)).toBe("512 B");
+  expect(formatBytes(1536)).toBe("1.5 KB");
+  expect(formatBytes(20 * 1024 * 1024)).toBe("20 MB");
+});

package/src/lib/__tests__/avatar-presets.test.ts

@@ -0,0 +1,25 @@
+/**
+ * Katalog avatar bawaan: setiap id preset (dipakai server) wajib punya
+ * pemetaan ikon di FE, dan sebaliknya.
+ */
+import { describe, expect, test } from "bun:test";
+import { AVATAR_PRESETS } from "@/components/auth/avatar-icons";
+import { AVATAR_PRESET_IDS, isAvatarPresetId } from "../avatar-presets";
+
+describe("avatar presets", () => {
+  test("id server == pemetaan ikon FE", () => {
+    expect(Object.keys(AVATAR_PRESETS).sort()).toEqual([...AVATAR_PRESET_IDS].sort());
+    for (const id of AVATAR_PRESET_IDS) {
+      expect(typeof AVATAR_PRESETS[id].Icon).toBe("object");
+      expect(AVATAR_PRESETS[id].label.length).toBeGreaterThan(0);
+    }
+  });
+
+  test("isAvatarPresetId hanya menerima id katalog", () => {
+    expect(isAvatarPresetId("cat")).toBe(true);
+    expect(isAvatarPresetId("Cat")).toBe(false);
+    expect(isAvatarPresetId("../x")).toBe(false);
+    expect(isAvatarPresetId(1)).toBe(false);
+    expect(new Set(AVATAR_PRESET_IDS).size).toBe(AVATAR_PRESET_IDS.length);
+  });
+});

package/src/lib/__tests__/collapsible.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Property test collapsible thinking block (task 24.8).
+ *
+ * // Feature: kcg-code, Property 25: Toggle collapsible thinking independen antar pesan
+ * // Validates: Requirements 8.3
+ *
+ * For any himpunan pesan dan sembarang urutan aksi toggle collapsible pada
+ * masing-masing pesan, status tampil/tersembunyi setiap pesan setelah seluruh
+ * aksi = hasil XOR paritas jumlah toggle yang diterapkan pada pesan itu
+ * sendiri terhadap nilai default `true` (expanded), dan tidak terpengaruh
+ * oleh toggle pada pesan lain.
+ */
+import { describe, expect, test } from "bun:test";
+import fc from "fast-check";
+
+import {
+  extendCollapsed,
+  initialCollapsedState,
+  initialCollapsibleState,
+  isCollapsibleExpanded,
+  toggleCollapsible,
+} from "@/lib/collapsible";
+
+describe("collapsible-state — Property 25", () => {
+  // Feature: kcg-code, Property 25: Toggle collapsible thinking independen antar pesan
+  test("toggle independen antar pesan terhadap default expanded (Req 8.3)", () => {
+    fc.assert(
+      fc.property(
+        // Himpunan identitas pesan unik.
+        fc.uniqueArray(fc.string({ maxLength: 12 }), { maxLength: 10 }),
+        // Sembarang urutan aksi: indeks pesan yang di-toggle (boleh acak/berulang).
+        fc.array(fc.nat({ max: 30 }), { maxLength: 80 }),
+        (ids, idxActions) => {
+          let state = initialCollapsibleState(ids);
+          const toggles = new Map<string, number>();
+
+          for (const idx of idxActions) {
+            if (ids.length === 0) break;
+            const id = ids[idx % ids.length];
+            if (!id) continue;
+            state = toggleCollapsible(state, id);
+            toggles.set(id, (toggles.get(id) ?? 0) + 1);
+          }
+
+          // Status akhir tiap pesan hanya bergantung pada paritas toggle
+          // milik pesan itu sendiri terhadap default true (Req 8.3,
+          // Property 25) — tidak terpengaruh pesan lain.
+          for (const id of ids) {
+            const k = toggles.get(id) ?? 0;
+            expect(isCollapsibleExpanded(state, id)).toBe(k % 2 === 0);
+          }
+        },
+      ),
+      { numRuns: 100 },
+    );
+  });
+
+  test("pesan baru tanpa state eksplisit default expanded (Req 8.3)", () => {
+    const state = initialCollapsibleState(["a"]);
+    expect(isCollapsibleExpanded(state, "a")).toBe(true);
+    expect(isCollapsibleExpanded(state, "b")).toBe(true);
+  });
+
+  // Reason: render Thinking sekarang default collapsed (dibatasi tinggi),
+  // dapat di-expand per part — perilaku baru dari sesi headless.
+  test("initialCollapsedState: seluruh reasoning default tertutup", () => {
+    const state = initialCollapsedState(["m1:0", "m1:1"]);
+    expect(isCollapsibleExpanded(state, "m1:0")).toBe(false);
+    expect(isCollapsibleExpanded(state, "m1:1")).toBe(false);
+  });
+
+  test("extendCollapsed: key baru tertutup, key yang sudah ada dipertahankan", () => {
+    let state = initialCollapsedState(["m1:0"]);
+    state = toggleCollapsible(state, "m1:0"); // user expand m1:0
+    expect(isCollapsibleExpanded(state, "m1:0")).toBe(true);
+
+    // Pesan baru datang -> reasoning-nya collapsed; m1:0 tetap expanded.
+    state = extendCollapsed(state, ["m2:0", "m2:1"]);
+    expect(isCollapsibleExpanded(state, "m1:0")).toBe(true);
+    expect(isCollapsibleExpanded(state, "m2:0")).toBe(false);
+    expect(isCollapsibleExpanded(state, "m2:1")).toBe(false);
+    expect(isCollapsibleExpanded(state, "m3:0")).toBe(true); // tak dikenal -> default
+  });
+
+  test("extendCollapsed: daftar kosong tidak mengubah state", () => {
+    const state = initialCollapsedState(["a"]);
+    expect(extendCollapsed(state, [])).toBe(state);
+  });
+
+  test("urutan toggle sederhana membalik status pesan terkait saja", () => {
+    let state = initialCollapsibleState(["a", "b"]);
+    state = toggleCollapsible(state, "a");
+    expect(isCollapsibleExpanded(state, "a")).toBe(false);
+    expect(isCollapsibleExpanded(state, "b")).toBe(true);
+
+    state = toggleCollapsible(state, "b");
+    state = toggleCollapsible(state, "b");
+    expect(isCollapsibleExpanded(state, "b")).toBe(true);
+    expect(isCollapsibleExpanded(state, "a")).toBe(false);
+  });
+});