@firstpick/pi-package-webui 0.2.6 → 0.2.8

package/public/index.html

@@ -108,11 +108,12 @@
                 id="gitWorkflowButton"
                 class="composer-icon-button composer-git-button"
                 type="button"
+                hidden
                 title="Guided Git workflow"
                 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="GitHub workflow:
1. Run git add .
2. Run /git-staged-msg
3. Preview short + long messages
4. Commit with short or long message
5. Run git push
Cancel is available at each step."
               ><svg class="composer-icon composer-icon-github" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></button>
-              <div class="composer-publish-menu">
+              <div class="composer-publish-menu" hidden>
                 <button
                   id="publishButton"
                   class="composer-icon-button composer-publish-button"
@@ -133,7 +134,7 @@
                   </button>
                 </div>
               </div>
-              <div class="composer-publish-menu composer-native-command-menu">
+              <div class="composer-publish-menu composer-native-command-menu" hidden>
                 <button
                   id="nativeCommandMenuButton"
                   class="composer-icon-button composer-publish-button composer-native-command-button"
@@ -154,6 +155,45 @@
                   </button>
                 </div>
               </div>
+              <div class="composer-publish-menu composer-options-menu">
+                <button
+                  id="optionsMenuButton"
+                  class="composer-icon-button composer-publish-button composer-options-button"
+                  type="button"
+                  title="Open common Pi options"
+                  aria-label="Open common Pi options"
+                  aria-haspopup="menu"
+                  aria-expanded="false"
+                  aria-controls="optionsMenu"
+                  data-tooltip="Options: resume, reload, name, clone, settings, export, fork, or tree."
+                ><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="8" cy="7" r="1.6" fill="currentColor"/><circle cx="16" cy="12" r="1.6" fill="currentColor"/><circle cx="11" cy="17" r="1.6" fill="currentColor"/></svg></button>
+                <div id="optionsMenu" class="composer-publish-menu-panel composer-options-menu-panel" role="menu" aria-label="Common Pi options">
+                  <button id="optionsTreeButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/tree">
+                    <span>Tree</span>
+                  </button>
+                  <button id="optionsForkButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/fork">
+                    <span>Fork</span>
+                  </button>
+                  <button id="optionsExportButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/export">
+                    <span>Export</span>
+                  </button>
+                  <button id="optionsSettingsButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/settings">
+                    <span>Settings</span>
+                  </button>
+                  <button id="optionsCloneButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/clone">
+                    <span>Clone Session</span>
+                  </button>
+                  <button id="optionsNameButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/name">
+                    <span>Name Session</span>
+                  </button>
+                  <button id="optionsReloadButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/reload">
+                    <span>Reload Pi</span>
+                  </button>
+                  <button id="optionsResumeButton" class="composer-publish-menu-item composer-options-menu-item" type="button" role="menuitem" data-command="/resume">
+                    <span>Resume Session</span>
+                  </button>
+                </div>
+              </div>
             </div>
             <div class="spacer"></div>
             <button
@@ -329,6 +369,7 @@
               </button>
             </h2>
             <div id="sidePanelSectionCommands" class="side-panel-section-content" hidden>
+              <input id="commandSearchInput" class="commands-search" type="search" placeholder="Search commands…" autocomplete="off" spellcheck="false" aria-label="Search commands" />
               <div id="commandsBox" class="commands-box muted">Loading…</div>
             </div>
           </section>

package/public/styles.css

