kcg-code 0.0.0-stage → 0.1.0

package/src/lib/attachments.ts

@@ -0,0 +1,203 @@
+/**
+ * Jenis lampiran upload — logika murni, dipakai server (routing ke model)
+ * maupun browser (thumbnail vs kartu file).
+ *
+ * Provider AI yang dibungkus opencode hanya menerima part `file` bermime
+ * `image/*` (format umum), `application/pdf`, dan `text/plain`. Mime lain
+ * (mis. `text/csv`, `application/json`) memicu error "functionality not
+ * supported" dan — karena part tersimpan di riwayat — merusak seluruh turn
+ * berikutnya. Karena itu:
+ * - gambar umum & PDF dikirim apa adanya,
+ * - file teks/kode dikirim ulang sebagai `text/plain` (opencode membacanya
+ *   lewat tool Read, sama seperti `@file`),
+ * - file biner lain TIDAK dikirim sebagai part; model hanya diberi tahu
+ *   path-nya agar bisa memakai tool bila perlu.
+ */
+
+/** Batas ukuran upload (byte) — mengikuti limit attachment opencode (20 MiB). */
+export const MAX_ATTACHMENT_BYTES = 20 * 1024 * 1024;
+
+/** Gambar yang bisa dipratinjau browser & diterima provider sebagai gambar. */
+const PREVIEWABLE_IMAGE_MIME = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+/** Ekstensi file teks/kode yang aman dibaca sebagai teks. */
+const TEXT_EXTENSIONS = new Set([
+  "txt",
+  "md",
+  "markdown",
+  "mdx",
+  "rst",
+  "log",
+  "csv",
+  "tsv",
+  "json",
+  "jsonc",
+  "json5",
+  "ndjson",
+  "yaml",
+  "yml",
+  "toml",
+  "ini",
+  "cfg",
+  "conf",
+  "env",
+  "xml",
+  "html",
+  "htm",
+  "css",
+  "scss",
+  "sass",
+  "less",
+  "svg",
+  "js",
+  "mjs",
+  "cjs",
+  "jsx",
+  "ts",
+  "mts",
+  "cts",
+  "tsx",
+  "vue",
+  "svelte",
+  "astro",
+  "py",
+  "rb",
+  "php",
+  "java",
+  "kt",
+  "kts",
+  "scala",
+  "go",
+  "rs",
+  "c",
+  "h",
+  "cc",
+  "cpp",
+  "hpp",
+  "cs",
+  "swift",
+  "m",
+  "dart",
+  "lua",
+  "pl",
+  "r",
+  "jl",
+  "ex",
+  "exs",
+  "erl",
+  "hs",
+  "clj",
+  "sql",
+  "graphql",
+  "gql",
+  "proto",
+  "sh",
+  "bash",
+  "zsh",
+  "fish",
+  "ps1",
+  "bat",
+  "dockerfile",
+  "makefile",
+  "gradle",
+  "tf",
+  "hcl",
+  "nix",
+  "lock",
+  "diff",
+  "patch",
+  "tex",
+  "bib",
+  "srt",
+  "vtt",
+]);
+
+/** Nama file tanpa ekstensi yang umum berisi teks. */
+const TEXT_BASENAMES = new Set(["dockerfile", "makefile", "readme", "license", "gemfile"]);
+
+export type AttachmentKind = "image" | "pdf" | "text" | "binary";
+
+/** Ekstensi huruf kecil (tanpa titik), "" bila tidak ada. */
+export function fileExtension(filename: string): string {
+  const base = filename.split(/[\\/]/).pop() ?? "";
+  const dot = base.lastIndexOf(".");
+  return dot > 0 ? base.slice(dot + 1).toLowerCase() : "";
+}
+
+function isTextMime(mime: string): boolean {
+  return (
+    mime.startsWith("text/") ||
+    mime === "application/json" ||
+    mime === "application/xml" ||
+    mime === "application/javascript" ||
+    mime === "application/x-sh" ||
+    mime === "application/sql" ||
+    mime === "application/yaml" ||
+    mime === "application/toml" ||
+    mime.endsWith("+json") ||
+    mime.endsWith("+xml")
+  );
+}
+
+/** Gambar yang boleh ditampilkan inline di browser (thumbnail / bubble). */
+export function isPreviewableImage(mime: string): boolean {
+  return PREVIEWABLE_IMAGE_MIME.has(mime);
+}
+
+/**
+ * Golongkan lampiran. Ekstensi dicek lebih dulu untuk file kode karena
+ * browser sering salah menebak mime-nya (mis. `.ts` jadi `video/mp2t`,
+ * `.rs` kosong).
+ */
+export function attachmentKind(mime: string, filename: string): AttachmentKind {
+  const m = mime.toLowerCase();
+  if (isPreviewableImage(m)) return "image";
+  if (m === "application/pdf") return "pdf";
+  const ext = fileExtension(filename);
+  const base = (filename.split(/[\\/]/).pop() ?? "").toLowerCase();
+  if (TEXT_EXTENSIONS.has(ext) || (ext === "" && TEXT_BASENAMES.has(base))) return "text";
+  if (isTextMime(m)) return "text";
+  return "binary";
+}
+
+/**
+ * Mime part `file` yang dikirim ke model, atau null bila file tidak boleh
+ * dikirim sebagai part (biner) — cukup dirujuk lewat path.
+ */
+export function modelFacingMime(mime: string, filename: string): string | null {
+  switch (attachmentKind(mime, filename)) {
+    case "image":
+      return mime.toLowerCase();
+    case "pdf":
+      return "application/pdf";
+    case "text":
+      return "text/plain";
+    default:
+      return null;
+  }
+}
+
+/**
+ * Mime yang disimpan server: hanya bentuk `type/subtype` sederhana yang
+ * diterima (header Content-Type tidak boleh bisa disuntik); lainnya jadi
+ * `application/octet-stream`.
+ */
+export function normalizeMime(mime: string): string {
+  const m = mime.trim().toLowerCase();
+  return /^[a-z0-9][a-z0-9!#$&^_.+-]{0,63}\/[a-z0-9][a-z0-9!#$&^_.+-]{0,127}$/.test(m)
+    ? m
+    : "application/octet-stream";
+}
+
+/** Ukuran file ramah baca (mis. "1.2 MB"). */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let v = bytes / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
+}

