feat: add cache management section to Preferences panel

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/PreferencesPanel.svelte

@@ -6,6 +6,8 @@
     setCookieSource,
     type CookieSource,
   } from '$lib/stores/preferences.svelte';
+  import { getCacheStats, clearAllCache } from '$lib/bindings/cache';
+  import type { CacheStats } from '$lib/bindings/cache';
 
   let { onClose }: { onClose: () => void } = $props();
 
@@ -13,6 +15,34 @@
   let cookieFilePath = $state(
     preferences.cookieSource.type === 'file' ? preferences.cookieSource.path : ''
   );
+  let cacheStats = $state<CacheStats | null>(null);
+  let clearingCache = $state(false);
+
+  $effect(() => {
+    getCacheStats().then((stats) => {
+      cacheStats = stats;
+    });
+  });
+
+  function formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    const val = bytes / Math.pow(1024, i);
+    return `${val.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+  }
+
+  async function handleClearAllCache() {
+    clearingCache = true;
+    try {
+      await clearAllCache();
+      cacheStats = { entryCount: 0, totalBytes: 0 };
+    } catch (err) {
+      console.error('Failed to clear cache:', err);
+    } finally {
+      clearingCache = false;
+    }
+  }
 
   async function pickOutputDirectory() {
     const selected = await open({
@@ -128,6 +158,23 @@
       </div>
     </section>
 
+    <section>
+      <h3>Cache</h3>
+      {#if cacheStats}
+        <p class="cache-info">
+          {formatBytes(cacheStats.totalBytes)} used across {cacheStats.entryCount} video{cacheStats.entryCount === 1 ? '' : 's'}
+        </p>
+      {:else}
+        <p class="cache-info">Loading…</p>
+      {/if}
+      <button
+        onclick={handleClearAllCache}
+        disabled={clearingCache || (cacheStats?.entryCount === 0)}
+      >
+        {clearingCache ? 'Clearing…' : 'Clear All Cache'}
+      </button>
+    </section>
+
     <div class="actions">
       <button class="primary" onclick={onClose}>Done</button>
     </div>
@@ -207,6 +254,12 @@
     margin-left: 20px;
   }
 
+  .cache-info {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+  }
+
   .actions {
     display: flex;
     justify-content: flex-end;