tina4-nodejs 3.13.149 → 3.13.150

package/CLAUDE.md

@@ -13,13 +13,13 @@ Even if the skill text is not currently loaded, these are non-negotiable:
 
 The full discipline lives in `.claude/skills/tina4-maintainer/SKILL.md`; this block is the always-on floor.
 
-# CLAUDE.md - AI Developer Guide for tina4-nodejs (v3.13.149)
+# CLAUDE.md - AI Developer Guide for tina4-nodejs (v3.13.150)
 
 > This file helps AI assistants (Claude, Copilot, Cursor, etc.) understand and work on this codebase effectively.
 
 ## What This Project Is
 
-Tina4 for Node.js/TypeScript v3.13.149 - The Intelligent Native Application 4ramework. A convention-over-configuration structural paradigm. The developer writes TypeScript; Tina4 is invisible infrastructure.
+Tina4 for Node.js/TypeScript v3.13.150 - The Intelligent Native Application 4ramework. A convention-over-configuration structural paradigm. The developer writes TypeScript; Tina4 is invisible infrastructure.
 
 The philosophy: zero ceremony, batteries included, file system as source of truth.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4-nodejs",
-  "version": "3.13.149",
+  "version": "3.13.150",
   "type": "module",
   "description": "Tina4 for Node.js/TypeScript - native TypeScript conventions and shared Tina4 contracts",
   "keywords": [

package/packages/cli/dist/bin.js

@@ -26381,7 +26381,7 @@ function enginePath() {
 function runEngine(target) {
   const binary = enginePath();
   if (!binary) throw new MetricsEngineError(`tina4 not found on PATH - ${INSTALL_HINT}`);
-  const processResult = spawnSync(binary, ["metrics", "--path", target, "--json"], {
+  const processResult = spawnSync(binary, ["metrics", "--path", target, "--json", "--no-history"], {
     encoding: "utf8",
     timeout: 6e4,
     maxBuffer: 64 * 1024 * 1024
@@ -35582,7 +35582,7 @@ var init_plan = __esm({
         const existing = (currentPlan.steps || []).map((s) => s.text || "");
         const title = currentPlan.title || target;
         const goal = currentPlan.goal || "";
-        const aiUrl = process.env.TINA4_AI_URL || "http://localhost:11437/api/chat";
+        const aiUrl = process.env.TINA4_AI_URL || "http://localhost:11435/api/chat";
         const aiModel = process.env.TINA4_AI_MODEL || "qwen2.5-coder:14b";
         const prompts = fleshPrompt(title, goal, existing, prompt);
         const fetched = await fetchFleshReply(aiUrl, aiModel, prompts);
@@ -38019,7 +38019,7 @@ function toolbarJs() {
     connect();
 })();`;
 }
-var cpuCount, DEV_MCP_PREFIXES, DEV_PUBLIC_ASSETS, DEV_SECRET_BASENAMES, DEV_SECRET_SUFFIXES, MessageLog, RequestInspector, ErrorTracker, DevMailboxStore, DevQueue, WsTracker, DevAdmin, handleDashboard, _reloadMtime, _reloadFile, handleMtime, handleReload, handleMessages, handleMessagesClear, handleRequests, handleRequestsClear, handleSystem, handleMessagesSearch, handleQueue, handleQueueTopics, handleQueueDeadLetters, handleQueueRetry, handleQueuePurge, handleQueueReplay, handleMailbox, handleMailboxRead, handleMailboxSeed, handleMailboxClear, handleTable, handleTables, handleSeed, handleQuery, handleBroken, handleBrokenResolve, handleBrokenClear, handleWebsockets, handleWebsocketsDisconnect, handleTool, DEFAULT_MCP_URL, handleGroundingStatus, handleGroundingToken, handleMigrate, handleSeedRun, handleTest, handleThreads, handleThreadsSub, handleConnections, handleConnectionsTest, handleConnectionsSave, __devAdminFilename, __devAdminDirname, handleGalleryList, handleVersionCheck, handleThoughts, handleSuperviseStub, DEV_FILES_IGNORED, handleFiles, DEV_ADMIN_LANG_MAP, handleFileRead, handleFileSave, handleFileRaw, handleFileRename, handleFileDelete, handleDepsSearch, handleDepsInstall, handleGitStatus, handleMcpTools, handleMcpCall, handleMcpStreamable, handleMcpDelete, handleMcpGet405, handleMcpLegacyMessage, handleMcpSse, handleScaffoldList, handleScaffoldRun, handlePlanCurrent, handlePlanList, handlePlanCreate, handlePlanSwitch, handlePlanCompleteStep, handlePlanAddStep, handlePlanNote, handlePlanArchive, handlePlanRead, handlePlanFlesh, handleIndexRebuild, handleIndexSearch, handleIndexFile, handleIndexOverview, handleDocsSearch, handleDocsClass, handleDocsMethod, handleDocsIndex, handleDocsWellKnown, handleDevAdminJs, handleToolbarCss, handleToolbarJs;
+var cpuCount, DEV_MCP_PREFIXES, DEV_PUBLIC_ASSETS, DEV_SECRET_BASENAMES, DEV_SECRET_SUFFIXES, MessageLog, RequestInspector, ErrorTracker, DevMailboxStore, DevQueue, WsTracker, DevAdmin, handleDashboard, _reloadMtime, _reloadFile, handleMtime, handleReload, handleMessages, handleMessagesClear, handleRequests, handleRequestsClear, handleSystem, handleMessagesSearch, handleQueue, handleQueueTopics, handleQueueDeadLetters, handleQueueRetry, handleQueuePurge, handleQueueReplay, handleMailbox, handleMailboxRead, handleMailboxSeed, handleMailboxClear, handleTable, handleTables, handleSeed, handleQuery, handleBroken, handleBrokenResolve, handleBrokenClear, handleWebsockets, handleWebsocketsDisconnect, handleTool, DEFAULT_MCP_URL, handleGroundingStatus, handleGroundingToken, handleMigrate, handleSeedRun, handleTest, handleThreads, handleThreadsSub, handleConnections, handleConnectionsTest, handleConnectionsSave, __devAdminFilename, __devAdminDirname, handleGalleryList, handleVersionCheck, handleThoughts, handleSuperviseStub, DEV_FILES_IGNORED, handleFiles, DEV_ADMIN_LANG_MAP, handleFileRead, handleFileSave, handleFileRaw, handleFileRename, handleFileDelete, handleDepsSearch, handleDepsInstall, handleGitStatus, handleMcpTools, handleMcpCall, handleMcpStreamable, handleMcpDelete, handleMcpGet405, handleMcpLegacyMessage, handleMcpSse, handleScaffoldList, handleScaffoldRun, handlePlanCurrent, handlePlanList, handlePlanCreate, handlePlanSwitch, handlePlanCompleteStep, handlePlanAddStep, handlePlanNote, handlePlanArchive, handlePlanRead, handlePlanFlesh, handleIndexRebuild, handleIndexSearch, handleIndexFile, handleIndexOverview, handleDocsSearch, handleDocsClass, handleDocsMethod, handleDocsIndex, handleDocsWellKnown, handleDevAdminJs, handleDevAdminSplit, handleToolbarCss, handleToolbarJs;
 var init_devAdmin = __esm({
   "../core/src/devAdmin.ts"() {
     "use strict";
@@ -38489,6 +38489,7 @@ var init_devAdmin = __esm({
           { method: "GET", pattern: "/__dev/api/docs/.well-known.json", handler: handleDocsWellKnown },
           // JS asset
           { method: "GET", pattern: "/__dev/js/tina4-dev-admin.min.js", handler: handleDevAdminJs },
+          { method: "GET", pattern: "/__dev/split", handler: handleDevAdminSplit },
           // Dev-toolbar assets — served as external CSS/JS so the injected toolbar is
           // CSP-clean (no inline style=, onclick=, or <script>) under a strict
           // `default-src 'self'`. Parity with PHP's /__dev/toolbar.css + toolbar.js.
@@ -39927,6 +39928,31 @@ var init_devAdmin = __esm({
       res.raw.writeHead(404, { "Content-Type": "text/plain" });
       res.raw.end("tina4-dev-admin.min.js not found");
     };
+    handleDevAdminSplit = async (_req, res) => {
+      const { readFileSync: readFileSync30, existsSync: existsSync38 } = await import("node:fs");
+      const { dirname: dirname20, join: join41, resolve: resolve29 } = await import("node:path");
+      const { fileURLToPath: fileURLToPath12 } = await import("node:url");
+      const dir = dirname20(fileURLToPath12(import.meta.url));
+      const candidates = [
+        join41(dir, "..", "public", "js", "tina4-dev-admin-split.html"),
+        join41(dir, "..", "..", "public", "js", "tina4-dev-admin-split.html"),
+        resolve29(process.cwd(), "node_modules", "tina4-nodejs", "packages", "core", "public", "js", "tina4-dev-admin-split.html"),
+        resolve29(process.cwd(), "public", "js", "tina4-dev-admin-split.html")
+      ];
+      for (const path10 of candidates) {
+        if (existsSync38(path10)) {
+          try {
+            const content = readFileSync30(path10, "utf-8");
+            res.raw.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-cache" });
+            res.raw.end(content);
+            return;
+          } catch {
+          }
+        }
+      }
+      res.raw.writeHead(404, { "Content-Type": "text/plain" });
+      res.raw.end("tina4-dev-admin-split.html not found");
+    };
     handleToolbarCss = (_req, res) => {
       res.raw.writeHead(200, { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" });
       res.raw.end(toolbarCss());

package/packages/core/dist/index.js

@@ -26360,7 +26360,7 @@ function enginePath() {
 function runEngine(target) {
   const binary = enginePath();
   if (!binary) throw new MetricsEngineError(`tina4 not found on PATH - ${INSTALL_HINT}`);
-  const processResult = spawnSync(binary, ["metrics", "--path", target, "--json"], {
+  const processResult = spawnSync(binary, ["metrics", "--path", target, "--json", "--no-history"], {
     encoding: "utf8",
     timeout: 6e4,
     maxBuffer: 64 * 1024 * 1024
@@ -35538,7 +35538,7 @@ var init_plan = __esm({
         const existing = (currentPlan.steps || []).map((s) => s.text || "");
         const title = currentPlan.title || target;
         const goal = currentPlan.goal || "";
-        const aiUrl = process.env.TINA4_AI_URL || "http://localhost:11437/api/chat";
+        const aiUrl = process.env.TINA4_AI_URL || "http://localhost:11435/api/chat";
         const aiModel = process.env.TINA4_AI_MODEL || "qwen2.5-coder:14b";
         const prompts = fleshPrompt(title, goal, existing, prompt);
         const fetched = await fetchFleshReply(aiUrl, aiModel, prompts);
@@ -37975,7 +37975,7 @@ function toolbarJs() {
     connect();
 })();`;
 }
-var cpuCount, DEV_MCP_PREFIXES, DEV_PUBLIC_ASSETS, DEV_SECRET_BASENAMES, DEV_SECRET_SUFFIXES, MessageLog, RequestInspector, ErrorTracker, DevMailboxStore, DevQueue, WsTracker, DevAdmin, handleDashboard, _reloadMtime, _reloadFile, handleMtime, handleReload, handleMessages, handleMessagesClear, handleRequests, handleRequestsClear, handleSystem, handleMessagesSearch, handleQueue, handleQueueTopics, handleQueueDeadLetters, handleQueueRetry, handleQueuePurge, handleQueueReplay, handleMailbox, handleMailboxRead, handleMailboxSeed, handleMailboxClear, handleTable, handleTables, handleSeed, handleQuery, handleBroken, handleBrokenResolve, handleBrokenClear, handleWebsockets, handleWebsocketsDisconnect, handleTool, DEFAULT_MCP_URL, handleGroundingStatus, handleGroundingToken, handleMigrate, handleSeedRun, handleTest, handleThreads, handleThreadsSub, handleConnections, handleConnectionsTest, handleConnectionsSave, __devAdminFilename, __devAdminDirname, handleGalleryList, handleVersionCheck, handleThoughts, handleSuperviseStub, DEV_FILES_IGNORED, handleFiles, DEV_ADMIN_LANG_MAP, handleFileRead, handleFileSave, handleFileRaw, handleFileRename, handleFileDelete, handleDepsSearch, handleDepsInstall, handleGitStatus, handleMcpTools, handleMcpCall, handleMcpStreamable, handleMcpDelete, handleMcpGet405, handleMcpLegacyMessage, handleMcpSse, handleScaffoldList, handleScaffoldRun, handlePlanCurrent, handlePlanList, handlePlanCreate, handlePlanSwitch, handlePlanCompleteStep, handlePlanAddStep, handlePlanNote, handlePlanArchive, handlePlanRead, handlePlanFlesh, handleIndexRebuild, handleIndexSearch, handleIndexFile, handleIndexOverview, handleDocsSearch, handleDocsClass, handleDocsMethod, handleDocsIndex, handleDocsWellKnown, handleDevAdminJs, handleToolbarCss, handleToolbarJs;
+var cpuCount, DEV_MCP_PREFIXES, DEV_PUBLIC_ASSETS, DEV_SECRET_BASENAMES, DEV_SECRET_SUFFIXES, MessageLog, RequestInspector, ErrorTracker, DevMailboxStore, DevQueue, WsTracker, DevAdmin, handleDashboard, _reloadMtime, _reloadFile, handleMtime, handleReload, handleMessages, handleMessagesClear, handleRequests, handleRequestsClear, handleSystem, handleMessagesSearch, handleQueue, handleQueueTopics, handleQueueDeadLetters, handleQueueRetry, handleQueuePurge, handleQueueReplay, handleMailbox, handleMailboxRead, handleMailboxSeed, handleMailboxClear, handleTable, handleTables, handleSeed, handleQuery, handleBroken, handleBrokenResolve, handleBrokenClear, handleWebsockets, handleWebsocketsDisconnect, handleTool, DEFAULT_MCP_URL, handleGroundingStatus, handleGroundingToken, handleMigrate, handleSeedRun, handleTest, handleThreads, handleThreadsSub, handleConnections, handleConnectionsTest, handleConnectionsSave, __devAdminFilename, __devAdminDirname, handleGalleryList, handleVersionCheck, handleThoughts, handleSuperviseStub, DEV_FILES_IGNORED, handleFiles, DEV_ADMIN_LANG_MAP, handleFileRead, handleFileSave, handleFileRaw, handleFileRename, handleFileDelete, handleDepsSearch, handleDepsInstall, handleGitStatus, handleMcpTools, handleMcpCall, handleMcpStreamable, handleMcpDelete, handleMcpGet405, handleMcpLegacyMessage, handleMcpSse, handleScaffoldList, handleScaffoldRun, handlePlanCurrent, handlePlanList, handlePlanCreate, handlePlanSwitch, handlePlanCompleteStep, handlePlanAddStep, handlePlanNote, handlePlanArchive, handlePlanRead, handlePlanFlesh, handleIndexRebuild, handleIndexSearch, handleIndexFile, handleIndexOverview, handleDocsSearch, handleDocsClass, handleDocsMethod, handleDocsIndex, handleDocsWellKnown, handleDevAdminJs, handleDevAdminSplit, handleToolbarCss, handleToolbarJs;
 var init_devAdmin = __esm({
   "src/devAdmin.ts"() {
     "use strict";
@@ -38445,6 +38445,7 @@ var init_devAdmin = __esm({
           { method: "GET", pattern: "/__dev/api/docs/.well-known.json", handler: handleDocsWellKnown },
           // JS asset
           { method: "GET", pattern: "/__dev/js/tina4-dev-admin.min.js", handler: handleDevAdminJs },
+          { method: "GET", pattern: "/__dev/split", handler: handleDevAdminSplit },
           // Dev-toolbar assets — served as external CSS/JS so the injected toolbar is
           // CSP-clean (no inline style=, onclick=, or <script>) under a strict
           // `default-src 'self'`. Parity with PHP's /__dev/toolbar.css + toolbar.js.
@@ -39883,6 +39884,31 @@ var init_devAdmin = __esm({
       res.raw.writeHead(404, { "Content-Type": "text/plain" });
       res.raw.end("tina4-dev-admin.min.js not found");
     };
+    handleDevAdminSplit = async (_req, res) => {
+      const { readFileSync: readFileSync27, existsSync: existsSync29 } = await import("node:fs");
+      const { dirname: dirname17, join: join33, resolve: resolve21 } = await import("node:path");
+      const { fileURLToPath: fileURLToPath10 } = await import("node:url");
+      const dir = dirname17(fileURLToPath10(import.meta.url));
+      const candidates = [
+        join33(dir, "..", "public", "js", "tina4-dev-admin-split.html"),
+        join33(dir, "..", "..", "public", "js", "tina4-dev-admin-split.html"),
+        resolve21(process.cwd(), "node_modules", "tina4-nodejs", "packages", "core", "public", "js", "tina4-dev-admin-split.html"),
+        resolve21(process.cwd(), "public", "js", "tina4-dev-admin-split.html")
+      ];
+      for (const path10 of candidates) {
+        if (existsSync29(path10)) {
+          try {
+            const content = readFileSync27(path10, "utf-8");
+            res.raw.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-cache" });
+            res.raw.end(content);
+            return;
+          } catch {
+          }
+        }
+      }
+      res.raw.writeHead(404, { "Content-Type": "text/plain" });
+      res.raw.end("tina4-dev-admin-split.html not found");
+    };
     handleToolbarCss = (_req, res) => {
       res.raw.writeHead(200, { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" });
       res.raw.end(toolbarCss());

package/packages/core/public/bundled-component-provenance.json

@@ -41,8 +41,8 @@
     },
     {
       "path": "js/tina4-dev-admin.min.js",
-      "component": "tina4-dev-admin-21700e0",
-      "sha256": "0ca84246c26afb6a3243aafd1c65fa9486c076039e5d721b6f44661b3a59d7c2"
+      "component": "tina4-dev-admin-8c4617d",
+      "sha256": "6b05be06b5d76ee4126a11f019d104d3920c1e3234250cfe1966a33f34c1a234"
     }
   ]
 }

package/packages/core/public/js/tina4-dev-admin-split.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Tina4 Dev - Split</title>
+<style>
+  html,body{margin:0;height:100%;background:#0f172a;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}
+  /* One top toolbar controls both panels and the preview device. */
+  .t4-topbar{height:40px;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 10px;background:#0b1220;border-bottom:1px solid #1f2937}
+  .t4-brand{color:#e2e8f0;font:600 12px system-ui;margin-right:6px}
+  .t4-spacer{flex:1 1 auto}
+  .t4-devbtn{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:6px;padding:3px 9px;font:12px system-ui;cursor:pointer}
+  .t4-devbtn.active{background:#2563eb;border-color:#2563eb;color:#fff}
+  /* Icon toggle buttons: full opacity + highlight when the panel is shown,
+     dimmed when hidden. */
+  .t4-tg{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;opacity:.5}
+  .t4-tg svg{width:15px;height:15px}
+  .t4-tg.active{background:#334155;color:#fff;opacity:1}
+  .t4-dim{color:#64748b;font:11px/1 ui-monospace,monospace;margin:0 6px}
+  .t4-popout{background:#0f766e;color:#fff;border:1px solid #0f766e;border-radius:6px;padding:3px 10px;font:12px system-ui;cursor:pointer;margin-left:6px}
+  .t4-split{display:flex;height:calc(100vh - 41px);width:100vw}
+  .t4-left{flex:0 0 auto;width:58%;min-width:0;height:100%;overflow:hidden}
+  .t4-left iframe{width:100%;height:100%;border:0;display:block}
+  .t4-gutter{flex:0 0 6px;cursor:col-resize;background:#1f2937}
+  .t4-gutter:hover,.t4-gutter.drag{background:#2563eb}
+  .t4-right{flex:1 1 auto;min-width:0;height:100%;overflow:hidden;display:flex;flex-direction:column}
+  /* A LIGHT backdrop so the dark device frame stands out. */
+  .t4-stage{flex:1 1 auto;min-width:0;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 32%,#f8fafc,#c3ccd9)}
+  /* The device frame - a phone/tablet bezel around the live app. overflow:hidden
+     + border-radius CLIP the app to the rounded frame, so content is contained.
+     No width/height transition: fit() measures right after a toggle, and an
+     animated size would be read mid-transition (the "clicking does nothing" bug). */
+  .t4-device{position:relative;background:#111;box-shadow:0 16px 50px rgba(15,23,42,.45);transform-origin:center center;overflow:hidden}
+  .t4-device iframe{width:100%;height:100%;border:0;display:block;background:#fff}
+  .t4-device.mobile{border:14px solid #111;border-radius:46px}
+  .t4-device.tablet{border:16px solid #111;border-radius:26px}
+  /* Desktop fills the whole preview block - no bezel, no scaling. */
+  .t4-device.desktop{border:0;border-radius:0;box-shadow:none;width:100%;height:100%}
+  .t4-hidden{display:none !important}
+  /* While dragging the gutter, let mouse events pass over the iframes. */
+  body.t4-dragging iframe{pointer-events:none}
+</style></head>
+<body>
+  <div class="t4-topbar">
+    <span class="t4-brand">Tina4 Dev</span>
+    <button class="t4-tg active" id="t4-tg-files" title="Show/hide the file navigator"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><line x1="6" y1="2.5" x2="6" y2="13.5"/></svg></button>
+    <button class="t4-tg active" id="t4-tg-editor" title="Show/hide the code editor"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="5.5,4.5 2,8 5.5,11.5"/><polyline points="10.5,4.5 14,8 10.5,11.5"/></svg></button>
+    <button class="t4-tg active" id="t4-tg-preview" title="Show/hide the preview"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1.5" y="2.5" width="13" height="9" rx="1.5"/><line x1="5.5" y1="14" x2="10.5" y2="14"/><line x1="8" y1="11.5" x2="8" y2="14"/></svg></button>
+    <span class="t4-spacer"></span>
+    <span class="t4-dim" id="t4-dim">1440 x 900</span>
+    <button class="t4-devbtn" data-mode="mobile">Mobile</button>
+    <button class="t4-devbtn" data-mode="tablet">Tablet</button>
+    <button class="t4-devbtn active" data-mode="desktop">Desktop</button>
+    <button class="t4-popout" id="t4-popout" title="Open this view in its own window - drag it to another screen">&#8689; Pop out</button>
+  </div>
+  <div class="t4-split" id="t4-split">
+    <div class="t4-left" id="t4-left"><iframe src="/__dev" title="Tina4 Dev Admin"></iframe></div>
+    <div class="t4-gutter" id="t4-gutter"></div>
+    <div class="t4-right" id="t4-right">
+      <div class="t4-stage" id="t4-stage">
+        <div class="t4-device desktop" id="t4-device">
+          <iframe id="t4-preview" src="/" title="Live preview"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+  (function () {
+    var SIZES = { mobile: {w:390,h:844}, tablet: {w:820,h:1180}, desktop: {w:1440,h:900} };
+    var KEY = 'tina4_split_device';
+    var device = document.getElementById('t4-device');
+    var stage = document.getElementById('t4-stage');
+    var dim = document.getElementById('t4-dim');
+    var left = document.getElementById('t4-left');
+    var right = document.getElementById('t4-right');
+    var gutter = document.getElementById('t4-gutter');
+    var split = document.getElementById('t4-split');
+    var mode = 'desktop';
+    try { var saved = localStorage.getItem(KEY); if (saved && SIZES[saved]) mode = saved; } catch (_) {}
+    var leftWidth = '58%';
+
+    // ── device preview ──
+    function fit() {
+      if (right.classList.contains('t4-hidden')) return;
+      if (mode === 'desktop') {
+        // Desktop just fills the preview block - responsive, no frame, no scale.
+        device.style.transform = 'none';
+        device.style.width = '100%';
+        device.style.height = '100%';
+        var r0 = stage.getBoundingClientRect();
+        if (dim) dim.textContent = Math.round(r0.width) + ' x ' + Math.round(r0.height);
+        return;
+      }
+      var s = SIZES[mode];
+      device.style.transform = 'none';
+      device.style.width = s.w + 'px';
+      device.style.height = s.h + 'px';
+      var rect = stage.getBoundingClientRect();
+      var pad = 28;
+      var ow = device.offsetWidth, oh = device.offsetHeight;
+      var scale = Math.min((rect.width - pad) / ow, (rect.height - pad) / oh, 1);
+      if (!isFinite(scale) || scale <= 0) scale = 1;
+      device.style.transform = 'scale(' + scale + ')';
+    }
+    function setMode(m) {
+      if (!SIZES[m]) return;
+      mode = m;
+      device.className = 't4-device ' + m;
+      if (dim) dim.textContent = SIZES[m].w + ' x ' + SIZES[m].h;
+      document.querySelectorAll('.t4-devbtn').forEach(function (b) {
+        b.classList.toggle('active', b.getAttribute('data-mode') === m);
+      });
+      try { localStorage.setItem(KEY, m); } catch (_) {}
+      fit();
+    }
+    document.querySelectorAll('.t4-devbtn').forEach(function (b) {
+      b.addEventListener('click', function () { setMode(b.getAttribute('data-mode')); });
+    });
+    var pop = document.getElementById('t4-popout');
+    if (pop) pop.addEventListener('click', function () {
+      var s = SIZES[mode];
+      var w = Math.min(s.w, (screen.availWidth || 1920) - 40);
+      var h = Math.min(s.h, (screen.availHeight || 1080) - 120);
+      window.open('/', 'tina4preview_' + mode, 'width=' + w + ',height=' + h + ',menubar=no,toolbar=no,location=no');
+    });
+
+    // ── show / hide each panel (Files, Editor, Preview) ──
+    // Files (the nav) and Editor (the code area) are SEPARATE sections living
+    // inside the left /__dev SPA iframe, so hiding the editor must not take the
+    // file nav with it. They are same-origin, so we reach into the iframe and
+    // toggle its own `#editor-sidebar` (nav) and `.editor-main` (editor). The
+    // Preview is the right pane of this page.
+    var vis = { files: true, editor: true, preview: true };
+    function frameDoc() {
+      try { return document.querySelector('#t4-left iframe').contentDocument; } catch (_) { return null; }
+    }
+    function setFrameEl(sel, show) {
+      var d = frameDoc(); if (!d) return;
+      var el = d.querySelector(sel); if (el) el.style.display = show ? '' : 'none';
+    }
+    function applyPanels() {
+      setFrameEl('#editor-sidebar', vis.files);
+      setFrameEl('#editor-splitter-left', vis.files && vis.editor);
+      setFrameEl('.editor-main', vis.editor);
+      var leftEmpty = !vis.files && !vis.editor;
+      left.classList.toggle('t4-hidden', leftEmpty);
+      right.classList.toggle('t4-hidden', !vis.preview);
+      gutter.classList.toggle('t4-hidden', leftEmpty || !vis.preview);
+      if (!vis.preview) {
+        // Preview hidden: the editor/nav fills the whole width.
+        left.style.flex = '1 1 auto'; left.style.width = 'auto';
+      } else if (vis.files && !vis.editor) {
+        // Only the file nav is shown: shrink the left pane to the nav width so
+        // there is no empty gap where the editor used to be.
+        left.style.flex = '0 0 auto'; left.style.width = '250px';
+      } else {
+        left.style.flex = '0 0 auto'; left.style.width = leftWidth;
+      }
+      document.getElementById('t4-tg-files').classList.toggle('active', vis.files);
+      document.getElementById('t4-tg-editor').classList.toggle('active', vis.editor);
+      document.getElementById('t4-tg-preview').classList.toggle('active', vis.preview);
+      fit();
+    }
+    function toggle(name) {
+      // Never hide all three - at least one stays visible.
+      var n = { files: vis.files, editor: vis.editor, preview: vis.preview };
+      n[name] = !n[name];
+      if (!n.files && !n.editor && !n.preview) return;
+      vis[name] = !vis[name];
+      applyPanels();
+    }
+    document.getElementById('t4-tg-files').addEventListener('click', function () { toggle('files'); });
+    document.getElementById('t4-tg-editor').addEventListener('click', function () { toggle('editor'); });
+    document.getElementById('t4-tg-preview').addEventListener('click', function () { toggle('preview'); });
+
+    // ── drag the gutter to resize ──
+    var dragging = false;
+    gutter.addEventListener('mousedown', function (e) {
+      dragging = true;
+      document.body.classList.add('t4-dragging');
+      gutter.classList.add('drag');
+      e.preventDefault();
+    });
+    window.addEventListener('mousemove', function (e) {
+      if (!dragging) return;
+      var r = split.getBoundingClientRect();
+      var w = e.clientX - r.left;
+      w = Math.max(220, Math.min(w, r.width - 260));
+      leftWidth = w + 'px';
+      left.style.width = leftWidth;
+      fit();
+    });
+    window.addEventListener('mouseup', function () {
+      if (!dragging) return;
+      dragging = false;
+      document.body.classList.remove('t4-dragging');
+      gutter.classList.remove('drag');
+    });
+
+    window.addEventListener('resize', fit);
+    setMode(mode);
+    applyPanels();
+  })();
+  </script>
+</body></html>