Spaces:

mnoorchenar
/

docmind

Running

App Files Files Community

mnoorchenar commited on Mar 22

Commit

5fafc19

1 Parent(s): c0a4e5a

Update 2026-03-22 16:53:56

Browse files

Files changed (4) hide show

.claude/settings.local.json +2 -1
agents/planner.py +1 -1
templates/index.html +454 -180
write_html.py +528 -0

.claude/settings.local.json CHANGED Viewed

@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(wc -l /e/HuggingFace/docmind/*.py /e/HuggingFace/docmind/**/*.py)",
-      "Bash(python3:*)"
     ]
   }
 }

   "permissions": {
     "allow": [
       "Bash(wc -l /e/HuggingFace/docmind/*.py /e/HuggingFace/docmind/**/*.py)",
+      "Bash(python3:*)",
+      "Bash(python write_html.py)"
     ]
   }
 }

agents/planner.py CHANGED Viewed

@@ -1,7 +1,7 @@
 from agents.llm_factory import call_llm
 _TEMPLATE = """You are a research planning agent. Given the user's question, produce a brief research plan.
-Decide: should the answer be grounded in uploaded documents, web search, or both?
 Output your plan in 2-3 concise sentences. Start with "PLAN:".
 Question: {question}

 from agents.llm_factory import call_llm
 _TEMPLATE = """You are a research planning agent. Given the user's question, produce a brief research plan.
+Describe which aspects of the uploaded document are most relevant to answer the question.
 Output your plan in 2-3 concise sentences. Start with "PLAN:".
 Question: {question}

templates/index.html CHANGED Viewed

@@ -1,246 +1,520 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width,initial-scale=1"/>
-  <title>DocMind</title>
-  <style>
-    :root{--bg:#0f111a;--card:#181b24;--border:#2a2d3a;--text:#e4e6ef;--muted:#8892a4;--accent:#4f8ef7;--green:#22c55e;--red:#ef4444;--teal:#06b6d4;--gold:#f59e0b}
-    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
-    header{background:var(--card);border-bottom:1px solid var(--border);padding:13px 24px;display:flex;align-items:center;gap:12px}
-    .logo{font-size:1.1rem;font-weight:800;color:var(--accent)}
-    .logo span{color:var(--text)}
-    .model-badge{font-size:.68rem;background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.2);color:var(--accent);padding:3px 9px;border-radius:20px}
-    #source-pill{margin-left:auto;font-size:.72rem;padding:4px 10px;border-radius:20px;background:rgba(136,146,164,.08);border:1px solid var(--border);color:var(--muted)}
-    #source-pill.loaded{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);color:var(--green)}
-    main{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 50px)}
-    .panel{padding:22px 20px;overflow-y:auto}
-    .panel-left{border-right:1px solid var(--border)}
-    .slabel{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
-    .tabs{display:flex;gap:3px;background:rgba(255,255,255,.04);border-radius:8px;padding:3px;margin-bottom:16px}
-    .tab-btn{flex:1;background:none;border:none;color:var(--muted);font-size:.8rem;font-weight:600;padding:7px;border-radius:6px;cursor:pointer;transition:all .15s}
-    .tab-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
-    .dropzone{border:2px dashed var(--border);border-radius:9px;padding:30px 16px;text-align:center;cursor:pointer;transition:all .2s}
-    .dropzone:hover,.dropzone.drag-over{border-color:var(--accent);background:rgba(79,142,247,.05)}
-    .dz-icon{font-size:2rem;margin-bottom:8px}
-    .dz-text{font-size:.82rem;color:var(--muted);line-height:1.5}
-    .dz-text strong{color:var(--accent)}
-    input[type=url],textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:7px;padding:9px 12px;color:var(--text);font-size:.86rem;font-family:inherit;outline:none;transition:border-color .2s}
-    input[type=url]:focus,textarea:focus{border-color:var(--accent)}
-    textarea{resize:vertical;min-height:80px}
-    .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:7px;border:none;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
-    .btn-primary{background:var(--accent);color:#fff}
-    .btn-primary:hover{background:#3a7ae8}
-    .btn-primary:disabled{opacity:.45;cursor:default}
-    .btn-sm{padding:7px 14px;font-size:.78rem}
-    .msg{border-radius:8px;padding:10px 13px;font-size:.8rem;margin-top:10px;line-height:1.55}
-    .msg-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--green)}
-    .msg-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--red)}
-    .msg-info{color:var(--muted);font-size:.78rem;margin-top:8px}
-    #source-card{display:none;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18);border-radius:9px;padding:12px 14px;margin-top:14px;font-size:.8rem}
-    #source-card strong{color:var(--text);display:block;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    #source-card span{color:var(--teal);font-size:.73rem}
-    .q-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px}
-    .q-row{display:flex;align-items:center;gap:10px;margin-top:10px}
-    #q-err{font-size:.78rem;color:var(--red)}
-    #trace-wrap{display:none;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:9px;padding:10px 12px;max-height:240px;overflow-y:auto;margin-bottom:14px}
-    .t-step{display:flex;align-items:flex-start;gap:8px;font-size:.74rem;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
-    .t-step:last-child{border-bottom:none}
-    .t-badge{font-size:.6rem;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0;margin-top:1px}
-    .b-planner{background:rgba(79,142,247,.15);color:var(--accent)}
-    .b-retriever{background:rgba(6,182,212,.15);color:var(--teal)}
-    .b-grader{background:rgba(245,158,11,.15);color:var(--gold)}
-    .b-generator{background:rgba(34,197,94,.15);color:var(--green)}
-    .b-critic{background:rgba(239,68,68,.1);color:var(--red)}
-    .t-msg{flex:1;color:var(--muted);line-height:1.45}
-    .t-lat{color:rgba(136,146,164,.45);font-size:.65rem;white-space:nowrap}
-    #answer-wrap{display:none;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px}
-    .ans-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px}
-    #answer-text{font-size:.88rem;line-height:1.72;white-space:pre-wrap;word-break:break-word}
-    #verdict{margin-top:12px;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:5px;display:inline-block}
-    .v-ok{background:rgba(34,197,94,.12);color:var(--green)}
-    .v-warn{background:rgba(245,158,11,.12);color:var(--gold)}
-    @media(max-width:768px){main{grid-template-columns:1fr}.panel-left{border-right:none;border-bottom:1px solid var(--border)}}
-  </style>
 </head>
 <body>
 <header>
-  <div class="logo">Doc<span>Mind</span></div>
-  <span class="model-badge">Qwen 2.5 7B</span>
-  <span id="source-pill">No source loaded</span>
 </header>
 <main>
-  <!-- LEFT: LOAD SOURCE -->
-  <div class="panel panel-left">
-    <div class="slabel">Load Knowledge Source</div>
-    <div class="tabs">
-      <button class="tab-btn active" onclick="switchTab(this,'pdf')">&#128196; Upload PDF</button>
-      <button class="tab-btn" onclick="switchTab(this,'url')">&#127760; Paste URL</button>
     </div>
-    <div id="tab-pdf">
-      <div class="dropzone" id="dz"
-           onclick="document.getElementById('fi').click()"
-           ondragover="dg(event,true)" ondragleave="dg(event,false)" ondrop="dp(event)">
-        <div class="dz-icon">&#128194;</div>
-        <div class="dz-text"><strong>Click to browse</strong> or drag &amp; drop<br>PDF &middot; max 10 MB</div>
       </div>
-      <input type="file" id="fi" accept=".pdf" style="display:none" onchange="fc(event)"/>
-      <div id="pdf-msg"></div>
     </div>
-    <div id="tab-url" style="display:none">
-      <input type="url" id="url-inp" placeholder="https://en.wikipedia.org/wiki/..."
-             style="margin-bottom:10px" onkeydown="if(event.key==='Enter')fetchURL()"/>
-      <button class="btn btn-primary btn-sm" id="url-btn" onclick="fetchURL()">Fetch &amp; Index</button>
-      <div id="url-msg"></div>
     </div>
-    <div id="source-card">
-      <strong id="source-name"></strong>
-      <span id="source-chunks"></span>
     </div>
   </div>
