kcg-code 0.1.0 → 0.2.1

package/src/cli/index.ts

@@ -3,6 +3,7 @@
  */
 import { type CliArgs, helpText, parseArgs } from "./args";
 import { runInit, runResetLock, runStart } from "./commands";
+import { runLogs, runStatus, runStop } from "./daemon";
 import { c, readPackageVersion, symbols } from "./theme";
 
 export async function runCli(argv: string[]): Promise<void> {
@@ -31,6 +32,15 @@ export async function runCli(argv: string[]): Promise<void> {
     case "start":
       await runStart(args);
       return;
+    case "stop":
+      await runStop();
+      return;
+    case "status":
+      await runStatus();
+      return;
+    case "logs":
+      await runLogs(args);
+      return;
   }
 }
 

package/src/cli/ink-react.ts

@@ -0,0 +1,26 @@
+/**
+ * React yang sama dengan yang dipakai renderer Ink.
+ *
+ * Pada install global (`bun i -g kcg-code`), `ink` bisa di-hoist ke
+ * node_modules global bersama React milik paket lain, sementara kcg-code
+ * mendapat salinan React sendiri (`kcg-code/node_modules/react`). Hook dari
+ * salinan itu tidak dikenali reconciler Ink → "Invalid hook call".
+ *
+ * Solusinya: ambil React dari lokasi `react-reconciler` milik Ink, sehingga
+ * hook dan reconciler selalu memakai instance yang sama.
+ */
+import { createRequire } from "node:module";
+import * as LocalReact from "react";
+
+function resolveInkReact(): typeof LocalReact {
+  try {
+    const inkRequire = createRequire(Bun.resolveSync("ink", import.meta.dir));
+    const reconcilerRequire = createRequire(inkRequire.resolve("react-reconciler"));
+    return reconcilerRequire("react") as typeof LocalReact;
+  } catch {
+    // Layout tak terduga — pakai React milik paket ini.
+    return LocalReact;
+  }
+}
+
+export const InkReact = resolveInkReact();

package/src/cli/keep-awake.ts

@@ -0,0 +1,148 @@
+/**
+ * Cegah OS masuk sleep selama server kcgcode berjalan — kalau mesin tidur,
+ * jaringan putus dan tunnel (kcg/lhr) ikut disconnect.
+ *
+ * Per platform:
+ * - **linux**: `systemd-inhibit --what=sleep:idle … cat`. Child `cat` membaca
+ *   stdin pipe dari proses ini, jadi bila kcgcode mati (termasuk SIGKILL)
+ *   pipe tertutup, `cat` keluar, dan inhibitor otomatis dilepas.
+ * - **darwin**: `caffeinate -i -s -w <pid>` — berhenti sendiri saat pid mati.
+ * - **win32**: `SetThreadExecutionState` via `bun:ffi`; state dilepas OS
+ *   saat proses berakhir.
+ *
+ * Hanya mencegah sleep otomatis (idle). Layar tetap boleh mati, dan sleep
+ * karena tutup lid laptop tetap mengikuti setelan OS.
+ */
+import type { Subprocess } from "bun";
+
+export interface KeepAwakeStatus {
+  active: boolean;
+  /** Mekanisme yang dipakai, mis. "systemd-inhibit". */
+  method: string | null;
+  error: string | null;
+}
+
+export interface KeepAwake {
+  status(): KeepAwakeStatus;
+  stop(): void;
+}
+
+const WHY = "kcgcode is serving remote sessions (keeps the tunnel online)";
+
+/** Perintah inhibitor untuk platform child-process; null bila tak didukung. */
+export function inhibitCommand(platform: NodeJS.Platform, pid: number): string[] | null {
+  if (platform === "linux") {
+    return [
+      "systemd-inhibit",
+      "--what=sleep:idle",
+      "--who=kcgcode",
+      `--why=${WHY}`,
+      "--mode=block",
+      "cat",
+    ];
+  }
+  if (platform === "darwin") {
+    return ["caffeinate", "-i", "-s", "-w", String(pid)];
+  }
+  return null;
+}
+
+export function disabledKeepAwake(): KeepAwake {
+  return {
+    status: () => ({ active: false, method: null, error: "disabled (--allow-sleep)" }),
+    stop() {},
+  };
+}
+
+export async function startKeepAwake(
+  platform: NodeJS.Platform = process.platform,
+): Promise<KeepAwake> {
+  if (platform === "win32") return startWindows();
+
+  const cmd = inhibitCommand(platform, process.pid);
+  if (!cmd) {
+    return {
+      status: () => ({ active: false, method: null, error: `unsupported on ${platform}` }),
+      stop() {},
+    };
+  }
+
+  const method = cmd[0] as string;
+  let state: KeepAwakeStatus = { active: true, method, error: null };
+  let proc: Subprocess<"pipe", "ignore", "pipe">;
+  try {
+    proc = Bun.spawn(cmd, { stdin: "pipe", stdout: "ignore", stderr: "pipe" });
+  } catch (err) {
+    const reason = (err as Error).message.includes("ENOENT")
+      ? `${method} not found`
+      : (err as Error).message;
+    return {
+      status: () => ({ active: false, method, error: reason }),
+      stop() {},
+    };
+  }
+
+  let stopping = false;
+  void proc.exited.then(async (code) => {
+    if (stopping) return;
+    const stderr = (await new Response(proc.stderr).text()).trim();
+    const firstLine = stderr.split("\n")[0];
+    state = {
+      active: false,
+      method,
+      error: firstLine || `${method} exited (code ${code})`,
+    };
+  });
+
+  return {
+    status: () => state,
+    stop() {
+      if (stopping) return;
+      stopping = true;
+      state = { active: false, method, error: null };
+      try {
+        proc.stdin.end();
+      } catch {
+        // sudah tertutup
+      }
+      proc.kill();
+    },
+  };
+}
+
+const ES_CONTINUOUS = 0x80000000;
+const ES_SYSTEM_REQUIRED = 0x00000001;
+
+async function startWindows(): Promise<KeepAwake> {
+  const method = "SetThreadExecutionState";
+  try {
+    const { dlopen, FFIType } = await import("bun:ffi");
+    const lib = dlopen("kernel32.dll", {
+      SetThreadExecutionState: { args: [FFIType.u32], returns: FFIType.u32 },
+    });
+    const set = lib.symbols.SetThreadExecutionState;
+    if (set(ES_CONTINUOUS | ES_SYSTEM_REQUIRED) === 0) {
+      lib.close();
+      return {
+        status: () => ({ active: false, method, error: `${method} failed` }),
+        stop() {},
+      };
+    }
+    let active = true;
+    return {
+      status: () => ({ active, method, error: null }),
+      stop() {
+        if (!active) return;
+        active = false;
+        set(ES_CONTINUOUS);
+        lib.close();
+      },
+    };
+  } catch (err) {
+    const error = (err as Error).message;
+    return {
+      status: () => ({ active: false, method, error }),
+      stop() {},
+    };
+  }
+}

package/src/cli/port.ts

