From d13e1cd76acd6c9a00fc9cbcb10c979f4e51ff4b Mon Sep 17 00:00:00 2001
From: DSS <dss-agent@overbits.luz.uy>
Date: Fri, 12 Dec 2025 15:46:08 -0300
Subject: [PATCH] admin-ui: align with API, add auth, fix integrations

---
 admin-ui/src/api/client.ts                    | 190 ++--
 admin-ui/src/api/types.ts                     | 478 ++++++----
 .../src/components/layout/ChatSidebar.css     |  16 +
 .../src/components/layout/ChatSidebar.tsx     |  18 +-
 admin-ui/src/components/layout/Header.css     |  10 +
 admin-ui/src/components/layout/Header.tsx     | 100 +++
 admin-ui/src/components/layout/Stage.tsx      |  64 +-
 admin-ui/src/state/index.ts                   |   5 +-
 admin-ui/src/state/project.ts                 |  51 +-
 admin-ui/src/state/user.ts                    |  56 +-
 admin-ui/src/workdesks/AdminWorkdesk.tsx      | 823 ++++++++++++++----
 admin-ui/src/workdesks/QAWorkdesk.tsx         |  77 +-
 admin-ui/src/workdesks/UIWorkdesk.tsx         | 239 +++--
 admin-ui/src/workdesks/UXWorkdesk.tsx         |  87 +-
 apps/api/server.py                            |  13 +-
 dss/storage/json_store.py                     |   9 +-
 16 files changed, 1565 insertions(+), 671 deletions(-)

