kcg-code 0.1.0 → 0.2.1

package/src/lib/__tests__/project-overview.test.ts

@@ -11,6 +11,7 @@ import {
   buildProjectOverviews,
   filterProjectOverviews,
   formatRelativeTime,
+  RECENT_SESSION_LIMIT,
   totalRunningSessions,
 } from "../project-overview";
 
@@ -63,6 +64,20 @@ describe("buildProjectOverviews", () => {
     expect(only?.lastActivityAt).toBe(7_000);
   });
 
+  test("recentSessions: maksimal RECENT_SESSION_LIMIT, terbaru di depan", () => {
+    const sessions = [
+      session("s1", "p1", "stopped", 1_000),
+      session("s2", "p1", "running", 4_000),
+      session("s3", "p1", "stopped", 2_000),
+      session("s4", "p1", "stopped", 3_000),
+    ];
+    const [only] = buildProjectOverviews([project("p1", "alpha", 0)], sessions);
+    expect(only?.recentSessions.map((s) => s.id)).toEqual(
+      ["s2", "s4", "s3"].slice(0, RECENT_SESSION_LIMIT),
+    );
+    expect(only?.lastSession?.id).toBe("s2");
+  });
+
   test("urutan: aktivitas terbaru di atas", () => {
     const projects = [
       project("p1", "alpha", 1_000),

package/src/lib/__tests__/routes.test.ts

@@ -107,8 +107,8 @@ describe("rute skills", () => {
 describe("rute settings", () => {
   test("settingsPath & parseRoute", () => {
     expect(settingsPath()).toBe("/settings");
-    expect(parseRoute("/settings")).toEqual({ name: "settings", section: "profile" });
-    expect(parseRoute("/settings/")).toEqual({ name: "settings", section: "profile" });
+    expect(parseRoute("/settings")).toEqual({ name: "settings", section: "profile", root: true });
+    expect(parseRoute("/settings/")).toEqual({ name: "settings", section: "profile", root: true });
     expect(parseRoute("/settings/x")).toEqual({ name: "not-found" });
     expect(parseRoute("/settings/security/x")).toEqual({ name: "not-found" });
   });

package/src/lib/__tests__/session-selection.test.ts

@@ -0,0 +1,41 @@
+/**
+ * Unit test selection mode daftar Session (src/lib/session-selection.ts).
+ */
+import { describe, expect, test } from "bun:test";
+import {
+  describeSelection,
+  pluralSessions,
+  pruneSelection,
+  toggleSelection,
+} from "../session-selection";
+
+describe("toggleSelection", () => {
+  test("menambah lalu membuang id tanpa memutasi input", () => {
+    const empty = new Set<string>();
+    const one = toggleSelection(empty, "a");
+    expect([...one]).toEqual(["a"]);
+    expect(empty.size).toBe(0);
+    expect([...toggleSelection(one, "a")]).toEqual([]);
+  });
+});
+
+describe("pruneSelection", () => {
+  test("membuang id yang Session-nya sudah tidak ada", () => {
+    const selected = new Set(["a", "b", "c"]);
+    expect([...pruneSelection(selected, [{ id: "a" }, { id: "c" }])]).toEqual(["a", "c"]);
+  });
+
+  test("tidak ada yang dibuang -> Set yang sama (hindari render ulang)", () => {
+    const selected = new Set(["a"]);
+    expect(pruneSelection(selected, [{ id: "a" }, { id: "b" }])).toBe(selected);
+  });
+});
+
+describe("describeSelection / pluralSessions", () => {
+  test("teks ringkas", () => {
+    expect(describeSelection(0, 5)).toBe("Tap sessions to select them");
+    expect(describeSelection(3, 7)).toBe("3 of 7 selected");
+    expect(pluralSessions(1)).toBe("1 session");
+    expect(pluralSessions(4)).toBe("4 sessions");
+  });
+});

package/src/lib/__tests__/skill-installs.test.ts

@@ -17,6 +17,7 @@ function job(over: Partial<InstallJob> = {}): InstallJob {
     projectName: "Proj",
     source: "a/b",
     skillId: "c",
+    agentTypes: ["opencode"],
     status: "running",
     error: null,
     refreshed: null,

package/src/lib/__tests__/skills-catalog.test.ts

@@ -8,8 +8,8 @@ import type { Project } from "@/types";
 import {
   formatInstalls,
   githubOwner,
-  installedProjectSkillNames,
-  isInstalled,
+  installedAgentsFor,
+  mergeInstalledSkills,
   resolveSkillsProject,
   visibleInstalledSkills,
 } from "../skills-catalog";
@@ -45,12 +45,40 @@ describe("deteksi terpasang", () => {
     url: "",
   });
 
-  test("hanya skill sumber project yang dihitung, case-insensitive", () => {
-    const names = installedProjectSkillNames(skills);
-    expect([...names]).toEqual(["find-skills"]);
-    expect(isInstalled(reg("FIND-SKILLS"), names)).toBe(true);
-    expect(isInstalled(reg("other", "find-skills"), names)).toBe(true);
-    expect(isInstalled(reg("global-one"), names)).toBe(false);
+  test("mergeInstalledSkills: gabung per source + nama, catat agent", () => {
+    const merged = mergeInstalledSkills({
+      opencode: skills,
+      "claude-code": [
+        {
+          name: "Find-Skills",
+          description: "From CC",
+          location: "/p/.claude/x",
+          source: "project",
+        },
+        { name: "cc-only", description: null, location: "/p/.claude/y", source: "project" },
+      ],
+    });
+    expect(merged.map((s) => [s.name, s.source, s.agents])).toEqual([
+      ["builtin", "builtin", ["opencode"]],
+      ["cc-only", "project", ["claude-code"]],
+      ["find-skills", "project", ["opencode", "claude-code"]],
+      ["Global-One", "global", ["opencode"]],
+    ]);
+    // Deskripsi kosong diisi dari agent lain.
+    expect(merged.find((s) => s.name === "find-skills")?.description).toBe("From CC");
+  });
+
+  test("installedAgentsFor: hanya sumber project, case-insensitive", () => {
+    const merged = mergeInstalledSkills({
+      opencode: skills,
+      "claude-code": [skills[0] as SkillInfo],
+    });
+    expect(installedAgentsFor(reg("FIND-SKILLS"), merged)).toEqual(["opencode", "claude-code"]);
+    expect(installedAgentsFor(reg("other", "find-skills"), merged)).toEqual([
+      "opencode",
+      "claude-code",
+    ]);
+    expect(installedAgentsFor(reg("global-one"), merged)).toEqual([]);
   });
 });
 

package/src/lib/agent-types.ts

@@ -0,0 +1,49 @@
+/**
+ * Tipe CLI_Agent yang bisa dipilih di UI (backend Session).
+ *
+ * - `opencode`    : server headless `opencode serve`.
+ * - `claude-code` : Claude Code lewat Claude Agent SDK (ikut settings user).
+ */
+import type { AgentType } from "@/types";
+
+export const AGENT_TYPES: readonly AgentType[] = ["opencode", "claude-code"];
+
+export const AGENT_TYPE_LABELS: Record<AgentType, string> = {
+  opencode: "OpenCode",
+  "claude-code": "Claude Code",
+};
+
+/**
+ * Agent terakhir yang dipakai untuk membuat Session (composer homepage &
+ * dialog New Session), diingat per perangkat. Kunci lama dipertahankan agar
+ * pilihan yang sudah tersimpan tetap terbaca.
+ */
+const PREFERRED_AGENT_KEY = "kcg-home-agent-type";
+
+/** Agent pilihan terakhir; default `opencode` (juga saat storage tak tersedia). */
+export function readPreferredAgentType(): AgentType {
+  try {
+    const saved =
+      typeof localStorage === "undefined" ? null : localStorage.getItem(PREFERRED_AGENT_KEY);
+    return saved === "claude-code" ? "claude-code" : "opencode";
+  } catch {
+    return "opencode";
+  }
+}
+
+/** Simpan agent pilihan; diam saja bila storage tak tersedia (mode privat). */
+export function storePreferredAgentType(agentType: AgentType): void {
+  try {
+    localStorage.setItem(PREFERRED_AGENT_KEY, agentType);
+  } catch {
+    // Pilihan tetap berlaku untuk kunjungan ini.
+  }
+}
+
+/**
+ * Query string `?agent=` untuk daftar model/agent Project. opencode tanpa
+ * query (default server) agar URL lama tidak berubah.
+ */
+export function agentQuery(agentType: AgentType): string {
+  return agentType === "claude-code" ? "?agent=claude-code" : "";
+}

package/src/lib/project-extensions.ts

@@ -2,12 +2,14 @@
  * Helper tampilan panel samping halaman Project (MCP & skill) — logika murni
  * tanpa DOM, dipisah agar dapat diuji `bun test`.
  */
+import { AGENT_TYPES } from "@/lib/agent-types";
 import type {
   McpServerInfo,
   McpStatus,
   SkillInfo,
   SkillSource,
 } from "@/server/services/opencode-client";
+import type { AgentType } from "@/types";
 
 /** Label status MCP untuk UI. */
 export const MCP_STATUS_LABEL: Record<McpStatus, string> = {
@@ -36,6 +38,66 @@ export function describeMcpSummary(servers: readonly McpServerInfo[]): string {
   return `${connected} of ${servers.length} connected`;
 }
 
+/** Urutan perhatian status MCP: yang bermasalah lebih dulu. */
+const MCP_ATTENTION: Record<McpStatus, number> = {
+  failed: 0,
+  needs_auth: 1,
+  needs_client_registration: 1,
+  connected: 2,
+  unknown: 3,
+  disabled: 4,
+};
+
+/** Satu MCP server (per nama) beserta statusnya di tiap agent yang memakainya. */
+export interface McpServerEntry {
+  name: string;
+  /** Status per agent; hanya agent yang mengonfigurasi server ini. */
+  byAgent: Partial<Record<AgentType, McpServerInfo>>;
+  /** Agent pemakai, urut `AGENT_TYPES`. */
+  agents: AgentType[];
+  /** Status paling butuh perhatian di antara agent (untuk ikon & urutan). */
+  status: McpStatus;
+}
+
+/**
+ * Gabungkan daftar MCP per agent menjadi satu daftar per nama server,
+ * terurut: bermasalah dulu, lalu nama. Murni — diuji.
+ */
+export function mergeMcpServers(
+  byAgent: Partial<Record<AgentType, readonly McpServerInfo[]>>,
+): McpServerEntry[] {
+  const merged = new Map<string, McpServerEntry>();
+  for (const agent of AGENT_TYPES) {
+    for (const server of byAgent[agent] ?? []) {
+      const entry = merged.get(server.name) ?? {
+        name: server.name,
+        byAgent: {},
+        agents: [],
+        status: server.status,
+      };
+      entry.byAgent[agent] = server;
+      entry.agents.push(agent);
+      if (MCP_ATTENTION[server.status] < MCP_ATTENTION[entry.status]) entry.status = server.status;
+      merged.set(server.name, entry);
+    }
+  }
+  return [...merged.values()].sort(
+    (a, b) => MCP_ATTENTION[a.status] - MCP_ATTENTION[b.status] || a.name.localeCompare(b.name),
+  );
+}
+
+/**
+ * Ringkasan header seksi MCP gabungan: berapa server yang tersambung di
+ * setidaknya satu agent ("1 of 2 connected").
+ */
+export function describeMcpEntries(entries: readonly McpServerEntry[]): string {
+  if (entries.length === 0) return "None configured";
+  const connected = entries.filter((e) =>
+    Object.values(e.byAgent).some((s) => s?.status === "connected"),
+  ).length;
+  return `${connected} of ${entries.length} connected`;
+}
+
 /** Label asal skill. */
 export const SKILL_SOURCE_LABEL: Record<SkillSource, string> = {
   project: "This project",
@@ -43,17 +105,17 @@ export const SKILL_SOURCE_LABEL: Record<SkillSource, string> = {
   builtin: "Built-in",
 };
 
-export interface SkillGroup {
+export interface SkillGroup<T extends SkillInfo = SkillInfo> {
   source: SkillSource;
   label: string;
-  skills: SkillInfo[];
+  skills: T[];
 }
 
 /**
  * Kelompokkan skill per asal: Project dulu (paling relevan), lalu global,
  * lalu bawaan. Kelompok kosong dibuang; urutan dalam kelompok dipertahankan.
  */
-export function groupSkills(skills: readonly SkillInfo[]): SkillGroup[] {
+export function groupSkills<T extends SkillInfo>(skills: readonly T[]): SkillGroup<T>[] {
   const order: SkillSource[] = ["project", "global", "builtin"];
   return order
     .map((source) => ({
@@ -65,7 +127,7 @@ export function groupSkills(skills: readonly SkillInfo[]): SkillGroup[] {
 }
 
 /** Filter skill berdasarkan kata kunci (nama atau deskripsi, case-insensitive). */
-export function filterSkills(skills: readonly SkillInfo[], query: string): SkillInfo[] {
+export function filterSkills<T extends SkillInfo>(skills: readonly T[], query: string): T[] {
   const q = query.trim().toLowerCase();
   if (q === "") return [...skills];
   return skills.filter(

package/src/lib/project-overview.ts

@@ -22,6 +22,11 @@ export interface ProjectOverview {
    * "Lanjutkan"; `null` bila Project belum punya Session.
    */
   lastSession: Session | null;
+  /**
+   * Hingga `RECENT_SESSION_LIMIT` Session terbaru (`updatedAt` menurun) —
+   * daftar "lanjutkan" di bawah composer homepage.
+   */
+  recentSessions: Session[];
   /**
    * Waktu aktivitas terakhir: `updatedAt` Session terbaru, atau `createdAt`
    * Project bila belum ada Session. Dipakai untuk urutan daftar.
@@ -29,6 +34,9 @@ export interface ProjectOverview {
   lastActivityAt: number;
 }
 
+/** Jumlah Session terbaru yang dibawa tiap `ProjectOverview`. */
+export const RECENT_SESSION_LIMIT = 3;
+
 /**
  * Gabungkan Project dengan Session-nya, terurut dari aktivitas terbaru.
  * Session dengan `projectId` yang tidak dikenal diabaikan.
@@ -46,19 +54,17 @@ export function buildProjectOverviews(
 
   const overviews = projects.map((project) => {
     const own = byProject.get(project.id) ?? [];
-    let lastSession: Session | null = null;
-    let runningCount = 0;
-    for (const session of own) {
-      if (session.status === "running") runningCount += 1;
-      if (lastSession === null || session.updatedAt > lastSession.updatedAt) {
-        lastSession = session;
-      }
-    }
+    const runningCount = own.filter((s) => s.status === "running").length;
+    const recentSessions = [...own]
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+      .slice(0, RECENT_SESSION_LIMIT);
+    const lastSession = recentSessions[0] ?? null;
     return {
       project,
       sessionCount: own.length,
       runningCount,
       lastSession,
+      recentSessions,
       lastActivityAt: lastSession?.updatedAt ?? project.createdAt,
     };
   });

package/src/lib/routes.ts

@@ -14,12 +14,21 @@ export type AppRoute =
   | { name: "project"; projectId: string }
   | { name: "session"; projectId: string; sessionId: string }
   | { name: "skills" }
-  | { name: "settings"; section: SettingsSection; anchor?: string }
+  | {
+      name: "settings";
+      section: SettingsSection;
+      anchor?: string;
+      /**
+       * `/settings` tanpa sub-halaman. Layar lebar: tampil sebagai Profile
+       * (daftar navigasi ada di samping); layar sempit: daftar bagian.
+       */
+      root?: true;
+    }
   | { name: "not-found" };
 
 /**
- * Sub-halaman Settings (`/settings/:section`). Tab yang tampil hanya
- * profile/security/workspace/remote; `about` dibuka dari ikon di judul.
+ * Sub-halaman Settings (`/settings/:section`): empat bagian pengaturan +
+ * `about` (tampil terpisah di akhir navigasi, bukan pengaturan).
  */
 export const SETTINGS_SECTIONS = ["profile", "security", "workspace", "remote", "about"] as const;
 export type SettingsSection = (typeof SETTINGS_SECTIONS)[number];
@@ -84,7 +93,7 @@ export function parseRoute(pathname: string): AppRoute {
   if (segments.length === 0) return { name: "projects" };
   if (segments[0] === "skills" && segments.length === 1) return { name: "skills" };
   if (segments[0] === "settings") {
-    if (segments.length === 1) return { name: "settings", section: "profile" };
+    if (segments.length === 1) return { name: "settings", section: "profile", root: true };
     const section = segments[1];
     if (segments.length === 2 && section !== undefined && isSettingsSection(section)) {
       return { name: "settings", section };

package/src/lib/session-selection.ts

@@ -0,0 +1,40 @@
+/**
+ * Selection mode daftar Session (bulk delete) — logika murni tanpa DOM,
+ * dipisah agar dapat diuji `bun test` (pola `lib/session-summary.ts`).
+ *
+ * Pilihan disimpan sebagai `Set` id; setiap perubahan menghasilkan Set baru
+ * (immutable) agar React me-render ulang.
+ */
+
+/** Tambah / buang satu id dari pilihan. */
+export function toggleSelection(selected: ReadonlySet<string>, id: string): Set<string> {
+  const next = new Set(selected);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return next;
+}
+
+/**
+ * Buang id yang Session-nya sudah tidak ada (dihapus di tab/perangkat lain).
+ * Mengembalikan Set yang SAMA bila tidak ada yang dibuang, agar pemanggil
+ * bisa menghindari render ulang.
+ */
+export function pruneSelection(
+  selected: ReadonlySet<string>,
+  sessions: readonly { id: string }[],
+): ReadonlySet<string> {
+  const alive = new Set(sessions.map((s) => s.id));
+  const next = new Set([...selected].filter((id) => alive.has(id)));
+  return next.size === selected.size ? selected : next;
+}
+
+/** Deskripsi grup saat selection mode ("3 of 7 selected"). */
+export function describeSelection(count: number, total: number): string {
+  if (count === 0) return "Tap sessions to select them";
+  return `${count} of ${total} selected`;
+}
+
+/** "1 session" / "3 sessions". */
+export function pluralSessions(count: number): string {
+  return `${count} session${count === 1 ? "" : "s"}`;
+}

package/src/lib/skill-installs.ts

@@ -21,6 +21,7 @@
 import { useSyncExternalStore } from "react";
 import { ApiError, apiFetch } from "@/lib/api";
 import type { InstallJob, InstallJobLog } from "@/server/services/skill-install-jobs";
+import type { AgentType } from "@/types";
 
 /** Interval polling saat job berjalan. */
 const POLL_MS = 700;
@@ -231,10 +232,11 @@ export async function startInstall(
   projectId: string,
   source: string,
   skill: string,
+  agentTypes: readonly AgentType[] = ["opencode"],
 ): Promise<InstallJob> {
   const res = await apiFetch(`/api/projects/${projectId}/skills/install`, {
     method: "POST",
-    body: JSON.stringify({ source, skill }),
+    body: JSON.stringify({ source, skill, agents: agentTypes }),
   });
   const { job } = (await res.json()) as { job: InstallJob };
   upsert(newEntry(job, true));

package/src/lib/skills-catalog.ts

@@ -2,9 +2,10 @@
  * Helper tampilan katalog skill (skills.sh) di halaman Skills — logika murni
  * tanpa DOM, dipisah agar dapat diuji `bun test`.
  */
+import { AGENT_TYPES } from "@/lib/agent-types";
 import type { SkillInfo } from "@/server/services/opencode-client";
 import type { AuditStatus, RegistrySkill } from "@/server/services/skills-registry";
-import type { Project } from "@/types";
+import type { AgentType, Project } from "@/types";
 
 /** Kunci localStorage Project terakhir yang dipilih di halaman Skills. */
 export const LAST_SKILLS_PROJECT_KEY = "kcg-skills-project";
@@ -46,13 +47,65 @@ export function githubOwner(source: string): string | null {
   return owner;
 }
 
+/** Skill terpasang + agent yang memuatnya (gabungan daftar per agent). */
+export interface InstalledSkill extends SkillInfo {
+  /** Urut sesuai `AGENT_TYPES`; minimal satu. */
+  agents: AgentType[];
+}
+
+/**
+ * Gabungkan daftar skill per agent menjadi satu daftar: skill dengan asal
+ * (`source`) dan nama (case-insensitive) sama dianggap satu skill yang
+ * dimuat beberapa agent. Deskripsi diambil dari daftar pertama yang punya.
+ */
+export function mergeInstalledSkills(
+  byAgent: Partial<Record<AgentType, readonly SkillInfo[]>>,
+): InstalledSkill[] {
+  const merged = new Map<string, InstalledSkill>();
+  for (const agent of AGENT_TYPES) {
+    for (const skill of byAgent[agent] ?? []) {
+      const key = `${skill.source}:${skill.name.toLowerCase()}`;
+      const hit = merged.get(key);
+      if (!hit) {
+        merged.set(key, { ...skill, agents: [agent] });
+        continue;
+      }
+      if (!hit.agents.includes(agent)) hit.agents.push(agent);
+      if (hit.description === null) hit.description = skill.description;
+    }
+  }
+  return [...merged.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Agent yang sudah memuat skill katalog ini dari folder Project (cocokkan
+ * nama folder / nama). Skill global sengaja tidak dihitung: instalasi di
+ * halaman ini memasang ke folder Project.
+ */
+export function installedAgentsFor(
+  skill: RegistrySkill,
+  installed: readonly InstalledSkill[],
+): AgentType[] {
+  const names = new Set([skill.skillId.toLowerCase(), skill.name.toLowerCase()]);
+  const agents = new Set<AgentType>();
+  for (const s of installed) {
+    if (s.source === "project" && names.has(s.name.toLowerCase())) {
+      for (const a of s.agents) agents.add(a);
+    }
+  }
+  return AGENT_TYPES.filter((a) => agents.has(a));
+}
+
 /**
  * Skill terpasang yang relevan untuk halaman Skills: tanpa bawaan opencode,
  * Project dulu lalu global, difilter kata kunci (nama / deskripsi).
  */
-export function visibleInstalledSkills(skills: readonly SkillInfo[], query: string): SkillInfo[] {
+export function visibleInstalledSkills<T extends SkillInfo>(
+  skills: readonly T[],
+  query: string,
+): T[] {
   const q = query.trim().toLowerCase();
-  const match = (s: SkillInfo) =>
+  const match = (s: T) =>
     q === "" || s.name.toLowerCase().includes(q) || (s.description ?? "").toLowerCase().includes(q);
   return [
     ...skills.filter((s) => s.source === "project" && match(s)),
@@ -71,20 +124,6 @@ export function formatInstalls(n: number): string {
   return fmt(n / 1_000_000, "M");
 }
 
-/**
- * Nama skill yang sudah terpasang di Project (sumber `project`). Skill global
- * sengaja tidak dihitung: instalasi di halaman ini memasang ke folder Project,
- * jadi skill global bernama sama tetap boleh dipasang per Project.
- */
-export function installedProjectSkillNames(skills: readonly SkillInfo[]): Set<string> {
-  return new Set(skills.filter((s) => s.source === "project").map((s) => s.name.toLowerCase()));
-}
-
-/** Apakah skill katalog sudah terpasang di Project (cocokkan nama folder / nama). */
-export function isInstalled(skill: RegistrySkill, installed: ReadonlySet<string>): boolean {
-  return installed.has(skill.skillId.toLowerCase()) || installed.has(skill.name.toLowerCase());
-}
-
 /** Label & gaya ringkasan audit keamanan. */
 export const AUDIT_LABEL: Record<AuditStatus, string> = {
   pass: "Passed",

package/src/pages/projects/ProjectDetailPage.tsx

@@ -74,22 +74,23 @@ export function ProjectDetailPage({ projectId }: ProjectDetailPageProps) {
           </div>
           <SessionListSkeleton />
         </div>
-        {/* Sama dengan ProjectSidePanel: tumpukan kartu seksi. */}
-        <div className="hidden flex-col gap-3 self-start lg:flex">
-          {[2, 1, 3].map((rows, i) => (
+        {/* Sama dengan ProjectSidePanel: grup (judul + deskripsi) berisi
+            boxed list. */}
+        <div className="hidden flex-col gap-6 self-start lg:flex">
+          {[1, 2, 3].map((rows, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
-            <div key={i} className="overflow-hidden rounded-xl border bg-card">
-              <div className="flex items-center gap-3 px-3.5 py-3">
-                <Skeleton className="size-8 rounded-lg" />
-                <div className="flex flex-1 flex-col gap-1.5">
-                  <Skeleton className="h-3.5 w-24" />
-                  <Skeleton className="h-3 w-16" />
-                </div>
+            <div key={i} className="flex flex-col gap-2.5">
+              <div className="flex flex-col gap-1.5 px-1">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-3 w-40" />
               </div>
-              <div className="flex flex-col gap-2 border-t px-3.5 py-3">
+              <div className="flex flex-col divide-y overflow-hidden rounded-xl border bg-card">
                 {Array.from({ length: rows }, (_, j) => (
                   // biome-ignore lint/suspicious/noArrayIndexKey: placeholder statis
-                  <Skeleton key={j} className="h-3.5" style={{ width: `${80 - j * 15}%` }} />
+                  <div key={j} className="flex min-h-14 flex-col justify-center gap-1.5 px-4">
+                    <Skeleton className="h-4" style={{ width: `${60 - j * 12}%` }} />
+                    <Skeleton className="h-3 w-1/3" />
+                  </div>
                 ))}
               </div>
             </div>