-  <!-- RIGHT: RESEARCH -->
-  <div class="panel">
-    <div class="slabel">Research Question</div>
-    <div class="q-wrap">
-      <textarea id="q-inp" rows="3"
-        placeholder="Ask anything about the loaded source... (Enter to submit)"
-        onkeydown="qk(event)"></textarea>
-      <div class="q-row">
-        <button class="btn btn-primary" id="ask-btn" onclick="ask()">&#9889; Ask</button>
-        <span id="q-err"></span>
       </div>
     </div>
-    <div id="trace-wrap"><div id="trace-log"></div></div>
-    <div id="answer-wrap">
-      <div class="ans-label">Answer</div>
       <div id="answer-text"></div>
-      <div id="verdict"></div>
     </div>
   </div>
 </main>
 <script>
 let pollTimer=null,seen=0;
-const esc=s=>String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 function switchTab(btn,name){
-  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
-  btn.classList.add('active');
-  document.getElementById('tab-pdf').style.display=name==='pdf'?'':'none';
-  document.getElementById('tab-url').style.display=name==='url'?'':'none';
 }
-function dg(e,over){e.preventDefault();document.getElementById('dz').classList[over?'add':'remove']('drag-over');}
-function dp(e){e.preventDefault();document.getElementById('dz').classList.remove('drag-over');const f=e.dataTransfer.files[0];if(f)up(f);}
 function fc(e){if(e.target.files[0])up(e.target.files[0]);}
 async function up(file){
-  if(!file.name.toLowerCase().endsWith('.pdf')){sm('pdf-msg','error','Only PDF files are supported.');return;}
-  sm('pdf-msg','info','Uploading '+file.name+'...');
-  const fd=new FormData();fd.append('file',file);
   try{
-    const r=await fetch('/api/upload',{method:'POST',body:fd});
     const d=await r.json();
-    if(d.error){sm('pdf-msg','error',d.error);return;}
-    src(d.filename,d.chunks);sm('pdf-msg','ok','Indexed '+d.chunks+' chunks from "'+d.filename+'"');
-  }catch(e){sm('pdf-msg','error','Upload failed: '+e.message);}
 }
 async function fetchURL(){
-  const url=document.getElementById('url-inp').value.trim();
-  if(!url){sm('url-msg','error','Please enter a URL.');return;}
-  document.getElementById('url-btn').disabled=true;
-  sm('url-msg','info','Fetching page...');
   try{
-    const r=await fetch('/api/ingest_url',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url})});
     const d=await r.json();
-    if(d.error){sm('url-msg','error',d.error);return;}
-    src(d.url,d.chunks);sm('url-msg','ok','Indexed '+d.chunks+' chunks');
-  }catch(e){sm('url-msg','error','Failed: '+e.message);}
-  finally{document.getElementById('url-btn').disabled=false;}
 }
-function src(name,chunks){
-  document.getElementById('source-name').textContent=name;
-  document.getElementById('source-chunks').textContent=chunks+' chunks indexed';
-  document.getElementById('source-card').style.display='block';
-  const p=document.getElementById('source-pill');
-  p.textContent=name.length>32?name.slice(0,32)+'...':name;
-  p.classList.add('loaded');
 }
-function qk(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();ask();}}
 async function ask(){
-  const q=document.getElementById('q-inp').value.trim();
-  document.getElementById('q-err').textContent='';
-  if(!q){document.getElementById('q-err').textContent='Please enter a question.';return;}
-  document.getElementById('trace-wrap').style.display='block';
-  document.getElementById('trace-log').innerHTML='<div class="t-step"><span class="t-msg" style="color:var(--muted)">Starting agents…</span></div>';
-  document.getElementById('answer-wrap').style.display='none';
-  document.getElementById('ask-btn').disabled=true;
   seen=0;clearInterval(pollTimer);
   try{
-    const r=await fetch('/api/research',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({question:q})});
     const d=await r.json();
-    if(d.error){
-      traceErr(d.error);
-      document.getElementById('ask-btn').disabled=false;
-      return;
-    }
     pollTimer=setInterval(()=>poll(d.query_id),1500);
-  }catch(e){
-    traceErr('Network error: '+e.message);
-    document.getElementById('ask-btn').disabled=false;
-  }
 }
 async function poll(qid){
   try{
-    const r=await fetch('/api/trace/'+qid);
-    if(!r.ok){traceErr('Server error '+r.status);clearInterval(pollTimer);document.getElementById('ask-btn').disabled=false;return;}
     const d=await r.json();
-    rt(d.trace||[]);
-    if(['complete','error'].includes(d.status)){
       clearInterval(pollTimer);
-      document.getElementById('ask-btn').disabled=false;
-      if(d.status==='complete'&&d.result) ra(d.result);
-      else if(d.status==='error'&&d.result) traceErr(d.result.error||'An error occurred.');
     }
-  }catch(e){traceErr('Poll error: '+e.message);clearInterval(pollTimer);document.getElementById('ask-btn').disabled=false;}
-}
-function traceErr(msg){
-  const log=document.getElementById('trace-log');
-  log.innerHTML+='<div class="t-step"><span class="t-badge" style="background:rgba(239,68,68,.15);color:var(--red)">error</span><span class="t-msg" style="color:var(--red)">'+esc(msg)+'</span></div>';
-  log.scrollTop=log.scrollHeight;
 }
-function rt(steps){
   if(!steps.length)return;
-  const log=document.getElementById('trace-log');
-  if(seen===0)log.innerHTML='';
   for(let i=seen;i<steps.length;i++){
     const s=steps[i];
-    const lat=s.latency_ms>0?'<span class="t-lat">'+s.latency_ms+'ms</span>':'';
-    log.innerHTML+='<div class="t-step"><span class="t-badge b-'+s.agent+'">'+s.agent+'</span><span class="t-msg">'+esc(s.message)+'</span>'+lat+'</div>';
   }
-  seen=steps.length;log.scrollTop=log.scrollHeight;
 }
-function ra(result){
-  document.getElementById('answer-wrap').style.display='block';
-  document.getElementById('answer-text').textContent=result.generation||'No answer generated.';
-  const v=document.getElementById('verdict');
-  if(result.verdict==='APPROVED'){v.className='v-ok';v.textContent='High confidence';}
-  else if(result.verdict){v.className='v-warn';v.textContent='Low confidence - verify with source';}
-  else{v.textContent='';}
 }
-function sm(id,type,msg){
   const el=document.getElementById(id);
-  if(type==='ok')el.innerHTML='<div class="msg msg-ok">'+esc(msg)+'</div>';
-  else if(type==='error')el.innerHTML='<div class="msg msg-err">'+esc(msg)+'</div>';
-  else el.innerHTML='<div class="msg-info">'+esc(msg)+'</div>';
 }
 </script>
 </body>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>DocMind — AI Document Research</title>
