tina4ruby 3.13.148 → 3.13.150

data/lib/tina4/dev_admin.rb

@@ -8,6 +8,7 @@
 
 require "json"
 require "digest"
+require "ipaddr"
 require "tmpdir"
 require "net/http"
 require "uri"
@@ -438,6 +439,8 @@ module Tina4
           serve_dashboard
         when ["GET", "/__dev/js/tina4-dev-admin.min.js"]
           serve_dev_js
+        when ["GET", "/__dev/split"], ["GET", "/__dev/split/"]
+          serve_split
         when ["GET", "/__dev/toolbar.css"]
           # tina4stack #115: the injected toolbar's stylesheet, served as an
           # external asset so the toolbar carries no inline style= and renders
@@ -933,6 +936,18 @@ module Tina4
         end
       end
 
+      # Detached split view — dashboard/editor LEFT, live app preview RIGHT.
+      # Served from the SHARED asset (the same tina4-dev-admin-split.html the
+      # python/php/node frameworks serve); a plain shell, no toolbar injected.
+      def serve_split
+        path = File.join(File.dirname(__FILE__), "public", "js", "tina4-dev-admin-split.html")
+        if File.file?(path)
+          [200, { "content-type" => "text/html; charset=utf-8" }, [File.read(path)]]
+        else
+          [404, { "content-type" => "text/plain" }, ["tina4-dev-admin-split.html not found"]]
+        end
+      end
+
       def status_payload
         db_table_count = 0
         begin
@@ -2134,6 +2149,11 @@ module Tina4
       # (with_mcp_gate -> 404), so the REST loopback arm skips these prefixes and
       # lets the MCP gate govern (keeps a disallowed mcp/call a 404, not a 403).
       DEV_MCP_PREFIXES = ["/__dev/api/mcp", "/__dev/mcp"].freeze
+
+      # Static dev-toolbar assets that carry no secrets and expose no actions, so
+      # the peer gate does not cover them: wherever the toolbar is injected its
+      # stylesheet and script must load (issue #279). Host + same-origin still apply.
+      DEV_PUBLIC_ASSETS = ["/__dev/toolbar.css", "/__dev/toolbar.js"].freeze
       # Private-key / credential basenames the file endpoints must never serve.
       DEV_SECRET_BASENAMES = %w[.env .envrc id_rsa id_dsa id_ecdsa id_ed25519].freeze
       DEV_SECRET_SUFFIXES = %w[.pem .key .pfx .p12 .keystore .jks].freeze
@@ -2186,9 +2206,14 @@ module Tina4
         return dev_refused("dev-admin: refused (host not allowed)") unless dev_host_allowed?(env)
         return dev_refused("dev-admin: refused (cross-origin request)") unless dev_same_origin_ok?(env)
 
+        # The static toolbar assets are exempt from the peer gate (#279): they
+        # carry no secrets and the toolbar needs them wherever it is injected.
+        # Host + same-origin above still apply.
+        return nil if DEV_PUBLIC_ASSETS.include?(path)
+
         unless path.start_with?(*DEV_MCP_PREFIXES)
           remote_ip = (env["REMOTE_ADDR"] || "").to_s
-          unless Tina4.is_loopback?(remote_ip) || mcp_token_ok?(env, dedicated: true)
+          unless dev_peer_allowed?(remote_ip) || mcp_token_ok?(env, dedicated: true)
             return dev_refused("dev-admin: refused (non-loopback peer)")
           end
         end
@@ -2216,6 +2241,47 @@ module Tina4
       end
       public :dev_host_allowed?
 
+      # True when raw peer +ip+ falls inside +entry+ (a bare IP or a CIDR). IPv4
+      # and IPv6; an IPv4-mapped IPv6 peer (::ffff:a.b.c.d) is matched as IPv4.
+      def ip_in_cidr?(ip, entry)
+        ip = ip.to_s.strip
+        ip = ip[7..] if ip.downcase.start_with?("::ffff:") # mapped -> compare as IPv4
+        net = IPAddr.new(entry.to_s.strip)
+        addr = IPAddr.new(ip)
+        return false unless net.family == addr.family # v4 peer never matches a v6 CIDR
+        net.include?(addr)
+      rescue IPAddr::Error, ArgumentError
+        false
+      end
+      public :ip_in_cidr?
+
+      # True when the RAW socket peer may reach /__dev: loopback always, plus any
+      # IP/CIDR in TINA4_DEV_ALLOWED_PEERS (comma-separated, opt-in, default none).
+      # Reads the real socket peer ONLY, never a forwarded header, so it cannot be
+      # spoofed by X-Forwarded-For. The documented way to reach the dev dashboard
+      # from a Docker dev box, where requests arrive from the container-network
+      # gateway rather than loopback (issue #279).
+      def dev_peer_allowed?(remote_ip)
+        return true if Tina4.is_loopback?(remote_ip)
+
+        configured = ENV["TINA4_DEV_ALLOWED_PEERS"].to_s.strip
+        return false if configured.empty?
+
+        configured.split(",").any? { |entry| !entry.strip.empty? && ip_in_cidr?(remote_ip, entry) }
+      end
+      public :dev_peer_allowed?
+
+      # True when the toolbar may be injected for this viewer - the Host allow-list
+      # and the raw-peer gate both pass. A viewer the /__dev gate would refuse gets
+      # NO toolbar markup, so its stylesheet and script are never requested only to
+      # 403 (issue #279).
+      def dev_toolbar_allowed?(env)
+        return false unless dev_host_allowed?(env)
+
+        dev_peer_allowed?((env["REMOTE_ADDR"] || "").to_s)
+      end
+      public :dev_toolbar_allowed?
+
       def dev_refused(message)
         [403, { "content-type" => "application/json; charset=utf-8" },
          [JSON.generate({ "ok" => false, "error" => message })]]

