oficina-opencode 3.0.5 → 3.1.1

package/dashboard/probe.mjs

@@ -0,0 +1,35 @@
+/* Sonda 2: .app y sus hijos */
+import { chromium } from "playwright";
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 390, height: 844 } });
+await page.goto("http://localhost:7333", { waitUntil: "networkidle" });
+await page.waitForTimeout(1500);
+
+const probe = await page.evaluate(() => {
+  const info = (el) => {
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    return {
+      sel: el.tagName.toLowerCase() + (el.id ? "#" + el.id : "") + (el.className && typeof el.className === "string" ? "." + el.className.split(" ")[0] : ""),
+      w: Math.round(r.width),
+      scrollW: el.scrollWidth,
+      minW: cs.minWidth,
+      display: cs.display,
+      overflowX: cs.overflowX,
+    };
+  };
+  const app = document.querySelector(".app");
+  const out = { app: info(app), children: [...app.children].map(info) };
+  const board = document.querySelector(".board");
+  const bsec = document.querySelector(".board-section");
+  out.board = board ? info(board) : null;
+  out.boardCols = board ? [...board.children].map(info) : null;
+  out.boardSection = bsec ? info(bsec) : null;
+  const main = document.querySelector(".main");
+  out.main = main ? info(main) : null;
+  out.mainPanels = main ? [...main.children].map(info) : null;
+  return out;
+});
+console.log(JSON.stringify(probe, null, 2));
+await browser.close();

package/dashboard/scripts/serve.mjs

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+/*
+ * serve.mjs — servidor estatico + endpoint de snapshot para el dashboard.
+ *
+ *   node dashboard/scripts/serve.mjs [--port 7331] [--host 127.0.0.1]
+ *
+ * Por que existe: los navegadores bloquean fetch() sobre file:// (CORS), asi que
+ * el panel necesita http para leer .oficina/ en vivo. Este server tiene cero
+ * dependencias, es read-only y escucha en loopback por defecto.
+ *
+ * Rutas:
+ *   GET /api/snapshot   -> { state, roster, messages[], artifacts }
+ *   GET /dashboard/...  -> archivos del dashboard
+ *   GET /.oficina/...   -> artifacts (handoff.md, evidence.md) servidos como texto
+ */
+import http from "node:http";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { buildSnapshot } from "./snapshot-data.mjs";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = path.resolve(HERE, "..", "..");
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".md": "text/markdown; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".ico": "image/x-icon",
+  ".txt": "text/plain; charset=utf-8",
+};
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(`--${name}`);
+  if (i === -1) return fallback;
+  const v = process.argv[i + 1];
+  return v && !v.startsWith("--") ? v : fallback;
+}
+
+const PORT = Number(arg("port", process.env.PORT || 7331));
+const HOST = String(arg("host", "127.0.0.1"));
+
+/** Resuelve dentro de la raiz del repo; cualquier escape devuelve null. */
+function safeJoin(root, urlPath) {
+  const decoded = decodeURIComponent(urlPath.split("?")[0]);
+  const resolved = path.resolve(root, "." + decoded);
+  const rel = path.relative(root, resolved);
+  if (rel.startsWith("..") || path.isAbsolute(rel)) return null;
+  return resolved;
+}
+
+async function serveFile(res, file) {
+  try {
+    const stat = await fs.stat(file);
+    if (stat.isDirectory()) return serveFile(res, path.join(file, "index.html"));
+    const body = await fs.readFile(file);
+    res.writeHead(200, {
+      "content-type": MIME[path.extname(file).toLowerCase()] || "application/octet-stream",
+      "cache-control": "no-store",
+      "content-length": body.length,
+    });
+    res.end(body);
+  } catch {
+    res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
+    res.end("404 " + path.relative(REPO_ROOT, file));
+  }
+}
+
+const server = http.createServer(async (req, res) => {
+  const url = req.url || "/";
+  const pathname = url.split("?")[0];
+
+  try {
+    if (pathname === "/api/snapshot") {
+      const snap = await buildSnapshot(REPO_ROOT);
+      const body = JSON.stringify(snap);
+      res.writeHead(200, {
+        "content-type": "application/json; charset=utf-8",
+        "cache-control": "no-store",
+        "content-length": Buffer.byteLength(body),
+      });
+      res.end(body);
+      return;
+    }
+
+    if (pathname === "/" || pathname === "") {
+      res.writeHead(302, { location: "/dashboard/leadership.html" });
+      res.end();
+      return;
+    }
+
+    const allowed = ["/dashboard/", "/.oficina/"];
+    if (!allowed.some((p) => pathname.startsWith(p))) {
+      res.writeHead(403, { "content-type": "text/plain; charset=utf-8" });
+      res.end("403 solo /dashboard y /.oficina");
+      return;
+    }
+
+    const file = safeJoin(REPO_ROOT, pathname);
+    if (!file) {
+      res.writeHead(400, { "content-type": "text/plain; charset=utf-8" });
+      res.end("400 ruta invalida");
+      return;
+    }
+    await serveFile(res, file);
+  } catch (err) {
+    res.writeHead(500, { "content-type": "text/plain; charset=utf-8" });
+    res.end("500 " + (err && err.message ? err.message : "error"));
+  }
+});
+
+server.listen(PORT, HOST, () => {
+  const base = `http://${HOST}:${PORT}`;
+  console.log(`[dashboard] ${base}/dashboard/leadership.html`);
+  console.log(`[dashboard] snapshot: ${base}/api/snapshot`);
+  console.log(`[dashboard] raiz: ${REPO_ROOT}`);
+});