+<style>
+:root{
+  --bg:#0d0f1a;--surface:#13161f;--card:#181c27;--card2:#1e2230;
+  --border:#252836;--border2:#2e3244;
+  --text:#e8eaf2;--sub:#b0b8cc;--muted:#7880a0;
+  --accent:#5b8ff9;--accent2:#3a6ee8;
+  --green:#22d47a;--red:#f05c5c;--teal:#29c6d4;--gold:#f5a623;--purple:#a78bfa;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+     background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
+/* ── ANIMATIONS ────────────────────────────────── */
+@keyframes spin{to{transform:rotate(360deg)}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
+@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
+/* ── HEADER ────────────────────────────────────── */
+header{
+  background:var(--surface);
+  border-bottom:1px solid var(--border);
+  padding:0 28px;height:56px;
+  display:flex;align-items:center;gap:14px;
+  position:sticky;top:0;z-index:100;
+}
+.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
+.logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--purple));
+           border-radius:8px;display:flex;align-items:center;justify-content:center;
+           font-size:15px;flex-shrink:0}
+.logo-text{font-size:1rem;font-weight:800;color:var(--text);letter-spacing:-.3px}
+.logo-text span{color:var(--accent)}
+.logo-sub{font-size:.68rem;color:var(--muted);margin-left:2px;font-weight:400;
+          display:none} /* shown on wider screens */
+.hdr-badges{display:flex;gap:8px;align-items:center;margin-left:4px}
+.badge{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
+.badge-model{background:rgba(91,143,249,.12);border:1px solid rgba(91,143,249,.25);color:var(--accent)}
+.badge-src{background:rgba(113,128,160,.1);border:1px solid var(--border);color:var(--muted);
+           max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.badge-src.loaded{background:rgba(34,212,122,.1);border-color:rgba(34,212,122,.3);color:var(--green)}
+#hdr-src{margin-left:auto}
+/* ── LAYOUT ─────────────────────────────────────── */
+main{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 56px);overflow:hidden}
+.panel{padding:24px 22px;overflow-y:auto;height:100%}
+.panel-left{border-right:1px solid var(--border);background:var(--surface)}
+.panel-right{background:var(--bg)}
+/* ── SECTION HEADERS ────────────────────────────── */
+.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
+.sec-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;
+          justify-content:center;font-size:13px;flex-shrink:0}
+.sec-icon-blue{background:rgba(91,143,249,.15)}
+.sec-icon-purple{background:rgba(167,139,250,.15)}
+.sec-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
+/* ── TABS ────────────────────────────────────────── */
+.tabs{display:flex;gap:2px;background:rgba(255,255,255,.03);border-radius:9px;
+      padding:3px;margin-bottom:18px;border:1px solid var(--border)}
+.tab-btn{flex:1;background:none;border:none;color:var(--muted);font-size:.78rem;
+         font-weight:600;padding:7px 10px;border-radius:7px;cursor:pointer;
+         transition:all .18s;font-family:inherit;display:flex;align-items:center;
+         justify-content:center;gap:5px}
+.tab-btn.active{background:var(--card2);color:var(--text);
+                box-shadow:0 1px 6px rgba(0,0,0,.35)}
+/* ── DROPZONE ────────────────────────────────────── */
+.dropzone{
+  border:2px dashed var(--border2);border-radius:12px;padding:28px 16px;
+  text-align:center;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;
+}
+.dropzone::before{
+  content:"";position:absolute;inset:0;
+  background:linear-gradient(90deg,transparent 0%,rgba(91,143,249,.04) 50%,transparent 100%);
+  background-size:200% 100%;opacity:0;transition:opacity .3s;
+}
+.dropzone:hover{border-color:var(--accent);background:rgba(91,143,249,.04)}
+.dropzone:hover::before{opacity:1;animation:shimmer 2s infinite}
+.dropzone.drag-over{border-color:var(--accent);background:rgba(91,143,249,.08);transform:scale(1.01)}
+.dz-icon{font-size:2.2rem;margin-bottom:10px;display:block}
+.dz-label{font-size:.84rem;color:var(--sub);line-height:1.5}
+.dz-label strong{color:var(--accent)}
+.dz-hint{font-size:.72rem;color:var(--muted);margin-top:5px}
+/* ── URL INPUT ────────────────────────────────────── */
+.url-row{display:flex;gap:8px;margin-bottom:10px}
+.url-row input{flex:1;background:var(--card);border:1px solid var(--border2);
+               border-radius:8px;padding:9px 12px;color:var(--text);font-size:.84rem;
+               font-family:inherit;outline:none;transition:border-color .18s}
+.url-row input:focus{border-color:var(--accent)}
+/* ── SOURCE LOADED CARD ──────────────────────────── */
+#source-card{
+  display:none;margin-top:16px;background:var(--card);
+  border:1px solid rgba(34,212,122,.2);border-radius:10px;padding:13px 14px;
+  animation:fadeUp .25s ease;
+}
+.sc-row{display:flex;align-items:flex-start;gap:10px}
+.sc-icon{width:34px;height:34px;background:rgba(34,212,122,.12);border-radius:8px;
+         flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
+.sc-info{flex:1;min-width:0}
+.sc-name{font-size:.82rem;font-weight:600;color:var(--text);
+         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
+.sc-meta{font-size:.72rem;color:var(--teal)}
+.sc-ready{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
+          font-size:.7rem;font-weight:700;color:var(--green);
+          background:rgba(34,212,122,.08);border:1px solid rgba(34,212,122,.18);
+          border-radius:5px;padding:3px 8px}
+/* ── MESSAGES ────────────────────────────────────── */
+.msg{border-radius:8px;padding:10px 13px;font-size:.79rem;
+     margin-top:10px;line-height:1.55;animation:fadeUp .2s ease}
+.msg-ok{background:rgba(34,212,122,.07);border:1px solid rgba(34,212,122,.2);color:var(--green)}
+.msg-err{background:rgba(240,92,92,.07);border:1px solid rgba(240,92,92,.2);color:var(--red)}
+.msg-info{color:var(--muted);font-size:.76rem;margin-top:8px}
+/* ── BUTTONS ─────────────────────────────────────── */
+.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;
+     border-radius:8px;border:none;font-size:.84rem;font-weight:600;
+     cursor:pointer;transition:all .18s;font-family:inherit}
+.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));
+             color:#fff;box-shadow:0 2px 8px rgba(91,143,249,.25)}
+.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,143,249,.35)}
+.btn-primary:active{transform:none}
+.btn-primary:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
+.btn-sm{padding:7px 14px;font-size:.78rem}
+.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--border2);
+           color:var(--sub);font-size:.74rem;padding:5px 12px;border-radius:6px}
+.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}
+.spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);
+         border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0}
+/* ── QUESTION AREA ───────────────────────────────── */
+.q-card{background:var(--card);border:1px solid var(--border2);
+        border-radius:11px;padding:16px;margin-bottom:16px}
+.q-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;
+         letter-spacing:.06em;margin-bottom:8px}
+textarea{width:100%;background:transparent;border:none;color:var(--text);
+         font-size:.9rem;font-family:inherit;outline:none;resize:none;
+         line-height:1.6;min-height:72px}
+textarea::placeholder{color:var(--muted)}
+.q-footer{display:flex;align-items:center;gap:10px;padding-top:12px;
+          border-top:1px solid var(--border)}
+#q-err{font-size:.77rem;color:var(--red)}
+/* ── PIPELINE ────────────────────────────────────── */
+#pipeline{display:none;margin-bottom:14px;animation:fadeUp .2s ease}
+.pipe-row{display:flex;align-items:center;gap:0;background:var(--card);
+          border:1px solid var(--border2);border-radius:10px;padding:10px 14px;
+          overflow-x:auto}
+.pipe-step{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;
+           color:var(--muted);white-space:nowrap;padding:4px 8px;border-radius:6px;
+           transition:all .2s}
+.pipe-step.active{color:var(--accent);background:rgba(91,143,249,.12)}
+.pipe-step.done{color:var(--green)}
+.pipe-step .step-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
+.pipe-step.active .step-dot{animation:pulse .9s ease infinite}
+.pipe-arrow{color:var(--border2);font-size:.8rem;padding:0 2px;flex-shrink:0}
+/* ── TRACE LOG ───────────────────────────────────── */
+#trace-wrap{display:none;margin-bottom:16px;animation:fadeUp .2s ease}
+.trace-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.trace-title{font-size:.7rem;font-weight:700;text-transform:uppercase;
+             letter-spacing:.07em;color:var(--muted)}
+.trace-box{background:var(--card);border:1px solid var(--border2);border-radius:10px;
+           padding:4px 0;max-height:220px;overflow-y:auto}
+.t-step{display:flex;align-items:flex-start;gap:10px;padding:8px 14px;
+        border-bottom:1px solid var(--border);animation:fadeUp .18s ease;transition:background .15s}
+.t-step:last-child{border-bottom:none}
+.t-step:hover{background:rgba(255,255,255,.02)}
+.t-icon{font-size:13px;flex-shrink:0;margin-top:1px;width:18px;text-align:center}
+.t-agent{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
+         padding:2px 7px;border-radius:4px;flex-shrink:0;white-space:nowrap}
+.a-planner  {background:rgba(91,143,249,.14);color:var(--accent)}
+.a-retriever{background:rgba(41,198,212,.14);color:var(--teal)}
+.a-grader   {background:rgba(245,166,35,.14);color:var(--gold)}
+.a-generator{background:rgba(34,212,122,.14);color:var(--green)}
+.a-critic   {background:rgba(167,139,250,.14);color:var(--purple)}
+.a-error    {background:rgba(240,92,92,.14);color:var(--red)}
+.t-msg{flex:1;font-size:.78rem;color:var(--sub);line-height:1.5}
+.t-lat{font-size:.65rem;color:rgba(128,136,160,.5);flex-shrink:0;margin-top:2px}
+/* ── ANSWER CARD ─────────────────────────────────── */
+#answer-wrap{display:none;background:var(--card);border:1px solid var(--border2);
+             border-radius:12px;overflow:hidden;animation:fadeUp .3s ease}
+.ans-header{display:flex;align-items:center;justify-content:space-between;
+            padding:13px 18px 12px;border-bottom:1px solid var(--border);
+            background:rgba(255,255,255,.02)}
+.ans-title{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;
+           text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
+.ans-title-icon{width:22px;height:22px;background:rgba(34,212,122,.15);border-radius:6px;
+                display:flex;align-items:center;justify-content:center;font-size:11px}
+.ans-actions{display:flex;align-items:center;gap:8px}
+#verdict-badge{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:20px}
+.v-ok  {background:rgba(34,212,122,.1);border:1px solid rgba(34,212,122,.25);color:var(--green)}
+.v-warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);color:var(--gold)}
+.ans-body{padding:18px}
+#answer-text{font-size:.9rem;line-height:1.78;color:var(--text);
+             white-space:pre-wrap;word-break:break-word}
+/* ── RESPONSIVE ──────────────────────────────────── */
+@media(min-width:1100px){.logo-sub{display:block}}
+@media(max-width:768px){
+  main{grid-template-columns:1fr;height:auto;overflow:visible}
+  .panel{height:auto}
+  .panel-left{border-right:none;border-bottom:1px solid var(--border)}
+}
+</style>
 </head>
 <body>
