beast-agent 1.4.2 → 1.5.1

package/src/renderer/style.css

@@ -348,6 +348,9 @@ body.rail-hidden #rail { display: none; }
 }
 #bbUrl:focus { border-color: var(--accent); }
 #bbClose:hover { color: var(--err); }
+/* telefon modu: aktif buton vurgulu + dar dockta mobil çerçeve hissi */
+#bbPhone.on { color: var(--accent); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--accent); }
+body.phone-mode #bbPhone { color: var(--accent); }
 
 /* sürükle-boyutlandır tutamacı (görünmez) */
 #bbResize {
@@ -1153,6 +1156,59 @@ body.term-open #settingsOverlay { right: var(--tw, 520px); }
 #micBtn.rec { color: #e5484d; animation: mic-pulse 1.2s ease-in-out infinite; }
 @keyframes mic-pulse { 50% { opacity: .45; } }
 
+/* Beast Code girişi: + ve mikrofon (chat composer ile aynı stil) */
+#bcAttach, #bcMic {
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+  background: none;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+#bcAttach:hover, #bcMic:hover { background: var(--panel); color: var(--accent); }
+#bcAttach, #bcMic { margin-bottom: 5px; }
+#bcMic.rec { color: #e5484d; animation: mic-pulse 1.2s ease-in-out infinite; }
+#bcChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 0 10px 6px;
+}
+#bcChips[hidden] { display: none; }
+#bcChips .chip { font-size: 11.5px; padding: 2px 9px; }
+
+/* sohbette dosya/resim ekleri: içerik AÇILMADAN kompakt kart */
+.att-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 7px;
+}
+.att-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--panel2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 11.5px;
+  color: var(--text);
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.msg-user .att-chip { background: var(--bg); }
+.att-chip.att-img { border-style: dashed; }
+
 #input {
   flex: 1;
   background: none;
@@ -1313,8 +1369,8 @@ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480p
 }
 
 #setTabs {
-  width: 190px;
-  min-width: 190px;
+  width: 210px;
+  min-width: 210px;
   background: var(--panel);
   border-right: 1px solid var(--border);
   display: flex;
@@ -1404,6 +1460,15 @@ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480p
   font-size: 13px;
 }
 #setClose:hover { color: var(--err); border-color: var(--err); background: rgba(19, 19, 21, 0.05); }
+/* kapat butonunun altında küçük + ortalı sürüm etiketi */
+.set-version {
+  margin-top: 8px;
+  text-align: center;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  opacity: 0.55;
+  user-select: text;
+}
 
 #setContent { flex: 1; overflow-y: auto; padding: 22px 26px; }
 .pane {
@@ -1430,8 +1495,14 @@ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480p
   margin-bottom: 8px;
   cursor: pointer;
   background: var(--panel);
+  /* button elementleri body'den renk miras almaz — dark modda siyah kalmasın */
+  color: var(--text);
+  font-family: inherit;
 }
 .prov-row:hover { border-color: var(--accent); }
+/* dil kartları: aktif seçim vurgusu */
+.lang-row.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
+.lang-row.active:hover { border-color: var(--accent); }
 .prov-row.active { border-color: var(--accent); background: var(--accent-dim); }
 .prov-name { font-weight: 700; font-size: 13px; }
 .prov-model { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }
@@ -2161,6 +2232,7 @@ body.browser-open #botOverlay { right: var(--bw, 480px); }
   border-right: 1px solid var(--border);
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 /* IDE modunda sol taraf: sohbet geçmişi yerine klasör sistemi */
 body.ide-mode #newChat,
@@ -2235,7 +2307,6 @@ body.ide-mode #bcPanel { display: flex; }
   border-top: 1px solid var(--border);
   background: var(--panel);
 }
-#bcPrompt { color: var(--accent); font-family: Consolas, monospace; font-size: 12px; font-weight: 700; flex: none; padding-bottom: 7px; }
 /* otomatik büyüyen chat input'u: satır sonunda alt satıra iner, alan açılır;
    tavanı (140px ≈ 6 satır) aşarsa kendi içinde scroll'a döner */
 #bcInput {
