kcg-code 0.1.0 → 0.2.0

package/src/components/sessions/ModelPicker.tsx

@@ -16,28 +16,31 @@
  *   konfigurasi default-nya).
  * - `sessionId: null` (composer homepage, Session belum dibuat): pilihan
  *   hanya diteruskan ke `onChanged` tanpa PUT — dipakai saat membuat Session.
+ * - `onAgentTypeChange` (hanya homepage): dialog menampilkan pengalih agent
+ *   (OpenCode / Claude Code) di atas daftar, dan trigger membawa logo agent.
+ *   Model bergantung pada agent, jadi keduanya dipilih di satu tempat.
  */
 
 import { ChevronDownIcon, ChevronsUpDownIcon, SparklesIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
 import { ModelSearchList } from "@/components/sessions/ModelSearchList";
+import { AdwDialogContent } from "@/components/ui/adw-dialog";
+import { AdwToggleGroup } from "@/components/ui/adw-toggle-group";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog } from "@/components/ui/dialog";
 import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS, AGENT_TYPES, agentQuery } from "@/lib/agent-types";
 import { ApiError, apiFetch } from "@/lib/api";
 import { activeModelLabel, keyOfSessionModel, shortModelName } from "@/lib/model-picker";
 import type { ModelOption } from "@/server/services/opencode-client";
