feat: add React UI components for 4-column pipeline visualization

Creates all 8 components for the in-browser QMD search pipeline demo:
QueryInput (with example query buttons), ModelStatus (per-model progress
bars), PipelineView (4-column grid), ExpansionColumn (HyDE/Vec/Lex cards),
SearchColumn (vector + BM25 hits with expandable chunks), FusionColumn
(RRF ranking + before/after rerank comparison + final blended results),
ResultCard (score badge + expandable snippet), and DocumentManager
(file upload + paste modal). All inline styles, no CSS framework.

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

src/components/DocumentManager.tsx

@@ -0,0 +1,274 @@
+import { useRef, useState } from 'react';
+
+interface DocumentManagerProps {
+  documents: Array<{ id: string; title: string; filepath: string }>;
+  onUpload: (files: FileList) => void;
+  onPaste: (text: string, filename: string) => void;
+}
+
+function PasteModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (text: string, filename: string) => void }) {
+  const [text, setText] = useState('');
+  const [filename, setFilename] = useState('pasted-document.md');
+
+  function handleConfirm() {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onConfirm(trimmed, filename.trim() || 'pasted-document.md');
+    onClose();
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      inset: 0,
+      background: 'rgba(0,0,0,0.4)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 1000,
+    }}
+    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
+            type="text"
+            value={filename}
+            onChange={e => setFilename(e.target.value)}
+            style={{
+              width: '100%',
+              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>
+
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+          <button
+            onClick={onClose}
+            style={{
+              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',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={!text.trim()}
+            style={{
+              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',
+              cursor: text.trim() ? 'pointer' : 'not-allowed',
+              fontWeight: 600,
+            }}
+          >
+            Add Document
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DocumentManager({ documents, onUpload, onPaste }: DocumentManagerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pasteOpen, setPasteOpen] = useState(false);
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const files = e.target.files;
+    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',
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '0.6rem',
+      }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: '0.85rem',
+          fontWeight: 600,
+          color: '#444',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}>
+          Documents
+          <span style={{
+            marginLeft: '0.5rem',
+            fontSize: '0.75rem',
+            fontWeight: 400,
+            color: '#888',
+          }}>
+            ({documents.length})
+          </span>
+        </h3>
+        <div style={{ display: 'flex', gap: '0.4rem' }}>
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            style={{
+              padding: '0.3rem 0.7rem',
+              fontSize: '0.78rem',
+              background: '#fff',
+              color: '#4285F4',
+              border: '1px solid #4285F4',
+              borderRadius: '5px',
+              cursor: 'pointer',
+              fontFamily: 'system-ui, -apple-system, sans-serif',
+              fontWeight: 500,
+            }}
+          >
+            Upload
+          </button>
+          <button
+            onClick={() => setPasteOpen(true)}
+            style={{
+              padding: '0.3rem 0.7rem',
+              fontSize: '0.78rem',
+              background: '#fff',
+              color: '#34a853',
+              border: '1px solid #34a853',
+              borderRadius: '5px',
+              cursor: 'pointer',
+              fontFamily: 'system-ui, -apple-system, sans-serif',
+              fontWeight: 500,
+            }}
+          >
+            Paste
+          </button>
+        </div>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".md,.txt"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+      />
+
+      {documents.length === 0 ? (
+        <p style={{ fontSize: '0.82rem', color: '#999', margin: 0 }}>
+          No documents loaded. Upload .md or .txt files, or paste text.
+        </p>
+      ) : (
+        <div style={{ maxHeight: '180px', overflowY: 'auto' }}>
+          {documents.map(doc => (
+            <div key={doc.id} style={{
+              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',
+              }}>
+                {doc.title}
+              </span>
+              <span style={{
+                fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+                fontSize: '0.68rem',
+                color: '#aaa',
+                flexShrink: 0,
+              }}>
+                {doc.filepath}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {pasteOpen && (
+        <PasteModal
+          onClose={() => setPasteOpen(false)}
+          onConfirm={onPaste}
+        />
+      )}
+    </div>
+  );
+}

src/components/ExpansionColumn.tsx

@@ -0,0 +1,136 @@
+import type { ExpandedQuery } from '../types';
+
+interface ExpansionColumnState {
+  status: 'idle' | 'running' | 'done' | 'error';
+  data?: ExpandedQuery;
+  error?: string;
+}
+
+interface ExpansionColumnProps {
+  state: ExpansionColumnState;
+}
+
+function Spinner() {
+  return (
+    <span style={{
+      display: 'inline-block',
+      width: '16px',
+      height: '16px',
+      border: '2px solid #ddd',
+      borderTopColor: '#f9a825',
+      borderRadius: '50%',
+      animation: 'spin 0.7s linear infinite',
+    }} />
+  );
+}
+
+function ExpansionCard({ label, content }: { label: string; content: string | string[] }) {
+  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',
+    }}>
+      <div style={{
+        fontSize: '0.72rem',
+        fontWeight: 700,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        color: '#f57f17',
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+        marginBottom: '0.4rem',
+      }}>
+        {label}
+      </div>
+      <div style={{
+        fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+        fontSize: '0.72rem',
+        color: '#333',
+        lineHeight: 1.6,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+      }}>
+        {text}
+      </div>
+    </div>
+  );
+}
+
+export default function ExpansionColumn({ state }: ExpansionColumnProps) {
+  const isIdle = state.status === 'idle';
+  const isRunning = state.status === 'running';
+  const isDone = state.status === 'done';
+  const isError = state.status === 'error';
+
+  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: '#5d4037',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}>
+          Query Expansion
+        </h3>
+        {isRunning && <Spinner />}
+      </div>
+
+      {isIdle && (
+        <p style={{
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '0.8rem',
+          color: '#999',
+          margin: 0,
+        }}>
+          Awaiting query…
+        </p>
+      )}
+
+      {isRunning && (
+        <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',
+          color: '#c62828',
+        }}>
+          Error: {state.error}
+        </div>
+      )}
+
+      {isDone && state.data && (
+        <>
+          <ExpansionCard label="HyDE (Hypothetical Document)" content={state.data.hyde} />
+          <ExpansionCard label="Vec Sentences" content={state.data.vec} />
+          <ExpansionCard label="Lex Keywords" content={state.data.lex} />
+        </>
+      )}
+    </div>
+  );
+}

