kiro-mobile-bridge 1.0.0 → 1.0.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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +130 -221
  3. package/package.json +40 -40
  4. package/src/public/index.html +1960 -1940
  5. package/src/server.js +2488 -2672
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 4regab
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,221 +1,130 @@
1
- # Kiro Mobile Bridge
2
-
3
- A mobile web interface for monitoring Kiro IDE agent sessions from your phone over LAN. Captures snapshots of the chat interface, terminal, file explorer, and editor via Chrome DevTools Protocol (CDP) and lets you interact remotely.
4
-
5
- ## Features
6
-
7
- - 📱 Mobile-optimized web interface with tab navigation
8
- - 💬 **Chat Panel** - View and send messages to Kiro's agent
9
- - 🖥️ **Terminal Panel** - View terminal output in real-time
10
- - 📁 **Files Panel** - Browse file explorer and Kiro panels (specs, hooks, steering)
11
- - 📝 **Editor Panel** - View currently open file with syntax highlighting
12
- - 🔄 Real-time updates via WebSocket
13
- - 🔍 Auto-discovers Kiro instances on ports 9000-9003
14
- - 🎨 Preserves original Kiro styling
15
-
16
- ## Prerequisites
17
-
18
- - **Node.js** 18+ (uses ES modules)
19
- - **Kiro IDE** with Chrome DevTools Protocol enabled
20
-
21
- ## Quick Start
22
-
23
- ### 1. Enable CDP in Kiro
24
-
25
- Start Kiro with the remote debugging port enabled:
26
-
27
- ```bash
28
- # Windows (from default install location)
29
- "%LOCALAPPDATA%\Programs\Kiro\Kiro.exe" --remote-debugging-port=9000
30
-
31
- # macOS
32
- /Applications/Kiro.app/Contents/MacOS/Kiro --remote-debugging-port=9000
33
-
34
- # Linux (AppImage)
35
- ~/Applications/Kiro.AppImage --remote-debugging-port=9000
36
-
37
- # Linux (installed)
38
- /opt/Kiro/kiro --remote-debugging-port=9000
39
- ```
40
-
41
- **Finding Kiro's location:**
42
-
43
- ```bash
44
- # Windows (CMD)
45
- where kiro
46
-
47
- # Windows (PowerShell)
48
- Get-Command kiro | Select-Object Source
49
-
50
- # macOS/Linux
51
- which kiro
52
- ```
53
-
54
- Then use the path in your command:
55
-
56
- ```bash
57
- # Example: If 'where kiro' returns C:\Users\YourName\AppData\Local\Programs\Kiro\Kiro.exe
58
- "C:\Users\YourName\AppData\Local\Programs\Kiro\Kiro.exe" --remote-debugging-port=9000
59
- ```
60
-
61
- | OS | Default Location |
62
- |----|------------------|
63
- | Windows | `%LOCALAPPDATA%\Programs\Kiro\Kiro.exe` |
64
- | macOS | `/Applications/Kiro.app/Contents/MacOS/Kiro` |
65
- | Linux (AppImage) | `~/Applications/Kiro.AppImage` or where you downloaded it |
66
- | Linux (deb/rpm) | `/opt/Kiro/kiro` or `/usr/bin/kiro` |
67
-
68
-
69
- ### 2. Run with npx (Recommended)
70
-
71
- No installation needed! Just run:
72
-
73
- ```bash
74
- npx kiro-mobile-bridge
75
- ```
76
-
77
- Or with a custom port:
78
-
79
- ```bash
80
- PORT=8080 npx kiro-mobile-bridge
81
- ```
82
-
83
- ### Alternative: Install Globally
84
-
85
- ```bash
86
- npm install -g kiro-mobile-bridge
87
- kiro-mobile-bridge
88
- ```
89
-
90
- ### Alternative: Clone and Run
91
-
92
- ```bash
93
- git clone <repo-url>
94
- cd kiro-mobile-bridge
95
- npm install
96
- npm start
97
- ```
98
-
99
- You'll see output like:
100
-
101
- ```
102
- 🌉 Kiro Mobile Bridge
103
- ─────────────────────
104
- Local: http://localhost:3000
105
- Network: http://192.168.1.100:3000
106
-
107
- Open the Network URL on your phone to monitor Kiro.
108
- ```
109
-
110
- ### 3. Open on Your Phone
111
-
112
- 1. Make sure your phone is on the **same WiFi network** as your computer
113
- 2. Open the **Network URL** (e.g., `http://192.168.1.100:3000`) in your phone's browser
114
- 3. The interface will automatically connect and show your Kiro chat
115
-
116
- ## Configuration
117
-
118
- | Environment Variable | Default | Description |
119
- |---------------------|---------|-------------|
120
- | `PORT` | `3000` | Server port |
121
-
122
- Example:
123
- ```bash
124
- PORT=8080 npx kiro-mobile-bridge
125
- ```
126
-
127
- ## API Endpoints
128
-
129
- | Method | Path | Description |
130
- |--------|------|-------------|
131
- | `GET` | `/cascades` | List active chat sessions |
132
- | `GET` | `/snapshot/:id` | Get chat HTML snapshot for a cascade |
133
- | `GET` | `/snapshot` | Get snapshot of first cascade |
134
- | `GET` | `/terminal/:id` | Get terminal output snapshot |
135
- | `GET` | `/sidebar/:id` | Get sidebar/file explorer snapshot |
136
- | `GET` | `/editor/:id` | Get editor content snapshot |
137
- | `GET` | `/styles/:id` | Get CSS for a cascade |
138
- | `POST` | `/send/:id` | Send message to a cascade |
139
- | `POST` | `/click/:id` | Click an element in Kiro UI |
140
-
141
- ### WebSocket Messages
142
-
143
- The server pushes updates via WebSocket:
144
-
145
- ```javascript
146
- // Cascade list update
147
- { type: 'cascade_list', cascades: [{ id, title, window, active }] }
148
-
149
- // Snapshot changed (panel: 'chat' | 'terminal' | 'sidebar' | 'editor')
150
- { type: 'snapshot_update', cascadeId: string, panel: string }
151
- ```
152
-
153
- ## How It Works
154
-
155
- ```
156
- ┌─────────────────┐ CDP ┌─────────────────┐
157
- │ Kiro IDE │◄────────────►│ Bridge Server │
158
- │ (port 9000-9003)│ │ (port 3000) │
159
- └─────────────────┘ └────────┬────────┘
160
-
161
- HTTP + WebSocket
162
-
163
- ┌────────▼────────┐
164
- │ Mobile Client │
165
- │ (browser) │
166
- └─────────────────┘
167
- ```
168
-
169
- 1. **Discovery**: Server scans ports 9000-9003 every 10 seconds for Kiro instances
170
- 2. **Connection**: Connects to Kiro via CDP WebSocket
171
- 3. **Snapshots**: Captures chat HTML every 3 seconds, broadcasts changes
172
- 4. **Messages**: Injects text into Kiro's chat input via CDP
173
-
174
- ## Troubleshooting
175
-
176
- ### "No sessions available"
177
-
178
- - Make sure Kiro is running with `--remote-debugging-port=9000`
179
- - Check that Kiro has a chat/agent session open
180
- - Wait a few seconds for discovery (runs every 10s)
181
-
182
- ### Can't connect from phone
183
-
184
- - Ensure phone and computer are on the **same network**
185
- - Check your firewall allows connections on port 3000
186
- - Try the IP address shown in the server output (not `localhost`)
187
-
188
- ### Finding your local IP
189
-
190
- The server displays your local IP on startup. You can also find it:
191
-
192
- ```bash
193
- # Windows
194
- ipconfig
195
-
196
- # macOS
197
- ifconfig | grep "inet "
198
-
199
- # Linux
200
- ip addr show | grep "inet "
201
- ```
202
-
203
- ### Message not sending
204
-
205
- - The chat input must be visible in Kiro
206
- - Try clicking in the chat input in Kiro first
207
- - Check the server console for error messages
208
-
209
- ## Security Notes
210
-
211
- ⚠️ **This is designed for local network use only:**
212
-
213
- - No authentication
214
- - No HTTPS
215
- - Exposes Kiro's chat interface to anyone on your network
216
-
217
- Only run this on trusted networks.
218
-
219
- ## License
220
-
221
- MIT
1
+ # Kiro Mobile Bridge
2
+
3
+ A mobile web interface for monitoring Kiro IDE agent sessions from your phone over LAN. Captures snapshots of the chat interface, file explorer, and editor via Chrome DevTools Protocol (CDP) and lets you interact remotely.
4
+
5
+ ## Features
6
+
7
+ - 📱 Mobile-optimized web interface with tab navigation
8
+ - 💬 **Chat Panel** - View and send messages to Kiro's agent
9
+ - 📝 **Editor Panel** - Browse file explorer and open file
10
+ - 🔄 Real-time updates via WebSocket
11
+
12
+ ## Prerequisites
13
+
14
+ - **Node.js** 18+ (uses ES modules)
15
+ - **Kiro IDE**
16
+
17
+ ## Quick Start
18
+
19
+ ### 1. Enable CDP in Kiro
20
+
21
+ Start Kiro with the remote debugging port enabled:
22
+ Option 1: **Run Kiro with debugging port:**
23
+ ```bash
24
+ # Windows (from default install location)
25
+ "%LOCALAPPDATA%\Programs\Kiro\Kiro.exe" --remote-debugging-port=9000
26
+
27
+ # macOS
28
+ /Applications/Kiro.app/Contents/MacOS/Kiro --remote-debugging-port=9000
29
+
30
+ # Linux (installed)
31
+ /opt/Kiro/kiro --remote-debugging-port=9000
32
+ ```
33
+
34
+ Option 2: **Finding Kiro's location:**
35
+
36
+ ```bash
37
+ where kiro # Windows (CMD)
38
+ which kiro # macOS/Linux
39
+ ```
40
+
41
+ Then use the path in your command:
42
+
43
+ ```bash
44
+ # Example
45
+ "C:\Users\YourName\AppData\Local\Programs\Kiro\Kiro.exe" --remote-debugging-port=9000
46
+ ```
47
+
48
+ ### 2. Run with npx (Recommended)
49
+
50
+ No installation needed! Just run:
51
+
52
+ ```bash
53
+ npx kiro-mobile-bridge
54
+ ```
55
+
56
+ ### Alternative: Clone and Run
57
+
58
+ ```bash
59
+ git clone
60
+ cd kiro-mobile-bridge
61
+ npm install
62
+ npm start
63
+ ```
64
+
65
+ You'll see output like:
66
+
67
+ ```
68
+ 🌉 Kiro Mobile Bridge
69
+ ─────────────────────
70
+ Local: http://localhost:3000
71
+ Network: http://192.168.1.100:3000
72
+
73
+ Open the Network URL on your phone to monitor Kiro.
74
+ ```
75
+
76
+ ### 3. Open on Your Phone
77
+
78
+ 1. Make sure your phone is on the **same WiFi network** as your computer
79
+ 2. Open the **Network URL** (e.g., `http://192.168.1.100:3000`) in your phone's browser
80
+ 3. The interface will automatically connect and show your Kiro chat
81
+
82
+
83
+ ## How It Works
84
+
85
+ ```
86
+ ┌─────────────────┐ CDP ┌─────────────────┐
87
+ │ Kiro IDE │◄────────────►│ Bridge Server │
88
+ │ (port 9000-9003)│ │ (port 3000) │
89
+ └─────────────────┘ └────────┬────────┘
90
+
91
+ HTTP + WebSocket
92
+
93
+ ┌────────▼────────┐
94
+ │ Mobile Client │
95
+ │ (browser) │
96
+ └─────────────────┘
97
+ ```
98
+
99
+ 1. **Discovery**: Server scans ports 9000-9003 every 10 seconds for Kiro instances
100
+ 2. **Connection**: Connects to Kiro via CDP WebSocket
101
+ 3. **Snapshots**: Captures chat HTML every 3 seconds, broadcasts changes
102
+ 4. **Messages**: Injects text into Kiro's chat input via CDP
103
+
104
+ ## Troubleshooting
105
+
106
+ ### "No sessions available"
107
+
108
+ - Make sure Kiro is running with `--remote-debugging-port=9000`
109
+ - Check that Kiro has a chat/agent session open
110
+ - Wait a few seconds for discovery
111
+
112
+ ### Can't connect from phone
113
+
114
+ - Ensure phone and computer are on the **same network**
115
+ - Check your firewall allows connections on port 3000
116
+ - Try the IP address shown in the server output (not `localhost`)
117
+
118
+ ## Security Notes
119
+
120
+ ⚠️ **This is designed for local network use only:**
121
+
122
+ - No authentication
123
+ - No HTTPS
124
+ - Exposes Kiro's chat interface to anyone on your network
125
+
126
+ Only run this on trusted networks.
127
+
128
+ ## License
129
+
130
+ MIT
package/package.json CHANGED
@@ -1,40 +1,40 @@
1
- {
2
- "name": "kiro-mobile-bridge",
3
- "version": "1.0.0",
4
- "description": "A simple mobile web interface for monitoring Kiro IDE agent sessions from your phone over LAN",
5
- "type": "module",
6
- "main": "src/server.js",
7
- "bin": {
8
- "kiro-mobile-bridge": "src/server.js"
9
- },
10
- "scripts": {
11
- "start": "node src/server.js"
12
- },
13
- "files": [
14
- "src/**/*",
15
- "README.md"
16
- ],
17
- "keywords": [
18
- "kiro",
19
- "mobile",
20
- "bridge",
21
- "cdp",
22
- "monitoring",
23
- "ide",
24
- "remote",
25
- "agent"
26
- ],
27
- "author": "",
28
- "license": "MIT",
29
- "repository": {
30
- "type": "git",
31
- "url": ""
32
- },
33
- "engines": {
34
- "node": ">=18.0.0"
35
- },
36
- "dependencies": {
37
- "express": "^4.18.2",
38
- "ws": "^8.18.0"
39
- }
40
- }
1
+ {
2
+ "name": "kiro-mobile-bridge",
3
+ "version": "1.0.4",
4
+ "description": "A simple mobile web interface for monitoring Kiro IDE agent sessions from your phone over LAN",
5
+ "type": "module",
6
+ "main": "src/server.js",
7
+ "bin": {
8
+ "kiro-mobile-bridge": "src/server.js"
9
+ },
10
+ "scripts": {
11
+ "start": "node src/server.js"
12
+ },
13
+ "files": [
14
+ "src/**/*",
15
+ "README.md"
16
+ ],
17
+ "keywords": [
18
+ "kiro",
19
+ "mobile",
20
+ "bridge",
21
+ "cdp",
22
+ "monitoring",
23
+ "ide",
24
+ "remote",
25
+ "agent"
26
+ ],
27
+ "author": "",
28
+ "license": "MIT",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "https://github.com/4regab/kiro-mobile-bridge"
32
+ },
33
+ "engines": {
34
+ "node": ">=18.0.0"
35
+ },
36
+ "dependencies": {
37
+ "express": "^4.18.2",
38
+ "ws": "^8.18.0"
39
+ }
40
+ }