@firstpick/pi-package-webui 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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",

package/public/app.js

@@ -83,6 +83,8 @@ const elements = {
   setThinkingButton: $("#setThinkingButton"),
   thinkingVisibilityToggle: $("#thinkingVisibilityToggle"),
   thinkingVisibilityStatus: $("#thinkingVisibilityStatus"),
+  terminalTabsLayoutSelect: $("#terminalTabsLayoutSelect"),
+  terminalTabsLayoutStatus: $("#terminalTabsLayoutStatus"),
   themeSelect: $("#themeSelect"),
   backgroundInput: $("#backgroundInput"),
   backgroundChooseButton: $("#backgroundChooseButton"),
@@ -251,6 +253,7 @@ let blockedTabNotificationPermissionRequested = false;
 let blockedTabNotificationFallbackNoted = false;
 let agentDoneNotificationsEnabled = false;
 let thinkingOutputVisible = true;
+let terminalTabsLayout = "top";
 let webuiSettings = {};
 let busyPromptBehavior = "followUp";
 let autocompleteMaxVisible = 12;
@@ -296,6 +299,7 @@ const TAB_STORAGE_KEY = "pi-webui-active-tab";
 const PATH_FAST_PICKS_STORAGE_KEY = "pi-webui-path-fast-picks";
 const AGENT_DONE_NOTIFICATIONS_STORAGE_KEY = "pi-webui-agent-done-notifications";
 const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible";
+const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout";
 const TOOL_OUTPUT_EXPANDED_STORAGE_KEY = "pi-webui-tool-output-expanded";
 const THEME_STORAGE_KEY = "pi-webui-theme";
 const CUSTOM_BACKGROUND_STORAGE_KEY = "pi-webui-custom-background";
@@ -325,6 +329,8 @@ const LONG_INPUT_ATTACHMENT_MIME_TYPE = "text/plain";
 const INLINE_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
 const BACKGROUND_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
 const DEFAULT_THEME_NAME = "catppuccin-mocha";
+const TERMINAL_TABS_LAYOUTS = new Set(["top", "left"]);
+const TERMINAL_TABS_LAYOUT_LABELS = { top: "Top bar", left: "Left sidebar" };
 const MOBILE_VIEW_QUERY = "(max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
 const SIDE_PANEL_OVERLAY_QUERY = "(max-width: 1050px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
 const CHAT_BOTTOM_THRESHOLD_PX = 96;
@@ -789,6 +795,26 @@ function persistThinkingOutputVisible(visible) {
   }
 }
 
