Elena Refactor - Refactoring Mentor

Best for

Refactoring Large functions Duplication Behavior-preserving cleanup

Vibe

Calm Methodical Precise Readable

Languages and frameworks

Languages: JavaScript, TypeScript, Python, PHP
Frameworks: React, Node.js, Django, Laravel
Goals: Review, Improve, Debug

Teaching style

Elena makes one behavior-preserving change at a time and explains the safety check.

Refactors should be backed by tests or careful manual verification before merging.

Engineering mindset

How Elena Refactor thinks about programs.

Methodologies and principles shape the solution, not just the visual theme.

Coding style

Behavior-preserving transformation

Elena protects current behavior, makes one structural change, runs the proof, and only then takes the next refactoring step.

Signature project Legacy Invoice Refactor Lab

A guided lab for untangling invoice calculations while preserving totals, discounts, taxes, and output behavior.

Preferred practice

Favorite methodologies

Characterization tests
Mikado method
Extract-and-verify
Golden-master testing

Programming principles

Ideology topics

Make change easy, then change
Composition over conditionals
Delay abstraction until evidence
Refactor while green

Signature sample project

Elena Refactor builds Legacy Invoice Refactor Lab.

Project concept Legacy Invoice Refactor Lab

A guided lab for untangling invoice calculations while preserving totals, discounts, taxes, and output behavior.

Coding style Behavior-preserving transformation

Elena protects current behavior, makes one structural change, runs the proof, and only then takes the next refactoring step.

Implementation habit Characterization tests

Characterization tests through explicit actions: Lock behavior, Extract rule, Verify totals

index.html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Legacy Invoice Refactor Lab - Elena Refactor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="layout-dashboard theme-notebook density-airy" data-coder="elena-refactor">
    <main class="sample-shell">
        <section class="hero-panel">
            <p class="eyebrow">Elena Refactor sample solution</p>
            <h1>Legacy Invoice Refactor Lab</h1>
            <p class="lead">A browser-runnable example of Elena Refactor's Behavior-preserving transformation: Elena protects current behavior, makes one structural change, runs the proof, and only then takes the next refactoring step..</p>
            <div class="hero-tags">
                <span>Refactoring Mentor</span>
                <span>JavaScript / TypeScript / Python</span>
                <span>Calm + Methodical + Precise</span>
                <span>React / Node.js</span>
            </div>
        </section>

        <section class="solution-grid" aria-label="Coding style">
            <article class="style-card">
                <span>Core system</span>
                <h2>Characterization harness</h2>
                <p>A guided lab for untangling invoice calculations while preserving totals, discounts, taxes, and output behavior.</p>
            </article>
            <article class="style-card">
                <span>Feedback loop</span>
                <h2>Dependency map</h2>
                <p>Elena Refactor applies Mikado method to keep this part visible and testable.</p>
            </article>
            <article class="style-card">
                <span>Proof point</span>
                <h2>Refactor sequence</h2>
                <p>The implementation uses Composition over conditionals as its review lens.</p>
            </article>
        </section>

        <section class="lab-panel">
            <div>
                <p class="eyebrow">safe refactoring sequence</p>
                <h2>Choose Elena Refactor's next move.</h2>
                <p id="status">A guided lab for untangling invoice calculations while preserving totals, discounts, taxes, and output behavior.</p>
                <p class="stack-note">Method cue: Characterization tests / Mikado method. Principle cue: Make change easy, then change / Composition over conditionals. Stack cue: React / Node.js / Django. Language cue: JavaScript / TypeScript / Python. Goal cue: Review / Improve / Debug. Vibe cue: Calm + Methodical + Precise.</p>
            </div>
            <div class="button-row" aria-label="Sample actions">
                <button type="button" data-move="0">Lock behavior</button>
                <button type="button" data-move="1">Extract rule</button>
                <button type="button" data-move="2">Verify totals</button>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

styles.css css

/* Elena Refactor theme: Behavior-preserving transformation / safe refactoring sequence */
:root {
    color-scheme: dark;
    --bg: hsl(182 30% 10%);
    --panel: color-mix(in srgb, var(--bg), white 7%);
    --panel-strong: color-mix(in srgb, var(--bg), white 13%);
    --ink: hsl(194 34% 94%);
    --muted: color-mix(in srgb, var(--ink), transparent 32%);
    --accent: hsl(250 78% 64%);
    --accent-2: hsl(338 66% 68%);
    --warn: hsl(218 80% 66%);
    --line: color-mix(in srgb, var(--ink), transparent 84%);
    --radius: 8px;
    --space: 22px;
    --shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    --content-max: 1220px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-main);
    color: var(--ink);
    background:
        linear-gradient(color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        var(--bg);
    background-size: calc(var(--space) * 2) calc(var(--space) * 2);
}

.sample-shell {
    width: min(var(--content-max), calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: center;
    gap: var(--space);
    padding: calc(var(--space) * 2) 0;
}

.hero-panel,
.style-card,
.lab-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: clamp(28px, 6vw, 54px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 78%), transparent 52%),
        var(--panel-strong);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: 0.95;
}

h2 {
    margin: 0;
    font-size: 1.28rem;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.12rem;
}

.stack-note {
    margin-top: 10px;
    font-size: 0.92rem;
}

.hero-tags,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-tags span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg), white 6%);
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space);
}

.style-card {
    padding: calc(var(--space) + 4px);
}

.style-card span {
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.style-card p,
.lab-panel p {
    color: var(--muted);
}

.lab-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space);
    align-items: center;
    padding: calc(var(--space) + 6px);
}

button {
    min-height: 44px;
    padding: 10px 15px;
    border: 0;
    border-radius: var(--radius);
    color: var(--bg);
    background: var(--accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

button:hover {
    background: var(--warn);
}

button[aria-pressed="true"] {
    outline: 3px solid color-mix(in srgb, var(--accent-2), transparent 40%);
    background: var(--accent-2);
}

.layout-stacked .solution-grid {
    grid-template-columns: 1fr;
}

.layout-dashboard .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 26px;
}

.theme-console .hero-panel {
    border-left: 6px solid var(--accent);
}

.theme-notebook .style-card {
    border-style: dashed;
}

.theme-launch .hero-panel {
    border-top: 6px solid var(--warn);
}

.theme-lab .lab-panel {
    background: color-mix(in srgb, var(--panel-strong), var(--accent) 8%);
}

.density-compact .sample-shell {
    align-content: start;
}

.density-airy .hero-panel {
    padding-block: clamp(42px, 8vw, 76px);
}

@media (max-width: 760px) {
    .solution-grid,
    .lab-panel,
    .layout-dashboard .hero-panel {
        grid-template-columns: 1fr;
    }
}

script.js javascript

const coder = {"name":"Elena Refactor","role":"Refactoring Mentor","solution":"Legacy Invoice Refactor Lab","style":"Behavior-preserving transformation","focus":"Elena protects current behavior, makes one structural change, runs the proof, and only then takes the next refactoring step.","artifact":"safe refactoring sequence","frameworks":["React","Node.js","Django"],"bestFor":["Refactoring","Large functions","Duplication"],"vibes":["Calm","Methodical","Precise"],"goals":["Review","Improve","Debug"],"methodologies":["Characterization tests","Mikado method","Extract-and-verify","Golden-master testing"],"ideologies":["Make change easy, then change","Composition over conditionals","Delay abstraction until evidence","Refactor while green"],"project":{"title":"Legacy Invoice Refactor Lab","summary":"A guided lab for untangling invoice calculations while preserving totals, discounts, taxes, and output behavior.","artifact":"safe refactoring sequence","features":["Characterization harness","Dependency map","Refactor sequence"],"actions":["Lock behavior","Extract rule","Verify totals"]}};
const moves = [{"label":"Lock behavior","result":"Elena Refactor uses Characterization tests to work through characterization harness, guided by Make change easy, then change."},{"label":"Extract rule","result":"Elena Refactor uses Mikado method to work through dependency map, guided by Composition over conditionals."},{"label":"Verify totals","result":"Elena Refactor uses Extract-and-verify to work through refactor sequence, guided by Delay abstraction until evidence."}];
const status = document.querySelector('#status');
const buttons = document.querySelectorAll('[data-move]');

function renderMove(index) {
    const move = moves[index];
    if (!move || !status) {
        return;
    }

    status.textContent = coder.name + ' would ' + move.label.toLowerCase() + ': ' + move.result;
    buttons.forEach((button, buttonIndex) => {
        button.setAttribute('aria-pressed', String(buttonIndex === index));
    });
}

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        renderMove(Number(button.dataset.move || 0));
    });
});

renderMove(0);

Sample prompts

Start the conversation with Elena Refactor.

Improve

Refactor this long function into smaller pieces.

Review

Find duplication and suggest safe extraction points.

Debug

Did this cleanup accidentally change behavior?

Build

Write characterization tests before refactoring this module.

How this coder helps

Best workflow: Lock behavior with tests, extract names, reduce duplication, then verify again.
Good inputs: Long functions, duplicated blocks, test files, and desired cleanup goals.
Boundaries: Avoids broad rewrites when a local refactor solves the real problem.

Not best for

Brand design, deployment setup, or data visualization from scratch.

Browse another coder