beast-agent 2.42.0 → 2.43.0

package/package.json

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

package/src/renderer/i18n.js

@@ -594,6 +594,7 @@
       tipIde: 'IDE Modu — dosyalar + chat + preview',
       tipStudio: 'Beast Studio — video yapma/düzenleme modu',
       tipSandbox: 'Beast Sandbox — GitHub reposu indir & içinde çalış',
+      tipMcp: 'Beast MCP — dış araç sunucuları (Model Context Protocol)',
       tipCodeHide: 'Editörü kapat',
       tipCodeShow: 'Editörü göster',
       ide_files: 'DOSYALAR',
@@ -1387,6 +1388,7 @@
       tipIde: 'IDE Mode — files + chat + preview',
       tipStudio: 'Beast Studio — video making/editing mode',
       tipSandbox: 'Beast Sandbox — download a GitHub repo & work inside it',
+      tipMcp: 'Beast MCP — external tool servers (Model Context Protocol)',
       tipCodeHide: 'Hide editor',
       tipCodeShow: 'Show editor',
       ide_files: 'FILES',

package/src/renderer/index.html

@@ -103,6 +103,7 @@
         <button id="studioBtn" class="dd-btn dd-icon-btn" title="Beast Studio — video yapma/düzenleme" data-i18n-title="tipStudio"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="13" height="12" rx="2"/><path d="M15 10l7-4v12l-7-4"/></svg></button>
         <button id="finBtn" class="dd-btn dd-icon-btn" title="Beast Finance — MT5 trade paneli (bilgisayardaki MetaTrader 5 ile çalışır)"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-5 3 3 5-7"/></svg></button>
         <button id="sbBtn" class="dd-btn dd-icon-btn" title="Beast Sandbox — GitHub reposu indir &amp; içinde çalış" data-i18n-title="tipSandbox"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></button>
+        <button id="mcpBtn" class="dd-btn dd-icon-btn" title="Beast MCP — dış araç sunucuları (Model Context Protocol)" data-i18n-title="tipMcp"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><line x1="7" y1="7.5" x2="7.01" y2="7.5"/><line x1="7" y1="16.5" x2="7.01" y2="16.5"/></svg></button>
         <button id="railBtn" class="dd-btn dd-icon-btn" title="Paralel Ajan Konsolu" data-i18n-title="tipRail">&#x25A4;</button>
         <button id="dmBtn" class="dd-btn dd-icon-btn" title="Ajan DM — ajanlar arası konuşma" data-i18n-title="tipAgentDm">&#x2709;&#xFE0E;</button>
         <button id="watchBtn" class="dd-btn dd-icon-btn" title="İzleyiciler (Watchers)" data-i18n-title="tipWatch">&#x25CE;</button>
@@ -452,6 +453,37 @@
             </div>
           </section>
         </div>
+
+        <div id="mcpRow">
+          <section id="mcpPanel">
+            <div id="mcpHead">
+              <span id="mcpTitle">BEAST MCP</span>
+              <span class="file-spacer"></span>
+              <button id="mcpReload" title="Durumu yenile">&#x27F3;&#xFE0E;</button>
+            </div>
+            <div id="mcpList"></div>
+            <div id="mcpFoot">
+              <button id="mcpAddBtn" title="mcp.json'a örnek bir server bloğu ekler">＋ Yeni Server</button>
+            </div>
+          </section>
+          <section id="mcpDetail">
+            <div id="mcpDetailHead">
+              <span id="mcpDetailTitle">Detay</span>
+              <span id="mcpDetailState" class="mcp-badge"></span>
+            </div>
+            <div id="mcpDetailBody"></div>
+            <div id="mcpJsonWrap">
+              <div id="mcpJsonHead">
+                <span>mcp.json</span>
+                <span id="mcpJsonPath" title=""></span>
+                <span class="file-spacer"></span>
+                <span id="mcpMsg"></span>
+                <button id="mcpSave">Kaydet</button>
+              </div>
+              <textarea id="mcpJson" spellcheck="false"></textarea>
+            </div>
+          </section>
+        </div>
       </main>
 
     <aside id="rail">

package/src/renderer/renderer.js

