@hmduc16031996/claude-mb-bridge 2.4.0 → 2.4.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.
- package/dist/index.js +2 -2
- package/dist/server.d.ts +1 -1
- package/dist/server.js +58 -7
- package/package.json +1 -1
- package/public/app.js +2118 -290
- package/public/index.html +204 -5
- package/public/styles.css +5 -5
package/public/index.html
CHANGED
|
@@ -27,8 +27,49 @@
|
|
|
27
27
|
</head>
|
|
28
28
|
<body>
|
|
29
29
|
<div id="app">
|
|
30
|
+
<!-- Auth Screen -->
|
|
31
|
+
<div id="auth-screen" class="screen active">
|
|
32
|
+
<div class="auth-container">
|
|
33
|
+
<!-- Logo -->
|
|
34
|
+
<div class="auth-logo" aria-hidden="true">
|
|
35
|
+
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<rect width="64" height="64" rx="12" fill="rgba(88, 166, 255, 0.1)"/>
|
|
37
|
+
<rect x="1" y="1" width="62" height="62" rx="11" stroke="rgba(88, 166, 255, 0.3)" stroke-width="1"/>
|
|
38
|
+
<text x="32" y="44" font-size="32" font-weight="600" text-anchor="middle" fill="#58a6ff" font-family="system-ui, sans-serif">C</text>
|
|
39
|
+
</svg>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<h1>Claude Code Remote</h1>
|
|
43
|
+
<p class="subtitle">Connect to your local Claude Code session from anywhere</p>
|
|
44
|
+
|
|
45
|
+
<form id="auth-form" onsubmit="return false;">
|
|
46
|
+
<input
|
|
47
|
+
type="text"
|
|
48
|
+
id="token-input"
|
|
49
|
+
placeholder="Enter auth token"
|
|
50
|
+
autocomplete="off"
|
|
51
|
+
autocapitalize="off"
|
|
52
|
+
autocorrect="off"
|
|
53
|
+
spellcheck="false"
|
|
54
|
+
aria-label="Authentication token"
|
|
55
|
+
>
|
|
56
|
+
<button id="connect-btn" class="btn-primary" type="submit">
|
|
57
|
+
<span class="btn-text">Connect</span>
|
|
58
|
+
<span class="btn-loading" aria-hidden="true">
|
|
59
|
+
<svg class="spinner" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
60
|
+
<circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/>
|
|
61
|
+
<path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
62
|
+
</svg>
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
</form>
|
|
66
|
+
|
|
67
|
+
<p id="auth-error" class="error" role="alert" aria-live="polite"></p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
30
71
|
<!-- Main Screen -->
|
|
31
|
-
<div id="main-screen" class="screen
|
|
72
|
+
<div id="main-screen" class="screen">
|
|
32
73
|
<!-- Collapsible Header -->
|
|
33
74
|
<header id="header" role="toolbar" aria-label="Session controls">
|
|
34
75
|
<div class="header-left">
|
|
@@ -122,6 +163,159 @@
|
|
|
122
163
|
|
|
123
164
|
</div>
|
|
124
165
|
|
|
166
|
+
<!-- Preview Screen -->
|
|
167
|
+
<div id="preview-screen" class="screen">
|
|
168
|
+
<header role="toolbar" aria-label="Preview controls">
|
|
169
|
+
<button id="back-btn" class="btn-icon" title="Back to terminal" aria-label="Back to terminal">
|
|
170
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
171
|
+
<line x1="19" y1="12" x2="5" y2="12"/>
|
|
172
|
+
<polyline points="12 19 5 12 12 5"/>
|
|
173
|
+
</svg>
|
|
174
|
+
</button>
|
|
175
|
+
<select id="port-select" aria-label="Select port to preview">
|
|
176
|
+
<option value="">Select port...</option>
|
|
177
|
+
</select>
|
|
178
|
+
<input
|
|
179
|
+
type="number"
|
|
180
|
+
id="port-input"
|
|
181
|
+
placeholder="Port"
|
|
182
|
+
min="1"
|
|
183
|
+
max="65535"
|
|
184
|
+
aria-label="Enter port number"
|
|
185
|
+
>
|
|
186
|
+
<button id="go-port-btn" class="btn-icon" title="Go to port" aria-label="Go to port">
|
|
187
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
188
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
189
|
+
<polyline points="12 5 19 12 12 19"/>
|
|
190
|
+
</svg>
|
|
191
|
+
</button>
|
|
192
|
+
<button id="refresh-preview-btn" class="btn-icon" title="Refresh preview" aria-label="Refresh preview">
|
|
193
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
194
|
+
<polyline points="23 4 23 10 17 10"/>
|
|
195
|
+
<polyline points="1 20 1 14 7 14"/>
|
|
196
|
+
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
|
|
197
|
+
</svg>
|
|
198
|
+
</button>
|
|
199
|
+
</header>
|
|
200
|
+
<div id="preview-address-bar" class="preview-address-bar">
|
|
201
|
+
<input
|
|
202
|
+
type="text"
|
|
203
|
+
id="address-input"
|
|
204
|
+
placeholder="Enter path (e.g., /dashboard)"
|
|
205
|
+
autocomplete="off"
|
|
206
|
+
autocapitalize="off"
|
|
207
|
+
autocorrect="off"
|
|
208
|
+
spellcheck="false"
|
|
209
|
+
aria-label="URL path"
|
|
210
|
+
>
|
|
211
|
+
<button id="address-go-btn" class="btn-icon" title="Navigate" aria-label="Navigate to path">
|
|
212
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
213
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
214
|
+
<polyline points="12 5 19 12 12 19"/>
|
|
215
|
+
</svg>
|
|
216
|
+
</button>
|
|
217
|
+
</div>
|
|
218
|
+
<iframe id="preview-frame" src="about:blank" title="Port preview"></iframe>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<!-- Schedules Screen -->
|
|
222
|
+
<div id="schedules-screen" class="screen">
|
|
223
|
+
<header class="schedules-header" role="toolbar" aria-label="Schedule controls">
|
|
224
|
+
<button id="schedules-back-btn" class="btn-icon" title="Back to terminal" aria-label="Back to terminal">
|
|
225
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
226
|
+
<line x1="19" y1="12" x2="5" y2="12"/>
|
|
227
|
+
<polyline points="12 19 5 12 12 5"/>
|
|
228
|
+
</svg>
|
|
229
|
+
</button>
|
|
230
|
+
<h2 class="schedules-title">Scheduled Tasks</h2>
|
|
231
|
+
<span id="schedules-header-badge" class="schedule-badge hidden">0</span>
|
|
232
|
+
<div style="flex:1"></div>
|
|
233
|
+
<button id="new-schedule-btn" class="btn-primary btn-small" aria-label="New schedule">+ New</button>
|
|
234
|
+
</header>
|
|
235
|
+
<div id="schedules-list" class="schedules-list">
|
|
236
|
+
<div id="schedules-empty" class="empty-state">
|
|
237
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
238
|
+
<circle cx="12" cy="12" r="10"/>
|
|
239
|
+
<polyline points="12 6 12 12 16 14"/>
|
|
240
|
+
</svg>
|
|
241
|
+
<p>No scheduled tasks yet. Create one to run Claude on a recurring schedule.</p>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<!-- New Schedule Modal -->
|
|
247
|
+
<div id="new-schedule-modal" class="modal hidden" role="dialog" aria-labelledby="new-schedule-title" aria-modal="true">
|
|
248
|
+
<div class="modal-content">
|
|
249
|
+
<h2 id="new-schedule-title">New Scheduled Task</h2>
|
|
250
|
+
<p class="modal-description">Create a recurring task that runs Claude headlessly.</p>
|
|
251
|
+
<div class="schedule-form">
|
|
252
|
+
<input
|
|
253
|
+
type="text"
|
|
254
|
+
id="schedule-name-input"
|
|
255
|
+
placeholder="Task name (e.g. Daily code review)"
|
|
256
|
+
autocomplete="off"
|
|
257
|
+
autocapitalize="off"
|
|
258
|
+
spellcheck="false"
|
|
259
|
+
aria-label="Schedule name"
|
|
260
|
+
>
|
|
261
|
+
<textarea
|
|
262
|
+
id="schedule-prompt-input"
|
|
263
|
+
placeholder="Prompt (e.g. Review open TODOs and summarize)"
|
|
264
|
+
rows="3"
|
|
265
|
+
autocomplete="off"
|
|
266
|
+
autocapitalize="off"
|
|
267
|
+
spellcheck="false"
|
|
268
|
+
aria-label="Schedule prompt"
|
|
269
|
+
></textarea>
|
|
270
|
+
<div class="autocomplete-wrapper">
|
|
271
|
+
<input
|
|
272
|
+
type="text"
|
|
273
|
+
id="schedule-cwd-input"
|
|
274
|
+
placeholder="Working directory (absolute path)"
|
|
275
|
+
autocomplete="off"
|
|
276
|
+
autocapitalize="off"
|
|
277
|
+
autocorrect="off"
|
|
278
|
+
spellcheck="false"
|
|
279
|
+
aria-label="Working directory path"
|
|
280
|
+
aria-autocomplete="list"
|
|
281
|
+
aria-controls="schedule-cwd-suggestions"
|
|
282
|
+
>
|
|
283
|
+
<ul id="schedule-cwd-suggestions" class="suggestions hidden" role="listbox"></ul>
|
|
284
|
+
</div>
|
|
285
|
+
<input
|
|
286
|
+
type="text"
|
|
287
|
+
id="schedule-text-input"
|
|
288
|
+
placeholder="e.g. every weekday at 9am, twice a week, daily at 3pm..."
|
|
289
|
+
autocomplete="off"
|
|
290
|
+
autocapitalize="off"
|
|
291
|
+
autocorrect="off"
|
|
292
|
+
spellcheck="false"
|
|
293
|
+
aria-label="Schedule frequency"
|
|
294
|
+
>
|
|
295
|
+
</div>
|
|
296
|
+
<div class="modal-actions">
|
|
297
|
+
<button id="cancel-schedule-btn" class="btn-secondary">Cancel</button>
|
|
298
|
+
<button id="create-schedule-btn" class="btn-primary">Create</button>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
|
|
303
|
+
<!-- Run Log Modal -->
|
|
304
|
+
<div id="run-log-modal" class="modal hidden" role="dialog" aria-labelledby="run-log-title" aria-modal="true">
|
|
305
|
+
<div class="modal-content run-log-content">
|
|
306
|
+
<div class="modal-header">
|
|
307
|
+
<h2 id="run-log-title">Run Log</h2>
|
|
308
|
+
<button id="close-run-log-btn" class="btn-icon" aria-label="Close">
|
|
309
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
310
|
+
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
311
|
+
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
312
|
+
</svg>
|
|
313
|
+
</button>
|
|
314
|
+
</div>
|
|
315
|
+
<pre id="run-log-pre" class="run-log-pre"></pre>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
125
319
|
<!-- New Session Modal -->
|
|
126
320
|
<div id="new-session-modal" class="modal hidden" role="dialog" aria-labelledby="modal-title" aria-modal="true">
|
|
127
321
|
<div class="modal-content">
|
|
@@ -137,6 +331,8 @@
|
|
|
137
331
|
autocorrect="off"
|
|
138
332
|
spellcheck="false"
|
|
139
333
|
aria-label="Working directory path"
|
|
334
|
+
aria-autocomplete="list"
|
|
335
|
+
aria-controls="cwd-suggestions"
|
|
140
336
|
>
|
|
141
337
|
<ul id="cwd-suggestions" class="suggestions hidden" role="listbox"></ul>
|
|
142
338
|
</div>
|
|
@@ -161,15 +357,18 @@
|
|
|
161
357
|
</div>
|
|
162
358
|
<div class="setting-row">
|
|
163
359
|
<div class="setting-info">
|
|
164
|
-
<label>
|
|
165
|
-
<p class="setting-description">
|
|
360
|
+
<label for="notify-toggle">Input notifications</label>
|
|
361
|
+
<p class="setting-description">Get notified when any session needs input</p>
|
|
166
362
|
</div>
|
|
167
|
-
<
|
|
363
|
+
<button id="notify-toggle" class="toggle" role="switch" aria-checked="false">
|
|
364
|
+
<span class="toggle-track"></span>
|
|
365
|
+
<span class="toggle-thumb"></span>
|
|
366
|
+
</button>
|
|
168
367
|
</div>
|
|
169
368
|
</div>
|
|
170
369
|
</div>
|
|
171
|
-
|
|
172
370
|
</div>
|
|
371
|
+
|
|
173
372
|
<script src="/app.js"></script>
|
|
174
373
|
</body>
|
|
175
374
|
</html>
|
package/public/styles.css
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
6
|
/* GitHub Dark Theme Base */
|
|
7
|
-
--bg-deep: #
|
|
8
|
-
--bg-primary: #
|
|
9
|
-
--bg-elevated: #
|
|
10
|
-
--bg-surface: #
|
|
11
|
-
--bg-hover: #
|
|
7
|
+
--bg-deep: #0d1117;
|
|
8
|
+
--bg-primary: #161b22;
|
|
9
|
+
--bg-elevated: #1c2128;
|
|
10
|
+
--bg-surface: #21262d;
|
|
11
|
+
--bg-hover: #30363d;
|
|
12
12
|
|
|
13
13
|
/* Text hierarchy */
|
|
14
14
|
--text-primary: #f0f6fc;
|