npm - @firstpick/pi-package-webui - Versions diffs - 0.1.1 → 0.1.3 - Mend

@firstpick/pi-package-webui 0.1.1 → 0.1.3

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 (13) hide show

package/README.md +44 -17
package/bin/pi-webui.mjs +1483 -35
package/index.ts +430 -23
package/package.json +9 -3
package/public/app.js +3067 -176
package/public/apple-touch-icon.png +0 -0
package/public/icon-192.png +0 -0
package/public/icon-512.png +0 -0
package/public/index.html +60 -24
package/public/manifest.webmanifest +40 -0
package/public/service-worker.js +58 -0
package/public/styles.css +1348 -125
package/tests/mobile-static.test.mjs +370 -0

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

Binary file

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,9 +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>
@@ -18,11 +25,20 @@
     <main class="layout">
       <section class="chat-panel">
         <header class="terminal-tabs-shell">
-          <div id="tabBar" class="terminal-tabs" role="tablist" aria-label="Pi terminal tabs"></div>
-          <button id="newTabButton" class="terminal-new-tab-button" type="button" title="Start a separate isolated Pi terminal">+ Tab</button>
+          <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>
+        <div id="chat" class="chat" aria-live="polite">
+          <button id="stickyUserPromptButton" class="sticky-user-prompt-button" type="button" aria-controls="chat" hidden></button>
+        </div>
+        <div id="feedbackTray" class="feedback-tray" aria-live="polite" hidden>
+          <span id="feedbackTraySummary">No action feedback queued.</span>
+          <button id="sendFeedbackButton" type="button">Send &amp; create LEARNING</button>
+        </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">
@@ -38,34 +54,50 @@
           <div id="gitWorkflowActions" class="git-workflow-actions"></div>
         </section>
         <form id="composer" class="composer">
-          <textarea id="promptInput" rows="4" placeholder="Ask Pi…"></textarea>
-          <div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command suggestions" hidden></div>
+          <textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…" autofocus></textarea>
+          <div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path 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="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 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="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>
@@ -100,6 +132,10 @@
               </select>
               <button id="setThinkingButton" type="button">Set thinking</button>
             </div>
+            <div class="control-field">
+              <label for="themeSelect">Theme</label>
+              <select id="themeSelect" title="Theme"></select>
+            </div>
             <div class="control-field network-control-field">
               <label>Network</label>
               <div id="networkStatus" class="network-status closed">Local only</div>

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,58 @@
+const CACHE_NAME = "pi-webui-pwa-v6";
+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("notificationclick", (event) => {
+  event.notification.close();
+  const targetUrl = event.notification.data?.url || `${self.location.origin}/`;
+  event.waitUntil(
+    self.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clients) => {
+      const webuiClient = clients.find((client) => client.url.startsWith(self.location.origin));
+      if (webuiClient) return webuiClient.focus();
+      return self.clients.openWindow?.(targetUrl);
+    }),
+  );
+});
+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;
+    })),
+  );
+});