package/src/lib/auth.ts

@@ -0,0 +1,92 @@
+/**
+ * Store global kunci aplikasi (FE): status dari server + pemicu lock screen.
+ *
+ * - `refreshAuth()` memuat `GET /api/auth/status` (publik).
+ * - 401 `AUTH_REQUIRED` dari API mana pun -> `markLocked()` (lock screen
+ *   muncul tanpa reload; data di belakangnya tidak lagi bisa dimuat).
+ * - `lockNow()` = tombol Lock: hapus sesi di server lalu tampilkan lock screen.
+ * - Kunci otomatis ditegakkan SERVER (sesi idle kedaluwarsa); klien hanya
+ *   mengetahuinya lebih cepat lewat timer idle lokal + heartbeat.
+ */
+import { useSyncExternalStore } from "react";
+import { apiFetch, setAuthRequiredHandler } from "@/lib/api";
+import type { AuthStatus } from "@/server/services/auth";
+
+export type AuthState =
+  | { phase: "loading" }
+  /** Server tak terjangkau saat memuat status pertama kali. */
+  | { phase: "error" }
+  | { phase: "ready"; status: AuthStatus };
+
+let state: AuthState = { phase: "loading" };
+const listeners = new Set<() => void>();
+
+function set(next: AuthState): void {
+  state = next;
+  for (const l of listeners) l();
+}
+
+export async function refreshAuth(): Promise<AuthStatus | null> {
+  try {
+    const res = await fetch("/api/auth/status", { cache: "no-store" });
+    if (!res.ok) throw new Error(String(res.status));
+    const status = (await res.json()) as AuthStatus;
+    // Status sama persis -> jangan picu render ulang (heartbeat berkala).
+    if (state.phase !== "ready" || JSON.stringify(state.status) !== JSON.stringify(status)) {
+      set({ phase: "ready", status });
+    }
+    return status;
+  } catch {
+    if (state.phase === "loading") set({ phase: "error" });
+    return null;
+  }
+}
+
+/** Server menolak sesi (401) -> kunci UI segera, lalu sinkronkan status. */
+export function markLocked(): void {
+  if (state.phase === "ready" && state.status.protected && state.status.authenticated) {
+    set({ phase: "ready", status: { ...state.status, authenticated: false } });
+  }
+  void refreshAuth();
+}
+
+/** Tombol Lock: akhiri sesi perangkat ini. */
+export async function lockNow(): Promise<void> {
+  try {
+    await apiFetch("/api/auth/logout", { method: "POST" });
+  } catch {
+    // Sesi mungkin sudah tidak berlaku — tetap tampilkan lock screen.
+  }
+  markLocked();
+}
+
+setAuthRequiredHandler(markLocked);
+
+function subscribe(l: () => void): () => void {
+  listeners.add(l);
+  return () => listeners.delete(l);
+}
+
+function snapshot(): AuthState {
+  return state;
+}
+
+export function useAuth(): AuthState {
+  return useSyncExternalStore(subscribe, snapshot, snapshot);
+}
+
+/** Label jenis kunci untuk UI. */
+export function lockLabel(kind: "pin" | "password"): string {
+  return kind === "pin" ? "PIN" : "password";
+}
+
+/** Inisial nickname untuk avatar pengganti ("Irsyad Ibad" -> "II"). */
+export function initialsOf(nickname: string | null): string {
+  if (!nickname) return "";
+  const words = nickname.trim().split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? [words[0], words[words.length - 1]] : [words[0]];
+  return letters
+    .map((w) => [...(w ?? "")][0] ?? "")
+    .join("")
+    .toUpperCase();
+}

package/src/lib/avatar-presets.ts

@@ -0,0 +1,31 @@
+/**
+ * Katalog avatar bawaan (preset). Dibagi server & FE:
+ * - Server hanya memvalidasi id (`isAvatarPresetId`) — tidak mengimpor ikon.
+ * - FE memetakan id -> ikon lucide + warna di `components/auth/avatar-icons.tsx`.
+ *
+ * Menambah preset: tambahkan id di sini DAN pemetaannya di FE (dijaga test).
+ */
+export const AVATAR_PRESET_IDS = [
+  "cat",
+  "dog",
+  "rabbit",
+  "panda",
+  "bird",
+  "fish",
+  "turtle",
+  "squirrel",
+  "rocket",
+  "bot",
+  "ghost",
+  "gamepad",
+  "flower",
+  "leaf",
+  "mountain",
+  "coffee",
+] as const;
+
+export type AvatarPresetId = (typeof AVATAR_PRESET_IDS)[number];
+
+export function isAvatarPresetId(v: unknown): v is AvatarPresetId {
+  return typeof v === "string" && (AVATAR_PRESET_IDS as readonly string[]).includes(v);
+}

package/src/lib/collapsible.ts

@@ -0,0 +1,75 @@
+/**
+ * State collapsible thinking block per pesan (Requirement 8.3).
+ *
+ * Logika murni dan bebas DOM agar dapat diuji dengan property test
+ * (Property 25) lewat `bun test` tanpa rendering React.
+ *
+ * Representasi `Record<messageId, boolean>` dijaga aman terhadap key khusus
+ * prototipe (`__proto__`, `toString`, dst.): seluruh baca/tulis memakai
+ * own-property eksplisit sehingga id pesan apa pun (hasil generator property
+ * test) tidak mencemari prototipe objek state.
+ */
+export type CollapsibleState = Record<string, boolean>;
+
+/** Definisikan key sebagai own-property enumerable (aman untuk `__proto__`). */
+function setOwn(state: CollapsibleState, key: string, value: boolean): void {
+  Object.defineProperty(state, key, {
+    value,
+    enumerable: true,
+    writable: true,
+    configurable: true,
+  });
+}
+
+/** State awal: seluruh pesan tampil (expanded) sebelum toggle pertama (Req 8.3). */
+export function initialCollapsibleState(messageIds: readonly string[]): CollapsibleState {
+  const state: CollapsibleState = {};
+  for (const id of messageIds) setOwn(state, id, true);
+  return state;
+}
+
+/**
+ * State awal: seluruh reasoning tertutup (collapsed) — hanya baris "Thinking"
+ * yang tampil; isi dibuka lewat toggle. Tinggi konten tetap dibatasi
+ * (`max-h` + scroll) walau di-expand.
+ */
+export function initialCollapsedState(messageIds: readonly string[]): CollapsibleState {
+  return extendCollapsed({}, messageIds);
+}
+
+/**
+ * Perluas state dengan key baru (mis. reasoning pesan baru lewat event
+ * `message`) dalam keadaan collapsed, tanpa mengubah status key yang sudah
+ * ada. Mengembalikan state baru (immutable).
+ */
+export function extendCollapsed(
+  state: CollapsibleState,
+  messageIds: readonly string[],
+): CollapsibleState {
+  if (messageIds.length === 0) return state;
+  const next: CollapsibleState = {};
+  for (const [key, value] of Object.entries(state)) setOwn(next, key, value);
+  for (const id of messageIds) {
+    if (!Object.hasOwn(next, id)) setOwn(next, id, false);
+  }
+  return next;
+}
+
+/** Status tampil saat ini untuk sebuah pesan (default: expanded, Req 8.3). */
+export function isCollapsibleExpanded(state: CollapsibleState, messageId: string): boolean {
+  if (Object.hasOwn(state, messageId)) {
+    return Boolean(state[messageId]);
+  }
+  return true;
+}
+
+/**
+ * Toggle satu pesan tanpa memengaruhi pesan lain (Property 25).
+ * Mengembalikan state baru (immutable) agar mudah diverifikasi.
+ */
+export function toggleCollapsible(state: CollapsibleState, messageId: string): CollapsibleState {
+  const next: CollapsibleState = {};
+  for (const [key, value] of Object.entries(state)) setOwn(next, key, value);
+  setOwn(next, messageId, !isCollapsibleExpanded(state, messageId));
+  return next;
+}