-import type { SessionModel } from "@/types";
+import type { AgentType, SessionModel } from "@/types";
 
 export interface ModelPickerProps {
   projectId: string;
+  /** Backend Session — daftar model opencode vs Claude Code berbeda. */
+  agentType?: AgentType;
   /** null = Session belum ada; pilihan tidak disimpan ke server. */
   sessionId: string | null;
   /** Model aktif saat ini; null = default opencode. */
@@ -53,14 +56,21 @@ export interface ModelPickerProps {
    *   composer homepage).
    */
   variant?: "heading" | "chip" | "inline";
+  /**
+   * Bila diisi, agent boleh diganti dari dialog ini (Session belum dibuat).
+   * Pemanggil bertanggung jawab me-reset `model` saat agent berganti.
+   */
+  onAgentTypeChange?: (agentType: AgentType) => void;
 }
 
 export function ModelPicker({
   projectId,
+  agentType = "opencode",
   sessionId,
   model,
   onChanged,
   variant = "chip",
+  onAgentTypeChange,
 }: ModelPickerProps) {
   const [open, setOpen] = useState(false);
   const [models, setModels] = useState<ModelOption[] | null>(null);
@@ -71,27 +81,40 @@ export function ModelPicker({
   const label = activeModelLabel(model, models ?? []);
   /** Judul header: buang prefiks vendor & potong bila panjang. */
   const headingLabel = shortModelName(label);
+  /**
+   * Trigger `inline` di homepage: tanpa model pilihan, tampilkan nama agent
+   * ("Claude Code") — "Default model" terpotong di HP dan bertabrakan dengan
+   * label mode agent ("Default") di composer.
+   */
+  const inlineLabel =
+    onAgentTypeChange && model === null ? AGENT_TYPE_LABELS[agentType] : headingLabel;
 
   // Daftar model selalu di-fetch ulang saat dialog dibuka — list di server
   // headless bisa berubah bila user mengedit config opencode (`opencode serve`
   // tidak hot-reload). Lazy: tidak di-spawn saat halaman Session dibuka.
   useEffect(() => {
     if (!open) return;
+    // Agent bisa diganti saat dialog terbuka — abaikan respons fetch lama.
+    let stale = false;
     setLoading(true);
     setError(null);
-    apiFetch(`/api/projects/${projectId}/models`)
+    apiFetch(`/api/projects/${projectId}/models${agentQuery(agentType)}`)
       .then(async (res) => {
         const body = (await res.json()) as { models: ModelOption[] };
-        setModels(body.models);
+        if (!stale) setModels(body.models);
       })
       .catch((e: unknown) => {
+        if (stale) return;
         setError(e instanceof ApiError ? e.message : "Failed to load model list");
         setModels([]);
       })
       .finally(() => {
-        setLoading(false);
+        if (!stale) setLoading(false);
       });
-  }, [open, projectId]);
+    return () => {
+      stale = true;
+    };
+  }, [open, projectId, agentType]);
 
   const choose = async (next: SessionModel | null) => {
     setSaving(true);
@@ -140,10 +163,15 @@ export function ModelPicker({
           onClick={() => setOpen(true)}
           disabled={saving}
           className="h-9 max-w-full min-w-0 gap-1 px-2 font-normal text-muted-foreground hover:text-foreground"
-          aria-label={`Model: ${label}. Tap to change`}
-          title={label}
+          aria-label={
+            onAgentTypeChange
+              ? `${AGENT_TYPE_LABELS[agentType]}, model: ${label}. Tap to change`
+              : `Model: ${label}. Tap to change`
+          }
+          title={onAgentTypeChange ? `${AGENT_TYPE_LABELS[agentType]} · ${label}` : label}
         >
-          <span className="min-w-0 truncate">{headingLabel}</span>
+          {onAgentTypeChange && <AgentLogo agentType={agentType} />}
+          <span className="min-w-0 truncate">{inlineLabel}</span>
           {saving ? <Spinner data-icon="inline-end" /> : <ChevronDownIcon data-icon="inline-end" />}
         </Button>
       ) : (
@@ -175,17 +203,27 @@ export function ModelPicker({
           if (!next) setError(null);
         }}
       >
-        {/* Tinggi dipatok agar daftar panjang men-scroll di dalam dialog,
-            bukan menumbuhkan dialog melewati layar HP. */}
-        <DialogContent className="flex h-[70dvh] max-h-[560px] flex-col sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Choose a model</DialogTitle>
-            <DialogDescription>
-              {sessionId === null
-                ? "Used by the new session you start from here."
-                : "Applies to the next messages — no session restart needed."}
-            </DialogDescription>
-          </DialogHeader>
+        {/* AdwDialog: header bar (judul + subjudul di tengah, tombol tutup
+            bundar), isi preferensi di bawahnya; bottom sheet di HP. */}
+        <AdwDialogContent
+          title={onAgentTypeChange ? "Agent & Model" : "Model"}
+          subtitle={sessionId === null ? "For the new session" : "Applies to the next message"}
+          closeDisabled={saving}
+        >
+          {onAgentTypeChange && (
+            <AdwToggleGroup
+              label="Agent"
+              value={agentType}
+              // Tetap bisa diganti saat daftar dimuat — respons usang dibuang.
+              disabled={saving}
+              onChange={onAgentTypeChange}
+              options={AGENT_TYPES.map((t) => ({
+                value: t,
+                label: AGENT_TYPE_LABELS[t],
+                icon: <AgentLogo agentType={t} />,
+              }))}
+            />
+          )}
 
           {error && (
             <Alert variant="destructive">
@@ -202,7 +240,7 @@ export function ModelPicker({
             disabled={saving}
             className="flex-1"
           />
-        </DialogContent>
+        </AdwDialogContent>
       </Dialog>
     </>
   );

package/src/components/sessions/ModelSearchList.tsx

@@ -3,7 +3,13 @@
  *
  * Dipakai dua tempat dengan cara berbeda:
  * - `ModelPicker.tsx` (ganti model Session berjalan) membukanya sebagai dialog.
- * - `SessionList.tsx` (buat Session baru) menyematkannya di dalam form.
+ * - `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
@@ -11,8 +17,8 @@
  */
 
 import { CheckIcon, SearchIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-import { Input } from "@/components/ui/input";
+import { type ReactNode, useMemo, useState } from "react";
+import { SearchEntry } from "@/components/ui/search-entry";
 import { Spinner } from "@/components/ui/spinner";
 import {
   DEFAULT_MODEL_KEY,
@@ -29,8 +35,13 @@ 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;
+  /**
+   * 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. */
@@ -43,6 +54,7 @@ export function ModelSearchList({
   models,
   loading,
   activeKey,
+  pendingKey = null,
   onSelect,
   disabled = false,
   className,
@@ -57,95 +69,163 @@ export function ModelSearchList({
     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-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={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>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      {/* `-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 items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
-            <Spinner className="size-4" />
+          <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 ? (
-          <p className="py-8 text-center text-sm text-muted-foreground">
-            No models match “{query.trim()}”.
-          </p>
+          // 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-1 pb-1">
+          <div className="flex flex-col gap-5">
             {showDefault && (
-              <ModelRow
-                name="Default model"
-                hint="Follow opencode configuration"
-                selected={activeKey === DEFAULT_MODEL_KEY}
-                disabled={disabled}
-                onSelect={() => onSelect(null)}
-              />
+              <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) => (
-              <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>
+              <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 })}
                   />
                 ))}
-              </div>
+              </PrefsGroup>
             ))}
           </div>
         )}
       </div>
-
-      <p className="shrink-0 text-xs text-muted-foreground">
-        {loading ? "Loading…" : describeModelCount(filtered.length)}
-      </p>
     </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 — `min-h-11` memberi target sentuh nyaman di HP. */
-function ModelRow({ name, hint, selected, disabled, onSelect }: ModelRowProps) {
+/**
+ * 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 (
-    <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>
+    <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>
   );
 }