Add per-mode Information modal; keep context in design goals

Information button and modal in the app header for QA, System Chart
Extraction, and Hypotheses Generation, mirroring the one PlotExtract
has on madtools.org. Each mode gets its own "what this tool does /
when to use it / instructions" panel. All markup, styles, and script
are scoped to html[data-mode] for the three modes, so the landing
page and the PlotExtract app are unaffected.

Design-goals analysis now carries the material system and operating
environment into both suggested properties. Those two strings are the
only channel from the researcher's description into the hypotheses
prompt, so context such as "high entropy alloys" or "under cryogenic
temperature" was previously dropped for the rest of the pipeline.

Also shortens the per-mode footer disclaimers.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

index.html

@@ -2833,6 +2833,196 @@
       display: block;
     }
 
+    /* ============================================================
+       Per-mode "Information" button + modal.
+       Owned by QA / System Chart Extraction / Hypotheses Generation.
+       Everything here is scoped to those three modes, so it never
+       applies to the landing page or to the PlotExtract app.
+       ============================================================ */
+
+    /* Hidden unless one of the three owned modes is active. */
+    #infoOpenBtn,
+    #infoModalBackdrop {
+      display: none;
+    }
+
+    html[data-mode="QA"] .app-header,
+    html[data-mode="System Chart Extraction"] .app-header,
+    html[data-mode="Hypotheses Generation"] .app-header {
+      position: relative;
+      padding-right: 150px;
+    }
+
+    html[data-mode="QA"] #infoOpenBtn,
+    html[data-mode="System Chart Extraction"] #infoOpenBtn,
+    html[data-mode="Hypotheses Generation"] #infoOpenBtn {
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+      font-family: var(--font-body);
+      font-size: 0.95rem;
+      font-weight: 500;
+      padding: 10px 22px;
+      border-radius: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: border-color 0.2s ease, color 0.2s ease;
+    }
+
+    html[data-mode="QA"] #infoOpenBtn:hover,
+    html[data-mode="System Chart Extraction"] #infoOpenBtn:hover,
+    html[data-mode="Hypotheses Generation"] #infoOpenBtn:hover {
+      border-color: var(--accent-2);
+      color: var(--accent-2);
+    }
+
+    html[data-mode="QA"] #infoModalBackdrop.is-open,
+    html[data-mode="System Chart Extraction"] #infoModalBackdrop.is-open,
+    html[data-mode="Hypotheses Generation"] #infoModalBackdrop.is-open {
+      display: flex;
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem 1rem;
+      background: rgba(2, 6, 23, 0.72);
+      backdrop-filter: blur(4px);
+    }
+
+    html[data-mode="QA"] .info-modal,
+    html[data-mode="System Chart Extraction"] .info-modal,
+    html[data-mode="Hypotheses Generation"] .info-modal {
+      position: relative;
+      width: 100%;
+      max-width: 720px;
+      max-height: 85vh;
+      overflow-y: auto;
+      padding: 1.75rem 2rem 2rem;
+      background: var(--surface-strong);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-md);
+      color: var(--text);
+      text-align: left;
+    }
+
+    html[data-mode="QA"] .info-modal-head,
+    html[data-mode="System Chart Extraction"] .info-modal-head,
+    html[data-mode="Hypotheses Generation"] .info-modal-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      margin-bottom: 1.25rem;
+    }
+
+    html[data-mode="QA"] .info-modal-head h2,
+    html[data-mode="System Chart Extraction"] .info-modal-head h2,
+    html[data-mode="Hypotheses Generation"] .info-modal-head h2 {
+      margin: 0;
+      font-family: var(--font-display);
+      font-size: 1.6rem;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] #infoCloseBtn,
+    html[data-mode="System Chart Extraction"] #infoCloseBtn,
+    html[data-mode="Hypotheses Generation"] #infoCloseBtn {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+      font-family: var(--font-body);
+      font-size: 0.9rem;
+      padding: 8px 18px;
+      border-radius: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: border-color 0.2s ease, color 0.2s ease;
+    }
+
+    html[data-mode="QA"] #infoCloseBtn:hover,
+    html[data-mode="System Chart Extraction"] #infoCloseBtn:hover,
+    html[data-mode="Hypotheses Generation"] #infoCloseBtn:hover {
+      border-color: var(--accent-2);
+      color: var(--accent-2);
+    }
+
+    /* Only the panel matching the active mode is shown. */
+    .info-modal-body { display: none; }
+    html[data-mode="QA"] #infoBodyQA,
+    html[data-mode="System Chart Extraction"] #infoBodyChart,
+    html[data-mode="Hypotheses Generation"] #infoBodyHypotheses {
+      display: block;
+    }
+
+    html[data-mode="QA"] .info-modal-body h3,
+    html[data-mode="System Chart Extraction"] .info-modal-body h3,
+    html[data-mode="Hypotheses Generation"] .info-modal-body h3 {
+      margin: 1.35rem 0 0.45rem;
+      font-family: var(--font-display);
+      font-size: 1.05rem;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] .info-modal-body h3:first-child,
+    html[data-mode="System Chart Extraction"] .info-modal-body h3:first-child,
+    html[data-mode="Hypotheses Generation"] .info-modal-body h3:first-child {
+      margin-top: 0;
+    }
+
+    html[data-mode="QA"] .info-modal-body p,
+    html[data-mode="System Chart Extraction"] .info-modal-body p,
+    html[data-mode="Hypotheses Generation"] .info-modal-body p,
+    html[data-mode="QA"] .info-modal-body li,
+    html[data-mode="System Chart Extraction"] .info-modal-body li,
+    html[data-mode="Hypotheses Generation"] .info-modal-body li {
+      color: var(--muted);
+      font-size: 0.95rem;
+      line-height: 1.65;
+    }
+
+    html[data-mode="QA"] .info-modal-body ol,
+    html[data-mode="System Chart Extraction"] .info-modal-body ol,
+    html[data-mode="Hypotheses Generation"] .info-modal-body ol {
+      margin: 0;
+      padding-left: 1.5rem;
+    }
+
+    html[data-mode="QA"] .info-modal-body li,
+    html[data-mode="System Chart Extraction"] .info-modal-body li,
+    html[data-mode="Hypotheses Generation"] .info-modal-body li {
+      margin-bottom: 0.3rem;
+    }
+
+    html[data-mode="QA"] .info-modal-body strong,
+    html[data-mode="System Chart Extraction"] .info-modal-body strong,
+    html[data-mode="Hypotheses Generation"] .info-modal-body strong {
+      color: var(--text);
+      font-weight: 600;
+    }
+
+    @media (max-width: 640px) {
+      html[data-mode="QA"] .app-header,
+      html[data-mode="System Chart Extraction"] .app-header,
+      html[data-mode="Hypotheses Generation"] .app-header {
+        padding-right: 0;
+      }
+
+      html[data-mode="QA"] #infoOpenBtn,
+      html[data-mode="System Chart Extraction"] #infoOpenBtn,
+      html[data-mode="Hypotheses Generation"] #infoOpenBtn {
+        position: static;
+        margin-bottom: 0.9rem;
+      }
+    }
+
   </style>
 </head>
 <body>
