juan/forja
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

the forgeeeee

Browse Source
This commit is contained in:
juan
2026-05-27 21:28:10 +02:00
parent 34b11dfc66
commit 7d0f10d21f
14 changed files with 605 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/forja-progress.html
+66 -184
View File
@@ -3,26 +3,26 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forja — Seguimiento de Progreso</title>
<title>Forja — Estado Actual</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600&amp;display=swap');
:root {
--tokyo-bg: #1a1b26;
--tokyo-surface: #24283b;
--tokyo-border: #414868;
--tokyo-purple: #bb9af7;
--tokyo-blue: #7aa2f7;
--tokyo-yellow: #e0af68;
--tokyo-text: #c0caf5;
--tokyo-muted: #565f89;
--forge-bg: #1c1c1c;
--forge-surface: #151515;
--forge-surface2: #242424;
--forge-iron: #333333;
--forge-ember: #f97316;
--forge-gold: #fcd34d;
--forge-text: #e7e5e4;
--forge-muted: #78716c;
}
body {
font-family: 'Inter', system_ui, sans-serif;
background-color: var(--tokyo-bg);
color: var(--tokyo-text);
background-color: var(--forge-bg);
color: var(--forge-text);
}
.font-display {
@@ -30,211 +30,93 @@
font-weight: 600;
}
.tokyo-card {
background-color: var(--tokyo-surface);
border: 1px solid var(--tokyo-border);
.station-card {
background-color: var(--forge-surface);
border: 2px solid var(--forge-iron);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-header {
font-family: 'Space Grotesk', 'Inter', sans-serif;
letter-spacing: -0.025em;
}
.progress-bar {
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.station {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.milestone {
position: relative;
}
.milestone::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: -24px;
width: 2px;
background: var(--tokyo-border);
}
.milestone:last-child::before {
display: none;
}
</style>
</head>
<body class="min-h-screen">
<div class="max-w-5xl mx-auto px-6 py-12">
<div class="max-w-4xl mx-auto px-6 py-12">
<!-- Header -->
<div class="flex items-center gap-4 mb-10">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#bb9af7] to-[#7aa2f7] flex items-center justify-center">
<span class="text-3xl">🔨</span>
</div>
<div class="flex items-center gap-3 mb-8">
<span class="text-4xl">⚒︎</span>
<div>
<h1 class="font-display text-5xl font-semibold tracking-tighter">Forja</h1>
<p class="text-[#565f89] text-xl">Seguimiento de Progreso</p>
<h1 class="text-4xl font-semibold tracking-tighter">Forja</h1>
<p class="text-forge-muted">Estado actual del proyecto (Gamificado)</p>
</div>
</div>
<!-- Current Vision -->
<div class="tokyo-card rounded-3xl p-8 mb-10">
<div class="flex items-center gap-3 mb-4">
<div class="px-3 py-1 bg-[#bb9af7]/10 text-[#bb9af7] rounded-full text-sm font-medium">Visión Actual</div>
<div class="mb-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-forge-surface border border-forge-iron text-sm">
<span class="w-2 h-2 bg-forge-ember rounded-full animate-pulse"></span>
<span class="font-medium">Versión actual: 3 estaciones</span>
</div>
<h2 class="text-3xl font-semibold tracking-tight mb-3">Cadena de Montaje (Assembly Line)</h2>
<p class="text-[#c0caf5]/80 text-lg max-w-3xl">
La interfaz se ha transformado en una <strong>vista única de fábrica</strong>.
El objetivo es que el usuario entienda de un vistazo cómo se "forja" un agente,
mostrando solo los bloques que generan <strong>inputs configurables</strong> o
<strong>outputs significativos</strong>.
</p>
</div>
<!-- Timeline -->
<!-- Resumen del estado actual -->
<div class="mb-12">
<h3 class="font-display text-2xl font-semibold tracking-tight mb-6">Evolución Principal</h3>
<h2 class="text-2xl font-semibold tracking-tight mb-4 section-header">Resumen del Estado Actual</h2>
<div class="space-y-6">
<div class="prose prose-invert max-w-none text-forge-muted">
<p class="text-lg">
El proyecto ha sido simplificado a <strong>3 estaciones principales</strong>, siguiendo una estructura clara y lógica:
</p>
<!-- Milestone 1 -->
<div class="milestone flex gap-4">
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">1</div>
<div class="tokyo-card rounded-2xl p-5 flex-1">
<div class="flex justify-between items-start">
<div>
<div class="font-semibold">Eliminación de la Navbar</div>
<div class="text-sm text-[#565f89] mt-1">Se eliminó completamente la navegación superior tradicional.</div>
</div>
<div class="text-xs text-[#565f89] font-mono">Paso 1</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
<!-- Station 1 -->
<div class="station-card rounded-2xl p-5">
<div class="text-forge-ember text-xs tracking-widest font-semibold mb-1">STATION I</div>
<div class="text-xl font-semibold mb-2">The Hearth</div>
<div class="text-sm">Definición de agentes (Arsenal)</div>
</div>
</div>
<!-- Milestone 2 -->
<div class="milestone flex gap-4">
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">2</div>
<div class="tokyo-card rounded-2xl p-5 flex-1">
<div class="font-semibold">Paso a Vista Única de Fábrica</div>
<div class="text-sm text-[#565f89] mt-1">Toda la experiencia se concentra en una "cadena de montaje" visual en lugar de páginas separadas.</div>
</div>
</div>
<!-- Milestone 3 -->
<div class="milestone flex gap-4">
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">3</div>
<div class="tokyo-card rounded-2xl p-5 flex-1">
<div class="font-semibold">Eliminación de las Cajas de Fases</div>
<div class="text-sm text-[#565f89] mt-1">Se quitaron los contenedores grandes que englobaban cada fase. Ahora solo quedan los encabezados de fase + las estaciones sueltas.</div>
</div>
</div>
<!-- Milestone 4 -->
<div class="milestone flex gap-4">
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">4</div>
<div class="tokyo-card rounded-2xl p-5 flex-1">
<div class="font-semibold">Unificación de Fondo + Colores Llamativos en Texto</div>
<div class="text-sm text-[#565f89] mt-1">Todas las cajas de la línea de ensamblado usan el mismo gris. Los títulos tienen colores muy saturados y distintos (cyan, púrpura, amarillo, verde, rojo).</div>
</div>
</div>
<!-- Milestone 5 -->
<div class="milestone flex gap-4">
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">5</div>
<div class="tokyo-card rounded-2xl p-5 flex-1">
<div class="font-semibold">Limpieza de Estaciones sin Valor de I/O</div>
<div class="text-sm text-[#565f89] mt-1">
Se eliminaron los bloques que no generan inputs configurables ni outputs significativos:
<span class="font-medium text-[#e0af68]">Input Intake</span> y
<span class="font-medium text-[#e0af68]">Audit &amp; Logging</span>.
</div>
</div>
</div>
</div>
</div>
<!-- Current Assembly Line -->
<div class="mb-12">
<h3 class="font-display text-2xl font-semibold tracking-tight mb-6">Estado Actual de la Cadena de Montaje</h3>
<div class="tokyo-card rounded-3xl p-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Phase 1 -->
<div>
<div class="text-[#bb9af7] text-xs tracking-[1.5px] font-semibold mb-2">FASE 1 — PREPARACIÓN</div>
<div class="space-y-2">
<div class="bg-[#24283b] border border-[#bb9af7]/40 rounded-xl px-4 py-3 text-sm">1. Agent Definition</div>
<div class="bg-[#24283b] border border-[#bb9af7]/40 rounded-xl px-4 py-3 text-sm">2. Policy Application</div>
</div>
<!-- Station 2 -->
<div class="station-card rounded-2xl p-5">
<div class="text-forge-ember text-xs tracking-widest font-semibold mb-1">STATION II</div>
<div class="text-xl font-semibold mb-2">The Crucible</div>
<div class="text-sm">Pruebas, guardrails y Human-in-the-Loop (Agrupación de Anvil + Judgment + Armory)</div>
</div>
<!-- Phase 2 -->
<div>
<div class="text-[#7aa2f7] text-xs tracking-[1.5px] font-semibold mb-2">FASE 2 — LÍNEA DE ENSAMBLADO</div>
<div class="space-y-2">
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
<span class="text-[#bb9af7]">3.</span> Input Guardrails
</div>
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
<span class="text-[#e0af68]">4.</span> LLM Reasoning
</div>
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
<span class="text-[#9ece6a]">5.</span> Output Guardrails
</div>
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
<span class="text-[#f7768e]">6.</span> Action Proposal
</div>
</div>
<!-- Station 3 -->
<div class="station-card rounded-2xl p-5">
<div class="text-forge-ember text-xs tracking-widest font-semibold mb-1">STATION III</div>
<div class="text-xl font-semibold mb-2">The Battle</div>
<div class="text-sm">Despliegue de agentes forjados (Azure, AWS, GCP, On-prem)</div>
</div>
<!-- Phase 3 -->
<div>
<div class="text-[#e0af68] text-xs tracking-[1.5px] font-semibold mb-2">FASE 3 — SUPERVISIÓN HUMANA</div>
<div class="space-y-2">
<div class="bg-[#24283b] border border-[#e0af68]/40 rounded-xl px-4 py-3 text-sm">7. Human Approval Gate</div>
<div class="bg-[#24283b] border border-[#9ece6a]/40 rounded-xl px-4 py-3 text-sm">8. Finalization</div>
</div>
</div>
</div>
<h3 class="text-xl font-semibold tracking-tight mt-8 mb-3">Cambios principales realizados:</h3>
<div class="mt-6 pt-6 border-t border-[#414868] text-xs text-[#565f89]">
Total de estaciones activas: <span class="font-semibold text-[#c0caf5]">8</span>
(todas producen inputs configurables o outputs significativos)
</div>
</div>
</div>
<!-- Principles -->
<div class="grid md:grid-cols-2 gap-6">
<div class="tokyo-card rounded-3xl p-6">
<div class="text-sm font-medium text-[#bb9af7] mb-2">PRINCIPIOS APLICADOS</div>
<ul class="space-y-2 text-sm">
<li class="flex gap-2">• <span>Strict adherence to <strong>karpathy.md</strong> guidelines</span></li>
<li class="flex gap-2">• <span>Simplicity First</span></li>
<li class="flex gap-2">• <span>Surgical changes (solo tocar lo necesario)</span></li>
<li class="flex gap-2">• <span>Eliminar lo que no aporta valor al flujo visual</span></li>
<li>✓ Reducción de 5 estaciones a <strong>3 estaciones</strong> bien definidas.</li>
<li>✓ Eliminación de etiquetas redundantes ("STATION I", "STATION II"...).</li>
<li>✓ Títulos de estaciones ahora en naranja (ember) y tamaño grande.</li>
<li>✓ Texto guía superior en blanco y tamaño grande (text-3xl).</li>
<li>✓ Recuperación del <strong>Forge Creed</strong> original como elemento inspirador.</li>
<li>✓ Eliminación de los enlaces "Go to the..." de las tarjetas para mayor limpieza.</li>
<li>✓ Botón flotante de Tutorial simplificado y centrado.</li>
<li>✓ Navbar con slogan: <strong>"Fire • Hammer • Judgment"</strong></li>
<li>✓ The Armory ya no es una estación principal (se integra conceptualmente dentro de The Crucible).</li>
</ul>
</div>
<div class="tokyo-card rounded-3xl p-6">
<div class="text-sm font-medium text-[#bb9af7] mb-2">PRÓXIMOS PASOS (SUGERIDOS)</div>
<div class="text-sm text-[#565f89]">
<p class="mb-3">Este documento puede servir como registro vivo del proyecto.</p>
<p>Añade aquí nuevas decisiones, experimentos visuales o cambios de rumbo cuando ocurran.</p>
</div>
</div>
</div>
<div class="mt-12 text-center text-xs text-[#565f89]">
Documento generado para seguimiento del proyecto Forja •
<span class="font-mono">Tokyo Night Theme</span>
<div class="border-t border-forge-iron pt-8 text-sm text-forge-muted">
<p><strong>Próximos pasos sugeridos:</strong></p>
<ul class="mt-2 space-y-1 text-xs">
<li>• Mejorar la página de The Battle (/deploy) con más contenido real.</li>
<li>• Conectar visualmente The Crucible con las páginas de ejecución y aprobaciones.</li>
<li>• Añadir feedback visual de "éxito" cuando un agente se forja correctamente.</li>
<li>• Posiblemente añadir un estado de "agentes desplegados" en The Battle.</li>
</ul>
</div>
</div>