kcg-code 0.0.0-stage → 0.1.0

package/src/cli/args.ts

@@ -0,0 +1,123 @@
+/**
+ * Parser argumen CLI kcgcode (tanpa dependency eksternal).
+ */
+
+export interface CliArgs {
+  command: "start" | "init" | "reset-lock" | "help" | "version" | "invalid";
+  port?: number;
+  host?: string;
+  /** Path berkas konfigurasi (override KCG_CONFIG_PATH). */
+  config?: string;
+  open: boolean;
+  /** Argumen tak dikenal / pesan error. */
+  error?: string;
+}
+
+const HELP_TEXT = `kcgcode — control CLI AI agents from your phone
+
+USAGE
+  kcgcode [start] [options]
+  kcgcode init [options]
+  kcgcode help | --help | -h
+  kcgcode version | --version | -v
+
+COMMANDS
+  start (default)   Run server + terminal dashboard
+  init              Create kcg-code.config.json & local sandbox folder
+  reset-lock        Remove the app lock (forgot PIN/password) & sign out all devices
+
+OPTIONS
+  -p, --port <n>    HTTP port (default 3000 / env KCG_PORT)
+  -H, --host <h>    Bind host (default 127.0.0.1 / env KCG_HOST)
+  -c, --config <f>  Config path (default ~/.kcgcode/config.json)
+  --open            Open the web dashboard in a browser after start
+  -h, --help        Show help
+  -v, --version     Show version
+
+ENV
+  KCG_PORT              HTTP port
+  KCG_HOST              Bind host
+  KCG_CONFIG_PATH       Config file path
+  KCG_DB_PATH           SQLite path (default ~/.kcgcode/data/kcg-code.sqlite)
+
+EXAMPLES
+  kcgcode
+  kcgcode init
+  kcgcode start --port 4000 --open
+  kcgcode init --config ~/.kcgcode/config.json
+`;
+
+export function helpText(): string {
+  return HELP_TEXT;
+}
+
+export function parseArgs(argv: string[]): CliArgs {
+  const args: CliArgs = { command: "start", open: false };
+  const rest = [...argv];
+
+  // Command eksplisit di posisi pertama (bukan flag)
+  const first = rest[0];
+  if (first === "init") {
+    args.command = "init";
+    rest.shift();
+  } else if (first === "reset-lock") {
+    args.command = "reset-lock";
+    rest.shift();
+  } else if (first === "start") {
+    args.command = "start";
+    rest.shift();
+  } else if (first === "help") {
+    args.command = "help";
+    rest.shift();
+  } else if (first === "version") {
+    args.command = "version";
+    rest.shift();
+  }
+
+  for (let i = 0; i < rest.length; i++) {
+    const a = rest[i];
+    if (a === undefined) continue;
+
+    if (a === "-h" || a === "--help") {
+      return { command: "help", open: false };
+    }
+    if (a === "-v" || a === "--version") {
+      return { command: "version", open: false };
+    }
+    if (a === "--open") {
+      args.open = true;
+      continue;
+    }
+    if (a === "-p" || a === "--port") {
+      const raw = rest[++i];
+      if (raw === undefined)
+        return { ...args, command: "invalid", error: `Missing value for ${a}` };
+      const n = Number(raw);
+      if (!Number.isInteger(n) || n <= 0 || n > 65535) {
+        return { ...args, command: "invalid", error: `Invalid port "${raw}"` };
+      }
+      args.port = n;
+      continue;
+    }
+    if (a === "-H" || a === "--host") {
+      const raw = rest[++i];
+      if (raw === undefined)
+        return { ...args, command: "invalid", error: `Missing value for ${a}` };
+      args.host = raw;
+      continue;
+    }
+    if (a === "-c" || a === "--config") {
+      const raw = rest[++i];
+      if (raw === undefined)
+        return { ...args, command: "invalid", error: `Missing value for ${a}` };
+      args.config = raw;
+      continue;
+    }
+    if (a.startsWith("-")) {
+      return { ...args, command: "invalid", error: `Unknown option "${a}"` };
+    }
+    return { ...args, command: "invalid", error: `Unknown command "${a}"` };
+  }
+
+  return args;
+}

package/src/cli/commands.ts