@@ -150,6 +150,18 @@ const els = {
   sbRunOut: $('#sbRunOut'),
   sbRunOpen: $('#sbRunOpen'),
   sbRunUrl: $('#sbRunUrl'),
+  mcpBtn: $('#mcpBtn'),
+  mcpRow: $('#mcpRow'),
+  mcpList: $('#mcpList'),
+  mcpReload: $('#mcpReload'),
+  mcpAddBtn: $('#mcpAddBtn'),
+  mcpDetailTitle: $('#mcpDetailTitle'),
+  mcpDetailState: $('#mcpDetailState'),
+  mcpDetailBody: $('#mcpDetailBody'),
+  mcpJson: $('#mcpJson'),
+  mcpJsonPath: $('#mcpJsonPath'),
+  mcpSave: $('#mcpSave'),
+  mcpMsg: $('#mcpMsg'),
   stPanel: $('#stPanel'),
   stTitle: $('#stTitle'),
   stCwd: $('#stCwd'),
@@ -8358,6 +8370,7 @@ async function setIdeMode(on) {
   if (on && studioModeOn()) await setStudioMode(false); /* Studio açıkken IDE'ye geçiş — Studio kapanır */
   if (on && sbModeOn()) setSandboxMode(false); /* Sandbox açıkken IDE'ye geçiş — Sandbox kapanır */
   if (on && financeModeOn()) setFinanceMode(false); /* Finance açıkken IDE'ye geçiş — Finance kapanır */
+  if (on && mcpModeOn()) setMcpMode(false); /* MCP açıkken IDE'ye geçiş — MCP kapanır */
   document.body.classList.toggle('ide-mode', !!on);
   if (els.ideBtn) els.ideBtn.classList.toggle('on', !!on);
   /* soldaki marka: chat modunda BEAST Agent, IDE modunda BEAST Code, Studio modunda BEAST Studio */
@@ -8433,6 +8446,7 @@ async function setStudioMode(on) {
   if (on && ideModeOn()) await setIdeMode(false); /* IDE açıkken Studio'ya geçiş — IDE kapanır */
   if (on && sbModeOn()) setSandboxMode(false); /* Sandbox açıkken Studio'ya geçiş — Sandbox kapanır */
   if (on && financeModeOn()) setFinanceMode(false); /* Finance açıkken Studio'ya geçiş — Finance kapanır */
+  if (on && mcpModeOn()) setMcpMode(false); /* MCP açıkken Studio'ya geçiş — MCP kapanır */
   document.body.classList.toggle('studio-mode', !!on);
   if (els.studioBtn) els.studioBtn.classList.toggle('on', !!on);
   /* ALT TERMINAL: yalnız Beast Code'a özgü — Studio'ya geçişte kapanır */
@@ -9729,6 +9743,7 @@ async function setFinanceMode(on) {
   if (on && ideModeOn()) await setIdeMode(false);
   if (on && studioModeOn()) await setStudioMode(false);
   if (on && sbModeOn()) setSandboxMode(false);
+  if (on && mcpModeOn()) setMcpMode(false); /* MCP açıkken Finance'a geçiş — MCP kapanır */
   document.body.classList.toggle('finance-mode', !!on);
   if (els.finBtn) els.finBtn.classList.toggle('on', !!on);
   const brandSub = document.querySelector('#brand .brand-sub');
@@ -12262,6 +12277,7 @@ function setSandboxMode(on) {
   if (on && ideModeOn()) { setIdeMode(false); }
   if (on && studioModeOn()) { setStudioMode(false); }
   if (on && financeModeOn()) { setFinanceMode(false); }
+  if (on && mcpModeOn()) setMcpMode(false); /* MCP açıkken Sandbox'a geçiş — MCP kapanır */
   document.body.classList.toggle('sandbox-mode', !!on);
   if (els.sbBtn) els.sbBtn.classList.toggle('on', !!on);
   sbPreviewApply();
@@ -12282,6 +12298,160 @@ function setSandboxMode(on) {
   }
 }
 
+/* ================= BEAST MCP MODU =================
+   Model Context Protocol sunucuları: tek panelde durum, araç listesi,
+   aç/kapat, yeniden bağlan ve mcp.json düzenleme. Ana sohbeti bozmaz —
+   diğer modlar gibi body.mcp-mode ile ayrı satır. */
+function mcpModeOn() {
+  return document.body.classList.contains('mcp-mode');
+}
+
+const MCP_STATE_TR = { up: 'BAĞLI', starting: 'BAĞLANIYOR', down: 'HATA', idle: 'BEKLEMEDE', disabled: 'KAPALI' };
+let mcpSel = '';
+let mcpTimer = null;
+
+async function setMcpMode(on) {
+  if (on && ideModeOn()) await setIdeMode(false);
+  if (on && studioModeOn()) await setStudioMode(false);
+  if (on && sbModeOn()) setSandboxMode(false);
+  if (on && financeModeOn()) setFinanceMode(false);
+  document.body.classList.toggle('mcp-mode', !!on);
+  if (els.mcpBtn) els.mcpBtn.classList.toggle('on', !!on);
+  const brandSub = document.querySelector('#brand .brand-sub');
+  if (brandSub) brandSub.textContent = on ? 'MCP' : 'Agent';
+  if (on) {
+    await renderMcpPanel();
+    if (!mcpTimer) {
+      mcpTimer = setInterval(() => { if (mcpModeOn()) renderMcpPanel(); }, 5000);
+    }
+  } else if (mcpTimer) {
+    clearInterval(mcpTimer);
+    mcpTimer = null;
+  }
+}
+
+async function renderMcpPanel() {
+  if (!els.mcpList || !mcpModeOn()) return;
+  const st = await beast.mcpStatus().catch(() => ({ path: '', servers: [] }));
+  const cfg = await beast.mcpConfigGet().catch(() => ({ path: '', raw: '' }));
+  const servers = st.servers || [];
+  if (!servers.length) {
+    els.mcpList.innerHTML = '<div class="file-empty">Henüz MCP server yok — aşağıdaki mcp.json\'a ekle ya da “Yeni Server”e bas.</div>';
+  } else {
+    if (!servers.some((s) => s.name === mcpSel)) mcpSel = servers[0].name;
+    els.mcpList.innerHTML = servers.map((s) => {
+      const badge = MCP_STATE_TR[s.state] || s.state;
+      return '<div class="mcp-card' + (s.name === mcpSel ? ' sel' : '') + '" data-n="' + escapeHtml(s.name) + '">' +
+        '<div class="mc-top"><span class="mc-name">' + escapeHtml(s.name) + '</span>' +
+        '<span class="mcp-badge ' + escapeHtml(s.state) + '">' + escapeHtml(badge) + '</span>' +
+        '<span class="file-spacer"></span>' +
+        (s.enabled && s.toolCount ? '<span class="mcp-badge">' + s.toolCount + ' araç</span>' : '') + '</div>' +
+        '<div class="mc-cmd">' + escapeHtml((s.command || '') + ' ' + (s.args || []).join(' ')) + '</div>' +
+        (s.lastError && s.state === 'down' ? '<div class="mc-err">' + escapeHtml(String(s.lastError).slice(0, 140)) + '</div>' : '') +
+        '<div class="mc-actions">' +
+        '<button class="mcp-tgl" data-n="' + escapeHtml(s.name) + '">' + (s.enabled ? '⏸ Durdur' : '▶ Başlat') + '</button>' +
+        '<button class="mcp-ref" data-n="' + escapeHtml(s.name) + '">⟳ Yenile</button>' +
+        '</div></div>';
+    }).join('');
+  }
+  renderMcpDetail(servers.find((s) => s.name === mcpSel) || null);
+  if (els.mcpJson && document.activeElement !== els.mcpJson) {
+    els.mcpJson.value = cfg.raw || JSON.stringify({ servers: {} }, null, 2);
+  }
+  if (els.mcpJsonPath) {
+    els.mcpJsonPath.textContent = cfg.path || '';
+    els.mcpJsonPath.title = cfg.path || '';
+  }
+
+  els.mcpList.querySelectorAll('.mcp-card').forEach((c) => c.addEventListener('click', (ev) => {
+    if (ev.target.closest('button')) return;
+    mcpSel = c.dataset.n;
+    renderMcpPanel();
+  }));
+  els.mcpList.querySelectorAll('.mcp-ref').forEach((b) => b.addEventListener('click', async () => {
+    b.disabled = true;
+    mcpSel = b.dataset.n;
+    await beast.mcpRefresh(b.dataset.n).catch(() => {});
+    renderMcpPanel();
+  }));
+  els.mcpList.querySelectorAll('.mcp-tgl').forEach((b) => b.addEventListener('click', async () => {
+    b.disabled = true;
+    try {
+      const obj = JSON.parse(els.mcpJson.value || '{}');
+      const name = b.dataset.n;
+      if (obj.servers && obj.servers[name]) {
+        obj.servers[name].enabled = obj.servers[name].enabled === false;
+        await beast.mcpConfigSet(JSON.stringify(obj)).catch(() => {});
+        mcpSel = name;
+      }
+    } catch (e) {
+      toast('JSON hatası: ' + String((e && e.message) || e));
+    }
+    renderMcpPanel();
+  }));
+}
+
+function renderMcpDetail(s) {
+  if (els.mcpDetailTitle) els.mcpDetailTitle.textContent = s ? s.name : 'Detay';
+  if (els.mcpDetailState) {
+    els.mcpDetailState.className = 'mcp-badge' + (s ? ' ' + s.state : '');
+    els.mcpDetailState.textContent = s ? (MCP_STATE_TR[s.state] || s.state) : '';
+  }
+  if (!els.mcpDetailBody) return;
+  if (!s) {
+    els.mcpDetailBody.innerHTML = '<div class="file-empty">Soldan bir server seç.</div>';
+    return;
+  }
+  const rows = [
+    ['Komut', (s.command || '') + ' ' + (s.args || []).join(' ')],
+    ['Durum', (MCP_STATE_TR[s.state] || s.state) + (s.enabled ? '' : ' (kapalı)')],
+    ['Araç', s.enabled ? String(s.toolCount || 0) + ' araç' : '—'],
+    s.timeoutMs ? ['Zaman aşımı', s.timeoutMs + ' ms'] : null,
+    s.tools && s.tools.length ? ['İzinli liste', s.tools.join(', ')] : null,
+  ].filter(Boolean);
+  let html = rows.map(([k, v]) =>
+    '<div class="mcp-drow"><span class="mcp-dk">' + escapeHtml(k) + '</span><span>' + escapeHtml(String(v)) + '</span></div>'
+  ).join('');
+  if (s.lastError && s.state === 'down') {
+    html += '<div class="mcp-drow"><span class="mcp-dk">Hata</span><span style="color:var(--err)">' + escapeHtml(s.lastError) + '</span></div>';
+  }
+  if (s.toolNames && s.toolNames.length) {
+    html += '<div class="mcp-dk" style="margin-top:10px">Araçlar</div><div class="mcp-tools">' +
+      s.toolNames.map((t) => '<span class="mcp-tool">' + escapeHtml(t) + '</span>').join('') + '</div>';
+  } else if (s.enabled) {
+    html += '<div class="file-empty">Araç listesi için ⟳ Yenile (server ilk kullanımda bağlanır).</div>';
+  }
+  els.mcpDetailBody.innerHTML = html;
+}
+
+if (els.mcpBtn) els.mcpBtn.addEventListener('click', () => setMcpMode(!mcpModeOn()));
+if (els.mcpReload) els.mcpReload.addEventListener('click', () => renderMcpPanel());
+if (els.mcpSave) els.mcpSave.addEventListener('click', async () => {
+  const r = await beast.mcpConfigSet(els.mcpJson.value || '').catch(() => ({ ok: false, error: 'IPC' }));
+  if (els.mcpMsg) {
+    els.mcpMsg.textContent = r && r.ok ? 'Kaydedildi' : ('Hata: ' + ((r && r.error) || '?'));
+    els.mcpMsg.style.color = r && r.ok ? '' : 'var(--err)';
+  }
+  if (r && r.ok) renderMcpPanel();
+});
+if (els.mcpAddBtn) els.mcpAddBtn.addEventListener('click', () => {
+  if (!els.mcpJson) return;
+  try {
+    const obj = JSON.parse(els.mcpJson.value || '{}') || {};
+    obj.servers = obj.servers || {};
+    let i = 1;
+    let name = 'yeni-server';
+    while (obj.servers[name]) name = 'yeni-server' + (++i);
+    obj.servers[name] = { command: 'npx', args: ['-y', '@modelcontextprotocol/server-filesystem', 'C:/'], enabled: false };
+    els.mcpJson.value = JSON.stringify(obj, null, 2);
+    els.mcpJson.focus();
+    if (els.mcpMsg) {
+      els.mcpMsg.textContent = 'örnek eklendi — komutu düzenleyip Kaydet';
+      els.mcpMsg.style.color = '';
+    }
+  } catch {}
+});
+
 /* ---------- ÇALIŞTIRICI v2: butonlar DETERMİNİSTİK ----------
    Proje tipi algılanır (package.json/requirements.txt/pyproject/Cargo.toml/
    go.mod/hugo/jekyll/mkdocs/index.html); Başlat/Dev gerekirse bağımlılıkları

package/src/renderer/style.css

@@ -4489,6 +4489,206 @@ body.sandbox-mode #sandboxRow { display: flex; flex-direction: row; }
   padding: 0 16px;
   text-align: center;
 }
+
+/* ---------- MCP MODU ---------- */
+body.mcp-mode #chatScroll,
+body.mcp-mode #composerWrap,
+body.mcp-mode #ideRow,
+body.mcp-mode #studioRow,
+body.mcp-mode #sandboxRow { display: none; }
+
+#mcpRow { display: none; flex: 1; min-height: 0; }
+body.mcp-mode #mcpRow { display: flex; flex-direction: row; }
+
+#mcpPanel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 280px;
+  flex: 0 0 380px;
+  background: var(--bg);
+  overflow: hidden;
+}
+#mcpDetail {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  background: var(--bg);
+  border-left: 1px solid var(--border);
+}
+#mcpHead {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+#mcpTitle { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--accent); flex: none; }
+#mcpHead button {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 7px;
+  border-radius: 6px;
+}
+#mcpHead button:hover { background: var(--panel2); color: var(--text); }
+#mcpList {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px;
+}
+#mcpFoot {
+  flex: none;
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+#mcpFoot button {
+  width: 100%;
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 7px;
+  cursor: pointer;
+}
+#mcpFoot button:hover { border-color: var(--accent); }
+
+.mcp-card {
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  padding: 9px 10px;
+  margin-bottom: 8px;
+  background: var(--panel);
+  cursor: pointer;
+}
+.mcp-card:hover { border-color: var(--accent); }
+.mcp-card.sel { border-color: var(--accent); background: var(--panel2); }
+.mcp-card .mc-top { display: flex; align-items: center; gap: 7px; }
+.mcp-card .mc-name { font-weight: 700; font-size: 13px; }
+.mcp-card .mc-cmd {
+  font-family: Consolas, monospace;
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mcp-card .mc-err {
+  color: var(--err);
+  font-size: 11px;
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mcp-card .mc-actions { display: flex; gap: 6px; margin-top: 7px; }
+.mcp-card .mc-actions button {
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 11px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.mcp-card .mc-actions button:hover { border-color: var(--accent); }
+
+.mcp-badge {
+  flex: none;
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  text-transform: uppercase;
+}
+.mcp-badge.up { color: #22c55e; border-color: #22c55e; }
+.mcp-badge.down { color: var(--err); border-color: var(--err); }
+.mcp-badge.starting { color: var(--accent); border-color: var(--accent); }
+
+#mcpDetailHead {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+#mcpDetailTitle { font-weight: 700; font-size: 13px; }
+#mcpDetailState { margin-left: auto; }
+#mcpDetailBody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
+.mcp-drow { display: flex; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
+.mcp-dk { color: var(--muted); min-width: 76px; flex: none; }
+.mcp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.mcp-tool {
+  font-family: Consolas, monospace;
+  font-size: 11px;
+  border: 1px solid var(--border);
+  background: var(--panel2);
+  padding: 2px 7px;
+  border-radius: 6px;
+}
+#mcpJsonWrap {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  max-height: 40%;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+#mcpJsonHead {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  font-size: 11px;
+  color: var(--muted);
+}
+#mcpJsonPath {
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: Consolas, monospace;
+}
+#mcpSave {
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  color: var(--accent);
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+#mcpSave:hover { border-color: var(--accent); }
+#mcpJson {
+  flex: 1;
+  min-height: 110px;
+  resize: none;
+  background: var(--bg);
+  border: none;
+  border-top: 1px solid var(--border);
+  color: var(--text);
+  font-family: Consolas, monospace;
+  font-size: 12px;
+  padding: 8px 12px;
+  outline: none;
+  white-space: pre;
+}
 #sbRunBtns {
   flex: none;
   display: flex;