@appaflytech/zeyrek-ai-mcp 0.0.7 → 0.0.9

package/dist/platform/screenshot.js

@@ -1,4 +1,5 @@
 import { PlatformApiError } from './errors.js';
+import { parseDomSummary } from './domSummary.js';
 import { INTERNAL_ROLE_SEPARATOR, knownInternalRoles } from '../knowledge/componentCatalog.js';
 import { logStep } from '../observability/trace.js';
 /**
@@ -29,55 +30,300 @@ export function actionScript(action) {
       var node = document.querySelector(${selector});
       if (!node) return { found: false, applied: false, requests: count };
       var target = node.matches('button, a, [role="button"]') ? node : (node.querySelector('button, a, [role="button"]') || node);
+      // S-2: sekme grubunun KÖKÜNE click, DOM sırasındaki ilk sekmeye gider ve "uygulandı" der —
+      // ajan ikinci sekmeyi hiç seçemiyordu (2026-09-16 raporu madde 6). Sekme seçmek 'tab'in işi.
+      if (target.closest && target.closest('[role="tablist"]') && !node.matches('[role="tab"]')) {
+        return { found: true, applied: false, note: "hedef bir sekme grubu: click İLK sekmeye giderdi — sekme seçmek için { action: 'tab', target: '" + ${JSON.stringify(String(action.target ?? ''))} + "', value: '<sekme anahtarı ya da metni>' } kullanın", requests: count };
+      }
       target.click();
       return { found: true, applied: true, requests: count };
     })()`;
     }
+    // S-2 — sekme SEÇİLEMİYORDU: kimlik `<elementId>__tab-<key>` (frontend f-02) önce denenir,
+    // runtime onu basmıyorsa görünen metinle eşlenir ve rapor hangisiyle eşlediğini söyler —
+    // metin çeviriye bağlıdır, dil değişince kırılır.
+    if (action.action === 'tab') {
+        const roleSelector = JSON.stringify(`[data-element-id="${String(action.target ?? '')}__tab-${String(action.value ?? '')}"]`);
+        return `(function () {
+      var count = performance.getEntriesByType('resource').length;
+      var root = document.querySelector(${selector});
+      if (!root) return { found: false, applied: false, requests: count };
+      var wanted = String(${value});
+      var byRole = document.querySelector(${roleSelector});
+      var buttons = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
+      var byText = buttons.filter(function (button) { return (button.textContent || '').trim() === wanted; })[0]
+        || buttons.filter(function (button) { return (button.textContent || '').trim().toLowerCase() === wanted.toLowerCase(); })[0];
+      var target = byRole || byText;
+
+      if (!target) {
+        var names = buttons.map(function (button) { return (button.textContent || '').trim(); }).join(' · ');
+        return { found: true, applied: false, optionsSeen: buttons.length, requests: count, note: buttons.length === 0
+          ? "bu düğümde sekme yok (role=tab) — hedef gerçekten bir sekme grubu mu? page_schema_get ile tipe bakın"
+          : "sekme bulunamadı: " + wanted + " — sekme ANAHTARINI ya da görünen metnini verin; görülenler: " + names };
+      }
+
+      if (target.disabled === true || target.getAttribute('aria-disabled') === 'true') {
+        return { found: true, applied: false, note: "sekme devre dışı (disabled): " + wanted, requests: count };
+      }
+
+      target.click();
+      return { found: true, applied: true, matchedBy: byRole ? 'role' : 'text', requests: count };
+    })()`;
+    }
+    // S-3 — açılır kutuda seçim. 'set' ile aynı gövde; buradaki fark yalnız prop izi tutulmamasıdır
+    // (seçim kutunun kendi değerini yazar, DOM'a elle yazılan bir değer yoktur).
+    if (action.action === 'select') {
+        return `(function () {
+      var count = performance.getEntriesByType('resource').length;
+      var node = document.querySelector(${selector});
+      if (!node) return { found: false, applied: false, requests: count };
+      var wanted = String(${value});
+      var finish = function (result) { return result; };
+
+    var combobox = node.querySelector('[role="combobox"], .ng-select__value-container, .ng-multiselect__value-container');
+    if (combobox) {
+      // Liste BU kutunun kabının içindedir. Sorgular belge kapsamlı kaldığında açık duran başka
+      // bir kutunun (multiselect seçimden sonra kapanmıyor) seçeneğine tıklanabiliyordu ve adım
+      // "uygulandı" diyordu; komşunun yükleme göstergesi de bu kutunun kararını blokluyordu (B-5).
+      var scope = combobox.closest('.ng-select, .ng-multiselect') || node;
+
+      combobox.click();
+
+      return new Promise(function (resolve) {
+        var waited = 0;
+        var step = 100;
+        var limit = 3000;
+
+        var attempt = function () {
+          var loading = scope.querySelector('.ng-select__loading, .ng-multiselect__loading');
+          var options = Array.prototype.slice.call(scope.querySelectorAll('[role="treeitem"][data-value]'));
+          var byValue = options.filter(function (option) { return option.getAttribute('data-value') === wanted; })[0];
+          var byText = options.filter(function (option) { return (option.textContent || '').trim() === wanted; })[0];
+          var match = byValue || byText;
+
+          if (match) {
+            var button = match.querySelector('button');
+            // Seçilemeyen seçeneğe tıklamak hiçbir şey yapmaz; "uygulandı" demek yanlış olurdu (B-6).
+            if (match.getAttribute('aria-disabled') === 'true' || (button && button.disabled)) {
+              resolve(finish({ found: true, applied: false, optionsSeen: options.length, waitedMs: waited, requests: count, note: "seçenek devre dışı (aria-disabled): " + wanted }));
+              return;
+            }
+
+            (button || match).click();
+            resolve(finish({ found: true, applied: true, matchedBy: byValue ? 'value' : 'text', optionsSeen: options.length, waitedMs: waited, requests: count }));
+            return;
+          }
+
+          var settled = !loading && (options.length > 0 || !!scope.querySelector('.ng-select__empty, .ng-multiselect__empty'));
+
+          if (settled || waited >= limit) {
+            var seen = options.slice(0, 10).map(function (option) { return (option.textContent || '').trim(); }).join(' · ');
+            // Liste HİÇ açılmadıysa kusur sorguda değil kutunun kendisinde olabilir:
+            // handleContainerClick kilitli/salt-okunur/yükleniyor kutuda erken döner.
+            var locked = !scope.querySelector('.ng-select__list, .ng-multiselect__list');
+            var note = options.length > 0
+              ? "açılır kutuda bu değere karşılık gelen seçenek yok: " + wanted + " — görülen " + options.length + " seçenek: " + seen
+              : locked
+                ? "açılır kutu AÇILMADI (" + waited + " ms): kutu devre dışı, salt okunur ya da hâlâ yükleniyor olabilir — page_runtime_get ile isDisabled/isReadonly/isLoading prop'larına bakın"
+                : "açılır kutu açıldı ama " + waited + " ms içinde hiç seçenek basılmadı — seçenekler bir sorgudan geliyorsa query_preview ile doğrulayın, yavaşsa önce bir wait adımı ekleyin";
+            resolve(finish({ found: true, applied: false, optionsSeen: options.length, waitedMs: waited, requests: count, note: note }));
+            return;
+          }
+
+          waited += step;
+          setTimeout(attempt, step);
+        };
+
+        attempt();
+      });
+    }
+      return { found: true, applied: false, note: "bu düğümde açılır kutu yok (role=combobox / .ng-select__value-container) — native alan için 'set', butona basmak için 'click' kullanın", requests: count };
+    })()`;
+    }
+    // S-4 — form gönderme. Gönder butonu olmayan ya da Enter ile gönderilen form başsız
+    // doğrulanamıyordu; `requestSubmit` formun kendi submit olayını doğduğu gibi doğurur.
+    if (action.action === 'submit') {
+        return `(function () {
+      var count = performance.getEntriesByType('resource').length;
+      var node = document.querySelector(${selector});
+      if (!node) return { found: false, applied: false, requests: count };
+      var form = node.matches('form') ? node : (node.querySelector('form') || node.closest('form'));
+
+      if (form) {
+        if (typeof form.requestSubmit === 'function') {
+          form.requestSubmit();
+          return { found: true, applied: true, submitVia: 'requestSubmit', requests: count };
+        }
+
+        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+        return { found: true, applied: true, submitVia: 'dispatch', requests: count };
+      }
+
+      var button = node.querySelector('button[type="submit"]');
+
+      if (button) {
+        button.click();
+        return { found: true, applied: true, submitVia: 'button', requests: count };
+      }
+
+      return { found: true, applied: false, note: "bu düğüm bir form değil ve içinde submit butonu da yok — form komponentinin elementId'sini hedefleyin", requests: count };
+    })()`;
+    }
+    // G-09 — kanban kartı ve takvim etkinliği HTML5 DnD ile taşınır. Olaylar sentetik atılır ve
+    // TEK DataTransfer'i paylaşır; koordinat bırakma hedefinin merkezidir, çünkü takvimin saat
+    // kolonu bırakılan saati `clientY`'den hesaplar (slot hedefi o saatin ortasına düşer).
+    // Playwright `dragTo` gerçek fare sürer ama ScreenshotPage bu yeteneği taşımaz; betik yolu
+    // öteki eylemlerle aynı ölçüm döngüsünden (requests · flowRuns) geçer.
+    if (action.action === 'drag') {
+        const destination = JSON.stringify(`[data-element-id="${String(action.to ?? '')}"]`);
+        const destinationName = JSON.stringify(String(action.to ?? ''));
+        return `(function () {
+      var count = performance.getEntriesByType('resource').length;
+      var node = document.querySelector(${selector});
+      if (!node) return { found: false, applied: false, requests: count };
+      var drop = document.querySelector(${destination});
+      if (!drop) return { found: false, applied: false, note: "sürükleme kaynağı bulundu ama bırakma hedefi ('to') sayfada yok: " + ${destinationName} + " — kanban kolonu <elementId>__col-<value>, takvim günü <elementId>__day-<yyyy-MM-dd>, saat dilimi <elementId>__slot-<yyyy-MM-dd>T<HH>", requests: count };
+      if (node.getAttribute('draggable') !== 'true') return { found: true, applied: false, note: "kaynak sürüklenebilir değil (draggable != true) — kanban isDraggable ya da eventcalendar isEditable kapalı olabilir", requests: count };
+      var transfer = new DataTransfer();
+      var center = function (element) { var rect = element.getBoundingClientRect(); return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }; };
+      var fire = function (element, type, at) { element.dispatchEvent(new DragEvent(type, { bubbles: true, cancelable: true, composed: true, dataTransfer: transfer, clientX: at.x, clientY: at.y })); };
+      var from = center(node);
+      var to = center(drop);
+      fire(node, 'dragstart', from);
+      fire(drop, 'dragenter', to);
+      fire(drop, 'dragover', to);
+      fire(drop, 'drop', to);
+      fire(node, 'dragend', to);
+      return { found: true, applied: true, requests: count };
+    })()`;
+    }
+    const target = String(action.target ?? '');
+    const root = rootElementId(target);
+    // G-14 — `applied` yalnız "DOM'a yazıldı" demekti: tarih seçici olayı dinlemiyordu, kutu dolu
+    // görünüyor, prop boş kalıyordu. Kökün prop parmak izi eylemden ÖNCE alınır; runActions
+    // yerleşmeden sonra yeniden okuyup `propWritten`'ı çıkarır. Çok alanlı bileşenin kökünde tek
+    // değer yoktur — ilk kutuya yazmak yarım değeri "uygulandı" diye raporluyordu, kök reddedilir.
     return `(function () {
     var count = performance.getEntriesByType('resource').length;
     var node = document.querySelector(${selector});
     if (!node) return { found: false, applied: false, requests: count };
     var wanted = String(${value});
+    var propsBefore = ${runtimePropsScript(root)};
+    var finish = function (result) { if (propsBefore !== undefined) result.propsBefore = propsBefore; return result; };
+
+    if (${JSON.stringify(root === target)}) {
+      var parts = Array.prototype.slice.call(node.querySelectorAll(${JSON.stringify(`[data-element-id^="${root}${INTERNAL_ROLE_SEPARATOR}"]`)}))
+        .filter(function (part) { return part.querySelector('input, select, textarea'); })
+        .map(function (part) { return part.getAttribute('data-element-id'); });
+      if (parts.length > 1) return finish({ found: true, applied: false, note: "çok alanlı bileşen: kökte tek değer yok, değeri kutulardan birine yazın — " + parts.join(' · '), requests: count });
+    }
+
+    // Açılır kutu (dropdown / multi-select) NATIVE alan değildir: değeri yazmak hiçbir şey
+    // yapmaz, seçeneğe TIKLANMASI gerekir. 'set' bu noktada 'select' fiiliyle AYNI yola girer —
+    // iki kopya seçim mantığı tutulmaz.
 
-    // Açılır kutu (dropdown / multi-select) NATIVE alan değildir: değeri yazmak
-    // hiçbir şey yapmaz, seçeneğe TIKLANMASI gerekir. Liste ancak kutu açıkken
-    // basılır, o yüzden önce kutu açılır, sonra data-value ile seçenek bulunur
-    // (bulunamazsa görünen metinle eşlenir).
     var combobox = node.querySelector('[role="combobox"], .ng-select__value-container, .ng-multiselect__value-container');
     if (combobox) {
+      // Liste BU kutunun kabının içindedir. Sorgular belge kapsamlı kaldığında açık duran başka
+      // bir kutunun (multiselect seçimden sonra kapanmıyor) seçeneğine tıklanabiliyordu ve adım
+      // "uygulandı" diyordu; komşunun yükleme göstergesi de bu kutunun kararını blokluyordu (B-5).
+      var scope = combobox.closest('.ng-select, .ng-multiselect') || node;
+
       combobox.click();
 
-      // Liste tıklamadan SONRA basılır; aynı tick'te sorgulamak boş sonuç verir.
-      // evaluate döndürülen promise'i bekler, o yüzden seçim bir sonraki tur yapılır.
       return new Promise(function (resolve) {
-        setTimeout(function () {
-          var options = Array.prototype.slice.call(document.querySelectorAll('[role="treeitem"][data-value]'));
-          var match = options.filter(function (option) { return option.getAttribute('data-value') === wanted; })[0]
-            || options.filter(function (option) { return (option.textContent || '').trim() === wanted; })[0];
-          if (!match) {
-            resolve({ found: true, applied: false, note: "açılır kutu açıldı ama bu değere karşılık gelen seçenek yok: " + wanted + " — options listesini page_runtime_get ile doğrulayın; seçenek sayısı: " + options.length, requests: count });
+        var waited = 0;
+        var step = 100;
+        var limit = 3000;
+
+        var attempt = function () {
+          var loading = scope.querySelector('.ng-select__loading, .ng-multiselect__loading');
+          var options = Array.prototype.slice.call(scope.querySelectorAll('[role="treeitem"][data-value]'));
+          var byValue = options.filter(function (option) { return option.getAttribute('data-value') === wanted; })[0];
+          var byText = options.filter(function (option) { return (option.textContent || '').trim() === wanted; })[0];
+          var match = byValue || byText;
+
+          if (match) {
+            var button = match.querySelector('button');
+            // Seçilemeyen seçeneğe tıklamak hiçbir şey yapmaz; "uygulandı" demek yanlış olurdu (B-6).
+            if (match.getAttribute('aria-disabled') === 'true' || (button && button.disabled)) {
+              resolve(finish({ found: true, applied: false, optionsSeen: options.length, waitedMs: waited, requests: count, note: "seçenek devre dışı (aria-disabled): " + wanted }));
+              return;
+            }
+
+            (button || match).click();
+            resolve(finish({ found: true, applied: true, matchedBy: byValue ? 'value' : 'text', optionsSeen: options.length, waitedMs: waited, requests: count }));
+            return;
+          }
+
+          var settled = !loading && (options.length > 0 || !!scope.querySelector('.ng-select__empty, .ng-multiselect__empty'));
+
+          if (settled || waited >= limit) {
+            var seen = options.slice(0, 10).map(function (option) { return (option.textContent || '').trim(); }).join(' · ');
+            // Liste HİÇ açılmadıysa kusur sorguda değil kutunun kendisinde olabilir:
+            // handleContainerClick kilitli/salt-okunur/yükleniyor kutuda erken döner.
+            var locked = !scope.querySelector('.ng-select__list, .ng-multiselect__list');
+            var note = options.length > 0
+              ? "açılır kutuda bu değere karşılık gelen seçenek yok: " + wanted + " — görülen " + options.length + " seçenek: " + seen
+              : locked
+                ? "açılır kutu AÇILMADI (" + waited + " ms): kutu devre dışı, salt okunur ya da hâlâ yükleniyor olabilir — page_runtime_get ile isDisabled/isReadonly/isLoading prop'larına bakın"
+                : "açılır kutu açıldı ama " + waited + " ms içinde hiç seçenek basılmadı — seçenekler bir sorgudan geliyorsa query_preview ile doğrulayın, yavaşsa önce bir wait adımı ekleyin";
+            resolve(finish({ found: true, applied: false, optionsSeen: options.length, waitedMs: waited, requests: count, note: note }));
             return;
           }
-          (match.querySelector('button') || match).click();
-          resolve({ found: true, applied: true, requests: count });
-        }, 300);
+
+          waited += step;
+          setTimeout(attempt, step);
+        };
+
+        attempt();
       });
     }
 
     var field = node.matches('input, select, textarea') ? node : node.querySelector('input, select, textarea');
-    if (!field) return { found: true, applied: false, note: 'düğümde input/select/textarea yok — bu komponent native alan kullanmıyor olabilir, click ile deneyin', requests: count };
+    if (!field) return finish({ found: true, applied: false, note: 'düğümde input/select/textarea yok — bu komponent native alan kullanmıyor olabilir, click ile deneyin', requests: count });
     var proto = field instanceof HTMLSelectElement ? HTMLSelectElement.prototype
       : (field instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype);
     if (field instanceof HTMLInputElement && (field.type === 'checkbox' || field.type === 'radio')) {
       var shouldCheck = wanted === 'true' || wanted === '1' || wanted === 'on';
       if (field.checked !== shouldCheck) field.click();
-      return { found: true, applied: true, requests: count };
+      return finish({ found: true, applied: true, requests: count });
     }
     var setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
     setter.call(field, ${value});
     field.dispatchEvent(new Event('input', { bubbles: true }));
     field.dispatchEvent(new Event('change', { bubbles: true }));
-    return { found: true, applied: true, requests: count };
+    return finish({ found: true, applied: true, requests: count });
+  })()`;
+}
+/** `rf_range__start` → `rf_range`: iç rol hedefinin prop'ları kök düğümde yaşar. */
+export function rootElementId(target) {
+    const separator = target.indexOf(INTERNAL_ROLE_SEPARATOR);
+    return separator > 0 ? target.slice(0, separator) : target;
+}
+/**
+ * Düğümün runtime prop'larının parmak izi (`@ng-apps/flow` → flow-runtime-props.ts,
+ * `window.__ngAppsReadProps`). `undefined` okuyucu yayınlanmıyor (eski runtime) ya da prop'lar
+ * serileşmiyor; `null` hiçbir makine düğümü tanımıyor; dize karşılaştırılabilir iz.
+ */
+export function runtimePropsScript(elementId) {
+    return `(function () { /* runtimePropsSnapshot */
+    var read = window.__ngAppsReadProps;
+    if (typeof read !== 'function') return undefined;
+    try { var props = read(${JSON.stringify(elementId)}); return props === null ? null : JSON.stringify(props); } catch (error) { return undefined; }
+  })()`;
+}
+/**
+ * Hangi sekme AÇIK? `tab` adımı tıklamanın işe yarayıp yaramadığını ancak bununla kanıtlar:
+ * tıklama "uygulandı" dese de bileşen seçimi kendi `selected` prop'una yazmamış olabilir.
+ * `undefined` düğüm yok, `null` sekme grubu var ama hiçbiri seçili değil.
+ */
+export function activeTabScript(elementId) {
+    return `(function () { /* activeTabSnapshot */
+    var root = document.querySelector(${JSON.stringify(`[data-element-id="${elementId}"]`)});
+    if (!root) return undefined;
+    var active = root.querySelector('[role="tab"][aria-selected="true"]');
+    return active ? String(active.textContent || '').replace(/\\s+/g, ' ').trim() : null;
   })()`;
 }
 /**
@@ -100,6 +346,123 @@ export const contentHeightScript = [
     '  return { contentHeight: Math.max.apply(null, heights), viewportHeight: viewportHeight };',
     '})()'
 ].join('\n');
+/**
+ * Kırpma kutusu CSS pikselinde okunur; kare çekilirken Chromium onu `scale` ile çarpar
+ * (ölçüldü 2026-09-16: viewport 1280x800 · scale 0.5 · clip 300x100 → 150x50 raster).
+ * `null` düğüm yok demektir — tool bunu HATAYA çevirir, boş kare döndürmez.
+ */
+export function clipRectScript(elementId) {
+    return `(function () { /* clipRect */
+    var node = document.querySelector(${JSON.stringify(`[data-element-id="${elementId}"]`)});
+    if (!node) return null;
+    var rect = node.getBoundingClientRect();
+    var x = rect.x + (window.scrollX || 0);
+    var y = rect.y + (window.scrollY || 0);
+    // Negatif kenar kırpılırken BOY da kısalır; yoksa kutu aşağı kayar ve kare düğümün altını gösterir.
+    return { x: Math.max(x, 0), y: Math.max(y, 0), width: rect.width + Math.min(x, 0), height: rect.height + Math.min(y, 0) };
+  })()`;
+}
+/**
+ * Karenin raster boyu başlıktan okunur: PNG'de IHDR, JPEG'de ilk SOF işaretçisi. Ölçeğin
+ * gerçekten uygulandığı yanıtta SAYIYLA görünsün diye var — "yarı çözünürlük istedim" ile
+ * "yarı çözünürlük aldım" arasındaki farkı başka hiçbir alan söylemiyor.
+ */
+export function imageSize(buffer) {
+    if (buffer.length > 24 && buffer.subarray(1, 4).toString() === 'PNG') {
+        return { width: buffer.readUInt32BE(16), height: buffer.readUInt32BE(20) };
+    }
+    if (buffer.length > 4 && buffer[0] === 0xff && buffer[1] === 0xd8) {
+        let offset = 2;
+        while (offset + 9 < buffer.length) {
+            if (buffer[offset] !== 0xff) {
+                offset += 1;
+                continue;
+            }
+            const marker = buffer[offset + 1] ?? 0;
+            const length = buffer.readUInt16BE(offset + 2);
+            // SOF0-SOF3 · SOF5-SOF7 · SOF9-SOF11 · SOF13-SOF15 boyutu taşır; DHT/DRI gibi işaretçiler atlanır.
+            if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+                return { height: buffer.readUInt16BE(offset + 5), width: buffer.readUInt16BE(offset + 7) };
+            }
+            offset += 2 + length;
+        }
+    }
+    return undefined;
+}
+/**
+ * NE GÖRÜNÜYOR — resimsiz (S-5). Aynı sayfa yüklemesinden çıkan üçüncü çıktı: her KÖK runtime
+ * düğümünün görünürlüğü, metni, satır sayısı, açık sekmesi, değeri ve hata metinleri.
+ *
+ * Kök düğüm = kimliğinde `__` OLMAYAN düğüm; iç roller (`tbl__row-3`) satır sayısına dönüşür,
+ * listeye girmez. Tavan 300 düğüm, metin 80 karakter (K3) — özet bir kareyi değiştirmeli, onun
+ * kadar pahalı olmamalı. Tip `data-component-type`'tan gelir (frontend f-02); runtime basmıyorsa
+ * alan YAZILMAZ ve `typed: false` döner — `layoutReportUnavailable` ile aynı dürüstlük kuralı.
+ */
+export function domSummaryScript(viewportHeight) {
+    return `(function () { /* domSummary */
+  var MAX = 300;
+  var CUT = 80;
+  // Görünür alanın GERÇEK boyu: fullPage ve clip yolları viewport'u içerik boyuna büyütür ve
+  // o anda window.innerHeight = içerik yüksekliği olur — her düğüm "ekran içinde" görünürdü ve
+  // "kart katlanmanın altında mı" sorusu HER ZAMAN 'visible' cevabı alırdı (B-10).
+  var VH = ${Math.max(Math.round(viewportHeight), 1)};
+  var clean = function (value) { return String(value || '').replace(/\\s+/g, ' ').trim(); };
+  var ROOT_SELECTOR = '[data-element-id]:not([data-element-id*="__"])';
+  var all = Array.prototype.slice.call(document.querySelectorAll('[data-element-id]'));
+  var roots = all.filter(function (node) { return String(node.getAttribute('data-element-id') || '').indexOf('__') < 0; });
+  var typed = false;
+  var nodes = roots.slice(0, MAX).map(function (node) {
+    var id = node.getAttribute('data-element-id');
+    var type = node.getAttribute('data-component-type');
+    if (type) typed = true;
+    // Bir olgu, ONU TAŞIYAN düğüme yazılır: en yakın kök ata bu düğüm değilse o olgu
+    // çocuğundur ve orada zaten listelenecektir (B-8). Aksi hâlde aynı değer üç satırda çıkar.
+    var owned = function (element) { return !!element && element.closest(ROOT_SELECTOR) === node; };
+    var rect = node.getBoundingClientRect();
+    var visible = typeof node.checkVisibility === 'function'
+      ? !!node.checkVisibility({ checkVisibilityCSS: true, checkOpacity: true })
+      : (rect.width > 0 && rect.height > 0);
+    var inViewport = rect.bottom > 0 && rect.right > 0 && rect.top < VH && rect.left < (window.innerWidth || 0);
+    // Kap düğümün innerText'i ÇOCUKLARININ metnidir; metin yalnız YAPRAK köklerde yazılır.
+    var nested = Array.prototype.slice.call(node.querySelectorAll('[data-element-id]'))
+      .some(function (child) { return String(child.getAttribute('data-element-id') || '').indexOf('__') < 0; });
+    var text = nested ? '' : clean(node.innerText);
+    if (text.length > CUT) text = text.slice(0, CUT) + '…';
+    var rows = document.querySelectorAll('[data-element-id^="' + id + '__row-"]').length;
+    var tab = node.querySelector('[role="tab"][aria-selected="true"]');
+    var field = node.querySelector('input, select, textarea');
+    var chosen = node.querySelector('.selected-item');
+    var holder = field || chosen;
+    var value = !owned(holder) ? '' : (field ? (field.type === 'password' ? '***' : clean(field.value)) : clean(chosen.textContent));
+    var media = node.querySelector('img, svg, canvas, video, iframe');
+    // İç içe <li> hem grubu hem alt mesajları sayıyordu: tek grup + 2 alt hata 3 görünüyordu (B-7).
+    var errorItems = Array.prototype.slice.call(node.querySelectorAll('.form-validation-errors li:not(:has(li))'))
+      .filter(owned).map(function (item) { return clean(item.textContent); });
+    // aria-invalid hem köke hem input'a yazılabiliyor (Password.svelte); yalnız ALANLAR sayılır.
+    var invalid = Array.prototype.slice.call(node.querySelectorAll('input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]')).filter(owned).length;
+    var summary = { elementId: id, visible: !!visible, inViewport: !!inViewport };
+    if (type) summary.type = type;
+    if (text) summary.text = text;
+    if (rows > 0) summary.rows = rows;
+    if (owned(tab)) summary.activeTab = clean(tab.textContent);
+    if (value) summary.value = value;
+    if (visible && !text && !media && !nested) summary.empty = true;
+    if (errorItems.length > 0) summary.errors = errorItems;
+    else if (invalid > 0) summary.errors = ['aria-invalid: ' + invalid];
+    return summary;
+  });
+  var messages = [];
+  Array.prototype.slice.call(document.querySelectorAll('.ng-toast')).forEach(function (toast) {
+    var name = String(toast.className || '');
+    var kind = name.indexOf('ng-toast--error') >= 0 ? 'toast/error' : (name.indexOf('ng-toast--success') >= 0 ? 'toast/success' : 'toast');
+    messages.push({ kind: kind, text: clean(toast.innerText).slice(0, 160) });
+  });
+  Array.prototype.slice.call(document.querySelectorAll('.view-detail__error, .error-page')).forEach(function (node) {
+    messages.push({ kind: 'error', text: clean(node.innerText).slice(0, 160) });
+  });
+  return { nodes: nodes, messages: messages, truncated: roots.length > MAX, typed: typed };
+})()`;
+}
 /**
  * Kare taşmayı gösterir ama ölçmez: aynı sayfa yüklemesinden neredeyse bedavaya çıkan ikinci
  * çıktı her runtime düğümünün efektif piksel kutusudur. Düğümler `data-element-id` taşımıyorsa
@@ -201,6 +564,8 @@ const redirectQuietPolls = 12;
 const idleCloseMs = 60000;
 /** Etkileşim adımındaki `wait` üst sınırı; delayMs tavanıyla aynı çizgide. */
 const maxActionWaitMs = 15000;
