@firstpick/pi-package-webui 0.1.5 → 0.1.6
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 +2623 -241
- package/public/catppuccin-mocha-background.png +0 -0
- package/public/index.html +151 -54
- package/public/matrix-background.webp +0 -0
- package/public/service-worker.js +3 -1
- package/public/styles.css +628 -16
- package/tests/mobile-static.test.mjs +144 -30
|
Binary file
|
package/public/index.html
CHANGED
|
@@ -55,10 +55,22 @@
|
|
|
55
55
|
<div id="gitWorkflowActions" class="git-workflow-actions"></div>
|
|
56
56
|
</section>
|
|
57
57
|
<form id="composer" class="composer">
|
|
58
|
-
<
|
|
58
|
+
<div class="composer-input-row">
|
|
59
|
+
<textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…" autofocus></textarea>
|
|
60
|
+
<button
|
|
61
|
+
id="attachButton"
|
|
62
|
+
class="composer-icon-button composer-attach-button"
|
|
63
|
+
type="button"
|
|
64
|
+
title="Attach files"
|
|
65
|
+
aria-label="Attach images, videos, documents, audio, or other files"
|
|
66
|
+
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."
|
|
67
|
+
><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>
|
|
68
|
+
<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" />
|
|
69
|
+
</div>
|
|
59
70
|
<div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
|
|
71
|
+
<div id="attachmentTray" class="attachment-tray" aria-live="polite" hidden></div>
|
|
60
72
|
<div class="composer-row">
|
|
61
|
-
<button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false">Actions</button>
|
|
73
|
+
<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
74
|
<div id="composerActionsPanel" class="composer-actions-panel" aria-label="Composer actions">
|
|
63
75
|
<label>
|
|
64
76
|
Busy prompt behavior
|
|
@@ -71,23 +83,24 @@
|
|
|
71
83
|
<button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
|
|
72
84
|
<button
|
|
73
85
|
id="gitWorkflowButton"
|
|
74
|
-
class="composer-git-button"
|
|
86
|
+
class="composer-icon-button composer-git-button"
|
|
75
87
|
type="button"
|
|
76
|
-
title="Guided Git workflow
|
|
88
|
+
title="Guided Git workflow"
|
|
77
89
|
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
|
-
|
|
90
|
+
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."
|
|
91
|
+
><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
92
|
<div class="composer-publish-menu">
|
|
81
93
|
<button
|
|
82
94
|
id="publishButton"
|
|
83
|
-
class="composer-publish-button"
|
|
95
|
+
class="composer-icon-button composer-publish-button"
|
|
84
96
|
type="button"
|
|
85
97
|
title="Choose a publish workflow"
|
|
86
98
|
aria-label="Open publish workflows"
|
|
87
99
|
aria-haspopup="menu"
|
|
88
100
|
aria-expanded="false"
|
|
89
101
|
aria-controls="publishMenu"
|
|
90
|
-
|
|
102
|
+
data-tooltip="Publish workflows: choose an npm or AUR release flow."
|
|
103
|
+
><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
104
|
<div id="publishMenu" class="composer-publish-menu-panel" role="menu" aria-label="Publish workflows">
|
|
92
105
|
<button id="releaseNpmButton" class="composer-publish-menu-item" type="button" role="menuitem" data-command="/release-npm">
|
|
93
106
|
<span>NPM Release</span>
|
|
@@ -113,7 +126,8 @@
|
|
|
113
126
|
aria-label="Follow-up: type your message first, then tap this button to send it as a follow-up."
|
|
114
127
|
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
128
|
>Follow-up</button>
|
|
116
|
-
<button id="
|
|
129
|
+
<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>
|
|
130
|
+
<button id="sendButton" type="submit" class="primary" title="Send prompt">Send</button>
|
|
117
131
|
</div>
|
|
118
132
|
</form>
|
|
119
133
|
</section>
|
|
@@ -134,56 +148,128 @@
|
|
|
134
148
|
</button>
|
|
135
149
|
</div>
|
|
136
150
|
<div class="side-panel-body">
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
151
|
+
<section class="side-panel-section" data-side-panel-section="controls">
|
|
152
|
+
<h2>
|
|
153
|
+
<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">
|
|
154
|
+
<span class="side-panel-section-label">Controls</span>
|
|
155
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
156
|
+
</button>
|
|
157
|
+
</h2>
|
|
158
|
+
<div id="sidePanelSectionControls" class="side-panel-section-content">
|
|
159
|
+
<div class="side-panel-controls">
|
|
160
|
+
<div class="control-field">
|
|
161
|
+
<label for="modelSelect">Model</label>
|
|
162
|
+
<select id="modelSelect" title="Model"></select>
|
|
163
|
+
<button id="setModelButton" type="button">Set model</button>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="control-field">
|
|
166
|
+
<label for="thinkingSelect">Thinking</label>
|
|
167
|
+
<select id="thinkingSelect" title="Thinking level">
|
|
168
|
+
<option value="off">off</option>
|
|
169
|
+
<option value="minimal">minimal</option>
|
|
170
|
+
<option value="low">low</option>
|
|
171
|
+
<option value="medium">medium</option>
|
|
172
|
+
<option value="high">high</option>
|
|
173
|
+
<option value="xhigh">xhigh</option>
|
|
174
|
+
</select>
|
|
175
|
+
<button id="setThinkingButton" type="button">Set thinking</button>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="control-field thinking-visibility-control-field">
|
|
178
|
+
<span class="control-label">Output</span>
|
|
179
|
+
<label class="toggle-control" for="thinkingVisibilityToggle">
|
|
180
|
+
<input id="thinkingVisibilityToggle" type="checkbox" checked />
|
|
181
|
+
<span>
|
|
182
|
+
<span class="toggle-control-label">Show thinking output</span>
|
|
183
|
+
<span id="thinkingVisibilityStatus" class="toggle-control-hint">Visible</span>
|
|
184
|
+
</span>
|
|
185
|
+
</label>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="control-field">
|
|
188
|
+
<label for="themeSelect">Theme</label>
|
|
189
|
+
<select id="themeSelect" title="Theme"></select>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="control-field background-control-field">
|
|
192
|
+
<label for="backgroundInput">Background</label>
|
|
193
|
+
<input id="backgroundInput" class="background-input" type="file" accept="image/png,image/jpeg,image/webp,image/gif" />
|
|
194
|
+
<div class="background-control-row">
|
|
195
|
+
<button id="backgroundChooseButton" type="button">Change background</button>
|
|
196
|
+
<button id="backgroundClearButton" class="background-clear-button" type="button" aria-label="Remove custom background" title="Remove custom background" hidden>×</button>
|
|
197
|
+
</div>
|
|
198
|
+
<div id="backgroundStatus" class="background-status muted">Theme default</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="control-field network-control-field">
|
|
201
|
+
<label>Network</label>
|
|
202
|
+
<div id="networkStatus" class="network-status closed">Local only</div>
|
|
203
|
+
<button id="openNetworkButton" type="button">Open to network</button>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="control-field notification-control-field">
|
|
206
|
+
<span class="control-label">Notifications</span>
|
|
207
|
+
<label class="toggle-control" for="agentDoneNotificationsToggle">
|
|
208
|
+
<input id="agentDoneNotificationsToggle" type="checkbox" />
|
|
209
|
+
<span>
|
|
210
|
+
<span class="toggle-control-label">Agent done notifications</span>
|
|
211
|
+
<span id="agentDoneNotificationsStatus" class="toggle-control-hint">Off</span>
|
|
212
|
+
</span>
|
|
213
|
+
</label>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
143
216
|
</div>
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<button id="setThinkingButton" type="button">Set thinking</button>
|
|
217
|
+
</section>
|
|
218
|
+
<section class="side-panel-section" data-side-panel-section="optional-features">
|
|
219
|
+
<h2>
|
|
220
|
+
<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">
|
|
221
|
+
<span class="side-panel-section-label">Optional features</span>
|
|
222
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
223
|
+
</button>
|
|
224
|
+
</h2>
|
|
225
|
+
<div id="sidePanelSectionOptionalFeatures" class="side-panel-section-content">
|
|
226
|
+
<div id="optionalFeaturesBox" class="optional-features-box muted">Checking optional features…</div>
|
|
155
227
|
</div>
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
228
|
+
</section>
|
|
229
|
+
<section class="side-panel-section" data-side-panel-section="session">
|
|
230
|
+
<h2>
|
|
231
|
+
<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">
|
|
232
|
+
<span class="side-panel-section-label">Session</span>
|
|
233
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
234
|
+
</button>
|
|
235
|
+
</h2>
|
|
236
|
+
<div id="sidePanelSectionSession" class="side-panel-section-content">
|
|
237
|
+
<dl id="stateDetails" class="details"></dl>
|
|
159
238
|
</div>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<button id="
|
|
239
|
+
</section>
|
|
240
|
+
<section class="side-panel-section" data-side-panel-section="queue">
|
|
241
|
+
<h2>
|
|
242
|
+
<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">
|
|
243
|
+
<span class="side-panel-section-label">Queue</span>
|
|
244
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
245
|
+
</button>
|
|
246
|
+
</h2>
|
|
247
|
+
<div id="sidePanelSectionQueue" class="side-panel-section-content">
|
|
248
|
+
<div id="queueBox" class="queue-box muted">No queued messages.</div>
|
|
164
249
|
</div>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<span>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
250
|
+
</section>
|
|
251
|
+
<section class="side-panel-section" data-side-panel-section="commands">
|
|
252
|
+
<h2>
|
|
253
|
+
<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">
|
|
254
|
+
<span class="side-panel-section-label">Commands</span>
|
|
255
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
256
|
+
</button>
|
|
257
|
+
</h2>
|
|
258
|
+
<div id="sidePanelSectionCommands" class="side-panel-section-content">
|
|
259
|
+
<div id="commandsBox" class="commands-box muted">Loading…</div>
|
|
174
260
|
</div>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
261
|
+
</section>
|
|
262
|
+
<section class="side-panel-section" data-side-panel-section="events">
|
|
263
|
+
<h2>
|
|
264
|
+
<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">
|
|
265
|
+
<span class="side-panel-section-label">Events</span>
|
|
266
|
+
<span class="side-panel-section-chevron" aria-hidden="true">›</span>
|
|
267
|
+
</button>
|
|
268
|
+
</h2>
|
|
269
|
+
<div id="sidePanelSectionEvents" class="side-panel-section-content">
|
|
270
|
+
<div id="eventLog" class="event-log"></div>
|
|
271
|
+
</div>
|
|
272
|
+
</section>
|
|
187
273
|
</div>
|
|
188
274
|
</aside>
|
|
189
275
|
</main>
|
|
@@ -215,6 +301,17 @@
|
|
|
215
301
|
</form>
|
|
216
302
|
</dialog>
|
|
217
303
|
|
|
304
|
+
<dialog id="nativeCommandDialog" class="extension-dialog native-command-dialog">
|
|
305
|
+
<form method="dialog">
|
|
306
|
+
<h2 id="nativeCommandTitle">Pi command</h2>
|
|
307
|
+
<p id="nativeCommandMessage" class="muted"></p>
|
|
308
|
+
<input id="nativeCommandSearch" class="dialog-input native-command-search" type="search" placeholder="Filter choices…" autocomplete="off" hidden />
|
|
309
|
+
<div id="nativeCommandBody" class="native-command-body"></div>
|
|
310
|
+
<p id="nativeCommandError" class="path-picker-error" hidden></p>
|
|
311
|
+
<menu id="nativeCommandActions"></menu>
|
|
312
|
+
</form>
|
|
313
|
+
</dialog>
|
|
314
|
+
|
|
218
315
|
<script type="module" src="/app.js"></script>
|
|
219
316
|
</body>
|
|
220
317
|
</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
|
|