@@ -0,0 +1,174 @@
+/**
+ * Perintah CLI: start (server + dashboard) dan init (scaffold config).
+ */
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { resolveConfig } from "../config";
+import { openSessionStore } from "../db";
+import spa from "../index.html";
+import {
+  defaultSandboxDir,
+  ensureKcgHome,
+  KCG_HOME,
+  resolveEffectiveConfigPath,
+  resolveEffectiveDbPath,
+  resolveEffectiveUploadsDir,
+} from "../paths";
+import { isCliMode } from "../runtime";
+import { createKcgServer } from "../server/app";
+import { resolveHostname } from "../server/host";
+import { createAuthService } from "../server/services/auth";
+import type { CliArgs } from "./args";
+import { openBrowser, startDashboard } from "./dashboard";
+import { c, panel, row, symbols } from "./theme";
+
+const SPA_PATHS = ["/", "/projects", "/projects/*", "/skills", "/settings", "/settings/*"];
+
+function applyEnvOverrides(args: CliArgs): void {
+  if (args.port !== undefined) process.env.KCG_PORT = String(args.port);
+  if (args.host !== undefined) process.env.KCG_HOST = args.host;
+  if (args.config !== undefined) process.env.KCG_CONFIG_PATH = args.config;
+}
+
+function failConfig(message: string): never {
+  console.error(`${c.redBright(symbols.cross)} ${message}`);
+  console.error(
+    `\n${c.dim("Run")} ${c.cyan("kcgcode init")} ${c.dim("to create")} ${c.cyan("~/.kcgcode/config.json")}${c.dim(".")}`,
+  );
+  process.exit(1);
+}
+
+export async function runStart(args: CliArgs): Promise<void> {
+  // CLI global = mode produksi: matikan HMR dev yang noisy di luar repo.
+  if (process.env.NODE_ENV === undefined) {
+    process.env.NODE_ENV = "production";
+  }
+  applyEnvOverrides(args);
+
+  const cfg = resolveConfig();
+  if (!cfg.ok) failConfig(cfg.error);
+
+  const port = args.port ?? Number(process.env.KCG_PORT ?? 3000);
+  const hostname = args.host ?? resolveHostname();
+
+  const app = createKcgServer({
+    config: cfg.data,
+    spa,
+    spaPaths: SPA_PATHS,
+    port,
+    hostname,
+    uploadsRoot: resolveEffectiveUploadsDir(),
+  });
+
+  const resolvedPort = app.server.port ?? port;
+  const primaryUrl = `http://${hostname === "0.0.0.0" || hostname === "::" ? "localhost" : hostname}:${resolvedPort}`;
+
+  let shuttingDown = false;
+  let dash: { stop(): void } | null = null;
+
+  async function shutdown(reason: string): Promise<void> {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    dash?.stop();
+    console.log(`\n${c.dim(`(${reason})`)} ${c.yellow("Saving session state and stopping…")}`);
+    try {
+      await app.close();
+    } catch (err) {
+      console.error(c.red("Shutdown error:"), err);
+    }
+    console.log(c.greenBright(`${symbols.check} KCG Code stopped.`));
+    process.exit(0);
+  }
+
+  dash = await startDashboard({
+    server: app,
+    port: resolvedPort,
+    hostname,
+    onQuit: (reason) => void shutdown(reason),
+    onOpenUrl: () => openBrowser(primaryUrl),
+  });
+
+  if (args.open) {
+    void openBrowser(primaryUrl);
+  }
+
+  process.on("SIGINT", () => void shutdown("SIGINT"));
+  process.on("SIGTERM", () => void shutdown("SIGTERM"));
+}
+
+export function runInit(args: CliArgs): void {
+  if (isCliMode()) ensureKcgHome();
+
+  const configPath = resolveEffectiveConfigPath(args.config);
+  const sandboxPath = args.config
+    ? path.join(path.dirname(configPath), "sandbox")
+    : defaultSandboxDir();
+  const dataDir = path.dirname(resolveEffectiveDbPath());
+
+  if (existsSync(configPath)) {
+    console.log(
+      panel("INIT", [
+        row("Config", c.yellow("already exists — skipped")),
+        row("Path", c.dim(configPath)),
+        row("Mode", c.dim(isCliMode() ? "cli (~/.kcgcode)" : "dev (local)")),
+        row("Home", c.dim(KCG_HOME)),
+        "",
+        c.dim("Edit sandboxRoot in the config if needed."),
+      ]),
+    );
+    return;
+  }
+
+  mkdirSync(path.dirname(configPath), { recursive: true });
+  mkdirSync(sandboxPath, { recursive: true });
+  mkdirSync(dataDir, { recursive: true });
+  const body = `${JSON.stringify({ sandboxRoot: sandboxPath }, null, 2)}\n`;
+  writeFileSync(configPath, body, "utf8");
+
+  console.log(
+    panel("INIT", [
+      row("Config", c.greenBright(`${symbols.check} created`)),
+      row("Path", c.white(configPath)),
+      row("Sandbox", c.white(sandboxPath)),
+      row("Data", c.dim(dataDir)),
+      row("Mode", c.dim(isCliMode() ? "cli (~/.kcgcode)" : "dev (local)")),
+      "",
+      c.dim(
+        isCliMode()
+          ? `Run ${c.cyan("kcgcode")} to start the dashboard.`
+          : `Run ${c.cyan("bun dev")} in the project, or ${c.cyan("kcgcode")} if installed globally.`,
+      ),
+    ]),
+  );
+}
+
+/**
+ * Lupa PIN/password: hapus kunci aplikasi & cabut semua sesi langsung di
+ * database lokal. Hanya bisa dijalankan dari mesin ini (akses shell), jadi
+ * aman sebagai jalur pemulihan. Nickname & foto profil tidak diubah.
+ */
+export function runResetLock(): void {
+  const dbPath = resolveEffectiveDbPath();
+  if (!existsSync(dbPath)) {
+    console.log(`${c.dim("No database at")} ${c.cyan(dbPath)} ${c.dim("— nothing to reset.")}`);
+    return;
+  }
+  const store = openSessionStore(dbPath);
+  try {
+    const wasLocked = store.getAuthSettings(Date.now()).lockKind !== null;
+    createAuthService({ store }).resetLock();
+    console.log(
+      wasLocked
+        ? `${c.greenBright(symbols.check)} App lock removed and all devices signed out.`
+        : `${c.greenBright(symbols.check)} App was not locked. All device sessions cleared.`,
+    );
+    console.log(
+      `${c.dim("Set a new PIN or password in")} ${c.cyan("Settings → Security")}${c.dim(".")}`,
+    );
+    console.log(
+      `${c.yellow("!")} ${c.dim("If KCG Code is running, anyone who can reach it can use it until you set a new lock.")}`,
+    );
+  } finally {
+    store.close();
+  }
+}

package/src/cli/dashboard.tsx

@@ -0,0 +1,343 @@
+/**
+ * Dashboard terminal live untuk server kcgcode — dirender lewat Ink.
+ *
+ * Alternate screen + frame update in-place; layout modern dengan card.
+ */
+import { networkInterfaces } from "node:os";
+import { Box, render, renderToString, Text, useInput } from "ink";
+import { type ReactNode, useEffect, useReducer } from "react";
+import type { KcgServer } from "../server/app";
+import { logoLines, readPackageVersion } from "./theme";
+
+export interface DashboardInfo {
+  server: KcgServer;
+  port: number;
+  hostname: string;
+}
+
+export interface DashboardCallbacks {
+  /** Panggil saat user minta berhenti (q / Ctrl+C). */
+  onQuit: (reason: string) => void;
+  /** Buka URL dashboard di browser default. */
+  onOpenUrl: () => void | Promise<void>;
+}
+
+const REFRESH_MS = 2000;
+const PAD = 2;
+
+function localUrls(hostname: string, port: number): { label: string; url: string }[] {
+  const urls: { label: string; url: string }[] = [];
+  const host = hostname === "0.0.0.0" || hostname === "::" ? "localhost" : hostname;
+  urls.push({ label: "local", url: `http://${host}:${port}` });
+
+  if (hostname === "127.0.0.1" || hostname === "localhost") {
+    return urls;
+  }
+
+  for (const infos of Object.values(networkInterfaces())) {
+    for (const info of infos ?? []) {
+      if (info.family === "IPv4" && !info.internal) {
+        urls.push({ label: "network", url: `http://${info.address}:${port}` });
+      }
+    }
+  }
+  return urls;
+}
+
+function activityStats(app: KcgServer) {
+  const projects = app.store.listProjects().length;
+  const sessions = app.store.listSessions();
+  const running = sessions.filter((s) => s.status === "running");
+  return { projects, sessions: sessions.length, running };
+}
+
+function Card({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box borderStyle="round" borderColor="cyan" flexDirection="column" paddingX={1} gap={0}>
+      <Text color="cyan" bold>
+        {title}
+      </Text>
+      <Box flexDirection="column" gap={0}>
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+function Key({ children }: { children: string }) {
+  return <Text dimColor>{children}</Text>;
+}
+
+function Metric({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
+  return (
+    <Box gap={1}>
+      <Text dimColor>{label.padEnd(10)}</Text>
+      <Text bold color={accent ? "green" : undefined}>
+        {value}
+      </Text>
+    </Box>
+  );
+}
+
+function Brand({ version }: { version: string }) {
+  const logos = logoLines();
+  return (
+    <Box gap={2}>
+      <Box flexDirection="column">
+        {logos.map((line, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static logo lines
+          <Text key={i} color="cyan" bold>
+            {line}
+          </Text>
+        ))}
+      </Box>
+      <Box flexDirection="column">
+        <Box gap={1}>
+          <Text bold color="cyan">
+            kcgcode
+          </Text>
+          <Text dimColor>v{version}</Text>
+        </Box>
+        <Text dimColor>mobile control for CLI agents</Text>
+        <Text dimColor>opencode · claude code</Text>
+      </Box>
+    </Box>
+  );
+}
+
+const TUNNEL_COLOR: Record<string, string> = {
+  online: "green",
+  connecting: "yellow",
+  starting: "yellow",
+  reconnecting: "yellow",
+  error: "red",
+};
+
+/** Status tunnel publik (`https://<username>.<domain>`). */
+function TunnelCard({ server }: { server: KcgServer }) {
+  const t = server.tunnel.status();
+  if (!t.account) {
+    return (
+      <Card title="TUNNEL">
+        {t.pairing ? (
+          <>
+            <Box gap={1}>
+              <Text color="yellow">○</Text>
+              <Text dimColor>{"code".padEnd(8)}</Text>
+              <Text bold color="yellow">
+                {t.pairing.userCode}
+              </Text>
+            </Box>
+            <Box gap={1}>
+              <Text color="gray"> </Text>
+              <Text dimColor>{"open".padEnd(8)}</Text>
+              <Text color="cyan" underline>
+                {t.pairing.verificationUriComplete}
+              </Text>
+            </Box>
+          </>
+        ) : (
+          <Box gap={1}>
+            <Text color="gray">○</Text>
+            <Text dimColor>off · connect in Settings → Remote access</Text>
+          </Box>
+        )}
+      </Card>
+    );
+  }
+  const color = TUNNEL_COLOR[t.phase] ?? "gray";
+  return (
+    <Card title="TUNNEL">
+      <Box gap={1}>
+        <Text color={color}>{t.phase === "online" ? "●" : "○"}</Text>
+        <Text dimColor>{"public".padEnd(8)}</Text>
+        <Text color="cyan" underline={t.phase === "online"}>
+          {t.account.url}
+        </Text>
+      </Box>
+      <Box gap={1}>
+        <Text dimColor>{"status".padEnd(10)}</Text>
+        <Text color={color} bold>
+          {t.phase === "stopped" ? "off" : t.phase}
+        </Text>
+        {t.error && <Text color="red">({t.error})</Text>}
+      </Box>
+    </Card>
+  );
+}
+
+interface DashboardUIProps {
+  info: DashboardInfo;
+  version: string;
+}
+
+function DashboardUI({ info, version }: DashboardUIProps) {
+  const { server, port, hostname } = info;
+  const urls = localUrls(hostname, port);
+  const { projects, sessions, running } = activityStats(server);
+
+  return (
+    <Box flexDirection="column" paddingX={PAD} paddingY={1} gap={1}>
+      <Brand version={version} />
+
+      <Card title="SERVER">
+        {urls.map((u, idx) => (
+          <Box key={u.url} gap={1}>
+            <Text color={idx === 0 ? "green" : "gray"}>{idx === 0 ? "●" : "○"}</Text>
+            <Text dimColor>{u.label.padEnd(8)}</Text>
+            <Text color="cyan" underline>
+              {u.url}
+            </Text>
+          </Box>
+        ))}
+        <Box marginTop={0} gap={1}>
+          <Text dimColor>{"process".padEnd(8)}</Text>
+          <Text color="green" bold>
+            running
+          </Text>
+        </Box>
+      </Card>
+
+      <TunnelCard server={server} />
+
+      <Card title="ACTIVITY">
+        <Metric label="projects" value={String(projects)} />
+        <Metric label="sessions" value={String(sessions)} />
+        <Metric label="running" value={String(running.length)} accent={running.length > 0} />
+
+        {running.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            {running.slice(0, 5).map((s) => (
+              <Box key={s.id} gap={1}>
+                <Text color="green">●</Text>
+                <Text>{s.title?.trim() || s.id.slice(0, 12)}</Text>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Card>
+
+      <Box gap={2}>
+        <Box gap={1}>
+          <Key>q</Key>
+          <Text dimColor>quit</Text>
+        </Box>
+        <Box gap={1}>
+          <Key>o</Key>
+          <Text dimColor>open</Text>
+        </Box>
+        <Box gap={1}>
+          <Key>ctrl+c</Key>
+          <Text dimColor>stop</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+/** Frame string (non-TTY / test). */
+export function renderDashboard(info: DashboardInfo, version: string): string {
+  return renderToString(<DashboardUI info={info} version={version} />);
+}
+
+interface DashboardAppProps {
+  info: DashboardInfo;
+  version: string;
+  onQuit: DashboardCallbacks["onQuit"];
+  onOpenUrl: DashboardCallbacks["onOpenUrl"];
+}
+
+function DashboardApp({ info, version, onQuit, onOpenUrl }: DashboardAppProps) {
+  const [, tick] = useReducer((n: number) => n + 1, 0);
+
+  useEffect(() => {
+    const id = setInterval(tick, REFRESH_MS);
+    return () => clearInterval(id);
+  }, []);
+
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") {
+      onQuit("Ctrl+C");
+      return;
+    }
+    if (input === "q" || input === "Q") {
+      onQuit("quit");
+      return;
+    }
+    if (input === "o" || input === "O") {
+      void onOpenUrl();
+    }
+  });
+
+  return <DashboardUI info={info} version={version} />;
+}
+
+export interface RunningDashboard {
+  stop(): void;
+  /** Frame sudah live via Ink; API dipertahankan untuk kompatibilitas. */
+  redraw(): void;
+}
+
+/**
+ * Mulai dashboard live di alternate screen. Kembalikan handle untuk stop.
+ * Pastikan `stop()` dipanggil saat shutdown agar terminal pulih.
+ */
+export async function startDashboard(
+  info: DashboardInfo & Partial<DashboardCallbacks>,
+): Promise<RunningDashboard> {
+  const version = await readPackageVersion();
+  const stdout = process.stdout;
+  const isTty = Boolean(stdout.isTTY);
+
+  const onQuit = info.onQuit ?? (() => {});
+  const onOpenUrl = info.onOpenUrl ?? (() => {});
+
+  if (!isTty) {
+    stdout.write(`${renderDashboard(info, version)}\n`);
+    return {
+      stop() {},
+      redraw() {
+        stdout.write(`${renderDashboard(info, version)}\n`);
+      },
+    };
+  }
+
+  const instance = render(
+    <DashboardApp info={info} version={version} onQuit={onQuit} onOpenUrl={onOpenUrl} />,
+    {
+      alternateScreen: true,
+      patchConsole: true,
+      exitOnCtrlC: false,
+      incrementalRendering: true,
+    },
+  );
+
+  return {
+    stop() {
+      instance.unmount();
+    },
+    redraw() {
+      instance.rerender(
+        <DashboardApp info={info} version={version} onQuit={onQuit} onOpenUrl={onOpenUrl} />,
+      );
+    },
+  };
+}
+
+/** Coba buka URL di browser default OS. */
+export async function openBrowser(url: string): Promise<void> {
+  const platform = process.platform;
+  let cmd: string[];
+  if (platform === "win32") {
+    cmd = ["cmd", "/c", "start", "", url];
+  } else if (platform === "darwin") {
+    cmd = ["open", url];
+  } else {
+    cmd = ["xdg-open", url];
+  }
+  try {
+    Bun.spawn(cmd, { stdout: "ignore", stderr: "ignore" });
+  } catch {
+    // diam — user bisa buka manual
+  }
+}

package/src/cli/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Router CLI kcgcode — dipanggil dari `bin/kcgcode.ts`.
+ */
+import { type CliArgs, helpText, parseArgs } from "./args";
+import { runInit, runResetLock, runStart } from "./commands";
+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;
+  }
+}
+
+export type { CliArgs };