@@ -2461,6 +2532,73 @@ body.ide-mode #bcPanel { display: flex; }
   text-overflow: ellipsis;
 }
 #fileTree { flex: 1; overflow-y: auto; padding: 6px 4px; }
+/* görev listesi + geri alma paneli (dosya paneli başlığından açılır) */
+#tasksPanel {
+  position: absolute;
+  top: 62px;
+  left: 8px;
+  right: 8px;
+  max-height: 62%;
+  overflow-y: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
+  z-index: 45;
+  padding: 4px;
+}
+#tasksPanel[hidden] { display: none; }
+#fileTasks.on { color: var(--accent); }
+.tsk-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 7px 7px;
+  font-size: 10.5px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: var(--muted);
+}
+.tsk-head button {
+  margin-left: auto;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 10.5px;
+  padding: 2px 8px;
+  cursor: pointer;
+  letter-spacing: 0;
+}
+.tsk-head button:hover { color: var(--text); border-color: var(--accent); }
+.tsk-head button[disabled] { opacity: 0.35; cursor: default; }
+.tsk-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 7px;
+  border-radius: 7px;
+  font-size: 12px;
+}
+.tsk-row:hover { background: var(--panel2); }
+.tsk-id { flex: none; font-family: Consolas, monospace; font-size: 11px; color: var(--accent); font-weight: 700; }
+.tsk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tsk-st { flex: none; font-size: 11px; color: var(--muted); }
+.tsk-st.done { color: #16a34a; }
+.tsk-st.active { color: var(--accent); }
+.tsk-undo {
+  flex: none;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  padding: 2px 7px;
+  cursor: pointer;
+}
+.tsk-undo:hover { color: var(--err); border-color: var(--err); }
+.tsk-undo[disabled] { opacity: 0.35; cursor: default; }
+.tsk-empty { padding: 8px 10px; font-size: 12px; color: var(--muted); }
 .file-row {
   display: flex;
   align-items: center;
@@ -2591,7 +2729,90 @@ body.ide-mode.editor-hidden #ideRow #bcPanel { flex: 1 1 auto; min-width: 0; }
   line-height: 1.4;
 }
 #codeSave:hover { color: var(--accent); border-color: var(--accent); background: var(--panel2); }
-#codeBody { flex: 1; display: flex; min-height: 0; }
+#codeDiffBtn {
+  flex: none;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11.5px;
+  padding: 4px 10px;
+  line-height: 1.4;
+}
+#codeDiffBtn:hover { color: var(--accent); border-color: var(--accent); background: var(--panel2); }
+#codeBody { flex: 1; display: flex; min-height: 0; position: relative; }
+/* canlı diff katmanı: textarea'nın ARKASINDA satır satır yeşil/kırmızı boya —
+   metin birebir aynı yazıldığı için satırlar birebir üst üste gelir */
+#codeLayer {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 57px; right: 0;
+  margin: 0;
+  padding: 12px 14px;
+  font-family: Consolas, "Cascadia Mono", monospace;
+  font-size: 12.5px;
+  line-height: 20px;
+  white-space: pre;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+  color: transparent;
+  user-select: none;
+}
+#codeLayer .row { display: block; min-height: 20px; }
+#codeLayer .row.add {
+  background: rgba(34, 197, 94, 0.18);
+  box-shadow: inset 3px 0 0 #22c55e;
+}
+#codeLayer .row.mod {
+  background: rgba(239, 68, 68, 0.12);
+  box-shadow: inset 3px 0 0 #ef4444;
+}
+#codeLayer .row.find {
+  background: rgba(250, 204, 21, 0.22);
+  box-shadow: inset 3px 0 0 #eab308;
+}
+/* kod içi arama widget'ı (Shift+F) — editörün sağ üstünde yüzer */
+#codeFind {
+  position: absolute;
+  top: 6px;
+  right: 14px;
+  z-index: 7;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+}
+#codeFind[hidden] { display: none; }
+#codeFindInp {
+  width: 170px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 6px;
+  font-size: 12px;
+  padding: 3px 7px;
+  outline: none;
+  font-family: Consolas, "Cascadia Mono", monospace;
+}
+#codeFindInp:focus { border-color: var(--accent); }
+#codeFindCount { font-size: 11px; color: var(--muted); min-width: 40px; text-align: center; }
+#codeFind button {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 5px;
+  border-radius: 5px;
+  line-height: 1;
+}
+#codeFind button:hover { background: var(--panel2); color: var(--text); }
 #codeGutter {
   flex: none;
   width: 56px;