src/components/FusionColumn.tsx

@@ -0,0 +1,273 @@
+import type { RRFResult, RerankedResult, FinalResult } from '../types';
+import ResultCard from './ResultCard';
+
+interface FusionColumnState {
+  rrf: { status: 'idle' | 'done'; data?: { merged: RRFResult[] } };
+  rerank: { status: 'idle' | 'running' | 'done'; data?: { before: RRFResult[]; after: RerankedResult[] } };
+  blend: { status: 'idle' | 'done'; data?: { finalResults: FinalResult[] } };
+}
+
+interface FusionColumnProps {
+  state: FusionColumnState;
+}
+
+function Spinner() {
+  return (
+    <span style={{
+      display: 'inline-block',
+      width: '16px',
+      height: '16px',
+      border: '2px solid #ddd',
+      borderTopColor: '#43a047',
+      borderRadius: '50%',
+      animation: 'spin 0.7s linear infinite',
+    }} />
+  );
+}
+
+function SectionHeader({ label, color, badge }: { label: string; color: string; badge?: string }) {
+  return (
+    <div style={{
+      fontSize: '0.72rem',
+      fontWeight: 700,
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      color,
+      textTransform: 'uppercase',
+      letterSpacing: '0.06em',
+      marginBottom: '0.4rem',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.4rem',
+    }}>
+      {label}
+      {badge && (
+        <span style={{ color: '#999', fontWeight: 400, fontSize: '0.68rem' }}>{badge}</span>
+      )}
+    </div>
+  );
+}
+
+function RRFRow({ result, rank }: { result: RRFResult; rank: number }) {
+  return (
+    <div style={{
+      display: 'flex',
+      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',
+      }}>
+        #{rank}
+      </span>
+      <span style={{
+        flex: 1,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        color: '#1a1a1a',
+        fontWeight: 500,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }}>
+        {result.title}
+      </span>
+      <span style={{
+        fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+        fontSize: '0.68rem',
+        color: '#2e7d32',
+        fontWeight: 700,
+        flexShrink: 0,
+      }}>
+        {result.score.toFixed(4)}
+      </span>
+    </div>
+  );
+}
+
+function BeforeAfterComparison({ before, after }: { before: RRFResult[]; after: RerankedResult[] }) {
+  const top5before = before.slice(0, 5);
+  const top5after = [...after].sort((a, b) => b.blendedScore - a.blendedScore).slice(0, 5);
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
+      <div>
+        <div style={{
+          fontSize: '0.68rem',
+          fontWeight: 600,
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          color: '#888',
+          marginBottom: '0.3rem',
+          textAlign: 'center',
+        }}>
+          Before
+        </div>
+        {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',
+            display: 'flex',
+            gap: '0.3rem',
+          }}>
+            <span style={{
+              fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+              color: '#bbb',
+            }}>
+              {i + 1}.
+            </span>
+            <span style={{
+              fontFamily: 'system-ui, -apple-system, sans-serif',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              color: '#333',
+            }}>
+              {r.title}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div>
+        <div style={{
+          fontSize: '0.68rem',
+          fontWeight: 600,
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          color: '#388e3c',
+          marginBottom: '0.3rem',
+          textAlign: 'center',
+        }}>
+          After Rerank
+        </div>
+        {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',
+            display: 'flex',
+            gap: '0.3rem',
+          }}>
+            <span style={{
+              fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+              color: '#81c784',
+            }}>
+              {i + 1}.
+            </span>
+            <span style={{
+              fontFamily: 'system-ui, -apple-system, sans-serif',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              color: '#2e7d32',
+              fontWeight: 500,
+            }}>
+              {r.title}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function FusionColumn({ state }: FusionColumnProps) {
+  const rrfDone = state.rrf.status === 'done';
+  const rerankRunning = state.rerank.status === 'running';
+  const rerankDone = state.rerank.status === 'done';
+  const blendDone = state.blend.status === 'done';
+  const isIdle = !rrfDone && !rerankRunning && !rerankDone && !blendDone;
+
+  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>
+      )}
+
+      {/* RRF Merged */}
+      {rrfDone && state.rrf.data && (
+        <div style={{ marginBottom: '0.85rem' }}>
+          <SectionHeader
+            label="RRF Fusion"
+            color="#558b2f"
+            badge={`(${state.rrf.data.merged.length} docs)`}
+          />
+          {state.rrf.data.merged.slice(0, 5).map((r, i) => (
+            <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>
+          )}
+        </div>
+      )}
+
+      {/* 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>
+      )}
+
+      {/* Before/After rerank */}
+      {rerankDone && state.rerank.data && (
+        <div style={{ marginBottom: '0.85rem' }}>
+          <SectionHeader label="Reranking" color="#33691e" />
+          <BeforeAfterComparison
+            before={state.rerank.data.before}
+            after={state.rerank.data.after}
+          />
+        </div>
+      )}
+
+      {/* Final blended results */}
+      {blendDone && state.blend.data && (
+        <div>
+          <SectionHeader
+            label="Final Results"
+            color="#1b5e20"
+            badge={`(${state.blend.data.finalResults.length} docs)`}
+          />
+          {state.blend.data.finalResults.slice(0, 5).map(r => (
+            <ResultCard
+              key={r.docId}
+              title={r.title}
+              score={r.score}
+              snippet={r.bestChunk}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/ModelStatus.tsx

@@ -0,0 +1,154 @@
+import type { ModelState } from '../types';
+
+interface ModelStatusProps {
+  models: ModelState[];
+}
+
+const STATUS_COLOR: Record<ModelState['status'], string> = {
+  pending: '#9e9e9e',
+  downloading: '#1976d2',
+  loading: '#f9a825',
+  ready: '#388e3c',
+  error: '#d32f2f',
+};
+
+const STATUS_LABEL: Record<ModelState['status'], string> = {
+  pending: 'Pending',
+  downloading: 'Downloading',
+  loading: 'Loading',
+  ready: 'Ready',
+  error: 'Error',
+};
+
+function ProgressBar({ progress, color }: { progress: number; color: string }) {
+  return (
+    <div style={{
+      height: '4px',
+      background: '#e0e0e0',
+      borderRadius: '2px',
+      overflow: 'hidden',
+      marginTop: '4px',
+    }}>
+      <div style={{
+        height: '100%',
+        width: `${Math.round(progress * 100)}%`,
+        background: color,
+        borderRadius: '2px',
+        transition: 'width 0.3s ease',
+      }} />
+    </div>
+  );
+}
+
+function ModelRow({ model }: { model: ModelState }) {
+  const color = STATUS_COLOR[model.status];
+  const showProgress = model.status === 'downloading' || model.status === 'loading';
+
+  return (
+    <div style={{
+      padding: '0.5rem 0.75rem',
+      background: '#fff',
+      border: '1px solid #e0e0e0',
+      borderRadius: '6px',
+      marginBottom: '0.4rem',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{
+          fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+          fontSize: '0.78rem',
+          color: '#333',
+        }}>
+          {model.name}
+        </span>
+        <span style={{
+          fontSize: '0.72rem',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontWeight: 600,
+          color,
+          display: 'flex',
+          alignItems: 'center',
+          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>
+          )}
+        </span>
+      </div>
+      {showProgress && <ProgressBar progress={model.progress} color={color} />}
+      {model.status === 'error' && model.error && (
+        <div style={{
+          marginTop: '4px',
+          fontSize: '0.72rem',
+          color: '#d32f2f',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+        }}>
+          {model.error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ModelStatus({ models }: ModelStatusProps) {
+  const allReady = models.length > 0 && models.every(m => m.status === 'ready');
+
+  return (
+    <div style={{
+      padding: '1rem',
+      background: '#f8f8f8',
+      border: '1px solid #e0e0e0',
+      borderRadius: '8px',
+      marginBottom: '1.5rem',
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '0.6rem',
+      }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: '0.85rem',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontWeight: 600,
+          color: '#444',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}>
+          Models
+        </h3>
+        {allReady && (
+          <span style={{
+            fontSize: '0.75rem',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            color: '#388e3c',
+            fontWeight: 600,
+          }}>
+            All ready
+          </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',
+        }}>
+          No models configured.
+        </div>
+      )}
+    </div>
+  );
+}

src/components/PipelineView.tsx

@@ -0,0 +1,122 @@
+import type { ExpandedQuery, ScoredChunk, RRFResult, RerankedResult, FinalResult } from '../types';
+import ExpansionColumn from './ExpansionColumn';
+import SearchColumn from './SearchColumn';
+import FusionColumn from './FusionColumn';
+
+export interface PipelineState {
+  expansion: { status: 'idle' | 'running' | 'done' | 'error'; data?: ExpandedQuery; error?: string };
+  search: { status: 'idle' | 'running' | 'done'; data?: { bm25Hits: ScoredChunk[]; vectorHits: ScoredChunk[] } };
+  rrf: { status: 'idle' | 'done'; data?: { merged: RRFResult[] } };
+  rerank: { status: 'idle' | 'running' | 'done'; data?: { before: RRFResult[]; after: RerankedResult[] } };
+  blend: { status: 'idle' | 'done'; data?: { finalResults: FinalResult[] } };
+}
+
+interface PipelineViewProps {
+  state: PipelineState;
+  query?: string;
+}
+
+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,
+        }}>
+          {query}
+        </div>
+      ) : (
+        <p style={{
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '0.8rem',
+          color: '#999',
+          margin: 0,
+        }}>
+          No query yet.
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default function PipelineView({ state, query }: PipelineViewProps) {
+  return (
+    <>
+      {/* Inject keyframes for spinner */}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        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>
+        ))}
+      </div>
+
+      {/* Responsive: stack on small screens */}
+      <style>{`
+        @media (max-width: 768px) {
+          .pipeline-grid {
+            grid-template-columns: 1fr !important;
+          }
+        }
+      `}</style>
+    </>
+  );
+}

src/components/QueryInput.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { EXAMPLE_QUERIES } from '../constants';
+
+interface QueryInputProps {
+  onSearch: (query: string) => void;
+  disabled: boolean;
+}
+
+export default function QueryInput({ onSearch, disabled }: QueryInputProps) {
+  const [query, setQuery] = useState('');
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const trimmed = query.trim();
+    if (trimmed) onSearch(trimmed);
+  }
+
+  function handleExample(q: string) {
+    setQuery(q);
+    onSearch(q);
+  }
+
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem' }}>
+        <input
+          type="text"
+          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"
+          disabled={disabled || !query.trim()}
+          style={{
+            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',
+            cursor: disabled || !query.trim() ? 'not-allowed' : 'pointer',
+            transition: 'background 0.15s',
+            fontWeight: 600,
+          }}
+        >
+          Search
+        </button>
+      </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 => (
+          <button
+            key={q}
+            onClick={() => handleExample(q)}
+            disabled={disabled}
+            style={{
+              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',
+            }}
+          >
+            {q}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/ResultCard.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+
+interface ResultCardProps {
+  title: string;
+  score: number;
+  snippet: string;
+  expanded?: boolean;
+  onToggle?: () => void;
+}
+
+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={{
+      display: 'inline-block',
+      padding: '0.15rem 0.45rem',
+      borderRadius: '4px',
+      background: bg,
+      color,
+      fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+      fontSize: '0.72rem',
+      fontWeight: 700,
+    }}>
+      {pct}%
+    </span>
+  );
+}
+
+export default function ResultCard({ title, score, snippet, expanded: expandedProp, onToggle }: ResultCardProps) {
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const isControlled = expandedProp !== undefined;
+  const expanded = isControlled ? expandedProp : localExpanded;
+
+  function handleToggle() {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setLocalExpanded(e => !e);
+    }
+  }
+
+  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' }}>
+        <span style={{
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontSize: '0.85rem',
+          fontWeight: 600,
+          color: '#1a1a1a',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          flex: 1,
+        }}>
+          {title}
+        </span>
+        <ScoreBadge score={score} />
+        <span style={{ color: '#999', fontSize: '0.75rem', flexShrink: 0 }}>
+          {expanded ? '▲' : '▼'}
+        </span>
+      </div>
+
+      <div style={{
+        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',
+        textOverflow: expanded ? 'unset' : 'ellipsis',
+      }}>
+        {expanded ? snippet : preview}
+      </div>
+    </div>
+  );
+}

src/components/SearchColumn.tsx

@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import type { ScoredChunk } from '../types';
+
+interface SearchColumnState {
+  status: 'idle' | 'running' | 'done';
+  data?: { bm25Hits: ScoredChunk[]; vectorHits: ScoredChunk[] };
+}
+
+interface SearchColumnProps {
+  state: SearchColumnState;
+}
+
+function Spinner() {
+  return (
+    <span style={{
+      display: 'inline-block',
+      width: '16px',
+      height: '16px',
+      border: '2px solid #ddd',
+      borderTopColor: '#00897b',
+      borderRadius: '50%',
+      animation: 'spin 0.7s linear infinite',
+    }} />
+  );
+}
+
+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 (
+    <span style={{
+      padding: '0.1rem 0.35rem',
+      borderRadius: '4px',
+      background: bg,
+      color,
+      fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+      fontSize: '0.68rem',
+      fontWeight: 700,
+      flexShrink: 0,
+    }}>
+      {label}
+    </span>
+  );
+}
+
+function HitRow({ hit }: { hit: ScoredChunk }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      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' }}>
+        <span style={{
+          flex: 1,
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontWeight: 600,
+          color: '#1a1a1a',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>
+          {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}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HitsSection({ label, hits, color }: { label: string; hits: ScoredChunk[]; color: string }) {
+  const top = hits.slice(0, 5);
+  return (
+    <div style={{ marginBottom: '0.85rem' }}>
+      <div style={{
+        fontSize: '0.72rem',
+        fontWeight: 700,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        color,
+        textTransform: 'uppercase',
+        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} />
+      ))}
+      {hits.length > 5 && (
+        <div style={{
+          fontSize: '0.72rem',
+          color: '#999',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          paddingLeft: '0.25rem',
+        }}>
+          +{hits.length - 5} more
+        </div>
+      )}
+    </div>
+  );
+}
+
+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>
+      )}
+
+      {isDone && state.data && (
+        <>
+          <HitsSection
+            label="Vector Search"
+            hits={state.data.vectorHits}
+            color="#00695c"
+          />
+          <HitsSection
+            label="BM25 Search"
+            hits={state.data.bm25Hits}
+            color="#283593"
+          />
+        </>
+      )}
+    </div>
+  );
+}