kcg-code 0.0.0-stage → 0.2.0

package/src/components/sessions/AttachmentTile.tsx

@@ -0,0 +1,161 @@
+/**
+ * Tampilan satu lampiran non-gambar: ikon berwarna sesuai jenis file + nama
+ * + keterangan singkat (ekstensi · ukuran). Dipakai composer (lampiran
+ * pending & animasi plate) dan bubble pesan user (tautan unduh).
+ */
+import {
+  FileArchiveIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  ImageIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { attachmentKind, fileExtension, formatBytes } from "@/lib/attachments";
+import { cn } from "@/lib/utils";
+
+const CODE_EXT = new Set([
+  "js",
+  "mjs",
+  "cjs",
+  "jsx",
+  "ts",
+  "mts",
+  "cts",
+  "tsx",
+  "vue",
+  "svelte",
+  "astro",
+  "py",
+  "rb",
+  "php",
+  "java",
+  "kt",
+  "kts",
+  "scala",
+  "go",
+  "rs",
+  "c",
+  "h",
+  "cc",
+  "cpp",
+  "hpp",
+  "cs",
+  "swift",
+  "m",
+  "dart",
+  "lua",
+  "pl",
+  "r",
+  "jl",
+  "ex",
+  "exs",
+  "erl",
+  "hs",
+  "clj",
+  "sql",
+  "sh",
+  "bash",
+  "zsh",
+  "fish",
+  "ps1",
+  "bat",
+  "html",
+  "htm",
+  "css",
+  "scss",
+  "sass",
+  "less",
+  "json",
+  "jsonc",
+  "yaml",
+  "yml",
+  "toml",
+  "xml",
+  "graphql",
+  "gql",
+  "proto",
+  "tf",
+  "hcl",
+  "nix",
+  "svg",
+]);
+const SHEET_EXT = new Set(["csv", "tsv", "xls", "xlsx", "ods", "numbers"]);
+const ARCHIVE_EXT = new Set(["zip", "tar", "gz", "tgz", "bz2", "xz", "7z", "rar", "zst"]);
+
+interface Glyph {
+  Icon: LucideIcon;
+  /** Kelas warna kotak ikon (latar tipis + warna ikon). */
+  tone: string;
+}
+
+export function fileGlyph(mime: string, filename: string): Glyph {
+  const ext = fileExtension(filename);
+  const kind = attachmentKind(mime, filename);
+  if (kind === "image")
+    return { Icon: ImageIcon, tone: "bg-sky-500/15 text-sky-600 dark:text-sky-400" };
+  if (kind === "pdf")
+    return { Icon: FileTextIcon, tone: "bg-red-500/15 text-red-600 dark:text-red-400" };
+  if (SHEET_EXT.has(ext)) {
+    return {
+      Icon: FileSpreadsheetIcon,
+      tone: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+    };
+  }
+  if (CODE_EXT.has(ext)) {
+    return { Icon: FileCodeIcon, tone: "bg-violet-500/15 text-violet-600 dark:text-violet-400" };
+  }
+  if (ARCHIVE_EXT.has(ext)) {
+    return { Icon: FileArchiveIcon, tone: "bg-amber-500/15 text-amber-700 dark:text-amber-400" };
+  }
+  if (mime.startsWith("audio/")) {
+    return { Icon: FileAudioIcon, tone: "bg-pink-500/15 text-pink-600 dark:text-pink-400" };
+  }
+  if (mime.startsWith("video/")) {
+    return { Icon: FileVideoIcon, tone: "bg-indigo-500/15 text-indigo-600 dark:text-indigo-400" };
+  }
+  if (kind === "text") return { Icon: FileTextIcon, tone: "bg-muted text-muted-foreground" };
+  return { Icon: FileIcon, tone: "bg-muted text-muted-foreground" };
+}
+
+/** "PDF · 1.2 MB" — ekstensi (atau "File") + ukuran bila diketahui. */
+export function fileMeta(filename: string, size?: number): string {
+  const ext = fileExtension(filename);
+  const label = ext ? ext.toUpperCase() : "File";
+  return size !== undefined && size > 0 ? `${label} · ${formatBytes(size)}` : label;
+}
+
+export function FileTile({
+  filename,
+  mime,
+  size,
+  className,
+}: {
+  filename: string;
+  mime: string;
+  size?: number;
+  className?: string;
+}) {
+  const { Icon, tone } = fileGlyph(mime, filename);
+  return (
+    <span
+      className={cn(
+        "flex min-w-0 items-center gap-2.5 rounded-lg border bg-card px-2.5 text-left",
+        className,
+      )}
+    >
+      <span className={cn("flex size-10 shrink-0 items-center justify-center rounded-md", tone)}>
+        <Icon className="size-5" aria-hidden />
+      </span>
+      <span className="flex min-w-0 flex-col">
+        <span className="truncate text-[13px] leading-5 font-medium">{filename}</span>
+        <span className="truncate text-[11.5px] leading-4 text-muted-foreground">
+          {fileMeta(filename, size)}
+        </span>
+      </span>
+    </span>
+  );
+}

package/src/components/sessions/CodeBlock.tsx

@@ -0,0 +1,107 @@
+/**
+ * Blok kode Markdown dengan syntax highlighting (Shiki) + tombol salin.
+ *
+ * - Teks polos dirender LANGSUNG (tanpa menunggu), lalu diganti token
+ *   berwarna begitu grammar siap — tidak ada kedipan kosong / layout shift.
+ * - Saat streaming, isi blok berubah tiap token baru. Highlight di-debounce
+ *   singkat; selama itu token lama tetap tampil untuk bagian yang sudah
+ *   ada dan sisanya teks polos.
+ * - Token dirender sebagai `<span>` React (bukan innerHTML), warna lewat CSS
+ *   variable `--shiki-light` / `--shiki-dark` (lihat `.shiki-code` di
+ *   `styles/globals.css`).
+ */
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { type CodeToken, highlightCode, resolveLang } from "@/lib/highlight";
+import { cn } from "@/lib/utils";
+
+export interface CodeBlockProps {
+  code: string;
+  /** Info-string fence (`ts`, `language-tsx`, …). */
+  language: string | null;
+}
+
+/** Jeda highlight ulang saat isi berubah (streaming). */
+const DEBOUNCE_MS = 120;
+
+export function CodeBlock({ code, language }: CodeBlockProps) {
+  const lang = resolveLang(language);
+  const [tokens, setTokens] = useState<{ code: string; lines: CodeToken[][] } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!lang) return;
+    let cancelled = false;
+    const id = setTimeout(() => {
+      void highlightCode(code, lang).then((lines) => {
+        if (!cancelled && lines) setTokens({ code, lines });
+      });
+    }, DEBOUNCE_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(id);
+    };
+  }, [code, lang]);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* Clipboard butuh konteks aman; abaikan diam-diam. */
+    }
+  };
+
+  // Token masih cocok dengan awal kode (streaming menambah di akhir):
+  // tampilkan token + sisa teks polos. Isi berubah di tengah -> teks polos.
+  const fresh = tokens && code.startsWith(tokens.code) ? tokens : null;
+  const tail = fresh ? code.slice(fresh.code.length) : code;
+  const label = language?.replace(/^language-/, "") || "text";
+
+  return (
+    // Tanpa border: blok dibedakan dari teks hanya lewat latar & sudut besar
+    // (ala Gemini). Header tanpa garis pemisah, menyatu dengan isi.
+    <div className="my-3 max-w-full overflow-hidden rounded-2xl bg-muted/70 first:mt-0 last:mb-0 dark:bg-muted/50">
+      <div className="flex items-center justify-between gap-2 pt-4 pr-4 pl-6 sm:pl-7">
+        <span className="text-[13px] font-medium text-foreground/80 uppercase">{label}</span>
+        <button
+          type="button"
+          onClick={() => void copy()}
+          aria-label={copied ? "Copied" : "Copy code"}
+          title={copied ? "Copied" : "Copy code"}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors outline-none hover:bg-foreground/10 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40"
+        >
+          {copied ? (
+            <CheckIcon className="size-4" aria-hidden />
+          ) : (
+            <CopyIcon className="size-4" aria-hidden />
+          )}
+        </button>
+      </div>
+      <pre
+        className={cn(
+          // Padding lega, line-height rapat (1.45) agar kode padat terbaca.
+          "overflow-x-auto px-6 pt-3 pb-6 font-mono sm:px-7 text-[14px] leading-[1.45]",
+          fresh && "shiki-code",
+        )}
+      >
+        <code>
+          {fresh?.lines.map((line, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: baris = posisi dalam kode
+            <span key={i}>
+              {line.map((t, j) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: token = posisi dalam baris
+                <span key={j} style={t.style}>
+                  {t.content}
+                </span>
+              ))}
+              {i < fresh.lines.length - 1 ? "\n" : ""}
+            </span>
+          ))}
+          {tail}
+        </code>
+      </pre>
+    </div>
+  );
+}

