pi-ui-extend 1.0.36 → 1.0.38

package/README.md

@@ -520,6 +520,7 @@ skills/                      packaged agent skills
 docs/                        release documentation
 tests/                       unit, integration, and PTY tests
 scripts/                     build, release, sync, and capture tooling
+acp/                         pix-acp: ACP adapter embedding pi into editors like Zed (own install; `npm run check:acp`)
 ```
 
 ---

package/dist/app/rendering/conversation-entry-renderer.js

@@ -28,10 +28,15 @@ export function renderConversationEntry(entry, width, options) {
         const lines = renderMarkdownTextLines(userEntry.text, userContentWidth, userContentLeft).map((line) => ({
             ...userLine(line.text, userEntry.id, line.syntaxHighlight, [
                 ...(line.segments ?? []),
+                ...diagramStyledSegments(line.diagramSegments, options.colors),
                 ...(line.links?.map((link) => ({ ...link, foreground: options.colors.info, underline: true })) ?? []),
             ], line.links),
             ...(line.copyText === undefined ? {} : { copyText: line.copyText }),
             ...(line.continuesOnNextLine ? { continuesOnNextLine: true } : {}),
+            ...(line.codeBlock ? {
+                colorOverride: options.colors.codeBlockForeground,
+                backgroundOverride: options.colors.codeBlockBackground,
+            } : {}),
         }));
         return attachImageClickTargets(lines, userEntry.id, userEntry.images, { foreground: options.colors.info, underline: true });
     };
@@ -94,13 +99,16 @@ function renderAssistantLines(text, width, options) {
         const existingSegments = line.segments?.map((segment) => ({ ...segment, start: segment.start + contentLeft, end: segment.end + contentLeft })) ?? [];
         const links = line.links?.map((link) => ({ ...link, start: link.start + contentLeft, end: link.end + contentLeft })) ?? [];
         const linkSegments = links.map((link) => ({ start: link.start, end: link.end, foreground: options.colors.info, underline: true }));
-        const allSegments = headingSegment ? [headingSegment, ...existingSegments, ...linkSegments] : [...existingSegments, ...linkSegments];
+        const diagramSegments = diagramStyledSegments(line.diagramSegments, options.colors, contentLeft);
+        const allSegments = headingSegment
+            ? [headingSegment, ...existingSegments, ...diagramSegments, ...linkSegments]
+            : [...existingSegments, ...diagramSegments, ...linkSegments];
         lines.push({
             text: padHorizontalText(line.text, width),
             ...(line.copyText === undefined ? {} : { copyText: line.copyText }),
             ...(line.continuesOnNextLine ? { continuesOnNextLine: true } : {}),
-            colorOverride: options.colors.assistantForeground,
-            backgroundOverride: options.colors.assistantMessageBackground,
+            colorOverride: line.codeBlock ? options.colors.codeBlockForeground : options.colors.assistantForeground,
+            backgroundOverride: line.codeBlock ? options.colors.codeBlockBackground : options.colors.assistantMessageBackground,
             ...(allSegments.length > 0 ? { segments: allSegments } : {}),
             ...(links.length > 0 ? { links } : {}),
             ...(line.syntaxHighlight ? { syntaxHighlight: line.syntaxHighlight } : {}),
@@ -108,3 +116,17 @@ function renderAssistantLines(text, width, options) {
     }
     return lines;
 }
+function diagramStyledSegments(segments, colors, offset = 0) {
+    return (segments ?? []).map((segment) => {
+        const range = { start: segment.start + offset, end: segment.end + offset };
+        switch (segment.class) {
+            case "border":
+            case "edgeLabel":
+                return { ...range, foreground: colors.muted };
+            case "edge":
+                return { ...range, foreground: colors.accent };
+            case "title":
+                return { ...range, foreground: colors.accent, bold: true };
+        }
+    });
+}

package/dist/markdown-format.d.ts

@@ -1,3 +1,4 @@
+import { type Cls as MermaidSpanClass } from "grok-mermaid";
 import { type SyntaxLineHighlight, type ToolBodySyntaxHighlights } from "./syntax-highlight.js";
 export type RenderedMarkdownLine = {
     text: string;
@@ -22,6 +23,7 @@ export type RenderedMarkdownTextLine = {
     text: string;
     copyText?: string;
     continuesOnNextLine?: boolean;
+    codeBlock?: true;
     segments?: readonly {
         start: number;
         end: number;
@@ -29,8 +31,14 @@ export type RenderedMarkdownTextLine = {
     }[] | undefined;
     links?: readonly RenderedMarkdownLink[] | undefined;
     syntaxHighlight?: SyntaxLineHighlight | undefined;
+    diagramSegments?: readonly RenderedMarkdownDiagramSegment[] | undefined;
     heading?: boolean;
 };
+export type RenderedMarkdownDiagramSegment = {
+    start: number;
+    end: number;
+    class: Exclude<MermaidSpanClass, "none" | "text">;
+};
 export type RenderMarkdownTextLinesOptions = {
     preserveWrappedWordSeparator?: boolean;
 };

package/dist/markdown-format.js

@@ -1,6 +1,12 @@
+import { render as renderMermaid } from "grok-mermaid";
 import { displayGraphemes, expandTabs, stringDisplayWidth } from "./terminal-width.js";
 import { syntaxHighlightLanguageForMarkdownFence, } from "./syntax-highlight.js";
 const MIN_TRAILING_WORD_WIDTH_TO_REBALANCE = 5;
+const MERMAID_CACHE_LIMIT = 100;
+const MERMAID_MAX_PANELS = 4;
+const MERMAID_MIN_PANEL_WIDTH = 40;
+const MERMAID_SEQUENCE_MESSAGE_OPERATORS = ["-->>", "->>", "--x", "-x", "--)", "-)", "-->", "->"];
+const mermaidRenderCache = new Map();
 export function formatMarkdownTables(text, maxWidth) {
     const lines = text.split("\n");
     const formatted = [];
@@ -85,14 +91,40 @@ export function renderMarkdownLine(text, start = 0) {
 export function renderMarkdownTextLines(text, width, start = 0, options = {}) {
     const lines = [];
     let fence;
+    let fenceHasBodyLine = false;
     const formattedText = formatMarkdownTables(sanitizeMarkdownText(text), width);
     if (formattedText.length === 0)
         return [];
-    for (const rawLine of formattedText.split("\n")) {
+    const rawLines = formattedText.split("\n");
+    for (let lineIndex = 0; lineIndex < rawLines.length;) {
+        const rawLine = rawLines[lineIndex] ?? "";
         const nextFence = markdownFence(rawLine);
+        if (!fence && nextFence && isMermaidFence(nextFence)) {
+            const diagram = renderMermaidBlock(rawLines, lineIndex, nextFence, width);
+            if (diagram) {
+                lines.push(...diagram.lines);
+                lineIndex = diagram.nextLineIndex;
+                continue;
+            }
+        }
         const closesFence = Boolean(fence && nextFence && fence.marker === nextFence.marker && nextFence.length >= fence.length);
         const opensFence = !fence && nextFence !== undefined;
-        const syntaxHighlight = markdownLineSyntaxHighlight(fence, Boolean(opensFence || closesFence), start);
+        if (opensFence && nextFence) {
+            fence = { ...nextFence, language: syntaxHighlightLanguageForMarkdownFence(nextFence.info) };
+            fenceHasBodyLine = false;
+            lineIndex += 1;
+            continue;
+        }
+        if (closesFence) {
+            if (!fenceHasBodyLine)
+                lines.push({ text: "", codeBlock: true });
+            fence = undefined;
+            fenceHasBodyLine = false;
+            lineIndex += 1;
+            continue;
+        }
+        const syntaxHighlight = markdownLineSyntaxHighlight(fence, false, start);
+        const codeBlock = fence !== undefined;
         const isHeadingLine = !fence && /^\s{0,3}#{1,6}\s/.test(rawLine);
         const markdownLine = syntaxHighlight?.language === "markdown" || isHeadingLine ? renderMarkdownLine(rawLine) : undefined;
         const logicalLine = markdownLine ?? { text: rawLine, segments: [], links: [] };
@@ -113,21 +145,245 @@ export function renderMarkdownTextLines(text, width, start = 0, options = {}) {
                 text: wrapped.text,
                 ...(wrapped.copyText === undefined ? {} : { copyText: wrapped.copyText }),
                 ...(wrapped.continuesOnNextLine ? { continuesOnNextLine: true } : {}),
+                ...(codeBlock ? { codeBlock: true } : {}),
                 ...(wrapped.segments.length > 0 ? { segments: wrapped.segments } : {}),
                 ...(wrapped.links && wrapped.links.length > 0 ? { links: wrapped.links } : {}),
                 ...(wrappedSyntaxHighlight ? { syntaxHighlight: wrappedSyntaxHighlight } : {}),
                 ...(isHeadingLine ? { heading: true } : {}),
             });
         }
-        if (opensFence && nextFence) {
-            fence = { ...nextFence, language: syntaxHighlightLanguageForMarkdownFence(nextFence.info) };
+        if (codeBlock)
+            fenceHasBodyLine = true;
+        lineIndex += 1;
+    }
+    if (fence && !fenceHasBodyLine)
+        lines.push({ text: "", codeBlock: true });
+    return lines;
+}
+function renderMermaidBlock(rawLines, openingLineIndex, openingFence, width) {
+    let closingLineIndex;
+    for (let index = openingLineIndex + 1; index < rawLines.length; index += 1) {
+        const candidate = markdownFence(rawLines[index] ?? "");
+        if (candidate && candidate.marker === openingFence.marker && candidate.length >= openingFence.length) {
+            closingLineIndex = index;
+            break;
         }
-        else if (closesFence) {
-            fence = undefined;
+    }
+    const sourceEnd = closingLineIndex ?? rawLines.length;
+    const source = rawLines.slice(openingLineIndex + 1, sourceEnd).join("\n");
+    let art = cachedMermaidRender(source);
+    if (!art)
+        return undefined;
+    const availableWidth = Math.max(1, width);
+    let participantLegend = [];
+    let messageLegend = [];
+    if (art.width > availableWidth) {
+        const compactSequence = compactMermaidSequence(source);
+        if (compactSequence) {
+            const compactArt = cachedMermaidRender(compactSequence.source);
+            if (compactArt && compactArt.width < art.width) {
+                art = compactArt;
+                participantLegend = compactSequence.participantLegend;
+                messageLegend = compactSequence.messageLegend;
+            }
+        }
+    }
+    const panelStarts = mermaidPanelStarts(art.width, availableWidth);
+    if (panelStarts.length > 1 && (availableWidth < MERMAID_MIN_PANEL_WIDTH || panelStarts.length > MERMAID_MAX_PANELS)) {
+        return undefined;
+    }
+    return {
+        lines: [
+            ...mermaidArtLines(art, availableWidth, panelStarts),
+            ...mermaidLegendLines("Participants", participantLegend, availableWidth),
+            ...mermaidLegendLines("Messages", messageLegend, availableWidth),
+        ],
+        nextLineIndex: closingLineIndex === undefined ? rawLines.length : closingLineIndex + 1,
+    };
+}
+function compactMermaidSequence(source) {
+    const lines = source.split("\n");
+    const header = lines.find((line) => line.trim().length > 0 && !line.trimStart().startsWith("%%"));
+    if (!header || !/^sequenceDiagram\s*$/iu.test(header.trim()))
+        return undefined;
+    const participantLegend = [];
+    const messageLegend = [];
+    const autonumber = lines.some((line) => /^\s*autonumber(?:\s|$)/iu.test(line));
+    let participantNumber = 0;
+    let messageNumber = 0;
+    const compactLines = lines.map((line) => {
+        const match = /^(\s*)(participant|actor)\s+(\S+?)(?:\s+as\s+(.+?))?\s*$/iu.exec(line);
+        if (match) {
+            const [, indent = "", declaration = "participant", id = "", rawLabel] = match;
+            participantNumber += 1;
+            const marker = `P${participantNumber}`;
+            const label = rawLabel ? normalizeMermaidLegendLabel(rawLabel) : id;
+            participantLegend.push(`${marker} (${id}) — ${label}`);
+            return `${indent}${declaration} ${id} as ${marker}`;
+        }
+        const message = mermaidSequenceMessage(line);
+        if (!message)
+            return line;
+        messageNumber += 1;
+        if (message.label.length === 0)
+            return line;
+        messageLegend.push(`${messageNumber}. ${normalizeMermaidLegendLabel(message.label)}`);
+        return autonumber ? message.prefix : `${message.prefix}: [${messageNumber}]`;
+    });
+    return participantLegend.length > 0 || messageLegend.length > 0
+        ? { source: compactLines.join("\n"), participantLegend, messageLegend }
+        : undefined;
+}
+function mermaidSequenceMessage(line) {
+    for (const operator of MERMAID_SEQUENCE_MESSAGE_OPERATORS) {
+        const operatorIndex = line.indexOf(operator);
+        if (operatorIndex < 0)
+            continue;
+        const colonIndex = line.indexOf(":", operatorIndex + operator.length);
+        const targetEnd = colonIndex < 0 ? line.length : colonIndex;
+        const from = line.slice(0, operatorIndex).trim();
+        const to = line.slice(operatorIndex + operator.length, targetEnd).trim();
+        if (!from || !to || /\s/u.test(from) || /\s/u.test(to))
+            return undefined;
+        return {
+            prefix: line.slice(0, targetEnd).trimEnd(),
+            label: colonIndex < 0 ? "" : line.slice(colonIndex + 1).trim(),
+        };
+    }
+    return undefined;
+}
+function normalizeMermaidLegendLabel(label) {
+    const normalized = label
+        .replace(/<br\s*\/?\s*>/giu, " ")
+        .replace(/<\/?[A-Za-z][^>]*>/gu, "")
+        .replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/u, "$1$2")
+        .trim();
+    return normalized || label.trim();
+}
+function mermaidPanelStarts(artWidth, panelWidth) {
+    if (artWidth <= panelWidth)
+        return [0];
+    const overlap = Math.min(24, Math.max(8, Math.floor(panelWidth / 5)));
+    const stride = Math.max(1, panelWidth - overlap);
+    const panelCount = 1 + Math.ceil((artWidth - panelWidth) / stride);
+    return Array.from({ length: panelCount }, (_, index) => Math.min(index * stride, artWidth - panelWidth));
+}
+function mermaidArtLines(art, width, panelStarts) {
+    if (panelStarts.length === 1) {
+        return art.plain.map((text, rowIndex) => {
+            const diagramSegments = mermaidDiagramSegments(text, art.styled[rowIndex] ?? []);
+            return { text, ...(diagramSegments.length > 0 ? { diagramSegments } : {}) };
+        });
+    }
+    const lines = [];
+    for (const [panelIndex, startColumn] of panelStarts.entries()) {
+        const continuesLeft = startColumn > 0;
+        const continuesRight = startColumn + width < art.width;
+        const title = `Mermaid ${panelIndex + 1}/${panelStarts.length}${continuesLeft ? " ←" : ""}${continuesRight ? " →" : ""}`;
+        lines.push({
+            text: title,
+            diagramSegments: [{ start: 0, end: title.length, class: "title" }],
+        });
+        for (const [rowIndex, text] of art.plain.entries()) {
+            lines.push(sliceMermaidDiagramRow(text, art.styled[rowIndex] ?? [], startColumn, width));
+        }
+    }
+    return lines;
+}
+function mermaidLegendLines(title, entries, width) {
+    if (entries.length === 0)
+        return [];
+    const lines = [{
+            text: title,
+            diagramSegments: [{ start: 0, end: title.length, class: "title" }],
+        }];
+    for (const entry of entries) {
+        for (const wrapped of wrapRenderedMarkdownLine({ text: entry, segments: [], links: [] }, width, {})) {
+            lines.push({
+                text: wrapped.text,
+                ...(wrapped.continuesOnNextLine ? { continuesOnNextLine: true } : {}),
+            });
         }
     }
     return lines;
 }
+function sliceMermaidDiagramRow(text, spans, startColumn, width) {
+    const endColumn = startColumn + width;
+    const diagramSegments = [];
+    let result = "";
+    let column = 0;
+    let spanIndex = 0;
+    let spanEnd = spans[0]?.text.length ?? 0;
+    for (const grapheme of displayGraphemes(text)) {
+        const nextColumn = column + grapheme.width;
+        if (nextColumn <= startColumn) {
+            column = nextColumn;
+            continue;
+        }
+        if (column >= endColumn)
+            break;
+        while (spanIndex < spans.length - 1 && grapheme.start >= spanEnd) {
+            spanIndex += 1;
+            spanEnd += spans[spanIndex]?.text.length ?? 0;
+        }
+        const fullyVisible = column >= startColumn && nextColumn <= endColumn;
+        const chunk = fullyVisible
+            ? grapheme.text
+            : " ".repeat(Math.max(0, Math.min(nextColumn, endColumn) - Math.max(column, startColumn)));
+        const chunkStart = result.length;
+        result += chunk;
+        const spanClass = spans[spanIndex]?.cls;
+        if (fullyVisible && spanClass && spanClass !== "none" && spanClass !== "text") {
+            const previous = diagramSegments.at(-1);
+            if (previous && previous.class === spanClass && previous.end === chunkStart) {
+                previous.end = result.length;
+            }
+            else {
+                diagramSegments.push({ start: chunkStart, end: result.length, class: spanClass });
+            }
+        }
+        column = nextColumn;
+    }
+    return { text: result, ...(diagramSegments.length > 0 ? { diagramSegments } : {}) };
+}
+function cachedMermaidRender(source) {
+    if (mermaidRenderCache.has(source)) {
+        const cached = mermaidRenderCache.get(source) ?? null;
+        mermaidRenderCache.delete(source);
+        mermaidRenderCache.set(source, cached);
+        return cached;
+    }
+    let art;
+    try {
+        art = renderMermaid(source.replace(/<br\s*\/?\s*>/giu, " "));
+    }
+    catch {
+        art = null;
+    }
+    mermaidRenderCache.set(source, art);
+    if (mermaidRenderCache.size > MERMAID_CACHE_LIMIT) {
+        const oldestKey = mermaidRenderCache.keys().next().value;
+        if (oldestKey !== undefined)
+            mermaidRenderCache.delete(oldestKey);
+    }
+    return art;
+}
+function mermaidDiagramSegments(text, spans) {
+    const segments = [];
+    let start = 0;
+    for (const span of spans) {
+        const end = start + span.text.length;
+        if (start < text.length && span.cls !== "none" && span.cls !== "text") {
+            segments.push({ start, end: Math.min(end, text.length), class: span.cls });
+        }
+        start = end;
+    }
+    return segments;
+}
+function isMermaidFence(fence) {
+    const token = fence.info.trim().split(/\s+/, 1)[0]?.toLowerCase().replace(/^[{.]+|[}.]+$/gu, "") ?? "";
+    return token === "mermaid";
+}
 export function markdownSyntaxHighlightsForText(text, startColumn = 0) {
     const highlights = [];
     let fence;

package/dist/theme.d.ts

@@ -18,6 +18,8 @@ export type Theme = {
         assistantMessageBackground: string;
         userMessageBackground: string;
         thinkingMessageBackground: string;
+        codeBlockForeground: string;
+        codeBlockBackground: string;
         inputCursorBackground: string;
         popupForeground: string;
         popupBackground: string;

package/dist/theme.js

@@ -19,6 +19,8 @@ export const THEMES = {
             assistantMessageBackground: "",
             userMessageBackground: "",
             thinkingMessageBackground: "",
+            codeBlockForeground: "#e6edf3",
+            codeBlockBackground: "#2a2f36",
             inputCursorBackground: "#7fb3c8",
             popupForeground: "#e6edf3",
             popupBackground: "#1e1e1e",
@@ -75,6 +77,8 @@ export const THEMES = {
             assistantMessageBackground: "",
             userMessageBackground: "",
             thinkingMessageBackground: "",
+            codeBlockForeground: "#0f172a",
+            codeBlockBackground: "#f1f5f9",
             inputCursorBackground: "#0284c7",
             popupForeground: "#0f172a",
             popupBackground: "#ffffff",

package/external/pi-tools-suite/src/async-subagents/async-subagents.sample.jsonc

@@ -210,7 +210,7 @@
       "model": "zai/glm-5.3-flash",
       "fallbackModels": ["openai-codex/gpt-5.6-luna"],
       "thinking": "low",
-      "timeoutMs": 120000,
+      "timeoutMs": 300000,
       "tools": ["read", "grep", "bash"]
     },
 

package/external/pi-tools-suite/src/async-subagents/core/config.ts

@@ -218,7 +218,7 @@ const BUILTIN_CONFIG: SubagentConfig = {
 			model: "zai/glm-5.3-flash",
 			fallbackModels: ["openai-codex/gpt-5.6-luna"],
 			thinking: "low",
-			timeoutMs: 120_000,
+			timeoutMs: 300_000,
 			tools: ["read", "grep", "bash"],
 			isolatedSkills: [getBrowserQaSkillPath()],
 		},

package/external/pi-tools-suite/src/async-subagents/private-skills/browser-qa/SKILL.md

@@ -24,12 +24,18 @@ the requested target in the browser.
 
 ## Workflow
 
-Treat target discovery as a 30-second preflight and invoke the runner within 45
-seconds of starting. Use at most one runner invocation unless the task explicitly
-requests multiple auth profiles. If you cannot identify a reachable target and
-a supported deterministic assertion inside that preflight, return a structured
-`BLOCKED` result immediately. Do not consume the launcher budget on further
-source reading, server polling, capability probing, or retries.
+Treat target discovery as a 30-second preflight and begin browser execution within
+45 seconds of starting. For a verification task, use at most one actual `run`
+browser execution per profile. Metadata/preparation commands such as `profiles`
+and form-auth `scaffold` do not count as browser verification runs. For an
+explicit exploratory/manual-QA task, use at most three `run` rounds, give each a
+unique `--run-id`, bound each with `--runner-timeout-ms 60000`, and let each round
+test one concrete hypothesis learned from the prior evidence. Stop earlier once
+the requested behavior is explained or no new supported hypothesis remains. If
+you cannot identify a reachable target and a supported deterministic assertion
+inside the preflight, return a structured `BLOCKED` result immediately. Do not
+consume the launcher budget on open-ended source reading, server polling,
+capability probing, or retries.
 
 1. Resolve `scripts/browser-qa-runner.mjs` relative to this skill.
 2. Use the launcher-provided `$PI_SUBAGENT_AGENT_DIR/browser-qa/` workspace.
@@ -56,15 +62,27 @@ source reading, server polling, capability probing, or retries.
    operations documented below; it does not accept expressions or scripts.
 6. Run public QA with
    `node <runner> run --base-url <url> --flow <flow.jsonc>`. The URL's exact
-   origin becomes the fail-closed allowlist. Only for authenticated QA, add
-   `--profile <id>`; the selected profile then owns the URL and allowlist.
+   origin becomes the fail-closed allowlist. When the real app requires known
+   API/CDN origins, add repeatable `--allow-origin <exact-origin>` flags. Each
+   value must be an exact `http(s)` origin with no path, credentials, wildcard,
+   or inferred sibling domain; undeclared origins remain blocked. Only for
+   authenticated QA, add `--profile <id>`; the selected profile then owns the
+   URL and allowlist.
    Profile id, URL, and flow path are non-secret; never pass credentials as
    arguments or environment variables.
 7. Report deterministic assertions and every artifact returned by the runner.
-   For each screenshot, video, trace, or retained download, emit a separate clickable Markdown
-   link using its `uri` and also show its absolute `path`. Do this for failed
-   runs too whenever `artifacts` is present; never report only `evidenceDir`.
-   Visual inspection supplements assertions; it does not replace them.
+   For each screenshot, video, trace, or retained download, emit a separate
+   clickable Markdown link using its `uri` and also show its absolute `path`.
+   Do this for failed runs too whenever `artifacts` is present; never report only
+   `evidenceDir`.
+   When screenshots are present, inspect at least one representative meaningful
+   PNG directly with the `read` tool on its absolute path before claiming visual
+   QA. Inspect additional screenshots when they represent materially different
+   states or popups. Record `visualInspection: inspected` plus the inspected
+   paths and concrete findings. If image reading is unavailable in the active
+   model, report `visualInspection: unavailable` and do not claim a visual pass;
+   deterministic assertions may still be reported separately. Visual inspection
+   supplements assertions; it does not replace them.
 
 ## Scenario design
 
@@ -84,11 +102,14 @@ source reading, server polling, capability probing, or retries.
   animation/debounce. Set flow `timeoutMs` only as high as the target
   legitimately needs.
 - The runner waits after every visible interaction until the document is ready,
-  requests started by the interaction have finished, and common visible busy
+  observes requests started by the interaction for a bounded readiness window,
+  and waits for common visible busy
   markers (including `aria-busy`, progress bars, loading/spinner/skeleton test
-  ids and classes) disappear. It then keeps the stable state on video for 500
-  ms. A busy page that does not settle within `timeoutMs` fails instead of
-  continuing against a skeleton. For an app-specific loader not covered by
+  ids and classes) to disappear. EventSource/WebSocket traffic is excluded and
+  a long-poll/background request cannot pin readiness for the full flow timeout;
+  visible busy UI can. It then keeps the stable state on video for 500 ms. A
+  busy page that does not settle within `timeoutMs` fails instead of continuing
+  against a skeleton. For an app-specific loader not covered by
   those conventions, add an explicit `waitFor`/`assertHidden` for that loader
   and assert the loaded content before interacting with it.
 - Recorded pointer actions are annotated automatically: clicks and double-clicks
@@ -101,7 +122,8 @@ source reading, server polling, capability probing, or retries.
   pointer input, and clears before the runner's post-action stable interval
   completes.
 - Place `authRejectedIf` immediately after navigation or any transition that
-  may reveal expired authentication.
+  may reveal expired authentication. It must declare `urlIncludes` or a locator;
+  an empty rejection check is invalid.
 - Never weaken an assertion merely to make a failing run pass. If the observed
   product behavior differs from the expectation, preserve the failure evidence
   and report the mismatch.
@@ -120,7 +142,7 @@ Supported actions:
   `uncheck`, `selectOption`, `wheel`, `evaluate`, `dragTo`, `uploadFiles`,
   `openPopup`, `download`
 - assertions: `assertVisible`, `assertHidden`, `assertEnabled`,
-  `assertDisabled`, `assertChecked`, `assertUnchecked`, `assertText`,
+  `assertDisabled`, `assertChecked`, `assertUnchecked`, `assertText`, `assertTextContent`,
   `assertValue`, `assertAttribute`, `assertCount`, `assertURL`,
   `assertDOMMetric`
 - evidence/auth: `screenshot`, `authRejectedIf`
@@ -128,6 +150,9 @@ Supported actions:
 Locators accept one of `testId`, `role` (plus optional `name`), `label`,
 `placeholder`, `text`, or `css`; add `exact: true` where useful. String
 assertions require exactly one of `equals` or `includes`.
+`assertText` matches visible, user-facing `innerText` and therefore fails for a
+hidden locator. Use `assertTextContent` only when raw DOM text, including hidden
+content, is intentionally the oracle.
 `assertAttribute` additionally requires a bounded `attribute` name and is
 useful for `aria-*`, `data-*`, `href`, and similar observable state. All
 assertions retry until `timeoutMs` and report generic failures without exposing
@@ -208,7 +233,11 @@ oracle. Raw JavaScript remains intentionally unsupported.
 ```jsonc
 {
   "viewport": { "width": 844, "height": 847 },
-  "environment": { "locale": "en-GB", "timezoneId": "Europe/London", "colorScheme": "dark" },
+  "environment": {
+    "locale": "en-GB",
+    "timezoneId": "Europe/London",
+    "colorScheme": "dark"
+  },
   "steps": [
     { "action": "goto", "path": "/settings" },
     { "action": "authRejectedIf", "urlIncludes": "/login" },
@@ -216,7 +245,11 @@ oracle. Raw JavaScript remains intentionally unsupported.
       "action": "assertVisible",
       "locator": { "role": "heading", "name": "Settings", "exact": true }
     },
-    { "action": "wheel", "locator": { "css": ".settings-panel" }, "deltaY": 500 },
+    {
+      "action": "wheel",
+      "locator": { "css": ".settings-panel" },
+      "deltaY": 500
+    },
     {
       "action": "assertDOMMetric",
       "locator": { "css": ".settings-panel" },
@@ -226,9 +259,17 @@ oracle. Raw JavaScript remains intentionally unsupported.
     {
       "action": "click",
       "locator": { "testId": "save-settings" },
-      "expectResponse": { "path": "/api/settings", "method": "PUT", "status": 200 }
+      "expectResponse": {
+        "path": "/api/settings",
+        "method": "PUT",
+        "status": 200
+      }
+    },
+    {
+      "action": "assertText",
+      "locator": { "testId": "toast" },
+      "includes": "Saved"
     },
-    { "action": "assertText", "locator": { "testId": "toast" }, "includes": "Saved" },
     { "action": "screenshot", "name": "settings-saved" }
   ]
 }