@@ -0,0 +1,92 @@
+/**
+ * Pemilihan port HTTP saat startup.
+ *
+ * Prioritas: `--port` > `KCG_PORT` > `port` di config > 3000.
+ * Port eksplisit (flag/env) yang terpakai → error; port dari config/default
+ * yang terpakai → otomatis pindah ke port kosong berikutnya.
+ */
+
+export const DEFAULT_PORT = 3000;
+/** Jumlah port berurutan yang dicoba saat fallback. */
+const SCAN_ATTEMPTS = 50;
+
+export type PortSource = "flag" | "env" | "config" | "default";
+
+const CONNECT_TIMEOUT_MS = 1000;
+
+/** true bila ada yang sudah listen (koneksi TCP diterima). */
+async function acceptsConnection(hostname: string, port: number): Promise<boolean> {
+  // Alamat wildcard tidak bisa dituju — cek lewat loopback.
+  const host = hostname === "0.0.0.0" ? "127.0.0.1" : hostname === "::" ? "::1" : hostname;
+  const attempt = Bun.connect({
+    hostname: host,
+    port,
+    socket: { data() {}, open: (s) => void s.end() },
+  }).then(
+    (s) => {
+      s.end();
+      return true;
+    },
+    () => false,
+  );
+  const timeout = Bun.sleep(CONNECT_TIMEOUT_MS).then(() => false);
+  return Promise.race([attempt, timeout]);
+}
+
+/**
+ * Cek port bisa dipakai. Probe bind saja tidak cukup: setelah server kcgcode
+ * berjalan di proses ini, bind ke port yang sudah dipakai proses lain bisa
+ * "berhasil" (SO_REUSEPORT). Jadi cek koneksi TCP dulu, lalu probe bind untuk
+ * port yang terpakai tapi tidak menerima koneksi (mis. butuh root).
+ */
+export async function portIsFree(hostname: string, port: number): Promise<boolean> {
+  if (port === 0) return true;
+  if (await acceptsConnection(hostname, port)) return false;
+  try {
+    const probe = Bun.serve({ hostname, port, reusePort: false, fetch: () => new Response() });
+    probe.stop(true);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Port yang diminta beserta asalnya. `envPort` dibaca sebelum override `--port`. */
+export function requestedPort(opts: { flag?: number; env?: string; config?: number }): {
+  port: number;
+  source: PortSource;
+} {
+  if (opts.flag !== undefined) return { port: opts.flag, source: "flag" };
+  if (opts.env !== undefined && opts.env.trim() !== "") {
+    const n = Number(opts.env);
+    if (Number.isInteger(n) && n > 0 && n <= 65535) return { port: n, source: "env" };
+  }
+  if (opts.config !== undefined) return { port: opts.config, source: "config" };
+  return { port: DEFAULT_PORT, source: "default" };
+}
+
+export type PortChoice =
+  | { ok: true; port: number; fallbackFrom: number | null }
+  | { ok: false; error: string };
+
+/** Pilih port final: pakai yang diminta, atau cari pengganti bila boleh. */
+export async function choosePort(
+  hostname: string,
+  req: { port: number; source: PortSource },
+  isFree: (hostname: string, port: number) => boolean | Promise<boolean> = portIsFree,
+): Promise<PortChoice> {
+  if (await isFree(hostname, req.port)) return { ok: true, port: req.port, fallbackFrom: null };
+
+  if (req.source === "flag" || req.source === "env") {
+    const via = req.source === "flag" ? "--port" : "KCG_PORT";
+    return { ok: false, error: `Port ${req.port} (from ${via}) is already in use on ${hostname}.` };
+  }
+
+  for (let p = req.port + 1; p < req.port + 1 + SCAN_ATTEMPTS && p <= 65535; p++) {
+    if (await isFree(hostname, p)) return { ok: true, port: p, fallbackFrom: req.port };
+  }
+  return {
+    ok: false,
+    error: `Port ${req.port} and the next ${SCAN_ATTEMPTS} ports are in use on ${hostname}.`,
+  };
+}

package/src/cli/theme.ts

@@ -55,12 +55,12 @@ export async function readPackageVersion(): Promise<string> {
 /** Banner ASCII "KCG". */
 export function logoLines(): string[] {
   return [
-    "██╗  ██╗ ██████╗ ",
-    "██║ ██╔╝██╔════╝ ",
-    "█████╔╝ ██║      ",
-    "██╔═██╗ ██║      ",
-    "██║  ██╗╚██████╗ ",
-    "╚═╝  ╚═╝ ╚═════╝ ",
+    "██╗  ██╗ ██████╗  ██████╗ ",
+    "██║ ██╔╝██╔════╝ ██╔════╝ ",
+    "█████╔╝ ██║      ██║  ███╗",
+    "██╔═██╗ ██║      ██║   ██║",
+    "██║  ██╗╚██████╗ ╚██████╔╝",
+    "╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ",
   ];
 }
 

package/src/components/layout/AppShell.tsx

@@ -95,8 +95,9 @@ export function AppShell() {
                              tiap kolom scroll sendiri; lebih sempit: halaman
                              scroll biasa (panel samping ada di Sheet). */
                           "mx-auto w-full max-w-6xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16 lg:h-full lg:pb-0"
-                        : route.name === "skills"
-                          ? /* Skills: grid kartu 2 kolom butuh ruang lebih lebar. */
+                        : route.name === "skills" || route.name === "settings"
+                          ? /* Skills: grid kartu 2 kolom; Settings: daftar navigasi
+                               + isi berdampingan (lg+) — butuh ruang lebih lebar. */
                             "mx-auto w-full max-w-5xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16"
                           : "mx-auto w-full max-w-3xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16"
                   }
@@ -107,7 +108,11 @@ export function AppShell() {
                   )}
                   {route.name === "skills" && <SkillsPage />}
                   {route.name === "settings" && (
-                    <SettingsPage section={route.section} anchor={route.anchor} />
+                    <SettingsPage
+                      section={route.section}
+                      anchor={route.anchor}
+                      root={route.root === true}
+                    />
                   )}
                   {route.name === "not-found" && <NotFoundView />}
                 </div>

package/src/components/projects/HomeChat.tsx

@@ -1,6 +1,11 @@
 /**
  * Chat homepage: headline acak + logo, lalu composer. Di bawah kotak input
- * ada baris polos (tanpa border): pemilih Project di kiri, model di kanan.
+ * ada baris polos (tanpa border): pemilih Project di kiri, agent + model di
+ * kanan (satu trigger `ModelPicker` — model bergantung pada agent).
+ *
+ * Tata letak: semuanya di tengah layar. Desktop menampilkan daftar Session
+ * terbaru (`HomeRecentSessions`) di bawah composer; di HP daftar itu
+ * disembunyikan dan logo ditumpuk di atas headline.
  *
  * Kirim = buat Session baru di Project terpilih (`POST /api/sessions`),
  * titipkan teks sebagai prompt tertunda (`lib/pending-prompt.ts`), lalu
@@ -20,6 +25,7 @@ import {
   SendHorizontalIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { HomeRecentSessions } from "@/components/projects/HomeRecentSessions";
 import { AgentPicker } from "@/components/sessions/AgentPicker";
 import { ModelPicker } from "@/components/sessions/ModelPicker";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -41,6 +47,7 @@ import {
 } from "@/components/ui/input-group";
 import { Spinner } from "@/components/ui/spinner";
 import { useRouter } from "@/hooks/useRouter";
+import { readPreferredAgentType, storePreferredAgentType } from "@/lib/agent-types";
 import { ApiError, apiFetch } from "@/lib/api";
 import { notifyDataChanged } from "@/lib/data-events";
 import { pickHeadline } from "@/lib/headlines";
@@ -49,7 +56,7 @@ import type { ProjectOverview } from "@/lib/project-overview";
 import { sessionPath } from "@/lib/routes";
 import { seedSession } from "@/lib/session-handoff";
 import logo from "@/logo.svg";
-import type { Session, SessionModel } from "@/types";
+import type { AgentType, Session, SessionModel } from "@/types";
 
 const LAST_PROJECT_KEY = "kcg-home-project";
 
@@ -70,6 +77,8 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
   const [headline] = useState(() => pickHeadline());
   const [text, setText] = useState("");
   const [projectId, setProjectId] = useState<string | null>(readLastProject);
+  /** Backend Session baru (OpenCode / Claude Code), diingat per perangkat. */
+  const [agentType, setAgentType] = useState<AgentType>(readPreferredAgentType);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   /** Model & agent untuk Session baru; null = default opencode. */
@@ -78,8 +87,9 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   // Project tersimpan sudah dihapus / belum ada -> pakai yang paling baru aktif.
-  const selected =
-    overviews.find((o) => o.project.id === projectId)?.project ?? overviews[0]?.project ?? null;
+  const selectedOverview =
+    overviews.find((o) => o.project.id === projectId) ?? overviews[0] ?? null;
+  const selected = selectedOverview?.project ?? null;
 
   useEffect(() => {
     textareaRef.current?.focus();
@@ -96,6 +106,18 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
     requestAnimationFrame(() => textareaRef.current?.focus());
   };
 
+  const chooseAgentType = (next: AgentType) => {
+    if (next !== agentType) {
+      // Model & mode berasal dari backend masing-masing.
+      setModel(null);
+      setAgent(null);
+    }
+    setAgentType(next);
+    storePreferredAgentType(next);
+    // Tanpa fokus ke textarea: dipanggil dari dialog ModelPicker yang masih
+    // terbuka (fokus terkunci di dialog sampai ditutup).
+  };
+
   const canSend = selected !== null && text.trim() !== "" && !sending;
 
   const submit = async (event?: React.FormEvent<HTMLFormElement>) => {
@@ -106,7 +128,7 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
     try {
       const res = await apiFetch("/api/sessions", {
         method: "POST",
-        body: JSON.stringify({ agentType: "opencode", projectId: selected.id, model, agent }),
+        body: JSON.stringify({ agentType, projectId: selected.id, model, agent }),
       });
       const { session } = (await res.json()) as { session: Session };
       setPendingPrompt(session.id, text);
@@ -123,9 +145,13 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
 
   return (
     <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center gap-6 pb-[10dvh]">
-      <div data-vt-name="home-headline" className="flex items-center justify-center gap-3 px-2">
+      {/* HP: logo di atas headline (tengah); desktop: berdampingan. */}
+      <div
+        data-vt-name="home-headline"
+        className="flex flex-col items-center justify-center gap-3 px-2 sm:flex-row"
+      >
         <img src={logo} alt="" aria-hidden className="size-10 shrink-0 sm:size-12" />
-        <h1 className="text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
+        <h1 className="text-balance text-center text-2xl font-semibold tracking-tight sm:text-left sm:text-3xl">
           {headline}
         </h1>
       </div>
@@ -162,6 +188,7 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
               {selected && (
                 <AgentPicker
                   projectId={selected.id}
+                  agentType={agentType}
                   sessionId={null}
                   agent={agent}
                   onChanged={setAgent}
@@ -181,57 +208,63 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
             </InputGroupAddon>
           </InputGroup>
 
-          {/* Section 2 — konteks Session baru: Project (kiri) & model (kanan),
-            tanpa latar (hanya border container luar). */}
+          {/* Section 2 — konteks Session baru: Project (kiri) & agent + model
+            (kanan), tanpa latar (hanya border container luar). */}
           <div className="flex min-w-0 items-center justify-between gap-2 px-1.5 py-1">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-9 min-w-0 max-w-[55%] gap-1.5 px-2 font-normal text-muted-foreground hover:text-foreground"
-                  aria-label={`Project: ${selected?.name ?? "none"}. Change project`}
-                  disabled={sending}
-                >
-                  <FolderIcon data-icon="inline-start" />
-                  <span className="truncate">{selected?.name ?? "Select project"}</span>
-                  <ChevronDownIcon data-icon="inline-end" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="max-h-72 w-64">
-                <DropdownMenuLabel>Project</DropdownMenuLabel>
-                <DropdownMenuGroup>
-                  {overviews.map(({ project }) => (
-                    <DropdownMenuItem key={project.id} onSelect={() => choose(project.id)}>
-                      <FolderIcon />
-                      <span className="flex min-w-0 flex-1 flex-col">
-                        <span className="truncate">{project.name}</span>
-                        <span className="truncate text-xs text-muted-foreground">
-                          {project.path}
+            <div className="flex min-w-0 items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 min-w-0 gap-1.5 px-2 font-normal text-muted-foreground hover:text-foreground"
+                    aria-label={`Project: ${selected?.name ?? "none"}. Change project`}
+                    disabled={sending}
+                  >
+                    <FolderIcon data-icon="inline-start" />
+                    <span className="truncate">{selected?.name ?? "Select project"}</span>
+                    <ChevronDownIcon data-icon="inline-end" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="max-h-72 w-64">
+                  <DropdownMenuLabel>Project</DropdownMenuLabel>
+                  <DropdownMenuGroup>
+                    {overviews.map(({ project }) => (
+                      <DropdownMenuItem key={project.id} onSelect={() => choose(project.id)}>
+                        <FolderIcon />
+                        <span className="flex min-w-0 flex-1 flex-col">
+                          <span className="truncate">{project.name}</span>
+                          <span className="truncate text-xs text-muted-foreground">
+                            {project.path}
+                          </span>
                         </span>
-                      </span>
-                      {project.id === selected?.id && <CheckIcon />}
+                        {project.id === selected?.id && <CheckIcon />}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem onSelect={onNewProject}>
+                      <FolderPlusIcon />
+                      New project
                     </DropdownMenuItem>
-                  ))}
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem onSelect={onNewProject}>
-                    <FolderPlusIcon />
-                    New project
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
 
             {selected && (
-              <div className="flex min-w-0 max-w-[45%] justify-end">
+              <div className="flex max-w-[60%] shrink-0 justify-end">
+                {/* Agent dipilih di dialog yang sama dengan model; trigger
+                    menampilkan logo agent + nama model. */}
                 <ModelPicker
                   projectId={selected.id}
+                  agentType={agentType}
                   sessionId={null}
                   model={model}
                   onChanged={setModel}
+                  onAgentTypeChange={chooseAgentType}
                   variant="inline"
                 />
               </div>
@@ -245,6 +278,10 @@ export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
           </Alert>
         )}
       </form>
+
+      {selectedOverview && (
+        <HomeRecentSessions overview={selectedOverview} className="hidden sm:mt-6 sm:flex" />
+      )}
     </div>
   );
 }

package/src/components/projects/HomeRecentSessions.tsx

@@ -0,0 +1,90 @@
+/**
+ * Daftar "lanjutkan" di homepage: beberapa Session terbaru milik Project yang
+ * sedang dipilih di composer (`HomeChat`). Ringkas — titik status, judul,
+ * logo agent, waktu relatif — plus tautan ke daftar Session lengkap.
+ *
+ * Datanya sudah ada di `ProjectOverview.recentSessions`, jadi tidak ada fetch.
+ */
+import { ArrowRightIcon } from "lucide-react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { useRouter } from "@/hooks/useRouter";
+import { formatRelativeTime, type ProjectOverview } from "@/lib/project-overview";
+import { projectPath, sessionPath } from "@/lib/routes";
+import { SESSION_STATUS_DOT, SESSION_STATUS_LABEL } from "@/lib/session-status";
+import { displaySessionTitle } from "@/lib/session-title";
+import { cn } from "@/lib/utils";
+
+export interface HomeRecentSessionsProps {
+  overview: ProjectOverview;
+  className?: string;
+}
+
+export function HomeRecentSessions({ overview, className }: HomeRecentSessionsProps) {
+  const { navigate } = useRouter();
+  const { project, recentSessions, sessionCount } = overview;
+  if (recentSessions.length === 0) return null;
+
+  // Tautan biasa (bukan tombol) agar buka-di-tab-baru tetap berfungsi.
+  const go = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    navigate(href);
+  };
+
+  const allHref = projectPath(project.id);
+
+  return (
+    <section
+      aria-label={`Recent sessions in ${project.name}`}
+      className={cn("flex flex-col", className)}
+    >
+      {/* Label + garis rambut: menandai section terpisah dari composer di
+          atasnya (bukan kelanjutan tray Project/model). */}
+      <div className="flex items-center gap-3 px-3 pb-2">
+        <h2 className="shrink-0 text-xs font-medium text-muted-foreground">Recent sessions</h2>
+        <span aria-hidden className="h-px flex-1 bg-border" />
+        {sessionCount > recentSessions.length && (
+          <a
+            href={allHref}
+            onClick={(e) => go(e, allHref)}
+            className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            View all {sessionCount}
+            <ArrowRightIcon className="size-3" />
+          </a>
+        )}
+      </div>
+      <ul className="flex flex-col">
+        {recentSessions.map((session) => {
+          const href = sessionPath(project.id, session.id);
+          const title = displaySessionTitle(session.title);
+          return (
+            <li key={session.id}>
+              <a
+                href={href}
+                onClick={(e) => go(e, href)}
+                aria-label={`Open session ${title}, ${SESSION_STATUS_LABEL[session.status]}`}
+                className="group flex min-h-10 items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+              >
+                <span
+                  aria-hidden
+                  className={cn("size-2 shrink-0 rounded-full", SESSION_STATUS_DOT[session.status])}
+                />
+                <span className="min-w-0 flex-1 truncate text-sm text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground">
+                  {title}
+                </span>
+                <AgentLogo
+                  agentType={session.agentType}
+                  className="size-3.5 text-muted-foreground"
+                />
+                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                  {formatRelativeTime(session.updatedAt)}
+                </span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}