kcg-code 0.1.0 → 0.2.0

package/src/components/sessions/SessionList.tsx

@@ -1,19 +1,19 @@
 /**
  * Daftar & pembuatan Session milik sebuah Project (Requirement 1.1, 1.3, 1.5).
  *
- * Halaman detail Project — sengaja minimal: tipografi & ruang kosong yang
- * bekerja, bukan kartu/tile.
- * - Header: nama Project besar, path (salin saat hover), satu baris ringkasan
- *   ("3 sessions · 1 running"). Aksi: "New session" + menu "..." Reload/Delete
- *   (`ProjectMenu`; hapus tetap lewat dialog konfirmasi). Desktop: di
- *   kanan judul. Layar sempit: "New session" jadi tombol melayang kanan-bawah
- *   (area jempol); toolbar di bawah judul berisi "Details" (panel samping)
- *   dan grup Reload/Delete.
+ * Halaman detail Project — gaya libadwaita (GNOME Settings), sama dengan
+ * panel samping: grup berjudul berisi "boxed list" (primitif `settings/prefs`).
+ * - Header: nama Project besar, path (salin saat hover). Aksi: tombol pil
+ *   "New session" + tombol bundar "..." Reload/Delete (`ProjectMenu`; hapus
+ *   tetap lewat dialog konfirmasi). Desktop: di kanan judul. Layar sempit:
+ *   "New session" jadi tombol melayang kanan-bawah (area jempol); toolbar di
+ *   bawah judul berisi "Details" (panel samping) dan menu "...".
  * - Panel samping (`ProjectSidePanel`, gaya Claude Projects): custom
  *   instruction, MCP server, dan skill. Layar `lg`+ = kolom kanan sticky;
  *   lebih sempit = Sheet dari kanan lewat tombol di header.
  *   Tanpa tombol back — navigasi lewat sidebar.
- * - Daftar Session: baris polos dipisah hairline, status lewat titik warna.
+ * - Daftar Session: grup "Sessions" (ringkasan "3 sessions · 1 running"
+ *   sebagai deskripsi) berisi baris AdwActionRow; kosong -> AdwStatusPage.
  *   Urutan dari `sortSessions` (running -> crashed -> stopped, terbaru dulu).
  * - `GET /api/sessions` di-filter per `projectId` (Requirement 1.5).
  *
@@ -26,12 +26,14 @@
 import {
   CheckIcon,
   CopyIcon,
+  ListChecksIcon,
   MessagesSquareIcon,
   MoreHorizontalIcon,
   PanelRightIcon,
   PlusIcon,
   RefreshCwIcon,
   Trash2Icon,
+  TriangleAlertIcon,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -40,7 +42,7 @@ import { ConfirmDeleteProjectDialog } from "@/components/sessions/ConfirmDeleteP
 import { ConfirmSessionDeleteDialog } from "@/components/sessions/ConfirmSessionDeleteDialog";
 import { NewSessionDialog } from "@/components/sessions/NewSessionDialog";
 import { SessionListSkeleton, SessionRow } from "@/components/sessions/SessionRow";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ActionRow, PrefsGroup } from "@/components/settings/prefs";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -60,6 +62,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { useSessionList } from "@/hooks/useSessionList";
 import { notifyDataChanged } from "@/lib/data-events";
+import { describeSelection, pluralSessions } from "@/lib/session-selection";
 import { describeSessionSummary } from "@/lib/session-summary";
 import { cn } from "@/lib/utils";
 import type { Project, Session } from "@/types";
@@ -137,12 +140,13 @@ function ProjectMenu({
       <Tooltip>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
+            {/* Tombol bundar `.circular` Adwaita: latar terisi, tanpa border. */}
             <Button
               type="button"
-              variant="outline"
+              variant="secondary"
               size="icon"
               aria-label="More project actions"
-              className={cn("rounded-full text-muted-foreground", className)}
+              className={cn("rounded-full", className)}
             >
               <MoreHorizontalIcon />
             </Button>
