kcg-code 0.0.0-stage → 0.2.0

package/src/cli/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Router CLI kcgcode — dipanggil dari `bin/kcgcode.ts`.
+ */
+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> {
+  const args = parseArgs(argv);
+
+  switch (args.command) {
+    case "help":
+      console.log(helpText());
+      return;
+    case "version": {
+      const v = await readPackageVersion();
+      console.log(`kcgcode ${v}`);
+      return;
+    }
+    case "invalid":
+      console.error(`${c.redBright(symbols.cross)} ${args.error}`);
+      console.error(`\n${c.dim("Run")} ${c.cyan("kcgcode --help")} ${c.dim("for usage.")}`);
+      process.exit(1);
+      return;
+    case "init":
+      runInit(args);
+      return;
+    case "reset-lock":
+      runResetLock();
+      return;
+    case "start":
+      await runStart(args);
+      return;
+    case "stop":
+      await runStop();
+      return;
+    case "status":
+      await runStatus();
+      return;
+    case "logs":
+      await runLogs(args);
+      return;
+  }
+}
+
+export type { CliArgs };

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

@@ -0,0 +1,100 @@
+/**
+ * Theme terminal untuk dashboard kcgcode.
+ * Palet selaras dark mode app — cyan/violet accent.
+ */
+import pc from "picocolors";
+
+const useColor = Boolean(process.stdout.isTTY) && process.env.NO_COLOR === undefined;
+const paint = (fn: (s: string) => string) => (useColor ? fn : (s: string) => s);
+
+export const c = {
+  bold: paint(pc.bold),
+  dim: paint(pc.dim),
+  cyan: paint(pc.cyan),
+  cyanBright: paint((s) => pc.bold(pc.cyan(s))),
+  violet: paint(pc.magenta),
+  violetBright: paint((s) => pc.bold(pc.magenta(s))),
+  green: paint(pc.green),
+  greenBright: paint((s) => pc.bold(pc.green(s))),
+  yellow: paint(pc.yellow),
+  yellowBright: paint((s) => pc.bold(pc.yellow(s))),
+  red: paint(pc.red),
+  redBright: paint((s) => pc.bold(pc.red(s))),
+  white: paint(pc.white),
+  gray: paint(pc.gray),
+  underline: paint(pc.underline),
+};
+
+export const symbols = {
+  bullet: "●",
+  idle: "○",
+  arrow: "→",
+  check: "✓",
+  cross: "✗",
+  warn: "!",
+  boxH: "─",
+  boxV: "│",
+  boxTL: "┌",
+  boxTR: "┐",
+  boxBL: "└",
+  boxBR: "┘",
+} as const;
+
+/** Versi paket dari package.json. */
+export async function readPackageVersion(): Promise<string> {
+  try {
+    const file = Bun.file(new URL("../../package.json", import.meta.url));
+    if (!(await file.exists())) return "0.1.0";
+    const json = (await file.json()) as { version?: string };
+    return json.version ?? "0.1.0";
+  } catch {
+    return "0.1.0";
+  }
+}
+
+/** Banner ASCII "KCG". */
+export function logoLines(): string[] {
+  return [
+    "██╗  ██╗ ██████╗  ██████╗ ",
+    "██║ ██╔╝██╔════╝ ██╔════╝ ",
+    "█████╔╝ ██║      ██║  ███╗",
+    "██╔═██╗ ██║      ██║   ██║",
+    "██║  ██╗╚██████╗ ╚██████╔╝",
+    "╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ",
+  ];
+}
+
+export function stripAnsi(s: string): string {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: strip ANSI SGR
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+/** Render panel berborder. Lebar menyesuaikan isi. */
+export function panel(title: string | null, lines: string[], minWidth = 48): string {
+  const contentW = Math.max(
+    title ? title.length + 2 : 0,
+    ...lines.map((l) => stripAnsi(l).length),
+    minWidth - 4,
+  );
+  const inner = Math.max(20, contentW + 2);
+  const out: string[] = [];
+  const titleText = title ? ` ${title} ` : "";
+  const pad = Math.max(0, inner - titleText.length);
+  const left = Math.floor(pad / 2);
+  const right = pad - left;
+  out.push(
+    `${c.cyan(symbols.boxTL)}${c.cyan(symbols.boxH.repeat(left) + titleText + symbols.boxH.repeat(right))}${c.cyan(symbols.boxTR)}`,
+  );
+  for (const line of lines) {
+    const visible = stripAnsi(line).length;
+    const spaces = Math.max(0, inner - visible - 2);
+    out.push(`${c.cyan(symbols.boxV)} ${line}${" ".repeat(spaces)} ${c.cyan(symbols.boxV)}`);
+  }
+  out.push(`${c.cyan(symbols.boxBL)}${c.cyan(symbols.boxH.repeat(inner))}${c.cyan(symbols.boxBR)}`);
+  return out.join("\n");
+}
+
+/** Baris label + value. */
+export function row(label: string, value: string, labelWidth = 12): string {
+  return `${c.dim(label.padEnd(labelWidth))}${value}`;
+}

package/src/components/auth/AuthGate.tsx

@@ -0,0 +1,182 @@
+/**
+ * Gerbang kunci aplikasi. Selama kunci aktif dan sesi belum dibuka, app TIDAK
+ * dirender sama sekali — tidak ada request API / WebSocket yang berjalan dan
+ * tidak ada data yang tersisa di DOM. Yang tampil hanya `LockScreen`.
+ *
+ * Animasi (Motion `AnimatePresence`, `initial={false}` -> tidak beranimasi
+ * saat app pertama dibuka dalam keadaan terkunci):
+ * - Dikunci: lock screen turun dari atas. App lama ditahan di DOM (inert)
+ *   hanya sampai lock screen mendarat, lalu dilepas.
+ * - Dibuka: lock screen naik keluar layar, app sudah ada di bawahnya.
+ * - Instalasi baru (`needsOnboarding`): welcome screen (`WelcomeScreen`)
+ *   memudar masuk di lapisan sendiri; setelah selesai memudar keluar dan
+ *   app muncul dari baliknya.
+ *
+ * Kunci otomatis: server menegakkan batas idle; klien menirunya dengan timer
+ * aktivitas lokal (agar layar terkunci tepat waktu walau tidak ada request)
+ * dan heartbeat status berkala (mendeteksi kunci dari perangkat lain /
+ * sesi dicabut).
+ */
+import { AnimatePresence, useIsPresent, useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { LockScreen } from "@/components/auth/LockScreen";
+import { WelcomeScreen } from "@/components/auth/WelcomeScreen";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { lockNow, refreshAuth, useAuth } from "@/lib/auth";
+
+/** Interval cek status ke server saat app terbuka. */
+const HEARTBEAT_MS = 60_000;
+
+const ACTIVITY_EVENTS = ["pointerdown", "keydown", "wheel", "touchstart"] as const;
+
+export function AuthGate({ children }: { children: ReactNode }) {
+  const auth = useAuth();
+
+  useEffect(() => {
+    void refreshAuth();
+  }, []);
+
+  const status = auth.phase === "ready" ? auth.status : null;
+  const unlocked = status !== null && (!status.protected || status.authenticated);
+
+  /**
+   * Welcome screen di-"latch": begitu tampil, ia bertahan sampai pengguna
+   * menyelesaikannya (`onFinished`) — walau di tengah alur server sudah
+   * melaporkan `needsOnboarding: false` (mis. setelah kunci dipasang di
+   * langkah Lock, heartbeat / refresh status lain tidak boleh memotong
+   * layar "Done").
+   */
+  const [onboarding, setOnboarding] = useState(false);
+  // Latch disetel SAAT render (bukan di effect) agar tidak ada satu frame
+  // pun app tampil sebelum welcome screen.
+  if (status?.needsOnboarding && !onboarding) setOnboarding(true);
+  const autoLockMs =
+    status?.protected && status.autoLockMinutes > 0 ? status.autoLockMinutes * 60_000 : 0;
+
+  // Kunci otomatis sisi klien + heartbeat.
+  const lastActivity = useRef(Date.now());
+  useEffect(() => {
+    if (!unlocked || !status?.protected) return;
+    lastActivity.current = Date.now();
+    const onActivity = () => {
+      lastActivity.current = Date.now();
+    };
+    for (const ev of ACTIVITY_EVENTS) window.addEventListener(ev, onActivity, { passive: true });
+
+    const tick = setInterval(() => {
+      if (autoLockMs > 0 && Date.now() - lastActivity.current >= autoLockMs) {
+        void lockNow();
+      }
+    }, 5_000);
+    const heartbeat = setInterval(() => void refreshAuth(), HEARTBEAT_MS);
+    // Kembali ke tab / buka app lagi di HP -> cek segera (timer bisa tertunda
+    // saat tab di latar belakang).
+    const onVisible = () => {
+      if (document.visibilityState !== "visible") return;
+      if (autoLockMs > 0 && Date.now() - lastActivity.current >= autoLockMs) void lockNow();
+      else void refreshAuth();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+
+    return () => {
+      for (const ev of ACTIVITY_EVENTS) window.removeEventListener(ev, onActivity);
+      clearInterval(tick);
+      clearInterval(heartbeat);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [unlocked, status?.protected, autoLockMs]);
+
+  if (auth.phase === "loading") {
+    return (
+      <div className="flex h-dvh items-center justify-center bg-background" role="status">
+        <Spinner className="size-6 text-muted-foreground" />
+        <span className="sr-only">Loading…</span>
+      </div>
+    );
+  }
+
+  if (auth.phase === "error") {
+    return (
+      <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6 text-center">
+        <p className="text-sm text-muted-foreground">Can't reach the KCG Code server.</p>
+        <Button type="button" variant="outline" onClick={() => void refreshAuth()}>
+          Try again
+        </Button>
+      </div>
+    );
+  }
+
+  const locked = !unlocked && status !== null;
+  /**
+   * Instalasi baru: welcome screen MENUTUPI app (lapisan sendiri di atas).
+   * App baru dirender setelah onboarding selesai — tidak ada request data
+   * selama welcome screen — lalu muncul dari balik layar yang memudar.
+   */
+  const showWelcome = !locked && (onboarding || status?.needsOnboarding === true);
+  return (
+    <>
+      <AnimatePresence initial={false}>
+        {locked ? (
+          <m.div
+            key="lock"
+            // Tirai: turun dari atas saat dikunci, naik keluar saat dibuka.
+            // Bayangan di tepi bawah hanya terlihat selama bergerak.
+            className="fixed inset-0 z-[100] shadow-[0_24px_48px_-12px_rgb(0_0_0/0.45)]"
+            initial={{ y: "-100%" }}
+            animate={{ y: 0, transition: { duration: 0.55, ease: LOCK_EASE } }}
+            exit={{ y: "-100%", transition: { duration: 0.45, ease: LOCK_EASE } }}
+          >
+            <LockScreen status={status} />
+          </m.div>
+        ) : showWelcome ? null : (
+          <AppLayer key="app">{children}</AppLayer>
+        )}
+      </AnimatePresence>
+
+      {/* Lapisan terpisah: SELALU beranimasi masuk (bahkan saat app pertama
+          dibuka) dan keluar dengan memudar + sedikit membesar. */}
+      <AnimatePresence>
+        {showWelcome && status && (
+          <m.div
+            key="welcome"
+            className="fixed inset-0 z-[90]"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { duration: 0.4, ease: "easeOut" } }}
+            exit={{ opacity: 0, scale: 1.03, transition: { duration: 0.45, ease: LOCK_EASE } }}
+          >
+            <WelcomeScreen status={status} onFinished={() => setOnboarding(false)} />
+          </m.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+
+/** Kurva ala sheet iOS: cepat di awal, mendarat halus. */
+const LOCK_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
+/** Selama app lama ditahan di bawah lock screen yang sedang turun (detik). */
+const LOCK_COVER_S = 0.55;
+
+/**
+ * App yang sedang terbuka. Saat dikunci, `AnimatePresence` menahannya di DOM
+ * sampai lock screen selesai menutupi layar (`exit` tertunda
+ * `LOCK_COVER_S`), lalu melepasnya — tidak ada data yang tersisa. Selama
+ * ditahan: `inert` (tak bisa diklik, difokus, atau dibaca pembaca layar).
+ * `display: contents` agar pembungkus tidak mengubah layout shell.
+ */
+function AppLayer({ children }: { children: ReactNode }) {
+  const present = useIsPresent();
+  // Reduced motion: lock screen tampil seketika, jadi app tak perlu ditahan.
+  const reduced = useReducedMotion();
+  return (
+    <m.div
+      className="contents"
+      inert={!present}
+      exit={{ opacity: 0, transition: { delay: reduced ? 0 : LOCK_COVER_S, duration: 0 } }}
+    >
+      {children}
+    </m.div>
+  );
+}