mirror of
https://github.com/openclaw/openclaw.git
synced 2026-07-10 21:16:07 +00:00
* feat(browser): add optional vision understanding to screenshot tool
* fix(browser): wrap vision output as external content, enforce maxBytes, forward auth profiles
* fix(browser): remove no-op scope/attachments config, drop profile pass-through lacking runtime support
* feat(media-understanding): add profile/preferredProfile to DescribeImageFileWithModelParams and forward to describeImage
* style(browser): add curly braces to satisfy eslint curly rule
* fix(browser): correct tools.browser.enabled help text to match actual behavior
* fix(browser): thread agentDir/workspaceDir from plugin tool context into browser vision
* refactor(browser): move vision config from tools.browser to browser.models
The browser plugin's vision configuration now lives on the top-level
`browser` config namespace (browser.models, browser.visionEnabled,
browser.visionPrompt, etc.) instead of `tools.browser`. This aligns
with the plugin's existing config location and avoids confusion between
tool-level and plugin-level settings.
- Remove tools.browser from ToolsSchema and ToolsConfig
- Add models/vision* fields to BrowserConfig and its zod schema
- Update getBrowserVisionConfig to read from cfg.browser
- Update schema help, labels, and quality test
- Update vision.test.ts to use new config shape
* docs(browser): add screenshot vision configuration section
Document the new browser.models config for automatic screenshot
description via vision models, enabling text-only main models to
reason about web page content.
* fix(browser): remove deliverable media markers from vision result, drop unused import
P1: Vision-success path no longer exposes the raw screenshot as
deliverable media (removes MEDIA: line and details.media.mediaUrl).
This prevents channel delivery from auto-sending sensitive page content
when the intended output is a text description.
P2: Remove unused ToolsMediaUnderstandingSchema import that would fail
noUnusedLocals typecheck.
* fix(browser): add command/args fields to browser models schema
The browser vision model schema uses .strict(), so CLI-type entries
with command/args were rejected by TypeScript. Add these fields to
align with MediaUnderstandingModelSchema.
* chore(browser): remove debug console.log statements
* fix(browser): harden screenshot vision result against MEDIA: directive injection and restore image sanitization on failure fallback
ClawSweeper #84247 review round 2:
P1 (security, high): neutralize line-start MEDIA: directives in vision descriptions
before wrapping with wrapExternalContent. The agent media extractor scans every
browser tool-result text block via splitMediaFromOutput which treats line-start
MEDIA: as a trusted local-media delivery directive, and browser is on the
trusted-media allowlist. Without neutralization, page or vision-provider output
containing 'MEDIA:/tmp/secret.png' could synthesize a channel-deliverable media
artifact from untrusted content. wrapExternalContent itself does not strip
line-start directives. Introduce neutralizeMediaDirectives in vision.ts that
prepends '[neutralized] ' to any line whose trimStart() begins with MEDIA:
(case-insensitive), defanging the parser anchor while keeping the original
text human-readable.
P2 (compatibility): pass resolveRuntimeImageSanitization() to imageResultFromFile
in the vision-failure catch fallback. The non-vision screenshot path already
forwards this option (d5cc0d53b7) so configured agents.defaults.imageMaxDimensionPx
takes effect. Without this fix, any provider timeout/error silently bypasses the
sanitization guard and returns a raw full-resolution screenshot.
Regression coverage:
- vision.test.ts: 6 unit cases for neutralizeMediaDirectives (no-op fast path,
mid-line MEDIA: untouched, line-start defanged, leading-whitespace defanged,
case-insensitive, multiple directives per blob).
- browser-tool.test.ts: 2 integration cases that drive the full screenshot
tool execute path:
- 'neutralizes MEDIA: directives in vision text and does not attach media'
asserts no line matches /^\s*MEDIA:/i in returned text, secret path text
is preserved verbatim, details.media is absent, and imageResultFromFile
is not called on the success path.
- 'preserves screenshot image sanitization on vision failure fallback'
mocks describeImageFileWithModel to reject and asserts the fallback
imageResultFromFile call receives imageSanitization: {maxDimensionPx:1600}
plus the 'browser screenshot vision failed' extraText.
* fix(browser): apply clawsweeper fallback media fix from PR #84247
* refactor: reuse media image understanding for browser screenshots
* refactor: use structured media delivery
* test: update music completion media instruction expectation
* fix: trim buffered reply directive padding
* test: refresh codex prompt snapshots for message media aliases
---------
Co-authored-by: scotthuang <scotthuang@tencent.com>
Co-authored-by: Peter Steinberger <steipete@gmail.com>
200 lines
7.0 KiB
TypeScript
200 lines
7.0 KiB
TypeScript
import fs from "node:fs/promises";
|
|
import type { Command } from "commander";
|
|
import { normalizeOptionalString } from "openclaw/plugin-sdk/string-coerce-runtime";
|
|
import {
|
|
callBrowserRequest,
|
|
parseBrowserNonNegativeIntegerValue,
|
|
parseBrowserPositiveIntegerValue,
|
|
type BrowserParentOpts,
|
|
} from "./browser-cli-shared.js";
|
|
import {
|
|
danger,
|
|
defaultRuntime,
|
|
getRuntimeConfig,
|
|
shortenHomePath,
|
|
type SnapshotResult,
|
|
} from "./core-api.js";
|
|
|
|
function parseOptionalIntegerOption(
|
|
value: string | undefined,
|
|
label: string,
|
|
opts: { min: number },
|
|
): number | undefined {
|
|
if (value === undefined) {
|
|
return undefined;
|
|
}
|
|
const parsed =
|
|
opts.min === 0
|
|
? parseBrowserNonNegativeIntegerValue(value)
|
|
: parseBrowserPositiveIntegerValue(value);
|
|
if (parsed === undefined || parsed < opts.min) {
|
|
defaultRuntime.error(danger(`Invalid ${label}: must be an integer >= ${opts.min}`));
|
|
defaultRuntime.exit(1);
|
|
return undefined;
|
|
}
|
|
return parsed;
|
|
}
|
|
|
|
export function registerBrowserInspectCommands(
|
|
browser: Command,
|
|
parentOpts: (cmd: Command) => BrowserParentOpts,
|
|
) {
|
|
browser
|
|
.command("screenshot")
|
|
.description("Capture a screenshot (prints the saved path)")
|
|
.argument("[targetId]", "CDP target id (or unique prefix)")
|
|
.option("--full-page", "Capture full scrollable page", false)
|
|
.option("--ref <ref>", "ARIA ref from ai snapshot")
|
|
.option("--element <selector>", "CSS selector for element screenshot")
|
|
.option("--labels", "Overlay role refs on the screenshot", false)
|
|
.option("--type <png|jpeg>", "Output type (default: png)", "png")
|
|
.action(async (targetId: string | undefined, opts, cmd) => {
|
|
const parent = parentOpts(cmd);
|
|
const profile = parent?.browserProfile;
|
|
try {
|
|
const result = await callBrowserRequest<{ path: string }>(
|
|
parent,
|
|
{
|
|
method: "POST",
|
|
path: "/screenshot",
|
|
query: profile ? { profile } : undefined,
|
|
body: {
|
|
targetId: normalizeOptionalString(targetId),
|
|
fullPage: Boolean(opts.fullPage),
|
|
ref: normalizeOptionalString(opts.ref),
|
|
element: normalizeOptionalString(opts.element),
|
|
labels: Boolean(opts.labels),
|
|
type: opts.type === "jpeg" ? "jpeg" : "png",
|
|
},
|
|
},
|
|
{ timeoutMs: 20000 },
|
|
);
|
|
if (parent?.json) {
|
|
defaultRuntime.writeJson(result);
|
|
return;
|
|
}
|
|
defaultRuntime.log(shortenHomePath(result.path));
|
|
} catch (err) {
|
|
defaultRuntime.error(danger(String(err)));
|
|
defaultRuntime.exit(1);
|
|
}
|
|
});
|
|
|
|
browser
|
|
.command("snapshot")
|
|
.description("Capture a snapshot (default: ai; aria is the accessibility tree)")
|
|
.option("--format <aria|ai>", "Snapshot format (default: ai)", "ai")
|
|
.option("--target-id <id>", "CDP target id (or unique prefix)")
|
|
.option("--limit <n>", "Max nodes (default: 500/800)")
|
|
.option("--mode <efficient>", "Snapshot preset (efficient)")
|
|
.option("--efficient", "Use the efficient snapshot preset", false)
|
|
.option("--interactive", "Role snapshot: interactive elements only", false)
|
|
.option("--compact", "Role snapshot: compact output", false)
|
|
.option("--depth <n>", "Role snapshot: max depth")
|
|
.option("--selector <sel>", "Role snapshot: scope to CSS selector")
|
|
.option("--frame <sel>", "Role snapshot: scope to an iframe selector")
|
|
.option("--labels", "Include viewport label overlay screenshot", false)
|
|
.option("--urls", "Append discovered link URLs to AI snapshots", false)
|
|
.option("--out <path>", "Write snapshot to a file")
|
|
.action(async (opts, cmd) => {
|
|
const parent = parentOpts(cmd);
|
|
const profile = parent?.browserProfile;
|
|
const format = opts.format === "aria" ? "aria" : "ai";
|
|
const formatWasExplicit =
|
|
typeof cmd.getOptionValueSource === "function" &&
|
|
cmd.getOptionValueSource("format") === "cli";
|
|
const configMode =
|
|
!formatWasExplicit &&
|
|
format === "ai" &&
|
|
getRuntimeConfig().browser?.snapshotDefaults?.mode === "efficient"
|
|
? "efficient"
|
|
: undefined;
|
|
const mode = opts.efficient === true || opts.mode === "efficient" ? "efficient" : configMode;
|
|
const limit = parseOptionalIntegerOption(opts.limit, "--limit", { min: 1 });
|
|
const depth = parseOptionalIntegerOption(opts.depth, "--depth", { min: 0 });
|
|
if (
|
|
(opts.limit !== undefined && limit === undefined) ||
|
|
(opts.depth !== undefined && depth === undefined)
|
|
) {
|
|
return;
|
|
}
|
|
try {
|
|
const query: Record<string, string | number | boolean | undefined> = {
|
|
format,
|
|
targetId: normalizeOptionalString(opts.targetId),
|
|
limit,
|
|
interactive: opts.interactive ? true : undefined,
|
|
compact: opts.compact ? true : undefined,
|
|
depth,
|
|
selector: normalizeOptionalString(opts.selector),
|
|
frame: normalizeOptionalString(opts.frame),
|
|
labels: opts.labels ? true : undefined,
|
|
urls: opts.urls ? true : undefined,
|
|
mode,
|
|
profile,
|
|
};
|
|
const result = await callBrowserRequest<SnapshotResult>(
|
|
parent,
|
|
{
|
|
method: "GET",
|
|
path: "/snapshot",
|
|
query,
|
|
},
|
|
{ timeoutMs: 20000 },
|
|
);
|
|
|
|
if (opts.out) {
|
|
if (result.format === "ai") {
|
|
await fs.writeFile(opts.out, result.snapshot, "utf8");
|
|
} else {
|
|
const payload = JSON.stringify(result, null, 2);
|
|
await fs.writeFile(opts.out, payload, "utf8");
|
|
}
|
|
if (parent?.json) {
|
|
defaultRuntime.writeJson({
|
|
ok: true,
|
|
out: opts.out,
|
|
...(result.format === "ai" && result.imagePath
|
|
? { imagePath: result.imagePath }
|
|
: {}),
|
|
});
|
|
} else {
|
|
defaultRuntime.log(shortenHomePath(opts.out));
|
|
if (result.format === "ai" && result.imagePath) {
|
|
defaultRuntime.log(shortenHomePath(result.imagePath));
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (parent?.json) {
|
|
defaultRuntime.writeJson(result);
|
|
return;
|
|
}
|
|
|
|
if (result.format === "ai") {
|
|
defaultRuntime.log(result.snapshot);
|
|
if (result.imagePath) {
|
|
defaultRuntime.log(shortenHomePath(result.imagePath));
|
|
}
|
|
return;
|
|
}
|
|
|
|
const nodes = "nodes" in result ? result.nodes : [];
|
|
defaultRuntime.log(
|
|
nodes
|
|
.map((n) => {
|
|
const indent = " ".repeat(Math.min(20, n.depth));
|
|
const name = n.name ? ` "${n.name}"` : "";
|
|
const value = n.value ? ` = "${n.value}"` : "";
|
|
return `${indent}- ${n.role}${name}${value}`;
|
|
})
|
|
.join("\n"),
|
|
);
|
|
} catch (err) {
|
|
defaultRuntime.error(danger(String(err)));
|
|
defaultRuntime.exit(1);
|
|
}
|
|
});
|
|
}
|