@hmduc16031996/claude-mb-bridge 2.4.0 → 2.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/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/android-chrome-192x192.png +0 -0
- package/public/android-chrome-512x512.png +0 -0
- package/public/app.js +2120 -292
- package/public/apple-touch-icon.png +0 -0
- package/public/favicon-32x32.png +0 -0
- package/public/favicon.ico +0 -0
- package/public/ic_logo.png +0 -0
- package/public/index.html +204 -8
- package/public/manifest.json +14 -8
- package/public/styles.css +15 -15
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/public/index.html
CHANGED
|
@@ -6,12 +6,13 @@
|
|
|
6
6
|
<meta name="mobile-web-app-capable" content="yes">
|
|
7
7
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
8
8
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
9
|
-
<meta name="theme-color" content="#
|
|
9
|
+
<meta name="theme-color" content="#1a1a1a">
|
|
10
10
|
<meta name="description" content="Remote access to Claude Code sessions from any device">
|
|
11
11
|
|
|
12
12
|
<!-- Favicon -->
|
|
13
|
-
<link rel="icon"
|
|
14
|
-
<link rel="
|
|
13
|
+
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
15
|
+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
15
16
|
|
|
16
17
|
<title>Claude Code Remote</title>
|
|
17
18
|
<link rel="manifest" href="/manifest.json">
|
|
@@ -27,8 +28,45 @@
|
|
|
27
28
|
</head>
|
|
28
29
|
<body>
|
|
29
30
|
<div id="app">
|
|
31
|
+
<!-- Auth Screen -->
|
|
32
|
+
<div id="auth-screen" class="screen active">
|
|
33
|
+
<div class="auth-container">
|
|
34
|
+
<!-- Logo -->
|
|
35
|
+
<div class="auth-logo" aria-hidden="true">
|
|
36
|
+
<img src="/ic_logo.png" width="64" height="64" alt="Claude Code" style="border-radius:12px;">
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<h1>Claude Code Remote</h1>
|
|
40
|
+
<p class="subtitle">Connect to your local Claude Code session from anywhere</p>
|
|
41
|
+
|
|
42
|
+
<form id="auth-form" onsubmit="return false;">
|
|
43
|
+
<input
|
|
44
|
+
type="text"
|
|
45
|
+
id="token-input"
|
|
46
|
+
placeholder="Enter auth token"
|
|
47
|
+
autocomplete="off"
|
|
48
|
+
autocapitalize="off"
|
|
49
|
+
autocorrect="off"
|
|
50
|
+
spellcheck="false"
|
|
51
|
+
aria-label="Authentication token"
|
|
52
|
+
>
|
|
53
|
+
<button id="connect-btn" class="btn-primary" type="submit">
|
|
54
|
+
<span class="btn-text">Connect</span>
|
|
55
|
+
<span class="btn-loading" aria-hidden="true">
|
|
56
|
+
<svg class="spinner" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
57
|
+
<circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/>
|
|
58
|
+
<path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
59
|
+
</svg>
|
|
60
|
+
</span>
|
|
61
|
+
</button>
|
|
62
|
+
</form>
|
|
63
|
+
|
|
64
|
+
<p id="auth-error" class="error" role="alert" aria-live="polite"></p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
30
68
|
<!-- Main Screen -->
|
|
31
|
-
<div id="main-screen" class="screen
|
|
69
|
+
<div id="main-screen" class="screen">
|
|
32
70
|
<!-- Collapsible Header -->
|
|
33
71
|
<header id="header" role="toolbar" aria-label="Session controls">
|
|
34
72
|
<div class="header-left">
|
|
@@ -122,6 +160,159 @@
|
|
|
122
160
|
|
|
123
161
|
</div>
|
|
124
162
|
|
|
163
|
+
<!-- Preview Screen -->
|
|
164
|
+
<div id="preview-screen" class="screen">
|
|
165
|
+
<header role="toolbar" aria-label="Preview controls">
|
|
166
|
+
<button id="back-btn" class="btn-icon" title="Back to terminal" aria-label="Back to terminal">
|
|
167
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
168
|
+
<line x1="19" y1="12" x2="5" y2="12"/>
|
|
169
|
+
<polyline points="12 19 5 12 12 5"/>
|
|
170
|
+
</svg>
|
|
171
|
+
</button>
|
|
172
|
+
<select id="port-select" aria-label="Select port to preview">
|
|
173
|
+
<option value="">Select port...</option>
|
|
174
|
+
</select>
|
|
175
|
+
<input
|
|
176
|
+
type="number"
|
|
177
|
+
id="port-input"
|
|
178
|
+
placeholder="Port"
|
|
179
|
+
min="1"
|
|
180
|
+
max="65535"
|
|
181
|
+
aria-label="Enter port number"
|
|
182
|
+
>
|
|
183
|
+
<button id="go-port-btn" class="btn-icon" title="Go to port" aria-label="Go to port">
|
|
184
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
185
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
186
|
+
<polyline points="12 5 19 12 12 19"/>
|
|
187
|
+
</svg>
|
|
188
|
+
</button>
|
|
189
|
+
<button id="refresh-preview-btn" class="btn-icon" title="Refresh preview" aria-label="Refresh preview">
|
|
190
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
191
|
+
<polyline points="23 4 23 10 17 10"/>
|
|
192
|
+
<polyline points="1 20 1 14 7 14"/>
|
|
193
|
+
<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"/>
|
|
194
|
+
</svg>
|
|
195
|
+
</button>
|
|
196
|
+
</header>
|
|
197
|
+
<div id="preview-address-bar" class="preview-address-bar">
|
|
198
|
+
<input
|
|
199
|
+
type="text"
|
|
200
|
+
id="address-input"
|
|
201
|
+
placeholder="Enter path (e.g., /dashboard)"
|
|
202
|
+
autocomplete="off"
|
|
203
|
+
autocapitalize="off"
|
|
204
|
+
autocorrect="off"
|
|
205
|
+
spellcheck="false"
|
|
206
|
+
aria-label="URL path"
|
|
207
|
+
>
|
|
208
|
+
<button id="address-go-btn" class="btn-icon" title="Navigate" aria-label="Navigate to path">
|
|
209
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
210
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
211
|
+
<polyline points="12 5 19 12 12 19"/>
|
|
212
|
+
</svg>
|
|
213
|
+
</button>
|
|
214
|
+
</div>
|
|
215
|
+
<iframe id="preview-frame" src="about:blank" title="Port preview"></iframe>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<!-- Schedules Screen -->
|
|
219
|
+
<div id="schedules-screen" class="screen">
|
|
220
|
+
<header class="schedules-header" role="toolbar" aria-label="Schedule controls">
|
|
221
|
+
<button id="schedules-back-btn" class="btn-icon" title="Back to terminal" aria-label="Back to terminal">
|
|
222
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
223
|
+
<line x1="19" y1="12" x2="5" y2="12"/>
|
|
224
|
+
<polyline points="12 19 5 12 12 5"/>
|
|
225
|
+
</svg>
|
|
226
|
+
</button>
|
|
227
|
+
<h2 class="schedules-title">Scheduled Tasks</h2>
|
|
228
|
+
<span id="schedules-header-badge" class="schedule-badge hidden">0</span>
|
|
229
|
+
<div style="flex:1"></div>
|
|
230
|
+
<button id="new-schedule-btn" class="btn-primary btn-small" aria-label="New schedule">+ New</button>
|
|
231
|
+
</header>
|
|
232
|
+
<div id="schedules-list" class="schedules-list">
|
|
233
|
+
<div id="schedules-empty" class="empty-state">
|
|
234
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
235
|
+
<circle cx="12" cy="12" r="10"/>
|
|
236
|
+
<polyline points="12 6 12 12 16 14"/>
|
|
237
|
+
</svg>
|
|
238
|
+
<p>No scheduled tasks yet. Create one to run Claude on a recurring schedule.</p>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<!-- New Schedule Modal -->
|
|
244
|
+
<div id="new-schedule-modal" class="modal hidden" role="dialog" aria-labelledby="new-schedule-title" aria-modal="true">
|
|
245
|
+
<div class="modal-content">
|
|
246
|
+
<h2 id="new-schedule-title">New Scheduled Task</h2>
|
|
247
|
+
<p class="modal-description">Create a recurring task that runs Claude headlessly.</p>
|
|
248
|
+
<div class="schedule-form">
|
|
249
|
+
<input
|
|
250
|
+
type="text"
|
|
251
|
+
id="schedule-name-input"
|
|
252
|
+
placeholder="Task name (e.g. Daily code review)"
|
|
253
|
+
autocomplete="off"
|
|
254
|
+
autocapitalize="off"
|
|
255
|
+
spellcheck="false"
|
|
256
|
+
aria-label="Schedule name"
|
|
257
|
+
>
|
|
258
|
+
<textarea
|
|
259
|
+
id="schedule-prompt-input"
|
|
260
|
+
placeholder="Prompt (e.g. Review open TODOs and summarize)"
|
|
261
|
+
rows="3"
|
|
262
|
+
autocomplete="off"
|
|
263
|
+
autocapitalize="off"
|
|
264
|
+
spellcheck="false"
|
|
265
|
+
aria-label="Schedule prompt"
|
|
266
|
+
></textarea>
|
|
267
|
+
<div class="autocomplete-wrapper">
|
|
268
|
+
<input
|
|
269
|
+
type="text"
|
|
270
|
+
id="schedule-cwd-input"
|
|
271
|
+
placeholder="Working directory (absolute path)"
|
|
272
|
+
autocomplete="off"
|
|
273
|
+
autocapitalize="off"
|
|
274
|
+
autocorrect="off"
|
|
275
|
+
spellcheck="false"
|
|
276
|
+
aria-label="Working directory path"
|
|
277
|
+
aria-autocomplete="list"
|
|
278
|
+
aria-controls="schedule-cwd-suggestions"
|
|
279
|
+
>
|
|
280
|
+
<ul id="schedule-cwd-suggestions" class="suggestions hidden" role="listbox"></ul>
|
|
281
|
+
</div>
|
|
282
|
+
<input
|
|
283
|
+
type="text"
|
|
284
|
+
id="schedule-text-input"
|
|
285
|
+
placeholder="e.g. every weekday at 9am, twice a week, daily at 3pm..."
|
|
286
|
+
autocomplete="off"
|
|
287
|
+
autocapitalize="off"
|
|
288
|
+
autocorrect="off"
|
|
289
|
+
spellcheck="false"
|
|
290
|
+
aria-label="Schedule frequency"
|
|
291
|
+
>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="modal-actions">
|
|
294
|
+
<button id="cancel-schedule-btn" class="btn-secondary">Cancel</button>
|
|
295
|
+
<button id="create-schedule-btn" class="btn-primary">Create</button>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<!-- Run Log Modal -->
|
|
301
|
+
<div id="run-log-modal" class="modal hidden" role="dialog" aria-labelledby="run-log-title" aria-modal="true">
|
|
302
|
+
<div class="modal-content run-log-content">
|
|
303
|
+
<div class="modal-header">
|
|
304
|
+
<h2 id="run-log-title">Run Log</h2>
|
|
305
|
+
<button id="close-run-log-btn" class="btn-icon" aria-label="Close">
|
|
306
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
307
|
+
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
308
|
+
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
309
|
+
</svg>
|
|
310
|
+
</button>
|
|
311
|
+
</div>
|
|
312
|
+
<pre id="run-log-pre" class="run-log-pre"></pre>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
|
|
125
316
|
<!-- New Session Modal -->
|
|
126
317
|
<div id="new-session-modal" class="modal hidden" role="dialog" aria-labelledby="modal-title" aria-modal="true">
|
|
127
318
|
<div class="modal-content">
|
|
@@ -137,6 +328,8 @@
|
|
|
137
328
|
autocorrect="off"
|
|
138
329
|
spellcheck="false"
|
|
139
330
|
aria-label="Working directory path"
|
|
331
|
+
aria-autocomplete="list"
|
|
332
|
+
aria-controls="cwd-suggestions"
|
|
140
333
|
>
|
|
141
334
|
<ul id="cwd-suggestions" class="suggestions hidden" role="listbox"></ul>
|
|
142
335
|
</div>
|
|
@@ -161,15 +354,18 @@
|
|
|
161
354
|
</div>
|
|
162
355
|
<div class="setting-row">
|
|
163
356
|
<div class="setting-info">
|
|
164
|
-
<label>
|
|
165
|
-
<p class="setting-description">
|
|
357
|
+
<label for="notify-toggle">Input notifications</label>
|
|
358
|
+
<p class="setting-description">Get notified when any session needs input</p>
|
|
166
359
|
</div>
|
|
167
|
-
<
|
|
360
|
+
<button id="notify-toggle" class="toggle" role="switch" aria-checked="false">
|
|
361
|
+
<span class="toggle-track"></span>
|
|
362
|
+
<span class="toggle-thumb"></span>
|
|
363
|
+
</button>
|
|
168
364
|
</div>
|
|
169
365
|
</div>
|
|
170
366
|
</div>
|
|
171
|
-
|
|
172
367
|
</div>
|
|
368
|
+
|
|
173
369
|
<script src="/app.js"></script>
|
|
174
370
|
</body>
|
|
175
371
|
</html>
|
package/public/manifest.json
CHANGED
|
@@ -5,20 +5,26 @@
|
|
|
5
5
|
"start_url": "/",
|
|
6
6
|
"display": "standalone",
|
|
7
7
|
"orientation": "any",
|
|
8
|
-
"background_color": "#
|
|
9
|
-
"theme_color": "#
|
|
8
|
+
"background_color": "#1a1a1a",
|
|
9
|
+
"theme_color": "#1a1a1a",
|
|
10
10
|
"icons": [
|
|
11
11
|
{
|
|
12
|
-
"src": "
|
|
13
|
-
"sizes": "
|
|
14
|
-
"type": "image/
|
|
12
|
+
"src": "/android-chrome-192x192.png",
|
|
13
|
+
"sizes": "192x192",
|
|
14
|
+
"type": "image/png",
|
|
15
15
|
"purpose": "any"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
"src": "
|
|
18
|
+
"src": "/android-chrome-512x512.png",
|
|
19
19
|
"sizes": "512x512",
|
|
20
|
-
"type": "image/
|
|
21
|
-
"purpose": "maskable"
|
|
20
|
+
"type": "image/png",
|
|
21
|
+
"purpose": "any maskable"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"src": "/apple-touch-icon.png",
|
|
25
|
+
"sizes": "180x180",
|
|
26
|
+
"type": "image/png",
|
|
27
|
+
"purpose": "any"
|
|
22
28
|
}
|
|
23
29
|
],
|
|
24
30
|
"categories": ["developer", "productivity", "utilities"]
|
package/public/styles.css
CHANGED
|
@@ -3,22 +3,22 @@
|
|
|
3
3
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
/*
|
|
7
|
-
--bg-deep: #
|
|
8
|
-
--bg-primary: #
|
|
9
|
-
--bg-elevated: #
|
|
10
|
-
--bg-surface: #
|
|
11
|
-
--bg-hover: #
|
|
6
|
+
/* Claude Code Dark Theme */
|
|
7
|
+
--bg-deep: #1a1a1a;
|
|
8
|
+
--bg-primary: #222222;
|
|
9
|
+
--bg-elevated: #2a2a2a;
|
|
10
|
+
--bg-surface: #333333;
|
|
11
|
+
--bg-hover: #3d3d3d;
|
|
12
12
|
|
|
13
13
|
/* Text hierarchy */
|
|
14
|
-
--text-primary: #
|
|
15
|
-
--text-secondary: #
|
|
16
|
-
--text-muted: #
|
|
14
|
+
--text-primary: #f5f5f5;
|
|
15
|
+
--text-secondary: #a0a0a0;
|
|
16
|
+
--text-muted: #6b6b6b;
|
|
17
17
|
|
|
18
|
-
/* Accent -
|
|
19
|
-
--accent: #
|
|
20
|
-
--accent-hover: #
|
|
21
|
-
--accent-soft: rgba(
|
|
18
|
+
/* Accent - Claude orange */
|
|
19
|
+
--accent: #d97706;
|
|
20
|
+
--accent-hover: #f0a500;
|
|
21
|
+
--accent-soft: rgba(217, 119, 6, 0.15);
|
|
22
22
|
|
|
23
23
|
/* Semantic colors */
|
|
24
24
|
--success: #3fb950;
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
--warning: #d29922;
|
|
27
27
|
|
|
28
28
|
/* Borders & Shadows */
|
|
29
|
-
--border: rgba(
|
|
30
|
-
--shadow: 0 2px 8px rgba(0, 0, 0, 0.
|
|
29
|
+
--border: rgba(245, 245, 245, 0.1);
|
|
30
|
+
--shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
31
31
|
|
|
32
32
|
/* Typography */
|
|
33
33
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|