@@ -2862,6 +3052,7 @@
   <div id="app">
     <!-- Header — PlotExtract-style brand/hero -->
     <header class="app-header">
+      <button type="button" id="infoOpenBtn" aria-haspopup="dialog">Information</button>
       <div class="brand">
         <span id="appTitle">Chatbot</span>
       </div>
@@ -3088,30 +3279,149 @@
     <footer class="mode-footer footer" id="qaFooter">
       <p>
         This tool lets you upload research papers and ask questions about them; answers are grounded
-        in the content of your uploaded documents. It works best with clear, specific questions about
-        machine-readable PDFs. Because answers are generated by LLMs, they can contain mistakes or
-        omissions and are not guaranteed to be correct. Always verify important information against
-        the original papers before using it for analysis, reporting, or decision-making.
+        in the content of your uploaded documents. Always review and verify results before using them
+        for analysis, reporting, or decision-making.
       </p>
     </footer>
     <footer class="mode-footer footer" id="systemChartFooter">
       <p>
         This tool automatically extracts materials system charts, the relationships linking
-        processing, structure, and properties, from uploaded research papers. Because extraction relies on LLMs, results can contain mistakes, omissions, or formatting issues and are not guaranteed to be correct. Always review and verify the extracted
-        charts against the original papers before using them for analysis or reporting.
+        processing, structure, and properties, from uploaded research papers. Always review and verify
+        results before using them for analysis, reporting, or decision-making.
       </p>
     </footer>
     <footer class="mode-footer footer" id="hypothesesFooter">
       <p>