@@ -301,6 +342,8 @@ After any runner invocation that actually performed browser testing, include
 all non-empty `artifacts.screenshots`, `artifacts.videos`, and
 `artifacts.traces`, and `artifacts.downloads` groups in the final response.
 These links are mandatory so the user can open the evidence directly.
+Also include `visualInspection` with `inspected` or `unavailable`; never infer a
+visual pass from a successful runner status alone.
 
 See `references/qa-auth.example.jsonc`, `references/qa-flow.example.jsonc`,
 `references/qa-design.md`, and `references/auth-scaffold-spec.md`.

package/external/pi-tools-suite/src/async-subagents/private-skills/browser-qa/references/qa-design.md

@@ -19,6 +19,12 @@ proof.
 When verifying a fix, prefer a focused regression flow over a broad tour of the
 application. If multiple independent states matter, assert each one explicitly.
 
+For explicit exploratory/manual QA, keep exploration bounded rather than turning
+it into an open-ended crawl. Run at most three minimal rounds. Each round should
+start from one concrete hypothesis, produce a deterministic observation plus a
+meaningful screenshot, and use that evidence to decide whether another round is
+justified. Verification tasks remain one browser run per profile.
+
 ## Choose resilient locators
 
 Prefer locators that match how users and accessibility APIs identify controls:
@@ -42,13 +48,14 @@ by an assertion is enough. Use `waitFor` only when the next operation depends on
 a distinct attached/detached/visible/hidden transition.
 
 After navigation and visible interactions, the runner also waits for DOM
-readiness, completion of requests started by that action, disappearance of
-common visible `aria-busy`/progress/loading/spinner/skeleton markers, and a
-500 ms stable interval. If those signals remain busy through the flow timeout,
-the run fails rather than interacting with a loading shell. This is a safe
-baseline, not an application-specific oracle: explicitly wait for a custom
-loader to become hidden and assert the loaded content when the application uses
-different readiness semantics.
+readiness, tracks requests causally started by that action through a bounded
+readiness window, waits for common visible
+`aria-busy`/progress/loading/spinner/skeleton markers, and keeps a 500 ms stable
+interval. EventSource/WebSocket traffic is ignored, and a long poll is not
+allowed to pin the entire flow timeout. A visible busy indicator may still hold
+readiness until `timeoutMs`. This is a safe baseline, not an application-specific
+oracle: explicitly wait for a custom loader to become hidden and assert the
+loaded content when the application uses different readiness semantics.
 
 `waitForTimeout` is bounded to five seconds and should be exceptional—for a
 known animation, debounce, or externally scheduled transition with no
