# Design System Swarm (DSS) - Production Configuration

## ✅ Production Status: LIVE & ACCESSIBLE

**Domain:** https://dss.overbits.luz.uy/
**Status:** Deployed and accessible from anywhere without credentials
**Last Updated:** 2025-12-08

---

## Services & Ports

| Service | Port | Status | Details |
|---------|------|--------|---------|
| **Admin UI** | 443 (nginx) | ✅ Live | Vite production build |
| **API Backend** | 3001 | ✅ Live | Express.js server |
| **Nginx Reverse Proxy** | 443 (HTTPS) | ✅ Live | Routes requests, serves static files |
| **Database** | 5432 | ✅ Live | Seeded with demo data |

---

## Authentication

### Auto-Login System
- **Demo User:** demo@example.com / demo123
- **Script:** `/admin-ui/js/utils/demo-auth-init.js`
- **Behavior:** Auto-authenticates first-time visitors without prompting
- **Method:** Fetches `/api/auth/login`, stores JWT token in localStorage
- **Event:** Dispatches `auth-change` event to notify components

### Nginx Auth
- **Status:** ✅ DISABLED
- **Reason:** App handles authentication via auto-login script
- **File:** `/etc/nginx/sites-available/dss.overbits.luz.uy.conf` (lines 13-14 commented)

---

## Critical Files & Paths

### Frontend Code
```
/home/overbits/dss/admin-ui/
├── dist/                          # Production build (served by nginx)
├── index.html                      # Added demo-auth-init.js script
├── js/
│   ├── utils/demo-auth-init.js    # Auto-login script (NEW)
│   ├── core/stylesheet-manager.js # Fixed CSS paths
│   └── components/
│       └── layout/
│           └── ds-project-selector.js  # Fixed event delegation
```

### Backend Code
```
/home/overbits/dss/server/
└── src/scripts/seed.js            # Database seeding (contains demo user)
```

### Nginx Configuration
```
/etc/nginx/sites-available/dss.overbits.luz.uy.conf
- Static serving: /admin-ui/dist/ (aliased as /)
- API proxy: /api/* → http://127.0.0.1:3001/api/
- Storybook: /storybook/static/
```

---

## Asset Locations

| Asset | Path | Status |
|-------|------|--------|
| Tokens CSS | `/admin-ui/css/tokens.css` | ✅ 200 OK |
| Components CSS | `/admin-ui/css/dss-components.css` | ✅ 200 OK |
| Integrations CSS | `/admin-ui/css/dss-integrations.css` | ⚠️ 404 (optional) |

---

## Build Information

### Production Build
```bash
npm run build          # Builds to /dist/
npm run build-storybook  # Builds storybook to /storybook-static/
```

### Build Outputs
- **Admin UI Build:** 3.38s
- **Main Bundle:** components-*.js (393KB gzipped: 74.28KB)
- **Core Library:** core-*.js (9.48KB gzipped: 3.46KB)

---

## Project Selector Component

**Status:** ✅ FIXED - Fully functional

- **Component:** `ds-project-selector`
- **Location:** `/admin-ui/js/components/layout/ds-project-selector.js`
- **Fix Applied:** Event delegation pattern (lines 228-251)
  - Was: Individual `addEventListener` on dynamic buttons (unreliable)
  - Now: Container-level listener with `e.target.closest('.project-modal-button')`
- **Behavior:** Auto-selects first available project on initial load
- **Modal:** Only shows if no project is selected

---

## Key Configuration Values

### Stylesheet Manager (stylesheet-manager.js: lines 30-32)
```javascript
static #config = {
  tokens: '/admin-ui/css/tokens.css',
  components: '/admin-ui/css/dss-components.css',
  integrations: '/admin-ui/css/dss-integrations.css'
};
```

### Demo User (seed.js: lines 21-26)
```
Email: demo@example.com
Password: demo123
Role: admin
```

---

## Deployment Checklist

- [x] Nginx configured to serve production build
- [x] API backend running on port 3001
- [x] Auto-login script deployed and functional
- [x] Database seeded with demo user
- [x] HTTPS enabled with valid certificate
- [x] Nginx basic auth disabled (app handles auth)
- [x] CSS paths corrected for production build
- [x] Event delegation fix for project selector
- [x] Production build tested and verified

---

## How to Deploy Changes

1. **Code Changes:** Edit source files in `/admin-ui/js/`
2. **Rebuild:** `npm run build`
3. **Verify:** Test at https://dss.overbits.luz.uy/
4. **No Restart Needed:** Nginx serves updated files immediately

---

## Database Seeding

To reset database with fresh demo data:

```bash
cd /home/overbits/dss/server
npm run seed   # Runs seed.js script
```

---

## Production Test Results

✅ HTTP Status: 200 OK
✅ Auto-Login: SUCCESS (demo@example.com)
✅ Auth Token: Stored (466 chars)
✅ Project Selector: Loaded & Auto-Selected
✅ CSS Assets: Loaded (tokens, components)
✅ Public Access: Confirmed (no credentials needed)

---

## Notes for Future Work

- `dss-integrations.css` is currently missing (optional, not critical)
- Stylesheet errors don't break functionality (graceful degradation)
- Modal auto-closes when project is selected
- Auto-login fires on every fresh page load (no cache check for stored auth)