feat: upload and pipeline screens wired to real backend

Ports UploadScreen and PipelineScreen from prototype/pipeline.jsx as
React components; replaces App.jsx placeholder with a state machine
(upload → pipeline → reader) connected to startParse/jobEvents/importSession.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -1,4 +1,11 @@
+import React from 'react';
+import Upload from './screens/Upload';
+import Pipeline from './screens/Pipeline';
+import { startParse, jobEvents } from './lib/api';
+import { hashPdf, importSession } from './lib/session';
+
 export default function App() {
+  // CSS custom properties — palette; must stay on ap-root for the entire tree.
   const rootStyle = {
     '--paper': '#f6f1e6',
     '--ink': '#2b2418',
@@ -6,11 +13,85 @@ export default function App() {
     '--body-size': '19px',
   };
 
+  const [screen, setScreen] = React.useState('upload');
+  const [fileName, setFileName] = React.useState('');
+  const [stageEvents, setStageEvents] = React.useState([]);
+  const [result, setResult] = React.useState(null);
+  // pdfHash stored for session export (used by Task 17).
+  const [pdfHash, setPdfHash] = React.useState('');
+
+  async function onPdf(file) {
+    setFileName(file.name);
+    setScreen('pipeline');
+    setStageEvents([]);
+    setResult(null);
+    try {
+      setPdfHash(await hashPdf(await file.arrayBuffer()));
+      const jobId = await startParse(file);
+      for await (const ev of jobEvents(jobId)) {
+        if (ev.event === 'stage') {
+          setStageEvents((s) => [...s, ev.data]);
+        } else if (ev.event === 'result') {
+          setResult(ev.data);
+          setScreen('reader');
+        } else if (ev.event === 'error') {
+          setStageEvents((s) => {
+            const failedIndex = s.length ? Math.max(...s.map((x) => x.index)) : 0;
+            return [...s, { index: failedIndex, name: '', status: 'failed', log: ev.data.message }];
+          });
+        }
+      }
+    } catch (e) {
+      setStageEvents((s) => [
+        ...s,
+        { index: 0, name: '', status: 'failed', log: String(e.message || e) },
+      ]);
+    }
+  }
+
+  // onSessionText: import a saved session JSON and jump straight to reader.
+  // Task 16 adds proper toasts — for now, alert on failure.
+  // TODO(Task 16): replace alert with toast notification on import failure.
+  function onSessionText(text) {
+    try {
+      const s = importSession(text);
+      setFileName(s.fileName || '');
+      setResult({ paper: s.paper, litPapers: s.litPapers, litByPara: s.litByPara });
+      setPdfHash(s.pdfHash || '');
+      setScreen('reader');
+    } catch {
+      alert('could not read that session file');
+    }
+  }
+
+  // onOpenLast: fully implemented in Task 17 (re-opens last PDF from cache/hash).
+  // Rendered only when lastFileName is non-null — currently null so button is hidden.
+  function onOpenLast() {
+    // Task 17 completes this.
+  }
+
   return (
     <div className="ap-root" style={rootStyle}>
-      <div className="ap-upload">
-        <div className="ap-wordmark">astroparse</div>
-      </div>
+      {screen === 'upload' && (
+        <Upload
+          onPdf={onPdf}
+          lastFileName={null}
+          onOpenLast={onOpenLast}
+          onSession={onSessionText}
+        />
+      )}
+      {screen === 'pipeline' && (
+        <Pipeline
+          fileName={fileName}
+          events={stageEvents}
+          onSkip={() => result && setScreen('reader')}
+          onReset={() => setScreen('upload')}
+        />
+      )}
+      {screen === 'reader' && (
+        // Task 15 replaces this placeholder with the full Reader screen.
+        <pre style={{ padding: 40 }}>{result?.paper?.title}</pre>
+      )}
     </div>
   );
 }

frontend/src/screens/Pipeline.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+// Pipeline stage metadata — ported verbatim from prototype/data.js pipelineStages.
+// Stage names and tools MUST match the backend stage names exactly.
+const PIPELINE_STAGES = [
+  { id: 'parse',    num: 'i',   name: 'Reading manuscript',   tool: 'pymupdf4llm' },
+  { id: 'clean',    num: 'ii',  name: 'Cleaning the leaves',  tool: 'header/footer removal' },
+  { id: 'segment',  num: 'iii', name: 'Ruling the columns',   tool: 'paragraph segmentation' },
+  { id: 'embed',    num: 'iv',  name: 'Committing to memory', tool: 'SPECTER2 embeddings' },
+  { id: 'index',    num: 'v',   name: 'Indexing the lexicon', tool: 'BM25' },
+  { id: 'retrieve', num: 'vi',  name: 'Consulting the library', tool: 'Pathfinder' },
+];
+
+// Pipeline screen — faithful port of PipelineScreen from prototype/pipeline.jsx.
+// Differences from prototype:
+//   1. NO scripted setTimeout animation — stages move only when events arrive via props.
+//   2. Props: fileName, events (array of stage events received so far), onSkip, onReset.
+//   3. Stage status derived from the LAST event for each stage index (default "pending").
+//   4. Log lines collected from every non-null log field per stage in arrival order.
+//   5. status:"failed" shows "✗" mark in rubric colour and replaces skip with reset footer.
+export default function Pipeline({ fileName, events, onSkip, onReset }) {
+  // Build per-stage status and log arrays from event stream.
+  // Key by stage index; last event wins for status; all non-null logs accumulated.
+  const stageData = React.useMemo(() => {
+    const byIndex = {};
+    for (const ev of events) {
+      const idx = ev.index;
+      if (!byIndex[idx]) byIndex[idx] = { status: 'pending', logs: [] };
+      byIndex[idx].status = ev.status;
+      if (ev.log != null) byIndex[idx].logs.push(ev.log);
+    }
+    return byIndex;
+  }, [events]);
+
+  // Determine if any stage has failed.
+  const hasFailed = Object.values(stageData).some((s) => s.status === 'failed');
+
+  // The highest stage index that has received events determines "current" position.
+  const activeIndices = Object.keys(stageData).map(Number);
+  const maxActive = activeIndices.length > 0 ? Math.max(...activeIndices) : -1;
+
+  // Header status text.
+  const allDone =
+    activeIndices.length === PIPELINE_STAGES.length &&
+    PIPELINE_STAGES.every((_, i) => {
+      const d = stageData[i];
+      return d && d.status === 'done';
+    });
+  const headerStatus = hasFailed ? 'error' : allDone ? 'ready' : 'in preparation';
+
+  return (
+    <div className="ap-screen ap-pipeline" data-screen-label="Pipeline">
+      <div className="ap-wordmark">astroparse</div>
+      <div className="ap-pipe-card">
+        <div className="ap-pipe-head">
+          <span className="ap-pipe-file">{fileName}</span>
+          <span className="ap-pipe-status">{headerStatus}</span>
+        </div>
+        <ol className="ap-stages">
+          {PIPELINE_STAGES.map((s, i) => {
+            const data = stageData[i];
+            const status = data ? data.status : 'pending';
+            const logs = data ? data.logs : [];
+
+            // Derive display state:
+            //   done    — status === 'done'
+            //   active  — status === 'active' (or the maxActive index with any status)
+            //   failed  — status === 'failed'
+            //   pending — not yet reached
+            let displayState;
+            if (status === 'done') {
+              displayState = 'done';
+            } else if (status === 'failed') {
+              displayState = 'failed';
+            } else if (status === 'active' || (data && i === maxActive && status !== 'done')) {
+              displayState = 'active';
+            } else if (i < maxActive) {
+              // Received events but not explicitly done — treat as active
+              displayState = 'active';
+            } else {
+              displayState = 'pending';
+            }
+
+            // Mark character: ✓ done, ✗ failed, … active, blank pending
+            let mark = '';
+            if (displayState === 'done') mark = '✓';
+            else if (displayState === 'failed') mark = '✗';
+            else if (displayState === 'active') mark = '…';
+
+            const showLogs = displayState !== 'pending' && logs.length > 0;
+
+            return (
+              <li key={s.id} className={'ap-stage is-' + displayState}>
+                <div className="ap-stage-row">
+                  <span className="ap-stage-num">{s.num}.</span>
+                  <span className="ap-stage-name">{s.name}</span>
+                  <span className="ap-stage-tool">{s.tool}</span>
+                  <span className="ap-stage-mark">{mark}</span>
+                </div>
+                {showLogs && (
+                  <div className="ap-stage-logs">
+                    {logs.map((l, j) => (
+                      <div key={j} className="ap-log-line">{l}</div>
+                    ))}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+        <div className="ap-pipe-foot">
+          {hasFailed ? (
+            <button className="ap-textbtn" onClick={onReset}>
+              return to the shelf &rarr;
+            </button>
+          ) : (
+            <button className="ap-textbtn" onClick={onSkip}>
+              skip to the manuscript &rarr;
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/screens/Upload.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+// Upload screen — faithful port of UploadScreen from prototype/pipeline.jsx.
+// Differences from prototype:
+//   1. onFile(f.name) → onPdf(file): passes the full File object (not just the name).
+//   2. The hard-coded "open Mowla & Iyer (2024)" button is replaced by a dynamic
+//      "open ‹lastFileName›" button that renders ONLY when lastFileName is non-null.
+//   3. The bottom caption about prototype limitations is DROPPED (not in production build).
+//   4. Session import reads file text and calls onSession(text) instead of onImportSession.
+export default function Upload({ onPdf, lastFileName, onOpenLast, onSession }) {
+  const [dragging, setDragging] = React.useState(false);
+  const fileRef = React.useRef(null);
+  const sessionRef = React.useRef(null);
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    const f = e.dataTransfer.files && e.dataTransfer.files[0];
+    if (f) onPdf(f);
+  };
+
+  return (
+    <div className="ap-screen ap-upload" data-screen-label="Upload">
+      <div className="ap-wordmark">astroparse</div>
+      <div
+        className={'ap-folio-drop' + (dragging ? ' is-dragging' : '')}
+        onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={handleDrop}
+        onClick={() => fileRef.current && fileRef.current.click()}
+      >
+        <div className="ap-folio-pilcrow">&para;</div>
+        <div className="ap-folio-title">Place a manuscript here</div>
+        <div className="ap-folio-sub">
+          drop an astronomy PDF, or click to browse
+        </div>
+        <div className="ap-folio-meta">
+          parsed with pymupdf4llm &middot; annotated against the literature via Pathfinder
+        </div>
+        <input
+          ref={fileRef}
+          type="file"
+          accept="application/pdf"
+          style={{ display: 'none' }}
+          onChange={(e) => { const f = e.target.files[0]; if (f) onPdf(f); }}
+        />
+      </div>
+
+      <div className="ap-upload-alt">
+        {lastFileName != null && (
+          <>
+            <button className="ap-textbtn" onClick={onOpenLast}>
+              open {lastFileName}
+            </button>
+            <span className="ap-alt-sep">&middot;</span>
+          </>
+        )}
+        <button
+          className="ap-textbtn"
+          onClick={() => sessionRef.current && sessionRef.current.click()}
+        >
+          reload a saved session (.json)
+        </button>
+        <input
+          ref={sessionRef}
+          type="file"
+          accept=".json,application/json"
+          style={{ display: 'none' }}
+          onChange={(e) => {
+            const f = e.target.files[0];
+            if (!f) return;
+            const r = new FileReader();
+            r.onload = () => onSession(r.result);
+            r.readAsText(f);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/styles/astroparse.css

@@ -80,8 +80,11 @@
   .ap-stage-name { font-size: 17px; font-weight: 500; letter-spacing: 0.01em; }
   .ap-stage-tool { font-family: var(--mono); font-size: 10.5px; color: color-mix(in oklab, var(--ink) 50%, var(--paper)); margin-left: auto; }
   .ap-stage-mark { font-family: var(--mono); font-size: 12px; color: var(--rubric); width: 16px; text-align: center; flex: none; }
+  .ap-screen { display: contents; }
   .ap-stage.is-pending { opacity: 0.38; }
+  .ap-stage.is-done { opacity: 1; }
   .ap-stage.is-active .ap-stage-name { color: var(--rubric); }
+  .ap-stage.is-failed .ap-stage-name { color: var(--rubric); }
   .ap-stage-logs { padding: 6px 0 2px 36px; display: flex; flex-direction: column; gap: 3px; }
   .ap-log-line { font-family: var(--mono); font-size: 11px; color: color-mix(in oklab, var(--ink) 58%, var(--paper)); animation: ap-fade .3s ease; }
   .ap-pipe-foot { text-align: right; padding-top: 16px; }