kcg-code 0.1.0 → 0.2.0

package/src/components/sessions/AgentLogo.tsx

@@ -0,0 +1,42 @@
+/**
+ * Logo backend Session (OpenCode / Claude Code) untuk pemilih agent.
+ *
+ * - OpenCode : tanda "frame" dari favicon resmi opencode.ai, digambar ulang
+ *   dengan `currentColor` agar mengikuti tema terang/gelap.
+ * - Claude   : tanda Claude (simple-icons) dengan warna brand #D97757.
+ */
+import { cn } from "@/lib/utils";
+import type { AgentType } from "@/types";
+
+const CLAUDE_PATH =
+  "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z";
+
+export function AgentLogo({ agentType, className }: { agentType: AgentType; className?: string }) {
+  if (agentType === "claude-code") {
+    return (
+      <svg
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        className={cn("size-4 shrink-0", className)}
+        fill="#D97757"
+      >
+        <path d={CLAUDE_PATH} />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      viewBox="96 96 320 320"
+      aria-hidden="true"
+      className={cn("size-4 shrink-0", className)}
+      fill="currentColor"
+    >
+      <path d="M320 224V352H192V224H320Z" opacity={0.4} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"
+      />
+    </svg>
+  );
+}

package/src/components/sessions/AgentPicker.tsx

@@ -22,9 +22,12 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Spinner } from "@/components/ui/spinner";
 import { useAgentPicker } from "@/hooks/useAgentPicker";
 import { cn } from "@/lib/utils";
