@geminilight/mindos 0.6.30 → 0.6.31

package/app/components/TrashPageClient.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { useState, useCallback, useTransition } from 'react';
+import { Trash2, RotateCcw, X, Folder, FileText, Table, AlertTriangle, Loader2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useLocale } from '@/lib/LocaleContext';
+import { restoreFromTrashAction, permanentlyDeleteAction, emptyTrashAction } from '@/lib/actions';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { toast } from '@/lib/toast';
+import type { TrashMeta } from '@/lib/core/trash';
+
+function relativeTimeShort(iso: string): string {
+  const delta = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(delta / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function daysUntil(iso: string): number {
+  return Math.max(0, Math.ceil((new Date(iso).getTime() - Date.now()) / 86400000));
+}
+
+export default function TrashPageClient({ initialItems }: { initialItems: TrashMeta[] }) {
+  const { t } = useLocale();
+  const router = useRouter();
+  const [items, setItems] = useState(initialItems);
+  const [isPending, startTransition] = useTransition();
+  const [confirmEmpty, setConfirmEmpty] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState<TrashMeta | null>(null);
+  const [conflictItem, setConflictItem] = useState<TrashMeta | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const handleRestore = useCallback(async (item: TrashMeta) => {
+    setBusyId(item.id);
+    try {
+      const result = await restoreFromTrashAction(item.id, 'restore');
+      if (result.success) {
+        setItems(prev => prev.filter(i => i.id !== item.id));
+        toast.success(t.trash.restored);
+        router.refresh();
+      } else if (result.conflict) {
+        setConflictItem(item);
+      } else {
+        toast.error(result.error ?? 'Failed to restore');
+      }
+    } finally {
+      setBusyId(null);
+    }
+  }, [t, router]);
+
+  const handleConflictResolve = useCallback(async (mode: 'overwrite' | 'copy') => {
+    if (!conflictItem) return;
+    const result = await restoreFromTrashAction(conflictItem.id, mode);
+    if (result.success) {
+      setItems(prev => prev.filter(i => i.id !== conflictItem.id));
+      toast.success(t.trash.restored);
+      setConflictItem(null);
+      router.refresh();
+    } else {
+      toast.error(result.error ?? 'Failed to restore');
+    }
+  }, [conflictItem, t, router]);
+
+  const handlePermanentDelete = useCallback(async () => {
+    if (!confirmDelete) return;
+    const result = await permanentlyDeleteAction(confirmDelete.id);
+    if (result.success) {
+      setItems(prev => prev.filter(i => i.id !== confirmDelete.id));
+      toast.success(t.trash.deleted);
+    } else {
+      toast.error(result.error ?? 'Failed to delete');
+    }
+    setConfirmDelete(null);
+  }, [confirmDelete, t]);
+
+  const handleEmptyTrash = useCallback(async () => {
+    startTransition(async () => {
+      const result = await emptyTrashAction();
+      if (result.success) {
+        setItems([]);
+        toast.success(t.trash.emptied(result.count ?? 0));
+      } else {
+        toast.error(result.error ?? 'Failed to empty trash');
+      }
+      setConfirmEmpty(false);
+    });
+  }, [t]);
+
+  return (
+    <div className="min-h-screen">
+      <div className="px-4 md:px-6 pt-6 md:pt-8">
+        <div className="content-width xl:mr-[220px] rounded-xl border border-border bg-card px-4 py-3 md:px-5 md:py-4">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
+                <Trash2 size={15} />
+                {t.trash.title}
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t.trash.subtitle}
+              </p>
+              {items.length > 0 && (
+                <div className="mt-2 text-xs text-muted-foreground">
+                  {t.trash.itemCount(items.length)}
+                </div>
+              )}
+            </div>
+            {items.length > 0 && (
+              <button
+                type="button"
+                onClick={() => setConfirmEmpty(true)}
+                disabled={isPending}
+                className="px-2.5 py-1.5 rounded-md text-xs font-medium bg-error/10 text-error hover:bg-error/20 transition-colors disabled:opacity-50"
+              >
+                {t.trash.emptyTrash}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="px-4 md:px-6 py-4 md:py-6">
+        <div className="content-width xl:mr-[220px]">
+          {items.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
+              <Trash2 size={32} className="mx-auto text-muted-foreground/30 mb-3" />
+              <p className="text-sm text-muted-foreground font-display">{t.trash.empty}</p>
+              <p className="text-xs text-muted-foreground/60 mt-1">{t.trash.emptySubtext}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+              {items.map(item => {
+                const days = daysUntil(item.expiresAt);
+                const isExpiring = days <= 3;
+                return (
+                  <div
+                    key={item.id}
+                    className="rounded-xl border border-border bg-card p-4 flex flex-col gap-3 hover:border-border/80 transition-colors"
+                  >
+                    <div className="flex items-start gap-3 min-w-0">
+                      <div className="w-9 h-9 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                        {item.isDirectory
+                          ? <Folder size={16} className="text-muted-foreground" />
+                          : item.fileName.endsWith('.csv')
+                            ? <Table size={16} className="text-success" />
+                            : <FileText size={16} className="text-muted-foreground" />
+                        }
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium text-foreground truncate" title={item.fileName}>
+                          {item.fileName}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate mt-0.5" title={item.originalPath}>
+                          {t.trash.from}: {item.originalPath.split('/').slice(0, -1).join('/') || '/'}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-2xs text-muted-foreground">
+                          {t.trash.deletedAgo(relativeTimeShort(item.deletedAt))}
+                        </span>
+                        <span className={`text-2xs ${isExpiring ? 'text-error' : 'text-muted-foreground/60'}`}>
+                          {isExpiring && <AlertTriangle size={9} className="inline mr-0.5" />}
+                          {t.trash.expiresIn(days)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <button
+                          type="button"
+                          onClick={() => handleRestore(item)}
+                          disabled={busyId === item.id}
+                          className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-success/10 text-success hover:bg-success/20 transition-colors disabled:opacity-50"
+                        >
+                          {busyId === item.id ? <Loader2 size={11} className="animate-spin" /> : <RotateCcw size={11} />}
+                          {t.trash.restore}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setConfirmDelete(item)}
+                          className="p-1 rounded-md text-muted-foreground hover:text-error hover:bg-error/10 transition-colors"
+                          title={t.trash.deletePermanently}
+                        >
+                          <X size={13} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Empty Trash Confirmation */}
+      <ConfirmDialog
+        open={confirmEmpty}
+        title={t.trash.emptyTrash}
+        message={t.trash.emptyTrashConfirm}
+        confirmLabel={t.trash.emptyTrash}
+        cancelLabel={t.export?.cancel ?? 'Cancel'}
+        onConfirm={() => void handleEmptyTrash()}
+        onCancel={() => setConfirmEmpty(false)}
+        variant="destructive"
+      />
+
+      {/* Permanent Delete Confirmation */}
+      <ConfirmDialog
+        open={!!confirmDelete}
+        title={t.trash.deletePermanently}
+        message={confirmDelete ? t.trash.deletePermanentlyConfirm(confirmDelete.fileName) : ''}
+        confirmLabel={t.trash.deletePermanently}
+        cancelLabel={t.export?.cancel ?? 'Cancel'}
+        onConfirm={() => void handlePermanentDelete()}
+        onCancel={() => setConfirmDelete(null)}
+        variant="destructive"
+      />
+
+      {/* Restore Conflict Dialog */}
+      {conflictItem && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+          <div className="bg-card border border-border rounded-xl shadow-xl max-w-sm w-full mx-4 p-5">
+            <div className="flex items-center gap-2 mb-3">
+              <AlertTriangle size={16} className="text-[var(--amber)]" />
+              <h3 className="text-sm font-semibold font-display">{t.trash.restoreConflict}</h3>
+            </div>
+            <p className="text-xs text-muted-foreground mb-4">
+              &quot;{conflictItem.fileName}&quot; — {conflictItem.originalPath}
+            </p>
+            <div className="flex items-center gap-2 justify-end">
+              <button
+                type="button"
+                onClick={() => setConflictItem(null)}
+                className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              >
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleConflictResolve('copy')}
+                className="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-foreground hover:bg-muted/80 transition-colors"
+              >
+                {t.trash.saveAsCopy}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleConflictResolve('overwrite')}
+                className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors"
+              >
+                {t.trash.overwrite}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/ask/ToolCallBlock.tsx

@@ -1,11 +1,17 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { ChevronRight, ChevronDown, Loader2, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';
 import type { ToolCallPart } from '@/lib/types';
 
 const DESTRUCTIVE_TOOLS = new Set(['delete_file', 'move_file', 'rename_file', 'write_file']);
 
+/** Tools that produce diff output — auto-expand when done */
+const DIFF_TOOLS = new Set([
+  'write_file', 'create_file', 'update_section',
+  'insert_after_heading', 'edit_lines', 'append_to_file',
+]);
+
 const TOOL_ICONS: Record<string, string> = {
   search: '🔍',
   list_files: '📂',
@@ -41,18 +47,55 @@ function formatInput(input: unknown): string {
   return parts.join(', ');
 }
 
-function truncateOutput(output: string | undefined, maxLen = 200): string {
-  if (!output) return '';
-  if (output.length <= maxLen) return output;
-  return output.slice(0, maxLen) + '…';
+const CHANGES_SEPARATOR = '--- changes ---';
+
+/** Parse tool output: extract header line (before separator) and diff lines (after separator) */
+function parseToolOutput(output: string | undefined): { header: string; stats: string; diffLines: { prefix: string; text: string }[] } {
+  if (!output) return { header: '', stats: '', diffLines: [] };
+  const sepIdx = output.indexOf(CHANGES_SEPARATOR);
+  if (sepIdx === -1) return { header: output, stats: '', diffLines: [] };
+
+  const header = output.slice(0, sepIdx).trim();
+  const diffText = output.slice(sepIdx + CHANGES_SEPARATOR.length).trim();
+
+  // Extract stats from header, e.g. "File written: foo.md (+3 −1)"
+  const statsMatch = header.match(/\((\+\d+\s*−\d+)\)/);
+  const stats = statsMatch ? statsMatch[1] : '';
+
+  const diffLines = diffText.split('\n').map(line => {
+    if (line.startsWith('+ ')) return { prefix: '+', text: line.slice(2) };
+    if (line.startsWith('- ')) return { prefix: '-', text: line.slice(2) };
+    if (line.startsWith('  ')) return { prefix: ' ', text: line.slice(2) };
+    // gap or other
+    return { prefix: ' ', text: line };
+  });
+
+  return { header, stats, diffLines };
 }
 
 export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
-  const [expanded, setExpanded] = useState(false);
+  const hasDiff = DIFF_TOOLS.has(part.toolName);
+  const isDone = part.state === 'done';
+  // Auto-expand diff tools when completed
+  const [manualToggle, setManualToggle] = useState<boolean | null>(null);
+  const expanded = manualToggle ?? (hasDiff && isDone);
+
   const icon = TOOL_ICONS[part.toolName] ?? '🔧';
-  const inputSummary = formatInput(part.input);
   const isDestructive = DESTRUCTIVE_TOOLS.has(part.toolName);
 
+  const parsed = useMemo(() => parseToolOutput(part.output), [part.output]);
+
+  // For collapsed header: show file path from input + stats
+  const filePath = useMemo(() => {
+    if (!part.input || typeof part.input !== 'object') return '';
+    const obj = part.input as Record<string, unknown>;
+    return (obj.path as string) ?? '';
+  }, [part.input]);
+
+  const headerLabel = filePath
+    ? `${filePath.split('/').pop() ?? filePath}${parsed.stats ? ` (${parsed.stats})` : ''}`
+    : formatInput(part.input);
+
   return (
     <div className={`my-1 rounded-md border text-xs font-mono ${
       isDestructive
@@ -61,14 +104,14 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
     }`}>
       <button
         type="button"
-        onClick={() => setExpanded(v => !v)}
+        onClick={() => setManualToggle(v => v === null ? !expanded : !v)}
         className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/50 transition-colors rounded-md"
       >
         {expanded ? <ChevronDown size={12} className="shrink-0 text-muted-foreground" /> : <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
         {isDestructive && <AlertTriangle size={11} className="shrink-0 text-[var(--amber)]" />}
         <span>{icon}</span>
         <span className={`font-medium ${isDestructive ? 'text-[var(--amber)]' : 'text-foreground'}`}>{part.toolName}</span>
-        <span className="text-muted-foreground truncate flex-1">({inputSummary})</span>
+        <span className="text-muted-foreground truncate flex-1">{headerLabel}</span>
         <span className="shrink-0 ml-auto">
           {part.state === 'pending' || part.state === 'running' ? (
             <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
@@ -80,15 +123,56 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
         </span>
       </button>
       {expanded && (
-        <div className="px-2 pb-2 pt-0.5 border-t border-border/30 space-y-1">
-          <div className="text-muted-foreground">
-            <span className="font-semibold">Input: </span>
-            <span className="break-all whitespace-pre-wrap">{JSON.stringify(part.input, null, 2)}</span>
-          </div>
-          {part.output !== undefined && (
-            <div className="text-muted-foreground">
-              <span className="font-semibold">Output: </span>
-              <span className="break-all whitespace-pre-wrap">{truncateOutput(part.output)}</span>
+        <div className="border-t border-border/30">
+          {/* Diff view for file-mutating tools — only when done and has diff */}
+          {hasDiff && isDone && parsed.diffLines.length > 0 ? (
+            <div className="max-h-64 overflow-y-auto">
+              {parsed.diffLines.map((line, idx) => (
+                <div
+                  key={idx}
+                  className={`px-2 py-px flex items-start gap-1.5 ${
+                    line.prefix === '+'
+                      ? 'bg-success/8'
+                      : line.prefix === '-'
+                        ? 'bg-error/8'
+                        : ''
+                  }`}
+                >
+                  <span
+                    className={`select-none w-3 shrink-0 text-right ${
+                      line.prefix === '+' ? 'text-success' : line.prefix === '-' ? 'text-error' : 'text-muted-foreground/50'
+                    }`}
+                  >
+                    {line.prefix}
+                  </span>
+                  <span
+                    className={`whitespace-pre-wrap break-all flex-1 ${
+                      line.prefix === '+' ? 'text-success' : line.prefix === '-' ? 'text-error' : 'text-muted-foreground'
+                    }`}
+                  >
+                    {line.text || '\u00A0'}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            /* Fallback: show input (always), output when available */
+            <div className="px-2 pb-2 pt-1 space-y-1">
+              {part.state === 'running' && (
+                <div className="text-muted-foreground/60 text-2xs flex items-center gap-1">
+                  <Loader2 size={10} className="animate-spin" /> Running...
+                </div>
+              )}
+              <div className="text-muted-foreground">
+                <span className="font-semibold">Input: </span>
+                <span className="break-all whitespace-pre-wrap">{JSON.stringify(part.input, null, 2)}</span>
+              </div>
+              {part.output !== undefined && part.output !== '' && (
+                <div className="text-muted-foreground">
+                  <span className="font-semibold">Output: </span>
+                  <span className="break-all whitespace-pre-wrap">{part.output.length > 500 ? part.output.slice(0, 500) + '…' : part.output}</span>
+                </div>
+              )}
             </div>
           )}
         </div>

package/app/components/changes/ChangesContentPage.tsx

@@ -221,7 +221,10 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
 
           {!loading && !error && events.map((event) => {
             const open = !!expanded[event.id];
-            const rows = collapseDiffContext(buildLineDiff(event.before ?? '', event.after ?? ''));
+            const rawDiff = buildLineDiff(event.before ?? '', event.after ?? '');
+            const rows = collapseDiffContext(rawDiff);
+            const inserts = rawDiff.filter(r => r.type === 'insert').length;
+            const deletes = rawDiff.filter(r => r.type === 'delete').length;
             return (
               <div key={event.id} className="rounded-xl border border-border bg-card overflow-hidden">
                 <button
@@ -232,7 +235,16 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                   <div className="flex items-start gap-2">
                     <span className="pt-0.5 text-muted-foreground">{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}</span>
                     <div className="min-w-0 flex-1">
-                      <div className="text-sm font-medium text-foreground font-display">{event.summary}</div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-foreground font-display">{event.summary}</span>
+                        {(inserts > 0 || deletes > 0) && (
+                          <span className="text-xs font-mono text-muted-foreground">
+                            {inserts > 0 && <span className="text-success">+{inserts}</span>}
+                            {inserts > 0 && deletes > 0 && ' '}
+                            {deletes > 0 && <span className="text-error">-{deletes}</span>}
+                          </span>
+                        )}
+                      </div>
                       <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
                         <span
                           className="rounded-md px-2 py-0.5 font-medium"
@@ -261,27 +273,59 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                   </div>
                 </button>
 
-                {open && (
-                  <div className="border-t border-border bg-background/70">
+                {open && (() => {
+                  let oln = 1;
+                  let nln = 1;
+                  return (
+                  <div className="border-t border-border bg-background/70 max-h-80 overflow-y-auto">
                     {rows.map((row, idx) => {
                       if (row.type === 'gap') {
-                        return <div key={`${event.id}-gap-${idx}`} className="px-3 py-1 text-2xs text-muted-foreground">{t.changes.unchangedLines(row.count)}</div>;
+                        oln += row.count;
+                        nln += row.count;
+                        return (
+                          <div key={`${event.id}-gap-${idx}`} className="px-3 py-1 text-2xs text-muted-foreground/60 border-y border-border/30 bg-muted/20 text-center">
+                            {t.changes.unchangedLines(row.count)}
+                          </div>
+                        );
                       }
                       const prefix = row.type === 'insert' ? '+' : row.type === 'delete' ? '-' : ' ';
-                      const color = row.type === 'insert'
-                        ? 'var(--success)'
-                        : row.type === 'delete'
-                          ? 'var(--error)'
-                          : 'var(--muted-foreground)';
+                      const showOld = row.type !== 'insert' ? oln : '';
+                      const showNew = row.type !== 'delete' ? nln : '';
+                      if (row.type !== 'insert') oln++;
+                      if (row.type !== 'delete') nln++;
                       return (
-                        <div key={`${event.id}-${idx}`} className="px-3 py-0.5 text-xs font-mono flex items-start gap-2">
-                          <span style={{ color }} className="select-none w-3">{prefix}</span>
-                          <span style={{ color }} className="whitespace-pre-wrap break-all flex-1">{row.text || ' '}</span>
+                        <div
+                          key={`${event.id}-${idx}`}
+                          className={`flex items-start text-xs font-mono ${
+                            row.type === 'insert'
+                              ? 'bg-success/8'
+                              : row.type === 'delete'
+                                ? 'bg-error/8'
+                                : ''
+                          }`}
+                        >
+                          <span className="w-8 shrink-0 text-right pr-1 select-none text-muted-foreground/40 text-2xs leading-5">{showOld}</span>
+                          <span className="w-8 shrink-0 text-right pr-1 select-none text-muted-foreground/40 text-2xs leading-5">{showNew}</span>
+                          <span
+                            className={`w-3 shrink-0 text-center select-none leading-5 ${
+                              row.type === 'insert' ? 'text-success' : row.type === 'delete' ? 'text-error' : 'text-muted-foreground/30'
+                            }`}
+                          >
+                            {prefix}
+                          </span>
+                          <span
+                            className={`px-1 py-0.5 whitespace-pre-wrap break-all flex-1 ${
+                              row.type === 'insert' ? 'text-success' : row.type === 'delete' ? 'text-error' : 'text-muted-foreground'
+                            }`}
+                          >
+                            {row.text || '\u00A0'}
+                          </span>
                         </div>
                       );
                     })}
                   </div>
-                )}
+                  );
+                })()}
               </div>
             );
           })}

package/app/components/explore/ExploreContent.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
-import { useCases, categories, scenarios, type UseCaseCategory, type UseCaseScenario } from './use-cases';
+import { useCases, categories, scenarios, type UseCaseCategory, type UseCaseScenario } from './use-cases.generated';
 import UseCaseCard from './UseCaseCard';
 
 export default function ExploreContent() {
@@ -17,13 +17,9 @@ export default function ExploreContent() {
     return true;
   });
 
-  /** Type-safe lookup for use case i18n data by id */
+  /** Dynamic lookup for use case i18n data by id (works for any number of cases) */
   const getUseCaseText = (id: string): { title: string; desc: string; prompt: string } | undefined => {
-    const map: Record<string, { title: string; desc: string; prompt: string }> = {
-      c1: e.c1, c2: e.c2, c3: e.c3, c4: e.c4, c5: e.c5,
-      c6: e.c6, c7: e.c7, c8: e.c8, c9: e.c9,
-    };
-    return map[id];
+    return (e as Record<string, any>)[id] as { title: string; desc: string; prompt: string } | undefined;
   };
 
   return (
@@ -90,6 +86,7 @@ export default function ExploreContent() {
             <UseCaseCard
               key={uc.id}
               icon={uc.icon}
+              image={uc.image}
               title={data.title}
               description={data.desc}
               prompt={data.prompt}

package/app/components/explore/UseCaseCard.tsx

@@ -1,20 +1,37 @@
 'use client';
 
+import { useState } from 'react';
 import { openAskModal } from '@/hooks/useAskModal';
 
 interface UseCaseCardProps {
   icon: string;
+  image?: string;
   title: string;
   description: string;
   prompt: string;
   tryItLabel: string;
 }
 
-export default function UseCaseCard({ icon, title, description, prompt, tryItLabel }: UseCaseCardProps) {
+export default function UseCaseCard({ icon, image, title, description, prompt, tryItLabel }: UseCaseCardProps) {
+  const [imgError, setImgError] = useState(false);
+
   return (
     <div
       className="group flex flex-col gap-3 p-4 rounded-xl border border-border bg-card transition-all duration-150 hover:border-[var(--amber)]/30 hover:bg-muted/50"
     >
+      {/* Image or emoji fallback */}
+      {image && !imgError ? (
+        <div className="w-full aspect-[16/9] rounded-lg overflow-hidden bg-muted">
+          <img
+            src={image}
+            alt={title}
+            className="w-full h-full object-cover"
+            loading="lazy"
+            onError={() => setImgError(true)}
+          />
+        </div>
+      ) : null}
+
       <div className="flex items-start gap-3">
         <span className="text-xl leading-none shrink-0 mt-0.5" suppressHydrationWarning>
           {icon}