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

@firstpick/pi-package-webui 0.5.3 → 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 +849 -45
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 +38 -5

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");
@@ -747,6 +770,8 @@ assert.match(app, /appendText\(preview, toolResultPreviewText\(message, 10\), "c
 assert.match(app, /function assistantDisplayMessages\(message\)/, "assistant history should split thinking and tool-call parts out of the final Assistant output card");
 assert.match(app, /function assistantHasToolCallAfter\(content, index\)/, "assistant text that precedes a tool call should be detectable and suppressible");
 assert.match(app, /if \(!assistantHasToolCallAfter\(content, index\)\) finalParts\.push\(finalPart\);/, "assistant history should not render pre-tool-call assistant text as final output");
+assert.match(app, /typeof content === "string"[\s\S]*?splitThinkingFormatText\(content\)[\s\S]*?content: parsed\.finalText/, "assistant string messages with tagged <think> output should render final text separately");
+assert.match(app, /const textForThinkingFormat[\s\S]*?splitThinkingFormatText\(textForThinkingFormat\)[\s\S]*?appendThinkingFormatDisplayMessages\(displayMessages, base, parsed\)[\s\S]*?finalParts\.push/, "assistant text parts with tagged <think> output should split into thinking and final-output cards");
 assert.match(app, /return content\.trim\(\) \? \[\{ \.\.\.message, title: "final output" \}\] : \[\]/, "assistant messages with stripped empty text should not render empty final-output cards");
 assert.match(app, /function isEmptyAssistantTextPart\(part\)[\s\S]*?part\.type === "text"[\s\S]*?!assistantTextPartText\(part\)\.trim\(\)/, "empty assistant text parts should be recognized as skippable provider metadata");
 assert.match(app, /if \(isEmptyAssistantTextPart\(part\)\) continue;/, "empty assistant text parts should not render as assistant-event cards");
@@ -754,6 +779,10 @@ assert.match(app, /function assistantFinalOutputPart\(part\)[\s\S]*?if \(part\.t
 assert.match(app, /\["assistant", "toolExecution"\]\.includes\(transcriptMessage\.role\) \? messageIndex : -1/, "final Assistant output and paired tool action cards should keep the source message index for feedback");
 assert.match(app, /function ensureStreamingThinkingBubble\(\)[\s\S]*if \(!thinkingOutputVisible\) return false/, "live thinking should respect the show/hide thinking-output toggle");
 assert.match(app, /const UNEXPOSED_THINKING_TEXT = "No thinking content was exposed by the provider\."/, "frontend should name the provider no-thinking placeholder for suppression");
+assert.match(app, /THINKING_FORMAT_OPEN_TAG_REGEX/, "frontend should recognize tagged <think> provider output");
+assert.match(app, /CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX = \/\^<\\\|\(\[a-z\]\[\\w-\]\*\)>\/i/, "frontend should recognize tagged <|channel> provider output");
+assert.match(app, /function thinkingFormatOpenMatch\(text\)[\s\S]*?CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX[\s\S]*?closeRegex: new RegExp\(`<\$\{escapeRegExp\(name\)\}\\\\\|>`/, "channel-style tagged output should create a matching <channel|> close delimiter");
+assert.match(app, /function splitThinkingFormatText\(text, \{ streaming = false \} = \{\}\)[\s\S]*?thinkingFormatOpenMatch\(rest\)[\s\S]*?finalText: stripThinkingFormatOutputSeparator\(rest\)/, "tagged thinking output should split thinking text from final response text");
 assert.match(app, /function visibleThinkingText\(text\)[\s\S]*?trimmed === UNEXPOSED_THINKING_TEXT[\s\S]*?return "";/, "provider no-thinking placeholders should normalize to empty thinking output");
 assert.match(app, /if \(isThinkingPart\) \{[\s\S]*?visibleThinkingText\(assistantThinkingText\(part\)\)[\s\S]*?if \(thinking\) displayMessages\.push/, "assistant transcript splitting should skip empty or unexposed thinking parts");
 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");
@@ -766,15 +795,19 @@ assert.match(app, /function thinkingDeltaText\(update\) \{[\s\S]*?return visible
 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\)\) \|\| thinkingDeltaText\(update\)/, "live thinking end should replace deltas with the final partial-message thinking content");
+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, /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");
 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 \(assistantText\) \{[\s\S]*?renderStreamingMarkdown\(streamText, assistantText\);[\s\S]*?\} else \{\n\s+scheduleStreamBubbleHide\(\);/, "empty filtered stream output should schedule hide while visible stream output renders as Markdown");
+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, /streamToolCallSeen = true;\n\s+suppressStreamingAssistantTextBeforeToolCall\(\);/, "tool-call starts should remove pending assistant text from the live transcript");
 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");