PR16: ConfigurationManager with Hierarchical Config Support (#17)

* fix(admin-ui): fix TypeScript build errors in ConfigurationManager component

- Remove unused React import
- Remove unused Accordion-related imports
- Remove unused ExpandMoreIcon import
- Remove unused safeKeys variable (use setter only)
- Remove unused useTraits import and usage
- Fix hasConfigAccess to not use non-existent traits.has method

This completes the admin UI build fixes for the feat/pr16-config-manager branch.

* PR16: Add initial ConfigurationManager component (read-only)

- Created ConfigurationManager.tsx with hierarchical config display
- Added v4 config API endpoints (effective, hierarchy, safe-keys, flush-cache)
- Implemented basic HierarchicalConfigProvider with env/default fallback
- Added CacheManager with in-memory storage
- Wired ConfigurationManager into Admin Console Settings tab
- UI displays config sources, hierarchy levels, and masked secrets

Note: This is the minimal read-only implementation per Phase 3 runbook.
Full database-backed hierarchy and editing capabilities will be added
in subsequent PRs (PR17-21).

* PR16: Implement comprehensive ConfigurationManager with database support

Major enhancements to hierarchical configuration system:

Backend Improvements:
- Added database models for hierarchical config (global, tenant, department, group, user levels)
- Implemented ConfigEncryption class with Fernet encryption for sensitive values
- Enhanced HierarchicalConfigProvider with full database-backed resolution
- Added Redis caching with automatic memory fallback
- Created migration script for config tables
- Added validation framework for safe configuration keys
- Implemented masked value handling for audit trail

Frontend Enhancements:
- Enhanced ConfigurationManager UI with category-based organization
- Added search and filter functionality for configuration keys
- Improved hierarchy visualization with source badges
- Added cache statistics display
- Implemented proper masking for sensitive values
- Added comprehensive key coverage (30+ config keys across 8 categories)

Infrastructure:
- Added required dependencies (cryptography, redis, sse-starlette)
- Updated anyio to 4.11.0 to resolve dependency conflicts
- Prepared foundation for SSE diagnostics and circuit breakers

This establishes the full framework for Phase 3 configuration management.
PR17 will add write capabilities for safe keys, followed by SSE diagnostics,
circuit breakers, and rate limiting in subsequent PRs.

---------

Co-authored-by: Faxbot Agent <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

api/admin_ui/src/App.tsx

@@ -33,6 +33,7 @@ import ListAltIcon from '@mui/icons-material/ListAlt';
 import InboxIcon from '@mui/icons-material/Inbox';
 import VpnKeyIcon from '@mui/icons-material/VpnKey';
 import CodeIcon from '@mui/icons-material/Code';
+import TuneIcon from '@mui/icons-material/Tune';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import DescriptionIcon from '@mui/icons-material/Description';
@@ -60,6 +61,7 @@ import TunnelSettings from './components/TunnelSettings';
 import ProviderSetupWizard from './components/ProviderSetupWizard';
 import InboundWebhookTester from './components/InboundWebhookTester';
 import OutboundSmokeTests from './components/OutboundSmokeTests';
+import ConfigurationManager from './components/ConfigurationManager';
 import { ThemeProvider } from './theme/ThemeContext';
 import { ThemeToggle } from './components/ThemeToggle';
 
@@ -293,6 +295,7 @@ function AppContent() {
   const settingsItems = [
     { label: 'Setup', icon: <HelpIcon /> },
     { label: 'Settings', icon: <SettingsIcon /> },
+    { label: 'Configuration', icon: <TuneIcon /> },
     { label: 'Keys', icon: <VpnKeyIcon /> },
     { label: 'MCP', icon: <CodeIcon /> },
   ];
@@ -776,8 +779,9 @@ function AppContent() {
                   <Settings client={client!} readOnly={!hasTrait('role.admin')} />
                 </Box>
               )}
-              {settingsTab === 2 && <ApiKeys client={client!} readOnly={!hasTrait('role.admin')} />}
-              {settingsTab === 3 && <MCP client={client!} />}
+              {settingsTab === 2 && <ConfigurationManager client={client!} docsBase={uiConfig?.docs_base || adminConfig?.branding?.docs_base} />}
+              {settingsTab === 3 && <ApiKeys client={client!} readOnly={!hasTrait('role.admin')} />}
+              {settingsTab === 4 && <MCP client={client!} />}
             </Box>
           </Paper>
         </TabPanel>

api/admin_ui/src/api/client.ts

@@ -160,6 +160,35 @@ export class AdminAPIClient {
     return res.json();
   }
 
+  // v4 Config (read-only baseline)
+  async v4GetEffective(payload: { keys?: string[]; user_id?: string; tenant_id?: string; department?: string; groups?: string[] } = {}): Promise<{ schema_version: number; items: Record<string, any> }>{
+    const res = await this.fetch('/admin/config/v4/effective', {
+      method: 'POST',
+      body: JSON.stringify(payload || {}),
+    });
+    return res.json();
+  }
+
+  async v4GetHierarchy(payload: { key: string; user_id?: string; tenant_id?: string; department?: string; groups?: string[] }): Promise<any>{
+    const res = await this.fetch('/admin/config/v4/hierarchy', {
+      method: 'POST',
+      body: JSON.stringify(payload || {}),
+    });
+    return res.json();
+  }
+
+  async v4GetSafeKeys(): Promise<Record<string, any>>{
+    const res = await this.fetch('/admin/config/v4/safe-keys');
+    return res.json();
+  }
+
+  async v4FlushCache(scope: string = '*'): Promise<{ ok: boolean; deleted?: number | null; scope: string; backend?: string }>{
+    const res = await this.fetch(`/admin/config/v4/flush-cache?scope=${encodeURIComponent(scope)}`, {
+      method: 'POST',
+    });
+    return res.json();
+  }
+
   // User traits (admin-only)
   async getUserTraits(): Promise<{ schema_version: number; user: { id: string }; traits: string[] }>{
     const res = await this.fetch('/admin/user/traits');