package/src/lib/composer.ts

@@ -0,0 +1,89 @@
+/**
+ * Composer chat — logika murni (tanpa DOM), dipisah agar dapat diuji
+ * `bun test` seperti helper `lib/` lainnya.
+ *
+ * Isinya keputusan teks placeholder: di layar HP input jauh lebih sempit,
+ * sehingga placeholder panjang terpotong di tengah kata dan justru tidak
+ * memberi informasi apa pun. Versi mobile dibuat pendek; petunjuk lengkap
+ * (`@` untuk file, drop/tempel file) tetap tersedia di layar lebar.
+ */
+
+/** Kondisi composer yang menentukan teks placeholder. */
+export interface ComposerPlaceholderState {
+  /** Model sedang merespon (turn aktif). */
+  busy: boolean;
+  /** Input dapat dipakai (WS terhubung, Session running, tidak sibuk). */
+  canInput: boolean;
+  /** Viewport sempit — pakai teks pendek. */
+  compact: boolean;
+  /**
+   * Ada lampiran (file) — tombol kirim muncul dan ruang teks menyempit,
+   * jadi petunjuk panjang diganti ajakan singkat yang relevan.
+   */
+  hasAttachments?: boolean;
+}
+
+/**
+ * Placeholder textarea composer. Urutan pemeriksaan penting: status sibuk
+ * dan Session mati lebih informatif daripada petunjuk mengetik, jadi
+ * keduanya diperiksa lebih dulu.
+ */
+export function composerPlaceholder(state: ComposerPlaceholderState): string {
+  if (state.busy) return state.compact ? "Responding…" : "Model is responding…";
+  if (!state.canInput) return "Session is not active";
+  if (state.hasAttachments) return "Add a message…";
+  return state.compact
+    ? "Type a message…"
+    : "Type a message… type @ for file references, or drop files here";
+}
+
+/**
+ * Ekstrak referensi `@path` dari teks untuk dikirim sebagai part `file`
+ * terpisah di prompt. Referensi dianggap file bila path-nya pernah disarankan
+ * autocomplete ATAU memuat `/` (kemungkinan besar path file, bukan kata
+ * biasa seperti `@user`).
+ *
+ * Teks asli tidak diubah — part `file` hanya penanda tambahan agar isi file
+ * benar-benar dibaca opencode; urutan kemunculan & duplikat dipertahankan
+ * (tiap kemunculan menjadi satu part `file`).
+ */
+export function extractMentionedFiles(text: string, knownPaths: ReadonlySet<string>): string[] {
+  const files: string[] = [];
+  for (const match of text.matchAll(/(^|\s)@([^\s]+)/g)) {
+    const path = match[2] ?? "";
+    if (path.length > 0 && (knownPaths.has(path) || path.includes("/"))) {
+      files.push(path);
+    }
+  }
+  return files;
+}
+
+/** Potongan teks composer untuk lapisan sorot: teks biasa atau mention file. */
+export type ComposerSegment =
+  | { kind: "text"; text: string }
+  | { kind: "mention"; text: string; path: string };
+
+/**
+ * Pecah teks composer menjadi potongan teks biasa & mention `@path` yang
+ * dikenali (aturan sama dengan `extractMentionedFiles`: path pernah
+ * disarankan autocomplete ATAU memuat `/`). Gabungan `text` seluruh
+ * potongan SELALU identik dengan input — lapisan sorot di belakang textarea
+ * bergantung pada ini agar posisinya pas karakter demi karakter.
+ */
+export function splitComposerMentions(
+  text: string,
+  knownPaths: ReadonlySet<string>,
+): ComposerSegment[] {
+  const out: ComposerSegment[] = [];
+  let last = 0;
+  for (const match of text.matchAll(/(^|\s)@([^\s]+)/g)) {
+    const path = match[2] ?? "";
+    if (path.length === 0 || !(knownPaths.has(path) || path.includes("/"))) continue;
+    const start = (match.index ?? 0) + (match[1]?.length ?? 0);
+    if (start > last) out.push({ kind: "text", text: text.slice(last, start) });
+    out.push({ kind: "mention", text: `@${path}`, path });
+    last = start + 1 + path.length;
+  }
+  if (last < text.length) out.push({ kind: "text", text: text.slice(last) });
+  return out;
+}

