kcg-code 0.2.0 → 0.2.2

package/dist/web/logo.svg

@@ -0,0 +1 @@
+<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>

package/dist/web/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "KCG Code",
+  "short_name": "KCG Code",
+  "description": "Kontrol CLI AI Agent (OpenCode / Claude Code) dari perangkat mobile.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0a0a0a",
+  "theme_color": "#0a0a0a",
+  "lang": "id",
+  "icons": [
+    {
+      "src": "/logo.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}

package/dist/web/sw.js

@@ -0,0 +1,67 @@
+// KCG Code service worker (Requirement 8.1).
+// - Cache-first untuk asset statis (JS/CSS bundle hasil build.ts).
+// - Network-only (pass-through) untuk `/api/*` dan koneksi WebSocket `/ws`,
+//   agar kontrol CLI_Agent tidak pernah disajikan dari cache basi.
+
+// Naikkan versi bila strategi cache berubah — cache lama dihapus saat activate.
+const CACHE_NAME = "kcg-code-v2";
+const PRECACHE = ["/", "/manifest.json", "/logo.svg"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => cache.addAll(PRECACHE))
+      .catch(() => {}),
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))),
+      ),
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+
+  // Network-only untuk API dan WebSocket.
+  if (url.pathname.startsWith("/api/") || url.pathname === "/ws") return;
+
+  // Network-first untuk halaman: shell HTML lama (chunk usang) tidak boleh
+  // terjebak di cache setelah update. Cache hanya dipakai saat offline.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          if (response.ok) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+          }
+          return response;
+        })
+        .catch(() => caches.match(event.request).then((cached) => cached ?? caches.match("/"))),
+    );
+    return;
+  }
+
+  // Cache-first untuk asset statis (chunk ber-hash).
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      if (cached) return cached;
+      return fetch(event.request).then((response) => {
+        if (response.ok && url.origin === self.location.origin) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        }
+        return response;
+      });
+    }),
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kcg-code",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Control CLI AI agents (OpenCode / Claude Code) from your phone — mobile PWA + local headless bridge.",
   "license": "MIT",
   "type": "module",
@@ -11,6 +11,7 @@
     "bin",
     "src",
     "public",
+    "dist/web",
     "styles",
     "bun-env.d.ts",
     "tsconfig.json",
@@ -40,8 +41,8 @@
     "lint:fix": "biome check --write .",
     "format": "biome format --write .",
     "typecheck": "tsc --noEmit",
-    "prepack": "bun scripts/stamp-build-config.ts",
-    "postpack": "bun scripts/stamp-build-config.ts --reset"
+    "prepack": "bun scripts/stamp-build-config.ts && bun run build.ts --outdir dist/web --no-sourcemap",
+    "postpack": "bun scripts/stamp-build-config.ts --reset && bun -e \"require('node:fs').rmSync('dist/web', { recursive: true, force: true })\""
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.296",

package/public/sw.js

@@ -3,7 +3,8 @@
 // - Network-only (pass-through) untuk `/api/*` dan koneksi WebSocket `/ws`,
 //   agar kontrol CLI_Agent tidak pernah disajikan dari cache basi.
 