+<!-- ── HEADER ── -->
 <header>
+  <a class="logo" href="#">
+    <div class="logo-icon">&#129504;</div>
+    <span class="logo-text">Doc<span>Mind</span></span>
+  </a>
+  <span class="logo-sub">AI Document Research</span>
+  <div class="hdr-badges">
+    <span class="badge badge-model">Qwen 2.5 7B</span>
+  </div>
+  <span class="badge badge-src" id="hdr-src">No source loaded</span>
 </header>
 <main>
+<!-- ── LEFT PANEL: KNOWLEDGE BASE ── -->
+<div class="panel panel-left">
+  <div class="sec-head">
+    <div class="sec-icon sec-icon-blue">&#128218;</div>
+    <span class="sec-title">Knowledge Base</span>
+  </div>
+  <div class="tabs">
+    <button class="tab-btn active" onclick="switchTab(this,'pdf')">&#128196;&ensp;Upload PDF</button>
+    <button class="tab-btn" onclick="switchTab(this,'url')">&#127760;&ensp;Paste URL</button>
+  </div>
+  <!-- PDF TAB -->
+  <div id="tab-pdf">
+    <div class="dropzone" id="dz"
+         onclick="document.getElementById('fi').click()"
+         ondragover="dg(event,true)" ondragleave="dg(event,false)" ondrop="dp(event)">
+      <span class="dz-icon">&#128196;</span>
+      <div class="dz-label"><strong>Click to browse</strong> or drag &amp; drop</div>
+      <div class="dz-hint">PDF only &middot; max 10 MB</div>
+    </div>
+    <input type="file" id="fi" accept=".pdf" style="display:none" onchange="fc(event)"/>
+    <div id="pdf-msg"></div>
+  </div>
+  <!-- URL TAB -->
+  <div id="tab-url" style="display:none">
+    <div class="url-row">
+      <input type="url" id="url-inp" placeholder="https://en.wikipedia.org/wiki/..."
+             onkeydown="if(event.key==='Enter')fetchURL()"/>
+      <button class="btn btn-primary btn-sm" id="url-btn" onclick="fetchURL()">Fetch</button>
     </div>
+    <div class="msg-info" style="margin-bottom:4px">Wikipedia, government sites, and docs work best. Some sites block automated access.</div>
+    <div id="url-msg"></div>
+  </div>
+  <!-- SOURCE LOADED -->
+  <div id="source-card">
+    <div class="sc-row">
+      <div class="sc-icon" id="sc-icon">&#128196;</div>
+      <div class="sc-info">
+        <div class="sc-name" id="source-name"></div>
+        <div class="sc-meta" id="source-chunks"></div>
       </div>
     </div>
+    <div class="sc-ready">&#10003;&ensp;Ready for questions</div>
+  </div>
+</div>
+<!-- ── RIGHT PANEL: RESEARCH ── -->
+<div class="panel panel-right">
+  <div class="sec-head">
+    <div class="sec-icon sec-icon-purple">&#128269;</div>
+    <span class="sec-title">Research Query</span>
+  </div>
+  <div class="q-card">
+    <div class="q-label">Your Question</div>
+    <textarea id="q-inp" rows="3"
+      placeholder="Ask anything about the loaded document or URL&#10;Press Enter to submit, Shift+Enter for new line"
+      onkeydown="qk(event)"></textarea>
+    <div class="q-footer">
+      <button class="btn btn-primary" id="ask-btn" onclick="ask()">&#9889;&ensp;Ask</button>
+      <span id="q-err"></span>
     </div>
+  </div>
+  <!-- AGENT PIPELINE -->
+  <div id="pipeline">
+    <div class="pipe-row">
+      <div class="pipe-step" id="ps-planner"><span class="step-dot"></span>&#129518;&ensp;Planner</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-retriever"><span class="step-dot"></span>&#128269;&ensp;Retriever</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-grader"><span class="step-dot"></span>&#9878;&ensp;Grader</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-generator"><span class="step-dot"></span>&#9997;&ensp;Generator</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-critic"><span class="step-dot"></span>&#128300;&ensp;Critic</div>
+    </div>
+  </div>
+  <!-- TRACE LOG -->
+  <div id="trace-wrap">
+    <div class="trace-hdr">
+      <span class="trace-title">&#128240;&ensp;Agent Trace</span>
     </div>
+    <div class="trace-box" id="trace-log"></div>
   </div>
+  <!-- ANSWER -->
+  <div id="answer-wrap">
+    <div class="ans-header">
+      <div class="ans-title">
+        <div class="ans-title-icon">&#128161;</div>
+        Answer
+      </div>
+      <div class="ans-actions">
+        <span id="verdict-badge"></span>
+        <button class="btn btn-ghost" id="copy-btn" onclick="copyAns()">&#128203;&ensp;Copy</button>
       </div>
     </div>
+    <div class="ans-body">
       <div id="answer-text"></div>
     </div>
   </div>
+</div>
 </main>
 <script>
 let pollTimer=null,seen=0;
+const esc=s=>String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+const AGENT_ICONS={planner:"&#129518;",retriever:"&#128269;",grader:"&#9878;",generator:"&#9997;",critic:"&#128300;"};
+/* ── TABS ── */
 function switchTab(btn,name){
+  document.querySelectorAll(".tab-btn").forEach(b=>b.classList.remove("active"));
+  btn.classList.add("active");
+  document.getElementById("tab-pdf").style.display=name==="pdf"?"":"none";
+  document.getElementById("tab-url").style.display=name==="url"?"":"none";
 }
+/* ── DRAG & DROP ── */
+function dg(e,over){e.preventDefault();document.getElementById("dz").classList[over?"add":"remove"]("drag-over");}
+function dp(e){e.preventDefault();document.getElementById("dz").classList.remove("drag-over");const f=e.dataTransfer.files[0];if(f)up(f);}
 function fc(e){if(e.target.files[0])up(e.target.files[0]);}
+/* ── UPLOAD PDF ── */
 async function up(file){
+  if(!file.name.toLowerCase().endsWith(".pdf")){showMsg("pdf-msg","error","Only PDF files are supported.");return;}
+  showMsg("pdf-msg","info","Uploading "+file.name+"...");
+  const fd=new FormData();fd.append("file",file);
   try{
+    const r=await fetch("/api/upload",{method:"POST",body:fd});
     const d=await r.json();
+    if(d.error){showMsg("pdf-msg","error",d.error);return;}
+    setSource(d.filename,d.chunks,"pdf");
+    showMsg("pdf-msg","ok","&#10003;&ensp;"+d.chunks+" chunks indexed from "+d.filename);
+  }catch(e){showMsg("pdf-msg","error","Upload failed: "+e.message);}
 }