data/lib/tina4/dispatch_pipeline.rb

@@ -587,6 +587,9 @@ module Tina4
       status, headers, body_parts = response
       content_type = headers["content-type"] || ""
       return nil unless content_type.include?("text/html")
+      # Do not inject the toolbar for a viewer the /__dev gate would refuse (#279):
+      # otherwise the page carries toolbar markup whose stylesheet and script 403.
+      return nil unless Tina4::DevAdmin.dev_toolbar_allowed?(ctx.env)
 
       request_info = {
         method: ctx.method,

data/lib/tina4/messenger.rb

@@ -90,14 +90,15 @@ module Tina4
 
     attr_reader :host, :port, :username, :from_address, :from_name,
                 :imap_host, :imap_port, :use_tls, :encryption,
-                :imap_encryption, :imap_use_tls, :imap_username, :imap_password
+                :imap_encryption, :imap_use_tls, :imap_username, :imap_password,
+                :timeout
 
     # Initialize with SMTP config.
     # Priority: constructor params > ENV (TINA4_MAIL_*) > sensible defaults
     def initialize(host: nil, port: nil, username: nil, password: nil,
                    from_address: nil, from_name: nil, encryption: nil, use_tls: nil,
                    imap_host: nil, imap_port: nil, imap_encryption: nil,
-                   imap_username: nil, imap_password: nil)
+                   imap_username: nil, imap_password: nil, timeout: nil)
       # Whether a host was actually CONFIGURED, which is not the same as @host being
       # set: it falls back to "localhost", so it is never nil and cannot answer
       # "can this messenger send?". The capture gate needs that answer, so record it
@@ -143,7 +144,55 @@ module Tina4
       # account read the wrong mailbox. Explicit constructor args win (ADR-0041).
       @imap_username = imap_username || ENV["TINA4_MAIL_IMAP_USERNAME"] || @username
       @imap_password = imap_password || ENV["TINA4_MAIL_IMAP_PASSWORD"] || @password
+
+      # SMTP send timeout (seconds): constructor > TINA4_MAIL_TIMEOUT > 30.
+      # Whole seconds, at least 1. See resolve_timeout. Parity with the PHP
+      # master (Messenger::resolveTimeout, tina4-php#286).
+      @timeout = resolve_timeout(timeout, ENV["TINA4_MAIL_TIMEOUT"])
+    end
+
+    #: Default socket timeout, in seconds - the value this class has always used.
+    TIMEOUT_DEFAULT = 30
+    #: Raw TINA4_MAIL_TIMEOUT values already warned about, so a bad one is said once.
+    @timeout_warned = {}
+    class << self
+      attr_reader :timeout_warned
+    end
+
+    # Resolve the SMTP send timeout to whole seconds (issue #278).
+    #
+    # An explicit constructor value is the caller's own instruction, so one below
+    # a second is a programming error and raises. A bad env value is a
+    # misconfiguration: warn once and use the default rather than guess. Zero and
+    # negative are garbage, not an opt-out - to the socket 0 means "do not wait at
+    # all", so no send could succeed.
+    def resolve_timeout(explicit, raw)
+      unless explicit.nil?
+        seconds = Integer(explicit)
+        raise ArgumentError, "Messenger timeout must be at least 1 second, got #{seconds}." if seconds < 1
+
+        return seconds
+      end
+      return TIMEOUT_DEFAULT if raw.nil? || raw.to_s.strip.empty?
+
+      seconds = begin
+        Integer(raw.to_s.strip)
+      rescue ArgumentError
+        nil
+      end
+      if seconds.nil? || seconds < 1
+        unless self.class.timeout_warned.key?(raw)
+          self.class.timeout_warned[raw] = true
+          Tina4::Log.warning(
+            "TINA4_MAIL_TIMEOUT must be a whole number of seconds and at least 1, got " \
+            "#{raw.inspect} - using the default of #{TIMEOUT_DEFAULT} seconds"
+          )
+        end
+        return TIMEOUT_DEFAULT
+      end
+      seconds
     end
