beast-agent 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -145,7 +145,7 @@ body {
145
145
  display: flex;
146
146
  align-items: center;
147
147
  justify-content: center;
148
- }
148
+ }
149
149
  .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
150
150
  .sess-code {
151
151
  color: var(--muted);
@@ -920,6 +920,79 @@ body.term-open #settingsOverlay { right: var(--tw, 520px); }
920
920
  }
921
921
  .tool-body.open { display: block; }
922
922
  .tool-body.short { white-space: pre-wrap; }
923
+ .tool-body.diff-body { padding: 0; max-height: 480px; overflow: auto; white-space: normal; }
924
+
925
+ /* ---------- opencode diff görünümü (BİREBİR port) ----------
926
+ edit/write sonuçları: SOLDa kırmızı (eski/silinen) — SAĞDA yeşil (yeni/
927
+ eklenen). Dar alanda birleşik görünüm. Renkler opencode TUI temasının
928
+ diffAdded/diffRemoved tint mantığından alınmıştır. */
929
+ .diffbox {
930
+ border-top: 1px solid var(--border);
931
+ font-family: Consolas, monospace;
932
+ font-size: 11.5px;
933
+ }
934
+ .diff-head {
935
+ display: flex;
936
+ align-items: center;
937
+ gap: 8px;
938
+ padding: 6px 12px;
939
+ background: var(--panel2);
940
+ border-bottom: 1px solid var(--border);
941
+ color: var(--muted);
942
+ position: sticky;
943
+ top: 0;
944
+ z-index: 2;
945
+ }
946
+ .diff-file {
947
+ flex: 1;
948
+ white-space: nowrap;
949
+ overflow: hidden;
950
+ text-overflow: ellipsis;
951
+ direction: rtl; /* uzun yolda dosya ADI görünsün */
952
+ text-align: left;
953
+ }
954
+ .diff-badge { display: inline-flex; gap: 6px; font-weight: 700; font-size: 11px; flex-shrink: 0; }
955
+ .diff-badge-add { color: #4ade80; }
956
+ .diff-badge-del { color: #f87171; }
957
+ .tool-head .diff-badge { margin-left: auto; margin-right: 4px; }
958
+ .diff { overflow: auto; }
959
+ .diff-split { display: flex; align-items: flex-start; }
960
+ .diff-side { flex: 1 1 0; min-width: 0; overflow-x: auto; }
961
+ .diff-side.old { border-right: 1px solid var(--border); }
962
+ .diff-line {
963
+ display: flex;
964
+ white-space: pre;
965
+ line-height: 1.45;
966
+ min-height: 1.45em;
967
+ }
968
+ .diff-num {
969
+ flex: 0 0 3.2em;
970
+ text-align: right;
971
+ padding-right: 8px;
972
+ color: var(--muted);
973
+ opacity: 0.55;
974
+ user-select: none;
975
+ }
976
+ .diff-code { flex: 1; padding-right: 10px; }
977
+ /* kırmızı: silinen/eski (sol) — yeşil: eklenen/yeni (sağ) */
978
+ .diff-line.del { background: rgba(239, 68, 68, 0.13); }
979
+ .diff-line.del .diff-code { color: #fca5a5; }
980
+ .diff-line.del .diff-num { color: #f87171; opacity: 0.8; }
981
+ .diff-line.add { background: rgba(34, 197, 94, 0.12); }
982
+ .diff-line.add .diff-code { color: #86efac; }
983
+ .diff-line.add .diff-num { color: #4ade80; opacity: 0.8; }
984
+ .diff-line.ctx .diff-code { color: var(--muted); }
985
+ .diff-line.space { background: rgba(128, 128, 128, 0.06); }
986
+ .diff-more {
987
+ padding: 6px 12px;
988
+ color: var(--muted);
989
+ font-style: italic;
990
+ border-top: 1px dashed var(--border);
991
+ width: 100%;
992
+ }
993
+ /* Beast Code paneli içinde diff gövdesi */
994
+ .bc-toolout.bc-diffview { white-space: normal; padding: 0; max-height: 320px; overflow: auto; }
995
+ .bc-toolout.bc-diffview .diffbox { border-top: none; }
923
996
 
924
997
  /* status pill */
925
998
 
@@ -1669,10 +1742,35 @@ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480p
1669
1742
  letter-spacing: 1px;
1670
1743
  font-size: 13px;
1671
1744
  color: var(--text);
1672
- text-align: center;
1745
+
1746
+ display: flex;
1747
+ align-items: center;
1748
+ gap: 8px;
1749
+ padding: 12px 12px 10px 16px;
1750
+ font-weight: 800;
1751
+ letter-spacing: 1px;
1752
+ font-size: 13px;
1753
+ color: var(--text);
1754
+ }
1755
+ #railTitle { flex: 1; text-align: left; }
1756
+ #railClear {
1757
+ flex: none;
1758
+ display: inline-flex;
1759
+ align-items: center;
1760
+ justify-content: center;
1761
+ width: 24px;
1762
+ height: 24px;
1763
+ background: none;
1764
+ border: none;
1765
+ border-radius: 6px;
1766
+ cursor: pointer;
1767
+ color: #111;
1768
+ }
1769
+ #railClear:hover { background: rgba(0, 0, 0, 0.08); }
1770
+ #railClear svg { display: block; }
1673
1771
  }
1674
1772
 
1675
- #railList { flex: 1; overflow-y: auto; padding: 4px 8px; }
1773
+ #railList { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px; }
1676
1774
 
1677
1775
  .rail-empty {
1678
1776
  color: var(--muted);
@@ -1690,13 +1788,23 @@ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480p
1690
1788
  border-radius: 7px;
1691
1789
  cursor: pointer;
1692
1790
  color: var(--muted);
1791
+ min-width: 0;
1792
+ overflow: hidden;
1693
1793
  margin-bottom: 2px;
1694
1794
  }
1695
1795
  .rj:hover { background: var(--panel2); color: var(--text); }
1696
1796
  .rj.open { background: var(--panel2); color: var(--text); }
1697
1797
  .rj-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
1698
1798
  .rj .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
1699
- .rj-time { font-size: 10.5px; color: var(--muted); flex: none; }
1799
+ .rj-time {
1800
+ font-size: 10.5px;
1801
+ color: var(--muted);
1802
+ flex: 0 1 auto;
1803
+ min-width: 0;
1804
+ white-space: nowrap;
1805
+ overflow: hidden;
1806
+ text-overflow: ellipsis;
1807
+ }
1700
1808
  .rj.st-done .rj-time { color: #43c463; font-weight: 700; }
1701
1809
  .rj-cancel {
1702
1810
  visibility: hidden;
@@ -2030,8 +2138,8 @@ body.browser-open #botOverlay { right: var(--bw, 480px); }
2030
2138
  display: flex; gap: 10px; margin-top: 10px; padding-top: 10px;
2031
2139
  border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
2032
2140
  }
2033
-
2034
-
2141
+
2142
+
2035
2143
  /* ---------- IDE MODU ---------- */
2036
2144
 
2037
2145
  #filePanel {
@@ -2055,7 +2163,7 @@ body.ide-mode #filePanel {
2055
2163
  border-right: none;
2056
2164
  }
2057
2165
  /* IDE modunda sağdaki paralel ajan paneli kapalı */
2058
- body.ide-mode #rail { display: none; }
2166
+ /* IDE modunda paralel ajan paneli de acilabilir (railBtn) - railBtn basincda acik tarayici yerini birakir */
2059
2167
  /* IDE modunda ortadaki sohbet yerine Beast Code paneli */
2060
2168
  body.ide-mode #chatScroll,
2061
2169
  body.ide-mode #composerWrap { display: none; }
@@ -2533,49 +2641,49 @@ body.ide-mode #codePane { display: flex; }
2533
2641
  .ctx-item:hover { background: var(--panel2); }
2534
2642
  .ctx-item.danger { color: var(--err); }
2535
2643
 
2536
- /* ---------- SKILLS STORE ---------- */
2537
-
2538
- #storeOverlay {
2539
- position: fixed;
2540
- inset: 0;
2541
- background: rgba(36, 41, 47, 0.45);
2542
- display: flex;
2543
- align-items: center;
2544
- justify-content: center;
2545
- z-index: 56;
2546
- }
2547
- #storeOverlay[hidden] { display: none; }
2548
- body.browser-open #storeOverlay { right: var(--bw, 480px); }
2549
- #storeDialog {
2550
- width: 70vw;
2551
- height: 70vh;
2552
- background: var(--bg);
2553
- border: 1px solid var(--border);
2554
- border-radius: 14px;
2555
- display: flex;
2556
- flex-direction: column;
2557
- overflow: hidden;
2558
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
2559
- }
2560
- #storeHead {
2561
- display: flex;
2562
- align-items: center;
2563
- gap: 10px;
2564
- padding: 14px 18px;
2565
- border-bottom: 1px solid var(--border);
2566
- }
2567
- #storeTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
2568
- #storeBeastId {
2569
- font-family: var(--mono, monospace);
2570
- font-size: 11px;
2571
- color: var(--muted);
2572
- border: 1px solid var(--border);
2573
- border-radius: 6px;
2574
- padding: 2px 8px;
2575
- background: var(--panel2);
2576
- user-select: all;
2577
- }
2578
- .store-spacer { flex: 1; }
2644
+ /* ---------- SKILLS STORE ---------- */
2645
+
2646
+ #storeOverlay {
2647
+ position: fixed;
2648
+ inset: 0;
2649
+ background: rgba(36, 41, 47, 0.45);
2650
+ display: flex;
2651
+ align-items: center;
2652
+ justify-content: center;
2653
+ z-index: 56;
2654
+ }
2655
+ #storeOverlay[hidden] { display: none; }
2656
+ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2657
+ #storeDialog {
2658
+ width: 70vw;
2659
+ height: 70vh;
2660
+ background: var(--bg);
2661
+ border: 1px solid var(--border);
2662
+ border-radius: 14px;
2663
+ display: flex;
2664
+ flex-direction: column;
2665
+ overflow: hidden;
2666
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
2667
+ }
2668
+ #storeHead {
2669
+ display: flex;
2670
+ align-items: center;
2671
+ gap: 10px;
2672
+ padding: 14px 18px;
2673
+ border-bottom: 1px solid var(--border);
2674
+ }
2675
+ #storeTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
2676
+ #storeBeastId {
2677
+ font-family: var(--mono, monospace);
2678
+ font-size: 11px;
2679
+ color: var(--muted);
2680
+ border: 1px solid var(--border);
2681
+ border-radius: 6px;
2682
+ padding: 2px 8px;
2683
+ background: var(--panel2);
2684
+ user-select: all;
2685
+ }
2686
+ .store-spacer { flex: 1; }
2579
2687
  #storeTabs {
