kcg-code 0.0.0-stage → 0.2.0

package/src/components/sessions/SessionRow.tsx

@@ -0,0 +1,237 @@
+/**
+ * Satu baris Session di daftar (`SessionList`) — baris boxed list ala
+ * AdwActionRow (libadwaita), sama dengan baris panel samping Project: logo
+ * agent 18px sebagai ikon, judul + subjudul (status berwarna · model ·
+ * waktu), tombol menu bundar sebagai suffix, lalu chevron navigasi.
+ * Badan baris adalah tombol buka (target sentuh lebar); aksi sekunder ada di
+ * menu "..." — di perangkat dengan pointer halus (mouse) menu baru muncul
+ * saat hover/fokus agar daftar tetap bersih, di layar sentuh selalu tampil.
+ * Pemanggil membungkusnya dengan `<li>` di dalam `PrefsGroup`.
+ */
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+  PlayIcon,
+  SquareIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS } from "@/lib/agent-types";
+import { formatRelativeTime } from "@/lib/project-overview";
+import { SESSION_STATUS_DOT, SESSION_STATUS_LABEL } from "@/lib/session-status";
+import { describeSessionModel } from "@/lib/session-summary";
+import { displaySessionTitle } from "@/lib/session-title";
+import { cn } from "@/lib/utils";
+import type { Session } from "@/types";
+
+export interface SessionRowProps {
+  session: Session;
+  /** Ada aksi berjalan untuk Session ini — kunci baris agar tidak dobel klik. */
+  busy: boolean;
+  onOpen: () => void;
+  onStop: () => void;
+  onStart: () => void;
+  onDelete: () => void;
+  /**
+   * Selection mode (hapus massal): kotak centang di depan, klik baris
+   * memilih/membatalkan pilihan, menu & chevron disembunyikan.
+   */
+  selectionMode?: boolean;
+  selected?: boolean;
+  onToggleSelect?: () => void;
+}
+
+/** Kotak centang ala GtkCheckButton (GTK4): kotak membulat, terisi aksen. */
+function CheckBox({ checked }: { checked: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border-2 transition-colors",
+        checked
+          ? "border-primary bg-primary text-primary-foreground"
+          : "border-muted-foreground/45",
+      )}
+    >
+      {checked && <CheckIcon className="size-3" strokeWidth={3.5} />}
+    </span>
+  );
+}
+
+/** Warna teks status di subjudul (selaras status MCP di panel samping). */
+const STATUS_TEXT: Record<Session["status"], string> = {
+  running: "text-emerald-700 dark:text-emerald-400",
+  crashed: "text-destructive",
+  stopped: "text-muted-foreground",
+};
+
+/**
+ * Status di awal subjudul — titik + label berwarna, seperti status MCP.
+ * `stopped` (keadaan biasa) tidak ditampilkan agar daftar tidak ramai.
+ */
+function StatusLabel({ session, busy }: { session: Session; busy: boolean }) {
+  if (busy) {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1.5">
+        <Spinner className="size-3" />
+        Working…
+      </span>
+    );
+  }
+  if (session.status === "stopped") return null;
+  const running = session.status === "running";
+  return (
+    <span className={cn("inline-flex shrink-0 items-center gap-1.5", STATUS_TEXT[session.status])}>
+      <span className="relative flex size-1.5" aria-hidden>
+        {running && (
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full",
+            SESSION_STATUS_DOT[session.status],
+          )}
+        />
+      </span>
+      {SESSION_STATUS_LABEL[session.status]}
+    </span>
+  );
+}
+
+/** Pemisah "·" di subjudul; jarak kiri/kanan datang dari `gap` induk. */
+function Dot() {
+  return (
+    <span className="opacity-50" aria-hidden>
+      ·
+    </span>
+  );
+}
+
+export function SessionRow({
+  session,
+  busy,
+  onOpen,
+  onStop,
+  onStart,
+  onDelete,
+  selectionMode = false,
+  selected = false,
+  onToggleSelect,
+}: SessionRowProps) {
+  const running = session.status === "running";
+  const title = displaySessionTitle(session.title);
+  const agentLabel = AGENT_TYPE_LABELS[session.agentType];
+  const hasStatus = busy || session.status !== "stopped";
+
+  return (
+    // Baris AdwActionRow yang bisa diaktifkan — sama dengan baris di panel
+    // samping: ikon simbolik 18px, judul 15px + subjudul 13px, suffix, lalu
+    // chevron. Tombol buka "direntangkan" (after:inset-0) sehingga seluruh
+    // baris, termasuk chevron, bisa diklik; tombol menu berada di atasnya.
+    <div
+      className={cn(
+        "group relative flex min-h-14 items-center gap-3 pr-4 pl-4 transition-colors hover:bg-muted/60 has-focus-visible:bg-muted/60 has-[button:active]:bg-muted",
+        selectionMode && selected && "bg-primary/[0.06]",
+      )}
+    >
+      {selectionMode && <CheckBox checked={selected} />}
+      <AgentLogo agentType={session.agentType} className="size-[18px] text-muted-foreground" />
+      <button
+        type="button"
+        onClick={selectionMode ? onToggleSelect : onOpen}
+        disabled={busy}
+        aria-pressed={selectionMode ? selected : undefined}
+        title={`${title} — ${agentLabel}`}
+        className="flex min-w-0 flex-1 flex-col gap-0.5 py-2.5 text-left outline-none after:absolute after:inset-0 focus-visible:after:ring-[3px] focus-visible:after:ring-ring/40 focus-visible:after:ring-inset disabled:opacity-60"
+        aria-label={`${selectionMode ? "Select" : "Open"} session ${title}, ${agentLabel}, ${SESSION_STATUS_LABEL[session.status]}`}
+      >
+        <span className="truncate text-[15px] leading-5">{title}</span>
+        <span className="flex min-w-0 items-center gap-1.5 text-[13px] leading-snug text-muted-foreground">
+          <StatusLabel session={session} busy={busy} />
+          {/* Layar sempit + ada status: model disembunyikan (terpotong jadi
+              tak terbaca); status & waktu lebih penting. */}
+          <span className={cn("contents", hasStatus && "max-sm:hidden")}>
+            {hasStatus && <Dot />}
+            <span className="truncate">{describeSessionModel(session)}</span>
+          </span>
+          <Dot />
+          <span className="shrink-0 tabular-nums">{formatRelativeTime(session.updatedAt)}</span>
+        </span>
+      </button>
+
+      {!selectionMode && (
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              {/* Suffix: tombol bundar datar. Mouse: muncul saat hover/fokus;
+                  layar sentuh: selalu tampil. */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                disabled={busy}
+                aria-label={`Session actions ${title}`}
+                className="relative z-10 shrink-0 rounded-full text-muted-foreground transition-opacity pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100"
+              >
+                <MoreHorizontalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {running ? (
+                <DropdownMenuItem onSelect={onStop}>
+                  <SquareIcon />
+                  Stop
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem onSelect={onStart}>
+                  <PlayIcon />
+                  Start
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive" onSelect={onDelete}>
+                <Trash2Icon />
+                Delete permanently
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+        </>
+      )}
+    </div>
+  );
+}
+
+/** Placeholder daftar Session saat memuat — bentuk boxed list yang sama. */
+export function SessionListSkeleton() {
+  return (
+    <div className="flex flex-col gap-2.5" aria-hidden>
+      <div className="flex flex-col gap-1.5 px-1">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-3 w-36" />
+      </div>
+      <div className="flex flex-col divide-y overflow-hidden rounded-xl border bg-card">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="flex min-h-14 items-center gap-3 px-4 py-2.5">
+            <Skeleton className="size-[18px] shrink-0 rounded" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <Skeleton className="h-4" style={{ width: `${55 - i * 10}%` }} />
+              <Skeleton className="h-3 w-40" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/sessions/SessionTimeline.tsx

@@ -0,0 +1,275 @@
+/**
+ * Timeline percakapan terstruktur: daftar pesan yang dapat di-scroll dengan
+ * tombol "kembali ke bawah", maskot global, serta catatan error/empty/status.
+ *
+ * Dipisah dari `SessionView` agar halaman hanya menyusun area; pemetaan
+ * pesan -> grup turn & status maskot dihitung di sini dari `messages` murni
+ * (`lib/turns.ts`).
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+  useMessageScroller,
+} from "@/components/ui/message-scroller";
+import type { CollapsibleState } from "@/lib/collapsible";
+import { TIMELINE_MAX_W } from "@/lib/layout";
+import { groupTurns, lastAssistantGroup, textOf, turnStatus } from "@/lib/turns";
+import { cn } from "@/lib/utils";
+import type { SessionMessage, SessionStatus } from "@/types";
+import { AssistantTurn } from "./AssistantTurn";
+import { Mascot } from "./Mascot";
+import { MessageRail, type UserMessageMark } from "./MessageRail";
+import { UserMessage } from "./UserMessage";
+
+export interface SessionTimelineProps {
+  /** Error banner global (bukan error kartu prompt). */
+  error: string | null;
+  /** Status Session saat ini (catatan "Session stopped…" di bawah). */
+  status: SessionStatus;
+  messages: SessionMessage[];
+  /** Status toggle blok "Thought process" per turn. */
+  collapsible: CollapsibleState;
+  onToggle: (key: string) => void;
+  /** Model sedang merespon (turn aktif + Session running). */
+  generating: boolean;
+}
+
+export function SessionTimeline({
+  error,
+  status,
+  messages,
+  collapsible,
+  onToggle,
+  generating,
+}: SessionTimelineProps) {
+  /**
+   * Ambang "menempel ke bawah" (dan kemunculan tombol panah) = setinggi SATU
+   * viewport. Tinggi area scroll diukur dinamis (bukan angka tetap) agar
+   * perilakunya benar di tiap ukuran layar / saat tinggi area berubah (mis.
+   * composer membesar).
+   */
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [viewportHeight, setViewportHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) return;
+    const update = () => setViewportHeight(viewport.clientHeight);
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
+  const groups = useMemo(() => groupTurns(messages), [messages]);
+  const lastTurn = lastAssistantGroup(groups);
+
+  /**
+   * Penanda rail: satu per pesan user, dengan cuplikan teks untuk tooltip.
+   * Pesan tanpa teks (mis. lampiran saja) tetap dapat penanda.
+   */
+  const marks = useMemo<UserMessageMark[]>(
+    () =>
+      messages
+        .filter((m) => m.role === "user")
+        .map((m) => {
+          const text = textOf(m.parts).trim().replace(/\s+/g, " ");
+          return {
+            id: m.id,
+            preview: text === "" ? "Attachment" : text.slice(0, 120),
+          };
+        }),
+    [messages],
+  );
+
+  /** Elemen tiap pesan user (target observer & tujuan lompat). */
+  const markEls = useRef(new Map<string, HTMLElement>());
+  const [activeMark, setActiveMark] = useState<string | null>(null);
+
+  // Penanda aktif = pesan user paling bawah yang bagian atasnya sudah lewat
+  // (atau dekat) tepi atas viewport — itulah bagian percakapan yang sedang
+  // dibaca. Dihitung dari rect, tidak menyimpan state scroll sendiri.
+  const syncActive = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) return;
+    const top = viewport.getBoundingClientRect().top;
+    let current: string | null = null;
+    for (const mark of marks) {
+      const el = markEls.current.get(mark.id);
+      if (el && el.getBoundingClientRect().top - top <= 24) current = mark.id;
+    }
+    setActiveMark(current ?? marks[0]?.id ?? null);
+  }, [marks]);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null || marks.length < 2) return;
+    syncActive();
+    // `passive`: handler hanya membaca rect, tidak pernah preventDefault.
+    viewport.addEventListener("scroll", syncActive, { passive: true });
+    return () => viewport.removeEventListener("scroll", syncActive);
+  }, [marks.length, syncActive]);
+
+  const registerMarkEl = useCallback((id: string, el: HTMLElement | null) => {
+    if (el) markEls.current.set(id, el);
+    else markEls.current.delete(id);
+  }, []);
+
+  const jumpTo = useCallback((id: string) => {
+    const el = markEls.current.get(id);
+    const viewport = viewportRef.current;
+    if (!el || !viewport) return;
+    // Lompat dengan sedikit ruang di atas agar pesan tidak menempel ke tepi.
+    const offset = el.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+    viewport.scrollTo({ top: viewport.scrollTop + offset - 16, behavior: "smooth" });
+  }, []);
+
+  /**
+   * Maskot GLOBAL (satu instance, bukan per-turn): status dihitung dari grup
+   * assistant yang masih LIVE (sedang streaming) dan ditampilkan tetap di atas
+   * composer — tidak ikut scroll bersama riwayat percakapan.
+   *
+   * Turn lama yang sudah selesai TIDAK ikut menentukan status: begitu user
+   * mengirim pesan baru, grup assistant terakhir masih milik jawaban
+   * sebelumnya — tanpa filter ini maskot langsung menampilkan "Writing…"
+   * (dari jawaban lama) padahal model belum mulai merespons. Belum ada
+   * konten baru -> "Starting…" (lihat fallback di bawah).
+   */
+  const liveTurn = lastTurn?.messages.some((m) => m.streaming === true) ? lastTurn : null;
+  const mascotStatus = generating
+    ? ((liveTurn ? turnStatus(liveTurn.messages, true) : null) ?? "Starting…")
+    : null;
+
+  return (
+    // `autoScroll` bawaan provider DIMATIKAN: mesinnya menempel ke dasar setiap
+    // kali tinggi konten berubah — termasuk saat user membuka/menutup blok
+    // "Thought process" (state collapsible) sehingga layar terseret ke bawah.
+    // Penggantinya `AutoScrollFollow` di bawah: hanya mengikuti saat isi
+    // TIMELINE bertambah (pesan baru/streaming/status/error), bukan saat
+    // toggle collapsible. `scrollEdgeThreshold` tetap dipakai untuk ambang
+    // tombol panah (1 viewport).
+    <MessageScrollerProvider autoScroll={false} scrollEdgeThreshold={viewportHeight}>
+      {/* Pengganti auto-follow bawaan — lihat komentar komponen di bawah. */}
+      <AutoScrollFollow
+        messages={messages}
+        status={status}
+        error={error}
+        viewportRef={viewportRef}
+      />
+      <MessageScroller className="min-h-0 flex-1">
+        <MessageScrollerViewport ref={viewportRef}>
+          {/* `TIMELINE_MAX_W mx-auto`: di layar lebar baris teks yang membentang
+              penuh sulit dibaca; kolom percakapan dibatasi dan dipusatkan
+              seperti aplikasi chat lain, sementara scrollbar tetap di tepi. */}
+          <MessageScrollerContent
+            className={cn("mx-auto w-full gap-6 px-3 py-4 sm:gap-8 sm:px-4", TIMELINE_MAX_W)}
+          >
+            {error && (
+              <MessageScrollerItem messageId="error">
+                <p className="text-sm text-destructive">{error}</p>
+              </MessageScrollerItem>
+            )}
+            {groups.map((group) =>
+              group.kind === "user" ? (
+                <div
+                  key={group.message.id}
+                  ref={(el) => registerMarkEl(group.message.id, el)}
+                  // `scroll-mt-4`: cadangan bila lompat dilakukan browser.
+                  className="scroll-mt-4"
+                >
+                  <UserMessage message={group.message} />
+                </div>
+              ) : (
+                <AssistantTurn
+                  key={group.id}
+                  group={group}
+                  collapsible={collapsible}
+                  onToggle={onToggle}
+                />
+              ),
+            )}
+            {/* Maskot GLOBAL — selalu menjadi item paling bawah di scroller,
+                ikut scroll bersama konten (ala Claude). Status:
+                - "Starting…" saat generating tapi respons belum datang
+                - mascotStatus (Working/Thinking/Writing/tool) saat ada turn aktif
+                - standby (logo diam) setelah selesai, selama ada riwayat */}
+            {messages.length > 0 && (
+              <MessageScrollerItem messageId="mascot">
+                <Mascot
+                  label={generating ? (mascotStatus ?? "Starting…") : null}
+                  active={generating}
+                  standby
+                  className="px-1"
+                />
+              </MessageScrollerItem>
+            )}
+          </MessageScrollerContent>
+        </MessageScrollerViewport>
+        {/* Rail penanda pesan user (tepi kiri area percakapan). */}
+        <MessageRail marks={marks} activeId={activeMark} onJump={jumpTo} />
+        <MessageScrollerButton />
+      </MessageScroller>
+    </MessageScrollerProvider>
+  );
+}
+
+interface AutoScrollFollowProps {
+  /** Perubahan pada prop berikut yang boleh memicu auto-follow ke bawah. */
+  messages: SessionMessage[];
+  status: SessionStatus;
+  error: string | null;
+  viewportRef: { current: HTMLDivElement | null };
+}
+
+/**
+ * Pengganti `autoScroll` bawaan MessageScroller (yang dimatikan di provider).
+ *
+ * Aturan UX:
+ * - Selama pengguna masih kurang dari satu layar di atas dasar percakapan
+ *   (tombol panah belum muncul), isi timeline yang BERTAMBAH — respon baru /
+ *   pesan streaming / catatan status — tetap memaksa scroll ke dasar.
+ * - Setelah scroll ke atas satu layar penuh atau lebih, konten baru TIDAK
+ *   menarik layar (tombol panah yang mengembalikannya).
+ * - Membuka/menutup blok "Thought process" TIDAK memicu scroll: toggle hanya
+ *   mengubah state collapsible (bukan `messages`/`status`/`error`), jadi efek
+ *   ini tidak berjalan dan posisi baca pengguna tetap dipertahankan.
+ *
+ * Scroll hanya dijalankan bila tinggi konten benar-benar bertambah (perubahan
+ * pesan yang tidak mengubah layout — mis. part tool di blok yang masih
+ * collapsed — tidak boleh menarik layar).
+ */
+function AutoScrollFollow({ messages, status, error, viewportRef }: AutoScrollFollowProps) {
+  const { scrollToEnd } = useMessageScroller();
+  /** scrollHeight dari commit terakhir — baseline deteksi konten bertambah. */
+  const lastContentHeightRef = useRef<number | null>(null);
+
+  // Dipicu hanya saat isi timeline berubah (pesan/status/error) — bukan saat
+  // toggle collapsible. Diletakkan SEBELUM efek baseline di bawah: di commit
+  // yang sama ia membaca tinggi konten dari commit SEBELUMNYA.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `messages`/`status`/`error` sengaja jadi trigger — keputusan scroll dibaca dari DOM (scrollHeight/scrollTop), bukan dari nilai closure.
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) return;
+    const previousHeight = lastContentHeightRef.current;
+    const grew = previousHeight === null || viewport.scrollHeight > previousHeight;
+    if (!grew) return;
+    const distanceToBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    if (distanceToBottom <= viewport.clientHeight) scrollToEnd();
+  }, [messages, status, error, viewportRef, scrollToEnd]);
+
+  // Baseline tinggi konten selalu diperbarui di setiap commit — termasuk saat
+  // toggle collapsible / resize — agar commit pesan berikutnya dibandingkan
+  // dengan tinggi yang benar.
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport !== null) lastContentHeightRef.current = viewport.scrollHeight;
+  });
+
+  return null;
+}

