@bakapiano/ccsm 0.22.2 → 0.22.4
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/CLAUDE.md +538 -538
- package/README.md +189 -189
- package/bin/ccsm.js +235 -235
- package/lib/cliActivity.js +139 -139
- package/lib/codexSeed.js +183 -183
- package/lib/config.js +274 -274
- package/lib/devices.js +229 -229
- package/lib/folders.js +124 -124
- package/lib/localCliSessions.js +519 -519
- package/lib/persistedSessions.js +129 -129
- package/lib/tunnel.js +621 -621
- package/lib/webTerminal.js +233 -231
- package/lib/workspace.js +233 -233
- package/package.json +57 -57
- package/public/css/base.css +99 -99
- package/public/css/cards.css +183 -183
- package/public/css/feedback.css +504 -504
- package/public/css/forms.css +453 -453
- package/public/css/layout.css +176 -176
- package/public/css/modal.css +190 -190
- package/public/css/responsive.css +176 -176
- package/public/css/sidebar.css +707 -707
- package/public/css/terminals.css +592 -592
- package/public/css/tokens.css +81 -81
- package/public/css/wco.css +196 -196
- package/public/css/widgets.css +2725 -2725
- package/public/index.html +152 -152
- package/public/js/api.js +371 -371
- package/public/js/backend.js +149 -149
- package/public/js/components/App.js +73 -73
- package/public/js/components/DirectoryPicker.js +203 -203
- package/public/js/components/EntityFormModal.js +153 -153
- package/public/js/components/Modal.js +57 -57
- package/public/js/components/OfflineBanner.js +67 -67
- package/public/js/components/PageTitleBar.js +13 -13
- package/public/js/components/PendingApprovalOverlay.js +128 -128
- package/public/js/components/Picker.js +179 -179
- package/public/js/components/Popover.js +55 -55
- package/public/js/components/RestartOverlay.js +36 -36
- package/public/js/components/Sidebar.js +380 -380
- package/public/js/components/TerminalInstance.js +187 -15
- package/public/js/components/TerminalResizeDebouncer.js +126 -0
- package/public/js/components/XtermTerminal.js +148 -14
- package/public/js/components/useDragSort.js +67 -67
- package/public/js/dialog.js +67 -67
- package/public/js/icons.js +212 -212
- package/public/js/main.js +296 -296
- package/public/js/pages/AboutPage.js +90 -90
- package/public/js/pages/ConfigurePage.js +713 -713
- package/public/js/pages/LaunchPage.js +421 -421
- package/public/js/pages/RemotePage.js +743 -743
- package/public/js/pages/SessionsPage.js +100 -100
- package/public/js/state.js +335 -335
- package/public/manifest.webmanifest +25 -0
- package/public/setup/index.html +567 -0
- package/scripts/dev.js +149 -149
- package/scripts/install.js +153 -153
- package/scripts/restart-helper.js +96 -96
- package/scripts/upgrade-helper.js +687 -687
- package/server.js +1807 -1807
package/public/css/layout.css
CHANGED
|
@@ -1,176 +1,176 @@
|
|
|
1
|
-
/* App grid · main column · page header · tab panels · footer status line */
|
|
2
|
-
|
|
3
|
-
.app {
|
|
4
|
-
display: grid;
|
|
5
|
-
grid-template-columns: var(--sidebar-w) 1fr;
|
|
6
|
-
height: 100vh;
|
|
7
|
-
/* Pin to viewport height (not min-height) — child flex columns set
|
|
8
|
-
min-height:0 and rely on a bounded parent height to compute their own
|
|
9
|
-
space. With min-height:100vh, a transient xterm resize that briefly
|
|
10
|
-
reports a too-large cell count makes the WebGL canvas grow, .session-pane
|
|
11
|
-
grows to fit, .main grows, .app grows... cascading into a multi-hundred-
|
|
12
|
-
thousand-pixel tall page. height:100vh caps the cascade. */
|
|
13
|
-
transition: grid-template-columns .25s cubic-bezier(.4, 0, .2, 1);
|
|
14
|
-
}
|
|
15
|
-
.app:has(.sidebar[data-collapsed="true"]) {
|
|
16
|
-
grid-template-columns: var(--sidebar-w-collapsed) 1fr;
|
|
17
|
-
}
|
|
18
|
-
/* While dragging the sidebar resize handle, kill the transition so the
|
|
19
|
-
grid tracks pointermove pixel-for-pixel instead of lagging behind. */
|
|
20
|
-
body.is-resizing-sidebar .app {
|
|
21
|
-
transition: none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.main {
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
27
|
-
min-width: 0;
|
|
28
|
-
/* grid items default to min-height:auto which lets internal content
|
|
29
|
-
(eg a misbehaving xterm canvas that briefly reports an absurd height)
|
|
30
|
-
overflow the grid track and balloon the whole page. min-height:0
|
|
31
|
-
restores the expected "fit my grid cell" behaviour. */
|
|
32
|
-
min-height: 0;
|
|
33
|
-
padding: 0 var(--s-4);
|
|
34
|
-
gap: var(--s-2);
|
|
35
|
-
/* .settings-scroll inside uses `margin-right: -var(--s-4)` to bleed
|
|
36
|
-
past .main's padding so its scrollbar sits flush with the window
|
|
37
|
-
edge. Without this clip that 16-px bleed propagates up to <body>
|
|
38
|
-
and shows a permanent horizontal scrollbar on every page. Vertical
|
|
39
|
-
scrolling stays inside .settings-scroll itself (overflow-y:auto)
|
|
40
|
-
so this clip doesn't suppress anything legitimate. */
|
|
41
|
-
overflow-x: hidden;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.page-head {
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: flex-start;
|
|
47
|
-
justify-content: space-between;
|
|
48
|
-
gap: var(--s-8);
|
|
49
|
-
padding-bottom: var(--s-5);
|
|
50
|
-
border-bottom: 1px solid var(--border);
|
|
51
|
-
}
|
|
52
|
-
.page-head-inner { min-width: 0; }
|
|
53
|
-
|
|
54
|
-
.page-title {
|
|
55
|
-
font-family: var(--display);
|
|
56
|
-
font-size: 26px;
|
|
57
|
-
font-weight: 600;
|
|
58
|
-
letter-spacing: -0.024em;
|
|
59
|
-
color: var(--ink);
|
|
60
|
-
line-height: 1.1;
|
|
61
|
-
}
|
|
62
|
-
.page-subtitle {
|
|
63
|
-
margin-top: 4px;
|
|
64
|
-
font-size: 13.5px;
|
|
65
|
-
color: var(--ink-mid);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.page-head-meta {
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: baseline;
|
|
71
|
-
gap: var(--s-3);
|
|
72
|
-
flex-shrink: 0;
|
|
73
|
-
white-space: nowrap;
|
|
74
|
-
font-family: var(--mono);
|
|
75
|
-
font-size: 11px;
|
|
76
|
-
color: var(--ink-muted);
|
|
77
|
-
}
|
|
78
|
-
.ph-stat { display: inline-flex; gap: 6px; align-items: baseline; }
|
|
79
|
-
.ph-key {
|
|
80
|
-
font-family: var(--body);
|
|
81
|
-
font-size: 10.5px;
|
|
82
|
-
letter-spacing: 0.06em;
|
|
83
|
-
text-transform: uppercase;
|
|
84
|
-
color: var(--ink-faint);
|
|
85
|
-
}
|
|
86
|
-
.ph-val { color: var(--ink-mid); }
|
|
87
|
-
.ph-divider { color: var(--ink-faint); }
|
|
88
|
-
|
|
89
|
-
.content {
|
|
90
|
-
flex: 1;
|
|
91
|
-
display: flex;
|
|
92
|
-
flex-direction: column;
|
|
93
|
-
min-height: 0;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.tab-panel {
|
|
97
|
-
display: none;
|
|
98
|
-
flex-direction: column;
|
|
99
|
-
gap: var(--s-4);
|
|
100
|
-
min-height: 0;
|
|
101
|
-
}
|
|
102
|
-
.tab-panel[data-active] {
|
|
103
|
-
display: flex;
|
|
104
|
-
flex: 1;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/* Per-page title strip — height matches the sidebar collapse-toggle
|
|
108
|
-
(28px) so the topmost row of the window reads as one unified band.
|
|
109
|
-
Title on the left, actions slot on the right. The WCO padding-right
|
|
110
|
-
reservation (wco.css) shifts actions inward so they clear the OS
|
|
111
|
-
window controls overlay. */
|
|
112
|
-
.page-title-bar {
|
|
113
|
-
display: flex;
|
|
114
|
-
flex-direction: row;
|
|
115
|
-
align-items: center;
|
|
116
|
-
justify-content: space-between;
|
|
117
|
-
gap: var(--s-3);
|
|
118
|
-
/* `max(36px, …)` floors the anti-zoom shrink — at heavy page zoom the
|
|
119
|
-
counter-scale would otherwise collapse the strip past readable
|
|
120
|
-
(e.g. 250% zoom → ~16px, title text overlaps the action row). */
|
|
121
|
-
height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
122
|
-
min-height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
123
|
-
max-height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
124
|
-
flex-shrink: 0;
|
|
125
|
-
box-sizing: border-box;
|
|
126
|
-
margin: 0 calc(-1 * var(--s-4)) 0;
|
|
127
|
-
padding: 0 var(--s-5);
|
|
128
|
-
/* Bottom divider matches the sidebar's right border exactly — same
|
|
129
|
-
1px solid var(--ui-border) — so the header underline and the
|
|
130
|
-
sidebar/main divider read as one continuous frame. */
|
|
131
|
-
border-bottom: 1px solid var(--ui-border);
|
|
132
|
-
color: var(--ink);
|
|
133
|
-
font-size: 13px;
|
|
134
|
-
font-weight: 400;
|
|
135
|
-
line-height: 1.4;
|
|
136
|
-
}
|
|
137
|
-
.page-title-bar-title {
|
|
138
|
-
margin: 0;
|
|
139
|
-
font-size: 13px;
|
|
140
|
-
font-weight: 400;
|
|
141
|
-
display: flex;
|
|
142
|
-
align-items: center;
|
|
143
|
-
gap: var(--s-2);
|
|
144
|
-
min-width: 0;
|
|
145
|
-
flex: 1;
|
|
146
|
-
overflow: hidden;
|
|
147
|
-
line-height: 1.4;
|
|
148
|
-
}
|
|
149
|
-
.page-title-bar-actions {
|
|
150
|
-
display: flex;
|
|
151
|
-
align-items: center;
|
|
152
|
-
gap: var(--s-2);
|
|
153
|
-
flex-shrink: 0;
|
|
154
|
-
}
|
|
155
|
-
.session-title-text {
|
|
156
|
-
font-weight: 500;
|
|
157
|
-
font-size: 13px;
|
|
158
|
-
letter-spacing: -0.005em;
|
|
159
|
-
color: var(--ink);
|
|
160
|
-
flex-shrink: 0;
|
|
161
|
-
}
|
|
162
|
-
.session-title-meta {
|
|
163
|
-
display: flex;
|
|
164
|
-
align-items: center;
|
|
165
|
-
gap: 6px;
|
|
166
|
-
color: var(--ink-muted);
|
|
167
|
-
font-size: 11.5px;
|
|
168
|
-
overflow: hidden;
|
|
169
|
-
white-space: nowrap;
|
|
170
|
-
}
|
|
171
|
-
.session-title-meta .mono {
|
|
172
|
-
font-family: var(--mono);
|
|
173
|
-
overflow: hidden;
|
|
174
|
-
text-overflow: ellipsis;
|
|
175
|
-
max-width: 40vw;
|
|
176
|
-
}
|
|
1
|
+
/* App grid · main column · page header · tab panels · footer status line */
|
|
2
|
+
|
|
3
|
+
.app {
|
|
4
|
+
display: grid;
|
|
5
|
+
grid-template-columns: var(--sidebar-w) 1fr;
|
|
6
|
+
height: 100vh;
|
|
7
|
+
/* Pin to viewport height (not min-height) — child flex columns set
|
|
8
|
+
min-height:0 and rely on a bounded parent height to compute their own
|
|
9
|
+
space. With min-height:100vh, a transient xterm resize that briefly
|
|
10
|
+
reports a too-large cell count makes the WebGL canvas grow, .session-pane
|
|
11
|
+
grows to fit, .main grows, .app grows... cascading into a multi-hundred-
|
|
12
|
+
thousand-pixel tall page. height:100vh caps the cascade. */
|
|
13
|
+
transition: grid-template-columns .25s cubic-bezier(.4, 0, .2, 1);
|
|
14
|
+
}
|
|
15
|
+
.app:has(.sidebar[data-collapsed="true"]) {
|
|
16
|
+
grid-template-columns: var(--sidebar-w-collapsed) 1fr;
|
|
17
|
+
}
|
|
18
|
+
/* While dragging the sidebar resize handle, kill the transition so the
|
|
19
|
+
grid tracks pointermove pixel-for-pixel instead of lagging behind. */
|
|
20
|
+
body.is-resizing-sidebar .app {
|
|
21
|
+
transition: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.main {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
min-width: 0;
|
|
28
|
+
/* grid items default to min-height:auto which lets internal content
|
|
29
|
+
(eg a misbehaving xterm canvas that briefly reports an absurd height)
|
|
30
|
+
overflow the grid track and balloon the whole page. min-height:0
|
|
31
|
+
restores the expected "fit my grid cell" behaviour. */
|
|
32
|
+
min-height: 0;
|
|
33
|
+
padding: 0 var(--s-4);
|
|
34
|
+
gap: var(--s-2);
|
|
35
|
+
/* .settings-scroll inside uses `margin-right: -var(--s-4)` to bleed
|
|
36
|
+
past .main's padding so its scrollbar sits flush with the window
|
|
37
|
+
edge. Without this clip that 16-px bleed propagates up to <body>
|
|
38
|
+
and shows a permanent horizontal scrollbar on every page. Vertical
|
|
39
|
+
scrolling stays inside .settings-scroll itself (overflow-y:auto)
|
|
40
|
+
so this clip doesn't suppress anything legitimate. */
|
|
41
|
+
overflow-x: hidden;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.page-head {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: flex-start;
|
|
47
|
+
justify-content: space-between;
|
|
48
|
+
gap: var(--s-8);
|
|
49
|
+
padding-bottom: var(--s-5);
|
|
50
|
+
border-bottom: 1px solid var(--border);
|
|
51
|
+
}
|
|
52
|
+
.page-head-inner { min-width: 0; }
|
|
53
|
+
|
|
54
|
+
.page-title {
|
|
55
|
+
font-family: var(--display);
|
|
56
|
+
font-size: 26px;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
letter-spacing: -0.024em;
|
|
59
|
+
color: var(--ink);
|
|
60
|
+
line-height: 1.1;
|
|
61
|
+
}
|
|
62
|
+
.page-subtitle {
|
|
63
|
+
margin-top: 4px;
|
|
64
|
+
font-size: 13.5px;
|
|
65
|
+
color: var(--ink-mid);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.page-head-meta {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: baseline;
|
|
71
|
+
gap: var(--s-3);
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
font-family: var(--mono);
|
|
75
|
+
font-size: 11px;
|
|
76
|
+
color: var(--ink-muted);
|
|
77
|
+
}
|
|
78
|
+
.ph-stat { display: inline-flex; gap: 6px; align-items: baseline; }
|
|
79
|
+
.ph-key {
|
|
80
|
+
font-family: var(--body);
|
|
81
|
+
font-size: 10.5px;
|
|
82
|
+
letter-spacing: 0.06em;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
color: var(--ink-faint);
|
|
85
|
+
}
|
|
86
|
+
.ph-val { color: var(--ink-mid); }
|
|
87
|
+
.ph-divider { color: var(--ink-faint); }
|
|
88
|
+
|
|
89
|
+
.content {
|
|
90
|
+
flex: 1;
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
min-height: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.tab-panel {
|
|
97
|
+
display: none;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
gap: var(--s-4);
|
|
100
|
+
min-height: 0;
|
|
101
|
+
}
|
|
102
|
+
.tab-panel[data-active] {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex: 1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Per-page title strip — height matches the sidebar collapse-toggle
|
|
108
|
+
(28px) so the topmost row of the window reads as one unified band.
|
|
109
|
+
Title on the left, actions slot on the right. The WCO padding-right
|
|
110
|
+
reservation (wco.css) shifts actions inward so they clear the OS
|
|
111
|
+
window controls overlay. */
|
|
112
|
+
.page-title-bar {
|
|
113
|
+
display: flex;
|
|
114
|
+
flex-direction: row;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: space-between;
|
|
117
|
+
gap: var(--s-3);
|
|
118
|
+
/* `max(36px, …)` floors the anti-zoom shrink — at heavy page zoom the
|
|
119
|
+
counter-scale would otherwise collapse the strip past readable
|
|
120
|
+
(e.g. 250% zoom → ~16px, title text overlaps the action row). */
|
|
121
|
+
height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
122
|
+
min-height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
123
|
+
max-height: max(36px, calc(40px * var(--anti-zoom, 1)));
|
|
124
|
+
flex-shrink: 0;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
margin: 0 calc(-1 * var(--s-4)) 0;
|
|
127
|
+
padding: 0 var(--s-5);
|
|
128
|
+
/* Bottom divider matches the sidebar's right border exactly — same
|
|
129
|
+
1px solid var(--ui-border) — so the header underline and the
|
|
130
|
+
sidebar/main divider read as one continuous frame. */
|
|
131
|
+
border-bottom: 1px solid var(--ui-border);
|
|
132
|
+
color: var(--ink);
|
|
133
|
+
font-size: 13px;
|
|
134
|
+
font-weight: 400;
|
|
135
|
+
line-height: 1.4;
|
|
136
|
+
}
|
|
137
|
+
.page-title-bar-title {
|
|
138
|
+
margin: 0;
|
|
139
|
+
font-size: 13px;
|
|
140
|
+
font-weight: 400;
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
gap: var(--s-2);
|
|
144
|
+
min-width: 0;
|
|
145
|
+
flex: 1;
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
line-height: 1.4;
|
|
148
|
+
}
|
|
149
|
+
.page-title-bar-actions {
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
gap: var(--s-2);
|
|
153
|
+
flex-shrink: 0;
|
|
154
|
+
}
|
|
155
|
+
.session-title-text {
|
|
156
|
+
font-weight: 500;
|
|
157
|
+
font-size: 13px;
|
|
158
|
+
letter-spacing: -0.005em;
|
|
159
|
+
color: var(--ink);
|
|
160
|
+
flex-shrink: 0;
|
|
161
|
+
}
|
|
162
|
+
.session-title-meta {
|
|
163
|
+
display: flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
gap: 6px;
|
|
166
|
+
color: var(--ink-muted);
|
|
167
|
+
font-size: 11.5px;
|
|
168
|
+
overflow: hidden;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
.session-title-meta .mono {
|
|
172
|
+
font-family: var(--mono);
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
text-overflow: ellipsis;
|
|
175
|
+
max-width: 40vw;
|
|
176
|
+
}
|