morluto/rea
1
0
Fork 0
mirror of https://github.com/morluto/rea.git synced 2026-10-12 02:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(website): make the analysis guides easier to start

Browse Source 
- Each guide opens with a short "Before you start" box: difficulty,
  what you need, a link to the step-by-step setup and a one-line
  explanation of Electron or native programs.
- The browser guide gives commands to open Chrome on Mac and Windows
  Command Prompt, not only Linux, and its prompt includes the
  debugging address.
- Multi-line terminal commands note that Windows Command Prompt needs
  them on one line without the backslashes.
- The guide hub lists guides from easiest to hardest, with what each
  one needs.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Kaoru0822
2026-10-11 02:26:15 +00:00
co-authored by Claude Opus 5.5
parent 0ac6832aa6
commit c048b853f8
5 changed files with 186 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/public/assets/styles.css
+26
View File
@@ -1443,6 +1443,32 @@ pre code {
border-radius: 3px;
color: #414b55;
}
.guide-entry .guide-needs {
margin-bottom: 0.9rem;
color: var(--ink);
font-size: 0.9rem;
}
.before-start {
margin-bottom: 2.5rem;
padding: 1.2rem 1.4rem;
border: 1px solid #ced9e5;
border-left: 3px solid var(--accent);
border-radius: 5px;
background: #fafbfc;
}
.before-start-title {
margin-bottom: 0.6rem;
font-weight: 650;
}
.before-start ul {
margin: 0;
}
.before-start li + li {
margin-top: 0.45rem;
}
.before-start .caption {
margin: 0.8rem 0 0;
}
.example-files {
display: flex;
flex-wrap: wrap;
website/public/guides/browser/index.html
+67 -10
View File
@@ -157,6 +157,27 @@
</ul>
</nav>
<article class="article" aria-label="Browser observation">
<aside class="before-start" aria-labelledby="browser-before">
<p class="before-start-title" id="browser-before">
Before you start
</p>
<ul>
<li>
<strong>About 10 minutes.</strong> You paste one command to open
Chrome, then click a button.
</li>
<li>
<strong>You need</strong> REA connected to an AI app and Google
Chrome. New to this?
<a href="../setup/">Set up REA step by step</a>.
</li>
<li>
<strong>Your normal browsing stays separate.</strong> The
command opens Chrome with an empty profile, without your tabs,
logins or history.
</li>
</ul>
</aside>
<section class="article-section" id="example">
<h2>What happens when you click Export?</h2>
<p>
@@ -207,16 +228,48 @@
<h2>Open Chrome with remote debugging</h2>
<p>
Open the hosted Notes example with a separate browser profile and
a local debugging port. On Linux:
a local debugging port. Copy the command for your computer into
the terminal and press <kbd>Enter</kbd>.
</p>
<div class="code-block">
<div class="code-header">
<span>Start the example browser</span
<span>Start the example browser · Mac</span
><button
class="copy-button"
type="button"
data-copy="browser-start-mac"
aria-label="Copy start the example browser on a Mac"
>
Copy
</button>
</div>
<pre><code id="browser-start-mac">open -na "Google Chrome" --args \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/rea-notes-browser \
https://rea.tools/examples/notes-web/</code></pre>
</div>
<div class="code-block">
<div class="code-header">
<span>Start the example browser · Windows Command Prompt</span
><button
class="copy-button"
type="button"
data-copy="browser-start-windows"
aria-label="Copy start the example browser on Windows"
>
Copy
</button>
</div>
<pre><code id="browser-start-windows">start chrome --remote-debugging-port=9222 --user-data-dir="%TEMP%\rea-notes-browser" https://rea.tools/examples/notes-web/</code></pre>
</div>
<div class="code-block">
<div class="code-header">
<span>Start the example browser · Linux</span
><button
class="copy-button"
type="button"
data-copy="browser-start"
aria-label="Copy start the example browser"
aria-label="Copy start the example browser on Linux"
>
Copy
</button>
@@ -227,9 +280,8 @@
https://rea.tools/examples/notes-web/</code></pre>
</div>
<p>
Use your installed browser's executable path on macOS or Windows.
You can replace the page URL with another page you want to
inspect.
A new Chrome window opens on the Notes example. You can replace
the page URL with another page you want to inspect.
</p>
<p>
REA connects to this existing browser. You keep control of the
@@ -256,15 +308,16 @@
<p class="terminal-prompt">
<span class="prompt-symbol" aria-hidden="true">›</span
><span id="browser-prompt"
>Use REA to inspect this page while I click Export notes. What
>Use REA with the browser at http://127.0.0.1:9222 to inspect
the Notes example page while I click Export notes. What
request does it make, and how is the CSV built?</span
><span class="terminal-cursor" aria-hidden="true"></span>
</p>
</div>
<p class="caption">
Example prompt. Give your agent the debugging endpoint,
<code>http://127.0.0.1:9222</code>, and the page URL. Let it start
the capture before you click.
Example prompt. <code>http://127.0.0.1:9222</code> is the
debugging address from the command above. Keep that Chrome window
open, and let your agent start the capture before you click.
</p>
<p>
Your agent discovers the page target, starts an observation
@@ -290,6 +343,10 @@
<pre><code id="browser-targets">npx -y rea-agents@latest list-browser-targets \
http://127.0.0.1:9222 --json</code></pre>
</div>
<p class="caption">
In Windows Command Prompt, put the command on one line and leave
out the <code>\</code> characters.
</p>
<p>
Choose the target with the Notes example URL. Replace
<code>TARGET_ID</code> below with its ID, then run:
website/public/guides/index.html
+30 -22
View File
@@ -6,7 +6,7 @@
<title>Reverse Engineering Guides — REA</title>
<meta
name="description"
content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request."
content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation."
/>
<!-- website:sharing:start -->
<!-- prettier-ignore -->
@@ -18,7 +18,7 @@
<!-- prettier-ignore -->
<meta property="og:title" content="Reverse Engineering Guides — REA" />
<!-- prettier-ignore -->
<meta property="og:description" content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request." />
<meta property="og:description" content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation." />
<!-- prettier-ignore -->
<meta property="og:url" content="https://rea.tools/guides/" />
<!-- prettier-ignore -->
@@ -39,7 +39,7 @@
<!-- prettier-ignore -->
<meta name="twitter:title" content="Reverse Engineering Guides — REA" />
<!-- prettier-ignore -->
<meta name="twitter:description" content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request." />
<meta name="twitter:description" content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation." />
<!-- prettier-ignore -->
<meta name="twitter:image" content="https://rea.tools/assets/social-card.png" />
<!-- prettier-ignore -->
@@ -138,8 +138,8 @@
<p class="breadcrumb"><a href="../">Home</a> / Guides</p>
<h1>REA guides.</h1>
<p class="lede">
Analyze a native function, an Electron export or a browser request.
Each guide includes a prompt, code and results.
Follow an Electron export, observe a browser request or analyze a
native function. Each guide includes a prompt, code and results.
</p>
</div>
<div class="guide-index">
@@ -165,23 +165,6 @@
</p>
</div>
</section>
<section class="guide-entry">
<p class="eyebrow">Native binaries</p>
<div>
<h2>Recover a sound-pan calculation</h2>
<p>
Start with a Windows game executable. Inspect instructions, follow
a caller, read numeric constants and check the recovered C.
</p>
<div class="guide-route">
<span>Instructions</span> <b aria-hidden="true">→</b>
<span>Caller</span> <b aria-hidden="true">→</b>
<span>Constants</span> <b aria-hidden="true">→</b>
<span>C function</span>
</div>
<a class="text-link" href="native/">Native analysis guide</a>
</div>
</section>
<section class="guide-entry">
<p class="eyebrow">JavaScript &amp; Electron</p>
<div>
@@ -196,6 +179,9 @@
<span>Preload API</span> <b aria-hidden="true">→</b>
<span>IPC</span> <b aria-hidden="true">→</b> <span>CSV file</span>
</div>
<p class="guide-needs">
<strong>Good first guide.</strong> Needs only REA setup.
</p>
<a class="text-link" href="javascript/"
>JavaScript &amp; Electron guide</a
>
@@ -218,9 +204,31 @@
<span>Captured request</span> <b aria-hidden="true">→</b>
<span>Export script</span>
</div>
<p class="guide-needs">Needs REA setup and Google Chrome.</p>
<a class="text-link" href="browser/">Browser observation guide</a>
</div>
</section>
<section class="guide-entry">
<p class="eyebrow">Native binaries</p>
<div>
<h2>Recover a sound-pan calculation</h2>
<p>
Start with a Windows game executable. Inspect instructions, follow
a caller, read numeric constants and check the recovered C.
</p>
<div class="guide-route">
<span>Instructions</span> <b aria-hidden="true">→</b>
<span>Caller</span> <b aria-hidden="true">→</b>
<span>Constants</span> <b aria-hidden="true">→</b>
<span>C function</span>
</div>
<p class="guide-needs">
<strong>Advanced.</strong> Needs REA setup and Ghidra, Hopper or
IDA.
</p>
<a class="text-link" href="native/">Native analysis guide</a>
</div>
</section>
</div>
</main>
<!-- website:footer:start -->
website/public/guides/javascript/index.html
+30 -2
View File
@@ -157,6 +157,29 @@
</ul>
</nav>
<article class="article" aria-label="JavaScript &amp; Electron">
<aside class="before-start" aria-labelledby="javascript-before">
<p class="before-start-title" id="javascript-before">
Before you start
</p>
<ul>
<li>
<strong>Good first guide.</strong> About 10 minutes, no coding
experience needed.
</li>
<li>
<strong>You need</strong> REA connected to an AI app. New to
this? <a href="../setup/">Set up REA step by step</a>.
</li>
<li>
<strong>You don't need</strong> Electron or the app running. REA
reads the app's files.
</li>
</ul>
<p class="caption">
An Electron app is a desktop app built with web technology, like
VS Code, Discord or Notion.
</p>
</aside>
<section class="article-section" id="example">
<h2>Where does “Export notes” go?</h2>
<p>
@@ -236,8 +259,9 @@
</p>
</div>
<p class="caption">
Example prompt. Include the absolute path to the application
folder or <code>app.asar</code>.
Example prompt. Add the full path to the application folder or
<code>app.asar</code> at the end;
<a href="../setup/#ask">here's how to copy a path</a>.
</p>
<p>
REA reads the application files and builds a map of entrypoints,
@@ -371,6 +395,10 @@
<pre><code id="javascript-command">npx -y rea-agents@latest analyze-javascript-application \
/absolute/path/to/notes-example --json</code></pre>
</div>
<p class="caption">
In Windows Command Prompt, put the command on one line and leave
out the <code>\</code> characters.
</p>
<p>
Replace the path with the folder you unzipped. You should find one
IPC channel and one matching handler in
website/public/guides/native/index.html
+33
View File
@@ -156,6 +156,35 @@
</ul>
</nav>
<article class="article" aria-label="Native analysis">
<aside class="before-start" aria-labelledby="native-before">
<p class="before-start-title" id="native-before">
Before you start
</p>
<ul>
<li>
<strong>Advanced guide.</strong> New to REA? Start with the
<a href="../javascript/">JavaScript guide</a>; it needs no extra
tools.
</li>
<li>
<strong>You need</strong> REA connected to an AI app (<a
href="../setup/"
>step-by-step setup</a
>) and a native analysis tool: Ghidra, Hopper or IDA, connected
as in
<a href="../../get-started/#native">Set up native analysis</a>.
</li>
<li>
<strong>To follow along,</strong> use your own copy of the
Windows game DX-Ball 1.07, or any other program you want to
study.
</li>
</ul>
<p class="caption">
A native program is compiled to machine code, such as a Windows
<code>.exe</code> file. Its original source code isn't included.
</p>
</aside>
<section class="article-section" id="example">
<h2>Calculate left/right sound panning</h2>
<p>
@@ -343,6 +372,10 @@ return (DxBallInt)pan;</code></pre>
<pre><code id="native-command">npx -y rea-agents@latest function /absolute/path/to/program main \
--provider ghidra --json</code></pre>
</div>
<p class="caption">
In Windows Command Prompt, put the command on one line and leave
out the <code>\</code> characters.
</p>
<p>
Replace the target path and <code>main</code> with your own
function name or address. Each CLI invocation imports and analyzes