@geminilight/mindos 0.1.0

package/app/components/FileTree.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { useState, useCallback, useRef, useTransition, useEffect } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { FileNode } from '@/lib/types';
+import { encodePath } from '@/lib/utils';
+import { ChevronDown, FileText, Table, Folder, FolderOpen, Plus, Loader2, Trash2, Pencil } from 'lucide-react';
+import { createFileAction, deleteFileAction, renameFileAction } from '@/lib/actions';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface FileTreeProps {
+  nodes: FileNode[];
+  depth?: number;
+  onNavigate?: () => void;
+}
+
+function getIcon(node: FileNode) {
+  if (node.type === 'directory') return null;
+  if (node.extension === '.csv') return <Table size={14} className="text-emerald-400 shrink-0" />;
+  return <FileText size={14} className="text-zinc-400 shrink-0" />;
+}
+
+function getCurrentFilePath(pathname: string): string {
+  const prefix = '/view/';
+  if (!pathname.startsWith(prefix)) return '';
+  const encoded = pathname.slice(prefix.length);
+  return encoded.split('/').map(decodeURIComponent).join('/');
+}
+
+function NewFileInline({ dirPath, depth, onDone }: { dirPath: string; depth: number; onDone: () => void }) {
+  const [value, setValue] = useState('');
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState('');
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const handleSubmit = useCallback(() => {
+    const name = value.trim();
+    if (!name) { setError(t.fileTree.enterFileName); return; }
+    startTransition(async () => {
+      const result = await createFileAction(dirPath, name);
+      if (result.success && result.filePath) {
+        onDone();
+        router.push(`/view/${encodePath(result.filePath)}`);
+        router.refresh();
+      } else {
+        setError(result.error || t.fileTree.failed);
+      }
+    });
+  }, [value, dirPath, onDone, router, t]);
+
+  return (
+    <div className="px-2 pb-1" style={{ paddingLeft: `${depth * 12 + 20}px` }}>
+      <div className="flex items-center gap-1">
+        <input
+          autoFocus
+          type="text"
+          value={value}
+          onChange={(e) => { setValue(e.target.value); setError(''); }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSubmit();
+            if (e.key === 'Escape') onDone();
+          }}
+          placeholder="filename.md"
+          className="
+            flex-1 bg-muted border border-border rounded px-2 py-1
+            text-xs text-foreground placeholder:text-muted-foreground
+            focus:outline-none focus:border-blue-500/60
+          "
+        />
+        {isPending
+          ? <Loader2 size={13} className="text-zinc-500 animate-spin shrink-0" />
+          : (
+            <button
+              onClick={handleSubmit}
+              className="text-xs text-blue-400 hover:text-blue-300 shrink-0 px-1"
+            >
+              {t.fileTree.create}
+            </button>
+          )
+        }
+      </div>
+      {error && <p className="text-xs text-red-400 mt-0.5 px-1">{error}</p>}
+    </div>
+  );
+}
+
+function DirectoryNode({ node, depth, currentPath, onNavigate }: {
+  node: FileNode; depth: number; currentPath: string; onNavigate?: () => void;
+}) {
+  const router = useRouter();
+  const isActive = currentPath.startsWith(node.path + '/') || currentPath === node.path;
+  const [open, setOpen] = useState(depth === 0 ? true : isActive);
+  const [showNewFile, setShowNewFile] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(node.name);
+  const [isPending, startTransition] = useTransition();
+  const renameRef = useRef<HTMLInputElement>(null);
+  const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { t } = useLocale();
+
+  const toggle = useCallback(() => setOpen(v => !v), []);
+
+  useEffect(() => {
+    return () => {
+      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    };
+  }, []);
+
+  const startRename = useCallback((e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    if (clickTimerRef.current) {
+      clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = null;
+    }
+    setRenameValue(node.name);
+    setRenaming(true);
+    setTimeout(() => renameRef.current?.select(), 0);
+  }, [node.name]);
+
+  const commitRename = useCallback(() => {
+    const newName = renameValue.trim();
+    if (!newName || newName === node.name) { setRenaming(false); return; }
+    startTransition(async () => {
+      const result = await renameFileAction(node.path, newName);
+      if (result.success && result.newPath) {
+        setRenaming(false);
+        router.push(`/view/${encodePath(result.newPath)}`);
+        router.refresh();
+      } else {
+        setRenaming(false);
+      }
+    });
+  }, [renameValue, node.name, node.path, router]);
+
+  const handleSingleClick = useCallback(() => {
+    if (renaming) return;
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    clickTimerRef.current = setTimeout(() => {
+      router.push(`/view/${encodePath(node.path)}`);
+      onNavigate?.();
+      clickTimerRef.current = null;
+    }, 180);
+  }, [renaming, router, node.path, onNavigate]);
+
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    startRename(e);
+  }, [startRename]);
+
+  if (renaming) {
+    return (
+      <div className="relative px-2 py-0.5" style={{ paddingLeft: `${depth * 12 + 8}px` }}>
+        <input
+          ref={renameRef}
+          autoFocus
+          value={renameValue}
+          onChange={e => setRenameValue(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') setRenaming(false);
+          }}
+          onBlur={commitRename}
+          className="w-full bg-muted border border-blue-500/60 rounded px-2 py-0.5 text-xs text-foreground focus:outline-none"
+        />
+        {isPending && <Loader2 size={12} className="absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-zinc-500" />}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="relative group/dir flex items-center">
+        <button
+          onClick={toggle}
+          className="shrink-0 p-1 rounded hover:bg-muted text-zinc-500 transition-colors"
+          style={{ marginLeft: `${depth * 12 + 4}px` }}
+          aria-label={open ? 'Collapse' : 'Expand'}
+        >
+          <span className="block transition-transform duration-150" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' }}>
+            <ChevronDown size={13} />
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={handleSingleClick}
+          onDoubleClick={handleDoubleClick}
+          className={`
+            flex-1 flex items-center gap-1.5 px-1 py-1 rounded text-left min-w-0 pr-16
+            text-sm transition-colors duration-100
+            hover:bg-muted
+            ${isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'}
+          `}
+        >
+          {open
+            ? <FolderOpen size={14} className="text-yellow-400 shrink-0" />
+            : <Folder size={14} className="text-yellow-400 shrink-0" />
+          }
+          <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+        </button>
+        <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/dir:flex items-center gap-0.5 z-10">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setOpen(true);
+              setShowNewFile(true);
+            }}
+            className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            title={t.fileTree.newFileTitle}
+          >
+            <Plus size={13} />
+          </button>
+          <button
+            type="button"
+            onClick={startRename}
+            className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            title={t.fileTree.rename}
+          >
+            <Pencil size={12} />
+          </button>
+        </div>
+      </div>
+
+      <div
+        className="overflow-hidden transition-all duration-200"
+        style={{ maxHeight: open ? '9999px' : '0px' }}
+      >
+        {node.children && (
+          <FileTree nodes={node.children} depth={depth + 1} onNavigate={onNavigate} />
+        )}
+        {showNewFile && (
+          <NewFileInline
+            dirPath={node.path}
+            depth={depth}
+            onDone={() => setShowNewFile(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FileNodeItem({ node, depth, currentPath, onNavigate }: {
+  node: FileNode; depth: number; currentPath: string; onNavigate?: () => void;
+}) {
+  const router = useRouter();
+  const isActive = currentPath === node.path;
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(node.name);
+  const [isPending, startTransition] = useTransition();
+  const renameRef = useRef<HTMLInputElement>(null);
+  const { t } = useLocale();
+
+  const handleClick = useCallback(() => {
+    if (renaming) return;
+    router.push(`/view/${encodePath(node.path)}`);
+    onNavigate?.();
+  }, [router, node.path, onNavigate, renaming]);
+
+  const startRename = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setRenameValue(node.name);
+    setRenaming(true);
+    setTimeout(() => renameRef.current?.select(), 0);
+  }, [node.name]);
+
+  const commitRename = useCallback(() => {
+    const newName = renameValue.trim();
+    if (!newName || newName === node.name) { setRenaming(false); return; }
+    startTransition(async () => {
+      const result = await renameFileAction(node.path, newName);
+      if (result.success && result.newPath) {
+        setRenaming(false);
+        router.push(`/view/${encodePath(result.newPath)}`);
+        router.refresh();
+      } else {
+        setRenaming(false);
+      }
+    });
+  }, [renameValue, node.name, node.path, router]);
+
+  const handleDelete = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm(t.fileTree.confirmDelete(node.name))) return;
+    startTransition(async () => {
+      await deleteFileAction(node.path);
+      if (currentPath === node.path) router.push('/');
+      router.refresh();
+    });
+  }, [node.name, node.path, currentPath, router, t]);
+
+  if (renaming) {
+    return (
+      <div className="relative px-2 py-0.5" style={{ paddingLeft: `${depth * 12 + 8}px` }}>
+        <input
+          ref={renameRef}
+          autoFocus
+          value={renameValue}
+          onChange={e => setRenameValue(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') setRenaming(false);
+          }}
+          onBlur={commitRename}
+          className="w-full bg-muted border border-blue-500/60 rounded px-2 py-0.5 text-xs text-foreground focus:outline-none"
+        />
+        {isPending && <Loader2 size={12} className="absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-zinc-500" />}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative group/file">
+      <button
+        onClick={handleClick}
+        onDoubleClick={startRename}
+        data-filepath={node.path}
+        className={`
+          w-full flex items-center gap-1.5 px-2 py-1 rounded text-left
+          text-sm transition-colors duration-100 cursor-pointer pr-16
+          ${isActive
+            ? 'bg-accent text-foreground'
+            : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+          }
+        `}
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+      >
+        {getIcon(node)}
+        <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+      </button>
+      <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/file:flex items-center gap-0.5">
+        <button onClick={startRename} className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.fileTree.rename}>
+          <Pencil size={12} />
+        </button>
+        <button onClick={handleDelete} className="p-0.5 rounded text-muted-foreground hover:text-red-400 hover:bg-muted transition-colors" title={t.fileTree.delete}>
+          <Trash2 size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function FileTree({ nodes, depth = 0, onNavigate }: FileTreeProps) {
+  const pathname = usePathname();
+  const currentPath = getCurrentFilePath(pathname);
+
+  useEffect(() => {
+    if (!currentPath || depth !== 0) return;
+    const timer = setTimeout(() => {
+      const el = document.querySelector(`[data-filepath="${CSS.escape(currentPath)}"]`) as HTMLElement | null;
+      el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }, 120);
+    return () => clearTimeout(timer);
+  }, [currentPath, depth]);
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      {nodes.map((node) =>
+        node.type === 'directory' ? (
+          <DirectoryNode key={node.path} node={node} depth={depth} currentPath={currentPath} onNavigate={onNavigate} />
+        ) : (
+          <FileNodeItem key={node.path} node={node} depth={depth} currentPath={currentPath} onNavigate={onNavigate} />
+        )
+      )}
+    </div>
+  );
+}

