From 404d57f0b12e4547625d68c8728df6522533bbf8 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Wed, 24 Jun 2026 01:17:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20redesigned=20UI=20=E2=80=94=20AI=20Dige?=
 =?UTF-8?q?st=20hero,=20keyboard=20nav=20(j/k/=E2=86=91=E2=86=93),=20dark/?=
 =?UTF-8?q?light=20mode,=20description-based=20summaries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/summarizer.py                       |  28 +-
 frontend/src/app.css                        |  28 ++
 frontend/src/routes/YoutubeDashboard.svelte | 422 ++++++--------------
 3 files changed, 175 insertions(+), 303 deletions(-)

diff --git a/backend/summarizer.py b/backend/summarizer.py
index babc530..7c2ceeb 100644
--- a/backend/summarizer.py
+++ b/backend/summarizer.py
@@ -16,16 +16,17 @@ MODEL = os.environ.get("DEEPSEEK_MODEL", "deepseek-chat")
 
 SYSTEM_PROMPT = "You are a professional video summarizing assistant. Create highly concise, structured summaries from video transcripts. Your output must be in Chinese if the transcript is Chinese, otherwise in English."
 
-PROMPT = """Read the following YouTube video transcript and write a super-concise, structured summary.
+PROMPT = """Read the following YouTube video information and write a super-concise, structured summary.
 
 Guidelines:
 1. **Core Hook (1 sentence in bold)**: Explain exactly what this video is about and its main conclusion or thesis.
 2. **Key Takeaways (max 4-5 bullet points)**: Summarize the most important points, arguments, or steps. Focus on information density. Skip fluff, intros, sponsor segments, and generic remarks.
 3. **Actionable Idea / Final Verdict**: A single line explaining who this is for or a key action item.
 
-Keep the entire summary under 150 words. Be extremely direct so I can decide in 10 seconds if I should watch the full video or skip it. Use the same language as the transcript (likely Chinese or English).
+The input may be a full transcript or just a title+description. Extract maximum value from whatever is provided.
+Keep the entire summary under 150 words. Use the same language as the source (Chinese or English).
 
