<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>git-time-machine - Visual Git reflog recovery TUI</title>
<meta name="description" content="Visual Git reflog TUI for browsing reachable local history, previewing changes, and restoring deliberately.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
<div class="container">
<div class="hero-emoji">🕰️</div>
<h1>git-time-machine</h1>
<p class="tagline">Browse Git reflog visually</p>
<p class="subtitle">Preview reachable local history before you restore.</p>
<div class="cta-buttons">
<button class="btn-primary" onclick="copyCommand()">
<span class="btn-text">cargo install git-time-machine</span>
<span class="btn-icon">📋</span>
</button>
<a href="https://github.com/dinakars777/git-time-machine" class="btn-secondary" target="_blank">
⭐ Star on GitHub
</a>
</div>
<div class="demo-container">
<img src="demo.gif" alt="git-time-machine demo" class="demo-gif">
<p class="demo-caption">Navigate local reflog entries, preview changes, and restore deliberately.</p>
</div>
</div>
</section>
<section class="problem">
<div class="container">
<h2>You need to recover a known-good state</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">🔥</div>
<h3>Moved HEAD</h3>
<p>Need the previous local state</p>
</div>
<div class="problem-card">
<div class="problem-icon">💥</div>
<h3>git reset --hard</h3>
<p>And need to inspect what came before</p>
</div>
<div class="problem-card">
<div class="problem-icon">🗑️</div>
<h3>Deleted a branch</h3>
<p>Need the last reachable tip</p>
</div>
<div class="problem-card">
<div class="problem-icon">🤦</div>
<h3>Rebased wrong</h3>
<p>Need to compare recovery points</p>
</div>
</div>
<div class="current-solution">
<h3>Current solution:</h3>
<div class="terminal-bad">
<div class="terminal-line">$ git reflog</div>
<div class="terminal-output">
<div>a1b2c3d HEAD@{0}: commit: Fix bug</div>
<div>e4f5g6h HEAD@{1}: reset: moving to HEAD~1</div>
<div>i7j8k9l HEAD@{2}: commit: Add feature</div>
<div>m0n1o2p HEAD@{3}: checkout: moving from main to feature</div>
<div>q3r4s5t HEAD@{4}: commit: Update docs</div>
<div class="dim">... 45 more cryptic entries ...</div>
</div>
<div class="terminal-line">$ # Which hash do I need? 🤷</div>
</div>
<p class="pain-point">Read through reflog text, compare hashes manually, and make sure the target is still available locally.</p>
</div>
</div>
</section>
<section class="solution">
<div class="container">
<h2>Better: git-time-machine</h2>
<div class="comparison">
<div class="comparison-card bad">
<h3>❌ With git reflog</h3>
<ol>
<li>Read through cryptic hashes</li>
<li>Guess which one is "before you broke it"</li>
<li>Manually <code>git reset --hard <hash></code></li>
<li>Hope you picked the right one</li>
<li>Repeat if wrong</li>
</ol>
<p class="time">Manual and easy to misread</p>
</div>
<div class="comparison-card good">
<h3>✅ With git-time-machine</h3>
<ol>
<li>Run <code>git-time-machine</code></li>
<li>Scroll through visual timeline</li>
<li>Preview the diff</li>
<li>Choose hard reset, soft reset, or detached checkout</li>
<li>List backup refs later if you used hard reset</li>
</ol>
<p class="time">Visual and deliberate</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2>Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Visual Timeline</h3>
<p>See recent reflog entries at a glance</p>
</div>
<div class="feature-card">
<div class="feature-icon">⏰</div>
<h3>Relative Timestamps</h3>
<p>"5m ago", "2h ago", "yesterday"</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Diff Preview</h3>
<p>Inspect the selected state before restoring</p>
</div>
<div class="feature-card">
<div class="feature-icon">🛟</div>
<h3>Backup Ref Recovery</h3>
<p>List hard-reset backup refs and exact recovery commands</p>
</div>
<div class="feature-card">
<div class="feature-icon">⌨️</div>
<h3>Search and JSON</h3>
<p>Filter reflog messages or export entries for automation</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Beautiful TUI</h3>
<p>Built with Ratatui</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Lightning Fast</h3>
<p>Written in Rust</p>
</div>
</div>
</div>
</section>
<section class="use-cases">
<div class="container">
<h2>Real-World Scenarios</h2>
<div class="use-case">
<h3>Scenario 1: "I Don't Know What I Did, But It's Broken"</h3>
<p>You ran a bunch of git commands, something broke, you don't remember the exact sequence.</p>
<div class="scenario-solution">
<div class="step">Run <code>git-time-machine</code></div>
<div class="arrow">→</div>
<div class="step">Visually scan the timeline</div>
<div class="arrow">→</div>
<div class="step">See "2h ago - before I started"</div>
<div class="arrow">→</div>
<div class="step">Pick hard reset, soft reset, or detached checkout</div>
</div>
</div>
<div class="use-case">
<h3>Scenario 2: Recovering Lost Work After Complex Operations</h3>
<p>You did: rebase, merge, reset, amend, rebase again. Now you need code from 3 operations ago.</p>
<div class="scenario-solution">
<div class="step">Scroll through visual timeline</div>
<div class="arrow">→</div>
<div class="step">Find "15m ago", "1h ago"</div>
<div class="arrow">→</div>
<div class="step">Preview, then choose a restore mode</div>
</div>
</div>
<div class="use-case">
<h3>Scenario 3: Deleted Branch (Weeks Ago)</h3>
<p>Deleted a branch 2 weeks ago, need it back but don't remember the commit hash.</p>
<div class="scenario-solution">
<div class="step"><code>git-time-machine --all</code></div>
<div class="arrow">→</div>
<div class="step">Scroll back through weeks</div>
<div class="arrow">→</div>
<div class="step">Find "checkout: moving from feature-branch"</div>
<div class="arrow">→</div>
<div class="step">Recreate the branch manually</div>
</div>
</div>
</div>
</section>
<section class="installation">
<div class="container">
<h2>Installation</h2>
<div class="install-options">
<div class="install-card">
<h3>Cargo (Recommended)</h3>
<div class="code-block">
<code>cargo install git-time-machine</code>
<button class="copy-btn" onclick="copyToClipboard('cargo install git-time-machine')">📋</button>
</div>
</div>
<div class="install-card">
<h3>From Source</h3>
<div class="code-block">
<code>git clone https://github.com/dinakars777/git-time-machine && cd git-time-machine && cargo install --path .</code>
<button class="copy-btn" onclick="copyToClipboard('git clone https://github.com/dinakars777/git-time-machine && cd git-time-machine && cargo install --path .')">📋</button>
</div>
</div>
</div>
<div class="usage-section">
<h3>Usage</h3>
<div class="code-block large">
<code># Launch in any git repository<br>git-time-machine<br><br># Show up to 1000 reflog entries (default: last 50)<br>git-time-machine --all<br><br># Export reflog entries as JSON<br>git-time-machine --export-json<br><br># List hard-reset backup refs and recovery commands<br>git-time-machine --list-backups</code>
</div>
<h3>Controls</h3>
<table class="controls-table">
<thead>
<tr>
<th>Key</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>↑</kbd> / <kbd>k</kbd></td>
<td>Move up</td>
</tr>
<tr>
<td><kbd>↓</kbd> / <kbd>j</kbd></td>
<td>Move down</td>
</tr>
<tr>
<td><kbd>Enter</kbd></td>
<td>Hard reset after creating a backup ref</td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td>Soft reset to selected state</td>
</tr>
<tr>
<td><kbd>c</kbd></td>
<td>Checkout selected state in detached HEAD</td>
</tr>
<tr>
<td><kbd>q</kbd> / <kbd>Esc</kbd></td>
<td>Quit</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Stop guessing at reflog hashes</h2>
<p class="cta-subtext">Just Git under the hood, with a visual recovery workflow.</p>
<div class="cta-buttons">
<button class="btn-primary large" onclick="copyCommand()">
<span class="btn-text">cargo install git-time-machine</span>
<span class="btn-icon">📋</span>
</button>
</div>
</div>
</section>
<footer>
<div class="container">
<p>Built with ❤️ and Rust by <a href="https://github.com/dinakars777" target="_blank">@dinakars777</a></p>
<div class="footer-links">
<a href="https://github.com/dinakars777/git-time-machine" target="_blank">GitHub</a>
<a href="https://crates.io/crates/git-time-machine" target="_blank">crates.io</a>
<a href="https://github.com/dinakars777/git-time-machine/issues" target="_blank">Issues</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