@@ -58,7 +65,9 @@ behavior. If a normal operation legitimately needs more time, adjust the flow's
 
 All assertion actions retry until that timeout. This makes an action followed
 directly by `assertText`, `assertVisible`, `assertURL`, or another assertion
-safe for asynchronously rendered outcomes. Use `assertAttribute` for
+safe for asynchronously rendered outcomes. `assertText` requires the locator to
+be visible and matches rendered `innerText`; use `assertTextContent` only when
+hidden/raw DOM text is deliberately part of the oracle. Use `assertAttribute` for
 observable state such as `aria-expanded`, `aria-invalid`, or `data-state`
 instead of reading DOM state through executable JavaScript.
 
@@ -177,6 +186,12 @@ they explain the chronology without becoming screenshot or assertion oracles.
 Assertions determine pass/fail; evidence explains it. Preserve and link every
 artifact group returned on both passed and failed runs.
 
+For visual QA, do not stop at artifact generation. Open at least one meaningful
+PNG with the model's image-capable `read` path and inspect layout, clipping,
+overlap, state styling, and other visual defects relevant to the scenario. If
+the active model cannot read images, explicitly report visual inspection as
+unavailable rather than treating deterministic assertions as a visual pass.
+
 ## Diagnose failures without weakening the test
 
 Classify the first failing step:

