# Ágora UI · v3

Iteración sobre feedback de la v2. Cambios consolidados.

## ▸ Cómo correrlo (necesario · NO doble-click)

```bash
cd ~/Downloads/agora-ui-v3       # o donde extraigas el zip
python3 -m http.server 8000
# Abrir en Chrome/Safari:
http://localhost:8000/Agora.html
```

⚠️  El proyecto usa Babel-in-browser y **REQUIERE HTTP server**. Doble-click
sobre `Agora.html` (file://) NO funciona — Chrome bloquea cross-origin.

## ▸ Cambios desde v2

### A · Top chrome reorganizado (home only)

| Posición   | v2                 | v3                              |
|------------|--------------------|---------------------------------|
| Top-left   | Hamburger          | Hamburger ✓                     |
| Top-center | Tokens chip        | (vacío · limpio)               |
| Top-right  | Guardian dropdown  | **Tokens chip** (movido aquí)  |
| Eliminado  | —                  | **Guardian dropdown** removido |

Razón: el HamburgerMenu ya cubre la navegación entre agentes, el Guardian
era redundante. Resultado: chrome más limpio, simétrico, menos ruido visual.

### B · Padding-top de Agenda/Health/Profile arreglado

Las screens no-home tenían padding-top de 120-144px asumiendo que había
chrome arriba. Ahora que se oculta en non-home tabs, había un gap visible
arriba del título. Reducido a 64px (solo despeja la dynamic island).

### C · HamburgerMenu refinado

- **Más angosto**: 256px → 208px.
- **Solo agentes**: removidas secciones "Tools" y "Account" (redundantes
  con la tab Profile, que ya tiene Preferences + Sign out).
- **Nombres más cortos**: usa una map `SHORT_NAMES` (Job Hunter, Academic,
  Spiritual, Wellness, Finance, Languages, Productivity, Growth, Portfolio,
  Monitor) en lugar de los nombres largos completos.
- **Todos los 10 agentes** visibles (skipping orchestrator porque ES el
  FAB chat). Antes solo mostraba 8 con un "All 11 agents" footer.

### D · Preferences editor REDISEÑADO · 2 vistas full-screen

El sidebar permanente (260px) en pantalla móvil de 393px era inviable
(quedaban ~133px para el formulario, partido por la mitad).

**Nueva arquitectura · 2 estados**:

1. **INDEX** — al abrir Preferences, full-screen con las 13 categorías
   listadas como cards (icono, número, nombre, descripción, % progreso,
   barra). Solo botón "Back to Ágora" arriba (sin overlap).
2. **DETAIL** — al click en una categoría, navega a su formulario
   full-screen. Botón "All categories" arriba (vuelve al INDEX). Hero
   block con nombre + descripción. Form. Y nav inline al final con
   "Previous · X" / "Next · Y" como cards.

**Eliminado**: el botón hamburger duplicado del top-bar de prefs (que
hacía overlap con "Back to Ágora").

`Esc` ahora hace navegación inteligente:
- Detail → Index (vuelve a la lista)
- Index → cierra Preferences

### E · Job Hunter agent enriquecido

Cuando abrís Agent Detail con `id === 'job-hunter'`, ahora muestra 3
secciones extra antes de los stats genéricos:

1. **Pipeline · last 7 days** — funnel con barras gradient horizontales:
   Scanned (944) → Matched (41) → Applied (12) → Interview (3) → Offer (0).
2. **Recent matches · 5 of 41** — cards con score (verde si ≥85, amarillo
   si <85), título, empresa, ubicación, source pill (LinkedIn/GetOnBoard/
   Torre/Indeed/Computrabajo), tiempo relativo.
3. **Top boards · match rate** — tabla compacta con board, matches/total,
   y match rate %.

⚠️  Estos datos son **mock visual**. La integración real requiere wire-up
a:
- `GET /v1/jobs/recent` (944 jobs reales)
- `GET /v1/match/thresholds/current` (85/85/85)
- Estadísticas por board (endpoint todavía no expuesto)

Otros agentes mantienen el detail genérico (sin sección extra).

## ▸ Estado · qué funciona

| Tab/Modal               | Estado    | Nota                                    |
|--------------------------|-----------|-----------------------------------------|
| Home (forest + chrome)   | ✅ v3     | Hamburger izq · Tokens der              |
| Agenda                   | ✅ v3     | Padding-top arreglado                   |
| Chat (Orchestrator)      | ✅        | Sin cambios desde v2                    |
| Health                   | ✅ v3     | Padding-top arreglado                   |
| Profile                  | ✅ v3     | Padding-top arreglado                   |
| HamburgerPanel           | ✅ v3     | Solo agentes · 208px · short names      |
| AgentDetail (Job Hunter) | ✅ v3     | Pipeline + matches + boards             |
| AgentDetail (otros 9)    | ✅        | Detail genérico                         |
| PreferencesEditor INDEX  | ✅ v3     | Lista 13 cats full-screen               |
| PreferencesEditor DETAIL | ✅ v3     | Form full-screen + nav inline           |
| Voice modal              | ✅        | Sin cambios desde v1                    |
| Tweaks panel             | ✅        | Sin cambios                             |

## ▸ Pendientes (backlog post-v3)

- **Wire-up real al backend** (241 endpoints LIVE) — todo es mock
  todavía. Roadmap propuesto:
  1. Nivel 1 LOCAL DEMO (~2h): UI fetch() a localhost:8011 desde Mac
  2. Nivel 2 STATIC GEEKOM (~3-4h): UI servida por Caddy + reverse proxy
  3. Nivel 3 PWA + AUTH (~8-10h): post-17may con Authelia SSO
- **System dashboard** (Tools sec eliminada del hamburger): cuando se
  cree, se accede desde Profile tab.
- **Sign out real**: actualmente event-only.
- **Container queries** donde aplique.
- **Tests automáticos** (Playwright/Cypress) para asegurar flows.

## ▸ Archivos modificados desde v2

| Archivo                                  | Cambio v3                                |
|------------------------------------------|------------------------------------------|
| `components/shell.jsx`                   | TopChrome 2-col (no Guardian)           |
| `components/app.jsx`                     | guardian state removido + simplifica    |
| `components/hamburger.jsx`               | Solo agentes · short names · 208px     |
| `components/screens.jsx`                 | Padding fixes + JobHunterPanel          |
| `components/preferences-shell.jsx`       | Reescrito · 2 vistas full-screen        |
| `styles/tokens.css`                      | `.hamburger-panel` width 208px          |

(Resto · sin cambios).