Upload folder using huggingface_hub

frontend/public/case-study/assets/study.css

@@ -135,6 +135,7 @@ blockquote.pull p,
 .cap-list,
 .ref-list,
 .ledge span,
+.ledge strong,
 .study-table caption,
 .study-table th,
 .study-table td {
@@ -684,32 +685,41 @@ blockquote.pull p {
   color: var(--ink-meta);
 }
 
-/* A specimen tile: the transparent tissue figure floats on its own light card, so it reads as preserved
-   material lifted out of the dark archive. The card carries its own dark ink regardless of the biome. */
-.tissue-figure {
-  max-width: 560px;
+/* Section 03 carries the light background itself (the paper biome), so the transparent specimen figure needs
+   no card. It floats into the column and the closing prose wraps around it. */
+.stats-tissue {
+  max-width: 720px;
   margin: 6vh auto 0;
-  padding: 24px 26px 20px;
-  background: #efe9dd;
-  border: 1px solid rgba(28, 23, 16, 0.14);
-  border-radius: 10px;
-  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.42);
-  text-align: center;
+  overflow: hidden; /* contain the float so the wrapper spans the figure */
+}
+.tissue-figure {
+  float: right;
+  width: 248px;
+  margin: 4px 0 16px 34px;
 }
 .tissue-figure img {
   display: block;
   width: 100%;
-  max-width: 300px;
   height: auto;
-  margin: 0 auto;
 }
 .tissue-figure figcaption {
-  margin: 16px auto 0;
-  max-width: 44ch;
+  margin-top: 12px;
   font-style: italic;
-  font-size: 12px;
-  line-height: 1.55;
-  color: rgba(28, 23, 16, 0.62);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--ink-meta);
+}
+.stats-tissue .stats-foot {
+  max-width: none;
+  margin: 0;
+}
+@media (max-width: 640px) {
+  .tissue-figure {
+    float: none;
+    width: 100%;
+    max-width: 300px;
+    margin: 0 auto 22px;
+  }
 }
 
 /* ------------------------------ In-prose lists ------------------------------ */

frontend/public/case-study/index.html

@@ -332,7 +332,7 @@
     </div>
 
     <!-- ============ 3. Section 03: when the definition changes (numbers on terraces) ============ -->
-    <section class="stats" data-biome="records">
+    <section class="stats" data-biome="paper">
       <div class="stats-head">
         <p class="eyebrow">03.</p>
         <h2 class="stats-title">When the definition of the disease changes</h2>
@@ -356,19 +356,25 @@
         <li class="ledge"><strong>42%</strong><span>of patients had mismatch-repair testing at diagnosis, coverage ranging 3.5% to 95.4% across centres (Thompson et&nbsp;al., 2022)</span></li>
         <li class="ledge"><strong>3</strong><span>layers to the reconstruction problem</span></li>
       </ol>
-      <p class="stats-foot">
-        A case recorded as stage IA under FIGO 2009 may need histologic review, lymphovascular space invasion
-        assessment, p53 immunohistochemistry, mismatch-repair testing, or POLE sequencing before a current
-        stage can be assigned. The historical cohort still helps: archives often preserve tissue blocks that
-        support later testing, so higher-resolution evidence can be generated years after diagnosis.
-      </p>
-      <figure class="tissue-figure reveal">
-        <img src="./assets/papers/hjelmeland.png" alt="Vimentin immunohistochemistry of endometrial tumour tissue at three staining intensities" loading="lazy" />
-        <figcaption>
-          Vimentin immunohistochemistry on archived endometrial tumour tissue, graded by staining intensity.
-          Hjelmeland et al., BJC Reports 2, 81 (2024).
-        </figcaption>
-      </figure>
+      <div class="stats-tissue">
+        <figure class="tissue-figure reveal">
+          <img src="./assets/papers/hjelmeland.png" alt="Vimentin immunohistochemistry of endometrial tumour tissue at three staining intensities" loading="lazy" />
+          <figcaption>
+            Vimentin immunohistochemistry on archived endometrial tumour tissue, graded by staining intensity.
+            Hjelmeland et al., BJC Reports 2, 81 (2024).
+          </figcaption>
+        </figure>
+        <p class="stats-foot">
+          A case recorded as stage IA under FIGO 2009 may need histologic review, lymphovascular space invasion
+          assessment, p53 immunohistochemistry, mismatch-repair testing, or POLE sequencing before a current
+          stage can be assigned. The historical cohort still helps: archives often preserve tissue blocks that
+          support later testing, so higher-resolution evidence can be generated years after diagnosis. The
+          practical work can be intensive: a team may need to retrieve reports, locate the corresponding tissue,
+          order new assays, identify which standard applies to each historical interpretation, join the new
+          results to the correct patient and specimen, and preserve why the final study value differs from the
+          original clinical label.
+        </p>
+      </div>
     </section>
 
     <!-- ==== 4. The three layers (descend-then-sideways rig, workflow biome) ==== -->