diff --git a/admin-ui/src/api/client.ts b/admin-ui/src/api/client.ts
index f7db451..0784940 100644
--- a/admin-ui/src/api/client.ts
+++ b/admin-ui/src/api/client.ts
@@ -23,7 +23,8 @@ class ApiClient {
     data?: unknown,
     options?: RequestInit
   ): Promise<T> {
-    const url = `${this.baseUrl}${path}`;
+    // Most endpoints live under `/api/*`, but health is intentionally exposed at `/health`.
+    const url = path === '/health' ? path : `${this.baseUrl}${path}`;
 
     // Deduplicate GET requests
     if (method === 'GET') {
@@ -58,6 +59,14 @@ class ApiClient {
       ...options?.headers
     };
 
+    // Attach auth token when present (headless server auth).
+    if (typeof window !== 'undefined') {
+      const token = localStorage.getItem('dss-token');
+      if (token) {
+        (headers as Record<string, string>)['Authorization'] = `Bearer ${token}`;
+      }
+    }
+
     const config: RequestInit = {
       method,
       headers,
@@ -124,35 +133,64 @@ export const api = new ApiClient();
 
 // Import types
 import type {
-  Project, ProjectCreateData, ProjectConfig,
-  FigmaFile, FigmaExtractResult, FigmaHealthStatus,
+  AuthLoginRequest,
+  AuthLoginResponse,
+  UserProfile,
+  Project,
+  ProjectCreateData,
+  ProjectUpdateData,
+  ProjectConfig,
+  ProjectDashboardSummary,
+  FigmaFile,
+  FigmaFileCreateData,
+  FigmaHealthStatus,
+  FigmaExtractTokensResult,
+  FigmaExtractComponentsResult,
+  FigmaExtractStylesResult,
+  FigmaSyncTokensResult,
+  FigmaValidateResult,
+  FigmaGenerateCodeResult,
   TokenDrift,
+  TokenDriftListResponse,
   Component,
-  ESREDefinition, ESRECreateData,
-  AuditEntry, AuditStats,
-  SystemHealth, RuntimeConfig,
-  DiscoveryResult, DiscoveryStats,
-  Team, TeamCreateData,
-  Integration, IntegrationCreateData,
-  ChatResponse, MCPTool,
-  Service
+  ESREDefinition,
+  ESRECreateData,
+  AuditLogResponse,
+  AuditStats,
+  RuntimeConfigEnvelope,
+  ConfigUpdateRequest,
+  FigmaConfigStatus,
+  FigmaConnectionTestResult,
+  SystemHealth,
+  ServiceDiscoveryEnvelope,
+  MCPIntegrationsResponse,
+  ProjectIntegrationsResponse,
+  ChatResponse,
+  MCPTool,
+  MCPStatus
 } from './types';
 
 // Type-safe API endpoints - Mapped to actual DSS backend
 export const endpoints = {
+  // Auth
+  auth: {
+    login: (data: AuthLoginRequest) => api.post<AuthLoginResponse>('/auth/login', data),
+    me: () => api.get<UserProfile>('/auth/me')
+  },
+
   // Projects
   projects: {
     list: (status?: string) =>
       api.get<Project[]>(status ? `/projects?status=${status}` : '/projects'),
     get: (id: string) => api.get<Project>(`/projects/${id}`),
     create: (data: ProjectCreateData) => api.post<Project>('/projects', data),
-    update: (id: string, data: Partial<Project>) => api.put<Project>(`/projects/${id}`, data),
+    update: (id: string, data: ProjectUpdateData) => api.put<Project>(`/projects/${id}`, data),
     delete: (id: string) => api.delete<void>(`/projects/${id}`),
     config: (id: string) => api.get<ProjectConfig>(`/projects/${id}/config`),
     updateConfig: (id: string, data: ProjectConfig) => api.put<ProjectConfig>(`/projects/${id}/config`, data),
     context: (id: string) => api.get<unknown>(`/projects/${id}/context`),
     components: (id: string) => api.get<Component[]>(`/projects/${id}/components`),
-    dashboard: (id: string) => api.get<unknown>(`/projects/${id}/dashboard/summary`),
+    dashboard: (id: string) => api.get<ProjectDashboardSummary>(`/projects/${id}/dashboard/summary`),
     // Files (sandboxed)
     files: (id: string, path?: string) =>
       api.get<unknown>(`/projects/${id}/files${path ? `?path=${encodeURIComponent(path)}` : ''}`),
@@ -163,7 +201,7 @@ export const endpoints = {
       api.post<void>(`/projects/${id}/files/write`, { path, content }),
     // Figma files per project
     figmaFiles: (id: string) => api.get<FigmaFile[]>(`/projects/${id}/figma-files`),
-    addFigmaFile: (id: string, data: { name: string; fileKey: string }) =>
+    addFigmaFile: (id: string, data: FigmaFileCreateData) =>
       api.post<FigmaFile>(`/projects/${id}/figma-files`, data),
     syncFigmaFile: (id: string, fileId: string) =>
       api.put<FigmaFile>(`/projects/${id}/figma-files/${fileId}/sync`, {}),
@@ -174,23 +212,26 @@ export const endpoints = {
   // Figma Integration
   figma: {
     health: () => api.get<FigmaHealthStatus>('/figma/health'),
-    extractVariables: (fileKey: string, nodeId?: string) =>
-      api.post<FigmaExtractResult>('/figma/extract-variables', { file_key: fileKey, node_id: nodeId }),
-    extractComponents: (fileKey: string, nodeId?: string) =>
-      api.post<FigmaExtractResult>('/figma/extract-components', { file_key: fileKey, node_id: nodeId }),
-    extractStyles: (fileKey: string, nodeId?: string) =>
-      api.post<FigmaExtractResult>('/figma/extract-styles', { file_key: fileKey, node_id: nodeId }),
+    extractVariables: (fileKey: string, format: string = 'css') =>
+      api.post<FigmaExtractTokensResult>('/figma/extract-variables', { file_key: fileKey, format }),
+    extractComponents: (fileKey: string) =>
+      api.post<FigmaExtractComponentsResult>('/figma/extract-components', { file_key: fileKey, format: 'json' }),
+    extractStyles: (fileKey: string) =>
+      api.post<FigmaExtractStylesResult>('/figma/extract-styles', { file_key: fileKey, format: 'json' }),
     syncTokens: (fileKey: string, targetPath: string, format?: string) =>
-      api.post<{ synced: number }>('/figma/sync-tokens', { file_key: fileKey, target_path: targetPath, format }),
-    validate: (componentDef: unknown) =>
-      api.post<{ valid: boolean; errors: string[] }>('/figma/validate', componentDef),
-    generateCode: (componentDef: unknown, framework?: string) =>
-      api.post<{ code: string }>('/figma/generate-code', { component: componentDef, framework })
+      api.post<FigmaSyncTokensResult>('/figma/sync-tokens', { file_key: fileKey, target_path: targetPath, format }),
+    validateComponents: (fileKey: string) =>
+      api.post<FigmaValidateResult>('/figma/validate', { file_key: fileKey, format: 'json' }),
+    generateCode: (fileKey: string, componentName: string, framework: string = 'webcomponent') =>
+      api.post<FigmaGenerateCodeResult>(
+        `/figma/generate-code?file_key=${encodeURIComponent(fileKey)}&component_name=${encodeURIComponent(componentName)}&framework=${encodeURIComponent(framework)}`,
+        {}
+      )
   },
 
   // Token Drift
   tokens: {
-    drift: (projectId: string) => api.get<TokenDrift[]>(`/projects/${projectId}/token-drift`),
+    drift: (projectId: string) => api.get<TokenDriftListResponse>(`/projects/${projectId}/token-drift`),
     recordDrift: (projectId: string, data: Partial<TokenDrift>) =>
       api.post<TokenDrift>(`/projects/${projectId}/token-drift`, data),
     updateDriftStatus: (projectId: string, driftId: string, status: string) =>
@@ -208,22 +249,11 @@ export const endpoints = {
       api.delete<void>(`/projects/${projectId}/esre/${esreId}`)
   },
 
-  // Integrations per project
-  integrations: {
-    list: (projectId: string) => api.get<Integration[]>(`/projects/${projectId}/integrations`),
-    create: (projectId: string, data: IntegrationCreateData) =>
-      api.post<Integration>(`/projects/${projectId}/integrations`, data),
-    update: (projectId: string, type: string, data: Partial<Integration>) =>
-      api.put<Integration>(`/projects/${projectId}/integrations/${type}`, data),
-    delete: (projectId: string, type: string) =>
-      api.delete<void>(`/projects/${projectId}/integrations/${type}`)
-  },
-
   // Discovery
   discovery: {
-    run: () => api.get<DiscoveryResult>('/discovery'),
-    scan: () => api.post<DiscoveryResult>('/discovery/scan', {}),
-    stats: () => api.get<DiscoveryStats>('/discovery/stats'),
+    run: () => api.get<unknown>('/discovery'),
+    scan: () => api.post<unknown>('/discovery/scan', {}),
+    stats: () => api.get<unknown>('/discovery/stats'),
     activity: () => api.get<unknown[]>('/discovery/activity'),
     ports: () => api.get<unknown[]>('/discovery/ports'),
     env: () => api.get<unknown>('/discovery/env')
@@ -231,20 +261,20 @@ export const endpoints = {
 
   // Teams
   teams: {
-    list: () => api.get<Team[]>('/teams'),
-    get: (id: string) => api.get<Team>(`/teams/${id}`),
-    create: (data: TeamCreateData) => api.post<Team>('/teams', data)
+    list: () => api.get<unknown[]>('/teams'),
+    get: (id: string) => api.get<unknown>(`/teams/${id}`),
+    create: (data: Record<string, unknown>) => api.post<unknown>('/teams', data)
   },
 
   // System & Config
   system: {
     health: () => api.get<SystemHealth>('/health'),
     stats: () => api.get<unknown>('/stats'),
-    config: () => api.get<RuntimeConfig>('/config'),
-    updateConfig: (data: Partial<RuntimeConfig>) => api.put<RuntimeConfig>('/config', data),
-    figmaConfig: () => api.get<{ configured: boolean }>('/config/figma'),
-    testFigma: () => api.post<{ success: boolean; message: string }>('/config/figma/test', {}),
-    reset: () => api.post<void>('/system/reset', {}),
+    config: () => api.get<RuntimeConfigEnvelope>('/config'),
+    updateConfig: (data: ConfigUpdateRequest) => api.put<Record<string, unknown>>('/config', data),
+    figmaConfig: () => api.get<FigmaConfigStatus>('/config/figma'),
+    testFigma: () => api.post<FigmaConnectionTestResult>('/config/figma/test', {}),
+    reset: (confirm: 'RESET') => api.post<void>('/system/reset', { confirm }),
     mode: () => api.get<{ mode: string }>('/mode'),
     setMode: (mode: string) => api.put<{ mode: string }>('/mode', { mode })
   },
@@ -252,15 +282,15 @@ export const endpoints = {
   // Cache Management
   cache: {
     clear: () => api.post<{ cleared: number }>('/cache/clear', {}),
-    purge: () => api.delete<{ purged: number }>('/cache')
+    purge: () => api.delete<{ success: boolean }>('/cache')
   },
 
   // Services
   services: {
-    list: () => api.get<Service[]>('/services'),
-    configure: (name: string, config: unknown) => api.put<Service>(`/services/${name}`, config),
+    list: () => api.get<ServiceDiscoveryEnvelope>('/services'),
+    configure: (name: string, config: unknown) => api.put<Record<string, unknown>>(`/services/${name}`, config),
     storybook: () => api.get<{ running: boolean; url?: string }>('/services/storybook'),
-    initStorybook: () => api.post<void>('/storybook/init', {}),
+    initStorybook: (projectId?: string) => api.post<void>('/storybook/init', projectId ? { project_id: projectId } : {}),
     clearStories: () => api.delete<void>('/storybook/stories')
   },
 
@@ -268,9 +298,9 @@ export const endpoints = {
   audit: {
     list: (params?: Record<string, string>) => {
       const query = params ? '?' + new URLSearchParams(params).toString() : '';
-      return api.get<AuditEntry[]>(`/audit${query}`);
+      return api.get<AuditLogResponse>(`/audit${query}`);
     },
-    create: (entry: Partial<AuditEntry>) => api.post<AuditEntry>('/audit', entry),
+    create: (entry: Record<string, unknown>) => api.post<{ success: boolean; message: string }>('/audit', entry),
     stats: () => api.get<AuditStats>('/audit/stats'),
     categories: () => api.get<string[]>('/audit/categories'),
     actions: () => api.get<string[]>('/audit/actions'),
@@ -285,17 +315,59 @@ export const endpoints = {
 
   // Claude AI Chat
   claude: {
-    chat: (message: string, projectId?: string, context?: unknown) =>
-      api.post<ChatResponse>('/claude/chat', { message, project_id: projectId, context })
+    chat: (
+      message: string,
+      projectId?: string,
+      context?: unknown,
+      options?: { user_id?: number; model?: 'claude' | 'gemini'; enable_tools?: boolean; history?: unknown[] }
+    ) =>
+      api.post<ChatResponse>('/claude/chat', {
+        message,
+        project_id: projectId,
+        user_id: options?.user_id,
+        model: options?.model,
+        enable_tools: options?.enable_tools,
+        history: options?.history,
+        context
+      })
   },
 
   // MCP Tools
   mcp: {
-    integrations: () => api.get<string[]>('/mcp/integrations'),
+    integrations: () => api.get<MCPIntegrationsResponse>('/mcp/integrations'),
+    projectIntegrations: (projectId: string, userId?: number) =>
+      api.get<ProjectIntegrationsResponse>(
+        `/projects/${projectId}/integrations${typeof userId === 'number' ? `?user_id=${userId}` : ''}`
+      ),
+    upsertProjectIntegration: (
+      projectId: string,
+      userId: number,
+      integration_type: string,
+      config: Record<string, unknown>,
+      enabled: boolean = true
+    ) =>
+      api.post<Record<string, unknown>>(
+        `/projects/${projectId}/integrations?user_id=${userId}`,
+        { integration_type, config, enabled }
+      ),
+    updateProjectIntegration: (
+      projectId: string,
+      userId: number,
+      integration_type: string,
+      update: { config?: Record<string, unknown>; enabled?: boolean }
+    ) =>
+      api.put<Record<string, unknown>>(
+        `/projects/${projectId}/integrations/${integration_type}?user_id=${userId}`,
+        update
+      ),
+    deleteProjectIntegration: (projectId: string, userId: number, integration_type: string) =>
+      api.delete<Record<string, unknown>>(
+        `/projects/${projectId}/integrations/${integration_type}?user_id=${userId}`
+      ),
     tools: () => api.get<MCPTool[]>('/mcp/tools'),
     tool: (name: string) => api.get<MCPTool>(`/mcp/tools/${name}`),
     execute: (name: string, params: unknown) => api.post<unknown>(`/mcp/tools/${name}/execute`, params),
-    status: () => api.get<{ connected: boolean; tools: number }>('/mcp/status')
+    status: () => api.get<MCPStatus>('/mcp/status')
   },
 
   // Browser Logs
@@ -307,7 +379,7 @@ export const endpoints = {
   // Debug
   debug: {
     diagnostic: () => api.get<unknown>('/debug/diagnostic'),
-    workflows: () => api.get<unknown[]>('/debug/workflows')
+    workflows: () => api.get<Record<string, unknown>>('/debug/workflows')
   },
 
   // Design System Ingestion
diff --git a/admin-ui/src/api/types.ts b/admin-ui/src/api/types.ts
index abd2179..4fbf0fc 100644
--- a/admin-ui/src/api/types.ts
+++ b/admin-ui/src/api/types.ts
@@ -1,4 +1,39 @@
 // DSS Admin UI - API Types
+//
+// These types match the headless server in `apps/api/server.py`.
+
+// ============ Auth ============
+
+export type AtlassianService = 'jira' | 'confluence';
+
+export interface AuthLoginRequest {
+  url: string;
+  email: string;
+  api_token: string;
+  service?: AtlassianService;
+}
+
+export interface AuthLoginResponse {
+  token: string;
+  user: {
+    id: number;
+    email: string;
+    display_name: string;
+    atlassian_url?: string;
+    service?: AtlassianService;
+  };
+  expires_at: string;
+}
+
+export interface UserProfile {
+  id: number;
+  email: string;
+  display_name: string;
+  atlassian_url?: string;
+  atlassian_service?: AtlassianService;
+  created_at?: string;
+  last_login?: string;
+}
 
 // ============ Projects ============
 
@@ -6,127 +41,201 @@ export interface Project {
   id: string;
   name: string;
   description?: string;
-  path: string;
-  status: 'active' | 'archived' | 'draft';
+  figma_file_key?: string;
+  root_path?: string;
+  status: 'active' | 'archived' | 'draft' | string;
   created_at: string;
   updated_at: string;
-  components_count?: number;
-  tokens_count?: number;
 }
 
 export interface ProjectCreateData {
   name: string;
   description?: string;
-  path: string;
+  figma_file_key?: string;
+  root_path?: string;
 }
 
+export interface ProjectUpdateData {
+  name?: string;
+  description?: string;
+  figma_file_key?: string;
+  root_path?: string;
+  status?: string;
+}
+
+// `.dss/config.json` (managed by `ConfigService`)
 export interface ProjectConfig {
+  schema_version?: string;
   figma?: {
-    file_key?: string;
-    access_token?: string;
-  };
-  storybook?: {
-    url?: string;
-    config_path?: string;
+    file_id?: string | null;
+    team_id?: string | null;
   };
   tokens?: {
-    source?: string;
-    output?: string;
-    format?: 'css' | 'scss' | 'json' | 'js';
+    output_path?: string;
+    format?: 'css' | 'scss' | 'json' | 'js' | string;
   };
-  components?: {
-    source_dir?: string;
-    patterns?: string[];
+  ai?: {
+    allowed_operations?: string[];
+    context_files?: string[];
+    max_file_size_kb?: number;
+  };
+  [key: string]: unknown;
+}
+
+export interface ProjectDashboardSummary {
+  project_id: string;
+  ux: {
+    figma_files_count: number;
+    figma_files: unknown[];
+  };
+  ui: {
+    token_drift: TokenDriftStats;
+    code_metrics: unknown;
+  };
+  qa: {
+    esre_count: number;
+    test_summary: unknown;
   };
 }
 
 // ============ Figma ============
 
+export interface FigmaHealthStatus {
+  status: 'ok' | 'degraded' | string;
+  mode: 'live' | 'mock' | string;
+  message: string;
+}
+
+export interface FigmaToken {
+  name: string;
+  value: unknown;
+  type: string;
+  description?: string;
+  category?: string;
+}
+
+export interface FigmaExtractTokensResult {
+  success: boolean;
+  tokens_count: number;
+  collections: string[];
+  output_path: string;
+  tokens: FigmaToken[];
+  formatted_output: string;
+}
+
+export interface FigmaComponentDefinition {
+  name: string;
+  key: string;
+  description: string;
+  properties: Record<string, unknown>;
+  variants: unknown[];
+}
+
+export interface FigmaExtractComponentsResult {
+  success: boolean;
+  components_count: number;
+  output_path?: string;
+  components: FigmaComponentDefinition[];
+  error?: string;
+}
+
+export interface FigmaStyleDefinition {
+  name: string;
+  key: string;
+  type: string;
+  properties: Record<string, unknown>;
+}
+
+export interface FigmaExtractStylesResult {
+  success: boolean;
+  styles_count: number;
+  output_path?: string;
+  styles: FigmaStyleDefinition[];
+  error?: string;
+}
+
+export interface FigmaSyncTokensResult {
+  success: boolean;
+  has_changes: boolean;
+  tokens_synced: number;
+  target_path: string;
+  backup_created: boolean;
+}
+
+export interface FigmaValidateResult {
+  success: boolean;
+  valid: boolean;
+  components_checked: number;
+  issues: Array<Record<string, unknown>>;
+  summary: { errors: number; warnings: number; info: number };
+}
+
+export interface FigmaGenerateCodeResult {
+  success: boolean;
+  component: string;
+  framework: string;
+  output_path?: string;
+  code: string;
+}
+
+// Per-project saved Figma files (UX dashboard)
 export interface FigmaFile {
   id: string;
   project_id: string;
-  name: string;
+  figma_url: string;
+  file_name: string;
   file_key: string;
-  status: 'synced' | 'pending' | 'error';
-  last_synced?: string;
+  sync_status: 'pending' | 'synced' | 'error' | string;
+  last_synced?: string | null;
+  created_at: string;
   error_message?: string;
-  created_at: string;
 }
 
-export interface FigmaHealthStatus {
-  connected: boolean;
-  token_configured: boolean;
-  last_request?: string;
-  rate_limit?: {
-    remaining: number;
-    reset_at: string;
-  };
+export interface FigmaFileCreateData {
+  figma_url: string;
+  file_name: string;
+  file_key: string;
 }
 
-export interface FigmaExtractResult {
-  success: boolean;
-  count: number;
-  items: FigmaExtractedItem[];
-  warnings?: string[];
-  errors?: string[];
-}
-
-export interface FigmaExtractedItem {
-  name: string;
-  type: string;
-  value: unknown;
-  description?: string;
-  metadata?: Record<string, unknown>;
-}
-
-// ============ Tokens ============
-
-export interface Token {
-  name: string;
-  value: string;
-  type: 'color' | 'spacing' | 'typography' | 'radius' | 'shadow' | 'other';
-  category?: string;
-  description?: string;
-  source?: 'figma' | 'code' | 'manual';
-}
-
-export interface TokenDrift {
-  id: string;
-  project_id: string;
-  token_name: string;
-  expected_value: string;
-  actual_value: string;
-  file_path: string;
-  line_number?: number;
-  severity: 'low' | 'medium' | 'high' | 'critical';
-  status: 'open' | 'resolved' | 'ignored';
-  created_at: string;
-  resolved_at?: string;
-}
-
-// ============ Components ============
+// ============ Components (stored) ============
 
 export interface Component {
   id: string;
+  project_id: string;
   name: string;
-  display_name?: string;
+  figma_key?: string;
   description?: string;
-  file_path: string;
-  type: 'react' | 'vue' | 'web-component' | 'other';
-  props?: ComponentProp[];
-  variants?: string[];
-  has_story?: boolean;
-  figma_node_id?: string;
+  properties?: Record<string, unknown>;
+  variants?: unknown[];
+  code_generated?: boolean;
   created_at: string;
   updated_at: string;
 }
 
-export interface ComponentProp {
-  name: string;
-  type: string;
-  required: boolean;
-  default_value?: unknown;
-  description?: string;
+// ============ Tokens / Drift ============
+
+export interface TokenDrift {
+  id: string;
+  component_id: string;
+  property_name: string;
+  hardcoded_value: string;
+  suggested_token?: string | null;
+  severity: 'info' | 'warning' | 'critical' | string;
+  file_path: string;
+  line_number: number;
+  status: 'pending' | 'fixed' | 'ignored' | string;
+  detected_at: string;
+}
+
+export interface TokenDriftStats {
+  total: number;
+  by_status: Record<string, number>;
+  by_severity: Record<string, number>;
+}
+
+export interface TokenDriftListResponse {
+  drifts: TokenDrift[];
+  stats: TokenDriftStats;
 }
 
 // ============ ESRE (QA) ============
@@ -135,154 +244,137 @@ export interface ESREDefinition {
   id: string;
   project_id: string;
   name: string;
-  component_name: string;
-  description?: string;
-  expected_value: string;
-  selector?: string;
-  css_property?: string;
-  status: 'active' | 'inactive';
-  last_result?: 'pass' | 'fail' | 'skip';
-  last_tested?: string;
+  definition_text: string;
+  expected_value?: string | null;
+  component_name?: string | null;
   created_at: string;
   updated_at: string;
 }
 
 export interface ESRECreateData {
   name: string;
-  component_name: string;
-  description?: string;
-  expected_value: string;
-  selector?: string;
-  css_property?: string;
+  definition_text: string;
+  expected_value?: string | null;
+  component_name?: string | null;
 }
 
-// ============ Audit ============
+// ============ Activity / Audit ============
 
 export interface AuditEntry {
   id: string;
   timestamp: string;
-  category: string;
   action: string;
-  user?: string;
+  category?: string;
+  severity?: string;
+  description?: string;
+  entity_type?: string;
+  entity_id?: string;
+  entity_name?: string;
   project_id?: string;
-  details?: Record<string, unknown>;
-  metadata?: Record<string, unknown>;
+  user_id?: string;
+  user_name?: string;
+  team_context?: string;
+  details?: Record<string, unknown> | null;
+  ip_address?: string;
+  user_agent?: string;
+}
+
+export interface AuditLogResponse {
+  activities: AuditEntry[];
+  total: number;
+  limit: number;
+  offset: number;
+  has_more: boolean;
 }
 
 export interface AuditStats {
-  total_entries: number;
   by_category: Record<string, number>;
-  by_action: Record<string, number>;
-  recent_activity: number;
+  by_user: Record<string, number>;
+  total_count: number;
 }
 
-// ============ System ============
+// ============ System / Runtime Config ============
+
+export interface RuntimeConfigEnvelope {
+  config: Record<string, unknown>;
+  env: Record<string, unknown>;
+  mode?: string;
+}
+
+export interface ConfigUpdateRequest {
+  mode?: 'local' | 'server';
+  figma_token?: string;
+  services?: Record<string, unknown>;
+  features?: Record<string, boolean>;
+}
+
+export interface FigmaConfigStatus {
+  configured: boolean;
+  mode: string;
+  features: Record<string, boolean>;
+}
+
+export interface FigmaConnectionTestResult {
+  success: boolean;
+  user?: string;
+  handle?: string;
+  error?: string;
+}
+
+export interface SystemResetRequest {
+  confirm: 'RESET';
+}
 
 export interface SystemHealth {
-  status: 'healthy' | 'degraded' | 'unhealthy';
-  version?: string;
-  uptime?: number;
+  status: 'healthy' | 'degraded' | 'unhealthy' | string;
+  uptime_seconds: number;
+  version: string;
+  timestamp: string;
   services: {
-    storage: 'up' | 'down';
-    mcp: 'up' | 'down';
-    figma: 'up' | 'down' | 'not_configured';
+    storage: string;
+    mcp: string;
+    figma: string;
   };
-  timestamp: string;
 }
 
-export interface RuntimeConfig {
-  server_host: string;
-  server_port: number;
-  figma_token?: string;
-  storybook_url?: string;
-  data_dir?: string;
-  log_level?: 'debug' | 'info' | 'warning' | 'error';
+export interface MCPStatus {
+  connected: boolean;
+  tools: number;
+  details?: Record<string, unknown>;
 }
 
-export interface CacheStatus {
-  size: number;
-  entries: number;
-  hit_rate: number;
-  last_cleared?: string;
+export interface ServiceDiscoveryEnvelope {
+  configured: Record<string, unknown>;
+  discovered: Record<string, unknown>;
+  storybook: { running: boolean; url?: string };
 }
 
-// ============ Discovery ============
+// ============ MCP Integrations ============
 
-export interface DiscoveryResult {
-  projects: DiscoveredProject[];
-  services: DiscoveredService[];
-  timestamp: string;
+export interface MCPIntegrationHealth {
+  integration_type: string;
+  is_healthy: boolean;
+  failure_count: number;
 }
 
-export interface DiscoveredProject {
-  path: string;
-  name: string;
-  type: string;
-  has_dss_config: boolean;
-  framework?: string;
+export interface MCPIntegrationsResponse {
+  integrations: MCPIntegrationHealth[];
 }
 
-export interface DiscoveredService {
-  name: string;
-  port: number;
-  type: string;
-  url?: string;
-  status: 'running' | 'stopped';
-}
-
-export interface DiscoveryStats {
-  projects_discovered: number;
-  services_running: number;
-  last_scan: string;
-}
-
-// ============ Teams ============
-
-export interface Team {
+export interface ProjectIntegrationRecord {
   id: string;
-  name: string;
-  description?: string;
-  members?: TeamMember[];
-  created_at: string;
-}
-
-export interface TeamMember {
-  id: string;
-  name: string;
-  email: string;
-  role: 'admin' | 'member' | 'viewer';
-}
-
-export interface TeamCreateData {
-  name: string;
-  description?: string;
-}
-
-// ============ Integrations ============
-
-export interface Integration {
-  type: 'figma' | 'jira' | 'confluence' | 'github' | 'gitlab' | 'slack';
   project_id: string;
-  status: 'connected' | 'disconnected' | 'error';
-  config: Record<string, unknown>;
-  last_sync?: string;
-  error_message?: string;
+  user_id: number;
+  integration_type: string;
+  config: string;
+  enabled: boolean;
+  created_at: string;
+  updated_at: string;
+  last_used_at?: string | null;
 }
 
-export interface IntegrationCreateData {
-  type: Integration['type'];
-  config: Record<string, unknown>;
-}
-
-// ============ Services ============
-
-export interface Service {
-  name: string;
-  type: string;
-  url?: string;
-  port?: number;
-  status: 'running' | 'stopped' | 'unknown';
-  config?: Record<string, unknown>;
+export interface ProjectIntegrationsResponse {
+  integrations: ProjectIntegrationRecord[];
 }
 
 // ============ Chat / Claude ============
diff --git a/admin-ui/src/components/layout/ChatSidebar.css b/admin-ui/src/components/layout/ChatSidebar.css
index 0af4fea..e5c6c8a 100644
--- a/admin-ui/src/components/layout/ChatSidebar.css
+++ b/admin-ui/src/components/layout/ChatSidebar.css
@@ -33,6 +33,22 @@
   gap: var(--spacing-1);
 }
 
+.chat-model-select {
+  appearance: none;
+  background-color: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-foreground);
+  cursor: pointer;
+}
+
+.chat-model-select:focus {
+  outline: none;
+  border-color: var(--color-ring);
+}
+
 /* Quick Actions */
 .chat-quick-actions {
   display: flex;
diff --git a/admin-ui/src/components/layout/ChatSidebar.tsx b/admin-ui/src/components/layout/ChatSidebar.tsx
index 87ea3c3..33d57bc 100644
--- a/admin-ui/src/components/layout/ChatSidebar.tsx
+++ b/admin-ui/src/components/layout/ChatSidebar.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'preact/hooks';
 import { chatSidebarOpen } from '../../state/app';
 import { currentProject } from '../../state/project';
 import { activeTeam } from '../../state/team';
+import { userId as authenticatedUserId } from '../../state/user';
 import { endpoints } from '../../api/client';
 import { Button } from '../base/Button';
 import { Badge } from '../base/Badge';
@@ -30,6 +31,7 @@ export function ChatSidebar() {
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [mcpTools, setMcpTools] = useState<string[]>([]);
+  const [model, setModel] = useState<'claude' | 'gemini'>('claude');
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -74,7 +76,9 @@ export function ChatSidebar() {
         project: currentProject.value ? {
           id: currentProject.value.id,
           name: currentProject.value.name,
-          path: currentProject.value.path
+          root_path: currentProject.value.root_path,
+          // Backwards compatible field for older tool prompts.
+          path: currentProject.value.root_path
         } : null,
         currentView: window.location.hash
       };
@@ -82,7 +86,8 @@ export function ChatSidebar() {
       const response = await endpoints.claude.chat(
         userMessage.content,
         currentProject.value?.id,
-        context
+        context,
+        { user_id: authenticatedUserId.value, model }
       );
 
       const assistantMessage: Message = {
@@ -146,6 +151,15 @@ export function ChatSidebar() {
             <Badge variant="success" size="sm">{mcpTools.length} tools</Badge>
           )}
         </div>
+        <select
+          className="chat-model-select"
+          value={model}
+          onChange={(e) => setModel((e.target as HTMLSelectElement).value as 'claude' | 'gemini')}
+          aria-label="AI model"
+        >
+          <option value="claude">Claude</option>
+          <option value="gemini">Gemini</option>
+        </select>
         <div className="chat-header-actions">
           <Button
             variant="ghost"
diff --git a/admin-ui/src/components/layout/Header.css b/admin-ui/src/components/layout/Header.css
index de7a1ec..e90b168 100644
--- a/admin-ui/src/components/layout/Header.css
+++ b/admin-ui/src/components/layout/Header.css
@@ -33,6 +33,16 @@
   justify-content: flex-end;
 }
 
+/* User */
+.header-user {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Logo */
 .header-logo {
   display: flex;
diff --git a/admin-ui/src/components/layout/Header.tsx b/admin-ui/src/components/layout/Header.tsx
index 17f6c61..cdec7a9 100644
--- a/admin-ui/src/components/layout/Header.tsx
+++ b/admin-ui/src/components/layout/Header.tsx
@@ -8,7 +8,12 @@ import {
 } from '../../state/app';
 import { activeTeam, setActiveTeam, TEAM_CONFIGS, TeamId } from '../../state/team';
 import { currentProject, projects, setCurrentProject } from '../../state/project';
+import { isAuthenticated, loginWithAtlassian, logout, user } from '../../state/user';
 import { Button } from '../base/Button';
+import { Badge } from '../base/Badge';
+import { Input, Select } from '../base/Input';
+import { Modal } from '../shared/Modal';
+import { useState } from 'preact/hooks';
 import './Header.css';
 
 // Icons as inline SVG
@@ -48,6 +53,15 @@ const MoonIcon = () => (
 
 export function Header() {
   const teamKeys = Object.keys(TEAM_CONFIGS) as TeamId[];
+  const [loginOpen, setLoginOpen] = useState(false);
+  const [loggingIn, setLoggingIn] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [credentials, setCredentials] = useState({
+    url: '',
+    email: '',
+    api_token: '',
+    service: 'jira' as 'jira' | 'confluence'
+  });
 
   const cycleTheme = () => {
     const themes = ['light', 'dark', 'auto'] as const;
@@ -56,6 +70,20 @@ export function Header() {
     setTheme(themes[nextIndex]);
   };
 
+  async function handleLogin() {
+    setLoggingIn(true);
+    setLoginError(null);
+    try {
+      await loginWithAtlassian(credentials);
+      setLoginOpen(false);
+      setCredentials({ url: '', email: '', api_token: '', service: 'jira' });
+    } catch (err) {
+      setLoginError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoggingIn(false);
+    }
+  }
+
   return (
     <header className="header">
       <div className="header-left">
@@ -105,6 +133,18 @@ export function Header() {
       </div>
 
       <div className="header-right">
+        {/* Auth */}
+        {isAuthenticated.value ? (
+          <>
+            <span className="header-user">
+              {user.value?.display_name || user.value?.email || 'User'}
+            </span>
+            <Button variant="ghost" size="sm" onClick={logout}>Logout</Button>
+          </>
+        ) : (
+          <Button variant="ghost" size="sm" onClick={() => setLoginOpen(true)}>Login</Button>
+        )}
+
         {/* Theme Toggle */}
         <Button
           variant="ghost"
@@ -125,6 +165,66 @@ export function Header() {
           AI
         </Button>
       </div>
+
+      <Modal
+        isOpen={loginOpen}
+        onClose={() => { setLoginOpen(false); setLoginError(null); }}
+        title="Login"
+        size="md"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => { setLoginOpen(false); setLoginError(null); }} disabled={loggingIn}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={handleLogin} loading={loggingIn}>
+              Login
+            </Button>
+          </>
+        }
+      >
+        <div className="settings-form">
+          {loginError && (
+            <div className="form-error">
+              <Badge variant="error">{loginError}</Badge>
+            </div>
+          )}
+          <Input
+            label="Atlassian URL"
+            value={credentials.url}
+            onChange={(e) => setCredentials(c => ({ ...c, url: (e.target as HTMLInputElement).value }))}
+            placeholder="https://your-domain.atlassian.net"
+            fullWidth
+          />
+          <Select
+            label="Service"
+            value={credentials.service}
+            onChange={(e) => setCredentials(c => ({ ...c, service: (e.target as HTMLSelectElement).value as 'jira' | 'confluence' }))}
+            options={[
+              { value: 'jira', label: 'Jira' },
+              { value: 'confluence', label: 'Confluence' }
+            ]}
+          />
+          <Input
+            label="Email"
+            type="email"
+            value={credentials.email}
+            onChange={(e) => setCredentials(c => ({ ...c, email: (e.target as HTMLInputElement).value }))}
+            placeholder="you@company.com"
+            fullWidth
+          />
+          <Input
+            label="API Token"
+            type="password"
+            value={credentials.api_token}
+            onChange={(e) => setCredentials(c => ({ ...c, api_token: (e.target as HTMLInputElement).value }))}
+            placeholder="••••••••••••"
+            fullWidth
+          />
+          <p className="text-muted" style={{ margin: 0 }}>
+            This creates a DSS user and stores a session token in your browser.
+          </p>
+        </div>
+      </Modal>
     </header>
   );
 }
diff --git a/admin-ui/src/components/layout/Stage.tsx b/admin-ui/src/components/layout/Stage.tsx
index 9e77e15..26a9575 100644
--- a/admin-ui/src/components/layout/Stage.tsx
+++ b/admin-ui/src/components/layout/Stage.tsx
@@ -1,5 +1,6 @@
 import { lazy, Suspense } from 'preact/compat';
 import { Spinner } from '../base/Spinner';
+import { activeTeam, TEAM_CONFIGS, TeamId } from '../../state/team';
 import './Stage.css';
 
 // Lazy load workdesks
@@ -12,6 +13,13 @@ interface StageProps {
   activeTool: string | null;
 }
 
+const WORKDESK_BY_TEAM: Record<TeamId, any> = {
+  ui: UIWorkdesk,
+  ux: UXWorkdesk,
+  qa: QAWorkdesk,
+  admin: AdminWorkdesk
+};
+
 // Loading fallback
 function StageLoader() {
   return (
@@ -22,55 +30,31 @@ function StageLoader() {
   );
 }
 
-// Tool component mapping
-function getToolComponent(toolId: string | null) {
-  // For now, return placeholder based on tool category
-  // Later we'll add specific tool components
+function findOwnerTeam(toolId: string): TeamId {
+  if (toolId === 'dashboard') return activeTeam.value;
 
-  switch (toolId) {
-    case 'dashboard':
-    case 'figma-extraction':
-    case 'figma-components':
-    case 'storybook-figma-compare':
-    case 'storybook-live-compare':
-    case 'project-analysis':
-    case 'quick-wins':
-    case 'regression-testing':
-    case 'code-generator':
-      return <UIWorkdesk activeTool={toolId} />;
+  const preferred = activeTeam.value;
+  if (TEAM_CONFIGS[preferred].tools.some(t => t.id === toolId)) return preferred;
 
-    case 'figma-plugin':
-    case 'token-list':
-    case 'asset-list':
-    case 'component-list':
-    case 'navigation-demos':
-      return <UXWorkdesk activeTool={toolId} />;
-
-    case 'figma-live-compare':
-    case 'esre-editor':
-    case 'console-viewer':
-    case 'network-monitor':
-    case 'error-tracker':
-      return <QAWorkdesk activeTool={toolId} />;
-
-    case 'settings':
-    case 'projects':
-    case 'integrations':
-    case 'audit-log':
-    case 'cache-management':
-    case 'health-monitor':
-      return <AdminWorkdesk activeTool={toolId} />;
-
-    default:
-      return <UIWorkdesk activeTool="dashboard" />;
+  const teams = Object.keys(TEAM_CONFIGS) as TeamId[];
+  for (const team of teams) {
+    if (TEAM_CONFIGS[team].tools.some(t => t.id === toolId)) return team;
   }
+
+  return preferred;
 }
 
 export function Stage({ activeTool }: StageProps) {
+  const rawToolId = activeTool || 'dashboard';
+  const parts = rawToolId.split('/').filter(Boolean);
+  const toolId = (parts.length >= 2 && (parts[0] as TeamId) in TEAM_CONFIGS) ? parts[1] : rawToolId;
+  const team = findOwnerTeam(toolId);
+  const Workdesk = WORKDESK_BY_TEAM[team];
+
   return (
     <main className="stage" role="main">
       <Suspense fallback={<StageLoader />}>
-        {getToolComponent(activeTool)}
+        <Workdesk activeTool={toolId} />
       </Suspense>
     </main>
   );
diff --git a/admin-ui/src/state/index.ts b/admin-ui/src/state/index.ts
index 5389dc6..27d5af9 100644
--- a/admin-ui/src/state/index.ts
+++ b/admin-ui/src/state/index.ts
@@ -7,7 +7,7 @@ export * from './team';
 export * from './user';
 
 import { loadProjects } from './project';
-import { loadUserPreferences } from './user';
+import { loadUserPreferences, refreshUser } from './user';
 
 /**
  * Initialize the application state
@@ -17,6 +17,9 @@ export async function initializeApp(): Promise<void> {
   // Load user preferences from localStorage
   loadUserPreferences();
 
+  // Restore session if token exists
+  await refreshUser();
+
   // Load projects from API
   await loadProjects();
 }
diff --git a/admin-ui/src/state/project.ts b/admin-ui/src/state/project.ts
index e5c3ce7..ba8846c 100644
--- a/admin-ui/src/state/project.ts
+++ b/admin-ui/src/state/project.ts
@@ -1,30 +1,11 @@
 import { signal, computed } from '@preact/signals';
-import { api } from '../api/client';
-
-// Types
-export interface Project {
-  id: string;
-  name: string;
-  description?: string;
-  path?: string;
-  figmaFileKey?: string;
-  storybookUrl?: string;
-  createdAt: string;
-  updatedAt: string;
-  status: 'active' | 'archived' | 'draft';
-}
-
-export interface ProjectStats {
-  components: number;
-  tokens: number;
-  figmaFiles: number;
-  healthScore: number;
-}
+import { endpoints } from '../api/client';
+import type { Project, ProjectCreateData, ProjectDashboardSummary, ProjectUpdateData } from '../api/types';
 
 // Project State Signals
 export const projects = signal<Project[]>([]);
 export const currentProjectId = signal<string | null>(null);
-export const projectStats = signal<ProjectStats | null>(null);
+export const projectDashboard = signal<ProjectDashboardSummary | null>(null);
 export const projectsLoading = signal(false);
 export const projectsError = signal<string | null>(null);
 
@@ -45,7 +26,7 @@ export async function loadProjects(): Promise<void> {
   projectsError.value = null;
 
   try {
-    const data = await api.get<Project[]>('/projects');
+    const data = await endpoints.projects.list();
     projects.value = data;
 
     // Set first project as current if none selected
@@ -64,34 +45,34 @@ export async function setCurrentProject(projectId: string): Promise<void> {
   currentProjectId.value = projectId;
   localStorage.setItem('dss-current-project', projectId);
 
-  // Load project stats
-  await loadProjectStats(projectId);
+  // Load dashboard summary (optional)
+  await loadProjectDashboard(projectId);
 }
 
-export async function loadProjectStats(projectId: string): Promise<void> {
+export async function loadProjectDashboard(projectId: string): Promise<void> {
   try {
-    const stats = await api.get<ProjectStats>(`/projects/${projectId}/stats`);
-    projectStats.value = stats;
+    const summary = await endpoints.projects.dashboard(projectId);
+    projectDashboard.value = summary;
   } catch (error) {
-    console.error('Failed to load project stats:', error);
-    projectStats.value = null;
+    console.error('Failed to load project dashboard:', error);
+    projectDashboard.value = null;
   }
 }
 
-export async function createProject(data: Partial<Project>): Promise<Project> {
-  const project = await api.post<Project>('/projects', data);
+export async function createProject(data: ProjectCreateData): Promise<Project> {
+  const project = await endpoints.projects.create(data);
   projects.value = [...projects.value, project];
   return project;
 }
 
-export async function updateProject(projectId: string, data: Partial<Project>): Promise<Project> {
-  const updated = await api.put<Project>(`/projects/${projectId}`, data);
+export async function updateProject(projectId: string, data: ProjectUpdateData): Promise<Project> {
+  const updated = await endpoints.projects.update(projectId, data);
   projects.value = projects.value.map(p => p.id === projectId ? updated : p);
   return updated;
 }
 
 export async function deleteProject(projectId: string): Promise<void> {
-  await api.delete(`/projects/${projectId}`);
+  await endpoints.projects.delete(projectId);
   projects.value = projects.value.filter(p => p.id !== projectId);
 
   // Clear current if deleted
diff --git a/admin-ui/src/state/user.ts b/admin-ui/src/state/user.ts
index afe6071..3781ac1 100644
--- a/admin-ui/src/state/user.ts
+++ b/admin-ui/src/state/user.ts
@@ -1,4 +1,6 @@
 import { signal, computed } from '@preact/signals';
+import { endpoints } from '../api/client';
+import type { AuthLoginRequest, AuthLoginResponse, UserProfile } from '../api/types';
 
 // Types
 export interface UserPreferences {
@@ -10,14 +12,6 @@ export interface UserPreferences {
   notificationsEnabled: boolean;
 }
 
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-  role: 'admin' | 'developer' | 'viewer';
-}
-
 // Default preferences
 const DEFAULT_PREFERENCES: UserPreferences = {
   theme: 'auto',
@@ -29,16 +23,16 @@ const DEFAULT_PREFERENCES: UserPreferences = {
 };
 
 // User State Signals
-export const user = signal<User | null>(null);
+export const user = signal<UserProfile | null>(null);
 export const preferences = signal<UserPreferences>(DEFAULT_PREFERENCES);
 
 // Computed Values
 export const isAuthenticated = computed(() => user.value !== null);
-export const isAdmin = computed(() => user.value?.role === 'admin');
-export const userName = computed(() => user.value?.name ?? 'Guest');
+export const userId = computed(() => user.value?.id ?? 1);
+export const userName = computed(() => user.value?.display_name ?? user.value?.email ?? 'Guest');
 export const userInitials = computed(() => {
-  const name = user.value?.name ?? 'Guest';
-  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  const name = user.value?.display_name ?? user.value?.email ?? 'Guest';
+  return name.split(' ').filter(Boolean).map(n => n[0]).join('').toUpperCase().slice(0, 2);
 });
 
 // Actions
@@ -66,7 +60,7 @@ export function updatePreferences(updates: Partial<UserPreferences>): void {
   saveUserPreferences();
 }
 
-export function setUser(userData: User | null): void {
+export function setUser(userData: UserProfile | null): void {
   user.value = userData;
 }
 
@@ -75,6 +69,40 @@ export function logout(): void {
   localStorage.removeItem('dss-token');
 }
 
+export async function refreshUser(): Promise<void> {
+  if (typeof window === 'undefined') return;
+
+  const token = localStorage.getItem('dss-token');
+  if (!token) {
+    user.value = null;
+    return;
+  }
+
+  try {
+    const profile = await endpoints.auth.me();
+    user.value = profile;
+  } catch {
+    // Token is invalid/expired; clear it.
+    localStorage.removeItem('dss-token');
+    user.value = null;
+  }
+}
+
+export async function loginWithAtlassian(credentials: AuthLoginRequest): Promise<AuthLoginResponse> {
+  const response = await endpoints.auth.login(credentials);
+  localStorage.setItem('dss-token', response.token);
+  // Prefer server truth; also supports older login response shapes.
+  user.value = {
+    id: response.user.id,
+    email: response.user.email,
+    display_name: response.user.display_name,
+    atlassian_url: response.user.atlassian_url,
+    atlassian_service: response.user.service,
+    last_login: new Date().toISOString(),
+  };
+  return response;
+}
+
 // Keyboard shortcuts state
 export const keyboardShortcutsEnabled = computed(() =>
   preferences.value.keyboardShortcutsEnabled
diff --git a/admin-ui/src/workdesks/AdminWorkdesk.tsx b/admin-ui/src/workdesks/AdminWorkdesk.tsx
index 7fa2f64..77f2b0f 100644
--- a/admin-ui/src/workdesks/AdminWorkdesk.tsx
+++ b/admin-ui/src/workdesks/AdminWorkdesk.tsx
@@ -3,10 +3,31 @@ import { useState, useEffect } from 'preact/hooks';
 import { Card, CardHeader, CardContent, CardFooter } from '../components/base/Card';
 import { Button } from '../components/base/Button';
 import { Badge } from '../components/base/Badge';
-import { Input, Select } from '../components/base/Input';
+import { Input, Select, Textarea } from '../components/base/Input';
 import { Spinner } from '../components/base/Spinner';
+import { Modal } from '../components/shared/Modal';
 import { endpoints } from '../api/client';
-import type { Project, RuntimeConfig, AuditEntry, SystemHealth, Service, MCPTool } from '../api/types';
+import { currentProject, loadProjects as loadProjectsState } from '../state/project';
+import { userId as authenticatedUserId } from '../state/user';
+import type {
+  AuditEntry,
+  AuditLogResponse,
+  AuditStats,
+  ConfigUpdateRequest,
+  FigmaConfigStatus,
+  FigmaConnectionTestResult,
+  MCPIntegrationHealth,
+  MCPStatus,
+  MCPTool,
+  Project,
+  ProjectConfig,
+  ProjectCreateData,
+  ProjectIntegrationRecord,
+  ProjectUpdateData,
+  RuntimeConfigEnvelope,
+  ServiceDiscoveryEnvelope,
+  SystemHealth,
+} from '../api/types';
 import './Workdesk.css';
 
 interface AdminWorkdeskProps {
@@ -33,19 +54,17 @@ export default function AdminWorkdesk({ activeTool }: AdminWorkdeskProps) {
 
 function SettingsTool() {
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
+  const [savingMode, setSavingMode] = useState(false);
+  const [savingToken, setSavingToken] = useState(false);
   const [testing, setTesting] = useState(false);
-  const [config, setConfig] = useState<RuntimeConfig>({
-    server_host: 'localhost',
-    server_port: 6220,
-    figma_token: '',
-    storybook_url: 'http://localhost:6226'
-  });
-  const [figmaStatus, setFigmaStatus] = useState<{ configured: boolean } | null>(null);
-  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [runtime, setRuntime] = useState<RuntimeConfigEnvelope | null>(null);
+  const [mode, setMode] = useState<'local' | 'server'>('local');
+  const [figmaToken, setFigmaToken] = useState('');
+  const [figmaStatus, setFigmaStatus] = useState<FigmaConfigStatus | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'warning' | 'info'; text: string } | null>(null);
 
   useEffect(() => {
-    loadConfig();
+    void loadConfig();
   }, []);
 
   async function loadConfig() {
@@ -57,7 +76,9 @@ function SettingsTool() {
       ]);
 
       if (configResult.status === 'fulfilled') {
-        setConfig(configResult.value);
+        setRuntime(configResult.value);
+        const nextMode = configResult.value.mode;
+        setMode(nextMode === 'server' ? 'server' : 'local');
       }
       if (figmaResult.status === 'fulfilled') {
         setFigmaStatus(figmaResult.value);
@@ -69,30 +90,53 @@ function SettingsTool() {
     }
   }
 
-  async function handleSave() {
-    setSaving(true);
+  async function handleSaveMode() {
+    setSavingMode(true);
     try {
-      await endpoints.system.updateConfig(config);
-      setTestResult({ success: true, message: 'Settings saved successfully' });
-      setTimeout(() => setTestResult(null), 3000);
+      const update: ConfigUpdateRequest = { mode };
+      await endpoints.system.updateConfig(update);
+      setMessage({ type: 'success', text: 'Mode saved' });
+      void loadConfig();
+      setTimeout(() => setMessage(null), 3000);
     } catch (err) {
-      setTestResult({ success: false, message: err instanceof Error ? err.message : 'Failed to save settings' });
+      setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Failed to save mode' });
     } finally {
-      setSaving(false);
+      setSavingMode(false);
+    }
+  }
+
+  async function handleSaveFigmaToken(clear: boolean = false) {
+    setSavingToken(true);
+    try {
+      const update: ConfigUpdateRequest = { figma_token: clear ? '' : figmaToken };
+      await endpoints.system.updateConfig(update);
+      setMessage({ type: 'success', text: clear ? 'Figma token cleared' : 'Figma token saved' });
+      if (!clear) setFigmaToken('');
+      void loadConfig();
+      setTimeout(() => setMessage(null), 3000);
+    } catch (err) {
+      setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Failed to save Figma token' });
+    } finally {
+      setSavingToken(false);
     }
   }
 
   async function handleTestFigma() {
     setTesting(true);
-    setTestResult(null);
+    setMessage(null);
     try {
-      const result = await endpoints.system.testFigma();
-      setTestResult(result);
+      const result: FigmaConnectionTestResult = await endpoints.system.testFigma();
       if (result.success) {
-        setFigmaStatus({ configured: true });
+        setMessage({
+          type: 'success',
+          text: `Connected to Figma${result.handle ? ` as ${result.handle}` : ''}${result.user ? ` (${result.user})` : ''}`,
+        });
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Figma connection test failed' });
       }
+      void loadConfig();
     } catch (err) {
-      setTestResult({ success: false, message: err instanceof Error ? err.message : 'Connection test failed' });
+      setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Connection test failed' });
     } finally {
       setTesting(false);
     }
@@ -116,45 +160,31 @@ function SettingsTool() {
         <p className="workdesk-subtitle">Configure DSS server and integrations</p>
       </div>
 
-      {testResult && (
-        <div className={`alert alert-${testResult.success ? 'success' : 'error'}`}>
-          <Badge variant={testResult.success ? 'success' : 'error'}>{testResult.message}</Badge>
+      {message && (
+        <div className={`alert alert-${message.type === 'success' ? 'success' : message.type === 'warning' ? 'warning' : 'error'}`}>
+          <Badge variant={message.type === 'success' ? 'success' : message.type === 'warning' ? 'warning' : 'error'}>{message.text}</Badge>
         </div>
       )}
 
-      {/* Server Settings */}
+      {/* DSS Server */}
       <Card variant="bordered" padding="md">
-        <CardHeader title="Server Configuration" />
+        <CardHeader title="DSS Server" subtitle="Runtime configuration (headless server)" />
         <CardContent>
           <div className="settings-form">
-            <Input
-              label="Server Host"
-              value={config.server_host}
-              onChange={(e) => setConfig(c => ({ ...c, server_host: (e.target as HTMLInputElement).value }))}
-              fullWidth
-            />
-            <Input
-              label="Server Port"
-              type="number"
-              value={String(config.server_port)}
-              onChange={(e) => setConfig(c => ({ ...c, server_port: Number((e.target as HTMLInputElement).value) }))}
-              fullWidth
-            />
             <Select
-              label="Log Level"
-              value={config.log_level || 'info'}
-              onChange={(e) => setConfig(c => ({ ...c, log_level: (e.target as HTMLSelectElement).value as RuntimeConfig['log_level'] }))}
+              label="Mode"
+              value={mode}
+              onChange={(e) => setMode((e.target as HTMLSelectElement).value as 'local' | 'server')}
               options={[
-                { value: 'debug', label: 'Debug' },
-                { value: 'info', label: 'Info' },
-                { value: 'warning', label: 'Warning' },
-                { value: 'error', label: 'Error' }
+                { value: 'local', label: 'Local (developer machine)' },
+                { value: 'server', label: 'Server (headless)' }
               ]}
+              hint="Use Server mode for shared admin-ui + multi-team access"
             />
           </div>
         </CardContent>
         <CardFooter>
-          <Button variant="primary" onClick={handleSave} loading={saving}>Save Changes</Button>
+          <Button variant="primary" onClick={handleSaveMode} loading={savingMode}>Save Mode</Button>
         </CardFooter>
       </Card>
 
@@ -164,8 +194,8 @@ function SettingsTool() {
           title="Figma Integration"
           action={
             figmaStatus && (
-              <Badge variant={figmaStatus.configured ? 'success' : 'warning'} size="sm">
-                {figmaStatus.configured ? 'Configured' : 'Not Configured'}
+              <Badge variant={figmaStatus.configured ? 'success' : 'warning'} size="sm" title={figmaStatus.mode}>
+                {figmaStatus.configured ? `Configured (${figmaStatus.mode})` : `Not Configured (${figmaStatus.mode})`}
               </Badge>
             )
           }
@@ -175,38 +205,50 @@ function SettingsTool() {
             <Input
               label="Figma Access Token"
               type="password"
-              value={config.figma_token || ''}
-              onChange={(e) => setConfig(c => ({ ...c, figma_token: (e.target as HTMLInputElement).value }))}
-              hint="Get your token from Figma Settings > Personal Access Tokens"
+              value={figmaToken}
+              onChange={(e) => setFigmaToken((e.target as HTMLInputElement).value)}
+              hint="Get your token from Figma Settings → Personal Access Tokens"
               fullWidth
             />
             <div className="form-actions">
               <Button variant="outline" onClick={handleTestFigma} loading={testing}>Test Connection</Button>
+              <Button variant="ghost" onClick={() => handleSaveFigmaToken(true)} loading={savingToken}>Clear Token</Button>
             </div>
           </div>
         </CardContent>
         <CardFooter>
-          <Button variant="primary" onClick={handleSave} loading={saving}>Save Token</Button>
+          <Button variant="primary" onClick={() => handleSaveFigmaToken(false)} loading={savingToken} disabled={!figmaToken.trim()}>Save Token</Button>
         </CardFooter>
       </Card>
 
-      {/* Storybook Settings */}
+      {/* Admin UI Settings */}
       <Card variant="bordered" padding="md">
-        <CardHeader title="Storybook Integration" />
+        <CardHeader title="Admin UI" subtitle="Browser-only preferences" />
         <CardContent>
           <div className="settings-form">
-            <Input
-              label="Storybook URL"
-              value={config.storybook_url || ''}
-              onChange={(e) => setConfig(c => ({ ...c, storybook_url: (e.target as HTMLInputElement).value }))}
-              fullWidth
-            />
+            <Button
+              variant="outline"
+              onClick={() => {
+                localStorage.removeItem('dss-preferences');
+                setMessage({ type: 'success', text: 'Admin UI preferences cleared' });
+                setTimeout(() => setMessage(null), 3000);
+              }}
+            >
+              Reset UI Preferences
+            </Button>
           </div>
         </CardContent>
-        <CardFooter>
-          <Button variant="primary" onClick={handleSave} loading={saving}>Save Settings</Button>
-        </CardFooter>
       </Card>
+
+      {/* Diagnostics */}
+      {runtime && (
+        <Card variant="bordered" padding="md">
+          <CardHeader title="Diagnostics" subtitle="Non-sensitive runtime configuration" />
+          <CardContent>
+            <pre className="mcp-result">{JSON.stringify(runtime, null, 2)}</pre>
+          </CardContent>
+        </Card>
+      )}
     </div>
   );
 }
@@ -215,14 +257,43 @@ function ProjectsTool() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const [creating, setCreating] = useState(false);
-  const [formData, setFormData] = useState({ name: '', description: '', path: '' });
+  const [formData, setFormData] = useState<{ name: string; description: string; root_path: string; figma_file_key: string }>({
+    name: '',
+    description: '',
+    root_path: '',
+    figma_file_key: ''
+  });
   const [error, setError] = useState<string | null>(null);
 
+  const [editing, setEditing] = useState<Project | null>(null);
+  const [editData, setEditData] = useState<ProjectUpdateData>({});
+  const [savingEdit, setSavingEdit] = useState(false);
+
+  const [projectConfigText, setProjectConfigText] = useState('');
+  const [projectConfigError, setProjectConfigError] = useState<string | null>(null);
+  const [savingProjectConfig, setSavingProjectConfig] = useState(false);
+
   useEffect(() => {
-    loadProjects();
+    void loadProjectsList();
   }, []);
 
-  async function loadProjects() {
+  useEffect(() => {
+    if (!editing) return;
+
+    setEditData({
+      name: editing.name,
+      description: editing.description || '',
+      figma_file_key: editing.figma_file_key || '',
+      root_path: editing.root_path || '',
+      status: editing.status || 'active',
+    });
+
+    setProjectConfigText('');
+    setProjectConfigError(null);
+    void loadProjectConfig(editing.id);
+  }, [editing]);
+
+  async function loadProjectsList() {
     setLoading(true);
     try {
       const result = await endpoints.projects.list();
@@ -234,9 +305,18 @@ function ProjectsTool() {
     }
   }
 
+  async function loadProjectConfig(projectId: string) {
+    try {
+      const config = await endpoints.projects.config(projectId);
+      setProjectConfigText(JSON.stringify(config, null, 2));
+    } catch (err) {
+      setProjectConfigError(err instanceof Error ? err.message : 'Failed to load project config');
+    }
+  }
+
   async function handleCreate() {
-    if (!formData.name || !formData.path) {
-      setError('Name and Path are required');
+    if (!formData.name || !formData.root_path) {
+      setError('Name and Root Path are required');
       return;
     }
 
@@ -244,9 +324,16 @@ function ProjectsTool() {
     setError(null);
 
     try {
-      await endpoints.projects.create(formData);
-      setFormData({ name: '', description: '', path: '' });
-      loadProjects();
+      const payload: ProjectCreateData = {
+        name: formData.name,
+        description: formData.description,
+        root_path: formData.root_path,
+        figma_file_key: formData.figma_file_key
+      };
+      await endpoints.projects.create(payload);
+      setFormData({ name: '', description: '', root_path: '', figma_file_key: '' });
+      void loadProjectsList();
+      void loadProjectsState();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create project');
     } finally {
@@ -254,12 +341,43 @@ function ProjectsTool() {
     }
   }
 
+  async function handleSaveEdit() {
+    if (!editing) return;
+    setSavingEdit(true);
+    try {
+      await endpoints.projects.update(editing.id, editData);
+      setEditing(null);
+      void loadProjectsList();
+      void loadProjectsState();
+    } catch (err) {
+      setProjectConfigError(err instanceof Error ? err.message : 'Failed to update project');
+    } finally {
+      setSavingEdit(false);
+    }
+  }
+
+  async function handleSaveProjectConfig() {
+    if (!editing) return;
+    setSavingProjectConfig(true);
+    setProjectConfigError(null);
+    try {
+      const parsed = JSON.parse(projectConfigText) as ProjectConfig;
+      await endpoints.projects.updateConfig(editing.id, parsed);
+      setProjectConfigError(null);
+    } catch (err) {
+      setProjectConfigError(err instanceof Error ? err.message : 'Failed to save project config');
+    } finally {
+      setSavingProjectConfig(false);
+    }
+  }
+
   async function handleDelete(projectId: string) {
     if (!confirm('Are you sure you want to delete this project?')) return;
 
     try {
       await endpoints.projects.delete(projectId);
-      loadProjects();
+      void loadProjectsList();
+      void loadProjectsState();
     } catch (err) {
       console.error('Failed to delete project:', err);
     }
@@ -303,10 +421,18 @@ function ProjectsTool() {
               fullWidth
             />
             <Input
-              label="Project Path"
-              value={formData.path}
-              onChange={(e) => setFormData(d => ({ ...d, path: (e.target as HTMLInputElement).value }))}
+              label="Root Path"
+              value={formData.root_path}
+              onChange={(e) => setFormData(d => ({ ...d, root_path: (e.target as HTMLInputElement).value }))}
               placeholder="/path/to/project"
+              hint="Filesystem root for sandboxed project operations (.dss/config.json lives here)"
+              fullWidth
+            />
+            <Input
+              label="Default Figma File Key (optional)"
+              value={formData.figma_file_key}
+              onChange={(e) => setFormData(d => ({ ...d, figma_file_key: (e.target as HTMLInputElement).value }))}
+              placeholder="Figma file key (optional)"
               fullWidth
             />
           </div>
@@ -326,7 +452,7 @@ function ProjectsTool() {
         <CardHeader
           title="All Projects"
           subtitle={`${projects.length} projects`}
-          action={<Button variant="ghost" size="sm" onClick={loadProjects}>Refresh</Button>}
+          action={<Button variant="ghost" size="sm" onClick={loadProjectsList}>Refresh</Button>}
         />
         <CardContent>
           {projects.length === 0 ? (
@@ -338,8 +464,8 @@ function ProjectsTool() {
                   <div className="project-info">
                     <span className="project-name">{project.name}</span>
                     <div className="project-stats">
-                      <span>{project.components_count || 0} components</span>
-                      <span>{project.tokens_count || 0} tokens</span>
+                      <span>{project.root_path || 'No root_path'}</span>
+                      {project.figma_file_key && <span>Figma: {project.figma_file_key}</span>}
                     </div>
                   </div>
                   <Badge
@@ -349,7 +475,7 @@ function ProjectsTool() {
                     {project.status}
                   </Badge>
                   <div className="project-actions">
-                    <Button variant="ghost" size="sm" onClick={() => window.location.hash = `#admin/projects/${project.id}`}>
+                    <Button variant="ghost" size="sm" onClick={() => setEditing(project)}>
                       Edit
                     </Button>
                     <Button variant="ghost" size="sm" onClick={() => handleDelete(project.id)}>
@@ -362,41 +488,226 @@ function ProjectsTool() {
           )}
         </CardContent>
       </Card>
+
+      <Modal
+        isOpen={!!editing}
+        onClose={() => setEditing(null)}
+        title={editing ? `Edit Project — ${editing.name}` : 'Edit Project'}
+        size="lg"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setEditing(null)} disabled={savingEdit || savingProjectConfig}>Close</Button>
+            <Button variant="primary" onClick={handleSaveEdit} loading={savingEdit}>Save Project</Button>
+          </>
+        }
+      >
+        <div className="settings-form">
+          <Input
+            label="Name"
+            value={editData.name || ''}
+            onChange={(e) => setEditData(d => ({ ...d, name: (e.target as HTMLInputElement).value }))}
+            fullWidth
+          />
+          <Input
+            label="Description"
+            value={editData.description || ''}
+            onChange={(e) => setEditData(d => ({ ...d, description: (e.target as HTMLInputElement).value }))}
+            fullWidth
+          />
+          <Select
+            label="Status"
+            value={String(editData.status || 'active')}
+            onChange={(e) => setEditData(d => ({ ...d, status: (e.target as HTMLSelectElement).value }))}
+            options={[
+              { value: 'active', label: 'Active' },
+              { value: 'archived', label: 'Archived' },
+              { value: 'draft', label: 'Draft' },
+            ]}
+          />
+          <Input
+            label="Root Path"
+            value={editData.root_path || ''}
+            onChange={(e) => setEditData(d => ({ ...d, root_path: (e.target as HTMLInputElement).value }))}
+            fullWidth
+          />
+          <Input
+            label="Default Figma File Key"
+            value={editData.figma_file_key || ''}
+            onChange={(e) => setEditData(d => ({ ...d, figma_file_key: (e.target as HTMLInputElement).value }))}
+            fullWidth
+          />
+        </div>
+
+        <div style={{ marginTop: 16 }}>
+          <h3 style={{ margin: '8px 0' }}>.dss/config.json</h3>
+          {projectConfigError && (
+            <div className="form-error">
+              <Badge variant="error">{projectConfigError}</Badge>
+            </div>
+          )}
+          <Textarea
+            label="Project Config (JSON)"
+            value={projectConfigText}
+            onChange={(e) => setProjectConfigText((e.target as HTMLTextAreaElement).value)}
+            placeholder={'{\n  "tokens": { "output_path": "..." }\n}'}
+            rows={10}
+            fullWidth
+          />
+          <div className="form-actions">
+            <Button variant="outline" onClick={() => editing && loadProjectConfig(editing.id)} disabled={!editing}>
+              Reload Config
+            </Button>
+            <Button variant="primary" onClick={handleSaveProjectConfig} loading={savingProjectConfig} disabled={!projectConfigText.trim()}>
+              Save Config
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }
 
 function IntegrationsTool() {
-  const [services, setServices] = useState<Service[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [mcpHealth, setMcpHealth] = useState<MCPIntegrationHealth[]>([]);
+  const [services, setServices] = useState<ServiceDiscoveryEnvelope | null>(null);
+
+  const [userId, setUserId] = useState<number>(() => authenticatedUserId.value);
+  const [projectIntegrations, setProjectIntegrations] = useState<ProjectIntegrationRecord[]>([]);
+
+  const [newIntegrationType, setNewIntegrationType] = useState('');
+  const [newIntegrationConfig, setNewIntegrationConfig] = useState('{}');
+  const [savingNew, setSavingNew] = useState(false);
+
+  const [editing, setEditing] = useState<ProjectIntegrationRecord | null>(null);
+  const [editingEnabled, setEditingEnabled] = useState(true);
+  const [editingConfigText, setEditingConfigText] = useState('{}');
+  const [savingEdit, setSavingEdit] = useState(false);
+
+  const projectId = currentProject.value?.id || null;
 
   useEffect(() => {
-    loadServices();
-  }, []);
+    setUserId(authenticatedUserId.value);
+  }, [authenticatedUserId.value]);
 
-  async function loadServices() {
+  useEffect(() => {
+    void loadAll();
+  }, [projectId, userId]);
+
+  async function loadAll() {
     setLoading(true);
+    setError(null);
     try {
-      const result = await endpoints.services.list();
-      setServices(result);
-    } catch (err) {
-      console.error('Failed to load services:', err);
-      // Fallback to static list if API fails
-      setServices([
-        { name: 'Figma', type: 'integration', status: 'unknown' },
-        { name: 'Jira', type: 'integration', status: 'stopped' },
-        { name: 'Confluence', type: 'integration', status: 'stopped' }
+      const [healthResult, servicesResult] = await Promise.allSettled([
+        endpoints.mcp.integrations(),
+        endpoints.services.list(),
       ]);
+
+      if (healthResult.status === 'fulfilled') {
+        setMcpHealth(healthResult.value.integrations);
+      }
+      if (servicesResult.status === 'fulfilled') {
+        setServices(servicesResult.value);
+      }
+
+      if (projectId) {
+        const integrationsResult = await endpoints.mcp.projectIntegrations(projectId, userId);
+        setProjectIntegrations(integrationsResult.integrations);
+      } else {
+        setProjectIntegrations([]);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load integrations');
     } finally {
       setLoading(false);
     }
   }
 
-  async function handleConfigure(serviceName: string) {
-    if (serviceName.toLowerCase() === 'figma') {
-      window.location.hash = '#admin/settings';
-    } else {
-      alert(`Configuration for ${serviceName} coming soon!`);
+  function tryParseJson(text: string): { ok: true; value: Record<string, unknown> } | { ok: false; error: string } {
+    try {
+      const parsed = JSON.parse(text) as unknown;
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        return { ok: false, error: 'Config must be a JSON object' };
+      }
+      return { ok: true, value: parsed as Record<string, unknown> };
+    } catch (e) {
+      return { ok: false, error: e instanceof Error ? e.message : 'Invalid JSON' };
+    }
+  }
+
+  async function handleAddIntegration() {
+    if (!projectId) {
+      setError('Select a project first');
+      return;
+    }
+    if (!newIntegrationType.trim()) {
+      setError('Integration type is required');
+      return;
+    }
+
+    const parsed = tryParseJson(newIntegrationConfig);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return;
+    }
+
+    setSavingNew(true);
+    setError(null);
+    try {
+      await endpoints.mcp.upsertProjectIntegration(projectId, userId, newIntegrationType.trim(), parsed.value, true);
+      setNewIntegrationType('');
+      setNewIntegrationConfig('{}');
+      void loadAll();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to add integration');
+    } finally {
+      setSavingNew(false);
+    }
+  }
+
+  async function handleDeleteIntegration(integration_type: string) {
+    if (!projectId) return;
+    if (!confirm(`Delete integration "${integration_type}"?`)) return;
+    try {
+      await endpoints.mcp.deleteProjectIntegration(projectId, userId, integration_type);
+      void loadAll();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete integration');
+    }
+  }
+
+  function handleEditOpen(record: ProjectIntegrationRecord) {
+    setEditing(record);
+    setEditingEnabled(record.enabled);
+    try {
+      setEditingConfigText(JSON.stringify(JSON.parse(record.config), null, 2));
+    } catch {
+      setEditingConfigText(record.config || '{}');
+    }
+  }
+
+  async function handleEditSave() {
+    if (!projectId || !editing) return;
+    const parsed = tryParseJson(editingConfigText);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return;
+    }
+    setSavingEdit(true);
+    setError(null);
+    try {
+      await endpoints.mcp.updateProjectIntegration(projectId, userId, editing.integration_type, {
+        config: parsed.value,
+        enabled: editingEnabled,
+      });
+      setEditing(null);
+      void loadAll();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update integration');
+    } finally {
+      setSavingEdit(false);
     }
   }
 
@@ -415,36 +726,178 @@ function IntegrationsTool() {
     <div className="workdesk">
       <div className="workdesk-header">
         <h1 className="workdesk-title">Integrations</h1>
-        <p className="workdesk-subtitle">Configure external service connections</p>
+        <p className="workdesk-subtitle">Per-user keys and project-specific integration configs</p>
       </div>
 
-      <div className="integrations-grid">
-        {services.filter(s => s.type === 'integration').map(integration => (
-          <Card key={integration.name} variant="bordered" padding="md">
-            <CardContent>
-              <div className="integration-item">
-                <div className="integration-icon">{integration.name[0]}</div>
-                <div className="integration-info">
-                  <span className="integration-name">{integration.name}</span>
-                  <Badge
-                    variant={integration.status === 'running' ? 'success' : 'default'}
-                    size="sm"
-                  >
-                    {integration.status === 'running' ? 'connected' : 'disconnected'}
-                  </Badge>
-                </div>
-                <Button
-                  variant={integration.status === 'running' ? 'outline' : 'primary'}
-                  size="sm"
-                  onClick={() => handleConfigure(integration.name)}
-                >
-                  {integration.status === 'running' ? 'Configure' : 'Connect'}
-                </Button>
+      {error && (
+        <div className="alert alert-error">
+          <Badge variant="error">{error}</Badge>
+        </div>
+      )}
+
+      <Card variant="bordered" padding="md">
+        <CardHeader
+          title="Context"
+          subtitle="Project + user scope"
+          action={<Button variant="ghost" size="sm" onClick={loadAll}>Refresh</Button>}
+        />
+        <CardContent>
+          <div className="settings-form">
+            <Input
+              label="Active Project"
+              value={currentProject.value ? `${currentProject.value.name} (${currentProject.value.id})` : 'No project selected'}
+              readOnly
+              fullWidth
+            />
+            <Input
+              label="User ID"
+              type="number"
+              value={userId}
+              onChange={(e) => setUserId(Number((e.target as HTMLInputElement).value) || 1)}
+              hint="Per-user integration configs are stored under this user_id"
+              fullWidth
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card variant="bordered" padding="md">
+        <CardHeader title="MCP Integration Health" subtitle={`${mcpHealth.length} integrations`} />
+        <CardContent>
+          {mcpHealth.length === 0 ? (
+            <p className="text-muted">No integration health data available.</p>
+          ) : (
+            <div className="integrations-grid">
+              {mcpHealth.map(integration => (
+                <Card key={integration.integration_type} variant="bordered" padding="md">
+                  <CardContent>
+                    <div className="integration-item">
+                      <div className="integration-icon">{integration.integration_type[0]?.toUpperCase() || 'I'}</div>
+                      <div className="integration-info">
+                        <span className="integration-name">{integration.integration_type}</span>
+                        <Badge variant={integration.is_healthy ? 'success' : 'warning'} size="sm">
+                          {integration.is_healthy ? 'healthy' : 'degraded'}
+                        </Badge>
+                      </div>
+                      <span className="text-muted">failures: {integration.failure_count}</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card variant="bordered" padding="md">
+        <CardHeader title="Services" subtitle="Discovery + Storybook" />
+        <CardContent>
+          {!services ? (
+            <p className="text-muted">No service data available.</p>
+          ) : (
+            <>
+              <div className="settings-form">
+                <Input
+                  label="Storybook"
+                  value={services.storybook.running ? `Running (${services.storybook.url || 'unknown URL'})` : 'Not running'}
+                  readOnly
+                  fullWidth
+                />
+                {services.storybook.running && services.storybook.url && (
+                  <Button variant="outline" onClick={() => window.open(services.storybook.url, '_blank')}>Open Storybook</Button>
+                )}
               </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+              <pre className="mcp-result">{JSON.stringify(services, null, 2)}</pre>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card variant="bordered" padding="md">
+        <CardHeader title="Project Integrations" subtitle={projectId ? `${projectIntegrations.length} configured` : 'Select a project'} />
+        <CardContent>
+          {!projectId ? (
+            <p className="text-muted">Select a project to manage integrations.</p>
+          ) : projectIntegrations.length === 0 ? (
+            <p className="text-muted">No integrations configured for this project/user.</p>
+          ) : (
+            <div className="projects-list">
+              {projectIntegrations.map(integration => (
+                <div key={integration.id} className="project-item">
+                  <div className="project-info">
+                    <span className="project-name">{integration.integration_type}</span>
+                    <div className="project-stats">
+                      <span>enabled: {String(integration.enabled)}</span>
+                      <span>updated: {new Date(integration.updated_at).toLocaleString()}</span>
+                    </div>
+                  </div>
+                  <div className="project-actions">
+                    <Button variant="ghost" size="sm" onClick={() => handleEditOpen(integration)}>Edit</Button>
+                    <Button variant="ghost" size="sm" onClick={() => handleDeleteIntegration(integration.integration_type)}>Delete</Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card variant="bordered" padding="md">
+        <CardHeader title="Add Integration" subtitle="Create or overwrite integration config" />
+        <CardContent>
+          <div className="settings-form">
+            <Input
+              label="Integration Type"
+              value={newIntegrationType}
+              onChange={(e) => setNewIntegrationType((e.target as HTMLInputElement).value)}
+              placeholder="e.g., figma, jira, confluence, anthropic"
+              fullWidth
+            />
+            <Textarea
+              label="Config (JSON object)"
+              value={newIntegrationConfig}
+              onChange={(e) => setNewIntegrationConfig((e.target as HTMLTextAreaElement).value)}
+              rows={6}
+              fullWidth
+            />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary" onClick={handleAddIntegration} loading={savingNew} disabled={!projectId}>Save Integration</Button>
+        </CardFooter>
+      </Card>
+
+      <Modal
+        isOpen={!!editing}
+        onClose={() => setEditing(null)}
+        title={editing ? `Edit Integration — ${editing.integration_type}` : 'Edit Integration'}
+        size="lg"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setEditing(null)} disabled={savingEdit}>Close</Button>
+            <Button variant="primary" onClick={handleEditSave} loading={savingEdit}>Save</Button>
+          </>
+        }
+      >
+        <div className="settings-form">
+          <Select
+            label="Enabled"
+            value={editingEnabled ? 'true' : 'false'}
+            onChange={(e) => setEditingEnabled((e.target as HTMLSelectElement).value === 'true')}
+            options={[
+              { value: 'true', label: 'Enabled' },
+              { value: 'false', label: 'Disabled' },
+            ]}
+          />
+          <Textarea
+            label="Config (JSON object)"
+            value={editingConfigText}
+            onChange={(e) => setEditingConfigText((e.target as HTMLTextAreaElement).value)}
+            rows={10}
+            fullWidth
+          />
+        </div>
+      </Modal>
     </div>
   );
 }
@@ -457,7 +910,13 @@ function MCPToolsTool() {
   const [params, setParams] = useState<Record<string, string>>({});
   const [result, setResult] = useState<unknown | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [mcpStatus, setMcpStatus] = useState<{ connected: boolean; tools: number } | null>(null);
+  const [mcpStatus, setMcpStatus] = useState<MCPStatus | null>(null);
+  const [userId, setUserId] = useState<number>(() => authenticatedUserId.value);
+  const projectId = currentProject.value?.id;
+
+  useEffect(() => {
+    setUserId(authenticatedUserId.value);
+  }, [authenticatedUserId.value]);
 
   useEffect(() => {
     loadTools();
@@ -492,7 +951,48 @@ function MCPToolsTool() {
     setResult(null);
 
     try {
-      const response = await endpoints.mcp.execute(selectedTool.name, params);
+      const required = new Set(selectedTool.input_schema.required || []);
+      for (const key of required) {
+        const value = params[key];
+        if (!value || !value.trim()) {
+          setError(`Missing required field: ${key}`);
+          setExecuting(false);
+          return;
+        }
+      }
+
+      const coerce = (raw: string, type: string): unknown => {
+        if (type === 'number' || type === 'integer') {
+          const n = Number(raw);
+          return Number.isFinite(n) ? n : raw;
+        }
+        if (type === 'boolean') {
+          const normalized = raw.trim().toLowerCase();
+          return normalized === 'true' || normalized === '1' || normalized === 'yes';
+        }
+        if (type === 'object' || type === 'array') {
+          try {
+            return JSON.parse(raw);
+          } catch {
+            return raw;
+          }
+        }
+        return raw;
+      };
+
+      const args: Record<string, unknown> = {};
+      for (const [key, prop] of Object.entries(selectedTool.input_schema.properties || {})) {
+        const raw = params[key];
+        if (raw === undefined || raw === '') continue;
+        args[key] = coerce(raw, prop.type);
+      }
+
+      const payload = {
+        project_id: projectId,
+        user_id: userId,
+        arguments: args
+      };
+      const response = await endpoints.mcp.execute(selectedTool.name, payload);
       setResult(response);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Execution failed');
@@ -536,6 +1036,27 @@ function MCPToolsTool() {
         </div>
       )}
 
+      <Card variant="bordered" padding="md">
+        <CardHeader title="Execution Context" />
+        <CardContent>
+          <div className="settings-form">
+            <Input
+              label="Project"
+              value={projectId ? `${currentProject.value?.name || projectId} (${projectId})` : 'No project selected'}
+              readOnly
+              fullWidth
+            />
+            <Input
+              label="User ID"
+              type="number"
+              value={userId}
+              onChange={(e) => setUserId(Number((e.target as HTMLInputElement).value) || 1)}
+              fullWidth
+            />
+          </div>
+        </CardContent>
+      </Card>
+
       {/* Tools List */}
       <Card variant="bordered" padding="md">
         <CardHeader
@@ -620,12 +1141,17 @@ function AuditLogTool() {
   const [entries, setEntries] = useState<AuditEntry[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState('all');
-  const [_stats, setStats] = useState<{ total_entries: number; by_category: Record<string, number> } | null>(null);
+  const [stats, setStats] = useState<AuditStats | null>(null);
+  const [categories, setCategories] = useState<string[]>([]);
 
   useEffect(() => {
     loadAuditLog();
   }, [filter]);
 
+  useEffect(() => {
+    endpoints.audit.categories().then(setCategories).catch(() => setCategories([]));
+  }, []);
+
   async function loadAuditLog() {
     setLoading(true);
     try {
@@ -640,7 +1166,8 @@ function AuditLogTool() {
       ]);
 
       if (entriesResult.status === 'fulfilled') {
-        setEntries(entriesResult.value);
+        const data: AuditLogResponse = entriesResult.value;
+        setEntries(data.activities);
       }
       if (statsResult.status === 'fulfilled') {
         setStats(statsResult.value);
@@ -688,6 +1215,7 @@ function AuditLogTool() {
       <Card variant="bordered" padding="md">
         <CardHeader
           title="Activity Log"
+          subtitle={stats ? `${stats.total_count} total events` : undefined}
           action={
             <div className="audit-controls">
               <Select
@@ -696,10 +1224,7 @@ function AuditLogTool() {
                 onChange={(e) => setFilter((e.target as HTMLSelectElement).value)}
                 options={[
                   { value: 'all', label: 'All Actions' },
-                  { value: 'sync', label: 'Syncs' },
-                  { value: 'create', label: 'Creates' },
-                  { value: 'update', label: 'Updates' },
-                  { value: 'delete', label: 'Deletes' }
+                  ...categories.map(c => ({ value: c, label: c }))
                 ]}
               />
               <Button variant="outline" size="sm" onClick={() => handleExport('json')}>Export JSON</Button>
@@ -724,7 +1249,7 @@ function AuditLogTool() {
                 {entries.map(entry => (
                   <tr key={entry.id}>
                     <td>{entry.action}</td>
-                    <td>{entry.user || 'System'}</td>
+                    <td>{entry.user_name || entry.user_id || 'System'}</td>
                     <td><code>{new Date(entry.timestamp).toLocaleString()}</code></td>
                     <td>{entry.details ? JSON.stringify(entry.details).slice(0, 50) : '-'}</td>
                   </tr>
@@ -762,7 +1287,7 @@ function CacheManagementTool() {
     setLoading(true);
     try {
       const result = await endpoints.cache.purge();
-      setLastCleared(`Purged ${result.purged} entries`);
+      setLastCleared(result.success ? 'Purged all cache entries' : 'Cache purge failed');
       setStats({ size: '0 MB', entries: 0, hitRate: 0 });
       setTimeout(() => setLastCleared(null), 3000);
     } catch (err) {
@@ -830,7 +1355,9 @@ function HealthMonitorTool() {
       console.error('Failed to load health:', err);
       setHealth({
         status: 'unhealthy',
-        services: { storage: 'down', mcp: 'down', figma: 'down' },
+        uptime_seconds: 0,
+        version: 'unknown',
+        services: { storage: 'error', mcp: 'error', figma: 'error' },
         timestamp: new Date().toISOString()
       });
     } finally {
@@ -851,9 +1378,9 @@ function HealthMonitorTool() {
 
   const services = health ? [
     { name: 'API Server', status: health.status, uptime: '99.9%' },
-    { name: 'Storage', status: health.services.storage === 'up' ? 'healthy' : 'unhealthy', uptime: '99.8%' },
-    { name: 'MCP Server', status: health.services.mcp === 'up' ? 'healthy' : 'unhealthy', uptime: '100%' },
-    { name: 'Figma API', status: health.services.figma === 'up' ? 'healthy' : health.services.figma === 'not_configured' ? 'not configured' : 'unhealthy', uptime: '98.5%' }
+    { name: 'Storage', status: health.services.storage === 'ok' ? 'healthy' : 'unhealthy', uptime: '99.8%' },
+    { name: 'MCP Server', status: health.services.mcp === 'ok' ? 'healthy' : 'unhealthy', uptime: '100%' },
+    { name: 'Figma API', status: health.services.figma === 'connected' ? 'healthy' : health.services.figma === 'not configured' ? 'not configured' : 'unhealthy', uptime: '98.5%' }
   ] : [];
 
   return (
@@ -986,7 +1513,7 @@ function ExportImportTool() {
         if (data.version && data.project) {
           setImportPreview({
             name: data.project.name,
-            tokens: data.project.tokens_count || 0,
+            tokens: 0,
             components: data.components?.length || 0
           });
         } else {
@@ -1020,11 +1547,13 @@ function ExportImportTool() {
       const data = JSON.parse(text);
 
       // Create new project from import
-      const newProject = await endpoints.projects.create({
+      const createData: ProjectCreateData = {
         name: `${data.project.name} (Imported)`,
         description: data.project.description || 'Imported project',
-        path: data.project.path || '/imported'
-      });
+        root_path: data.project.root_path || '',
+        figma_file_key: data.project.figma_file_key || ''
+      };
+      const newProject = await endpoints.projects.create(createData);
 
       // Update config if available
       if (data.config && Object.keys(data.config).length > 0) {
diff --git a/admin-ui/src/workdesks/QAWorkdesk.tsx b/admin-ui/src/workdesks/QAWorkdesk.tsx
index 223b5a1..68e1d37 100644
--- a/admin-ui/src/workdesks/QAWorkdesk.tsx
+++ b/admin-ui/src/workdesks/QAWorkdesk.tsx
@@ -63,24 +63,22 @@ function QADashboard() {
 
         if (esreResult.status === 'fulfilled') {
           const esres = esreResult.value;
-          const passed = esres.filter(e => e.last_result === 'pass').length;
           const total = esres.length;
-          const healthScore = total > 0 ? Math.round((passed / total) * 100) : 100;
 
           setMetrics({
-            healthScore,
+            healthScore: 100,
             esreDefinitions: total,
-            testsRun: total,
-            testsPassed: passed
+            testsRun: 0,
+            testsPassed: 0
           });
         }
 
         if (auditResult.status === 'fulfilled') {
-          const audits = auditResult.value as AuditEntry[];
-          setRecentTests(audits.slice(0, 5).map((entry, idx) => ({
+          const audits = auditResult.value.activities;
+          setRecentTests(audits.slice(0, 5).map((entry: AuditEntry, idx: number) => ({
             id: idx,
             name: entry.action || 'Test',
-            status: entry.details?.status as string || 'info',
+            status: (entry.details?.status as string) || entry.severity || 'info',
             time: formatTimeAgo(entry.timestamp)
           })));
         }
@@ -240,11 +238,9 @@ function ESREEditorTool() {
   const [saving, setSaving] = useState(false);
   const [formData, setFormData] = useState<ESRECreateData>({
     name: '',
-    component_name: '',
-    description: '',
+    definition_text: '',
     expected_value: '',
-    selector: '',
-    css_property: ''
+    component_name: ''
   });
   const [error, setError] = useState<string | null>(null);
 
@@ -276,8 +272,8 @@ function ESREEditorTool() {
       return;
     }
 
-    if (!formData.name || !formData.component_name || !formData.expected_value) {
-      setError('Name, Component, and Expected Value are required');
+    if (!formData.name || !formData.definition_text) {
+      setError('Name and Definition Text are required');
       return;
     }
 
@@ -285,14 +281,17 @@ function ESREEditorTool() {
     setError(null);
 
     try {
-      await endpoints.esre.create(projectId, formData);
+      await endpoints.esre.create(projectId, {
+        name: formData.name,
+        definition_text: formData.definition_text,
+        expected_value: formData.expected_value ? formData.expected_value : undefined,
+        component_name: formData.component_name ? formData.component_name : undefined
+      });
       setFormData({
         name: '',
-        component_name: '',
-        description: '',
+        definition_text: '',
         expected_value: '',
-        selector: '',
-        css_property: ''
+        component_name: ''
       });
       loadESRE();
     } catch (err) {
@@ -348,39 +347,25 @@ function ESREEditorTool() {
             />
             <Input
               label="Component Name"
-              value={formData.component_name}
+              value={formData.component_name || ''}
               onChange={(e) => setFormData(d => ({ ...d, component_name: (e.target as HTMLInputElement).value }))}
               placeholder="e.g., Button"
               fullWidth
             />
             <Textarea
-              label="Description"
-              value={formData.description}
-              onChange={(e) => setFormData(d => ({ ...d, description: (e.target as HTMLTextAreaElement).value }))}
+              label="Definition Text"
+              value={formData.definition_text}
+              onChange={(e) => setFormData(d => ({ ...d, definition_text: (e.target as HTMLTextAreaElement).value }))}
               placeholder="Describe the expected behavior..."
               fullWidth
             />
             <Input
               label="Expected Value"
-              value={formData.expected_value}
+              value={formData.expected_value || ''}
               onChange={(e) => setFormData(d => ({ ...d, expected_value: (e.target as HTMLInputElement).value }))}
               placeholder="e.g., 4px or var(--radius-md)"
               fullWidth
             />
-            <Input
-              label="CSS Selector (optional)"
-              value={formData.selector}
-              onChange={(e) => setFormData(d => ({ ...d, selector: (e.target as HTMLInputElement).value }))}
-              placeholder="e.g., .btn-primary"
-              fullWidth
-            />
-            <Input
-              label="CSS Property (optional)"
-              value={formData.css_property}
-              onChange={(e) => setFormData(d => ({ ...d, css_property: (e.target as HTMLInputElement).value }))}
-              placeholder="e.g., border-radius"
-              fullWidth
-            />
           </div>
           {error && (
             <div className="form-error">
@@ -416,16 +401,6 @@ function ESREEditorTool() {
                   <div className="esre-expected">
                     <code>{esre.expected_value}</code>
                   </div>
-                  <div className="esre-status">
-                    {esre.last_result && (
-                      <Badge
-                        variant={esre.last_result === 'pass' ? 'success' : esre.last_result === 'fail' ? 'error' : 'default'}
-                        size="sm"
-                      >
-                        {esre.last_result}
-                      </Badge>
-                    )}
-                  </div>
                   <div className="esre-actions">
                     <Button variant="ghost" size="sm" onClick={() => handleDelete(esre.id)}>
                       Delete
@@ -758,9 +733,9 @@ function TestResultsTool() {
       setResults(esres.map(esre => ({
         id: esre.id,
         name: esre.name,
-        status: esre.last_result || 'skip',
+        status: 'skip',
         duration: 0,
-        error: esre.last_result === 'fail' ? 'Expected value mismatch' : undefined
+        error: undefined
       })));
     } catch (err) {
       console.error('Failed to load results:', err);
@@ -788,7 +763,7 @@ function TestResultsTool() {
     <div className="workdesk">
       <div className="workdesk-header">
         <h1 className="workdesk-title">Test Results</h1>
-        <p className="workdesk-subtitle">ESRE test execution results</p>
+        <p className="workdesk-subtitle">ESRE definitions (runner not implemented yet)</p>
       </div>
 
       {/* Summary */}
diff --git a/admin-ui/src/workdesks/UIWorkdesk.tsx b/admin-ui/src/workdesks/UIWorkdesk.tsx
index 63c4694..dda8614 100644
--- a/admin-ui/src/workdesks/UIWorkdesk.tsx
+++ b/admin-ui/src/workdesks/UIWorkdesk.tsx
@@ -7,7 +7,14 @@ import { Input, Select } from '../components/base/Input';
 import { Spinner } from '../components/base/Spinner';
 import { endpoints } from '../api/client';
 import { currentProject } from '../state/project';
-import type { TokenDrift, Component, FigmaExtractResult } from '../api/types';
+import type {
+  Component,
+  FigmaExtractComponentsResult,
+  FigmaExtractTokensResult,
+  FigmaHealthStatus,
+  TokenDrift,
+  TokenDriftStats,
+} from '../api/types';
 import './Workdesk.css';
 
 interface UIWorkdeskProps {
@@ -45,7 +52,7 @@ function UIDashboard() {
     time: string;
     status: string;
   }>>([]);
-  const [figmaHealth, setFigmaHealth] = useState<{ connected: boolean } | null>(null);
+  const [figmaHealth, setFigmaHealth] = useState<FigmaHealthStatus | null>(null);
 
   useEffect(() => {
     loadDashboardData();
@@ -92,12 +99,12 @@ function UIDashboard() {
         }
 
         if (driftResult.status === 'fulfilled') {
-          const drifts = driftResult.value;
+          const { stats } = driftResult.value;
           setMetrics(m => ({
             ...m,
-            tokenDrift: drifts.length,
-            criticalIssues: drifts.filter(d => d.severity === 'critical').length,
-            warnings: drifts.filter(d => d.severity === 'medium' || d.severity === 'low').length
+            tokenDrift: stats.total,
+            criticalIssues: stats.by_severity.critical || 0,
+            warnings: (stats.by_severity.warning || 0) + (stats.by_severity.info || 0)
           }));
         }
       }
@@ -125,22 +132,24 @@ function UIDashboard() {
 
     switch (actionId) {
       case 'extractTokens':
-        window.location.hash = '#ui/figma-extraction';
+        window.location.hash = '#figma-extraction';
         break;
       case 'extractComponents':
-        window.location.hash = '#ui/figma-components';
+        window.location.hash = '#figma-components';
         break;
       case 'generateCode':
-        window.location.hash = '#ui/code-generator';
+        window.location.hash = '#code-generator';
         break;
       case 'syncTokens':
         // Quick sync using default settings
         try {
-          const fileKey = currentProject.value?.path;
-          if (fileKey) {
-            await endpoints.figma.syncTokens(fileKey, './tokens.css', 'css');
-            loadDashboardData();
+          const fileKey = currentProject.value?.figma_file_key;
+          if (!fileKey) {
+            alert('No Figma file key configured for this project. Set it in Admin → Projects.');
+            return;
           }
+          await endpoints.figma.syncTokens(fileKey, './tokens.css', 'css');
+          loadDashboardData();
         } catch (err) {
           console.error('Sync failed:', err);
         }
@@ -176,9 +185,9 @@ function UIDashboard() {
 
       {/* Figma Connection Status */}
       {figmaHealth && (
-        <div className={`connection-status ${figmaHealth.connected ? 'connected' : 'disconnected'}`}>
-          <Badge variant={figmaHealth.connected ? 'success' : 'error'} size="sm">
-            Figma: {figmaHealth.connected ? 'Connected' : 'Not Connected'}
+        <div className={`connection-status ${figmaHealth.status === 'ok' ? 'connected' : 'disconnected'}`}>
+          <Badge variant={figmaHealth.status === 'ok' ? 'success' : 'warning'} size="sm" title={figmaHealth.message}>
+            Figma: {figmaHealth.status} ({figmaHealth.mode})
           </Badge>
         </div>
       )}
@@ -263,12 +272,15 @@ function UIDashboard() {
 
 function FigmaExtractionTool() {
   const [fileKey, setFileKey] = useState('');
-  const [nodeId, setNodeId] = useState('');
   const [format, setFormat] = useState('css');
   const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<FigmaExtractResult | null>(null);
+  const [result, setResult] = useState<FigmaExtractTokensResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    setFileKey(currentProject.value?.figma_file_key || '');
+  }, [currentProject.value?.id]);
+
   async function handleExtract() {
     if (!fileKey.trim()) {
       setError('Please enter a Figma file key or URL');
@@ -282,7 +294,7 @@ function FigmaExtractionTool() {
     try {
       // Extract file key from URL if needed
       const key = extractFigmaFileKey(fileKey);
-      const extractResult = await endpoints.figma.extractVariables(key, nodeId || undefined);
+      const extractResult = await endpoints.figma.extractVariables(key, format);
       setResult(extractResult);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Extraction failed');
@@ -298,8 +310,8 @@ function FigmaExtractionTool() {
     try {
       const key = extractFigmaFileKey(fileKey);
       const targetPath = `./tokens.${format === 'scss' ? 'scss' : format === 'json' ? 'json' : 'css'}`;
-      await endpoints.figma.syncTokens(key, targetPath, format);
-      alert(`Tokens synced to ${targetPath}`);
+      const syncResult = await endpoints.figma.syncTokens(key, targetPath, format);
+      alert(`${syncResult.tokens_synced} tokens synced to ${targetPath}${syncResult.has_changes ? '' : ' (no changes)'}`);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Sync failed');
     } finally {
@@ -325,14 +337,6 @@ function FigmaExtractionTool() {
               placeholder="Enter Figma file key or paste URL"
               fullWidth
             />
-            <Input
-              label="Node ID (optional)"
-              value={nodeId}
-              onChange={(e) => setNodeId((e.target as HTMLInputElement).value)}
-              placeholder="Specific node ID to extract from"
-              hint="Leave empty to extract from entire file"
-              fullWidth
-            />
             <Select
               label="Output Format"
               value={format}
@@ -368,22 +372,13 @@ function FigmaExtractionTool() {
         <Card variant="bordered" padding="md">
           <CardHeader
             title="Extraction Results"
-            subtitle={`${result.count} tokens extracted`}
+            subtitle={`${result.tokens_count} tokens extracted`}
           />
           <CardContent>
-            {result.warnings && result.warnings.length > 0 && (
-              <div className="result-warnings">
-                {result.warnings.map((warning, idx) => (
-                  <Badge key={idx} variant="warning" size="sm">{warning}</Badge>
-                ))}
-              </div>
-            )}
             <div className="tokens-preview">
               <pre className="code-preview">
-                {result.items.slice(0, 10).map(item => (
-                  `${item.name}: ${JSON.stringify(item.value)}\n`
-                )).join('')}
-                {result.items.length > 10 && `\n... and ${result.items.length - 10} more`}
+                {result.tokens.slice(0, 10).map(t => `${t.name}: ${JSON.stringify(t.value)}`).join('\n')}
+                {result.tokens.length > 10 && `\n... and ${result.tokens.length - 10} more`}
               </pre>
             </div>
           </CardContent>
@@ -396,9 +391,13 @@ function FigmaExtractionTool() {
 function FigmaComponentsTool() {
   const [fileKey, setFileKey] = useState('');
   const [loading, setLoading] = useState(false);
-  const [components, setComponents] = useState<FigmaExtractResult | null>(null);
+  const [components, setComponents] = useState<FigmaExtractComponentsResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    setFileKey(currentProject.value?.figma_file_key || '');
+  }, [currentProject.value?.id]);
+
   async function handleExtract() {
     if (!fileKey.trim()) {
       setError('Please enter a Figma file key or URL');
@@ -456,14 +455,14 @@ function FigmaComponentsTool() {
         <Card variant="bordered" padding="md">
           <CardHeader
             title="Components Found"
-            subtitle={`${components.count} components`}
+            subtitle={`${components.components_count} components`}
           />
           <CardContent>
             <div className="components-list">
-              {components.items.map((comp, idx) => (
-                <div key={idx} className="component-item">
+              {components.components.map(comp => (
+                <div key={comp.key} className="component-item">
                   <span className="component-name">{comp.name}</span>
-                  <Badge size="sm">{comp.type}</Badge>
+                  <Badge size="sm">{comp.key}</Badge>
                 </div>
               ))}
             </div>
@@ -478,6 +477,7 @@ function CodeGeneratorTool() {
   const [components, setComponents] = useState<Component[]>([]);
   const [selectedComponent, setSelectedComponent] = useState('');
   const [framework, setFramework] = useState('react');
+  const [fileKey, setFileKey] = useState('');
   const [loading, setLoading] = useState(false);
   const [generatedCode, setGeneratedCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -486,6 +486,10 @@ function CodeGeneratorTool() {
     loadComponents();
   }, []);
 
+  useEffect(() => {
+    setFileKey(currentProject.value?.figma_file_key || '');
+  }, [currentProject.value?.id]);
+
   async function loadComponents() {
     const projectId = currentProject.value?.id;
     if (!projectId) return;
@@ -503,6 +507,10 @@ function CodeGeneratorTool() {
       setError('Please select a component');
       return;
     }
+    if (!fileKey.trim()) {
+      setError('Set a Figma file key (Admin → Projects) or enter one here.');
+      return;
+    }
 
     setLoading(true);
     setError(null);
@@ -511,10 +519,7 @@ function CodeGeneratorTool() {
       const component = components.find(c => c.id === selectedComponent);
       if (!component) throw new Error('Component not found');
 
-      const result = await endpoints.figma.generateCode(
-        { name: component.name, figma_node_id: component.figma_node_id },
-        framework
-      );
+      const result = await endpoints.figma.generateCode(fileKey, component.name, framework);
       setGeneratedCode(result.code);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Code generation failed');
@@ -534,13 +539,20 @@ function CodeGeneratorTool() {
         <CardHeader title="Generate Component" />
         <CardContent>
           <div className="settings-form">
+            <Input
+              label="Figma File Key"
+              value={fileKey}
+              onChange={(e) => setFileKey((e.target as HTMLInputElement).value)}
+              placeholder="Figma file key"
+              fullWidth
+            />
             <Select
               label="Component"
               value={selectedComponent}
               onChange={(e) => setSelectedComponent((e.target as HTMLSelectElement).value)}
               options={[
                 { value: '', label: 'Select a component...' },
-                ...components.map(c => ({ value: c.id, label: c.display_name || c.name }))
+                ...components.map(c => ({ value: c.id, label: c.name }))
               ]}
             />
             <Select
@@ -590,6 +602,7 @@ function CodeGeneratorTool() {
 
 function TokenDriftTool() {
   const [drifts, setDrifts] = useState<TokenDrift[]>([]);
+  const [stats, setStats] = useState<TokenDriftStats | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -605,7 +618,8 @@ function TokenDriftTool() {
 
     try {
       const result = await endpoints.tokens.drift(projectId);
-      setDrifts(result);
+      setDrifts(result.drifts);
+      setStats(result.stats);
     } catch (err) {
       console.error('Failed to load drifts:', err);
     } finally {
@@ -618,8 +632,8 @@ function TokenDriftTool() {
     if (!projectId) return;
 
     try {
-      await endpoints.tokens.updateDriftStatus(projectId, driftId, 'resolved');
-      loadDrifts();
+      await endpoints.tokens.updateDriftStatus(projectId, driftId, 'fixed');
+      void loadDrifts();
     } catch (err) {
       console.error('Failed to resolve drift:', err);
     }
@@ -646,7 +660,7 @@ function TokenDriftTool() {
       <Card variant="bordered" padding="md">
         <CardHeader
           title="Drift Issues"
-          subtitle={`${drifts.length} issues found`}
+          subtitle={`${stats?.total ?? drifts.length} issues found`}
           action={<Button variant="outline" size="sm" onClick={loadDrifts}>Refresh</Button>}
         />
         <CardContent>
@@ -657,23 +671,22 @@ function TokenDriftTool() {
               {drifts.map(drift => (
                 <div key={drift.id} className="drift-item">
                   <div className="drift-info">
-                    <span className="drift-token">{drift.token_name}</span>
-                    <span className="drift-file">{drift.file_path}</span>
+                    <span className="drift-token">{drift.component_id} • {drift.property_name}</span>
+                    <span className="drift-file">{drift.file_path}:{drift.line_number}</span>
                   </div>
                   <div className="drift-values">
-                    <code className="drift-expected">Expected: {drift.expected_value}</code>
-                    <code className="drift-actual">Actual: {drift.actual_value}</code>
+                    <code className="drift-expected">Hardcoded: {drift.hardcoded_value}</code>
+                    <code className="drift-actual">Suggested: {drift.suggested_token || '-'}</code>
                   </div>
                   <div className="drift-actions">
                     <Badge variant={
                       drift.severity === 'critical' ? 'error' :
-                      drift.severity === 'high' ? 'error' :
-                      drift.severity === 'medium' ? 'warning' : 'default'
+                      drift.severity === 'warning' ? 'warning' : 'default'
                     } size="sm">
                       {drift.severity}
                     </Badge>
                     <Button variant="ghost" size="sm" onClick={() => handleResolve(drift.id)}>
-                      Resolve
+                      Mark Fixed
                     </Button>
                   </div>
                 </div>
@@ -689,26 +702,69 @@ function TokenDriftTool() {
 function QuickWinsTool() {
   const [loading, setLoading] = useState(false);
   const [quickWins, setQuickWins] = useState<Array<{
-    id: number;
+    id: string;
     title: string;
-    priority: string;
-    effort: string;
+    priority?: string;
+    effort?: string;
     file?: string;
   }>>([]);
+  const [rawResult, setRawResult] = useState<unknown | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   async function scanProject() {
     setLoading(true);
     try {
-      // Use discovery scan to find quick wins
-      await endpoints.discovery.scan();
-      // Mock data for now - will be replaced with actual API response parsing
-      setQuickWins([
-        { id: 1, title: 'Replace hardcoded color #333', priority: 'high', effort: 'low', file: 'Button.tsx' },
-        { id: 2, title: 'Use spacing token instead of 16px', priority: 'medium', effort: 'low', file: 'Card.tsx' },
-        { id: 3, title: 'Update font weight to token', priority: 'low', effort: 'low', file: 'Header.tsx' }
-      ]);
+      setError(null);
+      setRawResult(null);
+      setQuickWins([]);
+
+      const projectId = currentProject.value?.id;
+      if (!projectId) {
+        setError('Select a project first');
+        return;
+      }
+
+      // Prefer an MCP tool (portable across environments); fall back to discovery scan only if needed.
+      const tools = await endpoints.mcp.tools();
+      const candidate = tools.find(t =>
+        /quick|win/i.test(t.name) || /quick|win/i.test(t.description)
+      );
+
+      if (!candidate) {
+        await endpoints.discovery.scan();
+        setError('No MCP "quick wins" tool found; ran discovery scan instead.');
+        return;
+      }
+
+      type ExecResponse = { success: boolean; result?: unknown; error?: string };
+      const exec = await endpoints.mcp.execute(candidate.name, { project_id: projectId, arguments: {} }) as ExecResponse;
+      if (!exec.success) {
+        throw new Error(exec.error || 'Quick wins tool failed');
+      }
+
+      const result = exec.result;
+      setRawResult(result ?? null);
+
+      const listCandidate =
+        Array.isArray(result) ? result :
+        (result && typeof result === 'object' && Array.isArray((result as Record<string, unknown>).quick_wins)) ? (result as Record<string, unknown>).quick_wins :
+        (result && typeof result === 'object' && Array.isArray((result as Record<string, unknown>).items)) ? (result as Record<string, unknown>).items :
+        null;
+
+      if (!Array.isArray(listCandidate)) return;
+
+      setQuickWins(listCandidate.map((item, idx) => {
+        const obj = (item && typeof item === 'object') ? (item as Record<string, unknown>) : {};
+        return {
+          id: String(obj.id || idx),
+          title: String(obj.title || obj.message || obj.name || 'Quick win'),
+          priority: typeof obj.priority === 'string' ? obj.priority : undefined,
+          effort: typeof obj.effort === 'string' ? obj.effort : undefined,
+          file: typeof obj.file === 'string' ? obj.file : undefined,
+        };
+      }));
     } catch (err) {
-      console.error('Scan failed:', err);
+      setError(err instanceof Error ? err.message : 'Scan failed');
     } finally {
       setLoading(false);
     }
@@ -731,6 +787,11 @@ function QuickWinsTool() {
           }
         />
         <CardContent>
+          {error && (
+            <div className="form-error">
+              <Badge variant="error">{error}</Badge>
+            </div>
+          )}
           {quickWins.length === 0 ? (
             <p className="text-muted">Click "Scan Project" to find quick wins</p>
           ) : (
@@ -742,20 +803,32 @@ function QuickWinsTool() {
                     {win.file && <span className="quick-win-file">{win.file}</span>}
                   </div>
                   <div className="quick-win-badges">
-                    <Badge
-                      variant={win.priority === 'high' ? 'error' : win.priority === 'medium' ? 'warning' : 'default'}
-                      size="sm"
-                    >
-                      {win.priority}
-                    </Badge>
-                    <Badge variant="success" size="sm">
-                      {win.effort} effort
-                    </Badge>
+                    {win.priority && (
+                      <Badge
+                        variant={win.priority === 'high' ? 'error' : win.priority === 'medium' ? 'warning' : 'default'}
+                        size="sm"
+                      >
+                        {win.priority}
+                      </Badge>
+                    )}
+                    {win.effort && (
+                      <Badge variant="success" size="sm">
+                        {win.effort} effort
+                      </Badge>
+                    )}
                   </div>
                 </div>
               ))}
             </div>
           )}
+          {rawResult && (
+            <div style={{ marginTop: 12 }}>
+              <details>
+                <summary className="text-muted">Raw tool output</summary>
+                <pre className="code-preview">{JSON.stringify(rawResult, null, 2)}</pre>
+              </details>
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/admin-ui/src/workdesks/UXWorkdesk.tsx b/admin-ui/src/workdesks/UXWorkdesk.tsx
index ca9acc2..9456bd4 100644
--- a/admin-ui/src/workdesks/UXWorkdesk.tsx
+++ b/admin-ui/src/workdesks/UXWorkdesk.tsx
@@ -7,7 +7,7 @@ import { Input } from '../components/base/Input';
 import { Spinner } from '../components/base/Spinner';
 import { endpoints } from '../api/client';
 import { currentProject } from '../state/project';
-import type { FigmaFile } from '../api/types';
+import type { Component, FigmaFile, FigmaHealthStatus, FigmaStyleDefinition, FigmaToken } from '../api/types';
 import './Workdesk.css';
 
 interface UXWorkdeskProps {
@@ -34,7 +34,7 @@ export default function UXWorkdesk({ activeTool }: UXWorkdeskProps) {
 function UXDashboard() {
   const [loading, setLoading] = useState(true);
   const [figmaFiles, setFigmaFiles] = useState<FigmaFile[]>([]);
-  const [figmaHealth, setFigmaHealth] = useState<{ connected: boolean } | null>(null);
+  const [figmaHealth, setFigmaHealth] = useState<FigmaHealthStatus | null>(null);
   const [metrics, setMetrics] = useState({
     figmaFiles: 0,
     synced: 0,
@@ -52,7 +52,7 @@ function UXDashboard() {
       const projectId = currentProject.value?.id;
 
       // Load Figma health
-      const healthResult = await endpoints.figma.health().catch(() => ({ connected: false }));
+      const healthResult = await endpoints.figma.health().catch(() => null);
       setFigmaHealth(healthResult);
 
       // Load project-specific data
@@ -60,8 +60,8 @@ function UXDashboard() {
         const filesResult = await endpoints.projects.figmaFiles(projectId).catch(() => []);
         setFigmaFiles(filesResult);
 
-        const synced = filesResult.filter(f => f.status === 'synced').length;
-        const pending = filesResult.filter(f => f.status === 'pending').length;
+        const synced = filesResult.filter(f => f.sync_status === 'synced').length;
+        const pending = filesResult.filter(f => f.sync_status === 'pending').length;
 
         setMetrics({
           figmaFiles: filesResult.length,
@@ -119,9 +119,9 @@ function UXDashboard() {
 
       {/* Connection Status */}
       {figmaHealth && (
-        <div className={`connection-status ${figmaHealth.connected ? 'connected' : 'disconnected'}`}>
-          <Badge variant={figmaHealth.connected ? 'success' : 'error'} size="sm">
-            Figma: {figmaHealth.connected ? 'Connected' : 'Not Connected'}
+        <div className={`connection-status ${figmaHealth.status === 'ok' ? 'connected' : 'disconnected'}`}>
+          <Badge variant={figmaHealth.status === 'ok' ? 'success' : 'warning'} size="sm" title={figmaHealth.message}>
+            Figma: {figmaHealth.status} ({figmaHealth.mode})
           </Badge>
         </div>
       )}
@@ -173,15 +173,15 @@ function UXDashboard() {
               {figmaFiles.map(file => (
                 <div key={file.id} className="figma-file-item">
                   <div className="figma-file-info">
-                    <span className="figma-file-name">{file.name}</span>
+                    <span className="figma-file-name">{file.file_name}</span>
                     <span className="figma-file-key">{file.file_key}</span>
                   </div>
                   <div className="figma-file-status">
                     <Badge
-                      variant={file.status === 'synced' ? 'success' : file.status === 'error' ? 'error' : 'warning'}
+                      variant={file.sync_status === 'synced' ? 'success' : file.sync_status === 'error' ? 'error' : 'warning'}
                       size="sm"
                     >
-                      {file.status === 'synced' ? 'Synced' : file.status === 'error' ? 'Error' : 'Pending'}
+                      {file.sync_status === 'synced' ? 'Synced' : file.sync_status === 'error' ? 'Error' : 'Pending'}
                     </Badge>
                     {file.last_synced && (
                       <span className="figma-file-sync">{formatTimeAgo(file.last_synced)}</span>
@@ -201,7 +201,7 @@ function UXDashboard() {
 }
 
 function AddFigmaFileCard({ onAdded }: { onAdded: () => void }) {
-  const [formData, setFormData] = useState({ name: '', fileKey: '' });
+  const [formData, setFormData] = useState({ fileName: '', figmaUrl: '' });
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -212,8 +212,8 @@ function AddFigmaFileCard({ onAdded }: { onAdded: () => void }) {
       return;
     }
 
-    if (!formData.name || !formData.fileKey) {
-      setError('Name and File Key are required');
+    if (!formData.fileName || !formData.figmaUrl) {
+      setError('File Name and Figma URL/File Key are required');
       return;
     }
 
@@ -222,9 +222,18 @@ function AddFigmaFileCard({ onAdded }: { onAdded: () => void }) {
 
     try {
       // Extract file key from URL if needed
-      const fileKey = extractFigmaFileKey(formData.fileKey);
-      await endpoints.projects.addFigmaFile(projectId, { name: formData.name, fileKey });
-      setFormData({ name: '', fileKey: '' });
+      const fileKey = extractFigmaFileKey(formData.figmaUrl);
+      const figmaUrl = formData.figmaUrl.includes('figma.com')
+        ? formData.figmaUrl
+        : `https://www.figma.com/file/${fileKey}`;
+
+      await endpoints.projects.addFigmaFile(projectId, {
+        figma_url: figmaUrl,
+        file_name: formData.fileName,
+        file_key: fileKey
+      });
+
+      setFormData({ fileName: '', figmaUrl: '' });
       onAdded();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to add Figma file');
@@ -240,15 +249,15 @@ function AddFigmaFileCard({ onAdded }: { onAdded: () => void }) {
         <form className="add-figma-form" onSubmit={(e) => { e.preventDefault(); handleAdd(); }}>
           <Input
             label="File Name"
-            value={formData.name}
-            onChange={(e) => setFormData(d => ({ ...d, name: (e.target as HTMLInputElement).value }))}
+            value={formData.fileName}
+            onChange={(e) => setFormData(d => ({ ...d, fileName: (e.target as HTMLInputElement).value }))}
             placeholder="e.g., Design System"
             fullWidth
           />
           <Input
             label="Figma URL or File Key"
-            value={formData.fileKey}
-            onChange={(e) => setFormData(d => ({ ...d, fileKey: (e.target as HTMLInputElement).value }))}
+            value={formData.figmaUrl}
+            onChange={(e) => setFormData(d => ({ ...d, figmaUrl: (e.target as HTMLInputElement).value }))}
             placeholder="https://figma.com/file/... or file key"
             fullWidth
           />
@@ -288,12 +297,12 @@ function TokenListTool() {
       if (projectId) {
         const files = await endpoints.projects.figmaFiles(projectId);
         if (files.length > 0) {
-          const result = await endpoints.figma.extractVariables(files[0].file_key);
-          setTokens(result.items.map(item => ({
-            name: item.name,
-            value: String(item.value),
-            type: item.type,
-            category: item.metadata?.category as string
+          const result = await endpoints.figma.extractVariables(files[0].file_key, 'json');
+          setTokens(result.tokens.map((token: FigmaToken) => ({
+            name: token.name,
+            value: typeof token.value === 'string' ? token.value : JSON.stringify(token.value),
+            type: token.type,
+            category: token.category
           })));
         }
       }
@@ -462,15 +471,15 @@ function FigmaFilesTool() {
               {files.map(file => (
                 <div key={file.id} className="figma-file-item">
                   <div className="figma-file-info">
-                    <span className="figma-file-name">{file.name}</span>
+                    <span className="figma-file-name">{file.file_name}</span>
                     <span className="figma-file-key">{file.file_key}</span>
                   </div>
                   <div className="figma-file-status">
                     <Badge
-                      variant={file.status === 'synced' ? 'success' : file.status === 'error' ? 'error' : 'warning'}
+                      variant={file.sync_status === 'synced' ? 'success' : file.sync_status === 'error' ? 'error' : 'warning'}
                       size="sm"
                     >
-                      {file.status}
+                      {file.sync_status}
                     </Badge>
                   </div>
                   <div className="figma-file-actions">
@@ -522,13 +531,13 @@ function AssetListTool() {
         if (files.length > 0) {
           const result = await endpoints.figma.extractStyles(files[0].file_key);
           // Transform styles into assets
-          const extractedAssets = result.items
-            .filter(item => item.type === 'effect' || item.type === 'paint')
-            .map((item, idx) => ({
-              id: String(idx),
-              name: item.name,
+          const extractedAssets = result.styles
+            .filter((style: FigmaStyleDefinition) => style.type === 'effect' || style.type === 'paint')
+            .map((style: FigmaStyleDefinition, idx: number) => ({
+              id: style.key || String(idx),
+              name: style.name,
               type: 'icon' as const,
-              format: 'svg',
+              format: 'figma-style',
               size: '-'
             }));
           setAssets(extractedAssets);
@@ -643,12 +652,12 @@ function ComponentListTool() {
       const projectId = currentProject.value?.id;
       if (projectId) {
         const result = await endpoints.projects.components(projectId);
-        setComponents(result.map(c => ({
+        setComponents(result.map((c: Component) => ({
           id: c.id,
-          name: c.display_name || c.name,
+          name: c.name,
           description: c.description,
           variants: c.variants?.length || 0,
-          status: (c as unknown as { status?: string }).status === 'active' ? 'ready' : 'in-progress'
+          status: c.code_generated ? 'ready' : 'planned'
         })));
       }
     } catch (err) {
diff --git a/apps/api/server.py b/apps/api/server.py
index d7efc24..b43af0b 100644
--- a/apps/api/server.py
+++ b/apps/api/server.py
@@ -783,22 +783,22 @@ async def list_workflows():
     return {"workflows": workflows, "count": len(workflows), "directory": str(workflows_dir)}
 
 
-@app.get("/api/config")
-async def get_config():
+@app.get("/api/public-config")
+async def get_public_config():
     """
     Public configuration endpoint.
 
     Returns ONLY safe, non-sensitive configuration values that are safe
     to expose to the client browser.
 
-    SECURITY: This endpoint is the ONLY place where configuration is exposed.
-    All other config values (secrets, API keys, etc.) must be server-only.
+    NOTE: The Admin UI uses `/api/config` for runtime settings (with secrets masked).
+    This endpoint is kept for backwards compatibility with older clients.
     """
     # Import here to avoid circular imports
     try:
-        from config import get_public_config
+        from config import get_public_config as _get_public_config
 
-        return get_public_config()
+        return _get_public_config()
     except ImportError:
         # Fallback for legacy deployments
         return {
@@ -848,6 +848,7 @@ async def create_project(project: ProjectCreate):
         name=project.name,
         description=project.description,
         figma_file_key=project.figma_file_key,
+        root_path=project.root_path,
     )
     ActivityLog.log(
         action="project_created",
diff --git a/dss/storage/json_store.py b/dss/storage/json_store.py
index 2f4ac6d..11c0479 100644
--- a/dss/storage/json_store.py
+++ b/dss/storage/json_store.py
@@ -218,7 +218,13 @@ class Projects:
             (base / subdir).mkdir(parents=True, exist_ok=True)
 
     @staticmethod
-    def create(id: str, name: str, description: str = "", figma_file_key: str = "") -> Dict:
+    def create(
+        id: str,
+        name: str,
+        description: str = "",
+        figma_file_key: str = "",
+        root_path: str = "",
+    ) -> Dict:
         """Create a new project."""
         Projects._init_project_structure(id)
 
@@ -228,6 +234,7 @@ class Projects:
             "name": name,
             "description": description,
             "figma_file_key": figma_file_key,
+            "root_path": root_path,
             "status": "active",
             "created_at": now,
             "updated_at": now,