kcg-code 0.0.0-stage → 0.1.0

package/src/components/sessions/MarkdownContent.tsx

@@ -0,0 +1,187 @@
+/**
+ * Render Markdown balasan model — `react-markdown` + `remark-gfm`.
+ *
+ * Balasan opencode berformat Markdown, jadi sebelumnya tampil sebagai teks
+ * mentah (`**tebal**`, pipa tabel, fence kode). Komponen ini merendernya jadi
+ * elemen HTML bergaya sistem desain aplikasi.
+ *
+ * Keputusan penting:
+ * - **Tanpa `rehype-raw`.** HTML mentah di dalam Markdown TIDAK dirender
+ *   sebagai DOM (di-escape jadi teks). Balasan model adalah konten tak
+ *   terpercaya — ia bisa memuat markup dari file/web yang dibacanya —
+ *   sehingga mengizinkan HTML mentah membuka pintu XSS. `disallowedElements`
+ *   juga membuang tag pemuat sumber eksternal agar sintaks `![]()` tidak
+ *   memicu request keluar.
+ * - **Tabel dibungkus scroll horizontal.** Tabel lebar tidak boleh memaksa
+ *   seluruh bubble melebar (dan merusak layout HP); wrapper `overflow-x-auto`
+ *   membuat hanya tabelnya yang bergeser. Blok kode diperlakukan sama.
+ * - **Link buka tab baru** dengan `rel="noopener noreferrer nofollow"`.
+ * - **Blok kode di-highlight** lewat `CodeBlock` (Shiki, grammar dimuat
+ *   lazy per bahasa). Kode inline tetap teks monospace biasa.
+ * - Parser remark bersifat recoverable, jadi Markdown setengah jadi saat
+ *   streaming tetap dirender tanpa error (fence yang belum ditutup tampil
+ *   sebagai kode berjalan, lalu rapi begitu token penutup tiba).
+ */
+
+import { Children, type ComponentProps, isValidElement, type JSX, type ReactNode } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { CodeBlock } from "@/components/sessions/CodeBlock";
+import { cn } from "@/lib/utils";
+
+/**
+ * Elemen yang tidak pernah dirender: pemuat sumber eksternal & elemen
+ * berpotensi eksekusi.
+ */
+const DISALLOWED = ["img", "iframe", "script", "style", "video", "audio", "embed", "object"];
+
+/**
+ * Props yang diterima komponen kustom react-markdown. Selain atribut HTML,
+ * react-markdown menyertakan `node` (AST hast) — prop internal yang HARUS
+ * dibuang sebelum di-spread ke elemen DOM, kalau tidak ia bocor jadi atribut
+ * `node="[object Object]"` di HTML hasil render.
+ */
+type MarkdownProps<T extends keyof JSX.IntrinsicElements> = ComponentProps<T> & {
+  node?: unknown;
+};
+
+/**
+ * Bangun komponen bergaya untuk satu tag HTML: `node` dibuang, `className`
+ * dari markdown (mis. `language-ts` pada blok kode) tetap digabung.
+ */
+function styled<T extends keyof JSX.IntrinsicElements>(tag: T, classes: string) {
+  return function StyledTag({ node: _node, className, ...props }: MarkdownProps<T>) {
+    const Tag = tag as string;
+    return <Tag {...props} className={cn(classes, className)} />;
+  };
+}
+
+/** Tautan aman: selalu tab baru, tanpa membocorkan referrer. */
+function MarkdownLink({ node: _node, className, ...props }: MarkdownProps<"a">) {
+  return (
+    <a
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      className={cn(
+        "font-medium text-primary underline underline-offset-2 hover:no-underline",
+        className,
+      )}
+    />
+  );
+}
+
+/**
+ * `code` melayani dua konteks: di dalam `pre` (blok) dan inline. Di dalam
+ * `pre`, gaya latar/padding dilepas agar tidak dobel dengan wrapper `pre`;
+ * react-markdown menandai blok lewat kelas `language-*`.
+ */
+function MarkdownCode({ node: _node, className, ...props }: MarkdownProps<"code">) {
+  const isBlock = typeof className === "string" && className.includes("language-");
+  return (
+    <code
+      {...props}
+      className={cn(
+        "font-mono",
+        isBlock
+          ? "bg-transparent p-0 text-base"
+          : "rounded bg-muted px-1 py-0.5 text-[0.9em] wrap-anywhere",
+        className,
+      )}
+    />
+  );
+}
+
+/** Gabungkan anak `code` jadi string (react-markdown memberi teks mentah). */
+function textOf(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children);
+  return "";
+}
+
+/**
+ * Blok kode: `pre > code.language-*`. Isi & bahasa diambil dari `code`
+ * anak lalu dirender `CodeBlock` (highlight + tombol salin). Fence tanpa
+ * bahasa tetap lewat `CodeBlock` (teks polos, tetap ada tombol salin).
+ */
+function MarkdownPre({ node: _node, children }: MarkdownProps<"pre">) {
+  const child = Children.toArray(children)[0];
+  if (isValidElement<{ className?: string; children?: ReactNode }>(child)) {
+    const cls = child.props.className ?? "";
+    const lang = /(?:^|\s)language-(\S+)/.exec(cls)?.[1] ?? null;
+    // Fence selalu diakhiri newline oleh parser — buang agar tidak ada
+    // baris kosong ekstra di bawah blok.
+    const code = textOf(child.props.children).replace(/\n$/, "");
+    return <CodeBlock code={code} language={lang} />;
+  }
+  return <pre className="my-2 overflow-x-auto rounded-lg border bg-muted/60 p-3">{children}</pre>;
+}
+
+/**
+ * Tabel + wrapper scroll horizontal. Wrapper `div` diperlukan karena elemen
+ * `table` sendiri tidak dapat menjadi kontainer scroll.
+ */
+function MarkdownTable({ node: _node, className, ...props }: MarkdownProps<"table">) {
+  return (
+    <div className="my-2 max-w-full overflow-x-auto rounded-lg border first:mt-0 last:mb-0">
+      <table {...props} className={cn("w-full border-collapse text-left text-base", className)} />
+    </div>
+  );
+}
+
+/**
+ * Peta komponen: gaya memakai token sistem desain (bukan warna hardcoded)
+ * supaya tema terang/gelap ikut menyesuaikan.
+ */
+const COMPONENTS = {
+  a: MarkdownLink,
+  code: MarkdownCode,
+  table: MarkdownTable,
+  // Blok kode: highlight + scroll horizontal sendiri (lihat `CodeBlock`).
+  pre: MarkdownPre,
+  p: styled("p", "my-2 first:mt-0 last:mb-0"),
+  h1: styled("h1", "mt-4 mb-2 text-lg font-semibold first:mt-0"),
+  h2: styled("h2", "mt-4 mb-2 text-lg font-semibold first:mt-0"),
+  h3: styled("h3", "mt-3 mb-1.5 text-base font-semibold first:mt-0"),
+  h4: styled("h4", "mt-3 mb-1.5 text-base font-semibold first:mt-0"),
+  h5: styled("h5", "mt-3 mb-1 text-base font-semibold first:mt-0"),
+  h6: styled("h6", "mt-3 mb-1 text-base font-semibold first:mt-0"),
+  ul: styled("ul", "my-2 list-disc space-y-1 ps-5 first:mt-0 last:mb-0"),
+  ol: styled("ol", "my-2 list-decimal space-y-1 ps-5 first:mt-0 last:mb-0"),
+  li: styled("li", "marker:text-muted-foreground"),
+  blockquote: styled(
+    "blockquote",
+    "my-2 border-s-2 border-border ps-3 text-muted-foreground italic first:mt-0 last:mb-0",
+  ),
+  hr: styled("hr", "my-3 border-border"),
+  thead: styled("thead", "bg-muted/60"),
+  th: styled("th", "border-b px-3 py-2 font-semibold whitespace-nowrap"),
+  td: styled("td", "border-b px-3 py-2 align-top"),
+  strong: styled("strong", "font-semibold"),
+  em: styled("em", "italic"),
+  del: styled("del", "text-muted-foreground line-through"),
+};
+
+export interface MarkdownContentProps {
+  /** Sumber Markdown (teks balasan model). */
+  children: string;
+  className?: string;
+}
+
+export function MarkdownContent({ children, className }: MarkdownContentProps) {
+  return (
+    // react-markdown v10 tidak lagi menerima prop `className` — kelas dipasang
+    // pada elemen pembungkus di sini.
+    <div className={cn("min-w-0", className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        disallowedElements={DISALLOWED}
+        unwrapDisallowed
+        components={COMPONENTS}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/sessions/Mascot.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+import logoUrl from "@/logo.svg";
+
+/**
+ * Maskot status turn: logo KCG Code + keterangan proses yang sedang
+ * berjalan ("Working…", "Thinking…", "read package.json", "Writing…").
+ *
+ * Tiga mode:
+ * - `active`  : logo berdenyut (pulse) + label status (turn masih berjalan).
+ * - `standby` : logo diam tanpa label — penanda model "hadir" setelah pesan
+ *   terakhir selesai (masih dirender, tidak disembunyikan).
+ * - keduanya off + label kosong -> tidak dirender (belum ada turn).
+ */
+export function Mascot({
+  label,
+  active = false,
+  standby = false,
+  className,
+}: {
+  /** Teks status; kosong/null -> mode standby (logo saja) bila `standby`. */
+  label: string | null;
+  /** true -> logo beranimasi (turn masih berjalan). */
+  active?: boolean;
+  /** true -> tetap tampil sebagai logo diam walau tanpa label (selesai). */
+  standby?: boolean;
+  className?: string;
+}) {
+  const empty = label === null || label === "";
+  // Tanpa label & bukan standby -> tidak ada yang perlu dirender.
+  if (empty && !standby) return null;
+
+  return (
+    <div
+      className={cn("flex items-center gap-2.5 py-1 text-sm text-muted-foreground", className)}
+      role="status"
+      aria-live="polite"
+    >
+      <img
+        src={logoUrl}
+        alt=""
+        aria-hidden
+        className={cn("size-5 shrink-0", active && "animate-pulse", empty && "opacity-60")}
+      />
+      {!empty && <span className="truncate">{label}</span>}
+    </div>
+  );
+}

package/src/components/sessions/MessageActions.tsx

@@ -0,0 +1,60 @@
+/**
+ * Aksi per pesan di footer (saat ini: Copy).
+ *
+ * Di perangkat ber-mouse (`pointer-fine`) tombol baru terlihat saat pesan
+ * di-hover / difokus agar percakapan tetap bersih; di layar sentuh selalu
+ * tampil (tidak ada hover). Pola sama dengan menu "..." di `SessionRow`.
+ */
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export function CopyMessageButton({ text, className }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(t);
+  }, [copied]);
+
+  if (text.trim() === "") return null;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+    } catch {
+      // Clipboard API butuh konteks aman (HTTPS / localhost).
+      toast.error("Couldn't copy. Select the text and copy it manually.");
+    }
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => void copy()}
+          aria-label={copied ? "Copied" : "Copy message"}
+          className={cn(
+            "flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-[opacity,color,background-color] outline-none hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            // Mouse: tampil saat pesan di-hover / ada fokus di dalamnya.
+            "pointer-fine:opacity-0 pointer-fine:group-hover/message:opacity-100 pointer-fine:group-focus-within/message:opacity-100",
+            copied && "opacity-100 pointer-fine:opacity-100",
+            className,
+          )}
+        >
+          {copied ? (
+            <CheckIcon className="size-3.5 text-emerald-600 dark:text-emerald-400" aria-hidden />
+          ) : (
+            <CopyIcon className="size-3.5" aria-hidden />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/sessions/MessageRail.tsx

@@ -0,0 +1,121 @@
+/**
+ * Rail penanda pesan user di tepi kiri timeline (ala Gemini).
+ *
+ * Satu garis pendek & tebal per pesan user, urut dari atas ke bawah. Diklik
+ * -> melompat ke pesan itu; di-hover -> garis memanjang dan berbunyi satu
+ * nada. Nadanya menaik dari atas ke bawah (tangga nada mayor: do re mi …),
+ * jadi menyapu rail terdengar seperti memainkan tangga nada. Penanda yang
+ * sedang tampil di layar dibuat lebih kontras sehingga rail sekaligus jadi
+ * indikator posisi baca.
+ *
+ * Catatan implementasi:
+ * - Posisi penanda TIDAK proporsional terhadap tinggi dokumen (bukan
+ *   minimap): jaraknya tetap, ditempatkan di tengah tepi kiri.
+ * - Jumlah penanda tidak dibatasi (tiap pesan user selalu dapat satu).
+ *   Percakapan panjang -> rail melebihi tinggi maksimumnya lalu bisa
+ *   di-scroll; rail MENGGESER DIRINYA agar penanda aktif selalu terlihat,
+ *   sehingga penanda lama tetap terjangkau tanpa perlu dibuang.
+ * - Penanda aktif ditentukan `IntersectionObserver` di `SessionTimeline`
+ *   (elemen pesan user), jadi tidak ada perhitungan scroll manual.
+ * - Disembunyikan di layar sempit (`hidden lg:flex`): tidak ada ruang di
+ *   tepi kiri HP, dan rail bukan satu-satunya cara navigasi.
+ * - Hanya muncul bila ada ≥ 2 pesan user (satu penanda tidak berguna).
+ */
+import { useEffect, useRef } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { playTone, scaleFrequency } from "@/lib/tone";
+import { cn } from "@/lib/utils";
+
+/**
+ * Jeda sebelum tooltip muncul. Provider global memakai 0 (tombol ikon perlu
+ * respons cepat), tapi di rail penanda berdempetan: tanpa jeda, menyapu
+ * pointer melintasinya memunculkan tooltip berkedip-kedip. Nilai ini
+ * menimpa provider hanya untuk rail.
+ */
+const TOOLTIP_DELAY_MS = 450;
+
+export interface UserMessageMark {
+  id: string;
+  /** Cuplikan teks pesan untuk tooltip & label aksesibilitas. */
+  preview: string;
+}
+
+export interface MessageRailProps {
+  marks: UserMessageMark[];
+  /** Id pesan user yang sedang tampil (penanda aktif). */
+  activeId: string | null;
+  onJump: (id: string) => void;
+}
+
+export function MessageRail({ marks, activeId, onJump }: MessageRailProps) {
+  const listRef = useRef<HTMLUListElement | null>(null);
+
+  // Rail lebih tinggi dari batasnya -> jaga penanda aktif tetap dalam
+  // pandangan. `block: "nearest"` hanya menggeser bila penanda memang di luar
+  // area, jadi rail tidak bergerak-gerak saat penanda aktif sudah terlihat.
+  useEffect(() => {
+    const list = listRef.current;
+    if (list === null || activeId === null) return;
+    if (list.scrollHeight <= list.clientHeight) return;
+    // Id pesan berbentuk `usr_<uuid>`, tapi selector tetap di-escape bila
+    // `CSS.escape` tersedia — id tak lazim tidak boleh merusak rail.
+    const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(activeId) : activeId;
+    const el = list.querySelector<HTMLElement>(`[data-mark-id="${escaped}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [activeId]);
+
+  if (marks.length < 2) return null;
+
+  return (
+    <nav
+      aria-label="Your messages"
+      className="pointer-events-none absolute top-1/2 left-4 hidden -translate-y-1/2 lg:flex xl:left-6"
+    >
+      <ul
+        ref={listRef}
+        className="pointer-events-auto flex max-h-[60vh] flex-col items-center gap-px overflow-y-auto py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {marks.map((mark, i) => {
+          const active = mark.id === activeId;
+          return (
+            <li key={mark.id} data-mark-id={mark.id}>
+              <Tooltip delayDuration={TOOLTIP_DELAY_MS}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => onJump(mark.id)}
+                    // Nada hanya saat pointer masuk (bukan tiap gerakan), dan
+                    // tidak untuk fokus keyboard agar Tab tidak berbunyi.
+                    onPointerEnter={(e) => {
+                      // Sentuhan langsung jadi klik — nada hover tidak relevan.
+                      if (e.pointerType !== "touch") playTone(scaleFrequency(i));
+                    }}
+                    aria-label={`Jump to your message ${i + 1}: ${mark.preview}`}
+                    aria-current={active ? "true" : undefined}
+                    // Area klik 24px (nyaman ditunjuk), garisnya sendiri tipis.
+                    className="group/mark flex h-3 w-7 items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40"
+                  >
+                    <span
+                      aria-hidden
+                      className={cn(
+                        // Pendek & agak tebal; memanjang saat hover / fokus.
+                        "block h-[3px] rounded-full transition-[width,background-color] duration-200",
+                        "group-hover/mark:w-7 group-focus-visible/mark:w-7",
+                        active
+                          ? "w-[18px] bg-foreground/70"
+                          : "w-3.5 bg-foreground/30 group-hover/mark:bg-foreground/60",
+                      )}
+                    />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-56">
+                  <span className="line-clamp-2">{mark.preview}</span>
+                </TooltipContent>
+              </Tooltip>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/components/sessions/ModelPicker.tsx

@@ -0,0 +1,209 @@
+/**
+ * Pemilih model LLM untuk sebuah Session (meniru pilihan model di opencode).
+ *
+ * Dropdown `Select` sebelumnya menyulitkan saat provider punya puluhan model:
+ * tidak ada pencarian, dan di layar HP daftarnya panjang sekali. Sekarang
+ * trigger membuka dialog berisi `ModelSearchList` (kolom cari + daftar
+ * berkelompok per provider, model aktif ditandai).
+ *
+ * - Daftar model diambil dari `GET /api/projects/:id/models` — dimuat saat
+ *   dialog dibuka (fetch ulang tiap kali agar config opencode yang baru
+ *   ikut terbaca; server headless tidak di-spawn bila user tak pernah
+ *   membuka picker).
+ * - Perubahan dikirim via `PUT /api/sessions/:id` dan berlaku pada prompt
+ *   berikutnya tanpa restart Session.
+ * - Opsi "Model default" mengirim `model: null` (opencode memakai
+ *   konfigurasi default-nya).
+ * - `sessionId: null` (composer homepage, Session belum dibuat): pilihan
+ *   hanya diteruskan ke `onChanged` tanpa PUT — dipakai saat membuat Session.
+ */
+
+import { ChevronDownIcon, ChevronsUpDownIcon, SparklesIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ModelSearchList } from "@/components/sessions/ModelSearchList";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { activeModelLabel, keyOfSessionModel, shortModelName } from "@/lib/model-picker";
+import type { ModelOption } from "@/server/services/opencode-client";
+import type { SessionModel } from "@/types";
+
+export interface ModelPickerProps {
+  projectId: string;
+  /** null = Session belum ada; pilihan tidak disimpan ke server. */
+  sessionId: string | null;
+  /** Model aktif saat ini; null = default opencode. */
+  model: SessionModel | null;
+  /** Dipanggil setelah server menerima perubahan model. */
+  onChanged: (model: SessionModel | null) => void;
+  /**
+   * Bentuk trigger:
+   * - `heading` (default di header Session): judul besar tanpa border, nama
+   *   model dipendekkan (`shortModelName`) — pola aplikasi chat mobile.
+   * - `chip`: tombol outline ringkas untuk ditempel di dalam toolbar.
+   * - `inline`: teks polos + chevron tanpa border/latar (baris di bawah
+   *   composer homepage).
+   */
+  variant?: "heading" | "chip" | "inline";
+}
+
+export function ModelPicker({
+  projectId,
+  sessionId,
+  model,
+  onChanged,
+  variant = "chip",
+}: ModelPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [models, setModels] = useState<ModelOption[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const label = activeModelLabel(model, models ?? []);
+  /** Judul header: buang prefiks vendor & potong bila panjang. */
+  const headingLabel = shortModelName(label);
+
+  // Daftar model selalu di-fetch ulang saat dialog dibuka — list di server
+  // headless bisa berubah bila user mengedit config opencode (`opencode serve`
+  // tidak hot-reload). Lazy: tidak di-spawn saat halaman Session dibuka.
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    setError(null);
+    apiFetch(`/api/projects/${projectId}/models`)
+      .then(async (res) => {
+        const body = (await res.json()) as { models: ModelOption[] };
+        setModels(body.models);
+      })
+      .catch((e: unknown) => {
+        setError(e instanceof ApiError ? e.message : "Failed to load model list");
+        setModels([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [open, projectId]);
+
+  const choose = async (next: SessionModel | null) => {
+    setSaving(true);
+    setError(null);
+    try {
+      if (sessionId !== null) {
+        await apiFetch(`/api/sessions/${sessionId}`, {
+          method: "PUT",
+          body: JSON.stringify({ model: next }),
+        });
+      }
+      onChanged(next);
+      setOpen(false);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "Failed to change model");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <>
+      {variant === "heading" ? (
+        // Judul header: nama model + chevron sebagai isyarat "bisa diganti".
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => setOpen(true)}
+          disabled={saving}
+          className="h-8 max-w-full min-w-0 gap-1 px-2 text-base font-semibold"
+          aria-label={`Model: ${label}. Tap to change model`}
+          title={`Model: ${label}`}
+        >
+          <span className="min-w-0 truncate">{headingLabel}</span>
+          {saving ? (
+            <Spinner className="size-4 shrink-0" />
+          ) : (
+            <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground" />
+          )}
+        </Button>
+      ) : variant === "inline" ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => setOpen(true)}
+          disabled={saving}
+          className="h-9 max-w-full min-w-0 gap-1 px-2 font-normal text-muted-foreground hover:text-foreground"
+          aria-label={`Model: ${label}. Tap to change`}
+          title={label}
+        >
+          <span className="min-w-0 truncate">{headingLabel}</span>
+          {saving ? <Spinner data-icon="inline-end" /> : <ChevronDownIcon data-icon="inline-end" />}
+        </Button>
+      ) : (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setOpen(true)}
+          disabled={saving}
+          className="h-9 max-w-full min-w-0 justify-between gap-1.5 px-2.5 font-normal"
+          aria-label={`Model: ${label}. Tap to change`}
+          title={label}
+        >
+          <SparklesIcon className="size-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 truncate text-sm">{label}</span>
+          {saving ? (
+            <Spinner className="size-4 shrink-0" />
+          ) : (
+            <ChevronsUpDownIcon className="size-4 shrink-0 text-muted-foreground" />
+          )}
+        </Button>
+      )}
+
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (saving) return;
+          setOpen(next);
+          if (!next) setError(null);
+        }}
+      >
+        {/* Tinggi dipatok agar daftar panjang men-scroll di dalam dialog,
+            bukan menumbuhkan dialog melewati layar HP. */}
+        <DialogContent className="flex h-[70dvh] max-h-[560px] flex-col sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Choose a model</DialogTitle>
+            <DialogDescription>
+              {sessionId === null
+                ? "Used by the new session you start from here."
+                : "Applies to the next messages — no session restart needed."}
+            </DialogDescription>
+          </DialogHeader>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertTitle>Failed</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <ModelSearchList
+            models={models}
+            loading={loading}
+            activeKey={keyOfSessionModel(model)}
+            onSelect={(next) => void choose(next)}
+            disabled={saving}
+            className="flex-1"
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}