Commit the selected hunk, not the whole file

• Choose file, hunk or line scope for a specific commit.
• Select both removed/added lines for a replacement.
• Read index and working contents independently.
• Retain the uncommitted radius edit for lesson 8.

You start where lesson 6 ended: the original main has two commits, the runnable lesson 6 inputs and no remote. Working/index clean; ignored dist can exist. The video was recorded with Git 2.52.0 and GitTree 2.0 on Ubuntu 24.04: both edits were saved in GitTree's own editor, the hunk and the lines were staged and the commit was made in the app, and the terminal checks ran against what the app created or against separate copies. The hunk and line controls were operated for real; the native patch route ran in a separate copy. Nothing was run on macOS or Windows, and Ubuntu is the only Linux system recorded. GitTree's source Git minimum is 2.39.0. Once you are signed in, local work is on the Free plan.

A file can contain several independent decisions. A hunk groups nearby textual changes, not necessarily one business intention. Selecting a replacement requires the removed old line and the added new line; choosing only the addition can create a different patch.

The index describes a full next tree, even when you select only a few changed lines. Here HEAD has CSS-01, index becomes CSS-02-INDEX, and working CSS stays CSS-02-WORKING. Saving edits changes working bytes; Stage Lines changes the index; the normal commit moves main but does not overwrite the remaining radius. No remote refs change. Native partial staging and patch application use the same content distinctions.

Replace index.html with HTML-02-HEADLINE and working styles.css with CSS-02-WORKING. CSS-02-INDEX below is the target index, not a body to overwrite the working file with.

index.html — HTML-02-HEADLINE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitTree Features — course demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a href="#main">GitTree Features</a>
  </header>
  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <p class="eyebrow">GitTree Learn demo project</p>
      <h1 id="hero-title">See your work clearly.</h1>
      <p id="hero-copy">Choose one change, then check what Git saved.</p>
    </section>
    <section class="features" aria-labelledby="features-title">
      <h2 id="features-title">Follow your work</h2>
      <div class="cards">
        <article class="feature-card">
          <h3>History</h3>
          <p>Read commits and branches together.</p>
        </article>
        <article class="feature-card">
          <h3>Changes</h3>
          <p>Review the exact content selected for a commit.</p>
        </article>
        <article class="feature-card">
          <h3>Recovery</h3>
          <p>Inspect the scope of a recovery point before using it.</p>
        </article>
      </div>
    </section>
  </main>
  <footer><p>Built by a fictional team for GitTree Learn.</p></footer>
  <script type="module" src="site.js"></script>
</body>
</html>

styles.css — CSS-02-INDEX

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

styles.css — CSS-02-WORKING

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

1. In Show Files (Command/Ctrl+Shift+E), focus each existing file and Enter; paste its stated working body, then Save or Command/Ctrl+S. Do not paste the index target over working CSS.
2. Back to Graph → Command Palette… (Command/Ctrl+Shift+P) → Show Working Changes. Click index.html under Unstaged Files.
3. Choose Hunk in Diff view (palette Show Diff as Hunks). At the headline replacement choose Stage Hunk. Expect only that complete headline change in Staged Files. Whole-file Stage File would be equivalent only because this HTML has no other edit.
4. Click styles.css under Unstaged Files. Keep Ignore whitespace off. Find the max-width replacement at line 41: 44rem → 48rem.
5. Select the checkbox for the removed max-width: 44rem; line and the added max-width: 48rem; line. Their accessible names include sign, line number and text. Activate Stage Lines in the selection toolbar. Do not choose the radius pair at line 59.
6. Alternative in a separate replay: Stage Hunk on only the max-width hunk gives the same target here. Split/palette Show Diff Side by Side puts removed/added cells on their proper old/new sides; both have their own pick controls. Return to Hunk for the main take.
7. Click staged styles.css: only max-width should change. Click unstaged styles.css: only radius remains. Use Clear to clear a selection, not to discard content. If you staged too much, select the relevant staged hunk and Unstage Hunk or choose both staged replacement lines and Unstage Lines, then recheck.
8. Enter Summary feat: refine the hero and card spacing, ordinary options all off, and Commit Changes to 2 Files (or Command/Ctrl+Enter once). Verify the partial commit and retain the unstaged radius.
9. Do not use Stage All Changes, Discard, or make a cleanup commit. lesson 8 deliberately owns the radius commit.

