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>

CLAUDE.md

@@ -109,7 +109,7 @@ SaaS admin credentials (`SAAS_ADMIN_USER`/`SAAS_ADMIN_PASS`) work for both the S
   - `cameleer-saas` — SaaS app (frontend + JAR baked in)
   - `cameleer-logto` — custom Logto with sign-in UI baked in
 - Docker builds: `--no-cache`, `--provenance=false` for Gitea compatibility
-- `docker-compose.dev.yml` — exposes ports for direct access, sets `SPRING_PROFILES_ACTIVE: dev`. No volume mounts — all artifacts come from CI-built images
+- `docker-compose.dev.yml` — exposes ports for direct access, sets `SPRING_PROFILES_ACTIVE: dev`. Volume-mounts `./ui/dist` into the container so local UI builds are served without rebuilding the Docker image (`SPRING_WEB_RESOURCES_STATIC_LOCATIONS` overrides classpath)
 - Design system: import from `@cameleer/design-system` (Gitea npm registry)
 
 ## Disabled Skills

docker-compose.dev.yml

@@ -12,8 +12,11 @@ services:
   cameleer-saas:
     ports:
       - "8080:8080"
+    volumes:
+      - ./ui/dist:/app/static
     environment:
       SPRING_PROFILES_ACTIVE: dev
+      SPRING_WEB_RESOURCES_STATIC_LOCATIONS: file:/app/static/,classpath:/static/
 
   cameleer3-server:
     ports:

ui/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@cameleer/design-system": "0.1.37",
+        "@cameleer/design-system": "0.1.38",
         "@logto/react": "^4.0.13",
         "@tanstack/react-query": "^5.90.0",
         "lucide-react": "^1.7.0",
@@ -309,9 +309,9 @@
       }
     },
     "node_modules/@cameleer/design-system": {
-      "version": "0.1.37",
+      "version": "0.1.38",
-      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.37/design-system-0.1.37.tgz",
+      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.38/design-system-0.1.38.tgz",
-      "integrity": "sha512-aboFqyADzT7r8PNHkdktumoWmOZpqa7Gn+jjMdmXp5EKZdz5Iva1RJdeTFmRIVbxk/4dJ8fOAC8+q/TvNQcU8A==",
+      "integrity": "sha512-8tsWZTYkLg3JbvA8p+MVP05nsuJnIXZZvgx6d71e7BO3rtoI8bpvQn/ZElag6tQnBEbeqStQqqDnZ5TAWN2pvw==",
       "dependencies": {
         "lucide-react": "^1.7.0",
         "react": "^19.0.0",

ui/package.json

@@ -10,7 +10,7 @@
     "postinstall": "node -e \"const fs=require('fs'),p='node_modules/@cameleer/design-system/assets/';if(fs.existsSync('public')){fs.copyFileSync(p+'cameleer3-logo.svg','public/favicon.svg')}\""
   },
   "dependencies": {
-    "@cameleer/design-system": "0.1.37",
+    "@cameleer/design-system": "0.1.38",
     "@logto/react": "^4.0.13",
     "@tanstack/react-query": "^5.90.0",
     "lucide-react": "^1.7.0",

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',
+  max_agents: 'Max Agents',
-  retentionDays: 'Retention Days',
+  retention_days: 'Retention Days',
-  maxEnvironments: 'Max Environments',
+  max_environments: 'Max Environments',
 };
 
 function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {