diff --git a/css/style.css b/css/style.css
index 12e76f2..2426491 100644
--- a/css/style.css
+++ b/css/style.css
@@ -80,6 +80,8 @@ body {
 
 /* ===== Panel Header ===== */
 .panel-header {
+  position: relative;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -97,6 +99,23 @@ body {
   letter-spacing: 0.05em;
 }
 
+/* ===== Panel Model Selector ===== */
+.panel-model-selector {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.panel-header .model-dropdown {
+  top: 100%;
+  bottom: auto;
+  margin-top: 4px;
+  margin-bottom: 0;
+  z-index: 200;
+}
+
 /* ===== Panel Footer ===== */
 .panel-footer {
   display: flex;
@@ -357,12 +376,19 @@ body {
   color: oklch(0.55 0.005 260 / 0.7);
 }
 
+.textarea-wrap textarea.readonly {
+  background: var(--muted);
+  cursor: default;
+  opacity: 0.8;
+}
 
 /* ===== Compare Toggle ===== */
 .compare-toggle {
   display: flex;
   justify-content: center;
+  gap: 12px;
   padding: 4px 0;
+  flex-wrap: wrap;
 }
 
 .compare-btn {
@@ -421,13 +447,26 @@ body {
   border: 1px solid var(--border);
 }
 
-.diff-summary-model {
+.diff-summary-models {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.diff-summary-model {
+  display: flex;
+  align-items: center;
   gap: 8px;
   position: relative;
-  flex-wrap: wrap;
+}
+
+.model-label {
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--muted-foreground);
+  font-weight: 500;
 }
 
 .diff-summary-hero {
@@ -437,16 +476,36 @@ body {
 }
 
 .diff-hero-number {
-  font-size: 32px;
+  font-size: 18px;
   font-family: var(--font-mono);
-  font-weight: 700;
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
-  line-height: 1;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.diff-hero-number .hero-model-a,
+.diff-hero-number .hero-model-b {
+  font-weight: 700;
 }
 
-.diff-hero-number.positive { color: var(--added-foreground); }
-.diff-hero-number.negative { color: var(--removed-foreground); }
-.diff-hero-number.neutral { color: var(--foreground); }
+.diff-hero-number .hero-arrow {
+  color: var(--muted-foreground);
+  font-size: 16px;
+}
+
+.diff-hero-number .hero-diff {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.diff-hero-number .hero-diff.positive { color: var(--added-foreground); }
+.diff-hero-number .hero-diff.negative { color: var(--removed-foreground); }
+.diff-hero-number .hero-diff.neutral { color: var(--muted-foreground); }
 
 .diff-hero-label {
   font-size: 14px;
@@ -472,11 +531,27 @@ body {
 
 /* All-models in diff summary */
 .diff-summary-all {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  margin-top: 8px;
+}
+
+.diff-summary-all .all-models-label {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--muted-foreground);
+  opacity: 0.7;
+}
+
+.diff-summary-all .all-models-items {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 16px;
   justify-content: center;
-  padding-top: 4px;
 }
 
 .diff-summary-all .delta-item {
@@ -537,107 +612,6 @@ body {
   pointer-events: none;
 }
 
-/* ===== Diff Card ===== */
-.diff-card {
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  overflow: hidden;
-}
-
-.diff-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-}
-
-.diff-card-label {
-  font-size: 12px;
-  color: var(--muted-foreground);
-}
-
-.diff-card-badges {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* Outline badges */
-.outline-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-family: var(--font-mono);
-  font-weight: 500;
-  padding: 1px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-.badge-added {
-  border-color: var(--added);
-  color: var(--added-foreground);
-}
-
-.badge-removed {
-  border-color: var(--removed);
-  color: var(--removed-foreground);
-}
-
-.badge-unchanged {
-  color: var(--muted-foreground);
-}
-
-.badge-a {
-  border-color: var(--removed);
-  color: var(--removed-foreground);
-}
-
-.badge-b {
-  border-color: var(--added);
-  color: var(--added-foreground);
-}
-
-.diff-card-body {
-  padding: 12px;
-  max-height: 33vh;
-  overflow-y: auto;
-  font-family: var(--font-mono);
-  font-size: 14px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  border-top: 1px solid var(--border);
-}
-
-.diff-empty {
-  text-align: center;
-  color: var(--muted-foreground);
-  font-size: 14px;
-  padding: 12px 0;
-}
-
-.diff-span-added {
-  background: oklch(0.5 0.17 145 / 0.35);
-  color: var(--added-foreground);
-  border-radius: 2px;
-  padding: 0 2px;
-}
-
-.diff-span-removed {
-  background: oklch(0.45 0.17 27 / 0.35);
-  color: var(--removed-foreground);
-  text-decoration: line-through;
-  border-radius: 2px;
-  padding: 0 2px;
-}
-
-.diff-span-unchanged {
-  color: var(--muted-foreground);
-}
-
 /* ===== Token View Button ===== */
 .token-view-btn {
   display: inline-flex;
@@ -740,8 +714,8 @@ body {
     background-position: right 6px center;
   }
 
-  .diff-summary-model .model-selector,
-  .diff-summary-model .model-dropdown {
+  .panel-model-selector .model-selector,
+  .panel-model-selector .model-dropdown {
     display: none !important;
   }
 }
@@ -827,11 +801,6 @@ body {
     grid-column: 1 / -1;
     grid-row: 2;
   }
-
-  .main-content.compare-mode .diff-card {
-    grid-column: 1 / -1;
-    grid-row: 3;
-  }
 }
 
 /* ===== Responsive: Mobile ===== */
diff --git a/index.html b/index.html
index 09f67ef..720b078 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,15 @@
       <section class="panel" id="panel-a">
         <div class="panel-header">
           <span class="panel-title" id="panel-title-a">Input text</span>
+          <div class="panel-model-selector">
+            <button class="model-selector" id="model-selector-a">
+              <span class="model-dot" id="model-dot-a"></span>
+              <span class="model-name" id="model-name-a"></span>
+              <svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+            <div class="model-dropdown" id="model-dropdown-a" style="display:none"></div>
+            <select class="model-select-native" id="model-select-native-a"></select>
+          </div>
         </div>
         <div class="textarea-wrap">
           <textarea id="textarea-a" placeholder="Paste text to estimate tokens..." spellcheck="false"></textarea>
@@ -42,12 +51,28 @@
           </svg>
           Compare two texts
         </button>
+        <button class="compare-btn" id="compare-models-btn">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="6" cy="12" r="3"/><circle cx="18" cy="12" r="3"/>
+            <path d="M9 12h6"/>
+          </svg>
+          Compare two models
+        </button>
       </div>
 
       <!-- Panel B (compare mode only) -->
       <section class="panel" id="panel-b" style="display:none">
         <div class="panel-header">
           <span class="panel-title" id="panel-title-b">Modified</span>
+          <div class="panel-model-selector">
+            <button class="model-selector" id="model-selector-b">
+              <span class="model-dot" id="model-dot-b"></span>
+              <span class="model-name" id="model-name-b"></span>
+              <svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+            <div class="model-dropdown" id="model-dropdown-b" style="display:none"></div>
+            <select class="model-select-native" id="model-select-native-b"></select>
+          </div>
           <button class="close-panel-btn" id="close-panel-b" title="Exit compare mode">&times;</button>
         </div>
         <div class="textarea-wrap">
@@ -74,16 +99,7 @@
 
       <!-- Diff summary strip (compare mode only) -->
       <div class="diff-summary" id="diff-summary" style="display:none">
-        <div class="diff-summary-model">
-          <button class="model-selector" id="model-selector-a">
-            <span class="model-dot" id="model-dot-a"></span>
-            <span class="model-name" id="model-name-a"></span>
-            <svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
-          </button>
-          <div class="all-models-row" id="all-models-a" style="display:none"></div>
-          <div class="model-dropdown" id="model-dropdown" style="display:none"></div>
-          <select class="model-select-native" id="model-select-native-compare"></select>
-        </div>
+        <div class="all-models-row" id="all-models-a" style="display:none"></div>
         <div class="diff-summary-hero">
           <span class="diff-hero-number" id="diff-hero-number">+0</span>
           <span class="diff-hero-label" id="diff-hero-label">tokens</span>
@@ -100,19 +116,6 @@
           </button>
         </div>
       </div>
-
-      <!-- Diff card (compare mode) -->
-      <div class="diff-card" id="diff-card" style="display:none">
-        <div class="diff-card-header">
-          <span class="diff-card-label" id="diff-card-label">Word Diff</span>
-          <div class="diff-card-badges">
-            <span class="outline-badge badge-added" id="diff-stats-added">+0 words</span>
-            <span class="outline-badge badge-removed" id="diff-stats-removed">-0 words</span>
-            <span class="outline-badge badge-unchanged" id="diff-stats-unchanged">0 unchanged</span>
-          </div>
-        </div>
-        <div class="diff-card-body" id="diff-body"></div>
-      </div>
     </main>
 
     <footer class="app-footer">
diff --git a/js/app.js b/js/app.js
index b92bf47..05044dd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,4 +1,3 @@
-import { computeDiff } from "./diff.js";
 import {
   MODEL_PROFILES,
   countTokens,
@@ -13,20 +12,24 @@ import { encodePayload, decodePayload, decodePayloadBase64 } from "./zbase32.js"
 // ===== State =====
 let textA = "";
 let textB = "";
-let model = localStorage.getItem("tde-model") || "claude";
+let modelA = localStorage.getItem("tde-modelA") || localStorage.getItem("tde-model") || "claude";
+let modelB = localStorage.getItem("tde-modelB") || localStorage.getItem("tde-model") || "claude";
 let showAll = localStorage.getItem("tde-showAll") === "true";
-let compareMode = false;
+let compareMode = false;        // Compare two different texts
+let modelCompareMode = false;   // Compare same text with two models
 let mobileTab = "a";
 let highlightA = true;
 let highlightB = true;
 // Pre-computed token counts from share link (shown before model loads)
-let preTokens = null; // { a: number, b: number, model: string }
+let preTokens = null; // { a: number, b: number, modelA: string, modelB: string }
 
-// Validate stored model
-if (!MODEL_PROFILES.find((p) => p.name === model)) model = "claude";
+// Validate stored models
+if (!MODEL_PROFILES.find((p) => p.name === modelA)) modelA = "claude";
+if (!MODEL_PROFILES.find((p) => p.name === modelB)) modelB = "claude";
 
 function savePrefs() {
-  localStorage.setItem("tde-model", model);
+  localStorage.setItem("tde-modelA", modelA);
+  localStorage.setItem("tde-modelB", modelB);
   localStorage.setItem("tde-showAll", showAll);
 }
 
@@ -40,12 +43,16 @@ const textareaB = document.getElementById("textarea-b");
 // Panel titles
 const panelTitleA = document.getElementById("panel-title-a");
 
-// Model selector (in diff summary)
+// Model selectors (in diff summary)
 const modelSelectorA = document.getElementById("model-selector-a");
 const modelDotA = document.getElementById("model-dot-a");
 const modelNameA = document.getElementById("model-name-a");
+const modelDropdownA = document.getElementById("model-dropdown-a");
+const modelSelectorB = document.getElementById("model-selector-b");
+const modelDotB = document.getElementById("model-dot-b");
+const modelNameB = document.getElementById("model-name-b");
+const modelDropdownB = document.getElementById("model-dropdown-b");
 const allModelsA = document.getElementById("all-models-a");
-const modelDropdown = document.getElementById("model-dropdown");
 
 // Token counts (in panel footers)
 const tokenCountA = document.getElementById("tokencount-a");
@@ -58,6 +65,7 @@ const charCountB = document.getElementById("char-count-b");
 // Compare toggle
 const compareToggle = document.getElementById("compare-toggle");
 const compareBtn = document.getElementById("compare-btn");
+const compareModelsBtn = document.getElementById("compare-models-btn");
 const closePanelB = document.getElementById("close-panel-b");
 
 // Mobile tabs
@@ -79,15 +87,9 @@ const tokenHighlightA = document.getElementById("token-highlight-a");
 const tokenHighlightB = document.getElementById("token-highlight-b");
 
 // Native model select (mobile)
-const modelSelectNativeCompare = document.getElementById("model-select-native-compare");
+const modelSelectNativeA = document.getElementById("model-select-native-a");
+const modelSelectNativeB = document.getElementById("model-select-native-b");
 
-// Diff card
-const diffCard = document.getElementById("diff-card");
-const diffCardLabel = document.getElementById("diff-card-label");
-const diffStatsAdded = document.getElementById("diff-stats-added");
-const diffStatsRemoved = document.getElementById("diff-stats-removed");
-const diffStatsUnchanged = document.getElementById("diff-stats-unchanged");
-const diffBody = document.getElementById("diff-body");
 
 // ===== Helpers =====
 function escapeHtml(str) {
@@ -100,10 +102,12 @@ function formatNumber(n) {
 
 // Return best available token count: pre-computed from share link, or live
 function bestTokenCount(text, panel) {
-  if (preTokens && preTokens.model === model && !isReady(model)) {
+  const panelModel = panel === "a" ? modelA : modelB;
+  const preTokenModel = panel === "a" ? preTokens?.modelA : preTokens?.modelB;
+  if (preTokens && preTokenModel === panelModel && !isReady(panelModel)) {
     return { count: preTokens[panel], exact: true };
   }
-  return { count: countTokens(text, model), exact: isReady(model) };
+  return { count: countTokens(text, panelModel), exact: isReady(panelModel) };
 }
 
 function getProfile(name) {
@@ -126,14 +130,14 @@ function formatDelta(d) {
 const highlightTimers = { a: null, b: null };
 const HIGHLIGHT_DEBOUNCE_MS = 300;
 
-function debouncedRenderHighlight(container, text, timerKey) {
+function debouncedRenderHighlight(container, text, timerKey, panelModel) {
   const textarea = timerKey === "a" ? textareaA : textareaB;
   // While waiting for highlight to render, show plain text
   textarea.classList.remove("token-overlay-active");
 
   clearTimeout(highlightTimers[timerKey]);
   highlightTimers[timerKey] = setTimeout(() => {
-    renderTokenHighlight(container, text);
+    renderTokenHighlight(container, text, panelModel);
     // Highlight is now up-to-date — switch to transparent overlay
     textarea.classList.add("token-overlay-active");
   }, HIGHLIGHT_DEBOUNCE_MS);
@@ -144,27 +148,60 @@ function ensureModelLoaded(name) {
   if (isReady(name) || getStatus(name) === "error") return;
   loadModel(name, () => {
     // Clear pre-computed tokens once the real model is available
-    if (preTokens && preTokens.model === name) preTokens = null;
+    if (preTokens && (preTokens.modelA === name || preTokens.modelB === name)) preTokens = null;
     render();
   });
 }
 
 // ===== Layout =====
 function updateLayout() {
-  if (compareMode) {
+  const isComparing = compareMode || modelCompareMode;
+
+  if (isComparing) {
     mainContent.classList.add("compare-mode");
     panelB.style.display = "";
     compareToggle.style.display = "none";
     diffSummary.style.display = "";
     shareBtn.style.display = "";
-    panelTitleA.textContent = "Original";
+
+    // No titles in either compare mode
+    panelTitleA.textContent = "";
+    document.getElementById("panel-title-b").textContent = "";
+
+    if (modelCompareMode) {
+      // Model compare mode: same text, different models
+      textareaB.readOnly = true;
+      textareaB.classList.add("readonly");
+      // Sync text B with text A
+      if (textB !== textA) {
+        textB = textA;
+        textareaB.value = textA;
+      }
+      // Show both model selectors
+      document.querySelector("#panel-a .panel-model-selector").style.display = "";
+      document.querySelector("#panel-b .panel-model-selector").style.display = "";
+    } else {
+      // Text compare mode: different texts, same model
+      textareaB.readOnly = false;
+      textareaB.classList.remove("readonly");
+      // Sync models - in text compare mode, both panels use the same model
+      if (modelB !== modelA) {
+        modelB = modelA;
+        savePrefs();
+      }
+      // Show only panel A model selector, hide panel B
+      document.querySelector("#panel-a .panel-model-selector").style.display = "";
+      document.querySelector("#panel-b .panel-model-selector").style.display = "none";
+    }
+
     updateMobileTabs();
   } else {
     mainContent.classList.remove("compare-mode");
     panelB.style.display = "none";
-    diffCard.style.display = "none";
     mobileTabsContainer.style.display = "none";
-    panelTitleA.textContent = "Input text";
+    panelTitleA.textContent = "";
+    textareaB.readOnly = false;
+    textareaB.classList.remove("readonly");
 
     const hasText = textA.trim();
     // Show diff summary strip (model chooser + count + share) when text exists
@@ -175,7 +212,8 @@ function updateLayout() {
 }
 
 function updateMobileTabs() {
-  if (!compareMode) {
+  const isComparing = compareMode || modelCompareMode;
+  if (!isComparing) {
     mobileTabsContainer.style.display = "none";
     return;
   }
@@ -190,15 +228,24 @@ function updateMobileTabs() {
 
 // ===== Model display rendering =====
 function renderModelDisplay() {
-  const profile = getProfile(model);
-  if (!profile) return;
+  const profileA = getProfile(modelA);
+  const profileB = getProfile(modelB);
+
+  // Sync native selects
+  modelSelectNativeA.value = modelA;
+  modelSelectNativeB.value = modelB;
 
-  // Sync native select
-  modelSelectNativeCompare.value = model;
+  // Update model selector A (Original)
+  if (profileA) {
+    modelDotA.style.background = profileA.color;
+    modelNameA.textContent = profileA.displayName;
+  }
 
-  // Always update diff summary model selector (visible in both modes now)
-  modelDotA.style.background = profile.color;
-  modelNameA.textContent = profile.displayName;
+  // Update model selector B (Modified)
+  if (profileB) {
+    modelDotB.style.background = profileB.color;
+    modelNameB.textContent = profileB.displayName;
+  }
 
   if (compareMode) {
     // All-models row
@@ -239,14 +286,16 @@ function renderModelDisplay() {
 // ===== Dropdown =====
 let dropdownOpen = false;
 let activeDropdownEl = null;
+let activeDropdownPanel = null; // "a" or "b"
 
-function buildDropdownHtml() {
-  const combinedText = compareMode ? textA + " " + textB : textA;
-  const allCounts = countAllTokenizers(combinedText);
+function buildDropdownHtml(panel) {
+  const currentModel = panel === "a" ? modelA : modelB;
+  const text = panel === "a" ? textA : textB;
+  const allCounts = countAllTokenizers(text);
 
   let html = "";
   for (const est of allCounts) {
-    const isActive = model === est.name;
+    const isActive = currentModel === est.name;
     const statusIcon = est.status === "loading"
       ? '<span class="model-loading-spinner"></span>'
       : est.status === "error"
@@ -254,19 +303,11 @@ function buildDropdownHtml() {
         : "";
     const prefix = est.ready ? "" : "~";
 
-    let deltaHtml = "";
-    if (compareMode && textA && textB) {
-      const d = countTokens(textB, est.name) - countTokens(textA, est.name);
-      const { cls, val } = formatDelta(d);
-      deltaHtml = `<span class="delta ${cls}">${val}</span>`;
-    }
-
     html += `<button class="model-option${isActive ? " active" : ""}" data-mode="${est.name}">
       <span class="dot" style="background:${est.color}"></span>
       <span>${est.label || est.displayName}</span>
       ${statusIcon}
       <span class="tokens">${prefix}${formatNumber(est.tokens)}</span>
-      ${deltaHtml}
     </button>`;
   }
 
@@ -277,17 +318,27 @@ function buildDropdownHtml() {
   return html;
 }
 
-function openDropdown(dropdownEl) {
-  dropdownEl.innerHTML = buildDropdownHtml();
+function openDropdown(dropdownEl, panel) {
+  dropdownEl.innerHTML = buildDropdownHtml(panel);
   dropdownEl.style.display = "block";
   activeDropdownEl = dropdownEl;
+  activeDropdownPanel = panel;
   dropdownOpen = true;
 
   dropdownEl.querySelectorAll("button[data-mode]").forEach((btn) => {
     btn.addEventListener("click", (e) => {
       e.stopPropagation();
-      model = btn.dataset.mode;
-      ensureModelLoaded(model);
+      const newModel = btn.dataset.mode;
+      if (panel === "a") {
+        modelA = newModel;
+        // In text compare mode, both panels use the same model
+        if (compareMode && !modelCompareMode) {
+          modelB = newModel;
+        }
+      } else {
+        modelB = newModel;
+      }
+      ensureModelLoaded(newModel);
       savePrefs();
       closeDropdown();
       render();
@@ -319,13 +370,16 @@ function closeDropdown() {
 
 // ===== Diff summary =====
 function renderDiffSummary() {
-  const profile = getProfile(model);
-  if (!profile) return;
+  const profileA = getProfile(modelA);
+  const profileB = getProfile(modelB);
+  if (!profileA) return;
 
   const bA = bestTokenCount(textA, "a");
   const tokA = bA.count;
 
-  if (!compareMode) {
+  const isComparing = compareMode || modelCompareMode;
+
+  if (!isComparing) {
     // Single-panel mode: show token count only
     if (!textA.trim()) return;
     const fmtA = (bA.exact ? "" : "~") + formatNumber(tokA);
@@ -343,7 +397,41 @@ function renderDiffSummary() {
   const diff = tokB - tokA;
   const cls = diff > 0 ? "positive" : diff < 0 ? "negative" : "neutral";
   const diffPrefix = bothExact ? "" : "~";
+  const fmtA = (bA.exact ? "" : "~") + formatNumber(tokA);
+  const fmtB = (bB.exact ? "" : "~") + formatNumber(tokB);
 
+  if (modelCompareMode) {
+    // MODEL COMPARE MODE: "Claude 17 → Gemini 15 (-2)" format
+    let diffText = "";
+    if (diff === 0) {
+      diffText = "=";
+    } else {
+      const sign = diff > 0 ? "+" : "";
+      diffText = `(${sign}${diffPrefix}${formatNumber(diff)})`;
+    }
+
+    diffHeroNumber.innerHTML = `
+      <span class="hero-model-a" style="color: ${profileA.color}">${profileA.displayName} ${fmtA}</span>
+      <span class="hero-arrow">→</span>
+      <span class="hero-model-b" style="color: ${profileB.color}">${profileB.displayName} ${fmtB}</span>
+      <span class="hero-diff ${cls}">${diffText}</span>
+    `;
+    diffHeroNumber.className = "diff-hero-number";
+    diffHeroLabel.textContent = "";
+
+    // Percentage detail
+    let pctText = "";
+    if (diff !== 0 && tokA > 0) {
+      const pct = ((diff / tokA) * 100).toFixed(1);
+      const pctSign = diff > 0 ? "+" : "";
+      pctText = `${pctSign}${pct}% tokens`;
+    }
+    diffSummaryDetail.innerHTML = pctText ? `<span class="detail-pct">${pctText}</span>` : "";
+    diffSummaryAll.style.display = "none";
+    return;
+  }
+
+  // TEXT COMPARE MODE: Original/Modified format with all-models section
   if (diff === 0) {
     diffHeroNumber.textContent = "=";
   } else {
@@ -361,15 +449,12 @@ function renderDiffSummary() {
     pctText = ` (${pctSign}${pct}%)`;
   }
 
-  const fmtA = (bA.exact ? "" : "~") + formatNumber(tokA);
-  const fmtB = (bB.exact ? "" : "~") + formatNumber(tokB);
-
   diffSummaryDetail.innerHTML = `
     <span class="detail-a">Original: ${fmtA}</span>
     <span class="detail-b">Modified: ${fmtB}${pctText}</span>
   `;
 
-  // All-models deltas
+  // All-models deltas - shows what the delta would be if using each model for BOTH texts
   if (showAll) {
     const allCounts = MODEL_PROFILES.map((p) => ({
       name: p.name,
@@ -379,7 +464,7 @@ function renderDiffSummary() {
       tokB: countTokens(textB, p.name),
     }));
 
-    let html = "";
+    let html = '<div class="all-models-label">Same model for both texts:</div><div class="all-models-items">';
     for (const est of allCounts) {
       const { cls, val } = formatDelta(est.tokB - est.tokA);
       html += `<span class="delta-item">
@@ -388,6 +473,7 @@ function renderDiffSummary() {
         <span class="delta-val ${cls}">${val}</span>
       </span>`;
     }
+    html += '</div>';
     diffSummaryAll.innerHTML = html;
     diffSummaryAll.style.display = "flex";
   } else {
@@ -395,69 +481,17 @@ function renderDiffSummary() {
   }
 }
 
-// ===== Diff card =====
-function renderDiffCard() {
-  if (!compareMode || textA === textB || (!textA && !textB)) {
-    diffCard.style.display = "none";
-    return;
-  }
-
-  diffCard.style.display = "";
-
-  const diff = computeDiff(textA, textB);
-
-  let addedText = "";
-  let removedText = "";
-  let unchangedText = "";
-  for (const seg of diff) {
-    if (seg.type === "added") addedText += seg.text;
-    else if (seg.type === "removed") removedText += seg.text;
-    else unchangedText += seg.text;
-  }
-
-  const profile = getProfile(model);
-  if (profile) {
-    diffCardLabel.textContent = `Tokens diff`;
-    const prefix = isReady(model) ? "" : "~";
-    const addedTok = countTokens(addedText, model);
-    const removedTok = countTokens(removedText, model);
-    const unchangedTok = countTokens(unchangedText, model);
-    diffStatsAdded.textContent = `+${prefix}${formatNumber(addedTok)} tok`;
-    diffStatsRemoved.textContent = `-${prefix}${formatNumber(removedTok)} tok`;
-    diffStatsUnchanged.textContent = `${prefix}${formatNumber(unchangedTok)} unchanged`;
-  } else {
-    diffCardLabel.textContent = "Word Diff";
-    diffStatsAdded.textContent = `+${getWordCount(addedText)} words`;
-    diffStatsRemoved.textContent = `-${getWordCount(removedText)} words`;
-    diffStatsUnchanged.textContent = `${getWordCount(unchangedText)} unchanged`;
-  }
-
-  // Render diff body
-  let html = "";
-  for (const seg of diff) {
-    const escaped = escapeHtml(seg.text);
-    if (seg.type === "added") {
-      html += `<span class="diff-span-added">${escaped}</span>`;
-    } else if (seg.type === "removed") {
-      html += `<span class="diff-span-removed">${escaped}</span>`;
-    } else {
-      html += `<span class="diff-span-unchanged">${escaped}</span>`;
-    }
-  }
-  diffBody.innerHTML = html;
-}
-
 // ===== Token highlight =====
-function renderTokenHighlight(container, text) {
+function renderTokenHighlight(container, text, panelModel) {
   if (!text || !text.trim()) {
     container.innerHTML = '<span class="tok-empty">Enter text to see token boundaries</span>';
     return;
   }
 
-  const tokens = encodeTokens(text, model);
+  const tokens = encodeTokens(text, panelModel);
   if (!tokens) {
-    const profile = getProfile(model);
-    const name = profile ? profile.displayName : model;
+    const profile = getProfile(panelModel);
+    const name = profile ? profile.displayName : panelModel;
     container.innerHTML = `<span class="tok-empty">Loading ${name} tokenizer\u2026</span>`;
     return;
   }
@@ -480,13 +514,13 @@ function renderTokenHighlight(container, text) {
 
 function updateTokenHighlights() {
   const panels = [
-    { highlight: highlightA, text: textA, key: "a", container: tokenHighlightA, textarea: textareaA, btn: tokenViewBtnA },
-    { highlight: highlightB, text: textB, key: "b", container: tokenHighlightB, textarea: textareaB, btn: tokenViewBtnB },
+    { highlight: highlightA, text: textA, key: "a", model: modelA, container: tokenHighlightA, textarea: textareaA, btn: tokenViewBtnA },
+    { highlight: highlightB, text: textB, key: "b", model: modelB, container: tokenHighlightB, textarea: textareaB, btn: tokenViewBtnB },
   ];
   for (const p of panels) {
     if (p.highlight && p.text.trim()) {
       p.container.style.display = "block";
-      debouncedRenderHighlight(p.container, p.text, p.key);
+      debouncedRenderHighlight(p.container, p.text, p.key, p.model);
     } else {
       p.textarea.classList.remove("token-overlay-active");
       p.container.style.display = "none";
@@ -501,13 +535,13 @@ function render() {
   updateLayout();
   renderModelDisplay();
   renderDiffSummary();
-  renderDiffCard();
   updateTokenHighlights();
 }
 
 // ===== Compare mode =====
 function enterCompareMode() {
   compareMode = true;
+  modelCompareMode = false;
   mobileTab = "b";
   if (!textB) {
     textB = textA;
@@ -517,8 +551,24 @@ function enterCompareMode() {
   textareaB.focus();
 }
 
+function enterModelCompareMode() {
+  modelCompareMode = true;
+  compareMode = false;
+  mobileTab = "b";
+  // In model compare mode, both panels show the same text
+  textB = textA;
+  textareaB.value = textA;
+  // Default to different models for meaningful comparison
+  if (modelA === modelB) {
+    modelB = modelA === "openai" ? "claude" : "openai";
+    savePrefs();
+  }
+  render();
+}
+
 function exitCompareMode() {
   compareMode = false;
+  modelCompareMode = false;
   mobileTab = "a";
   render();
 }
@@ -527,13 +577,18 @@ function exitCompareMode() {
 let pasteIntoA = false;
 
 textareaA.addEventListener("paste", () => {
-  if (!textB && !compareMode) pasteIntoA = true;
+  const isComparing = compareMode || modelCompareMode;
+  if (!textB && !isComparing) pasteIntoA = true;
 });
 
 // ===== Event handlers =====
 textareaA.addEventListener("input", () => {
   textA = textareaA.value;
-  if (pasteIntoA) {
+  // In model compare mode, always sync textB with textA
+  if (modelCompareMode) {
+    textB = textA;
+    textareaB.value = textA;
+  } else if (pasteIntoA) {
     pasteIntoA = false;
     if (compareMode) {
       textB = textA;
@@ -544,6 +599,8 @@ textareaA.addEventListener("input", () => {
 });
 
 textareaB.addEventListener("input", () => {
+  // Ignore input in model compare mode (textarea is readonly)
+  if (modelCompareMode) return;
   textB = textareaB.value;
   render();
 });
@@ -551,10 +608,21 @@ textareaB.addEventListener("input", () => {
 // Model selector clicks
 modelSelectorA.addEventListener("click", (e) => {
   e.stopPropagation();
-  if (dropdownOpen) {
+  if (dropdownOpen && activeDropdownPanel === "a") {
+    closeDropdown();
+  } else {
+    closeDropdown();
+    openDropdown(modelDropdownA, "a");
+  }
+});
+
+modelSelectorB.addEventListener("click", (e) => {
+  e.stopPropagation();
+  if (dropdownOpen && activeDropdownPanel === "b") {
     closeDropdown();
   } else {
-    openDropdown(modelDropdown);
+    closeDropdown();
+    openDropdown(modelDropdownB, "b");
   }
 });
 
@@ -568,6 +636,10 @@ compareBtn.addEventListener("click", () => {
   enterCompareMode();
 });
 
+compareModelsBtn.addEventListener("click", () => {
+  enterModelCompareMode();
+});
+
 // Close panel B
 closePanelB.addEventListener("click", () => {
   exitCompareMode();
@@ -584,13 +656,13 @@ mobileTabBtns.forEach((btn) => {
 // Token view toggles
 tokenViewBtnA.addEventListener("click", () => {
   highlightA = !highlightA;
-  if (highlightA) ensureModelLoaded(model);
+  if (highlightA) ensureModelLoaded(modelA);
   render();
 });
 
 tokenViewBtnB.addEventListener("click", () => {
   highlightB = !highlightB;
-  if (highlightB) ensureModelLoaded(model);
+  if (highlightB) ensureModelLoaded(modelB);
   render();
 });
 
@@ -605,21 +677,35 @@ textareaB.addEventListener("scroll", () => {
 });
 
 // Native model select (mobile)
-function populateNativeSelect() {
-  modelSelectNativeCompare.innerHTML = "";
-  for (const p of MODEL_PROFILES) {
-    const opt = document.createElement("option");
-    opt.value = p.name;
-    opt.textContent = p.displayName;
-    modelSelectNativeCompare.appendChild(opt);
+function populateNativeSelects() {
+  for (const select of [modelSelectNativeA, modelSelectNativeB]) {
+    select.innerHTML = "";
+    for (const p of MODEL_PROFILES) {
+      const opt = document.createElement("option");
+      opt.value = p.name;
+      opt.textContent = p.displayName;
+      select.appendChild(opt);
+    }
   }
-  modelSelectNativeCompare.value = model;
+  modelSelectNativeA.value = modelA;
+  modelSelectNativeB.value = modelB;
 }
-populateNativeSelect();
+populateNativeSelects();
+
+modelSelectNativeA.addEventListener("change", (e) => {
+  modelA = e.target.value;
+  // In text compare mode, both panels use the same model
+  if (compareMode && !modelCompareMode) {
+    modelB = modelA;
+  }
+  ensureModelLoaded(modelA);
+  savePrefs();
+  render();
+});
 
-modelSelectNativeCompare.addEventListener("change", (e) => {
-  model = e.target.value;
-  ensureModelLoaded(model);
+modelSelectNativeB.addEventListener("change", (e) => {
+  modelB = e.target.value;
+  ensureModelLoaded(modelB);
   savePrefs();
   render();
 });
@@ -630,8 +716,8 @@ shareBtn.addEventListener("click", () => {
   let highlight = "";
   if (highlightA) highlight += "a";
   if (highlightB) highlight += "b";
-  const tokens = { a: countTokens(textA, model), b: countTokens(textB, model) };
-  const encoded = encodePayload(textA, textB, { model, highlight: highlight || undefined, tokens });
+  const tokens = { a: countTokens(textA, modelA), b: countTokens(textB, modelB) };
+  const encoded = encodePayload(textA, textB, { modelA, modelB, highlight: highlight || undefined, tokens });
   const url = `${window.location.origin}${window.location.pathname}?d=${encoded}`;
 
   if (url.length > 8000) {
@@ -677,14 +763,21 @@ function loadFromURL() {
     textB = decoded.b;
     textareaA.value = textA;
     textareaB.value = textB;
-    // Restore model if shared
-    if (decoded.m && MODEL_PROFILES.find((p) => p.name === decoded.m)) {
-      model = decoded.m;
-      savePrefs();
+    // Restore models if shared (support both new mA/mB and old m format)
+    if (decoded.mA && MODEL_PROFILES.find((p) => p.name === decoded.mA)) {
+      modelA = decoded.mA;
+    } else if (decoded.m && MODEL_PROFILES.find((p) => p.name === decoded.m)) {
+      modelA = decoded.m;
+    }
+    if (decoded.mB && MODEL_PROFILES.find((p) => p.name === decoded.mB)) {
+      modelB = decoded.mB;
+    } else if (decoded.m && MODEL_PROFILES.find((p) => p.name === decoded.m)) {
+      modelB = decoded.m;
     }
+    savePrefs();
     // Restore pre-computed token counts
     if (decoded.t && typeof decoded.t.a === "number" && typeof decoded.t.b === "number") {
-      preTokens = { a: decoded.t.a, b: decoded.t.b, model: model };
+      preTokens = { a: decoded.t.a, b: decoded.t.b, modelA: modelA, modelB: modelB };
     }
     // Restore token view state
     if (decoded.h) {
@@ -707,7 +800,8 @@ if (!textA && textareaA.value) {
 if (!textB && textareaB.value) {
   textB = textareaB.value;
 }
-ensureModelLoaded(model);
+ensureModelLoaded(modelA);
+ensureModelLoaded(modelB);
 if (showAll) {
   for (const p of MODEL_PROFILES) ensureModelLoaded(p.name);
 }
diff --git a/js/zbase32.js b/js/zbase32.js
index 3ef2d9f..5a87b6c 100644
--- a/js/zbase32.js
+++ b/js/zbase32.js
@@ -36,7 +36,10 @@ function zbase32Decode(str) {
 export function encodePayload(textA, textB, opts) {
   const obj = { a: textA, b: textB };
   if (opts) {
-    if (opts.model) obj.m = opts.model;
+    // Support both old single model and new per-panel models
+    if (opts.modelA) obj.mA = opts.modelA;
+    if (opts.modelB) obj.mB = opts.modelB;
+    if (opts.model) obj.m = opts.model; // backward compat
     if (opts.highlight) obj.h = opts.highlight;
     if (opts.tokens) obj.t = opts.tokens;
   }
@@ -52,7 +55,7 @@ export function decodePayload(encoded) {
     const json = new TextDecoder().decode(bytes);
     const obj = JSON.parse(json);
     if (typeof obj.a === "string" && typeof obj.b === "string") {
-      return { a: obj.a, b: obj.b, m: obj.m || null, h: obj.h || null, t: obj.t || null };
+      return { a: obj.a, b: obj.b, m: obj.m || null, mA: obj.mA || null, mB: obj.mB || null, h: obj.h || null, t: obj.t || null };
     }
     return null;
   } catch {
@@ -88,7 +91,9 @@ function base64UrlEncode(bytes) {
 export function encodePayloadBase64(textA, textB, opts) {
   const obj = { a: textA, b: textB };
   if (opts) {
-    if (opts.model) obj.m = opts.model;
+    if (opts.modelA) obj.mA = opts.modelA;
+    if (opts.modelB) obj.mB = opts.modelB;
+    if (opts.model) obj.m = opts.model; // backward compat
     if (opts.highlight) obj.h = opts.highlight;
     if (opts.tokens) obj.t = opts.tokens;
   }
@@ -102,7 +107,7 @@ export function decodePayloadBase64(encoded) {
     const json = new TextDecoder().decode(bytes);
     const obj = JSON.parse(json);
     if (typeof obj.a === "string" && typeof obj.b === "string") {
-      return { a: obj.a, b: obj.b, m: obj.m || null, h: obj.h || null, t: obj.t || null };
+      return { a: obj.a, b: obj.b, m: obj.m || null, mA: obj.mA || null, mB: obj.mB || null, h: obj.h || null, t: obj.t || null };
     }
     return null;
   } catch {
diff --git a/tests/workflows.spec.js b/tests/workflows.spec.js
index a56af6a..e18a877 100644
--- a/tests/workflows.spec.js
+++ b/tests/workflows.spec.js
@@ -102,9 +102,7 @@ test.describe("Edit and compare token diff", () => {
     await expect(heroNumber).toBeVisible();
     // Hero shows +N, -N, ~+N, ~-N, or = (when counts are equal)
     expect(await heroNumber.textContent()).toMatch(/^[+\-=~]/);
-
-    await expect(page.locator("#diff-card")).toBeVisible();
-    await snap(page, "02-diff-card-visible", testInfo);
+    await snap(page, "02-compare-mode-complete", testInfo);
   });
 
   test("exit compare mode returns to single panel", async ({ page }, testInfo) => {
@@ -129,10 +127,10 @@ test.describe("Edit and compare token diff", () => {
 });
 
 // ─────────────────────────────────────────────
-// 3. Pure diff viewing
+// 3. Text comparison (token diff)
 // ─────────────────────────────────────────────
-test.describe("Pure diff viewing", () => {
-  test("paste two different texts and see word-level diff", async ({ page }, testInfo) => {
+test.describe("Text comparison", () => {
+  test("paste two different texts and see token diff summary", async ({ page }, testInfo) => {
     await page.locator("#textarea-a").fill(SAMPLE_TEXT_A);
     await page.waitForTimeout(200);
     await page.locator("#compare-btn").click();
@@ -140,13 +138,16 @@ test.describe("Pure diff viewing", () => {
 
     await fillTextareaBInCompareMode(page, SAMPLE_TEXT_B, testInfo);
     await page.waitForTimeout(500);
-    await snap(page, "03-two-texts-diffed", testInfo);
+    await snap(page, "03-two-texts-compared", testInfo);
 
-    const diffBody = page.locator("#diff-body");
-    await expect(diffBody).toBeVisible();
-    expect(await diffBody.locator(".diff-span-added").count()).toBeGreaterThan(0);
-    expect(await diffBody.locator(".diff-span-removed").count()).toBeGreaterThan(0);
-    await snap(page, "03-diff-detail", testInfo);
+    // Diff summary shows token difference
+    const diffSummary = page.locator("#diff-summary");
+    await expect(diffSummary).toBeVisible();
+    const heroNumber = page.locator("#diff-hero-number");
+    await expect(heroNumber).toBeVisible();
+    // Hero shows +N, -N, or = for token difference
+    expect(await heroNumber.textContent()).toMatch(/^[+\-=~]/);
+    await snap(page, "03-token-diff-summary", testInfo);
   });
 });
 
@@ -166,7 +167,7 @@ test.describe("Model switching (desktop dropdown)", () => {
     await page.waitForTimeout(200);
     await snap(page, "04-dropdown-open", testInfo);
 
-    const dropdown = page.locator("#model-dropdown");
+    const dropdown = page.locator("#model-dropdown-a");
     await expect(dropdown).toBeVisible();
 
     const gptOption = dropdown.locator('button[data-mode="openai"]');
@@ -187,7 +188,7 @@ test.describe("Model switching (desktop dropdown)", () => {
     await page.locator("#model-selector-a").click();
     await page.waitForTimeout(200);
 
-    const dropdown = page.locator("#model-dropdown");
+    const dropdown = page.locator("#model-dropdown-a");
     await expect(dropdown).toBeVisible();
 
     const dropdownBox = await dropdown.boundingBox();
@@ -367,6 +368,7 @@ test.describe("AI rewrite comparison", () => {
     await page.waitForTimeout(500);
     await snap(page, "07-rewrite-comparison", testInfo);
 
+    // Hero shows negative diff when rewrite is shorter
     expect(await page.locator("#diff-hero-number").textContent()).toMatch(/^-/);
     await snap(page, "07-token-savings-shown", testInfo);
   });
@@ -466,7 +468,7 @@ test.describe("Mobile native model selector", () => {
     await snap(page, "10-mobile-model-selector", testInfo);
 
     // Model selector is in diff summary strip on mobile
-    await expect(page.locator("#model-select-native-compare")).toBeVisible();
+    await expect(page.locator("#model-select-native-a")).toBeVisible();
     await expect(page.locator("#model-selector-a")).not.toBeVisible();
   });
 
@@ -477,35 +479,54 @@ test.describe("Mobile native model selector", () => {
     await page.waitForTimeout(300);
     await snap(page, "10-mobile-before-model-change", testInfo);
 
-    await page.locator("#model-select-native-compare").selectOption("openai");
+    await page.locator("#model-select-native-a").selectOption("openai");
     await page.waitForTimeout(500);
     await snap(page, "10-mobile-after-model-change", testInfo);
 
-    await expect(page.locator("#model-select-native-compare")).toHaveValue("openai");
+    await expect(page.locator("#model-select-native-a")).toHaveValue("openai");
   });
 
-  test("native select in compare mode diff summary", async ({ page }, testInfo) => {
+  test("native select in compare mode panel headers", async ({ page }, testInfo) => {
     test.skip(!isMobile(testInfo), "Mobile-only test");
 
     await page.locator("#textarea-a").fill(SAMPLE_TEXT_A);
     await page.waitForTimeout(200);
+
+    // TEXT COMPARE MODE: only panel A has model selector (same model for both texts)
     await page.locator("#compare-btn").click();
     await page.waitForTimeout(200);
 
-    await page.locator('.mobile-tab[data-tab="b"]').click();
+    // Switch to panel A to see the model selector (B tab is default, but model selector B is hidden)
+    await page.locator('.mobile-tab[data-tab="a"]').click();
     await page.waitForTimeout(200);
-    await page.locator("#textarea-b").fill(SAMPLE_TEXT_B);
-    await page.waitForTimeout(300);
+
+    const selectA = page.locator("#model-select-native-a");
+    await expect(selectA).toBeVisible();
     await snap(page, "10-mobile-compare-native-select", testInfo);
 
-    const compareSelect = page.locator("#model-select-native-compare");
-    await expect(compareSelect).toBeVisible();
+    // Panel B model selector should be hidden in text compare mode
+    const selectB = page.locator("#model-select-native-b");
+    await expect(selectB).toBeHidden();
 
-    await compareSelect.selectOption("deepseek");
-    await page.waitForTimeout(500);
-    await snap(page, "10-mobile-compare-model-changed", testInfo);
+    // Exit compare mode and test MODEL COMPARE MODE: both panels have model selectors
+    await page.locator('.mobile-tab[data-tab="b"]').click();
+    await page.waitForTimeout(200);
+    await page.locator("#close-panel-b").click();
+    await page.waitForTimeout(200);
+
+    await page.locator("#compare-models-btn").click();
+    await page.waitForTimeout(200);
 
-    await expect(compareSelect).toHaveValue("deepseek");
+    // In model compare mode, both selectors should be visible
+    await page.locator('.mobile-tab[data-tab="a"]').click();
+    await page.waitForTimeout(200);
+    await expect(selectA).toBeVisible();
+    await snap(page, "10-mobile-model-compare-select-a", testInfo);
+
+    await page.locator('.mobile-tab[data-tab="b"]').click();
+    await page.waitForTimeout(200);
+    await expect(selectB).toBeVisible();
+    await snap(page, "10-mobile-model-compare-select-b", testInfo);
   });
 });
 
@@ -688,7 +709,7 @@ test.describe("Full desktop workflow", () => {
     await page.waitForTimeout(200);
     await snap(page, "13-step6-dropdown-open", testInfo);
 
-    const gptOpt = page.locator('#model-dropdown button[data-mode="openai"]');
+    const gptOpt = page.locator('#model-dropdown-a button[data-mode="openai"]');
     if (await gptOpt.isVisible()) {
       await gptOpt.click();
       await page.waitForTimeout(500);