@@ -636,6 +636,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
 .side-panel-section {
   display: grid;
   gap: 0.55rem;
+  min-width: 0;
 }
 .side-panel-section + .side-panel-section { margin-top: 0.78rem; }
 .side-panel-section h2 {
@@ -684,6 +685,9 @@ body.side-panel-collapsed .terminal-tabs-shell {
 .side-panel-section:not(.collapsed) .side-panel-section-chevron {
   transform: rotate(90deg);
 }
+.side-panel-section-content {
+  min-width: 0;
+}
 .side-panel-section.collapsed .side-panel-section-content,
 .side-panel-section-content[hidden] {
   display: none;
@@ -1481,11 +1485,20 @@ body.side-panel-collapsed .terminal-tabs-shell {
   gap: 0.5rem;
 }
 .footer-line-meta {
-  display: grid;
-  grid-template-columns: minmax(10rem, 1.9fr) minmax(5rem, 0.55fr) minmax(6.5rem, 0.6fr) minmax(7rem, 0.65fr) minmax(12rem, 1.2fr);
+  display: flex;
+  flex-wrap: nowrap;
   gap: 0.5rem;
   color: rgba(var(--ctp-subtext-rgb), 0.76);
 }
+.footer-line-meta .footer-meta {
+  flex: 0 1 max-content;
+}
+.footer-line-meta .footer-details-toggle {
+  flex: 0 0 auto;
+}
+.footer-workspace {
+  flex: 1 1 8rem;
+}
 .footer-line-tui {
   align-items: center;
   gap: 0.5rem;
@@ -1597,6 +1610,9 @@ button.footer-meta {
   cursor: pointer;
 }
 .footer-meta-action {
+  position: relative;
+  border-color: rgba(148, 226, 213, 0.26);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), inset 0 0 0 1px rgba(148, 226, 213, 0.055), 0 0.45rem 1rem rgba(0, 0, 0, 0.10);
   transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
 }
 .footer-meta-action:hover,
@@ -1648,12 +1664,20 @@ button.footer-meta {
   color: var(--ctp-teal);
   text-shadow: 0 0 0.6rem rgba(148, 226, 213, 0.22);
 }
+.footer-thinking .footer-meta-value {
+  color: var(--ctp-mauve);
+  text-shadow: 0 0 0.6rem rgba(203, 166, 247, 0.22);
+}
 .footer-model.footer-meta-action {
   border-color: rgba(148, 226, 213, 0.24);
 }
+.footer-thinking.footer-meta-action {
+  border-color: rgba(203, 166, 247, 0.24);
+}
 .footer-model-picker {
   position: absolute;
-  right: 0.95rem;
+  left: var(--footer-model-picker-left, auto);
+  right: var(--footer-model-picker-right, 0.95rem);
   bottom: calc(100% + 0.5rem);
   z-index: 40;
   display: grid;
@@ -1728,6 +1752,42 @@ button.footer-meta {
   color: var(--ctp-pink);
   text-shadow: 0 0 0.55rem rgba(245, 194, 231, 0.18);
 }
+.footer-changes,
+.footer-git-extra {
+  flex: 0 0 auto;
+}
+.footer-changes {
+  border-color: rgba(249, 226, 175, 0.36);
+  background:
+    linear-gradient(120deg, rgba(249, 226, 175, 0.14), rgba(250, 179, 135, 0.08)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.54), rgba(var(--ctp-crust-rgb), 0.36));
+}
+.footer-changes .footer-meta-label {
+  color: rgba(249, 226, 175, 0.88);
+  text-shadow: 0 0 0.52rem rgba(249, 226, 175, 0.20);
+}
+.footer-changes .footer-meta-value {
+  color: var(--ctp-yellow);
+  font-weight: 950;
+  letter-spacing: 0.01em;
+  text-shadow: 0 0 0.72rem rgba(249, 226, 175, 0.28);
+}
+.footer-git-extra {
+  border-color: rgba(137, 180, 250, 0.34);
+  background:
+    linear-gradient(120deg, rgba(137, 180, 250, 0.13), rgba(148, 226, 213, 0.08)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.50), rgba(var(--ctp-crust-rgb), 0.36));
+}
+.footer-git-extra .footer-meta-label {
+  color: rgba(137, 180, 250, 0.88);
+  text-shadow: 0 0 0.52rem rgba(137, 180, 250, 0.20);
+}
+.footer-git-extra .footer-meta-value {
+  color: var(--ctp-sky);
+  font-weight: 900;
+  letter-spacing: 0.01em;
+  text-shadow: 0 0 0.68rem rgba(137, 180, 250, 0.26);
+}
 .footer-runtime .footer-meta-value {
   color: var(--ctp-yellow);
 }
@@ -3141,6 +3201,9 @@ summary { cursor: pointer; color: var(--warning); }
   overflow: visible;
   isolation: isolate;
 }
+.composer-publish-menu[hidden] {
+  display: none !important;
+}
 .composer-publish-menu:hover,
 .composer-publish-menu:focus-within,
 .composer-publish-menu.open {
@@ -3207,6 +3270,22 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-native-command-menu.open .composer-native-command-button {
   border-color: rgba(203, 166, 247, 0.62);
 }
+.composer-options-button {
+  color: var(--ctp-sky);
+  border-color: rgba(137, 220, 235, 0.40);
+  background:
+    linear-gradient(120deg, rgba(137, 220, 235, 0.15), rgba(166, 227, 161, 0.10)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
+}
+.composer-options-button:hover,
+.composer-options-button.menu-open {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-sky), var(--ctp-teal), var(--ctp-green));
+  border-color: transparent;
+}
+.composer-options-menu.open .composer-options-button {
+  border-color: rgba(137, 220, 235, 0.62);
+}
 .composer-publish-menu-panel {
   position: absolute;
   z-index: 100;
@@ -3228,6 +3307,9 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-publish-menu.open .composer-publish-menu-panel {
   display: flex;
 }
+.composer-options-menu-panel {
+  max-height: min(88vh, 36rem);
+}
 .composer-publish-menu.open .composer-publish-button {
   border-color: rgba(250, 179, 135, 0.58);
 }
@@ -3270,6 +3352,20 @@ summary { cursor: pointer; color: var(--warning); }
   background: linear-gradient(120deg, var(--ctp-mauve), var(--ctp-blue));
   box-shadow: 0 0 1rem rgba(203, 166, 247, 0.20);
 }
+.composer-options-menu-item {
+  color: var(--ctp-sky);
+  border-color: rgba(137, 220, 235, 0.32);
+  background:
+    linear-gradient(120deg, rgba(137, 220, 235, 0.12), rgba(166, 227, 161, 0.08)),
+    var(--ctp-crust);
+}
+.composer-options-menu-item:hover,
+.composer-options-menu-item:focus-visible {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-sky), var(--ctp-teal));
+  box-shadow: 0 0 1rem rgba(137, 220, 235, 0.20);
+}
 .composer button[data-tooltip] {
   position: relative;
 }