2580
2688
  display: flex;
2581
2689
  padding: 10px 18px 0;
@@ -2612,83 +2720,83 @@ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2612
2720
  gap: 10px;
2613
2721
  width: 100%;
2614
2722
  max-width: 980px;
2615
- }
2616
- .store-card {
2617
- border: 1px solid var(--border);
2618
- border-radius: 11px;
2619
- background: var(--panel);
2620
- padding: 12px 13px;
2621
- display: flex;
2622
- flex-direction: column;
2623
- gap: 7px;
2624
- }
2625
- .store-card-top { display: flex; align-items: center; gap: 9px; }
2626
- .store-avatar {
2627
- width: 34px; height: 34px; flex: none;
2628
- display: flex; align-items: center; justify-content: center;
2629
- font-size: 19px;
2630
- border-radius: 9px;
2631
- background: var(--panel2);
2632
- border: 1px solid var(--border);
2633
- }
2634
- .store-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2635
- .store-ver { font-size: 10.5px; color: var(--muted); }
2636
- .store-author { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; }
2637
- .store-author .sa-avatar { font-size: 13px; }
2638
- .store-author .sa-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2639
- .store-author .sa-beast { font-family: var(--mono, monospace); font-size: 10px; }
2640
- .store-desc {
2641
- font-size: 12px;
2642
- color: var(--muted);
2643
- line-height: 1.45;
2644
- min-height: 34px;
2645
- display: -webkit-box;
2646
- -webkit-line-clamp: 2;
2647
- -webkit-box-orient: vertical;
2648
- overflow: hidden;
2649
- }
2650
- .store-tags { display: flex; gap: 5px; flex-wrap: wrap; }
2651
- .store-tag {
2652
- font-size: 10px;
2653
- color: var(--muted);
2654
- border: 1px solid var(--border);
2655
- border-radius: 20px;
2656
- padding: 1px 8px;
2657
- background: var(--panel2);
2658
- }
2659
- .store-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
2660
- .store-stats { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
2661
- .store-like {
2662
- border: none; background: none; cursor: pointer;
2663
- color: var(--muted); font-size: 12.5px; padding: 2px 6px; border-radius: 6px;
2664
- }
2665
- .store-like:hover { background: var(--panel2); }
2666
- .store-like.liked { color: var(--err); }
2667
- .store-install {
2668
- margin-left: auto;
2669
- padding: 6px 14px;
2670
- border-radius: 8px;
2671
- border: 1px solid var(--accent);
2672
- background: var(--accent-dim);
2673
- color: var(--accent);
2674
- font-size: 12px;
2675
- font-weight: 700;
2676
- cursor: pointer;
2677
- }
2678
- .store-install:hover { filter: brightness(1.12); }
2679
- .store-install.done {
2680
- border-color: var(--border);
2681
- background: none;
2682
- color: var(--muted);
2683
- cursor: default;
2684
- font-weight: 400;
2685
- }
2686
- .store-empty {
2687
- color: var(--muted);
2688
- font-size: 12.5px;
2689
- text-align: center;
2690
- padding: 40px 0;
2691
- }
2723
+ }
2724
+ .store-card {
2725
+ border: 1px solid var(--border);
2726
+ border-radius: 11px;
2727
+ background: var(--panel);
2728
+ padding: 12px 13px;
2729
+ display: flex;
2730
+ flex-direction: column;
2731
+ gap: 7px;
2732
+ }
2733
+ .store-card-top { display: flex; align-items: center; gap: 9px; }
2734
+ .store-avatar {
2735
+ width: 34px; height: 34px; flex: none;
2736
+ display: flex; align-items: center; justify-content: center;
2737
+ font-size: 19px;
2738
+ border-radius: 9px;
2739
+ background: var(--panel2);
2740
+ border: 1px solid var(--border);
2741
+ }
2742
+ .store-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2743
+ .store-ver { font-size: 10.5px; color: var(--muted); }
2744
+ .store-author { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; }
2745
+ .store-author .sa-avatar { font-size: 13px; }
2746
+ .store-author .sa-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2747
+ .store-author .sa-beast { font-family: var(--mono, monospace); font-size: 10px; }
2748
+ .store-desc {
2749
+ font-size: 12px;
2750
+ color: var(--muted);
2751
+ line-height: 1.45;
2752
+ min-height: 34px;
2753
+ display: -webkit-box;
2754
+ -webkit-line-clamp: 2;
2755
+ -webkit-box-orient: vertical;
2756
+ overflow: hidden;
2757
+ }
2758
+ .store-tags { display: flex; gap: 5px; flex-wrap: wrap; }
2759
+ .store-tag {
2760
+ font-size: 10px;
2761
+ color: var(--muted);
2762
+ border: 1px solid var(--border);
2763
+ border-radius: 20px;
2764
+ padding: 1px 8px;
2765
+ background: var(--panel2);
2766
+ }
2767
+ .store-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
2768
+ .store-stats { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
2769
+ .store-like {
2770
+ border: none; background: none; cursor: pointer;
2771
+ color: var(--muted); font-size: 12.5px; padding: 2px 6px; border-radius: 6px;
2772
+ }
2773
+ .store-like:hover { background: var(--panel2); }
2774
+ .store-like.liked { color: var(--err); }
2775
+ .store-install {
2776
+ margin-left: auto;
2777
+ padding: 6px 14px;
2778
+ border-radius: 8px;
2779
+ border: 1px solid var(--accent);
2780
+ background: var(--accent-dim);
2781
+ color: var(--accent);
2782
+ font-size: 12px;
2783
+ font-weight: 700;
2784
+ cursor: pointer;
2785
+ }
2786
+ .store-install:hover { filter: brightness(1.12); }
2787
+ .store-install.done {
2788
+ border-color: var(--border);
2789
+ background: none;
2790
+ color: var(--muted);
2791
+ cursor: default;
2792
+ font-weight: 400;
2793
+ }
2794
+ .store-empty {
2795
+ color: var(--muted);
2796
+ font-size: 12.5px;
2797
+ text-align: center;
2798
+ padding: 40px 0;
2799
+ }
2692
2800
  .store-form {
2693
2801
  display: flex;
2694
2802
  flex-direction: column;
@@ -2722,15 +2830,15 @@ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2722
2830
  text-align: left;
2723
2831
  }
2724
2832
  .store-input:focus { outline: none; border-color: var(--accent); }
2725
- .store-picked {
2726
- font-size: 12px;
2727
- color: var(--muted);
2728
- background: var(--bg);
2729
- border: 1px dashed var(--border);
2730
- border-radius: 8px;
2731
- padding: 8px 11px;
2732
- line-height: 1.5;
2733
- }
2833
+ .store-picked {
2834
+ font-size: 12px;
2835
+ color: var(--muted);
2836
+ background: var(--bg);
2837
+ border: 1px dashed var(--border);
2838
+ border-radius: 8px;
2839
+ padding: 8px 11px;
2840
+ line-height: 1.5;
2841
+ }
2734
2842
  .store-btn {
2735
2843
  align-self: center;
2736
2844
  padding: 8px 16px;
@@ -2740,7 +2848,7 @@ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2740
2848
  color: var(--text);
2741
2849
  font-size: 12.5px;
2742
2850
  cursor: pointer;
2743
- }
2851
+ }
2744
2852
  .store-btn:hover { border-color: var(--accent); color: var(--accent); }
