bitpull 0.1.24 → 0.1.25
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.
- package/bitpull.cjs +241 -76
- package/package.json +1 -1
- package/ui/ide.css +261 -87
- package/ui/ide.html +106 -62
- package/ui/ide.js +589 -163
- package/ui/terminal.js +2 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bitpull",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.25",
|
|
4
4
|
"description": "BitPull (bitpull.cloud): share signed, AI-readable code, computing power and open AI models with AI tools through MCP. CLI and MCP server.",
|
|
5
5
|
"mcpName": "io.github.SamuealPK/bitpull",
|
|
6
6
|
"bin": {
|
package/ui/ide.css
CHANGED
|
@@ -1,97 +1,271 @@
|
|
|
1
|
-
/* BitPull
|
|
2
|
-
:root {
|
|
3
|
-
--side:
|
|
4
|
-
|
|
1
|
+
/* BitPull projects: the layout and look of a modern code editor (VS Code conventions), BitPull's own icons. */
|
|
2
|
+
:root {
|
|
3
|
+
--surface: var(--bg); --bg: #1f1f1f; --side: #181818; --bar: #181818; --raised: #2a2d2e; --hover: #2a2d2e; --sel: #37373d; --sel-focus: #04395e;
|
|
4
|
+
--text: #cccccc; --bright: #e7e7e7; --muted: #9d9d9d; --faint: #6e7681; --line: #2b2b2b; --line2: #3c3c3c;
|
|
5
|
+
--accent: #0078d4; --accent-ink: #ffffff; --focus: #0078d4; --input: #313131;
|
|
6
|
+
--good: #73c991; --warn: #cca700; --bad: #f14c4c; --mod: #e2c08d; --new: #73c991; --del: #c74e39; --ign: #8c8c8c;
|
|
7
|
+
--guide: #585858; --tab: #181818; --tab-on: #1f1f1f;
|
|
8
|
+
--w-side: 260px; --w-agent: 380px; --s-panel: 240px;
|
|
9
|
+
color-scheme: dark;
|
|
10
|
+
}
|
|
11
|
+
@media (prefers-color-scheme: light) {
|
|
12
|
+
:root { --bg: #ffffff; --side: #f8f8f8; --bar: #f8f8f8; --raised: #f2f2f2; --hover: #f2f2f2; --sel: #e4e6f1; --sel-focus: #cce5ff;
|
|
13
|
+
--text: #3b3b3b; --bright: #1f1f1f; --muted: #6e6e6e; --faint: #8b8b8b; --line: #e5e5e5; --line2: #cecece;
|
|
14
|
+
--accent: #005fb8; --focus: #005fb8; --input: #ffffff; --good: #388a34; --warn: #bf8803; --bad: #e51400; --mod: #895503; --new: #388a34; --del: #ad0707; --ign: #8e8e90;
|
|
15
|
+
--guide: #cfcfcf; --tab: #f8f8f8; --tab-on: #ffffff; color-scheme: light; }
|
|
16
|
+
}
|
|
5
17
|
* { box-sizing: border-box; }
|
|
6
18
|
html, body { height: 100%; margin: 0; }
|
|
7
|
-
body { background: var(--bg); color: var(--text); font:
|
|
19
|
+
body { background: var(--bg); color: var(--text); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans", sans-serif; overflow: hidden; }
|
|
8
20
|
[hidden] { display: none !important; }
|
|
9
|
-
|
|
10
|
-
:where(#ide, #modal) button:disabled { opacity: .55; cursor: default; }
|
|
11
|
-
:where(#ide, #modal) button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
|
|
12
|
-
:where(#ide, #modal) button.danger { background: var(--bad); color: #fff; }
|
|
13
|
-
:where(#ide, #modal) button.icon { background: transparent; color: var(--muted); padding: 2px 6px; font-weight: 500; }
|
|
14
|
-
:where(#ide, #modal) button.icon:hover, :where(#ide, #modal) button.ghost:hover { background: var(--raised); }
|
|
15
|
-
:where(#ide, #modal) button.small { padding: 2px 8px; font-size: 12px; }
|
|
16
|
-
/* Form fields of our own panels only: Monaco has hidden inputs of its own that must keep their style. */
|
|
17
|
-
:where(#top, #side, #agent, #modal, #bottom) :is(input[type=text], input[type=number], select, textarea) { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }
|
|
18
|
-
:where(#side, #agent, #modal) textarea { width: 100%; resize: vertical; }
|
|
19
|
-
#top select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }
|
|
20
|
-
a { color: var(--accent); }
|
|
21
|
-
.grow { flex: 1; }
|
|
22
|
-
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
|
|
23
|
-
.row.end { justify-content: flex-end; }
|
|
21
|
+
.grow { flex: 1 1 auto; min-width: 0; }
|
|
24
22
|
.muted { color: var(--muted); }
|
|
25
23
|
.small { font-size: 12px; }
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
#
|
|
37
|
-
|
|
38
|
-
.
|
|
39
|
-
.
|
|
40
|
-
.
|
|
41
|
-
.
|
|
42
|
-
.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
24
|
+
.pad { padding: 6px 12px; }
|
|
25
|
+
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
|
|
26
|
+
.row.end { justify-content: flex-end; }
|
|
27
|
+
a { color: var(--accent); }
|
|
28
|
+
|
|
29
|
+
/* ---- icons: drawn in the page, coloured by their text colour ---- */
|
|
30
|
+
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
|
|
31
|
+
svg.f { width: 16px; height: 16px; display: block; flex: none; }
|
|
32
|
+
|
|
33
|
+
/* ---- buttons ---- */
|
|
34
|
+
:where(#ide, #modal, #menu) button { font: inherit; color: inherit; cursor: pointer; }
|
|
35
|
+
:where(#ide, #modal) button:focus-visible, :where(#ide, #modal) input:focus-visible, :where(#ide, #modal) select:focus-visible, :where(#ide, #modal) textarea:focus-visible, .item:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
|
|
36
|
+
button.primary, #modal button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 4px; padding: 4px 12px; }
|
|
37
|
+
button.primary:hover { filter: brightness(1.1); }
|
|
38
|
+
button.ghost { background: transparent; border: 1px solid var(--line2); border-radius: 4px; padding: 4px 10px; color: var(--text); }
|
|
39
|
+
button.ghost:hover { background: var(--hover); }
|
|
40
|
+
button.danger, #modal button.danger { background: var(--bad); color: #fff; border: 0; border-radius: 4px; padding: 4px 12px; }
|
|
41
|
+
button.ib { background: transparent; border: 0; border-radius: 5px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text); }
|
|
42
|
+
button.ib:hover { background: var(--hover); }
|
|
43
|
+
button.ib.danger { color: var(--bad); background: transparent; }
|
|
44
|
+
button:disabled { opacity: .5; cursor: default; }
|
|
45
|
+
button.wide { width: 100%; display: flex; gap: 6px; justify-content: center; align-items: center; padding: 5px 10px; }
|
|
46
|
+
|
|
47
|
+
/* ---- form fields ---- */
|
|
48
|
+
:where(#ide, #modal) :is(input[type=text], input[type=number], select, textarea) { background: var(--input); color: var(--bright); border: 1px solid var(--line2); border-radius: 4px; padding: 4px 6px; font: inherit; min-width: 0; }
|
|
49
|
+
:where(#ide, #modal) textarea { width: 100%; resize: none; }
|
|
50
|
+
.field { display: flex; align-items: center; gap: 4px; background: var(--input); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
|
|
51
|
+
.field:focus-within { border-color: var(--focus); }
|
|
52
|
+
.field input[type=text] { border: 0 !important; background: transparent !important; flex: 1; padding: 4px 2px !important; outline: none; }
|
|
53
|
+
.field .opt { display: inline-flex; align-items: center; border-radius: 3px; padding: 0 3px; color: var(--muted); cursor: pointer; font-size: 12px; }
|
|
54
|
+
.field .opt input { position: absolute; opacity: 0; pointer-events: none; }
|
|
55
|
+
.field .opt:has(input:checked) { background: var(--sel-focus); color: var(--bright); outline: 1px solid var(--focus); }
|
|
56
|
+
.field svg.i { color: var(--muted); }
|
|
57
|
+
|
|
58
|
+
/* ---- the frame ---- */
|
|
59
|
+
#ide { display: grid; grid-template-rows: 35px minmax(0, 1fr) 22px; height: 100%; }
|
|
60
|
+
#titlebar { display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--bar); border-bottom: 1px solid var(--line); min-width: 0; }
|
|
61
|
+
button.tb { background: transparent; border: 0; border-radius: 5px; height: 26px; min-width: 26px; padding: 0 6px; display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
|
|
62
|
+
button.tb:hover, button.tb.on { background: var(--hover); }
|
|
63
|
+
button.tb.folder { font-weight: 600; max-width: 260px; }
|
|
64
|
+
#folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
65
|
+
button.tb.search { width: min(520px, 46vw); justify-content: center; border: 1px solid var(--line2); background: var(--input); height: 24px; }
|
|
66
|
+
button.tb.search span.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
67
|
+
|
|
68
|
+
#workbench { display: grid; min-height: 0; min-width: 0; overflow: hidden; }
|
|
69
|
+
#activity { grid-area: act; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; background: var(--side); border-inline-end: 1px solid var(--line); }
|
|
70
|
+
#activity button { position: relative; background: transparent; border: 0; width: 48px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--faint); }
|
|
71
|
+
#activity button svg.i { width: 22px; height: 22px; stroke-width: 1.4; }
|
|
72
|
+
#activity button:hover, #activity button.on { color: var(--bright); }
|
|
73
|
+
#activity button.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
|
|
74
|
+
#side { grid-area: side; background: var(--side); overflow: hidden; display: flex; flex-direction: column; min-width: 0; border-inline-end: 1px solid var(--line); }
|
|
75
|
+
#side > section { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: auto; }
|
|
76
|
+
#editor-area { grid-area: edit; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
|
|
77
|
+
#panel { grid-area: panel; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); border-top: 1px solid var(--line); }
|
|
78
|
+
#panel.at-left, #panel.at-right { border-top: 0; border-inline-start: 1px solid var(--line); }
|
|
79
|
+
#panel.at-top { border-top: 0; border-bottom: 1px solid var(--line); }
|
|
80
|
+
#agent { grid-area: agent; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--side); border-inline-start: 1px solid var(--line); }
|
|
81
|
+
.sash { position: relative; z-index: 4; }
|
|
82
|
+
.sash[data-split="side"] { grid-area: s1; }
|
|
83
|
+
.sash[data-split="panel"] { grid-area: s2; }
|
|
84
|
+
.sash[data-split="agent"] { grid-area: s3; }
|
|
85
|
+
.sash.v { cursor: col-resize; }
|
|
86
|
+
.sash.h { cursor: row-resize; }
|
|
87
|
+
.sash::after { content: ""; position: absolute; inset: 0; margin: -2px; }
|
|
88
|
+
.sash:hover::after, .sash.drag::after { background: var(--focus); opacity: .8; margin: 0; }
|
|
89
|
+
.sash.v:hover::after, .sash.v.drag::after { inset-inline: -1px; }
|
|
90
|
+
.sash.h:hover::after, .sash.h.drag::after { inset-block: -1px; }
|
|
91
|
+
|
|
92
|
+
/* ---- side bar ---- */
|
|
93
|
+
.view-title { display: flex; align-items: center; height: 35px; padding: 0 8px 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: none; }
|
|
94
|
+
.pane { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); flex: none; }
|
|
95
|
+
.pane:first-of-type { border-top: 0; }
|
|
96
|
+
.pane.open { flex: 1 1 0; }
|
|
97
|
+
.pane-head { display: flex; align-items: center; gap: 2px; height: 22px; padding-inline: 2px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text); cursor: pointer; user-select: none; flex: none; }
|
|
98
|
+
.pane-head .twist { color: var(--text); transition: transform .1s; }
|
|
99
|
+
.pane.open .pane-head .twist { transform: rotate(90deg); }
|
|
100
|
+
:dir(rtl) .pane-head .twist { transform: scaleX(-1); }
|
|
101
|
+
:dir(rtl) .pane.open .pane-head .twist { transform: rotate(90deg); }
|
|
102
|
+
.pane-acts { display: none; gap: 2px; }
|
|
103
|
+
.pane-head:hover .pane-acts, .pane:focus-within .pane-acts { display: inline-flex; }
|
|
104
|
+
.pane-body { overflow: auto; min-height: 0; flex: 1; display: none; }
|
|
105
|
+
.pane.open .pane-body { display: block; }
|
|
106
|
+
.pane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
107
|
+
.sub-head { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
|
|
108
|
+
|
|
109
|
+
/* ---- lists and the tree ---- */
|
|
110
|
+
#ide ul.list, #ide ul.tree, #modal ul.list, #menu ul { list-style: none; margin: 0; padding: 0; }
|
|
111
|
+
ul.list li { display: flex; gap: 6px; align-items: center; height: 22px; padding: 0 12px; cursor: pointer; white-space: nowrap; overflow: hidden; }
|
|
112
|
+
ul.list li .name { overflow: hidden; text-overflow: ellipsis; }
|
|
113
|
+
ul.list li:hover { background: var(--hover); }
|
|
114
|
+
ul.list li.on { background: var(--sel); }
|
|
115
|
+
ul.tree ul { list-style: none; margin: 0; padding: 0; }
|
|
116
|
+
ul.tree .item { position: relative; display: flex; align-items: center; gap: 4px; height: 22px; padding-inline-end: 8px; cursor: pointer; white-space: nowrap; color: var(--text); }
|
|
117
|
+
ul.tree .item:hover { background: var(--hover); }
|
|
118
|
+
ul.tree .item.on { background: var(--sel); }
|
|
119
|
+
#side:focus-within ul.tree .item.on { background: var(--sel-focus); outline: 1px solid var(--focus); outline-offset: -1px; }
|
|
120
|
+
ul.tree .item .twist { width: 16px; color: var(--text); flex: none; }
|
|
121
|
+
ul.tree .item.open .twist svg { transform: rotate(90deg); }
|
|
122
|
+
:dir(rtl) ul.tree .item .twist svg { transform: scaleX(-1); }
|
|
123
|
+
:dir(rtl) ul.tree .item.open .twist svg { transform: rotate(90deg); }
|
|
124
|
+
ul.tree .item .name { overflow: hidden; text-overflow: ellipsis; }
|
|
125
|
+
ul.tree .item .git { margin-inline-start: auto; font-size: 11px; font-weight: 600; padding-inline-start: 6px; }
|
|
126
|
+
ul.tree .item.dot .name, ul.tree .item.ignored .name { color: var(--ign); }
|
|
127
|
+
ul.tree .item.ignored svg.f { opacity: .55; }
|
|
128
|
+
ul.tree .item.git-M .name, ul.tree .item.git-M .git { color: var(--mod); }
|
|
129
|
+
ul.tree .item.git-U .name, ul.tree .item.git-U .git, ul.tree .item.git-A .name, ul.tree .item.git-A .git { color: var(--new); }
|
|
130
|
+
ul.tree .item.git-D .name, ul.tree .item.git-D .git { color: var(--del); }
|
|
131
|
+
ul.tree .item .acts { display: none; gap: 1px; margin-inline-start: 4px; }
|
|
132
|
+
ul.tree .item:hover .acts { display: inline-flex; }
|
|
133
|
+
ul.tree .item:hover .git { display: none; }
|
|
134
|
+
.guide { position: absolute; top: 0; bottom: 0; width: 1px; background: transparent; }
|
|
135
|
+
#side:hover .guide { background: var(--guide); opacity: .45; }
|
|
136
|
+
.badge { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--raised); color: var(--muted); flex: none; }
|
|
51
137
|
.badge.bad { color: var(--bad); } .badge.warn { color: var(--warn); } .badge.good { color: var(--good); }
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
#tabs
|
|
56
|
-
#tabs
|
|
57
|
-
#tabs .tab
|
|
58
|
-
#
|
|
59
|
-
#
|
|
60
|
-
#
|
|
61
|
-
#
|
|
62
|
-
#
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
#
|
|
67
|
-
#
|
|
68
|
-
#
|
|
69
|
-
|
|
70
|
-
#
|
|
71
|
-
#
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
|
|
138
|
+
.count { font-size: 11px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--raised); color: var(--text); text-align: center; }
|
|
139
|
+
|
|
140
|
+
/* ---- editor area ---- */
|
|
141
|
+
#tabs-row { display: flex; align-items: stretch; height: 35px; background: var(--tab); border-bottom: 1px solid var(--line); flex: none; }
|
|
142
|
+
#tabs { display: flex; overflow-x: auto; overflow-y: hidden; flex: 1; scrollbar-width: none; }
|
|
143
|
+
#tabs .tab { display: flex; gap: 6px; align-items: center; padding: 0 6px 0 10px; border-inline-end: 1px solid var(--line); cursor: pointer; white-space: nowrap; color: var(--muted); min-width: 0; position: relative; background: var(--tab); }
|
|
144
|
+
#tabs .tab:hover { color: var(--text); }
|
|
145
|
+
#tabs .tab.on { color: var(--bright); background: var(--tab-on); }
|
|
146
|
+
#tabs .tab.on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
|
|
147
|
+
#tabs .tab .x { width: 20px; height: 20px; border: 0; background: transparent; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; padding: 0; color: inherit; }
|
|
148
|
+
#tabs .tab:hover .x, #tabs .tab.on .x { visibility: visible; }
|
|
149
|
+
#tabs .tab .x:hover { background: var(--hover); }
|
|
150
|
+
#tabs .tab.dirty .x { visibility: visible; }
|
|
151
|
+
#tabs .tab.dirty .x svg { display: none; }
|
|
152
|
+
#tabs .tab.dirty .x::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
|
|
153
|
+
#tabs .tab.dirty .x:hover svg { display: block; }
|
|
154
|
+
#tabs .tab.dirty .x:hover::before { display: none; }
|
|
155
|
+
.tabs-acts { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
|
|
156
|
+
#crumbs { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; overflow: hidden; flex: none; }
|
|
157
|
+
#crumbs span.sep { opacity: .7; }
|
|
158
|
+
#crumbs .c { cursor: default; display: inline-flex; align-items: center; gap: 4px; }
|
|
159
|
+
#crumbs span.sep { display: inline-flex; }
|
|
160
|
+
#crumbs svg { width: 14px; height: 14px; }
|
|
161
|
+
#crumbs .c:last-child { color: var(--text); }
|
|
162
|
+
#review { display: flex; gap: 6px; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--line); background: var(--side); flex-wrap: wrap; flex: none; }
|
|
163
|
+
#editor-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
|
|
164
|
+
#editor, #editor2 { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
|
|
165
|
+
#editor2 { border-inline-start: 1px solid var(--line); }
|
|
166
|
+
#diff { position: absolute; inset: 0; }
|
|
167
|
+
#welcome { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg); }
|
|
168
|
+
.welcome-box { max-width: 560px; padding: 24px; text-align: center; }
|
|
169
|
+
.welcome-box .logo { color: var(--line2); display: flex; justify-content: center; margin-bottom: 8px; }
|
|
170
|
+
.welcome-box .logo svg.i { width: 96px; height: 96px; stroke-width: .8; }
|
|
171
|
+
.welcome-box h2 { font-weight: 400; color: var(--text); margin: 6px 0; font-size: 20px; }
|
|
172
|
+
table.keys { margin: 18px auto 0; border-collapse: collapse; color: var(--muted); }
|
|
173
|
+
table.keys td { padding: 4px 10px; text-align: start; }
|
|
174
|
+
table.keys td:last-child { text-align: end; }
|
|
175
|
+
kbd { font: 11px ui-monospace, Menlo, Consolas, monospace; background: var(--raised); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; margin-inline: 1px; color: var(--text); }
|
|
176
|
+
|
|
177
|
+
/* ---- panel ---- */
|
|
178
|
+
.panel-head { display: flex; align-items: center; height: 35px; padding: 0 8px; flex: none; }
|
|
179
|
+
.ptabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
|
|
180
|
+
.ptabs button[data-bottom] { background: transparent; border: 0; padding: 0 8px; height: 26px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; position: relative; }
|
|
181
|
+
.ptabs button[data-bottom]:hover { color: var(--text); }
|
|
182
|
+
.ptabs button[data-bottom].on { color: var(--bright); }
|
|
183
|
+
.ptabs button[data-bottom].on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -4px; height: 1px; background: var(--bright); }
|
|
184
|
+
#panel:not(.icons) .ptabs .pic { display: none; }
|
|
185
|
+
.pacts { display: flex; gap: 2px; }
|
|
186
|
+
.panel-body { flex: 1; min-height: 0; position: relative; }
|
|
187
|
+
.panel-body > div[data-bpanel] { position: absolute; inset: 0; overflow: auto; }
|
|
188
|
+
#output { margin: 0; padding: 4px 16px; white-space: pre-wrap; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; }
|
|
189
|
+
#terminal-host { position: absolute; inset: 0; }
|
|
190
|
+
#problems li { height: 22px; }
|
|
191
|
+
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
|
|
192
|
+
table.grid th { text-align: start; font-weight: 600; color: var(--muted); padding: 4px 12px; border-bottom: 1px solid var(--line); }
|
|
193
|
+
table.grid td { padding: 3px 12px; border-bottom: 1px solid var(--line); }
|
|
194
|
+
table.grid tr:hover td { background: var(--hover); }
|
|
195
|
+
|
|
196
|
+
/* the terminal, with icon buttons like an editor's */
|
|
197
|
+
.bp-term { background: var(--bg) !important; }
|
|
198
|
+
.bp-term .xterm, .bp-term .xterm-viewport, .bp-term .xterm-screen, .bp-term-pane { background: var(--bg) !important; }
|
|
199
|
+
.bp-term-bar button.ib { padding: 0 !important; width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; }
|
|
200
|
+
.bp-term-bar button.ib:hover { background: var(--hover); }
|
|
201
|
+
.bp-term-bar { border-bottom: 0 !important; padding: 0 8px 0 12px !important; height: 28px; flex-direction: row-reverse; }
|
|
202
|
+
.bp-term-bar .bp-tabs { justify-content: flex-start; }
|
|
203
|
+
.bp-term-bar button { font-size: 12px !important; padding: 2px 8px !important; }
|
|
204
|
+
.bp-term-pane { padding: 2px 0 0 14px !important; }
|
|
205
|
+
|
|
206
|
+
/* ---- agent ---- */
|
|
207
|
+
.agent-top { padding: 8px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); flex: none; }
|
|
208
|
+
ul.list.agents { max-height: 150px; overflow: auto; }
|
|
209
|
+
ul.list.agents li { padding: 0 6px; border-radius: 4px; }
|
|
210
|
+
.agent-title { padding: 6px 12px 0; }
|
|
211
|
+
#agent-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; min-height: 0; }
|
|
212
|
+
.ev { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
|
|
213
|
+
.ev.user { background: var(--input); border: 1px solid var(--line2); padding: 6px 10px; border-radius: 6px; }
|
|
214
|
+
.ev.action, .ev.notice { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
|
|
75
215
|
.ev.error { color: var(--bad); }
|
|
76
|
-
.ev.output { font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius:
|
|
77
|
-
#agent-pending, #agent-limit { border: 1px solid var(--
|
|
216
|
+
.ev.output { font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; max-height: 180px; overflow: auto; direction: ltr; text-align: left; }
|
|
217
|
+
#agent-pending, #agent-limit { margin: 0 12px 8px; border: 1px solid var(--focus); border-radius: 6px; padding: 10px; background: var(--bg); }
|
|
78
218
|
#agent-limit { border-color: var(--warn); }
|
|
79
|
-
#agent-pending code, .code { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--
|
|
80
|
-
#
|
|
81
|
-
|
|
82
|
-
#
|
|
83
|
-
#
|
|
84
|
-
#
|
|
219
|
+
#agent-pending code, .code { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--input); padding: 6px 8px; border-radius: 4px; display: block; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; margin: 6px 0; }
|
|
220
|
+
#agent-changes { padding: 0 12px; }
|
|
221
|
+
#agent-status { padding: 2px 12px 6px; }
|
|
222
|
+
#composer { position: relative; margin: 0 8px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--input); padding: 6px; }
|
|
223
|
+
#composer:focus-within { border-color: var(--focus); }
|
|
224
|
+
#composer textarea { border: 0 !important; background: transparent !important; outline: none; padding: 2px 4px !important; min-height: 52px; max-height: 240px; }
|
|
225
|
+
.composer-bar { display: flex; align-items: center; gap: 4px; }
|
|
226
|
+
.composer-bar select { border: 0 !important; background: transparent !important; color: var(--muted) !important; font-size: 12px !important; padding: 2px 4px !important; max-width: 46%; }
|
|
227
|
+
.composer-bar select:hover { color: var(--text) !important; background: var(--hover) !important; }
|
|
228
|
+
button.send { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--bright); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
|
|
229
|
+
button.send:disabled { opacity: .35; }
|
|
230
|
+
#mode-hint { padding: 4px 4px 0; }
|
|
231
|
+
#mode-hint.auto { color: var(--warn); }
|
|
232
|
+
.popup { position: absolute; bottom: 100%; inset-inline: 0; max-height: 220px; overflow: auto; background: var(--side); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 5; margin-bottom: 4px; }
|
|
233
|
+
|
|
234
|
+
/* ---- status bar ---- */
|
|
235
|
+
#statusbar { display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--bar); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; }
|
|
236
|
+
.sb { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; white-space: nowrap; background: transparent; border: 0; color: inherit; font: inherit; }
|
|
237
|
+
button.sb:hover { background: var(--hover); color: var(--text); }
|
|
238
|
+
.sb svg.i { width: 14px; height: 14px; }
|
|
239
|
+
#sb-mode.auto { color: var(--warn); }
|
|
240
|
+
|
|
241
|
+
/* ---- menus, modal, tooltip ---- */
|
|
242
|
+
.menu { position: fixed; z-index: 40; min-width: 200px; max-width: 360px; background: var(--side); border: 1px solid var(--line2); border-radius: 6px; padding: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
|
|
243
|
+
.menu li { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
|
|
244
|
+
.menu li:hover, .menu li.on { background: var(--sel-focus); color: var(--bright); }
|
|
245
|
+
.menu li .check { width: 14px; }
|
|
246
|
+
.menu li .keys { margin-inline-start: auto; color: var(--muted); font-size: 12px; padding-inline-start: 16px; }
|
|
247
|
+
.menu li.sep { height: 1px; padding: 0; margin: 4px 2px; background: var(--line2); cursor: default; }
|
|
248
|
+
.menu li.head { cursor: default; color: var(--muted); font-size: 11px; text-transform: uppercase; height: 22px; }
|
|
249
|
+
.menu li.head:hover { background: transparent; color: var(--muted); }
|
|
250
|
+
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 30; }
|
|
251
|
+
#modal .box { background: var(--side); border: 1px solid var(--line2); border-radius: 8px; padding: 14px; width: min(620px, calc(100% - 32px)); max-height: 80vh; overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,.45); }
|
|
252
|
+
#modal h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--bright); }
|
|
85
253
|
#modal input[type=text], #modal textarea { width: 100%; }
|
|
254
|
+
#modal ul.list li { border-radius: 4px; padding: 0 8px; }
|
|
255
|
+
#modal ul.list li.on { background: var(--sel-focus); }
|
|
256
|
+
#modal ul.list li .keys { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
|
|
86
257
|
#modal dl { margin: 0; } #modal dt { font-weight: 600; margin-top: 8px; } #modal dd { margin: 2px 0 0; color: var(--muted); }
|
|
87
|
-
#
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
258
|
+
#modal button { padding: 4px 12px; border-radius: 4px; border: 1px solid var(--line2); background: transparent; }
|
|
259
|
+
#tip { position: fixed; z-index: 50; max-width: 320px; background: var(--side); color: var(--text); border: 1px solid var(--line2); padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
|
|
260
|
+
|
|
261
|
+
/* ---- a narrow window: one column that scrolls ---- */
|
|
262
|
+
#ide.narrow #workbench { overflow-y: auto; overflow-x: hidden; }
|
|
263
|
+
#ide.narrow .sash { display: none; }
|
|
264
|
+
#ide.narrow #activity { flex-direction: row; justify-content: flex-start; padding: 0 4px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
|
|
265
|
+
#ide.narrow #activity button { height: 36px; width: 40px; }
|
|
266
|
+
#ide.narrow #activity button.on::before { top: auto; bottom: 0; left: 6px; right: 6px; width: auto; height: 2px; }
|
|
267
|
+
#ide.narrow button.tb.search { width: auto; flex: 1; }
|
|
268
|
+
#ide.narrow #palette-label { display: none; }
|
|
269
|
+
|
|
270
|
+
/* Monaco draws long lines under the minimap, whose canvas is slightly transparent: a solid ground hides them. */
|
|
271
|
+
.monaco-editor .minimap { background: var(--bg); }
|