fwinit 1.6.0 → 1.7.0

package/dist/index.js

@@ -5,8 +5,8 @@ import { Command } from "commander";
 import ora from "ora";
 import chalk from "chalk";
 import { readFileSync } from "fs";
-import { mkdir as mkdir3, cp as cp3, readFile as readFile3 } from "fs/promises";
-import { join as join3, basename as basename2 } from "path";
+import { mkdir as mkdir3, cp as cp3, readFile as readFile5 } from "fs/promises";
+import { join as join6, basename as basename2 } from "path";
 
 // src/templates.ts
 var TEMPLATES = [
@@ -656,6 +656,13 @@ var AGENT_BUNDLE = [
   {
     // Biblioteca de estilos: skills/design/ con una subskill por estilo y sus
     // commands (/design, /design-<estilo>) que leen specs/frontend/02-design.md.
+    // Adentro vive también el catálogo search-driven ui-ux-pro-max (Python
+    // stdlib, offline): no es un estilo fijo sino una base consultable que
+    // genera un design system, pero comparte familia, carpeta y comando
+    // (/design-ui-ux-pro-max). Como la biblioteca se copia entera, el catálogo
+    // viaja con su data/ y sus scripts/ — si sólo viajara su SKILL.md, cada
+    // búsqueda devolvería 0 resultados y el agente caería a defaults genéricos
+    // sin avisar.
     kind: "library",
     dir: "design",
     required: false
@@ -672,33 +679,33 @@ async function exists(path) {
 }
 async function listMarkdown(dir) {
   try {
-    const { readdir: readdir3 } = await import("fs/promises");
-    return (await readdir3(dir)).filter((f) => f.endsWith(".md"));
+    const { readdir: readdir5 } = await import("fs/promises");
+    return (await readdir5(dir)).filter((f) => f.endsWith(".md"));
   } catch {
     return [];
   }
 }
 async function planAgentBundle(repoRoot, bundle = AGENT_BUNDLE) {
-  const { join: join4 } = await import("path");
+  const { join: join7 } = await import("path");
   const installs = [];
   const skillDirs = [];
   const missingRequired = [];
   for (const entry of bundle) {
-    const src = join4(repoRoot, "skills", entry.dir);
+    const src = join7(repoRoot, "skills", entry.dir);
     if (entry.kind === "library") {
       if (!await exists(src)) {
         if (entry.required) missingRequired.push(entry.dir);
         continue;
       }
       installs.push({ from: src, to: `skills/${entry.dir}`, recursive: true });
-      const cmds = join4(src, "commands");
+      const cmds = join7(src, "commands");
       for (const file of await listMarkdown(cmds)) {
-        installs.push({ from: join4(cmds, file), to: `commands/${file}` });
+        installs.push({ from: join7(cmds, file), to: `commands/${file}` });
       }
       continue;
     }
-    const skill = join4(src, "SKILL.md");
-    const command = join4(src, "command.md");
+    const skill = join7(src, "SKILL.md");
+    const command = join7(src, "command.md");
     if (!await exists(skill)) {
       if (entry.required) missingRequired.push(entry.dir);
       continue;
@@ -711,17 +718,3316 @@ async function planAgentBundle(repoRoot, bundle = AGENT_BUNDLE) {
       missingRequired.push(`${entry.dir}/command.md`);
     }
     for (const extra of entry.extras ?? []) {
-      const from = join4(src, extra);
-      if (await exists(from)) {
-        installs.push({
-          from,
-          to: `skills/${entry.dir}/${extra}`,
-          recursive: true
+      const from = join7(src, extra);
+      if (!await exists(from)) continue;
+      installs.push({
+        from,
+        to: `skills/${entry.dir}/${extra}`,
+        recursive: true
+      });
+    }
+  }
+  return { installs, skillDirs, commandDirs: ["commands"], missingRequired };
+}
+
+// src/studio/server.ts
+import { createServer } from "http";
+import { join as join4, resolve as resolve3 } from "path";
+
+// src/studio/specs.ts
+import { readdir as readdir2, readFile as readFile2, realpath, stat as stat2 } from "fs/promises";
+import { extname as extname2, join as join2, relative as relative2, resolve, sep as sep2 } from "path";
+
+// src/studio/markdown.ts
+var ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function esc(text) {
+  return text.replace(/[&<>"']/g, (char) => ESCAPES[char]);
+}
+function slugify(text) {
+  const slug = text.toLowerCase().replace(/[^\p{L}\p{N}\s-]/gu, "").trim().replace(/[\s-]+/g, "-").replace(/^-+|-+$/g, "");
+  return slug === "" ? "section" : slug;
+}
+function plainText(source) {
+  return source.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/`([^`]*)`/g, "$1").replace(/\*\*\*|\*\*|\*|___|__|_|~~/g, "").trim();
+}
+function matchLink(source, start) {
+  const close = source.indexOf("]", start + 1);
+  if (close === -1) return null;
+  if (source[close + 1] !== "(") return null;
+  const destination = matchDestination(source, close + 1);
+  if (destination === null) return null;
+  return {
+    text: source.slice(start + 1, close),
+    target: destination.target,
+    end: destination.end
+  };
+}
+function matchDestination(source, openParen) {
+  let depth = 1;
+  let index = openParen + 1;
+  while (index < source.length) {
+    const char = source[index];
+    if (char === "(") depth += 1;
+    else if (char === ")") {
+      depth -= 1;
+      if (depth === 0) {
+        return { target: source.slice(openParen + 1, index), end: index + 1 };
+      }
+    }
+    index += 1;
+  }
+  return null;
+}
+var SAFE_PROTOCOL = /^(?:https?|mailto):/i;
+var ANY_PROTOCOL = /^[a-z][a-z0-9+.-]*:/i;
+var SPEC_PATH = /\.(?:md|markdown)$/i;
+function normalizeSpecPath(target) {
+  const path = target.split("#")[0].split("?")[0].replace(/\\/g, "/");
+  const segments = [];
+  for (const segment of path.split("/")) {
+    if (segment === "" || segment === ".") continue;
+    segments.push(segment);
+  }
+  return segments.join("/");
+}
+function renderLink(text, rawTarget) {
+  const target = rawTarget.trim();
+  const inner = renderInline(text);
+  if (SAFE_PROTOCOL.test(target)) {
+    return `<a href="${esc(target)}" rel="noreferrer noopener">${inner}</a>`;
+  }
+  if (ANY_PROTOCOL.test(target)) return inner;
+  if (target.startsWith("/") || target.startsWith("\\")) return inner;
+  const specPath = normalizeSpecPath(target);
+  if (SPEC_PATH.test(specPath)) {
+    return `<a href="#" data-spec-link="${esc(specPath)}">${inner}</a>`;
+  }
+  return inner;
+}
+var WORD_CHAR = /[\p{L}\p{N}]/u;
+function findEmphasisClose(source, char, size, from) {
+  let index = from;
+  while (index < source.length) {
+    if (source[index] !== char) {
+      index += 1;
+      continue;
+    }
+    let length = 0;
+    while (source[index + length] === char) length += 1;
+    if (length >= size) {
+      if (char === "_" && WORD_CHAR.test(source[index + length] ?? "")) {
+        index += length;
+        continue;
+      }
+      return { start: index, length };
+    }
+    index += length;
+  }
+  return null;
+}
+function matchEmphasis(source, start) {
+  const char = source[start];
+  if (char === "~") {
+    if (source[start + 1] !== "~") return null;
+    const close = source.indexOf("~~", start + 2);
+    if (close <= start + 2) return null;
+    return {
+      html: `<del>${renderInline(source.slice(start + 2, close))}</del>`,
+      end: close + 2
+    };
+  }
+  let run = 0;
+  while (source[start + run] === char && run < 3) run += 1;
+  if (char === "_" && start > 0 && WORD_CHAR.test(source[start - 1])) return null;
+  for (let size = run; size >= 1; size -= 1) {
+    const close = findEmphasisClose(source, char, size, start + size);
+    if (close === null) continue;
+    if (close.start === start + size) continue;
+    const extra = close.length - size;
+    const content = source.slice(start + size, close.start + extra);
+    const inner = renderInline(content);
+    if (size === 3) {
+      return { html: `<strong><em>${inner}</em></strong>`, end: close.start + close.length };
+    }
+    if (size === 2) {
+      return { html: `<strong>${inner}</strong>`, end: close.start + close.length };
+    }
+    return { html: `<em>${inner}</em>`, end: close.start + close.length };
+  }
+  return null;
+}
+function renderInline(source) {
+  let html = "";
+  let index = 0;
+  while (index < source.length) {
+    const char = source[index];
+    if (char === "`") {
+      const close = source.indexOf("`", index + 1);
+      if (close > index + 1) {
+        html += `<code>${esc(source.slice(index + 1, close))}</code>`;
+        index = close + 1;
+        continue;
+      }
+    }
+    if (char === "!" && source[index + 1] === "[") {
+      const image = matchLink(source, index + 1);
+      if (image !== null) {
+        html += `<span class="md-img">${renderInline(image.text)}</span>`;
+        index = image.end;
+        continue;
+      }
+    }
+    if (char === "[") {
+      const link = matchLink(source, index);
+      if (link !== null) {
+        html += renderLink(link.text, link.target);
+        index = link.end;
+        continue;
+      }
+    }
+    if (char === "*" || char === "_" || char === "~") {
+      const emphasis = matchEmphasis(source, index);
+      if (emphasis !== null) {
+        html += emphasis.html;
+        index = emphasis.end;
+        continue;
+      }
+    }
+    html += esc(char);
+    index += 1;
+  }
+  return html;
+}
+var LIST_ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+var FENCE = /^ {0,3}(`{3,}|~{3,})[ \t]*([^`]*)$/;
+var HEADING = /^(#{1,6})\s+(.*)$/;
+var RULE = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+var QUOTE = /^\s{0,3}>/;
+function tableCells(line) {
+  let trimmed = line.trim();
+  if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
+  if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
+  return trimmed.split("|").map((cell) => cell.trim());
+}
+function isTableSeparator(line) {
+  if (!line.includes("|")) return false;
+  const cells = tableCells(line);
+  return cells.length > 0 && cells.every((cell) => /^:?-+:?$/.test(cell));
+}
+function isBlockStart(lines, index) {
+  const line = lines[index];
+  if (line.trim() === "") return true;
+  if (FENCE.test(line)) return true;
+  if (HEADING.test(line)) return true;
+  if (RULE.test(line)) return true;
+  if (QUOTE.test(line)) return true;
+  if (LIST_ITEM.test(line)) return true;
+  if (line.includes("|") && index + 1 < lines.length && isTableSeparator(lines[index + 1])) {
+    return true;
+  }
+  return false;
+}
+function renderMarkdown(markdown) {
+  const headings = [];
+  const usedIds = /* @__PURE__ */ new Map();
+  const uniqueId = (base) => {
+    const seen = usedIds.get(base) ?? 0;
+    usedIds.set(base, seen + 1);
+    return seen === 0 ? base : `${base}-${seen + 1}`;
+  };
+  const renderItem = (item) => {
+    const task = /^\[([ xX])\]\s+(.*)$/.exec(item.text);
+    if (task !== null) {
+      const checked = task[1].toLowerCase() === "x";
+      const box = `<input type="checkbox" disabled${checked ? " checked" : ""}>`;
+      return { html: `${box} ${renderInline(task[2])}`, task: true };
+    }
+    return { html: renderInline(item.text), task: false };
+  };
+  const renderItems = (items, ordered) => {
+    const tag = ordered ? "ol" : "ul";
+    const parts = items.map((item) => {
+      const { html, task } = renderItem(item);
+      const cls = task ? ' class="task"' : "";
+      return `<li${cls}>${html}</li>`;
+    });
+    return `<${tag}>${parts.join("")}</${tag}>`;
+  };
+  const renderBlocks = (lines) => {
+    const out = [];
+    let index = 0;
+    while (index < lines.length) {
+      const line = lines[index];
+      if (line.trim() === "") {
+        index += 1;
+        continue;
+      }
+      const fence = FENCE.exec(line);
+      if (fence !== null) {
+        const marker = fence[1];
+        const fenceChar = marker[0];
+        const lang = fence[2].trim().split(/\s+/)[0] ?? "";
+        const body = [];
+        index += 1;
+        while (index < lines.length) {
+          const candidate = lines[index];
+          const trimmed = candidate.trim();
+          const closes = trimmed.length >= marker.length && trimmed.split("").every((char) => char === fenceChar);
+          if (closes) {
+            index += 1;
+            break;
+          }
+          body.push(candidate);
+          index += 1;
+        }
+        const cls = lang === "" ? "" : ` class="lang-${esc(lang)}"`;
+        out.push(`<pre><code${cls}>${esc(body.join("\n"))}</code></pre>`);
+        continue;
+      }
+      const heading = HEADING.exec(line);
+      if (heading !== null) {
+        const level = heading[1].length;
+        const raw = heading[2].replace(/\s+#+\s*$/, "").trim();
+        const text = plainText(raw);
+        const id = uniqueId(slugify(text));
+        headings.push({ level, text, id });
+        out.push(`<h${level} id="${esc(id)}">${renderInline(raw)}</h${level}>`);
+        index += 1;
+        continue;
+      }
+      if (RULE.test(line)) {
+        out.push("<hr>");
+        index += 1;
+        continue;
+      }
+      if (line.includes("|") && index + 1 < lines.length && isTableSeparator(lines[index + 1])) {
+        const header = tableCells(line);
+        const rows = [];
+        index += 2;
+        while (index < lines.length && lines[index].trim() !== "" && lines[index].includes("|")) {
+          rows.push(tableCells(lines[index]));
+          index += 1;
+        }
+        const head = header.map((cell) => `<th>${renderInline(cell)}</th>`).join("");
+        const body = rows.map(
+          (row) => `<tr>${row.map((cell) => `<td>${renderInline(cell)}</td>`).join("")}</tr>`
+        ).join("");
+        out.push(
+          `<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`
+        );
+        continue;
+      }
+      if (QUOTE.test(line)) {
+        const quoted = [];
+        while (index < lines.length && QUOTE.test(lines[index])) {
+          quoted.push(lines[index].replace(/^\s{0,3}>\s?/, ""));
+          index += 1;
+        }
+        out.push(`<blockquote>${renderBlocks(quoted)}</blockquote>`);
+        continue;
+      }
+      if (LIST_ITEM.test(line)) {
+        const items = [];
+        let baseIndent = -1;
+        while (index < lines.length) {
+          const match = LIST_ITEM.exec(lines[index]);
+          if (match === null) break;
+          const indent = match[1].length;
+          if (baseIndent === -1) baseIndent = indent;
+          items.push({
+            indent,
+            ordered: /\d/.test(match[2]),
+            text: match[3]
+          });
+          index += 1;
+        }
+        const top = [];
+        for (const item of items) {
+          if (item.indent > baseIndent && top.length > 0) {
+            top[top.length - 1].children.push(item);
+          } else {
+            top.push({ item, children: [] });
+          }
+        }
+        const ordered = top[0].item.ordered;
+        const lis = top.map(({ item, children }) => {
+          const { html, task } = renderItem(item);
+          const cls = task ? ' class="task"' : "";
+          const nested = children.length > 0 ? renderItems(children, children[0].ordered) : "";
+          return `<li${cls}>${html}${nested}</li>`;
+        });
+        out.push(`<${ordered ? "ol" : "ul"}>${lis.join("")}</${ordered ? "ol" : "ul"}>`);
+        continue;
+      }
+      const paragraph = [];
+      const start = index;
+      while (index < lines.length) {
+        const current = lines[index];
+        if (current.trim() === "") break;
+        if (index > start && isBlockStart(lines, index)) break;
+        paragraph.push(current.trim());
+        index += 1;
+      }
+      out.push(`<p>${renderInline(paragraph.join("\n"))}</p>`);
+    }
+    return out.join("");
+  };
+  return { html: renderBlocks(markdown.replace(/\r\n?/g, "\n").split("\n")), headings };
+}
+
+// src/studio/specs.ts
+var SKIPPED_NAMES = /* @__PURE__ */ new Set([".git", "node_modules"]);
+var SUPPORTED_EXTENSIONS = /* @__PURE__ */ new Set([".md", ".markdown", ".txt"]);
+var SpecPathError = class extends Error {
+  code;
+  path;
+  constructor(code, path, message) {
+    super(message);
+    this.name = "SpecPathError";
+    this.code = code;
+    this.path = path;
+  }
+};
+function isInside(root, candidate) {
+  if (candidate === root) return true;
+  const prefix = root.endsWith(sep2) ? root : `${root}${sep2}`;
+  return candidate.startsWith(prefix);
+}
+async function realpathOrNull(path) {
+  try {
+    return await realpath(path);
+  } catch {
+    return null;
+  }
+}
+function compareNodes(a, b) {
+  const left = a.name.toLowerCase();
+  const right = b.name.toLowerCase();
+  const byName = left.localeCompare(right);
+  return byName !== 0 ? byName : a.name.localeCompare(b.name);
+}
+async function scanDirectory(absoluteDir, relativeDir, totals) {
+  let entries;
+  try {
+    entries = await readdir2(absoluteDir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const dirs = [];
+  const files = [];
+  for (const entry of entries) {
+    if (entry.isSymbolicLink()) continue;
+    if (entry.name.startsWith(".") || SKIPPED_NAMES.has(entry.name)) continue;
+    const childPath = relativeDir === "" ? entry.name : `${relativeDir}/${entry.name}`;
+    if (entry.isDirectory()) {
+      const children = await scanDirectory(join2(absoluteDir, entry.name), childPath, totals);
+      totals.dirs += 1;
+      dirs.push({ name: entry.name, path: childPath, type: "dir", children });
+      continue;
+    }
+    if (!entry.isFile()) continue;
+    let info;
+    try {
+      info = await stat2(join2(absoluteDir, entry.name));
+    } catch {
+      continue;
+    }
+    totals.files += 1;
+    totals.bytes += info.size;
+    files.push({
+      name: entry.name,
+      path: childPath,
+      type: "file",
+      bytes: info.size,
+      modified: info.mtime.toISOString()
+    });
+  }
+  dirs.sort(compareNodes);
+  files.sort(compareNodes);
+  return [...dirs, ...files];
+}
+async function buildSpecsTree(projectRoot) {
+  const generatedAt = (/* @__PURE__ */ new Date()).toISOString();
+  const specsRoot = join2(projectRoot, "specs");
+  const empty = {
+    found: false,
+    root: null,
+    projectRoot,
+    sections: [],
+    tree: [],
+    totals: { files: 0, dirs: 0, bytes: 0 },
+    generatedAt
+  };
+  let rootInfo;
+  try {
+    rootInfo = await stat2(specsRoot);
+  } catch {
+    return empty;
+  }
+  if (!rootInfo.isDirectory()) return empty;
+  const totals = { files: 0, dirs: 0, bytes: 0 };
+  const tree = await scanDirectory(specsRoot, "", totals);
+  const sections = tree.filter((node) => node.type === "dir").map((node) => node.name);
+  return {
+    found: true,
+    root: specsRoot,
+    projectRoot,
+    sections,
+    tree,
+    totals,
+    generatedAt
+  };
+}
+function frontmatterEndIndex(lines) {
+  if (lines[0]?.trim() !== "---") return -1;
+  return lines.findIndex(
+    (line, index) => index > 0 && (line.trim() === "---" || line.trim() === "...")
+  );
+}
+function stripFrontmatter(markdown) {
+  const lines = markdown.split(/\r?\n/);
+  const end = frontmatterEndIndex(lines);
+  if (end === -1) return markdown;
+  return lines.slice(end + 1).join("\n");
+}
+function collectWarnings(markdown) {
+  const warnings = [];
+  const lines = markdown.split(/\r?\n/);
+  if (lines[0]?.trim() === "---" && frontmatterEndIndex(lines) === -1) {
+    warnings.push("El bloque de frontmatter no se cierra (falta `---`).");
+  }
+  return warnings;
+}
+function assertRelativePath(requested) {
+  if (requested.trim() === "") {
+    throw new SpecPathError("invalid", requested, "La ruta de la spec est\xE1 vac\xEDa.");
+  }
+  if (requested.includes("\0")) {
+    throw new SpecPathError("invalid", requested, "La ruta de la spec contiene un NUL.");
+  }
+  if (requested.startsWith("/") || requested.startsWith("\\") || /^[A-Za-z]:[\\/]/.test(requested)) {
+    throw new SpecPathError(
+      "invalid",
+      requested,
+      "La ruta de la spec debe ser relativa a specs/."
+    );
+  }
+  return requested.split(/[\\/]+/).filter((segment) => segment !== "" && segment !== ".");
+}
+function resolveSpecLink(baseDir, target) {
+  const stack = baseDir.filter((segment) => segment !== "");
+  for (const segment of target.split(/[\\/]+/)) {
+    if (segment === "" || segment === ".") continue;
+    if (segment === "..") {
+      stack.pop();
+      continue;
+    }
+    stack.push(segment);
+  }
+  return stack.join("/");
+}
+function normalizeSpecLinks(html, basePath) {
+  const baseDir = basePath.split("/").slice(0, -1);
+  return html.replace(/data-spec-link="([^"]*)"/g, (_match, target) => {
+    return `data-spec-link="${resolveSpecLink(baseDir, target)}"`;
+  });
+}
+async function readSpecFile(roots, relativePath) {
+  const segments = assertRelativePath(relativePath);
+  const logicalRoot = resolve(roots.specsRoot);
+  const logical = resolve(logicalRoot, relativePath);
+  if (!isInside(logicalRoot, logical)) {
+    throw new SpecPathError("outside", relativePath, "La spec pedida est\xE1 fuera de specs/.");
+  }
+  if (segments.includes("..")) {
+    throw new SpecPathError(
+      "invalid",
+      relativePath,
+      "La ruta de la spec no puede contener segmentos '..'."
+    );
+  }
+  const realRoot = await realpathOrNull(logicalRoot);
+  if (realRoot === null) {
+    throw new SpecPathError("missing", relativePath, "El proyecto no tiene carpeta specs/.");
+  }
+  const real = await realpathOrNull(logical);
+  if (real === null) {
+    throw new SpecPathError("missing", relativePath, `No existe la spec ${relativePath}.`);
+  }
+  if (!isInside(realRoot, real)) {
+    throw new SpecPathError("outside", relativePath, "La spec resuelve fuera de specs/.");
+  }
+  const info = await stat2(real).catch(() => null);
+  if (info === null) {
+    throw new SpecPathError("missing", relativePath, `No existe la spec ${relativePath}.`);
+  }
+  if (!info.isFile()) {
+    throw new SpecPathError("unsupported", relativePath, "La spec no es un archivo regular.");
+  }
+  const extension = extname2(real).toLowerCase();
+  if (!SUPPORTED_EXTENSIONS.has(extension)) {
+    throw new SpecPathError(
+      "unsupported",
+      relativePath,
+      `Extensi\xF3n no soportada (${extension || "sin extensi\xF3n"}); us\xE1 .md, .markdown o .txt.`
+    );
+  }
+  const markdown = await readFile2(real, "utf8").catch(() => null);
+  if (markdown === null) {
+    throw new SpecPathError("missing", relativePath, `No se pudo leer ${relativePath}.`);
+  }
+  const { html: rawHtml, headings } = renderMarkdown(stripFrontmatter(markdown));
+  const level1 = headings.find((heading) => heading.level === 1);
+  const posixPath = relative2(logicalRoot, logical).split(sep2).join("/");
+  const html = normalizeSpecLinks(rawHtml, posixPath);
+  return {
+    path: posixPath,
+    absolutePath: logical,
+    title: level1?.text || posixPath.split("/").pop() || posixPath,
+    markdown,
+    html,
+    headings,
+    bytes: info.size,
+    modified: info.mtime.toISOString(),
+    warnings: collectWarnings(markdown)
+  };
+}
+
+// src/studio/skills.ts
+import { readdir as readdir3, readFile as readFile3, stat as stat3 } from "fs/promises";
+import { homedir } from "os";
+import { join as join3, resolve as resolve2 } from "path";
+
+// src/studio/frontmatter.ts
+var DELIMITER = "---";
+var KEY_VALUE = /^([A-Za-z0-9_.-]+)[ \t]*:[ \t]*(.*)$/;
+var MAX_LINE_IN_WARNING = 80;
+function splitLines(source) {
+  return source.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+}
+function stripQuotes(value) {
+  if (value.length < 2) return value;
+  const first = value[0];
+  const last = value[value.length - 1];
+  if ((first === '"' || first === "'") && first === last) {
+    return value.slice(1, -1);
+  }
+  return value;
+}
+function malformed(reason, body) {
+  return { data: {}, warnings: [`malformed frontmatter: ${reason}`], body };
+}
+function parseFrontmatter(source) {
+  const lines = splitLines(source);
+  if ((lines[0] ?? "").trimEnd() !== DELIMITER) {
+    return { data: {}, warnings: [], body: source };
+  }
+  let closing = -1;
+  for (let index = 1; index < lines.length; index++) {
+    if (lines[index].trimEnd() === DELIMITER) {
+      closing = index;
+      break;
+    }
+  }
+  if (closing === -1) {
+    return {
+      data: {},
+      warnings: ["frontmatter: block is unterminated"],
+      body: ""
+    };
+  }
+  const data = {};
+  const body = lines.slice(closing + 1).join("\n");
+  let parent = null;
+  for (const raw of lines.slice(1, closing)) {
+    if (!raw.trim()) continue;
+    if (raw.trimStart().startsWith("#")) continue;
+    const indented = /^[ \t]/.test(raw);
+    const match = KEY_VALUE.exec(raw.trim());
+    if (!match) {
+      return malformed(
+        `line is not "key: value": ${raw.trim().slice(0, MAX_LINE_IN_WARNING)}`,
+        body
+      );
+    }
+    const key = match[1];
+    const rawValue = match[2].trim();
+    const value = stripQuotes(rawValue);
+    if (indented) {
+      if (parent === null) {
+        return malformed(`indented key without a parent block: ${key}`, body);
+      }
+      if (rawValue === "") {
+        return malformed(`nested key has no value: ${parent}.${key}`, body);
+      }
+      data[`${parent}.${key}`] = value;
+      continue;
+    }
+    if (rawValue === "") {
+      parent = key;
+      continue;
+    }
+    parent = null;
+    data[key] = value;
+  }
+  return { data, warnings: [], body };
+}
+
+// src/studio/skills.ts
+var ENTRY_FILE = "skill.md";
+var COMMAND_FILE = "command.md";
+function isMissing(error) {
+  const code = error?.code;
+  return code === "ENOENT" || code === "ENOTDIR";
+}
+function resolveSkillTargets(options) {
+  const home = resolve2(options.home ?? homedir());
+  const projectRoot = resolve2(options.projectRoot);
+  const gentleShellRoot = process.env.GENTLE_SHELL_HOME?.trim() || join3(home, ".gentle-shell", "agent");
+  return [
+    {
+      id: "opencode",
+      label: "opencode",
+      globalDir: join3(home, ".config", "opencode", "skills"),
+      projectDir: join3(projectRoot, ".opencode", "skills")
+    },
+    {
+      id: "pi",
+      label: "pi",
+      globalDir: join3(home, ".pi", "agent", "skills"),
+      projectDir: join3(projectRoot, ".pi", "skills")
+    },
+    {
+      id: "gentle-shell",
+      label: "Gentle Shell",
+      globalDir: join3(gentleShellRoot, "skills"),
+      projectDir: join3(projectRoot, ".gentle-shell", "skills")
+    }
+  ];
+}
+function compareNames(a, b) {
+  const left = a.toLowerCase();
+  const right = b.toLowerCase();
+  if (left < right) return -1;
+  if (left > right) return 1;
+  if (a < b) return -1;
+  if (a > b) return 1;
+  return 0;
+}
+function firstProseLine(body) {
+  let inFence = false;
+  for (const raw of body.split(/\r?\n/)) {
+    const line = raw.trim();
+    if (!line) continue;
+    if (/^(?:```|~~~)/.test(line)) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) continue;
+    if (line.startsWith("#")) continue;
+    if (line === "---") continue;
+    return line;
+  }
+  return "";
+}
+async function measureDirectory(dir) {
+  let files = 0;
+  let bytes = 0;
+  let entries;
+  try {
+    entries = await readdir3(dir, { withFileTypes: true });
+  } catch {
+    return { files, bytes };
+  }
+  for (const entry of entries) {
+    if (entry.isSymbolicLink()) continue;
+    const path = join3(dir, entry.name);
+    if (entry.isDirectory()) {
+      const nested = await measureDirectory(path);
+      files += nested.files;
+      bytes += nested.bytes;
+      continue;
+    }
+    if (!entry.isFile()) continue;
+    try {
+      const info = await stat3(path);
+      files += 1;
+      bytes += info.size;
+    } catch {
+    }
+  }
+  return { files, bytes };
+}
+async function readSkill(dir, name, target, scope, warnings) {
+  let entries;
+  try {
+    entries = await readdir3(dir, { withFileTypes: true });
+  } catch {
+    warnings.push(`cannot read skill directory: ${dir}`);
+    return null;
+  }
+  const entryFile = entries.find(
+    (entry) => entry.isFile() && entry.name.toLowerCase() === ENTRY_FILE
+  );
+  if (!entryFile) return null;
+  const entryPath = join3(dir, entryFile.name);
+  let source;
+  let entryInfo;
+  try {
+    source = await readFile3(entryPath, "utf-8");
+    entryInfo = await stat3(entryPath);
+  } catch {
+    warnings.push(`cannot read skill entry file: ${entryPath}`);
+    return null;
+  }
+  const parsed = parseFrontmatter(source);
+  const { files, bytes } = await measureDirectory(dir);
+  const version = parsed.data["metadata.version"]?.trim();
+  const author = parsed.data["metadata.author"]?.trim();
+  const license = parsed.data["license"]?.trim();
+  const description = parsed.data["description"]?.trim() || firstProseLine(parsed.body);
+  return {
+    name,
+    description,
+    version: version || void 0,
+    license: license || void 0,
+    author: author || void 0,
+    dir,
+    path: entryPath,
+    target,
+    scope,
+    files,
+    bytes,
+    modified: entryInfo.mtime.toISOString(),
+    hasCommand: entries.some(
+      (entry) => entry.isFile() && entry.name.toLowerCase() === COMMAND_FILE
+    ),
+    warnings: parsed.warnings
+  };
+}
+async function scanSkillsDir(dir, target, scope, warnings) {
+  let info;
+  try {
+    info = await stat3(dir);
+  } catch (error) {
+    if (isMissing(error)) return { exists: false, skills: [] };
+    warnings.push(`cannot read skills directory: ${dir}`);
+    return { exists: false, skills: [] };
+  }
+  if (!info.isDirectory()) return { exists: false, skills: [] };
+  let entries;
+  try {
+    entries = await readdir3(dir, { withFileTypes: true });
+  } catch {
+    warnings.push(`cannot list skills directory: ${dir}`);
+    return { exists: true, skills: [] };
+  }
+  const skills = [];
+  for (const entry of entries) {
+    if (entry.isSymbolicLink()) {
+      warnings.push(`skipped symlinked skill directory: ${join3(dir, entry.name)}`);
+      continue;
+    }
+    if (!entry.isDirectory()) continue;
+    const skill = await readSkill(
+      join3(dir, entry.name),
+      entry.name,
+      target,
+      scope,
+      warnings
+    );
+    if (skill) skills.push(skill);
+  }
+  skills.sort((a, b) => compareNames(a.name, b.name));
+  return { exists: true, skills };
+}
+async function discoverSkills(options) {
+  const projectRoot = resolve2(options.projectRoot);
+  const warnings = [];
+  const targets = [];
+  const totals = { global: 0, project: 0 };
+  for (const spec of resolveSkillTargets(options)) {
+    const globalScan = await scanSkillsDir(
+      spec.globalDir,
+      spec.id,
+      "global",
+      warnings
+    );
+    const projectScan = await scanSkillsDir(
+      spec.projectDir,
+      spec.id,
+      "project",
+      warnings
+    );
+    totals.global += globalScan.skills.length;
+    totals.project += projectScan.skills.length;
+    const skills = [...globalScan.skills, ...projectScan.skills].sort(
+      (a, b) => compareNames(a.name, b.name)
+    );
+    targets.push({
+      id: spec.id,
+      label: spec.label,
+      globalDir: spec.globalDir,
+      projectDir: spec.projectDir,
+      globalExists: globalScan.exists,
+      projectExists: projectScan.exists,
+      skills
+    });
+  }
+  return {
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    projectRoot,
+    targets,
+    totals,
+    warnings
+  };
+}
+
+// src/studio/ui/client.ts
+var CLIENT_JS = `
+(function () {
+  'use strict';
+
+  var THEME_KEY = 'fwinit:theme';
+  var metaEl = document.getElementById('studio-meta');
+  var meta = metaEl ? JSON.parse(metaEl.textContent || '{}') : {};
+
+  var state = {
+    view: 'skills',
+    scope: 'global',
+    skillKey: null,
+    specPath: null,
+    filter: { skills: '', specs: '' },
+    skills: null,
+    specs: null,
+    doc: null,
+    collapsed: {},
+    expanded: {},
+    tocLinks: []
+  };
+
+  function q(sel, root) {
+    return (root || document).querySelector(sel);
+  }
+
+  function qa(sel, root) {
+    return Array.prototype.slice.call((root || document).querySelectorAll(sel));
+  }
+
+  function el(tag, props, children) {
+    var node = document.createElement(tag);
+    if (props) {
+      Object.keys(props).forEach(function (key) {
+        var value = props[key];
+        if (value === undefined || value === null || value === false) return;
+        if (key === 'class') node.className = value;
+        else if (key === 'text') node.textContent = String(value);
+        else if (key === 'dataset') {
+          Object.keys(value).forEach(function (dataKey) {
+            node.dataset[dataKey] = String(value[dataKey]);
+          });
+        } else if (key.indexOf('on') === 0 && typeof value === 'function') {
+          node.addEventListener(key.slice(2).toLowerCase(), value);
+        } else if (key === 'html') {
+          node.innerHTML = value;
+        } else {
+          node.setAttribute(key, String(value));
+        }
+      });
+    }
+    (children || []).forEach(function (child) {
+      if (child === null || child === undefined || child === false) return;
+      node.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+    });
+    return node;
+  }
+
+  function fmtBytes(bytes) {
+    if (typeof bytes !== 'number' || !isFinite(bytes)) return '\u2014';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+
+  function fmtDate(iso) {
+    if (!iso) return '\u2014';
+    var date = new Date(iso);
+    if (isNaN(date.getTime())) return '\u2014';
+    var pad = function (value) { return String(value).padStart(2, '0'); };
+    return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) +
+      ' ' + pad(date.getHours()) + ':' + pad(date.getMinutes());
+  }
+
+  function shortPath(path) {
+    var home = meta.home || '';
+    if (home && path.indexOf(home) === 0) return '~' + path.slice(home.length);
+    return path;
+  }
+
+  function copyValue(value, button) {
+    var run = function () {
+      var done = function () {
+        if (!button) return;
+        var previous = button.getAttribute('data-label') || button.textContent;
+        button.setAttribute('data-label', previous);
+        button.setAttribute('data-copied', 'true');
+        button.textContent = 'Copiado';
+        setTimeout(function () {
+          button.removeAttribute('data-copied');
+          button.textContent = previous;
+        }, 1400);
+      };
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(value).then(done, function () {});
+        return;
+      }
+      var area = el('textarea', { style: 'position:fixed;opacity:0' });
+      area.value = value;
+      document.body.appendChild(area);
+      area.select();
+      try { document.execCommand('copy'); done(); } catch (error) { /* ignore */ }
+      document.body.removeChild(area);
+    };
+    run();
+  }
+
+  function copyButton(label, value) {
+    return el('button', {
+      type: 'button',
+      class: 'btn',
+      'aria-label': 'Copiar ' + label,
+      text: label,
+      onclick: function (event) { copyValue(value, event.currentTarget); }
+    });
+  }
+
+  /* \u2500\u2500 Theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function systemTheme() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  }
+
+  function currentTheme() {
+    var stored = document.documentElement.dataset.theme;
+    if (stored === 'light' || stored === 'dark') return stored;
+    return systemTheme();
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+    try { localStorage.setItem(THEME_KEY, theme); } catch (error) { /* private mode */ }
+    var button = q('[data-theme-toggle]');
+    if (!button) return;
+    var isLight = theme === 'light';
+    button.setAttribute('aria-pressed', isLight ? 'true' : 'false');
+    button.setAttribute('aria-label', isLight ? 'Cambiar al tema oscuro' : 'Cambiar al tema claro');
+  }
+
+  function toggleTheme() {
+    applyTheme(currentTheme() === 'light' ? 'dark' : 'light');
+  }
+
+  /* \u2500\u2500 Data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function fetchJson(url) {
+    return fetch(url, { headers: { accept: 'application/json' } }).then(function (response) {
+      if (response.ok) return response.json();
+      return response.json().catch(function () { return {}; }).then(function (body) {
+        var error = new Error(body.error || 'La solicitud fall\xF3 (' + response.status + ')');
+        error.status = response.status;
+        throw error;
+      });
+    });
+  }
+
+  function loadSkills() {
+    if (state.skills) return Promise.resolve(state.skills);
+    return fetchJson('/api/skills').then(function (data) {
+      state.skills = data;
+      return data;
+    });
+  }
+
+  function loadSpecs() {
+    if (state.specs) return Promise.resolve(state.specs);
+    return fetchJson('/api/specs').then(function (data) {
+      state.specs = data;
+      return data;
+    });
+  }
+
+  /* \u2500\u2500 Routing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function route() {
+    var raw = (location.hash || '#/skills').replace(/^#\\/?/, '');
+    var parts = raw.split('/').map(function (part) {
+      try { return decodeURIComponent(part); } catch (error) { return part; }
+    });
+    state.view = parts[0] === 'specs' ? 'specs' : 'skills';
+    if (state.view === 'skills') {
+      if (parts.length >= 4) {
+        state.scope = parts[1] === 'project' ? 'project' : 'global';
+        state.skillKey = parts.slice(2).join('/');
+      }
+    } else {
+      var nextPath = parts.slice(1).join('/') || null;
+      if (state.doc && state.doc.path !== nextPath) state.doc = null;
+      state.specPath = nextPath;
+    }
+    render();
+    // Cambiar de ruta tiene que pedir el documento: render() s\xF3lo dibuja el
+    // estado que ya tiene en memoria.
+    if (state.view === 'specs') loadSpecDoc();
+  }
+
+  function navigate(hash) {
+    if (location.hash === hash) render();
+    else location.hash = hash;
+  }
+
+  function skillHash(target, name) {
+    return '#/skills/' + state.scope + '/' + encodeURIComponent(target) + '/' + encodeURIComponent(name);
+  }
+
+  function specHash(path) {
+    return '#/specs/' + path.split('/').map(encodeURIComponent).join('/');
+  }
+
+  /* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function syncShell() {
+    qa('[data-view]').forEach(function (tab) {
+      tab.setAttribute('aria-selected', tab.dataset.view === state.view ? 'true' : 'false');
+    });
+    qa('[data-view-panel]').forEach(function (panel) {
+      panel.dataset.active = panel.dataset.viewPanel === state.view ? 'true' : 'false';
+    });
+    var skillsCount = q('[data-count="skills"]');
+    var specsCount = q('[data-count="specs"]');
+    if (skillsCount && state.skills) {
+      skillsCount.textContent = String(state.skills.totals.global + state.skills.totals.project);
+    }
+    if (specsCount && state.specs) {
+      specsCount.textContent = String(state.specs.totals.files);
+    }
+    var counts = q('[data-status-counts]');
+    if (counts) {
+      var bits = [];
+      if (state.skills) bits.push(state.skills.totals.global + ' skills globales');
+      if (state.skills) bits.push(state.skills.totals.project + ' skills del proyecto');
+      if (state.specs) bits.push(state.specs.totals.files + ' archivos de specs');
+      counts.textContent = bits.join(' \xB7 ');
+    }
+    var root = q('[data-status-root]');
+    if (root) {
+      root.textContent = shortPath(meta.projectRoot || '');
+      root.title = meta.projectRoot || '';
+    }
+  }
+
+  function emptyState(options) {
+    return el('div', { class: 'empty' }, [
+      el('p', { class: 'empty__title', text: options.title }),
+      options.text ? el('p', { class: 'empty__text', text: options.text }) : null,
+      options.path ? el('p', { class: 'empty__path', text: options.path }) : null,
+      options.hint ? el('p', { class: 'empty__hint', text: options.hint }) : null
+    ]);
+  }
+
+  function renderError(container, error) {
+    container.textContent = '';
+    container.appendChild(emptyState({
+      title: 'El studio no pudo leer esto',
+      text: error && error.message ? error.message : 'Error desconocido.',
+      hint: 'Volv\xE9 a ejecutar fwinit studio desde la ra\xEDz del proyecto.'
+    }));
+  }
+
+  /* \u2500\u2500 Skills view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function visibleSkills(report, scope) {
+    var filter = state.filter.skills.trim().toLowerCase();
+    var out = [];
+    (report.targets || []).forEach(function (target) {
+      (target.skills || []).forEach(function (skill) {
+        if (skill.scope !== scope) return;
+        if (filter) {
+          var haystack = (skill.name + ' ' + (skill.description || '') + ' ' + (skill.version || '')).toLowerCase();
+          if (haystack.indexOf(filter) === -1) return;
+        }
+        out.push(skill);
+      });
+    });
+    return out;
+  }
+
+  function skillMetaLine(skill) {
+    var bits = [];
+    bits.push(skill.files + (skill.files === 1 ? ' archivo' : ' archivos'));
+    if (skill.version) bits.push('v' + skill.version);
+    if (skill.hasCommand) bits.push('command');
+    return bits.join(' \xB7 ');
+  }
+
+  function renderSkillList() {
+    var container = q('[data-list="skills"]');
+    if (!container) return;
+    container.textContent = '';
+    var report = state.skills;
+    if (!report) {
+      container.appendChild(el('p', { class: 'loading', text: 'Leyendo las skills instaladas\u2026' }));
+      return;
+    }
+    var shown = visibleSkills(report, state.scope);
+    if (!shown.length) {
+      container.appendChild(emptyState({
+        title: state.filter.skills ? 'Ninguna skill coincide con el filtro' : 'No hay skills en este alcance',
+        text: state.filter.skills
+          ? 'Limpi\xE1 el filtro para ver todo lo instalado.'
+          : 'Instalalas con: fwinit skills --global ' + state.scope,
+        hint: String(shown.length) + ' de ' + String(report.totals[state.scope]) + ' en este alcance'
+      }));
+    }
+    (report.targets || []).forEach(function (target) {
+      var skills = (target.skills || []).filter(function (skill) {
+        return skill.scope === state.scope && shown.indexOf(skill) !== -1;
+      });
+      var dir = state.scope === 'global' ? target.globalDir : target.projectDir;
+      var exists = state.scope === 'global' ? target.globalExists : target.projectExists;
+      var collapsed = state.collapsed[state.scope + ':' + target.id] === true;
+      var group = el('div', { class: 'group' });
+
+      group.appendChild(el('button', {
+        type: 'button',
+        class: 'group__head',
+        'aria-expanded': collapsed ? 'false' : 'true',
+        onclick: function () {
+          state.collapsed[state.scope + ':' + target.id] = !collapsed;
+          renderSkillList();
+        }
+      }, [
+        target.label,
+        el('span', { class: 'group__count', text: String(skills.length) })
+      ]));
+
+      if (!collapsed) {
+        group.appendChild(el('p', { class: 'group__path', title: dir, text: shortPath(dir) }));
+        if (!exists || !skills.length) {
+          group.appendChild(el('p', {
+            class: 'row--empty',
+            text: exists ? 'No hay skills ac\xE1' : 'No instalado'
+          }));
+        }
+        skills.forEach(function (skill) {
+          var key = skill.target + '/' + skill.name;
+          group.appendChild(el('button', {
+            type: 'button',
+            class: 'row',
+            'aria-current': state.skillKey === key ? 'true' : 'false',
+            title: skill.description || skill.name,
+            onclick: function () { navigate(skillHash(skill.target, skill.name)); }
+          }, [
+            el('span', { class: 'row__name', text: skill.name }),
+            el('span', { class: 'row__meta', text: skillMetaLine(skill) })
+          ]));
+        });
+      }
+      container.appendChild(group);
+    });
+    // Avisos del reporte (directorios ilegibles o symlinks salteados): sin esto
+    // una skill salteada desaparece de la lista sin explicaci\xF3n.
+    (report.warnings || []).forEach(function (warning) {
+      container.appendChild(el('p', { class: 'row--empty', text: 'Aviso: ' + warning }));
+    });
+  }
+
+  function selectedSkill() {
+    if (!state.skills || !state.skillKey) return null;
+    var parts = state.skillKey.split('/');
+    var target = parts[0];
+    var name = parts.slice(1).join('/');
+    var found = null;
+    (state.skills.targets || []).forEach(function (entry) {
+      if (entry.id !== target) return;
+      (entry.skills || []).forEach(function (skill) {
+        if (skill.scope !== state.scope) return;
+        if (skill.name !== name) return;
+        found = skill;
+      });
+    });
+    return found;
+  }
+
+  function metaRow(key, value, strong) {
+    return el('div', { class: 'meta__row' }, [
+      el('span', { class: 'meta__key', text: key }),
+      el('span', { class: 'meta__value' + (strong ? ' meta__value--strong' : ''), text: value === undefined || value === '' ? '\u2014' : String(value) })
+    ]);
+  }
+
+  function renderSkillDetail() {
+    var container = q('[data-detail="skills"]');
+    if (!container) return;
+    container.textContent = '';
+    if (!state.skills) {
+      container.appendChild(el('p', { class: 'loading', text: 'Leyendo las skills instaladas\u2026' }));
+      return;
+    }
+    var skill = selectedSkill();
+    if (!skill) {
+      var target = (state.skills.targets || [])[0] || null;
+      var dir = target ? (state.scope === 'global' ? target.globalDir : target.projectDir) : '';
+      container.appendChild(emptyState({
+        title: 'Eleg\xED una skill',
+        text: 'Las skills de este alcance est\xE1n a la izquierda, agrupadas por la herramienta que las lee.',
+        path: dir ? shortPath(dir) : undefined,
+        hint: 'fwinit skills --global opencode|pi|gentle-shell'
+      }));
+      return;
+    }
+    var report = null;
+    (state.skills.targets || []).forEach(function (entry) {
+      if (entry.id === skill.target) report = entry;
+    });
+
+    container.appendChild(el('header', null, [
+      el('p', { class: 'eyebrow', text: (report ? report.label : skill.target) + ' \xB7 ' + skill.scope }),
+      el('h1', { class: 'detail__title', text: skill.name }),
+      el('p', { class: 'detail__lede', text: skill.description || 'Esta skill no tiene descripci\xF3n en su frontmatter.' }),
+      el('div', { class: 'detail__actions' }, [
+        copyButton('Copiar ruta', skill.path),
+        copyButton('Copiar nombre', skill.name),
+        skill.version ? el('span', { class: 'badge badge--accent', text: 'v' + skill.version }) : null,
+        el('span', { class: 'badge badge--muted', text: skill.files + (skill.files === 1 ? ' archivo' : ' archivos') }),
+        skill.hasCommand ? el('span', { class: 'badge badge--muted', text: 'command.md' }) : null
+      ])
+    ]));
+
+    container.appendChild(el('div', { class: 'meta' }, [
+      metaRow('Directorio', shortPath(skill.dir), true),
+      metaRow('Archivo', skill.path.replace(meta.projectRoot || '', '')),
+      metaRow('Destino', report ? report.label : skill.target),
+      metaRow('Alcance', skill.scope === 'global' ? 'instalaci\xF3n global del usuario' : 'este proyecto'),
+      metaRow('Versi\xF3n', skill.version),
+      metaRow('Licencia', skill.license),
+      metaRow('Autor', skill.author),
+      metaRow('Archivos', String(skill.files)),
+      metaRow('Tama\xF1o', fmtBytes(skill.bytes)),
+      metaRow('Modificado', fmtDate(skill.modified))
+    ]));
+
+    if (skill.warnings && skill.warnings.length) {
+      container.appendChild(el('div', { class: 'meta' }, skill.warnings.map(function (warning) {
+        return el('div', { class: 'meta__row' }, [
+          el('span', { class: 'meta__key', text: 'Aviso' }),
+          el('span', { class: 'meta__value', text: warning })
+        ]);
+      })));
+    }
+  }
+
+  /* \u2500\u2500 Specs view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function matchesFilter(node, filter) {
+    if (!filter) return true;
+    if (node.path.toLowerCase().indexOf(filter) !== -1) return true;
+    return (node.children || []).some(function (child) { return matchesFilter(child, filter); });
+  }
+
+  function renderTreeNodes(nodes, depth, container) {
+    var filter = state.filter.specs.trim().toLowerCase();
+    (nodes || []).forEach(function (node) {
+      if (!matchesFilter(node, filter)) return;
+      if (node.type === 'dir') {
+        var key = node.path;
+        var open = filter ? true : (state.expanded[key] === true || (state.expanded[key] !== false && depth < 2));
+        container.appendChild(el('button', {
+          type: 'button',
+          class: 'row row--dir',
+          'aria-expanded': open ? 'true' : 'false',
+          onclick: function () {
+            state.expanded[key] = !open;
+            renderSpecTree();
+          }
+        }, [
+          el('span', { class: 'tree__toggle' }, [
+            el('span', { class: 'tree__chevron', dataset: { open: open ? 'true' : 'false' }, text: '\u203A' }),
+            node.name
+          ]),
+          el('span', { class: 'row__meta', text: String(countFiles(node)) + ' arch.' })
+        ]));
+        if (open) {
+          var kids = el('div', { class: 'tree__children' });
+          renderTreeNodes(node.children, depth + 1, kids);
+          container.appendChild(kids);
+        }
+        return;
+      }
+      container.appendChild(el('button', {
+        type: 'button',
+        class: 'row row--file',
+        'aria-current': state.specPath === node.path ? 'true' : 'false',
+        title: node.path,
+        onclick: function () { navigate(specHash(node.path)); }
+      }, [
+        el('span', { class: 'row__name', text: node.name }),
+        el('span', { class: 'row__meta', text: fmtBytes(node.bytes) })
+      ]));
+    });
+  }
+
+  function countFiles(node) {
+    if (node.type === 'file') return 1;
+    var total = 0;
+    (node.children || []).forEach(function (child) { total += countFiles(child); });
+    return total;
+  }
+
+  function renderSpecTree() {
+    var container = q('[data-list="specs"]');
+    if (!container) return;
+    container.textContent = '';
+    var specs = state.specs;
+    if (!specs) {
+      container.appendChild(el('p', { class: 'loading', text: 'Buscando specs/\u2026' }));
+      return;
+    }
+    if (!specs.found) {
+      container.appendChild(el('p', { class: 'row--empty', text: 'Este proyecto no tiene carpeta specs/' }));
+      return;
+    }
+    if (!specs.tree.length) {
+      container.appendChild(el('p', { class: 'row--empty', text: 'specs/ est\xE1 vac\xEDa' }));
+      return;
+    }
+    var tree = el('div', { class: 'tree' });
+    renderTreeNodes(specs.tree, 0, tree);
+    container.appendChild(tree);
+  }
+
+  var SANITIZE_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'link', 'meta', 'form', 'base', 'noscript'];
+
+  function sanitize(html) {
+    var doc = new DOMParser().parseFromString('<div id="studio-root">' + html + '</div>', 'text/html');
+    var root = doc.getElementById('studio-root');
+    if (!root) return '';
+    qa(SANITIZE_TAGS.join(','), root).forEach(function (node) { node.remove(); });
+    qa('*', root).forEach(function (node) {
+      Array.prototype.slice.call(node.attributes).forEach(function (attribute) {
+        var name = attribute.name.toLowerCase();
+        if (name.indexOf('on') === 0 || name === 'style' || name === 'srcdoc') {
+          node.removeAttribute(attribute.name);
+          return;
+        }
+        if (name === 'href' || name === 'src' || name === 'xlink:href') {
+          var value = String(attribute.value).trim().toLowerCase();
+          var safe = value.indexOf('http://') === 0 || value.indexOf('https://') === 0 ||
+            value.indexOf('mailto:') === 0 || value.indexOf('#') === 0;
+          if (!safe) node.removeAttribute(attribute.name);
+        }
+      });
+    });
+    return root.innerHTML;
+  }
+
+  function renderToc(headings) {
+    var list = q('[data-toc-list]');
+    if (!list) return;
+    list.textContent = '';
+    state.tocLinks = [];
+    var items = (headings || []).filter(function (heading) { return heading.level >= 2 && heading.level <= 3; });
+    if (!items.length) {
+      list.appendChild(el('p', { class: 'empty__hint', text: 'Sin secciones' }));
+      return;
+    }
+    items.forEach(function (heading) {
+      var link = el('a', {
+        class: 'toc__link',
+        href: '#' + heading.id,
+        dataset: { level: String(heading.level), target: heading.id },
+        text: heading.text,
+        onclick: function (event) {
+          event.preventDefault();
+          var target = document.getElementById(heading.id);
+          if (target) target.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        }
+      });
+      list.appendChild(link);
+      state.tocLinks.push(link);
+    });
+  }
+
+  function renderSpecDoc() {
+    var container = q('[data-detail="specs"]');
+    if (!container) return;
+    var specs = state.specs;
+    if (!specs) {
+      container.textContent = '';
+      container.appendChild(el('p', { class: 'loading', text: 'Buscando specs/\u2026' }));
+      return;
+    }
+    if (!specs.found) {
+      container.textContent = '';
+      container.appendChild(emptyState({
+        title: 'Este proyecto todav\xEDa no tiene specs/',
+        text: 'El studio busca specs/ en la ra\xEDz del proyecto. Creala con la skill create-specs y recarg\xE1 la p\xE1gina.',
+        path: specs.projectRoot + '/specs',
+        hint: 'Skill: create-specs \xB7 /create-specs'
+      }));
+      renderToc([]);
+      return;
+    }
+    var doc = state.doc;
+    if (!doc) {
+      container.textContent = '';
+      container.appendChild(
+        state.specPath ? el('p', { class: 'loading', text: 'Leyendo la spec\u2026' }) : emptyState({
+          title: 'Eleg\xED un documento',
+          text: 'El \xE1rbol de la izquierda es el specs/ de este proyecto, ordenado como lo escribe la skill create-specs.',
+          path: specs.root ? shortPath(specs.root) : undefined,
+          hint: specs.totals.files + ' archivos \xB7 ' + fmtBytes(specs.totals.bytes)
+        })
+      );
+      renderToc([]);
+      return;
+    }
+    container.textContent = '';
+    container.appendChild(el('header', { class: 'doc-head' }, [
+      el('p', { class: 'doc-head__path', text: 'specs/' + doc.path }),
+      el('h1', { class: 'doc-head__title', text: doc.title }),
+      el('div', { class: 'doc-head__stats' }, [
+        el('span', { text: fmtBytes(doc.bytes) }),
+        el('span', { text: 'modificado ' + fmtDate(doc.modified) }),
+        el('span', { text: (doc.headings ? doc.headings.length : 0) + ' t\xEDtulos' }),
+        copyButton('Copiar ruta', doc.absolutePath)
+      ])
+    ]));
+    var article = el('article', { class: 'doc' });
+    article.innerHTML = sanitize(doc.html || '');
+    // El t\xEDtulo ya vive en la cabecera del documento: repetirlo en el cuerpo
+    // deja dos h1 iguales en la misma p\xE1gina.
+    var duplicateTitle = q('h1', article);
+    if (duplicateTitle && duplicateTitle.textContent.trim() === doc.title.trim()) {
+      duplicateTitle.remove();
+    }
+    qa('[data-spec-link]', article).forEach(function (link) {
+      link.addEventListener('click', function (event) {
+        event.preventDefault();
+        var target = link.getAttribute('data-spec-link');
+        if (!target) return;
+        // El server ya reescribi\xF3 el target como path desde specs/: resolverlo
+        // otra vez contra doc.path duplicar\xEDa el prefijo (modules/x \u2192 docs/modules/x).
+        navigate(specHash(target));
+      });
+    });
+    container.appendChild(article);
+    if (doc.warnings && doc.warnings.length) {
+      container.appendChild(el('div', { class: 'meta' }, doc.warnings.map(function (warning) {
+        return el('div', { class: 'meta__row' }, [
+          el('span', { class: 'meta__key', text: 'Aviso' }),
+          el('span', { class: 'meta__value', text: warning })
+        ]);
+      })));
+    }
+    renderToc(doc.headings);
+    container.scrollTop = 0;
+  }
+
+  function loadSpecDoc() {
+    if (!state.specPath) {
+      state.doc = null;
+      renderSpecDoc();
+      return;
+    }
+    var path = state.specPath;
+    q('[data-list="specs"]');
+    fetchJson('/api/specs/file?path=' + encodeURIComponent(path)).then(function (doc) {
+      if (state.specPath !== path) return;
+      state.doc = doc;
+      renderSpecDoc();
+      renderSpecTree();
+    }, function (error) {
+      if (state.specPath !== path) return;
+      state.doc = null;
+      renderSpecDoc();
+      var container = q('[data-detail="specs"]');
+      if (container) {
+        container.textContent = '';
+        renderError(container, error);
+      }
+    });
+  }
+
+  /* \u2500\u2500 Render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  function render() {
+    syncShell();
+    if (state.view === 'skills') {
+      renderSkillList();
+      renderSkillDetail();
+      return;
+    }
+    renderSpecTree();
+    renderSpecDoc();
+  }
+
+  function bootSkills() {
+    loadSkills().then(function () {
+      // Elegir la primera skill no debe reescribir la URL: si el usuario lleg\xF3
+      // por un deep link a /specs, el hash ya es la ruta que eligi\xF3.
+      if (!state.skillKey) {
+        var first = visibleSkills(state.skills, state.scope)[0];
+        if (first) state.skillKey = first.target + '/' + first.name;
+      }
+      renderSkillList();
+      renderSkillDetail();
+      syncShell();
+    }, function (error) {
+      var list = q('[data-list="skills"]');
+      var detail = q('[data-detail="skills"]');
+      if (list) { list.textContent = ''; renderError(list, error); }
+      if (detail) { detail.textContent = ''; renderError(detail, error); }
+    });
+  }
+
+  function bootSpecs() {
+    loadSpecs().then(function (specs) {
+      renderSpecTree();
+      syncShell();
+      if (!state.specPath && specs.found) {
+        var firstFile = null;
+        var walk = function (nodes) {
+          (nodes || []).forEach(function (node) {
+            if (firstFile) return;
+            if (node.type === 'file') { firstFile = node; return; }
+            walk(node.children);
+          });
+        };
+        walk(specs.tree);
+        if (firstFile) state.specPath = firstFile.path;
+      }
+      loadSpecDoc();
+    }, function (error) {
+      var list = q('[data-list="specs"]');
+      var detail = q('[data-detail="specs"]');
+      if (list) { list.textContent = ''; renderError(list, error); }
+      if (detail) { detail.textContent = ''; renderError(detail, error); }
+    });
+  }
+
+  function boot() {
+    applyTheme(currentTheme());
+
+    var toggle = q('[data-theme-toggle]');
+    if (toggle) toggle.addEventListener('click', toggleTheme);
+
+    qa('[data-view]').forEach(function (tab) {
+      tab.addEventListener('click', function () { navigate('#/' + tab.dataset.view); });
+    });
+
+    qa('[data-scope]').forEach(function (button) {
+      button.addEventListener('click', function () {
+        state.scope = button.dataset.scope;
+        state.skillKey = null;
+        qa('[data-scope]').forEach(function (other) {
+          other.setAttribute('aria-pressed', other.dataset.scope === state.scope ? 'true' : 'false');
+        });
+        var first = state.skills ? visibleSkills(state.skills, state.scope)[0] : null;
+        if (first) {
+          state.skillKey = first.target + '/' + first.name;
+          history.replaceState(null, '', skillHash(first.target, first.name));
+        }
+        renderSkillList();
+        renderSkillDetail();
+        syncShell();
+      });
+    });
+
+    qa('[data-search]').forEach(function (input) {
+      input.addEventListener('input', function () {
+        state.filter[input.dataset.search] = input.value;
+        if (input.dataset.search === 'skills') {
+          renderSkillList();
+          return;
+        }
+        renderSpecTree();
+      });
+    });
+
+    document.addEventListener('keydown', function (event) {
+      var target = event.target;
+      var typing = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);
+      if (event.key === '/' && !typing) {
+        event.preventDefault();
+        var input = q('[data-search="' + state.view + '"]');
+        if (input) input.focus();
+        return;
+      }
+      if (event.key === 'Escape' && typing) {
+        target.value = '';
+        state.filter[state.view] = '';
+        render();
+        target.blur();
+        return;
+      }
+      if (typing || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key === 't') { toggleTheme(); return; }
+      if (event.key === '1') { navigate('#/skills'); return; }
+      if (event.key === '2') { navigate('#/specs'); return; }
+    });
+
+    var pane = q('[data-detail="specs"]');
+    if (pane) {
+      pane.addEventListener('scroll', function () {
+        if (!state.tocLinks.length) return;
+        var active = null;
+        for (var i = 0; i < state.tocLinks.length; i++) {
+          var heading = document.getElementById(state.tocLinks[i].dataset.target);
+          if (!heading) continue;
+          if (heading.getBoundingClientRect().top - pane.getBoundingClientRect().top <= 24) active = state.tocLinks[i];
+        }
+        state.tocLinks.forEach(function (link) {
+          link.setAttribute('aria-current', link === active ? 'true' : 'false');
         });
+      });
+    }
+
+    window.addEventListener('hashchange', route);
+
+    route();
+    bootSkills();
+    bootSpecs();
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
+  else boot();
+})();
+`;
+
+// src/studio/ui/styles.ts
+var STUDIO_CSS = `
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100vh;
+  background-color: var(--base);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--text-small);
+  line-height: var(--leading-body);
+  font-synthesis-weight: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition:
+    background-color var(--duration-base) ease,
+    color var(--duration-base) ease;
+}
+
+svg {
+  display: block;
+  flex: none;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+  transition: color var(--duration-fast) ease;
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+a:not(:hover) {
+  text-decoration-color: var(--accent-border);
+}
+
+button,
+input {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 60;
+  background: var(--surface-elevated);
+  border: 1px solid var(--accent-border);
+  padding: var(--space-2xs) var(--space-xs);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.skip:focus {
+  left: var(--space-sm);
+  top: var(--space-2xs);
+}
+
+/* \u2500\u2500 Top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.topbar {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 50;
+  height: var(--header-height);
+  background: var(--base);
+  border-bottom: var(--hairline-strong);
+}
+
+.topbar__inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-md);
+  height: 100%;
+  max-width: var(--container);
+  margin-inline: auto;
+  padding-inline: var(--container-pad);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  color: var(--text);
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-small);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.brand:hover {
+  color: var(--text);
+}
+
+.brand__glyph {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+  font-size: var(--text-caption);
+  font-weight: 700;
+}
+
+.brand__div {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.brand__page {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  height: 100%;
+}
+
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  height: 100%;
+  color: var(--text-secondary);
+  font-size: var(--text-small);
+  font-weight: 500;
+  transition: color var(--duration-fast) ease;
+}
+
+.tab::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--duration-base) var(--ease-out);
+}
+
+.tab:hover {
+  color: var(--text);
+}
+
+.tab[aria-selected='true'] {
+  color: var(--text);
+}
+
+.tab[aria-selected='true']::after {
+  transform: scaleX(1);
+}
+
+.tab__count {
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  color: var(--text-muted);
+}
+
+.tab[aria-selected='true'] .tab__count {
+  color: var(--accent);
+}
+
+.topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs);
+  padding: 0.125rem var(--space-2xs);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.badge--version {
+  color: var(--text-secondary);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.badge--accent {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+}
+
+.badge--muted {
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-3xs) var(--space-2xs);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  font-size: var(--text-caption);
+  transition:
+    color var(--duration-fast) ease,
+    border-color var(--duration-fast) ease,
+    background-color var(--duration-fast) ease;
+}
+
+.btn:hover {
+  color: var(--text);
+  border-color: var(--accent-border);
+  background: var(--surface-elevated);
+}
+
+.btn--icon {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  justify-content: center;
+}
+
+.btn[data-copied='true'] {
+  color: var(--success);
+  border-color: var(--success);
+}
+
+.theme-toggle .icon-sun {
+  display: none;
+}
+
+[data-theme='light'] .theme-toggle .icon-sun {
+  display: block;
+}
+
+[data-theme='light'] .theme-toggle .icon-moon {
+  display: none;
+}
+
+/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.shell {
+  padding-top: var(--header-height);
+  padding-bottom: 36px;
+  padding-inline: var(--container-pad);
+  height: 100vh;
+  max-width: var(--container);
+  margin-inline: auto;
+}
+
+.view {
+  display: none;
+  height: 100%;
+  border-inline: var(--hairline);
+}
+
+.view[data-active='true'] {
+  display: grid;
+}
+
+.view--skills {
+  grid-template-columns: 340px minmax(0, 1fr);
+}
+
+.view--specs {
+  grid-template-columns: 320px minmax(0, 1fr) 232px;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: var(--hairline-strong);
+  background: var(--surface);
+}
+
+.rail__head {
+  display: grid;
+  gap: var(--space-2xs);
+  padding: var(--space-sm);
+  border-bottom: var(--hairline-strong);
+}
+
+.rail__body {
+  overflow-y: auto;
+  padding: var(--space-2xs) 0 var(--space-lg);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+.rail__body::-webkit-scrollbar {
+  width: 10px;
+}
+
+.rail__body::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border: 3px solid var(--surface);
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: 0.375rem var(--space-2xs);
+  background: var(--base);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  transition: border-color var(--duration-fast) ease;
+}
+
+.field:focus-within {
+  border-color: var(--border-input);
+}
+
+.field__input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  color: var(--text);
+  font-size: var(--text-small);
+}
+
+.field__input::placeholder {
+  color: var(--text-muted);
+}
+
+.field kbd {
+  flex: none;
+  padding: 0 0.25rem;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  line-height: 1.4;
+}
+
+.segmented {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid var(--border);
+}
+
+.segmented button {
+  padding: 0.25rem var(--space-2xs);
+  color: var(--text-secondary);
+  background: var(--base);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.02em;
+  transition:
+    color var(--duration-fast) ease,
+    background-color var(--duration-fast) ease;
+}
+
+.segmented button + button {
+  border-left: 1px solid var(--border);
+}
+
+.segmented button:hover {
+  color: var(--text);
+}
+
+.segmented button[aria-pressed='true'] {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* \u2500\u2500 Rail groups and rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.group {
+  margin-top: var(--space-2xs);
+}
+
+.group__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2xs);
+  width: 100%;
+  padding: var(--space-3xs) var(--space-sm);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-align: left;
+}
+
+.group__head:hover {
+  color: var(--text-secondary);
+}
+
+.group__count {
+  margin-left: auto;
+  color: var(--text-muted);
+  letter-spacing: 0;
+}
+
+.group__path {
+  padding: 0 var(--space-sm) var(--space-3xs);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.row {
+  display: grid;
+  gap: 0.125rem;
+  width: 100%;
+  padding: var(--space-3xs) var(--space-sm);
+  border-left: 2px solid transparent;
+  color: var(--text-secondary);
+  text-align: left;
+  transition:
+    color var(--duration-fast) ease,
+    background-color var(--duration-fast) ease,
+    border-color var(--duration-fast) ease;
+}
+
+.row:hover {
+  color: var(--text);
+  background: var(--surface-elevated);
+}
+
+.row[aria-current='true'] {
+  color: var(--text);
+  background: var(--accent-soft);
+  border-left-color: var(--accent);
+}
+
+.row__name {
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row__meta {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row--dir .row__name {
+  color: var(--text-secondary);
+}
+
+.row--file[aria-current='true'] .row__name {
+  color: var(--accent);
+}
+
+.row--empty {
+  padding: var(--space-2xs) var(--space-sm);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  border-left: 2px dashed var(--border);
+  margin-left: var(--space-sm);
+}
+
+.tree {
+  display: grid;
+}
+
+.tree__children {
+  padding-left: var(--space-xs);
+  border-left: var(--hairline);
+  margin-left: var(--space-sm);
+}
+
+.tree__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs);
+}
+
+.tree__chevron {
+  transition: transform var(--duration-fast) ease;
+  color: var(--text-muted);
+}
+
+.tree__chevron[data-open='true'] {
+  transform: rotate(90deg);
+}
+
+/* \u2500\u2500 Panes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.pane {
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--space-lg) var(--space-xl) var(--space-2xl);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+.pane::-webkit-scrollbar {
+  width: 10px;
+}
+
+.pane::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border: 3px solid var(--base);
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs);
+  margin-bottom: var(--space-2xs);
+  padding: 0.125rem var(--space-2xs);
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.detail__title {
+  font-family: var(--font-mono);
+  font-size: clamp(1.5rem, 2.6vw, var(--text-h2));
+  font-weight: 600;
+  line-height: var(--leading-h2);
+  letter-spacing: -0.02em;
+  overflow-wrap: anywhere;
+}
+
+.detail__lede {
+  max-width: 68ch;
+  margin-top: var(--space-2xs);
+  color: var(--text-secondary);
+  font-size: var(--text-body);
+}
+
+.detail__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs);
+  margin-top: var(--space-sm);
+}
+
+.meta {
+  display: grid;
+  margin-top: var(--space-lg);
+  border-top: var(--hairline-strong);
+}
+
+.meta__row {
+  display: grid;
+  grid-template-columns: 132px minmax(0, 1fr);
+  gap: var(--space-sm);
+  align-items: baseline;
+  padding: var(--space-2xs) 0;
+  border-bottom: var(--hairline);
+}
+
+.meta__key {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.meta__value {
+  min-width: 0;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow-wrap: anywhere;
+}
+
+.meta__value--strong {
+  color: var(--text);
+}
+
+/* \u2500\u2500 Document \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.doc-head {
+  max-width: var(--text-column);
+  padding-bottom: var(--space-sm);
+  border-bottom: var(--hairline-strong);
+  margin-bottom: var(--space-md);
+}
+
+.doc-head__path {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow-wrap: anywhere;
+}
+
+.doc-head__title {
+  margin-top: var(--space-3xs);
+  font-size: clamp(1.5rem, 2.6vw, var(--text-h2));
+  font-weight: 600;
+  line-height: var(--leading-h2);
+  letter-spacing: -0.02em;
+}
+
+.doc-head__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs) var(--space-xs);
+  margin-top: var(--space-2xs);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.doc {
+  max-width: var(--text-column);
+  color: var(--text-secondary);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+}
+
+.doc > * + * {
+  margin-top: var(--space-sm);
+}
+
+.doc h1,
+.doc h2,
+.doc h3,
+.doc h4,
+.doc h5,
+.doc h6 {
+  color: var(--text);
+  font-weight: 600;
+  scroll-margin-top: calc(var(--header-height) + var(--space-md));
+  text-wrap: balance;
+}
+
+.doc h1 {
+  margin-top: var(--space-lg);
+  font-size: var(--text-h3);
+  line-height: var(--leading-h3);
+  letter-spacing: -0.015em;
+}
+
+.doc h2 {
+  margin-top: var(--space-lg);
+  padding-top: var(--space-2xs);
+  border-top: var(--hairline);
+  font-size: var(--text-h4);
+  line-height: var(--leading-h3);
+}
+
+.doc h3 {
+  margin-top: var(--space-md);
+  font-size: var(--text-body);
+  color: var(--text);
+}
+
+.doc h4,
+.doc h5,
+.doc h6 {
+  margin-top: var(--space-sm);
+  font-size: var(--text-small);
+  color: var(--text-secondary);
+}
+
+.doc strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.doc em {
+  font-style: italic;
+}
+
+.doc del {
+  color: var(--text-muted);
+}
+
+.doc a {
+  text-decoration-style: dashed;
+}
+
+.doc ul,
+.doc ol {
+  padding-left: 1.35em;
+}
+
+.doc li + li {
+  margin-top: 0.25em;
+}
+
+.doc li > ul,
+.doc li > ol {
+  margin-top: 0.25em;
+}
+
+.doc li::marker {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+/* Las listas de tareas ya traen su propio control: el bullet sobra. */
+.doc li:has(> input[type='checkbox']) {
+  list-style: none;
+  margin-left: -1.15em;
+}
+
+.doc input[type='checkbox'] {
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  margin-right: 0.5em;
+  border: 1px solid var(--border-input);
+  vertical-align: -1px;
+}
+
+.doc input[type='checkbox'][checked] {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.doc blockquote {
+  padding: var(--space-2xs) var(--space-sm);
+  border-left: 2px solid var(--accent-border);
+  background: var(--surface);
+  color: var(--text-secondary);
+}
+
+.doc blockquote p + p {
+  margin-top: var(--space-2xs);
+}
+
+.doc hr {
+  height: 0;
+  border: 0;
+  border-top: var(--hairline-strong);
+}
+
+.doc code {
+  padding: 0.125em 0.375em;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.86em;
+}
+
+.doc pre {
+  overflow-x: auto;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  scrollbar-width: thin;
+}
+
+.doc pre code {
+  padding: 0;
+  background: none;
+  color: var(--syn-variable);
+  font-size: var(--text-code);
+  line-height: 1.55;
+}
+
+.doc table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-small);
+}
+
+.doc th,
+.doc td {
+  padding: var(--space-3xs) var(--space-2xs);
+  border: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.doc th {
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.02em;
+  font-weight: 500;
+}
+
+.doc td {
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.doc .md-img {
+  display: inline-flex;
+  padding: 0 var(--space-3xs);
+  border: 1px dashed var(--border-strong);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+/* \u2500\u2500 Table of contents \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.toc {
+  overflow-y: auto;
+  padding: var(--space-lg) var(--space-sm);
+  border-left: var(--hairline-strong);
+  background: var(--surface);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+.toc__title {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.toc__list {
+  display: grid;
+  gap: 0.125rem;
+  margin-top: var(--space-2xs);
+}
+
+.toc__link {
+  display: block;
+  padding: 0.125rem var(--space-2xs);
+  border-left: 2px solid transparent;
+  color: var(--text-secondary);
+  font-size: var(--text-caption);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition:
+    color var(--duration-fast) ease,
+    border-color var(--duration-fast) ease;
+}
+
+.toc__link:hover {
+  color: var(--text);
+  border-left-color: var(--border-strong);
+}
+
+.toc__link[data-level='3'] {
+  padding-left: var(--space-sm);
+  color: var(--text-muted);
+}
+
+.toc__link[data-level='4'],
+.toc__link[data-level='5'],
+.toc__link[data-level='6'] {
+  display: none;
+}
+
+/* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.empty {
+  display: grid;
+  gap: var(--space-2xs);
+  max-width: 560px;
+  margin: var(--space-2xl) auto;
+  padding: var(--space-lg);
+  border: var(--hairline-strong);
+  background: var(--surface);
+  text-align: center;
+}
+
+.empty__title {
+  color: var(--text);
+  font-size: var(--text-h4);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.empty__text {
+  color: var(--text-secondary);
+  font-size: var(--text-small);
+}
+
+.empty__path {
+  margin-top: var(--space-2xs);
+  padding: var(--space-2xs);
+  background: var(--base);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  overflow-wrap: anywhere;
+}
+
+.empty__hint {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.loading {
+  padding: var(--space-lg) var(--space-sm);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+  animation: pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* \u2500\u2500 Status bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.statusbar {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  height: 36px;
+  padding-inline: var(--container-pad);
+  background: var(--base);
+  border-top: var(--hairline-strong);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.statusbar__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusbar__spacer {
+  flex: 1;
+}
+
+.statusbar__dot {
+  color: var(--success);
+  animation: pulse 2.4s ease-in-out infinite;
+}
+
+.statusbar kbd {
+  padding: 0 0.25rem;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+
+/* \u2500\u2500 Responsive: the landing page collapses the same way \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (max-width: 1100px) {
+  .view--specs {
+    grid-template-columns: 280px minmax(0, 1fr);
+  }
+
+  .toc {
+    display: none;
+  }
+}
+
+@media (max-width: 820px) {
+  .shell {
+    padding-inline: 0;
+  }
+
+  .topbar__inner,
+  .statusbar {
+    padding-inline: var(--space-sm);
+  }
+
+  .brand__div,
+  .brand__page {
+    display: none;
+  }
+
+  .view--skills,
+  .view--specs {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .rail {
+    border-right: 0;
+    border-bottom: var(--hairline-strong);
+    max-height: 42vh;
+  }
+
+  .pane {
+    padding: var(--space-md) var(--space-sm) var(--space-xl);
+  }
+
+  .statusbar__hint {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+
+// src/studio/ui/tokens.ts
+var TOKENS_CSS = `
+:root {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --base: #07090f;
+  --surface: #0b0e16;
+  --surface-elevated: #121623;
+  --code-bg: #121623;
+
+  /* Text: AA on all three surfaces */
+  --text: #eef2f8;
+  --text-secondary: #a8b2c4;
+  --text-muted: #77839a;
+
+  /* Electric blue accent scale */
+  --accent: #8aa2ff;
+  --accent-hover: #a6b8ff;
+  --accent-active: #6f8ae6;
+  --accent-soft: #16203a;
+  --accent-soft-hover: #1d2a4d;
+  --accent-border: #3d4a7a;
+
+  /* Semantics */
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --error: #f87171;
+  --on-accent: #07090f;
+
+  /* Borders */
+  --border: #1e2433;
+  --border-strong: #2c3446;
+  --border-input: #5f6b8a;
+
+  /* Structural lines are dashed by design; control borders stay solid */
+  --hairline: 1px dashed var(--border);
+  --hairline-strong: 1px dashed var(--border-strong);
+
+  /* Focus */
+  --focus-ring: var(--accent);
+  --focus-ring-offset: var(--base);
+
+  /* Only two shadows exist */
+  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.28);
+  --shadow-header: 0 1px 0 var(--border);
+
+  /* Scrim */
+  --scrim: rgb(3 6 12 / 0.6);
+
+  /* Typography */
+  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI',
+    Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
+    SFMono-Regular, Menlo, Consolas, monospace;
+
+  --text-display: 3.75rem;
+  --text-h1: 2.75rem;
+  --text-h2: 2.125rem;
+  --text-h3: 1.5rem;
+  --text-h4: 1.1875rem;
+  --text-body: 1.0625rem;
+  --text-small: 0.9375rem;
+  --text-caption: 0.8125rem;
+  --text-code: 0.875rem;
+
+  --leading-display: 1.1;
+  --leading-h1: 1.15;
+  --leading-h2: 1.2;
+  --leading-h3: 1.3;
+  --leading-body: 1.6;
+
+  /* Spacing */
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  --space-4xl: 7.5rem;
+
+  /* Radii: square corners everywhere, roles kept for a one-line rollback */
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-pill: 0px;
+
+  /* Layout */
+  --container: 1300px;
+  --container-pad: 48px;
+  --text-column: 800px;
+  --hero-column: 560px;
+  --header-height: 72px;
+
+  /* Motion */
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-reveal: 400ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Syntax, >= 4.5 on --code-bg in both themes */
+  --syn-comment: #77839a;
+  --syn-keyword: #a78bfa;
+  --syn-string: #86efac;
+  --syn-number: #fbbf24;
+  --syn-function: #7dd3fc;
+  --syn-type: #f0abfc;
+  --syn-variable: #e6edf7;
+  --syn-tag: #f87171;
+  --syn-operator: #9aa5b8;
+  --syn-punctuation: #8b95a8;
+}
+
+/* Light theme: same roles, measured values. Both blocks are the same theme:
+   one answers the system preference when the user has not chosen, the other
+   answers the stored choice. Keep them identical. */
+[data-theme='light'] {
+  color-scheme: light;
+
+  --base: #ffffff;
+  --surface: #f7f8fb;
+  --surface-elevated: #eef1f7;
+  --code-bg: #eef1f7;
+
+  --text: #0d1220;
+  --text-secondary: #454f63;
+  --text-muted: #5c6678;
+
+  --accent: #3d54d4;
+  --accent-hover: #2b3ea8;
+  --accent-active: #24337f;
+  --accent-soft: #eaeeff;
+  --accent-soft-hover: #dde3ff;
+  --accent-border: #b9c2ee;
+
+  --success: #166534;
+  --warning: #78350f;
+  --error: #b91c1c;
+  --on-accent: #ffffff;
+
+  --border: #dfe3ec;
+  --border-strong: #c3cad8;
+  --border-input: #828b9c;
+
+  --shadow-pop: 0 8px 24px rgb(13 18 32 / 0.1);
+  --scrim: rgb(13 18 32 / 0.5);
+
+  --syn-comment: #5c6678;
+  --syn-keyword: #7c3aed;
+  --syn-string: #166534;
+  --syn-number: #92400e;
+  --syn-function: #0e7490;
+  --syn-type: #a21caf;
+  --syn-variable: #0d1220;
+  --syn-tag: #b91c1c;
+  --syn-operator: #5c6678;
+  --syn-punctuation: #5c6678;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    color-scheme: light;
+
+    --base: #ffffff;
+    --surface: #f7f8fb;
+    --surface-elevated: #eef1f7;
+    --code-bg: #eef1f7;
+
+    --text: #0d1220;
+    --text-secondary: #454f63;
+    --text-muted: #5c6678;
+
+    --accent: #3d54d4;
+    --accent-hover: #2b3ea8;
+    --accent-active: #24337f;
+    --accent-soft: #eaeeff;
+    --accent-soft-hover: #dde3ff;
+    --accent-border: #b9c2ee;
+
+    --success: #166534;
+    --warning: #78350f;
+    --error: #b91c1c;
+    --on-accent: #ffffff;
+
+    --border: #dfe3ec;
+    --border-strong: #c3cad8;
+    --border-input: #828b9c;
+
+    --shadow-pop: 0 8px 24px rgb(13 18 32 / 0.1);
+    --scrim: rgb(13 18 32 / 0.5);
+
+    --syn-comment: #5c6678;
+    --syn-keyword: #7c3aed;
+    --syn-string: #166534;
+    --syn-number: #92400e;
+    --syn-function: #0e7490;
+    --syn-type: #a21caf;
+    --syn-variable: #0d1220;
+    --syn-tag: #b91c1c;
+    --syn-operator: #5c6678;
+    --syn-punctuation: #5c6678;
+  }
+}
+`;
+
+// src/studio/ui/document.ts
+var THEME_BOOTSTRAP = `(function(){try{var t=localStorage.getItem('fwinit:theme');if(t==='light'||t==='dark'){document.documentElement.dataset.theme=t;}}catch(e){}})();`;
+var ICON = {
+  search: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>',
+  moon: '<svg class="icon-moon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M13.2 9.4A5.6 5.6 0 0 1 6.6 2.8a5.6 5.6 0 1 0 6.6 6.6Z"/></svg>',
+  sun: '<svg class="icon-sun" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><circle cx="8" cy="8" r="3.2"/><path d="M8 1v1.6M8 13.4V15M1 8h1.6M13.4 8H15M3.05 3.05l1.13 1.13M11.82 11.82l1.13 1.13M12.95 3.05l-1.13 1.13M4.18 11.82l-1.13 1.13"/></svg>'
+};
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var FAVICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%2316203a'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' fill='none' stroke='%238aa2ff'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='16' font-weight='700' fill='%238aa2ff' text-anchor='middle'%3ES%3C/text%3E%3C/svg%3E";
+function renderStudioHtml(options) {
+  const meta = JSON.stringify({
+    version: options.version,
+    projectRoot: options.projectRoot,
+    home: options.home ?? ""
+  }).replace(/</g, "\\u003c");
+  return `<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="color-scheme" content="dark light" />
+<meta name="robots" content="noindex, nofollow" />
+<title>fwinit studio</title>
+<meta name="description" content="Vista local de las skills instaladas para opencode, pi y Gentle Shell, y de las specs de este proyecto." />
+<link rel="icon" href="${FAVICON}" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..600&family=JetBrains+Mono:wght@400;500;600&display=swap" />
+<script>${THEME_BOOTSTRAP}</script>
+<style>${TOKENS_CSS}</style>
+<style>${STUDIO_CSS}</style>
+</head>
+<body>
+<a class="skip" href="#main">Saltar al contenido</a>
+<header class="topbar">
+  <div class="topbar__inner">
+    <a class="brand" href="#/skills" aria-label="fwinit studio, inicio">
+      <span class="brand__glyph" aria-hidden="true">S</span>
+      <span class="brand__name">fwinit</span>
+      <span class="brand__div" aria-hidden="true">/</span>
+      <span class="brand__page">studio</span>
+    </a>
+    <nav class="tabs" aria-label="Secciones">
+      <button type="button" class="tab" role="tab" data-view="skills" aria-selected="true">
+        Skills <span class="tab__count" data-count="skills">\u2014</span>
+      </button>
+      <button type="button" class="tab" role="tab" data-view="specs" aria-selected="false">
+        Specs <span class="tab__count" data-count="specs">\u2014</span>
+      </button>
+    </nav>
+    <div class="topbar__actions">
+      <span class="badge badge--version">v${escapeHtml(options.version)}</span>
+      <button type="button" class="btn btn--icon theme-toggle" data-theme-toggle aria-pressed="false" aria-label="Cambiar al tema claro">
+        ${ICON.moon}${ICON.sun}
+      </button>
+    </div>
+  </div>
+</header>
+
+<main id="main" class="shell">
+  <section class="view view--skills" data-view-panel="skills" data-active="true" aria-label="Skills instaladas">
+    <aside class="rail">
+      <div class="rail__head">
+        <div class="field">
+          ${ICON.search}
+          <input class="field__input" type="search" data-search="skills" placeholder="Filtrar skills" aria-label="Filtrar skills" autocomplete="off" spellcheck="false" />
+          <kbd>/</kbd>
+        </div>
+        <div class="segmented" role="group" aria-label="Alcance">
+          <button type="button" data-scope="global" aria-pressed="true">Globales</button>
+          <button type="button" data-scope="project" aria-pressed="false">Proyecto</button>
+        </div>
+      </div>
+      <div class="rail__body" data-list="skills">
+        <p class="loading">Leyendo las skills instaladas\u2026</p>
+      </div>
+    </aside>
+    <section class="pane" data-detail="skills">
+      <p class="loading">Leyendo las skills instaladas\u2026</p>
+    </section>
+  </section>
+
+  <section class="view view--specs" data-view-panel="specs" data-active="false" aria-label="Specs del proyecto">
+    <aside class="rail">
+      <div class="rail__head">
+        <div class="field">
+          ${ICON.search}
+          <input class="field__input" type="search" data-search="specs" placeholder="Filtrar specs" aria-label="Filtrar specs" autocomplete="off" spellcheck="false" />
+          <kbd>/</kbd>
+        </div>
+      </div>
+      <div class="rail__body" data-list="specs">
+        <p class="loading">Buscando specs/\u2026</p>
+      </div>
+    </aside>
+    <section class="pane" data-detail="specs">
+      <p class="loading">Buscando specs/\u2026</p>
+    </section>
+    <aside class="toc" data-toc aria-label="En esta p\xE1gina">
+      <p class="toc__title">En esta p\xE1gina</p>
+      <div class="toc__list" data-toc-list></div>
+    </aside>
+  </section>
+</main>
+
+<footer class="statusbar">
+  <span class="statusbar__dot" aria-hidden="true">\u25CF</span>
+  <span class="statusbar__item" data-status-root title="">${escapeHtml(options.projectRoot)}</span>
+  <span class="statusbar__spacer"></span>
+  <span class="statusbar__item" data-status-counts></span>
+  <span class="statusbar__item statusbar__hint"><kbd>/</kbd> filtrar \xB7 <kbd>1</kbd><kbd>2</kbd> vista \xB7 <kbd>t</kbd> tema</span>
+</footer>
+
+<script type="application/json" id="studio-meta">${meta}</script>
+<script>${CLIENT_JS}</script>
+</body>
+</html>
+`;
+}
+
+// src/studio/open-browser.ts
+import { spawn, spawnSync } from "child_process";
+function openBrowser(url) {
+  const platform = process.platform;
+  if (platform === "darwin") {
+    return trySpawn("open", [url]);
+  }
+  if (platform === "win32") {
+    const result = spawnSync("cmd", ["/c", "start", '""', url], {
+      stdio: "ignore",
+      windowsHide: true
+    });
+    return !result.error && result.status === 0;
+  }
+  for (const command of ["xdg-open", "gio", "sensible-browser", "x-www-browser"]) {
+    const args = command === "gio" ? ["open", url] : [url];
+    if (trySpawn(command, args)) return true;
+  }
+  const configured = process.env.BROWSER?.trim();
+  if (configured) return trySpawn(configured, [url]);
+  return false;
+}
+function trySpawn(command, args) {
+  try {
+    const child = spawn(command, args, {
+      stdio: "ignore",
+      detached: true,
+      windowsHide: true
+    });
+    child.on("error", () => {
+    });
+    child.unref();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/studio/server.ts
+var HOST = "127.0.0.1";
+var LOOPBACK_HOSTNAMES = /* @__PURE__ */ new Set(["127.0.0.1", "localhost", "[::1]"]);
+function isAllowedHost(header, port) {
+  if (typeof header !== "string") return false;
+  const value = header.trim().toLowerCase();
+  if (value === "") return false;
+  if (value.startsWith("[")) {
+    const close = value.indexOf("]");
+    if (close === -1) return false;
+    const hostname2 = value.slice(0, close + 1);
+    const rest = value.slice(close + 1);
+    if (!LOOPBACK_HOSTNAMES.has(hostname2)) return false;
+    if (rest === "") return true;
+    return rest.startsWith(":") && rest.slice(1) !== "" && rest.slice(1) === String(port);
+  }
+  const colon = value.lastIndexOf(":");
+  const hostname = colon === -1 ? value : value.slice(0, colon);
+  if (!LOOPBACK_HOSTNAMES.has(hostname)) return false;
+  if (colon === -1) return true;
+  const requestedPort = value.slice(colon + 1);
+  return requestedPort !== "" && requestedPort === String(port);
+}
+var SECURITY_HEADERS = {
+  "X-Content-Type-Options": "nosniff",
+  "X-Frame-Options": "DENY",
+  "Referrer-Policy": "no-referrer",
+  "Cross-Origin-Opener-Policy": "same-origin",
+  // Everything is inline by design: one document, one stylesheet, one script.
+  // Only the font files are remote, and only from Google Fonts.
+  "Content-Security-Policy": [
+    "default-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'",
+    "frame-ancestors 'none'",
+    "img-src data:",
+    "style-src 'unsafe-inline' https://fonts.googleapis.com",
+    "font-src https://fonts.gstatic.com",
+    "script-src 'unsafe-inline'",
+    "connect-src 'self'"
+  ].join("; ")
+};
+var SPEC_ERROR_STATUS = {
+  invalid: 400,
+  outside: 403,
+  missing: 404,
+  unsupported: 415
+};
+function sendJson(response, status, body) {
+  const payload = JSON.stringify(body);
+  response.writeHead(status, {
+    ...SECURITY_HEADERS,
+    "Content-Type": "application/json; charset=utf-8",
+    "Content-Length": Buffer.byteLength(payload),
+    "Cache-Control": "no-store"
+  });
+  response.end(payload);
+}
+function sendHtml(response, html) {
+  response.writeHead(200, {
+    ...SECURITY_HEADERS,
+    "Content-Type": "text/html; charset=utf-8",
+    "Content-Length": Buffer.byteLength(html),
+    "Cache-Control": "no-store"
+  });
+  response.end(html);
+}
+function sendText(response, status, text) {
+  response.writeHead(status, {
+    ...SECURITY_HEADERS,
+    "Content-Type": "text/plain; charset=utf-8",
+    "Content-Length": Buffer.byteLength(text),
+    "Cache-Control": "no-store"
+  });
+  response.end(text);
+}
+async function startStudio(options = {}) {
+  const projectRoot = resolve3(options.projectRoot ?? process.cwd());
+  const version = options.version ?? "0.0.0";
+  const home = options.home;
+  let listeningPort = options.port ?? 0;
+  const server = createServer((request, response) => {
+    handle(request, response).catch((error) => {
+      if (response.headersSent) {
+        response.end();
+        return;
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      process.stderr.write(`fwinit studio: ${message}
+`);
+      sendJson(response, 500, { error: "No se pudo completar la solicitud." });
+    });
+  });
+  async function handle(request, response) {
+    const method = request.method ?? "GET";
+    if (method !== "GET" && method !== "HEAD") {
+      response.setHeader("Allow", "GET, HEAD");
+      sendJson(response, 405, { error: "M\xE9todo no permitido." });
+      return;
+    }
+    const hostPort = listeningPort || request.socket.localPort || 0;
+    if (!isAllowedHost(request.headers.host, hostPort)) {
+      sendJson(response, 403, { error: "Host no permitido." });
+      return;
+    }
+    const url2 = new URL(request.url ?? "/", `http://${HOST}`);
+    let pathname;
+    try {
+      pathname = decodeURIComponent(url2.pathname);
+    } catch {
+      sendJson(response, 400, { error: "Ruta inv\xE1lida." });
+      return;
+    }
+    if (pathname === "/" || pathname === "/index.html") {
+      sendHtml(
+        response,
+        renderStudioHtml({
+          version,
+          projectRoot,
+          home: home ?? process.env.HOME ?? ""
+        })
+      );
+      return;
+    }
+    if (pathname === "/health") {
+      sendJson(response, 200, { ok: true, projectRoot });
+      return;
+    }
+    if (pathname === "/api/meta") {
+      sendJson(response, 200, {
+        version,
+        projectRoot,
+        home: home ?? process.env.HOME ?? "",
+        platform: process.platform
+      });
+      return;
+    }
+    if (pathname === "/api/skills") {
+      sendJson(response, 200, await discoverSkills({ projectRoot, home }));
+      return;
+    }
+    if (pathname === "/api/specs") {
+      sendJson(response, 200, await buildSpecsTree(projectRoot));
+      return;
+    }
+    if (pathname === "/api/specs/file") {
+      const relativePath = url2.searchParams.get("path");
+      if (!relativePath) {
+        sendJson(response, 400, { error: "Falta el par\xE1metro path." });
+        return;
+      }
+      const specsRoot = join4(projectRoot, "specs");
+      try {
+        const file = await readSpecFile({ specsRoot, projectRoot }, relativePath);
+        sendJson(response, 200, file);
+      } catch (error) {
+        if (error instanceof SpecPathError) {
+          sendJson(response, SPEC_ERROR_STATUS[error.code] ?? 400, {
+            error: error.message,
+            code: error.code
+          });
+          return;
+        }
+        throw error;
       }
+      return;
     }
+    sendText(response, 404, "Not found");
   }
-  return { installs, skillDirs, commandDirs: ["commands"], missingRequired };
+  await new Promise((resolveListen, rejectListen) => {
+    const onError = (error) => {
+      server.off("listening", onListening);
+      rejectListen(error);
+    };
+    const onListening = () => {
+      server.off("error", onError);
+      resolveListen();
+    };
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(options.port ?? 0, HOST);
+  });
+  const address = server.address();
+  const port = address?.port ?? 0;
+  listeningPort = port;
+  const url = `http://${HOST}:${port}`;
+  const opened = options.open === false ? false : openBrowser(url);
+  void opened;
+  return {
+    address: { url, host: HOST, port },
+    close: () => new Promise((resolveClose) => {
+      server.close(() => resolveClose());
+      server.closeAllConnections?.();
+    })
+  };
 }
 
 // src/prompts.ts
@@ -872,24 +4178,24 @@ async function askGlobalSkillsToo() {
 }
 
 // src/global-skills.ts
-import { mkdir as mkdir2, cp as cp2, rm as rm2, readdir as readdir2, readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
-import { join as join2 } from "path";
+import { mkdir as mkdir2, cp as cp2, rm as rm2, readdir as readdir4, readFile as readFile4, writeFile as writeFile2 } from "fs/promises";
+import { join as join5 } from "path";
 function resolveGlobalTargets() {
   const home = process.env.HOME;
   if (!home) return [];
-  const gentleShellRoot = process.env.GENTLE_SHELL_HOME || join2(home, ".gentle-shell", "agent");
+  const gentleShellRoot = process.env.GENTLE_SHELL_HOME || join5(home, ".gentle-shell", "agent");
   return [
     {
       id: "opencode",
       label: `OpenCode global (${home}/.config/opencode)`,
-      root: join2(home, ".config", "opencode"),
+      root: join5(home, ".config", "opencode"),
       skillsDir: "skills",
       commandsDir: "command"
     },
     {
       id: "pi",
       label: `Pi global (${home}/.pi/agent)`,
-      root: join2(home, ".pi", "agent"),
+      root: join5(home, ".pi", "agent"),
       skillsDir: "skills",
       commandsDir: "prompts"
     },
@@ -903,7 +4209,7 @@ function resolveGlobalTargets() {
     {
       id: "agents",
       label: `Agent Skills global (${home}/.agents/skills)`,
-      root: join2(home, ".agents"),
+      root: join5(home, ".agents"),
       skillsDir: "skills"
     }
   ];
@@ -917,11 +4223,11 @@ function filterBundleByNames(only) {
 async function ensureGlobalOpencodeConfig() {
   const home = process.env.HOME;
   if (!home) return;
-  const configPath = join2(home, ".config", "opencode", "opencode.json");
+  const configPath = join5(home, ".config", "opencode", "opencode.json");
   try {
     let data;
     try {
-      const content = await readFile2(configPath, "utf-8");
+      const content = await readFile4(configPath, "utf-8");
       data = JSON.parse(content);
     } catch {
       data = { agent: {} };
@@ -951,7 +4257,7 @@ function mapPlanToTarget(plan, target) {
     if (item.to.startsWith("skills/")) {
       mapped.push({
         from: item.from,
-        to: join2(target.root, target.skillsDir, item.to.slice("skills/".length)),
+        to: join5(target.root, target.skillsDir, item.to.slice("skills/".length)),
         recursive: item.recursive
       });
       continue;
@@ -960,7 +4266,7 @@ function mapPlanToTarget(plan, target) {
       if (!target.commandsDir) continue;
       mapped.push({
         from: item.from,
-        to: join2(target.root, target.commandsDir, item.to.slice("commands/".length)),
+        to: join5(target.root, target.commandsDir, item.to.slice("commands/".length)),
         recursive: item.recursive
       });
       continue;
@@ -979,7 +4285,7 @@ async function installGlobalSkills(repoRoot, targets, bundle = AGENT_BUNDLE) {
           await rm2(item.to, { recursive: true, force: true });
         }
         await mkdir2(
-          item.recursive === true ? item.to : join2(item.to, ".."),
+          item.recursive === true ? item.to : join5(item.to, ".."),
           { recursive: true }
         );
         await cp2(item.from, item.to, {
@@ -1005,22 +4311,22 @@ async function uninstallGlobalSkills(targets, bundle = AGENT_BUNDLE) {
     try {
       const removed = [];
       for (const name of skillNames) {
-        await rm2(join2(target.root, target.skillsDir, name), {
+        await rm2(join5(target.root, target.skillsDir, name), {
           recursive: true,
           force: true
         });
         removed.push(`${target.skillsDir}/${name}`);
       }
       if (target.commandsDir) {
-        const cmdDir = join2(target.root, target.commandsDir);
+        const cmdDir = join5(target.root, target.commandsDir);
         for (const name of skillNames) {
-          await rm2(join2(cmdDir, `${name}.md`), { force: true });
+          await rm2(join5(cmdDir, `${name}.md`), { force: true });
           removed.push(`${target.commandsDir}/${name}.md`);
           try {
             const prefix = `${name}-`;
-            for (const f of await readdir2(cmdDir)) {
+            for (const f of await readdir4(cmdDir)) {
               if (f.startsWith(prefix) && f.endsWith(".md")) {
-                await rm2(join2(cmdDir, f), { force: true });
+                await rm2(join5(cmdDir, f), { force: true });
                 removed.push(`${target.commandsDir}/${f}`);
               }
             }
@@ -1038,7 +4344,7 @@ async function uninstallGlobalSkills(targets, bundle = AGENT_BUNDLE) {
 
 // src/utils.ts
 import { existsSync } from "fs";
-import { resolve } from "path";
+import { resolve as resolve4 } from "path";
 var PM_RUNNER = {
   npm: "npm",
   pnpm: "pnpm",
@@ -1069,7 +4375,7 @@ var BUN_SUBCOMMANDS = /* @__PURE__ */ new Set([
   "rebuild"
 ]);
 function getProjectPath(name) {
-  return resolve(process.cwd(), name);
+  return resolve4(process.cwd(), name);
 }
 function projectExists(name) {
   return existsSync(getProjectPath(name));
@@ -1138,10 +4444,10 @@ function adaptScriptToNode(script) {
   return s;
 }
 async function adaptToNodeRuntime(projectPath) {
-  const { readFile: readFile4, writeFile: writeFile3, readdir: readdir3 } = await import("fs/promises");
-  const { join: join4 } = await import("path");
-  const pkgPath = join4(projectPath, "package.json");
-  const pkg = JSON.parse(await readFile4(pkgPath, "utf-8"));
+  const { readFile: readFile6, writeFile: writeFile3, readdir: readdir5 } = await import("fs/promises");
+  const { join: join7 } = await import("path");
+  const pkgPath = join7(projectPath, "package.json");
+  const pkg = JSON.parse(await readFile6(pkgPath, "utf-8"));
   for (const key of Object.keys(pkg.scripts ?? {})) {
     pkg.scripts[key] = adaptScriptToNode(pkg.scripts[key]);
   }
@@ -1151,27 +4457,27 @@ async function adaptToNodeRuntime(projectPath) {
   delete pkg.devDependencies["bun-types"];
   await writeFile3(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
   async function walk(dir) {
-    const entries = await readdir3(dir, { withFileTypes: true });
+    const entries = await readdir5(dir, { withFileTypes: true });
     for (const entry of entries) {
-      const full = join4(dir, entry.name);
+      const full = join7(dir, entry.name);
       if (entry.isDirectory()) {
         if (entry.name !== "node_modules") await walk(full);
       } else if (entry.name.endsWith(".test.ts")) {
-        const content = await readFile4(full, "utf-8");
+        const content = await readFile6(full, "utf-8");
         if (content.includes("bun:test")) {
           await writeFile3(full, content.replaceAll('from "bun:test"', 'from "vitest"'));
         }
       }
     }
   }
-  const srcDir = join4(projectPath, "src");
+  const srcDir = join7(projectPath, "src");
   try {
     await walk(srcDir);
   } catch {
   }
-  const tsconfigPath = join4(projectPath, "tsconfig.json");
+  const tsconfigPath = join7(projectPath, "tsconfig.json");
   try {
-    const tsconfig = JSON.parse(await readFile4(tsconfigPath, "utf-8"));
+    const tsconfig = JSON.parse(await readFile6(tsconfigPath, "utf-8"));
     if (tsconfig.compilerOptions?.types?.includes("bun-types")) {
       delete tsconfig.compilerOptions.types;
       await writeFile3(tsconfigPath, JSON.stringify(tsconfig, null, 2) + "\n");
@@ -1181,8 +4487,8 @@ async function adaptToNodeRuntime(projectPath) {
 }
 async function writeRootGitignore(projectPath) {
   const { writeFile: writeFile3, access } = await import("fs/promises");
-  const { join: join4 } = await import("path");
-  const gitignorePath = join4(projectPath, ".gitignore");
+  const { join: join7 } = await import("path");
+  const gitignorePath = join7(projectPath, ".gitignore");
   try {
     await access(gitignorePath);
   } catch {
@@ -1195,12 +4501,12 @@ async function writeRootGitignore(projectPath) {
 async function gitInit(projectPath) {
   const { execFile } = await import("child_process");
   try {
-    await new Promise((resolve2, reject) => {
+    await new Promise((resolve5, reject) => {
       execFile(
         "git",
         ["init"],
         { cwd: projectPath },
-        (err) => err ? reject(err) : resolve2()
+        (err) => err ? reject(err) : resolve5()
       );
     });
     return true;
@@ -1210,8 +4516,8 @@ async function gitInit(projectPath) {
 }
 async function writeRootFiles(info) {
   const { writeFile: writeFile3 } = await import("fs/promises");
-  const { join: join4 } = await import("path");
-  const projectPath = resolve(process.cwd(), info.projectName);
+  const { join: join7 } = await import("path");
+  const projectPath = resolve4(process.cwd(), info.projectName);
   await writeRootGitignore(projectPath);
   const installB = info.backend.postInit?.install ? resolveCommand(info.backend.postInit.install, info.pm) : `${info.pm} install`;
   const devB = info.backend.postInit?.dev ? resolveCommand(info.backend.postInit.dev, info.pm) : `${info.pm} run dev`;
@@ -1226,7 +4532,7 @@ async function writeRootFiles(info) {
     "",
     `- \`backend/\` \u2014 ${info.backend.description}`,
     `- \`frontend/\` \u2014 ${info.frontend.description}`,
-    "- `.opencode/`, `.pi/` y `.agents/` \u2014 skills de agentes: `/create-prompt` para detallar tu idea, `/create-specs` para generar las specs, `/create-specs-from-code` para documentar un proyecto que ya existe, + biblioteca de dise\xF1o (dark-luxury, minimal-dashboard, minimal-light, neo-brutalist, glassmorphism). Mismo bundle en las 3 ubicaciones: OpenCode lee `.opencode/`; Pi y Gentle Shell leen `.pi/` (skills + prompt templates); los agentes Agent Skills leen `.agents/`",
+    "- `.opencode/`, `.pi/` y `.agents/` \u2014 skills de agentes: `/create-prompt` para detallar tu idea, `/create-specs` para generar las specs, `/create-specs-from-code` para documentar un proyecto que ya existe, + biblioteca de dise\xF1o con `/design` (estilos dark-luxury, docs-starship, minimal-dashboard, minimal-light, neo-brutalist, glassmorphism) y el cat\xE1logo search-driven `/design-ui-ux-pro-max` (requiere Python 3). Mismo bundle en las 3 ubicaciones: OpenCode lee `.opencode/`; Pi y Gentle Shell leen `.pi/` (skills + prompt templates); los agentes Agent Skills leen `.agents/`",
     "- `specs/` \u2014 especificaciones del proyecto",
     "",
     "## Backend",
@@ -1246,7 +4552,7 @@ async function writeRootFiles(info) {
     "```",
     ""
   ].join("\n");
-  await writeFile3(join4(projectPath, "README.md"), readme);
+  await writeFile3(join7(projectPath, "README.md"), readme);
 }
 
 // src/index.ts
@@ -1265,15 +4571,15 @@ var AGENT_DIRS = [".opencode", ".pi", ".agents"];
 async function installAgentSkills(repoRoot, projectPath) {
   const plan = await planAgentBundle(repoRoot);
   for (const agentDir of AGENT_DIRS) {
-    const root = join3(projectPath, agentDir);
+    const root = join6(projectPath, agentDir);
     for (const dir of plan.skillDirs) {
-      await mkdir3(join3(root, dir), { recursive: true });
+      await mkdir3(join6(root, dir), { recursive: true });
     }
     for (const dir of plan.commandDirs) {
-      await mkdir3(join3(root, dir), { recursive: true });
+      await mkdir3(join6(root, dir), { recursive: true });
     }
     for (const item of plan.installs) {
-      await cp3(item.from, join3(root, item.to), {
+      await cp3(item.from, join6(root, item.to), {
         recursive: item.recursive === true
       });
     }
@@ -1310,7 +4616,7 @@ async function installGlobalSkillsWithSpinner(targets, bundle) {
 async function readTemplatePostInit(dir) {
   try {
     const tj = JSON.parse(
-      await readFile3(join3(dir, "template.json"), "utf-8")
+      await readFile5(join6(dir, "template.json"), "utf-8")
     );
     return tj.postInit;
   } catch {
@@ -1320,14 +4626,14 @@ async function readTemplatePostInit(dir) {
 async function createFullStackProject(projectPath, backendTpl, frontendTpl, pm, org) {
   const { tempDir, repoRoot } = await downloadAndExtractRepo();
   const projectName = basename2(projectPath);
-  const backendPath = join3(projectPath, "backend");
-  const frontendPath = join3(projectPath, "frontend");
+  const backendPath = join6(projectPath, "backend");
+  const frontendPath = join6(projectPath, "frontend");
   await copyTemplate(
-    join3(repoRoot, "templates", backendTpl.folder),
+    join6(repoRoot, "templates", backendTpl.folder),
     backendPath
   );
   await copyTemplate(
-    join3(repoRoot, "templates", frontendTpl.folder),
+    join6(repoRoot, "templates", frontendTpl.folder),
     frontendPath
   );
   await substituteTemplate(backendPath, projectName, backendTpl.folder, {
@@ -1399,7 +4705,8 @@ async function runSkillsFlow(opts = {}) {
   console.log(chalk.bold("\nSkills disponibles:\n"));
   console.log(chalk.dim("  create-specs \u2014 specs para proyecto nuevo (/create-specs)"));
   console.log(chalk.dim("  create-specs-from-code \u2014 specs desde c\xF3digo existente (/create-specs-from-code)"));
-  console.log(chalk.dim("  design/ \u2014 dark-luxury, glassmorphism, minimal-dashboard, minimal-light, neo-brutalist (/design-<estilo>)\n"));
+  console.log(chalk.dim("  create-prompt \u2014 detalla una idea en specs/prompt.md (/create-prompt)"));
+  console.log(chalk.dim("  design/ \u2014 dark-luxury, glassmorphism, minimal-dashboard, minimal-light, neo-brutalist, docs-starship + cat\xE1logo ui-ux-pro-max (/design-<estilo>; el cat\xE1logo requiere Python 3)\n"));
   let bundle;
   if (opts.only) {
     const names = opts.only.split(",").map((s) => s.trim()).filter(Boolean);
@@ -1472,7 +4779,7 @@ program.command("skills").description(
   "Destinos separados por coma: opencode, pi, gentle-shell, agents (o 'all'). Saltea la pregunta"
 ).option(
   "-o, --only <skills>",
-  "Solo estas skills, separadas por coma: create-specs, create-specs-from-code, design"
+  "Solo estas skills, separadas por coma: create-specs, create-specs-from-code, create-prompt, design"
 ).option(
   "-r, --remove",
   "Eliminar en vez de instalar (combinar con --global y opcionalmente --only)"
@@ -1486,6 +4793,64 @@ program.command("skills").description(
     process.exit(1);
   }
 });
+program.command("studio").description(
+  "Abrir en el navegador las skills instaladas (OpenCode, Pi, Gentle Shell) y las specs/ del proyecto"
+).option(
+  "--port <puerto>",
+  "Puerto fijo para el servidor local (por defecto lo elige el sistema)"
+).option("--no-open", "No abrir el navegador autom\xE1ticamente").action(async (opts) => {
+  const rawPort = opts.port?.trim();
+  const port = rawPort === void 0 ? 0 : rawPort === "" ? NaN : Number(rawPort);
+  if (!Number.isInteger(port) || port < 0 || port > 65535) {
+    console.error(chalk.red(`
+\u2716 Error: puerto inv\xE1lido: ${opts.port}
+`));
+    process.exit(1);
+    return;
+  }
+  const projectRoot = process.cwd();
+  const home = process.env.HOME;
+  let skillsLine = "no disponible";
+  let specsLine = "no disponible";
+  try {
+    const report = await discoverSkills({ projectRoot, home });
+    skillsLine = `${report.totals.global + report.totals.project} (${report.totals.global} globales \xB7 ${report.totals.project} del proyecto)`;
+  } catch {
+  }
+  try {
+    const specs = await buildSpecsTree(projectRoot);
+    specsLine = specs.found ? `${specs.totals.files} archivos en specs/` : "sin carpeta specs/ (creala con la skill create-specs)";
+  } catch {
+  }
+  try {
+    const studio = await startStudio({
+      port,
+      projectRoot,
+      version: getCliVersion(),
+      open: opts.open !== false
+    });
+    console.log(chalk.bold("\n  fwinit studio\n"));
+    console.log(`  ${chalk.dim("Proyecto")}  ${projectRoot}`);
+    console.log(`  ${chalk.dim("Skills")}    ${skillsLine}`);
+    console.log(`  ${chalk.dim("Specs")}     ${specsLine}`);
+    console.log(`  ${chalk.dim("URL")}       ${chalk.cyan(studio.address.url)}`);
+    console.log(`
+  ${chalk.dim("Ctrl+C para cerrar")}
+`);
+    const shutdown = () => {
+      void studio.close().finally(() => process.exit(0));
+    };
+    process.once("SIGINT", shutdown);
+    process.once("SIGTERM", shutdown);
+  } catch (error) {
+    console.error(
+      chalk.red(`
+\u2716 Error: no se pudo abrir el studio: ${error.message}
+`)
+    );
+    process.exit(1);
+  }
+});
 program.argument("[template]", "Template a usar (o 'fullstack' para backend + frontend)").argument("[project-name]", "Nombre del proyecto").option("-p, --pm <package-manager>", "Package manager a usar: npm, pnpm o bun").option(
   "-o, --org <domain>",
   "Organizaci\xF3n reverse-domain para el bundle id de Flutter (ej: ar.miempresa)"
@@ -1638,7 +5003,7 @@ program.argument("[template]", "Template a usar (o 'fullstack' para backend + fr
         spinner.succeed("Template descargado");
       } else {
         const { tempDir, templatePath, repoRoot } = await downloadAndExtract(template.folder);
-        const codePath = useLayerLayout ? join3(projectPath, layer) : projectPath;
+        const codePath = useLayerLayout ? join6(projectPath, layer) : projectPath;
         spinner.text = "Creando proyecto...";
         await copyTemplate(templatePath, codePath);
         await substituteTemplate(codePath, projectName, template.folder, {