From e750c262fbf37100369ab25bf8659daa1a2c4cc7 Mon Sep 17 00:00:00 2001 From: N0zoM1z0 <1705004398@qq.com> Date: Fri, 9 Oct 2026 11:46:06 +0800 Subject: [PATCH] feat(website): clarify reverse engineering and showcase goals --- website/README.md | 17 +- website/evidence/calculator-and-dino.md | 9 +- website/figures.md | 6 + website/public/assets/home.js | 8 +- website/public/assets/styles.css | 63 +++ website/public/examples/dino-lab/index.html | 8 +- website/public/index.html | 400 +++++++++++--------- website/style-guide.md | 11 +- 8 files changed, 323 insertions(+), 199 deletions(-) diff --git a/website/README.md b/website/README.md index ae758a895..f0da06ca4 100644 --- a/website/README.md +++ b/website/README.md @@ -26,7 +26,7 @@ Open . Refresh the browser after editing a file. ## Pages -- `public/index.html`: compact setup, playable dinosaur reconstruction, manual/agent comparison, Calculator percentage example and case-study overviews. +- `public/index.html`: compact setup, reverse-engineering definition and purpose, manual/agent comparison, dinosaur and Calculator examples, 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. @@ -98,12 +98,15 @@ their provenance and the scope of the validation claims. The original executable and complete private Evidence records are not website assets. The homepage starts with a short installation prompt and the ordinary setup -command, followed immediately by the playable dinosaur example. Its game -precedes the prompt and code on small screens. The manual/agent comparison -then explains the investigation using the same dinosaur speed question. -Calculator follows as a native example: its excerpt comes from an installed -model DLL, and Microsoft’s public implementation supplies names and a -crosscheck. Its controls illustrate the percentage rule with generic inputs. +command, then explains what reverse engineering is and why someone would use +it. The manual/agent comparison introduces REA’s role before the examples. +Dinosaur is the first example; Calculator follows as the native example. +Both name the goal and the reason to inspect the program before showing the +demo. A labeled finding explains what REA returned, and the flow distinguishes +REA’s inspection from the agent’s interpretation and implementation. +Its game precedes the prompt and code on small screens. Calculator’s excerpt +comes from an installed model DLL; Microsoft’s public implementation supplies +names and a crosscheck. Its controls apply the percentage rule to 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; diff --git a/website/evidence/calculator-and-dino.md b/website/evidence/calculator-and-dino.md index e89138d54..b46d2113e 100644 --- a/website/evidence/calculator-and-dino.md +++ b/website/evidence/calculator-and-dino.md @@ -1,8 +1,10 @@ # 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 playable dinosaur reconstruction, -a manual/agent comparison of that investigation, and the Calculator example. +The homepage offers compact setup first, then a reverse-engineering definition, +purpose and manual/agent comparison. Dinosaur is the first worked example; +Calculator is the second. Each states its goal, why the program is inspected, +what REA returned and how the agent uses it. Prompts and replies are examples based on the findings below. Selected code and generic inputs are public; raw captures stay outside the website. @@ -54,7 +56,8 @@ 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 +and `200 × 10%` controls compute those cases from that rule using the fixed +inputs 200 and 10. 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 diff --git a/website/figures.md b/website/figures.md index a87cf7b19..e02f894ef 100644 --- a/website/figures.md +++ b/website/figures.md @@ -49,6 +49,12 @@ HTML. Calculator’s 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 homepage explains reverse engineering before the worked examples. Each +example opens with its goal and reason for inspecting the program. A selected +highlight marks the intended result; the “REA returned” block identifies the +evidence. The flows label REA’s inspection and the agent’s interpretation or +reconstruction explicitly. Preserve this context when moving a demo. + 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 diff --git a/website/public/assets/home.js b/website/public/assets/home.js index 61f22231b..448052cc7 100644 --- a/website/public/assets/home.js +++ b/website/public/assets/home.js @@ -11,13 +11,15 @@ function initializePercentDemo() { const render = () => { const adding = operation === "add"; - const percent = adding ? 20 : 0.1; - const result = adding ? 220 : 20; + const previous = 200; + const current = 10; + const percent = adding ? (current * previous) / 100 : current / 100; + const result = adding ? previous + percent : previous * percent; const operator = adding ? "+" : "×"; expression.textContent = stage === "result" ? `200 ${operator} ${percent} =` : `200 ${operator}`; display.textContent = String( - stage === "input" ? 10 : stage === "percent" ? percent : result, + stage === "input" ? current : stage === "percent" ? percent : result, ); equals.disabled = stage !== "percent"; status.textContent = diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css index 54bf52f67..55b04ee22 100644 --- a/website/public/assets/styles.css +++ b/website/public/assets/styles.css @@ -1244,6 +1244,57 @@ pre code { color: var(--ink); font-weight: 500; } +.home-purpose { + max-width: 850px; + margin-bottom: 2rem; + color: var(--muted); +} +.prose-highlight { + padding: 0.04em 0.16em; + border-radius: 2px; + background: #e4ecf5; + color: var(--accent); + font-weight: 600; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} +.case-brief { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); + gap: 2.5rem; + margin: 0 0 2rem; + padding-block: 1.2rem; + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} +.case-brief dt, +.finding-label { + margin-bottom: 0.45rem; + font-size: 0.8rem; + font-weight: 600; + color: var(--accent); +} +.case-brief dd { + margin: 0; + color: var(--muted); + font-size: 0.95rem; +} +.case-brief dd strong { + color: var(--ink); +} +.rea-finding { + margin-bottom: 1.4rem; + padding-left: 1rem; + border-left: 2px solid var(--accent); +} +.rea-finding > :last-child { + margin: 0; + font-size: 0.95rem; + color: var(--muted); +} +.rea-finding strong { + color: var(--ink); +} .home-role-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); @@ -1416,6 +1467,14 @@ pre code { margin: 0; font-size: 0.9rem; } +.percent-rules dd strong, +.percent-rules dd code { + display: block; +} +.percent-rules dd strong { + margin-bottom: 0.25rem; + font-weight: 500; +} .home-evidence-details { margin-top: 2rem; padding-block: 1rem; @@ -1541,6 +1600,10 @@ pre code { } } @media (max-width: 640px) { + .case-brief { + grid-template-columns: minmax(0, 1fr); + gap: 1.2rem; + } .home-hero { padding-block: 2.8rem; } diff --git a/website/public/examples/dino-lab/index.html b/website/public/examples/dino-lab/index.html index a0578a487..38038c91d 100644 --- a/website/public/examples/dino-lab/index.html +++ b/website/public/examples/dino-lab/index.html @@ -57,8 +57,10 @@

