Elffuss Code — browser IDE with a local AI agent (WebGPU)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+og.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,48 @@
 ---
 title: Elffuss Code
-emoji: 🌖
-colorFrom: green
-colorTo: blue
+emoji: 🧑‍💻
+colorFrom: purple
+colorTo: pink
 sdk: static
+app_file: index.html
 pinned: false
+license: apache-2.0
+short_description: A VS Code-style IDE with a local AI agent, in-browser
+tags:
+  - webgpu
+  - transformers.js
+  - local-llm
+  - agent
+  - code
+  - gemma
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🧑‍💻 Elffuss Code — a VS Code-style IDE with an AI soul, 100% in your browser
+
+Open a local folder and a full web IDE unfolds around it — real Monaco (the VS Code editor),
+a file tree, tabs — with an AI agent that **reads, searches and edits your project for real**.
+The model runs on **your** GPU via WebGPU. Your code never leaves your machine.
+
+> ⚠️ **Open it full-screen** ([direct link](https://kikocis-elffuss-code.static.hf.space)) — the
+> File System Access API (opening a local folder) is blocked inside the embedded iframe.
+
+![demo](https://utopiaia.com/demos/elffuss/elffuss-code-demo.gif)
+
+In the demo a **small model running entirely in the browser** reads `calc.py`, finds a real
+bug and fixes it with a minimal edit — genuine tool-calling, not autocomplete.
+
+## Why it's different
+
+- **Your code stays local.** The folder is opened via the File System Access API — no upload, no account.
+- **The model runs on your GPU** (WebGPU, Gemma-4 via LiteRT-LM; ONNX/transformers.js + Qwen2.5-0.5B as fallback).
+- **Real tool-calling**: `code.tree`, `code.read`, `code.search`, `code.edit`, `code.write` — you watch every call.
+- **Real editor**: Monaco, file tree, tabs, `Ctrl+S`.
+- **Zero install, zero build.** Vanilla ES modules.
+- External providers (OpenAI, Anthropic, Ollama) are **opt-in**; keys stay in your browser.
+
+## Links
+
+- 🌐 Full app: <https://elffuss-code.utopiaia.com>
+- 💻 Source (Apache-2.0): <https://github.com/KikoCis/elffuss-code>
+- ✳️ Sibling project — Elffuss Claw (agentic OS): <https://github.com/KikoCis/elffuss-claw>
+- 🧬 Shared core: <https://github.com/KikoCis/elffuss>

css/code.css

@@ -0,0 +1,518 @@
+/* Elffuss Code — VS Code oscuro con alma élfica */
+:root {
+  --bg: #0b0d12; --bg2: #11141c; --bg3: #171b26; --line: #262c3d;
+  --fg: #e8ebf4; --muted: #8b93a8; --accent: #ff4d8d; --accent2: #7c5cff;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); overflow: hidden; }
+
+/* ---------- landing ---------- */
+#landing {
+  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
+  background: radial-gradient(1100px 700px at 50% 30%, #221740, #0b0d12 72%); text-align: center;
+}
+#landing[hidden] { display: none; }
+#landing canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
+#landing .l-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
+#landing .hero { width: 170px; filter: drop-shadow(0 12px 40px rgba(124,92,255,.35)); animation: float 5s ease-in-out infinite; }
+@keyframes float { 50% { transform: translateY(-9px); } }
+#landing h1 { margin: 4px 0 0; font-size: 2rem; }
+#landing h1 b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
+#landing .tag { color: var(--muted); margin: 0; line-height: 1.5; }
+#landing .tag b { color: var(--accent); }
+#open-project {
+  margin-top: 12px; padding: 14px 34px; font-size: 1.08rem; cursor: pointer; color: #fff;
+  border: none; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2));
+  box-shadow: 0 8px 30px rgba(255,77,141,.35);
+}
+#open-project:hover { filter: brightness(1.12); }
+#landing .ghost, .ghost {
+  background: none; color: var(--muted); border: 1px solid var(--line);
+  border-radius: 8px; padding: 8px 14px; cursor: pointer;
+}
+#landing .mini { font-size: .75rem; color: #5a6480; }
+.resume-clone { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: rgba(124,92,255,.12); border: 1px solid var(--accent2); border-radius: 999px; padding: 7px 8px 7px 16px; font-size: .78rem; color: var(--fg); }
+#resume-clone-btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 999px; padding: 6px 14px; font-size: .76rem; cursor: pointer; }
+.clone-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.clone-or { font-size: .72rem; color: #5a6480; }
+#clone-url { width: 300px; max-width: 60vw; background: var(--bg3); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 9px 16px; font-size: .82rem; }
+#clone-url:focus { outline: none; border-color: var(--accent2); }
+#clone-btn { background: none; color: var(--fg); border: 1px solid var(--accent2); border-radius: 999px; padding: 9px 16px; font-size: .82rem; cursor: pointer; white-space: nowrap; }
+#clone-btn:hover { background: rgba(124,92,255,.15); }
+#clone-btn:disabled { opacity: .5; cursor: default; }
+.clone-status { min-height: 1.1em; }
+.clone-status.err { color: #ff6b8b; }
+@media (max-width: 560px) { .clone-row { flex-direction: column; } #clone-url { width: 78vw; } }
+
+/* ---------- IDE ---------- */
+#ide { display: flex; flex-direction: column; height: 100vh; }
+#ide[hidden] { display: none; } /* el display:flex le ganaba a [hidden] → el IDE asomaba tras la landing */
+header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--line);
+}
+.brand { display: flex; align-items: center; gap: 8px; }
+.brand img { width: 26px; height: 26px; }
+.proj { color: var(--muted); font-size: .85rem; }
+.controls { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
+select { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
+.dot { width: 9px; height: 9px; border-radius: 50%; }
+.dot.off { background: #4a5062; } .dot.on { background: #3fb970; }
+.dot.loading { background: #e5a53a; animation: pulse 1.2s infinite; }
+@keyframes pulse { 50% { opacity: .35; } }
+
+#settings-panel { display: flex; gap: 10px; padding: 10px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; position: relative; }
+#settings-panel[hidden] { display: none; } /* ¡el display:flex le ganaba a hidden! */
+#settings-close { position: absolute; top: 6px; right: 10px; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
+#settings-close:hover { color: var(--accent); }
+#settings-panel .card { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; min-width: 200px; }
+#settings-panel input[type=text], #settings-panel input:not([type]) , #settings-panel input[type=password] { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: .78rem; }
+
+main { flex: 1; display: grid; grid-template-columns: 46px 235px minmax(0, 1fr) minmax(440px, 34%); grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
+body.hide-tree main { grid-template-columns: 46px 0 minmax(0, 1fr) minmax(440px, 34%); }
+body.hide-tree #sidebar { display: none; }
+
+/* barra de actividad estilo VS Code */
+#activity {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  background: #0d0f15; border-right: 1px solid var(--line); padding: 8px 0;
+}
+#activity button {
+  width: 44px; height: 42px; background: none; border: none; cursor: pointer;
+  color: #6b7391; display: flex; align-items: center; justify-content: center;
+  border-left: 2px solid transparent;
+}
+#activity button:hover { color: var(--fg); }
+#activity button.on { color: var(--fg); border-left-color: var(--accent); }
+#activity img { width: 26px; height: 26px; margin-top: auto; margin-bottom: 6px; opacity: .85; }
+
+/* explorador */
+#sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--bg2); border-right: 1px solid var(--line); }
+#explorer-head {
+  padding: 8px 12px 6px; font-size: .68rem; letter-spacing: .08em; color: var(--muted);
+  display: flex; gap: 8px; align-items: baseline;
+}
+#explorer-head span { color: var(--fg); font-weight: 700; }
+#tree { flex: 1; overflow: auto; padding: 0 4px 8px; font-size: .82rem; }
+#tree ul { list-style: none; margin: 0; padding-left: 10px; border-left: 1px solid #1d2230; }
+#tree > ul { border-left: none; padding-left: 4px; }
+#tree summary { cursor: pointer; color: #c8cede; padding: 2px 0; display: flex; align-items: center; gap: 4px; user-select: none; }
+#tree summary::-webkit-details-marker, #tree summary::marker { display: none; content: ''; }
+#tree details[open] > summary .chevron { transform: rotate(90deg); transform-origin: 8px 8px; }
+#tree .chevron { transition: transform .12s; }
+#tree summary:hover, #tree .file:hover { color: #fff; background: #ffffff0a; border-radius: 4px; }
+#tree .file { cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 2px 0 2px 16px; color: #b8c0d4; }
+.fico { flex: 0 0 auto; vertical-align: -3px; }
+
+#editor-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+#tabs-bar { display: flex; background: #0d0f15; border-bottom: 1px solid var(--line); overflow-x: auto; min-height: 34px; }
+.tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .8rem; color: var(--muted); border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
+.tab.active { background: var(--bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
+.tab.tab-preview .tab-name { font-style: italic; }
+.tab .tab-ico { display: flex; }
+.tab b { cursor: pointer; opacity: .55; width: 14px; text-align: center; }
+.tab b:hover { opacity: 1; color: var(--accent); }
+.tab b.dirty { opacity: 1; color: var(--fg); }
+.tab b.dirty:hover::before { content: ''; }
+#editor { flex: 1; min-height: 0; }
+#editor-empty { position: absolute; inset: 34px 0 22px 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--muted); z-index: 2; text-align: center; }
+#editor-empty img { width: 84px; opacity: .5; }
+#editor-empty p { font-size: .9rem; line-height: 1.5; }
+
+/* la elfa de la barra: animada cuando el cerebro trabaja (invita a hacer clic) */
+#activity img { transition: transform .2s; cursor: pointer; }
+#activity img:hover { transform: scale(1.12); }
+#activity img.working { animation: elfWorking 1.5s ease-in-out infinite; }
+@keyframes elfWorking {
+  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(124,92,255,.5)); }
+  50% { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(255,77,141,.95)); }
+}
+
+/* ── Mente de Elffuss (cerebro CEO · mundo trance) ─────────────────────── */
+#mind-overlay { position: fixed; inset: 0; z-index: 300; background: radial-gradient(1200px 800px at 50% 45%, #1a0a2e, #05030c 78%); overflow: hidden; }
+#mind-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+#mind-title { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1.1rem; font-weight: 800; letter-spacing: .18em; color: #fff; text-shadow: 0 0 22px #ff4d8d; pointer-events: none; }
+#mind-title span { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .06em; color: #b9a7ff; margin-top: 4px; text-shadow: none; }
+#mind-close { position: absolute; top: 14px; right: 16px; z-index: 6; background: rgba(255,77,141,.14); border: 1px solid #ff4d8d; color: #ffd7e6; border-radius: 999px; padding: 7px 14px; font-size: .8rem; cursor: pointer; backdrop-filter: blur(6px); }
+#mind-close:hover { background: rgba(255,77,141,.28); }
+#mind-history { position: absolute; top: 14px; right: 182px; z-index: 6; background: rgba(73,232,221,.14); border: 1px solid #49e8ff; color: #bfeef6; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
+#mind-history:hover { background: rgba(73,232,221,.28); }
+#mind-playstop { position: absolute; top: 14px; right: 278px; z-index: 6; background: rgba(63,185,112,.16); border: 1px solid #3fb970; color: #b7f2cf; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
+#mind-playstop:hover { background: rgba(63,185,112,.3); }
+#mind-playstop.paused { background: rgba(255,180,70,.16); border-color: #ffb446; color: #ffe0b0; }
+#mind-playstop.paused:hover { background: rgba(255,180,70,.3); }
+#mind-config { position: absolute; top: 14px; right: 96px; z-index: 6; background: rgba(124,92,255,.16); border: 1px solid #7c5cff; color: #d8ccff; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
+#mind-config:hover { background: rgba(124,92,255,.3); }
+/* leyenda de perfiles: fija, no flota (siempre legible) */
+#mind-legend { position: absolute; top: 60px; left: 14px; z-index: 5; display: flex; flex-direction: column; gap: 5px; background: rgba(8,5,18,.5); border: 1px solid rgba(124,92,255,.3); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(6px); pointer-events: auto; }
+.ml-item { font-size: .68rem; color: #cfe8f0; display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
+.ml-item:hover { background: rgba(255,255,255,.08); }
+.ml-sw { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex: none; }
+/* solo etiquetas de propuestas forjadas flotan ancladas al mundo */
+#mind-anchors { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
+.mind-node-label { position: absolute; font-size: .6rem; color: #ffd7e6; background: rgba(255,77,141,.18); border: 1px solid rgba(255,77,141,.5); border-radius: 6px; padding: 1px 6px; pointer-events: none; white-space: nowrap; text-shadow: 0 0 8px #ff4d8d; }
+/* historial completo: TODO lo que ha llegado, sin recortar */
+#mind-log { position: absolute; top: 0; right: -380px; width: 360px; height: 100%; z-index: 8; display: flex; flex-direction: column; background: rgba(6,4,14,.92); border-left: 1px solid rgba(73,232,221,.35); backdrop-filter: blur(10px); transition: right .25s ease; }
+#mind-log.show { right: 0; }
+.ml-head { display: flex; align-items: center; padding: 12px 14px; font-size: .82rem; font-weight: 700; color: #bfeef6; border-bottom: 1px solid rgba(73,232,221,.25); }
+.ml-head button { margin-left: auto; background: none; border: none; color: #7fd9d0; cursor: pointer; font-size: .9rem; }
+#mind-log-body { flex: 1; overflow-y: auto; padding: 8px 10px; }
+.ml-row { font-size: .68rem; line-height: 1.6; padding: 3px 4px; border-radius: 5px; display: flex; gap: 6px; align-items: baseline; }
+.ml-row:hover { background: rgba(255,255,255,.04); }
+.ml-row .ml-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
+.ml-row .ml-t { color: #dfeef2; word-break: break-word; }
+/* panel flotante con el .md del pensamiento (clic en un nodo) */
+#mind-panel { position: absolute; top: 70px; right: 16px; width: min(420px, 40vw); max-height: 70vh; z-index: 6; display: none; flex-direction: column; background: rgba(8,5,18,.9); border: 1px solid #7c5cff; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
+#mind-panel.show { display: flex; }
+#mind-panel .mp-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .74rem; color: #d8ccff; background: rgba(124,92,255,.14); border-bottom: 1px solid rgba(124,92,255,.3); }
+#mind-panel .mp-head button { margin-left: auto; background: none; border: none; color: #b9a7ff; cursor: pointer; font-size: .9rem; }
+#mind-panel .mp-body { flex: 1; overflow: auto; margin: 0; padding: 12px; font-size: .78rem; line-height: 1.55; color: #cfe8f0; }
+#mind-panel .mp-body h1, #mind-panel .mp-body h2, #mind-panel .mp-body h3 { color: #fff; margin: 12px 0 6px; }
+#mind-panel .mp-body code { background: rgba(124,92,255,.18); padding: 1px 5px; border-radius: 4px; font-size: .82em; }
+#mind-panel .mp-body pre { background: #0b0716; border: 1px solid rgba(124,92,255,.3); border-radius: 8px; padding: 8px; overflow-x: auto; }
+#mind-panel .mp-body ul, #mind-panel .mp-body ol { padding-left: 1.2em; }
+.mp-actions { display: flex; gap: 8px; padding: 0 12px 12px; }
+.mp-exec { flex: 1; background: linear-gradient(135deg, #ff4d8d, #7c5cff); border: none; color: #fff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; font-weight: 600; }
+.mp-open { flex: 1; background: rgba(124,92,255,.15); border: 1px solid #7c5cff; color: #d8ccff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; }
+/* panel de configuración del cerebro */
+#mind-cfg { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(520px, 92vw); z-index: 7; display: none; flex-direction: column; gap: 6px; background: rgba(8,5,18,.94); border: 1px solid #7c5cff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 60px rgba(0,0,0,.6); }
+#mind-cfg.show { display: flex; }
+.cfg-head { display: flex; align-items: center; font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
+.cfg-head button { margin-left: auto; background: none; border: none; color: #b9a7ff; cursor: pointer; }
+.cfg-notif { font-size: .68rem; color: #9fb; background: rgba(63,185,112,.1); border: 1px solid rgba(63,185,112,.3); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.bridge-card #br-token, .bridge-card #br-folder { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; width: 100%; }
+.bridge-card details { color: var(--muted); }
+.bridge-card details summary::marker { color: var(--accent2); }
+#fireworks-fx { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
+.cfg-notif-btn { background: #3fb970; border: none; color: #06180d; border-radius: 6px; padding: 3px 10px; font-size: .68rem; font-weight: 700; cursor: pointer; }
+#mind-cfg label { font-size: .68rem; color: #b9a7ff; margin-top: 4px; }
+#mind-cfg textarea, #mind-cfg input:not([type=color]) { background: #0b0716; border: 1px solid rgba(124,92,255,.4); color: #e8ebf4; border-radius: 8px; padding: 8px 10px; font-size: .78rem; font-family: inherit; resize: vertical; }
+#cfg-profiles { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
+.cfg-prof { display: grid; grid-template-columns: 30px 1fr 1.4fr 26px; gap: 6px; align-items: center; }
+.cfg-prof input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(124,92,255,.4); border-radius: 6px; background: none; cursor: pointer; }
+.cfg-prof input[type=text] { background: #0b0716; border: 1px solid rgba(124,92,255,.4); color: #e8ebf4; border-radius: 6px; padding: 6px 8px; font-size: .72rem; }
+.cp-del { background: none; border: none; color: #ff8fb0; cursor: pointer; font-size: .8rem; }
+.cfg-add { align-self: flex-start; background: rgba(124,92,255,.15); border: 1px dashed rgba(124,92,255,.5); color: #d8ccff; border-radius: 8px; padding: 6px 12px; font-size: .74rem; cursor: pointer; margin-top: 4px; }
+.cfg-actions { display: flex; gap: 8px; margin-top: 8px; }
+.cfg-ghost { flex: 1; background: rgba(73,232,221,.14); border: 1px solid #49e8ff; color: #bfeef6; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; }
+.cfg-save { flex: 1; margin-top: 0; background: linear-gradient(135deg, #ff4d8d, #7c5cff); border: none; color: #fff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .8rem; font-weight: 600; }
+.cfg-note { font-size: .64rem; color: #8a7bb8; margin-top: 4px; }
+.mind-music { position: absolute; bottom: 14px; right: 14px; z-index: 5; width: 300px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,77,141,.4); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
+.mind-music-cap { font-size: .62rem; color: #ffd7e6; background: rgba(10,6,24,.8); padding: 4px 8px; text-align: center; }
+@media (max-width: 820px) { #mind-log { width: 88vw; right: -90vw; } .mind-music { width: 180px; } }
+
+/* menú contextual del árbol y de las pestañas (botón derecho) */
+#tree-menu, #tab-menu { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 168px; box-shadow: 0 10px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; }
+.tm-item { text-align: left; background: none; border: none; color: var(--fg); font-size: .82rem; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
+.tm-item:hover { background: var(--bg3); }
+.tm-item.danger { color: #ff6b8b; }
+.tm-item.danger:hover { background: #3a1420; }
+.tm-sep { height: 1px; background: var(--line); margin: 4px 2px; }
+
+/* vista previa de markdown (pestaña en modo Vista previa, en vez del código fuente) */
+#md-preview-pane { position: absolute; inset: 34px 0 22px 0; overflow-y: auto; background: var(--bg); padding: 18px 26px; z-index: 2; }
+#md-preview-pane h1, #md-preview-pane h2, #md-preview-pane h3 { color: #fff; margin: 18px 0 8px; }
+#md-preview-pane code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
+#md-preview-pane pre { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-x: auto; }
+#md-preview-pane a { color: var(--accent2); }
+#md-preview-pane.html-preview { padding: 0; overflow: hidden; }
+#md-preview-pane.html-preview iframe { display: block; width: 100%; height: 100%; border: none; background: #fff; }
+
+/* panel del terminal (abajo del editor, estilo VS Code) */
+#terminal-panel { display: flex; flex-direction: column; height: 260px; flex: 0 0 auto; background: #0b0d12; border-top: 1px solid var(--line); position: relative; }
+#terminal-panel[hidden] { display: none; }
+#term-resize { position: absolute; top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 3; }
+#term-resize:hover { background: var(--accent2); opacity: .4; }
+#term-head { display: flex; align-items: center; gap: 10px; padding: 3px 10px; background: #0d0f15; border-bottom: 1px solid var(--line); }
+#term-head .term-title { font-size: .68rem; letter-spacing: .08em; color: var(--fg); font-weight: 700; }
+#term-caps { font-size: .68rem; color: var(--muted); flex: 1; }
+.term-btn { background: none; border: none; color: var(--muted); font-size: .72rem; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
+.term-btn:hover { color: var(--fg); background: var(--bg3); }
+#terminal-host { flex: 1; min-height: 0; padding: 4px 6px; overflow: hidden; }
+#terminal-host .xterm { height: 100%; }
+
+#statusbar {
+  padding: 3px 12px; font-size: .74rem; color: #fff; min-height: 22px;
+  background: linear-gradient(90deg, #3d2a68, #4c2050);
+  border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px;
+}
+
+/* carga del modelo: visible desde el primer segundo, sobre landing e IDE */
+#model-progress {
+  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
+  z-index: 120; display: flex; align-items: center; gap: 10px;
+  width: min(440px, 92vw); padding: 10px 14px;
+  background: var(--bg3); border: 1px solid var(--accent2); border-radius: 14px;
+  box-shadow: 0 10px 40px rgba(124, 92, 255, .35);
+}
+#model-progress[hidden] { display: none; }
+#model-progress img { width: 34px; height: 34px; }
+#model-progress .mp-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+#model-progress span { font-size: .82rem; color: var(--fg); }
+#model-progress .track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
+#model-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s; }
+
+/* ---------- chat ---------- */
+#chat { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg2); min-height: 0; }
+#chat-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
+
+/* pestañas de conversación (varias en paralelo — cerrar NO borra, solo quita de la vista) */
+#conv-tabs { display: flex; flex: 0 0 auto; background: #0d0f15; border-bottom: 1px solid var(--line); overflow-x: auto; min-height: 34px; align-items: center; }
+#conv-tabs .tab-add { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 4px 12px; align-self: stretch; }
+#conv-tabs .tab-add:hover { color: var(--fg); background: var(--bg3); }
+.tab.tab-busy .tab-name::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; animation: tab-busy-pulse 1s ease-in-out infinite; }
+@keyframes tab-busy-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+
+/* panel de historial de conversaciones (todas las guardadas, no solo abiertas) */
+#history-panel { position: fixed; top: 46px; right: 12px; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.5); z-index: 90; display: flex; flex-direction: column; }
+#history-panel[hidden] { display: none; }
+.hp-head { display: flex; align-items: center; padding: 10px 12px; font-size: .85rem; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--line); }
+.hp-head button { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; }
+#hp-list { overflow-y: auto; padding: 4px; }
+.hp-empty { padding: 16px; color: var(--muted); font-size: .8rem; text-align: center; }
+.hp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
+.hp-row:hover { background: var(--bg3); }
+.hp-title { font-size: .82rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hp-date { font-size: .68rem; color: var(--muted); white-space: nowrap; }
+.hp-del { background: none; border: none; cursor: pointer; font-size: .8rem; opacity: .6; }
+.hp-del:hover { opacity: 1; }
+.msg { padding: 8px 11px; border-radius: 11px; font-size: .85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-width: 95%; }
+.msg.sys { background: linear-gradient(135deg, #1c1430, #14202e); border: 1px solid var(--line); }
+.msg.user { background: var(--accent2); color: #fff; align-self: flex-end; }
+.msg.assistant { background: var(--bg3); border: 1px solid var(--line); align-self: flex-start; }
+.msg.err { border-color: #a03050; }
+/* herramientas estilo plugin de Claude Code: ● nombre + args + resultado plegable */
+.msg.tool { display: flex; align-items: center; gap: 7px; background: none; padding: 2px 6px; font-size: .8rem; }
+.msg.tool .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
+.msg.tool b { color: var(--fg); font-weight: 600; font-family: ui-monospace, monospace; font-size: .76rem; }
+.msg.tool .targ { color: var(--muted); font-family: ui-monospace, monospace; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg.tool-result { color: var(--muted); font-size: .74rem; background: none; padding: 0 6px 0 19px; }
+.msg.tool-result summary { cursor: pointer; list-style: none; }
+.msg.tool-result summary::before { content: '⎿ '; color: #4a5266; }
+.msg.tool-result pre { margin: 4px 0 0; background: #0d1117; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; font-size: .72rem; }
+.msg.tool-result.err summary { color: #e5a53a; }
+.msg.user.queued { opacity: .55; }
+.msg.user.queued::after { content: ' ⏳'; }
+.msg.thinking { background: var(--bg3); border: 1px dashed var(--line); color: var(--muted); font-size: .8rem; }
+.msg.thinking .gen { font-family: ui-monospace, monospace; font-size: .7rem; color: #5f6880; max-height: 60px; overflow: hidden; white-space: pre-wrap; }
+.msg.thinking .gen.tool-preview { font-family: inherit; font-size: .78rem; color: var(--accent2); font-style: italic; }
+
+/* 🎯 Modo Objetivo: botón + tarjeta de plan (planificador/ejecutor) */
+.cbtn.goal { font-size: .74rem; }
+.cbtn.goal.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2050, #2a1840); }
+.msg.plan-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font-size: .82rem; align-self: stretch; max-width: 100%; }
+.plan-card .plan-head { font-weight: 600; margin-bottom: 2px; }
+.plan-card .plan-summary { color: var(--muted); font-size: .78rem; margin-bottom: 8px; }
+.plan-card .plan-status { float: right; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
+.plan-card ul.plan-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
+.plan-card ul.plan-tasks li { display: flex; align-items: baseline; gap: 7px; padding: 5px 7px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); }
+.plan-card .task-ico { flex: 0 0 auto; }
+.plan-card .task-title { font-weight: 600; }
+.plan-card .task-desc { color: var(--muted); font-size: .76rem; }
+.plan-card li.task-in-progress { border-color: var(--accent2); }
+.plan-card li.task-done .task-title { color: #7ee787; }
+.plan-card li.task-failed { border-color: #a03050; }
+.plan-card li.task-failed .task-title { color: #e5a53a; }
+.plan-card li.task-skipped { opacity: .5; }
+.plan-card li.task-skipped .task-title { text-decoration: line-through; }
+#composer { display: flex; gap: 6px; padding: 10px; }
+#prompt { flex: 1; background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; color: var(--fg); padding: 9px 11px; outline: none; }
+#prompt:focus { border-color: var(--accent2); }
+#composer button { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 9px; color: #fff; padding: 0 14px; cursor: pointer; }
+
+/* ---------- markdown en el chat (estilo plugin de Claude Code) ---------- */
+.msg.md { white-space: normal; }
+.proposal-exec-btn { display: block; margin-top: 10px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: .78rem; font-weight: 600; cursor: pointer; }
+.proposal-exec-btn:hover { filter: brightness(1.1); }
+.proposal-exec-btn:disabled { opacity: .6; cursor: default; filter: none; }
+.msg.md code {
+  background: #0d1117; border: 1px solid var(--line); border-radius: 5px;
+  padding: 1px 6px; font-family: ui-monospace, monospace; font-size: .8em; color: #ffb3c9;
+}
+.msg.md code.file-link { cursor: pointer; color: var(--accent2); border-color: var(--accent2); text-decoration: underline dotted; }
+.msg.md code.file-link:hover { background: rgba(124,92,255,.18); }
+.msg.md pre.codeblock {
+  position: relative; background: #0d1117; border: 1px solid var(--line);
+  border-radius: 8px; padding: 10px 12px; margin: 8px 0; overflow-x: auto;
+}
+.msg.md pre.codeblock code {
+  background: none; border: none; padding: 0; color: #c9d1d9;
+  font-size: .78rem; line-height: 1.5; white-space: pre;
+}
+.msg.md pre.codeblock .lang {
+  position: absolute; top: 4px; right: 8px; font-size: .64rem;
+  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
+}
+.msg.md h4 { margin: 10px 0 4px; font-size: .92rem; color: var(--fg); }
+.msg.md ul { margin: 4px 0; padding-left: 18px; }
+.msg.md li { margin: 2px 0; }
+.msg.md b { color: #fff; }
+
+/* botón flotante chat↔editor: solo en móvil */
+#code-flip {
+  display: none; position: fixed; bottom: 78px; right: 14px; z-index: 60;
+  padding: 10px 16px; font-size: .9rem; color: #fff; border: none;
+  border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); cursor: pointer;
+}
+
+/* ---------- móvil: cabecera fija + chat/editor conmutables ---------- */
+@media (max-width: 760px) {
+  main { grid-template-columns: 1fr; }
+  #activity, #sidebar { display: none; }
+  #code-flip { display: block; }
+  #editor-wrap { display: none; }
+  body.show-editor #editor-wrap { display: flex; }
+  body.show-editor #chat { display: none; }
+  #chat { border-left: none; min-width: 0; }
+  header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
+  .proj { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  select { max-width: 38vw; font-size: .78rem; }
+  #prompt { font-size: 16px; } /* sin auto-zoom iOS */
+  #settings-panel { flex-direction: column; }
+  /* nada puede tapar el composer: píldora y botón flotante, por encima de él */
+  #model-progress { bottom: 132px; }
+  #code-flip { bottom: 76px; }
+}
+
+/* ---------- composer estilo plugin de Claude Code ---------- */
+#composer-wrap { border-top: 1px solid var(--line); background: var(--bg2); }
+#ctx-meter { display: flex; align-items: center; gap: 8px; padding: 5px 12px 0; font-size: .68rem; color: var(--muted); }
+#ctx-meter .ctx-track { flex: 1; height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
+#ctx-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .3s; }
+#ctx-bar.hot { background: linear-gradient(90deg, #e5a53a, #e5533a); }
+#composer { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; }
+.cbtn {
+  flex: 0 0 auto; background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
+  border-radius: 8px; min-width: 30px; height: 32px; padding: 0 8px; cursor: pointer;
+  font-size: .95rem; display: inline-flex; align-items: center; gap: 4px;
+}
+.cbtn:hover { color: var(--fg); border-color: var(--accent2); }
+.cbtn.autoedit { font-size: .74rem; }
+.cbtn.autoedit .ae-ico { font-family: ui-monospace, monospace; }
+.cbtn.autoedit.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2050, #2a1840); }
+#btn-send { position: relative; flex: 0 0 auto; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 8px; color: #fff; height: 32px; padding: 0 14px; cursor: pointer; }
+/* mientras se procesa: la elfa está "pensando" — feedback claro en el propio botón */
+#btn-send.sending { cursor: not-allowed; }
+#btn-send.sending svg { opacity: .25; }
+#btn-send.sending::after {
+  content: ''; position: absolute; inset: 9px; border: 2px solid rgba(255,255,255,.35);
+  border-top-color: #fff; border-radius: 50%; animation: btn-send-spin .7s linear infinite;
+}
+@keyframes btn-send-spin { to { transform: rotate(360deg); } }
+#composer #prompt { flex: 1; min-width: 0; }
+
+/* menú flotante de +/ */
+#menu {
+  position: absolute; bottom: 96px; left: 10px; right: 10px; z-index: 40;
+  background: var(--bg3); border: 1px solid var(--accent2); border-radius: 10px;
+  box-shadow: 0 -8px 30px rgba(0,0,0,.5); max-height: 320px; overflow-y: auto; padding: 4px;
+}
+#menu[hidden] { display: none; }
+#menu .sep { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px 3px; }
+#menu .menu-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: .82rem; }
+#menu .menu-item:hover { background: #ffffff0f; }
+#menu .menu-item b { font-family: ui-monospace, monospace; font-weight: 600; }
+#menu .menu-item span { color: var(--muted); font-size: .74rem; }
+#chat { position: relative; }
+
+/* panel de skills */
+.skills-panel h3 { margin: 0 0 4px; font-size: 1rem; }
+.sk-h { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
+.sk-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: .82rem; }
+.sk-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sk-row .muted { color: var(--muted); font-size: .74rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
+.sk-row a { color: var(--accent2); font-size: .74rem; text-decoration: none; }
+.sk-row input { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; }
+.sk-row button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-size: .76rem; }
+.sk-row button.ghost { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: .76rem; }
+#settings-panel { max-height: 55vh; overflow-y: auto; flex-direction: column; }
+
+/* el panel de ajustes/skills se SUPERPONE (no empuja el IDE) */
+#settings-panel { position: fixed; top: 46px; left: 46px; right: 0; z-index: 90; max-height: 78vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
+@media (max-width: 760px) { #settings-panel { left: 0; } }
+
+/* barra indeterminada (descargas sin loaded/total, p. ej. Gemma vía LiteRT-LM) */
+#model-progress .track { overflow: hidden; }
+#model-bar.indet { width: 35%; animation: indet 1.1s ease-in-out infinite; }
+@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
+
+/* ===== chrome estilo VS Code: menubar + palette + settings + git ===== */
+header { position: relative; }
+#model-select[hidden] { display: none; }
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; }
+.icon-btn svg { width: 16px; height: 16px; }
+.icon-inline svg { vertical-align: -3px; }
+
+/* barra de menú File/Edit/View/Git en la MISMA línea */
+#menubar { display: flex; gap: 1px; margin-left: 6px; }
+#menubar button { background: none; border: none; color: var(--muted); padding: 4px 9px; font-size: .8rem; cursor: pointer; border-radius: 5px; }
+#menubar button:hover, #menubar button.open { color: var(--fg); background: #ffffff10; }
+@media (max-width: 900px) { #menubar { display: none; } }
+
+/* dropdown del menú (fixed, anclado al botón) */
+#topmenu { position: fixed; z-index: 110; min-width: 220px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.55); padding: 4px; }
+#topmenu[hidden] { display: none; }
+#topmenu .menu-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; }
+#topmenu .menu-item:hover { background: #ffffff10; }
+#topmenu .menu-item span { color: var(--muted); font-size: .74rem; }
+
+/* chip de rama git */
+.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: .74rem; cursor: pointer; }
+.chip[hidden] { display: none; }
+.chip:hover { color: var(--fg); border-color: var(--accent2); }
+.chip svg { width: 12px; height: 12px; }
+
+/* command palette */
+#palette { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 130; width: min(640px, 92vw); background: var(--bg3); border: 1px solid var(--accent2); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; }
+#palette[hidden] { display: none; }
+#pal-input { width: 100%; background: var(--bg); border: none; border-bottom: 1px solid var(--line); color: var(--fg); padding: 12px 14px; font-size: .92rem; outline: none; }
+#pal-list { max-height: 50vh; overflow-y: auto; padding: 4px; }
+.pal-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
+.pal-item.sel, .pal-item:hover { background: #7c5cff33; }
+.pal-item .pi-name { font-weight: 500; }
+.pal-item .pi-hint { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pal-empty { padding: 12px 14px; color: var(--muted); font-size: .82rem; }
+
+/* settings: título, cierre y tarjetas de modelo/proveedor */
+.panel-title { margin: 2px 0 8px; font-size: 1rem; }
+.panel-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; }
+.panel-close:hover { color: var(--accent); }
+.panel-close svg { width: 16px; height: 16px; }
+.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 6px; }
+.model-card { text-align: left; background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--fg); }
+.model-card:hover { border-color: var(--accent2); }
+.model-card.active { border-color: var(--accent); background: linear-gradient(135deg, #2a1840, #1a1428); }
+.model-card b { font-size: .84rem; color: var(--fg); }
+.model-card.active b { color: #fff; }
+.model-card span { color: #aab2c8; font-size: .72rem; }
+.prov-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
+.prov-card.on { border-color: var(--accent2); }
+.prov-head { display: flex; align-items: center; gap: 8px; }
+.prov-head b { flex: 1; font-size: .84rem; }
+.prov-use { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: .74rem; cursor: pointer; }
+.prov-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
+.prov-fields.hide { display: none; }
+.prov-fields input { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; width: 100%; }
+.field { display: flex; flex-direction: column; gap: 3px; }
+.field .muted { font-size: .7rem; }
+button.wide { width: 100%; padding: 9px; border-radius: 8px; }
+
+.model-card.disabled { opacity: .5; cursor: not-allowed; }
+.model-card.disabled:hover { border-color: var(--line); }
+
+/* ---------- vistas Arquitectura / Ciudad 3D (overlay sobre el editor) ---------- */
+#view-overlay { position: absolute; inset: 34px 0 22px 0; z-index: 30; background: #0b0d12; overflow: hidden; }
+#view-overlay[hidden] { display: none; }
+#editor-wrap { position: relative; }
+#view-close { position: absolute; top: 10px; right: 12px; z-index: 32; background: var(--bg3); border: 1px solid var(--line); color: var(--muted); width: 30px; height: 28px; border-radius: 7px; cursor: pointer; }
+#view-close:hover { color: var(--accent); }
+#view-body { width: 100%; height: 100%; position: relative; }
+#view-body svg#arch-svg { width: 100%; height: 100%; display: block; cursor: grab; }
+.arch-node { cursor: pointer; }
+.arch-node:hover circle { stroke-width: 3; }
+.view-head { position: absolute; top: 10px; left: 14px; z-index: 31; font-size: .8rem; color: #c8cede; background: #0d1117cc; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); }
+.view-hint { color: var(--muted); font-size: .72rem; margin-left: 8px; }
+.view-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .9rem; }
+#city-canvas { width: 100%; height: 100%; display: block; }

index.html

@@ -1,19 +1,151 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Elffuss Code — tu IDE con alma, en el navegador</title>
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="Elffuss">
+<meta property="og:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser">
+<meta property="og:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine.">
+<meta property="og:url" content="https://elffuss-code.utopiaia.com/">
+<meta property="og:image" content="https://elffuss-code.utopiaia.com/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser">
+<meta name="twitter:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine.">
+<meta name="twitter:image" content="https://elffuss-code.utopiaia.com/og.png">
+<meta name="description" content="Abre una carpeta de código y programa con Elffuss: IDE web + agente local. Nada sale de tu máquina.">
+<link rel="icon" href="img/elffuss-code.svg">
+<link rel="stylesheet" href="css/code.css">
+<!-- import map: la ciudad 3D (VibeCodeViewer vendorizado en js/vcc) usa import 'three' -->
+<script type="importmap">
+{ "imports": {
+  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+}}
+</script>
+</head>
+<body>
+
+<!-- landing: primero se abre la carpeta -->
+<div id="landing">
+  <div class="l-inner">
+    <img src="img/elffuss-code.svg" alt="Elffuss Code" class="hero">
+    <h1><b>Elffuss</b> Code</h1>
+    <p class="tag">Abre tu carpeta de código y programa con una elfa al lado.<br>
+      Editor tipo VS Code + agente <b>en tu navegador</b>. Nada sale de tu máquina. 😉</p>
+    <button id="open-project">📁 Abrir carpeta de código</button>
+    <button id="reopen-project" class="ghost" hidden></button>
+    <div id="resume-clone" class="resume-clone" hidden>
+      <span class="rc-text"></span>
+      <button id="resume-clone-btn">Reanudar</button>
+      <button id="discard-clone-btn" class="ghost">Descartar</button>
+    </div>
+    <div class="clone-row">
+      <span class="clone-or">o</span>
+      <input id="clone-url" type="text" placeholder="pega la URL de un repo público (GitHub/Bitbucket)…" autocomplete="off" spellcheck="false">
+      <button id="clone-btn">Descargar y abrir</button>
+    </div>
+    <p id="clone-status" class="mini clone-status" hidden></p>
+    <p class="mini">Chrome/Edge · File System Access · modelo local WebGPU</p>
+  </div>
+</div>
+
+<!-- IDE -->
+<div id="ide" hidden>
+  <header>
+    <div class="brand"><img src="img/elffuss-code.svg" alt=""><b>Elffuss Code</b>
+      <span id="project-name" class="proj"></span><span id="build" class="proj">__BUILD__</span></div>
+    <nav id="menubar">
+      <button data-menu="file">File</button>
+      <button data-menu="edit">Edit</button>
+      <button data-menu="view">View</button>
+      <button data-menu="git">Git</button>
+    </nav>
+    <div class="controls">
+      <button id="git-branch" class="chip" title="rama actual" hidden></button>
+      <span id="model-dot" class="dot off" title="modelo"></span>
+      <select id="model-select" hidden></select>
+      <button id="btn-history" class="ghost icon-btn" title="Historial de conversaciones"></button>
+      <button id="btn-settings" class="ghost icon-btn" title="Ajustes, modelo y API keys"></button>
+    </div>
+  </header>
+  <div id="settings-panel" hidden></div>
+  <div id="topmenu" hidden></div>
+  <div id="palette" hidden>
+    <input id="pal-input" autocomplete="off" spellcheck="false"
+      placeholder="Buscar archivos por nombre (: para ir a línea, @ para símbolo, &gt; para comandos)">
+    <div id="pal-list"></div>
+  </div>
+  <main>
+    <nav id="activity">
+      <button id="act-files" class="on" title="Explorador"></button>
+      <button id="act-search" title="Buscar (Cmd/Ctrl+P)"></button>
+      <button id="act-arch" title="Arquitectura (grafo de dependencias)"></button>
+      <button id="act-city" title="Ciudad 3D"></button>
+      <button id="act-term" title="Terminal (Ctrl+`)"></button>
+      <button id="act-skills" title="Skills"></button>
+      <button id="act-settings" title="Ajustes y modelo"></button>
+      <img src="img/elffuss-code.svg" alt="Elffuss" title="Elffuss Code">
+    </nav>
+    <aside id="sidebar">
+      <div id="explorer-head">EXPLORER<span id="explorer-proj"></span></div>
+      <div id="tree"></div>
+    </aside>
+    <section id="editor-wrap">
+      <div id="tabs-bar"></div>
+      <div id="editor"></div>
+      <div id="view-overlay" hidden>
+        <button id="view-close" title="cerrar">✕</button>
+        <div id="view-body"></div>
+      </div>
+      <div id="terminal-panel" hidden>
+        <div id="term-resize" title="arrastra para redimensionar"></div>
+        <div id="term-head">
+          <span class="term-title">TERMINAL</span>
+          <span id="term-caps"></span>
+          <button id="term-clear" class="term-btn" title="limpiar">limpiar</button>
+          <button id="term-close" class="term-btn" title="cerrar (Ctrl+`)">✕</button>
+        </div>
+        <div id="terminal-host"></div>
+      </div>
+      <div id="statusbar"></div>
+    </section>
+    <section id="chat">
+      <div id="conv-tabs"></div>
+      <div id="history-panel" hidden></div>
+      <div id="chat-log"></div>
+      <div id="menu" hidden></div>
+      <div id="composer-wrap">
+        <div id="ctx-meter" title="contexto acumulado en la conversación">
+          <span id="ctx-text">ctx 0 / 6k</span>
+          <div class="ctx-track"><div id="ctx-bar"></div></div>
+        </div>
+        <form id="composer">
+          <button type="button" id="btn-plus" class="cbtn" title="Adjuntar archivo del proyecto (@)"></button>
+          <button type="button" id="btn-slash" class="cbtn" title="Comandos"></button>
+          <input id="prompt" autocomplete="off" placeholder="Pídele código a Elffuss…">
+          <button type="button" id="btn-autoedit" class="cbtn autoedit on" title="Editar archivos automáticamente"><span class="ae-ico">&lt;/&gt;</span> <span class="ae-txt">Auto</span></button>
+          <button type="button" id="btn-goal" class="cbtn goal" title="Modo Objetivo: descompone el mensaje en tareas y las ejecuta una a una (planificador + ejecutor)">🎯 <span class="goal-txt">Goal</span></button>
+          <button type="submit" id="btn-send" title="Enviar"></button>
+        </form>
+      </div>
+    </section>
+  </main>
+</div>
+
+<button id="code-flip" title="cambiar entre chat y editor"></button>
+
+<div id="model-progress" hidden>
+  <img src="img/elffuss-code.svg" alt="">
+  <div class="mp-body">
+    <span id="model-progress-text">Preparando el cerebro local…</span>
+    <div class="track"><div id="model-bar"></div></div>
+  </div>
+</div>
+
+<script type="module" src="js/main.js"></script>
+</body>
 </html>

js/agent.js

@@ -0,0 +1,219 @@
+// Bucle agéntico de Elffuss Code (mismo protocolo que Elffuss SO).
+import { runTool, toolHelp, snapshot } from './tools/index.js';
+import { skillsPromptBlock } from './skills.js';
+import * as telemetry from './telemetry.js';
+
+const MAX_STEPS = 12; // margen para tareas largas (leer→editar→verificar→arreglar…)
+
+const LANGS = {
+  es: 'español', en: 'English', uk: 'українська', ru: 'русский', fr: 'français',
+  de: 'Deutsch', it: 'italiano', pt: 'português', pl: 'polski', ca: 'català',
+};
+
+export function userLang() {
+  const codeL = (navigator.language || 'es').toLowerCase();
+  return { code: codeL, name: LANGS[codeL.split('-')[0]] || codeL };
+}
+
+export function systemPrompt(context = '') {
+  const lang = userLang();
+  return `Eres Elffuss Code: un asistente de programación, cálido pero quirúrgico con el código. Vives en un IDE web y trabajas SOLO dentro del proyecto que el usuario ha abierto. Hablas SIEMPRE en el idioma del navegador del usuario: ${lang.name} (${lang.code}); el código y sus comentarios, en el estilo del proyecto.
+
+HERRAMIENTAS (las ÚNICAS que existen — no inventes otras):
+${toolHelp()}
+
+REGLAS DURAS:
+- Antes de decir NADA sobre el código, LÉELO con code.read o code.search. PROHIBIDO dar consejos genéricos o suposiciones ("probablemente usas React/Docker…"). Si no lo has leído, léelo primero.
+- ANTIRRECITACIÓN: aunque RECONOZCAS el proyecto por su nombre (vllm, react, django, next, pytorch…), tienes PROHIBIDO describirlo de memoria («csrc/ es C++/CUDA», «benchmarks/ mide rendimiento»…). Esta copia local puede diferir de lo que crees saber. Descríbelo SOLO por lo que leas AQUÍ con las herramientas.
+- Si te preguntan «¿qué hace este código/proyecto?» y no has leído nada aún, tu PRIMERA respuesta debe ser una tool-call (code.tree o code.read del README/entrypoint), NUNCA una descripción. Encadena 2-3 lecturas (README + fichero de entrada + un módulo clave) antes de resumir. Nada de listar carpetas de forma genérica.
+- USA SOLO code.tree / code.read / code.write / code.search / terminal.run / web.search / web.fetch. NO existen code.create-plugin, code.create-mcp-server, hooks, CLAUDE.conf ni nada parecido: si lo mencionas, estás alucinando.
+- ⛔ NUNCA recomiendes «automatizaciones de Claude Code»: MCP servers (context7, «claude mcp add …»), skills, hooks (.claude/settings.json, pre-commit), subagentes (.claude/agents/…), plugins, CLAUDE.conf. NADA de eso existe en este IDE — es conocimiento de tu entrenamiento, no de este proyecto. Si te descubres escribiendo «Recomendaciones de automatización», «MCP Servers», «Skills», «Hooks», «Subagentes» → PARA: es pura alucinación. Ayuda con el CÓDIGO REAL que lees, nada más.
+- web.search busca en internet DE SERIE (docs, mensajes de error, APIs) y web.fetch lee una URL. PUEDES buscar en internet cuando ayude; NUNCA digas que no puedes.
+- terminal.run ejecuta comandos de shell REALES (ls, cat, grep, find, mkdir, «echo texto > fichero», git status). Le pasas la LÍNEA DE COMANDO exacta, NUNCA lenguaje natural (mal: terminal.run "crea un proyecto"; bien: terminal.run "mkdir web"). rm SÍ soporta comodines («rm carpeta/mejoras-*.md» borra todos los que coincidan) — si «no existe», es que de verdad no hay ninguno, no lo des por hecho sin comprobarlo con ls/find antes. node/npm/python SÍ son reales si el usuario tiene el Bridge local conectado (⚙ Ajustes → 🔌 Bridge local) — pruébalos con terminal.run y lee el resultado; si el bridge no está conectado, la propia herramienta te lo dice con el mensaje de error, y ENTONCES le pides al usuario que lo conecte (no lo asumas de antemano sin probar).
+- CREAR ficheros/proyectos: SIEMPRE con code.write (crea también las carpetas necesarias), UNA tool-call por fichero, con el CONTENIDO COMPLETO en cada una. NUNCA uses touch/echo para crear un fichero que luego rellenas (quedan vacíos). PUEDES crear cualquier proyecto aquí mismo; PROHIBIDO responder «no puedo crear un proyecto» o pedir permiso o el framework: si el usuario no lo dice, elige HTML/CSS/JS simple y escríbelo ya. Puedes emitir VARIAS code.write en un mismo mensaje y se ejecutan todas.
+- Habla SOLO de archivos y contenido que aparezcan en el CONTEXTO o en resultados de herramientas. Cita rutas y líneas reales. Si no lo sabes, léelo, no lo inventes.
+
+Cómo actuar:
+1) Para usar una herramienta responde SOLO con:
+\`\`\`tool
+{"tool": "code.read", "args": {"path": "README.md"}}
+\`\`\`
+2) NUNCA inventes rutas: usa SOLO las del árbol del CONTEXTO o de code.tree/code.search. Relativas a la raíz, sin ./ inicial.
+3) Antes de tocar código: lee el archivo. Al escribir con code.write pasa el contenido COMPLETO. El editor se actualiza al instante.
+4) Tras un [resultado], responde breve y CONCRETO citando lo que has leído.
+
+Ejemplos:
+Usuario: ¿qué hace este proyecto/código?
+Tú:
+\`\`\`tool
+{"tool": "code.read", "args": {"path": "README.md"}}
+\`\`\`
+Usuario: ¿qué hay en este proyecto?
+Tú:
+\`\`\`tool
+{"tool": "code.tree", "args": {}}
+\`\`\`
+Usuario: busca dónde se define handleClick
+Tú:
+\`\`\`tool
+{"tool": "code.search", "args": {"query": "handleClick"}}
+\`\`\`
+Usuario: crea una carpeta tests y un fichero vacío dentro
+Tú:
+\`\`\`tool
+{"tool": "terminal.run", "args": {"command": "mkdir tests && touch tests/test_main.py"}}
+\`\`\`
+Usuario: crea un mini proyecto web que explique esto
+Tú: (SIN pedir permiso ni framework — escribe los ficheros con contenido COMPLETO, varias code.write a la vez)
+\`\`\`tool
+{"tool": "code.write", "args": {"path": "web/index.html", "content": "<!DOCTYPE html>\\n<html>…página completa…</html>"}}
+\`\`\`
+\`\`\`tool
+{"tool": "code.write", "args": {"path": "web/style.css", "content": "body{font-family:system-ui;margin:0}…"}}
+\`\`\`
+Usuario: ¿qué mejorarías del código?
+Tú:
+\`\`\`tool
+{"tool": "code.read", "args": {"path": "src/main.py"}}
+\`\`\`
+(y tras leerlo de verdad, propones mejoras CONCRETAS citando líneas — nunca genéricas)${skillsPromptBlock()}${context ? `
+
+CONTEXTO AHORA (estado real del IDE, úsalo):
+${context}` : ''}`;
+}
+
+function tryJson(raw) {
+  try {
+    const obj = JSON.parse(raw);
+    if (obj && typeof obj.tool === 'string') return { tool: obj.tool, args: obj.args || {} };
+  } catch { /* no era JSON */ }
+  return null;
+}
+
+// Formato NATIVO de LFM2.5: <|tool_call_start|>[ code.read(path="x") ]<|tool_call_end|>
+export function parseNativeCall(text) {
+  const m = text.match(/<\|tool_call_start\|>\s*\[?\s*([\w.]+)\s*\(([\s\S]*?)\)\s*\]?\s*<\|tool_call_end\|>/)
+    || text.match(/^\s*\[\s*([\w.]+)\s*\(([\s\S]*?)\)\s*\]\s*$/m);
+  if (!m) return null;
+  const args = {};
+  const re = /([\w]+)\s*=\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[^,)]+)/g;
+  let a;
+  while ((a = re.exec(m[2]))) {
+    let v = a[2].trim();
+    if (/^["']/.test(v)) v = v.slice(1, -1).replace(/\\(.)/g, '$1');
+    else if (/^-?\d+(\.\d+)?$/.test(v)) v = Number(v);
+    else if (v === 'true' || v === 'false') v = v === 'true';
+    args[a[1]] = v;
+  }
+  return { tool: m[1], args };
+}
+
+// Extrae UNA tool-call (compat). Prefiere la primera de parseToolCalls.
+export function parseToolCall(text) {
+  return parseToolCalls(text)[0] || null;
+}
+
+// Extrae TODAS las tool-calls de un mensaje, en orden. El modelo pequeño a
+// menudo emite varias (p. ej. tres code.write para crear tres ficheros) o las
+// mete en prosa sin un fence ```tool perfecto → antes solo se ejecutaba la
+// primera (o ninguna) y los ficheros quedaban VACÍOS. Aquí buscamos cada objeto
+// {"tool":...} por llaves balanceadas, esté donde esté, además del formato nativo.
+export function parseToolCalls(text) {
+  const calls = [];
+  const seen = new Set();
+  const push = c => {
+    if (!c || typeof c.tool !== 'string') return;
+    const k = c.tool + '|' + JSON.stringify(c.args || {});
+    if (!seen.has(k)) { seen.add(k); calls.push(c); }
+  };
+  // 1) formato nativo LFM (puede haber varios)
+  const nat = /<\|tool_call_start\|>[\s\S]*?<\|tool_call_end\|>/g;
+  let mm;
+  while ((mm = nat.exec(text))) push(parseNativeCall(mm[0]));
+  // 2) cada objeto JSON que empiece por {"tool": … (con o sin fence)
+  const re = /\{\s*"tool"\s*:/g;
+  let m;
+  while ((m = re.exec(text))) {
+    const obj = extractBalanced(text, m.index);
+    if (obj) { push(tryJson(obj)); re.lastIndex = m.index + obj.length; }
+  }
+  // 3) último recurso: nativo suelto de una línea
+  if (!calls.length) push(parseNativeCall(text));
+  return calls;
+}
+
+// Desde el '{' en `start`, devuelve la subcadena hasta la '}' que balancea,
+// respetando cadenas y escapes (para no cortar un content con llaves dentro).
+function extractBalanced(text, start) {
+  let depth = 0, inStr = false, esc = false;
+  for (let i = start; i < text.length; i++) {
+    const ch = text[i];
+    if (esc) { esc = false; continue; }
+    if (ch === '\\') { esc = true; continue; }
+    if (ch === '"') inStr = !inStr;
+    else if (!inStr) {
+      if (ch === '{') depth++;
+      else if (ch === '}' && --depth === 0) return text.slice(start, i + 1);
+    }
+  }
+  // Recuperación: los modelos pequeños a veces se dejan SIN escribir una
+  // llave de cierre (cierran "args":{…} pero no el objeto exterior) aunque
+  // el resto del JSON esté bien formado — antes esto tiraba el tool-call
+  // entero (ninguna escritura llegaba a ejecutarse, sin aviso). Si al llegar
+  // al final falta cerrar N llaves (fuera de cualquier cadena, así que no es
+  // un truncado a media cadena) probamos a añadirlas — solo se acepta si el
+  // JSON resultante es válido de verdad.
+  if (!inStr && depth > 0 && depth <= 4) {
+    const candidate = text.slice(start).replace(/```[\s\S]*$/, '').trimEnd() + '}'.repeat(depth);
+    try { JSON.parse(candidate); return candidate; } catch { /* no se pudo recuperar */ }
+  }
+  return null;
+}
+
+export class Agent {
+  constructor(provider) {
+    this.provider = provider;
+    this.history = [];
+  }
+
+  setProvider(p) { this.provider = p; }
+
+  async handle(userText, onEvent) {
+    this.history.push({ role: 'user', content: userText });
+    for (let step = 0; step < MAX_STEPS; step++) {
+      let out;
+      try {
+        const context = await snapshot().catch(() => '');
+        out = await this.provider.chat(this.history, systemPrompt(context),
+          t => onEvent({ type: 'token', text: t }));
+      } catch (e) {
+        telemetry.reportError('agent.handle: ' + e.message, { stack: e.stack || '' });
+        onEvent({ type: 'error', text: 'El modelo falló: ' + e.message });
+        return;
+      }
+
+      const calls = parseToolCalls(out);
+      if (!calls.length) {
+        this.history.push({ role: 'assistant', content: out });
+        onEvent({ type: 'text', text: out });
+        return;
+      }
+
+      // Ejecutar TODAS las tool-calls del mensaje en orden (varios code.write =
+      // varios ficheros con contenido, no vacíos).
+      this.history.push({ role: 'assistant', content: out });
+      const results = [];
+      for (const call of calls) {
+        onEvent({ type: 'tool', call });
+        let result;
+        try { result = await runTool(call.tool, call.args); }
+        catch (e) { result = 'ERROR: ' + e.message; }
+        const resultStr = typeof result === 'string' ? result : JSON.stringify(result);
+        onEvent({ type: 'tool_result', tool: call.tool, result: resultStr });
+        results.push(`[resultado ${call.tool}]\n${resultStr}`);
+      }
+      this.history.push({ role: 'user', content: results.join('\n\n') });
+    }
+    onEvent({ type: 'text', text: '(Me quedé sin pasos: demasiadas herramientas seguidas.)' });
+  }
+}

js/bridge.js

@@ -0,0 +1,101 @@
+// Cliente del Elffuss Bridge: puente local (proceso que el usuario descarga y
+// ejecuta) que da ejecución REAL en su máquina (node, npm, python…) sin salir
+// de ella. Protocolo por WebSocket a 127.0.0.1, con token de un solo arranque.
+const PORT = 8765;
+const HOST = '127.0.0.1:' + PORT;
+
+let ws = null, connected = false, authed = false;
+let pending = new Map(); // id → { onOut, onErr, resolve }
+let nextId = 1;
+let onStatus = () => {};
+let savedFolder = '';
+try { savedFolder = localStorage.getItem('elffusscode.bridgeFolder') || ''; } catch { /* */ }
+let savedToken = '';
+try { savedToken = localStorage.getItem('elffusscode.bridgeToken') || ''; } catch { /* */ }
+
+export function isConnected() { return connected && authed; }
+export function getFolder() { return savedFolder; }
+export function setFolder(f) {
+  savedFolder = (f || '').trim();
+  try { localStorage.setItem('elffusscode.bridgeFolder', savedFolder); } catch { /* */ }
+}
+export function onStatusChange(fn) { onStatus = fn; }
+
+// sondeo ligero: ¿hay un bridge escuchando en 127.0.0.1, aunque no nos hayamos
+// autenticado todavía? (para saber si mostrar «detectado» antes de conectar)
+export async function probe() {
+  try {
+    const r = await fetch('http://' + HOST + '/ping', { mode: 'cors' });
+    if (!r.ok) return false;
+    const j = await r.json();
+    return !!j.ok;
+  } catch { return false; }
+}
+
+export function connect(token) {
+  return new Promise((resolve, reject) => {
+    try { ws = new WebSocket('ws://' + HOST + '/ws'); }
+    catch (e) { reject(e); return; }
+    const timeout = setTimeout(() => { try { ws.close(); } catch { /* */ } reject(new Error('tiempo agotado — ¿está el bridge arrancado?')); }, 6000);
+    ws.onopen = () => ws.send(JSON.stringify({ type: 'auth', token }));
+    ws.onerror = () => { clearTimeout(timeout); connected = false; authed = false; onStatus('error'); reject(new Error('no pude conectar — ¿está el bridge arrancado en este puerto?')); };
+    ws.onclose = () => { connected = false; authed = false; onStatus('disconnected'); };
+    ws.onmessage = e => {
+      let m; try { m = JSON.parse(e.data); } catch { return; }
+      if (m.type === 'auth-ok') {
+        clearTimeout(timeout);
+        connected = true; authed = true;
+        savedToken = token;
+        try { localStorage.setItem('elffusscode.bridgeToken', token); } catch { /* */ }
+        onStatus('connected');
+        resolve(true);
+        return;
+      }
+      if (m.type === 'auth-fail') { clearTimeout(timeout); connected = true; authed = false; onStatus('auth-fail'); reject(new Error('token incorrecto')); return; }
+      const job = pending.get(m.id);
+      if (!job) return;
+      if (m.type === 'stdout') job.onOut(m.data);
+      else if (m.type === 'stderr') job.onErr(m.data);
+      else if (m.type === 'error') { job.onErr(m.data); job.resolve(-1); pending.delete(m.id); }
+      else if (m.type === 'exit') { job.resolve(m.code || 0); pending.delete(m.id); }
+    };
+  });
+}
+
+export function disconnect() { try { ws?.close(); } catch { /* */ } connected = false; authed = false; }
+
+// tratar de reconectar en silencio con el token guardado (al abrir la app)
+export async function tryAutoConnect() {
+  if (!savedToken) return false;
+  try { await connect(savedToken); return true; } catch { return false; }
+}
+
+// Detección continua en segundo plano: si el usuario arranca el bridge
+// DESPUÉS de cargar la página (o lo reinicia tras cerrarlo), esto lo detecta
+// solo y reconecta con el token guardado — sin que haga falta reabrir Ajustes
+// y pulsar «Conectar» de nuevo. Se apoya en probe() (sondeo ligero sin auth).
+let autoDetectTimer = null, connecting = false;
+export function startAutoDetect(intervalMs = 4000) {
+  if (autoDetectTimer) return () => stopAutoDetect();
+  autoDetectTimer = setInterval(async () => {
+    if (isConnected() || connecting || !savedToken) return;
+    if (!(await probe())) return;
+    connecting = true;
+    try { await connect(savedToken); } catch { /* el usuario aún no ha pegado token válido, o cayó de nuevo */ }
+    finally { connecting = false; }
+  }, intervalMs);
+  return () => stopAutoDetect();
+}
+export function stopAutoDetect() { clearInterval(autoDetectTimer); autoDetectTimer = null; }
+
+// ejecuta un comando REAL en la máquina del usuario, vía el bridge.
+// onOut/onErr reciben trozos de salida en vivo; devuelve el código de salida.
+export function exec(cmd, { cwd = savedFolder, onOut = () => {}, onErr = () => {} } = {}) {
+  if (!isConnected()) return Promise.reject(new Error('bridge no conectado'));
+  const id = String(nextId++);
+  return new Promise((resolve, reject) => {
+    pending.set(id, { onOut, onErr, resolve });
+    try { ws.send(JSON.stringify({ type: 'exec', id, cmd, cwd })); }
+    catch (e) { pending.delete(id); reject(e); }
+  });
+}

js/ceo.js

@@ -0,0 +1,245 @@
+// Cerebro CEO autónomo (compartido por Elffuss Code y Elffuss Claw): cuando el
+// usuario NO está pidiendo nada (ocioso) y hay un modelo local cargado, la elfa
+// «trabaja por su cuenta» — revisa el espacio de trabajo, reparte el trabajo en
+// varios perfiles que piensan EN PARALELO (cada uno una línea de pensamiento en
+// la vista Mente) y sintetiza propuestas de mejora.
+//
+// Agnóstico de herramientas a propósito: cada app inyecta su propio adaptador
+// de workspace (`init({ workspace, ... })`) — Code usa code.js (proyecto de
+// código), Claw usa fs.js (carpetas con permiso). El core no sabe ni le importa
+// cuál es.
+//
+// Seguridad: NO modifica tus ficheros. Deja las propuestas en una carpeta
+// aditiva (nunca toca lo existente) y las hace «flotar» en la Mente. Se PARA en
+// cuanto detecta actividad del usuario y reanuda al volver a estar ocioso.
+import { Agent } from './agent.js';
+import { humanizeTool } from './humanize.js';
+
+const IDLE_MS = 18000;       // 18 s sin actividad → el CEO se pone a trabajar
+const TICK_MS = 3000;        // frecuencia de comprobación
+// 5 min entre ciclos automáticos: con 45s, una tarde ociosa generaba MILES de
+// ficheros. «Pensar ahora» (forceCycle) sigue disponible sin esperar esto.
+const COOLDOWN_MS = 300000;
+const SOUL_CAP = 25;          // ficheros sueltos antes de consolidar en archivo.md
+
+// perfil por defecto si la app anfitriona no da los suyos
+const GENERIC_PROFILES = [
+  { id: 'p1', name: 'Revisión', focus: 'qué mejorar de forma concreta y accionable', color: '#7c5cff' },
+  { id: 'p2', name: 'Calidad', focus: 'errores, casos borde, cosas que podrían fallar', color: '#49e8ff' },
+];
+
+const slug = s => String(s).toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '')
+  .replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '').slice(0, 24) || 'perfil';
+
+// ── namespace (localStorage) y adaptador de workspace: los da la app anfitriona ──
+let NS = 'elffuss';           // prefijo de las claves de localStorage
+let ws = null;                // { isReady, tree, write, read, list, remove }
+let getProvider = () => null;
+let isBusy = () => false;     // ¿el usuario tiene trabajo en cola/procesándose? → prioridad
+let defaultProfiles = GENERIC_PROFILES;
+const K = suffix => NS + '.' + suffix;
+
+function loadProfiles() {
+  try { const s = JSON.parse(localStorage.getItem(K('ceoProfiles'))); if (Array.isArray(s) && s.length) return s; } catch { /* */ }
+  return defaultProfiles.map(p => ({ ...p }));
+}
+let profiles = null;
+export function getProfiles() { if (!profiles) profiles = loadProfiles(); return profiles; }
+export function setProfiles(list) {
+  const used = new Set();
+  profiles = (list || []).filter(p => p && p.name).map(p => {
+    let id = p.id || slug(p.name); let n = id, i = 2;
+    while (used.has(n)) n = id + '-' + i++;
+    used.add(n);
+    return { id: n, name: String(p.name).slice(0, 40), focus: String(p.focus || '').slice(0, 200), color: /^#[0-9a-f]{6}$/i.test(p.color || '') ? p.color : '#7c5cff' };
+  });
+  if (!profiles.length) profiles = defaultProfiles.map(p => ({ ...p }));
+  try { localStorage.setItem(K('ceoProfiles'), JSON.stringify(profiles)); } catch { /* */ }
+  emit('ceo', { type: 'reprogram', text: 'Perfiles actualizados: ' + profiles.map(p => p.name).join(', '), profiles });
+  return profiles;
+}
+
+let enabled = false, running = false, lastActivity = Date.now(), timer = null, lastCycleEnd = 0, cycleN = 0;
+
+// MISIÓN reprogramable: el usuario puede reorientar el cerebro desde la Mente
+// («céntrate en seguridad», «optimiza mis Excel», «documenta todo»…).
+let DEFAULT_MISSION = 'Revisar el espacio de trabajo y proponer mejoras concretas y accionables.';
+let mission = null;
+function ensureMission() { if (mission == null) { try { mission = localStorage.getItem(K('ceoMission')) || DEFAULT_MISSION; } catch { mission = DEFAULT_MISSION; } } }
+export function getMission() { ensureMission(); return mission; }
+export function setMission(text) {
+  mission = (text || '').trim() || DEFAULT_MISSION;
+  try { localStorage.setItem(K('ceoMission'), mission); } catch { /* */ }
+  emit('ceo', { type: 'reprogram', text: 'Nueva misión recibida: ' + mission });
+  lastCycleEnd = 0; lastActivity = Date.now() - IDLE_MS; // que arranque un ciclo pronto con la nueva misión
+  return mission;
+}
+
+// Carpeta-«alma» donde el cerebro crea y guarda TODO (configurable).
+let DEFAULT_SOUL = '.elffuss/soul';
+let soulDir = null;
+function ensureSoulDir() { if (soulDir == null) { try { soulDir = localStorage.getItem(K('ceoDir')) || DEFAULT_SOUL; } catch { soulDir = DEFAULT_SOUL; } } }
+export function getSoulDir() { ensureSoulDir(); return soulDir; }
+export function setSoulDir(dir) {
+  soulDir = (dir || '').trim().replace(/^\/+|\/+$/g, '') || DEFAULT_SOUL;
+  try { localStorage.setItem(K('ceoDir'), soulDir); } catch { /* */ }
+  emit('ceo', { type: 'reprogram', text: 'Nueva carpeta-alma: ' + soulDir + '/' });
+  return soulDir;
+}
+
+// ── semáforo cross-pestaña: UN SOLO cerebro ejecuta, TODAS visualizan ───────
+// El líder tiene un Web Lock exclusivo (se libera solo al cerrar la pestaña);
+// difunde sus pensamientos por BroadcastChannel para que el resto los vea.
+// (Aislado por origen por el propio navegador: Code y Claw nunca se cruzan.)
+let isLeader = false, bc = null, realEmit = () => {}, crossTabWired = false;
+function initCrossTab() {
+  if (crossTabWired) return;
+  crossTabWired = true;
+  try {
+    bc = new BroadcastChannel(NS + '-ceo');
+    bc.onmessage = e => { if (e.data && e.data.kind === 'thought') realEmit(e.data.channel, e.data.ev); };
+  } catch { /* sin BroadcastChannel */ }
+  if (navigator.locks && navigator.locks.request) {
+    navigator.locks.request(NS + '-ceo-leader', { mode: 'exclusive' }, () => new Promise(() => { isLeader = true; }))
+      .catch(() => { isLeader = true; });
+  } else { isLeader = true; }
+}
+function emit(channel, ev) {
+  realEmit(channel, ev);
+  try { bc && bc.postMessage({ kind: 'thought', channel, ev }); } catch { /* ev no serializable */ }
+}
+
+// init({ workspace, provider, onEvent, isBusy, namespace, defaultProfiles, defaultMission, defaultSoulDir })
+export function init(opts = {}) {
+  if (opts.workspace) ws = opts.workspace;
+  if (opts.provider) getProvider = opts.provider;
+  if (opts.onEvent) realEmit = opts.onEvent;
+  if (opts.isBusy) isBusy = opts.isBusy;
+  if (opts.namespace) NS = opts.namespace;
+  if (opts.defaultProfiles) defaultProfiles = opts.defaultProfiles;
+  if (opts.defaultMission) DEFAULT_MISSION = opts.defaultMission;
+  if (opts.defaultSoulDir) DEFAULT_SOUL = opts.defaultSoulDir;
+  initCrossTab();
+}
+export function isThisTabLeader() { return isLeader; }
+export function noteActivity() { lastActivity = Date.now(); if (running) running = 'interrupt'; }
+export function isEnabled() { return enabled; }
+export function isRunning() { return !!running; }
+// Play/stop: persistido AQUÍ (fuente única) — cualquier botón que lo toque
+// queda sincronizado, y la elección sobrevive a recargar la página.
+export function wasEnabledLastSession() { try { return localStorage.getItem(K('ceoEnabled')) === '1'; } catch { return false; } }
+// ¿el usuario llegó a decidir alguna vez (play o stop)? Distingue «nunca lo
+// tocó» de «lo pausó a propósito» — solo lo primero debe auto-activarse al
+// abrir la Mente; lo segundo hay que RESPETARLO, no pisarlo.
+export function hasDecided() { try { return localStorage.getItem(K('ceoEnabled')) != null; } catch { return false; } }
+export function enable() {
+  if (enabled) return;
+  enabled = true; lastActivity = Date.now(); schedule();
+  try { localStorage.setItem(K('ceoEnabled'), '1'); } catch { /* */ }
+  emit('sys', { type: 'status', text: 'CEO en guardia — trabajaré cuando estés ocioso' });
+}
+export function disable() {
+  enabled = false; running = false; if (timer) clearTimeout(timer);
+  try { localStorage.setItem(K('ceoEnabled'), '0'); } catch { /* */ }
+  emit('sys', { type: 'status', text: 'CEO en pausa' });
+}
+
+function schedule() { if (timer) clearTimeout(timer); timer = setTimeout(tick, TICK_MS); }
+
+// «Pensar ahora» — salta la espera de ociosidad. Sigue respetando el
+// semáforo: si otra pestaña es la líder, no compite por la GPU.
+export async function forceCycle() {
+  if (!isLeader) { emit('ceo', { type: 'paused', text: 'Otra pestaña lleva el cerebro — ábrela ahí para forzar un ciclo.' }); return false; }
+  if (running) return false;
+  // isReady() puede ser síncrona (Code: handle en memoria) o async (Claw: consulta IndexedDB) — se espera siempre.
+  if (!(await ws?.isReady()) || !getProvider()) { emit('ceo', { type: 'paused', text: 'Necesito un espacio de trabajo abierto y un modelo cargado.' }); return false; }
+  try { await runCycle(); } finally { lastCycleEnd = Date.now(); }
+  return true;
+}
+
+async function tick() {
+  if (!enabled) return;
+  const idle = Date.now() - lastActivity;
+  const rested = Date.now() - lastCycleEnd > COOLDOWN_MS;
+  const mightRun = isLeader && !running && !isBusy() && idle >= IDLE_MS && rested && getProvider();
+  if (mightRun && await ws?.isReady()) {
+    try { await runCycle(); } catch { /* siguiente ciclo */ }
+    lastCycleEnd = Date.now();
+  }
+  schedule();
+}
+
+// helper: corre el agente con el proveedor actual sobre un prompt, emitiendo
+// tokens/herramientas a un canal. Devuelve el texto final. Las tool-calls pasan
+// SIEMPRE por el mismo runTool que usa el chat normal (Agent.handle real).
+async function think(channel, task) {
+  const prov = getProvider();
+  if (!prov) return '';
+  const a = new Agent({ chat: (h, s, cb) => prov.chat(h, s, cb) });
+  let out = '';
+  await a.handle(task, ev => {
+    if (running === 'interrupt') throw new Error('interrumpido');
+    if (ev.type === 'token') { out += ev.text; emit(channel, { type: 'token', text: ev.text }); }
+    else if (ev.type === 'tool') emit(channel, { type: 'tool', text: humanizeTool(ev.call.tool, ev.call.args), tool: ev.call.tool, path: ev.call.args?.path || null });
+    else if (ev.type === 'tool_result') emit(channel, { type: 'tool_result', tool: ev.tool, text: String(ev.result || '').replace(/\s+/g, ' ').trim().slice(0, 100) });
+    else if (ev.type === 'text') { out = ev.text; }
+  });
+  return out;
+}
+
+async function runCycle() {
+  running = true;
+  cycleN++;
+  emit('ceo', { type: 'cycle', n: cycleN, text: 'Nuevo ciclo: reviso el espacio de trabajo y reparto el trabajo…' });
+
+  let tree = '';
+  try { tree = await ws.tree({ depth: 2 }); } catch { /* sin workspace */ }
+  emit('ceo', { type: 'survey', text: 'Panorama captado (' + tree.split('\n').length + ' entradas). Delegando…' });
+
+  const brief = (d) => `MISIÓN del equipo (fijada por el usuario): ${getMission()}\n` +
+    `Eres el jefe de ${d.name}. Dentro de esa misión, céntrate en: ${d.focus}. ` +
+    `Explora lo mínimo con tus herramientas y propón UNA mejora CONCRETA y accionable, ` +
+    `entendible por un humano. Sé breve. No modifiques nada existente: solo la propuesta.`;
+  const proposals = await Promise.all(getProfiles().map(async d => {
+    emit(d.id, { type: 'open', name: d.name, focus: d.focus });
+    try { const p = await think(d.id, brief(d)); emit(d.id, { type: 'done', text: p }); return { dept: d.name, text: p }; }
+    catch { emit(d.id, { type: 'done', text: '(interrumpido)' }); return null; }
+  }));
+  if (running === 'interrupt') { running = false; emit('ceo', { type: 'paused', text: 'Vuelves tú — dejo lo mío y te cedo el mando.' }); return; }
+
+  const valid = proposals.filter(Boolean).filter(p => p.text && p.text.length > 8);
+  const md = `# Propuestas de mejora — ciclo ${cycleN}\n\n**Misión:** ${getMission()}\n\n` +
+    valid.map(p => `## ${p.dept}\n${p.text}\n`).join('\n') +
+    `\n_— generado por el cerebro CEO de Elffuss mientras estabas ocioso._\n`;
+  const d = new Date();
+  const stamp = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}-${String(d.getHours()).padStart(2, '0')}${String(d.getMinutes()).padStart(2, '0')}`;
+  const topic = slug((valid[0]?.text || 'ciclo').split(/[.,;\n]/)[0]) || 'ciclo';
+  const path = `${getSoulDir()}/${stamp}-${topic}.md`;
+  try {
+    await rotateSoul();
+    await ws.write({ path, content: md });
+    emit('ceo', { type: 'built', text: `Propuesta guardada en ${path}`, path, md, proposals: valid });
+  } catch (e) {
+    emit('ceo', { type: 'built', text: 'Propuesta lista (no pude escribir el fichero)', md, proposals: valid });
+  }
+  running = false;
+}
+
+// Rotación: si hay demasiados ficheros sueltos, los MÁS ANTIGUOS se consolidan
+// (recopilan) en un único archivo.md y se borran — para no acabar con miles.
+async function rotateSoul() {
+  try {
+    const soul = getSoulDir();
+    const names = (await ws.list(soul)).filter(n => n.endsWith('.md') && n !== 'archivo.md');
+    if (names.length < SOUL_CAP) return;
+    names.sort(); // el nombre empieza por fecha → orden cronológico
+    const excess = names.slice(0, names.length - SOUL_CAP + 1);
+    let archive = ''; try { archive = await ws.read({ path: `${soul}/archivo.md` }); } catch { archive = '# Archivo histórico del cerebro\n'; }
+    for (const name of excess) {
+      try { archive += `\n---\n## ${name}\n${await ws.read({ path: `${soul}/${name}` })}\n`; } catch { /* */ }
+    }
+    await ws.write({ path: `${soul}/archivo.md`, content: archive.slice(-80000) });
+    for (const name of excess) { try { await ws.remove(soul, name); } catch { /* */ } }
+    emit('ceo', { type: 'reprogram', text: `Consolidé ${excess.length} propuestas antiguas en archivo.md` });
+  } catch { /* soulDir aún sin crear o sin permiso: nada que rotar */ }
+}

js/city.js

@@ -0,0 +1,157 @@
+// Vista «Ciudad 3D» — el proyecto abierto renderizado con el MOTOR REAL de
+// VibeCodeViewer (Sendery/VibeCodeViewer, Apache-2.0), vendorizado en js/vcc.
+// Aquí solo hacemos de glue: escaneamos la carpeta abierta al árbol empaquetado
+// que espera buildModel, montamos el render (cámara + OrbitControls + bloom) y
+// conectamos el raycast → abrir fichero en Monaco. La geometría (ciudad anidada
+// distrito→edificio→planta→…, cristal fresnel, fachadas con el árbol impreso,
+// suelo de circuito, leyenda) es la del builder original, sin tocar.
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import * as code from './tools/code.js';
+import { buildModel } from './vcc/model.js';
+import { buildCity } from './vcc/builder.js';
+import { THEME } from './vcc/theme.js';
+
+const IGNORE = new Set(['node_modules', '.git', 'dist', 'build', 'target', '__pycache__', '.next', 'venv', '.venv', '.DS_Store']);
+const MAX_FILES = 8000; // tope de seguridad para no colgar el navegador en monorepos
+
+let disposer = null;
+
+// Escanea el handle del proyecto al formato empaquetado de VibeCodeViewer:
+//   dir = [nombre, [subdirs], [ficheros]] · fichero = [nombre, bytes]
+async function scanTree(dir, budget) {
+  const dirs = [], files = [];
+  for await (const e of dir.values()) {
+    if (IGNORE.has(e.name)) continue;
+    (e.kind === 'directory' ? dirs : files).push(e);
+  }
+  dirs.sort((a, b) => a.name.localeCompare(b.name));
+  files.sort((a, b) => a.name.localeCompare(b.name));
+  const outFiles = [];
+  for (const f of files) {
+    if (budget.n >= MAX_FILES) break;
+    let size = 0; try { size = (await f.getFile()).size; } catch { /* ilegible */ }
+    outFiles.push([f.name, size]); budget.n++;
+  }
+  const outDirs = [];
+  for (const d of dirs) { if (budget.n >= MAX_FILES) break; outDirs.push(await scanTree(d, budget)); }
+  return [dir.name, outDirs, outFiles];
+}
+
+export async function renderCity(container, onOpenFile) {
+  disposeCity();
+  const root = code.handle();
+  if (!root) { container.innerHTML = '<div class="view-loading">Abre un proyecto primero.</div>'; return; }
+  container.innerHTML = '<div class="view-loading">Construyendo la metrópolis del proyecto…</div>';
+
+  const budget = { n: 0 };
+  const tree = await scanTree(root, budget);
+  const model = buildModel(tree, null);
+  if (!model.files.length) { container.innerHTML = '<div class="view-loading">Proyecto vacío.</div>'; return; }
+
+  container.innerHTML =
+    '<canvas id="city-canvas"></canvas>' +
+    '<div class="view-head">Ciudad 3D · ' + model.files.length + (budget.n >= MAX_FILES ? '+' : '') +
+    ' ficheros en ' + model.districts.length + ' distritos' +
+    '<span class="view-hint">arrastra para orbitar · rueda para zoom · clic en un edificio → abrir</span></div>';
+  const canvas = container.querySelector('#city-canvas');
+  const W = container.clientWidth || 800, H = container.clientHeight || 600;
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: 'high-performance' });
+  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+  renderer.setSize(W, H, false);
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.0;
+  renderer.setClearColor(THEME.background, 1);
+
+  const scene = new THREE.Scene();
+  scene.background = new THREE.Color(THEME.background);
+  const extent = Math.max(model.city.box.sx, model.city.box.sz);
+  scene.fog = new THREE.FogExp2(THEME.fog, 0.62 / extent);
+
+  const camera = new THREE.PerspectiveCamera(55, W / H, 0.1, extent * 14);
+  camera.position.set(extent * 0.7, extent * 0.6, extent * 0.7);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.08;
+  controls.maxPolarAngle = Math.PI * 0.495;   // no bajar del suelo
+  controls.target.set(0, extent * 0.04, 0);
+  controls.update();
+
+  // pipeline con bloom (la receta del builder: HDR + bloom solo en lo resaltado)
+  const composer = new EffectComposer(renderer);
+  composer.setSize(W, H);
+  composer.addPass(new RenderPass(scene, camera));
+  const bloom = new UnrealBloomPass(new THREE.Vector2(W, H), THEME.bloom.strength, 0.25, THEME.bloom.threshold);
+  composer.addPass(bloom);
+  composer.addPass(new OutputPass());
+
+  const city = buildCity(scene, model, THEME);
+
+  // ── interacción: hover resalta edificios, clic abre el fichero ────────────
+  const ray = new THREE.Raycaster(), ptr = new THREE.Vector2();
+  let hovered = null, lastHover = 0, downXY = null;
+  const setPtr = e => { const r = canvas.getBoundingClientRect(); ptr.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1); };
+  const onMove = e => {
+    setPtr(e);
+    const now = performance.now(); if (now - lastHover < 50) return; lastHover = now;
+    ray.setFromCamera(ptr, camera);
+    const b = ray.intersectObjects(city.shells)[0]?.object.userData.building ?? null;
+    if (b !== hovered) {
+      if (hovered) city.paintNode(hovered, 0);
+      hovered = b;
+      if (b) city.paintNode(b, 0.16);
+      canvas.style.cursor = b ? 'pointer' : 'grab';
+    }
+  };
+  const onDown = e => { downXY = [e.clientX, e.clientY]; };
+  const onUp = e => {
+    if (!downXY) return;
+    const moved = Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]); downXY = null;
+    if (moved > 5) return; // fue un arrastre de cámara
+    setPtr(e); ray.setFromCamera(ptr, camera);
+    const fileHit = ray.intersectObject(city.filesMesh)[0];
+    const shellHit = ray.intersectObjects(city.shells)[0];
+    if (fileHit && (!shellHit || fileHit.distance < shellHit.distance + 2)) {
+      const f = model.files[fileHit.instanceId];
+      if (f) onOpenFile(f.rel);
+    } else if (shellHit) {
+      // clic en un edificio (carpeta): centra la cámara en él
+      const b = shellHit.object.userData.building;
+      controls.target.set(b.box.cx, b.box.cy, b.box.cz);
+    }
+  };
+  canvas.addEventListener('pointermove', onMove);
+  canvas.addEventListener('pointerdown', onDown);
+  canvas.addEventListener('pointerup', onUp);
+
+  const onResize = () => {
+    const w = container.clientWidth || W, h = container.clientHeight || H;
+    renderer.setSize(w, h, false); composer.setSize(w, h); bloom.resolution.set(w, h);
+    camera.aspect = w / h; camera.updateProjectionMatrix();
+  };
+  window.addEventListener('resize', onResize);
+
+  let raf = null;
+  const loop = () => { raf = requestAnimationFrame(loop); controls.update(); composer.render(); };
+  loop();
+
+  disposer = () => {
+    if (raf) cancelAnimationFrame(raf);
+    window.removeEventListener('resize', onResize);
+    canvas.removeEventListener('pointermove', onMove);
+    canvas.removeEventListener('pointerdown', onDown);
+    canvas.removeEventListener('pointerup', onUp);
+    controls.dispose();
+    city.dispose();
+    composer.dispose?.();
+    renderer.dispose();
+  };
+}
+
+export function disposeCity() { if (disposer) { disposer(); disposer = null; } }

js/context.js

@@ -0,0 +1,91 @@
+// Gestor de contexto ACE-lite: eviction de historial por relevancia, portado
+// del attention-context-eviction (ACE_R) de agentic-install a nivel de
+// mensaje (IDF + BM25-lite; en navegador no hay acceso a las atenciones).
+// turboquant es cuantización de PESOS — para contexto, esto es lo que aplica.
+//
+// Reglas: el presupuesto es en tokens (~4 chars/token). Se conservan SIEMPRE
+// los últimos RECENT mensajes; los antiguos compiten por el hueco restante
+// puntuados por BM25-lite contra la consulta actual. Los evictados se
+// sustituyen por una marca de omisión para que el modelo sepa que falta algo.
+
+const RECENT = 6;
+const MAX_MSG_CHARS = 12000; // ningún mensaje (p.ej. un README enorme) revienta el contexto
+
+// Trunca por el MEDIO conservando cabeza y cola (útil para código/documentos).
+function clampMsg(m) {
+  const c = m.content || '';
+  if (c.length <= MAX_MSG_CHARS) return m;
+  const head = Math.floor(MAX_MSG_CHARS * 0.7);
+  const tail = MAX_MSG_CHARS - head - 40;
+  return { ...m, content: c.slice(0, head) + `\n… [recortado ${c.length - MAX_MSG_CHARS} caracteres] …\n` + c.slice(-tail) };
+}
+const STOP = new Set(('de la que el en y a los del se las por un para con no una su al lo como más pero sus le ' +
+  'ya o este sí porque esta entre cuando muy sin sobre también me hasta hay donde quien desde todo nos durante ' +
+  'todos uno les ni contra otros ese eso ante ellos e esto mí antes algunos qué unos yo otro otras otra él tanto ' +
+  'esa estos mucho quienes nada muchos cual poco ella estar estas algunas algo nosotros tu te ti mi es son era eres').split(' '));
+
+const tokens = s => (s.toLowerCase().match(/[a-záéíóúñü0-9_.]{2,}/g) || []).filter(w => !STOP.has(w));
+const tokEstimate = m => Math.ceil((m.content || '').length / 4) + 4;
+
+function bm25Scores(messages, query) {
+  const q = [...new Set(tokens(query))];
+  const docs = messages.map(m => tokens(m.content));
+  const N = docs.length || 1;
+  const avgLen = docs.reduce((s, d) => s + d.length, 0) / N || 1;
+  const df = new Map();
+  for (const d of docs) for (const w of new Set(d)) df.set(w, (df.get(w) || 0) + 1);
+  const k = 1.2, b = 0.75;
+  return docs.map(d => {
+    if (!d.length) return 0;
+    const tf = new Map();
+    for (const w of d) tf.set(w, (tf.get(w) || 0) + 1);
+    let score = 0;
+    for (const w of q) {
+      const f = tf.get(w);
+      if (!f) continue;
+      const idf = Math.log(1 + (N - (df.get(w) || 0) + 0.5) / ((df.get(w) || 0) + 0.5));
+      score += idf * (f * (k + 1)) / (f + k * (1 - b + b * (d.length / avgLen)));
+    }
+    return score;
+  });
+}
+
+// Recorta resultados de herramientas antiguos: la cola larga rara vez importa.
+const shrink = m => m.content.startsWith('[resultado') && m.content.length > 600
+  ? { ...m, content: m.content.slice(0, 600) + '\n… (recortado por antigüedad)' }
+  : m;
+
+export function packHistory(history, budgetTokens = 2200) {
+  if (!history.length) return history;
+  // los recientes también se recortan por mensaje: un solo tool-result gigante
+  // (README de un repo grande) reventaba el contexto → «Too many tokens».
+  const recent = history.slice(-RECENT).map(clampMsg);
+  let used = recent.reduce((s, m) => s + tokEstimate(m), 0);
+  const old = history.slice(0, -RECENT).map(shrink);
+  if (!old.length || used >= budgetTokens) return recent;
+
+  const query = [...history].reverse().find(m =>
+    m.role === 'user' && !m.content.startsWith('[resultado'))?.content || '';
+  const scores = bm25Scores(old, query);
+  // orden por relevancia; a igualdad gana lo más nuevo
+  const ranked = old.map((m, i) => ({ m, i, s: scores[i] }))
+    .sort((a, b) => (b.s - a.s) || (b.i - a.i));
+
+  const keep = new Set();
+  for (const { m, i } of ranked) {
+    const cost = tokEstimate(m);
+    if (used + cost > budgetTokens) continue;
+    used += cost;
+    keep.add(i);
+  }
+  const packed = [];
+  let dropped = 0;
+  old.forEach((m, i) => {
+    if (keep.has(i)) {
+      if (dropped) { packed.push({ role: 'user', content: `[…${dropped} mensajes antiguos omitidos…]` }); dropped = 0; }
+      packed.push(m);
+    } else dropped++;
+  });
+  if (dropped) packed.push({ role: 'user', content: `[…${dropped} mensajes antiguos omitidos…]` });
+  return [...packed, ...recent];
+}

js/conversations.js

@@ -0,0 +1,249 @@
+// Conversaciones: varias a la vez, como pestañas — cada una con su propio
+// historial (su propio Agent) y su propia cola de mensajes pendientes.
+// Cerrar una pestaña NO borra la conversación (solo la Historial sí). Todo
+// persiste en IndexedDB, sobrevive a recargar.
+//
+// Procesado: cada conversación acepta y encola mensajes de forma totalmente
+// independiente (mandar en la pestaña B mientras la A está pensando no
+// bloquea nada). La generación en sí (la llamada real al modelo) se
+// serializa con un cerrojo global — solo hay UN modelo cargado en el
+// navegador y una sesión de inferencia no admite dos generate() a la vez sin
+// corromperse — así que las conversaciones se turnan para «hablar» con el
+// modelo, pero cada una sigue funcionando y aceptando mensajes de forma
+// independiente mientras espera su turno.
+import { Agent } from './agent.js';
+import { runGoal, TASK_PREFIX } from './goal.js';
+import * as db from './db.js';
+import * as telemetry from './telemetry.js';
+
+const NS = 'elffusscode';
+const TABS_KEY = NS + '.openTabs';
+const ACTIVE_KEY = NS + '.activeConv';
+const HIST_CAP = 80; // mensajes por conversación que se persisten
+
+let providerRef = null;
+const convs = new Map();     // id -> { id, title, agent, queue, pumping, createdAt, updatedAt }
+let openTabIds = [];
+let activeId = null;
+let onChange = () => {};
+
+const genId = () => 'c' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+const cleanTitle = s => String(s).replace(/\s+/g, ' ').trim();
+
+const GOAL_PREFIX = TASK_PREFIX + 'Objetivo: ';
+export function titleFor(conv) {
+  if (conv.title) return conv.title;
+  const firstUser = conv.agent.history.find(m =>
+    m.role === 'user' && !m.content.startsWith('[resultado') &&
+    (!m.content.startsWith(TASK_PREFIX) || m.content.startsWith(GOAL_PREFIX)));
+  if (!firstUser) return 'Nueva conversación';
+  // el objetivo lleva un prefijo interno ([tarea-objetivo] Objetivo: …) que
+  // no debe filtrarse al título de la pestaña — se muestra el texto limpio.
+  const raw = firstUser.content.startsWith(GOAL_PREFIX) ? firstUser.content.slice(GOAL_PREFIX.length) : firstUser.content;
+  const t = cleanTitle(raw);
+  return t.length > 40 ? t.slice(0, 40) + '…' : t || 'Nueva conversación';
+}
+
+export function setProvider(mod) {
+  providerRef = mod;
+  for (const c of convs.values()) c.agent.setProvider(mod);
+}
+export function getProvider() { return providerRef; }
+
+export function isBusy() {
+  for (const c of convs.values()) if (c.pumping || c.queue.length) return true;
+  return false;
+}
+
+export function getActive() { return activeId ? convs.get(activeId) : null; }
+export function getOpenTabs() { return openTabIds.map(id => convs.get(id)).filter(Boolean); }
+
+async function persistConv(conv) {
+  const all = await db.get('kv', 'conversations').catch(() => null) || [];
+  const i = all.findIndex(c => c.id === conv.id);
+  const rec = {
+    id: conv.id, title: titleFor(conv), history: conv.agent.history.slice(-HIST_CAP),
+    queue: conv.queue, plan: conv.plan || null, createdAt: conv.createdAt, updatedAt: conv.updatedAt,
+  };
+  if (i >= 0) all[i] = rec; else all.push(rec);
+  await db.set('kv', 'conversations', all).catch(() => {});
+}
+function persistMeta() {
+  try { localStorage.setItem(TABS_KEY, JSON.stringify(openTabIds)); } catch { /* lleno */ }
+  try { localStorage.setItem(ACTIVE_KEY, activeId || ''); } catch { /* lleno */ }
+}
+
+function makeConv(id, saved) {
+  const conv = {
+    id, title: saved?.title || null, agent: new Agent(providerRef),
+    queue: saved?.queue ? [...saved.queue] : [], pumping: false, plan: saved?.plan || null,
+    createdAt: saved?.createdAt || Date.now(), updatedAt: saved?.updatedAt || Date.now(),
+  };
+  if (saved?.history) conv.agent.history = saved.history;
+  convs.set(id, conv);
+  return conv;
+}
+
+export function create() {
+  const conv = makeConv(genId());
+  openTabIds.push(conv.id);
+  activeId = conv.id;
+  persistMeta();
+  onChange('switch', conv.id);
+  return conv;
+}
+
+// reabre una conversación guardada (de la Historial) como pestaña, o activa
+// la pestaña si ya estaba abierta
+export async function open(id) {
+  if (!convs.has(id)) {
+    const saved = (await db.get('kv', 'conversations').catch(() => null) || []).find(c => c.id === id);
+    if (!saved) return null;
+    makeConv(id, saved);
+  }
+  if (!openTabIds.includes(id)) openTabIds.push(id);
+  activeId = id;
+  persistMeta();
+  onChange('switch', id);
+  return convs.get(id);
+}
+
+export function switchTo(id) {
+  if (!convs.has(id) || activeId === id) return;
+  activeId = id;
+  persistMeta();
+  onChange('switch', id);
+}
+
+// añade un mensaje fuera del ciclo normal de envío (p.ej. el informe
+// autónomo del cerebro CEO) al historial REAL de una conversación — si no,
+// solo viviría en el DOM y desaparecería al cambiar de pestaña o recargar.
+export async function appendMessage(id, role, content) {
+  const c = convs.get(id);
+  if (!c) return;
+  c.agent.history.push({ role, content });
+  c.updatedAt = Date.now();
+  await persistConv(c);
+}
+
+// quita la pestaña de la vista — la conversación sigue viva en la Historial
+export function closeTab(id) {
+  openTabIds = openTabIds.filter(x => x !== id);
+  if (activeId === id) activeId = openTabIds[openTabIds.length - 1] || null;
+  persistMeta();
+  if (!openTabIds.length) create(); else onChange('tabs');
+}
+
+// borra la conversación de verdad (desde la Historial)
+export async function remove(id) {
+  convs.delete(id);
+  openTabIds = openTabIds.filter(x => x !== id);
+  if (activeId === id) activeId = openTabIds[openTabIds.length - 1] || null;
+  const all = (await db.get('kv', 'conversations').catch(() => null) || []).filter(c => c.id !== id);
+  await db.set('kv', 'conversations', all).catch(() => {});
+  persistMeta();
+  if (!openTabIds.length) create(); else onChange('tabs');
+}
+
+export async function listAll() {
+  const all = await db.get('kv', 'conversations').catch(() => null) || [];
+  return all.slice().sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+// ---- envío / procesado ----
+// items de la cola: {kind:'chat'|'goal', text} — 'chat' es un turno normal
+// (agent.handle), 'goal' dispara el planificador/ejecutor de goal.js. Las
+// colas persistidas ANTES de que existiera el modo Objetivo guardaban texto
+// suelto (strings) — normalizeItem() los sigue aceptando como 'chat'.
+let inferenceLock = Promise.resolve();
+const normalizeItem = it => (typeof it === 'string' ? { kind: 'chat', text: it } : it);
+
+export function send(id, text) {
+  const conv = convs.get(id);
+  if (!conv) return;
+  conv.queue.push({ kind: 'chat', text });
+  persistConv(conv);
+  pump(conv);
+}
+
+// 🎯 Modo Objetivo: en vez de un turno de chat normal, el mensaje se trata
+// como un objetivo — se planifica en tareas y se ejecutan una a una (ver
+// goal.js, mismo patrón planificador/ejecutor de clonagent).
+export function startGoal(id, text) {
+  const conv = convs.get(id);
+  if (!conv) return;
+  conv.queue.push({ kind: 'goal', text });
+  persistConv(conv);
+  pump(conv);
+}
+
+async function pump(conv) {
+  if (conv.pumping) return;
+  conv.pumping = true;
+  onChange('pumping', conv.id, true);
+  while (conv.queue.length) {
+    const item = normalizeItem(conv.queue[0]);
+    const myTurn = inferenceLock;
+    let release;
+    inferenceLock = new Promise(r => { release = r; });
+    await myTurn; // espera su turno de inferencia (un solo modelo cargado, no admite 2 generate() a la vez)
+    try {
+      // un fallo aquí (del modelo, de una tool, o del propio repintado en
+      // main.js) NUNCA debe dejar la conversación "pumping" para siempre —
+      // eso bloquearía sus futuros mensajes Y al cerebro CEO (isBusy()).
+      const onEvent = ev => {
+        try { onChange('event', conv.id, ev); } catch (e) { console.error('[elffuss] fallo pintando un evento de chat', e); }
+      };
+      if (item.kind === 'goal') await runGoal(conv, item.text, onEvent);
+      else await conv.agent.handle(item.text, onEvent);
+    } catch (e) {
+      console.error('[elffuss] fallo procesando el turno', e);
+      telemetry.reportError('pump: ' + (e?.message || e), { stack: e?.stack || '' });
+      try { onChange('event', conv.id, { type: 'error', text: 'Error interno: ' + (e?.message || e) }); } catch { /* ya está registrado arriba */ }
+    } finally { release(); }
+    conv.queue.shift();
+    conv.updatedAt = Date.now();
+    await persistConv(conv);
+  }
+  conv.pumping = false;
+  onChange('pumping', conv.id, false);
+}
+
+export async function init({ onEvent }) {
+  onChange = onEvent;
+
+  // migración única: el esquema viejo era UNA sola conversación (kv/history + kv/queue)
+  const already = await db.get('kv', 'conversations').catch(() => null);
+  if (!already) {
+    const oldHistory = await db.get('kv', 'history').catch(() => null);
+    if (oldHistory?.length) {
+      const oldQueue = await db.get('kv', 'queue').catch(() => null);
+      await db.set('kv', 'conversations', [{
+        id: genId(), title: null, history: oldHistory, queue: oldQueue || [],
+        createdAt: Date.now(), updatedAt: Date.now(),
+      }]).catch(() => {});
+    }
+  }
+
+  let tabIds = [], active = null;
+  try { tabIds = JSON.parse(localStorage.getItem(TABS_KEY) || '[]'); } catch { /* corrupto */ }
+  try { active = localStorage.getItem(ACTIVE_KEY) || null; } catch { /* */ }
+  const all = await db.get('kv', 'conversations').catch(() => null) || [];
+
+  for (const id of tabIds) {
+    const saved = all.find(c => c.id === id);
+    if (saved) { makeConv(id, saved); openTabIds.push(id); }
+  }
+  if (active && convs.has(active)) activeId = active;
+  else if (openTabIds.length) activeId = openTabIds[0];
+
+  if (!openTabIds.length) {
+    // nada abierto (primera vez, o se perdió el estado de pestañas): retoma
+    // la conversación más reciente si hay alguna, si no, una nueva vacía
+    const mostRecent = all.slice().sort((a, b) => b.updatedAt - a.updatedAt)[0];
+    if (mostRecent) { makeConv(mostRecent.id, mostRecent); openTabIds.push(mostRecent.id); activeId = mostRecent.id; }
+    else create();
+  }
+  for (const conv of convs.values()) if (conv.queue.length) pump(conv);
+  persistMeta();
+}

js/db.js

@@ -0,0 +1,32 @@
+// IndexedDB mínima: stores clave→valor.
+const NAME = 'elffuss-code', VERSION = 2;
+const STORES = ['kv', 'apps', 'tasks', 'vault', 'fs', 'memory'];
+let dbPromise = null;
+
+function open() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(NAME, VERSION);
+    req.onupgradeneeded = () => {
+      for (const s of STORES)
+        if (!req.result.objectStoreNames.contains(s)) req.result.createObjectStore(s);
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+  return dbPromise;
+}
+
+function tx(store, mode, fn) {
+  return open().then(db => new Promise((resolve, reject) => {
+    const req = fn(db.transaction(store, mode).objectStore(store));
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  }));
+}
+
+export const get  = (store, key)      => tx(store, 'readonly',  s => s.get(key));
+export const set  = (store, key, val) => tx(store, 'readwrite', s => s.put(val, key));
+export const del  = (store, key)      => tx(store, 'readwrite', s => s.delete(key));
+export const keys = (store)           => tx(store, 'readonly',  s => s.getAllKeys());
+export const all  = (store)           => tx(store, 'readonly',  s => s.getAll());

js/goal.js

@@ -0,0 +1,147 @@
+// Modo Objetivo (🎯 Goal): mismo patrón planificador/ejecutor que clonagent
+// (~/work2026/clonagent) — un PLANIFICADOR descompone el objetivo en una
+// lista de tareas con estado (pending/in-progress/done/failed/skipped), y un
+// EJECUTOR las va ejecutando una a una hasta que no queda ninguna pendiente,
+// marcando el resultado de cada una. Si una tarea falla, las siguientes se
+// saltan (cascada) en vez de seguir a ciegas — igual que el fallo→skip de
+// dependencias de clonagent.
+//
+// Aquí el "ejecutor" de cada tarea es el MISMO bucle de tool-calling que ya
+// usa el chat normal (agent.handle): cada tarea del plan se manda como si
+// fuera un mensaje de usuario, con todo el historial previo como contexto —
+// así una tarea puede apoyarse en lo que hizo la anterior, igual que la
+// sesión del ejecutor de clonagent tiene a la vista el fichero de tareas
+// entero.
+import { toolHelp, snapshot } from './tools/index.js';
+
+const MAX_TASK_RETRIES = 2;
+const TASK_PREFIX = '[tarea-objetivo] ';
+
+function plannerPrompt(goalText, context) {
+  return `ROL: PLANIFICADOR
+
+Objetivo del usuario: "${goalText}"
+
+CONTEXTO AHORA (estado real del IDE):
+${context}
+
+Herramientas disponibles para la fase de EJECUCIÓN (aquí solo planificas, no las llames):
+${toolHelp()}
+
+Descompón el objetivo en una lista de tareas CONCRETAS, ORDENADAS y ejecutables una tras otra con esas herramientas. Entre 2 y 6 tareas normalmente basta — no fragmentes de más, cada tarea debe ser un paso real con sentido propio.
+
+Responde SOLO con este JSON, nada de texto ni fences alrededor:
+{"plan": "una frase resumiendo el enfoque", "tasks": [{"title": "título corto", "description": "qué hay que hacer, concreto y accionable"}]}`;
+}
+
+// Extrae el primer objeto JSON balanceado del texto (el modelo a veces mete
+// prosa alrededor pese a la instrucción de "SOLO JSON").
+function extractJson(text) {
+  const start = text.indexOf('{');
+  if (start < 0) return null;
+  let depth = 0, inStr = false, esc = false;
+  for (let i = start; i < text.length; i++) {
+    const ch = text[i];
+    if (esc) { esc = false; continue; }
+    if (ch === '\\') { esc = true; continue; }
+    if (ch === '"') inStr = !inStr;
+    else if (!inStr) {
+      if (ch === '{') depth++;
+      else if (ch === '}' && --depth === 0) {
+        try { return JSON.parse(text.slice(start, i + 1)); } catch { return null; }
+      }
+    }
+  }
+  return null;
+}
+
+// Llamada ÚNICA al modelo con el rol de planificador — no toca agent.history
+// (el plan resultante se guarda aparte; el objetivo en sí SÍ se añade al
+// historial en runGoal, para que las tareas puedan apoyarse en él).
+export async function planGoal(agent, goalText) {
+  const context = await snapshot().catch(() => '');
+  const raw = await agent.provider.chat([{ role: 'user', content: goalText }], plannerPrompt(goalText, context), () => {});
+  const parsed = extractJson(raw);
+  if (!parsed || !Array.isArray(parsed.tasks) || !parsed.tasks.length) {
+    throw new Error('el planificador no devolvió una lista de tareas válida');
+  }
+  return {
+    planText: String(parsed.plan || '').trim(),
+    tasks: parsed.tasks.slice(0, 10).map(t => ({
+      title: String(t.title || 'tarea').trim(),
+      description: String(t.description || t.title || '').trim(),
+    })),
+  };
+}
+
+function clonePlan(plan) { return JSON.parse(JSON.stringify(plan)); }
+
+// Orquesta plan → ejecución. onEvent es el MISMO canal que usa el chat
+// normal (conversations.js lo conecta a onConvEvent) — los eventos de las
+// tareas (token/tool/tool_result/text/error) se reenvían tal cual, y además
+// se emiten 'plan' / 'plan_update' / 'plan_complete' para la tarjeta de plan.
+export async function runGoal(conv, goalText, onEvent) {
+  conv.agent.history.push({ role: 'user', content: TASK_PREFIX + 'Objetivo: ' + goalText });
+
+  const plan = {
+    id: 'g' + Date.now().toString(36), goal: goalText, planText: '', status: 'planning',
+    tasks: [], createdAt: Date.now(), updatedAt: Date.now(),
+  };
+  conv.plan = plan;
+  onEvent({ type: 'plan', plan: clonePlan(plan) });
+
+  let parsed;
+  try {
+    parsed = await planGoal(conv.agent, goalText);
+  } catch (e) {
+    plan.status = 'failed';
+    plan.updatedAt = Date.now();
+    onEvent({ type: 'plan_update', plan: clonePlan(plan) });
+    onEvent({ type: 'error', text: 'No pude planificar el objetivo: ' + e.message });
+    return;
+  }
+
+  plan.planText = parsed.planText;
+  plan.tasks = parsed.tasks.map((t, i) => ({
+    id: 't' + (i + 1), title: t.title, description: t.description,
+    status: 'pending', retries: 0, result: '',
+  }));
+  plan.status = 'running';
+  plan.updatedAt = Date.now();
+  onEvent({ type: 'plan_update', plan: clonePlan(plan) });
+
+  let cascadeFail = false;
+  for (const task of plan.tasks) {
+    if (cascadeFail) { task.status = 'skipped'; plan.updatedAt = Date.now(); onEvent({ type: 'plan_update', plan: clonePlan(plan) }); continue; }
+
+    task.status = 'in-progress';
+    plan.updatedAt = Date.now();
+    onEvent({ type: 'plan_update', plan: clonePlan(plan) });
+
+    const taskPrompt = `${TASK_PREFIX}Tarea ${task.id} del objetivo «${goalText}»: ${task.title}\n${task.description}`;
+    let done = false;
+    while (!done && task.retries <= MAX_TASK_RETRIES) {
+      let sawError = false, errText = '';
+      await conv.agent.handle(taskPrompt, ev => {
+        if (ev.type === 'error') { sawError = true; errText = ev.text; }
+        onEvent(ev);
+      });
+      if (!sawError) { done = true; }
+      else {
+        task.retries++;
+        task.result = errText;
+        if (task.retries > MAX_TASK_RETRIES) break;
+      }
+    }
+    task.status = done ? 'done' : 'failed';
+    plan.updatedAt = Date.now();
+    onEvent({ type: 'plan_update', plan: clonePlan(plan) });
+    if (!done) cascadeFail = true; // el resto se saltan, igual que la cascada de dependencias fallidas en clonagent
+  }
+
+  plan.status = plan.tasks.some(t => t.status === 'failed') ? 'failed' : 'done';
+  plan.updatedAt = Date.now();
+  onEvent({ type: 'plan_complete', plan: clonePlan(plan) });
+}
+
+export { TASK_PREFIX };

js/humanize.js

@@ -0,0 +1,48 @@
+// Frase legible por humano para una tool-call («leyendo app.js…»). Compartido
+// por el cerebro CEO (ceo.js) y el streaming en vivo del chat — así nunca se
+// le enseña JSON crudo al usuario, siempre la misma redacción. Cubre los
+// nombres de herramienta de Elffuss Code (code.*, terminal.*) y de Elffuss
+// Claw (fs.*, app.*, web.*, skill.*, memory.*, tasks.*) — un tool desconocido
+// cae al genérico «nombre argumento» sin romper nada.
+export function humanizeTool(name, args) {
+  const p = args?.path, q = args?.query, c = args?.command, n = args?.name;
+  switch (name) {
+    case 'code.read': case 'fs.read': return `leyendo ${p}…`;
+    case 'code.write': case 'fs.write': return `escribiendo ${p}…`;
+    case 'code.tree': return `explorando ${p || 'el proyecto'}…`;
+    case 'fs.list': return `explorando ${p || 'la carpeta'}…`;
+    case 'code.search': return `buscando «${q}»…`;
+    case 'fs.pick_folder': return 'pidiendo acceso a una carpeta…';
+    case 'fs.copy': return `copiando ${args?.pattern || 'archivos'}…`;
+    case 'fs.watch': return `vigilando ${args?.from || 'una carpeta'}…`;
+    case 'terminal.run': return `ejecutando: ${c}`;
+    case 'app.create': return `creando la app «${n}»…`;
+    case 'app.open': return `abriendo la app «${n}»…`;
+    case 'skill.create': return `creando la skill «${n}»…`;
+    case 'memory.save': return `recordando: ${args?.fact}…`;
+    case 'tasks.add': return 'programando una tarea…';
+    case 'web.search': return `buscando en internet «${q}»…`;
+    case 'web.images': return `buscando imágenes de «${q}»…`;
+    case 'web.fetch': return `leyendo ${p || args?.url}…`;
+    default: return name + (p || q || c || n ? ' ' + (p || q || c || n) : '');
+  }
+}
+
+// Detecta si el buffer que va llegando EN STREAMING ha entrado en un bloque de
+// tool-call (```tool { … }) y, si es así, devuelve una frase humana en vez del
+// JSON crudo — «preparando una acción…» hasta que el nombre de la tool sea
+// legible, luego «leyendo app.js…» tan pronto como el campo aparezca, aunque
+// el JSON todavía no haya cerrado.
+export function humanizeStreamPreview(buf) {
+  if (buf.search(/```/) === -1 && !/^\s*\{\s*"tool"/.test(buf)) return null;
+  const toolM = buf.match(/"tool"\s*:\s*"([\w.]+)"/);
+  if (!toolM) return 'preparando una acción…';
+  const pathM = buf.match(/"path"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  const queryM = buf.match(/"query"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  const cmdM = buf.match(/"command"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  const nameM = buf.match(/"name"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  const out = humanizeTool(toolM[1], { path: pathM?.[1], query: queryM?.[1], command: cmdM?.[1], name: nameM?.[1] });
+  // el nombre de la tool ya se ve pero su campo (path/query/…) aún no llegó:
+  // mejor el genérico que un «leyendo undefined…» a medio streamear
+  return /undefined/.test(out) ? 'preparando una acción…' : out;
+}

js/icons.js

@@ -0,0 +1,67 @@
+// Iconos estilo VS Code, en SVG inline propio (sin dependencias).
+// Archivos: insignia con la abreviatura y el color canónico del lenguaje.
+const FILE_TYPES = {
+  js: ['JS', '#f1dd3f'], mjs: ['JS', '#f1dd3f'], cjs: ['JS', '#f1dd3f'],
+  ts: ['TS', '#3178c6'], tsx: ['TS', '#3178c6'], jsx: ['JS', '#61dafb'],
+  py: ['PY', '#4b8bbe'], rs: ['RS', '#dea584'], go: ['GO', '#00add8'],
+  java: ['J', '#e76f00'], c: ['C', '#659ad2'], h: ['H', '#659ad2'],
+  cpp: ['C+', '#f34b7d'], cs: ['C#', '#178600'],
+  json: ['{}', '#cbcb41'], yaml: ['Y', '#cb4b4b'], yml: ['Y', '#cb4b4b'],
+  toml: ['T', '#9c4221'], xml: ['<>', '#e37933'],
+  html: ['<>', '#e34c26'], css: ['#', '#9b7cf6'], scss: ['#', '#c6538c'],
+  md: ['M', '#519aba'], txt: ['≡', '#8b93a8'], csv: ['⊞', '#89e051'],
+  sh: ['$', '#89e051'], sql: ['DB', '#e38c00'],
+  svg: ['SV', '#ffb13b'], png: ['IMG', '#a074c4'], jpg: ['IMG', '#a074c4'],
+  gif: ['IMG', '#a074c4'], ico: ['IMG', '#a074c4'],
+  lock: ['🔒', '#8b93a8'], gitignore: ['GIT', '#f05033'],
+};
+
+export function fileIcon(name) {
+  const base = name.toLowerCase();
+  const ext = base.startsWith('.git') ? 'gitignore' : (base.split('.').pop() || '');
+  const [label, color] = FILE_TYPES[ext] || ['·', '#6b7391'];
+  const fontSize = label.length > 2 ? 5 : (label.length === 2 ? 6.5 : 8);
+  return `<svg class="fico" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+    <rect x="1.5" y="1.5" width="13" height="13" rx="3" fill="${color}1f" stroke="${color}" stroke-width="1"/>
+    <text x="8" y="${label.length > 2 ? 10.4 : 10.8}" font-size="${fontSize}" text-anchor="middle"
+      fill="${color}" font-family="system-ui" font-weight="700">${label}</text></svg>`;
+}
+
+export function folderIcon() {
+  return `<svg class="fico chev" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+    <path class="chevron" d="M6 4.5 L10 8 L6 11.5" fill="none" stroke="#8b93a8" stroke-width="1.6" stroke-linecap="round"/>
+  </svg><svg class="fico" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M1.5 4 a1 1 0 0 1 1-1 h3.2 l1.6 1.8 h6.2 a1 1 0 0 1 1 1 v6.7 a1 1 0 0 1 -1 1 h-11 a1 1 0 0 1 -1-1 Z"
+      fill="#dcb67a33" stroke="#dcb67a" stroke-width="1"/></svg>`;
+}
+
+// Codicons de UI (estilo VS Code, sin emojis). Trazos con currentColor.
+const ico = (p, sw = 1.6) => `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">${p}</svg>`;
+export const UI = {
+  clear: ico('<path d="M4 7h16"/><path d="M9 7V5h6v2"/><path d="M6 7l1 13h10l1-13"/><path d="M10 11v6M14 11v6"/>'),
+  history: ico('<circle cx="12" cy="13" r="8"/><path d="M12 9v4l3 2"/><path d="M5 3.5l1.5 2.5M19 3.5l-1.5 2.5"/>'),
+  gear: ico('<circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8"/>'),
+  send: ico('<path d="M4 12l16-8-6 16-3.5-6.5L4 12z"/>'),
+  add: ico('<path d="M12 5v14M5 12h14"/>', 1.8),
+  slash: ico('<path d="M15 5L9 19"/>', 1.8),
+  editor: ico('<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M12 4v16"/>'),
+  chat: ico('<path d="M4 5h16v11H9l-5 4z"/>'),
+  puzzle: ico('<path d="M10 4h4a1 1 0 0 1 1 1v2a1.5 1.5 0 1 0 3 0V6h2a1 1 0 0 1 1 1v4h-1a1.5 1.5 0 1 0 0 3h1v4a1 1 0 0 1-1 1h-4v-1a1.5 1.5 0 1 0-3 0v1H6a1 1 0 0 1-1-1v-4h1a1.5 1.5 0 1 0 0-3H5V7a1 1 0 0 1 1-1h4z"/>'),
+  close: ico('<path d="M6 6l12 12M18 6L6 18"/>', 1.8),
+  code: ico('<path d="M9 8l-5 4 5 4M15 8l5 4-5 4"/>'),
+  graph: `<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="6" cy="6" r="2.4"/><circle cx="18" cy="8" r="2.4"/><circle cx="12" cy="18" r="2.4"/><path d="M8 7l8 1M7 8l4 8M16 10l-3 6"/></svg>`,
+  city: `<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 21h18"/><rect x="4" y="10" width="5" height="11"/><rect x="10" y="5" width="5" height="16"/><rect x="16" y="13" width="4" height="8"/></svg>`,
+  terminal: `<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>`,
+};
+
+// Codicons de la barra de actividad (trazos simples estilo VS Code).
+export const ACTIVITY = {
+  files: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+    <path d="M7 4h7l4 4v12H7z"/><path d="M14 4v4h4"/><path d="M4 8v13h10" opacity=".55"/></svg>`,
+  search: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+    <circle cx="10.5" cy="10.5" r="5.5"/><path d="M15 15l5 5"/></svg>`,
+  gear: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+    <circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8"/></svg>`,
+  chat: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+    <path d="M4 5h16v11H9l-5 4z"/></svg>`,
+};

js/ide.js

@@ -0,0 +1,431 @@
+// IDE: Monaco (el editor de VS Code) + árbol de archivos + pestañas.
+import * as code from './tools/code.js';
+import { fileIcon, folderIcon } from './icons.js';
+import { renderMarkdown } from './md.js';
+
+let editor = null;
+let monacoRef = null;
+const tabs = [];              // { path, model, dirty, preview }
+let active = null;
+let onDirtyChange = () => {};
+
+const LANG = {
+  js: 'javascript', mjs: 'javascript', ts: 'typescript', tsx: 'typescript',
+  jsx: 'javascript', json: 'json', html: 'html', css: 'css', md: 'markdown',
+  py: 'python', rs: 'rust', go: 'go', java: 'java', c: 'c', h: 'c',
+  cpp: 'cpp', sh: 'shell', yml: 'yaml', yaml: 'yaml', toml: 'ini',
+  svg: 'xml', xml: 'xml', sql: 'sql', txt: 'plaintext',
+};
+const langOf = p => LANG[p.split('.').pop().toLowerCase()] || 'plaintext';
+const $ = id => document.getElementById(id);
+
+export async function initEditor() {
+  await new Promise(res => {
+    const s = document.createElement('script');
+    s.src = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js';
+    s.onload = res;
+    document.head.appendChild(s);
+  });
+  window.require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' } });
+  await new Promise(res => window.require(['vs/editor/editor.main'], res));
+  monacoRef = window.monaco;
+  editor = monacoRef.editor.create($('editor'), {
+    theme: 'vs-dark',
+    automaticLayout: true,
+    fontSize: 13,
+    minimap: { enabled: false },
+    padding: { top: 8 },
+  });
+  editor.addCommand(monacoRef.KeyMod.CtrlCmd | monacoRef.KeyCode.KeyS, saveActive);
+  editor.onDidChangeModelContent(() => {
+    const tab = tabs.find(t => t.path === active);
+    if (tab && !tab.dirty) { tab.dirty = true; renderTabs(); }
+  });
+  // los cambios del agente se reflejan al instante en el editor
+  code.setOnFileWritten((path, content) => {
+    const tab = tabs.find(t => t.path === path);
+    if (tab && tab.model.getValue() !== content) {
+      tab.model.setValue(content);
+      tab.dirty = false;
+      renderTabs();
+      if (path === active) applyView();
+    }
+    refreshTree();
+  });
+}
+
+export function gotoLine(n) {
+  if (!editor || !n) return;
+  editor.revealLineInCenter(n);
+  editor.setPosition({ lineNumber: n, column: 1 });
+  editor.focus();
+}
+export function triggerEditor(actionId) {
+  editor?.getAction(actionId)?.run();
+  editor?.focus();
+}
+export function hasEditor() { return !!editor; }
+
+export async function openFile(path) {
+  let tab = tabs.find(t => t.path === path);
+  if (!tab) {
+    let content;
+    try { content = await code.read({ path }); }
+    catch (e) {
+      // la ruta exacta no existe (típico: un enlace del chat solo mencionaba
+      // el NOMBRE, «config.py», y el fichero real vive en una subcarpeta) →
+      // si hay una única coincidencia por nombre en el proyecto, ábrela ella
+      // en vez de rendirte; con varias o ninguna, el error de siempre.
+      const base = path.split('/').pop();
+      const hits = await code.findByName?.(base, 2).catch(() => []) || [];
+      if (hits.length === 1 && hits[0] !== path) return openFile(hits[0]);
+      return alertBar('No pude abrir ' + path + ': ' + e.message);
+    }
+    tab = { path, model: monacoRef.editor.createModel(content, langOf(path)), dirty: false, preview: false };
+    tabs.push(tab);
+  }
+  active = path;
+  code.setCurrentFile(path);
+  editor.setModel(tab.model);
+  setEmptyState(false);
+  renderTabs();
+  await applyView();
+}
+
+// modo «Vista previa» de un tab .md/.html: en vez del código fuente en
+// Monaco, muestra el markdown renderizado (mismo motor que el chat y la
+// Mente) o el HTML en un iframe real.
+const PREVIEWABLE = new Set(['markdown', 'html']);
+
+// resuelve una ruta relativa (href/src) contra la carpeta del propio fichero
+function resolveRelative(ownPath, rel) {
+  if (/^([a-z][\w+.-]*:)?\/\//i.test(rel) || rel.startsWith('data:') || rel.startsWith('#')) return null; // externa/absoluta: no tocar
+  const baseDir = ownPath.includes('/') ? ownPath.slice(0, ownPath.lastIndexOf('/')) : '';
+  const segs = (baseDir ? baseDir.split('/') : []).concat(rel.split('/'));
+  const out = [];
+  for (const s of segs) { if (!s || s === '.') continue; if (s === '..') out.pop(); else out.push(s); }
+  return out.join('/');
+}
+// un iframe con srcdoc no tiene base URL propia: <link href="style.css"> o
+// <script src="app.js"> del proyecto real NUNCA se resuelven (por eso salía
+// sin CSS) — se leen del proyecto de verdad y se incrustan antes de mostrarlo.
+// El iframe de Vista previa va con sandbox="allow-scripts" A PROPÓSITO, SIN
+// allow-same-origin (aislado de tu proyecto real — ver applyView). Pero eso
+// hace que referenciar `localStorage`/`sessionStorage` LANCE una excepción
+// síncrona — y como suele ser la primera línea de un script (guardar datos
+// es de lo más común), el resto del fichero entero se queda sin ejecutar,
+// sin aviso: los botones no hacen nada y parece que la app está rota. Se
+// incrusta un shim en memoria (nunca toca almacenamiento real, se pierde al
+// cerrar la vista previa) SOLO si de verdad hace falta — si el sandbox
+// permitiera acceso real, no se toca nada.
+const STORAGE_SHIM = `<script>(()=>{try{window.localStorage;return}catch(e){}` +
+  `const m=()=>{const d=new Map();return{getItem:k=>d.has(''+k)?d.get(''+k):null,` +
+  `setItem:(k,v)=>{d.set(''+k,''+v)},removeItem:k=>{d.delete(''+k)},clear:()=>{d.clear()},` +
+  `key:i=>[...d.keys()][i]??null,get length(){return d.size}}};` +
+  `for(const p of ['localStorage','sessionStorage'])` +
+  `try{Object.defineProperty(window,p,{value:m(),configurable:true})}catch(e){}})()<\/script>`;
+
+async function inlineLocalAssets(html, ownPath) {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  (doc.head || doc.documentElement).insertAdjacentHTML('afterbegin', STORAGE_SHIM);
+  for (const link of doc.querySelectorAll('link[rel~="stylesheet"][href]')) {
+    const path = resolveRelative(ownPath, link.getAttribute('href'));
+    if (!path) continue;
+    try {
+      const style = doc.createElement('style');
+      style.textContent = await code.read({ path });
+      link.replaceWith(style);
+    } catch { /* no se pudo leer: se deja el link (el navegador lo ignorará sin más) */ }
+  }
+  for (const script of doc.querySelectorAll('script[src]')) {
+    const path = resolveRelative(ownPath, script.getAttribute('src'));
+    if (!path) continue;
+    try {
+      const inline = doc.createElement('script');
+      if (script.type) inline.type = script.type;
+      inline.textContent = await code.read({ path });
+      script.replaceWith(inline);
+    } catch { /* deja el script tal cual */ }
+  }
+  return '<!doctype html>\n' + doc.documentElement.outerHTML;
+}
+
+async function applyView() {
+  const tab = tabs.find(t => t.path === active);
+  const lang = tab ? langOf(tab.path) : null;
+  const showPreview = !!(tab && tab.preview && PREVIEWABLE.has(lang));
+  $('editor').style.display = showPreview ? 'none' : '';
+  let pane = document.getElementById('md-preview-pane');
+  if (showPreview) {
+    if (!pane) {
+      pane = document.createElement('div');
+      pane.id = 'md-preview-pane';
+      $('editor').parentElement.appendChild(pane);
+    }
+    pane.classList.toggle('html-preview', lang === 'html');
+    if (lang === 'html') {
+      pane.replaceChildren();
+      const frame = document.createElement('iframe');
+      frame.sandbox = 'allow-scripts'; // sin allow-same-origin: aislado de tu proyecto real
+      frame.srcdoc = await inlineLocalAssets(tab.model.getValue(), tab.path);
+      pane.appendChild(frame);
+    } else {
+      pane.innerHTML = renderMarkdown(tab.model.getValue());
+    }
+    pane.style.display = '';
+  } else if (pane) {
+    pane.style.display = 'none';
+  }
+}
+async function togglePreview(path) {
+  // el fichero puede no tener pestaña abierta todavía (p.ej. desde el menú
+  // del EXPLORADOR, no el de una pestaña ya abierta) — se abre primero.
+  if (active !== path || !tabs.find(t => t.path === path)) await openFile(path);
+  const tab = tabs.find(t => t.path === path);
+  if (!tab) return; // openFile no pudo (fichero borrado, etc.)
+  tab.preview = !tab.preview;
+  renderTabs();
+  await applyView();
+}
+
+async function saveActive() {
+  const tab = tabs.find(t => t.path === active);
+  if (!tab) return;
+  await code.write({ path: tab.path, content: tab.model.getValue() });
+  tab.dirty = false;
+  renderTabs();
+  alertBar('💾 ' + tab.path + ' guardado');
+}
+
+async function closeTab(path) {
+  const i = tabs.findIndex(t => t.path === path);
+  if (i < 0) return;
+  tabs[i].model.dispose();
+  tabs.splice(i, 1);
+  if (active === path) {
+    active = tabs[i - 1]?.path || tabs[0]?.path || null;
+    code.setCurrentFile(active);
+    if (active) { editor.setModel(tabs.find(t => t.path === active).model); setEmptyState(false); }
+    else { editor.setModel(monacoRef.editor.createModel('', 'plaintext')); setEmptyState(true); }
+  }
+  renderTabs();
+  await applyView();
+}
+
+// Estado vacío: cuando no hay ningún fichero abierto, en vez de dejar el Monaco
+// en blanco con un «1», mostramos un placeholder limpio.
+export function setEmptyState(on) {
+  let el = document.getElementById('editor-empty');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'editor-empty';
+    el.innerHTML = '<img src="img/elffuss-code.svg" alt=""><p>Abre un fichero del explorador,<br>o pídele algo a la elfa.</p>';
+    $('editor').parentElement.appendChild(el);
+  }
+  el.style.display = on ? 'flex' : 'none';
+}
+
+function renderTabs() {
+  const bar = $('tabs-bar');
+  bar.replaceChildren();
+  for (const t of tabs) {
+    const el = document.createElement('div');
+    el.className = 'tab' + (t.path === active ? ' active' : '') + (t.preview ? ' tab-preview' : '');
+    el.dataset.path = t.path;
+    const ico = document.createElement('span');
+    ico.className = 'tab-ico';
+    ico.innerHTML = fileIcon(t.path.split('/').pop());
+    const name = document.createElement('span');
+    name.className = 'tab-name';
+    name.textContent = t.path.split('/').pop();
+    name.title = t.path;
+    // como VS Code: punto ● si hay cambios sin guardar; × al pasar el ratón
+    const x = document.createElement('b');
+    x.className = t.dirty ? 'dirty' : '';
+    x.textContent = t.dirty ? '●' : '×';
+    x.onclick = e => { e.stopPropagation(); closeTab(t.path); };
+    el.append(ico, name, x);
+    el.onclick = () => openFile(t.path);
+    el.oncontextmenu = e => { e.preventDefault(); openTabMenu(e.clientX, e.clientY, t.path); };
+    bar.appendChild(el);
+  }
+}
+
+// ---------- menú contextual de las pestañas (botón derecho, estilo VS Code) ----------
+function openTabMenu(x, y, path) {
+  document.getElementById('tab-menu')?.remove();
+  const menu = document.createElement('div');
+  menu.id = 'tab-menu';
+  menu.style.cssText = `position:fixed;left:${x}px;top:${y}px;z-index:200`;
+  const i = tabs.findIndex(t => t.path === path);
+  const tab = tabs[i];
+  const items = [];
+  items.push(['Cerrar', () => closeTab(path)]);
+  items.push(['Cerrar otras', () => { for (const t of tabs.filter(t => t.path !== path)) closeTab(t.path); }]);
+  const toTheRight = tabs.slice(i + 1).map(t => t.path);
+  if (toTheRight.length) items.push(['Cerrar las de la derecha', () => { for (const p of toTheRight) closeTab(p); }]);
+  items.push(['Cerrar todas', () => { for (const t of [...tabs]) closeTab(t.path); }]);
+  items.push(['sep']);
+  items.push(['Copiar ruta', () => navigator.clipboard?.writeText(path).catch(() => {})]);
+  if (PREVIEWABLE.has(langOf(path))) {
+    items.push([tab?.preview ? 'Ver código fuente' : 'Vista previa', () => togglePreview(path)]);
+  }
+  for (const item of items) {
+    if (item[0] === 'sep') { menu.appendChild(Object.assign(document.createElement('div'), { className: 'tm-sep' })); continue; }
+    const [label, fn] = item;
+    const b = document.createElement('button');
+    b.className = 'tm-item';
+    b.textContent = label;
+    b.onclick = () => { menu.remove(); fn(); };
+    menu.appendChild(b);
+  }
+  document.body.appendChild(menu);
+  const close = ev => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
+  setTimeout(() => document.addEventListener('mousedown', close), 0);
+}
+
+let alertTimer;
+function alertBar(msg) {
+  const el = $('statusbar');
+  el.textContent = msg;
+  clearTimeout(alertTimer);
+  alertTimer = setTimeout(() => { el.textContent = ''; }, 4000);
+}
+
+// ---------- árbol lateral ----------
+const IGNORE = new Set(['node_modules', '.git', 'dist', 'build', 'target', '__pycache__', '.next', 'venv', '.venv', '.DS_Store']);
+
+export async function refreshTree(handle = null) {
+  const rootHandle = handle || window.__elffussProject;
+  if (!rootHandle) return;
+  window.__elffussProject = rootHandle;
+  const cont = $('tree');
+  cont.replaceChildren(await renderDir(rootHandle, ''));
+  setupTreeMenu();
+}
+
+// ---------- menú contextual del árbol (botón derecho, estilo VS Code) ----------
+let treeMenuWired = false;
+function setupTreeMenu() {
+  if (treeMenuWired) return;
+  treeMenuWired = true;
+  const tree = $('tree');
+  tree.addEventListener('contextmenu', e => {
+    e.preventDefault();
+    const node = e.target.closest('[data-path]');
+    const path = node ? node.dataset.path : '';
+    const kind = node ? node.dataset.kind : 'directory'; // vacío = raíz
+    openTreeMenu(e.clientX, e.clientY, path, kind);
+  });
+}
+
+// resuelve el handle de un directorio por su ruta (segmentos desde la raíz)
+async function dirByPath(path) {
+  let dir = code.handle();
+  for (const s of (path || '').split('/').filter(Boolean)) dir = await dir.getDirectoryHandle(s);
+  return dir;
+}
+const parentOf = p => p.includes('/') ? p.slice(0, p.lastIndexOf('/')) : '';
+const baseOf = p => p.split('/').pop();
+
+async function fsCreate(parentPath, name, isDir) {
+  const dir = await dirByPath(parentPath);
+  if (isDir) await dir.getDirectoryHandle(name, { create: true });
+  else { const fh = await dir.getFileHandle(name, { create: true }); const w = await fh.createWritable(); await w.close(); }
+}
+async function fsDelete(path, kind) {
+  const dir = await dirByPath(parentOf(path));
+  await dir.removeEntry(baseOf(path), { recursive: kind === 'directory' });
+}
+// copia recursiva (la File System API no tiene rename nativo)
+async function fsCopy(srcDir, name, dstDir, newName) {
+  const src = await (srcDir.getDirectoryHandle(name).catch(() => null));
+  if (src) { // directorio
+    const nd = await dstDir.getDirectoryHandle(newName, { create: true });
+    for await (const e of src.values()) await fsCopy(src, e.name, nd, e.name);
+  } else { // fichero
+    const text = await (await (await srcDir.getFileHandle(name)).getFile()).text();
+    const fh = await dstDir.getFileHandle(newName, { create: true });
+    const w = await fh.createWritable(); await w.write(text); await w.close();
+  }
+}
+async function fsRename(path, kind, newName) {
+  const parent = await dirByPath(parentOf(path));
+  await fsCopy(parent, baseOf(path), parent, newName);
+  await parent.removeEntry(baseOf(path), { recursive: kind === 'directory' });
+}
+
+function openTreeMenu(x, y, path, kind) {
+  document.getElementById('tree-menu')?.remove();
+  const menu = document.createElement('div');
+  menu.id = 'tree-menu';
+  menu.style.cssText = `position:fixed;left:${x}px;top:${y}px;z-index:200`;
+  // en un fichero, el "aquí dentro" es su carpeta; en carpeta/raíz, ella misma
+  const container = kind === 'file' ? parentOf(path) : path;
+  const items = [];
+  items.push(['Nuevo archivo…', async () => {
+    const name = prompt('Nombre del nuevo archivo:'); if (!name) return;
+    await fsCreate(container, name.trim(), false); code.invalidateFileList?.();
+    await refreshTree(); openFile(container ? container + '/' + name.trim() : name.trim());
+  }]);
+  items.push(['Nueva carpeta…', async () => {
+    const name = prompt('Nombre de la nueva carpeta:'); if (!name) return;
+    await fsCreate(container, name.trim(), true); code.invalidateFileList?.(); await refreshTree();
+  }]);
+  if (path) {
+    if (kind === 'file') items.push(['Abrir', () => openFile(path)]);
+    if (kind === 'file' && PREVIEWABLE.has(langOf(path))) items.push(['Vista previa', () => togglePreview(path)]);
+    items.push(['Renombrar…', async () => {
+      const name = prompt('Nuevo nombre:', baseOf(path)); if (!name || name === baseOf(path)) return;
+      await fsRename(path, kind, name.trim()); code.invalidateFileList?.(); await refreshTree();
+    }]);
+    items.push(['Eliminar', async () => {
+      if (!confirm(`¿Eliminar «${baseOf(path)}»?`)) return;
+      await fsDelete(path, kind); code.invalidateFileList?.(); await refreshTree();
+    }, 'danger']);
+  }
+  for (const [label, fn, cls] of items) {
+    const b = document.createElement('button');
+    b.className = 'tm-item' + (cls ? ' ' + cls : '');
+    b.textContent = label;
+    b.onclick = async () => { menu.remove(); try { await fn(); } catch (err) { alert('No se pudo: ' + err.message); } };
+    menu.appendChild(b);
+  }
+  document.body.appendChild(menu);
+  const close = ev => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
+  setTimeout(() => document.addEventListener('mousedown', close), 0);
+}
+
+async function renderDir(dir, prefix) {
+  const ul = document.createElement('ul');
+  const entries = [];
+  for await (const e of dir.values()) if (!IGNORE.has(e.name)) entries.push(e);
+  entries.sort((a, b) => (a.kind !== b.kind) ? (a.kind === 'directory' ? -1 : 1) : a.name.localeCompare(b.name));
+  for (const e of entries.slice(0, 200)) {
+    const li = document.createElement('li');
+    const p = prefix ? prefix + '/' + e.name : e.name;
+    if (e.kind === 'directory') {
+      const det = document.createElement('details');
+      const sum = document.createElement('summary');
+      sum.innerHTML = folderIcon();
+      sum.appendChild(document.createTextNode(e.name));
+      sum.dataset.path = p; sum.dataset.kind = 'directory';
+      det.appendChild(sum);
+      det.addEventListener('toggle', async () => {
+        if (det.open && det.children.length === 1)
+          det.appendChild(await renderDir(e, p));
+      }, { once: false });
+      li.appendChild(det);
+    } else {
+      const a = document.createElement('span');
+      a.className = 'file';
+      a.innerHTML = fileIcon(e.name);
+      a.appendChild(document.createTextNode(e.name));
+      a.dataset.path = p; a.dataset.kind = 'file';
+      a.onclick = () => openFile(p);
+      li.appendChild(a);
+    }
+    ul.appendChild(li);
+  }
+  return ul;
+}

js/main.js

@@ -0,0 +1,1510 @@
+// Elffuss Code: landing («abre tu carpeta») → IDE con la elfa integrada.
+import { parseToolCall } from './agent.js';
+import * as rules from './providers/rules.js';
+import * as codeTools from './tools/code.js';
+import * as db from './db.js';
+import * as settings from './settings.js';
+import { initEditor, refreshTree, openFile, gotoLine, triggerEditor, hasEditor } from './ide.js';
+import { ACTIVITY, UI } from './icons.js';
+import { renderMarkdown } from './md.js';
+import * as skills from './skills.js';
+import * as terminal from './terminal.js';
+import * as shell from './shell.js';
+import { setTerminalEcho } from './tools/index.js';
+import { ensureModelCache, cacheEstimate, clearModelCache } from './model-cache.js';
+import * as ceo from './ceo.js';
+import * as mind from './mind.js';
+import { buildCityAdapter, loadThoughtsAdapter } from './mind-adapter.js';
+import { humanizeStreamPreview } from './humanize.js';
+import * as bridge from './bridge.js';
+import * as conv from './conversations.js';
+import { TASK_PREFIX } from './goal.js';
+import * as telemetry from './telemetry.js';
+
+const $ = id => document.getElementById(id);
+telemetry.init('elffuss-code'); // opt-in, apagado por defecto — ver Ajustes
+conv.setProvider(rules); // proveedor por defecto para cualquier conversación que se cree
+let activeModel = 'rules';
+
+// ---------- chat ----------
+// Los `paths` entre backticks del chat (README.md, .elffuss/soul/x.md…) se
+// vuelven clicables → abren el fichero en el editor directamente, sin tener
+// que ir a buscarlos a mano.
+function linkifyFilePaths(root) {
+  root.querySelectorAll('code').forEach(el => {
+    const t = el.textContent.trim();
+    if (!/^[\w.-]+(\/[\w.-]+)*\.[a-z0-9]{1,10}$/i.test(t) || /[{}()<>]/.test(t)) return;
+    el.classList.add('file-link');
+    el.title = 'abrir ' + t;
+    el.onclick = () => openFile(t);
+  });
+}
+
+function addMsg(cls, text) {
+  const div = document.createElement('div');
+  div.className = 'msg ' + cls;
+  // las respuestas se renderizan como markdown (estilo plugin de Claude Code);
+  // lo del usuario y los errores, como texto plano
+  if (/^(assistant$|sys)/.test(cls)) {
+    div.classList.add('md');
+    // cap defensivo: no volcar miles de nodos si una respuesta trae un archivo entero
+    div.innerHTML = renderMarkdown(text.length > 8000 ? text.slice(0, 8000) + '\n… (recortado)' : text);
+    linkifyFilePaths(div);
+  } else {
+    div.textContent = text;
+  }
+  $('chat-log').appendChild(div);
+  $('chat-log').scrollTop = $('chat-log').scrollHeight;
+  return div;
+}
+
+// estilo plugin de Claude Code: ● herramienta en negrita + detalle plegable
+function addTool(tool, arg) {
+  const div = document.createElement('div');
+  div.className = 'msg tool';
+  const dot = document.createElement('span');
+  dot.className = 'tdot';
+  const b = document.createElement('b');
+  b.textContent = tool;
+  div.append(dot, b);
+  if (arg) {
+    const a = document.createElement('span');
+    a.className = 'targ';
+    a.textContent = String(arg).slice(0, 60);
+    div.appendChild(a);
+  }
+  $('chat-log').appendChild(div);
+  $('chat-log').scrollTop = $('chat-log').scrollHeight;
+  return div;
+}
+
+function addToolResult(result) {
+  const err = result.startsWith('ERROR');
+  const det = document.createElement('details');
+  det.className = 'msg tool-result' + (err ? ' err' : '');
+  const sum = document.createElement('summary');
+  sum.textContent = (err ? '⚠️ ' : '') + result.split('\n')[0].slice(0, 90);
+  const pre = document.createElement('pre');
+  pre.textContent = result.slice(0, 1500);
+  det.append(sum, pre);
+  $('chat-log').appendChild(det);
+  $('chat-log').scrollTop = $('chat-log').scrollHeight;
+  return det;
+}
+
+const escapeHtml = s => String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+// 🎯 Modo Objetivo: tarjeta de plan (planificador → lista de tareas →
+// ejecutor). Un solo nodo por plan (mismo id), repintado in-place según
+// llegan los eventos 'plan'/'plan_update'/'plan_complete' — así se ve la
+// lista evolucionar en vivo en vez de reconstruirse entera cada vez.
+const PLAN_ICO = { pending: '⏳', 'in-progress': '🔄', done: '✅', failed: '❌', skipped: '⏭️' };
+const PLAN_STATUS_LABEL = { planning: 'planificando…', running: 'ejecutando…', done: 'completado', failed: 'con fallos' };
+function renderPlanCard(plan) {
+  const domId = 'plan-' + plan.id;
+  let div = document.getElementById(domId);
+  if (!div) {
+    div = document.createElement('div');
+    div.id = domId;
+    div.className = 'msg plan-card';
+    $('chat-log').appendChild(div);
+  }
+  div.innerHTML =
+    `<span class="plan-status">${escapeHtml(PLAN_STATUS_LABEL[plan.status] || plan.status)}</span>` +
+    `<div class="plan-head">🎯 Objetivo: ${escapeHtml(plan.goal)}</div>` +
+    (plan.planText ? `<div class="plan-summary">${escapeHtml(plan.planText)}</div>` : '') +
+    `<ul class="plan-tasks">` +
+    plan.tasks.map(t =>
+      `<li class="task-${t.status}"><span class="task-ico">${PLAN_ICO[t.status] || '⏳'}</span>` +
+      `<div><div class="task-title">${escapeHtml(t.title)}</div><div class="task-desc">${escapeHtml(t.description)}</div></div></li>`
+    ).join('') +
+    `</ul>`;
+  $('chat-log').scrollTop = $('chat-log').scrollHeight;
+  return div;
+}
+
+export function thinkingBubble() {
+  const div = addMsg('thinking', '');
+  const label = document.createElement('span');
+  label.textContent = 'Elffuss está pensando';
+  const gen = document.createElement('div');
+  gen.className = 'gen';
+  div.append(label, gen);
+  let buf = '';
+  return {
+    tick(t) {
+      buf += t;
+      label.textContent = `Elffuss escribe · ${buf.length} car.`; // caracteres, no tokens
+      // si el buffer entró en un bloque de tool-call, no enseñes el JSON crudo
+      // según va llegando: una frase humana («leyendo app.js…») en su lugar.
+      const preview = humanizeStreamPreview(buf);
+      gen.classList.toggle('tool-preview', !!preview);
+      gen.textContent = preview ? '⟐ ' + preview : (buf.length > 200 ? '…' : '') + buf.slice(-200);
+      $('chat-log').scrollTop = $('chat-log').scrollHeight;
+    },
+    tool(name) { buf = ''; gen.textContent = ''; label.textContent = `Elffuss usa ${name}`; },
+    remove() { div.remove(); },
+  };
+}
+
+// Conversaciones (pestañas, en paralelo, con su propia cola): la lógica de
+// estado vive en conversations.js — aquí solo se pinta lo que corresponde.
+let activeThinking = null;
+
+function renderActiveLog() {
+  $('chat-log').replaceChildren();
+  const active = conv.getActive();
+  activeThinking = null;
+  if (!active) return;
+  for (const m of active.agent.history) {
+    if (m.role === 'user') {
+      if (m.content.startsWith('[resultado ')) {
+        const nl = m.content.indexOf('\n');
+        addToolResult(nl > 0 ? m.content.slice(nl + 1) : '');
+      } else if (m.content.startsWith(TASK_PREFIX)) {
+        // objetivo/tareas internas del modo Goal: no son burbujas sueltas —
+        // la tarjeta de plan las muestra todas. Se pinta justo en el punto
+        // donde se lanzó el objetivo, igual que aparece en directo.
+        if (m.content.startsWith(TASK_PREFIX + 'Objetivo: ') && active.plan) renderPlanCard(active.plan);
+      } else if (!m.content.startsWith('[…')) {
+        addMsg('user', m.content);
+      }
+    } else {
+      const call = parseToolCall(m.content);
+      if (call) addTool(call.tool, call.args?.path || call.args?.query || '');
+      else addMsg('assistant', m.content);
+    }
+  }
+  if (active.pumping) activeThinking = thinkingBubble();
+}
+
+// evento del módulo de conversaciones: 'switch' (cambiaste de pestaña o se
+// creó una), 'tabs' (se abrió/cerró una pestaña), 'pumping' (empezó/terminó
+// de procesar), 'event' (token/texto/tool/resultado/error de un turno real).
+// Las conversaciones EN SEGUNDO PLANO nunca tocan el DOM visible — solo se
+// refleja su punto de «ocupada» en la barra de pestañas.
+function onConvEvent(kind, id, payload) {
+  if (kind !== 'event') renderTabsBar();
+  if (kind === 'switch') { renderActiveLog(); return; }
+  const active = conv.getActive();
+  if (!active || id !== active.id) return;
+  if (kind === 'pumping') {
+    $('btn-send').disabled = payload;
+    $('btn-send').classList.toggle('sending', payload);
+    if (payload) { if (!activeThinking) activeThinking = thinkingBubble(); }
+    else { activeThinking?.remove(); activeThinking = null; }
+    return;
+  }
+  if (kind === 'event') {
+    const ev = payload;
+    if (ev.type === 'token') activeThinking?.tick(ev.text);
+    if (ev.type === 'text') addMsg('assistant', ev.text);
+    if (ev.type === 'tool') { activeThinking?.tool(ev.call.tool); addTool(ev.call.tool, ev.call.args?.path || ev.call.args?.query || ''); }
+    if (ev.type === 'tool_result') addToolResult(ev.result);
+    if (ev.type === 'error') addMsg('assistant err', ev.text);
+    // 🎯 Modo Objetivo: la tarjeta de plan se crea con 'plan' y se repinta
+    // in-place en cada 'plan_update'/'plan_complete' (mismo nodo, por id).
+    if (ev.type === 'plan' || ev.type === 'plan_update' || ev.type === 'plan_complete') renderPlanCard(ev.plan);
+  }
+}
+
+function send(text) {
+  const active = conv.getActive();
+  if (!active) return;
+  addMsg('user', text);
+  if (goalMode) conv.startGoal(active.id, text);
+  else conv.send(active.id, text);
+}
+
+function renderTabsBar() {
+  const bar = $('conv-tabs');
+  if (!bar) return;
+  bar.replaceChildren();
+  const active = conv.getActive();
+  for (const c of conv.getOpenTabs()) {
+    const el = document.createElement('div');
+    el.className = 'tab' + (active && c.id === active.id ? ' active' : '') + (c.pumping ? ' tab-busy' : '');
+    el.dataset.id = c.id;
+    const name = document.createElement('span');
+    name.className = 'tab-name';
+    const title = conv.titleFor(c);
+    name.textContent = title;
+    name.title = title;
+    const x = document.createElement('b');
+    x.textContent = '×';
+    x.title = 'Cerrar pestaña (no borra la conversación)';
+    x.onclick = e => { e.stopPropagation(); conv.closeTab(c.id); };
+    el.append(name, x);
+    el.onclick = () => conv.switchTo(c.id);
+    bar.appendChild(el);
+  }
+  const plus = document.createElement('button');
+  plus.className = 'tab-add';
+  plus.title = 'Nueva conversación';
+  plus.textContent = '+';
+  plus.onclick = () => conv.create();
+  bar.appendChild(plus);
+}
+
+async function renderHistoryPanel() {
+  const panel = $('history-panel');
+  panel.replaceChildren();
+  const head = document.createElement('div');
+  head.className = 'hp-head';
+  head.append(document.createTextNode('Historial de conversaciones'));
+  const xBtn = document.createElement('button');
+  xBtn.textContent = '✕';
+  xBtn.onclick = () => { panel.hidden = true; };
+  head.appendChild(xBtn);
+  panel.appendChild(head);
+  const list = document.createElement('div');
+  list.id = 'hp-list';
+  panel.appendChild(list);
+  const all = await conv.listAll();
+  if (!all.length) {
+    const empty = document.createElement('div');
+    empty.className = 'hp-empty';
+    empty.textContent = 'Sin conversaciones guardadas todavía.';
+    list.appendChild(empty);
+    return;
+  }
+  for (const c of all) {
+    const row = document.createElement('div');
+    row.className = 'hp-row';
+    const t = document.createElement('div');
+    t.className = 'hp-title';
+    t.textContent = c.title || 'Nueva conversación';
+    const d = new Date(c.updatedAt);
+    const date = document.createElement('div');
+    date.className = 'hp-date';
+    date.textContent = d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const del = document.createElement('button');
+    del.className = 'hp-del';
+    del.title = 'Eliminar para siempre';
+    del.textContent = '🗑';
+    del.onclick = async e => {
+      e.stopPropagation();
+      if (!confirm(`¿Eliminar «${c.title || 'esta conversación'}» para siempre?`)) return;
+      await conv.remove(c.id);
+      renderHistoryPanel();
+    };
+    row.append(t, date, del);
+    row.onclick = async () => { await conv.open(c.id); panel.hidden = true; };
+    list.appendChild(row);
+  }
+}
+
+// ---------- modelos (local primero; externos = ⚙️ opt-in) ----------
+const localProviders = { litert: () => import('./providers/litert.js'), onnx: () => import('./providers/onnx.js') };
+
+async function resolveProvider(id) {
+  if (localProviders[id]) return localProviders[id]();
+  if (id.startsWith('litert:')) {            // Gemma vía LiteRT-LM (build elegido)
+    const mod = await import('./providers/litert.js');
+    mod.configure(id.slice(7));
+    return mod;
+  }
+  if (id.startsWith('ext:')) {
+    const cfg = settings.get(id.slice(4));
+    const mod = await import('./providers/api.js');
+    mod.configure(cfg);
+    return mod;
+  }
+  return null;
+}
+
+// El E4B healed (4.12 GB) NO carga aún en navegador (export prefill_decode, no
+// artisan) — descargarlo y fallar deja la GPU en estado inválido y TUMBA la
+// pestaña. Se oculta hasta el reexport artisan. Poner true para reactivarlo.
+const LITERT_READY = false;
+
+const isMobile = () => matchMedia('(max-width: 820px)').matches || matchMedia('(pointer: coarse)').matches;
+// navigator.gpu puede EXISTIR como API sin que haya un adaptador real (ciertos
+// Linux/drivers, entornos sandboxed/headless…) — comprobarlo UNA vez al
+// arrancar evita ofrecer/elegir Gemma (2-4 GB) cuando de todos modos va a
+// fallar al crear el motor (onnx.js y litert.js ya comprueban el adaptador
+// por su cuenta como defensa adicional, pero esto evita hasta OFRECERLO).
+let realGPU = !!navigator.gpu;
+const realGPUCheck = (async () => {
+  if (!navigator.gpu) return (realGPU = false);
+  try { return (realGPU = !!(await navigator.gpu.requestAdapter())); }
+  catch { return (realGPU = false); }
+})();
+const defaultBrain = () => !realGPU ? 'onnx' : (isMobile() ? 'litert:gemma-e2b' : 'litert:gemma-e4b');
+
+function modelOptions() {
+  const opts = [];
+  if (realGPU) opts.push({ id: 'litert:gemma-e4b', label: 'Gemma-4 E4B · LiteRT-LM (~4 GB) ★' });
+  if (realGPU) opts.push({ id: 'litert:gemma-e2b', label: 'Gemma-4 E2B · LiteRT-LM (~2 GB)' });
+  opts.push({ id: 'onnx', label: 'Elffuss LM (healed · 850 MB) — ligero' });
+  opts.push({ id: 'rules', label: 'Básico (sin modelo)' });
+  return [...opts, ...settings.enabledExternals()];
+}
+
+function rebuildSelect() {
+  const sel = $('model-select');
+  sel.replaceChildren();
+  for (const o of modelOptions()) {
+    const opt = document.createElement('option');
+    opt.value = o.id;
+    opt.textContent = o.label;
+    sel.appendChild(opt);
+  }
+  sel.value = activeModel;
+}
+
+// progreso del modelo: píldora prominente visible sobre landing e IDE
+function showModelProgress(text, pct = null) {
+  const box = $('model-progress');
+  if (text == null) { box.hidden = true; return; }
+  box.hidden = false;
+  $('model-progress-text').textContent = text;
+  const bar = $('model-bar');
+  if (pct == null) {
+    bar.classList.add('indet');      // sin % conocido → barra animada
+    bar.style.width = '';
+  } else {
+    bar.classList.remove('indet');
+    bar.style.width = pct + '%';
+  }
+}
+
+let loadingId = null;
+async function changeModel(id) {
+  if (id === 'rules') {
+    conv.setProvider(rules);
+    activeModel = 'rules';
+    localStorage.setItem('elffusscode.model', 'rules');
+    $('model-dot').className = 'dot off';
+    return true;
+  }
+  if (loadingId === id || activeModel === id) return true; // un solo modelo, una sola carga
+  loadingId = id;
+  $('model-dot').className = 'dot loading';
+  showModelProgress('Cargando el modelo IA…', 4);
+  try {
+    const mod = await resolveProvider(id);
+    await mod.load(p => {
+      if (typeof p === 'string') return showModelProgress(p);
+      if (p?.status === 'progress' && p.total) {
+        const pct = Math.round(p.loaded / p.total * 100);
+        showModelProgress(`Descargando el modelo IA · ${pct}% · ${(p.loaded / 1e6 | 0)}/${(p.total / 1e6 | 0)} MB`, pct);
+      }
+    });
+    conv.setProvider(mod);
+    activeModel = id;
+    localStorage.setItem('elffusscode.model', id);
+    $('model-dot').className = 'dot on';
+    showModelProgress('Modelo IA listo · готово ✳', 100);
+    setTimeout(() => showModelProgress(null), 2500);
+    $('statusbar').textContent = 'Modelo IA listo';
+    rebuildSelect();
+    return true;
+  } catch (e) {
+    console.error('[elffuss-code] fallo cargando', e);
+    // Un Gemma (LiteRT) que no cabe → cae al Elffuss LM healed (onnx, ligero).
+    if (id.startsWith('litert') && !_fellBack) {
+      _fellBack = true;
+      sessionStorage.setItem('elffusscode.skipGemma', '1');
+      showModelProgress('Ese Gemma no cargó (memoria/GPU) — uso Elffuss LM (ligero)…');
+      loadingId = null;
+      const okc = await changeModel('onnx');
+      _fellBack = false;
+      if (okc) return true;
+    }
+    conv.setProvider(rules);
+    activeModel = 'rules';
+    $('model-dot').className = 'dot off';
+    showModelProgress('⚠️ No pude cargar el modelo: ' + (e?.message || e));
+    setTimeout(() => showModelProgress(null), 6000);
+    rebuildSelect();
+    return false;
+  } finally {
+    loadingId = null;
+  }
+}
+let _fellBack = false;
+
+// El cerebro empieza a descargarse desde el PRIMER segundo, en segundo plano,
+// mientras el usuario elige la carpeta. Solo el modelo local — los externos
+// jamás se activan solos.
+// Cadena de respaldo: el modelo preferido → LFM2.5 local → básico. Si el E4B
+// healed falla (p. ej. «HF_Tokenizer_Zlib not supported» del runtime LiteRT),
+// cae solo a LFM2.5 en vez de dejar al usuario sin cerebro.
+async function preloadModel() {
+  const saved = localStorage.getItem('elffusscode.model');
+  if (saved === 'rules') return;
+  await realGPUCheck; // que defaultBrain()/modelOptions() vean el adaptador real, no solo la API
+  const avail = new Set(modelOptions().map(o => o.id));
+  const skipGemma = sessionStorage.getItem('elffusscode.skipGemma') === '1';
+  const def = skipGemma ? 'onnx' : defaultBrain();
+  const chain = [...new Set([saved, def, 'onnx']
+    .filter(id => id && id !== 'rules' && avail.has(id)))];
+  for (const id of chain) if (await changeModel(id)) return;
+}
+
+// ---------- panel ⚙️ Ajustes: modelo (cerebro) + API keys ----------
+const el = (t, cls, txt) => { const e = document.createElement(t); if (cls) e.className = cls; if (txt != null) e.textContent = txt; return e; };
+
+function settingsShell(title) {
+  const box = $('settings-panel');
+  box.hidden = false;
+  box.replaceChildren();
+  const close = el('button', 'panel-close'); close.innerHTML = UI.close; close.title = 'cerrar';
+  close.onclick = () => { box.hidden = true; };
+  box.append(close, el('h3', 'panel-title', title));
+  return box;
+}
+
+function showBridgeMsg(card, text, isErr) {
+  let el2 = card.querySelector('.br-msg');
+  if (!el2) { el2 = document.createElement('div'); el2.className = 'br-msg muted'; el2.style.cssText = 'font-size:.7rem;margin-top:6px'; card.appendChild(el2); }
+  el2.textContent = text;
+  el2.style.color = isErr ? '#ff6b8b' : '';
+}
+
+// pequeño estallido de fuegos artificiales (canvas, un par de segundos) para
+// que se entienda de un vistazo que el bridge quedó conectado.
+function fireworks() {
+  const cv = document.createElement('canvas');
+  cv.id = 'fireworks-fx';
+  cv.width = innerWidth; cv.height = innerHeight;
+  document.body.appendChild(cv);
+  const ctx = cv.getContext('2d');
+  const colors = ['#ff4d8d', '#7c5cff', '#49e8ff', '#3fb970', '#ffd479'];
+  const bursts = Array.from({ length: 5 }, () => ({
+    x: innerWidth * (0.2 + Math.random() * 0.6), y: innerHeight * (0.2 + Math.random() * 0.4),
+    t0: performance.now() + Math.random() * 500,
+    particles: Array.from({ length: 40 }, (_, i) => { const a = (i / 40) * Math.PI * 2; const sp = 2 + Math.random() * 3; return { a, sp, color: colors[i % colors.length] }; }),
+  }));
+  const start = performance.now();
+  function frame(now) {
+    ctx.clearRect(0, 0, cv.width, cv.height);
+    let alive = false;
+    for (const b of bursts) {
+      const age = (now - b.t0) / 1000;
+      if (age < 0) { alive = true; continue; }
+      if (age > 1.4) continue;
+      alive = true;
+      for (const p of b.particles) {
+        const r = p.sp * age * 40;
+        const x = b.x + Math.cos(p.a) * r, y = b.y + Math.sin(p.a) * r + age * age * 60;
+        ctx.globalAlpha = Math.max(0, 1 - age / 1.4);
+        ctx.fillStyle = p.color;
+        ctx.beginPath(); ctx.arc(x, y, 2.4, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+    if (alive && now - start < 3000) requestAnimationFrame(frame);
+    else cv.remove();
+  }
+  requestAnimationFrame(frame);
+}
+
+function renderSettings() {
+  const box = settingsShell('Ajustes');
+
+  // --- Cerebro (modelo) ---
+  box.append(el('div', 'sk-h', 'Cerebro (modelo)'));
+  const LOCAL = [
+    { id: 'litert:gemma-e4b', name: 'Gemma-4 E4B ★', sub: 'El mejor · WebGPU local · ~4 GB', need: 'gpu' },
+    { id: 'litert:gemma-e2b', name: 'Gemma-4 E2B', sub: 'Ligero · WebGPU local · ~2 GB', need: 'gpu' },
+    { id: 'onnx', name: 'Elffuss LM (healed)', sub: 'Modelo propio · 850 MB · tool-calls + apps' },
+    { id: 'rules', name: 'Básico (sin modelo)', sub: 'Órdenes directas, cero descarga' },
+  ];
+  const grid = el('div', 'model-grid');
+  for (const m of LOCAL) {
+    if (m.need === 'gpu' && !realGPU) continue;
+    const card = el('button', 'model-card' + (activeModel === m.id ? ' active' : '') + (m.disabled ? ' disabled' : ''));
+    if (m.disabled) card.disabled = true;
+    card.innerHTML = `<b>${m.name}</b><span>${m.sub}</span>`;
+    card.onclick = () => { changeModel(m.id); renderSettings(); };
+    grid.appendChild(card);
+  }
+  box.appendChild(grid);
+
+  // --- Almacenamiento del modelo (caché persistente) ---
+  box.append(el('div', 'sk-h', 'Modelo descargado (se cachea en tu navegador)'));
+  const storeCard = el('div', 'prov-card');
+  const storeInfo = el('span', null, 'Calculando espacio…'); storeInfo.style.cssText = 'font-size:.8rem;color:var(--fg)';
+  const storeSub = el('div', 'field'); storeSub.style.marginTop = '2px';
+  const storeMuted = el('span', 'muted', ''); storeMuted.style.fontSize = '.72rem';
+  const clearBtn = el('button', 'prov-use', 'Vaciar caché');
+  clearBtn.style.marginTop = '8px';
+  clearBtn.onclick = async () => { clearBtn.textContent = 'Vaciando…'; await clearModelCache(); await paintStorage(); clearBtn.textContent = 'Vaciar caché'; };
+  const storeHead = el('div', 'prov-head'); storeHead.append(storeInfo);
+  storeCard.append(storeHead, storeMuted, clearBtn);
+  box.appendChild(storeCard);
+  async function paintStorage() {
+    const { usage, quota, persisted } = await cacheEstimate();
+    const gb = n => (n / 1073741824).toFixed(2) + ' GB';
+    storeInfo.textContent = usage ? `${gb(usage)} en caché` : 'Nada cacheado todavía';
+    storeMuted.textContent = (persisted ? '✓ almacenamiento persistente (no se borra solo)' : '⚠ sin persistencia: el navegador podría desalojarlo')
+      + (quota ? ` · límite ~${gb(quota)}` : '');
+  }
+  paintStorage();
+
+  // --- Bridge local (ejecución REAL en tu máquina: node, npm, python…) ---
+  box.append(el('div', 'sk-h', '🔌 Bridge local (ejecución real en tu máquina)'));
+  const brCard = el('div', 'prov-card bridge-card');
+  const guessOS = () => {
+    const ua = navigator.userAgent;
+    if (/Mac/.test(ua)) return /Intel/.test(navigator.platform) && !/arm/i.test(ua) ? 'elffuss-bridge-mac-intel' : 'elffuss-bridge-mac-arm64';
+    if (/Win/.test(ua)) return 'elffuss-bridge-windows.exe';
+    if (/Linux/.test(ua)) return /aarch64|arm64/i.test(ua) ? 'elffuss-bridge-linux-arm64' : 'elffuss-bridge-linux';
+    return 'elffuss-bridge-mac-arm64';
+  };
+  const OTHER = { 'elffuss-bridge-mac-arm64': 'Mac (Apple Silicon)', 'elffuss-bridge-mac-intel': 'Mac (Intel)', 'elffuss-bridge-windows.exe': 'Windows', 'elffuss-bridge-linux': 'Linux (x64)', 'elffuss-bridge-linux-arm64': 'Linux (ARM)' };
+  const primary = guessOS();
+  brCard.innerHTML =
+    `<div class="prov-head"><span id="br-dot" class="dot off"></span><b>Bridge local</b><span id="br-status" class="muted" style="margin-left:auto;font-size:.72rem">desconectado</span></div>` +
+    `<p class="muted" style="font-size:.72rem;margin:6px 0">Un pequeño programa que TÚ ejecutas en tu ordenador — le da a la elfa ejecución real (node, npm, python…) sin salir de tu máquina. Nada se instala en el navegador.</p>` +
+    `<a class="prov-use" style="text-decoration:none;display:inline-block" href="https://elffuss-code.utopiaia.com/bridge-dl/${primary}" download>⬇ Descargar para ${OTHER[primary]}</a>` +
+    `<details style="margin-top:6px"><summary class="muted" style="font-size:.7rem;cursor:pointer">otro sistema operativo</summary>` +
+    Object.entries(OTHER).filter(([f]) => f !== primary).map(([f, label]) => `<div><a href="https://elffuss-code.utopiaia.com/bridge-dl/${f}" download style="color:var(--accent2);font-size:.72rem">${label}</a></div>`).join('') +
+    `</details>` +
+    `<div class="field" style="margin-top:8px"><label class="muted" style="font-size:.68rem">Token (lo imprime el programa al arrancarlo)</label><input id="br-token" placeholder="pega aquí el token…"></div>` +
+    `<div class="field" style="margin-top:6px"><label class="muted" style="font-size:.68rem">Carpeta de trabajo (opcional — si no, usa una temporal)</label><input id="br-folder" placeholder="/ruta/completa/a/tu/proyecto"></div>` +
+    `<button id="br-connect" class="prov-use" style="margin-top:8px">Conectar</button>`;
+  box.appendChild(brCard);
+  brCard.querySelector('#br-folder').value = bridge.getFolder();
+  brCard.querySelector('#br-token').value = localStorage.getItem('elffusscode.bridgeToken') || '';
+  const paintBridge = () => {
+    // el panel puede haberse cerrado entre sondeos de fondo — si ya no está
+    // en el DOM, nos desuscribimos en vez de tocar nodos huérfanos.
+    if (!document.body.contains(brCard)) { bridge.onStatusChange(() => {}); return; }
+    const on = bridge.isConnected();
+    brCard.querySelector('#br-dot').className = 'dot ' + (on ? 'on' : 'off');
+    brCard.querySelector('#br-status').textContent = on ? '✓ conectado — ejecución real activa' : 'desconectado';
+    if (on) brCard.querySelector('#br-token').value = localStorage.getItem('elffusscode.bridgeToken') || '';
+  };
+  paintBridge();
+  bridge.onStatusChange(paintBridge); // repinta solo si el bridge conecta/cae mientras Ajustes está abierto
+  brCard.querySelector('#br-connect').onclick = async () => {
+    const btn = brCard.querySelector('#br-connect');
+    bridge.setFolder(brCard.querySelector('#br-folder').value);
+    const token = brCard.querySelector('#br-token').value.trim();
+    if (!token) return showBridgeMsg(brCard, '⚠️ pega el token que imprimió el programa al arrancarlo', true);
+    btn.disabled = true; btn.textContent = 'Conectando…';
+    try { await bridge.connect(token); paintBridge(); showBridgeMsg(brCard, '✔ conectado — ejecución real en tu máquina'); fireworks(); }
+    catch (e) { showBridgeMsg(brCard, '⚠️ ' + e.message, true); }
+    finally { btn.disabled = false; btn.textContent = 'Conectar'; }
+  };
+
+  // --- Permisos de ejecución (mismo interruptor que </> Auto de la barra) ---
+  box.append(el('div', 'sk-h', '✅ Permisos de ejecución'));
+  const permCard = el('div', 'prov-card');
+  permCard.innerHTML =
+    `<label style="display:flex;align-items:center;gap:8px;cursor:pointer">` +
+    `<input type="checkbox" id="perm-autoedit"> ` +
+    `<span>Ejecutar todo automáticamente (escribir/editar ficheros y comandos de terminal), sin pedir confirmación</span>` +
+    `</label>` +
+    `<p class="muted" style="font-size:.7rem;margin:6px 0 0">terminal.run ya se ejecuta siempre sin preguntar. Esto controla solo la escritura de ficheros (code.write/code.edit) — desmárcalo si prefieres revisar cada cambio antes de aplicarlo.</p>`;
+  box.appendChild(permCard);
+  const permCheckbox = permCard.querySelector('#perm-autoedit');
+  permCheckbox.checked = autoEdit;
+  permCheckbox.onchange = () => {
+    autoEdit = permCheckbox.checked;
+    localStorage.setItem('elffusscode.autoedit', autoEdit ? '1' : '0');
+    paintAuto();
+  };
+
+  // --- 🎯 Modo Objetivo (planificador + ejecutor, mismo patrón que Auto) ---
+  box.append(el('div', 'sk-h', '🎯 Modo Objetivo'));
+  const goalCard = el('div', 'prov-card');
+  goalCard.innerHTML =
+    `<label style="display:flex;align-items:center;gap:8px;cursor:pointer">` +
+    `<input type="checkbox" id="perm-goalmode"> ` +
+    `<span>Tratar el próximo mensaje como un objetivo: lo descompone en tareas y las ejecuta una a una</span>` +
+    `</label>` +
+    `<p class="muted" style="font-size:.7rem;margin:6px 0 0">Igual que el botón 🎯 Goal de la barra — un planificador crea la lista de tareas y un ejecutor las va cumpliendo, marcando cada una como hecha o fallida (si una falla, las siguientes se saltan en vez de seguir a ciegas).</p>`;
+  box.appendChild(goalCard);
+  const goalCheckbox = goalCard.querySelector('#perm-goalmode');
+  goalCheckbox.checked = goalMode;
+  goalCheckbox.onchange = () => {
+    goalMode = goalCheckbox.checked;
+    localStorage.setItem('elffusscode.goalmode', goalMode ? '1' : '0');
+    paintGoal();
+  };
+
+  // --- 📨 Errores y feedback (opt-in — apagado no sale NADA de tu máquina) ---
+  box.append(el('div', 'sk-h', '📨 Errores y feedback'));
+  const telCard = el('div', 'prov-card');
+  telCard.innerHTML =
+    `<label style="display:flex;align-items:center;gap:8px;cursor:pointer">` +
+    `<input type="checkbox" id="tel-enabled"> ` +
+    `<span>Enviar automáticamente los errores técnicos que ocurran, para poder arreglarlos</span>` +
+    `</label>` +
+    `<p class="muted" style="font-size:.7rem;margin:6px 0 10px">Apagado por defecto — tu código y el contenido de tus proyectos NUNCA se incluyen, solo el mensaje de error técnico, la pila y datos del navegador.</p>` +
+    `<label class="muted" style="font-size:.68rem">O manda algo tú directamente (un fallo que viste, algo que eches en falta…)</label>` +
+    `<textarea id="tel-feedback" rows="2" style="width:100%;margin-top:4px;resize:vertical;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:6px 8px;font:inherit" placeholder="Cuéntanos qué ha pasado o qué te gustaría que hiciera…"></textarea>` +
+    `<button id="tel-send" class="prov-use" style="margin-top:6px">Enviar</button>` +
+    `<span id="tel-msg" class="muted" style="font-size:.7rem;margin-left:8px"></span>`;
+  box.appendChild(telCard);
+  const telCheckbox = telCard.querySelector('#tel-enabled');
+  telCheckbox.checked = telemetry.isEnabled();
+  telCheckbox.onchange = () => telemetry.setEnabled(telCheckbox.checked);
+  telCard.querySelector('#tel-send').onclick = async () => {
+    const ta = telCard.querySelector('#tel-feedback');
+    const msg = telCard.querySelector('#tel-msg');
+    const text = ta.value.trim();
+    if (!text) { msg.textContent = 'escribe algo primero'; return; }
+    const wasEnabled = telemetry.isEnabled();
+    if (!wasEnabled) telemetry.setEnabled(true); // el envío manual es explícito, se permite aunque el automático esté apagado
+    await telemetry.sendFeedback(text);
+    if (!wasEnabled) telemetry.setEnabled(false); // no activa el automático de fondo si no lo pidió
+    ta.value = '';
+    msg.textContent = '¡enviado, gracias!';
+    setTimeout(() => { msg.textContent = ''; }, 4000);
+  };
+
+  // --- Proveedores externos (API keys) ---
+  box.append(el('div', 'sk-h', 'Proveedores externos (opcional · la clave se queda en tu navegador)'));
+  for (const [id, c] of Object.entries(settings.configs())) {
+    const card = el('div', 'prov-card' + (c.enabled ? ' on' : ''));
+    const head = el('div', 'prov-head');
+    const toggle = document.createElement('input'); toggle.type = 'checkbox'; toggle.checked = c.enabled;
+    const title = el('b', null, c.label);
+    const use = el('button', 'prov-use', 'Usar');
+    use.hidden = !c.enabled || activeModel === 'ext:' + id;
+    use.onclick = () => { changeModel('ext:' + id); renderSettings(); };
+    head.append(toggle, title, use);
+    const fields = el('div', 'prov-fields' + (c.enabled ? '' : ' hide'));
+    const model = document.createElement('input'); model.value = c.model || ''; model.placeholder = 'modelo (p. ej. gpt-4o-mini)';
+    const key = document.createElement('input'); key.type = 'password'; key.value = c.apiKey || '';
+    key.placeholder = c.kind === 'anthropic' ? 'sk-ant-…' : (id === 'ollama' || id === 'server' ? 'clave (no necesaria)' : 'sk-…');
+    fields.append(labeled('Modelo', model), labeled('API key', key));
+    const save = () => {
+      settings.update(id, { enabled: toggle.checked, model: model.value.trim(), apiKey: key.value });
+      rebuildSelect();
+    };
+    toggle.onchange = () => { save(); renderSettings(); };
+    model.onchange = key.onchange = save;
+    card.append(head, fields);
+    box.appendChild(card);
+  }
+
+  // --- Skills ---
+  box.append(el('div', 'sk-h', 'Skills'));
+  const skBtn = el('button', 'primary wide', '🧩 Gestionar skills de Claude Code');
+  skBtn.textContent = 'Gestionar skills de Claude Code';
+  skBtn.onclick = openSkillsPanel;
+  box.appendChild(skBtn);
+}
+function labeled(label, input) {
+  const w = el('label', 'field'); w.append(el('span', 'muted', label), input); return w;
+}
+
+// ---------- arranque ----------
+let galaxy = null;
+async function enterIDE(handle) {
+  const name = await codeTools.openProject(handle);
+  shell.reset();                 // el terminal arranca en la raíz del proyecto
+  galaxy?.stop();
+  $('landing').hidden = true;
+  $('ide').hidden = false;
+  $('project-name').textContent = name;
+  $('explorer-proj').textContent = name.toUpperCase();
+  await initEditor();
+  await refreshTree(handle);
+  // el sistema de conversaciones primero: renderActiveLog() REEMPLAZA todo
+  // #chat-log con el historial replay de la conversación activa — si el
+  // saludo se añadiera antes, desaparecería sin dejar rastro.
+  await conv.init({ onEvent: onConvEvent });
+  renderTabsBar();
+  renderActiveLog();
+  addMsg('sys', `Привіт 👋 Proyecto «${name}» abierto. Pregúntame por el código, pídeme cambios o dime «árbol». Todo se queda en tu máquina.`);
+  refreshGit();
+  preloadModel(); // por si el arranque en la landing no llegó a dispararse
+}
+
+async function boot() {
+  // Caché de modelos (persistente + service worker) ANTES de descargar nada,
+  // para que hasta la primera descarga de pesos quede cacheada y no se repita.
+  ensureModelCache().finally(() => preloadModel());
+  bridge.tryAutoConnect(); // reconecta en silencio si ya se conectó antes (mismo token)
+  bridge.startAutoDetect(); // sigue sondeando en 2º plano: detecta el bridge si se arranca/reinicia más tarde
+  // galaxia en la landing (misma técnica que Elffuss)
+  import('./splash-gl.js').then(m => { galaxy = m.startGalaxy($('landing')); }).catch(() => {});
+
+  $('open-project').onclick = async () => {
+    try { await enterIDE(await window.showDirectoryPicker({ mode: 'readwrite' })); }
+    catch { /* cancelado */ }
+  };
+
+  // clonar un repo público (GitHub/Bitbucket): elige carpeta destino, se
+  // descarga ahí (fichero a fichero, sin git) y se abre como proyecto.
+  // RESUMIBLE: el trabajo (lista de ficheros + cuáles ya se bajaron + el
+  // handle de la carpeta) se persiste en IndexedDB — si el usuario navega
+  // atrás, cierra la pestaña o recarga a medias, al volver se ofrece
+  // «Reanudar» en vez de forzar a empezar de cero.
+  const cloneUrl = $('clone-url'), cloneBtn = $('clone-btn'), cloneStatus = $('clone-status');
+  const showCloneStatus = (text, isErr) => { cloneStatus.textContent = text; cloneStatus.hidden = !text; cloneStatus.classList.toggle('err', !!isErr); };
+  const saveCloneJob = job => db.set('kv', 'cloneJob', job).catch(() => {});
+  const loadCloneJob = () => db.get('kv', 'cloneJob').catch(() => null);
+  const clearCloneJob = () => db.del('kv', 'cloneJob').catch(() => {});
+
+  async function runDownload(job) {
+    cloneBtn.disabled = true;
+    const doneSet = new Set(job.done);
+    const clone = await import('./tools/clone.js');
+    try {
+      await clone.downloadFiles(job, job.handle, doneSet,
+        p => showCloneStatus(p.text || ''),
+        async path => {
+          job.done.push(path);
+          // persistir el progreso poco a poco (no en cada fichero: de sobra
+          // para no perder más de un puñado si se interrumpe a media descarga)
+          if (job.done.length % 5 === 0) await saveCloneJob(job);
+        });
+      await saveCloneJob(job);
+      showCloneStatus(`✔ ${job.files.length} ficheros descargados` + (job.skipped ? ` (${job.skipped} omitidos por tamaño)` : ''));
+      await clearCloneJob();
+      await enterIDE(job.handle);
+    } catch (e) {
+      await saveCloneJob(job); // que lo ya bajado no se pierda aunque falle a mitad
+      showCloneStatus('⚠️ ' + (e?.message || e) + ' — puedes reintentar, retoma donde se quedó', true);
+    } finally { cloneBtn.disabled = false; }
+  }
+
+  const runClone = async () => {
+    const url = cloneUrl.value.trim();
+    if (!url) return;
+    let handle;
+    try { handle = await window.showDirectoryPicker({ mode: 'readwrite' }); }
+    catch { return; } // cancelado, sin error
+    showCloneStatus('Listando el repo…');
+    try {
+      const clone = await import('./tools/clone.js');
+      const info = await clone.listRepo(url);
+      const job = { url, handle, done: [], ...info };
+      await saveCloneJob(job);
+      await runDownload(job);
+    } catch (e) {
+      showCloneStatus('⚠️ ' + (e?.message || e), true);
+    }
+  };
+  cloneBtn.addEventListener('click', runClone);
+  cloneUrl.addEventListener('keydown', e => { if (e.key === 'Enter') runClone(); });
+
+  // ¿había una descarga a medias de una sesión anterior? ofrece reanudarla
+  const job = await loadCloneJob();
+  if (job && job.handle && job.files && job.done.length < job.files.length) {
+    const banner = $('resume-clone');
+    banner.hidden = false;
+    banner.querySelector('.rc-text').textContent = `Descarga a medias de ${job.owner}/${job.repo} (${job.done.length}/${job.files.length} ficheros)`;
+    $('resume-clone-btn').onclick = async () => {
+      banner.hidden = true;
+      try {
+        const q = job.handle.queryPermission ? await job.handle.queryPermission({ mode: 'readwrite' }) : 'granted';
+        if (q !== 'granted' && await job.handle.requestPermission({ mode: 'readwrite' }) !== 'granted') throw new Error('permiso denegado para la carpeta');
+        showCloneStatus(`Reanudando ${job.owner}/${job.repo}…`);
+        await runDownload(job);
+      } catch (e) { showCloneStatus('⚠️ ' + (e?.message || e), true); }
+    };
+    $('discard-clone-btn').onclick = async () => { await clearCloneJob(); banner.hidden = true; };
+  } else if (job) {
+    await clearCloneJob(); // job corrupto o ya completo: limpiar
+  }
+
+  // gancho de test: ?test-opfs usa el almacenamiento del navegador como proyecto
+  if (location.search.includes('test-opfs')) {
+    const opfs = await navigator.storage.getDirectory();
+    return enterIDE(opfs);
+  }
+
+  // reabrir el último proyecto (un clic si el navegador exige gesto)
+  const prev = await codeTools.restoreProject();
+  if (prev?.ready) return enterIDE(await db.get('kv', 'project'));
+  if (prev?.handle) {
+    const btn = $('reopen-project');
+    btn.hidden = false;
+    btn.textContent = `Reabrir «${prev.name}»`;
+    btn.onclick = async () => {
+      try { await codeTools.regrant(prev.handle); await enterIDE(prev.handle); }
+      catch (e) { $('statusbar').textContent = '⚠️ ' + e.message; }
+    };
+  }
+}
+
+// Historial del prompt del chat: ↑/↓ recuperan lo enviado (como una shell).
+// Persistente entre recargas (localStorage, últimos 100).
+const PROMPT_HIST_KEY = 'elffusscode.promptHistory';
+let promptHistory = [];
+try { promptHistory = JSON.parse(localStorage.getItem(PROMPT_HIST_KEY) || '[]'); } catch { /* corrupto */ }
+let promptHistIdx = -1, promptDraft = '';
+function pushPromptHistory(text) {
+  if (promptHistory[promptHistory.length - 1] !== text) promptHistory.push(text);
+  if (promptHistory.length > 100) promptHistory = promptHistory.slice(-100);
+  try { localStorage.setItem(PROMPT_HIST_KEY, JSON.stringify(promptHistory)); } catch { /* lleno */ }
+  promptHistIdx = -1; promptDraft = '';
+}
+$('prompt').addEventListener('keydown', e => {
+  if (!$('menu').hidden) return;                 // el menú «/» ya usa ↑/↓
+  const inp = e.target;
+  if (e.key === 'ArrowUp') {
+    if (!promptHistory.length) return;
+    if (promptHistIdx === -1) { promptDraft = inp.value; promptHistIdx = promptHistory.length; }
+    promptHistIdx = Math.max(0, promptHistIdx - 1);
+    inp.value = promptHistory[promptHistIdx];
+    e.preventDefault();
+    requestAnimationFrame(() => inp.setSelectionRange(inp.value.length, inp.value.length));
+  } else if (e.key === 'ArrowDown') {
+    if (promptHistIdx === -1) return;
+    promptHistIdx++;
+    inp.value = promptHistIdx >= promptHistory.length ? (promptHistIdx = -1, promptDraft) : promptHistory[promptHistIdx];
+    e.preventDefault();
+  } else if (e.key === 'Enter' && !e.isComposing && !e.shiftKey) {
+    // envío explícito: no depender del submit-on-Enter nativo del <form>,
+    // que algún navegador puede "tragarse" el primer Enter (autocompletar/
+    // sugerencias) justo después de rellenar el valor por código (↑ del
+    // historial) en vez de por tecleo real.
+    e.preventDefault();
+    $('composer').requestSubmit();
+  }
+});
+$('composer').addEventListener('submit', e => {
+  e.preventDefault();
+  const text = $('prompt').value.trim();
+  if (!text) return;
+  $('prompt').value = '';
+  pushPromptHistory(text);
+  send(text);
+});
+$('model-select').addEventListener('change', e => changeModel(e.target.value));
+// móvil: conmutar chat ↔ editor
+$('code-flip').addEventListener('click', () => {
+  const showEditor = !document.body.classList.contains('show-editor');
+  document.body.classList.toggle('show-editor', showEditor);
+  paintFlip(showEditor);
+});
+
+// vistas Arquitectura (grafo) y Ciudad 3D — leen el proyecto abierto y al
+// hacer clic abren el fichero en Monaco (inspirado en CodeFlow + VibeCodeViewer)
+$('act-arch').innerHTML = UI.graph || UI.code;
+$('act-city').innerHTML = UI.city || UI.code;
+let viewRenderSeq = 0;
+async function openView(kind) {
+  const overlay = $('view-overlay'), body = $('view-body');
+  const seq = ++viewRenderSeq;
+  // destruir CUALQUIER vista previa (su RAF/canvas seguía vivo al cambiar → la
+  // nueva no cargaba bien). Ambas, no solo la del mismo tipo.
+  try { (await import('./city.js')).disposeCity(); } catch { /* */ }
+  try { (await import('./arch.js')).disposeArch(); } catch { /* */ }
+  body.innerHTML = '<div class="view-loading">Construyendo…</div>';
+  overlay.hidden = false;
+  document.querySelectorAll('#activity button').forEach(b => b.classList.toggle('on', b.id === 'act-' + kind));
+  // esperar a que el layout dé tamaño real al overlay (si no, canvas 0×0/mal aspect)
+  await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  if (seq !== viewRenderSeq) return; // el usuario cambió de vista mientras tanto
+  try {
+    if (kind === 'arch') { const m = await import('./arch.js'); await m.renderArchitecture(body, p => { closeView(); openFile(p); }); }
+    else { const m = await import('./city.js'); await m.renderCity(body, p => { closeView(); openFile(p); }); }
+  } catch (e) { body.innerHTML = '<div class="view-loading">No pude construir la vista: ' + (e?.message || e) + '</div>'; }
+}
+function closeView() {
+  $('view-overlay').hidden = true;
+  import('./city.js').then(m => m.disposeCity()).catch(() => {});
+  import('./arch.js').then(m => m.disposeArch()).catch(() => {});
+  document.querySelectorAll('#activity button').forEach(b => b.classList.toggle('on', b.id === 'act-files'));
+}
+$('act-arch').addEventListener('click', () => openView('arch'));
+$('act-city').addEventListener('click', () => openView('city'));
+$('view-close').addEventListener('click', closeView);
+
+// ── Cerebro CEO autónomo + Mente de Elffuss ───────────────────────────────
+// Cuando NO estás pidiendo nada, la elfa trabaja: revisa el proyecto y propone
+// mejoras (en elffuss-mind/, sin tocar tu código). Clic en la elfa → abre la
+// «Mente» (mundo trance + pensamientos paralelos + música) y activa el cerebro.
+mind.setOpenFile(openFile);
+mind.init({ buildCity: buildCityAdapter, loadThoughts: loadThoughtsAdapter });
+// «Ejecutar esta propuesta»: la manda a la MISMA cola/agente del chat normal
+// (mismas herramientas reales, mismo gate de Auto-edit) — no un auto-apply
+// aparte sin supervisión.
+mind.setExecuteProposal(md => { mind.closeMind(); send('Implementa esta propuesta de mejora con cambios reales en el código:\n\n' + md); });
+// «perfiles»: cada uno es una línea de pensamiento paralela (foco + color de
+// su estrella) del cerebro CEO (compartido, core/ceo.js). El usuario los
+// edita/crea/borra desde ⚙ en la Mente.
+const CEO_DEFAULT_PROFILES = [
+  { id: 'arq', name: 'Arquitectura', focus: 'estructura, acoplamiento y dependencias; qué módulo conviene dividir o unificar', color: '#7c5cff' },
+  { id: 'cal', name: 'Calidad', focus: 'bugs latentes, casos borde sin cubrir, validaciones que faltan', color: '#49e8ff' },
+  { id: 'rend', name: 'Rendimiento', focus: 'cuellos de botella, trabajo repetido, estructuras de datos mejorables', color: '#ffb454' },
+  { id: 'dx', name: 'Producto/DX', focus: 'legibilidad, nombres, documentación y ergonomía para quien lo usa', color: '#3fb970' },
+];
+// adaptador de workspace para el cerebro CEO genérico (core/ceo.js): traduce
+// sus operaciones a las herramientas de code.js (proyecto de código único).
+async function ceoDirHandle(dirPath) {
+  let dir = codeTools.handle();
+  for (const seg of dirPath.split('/').filter(Boolean)) dir = await dir.getDirectoryHandle(seg, { create: true });
+  return dir;
+}
+const ceoWorkspace = {
+  isReady: () => !!codeTools.handle(),
+  tree: (opts) => codeTools.tree(opts),
+  write: (opts) => codeTools.write(opts),
+  read: (opts) => codeTools.read(opts),
+  list: async (dirPath) => {
+    const dir = await ceoDirHandle(dirPath);
+    const names = [];
+    for await (const e of dir.values()) if (e.kind === 'file') names.push(e.name);
+    return names;
+  },
+  remove: async (dirPath, name) => (await ceoDirHandle(dirPath)).removeEntry(name),
+};
+ceo.init({
+  namespace: 'elffusscode',
+  workspace: ceoWorkspace,
+  defaultProfiles: CEO_DEFAULT_PROFILES,
+  defaultMission: 'Revisar el proyecto y proponer mejoras concretas y accionables (código, procesos, datos o docs).',
+  provider: () => conv.getProvider(),
+  // el usuario tiene PRIORIDAD: si CUALQUIER conversación está en cola o procesándose, el cerebro espera
+  isBusy: () => conv.isBusy(),
+  onEvent: (ch, ev) => {
+    mind.pushThought(ch, ev);
+    if (ch === 'ceo' && ev.type === 'built') reportImprovements(ev);
+    // la elfa se anima mientras el cerebro trabaja (invita a hacer clic para ver la Mente)
+    const av = document.querySelector('#activity img');
+    if (av) {
+      if (ch === 'ceo' && ev.type === 'cycle') av.classList.add('working');
+      if (ch === 'ceo' && (ev.type === 'built' || ev.type === 'paused')) av.classList.remove('working');
+    }
+  },
+});
+// Reporta las mejoras SIEMPRE en el chat (visual, entendible); la notificación
+// del navegador solo salta si de verdad hay algo interesante y bien trabajado
+// — nada de avisar por un ciclo flojo con una propuesta de una línea.
+const WEAK_RE = /^(no (encontr|hay|se me ocurre)|nada que|sin cambios|todo (está|esta) bien|no aplica)/i;
+export function isNoteworthy(ev) {
+  const solid = (ev.proposals || []).filter(p => p.text && p.text.trim().length >= 60 && !WEAK_RE.test(p.text.trim()));
+  return solid.length >= 2; // al menos 2 departamentos con algo sustancioso, no una ocurrencia suelta
+}
+// manda una propuesta (el .md completo del ciclo) a la MISMA cola/agente real
+// del chat — usado tanto por el botón del chat como por el de la notificación.
+function executeProposal(md) { send('Implementa esta propuesta de mejora con cambios reales en el código:\n\n' + md); }
+
+export function reportImprovements(ev) {
+  const props = ev.proposals || [];
+  if (!props.length) return;
+  const firstLine = t => (t || '').split('\n').find(l => l.trim())?.trim().slice(0, 160) || '';
+  const body = `💡 **Mientras estabas fuera revisé el proyecto y encontré ${props.length} mejora${props.length === 1 ? '' : 's'}:**\n\n` +
+    props.map(p => `**${p.dept}** — ${firstLine(p.text)}`).join('\n\n') +
+    (ev.path ? `\n\n_Guardado en \`${ev.path}\`. Dale a la elfa para verlo en la Mente, o ábrelo en el editor._` : '');
+  const div = addMsg('assistant', body);
+  // se guarda en el historial REAL de la conversación activa — si no, el
+  // aviso vive solo en el DOM y desaparece al cambiar de pestaña o recargar
+  const active = conv.getActive();
+  if (active) conv.appendMessage(active.id, 'assistant', body);
+  // botón REAL para ejecutar la propuesta desde el propio chat (antes solo
+  // se podía desde el panel de la Mente, había que ir a buscarlo)
+  const md = ev.md || body;
+  if (div) {
+    const btn = document.createElement('button');
+    btn.className = 'proposal-exec-btn';
+    btn.textContent = '▶ Ejecutar esta propuesta';
+    btn.onclick = () => { btn.disabled = true; btn.textContent = '▶ enviado a la cola…'; executeProposal(md); };
+    div.appendChild(btn);
+  }
+  if (isNoteworthy(ev)) notify(`Elffuss encontró ${props.length} mejora${props.length === 1 ? '' : 's'}`, props.map(p => p.dept).join(' · '), md);
+}
+// SOLO notifica si el permiso YA está concedido. Nunca pide permiso aquí:
+// fuera de un gesto de usuario, Chrome/Firefox lo bloquean en silencio —
+// pedirlo vive únicamente en el clic de la elfa y en ⚙ de la Mente.
+// Vía el service worker (registration.showNotification) para poder incluir
+// un botón «▶ Ejecutar» de verdad en la propia notificación del sistema
+// (new Notification() normal no soporta acciones); si el SW no está listo,
+// cae a la notificación simple sin botón.
+async function notify(title, body, md) {
+  if (!('Notification' in window) || Notification.permission !== 'granted') return;
+  try {
+    if ('serviceWorker' in navigator) {
+      const reg = await navigator.serviceWorker.ready;
+      if (reg.showNotification) {
+        await reg.showNotification(title, {
+          body, icon: 'img/elffuss-code.svg',
+          actions: [{ action: 'execute', title: '▶ Ejecutar' }, { action: 'open', title: 'Ver en la Mente' }],
+          data: { md },
+        });
+        return;
+      }
+    }
+  } catch { /* cae a la notificación simple */ }
+  try { new Notification(title, { body, icon: 'img/elffuss-code.svg' }); } catch { /* */ }
+}
+// clic en el botón de la notificación del sistema → lo mismo que en el chat
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.addEventListener('message', e => {
+    if (e.data?.type !== 'notif-action') return;
+    if (e.data.action === 'execute' && e.data.md) executeProposal(e.data.md);
+    else mind.openMind();
+  });
+}
+// cualquier interacción FUERA de la Mente cuenta como actividad → pausa el CEO
+const noteAct = e => { if (!e.target.closest?.('#mind-overlay')) ceo.noteActivity(); };
+document.addEventListener('pointerdown', noteAct, true);
+document.addEventListener('keydown', noteAct, true);
+const elfAvatar = document.querySelector('#activity img');
+if (elfAvatar) {
+  elfAvatar.style.cursor = 'pointer';
+  elfAvatar.title = 'Mente de Elffuss — cerebro autónomo';
+  elfAvatar.addEventListener('click', () => {
+    // auto-activa SOLO la primera vez (nunca decidiste play/stop); si lo
+    // pausaste a propósito, abrir la Mente NO debe reactivarlo por sorpresa.
+    if (!ceo.isEnabled() && !ceo.hasDecided()) ceo.enable();
+    try { if ('Notification' in window && Notification.permission === 'default') Notification.requestPermission(); } catch { /* */ }
+    mind.openMind();
+  });
+}
+// restaura tu última elección (play o stop) tal cual la dejaste
+if (ceo.wasEnabledLastSession()) ceo.enable();
+
+// terminal integrado: xterm.js + shell sobre los ficheros REALES del proyecto.
+// La elfa comparte este shell (tool terminal.run) y su salida se refleja aquí.
+$('act-term').innerHTML = UI.terminal;
+shell.setHooks({ fsChange: () => refreshTree().catch(() => {}), openFile });
+setTerminalEcho((cmd, out) => terminal.echoAgent(cmd, out));
+async function toggleTerminal(force) {
+  const show = force != null ? force : $('terminal-panel').hidden;
+  $('terminal-panel').hidden = !show;
+  $('act-term').classList.toggle('on', show);
+  if (show) {
+    const cap = shell.capabilities();
+    $('term-caps').textContent = cap.bridge ? '🔌 Bridge local: node/npm/python reales' : 'shell del proyecto · node/npm/python → Bridge local (⚙ Ajustes)';
+    await terminal.mount($('terminal-host'));
+    terminal.refit();
+  }
+}
+$('act-term').addEventListener('click', () => toggleTerminal());
+$('term-close').addEventListener('click', () => toggleTerminal(false));
+$('term-clear').addEventListener('click', () => terminal.clearScreen());
+// Ctrl+` (o Cmd+`) alterna el terminal, como en VS Code
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey || e.metaKey) && e.key === '`') { e.preventDefault(); toggleTerminal(); }
+});
+// redimensionar arrastrando la barra superior del panel
+(() => {
+  const panel = $('terminal-panel'), handle = $('term-resize');
+  let sy = 0, sh = 0;
+  const move = e => { const h = Math.max(120, Math.min(window.innerHeight - 160, sh + (sy - e.clientY))); panel.style.height = h + 'px'; terminal.refit(); };
+  const up = () => { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', up); };
+  handle.addEventListener('mousedown', e => { sy = e.clientY; sh = panel.offsetHeight; document.addEventListener('mousemove', move); document.addEventListener('mouseup', up); e.preventDefault(); });
+})();
+window.addEventListener('resize', () => terminal.refit());
+
+// iconos VS Code (sin emojis) en cabecera, composer y flip
+$('btn-history').innerHTML = UI.history;
+$('btn-settings').innerHTML = UI.gear;
+$('btn-send').innerHTML = UI.send;
+$('btn-plus').innerHTML = UI.add;
+$('btn-slash').innerHTML = UI.slash;
+const paintFlip = editor => { $('code-flip').innerHTML = (editor ? UI.chat : UI.editor) + `<span>${editor ? 'Chat' : 'Editor'}</span>`; };
+paintFlip(false);
+
+// barra de actividad estilo VS Code
+$('act-files').innerHTML = ACTIVITY.files;
+$('act-search').innerHTML = ACTIVITY.search;
+$('act-settings').innerHTML = ACTIVITY.gear;
+$('act-files').addEventListener('click', () => {
+  document.body.classList.toggle('hide-tree');
+  $('act-files').classList.toggle('on');
+});
+$('act-search').addEventListener('click', () => {
+  $('prompt').value = 'busca ';
+  $('prompt').focus();
+});
+$('act-settings').addEventListener('click', () => $('btn-settings').click());
+
+$('btn-history').addEventListener('click', () => {
+  const panel = $('history-panel');
+  panel.hidden = !panel.hidden;
+  if (!panel.hidden) renderHistoryPanel();
+});
+document.addEventListener('pointerdown', e => {
+  const p = $('history-panel');
+  if (p.hidden) return;
+  if (p.contains(e.target) || e.target.closest('#btn-history')) return;
+  p.hidden = true;
+}, true);
+$('btn-settings').addEventListener('click', () => {
+  const p = $('settings-panel');
+  p.hidden = !p.hidden;
+  if (!p.hidden) renderSettings();
+});
+// clic fuera del panel (o ir a Archivo/chat) lo cierra — antes solo la X lo hacía
+document.addEventListener('pointerdown', e => {
+  const p = $('settings-panel');
+  if (p.hidden) return;
+  if (p.contains(e.target) || e.target.closest('#btn-settings, #act-settings')) return;
+  p.hidden = true;
+}, true);
+
+// ---------- composer estilo plugin: +, /, medidor de contexto, Auto ----------
+
+// medidor de contexto: chars del historial / presupuesto (~4 chars/token)
+// Al máximo del modelo de serie: LFM2.5-1.2B soporta 32K nativo; reservamos
+// ~2K de sistema + 2K de generación → 28K para historial.
+const CTX_BUDGET_TOK = 28000;
+function updateCtxMeter() {
+  if (!$('ctx-text')) return; // aún en la landing
+  const chars = (conv.getActive()?.agent.history || []).reduce((s, m) => s + (m.content || '').length, 0);
+  const tok = Math.round(chars / 4);
+  const pct = Math.min(100, Math.round(tok / CTX_BUDGET_TOK * 100));
+  const k = n => n >= 1000 ? (n / 1000).toFixed(1).replace('.0', '') + 'k' : n;
+  $('ctx-text').textContent = `ctx ${k(tok)} / ${k(CTX_BUDGET_TOK)}`;
+  $('ctx-bar').style.width = pct + '%';
+  $('ctx-bar').className = pct > 85 ? 'hot' : '';
+  $('ctx-meter').title = pct > 85
+    ? `Contexto casi lleno (${pct}%). Los mensajes viejos se comprimen solos; usa 🧹 para empezar limpio.`
+    : `Contexto: ${tok} de ~${CTX_BUDGET_TOK} tokens (${100 - pct}% libre)`;
+}
+const _origAdd = addMsg; // refrescar el medidor cuando cambia la conversación
+addMsg = (...a) => { const r = _origAdd(...a); updateCtxMeter(); return r; };
+
+// menú flotante genérico sobre el composer
+function openMenu(items) {
+  const menu = $('menu');
+  menu.replaceChildren();
+  for (const it of items) {
+    if (it.sep) { const s = document.createElement('div'); s.className = 'sep'; s.textContent = it.sep; menu.appendChild(s); continue; }
+    const row = document.createElement('button');
+    row.className = 'menu-item';
+    row.innerHTML = `<b>${it.label}</b>${it.hint ? `<span>${it.hint}</span>` : ''}`;
+    row.onclick = () => { menu.hidden = true; it.run(); };
+    menu.appendChild(row);
+  }
+  menu.hidden = false;
+}
+document.addEventListener('click', e => {
+  if (!e.target.closest('#menu, #btn-slash, #btn-plus')) $('menu').hidden = true;
+});
+
+// [/] comandos
+$('btn-slash').addEventListener('click', () => openMenu([
+  { sep: 'Comandos' },
+  { label: '/tree', hint: 'árbol del proyecto', run: () => send('árbol') },
+  { label: '/search', hint: 'buscar en el código', run: () => { $('prompt').value = 'busca '; $('prompt').focus(); } },
+  { label: '/skills', hint: 'gestionar skills', run: () => openSkillsPanel() },
+  { label: '/model', hint: 'proveedores y modelo', run: () => $('btn-settings').click() },
+  { label: '/clear', hint: 'nueva conversación', run: () => conv.create() },
+]));
+
+// [+] adjuntar archivo del proyecto como @ruta
+$('btn-plus').addEventListener('click', async () => {
+  let tree = '';
+  try { tree = await codeTools.tree({ depth: 3 }); } catch { /* sin proyecto */ }
+  const files = tree.split('\n').filter(l => l.trim() && !l.includes('📁')).map(l => l.trim()).slice(0, 40);
+  const { currentFile } = codeTools.current();
+  const items = [{ sep: 'Adjuntar al mensaje (@)' }];
+  if (currentFile) items.push({ label: '@' + currentFile, hint: 'archivo abierto', run: () => attach(currentFile) });
+  for (const f of files.filter(f => f !== currentFile).slice(0, 20))
+    items.push({ label: '@' + f, run: () => attach(f) });
+  openMenu(items.length > 1 ? items : [{ sep: 'Abre un proyecto primero' }]);
+});
+function attach(path) {
+  const p = $('prompt');
+  p.value = (p.value + ' @' + path).trim() + ' ';
+  p.focus();
+}
+
+// </> Auto (Edit automatically): si off, pide confirmación antes de escribir
+let autoEdit = localStorage.getItem('elffusscode.autoedit') !== '0';
+function paintAuto() {
+  const b = $('btn-autoedit');
+  b.classList.toggle('on', autoEdit);
+  b.querySelector('.ae-txt').textContent = autoEdit ? 'Auto' : 'Revisar';
+  b.title = autoEdit ? 'Editar archivos automáticamente (clic para revisar antes)' : 'Pedir confirmación antes de escribir (clic para automático)';
+}
+$('btn-autoedit').addEventListener('click', () => {
+  autoEdit = !autoEdit;
+  localStorage.setItem('elffusscode.autoedit', autoEdit ? '1' : '0');
+  paintAuto();
+});
+paintAuto();
+codeTools.setWriteApprover(async (path, content) => {
+  if (autoEdit) return true;
+  return confirm(`Elffuss quiere escribir en «${path}» (${content.split('\n').length} líneas).\n\n¿Aplicar el cambio?`);
+});
+
+// 🎯 Goal: el siguiente mensaje que mandes se trata como un OBJETIVO — se
+// planifica en tareas y se ejecutan una a una (goal.js), en vez del turno de
+// chat normal. Mismo patrón (interruptor persistente en localStorage) que
+// </> Auto de arriba.
+let goalMode = localStorage.getItem('elffusscode.goalmode') === '1';
+function paintGoal() {
+  $('btn-goal').classList.toggle('on', goalMode);
+}
+$('btn-goal').addEventListener('click', () => {
+  goalMode = !goalMode;
+  localStorage.setItem('elffusscode.goalmode', goalMode ? '1' : '0');
+  paintGoal();
+});
+paintGoal();
+
+// resolver @rutas del mensaje: se leen y se adjuntan como contexto
+const _send = send;
+send = async (text) => {
+  const refs = [...text.matchAll(/@([\w./-]+\.\w+)/g)].map(m => m[1]);
+  if (refs.length) {
+    let ctx = '';
+    for (const r of [...new Set(refs)].slice(0, 4)) {
+      try { ctx += `\n\n--- ${r} ---\n${await codeTools.read({ path: r })}`; } catch { /* ignora */ }
+    }
+    if (ctx) text += '\n\n[archivos adjuntos]' + ctx;
+  }
+  _send(text);
+};
+
+// ---------- panel de skills (transparente: repo + lista + SKILL.md) ----------
+async function openSkillsPanel() {
+  const box = $('settings-panel');
+  box.hidden = false;
+  box.replaceChildren();
+  const close = document.createElement('button');
+  close.id = 'settings-close'; close.textContent = '✕'; close.onclick = () => { box.hidden = true; };
+  box.appendChild(close);
+
+  const wrap = document.createElement('div');
+  wrap.className = 'skills-panel';
+  wrap.innerHTML = `<h3>🧩 Skills de Claude Code</h3>
+    <p class="muted">Instala instrucciones especializadas (formato SKILL.md) desde repos públicos.
+    Todo se guarda en tu navegador. Se ve el repo y lo que se inyecta.</p>`;
+  box.appendChild(wrap);
+
+  // instaladas
+  const inst = skills.installed();
+  const instBox = document.createElement('div');
+  instBox.innerHTML = `<div class="sk-h">Instaladas (${inst.length})</div>`;
+  for (const s of inst) {
+    const row = document.createElement('div');
+    row.className = 'sk-row';
+    row.innerHTML = `<b>${s.name}</b><span class="muted">${s.repo || 'local'}</span>`;
+    const rm = document.createElement('button');
+    rm.className = 'ghost'; rm.textContent = 'Quitar';
+    rm.onclick = async () => { await skills.remove(s.name); openSkillsPanel(); };
+    row.appendChild(rm);
+    instBox.appendChild(row);
+  }
+  if (!inst.length) instBox.innerHTML += '<p class="muted">Ninguna todavía.</p>';
+  box.appendChild(instBox);
+
+  // fuentes + añadir repo
+  const srcs = await skills.sources();
+  const srcBox = document.createElement('div');
+  srcBox.innerHTML = `<div class="sk-h">Catálogos (repos)</div>`;
+  for (const s of srcs) {
+    const row = document.createElement('div');
+    row.className = 'sk-row';
+    row.innerHTML = `<b>${s.label}</b><a href="https://github.com/${s.repo}" target="_blank" rel="noopener">${s.repo} ↗</a>`;
+    const browse = document.createElement('button');
+    browse.className = 'primary'; browse.textContent = 'Explorar';
+    browse.onclick = () => browseRepo(s.repo, box);
+    row.appendChild(browse);
+    if (!s.official) {
+      const rm = document.createElement('button');
+      rm.className = 'ghost'; rm.textContent = '🗑';
+      rm.onclick = async () => { await skills.removeSource(s.repo); openSkillsPanel(); };
+      row.appendChild(rm);
+    }
+    srcBox.appendChild(row);
+  }
+  const addRow = document.createElement('div');
+  addRow.className = 'sk-row';
+  const inp = document.createElement('input');
+  inp.placeholder = 'owner/repo o URL de GitHub (p. ej. OpenClaude/…)';
+  const add = document.createElement('button');
+  add.className = 'primary'; add.textContent = 'Añadir repo';
+  add.onclick = async () => {
+    try { await skills.addSource(inp.value); openSkillsPanel(); }
+    catch (e) { alert(e.message); }
+  };
+  addRow.append(inp, add);
+  srcBox.appendChild(addRow);
+  box.appendChild(srcBox);
+}
+
+async function browseRepo(repo, box) {
+  const list = document.createElement('div');
+  list.innerHTML = `<div class="sk-h">Cargando ${repo}…</div>`;
+  box.appendChild(list);
+  try {
+    const found = await skills.listFromRepo(repo);
+    list.innerHTML = `<div class="sk-h">${repo} — ${found.length} skills</div>`;
+    for (const sk of found.slice(0, 120)) {
+      const row = document.createElement('div');
+      row.className = 'sk-row';
+      row.innerHTML = `<b>${sk.name}</b><span class="muted">${sk.dir}</span>`;
+      const btn = document.createElement('button');
+      const on = skills.isInstalled(sk.repo, sk.path);
+      btn.className = on ? 'ghost' : 'primary';
+      btn.textContent = on ? 'Instalada ✓' : 'Instalar';
+      btn.onclick = async () => {
+        btn.textContent = '…';
+        try {
+          const entry = await skills.installFromRepo(sk);
+          btn.textContent = 'Instalada ✓'; btn.className = 'ghost';
+          $('settings-panel').hidden = true;            // cierra el panel
+          addMsg('assistant', skills.usageMessage(entry)); // «cómo usarla» en el chat
+        } catch (e) { btn.textContent = 'Instalar'; alert(e.message); }
+      };
+      row.appendChild(btn);
+      list.appendChild(row);
+    }
+  } catch (e) {
+    list.innerHTML = `<div class="sk-h">⚠️ ${e.message}</div>`;
+  }
+}
+
+// ---------- command palette (Cmd/Ctrl+P) ----------
+let palItems = [], palSel = 0;
+const COMMANDS = [
+  { label: 'Nueva conversación', run: () => conv.create() },
+  { label: 'Historial de conversaciones', run: () => $('btn-history').click() },
+  { label: 'Buscar en el código…', run: () => { closePalette(); $('prompt').value = 'busca '; $('prompt').focus(); } },
+  { label: 'Gestionar skills', run: () => { closePalette(); openSkillsPanel(); } },
+  { label: 'Ajustes y modelo', run: () => { closePalette(); renderSettings(); } },
+  { label: 'Alternar explorador', run: () => $('act-files').click() },
+  { label: 'Alternar terminal', hint: 'Ctrl+`', run: () => { closePalette(); toggleTerminal(); } },
+  { label: 'Guardar (Ctrl+S)', run: () => triggerEditor('') || (hasEditor() && triggerEditor('workbench.action.files.save')) },
+];
+
+function openPalette(prefix = '') {
+  $('palette').hidden = false;
+  const inp = $('pal-input');
+  inp.value = prefix;
+  inp.focus();
+  renderPalette();
+}
+function closePalette() { $('palette').hidden = true; }
+
+function fuzzy(q, s) {
+  q = q.toLowerCase(); s = s.toLowerCase();
+  let i = 0, score = 0, streak = 0;
+  for (const ch of s) {
+    if (i < q.length && ch === q[i]) { i++; streak++; score += streak; }
+    else streak = 0;
+  }
+  return i === q.length ? score + (s.endsWith(q) ? 20 : 0) : -1;
+}
+
+async function renderPalette() {
+  const raw = $('pal-input').value;
+  const list = $('pal-list');
+  list.replaceChildren();
+  palItems = [];
+
+  if (raw.startsWith('>')) {                       // comandos
+    const q = raw.slice(1).trim().toLowerCase();
+    palItems = COMMANDS.filter(c => c.label.toLowerCase().includes(q)).map(c => ({ label: c.label, hint: 'comando', run: c.run }));
+  } else if (raw.startsWith('@')) {                // símbolos del archivo abierto (Monaco)
+    palItems = [{ label: 'Ir a símbolo en el editor…', hint: '@', run: () => { closePalette(); triggerEditor('editor.action.quickOutline'); } }];
+  } else {                                          // archivos (con :línea opcional)
+    const [pathQ, lineQ] = raw.split(':');
+    const files = await codeTools.fileList().catch(() => []);
+    const scored = pathQ.trim()
+      ? files.map(f => ({ f, s: fuzzy(pathQ.trim(), f.split('/').pop()) * 2 + fuzzy(pathQ.trim(), f) })).filter(x => x.s > 0).sort((a, b) => b.s - a.s)
+      : files.slice(0, 40).map(f => ({ f, s: 0 }));
+    palItems = scored.slice(0, 40).map(({ f }) => ({
+      label: f.split('/').pop(), hint: f, icon: true,
+      run: () => { closePalette(); openFile(f); if (lineQ && +lineQ) setTimeout(() => gotoLine(+lineQ), 300); },
+    }));
+  }
+  palSel = 0;
+  palItems.forEach((it, i) => {
+    const row = el('button', 'pal-item' + (i === 0 ? ' sel' : ''));
+    row.innerHTML = `<span class="pi-name">${it.label}</span><span class="pi-hint">${it.hint || ''}</span>`;
+    row.onmouseenter = () => { palSel = i; paintPalSel(); };
+    row.onclick = () => it.run();
+    list.appendChild(row);
+  });
+  if (!palItems.length) list.appendChild(el('div', 'pal-empty', 'Sin resultados'));
+}
+function paintPalSel() {
+  [...$('pal-list').children].forEach((c, i) => c.classList.toggle('sel', i === palSel));
+  $('pal-list').children[palSel]?.scrollIntoView({ block: 'nearest' });
+}
+$('pal-input').addEventListener('input', renderPalette);
+$('pal-input').addEventListener('keydown', e => {
+  if (e.key === 'Escape') return closePalette();
+  if (e.key === 'ArrowDown') { e.preventDefault(); palSel = Math.min(palSel + 1, palItems.length - 1); paintPalSel(); }
+  if (e.key === 'ArrowUp') { e.preventDefault(); palSel = Math.max(palSel - 1, 0); paintPalSel(); }
+  if (e.key === 'Enter') { e.preventDefault(); palItems[palSel]?.run(); }
+});
+document.addEventListener('keydown', e => {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'p') { e.preventDefault(); openPalette(e.shiftKey ? '>' : ''); }
+  if (e.key === 'Escape' && !$('palette').hidden) closePalette();
+});
+document.addEventListener('click', e => { if (!e.target.closest('#palette')) closePalette(); });
+
+// ---------- barra de menú File/Edit/View/Git ----------
+async function menuFor(which) {
+  if (which === 'file') return [
+    { label: 'Nuevo archivo…', run: () => { const p = prompt('Ruta del nuevo archivo:'); if (p) codeTools.write({ path: p, content: '' }).then(() => { openFile(p); refreshTree(); }); } },
+    { label: 'Guardar', hint: 'Ctrl+S', run: () => triggerEditor('workbench.action.files.save') },
+    { label: 'Abrir carpeta…', run: async () => { try { await enterIDE(await window.showDirectoryPicker({ mode: 'readwrite' })); } catch {} } },
+  ];
+  if (which === 'edit') return [
+    { label: 'Buscar en el código', run: () => { $('prompt').value = 'busca '; $('prompt').focus(); } },
+    { label: 'Ir a archivo…', hint: 'Cmd+P', run: () => openPalette('') },
+    { label: 'Ir a símbolo…', run: () => triggerEditor('editor.action.quickOutline') },
+  ];
+  if (which === 'view') return [
+    { label: 'Explorador', run: () => $('act-files').click() },
+    { label: 'Terminal', hint: 'Ctrl+`', run: () => toggleTerminal(true) },
+    { label: 'Arquitectura', run: () => openView('arch') },
+    { label: 'Ciudad 3D', run: () => openView('city') },
+    { label: 'Command Palette', hint: 'Cmd+Shift+P', run: () => openPalette('>') },
+    { label: 'Skills', run: () => openSkillsPanel() },
+    { label: 'Acerca de Elffuss Code (GitHub)', hint: '↗', run: () => window.open('https://github.com/KikoCis/elffuss-code', '_blank', 'noopener') },
+  ];
+  if (which === 'git') {
+    const g = await codeTools.gitInfo();
+    if (!g.isRepo) return [{ label: 'No es un repositorio git', hint: '', run: () => {} }];
+    const items = [{ label: 'Rama: ' + g.branch, hint: 'git', run: () => {} }];
+    if (g.lastCommit) items.push({ label: 'Último: ' + g.lastCommit.msg.slice(0, 40), hint: g.lastCommit.author, run: () => {} });
+    items.push({ label: 'Pídele a Elffuss que commitee', run: () => { $('prompt').value = 'resume los cambios y prepárame el mensaje de commit'; $('prompt').focus(); } });
+    return items;
+  }
+  return [];
+}
+document.querySelectorAll('#menubar button').forEach(b => {
+  b.addEventListener('click', async () => {
+    document.querySelectorAll('#menubar button').forEach(x => x.classList.toggle('open', x === b));
+    openMenuAt(await menuFor(b.dataset.menu), b);
+  });
+});
+function openMenuAt(items, anchor) {
+  const menu = $('topmenu');
+  const r = anchor.getBoundingClientRect();
+  menu.style.left = r.left + 'px';
+  menu.style.top = (r.bottom + 3) + 'px';
+  menu.replaceChildren();
+  for (const it of items) {
+    const row = el('button', 'menu-item');
+    row.innerHTML = `<b>${it.label}</b>${it.hint ? `<span>${it.hint}</span>` : ''}`;
+    row.onclick = () => { menu.hidden = true; it.run(); };
+    menu.appendChild(row);
+  }
+  menu.hidden = false;
+}
+document.addEventListener('click', e => {
+  if (!e.target.closest('#menubar, #topmenu')) {
+    document.querySelectorAll('#menubar button').forEach(x => x.classList.remove('open'));
+    $('topmenu').hidden = true;
+  }
+});
+
+// ---------- git en el header ----------
+async function refreshGit() {
+  const g = await codeTools.gitInfo().catch(() => ({ isRepo: false }));
+  const chip = $('git-branch');
+  if (g.isRepo) { chip.hidden = false; chip.innerHTML = UI.code + ' ' + g.branch; }
+  else chip.hidden = true;
+}
+$('git-branch').addEventListener('click', () => document.querySelector('#menubar button[data-menu="git"]').click());
+
+// icono de skills en la barra de actividad
+$('act-skills').innerHTML = UI.puzzle;
+$('act-skills').addEventListener('click', () => openSkillsPanel());
+
+rebuildSelect();
+skills.initSkills();
+boot();
+window.elffussClaw = { conv, get agent() { return conv.getActive()?.agent; }, send, openFile, parseToolCall, skills };

js/mind-adapter.js

@@ -0,0 +1,51 @@
+// Glue específico de Elffuss Code para la Mente genérica (mind.js, core): le
+// da su ciudad de fondo real (motor VibeCodeViewer sobre el proyecto abierto)
+// y la semilla de pensamientos ya guardados en la carpeta-alma del cerebro.
+import * as THREE from 'three';
+import * as codeTools from './tools/code.js';
+import * as ceo from './ceo.js';
+import { buildModel } from './vcc/model.js';
+import { buildCity } from './vcc/builder.js';
+import { THEME as VCC_THEME } from './vcc/theme.js';
+
+const CITY_MAX_FILES = 2600;
+const IGNORE = new Set(['node_modules', '.git', 'dist', 'build', 'target', '__pycache__', '.next', 'venv', '.venv', '.DS_Store']);
+
+async function scanForCity(dir, budget) {
+  const dirs = [], files = [];
+  for await (const e of dir.values()) { if (IGNORE.has(e.name)) continue; (e.kind === 'directory' ? dirs : files).push(e); }
+  dirs.sort((a, b) => a.name.localeCompare(b.name)); files.sort((a, b) => a.name.localeCompare(b.name));
+  const outFiles = [];
+  for (const f of files) { if (budget.n >= CITY_MAX_FILES) break; let size = 0; try { size = (await f.getFile()).size; } catch { /* */ } outFiles.push([f.name, size]); budget.n++; }
+  const outDirs = [];
+  for (const d of dirs) { if (budget.n >= CITY_MAX_FILES) break; outDirs.push(await scanForCity(d, budget)); }
+  return [dir.name, outDirs, outFiles];
+}
+
+export async function buildCityAdapter(scene) {
+  const root = codeTools.handle();
+  if (!root) return null;
+  const tree = await scanForCity(root, { n: 0 });
+  const model = buildModel(tree, null);
+  if (!model.files.length) return null;
+  const extent = Math.max(model.city.box.sx, model.city.box.sz, 1);
+  const scale = Math.min(1, Math.max(0.05, 170 / extent));
+  const cityWrap = new THREE.Group();
+  cityWrap.position.set(0, -95, 0);
+  cityWrap.scale.setScalar(scale);
+  scene.add(cityWrap);
+  const cityCity = buildCity(cityWrap, model, VCC_THEME);
+  return { cityWrap, cityCity, cityModel: model };
+}
+
+export async function loadThoughtsAdapter() {
+  const soul = ceo.getSoulDir();
+  let dir = codeTools.handle();
+  for (const seg of soul.split('/').filter(Boolean)) dir = await dir.getDirectoryHandle(seg);
+  const files = [];
+  for await (const e of dir.values()) if (e.kind === 'file' && e.name.endsWith('.md')) files.push(e);
+  files.sort((a, b) => a.name.localeCompare(b.name));
+  const out = [];
+  for (const f of files.slice(-24)) out.push({ path: soul + '/' + f.name, md: await (await f.getFile()).text() });
+  return out;
+}

js/mind.js

@@ -0,0 +1,609 @@
+// Vista «Mente de Elffuss» — el pensamiento subyacente del cerebro CEO en un
+// mundo 3D de fantasía psicodélica trance, con la CIUDAD real del proyecto
+// (motor VibeCodeViewer) flotando por debajo.
+//  · cada línea/tool-call que llega nace como una ESTRELLA de texto (color por
+//    PERFIL, tamaño/tipografía según lo que ocurre) que se desvanece sola.
+//  · los perfiles (nombre, foco, color) se editan desde ⚙ — el usuario los crea
+//    a su gusto.
+//  · «≡ historial»: panel con TODO lo que ha llegado, sin recortar.
+//  · cuando lee/escribe un fichero real, un haz baja hasta él en la ciudad.
+//  · overlay PERSISTENTE (música/animación no reinician al salir y volver).
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import * as ceo from './ceo.js';
+import * as db from './db.js';
+import { renderMarkdown } from './md.js';
+
+const SOUNDCLOUD = 'https://soundcloud.com/dekel-official/dekel-baoba-festival-2023';
+const CEO_COLOR = '#ff4d8d';
+
+let open = false, built = false, raf = null;
+let overlay, S, widget, onOpenFile = () => {}, onExecute = () => {};
+// Ciudad de fondo (vista real del workspace) y semilla de pensamientos previos:
+// AMBOS opcionales e inyectados por la app anfitriona — Code tiene un motor
+// VibeCodeViewer sobre su proyecto único; Claw (v1) no lo ofrece y la Mente
+// funciona igual de bien sin ciudad de fondo.
+let loadThoughts = async () => [];             // () => [{path, md}]
+let buildCityFn = null;                        // (scene) => {cityWrap, cityCity, cityModel} | null
+export function init({ loadThoughts: lt, buildCity: bc } = {}) {
+  if (lt) loadThoughts = lt;
+  if (bc) buildCityFn = bc;
+}
+let anchorMap = new Map();     // id de perfil (+ 'ceo') → Vector3 (anclas del mundo)
+const anchors = [];            // { el, pos } — solo etiquetas de propuestas forjadas
+let nodesGroup, thoughtNodes = [];
+let starGroup, stars = [];     // estrellas de pensamiento efímeras
+const lineBuf = new Map();     // canal → texto acumulado hasta la línea completa
+const streamed = new Map();    // canal → ¿llegaron tokens? (evita duplicar el texto final)
+let cityWrap = null, cityCity = null, cityModel = null;
+let beams = [], fileActivity = [];
+
+export function isOpen() { return open; }
+export function setOpenFile(fn) { onOpenFile = fn; }
+export function setExecuteProposal(fn) { onExecute = fn; }
+
+const escHtml = s => String(s).replace(/[<>&]/g, c => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[c]));
+const profileOf = channel => channel === 'ceo'
+  ? { id: 'ceo', name: 'CEO', color: CEO_COLOR }
+  : ceo.getProfiles().find(p => p.id === channel) || { id: channel, name: channel, color: '#7c5cff' };
+
+// ── música con Widget API (persistente: pausa al salir, reanuda al volver) ──
+function mountMusic(root) {
+  const wrap = document.createElement('div');
+  wrap.className = 'mind-music';
+  const url = 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(SOUNDCLOUD) +
+    '&auto_play=true&hide_related=true&show_comments=false&show_user=false&show_reposts=false&visual=false&color=%23ff4d8d';
+  wrap.innerHTML = '<iframe id="mind-sc" title="música" width="100%" height="120" frameborder="no" allow="autoplay; encrypted-media" src="' + url + '"></iframe>' +
+    '<div class="mind-music-cap">▶ Dekel · Baoba Festival — modo trance</div>';
+  root.appendChild(wrap);
+  const iframe = wrap.querySelector('#mind-sc');
+  const initWidget = () => { try { widget = window.SC.Widget(iframe); } catch { /* aún no */ } };
+  if (window.SC && window.SC.Widget) initWidget();
+  else { const s = document.createElement('script'); s.src = 'https://w.soundcloud.com/player/api.js'; s.onload = initWidget; document.head.appendChild(s); }
+}
+
+// ══ ESTRELLAS de pensamiento: cada línea/tool-call nace, brilla y se apaga ══
+function makeTextSprite(text, color, { fontSize = 16, bold = false, glow = 10 } = {}) {
+  const pad = 8;
+  const probe = document.createElement('canvas').getContext('2d');
+  probe.font = `${bold ? 700 : 500} ${fontSize}px ui-monospace, Menlo, monospace`;
+  const w = Math.ceil(probe.measureText(text).width) + pad * 2;
+  const h = fontSize + pad * 2;
+  const cv = document.createElement('canvas'); cv.width = w; cv.height = h;
+  const g = cv.getContext('2d');
+  g.font = `${bold ? 700 : 500} ${fontSize}px ui-monospace, Menlo, monospace`;
+  g.textBaseline = 'middle';
+  g.shadowColor = color; g.shadowBlur = glow;
+  g.fillStyle = color;
+  g.fillText(text, pad, h / 2 + 1);
+  const tex = new THREE.CanvasTexture(cv);
+  const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending });
+  const sprite = new THREE.Sprite(mat);
+  const scale = 0.09;
+  sprite.scale.set(w * scale, h * scale, 1);
+  return sprite;
+}
+
+// kind: 'line' (charla normal) · 'tool' (tool-call) · 'event' (ciclo/estado) · 'built' (propuesta forjada)
+const KIND_STYLE = {
+  line: { fontSize: 13, bold: false, glow: 8, life: 6, jitter: 15 },
+  tool: { fontSize: 17, bold: true, glow: 16, life: 9, jitter: 9 },
+  event: { fontSize: 20, bold: true, glow: 14, life: 7, jitter: 6 },
+  built: { fontSize: 26, bold: true, glow: 22, life: 13, jitter: 4 },
+};
+function spawnStar(channel, text, kind = 'line') {
+  if (!starGroup || !text) return;
+  const prof = profileOf(channel);
+  const st = KIND_STYLE[kind] || KIND_STYLE.line;
+  const anchor = anchorMap.get(prof.id) || new THREE.Vector3(0, 20, 0);
+  const j = st.jitter;
+  const label = kind === 'tool' ? '⟐ ' + text : kind === 'event' ? '★ ' + text : kind === 'built' ? '✦ ' + text : text;
+  const sprite = makeTextSprite(label.slice(0, kind === 'line' ? 52 : 72), prof.color, st);
+  sprite.position.copy(anchor).add(new THREE.Vector3((Math.random() - 0.5) * j, (Math.random() - 0.5) * j * 0.6, (Math.random() - 0.5) * j));
+  sprite.material.opacity = 0;
+  starGroup.add(sprite);
+  stars.push({ obj: sprite, born: elapsed, life: st.life, seed: Math.random() * 1000, up: kind === 'built' ? 0.5 : 0.22 });
+  if (stars.length > 160) { const old = stars.shift(); starGroup.remove(old.obj); old.obj.material.map.dispose(); old.obj.material.dispose(); }
+}
+
+// ── historial COMPLETO (todo lo que llega, sin recortar) — PERSISTENTE: antes
+// vivía solo en el DOM/memoria y una recarga de página lo borraba entero.
+const LOG_CAP = 500;
+let logHistory = [];       // [{channel, text}] — se guarda en IndexedDB
+let logSaveTimer = null;
+function saveLogSoon() {
+  clearTimeout(logSaveTimer);
+  logSaveTimer = setTimeout(() => db.set('kv', 'mindLog', logHistory).catch(() => {}), 400);
+}
+function renderLogRow(channel, text) {
+  const body = document.getElementById('mind-log-body');
+  if (!body) return;
+  const prof = profileOf(channel);
+  const row = document.createElement('div');
+  row.className = 'ml-row';
+  row.innerHTML = `<span class="ml-dot" style="background:${prof.color}"></span><b style="color:${prof.color}">${escHtml(prof.name)}</b> <span class="ml-t">${escHtml(text)}</span>`;
+  body.appendChild(row);
+  while (body.children.length > LOG_CAP) body.removeChild(body.firstChild);
+  body.scrollTop = body.scrollHeight;
+}
+function logLine(channel, text) {
+  logHistory.push({ channel, text });
+  if (logHistory.length > LOG_CAP) logHistory = logHistory.slice(-LOG_CAP);
+  saveLogSoon();
+  renderLogRow(channel, text);
+}
+async function loadPersistedLog() {
+  try {
+    const saved = await db.get('kv', 'mindLog');
+    if (!Array.isArray(saved) || !saved.length) return;
+    logHistory = saved;
+    for (const { channel, text } of saved) renderLogRow(channel, text);
+  } catch { /* aún no hay historial guardado */ }
+}
+
+function flushLine(channel, force = false) {
+  const buf = (lineBuf.get(channel) || '').trim();
+  if (!buf && !force) return;
+  if (buf) { spawnStar(channel, buf, 'line'); logLine(channel, buf); }
+  lineBuf.set(channel, '');
+}
+
+// alimenta estrellas + historial + haces sobre la ciudad (ceo.js → aquí)
+export function pushThought(channel, ev) {
+  if (!open) return;
+  if (channel === 'sys') { logLine('ceo', ev.text); return; }
+  if (channel === 'ceo') {
+    if (ev.type === 'cycle') { logLine('ceo', '● ' + ev.text); spawnStar('ceo', ev.text, 'event'); }
+    else if (ev.type === 'survey') { logLine('ceo', ev.text); }
+    else if (ev.type === 'reprogram') { logLine('ceo', '⚙ ' + ev.text); spawnStar('ceo', ev.text, 'event'); if (ev.profiles) rebuildWorld(); }
+    else if (ev.type === 'paused') { logLine('ceo', ev.text); spawnStar('ceo', ev.text, 'event'); }
+    else if (ev.type === 'built') { logLine('ceo', '✦ ' + ev.text); spawnStar('ceo', ev.text, 'built'); addThoughtNode(ev); }
+    else logLine('ceo', ev.text || '');
+    return;
+  }
+  if (ev.type === 'open') { lineBuf.set(channel, ''); streamed.set(channel, false); }
+  else if (ev.type === 'token') {
+    streamed.set(channel, true);
+    lineBuf.set(channel, (lineBuf.get(channel) || '') + ev.text);
+    const buf = lineBuf.get(channel);
+    if (/\n/.test(ev.text) || buf.length > 90) flushLine(channel);
+  } else if (ev.type === 'tool') {
+    flushLine(channel);
+    spawnStar(channel, ev.text, 'tool');
+    logLine(channel, '⟐ ' + ev.text);
+    if (ev.path) fileBeam(ev.path, /escrib/i.test(ev.text) ? 'write' : 'read');
+  } else if (ev.type === 'tool_result') {
+    // el RESULTADO real de la tool (lo que de verdad se leyó/escribió/ejecutó),
+    // enlazado justo debajo de su tool-call — no solo el nombre de la acción.
+    const t = '→ ' + (ev.text || '(sin salida)');
+    spawnStar(channel, t, 'line');
+    logLine(channel, t);
+  } else if (ev.type === 'done') {
+    flushLine(channel, true);
+    // el proveedor puede devolver el texto final SIN pasar por tokens (sin
+    // streaming) → si no vimos ningún token, esto es lo único que lo muestra.
+    if (ev.text && !streamed.get(channel)) { spawnStar(channel, ev.text, 'line'); logLine(channel, ev.text); }
+  }
+}
+
+// ── nodos de pensamiento clicables (cada .md forjado = un punto brillante) ──
+function addThoughtNode({ path, md, text }) {
+  if (!nodesGroup) return;
+  const i = thoughtNodes.length;
+  const a = i * 2.399963; // ángulo áureo
+  const r = 30 + i * 5;
+  const mesh = new THREE.Mesh(
+    new THREE.IcosahedronGeometry(3.2, 0),
+    new THREE.MeshBasicMaterial({ color: 0xff4d8d, transparent: true, opacity: 0.95, blending: THREE.AdditiveBlending, depthWrite: false }));
+  mesh.position.set(Math.cos(a) * r, 6 + Math.sin(i * 0.7) * 10, Math.sin(a) * r);
+  mesh.userData = { path, md, text };
+  nodesGroup.add(mesh);
+  thoughtNodes.push(mesh);
+  const lab = document.createElement('div');
+  lab.className = 'mind-node-label';
+  lab.textContent = (path || 'pensamiento').split('/').pop();
+  // clicable ella misma — antes SOLO el raycast contra la diminuta malla 3D
+  // abría el panel, fácil de fallar; la etiqueta es el blanco visible real.
+  lab.addEventListener('click', () => selectThoughtNode(mesh));
+  document.getElementById('mind-anchors').appendChild(lab);
+  anchors.push({ el: lab, pos: mesh.position });
+  mesh.userData.label = lab;
+}
+
+async function loadExistingThoughts() {
+  try { for (const it of await loadThoughts()) addThoughtNode(it); } catch { /* aún no hay */ }
+}
+
+// selección de un nodo de propuesta — desde la malla 3D (raycast) o su etiqueta
+function selectThoughtNode(mesh) { showThoughtPanel(mesh); focusOn(mesh.position, 26); }
+
+function showThoughtPanel(node) {
+  const root = document.getElementById('mind-panel');
+  const md = node.userData.md || node.userData.text || '(sin contenido)';
+  const path = node.userData.path || 'pensamiento';
+  root.innerHTML = `<div class="mp-head">${escHtml(path)}<button id="mp-x">✕</button></div>` +
+    `<div class="mp-body">${renderMarkdown(md)}</div>` +
+    `<div class="mp-actions">` +
+    `<button id="mp-exec" class="mp-exec">▶ Ejecutar esta propuesta</button>` +
+    (node.userData.path ? `<button id="mp-open" class="mp-open">Abrir en el editor</button>` : '') +
+    `</div>`;
+  root.classList.add('show');
+  root.querySelector('#mp-x').onclick = () => root.classList.remove('show');
+  root.querySelector('#mp-exec').onclick = () => { onExecute(md); root.classList.remove('show'); };
+  const openBtn = root.querySelector('#mp-open');
+  if (openBtn) openBtn.onclick = () => { onOpenFile(node.userData.path); root.classList.remove('show'); };
+}
+
+// ══ perfiles: anclas 3D + leyenda (recalculadas al abrir o al reprogramar) ══
+function computeAnchors() {
+  const map = new Map();
+  map.set('ceo', new THREE.Vector3(0, 46, 0));
+  const profs = ceo.getProfiles();
+  const n = Math.max(profs.length, 1);
+  profs.forEach((p, i) => {
+    const a = (i / n) * Math.PI * 2;
+    map.set(p.id, new THREE.Vector3(Math.cos(a) * 70, 8 + (i % 2) * 20, Math.sin(a) * 70));
+  });
+  return map;
+}
+function renderLegend() {
+  const el = document.getElementById('mind-legend');
+  if (!el) return;
+  const profs = ceo.getProfiles();
+  el.innerHTML = `<div class="ml-item" data-id="ceo"><span class="ml-sw" style="background:${CEO_COLOR}"></span>CEO</div>` +
+    profs.map(p => `<div class="ml-item" data-id="${p.id}"><span class="ml-sw" style="background:${p.color}"></span>${escHtml(p.name)}</div>`).join('');
+  el.querySelectorAll('.ml-item').forEach(row => {
+    row.onclick = () => { const pos = anchorMap.get(row.dataset.id); if (pos) focusOn(pos, 46); };
+  });
+}
+// vuelo suave de la cámara hacia un punto — así «clic en algo → la cámara se centra»
+let flyTo = null;
+function focusOn(pos, distance = 40) {
+  if (!S) return;
+  const dir = new THREE.Vector3().subVectors(S.camera.position, S.controls.target);
+  if (dir.lengthSq() < 0.001) dir.set(0, 0.3, 1);
+  dir.normalize().multiplyScalar(distance);
+  flyTo = { fromPos: S.camera.position.clone(), toPos: pos.clone().add(dir), fromTarget: S.controls.target.clone(), toTarget: pos.clone(), t0: elapsed, dur: 1.1 };
+}
+const easeInOut = k => k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2;
+function rebuildWorld() { anchorMap = computeAnchors(); renderLegend(); }
+
+// ── panel ⚙: reprograma misión, carpeta-alma y PERFILES (editables) ──────
+function wireConfig(root) {
+  const btn = root.querySelector('#mind-config');
+  const cfg = root.querySelector('#mind-cfg');
+  const profRowHtml = p => `<div class="cfg-prof" data-id="${escHtml(p.id || '')}">
+      <input type="color" class="cp-color" value="${p.color || '#7c5cff'}">
+      <input type="text" class="cp-name" value="${escHtml(p.name || '')}" placeholder="Nombre">
+      <input type="text" class="cp-focus" value="${escHtml(p.focus || '')}" placeholder="En qué se centra">
+      <button class="cp-del" title="quitar">✕</button></div>`;
+  const notifState = () => (!('Notification' in window)) ? { txt: 'no soportadas por este navegador', can: false }
+    : Notification.permission === 'granted' ? { txt: '✓ concedidas — avisaré cuando encuentre algo bueno', can: false }
+    : Notification.permission === 'denied' ? { txt: '✕ bloqueadas — actívalas en los ajustes del sitio del navegador', can: false }
+    : { txt: 'aún no pedidas', can: true };
+  const draw = () => {
+    const profs = ceo.getProfiles();
+    const ns = notifState();
+    cfg.innerHTML =
+      '<div class="cfg-head">⚙ Reprogramar el cerebro<button id="cfg-x">✕</button></div>' +
+      '<div class="cfg-notif">🔔 Notificaciones del navegador: ' + escHtml(ns.txt) + (ns.can ? ' <button id="cfg-notif-ask" class="cfg-notif-btn">Activar</button>' : '') + '</div>' +
+      '<label>Misión (qué quieres que haga por su cuenta)</label>' +
+      '<textarea id="cfg-mission" rows="3">' + escHtml(ceo.getMission()) + '</textarea>' +
+      '<label>Carpeta-alma (dentro del proyecto)</label>' +
+      '<input id="cfg-dir" value="' + escHtml(ceo.getSoulDir()) + '">' +
+      '<label>Perfiles — cada uno piensa en paralelo, con el color de su estrella</label>' +
+      '<div id="cfg-profiles">' + profs.map(profRowHtml).join('') + '</div>' +
+      '<button id="cfg-add-prof" class="cfg-add">+ nuevo perfil</button>' +
+      '<div class="cfg-actions"><button id="cfg-think-now" class="cfg-ghost">Pensar ahora</button>' +
+      '<button id="cfg-save" class="cfg-save">Reprogramar</button></div>' +
+      '<div class="cfg-note">La elfa trabajará según esto cuando estés ocioso y volcará todo en esa carpeta.</div>';
+    cfg.querySelector('#cfg-x').onclick = () => cfg.classList.remove('show');
+    cfg.querySelector('#cfg-notif-ask')?.addEventListener('click', () => { Notification.requestPermission().then(draw); });
+    cfg.querySelector('#cfg-add-prof').onclick = () => {
+      cfg.querySelector('#cfg-profiles').insertAdjacentHTML('beforeend', profRowHtml({ color: '#ff9f45', name: '', focus: '' }));
+      wireRows();
+    };
+    cfg.querySelector('#cfg-think-now').onclick = () => { ceo.forceCycle(); cfg.classList.remove('show'); };
+    cfg.querySelector('#cfg-save').onclick = () => {
+      // preserva el id original de cada perfil (si no, cada guardado los
+      // regeneraría desde el nombre y los ciclos en curso perderían el hilo)
+      const rows = [...cfg.querySelectorAll('.cfg-prof')].map(r => ({
+        id: r.dataset.id || undefined,
+        color: r.querySelector('.cp-color').value,
+        name: r.querySelector('.cp-name').value.trim(),
+        focus: r.querySelector('.cp-focus').value.trim(),
+      }));
+      ceo.setMission(cfg.querySelector('#cfg-mission').value);
+      ceo.setSoulDir(cfg.querySelector('#cfg-dir').value);
+      ceo.setProfiles(rows);
+      if (!ceo.isEnabled()) ceo.enable();
+      cfg.classList.remove('show');
+    };
+    wireRows();
+    function wireRows() { cfg.querySelectorAll('.cp-del').forEach(b => { b.onclick = () => b.closest('.cfg-prof').remove(); }); }
+  };
+  btn.onclick = () => { if (cfg.classList.contains('show')) cfg.classList.remove('show'); else { draw(); cfg.classList.add('show'); } };
+}
+function wireHistory(root) {
+  const btn = root.querySelector('#mind-history'), panel = root.querySelector('#mind-log');
+  btn.onclick = () => panel.classList.toggle('show');
+  panel.querySelector('#ml-x').onclick = () => panel.classList.remove('show');
+}
+
+// play/stop del cerebro, visible dentro de la Mente. La elección la persiste
+// ceo.js (misma clave que usa el clic en la elfa) → sobrevive a recargar.
+function wirePlayStop(root) {
+  const btn = root.querySelector('#mind-playstop');
+  const paint = () => {
+    const on = ceo.isEnabled();
+    btn.textContent = on ? '⏸ pausar cerebro' : '▶ reanudar cerebro';
+    btn.classList.toggle('paused', !on);
+  };
+  btn.onclick = () => { if (ceo.isEnabled()) ceo.disable(); else ceo.enable(); paint(); };
+  paint();
+}
+
+// ══ ciudad de fondo (motor de la app anfitriona, por debajo del mundo) ══════
+async function buildBackgroundCity(scene) {
+  if (!buildCityFn) return;
+  try {
+    const city = await buildCityFn(scene);
+    if (!city) return;
+    cityWrap = city.cityWrap; cityCity = city.cityCity; cityModel = city.cityModel;
+  } catch { /* sigue sin ciudad de fondo */ }
+}
+// haz de luz que baja hasta el fichero real en la ciudad + resalta su celda
+function fileBeam(path, kind) {
+  if (!cityModel || !cityCity || !S) return;
+  const rel = String(path).replace(/^\.?\//, '');
+  const f = cityModel.fileByRel.get(rel);
+  if (!f) return;
+  const local = new THREE.Vector3(f.box.cx, f.box.cy, f.box.cz);
+  const world = cityWrap.localToWorld(local.clone());
+  const top = world.clone(); top.y += 50;
+  const geo = new THREE.BufferGeometry().setFromPoints([top, world]);
+  const mat = new THREE.LineBasicMaterial({ color: kind === 'write' ? 0xff4d8d : 0x49e8ff, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false });
+  const line = new THREE.Line(geo, mat);
+  S.scene.add(line);
+  beams.push({ obj: line, born: elapsed, life: 1.4 });
+  fileActivity.push({ id: f.id, born: elapsed, life: 2.2 });
+}
+
+// ── mundo psicodélico ───────────────────────────────────────────────────────
+function buildScene(canvas, W, H) {
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+  renderer.setSize(W, H, false);
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(60, W / H, 0.1, 2000);
+  camera.position.set(0, 40, 150);
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = true; controls.dampingFactor = 0.06; controls.autoRotate = false;
+  controls.enablePan = false; controls.minDistance = 60; controls.maxDistance = 420;
+
+  const N = 14000;
+  const pos = new Float32Array(N * 3), rad = new Float32Array(N);
+  let s = 987654321; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647;
+  for (let i = 0; i < N; i++) {
+    const arm = Math.floor(rnd() * 4);
+    const r = Math.pow(rnd(), 0.6) * 120 + 6;
+    const a = arm * (Math.PI / 2) + r * 0.03 + (rnd() - 0.5) * 0.5;
+    const y = (rnd() - 0.5) * (14 - r * 0.06);
+    pos[i * 3] = Math.cos(a) * r; pos[i * 3 + 1] = y; pos[i * 3 + 2] = Math.sin(a) * r; rad[i] = r;
+  }
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+  geo.setAttribute('aRad', new THREE.BufferAttribute(rad, 1));
+  const mat = new THREE.ShaderMaterial({
+    uniforms: { uTime: { value: 0 }, uBass: { value: 0 }, uMid: { value: 0 } },
+    transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+    vertexShader: `uniform float uTime, uBass, uMid; attribute float aRad; varying vec3 vC;
+      vec3 hsv(float h){ vec3 k=vec3(1.,2./3.,1./3.); vec3 p=abs(fract(h+k)*6.-3.); return clamp(p-1.,0.,1.);}
+      float hash(vec3 p){ p=fract(p*0.3183099+0.1); p*=17.0; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); }
+      float vnoise(vec3 x){ vec3 i=floor(x),f=fract(x); f=f*f*(3.0-2.0*f);
+        return mix(mix(mix(hash(i+vec3(0,0,0)),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),
+                   mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z); }
+      float fbm(vec3 p){ float a=0.5,s=0.0; for(int i=0;i<4;i++){ s+=a*vnoise(p); p*=2.02; a*=0.5;} return s; }
+      void main(){
+        vec3 pos=position;
+        float n=fbm(pos*0.03 + vec3(0.0,uTime*0.18,0.0));
+        pos += normalize(pos+0.001) * (n-0.5) * (5.0 + uMid*4.0 + uBass*7.0);
+        float sw = uTime*0.14 + aRad*0.015 + uBass*0.18;
+        float cs=cos(sw), sn=sin(sw);
+        pos.xz = mat2(cs,-sn,sn,cs) * pos.xz;
+        pos *= (1.0 + uBass*0.05);
+        float h=fract(aRad*0.004+uTime*0.03+n*0.12); vC=hsv(h)*(1.3-aRad*0.004)*(0.95+uMid*0.18+uBass*0.12);
+        vec4 mv=modelViewMatrix*vec4(pos,1.0); gl_PointSize=(2.2+60.0/-mv.z)*(1.0+uBass*0.18); gl_Position=projectionMatrix*mv; }`,
+    fragmentShader: `varying vec3 vC; void main(){ vec2 d=gl_PointCoord-0.5; float m=smoothstep(0.5,0.0,length(d)); gl_FragColor=vec4(vC*2.0,m); }`,
+  });
+  const galaxy = new THREE.Points(geo, mat); scene.add(galaxy);
+  const core = new THREE.LineSegments(new THREE.WireframeGeometry(new THREE.IcosahedronGeometry(18, 1)),
+    new THREE.LineBasicMaterial({ color: 0xff4d8d, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false }));
+  scene.add(core);
+  const rings = [];
+  for (let i = 0; i < 24; i++) {
+    const ring = new THREE.Mesh(new THREE.TorusGeometry(22, 0.5, 8, 80),
+      new THREE.MeshBasicMaterial({ color: 0x7c5cff, transparent: true, opacity: 0.45, blending: THREE.AdditiveBlending, depthWrite: false }));
+    ring.rotation.x = Math.PI / 2; ring.position.y = -70 + i * 6; ring.userData.i = i;
+    scene.add(ring); rings.push(ring);
+  }
+  nodesGroup = new THREE.Group(); scene.add(nodesGroup);
+  starGroup = new THREE.Group(); scene.add(starGroup);
+  const composer = new EffectComposer(renderer);
+  composer.setSize(W, H); composer.addPass(new RenderPass(scene, camera));
+  const bloom = new UnrealBloomPass(new THREE.Vector2(W, H), 1.1, 0.5, 0.2);
+  composer.addPass(bloom); composer.addPass(new OutputPass());
+  return { renderer, scene, camera, controls, composer, bloom, mat, galaxy, core, rings };
+}
+
+export async function openMind() {
+  if (open) return;
+  open = true;
+  if (built) { overlay.style.display = ''; try { widget?.play(); } catch {} startLoop(); return; }
+
+  overlay = document.createElement('div');
+  overlay.id = 'mind-overlay';
+  overlay.innerHTML =
+    '<canvas id="mind-canvas"></canvas>' +
+    '<div id="mind-title">MENTE DE ELFFUSS</div>' +
+    '<div id="mind-legend"></div>' +
+    '<button id="mind-playstop" title="pausar/reanudar el cerebro"></button>' +
+    '<button id="mind-config" title="reprogramar el cerebro">⚙ cerebro</button>' +
+    '<button id="mind-history" title="ver todo lo que ha llegado">≡ historial</button>' +
+    '<button id="mind-close" title="salir">✕ salir</button>' +
+    '<div id="mind-anchors"></div><div id="mind-panel"></div><div id="mind-cfg"></div>' +
+    '<div id="mind-log"><div class="ml-head">Historial completo<button id="ml-x">✕</button></div><div id="mind-log-body"></div></div>';
+  document.body.appendChild(overlay);
+  wireConfig(overlay); wireHistory(overlay); wirePlayStop(overlay);
+  mountMusic(overlay);
+  anchors.length = 0; thoughtNodes = []; stars = []; lineBuf.clear();
+  rebuildWorld();
+
+  const canvas = overlay.querySelector('#mind-canvas');
+  S = buildScene(canvas, window.innerWidth, window.innerHeight);
+  buildBackgroundCity(S.scene);
+  await loadExistingThoughts();
+  await loadPersistedLog(); // el historial de «≡ historial» sobrevive a recargas
+
+  const ray = new THREE.Raycaster(), ptr = new THREE.Vector2();
+  let downXY = null;
+  canvas.addEventListener('pointerdown', e => { downXY = [e.clientX, e.clientY]; });
+  canvas.addEventListener('pointerup', e => {
+    if (!downXY) return; const moved = Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]); downXY = null;
+    if (moved > 5 || !thoughtNodes.length) return;
+    ptr.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
+    ray.setFromCamera(ptr, S.camera);
+    const hit = ray.intersectObjects(thoughtNodes)[0];
+    if (hit) selectThoughtNode(hit.object);
+  });
+
+  const onResize = () => {
+    const w = window.innerWidth, h = window.innerHeight;
+    S.renderer.setSize(w, h, false); S.composer.setSize(w, h); S.bloom.resolution.set(w, h);
+    S.camera.aspect = w / h; S.camera.updateProjectionMatrix();
+  };
+  window.addEventListener('resize', onResize); S.onResize = onResize;
+  overlay.querySelector('#mind-close').addEventListener('click', closeMind);
+  S.onKey = e => { if (e.key === 'Escape') closeMind(); };
+  document.addEventListener('keydown', S.onKey);
+  built = true;
+  startLoop();
+}
+
+// Etiquetas de propuestas: se proyectan del mundo 3D a la pantalla, así que
+// con muchas acumuladas acaban solapándose ilegibles según el ángulo de
+// cámara. Aquí: cap a las más cercanas y reparto anti-solape (empuja hacia
+// abajo la que choca con otra ya colocada), para que se apilen separadas.
+const MAX_LABELS = 14, LABEL_W = 90, LABEL_H = 20;
+function projectAnchors() {
+  const w = window.innerWidth, h = window.innerHeight, v = new THREE.Vector3();
+  const projected = [];
+  for (const a of anchors) {
+    v.copy(a.pos).project(S.camera);
+    if (v.z > 1) { a.el.style.display = 'none'; continue; } // detrás de la cámara
+    projected.push({ a, x: (v.x * 0.5 + 0.5) * w, y: (-v.y * 0.5 + 0.5) * h, depth: v.z });
+  }
+  projected.sort((p1, p2) => p1.depth - p2.depth); // las más cercanas a la cámara, prioridad
+  projected.forEach((p, i) => { p.a.el.style.display = i < MAX_LABELS ? '' : 'none'; });
+  const visible = projected.slice(0, MAX_LABELS).sort((p1, p2) => p1.x - p2.x || p1.y - p2.y);
+  const placed = [];
+  for (const p of visible) {
+    let y = p.y;
+    for (const q of placed) if (Math.abs(q.x - p.x) < LABEL_W && Math.abs(q.y - y) < LABEL_H) y = q.y + LABEL_H;
+    placed.push({ x: p.x, y });
+    p.a.el.style.left = p.x + 'px'; p.a.el.style.top = y + 'px';
+    p.a.el.style.transform = 'translate(-50%,-50%)';
+  }
+}
+const wob = (t, seed, freq = 0.1) => Math.sin(t * freq + seed) * 0.6 + Math.sin(t * freq * 0.43 + seed * 2.1) * 0.3 + Math.sin(t * freq * 0.19 + seed * 4.7) * 0.1;
+
+let elapsed = 0, lastMs = 0, smBass = 0, smMid = 0;
+function startLoop() {
+  if (raf) return;
+  const loop = (ms) => {
+    raf = requestAnimationFrame(loop);
+    const dt = lastMs ? (ms - lastMs) / 1000 : 0;
+    elapsed += dt; lastMs = ms;
+    const t = elapsed;
+    const beat = 60 / 138;
+    const bp = (t % beat) / beat;
+    const bassRaw = Math.pow(1 - bp, 3);
+    const midRaw = 0.5 + 0.5 * Math.sin(t * 6.0);
+    smBass += (bassRaw - smBass) * 0.05;
+    smMid += (midRaw - smMid) * 0.06;
+    S.mat.uniforms.uTime.value = t;
+    S.mat.uniforms.uBass.value = smBass;
+    S.mat.uniforms.uMid.value = smMid;
+    S.galaxy.rotation.y = t * 0.05;
+    S.galaxy.rotation.x = wob(t, 1.7, 0.05) * 0.15;
+    S.galaxy.rotation.z = wob(t, 5.2, 0.04) * 0.1;
+    S.galaxy.scale.setScalar(1 + smBass * 0.02);
+    const pulse = 1 + smBass * 0.05 + Math.sin(t * 0.9) * 0.03;
+    S.core.scale.setScalar(pulse); S.core.rotation.y = t * 0.16; S.core.rotation.x = t * 0.09;
+    S.core.position.x = wob(t, 3.1, 0.11) * 6; S.core.position.z = wob(t, 9.4, 0.09) * 6;
+    S.core.material.color.setHSL((t * 0.04) % 1, 0.9, 0.6);
+    for (const r of S.rings) {
+      r.position.y += 0.14 + smBass * 0.12;
+      if (r.position.y > 74) r.position.y -= 144;
+      r.position.x = wob(t, r.userData.i * 1.3 + 1, 0.08) * 3;
+      r.scale.setScalar(1 + smBass * 0.12 + Math.sin(t * 0.8 + r.userData.i) * 0.04);
+      r.material.opacity = 0.2 + smBass * 0.16;
+      r.material.color.setHSL((t * 0.05 + r.userData.i * 0.03) % 1, 0.85, 0.6);
+    }
+    for (let i = 0; i < thoughtNodes.length; i++) { const n = thoughtNodes[i]; n.rotation.y = t + i; n.scale.setScalar(1 + Math.sin(t * 2 + i) * 0.14); }
+    // estrellas: nacen (fade-in), viven, se apagan solas y se reciclan
+    for (let i = stars.length - 1; i >= 0; i--) {
+      const st = stars[i], age = t - st.born;
+      if (age > st.life) { starGroup.remove(st.obj); st.obj.material.map.dispose(); st.obj.material.dispose(); stars.splice(i, 1); continue; }
+      const fadeIn = Math.min(1, age / 0.5), fadeOut = Math.min(1, (st.life - age) / (st.life * 0.35));
+      st.obj.material.opacity = Math.min(fadeIn, fadeOut);
+      st.obj.position.y += st.up * dt;
+      st.obj.position.x += Math.sin(t * 0.6 + st.seed) * 0.3 * dt;
+    }
+    // haces sobre la ciudad + celdas de fichero resaltadas por actividad
+    for (let i = beams.length - 1; i >= 0; i--) {
+      const b = beams[i], age = t - b.born;
+      if (age > b.life) { S.scene.remove(b.obj); b.obj.geometry.dispose(); b.obj.material.dispose(); beams.splice(i, 1); continue; }
+      b.obj.material.opacity = 0.9 * Math.max(0, 1 - age / b.life);
+    }
+    if (cityCity) for (let i = fileActivity.length - 1; i >= 0; i--) {
+      const a = fileActivity[i], age = t - a.born;
+      if (age > a.life) { cityCity.paintFile(a.id, 0); fileActivity.splice(i, 1); continue; }
+      cityCity.paintFile(a.id, Math.max(0, 1 - age / a.life));
+    }
+    if (flyTo) {
+      const k = Math.min(1, (t - flyTo.t0) / flyTo.dur), e = easeInOut(k);
+      S.camera.position.lerpVectors(flyTo.fromPos, flyTo.toPos, e);
+      S.controls.target.lerpVectors(flyTo.fromTarget, flyTo.toTarget, e);
+      if (k >= 1) flyTo = null;
+    }
+    S.controls.update();
+    projectAnchors();
+    S.composer.render();
+  };
+  loop(performance.now());
+}
+
+export function closeMind() {
+  open = false;
+  if (raf) { cancelAnimationFrame(raf); raf = null; }
+  lastMs = 0;
+  try { widget?.pause(); } catch {}
+  if (overlay) overlay.style.display = 'none';
+}
+
+// para tests/depuración
+export function _debug() {
+  return {
+    starCount: stars.length, hasCity: !!cityCity, profileCount: ceo.getProfiles().length,
+    beamCount: beams.length, fileActivityCount: fileActivity.length,
+    cameraPos: S ? [S.camera.position.x, S.camera.position.y, S.camera.position.z] : null,
+    flying: !!flyTo,
+  };
+}
+export function _debugFocusOn(id) { const p = anchorMap.get(id); if (p) focusOn(p, 46); }

js/model-cache.js

@@ -0,0 +1,51 @@
+// Arranque de la caché de modelos: (1) pide almacenamiento PERSISTENTE para que
+// el navegador no desaloje los pesos cacheados, y (2) registra el service worker
+// (sw.js) y espera a que CONTROLE la página antes de descargar nada — así hasta
+// la primera descarga queda cacheada. Idempotente y a prueba de fallos.
+let started = null;
+
+export function ensureModelCache() {
+  if (started) return started;
+  started = (async () => {
+    try {
+      if (navigator.storage && navigator.storage.persist) {
+        const persisted = navigator.storage.persisted ? await navigator.storage.persisted() : false;
+        const ok = persisted || await navigator.storage.persist();
+        console.log('[elffuss] almacenamiento persistente:', ok);
+      }
+    } catch { /* no soportado */ }
+
+    if (!('serviceWorker' in navigator)) return false;
+    try {
+      await navigator.serviceWorker.register('sw.js');
+      await navigator.serviceWorker.ready;
+      if (!navigator.serviceWorker.controller) {
+        await new Promise(res => {
+          const t = setTimeout(res, 1500);
+          navigator.serviceWorker.addEventListener('controllerchange', () => { clearTimeout(t); res(); }, { once: true });
+        });
+      }
+      console.log('[elffuss] caché de modelos activa (service worker)');
+      return true;
+    } catch (e) {
+      console.warn('[elffuss] service worker no disponible:', e.message);
+      return false;
+    }
+  })();
+  return started;
+}
+
+// Espacio ocupado por la caché (para mostrarlo en Ajustes).
+export async function cacheEstimate() {
+  try {
+    const e = await navigator.storage.estimate();
+    return { usage: e.usage || 0, quota: e.quota || 0, persisted: navigator.storage.persisted ? await navigator.storage.persisted() : false };
+  } catch { return { usage: 0, quota: 0, persisted: false }; }
+}
+
+// Vaciar la caché de modelos (botón en Ajustes).
+export async function clearModelCache() {
+  if (navigator.serviceWorker && navigator.serviceWorker.controller)
+    navigator.serviceWorker.controller.postMessage('clear-models');
+  try { await caches.delete('elffuss-models-v1'); } catch { /* */ }
+}

js/model-config.js

@@ -0,0 +1,23 @@
+// Qué modelo carga el proveedor ONNX (transformers.js).
+//
+// Hoy: LFM2.5-1.2B-Instruct de Liquid (ago 850 MB q4, agentic-first) — ganador
+// del análisis empírico de coordinacion/CANDIDATOS-MODELO.md. Requiere tf.js v4.
+//
+// Mañana («modelo propio»): exporta tu fine-tune a ONNX con optimum,
+// sube las carpetas a web/models/<id>/ y pon selfHosted: true.
+// Ver README § «Modelo propio».
+export const MODEL = {
+  label: 'Elffuss LM (healed · LFM2.5-1.2B)',
+  id: 'KikoCis/Elffuss-LM-1.2B-ONNX',   // nuestro heal agéntico de LFM2.5 (tool-calls + apps)
+  dtype: 'q4',            // ¡NO q4f16! genera basura vía WebGPU (verificado en la bitácora)
+  selfHosted: false,
+  basePath: '/models/',   // solo se usa con selfHosted: true
+};
+// NO subir a Qwen2.5-1.5B: su q4 (1.8 GB) revienta onnxruntime-web al crear la
+// sesión (OOM del heap wasm de 4 GB, throw numérico ~3.3e9). Límite práctico
+// medido: ≤~1 GB en disco → ver coordinacion/ERRORES.md E-005 y NECESIDADES N-002.
+
+// Los modelos EXTERNOS (OpenAI, Anthropic, Ollama local y el servidor Ornith)
+// son configuración avanzada opt-in → js/settings.js + js/providers/api.js.
+// Ornith DEGENERA con temperatura baja (temp 1.0 / top_p 0.95 obligatorios) y
+// en la CPU del servidor razona lento → thinking desactivado por defecto.

js/providers/api.js

@@ -0,0 +1,116 @@
+// Proveedor genérico para APIs externas (configuración avanzada):
+//  - kind 'openai'    → /chat/completions (OpenAI, Ollama, llama-server…)
+//  - kind 'anthropic' → /v1/messages (Claude)
+// Las llamadas salen DIRECTAS del navegador del usuario al proveedor; la clave
+// no pasa por ningún servidor nuestro. Streaming SSE en ambos dialectos.
+import { packHistory } from '../context.js';
+
+let cfg = null;
+export let name = 'API';
+
+export function configure(c) { cfg = c; name = c.label; }
+
+export async function load() {
+  if (!cfg) throw new Error('proveedor sin configurar');
+  if (cfg.kind !== 'anthropic' && !cfg.apiKey && !cfg.baseURL.includes('localhost') && cfg.baseURL !== '/v1')
+    throw new Error('falta la clave de API (config avanzada)');
+}
+
+export async function chat(history, system, onToken = () => {}) {
+  return cfg.kind === 'anthropic'
+    ? anthropicChat(history, system, onToken)
+    : openaiChat(history, system, onToken);
+}
+
+// ---- OpenAI-compatible ----
+async function openaiChat(history, system, onToken) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (cfg.apiKey) headers.Authorization = 'Bearer ' + cfg.apiKey;
+  const body = {
+    model: cfg.model,
+    messages: [{ role: 'system', content: system }, ...packHistory(history, 3000)],
+    stream: true,
+    max_tokens: cfg.maxTokens || 1024,
+  };
+  if (cfg.temperature != null) body.temperature = cfg.temperature;
+  if (cfg.top_p != null) body.top_p = cfg.top_p;
+  if (cfg.thinking != null) body.chat_template_kwargs = { enable_thinking: cfg.thinking };
+
+  const res = await fetch(cfg.baseURL.replace(/\/$/, '') + '/chat/completions', {
+    method: 'POST', headers, body: JSON.stringify(body),
+  });
+  if (!res.ok || !res.body) throw new Error('HTTP ' + res.status + ' ' + (await res.text().catch(() => '')).slice(0, 120));
+
+  let out = '';
+  await readSSE(res.body, payload => {
+    if (payload === '[DONE]') return;
+    const d = JSON.parse(payload).choices?.[0]?.delta || {};
+    if (d.reasoning_content) onToken(d.reasoning_content);
+    if (d.content) { out += d.content; onToken(d.content); }
+  });
+  return out.trim();
+}
+
+// ---- Anthropic Messages ----
+async function anthropicChat(history, system, onToken) {
+  const res = await fetch(cfg.baseURL.replace(/\/$/, '') + '/v1/messages', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': cfg.apiKey,
+      'anthropic-version': '2023-06-01',
+      'anthropic-dangerous-direct-browser-access': 'true',
+    },
+    body: JSON.stringify({
+      model: cfg.model,
+      max_tokens: cfg.maxTokens || 1024,
+      system,
+      stream: true,
+      messages: forAnthropic(packHistory(history, 3000)),
+    }),
+  });
+  if (!res.ok || !res.body) throw new Error('HTTP ' + res.status + ' ' + (await res.text().catch(() => '')).slice(0, 120));
+
+  let out = '';
+  await readSSE(res.body, payload => {
+    const evt = JSON.parse(payload);
+    if (evt.type === 'content_block_delta' && evt.delta?.text) {
+      out += evt.delta.text; onToken(evt.delta.text);
+    }
+  });
+  return out.trim();
+}
+
+// Anthropic exige roles alternos empezando por user; fusiona consecutivos.
+function forAnthropic(msgs) {
+  const merged = [];
+  for (const m of msgs) {
+    const role = m.role === 'assistant' ? 'assistant' : 'user';
+    const last = merged[merged.length - 1];
+    if (last && last.role === role) last.content += '\n' + m.content;
+    else merged.push({ role, content: m.content });
+  }
+  if (merged[0]?.role === 'assistant') merged.unshift({ role: 'user', content: '(continúa)' });
+  return merged;
+}
+
+// Lector SSE común: invoca fn con el texto tras cada 'data:'.
+async function readSSE(stream, fn) {
+  const reader = stream.getReader();
+  const dec = new TextDecoder();
+  let buf = '';
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    let nl;
+    while ((nl = buf.indexOf('\n')) >= 0) {
+      const line = buf.slice(0, nl).trim();
+      buf = buf.slice(nl + 1);
+      if (!line.startsWith('data:')) continue;
+      const payload = line.slice(5).trim();
+      if (!payload) continue;
+      try { fn(payload); } catch { /* chunk parcial */ }
+    }
+  }
+}

js/providers/litert.js

@@ -0,0 +1,136 @@
+// Gemma-4 vía LiteRT-LM de Google (early preview, solo WebGPU).
+// Patrón copiado de la demo verificada en agentic-install
+// (lab/bitacora/posts/08-jspace-live.html).
+// DECISIÓN 2026-07-14: cerebro = Gemma BASE (builds oficiales litert-community,
+// formato artisan). NO fine-tune propio: `@litert-lm/core` exige empaquetado
+// artisan y nuestras conversiones no lo producen (E-010). La agéntica va por el
+// system prompt (agent.js), no por pesos.
+export let name = 'Gemma · LiteRT-LM';
+
+// Builds .litertlm elegibles. Los «-web» OFICIALES de Google (litert-community)
+// están exportados en formato artisan → SÍ cargan en el navegador (son los que
+// usaba la demo original). El healed de Elffuss es prefill_decode → hoy no carga
+// (E-010), por eso está gateado en el selector.
+export const MODELS = {
+  'gemma-e2b': { url: 'https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm/resolve/main/gemma-4-E2B-it-web.litertlm', label: 'Gemma-4 E2B', tag: '~2 GB · ligero' },
+  'gemma-e4b': { url: 'https://huggingface.co/litert-community/gemma-4-E4B-it-litert-lm/resolve/main/gemma-4-E4B-it-web.litertlm', label: 'Gemma-4 E4B', tag: '~4 GB · el mejor' },
+  'elffuss-e4b': { url: 'https://huggingface.co/KikoCis/Elffuss-Gemma4-E4B-litert/resolve/main/model.litertlm', label: 'Elffuss E4B (healed)', tag: 'modelo propio' },
+};
+
+let MODEL_URL = MODELS['gemma-e2b'].url;
+let curLabel = MODELS['gemma-e2b'].label;
+export function configure(key) {
+  const m = MODELS[key] || MODELS['gemma-e2b'];
+  MODEL_URL = m.url; curLabel = m.label; name = 'Gemma · LiteRT-LM (' + m.label + ')';
+}
+
+let engine = null, conversation = null, sentCount = 0, sys = '';
+
+// Contexto: probamos de mayor a menor hasta el máximo que acepten el bundle y
+// la memoria GPU — así el contexto queda al tope permitido de serie.
+const CTX_LADDER = [32768, 16384, 8192, 4096];
+export let ctxTokens = 4096; // efectivo tras load() (la UI puede leerlo)
+
+export async function load(onProgress = () => {}) {
+  if (!navigator.gpu) throw new Error('LiteRT-LM necesita WebGPU (Chrome/Edge modernos)');
+  // navigator.gpu puede existir como API sin adaptador real (algunos Linux/
+  // drivers, entornos sandboxed…) — comprobarlo YA evita bajar 2-4 GB para
+  // descubrir el fallo solo al crear el motor, al final de todo.
+  let adapter = null;
+  try { adapter = await navigator.gpu.requestAdapter(); } catch { /* sin adaptador */ }
+  if (!adapter) throw new Error('No hay un adaptador WebGPU real disponible (la API existe pero no hay GPU accesible) — prueba con Elffuss LM, que corre en CPU/wasm.');
+  const litertlm = await import('https://cdn.jsdelivr.net/npm/@litert-lm/core/+esm');
+  // El .litertlm lo descargamos NOSOTROS (cache-first en Cache Storage) y se lo
+  // pasamos a Engine.create como Blob (la API acepta string|Blob|ReadableStream).
+  // Motivo: el fetch interno de LiteRT baja el peso con XHR+Range desde un WORKER
+  // que el service worker no intercepta → antes se re-descargaba SIEMPRE. Bajándolo
+  // aquí queda cacheado de verdad y damos progreso real en MB.
+  const model = await cachedModelBlob(MODEL_URL, onProgress);
+  onProgress('Preparando el modelo IA en la GPU…');
+  let lastErr = null;
+  for (const n of CTX_LADDER) {
+    try {
+      engine = await litertlm.Engine.create({ model, mainExecutorSettings: { maxNumTokens: n } });
+      ctxTokens = n;
+      lastErr = null;
+      break;
+    } catch (e) {
+      lastErr = e;
+      // Errores de formato/carga no dependen del contexto: no insistir con la escalera.
+      if (/not supported|tokenizer|format/i.test(String(e?.message))) throw e;
+      onProgress(`Contexto ${n} no cabe, probando ${n / 2}…`);
+    }
+  }
+  if (lastErr) throw lastErr;
+}
+
+const MODEL_CACHE = 'elffuss-models-v1';
+// Devuelve el .litertlm como Blob desde Cache Storage; si no está, lo descarga
+// con progreso real y lo cachea (persistente). Ante cualquier fallo, devuelve la
+// URL para que LiteRT lo baje por su cuenta (nunca bloquea la carga del modelo).
+export async function cachedModelBlob(url, onProgress = () => {}) {
+  if (!self.caches) return url;
+  try {
+    const cache = await caches.open(MODEL_CACHE);
+    const hit = await cache.match(url);
+    if (hit) { onProgress('Cargando el modelo IA desde caché (sin descargar)…'); return await hit.blob(); }
+    const net = await fetch(url);
+    if (!net.ok || !net.body) return url;
+    const total = +net.headers.get('content-length') || 0;
+    const t0 = performance.now();
+    const [prog, toCache] = net.body.tee();
+    (async () => {
+      const r = prog.getReader(); let loaded = 0;
+      for (;;) { const { done, value } = await r.read(); if (done) break; loaded += value.length; onProgress(fmtBytes(loaded, total, t0)); }
+    })().catch(() => {});
+    const headers = { 'Content-Type': 'application/octet-stream' };
+    if (total) headers['Content-Length'] = String(total);
+    await cache.put(url, new Response(toCache, { headers }));
+    const cached = await cache.match(url);
+    return cached ? await cached.blob() : url;
+  } catch { return url; }
+}
+function fmtBytes(loaded, total, t0) {
+  const mb = n => (n / 1048576).toFixed(0);
+  const secs = (performance.now() - t0) / 1000;
+  const spd = secs > 0 ? (loaded / 1048576 / secs).toFixed(1) : '0';
+  return total
+    ? `Descargando el modelo IA… ${mb(loaded)}/${mb(total)} MB (${spd} MB/s) · se cachea para la próxima vez`
+    : `Descargando el modelo IA… ${mb(loaded)} MB (${spd} MB/s)`;
+}
+
+// Liberar el modelo (vigilante de RAM).
+export async function unload() {
+  try { engine?.close?.(); } catch { /* mejor esfuerzo */ }
+  engine = null; conversation = null; sentCount = 0;
+}
+
+export async function chat(history, system, onToken = () => {}) {
+  if (!engine) throw new Error('Modelo no cargado');
+  // Comparar solo la parte estática del prompt: el CONTEXTO AHORA va al final
+  // y cambia cada turno — recrear la conversación tiraría el KV-cache.
+  const sysKey = system.slice(0, 200);
+  if (!conversation || sysKey !== sys) {
+    sys = sysKey;
+    conversation = await engine.createConversation({
+      preface: { messages: [{ role: 'system', content: system }] },
+      // Exprimir el navegador: no persistir los tokens de canal (tool-call/thinking)
+      // del modelo en el KV-cache → libera KV → más contexto útil. Y prefill del
+      // system prompt al crear la conversación → primera respuesta más rápida.
+      filterChannelContentFromKvCache: true,
+      prefillPrefaceOnInit: true,
+    });
+    sentCount = 0;
+  }
+  // La conversación LiteRT mantiene su propio KV-cache: enviamos solo lo nuevo.
+  const fresh = history.slice(sentCount).filter(m => m.role === 'user');
+  sentCount = history.length;
+  const text = fresh.map(m => m.content).join('\n') || history.at(-1).content;
+
+  let out = '';
+  for await (const chunk of conversation.sendMessageStreaming(text)) {
+    for (const item of (chunk.content || []))
+      if (item.type === 'text') { out += item.text; onToken(item.text); }
+  }
+  return out.trim();
+}

js/providers/onnx.js

@@ -0,0 +1,63 @@
+// Modelo vía ONNX Runtime Web (transformers.js, WebGPU con fallback a wasm).
+// Patrón copiado de la demo verificada en agentic-install
+// (lab/bitacora/posts/08-jspace-live.html): dtype 'q4' obligatorio — q4f16
+// genera basura vía WebGPU incluso con shader-f16.
+import { MODEL } from '../model-config.js';
+import { packHistory } from '../context.js';
+
+export const name = MODEL.label;
+let generator = null, TextStreamer = null;
+
+export async function load(onProgress = () => {}) {
+  if (generator) return; // un solo modelo: nunca recargar/duplicar la sesión
+  const tf = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@4');
+  TextStreamer = tf.TextStreamer;
+  if (MODEL.selfHosted) {
+    tf.env.allowRemoteModels = false;
+    tf.env.localModelPath = MODEL.basePath;
+  }
+  // navigator.gpu puede EXISTIR como API sin que haya un adaptador real
+  // (ciertos Linux/drivers, entornos sandboxed, navegadores headless…) — usar
+  // solo la presencia del objeto como señal hace que pipeline() intente
+  // WebGPU, falle con "Failed to get GPU adapter" DESPUÉS de descargar el
+  // modelo entero, y en preloadModel() eso encadena a probar Gemma (varios
+  // GB) para nada. Comprobar el adaptador de verdad antes de elegir.
+  let device = 'wasm';
+  if (navigator.gpu) {
+    try { device = (await navigator.gpu.requestAdapter()) ? 'webgpu' : 'wasm'; }
+    catch { device = 'wasm'; }
+  }
+  generator = await tf.pipeline('text-generation', MODEL.id, {
+    device,
+    dtype: MODEL.dtype,
+    progress_callback: onProgress,
+  });
+}
+
+// Liberar el modelo (vigilante de RAM): suelta los buffers wasm/WebGPU.
+export async function unload() {
+  try { await generator?.dispose?.(); } catch { /* mejor esfuerzo */ }
+  generator = null;
+}
+
+export async function chat(history, system, onToken = () => {}) {
+  if (!generator) throw new Error('Modelo no cargado');
+  // ACE-lite: eviction por relevancia. Presupuesto amplio (LFM2.5 aguanta
+  // contexto largo); el tope POR MENSAJE (context.js) evita que un README
+  // gigante dispare «Too many tokens requested».
+  const messages = [{ role: 'system', content: system }, ...packHistory(history, 5000)];
+  const streamer = new TextStreamer(generator.tokenizer, {
+    skip_prompt: true,
+    skip_special_tokens: true,
+    callback_function: onToken,
+  });
+  const out = await generator(messages, {
+    max_new_tokens: 1024,
+    do_sample: false,          // determinista: los tool calls JSON lo agradecen
+    repetition_penalty: 1.1,
+    return_full_text: false,
+    streamer,
+  });
+  const gen = out[0].generated_text;
+  return (typeof gen === 'string' ? gen : gen.at(-1).content).trim();
+}

js/providers/rules.js

@@ -0,0 +1,48 @@
+// Modo básico de Elffuss Code: órdenes deterministas sin modelo.
+export const name = 'Básico (sin modelo)';
+export async function load() {}
+
+const call = obj => '```tool\n' + JSON.stringify(obj) + '\n```';
+
+const HELP = `Estoy en modo básico (sin modelo). Entiendo:
+• «árbol» / «qué hay en el proyecto»
+• «lee <archivo>» · «abre <archivo>»
+• «busca <texto>»
+• «escribe <archivo>: <contenido>»
+Para programar de verdad, carga el modelo local (selector 🧠) o configura uno en ⚙️.`;
+
+export async function chat(history, systemPrompt) {
+  const last = history[history.length - 1];
+  const text = (last?.content || '').trim();
+
+  // 🎯 Modo Objetivo (goal.js) también funciona en modo básico: un plan fijo
+  // de 2 tareas (explorar + escribir), para poder probar/usar el planificador
+  // sin depender de un modelo real cargado.
+  if (/^ROL: PLANIFICADOR/.test(systemPrompt || '')) {
+    return JSON.stringify({
+      plan: 'Plan básico (sin modelo) para: ' + text.slice(0, 60),
+      tasks: [
+        { title: 'Explorar el proyecto', description: 'Mira el árbol del proyecto para entender qué hay.' },
+        { title: 'Escribir el resultado', description: 'escribe objetivo.txt: ' + text },
+      ],
+    });
+  }
+
+  if (text.startsWith('[resultado')) {
+    const body = text.slice(text.indexOf('\n') + 1).trim();
+    return body.startsWith('ERROR:') ? 'No pude: ' + body.slice(6).trim() : body;
+  }
+
+  const t = text.toLowerCase();
+  if (/(árbol|arbol|estructura|qué hay|que hay)/.test(t))
+    return call({ tool: 'code.tree', args: {} });
+  const mRead = text.match(/(?:lee|abre|muestra|cat)\s+([\w./-]+\.\w+)/i);
+  if (mRead) return call({ tool: 'code.read', args: { path: mRead[1] } });
+  const mSearch = text.match(/busca(?:r)?\s+(?:d[oó]nde\s+)?(?:se\s+\w+\s+)?["«']?([^"»']{2,60})["»']?$/i);
+  if (mSearch) return call({ tool: 'code.search', args: { query: mSearch[1].trim() } });
+  const mWrite = text.match(/escribe\s+([\w./-]+\.\w+)\s*[:=]\s*([\s\S]+)/i);
+  if (mWrite) return call({ tool: 'code.write', args: { path: mWrite[1], content: mWrite[2] } });
+
+  if (/^(hola|buenas|hey|hi)\b/.test(t)) return '¡Hola! ' + HELP;
+  return HELP;
+}

js/settings.js

@@ -0,0 +1,59 @@
+// Configuración avanzada de proveedores externos (opt-in). Elffuss corre en
+// LOCAL por defecto; esto solo se usa si el usuario lo activa a mano.
+// Las claves viven en localStorage de SU navegador y nunca salen de aquí
+// (las llamadas van directas del navegador al proveedor).
+const KEY = 'elffusscode.providers';
+
+// Plantillas de proveedores externos. `kind` decide el dialecto de API.
+const DEFAULTS = {
+  openai: {
+    kind: 'openai', label: 'OpenAI', enabled: false,
+    baseURL: 'https://api.openai.com/v1', model: 'gpt-4o-mini', apiKey: '',
+    help: 'Tu clave sk-… Se queda en tu navegador. OpenAI permite llamadas directas (CORS).',
+  },
+  anthropic: {
+    kind: 'anthropic', label: 'Anthropic (Claude)', enabled: false,
+    baseURL: 'https://api.anthropic.com', model: 'claude-sonnet-5', apiKey: '',
+    help: 'Tu clave sk-ant-… Se envía la cabecera de acceso directo desde navegador.',
+  },
+  ollama: {
+    kind: 'openai', label: 'Ollama (local)', enabled: false,
+    baseURL: 'http://localhost:11434/v1', model: 'llama3.2', apiKey: 'ollama',
+    help: 'Ollama en tu máquina. Arráncalo con OLLAMA_ORIGINS=* para permitir el navegador.',
+  },
+  server: {
+    kind: 'openai', label: 'Servidor Elffuss (Ornith 9B)', enabled: false,
+    baseURL: 'https://elffuss-claw.utopiaia.com/v1', model: 'ornith-9b', apiKey: '',
+    temperature: 1.0, top_p: 0.95, thinking: false,
+    help: 'El modelo grande en el servidor de UtopiaIA. No es local: los mensajes salen de tu máquina.',
+  },
+};
+
+function load() {
+  let saved = {};
+  try { saved = JSON.parse(localStorage.getItem(KEY) || '{}'); } catch { /* corrupto */ }
+  const out = {};
+  for (const [id, def] of Object.entries(DEFAULTS)) out[id] = { ...def, ...saved[id] };
+  return out;
+}
+
+export function configs() { return load(); }
+export function get(id) { return load()[id]; }
+
+export function update(id, patch) {
+  const all = load();
+  all[id] = { ...all[id], ...patch };
+  // no persistir los campos de ayuda estáticos
+  const slim = {};
+  for (const [k, v] of Object.entries(all))
+    slim[k] = { enabled: v.enabled, baseURL: v.baseURL, model: v.model, apiKey: v.apiKey };
+  localStorage.setItem(KEY, JSON.stringify(slim));
+  return all[id];
+}
+
+// Externos habilitados → opciones del selector, como ext:<id>.
+export function enabledExternals() {
+  return Object.entries(load())
+    .filter(([, c]) => c.enabled)
+    .map(([id, c]) => ({ id: 'ext:' + id, label: c.label + (id === 'ollama' || c.baseURL.startsWith('http://localhost') ? ' · local' : ' · nube') }));
+}

js/shell.js

@@ -0,0 +1,412 @@
+// Shell del proyecto: un intérprete POSIX-lite que opera SOBRE LOS FICHEROS
+// REALES de la carpeta abierta (el FileSystemDirectoryHandle de code.js). No es
+// una emulación: `ls`, `cat`, `grep`, `mkdir`, `rm`, `echo > fichero`… tocan el
+// disco de verdad y el editor/árbol se refrescan. Es el mismo mundo que ve la
+// elfa, así que también lo exponemos como herramienta `terminal.run`.
+//
+// Runtimes reales (node/npm/python): SOLO con un Bridge local conectado (ver
+// bridge.js) se ejecutan de VERDAD en tu máquina — ver `capabilities()`.
+import * as code from './tools/code.js';
+import * as bridgeClient from './bridge.js';
+
+let cwd = [];                 // directorio actual, segmentos relativos a la raíz
+const history = [];           // historial de comandos (para ↑/↓ y `history`)
+let onFsChange = () => {};     // el IDE refresca árbol/pestañas tras mutaciones
+let onOpenFile = () => {};     // `open <fichero>` lo abre en Monaco
+
+export function setHooks({ fsChange, openFile } = {}) {
+  if (fsChange) onFsChange = fsChange;
+  if (openFile) onOpenFile = openFile;
+}
+export function reset() { cwd = []; }
+export function cwdString() { return '/' + cwd.join('/'); }
+export function getHistory() { return history.slice(); }
+
+// ¿Podemos lanzar runtimes reales? Solo por Bridge local conectado de verdad
+// (WebContainers requiere licencia comercial de StackBlitz en producción —
+// descartado por ahora, ver bridge.js).
+export function capabilities() {
+  const bridge = bridgeClient.isConnected();
+  return { crossOriginIsolated: !!self.crossOriginIsolated, webcontainers: false, bridge, realRuntime: bridge };
+}
+
+// ---- resolución de rutas ----
+// Combina un argumento con el cwd y normaliza . y .. → segmentos desde la raíz.
+function resolve(arg = '') {
+  const base = arg.startsWith('/') ? [] : [...cwd];
+  for (const seg of String(arg).split('/')) {
+    if (!seg || seg === '.') continue;
+    if (seg === '..') base.pop();
+    else base.push(seg);
+  }
+  return base;
+}
+const root = () => { const h = code.handle(); if (!h) throw new Error('no hay proyecto abierto'); return h; };
+
+async function dirHandle(segs, { create = false } = {}) {
+  let dir = root();
+  for (const s of segs) dir = await dir.getDirectoryHandle(s, { create });
+  return dir;
+}
+async function parentAndName(segs) {
+  const s = [...segs]; const name = s.pop();
+  if (name == null) throw new Error('ruta vacía');
+  return { parent: await dirHandle(s), name };
+}
+async function fileHandle(segs, opts) {
+  const { parent, name } = await parentAndName(segs);
+  return parent.getFileHandle(name, opts);
+}
+async function readText(segs) { return (await (await fileHandle(segs)).getFile()).text(); }
+async function writeText(segs, text) {
+  const fh = await fileHandle(segs, { create: true });
+  const w = await fh.createWritable(); await w.write(text); await w.close();
+  code.invalidateFileList?.(); onFsChange();
+}
+// ¿ruta es directorio? (para `ls fichero`, `grep dir`, `cd`)
+async function kindOf(segs) {
+  if (!segs.length) return 'directory';
+  const { parent, name } = await parentAndName(segs);
+  try { await parent.getDirectoryHandle(name); return 'directory'; } catch {}
+  try { await parent.getFileHandle(name); return 'file'; } catch {}
+  return null;
+}
+
+const IGNORE = new Set(['node_modules', '.git', 'dist', 'build', 'target', '__pycache__', '.next', 'venv', '.venv', '.DS_Store']);
+const CYAN = s => `\x1b[36m${s}\x1b[0m`, RED = s => `\x1b[31m${s}\x1b[0m`, DIM = s => `\x1b[90m${s}\x1b[0m`, GRN = s => `\x1b[32m${s}\x1b[0m`, YEL = s => `\x1b[33m${s}\x1b[0m`;
+const globToRe = g => new RegExp('^' + g.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*').replace(/\?/g, '.') + '$', 'i');
+const human = n => n < 1024 ? n + 'B' : n < 1048576 ? (n / 1024).toFixed(1) + 'K' : (n / 1048576).toFixed(1) + 'M';
+
+// ---- comandos: (args[], stdin) → stdout (string). Lanzan Error en fallo. ----
+const CMDS = {
+  help() {
+    return 'Elffuss shell — opera sobre los ficheros REALES del proyecto:\n' +
+      '  ' + GRN('ls') + ' [-la] [ruta]   ' + GRN('cd') + ' [ruta]     ' + GRN('pwd') + '        ' + GRN('tree') + ' [ruta]\n' +
+      '  ' + GRN('cat') + ' <f...>        ' + GRN('head') + '/' + GRN('tail') + ' [-n N] ' + GRN('wc') + ' [-l]    ' + GRN('grep') + ' [-in] <patrón> [ruta]\n' +
+      '  ' + GRN('find') + ' [ruta] [-name g]  ' + GRN('echo') + ' <txt> [> f]  ' + GRN('mkdir') + '/' + GRN('touch') + '/' + GRN('rm') + ' [-r]/' + GRN('mv') + '/' + GRN('cp') + '\n' +
+      '  ' + GRN('open') + ' <f> (en el editor)  ' + GRN('git') + ' status|log|branch   ' + GRN('history') + '   ' + GRN('clear') + '\n' +
+      '  Soporta tuberías ' + YEL('|') + ' y redirección ' + YEL('>') + ' ' + YEL('>>') + '.  ' +
+      (capabilities().bridge ? GRN('node/npm/python disponibles (Bridge local).') : DIM('node/npm/python: conecta el Bridge local (⚙ Ajustes).'));
+  },
+  pwd() { return cwdString(); },
+  async cd(args) {
+    const target = args.find(a => !a.startsWith('-'));
+    if (!target || target === '~') { cwd = []; return ''; }
+    const segs = resolve(target);
+    if (await kindOf(segs) !== 'directory') throw new Error(`cd: no existe el directorio: ${target}`);
+    cwd = segs; return '';
+  },
+  async ls(args) {
+    const long = args.some(a => /^-\w*l/.test(a)), all = args.some(a => /^-\w*a/.test(a));
+    const target = args.find(a => !a.startsWith('-')) || '';
+    const segs = resolve(target);
+    const k = await kindOf(segs);
+    if (k === 'file') return target;                       // ls de un fichero
+    if (k !== 'directory') throw new Error(`ls: no existe: ${target || '.'}`);
+    const dir = await dirHandle(segs);
+    const rows = [];
+    for await (const e of dir.values()) {
+      if (!all && (e.name.startsWith('.') || IGNORE.has(e.name))) continue;
+      rows.push(e);
+    }
+    rows.sort((a, b) => (a.kind !== b.kind ? (a.kind === 'directory' ? -1 : 1) : a.name.localeCompare(b.name)));
+    if (!long) return rows.map(e => e.kind === 'directory' ? CYAN(e.name + '/') : e.name).join('  ');
+    const out = [];
+    for (const e of rows) {
+      if (e.kind === 'directory') out.push(`${DIM('dir ')}      -  ${CYAN(e.name + '/')}`);
+      else { const f = await e.getFile(); out.push(`${DIM('file')} ${human(f.size).padStart(6)}  ${e.name}`); }
+    }
+    return out.join('\n');
+  },
+  async cat(args, stdin) {
+    const files = args.filter(a => !a.startsWith('-'));
+    if (!files.length) return stdin;
+    const parts = [];
+    for (const f of files) {
+      try { parts.push(await readText(resolve(f))); }
+      catch { throw new Error(`cat: ${f}: no existe`); }
+    }
+    return parts.join('');
+  },
+  async head(args, stdin) {
+    const n = +(args[args.indexOf('-n') + 1]) || 10;
+    const f = args.find(a => !a.startsWith('-') && !/^\d+$/.test(a));
+    const text = f ? await readText(resolve(f)) : stdin;
+    return text.split('\n').slice(0, n).join('\n');
+  },
+  async tail(args, stdin) {
+    const n = +(args[args.indexOf('-n') + 1]) || 10;
+    const f = args.find(a => !a.startsWith('-') && !/^\d+$/.test(a));
+    const text = f ? await readText(resolve(f)) : stdin;
+    const lines = text.split('\n'); return lines.slice(Math.max(0, lines.length - n)).join('\n');
+  },
+  async wc(args, stdin) {
+    const onlyLines = args.includes('-l');
+    const f = args.find(a => !a.startsWith('-'));
+    const text = f ? await readText(resolve(f)) : stdin;
+    const lines = text === '' ? 0 : text.split('\n').length;
+    if (onlyLines) return String(lines);
+    const words = (text.match(/\S+/g) || []).length;
+    return `${lines}\t${words}\t${text.length}${f ? '\t' + f : ''}`;
+  },
+  async tree(args) {
+    const target = args.find(a => !a.startsWith('-')) || '';
+    return code.tree({ path: resolve(target).join('/'), depth: 3 });
+  },
+  async grep(args, stdin) {
+    const insensitive = args.some(a => /^-\w*i/.test(a)), numbers = args.some(a => /^-\w*n/.test(a));
+    const rest = args.filter(a => !a.startsWith('-'));
+    const pattern = rest.shift();
+    if (!pattern) throw new Error('grep: falta el patrón');
+    const re = new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), insensitive ? 'i' : '');
+    const hit = (line, i, prefix = '') => (prefix ? CYAN(prefix) + ':' : '') + (numbers ? DIM(i + 1 + ':') : '') + line.replace(re, m => `\x1b[1;31m${m}\x1b[0m`);
+    if (!rest.length) {                                   // desde stdin (tubería)
+      return stdin.split('\n').map((l, i) => re.test(l) ? hit(l, i) : null).filter(x => x != null).join('\n');
+    }
+    const out = []; let scanned = 0;
+    const scanText = (text, label) =>
+      text.split('\n').forEach((l, i) => { if (re.test(l) && out.length < 400) out.push(hit(l, i, label)); });
+    for (const target of rest) {
+      const segs = resolve(target);
+      const k = await kindOf(segs);
+      if (k === 'file') scanText(await readText(segs).catch(() => ''), target);
+      else if (k === 'directory') {                       // recursivo
+        const walk = async (dir, prefix) => {
+          for await (const e of dir.values()) {
+            if (IGNORE.has(e.name) || out.length >= 400 || scanned > 600) continue;
+            const p = prefix ? prefix + '/' + e.name : e.name;
+            if (e.kind === 'directory') { await walk(e, p); continue; }
+            const f = await e.getFile();
+            if (f.size < 400_000) { scanned++; scanText(await f.text(), (target === '.' ? '' : target.replace(/\/$/, '') + '/') + p); }
+          }
+        };
+        await walk(await dirHandle(segs), '');
+      } else throw new Error(`grep: ${target}: no existe`);
+    }
+    return out.join('\n') || DIM('(sin coincidencias)');
+  },
+  async find(args) {
+    const nameIdx = args.indexOf('-name');
+    const glob = nameIdx >= 0 ? globToRe(args[nameIdx + 1]) : null;
+    const start = args.find(a => !a.startsWith('-') && a !== (nameIdx >= 0 ? args[nameIdx + 1] : null)) || '.';
+    const out = []; let count = 0;
+    const walk = async (dir, prefix) => {
+      for await (const e of dir.values()) {
+        if (IGNORE.has(e.name) || count > 2000) continue;
+        const p = prefix ? prefix + '/' + e.name : e.name;
+        count++;
+        if (!glob || glob.test(e.name)) out.push(e.kind === 'directory' ? CYAN(p) : p);
+        if (e.kind === 'directory') await walk(e, p);
+      }
+    };
+    const segs = resolve(start === '.' ? '' : start);
+    if (await kindOf(segs) !== 'directory') throw new Error(`find: ${start}: no es un directorio`);
+    await walk(await dirHandle(segs), start === '.' ? '' : start);
+    return out.join('\n') || DIM('(nada)');
+  },
+  echo(args) { return args.join(' ').replace(/^["']|["']$/g, ''); },
+  async mkdir(args) {
+    const t = args.find(a => !a.startsWith('-')); if (!t) throw new Error('mkdir: falta el nombre');
+    await dirHandle(resolve(t), { create: true }); onFsChange(); return '';
+  },
+  async touch(args) {
+    const t = args.find(a => !a.startsWith('-')); if (!t) throw new Error('touch: falta el nombre');
+    const segs = resolve(t);
+    if (await kindOf(segs) == null) await writeText(segs, ''); else onFsChange();
+    return '';
+  },
+  // Soporta comodines (*, ?) y varios objetivos a la vez: `rm mejoras-*.md`.
+  // Sin esto, un patrón con * se buscaba como nombre LITERAL → «no existe»
+  // aunque hubiera decenas de coincidencias reales (bug real, visto en uso).
+  async rm(args) {
+    const recursive = args.some(a => /^-\w*r/.test(a));
+    const targets = args.filter(a => !a.startsWith('-'));
+    if (!targets.length) throw new Error('rm: falta la ruta');
+    const removed = [];
+    for (const t of targets) {
+      if (/[*?]/.test(t)) {
+        const parts = t.split('/'); const pattern = parts.pop();
+        const dirSegs = resolve(parts.join('/'));
+        let dir; try { dir = await dirHandle(dirSegs); } catch { throw new Error(`rm: ${t}: no existe el directorio`); }
+        const re = globToRe(pattern);
+        const matches = [];
+        for await (const e of dir.values()) if (re.test(e.name)) matches.push(e);
+        if (!matches.length) throw new Error(`rm: ${t}: sin coincidencias`);
+        for (const e of matches) {
+          if (e.kind === 'directory' && !recursive) throw new Error(`rm: ${e.name}: es un directorio (usa -r)`);
+          await dir.removeEntry(e.name, { recursive });
+          removed.push((dirSegs.length ? dirSegs.join('/') + '/' : '') + e.name);
+        }
+      } else {
+        const segs = resolve(t); const k = await kindOf(segs);
+        if (k == null) throw new Error(`rm: ${t}: no existe`);
+        if (k === 'directory' && !recursive) throw new Error(`rm: ${t}: es un directorio (usa -r)`);
+        const { parent, name } = await parentAndName(segs);
+        await parent.removeEntry(name, { recursive });
+        removed.push(t);
+      }
+    }
+    code.invalidateFileList?.(); onFsChange();
+    return removed.length > 1 ? `Eliminados ${removed.length}: ${removed.join(', ')}` : '';
+  },
+  async cp(args) {
+    const rest = args.filter(a => !a.startsWith('-'));
+    const [src, dst] = rest; if (!src || !dst) throw new Error('cp: uso: cp <origen> <destino>');
+    await copyPath(resolve(src), resolve(dst)); onFsChange(); return '';
+  },
+  async mv(args) {
+    const rest = args.filter(a => !a.startsWith('-'));
+    const [src, dst] = rest; if (!src || !dst) throw new Error('mv: uso: mv <origen> <destino>');
+    await copyPath(resolve(src), resolve(dst));
+    const { parent, name } = await parentAndName(resolve(src));
+    await parent.removeEntry(name, { recursive: true });
+    code.invalidateFileList?.(); onFsChange(); return '';
+  },
+  async open(args) {
+    const t = args.find(a => !a.startsWith('-')); if (!t) throw new Error('open: falta el fichero');
+    const segs = resolve(t);
+    if (await kindOf(segs) !== 'file') throw new Error(`open: ${t}: no es un fichero`);
+    onOpenFile(segs.join('/')); return DIM(`abriendo ${segs.join('/')} en el editor…`);
+  },
+  history() { return history.map((h, i) => `${DIM((i + 1) + '')}  ${h}`).join('\n'); },
+  whoami() { return 'elffuss'; },
+  date() { return new Date().toString(); },
+  clear() { return '\f'; },                               // la UI lo interpreta
+  async git(args) {
+    const sub = args[0];
+    const info = await code.gitInfo();
+    if (!info.isRepo) return DIM('no es un repositorio git (no hay .git)');
+    if (sub === 'branch' || !sub) return '* ' + GRN(info.branch);
+    if (sub === 'status') return `En la rama ${GRN(info.branch)}\n` + (info.lastCommit ? DIM(`último commit: ${info.lastCommit.msg}`) : DIM('sin commits todavía')) + '\n' + DIM('(git de solo lectura aquí; commit/push reales no disponibles todavía)');
+    if (sub === 'log') return info.lastCommit ? `${YEL('commit ' + info.branch)}\nAutor: ${info.lastCommit.author}\nFecha: ${new Date(info.lastCommit.when).toLocaleString()}\n\n    ${info.lastCommit.msg}` : DIM('sin commits');
+    return DIM(`git ${sub}: de solo lectura aquí (branch/status/log).`);
+  },
+};
+// tokenize() ya quitó las comillas originales (p.ej. -e "console.log(1)" llega
+// como el arg SUELTO console.log(1)) — para reenviarlo al bridge (que lo pasa
+// a `sh -c`) hay que re-entrecomillarlo, si no un espacio o un paréntesis
+// rompe el comando al otro lado (bug real: -e "console.log('x')" fallaba).
+const shellQuote = s => `'${String(s).replace(/'/g, "'\\''")}'`;
+// runtimes REALES solo si hay un Bridge local conectado (⚙ Ajustes) — se
+// ejecutan en tu máquina de verdad, en la carpeta configurada del bridge (no
+// en el cwd virtual del proyecto).
+for (const r of ['node', 'npm', 'npx', 'python', 'python3', 'pip', 'yarn', 'pnpm', 'bun', 'deno', 'cargo', 'go'])
+  CMDS[r] = async (args) => {
+    if (!bridgeClient.isConnected()) {
+      throw new Error(`${r}: runtime real no disponible.\n${DIM('Descarga y arranca el Bridge local (⚙ Ajustes → 🔌 Bridge local) para ejecución real en tu máquina — se conecta solo en cuanto lo detecte. Mientras tanto, la elfa edita ficheros y tú navegas con los comandos de arriba (help).')}`);
+    }
+    const full = r + (args.length ? ' ' + args.map(shellQuote).join(' ') : '');
+    let out = '';
+    const code = await bridgeClient.exec(full, { onOut: t => { out += t; }, onErr: t => { out += RED(t); } });
+    if (code) out += `\n${DIM('(código de salida ' + code + ')')}`;
+    return out || DIM('(sin salida)');
+  };
+
+// copia recursiva por handles (la File System API no tiene move nativo)
+async function copyPath(srcSegs, dstSegs) {
+  const k = await kindOf(srcSegs);
+  if (k == null) throw new Error('origen no existe');
+  if (k === 'file') { await writeText(dstSegs, await readText(srcSegs)); return; }
+  const src = await dirHandle(srcSegs);
+  await dirHandle(dstSegs, { create: true });
+  for await (const e of src.values()) await copyPath([...srcSegs, e.name], [...dstSegs, e.name]);
+}
+
+// ---- parser: tuberías, redirección, comillas ----
+function splitTop(line, sep) {          // parte por `sep` respetando comillas
+  const parts = []; let cur = '', q = '';
+  for (const ch of line) {
+    if (q) { cur += ch; if (ch === q) q = ''; }
+    else if (ch === '"' || ch === "'") { q = ch; cur += ch; }
+    else if (ch === sep) { parts.push(cur); cur = ''; }
+    else cur += ch;
+  }
+  parts.push(cur); return parts;
+}
+function tokenize(seg) {
+  const toks = []; let cur = '', q = '';
+  for (const ch of seg.trim()) {
+    if (q) { if (ch === q) q = ''; else cur += ch; }
+    else if (ch === '"' || ch === "'") q = ch;
+    else if (/\s/.test(ch)) { if (cur) { toks.push(cur); cur = ''; } }
+    else cur += ch;
+  }
+  if (cur) toks.push(cur);
+  return toks;
+}
+
+// Ejecuta una línea completa (encadenado &&/;, tuberías, redirección).
+// `\f` en el retorno = orden de limpiar pantalla (para la UI).
+export async function exec(line, { record = true } = {}) {
+  line = line.trim();
+  if (!line) return '';
+  if (record) history.push(line);
+  const segments = tokenizeChain(line);
+  if (segments.length === 1) return runPipeline(segments[0].cmd);
+  // encadenado: A && B (B solo si A fue bien) · A ; B (B siempre)
+  const outs = []; let ok = true;
+  for (const { cmd, op } of segments) {
+    if (op === '&&' && !ok) continue;
+    try { outs.push(await runPipeline(cmd)); ok = true; }
+    catch (e) { ok = false; outs.push('\x1b[31m' + (e && e.message || e) + '\x1b[0m'); }
+  }
+  if (outs.every(o => o === '\f')) return '\f';
+  return outs.filter(o => o && o !== '\f').join('\n');
+}
+
+// Divide la línea en segmentos con su operador previo (&& / ; ), respetando comillas.
+function tokenizeChain(line) {
+  const segs = []; let cur = '', q = '', op = null;
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (q) { cur += ch; if (ch === q) q = ''; continue; }
+    if (ch === '"' || ch === "'") { q = ch; cur += ch; continue; }
+    if (ch === '&' && line[i + 1] === '&') { segs.push({ cmd: cur.trim(), op }); op = '&&'; cur = ''; i++; continue; }
+    if (ch === ';') { segs.push({ cmd: cur.trim(), op }); op = ';'; cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) segs.push({ cmd: cur.trim(), op });
+  return segs.filter(s => s.cmd);
+}
+
+// Ejecuta un pipeline (una etapa o varias unidas por |, con redirección final).
+async function runPipeline(line) {
+  const stages = splitTop(line, '|').map(s => s.trim()).filter(Boolean);
+  let data = '';
+  for (let i = 0; i < stages.length; i++) {
+    let seg = stages[i], redir = null;
+    if (i === stages.length - 1) {
+      const m = seg.match(/(>>?)\s*(\S+)\s*$/);
+      if (m) { redir = { append: m[1] === '>>', file: m[2] }; seg = seg.slice(0, m.index); }
+    }
+    const toks = tokenize(seg);
+    const name = toks.shift();
+    if (!name) continue;
+    const fn = CMDS[name];
+    if (!fn) throw new Error(`${name}: comando no encontrado (prueba ${GRN('help')})`);
+    data = (await fn(toks, data)) ?? '';
+    if (redir) {
+      const segs = resolve(redir.file);
+      const prev = redir.append ? await readText(segs).catch(() => '') : '';
+      await writeText(segs, prev + stripAnsi(data));
+      data = '';
+    }
+  }
+  return data;
+}
+
+export const stripAnsi = s => String(s).replace(/\x1b\[[0-9;]*m/g, '');
+
+// Entradas de un directorio (para el completado con Tab del terminal).
+export async function listDir(dirPart = '') {
+  const dir = await dirHandle(resolve(dirPart));
+  const out = [];
+  for await (const e of dir.values()) if (!IGNORE.has(e.name)) out.push({ name: e.name, kind: e.kind });
+  return out;
+}
+
+// Ejecuta una orden desde la elfa (tool terminal.run): devuelve texto plano.
+export async function runForAgent(command) {
+  const out = await exec(command, { record: true });
+  return out === '\f' ? '(pantalla limpiada)' : (stripAnsi(out) || '(sin salida)');
+}

js/skills.js

@@ -0,0 +1,144 @@
+// Skills de Elffuss Code: instrucciones en markdown (formato SKILL.md de
+// Claude Code) que el modelo sigue cuando aplican. Se instalan desde el
+// catálogo grande OFICIAL (github.com/anthropics/skills), desde los plugins
+// oficiales, o desde CUALQUIER repo público (marketplaces de la comunidad
+// tipo OpenClaude/openclaw). Todo transparente: se ve el repo, la lista y el
+// SKILL.md que se inyecta. Se guardan en IndexedDB (nada sale del navegador).
+import * as db from './db.js';
+
+const KEY = 'skills';          // skills instaladas
+const SRC_KEY = 'skills.sources'; // repos personalizados añadidos por el usuario
+const MAX_SKILL = 12_000;      // caracteres del cuerpo que se inyectan al modelo
+
+export const CATALOG_REPO = 'anthropics/skills';
+export const DEFAULT_SOURCES = [
+  { repo: 'bbgnsurftech/claude-skills-collection', label: 'Comunidad · Mega-colección (1000+ skills)', official: true },
+  { repo: 'anthropics/skills', label: 'Anthropic · Agent Skills (oficial de Claude Code)', official: true },
+  { repo: 'anthropics/claude-plugins-official', label: 'Anthropic · Claude Code Plugins (oficial)', official: true },
+];
+
+let cache = []; // instaladas, en memoria (para que el systemPrompt sea síncrono)
+
+export async function initSkills() {
+  cache = (await db.get('kv', KEY).catch(() => null)) || [];
+  return cache;
+}
+
+export async function all() { return cache; }
+export function installed() { return cache; }
+export function isInstalled(repo, path) { return cache.some(s => s.repo === repo && s.path === path); }
+
+export async function install(skill) {
+  cache = cache.filter(s => !(s.repo === skill.repo && s.path === skill.path) && s.name !== skill.name);
+  const entry = { ...skill, content: (skill.content || '').slice(0, MAX_SKILL) };
+  cache.push(entry);
+  await db.set('kv', KEY, cache);
+  return entry;                       // devuelve la skill completa (name, description…)
+}
+
+// Mensaje «cómo usarla» tras instalar: qué hace + un ejemplo de qué pedir.
+export function usageMessage(skill) {
+  const desc = (skill.description || '').trim();
+  const ejemplo = firstExample(skill) || `algo relacionado con «${skill.name}»`;
+  return `✳ **Skill «${skill.name}» instalada.**\n\n` +
+    (desc ? desc + '\n\n' : '') +
+    `Ya la sigo en cada conversación. Para usarla, pídeme por ejemplo:\n\n> ${ejemplo}`;
+}
+
+// Intenta sacar un ejemplo de uso del cuerpo del SKILL.md (líneas de ejemplo/uso).
+function firstExample(skill) {
+  const body = skill.content || '';
+  const m = body.match(/(?:ejemplo|example|uso|usage|prueba|try)[^\n:]*[:：]\s*["“]?([^\n"”]{6,90})/i)
+    || body.match(/^[-*]\s+([A-ZÁÉÍÓÚ][^\n]{10,80})/m);
+  return m ? m[1].trim().replace(/[.*_`]+$/, '') : null;
+}
+
+export async function remove(nameOrPath) {
+  cache = cache.filter(s => s.name !== nameOrPath && s.path !== nameOrPath);
+  await db.set('kv', KEY, cache);
+}
+
+export async function get(name) {
+  return cache.find(s => s.name.toLowerCase() === String(name).toLowerCase()) || null;
+}
+
+// ---- fuentes (repos) ----
+export async function sources() {
+  const custom = (await db.get('kv', SRC_KEY).catch(() => null)) || [];
+  return [...DEFAULT_SOURCES, ...custom];
+}
+export async function addSource(repoOrUrl, label) {
+  const repo = repoOrUrl.trim().replace(/^https?:\/\/github\.com\//, '').replace(/\.git$/, '').replace(/\/$/, '');
+  if (!/^[\w.-]+\/[\w.-]+$/.test(repo)) throw new Error('Usa owner/repo (o la URL de GitHub)');
+  const custom = (await db.get('kv', SRC_KEY).catch(() => null)) || [];
+  if (!custom.some(s => s.repo === repo) && !DEFAULT_SOURCES.some(s => s.repo === repo))
+    custom.push({ repo, label: label || repo });
+  await db.set('kv', SRC_KEY, custom);
+  return repo;
+}
+export async function removeSource(repo) {
+  const custom = (await db.get('kv', SRC_KEY).catch(() => null)) || [];
+  await db.set('kv', SRC_KEY, custom.filter(s => s.repo !== repo));
+}
+
+// ---- catálogo desde GitHub ----
+// Una sola llamada al árbol git del repo → todos los SKILL.md.
+export async function listFromRepo(repo) {
+  let tree, branch;
+  for (const b of ['main', 'master']) {
+    const r = await fetch(`https://api.github.com/repos/${repo}/git/trees/${b}?recursive=1`);
+    if (r.ok) { tree = await r.json(); branch = b; break; }
+    if (r.status === 403) throw new Error('GitHub limitó las peticiones (60/h sin login). Reintenta en unos minutos.');
+  }
+  if (!tree) throw new Error('No pude leer el repo (¿existe y es público?)');
+  return (tree.tree || [])
+    .filter(n => /(^|\/)SKILL\.md$/i.test(n.path))
+    .map(n => ({ repo, branch, path: n.path, dir: n.path.replace(/\/SKILL\.md$/i, ''), name: n.path.replace(/\/SKILL\.md$/i, '').split('/').pop() || repo }))
+    .sort((a, b) => a.dir.localeCompare(b.dir));
+}
+
+// Descarga el SKILL.md y lo instala (frontmatter YAML simple).
+export async function installFromRepo(entry) {
+  let md = null;
+  for (const b of [entry.branch, 'main', 'master'].filter(Boolean)) {
+    const r = await fetch(`https://raw.githubusercontent.com/${entry.repo}/${b}/${entry.path}`);
+    if (r.ok) { md = await r.text(); break; }
+  }
+  if (md == null) throw new Error('No pude descargar el SKILL.md');
+  const skill = parseSkill(md, entry.name);
+  return install({ ...skill, repo: entry.repo, path: entry.path });
+}
+
+// SKILL.md → { name, description, content }
+export function parseSkill(md, fallbackName = 'skill') {
+  const fm = md.match(/^---\n([\s\S]*?)\n---/);
+  const meta = fm?.[1] || '';
+  const name = meta.match(/^name:\s*(.+)$/m)?.[1]?.trim() || fallbackName;
+  const description = (meta.match(/^description:\s*([\s\S]+?)(?:\n\w+:|$)/m)?.[1] || '').replace(/\s+/g, ' ').trim();
+  const content = md.replace(/^---\n[\s\S]*?\n---\n?/, '').trim();
+  return { name, description, content };
+}
+
+// Creador de skills: Elffuss fabrica una skill propia (SKILL.md) a partir de
+// lo que el usuario quiere, y la instala al instante. Aparece en la pestaña
+// Skills y se inyecta en el prompt de los siguientes turnos.
+export async function createSkill({ name, description, instructions } = {}) {
+  if (!name || !instructions) throw new Error('Faltan name o instructions');
+  const skill = {
+    name: String(name).slice(0, 48),
+    description: (description || '').slice(0, 240),
+    content: String(instructions).slice(0, MAX_SKILL),
+    repo: 'creada por Elffuss',
+    path: 'local/' + Date.now(),
+  };
+  await install(skill);
+  return `Skill «${skill.name}» creada e instalada. Ya la sigo en cada conversación (mírala en la pestaña Skills).`;
+}
+
+// Bloque para el systemPrompt (síncrono, desde la caché).
+export function skillsPromptBlock() {
+  if (!cache.length) return '';
+  const parts = cache.map(s =>
+    `### Skill «${s.name}»${s.repo ? ` (de ${s.repo})` : ''}\n${s.description || ''}\n${(s.content || '').slice(0, MAX_SKILL)}`);
+  return `\n\nSKILLS ACTIVAS (instrucciones especializadas; síguelas cuando la tarea encaje):\n${parts.join('\n\n')}`;
+}

js/splash-gl.js

@@ -0,0 +1,116 @@
+// Galaxia de partículas WebGL para el splash — sin librerías, autocontenida.
+// Técnica: GL_POINTS + blending aditivo + rotación diferencial calculada por
+// completo en el vertex shader desde una semilla (la CPU no toca nada por
+// frame). ~24k partículas en espiral rosa→violeta con motas doradas, parallax
+// de ratón y explosión al pulsar Entrar.
+export function startGalaxy(container) {
+  const canvas = document.createElement('canvas');
+  canvas.className = 'gl';
+  container.prepend(canvas);
+  const gl = canvas.getContext('webgl', { alpha: true, antialias: false, depth: false });
+  if (!gl) { canvas.remove(); return null; } // fallback: se queda el gradiente CSS
+
+  const N = 24000;
+  const seeds = new Float32Array(N * 2);
+  for (let i = 0; i < seeds.length; i++) seeds[i] = Math.random();
+
+  const VS = `
+attribute vec2 seed;
+uniform float t, aspect, burst, dpr;
+uniform vec2 par;
+varying vec3 vColor;
+varying float vGlow;
+float hash(float n){ return fract(sin(n) * 43758.5453); }
+void main(){
+  float r = 0.08 + 1.35 * pow(seed.y, 0.65);
+  float arm = floor(hash(seed.x * 7.0 + seed.y) * 3.0);
+  float ang = seed.x * 0.9 + arm * 2.0944 + r * 2.6 + t * (0.12 + 0.25 / (r + 0.2));
+  float wob = (hash(seed.x * 13.1) - 0.5) * 0.22 * r;
+  vec2 p = vec2(cos(ang), sin(ang)) * (r + wob);
+  p.y *= 0.62;
+  p.y += (hash(seed.y * 17.7) - 0.5) * 0.14;
+  p += par * (0.03 + r * 0.06);
+  p *= 1.0 + burst * (0.4 + seed.y * 2.4);
+  gl_Position = vec4(p.x / aspect, p.y, 0.0, 1.0);
+  float tw = 0.55 + 0.45 * sin(t * (1.5 + seed.x * 3.0) + seed.y * 40.0);
+  vGlow = tw * (1.0 - burst * 0.55);
+  float gold = step(0.93, hash(seed.x * 31.3 + seed.y * 7.7));
+  vec3 pink = vec3(1.0, 0.30, 0.55);
+  vec3 violet = vec3(0.49, 0.36, 1.0);
+  vec3 goldc = vec3(1.0, 0.84, 0.42);
+  vColor = mix(mix(pink, violet, smoothstep(0.1, 1.3, r)), goldc, gold);
+  gl_PointSize = (1.3 + 2.8 * tw * max(1.2 - r * 0.5, 0.2)) * dpr;
+}`;
+  const FS = `
+precision mediump float;
+varying vec3 vColor;
+varying float vGlow;
+void main(){
+  float m = smoothstep(0.5, 0.0, length(gl_PointCoord - 0.5));
+  gl_FragColor = vec4(vColor * vGlow, m * vGlow);
+}`;
+
+  const sh = (type, src) => {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+    return s;
+  };
+  const prog = gl.createProgram();
+  gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS));
+  gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FS));
+  gl.linkProgram(prog);
+  gl.useProgram(prog);
+
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, seeds, gl.STATIC_DRAW); // una vez; la GPU manda
+  const loc = gl.getAttribLocation(prog, 'seed');
+  gl.enableVertexAttribArray(loc);
+  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+  const U = n => gl.getUniformLocation(prog, n);
+  const uT = U('t'), uAspect = U('aspect'), uBurst = U('burst'), uPar = U('par'), uDpr = U('dpr');
+
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE); // aditivo = brillo
+  gl.clearColor(0, 0, 0, 0);
+
+  let burstAt = 0, alive = true;
+  const mouse = { x: 0, y: 0, tx: 0, ty: 0 };
+  const onMove = e => {
+    mouse.tx = (e.clientX / innerWidth - 0.5) * 2;
+    mouse.ty = -(e.clientY / innerHeight - 0.5) * 2;
+  };
+  addEventListener('pointermove', onMove);
+
+  const dpr = Math.min(devicePixelRatio || 1, 2);
+  function frame(now) {
+    if (!alive) return;
+    const w = container.clientWidth, h = container.clientHeight;
+    if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+      gl.viewport(0, 0, canvas.width, canvas.height);
+    }
+    mouse.x += (mouse.tx - mouse.x) * 0.05;
+    mouse.y += (mouse.ty - mouse.y) * 0.05;
+    const t = now / 1000;
+    const burst = burstAt ? Math.min((now - burstAt) / 900, 1) : 0;
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.uniform1f(uT, t);
+    gl.uniform1f(uAspect, w / h);
+    gl.uniform1f(uBurst, burst);
+    gl.uniform1f(uDpr, dpr);
+    gl.uniform2f(uPar, mouse.x, mouse.y);
+    gl.drawArrays(gl.POINTS, 0, N);
+    requestAnimationFrame(frame);
+  }
+  requestAnimationFrame(frame);
+
+  return {
+    burst() { burstAt = performance.now(); },
+    stop() { alive = false; removeEventListener('pointermove', onMove); canvas.remove(); },
+  };
+}

js/telemetry.js

@@ -0,0 +1,63 @@
+// Buzón opt-in de errores/feedback. Apagado por defecto — la promesa de
+// «nada sale de tu máquina» sigue siendo cierta salvo que el usuario decida
+// lo contrario en Ajustes. Cuando está activo:
+//   - errores no capturados (window.onerror / unhandledrejection) y los
+//     puntos concretos del código que llaman a reportError() se mandan a
+//     /proxy/report (mismo origen, vía el proxy compartido de Elffuss)
+//   - sendFeedback() manda texto libre que el usuario escriba a propósito
+// Nunca se manda código ni contenido del proyecto — solo el mensaje técnico,
+// la pila, la URL y el user-agent. Sin cola ni reintentos: si el envío
+// falla, se descarta sin más (evita que un fallo de red se convierta en
+// almacenamiento sin límite).
+let appName = 'elffuss';
+let enabled = false;
+let hooked = false;
+
+const storageKey = () => 'elffuss.telemetry.' + appName;
+
+export function isEnabled() { return enabled; }
+
+export function setEnabled(v) {
+  enabled = !!v;
+  try { localStorage.setItem(storageKey(), enabled ? '1' : '0'); } catch { /* localStorage lleno/bloqueado */ }
+  if (enabled) hookGlobalErrors();
+}
+
+async function post(kind, message, opts = {}) {
+  if (!enabled) return;
+  try {
+    await fetch('/proxy/report', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        app: appName, kind, message: String(message ?? '').slice(0, 2000),
+        stack: String(opts.stack || '').slice(0, 4000),
+        url: location.href, userAgent: navigator.userAgent,
+        extra: String(opts.extra || '').slice(0, 2000),
+      }),
+    });
+  } catch { /* sin conexión o proxy caído: se descarta, no hay reintento */ }
+}
+
+export function reportError(message, opts = {}) { return post('error', message, opts); }
+export function sendFeedback(text) { return post('feedback', text); }
+
+function hookGlobalErrors() {
+  if (hooked) return;
+  hooked = true;
+  window.addEventListener('error', e => {
+    reportError(e.message || String(e.error) || 'error', { stack: e.error?.stack || '' });
+  });
+  window.addEventListener('unhandledrejection', e => {
+    const r = e.reason;
+    reportError('unhandledrejection: ' + (r?.message || r), { stack: r?.stack || '' });
+  });
+}
+
+// Llamar UNA vez al arrancar, con el nombre de la app (para distinguir
+// elffuss-code de elffuss-claw en los informes) — lee la preferencia guardada.
+export function init(name) {
+  appName = name || appName;
+  try { enabled = localStorage.getItem(storageKey()) === '1'; } catch { enabled = false; }
+  if (enabled) hookGlobalErrors();
+}

js/terminal.js

@@ -0,0 +1,140 @@
+// Terminal de Elffuss Code: xterm.js (VT100 real) + un readline propio que
+// ejecuta contra shell.js (los ficheros REALES del proyecto). xterm no trae
+// shell: nosotros gestionamos la línea (edición, historial, cursor) y delegamos
+// la ejecución en shell.exec. La misma orden la puede lanzar la elfa vía el
+// tool `terminal.run`, y su salida aparece aquí.
+import * as shell from './shell.js';
+
+let term = null, fit = null, ready = false;
+let Terminal = null, FitAddon = null;
+let line = '', pos = 0, histIdx = -1, busy = false;
+const XT = '@xterm/xterm@5.5.0', FIT = '@xterm/addon-fit@0.10.0';
+
+// IMPORTANTE: cargamos xterm como ESM, no UMD. Monaco trae un loader AMD
+// (define/require) y la build UMD de xterm se registra como «define anónimo»
+// en vez de exponer window.Terminal → «Can only have one anonymous define».
+// El import ESM esquiva por completo el define de Monaco.
+async function loadXterm() {
+  if (Terminal) return;
+  if (!document.getElementById('xterm-css')) {
+    const l = document.createElement('link');
+    l.id = 'xterm-css'; l.rel = 'stylesheet'; l.href = `https://cdn.jsdelivr.net/npm/${XT}/css/xterm.min.css`;
+    document.head.appendChild(l);
+  }
+  const [xt, ft] = await Promise.all([
+    import(`https://cdn.jsdelivr.net/npm/${XT}/+esm`),
+    import(`https://cdn.jsdelivr.net/npm/${FIT}/+esm`),
+  ]);
+  Terminal = xt.Terminal || (xt.default && xt.default.Terminal);
+  FitAddon = ft.FitAddon || (ft.default && ft.default.FitAddon) || ft.default;
+}
+
+const prompt = () => `\x1b[36m${shell.cwdString()}\x1b[0m \x1b[35m❯\x1b[0m `;
+const writePrompt = () => term.write('\r\n' + prompt());
+// Redibuja la línea de entrada (prompt + buffer) y coloca el cursor en `pos`.
+function redraw() {
+  term.write('\r\x1b[K' + prompt() + line);
+  const back = line.length - pos;
+  if (back > 0) term.write(`\x1b[${back}D`);
+}
+
+async function run(raw) {
+  const cmd = raw.trim();
+  if (!cmd) { writePrompt(); return; }
+  busy = true;
+  try {
+    const out = await shell.exec(cmd);
+    if (out === '\f') term.clear();
+    else if (out) term.write('\r\n' + out.replace(/\n/g, '\r\n'));
+  } catch (e) {
+    term.write('\r\n\x1b[31m' + String(e && e.message || e).replace(/\n/g, '\r\n') + '\x1b[0m');
+  }
+  busy = false;
+  writePrompt();
+}
+
+function onKey(data) {
+  if (busy) return;
+  switch (data) {
+    case '\r':                                     // Enter
+      { const cmd = line; line = ''; pos = 0; histIdx = -1; run(cmd); return; }
+    case '\x7f':                                   // Retroceso
+      if (pos > 0) { line = line.slice(0, pos - 1) + line.slice(pos); pos--; redraw(); } return;
+    case '\x1b[3~':                                // Supr
+      if (pos < line.length) { line = line.slice(0, pos) + line.slice(pos + 1); redraw(); } return;
+    case '\x03':                                   // Ctrl+C
+      term.write('^C'); line = ''; pos = 0; histIdx = -1; writePrompt(); return;
+    case '\x0c':                                   // Ctrl+L
+      term.clear(); redraw(); return;
+    case '\x1b[A': case '\x1b[B': {                // arriba / abajo: historial
+      const h = shell.getHistory(); if (!h.length) return;
+      if (histIdx === -1) histIdx = h.length;
+      histIdx = Math.max(0, Math.min(h.length, histIdx + (data === '\x1b[A' ? -1 : 1)));
+      line = h[histIdx] || ''; pos = line.length; redraw(); return;
+    }
+    case '\x1b[C': if (pos < line.length) { pos++; term.write('\x1b[C'); } return;   // derecha
+    case '\x1b[D': if (pos > 0) { pos--; term.write('\x1b[D'); } return;             // izquierda
+    case '\x1b[H': case '\x01': pos = 0; redraw(); return;             // Inicio / Ctrl+A
+    case '\x1b[F': case '\x05': pos = line.length; redraw(); return;   // Fin / Ctrl+E
+    case '\t': complete(); return;                 // Tab: completar rutas
+  }
+  if (data.length !== 1 || data.charCodeAt(0) < 32) return;  // control/escape: ignorar
+  line = line.slice(0, pos) + data + line.slice(pos); pos += data.length; redraw();
+}
+
+// Completado de rutas simple: mira el último token contra el directorio actual.
+async function complete() {
+  const frag = (line.slice(0, pos).split(/\s+/).pop()) || '';
+  const slash = frag.lastIndexOf('/');
+  const dirPart = slash >= 0 ? frag.slice(0, slash + 1) : '';
+  const base = slash >= 0 ? frag.slice(slash + 1) : frag;
+  let names;
+  try { names = await shell.listDir(dirPart); } catch { return; }
+  const matches = names.filter(n => n.name.startsWith(base));
+  if (matches.length === 1) {
+    const add = matches[0].name.slice(base.length) + (matches[0].kind === 'directory' ? '/' : ' ');
+    line = line.slice(0, pos) + add + line.slice(pos); pos += add.length; redraw();
+  } else if (matches.length > 1) {
+    term.write('\r\n' + matches.map(m => m.kind === 'directory' ? '\x1b[36m' + m.name + '/\x1b[0m' : m.name).join('  '));
+    writePrompt(); term.write(line); if (line.length - pos > 0) term.write(`\x1b[${line.length - pos}D`);
+  }
+}
+
+// Monta el terminal en `host` (una vez). Idempotente; refoca si ya existe.
+export async function mount(host) {
+  if (ready) { setTimeout(() => { fit && fit.fit(); term && term.focus(); }, 0); return; }
+  await loadXterm();
+  term = new Terminal({
+    fontSize: 12.5, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    cursorBlink: true, convertEol: false, scrollback: 2000,
+    theme: { background: '#0b0d12', foreground: '#e8ebf4', cursor: '#ff4d8d', selectionBackground: '#7c5cff55',
+      brightBlack: '#6b7280', red: '#ff6b8b', green: '#7ee787', yellow: '#ffd479', blue: '#7c5cff', magenta: '#ff4d8d', cyan: '#56d4dd' },
+  });
+  fit = new FitAddon();
+  term.loadAddon(fit);
+  term.open(host);
+  fit.fit();
+  host.addEventListener('mousedown', () => setTimeout(() => term.focus(), 0));
+  term.onData(onKey);
+  const cap = shell.capabilities();
+  term.write('\x1b[1;35mElffuss shell\x1b[0m \x1b[90m— ficheros reales del proyecto, en tu navegador.\x1b[0m');
+  const rtHint = cap.bridge ? '🔌 Bridge local conectado: node/npm/python REALES en tu máquina.'
+    : 'Escribe \x1b[0m\x1b[32mhelp\x1b[0m\x1b[90m. node/npm/python reales → conecta el Bridge local (⚙ Ajustes).';
+  term.write('\r\n\x1b[90m' + rtHint + '\x1b[0m');
+  writePrompt();
+  ready = true;
+  setTimeout(() => term.focus(), 0);
+}
+
+export function refit() { if (ready) setTimeout(() => fit && fit.fit(), 0); }
+export function focus() { if (ready) term.focus(); }
+export function isReady() { return ready; }
+export function clearScreen() { if (ready) { term.clear(); line = ''; pos = 0; term.write('\r\x1b[K' + prompt()); term.focus(); } }
+
+// Eco de una orden lanzada por la elfa (para que el usuario la vea en el terminal).
+export function echoAgent(cmd, out) {
+  if (!ready) return;
+  term.write('\r\x1b[K' + prompt() + '\x1b[90m' + cmd + '  (elfa)\x1b[0m');
+  if (out) term.write('\r\n' + shell.stripAnsi(out).replace(/\n/g, '\r\n'));
+  writePrompt(); term.write(line);
+}

js/tools/clone.js

@@ -0,0 +1,125 @@
+// Descarga un repo PÚBLICO (GitHub/Bitbucket) en una carpeta real elegida por
+// el usuario, para abrirlo como proyecto sin necesitar git instalado. Mismo
+// patrón que skills.js: árbol de Git vía API + contenidos por raw CDN (sin
+// tope de la API, solo la llamada al árbol cuenta contra el límite 60/h).
+//
+// RESUMIBLE por diseño: listRepo() (el árbol) y downloadFiles() (los ficheros)
+// están separados a propósito — quien llama (main.js) persiste la lista y qué
+// rutas ya se descargaron, así una descarga interrumpida (recarga, pestaña
+// cerrada) continúa donde se quedó en vez de volver a empezar.
+const MAX_FILES = 4000;
+const MAX_FILE_BYTES = 4 * 1024 * 1024; // ficheros más grandes se saltan (binarios enormes)
+const CONCURRENCY = 10;
+
+export function parseRepoUrl(raw) {
+  const url = String(raw || '').trim().replace(/\.git$/, '').replace(/\/+$/, '');
+  let m = url.match(/^(?:https?:\/\/)?(?:www\.)?github\.com\/([\w.-]+)\/([\w.-]+)(?:\/tree\/([\w./-]+))?/i);
+  if (m) return { host: 'github', owner: m[1], repo: m[2], branch: m[3] || null };
+  m = url.match(/^(?:https?:\/\/)?(?:www\.)?bitbucket\.org\/([\w.-]+)\/([\w.-]+)(?:\/src\/([\w./-]+))?/i);
+  if (m) return { host: 'bitbucket', owner: m[1], repo: m[2], branch: m[3] || null };
+  throw new Error('URL no reconocida. Usa github.com/usuario/repo o bitbucket.org/usuario/repo');
+}
+
+// escribe un fichero (texto o binario) en `root`, creando subcarpetas
+async function writeInto(root, path, blob) {
+  const parts = path.split('/'); const name = parts.pop();
+  let dir = root;
+  for (const seg of parts) dir = await dir.getDirectoryHandle(seg, { create: true });
+  const fh = await dir.getFileHandle(name, { create: true });
+  const w = await fh.createWritable();
+  await w.write(blob);
+  await w.close();
+}
+
+// pool de concurrencia simple: corre `items` a través de `worker`, máx N a la vez
+async function pool(items, n, worker) {
+  let i = 0;
+  const runners = Array.from({ length: Math.min(n, items.length) }, async () => {
+    while (i < items.length) await worker(items[i++]);
+  });
+  await Promise.all(runners);
+}
+
+// ── listar (una sola vez, resultado persistible) ─────────────────────────
+async function listGithubFiles({ owner, repo, branch }) {
+  if (!branch) {
+    const r = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
+    if (r.status === 403) throw new Error('GitHub limitó las peticiones (60/h sin login). Reintenta en unos minutos.');
+    if (!r.ok) throw new Error(`Repo no encontrado o privado (HTTP ${r.status})`);
+    branch = (await r.json()).default_branch || 'main';
+  }
+  let tree = null;
+  for (const b of [branch, 'main', 'master']) {
+    const r = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/${b}?recursive=1`);
+    if (r.ok) { tree = (await r.json()).tree || []; branch = b; break; }
+    if (r.status === 403) throw new Error('GitHub limitó las peticiones (60/h sin login). Reintenta en unos minutos.');
+  }
+  if (!tree) throw new Error('No pude leer el árbol del repo');
+  const blobs = tree.filter(n => n.type === 'blob');
+  const files = blobs.filter(n => !n.size || n.size <= MAX_FILE_BYTES).slice(0, MAX_FILES).map(n => ({ path: n.path, size: n.size || 0 }));
+  return { branch, files, skipped: blobs.length - files.length };
+}
+// Bitbucket no tiene un único endpoint de árbol recursivo: se camina por directorios.
+async function bitbucketWalk(owner, repo, branch, path, files) {
+  if (files.length >= MAX_FILES) return;
+  let url = `https://api.bitbucket.org/2.0/repositories/${owner}/${repo}/src/${branch}/${path}?pagelen=100`;
+  while (url && files.length < MAX_FILES) {
+    const r = await fetch(url);
+    if (!r.ok) throw new Error(`Bitbucket: HTTP ${r.status} (¿repo privado o rama incorrecta?)`);
+    const data = await r.json();
+    for (const e of data.values || []) {
+      if (files.length >= MAX_FILES) break;
+      if (e.type === 'commit_directory') await bitbucketWalk(owner, repo, branch, e.path, files);
+      else if (e.type === 'commit_file' && (!e.size || e.size <= MAX_FILE_BYTES)) files.push({ path: e.path, size: e.size || 0 });
+    }
+    url = data.next || null;
+  }
+}
+async function listBitbucketFiles({ owner, repo, branch }) {
+  if (!branch) {
+    const r = await fetch(`https://api.bitbucket.org/2.0/repositories/${owner}/${repo}`);
+    if (!r.ok) throw new Error(`Repo no encontrado o privado (HTTP ${r.status})`);
+    branch = (await r.json()).mainbranch?.name || 'main';
+  }
+  const files = [];
+  await bitbucketWalk(owner, repo, branch, '', files);
+  return { branch, files, skipped: 0 };
+}
+
+// Lista el repo completo UNA vez. Devuelve todo lo necesario para persistir
+// el trabajo: { host, owner, repo, branch, files:[{path,size}], skipped }.
+export async function listRepo(url) {
+  const info = parseRepoUrl(url);
+  const { branch, files, skipped } = info.host === 'github' ? await listGithubFiles(info) : await listBitbucketFiles(info);
+  if (!files.length) throw new Error('El repo está vacío (o no pude listarlo)');
+  return { host: info.host, owner: info.owner, repo: info.repo, branch, files, skipped };
+}
+
+// Descarga los ficheros de `job.files` que NO estén en `doneSet` (Set de
+// rutas). Llama a onFileDone(path) tras cada escritura para que quien invoque
+// persista el progreso — así una interrupción se retoma sin re-descargar nada.
+export async function downloadFiles(job, targetHandle, doneSet, onProgress, onFileDone) {
+  const { host, owner, repo, branch, files } = job;
+  const pending = files.filter(f => !doneSet.has(f.path));
+  let done = files.length - pending.length;
+  onProgress?.({ text: `${done}/${files.length}`, done, total: files.length });
+  await pool(pending, CONCURRENCY, async f => {
+    onProgress?.({ text: `Descargando ${f.path}…`, done, total: files.length });
+    const url = host === 'github'
+      ? `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${f.path}`
+      : `https://api.bitbucket.org/2.0/repositories/${owner}/${repo}/src/${branch}/${f.path}`;
+    const r = await fetch(url);
+    if (r.ok) await writeInto(targetHandle, f.path, await r.blob());
+    done++;
+    onFileDone?.(f.path);
+    onProgress?.({ text: `${done}/${files.length}`, done, total: files.length });
+  });
+}
+
+// Conveniencia: listar + descargar todo de una vez (sin resumibilidad; para
+// quien no necesite persistir progreso entre sesiones).
+export async function cloneToHandle(url, targetHandle, onProgress) {
+  const job = await listRepo(url);
+  await downloadFiles(job, targetHandle, new Set(), onProgress);
+  return { count: job.files.length, skipped: job.skipped };
+}

js/tools/code.js

@@ -0,0 +1,269 @@
+// Herramientas de proyecto: el único mundo que toca Elffuss Code es la
+// carpeta de código que el usuario abre con el picker nativo.
+import * as db from '../db.js';
+
+let projectHandle = null;
+let projectName = '';
+let currentFile = null;              // ruta abierta en el editor
+let onFileWritten = () => {};        // el IDE refresca pestañas/árbol
+
+export function setOnFileWritten(fn) { onFileWritten = fn; }
+export function setCurrentFile(path) { currentFile = path; }
+export function current() { return { projectName, currentFile }; }
+export function handle() { return projectHandle; }
+
+// Lee un archivo de texto dentro de un dir handle por ruta (soporta subdirs).
+async function readIn(dir, path) {
+  const parts = path.split('/'); const name = parts.pop();
+  for (const p of parts) dir = await dir.getDirectoryHandle(p);
+  return (await (await dir.getFileHandle(name)).getFile()).text();
+}
+
+// Integración git SIN dependencias: parsea el .git directamente (rama + último
+// commit). Suficiente para orientar; commitear se le pide al agente/terminal.
+export async function gitInfo() {
+  if (!projectHandle) return { isRepo: false };
+  let git;
+  try { git = await projectHandle.getDirectoryHandle('.git'); }
+  catch { return { isRepo: false }; }
+  const out = { isRepo: true, branch: '(detached)', lastCommit: null };
+  try {
+    const head = (await readIn(git, 'HEAD')).trim();
+    out.branch = head.match(/ref:\s*refs\/heads\/(.+)/)?.[1] || head.slice(0, 7);
+  } catch { /* sin HEAD */ }
+  try {
+    const last = (await readIn(git, 'logs/HEAD')).trim().split('\n').pop();
+    const m = last.match(/^\S+ \S+ (.+?) <[^>]*> (\d+)[^\t]*\t(.+)$/);
+    if (m) out.lastCommit = { author: m[1], when: new Date(+m[2] * 1000), msg: m[3] };
+  } catch { /* sin logs (repo recién creado) */ }
+  return out;
+}
+
+// Lista plana de archivos (para el command palette). Cacheada por proyecto.
+let fileListCache = null;
+export function invalidateFileList() { fileListCache = null; }
+export async function fileList() {
+  if (fileListCache) return fileListCache;
+  if (!projectHandle) return [];
+  const files = [];
+  async function walk(dir, prefix, depth) {
+    if (depth > 8 || files.length > 4000) return;
+    for await (const e of dir.values()) {
+      if (IGNORE.has(e.name)) continue;
+      const p = prefix ? prefix + '/' + e.name : e.name;
+      if (e.kind === 'directory') await walk(e, p, depth + 1);
+      else files.push(p);
+    }
+  }
+  await walk(projectHandle, '', 0);
+  fileListCache = files;
+  return files;
+}
+
+export async function openProject(handle) {
+  projectHandle = handle;
+  projectName = handle.name || 'proyecto';
+  await db.set('kv', 'project', handle).catch(() => {});
+  return projectName;
+}
+
+// Reabrir el último proyecto (el navegador puede exigir un gesto para re-conceder).
+export async function restoreProject() {
+  const h = await db.get('kv', 'project').catch(() => null);
+  if (!h) return null;
+  const q = h.queryPermission ? await h.queryPermission({ mode: 'readwrite' }) : 'granted';
+  if (q === 'granted') {
+    projectHandle = h;
+    projectName = h.name || 'proyecto';
+    return { name: projectName, ready: true };
+  }
+  return { name: h.name, ready: false, handle: h };
+}
+
+export async function regrant(h) {
+  if (await h.requestPermission({ mode: 'readwrite' }) !== 'granted')
+    throw new Error('permiso denegado');
+  return openProject(h);
+}
+
+const IGNORE = new Set(['node_modules', '.git', 'dist', 'build', 'target', '__pycache__', '.next', 'venv', '.venv', '.DS_Store']);
+const MAX_READ = 60_000;
+
+// Normaliza rutas del modelo: quita ./ y / iniciales y segmentos '.'
+const normalize = path => (path || '').split('/').filter(p => p && p !== '.');
+
+async function dirOf(path, { create = false } = {}) {
+  if (!projectHandle) throw new Error('No hay proyecto abierto');
+  const parts = normalize(path);
+  const name = parts.pop();
+  let dir = projectHandle;
+  for (const p of parts) dir = await dir.getDirectoryHandle(p, { create });
+  return { dir, name };
+}
+
+// Buscar archivos por nombre (para sugerir cuando el modelo inventa rutas, o
+// para resolver un enlace del chat que solo mencionaba el nombre del fichero).
+export async function findByName(basename, limit = 5) {
+  const hits = [];
+  let visited = 0;
+  async function walk(dir, prefix) {
+    if (hits.length >= limit || visited > 500) return;
+    for await (const e of dir.values()) {
+      if (IGNORE.has(e.name)) continue;
+      visited++;
+      const p = prefix ? prefix + '/' + e.name : e.name;
+      if (e.kind === 'directory') await walk(e, p);
+      else if (e.name.toLowerCase() === basename.toLowerCase()) hits.push(p);
+      if (hits.length >= limit || visited > 500) return;
+    }
+  }
+  await walk(projectHandle, '');
+  return hits;
+}
+
+// Árbol de texto (para el modelo y el CONTEXTO). Ignora dependencias/binarios.
+export async function tree({ path = '', depth = 3 } = {}) {
+  if (!projectHandle) throw new Error('No hay proyecto abierto');
+  let root = projectHandle;
+  for (const p of normalize(path)) root = await root.getDirectoryHandle(p);
+  const out = [];
+  let count = 0;
+  async function walk(dir, prefix, d) {
+    if (d > depth || count > 350) return;
+    const entries = [];
+    for await (const e of dir.values()) entries.push(e);
+    entries.sort((a, b) => (a.kind !== b.kind) ? (a.kind === 'directory' ? -1 : 1) : a.name.localeCompare(b.name));
+    for (const e of entries) {
+      if (IGNORE.has(e.name)) continue;
+      if (++count > 350) { out.push(prefix + '…'); return; }
+      out.push(prefix + (e.kind === 'directory' ? '📁 ' : '') + e.name);
+      if (e.kind === 'directory') await walk(e, prefix + '  ', d + 1);
+    }
+  }
+  await walk(root, '', 1);
+  return out.join('\n') || '(vacío)';
+}
+
+const PAGE_SIZE = 100, PAGE_MAX = 500;
+
+// Lectura completa (comportamiento de siempre) O por páginas de líneas — para
+// ficheros grandes, o para plantarse justo en el número de línea que dio
+// code.search y traer contexto antes/después sin volcar el fichero entero.
+//   offset: línea 1-based donde empezar (con limit, PAGE_SIZE por defecto)
+//   around: centra la página en esa línea (offset = around - limit/2)
+// Sin offset/limit/around → fichero completo tal cual (no rompe nada que ya
+// dependa de leerlo entero, p.ej. code.edit).
+export async function read({ path, offset, limit, around } = {}) {
+  if (!path) throw new Error('Falta path');
+  let file;
+  try {
+    const { dir, name } = await dirOf(path);
+    file = await (await dir.getFileHandle(name)).getFile();
+  } catch {
+    // error que ENSEÑA: el modelo puede auto-corregirse en el siguiente paso
+    const base = normalize(path).pop() || path;
+    const hits = await findByName(base).catch(() => []);
+    throw new Error(`no existe «${path}» en este proyecto.` +
+      (hits.length ? ` ¿Quizá: ${hits.join(' · ')}?` : '') +
+      ' Consulta el árbol (code.tree) o busca (code.search) antes de leer.');
+  }
+  const full = await file.text();
+
+  if (offset == null && limit == null && around == null) {
+    return full.length > MAX_READ ? full.slice(0, MAX_READ) + `\n… (recortado, ${file.size} bytes)` : full;
+  }
+
+  const lines = full.split('\n');
+  const total = lines.length;
+  const size = Math.max(1, Math.min(Math.round(limit) || PAGE_SIZE, PAGE_MAX));
+  const start = around != null
+    ? Math.max(1, Math.round(around) - Math.floor(size / 2))
+    : Math.max(1, Math.round(offset) || 1);
+  const startIdx = start - 1;
+  const slice = lines.slice(startIdx, startIdx + size);
+  const endLine = startIdx + slice.length;
+  const numbered = slice.map((l, i) => `${start + i}→${l}`).join('\n');
+  const more = endLine < total ? `\n… quedan líneas ${endLine + 1}-${total} — pide code.read con offset:${endLine + 1} para seguir` : '';
+  return `${path}: líneas ${start}-${endLine} de ${total}\n${numbered}${more}`;
+}
+
+// Aprobación de escritura: si «Auto» está apagado, el IDE pide confirmación
+// antes de que la elfa toque archivos (como «Edit automatically» del plugin).
+let approveWrite = async () => true;
+export function setWriteApprover(fn) { approveWrite = fn; }
+
+export async function write({ path, content = '' } = {}) {
+  if (!path) throw new Error('Falta path');
+  if (!await approveWrite(path, content)) return `Cambio en ${path} rechazado por el usuario`;
+  const { dir, name } = await dirOf(path, { create: true });
+  const fh = await dir.getFileHandle(name, { create: true });
+  const w = await fh.createWritable();
+  await w.write(content);
+  await w.close();
+  invalidateFileList();
+  onFileWritten(path, content);
+  return `Escrito ${path} (${content.split('\n').length} líneas)`;
+}
+
+// Edición PARCIAL (no hace falta reescribir el fichero entero): sustituye
+// `search` por `replace`. Primero intenta coincidencia EXACTA (rápida, sin
+// ambigüedad); si no la encuentra tal cual —el modelo puede recordar mal un
+// espacio o un salto de línea—, cae a un parcheado difuso (diff-match-patch,
+// la misma librería que usan herramientas como aider) que localiza el punto
+// más parecido dentro del fichero real. Si ni así hay confianza suficiente,
+// falla con un mensaje claro para que el agente reintente con más contexto
+// — nunca escribe una coincidencia dudosa.
+export async function edit({ path, search, replace } = {}) {
+  if (!path) throw new Error('Falta path');
+  if (search == null || replace == null) throw new Error('Faltan search y replace');
+  const current = await read({ path });
+
+  const first = current.indexOf(search);
+  if (first !== -1) {
+    if (current.indexOf(search, first + 1) !== -1) {
+      throw new Error(`«search» aparece más de una vez en ${path} — añade más líneas de contexto alrededor para que sea inequívoco.`);
+    }
+    return write({ path, content: current.slice(0, first) + replace + current.slice(first + search.length) });
+  }
+
+  // fallback difuso: el texto no aparece tal cual, prueba con la misma
+  // tolerancia con la que un desarrollador reconocería "es este trozo"
+  const { diff_match_patch } = await import('https://esm.sh/diff-match-patch@1.0.5');
+  const dmp = new diff_match_patch();
+  const patches = dmp.patch_make(search, replace);
+  const [next, results] = dmp.patch_apply(patches, current);
+  if (!results.length || !results.every(Boolean)) {
+    throw new Error(`No encontré con suficiente confianza el punto exacto a editar en ${path} (ni exacto ni aproximado). ` +
+      `Vuelve a leerlo (code.read) y copia «search» literal de esas líneas, más corto si hace falta.`);
+  }
+  return write({ path, content: next });
+}
+
+// grep-lite por el proyecto (texto, con límites para no arrasar).
+export async function search({ query, ext = '' } = {}) {
+  if (!query) throw new Error('Falta query');
+  if (!projectHandle) throw new Error('No hay proyecto abierto');
+  const results = [];
+  let checked = 0;
+  const q = query.toLowerCase();
+  async function walk(dir, prefix) {
+    if (results.length > 80 || checked > 400) return;
+    for await (const e of dir.values()) {
+      if (IGNORE.has(e.name)) continue;
+      const p = prefix ? prefix + '/' + e.name : e.name;
+      if (e.kind === 'directory') { await walk(e, p); continue; }
+      if (ext && !e.name.endsWith(ext)) continue;
+      const f = await e.getFile();
+      if (f.size > 200_000) continue;
+      checked++;
+      const lines = (await f.text()).split('\n');
+      lines.forEach((l, i) => {
+        if (results.length <= 80 && l.toLowerCase().includes(q))
+          results.push(`${p}:${i + 1}: ${l.trim().slice(0, 140)}`);
+      });
+      if (results.length > 80 || checked > 400) return;
+    }
+  }
+  await walk(projectHandle, '');
+  return results.length ? results.join('\n') : `Sin resultados para «${query}»`;
+}

js/tools/index.js

@@ -0,0 +1,57 @@
+// Registro de herramientas de Elffuss Code: proyecto abierto + shell + web.
+import * as code from './code.js';
+import * as shell from '../shell.js';
+import * as web from './web.js';
+
+export { code };
+
+// El terminal (UI) se engancha aquí para reflejar lo que ejecuta la elfa.
+let onTerminalEcho = () => {};
+export function setTerminalEcho(fn) { onTerminalEcho = fn; }
+
+export const TOOLS = {
+  'code.tree':   { desc: 'Ver el árbol de archivos del proyecto', params: { path: 'subcarpeta (opcional)', depth: 'niveles (3)' }, run: a => code.tree(a) },
+  'code.read':   { desc: 'Leer un archivo del proyecto. Sin más parámetros, lo lee ENTERO. Para ficheros grandes, pagina de 100 en 100 líneas con offset (offset:101 = siguiente página tras la primera). Para ir directo a donde dio un resultado de code.search (que ya incluye número de línea), usa around:N — trae ~100 líneas centradas en la línea N, con cada línea numerada (N→contenido) para poder citarla o editarla con precisión', params: { path: 'ruta relativa', offset: 'línea 1-based donde empezar (opcional)', limit: 'líneas a devolver, 100 por defecto (opcional)', around: 'centra la página en esta línea, p.ej. la que dio code.search (opcional)' }, run: a => code.read(a) },
+  'code.write':  { desc: 'Escribir/crear un archivo (contenido COMPLETO; se refleja al instante en el editor). Para cambios PEQUEÑOS en un fichero YA existente, usa mejor code.edit', params: { path: 'ruta', content: 'contenido íntegro' }, run: a => code.write(a) },
+  'code.edit':   { desc: 'Editar PARTE de un fichero existente sin reescribirlo entero: sustituye "search" (copia literal de unas pocas líneas, con contexto suficiente para ser única en el fichero) por "replace". Preferible a code.write para cambios pequeños/medianos — más rápido y sin riesgo de perder el resto del fichero. Si falla (no encuentra el punto con confianza), relee el fichero y reintenta con un search más ajustado', params: { path: 'ruta', search: 'texto exacto a sustituir', replace: 'texto nuevo' }, run: a => code.edit(a) },
+  'code.search': { desc: 'Buscar texto en el proyecto (grep)', params: { query: 'texto', ext: 'filtro extensión (opcional)' }, run: a => code.search(a) },
+  'terminal.run': { desc: 'Ejecutar un comando de shell sobre los ficheros del proyecto (ls, cat, grep, find, mkdir, echo>fichero, git status…). node/npm/python REALES si el usuario tiene un Bridge local conectado (⚙ Ajustes → 🔌 Bridge local); si no está conectado, el propio resultado lo indica', params: { command: 'la línea de comando' }, run: async a => { const out = await shell.runForAgent(a.command || ''); onTerminalEcho(a.command || '', out); return out; } },
+  'web.search': { desc: 'Buscar en internet (docs, errores, APIs) — devuelve títulos, URLs y fragmentos', params: { query: 'qué buscar' }, run: a => web.search(a) },
+  'web.fetch':  { desc: 'Leer el contenido de texto de una URL (documentación, referencia)', params: { url: 'https://…' }, run: a => web.fetchUrl(a) },
+};
+
+export function toolHelp() {
+  return Object.entries(TOOLS).map(([n, t]) =>
+    `- ${n}(${Object.keys(t.params).join(', ')}): ${t.desc}`).join('\n');
+}
+
+export async function runTool(name, args) {
+  const tool = TOOLS[name];
+  if (!tool) throw new Error(`Herramienta desconocida: ${name}`);
+  return tool.run(args || {});
+}
+
+// CONTEXTO AHORA del IDE: proyecto, archivo abierto y árbol resumido.
+export async function snapshot() {
+  const { projectName, currentFile } = code.current();
+  const parts = [
+    'Fecha y hora: ' + new Date().toLocaleString(),
+    'Proyecto abierto: ' + (projectName || 'ninguno'),
+    'Archivo abierto en el editor: ' + (currentFile || 'ninguno'),
+  ];
+  try { parts.push('Árbol del proyecto (resumen):\n' + await code.tree({ depth: 2 })); }
+  catch { /* aún sin proyecto */ }
+  // GROUNDING: incluye el contenido REAL de los archivos clave (README, config)
+  // para que el modelo NO alucine sobre el proyecto — el heal no domina las
+  // herramientas code.* así que le damos el material masticado.
+  for (const key of ['README.md', 'readme.md', 'package.json', 'pyproject.toml', 'Cargo.toml', 'go.mod']) {
+    try { const body = await code.read({ path: key }); parts.push(`Contenido REAL de ${key}:\n${body.slice(0, 1400)}`); break; } catch { /* siguiente */ }
+  }
+  if (currentFile) {
+    try {
+      const body = await code.read({ path: currentFile });
+      parts.push(`Contenido REAL del archivo abierto ${currentFile}:\n` + body.slice(0, 2000));
+    } catch { /* borrado */ }
+  }
+  return parts.join('\n');
+}

js/tools/web.js

@@ -0,0 +1,52 @@
+// Búsqueda y lectura web para la elfa de Code (docs, errores, APIs). fetch
+// directo si el sitio permite CORS; si no, cae al proxy del servidor
+// (/proxy?url=… → mismo backend que Elffuss Claw). Sin gate de permisos: un
+// agente de código necesita consultar internet de serie.
+const MAX = 8000;
+
+function toText(html) {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  doc.querySelectorAll('script,style,noscript,svg,iframe').forEach(n => n.remove());
+  return ((doc.body?.innerText || doc.body?.textContent || '').replace(/\n{3,}/g, '\n\n').trim()) || html.slice(0, MAX);
+}
+
+async function proxyGet(url) {
+  let lastErr;
+  for (const target of [url, '/proxy?url=' + encodeURIComponent(url)]) {
+    try { const r = await fetch(target); if (!r.ok) throw new Error('HTTP ' + r.status); return await r.text(); }
+    catch (e) { lastErr = e; }
+  }
+  throw lastErr || new Error('sin respuesta');
+}
+
+export async function fetchUrl({ url } = {}) {
+  if (!/^https?:\/\//.test(url || '')) throw new Error('URL inválida (usa https://…)');
+  const text = toText(await proxyGet(url));
+  return `[${url}]\n` + (text.length > MAX ? text.slice(0, MAX) + '\n… (recortado)' : text);
+}
+
+// Búsqueda REAL en DuckDuckGo. Parseo tolerante: cada resultado es un enlace
+// con ?uddg=<url real>. Independiente de clases (robusto a cambios de HTML).
+export async function search({ query } = {}) {
+  if (!query) throw new Error('Falta query');
+  let html = '';
+  for (const ep of ['https://html.duckduckgo.com/html/?q=', 'https://lite.duckduckgo.com/lite/?q=']) {
+    try { html = await proxyGet(ep + encodeURIComponent(query)); if (html.includes('uddg=') || html.includes('result')) break; }
+    catch { /* siguiente endpoint */ }
+  }
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const seen = new Set(), out = [];
+  for (const a of doc.querySelectorAll('a[href*="uddg="]')) {
+    const m = a.getAttribute('href').match(/uddg=([^&]+)/);
+    if (!m) continue;
+    const href = decodeURIComponent(m[1]);
+    const title = a.textContent.trim();
+    if (!title || title.length < 3 || seen.has(href)) continue;
+    seen.add(href);
+    const block = a.closest('tr, div, article') || a.parentElement;
+    const snip = (block?.textContent || '').replace(title, '').replace(/\s+/g, ' ').trim().slice(0, 160);
+    out.push(`• ${title}\n  ${href}${snip ? '\n  ' + snip : ''}`);
+    if (out.length >= 8) break;
+  }
+  return out.length ? `Resultados para «${query}»:\n\n` + out.join('\n\n') : `Sin resultados para «${query}».`;
+}

js/vcc/NOTICE.md

@@ -0,0 +1,8 @@
+# Vendorizado: VibeCodeViewer
+
+`model.js` y `builder.js` son copia VERBATIM de
+[Sendery/VibeCodeViewer](https://github.com/Sendery/VibeCodeViewer) (licencia
+**Apache-2.0**), el motor de la ciudad 3D. No se altera su lógica; solo se les
+alimenta el árbol del proyecto abierto (adaptador en `../city.js`) y `three` se
+resuelve por el import map de `index.html`. `ownership.js` es un stub mínimo
+(no usamos metadatos de propiedad) y `theme.js` es el tema «hacker» original.

js/vcc/builder.js

@@ -0,0 +1,668 @@
+// Construcción de la escena: ciudad de cristal nítida.
+// Receta anti-difuminado: aristas finas con colores HDR (el bloom solo se
+// dispara en lo resaltado), cristal con fresnel de opacidad mínima y nada
+// de volúmenes aditivos permanentes.
+// Toda la paleta viene del tema activo (src/themes.js); los temas claros
+// usan blending normal en lugar de aditivo.
+import * as THREE from 'three';
+
+function lerp3(a, b, t) { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; }
+function configureCanvasTexture(tx) {
+  tx.colorSpace = THREE.SRGBColorSpace;
+  tx.anisotropy = 8;
+  // Las texturas son texto fino sobre fondo transparente. Sin mipmaps, los
+  // píxeles transparentes no se mezclan con negro al orbitar y solaparse.
+  tx.generateMipmaps = false;
+  tx.minFilter = THREE.LinearFilter;
+  tx.magFilter = THREE.LinearFilter;
+  return tx;
+}
+
+// 12 aristas de una caja → 24 vértices
+const EDGE_PAIRS = [
+  [0, 1], [1, 3], [3, 2], [2, 0],
+  [4, 5], [5, 7], [7, 6], [6, 4],
+  [0, 4], [1, 5], [2, 6], [3, 7],
+];
+function corners(b) {
+  const x0 = b.cx - b.sx / 2, x1 = b.cx + b.sx / 2;
+  const y0 = b.cy - b.sy / 2, y1 = b.cy + b.sy / 2;
+  const z0 = b.cz - b.sz / 2, z1 = b.cz + b.sz / 2;
+  return [
+    [x0, y0, z0], [x1, y0, z0], [x0, y0, z1], [x1, y0, z1],
+    [x0, y1, z0], [x1, y1, z0], [x0, y1, z1], [x1, y1, z1],
+  ];
+}
+
+// ── suelo: placa de circuito impreso ──────────────────────────────────────
+function circuitTexture(theme) {
+  const T = theme.ground;
+  const S = 1024;
+  const cv = document.createElement('canvas');
+  cv.width = cv.height = S;
+  const g = cv.getContext('2d');
+  g.fillStyle = T.bg;
+  g.fillRect(0, 0, S, S);
+  g.strokeStyle = T.grid;
+  g.lineWidth = 1;
+  for (let i = 0; i <= S; i += 64) {
+    g.beginPath(); g.moveTo(i, 0); g.lineTo(i, S); g.stroke();
+    g.beginPath(); g.moveTo(0, i); g.lineTo(S, i); g.stroke();
+  }
+  const rnd = (() => { let s = 1234567; return () => (s = (s * 16807) % 2147483647) / 2147483647; })();
+  for (let i = 0; i < 260; i++) {
+    const isA = rnd() < 0.58;
+    const a = 0.18 + rnd() * 0.5;
+    const [tr, tg, tb] = isA ? T.traceA : T.traceB;
+    g.strokeStyle = `rgba(${tr}, ${tg}, ${tb}, ${isA ? a : a * 0.9})`;
+    g.lineWidth = rnd() < 0.12 ? 3 : 1.4;
+    let x = rnd() * S, y = rnd() * S;
+    g.beginPath(); g.moveTo(x, y);
+    const segs = 2 + Math.floor(rnd() * 4);
+    for (let sg = 0; sg < segs; sg++) {
+      const len = 24 + rnd() * 150;
+      if (rnd() < 0.5) x += rnd() < 0.5 ? len : -len; else y += rnd() < 0.5 ? len : -len;
+      g.lineTo(x, y);
+    }
+    g.stroke();
+    const [pr, pg, pb] = isA ? T.padA : T.padB;
+    g.fillStyle = `rgba(${pr}, ${pg}, ${pb}, ${a + 0.2})`;
+    const ps = 2 + rnd() * 3;
+    g.fillRect(x - ps / 2, y - ps / 2, ps, ps);
+  }
+  const tx = new THREE.CanvasTexture(cv);
+  tx.wrapS = tx.wrapT = THREE.RepeatWrapping;
+  tx.colorSpace = THREE.SRGBColorSpace;
+  tx.anisotropy = 8;
+  return tx;
+}
+
+// ── cristal con fresnel (bordes algo más vivos, centro casi invisible) ────
+function glassMaterial(theme, dim = 1, solid = 0) {
+  return new THREE.ShaderMaterial({
+    uniforms: {
+      uColor: { value: new THREE.Color(...theme.glass) },
+      uHi: { value: new THREE.Color(...theme.glassHi) },
+      uGlow: { value: 0 },
+      uDim: { value: dim },
+      uSolid: { value: solid },
+    },
+    vertexShader: /* glsl */`
+      varying vec3 vN, vV;
+      void main() {
+        vec4 mv = modelViewMatrix * vec4(position, 1.0);
+        vN = normalMatrix * normal;
+        vV = -mv.xyz;
+        gl_Position = projectionMatrix * mv;
+      }`,
+    fragmentShader: /* glsl */`
+      uniform vec3 uColor;
+      uniform vec3 uHi;
+      uniform float uGlow;
+      uniform float uDim;
+      uniform float uSolid;
+      varying vec3 vN, vV;
+      void main() {
+        float fr = pow(1.0 - abs(dot(normalize(vN), normalize(vV))), 2.6);
+        vec3 col = mix(uColor, uHi, uGlow);
+        float alpha = (0.022 + fr * 0.12 + uSolid * 0.12) * uDim + uGlow * 0.05;
+        gl_FragColor = vec4(col * ((0.5 + fr * 1.9) * uDim + uGlow), alpha);
+      }`,
+    transparent: true,
+    depthWrite: false,
+    side: THREE.DoubleSide,
+  });
+}
+
+// ── fachada: árbol de ficheros impreso sobre el cristal ───────────────────
+const FACADE_MAX_LINES = 150;
+
+function facadeLines(building) {
+  const lines = [];
+  let overflow = false;
+  (function walk(node, depth) {
+    if (lines.length > FACADE_MAX_LINES) { overflow = true; return; }
+    lines.push({ text: node.name + '/', depth, key: 'n' + node.id });
+    for (const c of node.children) walk(c, depth + 1);
+    for (const fid of node.fileIds) {
+      if (lines.length > FACADE_MAX_LINES) { overflow = true; return; }
+      const f = building.modelFiles[fid];
+      lines.push({ text: f.name, depth: depth + 1, key: 'f' + f.id });
+    }
+  })(building, 0);
+  if (overflow) lines.push({ text: '· · ·', depth: 1, key: '' });
+  return lines;
+}
+
+function drawFacade(building, highlight, theme) {
+  const cv = building.facadeCanvas;
+  if (!cv) return; // edificio sin fachada (recorte en ciudades enormes)
+  const g = cv.getContext('2d');
+  const W = cv.width, H = cv.height;
+  g.clearRect(0, 0, W, H);
+  const lines = building.facadeLineCache;
+  const fs = Math.max(9, Math.min(30, (H - 60) / (lines.length + 1)));
+  g.font = `${fs}px "JetBrains Mono", "Cascadia Code", monospace`;
+  g.textBaseline = 'top';
+  let y = 26;
+  for (const ln of lines) {
+    const x = 22 + ln.depth * fs * 1.1;
+    const hot = highlight && highlight.has(ln.key);
+    if (hot) {
+      g.shadowColor = theme.facade.hotGlow;
+      g.shadowBlur = 14;
+      g.fillStyle = theme.facade.hotBg;
+      g.fillRect(x - 6, y - 3, g.measureText(ln.text).width + 12, fs + 6);
+      g.fillStyle = theme.facade.hot;
+    } else {
+      g.shadowBlur = 0;
+      g.fillStyle = theme.facade.text;
+    }
+    g.fillText(ln.text, x, y);
+    y += fs * 1.18;
+    if (y > H - fs) break;
+  }
+  g.shadowBlur = 0;
+  building.facadeTexture.needsUpdate = true;
+}
+
+function buildFacade(building, model, group, theme) {
+  building.modelFiles = model.files;
+  building.facadeLineCache = facadeLines(building);
+  const b = building.box;
+  const H = 1024;
+  const W = Math.round(Math.min(2048, Math.max(256, H * (b.sx / b.sy))));
+  const cv = document.createElement('canvas');
+  cv.width = W; cv.height = H;
+  building.facadeCanvas = cv;
+  const tx = configureCanvasTexture(new THREE.CanvasTexture(cv));
+  building.facadeTexture = tx;
+  drawFacade(building, null, theme);
+  const mat = new THREE.MeshBasicMaterial({
+    map: tx, transparent: true, alphaTest: 0.025, depthWrite: false, side: THREE.FrontSide,
+    blending: theme.light ? THREE.NormalBlending : THREE.AdditiveBlending,
+  });
+  mat.userData.vccKind = 'facade';
+  const E = 0.14;
+  const faces = [
+    { w: b.sx, pos: [b.cx, b.cy, b.cz + b.sz / 2 + E], rot: 0 },
+    { w: b.sx, pos: [b.cx, b.cy, b.cz - b.sz / 2 - E], rot: Math.PI },
+    { w: b.sz, pos: [b.cx + b.sx / 2 + E, b.cy, b.cz], rot: Math.PI / 2 },
+    { w: b.sz, pos: [b.cx - b.sx / 2 - E, b.cy, b.cz], rot: -Math.PI / 2 },
+  ];
+  for (const f of faces) {
+    const plane = new THREE.Mesh(new THREE.PlaneGeometry(f.w, b.sy), mat);
+    plane.position.set(...f.pos);
+    plane.rotation.y = f.rot;
+    plane.renderOrder = 3;
+    group.add(plane);
+  }
+}
+
+// ── leyenda: nombres serigrafiados (suelo de distrito y tejado) ───────────
+function labelTexture(text, color) {
+  const fs = 96, pad = 40;
+  const probe = document.createElement('canvas').getContext('2d');
+  probe.font = `bold ${fs}px "JetBrains Mono", monospace`;
+  const tw = probe.measureText(text).width;
+  const cv = document.createElement('canvas');
+  cv.width = Math.ceil(tw + pad * 2 + 220);
+  cv.height = 190;
+  const g = cv.getContext('2d');
+  g.font = `bold ${fs}px "JetBrains Mono", monospace`;
+  g.textBaseline = 'middle';
+  // pista de circuito: línea con pads a ambos lados del texto
+  g.strokeStyle = color; g.globalAlpha = 0.65; g.lineWidth = 5;
+  const y = cv.height / 2;
+  g.beginPath(); g.moveTo(14, y); g.lineTo(pad + 60, y); g.stroke();
+  g.beginPath(); g.moveTo(pad + 100 + tw, y); g.lineTo(cv.width - 14, y); g.stroke();
+  g.fillStyle = color;
+  for (const px of [14, pad + 60, pad + 100 + tw, cv.width - 26]) g.fillRect(px - 7, y - 7, 14, 14);
+  g.globalAlpha = 0.92;
+  g.shadowColor = color; g.shadowBlur = 16;
+  g.fillText(text, pad + 80, y);
+  const tx = configureCanvasTexture(new THREE.CanvasTexture(cv));
+  return { tx, aspect: cv.width / cv.height };
+}
+
+const LEGEND_MAX_BUILDINGS = 400;
+
+function buildLegend(model, labeled, theme) {
+  const legend = new THREE.Group();
+  const add = (text, color, width, pos, flat) => {
+    const { tx, aspect } = labelTexture(text, color);
+    const w = Math.min(width, aspect * 8);
+    const mesh = new THREE.Mesh(
+      new THREE.PlaneGeometry(w, w / aspect),
+      new THREE.MeshBasicMaterial({
+        map: tx, transparent: true, alphaTest: 0.025, depthWrite: false,
+        blending: theme.light ? THREE.NormalBlending : THREE.AdditiveBlending,
+      }),
+    );
+    mesh.material.userData.vccKind = 'label';
+    if (flat) mesh.rotation.x = -Math.PI / 2;
+    mesh.position.set(...pos);
+    mesh.renderOrder = 4;
+    legend.add(mesh);
+  };
+  for (const di of model.districts) {
+    add(di.name, theme.labels.district, di.box.sx * 0.85,
+      [di.box.cx, 0.3, di.box.cz + di.box.sz / 2 - 2], true);
+  }
+  // urbanizaciones: mismo serigrafiado de suelo que los distritos, en tono
+  // intermedio; en monorepos se etiquetan las de mayor superficie
+  const urbs = [...model.urbs].sort((a, b) => b.box.sx * b.box.sz - a.box.sx * a.box.sz);
+  for (const u of urbs.slice(0, LEGEND_MAX_BUILDINGS)) {
+    add(u.name, theme.labels.urb, u.box.sx * 0.8,
+      [u.box.cx, 0.32, u.box.cz + u.box.sz / 2 - 1.4], true);
+  }
+  for (const b of labeled.slice(0, LEGEND_MAX_BUILDINGS)) {
+    if (b.isBasement) continue; // su tejado es la calle: sin etiqueta
+    add(b.name, theme.labels.building, b.box.sx * 0.95,
+      [b.box.cx, b.box.cy + b.box.sy / 2 + 0.12, b.box.cz], true);
+  }
+  return legend;
+}
+
+// ── ciudad completa ───────────────────────────────────────────────────────
+export function buildCity(scene, model, theme) {
+  const group = new THREE.Group();
+  scene.add(group);
+  // paleta del tema; en temas claros el blending aditivo no funciona
+  const ROLE_COLOR = theme.roleColor;
+  const HI = theme.hi;
+  const FILE_BASE = theme.fileBase;
+  const FILE_HI = theme.fileHi;
+  const BLEND = theme.light ? THREE.NormalBlending : THREE.AdditiveBlending;
+
+  // suelo
+  const extent = Math.max(model.city.box.sx, model.city.box.sz);
+  const ground = new THREE.Mesh(
+    new THREE.PlaneGeometry(extent * 7, extent * 7),
+    // semitransparente y a doble cara: los sótanos (ficheros ignorados)
+    // se intuyen a través del plano de circuitos. depthWrite: false — era el
+    // único material que escribía profundidad y, con el rango near/far de la
+    // ciudad, las plotas y serigrafías a ras de suelo hacían z-fighting
+    // (parpadeo en franjas) al mover la cámara
+    new THREE.MeshBasicMaterial({
+      map: circuitTexture(theme), transparent: true, opacity: 0.8, side: THREE.DoubleSide,
+      depthWrite: false,
+      // separa el suelo en el z-buffer de plotas y serigrafías a ras de
+      // suelo (evita el z-fighting cuando el modo opaco activa depthWrite)
+      polygonOffset: true, polygonOffsetFactor: 2, polygonOffsetUnits: 2,
+    }),
+  );
+  ground.material.map.repeat.set(7, 7);
+  ground.rotation.x = -Math.PI / 2;
+  ground.position.y = -0.05;
+  group.add(ground);
+
+  // aristas de las cajas en un único buffer con rangos por nodo.
+  // LOD por presupuesto para monorepos: decenas de miles de wireframes
+  // aditivos se acumulan en blanco. Distritos y edificios siempre dibujan;
+  // del interior se conservan las cajas más grandes y menos profundas.
+  const LINE_BUDGET = 12000;
+  const ROLE_DEPTH = { distrito: 0, urbanizacion: 0, edificio: 0, planta: 1, apartamento: 2, habitacion: 3, archivador: 4, cajon: 5 };
+  const candidates = model.nodes.filter(n => n.role !== 'ciudad' && n.box);
+  let boxNodes = candidates;
+  if (candidates.length > LINE_BUDGET) {
+    const score = (n) => (n.role === 'distrito' || n.role === 'urbanizacion' || n.role === 'edificio')
+      ? Infinity
+      : Math.max(n.box.sx, n.box.sy, n.box.sz) - ROLE_DEPTH[n.role] * 3;
+    boxNodes = candidates.sort((a, b) => score(b) - score(a)).slice(0, LINE_BUDGET);
+  }
+  const positions = new Float32Array(boxNodes.length * 24 * 3);
+  const colors = new Float32Array(boxNodes.length * 24 * 3);
+  // brillo de arista normalizado por edificio: el interior de un edificio
+  // reparte un presupuesto de luz constante (mismo principio que las celdas)
+  const boxesPerBuilding = new Map();
+  for (const n of boxNodes) {
+    if (n.building && n.building !== n) {
+      boxesPerBuilding.set(n.building.id, (boxesPerBuilding.get(n.building.id) ?? 0) + 1);
+    }
+  }
+  // …y una atenuación global suave en ciudades con miles de edificios:
+  // uniforme (todos los edificios conservan el mismo aspecto entre sí),
+  // solo evita que la acumulación aditiva a vista de pájaro se queme
+  const cityDim = Math.min(1, Math.max(0.45, Math.sqrt(900 / Math.max(model.buildings.length, 1))));
+  for (const n of boxNodes) {
+    const local = (!n.building || n.building === n)
+      ? 1
+      : Math.min(1, Math.max(0.12, 30 / (boxesPerBuilding.get(n.building.id) ?? 1)));
+    // las plotas (distrito y urbanización) son solo perímetro: siempre nítidas
+    n.lineDim = (n.role === 'distrito' || n.role === 'urbanizacion') ? 1 : local * cityDim;
+  }
+
+  let v = 0;
+  for (const node of boxNodes) {
+    node.lineStart = v;
+    const cs = corners(node.box);
+    const base = (ROLE_COLOR[node.role] ?? ROLE_COLOR.cajon).map(c => c * node.lineDim);
+    node.baseColor = base;
+    for (const [a, b] of EDGE_PAIRS) {
+      for (const p of [cs[a], cs[b]]) {
+        positions[v * 3] = p[0]; positions[v * 3 + 1] = p[1]; positions[v * 3 + 2] = p[2];
+        colors[v * 3] = base[0]; colors[v * 3 + 1] = base[1]; colors[v * 3 + 2] = base[2];
+        v++;
+      }
+    }
+  }
+  const lineGeo = new THREE.BufferGeometry();
+  lineGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  lineGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  lineGeo.computeBoundingSphere();
+  // opacidad adaptativa: cuantas más cajas, más tenue cada arista
+  const lineOpacity = Math.min(0.95, Math.max(0.4, Math.sqrt(4000 / Math.max(boxNodes.length, 1))));
+  const lineBaseOpacity = lineOpacity;
+  const lines = new THREE.LineSegments(lineGeo, new THREE.LineBasicMaterial({
+    vertexColors: true, transparent: true, opacity: lineOpacity,
+    blending: BLEND, depthWrite: false,
+  }));
+  lines.renderOrder = 2;
+  group.add(lines);
+
+  // carcasas de cristal por edificio (también sirven para el raycast).
+  // En ciudades enormes las fachadas con texto se reservan a los edificios
+  // más grandes (una textura canvas por edificio no escala a miles).
+  const byArea = [...model.buildings].sort(
+    (a, b) => b.box.sx * b.box.sz - a.box.sx * a.box.sz);
+  const facadeSet = new Set(byArea.slice(0, 250));
+  const shells = [];
+  for (const b of model.buildings) {
+    const mat = glassMaterial(theme, cityDim, b.onlyBasement ? 1 : 0);
+    mat.userData.baseDim = cityDim;
+    const mesh = new THREE.Mesh(new THREE.BoxGeometry(b.box.sx, b.box.sy, b.box.sz), mat);
+    mesh.position.set(b.box.cx, b.box.cy, b.box.cz);
+    mesh.renderOrder = 1;
+    mesh.userData.building = b;
+    b.shell = mesh;
+    shells.push(mesh);
+    group.add(mesh);
+    if (facadeSet.has(b)) buildFacade(b, model, group, theme);
+  }
+
+  // forjados de las plantas (losa fina, casi invisible); con tope en
+  // monorepos, priorizando las plantas de mayor superficie
+  let slabNodes = model.nodes.filter(n => n.role === 'planta');
+  if (slabNodes.length > 4000) {
+    slabNodes = slabNodes
+      .sort((a, b) => b.box.sx * b.box.sz - a.box.sx * a.box.sz)
+      .slice(0, 4000);
+  }
+  if (slabNodes.length) {
+    const slabGeo = new THREE.BoxGeometry(1, 1, 1);
+    const slabMat = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(...theme.slab), transparent: true,
+      opacity: Math.min(0.045, 0.045 * Math.sqrt(1500 / slabNodes.length)),
+      depthWrite: false, blending: BLEND,
+    });
+    const slabs = new THREE.InstancedMesh(slabGeo, slabMat, slabNodes.length);
+    const m = new THREE.Matrix4();
+    slabNodes.forEach((n, i) => {
+      m.makeScale(n.box.sx, 0.12, n.box.sz);
+      m.setPosition(n.box.cx, n.box.cy - n.box.sy / 2, n.box.cz);
+      slabs.setMatrixAt(i, m);
+    });
+    slabs.computeBoundingSphere();
+    slabs.renderOrder = 1;
+    group.add(slabs);
+  }
+
+  // celdas de fichero (instanciadas)
+  const fileGeo = new THREE.BoxGeometry(1, 1, 1);
+  const fileMat = new THREE.MeshBasicMaterial({
+    transparent: true, opacity: 0.9, depthWrite: false, blending: BLEND,
+  });
+  const fileBaseOpacity = fileMat.opacity;
+  const filesMesh = new THREE.InstancedMesh(fileGeo, fileMat, model.files.length);
+  {
+    const m = new THREE.Matrix4();
+    const c = new THREE.Color();
+    for (const f of model.files) {
+      m.makeScale(f.box.sx, f.box.sy, f.box.sz);
+      m.setPosition(f.box.cx, f.box.cy, f.box.cz);
+      filesMesh.setMatrixAt(f.id, m);
+      filesMesh.setColorAt(f.id, c.setRGB(...FILE_BASE));
+    }
+    filesMesh.instanceColor.needsUpdate = true;
+    filesMesh.computeBoundingSphere();
+  }
+  filesMesh.renderOrder = 2;
+  group.add(filesMesh);
+
+  // cajas de relleno para los niveles encendidos (pool reutilizable)
+  const fillPool = [];
+  for (let i = 0; i < 10; i++) {
+    const mesh = new THREE.Mesh(
+      new THREE.BoxGeometry(1, 1, 1),
+      new THREE.MeshBasicMaterial({
+        color: new THREE.Color(...theme.fill), transparent: true, opacity: 0,
+        depthWrite: false, blending: BLEND,
+      }),
+    );
+    mesh.visible = false;
+    mesh.renderOrder = 2;
+    group.add(mesh);
+    fillPool.push(mesh);
+  }
+
+  // ── API de iluminación ──────────────────────────────────────────────
+  const touchedNodes = new Set();
+  const touchedFiles = new Set();
+  const colorAttr = lineGeo.getAttribute('color');
+  const tmpColor = new THREE.Color();
+  // atenuación normalizada por edificio: cada edificio reparte un presupuesto
+  // de luz constante entre sus celdas — así un rascacielos con 50k ficheros
+  // no se quema y uno con 20 sigue viéndose igual que antes
+  const filesPerBuilding = new Map();
+  for (const f of model.files) {
+    const b = f.node.building;
+    if (b) filesPerBuilding.set(b.id, (filesPerBuilding.get(b.id) ?? 0) + 1);
+  }
+  const dimOf = (f) => {
+    const n = filesPerBuilding.get(f.node.building?.id) ?? 1;
+    return Math.min(1, Math.max(0.05, 350 / n)) * cityDim;
+  };
+  // color base por fichero, reescribible por los modos de coloreado
+  const fileBase = model.files.map(f => FILE_BASE.map(c => c * dimOf(f)));
+
+  function paintNode(node, glow, hi = HI) {
+    // los nodos diminutos no tienen aristas (LOD): solo carcasa/relleno
+    if (node.lineStart !== undefined) {
+      const col = lerp3(node.baseColor, hi, Math.pow(glow, 1.35));
+      for (let i = node.lineStart; i < node.lineStart + 24; i++) {
+        colorAttr.array[i * 3] = col[0];
+        colorAttr.array[i * 3 + 1] = col[1];
+        colorAttr.array[i * 3 + 2] = col[2];
+      }
+      // subida parcial: en monorepos el buffer completo pesa decenas de MB
+      colorAttr.addUpdateRange(node.lineStart * 3, 72);
+      colorAttr.needsUpdate = true;
+    }
+    if (node.shell) node.shell.material.uniforms.uGlow.value = glow * 0.3;
+    if (glow > 0.01) touchedNodes.add(node); else touchedNodes.delete(node);
+  }
+
+  function paintFile(fileId, glow, hi = FILE_HI) {
+    const col = lerp3(fileBase[fileId], hi, glow);
+    filesMesh.setColorAt(fileId, tmpColor.setRGB(...col));
+    filesMesh.instanceColor.addUpdateRange(fileId * 3, 3);
+    filesMesh.instanceColor.needsUpdate = true;
+    if (glow > 0.01) touchedFiles.add(fileId); else touchedFiles.delete(fileId);
+  }
+
+  function clearGlows() {
+    for (const n of [...touchedNodes]) paintNode(n, 0);
+    for (const f of [...touchedFiles]) paintFile(f, 0);
+    for (const mesh of fillPool) mesh.visible = false;
+  }
+
+  // haces del modo Blast: del fichero seleccionado a sus relacionados,
+  // con pulsos viajando por la línea como paquetes de datos
+  let blastBeams = null;
+  function setBlastBeams(pairs) {
+    if (blastBeams) {
+      group.remove(blastBeams);
+      blastBeams.geometry.dispose();
+      blastBeams.material.dispose();
+      blastBeams = null;
+    }
+    if (!pairs?.length) return;
+    // pairs: { a, b, impact } — impact=true: b depende del seleccionado
+    // (consecuencias de un cambio); el pulso siempre viaja en el sentido de
+    // la propagación: hacia fuera en impactos, hacia dentro en dependencias
+    const pos = new Float32Array(pairs.length * 6);
+    const dist = new Float32Array(pairs.length * 2);
+    const dir = new Float32Array(pairs.length * 2);
+    pairs.forEach(({ a, b, impact }, i) => {
+      pos.set(a, i * 6);
+      pos.set(b, i * 6 + 3);
+      const len = Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2]);
+      dist[i * 2] = impact ? 0 : len;
+      dist[i * 2 + 1] = impact ? len : 0;
+      dir[i * 2] = dir[i * 2 + 1] = impact ? 1 : 0;
+    });
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+    geo.setAttribute('aDist', new THREE.BufferAttribute(dist, 1));
+    geo.setAttribute('aDir', new THREE.BufferAttribute(dir, 1));
+    blastBeams = new THREE.LineSegments(geo, new THREE.ShaderMaterial({
+      uniforms: {
+        uTime: { value: 0 },
+        uColor: { value: new THREE.Color(...theme.beam) },
+        uColorIn: { value: new THREE.Color(...(theme.beamIn ?? theme.beam)) },
+      },
+      vertexShader: /* glsl */`
+        attribute float aDist;
+        attribute float aDir;
+        varying float vD;
+        varying float vDir;
+        void main() {
+          vD = aDist;
+          vDir = aDir;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }`,
+      fragmentShader: /* glsl */`
+        uniform float uTime;
+        uniform vec3 uColor;
+        uniform vec3 uColorIn;
+        varying float vD;
+        varying float vDir;
+        void main() {
+          // tren de pulsos avanzando por la línea (cada ~8 unidades); la
+          // línea base se mantiene bien visible entre pulsos
+          float w = fract(vD * 0.125 - uTime * 1.4);
+          float pulse = exp(-pow((w - 0.2) * 6.0, 2.0));
+          vec3 col = mix(uColor, uColorIn, vDir);
+          gl_FragColor = vec4(col * (0.6 + pulse * 2.4), 0.5 + pulse * 0.5);
+        }`,
+      transparent: true,
+      blending: BLEND,
+      depthWrite: false,
+    }));
+    blastBeams.renderOrder = 3;
+    group.add(blastBeams);
+  }
+
+  function tickBeams(timeMs) {
+    if (blastBeams) blastBeams.material.uniforms.uTime.value = timeMs / 1000;
+  }
+
+  // modos de coloreado: reescribe los colores base de nodos y ficheros
+  // (fileColorFn/nodeColorFn → [r,g,b] o null para el color por defecto)
+  function setModeColors(fileColorFn, nodeColorFn) {
+    for (const node of boxNodes) {
+      const col = nodeColorFn?.(node) ?? (ROLE_COLOR[node.role] ?? ROLE_COLOR.cajon);
+      node.baseColor = col.map(c => c * (node.lineDim ?? 1));
+      paintNode(node, 0);
+    }
+    for (const f of model.files) {
+      const dim = dimOf(f);
+      const col = fileColorFn?.(f) ?? FILE_BASE;
+      fileBase[f.id] = col.map(c => c * dim);
+      paintFile(f.id, 0);
+    }
+    // se ha tocado todo: mejor una única subida completa que miles de rangos
+    colorAttr.clearUpdateRanges();
+    filesMesh.instanceColor.clearUpdateRanges();
+  }
+
+  function fillBoxes(boxesWithGlow) {
+    fillPool.forEach((mesh, i) => {
+      const entry = boxesWithGlow[i];
+      if (!entry) { mesh.visible = false; return; }
+      const { box, glow } = entry;
+      mesh.scale.set(box.sx, box.sy, box.sz);
+      mesh.position.set(box.cx, box.cy, box.cz);
+      mesh.material.opacity = 0.008 + glow * 0.045;
+      mesh.visible = true;
+    });
+  }
+
+  // leyenda serigrafiada (conmutable)
+  const legend = buildLegend(model, byArea, theme);
+  group.add(legend);
+
+  let groundOpaque = false;
+  const groundBaseOpacity = 0.8;
+  let visualSettings = {};
+  function setVisuals(v = {}) {
+    visualSettings = { ...visualSettings, ...v };
+    const linesMul = visualSettings.lines ?? 1;
+    const filesMul = visualSettings.files ?? 1;
+    const glassMul = visualSettings.glass ?? 1;
+    const facadeMul = visualSettings.facades ?? 1;
+    const labelMul = visualSettings.labels ?? 1;
+    const groundMul = visualSettings.ground ?? 1;
+
+    lines.material.opacity = Math.min(1, lineBaseOpacity * linesMul);
+    fileMat.opacity = Math.min(1, fileBaseOpacity * filesMul);
+    if (!groundOpaque) ground.material.opacity = Math.min(1, groundBaseOpacity * groundMul);
+
+    for (const shell of shells) {
+      const mat = shell.material;
+      mat.uniforms.uDim.value = (mat.userData.baseDim ?? cityDim) * glassMul;
+    }
+    group.traverse((o) => {
+      const mats = Array.isArray(o.material) ? o.material : [o.material];
+      for (const mat of mats) {
+        if (mat?.userData?.vccKind === 'facade') mat.opacity = Math.min(1, facadeMul);
+        if (mat?.userData?.vccKind === 'label') mat.opacity = Math.min(1, labelMul);
+      }
+    });
+  }
+
+  function dispose() {
+    scene.remove(group);
+    const geometries = new Set();
+    const materials = new Set();
+    group.traverse((o) => {
+      if (o.geometry) geometries.add(o.geometry);
+      for (const m of Array.isArray(o.material) ? o.material : [o.material]) {
+        if (m) materials.add(m);
+      }
+    });
+    for (const g of geometries) g.dispose();
+    for (const m of materials) {
+      m.map?.dispose?.();
+      m.dispose();
+    }
+  }
+
+  return {
+    group, lines, shells, filesMesh, ground, legend,
+    paintNode, paintFile, clearGlows, fillBoxes, dispose, setModeColors, setBlastBeams, tickBeams, setVisuals,
+    setLegend: (v) => { legend.visible = v; },
+    // suelo opaco/translúcido. Opaco = escribe profundidad y se dibuja en la
+    // pasada de opacos: oculta de verdad los sótanos (ficheros ignorados)
+    setGroundOpaque: (v) => {
+      groundOpaque = v;
+      const m = ground.material;
+      m.opacity = v ? 1 : Math.min(1, groundBaseOpacity * (visualSettings.ground ?? 1));
+      m.transparent = !v;
+      m.depthWrite = v;
+      m.needsUpdate = true;
+    },
+    redrawFacade: (building, highlightKeys) => drawFacade(building, highlightKeys, theme),
+  };
+}

js/vcc/model.js

@@ -0,0 +1,360 @@
+// Modelo: convierte el árbol del repo en una ciudad con cajas anidadas.
+// Jerarquía: ciudad → distrito → edificio → planta → apartamento → habitación
+//            → archivador → cajón → fichero (los ficheros pueden vivir en
+//            cualquier nivel: se les reserva un hueco en su contenedor).
+// Cuando un subárbol es demasiado profundo/poblado para un solo edificio,
+// se interpone una «urbanización»: una plota dentro del distrito que agrupa
+// procedualmente a sus subcarpetas como edificios (recursivo), de modo que
+// la profundidad sobrante se despliega por la ciudad en vez de comprimirse.
+// Los ficheros ignorados (.gitignore y equivalentes) se separan en un
+// sótano espejado bajo el plano de circuitos.
+import { makeOwnerResolver } from './ownership.js';
+
+export const ROLES = ['ciudad', 'distrito', 'edificio', 'planta', 'apartamento', 'habitacion', 'archivador', 'cajon'];
+const ROLE_AXIS = { planta: 'y', apartamento: 'x', habitacion: 'z', archivador: 'x', cajon: 'y' };
+
+const STREET = 14;        // separación entre distritos
+const ALLEY = 4;          // separación entre edificios
+const URB_PAD = 3;        // margen interior de una urbanización
+// un edificio absorbe 5 niveles (planta→…→cajón); más allá, urbanización
+const URB_DEPTH = 5;
+const URB_MIN_FILES = 200;
+const URB_MAX_FILES = 2000; // aun siendo poco profundo, esto no cabe en uno
+const GROUND_Y = 0;
+
+let nextNode = 0;
+let nextFile = 0;
+
+function hash01(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
+  return ((h >>> 0) % 1000) / 1000;
+}
+
+function unpack(packed) {
+  const [name, dirs, leaf] = packed;
+  const node = { name, dirs: dirs.map(unpack), leaf: leaf.map(([n, s, ig]) => ({ name: n, size: s, ignored: !!ig })) };
+  node.files = node.leaf.length + node.dirs.reduce((a, d) => a + d.files, 0);
+  node.size = node.leaf.reduce((a, f) => a + f.size, 0) + node.dirs.reduce((a, d) => a + d.size, 0);
+  return node;
+}
+
+function recount(node) {
+  node.files = node.leaf.length + node.dirs.reduce((a, d) => a + d.files, 0);
+  node.size = node.leaf.reduce((a, f) => a + f.size, 0) + node.dirs.reduce((a, d) => a + d.size, 0);
+  return node;
+}
+
+// separa un subárbol en parte visible y parte ignorada (sótano)
+function splitSrc(src) {
+  const kept = { name: src.name, dirs: [], leaf: src.leaf.filter(f => !f.ignored) };
+  const ign = { name: src.name, dirs: [], leaf: src.leaf.filter(f => f.ignored) };
+  for (const d of src.dirs) {
+    const s = splitSrc(d);
+    if (s.kept.files) kept.dirs.push(s.kept);
+    if (s.ign.files) ign.dirs.push(s.ign);
+  }
+  return { kept: recount(kept), ign: recount(ign) };
+}
+
+function makeNode(model, name, role, parent, { virtual = false } = {}) {
+  const node = {
+    id: nextNode++, name, role, parent, children: [], fileIds: [],
+    virtual, box: null, building: null,
+    path: parent ? (virtual ? parent.path : `${parent.path}/${name}`) : name,
+  };
+  if (parent) parent.children.push(node);
+  model.nodes.push(node);
+  return node;
+}
+
+function addFiles(model, node, leaf) {
+  for (const f of leaf) {
+    const file = {
+      id: nextFile++, name: f.name, size: f.size, node,
+      path: `${node.path}/${f.name}`, box: null,
+    };
+    node.fileIds.push(file.id);
+    model.files.push(file);
+  }
+}
+
+// ── dimensiones de edificio ───────────────────────────────────────────────
+function buildingDims(src) {
+  const kb = src.size / 1024;
+  const side = Math.min(22, Math.max(6, 4 + Math.log2(1 + kb) * 1.5));
+  const j = hash01(src.name);
+  const w = side * (0.85 + 0.3 * j);
+  const d = side * (0.85 + 0.3 * (1 - j));
+  const floors = Math.max(1, src.dirs.length + (src.leaf.length ? 1 : 0));
+  const h = Math.max(6, Math.max(floors * 3.0, 6 + src.files * 1.8));
+  return { w, d, h: Math.min(h, 80) };
+}
+
+// ── reparto de un eje en franjas ponderadas ───────────────────────────────
+function splitAxis(box, axis, weights, inset) {
+  const total = weights.reduce((a, b) => a + b, 0);
+  const span = box['s' + axis];
+  const start = box['c' + axis] - span / 2;
+  const gap = Math.min(inset, span * 0.04);
+  const usable = span - gap * (weights.length + 1);
+  const out = [];
+  let cursor = start + gap;
+  for (const w of weights) {
+    const s = usable * (w / total);
+    out.push({ ...box, ['c' + axis]: cursor + s / 2, ['s' + axis]: s });
+    cursor += s + gap;
+  }
+  return out;
+}
+
+function shrink(box, f) {
+  return { ...box, sx: box.sx * f, sy: box.sy * f, sz: box.sz * f };
+}
+
+// ── celdas de fichero dentro de su contenedor ─────────────────────────────
+function placeFiles(model, node, box, files) {
+  const n = files.length;
+  if (!n) return;
+  if (node.role === 'cajon') {
+    // carpetas colgantes: láminas verticales en fila
+    const slabs = splitAxis({ ...box, sy: box.sy * 0.72, cy: box.cy - box.sy * 0.1 }, 'x',
+      files.map(() => 1), 0.05);
+    files.forEach((fid, i) => {
+      const s = slabs[i];
+      model.files[fid].box = { ...s, sx: Math.min(s.sx * 0.55, 0.5), sz: s.sz * 0.78 };
+    });
+    return;
+  }
+  // rejilla de cubos apoyada en el suelo del contenedor
+  const aspect = box.sx / box.sz || 1;
+  const cols = Math.max(1, Math.round(Math.sqrt(n * aspect)));
+  const rows = Math.ceil(n / cols);
+  const cw = box.sx / cols, cd = box.sz / rows;
+  const base = Math.min(cw, cd, box.sy) * 0.5;
+  files.forEach((fid, i) => {
+    const f = model.files[fid];
+    const col = i % cols, row = Math.floor(i / cols);
+    const k = 0.65 + 0.45 * Math.min(1, Math.log2(2 + f.size / 1024) / 8);
+    const s = Math.max(0.25, base * k);
+    f.box = {
+      cx: box.cx - box.sx / 2 + cw * (col + 0.5),
+      cz: box.cz - box.sz / 2 + cd * (row + 0.5),
+      cy: box.cy - box.sy / 2 + s / 2 + 0.05,
+      sx: s, sy: s, sz: s,
+    };
+  });
+}
+
+// ── subdivisión recursiva del interior del edificio ───────────────────────
+// flipY: en los sótanos las plantas crecen hacia abajo (dirección inversa)
+function layoutInterior(model, node, src, box, role, flipY = false) {
+  node.box = box;
+  const dirs = src.dirs;
+  const hasFiles = src.leaf.length > 0;
+  addFiles(model, node, src.leaf);
+
+  if (!dirs.length) {
+    placeFiles(model, node, shrink(box, 0.9), node.fileIds);
+    return;
+  }
+  const childRole = ROLES[Math.min(ROLES.indexOf(role) + 1, ROLES.length - 1)];
+  const axis = ROLE_AXIS[childRole] ?? 'y';
+  const weights = dirs.map(d => 1 + Math.sqrt(d.files));
+  if (hasFiles) weights.push(0.8 + Math.sqrt(src.leaf.length) * 0.7);
+  const slices = splitAxis(box, axis, weights, 0.5);
+  if (flipY && axis === 'y') slices.reverse();
+  dirs.forEach((d, i) => {
+    const child = makeNode(model, d.name, childRole, node);
+    child.building = node.building;
+    layoutInterior(model, child, d, shrink(slices[i], 0.94), childRole, flipY);
+  });
+  if (hasFiles) placeFiles(model, node, shrink(slices[slices.length - 1], 0.9), node.fileIds);
+}
+
+// ── empaquetado en rejilla (edificios en distrito, distritos en ciudad) ───
+function packGrid(items, gap) {
+  // items: { w, d } → coloca en filas; devuelve posiciones y tamaño del plot
+  const area = items.reduce((a, it) => a + (it.w + gap) * (it.d + gap), 0);
+  const targetW = Math.max(Math.sqrt(area) * 1.15, ...items.map(it => it.w + gap));
+  let x = 0, z = 0, rowD = 0, plotW = 0;
+  const pos = [];
+  for (const it of items) {
+    if (x > 0 && x + it.w > targetW) { x = 0; z += rowD + gap; rowD = 0; }
+    pos.push({ x: x + it.w / 2, z: z + it.d / 2 });
+    x += it.w + gap;
+    rowD = Math.max(rowD, it.d);
+    plotW = Math.max(plotW, x - gap);
+  }
+  return { pos, w: plotW, d: z + rowD };
+}
+
+function subtreeDepth(src) {
+  let d = 0;
+  for (const s of src.dirs) d = Math.max(d, 1 + subtreeDepth(s));
+  return d;
+}
+
+// ¿demasiado profundo y poblado para un solo edificio? → urbanización
+function needsUrb(src) {
+  if (src.virtual || !src.dirs.length) return false;
+  if (src.files > URB_MAX_FILES) return true;
+  return src.files > URB_MIN_FILES && subtreeDepth(src) > URB_DEPTH;
+}
+
+function fileBlockSrc(leaf) {
+  return { name: '(ficheros)', dirs: [], leaf, files: leaf.length, size: leaf.reduce((a, f) => a + f.size, 0), virtual: true };
+}
+
+// un «bloque» es lo que ocupa una parcela: un edificio o una urbanización.
+// Devuelve { w, d, place(cx, cz) } para el empaquetado en rejilla.
+function buildBlock(model, parent, src) {
+  if (needsUrb(src)) return buildUrb(model, parent, src);
+  const split = splitSrc(src);
+  const b = makeNode(model, src.name, 'edificio', parent, { virtual: !!src.virtual });
+  b.building = b;
+  b.dims = buildingDims(split.kept.files ? split.kept : src);
+  // sin nada en superficie y todo en el sótano: búnker bajo y más opaco
+  // que señala que la información está bajo el suelo
+  if (!split.kept.files && split.ign.files) {
+    b.onlyBasement = true;
+    b.dims.h = 3;
+  }
+  b.srcKept = split.kept;
+  b.srcIgn = split.ign;
+  model.buildings.push(b);
+  return { w: b.dims.w, d: b.dims.d, place: (cx, cz) => placeBuilding(model, b, cx, cz) };
+}
+
+function buildUrb(model, parent, src) {
+  const urb = makeNode(model, src.name, 'urbanizacion', parent);
+  const childSrcs = [...src.dirs];
+  if (src.leaf.length) childSrcs.push(fileBlockSrc(src.leaf));
+  const blocks = childSrcs.map(s => buildBlock(model, urb, s));
+  const grid = packGrid(blocks, ALLEY);
+  const w = grid.w + URB_PAD * 2, d = grid.d + URB_PAD * 2;
+  model.urbs.push(urb);
+  return {
+    w, d,
+    place: (cx, cz) => {
+      urb.box = { cx, cy: GROUND_Y + 0.26, cz, sx: w, sy: 0.14, sz: d };
+      const ox = cx - w / 2 + URB_PAD, oz = cz - d / 2 + URB_PAD;
+      blocks.forEach((blk, i) => blk.place(ox + grid.pos[i].x, oz + grid.pos[i].z));
+    },
+  };
+}
+
+function placeBuilding(model, b, cx, cz) {
+  const { w, d, h } = b.dims;
+  layoutInterior(model, b, b.srcKept, { cx, cz, cy: GROUND_Y + h / 2, sx: w, sy: h, sz: d }, 'edificio');
+  // sótano: los ficheros ignorados crecen hacia abajo, mismo patrón invertido
+  if (b.srcIgn.files) {
+    const hb = Math.min(60, Math.max(5, Math.max(
+      (b.srcIgn.dirs.length + (b.srcIgn.leaf.length ? 1 : 0)) * 3.0,
+      5 + b.srcIgn.files * 1.6,
+    )));
+    const bb = makeNode(model, b.name, 'edificio', b.parent, { virtual: b.virtual });
+    bb.building = bb;
+    bb.isBasement = true;
+    model.buildings.push(bb);
+    layoutInterior(model, bb, b.srcIgn,
+      { cx, cz, cy: GROUND_Y - 0.7 - hb / 2, sx: w, sy: hb, sz: d }, 'edificio', true);
+  }
+  delete b.srcKept; delete b.srcIgn;
+}
+
+function buildDistrict(model, city, srcDir, files) {
+  const district = makeNode(model, srcDir ? srcDir.name : '(raíz)', 'distrito', city, { virtual: !srcDir });
+  const blockSrcs = [];
+  if (srcDir) {
+    for (const d of srcDir.dirs) blockSrcs.push(d);
+    if (srcDir.leaf.length) blockSrcs.push(fileBlockSrc(srcDir.leaf));
+  } else {
+    blockSrcs.push(fileBlockSrc(files));
+  }
+  const blocks = blockSrcs.map(s => buildBlock(model, district, s));
+  const grid = packGrid(blocks, ALLEY);
+  district.plot = { w: grid.w + ALLEY * 2, d: grid.d + ALLEY * 2 };
+  district.blocks = blocks;
+  district.grid = grid;
+  model.districts.push(district);
+  return district;
+}
+
+export function buildModel(packedTree, meta = null) {
+  nextNode = 0; nextFile = 0;
+  const model = { nodes: [], files: [], buildings: [], districts: [], urbs: [], city: null };
+  const root = unpack(packedTree);
+  const city = makeNode(model, root.name, 'ciudad', null);
+  model.city = city;
+
+  for (const d of root.dirs) buildDistrict(model, city, d, []);
+  if (root.leaf.length) buildDistrict(model, city, null, root.leaf);
+
+  // colocar distritos en la ciudad
+  const plots = model.districts.map(di => ({ w: di.plot.w, d: di.plot.d }));
+  const cityGrid = packGrid(plots, STREET);
+  const ox = -cityGrid.w / 2, oz = -cityGrid.d / 2;
+  model.districts.forEach((di, i) => {
+    const p = cityGrid.pos[i];
+    const px = ox + p.x, pz = oz + p.z;
+    di.box = { cx: px, cy: GROUND_Y + 0.12, cz: pz, sx: di.plot.w, sy: 0.24, sz: di.plot.d };
+    const bx = px - di.plot.w / 2 + ALLEY, bz = pz - di.plot.d / 2 + ALLEY;
+    di.blocks.forEach((blk, j) => blk.place(bx + di.grid.pos[j].x, bz + di.grid.pos[j].z));
+    delete di.blocks; delete di.grid;
+  });
+  city.box = { cx: 0, cy: 0, cz: 0, sx: cityGrid.w + STREET * 2, sy: 1, sz: cityGrid.d + STREET * 2 };
+
+  // cadena de ancestros por fichero (para la iluminación jerárquica)
+  // + metadatos git y code ownership por fichero
+  const rootPrefix = city.name + '/';
+  const resolveOwner = makeOwnerResolver(meta?.owners);
+  const ownerIndex = new Map();
+  for (const f of model.files) {
+    const chain = [];
+    for (let n = f.node; n; n = n.parent) chain.push(n);
+    f.chain = chain; // del contenedor inmediato hacia la ciudad
+    f.rel = f.path.startsWith(rootPrefix) ? f.path.slice(rootPrefix.length) : f.path;
+    const g = meta?.git?.[f.rel];
+    f.git = g ? { st: g[0], a: g[1], d: g[2] } : null;
+    const owner = resolveOwner(f.rel);
+    if (owner != null) {
+      if (!ownerIndex.has(owner)) ownerIndex.set(owner, ownerIndex.size);
+      f.owner = ownerIndex.get(owner);
+    } else {
+      f.owner = null;
+    }
+  }
+  model.owners = [...ownerIndex.keys()];
+  model.hasGit = !!meta?.git;
+
+  applyCodeMeta(model, meta?.links, meta?.codeIndex);
+  model.fileByRel = new Map(model.files.map(f => [f.rel, f]));
+  model.dirByRel = new Map();
+  for (const n of model.nodes) {
+    if (n.role === 'ciudad' || n.virtual || n.isBasement || n.building?.isBasement) continue;
+    const rel = n.path.startsWith(rootPrefix) ? n.path.slice(rootPrefix.length) : n.path;
+    if (!model.dirByRel.has(rel)) model.dirByRel.set(rel, n);
+  }
+  return model;
+}
+
+// enlaces de código (modo Blast): adyacencia saliente y entrante. Es una
+// función aparte porque el análisis perezoso los refresca por lotes sobre
+// el modelo ya construido, sin reconstruir la ciudad.
+export function applyCodeMeta(model, links, codeIndex) {
+  model.linksOut = links ?? {};
+  model.linksIn = {};
+  for (const [src, toks] of Object.entries(model.linksOut)) {
+    for (const tok of toks) {
+      if (tok.startsWith('F:')) (model.linksIn[tok.slice(2)] ??= []).push(src);
+    }
+  }
+  // índice de símbolos (funciones/clases/tipos): aristas "src usa sym de target"
+  model.defs = codeIndex?.defs ?? {};
+  model.symOut = codeIndex?.symLinks ?? {};
+  model.symIn = {};
+  for (const [src, edges] of Object.entries(model.symOut)) {
+    for (const [target, sym] of edges) (model.symIn[target] ??= []).push([src, sym]);
+  }
+}

js/vcc/ownership.js

@@ -0,0 +1,5 @@
+// Stub de code-ownership: Elffuss Code no alimenta metadatos de propiedad, así
+// que makeOwnerResolver devuelve siempre null (file.owner = null en model.js).
+// El original (Sendery/VibeCodeViewer, Apache-2.0) parsea CODEOWNERS/package
+// meta; aquí no hace falta para dibujar la ciudad.
+export function makeOwnerResolver() { return () => null; }

js/vcc/theme.js

@@ -0,0 +1,28 @@
+// Tema «hacker» de VibeCodeViewer (Sendery/VibeCodeViewer, Apache-2.0),
+// copiado de src/themes.js. Es la paleta que consume builder.js.
+export const THEME = {
+  label: 'Hacker',
+  light: false,
+  background: 0x020309, fog: 0x030510,
+  bloom: { strength: 0.65, threshold: 0.85 },
+  roleColor: {
+    distrito: [0.16, 0.07, 0.30], urbanizacion: [0.13, 0.09, 0.30],
+    edificio: [0.10, 0.30, 0.36], planta: [0.06, 0.20, 0.26],
+    apartamento: [0.05, 0.16, 0.21], habitacion: [0.045, 0.13, 0.18],
+    archivador: [0.04, 0.11, 0.15], cajon: [0.035, 0.10, 0.13],
+  },
+  hi: [0.28, 3.0, 3.6],
+  fileBase: [0.05, 0.22, 0.28], fileHi: [1.0, 5.0, 6.0],
+  glass: [0.12, 0.55, 0.65], glassHi: [0.3, 2.4, 2.8],
+  ground: {
+    bg: '#04050b', grid: 'rgba(50, 80, 140, 0.07)',
+    traceA: [112, 60, 235], traceB: [40, 200, 235],
+    padA: [170, 120, 255], padB: [120, 240, 255],
+  },
+  facade: {
+    text: 'rgba(140, 232, 250, 0.72)', hot: '#c8ffff',
+    hotGlow: 'rgba(0,255,255,0.9)', hotBg: 'rgba(0,255,255,0.16)',
+  },
+  labels: { district: '#a86cff', urb: '#8a7bff', building: '#49e8ff' },
+  beam: [2.6, 1.1, 0.25], beamIn: [3.4, 0.5, 0.8], fill: [0.08, 0.75, 0.95], slab: [0.1, 0.5, 0.6],
+};

package.json

@@ -0,0 +1,6 @@
+{
+  "name": "elffuss-code-web",
+  "private": true,
+  "type": "module",
+  "description": "Elffuss Code: IDE web con agente élfico. Sin build: ES modules vanilla."
+}

sw.js

@@ -0,0 +1,43 @@
+// Service worker INERTE (a propósito).
+//
+// Antes cacheaba ficheros de modelo interceptando las peticiones a HuggingFace,
+// pero eso ROMPÍA la carga del ONNX: el fichero de pesos externos
+// `model_q4.onnx_data` fallaba con ERR_FAILED al re-fetchearlo → el modelo no
+// cargaba. Resultó que el SW era INNECESARIO: el cacheo ya lo hacen
+//   - transformers.js con su propia Cache Storage (modelo ONNX «healed»), y
+//   - litert.js con blob cache-first en Cache Storage (Gemma .litertlm),
+// y `navigator.storage.persist()` evita que el navegador los desaloje.
+//
+// Así que este SW ya NO intercepta nada (el navegador gestiona todas las
+// peticiones de forma nativa). Se mantiene registrado solo para REEMPLAZAR
+// limpiamente al SW anterior que sí interceptaba y rompía la carga.
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
+
+// Permite vaciar la caché de modelos desde Ajustes (sin tocar el blob de Gemma
+// salvo que se pida). NO hay handler de 'fetch' → cero interceptación.
+self.addEventListener('message', e => {
+  if (e.data === 'clear-models') {
+    caches.delete('elffuss-models-v1').then(() => e.source && e.source.postMessage('models-cleared'));
+  }
+});
+
+// Botón «▶ Ejecutar» en la notificación de mejoras del cerebro CEO: las
+// notificaciones normales (new Notification()) no soportan acciones, las que
+// pasan por el SW (registration.showNotification) sí. Al pulsar, avisamos a
+// la pestaña (postMessage) para que mande la propuesta a la cola real.
+self.addEventListener('notificationclick', event => {
+  const action = event.action; // 'execute' | 'open' | '' (clic en el cuerpo)
+  const data = event.notification.data || {};
+  event.notification.close();
+  event.waitUntil((async () => {
+    const clientsList = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+    const client = clientsList[0];
+    if (client) {
+      client.postMessage({ type: 'notif-action', action, md: data.md });
+      client.focus?.();
+    } else if (self.clients.openWindow) {
+      await self.clients.openWindow('/');
+    }
+  })());
+});