npm - groove-dev - Versions diffs - 0.27.57 → 0.27.59 - Mend

groove-dev 0.27.57 → 0.27.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-X58BAjGp.js"></script>
+    <script type="module" crossorigin src="/assets/index-BycOlqLx.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-C5WTeZO4.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BrfCzrxJ.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.57",
+  "version": "0.27.59",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/components/chat/chat-header.jsx CHANGED Viewed

@@ -50,7 +50,7 @@ export function ChatHeader({ conversation, model, onModelChange, onModeChange })
   const mode = conversation.mode || 'api';
   return (
-    <div className="h-11 flex items-center gap-3 px-4 border-b border-border bg-surface-1 flex-shrink-0">
+    <div className="h-11 flex items-center gap-3 px-4 border-b border-border-subtle bg-surface-0/80 flex-shrink-0">
       <Hash size={14} className="text-text-4 flex-shrink-0" />
       {editing ? (

package/packages/gui/src/components/chat/chat-input.jsx CHANGED Viewed

@@ -53,7 +53,7 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled }) {
   return (
     <div className="px-4 py-3">
-      <div className="flex items-end gap-2 rounded-2xl bg-surface-3/60 border border-border-subtle px-3 py-2 focus-within:border-accent/30 transition-colors">
+      <div className="flex items-end gap-2 rounded-2xl bg-surface-1/80 border border-accent/8 px-3 py-2 focus-within:border-accent/30 transition-colors">
         <input
           ref={fileInputRef}
           type="file"

package/packages/gui/src/components/chat/chat-messages.jsx CHANGED Viewed

@@ -1,10 +1,17 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useRef, useEffect, useState } from 'react';
-import { Copy, Check, ArrowRight, MessageCircle, Sparkles } from 'lucide-react';
+import { Copy, Check, ArrowRight } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
 import { ThinkingIndicator } from '../ui/thinking-indicator';
+const API_STATUS_MESSAGES = [
+  'Generating response...',
+  'Processing...',
+  'Thinking...',
+  'Almost there...',
+];
 function CopyButton({ text }) {
   const [copied, setCopied] = useState(false);
   function handleCopy() {
@@ -242,7 +249,7 @@ function UserMessage({ msg }) {
   return (
     <div className="flex justify-end">
       <div className="max-w-[75%]">
-        <div className="px-4 py-3 rounded-2xl rounded-br-md bg-accent/10 border border-accent/15">
+        <div className="px-4 py-3 rounded-xl bg-surface-3/80 border border-border-subtle">
           <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.text}</p>
         </div>
         <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
@@ -253,17 +260,12 @@ function UserMessage({ msg }) {
 function AssistantMessage({ msg, model }) {
   return (
-    <div className="flex gap-3">
-      <div className="w-7 h-7 rounded-full bg-surface-4 border border-border-subtle flex items-center justify-center flex-shrink-0 mt-0.5">
-        <Sparkles size={13} className="text-accent" />
-      </div>
-      <div className="flex-1 min-w-0 max-w-[85%]">
-        {model && <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{model}</div>}
-        <div className="px-4 py-3 rounded-2xl rounded-bl-md bg-surface-4 border border-border-subtle">
-          <RenderedMarkdown text={msg.text} />
-        </div>
-        <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
+    <div className="max-w-[85%]">
+      {model && <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{model}</div>}
+      <div className="border-l-2 border-accent/30 pl-3.5">
+        <RenderedMarkdown text={msg.text} />
       </div>
+      <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
     </div>
   );
 }
@@ -288,18 +290,42 @@ function StreamingCursor() {
 function WelcomeMessage() {
   return (
     <div className="flex flex-col items-center justify-center h-full text-center py-16">
-      <div className="w-16 h-16 rounded-full bg-accent/8 flex items-center justify-center mb-5">
-        <MessageCircle size={28} className="text-accent" />
+      <p className="text-sm text-text-3 font-sans">Send a message to start</p>
+    </div>
+  );
+}
+function ApiTypingIndicator() {
+  const [idx, setIdx] = useState(0);
+  const [fade, setFade] = useState(true);
+  useEffect(() => {
+    const t = setInterval(() => {
+      setFade(false);
+      setTimeout(() => {
+        setIdx((i) => (i + 1) % API_STATUS_MESSAGES.length);
+        setFade(true);
+      }, 250);
+    }, 2800);
+    return () => clearInterval(t);
+  }, []);
+  return (
+    <div className="border-l-2 border-accent/30 pl-3.5 py-1 flex items-center gap-2.5">
+      <div className="relative w-3.5 h-3.5 flex-shrink-0">
+        <span className="absolute inset-0 rounded-full border border-transparent border-t-accent animate-spin" style={{ animationDuration: '0.9s' }} />
       </div>
-      <h2 className="text-xl font-bold text-text-0 font-sans mb-2">Start a conversation</h2>
-      <p className="text-sm text-text-2 font-sans max-w-sm leading-relaxed">
-        Send a message to begin. Your conversation history is saved locally and syncs across sessions.
-      </p>
+      <span
+        className="text-[12px] font-sans text-text-3 transition-opacity duration-[250ms]"
+        style={{ opacity: fade ? 1 : 0 }}
+      >
+        {API_STATUS_MESSAGES[idx]}
+      </span>
     </div>
   );
 }
-export function ChatMessages({ messages, isStreaming, model }) {
+export function ChatMessages({ messages, isStreaming, model, mode }) {
   const scrollRef = useRef(null);
   const isAtBottomRef = useRef(true);
@@ -335,12 +361,11 @@ export function ChatMessages({ messages, isStreaming, model }) {
         return <AssistantMessage key={i} msg={msg} model={model} />;
       })}
       {isStreaming && (
-        <div className="flex gap-3">
-          <div className="w-7 h-7 rounded-full bg-surface-4 border border-border-subtle flex items-center justify-center flex-shrink-0">
-            <Sparkles size={13} className="text-accent" />
-          </div>
+        mode === 'agent' ? (
           <ThinkingIndicator className="py-1" />
-        </div>
+        ) : (
+          <ApiTypingIndicator />
+        )
       )}
     </div>
   );

package/packages/gui/src/components/chat/chat-view.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useCallback } from 'react';
-import { MessageCircle, Plus, Sparkles, Zap } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { ConversationList } from './conversation-list';
@@ -11,44 +11,16 @@ import { ChatInput } from './chat-input';
 function EmptyState({ onNewChat }) {
   return (
     <div className="flex-1 flex items-center justify-center">
-      <div className="max-w-md w-full text-center space-y-8 px-8">
-        <div className="relative mx-auto w-20 h-20">
-          <div className="absolute inset-0 rounded-full bg-accent/8 animate-pulse" />
-          <div className="absolute inset-1 rounded-full bg-surface-3 border border-border-subtle flex items-center justify-center shadow-lg shadow-accent/5">
-            <MessageCircle size={32} className="text-accent" />
-          </div>
-        </div>
-        <div className="space-y-3">
-          <h1 className="text-2xl font-bold text-text-0 font-sans tracking-tight">Groove Chat</h1>
-          <p className="text-sm text-text-2 font-sans max-w-sm mx-auto leading-relaxed">
-            A command center disguised as a conversation. Every provider, every model, full project context.
-          </p>
-        </div>
+      <div className="text-center space-y-4">
+        <h1 className="text-lg font-semibold text-text-1 font-sans">Groove Chat</h1>
+        <p className="text-sm text-text-3 font-sans">Every provider, every model, full project context.</p>
         <button
           onClick={onNewChat}
-          className="inline-flex items-center gap-2 h-10 px-6 rounded-lg bg-accent/15 text-accent text-sm font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
+          className="inline-flex items-center gap-2 h-9 px-5 rounded-lg bg-accent/15 text-accent text-sm font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
         >
-          <Plus size={16} />
+          <Plus size={14} />
           New Chat
         </button>
-        <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-surface-3 border border-border-subtle">
-            <Sparkles size={14} className="text-purple flex-shrink-0" />
-            <span className="text-2xs text-text-2 font-sans">Multi-model routing</span>
-          </div>
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-surface-3 border border-border-subtle">
-            <Zap size={14} className="text-warning flex-shrink-0" />
-            <span className="text-2xs text-text-2 font-sans">Streaming responses</span>
-          </div>
-        </div>
-        <p className="text-xs text-text-4 font-sans">
-          <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+Shift+N</kbd>
-          <span className="mx-1.5">new chat</span>
-        </p>
       </div>
     </div>
   );
@@ -113,10 +85,10 @@ export function ChatView() {
     : null;
   return (
-    <div className="flex h-full bg-surface-2">
+    <div className="flex h-full bg-surface-0">
       {/* Conversation sidebar */}
       <div className={cn(
-        'flex-shrink-0 border-r border-border bg-surface-1 transition-all duration-200 overflow-hidden',
+        'flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
         sidebarCollapsed ? 'w-0' : 'w-64',
       )}>
         <ConversationList onNewChat={() => handleNewChat()} />
@@ -131,6 +103,7 @@ export function ChatView() {
               messages={messages}
               isStreaming={isStreaming}
               model={activeConversation.model}
+              mode={activeConversation.mode || 'api'}
             />
             <ChatInput
               onSend={handleSend}

package/packages/gui/src/components/layout/activity-bar.jsx CHANGED Viewed

@@ -7,13 +7,13 @@ import { isElectron, getPlatform } from '../../lib/electron';
 const BASE_NAV_ITEMS = [
   { id: 'agents',      icon: Network,   label: 'Agents' },
+  { id: 'chat',        icon: MessageCircle, label: 'Chat' },
   { id: 'editor',      icon: Code2,     label: 'Editor' },
   { id: 'dashboard',   icon: ChartSpline, label: 'Dashboard' },
+  { id: 'teams',       icon: Users,     label: 'Teams' },
   { id: 'marketplace', icon: Puzzle,     label: 'Marketplace' },
   { id: 'toys',        icon: Gamepad2,  label: 'Toys' },
   { id: 'models',      icon: Box,       label: 'Models' },
-  { id: 'teams',       icon: Users,     label: 'Teams' },
-  { id: 'chat',        icon: MessageCircle, label: 'Chat' },
 ];
 const NETWORK_NAV_ITEM = { id: 'network', icon: Globe, label: 'Network' };

package/packages/gui/src/components/network/activity-stream.jsx ADDED Viewed

@@ -0,0 +1,105 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo, useState, useEffect, useRef } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { HEX } from '../../lib/theme-hex';
+import { ScrollArea } from '../ui/scroll-area';
+const FILTERS = ['All', 'Sessions', 'Errors', 'Connections'];
+const LEVEL_FILTER = {
+  Sessions: ['session'],
+  Errors: ['error', 'warning'],
+  Connections: ['connected', 'disconnected'],
+};
+const LEVEL_COLOR = {
+  info: HEX.text3,
+  success: HEX.success,
+  warning: HEX.warning,
+  error: HEX.danger,
+  connected: HEX.success,
+  disconnected: HEX.warning,
+  session: HEX.accent,
+};
+function fmtTime(ts) {
+  if (!ts) return '--:--:--';
+  const d = new Date(ts);
+  return d.toLocaleTimeString('en-GB', { hour12: false });
+}
+function levelTag(level) {
+  const tags = {
+    info: 'info', success: ' ok ', warning: 'warn',
+    error: 'ERR!', connected: 'conn', disconnected: 'disc', session: 'sess',
+  };
+  return tags[level] || level || 'info';
+}
+export const ActivityStream = memo(function ActivityStream() {
+  const events = useGrooveStore((s) => s.networkEvents);
+  const [filter, setFilter] = useState('All');
+  const bottomRef = useRef(null);
+  const filtered = filter === 'All'
+    ? events
+    : events.filter((ev) => {
+        const level = ev.level || ev.type || 'info';
+        return (LEVEL_FILTER[filter] || []).includes(level);
+      });
+  const display = filtered.slice(-200);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [display.length]);
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-2 px-3 pt-2.5 pb-1 flex-shrink-0">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Activity</span>
+        <div className="flex-1" />
+        <div className="flex items-center gap-0.5">
+          {FILTERS.map((f) => (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={cn(
+                'px-2 py-0.5 text-2xs font-mono rounded-sm transition-colors cursor-pointer',
+                filter === f
+                  ? 'bg-[rgba(51,175,188,0.15)] text-accent'
+                  : 'bg-surface-4 text-text-3 hover:text-text-2',
+              )}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+      <ScrollArea className="flex-1 min-h-0">
+        {display.length === 0 ? (
+          <div className="px-3 py-6 text-2xs font-mono text-text-4 text-center">
+            No events yet — toggle your node on to start.
+          </div>
+        ) : (
+          <div className="px-2 py-1">
+            {display.map((ev, i) => {
+              const level = ev.level || ev.type || 'info';
+              const color = LEVEL_COLOR[level] || HEX.text3;
+              return (
+                <div key={i} className="flex items-start gap-0 font-mono text-2xs leading-relaxed">
+                  <span className="text-text-4 flex-shrink-0 w-[62px]">[{fmtTime(ev.timestamp || ev.ts)}]</span>
+                  <span className="flex-shrink-0 w-[36px]" style={{ color }}>{levelTag(level)}</span>
+                  <span className="text-text-2 break-words min-w-0">{ev.msg || ev.message || ev.text || 'event'}</span>
+                </div>
+              );
+            })}
+            <div ref={bottomRef} />
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+});

package/packages/gui/src/components/network/compute-header.jsx ADDED Viewed

@@ -0,0 +1,166 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { HEX } from '../../lib/theme-hex';
+import { Tooltip } from '../ui/tooltip';
+import { HelpCircle } from 'lucide-react';
+const BAR_WIDTH = 28;
+function gaugeColor(ratio) {
+  if (ratio > 0.9) return HEX.danger;
+  if (ratio > 0.7) return HEX.warning;
+  return HEX.success;
+}
+function fmtMbToGb(mb) {
+  if (!mb) return '0';
+  return (mb / 1024).toFixed(1);
+}
+function AsciiBar({ label, value, max, unit, nodeCount }) {
+  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+  const filled = Math.round(ratio * BAR_WIDTH);
+  const empty = BAR_WIDTH - filled;
+  const bar = '\u2502'.repeat(filled) + '\u2500'.repeat(empty);
+  const color = gaugeColor(ratio);
+  let displayVal, displayMax;
+  if (unit === 'GB') {
+    displayVal = fmtMbToGb(value);
+    displayMax = fmtMbToGb(max);
+  } else if (unit === 'cores' || unit === 'Mbps') {
+    displayVal = Math.round(value);
+    displayMax = Math.round(max);
+  } else {
+    displayVal = value.toFixed(1);
+    displayMax = max.toFixed(1);
+  }
+  return (
+    <div className="flex items-center gap-2 font-mono text-xs leading-tight">
+      <span className="w-[40px] text-right text-text-3 uppercase text-2xs tracking-wider flex-shrink-0">
+        {label}
+      </span>
+      <span className="text-text-4">[</span>
+      <span style={{ color: ratio > 0 ? color : undefined }} className={cn('whitespace-pre', !ratio && 'text-text-4')}>
+        {bar}
+      </span>
+      <span className="text-text-4">]</span>
+      <span className="text-text-1 tabular-nums whitespace-nowrap text-2xs">
+        {displayVal} / {displayMax} {unit}
+      </span>
+      {nodeCount != null && (
+        <span className="text-text-4 text-2xs whitespace-nowrap">({nodeCount} nodes)</span>
+      )}
+    </div>
+  );
+}
+function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
+  if (!data || data.length < 2) return <div style={{ width, height }} />;
+  const vals = data.map((d) => (typeof d === 'number' ? d : d.v));
+  const min = Math.min(...vals);
+  const max = Math.max(...vals);
+  const range = max - min || 1;
+  const points = vals.map((v, i) => {
+    const x = (i / (vals.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 2) - 1;
+    return `${x},${y}`;
+  }).join(' ');
+  const gradId = `net-${color.replace('#', '')}`;
+  return (
+    <svg width={width} height={height} className="flex-shrink-0">
+      <defs>
+        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.2" />
+          <stop offset="100%" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#${gradId})`} />
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeOpacity="0.8" />
+    </svg>
+  );
+}
+function KpiCard({ label, value, color = HEX.accent, hint, className }) {
+  return (
+    <div className={cn('flex items-center gap-2.5 px-3 py-2.5 min-w-0 bg-surface-1', className)}>
+      <div className="flex-1 min-w-0">
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5 truncate flex items-center gap-1">
+          {label}
+          {hint && (
+            <Tooltip content={<span className="max-w-[220px] block leading-relaxed">{hint}</span>} side="bottom">
+              <HelpCircle size={10} className="text-text-4 hover:text-text-2 cursor-help flex-shrink-0 transition-colors" />
+            </Tooltip>
+          )}
+        </div>
+        <div className="text-base font-semibold font-mono text-text-0 tabular-nums leading-none">{value}</div>
+      </div>
+    </div>
+  );
+}
+const MAX_RAM_MB = 256 * 1024;
+const MAX_VRAM_MB = 128 * 1024;
+const MAX_CPU = 128;
+const MAX_LOAD = 4.0;
+export const ComputeHeader = memo(function ComputeHeader() {
+  const compute = useGrooveStore((s) => s.networkCompute);
+  const nodes = useGrooveStore((s) => s.networkStatus.nodes || []);
+  const models = useGrooveStore((s) => s.networkStatus.models || []);
+  const allZero = !compute.totalRamMb && !compute.totalVramMb && !compute.totalCpuCores;
+  const activeNodes = nodes.filter((n) => n.status === 'active');
+  const avgGpuUtil = activeNodes.length > 0
+    ? activeNodes.reduce((s, n) => s + (n.gpu_utilization_pct || 0), 0) / activeNodes.length
+    : 0;
+  const gpuColor = avgGpuUtil > 80 ? HEX.danger : avgGpuUtil > 50 ? HEX.warning : HEX.success;
+  const loadColor = compute.avgLoad > 2.0 ? HEX.danger : compute.avgLoad > 1.0 ? HEX.warning : HEX.success;
+  const activeModel = models.length > 0
+    ? (typeof models[0] === 'string' ? models[0] : models[0].name)
+    : 'google/gemma-3-4b';
+  const kpis = [
+    { label: 'RAM', value: `${fmtMbToGb(compute.totalRamMb)} GB`, color: HEX.accent, hint: 'Total RAM across all network nodes.' },
+    { label: 'VRAM', value: `${fmtMbToGb(compute.totalVramMb)} GB`, color: HEX.info, hint: 'Total GPU VRAM across all network nodes.' },
+    { label: 'CPU Cores', value: `${compute.totalCpuCores}`, color: HEX.purple, hint: 'Total CPU cores across all network nodes.' },
+    { label: 'GPU Util', value: avgGpuUtil > 0 ? `${Math.round(avgGpuUtil)}%` : '--', color: gpuColor, hint: 'Average GPU utilization across active nodes. Green <50%, yellow 50-80%, red >80%.' },
+    { label: 'Nodes', value: `${compute.activeNodes}/${compute.totalNodes}`, color: HEX.accent, hint: 'Active nodes out of total registered.' },
+    { label: 'Load', value: compute.avgLoad > 0 ? compute.avgLoad.toFixed(2) : '0.00', color: loadColor, hint: 'Average load across active nodes. Green <1.0, yellow 1.0-2.0, red >2.0.' },
+    { label: 'Model', value: activeModel, color: HEX.info, hint: 'Active inference model on the network.' },
+  ];
+  return (
+    <div className="flex-shrink-0">
+      <div className="flex flex-wrap border-b border-border" style={{ background: 'var(--color-surface-0)' }}>
+        {kpis.map((kpi) => (
+          <KpiCard
+            key={kpi.label}
+            label={kpi.label}
+            value={kpi.value}
+            color={kpi.color}
+            hint={kpi.hint}
+            className={cn('flex-1 basis-[14.2%] min-w-[110px]', 'border-b border-r border-border')}
+          />
+        ))}
+      </div>
+      <div className="bg-surface-1 border-b border-border px-4 py-2.5">
+        {allZero ? (
+          <div className="text-2xs font-mono text-text-4">Waiting for network data...</div>
+        ) : (
+          <div className="flex flex-col gap-0.5">
+            <AsciiBar label="RAM" value={compute.totalRamMb} max={MAX_RAM_MB} unit="GB" nodeCount={compute.totalNodes} />
+            <AsciiBar label="VRAM" value={compute.totalVramMb} max={MAX_VRAM_MB} unit="GB" nodeCount={compute.totalNodes} />
+            <AsciiBar label="CPU" value={compute.totalCpuCores} max={MAX_CPU} unit="cores" />
+            <AsciiBar label="GPU%" value={avgGpuUtil} max={100} unit="%" />
+            <AsciiBar label="LOAD" value={compute.avgLoad} max={MAX_LOAD} unit="" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});