@firstpick/pi-package-webui 0.1.4 → 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 +34 -11
- package/bin/pi-webui.mjs +608 -26
- package/index.ts +82 -10
- package/package.json +34 -4
- package/public/app.js +3118 -211
- package/public/catppuccin-mocha-background.png +0 -0
- package/public/index.html +152 -52
- package/public/matrix-background.webp +0 -0
- package/public/service-worker.js +3 -1
- package/public/styles.css +772 -17
- package/tests/mobile-static.test.mjs +231 -36
|
Binary file
|
package/public/index.html
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
<div id="tabBar" class="terminal-tabs" role="tablist" aria-label="Pi terminal tabs">
|
|
30
30
|
<button id="newTabButton" class="terminal-new-tab-button" type="button" title="Start a separate isolated Pi terminal">+ Tab</button>
|
|
31
31
|
</div>
|
|
32
|
+
<button id="closeAllTabsButton" class="terminal-close-all-button" type="button" title="Close all terminal tabs">Close all Tabs</button>
|
|
32
33
|
</header>
|
|
33
34
|
<div id="widgetArea" class="widget-area"></div>
|
|
34
35
|
<div id="chat" class="chat" aria-live="polite">
|
|
@@ -54,10 +55,22 @@
|
|
|
54
55
|
<div id="gitWorkflowActions" class="git-workflow-actions"></div>
|
|
55
56
|
</section>
|
|
56
57
|
<form id="composer" class="composer">
|
|
57
|
-
<
|
|
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>
|
|
58
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>
|
|
59
72
|
<div class="composer-row">
|
|
60
|
-
<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>
|
|
61
74
|
<div id="composerActionsPanel" class="composer-actions-panel" aria-label="Composer actions">
|
|
62
75
|
<label>
|
|
63
76
|
Busy prompt behavior
|
|
@@ -70,23 +83,24 @@
|
|
|
70
83
|
<button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
|
|
71
84
|
<button
|
|
72
85
|
id="gitWorkflowButton"
|
|
73
|
-
class="composer-git-button"
|
|
86
|
+
class="composer-icon-button composer-git-button"
|
|
74
87
|
type="button"
|
|
75
|
-
title="Guided Git workflow
|
|
88
|
+
title="Guided Git workflow"
|
|
76
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."
|
|
77
|
-
data-tooltip="
|
|
78
|
-
|
|
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>
|
|
79
92
|
<div class="composer-publish-menu">
|
|
80
93
|
<button
|
|
81
94
|
id="publishButton"
|
|
82
|
-
class="composer-publish-button"
|
|
95
|
+
class="composer-icon-button composer-publish-button"
|
|
83
96
|
type="button"
|
|
84
97
|
title="Choose a publish workflow"
|
|
85
98
|
aria-label="Open publish workflows"
|
|
86
99
|
aria-haspopup="menu"
|
|
87
100
|
aria-expanded="false"
|
|
88
101
|
aria-controls="publishMenu"
|
|
89
|
-
|
|
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>
|
|
90
104
|
<div id="publishMenu" class="composer-publish-menu-panel" role="menu" aria-label="Publish workflows">
|
|
91
105
|
<button id="releaseNpmButton" class="composer-publish-menu-item" type="button" role="menuitem" data-command="/release-npm">
|
|
92
106
|
<span>NPM Release</span>
|
|
@@ -112,7 +126,8 @@
|
|
|
112
126
|
aria-label="Follow-up: type your message first, then tap this button to send it as a follow-up."
|
|
113
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."
|
|
114
128
|
>Follow-up</button>
|
|
115
|
-
<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>
|
|
116
131
|
</div>
|
|
117
132
|
</form>
|
|
118
133
|
</section>
|
|
@@ -133,54 +148,128 @@
|
|
|
133
148
|
</button>
|
|
134
149
|
</div>
|
|
135
150
|
<div class="side-panel-body">
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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>
|
|
142
216
|
</div>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<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>
|
|
154
227
|
</div>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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>
|
|
158
238
|
</div>
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<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>
|
|
163
249
|
</div>
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<span>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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>
|
|
173
260
|
</div>
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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>
|
|
184
273
|
</div>
|
|
185
274
|
</aside>
|
|
186
275
|
</main>
|
|
@@ -212,6 +301,17 @@
|
|
|
212
301
|
</form>
|
|
213
302
|
</dialog>
|
|
214
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
|
+
|
|
215
315
|
<script type="module" src="/app.js"></script>
|
|
216
316
|
</body>
|
|
217
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
|
|