`DW-Agents/dw-agents/agent-ui-manager/README.md`

129 lines
# UI Manager Agent

## Purpose
Central UI/UX management system that ensures consistent design, branding, and user experience across all DW-Agents dashboards and interfaces.

## Core Responsibilities
- Maintain unified design system and style guidelines
- Provide cohesive color schemes and branding
- **Theme Manager**: Modern Minimalist theme (default for all new web viewers)
- Central dashboard linking to all agent interfaces
- Theme customization and distribution
- UI/UX consistency enforcement
- Agent interface screenshots and monitoring
- Style injection and updates to all agents
- Accessibility and responsive design standards

## Technical Details
- **Port**: 7240
- **Main File**: ui-manager-agent.ts
- **Interface**: Central hub with agent directory
- **Style System**: CSS variables and shared components
- **Auto-Recovery**: PM2 managed with auto-restart on crash

## Design System

### Theme Manager - Modern Minimalist (Default)
**New as of November 2025**: All new web viewers should use the Modern Minimalist theme for consistency.

**Quick Start**:
```typescript
const { getThemedPageWrapper } = require('../shared-ui-components.js');
res.send(getThemedPageWrapper('Agent Name', PORT, content));
```

See `/root/DW-Agents/THEME_MANAGER_GUIDE.md` for complete documentation.

### Modern Minimalist Color Palette
- **Primary**: `#2563eb` (Modern blue)
- **Secondary**: `#7c3aed` (Elegant purple)
- **Accent**: `#06b6d4` (Cyan)
- **Success**: `#10b981` (Green)
- **Warning**: `#f59e0b` (Orange)
- **Error**: `#ef4444` (Red)
- **Neutral Scale**: `#f8fafc` to `#0f172a` (50-900)

### Typography
- **Primary Font**: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- **Headings**: 600 weight
- **Body**: 400 weight
- **Code**: 'Monaco', 'Courier New', monospace

### Component Standards
- **Border Radius**: 8-10px for cards, 5px for buttons
- **Shadows**: `0 2px 10px rgba(0,0,0,0.1)` for elevation
- **Spacing**: 20px base unit
- **Transitions**: 0.3s ease for interactions

## Key Features
- **Theme Manager Tab**: Modern Minimalist theme configuration with:
  - Code snippets for easy integration
  - Live component examples
  - API endpoints for theme access
  - Complete documentation
- **Agent Directory**: Visual grid of all agents with:
  - Live screenshots
  - Status indicators (online/offline)
  - Quick links to each dashboard
  - Agent descriptions
  - Port numbers
- **Live Preview**: Side-by-side view of all agent interfaces
- **Universal Chat**: AI assistant integrated in header
- **Style Editor**: Customize global theme
- **Export Styles**: Generate CSS for consistency
- **Responsive Design**: Mobile-friendly layouts

## Managed Agents
1. task-orchestrator (9900)
2. purchasing-office (9880)
3. accounting (9882)
4. marketing (9881)
5. zendesk-chat (9884)
6. server-uptime
7. digital-samples (9879)
8. completed-tasks
9. needs-attention
10. todays-highlights
11. trend-research (9883)
12. new-client-signup
13. in-parallel
14. parallel-processes
15. legal-team (9878)
16. shopify-store (7238)
17. log-monitor (7239)
18. ui-manager (7240)

## Web Dashboard (Port 7240)
- **Home**: Overview of all agents
- **Agent Grid**: Visual directory with screenshots
- **Style System**: Theme editor
- **Documentation**: UI guidelines
- **Status Monitor**: Agent availability
- **Quick Actions**: Common tasks

## Style Distribution
The UI Manager provides:
- **Theme Manager**: Complete modern minimalist theme system
- **API Endpoints**:
  - `GET /api/theme` - Get theme object
  - `GET /api/theme/css` - Get theme CSS
  - `GET /api/theme/config` - Get theme configuration
- **Shared Components**: Universal header, buttons, cards, badges
- **CSS Variables**: All design tokens available as CSS vars
- **Utility Classes**: Ready-to-use component classes
- **Page Wrapper**: `getThemedPageWrapper()` for instant theme application

## Integration Points
- **All agents**: Provides styling and branding
- **master-hub**: Central navigation
- **server-uptime**: Agent status monitoring

## Authentication
- Session-based with shared SSO
- Admin access level required

## PM2 Configuration
- Auto-restart on crash
- Max memory: 300MB
- Error/output logs configured