larkup 0.1.37 → 0.1.39

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # larkup
 
+## 0.1.39
+
+### Patch Changes
+
+- Fix TS2448 ReferenceError in data-workspace.tsx caused by docsQuery declaration order
+
+## 0.1.38
+
+### Patch Changes
+
+- Fix 10 production issues: SSE controller-closed error, cleaner system prompt, smarter KB search, one-shot web search, corpus refresh after scrape, minimal KB loading UI, settings sidebar navigation, force-delete processing media, playlist confirmation, image preview in chat, marketplace install progress toast.
+
 ## 0.1.37
 
 ### Patch Changes

package/app/api/chat/route.ts

@@ -64,28 +64,24 @@ function createChatModel(
 
 const SMART_RETRIEVAL_POLICY = `
 
-CONVERSATION, RETRIEVAL, AND MEDIA POLICY:
-
-TOOL PRIORITY (strict order):
-1. searchKnowledgeBase — ALWAYS try this FIRST when the question may relate to the user's indexed data. This includes any question mentioning "I", "my", "our", "the document", "the file", "the diagram", "the image", "show me", or referencing specific topics the user has likely indexed.
-2. Web search (if enabled) — Use ONLY if searchKnowledgeBase returned zero relevant hits AND the question is factual and benefits from web results.
-3. Other tools (tabular queries, analysis, etc.) — Use when the question specifically requires them.
-4. General knowledge — Answer from your training data ONLY for general knowledge questions clearly unrelated to the user's data.
-5. If no tool yields relevant results AND you cannot answer reliably from general knowledge, respond honestly: "I could not find relevant information in your knowledge base or available sources."
-
-RETRIEVAL RULES:
-- Default to a short, direct answer. One to three sentences is usually enough; use structure only when the task is genuinely complex.
-- Do not search for greetings, casual conversation, writing help, brainstorming, explanations you can answer reliably from general knowledge, or questions unrelated to the user's indexed data.
-- Use searchKnowledgeBase only when the answer depends on the user's indexed/private content, an exact source-specific fact, or a topic that plausibly refers to something the user indexed.
-- Treat questions about the user or their materials as knowledge-base questions: phrases such as "I", "my", "our", "you have", "the database", "the document", "the file", or "the diagram" require searchKnowledgeBase before answering whenever indexed content may contain the answer.
-- Search at most once per user request. Never repeat a search when a prior tool result in this conversation already contains enough evidence. If the results do not answer the question, say so plainly instead of making more searches or guessing.
-
-IMAGE AND MEDIA RULES:
-- NEVER output raw markdown image syntax like ![alt](url). The chat UI blocks these and shows "[Image unavailable]". Instead, always use the presentMedia tool to display images, videos, or audio from indexed content.
-- When search results contain images[].imageUrl (an image extracted from a PDF), use presentMedia with that exact imageUrl. When they contain a mediaAssetId, use presentMedia with the exact assetId. This is the ONLY way indexed images can appear in the conversation.
-- For a follow-up such as "show me that part", "play the clip", "show the image", or "let me hear it", reuse the mediaAssetId and timestamps already present in the earlier search result and call presentMedia directly. Do not search again just to rediscover the same media.
-- Use presentMedia to embed exactly one best video, image, or audio citation when the user asks to see/hear it or when one compact preview materially supports the answer. Do not present every search result.
-- Keep the written answer minimal around a media citation. Do not print internal media reference markers.
+TOOL RULES:
+1. searchKnowledgeBase → Use FIRST when the question is about the user's indexed data (documents, files, images, videos, diagrams, anything they uploaded).
+2. webSearch → Use ONLY after searchKnowledgeBase returned nothing relevant AND the question needs current/public facts.
+3. Other tools → Use when the question specifically requires them.
+4. General knowledge → Answer directly for common knowledge unrelated to the user's data.
+5. If nothing helps, say so honestly.
+
+DO:
+- Keep answers short and direct. 1–3 sentences unless the task is complex.
+- Search at most ONCE per tool per turn. Never repeat the same search.
+- Use presentMedia to show images/videos/audio from indexed content.
+- For follow-ups like "show me that", reuse the mediaAssetId from earlier results — do not search again.
+
+DO NOT:
+- Search for greetings, casual chat, writing help, or general knowledge you already know.
+- Output markdown images like ![alt](url) — the UI blocks them. Always use presentMedia instead.
+- Present every search result. Pick the single best one.
+- Guess or fabricate when results are insufficient.
 `;
 
 function latestUserText(messages: UIMessage[]): string {
@@ -101,16 +97,29 @@ function latestUserText(messages: UIMessage[]): string {
   return '';
 }
 
+/** Only force KB search when the user explicitly refers to their own data.
+ * Matches "my document", "our files", "the uploaded image" etc. but NOT
+ * generic uses like "I want to know", "can you tell me", "I think". */
 function requiresKnowledgeBaseSearch(text: string): boolean {
-  return /\b(my|our|we|i|database|db|document|file|diagram|image|picture|upload(?:ed)?|knowledge base|corpus)\b|\bwhat is my\b/i.test(
-    text,
+  // Skip generic conversational patterns
+  if (/^(hi|hello|hey|thanks|thank you|ok|sure|yes|no|please|help)\b/i.test(text.trim())) {
+    return false;
+  }
+  // Match possessive references to user data
+  return (
+    /\b(my|our)\s+(document|file|data|image|picture|diagram|video|audio|upload|corpus|knowledge|database|db|pdf|report|spreadsheet|presentation)/i.test(
+      text,
+    ) ||
+    /\b(the|this|that)\s+(document|file|diagram|image|picture|upload|pdf|report)/i.test(text) ||
+    /\b(uploaded?|indexed|scraped|knowledge base|corpus)\b/i.test(text) ||
+    /\bshow\s+me\b/i.test(text)
   );
 }
 
 /** Questions whose answer is inherently time-sensitive should not rely on the
  * model's training snapshot when Web Search is available. */
 function requiresCurrentWebSearch(text: string): boolean {
-  return /\b(who won|winner|score|match|game|latest|current|today|yesterday|news|weather|stock|share price|exchange rate|election|president|ceo|schedule)\b/i.test(
+  return /\b(who won|winner|final score|match result|latest|current|today|yesterday|breaking news|weather|stock price|exchange rate|election result|schedule)\b/i.test(
     text,
   );
 }
@@ -378,7 +387,7 @@ ${fieldLines}`;
       : '') +
     SMART_RETRIEVAL_POLICY +
     (config.webSearchEnabled
-      ? '\nWEB SEARCH IS ENABLED: For a public, current, or external factual question, you MUST call webSearch after any required knowledge-base search. Do not tell the user to check the web yourself when this tool is available.\n'
+      ? '\nWeb search is available. Use it for current events or public facts not in the knowledge base.\n'
       : '') +
     tabularContext +
     docContext;
@@ -401,22 +410,24 @@ ${fieldLines}`;
     system: systemPrompt,
     messages: await convertToModelMessages(safeMessages, { tools }),
     maxOutputTokens: 4096,
-    // Five steps covers the only useful multi-step case (retrieve, optionally
-    // present one media item, then answer) without allowing a tool loop to
-    // burn the context window and end with no response.
-    stopWhen: stepCountIs(5),
+    // Three steps: retrieve → optionally present media → answer.
+    stopWhen: stepCountIs(3),
     toolChoice: 'auto',
     prepareStep: ({ stepNumber }) => {
+      // Step 0: force KB search if needed
       if (forceKnowledgeBaseSearch && stepNumber === 0) {
         return { toolChoice: { type: 'tool', toolName: 'searchKnowledgeBase' } };
       }
+      // Step 1 (or 0 if no KB): force web search if needed
       if (forceWebSearch && (!forceKnowledgeBaseSearch || stepNumber === 1)) {
         return { toolChoice: { type: 'tool', toolName: 'webSearch' } };
       }
-      // A retrieval is deliberately one-shot per turn. This is applied at the
-      // runtime level rather than relying only on the model prompt.
-      if (forceKnowledgeBaseSearch) {
-        return { activeTools: Object.keys(tools).filter((name) => name !== 'searchKnowledgeBase') };
+      // After forced tools, remove them so the model cannot loop on them.
+      const usedTools: string[] = [];
+      if (forceKnowledgeBaseSearch) usedTools.push('searchKnowledgeBase');
+      if (forceWebSearch) usedTools.push('webSearch');
+      if (usedTools.length > 0) {
+        return { activeTools: Object.keys(tools).filter((name) => !usedTools.includes(name)) };
       }
       return undefined;
     },

package/app/api/media/route.ts

@@ -177,6 +177,7 @@ async function removeMedia(req: Request) {
   const url = new URL(req.url);
   const id = url.searchParams.get('id');
   const ids = url.searchParams.get('ids');
+  const force = url.searchParams.get('force') === 'true';
 
   const storage = createStorageProvider();
 
@@ -184,7 +185,7 @@ async function removeMedia(req: Request) {
     const { getMediaAsset } = await import('@larkup/core/media-store');
     const asset = await getMediaAsset(id);
     if (asset) {
-      if (isMediaProcessing(asset)) {
+      if (!force && isMediaProcessing(asset)) {
         return NextResponse.json(
           { error: 'Wait for the media indexing job to finish before deleting it.' },
           { status: 409 },
@@ -201,7 +202,7 @@ async function removeMedia(req: Request) {
     const idList = ids.split(',');
     const assets = await readMediaAssets();
     const selectedAssets = assets.filter((asset) => idList.includes(asset.id));
-    if (selectedAssets.some(isMediaProcessing)) {
+    if (!force && selectedAssets.some(isMediaProcessing)) {
       return NextResponse.json(
         { error: 'Wait for all selected media indexing jobs to finish before deleting them.' },
         { status: 409 },

package/app/api/media/stream/route.ts

@@ -50,14 +50,29 @@ export async function GET(req: Request) {
 
   let interval: ReturnType<typeof setInterval> | undefined;
   let keepAlive: ReturnType<typeof setInterval> | undefined;
+  let closed = false;
+
   const stream = new ReadableStream<Uint8Array>({
     async start(controller) {
       let lastPayload = '';
       let checking = false;
       let storageSnapshot = { usedBytes: 0, fileCount: 0 };
       let storageCheckedAt = 0;
+
+      const safeEnqueue = (data: Uint8Array) => {
+        if (closed) return;
+        try {
+          controller.enqueue(data);
+        } catch {
+          // Controller already closed — client disconnected.
+          closed = true;
+          if (interval) clearInterval(interval);
+          if (keepAlive) clearInterval(keepAlive);
+        }
+      };
+
       const publish = async () => {
-        if (checking) return;
+        if (checking || closed) return;
         checking = true;
         try {
           if (Date.now() - storageCheckedAt > 30_000) {
@@ -81,7 +96,7 @@ export async function GET(req: Request) {
               0,
               ...nextSnapshot.assets.map((asset) => asset.processingRevision ?? 0),
             );
-            controller.enqueue(
+            safeEnqueue(
               encoder.encode(`id: ${revision}\nevent: media-update\ndata: ${payload}\n\n`),
             );
           }
@@ -94,9 +109,10 @@ export async function GET(req: Request) {
 
       await publish();
       interval = setInterval(() => void publish(), 1_000);
-      keepAlive = setInterval(() => controller.enqueue(encoder.encode(': keep-alive\n\n')), 15_000);
+      keepAlive = setInterval(() => safeEnqueue(encoder.encode(': keep-alive\n\n')), 15_000);
     },
     cancel() {
+      closed = true;
       if (interval) clearInterval(interval);
       if (keepAlive) clearInterval(keepAlive);
     },

package/app/settings/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, Suspense } from 'react';
+import { useEffect, Suspense } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { SettingsLayout, type SettingsSection } from '@/components/settings/settings-layout';
 import { GeneralSection } from '@/components/settings/general-section';
@@ -20,36 +20,28 @@ function SettingsContent() {
   const router = useRouter();
   const pathname = usePathname();
 
-  const getInitialSection = (): SettingsSection => {
+  const resolveSection = (): SettingsSection => {
     if (searchParams.has('ai-models')) return 'models';
     const section = searchParams.get('section') as SettingsSection;
     if (section) return section;
     return 'general';
   };
 
-  const [activeSection, setActiveSection] = useState<SettingsSection>(getInitialSection());
+  // Always derive the active section from the URL — this ensures navigating
+  // away and back never leaves the sidebar stuck on a stale section.
+  const activeSection = resolveSection();
 
   useEffect(() => {
-    const currentSection = searchParams.get('section');
-    const hasAiModels = searchParams.has('ai-models');
-
-    if (hasAiModels) {
+    // Normalize legacy `?ai-models` param to `?section=models`
+    if (searchParams.has('ai-models')) {
       const params = new URLSearchParams(searchParams.toString());
       params.delete('ai-models');
       params.set('section', 'models');
       router.replace(`${pathname}?${params.toString()}`);
-      if (activeSection !== 'models') {
-        setActiveSection('models');
-      }
-    } else if (currentSection && currentSection !== activeSection) {
-      setActiveSection(currentSection as SettingsSection);
     }
-  }, [searchParams, pathname, router, activeSection]);
+  }, [searchParams, pathname, router]);
 
   const handleSectionChange = (newSection: SettingsSection) => {
-    setActiveSection(newSection);
-    // A settings item is a destination, not a filter. Rebuild the query so a
-    // stale deep-link such as `section=tool-settings` cannot linger in the URL.
     router.replace(`${pathname}?section=${newSection}`, { scroll: false });
   };
 

package/components/chat/message-item.tsx

@@ -382,7 +382,7 @@ function renderToolPart(
           <div key={index} className="mb-2 w-full">
             <div className="inline-flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground bg-muted/30 rounded-md border border-border/50">
               <Globe className="h-3.5 w-3.5 shrink-0" />
-              <span className="truncate max-w-[250px] sm:max-w-[400px]">
+              <span className="truncate max-w-62.5 sm:max-w-100">
                 Searched web for "{input?.query}"
               </span>
               <span className="shrink-0 text-[10px] bg-secondary text-foreground px-1.5 py-0.5 rounded-full font-medium ml-1">
@@ -395,12 +395,24 @@ function renderToolPart(
 
       case 'analyzeImageDeeply': {
         if (output.error) return null;
+        const imageUrl = input?.imageUrl as string | undefined;
         return (
           <div key={index} className="mb-2 w-full">
             <div className="inline-flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground bg-muted/30 rounded-md border border-border/50">
               <Sparkles className="h-3.5 w-3.5 shrink-0" />
-              <span className="truncate max-w-[250px] sm:max-w-[400px]">Analyzed image</span>
+              <span className="truncate max-w-62.5 sm:max-w-100">Analyzed image</span>
             </div>
+            {imageUrl ? (
+              <div className="mt-1.5 max-w-xs">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={imageUrl}
+                  alt="Analyzed image"
+                  className="rounded-lg border border-border/50 object-cover max-h-48 w-auto"
+                  loading="lazy"
+                />
+              </div>
+            ) : null}
           </div>
         );
       }
@@ -433,7 +445,7 @@ function renderToolPart(
           <div key={index} className="mb-2 w-full">
             <div className="inline-flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground bg-muted/30 rounded-md border border-border/50">
               <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />
-              <span className="truncate max-w-[250px] sm:max-w-[400px]">Used {toolName}</span>
+              <span className="truncate max-w-62.5 sm:max-w-100">Used {toolName}</span>
             </div>
           </div>
         );
@@ -714,7 +726,7 @@ export function MessageItem({
                     <div className="size-7 shrink-0 rounded-md overflow-hidden bg-background border border-border/90 flex items-center justify-center p-1">
                       <img src={iconPath} alt={nameStr} className="w-full h-full object-contain" />
                     </div>
-                    <div className="flex flex-col justify-center max-w-[150px]">
+                    <div className="flex flex-col justify-center max-w-37.5">
                       <span className="text-xs font-medium truncate text-foreground">
                         {nameStr}
                       </span>
@@ -932,10 +944,10 @@ function renderMarkdown(text: string): string {
   html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, url) => {
     const lowerUrl = url.toLowerCase();
     if (lowerUrl.match(/\.(mp4|webm|ogg)$/) || lowerUrl.includes('video')) {
-      return `<video src="${url}" controls preload="metadata" class="max-w-[360px] w-full rounded-lg my-2 border border-border bg-card"></video>`;
+      return `<video src="${url}" controls preload="metadata" class="max-w-90 w-full rounded-lg my-2 border border-border bg-card"></video>`;
     }
     if (lowerUrl.match(/\.(mp3|wav|m4a|oga)$/) || lowerUrl.includes('audio')) {
-      return `<audio src="${url}" controls preload="metadata" class="max-w-[320px] w-full my-2"></audio>`;
+      return `<audio src="${url}" controls preload="metadata" class="max-w-80 w-full my-2"></audio>`;
     }
     return `<a href="${url}" target="_blank" rel="noreferrer" class="msg-link">${label}</a>`;
   });

package/components/chat/tools/knowledge-base-result.tsx

@@ -73,7 +73,7 @@ export function KnowledgeBaseResult({
           ) : (
             <Database className="h-3.5 w-3.5 shrink-0" />
           )}
-          <span className="truncate max-w-[250px] sm:max-w-[400px]">
+          <span className="truncate max-w-62.5 sm:max-w-100">
             {isRunning ? 'Checking knowledge base…' : 'Checked knowledge base'}
           </span>
           {!isRunning && hits.length > 0 ? (
@@ -92,9 +92,8 @@ export function KnowledgeBaseResult({
       {open && (isRunning || hits.length > 0) ? (
         <div className="mt-2 flex flex-col gap-px border border-border rounded-xl bg-transparent overflow-hidden">
           {isRunning && hits.length === 0 ? (
-            <div className="flex items-center gap-2 px-3.5 py-3 text-xs text-muted-foreground">
-              <Loader2 className="size-3.5 animate-spin" />
-              Looking through your Knowledge Base…
+            <div className="flex items-center gap-2 px-3.5 py-2.5">
+              <Loader2 className="size-3 animate-spin text-muted-foreground" />
             </div>
           ) : null}
           {hits.slice(0, 3).map((h, i) => (

package/components/data/data-workspace.tsx

@@ -160,6 +160,14 @@ export function DataWorkspace() {
   const configured = jobsQuery.data?.configured ?? true;
   const hasActive = jobs.some((j) => j.status === 'running' || j.status === 'queued');
 
+  const docsQuery = useSWR<DocsResponse>('/api/documents', fetcher, {
+    refreshInterval: hasActive ? 5000 : 0,
+  });
+  const { mutate: mutateDocuments } = docsQuery;
+  const documents = docsQuery.data?.documents ?? [];
+  const stats = docsQuery.data?.stats;
+  const docCount = stats?.docCount ?? 0;
+
   useEffect(() => {
     const prevJobs = prevJobsRef.current;
     if (prevJobs.length > 0 && jobs.length > 0) {
@@ -172,19 +180,15 @@ export function DataWorkspace() {
       );
 
       if (justCompleted.length > 0) {
-        toast.success('Indexing completed.');
+        toast.success('Scraping completed.');
+        // Refresh the corpus immediately so new documents appear.
+        mutateDocuments();
+        // Documents may still be flushing — re-fetch after a short delay.
+        setTimeout(() => mutateDocuments(), 2500);
       }
     }
     prevJobsRef.current = jobs;
-  }, [jobs]);
-
-  const docsQuery = useSWR<DocsResponse>('/api/documents', fetcher, {
-    refreshInterval: hasActive ? 5000 : 0,
-  });
-  const { mutate: mutateDocuments } = docsQuery;
-  const documents = docsQuery.data?.documents ?? [];
-  const stats = docsQuery.data?.stats;
-  const docCount = stats?.docCount ?? 0;
+  }, [jobs, mutateDocuments]);
 
   const indexQuery = useSWR<{
     unindexedCount: number;

package/components/data/media-panel.tsx

@@ -428,6 +428,9 @@ function InstallPrompt({
 
   const handleInstall = async () => {
     setInstalling(true);
+    const toastId = toast.loading('Downloading and installing tool…', {
+      description: 'This may take a moment on first install.',
+    });
     try {
       const res = await fetch(`/api/marketplace/${toolId}`, {
         method: 'POST',
@@ -436,6 +439,7 @@ function InstallPrompt({
         const err = await res.json();
         throw new Error(err.error || 'Install failed');
       }
+      toast.dismiss(toastId);
       toast.success('Video & Audio installed', {
         description: 'Choose an audio provider before indexing video or audio.',
         action: {
@@ -445,6 +449,7 @@ function InstallPrompt({
       });
       onInstallComplete();
     } catch (err) {
+      toast.dismiss(toastId);
       toast.error(err instanceof Error ? err.message : 'Failed to install tool');
     } finally {
       setInstalling(false);
@@ -772,7 +777,7 @@ function MediaContent({
 
   async function handleDelete(assetId: string) {
     try {
-      const query = new URLSearchParams({ id: assetId });
+      const query = new URLSearchParams({ id: assetId, force: 'true' });
       if (serverId) query.set('serverId', serverId);
       const response = await fetch(`/api/media?${query.toString()}`, { method: 'DELETE' });
       if (!response.ok) {
@@ -912,93 +917,114 @@ function MediaContent({
             {mediaType === 'video' ? ', YouTube videos, or playlists' : ''}. Add up to 10 URLs
             separated by commas.
           </p>
-          {remoteEstimates ? (
-            <div className="mt-4 flex flex-col gap-4 border-t border-border/70 pt-4">
-              <div className="grid gap-2 sm:grid-cols-3">
-                <EstimateMetric
-                  label="Media"
-                  value={`${remoteEstimates.reduce(
-                    (sum: any, item: any) => sum + (item.entryCount ?? 1),
-                    0,
-                  )} item(s) · ${
-                    remoteDuration ? formatDuration(remoteDuration) : 'duration unavailable'
-                  }`}
-                />
-                <EstimateMetric
-                  label="Expected time"
-                  value={
-                    remoteDuration
-                      ? `~${remoteEstimate.processingMinutes} min`
-                      : 'Calculated during import'
-                  }
-                />
-                <EstimateMetric
-                  label="Estimated API cost"
-                  value={
-                    remoteDuration
-                      ? `~$${remoteEstimate.transcriptionCost.toFixed(2)} +`
-                      : 'Model-dependent'
-                  }
-                />
-              </div>
-
-              {(mediaType === 'audio'
-                ? remoteEstimates.slice(0, 1)
-                : remoteEstimates.filter((est: any) => est.mediaType === 'video').slice(0, 1)
-              ).map((est: any, i: number) => {
-                if (mediaType === 'audio') {
-                  return (
-                    <div key={i} className="rounded-xl border border-border/70 bg-muted/20 p-3">
-                      <p className="mb-2 truncate text-[11px] font-medium text-foreground">
-                        Preview before importing
-                      </p>
-                      <audio
-                        controls
-                        preload="metadata"
-                        src={est.originalUrl}
-                        className="h-9 w-full"
+          {remoteEstimates
+            ? (() => {
+                const totalEntries = remoteEstimates.reduce(
+                  (sum: number, item: any) => sum + (item.entryCount ?? 1),
+                  0,
+                );
+                const isPlaylist = totalEntries > 1;
+                return (
+                  <div className="mt-4 flex flex-col gap-4 border-t border-border/70 pt-4">
+                    <div className="grid gap-2 sm:grid-cols-3">
+                      <EstimateMetric
+                        label="Media"
+                        value={`${totalEntries} item(s) · ${
+                          remoteDuration ? formatDuration(remoteDuration) : 'duration unavailable'
+                        }`}
                       />
-                    </div>
-                  );
-                }
-                let embedUrl = est.originalUrl;
-                if (est.isYouTube) {
-                  try {
-                    const u = new URL(est.originalUrl);
-                    const v = u.hostname.includes('youtu.be')
-                      ? u.pathname.slice(1)
-                      : u.searchParams.get('v');
-                    embedUrl = `https://www.youtube.com/embed/${v}`;
-                  } catch (e) {
-                    // ignore
-                  }
-                  return (
-                    <div
-                      key={i}
-                      className="relative w-full overflow-hidden rounded-xl aspect-video shadow-md border border-border/50 ring-1 ring-border/20 bg-black"
-                    >
-                      <iframe
-                        src={embedUrl}
-                        className="absolute inset-0 w-full h-full"
-                        frameBorder="0"
-                        allowFullScreen
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      <EstimateMetric
+                        label="Expected time"
+                        value={
+                          remoteDuration
+                            ? `~${remoteEstimate.processingMinutes} min`
+                            : 'Calculated during import'
+                        }
+                      />
+                      <EstimateMetric
+                        label="Estimated API cost"
+                        value={
+                          remoteDuration
+                            ? `~$${remoteEstimate.transcriptionCost.toFixed(2)} +`
+                            : 'Model-dependent'
+                        }
                       />
                     </div>
-                  );
-                } else {
-                  return (
-                    <video
-                      key={i}
-                      src={embedUrl}
-                      controls
-                      className="w-full max-w-sm rounded-md aspect-video bg-muted object-cover shadow-sm border border-border"
-                    />
-                  );
-                }
-              })}
-            </div>
-          ) : null}
+
+                    {isPlaylist ? (
+                      <div className="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50/60 dark:border-amber-800/50 dark:bg-amber-950/30 px-3 py-2.5">
+                        <AlertCircle className="size-3.5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
+                        <p className="text-[11px] text-amber-800 dark:text-amber-300 leading-relaxed">
+                          <span className="font-medium">Playlist detected</span> — this will
+                          download and index{' '}
+                          <span className="font-semibold">{totalEntries} items</span> (max 10). Each
+                          item is transcribed and analyzed separately.
+                        </p>
+                      </div>
+                    ) : null}
+
+                    {(mediaType === 'audio'
+                      ? remoteEstimates.slice(0, 1)
+                      : remoteEstimates.filter((est: any) => est.mediaType === 'video').slice(0, 1)
+                    ).map((est: any, i: number) => {
+                      if (mediaType === 'audio') {
+                        return (
+                          <div
+                            key={i}
+                            className="rounded-xl border border-border/70 bg-muted/20 p-3"
+                          >
+                            <p className="mb-2 truncate text-[11px] font-medium text-foreground">
+                              Preview before importing
+                            </p>
+                            <audio
+                              controls
+                              preload="metadata"
+                              src={est.originalUrl}
+                              className="h-9 w-full"
+                            />
+                          </div>
+                        );
+                      }
+                      let embedUrl = est.originalUrl;
+                      if (est.isYouTube) {
+                        try {
+                          const u = new URL(est.originalUrl);
+                          const v = u.hostname.includes('youtu.be')
+                            ? u.pathname.slice(1)
+                            : u.searchParams.get('v');
+                          embedUrl = `https://www.youtube.com/embed/${v}`;
+                        } catch (e) {
+                          // ignore
+                        }
+                        return (
+                          <div
+                            key={i}
+                            className="relative w-full overflow-hidden rounded-xl aspect-video shadow-md border border-border/50 ring-1 ring-border/20 bg-black"
+                          >
+                            <iframe
+                              src={embedUrl}
+                              className="absolute inset-0 w-full h-full"
+                              frameBorder="0"
+                              allowFullScreen
+                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            />
+                          </div>
+                        );
+                      } else {
+                        return (
+                          <video
+                            key={i}
+                            src={embedUrl}
+                            controls
+                            className="w-full max-w-sm rounded-md aspect-video bg-muted object-cover shadow-sm border border-border"
+                          />
+                        );
+                      }
+                    })}
+                  </div>
+                );
+              })()
+            : null}
         </div>
       ) : (
         <div
@@ -1582,7 +1608,7 @@ function ActiveIndexingList({
     <section
       aria-live="polite"
       aria-label="Active media indexing jobs"
-      className="space-y-3 rounded-xl border border-emerald-300 bg-emerald-50/20 p-3 dark:border-emerald-700/60 dark:bg-emerald-950/20"
+      className="space-y-3 rounded-xl border border-emerald-500 bg-emerald-50/20 p-3 dark:border-emerald-700/60 dark:bg-emerald-950/20"
     >
       <div className="flex items-center gap-2">
         <Loader2 className="size-3.5 animate-spin text-emerald-600 dark:text-emerald-400" />