kcg-code 0.0.0-stage → 0.1.0

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,72 @@
+/**
+ * Konfirmasi hapus Session permanen (dipakai header chat `SessionView` dan
+ * menu baris `SessionList`). Menghapus juga riwayat percakapan di server
+ * opencode — tidak bisa dibatalkan.
+ */
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+export interface ConfirmSessionDeleteDialogProps {
+  open: boolean;
+  /** Tutup dialog (ditolak bila aksi sedang berjalan). */
+  onOpenChange: (open: boolean) => void;
+  deleting: boolean;
+  /** Jalankan penghapusan (engine). */
+  onConfirm: () => void;
+}
+
+export function ConfirmSessionDeleteDialog({
+  open,
+  onOpenChange,
+  deleting,
+  onConfirm,
+}: ConfirmSessionDeleteDialogProps) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!deleting) onOpenChange(next);
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete this session?</AlertDialogTitle>
+          <AlertDialogDescription>
+            The conversation history on the opencode server will also be permanently deleted. 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 permanently"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}