kcg-code 0.0.0-stage → 0.1.0

package/src/lib/tone.ts

@@ -0,0 +1,80 @@
+/**
+ * Nada hover rail pesan (Web Audio) — tangga nada mayor.
+ *
+ * Penanda paling atas berbunyi paling rendah, makin ke bawah makin tinggi
+ * (do re mi fa sol la si do…), berhenti menaik setelah dua oktaf.
+ * Frekuensinya dihitung murni (`scaleFrequency`, bisa diuji); pemutarannya
+ * memakai satu `AudioContext` bersama.
+ *
+ * Catatan browser: `AudioContext` baru boleh berbunyi setelah ada interaksi
+ * yang dianggap "user activation" (klik / tap / tombol). Hover TIDAK termasuk,
+ * jadi nada pertama bisa senyap sampai pengguna mengklik sesuatu di halaman.
+ * Karena ini hanya hiasan, kegagalan diabaikan diam-diam.
+ */
+
+/** Jarak semiton nada mayor: do re mi fa sol la si. */
+const MAJOR_STEPS = [0, 2, 4, 5, 7, 9, 11];
+
+/** Nada dasar (C4). */
+export const BASE_FREQUENCY = 261.63;
+
+/**
+ * Nada tertinggi = dua oktaf di atas dasar (do), yaitu derajat ke-14 tangga
+ * nada. Di atas itu nada DITAHAN (tidak berulang ke bawah): rail panjang
+ * tetap terdengar menaik, dan nadanya tidak pernah melengking (maks ±1 kHz).
+ */
+const MAX_DEGREE = 14;
+
+/**
+ * Frekuensi (Hz) untuk penanda ke-`index` (0 = paling atas / paling rendah).
+ * Naik satu derajat tangga nada mayor per penanda, ditahan di `MAX_DEGREE`.
+ */
+export function scaleFrequency(index: number, base = BASE_FREQUENCY): number {
+  const degree = Math.min(Math.max(0, Math.floor(index)), MAX_DEGREE);
+  const step = MAJOR_STEPS[degree % MAJOR_STEPS.length] ?? 0;
+  const octave = Math.floor(degree / MAJOR_STEPS.length);
+  return base * 2 ** ((step + octave * 12) / 12);
+}
+
+type Ctx = AudioContext & { _kcgUnlocked?: boolean };
+let ctx: Ctx | null = null;
+
+function audioContext(): Ctx | null {
+  if (typeof window === "undefined") return null;
+  const Ctor =
+    window.AudioContext ??
+    (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!Ctor) return null;
+  ctx ??= new Ctor();
+  return ctx;
+}
+
+/**
+ * Bunyikan satu nada pendek & lembut. Tidak pernah melempar: fitur ini
+ * sekadar umpan balik, bukan bagian dari alur utama.
+ */
+export function playTone(frequency: number): void {
+  try {
+    const audio = audioContext();
+    if (!audio) return;
+    if (audio.state === "suspended") void audio.resume();
+    if (audio.state !== "running") return;
+
+    const now = audio.currentTime;
+    const osc = audio.createOscillator();
+    const gain = audio.createGain();
+    // Triangle: lembut, tanpa harmonik tajam seperti square/saw.
+    osc.type = "triangle";
+    osc.frequency.value = frequency;
+    // Envelope pendek (±0.16 s) dengan attack cepat supaya terasa seperti
+    // "tik" bernada, bukan bunyi panjang yang mengganggu saat menyapu rail.
+    gain.gain.setValueAtTime(0, now);
+    gain.gain.linearRampToValueAtTime(0.06, now + 0.012);
+    gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.16);
+    osc.connect(gain).connect(audio.destination);
+    osc.start(now);
+    osc.stop(now + 0.18);
+  } catch {
+    /* Web Audio tidak tersedia / diblokir — abaikan. */
+  }
+}

package/src/lib/turns.ts