Inspect → rebuild → change

Rebuild the dinosaur’s speed rule.

- REA found how the running game increases its speed. This small - reconstruction lets you keep that rule or choose a new speed and play. + To recreate the game’s acceleration, first find the rule that controls + its speed. REA returned the running script; + we used its rule to build this mini-game with + adjustable speed.

@@ -149,7 +151,7 @@
-

What REA found

+

Read the script REA returned

We inspected

@@ -113,16 +113,125 @@ +
+
+
+

What is reverse engineering?

+

+ Finding out how software works by + examining the program itself. +

+
+

+ The goal: understand a feature well enough to + explain it, + change it or + rebuild it. +

+
+
+

Before REA · You investigate

+
    +
  1. + 01 +
    + Find the relevant code.Locate the loaded script or the binary function. +
    +
  2. +
  3. + 02 +
    + Work out its rules.Follow the inputs, calls and settings. +
    +
  4. +
  5. + 03 +
    + Use and check the result.Explain the behavior, rebuild it or make a change. +
    +
  6. +
+
+
+

With REA · You ask your agent

+
+
+ Example question · Dinosaur game + +
+

+ Use REA to inspect this dinosaur game. Why does it get + faster? Show the speed rule. +

+
+

+ Example explanation from the findings +

+

+ The game adds a little speed on each update. Its script sets + the starting speed, the increment and the stopping + point. +

+
+
+
+
+ REA supplies code and observations from the program. + Your agent uses that evidence to explain, rebuild or test a + feature. +
+
+
+
+

Example 01 · Chrome’s dinosaur game

-

Change the dinosaur’s speed.

-

- Inspect the speed rule with REA, rebuild a small version, then - change the speed and play. -

+

Why does the dinosaur get faster?

+
+
+
Goal
+
+ Rebuild the game with + adjustable speed. +
+
+
+
Why reverse engineer it?
+
+ To reproduce its acceleration, we need + the rule in the running game: how fast it + starts, how much it increases and when it stops. +
+
+

Play the reconstruction

@@ -193,6 +302,14 @@ >
+
+

REA returned

+

+ The script actually running in the page. The + agent reads its update function and speed settings, then uses + that rule in a new game. +

+
-

From the running game to a new version

+

What each part does

  1. - 01 · InspectREA returns the loaded script01 · REARead the running game’s scriptThe agent reads the update function and its speed - settings.Return its actual code and settings to the agent.
  2. - 02 · RebuildUse the recovered rule02 · Your agentRebuild the rule, add a controlStart at 6 and add 0.001 while speed is below 13.Use the recovered acceleration in a small game with a speed + slider.
  3. - 03 · Change and playMake speed adjustable03 · YouChange the speed and playKeep the original acceleration, or choose your own + >Try the original acceleration, then choose your own pace.
  4. @@ -322,129 +439,31 @@ SPEED: 6
-
-
-
-

What is reverse engineering?

-

- Finding out how software works by examining the program. -

-
-

- In the dinosaur example: - which code makes the game get faster? -

-
-
-

Before REA · You investigate

