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 });

ui/src/components/Layout.tsx

@@ -7,6 +7,7 @@ import {
 } from '@cameleer/design-system';
 import { useAuth } from '../auth/useAuth';
 import { useScopes } from '../auth/useScopes';
+import { useOrgStore } from '../auth/useOrganization';
 import { EnvironmentTree } from './EnvironmentTree';
 import cameleerLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';
 
@@ -93,6 +94,7 @@ export function Layout() {
   const navigate = useNavigate();
   const { logout } = useAuth();
   const scopes = useScopes();
+  const { username } = useOrgStore();
 
   const [envSectionOpen, setEnvSectionOpen] = useState(true);
   const [collapsed, setCollapsed] = useState(false);
@@ -158,7 +160,7 @@ export function Layout() {
         {/* User info + logout */}
         <Sidebar.FooterLink
           icon={<UserIcon />}
-          label="Account"
+          label={username ?? 'Account'}
           onClick={logout}
         />
       </Sidebar.Footer>
@@ -169,7 +171,7 @@ export function Layout() {
     <AppShell sidebar={sidebar}>
       <TopBar
         breadcrumb={[]}
-        user={undefined}
+        user={username ? { name: username } : undefined}
         onLogout={logout}
       />
       <Outlet />

ui/src/pages/LicensePage.tsx

@@ -17,9 +17,9 @@ const FEATURE_LABELS: Record<string, string> = {
 };
 
 const LIMIT_LABELS: Record<string, string> = {
-  maxAgents: 'Max Agents',
-  retentionDays: 'Retention Days',
-  maxEnvironments: 'Max Environments',
+  max_agents: 'Max Agents',
+  retention_days: 'Retention Days',
+  max_environments: 'Max Environments',
 };
 
 function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {