kcg-code 0.0.0-stage → 0.1.0

package/src/components/sessions/ModelSearchList.tsx

@@ -0,0 +1,151 @@
+/**
+ * Daftar model dengan pencarian — komponen presentasional bersama.
+ *
+ * Dipakai dua tempat dengan cara berbeda:
+ * - `ModelPicker.tsx` (ganti model Session berjalan) membukanya sebagai dialog.
+ * - `SessionList.tsx` (buat Session baru) menyematkannya di dalam form.
+ *
+ * Komponen ini tidak melakukan fetch maupun simpan: pemanggil menyediakan
+ * `models` dan menerima pilihan lewat `onSelect`. Aturan pencarian dan
+ * pengelompokan berasal dari `lib/model-picker.ts` (murni, teruji).
+ */
+
+import { CheckIcon, SearchIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  DEFAULT_MODEL_KEY,
+  describeModelCount,
+  filterModels,
+  groupModels,
+  optionKey,
+} from "@/lib/model-picker";
+import { cn } from "@/lib/utils";
+import type { ModelOption } from "@/server/services/opencode-client";
+import type { SessionModel } from "@/types";
+
+export interface ModelSearchListProps {
+  /** Daftar model dari server; `null` = belum dimuat. */
+  models: ModelOption[] | null;
+  loading: boolean;
+  /** Kunci model yang sedang aktif/terpilih (lihat `keyOfSessionModel`). */
+  activeKey: string;
+  /** Pilihan baru; `null` = pakai model default opencode. */
+  onSelect: (model: SessionModel | null) => void;
+  /** Kunci aksi sementara pilihan sedang disimpan. */
+  disabled?: boolean;
+  /** Tinggi area daftar (kelas Tailwind); dialog memakai flex-1. */
+  className?: string;
+}
+
+export function ModelSearchList({
+  models,
+  loading,
+  activeKey,
+  onSelect,
+  disabled = false,
+  className,
+}: ModelSearchListProps) {
+  const [query, setQuery] = useState("");
+
+  const filtered = useMemo(() => filterModels(models ?? [], query), [models, query]);
+  const groups = useMemo(() => groupModels(filtered), [filtered]);
+  /** Opsi "default" ikut disaring agar hasil pencarian konsisten. */
+  const showDefault = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q === "" || "model default".includes(q);
+  }, [query]);
+  const empty = !loading && !showDefault && groups.length === 0;
+
+  return (
+    <div className={cn("flex min-h-0 flex-col gap-2", className)}>
+      <div className="relative shrink-0">
+        <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search models or providers…"
+          aria-label="Search models"
+          className="pl-9"
+        />
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+            <Spinner className="size-4" />
+            Loading models…
+          </div>
+        ) : empty ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No models match “{query.trim()}”.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-1 pb-1">
+            {showDefault && (
+              <ModelRow
+                name="Default model"
+                hint="Follow opencode configuration"
+                selected={activeKey === DEFAULT_MODEL_KEY}
+                disabled={disabled}
+                onSelect={() => onSelect(null)}
+              />
+            )}
+            {groups.map((g) => (
+              <div key={g.providerID} className="flex flex-col gap-1">
+                <p className="px-2 pt-2 text-xs font-medium text-muted-foreground">
+                  {g.providerName}
+                </p>
+                {g.models.map((m) => (
+                  <ModelRow
+                    key={optionKey(m)}
+                    name={m.name}
+                    hint={m.modelID}
+                    selected={activeKey === optionKey(m)}
+                    disabled={disabled}
+                    onSelect={() => onSelect({ providerID: m.providerID, modelID: m.modelID })}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <p className="shrink-0 text-xs text-muted-foreground">
+        {loading ? "Loading…" : describeModelCount(filtered.length)}
+      </p>
+    </div>
+  );
+}
+
+interface ModelRowProps {
+  name: string;
+  hint: string;
+  selected: boolean;
+  disabled: boolean;
+  onSelect: () => void;
+}
+
+/** Satu baris model — `min-h-11` memberi target sentuh nyaman di HP. */
+function ModelRow({ name, hint, selected, disabled, onSelect }: ModelRowProps) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      disabled={disabled}
+      aria-current={selected}
+      className={cn(
+        "flex min-h-11 w-full items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:opacity-50",
+        selected && "bg-accent",
+      )}
+    >
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-medium">{name}</span>
+        <span className="truncate font-mono text-[11px] text-muted-foreground">{hint}</span>
+      </span>
+      {selected && <CheckIcon className="size-4 shrink-0 text-primary" />}
+    </button>
+  );
+}

package/src/components/sessions/NewSessionDialog.tsx

@@ -0,0 +1,189 @@
+/**
+ * Form pembuatan Session baru (dari daftar Session / halaman Project).
+ *
+ * Pilih tipe CLI_Agent (`opencode` | `claude-code`) + model LLM
+ * (`GET /api/projects/:id/models`, dimuat malas saat dialog dibuka) lalu
+ * `POST /api/sessions` — direktori kerja memakai path Project
+ * (Requirement 10.9), tipe tidak didukung ditolak (1.3). Di layar HP dialog
+ * ini tampil sebagai dialog agar tidak mendorong daftar ke bawah.
+ */
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+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, FieldLabel } from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError, apiFetch } from "@/lib/api";
+import { keyOfSessionModel } from "@/lib/model-picker";
+import type { ModelOption } from "@/server/services/opencode-client";
+import type { AgentType, SessionModel } from "@/types";
+import { ModelSearchList } from "./ModelSearchList";
+
+// v1 headless: hanya opencode (claude-code punya mekanisme headless sendiri).
+const AGENT_TYPES: AgentType[] = ["opencode"];
+
+export interface NewSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  /** Panggil setelah Session berhasil dibuat (memuat ulang daftar). */
+  onCreated: () => void;
+}
+
+export function NewSessionDialog({
+  open,
+  onOpenChange,
+  projectId,
+  onCreated,
+}: NewSessionDialogProps) {
+  const [agentType, setAgentType] = useState<AgentType>("opencode");
+  /** Model pilihan untuk Session baru; null = default opencode. */
+  const [selectedModel, setSelectedModel] = useState<SessionModel | null>(null);
+  const [models, setModels] = useState<ModelOption[] | null>(null);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [modelsError, setModelsError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  // Daftar model selalu di-fetch ulang saat dialog dibuka (bukan cache
+  // sekali pakai) agar perubahan config opencode terlihat tanpa reload
+  // halaman. Server headless hanya di-spawn saat endpoint ini dipanggil.
+  useEffect(() => {
+    if (!open) return;
+    setCreateError(null);
+    setModelsLoading(true);
+    setModelsError(null);
+    apiFetch(`/api/projects/${projectId}/models`)
+      .then(async (res) => {
+        const body = (await res.json()) as { models: ModelOption[] };
+        setModels(body.models);
+      })
+      .catch((e: unknown) => {
+        setModelsError(e instanceof ApiError ? e.message : "Failed to load models");
+        setModels([]);
+      })
+      .finally(() => {
+        setModelsLoading(false);
+      });
+  }, [open, projectId]);
+
+  const create = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setCreating(true);
+    setCreateError(null);
+    try {
+      await apiFetch("/api/sessions", {
+        method: "POST",
+        body: JSON.stringify({ agentType, projectId, model: selectedModel }),
+      });
+      onOpenChange(false);
+      onCreated();
+      toast.success("Session created.");
+    } catch (e) {
+      setCreateError(e instanceof ApiError ? e.message : "Failed to create session");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        onOpenChange(next);
+        if (!next) setCreateError(null);
+      }}
+    >
+      {/* Tinggi dipatok: daftar model bisa panjang, jadi ia yang men-scroll
+          di dalam dialog — bukan dialog yang tumbuh melewati layar HP. */}
+      <DialogContent className="flex h-[80dvh] max-h-[620px] flex-col sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>New session</DialogTitle>
+          <DialogDescription>
+            The session runs on a headless OpenCode server with the project path as working
+            directory.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={create} className="flex min-h-0 flex-1 flex-col gap-4">
+          <Field>
+            <FieldLabel htmlFor="agent-type">CLI_Agent type</FieldLabel>
+            <Select value={agentType} onValueChange={(v) => setAgentType(v as AgentType)}>
+              <SelectTrigger id="agent-type" className="w-full">
+                <SelectValue placeholder="Choose type" />
+              </SelectTrigger>
+              <SelectContent>
+                {AGENT_TYPES.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {t}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          <div className="flex min-h-0 flex-1 flex-col gap-2">
+            <FieldLabel>Model</FieldLabel>
+            {modelsError ? (
+              <Alert variant="destructive">
+                <AlertTitle>Failed to load models</AlertTitle>
+                <AlertDescription>{modelsError}</AlertDescription>
+              </Alert>
+            ) : (
+              <ModelSearchList
+                models={models}
+                loading={modelsLoading}
+                activeKey={keyOfSessionModel(selectedModel)}
+                onSelect={setSelectedModel}
+                disabled={creating}
+                className="flex-1"
+              />
+            )}
+          </div>
+
+          {createError && (
+            <Alert variant="destructive">
+              <AlertTitle>Failed to create session</AlertTitle>
+              <AlertDescription>{createError}</AlertDescription>
+            </Alert>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => onOpenChange(false)}
+              disabled={creating}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={creating}>
+              {creating ? (
+                <>
+                  <Spinner data-icon="inline-start" />
+                  Creating…
+                </>
+              ) : (
+                "Create session"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/sessions/PendingAttachments.tsx

@@ -0,0 +1,127 @@
+/**
+ * Lampiran yang akan dikirim bersama pesan berikutnya, tampil DI DALAM kotak
+ * composer (di atas textarea) — jelas bahwa file ikut pesan ini.
+ *
+ * - Gambar: thumbnail kotak; klik = pratinjau layar penuh (`ImageLightbox`).
+ * - File lain: kartu ikon + nama + jenis · ukuran.
+ * - Tombol hapus selalu terlihat (layar sentuh tidak punya hover).
+ * - Baris bisa di-scroll horizontal bila lampiran banyak.
+ * - `hiddenKeys`: item yang sedang "mendarat" dari animasi plate drop —
+ *   tetap menempati tempatnya (diukur sebagai tujuan animasi) tapi belum
+ *   terlihat; `registerEl` memberi elemen tiap item ke pemanggil.
+ *
+ * Object URL dibuat & dilepas oleh pemilik state (`SessionComposer`).
+ */
+import { XIcon } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { useState } from "react";
+import { FileTile } from "@/components/sessions/AttachmentTile";
+import { ImageLightbox } from "@/components/sessions/ImageLightbox";
+import { cn } from "@/lib/utils";
+
+export interface PendingAttachment {
+  key: string;
+  file: File;
+  /** Object URL pratinjau — hanya untuk gambar yang bisa dipratinjau. */
+  previewUrl: string | null;
+}
+
+/** Ukuran kotak (dipakai juga oleh plate agar mendarat pas di tempatnya). */
+export const IMAGE_TILE_CLASS = "size-16 sm:size-[4.5rem]";
+export const FILE_TILE_CLASS = "h-16 w-48 sm:h-[4.5rem]";
+
+/** Isi visual satu lampiran tanpa tombol (dipakai list & plate). */
+export function AttachmentVisual({ item }: { item: PendingAttachment }) {
+  if (item.previewUrl) {
+    return (
+      <span className={cn("block overflow-hidden rounded-lg border bg-muted", IMAGE_TILE_CLASS)}>
+        <img src={item.previewUrl} alt="" className="size-full object-cover" draggable={false} />
+      </span>
+    );
+  }
+  return (
+    <FileTile
+      filename={item.file.name}
+      mime={item.file.type}
+      size={item.file.size}
+      className={FILE_TILE_CLASS}
+    />
+  );
+}
+
+export interface PendingAttachmentsProps {
+  items: PendingAttachment[];
+  onRemove: (key: string) => void;
+  hiddenKeys?: ReadonlySet<string>;
+  registerEl?: (key: string, el: HTMLElement | null) => void;
+}
+
+export function PendingAttachments({
+  items,
+  onRemove,
+  hiddenKeys,
+  registerEl,
+}: PendingAttachmentsProps) {
+  const [preview, setPreview] = useState<number | null>(null);
+  const images = items.filter((it) => it.previewUrl !== null);
+
+  return (
+    <>
+      <ul
+        aria-label={`${items.length} ${items.length === 1 ? "attachment" : "attachments"}`}
+        className="flex gap-2 overflow-x-auto px-1 pt-1 pb-2 [scrollbar-width:thin]"
+      >
+        <AnimatePresence initial={false}>
+          {items.map((it) => {
+            const hidden = hiddenKeys?.has(it.key) ?? false;
+            const imageIndex = it.previewUrl ? images.indexOf(it) : -1;
+            return (
+              <m.li
+                key={it.key}
+                ref={(el) => registerEl?.(it.key, el)}
+                // Item hasil drop sudah "dianimasikan" plate — muncul tanpa
+                // animasi masuk agar tidak ada kedipan saat plate berganti.
+                initial={hidden ? false : { opacity: 0, scale: 0.85 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.85, transition: { duration: 0.15 } }}
+                transition={{ type: "spring", stiffness: 500, damping: 32 }}
+                className={cn("relative shrink-0", hidden && "invisible")}
+              >
+                {it.previewUrl ? (
+                  <button
+                    type="button"
+                    onClick={() => setPreview(imageIndex)}
+                    aria-label={`Preview ${it.file.name}`}
+                    className="block rounded-lg outline-none transition-opacity hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                  >
+                    <AttachmentVisual item={it} />
+                  </button>
+                ) : (
+                  <span title={it.file.name} className="block">
+                    <AttachmentVisual item={it} />
+                  </span>
+                )}
+                <button
+                  type="button"
+                  onClick={() => onRemove(it.key)}
+                  aria-label={`Remove ${it.file.name}`}
+                  title="Remove"
+                  className="absolute top-1 right-1 flex size-6 items-center justify-center rounded-full bg-black/60 text-white shadow-sm backdrop-blur-sm transition-colors outline-none hover:bg-black/80 focus-visible:ring-[3px] focus-visible:ring-white/60"
+                >
+                  <XIcon className="size-3.5" aria-hidden />
+                </button>
+              </m.li>
+            );
+          })}
+        </AnimatePresence>
+      </ul>
+
+      <ImageLightbox
+        images={images.map((it) => ({ src: it.previewUrl as string, alt: it.file.name }))}
+        index={preview}
+        onIndexChange={setPreview}
+      />
+    </>
+  );
+}