added user prompt section

index.html

@@ -510,6 +510,68 @@
       color: var(--text)
     }
 
+    /* PROMPT BOX */
+    .prompt-box {
+      background: rgba(34, 211, 238, 0.03);
+      padding: 1.2rem 1.6rem;
+      border-bottom: 1px solid var(--border);
+      border-left: 4px solid var(--accent);
+    }
+
+    .prompt-title {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: var(--accent);
+      margin-bottom: 0.8rem;
+      letter-spacing: 0.5px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .prompt-content {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      line-height: 1.6;
+      color: var(--muted);
+      white-space: pre-wrap;
+      max-height: 200px;
+      overflow-y: auto;
+      padding: 0.5rem;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 6px;
+      display: none; /* Hidden by default */
+    }
+
+    .prompt-content.visible {
+      display: block;
+    }
+
+    /* QUESTION BOX */
+    .question-box {
+      background: rgba(79, 142, 247, 0.05);
+      padding: 1.2rem 1.6rem;
+      border-bottom: 1px solid var(--border);
+      border-left: 4px solid var(--primary);
+    }
+
+    .q-title {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 0.6rem;
+      letter-spacing: 0.5px;
+    }
+
+    .q-text {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #fff;
+      line-height: 1.4;
+    }
+
     /* RESPONSES */
     .card-responses {
       display: grid
@@ -770,19 +832,19 @@
     <p style="font-size:0.85rem; color:var(--muted); margin-bottom:1rem;">The datasets below will be automatically downloaded from the repository. Select the ones you wish to compare.</p>
     <div class="up-slots" id="slots">
       <label class="sl-pick" style="display:flex; gap:0.5rem; align-items:center; cursor:pointer;">
-        <input type="checkbox" value="../benchmark/100_queries/results_gemma4-e2b_100.jsonl" checked>
+        <input type="checkbox" value="benchmark/100_queries/results_gemma4-e2b_100.jsonl" checked>
         Gemma4 2B (results_gemma4-e2b_100.jsonl)
       </label>
       <label class="sl-pick" style="display:flex; gap:0.5rem; align-items:center; cursor:pointer;">
-        <input type="checkbox" value="../benchmark/100_queries/results_gemma4-e4b_100.jsonl" checked>
+        <input type="checkbox" value="benchmark/100_queries/results_gemma4-e4b_100.jsonl" checked>
         Gemma4 4B (results_gemma4-e4b_100.jsonl)
       </label>
       <label class="sl-pick" style="display:flex; gap:0.5rem; align-items:center; cursor:pointer;">
-        <input type="checkbox" value="../benchmark/100_queries/results_qwen3-4b_100.jsonl">
+        <input type="checkbox" value="benchmark/100_queries/results_qwen3-4b_100.jsonl">
         Qwen3 4B (results_qwen3-4b_100.jsonl)
       </label>
       <label class="sl-pick" style="display:flex; gap:0.5rem; align-items:center; cursor:pointer;">
-        <input type="checkbox" value="../benchmark/100_queries/results_qwen3-8b_100.jsonl">
+        <input type="checkbox" value="benchmark/100_queries/results_qwen3-8b_100.jsonl">
         Qwen3 8B (results_qwen3-8b_100.jsonl)
       </label>
     </div>
@@ -1034,6 +1096,14 @@
       updateProgress();
     }
     function toggleDiff(ci) { diffMode[ci] = !diffMode[ci]; updateCaseDOM(ci); }
+    function togglePrompt(ci) {
+      const el = document.querySelector(`#case-${ci} .prompt-content`);
+      const btn = document.querySelector(`#case-${ci} .prompt-toggle-btn`);
+      if (el) {
+        el.classList.toggle('visible');
+        btn.textContent = el.classList.contains('visible') ? 'Hide Full Prompt' : 'View Full Prompt';
+      }
+    }
 
     function getDiff(txtA, txtB) {
       const sA = txtA.split(/(?<=[.!?])\s+/); const sB = txtB.split(/(?<=[.!?])\s+/);
@@ -1047,7 +1117,8 @@
       const cau = (p.match(/Penyebab:\s*([\s\S]+?)(?=\nEfek:|$)/) || [])[1]?.trim() || '';
       const eff = (p.match(/Efek:\s*([\s\S]+?)(?=\nRekomendasi FDT:|$)/) || [])[1]?.trim() || '';
       const rec = (p.match(/Rekomendasi FDT:\s*([\s\S]+?)(?=\n\nPERTANYAAN:|$)/) || [])[1]?.trim() || '';
-      return { ind, ver, cau, eff, rec };
+      const que = (p.match(/PERTANYAAN:\s*([\s\S]+?)(?=\n\nANALISA|$)/) || [])[1]?.trim() || '';
+      return { ind, ver, cau, eff, rec, que };
     }
 
     function esc(s) { return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') }
@@ -1125,6 +1196,19 @@
       ${st.status === 'flagged' ? `<input type="text" class="flag-reason" style="display:block;width:100%;margin-bottom:0.5rem" placeholder="Why is this case flagged?" value="${esc(st.flag)}" oninput="setFlagReason(${ci},this.value)">` : ''}
     </div>
     
+    <div class="prompt-box">
+      <div class="prompt-title">
+        <span>Model Context & Prompting</span>
+        <button class="btn-small prompt-toggle-btn" onclick="togglePrompt(${ci})">View Full Prompt</button>
+      </div>
+      <div class="prompt-content">${esc(c.prompt)}</div>
+    </div>
+
+    <div class="question-box">
+      <div class="q-title">User Question / Scenario</div>
+      <div class="q-text">"${esc(fm.que)}"</div>
+    </div>
+    
     <div class="gt-box">
       <div class="gt-title">Ground Truth (Expected Context)</div>
       <div class="gt-grid">