kcg-code 0.0.0-stage → 0.1.0

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);
+  });
+});

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

@@ -0,0 +1,118 @@
+/**
+ * Unit test placeholder composer (src/lib/composer.ts).
+ */
+import { describe, expect, test } from "bun:test";
+import { composerPlaceholder, extractMentionedFiles, splitComposerMentions } from "../composer";
+
+describe("composerPlaceholder", () => {
+  test("ada lampiran: ajakan singkat (tidak wrap di ruang yang menyempit)", () => {
+    for (const compact of [false, true]) {
+      expect(
+        composerPlaceholder({ busy: false, canInput: true, compact, hasAttachments: true }),
+      ).toBe("Add a message…");
+    }
+    // Status sibuk / Session mati tetap lebih penting.
+    expect(
+      composerPlaceholder({ busy: true, canInput: false, compact: false, hasAttachments: true }),
+    ).toBe("Model is responding…");
+  });
+
+  test("wide screen: full hint when input is ready", () => {
+    expect(composerPlaceholder({ busy: false, canInput: true, compact: false })).toBe(
+      "Type a message… type @ for file references, or drop files here",
+    );
+  });
+
+  test("narrow screen: short text to avoid truncation", () => {
+    expect(composerPlaceholder({ busy: false, canInput: true, compact: true })).toBe(
+      "Type a message…",
+    );
+  });
+
+  test("model responding: status outranks the typing hint", () => {
+    expect(composerPlaceholder({ busy: true, canInput: false, compact: false })).toBe(
+      "Model is responding…",
+    );
+    expect(composerPlaceholder({ busy: true, canInput: false, compact: true })).toBe("Responding…");
+  });
+
+  test("session down: same text at both sizes (already short)", () => {
+    expect(composerPlaceholder({ busy: false, canInput: false, compact: false })).toBe(
+      "Session is not active",
+    );
+    expect(composerPlaceholder({ busy: false, canInput: false, compact: true })).toBe(
+      "Session is not active",
+    );
+  });
+
+  test("busy is checked before canInput", () => {
+    // Unusual combination (busy + canInput) still reports the responding status.
+    expect(composerPlaceholder({ busy: true, canInput: true, compact: false })).toBe(
+      "Model is responding…",
+    );
+  });
+});
+
+describe("extractMentionedFiles", () => {
+  test("path yang pernah disarankan autocomplete ikut dikirim", () => {
+    const known = new Set(["src/index.ts"]);
+    expect(extractMentionedFiles("fix @src/index.ts", known)).toEqual(["src/index.ts"]);
+  });
+
+  test("path memuat / ikut dikirim walau tidak pernah disarankan", () => {
+    expect(extractMentionedFiles("lihat @a/b/c.ts dulu", new Set())).toEqual(["a/b/c.ts"]);
+  });
+
+  test("kata biasa dengan @ (mis. @user) TIDAK dikirim tanpa slash & tak dikenal", () => {
+    expect(extractMentionedFiles("halo @user apa kabar", new Set())).toEqual([]);
+    // Kecuali pernah disarankan autocomplete — baru dianggap file sungguhan.
+    expect(extractMentionedFiles("halo @user", new Set(["user"]))).toEqual(["user"]);
+  });
+
+  test("urutan & duplikat kemunculan dipertahankan", () => {
+    const known = new Set(["a.ts"]);
+    expect(extractMentionedFiles("@a.ts lalu @a.ts lagi", known)).toEqual(["a.ts", "a.ts"]);
+  });
+
+  test("tanpa teks atau tanpa @ -> kosong", () => {
+    expect(extractMentionedFiles("", new Set())).toEqual([]);
+    expect(extractMentionedFiles("tidak ada mention", new Set(["x.ts"]))).toEqual([]);
+  });
+});
+
+describe("splitComposerMentions", () => {
+  const known = new Set(["skills-lock.json"]);
+  const join = (segs: { text: string }[]) => segs.map((x) => x.text).join("");
+
+  test("memecah teks + mention yang dikenal", () => {
+    const text = "lalu apa yang ada pada file @skills-lock.json ya";
+    const segs = splitComposerMentions(text, known);
+    expect(segs).toEqual([
+      { kind: "text", text: "lalu apa yang ada pada file " },
+      { kind: "mention", text: "@skills-lock.json", path: "skills-lock.json" },
+      { kind: "text", text: " ya" },
+    ]);
+    expect(join(segs)).toBe(text);
+  });
+
+  test("path dengan / dianggap file walau belum disarankan", () => {
+    const segs = splitComposerMentions("@src/App.tsx dan @src/lib/x.ts", new Set());
+    expect(segs.filter((x) => x.kind === "mention").map((x) => x.text)).toEqual([
+      "@src/App.tsx",
+      "@src/lib/x.ts",
+    ]);
+  });
+
+  test("@kata biasa & email tidak disorot", () => {
+    const text = "halo @budi, email saya a@b.com";
+    const segs = splitComposerMentions(text, known);
+    expect(segs.every((x) => x.kind === "text")).toBe(true);
+    expect(join(segs)).toBe(text);
+  });
+
+  test("gabungan potongan selalu identik dengan input", () => {
+    for (const text of ["", "@", "@skills-lock.json", "\n@src/a.ts\n\nteks", "  @x/y  "]) {
+      expect(join(splitComposerMentions(text, known))).toBe(text);
+    }
+  });
+});

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

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "bun:test";
+import { highlightCode, resolveLang } from "../highlight";
+
+describe("resolveLang", () => {
+  test("nama kanonis, alias, prefix language-, huruf besar", () => {
+    expect(resolveLang("typescript")).toBe("typescript");
+    expect(resolveLang("ts")).toBe("typescript");
+    expect(resolveLang("language-tsx")).toBe("tsx");
+    expect(resolveLang("Bash")).toBe("shellscript");
+    expect(resolveLang("yml")).toBe("yaml");
+    expect(resolveLang("Dockerfile")).toBe("docker");
+  });
+
+  test("tak dikenal / kosong -> null (teks polos)", () => {
+    expect(resolveLang("brainfuck")).toBeNull();
+    expect(resolveLang("")).toBeNull();
+    expect(resolveLang(null)).toBeNull();
+  });
+});
+
+describe("highlightCode", () => {
+  test("token menyatu kembali persis jadi kode asli", async () => {
+    for (const code of ["const a = 1;\nlet b = 2", "x\n", "a\n\n  b\t c\n", ""]) {
+      const lines = await highlightCode(code, "typescript");
+      expect(lines).not.toBeNull();
+      const joined = (lines ?? []).map((l) => l.map((t) => t.content).join("")).join("\n");
+      expect(joined).toBe(code);
+    }
+  });
+
+  test("token membawa warna light & dark sebagai CSS variable", async () => {
+    const lines = await highlightCode("const x = 1", "typescript");
+    const kw = lines?.[0]?.find((t) => t.content === "const");
+    expect(kw?.style["--shiki-light"]).toMatch(/^#[0-9a-f]{6,8}$/i);
+    expect(kw?.style["--shiki-dark"]).toMatch(/^#[0-9a-f]{6,8}$/i);
+  });
+
+  test("bahasa lain dimuat lazy (python, bash)", async () => {
+    expect(await highlightCode("def f():\n  return 1", "python")).not.toBeNull();
+    expect(await highlightCode("echo $HOME | wc -l", "shellscript")).not.toBeNull();
+  });
+});