kcg-code 0.0.0-stage → 0.1.0

package/src/lib/highlight.ts

@@ -0,0 +1,186 @@
+/**
+ * Syntax highlighting blok kode — Shiki v4 (`shiki/core`, fine-grained).
+ *
+ * - Engine JavaScript RegExp (tanpa WASM Oniguruma): lebih ringan untuk
+ *   browser; semua bahasa bawaan Shiki didukung sejak 3.9.
+ * - Bahasa & tema di-import dinamis (`shiki/langs/*.mjs`,
+ *   `shiki/themes/*.mjs` — subpath resmi paket `shiki`) per kebutuhan: bundle awal tidak
+ *   membawa grammar apa pun; grammar dimuat saat blok kode bahasa itu
+ *   pertama kali tampil, lalu di-cache (highlighter singleton).
+ * - Dual theme (github-light / github-dark) sebagai CSS variable per token
+ *   (`--shiki-light` / `--shiki-dark`); warna dipilih lewat kelas `.dark`
+ *   aplikasi di `styles/globals.css`, jadi ganti tema tidak perlu
+ *   highlight ulang.
+ * - Hasilnya berupa TOKEN (bukan string HTML) yang dirender sebagai elemen
+ *   React — tidak ada `dangerouslySetInnerHTML`, isi kode tetap teks.
+ */
+import type { HighlighterCore, TokenStyles } from "shiki/core";
+
+/** Loader grammar per nama bahasa kanonis Shiki. */
+const LANG_LOADERS = {
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsonc: () => import("shiki/langs/jsonc.mjs"),
+  shellscript: () => import("shiki/langs/shellscript.mjs"),
+  powershell: () => import("shiki/langs/powershell.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  go: () => import("shiki/langs/go.mjs"),
+  rust: () => import("shiki/langs/rust.mjs"),
+  java: () => import("shiki/langs/java.mjs"),
+  kotlin: () => import("shiki/langs/kotlin.mjs"),
+  c: () => import("shiki/langs/c.mjs"),
+  cpp: () => import("shiki/langs/cpp.mjs"),
+  csharp: () => import("shiki/langs/csharp.mjs"),
+  php: () => import("shiki/langs/php.mjs"),
+  ruby: () => import("shiki/langs/ruby.mjs"),
+  swift: () => import("shiki/langs/swift.mjs"),
+  dart: () => import("shiki/langs/dart.mjs"),
+  lua: () => import("shiki/langs/lua.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  graphql: () => import("shiki/langs/graphql.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+  toml: () => import("shiki/langs/toml.mjs"),
+  ini: () => import("shiki/langs/ini.mjs"),
+  xml: () => import("shiki/langs/xml.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  scss: () => import("shiki/langs/scss.mjs"),
+  vue: () => import("shiki/langs/vue.mjs"),
+  svelte: () => import("shiki/langs/svelte.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  docker: () => import("shiki/langs/docker.mjs"),
+  make: () => import("shiki/langs/make.mjs"),
+} as const;
+
+export type HighlightLang = keyof typeof LANG_LOADERS;
+
+/** Alias umum di fence Markdown -> nama kanonis. */
+const ALIASES: Record<string, HighlightLang> = {
+  js: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  ts: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  sh: "shellscript",
+  bash: "shellscript",
+  zsh: "shellscript",
+  shell: "shellscript",
+  console: "shellscript",
+  ps1: "powershell",
+  ps: "powershell",
+  py: "python",
+  golang: "go",
+  rs: "rust",
+  kt: "kotlin",
+  "c++": "cpp",
+  cs: "csharp",
+  "c#": "csharp",
+  rb: "ruby",
+  gql: "graphql",
+  yml: "yaml",
+  htm: "html",
+  md: "markdown",
+  patch: "diff",
+  dockerfile: "docker",
+  makefile: "make",
+  svg: "xml",
+};
+
+/**
+ * Nama bahasa kanonis dari info-string fence (`ts`, `language-tsx`,
+ * `JSON`), atau null bila tidak didukung (tetap tampil sebagai teks polos).
+ */
+export function resolveLang(raw: string | null | undefined): HighlightLang | null {
+  if (!raw) return null;
+  const name = raw
+    .trim()
+    .toLowerCase()
+    .replace(/^language-/, "");
+  if (name in LANG_LOADERS) return name as HighlightLang;
+  return ALIASES[name] ?? null;
+}
+
+let highlighter: Promise<HighlighterCore> | null = null;
+const loading = new Map<HighlightLang, Promise<void>>();
+
+function getHighlighter(): Promise<HighlighterCore> {
+  highlighter ??= (async () => {
+    const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
+      import("shiki/core"),
+      import("shiki/engine/javascript"),
+    ]);
+    return createHighlighterCore({
+      themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+      langs: [],
+      // `forgiving`: pola grammar yang tak bisa dikonversi tidak melempar
+      // error — kode tetap tampil (sebagian mungkin tak berwarna).
+      engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+  })();
+  return highlighter;
+}
+
+async function ensureLang(h: HighlighterCore, lang: HighlightLang): Promise<void> {
+  if (h.getLoadedLanguages().includes(lang)) return;
+  let p = loading.get(lang);
+  if (!p) {
+    p = h.loadLanguage(LANG_LOADERS[lang]()).catch((e) => {
+      loading.delete(lang); // izinkan coba lagi bila import gagal (mis. offline)
+      throw e;
+    });
+    loading.set(lang, p);
+  }
+  await p;
+}
+
+/** Satu token hasil highlight: teks + warna light/dark (CSS variable). */
+export interface CodeToken {
+  content: string;
+  /** `--shiki-light` / `--shiki-dark` + gaya font (italic/bold). */
+  style: Record<string, string>;
+}
+
+/**
+ * Highlight kode jadi baris token. Gagal (bahasa tak dikenal / grammar
+ * gagal dimuat) -> null; pemanggil menampilkan teks polos.
+ */
+export async function highlightCode(
+  code: string,
+  lang: HighlightLang,
+): Promise<CodeToken[][] | null> {
+  try {
+    const h = await getHighlighter();
+    await ensureLang(h, lang);
+    const lines = h.codeToTokensWithThemes(code, {
+      lang,
+      themes: { light: "github-light", dark: "github-dark" },
+    });
+    return lines.map((line) =>
+      line.map((t) => ({ content: t.content, style: tokenStyle(t.variants) })),
+    );
+  } catch {
+    return null;
+  }
+}
+
+/** Gaya satu token dari varian tema (hanya warna & font style). */
+function tokenStyle(variants: Record<string, TokenStyles>) {
+  const style: Record<string, string> = {};
+  const light = variants.light;
+  const dark = variants.dark;
+  if (light?.color) style["--shiki-light"] = light.color;
+  if (dark?.color) style["--shiki-dark"] = dark.color;
+  // FontStyle bitmask Shiki: 1 = italic, 2 = bold, 4 = underline.
+  const fs = light?.fontStyle ?? 0;
+  if (fs > 0) {
+    if (fs & 1) style.fontStyle = "italic";
+    if (fs & 2) style.fontWeight = "600";
+    if (fs & 4) style.textDecoration = "underline";
+  }
+  return style;
+}

package/src/lib/layout.ts

@@ -0,0 +1,20 @@
+/**
+ * Lebar kolom percakapan — SATU sumber untuk timeline, composer, dan kartu
+ * prompt, supaya tepi kiri-kanannya selalu sejajar.
+ *
+ * Kenapa bukan `max-w-3xl` (768px) di tiap tempat: timeline punya padding
+ * horizontal DI DALAM kolomnya (teks mulai 16px dari tepi), sedangkan
+ * composer & kartu prompt tidak — jadi dengan max-w yang sama, kotak input
+ * tampak 32px lebih lebar dari teks chat. `CONVERSATION_MAX_W` adalah lebar
+ * TEKS (736px = 768 - 2×16); timeline menambahkan padding-nya di luar nilai
+ * ini (`TIMELINE_MAX_W`).
+ */
+
+/** Lebar isi kolom (teks chat, kotak input, kartu prompt). */
+export const CONVERSATION_MAX_W = "max-w-[46rem]";
+
+/**
+ * Lebar kotak timeline = isi + padding horizontalnya (`sm:px-4` = 2×1rem),
+ * sehingga TEKS timeline tepat selebar `CONVERSATION_MAX_W`.
+ */
+export const TIMELINE_MAX_W = "max-w-[48rem]";

package/src/lib/lock-screen.ts

@@ -0,0 +1,54 @@
+/**
+ * Logika murni lock screen (tanpa DOM) — dipisah agar dapat diuji `bun test`.
+ */
+
+export const PIN_MAX = 12;
+
+export type PinKeyAction =
+  | { type: "digit"; digit: string }
+  | { type: "backspace" }
+  | { type: "submit" }
+  | { type: "clear" };
+
+/**
+ * Terjemahkan tombol keyboard fisik menjadi aksi PIN. Angka baris atas
+ * menghasilkan `key` "0"-"9". Numpad dibaca dari `code` (`Numpad0`-`Numpad9`)
+ * agar tetap jalan walau NumLock mati (saat itu `key` berisi panah/Home/End).
+ * Kombinasi dengan Ctrl/Cmd/Alt diabaikan agar pintasan browser tetap jalan.
+ */
+export function pinKeyAction(e: {
+  key: string;
+  code?: string;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  altKey?: boolean;
+}): PinKeyAction | null {
+  if (e.ctrlKey || e.metaKey || e.altKey) return null;
+  if (/^[0-9]$/.test(e.key)) return { type: "digit", digit: e.key };
+  const numpad = /^Numpad([0-9])$/.exec(e.code ?? "");
+  if (numpad?.[1]) return { type: "digit", digit: numpad[1] };
+  if (e.key === "Backspace" || e.key === "Delete") return { type: "backspace" };
+  // `NumpadEnter` juga ber-key "Enter".
+  if (e.key === "Enter") return { type: "submit" };
+  if (e.key === "Escape") return { type: "clear" };
+  return null;
+}
+
+/** Terapkan aksi ke PIN saat ini (batas panjang dijaga). */
+export function applyPinAction(pin: string, action: PinKeyAction): string {
+  switch (action.type) {
+    case "digit":
+      return pin.length >= PIN_MAX ? pin : pin + action.digit;
+    case "backspace":
+      return pin.slice(0, -1);
+    case "clear":
+      return "";
+    case "submit":
+      return pin;
+  }
+}
+
+/** Ambil angka dari teks tempelan (mis. "48 29 15" -> "482915"). */
+export function digitsFromPaste(text: string, current: string): string {
+  return (current + text.replace(/\D/g, "")).slice(0, PIN_MAX);
+}

package/src/lib/model-picker.ts

@@ -0,0 +1,133 @@
+/**
+ * Pemilihan model LLM — logika murni (tanpa DOM / fetch), dipisah agar dapat
+ * diuji `bun test` seperti `lib/routes.ts` dan `lib/session-summary.ts`.
+ *
+ * Dipakai bersama oleh `components/sessions/ModelPicker.tsx` (ganti model
+ * Session yang sedang berjalan) dan `components/sessions/SessionList.tsx`
+ * (pilih model saat membuat Session) supaya keduanya memakai aturan kunci,
+ * pencarian, dan pengelompokan yang sama.
+ */
+
+import type { ModelOption } from "@/server/services/opencode-client";
+import type { SessionModel } from "@/types";
+
+/** Nilai khusus "pakai model default opencode" (mengirim `model: null`). */
+export const DEFAULT_MODEL_KEY = "default";
+
+/** Pemisah dalam kunci gabungan; modelID boleh memuat "/" sehingga bukan "/". */
+const KEY_SEPARATOR = "\u0000";
+
+/** Kunci gabungan provider+model untuk dipakai sebagai nilai/`key` React. */
+export function modelKey(providerID: string, modelID: string): string {
+  return `${providerID}${KEY_SEPARATOR}${modelID}`;
+}
+
+/** Kunci untuk sebuah `ModelOption`. */
+export function optionKey(m: ModelOption): string {
+  return modelKey(m.providerID, m.modelID);
+}
+
+/** Kunci untuk model Session saat ini; `null` -> `DEFAULT_MODEL_KEY`. */
+export function keyOfSessionModel(model: SessionModel | null): string {
+  return model ? modelKey(model.providerID, model.modelID) : DEFAULT_MODEL_KEY;
+}
+
+/**
+ * Kunci -> `SessionModel`. `DEFAULT_MODEL_KEY` dan kunci tak lengkap
+ * menghasilkan `null` (biarkan opencode memakai model default-nya).
+ */
+export function parseModelKey(key: string): SessionModel | null {
+  if (key === DEFAULT_MODEL_KEY) return null;
+  const [providerID, modelID] = key.split(KEY_SEPARATOR);
+  if (!providerID || !modelID) return null;
+  return { providerID, modelID };
+}
+
+/** Satu provider beserta model-modelnya, untuk render berkelompok. */
+export interface ModelGroup {
+  providerID: string;
+  providerName: string;
+  models: ModelOption[];
+}
+
+/**
+ * Kelompokkan model per provider, mempertahankan urutan kemunculan pertama
+ * tiap provider (urutan dari server dianggap sudah bermakna).
+ */
+export function groupModels(models: readonly ModelOption[]): ModelGroup[] {
+  const byProvider = new Map<string, ModelGroup>();
+  for (const m of models) {
+    let g = byProvider.get(m.providerID);
+    if (!g) {
+      g = { providerID: m.providerID, providerName: m.providerName, models: [] };
+      byProvider.set(m.providerID, g);
+    }
+    g.models.push(m);
+  }
+  return [...byProvider.values()];
+}
+
+/**
+ * Cari model berdasarkan kata kunci: cocok pada nama model, modelID, atau
+ * nama provider (tanpa membedakan huruf besar/kecil). Seluruh kata dalam
+ * query harus cocok, sehingga "opus 5" menemukan "Claude Opus 5" walau
+ * urutan katanya berbeda dari teks aslinya.
+ */
+export function filterModels(models: readonly ModelOption[], query: string): ModelOption[] {
+  const terms = query
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((t) => t.length > 0);
+  if (terms.length === 0) return [...models];
+  return models.filter((m) => {
+    const haystack = `${m.name} ${m.modelID} ${m.providerName}`.toLowerCase();
+    return terms.every((t) => haystack.includes(t));
+  });
+}
+
+/**
+ * Label ringkas model aktif untuk trigger picker. Model belum termuat dari
+ * server (daftar kosong) tetap tampil sebagai `modelID` — informasi yang
+ * sudah dimiliki Session, jadi trigger tidak pernah kosong.
+ */
+export function activeModelLabel(
+  model: SessionModel | null,
+  models: readonly ModelOption[],
+): string {
+  if (model === null) return "Default model";
+  const found = models.find(
+    (m) => m.providerID === model.providerID && m.modelID === model.modelID,
+  );
+  return found?.name ?? model.modelID;
+}
+
+/** Batas panjang nama model di header (karakter) sebelum dipotong. */
+export const MODEL_NAME_MAX_LENGTH = 22;
+
+/**
+ * Nama model sependek mungkin untuk judul header.
+ *
+ * Provider sering memberi prefiks vendor pada `modelID`
+ * (`kiro/claude-opus-5`, `anthropic/claude-sonnet-4`), dan prefiks itu tidak
+ * menambah informasi saat nama sudah tampil di bawah judul Session. Segmen
+ * terakhir setelah `/` diambil, lalu dipotong bila masih terlalu panjang untuk
+ * lebar layar HP.
+ */
+export function shortModelName(label: string, maxLength: number = MODEL_NAME_MAX_LENGTH): string {
+  // Segmen kosong dibuang lebih dulu, sehingga trailing slash diabaikan
+  // (`a/b/` -> `b`) dan label yang hanya berisi slash menghasilkan "".
+  const segments = label.split("/").filter((s) => s.trim().length > 0);
+  const name = segments.at(-1)?.trim() ?? "";
+  if (maxLength <= 0) return "";
+  if (name.length <= maxLength) return name;
+  // Sisakan satu karakter untuk elipsis agar total tepat `maxLength`.
+  return `${name.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;
+}
+
+/**
+ * Ringkasan jumlah hasil pencarian untuk pembaca layar / footer dialog.
+ */
+export function describeModelCount(count: number): string {
+  if (count === 0) return "No matching models";
+  return count === 1 ? "1 model" : `${count} models`;
+}

package/src/lib/onboarding.ts

@@ -0,0 +1,38 @@
+/**
+ * Alur welcome screen (onboarding) — logika murni, diuji tanpa DOM.
+ *
+ * Langkah: welcome -> profile -> lock -> done.
+ * - `profile` (nickname) boleh dikosongkan.
+ * - `lock` boleh dilewati (app tetap terbuka; Settings menampilkan
+ *   peringatan seperti biasa).
+ */
+export const ONBOARDING_STEPS = ["welcome", "profile", "lock", "done"] as const;
+export type OnboardingStep = (typeof ONBOARDING_STEPS)[number];
+
+export function stepIndex(step: OnboardingStep): number {
+  return ONBOARDING_STEPS.indexOf(step);
+}
+
+export function nextStep(step: OnboardingStep): OnboardingStep {
+  return ONBOARDING_STEPS[Math.min(stepIndex(step) + 1, ONBOARDING_STEPS.length - 1)] ?? "done";
+}
+
+export function prevStep(step: OnboardingStep): OnboardingStep {
+  return ONBOARDING_STEPS[Math.max(stepIndex(step) - 1, 0)] ?? "welcome";
+}
+
+/** Arah animasi geser saat berpindah langkah (1 maju, -1 mundur). */
+export function stepDirection(from: OnboardingStep, to: OnboardingStep): 1 | -1 {
+  return stepIndex(to) >= stepIndex(from) ? 1 : -1;
+}
+
+/** Langkah yang ditampilkan sebagai titik progres (tanpa layar sambutan/akhir). */
+export const PROGRESS_STEPS: readonly OnboardingStep[] = ["profile", "lock"];
+
+/** Sapaan sesuai jam lokal. */
+export function greeting(hour: number): string {
+  if (hour < 5) return "Good evening";
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+}

package/src/lib/passkeys.ts

@@ -0,0 +1,113 @@
+/**
+ * Klien passkey (WebAuthn) — membungkus `@simplewebauthn/browser` + API
+ * `/api/auth/passkeys/*` agar Settings & lock screen memakai alur yang sama.
+ *
+ * Pembatalan oleh pengguna (menutup dialog sistem) bukan error: dikembalikan
+ * sebagai `{ ok: false, cancelled: true }` supaya UI tidak menampilkan pesan
+ * merah untuk tindakan yang disengaja.
+ */
+import {
+  browserSupportsWebAuthn,
+  startAuthentication,
+  startRegistration,
+} from "@simplewebauthn/browser";
+import { ApiError, apiFetch } from "@/lib/api";
+import type { PasskeyAvailability, PasskeyInfo } from "@/server/services/auth-passkeys";
+
+export type { PasskeyAvailability, PasskeyInfo };
+
+export type PasskeyResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; cancelled: true }
+  | { ok: false; cancelled: false; message: string; code?: string };
+
+/** Browser ini bisa memakai passkey (API WebAuthn + secure context). */
+export function passkeysSupportedHere(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.isSecureContext && browserSupportsWebAuthn();
+}
+
+/**
+ * Error dari `navigator.credentials` -> pesan ramah. `NotAllowedError` =
+ * dibatalkan / timeout oleh pengguna (diperlakukan sebagai batal).
+ */
+export function describeWebAuthnError(e: unknown): PasskeyResult<never> {
+  if (e instanceof ApiError)
+    return { ok: false, cancelled: false, message: e.message, code: e.code };
+  const name = e instanceof Error ? e.name : "";
+  if (name === "NotAllowedError" || name === "AbortError") return { ok: false, cancelled: true };
+  if (name === "InvalidStateError") {
+    return { ok: false, cancelled: false, message: "This device already has a passkey here." };
+  }
+  if (name === "SecurityError") {
+    return {
+      ok: false,
+      cancelled: false,
+      message: "Passkeys aren't allowed on this address. Use https or localhost.",
+    };
+  }
+  return { ok: false, cancelled: false, message: "Something went wrong with the passkey." };
+}
+
+export async function getPasskeyAvailability(): Promise<PasskeyAvailability> {
+  const res = await apiFetch("/api/auth/passkeys/availability");
+  return (await res.json()) as PasskeyAvailability;
+}
+
+export async function listPasskeys(): Promise<PasskeyInfo[]> {
+  const res = await apiFetch("/api/auth/passkeys");
+  return ((await res.json()) as { passkeys: PasskeyInfo[] }).passkeys;
+}
+
+/** Daftarkan passkey baru; `current` = PIN/password saat ini (konfirmasi). */
+export async function addPasskey(current: string): Promise<PasskeyResult<PasskeyInfo>> {
+  try {
+    const optRes = await apiFetch("/api/auth/passkeys/register/options", {
+      method: "POST",
+      body: JSON.stringify({ current }),
+    });
+    const { challengeId, options } = (await optRes.json()) as {
+      challengeId: string;
+      options: Parameters<typeof startRegistration>[0]["optionsJSON"];
+    };
+    const response = await startRegistration({ optionsJSON: options });
+    const res = await apiFetch("/api/auth/passkeys/register", {
+      method: "POST",
+      body: JSON.stringify({ challengeId, response }),
+    });
+    return { ok: true, data: ((await res.json()) as { passkey: PasskeyInfo }).passkey };
+  } catch (e) {
+    return describeWebAuthnError(e);
+  }
+}
+
+/** Buka kunci dengan passkey. Sukses = cookie sesi sudah diset server. */
+export async function unlockWithPasskey(): Promise<PasskeyResult<null>> {
+  try {
+    const optRes = await apiFetch("/api/auth/passkeys/login/options", { method: "POST" });
+    const { challengeId, options } = (await optRes.json()) as {
+      challengeId: string;
+      options: Parameters<typeof startAuthentication>[0]["optionsJSON"];
+    };
+    const response = await startAuthentication({ optionsJSON: options });
+    await apiFetch("/api/auth/passkeys/login", {
+      method: "POST",
+      body: JSON.stringify({ challengeId, response }),
+    });
+    return { ok: true, data: null };
+  } catch (e) {
+    return describeWebAuthnError(e);
+  }
+}
+
+export async function renamePasskey(id: string, name: string): Promise<PasskeyInfo> {
+  const res = await apiFetch(`/api/auth/passkeys/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    body: JSON.stringify({ name }),
+  });
+  return ((await res.json()) as { passkey: PasskeyInfo }).passkey;
+}
+
+export async function removePasskey(id: string): Promise<void> {
+  await apiFetch(`/api/auth/passkeys/${encodeURIComponent(id)}`, { method: "DELETE" });
+}

package/src/lib/pending-prompt.ts

@@ -0,0 +1,53 @@
+/**
+ * Prompt pertama yang diketik di homepage, dititipkan sampai Session
+ * barunya ter-attach di Session view (`useSessionChat`) lalu dikirim sekali.
+ *
+ * Disimpan di `sessionStorage` (per tab) sehingga tetap aman walau halaman
+ * Session dimuat ulang sebelum koneksi WS siap; `take` menghapusnya agar
+ * prompt tidak terkirim dua kali.
+ */
+
+const KEY_PREFIX = "kcg-pending-prompt:";
+
+/** Storage minimal — diinjeksi saat test (default `sessionStorage`). */
+export interface PendingStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+function defaultStore(): PendingStore | null {
+  return typeof sessionStorage === "undefined" ? null : sessionStorage;
+}
+
+export function setPendingPrompt(
+  sessionId: string,
+  text: string,
+  store: PendingStore | null = defaultStore(),
+): void {
+  const trimmed = text.trim();
+  if (store === null || trimmed === "") return;
+  store.setItem(KEY_PREFIX + sessionId, trimmed);
+}
+
+/** Baca prompt tertunda tanpa menghapusnya (untuk pesan optimistis di UI). */
+export function peekPendingPrompt(
+  sessionId: string,
+  store: PendingStore | null = defaultStore(),
+): string | null {
+  if (store === null) return null;
+  const value = store.getItem(KEY_PREFIX + sessionId);
+  return value !== null && value.trim() !== "" ? value : null;
+}
+
+/** Ambil sekaligus hapus prompt tertunda; null bila tidak ada. */
+export function takePendingPrompt(
+  sessionId: string,
+  store: PendingStore | null = defaultStore(),
+): string | null {
+  if (store === null) return null;
+  const key = KEY_PREFIX + sessionId;
+  const value = store.getItem(key);
+  if (value !== null) store.removeItem(key);
+  return value !== null && value.trim() !== "" ? value : null;
+}