2745
2853
  .store-saved-user {
2746
2854
  font-weight: 700;
@@ -2750,112 +2858,112 @@ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2750
2858
  border: 1px solid var(--accent);
2751
2859
  border-radius: 8px;
2752
2860
  padding: 5px 14px;
2753
- }
2754
- .store-btn.primary {
2755
- border-color: var(--accent);
2756
- background: var(--accent-dim);
2757
- color: var(--accent);
2758
- font-weight: 700;
2759
- }
2760
- .store-mine { display: flex; flex-direction: column; gap: 6px; }
2761
- .store-mine-row {
2762
- display: flex; align-items: center; gap: 8px;
2763
- border: 1px solid var(--border);
2764
- border-radius: 9px;
2765
- background: var(--panel);
2766
- padding: 8px 11px;
2767
- font-size: 12.5px;
2768
- }
2769
- .store-mine-row .sm-n { font-weight: 700; }
2770
- .store-mine-row .sm-m { color: var(--muted); font-size: 11.5px; flex: 1; }
2771
- .store-mine-row button {
2772
- border: none; background: none; cursor: pointer;
2773
- color: var(--muted); font-size: 11.5px; padding: 2px 6px; border-radius: 6px;
2774
- }
2775
- .store-mine-row button:hover { background: var(--panel2); color: var(--text); }
2861
+ }
2862
+ .store-btn.primary {
2863
+ border-color: var(--accent);
2864
+ background: var(--accent-dim);
2865
+ color: var(--accent);
2866
+ font-weight: 700;
2867
+ }
2868
+ .store-mine { display: flex; flex-direction: column; gap: 6px; }
2869
+ .store-mine-row {
2870
+ display: flex; align-items: center; gap: 8px;
2871
+ border: 1px solid var(--border);
2872
+ border-radius: 9px;
2873
+ background: var(--panel);
2874
+ padding: 8px 11px;
2875
+ font-size: 12.5px;
2876
+ }
2877
+ .store-mine-row .sm-n { font-weight: 700; }
2878
+ .store-mine-row .sm-m { color: var(--muted); font-size: 11.5px; flex: 1; }
2879
+ .store-mine-row button {
2880
+ border: none; background: none; cursor: pointer;
2881
+ color: var(--muted); font-size: 11.5px; padding: 2px 6px; border-radius: 6px;
2882
+ }
2883
+ .store-mine-row button:hover { background: var(--panel2); color: var(--text); }
2776
2884
  .store-mine-row button.sm-del:hover { color: var(--err); }
