feat: add Community/Pro licensing, fleet view, and UI reorganization (#145)

* feat: add license gating system with Lemon Squeezy integration

Add Community/Pro tier infrastructure:
- LicenseService singleton with Lemon Squeezy license API integration
- /api/license endpoints (GET info, POST activate/deactivate/validate)
- 14-day Pro trial activated automatically on first boot
- 72-hour periodic validation with 30-day offline grace period
- LicenseContext provider for frontend tier awareness
- License settings tab with activation UI and status display
- ProBadge and ProGate reusable components for feature gating
- requirePro per-route guard for backend Pro-only endpoints
- Proxy bypass for /api/license routes (local-only, never proxied)

* feat: add user profile dropdown and reorganize top navigation

- Create UserProfileDropdown component with settings, billing, theme
  toggle (System/Light/Dark), documentation links, and logout button
- Remove logout button from sidebar header
- Remove standalone settings button from top bar
- Move theme toggle from Settings modal to profile dropdown
- Inject app version via Vite define from root package.json
- Add globals.d.ts for __APP_VERSION__ type declaration

* refactor(settings): remove appearance tab from settings modal

Theme toggle was moved to the User Profile Dropdown in the previous
commit. Remove the now-redundant Appearance section, its nav button,
and the unused theme/setTheme props from SettingsModal.

* feat: add fleet view dashboard and about settings section

Fleet Overview: aggregates all nodes into a card grid showing status,
container counts, CPU/RAM/disk usage bars. Pro tier unlocks stack
drill-down with auto-refresh (30s). Backend endpoints /api/fleet/overview
and /api/fleet/node/:nodeId/stacks query nodes in parallel.

About section in Settings: displays version, license tier, status,
instance ID, and links to docs/changelog/issues.

Sidebar perf fix: stack status fetches now run in parallel via
Promise.allSettled instead of sequential for-loop, significantly
reducing load time for nodes with many stacks.

Also removes version number from User Profile Dropdown (now in About).

* fix(ci): resolve Docker build and E2E test failures

- Copy root package.json into frontend build stage so vite.config.ts
  can read the app version during Docker multi-stage build.
- Update auth E2E test: logout button moved into User Profile Dropdown.
- Update nodes E2E test: Settings button moved into User Profile Dropdown.
This commit is contained in:
Anso
2026-03-25 08:32:07 -04:00
committed by GitHub
parent 19d8daf0f1
commit 4f26f22cce
16 changed files with 1636 additions and 96 deletions
+102
View File
@@ -0,0 +1,102 @@
import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
import { apiFetch } from '@/lib/api';
export type LicenseTier = 'community' | 'pro';
export type LicenseStatus = 'community' | 'trial' | 'active' | 'expired' | 'disabled';
export interface LicenseInfo {
tier: LicenseTier;
status: LicenseStatus;
customerName: string | null;
productName: string | null;
maskedKey: string | null;
validUntil: string | null;
trialDaysRemaining: number | null;
instanceId: string;
}
interface LicenseContextType {
license: LicenseInfo | null;
isPro: boolean;
loading: boolean;
refresh: () => Promise<void>;
activate: (licenseKey: string) => Promise<{ success: boolean; error?: string }>;
deactivate: () => Promise<{ success: boolean; error?: string }>;
}
const LicenseContext = createContext<LicenseContextType | undefined>(undefined);
export function LicenseProvider({ children }: { children: ReactNode }) {
const [license, setLicense] = useState<LicenseInfo | null>(null);
const [loading, setLoading] = useState(true);
const refresh = useCallback(async () => {
try {
const res = await apiFetch('/license', { localOnly: true });
if (res.ok) {
const data = await res.json();
setLicense(data);
}
} catch {
// Silently fail — license info is non-critical
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
refresh();
}, [refresh]);
const activate = useCallback(async (licenseKey: string): Promise<{ success: boolean; error?: string }> => {
try {
const res = await apiFetch('/license/activate', {
method: 'POST',
localOnly: true,
body: JSON.stringify({ license_key: licenseKey }),
});
const data = await res.json();
if (res.ok && data.success) {
setLicense(data.license);
return { success: true };
}
return { success: false, error: data.error || 'Activation failed' };
} catch {
return { success: false, error: 'Network error. Please try again.' };
}
}, []);
const deactivate = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
try {
const res = await apiFetch('/license/deactivate', {
method: 'POST',
localOnly: true,
});
const data = await res.json();
if (res.ok && data.success) {
setLicense(data.license);
return { success: true };
}
return { success: false, error: data.error || 'Deactivation failed' };
} catch {
return { success: false, error: 'Network error. Please try again.' };
}
}, []);
const isPro = license?.tier === 'pro';
return (
<LicenseContext.Provider value={{ license, isPro, loading, refresh, activate, deactivate }}>
{children}
</LicenseContext.Provider>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useLicense(): LicenseContextType {
const context = useContext(LicenseContext);
if (context === undefined) {
throw new Error('useLicense must be used within a LicenseProvider');
}
return context;
}