+/* ── FETCH URL ── */
 async function fetchURL(){
+  const url=document.getElementById("url-inp").value.trim();
+  if(!url){showMsg("url-msg","error","Please enter a URL.");return;}
+  const btn=document.getElementById("url-btn");
+  btn.disabled=true;btn.textContent="Fetching...";
+  showMsg("url-msg","info","Fetching and indexing page...");
   try{
+    const r=await fetch("/api/ingest_url",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url})});
     const d=await r.json();
+    if(d.error){showMsg("url-msg","error",d.error);return;}
+    setSource(d.url,d.chunks,"url");
+    showMsg("url-msg","ok","&#10003;&ensp;"+d.chunks+" chunks indexed");
+  }catch(e){showMsg("url-msg","error","Failed: "+e.message);}
+  finally{btn.disabled=false;btn.textContent="Fetch";}
 }
+/* ── SOURCE LOADED ── */
+function setSource(name,chunks,type){
+  document.getElementById("source-name").textContent=name;
+  document.getElementById("source-chunks").textContent=chunks+" chunks indexed";
+  document.getElementById("sc-icon").textContent=type==="pdf"?"&#128196;":"&#127760;";
+  document.getElementById("source-card").style.display="block";
+  const p=document.getElementById("hdr-src");
+  p.textContent=name.length>30?name.slice(0,30)+"...":name;
+  p.classList.add("loaded");
 }
+/* ── PIPELINE ── */
+const PIPE_AGENTS=["planner","retriever","grader","generator","critic"];
+function resetPipeline(){PIPE_AGENTS.forEach(a=>{const el=document.getElementById("ps-"+a);if(el){el.classList.remove("active","done");}});}
+function setAgent(name,done){
+  const el=document.getElementById("ps-"+name);
+  if(!el)return;
+  if(done){el.classList.remove("active");el.classList.add("done");}
+  else{el.classList.remove("done");el.classList.add("active");}
+}
+/* ── ASK ── */
+function qk(e){if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();ask();}}
 async function ask(){
+  const q=document.getElementById("q-inp").value.trim();
+  document.getElementById("q-err").textContent="";
+  if(!q){document.getElementById("q-err").textContent="Please enter a question.";return;}
+  const btn=document.getElementById("ask-btn");
+  btn.disabled=true;
+  btn.innerHTML="<span class='spinner'></span>&ensp;Thinking...";
+  document.getElementById("pipeline").style.display="block";
+  document.getElementById("trace-wrap").style.display="block";
+  document.getElementById("trace-log").innerHTML="<div class='t-step'><span class='t-msg' style='color:var(--muted);font-style:italic'>Initialising agents...</span></div>";
+  document.getElementById("answer-wrap").style.display="none";
+  resetPipeline();
   seen=0;clearInterval(pollTimer);
   try{
+    const r=await fetch("/api/research",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:q})});
     const d=await r.json();
+    if(d.error){traceErr(d.error);resetAskBtn();return;}
     pollTimer=setInterval(()=>poll(d.query_id),1500);
+  }catch(e){traceErr("Network error: "+e.message);resetAskBtn();}
+}
+function resetAskBtn(){
+  const btn=document.getElementById("ask-btn");
+  btn.disabled=false;
+  btn.innerHTML="&#9889;&ensp;Ask";
 }
+/* ── POLL ── */
 async function poll(qid){
   try{
+    const r=await fetch("/api/trace/"+qid);
+    if(!r.ok){traceErr("Server error "+r.status);clearInterval(pollTimer);resetAskBtn();return;}
     const d=await r.json();
+    renderTrace(d.trace||[]);
+    if(["complete","error"].includes(d.status)){
       clearInterval(pollTimer);
+      resetAskBtn();
+      if(d.status==="complete"&&d.result)renderAnswer(d.result);
+      else if(d.status==="error"&&d.result)traceErr(d.result.error||"An error occurred.");
     }
+  }catch(e){traceErr("Poll error: "+e.message);clearInterval(pollTimer);resetAskBtn();}
 }
+/* ── TRACE ── */
+function renderTrace(steps){
   if(!steps.length)return;
+  const log=document.getElementById("trace-log");
+  if(seen===0)log.innerHTML="";
   for(let i=seen;i<steps.length;i++){
     const s=steps[i];
+    const icon=AGENT_ICONS[s.agent]||"&#9679;";
+    const lat=s.latency_ms>0?"<span class='t-lat'>"+s.latency_ms+"ms</span>":"";
+    const cls="a-"+(["planner","retriever","grader","generator","critic"].includes(s.agent)?s.agent:"error");
+    log.innerHTML+="<div class='t-step'>"
+      +"<span class='t-icon'>"+icon+"</span>"
+      +"<span class='t-agent "+cls+"'>"+s.agent+"</span>"
+      +"<span class='t-msg'>"+esc(s.message)+"</span>"
+      +lat+"</div>";
+    if(s.status==="running")setAgent(s.agent,false);
+    else if(s.status==="complete")setAgent(s.agent,true);
   }
+  seen=steps.length;
+  log.scrollTop=log.scrollHeight;
+}
+function traceErr(msg){
+  const log=document.getElementById("trace-log");
+  log.innerHTML+="<div class='t-step'><span class='t-icon'>&#10060;</span><span class='t-agent a-error'>error</span><span class='t-msg' style='color:var(--red)'>"+esc(msg)+"</span></div>";
+  log.scrollTop=log.scrollHeight;
+}
+/* ── ANSWER ── */
+function renderAnswer(result){
+  document.getElementById("answer-wrap").style.display="block";
+  document.getElementById("answer-text").textContent=result.generation||"No answer generated.";
+  const vb=document.getElementById("verdict-badge");
+  if(result.verdict==="APPROVED"){vb.className="v-ok";vb.textContent="&#10003; High confidence";}
+  else if(result.verdict){vb.className="v-warn";vb.textContent="&#9888; Verify with source";}
+  else{vb.textContent="";}
+  document.getElementById("answer-wrap").scrollIntoView({behavior:"smooth",block:"start"});
 }
+/* ── COPY ── */
+async function copyAns(){
+  const text=document.getElementById("answer-text").textContent;
+  try{
+    await navigator.clipboard.writeText(text);
+    const btn=document.getElementById("copy-btn");
+    btn.innerHTML="&#10003;&ensp;Copied!";
+    setTimeout(()=>{btn.innerHTML="&#128203;&ensp;Copy";},2000);
+  }catch(e){}
 }
+/* ── MSG HELPER ── */
+function showMsg(id,type,msg){
   const el=document.getElementById(id);
+  if(type==="ok")el.innerHTML="<div class='msg msg-ok'>"+msg+"</div>";
+  else if(type==="error")el.innerHTML="<div class='msg msg-err'>"+esc(msg)+"</div>";
+  else el.innerHTML="<div class='msg-info'>"+esc(msg)+"</div>";
 }
 </script>
 </body>

write_html.py ADDED Viewed

	@@ -0,0 +1,528 @@

