Spaces:

shreyask
/

qmd-web

Running

App Files Files Community

shreyask Claude Opus 4.6 commited on Mar 12

Commit

6c0127c

verified ·

1 Parent(s): 0ecf8a9

feat: manual generation for no-KV-cache model, fix blend scoring, add coffee doc

Browse files

- Switch expansion from TextGenerationPipeline to manual autoregressive
generation (model was exported without KV cache tensors)
- Add proper nucleus sampling (temp=0.7, top-k=20, top-p=0.8) matching
Qwen3 recommended settings — greedy decoding caused degeneration
- Fix blend scoring: replace position-aware weights with uniform 80/20
RRF/reranker to prevent irrelevant docs leapfrogging from reranker noise
- Add history-of-coffee.md as a fun non-tech sample document
- UI component updates and refinements

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

Files changed (16) hide show

index.html +76 -0
public/eval-docs/history-of-coffee.md +21 -0
src/App.tsx +62 -4
src/components/DocumentManager.tsx +31 -27
src/components/ExpansionColumn.tsx +16 -13
src/components/FusionColumn.tsx +24 -21
src/components/ModelStatus.tsx +22 -11
src/components/PipelineView.tsx +112 -25
src/components/QueryInput.tsx +10 -10
src/components/ResultCard.tsx +10 -10
src/components/SearchColumn.tsx +21 -18
src/constants.ts +0 -4
src/pipeline/blend.test.ts +30 -88
src/pipeline/blend.ts +12 -20
src/pipeline/expansion.ts +142 -32
src/pipeline/models.ts +34 -15

index.html CHANGED Viewed

@@ -5,6 +5,82 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QMD Web Demo — In-Browser Hybrid Search</title>
   </head>
   <body>
     <div id="root"></div>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QMD Web Demo — In-Browser Hybrid Search</title>
