Upload static/index.html with huggingface_hub

static/index.html

@@ -437,7 +437,344 @@
     .input-group { flex-direction: column; }
     .btn { width: 100%; }
   }
+
+  /* ── Graph panel ── */
+  #graph-svg-wrap {
+    width: 100%;
+    height: 500px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 12px;
+  }
+  #graph-svg-wrap svg { width: 100%; height: 100%; display: block; }
+  #graph-tooltip {
+    position: fixed;
+    background: var(--surface3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 5px 10px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--text);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.12s;
+    z-index: 200;
+  }
+
+  /* ── Recipe Lab ── */
+  .basket-area {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 14px;
+    min-height: 54px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  .basket-empty { color: var(--muted); font-size: 13px; }
+  .basket-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: var(--surface3);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 4px 10px 4px 12px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--text);
+  }
+  .basket-chip-remove {
+    background: none;
+    border: none;
+    color: var(--muted);
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 13px;
+    line-height: 1;
+    transition: color 0.1s;
+  }
+  .basket-chip-remove:hover { color: var(--danger); }
+
+  .coherence-box {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+  .coherence-score-num {
+    font-family: var(--mono);
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1;
+    transition: color 0.3s;
+  }
+  .coherence-label {
+    font-size: 12px;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    margin-top: 4px;
+    font-weight: 600;
+  }
+  .coherence-details { flex: 1; min-width: 200px; }
+  details.pair-table summary {
+    font-size: 12px;
+    color: var(--muted);
+    cursor: pointer;
+    user-select: none;
+    margin-bottom: 8px;
+  }
+  details.pair-table summary:hover { color: var(--text); }
+  .pair-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 4px 12px;
+    font-size: 12px;
+    font-family: var(--mono);
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .pair-grid .ph { color: var(--muted); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
+  .pair-grid .pv { color: var(--text); padding: 2px 0; }
+  .pair-grid .ps { padding: 2px 0; }
+
+  .recipe-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+
+  .cuisine-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+  .cuisine-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .cuisine-bar-label {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--text);
+    width: 130px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cuisine-bar-track {
+    flex: 1;
+    height: 8px;
+    background: var(--surface3);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .cuisine-bar-fill {
+    height: 100%;
+    background: var(--accent2);
+    border-radius: 4px;
+    transition: width 0.5s ease;
+  }
+  .cuisine-bar-pct {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    width: 38px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+  .recipe-result-card {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 16px 18px;
+    margin-top: 8px;
+  }
+  .recipe-result-card .card-title {
+    font-family: var(--mono);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: 6px;
+  }
+  .recipe-result-card .card-reason {
+    font-size: 13px;
+    color: var(--text);
+    line-height: 1.6;
+  }
+
+  /* ── Graph ── */
+  .graph-wrap {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    margin-bottom: 20px;
+  }
+  .graph-svg {
+    width: 100%;
+    height: 500px;
+    display: block;
+  }
+  .graph-tooltip {
+    position: absolute;
+    background: var(--surface3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 200;
+    font-family: var(--mono);
+  }
+  .graph-legend {
+    display: flex;
+    gap: 16px;
+    padding: 10px 14px;
+    font-size: 11px;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+  }
+  .graph-legend span { display: flex; align-items: center; gap: 5px; }
+  .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+
+  /* ── Recipe Lab ── */
+  .basket-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 20px;
+    min-height: 36px;
+  }
+  .basket-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    border-radius: 20px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--text);
+  }
+  .basket-chip .remove {
+    cursor: pointer;
+    color: var(--muted);
+    font-size: 14px;
+    line-height: 1;
+    padding: 0 2px;
+  }
+  .basket-chip .remove:hover { color: var(--danger); }
+  .coherence-box {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 16px 20px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+  .coherence-number {
+    font-size: 32px;
+    font-weight: 700;
+    font-family: var(--mono);
+    line-height: 1;
+  }
+  .coherence-number.green { color: var(--accent2); }
+  .coherence-number.amber { color: var(--accent); }
+  .coherence-number.red { color: var(--danger); }
+  .coherence-label {
+    font-size: 12px;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+  }
+  .coherence-detail {
+    font-size: 12px;
+    color: var(--muted);
+    margin-top: 4px;
+  }
+  .recipe-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+  .cuisine-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+  }
+  .cuisine-bar-label {
+    width: 140px;
+    font-size: 12px;
+    color: var(--muted);
+    text-align: right;
+    flex-shrink: 0;
+  }
+  .cuisine-bar-track {
+    flex: 1;
+    height: 6px;
+    background: var(--surface3);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .cuisine-bar-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: var(--accent2);
+    transition: width 0.5s ease;
+  }
+  .cuisine-bar-score {
+    width: 50px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    text-align: right;
+    flex-shrink: 0;
+  }
+  .pairwise-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    margin-top: 8px;
+  }
+  .pairwise-table th, .pairwise-table td {
+    padding: 6px 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+  }
+  .pairwise-table th {
+    color: var(--muted);
+    font-weight: 500;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .pairwise-table td { font-family: var(--mono); }
+
 </style>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
 
@@ -462,6 +799,12 @@
   <button class="tab" onclick="switchTab('modes')" id="tab-modes">
     <span class="tab-icon">🎨</span>Flavour Profile
   </button>
+  <button class="tab" onclick="switchTab('graph')" id="tab-graph">
+    <span class="tab-icon">🕸️</span>Ingredient Graph
+  </button>
+  <button class="tab" onclick="switchTab('recipe')" id="tab-recipe">
+    <span class="tab-icon">🧪</span>Recipe Lab
+  </button>
 </nav>
 
 <main>
@@ -612,6 +955,84 @@
     </div>
   </div>
 
+  <!-- ═══════════════════ PANEL 4: INGREDIENT GRAPH ═══════════════════ -->
+  <div class="panel" id="panel-graph">
+    <div class="panel-title">Ingredient Graph</div>
+    <div class="panel-desc">
+      Force-directed neighbourhood map. The centre ingredient pulls its closest companions;
+      cross-edges show which neighbours are also similar to each other — revealing natural clusters.
+      Click any node to re-root the graph there.
+    </div>
+
+    <div class="input-group">
+      <div class="input-wrap" style="flex:2">
+        <input type="text" id="graph-input" placeholder="Type an ingredient…" autocomplete="off" spellcheck="false">
+        <div class="autocomplete-list" id="graph-ac"></div>
+      </div>
+      <select id="graph-model" style="max-width:160px">
+        <option value="core" selected>Core (blend)</option>
+        <option value="cooc">Cooc (recipe)</option>
+        <option value="chem">Chem (chemistry)</option>
+      </select>
+      <button class="btn" onclick="runGraph()">Map →</button>
+    </div>
+
+    <div class="chip-row">
+      <span style="font-size:11px;color:var(--muted);align-self:center">Try:</span>
+      <span class="chip" onclick="setAndRun('graph', 'truffle')">truffle</span>
+      <span class="chip" onclick="setAndRun('graph', 'chocolate')">chocolate</span>
+      <span class="chip" onclick="setAndRun('graph', 'kimchi')">kimchi</span>
+      <span class="chip" onclick="setAndRun('graph', 'miso')">miso</span>
+      <span class="chip" onclick="setAndRun('graph', 'vanilla')">vanilla</span>
+      <span class="chip" onclick="setAndRun('graph', 'saffron')">saffron</span>
+    </div>
+
+    <div class="results-area" id="graph-results">
+      <div class="state-box">
+        <div class="icon">🕸️</div>
+        Enter an ingredient to explore its flavour neighbourhood
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══════════════════ PANEL 5: RECIPE LAB ═══════════════════ -->
+  <div class="panel" id="panel-recipe">
+    <div class="panel-title">Recipe Lab</div>
+    <div class="panel-desc">
+      Build a basket of ingredients and analyse coherence, get suggestions,
+      discover cuisine affinity, or find a surprising chemistry-compatible addition.
+    </div>
+
+    <div class="input-group">
+      <div class="input-wrap" style="flex:2">
+        <input type="text" id="recipe-input" placeholder="Add an ingredient…" autocomplete="off" spellcheck="false">
+        <div class="autocomplete-list" id="recipe-ac"></div>
+      </div>
+      <button class="btn" onclick="addToRecipeBasket()">Add</button>
+    </div>
+
+    <div class="basket-row" id="recipe-basket"></div>
+
+    <div class="coherence-box" id="recipe-coherence" style="display:none">
+      <div>
+        <div class="coherence-number" id="coherence-num">—</div>
+        <div class="coherence-label">Coherence</div>
+      </div>
+      <div style="flex:1;min-width:200px">
+        <div id="coherence-label" style="font-size:14px;font-weight:600;margin-bottom:4px">—</div>
+        <div class="coherence-detail" id="coherence-detail">Add ingredients to see how well they work together</div>
+      </div>
+    </div>
+
+    <div class="recipe-actions" id="recipe-actions" style="display:none">
+      <button class="btn btn-secondary" onclick="recipeSuggest()">💡 Suggest next</button>
+      <button class="btn btn-secondary" onclick="recipeAffinity()">🌍 Cuisine affinity</button>
+      <button class="btn btn-secondary" onclick="recipeSurprise()">🎲 Surprise me</button>
+    </div>
+
+    <div class="results-area" id="recipe-results"></div>
+  </div>
+
 </main>
 
 <script>
@@ -845,6 +1266,300 @@ document.addEventListener('keydown', e => {
     else if (activeTab === 'modes') runModes();
   }
 });
+
+// ── GRAPH ─────────────────────────────────────────────────────────────────────
+function runGraph() {
+  const ing = document.getElementById('graph-input').value.trim();
+  if (!ing) return;
+  document.getElementById('graph-ac').classList.remove('open');
+  const variant = document.getElementById('graph-model').value;
+  loading('graph-results');
+  fetch(`${API}/api/graph?ingredient=${encodeURIComponent(ing)}&k=15&model_variant=${variant}`)
+    .then(r => r.json())
+    .then(data => renderGraph(data))
+    .catch(e => error('graph-results', e.message));
+}
+
+function renderGraph(data) {
+  const container = document.getElementById('graph-results');
+  container.innerHTML = `
+    <div class="graph-wrap">
+      <svg class="graph-svg" id="graph-svg"></svg>
+      <div class="graph-legend">
+        <span><span class="legend-dot" style="background:var(--accent)"></span> centre</span>
+        <span><span class="legend-dot" style="background:var(--accent2)"></span> neighbour</span>
+        <span><span class="legend-dot" style="background:var(--border)"></span> cross-edge</span>
+      </div>
+    </div>
+    <div class="graph-tooltip" id="graph-tooltip"></div>
+  `;
+
+  const svg = d3.select("#graph-svg");
+  const width = container.clientWidth;
+  const height = 500;
+  svg.attr("viewBox", `0 0 ${width} ${height}`);
+
+  const nodes = data.nodes.map(n => ({...n}));
+  const links = data.edges.map(e => ({...e}));
+
+  const simulation = d3.forceSimulation(nodes)
+    .force("link", d3.forceLink(links).id(d => d.id).distance(d => 120 - d.weight * 60))
+    .force("charge", d3.forceManyBody().strength(-300))
+    .force("center", d3.forceCenter(width / 2, height / 2))
+    .force("collide", d3.forceCollide().radius(30));
+
+  const g = svg.append("g");
+
+  // Zoom
+  svg.call(d3.zoom().on("zoom", (e) => g.attr("transform", e.transform)));
+
+  // Links
+  const link = g.append("g")
+    .selectAll("line")
+    .data(links)
+    .join("line")
+    .attr("stroke", d => d.source === data.center || d.source.id === data.center ? "var(--accent)" : "var(--border)")
+    .attr("stroke-opacity", d => d.source === data.center || d.source.id === data.center ? 0.6 : 0.3)
+    .attr("stroke-width", d => Math.max(1, d.weight * 3));
+
+  // Nodes
+  const node = g.append("g")
+    .selectAll("g")
+    .data(nodes)
+    .join("g")
+    .attr("cursor", "pointer")
+    .call(d3.drag()
+      .on("start", (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
+      .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; })
+      .on("end", (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }));
+
+  node.append("circle")
+    .attr("r", d => d.is_center ? 18 : 8 + d.score * 8)
+    .attr("fill", d => d.is_center ? "var(--accent)" : d3.interpolateRgb("var(--muted)", "var(--accent2)")(d.score))
+    .attr("stroke", d => d.is_center ? "var(--accent2)" : "var(--surface3)")
+    .attr("stroke-width", d => d.is_center ? 3 : 1.5);
+
+  node.append("text")
+    .text(d => d.id.replace(/_/g, ' '))
+    .attr("x", 0)
+    .attr("y", d => d.is_center ? 28 : 18)
+    .attr("text-anchor", "middle")
+    .attr("fill", "var(--text)")
+    .attr("font-size", d => d.is_center ? "13px" : "10px")
+    .attr("font-family", "var(--mono)")
+    .attr("font-weight", d => d.is_center ? "600" : "400");
+
+  // Tooltip
+  const tooltip = d3.select("#graph-tooltip");
+  node.on("mouseover", (e, d) => {
+    tooltip.style("opacity", 1)
+      .html(`<strong>${d.id}</strong><br>score: ${d.score.toFixed(3)}${d.is_center ? '<br>(centre)' : ''}`)
+      .style("left", (e.pageX + 10) + "px")
+      .style("top", (e.pageY - 10) + "px");
+  }).on("mouseout", () => tooltip.style("opacity", 0));
+
+  // Click to re-root
+  node.on("click", (e, d) => {
+    if (!d.is_center) {
+      document.getElementById('graph-input').value = d.id;
+      runGraph();
+    }
+  });
+
+  simulation.on("tick", () => {
+    link
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
+    node.attr("transform", d => `translate(${d.x},${d.y})`);
+  });
+}
+
+// ── RECIPE LAB ────────────────────────────────────────────────────────────────
+let recipeBasket = [];
+let recipeDebounce = null;
+
+function addToRecipeBasket() {
+  const input = document.getElementById('recipe-input');
+  const name = input.value.trim();
+  if (!name) return;
+  if (!ingredients_list.includes(name)) {
+    error('recipe-results', `"${name}" is not in the vocabulary.`);
+    return;
+  }
+  if (recipeBasket.includes(name)) return;
+  if (recipeBasket.length >= 12) {
+    error('recipe-results', "Basket is full (max 12 ingredients).");
+    return;
+  }
+  recipeBasket.push(name);
+  input.value = '';
+  document.getElementById('recipe-ac').classList.remove('open');
+  renderRecipeBasket();
+  debouncedRecipeScore();
+}
+
+function removeFromRecipeBasket(name) {
+  recipeBasket = recipeBasket.filter(i => i !== name);
+  renderRecipeBasket();
+  debouncedRecipeScore();
+}
+
+function renderRecipeBasket() {
+  const el = document.getElementById('recipe-basket');
+  if (recipeBasket.length === 0) {
+    el.innerHTML = '<span style="color:var(--muted);font-size:12px">No ingredients yet. Type above to add.</span>';
+    document.getElementById('recipe-coherence').style.display = 'none';
+    document.getElementById('recipe-actions').style.display = 'none';
+    document.getElementById('recipe-results').innerHTML = '';
+    return;
+  }
+  el.innerHTML = recipeBasket.map(name =>
+    `<span class="basket-chip">${name}<span class="remove" onclick="removeFromRecipeBasket('${name}')">&times;</span></span>`
+  ).join('');
+  document.getElementById('recipe-coherence').style.display = 'flex';
+  if (recipeBasket.length >= 2) {
+    document.getElementById('recipe-actions').style.display = 'flex';
+  } else {
+    document.getElementById('recipe-actions').style.display = 'none';
+  }
+}
+
+function debouncedRecipeScore() {
+  if (recipeDebounce) clearTimeout(recipeDebounce);
+  recipeDebounce = setTimeout(() => recipeScore(), 300);
+}
+
+async function recipeScore() {
+  if (recipeBasket.length < 2) {
+    document.getElementById('coherence-num').textContent = '—';
+    document.getElementById('coherence-num').className = 'coherence-number';
+    document.getElementById('coherence-label').textContent = '—';
+    document.getElementById('coherence-detail').textContent = 'Add at least 2 ingredients to score coherence';
+    return;
+  }
+  try {
+    const res = await fetch(`${API}/api/recipe`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ingredients: recipeBasket, action: 'score'})
+    });
+    const data = await res.json();
+    const num = document.getElementById('coherence-num');
+    num.textContent = data.score.toFixed(3);
+    num.className = 'coherence-number ' + (data.label === 'coherent' ? 'green' : data.label === 'mixed' ? 'amber' : 'red');
+    document.getElementById('coherence-label').textContent = data.label;
+    document.getElementById('coherence-detail').textContent = `${data.pairwise.length} pairs scored`;
+  } catch(e) {
+    console.error('score error', e);
+  }
+}
+
+async function recipeSuggest() {
+  const resArea = document.getElementById('recipe-results');
+  loading(resArea.id);
+  try {
+    const res = await fetch(`${API}/api/recipe`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ingredients: recipeBasket, action: 'suggest'})
+    });
+    const data = await res.json();
+    resArea.innerHTML = `
+      <div class="results-title">Suggested addition</div>
+      <div class="result-item" style="cursor:pointer" onclick="recipeBasketAdd('${data.suggestion}')">
+        <span class="result-name">${data.suggestion}</span>
+        <span class="result-score">${data.score.toFixed(3)}</span>
+        <button class="result-use-btn">add to basket →</button>
+      </div>
+      <div style="margin-top:8px;font-size:12px;color:var(--muted)">${data.reason}</div>
+    `;
+  } catch(e) {
+    error('recipe-results', e.message);
+  }
+}
+
+async function recipeAffinity() {
+  const resArea = document.getElementById('recipe-results');
+  loading(resArea.id);
+  try {
+    const res = await fetch(`${API}/api/recipe`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ingredients: recipeBasket, action: 'affinity'})
+    });
+    const data = await res.json();
+    const max = data.affinities[0]?.score ?? 1;
+    resArea.innerHTML = `
+      <div class="results-title">Cuisine affinity</div>
+      ${data.affinities.map(a => `
+        <div class="cuisine-bar-row">
+          <span class="cuisine-bar-label">${a.cuisine.replace(/_/g,' ')}</span>
+          <div class="cuisine-bar-track">
+            <div class="cuisine-bar-fill" style="width:${Math.round((a.score/max)*100)}%"></div>
+          </div>
+          <span class="cuisine-bar-score">${a.score.toFixed(3)}</span>
+        </div>
+      `).join('')}
+    `;
+  } catch(e) {
+    error('recipe-results', e.message);
+  }
+}
+
+async function recipeSurprise() {
+  const resArea = document.getElementById('recipe-results');
+  loading(resArea.id);
+  try {
+    const res = await fetch(`${API}/api/recipe`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ingredients: recipeBasket, action: 'surprise'})
+    });
+    const data = await res.json();
+    resArea.innerHTML = `
+      <div class="results-title">Surprise ingredient</div>
+      <div class="result-item" style="cursor:pointer" onclick="recipeBasketAdd('${data.suggestion}')">
+        <span class="result-name">${data.suggestion}</span>
+        <span class="result-score">chem ${data.chemistry_score.toFixed(3)}</span>
+        <button class="result-use-btn">add to basket →</button>
+      </div>
+      <div style="margin-top:8px;font-size:12px;color:var(--muted)">
+        Core similarity: ${data.core_score.toFixed(3)} (low recipe-context match, high chemistry compatibility)
+      </div>
+    `;
+  } catch(e) {
+    error('recipe-results', e.message);
+  }
+}
+
+function recipeBasketAdd(name) {
+  if (recipeBasket.includes(name) || recipeBasket.length >= 12) return;
+  recipeBasket.push(name);
+  renderRecipeBasket();
+  debouncedRecipeScore();
+}
+
+// ── Wire up autocomplete for new inputs ───────────────────────────────────────
+setupAutocomplete('graph-input', 'graph-ac', () => runGraph());
+setupAutocomplete('recipe-input', 'recipe-ac', () => addToRecipeBasket());
+
+// ── Update setAndRun for new tabs ─────────────────────────────────────────────
+const _origSetAndRun = setAndRun;
+setAndRun = function(panel, ingredient, cuisine) {
+  if (panel === 'graph') {
+    switchTab('graph');
+    document.getElementById('graph-input').value = ingredient;
+    runGraph();
+  } else if (panel === 'recipe') {
+    switchTab('recipe');
+    recipeBasketAdd(ingredient);
+  } else {
+    _origSetAndRun(panel, ingredient, cuisine);
+  }
+};
+
 </script>
 </body>
 </html>