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

@firstpick/pi-package-webui 0.5.4 → 0.5.6

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 (9) hide show

package/README.md +1 -1
package/bin/pi-webui.mjs +55 -3
package/package.json +4 -3
package/public/app.js +1155 -100
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 +49 -14
package/tests/streaming-ui-coupling.test.mjs +175 -0

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

@@ -31,7 +31,7 @@ const companionDependencies = {
   "@firstpick/pi-extension-safety-guard": "^0.2.3",
   "@firstpick/pi-extension-setup-skills": "^0.1.8",
   "@firstpick/pi-extension-stats": "^0.2.6",
-  "@firstpick/pi-extension-todo-progress": "^0.2.4",
+  "@firstpick/pi-extension-todo-progress": "^0.2.5",
   "@firstpick/pi-extension-tools": "^0.1.6",
   "@firstpick/pi-prompts-git-pr": "^0.1.2",
   "@firstpick/pi-themes-bundle": "^0.1.4",
@@ -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,7 +552,12 @@ 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 todoProgressSignatureByTab = new Map\(\)/, "todo-progress should track per-tab signatures to avoid unchanged re-renders");
+assert.match(app, /function widgetRequestEquivalent\(a, b\)[\s\S]*?return a\.widgetLines\.every/, "todo-progress and generic widgets should no-op identical widget payloads");
+assert.match(app, /todoProgressSignatureByTab\.get\(tabId\) === signature\) return false/, "live todo-progress sync should skip unchanged checklist signatures");
 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");
 assert.match(app, /function resetOptionalFeatureAvailability\(\)/, "optional feature state should reset across active-tab and reload boundaries");
@@ -599,8 +611,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");
@@ -765,26 +791,32 @@ assert.match(app, /if \(isThinkingPart\) \{[\s\S]*?visibleThinkingText\(assistan
 assert.match(app, /message\.role === "thinking"[\s\S]*?visibleThinkingText\(message\.thinking \|\| textFromContent\(message\.content\)\)[\s\S]*?if \(thinkingOutputVisible && thinkingText\) appendText\(body, thinkingText, "thinking-text"\);/, "thinking cards should suppress empty and provider no-thinking placeholder output");
 assert.match(app, /function showStreamingThinking\(initialText = ""\)[\s\S]*?if \(initialText && !streamThinking\.textContent\) streamThinking\.textContent = initialText;/, "live thinking should not create a visible placeholder card before content arrives");
 assert.match(app, /function setStreamingThinkingText\(text\)[\s\S]*?const thinking = visibleThinkingText\(text\);[\s\S]*?if \(!thinkingOutputVisible \|\| !thinking\) return false;[\s\S]*?return true;/, "live thinking text setters should ignore empty text instead of clearing or flashing the card");
-assert.match(app, /function syncStreamingThinkingFromMessage\(event[\s\S]*?return setStreamingThinkingText\(text \|\| placeholder\);/, "partial-message thinking sync should only report success after setting visible thinking text");
+assert.match(app, /function syncStreamingThinkingFromUpdate\(event, update, \{ placeholder = "" \} = \{\}\)[\s\S]*?return setStreamingThinkingText\(streamThinkingRawText \|\| placeholder\);/, "incremental thinking sync should only report success after setting visible thinking text");
 assert.doesNotMatch(app, /text \|\| placeholder \|\| streamThinkingBubble/, "partial-message thinking sync should not clear an existing thinking card when a partial carries no visible thinking text");
 assert.match(app, /if \(thinkingOutputVisible && delta && \(!synced \|\| !streamThinking\?\.textContent\)\) \{/, "live thinking delta fallback should require visible delta text before creating a card");
 assert.match(app, /function thinkingDeltaText\(update\) \{[\s\S]*?return visibleThinkingText\(update\.delta \|\| update\.thinking \|\| update\.content \|\| ""\);/, "live thinking deltas should suppress provider no-thinking placeholders too");
 assert.match(app, /const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible"/, "thinking visibility should persist in browser storage");
 assert.match(app, /function setThinkingOutputVisible\(visible[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\)/, "thinking visibility changes should immediately re-render the transcript");
 assert.match(app, /function assistantStreamingMessage\(event\)/, "live streaming should read the authoritative partial assistant message from RPC events like the TUI");
-assert.match(app, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(event\), \{ streaming: true \}\) \|\| thinkingDeltaText\(update\)/, "live thinking end should replace deltas with the final partial-message thinking content");
-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, /function syncStreamingThinkingFromUpdate\(event, update[\s\S]*?const fallback = streamingThinkingTextFallback\(event\);[\s\S]*?setStreamThinkingRawText\(fallback\);[\s\S]*?return setStreamingThinkingText\(streamThinkingRawText \|\| placeholder\);/, "live thinking end should replace deltas with the final partial-message thinking content");
+assert.match(app, /function setStreamRawText\(text\)[\s\S]*?streamRawText = nextText;[\s\S]*?resetStreamDerivedTextCache\(\);/, "live assistant text should synchronize from partial messages through a cache-aware setter");
 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 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");
+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, /scheduleLiveTodoProgressWidgetSync\(streamRawText, event\.tabId \|\| activeTabId\)/, "streaming assistant text should feed the live todo-progress widget through the coalesced sync scheduler");
+assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const thinkingFormat = syncStreamingThinkingFormat\(\);[\s\S]*?const finalText = thinkingFormat\?\.hasThinkingFormat \? streamDerivedText\(\)\.finalText : streamRenderableAssistantText\(\);/, "streamed Assistant text should render cached derived output without directly rescanning raw stream text");
+assert.match(app, /function syncStreamingThinkingFormat\(\)[\s\S]*?const parsed = streamDerivedText\(\)\.thinkingFormat;[\s\S]*?setStreamingThinkingText\(thinking\)/, "tagged <think> streaming output should update the live thinking card from cached parse state instead of flashing raw tags");
+assert.match(app, /const finalText = thinkingFormat\?\.hasThinkingFormat \? streamDerivedText\(\)\.finalText : streamRenderableAssistantText\(\);/, "tagged <think> streaming output should render only final response text in the Assistant card");
 assert.match(app, /const STREAM_OUTPUT_HIDE_DELAY_MS = 300/, "stream output hiding should be debounced to prevent rapid flicker");
 assert.match(app, /const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220/, "live assistant text should be briefly guarded so pre-tool-call text can be suppressed");
 assert.match(app, /function scheduleStreamBubbleHide\([\s\S]*?STREAM_OUTPUT_MIN_VISIBLE_MS/, "stream output cards should observe a minimum visible duration before hiding");
 assert.match(app, /if \(finalText\) \{[\s\S]*?renderStreamingMarkdown\(streamText, finalText\);[\s\S]*?\} else \{\n\s+scheduleStreamBubbleHide\(\);/, "empty filtered stream output should schedule hide while visible stream output renders as Markdown");
-assert.match(app, /if \(streamToolCallSeen \|\| streamBubble\) renderStreamingAssistantText\(\);\n\s+else scheduleStreamingAssistantTextRender\(\);/, "live assistant text should wait briefly before showing unless it is already visible or follows a tool call");
+assert.match(app, /scheduleStreamingAssistantTextRender\(\{ immediate: !!\(streamToolCallSeen \|\| streamBubble\) \}\);/, "live assistant text should wait briefly before showing unless it is already visible or follows a tool call");
 assert.match(app, /streamToolCallSeen = true;\n\s+suppressStreamingAssistantTextBeforeToolCall\(\);/, "tool-call starts should remove pending assistant text from the live transcript");
+assert.match(app, /function renderStreamingToolCallCard\(\{ scroll = false \} = \{\}\)[\s\S]*?appendMessage\(message, \{ streaming: true \}\)[\s\S]*?streamToolCallText\.textContent !== displayText/, "live tool-call cards should render and update the arguments stream in place");
+assert.match(app, /update\.type === "toolcall_delta"[\s\S]*?updateStreamingToolCallFromEvent\(event, \{ appendDelta: true \}\)[\s\S]*?Building tool call:/, "tool-call deltas should update visible streamed arguments instead of a static placeholder");
+assert.match(app, /case "tool_execution_start":[\s\S]*?removeStreamingToolCallCard\(\)[\s\S]*?handleToolExecutionStart\(event\)/, "the streamed tool-call argument card should be removed when the real tool execution card starts");
+assert.doesNotMatch(app, /Preparing tool call:/, "tool-call streaming should no longer show only the static preparing placeholder");
 assert.match(app, /const created = appendMessage\(\{ role: "assistant", title: "final output"/, "live Assistant cards should be created only for final output text without a noisy Assistant label");
 assert.match(app, /function renderMarkdownInto\(parent, text\)/, "assistant output should have a browser-native Markdown renderer");
 assert.match(app, /safeMarkdownLinkHref\(url\)/, "Markdown links should be sanitized before rendering");
@@ -1104,13 +1136,16 @@ assert.match(server, /const EXTENSION_UI_BLOCKING_METHODS = new Set\(\["select",
 assert.match(server, /function trackPendingExtensionUiRequest\(tab, event\)/, "server should track blocking extension UI requests per tab");
 assert.match(server, /pendingExtensionUiRequests: new Map\(\)/, "new tabs should initialize pending extension UI request storage");
 assert.match(server, /extensionStatuses: new Map\(\)/, "new tabs should initialize replayable extension status storage");
+assert.match(server, /extensionWidgets: new Map\(\)/, "new tabs should initialize replayable extension widget storage");
 assert.match(server, /function rememberExtensionStatusEvent\(tab, event\)[\s\S]*event\.method !== "setStatus"[\s\S]*statuses\.set\(String\(event\.statusKey\), String\(event\.statusText\)\)/, "server should retain extension status events for reconnects");
-assert.match(server, /rememberExtensionStatusEvent\(tab, scopedEvent\)[\s\S]*trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should retain extension statuses before broadcasting");
+assert.match(server, /function rememberExtensionWidgetEvent\(tab, event\)[\s\S]*event\.method !== "setWidget"[\s\S]*widgets\.set\(String\(widgetKey\)/, "server should retain extension widget events for reconnects");
+assert.match(server, /rememberExtensionStatusEvent\(tab, scopedEvent\)[\s\S]*rememberExtensionWidgetEvent\(tab, scopedEvent\)[\s\S]*trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should retain extension statuses and widgets before broadcasting");
 assert.match(server, /trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should populate pending extension UI storage before broadcasting");
 assert.match(server, /scopedEvent = \{ \.\.\.scopedEvent,[\s\S]*?pendingExtensionUiRequestCount: pendingExtensionUiRequests\(tab\)\.length \}/, "RPC events should broadcast pending blocker counts for tab indicators");
 assert.match(server, /function replayExtensionStatuses\(tab, res\)[\s\S]*method: "setStatus"/, "server should replay latest extension statuses on SSE reconnect");
+assert.match(server, /function replayExtensionWidgets\(tab, res\)[\s\S]*method: "setWidget"/, "server should replay latest extension widgets on SSE reconnect");
 assert.match(server, /function replayPendingExtensionUiRequests\(tab, res\)/, "server should be able to replay missed extension UI requests on SSE reconnect");
-assert.match(server, /replayExtensionStatuses\(tab, res\);\n\s+replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay extension statuses before pending blockers");
+assert.match(server, /replayExtensionStatuses\(tab, res\);\n\s+replayExtensionWidgets\(tab, res\);\n\s+replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay extension statuses and widgets before pending blockers");
 assert.match(server, /pendingExtensionUiRequests: pendingExtensionUiRequestSummaries\(tab\)/, "detailed Web UI status should expose pending extension UI blockers");
 assert.match(server, /resolvePendingExtensionUiRequest\(tab, payload\.id\)/, "extension UI responses should clear the pending blocker cache");
 assert.match(server, /type: "webui_extension_ui_resolved"[\s\S]*?pendingExtensionUiRequestCount/, "extension UI responses should notify clients that a blocker resolved");
@@ -1313,7 +1348,7 @@ assert.match(app, /pruneDisconnectedLiveToolCards\(\);/, "reconciliation must pr
 // --- Performance: incremental streaming markdown (P0-3) ---
 assert.match(app, /function streamingMarkdownStableBoundary\(text\)[\s\S]*?for \(let index = 0; index < lines\.length - 1; index \+= 1\)/, "streaming markdown boundary must never treat the final partial line as stable");
 assert.match(app, /function renderStreamingMarkdown\(block, text\)[\s\S]*?if \(!text\.startsWith\(state\.stableText\)\)/, "streaming markdown must fall back to a full re-render when earlier content changes");
-assert.match(app, /streamRawText = "";\n  streamMarkdownState = null;/, "resetting the stream bubble must clear incremental markdown state");
+assert.match(app, /streamRawText = "";\n  streamThinkingRawText = "";\n  resetStreamDerivedTextCache\(\);\n  streamMarkdownState = null;/, "resetting the stream bubble must clear incremental markdown state and derived caches");
 // --- Performance: delta transcript fetch (P1-1) ---
 assert.match(app, /function mergeMessagesDelta\(previous, data\)[\s\S]*?messagesLookEqual\(previous\[since\], data\.messages\[0\]\)/, "delta merges must verify the one-message overlap before applying");