+import type { AgentType } from "@/types";
 
 export interface AgentPickerProps {
   projectId: string;
+  /** Backend Session — Claude Code menawarkan mode permission. */
+  agentType?: AgentType;
   /** null = Session belum ada (composer homepage): pilihan tidak di-PUT. */
   sessionId: string | null;
   /** Agent aktif saat ini; null = default opencode (build). */
@@ -39,6 +42,7 @@ export interface AgentPickerProps {
 
 export function AgentPicker({
   projectId,
+  agentType = "opencode",
   sessionId,
   agent,
   onChanged,
@@ -53,6 +57,7 @@ export function AgentPicker({
       onChanged(name);
       setOpen(false);
     },
+    agentType,
   );
 
   const isPlan = agent?.toLowerCase() === "plan";
@@ -99,14 +104,18 @@ export function AgentPicker({
         side="top"
         sideOffset={8}
         collisionPadding={12}
-        className="w-80 p-0"
+        // Tinggi SELURUH popover (header + daftar) dibatasi ruang yang
+        // tersedia (Radix). Bila hanya daftar yang dibatasi, header membuat
+        // popover selalu sedikit melebihi ruang -> floating-ui membalik sisi
+        // atas/bawah, tinggi daftar ikut berubah, dan ResizeObserver berputar
+        // ("ResizeObserver loop completed…") saat "More modes" dibuka.
+        className="flex max-h-[min(26rem,var(--radix-popover-content-available-height))] w-80 flex-col overflow-hidden p-0"
       >
-        <div className="border-b px-3 pt-2.5 pb-2">
+        <div className="shrink-0 border-b px-3 pt-2.5 pb-2">
           <p className="text-sm font-medium">Mode</p>
           <p className="text-xs text-muted-foreground">How the agent handles your next message</p>
         </div>
-        {/* Tinggi menyesuaikan ruang di atas trigger (Radix), dibatasi 22rem. */}
-        <div className="max-h-[min(22rem,var(--radix-popover-content-available-height))] overflow-y-auto overscroll-contain p-1.5 [scrollbar-width:thin]">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5 [scrollbar-width:thin]">
           <AgentModeList
             agents={agents}
             loading={loading}

package/src/components/sessions/ConfirmSessionDeleteDialog.tsx

@@ -1,9 +1,11 @@
 /**
- * Konfirmasi hapus Session permanen (dipakai header chat `SessionView` dan
- * menu baris `SessionList`). Menghapus juga riwayat percakapan di server
- * opencode — tidak bisa dibatalkan.
+ * Konfirmasi hapus Session permanen (dipakai header chat `SessionView`, menu
+ * baris `SessionList`, dan hapus massal selection mode). Menghapus juga
+ * riwayat percakapan di agent (opencode / Claude Code) — tidak bisa
+ * dibatalkan. `count` > 1 = hapus massal; `progress` menampilkan kemajuan.
  */
 
+import { useState } from "react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,6 +17,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Spinner } from "@/components/ui/spinner";
+import { pluralSessions } from "@/lib/session-selection";
 
 export interface ConfirmSessionDeleteDialogProps {
   open: boolean;
@@ -23,6 +26,10 @@ export interface ConfirmSessionDeleteDialogProps {
   deleting: boolean;
   /** Jalankan penghapusan (engine). */
   onConfirm: () => void;
+  /** Jumlah Session yang dihapus (default 1). */
+  count?: number;
+  /** Kemajuan hapus massal. */
+  progress?: { done: number; total: number } | null;
 }
 
 export function ConfirmSessionDeleteDialog({
@@ -30,7 +37,14 @@ export function ConfirmSessionDeleteDialog({
   onOpenChange,
   deleting,
   onConfirm,
+  count = 1,
+  progress = null,
 }: ConfirmSessionDeleteDialogProps) {
+  // Jumlah dibekukan selama animasi tutup: setelah hapus massal pilihan
+  // sudah kosong, tapi teks dialog yang memudar tidak boleh berganti.
+  const [shownCount, setShownCount] = useState(count);
+  if (open && count !== shownCount) setShownCount(count);
+  const many = shownCount > 1;
   return (
     <AlertDialog
       open={open}
@@ -40,10 +54,12 @@ export function ConfirmSessionDeleteDialog({
     >
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete this session?</AlertDialogTitle>
+          <AlertDialogTitle>
+            {many ? `Delete ${pluralSessions(shownCount)}?` : "Delete this session?"}
+          </AlertDialogTitle>
           <AlertDialogDescription>
-            The conversation history on the opencode server will also be permanently deleted. This
-            action cannot be undone.
+            {many ? "Their conversation histories" : "The conversation history"} will also be
+            permanently deleted from the agent. This action cannot be undone.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -59,8 +75,12 @@ export function ConfirmSessionDeleteDialog({
             {deleting ? (
               <>
                 <Spinner data-icon="inline-start" />
-                Deleting…
+                {progress && progress.total > 1
+                  ? `Deleting ${Math.min(progress.done + 1, progress.total)} of ${progress.total}…`
+                  : "Deleting…"}
               </>
+            ) : many ? (
+              `Delete ${pluralSessions(shownCount)}`
             ) : (
               "Delete permanently"
             )}

package/src/components/sessions/ContextPanel.tsx

@@ -1,21 +1,23 @@
 /**
- * Kartu konteks Session — keadaan kerja agent, MENGAPUNG di margin kanan.
- * Tidak mengambil ruang layout, jadi percakapan & input tidak bergeser saat
- * kartu dibuka/ditutup.
+ * Kartu konteks Session — keadaan kerja agent, sebagai kolom di kanan
+ * percakapan (desktop). Kolom ini ikut tata letak: chat menyempit saat kartu
+ * dibuka, sehingga pesan & input tidak pernah tertutup kartu.
  *
  * Susunan (dari yang paling sering dilirik ke yang paling jarang):
  * - **Environment** : perubahan file (+/-), cabang git, status push/pull.
- * - **MCP**         : server MCP Project; ringkasan "x of y connected" di
- *                     judul supaya status terbaca tanpa membuka bagiannya.
  * - **Task list**   : `todowrite` agent + progres "selesai / total".
+ * - **MCP**         : server MCP; ringkasan "x/y connected" di judul. Yang
+ *                     gagal & tersambung tampil per baris; yang perlu login
+ *                     (mis. puluhan konektor claude.ai) dan yang tidak aktif
+ *                     DILIPAT jadi satu baris "N need sign-in" agar tidak
+ *                     menenggelamkan bagian lain.
  * - **Reference**   : file project yang DIBACA agent (bukan yang ditulis),
  *                     terbaru di atas; 8 pertama tampil, sisanya "Show N more".
  *
- * Pola UX:
- * - Tiap bagian = judul yang bisa dilipat + ringkasan di kanan judul, jadi
- *   kartu tetap informatif walau semua bagian dilipat.
- * - Tanpa judul kartu & tanpa kotak di dalam: judul tiap bagian (warna
- *   solid) menjadi penanda, dipisah garis tipis antar bagian.
+ * Pola UX (gaya libadwaita):
+ * - Tiap bagian = judul yang bisa dilipat + ringkasan di kanan judul, isi
+ *   berupa "boxed list" (kartu membulat, baris berpemisah) di atas latar
+ *   kartu yang lebih gelap — seperti AdwPreferencesGroup.
  * - Status diwakili titik berwarna + label, bukan warna saja (a11y).
  * - Buka/tutup: `ContextPanelTrigger` (hamburger) HILANG saat kartu terbuka;
  *   penutupnya tombol X di kartu. Esc juga menutup.
@@ -97,21 +99,16 @@ function ContextSections({
 }: Omit<ContextPanelProps, "onClose"> & { reserveClose?: boolean }) {
   if (loading && context === null) return <CardSkeleton />;
   return (
-    <div
-      className={cn(
-        "flex flex-col divide-y [&>*]:py-2.5 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0.5",
-        reserveClose && "[&>*:first-child>button]:pe-7",
-      )}
-    >
+    <div className={cn("flex flex-col gap-4", reserveClose && "[&>*:first-child>button]:pe-7")}>
       <EnvironmentSection context={context} />
-      <McpSection servers={context?.mcp ?? []} live={context?.live ?? false} />
       <TaskSection todos={context?.todos ?? []} live={context?.live ?? false} />
+      <McpSection servers={context?.mcp ?? []} live={context?.live ?? false} />
       <ReferenceSection references={references} />
     </div>
   );
 }
 
-/** Kartu desktop: mengapung di margin kanan. */
+/** Kartu desktop: kolom kanan, berdampingan dengan percakapan. */
 export function ContextPanel({ context, references, loading, onClose }: ContextPanelProps) {
   // Esc menutup kartu (pola sama dengan popover/sheet aplikasi).
   useEffect(() => {
@@ -128,7 +125,9 @@ export function ContextPanel({ context, references, loading, onClose }: ContextP
       initial={{ opacity: 0, x: 10 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ type: "spring", visualDuration: 0.25, bounce: 0.1 }}
-      className="pointer-events-auto relative flex max-h-full flex-col overflow-hidden rounded-2xl border bg-popover shadow-lg"
+      // Latar kartu = latar jendela (lebih gelap), boxed list di atasnya
+      // memakai `bg-card` — kontras ala AdwPreferencesPage.
+      className="relative flex max-h-full flex-col overflow-hidden rounded-2xl border bg-background shadow-xs"
     >
       {/* Tanpa judul kartu: judul tiap bagian sudah menjadi penanda. Tombol
           tutup mengapung di pojok kanan atas, sejajar judul bagian pertama. */}
@@ -144,7 +143,7 @@ export function ContextPanel({ context, references, loading, onClose }: ContextP
         <XIcon />
       </Button>
 
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pt-1.5 pb-2 [scrollbar-width:thin]">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2.5 pt-2 pb-3 [scrollbar-width:thin]">
         <ContextSections context={context} references={references} loading={loading} reserveClose />
       </div>
     </m.aside>
@@ -224,29 +223,34 @@ function EnvironmentSection({ context }: { context: SessionContext | null }) {
   );
 }
 
-/** Urutan tampil MCP: yang bermasalah dulu agar langsung terlihat. */
-const MCP_ORDER: Record<McpServerState["status"], number> = {
-  failed: 0,
-  needs_auth: 1,
-  needs_client_registration: 2,
-  connected: 3,
-  unknown: 4,
-  disabled: 5,
-};
+/** Status yang "perlu login" — dilipat jadi satu baris bila lebih dari satu. */
+const NEEDS_SIGN_IN: McpServerState["status"][] = ["needs_auth", "needs_client_registration"];
 
 function McpSection({ servers, live }: { servers: McpServerState[]; live: boolean }) {
   const connected = servers.filter((s) => s.status === "connected").length;
-  const hasProblem = servers.some((s) => MCP_ORDER[s.status] <= 2);
-  const sorted = [...servers].sort(
-    (a, b) => MCP_ORDER[a.status] - MCP_ORDER[b.status] || a.name.localeCompare(b.name),
-  );
+  const failed = servers.filter((s) => s.status === "failed").length;
+  const byName = (a: McpServerState, b: McpServerState) => a.name.localeCompare(b.name);
+  const signIn = servers.filter((s) => NEEDS_SIGN_IN.includes(s.status)).sort(byName);
+  const inactive = servers
+    .filter((s) => s.status === "disabled" || s.status === "unknown")
+    .sort(byName);
+  // Baris individual: gagal (paling atas) lalu tersambung. Kelompok berisi
+  // satu server tetap tampil sebagai baris biasa (tidak perlu dilipat).
+  const individual = [
+    ...servers.filter((s) => s.status === "failed").sort(byName),
+    ...servers.filter((s) => s.status === "connected").sort(byName),
+    ...(signIn.length === 1 ? signIn : []),
+    ...(inactive.length === 1 ? inactive : []),
+  ];
 
   return (
     <Section
       title="MCP"
       summary={
         servers.length > 0 ? (
-          <span className={cn(hasProblem && "text-amber-700 dark:text-amber-400")}>
+          // Hanya kegagalan yang diberi warna peringatan — konektor yang
+          // belum login itu normal, bukan masalah.
+          <span className={cn(failed > 0 && "text-amber-700 dark:text-amber-400")}>
             {connected}/{servers.length} connected
           </span>
         ) : undefined
@@ -256,30 +260,104 @@ function McpSection({ servers, live }: { servers: McpServerState[]; live: boolea
         <Empty>{live ? "No MCP servers configured" : "Start the session to see MCP servers"}</Empty>
       ) : (
         <Box>
-          {sorted.map((server) => (
-            <Row
-              key={server.name}
-              icon={<PlugIcon />}
-              label={server.name}
-              // Pesan error lengkap terbaca lewat `title` (tanpa memanjangkan baris).
-              title={server.error ?? undefined}
-              value={
-                <span className="flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
-                  <span
-                    aria-hidden
-                    className={cn("size-1.5 rounded-full", MCP_STATUS_DOT[server.status])}
-                  />
-                  {MCP_STATUS_LABEL[server.status]}
-                </span>
-              }
-            />
+          {individual.map((server) => (
+            <McpRow key={server.name} server={server} />
           ))}
+          {signIn.length > 1 && (
+            <McpGroupRow
+              label={`${signIn.length} need sign-in`}
+              dotClass={MCP_STATUS_DOT.needs_auth}
+              servers={signIn}
+            />
+          )}
+          {inactive.length > 1 && (
+            <McpGroupRow
+              label={`${inactive.length} inactive`}
+              dotClass={MCP_STATUS_DOT.disabled}
+              servers={inactive}
+            />
+          )}
         </Box>
       )}
     </Section>
   );
 }
 
+/** Satu server MCP: nama + status (titik + label); error di baris kedua. */
+function McpRow({ server }: { server: McpServerState }) {
+  return (
+    <Row
+      icon={<PlugIcon />}
+      label={server.name}
+      hint={server.error ?? undefined}
+      hintTone={server.error ? "error" : undefined}
+      // Pesan error lengkap terbaca lewat `title` (baris kedua terpotong).
+      title={server.error ?? undefined}
+      value={<StatusText status={server.status} />}
+    />
+  );
+}
+
+function StatusText({ status }: { status: McpServerState["status"] }) {
+  return (
+    <span className="flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
+      <span aria-hidden className={cn("size-1.5 rounded-full", MCP_STATUS_DOT[status])} />
+      {MCP_STATUS_LABEL[status]}
+    </span>
+  );
+}
+
+/**
+ * Baris kelompok yang bisa dibuka (AdwExpanderRow): "17 need sign-in" —
+ * isinya nama server, tanpa status berulang (sudah di judul baris).
+ */
+function McpGroupRow({
+  label,
+  dotClass,
+  servers,
+}: {
+  label: string;
+  dotClass: string;
+  servers: McpServerState[];
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex min-h-9 w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[12.5px] outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/50"
+      >
+        <span aria-hidden className="flex w-3.5 shrink-0 justify-center">
+          <span className={cn("size-1.5 rounded-full", dotClass)} />
+        </span>
+        <span className="min-w-0 flex-1 truncate leading-5 text-muted-foreground">{label}</span>
+        <ChevronDownIcon
+          aria-hidden
+          className={cn(
+            "size-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
+            open && "rotate-180",
+          )}
+        />
+      </button>
+      {open && (
+        <ul className="border-t bg-muted/30 py-1">
+          {servers.map((s) => (
+            <li
+              key={s.name}
+              title={s.error ?? s.name}
+              className="truncate px-2.5 py-1 ps-8 text-[12px] leading-5 text-muted-foreground"
+            >
+              {s.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
 function TaskSection({ todos, live }: { todos: TodoItem[]; live: boolean }) {
   const done = todos.filter((t) => t.status.toLowerCase() === "completed").length;
   const active = todos.filter((t) => t.status.toLowerCase() !== "cancelled").length;
@@ -357,13 +435,13 @@ function ReferenceSection({ references }: { references: FileReference[] }) {
               type="button"
               onClick={() => setShowAll((v) => !v)}
               aria-expanded={showAll}
-              className="mt-0.5 flex w-full items-center gap-1 rounded-md px-1 py-1 text-left text-[12px] text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40"
+              className="mt-1.5 flex w-full items-center justify-center gap-1 rounded-lg py-1.5 text-[12px] text-muted-foreground outline-none transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40"
             >
+              {showAll ? "Show less" : `Show ${hidden} more`}
               <ChevronDownIcon
                 aria-hidden
                 className={cn("size-3 transition-transform duration-200", showAll && "rotate-180")}
               />
-              {showAll ? "Show less" : `Show ${hidden} more`}
             </button>
           )}
         </>
@@ -432,9 +510,13 @@ function Section({
   );
 }
 
-/** Daftar baris polos (tanpa kotak/garis — hemat ruang). */
+/** Boxed list (libadwaita): kartu membulat, baris dipisah garis tipis. */
 function Box({ children }: { children: ReactNode }) {
-  return <ul className="flex flex-col">{children}</ul>;
+  return (
+    <ul className="flex flex-col divide-y overflow-hidden rounded-xl border bg-card shadow-xs">
+      {children}
+    </ul>
+  );
 }
 
 /** Satu baris dalam `Box`: ikon + label (+ petunjuk kecil) + nilai di kanan. */
@@ -442,6 +524,7 @@ function Row({
   icon,
   label,
   hint,
+  hintTone,
   value,
   muted,
   mono,
@@ -450,13 +533,18 @@ function Row({
   icon: ReactNode;
   label: string;
   hint?: string;
+  /** Warna baris kedua (mis. pesan error). */
+  hintTone?: "error";
   value?: ReactNode;
   muted?: boolean;
   mono?: boolean;
   title?: string;
 }) {
   return (
-    <li title={title} className="flex min-h-8 min-w-0 items-center gap-2 px-1 py-1 text-[12.5px]">
+    <li
+      title={title}
+      className="flex min-h-9 min-w-0 items-center gap-2 px-2.5 py-1.5 text-[12.5px]"
+    >
       <span
         aria-hidden
         className="flex shrink-0 items-center text-muted-foreground [&>svg]:size-3.5"
@@ -474,7 +562,14 @@ function Row({
           {label}
         </span>
         {hint && (
-          <span className="truncate text-[11px] leading-4 text-muted-foreground">{hint}</span>
+          <span
+            className={cn(
+              "truncate text-[11px] leading-4",
+              hintTone === "error" ? "text-destructive/90" : "text-muted-foreground",
+            )}
+          >
+            {hint}
+          </span>
         )}
       </span>
       {value !== undefined && <span className="shrink-0">{value}</span>}
@@ -508,7 +603,7 @@ function TodoRow({ todo }: { todo: TodoItem }) {
   const running = status === "in_progress";
 
   return (
-    <li className="flex min-w-0 items-start gap-2 px-1 py-1 text-[12.5px] leading-snug">
+    <li className="flex min-w-0 items-start gap-2 px-2.5 py-2 text-[12.5px] leading-snug">
       {/* Ikon status dekoratif; statusnya dibacakan lewat teks sr-only di
           bawah (aria-label pada span/svg biasa tidak dibaca pembaca layar). */}
       <span aria-hidden className="mt-0.5 flex shrink-0 items-center">
@@ -537,8 +632,13 @@ function TodoRow({ todo }: { todo: TodoItem }) {
   );
 }
 
+/** Keadaan kosong — tetap di dalam boxed list agar bentuk bagian konsisten. */
 function Empty({ children }: { children: ReactNode }) {
-  return <p className="px-1 py-0.5 text-[12px] leading-snug text-muted-foreground">{children}</p>;
+  return (
+    <p className="rounded-xl border border-dashed px-2.5 py-2.5 text-[12px] leading-snug text-muted-foreground">
+      {children}
+    </p>
+  );
 }
 
 function CardSkeleton() {