kcg-code 0.0.0-stage → 0.2.0

package/src/components/sessions/ModelSearchList.tsx

@@ -0,0 +1,231 @@
+/**
+ * Daftar model dengan pencarian — komponen presentasional bersama.
+ *
+ * Dipakai dua tempat dengan cara berbeda:
+ * - `ModelPicker.tsx` (ganti model Session berjalan) membukanya sebagai dialog.
+ * - `NewSessionDialog.tsx` (buat Session baru) menyematkannya di dalam form.
+ *
+ * Gaya libadwaita (GNOME): kolom cari ala GtkSearchEntry (terisi, tanpa
+ * border, tombol hapus), lalu "boxed list" per provider seperti
+ * AdwPreferencesGroup — judul grup di atas kartu membulat berbaris
+ * pemisah; model aktif ditandai centang di kanan (bukan latar), hasil kosong
+ * memakai pola AdwStatusPage. Enter di kolom cari memilih hasil pertama.
+ *
+ * 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 { type ReactNode, useMemo, useState } from "react";
+import { SearchEntry } from "@/components/ui/search-entry";
+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 aktif/terpilih (lihat `keyOfSessionModel`) — ditandai
+   * centang. Tanpa nilai: tidak ada centang (mode "klik untuk mulai").
+   */
+  activeKey?: string;
+  /** Baris yang pilihannya sedang diproses — spinner menggantikan centang. */
+  pendingKey?: string | null;
+  /** 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,
+  pendingKey = null,
+  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;
+  const isClaude = models?.[0]?.providerID === "claude-code";
+
+  /** Enter di kolom cari: pilih hasil teratas (default bila masih tampil). */
+  const pickFirst = () => {
+    if (loading || disabled) return;
+    if (showDefault) return onSelect(null);
+    const first = groups[0]?.models[0];
+    if (first) onSelect({ providerID: first.providerID, modelID: first.modelID });
+  };
+
+  return (
+    <div className={cn("flex min-h-0 flex-col gap-3", className)}>
+      <SearchEntry
+        className="shrink-0"
+        value={query}
+        onValueChange={setQuery}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            pickFirst();
+          }
+          // Esc: SearchEntry mengosongkan cari dulu (dialog pemanggil menahan
+          // tutupnya, lihat `ModelPicker`); Esc berikutnya menutup dialog.
+        }}
+        placeholder={
+          models && models.length > 0 ? `Search ${models.length} models…` : "Search models…"
+        }
+        aria-label="Search models or providers"
+        aria-describedby="model-search-count"
+      />
+      <span id="model-search-count" className="sr-only" aria-live="polite">
+        {loading ? "Loading models" : describeModelCount(filtered.length)}
+      </span>
+
+      {/* `-mx-1 px-1`: ruang untuk ring fokus baris agar tidak terpotong. */}
+      <div className="-mx-1 min-h-0 flex-1 overflow-y-auto overscroll-contain px-1 pb-1">
+        {loading ? (
+          <div className="flex h-full min-h-40 flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
+            <Spinner className="size-6" />
+            Loading models…
+          </div>
+        ) : empty ? (
+          // AdwStatusPage
+          <div className="flex h-full min-h-40 flex-col items-center justify-center gap-2 px-6 text-center">
+            <SearchIcon className="mb-2 size-12 text-muted-foreground/40" aria-hidden />
+            <p className="text-lg font-semibold">No Results Found</p>
+            <p className="text-sm text-muted-foreground">
+              No model matches “{query.trim()}”. Try a different search.
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-5">
+            {showDefault && (
+              <BoxedList label="Default">
+                <ModelRow
+                  name="Default model"
+                  hint={
+                    isClaude
+                      ? "Follows your Claude Code settings"
+                      : "Follows opencode configuration"
+                  }
+                  selected={activeKey === DEFAULT_MODEL_KEY}
+                  pending={pendingKey === DEFAULT_MODEL_KEY}
+                  disabled={disabled}
+                  onSelect={() => onSelect(null)}
+                />
+              </BoxedList>
+            )}
+            {groups.map((g) => (
+              <PrefsGroup key={g.providerID} title={g.providerName}>
+                {g.models.map((m) => (
+                  <ModelRow
+                    key={optionKey(m)}
+                    name={m.name}
+                    hint={m.modelID}
+                    selected={activeKey === optionKey(m)}
+                    pending={pendingKey === optionKey(m)}
+                    disabled={disabled}
+                    onSelect={() => onSelect({ providerID: m.providerID, modelID: m.modelID })}
+                  />
+                ))}
+              </PrefsGroup>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Kartu membulat berisi baris dengan garis pemisah (libadwaita `.boxed-list`). */
+function BoxedList({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <ul
+      aria-label={label}
+      className="flex flex-col divide-y overflow-hidden rounded-xl border bg-card shadow-xs"
+    >
+      {children}
+    </ul>
+  );
+}
+
+/** Judul grup + boxed list (AdwPreferencesGroup). */
+function PrefsGroup({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-2">
+      <h3 className="px-1 text-[13px] font-semibold">{title}</h3>
+      <BoxedList label={title}>{children}</BoxedList>
+    </section>
+  );
+}
+
+interface ModelRowProps {
+  name: string;
+  hint: string;
+  selected: boolean;
+  /** Pilihan ini sedang diproses: spinner, tidak ikut diredupkan. */
+  pending: boolean;
+  disabled: boolean;
+  onSelect: () => void;
+}
+
+/**
+ * Satu baris model (AdwActionRow yang bisa diaktifkan): judul + subjudul,
+ * centang aksen di kanan untuk pilihan aktif. `min-h-13` = target sentuh
+ * nyaman di HP.
+ */
+function ModelRow({ name, hint, selected, pending, disabled, onSelect }: ModelRowProps) {
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onSelect}
+        disabled={disabled}
+        aria-current={selected}
+        aria-busy={pending || undefined}
+        className={cn(
+          "flex min-h-13 w-full items-center gap-3 px-4 py-2 text-left transition-colors outline-none hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset active:bg-muted disabled:pointer-events-none",
+          pending ? "bg-muted/60" : "disabled:opacity-50",
+        )}
+      >
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="truncate text-[15px] leading-5">{name}</span>
+          <span className="truncate text-[13px] leading-snug text-muted-foreground">{hint}</span>
+        </span>
+        {pending ? (
+          <Spinner className="size-[18px] shrink-0 text-muted-foreground" />
+        ) : (
+          selected && (
+            <CheckIcon
+              className="size-[18px] shrink-0 text-primary"
+              strokeWidth={2.5}
+              aria-hidden
+            />
+          )
+        )}
+      </button>
+    </li>
+  );
+}

package/src/components/sessions/NewSessionDialog.tsx

@@ -0,0 +1,172 @@
+/**
+ * Dialog pembuatan Session baru (halaman detail Project) — gaya AdwDialog
+ * (libadwaita), sama dengan dialog Agent & Model:
+ * - Header bar: judul "New Session" + nama Project, tombol tutup bundar.
+ * - Isi: AdwToggleGroup agent (OpenCode / Claude Code), lalu daftar model
+ *   (`GET /api/projects/:id/models?agent=`, dimuat saat dialog dibuka).
+ * - Klik model (atau Enter di kolom cari = hasil teratas) LANGSUNG membuat
+ *   Session dengan agent & model itu — tanpa tombol Create. Selama dibuat,
+ *   baris yang diklik menampilkan spinner dan daftar dikunci.
+ * - Di HP tampil sebagai bottom sheet (`AdwDialogContent`).
+ *
+ * Agent awal = agent terakhir yang dipakai (sama dengan composer homepage).
+ * `POST /api/sessions` — direktori kerja memakai path Project
+ * (Requirement 10.9), tipe tidak didukung ditolak (1.3). Setelah berhasil,
+ * pemanggil menerima Session baru (mis. untuk langsung membukanya).
+ */
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
+import { AdwDialogContent } from "@/components/ui/adw-dialog";
+import { AdwToggleGroup } from "@/components/ui/adw-toggle-group";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Dialog } from "@/components/ui/dialog";
+import {
+  AGENT_TYPE_LABELS,
+  AGENT_TYPES,
+  agentQuery,
+  readPreferredAgentType,
+  storePreferredAgentType,
+} from "@/lib/agent-types";
+import { ApiError, apiFetch } from "@/lib/api";
+import { keyOfSessionModel } from "@/lib/model-picker";
+import type { ModelOption } from "@/server/services/opencode-client";
+import type { AgentType, Session, SessionModel } from "@/types";
+import { ModelSearchList } from "./ModelSearchList";
+
+export interface NewSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  /** Subjudul header bar. */
+  projectName: string;
+  /** Dipanggil dengan Session yang baru dibuat. */
+  onCreated: (session: Session) => void;
+}
+
+export function NewSessionDialog({
+  open,
+  onOpenChange,
+  projectId,
+  projectName,
+  onCreated,
+}: NewSessionDialogProps) {
+  const [agentType, setAgentType] = useState<AgentType>(readPreferredAgentType);
+  /** Kunci model yang sedang dipakai membuat Session (spinner di barisnya). */
+  const [pendingKey, setPendingKey] = useState<string | 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);
+
+  // Dibuka lagi -> mulai dari agent terakhir dipakai.
+  useEffect(() => {
+    if (!open) return;
+    setAgentType(readPreferredAgentType());
+    setCreateError(null);
+  }, [open]);
+
+  // Daftar model selalu di-fetch ulang saat dialog dibuka / agent berganti
+  // agar perubahan config terlihat tanpa reload halaman. Respons usang
+  // (agent sudah diganti lagi) dibuang.
+  useEffect(() => {
+    if (!open) return;
+    let stale = false;
+    setModelsLoading(true);
+    setModelsError(null);
+    apiFetch(`/api/projects/${projectId}/models${agentQuery(agentType)}`)
+      .then(async (res) => {
+        const body = (await res.json()) as { models: ModelOption[] };
+        if (!stale) setModels(body.models);
+      })
+      .catch((e: unknown) => {
+        if (stale) return;
+        setModelsError(e instanceof ApiError ? e.message : "Failed to load models");
+        setModels([]);
+      })
+      .finally(() => {
+        if (!stale) setModelsLoading(false);
+      });
+    return () => {
+      stale = true;
+    };
+  }, [open, projectId, agentType]);
+
+  /** Klik model = buat Session dengan agent & model ini, lalu buka. */
+  const create = async (model: SessionModel | null) => {
+    if (creating) return;
+    setCreating(true);
+    setPendingKey(keyOfSessionModel(model));
+    setCreateError(null);
+    try {
+      const res = await apiFetch("/api/sessions", {
+        method: "POST",
+        body: JSON.stringify({ agentType, projectId, model }),
+      });
+      const { session } = (await res.json()) as { session: Session };
+      storePreferredAgentType(agentType);
+      onOpenChange(false);
+      onCreated(session);
+      toast.success("Session created.");
+    } catch (e) {
+      setCreateError(e instanceof ApiError ? e.message : "Failed to create session");
+    } finally {
+      setCreating(false);
+      setPendingKey(null);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (creating) return;
+        onOpenChange(next);
+      }}
+    >
+      <AdwDialogContent
+        title="New Session"
+        subtitle={creating ? "Starting…" : projectName}
+        closeDisabled={creating}
+      >
+        <AdwToggleGroup
+          label="Agent"
+          value={agentType}
+          disabled={creating}
+          onChange={setAgentType}
+          options={AGENT_TYPES.map((t) => ({
+            value: t,
+            label: AGENT_TYPE_LABELS[t],
+            icon: <AgentLogo agentType={t} />,
+          }))}
+        />
+
+        {createError && (
+          <Alert variant="destructive">
+            <AlertTitle>Failed to create session</AlertTitle>
+            <AlertDescription>{createError}</AlertDescription>
+          </Alert>
+        )}
+
+        {modelsError ? (
+          <Alert variant="destructive">
+            <AlertTitle>Failed to load models</AlertTitle>
+            <AlertDescription>{modelsError}</AlertDescription>
+          </Alert>
+        ) : (
+          // Tanpa `activeKey`: tidak ada centang — tiap baris adalah aksi
+          // "mulai dengan model ini".
+          <ModelSearchList
+            models={models}
+            loading={modelsLoading}
+            pendingKey={pendingKey}
+            onSelect={(model) => void create(model)}
+            disabled={creating}
+            className="flex-1"
+          />
+        )}
+      </AdwDialogContent>
+    </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}
+      />
+    </>
+  );
+}