+import pathlib
+HTML = '''\
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>DocMind — AI Document Research</title>
+<style>
+:root{
+  --bg:#0d0f1a;--surface:#13161f;--card:#181c27;--card2:#1e2230;
+  --border:#252836;--border2:#2e3244;
+  --text:#e8eaf2;--sub:#b0b8cc;--muted:#7880a0;
+  --accent:#5b8ff9;--accent2:#3a6ee8;
+  --green:#22d47a;--red:#f05c5c;--teal:#29c6d4;--gold:#f5a623;--purple:#a78bfa;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+     background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
+/* ── ANIMATIONS ────────────────────────────────── */
+@keyframes spin{to{transform:rotate(360deg)}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
+@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
+/* ── HEADER ────────────────────────────────────── */
+header{
+  background:var(--surface);
+  border-bottom:1px solid var(--border);
+  padding:0 28px;height:56px;
+  display:flex;align-items:center;gap:14px;
+  position:sticky;top:0;z-index:100;
+}
+.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
+.logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--purple));
+           border-radius:8px;display:flex;align-items:center;justify-content:center;
+           font-size:15px;flex-shrink:0}
+.logo-text{font-size:1rem;font-weight:800;color:var(--text);letter-spacing:-.3px}
+.logo-text span{color:var(--accent)}
+.logo-sub{font-size:.68rem;color:var(--muted);margin-left:2px;font-weight:400;
+          display:none} /* shown on wider screens */
+.hdr-badges{display:flex;gap:8px;align-items:center;margin-left:4px}
+.badge{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
+.badge-model{background:rgba(91,143,249,.12);border:1px solid rgba(91,143,249,.25);color:var(--accent)}
+.badge-src{background:rgba(113,128,160,.1);border:1px solid var(--border);color:var(--muted);
+           max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.badge-src.loaded{background:rgba(34,212,122,.1);border-color:rgba(34,212,122,.3);color:var(--green)}
+#hdr-src{margin-left:auto}
+/* ── LAYOUT ─────────────────────────────────────── */
+main{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 56px);overflow:hidden}
+.panel{padding:24px 22px;overflow-y:auto;height:100%}
+.panel-left{border-right:1px solid var(--border);background:var(--surface)}
+.panel-right{background:var(--bg)}
+/* ── SECTION HEADERS ────────────────────────────── */
+.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
+.sec-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;
+          justify-content:center;font-size:13px;flex-shrink:0}
+.sec-icon-blue{background:rgba(91,143,249,.15)}
+.sec-icon-purple{background:rgba(167,139,250,.15)}
+.sec-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
+/* ── TABS ────────────────────────────────────────── */
+.tabs{display:flex;gap:2px;background:rgba(255,255,255,.03);border-radius:9px;
+      padding:3px;margin-bottom:18px;border:1px solid var(--border)}
+.tab-btn{flex:1;background:none;border:none;color:var(--muted);font-size:.78rem;
+         font-weight:600;padding:7px 10px;border-radius:7px;cursor:pointer;
+         transition:all .18s;font-family:inherit;display:flex;align-items:center;
+         justify-content:center;gap:5px}
+.tab-btn.active{background:var(--card2);color:var(--text);
+                box-shadow:0 1px 6px rgba(0,0,0,.35)}
+/* ── DROPZONE ────────────────────────────────────── */
+.dropzone{
+  border:2px dashed var(--border2);border-radius:12px;padding:28px 16px;
+  text-align:center;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;
+}
+.dropzone::before{
+  content:"";position:absolute;inset:0;
+  background:linear-gradient(90deg,transparent 0%,rgba(91,143,249,.04) 50%,transparent 100%);
+  background-size:200% 100%;opacity:0;transition:opacity .3s;
+}
+.dropzone:hover{border-color:var(--accent);background:rgba(91,143,249,.04)}
+.dropzone:hover::before{opacity:1;animation:shimmer 2s infinite}
+.dropzone.drag-over{border-color:var(--accent);background:rgba(91,143,249,.08);transform:scale(1.01)}
+.dz-icon{font-size:2.2rem;margin-bottom:10px;display:block}
+.dz-label{font-size:.84rem;color:var(--sub);line-height:1.5}
+.dz-label strong{color:var(--accent)}
+.dz-hint{font-size:.72rem;color:var(--muted);margin-top:5px}
+/* ── URL INPUT ────────────────────────────────────── */
+.url-row{display:flex;gap:8px;margin-bottom:10px}
+.url-row input{flex:1;background:var(--card);border:1px solid var(--border2);
+               border-radius:8px;padding:9px 12px;color:var(--text);font-size:.84rem;
+               font-family:inherit;outline:none;transition:border-color .18s}
+.url-row input:focus{border-color:var(--accent)}
+/* ── SOURCE LOADED CARD ──────────────────────────── */
+#source-card{
+  display:none;margin-top:16px;background:var(--card);
+  border:1px solid rgba(34,212,122,.2);border-radius:10px;padding:13px 14px;
+  animation:fadeUp .25s ease;
+}
+.sc-row{display:flex;align-items:flex-start;gap:10px}
+.sc-icon{width:34px;height:34px;background:rgba(34,212,122,.12);border-radius:8px;
+         flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
+.sc-info{flex:1;min-width:0}
+.sc-name{font-size:.82rem;font-weight:600;color:var(--text);
+         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
+.sc-meta{font-size:.72rem;color:var(--teal)}
+.sc-ready{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
+          font-size:.7rem;font-weight:700;color:var(--green);
+          background:rgba(34,212,122,.08);border:1px solid rgba(34,212,122,.18);
+          border-radius:5px;padding:3px 8px}
+/* ── MESSAGES ────────────────────────────────────── */
+.msg{border-radius:8px;padding:10px 13px;font-size:.79rem;
+     margin-top:10px;line-height:1.55;animation:fadeUp .2s ease}
+.msg-ok{background:rgba(34,212,122,.07);border:1px solid rgba(34,212,122,.2);color:var(--green)}
+.msg-err{background:rgba(240,92,92,.07);border:1px solid rgba(240,92,92,.2);color:var(--red)}
+.msg-info{color:var(--muted);font-size:.76rem;margin-top:8px}
+/* ── BUTTONS ─────────────────────────────────────── */
+.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;
+     border-radius:8px;border:none;font-size:.84rem;font-weight:600;
+     cursor:pointer;transition:all .18s;font-family:inherit}
+.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));
+             color:#fff;box-shadow:0 2px 8px rgba(91,143,249,.25)}
+.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,143,249,.35)}
+.btn-primary:active{transform:none}
+.btn-primary:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
+.btn-sm{padding:7px 14px;font-size:.78rem}
+.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--border2);
+           color:var(--sub);font-size:.74rem;padding:5px 12px;border-radius:6px}
+.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}
+.spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);
+         border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0}
+/* ── QUESTION AREA ───────────────────────────────── */
+.q-card{background:var(--card);border:1px solid var(--border2);
+        border-radius:11px;padding:16px;margin-bottom:16px}
+.q-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;
+         letter-spacing:.06em;margin-bottom:8px}
+textarea{width:100%;background:transparent;border:none;color:var(--text);
+         font-size:.9rem;font-family:inherit;outline:none;resize:none;
+         line-height:1.6;min-height:72px}
+textarea::placeholder{color:var(--muted)}
+.q-footer{display:flex;align-items:center;gap:10px;padding-top:12px;
+          border-top:1px solid var(--border)}
+#q-err{font-size:.77rem;color:var(--red)}
+/* ── PIPELINE ────────────────────────────────────── */
+#pipeline{display:none;margin-bottom:14px;animation:fadeUp .2s ease}
+.pipe-row{display:flex;align-items:center;gap:0;background:var(--card);
+          border:1px solid var(--border2);border-radius:10px;padding:10px 14px;
+          overflow-x:auto}
+.pipe-step{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;
+           color:var(--muted);white-space:nowrap;padding:4px 8px;border-radius:6px;
+           transition:all .2s}
+.pipe-step.active{color:var(--accent);background:rgba(91,143,249,.12)}
+.pipe-step.done{color:var(--green)}
+.pipe-step .step-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
+.pipe-step.active .step-dot{animation:pulse .9s ease infinite}
+.pipe-arrow{color:var(--border2);font-size:.8rem;padding:0 2px;flex-shrink:0}
+/* ── TRACE LOG ───────────────────────────────────── */
+#trace-wrap{display:none;margin-bottom:16px;animation:fadeUp .2s ease}
+.trace-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.trace-title{font-size:.7rem;font-weight:700;text-transform:uppercase;
+             letter-spacing:.07em;color:var(--muted)}
+.trace-box{background:var(--card);border:1px solid var(--border2);border-radius:10px;
+           padding:4px 0;max-height:220px;overflow-y:auto}
+.t-step{display:flex;align-items:flex-start;gap:10px;padding:8px 14px;
+        border-bottom:1px solid var(--border);animation:fadeUp .18s ease;transition:background .15s}
+.t-step:last-child{border-bottom:none}
+.t-step:hover{background:rgba(255,255,255,.02)}
+.t-icon{font-size:13px;flex-shrink:0;margin-top:1px;width:18px;text-align:center}
+.t-agent{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
+         padding:2px 7px;border-radius:4px;flex-shrink:0;white-space:nowrap}
+.a-planner  {background:rgba(91,143,249,.14);color:var(--accent)}
+.a-retriever{background:rgba(41,198,212,.14);color:var(--teal)}
+.a-grader   {background:rgba(245,166,35,.14);color:var(--gold)}
+.a-generator{background:rgba(34,212,122,.14);color:var(--green)}
+.a-critic   {background:rgba(167,139,250,.14);color:var(--purple)}
+.a-error    {background:rgba(240,92,92,.14);color:var(--red)}
+.t-msg{flex:1;font-size:.78rem;color:var(--sub);line-height:1.5}
+.t-lat{font-size:.65rem;color:rgba(128,136,160,.5);flex-shrink:0;margin-top:2px}
+/* ── ANSWER CARD ─────────────────────────────────── */
+#answer-wrap{display:none;background:var(--card);border:1px solid var(--border2);
+             border-radius:12px;overflow:hidden;animation:fadeUp .3s ease}
+.ans-header{display:flex;align-items:center;justify-content:space-between;
+            padding:13px 18px 12px;border-bottom:1px solid var(--border);
+            background:rgba(255,255,255,.02)}
+.ans-title{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;
+           text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
+.ans-title-icon{width:22px;height:22px;background:rgba(34,212,122,.15);border-radius:6px;
+                display:flex;align-items:center;justify-content:center;font-size:11px}
+.ans-actions{display:flex;align-items:center;gap:8px}
+#verdict-badge{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:20px}
+.v-ok  {background:rgba(34,212,122,.1);border:1px solid rgba(34,212,122,.25);color:var(--green)}
+.v-warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);color:var(--gold)}
+.ans-body{padding:18px}
+#answer-text{font-size:.9rem;line-height:1.78;color:var(--text);
+             white-space:pre-wrap;word-break:break-word}
+/* ── RESPONSIVE ──────────────────────────────────── */
+@media(min-width:1100px){.logo-sub{display:block}}
+@media(max-width:768px){
+  main{grid-template-columns:1fr;height:auto;overflow:visible}
+  .panel{height:auto}
+  .panel-left{border-right:none;border-bottom:1px solid var(--border)}
+}
+</style>
+</head>
+<body>
+<!-- ── HEADER ── -->
+<header>
+  <a class="logo" href="#">
+    <div class="logo-icon">&#129504;</div>
+    <span class="logo-text">Doc<span>Mind</span></span>
+  </a>
+  <span class="logo-sub">AI Document Research</span>
+  <div class="hdr-badges">
+    <span class="badge badge-model">Qwen 2.5 7B</span>
+  </div>
+  <span class="badge badge-src" id="hdr-src">No source loaded</span>
+</header>
+<main>
+<!-- ── LEFT PANEL: KNOWLEDGE BASE ── -->
+<div class="panel panel-left">
+  <div class="sec-head">
+    <div class="sec-icon sec-icon-blue">&#128218;</div>
+    <span class="sec-title">Knowledge Base</span>
+  </div>
+  <div class="tabs">
+    <button class="tab-btn active" onclick="switchTab(this,'pdf')">&#128196;&ensp;Upload PDF</button>
+    <button class="tab-btn" onclick="switchTab(this,'url')">&#127760;&ensp;Paste URL</button>
+  </div>
+  <!-- PDF TAB -->
+  <div id="tab-pdf">
+    <div class="dropzone" id="dz"
+         onclick="document.getElementById('fi').click()"
+         ondragover="dg(event,true)" ondragleave="dg(event,false)" ondrop="dp(event)">
+      <span class="dz-icon">&#128196;</span>
+      <div class="dz-label"><strong>Click to browse</strong> or drag &amp; drop</div>
+      <div class="dz-hint">PDF only &middot; max 10 MB</div>
+    </div>
+    <input type="file" id="fi" accept=".pdf" style="display:none" onchange="fc(event)"/>
+    <div id="pdf-msg"></div>
+  </div>
+  <!-- URL TAB -->
+  <div id="tab-url" style="display:none">
+    <div class="url-row">
+      <input type="url" id="url-inp" placeholder="https://en.wikipedia.org/wiki/..."
+             onkeydown="if(event.key==='Enter')fetchURL()"/>
+      <button class="btn btn-primary btn-sm" id="url-btn" onclick="fetchURL()">Fetch</button>
+    </div>
+    <div class="msg-info" style="margin-bottom:4px">Wikipedia, government sites, and docs work best. Some sites block automated access.</div>
+    <div id="url-msg"></div>
+  </div>
+  <!-- SOURCE LOADED -->
+  <div id="source-card">
+    <div class="sc-row">
+      <div class="sc-icon" id="sc-icon">&#128196;</div>
+      <div class="sc-info">
+        <div class="sc-name" id="source-name"></div>
+        <div class="sc-meta" id="source-chunks"></div>
+      </div>
+    </div>
+    <div class="sc-ready">&#10003;&ensp;Ready for questions</div>
+  </div>
+</div>
+<!-- ── RIGHT PANEL: RESEARCH ── -->
+<div class="panel panel-right">
+  <div class="sec-head">
+    <div class="sec-icon sec-icon-purple">&#128269;</div>
+    <span class="sec-title">Research Query</span>
+  </div>
+  <div class="q-card">
+    <div class="q-label">Your Question</div>
+    <textarea id="q-inp" rows="3"
+      placeholder="Ask anything about the loaded document or URL&#10;Press Enter to submit, Shift+Enter for new line"
+      onkeydown="qk(event)"></textarea>
+    <div class="q-footer">
+      <button class="btn btn-primary" id="ask-btn" onclick="ask()">&#9889;&ensp;Ask</button>
+      <span id="q-err"></span>
+    </div>
+  </div>
+  <!-- AGENT PIPELINE -->
+  <div id="pipeline">
+    <div class="pipe-row">
+      <div class="pipe-step" id="ps-planner"><span class="step-dot"></span>&#129518;&ensp;Planner</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-retriever"><span class="step-dot"></span>&#128269;&ensp;Retriever</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-grader"><span class="step-dot"></span>&#9878;&ensp;Grader</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-generator"><span class="step-dot"></span>&#9997;&ensp;Generator</div>
+      <div class="pipe-arrow">&#8594;</div>
+      <div class="pipe-step" id="ps-critic"><span class="step-dot"></span>&#128300;&ensp;Critic</div>
+    </div>
+  </div>
+  <!-- TRACE LOG -->
+  <div id="trace-wrap">
+    <div class="trace-hdr">
+      <span class="trace-title">&#128240;&ensp;Agent Trace</span>
+    </div>
+    <div class="trace-box" id="trace-log"></div>
+  </div>
+  <!-- ANSWER -->
+  <div id="answer-wrap">
+    <div class="ans-header">
+      <div class="ans-title">
+        <div class="ans-title-icon">&#128161;</div>
+        Answer
+      </div>
+      <div class="ans-actions">
+        <span id="verdict-badge"></span>
+        <button class="btn btn-ghost" id="copy-btn" onclick="copyAns()">&#128203;&ensp;Copy</button>
+      </div>
+    </div>
+    <div class="ans-body">
+      <div id="answer-text"></div>
+    </div>
+  </div>
+</div>
+</main>
+<script>
+let pollTimer=null,seen=0;
+const esc=s=>String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+const AGENT_ICONS={planner:"&#129518;",retriever:"&#128269;",grader:"&#9878;",generator:"&#9997;",critic:"&#128300;"};
+/* ── TABS ── */
+function switchTab(btn,name){
+  document.querySelectorAll(".tab-btn").forEach(b=>b.classList.remove("active"));
+  btn.classList.add("active");
+  document.getElementById("tab-pdf").style.display=name==="pdf"?"":"none";
+  document.getElementById("tab-url").style.display=name==="url"?"":"none";
+}
+/* ── DRAG & DROP ── */
+function dg(e,over){e.preventDefault();document.getElementById("dz").classList[over?"add":"remove"]("drag-over");}
+function dp(e){e.preventDefault();document.getElementById("dz").classList.remove("drag-over");const f=e.dataTransfer.files[0];if(f)up(f);}
+function fc(e){if(e.target.files[0])up(e.target.files[0]);}
+/* ── UPLOAD PDF ── */
+async function up(file){
+  if(!file.name.toLowerCase().endsWith(".pdf")){showMsg("pdf-msg","error","Only PDF files are supported.");return;}
+  showMsg("pdf-msg","info","Uploading "+file.name+"...");
+  const fd=new FormData();fd.append("file",file);
+  try{
+    const r=await fetch("/api/upload",{method:"POST",body:fd});
+    const d=await r.json();
+    if(d.error){showMsg("pdf-msg","error",d.error);return;}
+    setSource(d.filename,d.chunks,"pdf");
+    showMsg("pdf-msg","ok","&#10003;&ensp;"+d.chunks+" chunks indexed from "+d.filename);
+  }catch(e){showMsg("pdf-msg","error","Upload failed: "+e.message);}
+}
+/* ── FETCH URL ── */
+async function fetchURL(){
+  const url=document.getElementById("url-inp").value.trim();
+  if(!url){showMsg("url-msg","error","Please enter a URL.");return;}
+  const btn=document.getElementById("url-btn");
+  btn.disabled=true;btn.textContent="Fetching...";
+  showMsg("url-msg","info","Fetching and indexing page...");
+  try{
+    const r=await fetch("/api/ingest_url",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url})});
+    const d=await r.json();
+    if(d.error){showMsg("url-msg","error",d.error);return;}
+    setSource(d.url,d.chunks,"url");
+    showMsg("url-msg","ok","&#10003;&ensp;"+d.chunks+" chunks indexed");
+  }catch(e){showMsg("url-msg","error","Failed: "+e.message);}
+  finally{btn.disabled=false;btn.textContent="Fetch";}
+}
+/* ── SOURCE LOADED ── */
+function setSource(name,chunks,type){
+  document.getElementById("source-name").textContent=name;
+  document.getElementById("source-chunks").textContent=chunks+" chunks indexed";
+  document.getElementById("sc-icon").textContent=type==="pdf"?"&#128196;":"&#127760;";
+  document.getElementById("source-card").style.display="block";
+  const p=document.getElementById("hdr-src");
+  p.textContent=name.length>30?name.slice(0,30)+"...":name;
+  p.classList.add("loaded");
+}
+/* ── PIPELINE ── */
+const PIPE_AGENTS=["planner","retriever","grader","generator","critic"];
+function resetPipeline(){PIPE_AGENTS.forEach(a=>{const el=document.getElementById("ps-"+a);if(el){el.classList.remove("active","done");}});}
+function setAgent(name,done){
+  const el=document.getElementById("ps-"+name);
+  if(!el)return;
+  if(done){el.classList.remove("active");el.classList.add("done");}
+  else{el.classList.remove("done");el.classList.add("active");}
+}
+/* ── ASK ── */
+function qk(e){if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();ask();}}
+async function ask(){
+  const q=document.getElementById("q-inp").value.trim();
+  document.getElementById("q-err").textContent="";
+  if(!q){document.getElementById("q-err").textContent="Please enter a question.";return;}
+  const btn=document.getElementById("ask-btn");
+  btn.disabled=true;
+  btn.innerHTML="<span class='spinner'></span>&ensp;Thinking...";
+  document.getElementById("pipeline").style.display="block";
+  document.getElementById("trace-wrap").style.display="block";
+  document.getElementById("trace-log").innerHTML="<div class='t-step'><span class='t-msg' style='color:var(--muted);font-style:italic'>Initialising agents...</span></div>";
+  document.getElementById("answer-wrap").style.display="none";
+  resetPipeline();
+  seen=0;clearInterval(pollTimer);
+  try{
+    const r=await fetch("/api/research",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:q})});
+    const d=await r.json();
+    if(d.error){traceErr(d.error);resetAskBtn();return;}
+    pollTimer=setInterval(()=>poll(d.query_id),1500);
+  }catch(e){traceErr("Network error: "+e.message);resetAskBtn();}
+}
+function resetAskBtn(){
+  const btn=document.getElementById("ask-btn");
+  btn.disabled=false;
+  btn.innerHTML="&#9889;&ensp;Ask";
+}
+/* ── POLL ── */
+async function poll(qid){
+  try{
+    const r=await fetch("/api/trace/"+qid);
+    if(!r.ok){traceErr("Server error "+r.status);clearInterval(pollTimer);resetAskBtn();return;}
+    const d=await r.json();
+    renderTrace(d.trace||[]);
+    if(["complete","error"].includes(d.status)){
+      clearInterval(pollTimer);
+      resetAskBtn();
+      if(d.status==="complete"&&d.result)renderAnswer(d.result);
+      else if(d.status==="error"&&d.result)traceErr(d.result.error||"An error occurred.");
+    }
+  }catch(e){traceErr("Poll error: "+e.message);clearInterval(pollTimer);resetAskBtn();}
+}
+/* ── TRACE ── */
+function renderTrace(steps){
+  if(!steps.length)return;
+  const log=document.getElementById("trace-log");
+  if(seen===0)log.innerHTML="";
+  for(let i=seen;i<steps.length;i++){
+    const s=steps[i];
+    const icon=AGENT_ICONS[s.agent]||"&#9679;";
+    const lat=s.latency_ms>0?"<span class='t-lat'>"+s.latency_ms+"ms</span>":"";
+    const cls="a-"+(["planner","retriever","grader","generator","critic"].includes(s.agent)?s.agent:"error");
+    log.innerHTML+="<div class='t-step'>"
+      +"<span class='t-icon'>"+icon+"</span>"
+      +"<span class='t-agent "+cls+"'>"+s.agent+"</span>"
+      +"<span class='t-msg'>"+esc(s.message)+"</span>"
+      +lat+"</div>";
+    if(s.status==="running")setAgent(s.agent,false);
+    else if(s.status==="complete")setAgent(s.agent,true);
+  }
+  seen=steps.length;
+  log.scrollTop=log.scrollHeight;
+}
+function traceErr(msg){
+  const log=document.getElementById("trace-log");
+  log.innerHTML+="<div class='t-step'><span class='t-icon'>&#10060;</span><span class='t-agent a-error'>error</span><span class='t-msg' style='color:var(--red)'>"+esc(msg)+"</span></div>";
+  log.scrollTop=log.scrollHeight;
+}
+/* ── ANSWER ── */
+function renderAnswer(result){
+  document.getElementById("answer-wrap").style.display="block";
+  document.getElementById("answer-text").textContent=result.generation||"No answer generated.";
+  const vb=document.getElementById("verdict-badge");
+  if(result.verdict==="APPROVED"){vb.className="v-ok";vb.textContent="&#10003; High confidence";}
+  else if(result.verdict){vb.className="v-warn";vb.textContent="&#9888; Verify with source";}
+  else{vb.textContent="";}
+  document.getElementById("answer-wrap").scrollIntoView({behavior:"smooth",block:"start"});
+}
+/* ── COPY ── */
+async function copyAns(){
+  const text=document.getElementById("answer-text").textContent;
+  try{
+    await navigator.clipboard.writeText(text);
+    const btn=document.getElementById("copy-btn");
+    btn.innerHTML="&#10003;&ensp;Copied!";
+    setTimeout(()=>{btn.innerHTML="&#128203;&ensp;Copy";},2000);
+  }catch(e){}
+}
+/* ── MSG HELPER ── */
+function showMsg(id,type,msg){
+  const el=document.getElementById(id);
+  if(type==="ok")el.innerHTML="<div class='msg msg-ok'>"+msg+"</div>";
+  else if(type==="error")el.innerHTML="<div class='msg msg-err'>"+esc(msg)+"</div>";
+  else el.innerHTML="<div class='msg-info'>"+esc(msg)+"</div>";
+}
+</script>
+</body>
+</html>
+'''
+pathlib.Path('E:/HuggingFace/docmind/templates/index.html').write_text(HTML, encoding='utf-8')
+print('Done, size:', len(HTML))