A stale selection is bound to the diff fingerprint; reload after any external edit instead of applying a patch meant for old bytes. If whitespace hiding removes line-pick eligibility, read the reason and restore the full diff rather than pretending the choice happened.

After saving both edits:

git diff -- styles.css

Full observed working diff:

diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

Native interactive route: git add -p -- index.html selects its headline hunk. git add -p -- styles.css can accept the first hunk and reject the radius hunk. Prompts vary by Git version; inspect contents before answering, not a memorized y/n sequence.

A deterministic native equivalent is to save the following full patch outside the project as <selection.patch> and apply it to the index only:

diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.css

Both check/apply succeeded silently in the fixture. The final query printed:

diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

git show :styles.css must equal the complete CSS-02-INDEX above. The working file must still equal full CSS-02-WORKING. Neither --cached patch command writes working CSS.

Native commit alternative, not a repeat after app success:

git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css

Quiet commit: exit 0, no output. Status:

 M styles.css

Full remaining working diff:

diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

At the end of this lesson: three commits on main. HEAD/index contain the new headline and wider hero, but radius is still 0.5rem there; working radius is 0.75rem. Only styles.css has an unstaged modification. No remote, merge or rebase. Optional notebook/clean alternatives do not replace this checkpoint.

• Selecting only the added half of a replacement: not necessarily the intended patch.
• Staging the entire CSS file: includes radius too.
• Pasting target-index CSS over working CSS: loses the intentionally separate edit.
• Making a cleanup commit now: contradicts lesson 8's starting task.

Use cached/working comparisons to diagnose an index mismatch. Before committing, Unstage Lines/Hunk can change selection without discarding the working edit. If Git refuses a malformed or stale patch, stop; do not force it. Re-read the current file and reselect exact content. A failed commit/hook is not permission to skip hooks.

Answer each question, then read why. Questions marked “Required” count toward completing the lesson.

1. Question 1 of 6

   Question 1 of 6

   What defines a hunk?

   Choose one answer.

   One whole feature always

   One branch

   Nearby diff context

   Check answer
2. Question 2 of 6

   Question 2 of 6

   To stage 44rem → 48rem, which lines belong?

   Choose every answer that applies.

   Removed 44rem

   Radius pair too

   Added 48rem

   Check answer
3. Question 3 of 6

   Question 3 of 6Required

   After the partial selection, what are width and radius in the index?

   Choose one answer.

   48rem and 0.5rem

   48rem and 0.75rem

   44rem and 0.75rem

   Check answer
4. Question 4 of 6

   Question 4 of 6Required

   If you also stage radius before committing, what remains?

   Choose one answer.

   A new remote

   Radius still unstaged

   No CSS difference

   Check answer
5. Question 5 of 6

   Question 5 of 6

   An external save changes the selected diff. What is safe?

   Choose one answer.

   Force the old patch

   Discard the whole file

   Reload/reselect current bytes

   Check answer
6. Question 6 of 6

   Question 6 of 6Required

   Check the finished checkpoint. Which evidence matches?

   Choose every answer that applies.

   Three commits; HEAD/index width 48rem, radius 0.5rem

   A cleanup commit has already saved radius

   Working radius 0.75rem; only styles.css modified

   Check answer

Explain the three different radii/width states using the full files. Changed input: if you also stage the radius pair, the next commit contains both CSS changes and leaves no CSS difference. Test that only in a separate replay; keep the canonical radius edit for lesson 8.

• Select the scope that matches the intended change.
• Verify the complete prepared file and the leftover working diff.
• Keep independently useful work separate without destroying it.

• Read the comparison before judging a change (lesson 6)
• Stage the intended snapshot and make your first commit (lesson 5)
• Download GitTree

Hunk — كتلة; selected lines — الأسطر المختارة; stage — تجهيز; unstage — إلغاء التجهيز; patch — رقعة; index — الفهرس.