-
    -
  1. - 01 -
    - Find the script behind the game.Which loaded file controls the dinosaur? -
    -
  2. -
  3. - 02 -
    - Find the update function.Where does the game change its speed? -
    -
  4. -
  5. - 03 -
    - Recover the speed rule.Follow the starting speed, increment and - threshold. -
    -
  6. -
  7. - 04 -
    - Check the result.Replay the rule and compare it with the game. -
    -
  8. -
-
-

Find this branch inside a 90 KB script:

- if (this.currentSpeed < this.config.MAX_SPEED) {
-   this.currentSpeed += this.config.ACCELERATION;
- }
-
-
-
-

With REA · You ask your agent

-
-
- Example prompt · Dinosaur game - -
-

- Use REA to inspect this dinosaur game. Why does it get - faster? Show the speed rule. -

-
-

- Example explanation from the findings -

-

- It starts at 6. Each update without a collision adds 0.001 - while speed is below 13. -

-

- After 4,000 updates, speed is 10.
- You can replay the rule to check it.
-

-
-
-

- Your agent uses REA to locate and read the code, then connects - the findings to your question. -

-
-
- You describe the behavior. The agent carries out the investigation - with REA. -
-
-
-
-

Example 02 · Windows Calculator

-

What does the % button actually do?

-

- The answer depends on the operator. Compare addition and - multiplication. -

+

Why does 200 + 10% give 220?

+
+
+
Goal
+
+ Explain the result and + recreate Calculator’s % rule. +
+
+
+
Why reverse engineer it?
+
+ The same button uses + different rules after + and ×. We inspect the + installed app to find which number the percentage is applied to. +
+
+

Try the calculation

@@ -507,11 +526,45 @@ SPEED: 6
-

REA finds the branch. The agent explains it.

+
+

REA returned

+

+ The % handler’s original instructions and decompiled + code. + The agent reads the two branches and explains which rule each + operator uses. +

+

- The installed app’s calculation code checks for multiplication - or division before computing the percentage. + For this example, previous = 200 and + current = 10.

+
+
+ Example prompt · Calculator + +
+

+ Use REA to inspect Windows Calculator. Why does 200 + 10% + give 220? Show the code behind the % button. +

+
Readable summary of the % handler @@ -524,44 +577,54 @@ SPEED: 6
-
Addition
-
200 + 10% → 200 + 20 → 220
+
With +
+
+ Take 10% of the first number.10% of 200 = 20 → 200 + 20 = 220 +
-
Multiplication
-
200 × 10% → 200 × 0.1 → 20
+
With ×
+
+ Turn 10% into 0.1.200 × 0.1 = 20 +
-
- See the real code and how the answer was checked -
    +
    +

    From the installed app to an explanation

    +
    1. - 01 · Inspect calc.exeA launcher01 · REA reads calc.exeIt launches the Calculator appREA finds ShellExecuteW opening - ms-calculator:.The code opens ms-calculator:. The agent then + selects the installed app’s library.
    2. - 02 · Inspect the appCalcViewModel.dll02 · REA reads the libraryReturn the % handler’s codeIts % handler checks two operator IDs and uses the constant + >The function checks the operator and uses the constant 100.
    3. - 03 · Interpret and checkTwo percentage rules03 · Your agent interprets itExplain and reproduce the rulesMicrosoft’s public implementation and unit tests explain the - same distinction.Crosscheck the branch with Microsoft’s source, then try + and + × above.
    +
    +
    + See the real code and how the answer was checked +
    @@ -585,30 +648,7 @@ SPEED: 6 0x64 = 100
    -
    -
    - Example prompt · Calculator - -
    -

    - Use REA to inspect Windows Calculator. Why does 200 + 10% - give 220? Show the code behind the % button. -

    -
    +

    Inspected with REA 4.1.0: Windows Calculator 11.2508.4.0, x64. The readable summary uses names from Microsoft’s public source to diff --git a/website/style-guide.md b/website/style-guide.md index d8afc1c00..e8c5085d4 100644 --- a/website/style-guide.md +++ b/website/style-guide.md @@ -65,9 +65,14 @@ requiring the reader to understand either language. Show a simple agent prompt and the specific facts REA supplies to answer it. Put compact setup at the beginning of the homepage: a copyable installation -prompt and the ordinary setup command. Follow it with the beginner examples. -Put the most immediate result first. An interactive example can precede the -process explanation; on mobile, show the demo before its supporting code. +prompt and the ordinary setup command. Then explain what reverse engineering +means and what it lets someone do, before the worked examples. +Begin each example with its goal and the reason to inspect that program. +Name the actual evidence REA returned and what the agent did with it. +Use short labels, selective bold text and the shared blue highlight to make +those facts visible when scanning. Keep source, interpretation and new code +attributed to their respective roles. On mobile, the demo can precede its +supporting code once its purpose is clear. 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.