+    private :resolve_timeout
 
     def normalize_encryption(value, label)
       normalized = value.to_s.strip.downcase
@@ -486,6 +535,7 @@ module Tina4
         starttls: @use_tls,
         username: authenticate ? @username : nil,
         password: authenticate ? @password : nil,
+        timeout: @timeout,
         &block
       )
     end

data/lib/tina4/metrics.rb

@@ -50,7 +50,11 @@ module Tina4
       binary = engine_path
       raise MetricsEngineError, "tina4 not found on PATH - #{INSTALL_HINT}" unless binary
 
-      stdout, stderr, status = Open3.capture3(binary, 'metrics', '--path', path.to_s, '--json')
+      # --no-history: a dashboard READ must never write .tina4-metrics.json.
+      # Without it every scan records history, the file watcher sees the write
+      # and reloads the page, which re-scans - a self-inflicted ~2-second reload
+      # loop that makes the dashboard unusable.
+      stdout, stderr, status = Open3.capture3(binary, 'metrics', '--path', path.to_s, '--json', '--no-history')
       unless status.success?
         detail = (stderr.empty? ? stdout : stderr).strip.lines.first || "exit code #{status.exitstatus}"
         raise MetricsEngineError, "tina4 metrics failed on #{path}: #{detail.strip}"

data/lib/tina4/migration.rb

@@ -6,42 +6,51 @@
 # file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 require "fileutils"
+require "digest"
+require "tmpdir"
 
 module Tina4
   class Migration
     TRACKING_TABLE = "tina4_migration"
+    # Lock name shared by GET_LOCK (MySQL) and sp_getapplock (MSSQL).
+    LOCK_NAME = "tina4_migration_lock"
 
     attr_reader :db, :migrations_dir
 
     def initialize(db, migrations_dir: nil)
       @db = db
       @migrations_dir = migrations_dir || resolve_migrations_dir
-      ensure_tracking_table
+      # Ruby boots once per process (no per-request re-entry like PHP's php -S),
+      # so there is no concurrent CONSTRUCT race here — the table is ensured
+      # eagerly as before. migrate also re-ensures it UNDER the run-wide lock
+      # (idempotent), which is where the #277 apply race is actually serialized.
+      ensure_tracking_table if @db
     end
 
-    # Run all pending migrations
+    # Run all pending migrations under a cross-process lock.
+    #
+    # The lock serializes concurrent startup migrations (#277): the hook runs per
+    # request under php -S-style servers and once per process on a long-lived
+    # server, so several workers could reach a fresh database at once and apply
+    # the same migration more than once (a data migration then inserted its rows
+    # twice). Now the winner migrates while the rest block, then re-read the
+    # applied set and find nothing pending. Every backend auto-releases the lock
+    # when the holder's session/process dies, so a crash never deadlocks boot.
     def migrate
-      pending = pending_migrations
-      if pending.empty?
-        Tina4::Log.info("No pending migrations")
-        return []
-      end
-
-      batch = next_batch_number
-      results = []
-      pending.each do |file|
-        result = run_migration(file, batch)
-        results << result
-        # Stop on failure
-        break if result[:status] == "failed"
+      lock = acquire_migration_lock
+      begin
+        ensure_tracking_table
+        run_pending
+      ensure
+        release_migration_lock(lock)
       end
-      results
     end
 
     alias run migrate
 
     # Rollback last batch (or N steps)
     def rollback(steps = 1)
+      ensure_tracking_table
       completed = completed_migrations_with_batch
       return [] if completed.empty?
 
@@ -60,6 +69,7 @@ module Tina4
     end
 
     def status