-const CACHE_NAME = "kcg-code-v1";
+// Naikkan versi bila strategi cache berubah — cache lama dihapus saat activate.
+const CACHE_NAME = "kcg-code-v2";
 const PRECACHE = ["/", "/manifest.json", "/logo.svg"];
 
 self.addEventListener("install", (event) => {
@@ -33,7 +34,24 @@ self.addEventListener("fetch", (event) => {
   // Network-only untuk API dan WebSocket.
   if (url.pathname.startsWith("/api/") || url.pathname === "/ws") return;
 
-  // Cache-first untuk asset statis.
+  // Network-first untuk halaman: shell HTML lama (chunk usang) tidak boleh
+  // terjebak di cache setelah update. Cache hanya dipakai saat offline.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          if (response.ok) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+          }
+          return response;
+        })
+        .catch(() => caches.match(event.request).then((cached) => cached ?? caches.match("/"))),
+    );
+    return;
+  }
+
+  // Cache-first untuk asset statis (chunk ber-hash).
   event.respondWith(
     caches.match(event.request).then((cached) => {
       if (cached) return cached;

package/src/cli/commands.ts

@@ -13,10 +13,12 @@ import {
   resolveEffectiveConfigPath,
   resolveEffectiveDbPath,
   resolveEffectiveUploadsDir,
+  WEB_DIST_DIR,
 } from "../paths";
 import { isCliMode } from "../runtime";
 import { createKcgServer } from "../server/app";
 import { resolveHostname } from "../server/host";
+import { loadPrebuiltWeb } from "../server/prebuilt-web";
 import { createAuthService } from "../server/services/auth";
 import type { CliArgs } from "./args";
 import { attachToDaemon } from "./attach";
@@ -110,10 +112,13 @@ export async function runStart(args: CliArgs): Promise<void> {
     return;
   }
 
+  // Paket npm membawa frontend prebuilt; checkout git jatuh ke bundling runtime.
+  const web = loadPrebuiltWeb(WEB_DIST_DIR);
   const boot = (port: number) =>
     createKcgServer({
       config,
-      spa,
+      spa: web?.spa ?? spa,
+      assets: web?.assets,
       spaPaths: SPA_PATHS,
       port,
       hostname,

package/src/cli/dashboard.tsx

@@ -5,12 +5,16 @@
  */
 import { networkInterfaces } from "node:os";
 import { Box, render, renderToString, Text, useInput } from "ink";
-import { type ReactNode, useEffect, useReducer, useRef, useState } from "react";
+import type { ReactNode } from "react";
 import { renderUnicodeCompact } from "uqr";
 import type { KcgServer } from "../server/app";
+import { InkReact } from "./ink-react";
 import type { KeepAwake } from "./keep-awake";
 import { logoLines, readPackageVersion } from "./theme";
 
+// Hook wajib dari instance React milik Ink — lihat ink-react.ts.
+const { useEffect, useReducer, useRef, useState } = InkReact;
+
 export type TunnelProviderId = "kcg" | "lhr";
 
 interface KcgTunnelStatus {

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/paths.ts

@@ -20,6 +20,9 @@ export const PACKAGE_ROOT = path.resolve(import.meta.dir, "..");
 /** Direktori asset statis PWA di dalam paket. */
 export const PUBLIC_DIR = path.join(PACKAGE_ROOT, "public");
 
+/** Frontend hasil build yang ikut paket npm (`build.ts --outdir dist/web`, saat prepack). */
+export const WEB_DIST_DIR = path.join(PACKAGE_ROOT, "dist", "web");
+
 /** Direktori aplikasi milik user: `~/.kcgcode`. */
 export const KCG_HOME = path.join(homedir(), ".kcgcode");
 

package/src/server/__tests__/prebuilt-web.test.ts

@@ -0,0 +1,35 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { loadPrebuiltWeb } from "../prebuilt-web";
+
+describe("loadPrebuiltWeb", () => {
+  let dir = "";
+  afterEach(() => rmSync(dir, { recursive: true, force: true }));
+
+  test("null bila belum di-build", () => {
+    dir = mkdtempSync(path.join(tmpdir(), "kcg-web-"));
+    expect(loadPrebuiltWeb(dir)).toBeNull();
+  });
+
+  test("shell SPA + rute chunk; sourcemap tidak diekspos", async () => {
+    dir = mkdtempSync(path.join(tmpdir(), "kcg-web-"));
+    writeFileSync(path.join(dir, "index.html"), "<!doctype html><title>x</title>");
+    writeFileSync(path.join(dir, "chunk-abc123.js"), "console.log(1)");
+    writeFileSync(path.join(dir, "chunk-abc123.js.map"), "{}");
+    mkdirSync(path.join(dir, "icons"));
+    writeFileSync(path.join(dir, "icons", "a.png"), "png");
+
+    const web = loadPrebuiltWeb(dir);
+    expect(web).not.toBeNull();
+    if (!web) return;
+    expect(Object.keys(web.assets).sort()).toEqual(["/chunk-abc123.js", "/icons/a.png"]);
+    expect(web.spa.headers.get("content-type")).toContain("text/html");
+
+    const chunk = web.assets["/chunk-abc123.js"]?.() as Response;
+    expect(await chunk.text()).toBe("console.log(1)");
+    expect(chunk.headers.get("cache-control")).toContain("immutable");
+    expect(web.assets["/icons/a.png"]?.().headers.get("cache-control")).toBe("no-cache");
+  });
+});

package/src/server/app.ts

@@ -114,6 +114,11 @@ export interface KcgServerOptions {
    * (`src/index.ts`) persis seperti daftar rute SPA kcgcode; path lain 404.
    */
   spaPaths?: string[];
+  /**
+   * Asset frontend hasil build (`dist/web`) per path URL — dipakai binary
+   * global sebagai pengganti bundling HTML saat runtime.
+   */
+  assets?: Record<string, () => Response>;
 }
 
 export interface KcgServer {
@@ -321,6 +326,9 @@ export function createKcgServer(opts: KcgServerOptions = {}): KcgServer {
     hostname,
     port,
     routes: {
+      // ---- Chunk frontend prebuilt (bila ada); rute eksplisit di bawah menang ----
+      ...opts.assets,
+
       // ---- Asset statis PWA dari root paket (bukan cwd) — aman utk global install ----
       "/manifest.json": () =>
         staticFile(path.join(PUBLIC_DIR, "manifest.json"), "application/manifest+json"),

package/src/server/prebuilt-web.ts

@@ -0,0 +1,46 @@
+/**
+ * Frontend hasil build (`build.ts --outdir dist/web`) yang ikut paket npm.
+ *
+ * Binary global memakai ini, bukan bundling HTML import saat runtime: di
+ * node_modules global bisa ada dua salinan React (library ter-hoist memakai
+ * React milik paket lain → "Cannot read properties of null (reading
+ * 'useState')"), dan plugin Tailwind dari bunfig.toml hanya terbaca bila cwd
+ * = root repo. Build dilakukan sekali di repo (prepack) dengan satu React.
+ */
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+
+export type AssetRoutes = Record<string, () => Response>;
+
+export interface PrebuiltWeb {
+  /** Shell SPA (index.html) untuk semua `spaPaths`. */
+  spa: Response;
+  /** Chunk JS/CSS & asset lain, per path URL. */
+  assets: AssetRoutes;
+}
+
+/** Chunk ber-hash aman di-cache selamanya; selain itu selalu revalidasi. */
+function cacheControl(file: string): string {
+  return /^chunk-[a-z0-9]+\./.test(path.basename(file)) || /-[a-z0-9]{8}\.\w+$/.test(file)
+    ? "public, max-age=31536000, immutable"
+    : "no-cache";
+}
+
+/** Rute frontend dari `dir`; null bila belum di-build (mis. checkout git). */
+export function loadPrebuiltWeb(dir: string): PrebuiltWeb | null {
+  const indexPath = path.join(dir, "index.html");
+  if (!existsSync(indexPath)) return null;
+
+  const assets: AssetRoutes = {};
+  for (const rel of new Bun.Glob("**/*").scanSync({ cwd: dir })) {
+    if (rel === "index.html" || rel.endsWith(".map")) continue;
+    const file = path.join(dir, rel);
+    const headers = { "cache-control": cacheControl(rel) };
+    assets[`/${rel.split(path.sep).join("/")}`] = () => new Response(Bun.file(file), { headers });
+  }
+
+  const spa = new Response(readFileSync(indexPath), {
+    headers: { "content-type": "text/html; charset=utf-8", "cache-control": "no-cache" },
+  });
+  return { spa, assets };
+}