fix(frontend): improve memory bar readability

frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx

@@ -93,6 +93,17 @@ describe('StackedMemoryBar', () => {
     expect(segments[0]).toHaveAttribute('x', '0');
   });
 
+  it('renders reclaimable cache as a solid segment so the value label stays legible', () => {
+    const { container } = render(() => (
+      <StackedMemoryBar used={6 * 1024 ** 3} total={8 * 1024 ** 3} cache={1 * 1024 ** 3} />
+    ));
+
+    const segments = getSegments(container);
+    expect(segments).toHaveLength(2);
+    expect(segments[1].getAttribute('fill')).toContain('251, 191, 36');
+    expect(container.querySelector('pattern')).not.toBeInTheDocument();
+  });
+
   it('renders balloon segment when active ballooning is in effect', () => {
     // used=2GB, total=8GB, balloon=4GB — active ballooning
     const { container } = render(() => (

frontend-modern/src/components/Workloads/StackedMemoryBar.tsx

@@ -1,4 +1,4 @@
-import { Show, For, createUniqueId } from 'solid-js';
+import { Show, For } from 'solid-js';
 import { AnimatedNumber } from '@/components/shared/AnimatedNumber';
 import { TooltipPortal } from '@/components/shared/TooltipPortal';
 import { formatPercent } from '@/utils/format';
@@ -8,7 +8,6 @@ import { useStackedMemoryBarState } from './useStackedMemoryBarState';
 export function StackedMemoryBar(props: StackedMemoryBarProps) {
   const state = useStackedMemoryBarState(props);
   const presentation = state.presentation;
-  const stripePatternId = createUniqueId();
   const swapBarWidth = () => String(Math.max(0, Math.min(presentation().swapBarPercent, 100)));
   const segmentEdge = (leftPercent: number, widthPercent: number) =>
     String(Math.max(0, Math.min(leftPercent + widthPercent, 100)));
@@ -29,19 +28,6 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
           viewBox="0 0 100 100"
           preserveAspectRatio="none"
         >
-          {/* Vertical stripes only: the non-uniform viewBox scaling would
-              shear any diagonal texture. Keeps the reclaimable-cache segment
-              distinguishable from a warning-yellow used segment. */}
-          <defs>
-            <pattern
-              id={stripePatternId}
-              patternUnits="userSpaceOnUse"
-              width="2.5"
-              height="100"
-            >
-              <rect x="0" y="0" width="1.25" height="100" fill="rgba(217, 119, 6, 0.5)" />
-            </pattern>
-          </defs>
           <For each={presentation().segments}>
             {(segment, idx) => (
               <>
@@ -55,18 +41,6 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
                   rx="3"
                   fill={segment.color}
                 />
-                <Show when={segment.striped}>
-                  <rect
-                    data-stacked-memory-stripes="true"
-                    class="metric-fill-geometry"
-                    x={String(Math.max(0, Math.min(segment.leftPercent, 100)))}
-                    y="0"
-                    width={String(Math.max(0, segment.widthPercent))}
-                    height="100"
-                    rx="3"
-                    fill={`url(#${stripePatternId})`}
-                  />
-                </Show>
                 <Show when={idx() < presentation().segments.length - 1}>
                   <line
                     class="metric-fill-divider"

frontend-modern/src/components/Workloads/__tests__/stackedMemoryBarModel.test.ts

@@ -17,9 +17,6 @@ describe('buildStackedMemoryBarPresentation', () => {
     ]);
     expect(presentation.segments[1].leftPercent).toBeCloseTo(25);
     expect(presentation.segments[1].widthPercent).toBeCloseTo(37.5);
-    // Cache is textured so it never blends into a warning-yellow used segment.
-    expect(presentation.segments[1].striped).toBe(true);
-    expect(presentation.segments[0].striped).toBeUndefined();
 
     const rows = Object.fromEntries(presentation.tooltipRows.map((row) => [row.label, row.value]));
     expect(rows['Used']).toBe('4.00 GB');
@@ -88,10 +85,7 @@ describe('buildStackedMemoryBarPresentation', () => {
   });
 
   it('matches the pre-cache layout when no cache is reported', () => {
-    const presentation = buildStackedMemoryBarPresentation(
-      { used: 4 * GiB, total: 16 * GiB },
-      400,
-    );
+    const presentation = buildStackedMemoryBarPresentation({ used: 4 * GiB, total: 16 * GiB }, 400);
 
     expect(presentation.segments.map((segment) => segment.label)).toEqual(['Active']);
     const labels = presentation.tooltipRows.map((row) => row.label);

frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts

@@ -29,8 +29,6 @@ export interface StackedMemorySegment {
   label: string;
   leftPercent: number;
   widthPercent: number;
-  /** Diagonal-stripe texture so reclaimable cache stays distinguishable from a warning-yellow used segment. */
-  striped?: boolean;
 }
 
 export interface StackedMemoryTooltipRow {
@@ -131,7 +129,6 @@ function getSegments(
       label: 'Reclaimable',
       leftPercent: usedPercent,
       widthPercent: cachePercent,
-      striped: true,
     });
   }