@firstpick/pi-package-webui 0.1.0
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/LICENSE +21 -0
- package/README.md +95 -0
- package/bin/pi-webui.mjs +808 -0
- package/index.ts +271 -0
- package/package.json +37 -0
- package/public/app.js +1340 -0
- package/public/index.html +123 -0
- package/public/styles.css +1122 -0
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Pi Web UI</title>
|
|
7
|
+
<link rel="stylesheet" href="/styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<button id="sidePanelExpandButton" class="side-panel-expand-button" type="button" aria-controls="sidePanel" aria-expanded="false" aria-label="Expand side panel" title="Expand side panel">
|
|
11
|
+
<span class="side-panel-button-icon" aria-hidden="true">
|
|
12
|
+
<span></span><span></span><span></span>
|
|
13
|
+
</span>
|
|
14
|
+
<span class="side-panel-button-chevron" aria-hidden="true">‹</span>
|
|
15
|
+
</button>
|
|
16
|
+
|
|
17
|
+
<main class="layout">
|
|
18
|
+
<section class="chat-panel">
|
|
19
|
+
<div id="widgetArea" class="widget-area"></div>
|
|
20
|
+
<div id="chat" class="chat" aria-live="polite"></div>
|
|
21
|
+
<div id="statusBar" class="statusbar" aria-live="polite"></div>
|
|
22
|
+
<section id="gitWorkflowPanel" class="git-workflow-panel" aria-live="polite" hidden>
|
|
23
|
+
<div class="git-workflow-header">
|
|
24
|
+
<div>
|
|
25
|
+
<span class="git-workflow-kicker">Git workflow</span>
|
|
26
|
+
<strong id="gitWorkflowTitle">Ready</strong>
|
|
27
|
+
<p id="gitWorkflowHint" class="muted">Stage changes, generate a commit message, commit, and push.</p>
|
|
28
|
+
</div>
|
|
29
|
+
<button id="gitWorkflowCancelButton" type="button">Cancel</button>
|
|
30
|
+
</div>
|
|
31
|
+
<div id="gitWorkflowSteps" class="git-workflow-steps"></div>
|
|
32
|
+
<pre id="gitWorkflowOutput" class="git-workflow-output"></pre>
|
|
33
|
+
<div id="gitWorkflowActions" class="git-workflow-actions"></div>
|
|
34
|
+
</section>
|
|
35
|
+
<form id="composer" class="composer">
|
|
36
|
+
<textarea id="promptInput" rows="4" placeholder="Ask Pi…"></textarea>
|
|
37
|
+
<div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command suggestions" hidden></div>
|
|
38
|
+
<div class="composer-row">
|
|
39
|
+
<label>
|
|
40
|
+
Busy prompt behavior
|
|
41
|
+
<select id="busyBehavior">
|
|
42
|
+
<option value="followUp">follow-up</option>
|
|
43
|
+
<option value="steer">steer</option>
|
|
44
|
+
</select>
|
|
45
|
+
</label>
|
|
46
|
+
<div class="spacer"></div>
|
|
47
|
+
<button id="newSessionButton" class="composer-new-button" type="button">New</button>
|
|
48
|
+
<button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
|
|
49
|
+
<button
|
|
50
|
+
id="gitWorkflowButton"
|
|
51
|
+
class="composer-git-button"
|
|
52
|
+
type="button"
|
|
53
|
+
title="Guided Git workflow: git add ., /git-staged-msg, preview messages, commit short/long, git push. Cancel is available at each step."
|
|
54
|
+
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."
|
|
55
|
+
data-tooltip="Guided Git 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."
|
|
56
|
+
>Git workflow</button>
|
|
57
|
+
<button id="steerButton" type="button">Steer</button>
|
|
58
|
+
<button id="followUpButton" type="button">Follow-up</button>
|
|
59
|
+
<button type="submit" class="primary">Send</button>
|
|
60
|
+
</div>
|
|
61
|
+
</form>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<aside id="sidePanel" class="side-panel">
|
|
65
|
+
<div class="side-panel-header">
|
|
66
|
+
<div>
|
|
67
|
+
<span class="side-panel-kicker">Pi Web UI</span>
|
|
68
|
+
<strong>Control Deck</strong>
|
|
69
|
+
<p id="sessionLine" class="side-panel-session-line muted">Connecting…</p>
|
|
70
|
+
</div>
|
|
71
|
+
<button id="toggleSidePanelButton" class="side-panel-toggle-button" type="button" aria-controls="sidePanel" aria-expanded="true" aria-label="Collapse side panel" title="Collapse side panel">
|
|
72
|
+
<span class="side-panel-button-icon" aria-hidden="true">
|
|
73
|
+
<span></span><span></span><span></span>
|
|
74
|
+
</span>
|
|
75
|
+
<span class="side-panel-button-chevron" aria-hidden="true">›</span>
|
|
76
|
+
</button>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="side-panel-body">
|
|
79
|
+
<h2>Controls</h2>
|
|
80
|
+
<div class="side-panel-controls">
|
|
81
|
+
<div class="control-field">
|
|
82
|
+
<label for="modelSelect">Model</label>
|
|
83
|
+
<select id="modelSelect" title="Model"></select>
|
|
84
|
+
<button id="setModelButton" type="button">Set model</button>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="control-field">
|
|
87
|
+
<label for="thinkingSelect">Thinking</label>
|
|
88
|
+
<select id="thinkingSelect" title="Thinking level">
|
|
89
|
+
<option value="off">off</option>
|
|
90
|
+
<option value="minimal">minimal</option>
|
|
91
|
+
<option value="low">low</option>
|
|
92
|
+
<option value="medium">medium</option>
|
|
93
|
+
<option value="high">high</option>
|
|
94
|
+
<option value="xhigh">xhigh</option>
|
|
95
|
+
</select>
|
|
96
|
+
<button id="setThinkingButton" type="button">Set thinking</button>
|
|
97
|
+
</div>
|
|
98
|
+
<button id="abortButton" type="button" class="danger">Abort</button>
|
|
99
|
+
</div>
|
|
100
|
+
<h2>Session</h2>
|
|
101
|
+
<dl id="stateDetails" class="details"></dl>
|
|
102
|
+
<h2>Queue</h2>
|
|
103
|
+
<div id="queueBox" class="queue-box muted">No queued messages.</div>
|
|
104
|
+
<h2>Commands</h2>
|
|
105
|
+
<div id="commandsBox" class="commands-box muted">Loading…</div>
|
|
106
|
+
<h2>Events</h2>
|
|
107
|
+
<div id="eventLog" class="event-log"></div>
|
|
108
|
+
</div>
|
|
109
|
+
</aside>
|
|
110
|
+
</main>
|
|
111
|
+
|
|
112
|
+
<dialog id="extensionDialog" class="extension-dialog">
|
|
113
|
+
<form id="dialogForm" method="dialog">
|
|
114
|
+
<h2 id="dialogTitle">Pi request</h2>
|
|
115
|
+
<p id="dialogMessage" class="muted"></p>
|
|
116
|
+
<div id="dialogBody"></div>
|
|
117
|
+
<menu id="dialogActions"></menu>
|
|
118
|
+
</form>
|
|
119
|
+
</dialog>
|
|
120
|
+
|
|
121
|
+
<script type="module" src="/app.js"></script>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|