package/src/components/sessions/SessionTimelineSkeleton.tsx

@@ -0,0 +1,83 @@
+/**
+ * Kerangka loading percakapan Session.
+ *
+ * Dipakai di dua fase berurutan dengan tampilan IDENTIK agar tidak ada
+ * kedipan saat fase berganti:
+ * 1. `SessionPage` — data Session dimuat (`GET /api/sessions`).
+ * 2. `SessionView` — Session sudah ada, menunggu riwayat (`history`) dari
+ *    WebSocket. Tanpa ini, `messages` kosong sesaat tampil sebagai
+ *    empty-state "No conversation yet" padahal percakapannya ada.
+ *
+ * Bentuk meniru timeline asli (gelembung user di kanan, paragraf assistant
+ * di kiri) dengan lebar kolom yang sama (`TIMELINE_MAX_W`), lalu memudar
+ * masuk setelah jeda singkat — koneksi cepat tidak sempat melihat kilatan
+ * kerangka sama sekali.
+ */
+import { Skeleton } from "@/components/ui/skeleton";
+import { CONVERSATION_MAX_W, TIMELINE_MAX_W } from "@/lib/layout";
+import { cn } from "@/lib/utils";
+
+/** Satu turn: gelembung user + beberapa baris jawaban. */
+const TURNS: { user: string; lines: string[] }[] = [
+  { user: "w-[46%]", lines: ["w-[92%]", "w-[84%]", "w-[58%]"] },
+  { user: "w-[32%]", lines: ["w-[88%]", "w-[70%]"] },
+];
+
+export function SessionTimelineSkeleton({ className }: { className?: string }) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-label="Loading conversation"
+      className={cn(
+        "min-h-0 flex-1 overflow-hidden",
+        // Muncul setelah 150ms: muatan cepat tidak berkedip.
+        "animate-in fade-in fill-mode-both delay-150 duration-300 motion-reduce:animate-none",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "mx-auto flex w-full flex-col gap-6 px-3 py-4 sm:gap-8 sm:px-4",
+          TIMELINE_MAX_W,
+        )}
+      >
+        {TURNS.map((t, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: kerangka statis
+          <div key={i} className="flex flex-col gap-4">
+            <Skeleton className={cn("ml-auto h-11 rounded-2xl rounded-br-md", t.user)} />
+            <div className="flex flex-col gap-2.5 px-1">
+              {t.lines.map((w, j) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: kerangka statis
+                <Skeleton key={j} className={cn("h-3.5 rounded-full", w)} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <span className="sr-only">Loading conversation…</span>
+    </div>
+  );
+}
+
+/**
+ * Kerangka composer. Struktur & ukuran MENIRU `SessionComposer` (footer +
+ * kotak `rounded-xl border p-2` + satu baris setinggi `size-9`) sehingga
+ * tingginya identik (54px) dan tidak ada lompatan saat composer asli muncul.
+ */
+export function SessionComposerSkeleton() {
+  return (
+    <div className="shrink-0 scrollbar-gutter-stable overflow-y-hidden px-3 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-4">
+      <div
+        className={cn(
+          "mx-auto flex w-full items-center gap-2 rounded-xl border bg-card/80 p-2 shadow-sm",
+          CONVERSATION_MAX_W,
+        )}
+      >
+        <Skeleton className="size-9 shrink-0 rounded-md" />
+        <Skeleton className="h-3.5 flex-1 rounded-full" />
+        <Skeleton className="size-9 shrink-0 rounded-md" />
+      </div>
+    </div>
+  );
+}