package/app/components/HomeContent.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import Link from 'next/link';
+import { FileText, Table, Clock, Sparkles, Puzzle, ArrowRight, FilePlus, Search, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath, relativeTime } from '@/lib/utils';
+import { getAllRenderers } from '@/lib/renderers/registry';
+import '@/lib/renderers/index'; // registers all renderers
+
+interface RecentFile {
+  path: string;
+  mtime: number;
+}
+
+// Maps a renderer id to a canonical entry file path
+const RENDERER_ENTRY: Record<string, string> = {
+  todo: 'TODO.md',
+  csv: 'Resources/Products.csv',
+  graph: 'README.md',
+  timeline: 'CHANGELOG.md',
+  backlinks: 'BACKLINKS.md',
+  summary: 'DAILY.md',
+  'agent-inspector': 'Agent-Audit.md',
+  workflow: 'Workflow.md',
+  'diff-viewer': 'Agent-Diff.md',
+  'config-panel': 'CONFIG.json',
+};
+
+function deriveEntryPath(id: string): string | null {
+  return RENDERER_ENTRY[id] ?? null;
+}
+
+function triggerSearch() {
+  // Dispatch ⌘K to open the Sidebar's SearchModal
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
+}
+
+function triggerAsk() {
+  // Dispatch ⌘/ to open the Sidebar's AskModal
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: '/', metaKey: true, bubbles: true }));
+}
+
+export default function HomeContent({ recent }: { recent: RecentFile[] }) {
+  const { t } = useLocale();
+  const [showAll, setShowAll] = useState(false);
+
+  const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
+
+  const renderers = getAllRenderers();
+
+  const lastFile = recent[0];
+
+  return (
+    <div className="content-width px-4 md:px-6 py-8 md:py-12">
+      {/* Hero */}
+      <div className="mb-10">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
+          <h1 className="text-2xl font-semibold tracking-tight" style={{ fontFamily: "'IBM Plex Mono', monospace", color: 'var(--foreground)' }}>
+            MindOS
+          </h1>
+        </div>
+        <p className="text-sm leading-relaxed mb-5" style={{ color: 'var(--muted-foreground)', paddingLeft: '1rem' }}>
+          {t.app.tagline}
+        </p>
+
+        {/* AI-first command bar */}
+        <div
+          className="w-full max-w-[620px] flex flex-col sm:flex-row items-stretch sm:items-center gap-2"
+          style={{
+            marginLeft: '1rem',
+          }}
+        >
+          {/* Ask AI (primary) */}
+          <button
+            onClick={triggerAsk}
+            title="⌘/"
+            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/8"
+            style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+          >
+            <Sparkles size={15} style={{ color: 'var(--amber)' }} className="shrink-0" />
+            <span className="text-sm flex-1 text-left" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}>
+              {t.home.shortcuts.askAI}
+            </span>
+            <kbd
+              className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-[11px] font-mono font-medium"
+              style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
+            >
+              ⌘/
+            </kbd>
+          </button>
+
+          {/* Search files (secondary) */}
+          <button
+            onClick={triggerSearch}
+            title="⌘K"
+            className="flex items-center gap-2 px-3 py-3 rounded-xl border text-sm transition-colors shrink-0 hover:bg-muted"
+            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}
+          >
+            <Search size={14} />
+            <span className="hidden sm:inline">{t.home.shortcuts.searchFiles}</span>
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono" style={{ background: 'var(--muted)' }}>
+              ⌘K
+            </kbd>
+          </button>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="flex flex-wrap gap-2.5 mt-4" style={{ paddingLeft: '1rem' }}>
+          {lastFile && (
+            <Link
+              href={`/view/${encodePath(lastFile.path)}`}
+              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5"
+              style={{
+                background: 'var(--amber-dim)',
+                color: 'var(--amber)',
+                fontFamily: "'IBM Plex Sans', sans-serif",
+              }}
+            >
+              <ArrowRight size={14} />
+              <span>{t.home.continueEditing}</span>
+              <span className="text-xs opacity-60 truncate max-w-[160px]" suppressHydrationWarning>
+                {lastFile.path.split('/').pop()}
+              </span>
+            </Link>
+          )}
+          <Link
+            href="/view/Untitled.md"
+            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors"
+            style={{
+              background: 'var(--muted)',
+              color: 'var(--muted-foreground)',
+              fontFamily: "'IBM Plex Sans', sans-serif",
+            }}
+          >
+            <FilePlus size={14} />
+            <span>{t.home.newNote}</span>
+          </Link>
+        </div>
+
+      </div>
+
+      {/* Plugins — compact 3-column grid */}
+      {renderers.length > 0 && (
+        <section className="mb-12">
+          <div className="flex items-center gap-2 mb-4">
+            <Puzzle size={13} style={{ color: 'var(--amber)' }} />
+            <h2 className="text-xs font-semibold uppercase tracking-[0.08em]" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}>
+              {t.home.plugins}
+            </h2>
+            <span className="text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>
+              {renderers.length}
+            </span>
+          </div>
+
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {renderers.map((r) => {
+              const entryPath = deriveEntryPath(r.id);
+              return (
+                <Link
+                  key={r.id}
+                  href={entryPath ? `/view/${encodePath(entryPath)}` : '#'}
+                  className="group flex items-center gap-2.5 px-3 py-2.5 rounded-lg border transition-all hover:border-amber-500/30 hover:bg-muted/50"
+                  style={{ borderColor: 'var(--border)' }}
+                >
+                  <span className="text-base leading-none shrink-0" suppressHydrationWarning>{r.icon}</span>
+                  <div className="flex-1 min-w-0">
+                    <span className="text-xs font-semibold truncate block" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}>
+                      {r.name}
+                    </span>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Recently modified — timeline feed */}
+      {recent.length > 0 && (() => {
+        const INITIAL_COUNT = 5;
+        const visibleRecent = showAll ? recent : recent.slice(0, INITIAL_COUNT);
+        const hasMore = recent.length > INITIAL_COUNT;
+
+        return (
+        <section className="mb-12">
+          <div className="flex items-center gap-2 mb-5">
+            <Clock size={13} style={{ color: 'var(--amber)' }} />
+            <h2 className="text-xs font-semibold uppercase tracking-[0.08em]" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}>
+              {t.home.recentlyModified}
+            </h2>
+          </div>
+
+          <div className="relative pl-4">
+            {/* Timeline line */}
+            <div className="absolute left-0 top-1 bottom-1 w-px" style={{ background: 'var(--border)' }} />
+
+            <div className="flex flex-col gap-0.5">
+              {visibleRecent.map(({ path: filePath, mtime }, idx) => {
+                const isCSV = filePath.endsWith('.csv');
+                const name = filePath.split('/').pop() || filePath;
+                const dir = filePath.split('/').slice(0, -1).join('/');
+                return (
+                  <div key={filePath} className="relative group">
+                    {/* Timeline dot */}
+                    <div
+                      className="absolute -left-4 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full transition-all duration-150 group-hover:scale-150"
+                      style={{
+                        background: idx === 0 ? 'var(--amber)' : 'var(--border)',
+                        outline: idx === 0 ? '2px solid var(--amber-dim)' : 'none',
+                      }}
+                    />
+                    <Link
+                      href={`/view/${encodePath(filePath)}`}
+                      className="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted"
+                    >
+                      {isCSV
+                        ? <Table size={13} className="shrink-0" style={{ color: '#7aad80' }} />
+                        : <FileText size={13} className="shrink-0" style={{ color: 'var(--muted-foreground)' }} />
+                      }
+                      <div className="flex-1 min-w-0">
+                        <span className="text-sm font-medium truncate block" style={{ color: 'var(--foreground)' }} suppressHydrationWarning>{name}</span>
+                        {dir && <span className="text-xs truncate block" style={{ color: 'var(--muted-foreground)', opacity: 0.6 }} suppressHydrationWarning>{dir}</span>}
+                      </div>
+                      <span className="text-xs shrink-0 tabular-nums" style={{ color: 'var(--muted-foreground)', opacity: 0.5, fontFamily: "'IBM Plex Mono', monospace" }} suppressHydrationWarning>
+                        {formatTime(mtime)}
+                      </span>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Show more / less */}
+            {hasMore && (
+              <button
+                onClick={() => setShowAll(v => !v)}
+                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium transition-colors hover:opacity-80 cursor-pointer"
+                style={{ color: 'var(--amber)', fontFamily: "'IBM Plex Mono', monospace" }}
+              >
+                <ChevronDown
+                  size={12}
+                  className="transition-transform duration-200"
+                  style={{ transform: showAll ? 'rotate(180deg)' : undefined }}
+                />
+                <span>{showAll ? t.home.showLess : t.home.showMore}</span>
+              </button>
+            )}
+          </div>
+        </section>
+        );
+      })()}
+
+      {/* Footer */}
+      <div className="mt-16 flex items-center gap-1.5 text-xs" style={{ color: 'var(--muted-foreground)', opacity: 0.4, fontFamily: "'IBM Plex Mono', monospace" }}>
+        <Sparkles size={10} style={{ color: 'var(--amber)' }} />
+        <span>{t.app.footer}</span>
+      </div>
+    </div>
+  );
+}

package/app/components/JsonView.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMemo } from 'react';
+
+interface JsonViewProps {
+  content: string;
+}
+
+export default function JsonView({ content }: JsonViewProps) {
+  const pretty = useMemo(() => {
+    try {
+      return JSON.stringify(JSON.parse(content), null, 2);
+    } catch {
+      return content;
+    }
+  }, [content]);
+
+  return (
+    <pre
+      className="rounded-xl border border-border bg-card px-4 py-3 overflow-x-auto text-sm leading-relaxed"
+      style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+      suppressHydrationWarning
+    >
+      <code>{pretty}</code>
+    </pre>
+  );
+}