feat(ui): add license usage visualization with progress bars

Split license limits into metered "Resource Usage" (with color-coded progress bars) and static "Plan Limits" cards. Updated UsageIndicator with 8px bars, green/amber/red thresholds, and tabular-nums formatting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-26 22:12:33 +02:00
parent 6afc337b16
commit d783040030
5 changed files with 140 additions and 29 deletions
--- a/ui/src/components/UsageIndicator.tsx
+++ b/ui/src/components/UsageIndicator.tsx
@@ -6,20 +6,30 @@ interface Props {
  label: string;
 }

+function barColor(pct: number): string {
+  if (pct >= 100) return 'var(--error)';
+  if (pct >= 75) return 'var(--warning)';
+  return 'var(--success)';
+}
+
 export function UsageIndicator({ used, limit, label }: Props) {
  const unlimited = limit < 0;
-  const pct = unlimited ? 0 : Math.min((used / limit) * 100, 100);
-  const color = pct >= 100 ? 'var(--error)' : pct >= 80 ? 'var(--warning)' : 'var(--success)';
+  const pct = unlimited ? 0 : limit === 0 ? 100 : Math.min((used / limit) * 100, 100);

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      <div className={styles.kvRow}>
-        <span className={styles.kvLabel}>{label}</span>
-        <span className={styles.kvValue}>{used} / {unlimited ? '\u221e' : limit}</span>
+    <div className={styles.usageRow}>
+      <div className={styles.usageHeader}>
+        <span className={styles.usageLabel}>{label}</span>
+        <span className={styles.usageValue} style={pct >= 100 ? { color: 'var(--error)', fontWeight: 600 } : undefined}>
+          {used.toLocaleString()}{' / '}{unlimited ? '\u221e' : limit.toLocaleString()}
+        </span>
      </div>
      {!unlimited && (
-        <div style={{ height: 4, borderRadius: 2, background: 'var(--bg-inset)', overflow: 'hidden' }}>
-          <div style={{ width: `${pct}%`, height: '100%', borderRadius: 2, background: color, transition: 'width 0.3s' }} />
+        <div className={styles.usageBarTrack}>
+          <div
+            className={styles.usageBarFill}
+            style={{ width: `${Math.max(pct, 2)}%`, background: barColor(pct) }}
+          />
        </div>
      )}
    </div>
--- a/ui/src/pages/tenant/TenantLicensePage.tsx
+++ b/ui/src/pages/tenant/TenantLicensePage.tsx
@@ -1,14 +1,15 @@
 import { useState } from 'react';
 import {
-  Alert,
  Badge,
  Button,
  Card,
  Spinner,
+  Alert,
  useToast,
 } from '@cameleer/design-system';
 import { Copy, Eye, EyeOff } from 'lucide-react';
 import { useTenantLicense } from '../../api/tenant-hooks';
+import { UsageIndicator } from '../../components/UsageIndicator';
 import { tierColor } from '../../utils/tier';
 import styles from '../../styles/platform.module.css';

@@ -28,6 +29,13 @@ const LIMIT_LABELS: Record<string, string> = {
  max_jar_retention_count: 'JAR Retention Count',
 };

+const METERED_LIMITS: Record<string, string> = {
+  max_agents: 'agents',
+  max_environments: 'environments',
+  max_apps: 'apps',
+  max_users: 'users',
+};
+
 function daysColor(days: number): 'success' | 'warning' | 'error' | 'auto' {
  if (days <= 0) return 'error';
  if (days <= 30) return 'warning';
@@ -57,6 +65,22 @@ export function TenantLicensePage() {
    );
  }

+  const usage = data.usage ?? {};
+  const meteredEntries = Object.entries(METERED_LIMITS)
+    .filter(([limitKey]) => data.limits[limitKey] != null)
+    .map(([limitKey, usageKey]) => ({
+      label: LIMIT_LABELS[limitKey] ?? limitKey,
+      used: usage[usageKey] ?? 0,
+      limit: data.limits[limitKey],
+    }));
+
+  const configEntries = Object.entries(data.limits)
+    .filter(([key]) => !(key in METERED_LIMITS))
+    .map(([key, value]) => ({
+      label: LIMIT_LABELS[key] ?? key,
+      value,
+    }));
+
  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(data!.token);
@@ -68,14 +92,12 @@ export function TenantLicensePage() {

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
-      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>License</h1>
        <Badge label={data.tier} color={tierColor(data.tier)} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
-        {/* Validity card */}
        <Card title="Validity">
          <div className={styles.dividerList}>
            <div className={styles.kvRow}>
@@ -108,25 +130,37 @@ export function TenantLicensePage() {
          </div>
        </Card>

-        {/* Limits card */}
-        <Card title="Limits">
-          <div className={styles.dividerList}>
-            {Object.entries(data.limits).map(([key, value]) => (
-              <div key={key} className={styles.kvRow}>
-                <span className={styles.kvLabel}>{LIMIT_LABELS[key] ?? key}</span>
-                <span className={styles.kvValue} style={{ fontVariantNumeric: 'tabular-nums' }}>
-                  {value.toLocaleString()}
-                </span>
-              </div>
-            ))}
-            {Object.keys(data.limits).length === 0 && (
-              <p className={styles.description}>No limits configured.</p>
-            )}
-          </div>
-        </Card>
+        {meteredEntries.length > 0 && (
+          <Card title="Resource Usage">
+            <div className={styles.dividerList}>
+              {meteredEntries.map((entry) => (
+                <UsageIndicator
+                  key={entry.label}
+                  label={entry.label}
+                  used={entry.used}
+                  limit={entry.limit}
+                />
+              ))}
+            </div>
+          </Card>
+        )}
+
+        {configEntries.length > 0 && (
+          <Card title="Plan Limits">
+            <div className={styles.dividerList}>
+              {configEntries.map((entry) => (
+                <div key={entry.label} className={styles.kvRow}>
+                  <span className={styles.kvLabel}>{entry.label}</span>
+                  <span className={styles.kvValue} style={{ fontVariantNumeric: 'tabular-nums' }}>
+                    {entry.value.toLocaleString()}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Card>
+        )}
      </div>

-      {/* License token card — full width */}
      <Card title="License Token">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <p className={styles.description}>
@@ -134,7 +168,7 @@ export function TenantLicensePage() {
          </p>
          <div className={styles.tokenBlock}>
            <code className={styles.tokenCode}>
-              {showToken ? data.token : '••••••••••••••••••••••••••••••••'}
+              {showToken ? data.token : '\u2022'.repeat(32)}
            </code>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
--- a/ui/src/pages/vendor/TenantDetailPage.tsx
+++ b/ui/src/pages/vendor/TenantDetailPage.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../api/vendor-hooks';
 import { errorMessage } from '../../api/client';
 import { ServerStatusBadge } from '../../components/ServerStatusBadge';
+import { UsageIndicator } from '../../components/UsageIndicator';
 import { tierColor } from '../../utils/tier';
 import styles from '../../styles/platform.module.css';
 import type { LicenseBundleResponse, MintLicenseRequest } from '../../types/api';
@@ -44,6 +45,13 @@ const LIMIT_LABELS: Record<string, string> = {

 const LIMIT_KEYS = Object.keys(LIMIT_LABELS);

+const METERED_LIMITS: Record<string, string> = {
+  max_agents: 'agents',
+  max_environments: 'environments',
+  max_apps: 'apps',
+  max_users: 'users',
+};
+
 function licenseDaysRemaining(expiresAt: string | null | undefined): number {
  if (!expiresAt) return 0;
  return Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 86_400_000);
@@ -340,6 +348,24 @@ export function TenantDetailPage() {
          )}
        </Card>

+        {/* Resource Usage */}
+        {data.usage && Object.keys(data.usage).length > 0 && license && (
+          <Card title="Resource Usage">
+            <div className={styles.dividerList}>
+              {Object.entries(METERED_LIMITS)
+                .filter(([limitKey]) => license.limits[limitKey] != null)
+                .map(([limitKey, usageKey]) => (
+                  <UsageIndicator
+                    key={limitKey}
+                    label={LIMIT_LABELS[limitKey] ?? limitKey}
+                    used={data.usage[usageKey] ?? 0}
+                    limit={license.limits[limitKey]}
+                  />
+                ))}
+            </div>
+          </Card>
+        )}
+
        {/* Tenant Info */}
        <Card title="Tenant Info">
          <div className={styles.dividerList}>
--- a/ui/src/styles/platform.module.css
+++ b/ui/src/styles/platform.module.css
@@ -61,3 +61,42 @@
  word-break: break-all;
  white-space: pre-wrap;
 }
+
+/* Usage progress bar */
+.usageRow {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.usageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.usageLabel {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.usageValue {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.usageBarTrack {
+  height: 8px;
+  border-radius: 4px;
+  background: var(--bg-inset);
+  overflow: hidden;
+}
+
+.usageBarFill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.4s ease, background-color 0.3s ease;
+}
--- a/ui/src/types/api.ts
+++ b/ui/src/types/api.ts
@@ -89,6 +89,7 @@ export interface VendorTenantDetail {
  serverHealthy: boolean;
  serverStatus: string;
  license: LicenseResponse | null;
+  usage: Record<string, number>;
 }

 export interface CreateTenantRequest {
@@ -125,6 +126,7 @@ export interface TenantLicenseData {
  expiresAt: string;
  token: string;
  daysRemaining: number;
+  usage: Record<string, number>;
 }

 export interface TenantSettings {