kcg-code 0.0.0-stage → 0.1.0

package/src/components/sessions/AgentModeList.tsx

@@ -0,0 +1,265 @@
+/**
+ * Daftar opsi agent (mode) opencode — dipakai di dalam `PopoverContent`
+ * (`AgentPicker`, desktop) maupun langsung di `SheetContent` (mobile, tanpa
+ * popover bersarang). Setiap baris menampilkan ikon + nama + deskripsi
+ * singkat, supaya jelas ini adalah *pemilihan mode*, bukan tombol biasa.
+ *
+ * Kedua varian: nama dikapitalisasi, ikon dalam kotak, deskripsi 1 baris,
+ * dan agent pembantu (tanpa deskripsi / mode `subagent`, mis. compaction /
+ * title / summary) dilipat ke "More modes" agar pilihan utama tidak tenggelam.
+ * - `popover` (desktop): baris ringkas, centang di kanan.
+ * - `sheet` (mobile): baris lebih tinggi untuk jempol, indikator radio.
+ */
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CompassIcon,
+  HammerIcon,
+  ListTreeIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import type { AgentOption } from "@/server/services/opencode-client";
+
+/** Ikon per agent: khusus dulu (build/plan), sisanya fallback per mode. */
+function agentIcon(name: string, mode: AgentOption["mode"]) {
+  const n = name.toLowerCase();
+  if (n === "build") return HammerIcon;
+  if (n === "plan") return ListTreeIcon;
+  return mode === "primary" ? CompassIcon : ListTreeIcon;
+}
+
+/** Agent utama = primary/all yang punya deskripsi; sisanya pembantu. */
+function isMainAgent(a: AgentOption): boolean {
+  return a.mode !== "subagent" && Boolean(a.description);
+}
+
+function titleCase(name: string): string {
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+export interface AgentModeListProps {
+  agents: AgentOption[] | null;
+  loading: boolean;
+  error: string | null;
+  /** Agent aktif saat ini; null = default opencode (build). */
+  activeAgent: string | null;
+  saving?: boolean;
+  disabled?: boolean;
+  onPick: (name: string | null) => void;
+  className?: string;
+  variant?: "popover" | "sheet";
+}
+
+export function AgentModeList({
+  agents,
+  loading,
+  error,
+  activeAgent,
+  saving = false,
+  disabled = false,
+  onPick,
+  className,
+  variant = "popover",
+}: AgentModeListProps) {
+  const sheet = variant === "sheet";
+  const all = agents ?? [];
+  const main = all.filter(isMainAgent);
+  const extra = all.filter((a) => !isMainAgent(a));
+  const [expanded, setExpanded] = useState(false);
+  // Agent aktif ada di "More modes" -> selalu terbuka agar pilihan terlihat.
+  const activeInExtra = extra.some((a) => a.name === activeAgent);
+  const showExtra = expanded || activeInExtra;
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2.5 text-sm text-muted-foreground">
+        <Spinner className="size-3.5" />
+        Loading agents…
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="px-3 py-2.5 text-sm text-destructive">{error}</div>;
+  }
+
+  const row = (key: string, opts: RowProps) => (
+    <ModeRow key={key} {...opts} sheet={sheet} disabled={disabled || saving} />
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-0.5", className)}>
+      {row("__default", {
+        icon: CompassIcon,
+        label: "Default",
+        description: "Let KCG Code choose (usually Build)",
+        selected: activeAgent === null,
+        onClick: () => onPick(null),
+      })}
+      {main.map((a) =>
+        row(a.name, {
+          icon: agentIcon(a.name, a.mode),
+          label: titleCase(a.name),
+          description: a.description,
+          selected: a.name === activeAgent,
+          accent: a.name.toLowerCase() === "plan",
+          onClick: () => onPick(a.name),
+        }),
+      )}
+
+      {extra.length > 0 && (
+        <>
+          <button
+            type="button"
+            onClick={() => !activeInExtra && setExpanded((v) => !v)}
+            aria-expanded={showExtra}
+            className="mt-1 flex w-full items-center gap-1.5 rounded-lg px-3 py-2.5 text-left text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          >
+            <ChevronDownIcon
+              className={cn("size-3.5 transition-transform", !showExtra && "-rotate-90")}
+              aria-hidden
+            />
+            More modes
+            <span className="tabular-nums opacity-70">{extra.length}</span>
+          </button>
+          {showExtra &&
+            extra.map((a) =>
+              row(a.name, {
+                icon: agentIcon(a.name, a.mode),
+                label: titleCase(a.name),
+                description: a.description,
+                selected: a.name === activeAgent,
+                compact: true,
+                onClick: () => onPick(a.name),
+              }),
+            )}
+        </>
+      )}
+
+      {all.length === 0 && (
+        <div className="px-3 py-2.5 text-sm text-muted-foreground">No agents found.</div>
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  icon: LucideIcon;
+  label: string;
+  description: string | null;
+  selected: boolean;
+  accent?: boolean;
+  /** Baris pembantu di "More modes": lebih pendek. */
+  compact?: boolean;
+  onClick: () => void;
+}
+
+function ModeRow({
+  icon: Icon,
+  label,
+  description,
+  selected,
+  accent,
+  compact,
+  onClick,
+  sheet,
+  disabled,
+}: RowProps & { sheet: boolean; disabled: boolean }) {
+  if (!sheet) {
+    return (
+      <button
+        type="button"
+        aria-pressed={selected}
+        disabled={disabled}
+        onClick={onClick}
+        className={cn(
+          "group/row flex w-full items-center gap-2.5 rounded-lg px-2 text-left transition-colors outline-none",
+          "hover:bg-accent focus-visible:bg-accent disabled:opacity-50",
+          compact ? "min-h-9 py-1.5" : "min-h-12 py-2",
+          selected && "bg-accent/60",
+        )}
+      >
+        <span
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-md",
+            compact ? "size-6" : "size-8",
+            selected
+              ? "bg-primary/15 text-primary dark:bg-primary/25"
+              : accent
+                ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                : "bg-muted text-muted-foreground group-hover/row:bg-background/60",
+          )}
+          aria-hidden
+        >
+          <Icon className={compact ? "size-3.5" : "size-4"} />
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span className={cn("truncate text-sm leading-5", selected && "font-medium")}>
+            {label}
+          </span>
+          {description && !compact && (
+            <span className="truncate text-xs text-muted-foreground" title={description}>
+              {description}
+            </span>
+          )}
+        </span>
+        <CheckIcon
+          className={cn("size-4 shrink-0 text-primary", !selected && "invisible")}
+          aria-hidden
+        />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-xl px-3 text-left transition-colors outline-none",
+        "active:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50",
+        compact ? "min-h-11 py-2" : "min-h-14 py-2.5",
+        selected ? "bg-primary/10 dark:bg-primary/15" : "hover:bg-muted/60",
+      )}
+    >
+      <span
+        className={cn(
+          "flex shrink-0 items-center justify-center rounded-lg",
+          compact ? "size-7" : "size-9",
+          selected
+            ? "bg-primary/15 text-primary dark:bg-primary/25"
+            : accent
+              ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+              : "bg-muted text-muted-foreground",
+        )}
+        aria-hidden
+      >
+        <Icon className={compact ? "size-3.5" : "size-[18px]"} />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className={cn("text-[15px] leading-5", selected && "font-medium")}>{label}</span>
+        {description && !compact && (
+          <span className="line-clamp-1 text-[13px] leading-snug text-muted-foreground">
+            {description}
+          </span>
+        )}
+      </span>
+      <span
+        className={cn(
+          "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+          selected
+            ? "border-primary bg-primary text-primary-foreground"
+            : "border-muted-foreground/40",
+        )}
+        aria-hidden
+      >
+        {selected && <CheckIcon className="size-3" strokeWidth={3} />}
+      </span>
+    </button>
+  );
+}