frontend/src/index.css

@@ -3199,6 +3199,8 @@ h2 {
 .mapping .mp-chat-form {
   display: flex;
   gap: 8px;
+  /* The input grows with its content; keep the Ask button pinned to the bottom edge as it does. */
+  align-items: flex-end;
 }
 .mapping .mp-chat-form .mp-input {
   flex: 1;
@@ -3207,6 +3209,18 @@ h2 {
   color: #1c2b36;
   border: 1px solid var(--block-hairline);
 }
+/* An auto-growing textarea: one line to start, grows with the message (see the useLayoutEffect that sets
+   its height from scrollHeight), then scrolls past a cap so it never runs off the panel. */
+.mapping .mp-chat-form textarea.mp-input {
+  height: auto;
+  min-height: 36px;
+  max-height: 132px;
+  padding: 8px 10px;
+  line-height: 1.4;
+  resize: none;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
 .mapping .mp-chat-form .mp-input::placeholder {
   color: #8a97a3;
 }
@@ -3963,10 +3977,23 @@ h2 {
 .cr .cr-chat-form {
   display: flex;
   gap: 8px;
+  /* Keep the Ask button at the bottom edge as the input grows with its content. */
+  align-items: flex-end;
 }
 .cr .cr-chat-form .cr-input {
   flex: 1;
 }
+/* An auto-growing textarea (see the useLayoutEffect setting its height from scrollHeight): one line to
+   start, grows with the message, then scrolls past a cap. */
+.cr .cr-chat-form textarea.cr-input {
+  height: auto;
+  min-height: 32px;
+  max-height: 120px;
+  line-height: 1.4;
+  resize: none;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
 
 /* --- Decision ledger --- */
 .cr .cr-ledger {

frontend/src/pages/CaseReview.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import {
   askFieldChat,
@@ -1056,14 +1056,33 @@ function ValueChat({
   onFileChat: (r: FieldChatResponse, q: string) => void;
 }) {
   const [draft, setDraft] = useState("");
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  function submit(e: React.FormEvent) {
-    e.preventDefault();
+  // Grow the input with its content as a long question is typed, up to a cap where the field scrolls.
+  useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [draft]);
+
+  function doSubmit() {
     const q = draft.trim();
     if (!q || busy) return;
     onAsk(q);
     setDraft("");
   }
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    doSubmit();
+  }
+  function onInputKey(e: React.KeyboardEvent) {
+    // Enter sends; Shift+Enter inserts a newline.
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      doSubmit();
+    }
+  }
 
   return (
     <div className="cr-chat">
@@ -1115,12 +1134,15 @@ function ValueChat({
         {busy && <p className="cr-chat-hint">Asking the model…</p>}
       </div>
       <form className="cr-chat-form" onSubmit={submit}>
-        <input
+        <textarea
+          ref={inputRef}
           className="cr-input"
+          rows={1}
           value={draft}
           placeholder={`e.g. why is ${block.label} ${formatValue(block.value) || "blank"}?`}
           aria-label="Ask about this value"
           onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onInputKey}
         />
         <button type="submit" className="cr-btn-secondary" disabled={busy || !draft.trim()}>
           Ask

frontend/src/pages/Mapping.tsx

@@ -1097,14 +1097,34 @@ function EdgeChat({
 }) {
   const [draft, setDraft] = useState("");
   const identityReady = identity.name.trim() && identity.role.trim();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  function submit(event: React.FormEvent) {
-    event.preventDefault();
+  // Grow the input with its content, so a long question is fully visible as it is typed, up to a cap
+  // where the field itself scrolls. Runs on every draft change, including the reset to "" after a send.
+  useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [draft]);
+
+  function doSubmit() {
     const q = draft.trim();
     if (!q || busy) return;
     askEdge(edge, q);
     setDraft("");
   }
+  function submit(event: React.FormEvent) {
+    event.preventDefault();
+    doSubmit();
+  }
+  function onInputKey(event: React.KeyboardEvent) {
+    // Enter sends; Shift+Enter inserts a newline, the usual chat convention.
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      doSubmit();
+    }
+  }
 
   function applyRemap(entry: Extract<ChatEntry, { kind: "assistant" }>) {
     const p = entry.response.proposal;
@@ -1191,12 +1211,15 @@ function EdgeChat({
         </p>
       )}
       <form className="mp-chat-form" onSubmit={submit}>
-        <input
+        <textarea
+          ref={inputRef}
           className="mp-input"
+          rows={1}
           value={draft}
-          placeholder="e.g. why margins here?"
+          placeholder="e.g. why this concept?"
           aria-label="Ask about this edge"
           onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onInputKey}
         />
         <button type="submit" className="mp-btn-secondary" disabled={busy || !draft.trim()}>
           Ask