kcg-code 0.0.0-stage → 0.2.0

package/src/components/layout/SidebarAccount.tsx

@@ -0,0 +1,111 @@
+/**
+ * Footer sidebar: profil pemilik (avatar + nickname) dengan tombol Settings
+ * dan Lock. Bila kunci belum diatur, tombol Lock diganti peringatan
+ * "Not protected" yang membuka `/settings/security`.
+ */
+import { LockIcon, SettingsIcon, ShieldAlertIcon } from "lucide-react";
+import { ProfileAvatar } from "@/components/auth/ProfileAvatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { lockNow, useAuth } from "@/lib/auth";
+import { settingsPath } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+export interface SidebarAccountProps {
+  /** Halaman Settings sedang terbuka. */
+  active: boolean;
+  onNavigate: (path: string) => void;
+}
+
+export function SidebarAccount({ active, onNavigate }: SidebarAccountProps) {
+  const auth = useAuth();
+  const status = auth.phase === "ready" ? auth.status : null;
+  const nickname = status?.profile.nickname ?? null;
+  const avatarUrl = status?.profile.avatarUrl ?? null;
+  const avatarPreset = status?.profile.avatarPreset ?? null;
+  const protectedApp = status?.protected ?? false;
+
+  const iconBtn =
+    "flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring";
+
+  return (
+    <div className="flex flex-col gap-1">
+      {status && !protectedApp && (
+        <button
+          type="button"
+          onClick={() => onNavigate(settingsPath("security"))}
+          className="flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-2 text-left text-xs text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-300"
+        >
+          <ShieldAlertIcon className="size-4 shrink-0" aria-hidden />
+          <span className="min-w-0">
+            <span className="block font-medium">Not protected</span>
+            <span className="block text-amber-800/80 dark:text-amber-300/80">
+              Set a lock before exposing this app.
+            </span>
+          </span>
+        </button>
+      )}
+
+      <div className="flex min-w-0 items-center gap-1">
+        <a
+          href={settingsPath()}
+          onClick={(e) => {
+            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+            e.preventDefault();
+            onNavigate(settingsPath());
+          }}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex min-w-0 flex-1 items-center gap-2.5 rounded-md p-1.5 text-left transition-colors outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+            active && "bg-sidebar-accent",
+          )}
+        >
+          <ProfileAvatar
+            nickname={nickname}
+            avatarUrl={avatarUrl}
+            avatarPreset={avatarPreset}
+            className="size-8"
+            textClassName="text-xs"
+          />
+          <span className="flex min-w-0 flex-col leading-tight">
+            <span className="truncate text-sm font-medium">{nickname ?? "Set up profile"}</span>
+            <span className="truncate text-xs text-muted-foreground">
+              {protectedApp
+                ? `Locked with ${status?.lockKind === "pin" ? "PIN" : "password"}`
+                : "Settings"}
+            </span>
+          </span>
+        </a>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => onNavigate(settingsPath())}
+              aria-label="Settings"
+              className={cn(iconBtn, active && "text-sidebar-accent-foreground")}
+            >
+              <SettingsIcon className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">Settings</TooltipContent>
+        </Tooltip>
+
+        {protectedApp && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={() => void lockNow()}
+                aria-label="Lock now"
+                className={iconBtn}
+              >
+                <LockIcon className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Lock now</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/SidebarSessionMenu.tsx

@@ -0,0 +1,163 @@
+/**
+ * Menu "..." per baris Session di sidebar — KHUSUS desktop.
+ *
+ * - Titik tiga vertikal di celah kosong kanan baris (di luar area hover
+ *   baris). Muncul saat baris di-hover / difokus keyboard (`group-hover`),
+ *   tetap terlihat selama menu terbuka.
+ * - Aksi sesuai status: running -> Stop & Restart; stopped/crashed -> Start.
+ *   Delete selalu ada (dengan dialog konfirmasi).
+ * - Setelah aksi, sidebar & daftar lain terbarui otomatis lewat broadcast
+ *   server (`session_status`, `session_deleted`, `data_changed`) — di sini
+ *   tidak perlu memuat ulang manual.
+ */
+import { MoreVerticalIcon, PlayIcon, RotateCcwIcon, SquareIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { ConfirmSessionDeleteDialog } from "@/components/sessions/ConfirmSessionDeleteDialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { notifyDataChanged } from "@/lib/data-events";
+import { cn } from "@/lib/utils";
+import type { Session } from "@/types";
+
+type Busy = "stop" | "start" | "restart" | null;
+
+function errorText(e: unknown, fallback: string): string {
+  return e instanceof ApiError ? e.message : fallback;
+}
+
+export interface SidebarSessionMenuProps {
+  session: Session;
+  /** Judul tampilan (untuk label aksesibel). */
+  title: string;
+  /** Dipanggil setelah Session berhasil dihapus. */
+  onDeleted?: () => void;
+}
+
+export function SidebarSessionMenu({ session, title, onDeleted }: SidebarSessionMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState<Busy>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const running = session.status === "running";
+
+  const stop = () => apiFetch(`/api/sessions/${session.id}/stop`, { method: "POST" });
+  const start = () => apiFetch(`/api/sessions/${session.id}`, { method: "POST" });
+
+  const run = async (kind: Exclude<Busy, null>) => {
+    setBusy(kind);
+    try {
+      if (kind === "stop") {
+        await stop();
+        toast.success("Session stopped.");
+      } else if (kind === "start") {
+        await start();
+        toast.success("Session started.");
+      } else {
+        await stop();
+        await start();
+        toast.success("Session restarted.");
+      }
+      notifyDataChanged();
+    } catch (e) {
+      toast.error(
+        errorText(
+          e,
+          kind === "stop"
+            ? "Couldn't stop the session."
+            : kind === "start"
+              ? "Couldn't start the session."
+              : "Couldn't restart the session.",
+        ),
+      );
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const remove = async () => {
+    setDeleting(true);
+    try {
+      await apiFetch(`/api/sessions/${session.id}`, { method: "DELETE" });
+      setConfirmDelete(false);
+      toast.success("Session deleted.");
+      notifyDataChanged();
+      onDeleted?.();
+    } catch (e) {
+      toast.error(errorText(e, "Couldn't delete the session."));
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={`Session actions: ${title}`}
+            disabled={busy !== null}
+            className={cn(
+              // Diselipkan di celah kosong KANAN baris (margin kanan
+              // `SidebarMenuSub` = 24px), bukan menimpa judul: lebar 24px
+              // menempel tepat di tepi baris agar hover tidak "putus" saat
+              // kursor bergeser dari baris ke tombol.
+              "absolute top-1/2 -right-6 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-sidebar-foreground/60 outline-hidden transition-opacity",
+              "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+              // Tersembunyi sampai baris di-hover / difokus; tetap terlihat
+              // selama menu terbuka atau aksi berjalan.
+              "opacity-0 group-focus-within/menu-sub-item:opacity-100 group-hover/menu-sub-item:opacity-100 data-[state=open]:opacity-100",
+              busy !== null && "opacity-100",
+              "[&>svg]:size-4",
+            )}
+          >
+            {busy !== null ? <Spinner className="size-3.5" /> : <MoreVerticalIcon />}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="right" align="start" className="min-w-40">
+          {running ? (
+            <>
+              <DropdownMenuItem onSelect={() => void run("stop")}>
+                <SquareIcon />
+                Stop
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => void run("restart")}>
+                <RotateCcwIcon />
+                Restart
+              </DropdownMenuItem>
+            </>
+          ) : (
+            <DropdownMenuItem onSelect={() => void run("start")}>
+              <PlayIcon />
+              {session.status === "crashed" ? "Restart" : "Start"}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            // Tunda buka dialog sampai menu selesai menutup (fokus aman).
+            onSelect={() => setConfirmDelete(true)}
+          >
+            <Trash2Icon />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ConfirmSessionDeleteDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        deleting={deleting}
+        onConfirm={() => void remove()}
+      />
+    </>
+  );
+}

package/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,67 @@
+/**
+ * Pemilih tema (Requirement 8.2) di footer sidebar: label "Theme" di kiri,
+ * tiga tombol ikon di kanan — Light, Dark, System (ikuti perangkat) — dalam
+ * satu segmented control ringkas. Pilihan disimpan `useTheme` di
+ * `localStorage["kcg-theme"]` dan diterapkan ke `<html>` (Requirement 8.6).
+ *
+ * Aksesibilitas: grup radio native (`<input type="radio">` tersembunyi di
+ * dalam label), jadi Tab masuk ke pilihan aktif dan panah berpindah opsi.
+ * Tombol hanya ikon, jadi nama tiap opsi diberikan lewat teks `sr-only` dan
+ * tooltip (`title`).
+ */
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useId } from "react";
+import { type ThemePreference, useTheme } from "@/hooks/useTheme";
+import { cn } from "@/lib/utils";
+
+const OPTIONS: { value: ThemePreference; label: string; Icon: typeof SunIcon }[] = [
+  { value: "light", label: "Light", Icon: SunIcon },
+  { value: "dark", label: "Dark", Icon: MoonIcon },
+  { value: "system", label: "System", Icon: MonitorIcon },
+];
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const { preference, setPreference } = useTheme();
+  const name = useId();
+  const labelId = useId();
+
+  return (
+    <div className={cn("flex items-center justify-between gap-3 px-2", className)}>
+      <span id={labelId} className="text-sm text-sidebar-foreground/80">
+        Theme
+      </span>
+      <fieldset
+        aria-labelledby={labelId}
+        className="flex shrink-0 items-center gap-0.5 rounded-lg border border-sidebar-border bg-sidebar-accent/60 p-0.5"
+      >
+        {OPTIONS.map(({ value, label, Icon }) => {
+          const active = preference === value;
+          return (
+            <label
+              key={value}
+              title={value === "system" ? "System (match device)" : label}
+              className={cn(
+                "flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors select-none",
+                "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-sidebar-ring",
+                active
+                  ? "bg-sidebar text-sidebar-foreground shadow-sm"
+                  : "text-sidebar-foreground/55 hover:text-sidebar-foreground",
+              )}
+            >
+              <input
+                type="radio"
+                name={name}
+                value={value}
+                checked={active}
+                onChange={() => setPreference(value)}
+                className="sr-only"
+              />
+              <Icon className="size-4 shrink-0" aria-hidden />
+              <span className="sr-only">{label}</span>
+            </label>
+          );
+        })}
+      </fieldset>
+    </div>
+  );
+}

package/src/components/projects/FolderBrowser.tsx

@@ -0,0 +1,142 @@
+/**
+ * Folder_Browser (Requirement 10.2, 10.3).
+ *
+ * Menjelajah direktori di dalam Sandbox_Root via `GET /api/fs?path=...`:
+ * breadcrumb path saat ini dan daftar sub-direktori. Fully controlled —
+ * direktori yang sedang dijelajahi (`path`) adalah direktori yang otomatis
+ * aktif/terpilih (Requirement 10.4); tidak ada tombol "Pilih" terpisah.
+ */
+
+import { ChevronRightIcon, FolderIcon, Undo2Icon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+export interface FolderBrowserProps {
+  /** Path relatif yang sedang aktif/dijelajahi ("" = Sandbox_Root). */
+  path: string;
+  /** Dipanggil setiap kali pengguna berpindah direktori. */
+  onNavigate: (path: string) => void;
+}
+
+function joinDir(base: string, name: string): string {
+  return base === "" ? name : `${base}/${name}`;
+}
+
+export function FolderBrowser({ path, onNavigate }: FolderBrowserProps) {
+  const [entries, setEntries] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (p: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await apiFetch(`/api/fs?path=${encodeURIComponent(p)}`);
+      const body = (await res.json()) as { entries: string[] };
+      setEntries(body.entries);
+    } catch (e) {
+      setEntries([]);
+      setError(e instanceof ApiError ? e.message : "Failed to load directory");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load(path);
+  }, [path, load]);
+
+  const segments = path === "" ? [] : path.split("/");
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-2">
+      {/* Breadcrumb */}
+      <div className="flex shrink-0 flex-wrap items-center gap-1 text-sm">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className={cn("h-7 px-2 font-medium", path === "" && "text-foreground")}
+          onClick={() => onNavigate("")}
+        >
+          Sandbox
+        </Button>
+        {segments.map((seg, i) => {
+          const target = segments.slice(0, i + 1).join("/");
+          return (
+            <span key={target} className="flex items-center gap-1">
+              <ChevronRightIcon
+                className="size-3.5 text-muted-foreground"
+                data-icon="inline-start"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-7 px-2 font-medium",
+                  i === segments.length - 1 && "text-foreground",
+                )}
+                onClick={() => onNavigate(target)}
+              >
+                {seg}
+              </Button>
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Daftar sub-direktori */}
+      <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border bg-card p-2">
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
+            <Spinner className="size-4" />
+            Loading directories…
+          </div>
+        ) : error ? (
+          <p className="px-2 py-4 text-sm text-destructive">{error}</p>
+        ) : entries.length === 0 ? (
+          <p className="px-2 py-4 text-sm text-muted-foreground">No subdirectories.</p>
+        ) : (
+          <div className="flex flex-col gap-1">
+            {path !== "" && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-8 justify-start gap-2 px-2 text-muted-foreground"
+                onClick={() => onNavigate(segments.slice(0, -1).join("/"))}
+              >
+                <Undo2Icon data-icon="inline-start" />
+                Back
+              </Button>
+            )}
+            {entries.map((name) => (
+              <Button
+                key={name}
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-8 justify-start gap-2 px-2"
+                onClick={() => onNavigate(joinDir(path, name))}
+              >
+                <FolderIcon data-icon="inline-start" />
+                <span className="truncate">{name}</span>
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Path aktif saat ini — selalu nempel di bawah, tidak ikut naik saat
+          daftar sub-direktori pendek. */}
+      <div className="flex min-w-0 shrink-0 items-center gap-1.5 text-sm">
+        <span className="shrink-0 text-muted-foreground">Current directory:</span>
+        <span className="min-w-0 flex-1 truncate font-mono">{path === "" ? "/" : path}</span>
+      </div>
+    </div>
+  );
+}