kcg-code 0.0.0-stage → 0.1.0

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>
+  );
+}

package/src/components/auth/AvatarEditor.tsx

@@ -0,0 +1,236 @@
+/**
+ * Avatar yang bisa diedit (Settings -> Profile): avatar besar dengan tombol
+ * pensil di pojok. Pensil membuka popover berisi:
+ * - grid avatar bawaan (ikon) — klik untuk langsung dipakai,
+ * - "Upload photo" untuk foto kustom (PNG/JPEG/WebP/GIF, maks 2 MB),
+ * - "Remove" untuk kembali ke inisial.
+ *
+ * Aksesibilitas: grid = daftar tombol toggle (`aria-pressed` = pilihan saat
+ * ini). Panah kiri/kanan/atas/bawah memindah fokus tanpa memilih — memilih
+ * langsung menyimpan, jadi harus disengaja (Enter/Space/klik).
+ */
+import { CheckIcon, ImageUpIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { useRef, useState } from "react";
+import { AVATAR_PRESETS } from "@/components/auth/avatar-icons";
+import { ProfileAvatar } from "@/components/auth/ProfileAvatar";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { refreshAuth } from "@/lib/auth";
+import { AVATAR_PRESET_IDS, type AvatarPresetId } from "@/lib/avatar-presets";
+import { cn } from "@/lib/utils";
+import type { AuthProfile } from "@/server/services/auth";
+
+const COLUMNS = 4;
+
+export interface AvatarEditorProps {
+  profile: AuthProfile;
+  /** Pesan hasil (sukses / error) untuk ditampilkan pemanggil. */
+  onResult: (result: { ok: string } | { error: string }) => void;
+}
+
+export function AvatarEditor({ profile, onResult }: AvatarEditorProps) {
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState<AvatarPresetId | "upload" | "remove" | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const gridRef = useRef<HTMLFieldSetElement>(null);
+  const hasAvatar = profile.avatarUrl !== null || profile.avatarPreset !== null;
+
+  const run = async (
+    kind: AvatarPresetId | "upload" | "remove",
+    action: () => Promise<unknown>,
+    ok: string,
+  ) => {
+    setBusy(kind);
+    try {
+      await action();
+      await refreshAuth();
+      onResult({ ok });
+      setOpen(false);
+    } catch (e) {
+      onResult({ error: e instanceof ApiError ? e.message : "Couldn't update the avatar." });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const pickPreset = (id: AvatarPresetId) =>
+    run(
+      id,
+      () =>
+        apiFetch("/api/auth/avatar/preset", {
+          method: "PUT",
+          body: JSON.stringify({ preset: id }),
+        }),
+      "Avatar updated.",
+    );
+
+  const upload = (file: File) => {
+    const body = new FormData();
+    body.append("file", file);
+    return run(
+      "upload",
+      () => apiFetch("/api/auth/avatar", { method: "PUT", body }),
+      "Photo updated.",
+    );
+  };
+
+  const remove = () =>
+    run("remove", () => apiFetch("/api/auth/avatar", { method: "DELETE" }), "Avatar removed.");
+
+  // Navigasi panah di grid (roving tabindex).
+  const onGridKey = (e: React.KeyboardEvent<HTMLFieldSetElement>) => {
+    const items = [
+      ...(gridRef.current?.querySelectorAll<HTMLButtonElement>("[data-avatar-option]") ?? []),
+    ];
+    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
+    if (idx === -1) return;
+    const step: Record<string, number> = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: COLUMNS,
+      ArrowUp: -COLUMNS,
+    };
+    const d = step[e.key];
+    if (d === undefined) return;
+    e.preventDefault();
+    items[(idx + d + items.length) % items.length]?.focus();
+  };
+
+  const selectedIdx = profile.avatarPreset ? AVATAR_PRESET_IDS.indexOf(profile.avatarPreset) : -1;
+
+  return (
+    <div className="relative w-fit">
+      <ProfileAvatar
+        nickname={profile.nickname}
+        avatarUrl={profile.avatarUrl}
+        avatarPreset={profile.avatarPreset}
+        className="size-28 text-5xl"
+        textClassName="text-4xl"
+      />
+      {busy === "upload" && (
+        <span className="absolute inset-0 flex items-center justify-center rounded-full bg-background/70">
+          <Spinner className="size-6" />
+        </span>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label="Edit avatar"
+            className="absolute right-0 bottom-0 flex size-9 items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground shadow-md transition-transform outline-none hover:scale-105 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=open]:scale-105"
+          >
+            <PencilIcon className="size-4" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="center"
+          side="bottom"
+          sideOffset={10}
+          className="w-[19rem] rounded-xl p-3"
+          onOpenAutoFocus={(e) => {
+            // Fokus ke preset terpilih (atau pertama) agar panah langsung jalan.
+            e.preventDefault();
+            const items =
+              gridRef.current?.querySelectorAll<HTMLButtonElement>("[data-avatar-option]");
+            items?.[Math.max(0, selectedIdx)]?.focus();
+          }}
+        >
+          <p className="px-1 pb-2 text-sm font-semibold">Choose an avatar</p>
+          <fieldset
+            ref={gridRef}
+            aria-label="Default avatars"
+            onKeyDown={onGridKey}
+            className="grid grid-cols-4 gap-2 border-0 p-0"
+          >
+            {AVATAR_PRESET_IDS.map((id, i) => {
+              const p = AVATAR_PRESETS[id];
+              const selected = profile.avatarPreset === id;
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  data-avatar-option
+                  aria-pressed={selected}
+                  aria-label={p.label}
+                  title={p.label}
+                  tabIndex={i === Math.max(0, selectedIdx) ? 0 : -1}
+                  disabled={busy !== null}
+                  onClick={() => void pickPreset(id)}
+                  className={cn(
+                    "relative flex aspect-square items-center justify-center rounded-full transition-transform outline-none hover:scale-105 focus-visible:ring-[3px] focus-visible:ring-ring/60 disabled:opacity-60",
+                    p.className,
+                    selected && "ring-2 ring-primary ring-offset-2 ring-offset-popover",
+                  )}
+                >
+                  {busy === id ? (
+                    <Spinner className="size-5" />
+                  ) : (
+                    <p.Icon className="size-[55%]" strokeWidth={1.75} aria-hidden />
+                  )}
+                  {selected && busy !== id && (
+                    <span className="absolute -right-0.5 -bottom-0.5 flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                      <CheckIcon className="size-3" strokeWidth={3} aria-hidden />
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </fieldset>
+
+          <div className="mt-3 flex flex-col gap-1 border-t pt-3">
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full justify-start"
+              disabled={busy !== null}
+              onClick={() => fileRef.current?.click()}
+            >
+              {busy === "upload" ? (
+                <Spinner data-icon="inline-start" />
+              ) : (
+                <ImageUpIcon data-icon="inline-start" />
+              )}
+              Upload photo…
+            </Button>
+            {hasAvatar && (
+              <Button
+                type="button"
+                variant="ghost"
+                className="w-full justify-start text-destructive hover:text-destructive"
+                disabled={busy !== null}
+                onClick={() => void remove()}
+              >
+                {busy === "remove" ? (
+                  <Spinner data-icon="inline-start" />
+                ) : (
+                  <Trash2Icon data-icon="inline-start" />
+                )}
+                Remove avatar
+              </Button>
+            )}
+            <p className="px-3 pt-1 text-[11px] text-muted-foreground">
+              PNG, JPEG, WebP or GIF, up to 2 MB.
+            </p>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        ref={fileRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        className="sr-only"
+        tabIndex={-1}
+        aria-hidden
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          e.target.value = "";
+          if (f) void upload(f);
+        }}
+      />
+    </div>
+  );
+}