package/external/pi-tools-suite/src/async-subagents/private-skills/browser-qa/scripts/browser-qa-runner.mjs

@@ -17,6 +17,7 @@ const QA_WORKSPACE_RELATIVE = "browser-qa";
 const EVIDENCE_RELATIVE = "evidence";
 const UI_READY_SETTLE_MS = 500;
 const UI_READY_POLL_MS = 100;
+const ACTION_REQUEST_WAIT_MAX_MS = 2_000;
 const FORM_VIDEO_STEP_DELAY_MS = UI_READY_SETTLE_MS;
 const POPUP_VIDEO_SETTLE_MS = 250;
 const CLICK_VIDEO_DELAY_MS = 120;
@@ -160,7 +161,7 @@ async function main() {
 	const args = parseArgs(rawArgs);
 	const selected = args.profile
 		? selectProfile(readAuthConfig(cwd, true, true).profiles, args.profile)
-		: createPublicProfile(args.baseUrl);
+		: createPublicProfile(args.baseUrl, args.allowOrigin);
 	const profileId = selected.id;
 	const profile = selected.profile;
 	const secrets = collectSecrets(profile.auth);
@@ -249,6 +250,9 @@ async function runQa({ cwd, agentDir, args, profileId, profile, deadline, progre
 		runtimeSecrets.push(...collectStorageStateSecrets(initialStorageState));
 		await runStage(progress, "trace_start", deadline, () => context.tracing.start({ screenshots: true, snapshots: true, sources: false }), profileId);
 		await runStage(progress, "flow_execute", deadline, () => executeFlow({ context, page, baseURL, evidenceDir, flow, allowedOrigins, profileId, secrets: runtimeSecrets, observations, videos }), profileId);
+		await runStage(progress, "storage_state_refresh", deadline, async () => {
+			if (await refreshRuntimeSecrets(context, runtimeSecrets)) discardRecordedVideos(videos);
+		}, profileId);
 		await runStage(progress, "secret_exposure_check", deadline, () => assertBrowserDoesNotExposeSecrets(context, page, runtimeSecrets, profileId), profileId);
 		await runStage(progress, "final_screenshot", deadline, () => page.screenshot({ path: path.join(evidenceDir, "final.png"), fullPage: true }), profileId);
 	} catch (error) {
@@ -256,15 +260,25 @@ async function runQa({ cwd, agentDir, args, profileId, profile, deadline, progre
 		failure = error;
 		if (page && !page.isClosed() && !error.suppressEvidence) {
 			try {
+				await runCleanupStage(progress, "failure_storage_state_refresh", async () => {
+					if (await refreshRuntimeSecrets(context, runtimeSecrets)) discardRecordedVideos(videos);
+				});
+				await runCleanupStage(progress, "failure_secret_exposure_check", () => assertBrowserDoesNotExposeSecrets(context, page, runtimeSecrets, profileId));
 				await runCleanupStage(progress, "failure_screenshot", () => page.screenshot({ path: path.join(evidenceDir, "failure.png"), fullPage: true }));
-			} catch { /* best effort */ }
+			} catch (evidenceError) {
+				if (evidenceError instanceof QaStatusError && evidenceError.suppressEvidence) {
+					failure = evidenceError;
+					outcome = evidenceError.status;
+				}
+			}
 		}
 	} finally {
 		const cleanupDeadline = Date.now() + CLEANUP_TIMEOUT_MS;
+		let discoveredLateSecrets = false;
 		if (context) {
 			try {
 				const finalStorageState = await runCleanupStage(progress, "storage_state_finalize", () => context.storageState(), cleanupDeadline);
-				runtimeSecrets.push(...collectStorageStateSecrets(finalStorageState));
+				discoveredLateSecrets = mergeRuntimeSecrets(runtimeSecrets, collectStorageStateSecrets(finalStorageState));
 			} catch { /* best effort */ }
 			try {
 				await runCleanupStage(progress, "trace_stop", () => context.tracing.stop({ path: tracePath }), cleanupDeadline);
@@ -293,6 +307,14 @@ async function runQa({ cwd, agentDir, args, profileId, profile, deadline, progre
 			} catch { /* best effort */ }
 		}
 		await runCleanupStage(progress, "browser_close", () => browser.close(), cleanupDeadline).catch(() => {});
+		if (discoveredLateSecrets) {
+			removeVisualEvidence(evidenceDir);
+			if (!failure) {
+				outcome = "failed";
+				failure = new QaStatusError("QA_RUN_FAILED", "authentication changed after the final evidence safety check; visual evidence was discarded", 1, profileId);
+				failure.suppressEvidence = true;
+			}
+		}
 	}
 	try {
 		for (const name of fs.readdirSync(evidenceDir).filter((name) => /^download-[A-Za-z0-9._-]+\.bin$/.test(name))) {
@@ -886,23 +908,29 @@ function authPlaceholderCount(profile) {
 	)).length;
 }
 
-function createPublicProfile(rawBaseUrl) {
+function createPublicProfile(rawBaseUrl, extraAllowedOrigins = []) {
 	if (typeof rawBaseUrl !== "string") {
 		throw new QaStatusError("QA_RUN_FAILED", "--base-url is required when running without --profile", 1, "public");
 	}
 	try {
 		const url = new URL(rawBaseUrl);
 		if (!/^https?:$/.test(url.protocol) || url.username || url.password) throw new Error();
+		const allowedOrigins = [url.origin];
+		for (const raw of Array.isArray(extraAllowedOrigins) ? extraAllowedOrigins : []) {
+			const extra = new URL(raw);
+			if (!/^https?:$/.test(extra.protocol) || extra.username || extra.password || extra.href !== `${extra.origin}/`) throw new Error();
+			allowedOrigins.push(extra.origin);
+		}
 		return {
 			id: "public",
 			profile: {
 				baseUrl: url.href,
-				allowedOrigins: [url.origin],
+				allowedOrigins: [...new Set(allowedOrigins)],
 				auth: { type: "none" },
 			},
 		};
 	} catch {
-		throw new QaStatusError("QA_RUN_FAILED", "public --base-url must be an http(s) URL without embedded credentials", 1, "public");
+		throw new QaStatusError("QA_RUN_FAILED", "public --base-url and --allow-origin values must be http(s) URLs without credentials; --allow-origin must be an exact origin", 1, "public");
 	}
 }
 
@@ -1050,6 +1078,15 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 	let capturedPopup;
 	let unexpectedPopupError;
 	const readinessTrackers = new Map();
+	let discardFutureVideos = false;
+	const refreshSecrets = async () => {
+		const changed = await refreshRuntimeSecrets(context, secrets);
+		if (changed) {
+			discardFutureVideos = true;
+			discardRecordedVideos(videos);
+		}
+		return changed;
+	};
 	const readinessFor = (candidate) => {
 		if (!readinessTrackers.has(candidate)) readinessTrackers.set(candidate, createPageReadinessTracker(candidate));
 		return readinessTrackers.get(candidate);
@@ -1078,6 +1115,9 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 		}
 		const { scope, ownerPage } = await resolveStepTarget({ page, popups, step, allowedOrigins, profileId, index });
 		const locator = step.locator === undefined ? undefined : resolveLocator(scope, step.locator, profileId, index);
+		const readinessTracker = readinessFor(ownerPage);
+		const requestScope = UI_READY_ACTIONS.has(step.action) ? readinessTracker.beginActionScope() : undefined;
+		try {
 		switch (step.action) {
 			case "goto": {
 				const target = typeof step.url === "string" ? step.url : step.path;
@@ -1149,7 +1189,7 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 					[, popup] = await Promise.all([requireLocator(locator, profileId, index).click({ delay: CLICK_VIDEO_DELAY_MS }), popupPromise]);
 					popup.setDefaultTimeout(timeout);
 					popup.setDefaultNavigationTimeout(timeout);
-					popupVideo = { name: `video-popup-${step.name}.webm`, video: popup.video(), discard: false };
+					popupVideo = { name: `video-popup-${step.name}.webm`, video: popup.video(), discard: discardFutureVideos };
 					videos.push(popupVideo);
 					await popup.waitForLoadState("domcontentloaded", { timeout });
 					await waitForUiReady({
@@ -1234,6 +1274,15 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 				const target = requireLocator(locator, profileId, index);
 				await retryAssertion({
 					page: ownerPage, timeout, profileId, index, reason: "text assertion failed",
+					check: async () => (await target.isVisible()) && matches(await target.innerText()),
+				});
+				break;
+			}
+			case "assertTextContent": {
+				const matches = expectedStringMatcher(step, profileId, index, "text content");
+				const target = requireLocator(locator, profileId, index);
+				await retryAssertion({
+					page: ownerPage, timeout, profileId, index, reason: "text content assertion failed",
 					check: async () => matches((await target.textContent()) ?? ""),
 				});
 				break;
@@ -1290,6 +1339,7 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 				break;
 			}
 			case "authRejectedIf": {
+				if (typeof step.urlIncludes !== "string" && !locator) throw flowError(profileId, index, "authRejectedIf requires urlIncludes or locator");
 				const urlRejected = typeof step.urlIncludes === "string" && scope.url().includes(step.urlIncludes);
 				const locatorRejected = locator ? await locator.isVisible().catch(() => false) : false;
 				if (!urlRejected && !locatorRejected) break;
@@ -1298,21 +1348,34 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 			case "screenshot": {
 				const name = typeof step.name === "string" ? step.name : `step-${index + 1}`;
 				if (!isSafeName(name)) throw flowError(profileId, index, "screenshot name is invalid");
+				await refreshSecrets();
 				await assertBrowserDoesNotExposeSecrets(context, page, secrets, profileId);
 				await ownerPage.screenshot({ path: path.join(evidenceDir, `${name}.png`), fullPage: step.fullPage !== false });
 				break;
 			}
 			default: throw flowError(profileId, index, `unsupported action: ${step.action}`);
 		}
+		} catch (error) {
+			requestScope?.stopCapture();
+			requestScope?.dispose();
+			throw error;
+		}
 		if (UI_READY_ACTIONS.has(step.action)) {
-			await waitForUiReady({
-				scope,
-				tracker: readinessFor(ownerPage),
-				timeout,
-				failure: () => flowError(profileId, index, "page did not finish loading"),
-			});
+			try {
+				await waitForUiReady({
+					scope,
+					tracker: readinessTracker,
+					requestScope,
+					timeout,
+					failure: () => flowError(profileId, index, "page did not finish loading"),
+				});
+			} finally {
+				requestScope?.stopCapture();
+				requestScope?.dispose();
+			}
 		}
 		if (unexpectedPopupError) throw unexpectedPopupError;
+		await refreshSecrets();
 		await assertBrowserDoesNotExposeSecrets(context, page, secrets, profileId);
 	}
 	} finally {
@@ -1323,15 +1386,36 @@ async function executeFlow({ context, page, baseURL, evidenceDir, flow, allowedO
 
 function createPageReadinessTracker(page) {
 	const pendingRequests = new Set();
-	const onRequest = (request) => pendingRequests.add(request);
-	const onRequestDone = (request) => pendingRequests.delete(request);
+	const actionScopes = new Set();
+	const onRequest = (request) => {
+		if (isLongLivedRequest(request)) return;
+		pendingRequests.add(request);
+		for (const scope of actionScopes) {
+			if (scope.capturing) scope.pendingRequests.add(request);
+		}
+	};
+	const onRequestDone = (request) => {
+		pendingRequests.delete(request);
+		for (const scope of actionScopes) scope.pendingRequests.delete(request);
+	};
 	page.on("request", onRequest);
 	page.on("requestfinished", onRequestDone);
 	page.on("requestfailed", onRequestDone);
 	return {
 		page,
 		pendingRequests,
+		beginActionScope() {
+			const scope = {
+				pendingRequests: new Set(),
+				capturing: true,
+				stopCapture() { scope.capturing = false; },
+				dispose() { actionScopes.delete(scope); },
+			};
+			actionScopes.add(scope);
+			return scope;
+		},
 		dispose() {
+			actionScopes.clear();
 			page.off("request", onRequest);
 			page.off("requestfinished", onRequestDone);
 			page.off("requestfailed", onRequestDone);
@@ -1339,8 +1423,18 @@ function createPageReadinessTracker(page) {
 	};
 }
 
-async function waitForUiReady({ scope, tracker, timeout, failure }) {
+function isLongLivedRequest(request) {
+	try {
+		return ["eventsource", "websocket"].includes(request.resourceType?.());
+	} catch {
+		return false;
+	}
+}
+
+async function waitForUiReady({ scope, tracker, requestScope = undefined, timeout, failure }) {
 	const deadline = Date.now() + timeout;
+	const pendingRequests = requestScope?.pendingRequests ?? tracker.pendingRequests;
+	const requestDeadline = Date.now() + Math.min(ACTION_REQUEST_WAIT_MAX_MS, Math.max(0, timeout - UI_READY_SETTLE_MS));
 	try {
 		await scope.waitForLoadState("domcontentloaded", { timeout });
 	} catch {
@@ -1350,10 +1444,12 @@ async function waitForUiReady({ scope, tracker, timeout, failure }) {
 		const remaining = deadline - Date.now();
 		if (remaining <= 0) throw failure();
 		const hasBusyIndicator = await hasVisibleBusyIndicator(scope);
-		if (tracker.pendingRequests.size === 0 && !hasBusyIndicator) {
+		const requestsStillBlock = pendingRequests.size > 0 && Date.now() < requestDeadline;
+		if (!requestsStillBlock && !hasBusyIndicator) {
 			await tracker.page.waitForTimeout(Math.min(UI_READY_SETTLE_MS, remaining));
 			const stillBusy = await hasVisibleBusyIndicator(scope);
-			if (tracker.pendingRequests.size === 0 && !stillBusy) return;
+			const requestsStillBlockAfterSettle = pendingRequests.size > 0 && Date.now() < requestDeadline;
+			if (!requestsStillBlockAfterSettle && !stillBusy) return;
 			continue;
 		}
 		await tracker.page.waitForTimeout(Math.min(UI_READY_POLL_MS, remaining));
@@ -1813,13 +1909,20 @@ async function applyFormAuth(page, auth, allowedOrigins, profileId) {
 		const timeout = Math.min(finitePositive(auth.timeoutMs) ?? 15_000, 60_000);
 		page.setDefaultTimeout(timeout);
 		page.setDefaultNavigationTimeout(timeout);
-		await page.goto(auth.loginUrl, { timeout });
-		await waitForUiReady({
-			scope: page,
-			tracker: readinessTracker,
-			timeout,
-			failure: () => authError(profileId, "form page did not finish loading"),
-		});
+		const loginRequestScope = readinessTracker.beginActionScope();
+		try {
+			await page.goto(auth.loginUrl, { timeout });
+			await waitForUiReady({
+				scope: page,
+				tracker: readinessTracker,
+				requestScope: loginRequestScope,
+				timeout,
+				failure: () => authError(profileId, "form page did not finish loading"),
+			});
+		} finally {
+			loginRequestScope.stopCapture();
+			loginRequestScope.dispose();
+		}
 		for (const field of auth.fields) {
 			if (!isObject(field) || typeof field.selector !== "string" || typeof field.value !== "string") {
 				throw authError(profileId, "form fields must contain selector/value strings");
@@ -1827,20 +1930,27 @@ async function applyFormAuth(page, auth, allowedOrigins, profileId) {
 			await page.locator(field.selector).fill(field.value);
 			await page.waitForTimeout(FORM_VIDEO_STEP_DELAY_MS);
 		}
-		await page.locator(auth.submitSelector).click({ delay: CLICK_VIDEO_DELAY_MS });
-		if (isObject(auth.success) && typeof auth.success.url === "string") await page.waitForURL(auth.success.url, { timeout });
-		if (isObject(auth.success) && typeof auth.success.selector === "string") {
-			await page.locator(auth.success.selector).waitFor({ timeout, state: validLocatorState(auth.success.state) });
-		}
-		if (!isObject(auth.success) || (typeof auth.success.url !== "string" && typeof auth.success.selector !== "string")) {
-			throw authError(profileId, "form success.url or success.selector is required");
+		const submitRequestScope = readinessTracker.beginActionScope();
+		try {
+			await page.locator(auth.submitSelector).click({ delay: CLICK_VIDEO_DELAY_MS });
+			if (isObject(auth.success) && typeof auth.success.url === "string") await page.waitForURL(auth.success.url, { timeout });
+			if (isObject(auth.success) && typeof auth.success.selector === "string") {
+				await page.locator(auth.success.selector).waitFor({ timeout, state: validLocatorState(auth.success.state) });
+			}
+			if (!isObject(auth.success) || (typeof auth.success.url !== "string" && typeof auth.success.selector !== "string")) {
+				throw authError(profileId, "form success.url or success.selector is required");
+			}
+			await waitForUiReady({
+				scope: page,
+				tracker: readinessTracker,
+				requestScope: submitRequestScope,
+				timeout,
+				failure: () => authError(profileId, "authenticated page did not finish loading"),
+			});
+		} finally {
+			submitRequestScope.stopCapture();
+			submitRequestScope.dispose();
 		}
-		await waitForUiReady({
-			scope: page,
-			tracker: readinessTracker,
-			timeout,
-			failure: () => authError(profileId, "authenticated page did not finish loading"),
-		});
 	} catch (error) {
 		if (error instanceof QaStatusError) throw error;
 		throw authError(profileId, "form login was rejected or did not reach the configured success condition");
@@ -1931,7 +2041,10 @@ function cookieAllowed(cookie, allowedOrigins) {
 	if (typeof cookie.url === "string") return isAllowedUrl(cookie.url, allowedOrigins);
 	if (typeof cookie.domain !== "string") return false;
 	const domain = cookie.domain.replace(/^\./, "").toLowerCase();
-	return allowedOrigins.some((origin) => new URL(origin).hostname.toLowerCase() === domain);
+	return allowedOrigins.some((origin) => {
+		const host = new URL(origin).hostname.toLowerCase();
+		return host === domain || (domain.includes(".") && host.endsWith(`.${domain}`));
+	});
 }
 
 function loadPlaywright(cwd) {
@@ -1990,13 +2103,18 @@ function findPackageJson(startFile) {
 }
 
 function parseArgs(values) {
-	const result = {};
+	const result = { allowOrigin: [] };
 	for (let index = 0; index < values.length; index += 2) {
 		const flag = values[index];
 		const value = values[index + 1];
 		if (!flag?.startsWith("--") || value === undefined) throw new QaStatusError("QA_RUN_FAILED", `invalid argument: ${flag ?? "(missing)"}`, 1);
 		const key = flag.slice(2).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-		if (!["profile", "flow", "baseUrl", "runId", "runnerTimeoutMs"].includes(key)) throw new QaStatusError("QA_RUN_FAILED", `unknown option: ${flag}`, 1);
+		if (!["profile", "flow", "baseUrl", "allowOrigin", "runId", "runnerTimeoutMs"].includes(key)) throw new QaStatusError("QA_RUN_FAILED", `unknown option: ${flag}`, 1);
+		if (key === "allowOrigin") {
+			result.allowOrigin.push(value);
+			continue;
+		}
+		if (result[key] !== undefined) throw new QaStatusError("QA_RUN_FAILED", `duplicate option: ${flag}`, 1);
 		result[key] = value;
 	}
 	return result;
@@ -2251,6 +2369,23 @@ function collectStorageStateSecrets(state) {
 	return expandSecretForms(output);
 }
 
+async function refreshRuntimeSecrets(context, runtimeSecrets) {
+	if (!context || typeof context.storageState !== "function") return false;
+	return mergeRuntimeSecrets(runtimeSecrets, collectStorageStateSecrets(await context.storageState()));
+}
+
+function mergeRuntimeSecrets(runtimeSecrets, candidates) {
+	const known = new Set(runtimeSecrets);
+	let added = false;
+	for (const candidate of candidates) {
+		if (!candidate || known.has(candidate)) continue;
+		known.add(candidate);
+		runtimeSecrets.push(candidate);
+		added = true;
+	}
+	return added;
+}
+
 function expandSecretForms(values) {
 	const forms = new Set();
 	for (const value of values) {
@@ -2570,6 +2705,10 @@ function removeVisualEvidence(evidenceDir) {
 	}
 }
 
+function discardRecordedVideos(videos) {
+	for (const entry of videos) entry.discard = true;
+}
+
 function writeJsonPrivate(file, value) {
 	fs.writeFileSync(file, `${JSON.stringify(value, null, 2)}\n`, { encoding: "utf8", mode: 0o600, flag: "wx" });
 	fs.chmodSync(file, 0o600);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ui-extend",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "Pix: a workspace-first terminal UI for Pi with tabs, readable tool activity, voice input, and bundled agent tools.",
   "private": false,
   "repository": {
@@ -60,6 +60,8 @@
     "test": "mise exec node@24.16.0 -- npm run test:inner",
     "test:inner": "node --import tsx --test \"tests/**/*.test.ts\"",
     "test:tools-suite": "npm --prefix external/pi-tools-suite test",
+    "build:acp": "npm --prefix acp run build",
+    "check:acp": "npm --prefix acp run check",
     "test:browser-qa-e2e": "npm --prefix external/pi-tools-suite run test:browser-qa-e2e",
     "sync:pi-tools-suite": "node scripts/sync-pi-tools-suite.mjs",
     "sync:pi-tools-suite:check": "node scripts/sync-pi-tools-suite.mjs --check",
@@ -82,6 +84,7 @@
     "@earendil-works/pi-coding-agent": "0.84.4",
     "@earendil-works/pi-tui": "0.84.4",
     "@mariozechner/clipboard": "^0.3.9",
+    "grok-mermaid": "0.2.2",
     "jsonc-parser": "3.3.1",
     "typebox": "1.1.38",
     "vscode-jsonrpc": "^8.2.1",