shifathosn
/
rea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(website): explain REA with Calculator and a playable dinosaur lab

This commit is contained in:
N0zoM1z0 2026-10-09 11:06:05 +08:00
parent 5160d9b717
commit 11b9f0346c
13 changed files with 1716 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
website/README.md
View File

@ -6,7 +6,8 @@
An English static website with explanatory figures, worked guides and DX-Ball, Notion, TH04 and CTF investigations.
The public files are in `website/public/`. The site uses HTML, CSS and a small
script for copying code and following the assembly-to-C comparison. Python
scripts for copying code, following code comparisons and playing the dinosaur
speed reconstruction. Python
packages the downloadable example; there is no frontend bundler or npm dependency.
[style-guide.md](style-guide.md) explains the writing, page structure, figures,
@ -25,7 +26,8 @@ Open <http://127.0.0.1:4173/>. Refresh the browser after editing a file.
## Pages
- `public/index.html`: DX-Ball introduction, agent example, setup and case-study overviews.
- `public/index.html`: compact setup, manual/agent comparison, Calculator percentage example, playable dinosaur reconstruction and case-study overviews.
- `public/examples/dino-lab/index.html`: adjustable-speed mini-game, recovered rule, original-game check and browser analysis steps.
- `public/first-investigation/index.html`: a guided Notes export investigation, from setup to a checked CSV prediction.
- `public/showcase/index.html`: the case-study index.
- `public/showcase/dx-ball/index.html`: sound-pan investigation and project status.
@ -95,11 +97,26 @@ Evidence. [evidence/dx-ball-sound-pan.md](evidence/dx-ball-sound-pan.md) records
their provenance and the scope of the validation claims. The original executable
and complete private Evidence records are not website assets.
The homepage's code comparison, position examples and evidence flow are
selectable HTML. The pan positions 0, 320 and 640 illustrate the inspected
calculation at its recorded initial scale of 1; the C panel is a readable
summary. The linked case study retains the maintained source and its checks.
The agent response is an example explanation based on those findings.
The homepage starts with a short installation prompt and the ordinary setup
command. It compares manual investigation with asking an agent, using the same
Calculator percentage question. The native excerpt comes from an installed
model DLL; Microsoft’s public implementation supplies names and a crosscheck.
The Calculator controls illustrate that rule with generic inputs.
The dinosaur example connects an inspected running script to a new playable
mini-game. `public/assets/dino-speed.js` owns the recovered speed rule and replay;
`dino-demo.js` imports it for automatic acceleration. The slider chooses a fixed
speed instead. Drawing, jumping and collision code are newly authored for this
teaching game. It starts on input, pauses when hidden or outside the viewport,
and retains a static SVG when JavaScript is disabled. The lab links the speed
module and complete game source, and replays the rule against recorded
original-game values.
[evidence/calculator-and-dino.md](evidence/calculator-and-dino.md) records both
targets, selected findings, attribution and verification scope. Update the
speed rule, game, check table and evidence together. The original script excerpt
and its BSD license are credited on the pages. Prompt responses are example
explanations based on findings.
The general investigation and DX-Ball overview diagrams are maintained as SVG source. Initial layout references were
created with the built-in image generation tool; [figures.md](figures.md) retains

132
website/evidence/calculator-and-dino.md Normal file
View File

