From 7af3f152883d652a6b9770274168ea8c2d6a2c1b Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sat, 27 Jun 2026 21:02:10 +0000
Subject: [PATCH] Color cookbook context fit notes

---
 static/js/cookbookServe.js | 21 ++++++++++++++++++---
 static/style.css           | 15 +++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/static/js/cookbookServe.js b/static/js/cookbookServe.js
index 27aa2e2d0..3f82881c0 100644
--- a/static/js/cookbookServe.js
+++ b/static/js/cookbookServe.js
@@ -513,8 +513,10 @@ function _estimateLlamaContextFit(model, fields, modelCtxMax, modelWeightsGb = 0
   }
   const raw = Math.floor(freeForKv / kvGbPerToken);
   const rounded = Math.max(1024, Math.floor(raw / 1024) * 1024);
-  let ctx = Math.min(modelMax, rounded);
+  const gpuEstimateCtx = Math.min(modelMax, rounded);
+  let ctx = gpuEstimateCtx;
   let reasonSuffix = '';
+  let unifiedSpill = false;
   if (isUnifiedMode) {
     // Unified memory is not just "GPU math with a slightly bigger VRAM number".
     // llama.cpp can spill into system RAM, so a conservative pure-VRAM KV
@@ -527,6 +529,7 @@ function _estimateLlamaContextFit(model, fields, modelCtxMax, modelWeightsGb = 0
     const unifiedCtx = Math.min(modelMax, unifiedCap);
     if (unifiedCtx > ctx) {
       ctx = unifiedCtx;
+      unifiedSpill = true;
       reasonSuffix = '; unified can spill into system RAM, slower than pure GPU';
     }
     const gpuUsableGb = Math.max(1, totalVramGb - Math.max(1.0, selectedCount * 0.6));
@@ -545,6 +548,8 @@ function _estimateLlamaContextFit(model, fields, modelCtxMax, modelWeightsGb = 0
     ctx,
     modelGb,
     kvGbPerToken,
+    gpuEstimateCtx,
+    unifiedSpill,
     reason: `~${ctx.toLocaleString()} tokens fits llama.cpp KV (${freeForKv.toFixed(1)}G free ${isUnifiedMode ? 'unified' : 'VRAM'}${reasonSuffix})`,
   };
 }
@@ -1655,22 +1660,31 @@ function _rerenderCachedModels() {
           const ggufGb = _selectedGgufSizeGb(m, f.gguf_file);
           fit = _estimateLlamaContextFit(m, f, panel._modelCtxMax, ggufGb || panel._modelWeightsGb, panel._fitSystem, panel._contextProfileData);
         } else {
-          if (_ctxAutoNote) _ctxAutoNote.textContent = '';
+          if (_ctxAutoNote) {
+            _ctxAutoNote.textContent = '';
+            _ctxAutoNote.classList.remove('gpu-fit', 'unified-spill');
+          }
           return;
         }
         if (!fit) {
-          if (_ctxAutoNote) _ctxAutoNote.textContent = '';
+          if (_ctxAutoNote) {
+            _ctxAutoNote.textContent = '';
+            _ctxAutoNote.classList.remove('gpu-fit', 'unified-spill');
+          }
           return;
         }
         if ((fit.needsHardwareScan || fit.needsModelSize) && !fit.ctx) {
           if (_ctxAutoNote) {
             _ctxAutoNote.textContent = fit.reason;
             _ctxAutoNote.title = fit.reason;
+            _ctxAutoNote.classList.remove('gpu-fit', 'unified-spill');
           }
           return;
         }
         if (_ctxAutoNote) {
           _ctxAutoNote.textContent = `Auto ${fit.ctx.toLocaleString()} · ${fit.reason}`;
+          _ctxAutoNote.classList.toggle('gpu-fit', !!fit.ctx && !fit.unifiedSpill);
+          _ctxAutoNote.classList.toggle('unified-spill', !!fit.unifiedSpill);
           const _llamaMemoryLabel = String(f.llama_mode || '').toLowerCase() === 'unified' || f.unified_mem
             ? 'unified system memory'
             : 'selected GPU memory';
@@ -1713,6 +1727,7 @@ function _rerenderCachedModels() {
         if (_ctxAutoNote && data?.model_probe_error && (!ctxMax || !weightsGb)) {
           _ctxAutoNote.textContent = data.model_probe_error;
           _ctxAutoNote.title = data.model_probe_error;
+          _ctxAutoNote.classList.remove('gpu-fit', 'unified-spill');
         }
         return { ctxMax, weightsGb, data };
       }
diff --git a/static/style.css b/static/style.css
index de3083b87..56c82bb88 100644
--- a/static/style.css
+++ b/static/style.css
@@ -20203,6 +20203,14 @@ body.gallery-selecting .gallery-dl-btn,
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.hwfit-auto-ctx-note.gpu-fit {
+  color: var(--green, var(--color-success, #50fa7b));
+  opacity: 0.82;
+}
+.hwfit-auto-ctx-note.unified-spill {
+  color: var(--yellow, var(--color-warning, #f0ad4e));
+  opacity: 0.9;
+}
 .hwfit-serve-row label select,
 .hwfit-serve-row label input {
   display: block;
@@ -24032,6 +24040,13 @@ details.hwfit-serve-advanced > .hwfit-serve-row {
   gap: 4px;
   row-gap: 4px;
 }
+details.hwfit-serve-advanced > .hwfit-serve-row.hwfit-backend-llamacpp,
+details.hwfit-serve-advanced > .hwfit-serve-checks.hwfit-backend-llamacpp {
+  margin-top: -4px;
+}
+details.hwfit-serve-advanced > .hwfit-serve-row.hwfit-vram-monitor {
+  gap: 4px !important;
+}
 details.hwfit-serve-advanced > .hwfit-serve-row label select,
 details.hwfit-serve-advanced > .hwfit-serve-row label input {
   margin-top: 1px;