2777
-
2778
- /* ================= GITHUB TRENDING MODALI =================
2779
- Skills Store modalıyla aynı tasarım dili: 70vw×70vh, aynı head/kart dili.
2780
- Sol: Trending depolar · Sağ: Favoriler (localStorage'da kalıcı). */
2781
- #ghOverlay {
2782
- position: fixed;
2783
- inset: 0;
2784
- background: rgba(36, 41, 47, 0.45);
2785
- display: flex;
2786
- align-items: center;
2787
- justify-content: center;
2788
- z-index: 56;
2789
- }
2790
- #ghOverlay[hidden] { display: none; }
2791
- body.browser-open #ghOverlay { right: var(--bw, 480px); }
2792
- #ghDialog {
2793
- width: 70vw;
2794
- height: 70vh;
2795
- background: var(--bg);
2796
- border: 1px solid var(--border);
2797
- border-radius: 14px;
2798
- display: flex;
2799
- flex-direction: column;
2800
- overflow: hidden;
2801
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
2802
- }
2803
- #ghHead {
2804
- display: flex;
2805
- align-items: center;
2806
- gap: 10px;
2807
- padding: 14px 18px;
2808
- border-bottom: 1px solid var(--border);
2809
- }
2810
- #ghTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
2811
- #ghBody { flex: 1; display: flex; min-height: 0; }
2812
- .gh-pane {
2813
- flex: 1; min-width: 0;
2814
- display: flex; flex-direction: column;
2815
- }
2816
- #ghTrendPane { border-right: 1px solid var(--border); }
2817
- .gh-pane-title {
2818
- padding: 10px 14px 8px;
2819
- font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
2820
- color: var(--muted);
2821
- border-bottom: 1px solid var(--border);
2822
- flex: none;
2823
- }
2824
- .gh-pane-sub { font-weight: 400; letter-spacing: 0; text-transform: none; }
2825
- .gh-pane-list { flex: 1; overflow-y: auto; padding: 10px; }
2826
- .gh-empty { color: var(--muted); font-size: 12.5px; padding: 18px 10px; text-align: center; }
2827
- .gh-card {
2828
- border: 1px solid var(--border);
2829
- border-radius: 10px;
2830
- padding: 10px 12px;
2831
- margin-bottom: 8px;
2832
- background: var(--panel);
2833
- }
2834
- .gh-card:hover { border-color: var(--accent); }
2835
- .gh-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
2836
- .gh-name {
2837
- font-weight: 700; font-size: 13px; color: var(--text);
2838
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2839
- min-width: 0; cursor: pointer;
2840
- }
2841
- .gh-name:hover { color: var(--accent); text-decoration: underline; }
2842
- .gh-stars { color: var(--muted); font-size: 11.5px; flex: none; }
2843
- .gh-lang { color: var(--muted); font-size: 11px; flex: none; }
2844
- .gh-desc {
2845
- color: var(--muted); font-size: 12px; line-height: 1.4;
2846
- margin-top: 4px;
2847
- display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
2848
- }
2849
- .gh-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
2850
- .gh-actions button {
2851
- border: 1px solid var(--border); background: var(--panel2);
2852
- color: var(--text); font-size: 11.5px; font-weight: 700;
2853
- padding: 3px 10px; border-radius: 7px; cursor: pointer;
2854
- }
2855
- .gh-actions button:hover { border-color: var(--accent); color: var(--accent); }
2856
- .gh-actions button.gh-fav.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
2885
+
2886
+ /* ================= GITHUB TRENDING MODALI =================
2887
+ Skills Store modalıyla aynı tasarım dili: 70vw×70vh, aynı head/kart dili.
2888
+ Sol: Trending depolar · Sağ: Favoriler (localStorage'da kalıcı). */
2889
+ #ghOverlay {
2890
+ position: fixed;
2891
+ inset: 0;
2892
+ background: rgba(36, 41, 47, 0.45);
2893
+ display: flex;
2894
+ align-items: center;
2895
+ justify-content: center;
2896
+ z-index: 56;
2897
+ }
2898
+ #ghOverlay[hidden] { display: none; }
2899
+ body.browser-open #ghOverlay { right: var(--bw, 480px); }
2900
+ #ghDialog {
2901
+ width: 70vw;
2902
+ height: 70vh;
2903
+ background: var(--bg);
2904
+ border: 1px solid var(--border);
2905
+ border-radius: 14px;
2906
+ display: flex;
2907
+ flex-direction: column;
2908
+ overflow: hidden;
2909
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
2910
+ }
2911
+ #ghHead {
2912
+ display: flex;
2913
+ align-items: center;
2914
+ gap: 10px;
2915
+ padding: 14px 18px;
2916
+ border-bottom: 1px solid var(--border);
2917
+ }
2918
+ #ghTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
2919
+ #ghBody { flex: 1; display: flex; min-height: 0; }
2920
+ .gh-pane {
2921
+ flex: 1; min-width: 0;
2922
+ display: flex; flex-direction: column;
2923
+ }
2924
+ #ghTrendPane { border-right: 1px solid var(--border); }
2925
+ .gh-pane-title {
2926
+ padding: 10px 14px 8px;
2927
+ font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
2928
+ color: var(--muted);
2929
+ border-bottom: 1px solid var(--border);
2930
+ flex: none;
2931
+ }
2932
+ .gh-pane-sub { font-weight: 400; letter-spacing: 0; text-transform: none; }
2933
+ .gh-pane-list { flex: 1; overflow-y: auto; padding: 10px; }
2934
+ .gh-empty { color: var(--muted); font-size: 12.5px; padding: 18px 10px; text-align: center; }
2935
+ .gh-card {
2936
+ border: 1px solid var(--border);
2937
+ border-radius: 10px;
2938
+ padding: 10px 12px;
2939
+ margin-bottom: 8px;
2940
+ background: var(--panel);
2941
+ }
2942
+ .gh-card:hover { border-color: var(--accent); }
2943
+ .gh-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
2944
+ .gh-name {
2945
+ font-weight: 700; font-size: 13px; color: var(--text);
2946
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2947
+ min-width: 0; cursor: pointer;
2948
+ }
2949
+ .gh-name:hover { color: var(--accent); text-decoration: underline; }
2950
+ .gh-stars { color: var(--muted); font-size: 11.5px; flex: none; }
2951
+ .gh-lang { color: var(--muted); font-size: 11px; flex: none; }
2952
+ .gh-desc {
2953
+ color: var(--muted); font-size: 12px; line-height: 1.4;
2954
+ margin-top: 4px;
2955
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
2956
+ }
2957
+ .gh-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
2958
+ .gh-actions button {
2959
+ border: 1px solid var(--border); background: var(--panel2);
2960
+ color: var(--text); font-size: 11.5px; font-weight: 700;
2961
+ padding: 3px 10px; border-radius: 7px; cursor: pointer;
2962
+ }
2963
+ .gh-actions button:hover { border-color: var(--accent); color: var(--accent); }
2964
+ .gh-actions button.gh-fav.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
2857
2965
  .gh-err { color: var(--err); font-size: 12.5px; padding: 14px; text-align: center; }
