@firstpick/pi-package-webui 0.3.9 → 0.4.1

package/tests/fixtures/fake-pi.mjs

@@ -47,7 +47,16 @@ rl.on("line", (line) => {
       });
       return;
     case "get_messages":
-      respond({ ...base, data: { messages: [] } });
+      respond({
+        ...base,
+        data: {
+          messages: [
+            { role: "user", content: "fake prompt", timestamp: 1000 },
+            { role: "assistant", content: [{ type: "text", text: "fake answer" }], timestamp: 2000 },
+            { role: "user", content: "fake follow-up", timestamp: 3000 },
+          ],
+        },
+      });
       return;
     case "get_available_models":
       respond({ ...base, data: { models: [{ provider: "fake", id: "fake-model", name: "Fake Model" }] } });

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

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
-import { spawn } from "node:child_process";
-import { chmod, mkdtemp, rm } from "node:fs/promises";
+import { spawn, spawnSync } from "node:child_process";
+import { chmod, mkdtemp, 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";
@@ -42,6 +42,13 @@ await chmod(fakePi, 0o755);
 
 const child = spawn(process.execPath, [serverScript, "--cwd", cwd, "--host", "0.0.0.0", "--port", String(port), "--pi", fakePi], {
   stdio: ["ignore", "pipe", "pipe"],
+  env: {
+    ...process.env,
+    GIT_AUTHOR_NAME: "Pi WebUI Test",
+    GIT_AUTHOR_EMAIL: "pi-webui-test@example.invalid",
+    GIT_COMMITTER_NAME: "Pi WebUI Test",
+    GIT_COMMITTER_EMAIL: "pi-webui-test@example.invalid",
+  },
 });
 let serverOutput = "";
 child.stdout.on("data", (chunk) => {
@@ -68,6 +75,38 @@ try {
   assert.equal(health.body.ok, true);
   assert.equal(health.body.piRunning, true, "fake pi RPC process should be attached and running");
 
+  // Static assets: brotli/gzip compression plus ETag revalidation (P0-2).
+  const brotliResponse = await fetch(`http://127.0.0.1:${port}/app.js`, {
+    headers: { "accept-encoding": "br, gzip" },
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(brotliResponse.status, 200);
+  assert.equal(brotliResponse.headers.get("content-encoding"), "br", "app.js should be served brotli-compressed");
+  assert.equal(brotliResponse.headers.get("cache-control"), "no-cache", "static assets should allow ETag revalidation");
+  assert.equal(brotliResponse.headers.get("vary"), "Accept-Encoding");
+  const appEtag = brotliResponse.headers.get("etag");
+  assert.ok(appEtag, "app.js response should carry an ETag");
+  // Node fetch transparently decompresses; equal size proves the brotli
+  // round-trip reproduced the exact raw asset.
+  const appBody = await brotliResponse.arrayBuffer();
+  const rawAppSize = (await stat(join(root, "public", "app.js"))).size;
+  assert.equal(appBody.byteLength, rawAppSize, "decompressed app.js should match the raw file byte-for-byte in size");
+
+  const conditionalResponse = await fetch(`http://127.0.0.1:${port}/app.js`, {
+    headers: { "if-none-match": appEtag },
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(conditionalResponse.status, 304, "matching If-None-Match should return 304");
+  await conditionalResponse.arrayBuffer();
+
+  const gzipResponse = await fetch(`http://127.0.0.1:${port}/styles.css`, {
+    headers: { "accept-encoding": "gzip" },
+    signal: AbortSignal.timeout(5_000),
+  });
+  assert.equal(gzipResponse.status, 200);
+  assert.equal(gzipResponse.headers.get("content-encoding"), "gzip", "styles.css should fall back to gzip");
+  await gzipResponse.arrayBuffer();
+
   const tabsResponse = await request("127.0.0.1", "/api/tabs");
   assert.equal(tabsResponse.status, 200);
   const tabList = tabsResponse.body?.data?.tabs || tabsResponse.body?.tabs || [];
@@ -79,6 +118,105 @@ try {
   assert.equal(state.status, 200);
   assert.equal(state.body?.data?.model?.provider, "fake", "state should come from the fake pi RPC");
 
+  const gitAvailable = spawnSync("git", ["--version"], { encoding: "utf8" }).status === 0;
+  if (gitAvailable) {
+    const gitInit = await request("127.0.0.1", "/api/git-workflow/init", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitInit.status, 200);
+    assert.equal(gitInit.body?.ok, true, "git init endpoint should initialize a temp repository");
+
+    const initFileStatus = await request("127.0.0.1", `/api/git-workflow/init-files-status?tab=${encodeURIComponent(tabId)}`);
+    assert.equal(initFileStatus.status, 200);
+    assert.equal(initFileStatus.body?.ok, true, "init files status endpoint should check README.md and .gitignore");
+    assert.equal(initFileStatus.body?.data?.readmeExists, false);
+    assert.equal(initFileStatus.body?.data?.gitignoreExists, false);
+
+    const gitReadme = await request("127.0.0.1", "/api/git-workflow/readme", { method: "POST", body: { repoName: "pi-webui-http-harness", stack: "Node.js / TypeScript", tab: tabId } });
+    assert.equal(gitReadme.status, 200);
+    assert.equal(gitReadme.body?.ok, true, "README endpoint should create/stage README.md and .gitignore");
+    assert.equal(gitReadme.body?.data?.readme?.created, true);
+    assert.equal(gitReadme.body?.data?.gitignore?.created, true);
+
+    const gitReadmeAgain = await request("127.0.0.1", "/api/git-workflow/readme", { method: "POST", body: { repoName: "pi-webui-http-harness", stack: "Node.js / TypeScript", tab: tabId } });
+    assert.equal(gitReadmeAgain.status, 200);
+    assert.equal(gitReadmeAgain.body?.ok, true, "README endpoint should re-check existing files without overwriting");
+    assert.equal(gitReadmeAgain.body?.data?.readme?.created, false);
+    assert.equal(gitReadmeAgain.body?.data?.gitignore?.created, false);
+
+    const gitCommit = await request("127.0.0.1", "/api/git-workflow/initial-commit", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitCommit.status, 200);
+    assert.equal(gitCommit.body?.ok, true, "initial commit endpoint should commit the staged README.md");
+
+    const gitMain = await request("127.0.0.1", "/api/git-workflow/main-branch", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitMain.status, 200);
+    assert.equal(gitMain.body?.ok, true, "main branch endpoint should rename the branch");
+
+    const gitRemote = await request("127.0.0.1", "/api/git-workflow/remote", { method: "POST", body: { username: "Firstp1ck", repoName: "pi-webui-http-harness", tab: tabId } });
+    assert.equal(gitRemote.status, 200);
+    assert.equal(gitRemote.body?.ok, true, "remote endpoint should add origin without pushing");
+    assert.equal(gitRemote.body?.data?.remoteUrl, "https://github.com/Firstp1ck/pi-webui-http-harness.git");
+
+    await writeFile(path.join(cwd, "single.txt"), "created\n");
+    const gitAddCreated = await request("127.0.0.1", "/api/git-workflow/add", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitAddCreated.status, 200);
+    assert.equal(gitAddCreated.body?.ok, true, "git add endpoint should stage a new single file");
+    const createdDefault = await request("127.0.0.1", `/api/git-workflow/default-commit-message?tab=${encodeURIComponent(tabId)}`);
+    assert.equal(createdDefault.status, 200);
+    assert.equal(createdDefault.body?.ok, true, "default commit message endpoint should return ok for a staged single file");
+    assert.equal(createdDefault.body?.data?.message, "created single.txt");
+    const createdCommit = await request("127.0.0.1", "/api/git-workflow/commit", { method: "POST", body: { variant: "input", message: createdDefault.body?.data?.message, tab: tabId } });
+    assert.equal(createdCommit.status, 200);
+    assert.equal(createdCommit.body?.ok, true, "input commit endpoint should accept the generated single-file default");
+
+    await writeFile(path.join(cwd, "single.txt"), "updated\n");
+    const gitAddUpdated = await request("127.0.0.1", "/api/git-workflow/add", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitAddUpdated.status, 200);
+    assert.equal(gitAddUpdated.body?.ok, true, "git add endpoint should stage a single-file update");
+    const updatedDefault = await request("127.0.0.1", `/api/git-workflow/default-commit-message?tab=${encodeURIComponent(tabId)}`);
+    assert.equal(updatedDefault.status, 200);
+    assert.equal(updatedDefault.body?.data?.message, "updated single.txt");
+    const updatedCommit = await request("127.0.0.1", "/api/git-workflow/commit", { method: "POST", body: { variant: "input", message: updatedDefault.body?.data?.message, tab: tabId } });
+    assert.equal(updatedCommit.status, 200);
+    assert.equal(updatedCommit.body?.ok, true, "input commit endpoint should accept the update default");
+
+    await rm(path.join(cwd, "single.txt"));
+    const gitAddDeleted = await request("127.0.0.1", "/api/git-workflow/add", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitAddDeleted.status, 200);
+    assert.equal(gitAddDeleted.body?.ok, true, "git add endpoint should stage a single-file deletion");
+    const deletedDefault = await request("127.0.0.1", `/api/git-workflow/default-commit-message?tab=${encodeURIComponent(tabId)}`);
+    assert.equal(deletedDefault.status, 200);
+    assert.equal(deletedDefault.body?.data?.message, "deleted single.txt");
+
+    await writeFile(path.join(cwd, "multi-a.txt"), "a\n");
+    await writeFile(path.join(cwd, "multi-b.txt"), "b\n");
+    const gitAddMultiple = await request("127.0.0.1", "/api/git-workflow/add", { method: "POST", body: { tab: tabId } });
+    assert.equal(gitAddMultiple.status, 200);
+    assert.equal(gitAddMultiple.body?.ok, true, "git add endpoint should stage multiple files");
+    const multipleDefault = await request("127.0.0.1", `/api/git-workflow/default-commit-message?tab=${encodeURIComponent(tabId)}`);
+    assert.equal(multipleDefault.status, 200);
+    assert.equal(multipleDefault.body?.ok, true, "default commit message endpoint should still return ok when no default is available");
+    assert.equal(multipleDefault.body?.data?.message, "", "multiple staged files should not get a default commit message");
+  } else {
+    console.log("http-endpoints-harness: git not available; skipping git init workflow endpoint checks");
+  }
+
+  // Delta transcript endpoint (P1-1): ?since= returns only the tail plus merge metadata.
+  const fullMessages = await request("127.0.0.1", `/api/messages?tab=${encodeURIComponent(tabId)}`);
+  assert.equal(fullMessages.status, 200);
+  assert.equal((fullMessages.body?.data?.messages || []).length, 3, "fake pi should provide a 3-message transcript");
+  assert.equal(fullMessages.body?.data?.totalCount, undefined, "full fetches should keep the legacy payload shape");
+
+  const deltaMessages = await request("127.0.0.1", `/api/messages?since=2&tab=${encodeURIComponent(tabId)}`);
+  assert.equal(deltaMessages.status, 200);
+  assert.equal(deltaMessages.body?.data?.since, 2);
+  assert.equal(deltaMessages.body?.data?.totalCount, 3);
+  assert.equal((deltaMessages.body?.data?.messages || []).length, 1, "since=2 should return only the tail message");
+  assert.equal(deltaMessages.body?.data?.messages?.[0]?.content, "fake follow-up");
+
+  const clampedMessages = await request("127.0.0.1", `/api/messages?since=99&tab=${encodeURIComponent(tabId)}`);
+  assert.equal(clampedMessages.status, 200);
+  assert.equal(clampedMessages.body?.data?.since, 3, "since beyond the transcript should clamp to the total count");
+  assert.equal((clampedMessages.body?.data?.messages || []).length, 0);
+
   // Native slash command routed through the adapter (/copy → get_last_assistant_text).
   const copy = await request("127.0.0.1", "/api/prompt", {
     method: "POST",

package/tests/mobile-static.test.mjs

@@ -24,16 +24,16 @@ const [pkgRaw, html, css, app, server, extension, readme, startScript, manifestR
 const pkg = JSON.parse(pkgRaw);
 const manifest = JSON.parse(manifestRaw);
 const companionDependencies = {
-  "@firstpick/pi-extension-git-footer-status": "^0.2.1",
-  "@firstpick/pi-extension-release-aur": "^0.1.3",
-  "@firstpick/pi-extension-release-npm": "^0.3.3",
+  "@firstpick/pi-extension-git-footer-status": "^0.3.3",
+  "@firstpick/pi-extension-release-aur": "^0.1.6",
+  "@firstpick/pi-extension-release-npm": "^0.4.0",
   "@firstpick/pi-extension-safety-guard": "^0.2.3",
-  "@firstpick/pi-extension-setup-skills": "^0.1.5",
-  "@firstpick/pi-extension-stats": "^0.2.0",
-  "@firstpick/pi-extension-todo-progress": "^0.1.7",
-  "@firstpick/pi-extension-tools": "^0.1.4",
-  "@firstpick/pi-prompts-git-pr": "^0.1.0",
-  "@firstpick/pi-themes-bundle": "^0.1.1",
+  "@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-tools": "^0.1.6",
+  "@firstpick/pi-prompts-git-pr": "^0.1.2",
+  "@firstpick/pi-themes-bundle": "^0.1.4",
 };
 
 assert.match(html, /viewport-fit=cover/, "viewport should opt into safe-area-aware full-screen layout");
@@ -267,7 +267,7 @@ assert.match(css, /\.composer-publish-menu:hover > \.composer-publish-button\[da
 assert.match(css, /\.composer-publish-menu-panel \{[\s\S]*?display:\s*none;[\s\S]*?flex-direction:\s*column/, "Publish workflow menu should hide when closed and expand like grouped tabs");
 assert.match(css, /\.composer-publish-menu:hover \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu:focus-within \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu\.open \.composer-publish-menu-panel \{\n\s+display:\s*flex;/, "Publish workflow menu should open on hover, focus, or explicit open state");
 assert.match(css, /\.composer-native-command-button \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu should have a distinct slash-command button style");
-assert.match(css, /\.composer-options-menu-panel \{[\s\S]*?max-height:\s*min\(88vh, 36rem\)/, "Options menu should be tall enough for common commands without scrolling on normal viewports");
+assert.match(css, /\.composer-options-menu-panel \{[\s\S]*?max-height:\s*min\(calc\(var\(--visual-viewport-height, 100dvh\) - 2rem\), 44rem\)/, "Options menu should be tall enough for common commands without scrolling on normal viewports");
 assert.match(css, /\.composer-native-command-menu-item \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu items should be styled separately from publish actions");
 assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish and command menu buttons should fit beside Git workflow in mobile actions");
 assert.match(css, /\.composer-actions-panel[\s\S]*?bottom:\s*calc\(100% \+ 0\.42rem\)/, "mobile composer actions should open as an above-composer sheet");
@@ -421,6 +421,10 @@ assert.match(app, /api\("\/api\/shutdown", \{ method: "POST", scoped: false \}\)
 assert.match(server, /url\.pathname === "\/api\/restart" && req\.method === "POST"/, "server should expose restart endpoint");
 assert.match(server, /PI_WEBUI_RESTORE_TABS: JSON\.stringify\(restorableTabs \|\| \[\]\)/, "server restart should preserve restorable tab metadata");
 assert.match(server, /if \(webuiDevServer\) env\.PI_WEBUI_DEV = "1";/, "server restart should explicitly preserve dev mode");
+assert.match(server, /async function resolveUpdateTasks\(\)[\s\S]*currentWebuiPackageUpdateTask\(\)[\s\S]*agentPackageRootUpdateTask\(\)[\s\S]*npmGlobalPackageRootUpdateTask\(\)[\s\S]*bunGlobalPackageRootUpdateTask\(\)/, "server update should include current, Pi-agent, npm-global, and Bun-global Web UI/Pi package roots");
+assert.match(server, /function packageInstallSpecs\(packageNames\)[\s\S]*`\$\{packageName\}@latest`/, "server package update tasks should force latest Web UI/Pi package specs instead of staying inside stale semver ranges");
+assert.match(app, /Run Pi\/Web UI package updates now\?/, "frontend update confirmation should describe the broader package update set");
+assert.match(readme, /detected local\/global Web UI and Pi package-manager updates/, "README should document that update refreshes local and global Web UI\/Pi package roots");
 assert.match(server, /async function closeNetworkAccess\(\)/, "server should expose a local-only rebind helper for closing network access");
 assert.match(server, /url\.pathname === "\/api\/network\/close" && req\.method === "POST"/, "server should route network close requests");
 assert.match(server, /server\.closeAllConnections\?\.\(\)/, "network rebind should force-close long-lived clients so close-to-localhost can complete");
@@ -548,7 +552,7 @@ assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s
 const workspaceInfoSource = server.match(/async function getWorkspaceInfo[\s\S]*?\n}\n\nlet activeGitWorkflowProcess/)?.[0] || "";
 assert.ok(workspaceInfoSource, "server workspace info source should be inspectable");
 assert.doesNotMatch(workspaceInfoSource, /runCommand\("git"|branchStatus|isRepo/, "Web UI workspace endpoint should not duplicate git footer status collection");
-assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
+assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true, forceRebuild: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*renderOptionalFeatureDependentDisplays\(\);[\s\S]*const tabContext = activeTabContext\(\);[\s\S]*refreshCommands\(tabContext\)/, "optional feature enable/disable should re-render the GUI and then refresh command capabilities");
 assert.match(app, /function setOptionalControlState\(button, available, unavailableTitle\)[\s\S]*setAttribute\("aria-label", nextAriaLabel\)[\s\S]*setAttribute\("data-tooltip", nextTooltip\)/, "optional feature button disabled state should update accessible labels and visible tooltips");
 assert.match(app, /const hasGitWorkflow = isOptionalFeatureEnabled\("gitWorkflow"\);\n\s+elements\.gitWorkflowButton\.hidden = !hasGitWorkflow/, "guided git workflow composer button should be hidden when unavailable or disabled");
@@ -557,7 +561,10 @@ assert.match(app, /\["skills", "tuiSkillsCommand"\][\s\S]*\["tools", "tuiToolsCo
 assert.match(app, /function setNativeCommandMenuOpen\(open\)/, "frontend should track the skills/tools command menu open state separately from Publish");
 assert.match(app, /nativeSkillsButton\.hidden = !isOptionalFeatureEnabled\("tuiSkillsCommand"\)[\s\S]*nativeToolsButton\.hidden = !isOptionalFeatureEnabled\("tuiToolsCommand"\)/, "skills/tools menu items should be hidden by their optional feature toggles");
 assert.match(app, /function renderCommands\(\)/, "side-panel commands should be re-renderable from current optional feature state");
-assert.match(app, /function installOptionalFeature\(featureId\)/, "optional features should expose an install action");
+assert.match(app, /function installOptionalFeature\(featureId, \{ update = false \} = \{\}\)/, "optional features should expose install and update actions");
+assert.match(app, /api\("\/api\/optional-features"/, "optional feature panel should fetch package install/update status from the backend");
+assert.match(app, /packageStatus\?\.updateAvailable[\s\S]*action\.textContent = "Update…"/, "optional feature package drift should turn the install action into an update action");
+assert.match(app, /optionalFeatureInstallMessages\.set\(featureId[\s\S]*waiting for package-manager output/, "optional feature installs should show running feedback while npm is active");
 assert.match(app, /api\("\/api\/optional-feature-install"/, "optional feature install action should call the backend installer endpoint");
 assert.match(app, /id: "safetyGuard"[\s\S]*?@firstpick\/pi-extension-safety-guard/, "optional features should include the safety guard companion");
 assert.match(app, /id: "tuiSkillsCommand"[\s\S]*?@firstpick\/pi-extension-setup-skills/, "optional features should include the TUI skills command companion");
@@ -589,6 +596,13 @@ assert.match(app, /addGitWorkflowAction\("Create PR", \(\) => createGitPrBranch\
 assert.match(app, /const GIT_WORKFLOW_CREATE_PR_TOOLTIP = \[[\s\S]*"Create PR branch:"[\s\S]*"1\. Ask Pi to generate a type\/feature-name branch from staged changes\."[\s\S]*"6\. Push and Create PR will push upstream, run \/pr, let you review, then run gh pr create\."/, "Create PR should have an up-to-date step-by-step tooltip");
 assert.match(app, /const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = \[[\s\S]*"Manual PR branch:"[\s\S]*"1\. Skip agent branch-name generation\."[\s\S]*"6\. Push and Create PR will push upstream, run \/pr, let you review, then run gh pr create\."/, "Manual branch should have an up-to-date step-by-step tooltip");
 assert.match(app, /addGitWorkflowAction\("Manual branch", \(\) => createGitPrBranchManually\(\), "", false, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP\)/, "Manual branch should render with its tooltip");
+assert.match(app, /function renderGitWorkflowManualCommitInput\(\)[\s\S]*git-workflow-message-input[\s\S]*Commit input[\s\S]*commitGitWorkflow\("input", tabId\)/, "Message stage should render a manual commit message input with a Commit input action");
+assert.match(app, /gitWorkflow\.step === "generate"\) \{\n\s+renderGitWorkflowManualCommitInput\(\);\n\s+addGitWorkflowAction\("Run \/git-staged-msg"/, "Message process stage should show manual input before generated-message actions");
+assert.match(app, /renderGitWorkflowManualCommitInput\(\);[\s\S]*addGitWorkflowAction\("Commit short"/, "Commit choice stage should keep manual commit input before generated commit choices");
+assert.match(app, /async function commitGitWorkflow\(variant[\s\S]*variant === "input"[\s\S]*message: inputMessage/, "Commit input should send the typed message to the git workflow commit API");
+assert.match(app, /const donePatch = variant === "input"[\s\S]*message: true, commit: true/, "Commit input should mark both message and commit workflow processes done");
+assert.match(server, /\["short", "long", "input"\][\s\S]*cleanGitCommitMessageInput\(body\.message\)[\s\S]*git commit -m <input message>/, "server should accept typed git workflow commit messages");
+assert.match(css, /\.git-workflow-message-input-row \{[\s\S]*flex:\s*1 1 100%/, "manual git workflow commit input should span the Message stage actions row");
 assert.match(css, /\.git-workflow-actions button\[data-tooltip\]::after \{[\s\S]*content:\s*attr\(data-tooltip\)[\s\S]*white-space:\s*pre-line/, "guided git workflow action tooltips should render multiline step lists");
 assert.match(app, /function gitBranchNamePromptMessage\(\)[\s\S]*hasAvailableCommand\("git-branch-name"\)[\s\S]*return "\/git-branch-name"/, "guided git workflow should ask the agent to generate PR branch names when the prompt is available");
 assert.match(app, /async function loadGitWorkflowBranchName\([\s\S]*gitWorkflowRequest\("\/api\/git-workflow\/branch-name"/, "guided git workflow should load generated agent branch names before branch creation");
@@ -637,7 +651,7 @@ assert.match(app, /function scheduleLiveToolRunRender\(run[\s\S]*?liveToolRender
 assert.match(app, /function handleToolExecutionUpdate\(event\)[\s\S]*?event\.partialResult[\s\S]*?scheduleLiveToolRunRender\(run, \{ scroll: false \}\)/, "live tool_execution_update events should update transcript-visible tool cards without replacing them per event");
 assert.match(app, /function captureReusableToolCards\(\)[\s\S]*?\.message\.toolExecution\[data-tool-call-id\]/, "full transcript re-renders should capture existing tool cards before clearing the chat");
 assert.match(app, /function appendMessage\(message,[\s\S]*?reusableToolCards = null[\s\S]*?reuseToolExecutionBubble\(reusableToolCards, message/, "message rendering should reuse matching tool cards instead of replacing them during refreshes");
-assert.match(app, /function renderAllMessages\(\{ preserveScroll = false \} = \{\}\)[\s\S]*?const reusableToolCards = captureReusableToolCards\(\);[\s\S]*?appendTranscriptMessage\(item\.message,[\s\S]*?reusableToolCards,/, "transcript refreshes should pass reusable tool cards through to item rendering");
+assert.match(app, /function renderAllMessages\(\{ preserveScroll = false, forceRebuild = false \} = \{\}\)[\s\S]*?const reusableToolCards = captureReusableToolCards\(\);[\s\S]*?appendTranscriptMessage\(entry\.item\.message,[\s\S]*?reusableToolCards,/, "transcript refreshes should pass reusable tool cards through to item rendering");
 assert.match(app, /const keyedToolExecution = message\.role === "toolExecution" && message\.toolCallId[\s\S]*?keyedToolExecution \? "toolExecution"[\s\S]*?keyedToolExecution \? "" : message\.title[\s\S]*?keyedToolExecution \? "" : message\.timestamp/, "tool action entry identity should stay stable when live transient cards become persisted transcript cards");
 assert.match(app, /appendText\(preview, toolResultPreviewText\(message, 10\), "code-block tool-result-preview-text"\)/, "collapsed tool results should render the first ten preview lines by default");
 assert.match(app, /function assistantDisplayMessages\(message\)/, "assistant history should split thinking and tool-call parts out of the final Assistant output card");
@@ -670,7 +684,7 @@ assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const assist
 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]*?renderMarkdown\(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 \(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 \(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");
@@ -847,7 +861,7 @@ assert.match(css, /\.composer-actions-panel > \.composer-publish-menu:hover::aft
 assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-panel \{[\s\S]*?position:\s*absolute;[\s\S]*?inset:\s*auto auto calc\(100% \+ 0\.38rem\) 0;[\s\S]*?max-height:\s*min\(34dvh, 18rem\);[\s\S]*?overflow:\s*auto;/, "opened mobile Actions dropdown panels should float upward over the Actions controls with their own scrollbar");
 assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-panel \{[\s\S]*?width:\s*100%;[\s\S]*?min-width:\s*0;[\s\S]*?max-width:\s*100%;/, "mobile Actions dropdown panels should align to the width of their trigger buttons");
 assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-item \{[\s\S]*?width:\s*100%;[\s\S]*?min-width:\s*0;[\s\S]*?white-space:\s*normal;/, "mobile Actions dropdown option buttons should not keep desktop min-widths that misalign with triggers");
-assert.match(css, /\.composer-actions-panel > \.composer-options-menu \.composer-publish-menu-panel \{[\s\S]*?inset-inline:\s*auto 0;[\s\S]*?max-height:\s*min\(76dvh, 34rem\);/, "mobile Options dropdown should be tall enough to avoid scrolling for the standard option list");
+assert.match(css, /\.composer-actions-panel > \.composer-options-menu \.composer-publish-menu-panel \{[\s\S]*?inset-inline:\s*auto 0;[\s\S]*?max-height:\s*min\(calc\(var\(--visual-viewport-height, 100dvh\) - 2rem\), 44rem\);/, "mobile Options dropdown should be tall enough to avoid scrolling for the standard option list");
 assert.match(app, /function setMobileTabsExpanded\(/, "mobile tab strip should be JS-toggleable");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\) \{[\s\S]*?\.terminal-tab-group \{\n\s+display:\s*grid;\n\s+grid-template-columns:\s*minmax\(0, 1fr\) auto;/, "mobile terminal tab groups should use a stable grid row for the tab and close button when expanded");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\) \{[\s\S]*?\.terminal-tab-group-menu \{[\s\S]*?grid-column:\s*1 \/ -1;[\s\S]*?margin:\s*0\.34rem 0 0;/, "mobile terminal tab group menus should not add horizontal margins that overflow and distort the tab card");
@@ -940,6 +954,12 @@ assert.ok(matrixBackground.length > 100000, "Matrix background image should be p
 assert.ok(mochaBackground.length > 8000, "Catppuccin Mocha background image should be present as a compact PNG asset");
 
 assert.match(server, /AuthStorage, SessionManager/, "server should import AuthStorage for safe OAuth token refresh");
+assert.match(server, /DefaultPackageManager/, "server should use Pi's package resolver when controlling Web UI tab extension loading");
+assert.match(server, /WEBUI_CONTROLLED_PACKAGES = new Set\(\[WEBUI_PACKAGE, \.\.\.OPTIONAL_FEATURE_PACKAGES\.values\(\)\]\)/, "server should identify Web UI-controlled packages for de-duplicated feature loading");
+assert.match(server, /const args = \["--mode", "rpc", "--no-extensions", "--no-skills", "--no-prompt-templates", "--no-themes"\]/, "Web UI tabs should disable implicit resource loading before adding curated resource paths");
+assert.match(server, /normalPiResourcePathsForTab[\s\S]*WEBUI_CONTROLLED_PACKAGES\.has\(packageName\)[\s\S]*continue/, "Web UI tab resource resolution should exclude separately installed Web UI feature packages");
+assert.match(server, /startedWebuiResourcePaths\(resourceType\)/, "Web UI tabs should load feature resources from the started Web UI package");
+assert.match(server, /resolveInstalledPackageSubpath\(nodeModulesRef\.packageName, nodeModulesRef\.subpath\)/, "Web UI should prefer workspace/global/package-root installed packages for node_modules manifest entries");
 assert.match(server, /const CODEX_TOKEN_REFRESH_SKEW_MS = 5 \* 60 \* 1000/, "server should refresh Codex OAuth tokens before they expire");
 assert.match(server, /url\.pathname === "\/api\/codex-usage" && req\.method === "GET"/, "server should expose a sanitized Codex usage endpoint");
 assert.match(server, /OPENAI_CODEX_USAGE_ENDPOINT/, "server should query Codex usage from the backend, not the browser");
@@ -1055,12 +1075,16 @@ assert.match(server, /const OPTIONAL_FEATURE_PACKAGES = new Map/, "server should
 assert.match(server, /\["safetyGuard", "@firstpick\/pi-extension-safety-guard"\]/, "server should allow installing the safety guard optional feature");
 assert.match(server, /\["tuiSkillsCommand", "@firstpick\/pi-extension-setup-skills"\]/, "server should allow installing the TUI skills optional feature");
 assert.match(server, /\["tuiToolsCommand", "@firstpick\/pi-extension-tools"\]/, "server should allow installing the TUI tools optional feature");
+assert.match(server, /function optionalFeaturePackageStatus\(featureId\)/, "server should report optional feature package install/update status");
 assert.match(server, /function installOptionalFeaturePackage\(featureId\)/, "server should provide optional feature package installation helper");
 assert.match(server, /PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT/, "optional feature installs should support an explicit package-manager root override");
-assert.match(server, /function configuredAgentNpmRoot\(\)/, "global Web UI launches should install optional feature packages into Pi's agent npm root, not the npm global prefix");
-assert.match(server, /installRootDeclaresPackage\(.*?@firstpick\/pi-package-webui/s, "optional feature installs should only reuse a node_modules parent that declares the Web UI package dependency");
+assert.match(server, /function configuredAgentNpmRoot\(\)/, "global Web UI launches should consider Pi's agent npm root for optional packages");
+assert.match(server, /installRootDeclaresPackage\(.*?@firstpick\/pi-package-webui/s, "optional feature installs should reuse a node_modules parent that declares the Web UI package dependency");
+assert.match(server, /installRootContainsPackage\(.*?@firstpick\/pi-package-webui/s, "global npm Web UI launches should also accept the prefix containing the Web UI package folder");
+assert.match(server, /resolveInstalledPackageSubpath\(nodeModulesRef\.packageName, nodeModulesRef\.subpath\)/, "started Web UI resource resolution should fall back to globally installed sibling optional packages");
 assert.match(server, /if \(webuiDevServer\) return installRoot/, "source-checkout Web UI launches should still use the checkout root for optional feature installs");
-assert.match(server, /Could not determine a safe optional feature install root/, "optional feature installs should fail closed when no declared package root can be found");
+assert.match(server, /Could not determine a safe optional feature install root/, "optional feature installs should fail closed when no safe package root can be found");
+assert.match(server, /url\.pathname === "\/api\/optional-features" && req\.method === "GET"/, "server should expose optional feature package status endpoint");
 assert.match(server, /url\.pathname === "\/api\/optional-feature-install" && req\.method === "POST"/, "server should expose optional feature install endpoint");
 assert.match(server, /requireLocalhostRoute\(req, url\.pathname\)/, "optional feature install endpoint should use shared localhost trust policy");
 assert.match(server, /url\.pathname === "\/api\/skill-file" && req\.method === "GET"[\s\S]*?getSkillFileData/, "server should expose GET /api/skill-file for editable skill content");
@@ -1085,16 +1109,21 @@ assert.match(readme, /Feedback reactions \(`👍`, `👎`, `\?`\) on final assis
 assert.match(readme, /POST \/api\/action-feedback\?tab=<tabId>/, "README should document the action-feedback endpoint");
 assert.match(readme, /`@` file\/path references with live suggestions/, "README should describe @ file/path reference autocomplete");
 assert.match(readme, /GET \/api\/path-suggestions\?tab=<tabId>&query=<path>/, "README should document the path-suggestions endpoint");
+assert.match(readme, /GET \/api\/optional-features/, "README should document optional feature status endpoint");
 assert.match(readme, /POST \/api\/optional-feature-install/, "README should document optional feature install endpoint");
 assert.match(readme, /server-persisted fast picks/, "README should describe server-persisted fast picks");
 assert.match(readme, /browser notifications when a tab needs an extension UI response and an optional side-panel toggle for agent-done notifications/, "README should describe blocked-tab and agent-done notifications");
 assert.match(readme, /blocked-tab browser notifications, and optional agent-done notifications require browser service-worker\/notification support/, "README should document notification requirements");
 assert.match(readme, /Side-panel theme picker backed by optional `@firstpick\/pi-themes-bundle` themes when loaded/, "README should describe optional theme selection");
 assert.match(readme, /## Optional companion packages/, "README should document optional Web UI companion packages");
+assert.match(readme, /curates Pi resources from the Web UI package that started the server/, "README should document started-package-based Web UI feature loading");
+assert.match(readme, /Companion packages installed as global\/npm-prefix siblings/, "README should document global sibling companion discovery");
+assert.match(readme, /avoiding duplicate loads while keeping global `pi-webui` launches working/, "README should document duplicate companion suppression");
 assert.match(readme, /checks loaded Pi capabilities directly through RPC-visible commands and live widget events/, "README should document capability-based startup checks");
-assert.match(readme, /side panel shows each optional feature as enabled, disabled, or install-needed/, "README should document optional feature side-panel controls");
-assert.match(readme, /Installing a missing feature is an explicit, warned action/, "README should document optional feature install warning behavior");
+assert.match(readme, /side panel shows each optional feature as enabled, disabled, installed-but-not-loaded, update-available, or install-needed/, "README should document optional feature side-panel controls");
+assert.match(readme, /Installing or updating a feature is an explicit, warned action with running\/failure feedback/, "README should document optional feature install and update warning behavior");
 assert.match(readme, /\.\/start-webui\.sh --dev --cwd \/path\/to\/project/, "README should document the dev helper launcher");
+assert.match(readme, /sync-pi-package-symlinks\.sh[\s\S]*only one copy is loaded/, "README should document dev companion symlink setup");
 assert.match(startScript, /--dev\)/, "start-webui.sh should accept a --dev flag");
 assert.match(startScript, /local_pi_webui_bin\(\)/, "start-webui.sh should resolve this checkout's local server entrypoint");
 assert.match(startScript, /webui_cmd=\(node "\$local_webui_bin"\)/, "start-webui.sh --dev should run the local bin with node");
@@ -1109,15 +1138,8 @@ for (const [name, range] of Object.entries(companionDependencies)) {
   assert.equal(pkg.dependencies?.[name], undefined, `webui package should not require optional companion ${name}`);
 }
 assert.equal(pkg.bundledDependencies, undefined, "webui optional companion packages should not be bundled into the tarball");
+assert.ok(pkg.pi?.extensions?.includes("./index.ts"), "webui Pi manifest should load its own extension");
 for (const extensionPath of [
-  "../pi-extension-git-footer-status/index.ts",
-  "../pi-extension-release-aur/index.ts",
-  "../pi-extension-release-npm/index.ts",
-  "../pi-extension-safety-guard/index.ts",
-  "../pi-extension-setup-skills/index.ts",
-  "../pi-extension-stats/index.ts",
-  "../pi-extension-todo-progress/index.ts",
-  "../pi-extension-tools/index.ts",
   "node_modules/@firstpick/pi-extension-git-footer-status/index.ts",
   "node_modules/@firstpick/pi-extension-release-aur/index.ts",
   "node_modules/@firstpick/pi-extension-release-npm/index.ts",
@@ -1129,13 +1151,56 @@ for (const extensionPath of [
 ]) {
   assert.ok(pkg.pi?.extensions?.includes(extensionPath), `webui Pi manifest should load ${extensionPath} when present`);
 }
-assert.ok(pkg.pi?.skills?.includes("../pi-extension-release-aur/skills"), "webui Pi manifest should load release-aur sibling skills when present");
+for (const siblingExtensionPath of [
+  "../pi-extension-git-footer-status/index.ts",
+  "../pi-extension-release-aur/index.ts",
+  "../pi-extension-release-npm/index.ts",
+  "../pi-extension-safety-guard/index.ts",
+  "../pi-extension-setup-skills/index.ts",
+  "../pi-extension-stats/index.ts",
+  "../pi-extension-todo-progress/index.ts",
+  "../pi-extension-tools/index.ts",
+]) {
+  assert.ok(!pkg.pi?.extensions?.includes(siblingExtensionPath), `webui Pi manifest should avoid duplicate sibling load path ${siblingExtensionPath}`);
+}
 assert.ok(pkg.pi?.skills?.includes("node_modules/@firstpick/pi-extension-release-aur/skills"), "webui Pi manifest should load release-aur nested skills when present");
-assert.ok(pkg.pi?.prompts?.includes("../pi-package-prompts-git-pr/prompts"), "webui Pi manifest should load guided-git sibling prompts when present");
+assert.ok(!pkg.pi?.skills?.includes("../pi-extension-release-aur/skills"), "webui Pi manifest should avoid duplicate release-aur sibling skills");
 assert.ok(pkg.pi?.prompts?.includes("node_modules/@firstpick/pi-prompts-git-pr/prompts"), "webui Pi manifest should load guided-git nested prompts when present");
-assert.ok(pkg.pi?.themes?.includes("../pi-package-themes-bundle/themes"), "webui Pi manifest should load sibling bundled themes when present");
+assert.ok(!pkg.pi?.prompts?.includes("../pi-package-prompts-git-pr/prompts"), "webui Pi manifest should avoid duplicate guided-git sibling prompts");
 assert.ok(pkg.pi?.themes?.includes("node_modules/@firstpick/pi-themes-bundle/themes"), "webui Pi manifest should load nested bundled themes when present");
+assert.ok(!pkg.pi?.themes?.includes("../pi-package-themes-bundle/themes"), "webui Pi manifest should avoid duplicate sibling bundled themes");
 assert.ok(pkg.scripts?.check?.includes("node --check public/app.js"), "check script should syntax-check app.js");
 assert.ok(pkg.scripts?.check?.includes("node tests/run-all.mjs"), "check script should run the shared test runner");
 
+// --- Performance: keyed transcript reconciliation (P0-1) ---
+assert.match(app, /let renderedTranscriptState = \{ epoch: "", entries: \[\] \};/, "transcript reconciliation should track rendered entries");
+assert.match(app, /function renderAllMessages\(\{ preserveScroll = false, forceRebuild = false \} = \{\}\)[\s\S]*?if \(prefixLength === 0\) resetChatOutput\(\);[\s\S]*?removeChatBubblesAfterPrefix\(/, "renderAllMessages should reuse the unchanged transcript prefix instead of always rebuilding");
+assert.match(app, /function removeChatBubblesAfterPrefix\(keptKeys\)[\s\S]*?child === elements\.stickyUserPromptButton \|\| child === runIndicatorBubble/, "prefix removal must preserve the sticky prompt button and run indicator");
+assert.match(app, /function resetChatOutput\(\) \{\n  liveToolCards\.clear\(\);\n  renderedTranscriptState = \{ epoch: "", entries: \[\] \};/, "full chat resets must clear reconciliation state");
+assert.match(app, /function transcriptRenderEpoch\(\)[\s\S]*?thinkingOutputVisible/, "reconciliation epoch must include thinking visibility so toggles rebuild the transcript");
+assert.match(app, /pruneDisconnectedLiveToolCards\(\);/, "reconciliation must prune live tool card references to removed DOM nodes");
+
+// --- 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");
+
+// --- 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");
+assert.match(app, /async function refreshMessages\(tabContext = activeTabContext\(\)\)[\s\S]*?\/api\/messages\?since=/, "message refreshes should request transcript deltas");
+assert.match(app, /if \(!nextMessages\) \{[\s\S]*?api\("\/api\/messages", \{ tabId: tabContext\.tabId \}\)/, "delta failures must fall back to a full transcript fetch");
+assert.match(server, /function applyMessagesSinceParam\(response, url\)/, "server should slice get_messages results for \\?since= requests");
+assert.match(app, /const messageStaticSignatureCache = new WeakMap\(\);/, "static message signatures should be cached by object identity");
+assert.match(app, /case "tool_execution_end":(?:(?!scheduleRefreshMessages)[\s\S])*?break;/, "tool completions must not trigger full transcript refreshes");
+assert.match(app, /case "message_end":[\s\S]*?scheduleRefreshMessages\(\);/, "assistant message completion must still reconcile the transcript");
+
+// --- UX: transcript search (P2-1) ---
+assert.match(html, /id="chatSearchBar"[\s\S]*?id="chatSearchInput"[\s\S]*?id="chatSearchPrevButton"[\s\S]*?id="chatSearchNextButton"[\s\S]*?id="chatSearchCloseButton"/, "transcript search bar markup should exist with navigation controls");
+assert.match(app, /function openChatSearch\(\)[\s\S]*?elements\.chatSearchInput\?\.focus\(\)/, "opening transcript search should focus the input");
+assert.match(app, /\(event\.ctrlKey \|\| event\.metaKey\) && !event\.altKey && !event\.shiftKey && event\.key\.toLowerCase\(\) === "f"/, "Ctrl\/Cmd+F should open the transcript search");
+assert.match(app, /function focusChatSearchMatch\(\)[\s\S]*?details\.open = true;[\s\S]*?scrollIntoView/, "navigating to a search match should expand collapsed tool output and scroll to the bubble");
+assert.match(app, /autoFollowChat = false;\n  lastChatProgrammaticScrollAt = performance\.now\(\);/, "search navigation must not fight chat auto-follow");
+assert.match(css, /\.message\.search-current \{/, "current search match should have a highlight style");
+assert.match(css, /\.chat-search-bar \{/, "transcript search bar should be styled");
+
 console.log("mobile static checks passed");