npm - @firstpick/pi-package-webui - Versions diffs - 0.1.0 → 0.1.2 - Mend

@firstpick/pi-package-webui 0.1.0 → 0.1.2

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.

Files changed (14) hide show

package/README.md +142 -44
package/bin/pi-webui.mjs +878 -43
package/index.ts +454 -22
package/package.json +7 -2
package/public/app.js +1185 -44
package/public/apple-touch-icon.png +0 -0
package/public/favicon.svg +8 -0
package/public/icon-192.png +0 -0
package/public/icon-512.png +0 -0
package/public/index.html +74 -20
package/public/manifest.webmanifest +40 -0
package/public/service-worker.js +46 -0
package/public/styles.css +1014 -19
package/tests/mobile-static.test.mjs +170 -0

package/public/apple-touch-icon.png ADDED Viewed

Binary file

package/public/favicon.svg ADDED Viewed

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Pi Web UI">
+  <rect width="64" height="64" rx="14" fill="#11111b"/>
+  <rect x="5" y="5" width="54" height="54" rx="12" fill="#1e1e2e" stroke="#89b4fa" stroke-width="3"/>
+  <path d="M17 20h31" fill="none" stroke="#f5c2e7" stroke-width="8" stroke-linecap="round"/>
+  <path d="M24 21v27" fill="none" stroke="#94e2d5" stroke-width="8" stroke-linecap="round"/>
+  <path d="M43 21v27" fill="none" stroke="#94e2d5" stroke-width="8" stroke-linecap="round"/>
+  <path d="M17 48h10" fill="none" stroke="#cba6f7" stroke-width="6" stroke-linecap="round" opacity="0.95"/>
+</svg>

package/public/icon-192.png ADDED Viewed

Binary file

package/public/icon-512.png ADDED Viewed

Binary file

package/public/index.html CHANGED Viewed

@@ -2,8 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <title>Pi Web UI</title>
+    <meta name="theme-color" content="#11111b" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Pi Web" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body>
@@ -16,8 +24,15 @@
     <main class="layout">
       <section class="chat-panel">
+        <header class="terminal-tabs-shell">
+          <button id="terminalTabsToggleButton" class="terminal-tabs-toggle-button" type="button" aria-controls="tabBar" aria-expanded="false">Tabs</button>
+          <div id="tabBar" class="terminal-tabs" role="tablist" aria-label="Pi terminal tabs">
+            <button id="newTabButton" class="terminal-new-tab-button" type="button" title="Start a separate isolated Pi terminal">+ Tab</button>
+          </div>
+        </header>
         <div id="widgetArea" class="widget-area"></div>
         <div id="chat" class="chat" aria-live="polite"></div>
+        <button id="jumpToLatestButton" class="jump-to-latest-button" type="button" hidden>Latest ↓</button>
         <div id="statusBar" class="statusbar" aria-live="polite"></div>
         <section id="gitWorkflowPanel" class="git-workflow-panel" aria-live="polite" hidden>
           <div class="git-workflow-header">
@@ -33,34 +48,50 @@
           <div id="gitWorkflowActions" class="git-workflow-actions"></div>
         </section>
         <form id="composer" class="composer">
-          <textarea id="promptInput" rows="4" placeholder="Ask Pi…"></textarea>
+          <textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…"></textarea>
           <div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command suggestions" hidden></div>
           <div class="composer-row">
-            <label>
-              Busy prompt behavior
-              <select id="busyBehavior">
-                <option value="followUp">follow-up</option>
-                <option value="steer">steer</option>
-              </select>
-            </label>
+            <button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false">Actions</button>
+            <div id="composerActionsPanel" class="composer-actions-panel" aria-label="Composer actions">
+              <label>
+                Busy prompt behavior
+                <select id="busyBehavior">
+                  <option value="followUp">follow-up</option>
+                  <option value="steer">steer</option>
+                </select>
+              </label>
+              <button id="newSessionButton" class="composer-new-button" type="button">New</button>
+              <button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
+              <button
+                id="gitWorkflowButton"
+                class="composer-git-button"
+                type="button"
+                title="Guided Git workflow: git add ., /git-staged-msg, preview messages, commit short/long, git push. Cancel is available at each step."
+                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."
+                data-tooltip="Guided Git workflow:&#10;1. Run git add .&#10;2. Run /git-staged-msg&#10;3. Preview short + long messages&#10;4. Commit with short or long message&#10;5. Run git push&#10;Cancel is available at each step."
+              >Git workflow</button>
+            </div>
             <div class="spacer"></div>
-            <button id="newSessionButton" class="composer-new-button" type="button">New</button>
-            <button id="compactButton" class="composer-compact-button" type="button" title="Compact the current Pi session context">Compact</button>
             <button