@@ -3368,18 +3464,40 @@ summary { cursor: pointer; color: var(--warning); }
   padding: 0.72rem;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
 }
+.commands-search {
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 0.55rem;
+  padding: 0.5rem 0.62rem;
+  color: var(--ctp-text);
+  border-color: rgba(148, 226, 213, 0.24);
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.10), rgba(203, 166, 247, 0.08)),
+    rgba(var(--ctp-crust-rgb), 0.58);
+  font-size: 0.86rem;
+}
+.commands-search::placeholder {
+  color: rgba(var(--ctp-subtext-rgb), 0.62);
+}
 .commands-box {
+  max-width: 100%;
   max-height: min(32rem, 52vh);
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   font-size: 0.86rem;
 }
 .command-item {
   display: block;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   min-height: auto;
   margin: 0 0 0.5rem;
   padding: 0.48rem 0.56rem;
   text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.35;
   background: rgba(var(--ctp-surface-rgb), 0.18);
   border-color: rgba(180, 190, 254, 0.12);
   box-shadow: none;
@@ -3393,6 +3511,8 @@ summary { cursor: pointer; color: var(--warning); }
 }
 .command-item code {
   color: var(--ctp-green);
+  overflow-wrap: anywhere;
+  word-break: break-word;
   text-shadow: 0 0 0.7rem rgba(166, 227, 161, 0.25);
 }
 .event-log {
@@ -3648,12 +3768,96 @@ summary { cursor: pointer; color: var(--warning); }
 .native-selector-meta {
   font-size: 0.76rem;
 }
+.native-settings-panel {
+  display: grid;
+  gap: 0.82rem;
+}
+.native-settings-note {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.72rem 0.82rem;
+  border: 1px solid rgba(148, 226, 213, 0.18);
+  border-radius: 0.9rem;
+  background: linear-gradient(120deg, rgba(148, 226, 213, 0.10), rgba(137, 180, 250, 0.08));
+  color: rgba(var(--ctp-text-rgb), 0.86);
+}
+.native-settings-note span {
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
+  font-size: 0.84rem;
+}
+.native-settings-section {
+  border: 1px solid rgba(180, 190, 254, 0.15);
+  border-radius: 1rem;
+  background: rgba(var(--ctp-mantle-rgb), 0.42);
+  overflow: clip;
+}
+.native-settings-section-summary {
+  display: grid;
+  gap: 0.18rem;
+  padding: 0.78rem 0.9rem;
+  cursor: pointer;
+  list-style-position: inside;
+}
+.native-settings-section-summary:hover {
+  background: rgba(var(--ctp-surface-rgb), 0.24);
+}
+.native-settings-section-title,
+.native-settings-label-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.38rem;
+}
+.native-settings-section-title strong {
+  color: var(--text);
+}
+.native-settings-section-description {
+  color: rgba(var(--ctp-subtext-rgb), 0.76);
+  font-size: 0.82rem;
+}
+.native-settings-section .native-settings-grid {
+  padding: 0 0.82rem 0.82rem;
+}
 .native-settings-grid,
 .native-tree-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap: 0.72rem;
 }