+    <style>
+      :root {
+        --bg: #ffffff;
+        --bg-page: #ffffff;
+        --bg-section: #f8f8f8;
+        --bg-card: #ffffff;
+        --bg-input: #ffffff;
+        --text: #1a1a1a;
+        --text-secondary: #666666;
+        --text-muted: #999999;
+        --border: #e0e0e0;
+        --border-light: #f0f0f0;
+        --shadow: rgba(0,0,0,0.07);
+        --col-query: #E8F0FE;
+        --col-expansion: #FFF8E1;
+        --col-search: #E0F2F1;
+        --col-fusion: #E8F5E9;
+        --input-border: #cccccc;
+        --indexing-bg: #FFF3E0;
+        --error-bg: #fce4ec;
+        --error-border: #ef9a9a;
+        --rerank-after-bg: #f1f8e9;
+        --rerank-after-border: #c8e6c9;
+        --example-bg: #f0f4ff;
+        --example-border: #c5d5ff;
+        --modal-bg: rgba(0,0,0,0.4);
+        --score-good-bg: #e8f5e9;
+        --score-mid-bg: #fff8e1;
+        --score-bad-bg: #eceff1;
+      }
+      [data-theme="dark"] {
+        --bg: #1a1a2e;
+        --bg-page: #1a1a2e;
+        --bg-section: #16213e;
+        --bg-card: #0f3460;
+        --bg-input: #16213e;
+        --text: #e0e0e0;
+        --text-secondary: #a0a0b0;
+        --text-muted: #707080;
+        --border: #2a2a4a;
+        --border-light: #252545;
+        --shadow: rgba(0,0,0,0.3);
+        --col-query: #1a2744;
+        --col-expansion: #2a2518;
+        --col-search: #1a2e2b;
+        --col-fusion: #1a2e1e;
+        --input-border: #3a3a5a;
+        --indexing-bg: #2a2518;
+        --error-bg: #2e1520;
+        --error-border: #5a2030;
+        --rerank-after-bg: #1a2e1e;
+        --rerank-after-border: #2a4a2e;
+        --example-bg: #1a2040;
+        --example-border: #2a3060;
+        --modal-bg: rgba(0,0,0,0.7);
+        --score-good-bg: #1a2e1e;
+        --score-mid-bg: #2a2518;
+        --score-bad-bg: #1e2030;
+      }
+      body {
+        margin: 0;
+        background: var(--bg-page);
+        color: var(--text);
+        transition: background 0.3s, color 0.3s;
+      }
+      *, *::before, *::after { box-sizing: border-box; }
+    </style>
+    <script>
+      // Restore theme preference
+      (function() {
+        var t = localStorage.getItem('qmd-theme');
+        if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

public/eval-docs/history-of-coffee.md ADDED Viewed

	@@ -0,0 +1,21 @@

+# The History of Coffee
+## Origins in Ethiopia
+Coffee's story begins in the highlands of Ethiopia around the 9th century. Legend tells of a goat herder named Kaldi who noticed his goats became unusually energetic after eating berries from a certain tree. Curious, he tried the berries himself and experienced a similar burst of alertness.
+## Spread Through the Arab World
+By the 15th century, coffee was being cultivated in Yemen. Sufi monks brewed it to stay awake during long nights of prayer. Coffeehouses, called *qahveh khaneh*, sprang up across the Middle East and became vibrant centers of conversation, music, and chess.
+## Arrival in Europe
+Coffee reached Europe in the 17th century and was initially met with suspicion — some called it the "bitter invention of Satan." Pope Clement VIII reportedly tried it, enjoyed it, and gave it papal approval. Coffeehouses soon became hubs of intellectual life in London, Paris, and Vienna.
+## The Modern Coffee Industry
+Today coffee is the world's second most traded commodity after oil. Over 2.25 billion cups are consumed daily across the globe. Brazil remains the largest producer, followed by Vietnam, Colombia, and Ethiopia — where the story began over a thousand years ago.
+## How Coffee Is Made
+The journey from plant to cup involves harvesting ripe cherries, extracting the beans through wet or dry processing, roasting at temperatures between 180-230°C to develop flavor compounds, and finally grinding and brewing. Each step profoundly affects the taste in the cup.

src/App.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ const SAMPLE_DOCS = [
   'api-design-principles.md',
   'distributed-systems-overview.md',
   'machine-learning-primer.md',
 ];
 const INITIAL_PIPELINE: PipelineState = {
@@ -131,19 +132,76 @@ function App() {
   const allReady = isAllModelsReady() && embeddedChunks.length > 0 && !indexing;
   return (
     <div style={{ fontFamily: 'system-ui, -apple-system, sans-serif', maxWidth: 1400, margin: '0 auto', padding: '1rem' }}>
       <header style={{ marginBottom: '1.5rem' }}>
-        <h1 style={{ margin: 0, fontSize: '1.5rem' }}>QMD Web Demo</h1>
-        <p style={{ margin: '0.25rem 0 0', color: '#666', fontSize: '0.9rem' }}>
-          In-Browser Hybrid Search Pipeline — WebGPU + Transformers.js
         </p>
       </header>
       <ModelStatus models={models} />
       {indexing && (
-        <div style={{ padding: '0.5rem 1rem', background: '#FFF3E0', borderRadius: 6, marginBottom: '1rem', fontSize: '0.85rem' }}>
           Indexing documents (embedding chunks)...
         </div>
       )}

   'api-design-principles.md',
   'distributed-systems-overview.md',
   'machine-learning-primer.md',
+  'history-of-coffee.md',
 ];
 const INITIAL_PIPELINE: PipelineState = {
   const allReady = isAllModelsReady() && embeddedChunks.length > 0 && !indexing;
+  const [dark, setDark] = useState(() =>
+    document.documentElement.getAttribute('data-theme') === 'dark'
+  );
+  const toggleTheme = useCallback(() => {
+    setDark(prev => {
+      const next = !prev;
+      document.documentElement.setAttribute('data-theme', next ? 'dark' : 'light');
+      localStorage.setItem('qmd-theme', next ? 'dark' : 'light');
+      return next;
+    });
+  }, []);
   return (
     <div style={{ fontFamily: 'system-ui, -apple-system, sans-serif', maxWidth: 1400, margin: '0 auto', padding: '1rem' }}>
       <header style={{ marginBottom: '1.5rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <h1 style={{ margin: 0, fontSize: '1.5rem', color: 'var(--text)' }}>QMD Web Demo</h1>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <a
+              href="https://github.com/tobi/qmd"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                fontSize: '0.78rem',
+                color: 'var(--text-secondary)',
+                textDecoration: 'none',
+                padding: '0.3rem 0.6rem',
+                border: '1px solid var(--border)',
+                borderRadius: '5px',
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+              }}
+              onMouseEnter={e => { (e.currentTarget as HTMLAnchorElement).style.color = '#4285F4'; }}
+              onMouseLeave={e => { (e.currentTarget as HTMLAnchorElement).style.color = 'var(--text-secondary)'; }}
+            >
+              GitHub
+            </a>
+            <button
+              onClick={toggleTheme}
+              title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+              style={{
+                background: 'none',
+                border: '1px solid var(--border)',
+                borderRadius: '5px',
+                padding: '0.3rem 0.55rem',
+                cursor: 'pointer',
+                fontSize: '1rem',
+                lineHeight: 1,
+                color: 'var(--text)',
+              }}
+            >
+              {dark ? '\u2600' : '\u263E'}
+            </button>
+          </div>
+        </div>
+        <p style={{ margin: '0.25rem 0 0', color: 'var(--text-secondary)', fontSize: '0.85rem', lineHeight: 1.5 }}>
+          In-browser hybrid search pipeline running entirely on WebGPU.
+          Three ONNX models (embedding, reranker, query expansion) power a full
+          search stack: query expansion, BM25 + vector search, RRF fusion, and cross-encoder reranking.
+          Built with{' '}
+          <a href="https://github.com/tobi/qmd" target="_blank" rel="noopener noreferrer" style={{ color: '#4285F4', textDecoration: 'none' }}>QMD</a>
+          {' '}and{' '}
+          <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noopener noreferrer" style={{ color: '#4285F4', textDecoration: 'none' }}>Transformers.js</a>.
         </p>
       </header>
       <ModelStatus models={models} />
       {indexing && (
+        <div style={{ padding: '0.5rem 1rem', background: 'var(--indexing-bg)', borderRadius: 6, marginBottom: '1rem', fontSize: '0.85rem', color: 'var(--text)' }}>
           Indexing documents (embedding chunks)...
         </div>
       )}

src/components/DocumentManager.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (t
     <div style={{
       position: 'fixed',
       inset: 0,
-      background: 'rgba(0,0,0,0.4)',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -30,20 +30,21 @@ function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (t
     onClick={e => { if (e.target === e.currentTarget) onClose(); }}
     >
       <div style={{
-        background: '#fff',
         borderRadius: '10px',
         padding: '1.5rem',
         width: '90%',
         maxWidth: '560px',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}>
-        <h3 style={{ margin: '0 0 1rem 0', fontSize: '1rem', color: '#1a1a1a' }}>
           Paste Document
         </h3>
         <div style={{ marginBottom: '0.75rem' }}>
-          <label style={{ fontSize: '0.8rem', color: '#555', display: 'block', marginBottom: '0.3rem' }}>
             Filename
           </label>
           <input
@@ -55,32 +56,36 @@ function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (t
               padding: '0.45rem 0.65rem',
               fontSize: '0.85rem',
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
-              border: '1px solid #ccc',
               borderRadius: '5px',
               boxSizing: 'border-box',
             }}
           />
         </div>
         <div style={{ marginBottom: '1rem' }}>
-          <label style={{ fontSize: '0.8rem', color: '#555', display: 'block', marginBottom: '0.3rem' }}>
             Content (Markdown or plain text)
           </label>
           <textarea
             value={text}
             onChange={e => setText(e.target.value)}
             rows={12}
-            placeholder="Paste your document content here…"
             style={{
               width: '100%',
               padding: '0.5rem 0.65rem',
               fontSize: '0.8rem',
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
-              border: '1px solid #ccc',
               borderRadius: '5px',
               resize: 'vertical',
               boxSizing: 'border-box',
               lineHeight: 1.5,
             }}
           />
         </div>
@@ -92,9 +97,9 @@ function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (t
               padding: '0.5rem 1rem',
               fontSize: '0.85rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
-              background: '#f5f5f5',
-              color: '#555',
-              border: '1px solid #ddd',
               borderRadius: '5px',
               cursor: 'pointer',
             }}
@@ -108,7 +113,7 @@ function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (t
               padding: '0.5rem 1rem',
               fontSize: '0.85rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
-              background: text.trim() ? '#4285F4' : '#ccc',
               color: '#fff',
               border: 'none',
               borderRadius: '5px',
@@ -133,15 +138,14 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
     if (files && files.length > 0) {
       onUpload(files);
     }
-    // Reset so the same file can be re-uploaded
     e.target.value = '';
   }
   return (
     <div style={{
       padding: '1rem',
-      background: '#f8f8f8',
-      border: '1px solid #e0e0e0',
       borderRadius: '8px',
       marginBottom: '1.5rem',
       fontFamily: 'system-ui, -apple-system, sans-serif',
@@ -156,7 +160,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
           margin: 0,
           fontSize: '0.85rem',
           fontWeight: 600,
-          color: '#444',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
@@ -165,7 +169,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
             marginLeft: '0.5rem',
             fontSize: '0.75rem',
             fontWeight: 400,
-            color: '#888',
           }}>
             ({documents.length})
           </span>
@@ -176,7 +180,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
             style={{
               padding: '0.3rem 0.7rem',
               fontSize: '0.78rem',
-              background: '#fff',
               color: '#4285F4',
               border: '1px solid #4285F4',
               borderRadius: '5px',
@@ -192,7 +196,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
             style={{
               padding: '0.3rem 0.7rem',
               fontSize: '0.78rem',
-              background: '#fff',
               color: '#34a853',
               border: '1px solid #34a853',
               borderRadius: '5px',
@@ -216,7 +220,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
       />
       {documents.length === 0 ? (
-        <p style={{ fontSize: '0.82rem', color: '#999', margin: 0 }}>
           No documents loaded. Upload .md or .txt files, or paste text.
         </p>
       ) : (
@@ -226,24 +230,24 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
               display: 'flex',
               alignItems: 'center',
               padding: '0.35rem 0.6rem',
-              background: '#fff',
-              border: '1px solid #e0e0e0',
               borderRadius: '5px',
               marginBottom: '0.3rem',
               gap: '0.5rem',
             }}>
               <span style={{
                 fontSize: '0.75rem',
-                color: '#ccc',
                 flexShrink: 0,
               }}>
-                ▪
               </span>
               <span style={{
                 flex: 1,
                 fontSize: '0.8rem',
                 fontWeight: 500,
-                color: '#333',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
@@ -253,7 +257,7 @@ export default function DocumentManager({ documents, onUpload, onPaste }: Docume
               <span style={{
                 fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
                 fontSize: '0.68rem',
-                color: '#aaa',
                 flexShrink: 0,
               }}>
                 {doc.filepath}

     <div style={{
       position: 'fixed',
       inset: 0,
+      background: 'var(--modal-bg)',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
     onClick={e => { if (e.target === e.currentTarget) onClose(); }}
     >
       <div style={{
+        background: 'var(--bg-card)',
         borderRadius: '10px',
         padding: '1.5rem',
         width: '90%',
         maxWidth: '560px',
+        boxShadow: '0 8px 32px var(--shadow)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
+        border: '1px solid var(--border)',
       }}>
+        <h3 style={{ margin: '0 0 1rem 0', fontSize: '1rem', color: 'var(--text)' }}>
           Paste Document
         </h3>
         <div style={{ marginBottom: '0.75rem' }}>
+          <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '0.3rem' }}>
             Filename
           </label>
           <input
               padding: '0.45rem 0.65rem',
               fontSize: '0.85rem',
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+              border: '1px solid var(--input-border)',
               borderRadius: '5px',
               boxSizing: 'border-box',
+              background: 'var(--bg-input)',
+              color: 'var(--text)',
             }}
           />
         </div>
         <div style={{ marginBottom: '1rem' }}>
+          <label style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '0.3rem' }}>
             Content (Markdown or plain text)
           </label>
           <textarea
             value={text}
             onChange={e => setText(e.target.value)}
             rows={12}
+            placeholder="Paste your document content here\u2026"
             style={{
               width: '100%',
               padding: '0.5rem 0.65rem',
               fontSize: '0.8rem',
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+              border: '1px solid var(--input-border)',
               borderRadius: '5px',
               resize: 'vertical',
               boxSizing: 'border-box',
               lineHeight: 1.5,
+              background: 'var(--bg-input)',
+              color: 'var(--text)',
             }}
           />
         </div>
               padding: '0.5rem 1rem',
               fontSize: '0.85rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
+              background: 'var(--bg-section)',
+              color: 'var(--text-secondary)',
+              border: '1px solid var(--border)',
               borderRadius: '5px',
               cursor: 'pointer',
             }}
               padding: '0.5rem 1rem',
               fontSize: '0.85rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
+              background: text.trim() ? '#4285F4' : 'var(--border)',
               color: '#fff',
               border: 'none',
               borderRadius: '5px',
     if (files && files.length > 0) {
       onUpload(files);
     }
     e.target.value = '';
   }
   return (
     <div style={{
       padding: '1rem',
+      background: 'var(--bg-section)',
+      border: '1px solid var(--border)',
       borderRadius: '8px',
       marginBottom: '1.5rem',
       fontFamily: 'system-ui, -apple-system, sans-serif',
           margin: 0,
           fontSize: '0.85rem',
           fontWeight: 600,
+          color: 'var(--text-secondary)',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
             marginLeft: '0.5rem',
             fontSize: '0.75rem',
             fontWeight: 400,
+            color: 'var(--text-muted)',
           }}>
             ({documents.length})
           </span>
             style={{
               padding: '0.3rem 0.7rem',
               fontSize: '0.78rem',
+              background: 'var(--bg-card)',
               color: '#4285F4',
               border: '1px solid #4285F4',
               borderRadius: '5px',
             style={{
               padding: '0.3rem 0.7rem',
               fontSize: '0.78rem',
+              background: 'var(--bg-card)',
               color: '#34a853',
               border: '1px solid #34a853',
               borderRadius: '5px',
       />
       {documents.length === 0 ? (
+        <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', margin: 0 }}>
           No documents loaded. Upload .md or .txt files, or paste text.
         </p>
       ) : (
               display: 'flex',
               alignItems: 'center',
               padding: '0.35rem 0.6rem',
+              background: 'var(--bg-card)',
+              border: '1px solid var(--border)',
               borderRadius: '5px',
               marginBottom: '0.3rem',
               gap: '0.5rem',
             }}>
               <span style={{
                 fontSize: '0.75rem',
+                color: 'var(--text-muted)',
                 flexShrink: 0,
               }}>
+                {'\u25AA'}
               </span>
               <span style={{
                 flex: 1,
                 fontSize: '0.8rem',
                 fontWeight: 500,
+                color: 'var(--text)',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
               <span style={{
                 fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
                 fontSize: '0.68rem',
+                color: 'var(--text-muted)',
                 flexShrink: 0,
               }}>
                 {doc.filepath}

src/components/ExpansionColumn.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import type { ExpandedQuery } from '../types';
 interface ExpansionColumnState {
   status: 'idle' | 'running' | 'done' | 'error';
@@ -8,6 +9,7 @@ interface ExpansionColumnState {
 interface ExpansionColumnProps {
   state: ExpansionColumnState;
 }
 function Spinner() {
@@ -16,7 +18,7 @@ function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
-      border: '2px solid #ddd',
       borderTopColor: '#f9a825',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
@@ -28,8 +30,8 @@ function ExpansionCard({ label, content }: { label: string; content: string | st
   const text = Array.isArray(content) ? content.join('\n') : content;
   return (
     <div style={{
-      background: '#fff',
-      border: '1px solid #e0e0e0',
       borderRadius: '6px',
       padding: '0.65rem 0.85rem',
       marginBottom: '0.5rem',
@@ -48,7 +50,7 @@ function ExpansionCard({ label, content }: { label: string; content: string | st
       <div style={{
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
         fontSize: '0.72rem',
-        color: '#333',
         lineHeight: 1.6,
         whiteSpace: 'pre-wrap',
         wordBreak: 'break-word',
@@ -59,7 +61,7 @@ function ExpansionCard({ label, content }: { label: string; content: string | st
   );
 }
-export default function ExpansionColumn({ state }: ExpansionColumnProps) {
   const isIdle = state.status === 'idle';
   const isRunning = state.status === 'running';
   const isDone = state.status === 'done';
@@ -70,7 +72,7 @@ export default function ExpansionColumn({ state }: ExpansionColumnProps) {
       <div style={{
         display: 'flex',
         alignItems: 'center',
-        gap: '0.5rem',
         marginBottom: '0.75rem',
       }}>
         <h3 style={{
@@ -78,12 +80,13 @@ export default function ExpansionColumn({ state }: ExpansionColumnProps) {
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
-          color: '#5d4037',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Query Expansion
         </h3>
         {isRunning && <Spinner />}
       </div>
@@ -91,10 +94,10 @@ export default function ExpansionColumn({ state }: ExpansionColumnProps) {
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
-          color: '#999',
           margin: 0,
         }}>
-          Awaiting query…
         </p>
       )}
@@ -102,19 +105,19 @@ export default function ExpansionColumn({ state }: ExpansionColumnProps) {
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
-          color: '#888',
           margin: 0,
           fontStyle: 'italic',
         }}>
-          Generating expanded queries…
         </p>
       )}
       {isError && (
         <div style={{
           padding: '0.65rem',
-          background: '#fce4ec',
-          border: '1px solid #ef9a9a',
           borderRadius: '6px',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',

 import type { ExpandedQuery } from '../types';
+import { InfoTooltip } from './PipelineView';
 interface ExpansionColumnState {
   status: 'idle' | 'running' | 'done' | 'error';
 interface ExpansionColumnProps {
   state: ExpansionColumnState;
+  info?: string;
 }
 function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
+      border: '2px solid var(--border)',
       borderTopColor: '#f9a825',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
   const text = Array.isArray(content) ? content.join('\n') : content;
   return (
     <div style={{
+      background: 'var(--bg-card)',
+      border: '1px solid var(--border)',
       borderRadius: '6px',
       padding: '0.65rem 0.85rem',
       marginBottom: '0.5rem',
       <div style={{
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
         fontSize: '0.72rem',
+        color: 'var(--text)',
         lineHeight: 1.6,
         whiteSpace: 'pre-wrap',
         wordBreak: 'break-word',
   );
 }
+export default function ExpansionColumn({ state, info }: ExpansionColumnProps) {
   const isIdle = state.status === 'idle';
   const isRunning = state.status === 'running';
   const isDone = state.status === 'done';
       <div style={{
         display: 'flex',
         alignItems: 'center',
+        gap: '0.4rem',
         marginBottom: '0.75rem',
       }}>
         <h3 style={{
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
+          color: '#f57f17',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Query Expansion
         </h3>
+        {info && <InfoTooltip text={info} />}
         {isRunning && <Spinner />}
       </div>
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
+          color: 'var(--text-muted)',
           margin: 0,
         }}>
+          Awaiting query...
         </p>
       )}
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
+          color: 'var(--text-secondary)',
           margin: 0,
           fontStyle: 'italic',
         }}>
+          Generating expanded queries...
         </p>
       )}
       {isError && (
         <div style={{
           padding: '0.65rem',
+          background: 'var(--error-bg)',
+          border: '1px solid var(--error-border)',
           borderRadius: '6px',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',

src/components/FusionColumn.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { RRFResult, RerankedResult, FinalResult } from '../types';
 import ResultCard from './ResultCard';
 interface FusionColumnState {
   rrf: { status: 'idle' | 'done'; data?: { merged: RRFResult[] } };
@@ -9,6 +10,7 @@ interface FusionColumnState {
 interface FusionColumnProps {
   state: FusionColumnState;
 }
 function Spinner() {
@@ -17,7 +19,7 @@ function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
-      border: '2px solid #ddd',
       borderTopColor: '#43a047',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
@@ -41,7 +43,7 @@ function SectionHeader({ label, color, badge }: { label: string; color: string;
     }}>
       {label}
       {badge && (
-        <span style={{ color: '#999', fontWeight: 400, fontSize: '0.68rem' }}>{badge}</span>
       )}
     </div>
   );
@@ -54,15 +56,15 @@ function RRFRow({ result, rank }: { result: RRFResult; rank: number }) {
       alignItems: 'center',
       gap: '0.5rem',
       padding: '0.35rem 0.55rem',
-      background: '#fff',
-      border: '1px solid #e0e0e0',
       borderRadius: '5px',
       marginBottom: '0.25rem',
       fontSize: '0.75rem',
     }}>
       <span style={{
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
-        color: '#aaa',
         fontSize: '0.68rem',
         minWidth: '18px',
       }}>
@@ -71,7 +73,7 @@ function RRFRow({ result, rank }: { result: RRFResult; rank: number }) {
       <span style={{
         flex: 1,
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        color: '#1a1a1a',
         fontWeight: 500,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -103,7 +105,7 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
           fontSize: '0.68rem',
           fontWeight: 600,
           fontFamily: 'system-ui, -apple-system, sans-serif',
-          color: '#888',
           marginBottom: '0.3rem',
           textAlign: 'center',
         }}>
@@ -112,8 +114,8 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
         {top5before.map((r, i) => (
           <div key={r.docId} style={{
             padding: '0.3rem 0.4rem',
-            background: '#fff',
-            border: '1px solid #e0e0e0',
             borderRadius: '4px',
             marginBottom: '0.2rem',
             fontSize: '0.68rem',
@@ -122,7 +124,7 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
           }}>
             <span style={{
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
-              color: '#bbb',
             }}>
               {i + 1}.
             </span>
@@ -131,7 +133,7 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
-              color: '#333',
             }}>
               {r.title}
             </span>
@@ -152,8 +154,8 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
         {top5after.map((r, i) => (
           <div key={r.docId} style={{
             padding: '0.3rem 0.4rem',
-            background: '#f1f8e9',
-            border: '1px solid #c8e6c9',
             borderRadius: '4px',
             marginBottom: '0.2rem',
             fontSize: '0.68rem',
@@ -183,7 +185,7 @@ function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after:
   );
 }
-export default function FusionColumn({ state }: FusionColumnProps) {
   const rrfDone = state.rrf.status === 'done';
   const rerankRunning = state.rerank.status === 'running';
   const rerankDone = state.rerank.status === 'done';
@@ -192,24 +194,25 @@ export default function FusionColumn({ state }: FusionColumnProps) {
   return (
     <div style={{ opacity: isIdle ? 0.45 : 1, transition: 'opacity 0.3s' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
         <h3 style={{
           margin: 0,
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
-          color: '#1b5e20',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Fusion & Reranking
         </h3>
         {rerankRunning && <Spinner />}
       </div>
       {isIdle && (
-        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: '#999', margin: 0 }}>
-          Awaiting search…
         </p>
       )}
@@ -225,7 +228,7 @@ export default function FusionColumn({ state }: FusionColumnProps) {
             <RRFRow key={r.docId} result={r} rank={i + 1} />
           ))}
           {state.rrf.data.merged.length > 5 && (
-            <div style={{ fontSize: '0.72rem', color: '#999', fontFamily: 'system-ui, -apple-system, sans-serif', paddingLeft: '0.25rem' }}>
               +{state.rrf.data.merged.length - 5} more
             </div>
           )}
@@ -234,8 +237,8 @@ export default function FusionColumn({ state }: FusionColumnProps) {
       {/* Rerank running */}
       {rerankRunning && !rerankDone && (
-        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: '#888', margin: '0 0 0.75rem 0', fontStyle: 'italic' }}>
-          Reranking with cross-encoder…
         </p>
       )}

 import type { RRFResult, RerankedResult, FinalResult } from '../types';
 import ResultCard from './ResultCard';
+import { InfoTooltip } from './PipelineView';
 interface FusionColumnState {
   rrf: { status: 'idle' | 'done'; data?: { merged: RRFResult[] } };
 interface FusionColumnProps {
   state: FusionColumnState;
+  info?: string;
 }
 function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
+      border: '2px solid var(--border)',
       borderTopColor: '#43a047',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
     }}>
       {label}
       {badge && (
+        <span style={{ color: 'var(--text-muted)', fontWeight: 400, fontSize: '0.68rem' }}>{badge}</span>
       )}
     </div>
   );
       alignItems: 'center',
       gap: '0.5rem',
       padding: '0.35rem 0.55rem',
+      background: 'var(--bg-card)',
+      border: '1px solid var(--border)',
       borderRadius: '5px',
       marginBottom: '0.25rem',
       fontSize: '0.75rem',
     }}>
       <span style={{
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+        color: 'var(--text-muted)',
         fontSize: '0.68rem',
         minWidth: '18px',
       }}>
       <span style={{
         flex: 1,
         fontFamily: 'system-ui, -apple-system, sans-serif',
+        color: 'var(--text)',
         fontWeight: 500,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
           fontSize: '0.68rem',
           fontWeight: 600,
           fontFamily: 'system-ui, -apple-system, sans-serif',
+          color: 'var(--text-secondary)',
           marginBottom: '0.3rem',
           textAlign: 'center',
         }}>
         {top5before.map((r, i) => (
           <div key={r.docId} style={{
             padding: '0.3rem 0.4rem',
+            background: 'var(--bg-card)',
+            border: '1px solid var(--border)',
             borderRadius: '4px',
             marginBottom: '0.2rem',
             fontSize: '0.68rem',
           }}>
             <span style={{
               fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+              color: 'var(--text-muted)',
             }}>
               {i + 1}.
             </span>
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
+              color: 'var(--text)',
             }}>
               {r.title}
             </span>
         {top5after.map((r, i) => (
           <div key={r.docId} style={{
             padding: '0.3rem 0.4rem',
+            background: 'var(--rerank-after-bg)',
+            border: '1px solid var(--rerank-after-border)',
             borderRadius: '4px',
             marginBottom: '0.2rem',
             fontSize: '0.68rem',
   );
 }
+export default function FusionColumn({ state, info }: FusionColumnProps) {
   const rrfDone = state.rrf.status === 'done';
   const rerankRunning = state.rerank.status === 'running';
   const rerankDone = state.rerank.status === 'done';
   return (
     <div style={{ opacity: isIdle ? 0.45 : 1, transition: 'opacity 0.3s' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.75rem' }}>
         <h3 style={{
           margin: 0,
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
+          color: '#388e3c',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Fusion & Reranking
         </h3>
+        {info && <InfoTooltip text={info} />}
         {rerankRunning && <Spinner />}
       </div>
       {isIdle && (
+        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: 'var(--text-muted)', margin: 0 }}>
+          Awaiting search...
         </p>
       )}
             <RRFRow key={r.docId} result={r} rank={i + 1} />
           ))}
           {state.rrf.data.merged.length > 5 && (
+            <div style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontFamily: 'system-ui, -apple-system, sans-serif', paddingLeft: '0.25rem' }}>
               +{state.rrf.data.merged.length - 5} more
             </div>
           )}
       {/* Rerank running */}
       {rerankRunning && !rerankDone && (
+        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: 'var(--text-secondary)', margin: '0 0 0.75rem 0', fontStyle: 'italic' }}>
+          Reranking with cross-encoder...
         </p>
       )}

src/components/ModelStatus.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ function ProgressBar({ progress, color }: { progress: number; color: string }) {
   return (
     <div style={{
       height: '4px',
-      background: '#e0e0e0',
       borderRadius: '2px',
       overflow: 'hidden',
       marginTop: '4px',
@@ -47,8 +47,8 @@ function ModelRow({ model }: { model: ModelState }) {
   return (
     <div style={{
       padding: '0.5rem 0.75rem',
-      background: '#fff',
-      border: '1px solid #e0e0e0',
       borderRadius: '6px',
       marginBottom: '0.4rem',
     }}>
@@ -56,7 +56,7 @@ function ModelRow({ model }: { model: ModelState }) {
         <span style={{
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.78rem',
-          color: '#333',
         }}>
           {model.name}
         </span>
@@ -70,14 +70,14 @@ function ModelRow({ model }: { model: ModelState }) {
           gap: '0.3rem',
         }}>
           {model.status === 'ready' && (
-            <span style={{ fontSize: '0.85rem' }}>✓</span>
           )}
           {model.status === 'error' && (
-            <span style={{ fontSize: '0.85rem' }}>✗</span>
           )}
           {STATUS_LABEL[model.status]}
           {showProgress && (
-            <span style={{ color: '#888', fontWeight: 400 }}>
               {Math.round(model.progress * 100)}%
             </span>
           )}
@@ -104,8 +104,8 @@ export default function ModelStatus({ models }: ModelStatusProps) {
   return (
     <div style={{
       padding: '1rem',
-      background: '#f8f8f8',
-      border: '1px solid #e0e0e0',
       borderRadius: '8px',
       marginBottom: '1.5rem',
     }}>
@@ -120,7 +120,7 @@ export default function ModelStatus({ models }: ModelStatusProps) {
           fontSize: '0.85rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 600,
-          color: '#444',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
@@ -137,12 +137,23 @@ export default function ModelStatus({ models }: ModelStatusProps) {
           </span>
         )}
       </div>
       {models.map(m => (
         <ModelRow key={m.name} model={m} />
       ))}
       {models.length === 0 && (
         <div style={{
-          color: '#999',
           fontSize: '0.85rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
         }}>

   return (
     <div style={{
       height: '4px',
+      background: 'var(--border)',
       borderRadius: '2px',
       overflow: 'hidden',
       marginTop: '4px',
   return (
     <div style={{
       padding: '0.5rem 0.75rem',
+      background: 'var(--bg-card)',
+      border: '1px solid var(--border)',
       borderRadius: '6px',
       marginBottom: '0.4rem',
     }}>
         <span style={{
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.78rem',
+          color: 'var(--text)',
         }}>
           {model.name}
         </span>
           gap: '0.3rem',
         }}>
           {model.status === 'ready' && (
+            <span style={{ fontSize: '0.85rem' }}>{'\u2713'}</span>
           )}
           {model.status === 'error' && (
+            <span style={{ fontSize: '0.85rem' }}>{'\u2717'}</span>
           )}
           {STATUS_LABEL[model.status]}
           {showProgress && (
+            <span style={{ color: 'var(--text-secondary)', fontWeight: 400 }}>
               {Math.round(model.progress * 100)}%
             </span>
           )}
   return (
     <div style={{
       padding: '1rem',
+      background: 'var(--bg-section)',
+      border: '1px solid var(--border)',
       borderRadius: '8px',
       marginBottom: '1.5rem',
     }}>
           fontSize: '0.85rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 600,
+          color: 'var(--text-secondary)',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           </span>
         )}
       </div>
+      {!allReady && (
+        <p style={{
+          margin: '0 0 0.5rem',
+          fontSize: '0.75rem',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          color: 'var(--text-secondary)',
+          lineHeight: 1.4,
+        }}>
+          First load downloads ~4 GB of model weights. Subsequent visits use the browser cache.
+        </p>
+      )}
       {models.map(m => (
         <ModelRow key={m.name} model={m} />
       ))}
       {models.length === 0 && (
         <div style={{
+          color: 'var(--text-muted)',
           fontSize: '0.85rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
         }}>

src/components/PipelineView.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
 import type { ExpandedQuery, ScoredChunk, RRFResult, RerankedResult, FinalResult } from '../types';
 import ExpansionColumn from './ExpansionColumn';
 import SearchColumn from './SearchColumn';
@@ -17,35 +18,120 @@ interface PipelineViewProps {
 }
 const COLUMNS = [
-  { label: 'User Query', bg: '#E8F0FE', headerColor: '#1a237e' },
-  { label: 'Query Expansion', bg: '#FFF8E1', headerColor: '#5d4037' },
-  { label: 'Parallel Search', bg: '#E0F2F1', headerColor: '#004d40' },
-  { label: 'Result Fusion & Reranking', bg: '#E8F5E9', headerColor: '#1b5e20' },
 ];
 function QueryColumn({ query }: { query?: string }) {
   return (
     <div>
-      <h3 style={{
-        margin: '0 0 0.75rem 0',
-        fontSize: '0.8rem',
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontWeight: 700,
-        color: '#1a237e',
-        textTransform: 'uppercase',
-        letterSpacing: '0.05em',
       }}>
-        User Query
-      </h3>
       {query ? (
         <div style={{
           padding: '0.65rem 0.85rem',
-          background: '#fff',
-          border: '1px solid #c5cae9',
           borderRadius: '6px',
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.85rem',
-          color: '#1a237e',
           wordBreak: 'break-word',
           lineHeight: 1.5,
         }}>
@@ -55,7 +141,7 @@ function QueryColumn({ query }: { query?: string }) {
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
-          color: '#999',
           margin: 0,
         }}>
           No query yet.
@@ -81,29 +167,28 @@ export default function PipelineView({ state, query }: PipelineViewProps) {
         gap: '0',
         borderRadius: '10px',
         overflow: 'hidden',
-        border: '1px solid #d0d0d0',
-        boxShadow: '0 2px 12px rgba(0,0,0,0.07)',
       }}>
-        {/* Column backgrounds are rendered as wrappers */}
         {COLUMNS.map((col, i) => (
           <div
             key={col.label}
             style={{
               background: col.bg,
               padding: '1rem',
-              borderRight: i < COLUMNS.length - 1 ? '1px solid #d0d0d0' : 'none',
               minHeight: '300px',
             }}
           >
             {i === 0 && <QueryColumn query={query} />}
-            {i === 1 && <ExpansionColumn state={state.expansion} />}
-            {i === 2 && <SearchColumn state={state.search} />}
             {i === 3 && (
               <FusionColumn state={{
                 rrf: state.rrf,
                 rerank: state.rerank,
                 blend: state.blend,
-              }} />
             )}
           </div>
         ))}
@@ -120,3 +205,5 @@ export default function PipelineView({ state, query }: PipelineViewProps) {
     </>
   );
 }

+import { useState } from 'react';
 import type { ExpandedQuery, ScoredChunk, RRFResult, RerankedResult, FinalResult } from '../types';
 import ExpansionColumn from './ExpansionColumn';
 import SearchColumn from './SearchColumn';
 }
 const COLUMNS = [
+  {
+    label: 'User Query',
+    bg: 'var(--col-query)',
+    headerColor: '#5c6bc0',
+    info: 'The original search query you typed. This is the starting point for the entire pipeline.',
+  },
+  {
+    label: 'Query Expansion',
+    bg: 'var(--col-expansion)',
+    headerColor: '#f57f17',
+    info: 'A fine-tuned 1.7B LLM generates three query variants: lexical keywords (lex) for BM25, semantic sentences (vec) for vector search, and a hypothetical document (HyDE) to improve recall.',
+  },
+  {
+    label: 'Parallel Search',
+    bg: 'var(--col-search)',
+    headerColor: '#00897b',
+    info: 'Two search strategies run simultaneously: BM25 keyword search (exact term matching) and vector similarity search (semantic meaning via embeddings). Each finds relevant document chunks independently.',
+  },
+  {
+    label: 'Fusion & Reranking',
+    bg: 'var(--col-fusion)',
+    headerColor: '#388e3c',
+    info: 'Results are merged via Reciprocal Rank Fusion (RRF), then a cross-encoder reranker (Qwen3-Reranker-0.6B) re-scores the top candidates for precision. Final scores blend RRF and reranker signals.',
+  },
 ];
+function InfoTooltip({ text }: { text: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <span
+      style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}
+    >
+      <span style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '16px',
+        height: '16px',
+        borderRadius: '50%',
+        border: '1px solid var(--border)',
+        background: 'var(--bg-card)',
+        color: 'var(--text-muted)',
+        fontSize: '0.62rem',
+        fontWeight: 700,
+        cursor: 'help',
+        flexShrink: 0,
+        lineHeight: 1,
+      }}>
+        ?
+      </span>
+      {open && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          marginTop: '6px',
+          padding: '0.6rem 0.75rem',
+          background: 'var(--bg-card)',
+          border: '1px solid var(--border)',
+          borderRadius: '6px',
+          boxShadow: '0 4px 16px var(--shadow)',
+          fontSize: '0.72rem',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontWeight: 400,
+          color: 'var(--text)',
+          lineHeight: 1.55,
+          width: '220px',
+          zIndex: 100,
+          textTransform: 'none',
+          letterSpacing: 'normal',
+        }}>
+          {text}
+        </div>
+      )}
+    </span>
+  );
+}
 function QueryColumn({ query }: { query?: string }) {
   return (
     <div>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.4rem',
+        marginBottom: '0.75rem',
       }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: '0.8rem',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontWeight: 700,
+          color: COLUMNS[0].headerColor,
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}>
+          User Query
+        </h3>
+        <InfoTooltip text={COLUMNS[0].info} />
+      </div>
       {query ? (
         <div style={{
           padding: '0.65rem 0.85rem',
+          background: 'var(--bg-card)',
+          border: '1px solid var(--border)',
           borderRadius: '6px',
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.85rem',
+          color: 'var(--text)',
           wordBreak: 'break-word',
           lineHeight: 1.5,
         }}>
         <p style={{
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.8rem',
+          color: 'var(--text-muted)',
           margin: 0,
         }}>
           No query yet.
         gap: '0',
         borderRadius: '10px',
         overflow: 'hidden',
+        border: '1px solid var(--border)',
+        boxShadow: '0 2px 12px var(--shadow)',
       }}>
         {COLUMNS.map((col, i) => (
           <div
             key={col.label}
             style={{
               background: col.bg,
               padding: '1rem',
+              borderRight: i < COLUMNS.length - 1 ? '1px solid var(--border)' : 'none',
               minHeight: '300px',
             }}
           >
             {i === 0 && <QueryColumn query={query} />}
+            {i === 1 && <ExpansionColumn state={state.expansion} info={col.info} />}
+            {i === 2 && <SearchColumn state={state.search} info={col.info} />}
             {i === 3 && (
               <FusionColumn state={{
                 rrf: state.rrf,
                 rerank: state.rerank,
                 blend: state.blend,
+              }} info={col.info} />
             )}
           </div>
         ))}
     </>
   );
 }
+export { InfoTooltip };

src/components/QueryInput.tsx CHANGED Viewed

@@ -28,21 +28,21 @@ export default function QueryInput({ onSearch, disabled }: QueryInputProps) {
           value={query}
           onChange={e => setQuery(e.target.value)}
           disabled={disabled}
-          placeholder={disabled ? 'Loading models…' : 'Enter a search query…'}
           style={{
             flex: 1,
             padding: '0.6rem 0.9rem',
             fontSize: '1rem',
             fontFamily: 'system-ui, -apple-system, sans-serif',
-            border: '1px solid #ccc',
             borderRadius: '6px',
-            background: disabled ? '#f5f5f5' : '#fff',
-            color: disabled ? '#999' : '#111',
             outline: 'none',
             transition: 'border-color 0.15s',
           }}
           onFocus={e => { if (!disabled) e.target.style.borderColor = '#4285F4'; }}
-          onBlur={e => { e.target.style.borderColor = '#ccc'; }}
         />
         <button
           type="submit"
@@ -51,7 +51,7 @@ export default function QueryInput({ onSearch, disabled }: QueryInputProps) {
             padding: '0.6rem 1.2rem',
             fontSize: '1rem',
             fontFamily: 'system-ui, -apple-system, sans-serif',
-            background: disabled || !query.trim() ? '#ccc' : '#4285F4',
             color: '#fff',
             border: 'none',
             borderRadius: '6px',
@@ -65,7 +65,7 @@ export default function QueryInput({ onSearch, disabled }: QueryInputProps) {
       </form>
       <div style={{ marginTop: '0.6rem', display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center' }}>
-        <span style={{ fontSize: '0.8rem', color: '#666', fontFamily: 'system-ui, -apple-system, sans-serif' }}>
           Examples:
         </span>
         {EXAMPLE_QUERIES.map(q => (
@@ -77,9 +77,9 @@ export default function QueryInput({ onSearch, disabled }: QueryInputProps) {
               padding: '0.25rem 0.6rem',
               fontSize: '0.8rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
-              background: '#f0f4ff',
-              color: disabled ? '#aaa' : '#4285F4',
-              border: '1px solid #c5d5ff',
               borderRadius: '4px',
               cursor: disabled ? 'not-allowed' : 'pointer',
             }}

           value={query}
           onChange={e => setQuery(e.target.value)}
           disabled={disabled}
+          placeholder={disabled ? 'Loading models\u2026' : 'Enter a search query\u2026'}
           style={{
             flex: 1,
             padding: '0.6rem 0.9rem',
             fontSize: '1rem',
             fontFamily: 'system-ui, -apple-system, sans-serif',
+            border: '1px solid var(--input-border)',
             borderRadius: '6px',
+            background: disabled ? 'var(--bg-section)' : 'var(--bg-input)',
+            color: disabled ? 'var(--text-muted)' : 'var(--text)',
             outline: 'none',
             transition: 'border-color 0.15s',
           }}
           onFocus={e => { if (!disabled) e.target.style.borderColor = '#4285F4'; }}
+          onBlur={e => { e.target.style.borderColor = ''; }}
         />
         <button
           type="submit"
             padding: '0.6rem 1.2rem',
             fontSize: '1rem',
             fontFamily: 'system-ui, -apple-system, sans-serif',
+            background: disabled || !query.trim() ? 'var(--border)' : '#4285F4',
             color: '#fff',
             border: 'none',
             borderRadius: '6px',
       </form>
       <div style={{ marginTop: '0.6rem', display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'system-ui, -apple-system, sans-serif' }}>
           Examples:
         </span>
         {EXAMPLE_QUERIES.map(q => (
               padding: '0.25rem 0.6rem',
               fontSize: '0.8rem',
               fontFamily: 'system-ui, -apple-system, sans-serif',
+              background: 'var(--example-bg)',
+              color: disabled ? 'var(--text-muted)' : '#4285F4',
+              border: '1px solid var(--example-border)',
               borderRadius: '4px',
               cursor: disabled ? 'not-allowed' : 'pointer',
             }}

src/components/ResultCard.tsx CHANGED Viewed

@@ -10,8 +10,8 @@ interface ResultCardProps {
 function ScoreBadge({ score }: { score: number }) {
   const pct = Math.round(score * 100);
-  const bg = pct >= 80 ? '#e8f5e9' : pct >= 50 ? '#fff8e1' : '#fce4ec';
-  const color = pct >= 80 ? '#2e7d32' : pct >= 50 ? '#f57f17' : '#c62828';
   return (
     <span style={{
@@ -42,21 +42,21 @@ export default function ResultCard({ title, score, snippet, expanded: expandedPr
     }
   }
-  const preview = snippet.length > 200 ? snippet.slice(0, 200) + '…' : snippet;
   return (
     <div
       onClick={handleToggle}
       style={{
         padding: '0.65rem 0.85rem',
-        background: '#fff',
-        border: '1px solid #e0e0e0',
         borderRadius: '6px',
         marginBottom: '0.4rem',
         cursor: 'pointer',
         transition: 'box-shadow 0.15s',
       }}
-      onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'; }}
       onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
@@ -64,7 +64,7 @@ export default function ResultCard({ title, score, snippet, expanded: expandedPr
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.85rem',
           fontWeight: 600,
-          color: '#1a1a1a',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
@@ -73,8 +73,8 @@ export default function ResultCard({ title, score, snippet, expanded: expandedPr
           {title}
         </span>
         <ScoreBadge score={score} />
-        <span style={{ color: '#999', fontSize: '0.75rem', flexShrink: 0 }}>
-          {expanded ? '▲' : '▼'}
         </span>
       </div>
@@ -82,7 +82,7 @@ export default function ResultCard({ title, score, snippet, expanded: expandedPr
         marginTop: '0.4rem',
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
         fontSize: '0.72rem',
-        color: '#555',
         lineHeight: 1.5,
         whiteSpace: expanded ? 'pre-wrap' : 'nowrap',
         overflow: 'hidden',

 function ScoreBadge({ score }: { score: number }) {
   const pct = Math.round(score * 100);
+  const bg = pct >= 80 ? 'var(--score-good-bg)' : pct >= 50 ? 'var(--score-mid-bg)' : 'var(--score-bad-bg)';
+  const color = pct >= 80 ? '#2e7d32' : pct >= 50 ? '#f57f17' : 'var(--text-secondary)';
   return (
     <span style={{
     }
   }
+  const preview = snippet.length > 200 ? snippet.slice(0, 200) + '\u2026' : snippet;
   return (
     <div
       onClick={handleToggle}
       style={{
         padding: '0.65rem 0.85rem',
+        background: 'var(--bg-card)',
+        border: '1px solid var(--border)',
         borderRadius: '6px',
         marginBottom: '0.4rem',
         cursor: 'pointer',
         transition: 'box-shadow 0.15s',
       }}
+      onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 8px var(--shadow)'; }}
       onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontSize: '0.85rem',
           fontWeight: 600,
+          color: 'var(--text)',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           {title}
         </span>
         <ScoreBadge score={score} />
+        <span style={{ color: 'var(--text-muted)', fontSize: '0.75rem', flexShrink: 0 }}>
+          {expanded ? '\u25B2' : '\u25BC'}
         </span>
       </div>
         marginTop: '0.4rem',
         fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
         fontSize: '0.72rem',
+        color: 'var(--text-secondary)',
         lineHeight: 1.5,
         whiteSpace: expanded ? 'pre-wrap' : 'nowrap',
         overflow: 'hidden',

src/components/SearchColumn.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { ScoredChunk } from '../types';
 interface SearchColumnState {
   status: 'idle' | 'running' | 'done';
@@ -8,6 +9,7 @@ interface SearchColumnState {
 interface SearchColumnProps {
   state: SearchColumnState;
 }
 function Spinner() {
@@ -16,7 +18,7 @@ function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
-      border: '2px solid #ddd',
       borderTopColor: '#00897b',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
@@ -28,7 +30,7 @@ function ScoreBadge({ score, source }: { score: number; source: 'bm25' | 'vector
   const label = source === 'bm25'
     ? score.toFixed(2)
     : (score * 100).toFixed(1) + '%';
-  const bg = source === 'vector' ? '#e0f2f1' : '#e8eaf6';
   const color = source === 'vector' ? '#00695c' : '#283593';
   return (
@@ -54,14 +56,14 @@ function HitRow({ hit }: { hit: ScoredChunk }) {
       onClick={() => setOpen(o => !o)}
       style={{
         padding: '0.45rem 0.65rem',
-        background: '#fff',
-        border: '1px solid #e0e0e0',
         borderRadius: '5px',
         marginBottom: '0.3rem',
         cursor: 'pointer',
         fontSize: '0.78rem',
       }}
-      onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 1px 5px rgba(0,0,0,0.08)'; }}
       onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
@@ -69,7 +71,7 @@ function HitRow({ hit }: { hit: ScoredChunk }) {
           flex: 1,
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 600,
-          color: '#1a1a1a',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
@@ -77,18 +79,18 @@ function HitRow({ hit }: { hit: ScoredChunk }) {
           {hit.chunk.title}
         </span>
         <ScoreBadge score={hit.score} source={hit.source} />
-        <span style={{ color: '#bbb', fontSize: '0.65rem' }}>{open ? '▲' : '▼'}</span>
       </div>
       {open && (
         <div style={{
           marginTop: '0.4rem',
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.68rem',
-          color: '#555',
           lineHeight: 1.55,
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',
-          borderTop: '1px solid #f0f0f0',
           paddingTop: '0.4rem',
         }}>
           {hit.chunk.text}
@@ -111,7 +113,7 @@ function HitsSection({ label, hits, color }: { label: string; hits: ScoredChunk[
         letterSpacing: '0.06em',
         marginBottom: '0.4rem',
       }}>
-        {label} <span style={{ color: '#999', fontWeight: 400 }}>({hits.length} hits)</span>
       </div>
       {top.map((hit, i) => (
         <HitRow key={`${hit.chunk.docId}-${hit.chunk.chunkIndex}-${i}`} hit={hit} />
@@ -119,7 +121,7 @@ function HitsSection({ label, hits, color }: { label: string; hits: ScoredChunk[
       {hits.length > 5 && (
         <div style={{
           fontSize: '0.72rem',
-          color: '#999',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           paddingLeft: '0.25rem',
         }}>
@@ -130,37 +132,38 @@ function HitsSection({ label, hits, color }: { label: string; hits: ScoredChunk[
   );
 }
-export default function SearchColumn({ state }: SearchColumnProps) {
   const isIdle = state.status === 'idle';
   const isRunning = state.status === 'running';
   const isDone = state.status === 'done';
   return (
     <div style={{ opacity: isIdle ? 0.45 : 1, transition: 'opacity 0.3s' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
         <h3 style={{
           margin: 0,
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
-          color: '#004d40',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Parallel Search
         </h3>
         {isRunning && <Spinner />}
       </div>
       {isIdle && (
-        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: '#999', margin: 0 }}>
-          Awaiting expansion…
         </p>
       )}
       {isRunning && (
-        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: '#888', margin: 0, fontStyle: 'italic' }}>
-          Running vector + BM25 search…
         </p>
       )}

 import { useState } from 'react';
 import type { ScoredChunk } from '../types';
+import { InfoTooltip } from './PipelineView';
 interface SearchColumnState {
   status: 'idle' | 'running' | 'done';
 interface SearchColumnProps {
   state: SearchColumnState;
+  info?: string;
 }
 function Spinner() {
       display: 'inline-block',
       width: '16px',
       height: '16px',
+      border: '2px solid var(--border)',
       borderTopColor: '#00897b',
       borderRadius: '50%',
       animation: 'spin 0.7s linear infinite',
   const label = source === 'bm25'
     ? score.toFixed(2)
     : (score * 100).toFixed(1) + '%';
+  const bg = source === 'vector' ? 'var(--col-search)' : 'var(--col-query)';
   const color = source === 'vector' ? '#00695c' : '#283593';
   return (
       onClick={() => setOpen(o => !o)}
       style={{
         padding: '0.45rem 0.65rem',
+        background: 'var(--bg-card)',
+        border: '1px solid var(--border)',
         borderRadius: '5px',
         marginBottom: '0.3rem',
         cursor: 'pointer',
         fontSize: '0.78rem',
       }}
+      onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 1px 5px var(--shadow)'; }}
       onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
           flex: 1,
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 600,
+          color: 'var(--text)',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           {hit.chunk.title}
         </span>
         <ScoreBadge score={hit.score} source={hit.source} />
+        <span style={{ color: 'var(--text-muted)', fontSize: '0.65rem' }}>{open ? '\u25B2' : '\u25BC'}</span>
       </div>
       {open && (
         <div style={{
           marginTop: '0.4rem',
           fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
           fontSize: '0.68rem',
+          color: 'var(--text-secondary)',
           lineHeight: 1.55,
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',
+          borderTop: '1px solid var(--border-light)',
           paddingTop: '0.4rem',
         }}>
           {hit.chunk.text}
         letterSpacing: '0.06em',
         marginBottom: '0.4rem',
       }}>
+        {label} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>({hits.length} hits)</span>
       </div>
       {top.map((hit, i) => (
         <HitRow key={`${hit.chunk.docId}-${hit.chunk.chunkIndex}-${i}`} hit={hit} />
       {hits.length > 5 && (
         <div style={{
           fontSize: '0.72rem',
+          color: 'var(--text-muted)',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           paddingLeft: '0.25rem',
         }}>
   );
 }
+export default function SearchColumn({ state, info }: SearchColumnProps) {
   const isIdle = state.status === 'idle';
   const isRunning = state.status === 'running';
   const isDone = state.status === 'done';
   return (
     <div style={{ opacity: isIdle ? 0.45 : 1, transition: 'opacity 0.3s' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.75rem' }}>
         <h3 style={{
           margin: 0,
           fontSize: '0.8rem',
           fontFamily: 'system-ui, -apple-system, sans-serif',
           fontWeight: 700,
+          color: '#00897b',
           textTransform: 'uppercase',
           letterSpacing: '0.05em',
         }}>
           Parallel Search
         </h3>
+        {info && <InfoTooltip text={info} />}
         {isRunning && <Spinner />}
       </div>
       {isIdle && (
+        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: 'var(--text-muted)', margin: 0 }}>
+          Awaiting expansion...
         </p>
       )}
       {isRunning && (
+        <p style={{ fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.8rem', color: 'var(--text-secondary)', margin: 0, fontStyle: 'italic' }}>
+          Running vector + BM25 search...
         </p>
       )}

src/constants.ts CHANGED Viewed

@@ -11,10 +11,6 @@ export const RRF_SECONDARY_WEIGHT = 1.0;
 export const RRF_RANK1_BONUS = 0.05;
 export const RRF_RANK2_BONUS = 0.02;
-// Score Blending
-export const BLEND_TOP3_RRF = 0.75;
-export const BLEND_MID_RRF = 0.6;
-export const BLEND_TAIL_RRF = 0.4;
 // BM25
 export const BM25_K1 = 1.2;

 export const RRF_RANK1_BONUS = 0.05;
 export const RRF_RANK2_BONUS = 0.02;
 // BM25
 export const BM25_K1 = 1.2;

src/pipeline/blend.test.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { describe, it, expect } from "vitest";
 import { blendScores } from "./blend";
 import type { RRFResult } from "../types";
-import { BLEND_TOP3_RRF, BLEND_MID_RRF, BLEND_TAIL_RRF } from "../constants";
 // ---------------------------------------------------------------------------
 // Helpers
@@ -29,7 +30,7 @@ describe("blendScores", () => {
     expect(blendScores([], new Map())).toEqual([]);
   });
-  it("uses top3 weight for rank 1-3", () => {
     const rrfResults = [
       makeRRFResult("doc1", 0.5),
       makeRRFResult("doc2", 0.4),
@@ -41,47 +42,17 @@ describe("blendScores", () => {
       ["doc3", 0.7],
     ]);
     const results = blendScores(rrfResults, rerankScores);
-    // All three should use BLEND_TOP3_RRF weight
-    // doc1: 0.75*0.5 + 0.25*0.9 = 0.375 + 0.225 = 0.600
     const doc1 = results.find((r) => r.docId === "doc1")!;
-    const expected1 = BLEND_TOP3_RRF * 0.5 + (1 - BLEND_TOP3_RRF) * 0.9;
-    expect(doc1.score).toBeCloseTo(expected1, 10);
-  });
-  it("uses mid weight for rank 4-10", () => {
-    // Create 5 results; rank 4 and 5 should use mid weight
-    const rrfResults = Array.from({ length: 5 }, (_, i) =>
-      makeRRFResult(`doc${i}`, 0.5 - i * 0.05),
-    );
-    const rerankScores = new Map<string, number>([["doc3", 0.9]]);
-    const results = blendScores(rrfResults, rerankScores);
-    // doc3 is at rank 4 in RRF ordering -> uses BLEND_MID_RRF
-    const doc3 = results.find((r) => r.docId === "doc3")!;
-    const expected = BLEND_MID_RRF * 0.35 + (1 - BLEND_MID_RRF) * 0.9;
-    expect(doc3.score).toBeCloseTo(expected, 10);
-  });
-  it("uses tail weight for rank 11+", () => {
-    const rrfResults = Array.from({ length: 12 }, (_, i) =>
-      makeRRFResult(`doc${i}`, 0.5 - i * 0.03),
-    );
-    const rerankScores = new Map<string, number>([["doc11", 0.95]]);
-    const results = blendScores(rrfResults, rerankScores);
-    // doc11 is at rank 12 -> uses BLEND_TAIL_RRF
-    const doc11 = results.find((r) => r.docId === "doc11")!;
-    const rrfScore = 0.5 - 11 * 0.03; // 0.17
-    const expected = BLEND_TAIL_RRF * rrfScore + (1 - BLEND_TAIL_RRF) * 0.95;
-    expect(doc11.score).toBeCloseTo(expected, 10);
   });
   it("defaults missing rerank scores to 0", () => {
     const rrfResults = [makeRRFResult("doc1", 0.5)];
-    const rerankScores = new Map<string, number>(); // no rerank score for doc1
     const results = blendScores(rrfResults, rerankScores);
-    // score = 0.75 * 0.5 + 0.25 * 0 = 0.375
-    expect(results[0].score).toBeCloseTo(BLEND_TOP3_RRF * 0.5, 10);
   });
   it("sorts by blended score descending", () => {
@@ -90,7 +61,6 @@ describe("blendScores", () => {
       makeRRFResult("doc2", 0.4),
       makeRRFResult("doc3", 0.3),
     ];
-    // High rerank score on doc3 should push it up
     const rerankScores = new Map([
       ["doc1", 0.1],
       ["doc2", 0.2],
@@ -107,14 +77,13 @@ describe("blendScores", () => {
       makeRRFResult("doc1", 0.5),
       makeRRFResult("doc2", 0.49),
     ];
-    // doc2 gets much higher rerank score
     const rerankScores = new Map([
       ["doc1", 0.0],
       ["doc2", 1.0],
     ]);
     const results = blendScores(rrfResults, rerankScores);
-    // doc1: 0.75*0.5 + 0.25*0.0 = 0.375
-    // doc2: 0.75*0.49 + 0.25*1.0 = 0.3675 + 0.25 = 0.6175
     expect(results[0].docId).toBe("doc2");
   });
@@ -128,11 +97,9 @@ describe("blendScores", () => {
   });
   it("deduplicates by docId, keeping highest blended score", () => {
-    // This shouldn't normally happen since RRF already deduplicates,
-    // but the function handles it defensively
     const rrfResults = [
       makeRRFResult("doc1", 0.5),
-      makeRRFResult("doc1", 0.3), // duplicate
     ];
     const rerankScores = new Map([["doc1", 0.8]]);
     const results = blendScores(rrfResults, rerankScores);
@@ -140,50 +107,25 @@ describe("blendScores", () => {
     expect(results[0].docId).toBe("doc1");
   });
-  it("handles single result correctly", () => {
-    const rrfResults = [makeRRFResult("doc1", 0.42)];
-    const rerankScores = new Map([["doc1", 0.88]]);
-    const results = blendScores(rrfResults, rerankScores);
-    expect(results).toHaveLength(1);
-    const expected = BLEND_TOP3_RRF * 0.42 + (1 - BLEND_TOP3_RRF) * 0.88;
-    expect(results[0].score).toBeCloseTo(expected, 10);
-  });
-  it("weight transitions are correct at boundaries", () => {
-    // Create exactly 11 results, check ranks 3, 4, 10, 11
-    const rrfResults = Array.from({ length: 11 }, (_, i) =>
-      makeRRFResult(`doc${i}`, 1.0), // same RRF score
-    );
-    const rerankScores = new Map<string, number>();
-    // Give all the same rerank score so we can check weight differences
-    for (let i = 0; i < 11; i++) {
-      rerankScores.set(`doc${i}`, 1.0);
-    }
-    const results = blendScores(rrfResults, rerankScores);
-    // All should have blended score = weight * 1.0 + (1-weight) * 1.0 = 1.0
-    // regardless of weight, since both inputs are 1.0
-    for (const r of results) {
-      expect(r.score).toBeCloseTo(1.0, 10);
-    }
-  });
-  it("correctly applies different weights when scores differ", () => {
-    // 11 results with identical RRF=0.5, rerank=1.0
-    const rrfResults = Array.from({ length: 11 }, (_, i) =>
-      makeRRFResult(`doc${i}`, 0.5),
-    );
-    const rerankScores = new Map<string, number>();
-    for (let i = 0; i < 11; i++) {
-      rerankScores.set(`doc${i}`, 1.0);
-    }
     const results = blendScores(rrfResults, rerankScores);
-    // Rank 1-3: 0.75*0.5 + 0.25*1.0 = 0.625
-    // Rank 4-10: 0.60*0.5 + 0.40*1.0 = 0.700
-    // Rank 11: 0.40*0.5 + 0.60*1.0 = 0.800
-    // So rank 11 should have highest score (tail weight favors reranker more)
-    const topScore = results[0].score;
-    expect(topScore).toBeCloseTo(0.8, 10); // rank 11 doc
   });
 });

 import { describe, it, expect } from "vitest";
 import { blendScores } from "./blend";
 import type { RRFResult } from "../types";
+const RRF_W = 0.8; // must match BLEND_RRF_WEIGHT in blend.ts
 // ---------------------------------------------------------------------------
 // Helpers
     expect(blendScores([], new Map())).toEqual([]);
   });
+  it("applies uniform 70/30 weight to all ranks", () => {
     const rrfResults = [
       makeRRFResult("doc1", 0.5),
       makeRRFResult("doc2", 0.4),
       ["doc3", 0.7],
     ]);
     const results = blendScores(rrfResults, rerankScores);
+    // doc1: normalized RRF = 1.0, rerank = 0.9 -> 0.7*1.0 + 0.3*0.9 = 0.97
     const doc1 = results.find((r) => r.docId === "doc1")!;
+    expect(doc1.score).toBeCloseTo(RRF_W * 1.0 + (1 - RRF_W) * 0.9, 10);
   });
   it("defaults missing rerank scores to 0", () => {
     const rrfResults = [makeRRFResult("doc1", 0.5)];
+    const rerankScores = new Map<string, number>();
     const results = blendScores(rrfResults, rerankScores);
+    // score = 0.7 * 1.0 + 0.3 * 0 = 0.7 (normalized RRF = 1.0 for single result)
+    expect(results[0].score).toBeCloseTo(RRF_W, 10);
   });
   it("sorts by blended score descending", () => {
       makeRRFResult("doc2", 0.4),
       makeRRFResult("doc3", 0.3),
     ];
     const rerankScores = new Map([
       ["doc1", 0.1],
       ["doc2", 0.2],
       makeRRFResult("doc1", 0.5),
       makeRRFResult("doc2", 0.49),
     ];
     const rerankScores = new Map([
       ["doc1", 0.0],
       ["doc2", 1.0],
     ]);
     const results = blendScores(rrfResults, rerankScores);
+    // doc1: 0.7*1.0 + 0.3*0.0 = 0.700
+    // doc2: 0.7*(0.49/0.5) + 0.3*1.0 = 0.686 + 0.3 = 0.986
     expect(results[0].docId).toBe("doc2");
   });
   });
   it("deduplicates by docId, keeping highest blended score", () => {
     const rrfResults = [
       makeRRFResult("doc1", 0.5),
+      makeRRFResult("doc1", 0.3),
     ];
     const rerankScores = new Map([["doc1", 0.8]]);
     const results = blendScores(rrfResults, rerankScores);
     expect(results[0].docId).toBe("doc1");
   });
+  it("uniform weight does not cause rank leapfrogging from reranker noise", () => {
+    // The bug: with position-aware weights, rank 4 got 40% reranker weight
+    // while rank 3 got only 25%, causing irrelevant docs to jump up.
+    // With uniform weights, a low-RRF doc needs a very high reranker score to leapfrog.
+    const rrfResults = [
+      makeRRFResult("doc1", 0.12),  // rank 1 — relevant
+      makeRRFResult("doc2", 0.07),  // rank 2 — relevant
+      makeRRFResult("doc3", 0.05),  // rank 3 — relevant
+      makeRRFResult("doc4", 0.047), // rank 4 — irrelevant (Taj Mahal)
+    ];
+    const rerankScores = new Map([
+      ["doc1", 0.0],
+      ["doc2", 0.0],
+      ["doc3", 0.0],
+      ["doc4", 0.66], // noisy reranker gives moderate score to irrelevant doc
+    ]);
     const results = blendScores(rrfResults, rerankScores);
+    // doc4 should NOT be at position 2
+    expect(results[0].docId).toBe("doc1");
+    expect(results[1].docId).not.toBe("doc4");
   });
 });

src/pipeline/blend.ts CHANGED Viewed

@@ -1,32 +1,24 @@
 import type { RRFResult, RerankedResult, FinalResult } from "../types";
-import { BLEND_TOP3_RRF, BLEND_MID_RRF, BLEND_TAIL_RRF } from "../constants";
-// Blend RRF score with reranker score using position-aware weights
 export function blendScores(
   rrfResults: RRFResult[],
   rerankScores: Map<string, number>, // docId -> rerank score
 ): FinalResult[] {
-  const blended: RerankedResult[] = rrfResults.map((result, index) => {
-    const rank = index + 1; // 1-indexed position in RRF ordering
     const rerankScore = rerankScores.get(result.docId) ?? 0;
-    // Position-aware RRF weight (from QMD):
-    //   Rank 1-3:  75% RRF + 25% reranker
-    //   Rank 4-10: 60% RRF + 40% reranker
-    //   Rank 11+:  40% RRF + 60% reranker
-    let rrfWeight: number;
-    if (rank <= 3) {
-      rrfWeight = BLEND_TOP3_RRF; // 0.75
-    } else if (rank <= 10) {
-      rrfWeight = BLEND_MID_RRF; // 0.60
-    } else {
-      rrfWeight = BLEND_TAIL_RRF; // 0.40
-    }
-    // Normalize RRF score to [0,1] range for blending
-    // (RRF scores vary based on number of lists, so normalize by max)
     const blendedScore =
-      rrfWeight * result.score + (1 - rrfWeight) * rerankScore;
     return {
       ...result,

 import type { RRFResult, RerankedResult, FinalResult } from "../types";
+const BLEND_RRF_WEIGHT = 0.8; // uniform 80% RRF / 20% reranker
+// Blend RRF score with reranker score using uniform weights.
+// Browser-sized reranker models are noisy — position-aware weights
+// (which gave tail ranks MORE reranker influence) caused irrelevant
+// docs to leapfrog relevant ones.
 export function blendScores(
   rrfResults: RRFResult[],
   rerankScores: Map<string, number>, // docId -> rerank score
 ): FinalResult[] {
+  // Normalize RRF scores to [0,1] range so they're comparable with reranker scores (0-1)
+  const maxRRF = Math.max(...rrfResults.map(r => r.score), 1e-9);
+  const blended: RerankedResult[] = rrfResults.map((result) => {
     const rerankScore = rerankScores.get(result.docId) ?? 0;
+    const normalizedRRF = result.score / maxRRF;
     const blendedScore =
+      BLEND_RRF_WEIGHT * normalizedRRF + (1 - BLEND_RRF_WEIGHT) * rerankScore;
     return {
       ...result,

src/pipeline/expansion.ts CHANGED Viewed

@@ -1,20 +1,21 @@
-import { getExpansionPipeline } from "./models";
 import type { ExpandedQuery } from "../types";
 // The fine-tuned expansion model prompt format (from QMD)
 const EXPANSION_PROMPT = (query: string) =>
   `/no_think Expand this search query: ${query}`;
-// Parse the model's output text into structured ExpandedQuery
-function parseExpansionOutput(text: string): ExpandedQuery {
-  // The model outputs lines like:
-  //   lex: keyword1, keyword2, keyword3
-  //   vec: A semantically rich sentence about the topic
-  //   hyde: This document discusses the implementation of...
-  //
-  // Parse each line by prefix. Handle multiple vec lines.
-  // Fallback: if parsing fails, use the raw text as all three variants.
   const lines = text.trim().split("\n");
   let lex = "";
   const vec: string[] = [];
@@ -31,38 +32,147 @@ function parseExpansionOutput(text: string): ExpandedQuery {
     }
   }
-  // Fallback: if we couldn't parse any variant, use raw text
-  if (!lex && vec.length === 0 && !hyde) {
-    return { lex: text, vec: [text], hyde: text };
-  }
   return {
-    lex: lex || text,
-    vec: vec.length > 0 ? vec : [text],
-    hyde: hyde || text,
   };
 }
-// Run query expansion using the loaded model
 export async function expandQuery(query: string): Promise<ExpandedQuery> {
-  const pipe = getExpansionPipeline();
-  if (!pipe) throw new Error("Expansion model not loaded");
   const prompt = EXPANSION_PROMPT(query);
-  const output = await pipe(prompt, {
-    max_new_tokens: 256,
-    do_sample: false,
-  });
-  // pipeline("text-generation") returns array of { generated_text: string }
-  const generated = (output as Array<{ generated_text: string }>)[0]
-    .generated_text;
-  // The generated text includes the prompt - strip it
-  const responseText =
-    typeof generated === "string" ? generated.slice(prompt.length) : generated;
-  return parseExpansionOutput(String(responseText));
 }
 export { parseExpansionOutput }; // export for testing

+import { Tensor } from "@huggingface/transformers";
+import { getExpansionModel, getExpansionTokenizer } from "./models";
 import type { ExpandedQuery } from "../types";
 // The fine-tuned expansion model prompt format (from QMD)
 const EXPANSION_PROMPT = (query: string) =>
   `/no_think Expand this search query: ${query}`;
+const MAX_NEW_TOKENS = 128;
+// Sampling parameters — matches Qwen3 recommended settings from QMD's node-llama-cpp impl.
+// Greedy decoding (temp=0) causes degeneration with Qwen3; sampling is required.
+const TEMPERATURE = 0.7;
+const TOP_K = 20;
+const TOP_P = 0.8;
+// Parse the model's output text into structured ExpandedQuery
+function parseExpansionOutput(text: string, query: string): ExpandedQuery {
   const lines = text.trim().split("\n");
   let lex = "";
   const vec: string[] = [];
     }
   }
+  // Fallback to raw query if parsing failed (matches QMD's fallback behavior)
   return {
+    lex: lex || query,
+    vec: vec.length > 0 ? vec : [query],
+    hyde: hyde || `Information about ${query}`,
   };
 }
+// Sample from logits with temperature, top-k, and top-p (nucleus sampling)
+function sampleToken(logitsData: Float32Array | Float64Array, vocabSize: number): number {
+  // Apply temperature
+  const scaled = new Float64Array(vocabSize);
+  for (let i = 0; i < vocabSize; i++) {
+    scaled[i] = logitsData[i] / TEMPERATURE;
+  }
+  // Sort indices by logit value (descending) for top-k
+  const indices = Array.from({ length: vocabSize }, (_, i) => i);
+  indices.sort((a, b) => scaled[b] - scaled[a]);
+  // Top-k: keep only top-k candidates
+  const topKIndices = indices.slice(0, TOP_K);
+  // Softmax over top-k
+  let maxLogit = scaled[topKIndices[0]];
+  const exps = topKIndices.map(i => Math.exp(scaled[i] - maxLogit));
+  const sumExp = exps.reduce((a, b) => a + b, 0);
+  const probs = exps.map(e => e / sumExp);
+  // Top-p: find cutoff
+  let cumProb = 0;
+  let cutoff = probs.length;
+  for (let i = 0; i < probs.length; i++) {
+    cumProb += probs[i];
+    if (cumProb >= TOP_P) {
+      cutoff = i + 1;
+      break;
+    }
+  }
+  // Renormalize after top-p
+  const finalIndices = topKIndices.slice(0, cutoff);
+  const finalProbs = probs.slice(0, cutoff);
+  const finalSum = finalProbs.reduce((a, b) => a + b, 0);
+  // Sample
+  let r = Math.random() * finalSum;
+  for (let i = 0; i < finalIndices.length; i++) {
+    r -= finalProbs[i];
+    if (r <= 0) return finalIndices[i];
+  }
+  return finalIndices[finalIndices.length - 1];
+}
+// Manual autoregressive generation — bypasses Transformers.js generate()
+// which breaks when the ONNX model was exported without KV cache tensors.
+async function manualGenerate(
+  model: any,
+  inputIds: bigint[],
+  eosTokenId: number,
+  tokenizer: any,
+): Promise<bigint[]> {
+  const generated: bigint[] = [...inputIds];
+  const newTokens: bigint[] = [];
+  for (let i = 0; i < MAX_NEW_TOKENS; i++) {
+    const idsTensor = new Tensor("int64", BigInt64Array.from(generated), [1, generated.length]);
+    const maskTensor = new Tensor("int64", new BigInt64Array(generated.length).fill(1n), [1, generated.length]);
+    const output = await model({ input_ids: idsTensor, attention_mask: maskTensor });
+    const logits = output.logits;
+    const vocabSize = logits.dims[2];
+    const lastTokenLogits = logits.data.slice(
+      (generated.length - 1) * vocabSize,
+      generated.length * vocabSize,
+    );
+    const nextToken = sampleToken(lastTokenLogits, vocabSize);
+    if (nextToken === eosTokenId) break;
+    const tokenBigInt = BigInt(nextToken);
+    generated.push(tokenBigInt);
+    newTokens.push(tokenBigInt);
+    // Early stop: detect degeneration (same token repeated 4+ times)
+    if (
+      newTokens.length >= 4 &&
+      newTokens[newTokens.length - 1] === newTokens[newTokens.length - 2] &&
+      newTokens[newTokens.length - 2] === newTokens[newTokens.length - 3] &&
+      newTokens[newTokens.length - 3] === newTokens[newTokens.length - 4]
+    ) {
+      generated.splice(-4);
+      break;
+    }
+    // Early stop: if we see all three fields or double newline, done
+    if (newTokens.length >= 10 && newTokens.length % 5 === 0) {
+      const partial = tokenizer.decode(newTokens, { skip_special_tokens: true });
+      if (partial.includes("\n\n") || (partial.toLowerCase().includes("hyde:") && partial.split("\n").length >= 3)) {
+        break;
+      }
+    }
+  }
+  return generated;
+}
+// Run query expansion using the loaded model (no KV cache — model exported without it)
 export async function expandQuery(query: string): Promise<ExpandedQuery> {
+  const model = getExpansionModel();
+  const tokenizer = getExpansionTokenizer();
+  if (!model || !tokenizer) throw new Error("Expansion model not loaded");
   const prompt = EXPANSION_PROMPT(query);
+  // Apply chat template then tokenize (matches eval.py: tokenize=False + separate tokenize)
+  const chatPrompt = tokenizer.apply_chat_template(
+    [{ role: "user", content: prompt }],
+    { add_generation_prompt: true, tokenize: false },
+  ) as string;
+  const inputs = tokenizer(chatPrompt, { return_tensor: true });
+  const inputIds = Array.from(inputs.input_ids.data as BigInt64Array);
+  const eosTokenId = tokenizer.model?.config?.eos_token_id
+    ?? (tokenizer as any).eos_token_id
+    ?? 151643; // Qwen default
+  const allIds = await manualGenerate(model, inputIds, eosTokenId, tokenizer);
+  // Decode only the newly generated tokens (skip the prompt)
+  const newIds = allIds.slice(inputIds.length);
+  let responseText = tokenizer.decode(newIds, {
+    skip_special_tokens: true,
+  });
+  // Strip <think>...</think> blocks (model may emit reasoning despite /no_think)
+  responseText = responseText.replace(/<think>[\s\S]*?<\/think>/g, "").trim();
+  return parseExpansionOutput(responseText, query);
 }
 export { parseExpansionOutput }; // export for testing

src/pipeline/models.ts CHANGED Viewed

@@ -3,7 +3,6 @@ import {
   AutoTokenizer,
   AutoModelForCausalLM,
   type FeatureExtractionPipeline,
-  type TextGenerationPipeline,
   type PreTrainedTokenizer,
   type PreTrainedModel,
   type ProgressInfo,
@@ -15,7 +14,6 @@ type ProgressCallback = (state: ModelState) => void;
 // Singleton model instances
 let embeddingPipeline: FeatureExtractionPipeline | null = null;
-let generationPipeline: TextGenerationPipeline | null = null;
 // Reranker uses AutoModel + AutoTokenizer (not a pipeline)
 let rerankerModel: PreTrainedModel | null = null;
@@ -23,6 +21,10 @@ let rerankerTokenizer: PreTrainedTokenizer | null = null;
 let rerankerTokenYes = -1;
 let rerankerTokenNo = -1;
 /** Check whether WebGPU is available in this browser. */
 export async function checkWebGPU(): Promise<boolean> {
   if (!navigator.gpu) return false;
@@ -153,19 +155,32 @@ export async function loadRerankerModel(
 export async function loadExpansionModel(
   onProgress?: ProgressCallback,
 ): Promise<void> {
-  if (generationPipeline) return;
   const name = "expansion";
   onProgress?.({ name, status: "pending", progress: 0 });
   try {
-    generationPipeline = await pipeline(
-      "text-generation",
-      MODEL_EXPANSION,
-      {
-        dtype: "q4",
-        device: "webgpu",
-        progress_callback: makeProgressHandler(name, onProgress),
-      },
-    );
     onProgress?.({ name, status: "ready", progress: 1 });
   } catch (err) {
     onProgress?.({
@@ -237,8 +252,12 @@ export function getRerankerTokenIds(): { yes: number; no: number } {
   return { yes: rerankerTokenYes, no: rerankerTokenNo };
 }
-export function getExpansionPipeline(): TextGenerationPipeline | null {
-  return generationPipeline;
 }
 export function isAllModelsReady(): boolean {
@@ -247,5 +266,5 @@ export function isAllModelsReady(): boolean {
 }
 export function isExpansionReady(): boolean {
-  return generationPipeline !== null;
 }

   AutoTokenizer,
   AutoModelForCausalLM,
   type FeatureExtractionPipeline,
   type PreTrainedTokenizer,
   type PreTrainedModel,
   type ProgressInfo,
 // Singleton model instances
 let embeddingPipeline: FeatureExtractionPipeline | null = null;
 // Reranker uses AutoModel + AutoTokenizer (not a pipeline)
 let rerankerModel: PreTrainedModel | null = null;
 let rerankerTokenYes = -1;
 let rerankerTokenNo = -1;
+// Expansion uses AutoModel + AutoTokenizer (model was exported without KV cache)
+let expansionModel: PreTrainedModel | null = null;
+let expansionTokenizer: PreTrainedTokenizer | null = null;
 /** Check whether WebGPU is available in this browser. */
 export async function checkWebGPU(): Promise<boolean> {
   if (!navigator.gpu) return false;
 export async function loadExpansionModel(
   onProgress?: ProgressCallback,
 ): Promise<void> {
+  if (expansionModel) return;
   const name = "expansion";
   onProgress?.({ name, status: "pending", progress: 0 });
   try {
+    const progressHandler = makeProgressHandler(name, onProgress);
+    expansionTokenizer = await AutoTokenizer.from_pretrained(MODEL_EXPANSION, {
+      progress_callback: progressHandler,
+    });
+    // The HF repo has chat_template.jinja but it's not in tokenizer_config.json,
+    // so set the Qwen ChatML template manually.
+    if (!expansionTokenizer.chat_template) {
+      expansionTokenizer.chat_template =
+        "{% for message in messages %}" +
+        "<|im_start|>{{ message.role }}\n{{ message.content }}<|im_end|>\n" +
+        "{% endfor %}" +
+        "{% if add_generation_prompt %}<|im_start|>assistant\n{% endif %}";
+    }
+    expansionModel = await AutoModelForCausalLM.from_pretrained(MODEL_EXPANSION, {
+      dtype: "q4",
+      device: "webgpu",
+      progress_callback: progressHandler,
+    });
     onProgress?.({ name, status: "ready", progress: 1 });
   } catch (err) {
     onProgress?.({
   return { yes: rerankerTokenYes, no: rerankerTokenNo };
 }
+export function getExpansionModel(): PreTrainedModel | null {
+  return expansionModel;
+}
+export function getExpansionTokenizer(): PreTrainedTokenizer | null {
+  return expansionTokenizer;
 }
 export function isAllModelsReady(): boolean {
 }
 export function isExpansionReady(): boolean {
+  return expansionModel !== null;
 }