feat: fully functional Storage settings - live usage stats, clear library/projects, reveal folder, export .refs"

src/components/SettingsPanel.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, KeyRound, Lock, Unlock, Trash2, Plus, Navigation, Grid3X3, Database, Palette, Clock, MousePointer2 } from 'lucide-react';
+import { X, Settings, Keyboard, Monitor, Shield, HardDrive, Info, RefreshCw, KeyRound, Lock, Unlock, Trash2, Plus, Navigation, Grid3X3, Database, Palette, Clock, MousePointer2, FolderOpen, FileDown, Image as ImageIcon, LayoutGrid } from 'lucide-react';
 import { useAppStore } from '../store';
 import { useState, useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/core';
@@ -7,9 +7,12 @@ import { unlockVault, lockVault, isVaultUnlocked, saveCredential, listCredential
 
 type Tab = 'general' | 'appearance' | 'shortcuts' | 'privacy' | 'vault' | 'storage' | 'about';
 interface ShieldReport { blocked_requests: number; blocked_cosmetic: number; https_upgrades: number; engine_rules: number; }
+interface StorageInfo { data_path: string; total_size_bytes: number; file_count: number; project_count: number; library_count: number; library_size_bytes: number; projects_size_bytes: number; }
+
+function formatBytes(bytes: number): string { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toFixed(i > 0 ? 1 : 0) + ' ' + sizes[i]; }
 
 export const SettingsPanel = () => {
-  const { isSettingsOpen, setIsSettingsOpen, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity, setBgOpacity, showMinimap, setShowMinimap, showGrid, setShowGrid } = useAppStore();
+  const { isSettingsOpen, setIsSettingsOpen, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity, setBgOpacity, showMinimap, setShowMinimap, showGrid, setShowGrid, images, textNotes, annotations, palettes, zoom, pan, boardTitle } = useAppStore();
   const [activeTab, setActiveTab] = useState<Tab>('general');
   const [shieldReport, setShieldReport] = useState<ShieldReport>({ blocked_requests: 0, blocked_cosmetic: 0, https_upgrades: 0, engine_rules: 0 });
   const [vaultUnlocked, setVaultUnlocked] = useState(isVaultUnlocked());
@@ -19,9 +22,14 @@ export const SettingsPanel = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [vaultMsg, setVaultMsg] = useState('');
+  const [storageInfo, setStorageInfo] = useState<StorageInfo | null>(null);
+  const [storageLoading, setStorageLoading] = useState(false);
+  const [storageMsg, setStorageMsg] = useState('');
 
   useEffect(() => { if (isSettingsOpen) invoke<ShieldReport>('shield_get_report').then(setShieldReport).catch(() => {}); }, [isSettingsOpen]);
+  useEffect(() => { if (isSettingsOpen && activeTab === 'storage') loadStorageInfo(); }, [isSettingsOpen, activeTab]);
   const reloadCreds = () => listCredentials().then(setCreds).catch(e => setVaultMsg(String(e)));
+  const loadStorageInfo = () => { setStorageLoading(true); invoke<StorageInfo>('storage_info').then(setStorageInfo).catch(() => {}).finally(() => setStorageLoading(false)); };
 
   const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
     { id: 'general', label: 'General', icon: <Settings size={16} /> },
@@ -36,123 +44,64 @@ export const SettingsPanel = () => {
   const unlock = async () => { try { await unlockVault(master); setMaster(''); setVaultUnlocked(true); setVaultMsg('Vault unlocked'); await reloadCreds(); } catch (e) { setVaultMsg(`Unlock failed: ${String(e)}`); } };
   const saveCred = async () => { try { await saveCredential({ origin, username, password }); setOrigin(''); setUsername(''); setPassword(''); setVaultMsg('Credential saved'); await reloadCreds(); } catch (e) { setVaultMsg(`Save failed: ${String(e)}`); } };
 
+  const handleClearLibrary = async () => { if (!confirm('Clear all images from the asset library? This cannot be undone.')) return; try { await invoke('storage_clear_library'); setStorageMsg('Library cleared'); loadStorageInfo(); } catch (e) { setStorageMsg(`Failed: ${e}`); } };
+  const handleClearProjects = async () => { if (!confirm('Delete ALL saved projects? This cannot be undone. The current board will remain in memory but will not be recoverable after closing.')) return; try { await invoke('storage_clear_projects'); setStorageMsg('Projects cleared'); loadStorageInfo(); } catch (e) { setStorageMsg(`Failed: ${e}`); } };
+  const handleRevealFolder = () => invoke('storage_reveal_folder').catch(e => setStorageMsg(`Failed: ${e}`));
+  const handleExportRefs = async () => {
+    const state = JSON.stringify({ textNotes: [], images, annotations: [], palettes: [], zoom, pan, title: boardTitle });
+    try {
+      const bytes = await invoke<number[]>('refs_export', { stateJson: state });
+      const blob = new Blob([new Uint8Array(bytes)], { type: 'application/octet-stream' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a'); a.href = url; a.download = `${boardTitle.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() || 'board'}.refs`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
+      setStorageMsg('Board exported as .refs file');
+    } catch (e) { setStorageMsg(`Export failed: ${e}`); }
+  };
+
   return (
     <div className={`absolute right-4 top-4 bottom-4 w-[min(720px,calc(100vw-32px))] z-[80] bg-[#1C1C1E]/98 shadow-2xl border border-[#3A3A3E] rounded-2xl flex flex-col transform transition-transform duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] overflow-hidden ${isSettingsOpen ? 'translate-x-0' : 'translate-x-[calc(100%+32px)]'}`}>
-      <div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0">
-        <h2 className="text-[#E0E0E0] font-medium flex items-center gap-2"><Settings size={16} className="text-[#808080]" /> Settings</h2>
-        <button onClick={() => setIsSettingsOpen(false)} className="text-[#808080] hover:text-[#E0E0E0] p-1 rounded-md hover:bg-white/5"><X size={18} /></button>
-      </div>
-
+      <div className="h-14 border-b border-white/5 flex items-center justify-between px-5 bg-black/20 shrink-0"><h2 className="text-[#E0E0E0] font-medium flex items-center gap-2"><Settings size={16} className="text-[#808080]" /> Settings</h2><button onClick={() => setIsSettingsOpen(false)} className="text-[#808080] hover:text-[#E0E0E0] p-1 rounded-md hover:bg-white/5"><X size={18} /></button></div>
       <div className="flex flex-1 min-h-0 overflow-hidden">
-        <nav className="w-[190px] bg-black/10 border-r border-white/5 p-3 flex flex-col gap-1 shrink-0 overflow-y-auto custom-scrollbar">
-          {tabs.map(tab => (
-            <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13px] text-left transition-colors ${activeTab === tab.id ? 'bg-[#0A84FF] text-white font-medium shadow-lg shadow-[#0A84FF]/10' : 'text-[#808080] hover:text-[#E0E0E0] hover:bg-white/5'}`}>
-              {tab.icon}{tab.label}
-            </button>
-          ))}
-        </nav>
-
-        <main className="flex-1 min-w-0 overflow-y-auto custom-scrollbar">
-          <div className="p-6 pb-10 text-[#E0E0E0] text-sm max-w-[520px] mx-auto">
-            {activeTab === 'general' && <Page title="General" subtitle="Core behavior for the canvas, window, and workspace.">
-              <SettingsGroup title="Startup & Window">
-                <SettingRow label="Open last board on startup" description="Load the most recent project automatically when Refstudio starts." active={true} onToggle={() => {}} disabled />
-                <SettingRow label="Always on Top" description="Keep Refstudio above other apps while drawing in Photoshop, Krita, Blender, or ZBrush." active={isAlwaysOnTop} onToggle={() => setIsAlwaysOnTop(!isAlwaysOnTop)} />
-                {isAlwaysOnTop && <RangeRow label="Overlay opacity" description="Adjust transparency while Refstudio is pinned above another app." value={bgOpacity} min={10} max={100} suffix="%" onChange={setBgOpacity} />}
-              </SettingsGroup>
-              <SettingsGroup title="Canvas">
-                <SettingRow icon={<Grid3X3 size={16} />} label="Grid" description="Show the subtle dotted canvas grid. This is intentionally kept in Settings, not the floating toolbar." active={showGrid} onToggle={() => setShowGrid(!showGrid)} />
-                <SettingRow icon={<Navigation size={16} />} label="Navigator / Minimap" description="Show a compact board overview in the bottom-right corner. Off by default to keep the canvas clean." active={showMinimap} onToggle={() => setShowMinimap(!showMinimap)} />
-              </SettingsGroup>
-            </Page>}
-
-            {activeTab === 'appearance' && <Page title="Appearance" subtitle="Visual defaults for artist-friendly, low-noise reference work.">
-              <SettingsGroup title="Theme">
-                <div className="p-4 grid grid-cols-2 gap-3">
-                  <ThemeCard active name="Dark Canvas" colors={['#1C1C1E', '#2A2A2E', '#3A3A3E', '#0A84FF']} />
-                  <ThemeCard name="Warm Studio" colors={['#221F1B', '#342D26', '#6B5A45', '#D4A373']} disabled />
-                </div>
-              </SettingsGroup>
-              <SettingsGroup title="Canvas Display">
-                <InfoRow icon={<Palette size={16} />} label="Canvas background" value="#1C1C1E" description="Neutral dark background from the Refstudio SRS visual language." />
-                <InfoRow icon={<MousePointer2 size={16} />} label="Interface behavior" value="Auto-hide chrome" description="The toolbar remains hidden until you move toward it, keeping the board dominant." />
-              </SettingsGroup>
-            </Page>}
-
-            {activeTab === 'shortcuts' && <Page title="Keyboard Shortcuts" subtitle="Hotkey-first controls for one-hand artist workflow.">
-              <SettingsGroup title="Panels">
-                <ShortcutRow combo="B" label="Toggle Browser Panel" />
-                <ShortcutRow combo="L" label="Toggle Library Panel" />
-                <ShortcutRow combo="Esc" label="Close panels / clear selection" />
-                <ShortcutRow combo="Ctrl + ," label="Open Settings" />
-              </SettingsGroup>
-              <SettingsGroup title="Canvas">
-                <ShortcutRow combo="Space + Drag" label="Pan canvas" />
-                <ShortcutRow combo="Scroll" label="Zoom to cursor" />
-                <ShortcutRow combo="Ctrl + 0" label="Fit all images" />
-                <ShortcutRow combo="Ctrl + 1" label="100% zoom" />
-                <ShortcutRow combo="A" label="Toggle annotation mode" />
-                <ShortcutRow combo="D" label="Desaturate selection" />
-                <ShortcutRow combo="Shift + D" label="Desaturate all" />
-                <ShortcutRow combo="Delete" label="Delete selection" />
-              </SettingsGroup>
-              <SettingsGroup title="Editing">
-                <ShortcutRow combo="Ctrl + Z" label="Undo" />
-                <ShortcutRow combo="Ctrl + Shift + Z" label="Redo" />
-                <ShortcutRow combo="Ctrl + A" label="Select all images" />
-                <ShortcutRow combo="Ctrl + G" label="Group selection" />
-                <ShortcutRow combo="Ctrl + Shift + G" label="Ungroup selection" />
-              </SettingsGroup>
-            </Page>}
-
-            {activeTab === 'privacy' && <Page title="Privacy" subtitle="Local-first browsing and capture controls.">
-              <SettingsGroup title="Muse Shield">
-                <div className="p-4 grid grid-cols-2 gap-3">
-                  <StatBox value={shieldReport.engine_rules.toLocaleString()} label="Rules" />
-                  <StatBox value={shieldReport.blocked_requests.toLocaleString()} label="Requests blocked" />
-                  <StatBox value={shieldReport.blocked_cosmetic.toLocaleString()} label="Elements hidden" />
-                  <StatBox value={shieldReport.https_upgrades.toLocaleString()} label="HTTPS upgrades" />
-                </div>
-                <div className="px-4 pb-4"><button onClick={() => invoke('shield_update_lists').catch(() => {})} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><RefreshCw size={14} /> Update filters</button></div>
-              </SettingsGroup>
-              <SettingsGroup title="Local Data">
-                <InfoRow icon={<Shield size={16} />} label="Privacy model" value="Local-first" description="Boards, library metadata, and browsing history stay on your machine." />
-                <ActionRow label="App navigation history" description="Clear Refstudio's app-managed URL history. This does not inspect system WebView cookies." actionLabel="Clear History" danger onClick={() => invoke('history_clear').catch(() => {})} />
-              </SettingsGroup>
-            </Page>}
-
-            {activeTab === 'vault' && <Page title="Password Vault" subtitle="Stronghold-backed local credential storage.">
-              <SettingsGroup title="Vault Status">
-                <div className="p-4 space-y-3">
-                  <p className="text-[#909090] text-xs leading-relaxed">Passwords are stored using the Tauri Stronghold frontend plugin. The vault unlocks only with your master password.</p>
-                  {!vaultUnlocked ? <div className="flex gap-2"><input type="password" value={master} onChange={e => setMaster(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') unlock(); }} placeholder="Master password" className="flex-1 bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><button onClick={unlock} className="px-4 py-2 bg-[#0A84FF] rounded-xl text-white flex items-center gap-2"><Unlock size={14} /> Unlock</button></div> : <button onClick={() => { lockVault(); setVaultUnlocked(false); setCreds([]); }} className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white flex items-center gap-2"><Lock size={14} /> Lock vault</button>}
-                  {vaultMsg && <div className="text-xs text-[#FFD60A]">{vaultMsg}</div>}
-                </div>
-              </SettingsGroup>
-              {vaultUnlocked && <SettingsGroup title="Credentials">
-                <div className="p-4 space-y-2">
-                  <input value={origin} onChange={e => setOrigin(e.target.value)} placeholder="Site / origin (example.com)" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
-                  <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username / email" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
-                  <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" />
-                  <button onClick={saveCred} className="w-full px-3 py-2.5 bg-[#0A84FF] rounded-xl text-white flex items-center justify-center gap-2"><Plus size={14} /> Save credential</button>
-                </div>
-                <div className="px-4 pb-4 space-y-2">{creds.map(c => <div key={c.id} className="flex items-center justify-between bg-black/20 border border-white/5 rounded-xl p-3"><div><div className="text-white text-sm">{c.username}</div><div className="text-[#808080] text-xs">{c.origin}</div></div><button onClick={() => deleteCredential(c.id).then(reloadCreds)} className="text-red-300 hover:bg-red-500/10 rounded-lg p-2"><Trash2 size={14} /></button></div>)}</div>
-              </SettingsGroup>}
-            </Page>}
+        <nav className="w-[190px] bg-black/10 border-r border-white/5 p-3 flex flex-col gap-1 shrink-0 overflow-y-auto custom-scrollbar">{tabs.map(tab => <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-[13px] text-left transition-colors ${activeTab === tab.id ? 'bg-[#0A84FF] text-white font-medium shadow-lg shadow-[#0A84FF]/10' : 'text-[#808080] hover:text-[#E0E0E0] hover:bg-white/5'}`}>{tab.icon}{tab.label}</button>)}</nav>
+        <main className="flex-1 min-w-0 overflow-y-auto custom-scrollbar"><div className="p-6 pb-10 text-[#E0E0E0] text-sm max-w-[520px] mx-auto">
+          {activeTab === 'general' && <Page title="General" subtitle="Core behavior for the canvas, window, and workspace."><SettingsGroup title="Startup & Window"><SettingRow label="Open last board on startup" description="Load the most recent project automatically when Refstudio starts." active={true} onToggle={() => {}} disabled /><SettingRow label="Always on Top" description="Keep Refstudio above other apps while drawing in Photoshop, Krita, Blender, or ZBrush." active={isAlwaysOnTop} onToggle={() => setIsAlwaysOnTop(!isAlwaysOnTop)} />{isAlwaysOnTop && <RangeRow label="Overlay opacity" description="Adjust transparency while Refstudio is pinned above another app." value={bgOpacity} min={10} max={100} suffix="%" onChange={setBgOpacity} />}</SettingsGroup><SettingsGroup title="Canvas"><SettingRow icon={<Grid3X3 size={16} />} label="Grid" description="Show the subtle dotted canvas grid. This is intentionally kept in Settings, not the floating toolbar." active={showGrid} onToggle={() => setShowGrid(!showGrid)} /><SettingRow icon={<Navigation size={16} />} label="Navigator / Minimap" description="Show a compact board overview in the bottom-right corner. Off by default to keep the canvas clean." active={showMinimap} onToggle={() => setShowMinimap(!showMinimap)} /></SettingsGroup></Page>}
+          {activeTab === 'appearance' && <Page title="Appearance" subtitle="Visual defaults for artist-friendly, low-noise reference work."><SettingsGroup title="Theme"><div className="p-4 grid grid-cols-2 gap-3"><ThemeCard active name="Dark Canvas" colors={['#1C1C1E', '#2A2A2E', '#3A3A3E', '#0A84FF']} /><ThemeCard name="Warm Studio" colors={['#221F1B', '#342D26', '#6B5A45', '#D4A373']} disabled /></div></SettingsGroup><SettingsGroup title="Canvas Display"><InfoRow icon={<Palette size={16} />} label="Canvas background" value="#1C1C1E" description="Neutral dark background from the Refstudio SRS visual language." /><InfoRow icon={<MousePointer2 size={16} />} label="Interface behavior" value="Auto-hide chrome" description="The toolbar remains hidden until you move toward it, keeping the board dominant." /></SettingsGroup></Page>}
+          {activeTab === 'shortcuts' && <Page title="Keyboard Shortcuts" subtitle="Hotkey-first controls for one-hand artist workflow."><SettingsGroup title="Panels"><ShortcutRow combo="B" label="Toggle Browser Panel" /><ShortcutRow combo="L" label="Toggle Library Panel" /><ShortcutRow combo="Esc" label="Close panels / clear selection" /><ShortcutRow combo="Ctrl + ," label="Open Settings" /></SettingsGroup><SettingsGroup title="Canvas"><ShortcutRow combo="Space + Drag" label="Pan canvas" /><ShortcutRow combo="Scroll" label="Zoom to cursor" /><ShortcutRow combo="Ctrl + 0" label="Fit all images" /><ShortcutRow combo="Ctrl + 1" label="100% zoom" /><ShortcutRow combo="A" label="Toggle annotation mode" /><ShortcutRow combo="D" label="Desaturate selection" /><ShortcutRow combo="Shift + D" label="Desaturate all" /><ShortcutRow combo="Delete" label="Delete selection" /></SettingsGroup><SettingsGroup title="Editing"><ShortcutRow combo="Ctrl + Z" label="Undo" /><ShortcutRow combo="Ctrl + Shift + Z" label="Redo" /><ShortcutRow combo="Ctrl + A" label="Select all images" /><ShortcutRow combo="Ctrl + G" label="Group selection" /><ShortcutRow combo="Ctrl + Shift + G" label="Ungroup selection" /></SettingsGroup></Page>}
+          {activeTab === 'privacy' && <Page title="Privacy" subtitle="Local-first browsing and capture controls."><SettingsGroup title="Muse Shield"><div className="p-4 grid grid-cols-2 gap-3"><StatBox value={shieldReport.engine_rules.toLocaleString()} label="Rules" /><StatBox value={shieldReport.blocked_requests.toLocaleString()} label="Requests blocked" /><StatBox value={shieldReport.blocked_cosmetic.toLocaleString()} label="Elements hidden" /><StatBox value={shieldReport.https_upgrades.toLocaleString()} label="HTTPS upgrades" /></div><div className="px-4 pb-4"><button onClick={() => invoke('shield_update_lists').catch(() => {})} className="w-full py-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-sm flex items-center justify-center gap-2"><RefreshCw size={14} /> Update filters</button></div></SettingsGroup><SettingsGroup title="Local Data"><InfoRow icon={<Shield size={16} />} label="Privacy model" value="Local-first" description="Boards, library metadata, and browsing history stay on your machine." /><ActionRow label="App navigation history" description="Clear Refstudio's app-managed URL history." actionLabel="Clear History" danger onClick={() => invoke('history_clear').catch(() => {})} /></SettingsGroup></Page>}
+          {activeTab === 'vault' && <Page title="Password Vault" subtitle="Stronghold-backed local credential storage."><SettingsGroup title="Vault Status"><div className="p-4 space-y-3"><p className="text-[#909090] text-xs leading-relaxed">Passwords are stored using the Tauri Stronghold frontend plugin. The vault unlocks only with your master password.</p>{!vaultUnlocked ? <div className="flex gap-2"><input type="password" value={master} onChange={e => setMaster(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') unlock(); }} placeholder="Master password" className="flex-1 bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><button onClick={unlock} className="px-4 py-2 bg-[#0A84FF] rounded-xl text-white flex items-center gap-2"><Unlock size={14} /> Unlock</button></div> : <button onClick={() => { lockVault(); setVaultUnlocked(false); setCreds([]); }} className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-white flex items-center gap-2"><Lock size={14} /> Lock vault</button>}{vaultMsg && <div className="text-xs text-[#FFD60A]">{vaultMsg}</div>}</div></SettingsGroup>{vaultUnlocked && <SettingsGroup title="Credentials"><div className="p-4 space-y-2"><input value={origin} onChange={e => setOrigin(e.target.value)} placeholder="Site / origin (example.com)" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username / email" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" className="w-full bg-black/30 border border-white/10 rounded-xl px-3 py-2 outline-none focus:border-[#0A84FF]" /><button onClick={saveCred} className="w-full px-3 py-2.5 bg-[#0A84FF] rounded-xl text-white flex items-center justify-center gap-2"><Plus size={14} /> Save credential</button></div><div className="px-4 pb-4 space-y-2">{creds.map(c => <div key={c.id} className="flex items-center justify-between bg-black/20 border border-white/5 rounded-xl p-3"><div><div className="text-white text-sm">{c.username}</div><div className="text-[#808080] text-xs">{c.origin}</div></div><button onClick={() => deleteCredential(c.id).then(reloadCreds)} className="text-red-300 hover:bg-red-500/10 rounded-lg p-2"><Trash2 size={14} /></button></div>)}</div></SettingsGroup>}</Page>}
 
-            {activeTab === 'storage' && <Page title="Storage" subtitle="Where Refstudio keeps boards, images, and local state.">
-              <SettingsGroup title="Storage Model">
-                <InfoRow icon={<Database size={16} />} label="Board data" value="Local project state" description="Canvas layout, annotations, palettes, and references are saved locally." />
-                <InfoRow icon={<HardDrive size={16} />} label="Asset library" value="Embedded metadata" description="Imported images are stored as local data URLs in library state with hash-based deduplication." />
-                <InfoRow icon={<Clock size={16} />} label="Auto-save" value="800ms debounce" description="Project state is saved shortly after edits to reduce risk of data loss." />
-              </SettingsGroup>
-            </Page>}
+          {activeTab === 'storage' && <Page title="Storage" subtitle="Manage local data, export boards, and inspect disk usage.">
+            <SettingsGroup title="Usage">
+              {storageLoading ? <div className="px-4 py-6 text-center text-[#808080]"><RefreshCw size={16} className="animate-spin mx-auto mb-2" />Loading...</div> : storageInfo ? <div className="p-4 grid grid-cols-2 gap-3">
+                <StatBox value={formatBytes(storageInfo.total_size_bytes)} label="Total storage" />
+                <StatBox value={String(storageInfo.file_count)} label="Files on disk" />
+                <StatBox value={String(storageInfo.project_count)} label="Saved projects" />
+                <StatBox value={String(storageInfo.library_count)} label="Library images" />
+              </div> : <div className="px-4 py-4 text-[#808080] text-xs">Could not load storage info.</div>}
+              {storageInfo && <div className="px-4 pb-4 space-y-2">
+                <InfoRow icon={<Database size={16} />} label="Projects data" value={formatBytes(storageInfo.projects_size_bytes)} description={`${storageInfo.project_count} board files saved locally.`} />
+                <InfoRow icon={<ImageIcon size={16} />} label="Asset library" value={formatBytes(storageInfo.library_size_bytes)} description={`${storageInfo.library_count} images with embedded data URLs and extracted palettes.`} />
+                <InfoRow icon={<Clock size={16} />} label="Auto-save interval" value="800ms" description="Project state is debounced then written to disk after edits." />
+              </div>}
+            </SettingsGroup>
+            <SettingsGroup title="Data Location">
+              <div className="px-4 py-3 flex items-center justify-between gap-4">
+                <div><div className="text-[14px] font-medium text-white">App data folder</div><div className="text-[11px] text-[#8A8A8C] mt-1 font-mono break-all leading-5">{storageInfo?.data_path || '...'}</div></div>
+                <button onClick={handleRevealFolder} className="shrink-0 px-3 py-2 rounded-xl text-[12px] font-semibold border bg-white/5 text-white border-white/10 hover:bg-white/10 flex items-center gap-1.5"><FolderOpen size={13} /> Open</button>
+              </div>
+            </SettingsGroup>
+            <SettingsGroup title="Export">
+              <ActionRow label="Export current board as .refs" description="Creates a portable .refs archive with all images embedded. Can be shared or backed up." actionLabel="Export .refs" onClick={handleExportRefs} />
+            </SettingsGroup>
+            <SettingsGroup title="Danger Zone">
+              <ActionRow label="Clear asset library" description="Remove all imported images from the library. Does not affect boards already open." actionLabel="Clear Library" danger onClick={handleClearLibrary} />
+              <ActionRow label="Delete all projects" description="Remove every saved board file from disk. The current board stays in memory until you close the app." actionLabel="Delete Projects" danger onClick={handleClearProjects} />
+            </SettingsGroup>
+            {storageMsg && <div className="mt-3 text-xs text-[#FFD60A] bg-[#FFD60A]/10 border border-[#FFD60A]/20 rounded-xl px-3 py-2">{storageMsg}</div>}
+          </Page>}
 
-            {activeTab === 'about' && <Page title="About" subtitle="Refstudio alpha build information.">
-              <div className="flex flex-col items-center text-center mt-8 gap-3"><div className="w-20 h-20 bg-[#2A2A2E] rounded-2xl flex items-center justify-center"><Monitor size={32} className="text-[#0A84FF]" /></div><h1 className="text-2xl font-semibold">Refstudio</h1><p className="text-[#808080]">1.0.0-alpha</p><p className="max-w-sm text-[#909090] text-sm leading-relaxed">A local-first artist reference board with embedded browser capture, asset library, annotations, and privacy-respecting storage.</p></div>
-            </Page>}
-          </div>
-        </main>
+          {activeTab === 'about' && <Page title="About" subtitle="Refstudio alpha build information."><div className="flex flex-col items-center text-center mt-8 gap-3"><div className="w-20 h-20 bg-[#2A2A2E] rounded-2xl flex items-center justify-center"><Monitor size={32} className="text-[#0A84FF]" /></div><h1 className="text-2xl font-semibold">Refstudio</h1><p className="text-[#808080]">1.0.0-alpha</p><p className="max-w-sm text-[#909090] text-sm leading-relaxed">A local-first artist reference board with embedded browser capture, asset library, annotations, and privacy-respecting storage.</p></div></Page>}
+        </div></main>
       </div>
     </div>
   );