updated

controller/internal/web/server.go

@@ -158,6 +158,13 @@ func (s *Server) loadTemplates() {
 			}
 			return fmt.Sprintf("%.2f GB", gb)
 		},
+		"subtract": func(a, b int) int {
+			r := a - b
+			if r < 0 {
+				return 0
+			}
+			return r
+		},
 	}
 
 	s.tmpl = template.Must(template.New("").Funcs(funcMap).Parse(allTemplates))
@@ -422,6 +429,11 @@ func (s *Server) deployHandler(w http.ResponseWriter, _ *http.Request, name stri
 				percent = afterReqMB * 100 / usableMB
 			}
 
+			committedPercent := 0
+			if usableMB > 0 {
+				committedPercent = committedReqMB * 100 / usableMB
+			}
+
 			memInfo["Available"] = true
 			memInfo["TotalMB"] = totalMB
 			memInfo["ReservedMB"] = reservedMB
@@ -430,6 +442,7 @@ func (s *Server) deployHandler(w http.ResponseWriter, _ *http.Request, name stri
 			memInfo["NewRequestMB"] = newReqMB
 			memInfo["AfterMB"] = afterReqMB
 			memInfo["Percent"] = percent
+			memInfo["CommittedPercent"] = committedPercent
 			memInfo["Blocked"] = newReqMB > 0 && afterReqMB > usableMB
 			memInfo["OvercommitWarn"] = newLimitMB > 0 && afterLimitMB > totalMB
 		}

controller/internal/web/templates.go

@@ -329,8 +329,13 @@ const deployTmpl = `
             <span class="memory-summary-label">Memória foglalás</span>
             <span class="memory-summary-value">{{.AfterMB}} MB / {{.UsableMB}} MB ({{.Percent}}%)</span>
         </div>
-        <div class="system-bar" style="margin-bottom:0">
-            <div class="system-bar-fill system-bar-{{if ge .Percent 85}}red{{else if ge .Percent 70}}yellow{{else}}green{{end}}" style="width:{{.Percent}}%"></div>
+        <div class="memory-bar-stacked">
+            <div class="memory-bar-segment memory-bar-committed" style="width:{{.CommittedPercent}}%" title="Jelenlegi foglalás: {{.CommittedMB}} MB"></div>
+            <div class="memory-bar-segment memory-bar-new" style="width:{{subtract .Percent .CommittedPercent}}%" title="{{$.Meta.DisplayName}}: +{{.NewRequestMB}} MB"></div>
+        </div>
+        <div class="memory-bar-legend">
+            <span class="memory-legend-item"><span class="memory-legend-dot memory-legend-committed"></span>Jelenlegi foglalás ({{.CommittedMB}} MB)</span>
+            <span class="memory-legend-item"><span class="memory-legend-dot memory-legend-new"></span>{{$.Meta.DisplayName}} (+{{.NewRequestMB}} MB)</span>
         </div>
         {{if .OvercommitWarn}}
         <div class="alert alert-warning" style="margin-top:0.5rem;margin-bottom:0">
@@ -1177,6 +1182,85 @@ select.form-control option { background: var(--bg-secondary); color: var(--text-
     color: var(--text-muted);
     font-family: 'JetBrains Mono', monospace;
 }
+.memory-bar-stacked {
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    background: linear-gradient(to right,
+        rgba(35, 134, 54, 0.10) 0%, rgba(35, 134, 54, 0.10) 70%,
+        rgba(210, 153, 34, 0.18) 70%, rgba(210, 153, 34, 0.18) 85%,
+        rgba(218, 54, 51, 0.18) 85%, rgba(218, 54, 51, 0.18) 100%
+    );
+}
+.memory-bar-stacked::before {
+    content: '';
+    position: absolute;
+    left: 70%;
+    top: -1px;
+    bottom: -1px;
+    width: 2px;
+    background: var(--yellow);
+    border-radius: 1px;
+    opacity: 0.5;
+    z-index: 2;
+}
+.memory-bar-stacked::after {
+    content: '';
+    position: absolute;
+    left: 85%;
+    top: -1px;
+    bottom: -1px;
+    width: 2px;
+    background: var(--red);
+    border-radius: 1px;
+    opacity: 0.5;
+    z-index: 2;
+}
+.memory-bar-segment {
+    height: 100%;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+    transition: width 0.3s ease;
+}
+.memory-bar-committed {
+    background: var(--green);
+    box-shadow: 0 0 6px rgba(35, 134, 54, 0.4);
+    border-radius: 5px 0 0 5px;
+}
+.memory-bar-new {
+    background: #4edf72;
+    box-shadow: 0 0 6px rgba(78, 223, 114, 0.3);
+    border-radius: 0 5px 5px 0;
+}
+.memory-bar-legend {
+    display: flex;
+    gap: 1.25rem;
+    margin-top: 0.5rem;
+}
+.memory-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: .75rem;
+    color: var(--text-secondary);
+}
+.memory-legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+.memory-legend-committed {
+    background: var(--green);
+}
+.memory-legend-new {
+    background: #4edf72;
+}
 
 /* Logs */
 .logs-container {