oimwiodev/chrome-use
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

diff (#510)

Browse Source 
* diff

* fixes

* fixes

* fixes

* fixes

* fixes

* better docs
This commit is contained in:
Chris Tate
2026-02-19 23:51:09 -06:00
committed by GitHub
parent 9732031087
commit d5a667ea2d
21 changed files with 2446 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/diff-demo.tsx
+282
View File
@@ -0,0 +1,282 @@
"use client";
function DiffLine({ line }: { line: string }) {
if (line.startsWith("+ ")) {
return <div className="text-green-400">{line}</div>;
}
if (line.startsWith("- ")) {
return <div className="text-red-400">{line}</div>;
}
return <div className="opacity-50">{line}</div>;
}
function CommandLine({ children }: { children: string }) {
return (
<div>
<span className="opacity-40">$ </span>
{children}
</div>
);
}
function Terminal({ children }: { children: React.ReactNode }) {
return (
<div
className="rounded border font-mono text-[0.8125rem] leading-[1.7] overflow-x-auto"
style={{
background: "var(--card)",
borderColor: "var(--border)",
padding: "0.875rem",
}}
>
{children}
</div>
);
}
function PageMockup({
label,
buttonColor,
diffMode,
}: {
label: string;
buttonColor: string;
diffMode?: boolean;
}) {
const dimOpacity = diffMode ? 0.15 : 1;
return (
<div className="flex-1 min-w-0">
<div
className="text-[0.6875rem] font-medium mb-1.5 text-center"
style={{ color: "var(--muted-foreground)" }}
>
{label}
</div>
<svg
viewBox="0 0 160 120"
className="w-full rounded border"
style={{ borderColor: "var(--border)" }}
>
<rect width="160" height="120" fill={diffMode ? "#1a1a1a" : "#111"} />
{/* Nav bar */}
<rect
x="0"
y="0"
width="160"
height="16"
fill="#222"
opacity={dimOpacity}
/>
<rect
x="8"
y="5"
width="24"
height="6"
rx="1"
fill="#555"
opacity={dimOpacity}
/>
<rect
x="120"
y="5"
width="12"
height="6"
rx="1"
fill="#444"
opacity={dimOpacity}
/>
<rect
x="136"
y="5"
width="12"
height="6"
rx="1"
fill="#444"
opacity={dimOpacity}
/>
{/* Heading */}
<rect
x="20"
y="26"
width="80"
height="6"
rx="1"
fill="#666"
opacity={dimOpacity}
/>
{/* Subtext */}
<rect
x="30"
y="38"
width="60"
height="4"
rx="1"
fill="#444"
opacity={dimOpacity}
/>
{/* Input field */}
<rect
x="30"
y="52"
width="100"
height="14"
rx="2"
fill="#1a1a1a"
stroke="#333"
strokeWidth="0.5"
opacity={dimOpacity}
/>
{/* Button -- this is what changes */}
{diffMode ? (
<>
<rect
x="55"
y="76"
width="50"
height="14"
rx="2"
fill="#ef4444"
opacity="0.85"
/>
<rect
x="55"
y="76"
width="50"
height="14"
rx="2"
fill="none"
stroke="#ef4444"
strokeWidth="1.5"
strokeDasharray="3 2"
/>
</>
) : (
<rect
x="55"
y="76"
width="50"
height="14"
rx="2"
fill={buttonColor}
/>
)}
<text
x="80"
y="85.5"
textAnchor="middle"
fill="white"
fontSize="6"
fontFamily="system-ui, sans-serif"
opacity={diffMode ? 0.9 : 1}
>
Submit
</text>
{/* Footer line */}
<rect
x="40"
y="102"
width="80"
height="3"
rx="1"
fill="#333"
opacity={dimOpacity}
/>
</svg>
</div>
);
}
const snapshotDiffLines = [
" heading \"Sign Up\" [ref=e1]",
" text \"Create your account\" [ref=e2]",
"- textbox \"Email\" [ref=e3]",
"+ textbox \"Email\" [ref=e3]: \"test@example.com\"",
"- button \"Submit\" [ref=e4]",
"+ button \"Submit\" [ref=e4] [disabled]",
"+ status \"Sending...\" [ref=e7]",
" link \"Already have an account?\" [ref=e5]",
];
export function DiffDemo() {
return (
<div className="grid gap-8 my-8">
{/* Panel 1: Snapshot diff */}
<div>
<div
className="text-xs font-medium uppercase tracking-wider mb-3"
style={{ color: "var(--muted-foreground)" }}
>
Verify an action changed the page
</div>
<Terminal>
<div className="opacity-60 mb-2">
<CommandLine>agent-browser snapshot -i</CommandLine>
<CommandLine>
agent-browser fill @e3 &quot;test@example.com&quot;
</CommandLine>
<CommandLine>agent-browser click @e4</CommandLine>
</div>
<div className="mb-3">
<CommandLine>agent-browser diff snapshot</CommandLine>
</div>
<div
className="border-t pt-3"
style={{ borderColor: "var(--border)" }}
>
{snapshotDiffLines.map((line, i) => (
<DiffLine key={i} line={line} />
))}
<div className="mt-2 opacity-60">
<span className="text-green-400">3</span> additions,{" "}
<span className="text-red-400">2</span> removals,{" "}
<span>3</span> unchanged
</div>
</div>
</Terminal>
</div>
{/* Panel 2: Screenshot diff */}
<div>
<div
className="text-xs font-medium uppercase tracking-wider mb-3"
style={{ color: "var(--muted-foreground)" }}
>
Catch a visual regression
</div>
<Terminal>
<div className="mb-3">
<CommandLine>
agent-browser diff screenshot --baseline before-deploy.png
</CommandLine>
</div>
<div
className="border-t pt-3"
style={{ borderColor: "var(--border)" }}
>
<div className="text-red-400">
&#x2717; 2.37% pixels differ
</div>
<div className="opacity-50">
Diff image: ~/.agent-browser/tmp/diffs/diff-1708473621.png
</div>
<div className="opacity-50">
<span className="text-red-400">1,137</span> different /{" "}
48,000 total pixels
</div>
</div>
</Terminal>
<div className="flex gap-2 mt-3">
<PageMockup label="Baseline" buttonColor="#3b82f6" />
<PageMockup label="Current" buttonColor="#22c55e" />
<PageMockup label="Diff" buttonColor="#ef4444" diffMode />
</div>
</div>
</div>
);
}