From 88acda3a486f45a119ab5befd77cb0dcce2690f3 Mon Sep 17 00:00:00 2001
From: pjmalandrino <pjmalandrino@MacBook-Pro-de-pjmalandrino.local>
Date: Tue, 17 Mar 2026 09:00:31 +0100
Subject: [PATCH] Imrpove sreen chaining and visual, add configurability

---
 .../src/features/analysis/ui/ResultTabs.vue   |  48 +-
 frontend/src/pages/StudioPage.vue             | 775 +++++++++++++++++-
 2 files changed, 787 insertions(+), 36 deletions(-)

diff --git a/frontend/src/features/analysis/ui/ResultTabs.vue b/frontend/src/features/analysis/ui/ResultTabs.vue
index 4c7a967..69adf3b 100644
--- a/frontend/src/features/analysis/ui/ResultTabs.vue
+++ b/frontend/src/features/analysis/ui/ResultTabs.vue
@@ -12,29 +12,31 @@
       </button>
     </div>
     <div class="tab-content">
-      <MarkdownViewer v-if="activeTab === 'markdown'" :content="store.currentAnalysis.contentMarkdown" />
-      <div v-else-if="activeTab === 'html'" class="html-viewer" v-html="store.currentAnalysis.contentHtml" />
+      <MarkdownViewer v-if="activeTab === 'text'" :content="store.currentAnalysis.contentMarkdown" />
       <StructureViewer
-        v-else-if="activeTab === 'structure'"
+        v-else-if="activeTab === 'visual'"
         :pages="store.currentPages"
         :document-id="store.currentAnalysis.documentId"
       />
+      <div v-else-if="activeTab === 'markdown'" class="raw-markdown">
+        <pre class="raw-content">{{ store.currentAnalysis.contentMarkdown }}</pre>
+      </div>
       <ImageGallery v-else-if="activeTab === 'images'" :pages="store.currentPages" />
     </div>
   </div>
   <div v-else-if="store.currentAnalysis?.status === 'RUNNING'" class="result-placeholder">
     <div class="spinner-large" />
-    <span>Analysis in progress...</span>
+    <span>Analyse en cours...</span>
   </div>
   <div v-else-if="store.currentAnalysis?.status === 'FAILED'" class="result-placeholder error">
     <svg viewBox="0 0 20 20" fill="currentColor" class="error-icon"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
-    <span>{{ store.currentAnalysis.errorMessage || 'Analysis failed' }}</span>
+    <span>{{ store.currentAnalysis.errorMessage || 'L\'analyse a échoué' }}</span>
   </div>
   <div v-else class="result-placeholder">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="empty-icon">
       <path d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
     </svg>
-    <span>Upload a document and run an analysis</span>
+    <span>Lancez une analyse pour voir les résultats</span>
   </div>
 </template>
 
@@ -46,12 +48,12 @@ import StructureViewer from './StructureViewer.vue'
 import ImageGallery from './ImageGallery.vue'
 
 const store = useAnalysisStore()
-const activeTab = ref('markdown')
+const activeTab = ref('text')
 
 const tabs = [
+  { id: 'text', label: 'Résultat du texte' },
+  { id: 'visual', label: 'Visuel' },
   { id: 'markdown', label: 'Markdown' },
-  { id: 'html', label: 'HTML' },
-  { id: 'structure', label: 'Structure' },
   { id: 'images', label: 'Images' }
 ]
 </script>
