feat(web): inventory panel on server detail

web/app/servers/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
-import { api, ServerStatus, GenerateKeyOptions, PackageUpdate } from "@/lib/api";
+import { api, ServerStatus, GenerateKeyOptions, PackageUpdate, Inventory } from "@/lib/api";
 import { Badge, Button, Card, CardHeader, CardTitle } from "@/components/ui";
 import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
 
@@ -23,6 +23,60 @@ function formatDate(dateStr: string) {
     return new Date(dateStr).toLocaleString();
 }
 
+function formatBytes(n: number): string {
+    if (!n) return "0 B";
+    const u = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(n) / Math.log(1024));
+    return `${(n / Math.pow(1024, i)).toFixed(1)} ${u[i]}`;
+}
+
+function UsageBar({ used, total }: { used: number; total: number }) {
+    const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0;
+    return (
+        <div className="h-2 w-full overflow-hidden rounded-full bg-surface-2">
+            <div className={`h-full rounded-full ${pct > 90 ? "bg-danger" : "bg-accent"}`} style={{ width: `${pct}%` }} />
+        </div>
+    );
+}
+
+function InventoryPanel({ inv }: { inv: Inventory }) {
+    return (
+        <Card>
+            <h2 className="mb-4 text-lg font-semibold text-text-primary">Inventory</h2>
+            <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                    <div className="mb-1 flex justify-between text-sm"><span className="text-text-secondary">CPU</span><span className="text-text-primary">{inv.cpu.usage_pct.toFixed(0)}%</span></div>
+                    <UsageBar used={inv.cpu.usage_pct} total={100} />
+                    <p className="mt-1 text-xs text-text-secondary">{inv.cpu.model} · {inv.cpu.cores} cores · load {inv.cpu.load1?.toFixed(2)}</p>
+                </div>
+                <div>
+                    <div className="mb-1 flex justify-between text-sm"><span className="text-text-secondary">Memory</span><span className="text-text-primary">{formatBytes(inv.memory.used_bytes)} / {formatBytes(inv.memory.total_bytes)}</span></div>
+                    <UsageBar used={inv.memory.used_bytes} total={inv.memory.total_bytes} />
+                    <div className="mb-1 mt-3 flex justify-between text-sm"><span className="text-text-secondary">Swap</span><span className="text-text-primary">{formatBytes(inv.swap_used_bytes)} / {formatBytes(inv.swap_total_bytes)}</span></div>
+                    <UsageBar used={inv.swap_used_bytes} total={inv.swap_total_bytes} />
+                </div>
+            </div>
+            {inv.partitions && inv.partitions.length > 0 && (
+                <div className="mt-5">
+                    <h3 className="mb-2 text-sm font-medium text-text-secondary">Partitions</h3>
+                    <div className="space-y-3">
+                        {inv.partitions.map((p) => (
+                            <div key={p.mountpoint}>
+                                <div className="mb-1 flex justify-between text-xs">
+                                    <span className="font-mono text-text-primary">{p.mountpoint}</span>
+                                    <span className="text-text-secondary">{formatBytes(p.used_bytes)} / {formatBytes(p.total_bytes)} · {p.fstype}</span>
+                                </div>
+                                <UsageBar used={p.used_bytes} total={p.total_bytes} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+            {inv.kernel && <p className="mt-4 text-xs text-text-secondary">Kernel {inv.kernel}</p>}
+        </Card>
+    );
+}
+
 const KEY_SIZES: Record<string, number[]> = {
     rsa: [2048, 3072, 4096],
     ecdsa: [256, 384, 521],
@@ -432,6 +486,12 @@ export default function ServerDetailPage() {
                 </Card>
             </div>
 
+            {server.inventory && (
+                <div className="mb-6">
+                    <InventoryPanel inv={server.inventory} />
+                </div>
+            )}
+
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                 <Card className="lg:col-span-1">
                     <CardHeader>

web/lib/api.ts

@@ -7,6 +7,17 @@ export interface PackageUpdate {
   new_version: string;
 }
 
+export interface Inventory {
+  cpu: { model?: string; cores?: number; usage_pct: number; load1?: number };
+  memory: { total_bytes: number; used_bytes: number };
+  swap_total_bytes: number;
+  swap_used_bytes: number;
+  partitions?: { device: string; mountpoint: string; fstype?: string; total_bytes: number; used_bytes: number }[];
+  kernel?: string;
+  metrics_at?: string;
+  static_at?: string;
+}
+
 export interface Server {
   id: string;
   server_id: string;
@@ -20,6 +31,7 @@ export interface Server {
   available_updates?: PackageUpdate[];
   updates_checked_at?: string;
   console_protocols?: string[];
+  inventory?: Inventory;
 }
 
 export interface ConsoleConnectRequest {