@firstpick/pi-package-webui 0.4.5 → 0.4.7

package/public/index.html

@@ -539,7 +539,10 @@
             <h2 id="gitChangesTitle">Uncommitted Changes</h2>
             <p id="gitChangesSubtitle" class="muted">Current tab git diff</p>
           </div>
-          <button id="gitChangesRefreshButton" type="button">Refresh</button>
+          <div class="git-changes-actions">
+            <button id="gitChangesRefreshButton" type="button">Refresh</button>
+            <button id="gitChangesPullButton" class="primary" type="button" disabled>Pull</button>
+          </div>
         </div>
         <p id="gitChangesStatus" class="git-changes-status muted" role="status" aria-live="polite"></p>
         <div id="gitChangesBody" class="git-changes-body"></div>

package/public/styles.css

@@ -1307,6 +1307,24 @@ body.side-panel-collapsed .terminal-tabs-shell {
   isolation: isolate;
   background: var(--ctp-crust);
 }
+.terminal-tab[draggable="true"],
+.terminal-tab-group-item[draggable="true"] {
+  cursor: grab;
+}
+.terminal-tab.terminal-tab-dragging,
+.terminal-tab-group-item.terminal-tab-dragging {
+  cursor: grabbing;
+  opacity: 0.68;
+  transform: scale(0.985);
+}
+.terminal-tab-custom-group {
+  border-color: rgba(203, 166, 247, 0.34);
+}
+.terminal-tab-custom-group .terminal-tab-group-count {
+  color: var(--ctp-mauve);
+  border-color: rgba(203, 166, 247, 0.30);
+  background: rgba(203, 166, 247, 0.12);
+}
 .terminal-tab-group:hover,
 .terminal-tab-group:focus-within {
   z-index: 100;
@@ -1432,6 +1450,15 @@ body.side-panel-collapsed .terminal-tabs-shell {
   border-color: rgba(166, 227, 161, 0.52);
   box-shadow: 0 0 1rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.045);
 }
