Add automatic Docling parsing display in indexing flow

- Add /api/parse-docling endpoint for bulk file parsing
- Create DoclingOutput component showing complete parsing results:
- Breakdown numbers (elements, chars, words, pages)
- Element type counts
- Complete element list with full text
- Download JSON button
- Continue to Indexing button
- Add parseWithDocling API function
- Add "parse" step to ProcessingStatus
- Update Sidebar to:
- Parse files with Docling after Dropbox fetch
- Display DoclingOutput for user review
- Continue indexing on user confirmation
- Remove manual "Test Parsing" button (now automatic)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/api/client.js

@@ -125,3 +125,16 @@ export async function getSupportedFormats() {
   const res = await fetch(`${API_BASE}/eval/formats`);
   return res.json();
 }
+
+/**
+ * Parse files with Docling and return COMPLETE output
+ * Returns all elements (not just samples) for full document preview
+ */
+export async function parseWithDocling(files, accessToken) {
+  const res = await fetch(`${API_BASE}/parse-docling`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ files, access_token: accessToken })
+  });
+  return res.json();
+}

frontend/src/components/DoclingOutput.jsx

@@ -0,0 +1,227 @@
+import { useState } from 'react';
+
+/**
+ * Display complete Docling parsing output with breakdown numbers
+ * Shows all elements, element type counts, and stats
+ */
+export default function DoclingOutput({ results, onContinue, onDownload }) {
+  const [expandedFiles, setExpandedFiles] = useState(
+    // Expand first file by default
+    results?.length > 0 ? { [results[0].filename]: true } : {}
+  );
+
+  const toggleFile = (filename) => {
+    setExpandedFiles(prev => ({
+      ...prev,
+      [filename]: !prev[filename]
+    }));
+  };
+
+  const formatNumber = (num) => {
+    return num?.toLocaleString() || '0';
+  };
+
+  const handleDownload = () => {
+    const dataStr = JSON.stringify(results, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `docling-output-${new Date().toISOString().slice(0, 10)}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    onDownload?.();
+  };
+
+  // Get element type badge color
+  const getTypeColor = (type) => {
+    const colors = {
+      heading: 'bg-blue-900/50 text-blue-300 border-blue-700',
+      paragraph: 'bg-slate-700 text-slate-300 border-slate-600',
+      table: 'bg-purple-900/50 text-purple-300 border-purple-700',
+      list_item: 'bg-orange-900/50 text-orange-300 border-orange-700',
+      list: 'bg-orange-900/50 text-orange-300 border-orange-700',
+      code: 'bg-green-900/50 text-green-300 border-green-700',
+      image: 'bg-pink-900/50 text-pink-300 border-pink-700',
+      caption: 'bg-yellow-900/50 text-yellow-300 border-yellow-700',
+      formula: 'bg-cyan-900/50 text-cyan-300 border-cyan-700',
+      footer: 'bg-gray-700 text-gray-300 border-gray-600',
+      header: 'bg-gray-700 text-gray-300 border-gray-600',
+    };
+    return colors[type] || 'bg-slate-700 text-slate-300 border-slate-600';
+  };
+
+  if (!results || results.length === 0) {
+    return (
+      <div className="text-center py-8 text-slate-400">
+        No parsing results available
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
+      <div className="bg-slate-800 border border-slate-700 rounded-xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl">
+        {/* Header */}
+        <div className="p-4 border-b border-slate-700 flex items-center justify-between flex-shrink-0">
+          <div>
+            <h2 className="text-lg font-semibold text-slate-100">Docling Parsing Results</h2>
+            <p className="text-sm text-slate-400 mt-0.5">
+              {results.length} file{results.length !== 1 ? 's' : ''} parsed
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={handleDownload}
+              className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-300 bg-slate-700 border border-slate-600 rounded-lg hover:bg-slate-600 transition-colors"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              Download JSON
+            </button>
+            <button
+              type="button"
+              onClick={onContinue}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Continue to Indexing
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Content - Scrollable */}
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {results.map((doc, idx) => (
+            <div key={idx} className="bg-slate-900 border border-slate-700 rounded-lg overflow-hidden">
+              {/* File Header - Clickable */}
+              <button
+                type="button"
+                onClick={() => toggleFile(doc.filename)}
+                className="w-full p-4 flex items-center justify-between hover:bg-slate-800/50 transition-colors text-left"
+              >
+                <div className="flex items-center gap-3">
+                  <svg className={`w-5 h-5 text-slate-400 transition-transform ${expandedFiles[doc.filename] ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                  <svg className="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4z"/>
+                  </svg>
+                  <span className="font-medium text-slate-200">{doc.filename}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {doc.status === 'OK' ? (
+                    <span className="flex items-center gap-1 text-xs font-medium px-2 py-1 bg-green-900/40 border border-green-700 text-green-400 rounded">
+                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                      OK
+                    </span>
+                  ) : (
+                    <span className="flex items-center gap-1 text-xs font-medium px-2 py-1 bg-red-900/40 border border-red-700 text-red-400 rounded">
+                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                      {doc.status || 'ERROR'}
+                    </span>
+                  )}
+                  <span className="text-xs text-slate-500 uppercase">{doc.format}</span>
+                </div>
+              </button>
+
+              {/* Expanded Content */}
+              {expandedFiles[doc.filename] && (
+                <div className="border-t border-slate-700">
+                  {doc.error ? (
+                    <div className="p-4 bg-red-900/20 text-red-400 text-sm">
+                      Error: {doc.error}
+                    </div>
+                  ) : (
+                    <>
+                      {/* Stats Grid */}
+                      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-3">
+                        <div className="bg-slate-800 border border-slate-700 rounded-lg p-3 text-center">
+                          <p className="text-2xl font-bold text-blue-400">{formatNumber(doc.total_elements)}</p>
+                          <p className="text-xs text-slate-500 mt-1">Elements</p>
+                        </div>
+                        <div className="bg-slate-800 border border-slate-700 rounded-lg p-3 text-center">
+                          <p className="text-2xl font-bold text-green-400">{formatNumber(doc.total_chars)}</p>
+                          <p className="text-xs text-slate-500 mt-1">Characters</p>
+                        </div>
+                        <div className="bg-slate-800 border border-slate-700 rounded-lg p-3 text-center">
+                          <p className="text-2xl font-bold text-purple-400">{formatNumber(doc.total_words)}</p>
+                          <p className="text-xs text-slate-500 mt-1">Words</p>
+                        </div>
+                        <div className="bg-slate-800 border border-slate-700 rounded-lg p-3 text-center">
+                          <p className="text-2xl font-bold text-orange-400">{doc.page_count || '-'}</p>
+                          <p className="text-xs text-slate-500 mt-1">Pages</p>
+                        </div>
+                      </div>
+
+                      {/* Element Types */}
+                      {doc.element_types && Object.keys(doc.element_types).length > 0 && (
+                        <div className="px-4 pb-4">
+                          <h4 className="text-sm font-medium text-slate-400 mb-2">Element Types</h4>
+                          <div className="flex flex-wrap gap-2">
+                            {Object.entries(doc.element_types)
+                              .sort((a, b) => b[1] - a[1])
+                              .map(([type, count]) => (
+                                <span
+                                  key={type}
+                                  className={`text-xs font-medium px-2 py-1 rounded border ${getTypeColor(type)}`}
+                                >
+                                  {type}: {count}
+                                </span>
+                              ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Complete Output */}
+                      {doc.elements && doc.elements.length > 0 && (
+                        <div className="px-4 pb-4">
+                          <h4 className="text-sm font-medium text-slate-400 mb-2">
+                            Complete Output ({doc.elements.length} elements)
+                          </h4>
+                          <div className="bg-slate-950 border border-slate-700 rounded-lg max-h-96 overflow-auto">
+                            {doc.elements.map((el, elIdx) => (
+                              <div
+                                key={elIdx}
+                                className="p-3 border-b border-slate-800 last:border-b-0 hover:bg-slate-900/50"
+                              >
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className={`text-xs font-medium px-2 py-0.5 rounded border ${getTypeColor(el.type)}`}>
+                                    {el.type}
+                                  </span>
+                                  {el.level && (
+                                    <span className="text-xs text-slate-500">L{el.level}</span>
+                                  )}
+                                  {el.page && (
+                                    <span className="text-xs text-slate-600">p.{el.page}</span>
+                                  )}
+                                </div>
+                                <p className="text-sm text-slate-300 whitespace-pre-wrap break-words">
+                                  {el.text || '(empty)'}
+                                </p>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ProcessingStatus.jsx

@@ -1,5 +1,6 @@
 const steps = [
   { id: 'read', label: 'Reading from cloud storage' },
+  { id: 'parse', label: 'Parsing with Docling' },
   { id: 'chunk', label: 'Chunking in your browser' },
   { id: 'clear', label: 'Clearing old index data' },
   { id: 'embed', label: 'Generating embeddings' },

frontend/src/components/Sidebar.jsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { embedChunks, clearIndex } from '../api/client';
+import { embedChunks, clearIndex, parseWithDocling } from '../api/client';
 import { processSelectedFiles } from '../api/dropbox';
 import { chunkFiles } from '../api/chunker';
 import ProcessingStatus from './ProcessingStatus';
 import IndexSummary from './IndexSummary';
 import CloudConnect from './CloudConnect';
-import ParsingEval from './ParsingEval';
+import DoclingOutput from './DoclingOutput';
 
 export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
   const [loading, setLoading] = useState(false);
@@ -17,8 +17,9 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
   const [stagedFiles, setStagedFiles] = useState([]);
   const [accessToken, setAccessToken] = useState(null);
 
-  // State for parsing evaluation
-  const [evalFile, setEvalFile] = useState(null);
+  // State for Docling parsing output
+  const [parsedDocuments, setParsedDocuments] = useState(null);
+  const [pendingFileContents, setPendingFileContents] = useState(null);
 
   // Handle files staged from CloudConnect (not processed yet)
   const handleFilesStaged = (files) => {
@@ -46,7 +47,7 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
     setStagedFiles([]);
   };
 
-  // Start indexing the staged files
+  // Start indexing the staged files - Phase 1: Read and Parse
   const handleIndexFiles = async () => {
     if (stagedFiles.length === 0 || !accessToken) return;
 
@@ -62,7 +63,7 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
         setProcessingState({
           step: 'read',
           fileName: progress.fileName,
-          progress: 10 + (progress.current / progress.total) * 20,
+          progress: 10 + (progress.current / progress.total) * 15,
         });
       });
 
@@ -73,26 +74,66 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
         return;
       }
 
-      // Step 2: Chunk files (client-side)
-      setProcessingState({ step: 'chunk', fileName: `${fileContents.length} files`, progress: 35 });
+      // Step 2: Parse with Docling
+      setProcessingState({ step: 'parse', fileName: `${fileContents.length} files`, progress: 28 });
+
+      const parseResult = await parseWithDocling(
+        stagedFiles.map(f => ({ path: f.path_lower, name: f.name })),
+        accessToken
+      );
+
+      if (parseResult.error) {
+        setMessage({ type: 'error', text: parseResult.error });
+        setLoading(false);
+        setProcessingState(null);
+        return;
+      }
+
+      // Store results and pause for user review
+      setParsedDocuments(parseResult.results);
+      setPendingFileContents(fileContents);
+      setProcessingState(null);
+      setLoading(false);
+      // User will click "Continue to Indexing" in DoclingOutput
+
+    } catch (err) {
+      setMessage({ type: 'error', text: err.message });
+      setProcessingState(null);
+      setLoading(false);
+    }
+  };
+
+  // Continue indexing after user reviews Docling output
+  const handleContinueIndexing = async () => {
+    if (!pendingFileContents) return;
+
+    setLoading(true);
+    setParsedDocuments(null);
+
+    try {
+      const fileContents = pendingFileContents;
+      setPendingFileContents(null);
+
+      // Step 3: Chunk files (client-side)
+      setProcessingState({ step: 'chunk', fileName: `${fileContents.length} files`, progress: 40 });
       await new Promise(r => setTimeout(r, 100));
 
       const chunks = chunkFiles(fileContents);
 
-      // Step 3: Clear existing index
+      // Step 4: Clear existing index
       setProcessingState({ step: 'clear', fileName: 'Clearing old data', progress: 50 });
       await clearIndex();
 
-      // Step 4: Send chunks to server for embedding
+      // Step 5: Send chunks to server for embedding
       setProcessingState({ step: 'embed', fileName: `${chunks.length} chunks`, progress: 65 });
 
       const result = await embedChunks(chunks);
 
-      // Step 5: Show discard step
+      // Step 6: Show discard step
       setProcessingState({ step: 'discard', fileName: '', progress: 85 });
       await new Promise(r => setTimeout(r, 300));
 
-      // Step 6: Complete
+      // Step 7: Complete
       setProcessingState({ step: 'save', fileName: '', progress: 100 });
       await new Promise(r => setTimeout(r, 200));
 
@@ -185,29 +226,16 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
                     <p className="text-xs text-slate-500">{formatSize(file.size)}</p>
                   </div>
                 </div>
-                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
-                  <button
-                    type="button"
-                    onClick={() => setEvalFile(file)}
-                    className="p-1 text-slate-500 hover:text-blue-400"
-                    aria-label={`Test parsing ${file.name}`}
-                    title="Test Docling Parsing"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                    </svg>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => removeFile(file.id)}
-                    className="p-1 text-slate-500 hover:text-red-400"
-                    aria-label={`Remove ${file.name}`}
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
+                <button
+                  type="button"
+                  onClick={() => removeFile(file.id)}
+                  className="p-1 text-slate-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all"
+                  aria-label={`Remove ${file.name}`}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
               </div>
             ))}
           </div>
@@ -250,12 +278,12 @@ export default function Sidebar({ onStatusChange, onAccessTokenChange }) {
         </div>
       )}
 
-      {/* Parsing Evaluation Modal */}
-      {evalFile && (
-        <ParsingEval
-          file={evalFile}
-          accessToken={accessToken}
-          onClose={() => setEvalFile(null)}
+      {/* Docling Output Modal */}
+      {parsedDocuments && (
+        <DoclingOutput
+          results={parsedDocuments}
+          onContinue={handleContinueIndexing}
+          onDownload={() => {}}
         />
       )}
     </div>

src/api/routes.py

@@ -537,6 +537,113 @@ async def eval_formats():
     return get_supported_formats()
 
 
+@router.post("/parse-docling")
+async def parse_docling(request: dict):
+    """
+    Parse files with Docling and return COMPLETE output.
+
+    Request:
+        - files: Array of {path, name} objects
+        - access_token: Dropbox access token
+
+    Returns array of parsed documents with ALL elements (not samples).
+    """
+    import tempfile
+    import os
+    from pathlib import Path
+    from collections import Counter
+
+    files = request.get("files", [])
+    access_token = request.get("access_token")
+
+    if not access_token or not files:
+        return {"error": "Missing files or access_token"}
+
+    results = []
+
+    for file_info in files:
+        file_path = file_info.get("path")
+        file_name = file_info.get("name", Path(file_path).name if file_path else "unknown")
+
+        if not file_path:
+            results.append({
+                "filename": file_name,
+                "status": "ERROR",
+                "error": "Missing file path"
+            })
+            continue
+
+        try:
+            # Download file from Dropbox
+            async with httpx.AsyncClient(timeout=180.0) as client:
+                response = await client.post(
+                    "https://content.dropboxapi.com/2/files/download",
+                    headers={
+                        "Authorization": f"Bearer {access_token}",
+                        "Dropbox-API-Arg": f'{{"path": "{file_path}"}}'
+                    }
+                )
+
+                if response.status_code != 200:
+                    results.append({
+                        "filename": file_name,
+                        "status": "ERROR",
+                        "error": f"Dropbox download failed: {response.text}"
+                    })
+                    continue
+
+            # Save to temp file
+            suffix = Path(file_name).suffix or Path(file_path).suffix
+            with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+                tmp.write(response.content)
+                tmp_path = tmp.name
+
+            try:
+                from src.ingestion.docling_loader import load_document_with_docling
+
+                doc = load_document_with_docling(tmp_path)
+
+                # Count element types
+                type_counts = Counter(el.element_type for el in doc.elements)
+
+                # Return ALL elements (not just samples)
+                all_elements = []
+                for el in doc.elements:
+                    all_elements.append({
+                        "type": el.element_type,
+                        "text": el.text,
+                        "level": el.level,
+                        "page": getattr(el, 'page', None),
+                        "metadata": getattr(el, 'metadata', {})
+                    })
+
+                results.append({
+                    "filename": file_name,
+                    "path": file_path,
+                    "status": doc.status,
+                    "format": doc.format,
+                    "total_elements": len(doc.elements),
+                    "total_chars": doc.chars,
+                    "total_words": doc.words,
+                    "page_count": doc.page_count,
+                    "element_types": dict(type_counts),
+                    "elements": all_elements,
+                    "error": doc.error
+                })
+
+            finally:
+                os.unlink(tmp_path)
+
+        except Exception as e:
+            results.append({
+                "filename": file_name,
+                "status": "ERROR",
+                "error": str(e)
+            })
+
+    return {"results": results}
+
+
 @router.post("/dropbox/file")
 async def dropbox_file(request: dict):
     """