Add secondary disk and network stats to system cards

Author: kilo-code-bot[bot]

src/components/home/SystemStats.tsx

@@ -1,8 +1,7 @@
 import type { FieldPath } from 'juststore'
-import { Clock, Cpu, HardDrive, type LucideIcon, MemoryStick } from 'lucide-react'
+import { Clock, Cpu, HardDrive, type LucideIcon, MemoryStick, Wifi } from 'lucide-react'
 import { Suspense } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { useIsMobile } from '@/hooks/use-mobile'
 import { formatDuration } from '@/lib/format'
 import SystemStatsProvider from './SystemStatsProvider'
 import SystemStatValue from './SystemStatValue'
@@ -33,8 +32,10 @@ function SystemStatsMobile() {
 }
 
 function SystemStatsDesktop() {
+  const hasSecondaryDisk = Boolean(store.systemInfo.secondaryPartitionUsageDesc.use())
+
   return (
-    <div className="hidden sm:grid grid-cols-2 gap-2 px-1 sm:grid-cols-4 sm:gap-4">
+    <div className="hidden sm:grid grid-cols-2 gap-2 px-1 sm:grid-cols-5 sm:gap-4">
       {statsProps.map(stat => (
         <Card key={stat.key} size="sm" className="h-full">
           <CardHeader>
@@ -46,11 +47,28 @@ function SystemStatsDesktop() {
             </div>
           </CardHeader>
           <CardContent className="space-y-1.5 sm:space-y-2">
-            <SystemStatValue
-              valueKey={stat.key}
-              descriptionKey={stat.descriptionKey}
-              type={stat.type}
-            />
+            {stat.key === 'rootPartitionUsage' ? (
+              <>
+                <SystemStatValue
+                  valueKey={stat.key}
+                  descriptionKey={stat.descriptionKey}
+                  type={stat.type}
+                />
+                {hasSecondaryDisk && (
+                  <SystemStatValue
+                    valueKey="secondaryPartitionUsage"
+                    descriptionKey="secondaryPartitionUsageDesc"
+                    type="progress"
+                  />
+                )}
+              </>
+            ) : (
+              <SystemStatValue
+                valueKey={stat.key}
+                descriptionKey={stat.descriptionKey}
+                type={stat.type}
+              />
+            )}
           </CardContent>
         </Card>
       ))}
@@ -62,7 +80,7 @@ type StatProp = {
   label: string
   mobileLabel: string
   icon: LucideIcon
-  mobileValueMode?: 'percent' | 'description' | 'duration'
+  mobileValueMode?: 'percent' | 'description' | 'duration' | 'text'
   type: 'text' | 'progress' | 'duration'
   color: string
   key: FieldPath<Store['systemInfo']>
@@ -77,6 +95,9 @@ function MobileStatRow({ stat }: { stat: StatProp }) {
     if (stat.mobileValueMode === 'duration') {
       return formatDuration(Number(value), { unit: 's' })
     }
+    if (stat.mobileValueMode === 'text') {
+      return String(value)
+    }
     return `${value}%`
   })()
 
@@ -130,4 +151,13 @@ const statsProps: StatProp[] = [
     key: 'rootPartitionUsage',
     descriptionKey: 'rootPartitionUsageDesc',
   },
+  {
+    label: 'Network',
+    mobileLabel: 'Net',
+    icon: Wifi,
+    mobileValueMode: 'text',
+    type: 'text',
+    color: 'bg-chart-4',
+    key: 'networkSpeedSummary',
+  },
 ] as const

src/components/home/SystemStatsProvider.tsx

@@ -15,8 +15,11 @@ export default function SystemStatsProvider() {
         cpuAverage: Math.round(data.cpu_average * 100) / 100,
         rootPartitionUsage: Math.round(getDiskUsage(data.disks, '/') ?? 0 * 100),
         rootPartitionUsageDesc: getDiskUsageDesc(data.disks, '/'),
+        secondaryPartitionUsage: Math.round(getSecondaryDiskUsage(data.disks, '/') ?? 0 * 100),
+        secondaryPartitionUsageDesc: getSecondaryDiskUsageDesc(data.disks, '/'),
         memoryUsage: Math.round(data.memory.used_percent * 100) / 100,
         memoryUsageDesc: getMemoryUsageDesc(data.memory),
+        networkSpeedSummary: getNetworkSpeedSummary(data),
       }),
   })
 
@@ -44,6 +47,30 @@ function getDiskUsageDesc(disks: Record<string, DiskUsageStat>, path: string) {
   return `${formatBytes(disk.used, { precision: 1 })} / ${formatBytes(disk.total, { precision: 1 })}`
 }
 
+function getSecondaryDisk(disks: Record<string, DiskUsageStat>, path: string) {
+  const allDisks = Object.values(disks)
+  const primaryDisk = getDisk(disks, path)
+  return allDisks.find(d => d.path !== primaryDisk?.path)
+}
+
+function getSecondaryDiskUsage(disks: Record<string, DiskUsageStat>, path: string) {
+  return getSecondaryDisk(disks, path)?.used_percent
+}
+
+function getSecondaryDiskUsageDesc(disks: Record<string, DiskUsageStat>, path: string) {
+  const disk = getSecondaryDisk(disks, path)
+  if (!disk) {
+    return ''
+  }
+  return `${disk.path}: ${formatBytes(disk.used, { precision: 1 })} / ${formatBytes(disk.total, { precision: 1 })}`
+}
+
 function getMemoryUsageDesc(memory: MemVirtualMemoryStat) {
   return `${formatBytes(memory.used, { precision: 1 })} / ${formatBytes(memory.total, { precision: 1 })}`
 }
+
+function getNetworkSpeedSummary(data: SystemInfo) {
+  const uploadSpeed = data.network?.upload_speed ?? 0
+  const downloadSpeed = data.network?.download_speed ?? 0
+  return `↑ ${formatBytes(uploadSpeed, { precision: 0, unit: '/s' })} ↓ ${formatBytes(downloadSpeed, { precision: 0, unit: '/s' })}`
+}

src/components/home/store.ts

@@ -40,8 +40,11 @@ type SystemInfoSimple = {
   cpuAverage: number
   rootPartitionUsage: number
   rootPartitionUsageDesc: string
+  secondaryPartitionUsage: number
+  secondaryPartitionUsageDesc: string
   memoryUsage: number
   memoryUsageDesc: string
+  networkSpeedSummary: string
 }
 
 export const store = createStore<Store>('homepage', {
@@ -50,8 +53,11 @@ export const store = createStore<Store>('homepage', {
     cpuAverage: 0,
     rootPartitionUsage: 0,
     rootPartitionUsageDesc: '',
+    secondaryPartitionUsage: 0,
+    secondaryPartitionUsageDesc: '',
     memoryUsage: 0,
     memoryUsageDesc: '',
+    networkSpeedSummary: '—',
   },
   homepageCategories: [],
   searchQuery: '',