diff --git a/website/README.md b/website/README.md index 096f122264..896dac2139 100644 --- a/website/README.md +++ b/website/README.md @@ -25,7 +25,8 @@ Open . 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 diff --git a/website/evidence/dx-ball-sound-pan.md b/website/evidence/dx-ball-sound-pan.md index 60b7e0e61f..ec02d2705e 100644 --- a/website/evidence/dx-ball-sound-pan.md +++ b/website/evidence/dx-ball-sound-pan.md @@ -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 diff --git a/website/evidence/guide-examples.md b/website/evidence/guide-examples.md index 476c0fbd0d..7a66264473 100644 --- a/website/evidence/guide-examples.md +++ b/website/evidence/guide-examples.md @@ -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/`. diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css index 8a21650a89..9a49919cc0 100644 --- a/website/public/assets/styles.css +++ b/website/public/assets/styles.css @@ -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)); diff --git a/website/public/first-investigation/index.html b/website/public/first-investigation/index.html new file mode 100644 index 0000000000..ed687aa70d --- /dev/null +++ b/website/public/first-investigation/index.html @@ -0,0 +1,371 @@ + + + + + + Your first investigation — REA + + + + + + + + + +
+
+ +

Find out where
exported notes go.

+

+ Use REA to inspect a small app, follow its Export notes button and + check one detail yourself. +

+

+ A supplied example · Node.js and npm · Your coding agent +

+
+
+ +
+
+

1. Connect your agent to REA

+

+ Use a coding agent such as Claude Code, Codex or Cursor. You’ll + need Node.js and npm; the + setup guide lists supported versions. +

+
+
+ Your coding agent + +
+

+ 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. +

+
+

Or run this command in your terminal:

+
+ npx rea-agents@latest setup + +
+

+ Review the plan, approve the setup, then restart your agent. + Already connected? Continue below. +

+
+
+

2. Ask where the CSV is written

+

+ The example is a six-file Electron app with an + Export notes button. Your agent can inspect its + code without installing or launching Electron. +

+
+
+ Your coding agent + +
+

+ 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. +

+
+

+ Your agent downloads the files and gives the unpacked folder to + REA for inspection. +

+

+ Download example ZIP +

+

+ If your agent can’t download files, unzip this archive yourself. + Give it the path to the notes-example folder and the + same export question. +

+
+
+

3. Follow the answer back to the code

+

Look for a short explanation with file and line references:

+
+

+ The button sends a notes:export message. The main + process formats the notes as CSV and writes + notes.csv in the user’s Downloads folder. The + columns are id and title. +

+
+
+

From the button to the file writer

+
    +
  1. + Page · renderer.jsExport notesCalls notes.exportCsv(). +
  2. +
  3. + Bridge · preload.jsnotes:exportSends a named message to the main process. +
  4. +
  5. + Handler · main.jsWrite notes.csvCalls the formatter in csv.js and writes the + file. +
  6. +
+
+ REA’s static analysis pairs the message with its handler. The + destination is read from code. +
+
+
+
+ main.js · lines 8–12Source +
+
ipcMain.handle("notes:export", () => {
+  const destination = path.join(app.getPath("downloads"), "notes.csv");
+  writeFileSync(destination, toCsv(notes), "utf8");
+  return destination;
+});
+
+

+ 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. +

+

+ See the full code trace and recorded REA result. +

+
+
+

4. Check a prediction

+

+ A comma separates CSV columns. What happens when a note title + itself contains a comma or quotation marks? +

+
+
+ Your coding agent + +
+

+ 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. +

+
+
+
+ Expected formatter output +
+
id,title
+1,"Hello, ""REA"""
+
+

+ The title stays in one quoted field; each quotation mark is + doubled. This checks the formatter directly with Node.js. +

+
+ Run the check yourself +

+ Open a terminal in the unpacked + notes-example folder: +

+
+
+ Node.js · CSV formatter +
+
node <<'JS'
+const { toCsv } = require('./csv.js');
+process.stdout.write(toCsv([{ id: 1, title: 'Hello, "REA"' }]));
+JS
+
+

+ 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. +

+
+
+
+

5. Ask another question

+

Try a follow-up in the same conversation:

+
+

+ What happens if the file can’t be written? Follow the error back + to the page. +

+
+

+ Or give your agent an app of your own and ask about one button, + file or behavior. +

+ +
+
+
+
+ +

+ Top + + diff --git a/website/public/index.html b/website/public/index.html index e315e63ff2..c04b4c6b25 100644 --- a/website/public/index.html +++ b/website/public/index.html @@ -50,55 +50,249 @@
-
-

Software analysis · CLI & MCP

+
+

Reverse engineering, with your coding agent

Find out how
software works.

- 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.

-
-
-
- Your coding agent +
+ +
+
+
+

What is reverse engineering?

+

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

+
+
+

+ DX-Ball: how does the game place a sound on the left or right? +

+
+
+
+ Original instructions · selected excerpt +
+
MOV EAX, dword ptr [EBP + 0x8]
+MOV dword ptr [EBP + -0xc], EAX
+FILD dword ptr [EBP + -0xc]
+FMUL double ptr [0x00420068]
+FSUB double ptr [0x00420070]
+FMUL double ptr [0x004210a0]
+CALL 0x0041678c
+
+
+
Readable summary · C
+
// x is the horizontal position
+double pan = (double)x;
+pan *= 1.5625;
+pan -= 500.0;
+pan *= pan_scale;
+return (int)pan;
+
+
+
+
+ Left side + + x = 0 → pan = −500 + Sound to the left +
+
+ Center + + x = 320 → pan = 0 + Centered sound +
+
+ Right side + + x = 640 → pan = +500 + Sound to the right +
+
+
+ Examples of the calculation with the recorded initial scale of 1. + The code is a readable summary of the inspected function. +
+
+

+ To explain this, an analyst identifies the input, follows the caller + and reads the values at those addresses. +

+
+
+ +
+
+
+
+

Do I need to read assembly to get started?

+

No.

+

Ask your agent about the behavior you want to understand.

+
+
+
+
+ Example analysis · DX-Ball + +
+

Target · DXBALL.EXE

+

+ Use REA to inspect this DX-Ball executable. How does it + calculate left/right sound panning? Show the relevant + code. +

+
+

+ Agent · explanation from the findings +

+

+ This function converts a brick’s horizontal position into a + left/right sound value. +

+

+ 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. +

+
+
+

+ Example prompt and explanation based on the recorded + investigation. Supply the executable to your agent. +

+
+
+
+

What REA found for the agent

+
    +
  1. + 01 · Inspect the function + An integer input + The instructions read [EBP + 0x8]. The initial + pseudocode had missed this input. +
  2. +
  3. + 02 · Follow the caller + A brick’s screen position + The caller passes 20 + 30 × tile_x, giving the + input its meaning. +
  4. +
  5. + 03 · Read the stored data + The calculation’s constants + Byte reads supply 1.5625, 500.0 and + the initial scale 1.0. +
  6. +
+
+ The agent uses these findings to explain the behavior and write + readable C. +
+
+

+ The reconstruction project checked its maintained C function against + 3,205 original-x86 input cases and all 63 compiled bytes. + See the code and checks. +

+
+
+ +
+
+
+

Your first investigation

+

Try REA on a small app.

+

+ Find out where an app exports its notes, then check how it formats + a title containing commas and quotes. +

+

We provide the example files, a prompt and a result to check.

+ +
+
+

Set up REA with your agent

+
+
+ Your coding agent + +
+

+ 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. +

+
+

Or run this command in your terminal:

+
+ npx rea-agents@latest setup
-

- 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. +

+ Setup shows a plan for approval. Restart your agent after setup.

-

Or run this command in your terminal:

-
- npx rea-agents@latest setup - -
@@ -139,34 +333,6 @@
-
-
-
-
- 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. -
-
- REA connects your agent to analysis tools. The findings guide the - next question, explanation or implementation. - Open figure -
-
-
-
-
@@ -177,12 +343,6 @@ in C, using REA to inspect the executable and independent tests to check the recovered behavior.

-

- 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. -

Follow the investigation