-              id="gitWorkflowButton"
-              class="composer-git-button"
+              id="steerButton"
+              type="button"
+              title="Type your message first, then tap Steer to guide the active Pi run without sending a normal prompt. Use it for corrections or direction changes while Pi is working."
+              aria-label="Steer: type your message first, then tap this button to guide the active Pi run."
+              data-tooltip="Steer usage:&#10;1. Type your steering message in the textarea.&#10;2. Tap Steer to guide the active Pi run.&#10;Use for corrections or direction changes while Pi is working."
+            >Steer</button>
+            <button
+              id="followUpButton"
               type="button"
-              title="Guided Git workflow: git add ., /git-staged-msg, preview messages, commit short/long, git push. Cancel is available at each step."
-              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."
-              data-tooltip="Guided Git workflow:&#10;1. Run git add .&#10;2. Run /git-staged-msg&#10;3. Preview short + long messages&#10;4. Commit with short or long message&#10;5. Run git push&#10;Cancel is available at each step."
-            >Git workflow</button>
-            <button id="steerButton" type="button">Steer</button>
-            <button id="followUpButton" type="button">Follow-up</button>
-            <button type="submit" class="primary">Send</button>
+              title="Type your message first, then tap Follow-up to send it as a follow-up instead of a normal prompt. Use it to add extra context or the next request."
+              aria-label="Follow-up: type your message first, then tap this button to send it as a follow-up."
+              data-tooltip="Follow-up usage:&#10;1. Type your message in the textarea.&#10;2. Tap Follow-up to send it as a follow-up.&#10;Use for extra context or the next request."
+            >Follow-up</button>
+            <button id="sendButton" type="submit" class="primary">Send</button>
           </div>
         </form>
       </section>
+      <button id="sidePanelBackdrop" class="side-panel-backdrop" type="button" aria-label="Close side panel" hidden></button>
       <aside id="sidePanel" class="side-panel">
         <div class="side-panel-header">
           <div>
@@ -95,6 +126,11 @@
               </select>
               <button id="setThinkingButton" type="button">Set thinking</button>
             </div>
+            <div class="control-field network-control-field">
+              <label>Network</label>
+              <div id="networkStatus" class="network-status closed">Local only</div>
+              <button id="openNetworkButton" type="button">Open to network</button>
+            </div>
             <button id="abortButton" type="button" class="danger">Abort</button>
           </div>
           <h2>Session</h2>
@@ -118,6 +154,24 @@
       </form>
     </dialog>
+    <dialog id="pathPickerDialog" class="extension-dialog path-picker-dialog">
+      <form method="dialog">
+        <h2 id="pathPickerTitle">Choose working directory</h2>
+        <div class="path-picker-current-row">
+          <p id="pathPickerCurrent" class="path-picker-current"></p>
+          <button id="pathPickerAddFastPickButton" type="button" class="path-picker-add-fast-pick">Add fast pick</button>
+        </div>
+        <div id="pathPickerFastPicks" class="path-picker-fast-picks" aria-label="Fast picks"></div>
+        <div id="pathPickerRoots" class="path-picker-roots"></div>
+        <div id="pathPickerList" class="path-picker-list" role="listbox" aria-label="Directories"></div>
+        <p id="pathPickerError" class="path-picker-error" hidden></p>
+        <menu>
+          <button id="pathPickerCancelButton" type="button">Cancel</button>
+          <button id="pathPickerChooseButton" type="button" class="primary">Use this directory</button>
+        </menu>
+      </form>
+    </dialog>
     <script type="module" src="/app.js"></script>
   </body>
 </html>

package/public/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "id": "/",
+  "name": "Pi Web UI",
+  "short_name": "Pi Web",
+  "description": "Mobile-friendly web interface for Pi coding agent sessions.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone", "minimal-ui", "browser"],
+  "background_color": "#11111b",
+  "theme_color": "#11111b",
+  "orientation": "any",
+  "categories": ["developer", "productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/public/service-worker.js ADDED Viewed

@@ -0,0 +1,46 @@
+const CACHE_NAME = "pi-webui-pwa-v1";
+const APP_SHELL = [
+  "/",
+  "/index.html",
+  "/styles.css",
+  "/app.js",
+  "/favicon.svg",
+  "/apple-touch-icon.png",
+  "/icon-192.png",
+  "/icon-512.png",
+  "/manifest.webmanifest",
+];
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)).then(() => self.skipWaiting()));
+});
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))))
+      .then(() => self.clients.claim()),
+  );
+});
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin || url.pathname.startsWith("/api/")) return;
+  if (request.mode === "navigate") {
+    event.respondWith(fetch(request).catch(() => caches.match("/index.html")));
+    return;
+  }
+  if (!APP_SHELL.includes(url.pathname)) return;
+  event.respondWith(
+    caches.match(request).then((cached) => cached || fetch(request).then((response) => {
+      const copy = response.clone();
+      caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+      return response;
+    })),
+  );
+});