-        This tool generates materials design hypotheses by synergistically combining materials system charts, guided by design goals. Generated hypotheses are produced by LLMs and are not guaranteed to be
-        scientifically valid or novel, so please take the
-        results with caution. Always apply domain expertise and verify against the literature before acting
-        on any hypothesis.
+        This tool generates materials design hypotheses by combining mechanisms drawn from different
+        materials system charts, creating interdependence between them under a specified design goal.
+        Always review and verify results before using them for analysis, reporting, or decision-making.
       </p>
     </footer>
 
   </div>
 
+  <!-- ============================================================
+       Per-mode Information modal (QA / System Chart Extraction /
+       Hypotheses Generation). Kept at body level so it is never
+       clipped by #app, and shown only for the three owned modes.
+       ============================================================ -->
+  <div id="infoModalBackdrop">
+    <div class="info-modal" role="dialog" aria-modal="true" aria-labelledby="infoModalTitle">
+      <div class="info-modal-head">
+        <h2 id="infoModalTitle">Information</h2>
+        <button type="button" id="infoCloseBtn">Close</button>
+      </div>
+
+      <div class="info-modal-body" id="infoBodyQA">
+        <h3>What this tool does</h3>
+        <p>
+          QA turns your uploaded papers into a searchable database, finds the passages most
+          relevant to your question, and answers you.
+        </p>
+
+        <h3>When to use it</h3>
+        <p>
+          Use it when you want answers grounded in a specific set of documents.
+        </p>
+
+        <h3>Instructions</h3>
+        <ol>
+          <li>Enter an OpenAI or Google Gemini API key, choose a model, and click Confirm.</li>
+          <li>Name your database, upload your PDF, TXT, or image files, and click Upload. For more than 1000 files, upload a ZIP instead.</li>
+          <li>Wait for the upload and embedding progress to finish.</li>
+          <li>Select one or more databases to search — hold Ctrl/Cmd to select several.</li>
+          <li>Type your question and click Ask.</li>
+        </ol>
+      </div>
+
+      <div class="info-modal-body" id="infoBodyChart">
+        <h3>What this tool does</h3>
+        <p>
+          System Chart Extraction reads each uploaded paper in full and extracts its materials
+          system chart — the reported links between processing, structure, properties, and
+          performance — along with the supporting citations from that paper.
+        </p>
+
+        <h3>When to use it</h3>
+        <p>
+          Use it when you want structured system charts across a set of papers,
+          or when you need <strong>system_charts.txt</strong> files as input for Hypotheses Generation.
+        </p>
+
+        <h3>Instructions</h3>
+        <ol>
+          <li>Enter an OpenAI or Google Gemini API key, choose a model, and click Confirm.</li>
+          <li>Name your database, upload the papers you want to analyze, and click Upload.</li>
+          <li>Select the database(s) to process. Tick <strong>Enable visualization</strong> if you also want the extracted charts drawn.</li>
+          <li>Click Confirm and wait — papers are processed one at a time and progress is shown.</li>
+          <li>Download the ZIP. It contains <strong>system_charts.txt</strong> (the charts) and <strong>all_details.txt</strong> (the full analysis).</li>
+          <li>Optionally use <strong>Continue System Chart Extraction Conversations</strong> to ask follow-up questions about an individual paper.</li>
+        </ol>
+      </div>
+
+      <div class="info-modal-body" id="infoBodyHypotheses">
+        <h3>What this tool does</h3>
+        <p>
+          Hypotheses Generation combines mechanisms drawn from different materials system charts
+          and proposes design hypotheses that make those mechanisms interdependent under the
+          design goal you specify.
+        </p>
+
+        <h3>When to use it</h3>
+        <p>
+          Use it once you have system charts from at least two papers and a materials design goal
+          in mind — for example, when looking for non-obvious ways to combine mechanisms that were
+          reported in separate studies.
+        </p>
+
+        <h3>Instructions</h3>
+        <ol>
+          <li>Enter an OpenAI or Google Gemini API key, choose a model, and click Confirm.</li>
+          <li>Upload one or more <strong>system_charts.txt</strong> files from System Chart Extraction — not all_details.txt. Together they must contain at least two system charts.</li>
+          <li>Describe your materials design goals in plain language, then click <strong>Analyze design goals</strong>.</li>
+          <li>Review and edit the two suggested design properties, and set the number of iterations (1–100).</li>
+          <li>Click Confirm and wait, then download the ZIP containing <strong>hypotheses.txt</strong>.</li>
+          <li>Optionally use <strong>Continue Hypothesis Analysis</strong> to paste a hypothesis plus paper content and explore it further.</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Information modal for QA / System Chart Extraction / Hypotheses Generation.
+    // Self-contained: the correct panel is picked by CSS from html[data-mode].
+    (function () {
+      document.addEventListener('DOMContentLoaded', function () {
+        const openBtn = document.getElementById('infoOpenBtn');
+        const closeBtn = document.getElementById('infoCloseBtn');
+        const backdrop = document.getElementById('infoModalBackdrop');
+        if (!openBtn || !closeBtn || !backdrop) return;
+
+        function openInfo() {
+          backdrop.classList.add('is-open');
+          closeBtn.focus();
+        }
+
+        function closeInfo() {
+          backdrop.classList.remove('is-open');
+          openBtn.focus();
+        }
+
+        openBtn.addEventListener('click', openInfo);
+        closeBtn.addEventListener('click', closeInfo);
+
+        // Click outside the panel closes it.
+        backdrop.addEventListener('click', function (event) {
+          if (event.target === backdrop) closeInfo();
+        });
+
+        document.addEventListener('keydown', function (event) {
+          if (event.key === 'Escape' && backdrop.classList.contains('is-open')) closeInfo();
+        });
+      });
+    })();
+  </script>
+
   <button id="adminFab" type="button" title="Owner admin controls">Admin</button>
   <div id="adminPanel" role="dialog" aria-modal="false" aria-label="Admin panel">
     <h4>Owner Admin</h4>

