kcg-code 0.0.0-stage → 0.2.0

package/src/hooks/useSessionChat.ts

@@ -0,0 +1,427 @@
+/**
+ * Engine percakapan Session (headless) — state & efek yang dulu tinggal di
+ * `SessionView.tsx`, dipisah menjadi custom hook agar halaman tinggal
+ * merender.
+ *
+ * Konsumen:
+ * - `SessionView` — menyusun header/timeline/prompt/composer dari hasil hook.
+ * - Koneksi WS (`useWebSocket`) dilampirkan ke `session.id`; `history`,
+ *   `message`, `prompt`, `session_status`, dst. diterjemahkan ke state di
+ *   sini (daftar pesan, kartu prompt, status Session, error banner).
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useWebSocket, type WsConnectionStatus } from "@/hooks/useWebSocket";
+import { ApiError, apiFetch } from "@/lib/api";
+import { type CollapsibleState, extendCollapsed, toggleCollapsible } from "@/lib/collapsible";
+import { notifyDataChanged } from "@/lib/data-events";
+import { peekPendingPrompt, setPendingPrompt, takePendingPrompt } from "@/lib/pending-prompt";
+import { groupPrompts } from "@/lib/prompts";
+import { wsStatusLabel } from "@/lib/session-status";
+import {
+  appendMessagePartDelta,
+  groupTurns,
+  turnBlocks,
+  turnSegments,
+  upsertMessage,
+  upsertMessagePart,
+} from "@/lib/turns";
+import type {
+  InteractivePrompt,
+  PromptResponse,
+  Session,
+  SessionMessage,
+  SessionStatus,
+} from "@/types";
+import type { ClientMessage, ServerMessage } from "@/ws-protocol";
+
+export interface UseSessionChatOptions {
+  session: Session;
+  onBack: () => void;
+  /** Dipanggil setelah Session dihapus dari menu aksi header. */
+  onDeleted?: () => void;
+}
+
+export interface SessionChat {
+  // Koneksi & status
+  wsStatus: WsConnectionStatus;
+  /** Kirim pesan Client -> Server (dipakai composer untuk `input`/`interrupt`). */
+  send: (msg: ClientMessage) => void;
+  status: SessionStatus;
+  /** Model sedang merespon: turn aktif atau masih ada pesan streaming. */
+  busy: boolean;
+  /** Model sedang merespon DAN Session berjalan (untuk tombol Stop). */
+  generating: boolean;
+  /** Input dapat dipakai (koneksi + Session running + tidak sibuk). */
+  canInput: boolean;
+  error: string | null;
+  /** Set error banner global (dipakai composer saat upload/kirim gagal). */
+  reportError: (message: string | null) => void;
+
+  // Data percakapan
+  messages: SessionMessage[];
+  /**
+   * Riwayat awal (`history`) sudah diterima dari server. Sebelum ini,
+   * `messages` kosong BUKAN berarti percakapan kosong — UI menampilkan
+   * kerangka loading, bukan empty-state "No conversation yet".
+   */
+  historyLoaded: boolean;
+  /** Status toggle blok "Thought process" per turn. */
+  collapsible: CollapsibleState;
+  toggleBlock: (key: string) => void;
+
+  // Prompt pending
+  prompts: InteractivePrompt[];
+  /** Prompt pending yang digroup (kind + title identik) jadi satu kartu. */
+  promptGroups: InteractivePrompt[][];
+  /** Ada question pending — composer digantikan panel question docked. */
+  hasPendingQuestion: boolean;
+  promptError: string | null;
+  consumePromptError: () => void;
+  /** Prompt yang sedang memainkan animasi keluar sebelum dihapus. */
+  resolvePrompt: (promptId: string, response: PromptResponse) => void;
+
+  // Aksi Session
+  interrupt: () => void;
+  starting: boolean;
+  start: () => Promise<void>;
+  stopping: boolean;
+  stop: () => Promise<void>;
+  /** Dialog konfirmasi hapus Session (dirender `SessionView`). */
+  deleteOpen: boolean;
+  beginDelete: () => void;
+  cancelDelete: () => void;
+  deleting: boolean;
+  confirmDelete: () => Promise<void>;
+}
+
+/** Id pesan user optimistis (prompt pertama dari homepage). */
+const OPTIMISTIC_ID = "optimistic:first-prompt";
+
+export function useSessionChat({ session, onBack, onDeleted }: UseSessionChatOptions): SessionChat {
+  /**
+   * Prompt pertama dari homepage langsung tampil sebagai pesan user sejak
+   * frame pertama — layout Session view sudah dalam bentuk percakapan
+   * (composer di dasar) saat View Transition memotret halaman tujuan, dan
+   * user tidak melihat kilatan "No conversation yet". Dilepas begitu echo
+   * pesan user asli (id server) tiba.
+   */
+  const [optimistic, setOptimistic] = useState<SessionMessage | null>(() => {
+    const text = peekPendingPrompt(session.id);
+    return text === null
+      ? null
+      : {
+          id: OPTIMISTIC_ID,
+          sessionId: session.id,
+          role: "user",
+          parts: [{ type: "text", text }],
+          createdAt: Date.now(),
+        };
+  });
+  const [serverMessages, setMessages] = useState<SessionMessage[]>([]);
+  const hasRealUser = serverMessages.some((m) => m.role === "user");
+  const messages = useMemo(
+    () => (optimistic && !hasRealUser ? [optimistic, ...serverMessages] : serverMessages),
+    [optimistic, hasRealUser, serverMessages],
+  );
+  // Echo asli tiba -> buang pesan optimistis.
+  useEffect(() => {
+    if (optimistic && hasRealUser) setOptimistic(null);
+  }, [optimistic, hasRealUser]);
+  const [collapsible, setCollapsible] = useState<CollapsibleState>({});
+  const [prompts, setPrompts] = useState<InteractivePrompt[]>([]);
+  const [status, setStatus] = useState<SessionStatus>(session.status);
+  const [error, setError] = useState<string | null>(null);
+  /** Error resolusi prompt — tampil di kartunya (bukan banner global). */
+  const [promptError, setPromptError] = useState<string | null>(null);
+  /** Turn aktif dari server (`turn_active`): model sedang merespon. */
+  const [turnActive, setTurnActive] = useState(false);
+  const [starting, setStarting] = useState(false);
+  const [stopping, setStopping] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  /** `history` sudah diterima — attach selesai, aman mengirim input. */
+  const [historyLoaded, setHistoryLoaded] = useState(false);
+
+  /**
+   * `onBack` dibaca lewat ref agar handler WS tidak perlu dibuat ulang
+   * (dan koneksi WebSocket tidak di-attach ulang) tiap callback berubah.
+   */
+  const onBackRef = useRef(onBack);
+  onBackRef.current = onBack;
+
+  const onMessage = useCallback(
+    (msg: ServerMessage) => {
+      switch (msg.type) {
+        case "history":
+          setError(null);
+          setMessages(msg.messages);
+          setPrompts(msg.prompts);
+          // Pesan lama tampil penuh; turn tidak mungkin aktif saat reattach.
+          setTurnActive(false);
+          // Blok "Thought process" di-reset: state collapsible diisi ulang oleh
+          // effect sinkronisasi di bawah (default collapsed per turn).
+          setCollapsible({});
+          setHistoryLoaded(true);
+          break;
+        case "message":
+          setError(null);
+          // Replace versi streaming (id sama) atau tambahkan pesan baru.
+          setMessages((prev) => upsertMessage(prev, msg.message));
+          break;
+        case "message_part":
+          setError(null);
+          // Upsert part streaming (snapshot utuh): opencode mengirimnya saat part
+          // dibuat (teks kosong) dan saat selesai (teks lengkap). Isi di
+          // antaranya datang lewat `message_part_delta` di bawah.
+          setMessages((prev) => upsertMessagePart(prev, msg.sessionId, msg.messageId, msg.part));
+          break;
+        case "message_part_delta":
+          // Token model (opencode `message.part.delta`): teks bertambah per
+          // potongan -> efek mengetik seperti TUI opencode.
+          setMessages((prev) =>
+            appendMessagePartDelta(prev, msg.messageId, msg.partId, msg.field, msg.delta),
+          );
+          break;
+        case "prompt":
+          setError(null);
+          setPrompts((prev) =>
+            prev.some((p) => p.id === msg.prompt.id) ? prev : [...prev, msg.prompt],
+          );
+          break;
+        case "prompt_resolved":
+          // Langsung dihapus; animasi keluar kartu ditangani `AnimatePresence`
+          // di `PromptPanel` (kartu tetap di DOM sampai animasinya selesai).
+          setPrompts((prev) => prev.filter((p) => p.id !== msg.promptId));
+          break;
+        case "session_status":
+          // Kini dikirim ke semua koneksi — abaikan milik Session lain.
+          if (msg.sessionId !== session.id) break;
+          setStatus(msg.status);
+          // Session non-running -> tidak mungkin ada model yang merespon.
+          if (msg.status !== "running") setTurnActive(false);
+          break;
+        case "turn_active":
+          setTurnActive(msg.active);
+          break;
+        case "session_deleted":
+          // Kini dikirim ke semua koneksi — hanya Session ini yang ditinggalkan.
+          if (msg.sessionId !== session.id) break;
+          // Session dihapus dari tempat lain — kembali ke daftar Session.
+          onBackRef.current();
+          break;
+        case "error":
+          // Prompt kedaluwarsa: kartunya sudah dihapus lewat `prompt_resolved`,
+          // jadi pesannya tampil di timeline (bukan di kartu — kartu
+          // berikutnya tidak boleh mewarisi error ini).
+          if (msg.code === "PROMPT_EXPIRED") {
+            setError(msg.message);
+            break;
+          }
+          // Error terkait prompt ditampilkan di kartunya masing-masing —
+          // banner global di atas chat tidak terlihat oleh user yang sedang
+          // fokus ke kartu (tombol terasa "mati" tanpa feedback).
+          if (
+            msg.code === "PROMPT_NOT_FOUND" ||
+            msg.code === "PROMPT_ALREADY_RESOLVED" ||
+            msg.code === "PROMPT_FAILED"
+          ) {
+            setPromptError(msg.message);
+            break;
+          }
+          setError(msg.message);
+          break;
+      }
+      // `session.id` stabil per mount (SessionView di-key per id).
+    },
+    [session.id],
+  );
+
+  const {
+    status: wsStatus,
+    attach,
+    send,
+    disconnect,
+  } = useWebSocket({
+    onMessage,
+  });
+
+  useEffect(() => {
+    attach(session.id);
+    return () => disconnect();
+  }, [attach, disconnect, session.id]);
+
+  /**
+   * Prompt pertama dari chat homepage (`HomeChat`): dikirim sekali setelah
+   * attach selesai (`history` diterima). `takePendingPrompt` menghapusnya
+   * sehingga tidak terkirim ulang saat reconnect / remount.
+   */
+  useEffect(() => {
+    if (!historyLoaded || wsStatus !== "connected") return;
+    const text = takePendingPrompt(session.id);
+    if (text === null) return;
+    // Socket belum siap -> kembalikan agar dicoba lagi saat terhubung ulang.
+    if (!send({ type: "input", sessionId: session.id, text })) setPendingPrompt(session.id, text);
+  }, [historyLoaded, wsStatus, send, session.id]);
+
+  /**
+   * Sinkronisasi key collapsible "Thought process": satu blok per turn
+   * (id pesan pertama grup), default collapsed. `extendCollapsed` tidak
+   * mengubah key yang sudah ada sehingga toggle user tetap dipertahankan
+   * saat daftar pesan bertambah/berubah saat streaming.
+   */
+  useEffect(() => {
+    setCollapsible((prev) => {
+      const keys: string[] = [];
+      for (const g of groupTurns(messages)) {
+        if (g.kind !== "assistant") continue;
+        if (
+          !g.messages.some((m) => m.parts.some((p) => p.type === "reasoning" || p.type === "tool"))
+        )
+          continue;
+        const segs = turnSegments(g.messages);
+        for (const block of turnBlocks(segs)) {
+          if (block.steps.length > 0) keys.push(`${g.id}:${block.key}`);
+        }
+      }
+      return extendCollapsed(prev, keys);
+    });
+  }, [messages]);
+
+  const toggleBlock = useCallback((key: string) => {
+    setCollapsible((s) => toggleCollapsible(s, key));
+  }, []);
+
+  const consumePromptError = useCallback(() => setPromptError(null), []);
+
+  const resolvePrompt = useCallback(
+    (promptId: string, response: PromptResponse) => {
+      // Melempar bila tidak terhubung: kartu menangkapnya dan menampilkan
+      // error — send() yang diam-diam dibuang membuat tombol terasa mati.
+      if (wsStatus !== "connected") {
+        throw new Error(`Not connected (${wsStatusLabel(wsStatus)}). Try again.`);
+      }
+      send({ type: "prompt_response", sessionId: session.id, promptId, response });
+    },
+    [send, session.id, wsStatus],
+  );
+
+  const reportError = useCallback((message: string | null) => setError(message), []);
+
+  /**
+   * Hentikan balasan model (interrupt ala opencode) — Session tetap aktif.
+   * Server membuang parts turn parsial (tidak disimpan), dan di sini kita
+   * juga membersihkan respon parsial yang sudah tampil di UI agar hilang
+   * dari percakapan (pesan user & turn sebelumnya tetap utuh).
+   */
+  const interrupt = useCallback(() => {
+    send({ type: "interrupt", sessionId: session.id });
+    setMessages((prev) => prev.filter((m) => !(m.role === "assistant" && m.streaming === true)));
+    setTurnActive(false);
+  }, [send, session.id]);
+
+  /** Resume via API langsung — hasil status baru tiba via WS `session_status`. */
+  const start = useCallback(async () => {
+    setStarting(true);
+    setError(null);
+    try {
+      await apiFetch(`/api/sessions/${session.id}`, { method: "POST" });
+      // Status baru dikirim gateway ke semua subscriber; tak perlu setState di sini.
+      toast.success("Session resumed.");
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : "Couldn't resume the session.");
+    } finally {
+      setStarting(false);
+    }
+  }, [session.id]);
+
+  /**
+   * Hentikan Session (bukan hanya balasan model): status -> `stopped`.
+   * Berbeda dari tombol Stop di composer yang hanya meng-interrupt turn.
+   */
+  const stop = useCallback(async () => {
+    setStopping(true);
+    setError(null);
+    try {
+      await apiFetch(`/api/sessions/${session.id}/stop`, { method: "POST" });
+      toast.success("Session stopped.");
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : "Couldn't stop the session.");
+    } finally {
+      setStopping(false);
+    }
+  }, [session.id]);
+
+  /** Hapus Session permanen dari menu aksi header (dikonfirmasi lebih dulu). */
+  const beginDelete = useCallback(() => setDeleteOpen(true), []);
+  const cancelDelete = useCallback(() => setDeleteOpen(false), []);
+  const confirmDelete = useCallback(async () => {
+    setDeleting(true);
+    setError(null);
+    try {
+      await apiFetch(`/api/sessions/${session.id}`, { method: "DELETE" });
+      setDeleteOpen(false);
+      toast.success("Session deleted.");
+      notifyDataChanged();
+      (onDeleted ?? onBack)();
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : "Couldn't delete the session.");
+    } finally {
+      setDeleting(false);
+    }
+  }, [session.id, onBack, onDeleted]);
+
+  /**
+   * Model sedang merespon: server melaporkan turn aktif (`turn_active`), atau
+   * masih ada pesan assistant `streaming` yang belum digantikan versi final
+   * (fallback saat reattach di tengah turn).
+   */
+  const busy = turnActive || messages.some((m) => m.role === "assistant" && m.streaming === true);
+  const generating = busy && status === "running";
+  // Saat model merespon input dinonaktifkan — satu-satunya aksi adalah Stop.
+  const canInput = wsStatus === "connected" && status === "running" && !busy;
+
+  /**
+   * Grup prompt pending untuk panel floating di atas composer — permission
+   * identik (kind+title sama) digroup jadi SATU kartu (bug kartu nyepam).
+   */
+  const promptGroups = useMemo(() => groupPrompts(prompts), [prompts]);
+  /**
+   * Ada question pending? Composer disembunyikan dan panel question docked
+   * menggantikannya — jawaban pertanyaan adalah input saat ini (ala TUI
+   * opencode yang menutup input teks selama question aktif). Permission
+   * kartu tidak menggantikan composer (tetap floating).
+   */
+  const hasPendingQuestion = useMemo(() => prompts.some((p) => p.kind === "question"), [prompts]);
+
+  return {
+    wsStatus,
+    send,
+    status,
+    busy,
+    generating,
+    canInput,
+    error,
+    reportError,
+    messages,
+    historyLoaded,
+    collapsible,
+    toggleBlock,
+    prompts,
+    promptGroups,
+    hasPendingQuestion,
+    promptError,
+    consumePromptError,
+    resolvePrompt,
+    interrupt,
+    starting,
+    start,
+    stopping,
+    stop,
+    deleteOpen,
+    beginDelete,
+    cancelDelete,
+    deleting,
+    confirmDelete,
+  };
+}

