kcg-code 0.0.0-stage → 0.1.0

package/src/components/settings/AboutGroup.tsx

@@ -0,0 +1,170 @@
+/**
+ * Settings -> About: logo + versi KCG Code, lalu kredit tim.
+ *
+ * Versi dari `GET /api/meta` — `"dev"` saat dijalankan lewat `bun dev`.
+ * Tiap anggota tim adalah baris tautan ke profil GitHub-nya (tab baru).
+ */
+import type * as React from "react";
+import { useEffect, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { apiFetch } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import type { AppInfo } from "@/server/services/app-info";
+import logo from "../../logo.svg";
+
+export interface TeamMember {
+  /** Username GitHub (tanpa `@`). */
+  username: string;
+  role: string;
+}
+
+export const TEAM: readonly TeamMember[] = [
+  { username: "irsyadulibad", role: "Lead Developer" },
+  { username: "sahrullahh", role: "Product Advisor" },
+];
+
+export function githubUrl(username: string): string {
+  return `https://github.com/${encodeURIComponent(username)}`;
+}
+
+/** Teks versi untuk ditampilkan: `"dev"` apa adanya, semver diberi `v`. */
+export function formatVersion(version: string): string {
+  return version === "dev" ? "dev" : `v${version}`;
+}
+
+export function AboutGroup() {
+  const [version, setVersion] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await apiFetch("/api/meta");
+        const info = (await res.json()) as AppInfo;
+        if (!cancelled) setVersion(info.version);
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return <AboutView version={version} failed={failed} />;
+}
+
+/** Tampilan murni (tanpa fetch) — dipakai komponen di atas & diuji SSR. */
+export function AboutView({ version, failed }: { version: string | null; failed: boolean }) {
+  return (
+    <>
+      {/* Hero: kartu netral dengan SATU cahaya lembut dari atas (warna logo,
+          opasitas rendah) + garis highlight tipis di tepi atas. Sengaja
+          tanpa pola titik, blob blur, teks gradien, atau animasi — aksen
+          cukup satu, sisanya tipografi & ruang kosong. */}
+      <section
+        aria-labelledby="about-title"
+        className="relative isolate overflow-hidden rounded-3xl border bg-card px-6 pt-12 pb-9 text-center shadow-xs"
+      >
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(70%_55%_at_50%_0%,rgba(109,92,251,0.09),transparent_70%)] dark:bg-[radial-gradient(70%_55%_at_50%_0%,rgba(109,92,251,0.16),transparent_70%)]"
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-12 top-0 h-px bg-gradient-to-r from-transparent via-[#6D5CFB]/45 to-transparent"
+        />
+
+        <div className="flex flex-col items-center">
+          <span className="flex size-24 items-center justify-center rounded-[1.75rem] border bg-background p-5 shadow-sm sm:size-28">
+            <img src={logo} alt="KCG Code logo" className="size-full" />
+          </span>
+
+          <h2 id="about-title" className="mt-6 text-2xl font-semibold tracking-tight sm:text-3xl">
+            KCG Code
+          </h2>
+          <p className="mt-1.5 max-w-xs text-[14px] leading-snug text-pretty text-muted-foreground">
+            Your AI coding agent, in your pocket.
+          </p>
+
+          <div className="mt-5">
+            {version !== null ? (
+              <span
+                className="inline-flex items-center gap-1.5 rounded-full border bg-background px-3 py-1 font-mono text-[12.5px] text-muted-foreground"
+                title={version === "dev" ? "Running from source (bun dev)" : undefined}
+              >
+                <span
+                  aria-hidden
+                  className={cn(
+                    "size-1.5 rounded-full",
+                    version === "dev" ? "bg-amber-500" : "bg-emerald-500",
+                  )}
+                />
+                <span className="text-foreground/80">{formatVersion(version)}</span>
+              </span>
+            ) : failed ? (
+              <span className="text-[13px] text-muted-foreground">Version unavailable</span>
+            ) : (
+              <Skeleton className="h-7 w-20 rounded-full" aria-label="Loading version" />
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Credits: kartu profil per anggota (bukan baris preferensi). */}
+      <section aria-labelledby="about-credits" className="flex flex-col gap-3">
+        <div className="flex flex-col gap-0.5 px-1">
+          <h2 id="about-credits" className="text-[15px] font-semibold tracking-tight">
+            Credits
+          </h2>
+          <p className="text-[13px] text-muted-foreground">The people building KCG Code.</p>
+        </div>
+        <ul className="grid gap-3 sm:grid-cols-2">
+          {TEAM.map((m) => (
+            <li key={m.username}>
+              <a
+                href={githubUrl(m.username)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex h-full items-center gap-3.5 rounded-2xl border bg-card p-4 shadow-xs transition-colors outline-none hover:border-foreground/20 hover:bg-muted/40 focus-visible:ring-[3px] focus-visible:ring-ring/50 active:bg-muted/70"
+              >
+                <img
+                  src={`${githubUrl(m.username)}.png?size=112`}
+                  alt=""
+                  width={44}
+                  height={44}
+                  loading="lazy"
+                  className="size-11 shrink-0 rounded-full bg-muted ring-1 ring-border"
+                />
+                <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <span className="truncate text-[15px] leading-5 font-medium">@{m.username}</span>
+                  <span className="text-[13px] leading-snug text-muted-foreground">{m.role}</span>
+                </span>
+                <GithubIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
+                <span className="sr-only">(opens GitHub in a new tab)</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <p className="pb-2 text-center text-[12px] text-muted-foreground">
+        Built with Bun &amp; OpenCode.
+      </p>
+    </>
+  );
+}
+
+/**
+ * Mark GitHub (lucide versi ini tidak lagi menyertakan ikon brand).
+ * Path resmi dari GitHub Octicons `mark-github`.
+ */
+function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    // Selalu dekoratif: label tautan sudah ada di teks baris.
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+    </svg>
+  );
+}

package/src/components/settings/AccountGroup.tsx

@@ -0,0 +1,122 @@
+/**
+ * Settings -> Profile: akun KCG Code yang tersambung ke mesin ini (akun yang
+ * dipakai Remote access). Data dari `GET /api/tunnel` — hanya email,
+ * username, dan alamat; token & secret tidak pernah dikirim ke browser.
+ */
+import { GlobeIcon, UserRoundIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ActionRow, PrefsGroup, RowBadge } from "@/components/settings/prefs";
+import { Spinner } from "@/components/ui/spinner";
+import { useRouter } from "@/hooks/useRouter";
+import { apiFetch } from "@/lib/api";
+import { settingsPath } from "@/lib/routes";
+import type { TunnelStatus } from "@/server/services/tunnel";
+
+type AccountState =
+  | { phase: "loading" }
+  | { phase: "error" }
+  | { phase: "ready"; configured: boolean; account: TunnelStatus["account"] };
+
+export function AccountGroup() {
+  const { navigate } = useRouter();
+  const [state, setState] = useState<AccountState>({ phase: "loading" });
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await apiFetch("/api/tunnel");
+        const { tunnel } = (await res.json()) as { tunnel: TunnelStatus };
+        if (!cancelled) {
+          setState({ phase: "ready", configured: tunnel.configured, account: tunnel.account });
+        }
+      } catch {
+        if (!cancelled) setState({ phase: "error" });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const title = "Account";
+
+  if (state.phase === "loading") {
+    return (
+      <PrefsGroup title={title}>
+        <li className="flex min-h-16 items-center justify-center" role="status">
+          <Spinner className="size-5 text-muted-foreground" />
+          <span className="sr-only">Loading account…</span>
+        </li>
+      </PrefsGroup>
+    );
+  }
+
+  if (state.phase === "error") {
+    return (
+      <PrefsGroup title={title}>
+        <ActionRow title="Couldn't load account" subtitle="Reload the page to try again." />
+      </PrefsGroup>
+    );
+  }
+
+  const { account, configured } = state;
+  const goRemote = () => navigate(settingsPath("remote"));
+
+  if (!account) {
+    return (
+      <PrefsGroup title={title}>
+        <ActionRow
+          prefix={<AccountIcon />}
+          title="No account linked"
+          subtitle={
+            configured
+              ? "Sign in with Google in Remote access to use KCG Code from anywhere"
+              : "Remote access isn't available in this version"
+          }
+          onActivate={configured ? goRemote : undefined}
+        />
+      </PrefsGroup>
+    );
+  }
+
+  return (
+    <PrefsGroup title={title}>
+      {/* Email jadi baris utama (yang dikenali pengguna); username sekunder. */}
+      <li className="flex items-center gap-3 px-4 py-3">
+        <AccountIcon />
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="truncate text-[15px] leading-5" title={account.email}>
+            {account.email}
+          </span>
+          <span className="truncate text-[13px] text-muted-foreground">
+            Signed in with Google · @{account.username}
+          </span>
+        </div>
+        <RowBadge tone="success">Linked</RowBadge>
+      </li>
+      <ActionRow
+        prefix={
+          <span className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+            <GlobeIcon className="size-5" aria-hidden />
+          </span>
+        }
+        title="Remote access"
+        subtitle={
+          <span className="block truncate" title={account.url}>
+            {account.url.replace(/^https?:\/\//, "")}
+          </span>
+        }
+        onActivate={goRemote}
+      />
+    </PrefsGroup>
+  );
+}
+
+function AccountIcon() {
+  return (
+    <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+      <UserRoundIcon className="size-5" aria-hidden />
+    </span>
+  );
+}

package/src/components/settings/DevicesGroup.tsx

@@ -0,0 +1,151 @@
+/**
+ * Settings -> Security -> Signed-in devices (`/settings/security#devices`,
+ * URL lama `/settings/devices` dialihkan ke sini): sesi login per perangkat,
+ * bisa di-sign-out satu per satu atau sekaligus.
+ */
+import { LaptopIcon, SmartphoneIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { ActionRow, PrefsGroup, RowBadge } from "@/components/settings/prefs";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import type { DeviceInfo } from "@/server/services/auth";
+
+function errorText(e: unknown, fallback: string): string {
+  return e instanceof ApiError ? e.message : fallback;
+}
+
+/** Ringkasan user agent -> "Chrome on Android". */
+export function describeDevice(ua: string | null): { label: string; mobile: boolean } {
+  if (!ua) return { label: "Unknown device", mobile: false };
+  const mobile = /Android|iPhone|iPad|Mobile/i.test(ua);
+  const browser = /Edg\//.test(ua)
+    ? "Edge"
+    : /OPR\/|Opera/.test(ua)
+      ? "Opera"
+      : /Firefox\//.test(ua)
+        ? "Firefox"
+        : /Chrome\//.test(ua)
+          ? "Chrome"
+          : /Safari\//.test(ua)
+            ? "Safari"
+            : "Browser";
+  const os = /Android/.test(ua)
+    ? "Android"
+    : /iPhone|iPad|iOS/.test(ua)
+      ? "iOS"
+      : /Mac OS X|Macintosh/.test(ua)
+        ? "macOS"
+        : /Windows/.test(ua)
+          ? "Windows"
+          : /Linux/.test(ua)
+            ? "Linux"
+            : "";
+  return { label: os ? `${browser} on ${os}` : browser, mobile };
+}
+
+function relativeTime(ts: number): string {
+  const s = Math.round((Date.now() - ts) / 1000);
+  if (s < 60) return "Active now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `Active ${m} min ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `Active ${h} h ago`;
+  return `Active ${Math.round(h / 24)} d ago`;
+}
+
+export function DevicesGroup({ onError }: { onError: (t: string) => void }) {
+  const [devices, setDevices] = useState<DeviceInfo[] | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const res = await apiFetch("/api/auth/devices");
+      setDevices(((await res.json()) as { devices: DeviceInfo[] }).devices);
+    } catch (err) {
+      onError(errorText(err, "Couldn't load devices."));
+    }
+  }, [onError]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const revoke = async (path: string, init: RequestInit) => {
+    setBusy(true);
+    try {
+      await apiFetch(path, init);
+      await load();
+    } catch (err) {
+      onError(errorText(err, "Couldn't sign out the device."));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const others = devices?.filter((d) => !d.current) ?? [];
+
+  return (
+    <PrefsGroup
+      id="devices"
+      title="Signed-in devices"
+      description="Devices that have unlocked KCG Code."
+      suffix={
+        others.length > 0 ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={busy}
+            onClick={() => void revoke("/api/auth/devices/revoke-others", { method: "POST" })}
+          >
+            Sign out others
+          </Button>
+        ) : undefined
+      }
+    >
+      {devices === null ? (
+        <li className="flex min-h-14 items-center justify-center" role="status">
+          <Spinner className="size-5 text-muted-foreground" />
+        </li>
+      ) : (
+        devices.map((d) => {
+          const info = describeDevice(d.userAgent);
+          const Icon = info.mobile ? SmartphoneIcon : LaptopIcon;
+          return (
+            <ActionRow
+              key={d.id}
+              prefix={
+                <span className="flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                  <Icon className="size-[18px]" aria-hidden />
+                </span>
+              }
+              title={info.label}
+              subtitle={relativeTime(d.lastSeenAt)}
+              suffix={
+                d.current ? (
+                  <RowBadge>This device</RowBadge>
+                ) : (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={busy}
+                    onClick={() =>
+                      void revoke(`/api/auth/devices/${encodeURIComponent(d.id)}`, {
+                        method: "DELETE",
+                      })
+                    }
+                    aria-label={`Sign out ${info.label}`}
+                  >
+                    Sign out
+                  </Button>
+                )
+              }
+            />
+          );
+        })
+      )}
+    </PrefsGroup>
+  );
+}