+/** Viewport büyütmesinden sonra yeniden yerleşme için tanınan üst süre (B-4). */
+const resizeSettleBudgetMs = 3000;
 /**
  * Navigasyon zaman aşımında toplam deneme sayısı. Soğuk Studio'da ilk `page.goto` Vite
  * derlemesini ISITIR; ikinci deneme neredeyse her zaman geçer (09-08 S-8: aynı kare üç
@@ -256,6 +621,22 @@ async function measureContentHeight(page) {
     const height = measured?.contentHeight;
     return typeof height === 'number' && Number.isFinite(height) && height > 0 ? Math.ceil(height) : undefined;
 }
+/**
+ * Kırpma kutusunu çözer. Bulunamayan ya da çizilmemiş düğüm BOŞ KARE değil HATA döndürür:
+ * "yan sütunu kırptım" deyip bomboş bir PNG almak sessiz yanlıştır.
+ */
+async function resolveClip(page, clip) {
+    if (!('element' in clip))
+        return clip;
+    const raw = await page.evaluate(clipRectScript(clip.element)).catch(() => null);
+    if (raw === null || raw === undefined) {
+        throw new PlatformApiError(`page_screenshot: clip.element '${clip.element}' sayfada yok — kırpılacak kutu bulunamadı. elementId'leri page_schema_get ile doğrulayın; bir komponentin İÇ kontrolünü kırpıyorsanız <elementId>__<rol> biçimini kullanın.`);
+    }
+    if (!(raw.width > 0 && raw.height > 0)) {
+        throw new PlatformApiError(`page_screenshot: clip.element '${clip.element}' ÇİZİLMEMİŞ (${Math.round(raw.width)}x${Math.round(raw.height)} px) — kırpma boş kare üretirdi. Düğüm gizli ya da sıfır boyutlu olabilir; layoutReport: true ile kutusuna bakın.`);
+    }
+    return { x: Math.round(raw.x), y: Math.round(raw.y), width: Math.round(raw.width), height: Math.round(raw.height) };
+}
 /**
  * Playwright bağlamı ve tarayıcısı bu sınıfta PAYLAŞILIR. İki çekim aynı anda koştuğunda
  * 2026-09-06 koşusunda ikisi de `Target page, context or browser has been closed` ile düştü
@@ -428,19 +809,41 @@ export class StudioScreenshotter {
                 : navigated
                     ? activityAfter.completed
                     : activityBefore === null ? undefined : Math.max(activityAfter.completed - activityBefore.completed, 0);
+            // `tab` adımının KANITI tıklama değil, sonuçta hangi sekmenin açık olduğudur: bileşen
+            // seçimi kendi prop'una yazmadıysa kare hâlâ eski sekmeyi gösterir ve rapor bunu söyler.
+            const activeTab = action.action === 'tab' && typeof action.target === 'string'
+                ? await page.evaluate(activeTabScript(action.target)).catch(() => undefined)
+                : undefined;
+            // G-14 — DOM'a yazmak değerin prop'a ulaştığını kanıtlamaz. İz yalnız okuyucu yayınlanıyor ve
+            // makine düğümü tanıyorsa (dize) karşılaştırılır; aksi hâlde propWritten bilinmez kalır.
+            const propsAfter = typeof before.propsBefore === 'string' && before.applied === true && !navigated
+                ? await page.evaluate(runtimePropsScript(rootElementId(String(action.target ?? '')))).catch(() => undefined)
+                : undefined;
+            const propWritten = typeof propsAfter === 'string' ? propsAfter !== before.propsBefore : undefined;
+            const applied = before.applied === true && propWritten !== false;
+            const note = propWritten === false
+                ? `değer DOM'a yazıldı ama '${rootElementId(String(action.target ?? ''))}' düğümünün runtime prop'ları DEĞİŞMEDİ — bileşen olayı kendi change yoluna çevirmedi ya da değer zaten aynıydı. Çok alanlı bileşende <elementId>__<rol> kutusunu hedefleyin (component_get → internalRoles).`
+                : before.note;
             outcomes.push({
                 index,
                 action: String(action.action),
                 ...(action.target === undefined ? {} : { target: action.target }),
+                ...(action.to === undefined ? {} : { to: action.to }),
                 found: before.found === true,
-                applied: before.applied === true,
-                ...(before.note === undefined ? {} : { note: before.note }),
+                applied,
+                ...(propWritten === undefined ? {} : { propWritten }),
+                ...(note === undefined ? {} : { note }),
                 requests,
                 ...(flowRuns === undefined ? {} : { flowRuns }),
+                ...(before.matchedBy === undefined ? {} : { matchedBy: before.matchedBy }),
+                ...(typeof activeTab === 'string' ? { activeTab } : {}),
+                ...(before.optionsSeen === undefined ? {} : { optionsSeen: before.optionsSeen }),
+                ...(before.waitedMs === undefined ? {} : { waitedMs: before.waitedMs }),
+                ...(before.submitVia === undefined ? {} : { submitVia: before.submitVia }),
                 pageState: readiness.state
             });
         }
-        logStep('tarayıcı ⤵', `${outcomes.length} etkileşim adımı koştu`, outcomes.map(outcome => `${outcome.index}. ${outcome.action}${outcome.target ? ` '${outcome.target}'` : ''} → ${outcome.found ? (outcome.applied ? 'uygulandı' : 'bulundu ama uygulanamadı') : 'hedef BULUNAMADI'} · ${outcome.requests} ağ isteği`));
+        logStep('tarayıcı ⤵', `${outcomes.length} etkileşim adımı koştu`, outcomes.map(outcome => `${outcome.index}. ${outcome.action}${outcome.target ? ` '${outcome.target}'` : ''}${outcome.to ? ` ⇒ '${outcome.to}'` : ''} → ${outcome.found ? (outcome.applied ? 'uygulandı' : 'bulundu ama uygulanamadı') : 'hedef BULUNAMADI'} · ${outcome.requests} ağ isteği`));
         return outcomes;
     }
     /**
@@ -491,6 +894,18 @@ export class StudioScreenshotter {
         }
         return { state: 'not-ready', waitedMs: Date.now() - startedAt, ...(last === undefined ? {} : { snapshot: last }) };
     }
+    /**
+     * Viewport büyütmesinden sonra sayfanın YENİDEN YERLEŞMESİNİ bekler. Eski sırada (ölç → büyüt →
+     * eylemler) büyütme sonrası render'ı her eylemin kendi hazırlık döngüsü soğuruyordu; sıra
+     * eylemlerden sonraya alınınca geriye yalnız 600 ms kalmıştı ve `onResize`'a bağlı ya da
+     * sanallaştırılmış bir tablo o pay içinde yeni satırlarını çizmeyebilirdi — özet ve kare
+     * büyütme ÖNCESİ gerçeği anlatırdı (B-4).
+     */
+    async settleAfterResize(page, baselineUrl) {
+        await page.waitForTimeout(settleMs);
+        // Yeni akış beklenmiyor: karar DOM durulmasından çıkar (`ready-no-flows` / `ready-no-counter`).
+        await this.waitForReady(page, { budgetMs: resizeSettleBudgetMs, baselineUrl, completedBefore: Number.POSITIVE_INFINITY });
+    }
     async captureOne(request) {
         const startedAt = Date.now();
         if (this.idleTimer)
@@ -502,7 +917,7 @@ export class StudioScreenshotter {
         });
         let context;
         try {
-            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: 1 });
+            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: request.scale ?? 1 });
         }
         catch {
             this.browserPromise = this.launch();
@@ -510,7 +925,7 @@ export class StudioScreenshotter {
                 this.browserPromise = undefined;
                 throw error;
             });
