fix(dashboard): remove bg graphs, add scrollable lists, show used/total quota

Remove BgGraph background SVGs that were misaligned with foreground graphs.
Add max-height: 270px with overflow-y scroll to quota/processes/commands lists.
Change API quota display from remaining/total to used/total.

💘 Generated with Crush

Assisted-by: GLM-5.1 via Crush <crush@charm.land>

web/src/components/Dashboard.jsx

@@ -3,32 +3,6 @@ import { useI18n } from '../i18n'
 
 const MAX_POINTS = 30
 
-function BgGraph({ data, max, color }) {
-  if (!data || data.length < 2) return null
-  const m = max || Math.max(...data, 1)
-  const w = 120
-  const h = 60
-  const points = data.map((v, i) => {
-    const x = (i / (data.length - 1)) * w
-    const y = h - (v / m) * h
-    return `${x},${y}`
-  })
-  const area = `${points.join(' ')} ${w},${h} 0,${h}`
-  const line = points.join(' ')
-  return (
-    <svg viewBox={`0 0 ${w} ${h}`} className="dash-bg-graph" preserveAspectRatio="none">
-      <defs>
-        <linearGradient id={`g-${color.replace('#','')}`} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity="0.25" />
-          <stop offset="100%" stopColor={color} stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <polygon fill={`url(#g-${color.replace('#','')})`} points={area} />
-      <polyline fill="none" stroke={color} strokeWidth="1.5" points={line} vectorEffect="non-scaling-stroke" opacity="0.6" />
-    </svg>
-  )
-}
-
 function MiniGraph({ data, max, color, label, unit }) {
   if (!data || data.length < 2) return <div className="dash-graph-empty">collecting...</div>
   const m = max || Math.max(...data, 1)
@@ -70,7 +44,6 @@ export default function Dashboard({ api, refreshRef }) {
   const memRef = useRef([])
   const netRxRef = useRef([])
   const netTxRef = useRef([])
-  const procCountRef = useRef([])
 
   const loadData = useCallback(async () => {
     try {
@@ -90,7 +63,6 @@ export default function Dashboard({ api, refreshRef }) {
         netRxRef.current = [...netRxRef.current, metricsData.net_rx_kbs].slice(-MAX_POINTS)
         netTxRef.current = [...netTxRef.current, metricsData.net_tx_kbs].slice(-MAX_POINTS)
       }
-      procCountRef.current = [...procCountRef.current, procData.processes?.length || 0].slice(-MAX_POINTS)
     } catch (err) {
       console.error('Dashboard load error:', err)
     }
@@ -105,99 +77,82 @@ export default function Dashboard({ api, refreshRef }) {
 
   const minimax = (quota || []).find(p => p.name === 'minimax')
   const zai = (quota || []).find(p => p.name === 'zai')
-  const totalQuotaUsed = minimax?.data?.models?.reduce((s, m) => s + (m.used || 0), 0) || 0
-  const totalQuotaMax = minimax?.data?.models?.reduce((s, m) => s + (m.total || 0), 0) || 1
 
   return (
     <div className="dash-grid">
       {/* CPU */}
-      <div className="dash-card dash-card-graph">
-        <BgGraph data={cpuRef.current} max={100} color="#06b6d4" />
-        <div className="dash-card-content">
-          <div className="dash-card-head">
-            <span className="dash-label">CPU</span>
-            <span className="dash-count">{metrics ? metrics.cpu_percent.toFixed(0) : '—'}%</span>
-          </div>
-          <MiniGraph data={cpuRef.current} max={100} color="var(--accent)" label="CPU" unit="%" />
+      <div className="dash-card">
+        <div className="dash-card-head">
+          <span className="dash-label">CPU</span>
+          <span className="dash-count">{metrics ? metrics.cpu_percent.toFixed(0) : '—'}%</span>
         </div>
+        <MiniGraph data={cpuRef.current} max={100} color="var(--accent)" label="CPU" unit="%" />
       </div>
 
       {/* RAM */}
-      <div className="dash-card dash-card-graph">
-        <BgGraph data={memRef.current} max={100} color="#a78bfa" />
-        <div className="dash-card-content">
-          <div className="dash-card-head">
-            <span className="dash-label">RAM</span>
-            <span className="dash-count">{metrics ? `${metrics.mem_used_mb.toFixed(0)}/${metrics.mem_total_mb.toFixed(0)}` : '—'}</span>
-          </div>
-          <MiniGraph data={memRef.current} max={100} color="#a78bfa" label="RAM" unit="%" />
+      <div className="dash-card">
+        <div className="dash-card-head">
+          <span className="dash-label">RAM</span>
+          <span className="dash-count">{metrics ? `${metrics.mem_used_mb.toFixed(0)}/${metrics.mem_total_mb.toFixed(0)}` : '—'}</span>
         </div>
+        <MiniGraph data={memRef.current} max={100} color="#a78bfa" label="RAM" unit="%" />
       </div>
 
       {/* Network */}
-      <div className="dash-card dash-card-graph">
-        <BgGraph data={netRxRef.current} max={null} color="#34d399" />
-        <div className="dash-card-content">
-          <div className="dash-card-head">
-            <span className="dash-label">Network</span>
-            <span className="dash-count">{metrics ? `↓${metrics.net_rx_kbs.toFixed(0)} ↑${metrics.net_tx_kbs.toFixed(0)}` : '—'}</span>
-          </div>
-          <MiniGraph data={netRxRef.current} max={null} color="#34d399" label="RX" unit=" KB/s" />
-          <MiniGraph data={netTxRef.current} max={null} color="#f59e0b" label="TX" unit=" KB/s" />
+      <div className="dash-card">
+        <div className="dash-card-head">
+          <span className="dash-label">Network</span>
+          <span className="dash-count">{metrics ? `↓${metrics.net_rx_kbs.toFixed(0)} ↑${metrics.net_tx_kbs.toFixed(0)}` : '—'}</span>
         </div>
+        <MiniGraph data={netRxRef.current} max={null} color="#34d399" label="RX" unit=" KB/s" />
+        <MiniGraph data={netTxRef.current} max={null} color="#f59e0b" label="TX" unit=" KB/s" />
       </div>
 
       {/* API Quota */}
-      <div className="dash-card dash-card-graph">
-        <BgGraph data={totalQuotaMax > 0 ? [totalQuotaUsed / totalQuotaMax * 100, ...(cpuRef.current.length > 0 ? [] : [0])] : []} max={100} color="#f472b6" />
-        <div className="dash-card-content">
-          <div className="dash-card-head">
-            <span className="dash-label">API Quota</span>
-          </div>
-          <div className="dash-quota-list">
-            {minimax && minimax.data?.models?.map((m, i) => (
-              <div key={i} className="dash-quota-row">
-                <span className="dash-quota-name">{String(m.model).replace('MiniMax-', '')}</span>
-                <div className="dash-bar">
-                  <div className="dash-bar-fill" style={{ width: `${Math.min(100, (m.used / m.total) * 100)}%` }} />
-                </div>
-                <span className="dash-quota-val">{m.remaining}/{m.total}</span>
+      <div className="dash-card">
+        <div className="dash-card-head">
+          <span className="dash-label">API Quota</span>
+        </div>
+        <div className="dash-quota-list">
+          {minimax && minimax.data?.models?.map((m, i) => (
+            <div key={i} className="dash-quota-row">
+              <span className="dash-quota-name">{String(m.model).replace('MiniMax-', '')}</span>
+              <div className="dash-bar">
+                <div className="dash-bar-fill" style={{ width: `${Math.min(100, (m.used / m.total) * 100)}%` }} />
               </div>
-            ))}
-            {minimax && minimax.data?.models?.length === 0 && (
-              <div className="dash-quota-row">
-                <span className="dash-quota-name">MiniMax</span>
-                <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>{minimax.error || 'no data'}</span>
-              </div>
-            )}
-            {zai && (
-              <div className="dash-quota-row">
-                <span className="dash-quota-name">Z.AI</span>
-                <span className="dash-quota-val">{zai.healthy ? '✓ active' : zai.error || '—'}</span>
-              </div>
-            )}
-            {!minimax && !zai && <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>No providers</span>}
-          </div>
+              <span className="dash-quota-val">{m.used}/{m.total}</span>
+            </div>
+          ))}
+          {minimax && minimax.data?.models?.length === 0 && (
+            <div className="dash-quota-row">
+              <span className="dash-quota-name">MiniMax</span>
+              <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>{minimax.error || 'no data'}</span>
+            </div>
+          )}
+          {zai && (
+            <div className="dash-quota-row">
+              <span className="dash-quota-name">Z.AI</span>
+              <span className="dash-quota-val">{zai.healthy ? '✓ active' : zai.error || '—'}</span>
+            </div>
+          )}
+          {!minimax && !zai && <span className="dash-quota-val" style={{ color: 'var(--text-tertiary)' }}>No providers</span>}
         </div>
       </div>
 
       {/* Running Processes */}
-      <div className="dash-card dash-card-graph">
-        <BgGraph data={procCountRef.current} max={null} color="#fb923c" />
-        <div className="dash-card-content">
-          <div className="dash-card-head">
-            <span className="dash-label">Processes</span>
-            <span className="dash-count">{processes.length}</span>
-          </div>
-          <div className="dash-proc-list">
-            {processes.length === 0 && <span className="dash-empty">No relevant processes</span>}
-            {processes.slice(0, 6).map((p, i) => (
-              <div key={i} className="dash-proc-row">
-                <span className="dash-proc-name">{p.name}</span>
-                <span className="dash-proc-res">cpu {p.cpu}% · mem {p.mem}%</span>
-              </div>
-            ))}
-          </div>
+      <div className="dash-card">
+        <div className="dash-card-head">
+          <span className="dash-label">Processes</span>
+          <span className="dash-count">{processes.length}</span>
+        </div>
+        <div className="dash-proc-list">
+          {processes.length === 0 && <span className="dash-empty">No relevant processes</span>}
+          {processes.map((p, i) => (
+            <div key={i} className="dash-proc-row">
+              <span className="dash-proc-name">{p.name}</span>
+              <span className="dash-proc-res">cpu {p.cpu}% · mem {p.mem}%</span>
+            </div>
+          ))}
         </div>
       </div>
 
@@ -208,7 +163,7 @@ export default function Dashboard({ api, refreshRef }) {
         </div>
         <div className="dash-cmd-list">
           {recentCmds.length === 0 && <span className="dash-empty">No history</span>}
-          {recentCmds.slice(0, 8).map((c, i) => (
+          {recentCmds.map((c, i) => (
             <div key={i} className="dash-cmd-row" title={c.cmd}>
               <span className="dash-cmd-shell">{c.shell}</span>
               <span className="dash-cmd-text">{c.cmd.length > 45 ? c.cmd.slice(0, 42) + '...' : c.cmd}</span>

web/src/styles/global.css

@@ -547,16 +547,7 @@ input::placeholder { color: var(--text-disabled); }
   display: flex; flex-direction: column; gap: 8px;
   overflow: hidden;
 }
-.dash-card-graph { padding: 0; }
-.dash-bg-graph {
-  position: absolute; inset: 0; width: 100%; height: 100%;
-  opacity: 0.35; pointer-events: none;
-}
-.dash-card-content {
-  position: relative; z-index: 1;
-  padding: 14px 16px;
-  display: flex; flex-direction: column; gap: 8px;
-}
+
 .dash-span-2 { grid-column: span 2; }
 .dash-card-head {
   display: flex; align-items: center; justify-content: space-between;
@@ -585,7 +576,7 @@ input::placeholder { color: var(--text-disabled); }
 .dash-tool-tag.missing { color: var(--error); }
 
 /* Quota */
-.dash-quota-list { display: flex; flex-direction: column; gap: 6px; }
+.dash-quota-list { display: flex; flex-direction: column; gap: 6px; max-height: 270px; overflow-y: auto; }
 .dash-quota-row { display: flex; align-items: center; gap: 8px; }
 .dash-quota-name {
   font-size: 11px; font-weight: 600; color: var(--text-primary);
@@ -604,7 +595,7 @@ input::placeholder { color: var(--text-disabled); }
 }
 
 /* Processes */
-.dash-proc-list { display: flex; flex-direction: column; gap: 4px; }
+.dash-proc-list { display: flex; flex-direction: column; gap: 4px; max-height: 270px; overflow-y: auto; }
 .dash-proc-row {
   display: flex; justify-content: space-between; align-items: center;
   padding: 4px 0;
@@ -618,7 +609,7 @@ input::placeholder { color: var(--text-disabled); }
 }
 
 /* Commands */
-.dash-cmd-list { display: flex; flex-direction: column; gap: 3px; }
+.dash-cmd-list { display: flex; flex-direction: column; gap: 3px; max-height: 270px; overflow-y: auto; }
 .dash-cmd-row {
   display: flex; align-items: center; gap: 6px;
   padding: 3px 0; overflow: hidden;