claudeck 1.4.1 → 1.4.2
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/README.md +2 -4
- package/package.json +1 -1
- package/public/css/core/theme.css +6 -21
- package/public/css/core/variables.css +2 -0
- package/public/css/features/message-queue.css +348 -0
- package/public/css/ui/commands.css +4 -4
- package/public/css/ui/messages.css +310 -78
- package/public/css/ui/sessions.css +173 -0
- package/public/index.html +3 -2
- package/public/js/components/add-project-modal.js +14 -0
- package/public/js/components/jump-to-latest.js +42 -0
- package/public/js/components/queue-stop-modal.js +23 -0
- package/public/js/core/api.js +15 -43
- package/public/js/core/dom.js +17 -0
- package/public/js/core/utils.js +38 -2
- package/public/js/features/chat.js +49 -1
- package/public/js/features/message-queue.js +423 -0
- package/public/js/features/projects.js +185 -3
- package/public/js/main.js +3 -1
- package/public/js/panels/dev-docs.js +1 -1
- package/public/js/ui/formatting.js +65 -11
- package/public/js/ui/messages.js +97 -1
- package/public/js/ui/parallel.js +32 -2
- package/public/js/ui/right-panel.js +0 -8
- package/public/style.css +1 -0
- package/server/routes/projects.js +0 -0
- package/plugins/linear/client.css +0 -345
- package/plugins/linear/client.js +0 -380
- package/plugins/linear/config.json +0 -5
- package/plugins/linear/manifest.json +0 -10
- package/plugins/linear/server.js +0 -312
- package/public/js/components/linear-create-modal.js +0 -43
package/README.md
CHANGED
|
@@ -133,7 +133,6 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
|
|
|
133
133
|
### Integrations
|
|
134
134
|
|
|
135
135
|
- **MCP Manager** — Add/edit/remove MCP servers (global + per-project)
|
|
136
|
-
- **Linear** — View and create issues from the sidebar
|
|
137
136
|
- **Telegram** — Rich notifications + AFK approve/deny via inline keyboard
|
|
138
137
|
- **Push Notifications** — Web-push with audio chime, works when browser is closed
|
|
139
138
|
|
|
@@ -252,15 +251,14 @@ See [CONFIGURATION.md](docs/CONFIGURATION.md) for the full guide.
|
|
|
252
251
|
|
|
253
252
|
## Plugins
|
|
254
253
|
|
|
255
|
-
Claudeck includes
|
|
254
|
+
Claudeck includes 2 built-in plugins, a community marketplace, and supports user plugins via `~/.claudeck/plugins/`:
|
|
256
255
|
|
|
257
256
|
| Plugin | Description |
|
|
258
257
|
|--------|-------------|
|
|
259
258
|
| **Claude Editor** | Edit CLAUDE.md project instructions in-app |
|
|
260
|
-
| **Linear** | Linear issue tracking with team management |
|
|
261
259
|
| **Repos** | Repository management with tree view |
|
|
262
260
|
|
|
263
|
-
**Community Marketplace** — browse, install, and update community plugins directly from the Plugin Marketplace tab. Plugins like Tasks, Event Stream, Sudoku, and Tic-Tac-Toe are available from the [marketplace](https://github.com/hamedafarag/claudeck-marketplace).
|
|
261
|
+
**Community Marketplace** — browse, install, and update community plugins directly from the Plugin Marketplace tab. Plugins like Linear (moved from built-in in v1.4.2), Tasks, Event Stream, Sudoku, and Tic-Tac-Toe are available from the [marketplace](https://github.com/hamedafarag/claudeck-marketplace).
|
|
264
262
|
|
|
265
263
|
**Create your own** — drop files in `~/.claudeck/plugins/<name>/` (persists across upgrades) with `client.js` and optionally `server.js`, `client.css`, `config.json`. No fork needed. See [CONFIGURATION.md](docs/CONFIGURATION.md#user-plugins) for details.
|
|
266
264
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claudeck",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A browser-based UI for Claude Code — chat, run workflows, manage MCP servers, track costs, and orchestrate autonomous agents from a local web interface. Installable as a PWA.",
|
|
6
6
|
"main": "server.js",
|
|
@@ -1,24 +1,4 @@
|
|
|
1
|
-
/* ──
|
|
2
|
-
|
|
3
|
-
/* Subtle scanline overlay — dark mode only */
|
|
4
|
-
body::after {
|
|
5
|
-
content: "";
|
|
6
|
-
position: fixed;
|
|
7
|
-
inset: 0;
|
|
8
|
-
background: repeating-linear-gradient(
|
|
9
|
-
0deg,
|
|
10
|
-
transparent,
|
|
11
|
-
transparent 2px,
|
|
12
|
-
rgba(0, 0, 0, 0.025) 2px,
|
|
13
|
-
rgba(0, 0, 0, 0.025) 4px
|
|
14
|
-
);
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
z-index: 9999;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
html[data-theme="light"] body::after {
|
|
20
|
-
display: none;
|
|
21
|
-
}
|
|
1
|
+
/* ── Theme Enhancements ──────────────────────────────── */
|
|
22
2
|
|
|
23
3
|
/* Active session glow effect */
|
|
24
4
|
.session-list li.active {
|
|
@@ -89,6 +69,11 @@ html[data-theme="light"] body::after {
|
|
|
89
69
|
50% { transform: translateY(-6px); }
|
|
90
70
|
}
|
|
91
71
|
|
|
72
|
+
@keyframes editorialShimmer {
|
|
73
|
+
0% { transform: translateX(-100%); }
|
|
74
|
+
100% { transform: translateX(200%); }
|
|
75
|
+
}
|
|
76
|
+
|
|
92
77
|
/* ── Scrollbar ────────────────────────────────────────── */
|
|
93
78
|
::-webkit-scrollbar { width: 5px; }
|
|
94
79
|
::-webkit-scrollbar-track { background: transparent; }
|
|
@@ -31,8 +31,10 @@
|
|
|
31
31
|
--font-display: "Chakra Petch", "Rajdhani", "Exo 2", sans-serif;
|
|
32
32
|
--font-sans: "Outfit", "DM Sans", "Segoe UI", sans-serif;
|
|
33
33
|
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
|
|
34
|
+
--font-editorial: "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
34
35
|
|
|
35
36
|
/* Spacing & Sizing */
|
|
37
|
+
--space-block: 12px;
|
|
36
38
|
--radius: 4px;
|
|
37
39
|
--radius-md: 8px;
|
|
38
40
|
--radius-lg: 12px;
|
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
/* ── Message Queue ────────────────────────────────────── */
|
|
2
|
+
|
|
3
|
+
/* Chip strip container (above textarea) */
|
|
4
|
+
.mq-chip-strip {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-wrap: wrap;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
|
+
padding: 10px 4px 8px;
|
|
10
|
+
margin-bottom: 2px;
|
|
11
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.mq-chip-strip:empty,
|
|
15
|
+
.mq-chip-strip.hidden {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Individual chip */
|
|
20
|
+
.mq-chip {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: 6px;
|
|
24
|
+
padding: 6px 8px 6px 10px;
|
|
25
|
+
background: linear-gradient(135deg, var(--accent-dim), rgba(51, 209, 122, 0.04));
|
|
26
|
+
border: 1px solid var(--border);
|
|
27
|
+
border-radius: 6px;
|
|
28
|
+
font-size: 12px;
|
|
29
|
+
font-family: var(--font-sans);
|
|
30
|
+
color: var(--text);
|
|
31
|
+
max-width: 320px;
|
|
32
|
+
animation: mqChipIn 0.2s var(--ease-out-expo);
|
|
33
|
+
transition: all 0.2s var(--ease-smooth);
|
|
34
|
+
cursor: default;
|
|
35
|
+
position: relative;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mq-chip:hover {
|
|
39
|
+
border-color: var(--accent-mid);
|
|
40
|
+
background: linear-gradient(135deg, rgba(51, 209, 122, 0.1), var(--accent-dim));
|
|
41
|
+
box-shadow: 0 2px 12px rgba(51, 209, 122, 0.08);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.mq-chip.dragging {
|
|
45
|
+
opacity: 0.35;
|
|
46
|
+
transform: scale(0.96);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@keyframes mqChipIn {
|
|
50
|
+
from { opacity: 0; transform: translateY(4px) scale(0.95); }
|
|
51
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Queue step number */
|
|
55
|
+
.mq-chip-num {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
width: 18px;
|
|
60
|
+
height: 18px;
|
|
61
|
+
border-radius: 50%;
|
|
62
|
+
background: var(--accent-mid);
|
|
63
|
+
color: var(--accent);
|
|
64
|
+
font-size: 10px;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
font-family: var(--font-mono);
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
line-height: 1;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Drag handle */
|
|
72
|
+
.mq-chip-handle {
|
|
73
|
+
cursor: grab;
|
|
74
|
+
opacity: 0.25;
|
|
75
|
+
font-size: 11px;
|
|
76
|
+
line-height: 1;
|
|
77
|
+
user-select: none;
|
|
78
|
+
flex-shrink: 0;
|
|
79
|
+
transition: opacity 0.2s;
|
|
80
|
+
color: var(--text-secondary);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.mq-chip:hover .mq-chip-handle {
|
|
84
|
+
opacity: 0.5;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.mq-chip-handle:hover {
|
|
88
|
+
opacity: 0.9 !important;
|
|
89
|
+
color: var(--accent);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.mq-chip-handle:active {
|
|
93
|
+
cursor: grabbing;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Chip text (truncated) */
|
|
97
|
+
.mq-chip-text {
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
text-overflow: ellipsis;
|
|
100
|
+
white-space: nowrap;
|
|
101
|
+
max-width: 200px;
|
|
102
|
+
flex: 1;
|
|
103
|
+
min-width: 0;
|
|
104
|
+
color: var(--text-secondary);
|
|
105
|
+
font-size: 12px;
|
|
106
|
+
letter-spacing: 0.01em;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Chip action buttons */
|
|
110
|
+
.mq-chip-edit,
|
|
111
|
+
.mq-chip-remove {
|
|
112
|
+
background: none;
|
|
113
|
+
border: none;
|
|
114
|
+
color: var(--text-dim);
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
padding: 2px 3px;
|
|
117
|
+
line-height: 1;
|
|
118
|
+
opacity: 0;
|
|
119
|
+
transition: all 0.15s;
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
font-size: 12px;
|
|
122
|
+
border-radius: 3px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.mq-chip:hover .mq-chip-edit,
|
|
126
|
+
.mq-chip:hover .mq-chip-remove {
|
|
127
|
+
opacity: 0.6;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.mq-chip-edit:hover {
|
|
131
|
+
opacity: 1 !important;
|
|
132
|
+
color: var(--accent);
|
|
133
|
+
background: var(--accent-dim);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.mq-chip-remove:hover {
|
|
137
|
+
opacity: 1 !important;
|
|
138
|
+
color: var(--error);
|
|
139
|
+
background: rgba(237, 51, 59, 0.08);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Drop indicator (placeholder during drag) */
|
|
143
|
+
.mq-drop-indicator {
|
|
144
|
+
width: 2px;
|
|
145
|
+
height: 28px;
|
|
146
|
+
background: var(--accent);
|
|
147
|
+
border-radius: 1px;
|
|
148
|
+
flex-shrink: 0;
|
|
149
|
+
box-shadow: 0 0 8px var(--accent-glow);
|
|
150
|
+
animation: mqChipIn 0.1s ease-out;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Queue count badge */
|
|
154
|
+
.mq-chip-count {
|
|
155
|
+
font-size: 10px;
|
|
156
|
+
font-family: var(--font-mono);
|
|
157
|
+
color: var(--text-dim);
|
|
158
|
+
opacity: 0.5;
|
|
159
|
+
white-space: nowrap;
|
|
160
|
+
margin-left: auto;
|
|
161
|
+
letter-spacing: 0.05em;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Paused indicator */
|
|
165
|
+
.mq-queue-paused {
|
|
166
|
+
display: inline-flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
gap: 6px;
|
|
169
|
+
font-size: 10px;
|
|
170
|
+
font-family: var(--font-mono);
|
|
171
|
+
color: var(--warning);
|
|
172
|
+
opacity: 0.85;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
margin-left: auto;
|
|
175
|
+
letter-spacing: 0.03em;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.mq-resume-btn {
|
|
179
|
+
background: none;
|
|
180
|
+
border: 1px solid var(--accent-mid);
|
|
181
|
+
color: var(--accent);
|
|
182
|
+
font-size: 10px;
|
|
183
|
+
font-family: var(--font-mono);
|
|
184
|
+
padding: 2px 10px;
|
|
185
|
+
border-radius: 4px;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
transition: all 0.2s var(--ease-smooth);
|
|
188
|
+
letter-spacing: 0.03em;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.mq-resume-btn:hover {
|
|
192
|
+
background: var(--accent-dim);
|
|
193
|
+
border-color: var(--accent);
|
|
194
|
+
box-shadow: 0 0 8px var(--accent-glow);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* ── Inline Editor Popover ───────────────────────────── */
|
|
198
|
+
.mq-editor-popover {
|
|
199
|
+
position: absolute;
|
|
200
|
+
bottom: calc(100% + 6px);
|
|
201
|
+
left: 0;
|
|
202
|
+
z-index: 100;
|
|
203
|
+
width: 340px;
|
|
204
|
+
background: var(--bg-elevated);
|
|
205
|
+
border: 1px solid var(--border);
|
|
206
|
+
border-radius: var(--radius-md);
|
|
207
|
+
box-shadow: var(--shadow-md), 0 0 0 1px var(--border-subtle);
|
|
208
|
+
padding: 10px;
|
|
209
|
+
animation: mqEditorIn 0.2s var(--ease-out-expo);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@keyframes mqEditorIn {
|
|
213
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
214
|
+
to { opacity: 1; transform: translateY(0); }
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.mq-editor-textarea {
|
|
218
|
+
width: 100%;
|
|
219
|
+
background: var(--bg);
|
|
220
|
+
border: 1px solid var(--border);
|
|
221
|
+
border-radius: 6px;
|
|
222
|
+
padding: 10px 12px;
|
|
223
|
+
color: var(--text);
|
|
224
|
+
font-size: 12px;
|
|
225
|
+
font-family: var(--font-mono);
|
|
226
|
+
resize: vertical;
|
|
227
|
+
outline: none;
|
|
228
|
+
min-height: 60px;
|
|
229
|
+
max-height: 150px;
|
|
230
|
+
line-height: 1.6;
|
|
231
|
+
box-sizing: border-box;
|
|
232
|
+
transition: border-color 0.2s;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.mq-editor-textarea:focus {
|
|
236
|
+
border-color: var(--accent);
|
|
237
|
+
box-shadow: 0 0 0 1px var(--accent-dim);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.mq-editor-actions {
|
|
241
|
+
display: flex;
|
|
242
|
+
justify-content: space-between;
|
|
243
|
+
align-items: center;
|
|
244
|
+
gap: 6px;
|
|
245
|
+
margin-top: 8px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.mq-editor-hint {
|
|
249
|
+
font-size: 10px;
|
|
250
|
+
font-family: var(--font-mono);
|
|
251
|
+
color: var(--text-dim);
|
|
252
|
+
opacity: 0.6;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.mq-editor-buttons {
|
|
256
|
+
display: flex;
|
|
257
|
+
gap: 6px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.mq-editor-save,
|
|
261
|
+
.mq-editor-cancel {
|
|
262
|
+
font-size: 11px;
|
|
263
|
+
font-family: var(--font-sans);
|
|
264
|
+
font-weight: 500;
|
|
265
|
+
padding: 4px 14px;
|
|
266
|
+
border-radius: 5px;
|
|
267
|
+
border: 1px solid var(--border);
|
|
268
|
+
cursor: pointer;
|
|
269
|
+
transition: all 0.15s var(--ease-smooth);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.mq-editor-save {
|
|
273
|
+
background: var(--accent-dim);
|
|
274
|
+
color: var(--accent);
|
|
275
|
+
border-color: var(--accent-mid);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.mq-editor-save:hover {
|
|
279
|
+
background: var(--accent-mid);
|
|
280
|
+
box-shadow: 0 0 12px var(--accent-glow);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.mq-editor-cancel {
|
|
284
|
+
background: none;
|
|
285
|
+
color: var(--text-secondary);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.mq-editor-cancel:hover {
|
|
289
|
+
background: var(--bg-secondary);
|
|
290
|
+
border-color: var(--text-dim);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* ── Stop Confirmation Modal ─────────────────────────── */
|
|
294
|
+
.queue-stop-modal {
|
|
295
|
+
max-width: 440px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.queue-stop-text {
|
|
299
|
+
color: var(--text-secondary);
|
|
300
|
+
font-size: 13px;
|
|
301
|
+
margin: 0 0 12px;
|
|
302
|
+
line-height: 1.5;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.queue-stop-actions {
|
|
306
|
+
display: flex;
|
|
307
|
+
gap: 8px;
|
|
308
|
+
justify-content: flex-end;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.queue-stop-terminate {
|
|
312
|
+
color: var(--error) !important;
|
|
313
|
+
border-color: var(--error) !important;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.queue-stop-terminate:hover {
|
|
317
|
+
background: rgba(237, 51, 59, 0.1) !important;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.mq-queue-preview {
|
|
321
|
+
display: flex;
|
|
322
|
+
flex-wrap: wrap;
|
|
323
|
+
gap: 4px;
|
|
324
|
+
padding: 8px;
|
|
325
|
+
margin-bottom: 12px;
|
|
326
|
+
background: var(--bg);
|
|
327
|
+
border: 1px solid var(--border);
|
|
328
|
+
border-radius: 4px;
|
|
329
|
+
max-height: 80px;
|
|
330
|
+
overflow-y: auto;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.mq-queue-preview:empty {
|
|
334
|
+
display: none;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.mq-queue-preview-item {
|
|
338
|
+
font-size: 11px;
|
|
339
|
+
font-family: var(--font-mono);
|
|
340
|
+
color: var(--text-dim);
|
|
341
|
+
padding: 2px 8px;
|
|
342
|
+
background: var(--accent-dim);
|
|
343
|
+
border-radius: 3px;
|
|
344
|
+
max-width: 200px;
|
|
345
|
+
overflow: hidden;
|
|
346
|
+
text-overflow: ellipsis;
|
|
347
|
+
white-space: nowrap;
|
|
348
|
+
}
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
.cli-output {
|
|
71
71
|
background: var(--bg-secondary);
|
|
72
72
|
border: 1px solid var(--border-subtle);
|
|
73
|
-
border-radius:
|
|
74
|
-
margin:
|
|
73
|
+
border-radius: var(--radius-lg);
|
|
74
|
+
margin: 6px 0;
|
|
75
75
|
overflow: hidden;
|
|
76
76
|
}
|
|
77
77
|
|
|
@@ -200,9 +200,9 @@
|
|
|
200
200
|
.diff-view {
|
|
201
201
|
background: var(--bg-deep);
|
|
202
202
|
border: 1px solid var(--border);
|
|
203
|
-
border-radius: var(--radius);
|
|
203
|
+
border-radius: var(--radius-lg);
|
|
204
204
|
overflow: hidden;
|
|
205
|
-
margin:
|
|
205
|
+
margin: 6px 0;
|
|
206
206
|
font-family: var(--font-mono);
|
|
207
207
|
font-size: 11px;
|
|
208
208
|
}
|