Feat: Add z.ai usage tracking

apps/ui/src/components/views/board-view/board-header.tsx

@@ -81,6 +81,7 @@ export function BoardHeader({
     (state) => state.setAddFeatureUseSelectedWorktreeBranch
   );
   const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
+  const zaiAuthStatus = useSetupStore((state) => state.zaiAuthStatus);
 
   // Worktree panel visibility (per-project)
   const worktreePanelVisibleByProject = useAppStore((state) => state.worktreePanelVisibleByProject);
@@ -112,6 +113,9 @@ export function BoardHeader({
   // Show if Codex is authenticated (CLI or API key)
   const showCodexUsage = !!codexAuthStatus?.authenticated;
 
+  // z.ai usage tracking visibility logic
+  const showZaiUsage = !!zaiAuthStatus?.authenticated;
+
   // State for mobile actions panel
   const [showActionsPanel, setShowActionsPanel] = useState(false);
   const [isRefreshingBoard, setIsRefreshingBoard] = useState(false);
@@ -158,8 +162,10 @@ export function BoardHeader({
             <TooltipContent side="bottom">Refresh board state from server</TooltipContent>
           </Tooltip>
         )}
-        {/* Usage Popover - show if either provider is authenticated, only on desktop */}
-        {isMounted && !isTablet && (showClaudeUsage || showCodexUsage) && <UsagePopover />}
+        {/* Usage Popover - show if any provider is authenticated, only on desktop */}
+        {isMounted && !isTablet && (showClaudeUsage || showCodexUsage || showZaiUsage) && (
+          <UsagePopover />
+        )}
 
         {/* Tablet/Mobile view: show hamburger menu with all controls */}
         {isMounted && isTablet && (
@@ -178,6 +184,7 @@ export function BoardHeader({
             onOpenPlanDialog={onOpenPlanDialog}
             showClaudeUsage={showClaudeUsage}
             showCodexUsage={showCodexUsage}
+            showZaiUsage={showZaiUsage}
           />
         )}
 

apps/ui/src/components/views/board-view/header-mobile-menu.tsx

@@ -30,6 +30,7 @@ interface HeaderMobileMenuProps {
   // Usage bar visibility
   showClaudeUsage: boolean;
   showCodexUsage: boolean;
+  showZaiUsage?: boolean;
 }
 
 export function HeaderMobileMenu({
@@ -47,18 +48,23 @@ export function HeaderMobileMenu({
   onOpenPlanDialog,
   showClaudeUsage,
   showCodexUsage,
+  showZaiUsage = false,
 }: HeaderMobileMenuProps) {
   return (
     <>
       <HeaderActionsPanelTrigger isOpen={isOpen} onToggle={onToggle} />
       <HeaderActionsPanel isOpen={isOpen} onClose={onToggle} title="Board Controls">
-        {/* Usage Bar - show if either provider is authenticated */}
-        {(showClaudeUsage || showCodexUsage) && (
+        {/* Usage Bar - show if any provider is authenticated */}
+        {(showClaudeUsage || showCodexUsage || showZaiUsage) && (
           <div className="space-y-2">
             <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
               Usage
             </span>
-            <MobileUsageBar showClaudeUsage={showClaudeUsage} showCodexUsage={showCodexUsage} />
+            <MobileUsageBar
+              showClaudeUsage={showClaudeUsage}
+              showCodexUsage={showCodexUsage}
+              showZaiUsage={showZaiUsage}
+            />
           </div>
         )}
 

apps/ui/src/components/views/board-view/mobile-usage-bar.tsx

@@ -4,11 +4,12 @@ import { cn } from '@/lib/utils';
 import { Spinner } from '@/components/ui/spinner';
 import { getElectronAPI } from '@/lib/electron';
 import { useAppStore } from '@/store/app-store';
-import { AnthropicIcon, OpenAIIcon } from '@/components/ui/provider-icon';
+import { AnthropicIcon, OpenAIIcon, ZaiIcon } from '@/components/ui/provider-icon';
 
 interface MobileUsageBarProps {
   showClaudeUsage: boolean;
   showCodexUsage: boolean;
+  showZaiUsage?: boolean;
 }
 
 // Helper to get progress bar color based on percentage
@@ -18,15 +19,51 @@ function getProgressBarColor(percentage: number): string {
   return 'bg-green-500';
 }
 
+// Helper to format large numbers with K/M suffixes
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) {
+    return `${(num / 1_000_000_000).toFixed(1)}B`;
+  }
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`;
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+}
+
+// Helper to format reset time
+function formatResetTime(unixTimestamp: number, isMilliseconds = false): string {
+  const date = new Date(isMilliseconds ? unixTimestamp : unixTimestamp * 1000);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  if (diff < 3600000) {
+    const mins = Math.ceil(diff / 60000);
+    return `Resets in ${mins}m`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    const mins = Math.ceil((diff % 3600000) / 60000);
+    return `Resets in ${hours}h${mins > 0 ? ` ${mins}m` : ''}`;
+  }
+  return `Resets ${date.toLocaleDateString()}`;
+}
+
 // Individual usage bar component
 function UsageBar({
   label,
   percentage,
   isStale,
+  details,
+  resetText,
 }: {
   label: string;
   percentage: number;
   isStale: boolean;
+  details?: string;
+  resetText?: string;
 }) {
   return (
     <div className="mt-1.5 first:mt-0">
@@ -58,6 +95,14 @@ function UsageBar({
           style={{ width: `${Math.min(percentage, 100)}%` }}
         />
       </div>
+      {(details || resetText) && (
+        <div className="flex items-center justify-between mt-0.5">
+          {details && <span className="text-[9px] text-muted-foreground">{details}</span>}
+          {resetText && (
+            <span className="text-[9px] text-muted-foreground ml-auto">{resetText}</span>
+          )}
+        </div>
+      )}
     </div>
   );
 }
@@ -103,16 +148,23 @@ function UsageItem({
   );
 }
 
-export function MobileUsageBar({ showClaudeUsage, showCodexUsage }: MobileUsageBarProps) {
+export function MobileUsageBar({
+  showClaudeUsage,
+  showCodexUsage,
+  showZaiUsage = false,
+}: MobileUsageBarProps) {
   const { claudeUsage, claudeUsageLastUpdated, setClaudeUsage } = useAppStore();
   const { codexUsage, codexUsageLastUpdated, setCodexUsage } = useAppStore();
+  const { zaiUsage, zaiUsageLastUpdated, setZaiUsage } = useAppStore();
   const [isClaudeLoading, setIsClaudeLoading] = useState(false);
   const [isCodexLoading, setIsCodexLoading] = useState(false);
+  const [isZaiLoading, setIsZaiLoading] = useState(false);
 
   // Check if data is stale (older than 2 minutes)
   const isClaudeStale =
     !claudeUsageLastUpdated || Date.now() - claudeUsageLastUpdated > 2 * 60 * 1000;
   const isCodexStale = !codexUsageLastUpdated || Date.now() - codexUsageLastUpdated > 2 * 60 * 1000;
+  const isZaiStale = !zaiUsageLastUpdated || Date.now() - zaiUsageLastUpdated > 2 * 60 * 1000;
 
   const fetchClaudeUsage = useCallback(async () => {
     setIsClaudeLoading(true);
@@ -146,6 +198,22 @@ export function MobileUsageBar({ showClaudeUsage, showCodexUsage }: MobileUsageB
     }
   }, [setCodexUsage]);
 
+  const fetchZaiUsage = useCallback(async () => {
+    setIsZaiLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.zai) return;
+      const data = await api.zai.getUsage();
+      if (!('error' in data)) {
+        setZaiUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    } finally {
+      setIsZaiLoading(false);
+    }
+  }, [setZaiUsage]);
+
   const getCodexWindowLabel = (durationMins: number) => {
     if (durationMins < 60) return `${durationMins}m Window`;
     if (durationMins < 1440) return `${Math.round(durationMins / 60)}h Window`;
@@ -165,8 +233,14 @@ export function MobileUsageBar({ showClaudeUsage, showCodexUsage }: MobileUsageB
     }
   }, [showCodexUsage, isCodexStale, fetchCodexUsage]);
 
+  useEffect(() => {
+    if (showZaiUsage && isZaiStale) {
+      fetchZaiUsage();
+    }
+  }, [showZaiUsage, isZaiStale, fetchZaiUsage]);
+
   // Don't render if there's nothing to show
-  if (!showClaudeUsage && !showCodexUsage) {
+  if (!showClaudeUsage && !showCodexUsage && !showZaiUsage) {
     return null;
   }
 
@@ -227,6 +301,45 @@ export function MobileUsageBar({ showClaudeUsage, showCodexUsage }: MobileUsageB
           )}
         </UsageItem>
       )}
+
+      {showZaiUsage && (
+        <UsageItem icon={ZaiIcon} label="z.ai" isLoading={isZaiLoading} onRefresh={fetchZaiUsage}>
+          {zaiUsage?.quotaLimits && (zaiUsage.quotaLimits.tokens || zaiUsage.quotaLimits.mcp) ? (
+            <>
+              {zaiUsage.quotaLimits.tokens && (
+                <UsageBar
+                  label="Tokens"
+                  percentage={zaiUsage.quotaLimits.tokens.usedPercent}
+                  isStale={isZaiStale}
+                  details={`${formatNumber(zaiUsage.quotaLimits.tokens.used)} / ${formatNumber(zaiUsage.quotaLimits.tokens.limit)}`}
+                  resetText={
+                    zaiUsage.quotaLimits.tokens.nextResetTime
+                      ? formatResetTime(zaiUsage.quotaLimits.tokens.nextResetTime, true)
+                      : undefined
+                  }
+                />
+              )}
+              {zaiUsage.quotaLimits.mcp && (
+                <UsageBar
+                  label="MCP"
+                  percentage={zaiUsage.quotaLimits.mcp.usedPercent}
+                  isStale={isZaiStale}
+                  details={`${formatNumber(zaiUsage.quotaLimits.mcp.used)} / ${formatNumber(zaiUsage.quotaLimits.mcp.limit)} calls`}
+                  resetText={
+                    zaiUsage.quotaLimits.mcp.nextResetTime
+                      ? formatResetTime(zaiUsage.quotaLimits.mcp.nextResetTime, true)
+                      : undefined
+                  }
+                />
+              )}
+            </>
+          ) : zaiUsage ? (
+            <p className="text-[10px] text-muted-foreground italic">No usage data from z.ai API</p>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
     </div>
   );
 }