@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/ask/FileChip.tsx

@@ -1,31 +1,96 @@
 'use client';
 
-import { X, FileText, Table, Paperclip } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot } from 'lucide-react';
 
 interface FileChipProps {
   path: string;
   onRemove: () => void;
-  variant?: 'kb' | 'upload';
+  variant?: 'kb' | 'upload' | 'image' | 'skill' | 'agent';
+  /** Base64 image data for hover preview (variant='image' only) */
+  imageData?: string;
+  /** MIME type for image preview */
+  imageMime?: string;
 }
 
-export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipProps) {
+const VARIANT_ICON = {
+  kb: { icon: FileText, cls: 'text-muted-foreground' },
+  upload: { icon: Paperclip, cls: 'text-muted-foreground' },
+  image: { icon: ImageIcon, cls: 'text-muted-foreground' },
+  skill: { icon: Zap, cls: 'text-[var(--amber)]' },
+  agent: { icon: Bot, cls: 'text-muted-foreground' },
+} as const;
+
+const VARIANT_STYLE = {
+  kb: 'border-border bg-muted text-foreground',
+  upload: 'border-border bg-muted text-foreground',
+  image: 'border-border bg-muted text-foreground',
+  skill: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+  agent: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+} as const;
+
+export default function FileChip({ path, onRemove, variant = 'kb', imageData, imageMime }: FileChipProps) {
+  const [showPreview, setShowPreview] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const chipRef = useRef<HTMLSpanElement>(null);
+  const [previewPos, setPreviewPos] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
   const name = path.split('/').pop() ?? path;
-  const isCsv = name.endsWith('.csv');
-  const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
-  const iconClass = variant === 'upload' ? 'text-muted-foreground' : isCsv ? 'text-success' : 'text-muted-foreground';
+  const isCsv = variant === 'kb' && name.endsWith('.csv');
+  const { icon: Icon, cls: iconClass } = isCsv
+    ? { icon: Table, cls: 'text-success' }
+    : VARIANT_ICON[variant];
+  const style = VARIANT_STYLE[variant];
+
+  // Position preview above the chip using getBoundingClientRect
+  useEffect(() => {
+    if (!showPreview || !chipRef.current) { setPreviewPos(null); return; }
+    const rect = chipRef.current.getBoundingClientRect();
+    setPreviewPos({
+      top: rect.top - 8, // 8px gap above chip
+      left: rect.left,
+    });
+  }, [showPreview]);
+
+  const preview = showPreview && previewPos && imageData && imageMime ? (
+    <div
+      className="fixed z-50 p-1 rounded-lg border border-border bg-card shadow-lg pointer-events-none"
+      style={{
+        left: previewPos.left,
+        bottom: window.innerHeight - previewPos.top,
+      }}
+    >
+      <img
+        src={`data:${imageMime};base64,${imageData}`}
+        alt={name}
+        className="max-h-48 max-w-64 rounded object-contain"
+      />
+    </div>
+  ) : null;
 
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">
-      <Icon size={11} className={`${iconClass} shrink-0`} />
-      <span className="truncate" title={path}>{name}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        aria-label={`Remove ${name}`}
-        className="p-1 -mr-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0"
+    <>
+      <span
+        ref={chipRef}
+        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border max-w-[220px] ${style}`}
+        onMouseEnter={() => imageData && setShowPreview(true)}
+        onMouseLeave={() => setShowPreview(false)}
       >
-        <X size={10} />
-      </button>
-    </span>
+        <Icon size={11} className={`${iconClass} shrink-0`} />
+        <span className="truncate" title={path}>{name}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${name}`}
+          className="p-0.5 -mr-1 rounded hover:text-foreground transition-colors shrink-0 text-muted-foreground"
+        >
+          <X size={10} />
+        </button>
+      </span>
+      {mounted && preview && createPortal(preview, document.body)}
+    </>
   );
 }

package/app/components/ask/MentionPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FileText, Table, FolderOpen } from 'lucide-react';
 import HighlightMatch from './HighlightMatch';
 
@@ -11,8 +11,26 @@ interface MentionPopoverProps {
   onSelect: (filePath: string) => void;
 }
 
+/**
+ * Popover for @ file mentions. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function MentionPopover({ results, selectedIndex, query, onSelect }: MentionPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -24,13 +42,13 @@ export default function MentionPopover({ results, selectedIndex, query, onSelect
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <FolderOpen size={11} className="text-muted-foreground/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Files</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
       {results.map((f, idx) => {
         const name = f.split('/').pop() ?? f;
         const dir = f.split('/').slice(0, -1).join('/');

package/app/components/ask/MessageList.tsx

@@ -4,25 +4,46 @@ import { useRef, useEffect } from 'react';
 import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import type { Message } from '@/lib/types';
+import type { Message, ImagePart } from '@/lib/types';
 import { stripThinkingTags } from '@/hooks/useAiOrganize';
 import ToolCallBlock from './ToolCallBlock';
 import ThinkingBlock from './ThinkingBlock';
 
 const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
 
-function UserMessageContent({ content, skillName }: { content: string; skillName?: string }) {
+function UserMessageContent({ content, skillName, images }: { content: string; skillName?: string; images?: ImagePart[] }) {
   const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
-  if (!resolved) return <>{content}</>;
   const prefixMatch = content.match(SKILL_PREFIX_RE);
   const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
   return (
     <>
-      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
-        <Zap size={10} className="shrink-0" />
-        {resolved}
-      </span>
-      {rest}
+      {/* Images */}
+      {images && images.length > 0 && (
+        <div className={`flex flex-wrap gap-1.5${content ? ' mb-2' : ''}`}>
+          {images.map((img, idx) => (
+            img.data ? (
+              <img
+                key={idx}
+                src={`data:${img.mimeType};base64,${img.data}`}
+                alt={`Image ${idx + 1}`}
+                className="max-h-48 max-w-full rounded-md object-contain"
+              />
+            ) : (
+              <div key={idx} className="h-12 px-3 rounded-md bg-muted flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>[Image {idx + 1}]</span>
+              </div>
+            )
+          ))}
+        </div>
+      )}
+      {/* Skill capsule + text */}
+      {resolved && (
+        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
+          <Zap size={10} className="shrink-0" />
+          {resolved}
+        </span>
+      )}
+      {resolved ? rest : content}
     </>
   );
 }
@@ -168,7 +189,7 @@ export default function MessageList({
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
             >
-              <UserMessageContent content={m.content} skillName={m.skillName} />
+              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} />
             </div>
           ) : m.content.startsWith('__error__') ? (
             <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">

package/app/components/ask/SlashCommandPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Zap } from 'lucide-react';
 import type { SlashItem } from '@/hooks/useSlashCommand';
 import HighlightMatch from './HighlightMatch';
@@ -12,8 +12,26 @@ interface SlashCommandPopoverProps {
   onSelect: (item: SlashItem) => void;
 }
 
+/**
+ * Popover for slash commands. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function SlashCommandPopover({ results, selectedIndex, query, onSelect }: SlashCommandPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -25,13 +43,13 @@ export default function SlashCommandPopover({ results, selectedIndex, query, onS
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <Zap size={11} className="text-[var(--amber)]/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Skills</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
         {results.map((item, idx) => (
           <button
             key={item.name}

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}