@@ -68,12 +70,13 @@ const tabs = [
   display: flex;
   gap: 0;
   border-bottom: 1px solid var(--border);
-  padding: 0 20px;
+  padding: 0 16px;
   flex-shrink: 0;
+  background: var(--bg);
 }
 
 .tab-btn {
-  padding: 12px 16px;
+  padding: 12px 14px;
   font-size: 13px;
   font-weight: 500;
   color: var(--text-muted);
@@ -82,6 +85,7 @@ const tabs = [
   border-bottom: 2px solid transparent;
   cursor: pointer;
   transition: all var(--transition);
+  white-space: nowrap;
 }
 
 .tab-btn:hover { color: var(--text-secondary); }
@@ -93,13 +97,25 @@ const tabs = [
 .tab-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 16px;
 }
 
-.html-viewer {
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--text);
+.raw-markdown {
+  height: 100%;
+}
+
+.raw-content {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
 }
 
 .result-placeholder {
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index 533a526..481cfaa 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -1,28 +1,251 @@
 <template>
-  <div class="studio-page">
-    <div class="studio-header">
-      <h1 class="studio-title">Document Analysis</h1>
-    </div>
-    <div class="studio-content">
-      <div class="input-panel">
-        <AnalysisPanel />
+  <!-- STATE 1: No document selected — Import view -->
+  <div v-if="!selectedDoc" class="import-page">
+    <div class="import-center">
+      <div class="import-logo">
+        <span class="logo-icon">D</span>
       </div>
-      <div class="output-panel">
-        <ResultTabs />
+      <h1 class="import-title">Intelligence des documents</h1>
+      <p class="import-subtitle">Importez un document PDF pour commencer l'analyse avec Docling</p>
+      <DocumentUpload />
+      <div class="import-docs" v-if="documentStore.documents.length">
+        <label class="section-label">Documents r&eacute;cents</label>
+        <DocumentList />
+      </div>
+    </div>
+  </div>
+
+  <!-- STATE 2 & 3: Document selected — Configurer / V&eacute;rifier -->
+  <div v-else class="studio-page">
+    <!-- Top bar -->
+    <div class="studio-topbar">
+      <div class="topbar-left">
+        <h1 class="topbar-title">Intelligence des documents</h1>
+        <div class="mode-toggle">
+          <button
+            class="toggle-btn"
+            :class="{ active: mode === 'configurer' }"
+            @click="mode = 'configurer'"
+          >Configurer</button>
+          <button
+            class="toggle-btn"
+            :class="{ active: mode === 'verifier' }"
+            @click="mode = 'verifier'"
+            :disabled="!analysisStore.currentAnalysis"
+          >V&eacute;rifier</button>
+        </div>
+      </div>
+      <div class="topbar-actions">
+        <button class="topbar-btn" @click="addMore">
+          <svg viewBox="0 0 20 20" fill="currentColor" class="btn-icon"><path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/></svg>
+          Ajouter des fichiers
+        </button>
+        <button
+          class="topbar-btn primary"
+          :disabled="analysisStore.running"
+          @click="runAnalysis"
+          v-if="mode === 'configurer'"
+        >
+          <div v-if="analysisStore.running" class="spinner-sm" />
+          <svg v-else viewBox="0 0 20 20" fill="currentColor" class="btn-icon"><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>
+          {{ analysisStore.running ? 'Analyse...' : 'Ex\u00e9cuter' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Document info bar -->
+    <div class="doc-infobar">
+      <div class="doc-info-left">
+        <svg class="doc-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
+        <span class="doc-filename">{{ selectedDoc.filename }}</span>
+        <span class="doc-status-chip loaded">Charg&eacute;</span>
+      </div>
+      <div class="doc-info-right" v-if="analysisStore.currentAnalysis">
+        <span class="info-badge" v-if="analysisStore.currentAnalysis.status === 'COMPLETED'">
+          <span class="info-dot success" />
+          {{ selectedDoc.pageCount || '?' }} pages
+        </span>
+        <span class="info-badge" v-if="analysisStore.currentAnalysis.status === 'RUNNING'">
+          <div class="spinner-xs" />
+          Analyse en cours...
+        </span>
+        <span class="info-badge error" v-if="analysisStore.currentAnalysis.status === 'FAILED'">
+          <span class="info-dot error" />
+          &Eacute;chec
+        </span>
+      </div>
+    </div>
+
+    <!-- Main content area -->
+    <div class="studio-main">
+      <!-- Left: PDF Viewer -->
+      <div class="pdf-viewer-panel">
+        <div class="pdf-nav-bar">
+          <button class="pdf-nav-btn" :disabled="currentPage <= 1" @click="currentPage--">
+            <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+          </button>
+          <div class="pdf-page-input-wrap">
+            <input
+              type="number"
+              class="pdf-page-input"
+              :value="currentPage"
+              @change="onPageInput"
+              min="1"
+              :max="selectedDoc.pageCount || 999"
+            />
+          </div>
+          <span class="pdf-page-total">/ {{ selectedDoc.pageCount || '?' }}</span>
+          <button class="pdf-nav-btn" :disabled="selectedDoc.pageCount && currentPage >= selectedDoc.pageCount" @click="currentPage++">
+            <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
+          </button>
+          <span class="pdf-separator" />
+          <span class="pdf-zoom">100%</span>
+        </div>
+        <div class="pdf-image-area">
+          <img
+            v-if="previewUrl"
+            :src="previewUrl"
+            :alt="`Page ${currentPage}`"
+            class="pdf-image"
+          />
+        </div>
+      </div>
+
+      <!-- Right: Config or Results panel -->
+      <div class="right-panel">
+        <!-- CONFIGURER MODE -->
+        <div v-if="mode === 'configurer'" class="config-panel">
+          <div class="config-section">
+            <label class="config-label">
+              Mod&egrave;le
+              <span class="config-hint">?</span>
+            </label>
+            <div class="config-select-display">
+              <span class="config-model-name">Docling</span>
+              <span class="config-model-sub">docling-latest</span>
+            </div>
+          </div>
+
+          <div class="config-section">
+            <label class="config-label">
+              Pages
+              <span class="config-hint">?</span>
+            </label>
+            <input type="text" class="config-input" placeholder='par ex. "1-4,8"' v-model="pageRange" />
+          </div>
+
+          <div class="config-section">
+            <label class="config-label">
+              Extraire les tableaux
+              <span class="config-hint">?</span>
+            </label>
+            <select class="config-select" v-model="tableMode">
+              <option value="markdown">Markdown int&eacute;gr&eacute;</option>
+              <option value="html">HTML</option>
+              <option value="csv">CSV</option>
+            </select>
+          </div>
+
+          <div class="config-section">
+            <label class="config-label">Extraire</label>
+            <div class="extract-options">
+              <button
+                v-for="opt in extractOptions"
+                :key="opt.id"
+                class="extract-btn"
+                :class="{ active: activeExtracts.has(opt.id) }"
+                @click="toggleExtract(opt.id)"
+              >
+                <svg v-if="opt.icon === 'image'" viewBox="0 0 20 20" fill="currentColor" class="extract-icon"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>
+                <svg v-else-if="opt.icon === 'header'" viewBox="0 0 20 20" fill="currentColor" class="extract-icon"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
+                <svg v-else viewBox="0 0 20 20" fill="currentColor" class="extract-icon"><path d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1-2-3 4-2-3-2 3V5z"/></svg>
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+
+          <div class="config-section">
+            <label class="config-label">
+              Annoter les images
+              <span class="config-hint">?</span>
+            </label>
+            <button class="config-add-btn">Ajouter +</button>
+          </div>
+
+          <!-- Documents list at bottom -->
+          <div class="config-section config-docs">
+            <label class="config-label">Documents</label>
+            <DocumentList />
+          </div>
+        </div>
+
+        <!-- VERIFIER MODE -->
+        <div v-if="mode === 'verifier'" class="verify-panel">
+          <ResultTabs />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, computed, watch, onMounted, reactive } from 'vue'
 import { useDocumentStore } from '../features/document/store.js'
 import { useAnalysisStore } from '../features/analysis/store.js'
-import { AnalysisPanel, ResultTabs } from '../features/analysis/index.js'
+import { DocumentUpload, DocumentList } from '../features/document/index.js'
+import { ResultTabs } from '../features/analysis/index.js'
+import { getPreviewUrl } from '../features/document/api.js'
 
 const documentStore = useDocumentStore()
 const analysisStore = useAnalysisStore()
 
+const mode = ref('configurer')
+const currentPage = ref(1)
+const pageRange = ref('')
+const tableMode = ref('markdown')
+
+const extractOptions = [
+  { id: 'images', label: 'Images', icon: 'image' },
+  { id: 'header', label: 'En-t\u00eate', icon: 'header' },
+  { id: 'footer', label: 'Pied de page', icon: 'footer' }
+]
+const activeExtracts = reactive(new Set(['images']))
+
+function toggleExtract(id) {
+  if (activeExtracts.has(id)) activeExtracts.delete(id)
+  else activeExtracts.add(id)
+}
+
+const selectedDoc = computed(() => {
+  return documentStore.documents.find(d => d.id === documentStore.selectedId)
+})
+
+const previewUrl = computed(() => {
+  if (!selectedDoc.value) return null
+  return getPreviewUrl(selectedDoc.value.id, currentPage.value)
+})
+
+function onPageInput(e) {
+  const val = parseInt(e.target.value)
+  if (val >= 1) currentPage.value = val
+}
+
+async function runAnalysis() {
+  if (!documentStore.selectedId) return
+  await analysisStore.run(documentStore.selectedId)
+}
+
+function addMore() {
+  documentStore.selectedId = null
+}
+
+// Auto-switch to verifier when analysis completes
+watch(() => analysisStore.currentAnalysis?.status, (status) => {
+  if (status === 'COMPLETED') {
+    mode.value = 'verifier'
+  }
+})
+
 onMounted(() => {
   documentStore.load()
   analysisStore.load()
@@ -30,6 +253,71 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* ===== IMPORT PAGE ===== */
+.import-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 40px;
+}
+
+.import-center {
+  max-width: 480px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.import-logo {
+  margin-bottom: 8px;
+}
+
+.import-logo .logo-icon {
+  width: 48px;
+  height: 48px;
+  background: var(--accent);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  font-weight: 700;
+  font-size: 22px;
+}
+
+.import-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text);
+  text-align: center;
+}
+
+.import-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.import-docs {
+  width: 100%;
+  margin-top: 16px;
+}
+
+.section-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+/* ===== STUDIO PAGE ===== */
 .studio-page {
   display: flex;
   flex-direction: column;
@@ -37,33 +325,480 @@ onMounted(() => {
   overflow: hidden;
 }
 
-.studio-header {
-  padding: 16px 24px;
+/* Top bar */
+.studio-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
+  background: var(--bg-surface);
 }
 
-.studio-title {
-  font-size: 18px;
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.topbar-title {
+  font-size: 15px;
   font-weight: 600;
   color: var(--text);
 }
 
-.studio-content {
+.mode-toggle {
+  display: flex;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.toggle-btn {
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.toggle-btn:hover:not(:disabled) {
+  color: var(--text);
+}
+
+.toggle-btn.active {
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.toggle-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.topbar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.topbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.topbar-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.topbar-btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.topbar-btn.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.topbar-btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.topbar-btn .btn-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.spinner-sm {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Doc info bar */
+.doc-infobar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 20px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg);
+}
+
+.doc-info-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.doc-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--error);
+}
+
+.doc-filename {
+  font-size: 13px;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.doc-status-chip {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.doc-status-chip.loaded {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--success);
+}
+
+.doc-info-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.info-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+.info-badge.error {
+  color: var(--error);
+}
+
+.info-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.info-dot.success { background: var(--success); }
+.info-dot.error { background: var(--error); }
+
+.spinner-xs {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border-light);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Main content */
+.studio-main {
   flex: 1;
   display: grid;
-  grid-template-columns: 360px 1fr;
+  grid-template-columns: 1fr 380px;
   overflow: hidden;
 }
 
-.input-panel {
+/* PDF Viewer */
+.pdf-viewer-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   border-right: 1px solid var(--border);
-  overflow: hidden;
 }
 
-.output-panel {
+.pdf-nav-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg-surface);
+}
+
+.pdf-nav-btn {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  transition: all var(--transition);
+}
+
+.pdf-nav-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.pdf-nav-btn:disabled { opacity: 0.3; cursor: default; }
+.pdf-nav-btn svg { width: 16px; height: 16px; }
+
+.pdf-page-input-wrap {
+  display: flex;
+}
+
+.pdf-page-input {
+  width: 40px;
+  text-align: center;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: 'IBM Plex Mono', monospace;
+  padding: 3px;
+  -moz-appearance: textfield;
+}
+
+.pdf-page-input::-webkit-outer-spin-button,
+.pdf-page-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.pdf-page-total {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-family: 'IBM Plex Mono', monospace;
+  margin-right: 8px;
+}
+
+.pdf-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+  margin: 0 8px;
+}
+
+.pdf-zoom {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-family: 'IBM Plex Mono', monospace;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 3px 10px;
+}
+
+.pdf-image-area {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  background: var(--bg-elevated);
+  padding: 20px;
+}
+
+.pdf-image {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
+  border-radius: 2px;
+}
+
+/* Right panel */
+.right-panel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+/* Config panel */
+.config-panel {
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+}
+
+.config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.config-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.config-hint {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--border-light);
+  font-size: 10px;
+  color: var(--text-muted);
+  cursor: help;
+}
+
+.config-select-display {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+}
+
+.config-model-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.config-model-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+.config-input {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  color: var(--text);
+  font-size: 13px;
+  transition: border-color var(--transition);
+}
+
+.config-input::placeholder {
+  color: var(--text-muted);
+}
+
+.config-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.config-select {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23A1A1AA' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.config-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.config-select option {
+  background: var(--bg-surface);
+  color: var(--text);
+}
+
+.extract-options {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.extract-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.extract-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.extract-btn.active {
+  background: var(--accent-muted);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.extract-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.config-add-btn {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+  align-self: flex-start;
+}
+
+.config-add-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.config-docs {
+  margin-top: auto;
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+}
+
+/* Verify panel */
+.verify-panel {
+  height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
+
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>