From e39f08a35e0da6c842c239cdaf65c33b981cd813 Mon Sep 17 00:00:00 2001
From: Maria Hovhannisyan <mariahovhannisyan@Marias-MacBook-Pro-2.local>
Date: Tue, 22 Sep 2026 13:49:14 +0400
Subject: [PATCH] Fix compare-mode prompt templating preview and field notes.

Show both Prompt A and B full-prompt previews, and mark case fields that appear in only one template.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 public/app.css | 17 +++++++++++++
 public/app.js  | 65 +++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/public/app.css b/public/app.css
index 54cc9ad..4de0cd3 100644
--- a/public/app.css
+++ b/public/app.css
@@ -391,6 +391,13 @@ code {
   color: var(--Colors-Text-Body-Light);
 }
 
+.eval-field__usage {
+  margin-left: 6px;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: var(--Colors-Text-Body-Light);
+}
+
 .eval-controls-row {
   display: flex;
   flex-wrap: wrap;
@@ -743,6 +750,12 @@ select.input {
   color: var(--Colors-Text-Body-Light);
 }
 
+.eval-case-prompt-preview__prompt-label {
+  margin: var(--UI-Spacing-spacing-s, 12px) 0 4px;
+  font-weight: 600;
+  color: var(--Colors-Text-Body-Medium);
+}
+
 .eval-case-prompt-preview .eval-template-preview {
   min-height: 6rem;
   max-height: 16rem;
@@ -754,6 +767,10 @@ select.input {
   line-height: 1.5;
 }
 
+.eval-case-prompt-preview .eval-case-prompt-preview__prompt-label + .eval-template-preview {
+  margin-top: 0;
+}
+
 @media (max-width: 600px) {
   .eval-example {
     grid-template-columns: 1fr;
diff --git a/public/app.js b/public/app.js
index 1913861..102a435 100644
--- a/public/app.js
+++ b/public/app.js
@@ -151,6 +151,16 @@ function activeTemplateFields() {
   });
 }
 
+function fieldPromptUsageNote(fieldName) {
+  if (!session.compareMode || !PROMPT_TEMPLATING.dynamicFields) return '';
+  const inA = findPromptPlaceholders(promptAEl.value).includes(fieldName);
+  const inB = findPromptPlaceholders(promptBEl.value).includes(fieldName);
+  if (inA && inB) return '';
+  if (inA) return 'A only';
+  if (inB) return 'B only';
+  return '';
+}
+
 function parseTemplateParts(template) {
   const parts = [];
   const source = String(template ?? '');
@@ -637,9 +647,15 @@ function renderCases() {
               const value = field.name === 'input'
                 ? c.input
                 : (c.variables?.[field.name] ?? '');
+              const usageNote = fieldPromptUsageNote(field.name);
               return `
               <label class="eval-field">
-                <span class="body-xxsmall eval-field__label">${escapeHtml(field.label)}</span>
+                <span class="body-xxsmall eval-field__label">
+                  ${escapeHtml(field.label)}
+                  ${usageNote
+                    ? `<span class="eval-field__usage">${escapeHtml(usageNote)}</span>`
+                    : ''}
+                </span>
                 <textarea
                   class="input"
                   ${field.name === 'input'
@@ -674,7 +690,23 @@ function renderCases() {
         : '';
       const previewOpen = !hadPreviews || openPreviews.has(c.id);
       const casePreviewHtml = PROMPT_TEMPLATING.dynamicFields && PROMPT_TEMPLATING.showPreview
-        ? `
+        ? (
+          session.compareMode
+            ? `
+          <details class="eval-case-prompt-preview"${previewOpen ? ' open' : ''}>
+            <summary class="eval-case-prompt-preview__summary">
+              <span class="eval-case-prompt-preview__heading">
+                <span class="body-xsmall eval-case-prompt-preview__title">Full prompts for this case</span>
+                <span class="body-xxsmall eval-case-prompt-preview__hint">Exact text sent for Prompt A and Prompt B</span>
+              </span>
+            </summary>
+            <p class="body-xxsmall eval-case-prompt-preview__prompt-label">Prompt A</p>
+            <pre class="eval-template-preview body-small" data-case-prompt-preview="A"></pre>
+            <p class="body-xxsmall eval-case-prompt-preview__prompt-label">Prompt B</p>
+            <pre class="eval-template-preview body-small" data-case-prompt-preview="B"></pre>
+          </details>
+        `
+            : `
           <details class="eval-case-prompt-preview"${previewOpen ? ' open' : ''}>
             <summary class="eval-case-prompt-preview__summary">
               <span class="eval-case-prompt-preview__heading">
@@ -682,9 +714,10 @@ function renderCases() {
                 <span class="body-xxsmall eval-case-prompt-preview__hint">Exact text sent to the model</span>
               </span>
             </summary>
-            <pre class="eval-template-preview body-small" data-case-prompt-preview></pre>
+            <pre class="eval-template-preview body-small" data-case-prompt-preview="A"></pre>
           </details>
         `
+        )
         : '';
       return `
       <article class="eval-case" data-case-id="${escapeHtml(c.id)}">
@@ -830,13 +863,23 @@ function updateInlineCasePreviews() {
   if (!PROMPT_TEMPLATING.dynamicFields || !PROMPT_TEMPLATING.showPreview) return;
   const examples = PROMPT_TEMPLATING.allowExamples ? (session.examples ?? []) : [];
   [...casesListEl.querySelectorAll('.eval-case')].forEach((card, index) => {
-    const preview = card.querySelector('[data-case-prompt-preview]');
+    const previewA = card.querySelector('[data-case-prompt-preview="A"]')
+      ?? card.querySelector('[data-case-prompt-preview]');
+    const previewB = card.querySelector('[data-case-prompt-preview="B"]');
     const testCase = session.cases[index];
-    if (!preview || !testCase) return;
-    preview.textContent = renderPromptTemplate(promptAEl.value, testCase.input, {
-      variables: testCase.variables,
-      examples,
-    }) || '(empty prompt)';
+    if (!testCase) return;
+    if (previewA) {
+      previewA.textContent = renderPromptTemplate(promptAEl.value, testCase.input, {
+        variables: testCase.variables,
+        examples,
+      }) || '(empty prompt)';
+    }
+    if (previewB) {
+      previewB.textContent = renderPromptTemplate(promptBEl.value, testCase.input, {
+        variables: testCase.variables,
+        examples,
+      }) || '(empty prompt)';
+    }
   });
 }
 
@@ -1430,14 +1473,18 @@ async function init() {
 
 enableCompareBtn.addEventListener('click', () => {
   if (!ALLOW_COMPARE) return;
+  syncCasesFromDom();
   session.compareMode = true;
   syncCompareModeUi();
+  if (PROMPT_TEMPLATING.dynamicFields) renderCases();
   persistSessionNow();
 });
 
 disableCompareBtn.addEventListener('click', () => {
+  syncCasesFromDom();
   session.compareMode = false;
   syncCompareModeUi();
+  if (PROMPT_TEMPLATING.dynamicFields) renderCases();
   persistSessionNow();
 });