Interactive Command Lab & Visual Diffs

Git Command Explorer & Laboratory

Deep-dive into side-by-side command behaviors, toggleable flag simulations, crisis triage escapes, and under-the-hood 4-zone plumbing.

Interactive Flag Builder & Output Simulator

Toggle flags to see the live assembled syntax and simulated terminal stdout.

Select Flags & Options

Customize how commit history is formatted and filtered.

--onelineOne-line Format

Compress each commit into a single abbreviated line.

safe

--graphASCII Tree Graph

Draw a visual graph of branches and merges.

safe

--allAll Refs

Show commits from all local branches and remote tracking tips.

safe

--statFile Statistics

Display insertion and deletion counts per file.

safe

-n 3Limit to 3

Show only the 3 most recent commits.

safe

1. Assembled Command String

$ git log --oneline --graph

Action: Executes commit inspection with --oneline, --graph formatting.

2. Simulated Execution Output

Live preview

* 7f8a12e (HEAD -> feature/auth) feat(auth): add JWT middleware * 3b91c04 feat(auth): password hashing | * d4e8910 (main) docs: update readme |/ * 81a941f Initial commit

Crisis & Emergency Triage Wizard

"Oh Shit, Git!" Recovery Protocols

Pick a panic scenario to see exact rescue commands, explanations, and recovery output.

Safe (No Data Loss)

Symptom / The Mistake

You ran `git branch -D feature-login` thinking you didn't need it, but had unmerged commits you now need back.

Why This Works (Under The Hood)

Git never deletes commits immediately; commits stay in the reflog database for 30-90 days. We find the lost commit hash in the reflog and attach a new branch pointer to it.

Step-by-Step Rescue Procedure

1Run `git reflog` to find the last commit hash on your deleted branch (e.g. `7f8a12e`).

2Run `git checkout -b feature-recovered 7f8a12e` to create a fresh branch directly at that commit.

3All your deleted code and commits are instantly restored!

Execute Rescue Commands

git reflog
git checkout -b feature-login-recovered <commit-sha>

Simulated Terminal Recovery OutputStatus: Recovered

$ git reflog -n 3
7f8a12e (HEAD -> main) HEAD@{0}: checkout: moving from feature-login to main
7f8a12e HEAD@{1}: commit: feat(login): implement auth form

$ git checkout -b feature-login-recovered 7f8a12e
Switched to a new branch 'feature-login-recovered'

4-Zone Plumbing & Data Flow Inspector

Visualize how Git moves data and pointers across the 4 architectural layers.

SOURCE (FROM)

1. Working Tree

Unstaged Files on Disk

TARGET (TO)

2. Staging Area

The Index (.git/index)

3. Local Repo

HEAD & Commit Store

4. Remote Origin

GitHub / GitLab Hub

Command Operation$ git add <file>

Working Directory ➔ Staging Area (Index)

Creates SHA blob objects in `.git/objects` and registers their paths in `.git/index`.

Pointer Movement (HEAD / Refs)

None. HEAD stays untouched.

git status State Impact (Before vs After)

BEFORE RUNNING

Untracked files:
  (use "git add <file>..." to include)
	src/auth.ts

AFTER RUNNING

Changes to be committed:
  (use "git restore --staged <file>...")
	new file:   src/auth.ts

TELEMETRY MATRIX

Side-by-Side Command Comparer

Three-Way Mergegit merge feature

Combines branches by creating a new merge commit with two parents. Preserves complete historical context.

Key Mechanics:

Preserves true chronological order
Non-destructive to existing SHAs
Clear record of when branches merged

Linear Rebasegit rebase main

Replays branch commits on top of main, creating duplicate commits with new timestamps to produce a clean single line.

Key Mechanics:

Creates clean, linear git log
Easier to bisect and cherry-pick
Eliminates clutter merge commits

Industry Protocol:Use rebase for local feature branches before sharing; use merge when integrating into shared production branches.

Real-World Recipe Scenarios ("I Messed Up, How Do I Fix It?")

3 Interactive Recipes

Mistake Recovery

Committed to Wrong Branch

You accidentally made 2 commits directly on the `main` branch instead of creating a feature branch first.

Step-by-Step Fix:

git branch feature-fix

Creates the new branch at your current commit position.

git reset --hard HEAD~2

Rewinds main back 2 commits to its clean original state.

git switch feature-fix

Switches to the new branch where your commits are safe and sound.

Clean History

Fix Typo in Last Commit

You committed with a typo in the message: "Add usre autentication" and forgot to include `types.ts`.

Step-by-Step Fix:

git add types.ts

Stage any missing files you forgot in the initial commit.

git commit --amend -m "Add user authentication"

Replaces the previous commit with the new message and staged files.

Precision Staging

Stage Only Selected Lines

You modified `app.ts` with both a bug fix AND experimental testing code. You only want to commit the bug fix.

Step-by-Step Fix:

git add -p app.ts

Opens interactive patch staging to select specific code hunks.

git commit -m "fix: resolve bug in app.ts"

Creates a clean commit with only the approved lines.

Quick Glossary Reference

CommitCore

A permanent snapshot of your project at a specific moment in time. Every commit has a unique SHA hash fingerprint.

HEADCore

The "You Are Here" pointer in Git. It tracks which commit or branch your working folder is currently looking at.

Detached HEADCore

A state where your HEAD is pointing directly to a specific commit instead of a named branch. You can explore without changing any branch.

BranchBranching

A lightweight movable label that points to the latest commit on a line of development. Branches let you work on new features without breaking main.

Fast-Forward MergeBranching

A merge where Git simply moves the branch pointer forward because no diverging commits occurred on the destination branch.

Three-Way MergeBranching

A merge between two diverged branches where Git finds the common ancestor and creates a new merge commit combining both histories.