@hmduc16031996/claude-mb-bridge 2.1.0 → 2.2.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 +1 -0
- package/package.json +2 -2
- package/public/app.js +11 -28
- package/public/index.html +1 -42
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hmduc16031996/claude-mb-bridge",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "Bridge between Claude Code CLI and your mobile app via WebView",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"claude-mb-bridge": "dist/index.js"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
|
-
"build": "tsc",
|
|
11
|
+
"build": "tsc && echo '#!/usr/bin/env node' > dist/index.js.tmp && cat dist/index.js >> dist/index.js.tmp && mv dist/index.js.tmp dist/index.js && chmod +x dist/index.js",
|
|
12
12
|
"start": "node dist/index.js",
|
|
13
13
|
"dev": "tsx src/index.ts",
|
|
14
14
|
"postinstall": "node scripts/postinstall.cjs"
|
package/public/app.js
CHANGED
|
@@ -113,26 +113,17 @@ class ClaudeBridge {
|
|
|
113
113
|
this.ctrlActive = false;
|
|
114
114
|
this.shiftActive = false;
|
|
115
115
|
|
|
116
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
117
|
-
this.token = urlParams.get('token') || localStorage.getItem('bridgeToken') || '';
|
|
118
|
-
|
|
119
116
|
this.initElements();
|
|
120
117
|
this.initTerminal();
|
|
121
118
|
this.bindEvents();
|
|
122
119
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
this.connect();
|
|
126
|
-
}
|
|
120
|
+
// Connect immediately
|
|
121
|
+
this.connect();
|
|
127
122
|
}
|
|
128
123
|
|
|
129
124
|
initElements() {
|
|
130
125
|
this.elements = {
|
|
131
|
-
authScreen: document.getElementById('auth-screen'),
|
|
132
126
|
mainScreen: document.getElementById('main-screen'),
|
|
133
|
-
tokenInput: document.getElementById('token-input'),
|
|
134
|
-
connectBtn: document.getElementById('connect-btn'),
|
|
135
|
-
authError: document.getElementById('auth-error'),
|
|
136
127
|
terminalContainer: document.getElementById('terminal-container'),
|
|
137
128
|
mobileKeys: document.getElementById('mobile-keys'),
|
|
138
129
|
header: document.getElementById('header'),
|
|
@@ -186,11 +177,6 @@ class ClaudeBridge {
|
|
|
186
177
|
}
|
|
187
178
|
|
|
188
179
|
bindEvents() {
|
|
189
|
-
this.elements.connectBtn.addEventListener('click', () => {
|
|
190
|
-
this.token = this.elements.tokenInput.value.trim();
|
|
191
|
-
this.connect();
|
|
192
|
-
});
|
|
193
|
-
|
|
194
180
|
document.querySelectorAll('.mobile-key').forEach(btn => {
|
|
195
181
|
btn.addEventListener('click', (e) => {
|
|
196
182
|
const key = btn.dataset.key;
|
|
@@ -218,16 +204,11 @@ class ClaudeBridge {
|
|
|
218
204
|
}
|
|
219
205
|
|
|
220
206
|
connect() {
|
|
221
|
-
if (!this.token) return;
|
|
222
|
-
this.elements.connectBtn.disabled = true;
|
|
223
|
-
this.elements.authError.textContent = '';
|
|
224
|
-
|
|
225
207
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
226
208
|
this.ws = new WebSocket(`${protocol}//${window.location.host}`);
|
|
227
209
|
|
|
228
210
|
this.ws.onopen = () => {
|
|
229
|
-
|
|
230
|
-
this.elements.authScreen.classList.remove('active');
|
|
211
|
+
console.log('✅ Connected to terminal');
|
|
231
212
|
this.elements.mainScreen.classList.add('active');
|
|
232
213
|
this.elements.mobileKeys.classList.remove('hidden');
|
|
233
214
|
setTimeout(() => this.fitAddon.fit(), 100);
|
|
@@ -237,16 +218,18 @@ class ClaudeBridge {
|
|
|
237
218
|
this.ws.onmessage = (e) => this.terminal.write(e.data);
|
|
238
219
|
|
|
239
220
|
this.ws.onclose = () => {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
this.
|
|
221
|
+
console.log('❌ Connection closed');
|
|
222
|
+
// Show offline state in terminal
|
|
223
|
+
this.terminal.write('\r\n\x1b[31m❌ Connection closed\x1b[0m\r\n');
|
|
243
224
|
};
|
|
244
225
|
|
|
245
226
|
this.ws.onerror = () => {
|
|
246
|
-
|
|
247
|
-
this.elements.connectBtn.disabled = false;
|
|
227
|
+
console.error('⚠️ Connection error');
|
|
248
228
|
};
|
|
249
229
|
}
|
|
250
230
|
}
|
|
251
231
|
|
|
252
|
-
|
|
232
|
+
// Initialize on load
|
|
233
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
234
|
+
new ClaudeBridge();
|
|
235
|
+
});
|
package/public/index.html
CHANGED
|
@@ -27,49 +27,8 @@
|
|
|
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
|
-
|
|
71
30
|
<!-- Main Screen -->
|
|
72
|
-
<div id="main-screen" class="screen">
|
|
31
|
+
<div id="main-screen" class="screen active">
|
|
73
32
|
<!-- Collapsible Header -->
|
|
74
33
|
<header id="header" role="toolbar" aria-label="Session controls">
|
|
75
34
|
<div class="header-left">
|