@firstpick/pi-package-webui 0.4.2 → 0.4.3

package/README.md

@@ -6,7 +6,7 @@ Local browser UI for [Pi coding agent](https://www.npmjs.com/package/@earendil-w
 
 Pi Web UI gives you a local browser companion for Pi: multi-tab chat, streaming output, model controls, uploads, slash-command helpers, workspace navigation, and optional extension widgets.
 
-> **Security:** Pi Web UI can control the spawned Pi session and run anything that session is allowed to run. It binds to `127.0.0.1` by default. Remote PIN authentication is off by default; enable it in **Controls → Network → Remote PIN auth** before exposing it on trusted networks.
+> **Security:** Pi Web UI can control the spawned Pi session and run anything that session is allowed to run. It binds to `127.0.0.1` by default. Remote PIN authentication is off by default on first use; enabling it in **Controls → Network → Remote PIN auth** persists that preference for later Web UI starts.
 
 ## Requirements
 
@@ -123,6 +123,7 @@ Environment variables:
 - `PI_WEBUI_PORT`
 - `PI_WEBUI_PI_BIN`
 - `PI_WEBUI_REMOTE_AUTH=1` to start with remote PIN authentication enabled
+- `PI_WEBUI_SETTINGS_FILE=/path/to/settings.json` to override where Web UI stores persisted settings such as the Remote PIN auth preference
 
 ## Main features
 
@@ -130,7 +131,7 @@ Environment variables:
 - Multi-tab Pi sessions with isolated processes, working directories, prompt drafts, activity state, and a workspace dashboard for common actions.
 - Unified command palette (`Ctrl/Cmd+K`) for commands, tabs, models, sessions, settings, and frequent Web UI actions.
 - Automatic tab naming from the first prompt, with `--name <name>` still available for an explicit initial tab name.
-- Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, edit-and-retry from user prompts, and abort controls.
+- Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, edit-and-retry from user prompts, and guarded abort controls that require holding Esc or the Abort button for 3 seconds.
 - Prompt composer with uploads, drag/drop/paste, inline image support, slash-command autocomplete, and `@` file/path references with live suggestions.
 - Browser dialogs for common Pi selectors such as `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/resume`, `/tree`, `/scoped-models`, `/tools`, and `/skills`.
 - Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, update/restart, event, and notification controls in the side panel.
@@ -175,6 +176,7 @@ Optional companions:
 - `@firstpick/pi-extension-setup-skills` — TUI `/skills` setup command alongside WebUI-native skill toggles.
 - `@firstpick/pi-extension-todo-progress` — todo-progress rendering.
 - `@firstpick/pi-extension-tools` — TUI `/tools` active-tool manager alongside WebUI-native tool toggles.
+- `@firstpick/pi-package-remote-webui` — `/remote` trusted-LAN QR helper for connecting mobile browsers to Web UI.
 - `@firstpick/pi-extension-git-footer-status` — richer extension-owned git/footer status, including the structured Web UI footer payload.
 - `@firstpick/pi-extension-stats` — stats commands and status data.
 - `@firstpick/pi-themes-bundle` — Web UI and Pi theme resources.
@@ -205,8 +207,8 @@ This requires `/git-staged-msg` and `/pr` from `@firstpick/pi-prompts-git-pr`; b
 
 - Default bind is localhost-only: `127.0.0.1:31415`.
 - The side-panel **Open to network** button rebinds the server to `0.0.0.0`, shows LAN URLs when available, and toggles to "Close for network".
-- The side-panel **Remote PIN auth** toggle is off by default. When enabled, the server generates a random 4-digit PIN, shows it in Controls and `/webui-status`, and requires it from non-local browser clients.
-- Localhost clients stay frictionless and can toggle Remote PIN auth; changing the toggle disconnects existing event streams so remote clients must re-authenticate after enablement.
+- The side-panel **Remote PIN auth** toggle is off by default on first use. When enabled, the server saves that preference, generates a fresh random 4-digit PIN for each server start, shows it in Controls and `/webui-status`, and requires it from non-local browser clients.
+- Localhost clients stay frictionless and can toggle Remote PIN auth; changing the toggle persists the preference and disconnects existing event streams so remote clients must re-authenticate after enablement.
 - `--host 0.0.0.0` also exposes the Web UI to the local network; pass `--remote-auth` to start with PIN auth already enabled.
 - Any connected browser client with access (and the PIN, if enabled) can control Pi and run Web UI bash actions as the Web UI process user.
 - Remote PIN auth is a simple trusted-LAN HTTP gate, not hardened multi-user authentication; do not expose it to untrusted networks.

package/WEBUI_TUI_NATIVE_PARITY.json

@@ -445,8 +445,8 @@
       "priority": "P1",
       "sensitive": false,
       "guards": ["confirmation"],
-      "currentBehavior": "Escape aborts active user bash first, then active agent runs, and closes UI surfaces with tab scoping.",
-      "targetBehavior": "Abort active bash first where applicable; keep agent/tab scoping and clear UI cancellation rules."
+      "currentBehavior": "Holding Escape for 3 seconds aborts active user bash first, then active agent runs, and closes UI surfaces with tab scoping before arming abort.",
+      "targetBehavior": "Abort active bash first where applicable; keep agent/tab scoping and clear UI cancellation rules with a guarded hold-to-abort affordance."
     },
     {
       "id": "shortcut.editor.clear",

package/bin/pi-webui.mjs

@@ -43,6 +43,7 @@ const publicDir = path.join(packageRoot, "public");
 const webuiHelperExtensionPath = path.join(packageRoot, "webui-rpc-helper.mjs");
 const agentDir = process.env.PI_CODING_AGENT_DIR || path.join(homedir(), ".pi", "agent");
 const OPTIONAL_FEATURE_INSTALL_ROOT_ENV = "PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT";
+const WEBUI_SETTINGS_FILE_ENV = "PI_WEBUI_SETTINGS_FILE";
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
 let piPackageJson = {};
 try {
@@ -227,6 +228,7 @@ const OPTIONAL_FEATURE_PACKAGES = new Map([
   ["tuiSkillsCommand", "@firstpick/pi-extension-setup-skills"],
   ["todoProgressWidget", "@firstpick/pi-extension-todo-progress"],
   ["tuiToolsCommand", "@firstpick/pi-extension-tools"],
+  ["remoteWebui", "@firstpick/pi-package-remote-webui"],
   ["gitFooterStatus", "@firstpick/pi-extension-git-footer-status"],
   ["statsCommand", "@firstpick/pi-extension-stats"],
   ["themeBundle", "@firstpick/pi-themes-bundle"],
@@ -265,8 +267,8 @@ Examples:
 
 Security:
   The web UI controls Pi tools. It binds to localhost by default. Remote PIN
-  authentication is off by default; enable it in Controls or with --remote-auth
-  before exposing the server on trusted networks.
+  authentication is off by default on first use; enabling it in Controls saves
+  that preference for later starts.
 `);
 }
 
@@ -289,6 +291,7 @@ function parseArgs(argv) {
     noSession: false,
     name: undefined,
     remoteAuth: isTruthyEnv(process.env.PI_WEBUI_REMOTE_AUTH),
+    remoteAuthExplicit: process.env.PI_WEBUI_REMOTE_AUTH !== undefined,
     piArgs: [],
     help: false,
     version: false,
@@ -345,10 +348,12 @@ function parseArgs(argv) {
     }
     if (arg === "--remote-auth") {
       options.remoteAuth = true;
+      options.remoteAuthExplicit = true;
       continue;
     }
     if (arg === "--no-remote-auth") {
       options.remoteAuth = false;
+      options.remoteAuthExplicit = true;
       continue;
     }
     throw new Error(`Unknown option: ${arg}. Pass Pi CLI args after --.`);
@@ -739,7 +744,7 @@ function sendRemoteAuthPage(res, returnPath = "/") {
 <body>
   <main>
     <h1>Remote PIN required</h1>
-    <p>Enter the 4-digit PIN shown in the local Pi terminal or local Web UI to continue.</p>
+    <p>Scan a trusted /remote QR code to unlock automatically, or enter the 4-digit PIN shown in the local Pi terminal or local Web UI.</p>
     <form id="pinForm" autocomplete="off">
       <label for="pin">PIN</label>
       <input id="pin" name="pin" inputmode="numeric" pattern="[0-9]{4}" maxlength="4" autofocus required>
@@ -753,16 +758,19 @@ function sendRemoteAuthPage(res, returnPath = "/") {
     const input = document.getElementById("pin");
     const button = document.getElementById("submit");
     const error = document.getElementById("error");
-    input.addEventListener("input", () => { input.value = input.value.replace(/\\D/g, "").slice(0, 4); error.textContent = ""; });
-    form.addEventListener("submit", async (event) => {
-      event.preventDefault();
+    function pinFromHash() {
+      const params = new URLSearchParams(String(window.location.hash || "").replace(/^#/, ""));
+      const pin = String(params.get("pin") || "").trim();
+      return /^\\d{4}$/.test(pin) ? pin : "";
+    }
+    async function submitPin(pin) {
       button.disabled = true;
       error.textContent = "";
       try {
         const response = await fetch("/api/remote-auth", {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ pin: input.value }),
+          body: JSON.stringify({ pin }),
         });
         const data = await response.json().catch(() => ({}));
         if (!response.ok || data.ok !== true) throw new Error(data.error || "Incorrect PIN");
@@ -773,7 +781,18 @@ function sendRemoteAuthPage(res, returnPath = "/") {
       } finally {
         button.disabled = false;
       }
+    }
+    input.addEventListener("input", () => { input.value = input.value.replace(/\\D/g, "").slice(0, 4); error.textContent = ""; });
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      await submitPin(input.value);
     });
+    const autoPin = pinFromHash();
+    if (autoPin) {
+      input.value = autoPin;
+      window.history.replaceState(null, "", window.location.pathname + (window.location.search || ""));
+      submitPin(autoPin);
+    }
   </script>
 </body>
 </html>`;
@@ -1332,6 +1351,50 @@ async function writePathFastPicks(picks) {
   return normalized;
 }
 
+function webuiSettingsFile() {
+  if (process.env[WEBUI_SETTINGS_FILE_ENV]) return path.resolve(expandUserPath(process.env[WEBUI_SETTINGS_FILE_ENV]));
+  const configRoot = process.env.XDG_CONFIG_HOME || path.join(homedir(), ".config");
+  return path.join(configRoot, "pi-webui", "settings.json");
+}
+
+function normalizeWebuiSettings(value) {
+  return {
+    version: 1,
+    remoteAuthEnabled: value?.remoteAuthEnabled === true,
+  };
+}
+
+let webuiSettingsCache = null;
+
+async function readWebuiSettings() {
+  if (webuiSettingsCache) return webuiSettingsCache;
+  webuiSettingsCache = normalizeWebuiSettings(await readJsonFileIfExists(webuiSettingsFile()));
+  return webuiSettingsCache;
+}
+
+async function writeWebuiSettings(patch) {
+  const current = await readWebuiSettings();
+  const next = normalizeWebuiSettings({ ...current, ...(patch || {}) });
+  const storageFile = webuiSettingsFile();
+  await mkdir(path.dirname(storageFile), { recursive: true });
+  const tmpFile = `${storageFile}.${process.pid}.${Date.now()}.tmp`;
+  await writeFile(tmpFile, `${JSON.stringify(next, null, 2)}\n`, { mode: 0o600 });
+  await rename(tmpFile, storageFile);
+  webuiSettingsCache = next;
+  return next;
+}
+
+async function readPersistedRemoteAuthEnabled() {
+  return (await readWebuiSettings()).remoteAuthEnabled === true;
+}
+
+async function saveRemoteAuthPreference(enabled) {
+  const nextEnabled = enabled === true;
+  await writeWebuiSettings({ remoteAuthEnabled: nextEnabled });
+  persistedRemoteAuthEnabled = nextEnabled;
+  return persistedRemoteAuthEnabled;
+}
+
 function parseCliScopedModelPatterns() {
   for (let index = 0; index < options.piArgs.length; index++) {
     const arg = options.piArgs[index];
@@ -6606,6 +6669,7 @@ async function createInitialTabs() {
 }
 
 const serverStartedAt = new Date().toISOString();
+let persistedRemoteAuthEnabled = await readPersistedRemoteAuthEnabled();
 const initialTabs = await createInitialTabs();
 const initialTab = initialTabs[0];
 let currentHost = options.host;
@@ -6650,6 +6714,19 @@ function resetRemoteAuth() {
   remoteAuth.tokenExpiresAt = 0;
 }
 
+function remoteAuthPreferenceEnabled() {
+  return persistedRemoteAuthEnabled === true;
+}
+
+function remoteAuthStartupEnabled() {
+  return options.remoteAuthExplicit ? options.remoteAuth === true : remoteAuthPreferenceEnabled();
+}
+
+function remoteAuthStartupReason() {
+  if (options.remoteAuthExplicit) return "startup option";
+  return "saved setting";
+}
+
 function remoteAuthStatus({ includePin = false } = {}) {
   const enabled = !!remoteAuth.pin;
   const status = {
@@ -6798,9 +6875,9 @@ async function closeNetworkAccess() {
     await closeServerListener();
     await listenOn(nextHost);
     currentHost = nextHost;
-    resetRemoteAuth();
+    if (!remoteAuthPreferenceEnabled()) resetRemoteAuth();
     console.warn("Web UI network access closed; listening on localhost only.");
-    return networkStatus();
+    return networkStatus({ includeAuthPin: true });
   } catch (error) {
     console.error("Failed to close Web UI network access:", sanitizeError(error));
     if (!server.listening) {
@@ -6817,7 +6894,7 @@ async function closeNetworkAccess() {
   }
 }
 
-if (!isLocalHost(currentHost) && options.remoteAuth !== false) enableRemoteAuth("startup network listener");
+if (remoteAuthStartupEnabled()) enableRemoteAuth(remoteAuthStartupReason());
 
 async function safeRpcData(tab, command, timeoutMs = STATUS_RPC_TIMEOUT_MS) {
   try {
@@ -6961,9 +7038,13 @@ const server = createServer(async (req, res) => {
     if (url.pathname === "/api/remote-auth/settings" && req.method === "POST") {
       requireLocalhostRoute(req, url.pathname);
       const body = await readJsonBody(req);
-      if (body.enabled === true) enableRemoteAuth("side panel toggle");
-      else if (body.enabled === false) resetRemoteAuth();
-      else throw makeHttpError(400, "enabled must be true or false");
+      if (body.enabled === true) {
+        enableRemoteAuth("side panel toggle");
+        await saveRemoteAuthPreference(true);
+      } else if (body.enabled === false) {
+        resetRemoteAuth();
+        await saveRemoteAuthPreference(false);
+      } else throw makeHttpError(400, "enabled must be true or false");
       closeSseClientsForRemoteAuthChange();
       const headers = body.enabled === false ? { "set-cookie": clearRemoteAuthCookie() } : {};
       sendJson(res, 200, { ok: true, data: { auth: remoteAuthStatus({ includePin: true }), network: networkStatus({ includeAuthPin: true }) } }, headers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",
@@ -30,7 +30,8 @@
       "node_modules/@firstpick/pi-extension-setup-skills/index.ts",
       "node_modules/@firstpick/pi-extension-stats/index.ts",
       "node_modules/@firstpick/pi-extension-todo-progress/index.ts",
-      "node_modules/@firstpick/pi-extension-tools/index.ts"
+      "node_modules/@firstpick/pi-extension-tools/index.ts",
+      "node_modules/@firstpick/pi-package-remote-webui/index.ts"
     ],
     "skills": [
       "node_modules/@firstpick/pi-extension-release-aur/skills"
@@ -50,7 +51,7 @@
     "test": "node tests/run-all.mjs"
   },
   "dependencies": {
-    "@earendil-works/pi-coding-agent": "^0.79.1"
+    "@earendil-works/pi-coding-agent": "^0.79.3"
   },
   "optionalDependencies": {
     "@firstpick/pi-extension-git-footer-status": "^0.3.3",
@@ -61,6 +62,7 @@
     "@firstpick/pi-extension-stats": "^0.2.6",
     "@firstpick/pi-extension-todo-progress": "^0.2.4",
     "@firstpick/pi-extension-tools": "^0.1.6",
+    "@firstpick/pi-package-remote-webui": "^0.1.0",
     "@firstpick/pi-prompts-git-pr": "^0.1.2",
     "@firstpick/pi-themes-bundle": "^0.1.4"
   },