@geminilight/mindos 0.6.30 → 0.6.31

package/app/components/ExportModal.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { X, Download, FileText, Globe, Archive, Check, Loader2 } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
+
+type ExportFormat = 'md' | 'html' | 'zip' | 'zip-html';
+
+interface ExportModalProps {
+  open: boolean;
+  onClose: () => void;
+  filePath: string;
+  isDirectory: boolean;
+  fileName: string;
+}
+
+export default function ExportModal({ open, onClose, filePath, isDirectory, fileName }: ExportModalProps) {
+  const { t } = useLocale();
+  const [format, setFormat] = useState<ExportFormat>(isDirectory ? 'zip' : 'md');
+  const [state, setState] = useState<'idle' | 'exporting' | 'done' | 'error'>('idle');
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  const handleExport = useCallback(() => {
+    setState('exporting');
+    setError('');
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const url = `/api/export?path=${encodeURIComponent(filePath)}&format=${format}`;
+
+    fetch(url, { signal: controller.signal })
+      .then(res => {
+        if (!res.ok) {
+          const ct = res.headers.get('content-type') ?? '';
+          if (ct.includes('json')) {
+            return res.json().then((data: { error?: string }) => { throw new Error(data.error || 'Export failed'); });
+          }
+          throw new Error(`Export failed (${res.status})`);
+        }
+        return res.blob().then(blob => ({ blob, res }));
+      })
+      .then(({ blob, res }) => {
+        const disposition = res.headers.get('Content-Disposition') ?? '';
+        const match = disposition.match(/filename="?([^"]+)"?/);
+        const downloadName = match ? decodeURIComponent(match[1]) : fileName;
+
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = downloadName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+
+        setState('done');
+        toast.success(t.export?.downloaded ?? 'Downloaded');
+      })
+      .catch((err: Error) => {
+        if (err.name === 'AbortError') return; // user cancelled
+        setState('error');
+        setError(err.message ?? 'Export failed');
+      })
+      .finally(() => { abortRef.current = null; });
+  }, [filePath, format, fileName, t]);
+
+  const handleCancel = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (abortRef.current) abortRef.current.abort();
+    abortRef.current = null;
+    setState('idle');
+    setError('');
+    onClose();
+  }, [onClose]);
+
+  if (!open) return null;
+
+  const formats: { value: ExportFormat; label: string; desc: string; icon: React.ReactNode; disabled?: boolean }[] = isDirectory
+    ? [
+        { value: 'zip', label: t.export?.formatZipMd ?? 'Markdown ZIP', desc: t.export?.formatZipMdDesc ?? 'All files in original format', icon: <Archive size={14} /> },
+        { value: 'zip-html', label: t.export?.formatZipHtml ?? 'HTML ZIP', desc: t.export?.formatZipHtmlDesc ?? 'All files as webpages', icon: <Globe size={14} /> },
+      ]
+    : [
+        { value: 'md', label: t.export?.formatMd ?? 'Markdown (.md)', desc: t.export?.formatMdDesc ?? 'Original format, editable', icon: <FileText size={14} /> },
+        { value: 'html', label: t.export?.formatHtml ?? 'HTML (.html)', desc: t.export?.formatHtmlDesc ?? 'Static webpage, shareable', icon: <Globe size={14} /> },
+      ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={state === 'exporting' ? undefined : handleClose}>
+      <div
+        className="bg-card border border-border rounded-xl shadow-xl max-w-md w-full mx-4 animate-in fade-in-0 zoom-in-95 duration-200"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Download size={15} className="text-[var(--amber)]" />
+            <h3 className="text-sm font-semibold font-display">
+              {isDirectory ? (t.export?.exportSpace ?? 'Export Space') : (t.export?.exportFile ?? 'Export File')}
+            </h3>
+          </div>
+          <button onClick={handleClose} className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+            <X size={14} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4">
+          {state === 'done' ? (
+            <div className="text-center py-6">
+              <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-3">
+                <Check size={20} className="text-success" />
+              </div>
+              <p className="text-sm font-medium font-display">{t.export?.done ?? 'Export Complete'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{fileName}</p>
+            </div>
+          ) : state === 'error' ? (
+            <div className="text-center py-6">
+              <p className="text-sm font-medium text-error">{t.export?.error ?? 'Export failed'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{error}</p>
+            </div>
+          ) : (
+            <>
+              <p className="text-xs text-muted-foreground mb-3 truncate" title={filePath}>{filePath}</p>
+              <p className="text-xs font-medium font-display text-foreground mb-2">{t.export?.chooseFormat ?? 'Choose format'}</p>
+              <div className="space-y-1.5">
+                {formats.map(f => (
+                  <label
+                    key={f.value}
+                    className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-all ${
+                      format === f.value
+                        ? 'border-[var(--amber)]/40 bg-[var(--amber-dim)]'
+                        : 'border-border hover:border-border/80 hover:bg-muted/30'
+                    } ${f.disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+                  >
+                    <input
+                      type="radio"
+                      name="export-format"
+                      value={f.value}
+                      checked={format === f.value}
+                      onChange={() => !f.disabled && setFormat(f.value)}
+                      disabled={f.disabled}
+                      className="sr-only"
+                    />
+                    <span className={`mt-0.5 ${format === f.value ? 'text-[var(--amber)]' : 'text-muted-foreground'}`}>
+                      {f.icon}
+                    </span>
+                    <div>
+                      <span className="text-sm font-medium text-foreground">{f.label}</span>
+                      <span className="text-xs text-muted-foreground block mt-0.5">{f.desc}</span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-border">
+          {state === 'done' ? (
+            <>
+              <button onClick={handleRetry} 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?.downloadAgain ?? 'Download Again'}
+              </button>
+              <button onClick={handleClose} 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.export?.cancel === 'Cancel' ? 'Done' : (t.export?.done ?? 'Done')}
+              </button>
+            </>
+          ) : state === 'error' ? (
+            <>
+              <button onClick={handleClose} 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 onClick={handleRetry} 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.export?.retry ?? 'Retry'}
+              </button>
+            </>
+          ) : state === 'exporting' ? (
+            <>
+              <button onClick={handleCancel} 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>
+              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-[var(--amber-text)] opacity-70">
+                <Loader2 size={12} className="animate-spin" /> {t.export?.exporting ?? 'Exporting...'}
+              </span>
+            </>
+          ) : (
+            <>
+              <button onClick={handleClose} 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
+                onClick={handleExport}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors"
+              >
+                <Download size={12} /> {t.export?.exportButton ?? 'Export'}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/FileTree.tsx

@@ -6,11 +6,12 @@ import { FileNode } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import {
   ChevronDown, FileText, Table, Folder, FolderOpen, Plus, Loader2,
-  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy, MoreHorizontal,
+  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy, MoreHorizontal, Star,
 } from 'lucide-react';
 import { createFileAction, deleteFileAction, renameFileAction, renameSpaceAction, deleteSpaceAction, convertToSpaceAction, deleteFolderAction } from '@/lib/actions';
 import { useLocale } from '@/lib/LocaleContext';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 
 function notifyFilesChanged() {
   window.dispatchEvent(new Event('mindos:files-changed'));
@@ -134,9 +135,15 @@ function SpaceContextMenu({ x, y, node, onClose, onRename, onImport, onDelete }:
 }) {
   const router = useRouter();
   const { t } = useLocale();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
 
   return (
     <ContextMenuShell x={x} y={y} onClose={onClose}>
+      <button className={MENU_ITEM} onClick={() => { togglePin(node.path); onClose(); }}>
+        <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+        {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+      </button>
       <button className={MENU_ITEM} onClick={() => { router.push(`/view/${encodePath(`${node.path}/INSTRUCTION.md`)}`); onClose(); }}>
         <ScrollText size={14} className="shrink-0" /> {t.fileTree.editRules}
       </button>
@@ -168,9 +175,15 @@ function FolderContextMenu({ x, y, node, onClose, onRename, onDelete }: {
   const router = useRouter();
   const { t } = useLocale();
   const [isPending, startTransition] = useTransition();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
 
   return (
-    <ContextMenuShell x={x} y={y} onClose={onClose} menuHeight={140}>
+    <ContextMenuShell x={x} y={y} onClose={onClose} menuHeight={180}>
+      <button className={MENU_ITEM} onClick={() => { togglePin(node.path); onClose(); }}>
+        <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+        {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+      </button>
       <button className={MENU_ITEM} disabled={isPending} onClick={() => {
         startTransition(async () => {
           const result = await convertToSpaceAction(node.path);
@@ -570,6 +583,8 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
   const [, startDeleteTransition] = useTransition();
   const renameRef = useRef<HTMLInputElement>(null);
   const { t } = useLocale();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
 
@@ -659,6 +674,7 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
       >
         {getIcon(node)}
         <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+        {pinned && <Star size={10} className="shrink-0 fill-[var(--amber)] text-[var(--amber)] opacity-60" />}
       </button>
       <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/file:flex items-center gap-0.5">
         <button
@@ -684,6 +700,10 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
           <button className={MENU_ITEM} onClick={() => { copyPathToClipboard(node.path); setContextMenu(null); }}>
             <Copy size={14} className="shrink-0" /> {t.fileTree.copyPath}
           </button>
+          <button className={MENU_ITEM} onClick={() => { togglePin(node.path); setContextMenu(null); }}>
+            <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+            {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+          </button>
           <button className={MENU_ITEM} onClick={(e) => { setContextMenu(null); startRename(e); }}>
             <Pencil size={14} className="shrink-0" /> {t.fileTree.rename}
           </button>

package/app/components/HomeContent.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput, Zap, History, SlidersHorizontal, ListTodo } from 'lucide-react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput, Zap, History, SlidersHorizontal, ListTodo, Star } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 import { getAllRenderers, getPluginRenderers } from '@/lib/renderers/registry';
 import OnboardingView from './OnboardingView';
 import GuideCard from './GuideCard';
@@ -252,14 +253,14 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       <ExampleCleanupBanner />
 
       {/* ── Hero ── */}
-      <div className="mb-10">
+      <div className="mb-14">
         <div className="flex items-center gap-2 mb-3">
-          <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
+          <div className="w-1 h-6 rounded-full bg-gradient-to-b from-[var(--amber)] to-[var(--amber)]/30" />
           <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             MindOS
           </h1>
         </div>
-        <p className="text-sm leading-relaxed mb-5 text-muted-foreground pl-4">
+        <p className="text-base leading-relaxed mb-5 text-muted-foreground pl-4 max-w-md">
           {t.app.tagline}
         </p>
 
@@ -269,7 +270,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             onClick={triggerAsk}
             title="⌘/"
             data-walkthrough="ask-button"
-            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:bg-[var(--amber-dim)]"
+            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border/60 shadow-sm bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:bg-[var(--amber-dim)]"
           >
             <Sparkles size={15} className="shrink-0 text-[var(--amber)]" />
             <span className="text-sm flex-1 text-left text-foreground">
@@ -293,7 +294,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </div>
 
         {/* Quick Actions */}
-        <div className="flex flex-wrap gap-2.5 mt-4 pl-4">
+        <div className="flex flex-wrap gap-3 mt-5 pl-4">
           <button
             onClick={() => window.dispatchEvent(new CustomEvent('mindos:open-import'))}
             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 bg-[var(--amber-dim)] text-[var(--amber-text)]"
@@ -331,8 +332,11 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </div>
       </div>
 
-      {/* ── Section 1: Spaces ── */}
-      <section className="mb-8">
+      {/* ── Section: Pinned Files ── */}
+      <PinnedFilesSection formatTime={formatTime} />
+
+      {/* ── Section: Spaces ── */}
+      <section className="mb-12">
         <SectionTitle
           icon={<Brain size={13} />}
           count={spaceList.length > 0 ? spaceList.length : undefined}
@@ -392,9 +396,9 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         )}
       </section>
 
-      {/* ── Section 2: Tools ── */}
+      {/* ── Section: Tools ── */}
       {builtinFeatures.length > 0 && (
-        <section className="mb-8">
+        <section className="mb-12">
           <SectionTitle icon={<Zap size={13} />} count={builtinFeatures.length}>
             {t.home.builtinFeatures}
           </SectionTitle>
@@ -419,9 +423,9 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </section>
       )}
 
-      {/* ── Section 3: Extensions ── */}
+      {/* ── Section: Extensions ── */}
       {availablePlugins.length > 0 && (
-        <section className="mb-8">
+        <section className="mb-12">
           <SectionTitle
             icon={<Puzzle size={13} />}
             count={availablePlugins.length}
@@ -446,7 +450,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </section>
       )}
 
-      {/* ── Section 4: Recently Edited ── */}
+      {/* ── Section: Recently Edited ── */}
       {recent.length > 0 && (
         <section className="mb-12">
           <SectionTitle
@@ -465,8 +469,30 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             {t.home.recentlyEdited}
           </SectionTitle>
 
+          {/* Spotlight — latest file */}
+          <Link
+            href={`/view/${encodePath(recent[0].path)}`}
+            className="block mb-5 p-4 rounded-xl border border-border/50 bg-gradient-to-r from-[var(--amber-subtle)] to-transparent hover:border-[var(--amber)]/40 hover:shadow-sm transition-all group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+                {recent[0].path.endsWith('.csv')
+                  ? <Table size={18} className="text-[var(--amber)]" />
+                  : <FileText size={18} className="text-[var(--amber)]" />}
+              </div>
+              <div className="flex-1 min-w-0">
+                <span className="text-base font-medium text-foreground block truncate">
+                  {recent[0].path.split('/').pop()}
+                </span>
+                <span className="text-xs text-muted-foreground mt-0.5 block" suppressHydrationWarning>
+                  {recent[0].path.split('/').slice(0, -1).join('/') || 'Root'} · {formatTime(recent[0].mtime)}
+                </span>
+              </div>
+              <ArrowRight size={16} className="text-muted-foreground group-hover:text-[var(--amber)] transition-colors shrink-0" />
+            </div>
+          </Link>
+
           {groups.length > 0 ? (
-            /* Space-Grouped View */
             <div className="flex flex-col gap-4">
               {groups.map((group) => {
                 const visibleFiles = showAll ? group.files : group.files.slice(0, FILES_PER_GROUP);
@@ -505,7 +531,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                 );
               })}
 
-              {/* Root-level files (Other) */}
               {rootFiles.length > 0 && (
                 <div>
                   <div className="flex items-center gap-2 px-1 py-1.5">
@@ -522,7 +547,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                 </div>
               )}
 
-              {/* Show more / less */}
               {groups.some(g => g.files.length > FILES_PER_GROUP) && (
                 <ToggleButton
                   expanded={showAll}
@@ -534,7 +558,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
               )}
             </div>
           ) : (
-            /* Flat Timeline Fallback */
             <div className="relative pl-4">
               <div className="absolute left-0 top-1 bottom-1 w-px bg-border" />
               <div className="flex flex-col gap-0.5">
@@ -548,8 +571,8 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                         aria-hidden="true"
                         className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${
                           idx === 0
-                            ? 'w-2 h-2 bg-[var(--amber)] outline-2 outline-[var(--amber-dim)]'
-                            : 'w-1.5 h-1.5 bg-border'
+                            ? 'w-2.5 h-2.5 bg-[var(--amber)] ring-2 ring-[var(--amber)]/20'
+                            : 'w-1.5 h-1.5 bg-muted-foreground/30'
                         }`}
                       />
                       <Link
@@ -587,7 +610,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       )}
 
       {/* Footer */}
-      <div className="mt-16 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-60">
+      <div className="py-6 border-t border-border/30 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-40">
         <Sparkles size={10} className="text-[var(--amber)]" />
         <span>{t.app.footer}</span>
       </div>
@@ -595,6 +618,54 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
   );
 }
 
+/* ── Pinned Files Section ── */
+function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string }) {
+  const { t } = useLocale();
+  const { pinnedFiles, removePin } = usePinnedFiles();
+
+  if (pinnedFiles.length === 0) return null;
+
+  return (
+    <section className="mb-12">
+      <SectionTitle icon={<Star size={13} />} count={pinnedFiles.length}>
+        {t.pinnedFiles.title}
+      </SectionTitle>
+      <div className="flex flex-col gap-0.5">
+        {pinnedFiles.map((filePath) => {
+          const name = filePath.split('/').pop() || filePath;
+          const dir = filePath.split('/').slice(0, -1).join('/');
+          const isCSV = filePath.endsWith('.csv');
+          return (
+            <div key={filePath} className="group/pin relative">
+              <Link
+                href={`/view/${encodePath(filePath)}`}
+                className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted"
+              >
+                <Star size={12} className="shrink-0 fill-[var(--amber)] text-[var(--amber)]" />
+                {isCSV
+                  ? <Table size={12} className="shrink-0 text-success" />
+                  : <FileText size={12} className="shrink-0 text-muted-foreground" />
+                }
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                  {dir && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{dir}</span>}
+                </div>
+              </Link>
+              <button
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); removePin(filePath); }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 hidden group-hover/pin:flex p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                title={t.pinnedFiles.removedToast}
+              >
+                <X size={12} />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
 /* ── Create Space: title-bar button ── */
 function CreateSpaceButton({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
   return (

package/app/components/MarkdownView.tsx

@@ -6,13 +6,17 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import { useState, useCallback } from 'react';
-import { Copy, Check } from 'lucide-react';
+import { Copy, Check, X } from 'lucide-react';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
 import type { Components } from 'react-markdown';
 
 interface MarkdownViewProps {
   content: string;
+  /** Lines changed by AI (1-indexed). Shows banner + fades after timeout. */
+  highlightLines?: number[];
+  /** Callback to dismiss the highlight banner */
+  onDismissHighlight?: () => void;
 }
 
 function CopyButton({ code }: { code: string }) {
@@ -111,16 +115,47 @@ function extractText(node: React.ReactNode): string {
   return '';
 }
 
-export default function MarkdownView({ content }: MarkdownViewProps) {
+export default function MarkdownView({ content, highlightLines, onDismissHighlight }: MarkdownViewProps) {
+  const hasHighlights = highlightLines && highlightLines.length > 0;
+
   return (
-    <div className="prose max-w-none">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSlug, rehypeHighlight, rehypeRaw]}
-        components={components}
-      >
-        {content}
-      </ReactMarkdown>
+    <div>
+      {/* Change indicator banner */}
+      {hasHighlights && (
+        <div
+          className="mb-4 flex items-center gap-2 rounded-md border px-3 py-2 text-xs animate-in fade-in-0 duration-300"
+          style={{
+            borderColor: 'color-mix(in srgb, var(--amber) 40%, var(--border))',
+            background: 'color-mix(in srgb, var(--amber) 8%, var(--card))',
+            color: 'var(--amber)',
+          }}
+          data-highlight-line
+        >
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] animate-pulse shrink-0" />
+          <span className="font-display font-medium flex-1">
+            {highlightLines.length} line{highlightLines.length !== 1 ? 's' : ''} updated by AI
+          </span>
+          {onDismissHighlight && (
+            <button
+              type="button"
+              onClick={onDismissHighlight}
+              className="p-0.5 rounded hover:bg-[var(--amber)]/15 transition-colors shrink-0"
+              aria-label="Dismiss"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      )}
+      <div className="prose max-w-none">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeSlug, rehypeHighlight, rehypeRaw]}
+          components={components}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
     </div>
   );
 }

package/app/components/Sidebar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
-import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings } from 'lucide-react';
+import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings, Trash2 } from 'lucide-react';
 import FileTree from './FileTree';
 import SearchModal from './SearchModal';
 import AskModal from './AskModal';
@@ -117,6 +117,15 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
       <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
         <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} />
       </div>
+      <div className="px-2 pb-1">
+        <Link
+          href="/trash"
+          className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <Trash2 size={13} />
+          <span>{t.trash?.title ?? 'Trash'}</span>
+        </Link>
+      </div>
       <SyncStatusBar
         collapsed={collapsed}
         onOpenSyncSettings={openSyncSettings}