fix: display username in UI, fix license limits key mismatch

- Read user profile from Logto ID token in OrgResolver, store in
  Zustand org store, display in sidebar footer and TopBar avatar
- Fix license limits showing "—" by aligning frontend LIMIT_LABELS
  keys with backend snake_case convention (max_agents, retention_days,
  max_environments)
- Bump @cameleer/design-system to v0.1.38 (font-size floor)
- Add dev volume mount for local UI hot-reload without image rebuild

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/auth/OrgResolver.tsx

@@ -13,7 +13,8 @@ import { fetchConfig } from '../config';
 export function OrgResolver({ children }: { children: React.ReactNode }) {
   const { data: me, isLoading, isError } = useMe();
   const { getAccessToken } = useLogto();
-  const { setOrganizations, setCurrentOrg, setScopes, currentOrgId } = useOrgStore();
+  const { getIdTokenClaims } = useLogto();
+  const { setOrganizations, setCurrentOrg, setScopes, setUsername, currentOrgId } = useOrgStore();
 
   // Effect 1: Org population — runs when /api/me data loads
   useEffect(() => {
@@ -32,6 +33,16 @@ export function OrgResolver({ children }: { children: React.ReactNode }) {
     if (orgEntries.length === 1 && !currentOrgId) {
       setCurrentOrg(orgEntries[0].id);
     }
+
+    // Extract display name from ID token (local decode, no network call)
+    // eslint-disable-next-line react-hooks/exhaustive-deps — getIdTokenClaims is unstable
+    getIdTokenClaims().then((claims) => {
+      if (claims) {
+        const c = claims as Record<string, unknown>;
+        const name = (c.username ?? c.name ?? c.email ?? null) as string | null;
+        setUsername(name);
+      }
+    }).catch(() => {});
   }, [me]);
 
   // Effect 2: Scope fetching — runs when me loads OR when currentOrgId changes

ui/src/auth/useOrganization.ts

@@ -12,9 +12,11 @@ interface OrgState {
   currentTenantId: string | null; // DB UUID — used for API calls like /api/tenants/{id}
   organizations: OrgInfo[];
   scopes: Set<string>;
+  username: string | null;
   setCurrentOrg: (orgId: string | null) => void;
   setOrganizations: (orgs: OrgInfo[]) => void;
   setScopes: (scopes: Set<string>) => void;
+  setUsername: (name: string | null) => void;
 }
 
 export const useOrgStore = create<OrgState>((set, get) => ({
@@ -22,6 +24,8 @@ export const useOrgStore = create<OrgState>((set, get) => ({
   currentTenantId: null,
   organizations: [],
   scopes: new Set(),
+  username: null,
+  setUsername: (name) => set({ username: name }),
   setCurrentOrg: (orgId) => {
     const org = get().organizations.find((o) => o.id === orgId);
     set({ currentOrgId: orgId, currentTenantId: org?.tenantId ?? null });