@@ -0,0 +1,320 @@
+/**
+ * Transformasi pesan percakapan terstruktur → model tampilan timeline.
+ *
+ * Logika murni (tanpa React/DOM) yang sebelumnya tinggal di `SessionView.tsx`,
+ * dipisah agar dapat diuji `bun test` tanpa render. Tipe hasil (`TurnSegment`,
+ * `TurnBlock`, `MessageGroup`, dst.) ada di `src/types/turns.ts`.
+ */
+import type {
+  AssistantTurnGroup,
+  MessageGroup,
+  MessagePart,
+  SessionMessage,
+  TurnBlock,
+  TurnSegment,
+} from "@/types";
+
+/** Teks part apa pun yang membawa field `text` (atau null). */
+export function partText(p: MessagePart): string | null {
+  return typeof p.text === "string" ? p.text : null;
+}
+
+/**
+ * Gabungkan teks jawaban dari part `text` saja — reasoning/tool/step tidak
+ * ikut, walau part tersebut juga membawa field `text` dari opencode.
+ */
+export function textOf(parts: MessagePart[]): string {
+  return parts
+    .filter((p) => p.type === "text")
+    .map(partText)
+    .filter((t): t is string => t !== null)
+    .join("\n");
+}
+
+/**
+ * Ratakan seluruh parts satu turn (bisa beberapa pesan assistant) menjadi
+ * daftar segmen BERURUTAN: setiap part reasoning jadi satu segmen Thinking
+ * tersendiri (bisa tampil lebih dari sekali, sesuai urutan berpikir model),
+ * tool jadi segmen badge, part `text` berurutan digabung, dan segmen teks
+ * non-kosong TERAKHIR ditandai `final` (jawaban akhir — satu-satunya yang
+ * dapat efek typewriter).
+ */
+export function turnSegments(messages: readonly SessionMessage[]): TurnSegment[] {
+  const segments: TurnSegment[] = [];
+  for (const msg of messages) {
+    msg.parts.forEach((part, i) => {
+      const key = `${msg.id}:${part.id ?? i}`;
+      if (part.type === "reasoning" || part.type === "error") {
+        segments.push({ kind: part.type, key, part });
+        return;
+      }
+      if (part.type === "tool" || part.type === "shell" || part.type === "file") {
+        segments.push({ kind: "tool", key, part });
+        return;
+      }
+      if (part.type !== "text") return;
+      const text = partText(part) ?? "";
+      const last = segments[segments.length - 1];
+      // Part text berdempetan digabung agar tidak pecah jadi beberapa bubble.
+      if (last?.kind === "text") last.text = last.text === "" ? text : `${last.text}\n${text}`;
+      else segments.push({ kind: "text", key, text, final: false });
+    });
+  }
+  // Segmen teks non-kosong terakhir = jawaban akhir turn.
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const seg = segments[i];
+    if (seg?.kind !== "text") continue;
+    if (seg.text.trim() !== "") seg.final = true;
+    break;
+  }
+  return segments;
+}
+
+/** Key kandidat `state.input` tool yang berisi target utama (path/argumen). */
+const TOOL_TARGET_KEYS = [
+  "filePath",
+  "path",
+  "file",
+  "dir",
+  "directory",
+  "pattern",
+  "query",
+  "url",
+  "command",
+  "description",
+] as const;
+
+/**
+ * Target utama sebuah tool call (mis. path file yang di-read) — diambil
+ * dari `state.input` part tool opencode dengan toleransi beberapa nama key.
+ * Part `file` (echo @file) memakai `filename`-nya langsung.
+ */
+export function toolTarget(part: MessagePart): string | null {
+  if (part.type === "file" && typeof part.filename === "string" && part.filename.trim() !== "") {
+    return part.filename;
+  }
+  const state = part.state;
+  if (typeof state !== "object" || state === null) return null;
+  const input = (state as { input?: unknown }).input;
+  if (typeof input !== "object" || input === null) return null;
+  for (const key of TOOL_TARGET_KEYS) {
+    const v = (input as Record<string, unknown>)[key];
+    if (typeof v === "string" && v.trim() !== "") return v;
+  }
+  return null;
+}
+
+/** Label badge tool: nama tool + target (mis. `read package.json`). */
+export function toolLabel(part: MessagePart): string {
+  const name = typeof part.tool === "string" && part.tool.trim() !== "" ? part.tool : part.type;
+  const target = toolTarget(part);
+  return target === null ? name : `${name} ${target}`;
+}
+
+/**
+ * Kelompokkan pesan berurutan: assistant yang berdempetan (satu turn —
+ * sering dipecah opencode menjadi beberapa `msg_...` saat reasoning/tool/
+ * sub-agent) menjadi SATU grup sehingga tampil sebagai satu kesatuan;
+ * pesan user selalu grup tersendiri.
+ */
+export function groupTurns(messages: readonly SessionMessage[]): MessageGroup[] {
+  const groups: MessageGroup[] = [];
+  for (const m of messages) {
+    const last = groups[groups.length - 1];
+    if (m.role === "assistant") {
+      if (last?.kind === "assistant") last.messages.push(m);
+      else groups.push({ kind: "assistant", id: m.id, messages: [m] });
+    } else {
+      groups.push({ kind: "user", message: m });
+    }
+  }
+  return groups;
+}
+
+/**
+ * Apakah satu turn sudah menampilkan sesuatu ke user: reasoning non-kosong,
+ * tool call, error, maupun teks. Dipakai untuk memutuskan kapan indikator
+ * "Memproses…" perlu tampil (respon masih kosong sama sekali).
+ */
+export function hasVisibleContent(segments: readonly TurnSegment[]): boolean {
+  return segments.some(
+    (s) =>
+      s.kind === "tool" ||
+      s.kind === "error" ||
+      (s.kind === "reasoning" && (partText(s.part) ?? "").trim() !== "") ||
+      (s.kind === "text" && s.text.trim() !== ""),
+  );
+}
+
+/**
+ * Status LIVE satu turn untuk maskot (murni, diuji):
+ * - `null`       -> turn belum ada / selesai (maskot disembunyikan).
+ * - "Working…"   -> belum ada konten apa pun (baru mulai).
+ * - "Thinking…"  -> reasoning part terakhir masih berjalan.
+ * - "Writing…"   -> model sedang menulis jawaban (segmen teks terakhir tampil).
+ * - lainnya      -> label tool yang sedang dijalankan (mis. "read package.json").
+ *
+ * Catatan: akhir turn ditandai `streaming=false` (pesan final menggantikan
+ * versi streaming), jadi penilaian "selesai" cukup dari flag itu.
+ */
+export function turnStatus(messages: readonly SessionMessage[], streaming: boolean): string | null {
+  if (!streaming || messages.length === 0) return null;
+  const segments = turnSegments(messages);
+  if (!hasVisibleContent(segments)) return "Working…";
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const seg = segments[i];
+    if (!seg) continue;
+    if (seg.kind === "text") return "Writing…";
+    if (seg.kind === "reasoning") return "Thinking…";
+    if (seg.kind === "tool") return toolLabel(seg.part);
+    // error: proses berhenti di error -> selesai.
+    return null;
+  }
+  return "Working…";
+}
+
+/**
+ * Total durasi thinking (ms) dari satu turn — dipakai untuk label "thoughts Xs"
+ * di footer setelah turn selesai.
+ *
+ * Strategi (urut prioritas):
+ * 1. Pakai `time.start`/`time.end` dari `ReasoningPart` asli opencode jika ada.
+ * 2. Fallback ke `time.start` part pertama vs `time.end` part terakhir dari
+ *    seluruh parts reasoning yang ada (estimasi kasar).
+ * 3. Jika tidak ada timing sama sekali, kembalikan null.
+ */
+export function turnThoughtDuration(messages: readonly SessionMessage[]): number | null {
+  let earliest: number | null = null;
+  let latest: number | null = null;
+  for (const msg of messages) {
+    for (const part of msg.parts) {
+      if (part.type !== "reasoning") continue;
+      const t = part.time;
+      if (!t) continue;
+      const start = t.start ?? t.created;
+      if (typeof start === "number") {
+        if (earliest === null || start < earliest) earliest = start;
+      }
+      const end = t.end;
+      if (typeof end === "number") {
+        if (latest === null || end > latest) latest = end;
+      }
+    }
+  }
+  if (earliest !== null && latest !== null && latest > earliest) {
+    return latest - earliest;
+  }
+  return null;
+}
+
+export function turnBlocks(segments: readonly TurnSegment[]): TurnBlock[] {
+  const blocks: TurnBlock[] = [];
+  let pendingSteps: Extract<TurnSegment, { kind: "reasoning" | "tool" }>[] = [];
+
+  for (const seg of segments) {
+    if (seg.kind === "reasoning" || seg.kind === "tool") {
+      pendingSteps.push(seg);
+    } else if (seg.kind === "text" || seg.kind === "error") {
+      blocks.push({
+        key: pendingSteps[0]?.key ?? seg.key,
+        steps: pendingSteps,
+        content: seg,
+      });
+      pendingSteps = [];
+    }
+  }
+  // Steps tersisa tanpa teks (masih streaming atau turn selesai tanpa teks akhir)
+  const firstPending = pendingSteps[0];
+  if (firstPending) {
+    blocks.push({ key: firstPending.key, steps: pendingSteps, content: null });
+  }
+  return blocks;
+}
+
+/**
+ * Upsert satu part ke dalam daftar pesan (streaming, event `message_part`).
+ * - Belum ada pesan dengan `messageId` -> buat placeholder assistant streaming.
+ * - Sudah ada -> part dengan `id` sama diganti, selainnya ditambahkan.
+ * Mengembalikan array baru (immutable) agar mudah diverifikasi.
+ */
+export function upsertMessagePart(
+  messages: SessionMessage[],
+  sessionId: string,
+  messageId: string,
+  part: MessagePart,
+): SessionMessage[] {
+  const idx = messages.findIndex((m) => m.id === messageId);
+  if (idx === -1) {
+    return [
+      ...messages,
+      {
+        id: messageId,
+        sessionId,
+        role: "assistant",
+        parts: [part],
+        createdAt: Date.now(),
+        streaming: true,
+      },
+    ];
+  }
+  const cur = messages[idx];
+  if (!cur) return messages;
+  const partIdx = cur.parts.findIndex((p) => p.id !== undefined && p.id === part.id);
+  const nextParts =
+    partIdx === -1 ? [...cur.parts, part] : cur.parts.map((p, i) => (i === partIdx ? part : p));
+  const next: SessionMessage = { ...cur, parts: nextParts, streaming: true };
+  return messages.map((m, i) => (i === idx ? next : m));
+}
+
+/**
+ * Tambahkan potongan teks streaming (`message_part_delta`) ke part yang sudah
+ * ada: `part[field] += delta`. Delta untuk pesan/part yang belum dikenal
+ * diabaikan (daftar tidak berubah) — `message_part` final membawa teks utuh.
+ * Mengembalikan array yang sama bila tidak ada perubahan (hemat re-render).
+ */
+export function appendMessagePartDelta(
+  messages: SessionMessage[],
+  messageId: string,
+  partId: string,
+  field: string,
+  delta: string,
+): SessionMessage[] {
+  if (delta === "") return messages;
+  const idx = messages.findIndex((m) => m.id === messageId);
+  const cur = idx === -1 ? undefined : messages[idx];
+  if (!cur) return messages;
+  const partIdx = cur.parts.findIndex((p) => p.id === partId);
+  const part = partIdx === -1 ? undefined : cur.parts[partIdx];
+  if (!part) return messages;
+  const prev = (part as Record<string, unknown>)[field];
+  if (prev !== undefined && typeof prev !== "string") return messages;
+  const nextPart: MessagePart = { ...part, [field]: (prev ?? "") + delta };
+  const next: SessionMessage = {
+    ...cur,
+    parts: cur.parts.map((p, i) => (i === partIdx ? nextPart : p)),
+    streaming: true,
+  };
+  return messages.map((m, i) => (i === idx ? next : m));
+}
+
+/**
+ * Ganti pesan final (hasil POST, non-streaming) — replace bila id sama
+ * (menutup versi streaming), selainnya tambahkan.
+ */
+export function upsertMessage(
+  messages: SessionMessage[],
+  message: SessionMessage,
+): SessionMessage[] {
+  const idx = messages.findIndex((m) => m.id === message.id);
+  if (idx === -1) return [...messages, message];
+  return messages.map((m, i) => (i === idx ? message : m));
+}
+
+/** Grup assistant terakhir dalam daftar grup (dipakai status maskot global). */
+export function lastAssistantGroup(groups: readonly MessageGroup[]): AssistantTurnGroup | null {
+  for (let i = groups.length - 1; i >= 0; i--) {
+    const g = groups[i];
+    if (g?.kind === "assistant") return g;
+  }
+  return null;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/logo.svg

@@ -0,0 +1,31 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="KCG Code logo">
+  <title>KCG Code</title>
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6D5CFB"/>
+      <stop offset="1" stop-color="#4C3FD9"/>
+    </linearGradient>
+  </defs>
+
+  <path d="
+    M 14 74
+    L 14 44
+    C 14 36 16 29 20 23
+    L 31 9
+    L 39 24
+    C 42.5 22.8 46.2 22 50 22
+    C 53.8 22 57.5 22.8 61 24
+    L 69 9
+    L 80 23
+    C 84 29 86 36 86 44
+    L 86 62
+    C 86 76 76 86 62 86
+    L 38 86
+    C 27 86 19 81 16 74
+  " stroke="url(#g)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+
+  <circle cx="14" cy="74" r="7" fill="url(#g)"/>
+  <circle cx="34" cy="52" r="6" fill="url(#g)"/>
+  <circle cx="66" cy="52" r="6" fill="url(#g)"/>
+  <circle cx="50" cy="86" r="7" fill="url(#g)"/>
+</svg>

package/src/pages/projects/ProjectDetailPage.tsx

@@ -0,0 +1,130 @@
+/**
+ * Halaman daftar Session milik satu Project (`/projects/:projectId`).
+ *
+ * - `Project` di-resolve dari id di URL via `GET /api/projects` (Requirement
+ *   10.8) sehingga halaman dapat di-refresh / diakses langsung (direct link)
+ *   tanpa state dari halaman sebelumnya.
+ * - Project tidak ditemukan (sudah dihapus / id salah) -> pesan error dengan
+ *   aksi kembali ke daftar Project.
+ * - Komposisi identik dengan `SessionList`: form pembuatan + daftar.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { SessionList } from "@/components/sessions/SessionList";
+import { SessionListSkeleton } from "@/components/sessions/SessionRow";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRouter } from "@/hooks/useRouter";
+import { ApiError, apiErrorMessage, apiFetch } from "@/lib/api";
+import { projectsPath, sessionPath } from "@/lib/routes";
+import type { Project } from "@/types";
+
+export interface ProjectDetailPageProps {
+  projectId: string;
+}
+
+type LoadState =
+  | { phase: "loading" }
+  | { phase: "error"; code: string }
+  | { phase: "ready"; project: Project };
+
+export function ProjectDetailPage({ projectId }: ProjectDetailPageProps) {
+  const { navigate } = useRouter();
+  const [state, setState] = useState<LoadState>({ phase: "loading" });
+
+  const load = useCallback(async () => {
+    setState({ phase: "loading" });
+    try {
+      const res = await apiFetch("/api/projects");
+      const body = (await res.json()) as { projects: Project[] };
+      const project = body.projects.find((p) => p.id === projectId);
+      if (project === undefined) {
+        setState({ phase: "error", code: "PROJECT_NOT_FOUND" });
+      } else {
+        setState({ phase: "ready", project });
+      }
+    } catch (e) {
+      setState({
+        phase: "error",
+        code: e instanceof ApiError ? e.code : "INTERNAL_ERROR",
+      });
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (state.phase === "loading") {
+    return (
+      <div
+        className="grid grid-cols-1 gap-x-10 gap-y-8 pt-4 sm:pt-8 lg:grid-cols-[minmax(0,1fr)_20rem] xl:grid-cols-[minmax(0,1fr)_22rem]"
+        aria-hidden
+      >
+        {/* Bentuk sama dengan SessionList: kolom Session + panel samping. */}
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex min-w-0 flex-1 flex-col gap-2">
+                <Skeleton className="h-8 w-48" />
+                <Skeleton className="h-3 w-64" />
+              </div>
+              <Skeleton className="h-8 w-28 rounded-full" />
+            </div>
+            <Skeleton className="h-4 w-36" />
+          </div>
+          <SessionListSkeleton />
+        </div>
+        {/* Sama dengan ProjectSidePanel: tumpukan kartu seksi. */}
+        <div className="hidden flex-col gap-3 self-start lg:flex">
+          {[2, 1, 3].map((rows, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
+            <div key={i} className="overflow-hidden rounded-xl border bg-card">
+              <div className="flex items-center gap-3 px-3.5 py-3">
+                <Skeleton className="size-8 rounded-lg" />
+                <div className="flex flex-1 flex-col gap-1.5">
+                  <Skeleton className="h-3.5 w-24" />
+                  <Skeleton className="h-3 w-16" />
+                </div>
+              </div>
+              <div className="flex flex-col gap-2 border-t px-3.5 py-3">
+                {Array.from({ length: rows }, (_, j) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
+                  <Skeleton key={j} className="h-3.5" style={{ width: `${80 - j * 15}%` }} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (state.phase === "error") {
+    return (
+      <div className="flex flex-col items-center gap-4 py-10 text-center">
+        <p className="text-sm text-muted-foreground">{apiErrorMessage(state.code)}</p>
+        <a
+          href={projectsPath()}
+          onClick={(e) => {
+            e.preventDefault();
+            navigate(projectsPath());
+          }}
+          className="text-sm font-medium underline underline-offset-4"
+        >
+          Back to projects
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <SessionList
+      key={state.project.id}
+      project={state.project}
+      onOpenSession={(session) => navigate(sessionPath(projectId, session.id))}
+      // Project sudah tidak ada — halaman ini tak punya data lagi untuk
+      // ditampilkan, jadi langsung kembali ke daftar Project.
+      onDeleted={() => navigate(projectsPath())}
+    />
+  );
+}

package/src/pages/projects/ProjectsPage.tsx

@@ -0,0 +1,97 @@
+/**
+ * Homepage (`/`).
+ *
+ * - Sudah ada Project -> chat (`HomeChat`): headline acak + composer dengan
+ *   pemilih Project di kiri bawah. Kirim = Session baru di Project terpilih.
+ *   Daftar Project & Session-nya ada di sidebar (`AppSidebar`).
+ * - Belum ada Project -> empty state dengan satu CTA "New project".
+ *
+ * Data dimuat `hooks/useProjects.ts`; ringkasan per Project (urutan aktivitas
+ * terbaru) dihitung `lib/project-overview.ts`.
+ */
+
+import { FolderPlusIcon, FoldersIcon, RefreshCwIcon } from "lucide-react";
+import { HomeChat } from "@/components/projects/HomeChat";
+import { NewProjectDialog } from "@/components/projects/NewProjectDialog";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProjects } from "@/hooks/useProjects";
+import { notifyDataChanged } from "@/lib/data-events";
+
+export function ProjectsPage() {
+  const { overviews, loading, loadError, refresh, dialogOpen, setDialogOpen } = useProjects();
+
+  const onCreated = () => {
+    void refresh();
+    // Sidebar memuat datanya sendiri — beri tahu agar Project baru muncul.
+    notifyDataChanged();
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col">
+      <NewProjectDialog open={dialogOpen} onOpenChange={setDialogOpen} onCreated={onCreated} />
+
+      {loading && overviews.length === 0 ? (
+        <HomeSkeleton />
+      ) : loadError ? (
+        <div className="flex flex-1 flex-col justify-center">
+          <Alert variant="destructive">
+            <AlertTitle>Failed to load projects</AlertTitle>
+            <AlertDescription className="flex flex-col items-start gap-3">
+              {loadError}
+              <Button type="button" variant="outline" size="sm" onClick={() => void refresh()}>
+                <RefreshCwIcon data-icon="inline-start" />
+                Retry
+              </Button>
+            </AlertDescription>
+          </Alert>
+        </div>
+      ) : overviews.length === 0 ? (
+        <div className="flex flex-1 flex-col justify-center">
+          <Empty className="rounded-xl border border-dashed bg-card">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <FoldersIcon />
+              </EmptyMedia>
+              <EmptyTitle>No projects yet</EmptyTitle>
+              <EmptyDescription>
+                Add a project first — pick a working directory in the Sandbox, then run CLI_Agent
+                inside it.
+              </EmptyDescription>
+              <EmptyContent>
+                <Button type="button" onClick={() => setDialogOpen(true)}>
+                  <FolderPlusIcon data-icon="inline-start" />
+                  New project
+                </Button>
+              </EmptyContent>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      ) : (
+        <HomeChat overviews={overviews} onNewProject={() => setDialogOpen(true)} />
+      )}
+    </div>
+  );
+}
+
+/** Placeholder chat saat memuat — bentuk serupa agar tidak melompat. */
+function HomeSkeleton() {
+  return (
+    <div className="flex flex-1 flex-col justify-center gap-6 pb-[10dvh]" aria-hidden>
+      <div className="flex items-center justify-center gap-3">
+        <Skeleton className="size-12 rounded-full" />
+        <Skeleton className="h-8 w-64" />
+      </div>
+      <Skeleton className="h-32 w-full rounded-2xl" />
+    </div>
+  );
+}