+function normalizeTerminalTabsLayout(value) {
+  return TERMINAL_TABS_LAYOUTS.has(value) ? value : "top";
+}
+
+function readStoredTerminalTabsLayout() {
+  try {
+    return normalizeTerminalTabsLayout(localStorage.getItem(TERMINAL_TABS_LAYOUT_STORAGE_KEY));
+  } catch {
+    return "top";
+  }
+}
+
+function persistTerminalTabsLayout(layout) {
+  try {
+    localStorage.setItem(TERMINAL_TABS_LAYOUT_STORAGE_KEY, normalizeTerminalTabsLayout(layout));
+  } catch {
+    // Ignore storage failures; the layout control should still work for this page load.
+  }
+}
+
 function readStoredToolOutputExpanded() {
   try {
     return localStorage.getItem(TOOL_OUTPUT_EXPANDED_STORAGE_KEY) === "1";
@@ -816,6 +842,30 @@ function renderThinkingVisibilityToggle() {
   if (elements.thinkingVisibilityStatus) elements.thinkingVisibilityStatus.textContent = thinkingVisibilityStatusText();
 }
 
+function terminalTabsLayoutStatusText(layout = terminalTabsLayout) {
+  return TERMINAL_TABS_LAYOUT_LABELS[normalizeTerminalTabsLayout(layout)] || TERMINAL_TABS_LAYOUT_LABELS.top;
+}
+
+function renderTerminalTabsLayoutControl() {
+  const layout = normalizeTerminalTabsLayout(terminalTabsLayout);
+  if (elements.terminalTabsLayoutSelect) elements.terminalTabsLayoutSelect.value = layout;
+  if (elements.terminalTabsLayoutStatus) elements.terminalTabsLayoutStatus.textContent = terminalTabsLayoutStatusText(layout);
+}
+
+function setTerminalTabsLayout(layout, { persist = true, announce = false } = {}) {
+  const next = normalizeTerminalTabsLayout(layout);
+  terminalTabsLayout = next;
+  document.body.classList.toggle("terminal-tabs-left", next === "left");
+  if (next === "left" && mobileTabsExpanded) setMobileTabsExpanded(false);
+  if (persist) persistTerminalTabsLayout(next);
+  renderTerminalTabsLayoutControl();
+  if (announce) addEvent(`terminal tabs layout changed to ${terminalTabsLayoutStatusText(next).toLowerCase()}`);
+}
+
+function restoreTerminalTabsLayoutSetting() {
+  setTerminalTabsLayout(readStoredTerminalTabsLayout(), { persist: false });
+}
+
 function removeStreamingThinkingBubble() {
   streamThinkingBubble?.remove();
   streamThinkingBubble = null;
@@ -12831,6 +12881,11 @@ if (elements.thinkingVisibilityToggle) {
     setThinkingOutputVisible(elements.thinkingVisibilityToggle.checked, { announce: true });
   });
 }
+if (elements.terminalTabsLayoutSelect) {
+  elements.terminalTabsLayoutSelect.addEventListener("change", () => {
+    setTerminalTabsLayout(elements.terminalTabsLayoutSelect.value, { announce: true });
+  });
+}
 elements.toggleSidePanelButton.addEventListener("click", () => {
   setSidePanelCollapsed(true);
 });
@@ -13142,6 +13197,7 @@ initializeThemes().catch((error) => {
 initializeFastPicks().catch((error) => addEvent(`failed to initialize path fast picks: ${error.message}`, "error"));
 restoreAgentDoneNotificationsSetting();
 restoreThinkingVisibilitySetting();
+restoreTerminalTabsLayoutSetting();
 restoreToolOutputExpansionSetting();
 restoreSidePanelSectionState();
 bindSidePanelSectionToggles();

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=35" />
+    <link rel="stylesheet" href="/styles.css?v=36" />
   </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">
@@ -294,6 +294,14 @@
                     </span>
                   </label>
                 </div>
+                <div class="control-field terminal-tabs-layout-control-field">
+                  <label for="terminalTabsLayoutSelect">Tabs layout</label>
+                  <select id="terminalTabsLayoutSelect" title="Terminal tabs layout" aria-describedby="terminalTabsLayoutStatus">
+                    <option value="top">Top bar</option>
+                    <option value="left">Left sidebar</option>
+                  </select>
+                  <div id="terminalTabsLayoutStatus" class="terminal-tabs-layout-status toggle-control-hint">Top bar</div>
+                </div>
                 <div class="control-field">
                   <label for="themeSelect">Theme</label>
                   <select id="themeSelect" title="Theme"></select>
@@ -541,6 +549,6 @@
       </form>
     </dialog>
 
-    <script type="module" src="/app.js?v=36"></script>
+    <script type="module" src="/app.js?v=37"></script>
   </body>
 </html>

package/public/styles.css

@@ -1494,6 +1494,102 @@ body.side-panel-collapsed .terminal-tabs-shell {
   box-shadow: 0 0 1rem rgba(245, 194, 231, 0.20);
 }
 
+@media (min-width: 721px) {
+  body.terminal-tabs-left .chat-panel {
+    display: grid;
+    grid-template-columns: clamp(13rem, 18vw, 19rem) minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto;
+    align-items: stretch;
+  }
+  body.terminal-tabs-left .terminal-tabs-shell {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.58rem;
+    min-width: 0;
+    min-height: 0;
+    padding: 0.76rem;
+    border-right: 1px solid rgba(180, 190, 254, 0.16);
+    border-bottom: 0;
+    background:
+      linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.96), rgba(var(--ctp-base-rgb), 0.82), rgba(var(--ctp-mantle-rgb), 0.92)),
+      radial-gradient(circle at 0% 0%, rgba(245, 194, 231, 0.12), transparent 18rem);
+    box-shadow: inset -1px 0 0 rgba(255,255,255,0.035), 0.45rem 0 1rem rgba(var(--ctp-crust-rgb), 0.18);
+  }
+  body.terminal-tabs-left.side-panel-collapsed .terminal-tabs-shell {
+    padding-right: 0.76rem;
+  }
+  body.terminal-tabs-left .terminal-tabs {
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 0;
+    padding-right: 0.08rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  body.terminal-tabs-left .terminal-tabs.terminal-tabs-dense {
+    flex-wrap: nowrap;
+    max-height: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  body.terminal-tabs-left .terminal-tab,
+  body.terminal-tabs-left .terminal-tabs.terminal-tabs-dense .terminal-tab {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+  body.terminal-tabs-left .terminal-tab-group-menu {
+    --terminal-left-dropdown-bridge: 0.78rem;
+    inset: 0 auto auto 100%;
+    width: clamp(13rem, 18vw, 20rem);
+    min-width: 13rem;
+    max-width: min(22rem, calc(100vw - 2rem));
+    padding-top: 0;
+    padding-left: var(--terminal-left-dropdown-bridge);
+  }
+  body.terminal-tabs-left .terminal-new-tab-menu.composer-publish-menu {
+    width: 100%;
+  }
+  body.terminal-tabs-left .terminal-new-tab-button,
+  body.terminal-tabs-left .terminal-close-all-button {
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
+  }
+  body.terminal-tabs-left .terminal-new-tab-menu .composer-publish-menu-panel {
+    --terminal-left-dropdown-bridge: 0.78rem;
+    inset: 0 auto auto 100%;
+    width: clamp(12rem, 16vw, 18rem);
+    min-width: 12rem;
+    padding-top: 0;
+    padding-left: var(--terminal-left-dropdown-bridge);
+  }
+  body.terminal-tabs-left .terminal-close-all-button {
+    margin-top: auto;
+  }
+  body.terminal-tabs-left .widget-area,
+  body.terminal-tabs-left .chat,
+  body.terminal-tabs-left .feedback-tray,
+  body.terminal-tabs-left .jump-to-latest-button,
+  body.terminal-tabs-left .statusbar,
+  body.terminal-tabs-left .git-workflow-panel,
+  body.terminal-tabs-left .composer {
+    grid-column: 2;
+    min-width: 0;
+  }
+  body.terminal-tabs-left .widget-area { grid-row: 1; }
+  body.terminal-tabs-left .chat { grid-row: 2; }
+  body.terminal-tabs-left .feedback-tray { grid-row: 3; }
+  body.terminal-tabs-left .jump-to-latest-button { grid-row: 4; }
+  body.terminal-tabs-left .statusbar { grid-row: 5; }
+  body.terminal-tabs-left .git-workflow-panel { grid-row: 6; }
+  body.terminal-tabs-left .composer { grid-row: 7; }
+}
+
 .widget-area {
   flex: 0 0 auto;
   border-bottom: 1px solid rgba(180, 190, 254, 0.16);

package/tests/mobile-static.test.mjs

@@ -61,6 +61,8 @@ assert.match(html, /id="agentDoneNotificationsToggle"/, "side panel should expos
 assert.match(html, /id="agentDoneNotificationsStatus"/, "agent-done notifications toggle should expose status text");
 assert.match(html, /id="thinkingVisibilityToggle"/, "side panel should expose a thinking-output visibility toggle");
 assert.match(html, /id="thinkingVisibilityStatus"/, "thinking-output visibility toggle should expose status text");
+assert.match(html, /id="terminalTabsLayoutSelect"[\s\S]*<option value="left">Left sidebar<\/option>/, "side panel controls should expose a terminal-tabs layout selector");
+assert.match(html, /id="terminalTabsLayoutStatus"/, "terminal-tabs layout selector should expose status text");
 assert.match(html, /id="nativeCommandDialog"/, "native slash selector UI should have a dedicated dialog");
 assert.match(html, /id="nativeCommandSearch"[^>]*type="search"/, "native slash selector dialog should expose a filter box");
 assert.match(html, /id="pathPickerCreateNameInput"[^>]*placeholder="New directory name"/, "cwd picker should expose a new-directory name input");
@@ -253,6 +255,11 @@ 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, /body\.terminal-tabs-left \.chat-panel \{[\s\S]*?grid-template-columns:\s*clamp\(13rem, 18vw, 19rem\) minmax\(0, 1fr\)/, "terminal tabs left layout should split the chat panel into a sidebar and transcript area");
+assert.match(css, /body\.terminal-tabs-left \.terminal-tabs-shell \{[\s\S]*?grid-column:\s*1;[\s\S]*?grid-row:\s*1 \/ -1;[\s\S]*?flex-direction:\s*column/, "terminal tabs left layout should turn the top tab strip into a vertical sidebar");
+assert.match(css, /body\.terminal-tabs-left \.terminal-tabs \{[\s\S]*?flex-direction:\s*column/, "terminal tabs left layout should stack tabs vertically");
+assert.match(css, /body\.terminal-tabs-left \.terminal-tab-group-menu \{[\s\S]*?inset:\s*0 auto auto 100%;[\s\S]*?padding-left:\s*var\(--terminal-left-dropdown-bridge\)/, "left-sidebar grouped tab menus should include a hover bridge so they do not vanish between button and dropdown");
+assert.match(css, /body\.terminal-tabs-left \.terminal-new-tab-menu \.composer-publish-menu-panel \{[\s\S]*?inset:\s*0 auto auto 100%;[\s\S]*?padding-left:\s*var\(--terminal-left-dropdown-bridge\)/, "left-sidebar new-tab dropdown should include a hover bridge so it does not vanish between button and dropdown");
 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");
@@ -334,6 +341,9 @@ assert.match(app, /const CUSTOM_BACKGROUNDS_STORAGE_KEY = "pi-webui-custom-backg
 assert.match(app, /const CUSTOM_BACKGROUND_IDB_NAME = "pi-webui-custom-background"/, "custom backgrounds should prefer IndexedDB persistence for large images");
 assert.match(app, /const SIDE_PANEL_SECTION_STORAGE_KEY = "pi-webui-side-panel-sections-collapsed"/, "side-panel section collapse state should be persisted in browser storage");
 assert.match(app, /const AGENT_DONE_NOTIFICATIONS_STORAGE_KEY = "pi-webui-agent-done-notifications"/, "agent-done notification preference should be persisted in browser storage");
+assert.match(app, /const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout"/, "terminal-tabs layout preference should be persisted in browser storage");
+assert.match(app, /document\.body\.classList\.toggle\("terminal-tabs-left", next === "left"\)/, "terminal-tabs layout should toggle a body class for CSS layout");
+assert.match(app, /terminalTabsLayoutSelect\.addEventListener\("change"/, "terminal-tabs layout selector should update the browser layout immediately");
 assert.match(app, /async function initializeThemes\(\)/, "frontend should initialize bundled themes");
 assert.match(app, /api\("\/api\/themes", \{ scoped: false \}\)/, "theme loading should use the unscoped themes endpoint");
 assert.match(app, /function applyTheme\(theme/, "frontend should apply a selected theme to CSS variables");