prompts.py

@@ -217,6 +217,12 @@ def create_design_goals_analysis_prompt(description):
     ideal properties, constraints, target application). This prompt asks the model to
     distill that into exactly two distinct target properties/mechanisms that the
     hypothesis generation should target simultaneously.
+
+    Each returned property also carries the material system and operating environment
+    when the researcher states them. These two strings are the only channel from the
+    researcher's description into create_hypotheses_generation_prompt(), so context
+    dropped here (e.g. "high entropy alloys", "at cryogenic temperature") is lost for
+    the rest of the pipeline.
     """
     return f'''You are assisting a materials scientist who is setting up a materials-design hypothesis generation task. The task requires exactly TWO target material properties (or performance goals) that the design must achieve simultaneously, since the tool works by finding synergistic combinations between two objectives that are often in tension (a trade-off).
 
@@ -228,10 +234,15 @@ From this description, identify the TWO most important, distinct target material
 
 Rules:
 1. Return exactly two properties.
-2. Each property must be a concise noun phrase (typically 2-6 words), e.g. "High tensile strength", "Good ductility", "High ionic conductivity", "Low thermal expansion".
-3. The two properties must be distinct and non-overlapping. When the description implies a trade-off (e.g. strength vs. ductility), the two properties should reflect the two competing sides.
-4. Prefer properties explicitly mentioned by the researcher. Only infer a property if the description clearly implies it.
-5. Do not add explanations, units, target values, material names, or any extra text.
+2. Each property must be a concise noun phrase naming the target property (typically 2-6 words), e.g. "High tensile strength", "Good ductility", "High ionic conductivity", "Low thermal expansion".
+3. If the researcher names a material system (e.g. "high entropy alloys", "solid electrolytes") and/or an operating environment or condition (e.g. "under cryogenic temperature", "at high pressure", "in seawater"), append that context to BOTH properties so each one reads as a complete design target. For example, "For high entropy alloys, I want both high strength and good ductility under cryogenic temperature" becomes:
+   Property 1: High strength in high entropy alloys under cryogenic temperature
+   Property 2: Good ductility in high entropy alloys under cryogenic temperature
+   Both properties must carry the SAME material system and environment; only the property itself differs. Keep each line under about 15 words.
+4. If the researcher names neither a material system nor an operating environment, return the bare property phrase alone.
+5. The two properties must be distinct and non-overlapping. When the description implies a trade-off (e.g. strength vs. ductility), the two properties should reflect the two competing sides.
+6. Prefer properties explicitly mentioned by the researcher. Only infer a property if the description clearly implies it.
+7. Do not add explanations, units, target values, or any text beyond the property, material system, and operating environment.
 
 Respond STRICTLY in the following format and output nothing else:
 Property 1: <first property>