oficina-opencode 3.1.0 → 3.1.1

package/dashboard/factory.html

@@ -0,0 +1,350 @@
+<!doctype html>
+<html lang="es" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Factory · Oficina de Agents</title>
+    <meta
+      name="description"
+      content="Panel de la Factory: detecta huecos de cobertura del catálogo, fabrica agentes nuevos y muestra el match en la próxima card."
+    />
+    <link rel="stylesheet" href="assets/tokens.css" />
+    <link rel="stylesheet" href="assets/factory.css" />
+  </head>
+  <body>
+    <a class="skip-link" href="#factory-panel">Saltar a la línea de fabricación</a>
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+              <rect x="4" y="3.5" width="16" height="3.5" rx="1" />
+              <path d="M12 7v4" />
+              <rect x="7" y="11" width="10" height="4.5" rx="1" />
+              <path d="M9 20h10" stroke-dasharray="2 2" />
+              <path d="M4 20h2" />
+            </svg>
+          </span>
+          <div class="brand-text">
+            <h1 class="brand-title">Factory</h1>
+            <p class="brand-sub">
+              oficina · <b>agent foundry</b> · card T-08
+            </p>
+          </div>
+        </div>
+
+        <div class="topbar-spacer"></div>
+
+        <div class="status-strip" aria-label="Estado de la fuente de datos">
+          <span class="chip" id="source-chip" data-live="none" title="fuente de datos">
+            <span class="dot" aria-hidden="true"></span>
+            <span id="source-text">conectando</span>
+          </span>
+          <span class="chip" id="counts-chip">— cards</span>
+          <span class="chip" id="poll-chip">poll —</span>
+          <span class="chip" id="clock-chip">sync —</span>
+        </div>
+
+        <div class="controls">
+          <button type="button" class="btn btn-primary" id="btn-fabricate">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <path d="M13 2 4.5 13.5H11L9.5 22 19 9.5h-6z" />
+            </svg>
+            <span class="btn-label">Fabricar agente</span>
+          </button>
+          <button type="button" class="btn" id="btn-pause" aria-pressed="false">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <path d="M9 5v14M15 5v14" />
+            </svg>
+            <span class="btn-label">Pausar</span>
+          </button>
+          <button type="button" class="btn btn-ghost" id="btn-resync" title="Releer .oficina/ (R)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <path d="M20 11a8 8 0 1 0-2.3 5.7" />
+              <path d="M20 4v7h-7" />
+            </svg>
+            <span class="btn-label">Sync</span>
+          </button>
+          <button type="button" class="btn btn-ghost" id="btn-theme" aria-pressed="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19" />
+            </svg>
+            <span class="btn-label">Claro</span>
+          </button>
+          <details class="keys">
+            <summary aria-label="Atajos de teclado">?</summary>
+            <div class="keys-panel">
+              <dl>
+                <dt>F</dt><dd>Fabricar agente</dd>
+                <dt>Espacio</dt><dd>Pausar / reanudar polling</dd>
+                <dt>R</dt><dd>Releer .oficina/</dd>
+                <dt>Esc</dt><dd>Cerrar ficha o ayuda</dd>
+                <dt>?</dt><dd>Este panel</dd>
+              </dl>
+            </div>
+          </details>
+        </div>
+      </header>
+
+      <main class="workspace">
+        <!-- ================= 01 · detection ================= -->
+        <aside class="panel" aria-labelledby="detect-title">
+          <div class="panel-head">
+            <span class="panel-eyebrow">01 · detección</span>
+            <h2 class="panel-title" id="detect-title">Huecos de cobertura</h2>
+            <span class="panel-head-right" id="gap-count">— gaps</span>
+          </div>
+
+          <div class="coverage">
+            <div class="coverage-top">
+              <div class="coverage-value" id="coverage-value">—<small>%</small></div>
+              <div class="coverage-label">
+                cobertura del roster<br />
+                <span id="coverage-note">leyendo .oficina/…</span>
+              </div>
+            </div>
+            <div
+              class="meter"
+              role="progressbar"
+              aria-label="Cobertura del catálogo sobre las cards abiertas"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow="0"
+            >
+              <span class="meter-fill" id="coverage-fill" data-tone="bad"></span>
+              <span class="meter-threshold" id="coverage-threshold" data-label="umbral 60%"></span>
+            </div>
+            <div class="meter-scale" aria-hidden="true">
+              <span style="left: 0">0</span>
+              <span style="left: 30%">30</span>
+              <span style="left: 60%">60</span>
+              <span style="left: 100%">100</span>
+            </div>
+          </div>
+
+          <div class="panel-body" style="padding: 0">
+            <div class="gap-list" id="gap-list" role="group" aria-label="Cards bajo el umbral de cobertura">
+              <div class="empty">Leyendo cards…</div>
+            </div>
+          </div>
+        </aside>
+
+        <!-- ================= 02 · factory line ================= -->
+        <section class="panel" id="factory-panel" data-scene="idle" aria-labelledby="factory-title">
+          <div class="panel-head">
+            <span class="panel-eyebrow">02 · línea de fabricación</span>
+            <h2 class="panel-title" id="factory-title">Prensa de fichas</h2>
+            <span class="panel-head-right" id="fabricate-hint">esperando datos…</span>
+          </div>
+
+          <div class="stage">
+            <div class="scene">
+              <div class="scene-readout" aria-hidden="true">
+                <span>foundry · línea 01</span>
+                <span>card → agente</span>
+              </div>
+              <svg viewBox="0 0 640 252" role="img" aria-labelledby="scene-title scene-desc">
+                <title id="scene-title">Prensa de la factory</title>
+                <desc id="scene-desc">
+                  Una card entra a la prensa, se escribe una ficha markdown y el agente resultante sale hacia el catálogo.
+                </desc>
+                <defs>
+                  <linearGradient id="g-ember" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0" stop-color="oklch(0.88 0.13 78)" />
+                    <stop offset="1" stop-color="oklch(0.66 0.19 45)" />
+                  </linearGradient>
+                  <linearGradient id="g-metal" x1="0" y1="0" x2="1" y2="0">
+                    <stop offset="0" stop-color="oklch(0.36 0.015 62)" />
+                    <stop offset="0.5" stop-color="oklch(0.52 0.015 62)" />
+                    <stop offset="1" stop-color="oklch(0.33 0.015 62)" />
+                  </linearGradient>
+                  <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+                    <feGaussianBlur stdDeviation="3.2" result="b" />
+                    <feMerge>
+                      <feMergeNode in="b" />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                </defs>
+
+                <!-- floor -->
+                <line x1="24" y1="228" x2="616" y2="228" stroke="oklch(0.34 0.014 62)" stroke-width="1" />
+                <line x1="24" y1="222" x2="616" y2="222" stroke="oklch(0.26 0.014 62)" stroke-width="1" />
+
+                <!-- press frame -->
+                <rect x="196" y="40" width="9" height="176" rx="2" fill="url(#g-metal)" />
+                <rect x="435" y="40" width="9" height="176" rx="2" fill="url(#g-metal)" />
+                <rect x="188" y="40" width="264" height="11" rx="3" fill="url(#g-metal)" />
+                <circle cx="205" cy="46" r="2" fill="oklch(0.2 0.01 62)" />
+                <circle cx="435" cy="46" r="2" fill="oklch(0.2 0.01 62)" />
+
+                <!-- head -->
+                <g class="press-head">
+                  <rect x="314" y="38" width="12" height="26" fill="oklch(0.44 0.014 62)" />
+                  <rect x="256" y="63" width="128" height="36" rx="4" fill="url(#g-ember)" filter="url(#soft-glow)" />
+                  <rect x="256" y="63" width="128" height="9" rx="3" fill="oklch(1 0 0 / 0.22)" />
+                  <rect x="262" y="96" width="116" height="5" rx="2" fill="oklch(0.45 0.09 50)" />
+                  <text x="320" y="87" text-anchor="middle" class="tag" fill="oklch(0.24 0.04 50)" style="font-weight: 700; letter-spacing: 0.2em">F</text>
+                </g>
+
+                <!-- sparks -->
+                <g class="sparks" fill="oklch(0.9 0.14 82)" filter="url(#soft-glow)">
+                  <circle class="spark" cx="296" cy="128" r="2.6" />
+                  <circle class="spark" cx="312" cy="134" r="2" />
+                  <circle class="spark" cx="330" cy="127" r="2.4" />
+                  <circle class="spark" cx="344" cy="136" r="1.8" />
+                  <circle class="spark" cx="284" cy="138" r="1.6" />
+                  <circle class="spark" cx="320" cy="120" r="1.4" />
+                  <circle class="spark" cx="352" cy="126" r="1.5" />
+                  <circle class="spark" cx="274" cy="128" r="1.3" />
+                </g>
+
+                <!-- mold: the card being pressed -->
+                <g class="mold">
+                  <rect x="246" y="150" width="128" height="56" rx="5" fill="oklch(0.245 0.016 62)" stroke="oklch(0.4 0.016 62)" />
+                  <rect x="246" y="150" width="4" height="56" rx="2" fill="oklch(0.79 0.16 62)" />
+                  <text x="260" y="166" class="label">card</text>
+                  <text x="260" y="192" class="tag" id="scene-mold-label">T-08</text>
+                </g>
+
+                <!-- conveyor -->
+                <line class="belt-dashes" x1="36" y1="212" x2="604" y2="212" stroke="oklch(0.46 0.014 62)" stroke-width="2" />
+                <line x1="36" y1="218" x2="604" y2="218" stroke="oklch(0.3 0.014 62)" stroke-width="1" />
+
+                <!-- output agent chip -->
+                <g class="out-chip">
+                  <rect x="452" y="150" width="128" height="56" rx="5" fill="oklch(0.79 0.16 62 / 0.12)" stroke="oklch(0.79 0.16 62 / 0.6)" />
+                  <text x="466" y="166" class="label" fill="oklch(0.82 0.12 70)">agente</text>
+                  <text x="466" y="190" class="tag" id="scene-out-label">motion</text>
+                </g>
+
+                <!-- catalog bin -->
+                <g>
+                  <rect class="bin-pulse" x="586" y="144" width="34" height="72" rx="4" fill="oklch(0.79 0.16 62)" opacity="0" />
+                  <rect x="586" y="152" width="34" height="64" rx="4" fill="oklch(0.235 0.016 62)" stroke="oklch(0.36 0.015 62)" />
+                  <line x1="594" y1="164" x2="612" y2="164" stroke="oklch(0.44 0.014 62)" />
+                  <line x1="594" y1="174" x2="612" y2="174" stroke="oklch(0.44 0.014 62)" />
+                  <line x1="594" y1="184" x2="606" y2="184" stroke="oklch(0.44 0.014 62)" />
+                  <text x="603" y="232" text-anchor="middle" class="label">catálogo</text>
+                </g>
+
+                <!-- agent name under the press -->
+                <text x="320" y="243" text-anchor="middle" class="label" id="scene-agent">sin huecos</text>
+              </svg>
+            </div>
+          </div>
+
+          <div class="steps-wrap">
+            <ol class="steps" id="steps">
+              <li class="step" data-status="pending">
+                <span class="step-icon" aria-hidden="true">01</span>
+                <span class="step-label">Detectar hueco de cobertura<span class="step-meta"></span></span>
+                <span class="step-end">gap</span>
+              </li>
+              <li class="step" data-status="pending">
+                <span class="step-icon" aria-hidden="true">02</span>
+                <span class="step-label">Sintetizar rol y capabilities<span class="step-meta"></span></span>
+                <span class="step-end">rol</span>
+              </li>
+              <li class="step" data-status="pending">
+                <span class="step-icon" aria-hidden="true">03</span>
+                <span class="step-label">Escribir la ficha .md<span class="step-meta"></span></span>
+                <span class="step-end">ficha</span>
+              </li>
+              <li class="step" data-status="pending">
+                <span class="step-icon" aria-hidden="true">04</span>
+                <span class="step-label">Registrar en el catálogo dinámico<span class="step-meta"></span></span>
+                <span class="step-end">roster</span>
+              </li>
+              <li class="step" data-status="pending">
+                <span class="step-icon" aria-hidden="true">05</span>
+                <span class="step-label">Match en la próxima card<span class="step-meta"></span></span>
+                <span class="step-end">match</span>
+              </li>
+            </ol>
+          </div>
+
+          <div class="term-wrap">
+            <div class="term">
+              <div class="term-bar">
+                <span class="term-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                <span class="term-path"><b id="term-path-text">sin ficha en fabricación</b></span>
+                <span class="term-tag" id="term-tag">idle</span>
+              </div>
+              <pre class="term-body" id="term-body" aria-live="polite" aria-label="Ficha markdown en escritura"><span class="term-placeholder">La ficha .md se escribe acá cuando la factory sintetiza un agente.</span></pre>
+            </div>
+          </div>
+        </section>
+
+        <!-- ================= 03 · catalog ================= -->
+        <aside class="panel" aria-labelledby="roster-title">
+          <div class="panel-head">
+            <span class="panel-eyebrow">03 · catálogo</span>
+            <h2 class="panel-title" id="roster-title">Roster dinámico</h2>
+            <span class="panel-head-right" id="roster-count">—</span>
+          </div>
+          <div class="panel-body" style="padding-top: 0; padding-bottom: 0">
+            <div class="roster-grid" id="roster-grid" role="group" aria-label="Agentes del catálogo">
+              <div class="empty">Leyendo roster…</div>
+            </div>
+          </div>
+
+          <div class="match">
+            <div class="match-head">
+              <h3>proyección de match</h3>
+              <span class="panel-head-right" id="match-count">—</span>
+            </div>
+            <div id="match-body">
+              <div class="empty">Sin proyección todavía.</div>
+            </div>
+          </div>
+        </aside>
+      </main>
+
+      <footer class="footbar">
+        <span>read-only · proyección local, no escribe en disco</span>
+        <span class="sep" aria-hidden="true"></span>
+        <span>umbral <b>60%</b> · <span id="gap-count-foot">—</span></span>
+        <span class="sep" aria-hidden="true"></span>
+        <a href="../.oficina/roster.json">roster.json</a>
+        <a href="../.opencode/agents/">.opencode/agents/</a>
+        <span class="legend" aria-hidden="true">
+          <i data-tone="bad"></i> bajo umbral
+          <i data-tone="ok"></i> cubierto
+          <i data-tone="ember"></i> fabricado
+        </span>
+      </footer>
+    </div>
+
+    <div class="toasts" id="toasts" role="status" aria-live="polite" aria-atomic="false"></div>
+    <div class="visually-hidden" id="live-region" role="status" aria-live="polite" aria-atomic="true"></div>
+
+    <dialog class="modal" id="agent-dialog" aria-labelledby="dialog-title">
+      <div class="modal-head">
+        <span class="modal-avatar" id="dialog-avatar" aria-hidden="true">?</span>
+        <div>
+          <h2 class="modal-title" id="dialog-title">Ficha del agente</h2>
+          <p class="modal-sub" id="dialog-sub">—</p>
+        </div>
+        <button type="button" class="modal-close" id="btn-dialog-close" aria-label="Cerrar ficha">×</button>
+      </div>
+      <div class="modal-meta" id="dialog-meta"></div>
+      <div class="modal-body md" id="dialog-body"></div>
+      <div class="modal-foot">
+        <button type="button" class="btn" id="btn-copy">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <rect x="9" y="9" width="11" height="11" rx="2" />
+            <path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4" />
+          </svg>
+          <span class="btn-label">Copiar ficha</span>
+        </button>
+        <span class="note" id="dialog-origin"></span>
+      </div>
+    </dialog>
+
+    <script src="factory/factory-core.js"></script>
+    <script src="factory/snapshot.js"></script>
+    <script src="factory/factory-app.js"></script>
+  </body>
+</html>