@firstpick/pi-package-webui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "repository": {

package/public/app.js

@@ -5,7 +5,11 @@ const elements = {
   webuiDevBadge: $("#webuiDevBadge"),
   tabBar: $("#tabBar"),
   terminalTabsToggleButton: $("#terminalTabsToggleButton"),
+  newTabMenu: $("#newTabMenu"),
   newTabButton: $("#newTabButton"),
+  newTabMenuPanel: $("#newTabMenuPanel"),
+  newTabCurrentDirectoryButton: $("#newTabCurrentDirectoryButton"),
+  newTabChooseDirectoryButton: $("#newTabChooseDirectoryButton"),
   closeAllTabsButton: $("#closeAllTabsButton"),
   statusBar: $("#statusBar"),
   serverOfflinePanel: $("#serverOfflinePanel"),
@@ -181,6 +185,7 @@ let pathFastPicksReady = false;
 let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
+let newTabMenuOpen = false;
 let nativeCommandMenuOpen = false;
 let optionsMenuOpen = false;
 let availableCommands = [];
@@ -2873,6 +2878,34 @@ function clearOpenTerminalTabGroup(groupKey, { force = false } = {}) {
   syncTabPolling();
 }
 
+function setNewTabMenuOpen(open) {
+  newTabMenuOpen = !!open;
+  elements.newTabButton?.setAttribute("aria-expanded", newTabMenuOpen ? "true" : "false");
+  elements.newTabButton?.classList.toggle("menu-open", newTabMenuOpen);
+  elements.newTabMenu?.classList.toggle("open", newTabMenuOpen);
+}
+
+function openNewTabMenu() {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setNewTabMenuOpen(true);
+}
+
+function focusNewTabMenuItem(direction = "first") {
+  const items = [elements.newTabCurrentDirectoryButton, elements.newTabChooseDirectoryButton].filter(Boolean);
+  const item = direction === "last" ? items.at(-1) : items[0];
+  item?.focus({ preventScroll: true });
+}
+
+function moveNewTabMenuFocus(delta) {
+  const items = [elements.newTabCurrentDirectoryButton, elements.newTabChooseDirectoryButton].filter(Boolean);
+  if (!items.length) return;
+  const currentIndex = Math.max(0, items.indexOf(document.activeElement));
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  items[nextIndex].focus({ preventScroll: true });
+}
+
 function renderTabs() {
   const active = activeTab();
   const activeIndicator = active ? tabIndicator(active) : null;
@@ -2891,7 +2924,7 @@ function renderTabs() {
       for (const tab of group.tabs) elements.tabBar.append(renderTerminalTab(tab));
     }
   }
-  elements.tabBar.append(elements.newTabButton);
+  elements.tabBar.append(elements.newTabMenu);
   elements.closeAllTabsButton.disabled = tabs.length === 0;
   updateTerminalTabGroupOpenState();
   setMobileTabsExpanded(mobileTabsExpanded);
@@ -2933,12 +2966,17 @@ async function switchTab(tabId) {
   if (isCurrentTabContext(tabContext)) markTabOutputSeen();
 }
 
-async function createTerminalTab(cwd = activeTab()?.cwd, { triggerButton = elements.newTabButton } = {}) {
+function currentDirectoryForNewTab() {
+  return latestWorkspace?.cwd || activeTab()?.cwd || "";
+}
+
+async function createTerminalTab(cwd = currentDirectoryForNewTab(), { triggerButton = elements.newTabButton } = {}) {
   setMobileTabsExpanded(false);
+  setNewTabMenuOpen(false);
   const disabledButtons = new Set([elements.newTabButton, triggerButton].filter(Boolean));
   for (const button of disabledButtons) button.disabled = true;
   try {
-    const response = await api("/api/tabs", { method: "POST", body: { cwd: cwd || activeTab()?.cwd }, scoped: false });
+    const response = await api("/api/tabs", { method: "POST", body: { cwd: cwd || currentDirectoryForNewTab() }, scoped: false });
     tabs = response.data?.tabs || tabs;
     syncTabMetadata(tabs);
     const tab = response.data?.tab;
@@ -2954,6 +2992,16 @@ async function createTerminalTab(cwd = activeTab()?.cwd, { triggerButton = eleme
   }
 }
 
+async function createTerminalTabFromChosenDirectory({ triggerButton = elements.newTabChooseDirectoryButton } = {}) {
+  const sourceTab = activeTab();
+  const initialCwd = currentDirectoryForNewTab();
+  setMobileTabsExpanded(false);
+  setNewTabMenuOpen(false);
+  const cwd = await pickCwd(sourceTab || { id: "new-tab", title: "new tab" }, initialCwd, { title: "Choose CWD for new tab" });
+  if (!cwd) return;
+  await createTerminalTab(cwd, { triggerButton });
+}
+
 function tabHasActiveAgent(tab) {
   const activity = activityForTab(tab);
   const indicator = tabIndicator(tab);
@@ -3748,7 +3796,7 @@ const GIT_FOOTER_TOOLTIP_COPY = {
   git: "Current Git branch. detached means HEAD is not on a branch; no repo means the cwd is outside a Git work tree.",
   "git-state": "Active Git operation or detached state. Finish or abort rebase/merge/cherry-pick/revert/bisect before normal commits.",
   sync: "Remote tracking divergence. ↑ means local commits ahead; ↓ means remote commits to pull.",
-  changes: "Working tree summary. ✅ staged, ✏️ modified unstaged, ➕ untracked, ⚠️ conflicted; clean means no changes.",
+  changes: "Working tree summary. 🟢 staged, ✏️ modified unstaged, ➕ untracked, ⚠️ conflicted; ✅ means no changes.",
   "git-extra": "Extra Git signals. 📦 stash, 🧩 dirty submodules, 🌳 worktrees, 🏷️ tag at HEAD, 🕒 last commit age, 🔓 signing mismatch.",
   model: "Scoped model for this tab.",
   thinking: "Reasoning/thinking effort for this tab.",
@@ -4469,12 +4517,13 @@ function closePathPicker(cwd) {
   state.resolve(cwd || null);
 }
 
-function pickCwd(tab, initialCwd) {
+function pickCwd(tab, initialCwd, { title } = {}) {
   if (pathPickerState) return Promise.resolve(null);
 
   return new Promise((resolve) => {
-    pathPickerState = { tabId: tab.id, cwd: initialCwd, requestId: 0, loading: false, creatingDirectory: false, directories: [], filteredDirectories: [], resolve };
-    elements.pathPickerTitle.textContent = `Choose CWD for ${tab.title}`;
+    const pickerTab = tab || { id: "path-picker", title: "tab" };
+    pathPickerState = { tabId: pickerTab.id, cwd: initialCwd, requestId: 0, loading: false, creatingDirectory: false, directories: [], filteredDirectories: [], resolve };
+    elements.pathPickerTitle.textContent = title || `Choose CWD for ${pickerTab.title}`;
     elements.pathPickerCurrent.textContent = "Loading…";
     elements.pathPickerCreateNameInput.value = "";
     elements.pathPickerSearchInput.value = "";
@@ -11051,7 +11100,47 @@ elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton
 elements.terminalTabsToggleButton.addEventListener("click", () => {
   setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
 });
-elements.newTabButton.addEventListener("click", () => createTerminalTab());
+elements.newTabButton.addEventListener("click", (event) => {
+  event.stopPropagation();
+  openNewTabMenu();
+});
+elements.newTabButton.addEventListener("keydown", (event) => {
+  if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  openNewTabMenu();
+  focusNewTabMenuItem(event.key === "ArrowUp" ? "last" : "first");
+});
+elements.newTabMenuPanel?.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    setNewTabMenuOpen(false);
+    elements.newTabButton.focus({ preventScroll: true });
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    moveNewTabMenuFocus(1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    moveNewTabMenuFocus(-1);
+  } else if (event.key === "Home") {
+    event.preventDefault();
+    focusNewTabMenuItem("first");
+  } else if (event.key === "End") {
+    event.preventDefault();
+    focusNewTabMenuItem("last");
+  }
+});
+elements.newTabMenu?.addEventListener("pointerenter", () => openNewTabMenu());
+elements.newTabMenu?.addEventListener("pointerleave", () => {
+  if (!elements.newTabMenu?.contains(document.activeElement)) setNewTabMenuOpen(false);
+});
+elements.newTabMenu?.addEventListener("focusin", () => openNewTabMenu());
+elements.newTabMenu?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!elements.newTabMenu?.contains(document.activeElement)) setNewTabMenuOpen(false);
+  }, 0);
+});
+elements.newTabCurrentDirectoryButton?.addEventListener("click", () => createTerminalTab(currentDirectoryForNewTab(), { triggerButton: elements.newTabCurrentDirectoryButton }));
+elements.newTabChooseDirectoryButton?.addEventListener("click", () => createTerminalTabFromChosenDirectory({ triggerButton: elements.newTabChooseDirectoryButton }));
 elements.closeAllTabsButton.addEventListener("click", () => closeAllTerminalTabs());
 elements.gitWorkflowButton.addEventListener("click", () => {
   setComposerActionsOpen(false);
@@ -11339,6 +11428,9 @@ document.addEventListener("pointerdown", (event) => {
   if (openTerminalTabGroupKey && !event.target?.closest?.(".terminal-tab-group")) {
     clearOpenTerminalTabGroup(openTerminalTabGroupKey);
   }
+  if (newTabMenuOpen && !event.target?.closest?.(".terminal-new-tab-menu")) {
+    setNewTabMenuOpen(false);
+  }
   if (document.body.classList.contains("composer-actions-open") && !elements.composer.contains(event.target)) {
     setComposerActionsOpen(false);
   }
@@ -11352,6 +11444,7 @@ document.addEventListener("pointerdown", (event) => {
     setOptionsMenuOpen(false);
   }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
+    setNewTabMenuOpen(false);
     setMobileTabsExpanded(false);
   }
   if (isFooterPickerOpen() && !elements.statusBar.contains(event.target)) {
@@ -11446,11 +11539,16 @@ window.addEventListener("keydown", (event) => {
     setOptionsMenuOpen(false);
     return;
   }
+  if (newTabMenuOpen) {
+    setNewTabMenuOpen(false);
+    return;
+  }
   if (document.body.classList.contains("composer-actions-open")) {
     setComposerActionsOpen(false);
     return;
   }
   if (document.body.classList.contains("mobile-tabs-expanded")) {
+    setNewTabMenuOpen(false);
     setMobileTabsExpanded(false);
     return;
   }

package/public/index.html

@@ -12,7 +12,7 @@
     <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?v=24" />
+    <link rel="stylesheet" href="/styles.css?v=25" />
   </head>
   <body>
     <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">
@@ -50,7 +50,13 @@
         <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 id="newTabMenu" class="terminal-new-tab-menu composer-publish-menu">
+              <button id="newTabButton" class="terminal-new-tab-button" type="button" title="Start a separate isolated Pi terminal" aria-haspopup="menu" aria-expanded="false" aria-controls="newTabMenuPanel">+ Tab ▾</button>
+              <div id="newTabMenuPanel" class="terminal-new-tab-menu-panel composer-publish-menu-panel" role="menu" aria-labelledby="newTabButton">
+                <button id="newTabCurrentDirectoryButton" class="terminal-new-tab-menu-item composer-publish-menu-item" type="button" role="menuitem"><span>Current Directory</span></button>
+                <button id="newTabChooseDirectoryButton" class="terminal-new-tab-menu-item composer-publish-menu-item" type="button" role="menuitem"><span>Choose Directory</span></button>
+              </div>
+            </div>
           </div>
           <button id="closeAllTabsButton" class="terminal-close-all-button" type="button" title="Close all terminal tabs">Close all Tabs</button>
         </header>
@@ -467,6 +473,6 @@
       </form>
     </dialog>
 
-    <script type="module" src="/app.js?v=24"></script>
+    <script type="module" src="/app.js?v=25"></script>
   </body>
 </html>

package/public/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "pi-webui-pwa-v23";
+const CACHE_NAME = "pi-webui-pwa-v24";
 const APP_SHELL = [
   "/",
   "/index.html",

package/public/styles.css

@@ -1173,12 +1173,18 @@ body.side-panel-collapsed .terminal-tabs-shell {
 }
 .terminal-tabs-shell:has(.terminal-tab-group:hover),
 .terminal-tabs-shell:has(.terminal-tab-group:focus-within),
-.terminal-tabs-shell:has(.terminal-tab-group.menu-open) {
+.terminal-tabs-shell:has(.terminal-tab-group.menu-open),
+.terminal-tabs-shell:has(.terminal-new-tab-menu:hover),
+.terminal-tabs-shell:has(.terminal-new-tab-menu:focus-within),
+.terminal-tabs-shell:has(.terminal-new-tab-menu.open) {
   z-index: 90;
 }
 .terminal-tabs:has(.terminal-tab-group:hover),
 .terminal-tabs:has(.terminal-tab-group:focus-within),
-.terminal-tabs:has(.terminal-tab-group.menu-open) {
+.terminal-tabs:has(.terminal-tab-group.menu-open),
+.terminal-tabs:has(.terminal-new-tab-menu:hover),
+.terminal-tabs:has(.terminal-new-tab-menu:focus-within),
+.terminal-tabs:has(.terminal-new-tab-menu.open) {
   overflow: visible;
 }
 .terminal-tab {
@@ -1445,6 +1451,10 @@ body.side-panel-collapsed .terminal-tabs-shell {
 .terminal-tab-group-close {
   border-left-color: rgba(243, 139, 168, 0.18);
 }
+.terminal-new-tab-menu.composer-publish-menu {
+  flex: 0 0 auto;
+  margin-right: 0;
+}
 .terminal-new-tab-button {
   flex: 0 0 auto;
   padding: 0.45rem 0.72rem;
@@ -1455,10 +1465,33 @@ body.side-panel-collapsed .terminal-tabs-shell {
     linear-gradient(120deg, rgba(245, 194, 231, 0.12), rgba(137, 180, 250, 0.08)),
     rgba(var(--ctp-crust-rgb), 0.58);
 }
-.terminal-new-tab-button:hover {
+.terminal-new-tab-button:hover,
+.terminal-new-tab-button.menu-open {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve), var(--ctp-blue));
+}
+.terminal-new-tab-menu.open .terminal-new-tab-button {
+  border-color: rgba(245, 194, 231, 0.58);
+}
+.terminal-new-tab-menu .composer-publish-menu-panel {
+  inset: 100% 0 auto auto;
+  padding-top: 0.38rem;
+  padding-bottom: 0;
+}
+.terminal-new-tab-menu .composer-publish-menu-item {
+  color: var(--ctp-pink);
+  border-color: rgba(245, 194, 231, 0.32);
+  background:
+    linear-gradient(120deg, rgba(245, 194, 231, 0.12), rgba(137, 180, 250, 0.08)),
+    var(--ctp-crust);
+}
+.terminal-new-tab-menu .composer-publish-menu-item:hover,
+.terminal-new-tab-menu .composer-publish-menu-item:focus-visible {
   color: #11111b;
   border-color: transparent;
   background: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve), var(--ctp-blue));
+  box-shadow: 0 0 1rem rgba(245, 194, 231, 0.20);
 }
 
 .widget-area {
@@ -4589,7 +4622,10 @@ summary { cursor: pointer; color: var(--warning); }
   }
   .terminal-tabs:has(.terminal-tab-group:hover),
   .terminal-tabs:has(.terminal-tab-group:focus-within),
-  .terminal-tabs:has(.terminal-tab-group.menu-open) {
+  .terminal-tabs:has(.terminal-tab-group.menu-open),
+  .terminal-tabs:has(.terminal-new-tab-menu:hover),
+  .terminal-tabs:has(.terminal-new-tab-menu:focus-within),
+  .terminal-tabs:has(.terminal-new-tab-menu.open) {
     overflow: auto;
   }
   .terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
@@ -4620,9 +4656,27 @@ summary { cursor: pointer; color: var(--warning); }
     max-width: 100%;
     flex: 0 0 auto;
   }
+  .terminal-new-tab-menu {
+    width: auto;
+    flex-wrap: wrap;
+  }
+  .terminal-new-tab-menu.open,
+  .terminal-new-tab-menu:focus-within {
+    flex-basis: 100%;
+  }
+  .terminal-new-tab-menu .composer-publish-menu-panel {
+    position: static;
+    width: 100%;
+    min-width: min(11rem, 100%);
+    max-width: 100%;
+    margin: 0.34rem 0 0;
+    padding-top: 0;
+    overflow: visible;
+  }
   .terminal-tab-button,
   .terminal-tab-close,
   .terminal-new-tab-button,
+  .terminal-new-tab-menu-item,
   .terminal-tab-group-add { min-height: 44px; }
   .terminal-tab-button { padding: 0.32rem 0.52rem; }
   .terminal-tab-title { font-size: 0.78rem; }
@@ -4637,6 +4691,11 @@ summary { cursor: pointer; color: var(--warning); }
     padding: 0.36rem 0.58rem;
     white-space: nowrap;
   }
+  .terminal-new-tab-menu-item {
+    width: 100%;
+    max-width: 100%;
+    padding: 0.42rem 0.58rem;
+  }
   .widget-area {
     display: block;
     max-height: 34dvh;

package/tests/mobile-static.test.mjs

@@ -41,6 +41,11 @@ assert.match(html, /<meta name="theme-color" content="#11111b" \/>/, "PWA should
 assert.match(html, /<link rel="manifest" href="\/manifest\.webmanifest" \/>/, "PWA should expose a web app manifest");
 assert.match(html, /<link rel="apple-touch-icon" href="\/apple-touch-icon\.png" \/>/, "PWA should expose the conventional iOS home-screen icon path");
 assert.match(html, /id="terminalTabsToggleButton"/, "mobile should expose a compact terminal-tabs toggle");
+assert.match(html, /id="newTabMenu" class="terminal-new-tab-menu composer-publish-menu"/, "new-tab control should reuse the shared composer dropdown container");
+assert.match(html, /id="newTabButton"[\s\S]*aria-haspopup="menu"[\s\S]*aria-controls="newTabMenuPanel"/, "new-tab control should open a dropdown menu");
+assert.match(html, /id="newTabMenuPanel" class="terminal-new-tab-menu-panel composer-publish-menu-panel"/, "new-tab menu should reuse the shared composer dropdown panel");
+assert.match(html, /id="newTabCurrentDirectoryButton" class="terminal-new-tab-menu-item composer-publish-menu-item"[\s\S]*<span>Current Directory<\/span>/, "new-tab menu should offer the active cwd");
+assert.match(html, /id="newTabChooseDirectoryButton" class="terminal-new-tab-menu-item composer-publish-menu-item"[\s\S]*<span>Choose Directory<\/span>/, "new-tab menu should offer the cwd picker");
 assert.match(html, /id="closeAllTabsButton"[\s\S]*?>Close all Tabs<\/button>/, "tab header should expose a top-right close-all tabs action");
 assert.match(html, /id="sidePanelBackdrop"/, "mobile side panel needs an overlay/backdrop close target");
 assert.match(html, /<strong class="side-panel-title">[\s\S]*Control Deck[\s\S]*id="webuiVersionBadge"[\s\S]*id="webuiDevBadge"/, "Control Deck title should expose Web UI version and dev badges");
@@ -216,6 +221,8 @@ assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?gri
 assert.match(css, /\.composer-actions-panel[\s\S]*?bottom:\s*calc\(100% \+ 0\.42rem\)/, "mobile composer actions should open as an above-composer sheet");
 assert.match(css, /body\.composer-actions-open \.composer-actions-panel \{ display: grid; \}/, "composer actions panel should only open when toggled");
 assert.match(css, /\.terminal-tabs-toggle-button \{ display: none; \}/, "terminal tab toggle should be hidden outside mobile CSS");
+assert.match(css, /\.terminal-new-tab-menu \.composer-publish-menu-panel \{[\s\S]*?inset:\s*100% 0 auto auto;[\s\S]*?padding-top:\s*0\.38rem/, "new-tab dropdown should reuse the shared composer panel and open below the tab bar");
+assert.match(css, /\.terminal-new-tab-menu \.composer-publish-menu-item \{[\s\S]*?color:\s*var\(--ctp-pink\)/, "new-tab dropdown items should reuse shared composer menu items with a tab-specific color");
 assert.match(css, /\.terminal-close-all-button \{[\s\S]*?color:\s*var\(--ctp-red\)/, "close-all tabs action should render as a top-right destructive tab action");
 assert.match(css, /\.terminal-tabs\.terminal-tabs-dense \{[\s\S]*?flex-wrap:\s*wrap/, "large terminal tab sets should wrap into a readable dense tab strip");
 assert.match(css, /\.terminal-tab-group-close \{[\s\S]*?border-left-color/, "terminal tab groups should style their close button distinctly");
@@ -737,7 +744,7 @@ assert.equal(manifest.start_url, "/", "PWA manifest should start at the web UI r
 assert.ok(manifest.icons?.some((icon) => icon.src === "/apple-touch-icon.png" && icon.sizes === "180x180"), "PWA manifest should include a conventional 180px apple touch icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-192.png" && icon.sizes === "192x192"), "PWA manifest should include a 192px icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-512.png" && icon.sizes === "512x512"), "PWA manifest should include a 512px icon");
-assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v23"/, "PWA service worker should define an app-shell cache");
+assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v24"/, "PWA service worker should define an app-shell cache");
 assert.match(serviceWorker, /self\.addEventListener\("notificationclick"/, "PWA service worker should focus Web UI when blocked-tab notifications are clicked");
 assert.match(serviceWorker, /event\.notification\.data\?\.url/, "blocked-tab notifications should carry a URL for service-worker click handling");
 assert.match(serviceWorker, /"\/apple-touch-icon\.png"/, "PWA service worker should cache the apple touch icon");