Phase 5.2: UsageCard + Progress bar

frontend/src/components/ui/progress.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+interface ProgressProps {
+  value: number
+  className?: string
+}
+
+export function Progress({ value, className }: ProgressProps) {
+  return (
+    <div className={cn('w-full bg-secondary rounded-full h-2 overflow-hidden', className)}>
+      <div
+        className="h-full bg-primary rounded-full transition-all duration-500"
+        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+      />
+    </div>
+  )
+}

frontend/src/components/usage/UsageCard.tsx

@@ -0,0 +1,51 @@
+import { Card } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { Zap, Wallet } from 'lucide-react'
+
+export function UsageCard() {
+  const usage = {
+    tokensUsed: 124800,
+    tokensLimit: 200000,
+    budgetUsed: 42.5,
+    budgetLimit: 100,
+  }
+
+  const tokenPercent = Math.round((usage.tokensUsed / usage.tokensLimit) * 100)
+  const budgetPercent = Math.round((usage.budgetUsed / usage.budgetLimit) * 100)
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <Zap className="w-5 h-5 text-amber-500" />
+          <h3 className="font-semibold">Usage & Limits</h3>
+        </div>
+        <span className="text-xs text-muted-foreground">Today</span>
+      </div>
+
+      <div className="mb-6">
+        <div className="flex justify-between text-sm mb-2">
+          <span className="text-muted-foreground">Tokens</span>
+          <span className="font-mono text-sm">
+            {usage.tokensUsed.toLocaleString()} / {usage.tokensLimit.toLocaleString()}
+          </span>
+        </div>
+        <Progress value={tokenPercent} />
+        <div className="text-right text-xs text-muted-foreground mt-1">{tokenPercent}% used</div>
+      </div>
+
+      <div>
+        <div className="flex justify-between text-sm mb-2">
+          <span className="text-muted-foreground flex items-center gap-1">
+            <Wallet className="w-4 h-4" /> Budget
+          </span>
+          <span className="font-mono text-sm">${usage.budgetUsed} / ${usage.budgetLimit}</span>
+        </div>
+        <Progress value={budgetPercent} />
+        <div className="text-right text-xs text-muted-foreground mt-1">
+          {budgetPercent}% used · ${usage.budgetLimit - usage.budgetUsed} left
+        </div>
+      </div>
+    </Card>
+  )
+}

frontend/src/pages/Dashboard.tsx

@@ -1,6 +1,7 @@
 import { AgentGrid } from '@/components/agents/AgentGrid'
 import { Kanban } from '@/components/tasks/Kanban'
 import { ActivityFeed } from '@/components/ActivityFeed'
+import { UsageCard } from '@/components/usage/UsageCard'
 import { useAppStore } from '@/store/useAppStore'
 
 export function Dashboard() {
@@ -27,6 +28,9 @@ export function Dashboard() {
         <div className="lg:col-span-7 bg-card/80 border border-border rounded-3xl p-6 backdrop-blur-xl">
           <Kanban />
         </div>
+        <div className="lg:col-span-5">
+          <UsageCard />
+        </div>
         <div className="lg:col-span-12 bg-card/80 border border-border rounded-3xl p-6 backdrop-blur-xl">
           <ActivityFeed />
         </div>