kcg-code 0.0.0-stage → 0.2.0

package/src/components/projects/HomeChat.tsx

@@ -0,0 +1,287 @@
+/**
+ * Chat homepage: headline acak + logo, lalu composer. Di bawah kotak input
+ * ada baris polos (tanpa border): pemilih Project di kiri, agent + model di
+ * kanan (satu trigger `ModelPicker` — model bergantung pada agent).
+ *
+ * Tata letak: semuanya di tengah layar. Desktop menampilkan daftar Session
+ * terbaru (`HomeRecentSessions`) di bawah composer; di HP daftar itu
+ * disembunyikan dan logo ditumpuk di atas headline.
+ *
+ * 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 { HomeRecentSessions } from "@/components/projects/HomeRecentSessions";
+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 { readPreferredAgentType, storePreferredAgentType } from "@/lib/agent-types";
+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 { AgentType, 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);
+  /** Backend Session baru (OpenCode / Claude Code), diingat per perangkat. */
+  const [agentType, setAgentType] = useState<AgentType>(readPreferredAgentType);
+  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 selectedOverview =
+    overviews.find((o) => o.project.id === projectId) ?? overviews[0] ?? null;
+  const selected = selectedOverview?.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 chooseAgentType = (next: AgentType) => {
+    if (next !== agentType) {
+      // Model & mode berasal dari backend masing-masing.
+      setModel(null);
+      setAgent(null);
+    }
+    setAgentType(next);
+    storePreferredAgentType(next);
+    // Tanpa fokus ke textarea: dipanggil dari dialog ModelPicker yang masih
+    // terbuka (fokus terkunci di dialog sampai ditutup).
+  };
+
+  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, 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]">
+      {/* HP: logo di atas headline (tengah); desktop: berdampingan. */}
+      <div
+        data-vt-name="home-headline"
+        className="flex flex-col items-center justify-center gap-3 px-2 sm:flex-row"
+      >
+        <img src={logo} alt="" aria-hidden className="size-10 shrink-0 sm:size-12" />
+        <h1 className="text-balance text-center text-2xl font-semibold tracking-tight sm:text-left 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}
+                  agentType={agentType}
+                  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) & agent + 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">
+            <div className="flex min-w-0 items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 min-w-0 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>
+            </div>
+
+            {selected && (
+              <div className="flex max-w-[60%] shrink-0 justify-end">
+                {/* Agent dipilih di dialog yang sama dengan model; trigger
+                    menampilkan logo agent + nama model. */}
+                <ModelPicker
+                  projectId={selected.id}
+                  agentType={agentType}
+                  sessionId={null}
+                  model={model}
+                  onChanged={setModel}
+                  onAgentTypeChange={chooseAgentType}
+                  variant="inline"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </form>
+
+      {selectedOverview && (
+        <HomeRecentSessions overview={selectedOverview} className="hidden sm:mt-6 sm:flex" />
+      )}
+    </div>
+  );
+}

package/src/components/projects/HomeRecentSessions.tsx

@@ -0,0 +1,90 @@
+/**
+ * Daftar "lanjutkan" di homepage: beberapa Session terbaru milik Project yang
+ * sedang dipilih di composer (`HomeChat`). Ringkas — titik status, judul,
+ * logo agent, waktu relatif — plus tautan ke daftar Session lengkap.
+ *
+ * Datanya sudah ada di `ProjectOverview.recentSessions`, jadi tidak ada fetch.
+ */
+import { ArrowRightIcon } from "lucide-react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { useRouter } from "@/hooks/useRouter";
+import { formatRelativeTime, type ProjectOverview } from "@/lib/project-overview";
+import { projectPath, sessionPath } from "@/lib/routes";
+import { SESSION_STATUS_DOT, SESSION_STATUS_LABEL } from "@/lib/session-status";
+import { displaySessionTitle } from "@/lib/session-title";
+import { cn } from "@/lib/utils";
+
+export interface HomeRecentSessionsProps {
+  overview: ProjectOverview;
+  className?: string;
+}
+
+export function HomeRecentSessions({ overview, className }: HomeRecentSessionsProps) {
+  const { navigate } = useRouter();
+  const { project, recentSessions, sessionCount } = overview;
+  if (recentSessions.length === 0) return null;
+
+  // Tautan biasa (bukan tombol) agar buka-di-tab-baru tetap berfungsi.
+  const go = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    navigate(href);
+  };
+
+  const allHref = projectPath(project.id);
+
+  return (
+    <section
+      aria-label={`Recent sessions in ${project.name}`}
+      className={cn("flex flex-col", className)}
+    >
+      {/* Label + garis rambut: menandai section terpisah dari composer di
+          atasnya (bukan kelanjutan tray Project/model). */}
+      <div className="flex items-center gap-3 px-3 pb-2">
+        <h2 className="shrink-0 text-xs font-medium text-muted-foreground">Recent sessions</h2>
+        <span aria-hidden className="h-px flex-1 bg-border" />
+        {sessionCount > recentSessions.length && (
+          <a
+            href={allHref}
+            onClick={(e) => go(e, allHref)}
+            className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            View all {sessionCount}
+            <ArrowRightIcon className="size-3" />
+          </a>
+        )}
+      </div>
+      <ul className="flex flex-col">
+        {recentSessions.map((session) => {
+          const href = sessionPath(project.id, session.id);
+          const title = displaySessionTitle(session.title);
+          return (
+            <li key={session.id}>
+              <a
+                href={href}
+                onClick={(e) => go(e, href)}
+                aria-label={`Open session ${title}, ${SESSION_STATUS_LABEL[session.status]}`}
+                className="group flex min-h-10 items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+              >
+                <span
+                  aria-hidden
+                  className={cn("size-2 shrink-0 rounded-full", SESSION_STATUS_DOT[session.status])}
+                />
+                <span className="min-w-0 flex-1 truncate text-sm text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground">
+                  {title}
+                </span>
+                <AgentLogo
+                  agentType={session.agentType}
+                  className="size-3.5 text-muted-foreground"
+                />
+                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                  {formatRelativeTime(session.updatedAt)}
+                </span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

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