feat(dashboard): add global usage indicator in top nav (#448)

GenerQAQ · claude · web-flow · commit 8ee6fc65f759 · 2026-03-18T12:45:08.000+08:00
Add a hover-triggered usage indicator icon in the top nav that shows
per-org usage (tasks &amp; storage) with progress bars and warning dots
for orgs approaching quota limits. Clicking an org navigates to its
billing page.

- Add getAllOrganizationsUsage server action with shared fetchUsageAndLimits core
- Add UsageIndicator component using shadcn HoverCard (responsive: hover on desktop, tap on mobile)
- Consolidate duplicate formatBytes into shared lib/utils import
- Add hover-card shadcn component

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/dashboard/app/org/[id]/usage/usage-page-client.tsx b/dashboard/app/org/[id]/usage/usage-page-client.tsx
@@ -6,6 +6,7 @@ import { useTopNavStore } from "@/stores/top-nav";
 import { usePlanStore } from "@/stores/plan";
 import { Organization } from "@/types";
 import { OrganizationUsageData } from "@/lib/supabase/operations/organizations";
+import { formatBytes } from "@/lib/utils";
 import {
   Card,
   CardContent,
@@ -22,14 +23,6 @@ interface UsagePageClientProps {
   usageData: OrganizationUsageData;
 }
 
-function formatStorage(bytes: number): string {
-  if (bytes === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${value.toFixed(value < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
-}
-
 function getProgressColor(percentage: number): string {
   if (percentage >= 90) return "bg-red-500";
   if (percentage >= 70) return "bg-amber-500";
@@ -131,7 +124,7 @@ export function UsagePageClient({
       description: "Total storage used across all projects",
       current: usage.current_storage,
       max: limits.max_storage,
-      formatValue: formatStorage,
+      formatValue: formatBytes,
     },
   ];
 
diff --git a/dashboard/app/project/[id]/disk/disk-page-client.tsx b/dashboard/app/project/[id]/disk/disk-page-client.tsx
@@ -74,7 +74,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
+import { cn, formatBytes } from "@/lib/utils";
 import { useTopNavStore } from "@/stores/top-nav";
 import {
   Organization,
@@ -102,13 +102,6 @@ interface DiskTreeNode extends TreeNode {
   fileInfo?: Artifact;
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
-}
 
 interface DiskPageClientProps {
   project: Project;
diff --git a/dashboard/components/top-nav.tsx b/dashboard/components/top-nav.tsx
@@ -12,6 +12,8 @@ import {
   Plus,
   BookOpen,
   Github,
+  Receipt,
+  ExternalLink,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -49,10 +51,19 @@ import { useUserStore } from "@/stores/user";
 import { useTopNavStore } from "@/stores/top-nav";
 import { usePlanStore, Price, Product, getPlanTypeDisplayName, isPaidPlan } from "@/stores/plan";
 import { User } from "@supabase/supabase-js";
-import { cn } from "@/lib/utils";
+import { cn, formatBytes } from "@/lib/utils";
 import { encodeId } from "@/lib/id-codec";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 import { SidebarTriggerWrapper } from "@/components/sidebar-trigger-wrapper";
 import { AlertBanner } from "@/components/alert-banner";
+import {
+  getAllOrganizationsUsage,
+  type OrganizationUsageSummary,
+} from "@/lib/supabase/operations/organizations";
 
 const EXTERNAL_LINKS = [
   {
@@ -282,6 +293,162 @@ function ProjectSelector({
   );
 }
 
+// Usage Indicator Component
+function UsageIndicator({ className }: { className?: string }) {
+  const [usageData, setUsageData] = React.useState<OrganizationUsageSummary[]>(
+    []
+  );
+  const [loading, setLoading] = React.useState(false);
+  const [fetched, setFetched] = React.useState(false);
+  const router = useRouter();
+
+  const fetchUsage = React.useCallback(async () => {
+    if (fetched) return;
+    setLoading(true);
+    try {
+      const data = await getAllOrganizationsUsage();
+      setUsageData(data);
+      setFetched(true);
+    } catch {
+      // silently fail
+    } finally {
+      setLoading(false);
+    }
+  }, [fetched]);
+
+  // Auto-fetch on mount to show warning dot
+  React.useEffect(() => {
+    fetchUsage();
+  }, [fetchUsage]);
+
+  // Check if any org has critical usage (>=90%)
+  const hasWarning = React.useMemo(() => {
+    return usageData.some((org) => {
+      const metrics = [
+        { current: org.usage.current_task, max: org.limits.max_task },
+        { current: org.usage.current_storage, max: org.limits.max_storage },
+      ];
+      return metrics.some(
+        (m) => m.max > 0 && (m.current / m.max) * 100 >= 90
+      );
+    });
+  }, [usageData]);
+
+  const getBarColor = (percentage: number) => {
+    if (percentage >= 90) return "bg-red-500";
+    if (percentage >= 70) return "bg-amber-500";
+    return "bg-primary";
+  };
+
+  return (
+    <HoverCard openDelay={200} closeDelay={150}>
+      <HoverCardTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("rounded-full h-8 w-8 relative border border-border", className)}
+        >
+          <Receipt className="h-4 w-4" />
+          {hasWarning && (
+            <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-red-500 border-2 border-background" />
+          )}
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-[320px] p-0" align="end">
+        <div className="max-h-[320px] overflow-y-auto">
+          {loading && !fetched ? (
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
+              Loading...
+            </div>
+          ) : usageData.length === 0 ? (
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
+              No organizations
+            </div>
+          ) : (
+            usageData.map((org) => {
+              const taskPct =
+                org.limits.max_task > 0
+                  ? Math.min(
+                      (org.usage.current_task / org.limits.max_task) * 100,
+                      100
+                    )
+                  : 0;
+              const storagePct =
+                org.limits.max_storage > 0
+                  ? Math.min(
+                      (org.usage.current_storage / org.limits.max_storage) *
+                        100,
+                      100
+                    )
+                  : 0;
+              const maxPct = Math.max(taskPct, storagePct);
+              const encodedId = encodeId(org.orgId);
+
+              return (
+                <button
+                  key={org.orgId}
+                  className="w-full px-3 py-2.5 text-left hover:bg-muted/50 transition-colors border-b last:border-b-0 cursor-pointer"
+                  onClick={() => {
+                    router.push(`/org/${encodedId}/billing`);
+                  }}
+                >
+                  <div className="flex items-center justify-between mb-1.5">
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      <span className="text-sm font-medium truncate">
+                        {org.orgName}
+                      </span>
+                      {maxPct >= 90 && (
+                        <span className="h-1.5 w-1.5 rounded-full bg-red-500 shrink-0" />
+                      )}
+                    </div>
+                    <ExternalLink className="h-3 w-3 text-muted-foreground shrink-0" />
+                  </div>
+                  {/* Agent Tasks */}
+                  <div className="space-y-1">
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span>Tasks</span>
+                      <span className="tabular-nums">
+                        {org.usage.current_task.toLocaleString()} /{" "}
+                        {org.limits.max_task > 0
+                          ? org.limits.max_task.toLocaleString()
+                          : "∞"}
+                      </span>
+                    </div>
+                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                      <div
+                        className={`h-full rounded-full transition-all ${getBarColor(taskPct)}`}
+                        style={{ width: `${taskPct}%` }}
+                      />
+                    </div>
+                  </div>
+                  {/* Storage */}
+                  <div className="space-y-1 mt-1.5">
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span>Storage</span>
+                      <span className="tabular-nums">
+                        {formatBytes(org.usage.current_storage)} /{" "}
+                        {org.limits.max_storage > 0
+                          ? formatBytes(org.limits.max_storage)
+                          : "∞"}
+                      </span>
+                    </div>
+                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                      <div
+                        className={`h-full rounded-full transition-all ${getBarColor(storagePct)}`}
+                        style={{ width: `${storagePct}%` }}
+                      />
+                    </div>
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
 export function TopNav({ user, prices = [], products = [] }: TopNavProps) {
   // Get data from stores
   const { setUser } = useUserStore();
@@ -366,6 +533,8 @@ export function TopNav({ user, prices = [], products = [] }: TopNavProps) {
             </Link>
             <div className="flex gap-2 min-w-0 ml-3">
               <AlertBanner variant="mobile" />
+              {/* Usage Indicator - shown on mobile */}
+              <UsageIndicator className="md:hidden" />
               {/* External links - shown on mobile */}
               {EXTERNAL_LINKS.map((link) => {
                 const Icon = link.icon;
@@ -504,6 +673,9 @@ export function TopNav({ user, prices = [], products = [] }: TopNavProps) {
                   </a>
                 </Button>
 
+                {/* Usage Indicator - desktop only */}
+                <UsageIndicator className="hidden md:inline-flex" />
+
                 {/* External links - shown on medium screens and above (hidden on small screens where they appear in Mobile Top Layer) */}
                 {EXTERNAL_LINKS.map((link) => {
                   const Icon = link.icon;
diff --git a/dashboard/components/ui/hover-card.tsx b/dashboard/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/dashboard/lib/supabase/operations/index.ts b/dashboard/lib/supabase/operations/index.ts
@@ -43,8 +43,10 @@ export {
   removeOrganizationMember,
   getOrganizationDataWithPlan,
   getOrganizationUsage,
+  getAllOrganizationsUsage,
   type OrganizationMember,
   type OrganizationUsageData,
+  type OrganizationUsageSummary,
 } from "./organizations";
 
 // Project operations (Server Actions)
diff --git a/dashboard/lib/supabase/operations/organizations.ts b/dashboard/lib/supabase/operations/organizations.ts