@@ -2631,7 +2852,7 @@ body.ide-mode.editor-hidden #ideRow #bcPanel { flex: 1 1 auto; min-width: 0; }
   resize: none;
   border: none;
   outline: none;
-  background: var(--bg);
+  background: transparent;
   color: var(--text);
   padding: 12px 14px;
   font-family: Consolas, "Cascadia Mono", monospace;
@@ -2639,7 +2860,57 @@ body.ide-mode.editor-hidden #ideRow #bcPanel { flex: 1 1 auto; min-width: 0; }
   line-height: 20px;
   white-space: pre;
   overflow: auto;
+  position: relative;
+  z-index: 1;
+}
+/* okunur diff görünümü: ajan değiştirdiğinde / Diff butonunda açılır —
+   silinen satırlar KIRMIZI, eklenenler YEŞİL (chat diffView gibi, metinle birlikte) */
+#codeDiffView {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+#codeDiffView[hidden] { display: none; }
+#codeDiffBar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+  font-size: 11.5px;
+  color: var(--muted);
 }
+#codeDiffBar button {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+#codeDiffBar button:hover { color: var(--text); border-color: var(--accent); }
+#codeDiffStats .plus { color: #16a34a; font-weight: 700; }
+#codeDiffStats .minus { color: #dc2626; font-weight: 700; }
+#codeDiffRows {
+  flex: 1;
+  overflow: auto;
+  font-family: Consolas, "Cascadia Mono", monospace;
+  font-size: 12.5px;
+  line-height: 20px;
+  padding: 6px 0;
+}
+#codeDiffRows .dr { display: flex; white-space: pre; padding: 0 10px; min-height: 20px; }
+#codeDiffRows .dr .sign { flex: none; width: 16px; text-align: center; user-select: none; opacity: 0.75; }
+#codeDiffRows .dr .num { flex: none; width: 38px; text-align: right; padding-right: 8px; color: var(--muted); opacity: 0.7; user-select: none; }
+#codeDiffRows .dr .tx { white-space: pre; }
+#codeDiffRows .dr.del { background: rgba(239, 68, 68, 0.16); box-shadow: inset 3px 0 0 #ef4444; }
+#codeDiffRows .dr.add { background: rgba(34, 197, 94, 0.18); box-shadow: inset 3px 0 0 #22c55e; }
 /* dikey scrollbar hep görünür, tutulabilir ve imleç değişsin */
 #codeTa::-webkit-scrollbar {
   width: 12px;
@@ -3094,19 +3365,19 @@ body.browser-open #ghOverlay { right: var(--bw, 480px); }
   text-align: center;
 }
 
-/* Beast Code durum balonu: dusunuyor… / arac adlari — inputun ustunde */
-#bcStatus {
-  flex: none;
-  align-self: flex-start;
-  margin: 0 12px 6px;
-  padding: 4px 10px;
-  font-size: 11px;
-  color: var(--muted);
-  background: var(--panel2);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  max-width: calc(100% - 24px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Beast Code durum balonu: dusunuyor… / arac adlari — inputun ustunde ORTALI (chat statusPill gibi) */
+#bcStatus {
+  flex: none;
+  align-self: center;
+  margin: 0 12px 6px;
+  padding: 3px 10px;
+  font-size: 11px;
+  color: var(--accent);
+  background: var(--accent-dim);
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }