@firstpick/pi-package-webui 0.1.0 → 0.1.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/README.md +121 -43
- package/bin/pi-webui.mjs +433 -40
- package/index.ts +150 -18
- package/package.json +1 -1
- package/public/app.js +556 -19
- package/public/favicon.svg +8 -0
- package/public/index.html +28 -0
- package/public/styles.css +317 -0
package/README.md
CHANGED
|
@@ -1,95 +1,173 @@
|
|
|
1
1
|
# @firstpick/pi-package-webui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Local browser companion for [Pi coding agent](https://www.npmjs.com/package/@earendil-works/pi-coding-agent).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This package provides:
|
|
6
6
|
|
|
7
|
-
- a
|
|
8
|
-
- a Pi
|
|
7
|
+
- `pi-webui`: a local HTTP/SSE server that starts `pi --mode rpc`, serves the static browser UI, and proxies browser actions to Pi RPC commands.
|
|
8
|
+
- `/start-webui`: a Pi slash command that launches `pi-webui` for the current Pi working directory and opens the browser.
|
|
9
|
+
- A no-build web app in `public/` with no runtime frontend dependencies.
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
> **Security:** Pi Web UI has no authentication. It can control the spawned Pi session, including any tools Pi is allowed to run. It binds to `127.0.0.1` by default; do not expose it on untrusted networks.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
13
|
+
## Requirements
|
|
14
|
+
|
|
15
|
+
- Node.js `>=22.19.0`
|
|
16
|
+
- Pi available through this package dependency or as `pi` on `PATH`
|
|
17
|
+
- A modern browser with Server-Sent Events support
|
|
18
|
+
|
|
19
|
+
## Quick start
|
|
20
|
+
|
|
21
|
+
Install the package from npm into Pi, then restart Pi so `/start-webui` is loaded:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pi install npm:@firstpick/pi-package-webui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
From inside terminal Pi:
|
|
28
|
+
|
|
29
|
+
```text
|
|
30
|
+
/start-webui
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Open the printed URL, usually <http://127.0.0.1:31415/>. The command opens it automatically unless `--no-open` is passed.
|
|
34
|
+
|
|
35
|
+
For direct development from this package directory:
|
|
29
36
|
|
|
30
37
|
```bash
|
|
31
|
-
# from this package directory during development
|
|
32
38
|
node bin/pi-webui.mjs --cwd /path/to/project
|
|
39
|
+
```
|
|
33
40
|
|
|
34
|
-
|
|
35
|
-
pi-webui --cwd /path/to/project
|
|
41
|
+
After a global npm install:
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
```bash
|
|
44
|
+
npm install -g @firstpick/pi-package-webui
|
|
45
|
+
pi-webui --cwd /path/to/project
|
|
39
46
|
```
|
|
40
47
|
|
|
41
|
-
|
|
48
|
+
## Features
|
|
49
|
+
|
|
50
|
+
- Browser chat with Pi over RPC
|
|
51
|
+
- Isolated terminal tabs: each Web UI tab starts its own separate `pi --mode rpc` subprocess, event stream, session state, and prompt draft
|
|
52
|
+
- Live assistant text streaming, including streamed thinking blocks when exposed by the provider
|
|
53
|
+
- Prompt, steer, follow-up, abort, new session, and manual compact controls
|
|
54
|
+
- Busy-session behavior selector for follow-up vs steer
|
|
55
|
+
- Model and thinking-level controls
|
|
56
|
+
- Slash-command autocomplete while typing `/...`
|
|
57
|
+
- Tool, process, compaction, queue, and extension event log
|
|
58
|
+
- Collapsible side panel with session state, queue, available commands, events, and local-network exposure status/control
|
|
59
|
+
- Pi-style footer with token, cache, estimated Pi-context tokens, speed, cost, context usage, clickable per-tab cwd picker with browser-saved fast picks, git branch, changes, runtime, model, and thinking level
|
|
60
|
+
- Guided Git workflow: `git add .`, ask Pi to run `/git-staged-msg`, preview short/long messages, commit with the selected message, and `git push`
|
|
61
|
+
- Basic rendering for user, assistant, tool result, bash execution, and thinking messages
|
|
62
|
+
- Basic extension UI bridge for `notify`, `setStatus`, `setWidget`, `setTitle`, `set_editor_text`, `select`, `confirm`, `input`, and `editor`
|
|
63
|
+
- Cyberpunk/Catppuccin-inspired theme
|
|
64
|
+
- Static frontend: no bundler, no frontend install step
|
|
42
65
|
|
|
43
66
|
## Pi slash command
|
|
44
67
|
|
|
45
|
-
|
|
68
|
+
```text
|
|
69
|
+
/start-webui [port] [options] [-- <pi args...>]
|
|
70
|
+
```
|
|
46
71
|
|
|
47
|
-
|
|
48
|
-
|
|
72
|
+
Options:
|
|
73
|
+
|
|
74
|
+
```text
|
|
75
|
+
[port] Positional port shortcut
|
|
76
|
+
--host <host> HTTP bind host (default: 127.0.0.1)
|
|
77
|
+
--port <port> HTTP port (default: 31415)
|
|
78
|
+
--no-open Do not open the browser automatically
|
|
79
|
+
--no-session Start Pi RPC with --no-session
|
|
80
|
+
--name <name> Initial Pi session name
|
|
81
|
+
-- <pi args...> Extra arguments forwarded to Pi RPC
|
|
49
82
|
```
|
|
50
83
|
|
|
51
|
-
|
|
84
|
+
Examples:
|
|
52
85
|
|
|
53
86
|
```text
|
|
54
87
|
/start-webui
|
|
55
|
-
/start-webui
|
|
56
|
-
/start-webui --no-open
|
|
88
|
+
/start-webui 31500
|
|
89
|
+
/start-webui --port 31500 --no-open
|
|
90
|
+
/start-webui --name browser -- --model anthropic/claude-sonnet-4-5:high
|
|
57
91
|
```
|
|
58
92
|
|
|
59
|
-
|
|
93
|
+
If a compatible Web UI is already running on the target URL, `/start-webui` stops that instance first, then starts a fresh server for the current cwd and opens it.
|
|
60
94
|
|
|
61
95
|
## CLI
|
|
62
96
|
|
|
63
97
|
```text
|
|
64
98
|
pi-webui [options] [-- <pi args...>]
|
|
99
|
+
```
|
|
65
100
|
|
|
66
101
|
Options:
|
|
102
|
+
|
|
103
|
+
```text
|
|
67
104
|
--host <host> HTTP bind host (default: 127.0.0.1)
|
|
68
105
|
--port <port> HTTP port (default: 31415)
|
|
69
|
-
--cwd <path>
|
|
106
|
+
--cwd <path> Default working directory for Pi tabs (default: current dir)
|
|
70
107
|
--pi <command> Pi executable to spawn (default: bundled dependency, then "pi")
|
|
71
108
|
--no-session Start Pi RPC with --no-session
|
|
72
109
|
--name <name> Initial Pi session name
|
|
110
|
+
-h, --help Show help
|
|
111
|
+
-v, --version Print version
|
|
73
112
|
```
|
|
74
113
|
|
|
75
|
-
|
|
114
|
+
Examples:
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
pi-webui --cwd ~/src/my-project
|
|
118
|
+
pi-webui --port 3000 -- --model anthropic/claude-sonnet-4-5:high
|
|
119
|
+
PI_WEBUI_PI_BIN=/path/to/pi pi-webui --no-session
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Environment variables:
|
|
76
123
|
|
|
77
124
|
- `PI_WEBUI_HOST`
|
|
78
125
|
- `PI_WEBUI_PORT`
|
|
79
|
-
- `PI_WEBUI_PI_BIN` (
|
|
126
|
+
- `PI_WEBUI_PI_BIN` (same purpose as `--pi`)
|
|
127
|
+
|
|
128
|
+
## Guided Git workflow
|
|
80
129
|
|
|
81
|
-
|
|
130
|
+
The browser button runs a native local workflow in the Web UI server process:
|
|
82
131
|
|
|
83
|
-
|
|
132
|
+
1. `git add .` in the active Pi working directory.
|
|
133
|
+
2. Send `/git-staged-msg` to Pi.
|
|
134
|
+
3. Read `dev/COMMIT/staged-commit-short.txt` and `dev/COMMIT/staged-commit-long.txt` from the git root.
|
|
135
|
+
4. Commit with either the short message (`git commit -m ...`) or the long message (`git commit -F ...`).
|
|
136
|
+
5. Run `git push`.
|
|
84
137
|
|
|
85
|
-
|
|
138
|
+
This workflow assumes `/git-staged-msg` is available in the Pi session and writes the two `dev/COMMIT/` files above. It can be cancelled between steps; active native git commands are terminated on cancel where possible.
|
|
86
139
|
|
|
87
140
|
## How it works
|
|
88
141
|
|
|
89
|
-
|
|
142
|
+
`pi-webui` starts a Pi RPC subprocess for the initial browser terminal tab, and each additional Web UI tab starts another isolated subprocess:
|
|
90
143
|
|
|
91
144
|
```bash
|
|
92
145
|
pi --mode rpc
|
|
93
146
|
```
|
|
94
147
|
|
|
95
|
-
|
|
148
|
+
With options, each spawned command becomes:
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
pi --mode rpc [--no-session] [--name <name>] [...extra Pi args]
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
The local server exposes:
|
|
155
|
+
|
|
156
|
+
- static files from `public/`
|
|
157
|
+
- `GET /api/tabs`, `POST /api/tabs`, `PATCH /api/tabs/:id`, and `DELETE /api/tabs/:id` for isolated Web UI terminal tabs and per-tab cwd changes
|
|
158
|
+
- `GET /api/directories?tab=<tabId>&path=<path>` for the browser cwd picker
|
|
159
|
+
- `GET /api/network` and localhost-only `POST /api/network/open` for local-network exposure status/control
|
|
160
|
+
- `POST /api/shutdown` for localhost-only graceful restarts from `/start-webui`
|
|
161
|
+
- HTTP endpoints for prompt/session/model/thinking/compact/git actions; tab-scoped calls use `?tab=<tabId>`
|
|
162
|
+
- `/api/events?tab=<tabId>` as a per-tab Server-Sent Events stream for Pi RPC events
|
|
163
|
+
- `/api/extension-ui-response?tab=<tabId>` for browser responses to extension UI prompts
|
|
164
|
+
|
|
165
|
+
Pi stdout is read as JSONL and split only on `\n`, matching Pi RPC framing.
|
|
166
|
+
|
|
167
|
+
## Network and safety notes
|
|
168
|
+
|
|
169
|
+
- Default bind is localhost-only: `127.0.0.1:31415`.
|
|
170
|
+
- The side-panel "Open to network" button rebinds the current server to `0.0.0.0` and shows LAN URLs when available.
|
|
171
|
+
- `--host 0.0.0.0` also makes the UI reachable from the network and is unsafe unless the network is trusted.
|
|
172
|
+
- The UI is intended as a local companion, not a hardened multi-user web service.
|
|
173
|
+
- Browser actions can trigger Pi tools, shell commands, file edits, and git operations according to the spawned Pi session's permissions.
|