-Transcript:
+Content:
 {transcript}"""
 
 COOKIES_PATH = None
@@ -62,10 +63,27 @@ def download_transcript(video_id: str) -> str:
         return None
 
 async def summarize_video(video_id: str) -> str:
-    # 1. Fetch transcript
+    # 1. Try transcript, fall back to description
     transcript = download_transcript(video_id)
+    
+    if not transcript:
+        # Fallback: use video description from YouTube API
+        try:
+            from auth import get_credentials
+            from googleapiclient.discovery import build
+            creds = get_credentials()
+            youtube = build("youtube", "v3", credentials=creds)
+            resp = youtube.videos().list(part="snippet", id=video_id).execute()
+            items = resp.get("items", [])
+            if items:
+                desc = items[0]["snippet"].get("description", "")
+                title = items[0]["snippet"].get("title", "")
+                if desc:
+                    transcript = f"Title: {title}\n\nDescription: {desc[:3000]}"
+        except Exception as e:
+            log.warning(f"Description fallback failed for {video_id}: {e}")
+    
     if not transcript:
-        # Save placeholder transcript / status
         async with aiosqlite.connect(DB_PATH) as db:
             await db.execute(
                 "UPDATE videos SET transcript = ?, summary = ? WHERE video_id = ?",
diff --git a/frontend/src/app.css b/frontend/src/app.css
index b5c61c9..b64e627 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --bg-primary: #030712;
+  --bg-secondary: #111827;
+  --bg-tertiary: #1f2937;
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7280;
+  --border: #1f2937;
+  --accent: #ef4444;
+  --accent-hover: #dc2626;
+  --card-bg: #111827;
+}
+
+:root.light {
+  --bg-primary: #f9fafb;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f3f4f6;
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-muted: #9ca3af;
+  --border: #e5e7eb;
+  --accent: #dc2626;
+  --accent-hover: #b91c1c;
+  --card-bg: #ffffff;
+}
+
+html { background: var(--bg-primary); color: var(--text-primary); }
diff --git a/frontend/src/routes/YoutubeDashboard.svelte b/frontend/src/routes/YoutubeDashboard.svelte
index 3ce520b..7bd5a9b 100644
--- a/frontend/src/routes/YoutubeDashboard.svelte
+++ b/frontend/src/routes/YoutubeDashboard.svelte
@@ -1,15 +1,20 @@
 <script>
   import { onMount } from 'svelte';
 
-  // Svelte 5 Runes for Reactive State
   let videos = $state([]);
   let selectedVideo = $state(null);
-  let activeTab = $state('pending'); // pending, read, skipped
+  let activeTab = $state('pending');
   let isLoading = $state(false);
   let isSyncing = $state(false);
   let syncMessage = $state('');
+  let theme = $state(localStorage.getItem('theme') || 'dark');
+
+  function toggleTheme() {
+    theme = theme === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('theme', theme);
+    document.documentElement.className = theme;
+  }
 
-  // Fetch videos from backend api
   async function loadVideos() {
     isLoading = true;
     try {
@@ -17,7 +22,6 @@
       if (res.ok) {
         videos = await res.json();
         if (videos.length > 0) {
-          // Keep current video selected if still in the list, otherwise select first
           const currentId = selectedVideo?.video_id;
           const found = videos.find(v => v.video_id === currentId);
           selectedVideo = found || videos[0];
@@ -32,347 +36,169 @@
     }
   }
 
-  // Trigger subscription sync in background
   async function syncSubscriptions() {
     isSyncing = true;
-    syncMessage = 'Syncing subscriptions & generating summaries...';
+    syncMessage = 'Syncing...';
     try {
       const res = await fetch('/api/videos/fetch', { method: 'POST' });
-      if (res.ok) {
-        syncMessage = 'Sync started in background. Refreshing in 6 seconds...';
-        setTimeout(() => {
-          loadVideos();
-          isSyncing = false;
-          syncMessage = '';
-        }, 6000);
-      }
-    } catch (err) {
-      console.error("Error syncing:", err);
-      isSyncing = false;
-      syncMessage = '';
-    }
+      if (res.ok) setTimeout(() => { loadVideos(); isSyncing = false; syncMessage = ''; }, 6000);
+    } catch (err) { isSyncing = false; syncMessage = ''; }
   }
 
-  // Update status (pending -> read/skipped etc)
   async function updateStatus(videoId, newStatus) {
-    try {
-      const res = await fetch(`/api/videos/${videoId}/status`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: newStatus })
-      });
-      if (res.ok) {
-        // Remove from current list
-        videos = videos.filter(v => v.video_id !== videoId);
-        if (selectedVideo && selectedVideo.video_id === videoId) {
-          selectedVideo = videos.length > 0 ? videos[0] : null;
-        }
-      }
-    } catch (err) {
-      console.error("Error updating status:", err);
-    }
+    await fetch(`/api/videos/${videoId}/status`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: newStatus }) });
+    videos = videos.filter(v => v.video_id !== videoId);
+    if (selectedVideo?.video_id === videoId) selectedVideo = videos[0] || null;
   }
 
-  // Trigger summary generation for a single video manually
   async function generateSummary(videoId) {
-    if (selectedVideo && selectedVideo.video_id === videoId) {
-      selectedVideo.summary = "Generating summary now, please wait...";
-    }
-    try {
-      const res = await fetch(`/api/videos/${videoId}/summarize`, { method: 'POST' });
-      if (res.ok) {
-        setTimeout(() => {
-          loadVideos();
-        }, 3000);
-      }
-    } catch (err) {
-      console.error("Error summarizing:", err);
+    if (selectedVideo?.video_id === videoId) selectedVideo.summary = "Generating...";
+    await fetch(`/api/videos/${videoId}/summarize`, { method: 'POST' });
+    setTimeout(() => loadVideos(), 3000);
+  }
+
+  $effect(() => { if (activeTab) loadVideos(); });
+  onMount(() => {
+    document.documentElement.className = theme;
+    loadVideos();
+    window.addEventListener('keydown', handleKeydown);
+    return () => window.removeEventListener('keydown', handleKeydown);
+  });
+
+  function handleKeydown(e) {
+    if (!videos.length) return;
+    const idx = videos.findIndex(v => v.video_id === selectedVideo?.video_id);
+    if (e.key === 'j' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = idx < videos.length - 1 ? idx + 1 : 0;
+      selectedVideo = videos[next];
+      scrollToVideo(next);
+    } else if (e.key === 'k' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = idx > 0 ? idx - 1 : videos.length - 1;
+      selectedVideo = videos[prev];
+      scrollToVideo(prev);
+    } else if (e.key === 'r' || e.key === 'm') {
+      e.preventDefault();
+      if (selectedVideo) updateStatus(selectedVideo.video_id, 'read');
+    } else if (e.key === 's') {
+      e.preventDefault();
+      if (selectedVideo) updateStatus(selectedVideo.video_id, 'skipped');
     }
   }
 
-  // Watch for tab change
-  $effect(() => {
-    if (activeTab) {
-      loadVideos();
-    }
-  });
-
-  onMount(() => {
-    loadVideos();
-  });
-
-  function formatDuration(seconds) {
-    if (!seconds) return '';
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    if (h > 0) {
-      return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-    }
-    return `${m}:${s.toString().padStart(2, '0')}`;
+  function scrollToVideo(index) {
+    requestAnimationFrame(() => {
+      const el = document.querySelector(`[data-video-index="${index}"]`);
+      if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      // Also scroll summary panel to top
+      const main = document.querySelector('main');
+      if (main) main.scrollTop = 0;
+    });
   }
 
   function formatMarkdown(text) {
-    if (!text) return '<p class="text-gray-400">Loading summary...</p>';
-
-    // Parse bold text **example**
-    let html = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-red-400">$1</strong>');
-
-    // Parse bullet points
-    html = html.replace(/^\s*[-*]\s+(.*)$/gm, '<li class="ml-5 list-disc mb-1 text-gray-200">$1</li>');
-
-    // Handle line breaks
+    if (!text) return '<p class="opacity-50 italic">No summary yet.</p>';
+    let html = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold" style="color:var(--accent)">$1</strong>');
+    html = html.replace(/^\s*[-*]\s+(.*)$/gm, '<li class="ml-5 list-disc mb-1" style="color:var(--text-primary)">$1</li>');
     html = html.split('\n').map(line => {
       if (line.trim().startsWith('<li')) return line;
       if (line.trim() === '') return '<div class="h-2"></div>';
       return `<p class="mb-2 leading-relaxed">${line}</p>`;
     }).join('');
-
     return html;
   }
 </script>
 
-<div class="flex flex-col h-screen bg-gray-950 text-gray-100">
-  <!-- Top Navigation Header -->
-  <header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-gray-800">
+<div style="background:var(--bg-primary);color:var(--text-primary);min-height:100vh">
+  <!-- Top bar -->
+  <header style="background:var(--bg-secondary);border-bottom:1px solid var(--border);" class="flex items-center justify-between px-5 py-2.5">
     <div class="flex items-center space-x-3">
-      <span class="text-2xl font-black tracking-wider text-red-500">T YouTube</span>
-      <span class="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400 uppercase tracking-widest font-semibold border border-gray-700">text feed</span>
+      <span class="text-lg font-black tracking-wider" style="color:var(--accent)">T YouTube</span>
+      <span class="text-[10px] px-2 py-0.5 rounded font-semibold uppercase tracking-widest" style="background:var(--bg-tertiary);color:var(--text-muted)">text feed</span>
     </div>
-
-    <div class="flex items-center space-x-4">
-      {#if syncMessage}
-        <span class="text-xs text-red-400 animate-pulse">{syncMessage}</span>
-      {/if}
-      <button
-        onclick={syncSubscriptions}
-        disabled={isSyncing}
-        class="flex items-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-800 disabled:text-gray-600 text-white text-sm font-semibold rounded-lg shadow-lg hover:shadow-red-900/30 transition duration-150"
-      >
-        {#if isSyncing}
-          <svg class="animate-spin h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-          <span>Syncing...</span>
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.213 6H16" />
-          </svg>
-          <span>Sync Subscriptions</span>
-        {/if}
+    <div class="flex items-center space-x-3">
+      <button onclick={syncSubscriptions} disabled={isSyncing}
+        class="px-3 py-1.5 text-xs font-bold rounded-lg transition"
+        style="background:var(--accent);color:white">
+        {isSyncing ? 'Syncing...' : 'Sync'}
+      </button>
+      <button onclick={toggleTheme}
+        class="text-sm px-2 py-1 rounded transition" style="color:var(--text-muted)"
+        title="Toggle theme">
+        {theme === 'dark' ? '☀' : '☾'}
       </button>
     </div>
   </header>
 
-  <!-- Main Grid Dashboard layout -->
-  <div class="flex flex-1 overflow-hidden">
-    <!-- Left Navigation Sidebar & Video List -->
-    <aside class="w-80 md:w-96 flex flex-col border-r border-gray-900 bg-gray-900/40">
-      <!-- Tabs Selector -->
-      <div class="flex p-2 bg-gray-900 border-b border-gray-900">
-        <button
-          onclick={() => activeTab = 'pending'}
-          class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'pending' ? 'bg-red-600/10 text-red-400 border border-red-500/20' : 'text-gray-400 hover:text-gray-200'}"
-        >
-          Pending
-        </button>
-        <button
-          onclick={() => activeTab = 'read'}
-          class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'read' ? 'bg-green-600/10 text-green-400 border border-green-500/20' : 'text-gray-400 hover:text-gray-200'}"
-        >
-          Read
-        </button>
-        <button
-          onclick={() => activeTab = 'skipped'}
-          class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'skipped' ? 'bg-gray-800 text-gray-300 border border-gray-700/50' : 'text-gray-400 hover:text-gray-200'}"
-        >
-          Skipped
-        </button>
+  <div class="flex" style="min-height:calc(100vh - 44px)">
+    <!-- Left: video list -->
+    <aside style="width:280px;background:var(--bg-secondary);border-right:1px solid var(--border)" class="flex flex-col flex-shrink-0">
+      <div class="flex p-1.5" style="border-bottom:1px solid var(--border)">
+        {#each ['pending','read','skipped'] as tab}
+          <button onclick={() => activeTab = tab}
+            class="flex-1 py-1.5 text-center text-[11px] font-bold rounded uppercase transition"
+            style="color: {activeTab === tab ? 'var(--accent)' : 'var(--text-muted)'}">
+            {tab}
+          </button>
+        {/each}
       </div>
-
-      <!-- Scrollable Video Cards List -->
-      <div class="flex-1 overflow-y-auto divide-y divide-gray-900/50">
-        {#if isLoading && videos.length === 0}
-          <div class="flex flex-col items-center justify-center h-48 space-y-2">
-            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
-            <span class="text-sm text-gray-500">Loading videos...</span>
-          </div>
-        {:else if videos.length === 0}
-          <div class="flex flex-col items-center justify-center h-64 text-gray-500 space-y-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
-            </svg>
-            <span class="text-sm">No videos found.</span>
-          </div>
-        {:else}
-          {#each videos as video (video.video_id)}
-            <button
-              onclick={() => selectedVideo = video}
-              class="w-full text-left p-3.5 hover:bg-gray-900/60 focus:outline-none transition duration-150 flex items-start space-x-3.5 {selectedVideo?.video_id === video.video_id ? 'bg-gray-900 border-l-4 border-red-500 pl-2.5' : 'border-l-4 border-transparent'}"
-            >
-              <!-- Thumbnail/Duration badge -->
-              <div class="relative w-24 h-14 bg-gray-800 rounded overflow-hidden flex-shrink-0">
-                <img src={video.thumbnail_url} alt="" class="object-cover w-full h-full" />
-                {#if video.duration}
-                  <span class="absolute bottom-0.5 right-0.5 bg-black/85 text-[10px] font-bold px-1 rounded text-white tracking-wider">
-                    {formatDuration(video.duration)}
-                  </span>
-                {/if}
-              </div>
-
-              <!-- Video metadata summary -->
-              <div class="flex-1 min-w-0">
-                <span class="block text-[11px] font-semibold text-red-500/80 truncate mb-0.5">{video.channel_name}</span>
-                <h3 class="text-sm font-bold text-gray-100 line-clamp-2 leading-snug">{video.title}</h3>
-                <span class="block text-[10px] text-gray-500 mt-1">{video.publish_date || 'Date unknown'}</span>
-              </div>
-            </button>
-          {/each}
-        {/if}
+      <div class="flex-1 overflow-y-auto divide-y" style="border-color:var(--border)">
+        {#each videos as video (video.video_id)}
+          {@const i = videos.indexOf(video)}
+          <button onclick={() => { selectedVideo = video; document.querySelector('main')?.scrollTo(0,0); }}
+            data-video-index={i}
+            class="w-full text-left p-3 transition flex items-start space-x-3"
+            style="border-left:2px solid {selectedVideo?.video_id === video.video_id ? 'var(--accent)' : 'transparent'};
+                   background:{selectedVideo?.video_id === video.video_id ? 'var(--bg-tertiary)' : 'transparent'}">
+            <img src={video.thumbnail_url} alt="" class="w-20 h-12 rounded object-cover flex-shrink-0" style="background:var(--bg-tertiary)" />
+            <div class="min-w-0">
+              <span class="block text-[10px] font-semibold truncate" style="color:var(--accent)">{video.channel_name}</span>
+              <h3 class="text-xs font-bold line-clamp-2 leading-snug" style="color:var(--text-primary)">{video.title}</h3>
+              <span class="text-[10px] mt-0.5 block" style="color:var(--text-muted)">{video.publish_date || ''}</span>
+            </div>
+          </button>
+        {/each}
       </div>
     </aside>
 
-    <!-- Right Detailed Digest Panel -->
-    <main class="flex-1 flex flex-col bg-gray-950/80 overflow-y-auto">
+    <!-- Right: summary PRIMARY -->
+    <main class="flex-1 overflow-y-auto" style="background:var(--bg-primary)">
       {#if selectedVideo}
-        <div class="p-6 md:p-8 max-w-4xl w-full mx-auto space-y-6">
-          <!-- Video Details Header -->
-          <div class="border-b border-gray-900 pb-5 space-y-3">
-            <span class="text-xs px-2.5 py-1 font-bold bg-gray-900 text-red-400 rounded-full border border-gray-800">
-              {selectedVideo.channel_name}
-            </span>
-            <h1 class="text-2xl md:text-3xl font-extrabold text-gray-100 tracking-tight leading-tight">
-              {selectedVideo.title}
-            </h1>
-
-            <div class="flex items-center space-x-4 text-xs text-gray-500">
-              <span>Published: <strong>{selectedVideo.publish_date || 'Unknown'}</strong></span>
-              {#if selectedVideo.duration}
-                <span>•</span>
-                <span>Length: <strong>{formatDuration(selectedVideo.duration)}</strong></span>
-              {/if}
-            </div>
-          </div>
-
-          <!-- Video Actions buttons block -->
-          <div class="flex flex-wrap gap-3">
-            {#if activeTab === 'pending'}
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'read')}
-                class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg shadow-lg shadow-green-950/30 transition duration-150"
-              >
-                Mark as Read
-              </button>
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
-                class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
-              >
-                Skip Video
-              </button>
-            {:else if activeTab === 'read'}
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
-                class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
-              >
-                Revert to Pending
-              </button>
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
-                class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
-              >
-                Move to Skipped
-              </button>
-            {:else if activeTab === 'skipped'}
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
-                class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
-              >
-                Revert to Pending
-              </button>
-              <button
-                onclick={() => updateStatus(selectedVideo.video_id, 'read')}
-                class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg transition duration-150"
-              >
-                Move to Read
-              </button>
-            {/if}
-
-            <a
-              href={selectedVideo.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-lg flex items-center space-x-2 transition duration-150"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-              </svg>
-              <span>Watch on YouTube</span>
-            </a>
-          </div>
-
-          <!-- Video Visual Block -->
-          <div class="relative w-full aspect-video rounded-xl overflow-hidden bg-gray-900 border border-gray-800 shadow-2xl">
-            <img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full opacity-40 blur-sm" />
-            <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
-              <div class="relative w-36 h-20 rounded shadow-md overflow-hidden mb-3 border border-gray-700">
-                <img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full" />
-              </div>
-              <a
-                href={selectedVideo.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="px-4 py-2 bg-red-600/90 hover:bg-red-600 text-white text-xs font-extrabold uppercase tracking-wider rounded border border-red-500 shadow transition duration-150"
-              >
-                Play original video
-              </a>
-            </div>
-          </div>
-
-          <!-- Digest Content Block -->
-          <div class="bg-gray-900/60 rounded-xl border border-gray-800/80 p-6 md:p-8 space-y-6">
-            <div class="flex items-center justify-between border-b border-gray-800 pb-3">
-              <h2 class="text-lg font-black tracking-wide text-gray-200 uppercase">Video Digest Highlight</h2>
-
+        <div class="p-6 max-w-3xl mx-auto space-y-4">
+          <!-- ★ AI Digest -->
+          <div class="rounded-xl border p-5 space-y-3 shadow-lg" style="background:var(--card-bg);border-color:var(--accent);border-left-width:3px">
+            <div class="flex items-center justify-between pb-2" style="border-bottom:1px solid var(--border)">
+              <h2 class="text-xs font-black tracking-widest uppercase" style="color:var(--accent)">AI Digest</h2>
               {#if !selectedVideo.summary || selectedVideo.summary.includes("Error") || selectedVideo.summary.includes("Could not")}
-                <button
-                  onclick={() => generateSummary(selectedVideo.video_id)}
-                  class="text-xs px-2.5 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 font-semibold rounded border border-gray-700 transition"
-                >
-                  Generate Summary
+                <button onclick={() => generateSummary(selectedVideo.video_id)}
+                  class="text-[11px] px-3 py-1 font-semibold rounded border transition" style="color:var(--accent);border-color:var(--accent)">
+                  Generate
                 </button>
               {/if}
             </div>
-
-            <div class="prose prose-invert max-w-none text-gray-300 text-base leading-relaxed">
+            <div class="prose max-w-none text-sm leading-relaxed" style="color:var(--text-primary)">
               {@html formatMarkdown(selectedVideo.summary)}
             </div>
           </div>
 
-          <!-- Full Transcript Accordion -->
-          {#if selectedVideo.transcript && selectedVideo.transcript !== "No transcript available"}
-            <details class="group bg-gray-900/20 border border-gray-900 rounded-lg overflow-hidden transition">
-              <summary class="flex justify-between items-center p-4 font-bold text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-900/30 cursor-pointer select-none">
-                <span>View Full Video Transcript</span>
-                <span class="transition group-open:rotate-180">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </span>
-              </summary>
-              <div class="p-5 border-t border-gray-900 bg-gray-950/40 text-sm text-gray-400 leading-relaxed max-h-96 overflow-y-auto font-mono whitespace-pre-line">
-                {selectedVideo.transcript}
+          <!-- Video info -->
+          <div class="flex items-start space-x-3">
+            <img src={selectedVideo.thumbnail_url} alt="" class="w-32 h-18 rounded object-cover flex-shrink-0" style="background:var(--bg-tertiary)" />
+            <div class="min-w-0 space-y-1.5">
+              <span class="text-[10px] px-2 py-0.5 font-bold rounded-full" style="color:var(--accent);background:var(--bg-tertiary)">{selectedVideo.channel_name}</span>
+              <h1 class="text-sm font-bold leading-snug" style="color:var(--text-primary)">{selectedVideo.title}</h1>
+              <div class="flex space-x-2">
+                <button onclick={() => updateStatus(selectedVideo.video_id, 'read')} class="text-[10px] px-2.5 py-1 text-white font-bold rounded transition" style="background:var(--accent)">Read</button>
+                <button onclick={() => updateStatus(selectedVideo.video_id, 'skipped')} class="text-[10px] px-2.5 py-1 font-bold rounded border transition" style="color:var(--text-secondary);border-color:var(--border)">Skip</button>
+                <a href={selectedVideo.url} target="_blank" rel="noopener noreferrer" class="text-[10px] px-2.5 py-1 text-white font-bold rounded transition" style="background:var(--accent)">▶ Watch</a>
               </div>
-            </details>
-          {/if}
+            </div>
+          </div>
         </div>
       {:else}
-        <div class="flex-1 flex flex-col items-center justify-center text-gray-500 p-8 space-y-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-          </svg>
-          <h2 class="text-lg font-bold text-gray-400">No Video Selected</h2>
-          <p class="text-sm text-gray-600 max-w-xs text-center">Click a video from the sidebar list to read its digest highlights.</p>
+        <div class="flex-1 flex items-center justify-center" style="color:var(--text-muted)">
+          <p>Select a video to read its summary</p>
         </div>
       {/if}
     </main>