package/src/components/sessions/AgentPicker.tsx

@@ -0,0 +1,123 @@
+/**
+ * Pemilih agent (mode) opencode untuk composer Session — padanan tombol
+ * ganti mode build/plan di TUI opencode (Tab).
+ *
+ * - Trigger: tombol kecil di toolbar BAWAH input prompt (ala aplikasi chat);
+ *   menampilkan nama agent aktif + ikon. `plan` ditandai khusus (ikon +
+ *   warna berbeda) supaya user sadar sedang "mode aman".
+ * - Daftar agent dari `GET /api/projects/:id/agents` (dimuat saat popover
+ *   pertama dibuka — server headless tidak di-spawn kalau tidak dipakai).
+ * - Perubahan via `PUT /api/sessions/:id` (`agent`), berlaku di prompt
+ *   berikutnya tanpa restart. Opsi "Default" mengirim `agent: null`.
+ *
+ * Fetch + pick logic ada di `useAgentPicker` dan daftar opsi di
+ * `AgentModeList` — keduanya dipakai ulang langsung (tanpa popover) di Sheet
+ * aksi mobile (`SessionView`).
+ */
+import { ChevronDownIcon, CompassIcon, HammerIcon, ListTreeIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { AgentModeList } from "@/components/sessions/AgentModeList";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
+import { useAgentPicker } from "@/hooks/useAgentPicker";
+import { cn } from "@/lib/utils";
+
+export interface AgentPickerProps {
+  projectId: string;
+  /** null = Session belum ada (composer homepage): pilihan tidak di-PUT. */
+  sessionId: string | null;
+  /** Agent aktif saat ini; null = default opencode (build). */
+  agent: string | null;
+  /** Dipanggil setelah server menerima perubahan agent. */
+  onChanged: (agent: string | null) => void;
+  /** Nonaktifkan picker (mis. Session tidak running / WS sibuk). */
+  disabled?: boolean;
+  /** Override tampilan trigger, mis. `w-full justify-start` saat ditaruh di dalam Sheet aksi mobile. */
+  className?: string;
+}
+
+export function AgentPicker({
+  projectId,
+  sessionId,
+  agent,
+  onChanged,
+  disabled = false,
+  className,
+}: AgentPickerProps) {
+  const [open, setOpen] = useState(false);
+  const { agents, loading, saving, error, load, pick } = useAgentPicker(
+    projectId,
+    sessionId,
+    (name) => {
+      onChanged(name);
+      setOpen(false);
+    },
+  );
+
+  const isPlan = agent?.toLowerCase() === "plan";
+  const label = agent ? agent.charAt(0).toUpperCase() + agent.slice(1) : "Default";
+  const ActiveIcon = isPlan
+    ? ListTreeIcon
+    : agent?.toLowerCase() === "build"
+      ? HammerIcon
+      : CompassIcon;
+
+  // Daftar dimuat saat popover pertama dibuka (lazy, ala ModelPicker).
+  useEffect(() => {
+    if (open) load();
+  }, [open, load]);
+
+  return (
+    <Popover open={open} onOpenChange={(o) => setOpen(o)}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={disabled}
+          aria-label={`Agent mode: ${label}`}
+          title="Change mode"
+          className={cn(
+            "group h-8 shrink-0 gap-1.5 rounded-full border border-transparent px-2.5 text-[13px] font-medium text-muted-foreground",
+            "hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
+            isPlan &&
+              "border-amber-500/30 bg-amber-500/10 text-amber-700 hover:bg-amber-500/15 hover:text-amber-700 data-[state=open]:bg-amber-500/15 data-[state=open]:text-amber-700 dark:text-amber-400 dark:hover:text-amber-400 dark:data-[state=open]:text-amber-400",
+            className,
+          )}
+        >
+          {saving ? <Spinner className="size-4" /> : <ActiveIcon className="size-3.5" />}
+          <span className="inline max-w-24 truncate sm:max-w-32">{label}</span>
+          <ChevronDownIcon
+            className="size-3.5 opacity-60 transition-transform group-data-[state=open]:rotate-180"
+            aria-hidden
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        side="top"
+        sideOffset={8}
+        collisionPadding={12}
+        className="w-80 p-0"
+      >
+        <div className="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]">
+          <AgentModeList
+            agents={agents}
+            loading={loading}
+            error={error}
+            activeAgent={agent}
+            saving={saving}
+            disabled={disabled}
+            onPick={(name) => void pick(name)}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/sessions/AssistantTurn.tsx

@@ -0,0 +1,145 @@
+/**
+ * Render satu turn assistant (Satu kesatuan respon model).
+ *
+ * Isi: satu atau lebih blok "Thought process" collapsible (kluster steps
+ * reasoning/tool per round — `ThoughtProcessBlock.tsx`), diikuti jawaban
+ * teks / error, lalu footer waktu (+ durasi thinking) setelah turn selesai.
+ */
+import { CircleAlertIcon } from "lucide-react";
+import { MarkdownContent } from "@/components/sessions/MarkdownContent";
+import { CopyMessageButton } from "@/components/sessions/MessageActions";
+import { Bubble, BubbleContent } from "@/components/ui/bubble";
+import { Message, MessageContent, MessageFooter } from "@/components/ui/message";
+import { useSmoothText } from "@/hooks/useSmoothText";
+import type { CollapsibleState } from "@/lib/collapsible";
+import { formatDuration, formatTime } from "@/lib/time";
+import { partText, turnBlocks, turnSegments, turnThoughtDuration } from "@/lib/turns";
+import { cn } from "@/lib/utils";
+import type { AssistantTurnGroup } from "@/types";
+import { ThoughtProcessBlock } from "./ThoughtProcessBlock";
+
+/**
+ * Markdown jawaban yang sedang di-stream: teks dikejar halus per frame
+ * (`useSmoothText`) agar tidak melompat per potongan delta. Hanya blok
+ * terakhir dari turn yang masih berjalan yang dianimasikan; riwayat & blok
+ * yang sudah lewat langsung tampil penuh.
+ */
+function StreamingMarkdown({ text, streaming }: { text: string; streaming: boolean }) {
+  const shown = useSmoothText(text, streaming);
+  return <MarkdownContent>{shown}</MarkdownContent>;
+}
+
+/** Model kadang membalas "(empty)" saat tidak ada teks untuk ditampilkan. */
+function isEmptyReply(text: string): boolean {
+  return text.trim().toLowerCase() === "(empty)";
+}
+
+export interface AssistantTurnProps {
+  /** Pesan assistant berurutan dari satu turn balasan model. */
+  group: AssistantTurnGroup;
+  /** Status toggle blok "Thought process" (key `group.id:blockKey`). */
+  collapsible: CollapsibleState;
+  /** Toggle satu blok Thought process. */
+  onToggle: (key: string) => void;
+}
+
+export function AssistantTurn({ group, collapsible, onToggle }: AssistantTurnProps) {
+  const m = group.messages[0];
+  if (!m) return null;
+  const segments = turnSegments(group.messages);
+  const streaming = m.streaming === true || group.messages.some((msg) => msg.streaming === true);
+  const blocks = turnBlocks(segments);
+  // Durasi thinking untuk footer — hanya dihitung setelah turn selesai.
+  const thoughtMs = !streaming ? turnThoughtDuration(group.messages) : null;
+  // Teks jawaban (tanpa thinking/tool) untuk tombol Copy, dipisah paragraf.
+  const answerText = blocks
+    .map((b) =>
+      b.content?.kind === "text" && !isEmptyReply(b.content.text) ? b.content.text.trim() : "",
+    )
+    .filter((t) => t !== "")
+    .join("\n\n");
+
+  return (
+    <Message align="start">
+      <MessageContent>
+        {blocks.map((block, bi) => {
+          const isLastBlock = bi === blocks.length - 1;
+          const hasSteps = block.steps.length > 0;
+          return (
+            <div key={block.key}>
+              {/* Thought process block — pisah per round thinking */}
+              <ThoughtProcessBlock
+                groupId={group.id}
+                blockKey={block.key}
+                steps={block.steps}
+                collapsible={collapsible}
+                onToggle={onToggle}
+                streaming={streaming}
+                isLastBlock={isLastBlock}
+              />
+              {/* Konten teks/error setelah thinking round ini */}
+              {block.content?.kind === "error" && (
+                <div className={cn(hasSteps && "mt-3")}>
+                  <Bubble variant="destructive">
+                    <BubbleContent>
+                      <div className="flex gap-2">
+                        <CircleAlertIcon
+                          className="mt-0.5 size-4 shrink-0"
+                          data-icon="inline-start"
+                        />
+                        <span className="whitespace-pre-wrap">
+                          {partText(block.content.part) ??
+                            "Something went wrong while processing the prompt."}
+                        </span>
+                      </div>
+                    </BubbleContent>
+                  </Bubble>
+                </div>
+              )}
+              {/* Balasan kosong dari model ("(empty)") — tetap tampil sebagai
+                  penanda, tapi kecil & redup agar tidak terbaca sebagai jawaban. */}
+              {block.content?.kind === "text" && isEmptyReply(block.content.text) && (
+                <p className={cn("text-xs text-muted-foreground/70 italic", hasSteps && "mt-2")}>
+                  {block.content.text.trim()}
+                </p>
+              )}
+              {block.content?.kind === "text" &&
+                block.content.text !== "" &&
+                !isEmptyReply(block.content.text) && (
+                  <div className={cn(hasSteps && "mt-3")}>
+                    <Bubble variant="ghost" className="max-w-full">
+                      <BubbleContent className="w-full">
+                        <StreamingMarkdown
+                          text={block.content.text}
+                          streaming={streaming && isLastBlock}
+                        />
+                      </BubbleContent>
+                    </Bubble>
+                  </div>
+                )}
+            </div>
+          );
+        })}
+        {/* Footer: tersembunyi saat streaming, muncul dengan animasi fade +
+            slide dari kanan setelah turn selesai. Format:
+            HH:MM:SS · ● · thoughts Xs */}
+        {!streaming && (
+          <MessageFooter className="gap-1 animate-in fade-in-0 slide-in-from-right-4 duration-500">
+            <span className="text-muted-foreground/80">
+              {formatTime(m.createdAt)}
+              {thoughtMs !== null && (
+                <>
+                  <span className="mx-1.5 text-muted-foreground/40" aria-hidden>
+                    ●
+                  </span>
+                  <span>thoughts {formatDuration(thoughtMs)}</span>
+                </>
+              )}
+            </span>
+            <CopyMessageButton text={answerText} className="ml-1" />
+          </MessageFooter>
+        )}
+      </MessageContent>
+    </Message>
+  );
+}

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>
+  );
+}