vram indicator on linux and windows

electron/main/ipc-handlers.ts

@@ -629,6 +629,29 @@ export function setupIpcHandlers(pythonBridge: PythonBridge, getWindow: WindowGe
     return { total, used: total - free, available: free }
   })
 
+  // GPU memory (VRAM) — NVIDIA only via nvidia-smi
+  ipcMain.handle('system:gpuMemory', async () => {
+    if (process.platform === 'darwin' && process.arch === 'arm64') {
+      // Apple Silicon: unified memory, no separate VRAM
+      return null
+    }
+    try {
+      const { stdout } = await pExecFile('nvidia-smi', [
+        '--query-gpu=memory.total,memory.used',
+        '--format=csv,noheader,nounits'
+      ])
+      const line = stdout.trim().split('\n')[0].trim()
+      const [totalMiB, usedMiB] = line.split(',').map(s => parseInt(s.trim(), 10))
+      if (isNaN(totalMiB) || isNaN(usedMiB) || totalMiB === 0) return null
+      const total = totalMiB * 1024 * 1024
+      const used = usedMiB * 1024 * 1024
+      const available = total - used
+      return { total, used, available }
+    } catch {
+      return null
+    }
+  })
+
   ipcMain.handle('app:info', () => ({
     version:   app.getVersion(),
     userData:  app.getPath('userData'),

electron/preload/electron-api.ts

@@ -47,6 +47,8 @@ export function createElectronApi(ipcRenderer: IpcRendererLike, webFrame: WebFra
     system: {
       memory: (): Promise<{ total: number; used: number; available: number }> =>
         ipcRenderer.invoke('system:memory') as Promise<{ total: number; used: number; available: number }>,
+      gpuMemory: (): Promise<{ total: number; used: number; available: number } | null> =>
+        ipcRenderer.invoke('system:gpuMemory') as Promise<{ total: number; used: number; available: number } | null>,
     },
 
     // Python / FastAPI bridge

src/areas/settings/components/ApplicationSection.tsx

@@ -2,7 +2,7 @@ import { useAppStore } from '@shared/stores/appStore'
 import { Section, Card, Row, Toggle } from '@shared/ui'
 
 export function ApplicationSection(): JSX.Element {
-  const { showRamIndicator, setShowRamIndicator } = useAppStore()
+  const { showRamIndicator, setShowRamIndicator, showVramIndicator, setShowVramIndicator } = useAppStore()
 
   return (
     <Section title="Application" subtitle="General application settings.">
@@ -13,6 +13,12 @@ export function ApplicationSection(): JSX.Element {
         >
           <Toggle value={showRamIndicator} onChange={setShowRamIndicator} />
         </Row>
+        <Row
+          label="VRAM indicator"
+          description="Show live GPU memory usage in the top bar (NVIDIA only)."
+        >
+          <Toggle value={showVramIndicator} onChange={setShowVramIndicator} />
+        </Row>
       </Card>
     </Section>
   )

src/shared/components/layout/MemoryIndicator.tsx

@@ -1,20 +1,37 @@
 import { useEffect, useState } from 'react'
+import { useAppStore } from '@shared/stores/appStore'
 
 const GB = 1024 ** 3
 
 function fmtGB(bytes: number): string {
   return (bytes / GB).toFixed(1)
 }
 
+function getBarColors(pct: number): { barColor: string; textColor: string } {
+  if (pct >= 90) return { barColor: 'bg-red-500', textColor: 'text-red-300' }
+  if (pct >= 75) return { barColor: 'bg-amber-500', textColor: 'text-amber-300' }
+  return { barColor: 'bg-emerald-500', textColor: 'text-zinc-300' }
+}
+
 export default function MemoryIndicator(): JSX.Element | null {
-  const [mem, setMem] = useState<{ total: number; used: number; available: number } | null>(null)
+  const [ram, setRam] = useState<{ total: number; used: number; available: number } | null>(null)
+  const [vram, setVram] = useState<{ total: number; used: number; available: number } | null>(null)
+  const platform = useAppStore(s => s.platform)
+  const isMac = platform === 'darwin'
+  const showVramIndicator = useAppStore(s => s.showVramIndicator)
 
   useEffect(() => {
     let cancelled = false
     const tick = async () => {
       try {
-        const next = await window.electron.system.memory()
-        if (!cancelled) setMem(next)
+        const [ramNext, vramNext] = await Promise.all([
+          window.electron.system.memory(),
+          isMac ? Promise.resolve(null) : window.electron.system.gpuMemory(),
+        ])
+        if (!cancelled) {
+          setRam(ramNext)
+          setVram(vramNext)
+        }
       } catch {
         // Renderer should not break if memory sampling fails.
       }
@@ -25,42 +42,59 @@ export default function MemoryIndicator(): JSX.Element | null {
       cancelled = true
       clearInterval(id)
     }
-  }, [])
+  }, [isMac])
 
-  if (!mem) return null
+  if (!ram) return null
 
-  const pct = mem.total > 0 ? Math.min(100, Math.round((mem.used / mem.total) * 100)) : 0
+  const ramPct = ram.total > 0 ? Math.min(100, Math.round((ram.used / ram.total) * 100)) : 0
+  const ramColors = getBarColors(ramPct)
 
-  let barColor = 'bg-emerald-500'
-  let textColor = 'text-zinc-300'
-  if (pct >= 90) {
-    barColor = 'bg-red-500'
-    textColor = 'text-red-300'
-  } else if (pct >= 75) {
-    barColor = 'bg-amber-500'
-    textColor = 'text-amber-300'
-  }
+  const ramTooltip =
+    `RAM:\n` +
+    `  Used:      ${fmtGB(ram.used)} GB\n` +
+    `  Available: ${fmtGB(ram.available)} GB\n` +
+    `  Total:     ${fmtGB(ram.total)} GB`
 
-  const tooltip =
-    `Used:      ${fmtGB(mem.used)} GB\n` +
-    `Available: ${fmtGB(mem.available)} GB\n` +
-    `Total:     ${fmtGB(mem.total)} GB`
+  const vramBar = showVramIndicator && !isMac && vram && vram.total > 0 ? (() => {
+    const vramPct = Math.min(100, Math.round((vram.used / vram.total) * 100))
+    const vramColors = getBarColors(vramPct)
+    const vramTooltip =
+      `VRAM:\n` +
+      `  Used:      ${fmtGB(vram.used)} GB\n` +
+      `  Available: ${fmtGB(vram.available)} GB\n` +
+      `  Total:     ${fmtGB(vram.total)} GB`
+    return (
+      <div className="flex items-center gap-2 ml-4" title={vramTooltip}>
+        <span className="text-[10px] font-medium text-zinc-500 tracking-wide uppercase">VRAM</span>
+        <div className="w-20 h-1.5 bg-zinc-900 rounded-full overflow-hidden">
+          <div
+            className={`h-full ${vramColors.barColor} transition-all duration-500 ease-out`}
+            style={{ width: `${vramPct}%` }}
+          />
+        </div>
+        <span className={`text-[11px] tabular-nums ${vramColors.textColor}`}>
+          {fmtGB(vram.used)} / {fmtGB(vram.total)} GB
+        </span>
+      </div>
+    )
+  })() : null
 
   return (
     <div
       className="flex items-center gap-2 mr-3 px-2.5 py-1 rounded-md bg-zinc-800/60 border border-zinc-700/60 no-drag"
-      title={tooltip}
+      title={ramTooltip}
     >
       <span className="text-[10px] font-medium text-zinc-500 tracking-wide uppercase">RAM</span>
       <div className="w-20 h-1.5 bg-zinc-900 rounded-full overflow-hidden">
         <div
-          className={`h-full ${barColor} transition-all duration-500 ease-out`}
-          style={{ width: `${pct}%` }}
+          className={`h-full ${ramColors.barColor} transition-all duration-500 ease-out`}
+          style={{ width: `${ramPct}%` }}
         />
       </div>
-      <span className={`text-[11px] tabular-nums ${textColor}`}>
-        {fmtGB(mem.used)} / {fmtGB(mem.total)} GB
+      <span className={`text-[11px] tabular-nums ${ramColors.textColor}`}>
+        {fmtGB(ram.used)} / {fmtGB(ram.total)} GB
       </span>
+      {vramBar}
     </div>
   )
-}
+}

src/shared/stores/appStore.ts

@@ -137,6 +137,8 @@ interface AppState {
   // UI preferences
   showRamIndicator: boolean
   setShowRamIndicator: (v: boolean) => void
+  showVramIndicator: boolean
+  setShowVramIndicator: (v: boolean) => void
 
   // Accessibility
   useAtkinsonFont: boolean
@@ -241,6 +243,8 @@ export const useAppStore = create<AppState>()(
 
       showRamIndicator: true,
       setShowRamIndicator: (v) => set({ showRamIndicator: v }),
+      showVramIndicator: true,
+      setShowVramIndicator: (v) => set({ showVramIndicator: v }),
 
       useAtkinsonFont: false,
       setUseAtkinsonFont: (v) => set({ useAtkinsonFont: v }),
@@ -301,6 +305,7 @@ export const useAppStore = create<AppState>()(
       partialize: (state) => ({
         generationOptions: state.generationOptions,
         showRamIndicator: state.showRamIndicator,
+        showVramIndicator: state.showVramIndicator,
         useAtkinsonFont: state.useAtkinsonFont,
         uiScale: state.uiScale,
         lightSettings: state.lightSettings,