2858
-
2966
+
2859
2967
  /* github filtre çubuğu: aralık + sıralama + arama */
2860
2968
  .gh-filters {
2861
2969
  display: flex;
@@ -2868,20 +2976,20 @@ body.browser-open #ghOverlay { right: var(--bw, 480px); }
2868
2976
  }
2869
2977
  /* display:flex, [hidden] ni ezmesin — sekmeye göre gerçekten gizlensin */
2870
2978
  #ghTrendTools[hidden],
2871
- #ghAllTools[hidden] { display: none; }
2872
- .gh-ranges { display: flex; gap: 4px; }
2873
- .gh-ranges button {
2874
- border: 1px solid var(--border);
2875
- background: var(--panel2);
2876
- color: var(--muted);
2877
- font-size: 11.5px;
2878
- font-weight: 700;
2879
- padding: 3px 9px;
2880
- border-radius: 7px;
2881
- cursor: pointer;
2882
- }
2883
- .gh-ranges button:hover { color: var(--text); }
2884
- .gh-ranges button.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
2979
+ #ghAllTools[hidden] { display: none; }
2980
+ .gh-ranges { display: flex; gap: 4px; }
2981
+ .gh-ranges button {
2982
+ border: 1px solid var(--border);
2983
+ background: var(--panel2);
2984
+ color: var(--muted);
2985
+ font-size: 11.5px;
2986
+ font-weight: 700;
2987
+ padding: 3px 9px;
2988
+ border-radius: 7px;
2989
+ cursor: pointer;
2990
+ }
2991
+ .gh-ranges button:hover { color: var(--text); }
2992
+ .gh-ranges button.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
2885
2993
  #ghSortBtn,