package/src/hooks/useSessionContext.ts

@@ -0,0 +1,106 @@
+/**
+ * Konteks kerja Session untuk panel kanan: perubahan file, cabang git, dan
+ * task list agent (`GET /api/sessions/:id/context`).
+ *
+ * Polling, bukan WebSocket: sumbernya (git + `todowrite`) tidak memancarkan
+ * event ke KCG Code, dan panel hanya perlu "cukup baru". Supaya tidak memboros
+ * request:
+ * - Hanya di-poll saat panel TERBUKA (`enabled`).
+ * - Saat model sedang bekerja (`busy`) interval dipercepat — di situlah file &
+ *   task list berubah; selainnya lambat.
+ * - Tab di latar belakang -> poll dihentikan (`visibilitychange`), lalu
+ *   langsung menyegarkan begitu tab aktif kembali.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiFetch } from "@/lib/api";
+import type { SessionContext } from "@/types";
+
+/** Interval poll saat model bekerja vs idle (ms). */
+const ACTIVE_MS = 2500;
+const IDLE_MS = 12000;
+
+export interface UseSessionContextResult {
+  context: SessionContext | null;
+  /** Fetch pertama belum selesai (panel menampilkan skeleton). */
+  loading: boolean;
+  /** Muat ulang sekarang (mis. setelah aksi pengguna). */
+  refresh: () => void;
+}
+
+export function useSessionContext(
+  sessionId: string,
+  /** Panel terbuka — data hanya diambil saat dibutuhkan. */
+  enabled: boolean,
+  /** Model sedang merespon: konteks berubah cepat, poll dipercepat. */
+  busy: boolean,
+): UseSessionContextResult {
+  const [context, setContext] = useState<SessionContext | null>(null);
+  const [loading, setLoading] = useState(false);
+  /** Ada data yang bisa ditampilkan — skeleton hanya untuk fetch pertama. */
+  const hasData = useRef(false);
+  /** Request terakhir yang masih relevan (hindari balasan basi saling timpa). */
+  const runId = useRef(0);
+
+  const load = useCallback(async () => {
+    const id = ++runId.current;
+    try {
+      const res = await apiFetch(`/api/sessions/${sessionId}/context`);
+      const body = (await res.json()) as { context?: SessionContext };
+      if (id !== runId.current || !body.context) return;
+      hasData.current = true;
+      setContext(body.context);
+    } catch {
+      // Panel ini bukan alur utama: kegagalan jaringan cukup diabaikan,
+      // poll berikutnya mencoba lagi. Data terakhir tetap ditampilkan.
+    } finally {
+      if (id === runId.current) setLoading(false);
+    }
+  }, [sessionId]);
+
+  const refresh = useCallback(() => {
+    if (!enabled) return;
+    void load();
+  }, [enabled, load]);
+
+  // Session berganti -> buang data lama agar panel tidak menampilkan konteks
+  // Session sebelumnya. Efeknya hanya me-reset (tidak membaca nilai apa pun),
+  // jadi `sessionId` sengaja dipakai sebagai PEMICU, bukan dependency nilai.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `sessionId` adalah pemicu reset
+  useEffect(() => {
+    hasData.current = false;
+    setContext(null);
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    setLoading(!hasData.current);
+    void load();
+
+    let timer: ReturnType<typeof setInterval> | null = null;
+    const start = () => {
+      if (timer !== null) return;
+      timer = setInterval(() => void load(), busy ? ACTIVE_MS : IDLE_MS);
+    };
+    const stop = () => {
+      if (timer !== null) clearInterval(timer);
+      timer = null;
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") {
+        void load();
+        start();
+      } else {
+        stop();
+      }
+    };
+
+    if (document.visibilityState === "visible") start();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [enabled, busy, load]);
+
+  return { context, loading, refresh };
+}