-            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: 1 });
+            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: request.scale ?? 1 });
         }
         logStep('tarayıcı →', `GET ${request.url} · viewport ${request.viewport.width}x${request.viewport.height}${request.fullPage ? ' · fullPage' : ''}${request.token ? '' : ' · gateway jetonu YOK'}${(request.cookies ?? []).length > 0 ? ` · caller çerezleri: ${(request.cookies ?? []).map(cookie => cookie.name).join(', ')}` : ''}${request.token || (request.cookies ?? []).length > 0 ? '' : ' · ANONİM (çerez YOK)'}${request.colorScheme ? ` · tema ${request.colorScheme}` : ''}`);
         try {
@@ -581,27 +996,75 @@ export class StudioScreenshotter {
                 : readiness.state === 'not-ready' ? false : undefined;
             const finalHref = readiness.snapshot?.href;
             const finalUrl = finalHref !== undefined && runtimePath(finalHref) !== runtimePath(request.url) ? finalHref : undefined;
+            const actions = await this.runActions(page, request);
+            // Ölçüm EYLEMLERDEN SONRA: eylem sekme değiştirir, filtre uygular, panel açar — içerik
+            // boyu o zaman kesinleşir. Eskiden ölçüm eylemlerden önceydi ve ikinci sekmede 40 satırlık
+            // tablo açan bir çekim viewport boyunda kalıyordu; `contentHeight` ilk sekmenin boyuydu
+            // (S-1, 2026-09-16 raporu madde 6). Yalnız YÜKSEKLİK büyür, genişlik sabittir: `hideOn`
+            // kırılım noktaları ve duyarlı yerleşim kareyi çekerken kaymaz (K4).
             const measured = request.fullPage ? await measureContentHeight(page) : undefined;
             const captureHeight = measured === undefined ? undefined : Math.min(measured, maxCaptureHeight);
-            if (captureHeight !== undefined && captureHeight > request.viewport.height) {
+            let viewportHeight = request.viewport.height;
+            if (captureHeight !== undefined && captureHeight > viewportHeight) {
                 await page.setViewportSize({ width: request.viewport.width, height: captureHeight });
-                await page.waitForTimeout(settleMs);
+                viewportHeight = captureHeight;
+                await this.settleAfterResize(page, readiness.snapshot?.href ?? request.url);
+            }
+            // K7 — kırpma kutusu katlanmış alanın ALTINDAYSA kare boş çıkardı: viewport kutuyu
+            // kapsayana kadar büyütülür (fullPage ile aynı yol) ve kutu YENİDEN okunur, çünkü
+            // büyüyen viewport yerleşimi kaydırabilir.
+            let clip;
+            if (request.clip) {
+                clip = await resolveClip(page, request.clip);
+                if (clip.y + clip.height > viewportHeight) {
+                    const wanted = Math.ceil(clip.y + clip.height) + 8;
+                    if (wanted > maxCaptureHeight) {
+                        throw new PlatformApiError(`page_screenshot: kırpma kutusu ${Math.round(clip.y)}+${Math.round(clip.height)} px'te bitiyor ve Chromium'un ${maxCaptureHeight} px'lik doku sınırının altına sığmıyor — viewport o kadar büyütülemez ve kare kutunun tamamını gösteremezdi. Kutuyu elle daraltın ({ x, y, width, height }) ya da sayfayı bölerek doğrulayın.`);
+                    }
+                    const grown = Math.min(wanted, maxCaptureHeight);
+                    await page.setViewportSize({ width: request.viewport.width, height: grown });
+                    viewportHeight = grown;
+                    await this.settleAfterResize(page, readiness.snapshot?.href ?? request.url);
+                    clip = await resolveClip(page, request.clip);
+                }
             }
-            const actions = await this.runActions(page, request);
             const layout = request.layoutReport === true
                 ? await page.evaluate(layoutReportScript).then(value => Array.isArray(value) ? value : []).catch(() => [])
                 : undefined;
             const runtimeErrors = await page.evaluate(flowRuntimeErrorsScript)
                 .then(value => Array.isArray(value) ? value : [])
                 .catch(() => []);
-            const png = await page.screenshot({ type: 'png', fullPage: false });
+            // Özet kareden ÖNCE ve büyütmeden SONRA: ikisi de aynı yerleşmiş sayfayı anlatsın.
+            const summaryRaw = request.summary === false
+                ? undefined
+                : await page.evaluate(domSummaryScript(request.viewport.height)).then(value => ({ value })).catch(error => ({ error: error instanceof Error ? error.message : String(error) }));
+            const summary = summaryRaw && 'value' in summaryRaw ? parseDomSummary(summaryRaw.value) : undefined;
+            const summaryUnavailable = summaryRaw === undefined
+                ? undefined
+                : 'error' in summaryRaw
+                    ? summaryRaw.error
+                    : summary === undefined ? 'tarayıcı özet döndürmedi (beklenmeyen biçim)' : undefined;
+            // Olgu doğrulamasında kare HİÇ çekilmez: maliyetin tamamı buradadır (S-5).
+            const format = request.format ?? 'png';
+            const png = request.image === 'none'
+                ? undefined
+                : await page.screenshot({
+                    type: format,
+                    ...(format === 'jpeg' && request.quality !== undefined ? { quality: request.quality } : {}),
+                    fullPage: false,
+                    ...(clip === undefined ? {} : { clip })
+                });
             const elapsedMs = Date.now() - startedAt;
-            logStep('tarayıcı ←', `PNG ${png.byteLength} B · ${elapsedMs} ms · hazırlık ${readiness.state} (${readiness.waitedMs} ms) · sayfa API yanıtı ${apiStatus === undefined ? 'gözlenmedi' : `HTTP ${apiStatus}`}${finalUrl === undefined ? '' : ` · yönlendi → ${finalUrl}`}`);
+            logStep('tarayıcı ←', `${png === undefined ? 'kare YOK (image:none)' : `PNG ${png.byteLength} B`} · ${elapsedMs} ms · hazırlık ${readiness.state} (${readiness.waitedMs} ms) · sayfa API yanıtı ${apiStatus === undefined ? 'gözlenmedi' : `HTTP ${apiStatus}`}${finalUrl === undefined ? '' : ` · yönlendi → ${finalUrl}`}`);
             if (runtimeErrors.length > 0) {
                 logStep('akış hatası ✕', `${runtimeErrors.length} akış adımı hata bıraktı — sayfa yine 200 döndü`, runtimeErrors.map(error => `${error.step?.name ?? '?'}${error.element ? ` → ${error.element}.${error.property ?? '?'}` : ''}: ${error.message ?? ''}`));
             }
             return {
-                png,
+                ...(png === undefined ? {} : { png, mimeType: format === 'jpeg' ? 'image/jpeg' : 'image/png' }),
+                ...(png === undefined ? {} : (size => size === undefined ? {} : { imageSize: size })(imageSize(png))),
+                ...(clip === undefined ? {} : { clip }),
+                ...(summary === undefined ? {} : { summary }),
+                ...(summaryUnavailable === undefined ? {} : { summaryUnavailable }),
                 apiStatus,
                 renderWaitTimedOut: apiStatus === undefined,
                 elapsedMs,