src/ui/panels/VectorMathPanel.js

// Vector Arithmetic panel (extracted from Sidebar.js in H4 4.6).
// A − B + C term inputs + Top-K, firing ctx.onCalculate; results land in #math-results.

/** @typedef {import('../types.js').PanelContext} PanelContext */

/**
 * Build the Vector Arithmetic card and wire the CALCULATE button.
 * @param {PanelContext} ctx
 * @returns {HTMLElement}
 */
export function buildVectorMathPanel(ctx) {
    const arithmetic = document.createElement('div');
    arithmetic.className = 'section-card';
    arithmetic.innerHTML = `
        <div class="section-title" style="color: var(--color-brand-secondary);" title="Algebraic operations between conceptual vectors in the latent space">🧮 Vector Arithmetic (A − B + C)</div>
        <div style="display:flex; flex-direction:column; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm);">
            <input id="math-a" class="input-field" placeholder="Base Term A (+) e.g. King" title="Positive base term or concept">
            <input id="math-b" class="input-field" placeholder="Subtract Term B (-) e.g. Man" title="Concept to subtract from the base term">
            <input id="math-c" class="input-field" placeholder="Add Term C (+) e.g. Woman" title="Concept to add to the relation">
            <div style="display:flex; align-items:center; gap: var(--spacing-sm);">
                 <span style="color: var(--color-neutral-400); font-size: var(--font-size-small);" title="Number of closest results to retrieve">Results (Top K):</span>
                 <input id="math-top-k" class="input-field" type="number" min="1" max="20" value="5" style="max-width: 60px; text-align: center; padding: var(--spacing-xs);" title="Number of resulting words or vectors to show (1 to 20)">
            </div>
        </div>
        <button id="btn-calc" class="btn btn-accent" style="width:100%; font-weight: bold;" title="Run the vector algebraic operation and search for resulting concepts">⚡ CALCULATE CONCEPT</button>
        <ul id="math-results" class="list-container" style="margin-top: var(--spacing-sm); max-height: 150px; overflow-y: auto;"></ul>
    `;

    setTimeout(() => {
        const btnCalc = document.getElementById('btn-calc');
        if (btnCalc) {
            btnCalc.onclick = () => {
                const a = document.getElementById('math-a').value.trim();
                const b = document.getElementById('math-b').value.trim();
                const c = document.getElementById('math-c').value.trim();
                const topK = parseInt(document.getElementById('math-top-k').value) || 5;
                if (a && b && c) ctx.onCalculate(a, b, c, topK);
            };
        }
    }, 0);

    return arithmetic;
}