@@ -166,29 +170,28 @@ function ProjectMenu({
 }
 
 /**
- * Empty state saat Project belum punya Session: kartu bergaris putus-putus
- * (ikon, judul, penjelasan singkat, satu aksi utama).
+ * Empty state saat Project belum punya Session — pola AdwStatusPage: ikon
+ * simbolik besar redup, judul, deskripsi, satu tombol pil aksi utama.
  */
 function EmptySessions({ projectName, onStart }: { projectName: string; onStart: () => void }) {
   return (
-    <div className="flex flex-col items-center gap-6 rounded-2xl border border-dashed bg-muted/20 px-6 py-12 text-center sm:py-16">
-      <span
-        className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary"
+    <div className="flex flex-col items-center gap-6 px-6 py-12 text-center sm:py-20">
+      <MessagesSquareIcon
+        className="size-16 text-muted-foreground/50"
+        strokeWidth={1.5}
         aria-hidden
-      >
-        <MessagesSquareIcon className="size-7" />
-      </span>
+      />
 
-      <div className="flex max-w-sm flex-col gap-1.5">
-        <h2 className="text-lg font-semibold tracking-tight">Start your first session</h2>
-        <p className="text-sm leading-relaxed text-muted-foreground">
+      <div className="flex max-w-sm flex-col gap-2">
+        <h2 className="text-2xl font-bold tracking-tight">No Sessions Yet</h2>
+        <p className="text-[15px] leading-relaxed text-muted-foreground">
           A session is a conversation with the agent inside{" "}
           <span className="font-medium text-foreground">{projectName}</span>. It can read and edit
           files here for you.
         </p>
       </div>
 
-      <Button type="button" onClick={onStart} className="rounded-full px-5">
+      <Button type="button" onClick={onStart} className="h-10 rounded-full px-6">
         <PlusIcon data-icon="inline-start" />
         New session
       </Button>
@@ -210,6 +213,25 @@ export function SessionList({
   const openForm = () => setFormOpen(true);
 
   const hasSessions = !list.loading && !list.loadError && list.ordered.length > 0;
+  const allSelected =
+    list.sessions.length > 0 && list.sessions.every((s) => list.selected.has(s.id));
+
+  // Esc keluar dari selection mode (kecuali ada dialog terbuka — Esc
+  // miliknya). Daftar kosong (semua terhapus) juga mengakhiri mode ini.
+  const { selecting, stopSelecting, bulkDeleteOpen } = list;
+  useEffect(() => {
+    if (!selecting) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || bulkDeleteOpen || e.defaultPrevented) return;
+      if (document.querySelector("[role=dialog],[role=alertdialog]")) return;
+      stopSelecting();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [selecting, stopSelecting, bulkDeleteOpen]);
+  useEffect(() => {
+    if (selecting && !list.loading && list.sessions.length === 0) stopSelecting();
+  }, [selecting, stopSelecting, list.loading, list.sessions.length]);
   /** Layar lebar: panel samping inline. Sempit: panel di Sheet (tombol header). */
   const wide = useMediaQuery(WIDE_QUERY);
   const [detailsOpen, setDetailsOpen] = useState(false);
@@ -245,19 +267,13 @@ export function SessionList({
             )}
           </div>
 
-          {/* Satu baris ringkasan — cukup teks, tanpa tile. Disembunyikan saat
-              kosong: empty state di bawah sudah menyampaikannya. */}
-          {!list.loading && !list.loadError && list.summary.total > 0 && (
-            <p className="text-sm text-muted-foreground">{describeSessionSummary(list.summary)}</p>
-          )}
-
           {/* Layar sempit: toolbar aksi sekunder di bawah judul. Aksi utama
               (New session) jadi tombol melayang kanan-bawah — area jempol. */}
           {!wide && (
             <div className="flex items-center justify-between gap-2">
               <Button
                 type="button"
-                variant="outline"
+                variant="secondary"
                 onClick={() => setDetailsOpen(true)}
                 aria-label="Project details: instructions, MCP servers, skills"
                 className="h-10 rounded-full px-3.5"
@@ -283,40 +299,115 @@ export function SessionList({
           {list.loading ? (
             <SessionListSkeleton />
           ) : list.loadError ? (
-            <Alert variant="destructive">
-              <AlertTitle>Failed to load sessions</AlertTitle>
-              <AlertDescription className="flex flex-col items-start gap-3">
-                {list.loadError}
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => void list.refresh()}
-                >
-                  <RefreshCwIcon data-icon="inline-start" />
-                  Retry
-                </Button>
-              </AlertDescription>
-            </Alert>
+            <PrefsGroup title="Sessions">
+              <ActionRow
+                prefix={<TriangleAlertIcon className="size-[18px] text-destructive" aria-hidden />}
+                title="Failed to load sessions"
+                subtitle={list.loadError}
+                suffix={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void list.refresh()}
+                  >
+                    <RefreshCwIcon data-icon="inline-start" />
+                    Retry
+                  </Button>
+                }
+              />
+            </PrefsGroup>
           ) : hasSessions ? (
-            <ul className="-mx-3 flex flex-col">
-              {list.ordered.map((session) => (
-                <li key={session.id}>
-                  <SessionRow
-                    session={session}
-                    busy={
-                      list.stopping === session.id ||
-                      list.starting === session.id ||
-                      list.deleting === session.id
-                    }
-                    onOpen={() => onOpenSession(session)}
-                    onStop={() => void list.stop(session.id)}
-                    onStart={() => void list.start(session.id)}
-                    onDelete={() => list.requestDelete(session)}
-                  />
-                </li>
-              ))}
-            </ul>
+            <>
+              {/* AdwPreferencesGroup: ringkasan status sebagai deskripsi grup,
+                  Session sebagai boxed list. Tombol "Select" masuk selection
+                  mode (pola Nautilus/Contacts) untuk hapus massal. */}
+              <PrefsGroup
+                title="Sessions"
+                description={
+                  list.selecting
+                    ? describeSelection(list.selected.size, list.sessions.length)
+                    : describeSessionSummary(list.summary)
+                }
+                suffix={
+                  list.selecting ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={list.toggleSelectAll}
+                      disabled={list.bulkProgress !== null}
+                    >
+                      {allSelected ? "Deselect All" : "Select All"}
+                    </Button>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={list.startSelecting}
+                      aria-label="Select sessions"
+                    >
+                      <ListChecksIcon data-icon="inline-start" />
+                      Select
+                    </Button>
+                  )
+                }
+              >
+                {list.ordered.map((session) => (
+                  <li key={session.id}>
+                    <SessionRow
+                      session={session}
+                      busy={
+                        list.stopping === session.id ||
+                        list.starting === session.id ||
+                        list.deleting === session.id
+                      }
+                      onOpen={() => onOpenSession(session)}
+                      onStop={() => void list.stop(session.id)}
+                      onStart={() => void list.start(session.id)}
+                      onDelete={() => list.requestDelete(session)}
+                      selectionMode={list.selecting}
+                      selected={list.selected.has(session.id)}
+                      onToggleSelect={() => list.toggleSelect(session.id)}
+                    />
+                  </li>
+                ))}
+              </PrefsGroup>
+
+              {/* Action bar selection mode (GtkActionBar): melayang di dasar
+                  area scroll — jumlah terpilih, Cancel, Delete (destruktif). */}
+              {list.selecting && (
+                <div className="sticky bottom-[max(1rem,env(safe-area-inset-bottom))] z-20 mt-4 flex items-center gap-2 rounded-2xl border bg-popover py-2 pr-2 pl-4 shadow-lg">
+                  <span className="min-w-0 truncate text-sm font-medium" aria-live="polite">
+                    {list.selected.size === 0
+                      ? "None selected"
+                      : `${pluralSessions(list.selected.size)} selected`}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="ml-auto"
+                    onClick={list.stopSelecting}
+                    disabled={list.bulkProgress !== null}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    size="sm"
+                    className="rounded-full px-3.5"
+                    onClick={list.requestBulkDelete}
+                    disabled={list.selected.size === 0 || list.bulkProgress !== null}
+                  >
+                    <Trash2Icon data-icon="inline-start" />
+                    Delete
+                  </Button>
+                </div>
+              )}
+            </>
           ) : (
             <EmptySessions projectName={project.name} onStart={openForm} />
           )}
@@ -350,7 +441,8 @@ export function SessionList({
       {/* Mobile/tablet: aksi utama melayang di kanan-bawah (jangkauan jempol,
           selalu terlihat saat scroll). Label teks tetap ada agar jelas —
           bukan ikon "+" tanpa arti. Safe-area iOS dihormati. */}
-      {!wide && (
+      {/* Disembunyikan saat selection mode: tempatnya dipakai action bar. */}
+      {!wide && !list.selecting && (
         <Button
           type="button"
           onClick={openForm}
@@ -366,9 +458,12 @@ export function SessionList({
         open={formOpen}
         onOpenChange={setFormOpen}
         projectId={project.id}
-        onCreated={() => {
+        projectName={project.name}
+        onCreated={(session) => {
           void list.refresh();
           notifyDataChanged();
+          // Session baru langsung dibuka — siap menerima prompt pertama.
+          onOpenSession(session);
         }}
       />
 
@@ -382,6 +477,18 @@ export function SessionList({
         onConfirm={() => void list.confirmRemove()}
       />
 
+      {/* Konfirmasi hapus massal (selection mode) — progres di tombol. */}
+      <ConfirmSessionDeleteDialog
+        open={list.bulkDeleteOpen}
+        onOpenChange={(open) => {
+          if (!open) list.cancelBulkDelete();
+        }}
+        count={list.selected.size}
+        deleting={list.bulkProgress !== null}
+        progress={list.bulkProgress}
+        onConfirm={() => void list.confirmBulkRemove()}
+      />
+
       {/* Konfirmasi hapus Project (beserta seluruh Session-nya) */}
       <ConfirmDeleteProjectDialog
         open={list.projectDeleteOpen}

package/src/components/sessions/SessionRow.tsx

@@ -1,12 +1,22 @@
 /**
- * Satu baris Session di daftar (`SessionList`).
- *
- * Baris polos tanpa kotak: titik status, judul, meta tipis, waktu di kanan.
+ * Satu baris Session di daftar (`SessionList`) — baris boxed list ala
+ * AdwActionRow (libadwaita), sama dengan baris panel samping Project: logo
+ * agent 18px sebagai ikon, judul + subjudul (status berwarna · model ·
+ * waktu), tombol menu bundar sebagai suffix, lalu chevron navigasi.
  * Badan baris adalah tombol buka (target sentuh lebar); aksi sekunder ada di
  * menu "..." — di perangkat dengan pointer halus (mouse) menu baru muncul
  * saat hover/fokus agar daftar tetap bersih, di layar sentuh selalu tampil.
+ * Pemanggil membungkusnya dengan `<li>` di dalam `PrefsGroup`.
  */
-import { MoreHorizontalIcon, PlayIcon, SquareIcon, Trash2Icon } from "lucide-react";
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+  PlayIcon,
+  SquareIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { AgentLogo } from "@/components/sessions/AgentLogo";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -17,6 +27,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
+import { AGENT_TYPE_LABELS } from "@/lib/agent-types";
 import { formatRelativeTime } from "@/lib/project-overview";
 import { SESSION_STATUS_DOT, SESSION_STATUS_LABEL } from "@/lib/session-status";
 import { describeSessionModel } from "@/lib/session-summary";
@@ -32,106 +43,195 @@ export interface SessionRowProps {
   onStop: () => void;
   onStart: () => void;
   onDelete: () => void;
+  /**
+   * Selection mode (hapus massal): kotak centang di depan, klik baris
+   * memilih/membatalkan pilihan, menu & chevron disembunyikan.
+   */
+  selectionMode?: boolean;
+  selected?: boolean;
+  onToggleSelect?: () => void;
 }
 
-/** Titik status; running diberi denyut halus. */
-function StatusDot({ session, busy }: { session: Session; busy: boolean }) {
-  if (busy) return <Spinner className="size-3 text-muted-foreground" />;
-  const running = session.status === "running";
+/** Kotak centang ala GtkCheckButton (GTK4): kotak membulat, terisi aksen. */
+function CheckBox({ checked }: { checked: boolean }) {
   return (
-    <span className="relative flex size-2" aria-hidden>
-      {running && (
-        <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-50" />
+    <span
+      aria-hidden
+      className={cn(
+        "flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border-2 transition-colors",
+        checked
+          ? "border-primary bg-primary text-primary-foreground"
+          : "border-muted-foreground/45",
       )}
-      <span
-        className={cn(
-          "relative inline-flex size-2 rounded-full",
-          SESSION_STATUS_DOT[session.status],
+    >
+      {checked && <CheckIcon className="size-3" strokeWidth={3.5} />}
+    </span>
+  );
+}
+
+/** Warna teks status di subjudul (selaras status MCP di panel samping). */
+const STATUS_TEXT: Record<Session["status"], string> = {
+  running: "text-emerald-700 dark:text-emerald-400",
+  crashed: "text-destructive",
+  stopped: "text-muted-foreground",
+};
+
+/**
+ * Status di awal subjudul — titik + label berwarna, seperti status MCP.
+ * `stopped` (keadaan biasa) tidak ditampilkan agar daftar tidak ramai.
+ */
+function StatusLabel({ session, busy }: { session: Session; busy: boolean }) {
+  if (busy) {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1.5">
+        <Spinner className="size-3" />
+        Working…
+      </span>
+    );
+  }
+  if (session.status === "stopped") return null;
+  const running = session.status === "running";
+  return (
+    <span className={cn("inline-flex shrink-0 items-center gap-1.5", STATUS_TEXT[session.status])}>
+      <span className="relative flex size-1.5" aria-hidden>
+        {running && (
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
         )}
-      />
+        <span
+          className={cn(
+            "relative inline-flex size-1.5 rounded-full",
+            SESSION_STATUS_DOT[session.status],
+          )}
+        />
+      </span>
+      {SESSION_STATUS_LABEL[session.status]}
+    </span>
+  );
+}
+
+/** Pemisah "·" di subjudul; jarak kiri/kanan datang dari `gap` induk. */
+function Dot() {
+  return (
+    <span className="opacity-50" aria-hidden>
+      ·
     </span>
   );
 }
 
-export function SessionRow({ session, busy, onOpen, onStop, onStart, onDelete }: SessionRowProps) {
+export function SessionRow({
+  session,
+  busy,
+  onOpen,
+  onStop,
+  onStart,
+  onDelete,
+  selectionMode = false,
+  selected = false,
+  onToggleSelect,
+}: SessionRowProps) {
   const running = session.status === "running";
   const title = displaySessionTitle(session.title);
+  const agentLabel = AGENT_TYPE_LABELS[session.agentType];
+  const hasStatus = busy || session.status !== "stopped";
 
   return (
-    <div className="group relative flex items-center rounded-lg transition-colors hover:bg-muted/50 has-focus-visible:bg-muted/50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
+    // Baris AdwActionRow yang bisa diaktifkan — sama dengan baris di panel
+    // samping: ikon simbolik 18px, judul 15px + subjudul 13px, suffix, lalu
+    // chevron. Tombol buka "direntangkan" (after:inset-0) sehingga seluruh
+    // baris, termasuk chevron, bisa diklik; tombol menu berada di atasnya.
+    <div
+      className={cn(
+        "group relative flex min-h-14 items-center gap-3 pr-4 pl-4 transition-colors hover:bg-muted/60 has-focus-visible:bg-muted/60 has-[button:active]:bg-muted",
+        selectionMode && selected && "bg-primary/[0.06]",
+      )}
+    >
+      {selectionMode && <CheckBox checked={selected} />}
+      <AgentLogo agentType={session.agentType} className="size-[18px] text-muted-foreground" />
       <button
         type="button"
-        onClick={onOpen}
+        onClick={selectionMode ? onToggleSelect : onOpen}
         disabled={busy}
-        className="flex min-w-0 flex-1 items-center gap-3.5 rounded-lg px-3 py-3 text-left focus-visible:outline-none disabled:opacity-60"
-        aria-label={`Open session ${title}, ${SESSION_STATUS_LABEL[session.status]}`}
+        aria-pressed={selectionMode ? selected : undefined}
+        title={`${title} — ${agentLabel}`}
+        className="flex min-w-0 flex-1 flex-col gap-0.5 py-2.5 text-left outline-none after:absolute after:inset-0 focus-visible:after:ring-[3px] focus-visible:after:ring-ring/40 focus-visible:after:ring-inset disabled:opacity-60"
+        aria-label={`${selectionMode ? "Select" : "Open"} session ${title}, ${agentLabel}, ${SESSION_STATUS_LABEL[session.status]}`}
       >
-        <span className="flex size-3 shrink-0 items-center justify-center">
-          <StatusDot session={session} busy={busy} />
-        </span>
-        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <span className="truncate text-[15px] font-medium leading-snug">{title}</span>
-          <span className="truncate text-xs text-muted-foreground">
-            {session.agentType}
-            <span className="mx-1.5 opacity-50">/</span>
-            {describeSessionModel(session)}
+        <span className="truncate text-[15px] leading-5">{title}</span>
+        <span className="flex min-w-0 items-center gap-1.5 text-[13px] leading-snug text-muted-foreground">
+          <StatusLabel session={session} busy={busy} />
+          {/* Layar sempit + ada status: model disembunyikan (terpotong jadi
+              tak terbaca); status & waktu lebih penting. */}
+          <span className={cn("contents", hasStatus && "max-sm:hidden")}>
+            {hasStatus && <Dot />}
+            <span className="truncate">{describeSessionModel(session)}</span>
           </span>
-        </span>
-        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
-          {formatRelativeTime(session.updatedAt)}
+          <Dot />
+          <span className="shrink-0 tabular-nums">{formatRelativeTime(session.updatedAt)}</span>
         </span>
       </button>
 
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            disabled={busy}
-            aria-label={`Session actions ${title}`}
-            className="mr-1.5 shrink-0 rounded-full text-muted-foreground transition-opacity pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100"
-          >
-            <MoreHorizontalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {running ? (
-            <DropdownMenuItem onSelect={onStop}>
-              <SquareIcon />
-              Stop
-            </DropdownMenuItem>
-          ) : (
-            <DropdownMenuItem onSelect={onStart}>
-              <PlayIcon />
-              Start
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive" onSelect={onDelete}>
-            <Trash2Icon />
-            Delete permanently
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      {!selectionMode && (
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              {/* Suffix: tombol bundar datar. Mouse: muncul saat hover/fokus;
+                  layar sentuh: selalu tampil. */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                disabled={busy}
+                aria-label={`Session actions ${title}`}
+                className="relative z-10 shrink-0 rounded-full text-muted-foreground transition-opacity pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100"
+              >
+                <MoreHorizontalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {running ? (
+                <DropdownMenuItem onSelect={onStop}>
+                  <SquareIcon />
+                  Stop
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem onSelect={onStart}>
+                  <PlayIcon />
+                  Start
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive" onSelect={onDelete}>
+                <Trash2Icon />
+                Delete permanently
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+        </>
+      )}
     </div>
   );
 }
 
-/** Placeholder daftar Session saat memuat — menjaga tinggi konten. */
+/** Placeholder daftar Session saat memuat — bentuk boxed list yang sama. */
 export function SessionListSkeleton() {
   return (
-    <div className="flex flex-col" aria-hidden>
-      {[0, 1, 2].map((i) => (
-        <div key={i} className="flex items-center gap-3.5 py-3">
-          <Skeleton className="size-2 shrink-0 rounded-full" />
-          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-            <Skeleton className="h-4 w-48" />
-            <Skeleton className="h-3 w-32" />
+    <div className="flex flex-col gap-2.5" aria-hidden>
+      <div className="flex flex-col gap-1.5 px-1">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-3 w-36" />
+      </div>
+      <div className="flex flex-col divide-y overflow-hidden rounded-xl border bg-card">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="flex min-h-14 items-center gap-3 px-4 py-2.5">
+            <Skeleton className="size-[18px] shrink-0 rounded" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <Skeleton className="h-4" style={{ width: `${55 - i * 10}%` }} />
+              <Skeleton className="h-3 w-40" />
+            </div>
           </div>
-          <Skeleton className="h-3 w-16" />
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }