docs & ux improvmeents

frontend/src/layout/AppLayout.tsx

@@ -123,22 +123,26 @@ const LayoutContent: React.FC = () => {
       return;
     }
     
-    // Determine accent color based on credit level
+    // Determine accent color based on content pieces remaining
+    const remaining = balance.credits_remaining ?? balance.credits;
+    const total = balance.plan_credits_per_month ?? 0;
+    const usagePercent = total > 0 ? (remaining / total) * 100 : 100;
+    
     let accentColor: 'blue' | 'green' | 'amber' | 'purple' = 'blue';
-    if (balance.credits > 1000) {
+    if (usagePercent > 50) {
       accentColor = 'green';
-    } else if (balance.credits > 100) {
+    } else if (usagePercent > 20) {
       accentColor = 'blue';
-    } else if (balance.credits > 0) {
+    } else if (usagePercent > 0) {
       accentColor = 'amber';
     } else {
       accentColor = 'purple';
     }
     
-    // Set credit balance (single metric with label "Credits" - HeaderMetricsContext will merge it)
+    // Set content balance - show as "X/Y Content" for simplicity
     setMetrics([{
-      label: 'Credits',
-      value: balance.credits,
+      label: 'Content',
+      value: total > 0 ? `${remaining}/${total}` : remaining,
       accentColor,
     }]);
   }, [balance, isAuthenticated, setMetrics]);