@ -0,0 +1,132 @@
# Calculator and dinosaur beginner examples
Evidence collected on 9 October 2026 with the published REA 4.1.0 package.
The homepage offers compact setup first, then a manual/agent comparison and
two familiar behavior questions. Prompts and replies are examples based on the
findings below. Selected code and generic inputs are public; raw captures stay
outside the website.
## Windows Calculator
### Inspected artifacts
The installed Windows Calculator package is version `11.2508.4.0`, x64.
| Artifact | SHA-256 |
| --------------------------- | ------------------------------------------------------------------ |
| Windows `calc.exe` launcher | `9c2c8a8588fe6db09c09337e78437cb056cd557db1bcf5240112cbfb7b600efb` |
| Package `CalcViewModel.dll` | `07a1953bbf828a3495662c4b4bde1c80c9075061e0e389eabac5f8c544710df5` |
REA's function dossier for launcher `0x1400019f4` includes the call to
`ShellExecuteW` with `ms-calculator:`. Evidence:
`ev_e97a6a1a61bfe63476a13e6285d71dd838101066f7863c9af822861050203ea5`.
The calculation is in the installed app's model DLL. REA inspected function
`0x1801245d0`, whose body occupies two ranges, totaling 10,656 bytes:
`0x1801245d0–0x180126f4c` and `0x180126f55–0x180126f77`.
Evidence:
`ev_830a710c7fb55a08ac896fb5783c14339480a57a96d6d45c57c024b6a43239d0`.
REA supplied pseudocode, original instructions, calls and references. Its
`case 0x76` checks the operator field against `0x5c` and `0x5b` and constructs
the constant 100 in both paths. One path divides the current value by 100;
the other combines the current value with the previous value divided by 100.
The published assembly is selected exactly from the returned instruction list.
The binary is stripped. A local instruction scan located candidates using
operator IDs and the constant 100; REA then produced the complete function
dossier. Function selection was analyst-assisted. The illustrative agent
prompt is not a recording of an autonomous end-to-end discovery.
### Source interpretation and check
Microsoft's MIT-licensed source at commit
`d125246a4e19842ce1332e6c7839cf0e110027d8` supplies the operator meanings and
an independently readable implementation:
- [Operator IDs](https://github.com/microsoft/calculator/blob/d125246a4e19842ce1332e6c7839cf0e110027d8/src/CalcManager/Header%20Files/CCommand.h): `IDC_DIV = 91`, `IDC_MUL = 92`, `IDC_PERCENT = 118`.
- [Percentage branch](https://github.com/microsoft/calculator/blob/d125246a4e19842ce1332e6c7839cf0e110027d8/src/CalcManager/CEngine/scifunc.cpp#L98-L111): multiply/divide uses `rat / 100`; other operators use `rat * (m_lastVal / 100)`.
- [Standard-mode tests](https://github.com/microsoft/calculator/blob/d125246a4e19842ce1332e6c7839cf0e110027d8/src/CalculatorUnitTests/CalculatorManagerTest.cpp#L350-L370): `6 × 6 % = 0.36` and `50 + 20 % = 60`.
These source branches agree with the operator checks and two paths observed
in the installed DLL. The public source commit is a crosscheck; it is not an
identified build commit for that installed package. No PDB symbols were loaded.
The homepage's named C-like rule is an explanatory summary. Its `200 + 10%`
and `200 × 10%` displays are derived from that rule. Browser checks exercise
both percentage illustrations, their results, operator selection and reset.
The Microsoft tests were inspected, not executed. A probe-owned Calculator
window could be inspected, but it was no longer present at the input-check
step; no completed Windows GUI input result is claimed.
## Dinosaur speed
### Running target and source
REA inspected the HTTP page
<https://wayou.github.io/t-rex-runner/> in an owned Chrome 150.0.7871.124
session through a loopback debugging connection. This is wayou's
Chromium-derived browser edition. REA's HTTP(S) page inspection does not
select `chrome://dino/`; the website identifies the HTTP edition as its target.
The returned `index.js` source contains 90,241 UTF-8 bytes, SHA-256
`e7a50d337bdbe4299068de034e4564cfe5fd45ca9257ded37b6ada9330cedf0f`.
Evidence:
`ev_7a09de570cf6b64907504046485cab69ad444828964106eabc05958799749905`.
This digest also matches `index.js` in repository commit
`5455bfa408ec6b707c7300ff194b7390733a766d`. Source locations:
- [Settings](https://github.com/wayou/t-rex-runner/blob/5455bfa408ec6b707c7300ff194b7390733a766d/index.js#L106-L135): `ACCELERATION: 0.001`, `MAX_SPEED: 13`, `SPEED: 6`.
- [Update branch](https://github.com/wayou/t-rex-runner/blob/5455bfa408ec6b707c7300ff194b7390733a766d/index.js#L565-L571): increment speed on a collision-free update while speed is below the threshold.
The source begins with the Chromium Authors' 2014 copyright notice. Selected
excerpts are credited on the page. The repository's BSD license and the source
copyright are reproduced in `public/assets/licenses/dinosaur.txt`.
### Controlled original-game check
After the passive REA inspection, a separate Playwright controller called the
original page's `Runner.update()` repeatedly. It disabled future update
scheduling and obstacle generation, set the starting speed to 6, and kept the
game in its playing state. The control is credited separately from REA's
read-only inspection.
| Update count | Observed speed | Display rounded to 3 decimals |
| ------------ | ------------------ | ----------------------------- |
| 0 | 6 | 6.000 |
| 1,000 | 7.000000000000334 | 7.000 |
| 4,000 | 9.99999999999956 | 10.000 |
| 7,000 | 12.999999999997897 | 13.000 |
| 10,000 | 13.000999999997896 | 13.001 |
The branch compares before adding. Floating-point increments can cross the
threshold by one increment; the reconstruction preserves this behavior rather
than introducing a clamp.
### New game and reader experiment
`public/assets/dino-speed.js` contains the reconstructed rule and an update-count
replay. Its rounded results match the original-game check above. The website's
mini-game imports this rule. It advances its own simulation at 60 updates per
second, avoiding a different frame rate changing its demonstration pace.
The canvas drawing, dinosaur shape, jump physics, rectangle collision detection,
spacing and controls are newly authored teaching code. The reconstruction claim
is scoped to the speed rule. Changing the slider selects a fixed speed between
2 and 18; selecting automatic acceleration restores the starting speed of 6.
The new game starts only after user input. It supports Play/Pause, Jump, Restart,
canvas Space/Up keys and touch. It pauses when hidden or scrolled out of view.
Without JavaScript, a static SVG, source excerpts and recorded results remain
available. The downloadable speed module and complete game source are linked
from the lab.
## Review checks
Website checks cover root and `/rea/` hosting, 320/390/850/1440px layouts,
expanded evidence, copying, no-JavaScript content, reduced motion, the two
percentage rules and the game controls. Game checks include speed selection,
automatic acceleration, a collision, restart, jump height on the rendered
canvas, pause and the original-rule replay. Existing Notes and DX-Ball pages
remain part of layout checks.

6
website/evidence/dx-ball-sound-pan.md
View File

@ -96,12 +96,6 @@ signature, declaration and return.
## Validation scope
The homepage reuses these observations in a selected seven-instruction excerpt
and a shortened C summary. Its agent answer is an example explanation, not a
recorded transcript. Its position figure uses illustrative inputs 0, 320 and
640 with the recorded initial scale of 1, producing −500, 0 and 500. The checks
below apply to the maintained project function, not the shortened summary.
The reconstruction project's recorded checks establish:
- 3,205 direct original-x86 differential cases: integer positions 0–640 at

15
website/figures.md
View File

@ -42,6 +42,21 @@ branches when changing these figures. Match progress claims to the pinned
reconstruction checkpoint. Validate the SVG as XML and inspect its browser
rendering at desktop and mobile widths.
## Beginner homepage and dinosaur reconstruction
The Calculator role comparison and its percentage controls are semantic HTML.
The assembly comes from a real installed model DLL; the named calculation is
a readable summary crosschecked against Microsoft’s public source. See
[evidence/calculator-and-dino.md](evidence/calculator-and-dino.md).
The dinosaur sequence uses an HTML flow: inspect the loaded script, rebuild the
speed rule, then change and play. Its canvas mini-game and static SVG fallback
are authored code, without generated images or copied game sprites. The game
imports the recovered rule from `public/assets/dino-speed.js`; other mechanics
are new teaching code. Check that the fallback is visible with JavaScript
disabled and hidden when the playable canvas loads. Keep the speed settings,
source excerpt, reconstruction and original-result table consistent.
## Original image generation prompts
## Prompt 1

235
website/public/assets/dino-demo.js Normal file
View File

@ -0,0 +1,235 @@
import { advanceSpeed, simulateSpeed, SPEED_RULE } from "./dino-speed.js";
// A new teaching game around the recovered speed rule. Drawing, jump physics
// and rectangle collision checks are authored for this demo.
function initializeDinoDemo(demo) {
const canvas = demo.querySelector("canvas");
const context = canvas.getContext("2d");
if (context === null) return;
const start = demo.querySelector("[data-dino-start]");
const slider = demo.querySelector("[data-dino-slider]");
const auto = demo.querySelector("[data-dino-auto]");
const output = demo.querySelector("[data-dino-speed]");
const status = demo.querySelector("[data-dino-status]");
const ground = 148;
const dinosaurX = 52;
const dinosaur = new Path2D(
"M16 18V2H48V24H35V32H25V43H16V53H8V32H0V23H6V29H16Z M12 47V59H5V54H8V47Z M24 42V54H31V59H20V47Z M34 29H44V35H39V32H34Z",
);
let speed = SPEED_RULE.start;
let height = 0;
let velocity = 0;
let distance = 0;
let obstacles = [];
let running = false;
let crashed = false;
let frame = 0;
let lastTime = 0;
let elapsed = 0;
const updateSpeedDisplay = () => {
output.value = speed.toFixed(1);
slider.value = speed.toFixed(1);
};
const draw = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "#b7c0c9";
context.beginPath();
context.moveTo(0, ground);
context.lineTo(canvas.width, ground);
for (let x = -(distance % 70); x < canvas.width; x += 70) {
context.moveTo(x, ground + 7);
context.lineTo(x + 12, ground + 7);
}
context.stroke();
context.fillStyle = "#5b6570";
for (const obstacle of obstacles) {
context.fillRect(
obstacle.x + 6,
ground - obstacle.height,
8,
obstacle.height,
);
context.fillRect(obstacle.x, ground - obstacle.height + 12, 6, 7);
context.fillRect(obstacle.x, ground - obstacle.height + 3, 5, 15);
context.fillRect(obstacle.x + 14, ground - obstacle.height + 19, 7, 6);
context.fillRect(obstacle.x + 17, ground - obstacle.height + 8, 4, 17);
}
context.save();
context.translate(dinosaurX, ground - 59 - height);
context.fillStyle = crashed ? "#8c4b40" : "#294f82";
context.fill(dinosaur);
context.fillStyle = "#ffffff";
context.fillRect(39, 7, 4, 4);
context.restore();
context.fillStyle = "#5b6570";
context.font = "13px monospace";
context.textAlign = "right";
context.fillText(
`DISTANCE ${String(Math.floor(distance / 100)).padStart(4, "0")}`,
580,
28,
);
if (!running) {
context.textAlign = "center";
context.font = "15px system-ui";
context.fillText(
crashed ? "Hit a cactus. Try another speed." : "Space or Jump ↑",
330,
85,
);
}
};
const stop = (message) => {
running = false;
cancelAnimationFrame(frame);
start.textContent = crashed ? "Play again" : "Play";
if (message) status.textContent = message;
draw();
};
const reset = () => {
stop();
crashed = false;
height = 0;
velocity = 0;
distance = 0;
obstacles = [{ x: 550, height: 38 }];
if (auto.checked) speed = SPEED_RULE.start;
elapsed = 0;
start.textContent = "Play";
status.textContent = "Press Play, then jump over the cactus.";
updateSpeedDisplay();
draw();
};
const update = () => {
if (auto.checked) speed = advanceSpeed(speed);
distance += speed;
if (height > 0 || velocity > 0) {
height = Math.max(0, height + velocity);
velocity -= 0.55;
if (height === 0) velocity = 0;
}
obstacles.forEach((obstacle) => {
obstacle.x -= speed;
});
obstacles = obstacles.filter((obstacle) => obstacle.x > -25);
const last = obstacles[obstacles.length - 1];
const gap = 400 + speed * 18;
if (last === undefined || last.x < 600 - gap) {
obstacles.push({ x: 600, height: 38 });
}
const left = dinosaurX + 8;
const right = dinosaurX + 39;
const bottom = ground - height;
if (
obstacles.some(
(obstacle) =>
right > obstacle.x &&
left < obstacle.x + 21 &&
bottom > ground - obstacle.height + 4,
)
) {
crashed = true;
stop("Hit a cactus. Press Play again, or change the speed and restart.");
}
};
const animate = (time) => {
if (!running) return;
elapsed += Math.min(time - lastTime, 100);
lastTime = time;
while (elapsed >= 1000 / 60 && running) {
elapsed -= 1000 / 60;
update();
}
updateSpeedDisplay();
draw();
if (running) frame = requestAnimationFrame(animate);
};
const play = () => {
if (crashed) reset();
if (running) return;
running = true;
lastTime = performance.now();
elapsed = 0;
start.textContent = "Pause";
status.textContent = "Running. Space or Jump clears a cactus.";
frame = requestAnimationFrame(animate);
};
const jump = () => {
if (crashed) reset();
play();
if (height === 0) velocity = 10.5;
};
start.addEventListener("click", () => {
if (running) stop("Paused. Press Play to continue.");
else play();
});
demo.querySelector("[data-dino-jump]").addEventListener("click", jump);
demo.querySelector("[data-dino-reset]").addEventListener("click", reset);
canvas.addEventListener("keydown", (event) => {
if (event.code === "Space" || event.code === "ArrowUp") {
event.preventDefault();
if (!event.repeat) jump();
}
});
canvas.addEventListener("pointerdown", () => {
canvas.focus();
jump();
});
slider.addEventListener("input", () => {
auto.checked = false;
speed = Number(slider.value);
updateSpeedDisplay();
status.textContent = running
? `Fixed speed: ${speed.toFixed(1)}. Space or Jump clears a cactus.`
: `Fixed speed: ${speed.toFixed(1)}. Press Play to try it.`;
draw();
});
auto.addEventListener("change", () => {
if (auto.checked) speed = SPEED_RULE.start;
updateSpeedDisplay();
status.textContent = auto.checked
? "Recovered rule: start at 6, then increase toward 13."
: `Fixed speed: ${speed.toFixed(1)}.`;
});
document.addEventListener("visibilitychange", () => {
if (document.hidden && running) stop("Paused. Press Play to continue.");
});
if ("IntersectionObserver" in window) {
new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting && running)
stop("Paused. Press Play to continue.");
}).observe(demo);
}
demo.querySelector(".dino-fallback").setAttribute("hidden", "");
demo.querySelector(".dino-controls").hidden = false;
canvas.hidden = false;
reset();
}
document.querySelectorAll("[data-dino-demo]").forEach(initializeDinoDemo);
const speedCheck = document.querySelector("[data-speed-check]");
if (speedCheck !== null) speedCheck.hidden = false;
speedCheck?.addEventListener("click", () => {
let matches = true;
document.querySelectorAll("[data-speed-updates]").forEach((cell) => {
const speed = simulateSpeed(
Number(cell.getAttribute("data-speed-updates")),
).toFixed(3);
cell.textContent = speed;
matches =
matches && speed === cell.parentElement.children[1].textContent.trim();
});
document.querySelector("[data-speed-check-status]").textContent = matches
? "Replayed the recovered rule. All four values match the controlled original-game check when rounded to three decimals."
: "The replay differs from the recorded original-game values. Compare the speed rule and settings above.";
});

21
website/public/assets/dino-speed.js Normal file
View File

@ -0,0 +1,21 @@
// Speed rule recovered from wayou's Chromium-derived browser edition.
// Source and controlled checks: website/evidence/calculator-and-dino.md.
export const SPEED_RULE = Object.freeze({
start: 6,
acceleration: 0.001,
threshold: 13,
});
/** Advance one collision-free update using the inspected speed rule. */
export function advanceSpeed(speed) {
return speed < SPEED_RULE.threshold ? speed + SPEED_RULE.acceleration : speed;
}
/** Replay the recovered rule for a chosen number of updates. */
export function simulateSpeed(updates) {
let speed = SPEED_RULE.start;
for (let update = 0; update < updates; update += 1) {
speed = advanceSpeed(speed);
}
return speed;
}

56
website/public/assets/home.js Normal file
View File

@ -0,0 +1,56 @@
function initializePercentDemo() {
const demo = document.querySelector("[data-percent-demo]");
if (demo === null) return;
const display = demo.querySelector("[data-percent-display]");
const expression = demo.querySelector("[data-percent-expression]");
const status = demo.querySelector("[data-percent-status]");
const equals = demo.querySelector('[data-percent-key="equals"]');
const operations = demo.querySelectorAll("[data-percent-operation]");
let operation = "add";
let stage = "input";
const render = () => {
const adding = operation === "add";
const percent = adding ? 20 : 0.1;
const result = adding ? 220 : 20;
const operator = adding ? "+" : "×";
expression.textContent =
stage === "result" ? `200 ${operator} ${percent} =` : `200 ${operator}`;
display.textContent = String(
stage === "input" ? 10 : stage === "percent" ? percent : result,
);
equals.disabled = stage !== "percent";
status.textContent =
stage === "input"
? "Press % to see what happens to 10."
: stage === "percent"
? adding
? "10% of 200 is 20. Press = to add it."
: "For multiplication, 10 becomes 0.1. Press = to multiply."
: `200 ${operator} ${percent} = ${result}.`;
};
operations.forEach((button) => {
button.addEventListener("click", () => {
operation = button.getAttribute("data-percent-operation");
stage = "input";
operations.forEach((candidate) => {
candidate.setAttribute("aria-pressed", String(candidate === button));
});
render();
});
});
demo.querySelectorAll("[data-percent-key]").forEach((button) => {
button.addEventListener("click", () => {
const key = button.getAttribute("data-percent-key");
stage =
key === "reset" ? "input" : key === "percent" ? "percent" : "result";
render();
});
});
demo.querySelector(".percent-operation").hidden = false;
demo.querySelector(".percent-controls").hidden = false;
render();
}
initializePercentDemo();

34
website/public/assets/licenses/dinosaur.txt Normal file
View File

@ -0,0 +1,34 @@
Selected script excerpts from wayou/t-rex-runner
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Repository license at commit 5455bfa408ec6b707c7300ff194b7390733a766d:
BSD 3-Clause License
Copyright (c) 2022, 牛さん
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
3. Neither the name of the copyright holder nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

332
website/public/assets/styles.css
View File

@ -1218,6 +1218,338 @@ pre code {
border: 0;
}
.home-start-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3.5rem;
align-items: center;
}
.home-start-grid h1 {
font-size: clamp(2.8rem, 5vw, 4.2rem);
}
.home-start-grid .home-setup h2 {
font-size: 1.3rem;
letter-spacing: -0.02em;
margin-bottom: 0.7rem;
}
.home-start-grid .home-setup > p {
font-size: 0.9rem;
color: var(--muted);
}
.home-question {
margin-block: 0 1.8rem;
color: var(--muted);
}
.home-question strong {
color: var(--ink);
font-weight: 500;
}
.home-role-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 2.5rem;
margin: 0;
}
.comparison-label {
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line);
font-size: 0.875rem;
font-weight: 600;
}
.agent-investigation > .comparison-label {
color: var(--accent);
}
.manual-steps {
display: grid;
gap: 1rem;
padding: 0;
list-style: none;
}
.manual-steps li {
display: flex;
gap: 1rem;
margin: 0;
}
.manual-steps li > span {
padding-top: 0.2rem;
color: var(--muted);
font:
0.75rem "SFMono-Regular",
Consolas,
"Liberation Mono",
monospace;
}
.manual-steps strong,
.manual-steps small {
display: block;
}
.manual-steps strong {
font-size: 0.95rem;
font-weight: 500;
}
.manual-steps small {
margin-top: 0.15rem;
color: var(--muted);
font-size: 0.8rem;
}
.manual-code {
margin-top: 1.3rem;
padding: 1rem 1.25rem;
border-left: 2px solid var(--line);
background: var(--soft);
color: var(--muted);
font-size: 0.8rem;
line-height: 1.65;
}
.agent-investigation-note {
color: var(--muted);
font-size: 0.875rem;
}
.home-role-comparison figcaption {
grid-column: 1 / -1;
margin-top: 1.2rem;
font-size: 0.8rem;
color: var(--muted);
}
.home-example-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: start;
gap: 3rem;
}
.percent-figure,
.dino-demo {
min-width: 0;
margin: 0;
padding: 1.5rem;
border: 1px solid var(--line);
border-radius: 5px;
}
.percent-operation,
.percent-controls,
.dino-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.percent-operation button,
.percent-controls button,
.dino-buttons button {
min-height: 44px;
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.5rem 0.8rem;
font: inherit;
font-size: 0.85rem;
color: var(--ink);
background: var(--page);
cursor: pointer;
}
.percent-operation button[aria-pressed="true"] {
color: var(--accent);
border-color: var(--accent);
background: #edf2f8;
}
.percent-display {
padding: 1.2rem;
margin-block: 1rem;
border-radius: 4px;
background: var(--soft);
text-align: right;
font-variant-numeric: tabular-nums;
}
.percent-expression {
display: block;
min-height: 1.5rem;
color: var(--muted);
font-size: 0.9rem;
}
.percent-display strong {
font-size: 3rem;
font-weight: 500;
letter-spacing: -0.04em;
}
.percent-controls .percent-key {
min-width: 68px;
font-size: 1.25rem;
color: var(--accent);
border-color: #bbcce0;
}
.percent-controls button:disabled {
opacity: 0.45;
cursor: default;
}
.percent-controls .percent-reset {
margin-left: auto;
border-color: transparent;
color: var(--muted);
}
.percent-status {
min-height: 3rem;
margin-top: 1rem;
font-size: 0.9rem;
}
.percent-figure figcaption,
.dino-demo figcaption {
margin-top: 0.8rem;
color: var(--muted);
font-size: 0.8rem;
}
.percent-explanation h3 {
font-size: 1.2rem;
}
.percent-explanation > p {
color: var(--muted);
}
.percent-rules {
margin-bottom: 0;
}
.percent-rules > div {
padding-block: 0.55rem;
}
.percent-rules dt {
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 0.25rem;
}
.percent-rules dd {
margin: 0;
font-size: 0.9rem;
}
.home-evidence-details {
margin-top: 2rem;
padding-block: 1rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.home-evidence-details > summary {
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
}
.home-evidence-details[open] > summary {
margin-bottom: 1.5rem;
}
.calculator-trace {
margin-block: 1.5rem;
}
.dino-example-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 2.5rem;
}
.dino-stage {
overflow: hidden;
margin-block: 0.8rem;
background: var(--soft);
border-radius: 4px;
color: var(--muted);
}
.dino-stage canvas,
.dino-fallback {
display: block;
width: 100%;
height: auto;
}
.dino-stage canvas {
touch-action: manipulation;
}
.dino-buttons .button {
background: var(--ink);
border-color: var(--ink);
color: white;
}
.dino-controls {
display: grid;
gap: 1.2rem;
}
.dino-speed-label {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
font-size: 0.875rem;
}
.dino-speed-label output {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.dino-speed-label input {
grid-column: 1 / -1;
width: 100%;
margin: 0;
min-height: 30px;
accent-color: var(--accent);
}
.dino-auto-label {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 36px;
font-size: 0.8rem;
color: var(--muted);
}
.dino-auto-label input {
width: 17px;
height: 17px;
flex-shrink: 0;
accent-color: var(--accent);
}
.dino-status {
min-height: 2.6rem;
margin: 1rem 0 0;
font-size: 0.8rem;
color: var(--muted);
}
.dino-rule {
color: var(--muted);
font-size: 0.95rem;
}
.dino-rule strong {
color: var(--ink);
}
.dino-loop {
margin-top: 2rem;
}
.dino-lab-demo {
margin-block: 2rem;
}
.dino-lab-demo .dino-stage {
margin-block: 1.5rem;
}
.speed-check-table td:last-child,
.speed-check-table th:last-child {
text-align: right;
}
[hidden] {
display: none !important;
}
@media (max-width: 850px) {
.home-start-grid,
.home-role-comparison,
.home-example-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.home-start-grid .home-setup {
max-width: 620px;
}
.home-start-grid h1 {
font-size: clamp(2.7rem, 9vw, 4.65rem);
}
.home-role-comparison figcaption {
margin-top: 0;
}
}
@media (max-width: 640px) {
.home-hero {
padding-block: 2.8rem;
}
.percent-figure,
.dino-demo {
padding: 1.1rem;
}
}
@media (max-width: 850px) {
.home-agent-grid,
.home-try-grid {

332
website/public/examples/dino-lab/index.html Normal file
View File

@ -0,0 +1,332 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dinosaur speed lab — REA</title>
<meta
name="description"
content="Read the dinosaur game’s speed rule with REA, rebuild it, then change the speed and play."
/>
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="../../assets/styles.css" />
<script src="../../assets/main.js" defer></script>
<script type="module" src="../../assets/dino-demo.js"></script>
</head>
<body id="top">
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="container header-inner">
<a class="brand" href="../../" aria-label="REA home"
><span class="brand-name">REA</span
><span class="brand-caption">Reverse Engineer Anything</span></a
>
<nav class="navigation" aria-label="Main navigation">
<a href="../../showcase/">Showcases</a
><a class="nav-start" href="../../get-started/">Get started</a
><a href="../../guides/">Guides</a><a href="../../faq/">FAQ</a>
</nav>
<a
class="nav-github"
href="https://github.com/morluto/rea"
aria-label="REA on GitHub"
title="REA on GitHub"
>
<svg
width="22"
height="22"
viewBox="0 0 16 16"
aria-hidden="true"
focusable="false"
>
<path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
/>
</svg>
<span class="nav-github-count" hidden aria-hidden="true"></span>
</a>
</div>
</header>
<main id="main" class="container">
<div class="page-heading">
<p class="breadcrumb">
<a href="../../">Home</a><span>/</span>Dinosaur speed lab
</p>
<p class="eyebrow">Inspect → rebuild → change</p>
<h1>Rebuild the dinosaur’s speed rule.</h1>
<p class="lede">
REA found how the running game increases its speed. This small
reconstruction lets you keep that rule or choose a new speed and play.
</p>
</div>
<div class="article-layout">
<nav class="contents" aria-label="On this page">
<p>On this page</p>
<ul>
<li><a href="#play">Play and change the speed</a></li>
<li><a href="#rule">Read the recovered rule</a></li>
<li><a href="#check">Check the reconstruction</a></li>
<li><a href="#inspect">Try the analysis</a></li>
</ul>
</nav>
<article class="article" aria-label="Dinosaur speed reconstruction">
<section class="article-section" id="play">
<h2>Play and change the speed</h2>
<p>
Press Play, then jump over the cactus. Move the speed slider to
try a slower or faster game; it switches to a fixed speed. Select
the recovered rule to start at 6 and gradually accelerate again.
</p>
<figure class="dino-demo dino-lab-demo" data-dino-demo>
<p class="figure-title">Play the reconstruction</p>
<div class="dino-stage">
<svg
class="dino-fallback"
viewBox="0 0 600 180"
role="img"
aria-label="A small dinosaur running toward a cactus. Recovered speed: starts at 6, increases by 0.001 per update while below 13."
>
<path
d="M0 150H600 M55 113v-30h17V65h27v24H85v17H72v16H62v13h-7v-22m-5-8v-8h-8v-9h-6v22h19m14 15v15h8v-7h-4v-8 M420 150v-48h10v48m-10-15h-12v-22h7v15h5m10-4h12v-22h-7v15h-5"
fill="currentColor"
/>
<text
x="300"
y="65"
text-anchor="middle"
fill="currentColor"
font-size="18"
>
6 → 10 → 13
</text>
</svg>
<canvas
width="600"
height="180"
tabindex="0"
aria-label="Dinosaur mini-game. Use the Jump button or press Space while the game is focused."
hidden
></canvas>
</div>
<div class="dino-controls" hidden>
<div class="dino-buttons">
<button class="button" type="button" data-dino-start>
Play
</button>
<button type="button" data-dino-jump>Jump ↑</button>
<button type="button" data-dino-reset>Restart</button>
</div>
<label class="dino-speed-label"
>Speed <output data-dino-speed>6.0</output
><input
type="range"
min="2"
max="18"
step="0.1"
value="6"
data-dino-slider
/></label>
<label class="dino-auto-label"
><input type="checkbox" data-dino-auto checked /> Use the
recovered acceleration rule</label
>
</div>
<p class="dino-status" data-dino-status role="status">
Original rule: start at 6, then increase toward 13.
</p>
<figcaption>
Move the slider to set your own speed. Space or Jump clears a
cactus.
</figcaption>
<noscript
><p class="caption">
Enable JavaScript to play the reconstruction. The code and
explanation above remain readable.
</p></noscript
>
</figure>
</section>
<section class="article-section" id="rule">
<h2>What REA found</h2>
<p>
We inspected
<a href="https://wayou.github.io/t-rex-runner/"
>wayou’s Chromium-derived browser edition</a
>
with REA. It returned the loaded <code>index.js</code>, including
this branch in the game’s update function:
</p>
<div class="code-block">
<div class="code-header">
<span>REA · selected script source</span>
</div>
<pre><code>if (this.currentSpeed &lt; this.config.MAX_SPEED) {
this.currentSpeed += this.config.ACCELERATION;
}</code></pre>
</div>
<p>
The settings are <code>SPEED: 6</code>,
<code>ACCELERATION: 0.001</code> and <code>MAX_SPEED: 13</code>.
The game runs this branch on an update without a collision.
</p>
<h3>Use the same rule in the new game</h3>
<div class="code-block">
<div class="code-header">
<span>Reconstruction · dino-speed.js</span
><button
class="copy-button"
type="button"
data-copy="lab-speed-rule"
aria-label="Copy reconstructed speed rule"
>
Copy
</button>
</div>
<pre><code id="lab-speed-rule">function advanceSpeed(speed) {
return speed &lt; 13 ? speed + 0.001 : speed;
}</code></pre>
</div>
<p>
The mini-game uses this function for automatic acceleration.
Moving the slider supplies a fixed speed instead. Drawing, jump
physics and rectangle collision checks are new code for this
teaching game; its simulation advances at 60 updates per second.
</p>
<p>
<a href="../../assets/dino-speed.js" download
>Download the speed rule</a
>
· <a href="../../assets/dino-demo.js">Read the game code</a>
</p>
</section>
<section class="article-section" id="check">
<h2>Check the reconstruction</h2>
<p>
We called the original game’s update function with obstacles and
automatic scheduling disabled. Compare those recorded speeds with
a replay of the recovered rule.
</p>
<div class="table-scroll">
<table class="speed-check-table">
<thead>
<tr>
<th>Updates</th>
<th>Original game</th>
<th>Reconstructed rule</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>6.000</td>
<td data-speed-updates="0">6.000</td>
</tr>
<tr>
<td>1,000</td>
<td>7.000</td>
<td data-speed-updates="1000">7.000</td>
</tr>
<tr>
<td>4,000</td>
<td>10.000</td>
<td data-speed-updates="4000">10.000</td>
</tr>
<tr>
<td>10,000</td>
<td>13.001</td>
<td data-speed-updates="10000">13.001</td>
</tr>
</tbody>
</table>
</div>
<button class="button" type="button" data-speed-check hidden>
Run the speed check
</button>
<p class="caption" data-speed-check-status role="status">
Values rounded to three decimals. The branch checks before adding,
so the final increment can take speed just above 13.
</p>
</section>
<section class="article-section" id="inspect">
<h2>Try the analysis yourself</h2>
<ol>
<li>
<a href="../../get-started/">Set up REA</a> with your coding
agent.
</li>
<li>
Follow the
<a href="../../guides/browser/#prepare"
>browser connection steps</a
>, using <code>https://wayou.github.io/t-rex-runner/</code> as
the page URL.
</li>
<li>
Give your agent the page URL and local debugging endpoint, then
copy this prompt.
</li>
</ol>
<div class="agent-terminal">
<div class="terminal-header">
<span class="terminal-title"
><span class="terminal-dots" aria-hidden="true"
><i></i><i></i><i></i></span
>Your coding agent</span
><button
class="copy-button"
type="button"
data-copy="lab-analysis-prompt"
aria-label="Copy dinosaur analysis prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="lab-analysis-prompt"
>Use REA to inspect this dinosaur game. Why does it get
faster? Show the speed rule, then build a small version with
an adjustable speed.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p>
Ask a follow-up:
<strong
>“Where is jump height calculated? Add a jump-height control to
the new version.”</strong
>
</p>
<p class="caption">
Source:
<a
href="https://github.com/wayou/t-rex-runner/blob/5455bfa408ec6b707c7300ff194b7390733a766d/index.js#L565-L571"
>inspected speed code</a
>, Chromium Authors.
<a href="../../assets/licenses/dinosaur.txt"
>Copyright and BSD license</a
>. REA 4.1.0 inspected the running HTTP edition in Chrome 150.
</p>
</section>
</article>
</div>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>REA · Reverse Engineer Anything</p>
<div class="footer-links">
<a href="https://github.com/morluto/rea">Source</a
><a href="https://github.com/morluto/rea/blob/main/LICENSE"
>MIT license</a
><a href="https://discord.gg/GkcryMnJDM">Community</a>
</div>
</div>
</footer>
<p class="sr-only" id="copy-status" role="status" aria-live="polite"></p>
<a class="back-to-top" href="#top" aria-label="Back to top"
><span aria-hidden="true">↑</span> Top</a
>
</body>
</html>

2
website/public/first-investigation/index.html
View File

@ -336,7 +336,7 @@ JS</code></pre>
<a href="../showcase/dx-ball/"
>How DX-Ball calculates sound panning</a
><span
>Continue from the homepage into the original instructions and
>Read the original instructions and the reconstruction’s
checks.</span
>
</li>

711
website/public/index.html
View File

@ -12,6 +12,8 @@
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="assets/styles.css" />
<script src="assets/main.js" defer></script>
<script src="assets/home.js" defer></script>
<script type="module" src="assets/dino-demo.js"></script>
</head>
<body id="top">
<a class="skip-link" href="#main">Skip to content</a>
@ -51,207 +53,22 @@
</header>
<main id="main">
<section class="container hero home-hero">
<p class="eyebrow">Reverse engineering, with your coding agent</p>
<h1>Find out how<br />software works.</h1>
<p class="lede">
REA gives your agent the tools to inspect a program and explain what
it does.
</p>
<div class="actions">
<a class="button" href="#what-is-re">See how it works</a>
<a class="text-link" href="first-investigation/">Try an example</a>
</div>
</section>
<section class="section" id="what-is-re">
<div class="container">
<div class="home-definition">
<h2>What is reverse engineering?</h2>
<p class="lede">
Finding out how software works by examining the program.
</p>
</div>
<figure class="home-calculation">
<p class="figure-title">
DX-Ball: how does the game place a sound on the left or right?
</p>
<div class="code-comparison home-code-comparison">
<div class="code-block">
<div class="code-header">
<span>Original instructions · selected excerpt</span>
</div>
<pre><code>MOV EAX, dword ptr [EBP + 0x8]
MOV dword ptr [EBP + -0xc], EAX
FILD dword ptr [EBP + -0xc]
<span class="code-key">FMUL double ptr [0x00420068]</span>
<span class="code-key">FSUB double ptr [0x00420070]</span>
FMUL double ptr [0x004210a0]
CALL 0x0041678c</code></pre>
</div>
<div class="code-block">
<div class="code-header"><span>Readable summary · C</span></div>
<pre><code>// x is the horizontal position
double pan = (double)x;
<span class="code-key">pan *= 1.5625;</span>
<span class="code-key">pan -= 500.0;</span>
pan *= pan_scale;
return (int)pan;</code></pre>
</div>
</div>
<div
class="pan-examples"
aria-label="Examples of the sound calculation"
>
<div class="pan-example">
<span class="pan-label">Left side</span>
<div class="pan-position" aria-hidden="true">
<i style="--position: 0"></i>
</div>
<span class="pan-value"><code>x = 0 → pan = −500</code></span>
<span class="pan-meaning">Sound to the left</span>
</div>
<div class="pan-example">
<span class="pan-label">Center</span>
<div class="pan-position" aria-hidden="true">
<i style="--position: 0.5"></i>
</div>
<span class="pan-value"><code>x = 320 → pan = 0</code></span>
<span class="pan-meaning">Centered sound</span>
</div>
<div class="pan-example">
<span class="pan-label">Right side</span>
<div class="pan-position" aria-hidden="true">
<i style="--position: 1"></i>
</div>
<span class="pan-value"><code>x = 640 → pan = +500</code></span>
<span class="pan-meaning">Sound to the right</span>
</div>
</div>
<figcaption>
Examples of the calculation with the recorded initial scale of 1.
The code is a readable summary of the inspected function.
</figcaption>
</figure>
<p class="home-analysis-work">
To explain this, an analyst identifies the input, follows the caller
and reads the values at those addresses.
</p>
</div>
</section>
<section class="section" id="ask-your-agent">
<div class="container">
<div class="home-agent-grid">
<div class="home-reassurance">
<h2>Do I need to read assembly to get started?</h2>
<p class="home-no">No.</p>
<p>Ask your agent about the behavior you want to understand.</p>
</div>
<div>
<div class="agent-terminal home-analysis-terminal">
<div class="terminal-header">
<span class="terminal-title"
><span class="terminal-dots" aria-hidden="true"
><i></i><i></i><i></i></span
>Example analysis · DX-Ball</span
>
<button
class="copy-button"
type="button"
data-copy="home-analysis-prompt"
aria-label="Copy DX-Ball analysis prompt"
>
Copy
</button>
</div>
<p class="terminal-target">Target · DXBALL.EXE</p>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="home-analysis-prompt"
>Use REA to inspect this DX-Ball executable. How does it
calculate left/right sound panning? Show the relevant
code.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
<div class="agent-reply">
<p class="reply-label">
Agent · explanation from the findings
</p>
<p>
This function converts a brick’s horizontal position into a
left/right sound value.
</p>
<p>
At the initial scale of 1, the screen center produces zero.
Positions to the left produce negative values; positions to
the right produce positive values.
</p>
</div>
</div>
<p class="caption">
Example prompt and explanation based on the recorded
investigation. Supply the executable to your agent.
</p>
</div>
</div>
<figure class="workflow-figure home-evidence">
<p class="figure-title">What REA found for the agent</p>
<ol class="flow-steps">
<li>
<span class="flow-label">01 · Inspect the function</span>
<span class="flow-node">An integer input</span>
<span class="flow-note"
>The instructions read <code>[EBP + 0x8]</code>. The initial
pseudocode had missed this input.</span
>
</li>
<li>
<span class="flow-label">02 · Follow the caller</span>
<span class="flow-node">A brick’s screen position</span>
<span class="flow-note"
>The caller passes <code>20 + 30 × tile_x</code>, giving the
input its meaning.</span
>
</li>
<li>
<span class="flow-label">03 · Read the stored data</span>
<span class="flow-node">The calculation’s constants</span>
<span class="flow-note"
>Byte reads supply <code>1.5625</code>, <code>500.0</code> and
the initial scale <code>1.0</code>.</span
>
</li>
</ol>
<figcaption>
The agent uses these findings to explain the behavior and write
readable C.
</figcaption>
</figure>
<p class="home-check">
The reconstruction project checked its maintained C function against
3,205 original-x86 input cases and all 63 compiled bytes.
<a href="showcase/dx-ball/#sound-pan">See the code and checks</a>.
</p>
</div>
</section>
<section class="section" id="try-rea">
<div class="container home-try-grid">
<div class="home-start-grid">
<div>
<p class="eyebrow">Your first investigation</p>
<h2>Try REA on a small app.</h2>
<p>
Find out where an app exports its notes, then check how it formats
a title containing commas and quotes.
<p class="eyebrow">Reverse engineering, with your coding agent</p>
<h1>Find out how<br />software works.</h1>
<p class="lede">
REA gives your agent the tools to inspect a program and explain
what it does.
</p>
<p>We provide the example files, a prompt and a result to check.</p>
<div class="actions">
<a class="button" href="first-investigation/">Try the example</a>
<a class="text-link" href="#what-is-re">See an example ↓</a>
<a class="text-link" href="get-started/">Setup guide</a>
</div>
</div>
<div class="home-setup">
<h3>Set up REA with your agent</h3>
<h2>Set up REA</h2>
<p>Copy this into your coding agent:</p>
<div class="agent-terminal">
<div class="terminal-header">
<span class="terminal-title"
@ -277,7 +94,7 @@ return (int)pan;</code></pre>
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p class="caption">Or run this command in your terminal:</p>
<p class="caption">Or run this in your terminal:</p>
<div class="code-block code-inline">
<code id="setup-command">npx rea-agents@latest setup</code>
<button
@ -290,12 +107,514 @@ return (int)pan;</code></pre>
</button>
</div>
<p class="caption">
Setup shows a plan for approval. Restart your agent after setup.
Approve the setup plan, then restart your agent.
</p>
</div>
</div>
</section>
<section class="section" id="what-is-re">
<div class="container">
<div class="home-definition">
<h2>What is reverse engineering?</h2>
<p class="lede">
Finding out how software works by examining the program.
</p>
</div>
<p class="home-question">
For example:
<strong
>why does Calculator turn <code>200 + 10%</code> into
<code>220</code>?</strong
>
</p>
<figure class="home-role-comparison">
<div class="manual-investigation">
<p class="comparison-label">Before REA · You investigate</p>
<ol class="manual-steps">
<li>
<span>01</span>
<div>
<strong>Find the code behind the button.</strong
><small>Which executable or library handles %?</small>
</div>
</li>
<li>
<span>02</span>
<div>
<strong>Read the instructions.</strong
><small>What do these branches and calls mean?</small>
</div>
</li>
<li>
<span>03</span>
<div>
<strong>Recover the calculation.</strong
><small>Follow the inputs, operators and constants.</small>
</div>
</li>
<li>
<span>04</span>
<div>
<strong>Check your explanation.</strong
><small>Does it agree with the program?</small>
</div>
</li>
</ol>
<div class="manual-code">
<code
>CMP EAX, 0x5c<br />JZ 0x180124aba<br />CMP EAX, 0x5b<br />JZ
0x180124aba<br />MOV EDX, 0x64</code
>
</div>
</div>
<div class="agent-investigation" id="ask-your-agent">
<p class="comparison-label">With REA · You ask your agent</p>
<div class="agent-terminal home-analysis-terminal">
<div class="terminal-header">
<span class="terminal-title"
><span class="terminal-dots" aria-hidden="true"
><i></i><i></i><i></i></span
>Example prompt · Calculator</span
>
<button
class="copy-button"
type="button"
data-copy="home-analysis-prompt"
aria-label="Copy Calculator analysis prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="home-analysis-prompt"
>Use REA to inspect Windows Calculator. Why does 200 + 10%
give 220? Show the code behind the % button.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
<div class="agent-reply">
<p class="reply-label">
Example explanation from the findings
</p>
<p>
With addition, % calculates a percentage of the first
number.
</p>
<p>
<strong>10% of 200 is 20.<br />Then 200 + 20 = 220.</strong>
</p>
</div>
</div>
<p class="agent-investigation-note">
Your agent uses REA to locate and read the code, then connects
the findings to your question.
</p>
</div>
<figcaption>
You describe the behavior. The agent carries out the investigation
with REA.
</figcaption>
</figure>
</div>
</section>
<section class="section" id="calculator">
<div class="container">
<div class="section-heading">
<p class="eyebrow">Example 01 · Windows Calculator</p>
<h2>What does the % button actually do?</h2>
<p>
The answer depends on the operator. Compare addition and
multiplication.
</p>
</div>
<div class="home-example-grid">
<figure class="percent-figure" data-percent-demo>
<p class="figure-title">Try the calculation</p>
<div
class="percent-operation"
role="group"
aria-label="Choose the calculation"
hidden
>
<button
type="button"
data-percent-operation="add"
aria-pressed="true"
>
200 + 10%
</button>
<button
type="button"
data-percent-operation="multiply"
aria-pressed="false"
>
200 × 10%
</button>
</div>
<div class="percent-display">
<span class="percent-expression" data-percent-expression
>200 +</span
>
<strong data-percent-display>20</strong>
</div>
<div class="percent-controls" hidden>
<button
type="button"
class="percent-key"
data-percent-key="percent"
>
%
</button>
<button
type="button"
class="percent-key"
data-percent-key="equals"
disabled
>
=
</button>
<button
type="button"
class="percent-reset"
data-percent-key="reset"
>
Reset
</button>
</div>
<p class="percent-status" data-percent-status role="status">
10% of 200 = 20. Then 200 + 20 = 220.
</p>
<figcaption>
Interactive illustration of the inspected percentage rule.
</figcaption>
</figure>
<div class="percent-explanation">
<h3>REA finds the branch. The agent explains it.</h3>
<p>
The installed app’s calculation code checks for multiplication
or division before computing the percentage.
</p>
<div class="code-block">
<div class="code-header">
<span>Readable summary of the % handler</span>
</div>
<pre><code>if (operation == multiply || operation == divide) {
percent = current / 100;
} else {
<span class="code-key">percent = current * previous / 100;</span>
}</code></pre>
</div>
<dl class="percent-rules">
<div>
<dt>Addition</dt>
<dd><code>200 + 10% → 200 + 20 → 220</code></dd>
</div>
<div>
<dt>Multiplication</dt>
<dd><code>200 × 10% → 200 × 0.1 → 20</code></dd>
</div>
</dl>
</div>
</div>
<details class="home-evidence-details">
<summary>See the real code and how the answer was checked</summary>
<ol class="flow-steps calculator-trace">
<li>
<span class="flow-label">01 · Inspect calc.exe</span
><span class="flow-node">A launcher</span
><span class="flow-note"
>REA finds <code>ShellExecuteW</code> opening
<code>ms-calculator:</code>.</span
>
</li>
<li>
<span class="flow-label">02 · Inspect the app</span
><span class="flow-node">CalcViewModel.dll</span
><span class="flow-note"
>Its % handler checks two operator IDs and uses the constant
<code>100</code>.</span
>
</li>
<li>
<span class="flow-label">03 · Interpret and check</span
><span class="flow-node">Two percentage rules</span
><span class="flow-note"
>Microsoft’s public implementation and unit tests explain the
same distinction.</span
>
</li>
</ol>
<div class="code-comparison">
<div class="code-block">
<div class="code-header">
<span>REA · selected original instructions</span>
</div>
<pre><code>0x180124945: MOV EAX, dword ptr [R13 + 0x18]
0x180124949: <span class="code-key">CMP EAX, 0x5c</span>
0x18012494c: JZ 0x180124aba
0x180124952: <span class="code-key">CMP EAX, 0x5b</span>
0x180124955: JZ 0x180124aba
0x18012495b: <span class="code-key">MOV EDX, 0x64</span></code></pre>
</div>
<div class="code-block">
<div class="code-header">
<span>Operator IDs · Microsoft’s source</span>
</div>
<pre><code>#define IDC_MUL 92 // 0x5c
#define IDC_DIV 91 // 0x5b
#define IDC_PERCENT 118 // 0x76
0x64 = 100</code></pre>
</div>
</div>
<p class="caption">
Inspected with REA 4.1.0: Windows Calculator 11.2508.4.0, x64. The
readable summary uses names from Microsoft’s public source to
explain the recovered branch.
</p>
<p class="caption">
<a
href="https://github.com/microsoft/calculator/blob/d125246a4e19842ce1332e6c7839cf0e110027d8/src/CalcManager/CEngine/scifunc.cpp#L98-L111"
>Percentage implementation</a
>
·
<a
href="https://github.com/microsoft/calculator/blob/d125246a4e19842ce1332e6c7839cf0e110027d8/src/CalculatorUnitTests/CalculatorManagerTest.cpp#L350-L370"
>Microsoft’s test cases</a
>
· <a href="guides/native/">Native setup guide</a>
</p>
</details>
</div>
</section>
<section class="section" id="dinosaur">
<div class="container">
<div class="section-heading">
<p class="eyebrow">Example 02 · Chrome’s dinosaur game</p>
<h2>Find the speed rule. Rebuild it. Change it.</h2>
<p>
Why does the dinosaur game get faster? Use REA to read the running
page’s script, then turn the answer into a game you can adjust.
</p>
</div>
<div class="home-example-grid dino-example-grid">
<div>
<div class="agent-terminal home-analysis-terminal">
<div class="terminal-header">
<span class="terminal-title"
><span class="terminal-dots" aria-hidden="true"
><i></i><i></i><i></i></span
>Example prompt · Dinosaur game</span
>
<button
class="copy-button"
type="button"
data-copy="dino-analysis-prompt"
aria-label="Copy dinosaur analysis prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="dino-analysis-prompt"
>Use REA to inspect this dinosaur game. Why does it get
faster? Show the speed rule, then build a small version with
an adjustable speed.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p class="caption">
Inspected target:
<a href="https://wayou.github.io/t-rex-runner/"
>wayou’s Chromium-derived browser edition</a
>.
</p>
<div class="code-block">
<div class="code-header">
<span>REA · loaded index.js · selected lines</span>
</div>
<pre><code>if (this.currentSpeed &lt; this.config.MAX_SPEED) {
<span class="code-key">this.currentSpeed += this.config.ACCELERATION;</span>
}</code></pre>
</div>
<p class="dino-rule">
<strong>Start at 6.</strong> Add <strong>0.001</strong> each
update without a collision, while speed is below
<strong>13</strong>.
</p>
<a class="text-link" href="examples/dino-lab/"
>Open the speed lab →</a
>
</div>
<figure class="dino-demo" data-dino-demo>
<p class="figure-title">Play the reconstruction</p>
<div class="dino-stage">
<svg
class="dino-fallback"
viewBox="0 0 600 180"
role="img"
aria-label="A small dinosaur running toward a cactus. Recovered speed: starts at 6, increases by 0.001 per update while below 13."
>
<path
d="M0 150H600 M55 113v-30h17V65h27v24H85v17H72v16H62v13h-7v-22m-5-8v-8h-8v-9h-6v22h19m14 15v15h8v-7h-4v-8 M420 150v-48h10v48m-10-15h-12v-22h7v15h5m10-4h12v-22h-7v15h-5"
fill="currentColor"
/>
<text
x="300"
y="65"
text-anchor="middle"
fill="currentColor"
font-size="18"
>
6 → 10 → 13
</text>
</svg>
<canvas
width="600"
height="180"
tabindex="0"
aria-label="Dinosaur mini-game. Use the Jump button or press Space while the game is focused."
hidden
></canvas>
</div>
<div class="dino-controls" hidden>
<div class="dino-buttons">
<button class="button" type="button" data-dino-start>
Play
</button>
<button type="button" data-dino-jump>Jump ↑</button>
<button type="button" data-dino-reset>Restart</button>
</div>
<label class="dino-speed-label"
>Speed <output data-dino-speed>6.0</output
><input
type="range"
min="2"
max="18"
step="0.1"
value="6"
data-dino-slider
/></label>
<label class="dino-auto-label"
><input type="checkbox" data-dino-auto checked /> Use the
recovered acceleration rule</label
>
</div>
<p class="dino-status" data-dino-status role="status">
Original rule: start at 6, then increase toward 13.
</p>
<figcaption>
Move the slider to set your own speed. Space or Jump clears a
cactus.
</figcaption>
<noscript
><p class="caption">
Enable JavaScript to play the reconstruction. The code and
explanation above remain readable.
</p></noscript
>
</figure>
</div>
<figure class="workflow-figure dino-loop">
<p class="figure-title">From the running game to a new version</p>
<ol class="flow-steps">
<li>
<span class="flow-label">01 · Inspect</span
><span class="flow-node">REA returns the loaded script</span
><span class="flow-note"
>The agent reads the update function and its speed
settings.</span
>
</li>
<li>
<span class="flow-label">02 · Rebuild</span
><span class="flow-node">Use the recovered rule</span
><span class="flow-note"
>Start at 6 and add 0.001 while speed is below 13.</span
>
</li>
<li>
<span class="flow-label">03 · Change and play</span
><span class="flow-node">Make speed adjustable</span
><span class="flow-note"
>Keep the original acceleration, or choose your own
pace.</span
>
</li>
</ol>
</figure>
<details class="home-evidence-details">
<summary>
See the script, checks and how to try the analysis
</summary>
<p>
REA inspected the HTTP browser edition through a local debugging
connection and returned the loaded <code>index.js</code>,
including its source and digest.
</p>
<div class="code-block">
<div class="code-header">
<span>Selected settings from the inspected script</span>
</div>
<pre><code>ACCELERATION: 0.001,
MAX_SPEED: 13,
SPEED: 6</code></pre>
</div>
<p>
We called the original game’s update function in a controlled
browser check, with obstacles and automatic scheduling disabled.
After 4,000 updates, speed was 10.0; after 10,000, it was 13.0,
rounded to one decimal.
</p>
<p>
The new mini-game keeps that speed rule. Its drawing, jumping and
collision code are a small teaching implementation.
<a href="examples/dino-lab/">Open the lab</a> to see the new code
and run the same speed check.
</p>
<p>
To inspect the target yourself, follow the
<a href="guides/browser/#prepare">browser connection steps</a>
using
<a href="https://wayou.github.io/t-rex-runner/"
>the dinosaur page</a
>. Give your agent that page URL and your local debugging
endpoint, then copy the prompt above.
</p>
<p class="caption">
<a
href="https://github.com/wayou/t-rex-runner/blob/5455bfa408ec6b707c7300ff194b7390733a766d/index.js#L565-L571"
>Inspected speed code</a
>
·
<a href="assets/licenses/dinosaur.txt"
>Chromium Authors · BSD license</a
>
</p>
</details>
</div>
</section>
<section class="section" id="try-rea">
<div class="container start-row">
<div>
<p class="eyebrow">Your first investigation</p>
<h2>Try REA on a small app.</h2>
<p>
Download our Notes example, trace its CSV export, and check one
changed input.
</p>
</div>
<a class="button" href="first-investigation/"
>Try the guided example</a
>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-heading">

28
website/style-guide.md
View File

@ -64,8 +64,17 @@ code excerpt with readable logic and a figure that explains the result without
requiring the reader to understand either language. Show a simple agent prompt
and the specific facts REA supplies to answer it.
Offer a supplied target for the next step. Keep the installation prompt and
normal setup command visible. A first exercise should take the reader through
Put compact setup at the beginning of the homepage: a copyable installation
prompt and the ordinary setup command. Follow it with the beginner examples.
Show how the reader's task changes using the same question on both sides of a
manual/agent comparison. Let returned evidence make REA's contribution visible.
When a small reconstruction makes the finding tangible, let readers change an
input or setting and try the result. Connect inspection, recovered logic,
reconstruction and the new experiment. Keep the recovered rule distinct from
new teaching mechanics, and check it against the inspected program.
Offer a supplied target for the next step. A first exercise should take the reader through
setup, a question, an answer with source references, one prediction they can
check, and a follow-up. Introduce specialized prerequisites when the chosen
target requires them.
@ -114,13 +123,14 @@ purposes, and immutable commit links for checkpoint-dependent facts.
Each figure should answer a question that a reader can name. Choose the visual
form that fits it:
| Relationship | Existing example | Useful form |
| ----------------------------------------- | ---------------------------------------- | -------------------------------------------------- |
| Analysis and verification steps | DX-Ball sound pan | Flow with separate verification branches |
| Code across process boundaries | Electron CSV export and Notion clipboard | HTML flow with APIs and channel names |
| A mathematical transformation | TH04's fixed and aimed rings | SVG drawn from the angle formula |
| Original instructions and readable source | DX-Ball and TH04 | Selectable HTML code with matching step highlights |
| A request caused by an action | Notes browser export | Flow, observed result table and script excerpt |
| Relationship | Existing example | Useful form |
| ----------------------------------------- | ---------------------------------------- | ------------------------------------------------------- |
| Analysis and verification steps | DX-Ball sound pan | Flow with separate verification branches |
| Code across process boundaries | Electron CSV export and Notion clipboard | HTML flow with APIs and channel names |
| A mathematical transformation | TH04's fixed and aimed rings | SVG drawn from the angle formula |
| Original instructions and readable source | DX-Ball and TH04 | Selectable HTML code with matching step highlights |
| A request caused by an action | Notes browser export | Flow, observed result table and script excerpt |
| Recovered behavior and a new experiment | Dinosaur speed reconstruction | Inspected code, playable demo and original-result check |
Use SVG or semantic HTML for diagrams with exact text, numbers and arrows.
Generated illustrations can help explore a layout, but the published labels,