@firstpick/pi-package-webui 0.1.5 → 0.1.7
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 +9 -5
- package/bin/pi-webui.mjs +425 -13
- package/index.ts +82 -10
- package/package.json +1 -1
- package/public/app.js +2853 -234
- package/public/catppuccin-mocha-background.png +0 -0
- package/public/index.html +165 -54
- package/public/matrix-background.webp +0 -0
- package/public/service-worker.js +3 -1
- package/public/styles.css +695 -16
- package/tests/mobile-static.test.mjs +155 -30
|
Binary file
|
package/public/index.html
CHANGED
|
@@ -22,6 +22,20 @@
|
|
|
22
22
|
<span class="side-panel-button-chevron" aria-hidden="true">‹</span>
|
|
23
23
|
</button>
|
|
24
24
|
|
|
25
|
+
<section id="serverOfflinePanel" class="server-offline-panel" aria-live="assertive" hidden>
|
|
26
|
+
<div class="server-offline-card" role="status">
|
|
27
|
+
<span class="server-offline-kicker">Backend unavailable</span>
|
|
28
|
+
<h1>Pi Web UI server is offline</h1>
|
|
29
|
+
<p>Run this on the machine that hosts Pi Web UI, then retry the connection.</p>
|
|
30
|
+
<code id="serverOfflineCommand" class="server-offline-command">pi-webui --cwd .</code>
|
|
31
|
+
<div class="server-offline-actions">
|
|
32
|
+
<button id="copyServerCommandButton" class="primary" type="button">Copy start command</button>
|
|
33
|
+
<button id="retryServerConnectionButton" type="button">Retry connection</button>
|
|
34
|
+
</div>
|
|
35
|
+
<p class="server-offline-note muted">From an existing Pi terminal you can also run <code id="serverOfflineSlashCommand">/webui-start</code>.</p>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
25
39
|
<main class="layout">
|
|
26
40
|
<section class="chat-panel">
|
|
27
41
|
<header class="terminal-tabs-shell">
|
|
@@ -55,10 +69,22 @@
|
|
|
55
69
|
<div id="gitWorkflowActions" class="git-workflow-actions"></div>
|
|
56
70
|
</section>
|
|
57
71
|
<form id="composer" class="composer">
|
|
58
|
-
<
|
|
72
|
+
<div class="composer-input-row">
|
|
73
|
+
<textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…" autofocus></textarea>
|
|
74
|
+
<button
|
|
75
|
+
id="attachButton"
|
|
76
|
+
class="composer-icon-button composer-attach-button"
|
|
77
|
+
type="button"
|
|
78
|
+
title="Attach files"
|
|
79
|
+
aria-label="Attach images, videos, documents, audio, or other files"
|
|
80
|
+
data-tooltip="Attach files: • Click to choose images, videos, audio, PDFs, docs, text/code, or other files. • Paste images/docs from the clipboard. • Drag and drop files onto the composer."
|
|
81
|
+
><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.48-8.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
|
82
|
+
<input id="attachmentInput" class="attachment-input" type="file" multiple accept="image/*,video/*,audio/*,text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/json,application/xml,.md,.markdown,.csv,.ts,.tsx,.js,.jsx,.mjs,.cjs,.py,.rs,.go,.java,.c,.cpp,.h,.hpp,.sh,.bash,.zsh,.fish,.yaml,.yml,.toml,.ini,.log" />
|
|
83
|
+
</div>
|
|
59
84
|
<div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
|
|
85
|
+
<div id="attachmentTray" class="attachment-tray" aria-live="polite" hidden></div>
|
|
60
86
|
<div class="composer-row">
|
|
61
|
-
<button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false">Actions</button>
|
|
87
|
+
<button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false" title="Open session, workflow, and follow-up actions">Actions</button>
|
|
62
88
|
<div id="composerActionsPanel" class="composer-actions-panel" aria-label="Composer actions">
|
|
63
89
|
<label>
|
|
64
90
|
Busy prompt behavior
|
|
@@ -71,23 +97,24 @@
|
|
|
71
97
|
<button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
|
|
72
98
|
<button
|
|
73
99
|
id="gitWorkflowButton"
|
|
74
|
-
class="composer-git-button"
|
|
100
|
+
class="composer-icon-button composer-git-button"
|
|
75
101
|
type="button"
|
|
76
|
-
title="Guided Git workflow
|
|
102
|
+
title="Guided Git workflow"
|
|
77
103
|
aria-label="Start guided Git workflow: git add dot, run git-staged-msg, preview messages, commit short or long, then git push. Cancel is available at each step."
|
|
78
|
-
data-tooltip="
|
|
79
|
-
|
|
104
|
+
data-tooltip="GitHub workflow: 1. Run git add . 2. Run /git-staged-msg 3. Preview short + long messages 4. Commit with short or long message 5. Run git push Cancel is available at each step."
|
|
105
|
+
><svg class="composer-icon composer-icon-github" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></button>
|
|
80
106
|
<div class="composer-publish-menu">
|
|
81
107
|
<button
|
|
82
108
|
id="publishButton"
|
|
83
|
-
class="composer-publish-button"
|
|
109
|
+
class="composer-icon-button composer-publish-button"
|
|
84
110
|
type="button"
|
|
85
111
|
title="Choose a publish workflow"
|
|
86
112
|
aria-label="Open publish workflows"
|
|
87
113
|
aria-haspopup="menu"
|
|
88
114
|
aria-expanded="false"
|
|
89
115
|
aria-controls="publishMenu"
|
|
90
|
-
|
|
116
|
+
data-tooltip="Publish workflows: choose an npm or AUR release flow."
|
|
117
|
+
><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16V4m0 0 5 5m-5-5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 16v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
|
91
118
|
<div id="publishMenu" class="composer-publish-menu-panel" role="menu" aria-label="Publish workflows">
|
|
92
119
|
<button id="releaseNpmButton" class="composer-publish-menu-item" type="button" role="menuitem" data-command="/release-npm">
|
|
93
120
|
<span>NPM Release</span>
|
|
@@ -113,7 +140,8 @@
|
|
|
113
140
|
aria-label="Follow-up: type your message first, then tap this button to send it as a follow-up."
|
|
114
141
|
data-tooltip="Follow-up usage: 1. Type your message in the textarea. 2. Tap Follow-up to send it as a follow-up. Use for extra context or the next request."
|
|
115
142
|
>Follow-up</button>
|
|
116
|
-
<button id="
|
|
143
|
+
<button id="abortButton" class="composer-abort-button danger" type="button" title="Abort the active Pi run (Esc or hold)" aria-label="Abort the active Pi run (Esc or hold)" hidden disabled>Abort</button>
|
|
144
|
+
<button id="sendButton" type="submit" class="primary" title="Send prompt">Send</button>
|
|
117
145
|
</div>
|
|
118
146
|
</form>
|
|
119
147
|
</section>
|
|
@@ -134,56 +162,128 @@
|
|
|
134
162
|
</button>
|
|
135
163
|
</div>
|
|
136
164
|
<div class="side-panel-body">
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
165
|
+
<section class="side-panel-section" data-side-panel-section="controls">
|
|
166
|
+
<h2>
|
|
167
|
+
<button id="sidePanelSectionToggleControls" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionControls" aria-label="Collapse Controls section" title="Collapse Controls section" data-side-panel-section-toggle="controls">
|
|
168
|
+
<span class="side-panel-section-label">Controls</span>
|
|
169
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
170
|
+
</button>
|
|
171
|
+
</h2>
|
|
172
|
+
<div id="sidePanelSectionControls" class="side-panel-section-content">
|
|
173
|
+
<div class="side-panel-controls">
|
|
174
|
+
<div class="control-field">
|
|
175
|
+
<label for="modelSelect">Model</label>
|
|
176
|
+
<select id="modelSelect" title="Model"></select>
|
|
177
|
+
<button id="setModelButton" type="button">Set model</button>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="control-field">
|
|
180
|
+
<label for="thinkingSelect">Thinking</label>
|
|
181
|
+
<select id="thinkingSelect" title="Thinking level">
|
|
182
|
+
<option value="off">off</option>
|
|
183
|
+
<option value="minimal">minimal</option>
|
|
184
|
+
<option value="low">low</option>
|
|
185
|
+
<option value="medium">medium</option>
|
|
186
|
+
<option value="high">high</option>
|
|
187
|
+
<option value="xhigh">xhigh</option>
|
|
188
|
+
</select>
|
|
189
|
+
<button id="setThinkingButton" type="button">Set thinking</button>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="control-field thinking-visibility-control-field">
|
|
192
|
+
<span class="control-label">Output</span>
|
|
193
|
+
<label class="toggle-control" for="thinkingVisibilityToggle">
|
|
194
|
+
<input id="thinkingVisibilityToggle" type="checkbox" checked />
|
|
195
|
+
<span>
|
|
196
|
+
<span class="toggle-control-label">Show thinking output</span>
|
|
197
|
+
<span id="thinkingVisibilityStatus" class="toggle-control-hint">Visible</span>
|
|
198
|
+
</span>
|
|
199
|
+
</label>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="control-field">
|
|
202
|
+
<label for="themeSelect">Theme</label>
|
|
203
|
+
<select id="themeSelect" title="Theme"></select>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="control-field background-control-field">
|
|
206
|
+
<label for="backgroundInput">Background</label>
|
|
207
|
+
<input id="backgroundInput" class="background-input" type="file" accept="image/png,image/jpeg,image/webp,image/gif" />
|
|
208
|
+
<div class="background-control-row">
|
|
209
|
+
<button id="backgroundChooseButton" type="button">Change background</button>
|
|
210
|
+
<button id="backgroundClearButton" class="background-clear-button" type="button" aria-label="Remove custom background" title="Remove custom background" hidden>×</button>
|
|
211
|
+
</div>
|
|
212
|
+
<div id="backgroundStatus" class="background-status muted">Theme default</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="control-field network-control-field">
|
|
215
|
+
<label>Network</label>
|
|
216
|
+
<div id="networkStatus" class="network-status closed">Local only</div>
|
|
217
|
+
<button id="openNetworkButton" type="button">Open to network</button>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="control-field notification-control-field">
|
|
220
|
+
<span class="control-label">Notifications</span>
|
|
221
|
+
<label class="toggle-control" for="agentDoneNotificationsToggle">
|
|
222
|
+
<input id="agentDoneNotificationsToggle" type="checkbox" />
|
|
223
|
+
<span>
|
|
224
|
+
<span class="toggle-control-label">Agent done notifications</span>
|
|
225
|
+
<span id="agentDoneNotificationsStatus" class="toggle-control-hint">Off</span>
|
|
226
|
+
</span>
|
|
227
|
+
</label>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
143
230
|
</div>
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<button id="setThinkingButton" type="button">Set thinking</button>
|
|
231
|
+
</section>
|
|
232
|
+
<section class="side-panel-section" data-side-panel-section="optional-features">
|
|
233
|
+
<h2>
|
|
234
|
+
<button id="sidePanelSectionToggleOptionalFeatures" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionOptionalFeatures" aria-label="Collapse Optional features section" title="Collapse Optional features section" data-side-panel-section-toggle="optional-features">
|
|
235
|
+
<span class="side-panel-section-label">Optional features</span>
|
|
236
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
237
|
+
</button>
|
|
238
|
+
</h2>
|
|
239
|
+
<div id="sidePanelSectionOptionalFeatures" class="side-panel-section-content">
|
|
240
|
+
<div id="optionalFeaturesBox" class="optional-features-box muted">Checking optional features…</div>
|
|
155
241
|
</div>
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
242
|
+
</section>
|
|
243
|
+
<section class="side-panel-section" data-side-panel-section="session">
|
|
244
|
+
<h2>
|
|
245
|
+
<button id="sidePanelSectionToggleSession" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionSession" aria-label="Collapse Session section" title="Collapse Session section" data-side-panel-section-toggle="session">
|
|
246
|
+
<span class="side-panel-section-label">Session</span>
|
|
247
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
248
|
+
</button>
|
|
249
|
+
</h2>
|
|
250
|
+
<div id="sidePanelSectionSession" class="side-panel-section-content">
|
|
251
|
+
<dl id="stateDetails" class="details"></dl>
|
|
159
252
|
</div>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<button id="
|
|
253
|
+
</section>
|
|
254
|
+
<section class="side-panel-section" data-side-panel-section="queue">
|
|
255
|
+
<h2>
|
|
256
|
+
<button id="sidePanelSectionToggleQueue" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionQueue" aria-label="Collapse Queue section" title="Collapse Queue section" data-side-panel-section-toggle="queue">
|
|
257
|
+
<span class="side-panel-section-label">Queue</span>
|
|
258
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
259
|
+
</button>
|
|
260
|
+
</h2>
|
|
261
|
+
<div id="sidePanelSectionQueue" class="side-panel-section-content">
|
|
262
|
+
<div id="queueBox" class="queue-box muted">No queued messages.</div>
|
|
164
263
|
</div>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<span>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
264
|
+
</section>
|
|
265
|
+
<section class="side-panel-section" data-side-panel-section="commands">
|
|
266
|
+
<h2>
|
|
267
|
+
<button id="sidePanelSectionToggleCommands" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionCommands" aria-label="Collapse Commands section" title="Collapse Commands section" data-side-panel-section-toggle="commands">
|
|
268
|
+
<span class="side-panel-section-label">Commands</span>
|
|
269
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
270
|
+
</button>
|
|
271
|
+
</h2>
|
|
272
|
+
<div id="sidePanelSectionCommands" class="side-panel-section-content">
|
|
273
|
+
<div id="commandsBox" class="commands-box muted">Loading…</div>
|
|
174
274
|
</div>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
275
|
+
</section>
|
|
276
|
+
<section class="side-panel-section" data-side-panel-section="events">
|
|
277
|
+
<h2>
|
|
278
|
+
<button id="sidePanelSectionToggleEvents" class="side-panel-section-toggle" type="button" aria-expanded="true" aria-controls="sidePanelSectionEvents" aria-label="Collapse Events section" title="Collapse Events section" data-side-panel-section-toggle="events">
|
|
279
|
+
<span class="side-panel-section-label">Events</span>
|
|
280
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
281
|
+
</button>
|
|
282
|
+
</h2>
|
|
283
|
+
<div id="sidePanelSectionEvents" class="side-panel-section-content">
|
|
284
|
+
<div id="eventLog" class="event-log"></div>
|
|
285
|
+
</div>
|
|
286
|
+
</section>
|
|
187
287
|
</div>
|
|
188
288
|
</aside>
|
|
189
289
|
</main>
|
|
@@ -215,6 +315,17 @@
|
|
|
215
315
|
</form>
|
|
216
316
|
</dialog>
|
|
217
317
|
|
|
318
|
+
<dialog id="nativeCommandDialog" class="extension-dialog native-command-dialog">
|
|
319
|
+
<form method="dialog">
|
|
320
|
+
<h2 id="nativeCommandTitle">Pi command</h2>
|
|
321
|
+
<p id="nativeCommandMessage" class="muted"></p>
|
|
322
|
+
<input id="nativeCommandSearch" class="dialog-input native-command-search" type="search" placeholder="Filter choices…" autocomplete="off" hidden />
|
|
323
|
+
<div id="nativeCommandBody" class="native-command-body"></div>
|
|
324
|
+
<p id="nativeCommandError" class="path-picker-error" hidden></p>
|
|
325
|
+
<menu id="nativeCommandActions"></menu>
|
|
326
|
+
</form>
|
|
327
|
+
</dialog>
|
|
328
|
+
|
|
218
329
|
<script type="module" src="/app.js"></script>
|
|
219
330
|
</body>
|
|
220
331
|
</html>
|
|
Binary file
|
package/public/service-worker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const CACHE_NAME = "pi-webui-pwa-
|
|
1
|
+
const CACHE_NAME = "pi-webui-pwa-v16";
|
|
2
2
|
const APP_SHELL = [
|
|
3
3
|
"/",
|
|
4
4
|
"/index.html",
|
|
@@ -8,6 +8,8 @@ const APP_SHELL = [
|
|
|
8
8
|
"/apple-touch-icon.png",
|
|
9
9
|
"/icon-192.png",
|
|
10
10
|
"/icon-512.png",
|
|
11
|
+
"/catppuccin-mocha-background.png",
|
|
12
|
+
"/matrix-background.webp",
|
|
11
13
|
"/manifest.webmanifest",
|
|
12
14
|
];
|
|
13
15
|
|