beast-agent 2.41.0 → 2.42.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "beast-agent",
     "productName": "Beast Agent",
-    "version": "2.41.0",
+    "version": "2.42.0",
     "description": "Ultra-fast local agent shell for Windows.",
     "author": "algokodcom (AlgoKod)",
     "license": "MIT",

package/src/agent/engine.js

@@ -5030,7 +5030,7 @@ const skills = require('./skills');
         folder: r.folder,
         detected: info ? { kind: info.kind, label: info.label, install: info.install, run: info.run } : undefined,
         note:
-          'Repo "' + r.name + '" → ' + r.folder + ' klasörüne indirildi. Kurmak için sandbox_repo action=kur, çalıştırmak için action=baslat; kullanıcı Sandbox panelindeki Kur/Başlat butonlarını da kullanabilir.',
+          'Repo "' + r.name + '" → ' + r.folder + ' klasörüne indirildi. Kurmak için sandbox_repo action=kur, çalıştırmak için action=baslat (bağımlılıklar eksikse önce kurar); kullanıcı Sandbox panelindeki Başlat/Dev butonlarını da kullanabilir.',
       };
     }
     if (action !== 'kur' && action !== 'baslat' && action !== 'durdur') {

package/src/agent/opencode/agents.js

@@ -131,9 +131,9 @@ function build(opts = {}) {
       ),
       prompt: [
         'BEAST SANDBOX MODUNDASIN: GitHub\u2019dan indirilmi\u015f A\u00c7IK KAYNAK bir repo klas\u00f6r\u00fcndesin (Beast-Sandbox). Bu kodun sahibi de\u011filsin \u2014 haz\u0131r bir d\u0131\u015f proje; repo sahibinin konvansiyonlar\u0131na uy, gereksiz yeniden bi\u00e7imlendirme yapma.',
-        'PANEL: \u00c7ALI\u015eTIR b\u00f6l\u00fcm\u00fcndeki Kur/Ba\u015flat/Dev butonlar\u0131 proje tipini OTOMAT\u0130K alg\u0131lar (package.json scripts + npm/pnpm/yarn/bun kilidi; requirements.txt/pyproject + uv; Cargo.toml; go.mod; statik index.html) ve do\u011fru komutu do\u011frudan \u00e7al\u0131\u015ft\u0131r\u0131r. \u00d6zel komut kutusu ad-hoc komut \u00e7al\u0131\u015ft\u0131r\u0131r; kaydet butonu o komutu repo i\u00e7in kal\u0131c\u0131 ba\u015flatma komutu yapar. Kullan\u0131c\u0131 butonla ba\u015flatt\u0131ysa \u00e7\u0131kt\u0131 panelde canl\u0131 akar, localhost adresi yakalan\u0131nca sa\u011fdaki dahili taray\u0131c\u0131da otomatik a\u00e7\u0131l\u0131r.',
-        '\u0130\u015fe README + paket bildirim dosyalar\u0131yla ba\u015fla (list/glob); kullan\u0131c\u0131 Kur demediyse ba\u011f\u0131ml\u0131l\u0131klar\u0131 sen kurabilirsin (npm install, pip install -r requirements.txt vb.). Kur/Ba\u015flat ba\u015far\u0131s\u0131z olursa ger\u00e7ek hatay\u0131 g\u00f6rmek i\u00e7in ayn\u0131 komutu bash ile \u00e7al\u0131\u015ft\u0131r, nedenini bul, gerekiyorsa d\u00fczelt ve kullan\u0131c\u0131ya do\u011fru \u00f6zel komutu s\u00f6yle (kutuya yaz\u0131p kaydetsin).',
-        'UZUN S\u00dcREL\u0130 sunucu/s\u00fcre\u00e7 (npm start, npm run dev, python app.py vb.) bash ile ASLA ba\u015flatma \u2014 tur kilitlenir; kullan\u0131c\u0131 senden isterse panel_run ile ba\u015flat (\u00e7\u0131kt\u0131 panelde akar, adres sa\u011fda a\u00e7\u0131l\u0131r). Repo ba\u015f\u0131na TEK s\u00fcre\u00e7: kullan\u0131c\u0131 zaten ba\u015flatt\u0131ysa panel_run hata verir \u2014 kullan\u0131c\u0131ya \u00f6nce Durdur demesini s\u00f6yle.',
+        'PANEL: \u00c7ALI\u015eTIR b\u00f6l\u00fcm\u00fcndeki Ba\u015flat/Dev butonlar\u0131 proje tipini OTOMAT\u0130K alg\u0131lar (package.json scripts + npm/pnpm/yarn/bun kilidi; requirements.txt/pyproject + uv; hugo/jekyll/mkdocs; Cargo.toml; go.mod; statik index.html) ve gerekirse \u00d6NCE ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurup sonra do\u011fru komutu \u00e7al\u0131\u015ft\u0131r\u0131r. Alg\u0131lama komut bulamazsa ya da komut 10 sn i\u00e7inde hata verirse sistem sana OTOMAT\u0130K mesaj d\u00fc\u015f\u00fcr\u00fcr: repo yap\u0131s\u0131na g\u00f6re (README, betikler, site ayarlar\u0131, ana dosyalar) DO\u011eRU komutu bul ve panel_run ile ba\u015flat. \u00d6zel komut kutusu ad-hoc komut \u00e7al\u0131\u015ft\u0131r\u0131r; kaydet butonu o komutu repo i\u00e7in kal\u0131c\u0131 ba\u015flatma komutu yapar. Kullan\u0131c\u0131 butonla ba\u015flatt\u0131ysa \u00e7\u0131kt\u0131 panelde canl\u0131 akar, localhost adresi yakalan\u0131nca \u00c7ALI\u015eTIR panelinde CANLI \u00d6N\u0130ZLEME a\u00e7\u0131l\u0131r (kullan\u0131c\u0131 G\u00f6rsel/\u00c7\u0131kt\u0131 d\u00fc\u011fmesiyle ge\u00e7i\u015f yapar).',
+        '\u0130\u015fe README + paket bildirim dosyalar\u0131yla ba\u015fla (list/glob); ba\u011f\u0131ml\u0131l\u0131klar kurulu de\u011filse kurulumu sen yapabilirsin (npm install, pip install -r requirements.txt vb.) \u2014 Ba\u015flat/Dev butonlar\u0131 da gerekirse \u00f6nce kurar. Komut ba\u015far\u0131s\u0131z olursa ger\u00e7ek hatay\u0131 g\u00f6rmek i\u00e7in ayn\u0131 komutu bash ile \u00e7al\u0131\u015ft\u0131r, nedenini bul, gerekiyorsa d\u00fczelt ve kullan\u0131c\u0131ya do\u011fru \u00f6zel komutu s\u00f6yle (kutuya yaz\u0131p kaydetsin).',
+        'UZUN S\u00dcREL\u0130 sunucu/s\u00fcre\u00e7 (npm start, npm run dev, hugo server, python app.py vb.) bash ile ASLA ba\u015flatma \u2014 tur kilitlenir; kullan\u0131c\u0131 senden isterse panel_run ile ba\u015flat (\u00e7\u0131kt\u0131 panelde akar, adres \u00c7ALI\u015eTIR panelinde canl\u0131 \u00f6nizlemede a\u00e7\u0131l\u0131r). Repo ba\u015f\u0131na TEK s\u00fcre\u00e7: kullan\u0131c\u0131 zaten ba\u015flatt\u0131ysa panel_run hata verir \u2014 kullan\u0131c\u0131ya \u00f6nce Durdur demesini s\u00f6yle.',
       ].join('\n'),
       mode: 'all',
       native: false,

package/src/agent/tools.js

@@ -1618,7 +1618,7 @@ const definitions = [
     function: {
       name: 'sandbox_repo',
       description:
-        'Beast Sandbox yönetimi — kullanıcı GitHub repo adresi/linki verdiğinde ya da indirilmiş bir repoyu kurmak/çalıştırmak istediğinde kullan. action=indir: repoyu ~/Beast-Sandbox klasörüne klonlar (owner/repo ya da tam URL); action=kur: algılanan kurulum komutunu (npm install, pip install -r requirements.txt, uv sync, cargo fetch, go mod download) ÇALIŞTIR panelinde başlatır; action=baslat: algılanan çalıştırma komutunu başlatır (npm run dev, python app.py vb.) — localhost adresi yakalanınca sağdaki dahili tarayıcıda otomatik açılır; action=durdur: repodaki çalışan süreci durdurur. Kur/Başlat turu KİLİTLEMEZ, çıktı panelde canlı akar. repo alanı boşsa panelde son kullanılan repo kullanılır.',
+        'Beast Sandbox yönetimi — kullanıcı GitHub repo adresi/linki verdiğinde ya da indirilmiş bir repoyu kurmak/çalıştırmak istediğinde kullan. action=indir: repoyu ~/Beast-Sandbox klasörüne klonlar (owner/repo ya da tam URL); action=kur: algılanan kurulum komutunu (npm install, pip install -r requirements.txt, uv sync, cargo fetch, go mod download) ÇALIŞTIR panelinde başlatır; action=baslat: çalıştırma komutunu başlatır — bağımlılıklar eksikse önce kurar (npm install && npm run dev, python app.py vb.); localhost adresi yakalanınca ÇALIŞTIR panelinde canlı önizlemede açılır; action=durdur: repodaki çalışan süreci durdurur. Kur/Başlat/Dev turu KİLİTLEMEZ, çıktı panelde canlı akar. repo alanı boşsa panelde son kullanılan repo kullanılır.',
       parameters: {
         type: 'object',
         properties: {

package/src/main.js

@@ -272,8 +272,15 @@ try {
 try { nodemailer = require('nodemailer'); } catch {}
 
 const APP_DIR = path.join(app.getPath('appData'), 'beast');
-/* Windows toast bildirimleri için AppUserModelID erken ayarlanmalı */
-try { app.setAppUserModelId('com.quantumalgo.beastagent'); } catch {}
+/* Windows toast bildirimleri için AppUserModelID erken ayarlanmalı. ANCAK özel
+   AUMID, Windows'ta kayıtlı kısayol yoksa taskbar ikonunu electron.exe logosuna
+   düşürür. Bu yüzden yalnız paketli kurulumda ya da npm modunda masaüstü
+   kısayolu (aynı AUMID ile oluşturulur) mevcutsa atanır. */
+try {
+  let aumidOk = app.isPackaged;
+  if (!aumidOk) aumidOk = fs.existsSync(path.join(app.getPath('desktop'), 'Beast Agent.lnk'));
+  if (aumidOk) app.setAppUserModelId('com.quantumalgo.beastagent');
+} catch {}
 /* mem0-native embedding modeli whisper ile AYNI cache'i kullanır (src/agent/mem0.js okur) */
 process.env.BEAST_MODELS_DIR = path.join(APP_DIR, 'models');
 
@@ -3603,6 +3610,7 @@ function ensureDesktopShortcut() {
       description: 'Beast Agent — hızlı, hafif ve becerikli',
       icon: path.join(__dirname, '..', 'assets', 'app.ico'),
       iconIndex: 0,
+      appUserModelId: 'com.quantumalgo.beastagent',
     });
     log.info('main', ok ? 'Masaüstü kısayolu oluşturuldu (npm modu)' : 'Masaüstü kısayolu oluşturulamadı');
   } catch (e) {
@@ -11152,6 +11160,7 @@ ipcMain.handle('sandbox:remove', async (_e, payload) => {
     delete sbCfg[folder];
     sbSaveCfg();
   }
+  try { fs.rmSync(path.join(beastDir(), 'sandbox-installed', path.basename(folder)), { force: true }); } catch {}
   return { ok: true };
 });
 
@@ -11211,7 +11220,7 @@ ipcMain.handle('sandbox:tree', (_e, payload) => {
 });
 
 /* Sandbox ÇALIŞTIRICI v2: repo başına YÖNETİLEN SÜREÇLER.
-   Kur/Başlat/Durdur butonları artık deterministik: proje tipi algılanır
+   Başlat/Dev/Durdur butonları artık deterministik: proje tipi algılanır
    (package.json, requirements.txt, pyproject.toml, Cargo.toml, go.mod,
    index.html) ve doğru komut DOĞRUDAN çalıştırılır. Her repo kendi süreç
    yuvasında koşar — birden çok repo aynı anda çalışabilir; çıktı tamponlanır,
@@ -11253,6 +11262,25 @@ function sbPythonCmd() {
   return 'python';
 }
 
+/* statik site üreticileri: hugo / jekyll / mkdocs — doküman repoları sık böyle;
+   Başlat/Dev butonları bunları da tanısın (ör. docs/ altında hugo.yaml) */
+function sbSiteGenInfo(folder) {
+  for (const d of ['', 'docs', 'site', 'website']) {
+    const base = d ? path.join(folder, d) : folder;
+    const has = (f) => { try { return fs.existsSync(path.join(base, f)); } catch { return false; } };
+    if (has('hugo.toml') || has('hugo.yaml') || has('hugo.json') || (has('config.toml') && (has('content') || has('themes')))) {
+      return { kind: 'static', label: 'hugo', install: '', run: 'hugo server' + (d ? ' -s ' + d : '') };
+    }
+    if (has('_config.yml') && (has('Gemfile') || has('Gemfile.lock'))) {
+      return { kind: 'ruby', label: 'jekyll', install: 'bundle install', run: 'bundle exec jekyll serve' + (d ? ' -s ' + d : '') };
+    }
+    if (has('mkdocs.yml') || has('mkdocs.yaml')) {
+      return { kind: 'python', label: 'mkdocs', install: sbPythonCmd() + ' -m pip install mkdocs', run: sbPythonCmd() + ' -m mkdocs serve' };
+    }
+  }
+  return null;
+}
+
 /* repo köküne bakıp proje tipini + kur/çalıştır komutlarını çıkarır */
 function sbProjectInfo(folder) {
   const out = { kind: 'unknown', label: 'bilinmiyor', name: path.basename(folder), install: '', run: '', dev: '', build: '' };
@@ -11275,6 +11303,21 @@ function sbProjectInfo(folder) {
       out.build = s.build ? pm + ' run build' : '';
       return out;
     }
+    /* statik site üreticisi (hugo/jekyll/mkdocs) python paketinden ÖNCE gelir:
+       docs/ altındaki hugo.yaml, kökteki requirements.txt'i gölgeleyebilsin */
+    const site = sbSiteGenInfo(folder);
+    if (site) {
+      out.kind = site.kind;
+      out.label = site.label;
+      if (site.install) out.install = site.install;
+      if (site.run) { out.run = site.run; out.dev = site.run; }
+      if (!out.install) {
+        const py = sbPythonCmd();
+        if (fs.existsSync(path.join(folder, 'requirements.txt'))) out.install = py + ' -m pip install -r requirements.txt';
+        else if (fs.existsSync(path.join(folder, 'pyproject.toml'))) out.install = py + ' -m pip install -e .';
+      }
+      return out;
+    }
     const hasPy = ['pyproject.toml', 'requirements.txt', 'setup.py'].some((f) => fs.existsSync(path.join(folder, f)));
     if (hasPy) {
       const py = sbPythonCmd();
@@ -11350,7 +11393,7 @@ function sbSlotPush(slot, folder, text) {
   sbRunEmit(folder, text, slot.kind);
 }
 
-function sbRunStartManaged(folder, cmd, kind) {
+function sbRunStartManaged(folder, cmd, kind, opts) {
   folder = String(folder || '');
   cmd = String(cmd || '').trim();
   kind = kind === 'install' ? 'install' : 'run';
@@ -11365,7 +11408,7 @@ function sbRunStartManaged(folder, cmd, kind) {
       windowsHide: true,
       env: { ...process.env, FORCE_COLOR: '0', NO_COLOR: '1' },
     });
-    const slot = { proc, kind, cmd, url: '', lines: [], startedAt: Date.now() };
+    const slot = { proc, kind, cmd, url: '', lines: [], startedAt: Date.now(), installCmd: (opts && opts.installCmd) || '' };
     sbProcs.set(folder, slot);
     const onLine = (buf) => {
       for (const piece of String(buf).split(/\r?\n/)) {
@@ -11387,9 +11430,20 @@ function sbRunStartManaged(folder, cmd, kind) {
     proc.on('close', (code) => {
       sbSlotPush(slot, folder, '[süreç bitti' + (code != null ? ' — kod ' + code : '') + ']');
       slot.proc = null;
+      /* başarılı kurulum damgalanır: sonraki Başlat/Dev kurulumu tekrarlamaz */
+      if (code === 0 && (slot.kind === 'install' || slot.installCmd)) sbMarkInstalled(folder);
+      /* hızlı çöküş (10 sn içinde sıfırdan farklı çıkış): renderer bunu ajan
+         devralması için işaret sayar — yanlış algılanan komut ajanla düzeltilir */
+      const quickFail = code != null && Number(code) !== 0 && Date.now() - slot.startedAt < 10000;
       try {
         if (win && !win.isDestroyed()) {
-          win.webContents.send('agent:event', { type: 'sb-run-end', folder, code: code == null ? null : Number(code) });
+          win.webContents.send('agent:event', {
+            type: 'sb-run-end',
+            folder,
+            code: code == null ? null : Number(code),
+            kind: slot.kind,
+            quickFail,
+          });
         }
       } catch {}
     });
@@ -11446,7 +11500,35 @@ function sbInstallRepo(folder) {
 
 ipcMain.handle('sandbox:install', async (_e, payload) => sbInstallRepo(String((payload && payload.folder) || '')));
 
-/* Başlat/Dev: algılanan/kayıtlı çalıştırma komutunu başlatır (panel + ajan ortak) */
+/* bağımlılıklar eksik mi? — Başlat/Dev gerekirse ÖNCE kurar; kurulum bir kez
+   yapıldıktan sonra damga dosyasıyla (node_modules var / %APPDATA% damgası)
+   tekrarlanmaz */
+function sbInstallNeeded(folder, info) {
+  try {
+    if (!info.install) return false;
+    if (info.kind === 'node') {
+      const nm = path.join(folder, 'node_modules');
+      return !fs.existsSync(nm) || !fs.readdirSync(nm).length;
+    }
+    if (info.label === 'jekyll') return !fs.existsSync(path.join(folder, 'Gemfile.lock'));
+    if (info.kind === 'python' || info.label === 'mkdocs') {
+      if (fs.existsSync(path.join(folder, '.venv'))) return false;
+      return !fs.existsSync(path.join(beastDir(), 'sandbox-installed', path.basename(folder)));
+    }
+  } catch {}
+  return false;
+}
+
+function sbMarkInstalled(folder) {
+  try {
+    const dir = path.join(beastDir(), 'sandbox-installed');
+    fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(path.join(dir, path.basename(folder)), new Date().toISOString());
+  } catch {}
+}
+
+/* Başlat/Dev: algılanan çalıştırma komutunu başlatır; bağımlılıklar eksikse
+   önce kurulum komutunu zincirler (npm install && npm run dev gibi) */
 function sbStartRepo(folder, mode) {
   folder = String(folder || '');
   mode = String(mode || 'run') === 'dev' ? 'dev' : 'run';
@@ -11454,8 +11536,10 @@ function sbStartRepo(folder, mode) {
   const info = sbProjectInfoMerged(folder);
   const cmd = mode === 'dev' ? info.dev || info.run : info.run || info.dev;
   if (!cmd) return { ok: false, error: 'Bu repo için çalıştırma komutu algılanamadı — özel komutu kutuya yazıp ▶ ile çalıştır' };
-  const r = sbRunStartManaged(folder, cmd, 'run');
-  if (r.ok) r.cmd = cmd;
+  const pre = sbInstallNeeded(folder, info) ? info.install : '';
+  const full = pre ? pre + ' && ' + cmd : cmd;
+  const r = sbRunStartManaged(folder, full, 'run', pre ? { installCmd: pre } : null);
+  if (r.ok) r.cmd = full;
   return r;
 }
 
@@ -11524,6 +11608,98 @@ ipcMain.handle('sandbox:openurl', async (_e, url) => {
   }
 });
 
+/* ---------- SANDBOX PANEL İÇİ CANLI ÖNİZLEME (native WebContentsView) ----------
+   ÇALIŞTIR bölümünde, çıktı günlüğünün yerine repo'nun çalışan hâlini gösterir.
+   Tarayıcı dock'undan bağımsızdır: renderer host alanının DOM dikdörtgenini
+   gönderir, view tam o alana oturur. Yalnız localhost adresleri yüklenir. */
+const sbPreview = { view: null, attached: false, visible: false, url: '', bounds: null };
+
+function ensureSbPreview() {
+  if (sbPreview.view) return sbPreview.view;
+  const view = new WebContentsView({
+    webPreferences: {
+      partition: 'persist:sandbox-preview',
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+      spellcheck: false,
+      backgroundThrottling: false,
+    },
+  });
+  view.setBackgroundColor(settings.theme === 'dark' ? '#0d0d0f' : '#ffffff');
+  const wc = view.webContents;
+  try {
+    const chromeUA = `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${process.versions.chrome} Safari/537.36`;
+    wc.setUserAgent(chromeUA);
+  } catch {}
+  wc.setWindowOpenHandler(({ url }) => {
+    if (/^https?:\/\//i.test(url)) wc.loadURL(url).catch(() => {});
+    return { action: 'deny' };
+  });
+  wc.on('render-process-gone', () => {
+    if (win && !win.isDestroyed() && sbPreview.view) {
+      try { win.contentView.removeChildView(sbPreview.view); } catch {}
+    }
+    sbPreview.view = null;
+    sbPreview.attached = false;
+    sbPreview.visible = false;
+  });
+  sbPreview.view = view;
+  return view;
+}
+
+function sbPreviewDetach() {
+  if (sbPreview.view && win && !win.isDestroyed()) {
+    try { sbPreview.view.setVisible(false); } catch {}
+    try { win.contentView.removeChildView(sbPreview.view); } catch {}
+  }
+  sbPreview.attached = false;
+  sbPreview.visible = false;
+}
+
+function sbPreviewSet(payload) {
+  if (!win || win.isDestroyed()) return { ok: false, error: 'pencere yok' };
+  const p = payload || {};
+  if (p.bounds && typeof p.bounds === 'object') {
+    sbPreview.bounds = {
+      x: Math.max(0, Math.round(Number(p.bounds.x) || 0)),
+      y: Math.max(0, Math.round(Number(p.bounds.y) || 0)),
+      width: Math.max(0, Math.round(Number(p.bounds.width) || 0)),
+      height: Math.max(0, Math.round(Number(p.bounds.height) || 0)),
+    };
+  }
+  if (p.url) {
+    const u = String(p.url);
+    if (/^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d{2,5})?(?:[/?#]|$)/i.test(u)) sbPreview.url = u;
+  }
+  const b = sbPreview.bounds;
+  const want = p.visible !== false && !!sbPreview.url && !!b && b.width > 0 && b.height > 0;
+  if (!want) {
+    if (sbPreview.view) {
+      try { sbPreview.view.setVisible(false); } catch {}
+    }
+    sbPreview.visible = false;
+    return { ok: true, visible: false };
+  }
+  const view = ensureSbPreview();
+  if (sbPreview.url) {
+    let cur = '';
+    try { cur = view.webContents.getURL(); } catch {}
+    if (cur !== sbPreview.url) view.webContents.loadURL(sbPreview.url).catch(() => {});
+  }
+  if (!sbPreview.attached) {
+    try { win.contentView.addChildView(view); sbPreview.attached = true; } catch {}
+  }
+  try {
+    view.setBounds({ x: b.x, y: b.y, width: b.width, height: b.height });
+    view.setVisible(true);
+    sbPreview.visible = true;
+  } catch {}
+  return { ok: true, visible: true, url: sbPreview.url };
+}
+
+ipcMain.handle('sbpreview:set', async (_e, payload) => sbPreviewSet(payload || {}));
+
 /* Sağ tık menüsü: HTML dosyasını dahili tarayıcıda GÖRÜNÜR aç */
 /* ---------- BC DAHİLİ STATİK SUNUCU ----------
    Beast Code çıktısı ASLA file:// ile açılmaz: ES modülleri, fetch, ServiceWorker

package/src/preload.js

@@ -192,6 +192,7 @@ contextBridge.exposeInMainWorld('beast', {
   sandboxProcState: (payload) => ipcRenderer.invoke('sandbox:procstate', payload),
   sandboxCfgSet: (payload) => ipcRenderer.invoke('sandbox:cfg:set', payload),
   sandboxOpenUrl: (url) => ipcRenderer.invoke('sandbox:openurl', url),
+  sbPreviewSet: (payload) => ipcRenderer.invoke('sbpreview:set', payload),
   waStart: () => ipcRenderer.invoke('wa:start'),
   waStop: () => ipcRenderer.invoke('wa:stop'),
   waReset: () => ipcRenderer.invoke('wa:reset'),

package/src/renderer/index.html

@@ -419,20 +419,24 @@
             <div id="sbStatus" hidden></div>
             <div id="sbInputRow">
               <textarea id="sbInput" rows="1" spellcheck="false" autocomplete="off" placeholder="Sandbox mesajı — ajan bu repo klasöründe çalışır…"></textarea>
+              <button id="sbSend" title="Gönder (Enter)"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
               <button id="sbStop" title="Çalışan mesajı durdur" hidden data-i18n-title="bc_stop"><svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" stroke="none"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></button>
             </div>
           </section>
 
+          <div id="sbSplit" title="Sürükleyerek boyutlandır"></div>
+
           <section id="sbRun">
             <div id="sbRunHead">
               <span id="sbRunTitle">ÇALIŞTIR</span>
               <span id="sbRunKind"></span>
               <span id="sbRunCwd" title="">—</span>
+              <span class="file-spacer"></span>
+              <button id="sbRunView" class="on" title="Görsel önizleme açık — çıktıya dön">Görsel</button>
             </div>
             <div id="sbRunBtns">
-              <button id="sbRunInstall" title="Kur — algılanan paket yöneticisiyle bağımlılıkları yükle (npm/pip/cargo/go)"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Kur</button>
-              <button id="sbRunStart" title="Başlat — algılanan komutla çalıştır (sunucu adresi sağdaki tarayıcıda açılır)"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="none" style="vertical-align:-2px;margin-right:3px"><polygon points="6 3 20 12 6 21 6 3"/></svg>Başlat</button>
-              <button id="sbRunDev" title="Geliştirme modunda başlat (npm run dev, vite, expo…)"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>Dev</button>
+              <button id="sbRunStart" title="Başlat — gerekirse bağımlılıkları kurar, sonra çalıştırır (adres panelde canlı önizlemede açılır)"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="none" style="vertical-align:-2px;margin-right:3px"><polygon points="6 3 20 12 6 21 6 3"/></svg>Başlat</button>
+              <button id="sbRunDev" title="Geliştirme modunda başlat (gerekirse önce kurar)"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>Dev</button>
               <button id="sbRunStop" title="Süreci durdur" hidden><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="none" style="vertical-align:-2px;margin-right:3px"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>Durdur</button>
             </div>
             <div id="sbRunCustom">
@@ -440,6 +444,7 @@
               <button id="sbRunGo" title="Çalıştır"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg></button>
               <button id="sbRunSave" title="Yazılan komutu bu reponun başlatma komutu olarak kaydet"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></button>
             </div>
+            <div id="sbPreviewHost" hidden><div id="sbPreviewHint">🌐 canlı önizleme — Başlat/Dev ile sunucu açılınca burada görünür</div></div>
             <div id="sbRunOut"></div>
             <div id="sbRunFoot">
               <button id="sbRunOpen" title="Önizlemeyi sağdaki dahili tarayıcıda aç" disabled><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg><span id="sbRunOpenLabel">Tarayıcıda aç</span></button>

package/src/renderer/renderer.js

@@ -135,9 +135,12 @@ const els = {
   sbStatus: $('#sbStatus'),
   sbInput: $('#sbInput'),
   sbStop: $('#sbStop'),
+  sbSend: $('#sbSend'),
+  sbSplit: $('#sbSplit'),
+  sbRun: $('#sbRun'),
   sbRunCwd: $('#sbRunCwd'),
+  sbRunView: $('#sbRunView'),
   sbRunKind: $('#sbRunKind'),
-  sbRunInstall: $('#sbRunInstall'),
   sbRunStart: $('#sbRunStart'),
   sbRunDev: $('#sbRunDev'),
   sbRunStop: $('#sbRunStop'),
@@ -6000,6 +6003,7 @@ function onEvent(ev) {
       /* IDE modunda tarayıcı açılır/kapanır/genişlik değişirse row yeniden bölünür —
          editör + Beast Code ORTAK kırpılıp ORTAK açılır (kullanıcı payı korunur) */
       if (ideModeOn()) ideSplitApplyFrac();
+      if (sbModeOn()) sbSplitApplyFrac();
       if (shown) {
         els.browserBtn.classList.add('on');
         if (ev.url && document.activeElement !== els.bbUrl) {
@@ -11967,6 +11971,10 @@ const sbTreeState = { cache: new Map(), open: new Set(['']), path: '' };
 let sbRunUrl = '';
 let sbRunRunning = false;
 let sbRunInfo = null;
+let sbAutoAssist = null; /* butonla başlatılan süreç hızlı çökerse: 'install' | 'run' */
+let sbPreviewOn = true; /* ÇALIŞTIR içi görsel önizleme tercihi */
+let sbPreviewShown = false;
+let sbPreviewSuspend = false; /* ayırıcı sürüklenirken native view gizli tutulur */
 
 function sbModeOn() {
   return document.body.classList.contains('sandbox-mode');
@@ -12168,6 +12176,7 @@ async function sbSelectCurrent() {
       sbRunLine('ℹ ' + (det.info.label || 'proje') + ' · kur: ' + (det.info.install || '—') + ' · çalıştır: ' + (det.info.run || '—'), 't-dim');
     }
   }
+  sbPreviewApply();
   /* sol konsol: seçilen reponun klasörü — oturum açıldıktan sonra da garanti tazele */
   sbTreeState.cache.clear();
   if (sbModeOn()) renderFileTree().catch(() => {});
@@ -12183,7 +12192,8 @@ function sbInputResize() {
 
 function sbRunCurrent() {
   const msg = els.sbInput.value.trim();
-  if (!msg || !sbFolder || sbCloning) return;
+  if (!msg || sbCloning) return;
+  if (!sbFolder) { toast('Önce repo indir ya da seç'); return; }
   els.sbInput.value = '';
   sbInputResize();
   sbLine('t-cmd', 'sen> ' + msg);
@@ -12254,6 +12264,7 @@ function setSandboxMode(on) {
   if (on && financeModeOn()) { setFinanceMode(false); }
   document.body.classList.toggle('sandbox-mode', !!on);
   if (els.sbBtn) els.sbBtn.classList.toggle('on', !!on);
+  sbPreviewApply();
   /* marka + sol konsol başlığı: moduna göre BEAST Agent/Code/Studio/Sandbox */
   const brandSub = document.querySelector('#brand .brand-sub');
   if (brandSub) brandSub.textContent = on ? 'Sandbox' : 'Agent';
@@ -12261,6 +12272,7 @@ function setSandboxMode(on) {
   if (ftp && on) ftp.textContent = 'REPO DOSYALARI';
   if (on) {
     loadSandboxList();
+    sbSplitRestore();
     sbTreeState.cache.clear();
     renderFileTree().catch(() => {});
   } else if (!ideModeOn() && !studioModeOn()) {
@@ -12272,17 +12284,20 @@ function setSandboxMode(on) {
 
 /* ---------- ÇALIŞTIRICI v2: butonlar DETERMİNİSTİK ----------
    Proje tipi algılanır (package.json/requirements.txt/pyproject/Cargo.toml/
-   go.mod/index.html) ve Kur/Başlat/Dev butonları algılanan komutu DOĞRUDAN
-   çalıştırır; süreç panelde canlı akar, repo başına ayrı yuvada koşar. */
+   go.mod/hugo/jekyll/mkdocs/index.html); Başlat/Dev gerekirse bağımlılıkları
+   ÖNCE kurar (npm install && npm run dev gibi), süreç panelde canlı akar. */
 async function sbRunLaunch(mode) {
   if (!sbFolder) { toast('Önce repo indir ya da seç'); return; }
   if (sbRunRunning) { toast('Bu repoda süreç çalışıyor — önce ■ Durdur'); return; }
-  const call = mode === 'install'
-    ? beast.sandboxInstall({ folder: sbFolder })
-    : beast.sandboxStart({ folder: sbFolder, mode: mode === 'dev' ? 'dev' : 'run' });
-  const r = await call.catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
+  sbAutoAssist = mode;
+  const r = await beast.sandboxStart({ folder: sbFolder, mode: mode === 'dev' ? 'dev' : 'run' })
+    .catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
   if (!r || !r.ok) {
-    sbRunLine('[hata] ' + ((r && r.error) || 'başlatılamadı'), 't-err');
+    sbAutoAssist = null;
+    const err = (r && r.error) || 'başlatılamadı';
+    sbRunLine('[hata] ' + err, 't-err');
+    /* algılama komut bulamadıysa ajan devralır: repo yapısından doğru komutu bulur */
+    if (/algılanamadı/.test(err)) sbAskAgent(mode);
     return;
   }
   sbRunRunning = true;
@@ -12332,24 +12347,97 @@ function sbRunIngest(ev) {
     if (els.sbRunOpen) els.sbRunOpen.disabled = !sbRunUrl;
     if (els.sbRunUrl) els.sbRunUrl.textContent = sbRunUrl;
     sbBadge(folder || sbFolder, true);
-    /* sağdaki dahili tarayıcıda otomatik açılır — sandbox modundayken */
-    if (sbModeOn() && sbRunUrl) beast.sandboxOpenUrl(sbRunUrl).catch(() => {});
+    /* ÇALIŞTIR panelinde canlı önizleme otomatik açılır */
+    sbPreviewApply();
     return;
   }
   if (ev.type === 'sb-run-end') {
     sbRunRunning = false;
     if (els.sbRunStop) els.sbRunStop.hidden = true;
     sbBadge(folder || sbFolder, false);
+    const assist = sbAutoAssist;
+    sbAutoAssist = null;
+    if (ev.quickFail && assist) {
+      const kind = ev.kind === 'install' ? 'install' : 'run';
+      sbRunLine('[hata] komut başarısız bitti — ajan doğru komutu arıyor…', 't-err');
+      sbAskAgent(kind);
+    }
+  }
+}
+
+/* ---------- ÇALIŞTIR içi CANLI ÖNİZLEME: DOM dikdörtgenini main'e bildir ---------- */
+function sbPreviewLayout() {
+  if (!sbPreviewShown || sbPreviewSuspend) return;
+  const host = document.getElementById('sbPreviewHost');
+  if (!host) return;
+  const r = host.getBoundingClientRect();
+  if (!r.width || !r.height) return;
+  beast.sbPreviewSet({
+    url: sbRunUrl,
+    visible: true,
+    bounds: { x: r.left, y: r.top, width: r.width, height: r.height },
+  }).catch(() => {});
+}
+
+function sbPreviewApply() {
+  const show = sbPreviewOn && sbModeOn() && !!sbFolder && !!sbRunUrl && !sbPreviewSuspend;
+  sbPreviewShown = show;
+  const host = document.getElementById('sbPreviewHost');
+  if (host) host.hidden = !show;
+  if (els.sbRunOut) els.sbRunOut.hidden = show;
+  if (show) {
+    sbPreviewLayout();
+    /* görünür olunca yerleşim oturana kadar birkaç kez tazele */
+    setTimeout(sbPreviewLayout, 50);
+    setTimeout(sbPreviewLayout, 250);
+  } else {
+    beast.sbPreviewSet({ visible: false }).catch(() => {});
+  }
+}
+
+function sbPreviewToggle() {
+  sbPreviewOn = !sbPreviewOn;
+  if (els.sbRunView) {
+    els.sbRunView.classList.toggle('on', sbPreviewOn);
+    els.sbRunView.textContent = sbPreviewOn ? 'Görsel' : 'Çıktı';
+    els.sbRunView.title = sbPreviewOn ? 'Görsel önizleme açık — çıktıya dön' : 'Çıktı görünümü — görsele dön';
   }
+  sbPreviewApply();
+}
+
+/* Başlat/Dev başarısız olunca ajanı devreye sokar: repo yapısına göre
+   DOĞRU komutu bulup panel_run ile başlatmasını ister (otomatik devralma). */
+function sbAskAgent(kind) {
+  if (!sbFolder) return;
+  const repoName = (sbItems.find((x) => x.folder === sbFolder) || {}).name || 'repo';
+  const msg = kind === 'install'
+    ? `Kur butonu bu repoda başarısız oldu. ${repoName} reposunun dosyalarını incele (README, requirements.txt, package.json, pyproject.toml, Gemfile, mkdocs/hugo ayarları, alt klasörler) ve DOĞRU kurulum komutunu bulup panel_run ile ÇALIŞTIR panelinde çalıştır. Sonucu tek cümleyle bildir.`
+    : `Başlat/Dev butonu bu repoda başarısız oldu. ${repoName} reposunun yapısını incele (README, package.json scripts, hugo/mkdocs/jekyll ayarları, main/app.py, Cargo.toml, go.mod…) ve GERÇEK çalıştırma komutunu bulup panel_run ile ÇALIŞTIR panelinde başlat. Web adresi çıkarsa kullanıcıya bildir.`;
+  sbLine('t-sys', '⚙ ajan devrede — doğru komutu bulup başlatacak…');
+  sbSetBusy(true);
+  beast.sandboxSend({ folder: sbFolder, msg }).then((r) => {
+    if (r && r.ok) {
+      if (r.sessionId) sbSessionId = r.sessionId;
+      if (r.queued) sbLine('t-dim', '⏳ kuyrukta (' + r.count + ') — iş bitince gönderilir');
+    } else {
+      sbSetBusy(false);
+      sbLine('t-err', (r && r.error) || 'gönderilemedi');
+    }
+  }).catch((e) => {
+    sbSetBusy(false);
+    sbLine('t-err', String((e && e.message) || e));
+  });
 }
 
 function sbRunExec(cmd) {
   if (!sbFolder) { toast('Önce repo indir ya da seç'); return; }
   if (sbRunRunning) { toast('Zaten çalışıyor — önce ■ ile durdur'); return; }
   sbRunRunning = true;
+  sbAutoAssist = 'run';
   if (els.sbRunStop) els.sbRunStop.hidden = false;
   beast.sandboxRun({ folder: sbFolder, cmd }).then((r) => {
     if (!r || !r.ok) {
+      sbAutoAssist = null;
       sbRunRunning = false;
       if (els.sbRunStop) els.sbRunStop.hidden = true;
       sbRunLine('[hata] ' + ((r && r.error) || 'çalıştırılamadı'), 't-err');
@@ -12357,6 +12445,7 @@ function sbRunExec(cmd) {
       sbBadge(sbFolder, true);
     }
   }).catch((e) => {
+    sbAutoAssist = null;
     sbRunRunning = false;
     if (els.sbRunStop) els.sbRunStop.hidden = true;
     sbRunLine('[hata] ' + String((e && e.message) || e), 't-err');
@@ -12412,6 +12501,10 @@ if (els.sbInput) {
     }
   });
 }
+if (els.sbSend) els.sbSend.addEventListener('click', () => {
+  sbRunCurrent();
+  if (els.sbInput) els.sbInput.focus();
+});
 if (els.sbStop) {
   els.sbStop.addEventListener('click', () => {
     beast.sandboxStop({ folder: sbFolder }).then((r) => {
@@ -12422,8 +12515,7 @@ if (els.sbStop) {
     }).catch(() => {});
   });
 }
-/* ÇALIŞTIRICI butonları: algılanan komutu doğrudan çalıştırır */
-if (els.sbRunInstall) els.sbRunInstall.addEventListener('click', () => sbRunLaunch('install'));
+/* ÇALIŞTIRICI butonları: Başlat/Dev algılanan komutu (gerekirse kurup) çalıştırır */
 if (els.sbRunStart) els.sbRunStart.addEventListener('click', () => sbRunLaunch('run'));
 if (els.sbRunDev) els.sbRunDev.addEventListener('click', () => sbRunLaunch('dev'));
 if (els.sbRunGo) els.sbRunGo.addEventListener('click', () => {
@@ -12475,3 +12567,75 @@ if (els.sbRunOpen) {
     if (!r || !r.ok) toast('Açılamadı: ' + ((r && r.error) || 'bilinmeyen hata'));
   });
 }
+if (els.sbRunView) els.sbRunView.addEventListener('click', sbPreviewToggle);
+
+/* görsel önizleme boyutu her yerleşim değişiminde main'e bildirilir
+   (ayırıcı, tarayıcı dock'u, pencere boyutu, mod geçişi) */
+if (window.ResizeObserver) {
+  const host = document.getElementById('sbPreviewHost');
+  if (host) new ResizeObserver(() => sbPreviewLayout()).observe(host);
+}
+
+/* ---------- sohbet/çalıştır ayırıcı (Beast Code ideSplit ile aynı desen) ----------
+   Orantılı model: kaydedilen değer sohbet panelinin sandboxRow içindeki PAYI (0-1);
+   sürükle-bırak anında --sbSplit yazar, bırakınca localStorage'a kaydeder. */
+let sbSplitFrac = 0;
+
+function sbSplitApplyFrac() {
+  const rowW = els.sandboxRow && els.sandboxRow.clientWidth ? els.sandboxRow.clientWidth : window.innerWidth - 250;
+  /* kayıt yoksa eski varsayılan görünüm korunur: sohbet 480px, çalıştır kalanı */
+  if (!sbSplitFrac) {
+    const w = Math.max(280, Math.min(rowW - 480, Math.max(320, rowW - 300)));
+    document.body.style.setProperty('--sbSplit', Math.round(w) + 'px');
+    return;
+  }
+  sbSplitFrac = Math.max(0.2, Math.min(sbSplitFrac, 0.8));
+  const w = Math.max(280, Math.min(Math.round(rowW * sbSplitFrac), Math.max(320, rowW - 300)));
+  document.body.style.setProperty('--sbSplit', w + 'px');
+}
+
+function sbSplitSave() {
+  try { localStorage.setItem('beast.sbSplit', String(sbSplitFrac)); } catch {}
+}
+
+function sbSplitRestore() {
+  let saved = 0;
+  try { saved = parseFloat(localStorage.getItem('beast.sbSplit')) || 0; } catch {}
+  sbSplitFrac = saved > 0.05 && saved < 0.95 ? saved : 0;
+  sbSplitApplyFrac();
+}
+
+if (els.sbSplit) {
+  els.sbSplit.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    els.sbSplit.classList.add('dragging');
+    /* native önizleme view'i fare olaylarını yutabilir — sürükleme boyunca gizle,
+       bırakınca geri getir (IDE'deki ayırıcı da aynı nedenle DOM üstünde çizilir) */
+    sbPreviewSuspend = true;
+    if (sbPreviewShown) beast.sbPreviewSet({ visible: false }).catch(() => {});
+    const rightEdge = els.sbRun ? els.sbRun.getBoundingClientRect().right : window.innerWidth;
+    const rowW = Math.max(600, els.sandboxRow && els.sandboxRow.clientWidth ? els.sandboxRow.clientWidth : window.innerWidth - 250);
+    const move = (ev) => {
+      const w = Math.max(280, Math.min(rightEdge - ev.clientX, rowW - 300));
+      sbSplitFrac = Math.max(0.2, Math.min(w / rowW, 0.8));
+      document.body.style.setProperty('--sbSplit', Math.round(w) + 'px');
+      sbPreviewLayout();
+    };
+    const up = () => {
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+      els.sbSplit.classList.remove('dragging');
+      sbSplitSave();
+      sbPreviewSuspend = false;
+      sbPreviewApply();
+    };
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  });
+  window.addEventListener('resize', () => {
+    if (sbModeOn()) {
+      sbSplitApplyFrac();
+      sbPreviewLayout();
+    }
+  });
+}

package/src/renderer/style.css

@@ -4271,7 +4271,7 @@ body.sandbox-mode #sandboxRow { display: flex; flex-direction: row; }
   flex-direction: column;
   min-height: 0;
   min-width: 300px;
-  flex: 0 0 var(--sbSplit, 480px);
+  flex: 1 1 auto;
   background: var(--bg);
   overflow: hidden;
 }
@@ -4280,10 +4280,20 @@ body.sandbox-mode #sandboxRow { display: flex; flex-direction: row; }
   flex-direction: column;
   min-height: 0;
   min-width: 240px;
-  flex: 1;
+  flex: 0 0 var(--sbSplit, 480px);
   background: var(--bg);
   overflow: hidden;
-  border-left: 1px solid var(--border);
+}
+#sbSplit {
+  flex: none;
+  width: 6px;
+  cursor: col-resize;
+  background: var(--border);
+  opacity: 0.55;
+  transition: opacity 0.15s;
+}
+#sbSplit:hover {
+  opacity: 1;
 }
 
 #sbHead {
@@ -4394,9 +4404,31 @@ body.sandbox-mode #sandboxRow { display: flex; flex-direction: row; }
   padding: 7px 9px;
   border-radius: 8px;
   font-family: inherit;
+  overflow-y: hidden;
+  max-height: 140px;
+  line-height: 1.45;
+  display: block;
 }
 #sbInput:focus { border-color: var(--accent); outline: none; }
 #sbInput.expand { overflow-y: auto; }
+#sbInputRow button {
+  flex: none;
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 7px;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 6px 9px;
+  line-height: 1;
+  margin-bottom: 1px;
+}
+#sbInputRow button:hover { border-color: var(--accent); }
+#sbSend { color: var(--accent); }
+#sbSend:hover { background: var(--accent-dim); }
+#sbStop { color: var(--err); }
+#sbStop[hidden] { display: none; }
+#sbStop:hover { border-color: var(--err); }
 
 /* ---------- ÇALIŞTIR bölmesi ---------- */
 #sbRunHead {
@@ -4430,6 +4462,33 @@ body.sandbox-mode #sandboxRow { display: flex; flex-direction: row; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+#sbRunHead button {
+  flex: none;
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  font-size: 11px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+#sbRunHead button:hover { color: var(--text); border-color: var(--accent); }
+#sbRunHead button.on { color: var(--accent); border-color: var(--accent); }
+#sbPreviewHost {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+}
+#sbPreviewHost[hidden] { display: none; }
+#sbPreviewHint {
+  color: var(--muted);
+  font-size: 12px;
+  padding: 0 16px;
+  text-align: center;
+}
 #sbRunBtns {
   flex: none;
   display: flex;