Skip to content

feat: integrar frontend fronted-v-saas — un solo repo, V intacta, chat cableado - #54

Merged
turbillon50 merged 6 commits into
mainfrom
claude/integrate-fronted-v-saas
May 17, 2026
Merged

feat: integrar frontend fronted-v-saas — un solo repo, V intacta, chat cableado#54
turbillon50 merged 6 commits into
mainfrom
claude/integrate-fronted-v-saas

Conversation

@turbillon50

@turbillon50 turbillon50 commented May 17, 2026

Copy link
Copy Markdown
Owner

Integración del frontend nuevo fronted-v-saas al repo vforge

Un solo repo, V intacta, chat cableado a su cerebro real.

Lo grande

Item Antes (main) Ahora
Frontend shell propio + componentes V/vforge/ui mezclados Zenith Forge design (sereno/premium/cinemático)
Estructura app/(dashboard)/* app/ root con landing + /app/* dashboard
Stack UI shadcn + 50 componentes radix Componentes propios + Clerk opcional
Tailwind 4.x con @theme inline 3.4 con tailwind.config.ts Zenith Forge
Chat mock setTimeout /api/forge/run real con SSE streaming + rehidratación
Auth operator_luis hardcoded Clerk opcional (sin keys → pasa directo)
Mobile lag por keystroke (AudioContext) fontSize 16 + touch-action manipulation

Backend intocado

🛡 V no se toca un byte:

  • lib/forge/* (system-prompt v2, tools, routing, gemini-adapter, v-server)
  • lib/db, lib/vault, lib/github, lib/namecom, lib/vercel
  • app/api/* (24 endpoints completos)
  • migrations/*
  • V_*.md (35KB system prompt v2 + 4 docs)
  • 90 skills, agent_directives, agent_config en BD

Rutas

Marketing público:
/ (landing) · /glossary · /pricing · /marketplace · /sign-in · /sign-up · /onboarding · /offline

Dashboard (V):
/app/chat (V conversacional principal) · /app/hub · /app/projects · /app/secrets · /app/activity · /app/deployments · /app/repovision · /app/integrations · /app/marketplace · /app/settings

API (intactas):
24 endpoints bajo /api/* — referencia completa en docs/backend-contract.md (PR #53)

Chat cableado a V real

components/workspace/chat/ChatExperience.tsx ahora hace:

  1. Mount → GET /api/forge/active-session?scope=general → resuelve sessionId canónico (mismo session en cualquier device)
  2. Rehidratación → GET /api/forge/conversations?sessionId=X&limit=100 → carga historial REAL de V (no "empieza de cero")
  3. Submit → POST /api/forge/run con SSE streaming
  4. Stream → parsea events text/error, soporta Stop button via AbortController
  5. Mobile → fontSize 16 anti-zoom iOS, touch-action manipulation, enterKeyHint=send

Eliminado (basura ya inútil)

  • app/(dashboard)/* (12 pages viejas)
  • components/V/* (6 archivos)
  • components/vforge/* (15 archivos)
  • components/ui/* (45 componentes shadcn — el nuevo no los usa)
  • components/providers/*, components/web-apis/*
  • hooks/* (use-toast del stack viejo)
  • 30+ deps obsoletas del package.json (@radix-ui/*, cmdk, date-fns, embla, react-day-picker, react-hook-form, recharts, sonner, vaul, etc.)

Verificación

  • ✅ npx tsc --noEmit → 0 errores
  • ✅ npx next build → exitoso, 24 API routes + 13 pages + middleware
  • ✅ V intacta verificada (lib/forge, V_*.md, migrations, BD tables)
  • 🔜 Vercel preview se construye al pushear

Diff total

-23,050 líneas / +7,884 líneas (mucho menos código, V intacta)

Pendiente próximos PRs

  • Conectar /app/projects, /app/secrets, /app/activity, etc. a sus APIs reales (hoy muestran datos de demo del template)
  • Habilitar Clerk con keys en producción cuando estés listo (hoy sin keys, pasa directo a /app/*)
  • Decidir contenido de /app/integrations y /app/hub (si los quieres distintos del chat principal)

Generated by Claude Code

@claude
feat: integrar frontend fronted-v-saas — un solo repo, V intacta, cha…
614491b 
…t cableado

Reemplaza completo el frontend de vforge por el nuevo fronted-v-saas
(Zenith Forge design system, sereno/premium/cinemático). El backend de
V queda 100% intacto — su personalidad, tools, skills, memoria y BD
no se tocan ni un byte.

Arquitectura post-integración (un solo repo, vforge)

Frontend nuevo
- app/ root (sin src/): landing /, marketing (/pricing, /marketplace,
  /glossary), auth (/sign-in, /sign-up con Clerk opcional), /onboarding,
  /offline, dashboard /app/* (chat, hub, projects, secrets, activity,
  deployments, repovision, integrations, marketplace, settings).
- components/: workspace (ChatExperience, WorkspaceShell, etc.),
  marketing, brand (VMark, VWatermark), auth (ClerkShell), pwa, controls,
  onboarding, ThemeBootScript.
- i18n/: AppProviders + dictionaries (ES/EN).
- middleware.ts: Clerk opcional — si NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  está, protege /app y /onboarding; si no, pasa todo (fallback visual).
- tailwind.config.ts + postcss.config.js: Tailwind 3.4 con tokens
  Zenith Forge (void, ink, surface, on-surface, tint-1/2/3, violet,
  cyan, success-emerald, error-crimson).
- public/: manifest.webmanifest + sw.js + iconos.

Backend intacto
- app/api/* completo (24 endpoints): /api/forge/run, conversations,
  active-session, recap, transcribe, cost, extract-secret + projects,
  vault, github, v-* infra, admin, stats.
- lib/forge/* (system-prompt v2, tools, routing, gemini-adapter,
  v-server, agent-config, models, openrouter-catalog).
- lib/db, lib/vault, lib/github, lib/namecom, lib/vercel.
- migrations/, V_*.md, docs/.

Chat cableado a V real
- components/workspace/chat/ChatExperience.tsx reescrito: reemplaza
  setTimeout mock por fetch SSE a /api/forge/run.
- Mount: GET /api/forge/active-session?scope=general → resuelve
  sessionId canónico (mismo session_id en cualquier device).
- Rehidratación: GET /api/forge/conversations → carga historial real
  para que V no parezca "empezar de cero".
- Streaming SSE: parsea events text/error, AbortController para Stop
  button, indicador "V está pensando".
- Mobile: fontSize 16 anti-zoom iOS, touch-action manipulation,
  enterKeyHint=send, autoCapitalize sentences, inputMode text.

Stack final
- Next.js 16.2.4 (vforge)
- React 19 (vforge)
- Tailwind 3.4 (downgrade desde 4 — el design Zenith Forge usa
  config.ts; mucho menos doloroso que migrar a Tailwind 4 syntax)
- TypeScript 5.7
- Clerk 6.12 (opcional)
- Geist + Hanken Grotesk fonts
- Framer Motion 12, lucide-react 0.564

Eliminado
- app/(dashboard)/* (todas las pages viejas: hub, projects, vault,
  modules, activity, settings, v, forge, hunter, scout, vision)
- components/V/*, components/vforge/*
- components/ui/* (shadcn — no usado por el nuevo)
- components/providers/*, components/web-apis/*
- hooks/* (use-toast del stack viejo)
- app/(dashboard)/template.tsx
- Deps obsoletas del package.json: @radix-ui/*, cmdk, date-fns,
  embla, input-otp, react-day-picker, react-hook-form, react-markdown,
  react-resizable-panels, recharts, remark-gfm, sonner, vaul,
  next-themes, @hookform/resolvers, zod (devkitless used), entre otras.

Verificación
- npx tsc --noEmit → 0 errores
- npx next build → exitoso (24 API routes + 13 páginas server-rendered
  + páginas marketing prerendered + middleware)
- V sigue siendo V (BD intacta, system_prompt v2 intacto, tools intactas)

Pendiente próximos PRs (cuando uses el preview)
- Conectar páginas /app/projects, /app/secrets, etc. a sus APIs reales
  (hoy usan datos de demostración del nuevo template)
- Adaptar /app/hub si quieres que sea diferente al chat principal
- Habilitar Clerk con keys en producción cuando estés listo (hoy
  funciona sin keys, dejándote pasar directo)
- Conservar /app/integrations vacío hasta que decidas qué mostrar ahí

https://claude.ai/code/session_01YD9ckFDdBjDhYB6aaH1HR4
@vercel

vercel Bot commented May 17, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
vforge Ready Ready Preview, Comment May 17, 2026 10:51pm

Request Review

@claude
ci: add .npmrc legacy-peer-deps=true para destrabar npm ci
64a4940 
PR #54 CI fallaba en "Install dependencies" porque npm ci usa el
algoritmo estricto de peer-deps por defecto y Clerk 6.12.0 declara
peerDependency de React 18 mientras que vforge usa React 19. La
instalación local funcionaba porque usé --legacy-peer-deps explícito.

.npmrc con legacy-peer-deps=true hace que npm ci respete el flag
automáticamente en CI sin tocar el workflow file.

Lockfile re-committeado para reflejar el árbol de deps resuelto con
React 19 + Clerk 6 (compatibles en runtime, solo el peer marker es
estricto).
@claude
fix(tailwind): content paths apuntan a root (vforge no usa src/)
c25fc40 
El landing público (/, /pricing, /marketplace, etc.) aparecía sin estilos
porque tailwind.config.ts heredado del repo fronted-v-saas tenía
content: ["./src/**"] — pero al integrar a vforge yo moví todo a root
sin src/. Tailwind no encontraba ningún archivo y no procesaba clases.

Las pantallas dashboard (/app/*) sí se veían bien porque tienen estilos
heredados del WorkspaceShell, pero el landing usa componentes
components/marketing/* que dependen de clases tailwind directas
(text-violet-300, border-app, bg-tint-1, etc.).

Fix: content paths a ./app, ./components, ./i18n, ./lib (la estructura
real de vforge).

Build verificado: npx next build → exitoso, todas las páginas generan
HTML con clases procesadas.
@claude
fix(ci): agregar eslint core a devDeps (faltaba el binario)
370242b 
PR #54 lint step fallaba con exit 127 (command not found) porque al
recortar deps obsoletas removí "eslint" sin querer. Los plugins
(@typescript-eslint/*, @next/eslint-plugin-next, eslint-config-next,
eslint-plugin-react-hooks) son solo bibliotecas — necesitan eslint
instalado para resolver el binario "eslint".

Fix: agregar eslint ^9.15.0 a devDeps (compatible con plugins ya
declarados).

Verificado local: npm run lint → 0 errors, 12 warnings preexistentes
del backend.
@claude
fix(auth): middleware Clerk pass-through hasta que M11 cable user_id
89aa65c 
Preview daba 401 en /app/* porque NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
está configurado en Vercel y el middleware llamaba auth.protect() en
toda ruta /app/* y /onboarding/*. Pero el backend de vforge usa
operator_luis hardcoded — Clerk no aporta seguridad real todavía,
solo bloquea el acceso al producto.

Fix: middleware Clerk se inicializa (para que /sign-in y /sign-up
rendericen los componentes oficiales con las keys) pero deja pasar
todas las rutas sin proteger. Cuando aterrice M11 (Clerk cableado a
user_id en BD), reintroducimos auth.protect() en /app/* y queda
seguridad real.
@claude
feat: conectar /app/* a datos reales — proyectos, secrets, activity, …
f25a44e 
…deploys, repos, integraciones

Reemplaza el demo data del template (Orion Studio, Atlas Bookings, Nova
CRM, secretos genéricos, eventos fake) por fetches a los endpoints
reales del backend de V. Cada página ahora muestra tus datos.

Páginas conectadas

- /app/projects → GET /api/projects (tu catálogo real de proyectos
  con github_repo, vercel_url, dominio, categoría). Empty state si la
  BD está vacía. Botón "abrir" si hay deploy. Status real basado en
  category (produccion/activo/en_revision/etc.).

- /app/secrets → GET /api/vault/operator-secrets (vault real
  encriptado AES-256-GCM). Lock/unlock flow con operator_token en
  localStorage. Muestra keys reales con scope, source, fecha de
  rotación. Las stats arriba (rotations, total, stale) cuentan
  registros reales.

- /app/activity → NUEVO endpoint /api/forge/activity?limit=50 +
  página cableada. Lista audit_events reales con icono y color
  semántico por tipo de acción (forge.chat, project.create, vercel.*,
  vault.*, namecom.dns, github.*, etc.). Time-ago calculado en cliente.

- /app/deployments → GET /api/projects filtrado por vercel_url. Tabla
  con dominio, status (live/preview/draft según category), link
  directo a Vercel deploy.

- /app/repovision → GET /api/github/repos (tus repos vivos con
  stars, language, default_branch, last push). Cards clickables.

- /app/integrations → GET /api/v-health. Cards por cada check
  (db, vault, openrouter, etc.) con status real (ok/error) y detalle.

Endpoint nuevo
- app/api/forge/activity/route.ts: GET ?limit=N&userId=X → últimos N
  audit_events del operador, ORDER BY created_at DESC. Estable, sin
  acoplar a UI.

Sin tocar
- V (lib/forge/*, system-prompt, tools, skills, BD identity).
- Todos los demás /api/* endpoints (intactos).
- Marketing pages (/, /pricing, /marketplace, /glossary, /sign-in).
- Chat real /app/chat (ya conectado).

Verificación
- npx tsc --noEmit → 0 errores
- npx next build → exitoso (24 API routes + páginas server-rendered
  + marketing prerendered)
- Páginas siguen el design Zenith Forge (violet/cyan/emerald, fonts
  Geist + Hanken Grotesk + JetBrains Mono, label-caps, chip, etc.)

https://claude.ai/code/session_01YD9ckFDdBjDhYB6aaH1HR4
@turbillon50
turbillon50 marked this pull request as ready for review May 17, 2026 22:59
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented May 17, 2026

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@turbillon50
turbillon50 merged commit fa38a47 into main May 17, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@turbillon50 @claude