kcg-code 0.1.0 → 0.2.0

package/src/components/sessions/NewSessionDialog.tsx

@@ -1,103 +1,119 @@
 /**
- * Form pembuatan Session baru (dari daftar Session / halaman Project).
+ * 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`).
  *
- * Pilih tipe CLI_Agent (`opencode` | `claude-code`) + model LLM
- * (`GET /api/projects/:id/models`, dimuat malas saat dialog dibuka) lalu
+ * 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). Di layar HP dialog
- * ini tampil sebagai dialog agar tidak mendorong daftar ke bawah.
+ * (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 { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
 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";
+  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, SessionModel } from "@/types";
+import type { AgentType, Session, 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;
+  /** 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>("opencode");
-  /** Model pilihan untuk Session baru; null = default opencode. */
-  const [selectedModel, setSelectedModel] = useState<SessionModel | null>(null);
+  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);
 
-  // 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.
+  // 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`)
+    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;
         setModelsError(e instanceof ApiError ? e.message : "Failed to load models");
         setModels([]);
       })
       .finally(() => {
-        setModelsLoading(false);
+        if (!stale) setModelsLoading(false);
       });
-  }, [open, projectId]);
+    return () => {
+      stale = true;
+    };
+  }, [open, projectId, agentType]);
 
-  const create = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  /** 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 {
-      await apiFetch("/api/sessions", {
+      const res = await apiFetch("/api/sessions", {
         method: "POST",
-        body: JSON.stringify({ agentType, projectId, model: selectedModel }),
+        body: JSON.stringify({ agentType, projectId, model }),
       });
+      const { session } = (await res.json()) as { session: Session };
+      storePreferredAgentType(agentType);
       onOpenChange(false);
-      onCreated();
+      onCreated(session);
       toast.success("Session created.");
     } catch (e) {
       setCreateError(e instanceof ApiError ? e.message : "Failed to create session");
     } finally {
       setCreating(false);
+      setPendingKey(null);
     }
   };
 
@@ -105,85 +121,52 @@ export function NewSessionDialog({
     <Dialog
       open={open}
       onOpenChange={(next) => {
+        if (creating) return;
         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>
+      <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>
-          )}
+        {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>
+        {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/SessionComposer.tsx

@@ -126,7 +126,7 @@ export function SessionComposer({
    * Fetch + pick daftar agent untuk Sheet aksi mobile — dipakai langsung
    * (tanpa nested popover) supaya tap satu mode langsung menerapkannya.
    */
-  const agentPicker = useAgentPicker(session.projectId, session.id, setAgent);
+  const agentPicker = useAgentPicker(session.projectId, session.id, setAgent, session.agentType);
   // Muat daftar agent begitu Sheet aksi mobile pertama dibuka (lazy, sama
   // seperti popover AgentPicker di desktop).
   useEffect(() => {
@@ -589,6 +589,7 @@ export function SessionComposer({
             const agentPickerEl = (
               <AgentPicker
                 projectId={session.projectId}
+                agentType={session.agentType}
                 sessionId={session.id}
                 agent={agent}
                 onChanged={setAgent}

package/src/components/sessions/SessionHeader.tsx

@@ -75,6 +75,7 @@ export function SessionHeader({
         <div className="flex min-w-0 flex-1 flex-col items-start">
           <ModelPicker
             projectId={session.projectId}
+            agentType={session.agentType}
             sessionId={session.id}
             model={model}
             onChanged={setModel}