12ee785e5e
* fix(website): keep text inside small screens and tidy small type and spacing From a layout audit of the built pages: - Long terminal prompts and code-header buttons wrap instead of being cut off at 320px (WCAG 1.4.10). - Headings and table cells break long words, so the 1.4.12 text-spacing test no longer widens pages past 320px. - Header and footer links get a 24px minimum height (2.5.8). - Labels that rendered under 12px now render at 12px or more, and inline code never drops under 0.75rem. - The home page's hero and definition rows share one column gap and align on the first baseline, and stacked boxes share one corner size. - Highlight chips get room around the text, and the active run in a step listing is one band instead of a box per line. Colors are unchanged. 🤖 Generated with Claude Code (Sonnet 5.5) 🦊 * feat(website): follow the system dark mode The site was light only, so a reader with a dark system still got a white page. Add one prefers-color-scheme: dark block to the stylesheet that swaps the six color variables to Catppuccin Mocha (MIT) and overrides the fixed colors that would break on a dark page: selection, buttons, tinted highlights, flow nodes and arrows, and a visible border on the agent terminal. Add a dark theme-color tag beside the light one in the page template and the 17 pages, and a Dark column to the style guide's color table. Light colors are unchanged. The SVG figures follow in the next commit; the blog page's inline strokes, the dinosaur game and the social card are left as they are. 🤖 Generated with Claude Code (Sonnet 5.5) 🦊 * feat(website): give the five SVG figures a dark scheme Pages load the figures with <img>, so page CSS cannot reach inside them. Each figure now carries its own @media (prefers-color-scheme: dark) block of attribute-selector overrides that map every light color to a Catppuccin Mocha color, with one shared map across all five. No markup, labels, shapes or positions change, and nothing uses !important. Four figures also paint a mantle canvas so "Open figure" works on its own; analyst-thinking.svg stays transparent, since it sits on the page rather than in a figure box. 🤖 Generated with Claude Code (Sonnet 5.5) 🦊 * chore(website): refresh translation source references The theme-color tags move the page lines that the catalogs cite, so python3 scripts/website.py translations extract rewrites the source references in messages.pot and the 18 PO files. No message text changes. The same run moves the "Main navigation" entry to its new position in each catalog. 🤖 Generated with Claude Code (Sonnet 5.5) 🦊 * fix(website): keep inline step highlights inline The full-width band for the active step now applies only to code-step blocks. The inline parameter highlights in the dx-ball and th04 signatures stay inline again. 🤖 Generated with Claude Code (Opus 5.5) 🦊 * test(website): check every page offers light and dark theme colors Each authored reading page, and its built copy in every language, must carry one theme-color tag for light and one for dark. The stylesheet must keep its dark color scheme block. On the commit before dark mode, this test fails on every page. 🤖 Generated with Claude Code (Opus 5.5) 🦊 * fix(website): draw the dinosaur game in the page colors In dark mode the game box turned dark, but the game still drew with its light colors, so the dinosaur, cacti and text fell to about 2:1 contrast. The canvas now reads five colors from CSS variables on .dino-stage. Light values are the old ones, so light mode draws the same pixels. Dark values are Catppuccin Mocha: 8.3:1 for the dinosaur, 7.9:1 for cacti and text, 7.6:1 for the crash color. The moved lines in dino-demo.js shift the translation catalog references, so the catalogs are refreshed too (reference comments only). 🤖 Generated with Claude Code (Opus 5.5) 🦊 * fix(website): recolor the Touhou flywheel arrows in dark mode The inline flywheel SVG on the Touhou article hard-codes its stroke colors, so on the dark page its connectors fell to about 2:1. Two dark-only rules map those strokes to the page accent and muted colors (7.8:1 and 7.4:1). Light mode is unchanged. 🤖 Generated with Claude Code (Opus 5.5) 🦊 * fix(website): redraw the dinosaur game when the system theme changes The canvas reads its colors only when it draws, so an idle, paused or crashed game kept the old palette after a theme switch. Each demo now redraws on a prefers-color-scheme change. The added lines shift the translation catalog references, so the catalogs are refreshed too (reference comments only). 🤖 Generated with Claude Code (Opus 5.5) 🦊 --------- Co-authored-by: Claude Sonnet 5.5 <sonnet@cassie-pc> Co-authored-by: Claude Opus 5.5 <opus@cassie-pc>
1188 lines
50 KiB
HTML
1188 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>REA — Reverse Engineering for Your Coding Agent</title>
|
||
<meta
|
||
name="description"
|
||
content="Reverse engineer apps, binaries and browser behavior with your coding agent. Follow clear guides and try interactive examples with REA."
|
||
/>
|
||
<!-- website:sharing:start -->
|
||
<!-- prettier-ignore -->
|
||
<link rel="canonical" href="https://rea.tools/" />
|
||
<!-- website:languages:start -->
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="en" href="https://rea.tools/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="zh-CN" href="https://rea.tools/zh-CN/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="zh-TW" href="https://rea.tools/zh-TW/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="ja" href="https://rea.tools/ja/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="ko" href="https://rea.tools/ko/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="tr" href="https://rea.tools/tr/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="ru" href="https://rea.tools/ru/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="vi" href="https://rea.tools/vi/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="th" href="https://rea.tools/th/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="de" href="https://rea.tools/de/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="es" href="https://rea.tools/es/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="fr" href="https://rea.tools/fr/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="uk" href="https://rea.tools/uk/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="pl" href="https://rea.tools/pl/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="pt-BR" href="https://rea.tools/pt-BR/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="ar" href="https://rea.tools/ar/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="fa" href="https://rea.tools/fa/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="id" href="https://rea.tools/id/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="it" href="https://rea.tools/it/" />
|
||
<!-- prettier-ignore -->
|
||
<link rel="alternate" hreflang="x-default" href="https://rea.tools/" />
|
||
<!-- website:languages:end -->
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:type" content="website" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:site_name" content="REA" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:title" content="REA — Reverse Engineering for Your Coding Agent" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:description" content="Reverse engineer apps, binaries and browser behavior with your coding agent. Follow clear guides and try interactive examples with REA." />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:url" content="https://rea.tools/" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:image" content="https://rea.tools/assets/social-card.png" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:image:type" content="image/png" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:image:width" content="1200" />
|
||
<!-- prettier-ignore -->
|
||
<meta property="og:image:height" content="630" />
|
||
<!-- prettier-ignore -->
|
||
<meta
|
||
property="og:image:alt"
|
||
content="REA — Find out how software works. Reverse engineering with your coding agent."
|
||
/>
|
||
<!-- prettier-ignore -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<!-- prettier-ignore -->
|
||
<meta name="twitter:title" content="REA — Reverse Engineering for Your Coding Agent" />
|
||
<!-- prettier-ignore -->
|
||
<meta name="twitter:description" content="Reverse engineer apps, binaries and browser behavior with your coding agent. Follow clear guides and try interactive examples with REA." />
|
||
<!-- prettier-ignore -->
|
||
<meta name="twitter:image" content="https://rea.tools/assets/social-card.png" />
|
||
<!-- prettier-ignore -->
|
||
<meta
|
||
name="twitter:image:alt"
|
||
content="REA — Find out how software works. Reverse engineering with your coding agent."
|
||
/>
|
||
<!-- website:sharing:end -->
|
||
<meta
|
||
name="theme-color"
|
||
content="#ffffff"
|
||
media="(prefers-color-scheme: light)"
|
||
/>
|
||
<meta
|
||
name="theme-color"
|
||
content="#1e1e2e"
|
||
media="(prefers-color-scheme: dark)"
|
||
/>
|
||
<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/home.js"></script>
|
||
<script type="module" src="assets/dino-demo.js"></script>
|
||
</head>
|
||
<body class="home-page" id="top">
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
<!-- website:header:start -->
|
||
<!-- prettier-ignore -->
|
||
<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" data-i18n-skip>Reverse Engineer Anything</span></a
|
||
>
|
||
<nav class="navigation" aria-label="Main navigation">
|
||
<a href="./showcase/">Showcases</a>
|
||
<a href="./blog/">Blog</a>
|
||
<a href="./get-started/" class="nav-start">Get started</a>
|
||
<a href="./guides/">Guides</a>
|
||
<a href="./faq/">FAQ</a>
|
||
</nav>
|
||
<div class="header-social">
|
||
<details class="language-picker" data-i18n-skip><summary><span aria-hidden="true">文 / A</span> <span>English</span></summary><nav aria-label="English"><a href="./" lang="en" dir="ltr" data-language="en" aria-current="true">English</a><a href="./zh-CN/" lang="zh-CN" dir="ltr" data-language="zh-CN">简体中文</a><a href="./zh-TW/" lang="zh-TW" dir="ltr" data-language="zh-TW">繁體中文</a><a href="./ja/" lang="ja" dir="ltr" data-language="ja">日本語</a><a href="./ko/" lang="ko" dir="ltr" data-language="ko">한국어</a><a href="./tr/" lang="tr" dir="ltr" data-language="tr">Türkçe</a><a href="./ru/" lang="ru" dir="ltr" data-language="ru">Русский</a><a href="./vi/" lang="vi" dir="ltr" data-language="vi">Tiếng Việt</a><a href="./th/" lang="th" dir="ltr" data-language="th">ไทย</a><a href="./de/" lang="de" dir="ltr" data-language="de">Deutsch</a><a href="./es/" lang="es" dir="ltr" data-language="es">Español</a><a href="./fr/" lang="fr" dir="ltr" data-language="fr">Français</a><a href="./uk/" lang="uk" dir="ltr" data-language="uk">Українська</a><a href="./pl/" lang="pl" dir="ltr" data-language="pl">Polski</a><a href="./pt-BR/" lang="pt-BR" dir="ltr" data-language="pt-BR">Português (Brasil)</a><a href="./ar/" lang="ar" dir="rtl" data-language="ar">العربية</a><a href="./fa/" lang="fa" dir="rtl" data-language="fa">فارسی</a><a href="./id/" lang="id" dir="ltr" data-language="id">Bahasa Indonesia</a><a href="./it/" lang="it" dir="ltr" data-language="it">Italiano</a></nav></details>
|
||
<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>
|
||
<a
|
||
class="nav-discord"
|
||
href="https://discord.gg/GkcryMnJDM"
|
||
aria-label="Join REA on Discord"
|
||
title="Join REA on Discord"
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286ZM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189Zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<a
|
||
class="nav-x"
|
||
href="https://x.com/reatools"
|
||
aria-label="Follow REA on X"
|
||
title="Follow REA on X"
|
||
>
|
||
<svg
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- website:header:end -->
|
||
<details class="home-page-nav" data-home-nav open>
|
||
<summary class="container">
|
||
<span>On this page</span>
|
||
<span class="home-nav-current" data-home-nav-current aria-hidden="true"
|
||
>Set up REA</span
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
|
||
<path d="m2 4 4 4 4-4" fill="none" stroke="currentColor" />
|
||
</svg>
|
||
</summary>
|
||
<nav class="home-nav-links" aria-label="On this page">
|
||
<div class="container">
|
||
<p class="home-nav-title">On this page</p>
|
||
<ul>
|
||
<li><a href="#setup" aria-current="location">Set up REA</a></li>
|
||
<li><a href="#what-is-re">What is RE?</a></li>
|
||
<li><a href="#how-rea-helps">How REA helps</a></li>
|
||
<li><a href="#dinosaur">Dinosaur game</a></li>
|
||
<li><a href="#calculator">Calculator</a></li>
|
||
<li><a href="#try-rea">Try REA</a></li>
|
||
<li><a href="#analyze">Go deeper</a></li>
|
||
<li><a href="#questions">Help & feedback</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</details>
|
||
<main id="main">
|
||
<section class="container hero home-hero" id="setup">
|
||
<div class="home-start-grid">
|
||
<div>
|
||
<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 REA works ↓</a>
|
||
<a class="button secondary" href="get-started/">Setup guide</a>
|
||
<a class="text-link" href="showcase/">Showcases →</a>
|
||
</div>
|
||
<p class="home-expert-shortcut">
|
||
Already know RE?
|
||
<a href="#analysis-guides">Skip to analysis guides →</a>
|
||
</p>
|
||
<p class="home-expert-shortcut">
|
||
Want to go deeper?
|
||
<a href="blog/">Read the Blog →</a>
|
||
</p>
|
||
</div>
|
||
<div class="home-setup">
|
||
<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"
|
||
><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
|
||
<span translate="no">npx rea-agents@latest setup</span>. 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 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>
|
||
<p class="caption">
|
||
Approve the setup plan, then restart your agent.
|
||
</p>
|
||
<p class="home-expert-shortcut">
|
||
First time, or missing <span translate="no">Node.js</span> or a
|
||
coding agent?
|
||
<a href="get-started/">Follow the step-by-step setup guide →</a>
|
||
</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
|
||
<strong>examining the program itself.</strong>
|
||
</p>
|
||
</div>
|
||
<p class="home-purpose">
|
||
The goal: understand a feature well enough to
|
||
<mark class="prose-highlight">explain it</mark>,
|
||
<mark class="prose-highlight">change it</mark> or
|
||
<mark class="prose-highlight">rebuild it.</mark>
|
||
</p>
|
||
<p class="comparison-question">
|
||
One question:
|
||
<strong
|
||
>why does Calculator give 220 for
|
||
<span translate="no">200 + 10%</span>?</strong
|
||
>
|
||
</p>
|
||
<figure class="home-role-comparison" id="how-rea-helps">
|
||
<div
|
||
class="manual-investigation step-comparison"
|
||
data-step-comparison
|
||
>
|
||
<p class="comparison-label">
|
||
Before REA · You investigate it
|
||
<strong class="prose-highlight">yourself</strong>
|
||
</p>
|
||
<div
|
||
class="step-selector expert-step-selector"
|
||
role="group"
|
||
aria-label="Follow the manual Calculator analysis"
|
||
>
|
||
<button
|
||
type="button"
|
||
data-select-step="1"
|
||
aria-pressed="true"
|
||
aria-controls="expert-assembly expert-reasoning"
|
||
>
|
||
<span>01</span> Decode branches
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-select-step="2"
|
||
aria-pressed="false"
|
||
aria-controls="expert-assembly expert-reasoning"
|
||
>
|
||
<span>02</span> Trace calls
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-select-step="3"
|
||
aria-pressed="false"
|
||
aria-controls="expert-assembly expert-reasoning"
|
||
>
|
||
<span>03</span> Recover the rule
|
||
</button>
|
||
</div>
|
||
<div class="expert-analysis-grid">
|
||
<details
|
||
class="code-block expert-assembly"
|
||
data-expert-assembly
|
||
open
|
||
>
|
||
<summary class="code-header">
|
||
<span>Original x64 · selected instructions</span>
|
||
<span class="assembly-disclosure" aria-hidden="true"></span>
|
||
</summary>
|
||
<pre><code id="expert-assembly"><span class="code-step is-active" data-step="1">0x180124945: MOV EAX, dword ptr [R13 + 0x18]
|
||
0x180124949: CMP EAX, 0x5c
|
||
0x18012494c: JZ 0x180124aba
|
||
0x180124952: CMP EAX, 0x5b
|
||
0x180124955: JZ 0x180124aba</span>
|
||
<span class="code-step" data-step="2">0x18012495b: MOV EDX, 0x64
|
||
0x180124960: LEA RCX, [RSP + 0x160]
|
||
0x180124968: CALL 0x180122650
|
||
0x18012496e: LEA RDX, [R13 + 0x160]
|
||
0x180124975: LEA RCX, [RSP + 0x78]
|
||
0x18012497a: CALL 0x180109720</span>
|
||
0x18012497f: MOV RSI, RAX
|
||
0x180124982: MOV qword ptr [RSP + 0x28], RAX
|
||
<span class="code-step" data-step="2">0x180124987: LEA RDX, [RSP + 0x160]
|
||
0x18012498f: MOV RCX, RAX
|
||
0x180124992: CALL 0x180123190</span>
|
||
<span class="assembly-omission">; … value-copy instructions omitted …</span>
|
||
<span class="code-step" data-step="3">0x180124a14: MOV RDX, RDI
|
||
0x180124a17: LEA RCX, [RSP + 0xf8]
|
||
0x180124a1f: CALL 0x180109720
|
||
0x180124a24: LEA R8, [RSP + 0x30]
|
||
0x180124a29: MOV RDX, RAX
|
||
0x180124a2c: LEA RCX, [RSP + 0xb8]
|
||
0x180124a34: CALL 0x180123c10</span></code></pre>
|
||
</details>
|
||
<aside
|
||
class="expert-reasoning"
|
||
aria-label="Illustrative expert reasoning"
|
||
>
|
||
<div
|
||
id="expert-reasoning"
|
||
aria-live="polite"
|
||
aria-atomic="true"
|
||
>
|
||
<div class="expert-thought" data-step-note="1">
|
||
<p class="thought-label">01 · Which branch?</p>
|
||
<p>
|
||
“<strong>0x5b? 0x5c?</strong> Two jumps to the same
|
||
place. Which operators are these?”
|
||
</p>
|
||
<p class="expert-task">
|
||
Look up the command IDs, then label the branch.
|
||
</p>
|
||
<dl class="expert-facts">
|
||
<div>
|
||
<dt>0x5b</dt>
|
||
<dd>Divide ÷</dd>
|
||
</div>
|
||
<div>
|
||
<dt>0x5c</dt>
|
||
<dd>Multiply ×</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<div class="expert-thought" data-step-note="2">
|
||
<p class="thought-label">02 · What do the calls do?</p>
|
||
<p>
|
||
“100 is clear. The calls are just addresses.
|
||
<strong>Which one divides? Which value goes in?</strong
|
||
>”
|
||
</p>
|
||
<p class="expert-task">
|
||
Inspect the helpers and trace the stored values.
|
||
</p>
|
||
<dl class="expert-facts">
|
||
<div>
|
||
<dt>0x64</dt>
|
||
<dd>100</dd>
|
||
</div>
|
||
<div>
|
||
<dt>…123190</dt>
|
||
<dd>Divide</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<div class="expert-thought" data-step-note="3">
|
||
<p class="thought-label">03 · What is the rule?</p>
|
||
<p>
|
||
“This path multiplies by the other input. So
|
||
<strong>10% means 10% of 200</strong> after +.”
|
||
</p>
|
||
<p class="expert-task">
|
||
Name the operands and check both operator paths.
|
||
</p>
|
||
<div class="expert-rule">
|
||
<span>200 × 10 / 100</span>
|
||
<strong>20</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img
|
||
class="expert-illustration"
|
||
src="assets/figures/analyst-thinking.svg"
|
||
alt=""
|
||
width="160"
|
||
height="120"
|
||
/>
|
||
<p class="expert-caption">Illustrative expert reasoning</p>
|
||
</aside>
|
||
</div>
|
||
<p class="manual-work-summary">
|
||
<strong
|
||
>You decode the instructions, follow the calls and reconstruct
|
||
the calculation.</strong
|
||
>
|
||
</p>
|
||
</div>
|
||
<div class="agent-investigation" id="ask-your-agent">
|
||
<p class="comparison-label">
|
||
With REA · You ask
|
||
<strong class="prose-highlight">your agent</strong>
|
||
</p>
|
||
<h3 class="agent-one-prompt">One prompt.</h3>
|
||
<p class="agent-intro">
|
||
Ask your agent <strong>in plain English.</strong>
|
||
</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 percentage question"
|
||
>
|
||
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
|
||
<span translate="no">200 + 10%</span> give 220?</span
|
||
><span class="terminal-cursor" aria-hidden="true"></span>
|
||
</p>
|
||
<div class="agent-reply">
|
||
<p class="reply-label">
|
||
Example answer · based on the findings
|
||
</p>
|
||
<p>
|
||
After +, the % button takes
|
||
<strong>a percentage of the first number.</strong>
|
||
</p>
|
||
<div class="agent-percent-rule">
|
||
<code>10% of 200 = 20</code><span aria-hidden="true">↓</span
|
||
><strong>200 + 20 = 220</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<dl class="agent-evidence-roles">
|
||
<div>
|
||
<dt>REA supplies</dt>
|
||
<dd>
|
||
The handler’s instructions, decompiled code and calls.
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Your agent explains</dt>
|
||
<dd>
|
||
Which branch applies, what it calculates and how to rebuild
|
||
it.
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<figcaption>
|
||
Selected assembly from the installed Calculator DLL. The thoughts
|
||
and reply illustrate the findings.
|
||
<a href="#calculator">Continue with the Calculator example ↓</a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="dinosaur">
|
||
<div class="container">
|
||
<p class="home-examples-intro">
|
||
<strong>Let's try two examples.</strong>
|
||
Change a game's speed, then return to Calculator and rebuild its %
|
||
button.
|
||
</p>
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Example 01 · Chrome’s dinosaur game</p>
|
||
<h2>Why does the dinosaur get faster?</h2>
|
||
</div>
|
||
<dl class="case-brief">
|
||
<div>
|
||
<dt>Goal</dt>
|
||
<dd>
|
||
Rebuild the game with
|
||
<mark class="prose-highlight">adjustable speed.</mark>
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Why reverse engineer it?</dt>
|
||
<dd>
|
||
To reproduce its acceleration, we need
|
||
<strong>the rule in the running game</strong>: how fast it
|
||
starts, how much it increases and when it stops.
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
<div class="home-example-grid dino-example-grid">
|
||
<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>
|
||
<div class="rea-finding">
|
||
<p class="finding-label">REA returned</p>
|
||
<p>
|
||
<strong>The script actually running in the page.</strong> The
|
||
agent reads its update function and speed settings, then uses
|
||
that rule in a new game.
|
||
</p>
|
||
</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 <span translate="no">index.js</span> ·
|
||
selected lines</span
|
||
>
|
||
</div>
|
||
<pre><code>if (this.currentSpeed < 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>
|
||
</div>
|
||
<figure class="workflow-figure dino-loop">
|
||
<p class="figure-title">What each part does</p>
|
||
<ol class="flow-steps">
|
||
<li>
|
||
<span class="flow-label">01 · REA</span
|
||
><span class="flow-node">Read the running game’s script</span
|
||
><span class="flow-note"
|
||
>Return its actual code and settings to the agent.</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="flow-label">02 · Your agent</span
|
||
><span class="flow-node">Rebuild the rule, add a control</span
|
||
><span class="flow-note"
|
||
>Use the recovered acceleration in a small game with a speed
|
||
slider.</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="flow-label">03 · You</span
|
||
><span class="flow-node">Change the speed and play</span
|
||
><span class="flow-note"
|
||
>Try the original acceleration, then 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="calculator">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Example 02 · Windows Calculator</p>
|
||
<h2>Rebuild Calculator’s % button.</h2>
|
||
<p class="lede">
|
||
We saw why
|
||
<strong><span translate="no">200 + 10%</span> gives 220.</strong>
|
||
Now let’s recover the rules for both + and ×, and try them.
|
||
</p>
|
||
</div>
|
||
<dl class="case-brief">
|
||
<div>
|
||
<dt>Goal</dt>
|
||
<dd>
|
||
Build a small calculator that handles
|
||
<mark class="prose-highlight">both + and × correctly.</mark>
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Why reverse engineer it?</dt>
|
||
<dd>
|
||
The same button uses
|
||
<strong>different rules after + and ×.</strong> We inspect the
|
||
installed app to find which number the percentage is applied to.
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
<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"
|
||
>
|
||
<span translate="no">200 + 10%</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-percent-operation="multiply"
|
||
aria-pressed="false"
|
||
>
|
||
<span translate="no">200 × 10%</span>
|
||
</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">
|
||
<div class="rea-finding">
|
||
<p class="finding-label">REA returned</p>
|
||
<p>
|
||
<strong
|
||
>One branch divides by 100. The other also multiplies by the
|
||
first number.</strong
|
||
>
|
||
The agent uses both to recreate the % button.
|
||
</p>
|
||
</div>
|
||
<p>
|
||
For this example, <code>previous = 200</code> and
|
||
<code>current = 10</code>.
|
||
</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
|
||
>Example prompt · Rebuild the % button</span
|
||
>
|
||
<button
|
||
class="copy-button"
|
||
type="button"
|
||
data-copy="calculator-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="calculator-analysis-prompt"
|
||
>Use REA to inspect Windows Calculator’s % button. Recover
|
||
the rules after + and ×, then build a small calculator that
|
||
uses both.</span
|
||
><span class="terminal-cursor" aria-hidden="true"></span>
|
||
</p>
|
||
</div>
|
||
<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>With +</dt>
|
||
<dd>
|
||
<strong>Take 10% of the first number.</strong
|
||
><code>10% of 200 = 20 → 200 + 20 = 220</code>
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>With ×</dt>
|
||
<dd>
|
||
<strong>Turn 10% into 0.1.</strong
|
||
><code>200 × 0.1 = 20</code>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<figure class="workflow-figure calculator-trace">
|
||
<p class="figure-title">
|
||
From the installed app to a working % button
|
||
</p>
|
||
<ol class="flow-steps">
|
||
<li>
|
||
<span class="flow-label"
|
||
>01 · REA reads <span translate="no">calc.exe</span></span
|
||
><span class="flow-node">It launches the Calculator app</span
|
||
><span class="flow-note"
|
||
>The code opens <code>ms-calculator:</code>. The agent then
|
||
selects the installed app’s library.</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="flow-label">02 · REA reads the library</span
|
||
><span class="flow-node">Return the % handler’s code</span
|
||
><span class="flow-note"
|
||
>The function checks the operator and uses the constant
|
||
<code>100</code>.</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span class="flow-label">03 · Your agent interprets it</span
|
||
><span class="flow-node">Explain and reproduce the rules</span
|
||
><span class="flow-note"
|
||
>Crosscheck the branch with Microsoft’s source, then try + and
|
||
× above.</span
|
||
>
|
||
</li>
|
||
</ol>
|
||
</figure>
|
||
<details class="home-evidence-details">
|
||
<summary>See the real code and how the answer was checked</summary>
|
||
|
||
<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="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" id="analyze">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<h2>Want to go deeper?</h2>
|
||
<p>
|
||
Tell your agent what you want to understand or build. With REA,
|
||
you can work together on anything from
|
||
<strong>cloning this website</strong> to
|
||
<strong>reconstructing a game from its executable.</strong>
|
||
</p>
|
||
</div>
|
||
<div class="code-comparison home-project-prompts">
|
||
<div>
|
||
<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
|
||
>Example prompt · Website
|
||
</span>
|
||
<button
|
||
class="copy-button"
|
||
type="button"
|
||
data-copy="website-project-prompt"
|
||
aria-label="Copy website project prompt"
|
||
>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<p class="terminal-prompt">
|
||
<span class="prompt-symbol" aria-hidden="true">›</span
|
||
><span id="website-project-prompt"
|
||
>Use REA to inspect
|
||
<span translate="no">https://rea.tools/</span>. Clone this
|
||
website for me.</span
|
||
><span class="terminal-cursor" aria-hidden="true"></span>
|
||
</p>
|
||
</div>
|
||
<p class="caption">Yes, this one.</p>
|
||
</div>
|
||
<div>
|
||
<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
|
||
>Example prompt · Game reconstruction
|
||
</span>
|
||
<button
|
||
class="copy-button"
|
||
type="button"
|
||
data-copy="game-project-prompt"
|
||
aria-label="Copy game reconstruction prompt"
|
||
>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<p class="terminal-prompt">
|
||
<span class="prompt-symbol" aria-hidden="true">›</span
|
||
><span id="game-project-prompt"
|
||
>Use REA to reconstruct this game from its executable.
|
||
Recover the gameplay logic in C and test it against the
|
||
original.</span
|
||
><span class="terminal-cursor" aria-hidden="true"></span>
|
||
</p>
|
||
</div>
|
||
<p class="caption">
|
||
<a href="showcase/dx-ball/">See the DX-Ball case study →</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p class="caption">
|
||
For setup and analysis steps, choose your target:
|
||
</p>
|
||
<div class="workflows" id="analysis-guides">
|
||
<div>
|
||
<h3>Native binaries</h3>
|
||
<p>
|
||
Inspect functions, strings, references and call relationships in
|
||
executables and libraries.
|
||
</p>
|
||
<a href="guides/native/">Native analysis guide</a>
|
||
</div>
|
||
<div>
|
||
<h3>JavaScript & Electron</h3>
|
||
<p>
|
||
Map modules, routes, IPC and native dependencies from an
|
||
application folder or ASAR archive.
|
||
</p>
|
||
<a href="guides/javascript/">Application workflows</a>
|
||
</div>
|
||
<div>
|
||
<h3>Browser & runtime activity</h3>
|
||
<p>
|
||
Capture selected browser or process activity, then compare the
|
||
results across runs.
|
||
</p>
|
||
<a href="guides/browser/">Browser observation guide</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="questions">
|
||
<div class="container">
|
||
<h2>Any questions?</h2>
|
||
<p>
|
||
<a href="faq/">Read the FAQ</a>,
|
||
<a href="https://discord.gg/GkcryMnJDM">chat with us on Discord</a>,
|
||
or
|
||
<a href="https://github.com/morluto/rea/issues/new/choose"
|
||
>open a GitHub issue</a
|
||
>
|
||
for bugs and feature requests.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="community">
|
||
<div class="container">
|
||
<h2>Join the community</h2>
|
||
<p>
|
||
Share investigations and get help from other REA users on Discord.
|
||
Follow REA on X for project updates.
|
||
</p>
|
||
<div class="actions">
|
||
<a class="button" href="https://discord.gg/GkcryMnJDM"
|
||
>Join the community</a
|
||
>
|
||
<a class="button secondary" href="https://x.com/reatools"
|
||
>Follow @reatools on X</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- website:footer:start -->
|
||
<!-- prettier-ignore -->
|
||
<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">Join the community</a
|
||
><a href="https://x.com/reatools">Follow us on X</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>
|
||
<!-- website:footer:end -->
|
||
</body>
|
||
</html>
|