package/src/components/sessions/ComposerActionSheet.tsx

@@ -0,0 +1,96 @@
+/**
+ * Sheet aksi mobile di composer (lampirkan file + ganti agent mode).
+ *
+ * Susunan: judul kecil "Add to message" + aksi lampiran sebagai baris
+ * (ikon, label, keterangan) — lalu grup "Mode" berisi pilihan agent ala
+ * radio. Mode pembantu (compaction/title/summary) dilipat di "More modes".
+ */
+import { ChevronRightIcon, PaperclipIcon } from "lucide-react";
+import { AgentModeList } from "@/components/sessions/AgentModeList";
+import { SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import type { UseAgentPickerResult } from "@/hooks/useAgentPicker";
+
+export interface ComposerActionSheetProps {
+  /** Input tidak boleh dipakai (Session mati / sibuk) — aksi ikut terkunci. */
+  disabled: boolean;
+  /** Buka file picker (sheet ditutup oleh pemanggil). */
+  onPickImage: () => void;
+  agentPicker: UseAgentPickerResult;
+  activeAgent: string | null;
+  onPickAgent: (name: string | null) => void;
+}
+
+export function ComposerActionSheet({
+  disabled,
+  onPickImage,
+  agentPicker,
+  activeAgent,
+  onPickAgent,
+}: ComposerActionSheetProps) {
+  return (
+    <SheetContent
+      side="bottom"
+      className="max-h-[80dvh] gap-0 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+    >
+      <SheetHeader className="sr-only">
+        <SheetTitle>Message options</SheetTitle>
+        <SheetDescription>Attach files or choose how the agent works.</SheetDescription>
+      </SheetHeader>
+
+      <div className="flex min-h-0 flex-col gap-4 overflow-y-auto overscroll-contain px-3 pt-1 pb-1">
+        {/* Lampiran */}
+        <section aria-labelledby="sheet-attach" className="flex flex-col gap-1">
+          <h3 id="sheet-attach" className="px-3 pb-1 text-xs font-medium text-muted-foreground">
+            Add to message
+          </h3>
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={onPickImage}
+            className="flex min-h-14 w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-colors outline-none hover:bg-muted/60 focus-visible:ring-[3px] focus-visible:ring-ring/50 active:bg-muted disabled:opacity-50"
+          >
+            <span
+              className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-400"
+              aria-hidden
+            >
+              <PaperclipIcon className="size-[18px]" />
+            </span>
+            <span className="flex min-w-0 flex-1 flex-col">
+              <span className="text-[15px] leading-5">Photos and files</span>
+              <span className="text-[13px] leading-snug text-muted-foreground">
+                Images, documents, code, and more
+              </span>
+            </span>
+            <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+          </button>
+        </section>
+
+        <div className="mx-3 border-t" />
+
+        {/* Mode agent */}
+        <section aria-labelledby="sheet-mode" className="flex flex-col gap-1">
+          <div className="flex flex-col px-3 pb-1">
+            <h3 id="sheet-mode" className="text-xs font-medium text-muted-foreground">
+              Mode
+            </h3>
+            <p className="text-[12px] text-muted-foreground/80">
+              How the agent handles your next message
+            </p>
+          </div>
+          <div>
+            <AgentModeList
+              variant="sheet"
+              agents={agentPicker.agents}
+              loading={agentPicker.loading}
+              error={agentPicker.error}
+              activeAgent={activeAgent}
+              saving={agentPicker.saving}
+              disabled={disabled}
+              onPick={onPickAgent}
+            />
+          </div>
+        </section>
+      </div>
+    </SheetContent>
+  );
+}

package/src/components/sessions/ConfirmDeleteProjectDialog.tsx

@@ -0,0 +1,80 @@
+/**
+ * Konfirmasi hapus Project (beserta seluruh Session-nya) dari halaman daftar
+ * Session. Server membersihkan Session terlebih dahulu; direktori kerja di
+ * filesystem tidak disentuh.
+ */
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+export interface ConfirmDeleteProjectDialogProps {
+  open: boolean;
+  /** Tutup dialog (ditolak bila aksi sedang berjalan). */
+  onOpenChange: (open: boolean) => void;
+  projectName: string;
+  /** Jumlah Session milik project — disertakan ke teks peringatan. */
+  sessionTotal: number;
+  deleting: boolean;
+  /** Jalankan penghapusan Project. */
+  onConfirm: () => void;
+}
+
+export function ConfirmDeleteProjectDialog({
+  open,
+  onOpenChange,
+  projectName,
+  sessionTotal,
+  deleting,
+  onConfirm,
+}: ConfirmDeleteProjectDialogProps) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!deleting) onOpenChange(next);
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete project “{projectName}”?</AlertDialogTitle>
+          <AlertDialogDescription>
+            {sessionTotal > 0
+              ? `${sessionTotal} session${sessionTotal === 1 ? "" : "s"} of this project will also be permanently deleted, including their conversation history on the opencode server. `
+              : ""}
+            The working folder on the server is not deleted — only the project registration in KCG
+            Code. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            disabled={deleting}
+          >
+            {deleting ? (
+              <>
+                <Spinner data-icon="inline-start" />
+                Deleting…
+              </>
+            ) : (
+              "Delete project"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/sessions/ConfirmSessionDeleteDialog.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { pluralSessions } from "@/lib/session-selection";
+
+export interface ConfirmSessionDeleteDialogProps {
+  open: boolean;
+  /** Tutup dialog (ditolak bila aksi sedang berjalan). */
+  onOpenChange: (open: boolean) => void;
+  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({
+  open,
+  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}
+      onOpenChange={(next) => {
+        if (!deleting) onOpenChange(next);
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {many ? `Delete ${pluralSessions(shownCount)}?` : "Delete this session?"}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {many ? "Their conversation histories" : "The conversation history"} will also be
+            permanently deleted from the agent. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            disabled={deleting}
+          >
+            {deleting ? (
+              <>
+                <Spinner data-icon="inline-start" />
+                {progress && progress.total > 1
+                  ? `Deleting ${Math.min(progress.done + 1, progress.total)} of ${progress.total}…`
+                  : "Deleting…"}
+              </>
+            ) : many ? (
+              `Delete ${pluralSessions(shownCount)}`
+            ) : (
+              "Delete permanently"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}