+      ensure_tracking_table
       {
         completed: completed_migrations,
         pending: pending_migrations.map { |f| File.basename(f) }
@@ -178,6 +188,112 @@ module Tina4
 
     private
 
+    # Apply every pending migration, in order. Caller holds the run-wide lock.
+    def run_pending
+      pending = pending_migrations
+      if pending.empty?
+        Tina4::Log.info("No pending migrations")
+        return []
+      end
+
+      batch = next_batch_number
+      results = []
+      pending.each do |file|
+        result = run_migration(file, batch)
+        results << result
+        # Stop on failure
+        break if result[:status] == "failed"
+      end
+      results
+    end
+
+    # A stable signed-64-bit key for PostgreSQL's pg_advisory_lock, derived from
+    # the lock name so it cannot collide with an application's own advisory-lock
+    # keys. It is a constant (not user input), so inlining it in the SQL is
+    # injection-safe.
+    def pg_advisory_key
+      Digest::SHA256.digest(LOCK_NAME)[0, 8].unpack1("q")
+    end
+
+    # Take the run-wide migration lock, blocking until it is held.
+    #
+    # PostgreSQL/MySQL/MSSQL use a native session-scoped advisory lock; SQLite,
+    # Firebird and anything else fall back to an OS advisory file lock on a
+    # sidecar in the migrations folder. A backend that cannot lock degrades to the
+    # file lock, and finally to running unlocked (the pre-#277 behaviour) rather
+    # than blocking boot. Returns [kind, resource] for release_migration_lock.
+    def acquire_migration_lock
+      engine = (@db.respond_to?(:get_database_type) ? @db.get_database_type : "").to_s.downcase
+
+      begin
+        if engine.start_with?("postgres")
+          @db.fetch("SELECT pg_advisory_lock(#{pg_advisory_key}) AS locked")
+          return [:postgres, nil]
+        elsif engine.start_with?("mysql")
+          # -1 = wait indefinitely; GET_LOCK is connection-scoped.
+          @db.fetch("SELECT GET_LOCK('#{LOCK_NAME}', -1) AS locked")
+          return [:mysql, nil]
+        elsif engine == "mssql" || engine == "sqlserver"
+          @db.execute(
+            "DECLARE @res INT; EXEC @res = sp_getapplock @Resource = '#{LOCK_NAME}', " \
+            "@LockMode = 'Exclusive', @LockOwner = 'Session', @LockTimeout = -1"
+          )
+          return [:mssql, nil]
+        end
+      rescue => e
+        Tina4::Log.debug("DB migration lock unavailable (#{engine}): #{e.message}; using a file lock")
+      end
+
+      acquire_file_lock
+    end
+
+    # OS advisory file lock on a sidecar — the portable fallback (crash-safe: the
+    # kernel drops it when the process exits).
+    def acquire_file_lock
+      handle = File.open(file_lock_path, File::RDWR | File::CREAT, 0o644)
+      handle.flock(File::LOCK_EX)
+      [:file, handle]
+    rescue => e
+      Tina4::Log.debug("file migration lock unavailable: #{e.message}; running unlocked")
+      [:none, nil]
+    end
+
+    # Where the advisory lock file lives: the system temp directory, NOT the
+    # migrations folder. The lock is a runtime artifact, not a migration — a
+    # dotfile left in the tracked migrations/ directory gets committed by accident
+    # and blocks a plain rmdir of the folder. The name is derived from the ABSOLUTE
+    # migrations directory, so every worker of the SAME app lands on the SAME file
+    # and flock() serializes them, while two different apps get two different locks.
+    # This keeps the lock scope identical to before; only the file's location
+    # changed. Mirrors the PHP reference's fileLockPath() (issue #277).
+    def file_lock_path
+      key = begin
+        File.realpath(@migrations_dir)
+      rescue StandardError
+        @migrations_dir
+      end
+      File.join(Dir.tmpdir, "tina4-migration-#{Digest::SHA256.hexdigest(key)}.lock")
+    end
+
+    def release_migration_lock(handle)
+      kind, resource = handle
+      case kind
+      when :postgres
+        @db.fetch("SELECT pg_advisory_unlock(#{pg_advisory_key}) AS released")
+      when :mysql
+        @db.fetch("SELECT RELEASE_LOCK('#{LOCK_NAME}') AS released")
+      when :mssql
+        @db.execute("EXEC sp_releaseapplock @Resource = '#{LOCK_NAME}', @LockOwner = 'Session'")
+      when :file
+        if resource
+          resource.flock(File::LOCK_UN)
+          resource.close
+        end
+      end
+    rescue => e
+      Tina4::Log.debug("migration lock release failed (#{handle&.first}): #{e.message}")
+    end
+
     # Resolve migrations directory: prefer src/migrations, fall back to migrations/
     def resolve_migrations_dir
       # Canonical location is migrations/ (project root) — matches the Python reference, the CLI,

data/lib/tina4/plan.rb

@@ -407,7 +407,7 @@ module Tina4
         user_parts << "Extra context from caller: #{prompt}" unless prompt.to_s.empty?
         user_parts << "Reply with ONLY the JSON array — no explanation, no markdown fences."
 
-        ai_url = ENV.fetch("TINA4_AI_URL", "http://localhost:11437/api/chat")
+        ai_url = ENV.fetch("TINA4_AI_URL", "http://localhost:11435/api/chat")
         ai_model = ENV.fetch("TINA4_AI_MODEL", "qwen2.5-coder:14b")
 
         reply = begin

data/lib/tina4/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"
     }
   ]
 }

data/lib/tina4/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>