diff --git a/src/components/common/resource-meter.tsx b/src/components/common/resource-meter.tsx
new file mode 100644
index 0000000..66c0039
--- /dev/null
+++ b/src/components/common/resource-meter.tsx
@@ -0,0 +1,25 @@
+import { Progress } from "@/components/ui/progress";
+import { StatusBadge } from "@/components/common/status-badge";
+import { percent } from "@/lib/utils";
+import type { ResourceUsage } from "@/api/contracts/models";
+
+export function ResourceMeter({ resource }: { resource: ResourceUsage }) {
+  const value = percent(resource.used, resource.limit);
+  return (
+    <div className="space-y-2 rounded-md border border-border/60 bg-card/50 p-3 transition-colors hover:border-border">
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-sm font-medium">{resource.label}</span>
+        <StatusBadge status={resource.status} />
+      </div>
+      <Progress value={value} />
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span className="font-mono">
+          {resource.used.toLocaleString()} {resource.unit}
+        </span>
+        <span className="font-mono">
+          {resource.limit.toLocaleString()} {resource.unit}
+        </span>
+      </div>
+    </div>
+  );
+}