package/dashboard/scripts/snapshot-data.mjs

@@ -0,0 +1,93 @@
+/*
+ * snapshot-data.mjs — arma el snapshot que consumen los paneles del dashboard.
+ *
+ * Un unico objeto { state, roster, messages[], artifacts } evita que el panel
+ * lea state.json y el bus en momentos distintos y muestre una foto rasgada.
+ *
+ * Lo usan:
+ *   - dashboard/scripts/serve.mjs    -> GET /api/snapshot (live)
+ *   - dashboard/scripts/snapshot.mjs -> dashboard/data/snapshot.json (file://)
+ */
+import fs from "node:fs/promises";
+import path from "node:path";
+
+/** Canales de coordinadores + peer. Una carpeta ausente no es un error. */
+export const CHANNELS = ["coord-command", "coord-arch", "coord-flow", "peer"];
+
+const MAX_MESSAGES = 500;
+
+async function readJson(file) {
+  try {
+    const raw = await fs.readFile(file, "utf8");
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+async function listDir(dir) {
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    return entries;
+  } catch {
+    return [];
+  }
+}
+
+/** Lee todos los mensajes del bus, ordenados por canal y nombre (seq). */
+export async function readBus(oficinaDir) {
+  const messages = [];
+  for (const channel of CHANNELS) {
+    const dir = path.join(oficinaDir, "bus", channel);
+    const files = (await listDir(dir))
+      .filter((e) => e.isFile() && e.name.endsWith(".json"))
+      .map((e) => e.name)
+      .sort();
+    for (const name of files) {
+      const msg = await readJson(path.join(dir, name));
+      if (!msg || typeof msg !== "object" || !msg.id) continue;
+      messages.push({ channel, file: name, message: msg });
+    }
+  }
+  // Los paneles muestran lo mas reciente: recortar sin perder el orden original.
+  const sorted = messages
+    .map((m) => ({ m, t: Date.parse(m.message.createdAt) || 0 }))
+    .sort((a, b) => a.t - b.t)
+    .map((x) => x.m);
+  return sorted.length > MAX_MESSAGES ? sorted.slice(sorted.length - MAX_MESSAGES) : sorted;
+}
+
+/** Lista de artifacts por card: { "T-06": { dir, files[] } }. */
+export async function readArtifacts(oficinaDir) {
+  const root = path.join(oficinaDir, "artifacts");
+  const out = {};
+  const cards = (await listDir(root)).filter((e) => e.isDirectory());
+  for (const card of cards) {
+    const dir = path.join(root, card.name);
+    const files = (await listDir(dir)).filter((e) => e.isFile()).map((e) => e.name).sort();
+    out[card.name] = { dir: `../.oficina/artifacts/${card.name}/`, files };
+  }
+  return out;
+}
+
+/**
+ * @param {string} repoRoot  raiz del repo (contiene .oficina/)
+ * @returns {Promise<{generatedAt:string, source:string, state:object|null, roster:object|null, messages:object[], artifacts:object}>}
+ */
+export async function buildSnapshot(repoRoot) {
+  const oficinaDir = path.join(repoRoot, ".oficina");
+  const [state, roster, messages, artifacts] = await Promise.all([
+    readJson(path.join(oficinaDir, "state.json")),
+    readJson(path.join(oficinaDir, "roster.json")),
+    readBus(oficinaDir),
+    readArtifacts(oficinaDir),
+  ]);
+  return {
+    generatedAt: new Date().toISOString(),
+    source: "live",
+    state,
+    roster: roster || { agents: {} },
+    messages,
+    artifacts,
+  };
+}

package/dashboard/scripts/snapshot.mjs

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+/*
+ * snapshot.mjs — congela un snapshot de .oficina/ en dashboard/data/snapshot.json.
+ *
+ *   node dashboard/scripts/snapshot.mjs
+ *
+ * Sirve para abrir leadership.html con doble click (file://), donde el
+ * navegador no deja hacer fetch() de ../.oficina/state.json. El snapshot es
+ * una foto: para datos en vivo usar dashboard/scripts/serve.mjs.
+ */
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { buildSnapshot } from "./snapshot-data.mjs";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = path.resolve(HERE, "..", "..");
+const OUT = path.resolve(HERE, "..", "data", "snapshot.json");
+
+const snap = await buildSnapshot(REPO_ROOT);
+await fs.mkdir(path.dirname(OUT), { recursive: true });
+await fs.writeFile(OUT, JSON.stringify(snap, null, 2), "utf8");
+
+const cards = snap.state && snap.state.cards ? Object.keys(snap.state.cards).length : 0;
+const decisions = snap.state && Array.isArray(snap.state.decisions) ? snap.state.decisions.length : 0;
+console.log(
+  `[snapshot] ${path.relative(REPO_ROOT, OUT)} · ${cards} cards · ${decisions} decisions · ${snap.messages.length} mensajes · ${Object.keys(snap.artifacts).length} artifacts`
+);

package/dashboard/server.mjs

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+/* ============================================================
+   Oficina · servidor del dashboard
+   Node puro, cero dependencias. Sirve dashboard/ + API:
+     GET /api/state      — agrega state.json, roster.json, bus/, leases
+     GET /api/events     — SSE: avisa cuando cambia algo en .oficina/
+     GET /api/artifacts?card=T-00 — parsea gates.md → [{name,status}]
+   Uso: node server.mjs [--port 7333] [--oficina <abs>] [--no-open]
+     --oficina  dir .oficina del proyecto (default: ../.oficina)
+     --no-open  no abre el navegador (el plugin lo abre cuando arranca
+                la corrida; el arranque manual sí abre)
+   Al escuchar escribe <officeDir>/dashboard.json (url + port) para el
+   handshake con el plugin. Si el puerto está ocupado por OTRO proyecto
+   negocia el siguiente; si es el MISMO proyecto, solo abre el browser.
+   ============================================================ */
+import http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+
+/* ---- CLI args ---- */
+const argv = process.argv.slice(2);
+let portArg = 7333;
+let oficinaArg = null;
+let openArg = true;
+for (let i = 0; i < argv.length; i++) {
+  if (argv[i] === "--oficina") oficinaArg = argv[++i];
+  else if (argv[i] === "--port") portArg = Number(argv[++i]);
+  else if (argv[i] === "--no-open") openArg = false;
+  else if (argv[i] === "--open") openArg = true;
+  else if (!argv[i].startsWith("--")) portArg = Number(argv[i]);
+}
+
+const OFICINA = path.resolve(oficinaArg || path.join(ROOT, ".oficina"));
+const DASH = __dirname;
+
+function openBrowser(url) {
+  try {
+    const stdio = { detached: true, stdio: "ignore", windowsHide: true };
+    if (process.platform === "win32") spawn("cmd", ["/c", "start", "", url], stdio).unref();
+    else if (process.platform === "darwin") spawn("open", [url], stdio).unref();
+    else spawn("xdg-open", [url], stdio).unref();
+  } catch { /* sin navegador no hay drama: la URL queda en el log */ }
+}
+
+/* handshake con el plugin: url y puerto reales */
+function writeHandshake(port) {
+  try {
+    fs.writeFileSync(path.join(OFICINA, "dashboard.json"), JSON.stringify({ url: `http://localhost:${port}`, port }));
+  } catch { /* .oficina no existe todavía: el dashboard queda en modo demo */ }
+}
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".md": "text/markdown; charset=utf-8",
+};
+
+function readJson(p) {
+  try { return JSON.parse(fs.readFileSync(p, "utf8")); } catch { return null; }
+}
+
+function listBus() {
+  const out = [];
+  const dir = path.join(OFICINA, "bus");
+  if (!fs.existsSync(dir)) return out;
+  for (const sub of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (!sub.isDirectory()) continue;
+    const subDir = path.join(dir, sub.name);
+    for (const f of fs.readdirSync(subDir).sort()) {
+      if (!f.endsWith(".json")) continue;
+      const m = readJson(path.join(subDir, f));
+      if (m) out.push(m);
+    }
+  }
+  out.sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0));
+  return out;
+}
+
+function aggregate() {
+  const stateFile = readJson(path.join(OFICINA, "state.json")) || {};
+  const rosterFile = readJson(path.join(OFICINA, "roster.json")) || {};
+  return {
+    runId: stateFile.runId || rosterFile.runId || null,
+    objective: stateFile.objective || "",
+    status: stateFile.status || "unknown",
+    cards: stateFile.cards || {},
+    agents: rosterFile.agents || {},
+    bus: listBus(),
+  };
+}
+
+function parseGates(cardId) {
+  const dir = path.join(OFICINA, "artifacts", cardId);
+  const out = { gates: [], evidence: false, handoff: false };
+  if (!fs.existsSync(dir)) return out;
+  const gatesFile = path.join(dir, "gates.md");
+  if (fs.existsSync(gatesFile)) {
+    const text = fs.readFileSync(gatesFile, "utf8");
+    for (const line of text.split("\n")) {
+      // tabla real: | # | Fase | Comando | Resultado | Detalle |
+      if (!/^\|\s*\d+\s*\|/.test(line)) continue;
+      const cells = line.split("|").map((s) => s.trim());
+      const fase = cells[2] || "";
+      const result = (cells[4] || "").toUpperCase();
+      if (!fase) continue;
+      const status = result.startsWith("PASS") ? "pass" : result.startsWith("FAIL") ? "fail" : "na";
+      out.gates.push({ name: fase, status, command: cells[3] || "" });
+    }
+  }
+  out.evidence = fs.existsSync(path.join(dir, "evidence.md"));
+  out.handoff = fs.existsSync(path.join(dir, "handoff.md"));
+  return out;
+}
+
+/* sirve un artifact crudo (evidence.md / handoff.md) para abrirlo en pestaña */
+function serveArtifactFile(req, res, url, name) {
+  const card = url.searchParams.get("card");
+  const file = path.join(OFICINA, "artifacts", card || "", name);
+  if (!card || !file.startsWith(path.join(OFICINA, "artifacts")) || !fs.existsSync(file)) {
+    res.writeHead(404); res.end("not found"); return;
+  }
+  res.writeHead(200, { "Content-Type": "text/markdown; charset=utf-8" });
+  res.end(fs.readFileSync(file));
+}
+
+/* ---- Watch: recursively notify SSE clients ---- */
+const sseClients = new Set();
+let watchReady = false;
+function watchOficina() {
+  if (!fs.existsSync(OFICINA)) return;
+  try {
+    fs.watch(OFICINA, { recursive: true }, () => {
+      const msg = "event: change\ndata: {}\n\n";
+      for (const res of sseClients) res.write(msg);
+    });
+    watchReady = true;
+  } catch { /* fs.watch recursivo no disponible → los clientes usan polling */ }
+}
+
+/* ---- Static ---- */
+function serveStatic(req, res) {
+  let urlPath = new URL(req.url, "http://x").pathname;
+  if (urlPath === "/") urlPath = "/dashboard.html";
+  const filePath = path.join(DASH, path.normalize(urlPath).replace(/^[/\\]/, ""));
+  if (!filePath.startsWith(DASH)) { res.writeHead(403); res.end(); return; }
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(404); res.end("not found"); return; }
+    res.writeHead(200, { "Content-Type": MIME[path.extname(filePath)] || "application/octet-stream" });
+    res.end(data);
+  });
+}
+
+/* ---- API ---- */
+function serveApi(req, res, url) {
+  const sendJson = (obj, code = 200) => {
+    res.writeHead(code, { "Content-Type": "application/json; charset=utf-8", "Cache-Control": "no-store" });
+    res.end(JSON.stringify(obj));
+  };
+
+  if (url.pathname === "/api/state") {
+    sendJson({ oficina: OFICINA, ...aggregate() });
+    return;
+  }
+  if (url.pathname === "/api/artifacts") {
+    const card = url.searchParams.get("card");
+    if (!card) { sendJson({ gates: [] }, 400); return; }
+    sendJson(parseGates(card));
+    return;
+  }
+  if (url.pathname === "/api/evidence") { serveArtifactFile(req, res, url, "evidence.md"); return; }
+  if (url.pathname === "/api/handoff") { serveArtifactFile(req, res, url, "handoff.md"); return; }
+  if (url.pathname === "/api/events") {
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-store",
+      Connection: "keep-alive",
+    });
+    res.write("retry: 3000\n\n");
+    sseClients.add(res);
+    req.on("close", () => sseClients.delete(res));
+    return;
+  }
+  res.writeHead(404); res.end();
+}
+
+/* ---- Server ---- */
+const server = http.createServer((req, res) => {
+  const url = new URL(req.url, "http://x");
+  if (url.pathname.startsWith("/api/")) serveApi(req, res, url);
+  else serveStatic(req, res);
+});
+
+/* ---- Arranque con negociación de puerto ---- */
+function probe(port) {
+  return new Promise((resolve) => {
+    const req = http.get({ host: "127.0.0.1", port, path: "/api/state", timeout: 1500 }, (res) => {
+      let data = "";
+      res.on("data", (c) => { data += c; });
+      res.on("end", () => {
+        try { resolve({ ok: true, oficina: JSON.parse(data).oficina }); }
+        catch { resolve({ ok: true, oficina: null }); }
+      });
+    });
+    req.on("error", () => resolve({ ok: false }));
+    req.on("timeout", () => { req.destroy(); resolve({ ok: false }); });
+  });
+}
+
+async function boot() {
+  let port = portArg;
+  for (let i = 0; i < 10; i++) {
+    const p = await probe(port);
+    if (!p.ok) break;                          // puerto libre
+    if (p.oficina === OFICINA) {
+      // Mismo proyecto: ya está corriendo. Solo abrir el navegador.
+      writeHandshake(port);
+      console.log(`Oficina dashboard ya corriendo → http://localhost:${port}`);
+      if (openArg) openBrowser(`http://localhost:${port}`);
+      process.exit(0);
+    }
+    port = portArg + i + 1;                    // otro proyecto: negociar
+  }
+
+  server.listen(port, () => {
+    console.log(`Oficina dashboard → http://localhost:${port}`);
+    console.log(`  datos: ${OFICINA}`);
+    writeHandshake(port);
+    watchOficina();
+    if (!watchReady) console.log("  fs.watch no disponible → los clientes usan polling de 4s");
+    if (openArg) openBrowser(`http://localhost:${port}`);
+  });
+}
+
+boot();