package/src/lib/data-events.ts

@@ -0,0 +1,17 @@
+/**
+ * Sinyal "data Project/Session berubah" antar bagian UI yang memuat datanya
+ * sendiri (mis. homepage membuat Project -> sidebar perlu memuat ulang).
+ */
+const DATA_CHANGED_EVENT = "kcg-data-changed";
+
+export function notifyDataChanged(): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new Event(DATA_CHANGED_EVENT));
+}
+
+/** Berlangganan sinyal; mengembalikan fungsi berhenti berlangganan. */
+export function onDataChanged(listener: () => void): () => void {
+  if (typeof window === "undefined") return () => {};
+  window.addEventListener(DATA_CHANGED_EVENT, listener);
+  return () => window.removeEventListener(DATA_CHANGED_EVENT, listener);
+}

package/src/lib/headlines.ts

@@ -0,0 +1,30 @@
+/**
+ * Headline sambutan homepage — dipilih acak tiap kali halaman dibuka.
+ * Logika murni (tanpa DOM) agar dapat diuji `bun test`.
+ */
+
+export const HOME_HEADLINES: readonly string[] = [
+  "What are we building today?",
+  "Ready when you are.",
+  "Let's ship something great.",
+  "What should we tackle next?",
+  "Got a bug? Let's hunt it down.",
+  "Describe it, I'll code it.",
+  "Pick a project and let's go.",
+  "Where were we?",
+  "Time to make the code purr.",
+  "What's on your mind?",
+];
+
+/**
+ * Pilih satu headline secara acak. `random` diinjeksi agar deterministik
+ * saat diuji (default `Math.random`). List kosong -> string kosong.
+ */
+export function pickHeadline(
+  headlines: readonly string[] = HOME_HEADLINES,
+  random: () => number = Math.random,
+): string {
+  if (headlines.length === 0) return "";
+  const index = Math.min(headlines.length - 1, Math.floor(random() * headlines.length));
+  return headlines[Math.max(0, index)] ?? "";
+}