OpenSource/reverse-engineering-anything
1
0 Fork 0
mirror of https://github.com/morluto/rea.git synced 2026-10-26 17:35:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): explain REA through a first investigation

Browse Source
This commit is contained in:
N0zoM1z0 committed 2026-10-09 10:00:22 +08:00
1 parent 16624f1324
commit 5160d9b717
7 files changed
+839 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

website/README.md
+15 -2
View File
@@ -25,7 +25,8 @@ Open <http://127.0.0.1:4173/>. Refresh the browser after editing a file.
## Pages
- `public/index.html`: product introduction and case-study overviews.
- `public/index.html`: DX-Ball introduction, agent example, setup and case-study overviews.
- `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.
- `public/showcase/notion/index.html`: Notion's Electron clipboard bridge and rich clipboard format.
@@ -60,6 +61,12 @@ by Git; website checks and each manual publication regenerate it before checking
and uploading the public directory. The verifier checks that its entries match
the current source and contain no extra files.
The first-investigation page uses this same ZIP. Its prompt lets the agent
download and unpack the target; the download button provides a manual path.
The reader follows the static export trace, then runs the CSV formatter with
one changed input. This formatter check needs only Node.js. The separate
browser Notes example has a different implementation.
Agent terminals show example prompts, not transcripts of previous
investigations. All cursors blink continuously with the same CSS animation,
respecting reduced-motion preferences. Both the prompt and animation work
@@ -88,7 +95,13 @@ 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 and DX-Ball overview diagrams are maintained as SVG source. Initial layout references were
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 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
their prompts and the current asset notes. Figures provide an overview;
REA requests, assembly and C remain selectable HTML text. On narrow
website/evidence/dx-ball-sound-pan.md
+6
View File
@@ -96,6 +96,12 @@ 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
website/evidence/guide-examples.md
+16
View File
@@ -36,6 +36,22 @@ contents. Website verification compares every ZIP entry to its source file and
rejects extra entries. Existing source digests and static findings remain valid
for the unzipped example.
## First-investigation formatter check
The first-investigation page reuses the unchanged Electron fixture and recorded
static findings above. On 9 October 2026, its generated ZIP was unpacked and the
page's formatter command was run with Node.js 24.18.0. The input
`[{ id: 1, title: 'Hello, "REA"' }]` produced:
```csv
id,title
1,"Hello, ""REA"""
```
That check executes `toCsv` from the unzipped `csv.js`. It checks formatting;
the export destination remains a conclusion from `main.js`. No Electron app
launch or new native analysis was needed for this website revision.
## Notes browser example
The three-file browser app is in `website/public/examples/notes-web/`.
website/public/assets/styles.css
+189
View File
@@ -269,6 +269,162 @@ section[id] {
max-width: 680px;
margin-top: 2.25rem;
}
.home-hero {
padding-block: 4rem 3.5rem;
}
.home-definition {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
margin-bottom: 2rem;
}
.home-definition h2,
.home-definition p {
margin: 0;
}
.home-calculation {
margin: 0;
}
.home-code-comparison pre {
font-size: 0.85rem;
line-height: 1.9;
}
.code-key {
color: var(--accent);
background: #e4ecf5;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.pan-examples {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
margin-top: 1.8rem;
padding: 1.4rem 1.6rem;
border: 1px solid var(--line);
border-radius: 5px;
}
.pan-example {
min-width: 0;
text-align: center;
}
.pan-label,
.pan-value,
.pan-meaning {
display: block;
}
.pan-label {
color: var(--ink);
font-size: 0.9rem;
font-weight: 600;
}
.pan-position {
position: relative;
height: 2rem;
margin-block: 0.6rem;
}
.pan-position::before {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
right: 0;
height: 2px;
background: var(--line);
}
.pan-position i {
position: absolute;
top: calc(50% - 5px);
left: calc(5px + (100% - 10px) * var(--position));
width: 10px;
height: 10px;
transform: translateX(-50%);
border-radius: 50%;
background: var(--accent);
}
.pan-value {
font-size: 0.9rem;
}
.pan-meaning {
margin-top: 0.25rem;
color: var(--muted);
font-size: 0.8rem;
}
.home-calculation figcaption {
margin-top: 0.8rem;
color: var(--muted);
font-size: 0.8rem;
}
.home-analysis-work {
max-width: 760px;
margin: 1.5rem 0 0;
color: var(--muted);
}
.home-agent-grid,
.home-try-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
gap: 3.5rem;
align-items: start;
}
.home-reassurance h2 {
font-size: clamp(1.75rem, 3vw, 2.2rem);
}
.home-no {
margin: 1.2rem 0;
font-size: clamp(4.5rem, 8vw, 6.5rem);
font-weight: 650;
letter-spacing: -0.06em;
line-height: 1;
}
.home-reassurance > :last-child,
.home-try-grid p {
color: var(--muted);
}
.home-analysis-terminal {
margin: 0 0 0.9rem;
}
.terminal-target {
margin: 1rem 1.4rem 0;
color: #bdc8d4;
font-size: 0.75rem;
}
.agent-reply {
padding: 1.4rem;
background: var(--page);
color: var(--ink);
}
.agent-reply .reply-label {
color: var(--accent);
font-size: 0.8rem;
font-weight: 600;
}
.agent-reply > :last-child {
margin-bottom: 0;
}
.home-evidence {
margin-block: 2rem 1.2rem;
}
.home-check {
max-width: 800px;
margin: 0;
color: var(--muted);
font-size: 0.875rem;
}
.home-try-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.home-setup .agent-terminal {
margin-block: 1rem;
}
.home-setup .code-inline {
margin-block: 0.5rem 0.8rem;
}
.home-setup > .caption {
margin-bottom: 0;
}
.code-block {
margin-block: 1.3rem;
border: 1px solid var(--line);
@@ -1063,6 +1219,14 @@ pre code {
}
@media (max-width: 850px) {
.home-agent-grid,
.home-try-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.home-reassurance {
max-width: 600px;
}
.brand-caption {
display: none;
}
@@ -1096,6 +1260,31 @@ pre code {
}
@media (max-width: 640px) {
.home-definition {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.pan-examples {
grid-template-columns: 1fr;
gap: 1.3rem;
padding: 1.2rem;
}
.pan-example {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
column-gap: 1rem;
text-align: left;
}
.pan-position {
grid-column: 2;
grid-row: 1;
margin: 0;
height: 1.6rem;
}
.pan-value,
.pan-meaning {
grid-column: 1 / -1;
}
.back-to-top {
right: calc(1rem + env(safe-area-inset-right, 0px));
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
website/public/first-investigation/index.html
+371
View File
@@ -0,0 +1,371 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Your first investigation — REA</title>
<meta
name="description"
content="Try REA on a small Notes app. Set up your agent, ask where exported notes go, and check the CSV formatter with a sample title."
/>
<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>
</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> / Your first investigation
</p>
<h1>Find out where<br />exported notes go.</h1>
<p class="lede">
Use REA to inspect a small app, follow its Export notes button and
check one detail yourself.
</p>
<p class="page-meta">
A supplied example · Node.js and npm · Your coding agent
</p>
</div>
<div class="article-layout">
<nav class="contents" aria-label="On this page">
<p>In this exercise</p>
<ul>
<li><a href="#setup">1. Set up</a></li>
<li><a href="#ask">2. Ask about export</a></li>
<li><a href="#answer">3. Follow the answer</a></li>
<li><a href="#check">4. Check a prediction</a></li>
<li><a href="#next">5. Ask another question</a></li>
</ul>
</nav>
<article class="article" aria-label="Your first REA investigation">
<section class="article-section" id="setup">
<h2>1. Connect your agent to REA</h2>
<p>
Use a coding agent such as Claude Code, Codex or Cursor. You’ll
need Node.js and npm; the
<a href="../get-started/">setup guide lists supported versions</a
>.
</p>
<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="first-install-prompt"
aria-label="Copy REA installation prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="first-install-prompt"
>Install REA and connect it to this coding agent using npx
rea-agents@latest setup. Show me the setup plan for approval,
then verify the installation.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p class="caption">Or run this command in your terminal:</p>
<div class="code-block code-inline">
<code id="first-setup-command">npx rea-agents@latest setup</code>
<button
class="copy-button"
type="button"
data-copy="first-setup-command"
aria-label="Copy setup command"
>
Copy
</button>
</div>
<p>
Review the plan, approve the setup, then restart your agent.
Already connected? Continue below.
</p>
</section>
<section class="article-section" id="ask">
<h2>2. Ask where the CSV is written</h2>
<p>
The example is a six-file Electron app with an
<strong>Export notes</strong> button. Your agent can inspect its
code without installing or launching Electron.
</p>
<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="first-analysis-prompt"
aria-label="Copy Notes investigation prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="first-analysis-prompt"
>Download https://rea.tools/examples/notes-example.zip into a
new example folder and unpack it. Use REA to find what happens
when I click Export notes. Show where notes.csv is written,
which fields it contains, and the relevant files and
lines.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p>
Your agent downloads the files and gives the unpacked folder to
REA for inspection.
</p>
<p>
<a
class="button"
href="../examples/notes-example.zip"
download="notes-example.zip"
>Download example ZIP</a
>
</p>
<p class="caption">
If your agent can’t download files, unzip this archive yourself.
Give it the path to the <code>notes-example</code> folder and the
same export question.
</p>
</section>
<section class="article-section" id="answer">
<h2>3. Follow the answer back to the code</h2>
<p>Look for a short explanation with file and line references:</p>
<blockquote class="prompt">
<p>
The button sends a <code>notes:export</code> message. The main
process formats the notes as CSV and writes
<code>notes.csv</code> in the user’s Downloads folder. The
columns are <code>id</code> and <code>title</code>.
</p>
</blockquote>
<figure class="workflow-figure">
<p class="figure-title">From the button to the file writer</p>
<ol class="flow-steps">
<li>
<span class="flow-label">Page · renderer.js</span
><span class="flow-node">Export notes</span
><span class="flow-note"
>Calls <code>notes.exportCsv()</code>.</span
>
</li>
<li>
<span class="flow-label">Bridge · preload.js</span
><span class="flow-node"><code>notes:export</code></span
><span class="flow-note"
>Sends a named message to the main process.</span
>
</li>
<li>
<span class="flow-label">Handler · main.js</span
><span class="flow-node">Write notes.csv</span
><span class="flow-note"
>Calls the formatter in <code>csv.js</code> and writes the
file.</span
>
</li>
</ol>
<figcaption>
REA’s static analysis pairs the message with its handler. The
destination is read from code.
</figcaption>
</figure>
<div class="code-block">
<div class="code-header">
<span>main.js · lines 8–12</span
><a href="../examples/notes-electron/main.js">Source</a>
</div>
<pre><code>ipcMain.handle("notes:export", () =&gt; {
const destination = path.join(app.getPath("downloads"), "notes.csv");
writeFileSync(destination, toCsv(notes), "utf8");
return destination;
});</code></pre>
</div>
<p>
The file path, formatter and write call are together in this
handler. Ask your agent to show these lines if its answer leaves
them out.
</p>
<p>
<a href="../guides/javascript/#follow"
>See the full code trace and recorded REA result</a
>.
</p>
</section>
<section class="article-section" id="check">
<h2>4. Check a prediction</h2>
<p>
A comma separates CSV columns. What happens when a note title
itself contains a comma or quotation marks?
</p>
<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="first-check-prompt"
aria-label="Copy CSV check prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="first-check-prompt"
>Predict the CSV for a note with id 1 and title Hello, "REA".
Then run the example’s toCsv formatter with Node.js to check
it. Show the prediction and actual output.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<div class="code-block">
<div class="code-header">
<span>Expected formatter output</span>
</div>
<pre><code>id,title
1,"Hello, ""REA"""</code></pre>
</div>
<p>
The title stays in one quoted field; each quotation mark is
doubled. This checks the formatter directly with Node.js.
</p>
<details class="evidence-details">
<summary>Run the check yourself</summary>
<p>
Open a terminal in the unpacked
<code>notes-example</code> folder:
</p>
<div class="code-block">
<div class="code-header">
<span>Node.js · CSV formatter</span
><button
class="copy-button"
type="button"
data-copy="first-check-command"
aria-label="Copy formatter check command"
>
Copy
</button>
</div>
<pre><code id="first-check-command">node &lt;&lt;'JS'
const { toCsv } = require('./csv.js');
process.stdout.write(toCsv([{ id: 1, title: 'Hello, "REA"' }]));
JS</code></pre>
</div>
<p class="caption">
This command uses a shell with here-document support, such as
Bash or Zsh. Your agent can run the same JavaScript in your
platform’s shell.
</p>
</details>
</section>
<section class="article-section" id="next">
<h2>5. Ask another question</h2>
<p>Try a follow-up in the same conversation:</p>
<blockquote class="prompt">
<p>
What happens if the file can’t be written? Follow the error back
to the page.
</p>
</blockquote>
<p>
Or give your agent an app of your own and ask about one button,
file or behavior.
</p>
<ul class="reading-list">
<li>
<a href="../showcase/notion/">How Notion copies text and HTML</a
><span
>Follow a clipboard feature in a packaged Electron app.</span
>
</li>
<li>
<a href="../showcase/dx-ball/"
>How DX-Ball calculates sound panning</a
><span
>Continue from the homepage into the original instructions and
checks.</span
>
</li>
<li>
<a href="../faq/#troubleshooting"
>Troubleshoot setup or analysis</a
><span
>Update REA and check the connection if you get stuck.</span
>
</li>
</ul>
</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>
website/public/index.html
+229 -69
View File
@@ -50,55 +50,249 @@
</div>
</header>
<main id="main">
<section class="container hero">
<p class="eyebrow">Software analysis · CLI &amp; MCP</p>
<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">
Use REA with your coding agent to inspect binaries, trace application
code and observe runtime behavior.
REA gives your agent the tools to inspect a program and explain what
it does.
</p>
<div class="actions">
<a class="button" href="get-started/">Get started</a>
<a class="text-link" href="showcase/">Explore the case studies</a>
<a class="button" href="#what-is-re">See how it works</a>
<a class="text-link" href="first-investigation/">Try an example</a>
</div>
<div class="hero-command">
<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
>
</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>
<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>
<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="get-started/">Setup guide</a>
</div>
</div>
<div class="home-setup">
<h3>Set up REA with your agent</h3>
<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="home-install-prompt"
aria-label="Copy REA installation prompt"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="home-install-prompt"
>Install REA and connect it to this coding agent using npx
rea-agents@latest setup. Show me the setup plan for approval,
then verify the installation.</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p class="caption">Or run this command in your terminal:</p>
<div class="code-block code-inline">
<code id="setup-command">npx rea-agents@latest setup</code>
<button
class="copy-button"
type="button"
data-copy="home-install-prompt"
aria-label="Copy REA installation prompt"
data-copy="setup-command"
aria-label="Copy setup command"
>
Copy
</button>
</div>
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="home-install-prompt"
>Install REA and connect it to this coding agent using npx
rea-agents@latest setup. Show me the setup plan for approval,
then verify the installation.</span
><span class="terminal-cursor" aria-hidden="true"></span>
<p class="caption">
Setup shows a plan for approval. Restart your agent after setup.
</p>
</div>
<p class="caption">Or run this command in your terminal:</p>
<div class="code-block code-inline">
<code id="setup-command">npx rea-agents@latest setup</code>
<button
class="copy-button"
type="button"
data-copy="setup-command"
aria-label="Copy setup command"
>
Copy
</button>
</div>
</div>
</section>
@@ -139,34 +333,6 @@
</div>
</section>
<section class="section" aria-label="How an investigation works">
<div class="container">
<figure class="explanatory-figure">
<div
class="figure-viewport"
tabindex="0"
role="region"
aria-label="REA investigation flow; scroll horizontally on smaller screens"
>
<img
src="assets/figures/rea-investigation-flow.svg"
width="1774"
height="887"
alt="Ask a question about a local app, binary or browser. Your agent uses REA through CLI or MCP to inspect and trace with analysis tools. REA returns code, references and unknowns. Your agent uses the evidence to explain, implement and test, and can ask follow-up questions."
decoding="async"
/>
</div>
<figcaption>
REA connects your agent to analysis tools. The findings guide the
next question, explanation or implementation.
<a href="assets/figures/rea-investigation-flow.svg"
>Open figure</a
>
</figcaption>
</figure>
</div>
</section>
<section class="section">
<div class="container feature-case">
<div>
@@ -177,12 +343,6 @@
in C, using REA to inspect the executable and independent tests to
check the recovered behavior.
</p>
<p>
To recover a sound-pan calculation, the agent used REA to inspect
the instructions, follow a caller and read the constants. Those
findings led to a C function checked against the original behavior
and all 63 compiled bytes.
</p>
<p>
<a class="text-link" href="showcase/dx-ball/"
>Follow the investigation</a
website/style-guide.md
+13
View File
@@ -57,6 +57,19 @@ followed by several qualifications.
## Build a page around one question
### Introductions and first exercises
Explain reverse engineering with a familiar behavior. Pair a short, authentic
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
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.
### Guides
1. Name the task and introduce a small example.