package/dashboard/shot.mjs

@@ -0,0 +1,54 @@
+/* Verificación visual del dashboard (Impeccable: screenshot + defect scan) */
+import { chromium } from "playwright";
+
+const URL = "http://localhost:7333";
+const out = "dashboard/shots";
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+const errors = [];
+page.on("pageerror", (e) => errors.push("pageerror: " + e.message));
+page.on("console", (m) => { if (m.type() === "error") errors.push("console: " + m.text()); });
+
+await page.goto(URL, { waitUntil: "networkidle" });
+await page.waitForTimeout(2000);
+
+// 1. vista desktop con datos reales
+await page.screenshot({ path: `${out}/desktop-real.png`, fullPage: true });
+
+// 2. click en una card → gates render
+await page.click(".card >> nth=0");
+await page.waitForTimeout(800);
+await page.screenshot({ path: `${out}/desktop-gates.png` });
+
+// 3. móvil 390x844
+await page.setViewportSize({ width: 390, height: 844 });
+await page.waitForTimeout(600);
+await page.screenshot({ path: `${out}/mobile.png`, fullPage: true });
+
+// 4. tema claro
+await page.setViewportSize({ width: 1440, height: 900 });
+await page.keyboard.press("t");
+await page.waitForTimeout(600);
+await page.screenshot({ path: `${out}/desktop-light.png` });
+
+// 5. sin errores JS
+console.log("errores JS:", errors.length ? errors : "ninguno");
+
+// 6. checks de contenido
+const checks = await page.evaluate(() => {
+  const $ = (s) => document.querySelector(s);
+  return {
+    runId: $("#run-id")?.textContent,
+    mesaNodes: document.querySelectorAll(".agent-node").length,
+    busMsgs: document.querySelectorAll(".msg").length,
+    boardCols: document.querySelectorAll(".col").length,
+    chiefItems: document.querySelectorAll(".chief-item").length,
+    demoBanner: !$("#demo-banner")?.hidden,
+    conn: $("#conn")?.dataset.state,
+  };
+});
+console.log("checks:", JSON.stringify(checks, null, 2));
+
+await browser.close();