npm - @firstpick/pi-package-webui - Versions diffs - 0.5.4 → 0.5.5 - Mend

@firstpick/pi-package-webui 0.5.4 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +1 -1
package/bin/pi-webui.mjs +12 -3
package/package.json +3 -2
package/public/app.js +703 -32
package/public/index.html +2 -2
package/public/styles.css +307 -1
package/tests/http-endpoints-harness.test.mjs +15 -1
package/tests/mobile-static.test.mjs +28 -3

package/public/index.html CHANGED Viewed

@@ -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=56" />
+    <link rel="stylesheet" href="/styles.css?v=59" />
   </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">
@@ -740,6 +740,6 @@
       </form>
     </dialog>
-    <script type="module" src="/app.js?v=55"></script>
+    <script type="module" src="/app.js?v=57"></script>
   </body>
 </html>

package/public/styles.css CHANGED Viewed

@@ -74,7 +74,10 @@
 * { box-sizing: border-box; }
 html, body { height: 100%; min-height: 100%; }
-html { overflow-x: hidden; }
+html {
+  overflow: hidden;
+  scrollbar-gutter: auto;
+}
 body {
   margin: 0;
   min-height: 0;
@@ -2187,6 +2190,10 @@ button.footer-meta {
   max-height: none;
   overflow: visible;
 }
+.footer-model-picker.footer-branch-picker {
+  overflow: visible;
+  max-height: none;
+}
 .footer-branch-picker {
   width: min(28rem, calc(100vw - 2rem));
   border-color: rgba(245, 194, 231, 0.30);
@@ -2210,6 +2217,35 @@ button.footer-meta {
   border-color: rgba(166, 227, 161, 0.46);
   box-shadow: inset 3px 0 0 var(--ctp-green), 0 0 1rem rgba(166, 227, 161, 0.14);
 }
+.footer-model-option[data-footer-model-key] {
+  position: relative;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.footer-model-option.dragging {
+  cursor: grabbing;
+  border-color: rgba(148, 226, 213, 0.72);
+  box-shadow: inset 0 0 0 1px rgba(148, 226, 213, 0.46), inset 4px 0 0 var(--ctp-teal), 0 0 1.1rem rgba(148, 226, 213, 0.24);
+}
+.footer-model-option.drag-over-before::before,
+.footer-model-option.drag-over-after::after {
+  content: "";
+  position: absolute;
+  left: 0.62rem;
+  right: 0.62rem;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--ctp-teal);
+  box-shadow: 0 0 0.7rem rgba(148, 226, 213, 0.72);
+  pointer-events: none;
+}
+.footer-model-option.drag-over-before::before {
+  top: -0.28rem;
+}
+.footer-model-option.drag-over-after::after {
+  bottom: -0.28rem;
+}
 .footer-branch-option.active {
   border-color: rgba(245, 194, 231, 0.36);
   box-shadow: inset 3px 0 0 var(--ctp-pink), 0 0 1rem rgba(245, 194, 231, 0.12);
@@ -2225,6 +2261,192 @@ button.footer-meta {
 .footer-branch-create-option .footer-model-option-main {
   color: var(--ctp-green);
 }
+.footer-branch-create-form {
+  display: grid;
+  gap: 0.44rem;
+  padding: 0.6rem 0.64rem;
+  border: 1px solid rgba(166, 227, 161, 0.28);
+  border-radius: 0.78rem;
+  background: rgba(166, 227, 161, 0.06);
+  box-shadow: inset 3px 0 0 rgba(166, 227, 161, 0.72);
+}
+.footer-branch-create-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+.footer-branch-create-title {
+  color: var(--ctp-green);
+  font-size: 0.78rem;
+  font-weight: 900;
+}
+.footer-branch-create-preview {
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.7rem;
+}
+.footer-branch-create-fields {
+  display: grid;
+  grid-template-columns: minmax(5.4rem, 0.34fr) auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.4rem;
+}
+.footer-branch-create-type-field {
+  position: relative;
+  min-width: 0;
+}
+.footer-branch-create-type-field::after {
+  content: "▾";
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  color: var(--ctp-green);
+  font-size: 0.72rem;
+  pointer-events: none;
+  opacity: 0.86;
+}
+.footer-branch-create-dropdown-inputfield,
+.footer-branch-create-input-field {
+  min-width: 0;
+  min-height: 2.28rem;
+  border: 1px solid rgba(var(--ctp-overlay-rgb), 0.38);
+  border-radius: 0.62rem;
+  background: rgba(var(--ctp-crust-rgb), 0.56);
+  color: var(--ctp-text);
+  font: inherit;
+}
+.footer-branch-create-dropdown-inputfield {
+  width: 100%;
+  padding: 0 1.35rem 0 0.48rem;
+}
+.footer-branch-create-slash {
+  color: var(--ctp-green);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 1rem;
+  font-weight: 900;
+  opacity: 0.9;
+}
+.footer-branch-type-suggestions {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.26rem);
+  z-index: 60;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.18rem;
+  width: min(20rem, calc(100vw - 2rem));
+  max-height: none;
+  overflow: visible;
+  padding: 0.32rem;
+  border: 1px solid rgba(166, 227, 161, 0.32);
+  border-radius: 0.66rem;
+  background: linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.99), rgba(var(--ctp-base-rgb), 0.98));
+  box-shadow: 0 0.9rem 1.8rem rgba(var(--ctp-crust-rgb), 0.58), 0 0 1rem rgba(166, 227, 161, 0.12);
+}
+.footer-branch-type-suggestions[hidden] {
+  display: none !important;
+}
+.footer-branch-type-suggestion {
+  min-height: 1.85rem;
+  padding: 0.28rem 0.48rem;
+  border-color: rgba(var(--ctp-overlay-rgb), 0.22);
+  border-radius: 0.48rem;
+  color: var(--ctp-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.76rem;
+  text-align: left;
+}
+.footer-branch-type-suggestion:hover,
+.footer-branch-type-suggestion:focus,
+.footer-branch-type-suggestion.active {
+  border-color: rgba(166, 227, 161, 0.48);
+  color: var(--ctp-green);
+  background: rgba(166, 227, 161, 0.10);
+}
+.footer-branch-create-input-field {
+  padding: 0 0.68rem;
+}
+.footer-branch-create-submit {
+  position: relative;
+  min-height: 2.28rem;
+  padding: 0 0.72rem;
+  border-color: rgba(166, 227, 161, 0.42);
+  color: var(--ctp-green);
+  white-space: nowrap;
+}
+.footer-branch-create-submit-disabled {
+  cursor: not-allowed;
+  border-color: rgba(166, 227, 161, 0.24);
+  color: rgba(166, 227, 161, 0.58);
+  background: rgba(var(--ctp-crust-rgb), 0.42);
+}
+.footer-branch-create-submit[data-tooltip]::before,
+.footer-branch-create-submit[data-tooltip]::after {
+  position: absolute;
+  z-index: 80;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+.footer-branch-create-submit[data-tooltip]::before {
+  content: "";
+  right: 1.2rem;
+  bottom: calc(100% + 0.38rem);
+  width: 0.72rem;
+  height: 0.72rem;
+  border: 1px solid rgba(166, 227, 161, 0.26);
+  border-top: 0;
+  border-left: 0;
+  background: rgba(var(--ctp-crust-rgb), 0.99);
+  transform: translateY(0.24rem) rotate(45deg);
+}
+.footer-branch-create-submit[data-tooltip]::after {
+  content: attr(data-tooltip);
+  right: 0;
+  bottom: calc(100% + 0.7rem);
+  width: min(24rem, calc(100vw - 2.4rem));
+  padding: 0.72rem 0.78rem;
+  border: 1px solid rgba(166, 227, 161, 0.30);
+  border-radius: 0.78rem;
+  background:
+    radial-gradient(circle at 10% 0%, rgba(166, 227, 161, 0.13), transparent 10rem),
+    linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.99), rgba(var(--ctp-base-rgb), 0.98));
+  box-shadow: 0 1rem 2rem rgba(var(--ctp-crust-rgb), 0.62), 0 0 1.2rem rgba(166, 227, 161, 0.14);
+  color: var(--ctp-text);
+  font-size: 0.76rem;
+  font-weight: 650;
+  line-height: 1.42;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  transform: translateY(0.24rem);
+}
+.footer-branch-create-submit[data-tooltip]:hover::before,
+.footer-branch-create-submit[data-tooltip]:hover::after,
+.footer-branch-create-submit[data-tooltip]:focus-visible::before,
+.footer-branch-create-submit[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+.footer-branch-create-submit[data-tooltip]:hover::before,
+.footer-branch-create-submit[data-tooltip]:focus-visible::before {
+  transform: translateY(0) rotate(45deg);
+}
+@media (max-width: 520px) {
+  .footer-branch-create-fields {
+    grid-template-columns: 1fr auto 1fr;
+  }
+  .footer-branch-type-suggestions {
+    width: calc(100vw - 3rem);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .footer-branch-create-submit {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+}
 .footer-model-option-main,
 .footer-model-option-name {
   min-width: 0;
@@ -3410,6 +3632,14 @@ button.git-workflow-step:hover:not(:disabled) {
   list-style: none;
 }
 .todo-widget-summary::-webkit-details-marker { display: none; }
+.todo-widget-goal {
+  min-width: 0;
+  color: rgba(var(--ctp-text-rgb), 0.92);
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
 .todo-widget-header {
   display: flex;
   align-items: center;
@@ -4126,6 +4356,9 @@ button.git-workflow-step:hover:not(:disabled) {
   position: relative;
   margin: 0.55rem 0;
 }
+.markdown-code-block.has-code-copy-action > .code-block {
+  padding-top: 2.05rem;
+}
 .markdown-code-language {
   position: absolute;
   top: 0.42rem;
@@ -4138,10 +4371,82 @@ button.git-workflow-step:hover:not(:disabled) {
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
+.markdown-code-block.has-code-copy-action > .markdown-code-language {
+  right: 4.65rem;
+}
+.markdown-code-copy-button {
+  position: absolute;
+  top: 0.36rem;
+  right: 0.42rem;
+  z-index: 2;
+  min-width: 3.45rem;
+  min-height: 1.52rem;
+  padding: 0.16rem 0.45rem;
+  border: 1px solid rgba(148, 226, 213, 0.28);
+  border-radius: 999px;
+  color: rgba(var(--ctp-text-rgb), 0.82);
+  background: rgba(var(--ctp-crust-rgb), 0.78);
+  box-shadow: 0 0 0.7rem rgba(var(--ctp-crust-rgb), 0.28);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  opacity: 0.78;
+}
+.markdown-code-copy-button:hover,
+.markdown-code-copy-button:focus-visible,
+.markdown-code-copy-button.copied {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-teal), var(--ctp-blue));
+  opacity: 1;
+}
+.markdown-code-copy-button.copied {
+  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal));
+}
 .markdown-code code {
   display: block;
   min-width: max-content;
 }
+.markdown-mermaid-block {
+  overflow-x: auto;
+  padding: 0.72rem;
+  border: 1px solid rgba(148, 226, 213, 0.22);
+  border-radius: 0.9rem;
+  background:
+    radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.10), transparent 18rem),
+    rgba(var(--ctp-crust-rgb), 0.58);
+  box-shadow: inset 0 0 1.3rem rgba(var(--ctp-crust-rgb), 0.24), 0 0 1rem rgba(148, 226, 213, 0.06);
+}
+.markdown-mermaid-diagram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: min-content;
+  min-height: 3.5rem;
+  padding: 0.95rem 0.35rem 0.35rem;
+}
+.markdown-mermaid-diagram svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.markdown-mermaid-status {
+  margin: 0.35rem 0 0;
+  font-size: 0.82rem;
+}
+.markdown-mermaid-status.error {
+  color: var(--danger);
+}
+.markdown-mermaid-source {
+  margin: 0.55rem 0 0;
+  padding: 0.5rem;
+  border-color: rgba(249, 226, 175, 0.18);
+  background: rgba(var(--ctp-crust-rgb), 0.50);
+}
+.markdown-mermaid-source .code-block {
+  margin-bottom: 0;
+}
 .markdown-list {
   margin: 0.45rem 0 0.55rem 1.2rem;
   padding-left: 1rem;
@@ -7070,6 +7375,7 @@ button.composer-skill-tag:focus-visible {
     padding-bottom: 0.42rem;
   }
   .todo-widget-summary { gap: 0.24rem; }
+  .todo-widget-goal { font-size: 0.72rem; }
   .todo-widget-header { gap: 0.26rem; }
   .todo-widget-toggle {
     width: 0.9rem;

package/tests/http-endpoints-harness.test.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { spawn, spawnSync } from "node:child_process";
-import { chmod, mkdtemp, rm, stat, writeFile } from "node:fs/promises";
+import { chmod, mkdtemp, readFile, rm, stat, writeFile } from "node:fs/promises";
 import { networkInterfaces, tmpdir } from "node:os";
 import path from "node:path";
 import { setTimeout as delay } from "node:timers/promises";
@@ -125,6 +125,20 @@ try {
   assert.equal(gzipResponse.headers.get("content-encoding"), "gzip", "styles.css should fall back to gzip");
   await gzipResponse.arrayBuffer();
+  const mermaidModuleResponse = await fetch(`http://127.0.0.1:${port}/vendor/mermaid/mermaid.esm.min.mjs`, {
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(mermaidModuleResponse.status, 200, "Mermaid ESM module should be served from the vendored dependency path");
+  assert.match(mermaidModuleResponse.headers.get("content-type") || "", /text\/javascript/, "Mermaid ESM module should use a JavaScript MIME type");
+  const mermaidModuleText = await mermaidModuleResponse.text();
+  const mermaidChunkPath = mermaidModuleText.match(/\.\/(chunks\/mermaid\.esm\.min\/[A-Za-z0-9._-]+\.mjs)/)?.[1];
+  assert.ok(mermaidChunkPath, "Mermaid ESM module should reference same-directory chunks");
+  const mermaidChunkResponse = await fetch(`http://127.0.0.1:${port}/vendor/mermaid/${mermaidChunkPath}`, {
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(mermaidChunkResponse.status, 200, "Mermaid ESM chunks should be served for dynamic imports");
+  assert.equal(await mermaidChunkResponse.text(), await readFile(join(root, "node_modules", "mermaid", "dist", mermaidChunkPath), "utf8"), "served Mermaid chunks should match the dependency files");
   const tabsResponse = await request("127.0.0.1", "/api/tabs");
   assert.equal(tabsResponse.status, 200);
   const tabList = tabsResponse.body?.data?.tabs || tabsResponse.body?.tabs || [];

package/tests/mobile-static.test.mjs CHANGED Viewed

@@ -214,7 +214,7 @@ assert.match(app, /function handleRemoteWebuiStatus\(statusText\)[\s\S]*?opening
 assert.match(app, /case "confirm":[\s\S]*?if \(isRemoteWebuiQrPopupLoading\(\)\) closeRemoteWebuiQrPopup\(\)/, "blocking extension dialogs should close the QR loading popup before opening");
 assert.match(app, /function showRemoteWebuiQrPopup\(widgetKey, lines = \[\], request = \{\}\)[\s\S]*?widgetKey !== "pi-remote-webui"[\s\S]*?openRemoteWebuiQrPopup\(lines\)/, "remote WebUI QR widget events should open the QR popup");
 assert.match(app, /function mirrorRemoteWebuiWidgetToTranscript\(widgetKey, lines = \[\], request = \{\}\)[\s\S]*?widgetKey !== "pi-remote-webui"[\s\S]*?addTransientMessage\(\{ role: "extension", title: "\/remote"/, "remote WebUI QR widget events should still mirror into the active tab transcript");
-assert.match(app, /if \(widgetKey === "pi-remote-webui"\) \{[\s\S]*?widgets\.delete\(widgetKey\);[\s\S]*?showRemoteWebuiQrPopup\(widgetKey, request\.widgetLines, request\)/, "remote WebUI QR widget events should not render in the generic widget area");
+assert.match(app, /if \(widgetKey === "pi-remote-webui"\) \{[\s\S]*?setWidgetForTab\(requestTabId, widgetKey, \{ \.\.\.request, widgetLines: undefined \}\);[\s\S]*?showRemoteWebuiQrPopup\(widgetKey, request\.widgetLines, request\)/, "remote WebUI QR widget events should not render in the generic widget area");
 assert.doesNotMatch(app, /function renderRemoteWebuiWidget/, "remote WebUI QR should not render through the generic widget renderer");
 assert.match(css, /\.message\.run-indicator-message \{[\s\S]*?border-color/, "active agent runs should render a visible transcript indicator card");
 assert.match(css, /\.message-copy-button \{[\s\S]*?position:\s*absolute/, "transcript messages should expose a top-right copy button");
@@ -250,6 +250,7 @@ assert.match(css, /\.side-panel-section:not\(\.collapsed\) \.side-panel-section-
 assert.match(css, /\.optional-feature-pill\.enabled/, "optional features should visually distinguish enabled state");
 assert.match(css, /\.todo-widget \{[\s\S]*?display:\s*grid/, "todo-progress widget should render as a styled checklist card");
 assert.match(css, /\.todo-widget-summary \{[\s\S]*?cursor:\s*pointer/, "todo-progress widget should expose a compact expandable summary");
+assert.match(css, /\.todo-widget-goal \{[\s\S]*?overflow-wrap:\s*anywhere/, "todo-progress widget should show long goals above progress without layout overflow");
 assert.match(css, /\.todo-widget-body \{[\s\S]*?max-height:/, "expanded todo-progress details should be height-limited");
 assert.match(css, /\.todo-widget-item\.partial \.todo-widget-marker/, "todo-progress partial items should have distinct styling");
 assert.match(css, /\.todo-widget-item\.done \.todo-widget-text[\s\S]*?text-decoration:\s*line-through/, "todo-progress completed items should be visually crossed out");
@@ -519,6 +520,12 @@ assert.match(app, /function messageCopyText\(message, body = null\)/, "frontend
 assert.match(app, /function attachMessageCopyButton\(bubble, message, body\)/, "frontend should add copy controls to rendered transcript cards");
 assert.match(app, /button\.append\(make\("span", "message-copy-icon", "⧉"\)\)/, "message copy buttons should render as icon-only controls");
 assert.match(app, /copyMessageBubble\(button\)/, "message copy buttons should copy through the shared clipboard helper");
+assert.match(app, /function attachMarkdownCodeCopyButton\(wrapper, label = "Copy"\)/, "frontend should add copy controls to markdown code blocks");
+assert.match(app, /function copyMarkdownCodeBlock\(button\)[\s\S]*?await copyText\(text\)/, "markdown code block copy controls should use the shared clipboard helper");
+assert.match(app, /attachMarkdownCodeCopyButton\(wrapper\);/, "normal fenced code blocks should get copy buttons");
+assert.match(app, /attachMarkdownCodeCopyButton\(wrapper, "Copy source"\);/, "rendered Mermaid blocks should expose source copy buttons");
+assert.match(css, /\.markdown-code-copy-button \{[\s\S]*?position:\s*absolute/, "markdown code blocks should expose positioned copy buttons");
+assert.match(css, /\.markdown-code-block\.has-code-copy-action > \.code-block \{[\s\S]*?padding-top:/, "code block copy buttons should reserve vertical space above source text");
 assert.match(app, /retryServerConnectionButton.*retryServerConnection/s, "backend-offline recovery panel should wire a retry action");
 assert.match(app, /function isChatNearBottom\(/, "chat should detect whether the user is reading above the bottom");
 assert.match(app, /function scheduleChatFollowScroll\(/, "chat auto-follow should retry after layout settles during fast streaming");
@@ -545,6 +552,8 @@ assert.match(app, /case "webui_extension_ui_cancelled":/, "frontend should close
 assert.match(app, /case "webui_extension_ui_resolved":[\s\S]*?removeQueuedDialogRequests\(\[event\.id\]\)/, "frontend should close dialogs resolved by another connected browser");
 assert.match(app, /if \(responseId && activeDialog && String\(activeDialog\.id \|\| ""\) !== responseId\) return;/, "dialog response cleanup should not close the next queued dialog after a resolve-event race");
 assert.match(app, /function parseTodoProgressWidget\(lines\)/, "todo-progress widgets should be parsed from extension widget lines");
+assert.ok(app.includes("const goalLine = cleanLines.find((line) => /^Goal\\s*[:：]/i.test(line));"), "todo-progress parser should preserve an optional Goal line from extension widget lines");
+assert.ok(app.includes("if (todo.goal) summary.append(make(\"div\", \"todo-widget-goal\", `Goal: ${todo.goal}`));"), "todo-progress widget should display the goal above the progress header");
 assert.match(app, /const todoProgressWidgetExpandedByTab = new Map\(\)/, "todo-progress expansion state should survive widget re-renders per tab");
 assert.match(app, /const node = make\("details", "widget todo-widget"\)/, "todo-progress widget should render collapsed by default as expandable details");
 assert.match(app, /Optional feature detection intentionally checks loaded Pi capabilities/, "optional Web UI features should be detected through loaded capabilities, not package folders");
@@ -599,8 +608,22 @@ assert.match(app, /function insertChangedFilePathReference\(path\)[\s\S]*formatP
 assert.match(app, /function renderGitFooterPayloadMeta\(chip, tab\)[\s\S]*options\.title = gitFooterPayloadTooltip\(chip, \{ action \}\)[\s\S]*footerMeta\(chip\.label, chip\.value, footerMetaClassForPayload\(chip\), options\)[\s\S]*applyFooterChangedFilesDropdown\(node, chip\)/, "git footer meta payload chips should render as styled metadata with explanatory tooltips and changes popovers");
 assert.match(app, /chip\.key === "git"[\s\S]*setFooterBranchPickerOpen\(!footerBranchPickerOpen\)[\s\S]*Click to switch to another local branch/, "git branch footer chip should open the branch picker");
 assert.match(app, /function renderFooterBranchPicker\(\)[\s\S]*Git branches[\s\S]*applyFooterGitBranch\(branch\.name\)/, "git branch picker should render available branches and switch on selection");
-assert.match(app, /Create new branch[\s\S]*createFooterGitBranch\(\)/, "git branch picker should offer branch creation when no other branches are available");
-assert.match(app, /function promptFooterGitBranchName\(\)[\s\S]*window\.prompt\("New git branch name:"[\s\S]*function createFooterGitBranch\(\)[\s\S]*confirmFooterGitBranchAction\(branchName, \{ create: true, requireConfirm: true/, "new branch creation should prompt for a branch name and require confirmation before creating it");
+assert.match(app, /function renderFooterBranchPicker\(\)[\s\S]*renderFooterBranchCreateForm\(state\)[\s\S]*for \(const branch of state\.branches\)/, "git branch picker should always offer inline branch creation before local branch choices");
+assert.match(app, /GIT_BRANCH_TYPE_SUGGESTIONS = \["feat", "fix", "change", "perf", "test", "chore", "refactor", "docs", "style", "build", "ci", "revert"\]/, "new branch creation should reuse the conventional type suggestions from /git-staged-msg");
+assert.match(app, /function renderFooterBranchCreateForm\(state = footerBranchPickerState\)[\s\S]*footer-branch-create-dropdown-inputfield[\s\S]*footer-branch-type-suggestions[\s\S]*footer-branch-create-input-field[\s\S]*Create new branch/, "new branch creation should use a styled editable suggestions dropdown plus input field instead of a browser prompt");
+assert.match(app, /let footerBranchCreateDraft = \{ type: "", name: "" \}/, "new branch creation should not default the editable type prefix to feat");
+assert.match(app, /function footerBranchCreateType\(value = footerBranchCreateDraft\.type\) \{\n\s+return slugifyGitBranchPart\(value\);\n\}/, "branch type suggestions should not restrict or default custom user-entered prefixes");
+assert.match(app, /const slash = make\("span", "footer-branch-create-slash", "\/"\)/, "branch creation should visibly separate the prefix and user input with a slash");
+assert.match(app, /function gitSwitchCreateCommandDisplay\(branch\)[\s\S]*`git switch -c \$\{quoteGitBranchForDisplay\(branch\)\}`[\s\S]*preview\.textContent = gitSwitchCreateCommandDisplay\(branchName \|\| footerBranchCreatePreviewName\(\)\)/, "branch creation should show the live complete quoted git switch -c command");
+assert.match(app, /function footerBranchCreateTooltip\(branchName = footerBranchCreateName\(\)\)[\s\S]*A branch is a safe workspace for your changes\.[\s\S]*does not commit, push, or delete anything[\s\S]*Tip: use short lowercase words/, "create branch button should have a detailed non-technical explanatory tooltip");
+assert.match(app, /submitButton\.dataset\.tooltip = footerBranchCreateTooltip\(branchName\);[\s\S]*submitButton\.removeAttribute\("title"\)/, "create branch button should use the styled tooltip instead of a native title tooltip");
+assert.match(css, /\.footer-branch-create-submit\[data-tooltip\]::after \{[\s\S]*?content:\s*attr\(data-tooltip\);[\s\S]*?white-space:\s*pre-wrap;[\s\S]*?overflow-wrap:\s*anywhere;/, "create branch button tooltip should be styled and support detailed multiline copy");
+assert.match(app, /submitButton\.disabled = false;[\s\S]*submitButton\.classList\.toggle\("footer-branch-create-submit-disabled", submitDisabled\);[\s\S]*submitButton\.setAttribute\("aria-disabled", submitDisabled \? "true" : "false"\)/, "branch creation should use aria-disabled styling so the tooltip is not dimmed by disabled button opacity");
+assert.match(css, /\.footer-branch-create-submit-disabled \{[\s\S]*?cursor:\s*not-allowed;[\s\S]*?color:\s*rgba\(166, 227, 161, 0\.58\);/, "greyed branch create button should use a class instead of disabled opacity");
+assert.match(app, /Loading existing local branches… New branch creation is available\./, "branch picker loading copy should make clear that creation is still available");
+assert.match(css, /\.footer-model-picker\.footer-branch-picker \{[\s\S]*?overflow:\s*visible;[\s\S]*?max-height:\s*none;/, "branch picker should not force scrolling just to see the open type suggestions dropdown");
+assert.match(css, /\.footer-branch-type-suggestions \{[\s\S]*?grid-template-columns:\s*repeat\(3,[\s\S]*?max-height:\s*none;[\s\S]*?overflow:\s*visible;/, "branch type suggestions should render as a styled multi-column dropdown without internal scrolling");
+assert.match(app, /async function createFooterGitBranch\(branch = footerBranchCreateName\(\)\)[\s\S]*confirmFooterGitBranchAction\(branchName, \{ create: true, requireConfirm: true/, "new branch creation should require confirmation before running git switch -c");
 assert.match(app, /function footerBranchAgentWarningLines[\s\S]*WARNING:[\s\S]*still running or waiting for input in this Git working tree/, "branch create/switch confirmation should warn when an agent is active in the current git working tree");
 assert.match(app, /if \(footerBranchPickerOpen\) elements\.statusBar\.append\(renderFooterBranchPicker\(\)\)/, "footer should append the branch picker above the status bar when open");
 assert.match(server, /url\.pathname === "\/api\/git-branches"[\s\S]*readGitBranches\(tab\.cwd\)/, "server should expose local git branch listing for the footer picker");
@@ -776,6 +799,8 @@ assert.match(app, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(
 assert.match(app, /if \(typeof partialText === "string"\) streamRawText = partialText;/, "live assistant text should synchronize from partial messages instead of relying only on deltas");
 assert.match(app, /const TODO_PROGRESS_LINE_REGEX = /, "frontend should recognize live todo progress lines that will be moved into the todo widget");
 assert.match(app, /function stripTodoProgressLines\(text, \{ streaming = false \} = \{\}\)/, "live Assistant output should strip todo-progress lines before rendering final-output text");
+assert.match(app, /function syncLiveTodoProgressWidgetFromText\(text, tabId = activeTabId\)/, "live Assistant checklist text should update the todo-progress widget before tool execution events");
+assert.match(app, /syncLiveTodoProgressWidgetFromText\(streamRawText, event\.tabId \|\| activeTabId\)/, "streaming assistant text should feed the live todo-progress widget immediately");
 assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const assistantText = stripTodoProgressLines\(streamRawText, \{ streaming: true \}\)/, "streamed Assistant text should classify from accumulated output without flashing partial todo-progress lines");
 assert.match(app, /function syncStreamingThinkingFormat\(assistantText\)[\s\S]*?splitThinkingFormatText\(assistantText, \{ streaming: true \}\)[\s\S]*?setStreamingThinkingText\(thinking\)/, "tagged <think> streaming output should update the live thinking card instead of flashing raw tags");
 assert.match(app, /const finalText = thinkingFormat\?\.hasThinkingFormat \? stripTodoProgressLines\(thinkingFormat\.finalText, \{ streaming: true \}\) : assistantText;/, "tagged <think> streaming output should render only final response text in the Assistant card");