kcg-code 0.0.0-stage → 0.2.0

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

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