2886
2994
  #ghAllSortBtn,
2887
2995
  .gh-refresh {
@@ -2920,7 +3028,7 @@ body.browser-open #ghOverlay { right: var(--bw, 480px); }
2920
3028
  min-width: 0;
2921
3029
  width: auto;
2922
3030
  text-overflow: ellipsis;
2923
- }
3031
+ }
2924
3032
  /* sol bölme sekmeleri: Trend Repolar ⇄ Tüm Repolar — eşit genişlik, ortalanmış metin */
2925
3033
  .gh-pane-tabs { display: flex; flex: none; }
2926
3034
  .gh-tab {
@@ -2945,3 +3053,20 @@ body.browser-open #ghOverlay { right: var(--bw, 480px); }
2945
3053
  flex: none;
2946
3054
  text-align: center;
2947
3055
  }
3056
+
3057
+ /* Beast Code durum balonu: dusunuyor… / arac adlari — inputun ustunde */
3058
+ #bcStatus {
3059
+ flex: none;
3060
+ align-self: flex-start;
3061
+ margin: 0 12px 6px;
3062
+ padding: 4px 10px;
3063
+ font-size: 11px;
3064
+ color: var(--muted);
3065
+ background: var(--panel2);
3066
+ border: 1px solid var(--border);
3067
+ border-radius: 999px;
3068
+ max-width: calc(100% - 24px);
3069
+ overflow: hidden;
3070
+ text-overflow: ellipsis;
3071
+ white-space: nowrap;
3072
+ }