@appaflytech/zeyrek-ai-mcp 0.0.3 → 0.0.4

package/dist/platform/screenshot.js

@@ -0,0 +1,106 @@
+import { PlatformApiError } from './errors.js';
+import { logStep } from '../observability/trace.js';
+const navigationTimeoutMs = 20000;
+const apiResponseTimeoutMs = 15000;
+const settleMs = 600;
+const idleCloseMs = 60000;
+export class StudioScreenshotter {
+    config;
+    launcher;
+    browserPromise;
+    idleTimer;
+    constructor(config, launcher) {
+        this.config = config;
+        this.launcher = launcher;
+    }
+    async launch() {
+        if (this.launcher)
+            return this.launcher();
+        let chromium;
+        try {
+            chromium = (await import('playwright-core')).chromium;
+        }
+        catch {
+            throw new PlatformApiError('playwright-core paketi yüklü değil — zeyrek-mcp dizininde `npm install playwright-core` çalıştırın, ardından tarayıcı için `npx playwright-core install chromium`.');
+        }
+        logStep('tarayıcı →', 'chromium başlatılıyor (ilk çağrı — sonraki çağrılar önbellekteki tarayıcıyı kullanır)');
+        try {
+            return await chromium.launch({
+                headless: true,
+                ...(this.config.screenshotBrowserPath ? { executablePath: this.config.screenshotBrowserPath } : {})
+            });
+        }
+        catch (firstError) {
+            try {
+                return await chromium.launch({ headless: true, channel: 'chrome' });
+            }
+            catch {
+                const message = firstError instanceof Error ? firstError.message : String(firstError);
+                throw new PlatformApiError(`Chromium başlatılamadı: ${message}. \`npx playwright-core install chromium\` ile indirin; alternatif olarak sistemdeki tarayıcının yolunu SCREENSHOT_BROWSER_PATH ile verin (alpine imajında \`apk add chromium\` + /usr/bin/chromium-browser).`);
+            }
+        }
+    }
+    /**
+     * Bekleme stratejisi bilinçli olarak `networkidle` DEĞİL: Studio'nun kök layout'u
+     * office-lite.zeyrek.dev'den dış bir script yükler ve ağ hiç durulmayabilir. SSR kabuğu yalnız
+     * spinner bastığı için domcontentloaded da tek başına yetmez. Bunun yerine sayfanın kendi veri
+     * isteği (`/{app}/p/{slug}`) gözlenir; yanıt hiç gelmezse bu hata SAYILMAZ — renderWaitTimedOut
+     * işaretlenir ve kare yine çekilir, çünkü bozuk/boş sayfayı görmek de bir doğrulamadır. Veri
+     * yanıtından sonra fontlar + kısa yerleşme beklemesi Svelte hydrate'ine alan bırakır.
+     */
+    async capture(request) {
+        const startedAt = Date.now();
+        if (this.idleTimer)
+            clearTimeout(this.idleTimer);
+        this.browserPromise ??= this.launch();
+        let browser = await this.browserPromise.catch(error => {
+            this.browserPromise = undefined;
+            throw error;
+        });
+        let context;
+        try {
+            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: 1 });
+        }
+        catch {
+            this.browserPromise = this.launch();
+            browser = await this.browserPromise.catch(error => {
+                this.browserPromise = undefined;
+                throw error;
+            });
+            context = await browser.newContext({ viewport: request.viewport, deviceScaleFactor: 1 });
+        }
+        logStep('tarayıcı →', `GET ${request.url} · viewport ${request.viewport.width}x${request.viewport.height}${request.fullPage ? ' · fullPage' : ''}${request.token ? '' : ' · ANONİM (çerez YOK)'}`);
+        try {
+            if (request.token) {
+                await context.addCookies([{ name: 'NG_AccessToken', value: request.token, url: request.cookieUrl, httpOnly: false }]);
+            }
+            const page = await context.newPage();
+            const observedApiStatus = page
+                .waitForResponse(response => response.url().includes(request.apiPathMarker), { timeout: apiResponseTimeoutMs })
+                .then(response => response.status(), () => undefined);
+            try {
+                await page.goto(request.url, { waitUntil: 'domcontentloaded', timeout: navigationTimeoutMs });
+            }
+            catch (error) {
+                const message = error instanceof Error ? error.message : String(error);
+                throw new PlatformApiError(`Studio'ya ulaşılamadı: ${request.url} — ${message}. STUDIO_BASE_URL doğru mu, arayüz ayakta mı? (yerelde zeyrek-frontend/apps/studio içinde \`pnpm dev\`)`);
+            }
+            const apiStatus = await observedApiStatus;
+            await page.evaluate('document.fonts.ready.then(() => true)').catch(() => undefined);
+            await page.waitForTimeout(settleMs + request.delayMs);
+            const png = await page.screenshot({ type: 'png', fullPage: request.fullPage });
+            const elapsedMs = Date.now() - startedAt;
+            logStep('tarayıcı ←', `PNG ${png.byteLength} B · ${elapsedMs} ms · sayfa API yanıtı ${apiStatus === undefined ? 'gözlenmedi' : `HTTP ${apiStatus}`}`);
+            return { png, apiStatus, renderWaitTimedOut: apiStatus === undefined, elapsedMs };
+        }
+        finally {
+            await context.close().catch(() => undefined);
+            this.idleTimer = setTimeout(() => {
+                const expired = this.browserPromise;
+                this.browserPromise = undefined;
+                expired?.then(instance => instance.close()).catch(() => undefined);
+            }, idleCloseMs);
+            this.idleTimer.unref?.();
+        }
+    }
+}

