feat: show account storage usage

job-tracker-ui/src/ai-usage-card.test.tsx

@@ -13,6 +13,8 @@ test("shows monthly AI call and token limits", async () => {
       plan: "free",
       monthlyCallLimit: 25,
       monthlyTokenLimit: 100000,
+      storageUsedBytes: 50000000,
+      storageLimitBytes: 250000000,
     },
   });
 
@@ -20,5 +22,6 @@ test("shows monthly AI call and token limits", async () => {
 
   expect(await screen.findByText("4 of 25 generations this month")).toBeInTheDocument();
   expect(screen.getByText("12,000 of 100,000 estimated tokens")).toBeInTheDocument();
+  expect(screen.getByText("50.0 MB of 250.0 MB attachment storage")).toBeInTheDocument();
   expect(screen.getByLabelText("Monthly AI generations used")).toHaveAttribute("aria-valuenow", "16");
 });

job-tracker-ui/src/components/AiUsageCard.tsx

@@ -7,8 +7,16 @@ type Usage = {
   plan: string;
   monthlyCallLimit: number;
   monthlyTokenLimit: number;
+  storageUsedBytes: number;
+  storageLimitBytes: number;
 };
 
+function formatBytes(bytes: number) {
+  if (bytes < 1_000_000) return `${Math.round(bytes / 1_000)} KB`;
+  if (bytes < 1_000_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
+  return `${(bytes / 1_000_000_000).toFixed(1)} GB`;
+}
+
 export default function AiUsageCard() {
   const [usage, setUsage] = useState<Usage | null>(null);
   const [failed, setFailed] = useState(false);
@@ -26,6 +34,7 @@ export default function AiUsageCard() {
 
   const callsPercent = Math.min(100, usage.currentMonth.calls / usage.monthlyCallLimit * 100);
   const tokensPercent = Math.min(100, usage.currentMonth.estimatedTokens / usage.monthlyTokenLimit * 100);
+  const storagePercent = Math.min(100, usage.storageUsedBytes / usage.storageLimitBytes * 100);
 
   return (
     <Paper sx={{ p: 2.5, borderRadius: 4, border: "none" }}>
@@ -41,7 +50,11 @@ export default function AiUsageCard() {
         <Typography variant="body2">{usage.currentMonth.estimatedTokens.toLocaleString()} of {usage.monthlyTokenLimit.toLocaleString()} estimated tokens</Typography>
         <LinearProgress variant="determinate" value={tokensPercent} aria-label="Monthly AI tokens used" sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
       </Box>
-      <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>Limits reset at the start of each calendar month.</Typography>
+      <Box sx={{ mt: 2 }}>
+        <Typography variant="body2">{formatBytes(usage.storageUsedBytes)} of {formatBytes(usage.storageLimitBytes)} attachment storage</Typography>
+        <LinearProgress variant="determinate" value={storagePercent} aria-label="Attachment storage used" sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
+      </Box>
+      <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>AI limits reset at the start of each calendar month.</Typography>
     </Paper>
   );
 }