kcg-code 0.0.0-stage → 0.1.0

package/src/components/projects/HomeChat.tsx

@@ -0,0 +1,250 @@
+/**
+ * Chat homepage: headline acak + logo, lalu composer. Di bawah kotak input
+ * ada baris polos (tanpa border): pemilih Project di kiri, model di kanan.
+ *
+ * Kirim = buat Session baru di Project terpilih (`POST /api/sessions`),
+ * titipkan teks sebagai prompt tertunda (`lib/pending-prompt.ts`), lalu
+ * pindah ke Session view — `useSessionChat` mengirimnya sekali setelah
+ * koneksi WS ter-attach. Project terakhir dipakai diingat di localStorage.
+ *
+ * Mode agent ada di dalam kotak input, kiri bawah (seperti composer Session).
+ * Pemilih model & agent sama dengan Session (`ModelPicker`, `AgentPicker`) —
+ * tanpa Session, pilihan dikirim di body `POST /api/sessions`.
+ * Keduanya di-reset saat Project berganti karena daftarnya per Project.
+ */
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  FolderIcon,
+  FolderPlusIcon,
+  SendHorizontalIcon,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { AgentPicker } from "@/components/sessions/AgentPicker";
+import { ModelPicker } from "@/components/sessions/ModelPicker";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import { Spinner } from "@/components/ui/spinner";
+import { useRouter } from "@/hooks/useRouter";
+import { ApiError, apiFetch } from "@/lib/api";
+import { notifyDataChanged } from "@/lib/data-events";
+import { pickHeadline } from "@/lib/headlines";
+import { setPendingPrompt } from "@/lib/pending-prompt";
+import type { ProjectOverview } from "@/lib/project-overview";
+import { sessionPath } from "@/lib/routes";
+import { seedSession } from "@/lib/session-handoff";
+import logo from "@/logo.svg";
+import type { Session, SessionModel } from "@/types";
+
+const LAST_PROJECT_KEY = "kcg-home-project";
+
+export interface HomeChatProps {
+  /** Project terurut aktivitas terbaru (`buildProjectOverviews`). */
+  overviews: ProjectOverview[];
+  /** Buka dialog pembuatan Project baru. */
+  onNewProject: () => void;
+}
+
+function readLastProject(): string | null {
+  return typeof localStorage === "undefined" ? null : localStorage.getItem(LAST_PROJECT_KEY);
+}
+
+export function HomeChat({ overviews, onNewProject }: HomeChatProps) {
+  const { navigate } = useRouter();
+  // Dipilih sekali per kunjungan — tidak berganti saat re-render.
+  const [headline] = useState(() => pickHeadline());
+  const [text, setText] = useState("");
+  const [projectId, setProjectId] = useState<string | null>(readLastProject);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  /** Model & agent untuk Session baru; null = default opencode. */
+  const [model, setModel] = useState<SessionModel | null>(null);
+  const [agent, setAgent] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Project tersimpan sudah dihapus / belum ada -> pakai yang paling baru aktif.
+  const selected =
+    overviews.find((o) => o.project.id === projectId)?.project ?? overviews[0]?.project ?? null;
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const choose = (id: string) => {
+    if (id !== selected?.id) {
+      // Model/agent tersedia per Project (config opencode masing-masing).
+      setModel(null);
+      setAgent(null);
+    }
+    setProjectId(id);
+    if (typeof localStorage !== "undefined") localStorage.setItem(LAST_PROJECT_KEY, id);
+    requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const canSend = selected !== null && text.trim() !== "" && !sending;
+
+  const submit = async (event?: React.FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
+    if (!canSend || selected === null) return;
+    setSending(true);
+    setError(null);
+    try {
+      const res = await apiFetch("/api/sessions", {
+        method: "POST",
+        body: JSON.stringify({ agentType: "opencode", projectId: selected.id, model, agent }),
+      });
+      const { session } = (await res.json()) as { session: Session };
+      setPendingPrompt(session.id, text);
+      // Session view dirender langsung dari data ini (tanpa fetch ulang),
+      // lalu composer "berpindah" ke dasar layar lewat View Transition.
+      seedSession(session);
+      notifyDataChanged();
+      navigate(sessionPath(selected.id, session.id), { transition: "to-session" });
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "Failed to start a new session");
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center gap-6 pb-[10dvh]">
+      <div data-vt-name="home-headline" className="flex items-center justify-center gap-3 px-2">
+        <img src={logo} alt="" aria-hidden className="size-10 shrink-0 sm:size-12" />
+        <h1 className="text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
+          {headline}
+        </h1>
+      </div>
+
+      <form onSubmit={submit} className="flex flex-col gap-3">
+        {/* Container luar: hanya border (tanpa latar), membungkus dua section —
+            kotak input berlatar di atas, baris Project/model polos di bawah. */}
+        {/* `data-vt-name`: selama transisi "to-session" kotak ini dan area
+            Session view berbagi nama view-transition -> kotak composer
+            MELUAS menjadi halaman Session (container transform). */}
+        <div data-vt-name="session-surface" className="flex flex-col rounded-2xl border">
+          {/* Section 1 — kotak input: textarea + baris aksi (mode agent kiri,
+            kirim kanan), tata letak sama dengan composer Session. `-m-px`
+            menumpuk border kotak ini di atas border container luar. */}
+          <InputGroup className="-m-px w-auto rounded-2xl bg-card shadow-sm dark:bg-card">
+            <InputGroupTextarea
+              ref={textareaRef}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                // Enter kirim, Shift+Enter baris baru (abaikan saat komposisi IME).
+                if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+                  void submit();
+                }
+              }}
+              placeholder={selected ? `Ask anything in ${selected.name}…` : "Pick a project first"}
+              aria-label="Message"
+              disabled={sending}
+              rows={2}
+              className="max-h-60 min-h-20 px-4 text-base leading-6 md:text-base"
+            />
+            <InputGroupAddon align="block-end" className="gap-2 px-2 pb-2">
+              {selected && (
+                <AgentPicker
+                  projectId={selected.id}
+                  sessionId={null}
+                  agent={agent}
+                  onChanged={setAgent}
+                  disabled={sending}
+                />
+              )}
+              <InputGroupButton
+                type="submit"
+                size="icon-sm"
+                variant="default"
+                className="ml-auto size-9 rounded-full"
+                disabled={!canSend}
+                aria-label="Send"
+              >
+                {sending ? <Spinner /> : <SendHorizontalIcon />}
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+
+          {/* Section 2 — konteks Session baru: Project (kiri) & model (kanan),
+            tanpa latar (hanya border container luar). */}
+          <div className="flex min-w-0 items-center justify-between gap-2 px-1.5 py-1">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-9 min-w-0 max-w-[55%] gap-1.5 px-2 font-normal text-muted-foreground hover:text-foreground"
+                  aria-label={`Project: ${selected?.name ?? "none"}. Change project`}
+                  disabled={sending}
+                >
+                  <FolderIcon data-icon="inline-start" />
+                  <span className="truncate">{selected?.name ?? "Select project"}</span>
+                  <ChevronDownIcon data-icon="inline-end" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="max-h-72 w-64">
+                <DropdownMenuLabel>Project</DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  {overviews.map(({ project }) => (
+                    <DropdownMenuItem key={project.id} onSelect={() => choose(project.id)}>
+                      <FolderIcon />
+                      <span className="flex min-w-0 flex-1 flex-col">
+                        <span className="truncate">{project.name}</span>
+                        <span className="truncate text-xs text-muted-foreground">
+                          {project.path}
+                        </span>
+                      </span>
+                      {project.id === selected?.id && <CheckIcon />}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem onSelect={onNewProject}>
+                    <FolderPlusIcon />
+                    New project
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {selected && (
+              <div className="flex min-w-0 max-w-[45%] justify-end">
+                <ModelPicker
+                  projectId={selected.id}
+                  sessionId={null}
+                  model={model}
+                  onChanged={setModel}
+                  variant="inline"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/components/projects/NewProjectDialog.tsx

@@ -0,0 +1,249 @@
+/**
+ * Dialog multi-step untuk membuat Project baru (Requirement 10.2-10.4).
+ *
+ * Alur: Step 1 pilih direktori kerja via `FolderBrowser`, Step 2 beri nama
+ * project (pre-filled dari nama folder terpilih). Dipisah dari
+ * halaman daftar Project (`ProjectsPage`) agar logic wizard (step, reset
+ * state) tidak bercampur dengan logic daftar Project.
+ */
+
+import { ArrowLeftIcon, ArrowRightIcon, FolderIcon, FolderPlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { FolderBrowser } from "@/components/projects/FolderBrowser";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import { useRouter } from "@/hooks/useRouter";
+import { ApiError, apiFetch } from "@/lib/api";
+import { settingsPath } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+import type { WorkspaceInfo } from "@/server/services/workspace";
+
+export interface NewProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Dipanggil setelah Project berhasil dibuat, untuk memuat ulang daftar. */
+  onCreated: () => void | Promise<void>;
+}
+
+type Step = 1 | 2;
+
+/** Nama folder terakhir dari path relatif ("" bila root Sandbox). */
+function basename(path: string): string {
+  const segments = path.split("/").filter((s) => s.length > 0);
+  return segments.at(-1) ?? "";
+}
+
+export function NewProjectDialog({ open, onOpenChange, onCreated }: NewProjectDialogProps) {
+  const [step, setStep] = useState<Step>(1);
+  const [path, setPath] = useState("");
+  const [name, setName] = useState("");
+  const [nameTouched, setNameTouched] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  /** Workspace (Sandbox_Root) aktif — ditampilkan di langkah 1. */
+  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
+  const { navigate } = useRouter();
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    void apiFetch("/api/workspace")
+      .then((r) => r.json())
+      .then((b: { workspace: WorkspaceInfo }) => {
+        if (!cancelled) setWorkspace(b.workspace);
+      })
+      .catch(() => {
+        // Info tambahan saja; dialog tetap bisa dipakai.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const reset = () => {
+    setStep(1);
+    setPath("");
+    setName("");
+    setNameTouched(false);
+    setFormError(null);
+    setCreating(false);
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) reset();
+    onOpenChange(next);
+  };
+
+  const goToNaming = () => {
+    setFormError(null);
+    if (!nameTouched) setName(basename(path));
+    setStep(2);
+  };
+
+  const backToFolder = () => {
+    setFormError(null);
+    setStep(1);
+  };
+
+  const create = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setCreating(true);
+    setFormError(null);
+    try {
+      await apiFetch("/api/projects", { method: "POST", body: JSON.stringify({ name, path }) });
+      await onCreated();
+      handleOpenChange(false);
+      toast.success(`Project "${name.trim()}" created.`);
+    } catch (e) {
+      setFormError(e instanceof ApiError ? e.message : "Failed to create project");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="flex h-[560px] max-h-[85vh] flex-col sm:max-w-lg">
+        <DialogHeader>
+          <div className="mt-4 flex flex-col gap-1.5">
+            <div className="flex items-center gap-1.5">
+              <span
+                className={cn(
+                  "h-1.5 flex-1 rounded-full transition-colors",
+                  step >= 1 ? "bg-primary" : "bg-muted",
+                )}
+              />
+              <span
+                className={cn(
+                  "h-1.5 flex-1 rounded-full transition-colors",
+                  step >= 2 ? "bg-primary" : "bg-muted",
+                )}
+              />
+            </div>
+            <span className="text-xs font-medium text-muted-foreground">Step {step} of 2</span>
+          </div>
+          <DialogTitle>{step === 1 ? "Choose working directory" : "Name your project"}</DialogTitle>
+          <DialogDescription>
+            {step === 1
+              ? "Browse the Sandbox and pick the folder to use as the working directory."
+              : "This name identifies the project in the list."}
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === 1 ? (
+          <>
+            <div className="min-h-0 flex-1">
+              <FolderBrowser path={path} onNavigate={setPath} />
+            </div>
+            {workspace && (
+              <p className="flex min-w-0 items-center gap-1.5 text-[12px] text-muted-foreground">
+                <span className="shrink-0">Projects live in</span>
+                <code className="min-w-0 truncate font-mono" title={workspace.root}>
+                  {workspace.display}
+                </code>
+                <span aria-hidden>·</span>
+                <a
+                  href={settingsPath("workspace")}
+                  onClick={(e) => {
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+                    e.preventDefault();
+                    handleOpenChange(false);
+                    navigate(settingsPath("workspace"));
+                  }}
+                  className="shrink-0 font-medium text-foreground underline underline-offset-2"
+                >
+                  Change
+                </a>
+              </p>
+            )}
+            <DialogFooter>
+              <Button type="button" onClick={goToNaming}>
+                Next
+                <ArrowRightIcon data-icon="inline-end" />
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <form onSubmit={create} className="flex min-h-0 flex-1 flex-col gap-4">
+            <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto">
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="project-name">Project name</FieldLabel>
+                  <Input
+                    id="project-name"
+                    value={name}
+                    onChange={(e) => {
+                      setName(e.target.value);
+                      setNameTouched(true);
+                    }}
+                    placeholder="e.g. web-app"
+                    maxLength={120}
+                    autoFocus
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel>Working directory</FieldLabel>
+                  <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
+                    <FolderIcon className="size-4 shrink-0 text-muted-foreground" />
+                    <span className="min-w-0 flex-1 truncate font-mono text-muted-foreground">
+                      {path === "" ? "/" : path}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 shrink-0 px-2"
+                      onClick={backToFolder}
+                      disabled={creating}
+                    >
+                      Change
+                    </Button>
+                  </div>
+                </Field>
+              </FieldGroup>
+
+              {formError && (
+                <Alert variant="destructive">
+                  <AlertTitle>Failed to create project</AlertTitle>
+                  <AlertDescription>{formError}</AlertDescription>
+                </Alert>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={backToFolder} disabled={creating}>
+                <ArrowLeftIcon data-icon="inline-start" />
+                Back
+              </Button>
+              <Button type="submit" disabled={creating || name.trim() === ""}>
+                {creating ? (
+                  <>
+                    <Spinner data-icon="inline-start" />
+                    Creating…
+                  </>
+                ) : (
+                  <>
+                    <FolderPlusIcon data-icon="inline-start" />
+                    Create project
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/projects/PanelSection.tsx

@@ -0,0 +1,102 @@
+/**
+ * Satu seksi di panel samping halaman Project (Instructions / MCP / Skills).
+ *
+ * Tiap seksi = satu kartu (gaya boxed list seperti Settings): header di dalam
+ * kartu (ikon, judul, ringkasan, aksi, chevron) dan isi di bawah garis
+ * pemisah. Status buka/tutup diingat per seksi di `localStorage`.
+ *
+ * Isi kartu tidak diberi padding otomatis: `PanelList` (baris berdivider),
+ * `PanelHint`, dan `PanelBody` mengatur jaraknya sendiri agar baris daftar
+ * bisa rata tepi ke tepi.
+ */
+import { ChevronDownIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+const STORAGE_PREFIX = "kcg.projectPanel.";
+
+/** Buka/tutup seksi yang diingat di localStorage (default terbuka). */
+function usePersistedOpen(id: string): [boolean, (open: boolean) => void] {
+  const [open, setOpen] = useState(() => {
+    try {
+      return localStorage.getItem(STORAGE_PREFIX + id) !== "0";
+    } catch {
+      return true;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_PREFIX + id, open ? "1" : "0");
+    } catch {
+      // Storage tidak tersedia (mode privat) — cukup state di memori.
+    }
+  }, [id, open]);
+  return [open, setOpen];
+}
+
+export interface PanelSectionProps {
+  /** Id stabil untuk mengingat status lipat (mis. "mcp"). */
+  id: string;
+  title: string;
+  /** Ikon seksi di kiri judul. */
+  icon: ReactNode;
+  /** Hitungan / ringkasan kecil di bawah judul. */
+  meta?: ReactNode;
+  /** Tombol aksi kecil di kanan header (tidak ikut melipat). */
+  action?: ReactNode;
+  children: ReactNode;
+}
+
+export function PanelSection({ id, title, icon, meta, action, children }: PanelSectionProps) {
+  const [open, setOpen] = usePersistedOpen(id);
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} asChild>
+      <section
+        aria-label={title}
+        className="overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs"
+      >
+        <div className="flex items-center gap-1 pr-2">
+          <CollapsibleTrigger className="group flex min-h-14 min-w-0 flex-1 items-center gap-3 py-2.5 pl-3.5 text-left outline-none transition-colors hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset">
+            <span
+              className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-4"
+              aria-hidden
+            >
+              {icon}
+            </span>
+            <span className="flex min-w-0 flex-1 flex-col">
+              <span className="text-sm font-semibold leading-5 tracking-tight">{title}</span>
+              {meta !== undefined && (
+                <span className="truncate text-xs tabular-nums text-muted-foreground">{meta}</span>
+              )}
+            </span>
+            <ChevronDownIcon
+              className="mr-1.5 size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180"
+              aria-hidden
+            />
+          </CollapsibleTrigger>
+          {action && <div className="flex shrink-0 items-center">{action}</div>}
+        </div>
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+          <div className="border-t">{children}</div>
+        </CollapsibleContent>
+      </section>
+    </Collapsible>
+  );
+}
+
+/** Isi kartu dengan padding standar (form, pencarian, teks). */
+export function PanelBody({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={cn("px-3.5 py-3", className)}>{children}</div>;
+}
+
+/** Baris-baris berdivider, rata tepi ke tepi di dalam kartu. */
+export function PanelList({ className, children }: { className?: string; children: ReactNode }) {
+  return <ul className={cn("flex flex-col divide-y", className)}>{children}</ul>;
+}
+
+/** Keterangan saat daftar kosong — satu gaya untuk semua seksi. */
+export function PanelHint({ children }: { children: ReactNode }) {
+  return <p className="px-3.5 py-3.5 text-xs leading-relaxed text-muted-foreground">{children}</p>;
+}