package/dist/resources/examples/layout-app-shell.json

@@ -0,0 +1,368 @@
+{
+  "_meta": {
+    "synthetic": true,
+    "note": "Uygulama kabuğu: yan menü + üst şerit + sayfa slot'u. Studio'nun yeni layout iskeletiyle (getDefaultLayout) birebir aynı ağaç: sarmalayıcı container kök + heightType:'fill'. layout-shell/layout-region DEĞİL, sıradan container'lar. layout_create'in views alanına olduğu gibi verilebilir.",
+    "pairsWith": "page-detail-profile (slot'a girecek sayfa iskeleti), page-sign-in (layout'suz ekran)",
+    "sourceRef": "platform_guide('layout') Kural 5a/5b; zeyrek-frontend apps/studio/src/features/layout/layout.functions.ts (getDefaultLayout), packages/ng-apps-screen-builder/src/flex-layout.ts (getFlexChildStyle), packages/ng-apps-ui/src/shared/render/render.functions.ts"
+  },
+  "_rules": {
+    "viewsNotSchema": "Layout'ta şema alanının adı 'views'tir; micro-op hattı yoktur, değişiklik layout_update ile tam gövde olarak yazılır (LAY-001).",
+    "singleSlot": "TEK slot. Sayfa şeması HER slot'a ayrı ayrı kopyalanır — iki slot sayfayı iki kez çizer ve elementId'leri tekrarlar (LAY-002 / LAY-006).",
+    "propValueField": "Statik prop'un değeri 'data' alanındadır ({ type:'static', ref:null, data }); 'ref' referans tipleri (flow/file) içindir. Ham değer yazarsanız gateway sarmalar ve normalizasyon notu döner.",
+    "slotRowIsOpenEnded": "Slot'un grid satırı açık uçludur (runtime 'y / auto' yazar): sayfa uzadıkça slot uzar. Slot'a sabit yükseklik vermeye çalışma.",
+    "positionComesFromBlocks": "Konum ve boyut blocks[]'ten gelir. layout-region'daki dock prop'u konum DEĞİL biçim belirler; bu örnekte region hiç kullanılmıyor.",
+    "gridStacksFlexDoesNot": "Bu örnek layout:'flex' — fill'in 'kalanı doldur' anlamı flex'te tanımlıdır (sütunda flex:1 1 auto, satırda align-self:stretch). Bedeli MOBİL: runtime'ın mobil kuralı yalnız ızgara özelliklerini ezer, flex satırı telefonda yan yana kalır (375px'te ölçüldü: 49/310px). Telefonda alt alta düşmesi gereken kabuk için kökü layout:'grid' kur; o zaman yükseklik yine blocks satırlarından gelir.",
+    "fixedPxWidthIsFlexOnly": "Bu örnek flex olduğu için yan menüye appearance.widthPx:240 verilebilir; verilmezse genişlik kolon payıdır (12'de 2 ≈ 1440px tasarım genişliğinde 240px). Izgara kabında widthPx okunmaz.",
+    "navigationsStyleIsDead": "navigations'ın style prop'u hiçbir şey yapmaz (Navigations.svelte style prop'u kabul etmiyor) — menü satırı biçimlendirmeye çalışma.",
+    "verifyWithRuntime": "Layout'un kendi serve URL'i yok: gerçek çıktıyı layout'a bağlı bir sayfada page_runtime_get ile, slot kurgusunu page_state.layoutSlots ile doğrula.",
+    "wrapperRoot": "Kök, sayfanın page_container'ının yerleşim ikizidir: states.isWrapper:true (çerçevesiz, başlıksız, saydam) + blocks x0/w12. Sarmalayıcı olmayan bir kök kenarlıklı beyaz bir kart olarak çizilir.",
+    "fillHeight": "Yükseklik heightType:'fill' ile ifade edilir: kök ekranı doldurur (100vh), yan menü ve içerik sütunu kökün bıraktığını, slot da üst şeritten artanı alır. size.h yalnız kaba bir kılavuzdur — 'fixed' + tahmini h ile yükseklik kurmaya çalışma."
+  },
+  "layoutCreate": {
+    "name": "Uygulama kabuğu",
+    "views": [
+      {
+        "elementId": "shell_root",
+        "name": "shell_root",
+        "type": "container",
+        "kind": "component",
+        "props": {
+          "title": {
+            "type": "static",
+            "ref": null,
+            "data": ""
+          },
+          "layout": {
+            "type": "static",
+            "ref": null,
+            "data": "flex"
+          },
+          "direction": {
+            "type": "static",
+            "ref": null,
+            "data": "row"
+          },
+          "gap": {
+            "type": "static",
+            "ref": null,
+            "data": "none"
+          },
+          "verticalAlign": {
+            "type": "static",
+            "ref": null,
+            "data": "stretch"
+          }
+        },
+        "states": {
+          "isDroppable": true,
+          "isWrapper": true
+        },
+        "appearance": {
+          "heightType": "fill",
+          "marginType": "none",
+          "paddingType": "none"
+        },
+        "blocks": [
+          {
+            "breakpoint": 1024,
+            "position": {
+              "x": 0,
+              "y": 0
+            },
+            "size": {
+              "w": 12,
+              "h": 80
+            }
+          }
+        ],
+        "events": [],
+        "validations": [],
+        "stateBindings": [],
+        "children": [
+          {
+            "elementId": "shell_sidebar",
+            "name": "shell_sidebar",
+            "type": "container",
+            "kind": "component",
+            "props": {
+              "title": {
+                "type": "static",
+                "ref": null,
+                "data": ""
+              },
+              "layout": {
+                "type": "static",
+                "ref": null,
+                "data": "flex"
+              },
+              "direction": {
+                "type": "static",
+                "ref": null,
+                "data": "column"
+              },
+              "gap": {
+                "type": "static",
+                "ref": null,
+                "data": "none"
+              }
+            },
+            "states": {
+              "isDroppable": true
+            },
+            "appearance": {
+              "heightType": "fill",
+              "marginType": "none",
+              "paddingType": "none"
+            },
+            "blocks": [
+              {
+                "breakpoint": 1024,
+                "position": {
+                  "x": 0,
+                  "y": 0
+                },
+                "size": {
+                  "w": 2,
+                  "h": 80
+                }
+              }
+            ],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": [
+              {
+                "elementId": "shell_menu",
+                "name": "shell_menu",
+                "type": "navigations",
+                "kind": "component",
+                "props": {
+                  "navigations": {
+                    "type": "static",
+                    "ref": null,
+                    "data": [
+                      {
+                        "href": "",
+                        "title": "SATIŞ",
+                        "children": [
+                          {
+                            "href": "panel",
+                            "title": "Panel",
+                            "icon": {
+                              "name": "home"
+                            }
+                          },
+                          {
+                            "href": "sirketler",
+                            "title": "Şirketler",
+                            "icon": {
+                              "name": "domain"
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                },
+                "states": {},
+                "appearance": {
+                  "heightType": "auto",
+                  "marginType": "none",
+                  "paddingType": "none"
+                },
+                "blocks": [
+                  {
+                    "breakpoint": 1024,
+                    "position": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "size": {
+                      "w": 12,
+                      "h": 40
+                    }
+                  }
+                ],
+                "events": [],
+                "validations": [],
+                "stateBindings": [],
+                "children": []
+              }
+            ]
+          },
+          {
+            "elementId": "shell_main",
+            "name": "shell_main",
+            "type": "container",
+            "kind": "component",
+            "props": {
+              "title": {
+                "type": "static",
+                "ref": null,
+                "data": ""
+              },
+              "layout": {
+                "type": "static",
+                "ref": null,
+                "data": "flex"
+              },
+              "direction": {
+                "type": "static",
+                "ref": null,
+                "data": "column"
+              },
+              "gap": {
+                "type": "static",
+                "ref": null,
+                "data": "none"
+              }
+            },
+            "states": {
+              "isDroppable": true
+            },
+            "appearance": {
+              "heightType": "fill",
+              "marginType": "none",
+              "paddingType": "none"
+            },
+            "blocks": [
+              {
+                "breakpoint": 1024,
+                "position": {
+                  "x": 2,
+                  "y": 0
+                },
+                "size": {
+                  "w": 10,
+                  "h": 80
+                }
+              }
+            ],
+            "events": [],
+            "validations": [],
+            "stateBindings": [],
+            "children": [
+              {
+                "elementId": "shell_topbar",
+                "name": "shell_topbar",
+                "type": "container",
+                "kind": "component",
+                "props": {
+                  "title": {
+                    "type": "static",
+                    "ref": null,
+                    "data": ""
+                  },
+                  "layout": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "flex"
+                  },
+                  "direction": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "row"
+                  },
+                  "verticalAlign": {
+                    "type": "static",
+                    "ref": null,
+                    "data": "middle"
+                  }
+                },
+                "states": {
+                  "isDroppable": true,
+                  "isSticky": true
+                },
+                "appearance": {
+                  "heightType": "auto",
+                  "marginType": "none",
+                  "paddingType": "none"
+                },
+                "blocks": [
+                  {
+                    "breakpoint": 1024,
+                    "position": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "size": {
+                      "w": 12,
+                      "h": 6
+                    }
+                  }
+                ],
+                "events": [],
+                "validations": [],
+                "stateBindings": [],
+                "children": [
+                  {
+                    "elementId": "shell_breadcrumb",
+                    "name": "shell_breadcrumb",
+                    "type": "breadcrumb",
+                    "kind": "component",
+                    "props": {},
+                    "states": {},
+                    "appearance": {
+                      "heightType": "auto",
+                      "marginType": "none",
+                      "paddingType": "none"
+                    },
+                    "blocks": [
+                      {
+                        "breakpoint": 1024,
+                        "position": {
+                          "x": 0,
+                          "y": 0
+                        },
+                        "size": {
+                          "w": 12,
+                          "h": 3
+                        }
+                      }
+                    ],
+                    "events": [],
+                    "validations": [],
+                    "stateBindings": [],
+                    "children": []
+                  }
+                ]
+              },
+              {
+                "elementId": "shell_slot",
+                "name": "shell_slot",
+                "type": "slot",
+                "kind": "component",
+                "props": {},
+                "states": {
+                  "isScrollable": false
+                },
+                "appearance": {
+                  "heightType": "fill",
+                  "marginType": "none",
+                  "paddingType": "none"
+                },
+                "blocks": [
+                  {
+                    "breakpoint": 1024,
+                    "position": {
+                      "x": 0,
+                      "y": 6
+                    },
+                    "size": {
+                      "w": 12,
+                      "h": 74
+                    }
+                  }
+                ],
+                "events": [],
+                "validations": [],
+                "stateBindings": [],
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/dist/resources/examples/microservice-table-list.json

@@ -5,6 +5,7 @@
   },
   "definition": {
     "name": "Get Products",
+    "description": "Ürün listesini sayfalı ve süzülebilir biçimde döner.",
     "slug": "get-products",
     "type": "rest-api",
     "httpMethod": "get",