+.native-settings-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.08rem 0.34rem;
+  border: 1px solid rgba(180, 190, 254, 0.24);
+  border-radius: 999px;
+  color: rgba(var(--ctp-subtext-rgb), 0.86);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+.native-settings-badge-now,
+.native-settings-badge-browser {
+  border-color: rgba(166, 227, 161, 0.34);
+  color: var(--ctp-green);
+  background: rgba(166, 227, 161, 0.08);
+}
+.native-settings-badge-reload {
+  border-color: rgba(249, 226, 175, 0.38);
+  color: var(--ctp-yellow);
+  background: rgba(249, 226, 175, 0.08);
+}
+.native-settings-badge-tui,
+.native-settings-badge-startup {
+  border-color: rgba(137, 180, 250, 0.34);
+  color: var(--ctp-blue);
+  background: rgba(137, 180, 250, 0.08);
+}
+.native-settings-badge-safety {
+  border-color: rgba(243, 139, 168, 0.42);
+  color: var(--ctp-red);
+  background: rgba(243, 139, 168, 0.08);
+}
 .native-settings-field,
 .native-settings-toggle {
   display: grid;
@@ -3674,6 +3878,13 @@ summary { cursor: pointer; color: var(--warning); }
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
+.native-settings-field select,
+.native-settings-field input.dialog-input {
+  width: 100%;
+}
+.native-settings-toggle input[type="checkbox"] {
+  margin-top: 0.14rem;
+}
 .native-settings-hint {
   display: block;
   margin-top: 0.18rem;
@@ -3857,9 +4068,13 @@ summary { cursor: pointer; color: var(--warning); }
   body.side-panel-collapsed .layout { grid-template-columns: 1fr; height: auto; min-height: 100dvh; overflow: visible; }
   .chat-panel { min-height: 70dvh; }
   .side-panel { max-height: none; }
-  .footer-line-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .footer-workspace,
-  .footer-model { grid-column: 1 / -1; }
+  .footer-line-meta {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .footer-workspace { grid-column: 1 / -1; }
+  .footer-model { grid-column: 1; }
+  .footer-thinking { grid-column: 2; }
 }
 
 @media (max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none) {
@@ -4190,6 +4405,7 @@ summary { cursor: pointer; color: var(--warning); }
   .footer-changes { order: 5; }
   .footer-runtime { order: 6; }
   .footer-model { order: 7; }
+  .footer-thinking { order: 8; }
   body.footer-details-expanded .footer-line-meta {
     grid-template-columns: 1fr;
   }

package/tests/mobile-static.test.mjs

@@ -190,6 +190,7 @@ assert.match(css, /\.composer-publish-menu:hover > \.composer-publish-button\[da
 assert.match(css, /\.composer-publish-menu-panel \{[\s\S]*?display:\s*none;[\s\S]*?flex-direction:\s*column/, "Publish workflow menu should hide when closed and expand like grouped tabs");
 assert.match(css, /\.composer-publish-menu:hover \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu:focus-within \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu\.open \.composer-publish-menu-panel \{\n\s+display:\s*flex;/, "Publish workflow menu should open on hover, focus, or explicit open state");
 assert.match(css, /\.composer-native-command-button \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu should have a distinct slash-command button style");
+assert.match(css, /\.composer-options-menu-panel \{[\s\S]*?max-height:\s*min\(88vh, 36rem\)/, "Options menu should be tall enough for common commands without scrolling on normal viewports");
 assert.match(css, /\.composer-native-command-menu-item \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu items should be styled separately from publish actions");
 assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish and command menu buttons should fit beside Git workflow in mobile actions");
 assert.match(css, /\.composer-actions-panel[\s\S]*?bottom:\s*calc\(100% \+ 0\.42rem\)/, "mobile composer actions should open as an above-composer sheet");
@@ -216,10 +217,21 @@ assert.match(css, /body:not\(\.pi-run-active\):not\(\.mobile-keyboard-open\) \.c
 assert.match(css, /button\[hidden\] \{ display: none !important; \}/, "hidden bottom-row controls should not occupy layout space");
 assert.match(css, /\.statusbar-tui-footer \{[\s\S]*?gap:\s*0/, "default TUI-like footer should reduce statusbar chrome around the compact line");
 assert.match(css, /\.statusbar-git-footer \{[\s\S]*?gap:\s*0\.58rem/, "enabled git-footer extension should keep the styled Web UI footer spacing");
+assert.match(css, /\.footer-line-meta \{[\s\S]*?display:\s*flex;[\s\S]*?flex-wrap:\s*nowrap/, "git-footer metadata should keep cwd, git chips, model, and effort on one row when space allows");
+assert.match(css, /\.footer-line-meta \.footer-meta \{[\s\S]*?flex:\s*0 1 max-content/, "git-footer non-cwd boxes should shrink to content-sized chips while preferring complete text");
+assert.match(css, /\.footer-workspace \{[\s\S]*?flex:\s*1 1 8rem/, "git-footer cwd chip should dynamically take remaining row space");
+assert.match(css, /\.footer-thinking \.footer-meta-value \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "git-footer effort chip should have its own styling");
+assert.match(css, /\.footer-changes \{[\s\S]*?border-color:\s*rgba\(249, 226, 175, 0\.36\)/, "git-footer changes chip should use a higher-contrast warning tint");
+assert.match(css, /\.footer-changes \.footer-meta-value \{[\s\S]*?color:\s*var\(--ctp-yellow\)[\s\S]*?font-weight:\s*950/, "git-footer changes value should be bright and bold");
+assert.match(css, /\.footer-git-extra \.footer-meta-value \{[\s\S]*?color:\s*var\(--ctp-sky\)[\s\S]*?font-weight:\s*900/, "git-footer extras value should be bright enough to read at footer size");
+assert.match(css, /\.footer-changes,[\s\S]*?\.footer-git-extra \{[\s\S]*?flex:\s*0 0 auto/, "git-footer changes and extras chips should resist truncating short status values");
+assert.match(css, /\.footer-meta-action \{[\s\S]*?position:\s*relative;[\s\S]*?border-color:\s*rgba\(148, 226, 213, 0\.26\)/, "clickable footer boxes should have a subtle always-visible highlight");
+assert.doesNotMatch(css, /\.footer-meta-action::after/, "clickable footer boxes should not show a corner indicator dot");
+assert.match(css, /@media \(max-width: 1050px\)[\s\S]*?\.footer-line-meta \{[\s\S]*?display:\s*grid;[\s\S]*?\.footer-model \{ grid-column: 1; \}[\s\S]*?\.footer-thinking \{ grid-column: 2; \}/, "narrow git-footer metadata should keep model and effort on the same row");
 assert.match(css, /\.footer-line-tui \{[\s\S]*?white-space:\s*nowrap/, "default Web UI footer should use a minimal TUI-like line");
 assert.match(css, /\.footer-tui-cwd[\s\S]*?max-width:\s*38%/, "TUI-like footer should keep cwd compact on desktop");
 assert.match(css, /\.footer-tui-model[\s\S]*?text-align:\s*right/, "TUI-like footer should right-align model information on desktop");
-assert.match(css, /\.footer-model-picker[\s\S]*?position:\s*absolute/, "footer model picker should render as a dropdown/popover");
+assert.match(css, /\.footer-model-picker[\s\S]*?position:\s*absolute[\s\S]*?left:\s*var\(--footer-model-picker-left, auto\)[\s\S]*?right:\s*var\(--footer-model-picker-right, 0\.95rem\)/, "footer model and effort pickers should render as anchored dropdown popovers");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\)[\s\S]*?\.footer-model-picker \{[\s\S]*?position:\s*fixed/, "mobile footer model picker should escape footer-details stacking as a fixed overlay on narrow, device-width-narrow, or touch-only devices");
 assert.match(css, /bottom:\s*var\(--footer-model-picker-bottom/, "mobile footer model picker should be anchored by a JS-computed viewport offset");
 assert.match(css, /\.footer-model-option\.active/, "footer model picker should style the selected scoped model");
@@ -355,7 +367,8 @@ assert.match(app, /restoreSidePanelSectionState\(\);\nbindSidePanelSectionToggle
 assert.match(app, /OPTIONAL_FEATURES_STORAGE_KEY/, "optional feature disable toggles should persist in browser storage");
 assert.match(app, /GIT_FOOTER_WEBUI_STATUS_KEY = "git-footer-webui"/, "git footer Web UI data should be received as an extension-owned status payload");
 assert.match(app, /function parseGitFooterWebuiPayloadRaw\(raw\)[\s\S]*GIT_FOOTER_WEBUI_PAYLOAD_TYPE[\s\S]*GIT_FOOTER_WEBUI_PAYLOAD_VERSION/, "Web UI footer should parse the structured payload emitted by git-footer-status");
-assert.match(app, /function renderFooter\(\)[\s\S]*parseGitFooterWebuiPayload\(\)[\s\S]*renderGitFooterPayload\(gitFooterPayload\)/, "detailed footer rendering should prefer the git-footer-status extension payload");
+assert.match(app, /function renderFooter\(\)[\s\S]*parseGitFooterWebuiPayload\(\)[\s\S]*renderGitFooterPayload\(footerPayloadWithLiveModel\(gitFooterPayload\)\)/, "detailed footer rendering should prefer the git-footer-status extension payload");
+assert.match(app, /function footerPayloadWithLiveModel\(payload\)[\s\S]*?shortModelLabel\(currentState\.model\)[\s\S]*?footerThinkingDisplay\(\)[\s\S]*?key: "thinking", label: "effort"/, "git footer payload rendering should split model and effort chips from live Web UI state");
 assert.match(app, /function renderGitFooterPayload\(payload\)[\s\S]*classList\.remove\("statusbar-tui-footer"\)[\s\S]*classList\.add\("statusbar-git-footer"\)[\s\S]*payload\.main\.map\(renderGitFooterPayloadMetric\)[\s\S]*payload\.meta\.map/, "enabled git footer payload should use the styled extension chip renderer, not the default TUI line");
 assert.match(app, /function renderGitFooterPayloadMetric\(chip\)[\s\S]*footerMetric\(chip\.icon/, "git footer main payload chips should render as styled metrics");
 assert.match(app, /function renderGitFooterPayloadMeta\(chip, tab\)[\s\S]*footerMeta\(chip\.label, chip\.value, footerMetaClassForPayload\(chip\)/, "git footer meta payload chips should render as styled metadata");
@@ -368,6 +381,12 @@ assert.doesNotMatch(app, /Git footer status disabled/, "disabled git footer shou
 assert.doesNotMatch(app, /footerMeta\("runtime"/, "minimal Web UI footer should not render runtime metadata");
 assert.match(app, /statusEntries\.has\(GIT_FOOTER_WEBUI_STATUS_KEY\)/, "optional feature detection should recognize the git-footer-status Web UI payload");
 assert.match(app, /\/git-footer-refresh --webui-silent/, "Web UI should quietly request the extension-owned footer payload when idle and missing");
+assert.match(app, /function requestGitFooterWebuiPayload\(tabContext = activeTabContext\(\), \{ force = false \} = \{\}\)[\s\S]*?!force && statusEntries\.has\(GIT_FOOTER_WEBUI_STATUS_KEY\)/, "git footer payload refresh should support forced refresh even when a live payload already exists");
+assert.doesNotMatch(app, /function requestGitFooterWebuiPayload\([\s\S]*?statusEntries\.delete\(GIT_FOOTER_WEBUI_STATUS_KEY\)/, "forced git footer refreshes should keep the existing payload visible while the refresh runs");
+assert.match(app, /function applyOptimisticModelSelection\(model, tabContext = activeTabContext\(\)\)[\s\S]*?currentState = \{ \.\.\.currentState, model: nextModel \}[\s\S]*?renderStatus\(\)[\s\S]*?requestGitFooterWebuiPayload\(tabContext, \{ force: true \}\)/, "model changes should update current state and footer immediately before async refreshes complete");
+assert.match(app, /function gitFooterRelevantStateChanged\(previousState, nextState\)[\s\S]*?previousState\.thinkingLevel !== nextState\.thinkingLevel[\s\S]*?modelStateKey\(previousState\.model\) !== modelStateKey\(nextState\.model\)/, "state refresh should detect model and thinking changes that make the git footer payload stale");
+assert.match(app, /requestGitFooterWebuiPayload\(tabContext, \{ force: shouldRefreshGitFooter \}\)/, "state refresh should force-refresh the git footer when model or thinking state changes");
+assert.match(app, /if \(response\.data\?\.level\) requestGitFooterWebuiPayload\(tabContext, \{ force: true \}\)/, "thinking shortcut should immediately force-refresh the git footer payload");
 assert.match(app, /Loading git footer status…/, "missing git footer payload should show a loading state before declaring the extension unavailable");
 assert.match(app, /GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY/, "git footer payloads should be cached across Web UI reloads");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*clearGitFooterWebuiPayloadCache\(\)/, "changing the git footer feature toggle should invalidate the cached footer payload");
@@ -377,6 +396,8 @@ assert.doesNotMatch(workspaceInfoSource, /runCommand\("git"|branchStatus|isRepo/
 assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*renderOptionalFeatureDependentDisplays\(\);[\s\S]*const tabContext = activeTabContext\(\);[\s\S]*refreshCommands\(tabContext\)/, "optional feature enable/disable should re-render the GUI and then refresh command capabilities");
 assert.match(app, /function setOptionalControlState\(button, available, unavailableTitle\)[\s\S]*setAttribute\("aria-label", nextAriaLabel\)[\s\S]*setAttribute\("data-tooltip", nextTooltip\)/, "optional feature button disabled state should update accessible labels and visible tooltips");
+assert.match(app, /const hasGitWorkflow = isOptionalFeatureEnabled\("gitWorkflow"\);\n\s+elements\.gitWorkflowButton\.hidden = !hasGitWorkflow/, "guided git workflow composer button should be hidden when unavailable or disabled");
+assert.match(app, /elements\.publishButton\.hidden = !hasPublishWorkflow[\s\S]*elements\.nativeCommandMenuButton\.hidden = !hasNativeCommandMenu/, "optional publish and skills/tools menu buttons should be hidden when no enabled menu items are available");
 assert.match(app, /\["skills", "tuiSkillsCommand"\][\s\S]*\["tools", "tuiToolsCommand"\]/, "optional feature toggles should gate /skills and /tools command surfaces");
 assert.match(app, /function setNativeCommandMenuOpen\(open\)/, "frontend should track the skills/tools command menu open state separately from Publish");
 assert.match(app, /nativeSkillsButton\.hidden = !isOptionalFeatureEnabled\("tuiSkillsCommand"\)[\s\S]*nativeToolsButton\.hidden = !isOptionalFeatureEnabled\("tuiToolsCommand"\)/, "skills/tools menu items should be hidden by their optional feature toggles");
@@ -528,6 +549,8 @@ assert.match(app, /sendPromptFromModeButton\("steer", elements\.steerButton\)/,
 assert.match(app, /sendPromptFromModeButton\("follow-up", elements\.followUpButton\)/, "Follow-up should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /function runPublishWorkflow\(command\)[\s\S]*?sendPrompt\("prompt", command\)/, "Publish workflows should send slash commands directly without replacing the draft");
 assert.match(app, /async function runNativeCommandMenu\(command\)[\s\S]*?await handleNativeSlashSelectorCommand\(command\)/, "skills/tools command menu should open native selector dialogs directly");
+assert.match(app, /async function runNativeCommandMenu\(command\)[\s\S]*?sendPrompt\("prompt", command\)/, "generic native command menu should fall back to slash-command prompt execution");
+assert.match(app, /function setOptionsMenuOpen\(open\)/, "Options menu should have explicit open state");
 assert.match(app, /function nativeToolOriginTag\(resource\)[\s\S]*?sourceInfo\?\.source === "builtin"[\s\S]*?label: "Pi Native"[\s\S]*?label: "External"/, "Tools Setup should classify built-in Pi tools separately from external tools");
 assert.match(app, /renderNativeResourceToggles\(tools, \{[\s\S]*?getResourceTag: nativeToolOriginTag/, "Tools Setup should render Pi Native\/External tags");
 assert.match(app, /const tags = Array\.isArray\(item\.tags\)[\s\S]*?item\.badge, \.\.\.tags/, "native selector filtering should include extra resource tags");
@@ -535,19 +558,26 @@ assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerenter", \(\
 assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerleave", \(\) => setPublishMenuOpen\(false\)\)/, "Publish menu should collapse after hover leaves");
 assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setNativeCommandMenuOpen\(true\);[\s\S]*?\}\)/, "skills/tools command menu should expand on hover");
 assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerleave", \(\) => setNativeCommandMenuOpen\(false\)\)/, "skills/tools command menu should collapse after hover leaves");
+assert.match(app, /optionsMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setOptionsMenuOpen\(true\);[\s\S]*?\}\)/, "Options menu should expand on hover");
+assert.match(app, /optionsMenuContainer\?\.addEventListener\("pointerleave", \(\) => setOptionsMenuOpen\(false\)\)/, "Options menu should collapse after hover leaves");
 assert.match(app, /releaseNpmButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-npm"\)\)/, "Publish menu should launch /release-npm");
 assert.match(app, /releaseAurButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-aur"\)\)/, "Publish menu should launch /release-aur");
 assert.match(app, /nativeSkillsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/skills"\)\)/, "skills/tools command menu should launch /skills");
 assert.match(app, /nativeToolsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/tools"\)\)/, "skills/tools command menu should launch /tools");
+for (const command of ["resume", "reload", "name", "clone", "settings", "export", "fork", "tree"]) {
+  const id = command.replace(/^./, (letter) => letter.toUpperCase());
+  assert.match(app, new RegExp(`options${id}Button\\.addEventListener\\("click", \\(\\) => runNativeCommandMenu\\("\\/${command}"\\)\\)`), `Options menu should launch /${command}`);
+}
 assert.match(app, /async function sendPrompt\(kind = "prompt", explicitMessage\)/, "prompt sending should accept direct messages that bypass the input field");
 assert.match(app, /const rawMessage = usesPromptInput \? elements\.promptInput\.value : explicitMessage/, "direct prompt sends should not read the input textarea");
 assert.match(app, /if \(usesPromptInput\) \{[\s\S]*?if \(targetStillActive\) \{[\s\S]*?elements\.promptInput\.value = "";/, "direct prompt sends should preserve the input textarea draft");
 assert.match(app, /make\("button", "command-item"\)[\s\S]*?sendPrompt\("prompt", `\/\$\{command\.name\}`\)/, "side-panel command clicks should send the slash command directly");
-assert.match(app, /const NATIVE_SELECTOR_COMMANDS = new Set\(\["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"\]\)/, "frontend should route native slash commands into selector UIs");
+assert.match(app, /const NATIVE_SELECTOR_COMMANDS = new Set\(\["model", "settings", "theme", "fork", "clone", "name", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"\]\)/, "frontend should route native slash commands into selector UIs");
 assert.match(app, /async function handleNativeSlashSelectorCommand\(message/, "frontend should intercept exact native slash commands before prompt forwarding");
 assert.match(app, /kind === "prompt" && attachments\.length === 0 && await handleNativeSlashSelectorCommand/, "prompt sending should open native selector dialogs before marking a run active");
 assert.match(app, /function openNativeModelSelector\(\)[\s\S]*?nativeCommandApi\("\/api\/models"\)/, "native /model selector should load models through the active tab API");
 assert.match(app, /function openNativeSettingsDialog\(\)[\s\S]*?\/api\/steering-mode[\s\S]*?\/api\/follow-up-mode[\s\S]*?\/api\/auto-compaction/, "native /settings selector should expose queue and compaction controls");
+assert.match(app, /function openNativeNameDialog\(\)[\s\S]*?sendPrompt\("prompt", `\/name \$\{name\}`\)/, "native /name selector should prompt before running the slash command");
 assert.match(app, /function openNativeForkSelector\(\)[\s\S]*?\/api\/fork-messages[\s\S]*?\/api\/fork/, "native /fork selector should pair fork-point loading with the fork action");
 assert.match(app, /function openNativeResumeSelector\(scope = "current"\)[\s\S]*?\/api\/sessions\?scope=\$\{encodeURIComponent\(selectedScope\)\}/, "native /resume selector should list current-cwd or all sessions");
 assert.match(app, /function openNativeTreeSelector\(\)[\s\S]*?\/api\/session-tree[\s\S]*?\/api\/tree-navigate/, "native /tree selector should list tree entries and navigate through the backend helper");
@@ -625,7 +655,7 @@ assert.match(app, /case "webui_tab_renamed":/, "frontend should update tab label
 assert.match(app, /terminalTabsToggleButton\.addEventListener\("click"/, "terminal tabs trigger should be wired in JS");
 assert.match(app, /composerActionsButton\.addEventListener\("click"/, "composer actions trigger should be wired in JS");
 assert.match(app, /function setMobileFooterExpanded\(/, "mobile footer should preserve expansion state for compatibility");
-assert.match(app, /function updateFooterModelPickerPosition\(\)/, "mobile model picker should compute a fixed overlay position above the footer");
+assert.match(app, /function updateFooterModelPickerPosition\(\)[\s\S]*?footerActivePickerTarget\(\)[\s\S]*?--footer-model-picker-left/, "footer picker should align desktop dropdowns above the active model or effort chip");
 assert.match(app, /mobileFooterExpanded = false;[\s\S]*?document\.body\.classList\.remove\("footer-details-expanded"\)/, "opening mobile model picker should collapse legacy footer details so they cannot cover the dropdown");
 assert.match(app, /function renderTuiFooterLine\([\s\S]*footer-line footer-line-tui/, "footer should render a minimal TUI-like line instead of metadata chips");
 assert.match(app, /footerTuiItem\(model, "footer-tui-model", \{[\s\S]*setFooterModelPickerOpen\(!footerModelPickerOpen\)/, "footer model item should be clickable");
@@ -633,6 +663,10 @@ assert.match(app, /function renderFooterModelPicker\(\)/, "footer should render
 assert.match(app, /api\("\/api\/scoped-models", \{ tabId: tabContext\.tabId \}\)/, "footer model picker should load scoped models instead of all available models");
 assert.match(app, /for \(const model of footerScopedModels\)/, "footer model picker should render only scoped models");
 assert.match(app, /api\("\/api\/model", \{ method: "POST"/, "footer model picker should apply selected model through the model API");
+assert.match(app, /chip\.key === "thinking"[\s\S]*?setFooterThinkingPickerOpen\(!footerThinkingPickerOpen\)/, "git footer effort chip should open its own picker");
+assert.match(app, /function renderFooterThinkingPicker\(\)[\s\S]*?Thinking effort[\s\S]*?for \(const level of footerThinkingLevels\(\)\)/, "footer should render a thinking effort picker dropdown");
+assert.match(app, /api\("\/api\/thinking", \{ method: "POST", body: \{ level: nextLevel \}/, "footer thinking picker should apply selected effort through the thinking API");
+assert.match(app, /function isFooterPickerOpen\(\)[\s\S]*?footerModelPickerOpen \|\| footerThinkingPickerOpen/, "footer picker overlay state should cover model and thinking pickers");
 assert.doesNotMatch(app.match(/function renderMinimalFooter\(\)[\s\S]*?\n\}/)?.[0] || "", /footer-details-toggle/, "minimal default footer should not render a details toggle chip");
 assert.match(app, /bindMobileViewChanges\(/, "side panel state should react to mobile breakpoint changes");
 assert.match(app, /function restoreSidePanelState\(\) \{\n\s+if \(isMobileView\(\)\)/, "mobile should start with side panel collapsed even if desktop state was expanded");

package/tests/native-parity.test.mjs

@@ -147,9 +147,12 @@ assert.match(server, /async function cycleTabModel\(tab, direction = "forward"\)
 assert.match(server, /url\.pathname === "\/api\/model-cycle" && req\.method === "POST"/, "server should expose model-cycle endpoint for shortcuts");
 assert.match(server, /case "\/api\/thinking-cycle":[\s\S]*?type: "cycle_thinking_level"/, "server should expose thinking-cycle endpoint for shortcuts");
 assert.match(server, /async function setThinkingLevelForTab\(tab, level, \{ allowPending = true \} = \{\}\)[\s\S]*?stateIsBusyForSettings\(stateResult\.data\)[\s\S]*?tab\.pendingThinkingLevel = level/, "server should queue side-panel thinking changes while a tab is running");
+assert.match(server, /function eventForTabClients\(tab, event\)[\s\S]*?responseWithPendingThinking\(tab, event\)[\s\S]*?tabId: tab\.id/, "server should decorate SSE state responses with pending thinking before broadcasting to clients");
+assert.match(server, /tab\.pendingThinkingLevel = level;\n\s+broadcastPendingThinkingState\(tab, stateResult\.data\)/, "server should broadcast queued thinking state after assigning the pending level");
 assert.match(server, /const pendingThinkingResponse = await applyPendingThinkingBeforePrompt\(tab\)/, "server should apply queued thinking level before the next prompt");
 assert.match(app, /pendingThinkingLevel[\s\S]*?next prompt/, "frontend should show queued thinking changes as applying on the next prompt");
 assert.match(app, /response\.data\?\.pending[\s\S]*?will apply to the next prompt/, "frontend should announce queued side-panel thinking changes");
+assert.match(app, /response\.data\?\.level[\s\S]*?Thinking level set to/, "frontend should announce effective side-panel thinking changes");
 assert.match(app, /function handleNativeAppShortcut\(event\)/, "frontend should centralize native app shortcut handling");
 assert.match(app, /openNativeModelSelector\(\)/, "Ctrl+L shortcut should open the native model selector");
 assert.match(app, /cycleModelFromShortcut\(event\.shiftKey \? "backward" : "forward"\)/, "Ctrl+P shortcuts should cycle models forward and backward");