+.terminal-tab.terminal-tab-drag-over,
+.terminal-tab-group-item.terminal-tab-drag-over {
+  border-color: rgba(137, 180, 250, 0.82);
+  box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.34), 0 0 1.2rem rgba(137, 180, 250, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
+}
+.terminal-tab.terminal-tab-drag-over > .terminal-tab-button,
+.terminal-tab-group-item.terminal-tab-drag-over > .terminal-tab-button {
+  background: linear-gradient(120deg, rgba(137, 180, 250, 0.18), rgba(203, 166, 247, 0.12));
+}
 .terminal-tab-button,
 .terminal-tab-close,
 .terminal-new-tab-button {
@@ -2267,6 +2294,14 @@ button.footer-meta {
 .git-changes-header > div:first-child {
   min-width: 0;
 }
+.git-changes-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 .git-changes-kicker {
   display: block;
   color: var(--ctp-yellow);
@@ -2287,6 +2322,7 @@ button.footer-meta {
 .git-changes-empty.error {
   color: var(--ctp-red);
 }
+.git-changes-status.success,
 .git-changes-empty.success {
   color: var(--ctp-green);
 }
@@ -5765,11 +5801,41 @@ button.composer-skill-tag:focus-visible {
   gap: 0.6rem;
   align-items: center;
 }
+.app-runner-custom-item.unavailable {
+  border-color: rgba(243, 139, 168, 0.32);
+}
 .app-runner-custom-item-details {
   display: grid;
   gap: 0.18rem;
   min-width: 0;
 }
+.app-runner-custom-warning,
+.app-runner-custom-feedback {
+  color: var(--danger);
+  line-height: 1.4;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.app-runner-custom-feedback {
+  padding: 0.58rem 0.66rem;
+  border: 1px solid rgba(243, 139, 168, 0.26);
+  border-radius: 0.68rem;
+  background: rgba(243, 139, 168, 0.08);
+}
+.app-runner-custom-feedback.success {
+  color: var(--ctp-green);
+  border-color: rgba(166, 227, 161, 0.28);
+  background: rgba(166, 227, 161, 0.08);
+}
+.app-runner-custom-feedback.warning {
+  color: var(--ctp-yellow);
+  border-color: rgba(249, 226, 175, 0.28);
+  background: rgba(249, 226, 175, 0.08);
+}
+.app-runner-custom-diagnostics {
+  display: grid;
+  gap: 0.42rem;
+}
 .app-runner-custom-item-actions,
 .app-runner-custom-form-actions {
   display: flex;

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

@@ -219,6 +219,54 @@ try {
   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);
 
+  // Custom app runners: save failures must be explicit, saved runners must be runnable,
+  // and stale saved runners must explain why they are not shown in the Run menu.
+  await writeFile(path.join(cwd, "custom-runner.mjs"), "console.log('custom runner ok')\n");
+  const missingCommandRunner = await request("127.0.0.1", "/api/app-runner-config", {
+    method: "POST",
+    body: { tab: tabId, runner: { label: "Broken custom", command: "definitely-missing-pi-webui-runner", path: "custom-runner.mjs" } },
+  });
+  assert.equal(missingCommandRunner.status, 400, "saving a custom runner with a missing command should fail visibly");
+  assert.match(String(missingCommandRunner.body?.error || ""), /Command is not available: definitely-missing-pi-webui-runner/);
+
+  const savedCustomRunner = await request("127.0.0.1", "/api/app-runner-config", {
+    method: "POST",
+    body: { tab: tabId, runner: { label: "Custom node", command: process.execPath, path: "custom-runner.mjs" } },
+    timeoutMs: 10_000,
+  });
+  assert.equal(savedCustomRunner.status, 200, `saving a valid custom runner should succeed: ${savedCustomRunner.body?.error || ""}`);
+  const customConfigRunner = savedCustomRunner.body?.data?.customRunnerConfig?.runners?.find((runner) => runner.label === "Custom node");
+  assert.equal(customConfigRunner?.available, true, "saved custom runner config should mark runnable entries available");
+  const customRunner = savedCustomRunner.body?.data?.runners?.find((runner) => runner.custom === true && runner.label === "Custom node");
+  assert.ok(customRunner?.id, "saved available custom runner should appear in detected app runners");
+
+  const customRunStart = await request("127.0.0.1", "/api/app-runner", {
+    method: "POST",
+    body: { tab: tabId, runnerId: customRunner.id },
+    timeoutMs: 10_000,
+  });
+  assert.equal(customRunStart.status, 200, `custom runner start should return ok: ${customRunStart.body?.error || ""}`);
+  let customRunState = customRunStart;
+  for (let attempt = 0; attempt < 50; attempt++) {
+    if (customRunState.body?.data?.activeRun?.status && customRunState.body.data.activeRun.status !== "running") break;
+    await delay(100);
+    customRunState = await request("127.0.0.1", `/api/app-runners?tab=${encodeURIComponent(tabId)}`, { timeoutMs: 5_000 });
+  }
+  assert.equal(customRunState.body?.data?.activeRun?.status, "done", "custom runner should finish successfully");
+  assert.match((customRunState.body?.data?.activeRun?.lines || []).join("\n"), /custom runner ok/, "custom runner output should be captured");
+  await request("127.0.0.1", "/api/app-runner/clear", { method: "POST", body: { tab: tabId } });
+
+  await writeFile(path.join(cwd, ".pi-webui-runners.json"), `${JSON.stringify({
+    version: 1,
+    runners: [{ id: "broken-custom", label: "Broken custom", command: "definitely-missing-pi-webui-runner", path: "custom-runner.mjs" }],
+  }, null, 2)}\n`);
+  const staleCustomRunner = await request("127.0.0.1", `/api/app-runners?tab=${encodeURIComponent(tabId)}`, { timeoutMs: 10_000 });
+  assert.equal(staleCustomRunner.status, 200);
+  const brokenConfigRunner = staleCustomRunner.body?.data?.customRunnerConfig?.runners?.find((runner) => runner.label === "Broken custom");
+  assert.equal(brokenConfigRunner?.available, false, "unavailable saved custom runners should be flagged in config data");
+  assert.match(String(brokenConfigRunner?.unavailableReason || ""), /Command is not available: definitely-missing-pi-webui-runner/);
+  assert.equal(staleCustomRunner.body?.data?.runners?.some((runner) => runner.label === "Broken custom"), false, "unavailable custom runners should not appear in runnable menu data");
+
   // 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

@@ -346,16 +346,20 @@ assert.doesNotMatch(css, /\.footer-(?:metric|meta)-action::after/, "clickable fo
 assert.match(css, /\.extension-dialog\.git-changes-dialog \{[\s\S]*?--git-changes-dialog-size:[\s\S]*?width:\s*var\(--git-changes-dialog-size\)[\s\S]*?height:\s*var\(--git-changes-dialog-size\)[\s\S]*?aspect-ratio:\s*1 \/ 1/, "git changes modal should override the base dialog with a square wide diff layout");
 assert.match(css, /\.git-current-file-header \{[\s\S]*?position:\s*sticky[\s\S]*?top:\s*-0\.72rem/, "git changes modal should keep a sticky current-file header inside the diff scroller");
 assert.match(css, /\.git-diff-grid \{[\s\S]*?grid-template-columns:\s*3\.8rem minmax\(22rem, 1fr\) 3\.8rem minmax\(22rem, 1fr\)/, "git changes modal should render a side-by-side diff grid");
-assert.match(html, /id="gitChangesDialog"[\s\S]*id="gitChangesRefreshButton"[\s\S]*id="gitChangesBody"/, "git changes modal should expose refresh controls and a diff body");
+assert.match(html, /id="gitChangesDialog"[\s\S]*id="gitChangesRefreshButton"[\s\S]*id="gitChangesPullButton"[\s\S]*id="gitChangesBody"/, "git changes modal should expose refresh, pull controls, and a diff body");
 assert.match(app, /chip\.key === "changes"[\s\S]*?options\.onClick = openGitChangesDialog/, "footer CHANGES chip should open the git changes modal");
 assert.match(app, /async function loadGitChangesDialog[\s\S]*api\("\/api\/git-changes"/, "git changes modal should load diff data from the server endpoint");
+assert.match(app, /async function pullGitChangesDialog\(\)[\s\S]*api\("\/api\/git-changes\/pull", \{ method: "POST"/, "git changes modal should post to the pull endpoint from the Pull button");
+assert.match(app, /function gitDiffDisplayLine\(row, side\)[\s\S]*`-\$\{text\}`[\s\S]*`\+\$\{text\}`/, "git changes modal should render changed lines with +/- prefixes");
 assert.match(app, /function gitUntrackedEntryToDiffFile\(entry\)[\s\S]*?renderRowLimit:\s*Number\.POSITIVE_INFINITY[\s\S]*?type: "added"/, "untracked files should render as complete added-file diffs without the row preview cap");
 assert.match(app, /async function loadMissingGitUntrackedContent\(entry[\s\S]*?\/api\/git-changes\/untracked-file\?path=/, "untracked path-only payloads should fetch complete file contents instead of rendering as empty files");
 assert.match(app, /function updateGitChangesCurrentFileHeader\(\)[\s\S]*?querySelectorAll\("\.git-diff-file\[data-git-diff-file\]"\)/, "git changes modal should derive the sticky current-file header from visible file cards");
 assert.match(server, /async function readGitUntrackedEntry\(root, file\)[\s\S]*?content: binary \? "" : buffer\.toString\("utf8"\)/, "server should include complete text contents for untracked files");
 assert.match(server, /url\.pathname === "\/api\/git-changes\/untracked-file" && req\.method === "GET"/, "server should expose a focused untracked-file content endpoint for stale path-only payload fallbacks");
-assert.match(server, /async function readGitChanges\(cwd\)[\s\S]*?const diffArgs = \["diff", "--no-ext-diff"[\s\S]*?\["diff", "--cached"/, "server should collect both staged and unstaged git diffs for the changes modal");
+assert.match(server, /async function readGitChanges\(cwd\)[\s\S]*?const diffArgs = \["diff", "--no-ext-diff"[\s\S]*?"--unified=0"[\s\S]*?\["diff", "--cached"/, "server should collect compact staged and unstaged git diffs for the changes modal");
+assert.match(server, /async function readGitIncomingChanges\(root, summary\)[\s\S]*?"HEAD\.\.@\{upstream\}"/, "server should collect incoming upstream diffs when remote commits are behind");
 assert.match(server, /url\.pathname === "\/api\/git-changes" && req\.method === "GET"/, "server should expose GET /api/git-changes for the changes modal");
+assert.match(server, /url\.pathname === "\/api\/git-changes\/pull" && req\.method === "POST"[\s\S]*?pullGitChanges\(tab\.cwd\)/, "server should expose POST /api/git-changes/pull for the changes modal Pull button");
 assert.match(css, /@media \(max-width: 1050px\)[\s\S]*?\.footer-line-meta \{[\s\S]*?display:\s*flex;[\s\S]*?flex-wrap:\s*wrap;[\s\S]*?\.footer-line-meta \.footer-meta \{[\s\S]*?flex:\s*1 1 var\(--footer-chip-min-width\);[\s\S]*?width:\s*auto;[\s\S]*?\.footer-workspace,\n\s+\.footer-model,\n\s+\.footer-thinking \{ grid-column:\s*auto; \}/, "narrow git-footer metadata should wrap like the top metric row instead of forcing a two-column grid");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\)[\s\S]*?\.context-meter-bar \{ display:\s*none !important; \}/, "mobile should hide the WebUI context meter that appears after high context usage");
 assert.match(css, /\.footer-line-tui \{[\s\S]*?white-space:\s*nowrap/, "default Web UI footer should use a minimal TUI-like line");
@@ -670,6 +674,9 @@ assert.doesNotMatch(app, /gitWorkflowVisibleTabId|Workflow belongs to/, "guided
 assert.match(app, /function renderReleaseNpmOutputWidget\(\)/, "release-npm live output should use a specialized Web UI renderer");
 assert.match(app, /async function refreshAppRunners\(tabContext = activeTabContext\(\)\)/, "frontend should load detected app runners for the active tab cwd");
 assert.match(app, /function renderAppRunnerWidget\(\)/, "frontend should render app runner output in the shared top widget area");
+assert.match(app, /function appRunnerFailureState\(runnerId, error[\s\S]*failed to start app runner/, "frontend should render visible app-runner start failures instead of only logging them");
+assert.match(app, /appRunnerCustomFeedback[\s\S]*Custom app runner was not saved/, "custom app-runner save failures should be shown inline in the dialog");
+assert.match(server, /function customAppRunnerUnavailableReason\(projectRoot, runner\)[\s\S]*Command is not available/, "server should explain why saved custom app runners are unavailable");
 assert.match(server, /url\.pathname === "\/api\/app-runners" && req\.method === "GET"/, "server should expose detected app runners for the active tab cwd");
 assert.match(server, /url\.pathname === "\/api\/app-runner" && req\.method === "POST"/, "server should start selected app runners directly");
 assert.match(server, /function addGoRunner\(runners, cwd\)[\s\S]*Go\/Golang app entry/, "server should detect Go\/Golang app runners");
@@ -943,7 +950,11 @@ assert.match(app, /classList\.toggle\("terminal-tabs-dense", tabs\.length >= 10\
 assert.match(app, /appendTerminalTabContent\(button, \{ title: activeTitle,[\s\S]*?count: groupTabs\.length \}\)/, "group buttons should show the active terminal name instead of only the cwd label");
 assert.match(app, /wrapper\.addEventListener\("pointerenter", \(\) => setOpenTerminalTabGroup\(group\.key\)\)/, "terminal tab groups should mark themselves open while hovered");
 assert.match(app, /if \(openTerminalTabGroupKey\) \{\n\s+scheduleRefreshTabs\(600\);/, "tab polling should defer full tab refreshes while a group menu is open");
-assert.match(app, /function shouldRenderTerminalTabGroup\(group, groupCount\) \{\n\s+return groupCount > 1 && group\.tabs\.length > 1 && Boolean\(group\.cwd\);\n\}/, "terminal tabs should only collapse cwd groups when multiple groups are available");
+assert.match(app, /function shouldRenderTerminalTabGroup\(group, groupCount\) \{\n\s+if \(group\.custom\) return group\.tabs\.length > 1;\n\s+return groupCount > 1 && group\.tabs\.length > 1 && Boolean\(group\.cwd\);\n\}/, "terminal tabs should always render custom groups while only collapsing cwd groups when multiple groups are available");
+assert.match(app, /TERMINAL_CUSTOM_GROUPS_STORAGE_KEY/, "frontend should persist custom terminal tab groups in browser storage");
+assert.match(app, /function bindTerminalTabDragAndDrop\(/, "terminal tabs should bind drag-and-drop grouping behavior");
+assert.match(app, /function handleTerminalTabDrop\(sourceTabId, target\)[\s\S]*?createTerminalCustomGroup/, "dropping a terminal tab onto another tab or group should create or update a custom group");
+assert.match(css, /\.terminal-tab\.terminal-tab-drag-over,[\s\S]*?\.terminal-tab-group-item\.terminal-tab-drag-over/, "terminal tab drop targets should show drag-over affordance");
 assert.match(app, /function closeTerminalTabGroup\(group\)[\s\S]*?closeTerminalTabs\(group\.tabs\.map\(\(tab\) => tab\.id\)/, "terminal tab groups should be closable as a batch");
 assert.match(app, /function closeAllTerminalTabs\(\)[\s\S]*?closeTerminalTabs\(tabs\.map\(\(tab\) => tab\.id\)/, "tab header should close all terminal tabs as a batch");
 assert.match(app, /WARNING: \$\{activeAgentTabs\.length\}[\s\S]*?still running or waiting for input/, "tab close confirmations should warn when agents are still running");