From 148527b29dd25a8856df15d68f7ef9a7c1512607 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:06:29 -0500
Subject: [PATCH 01/19] docs(specs): create baseline specification for text
 diff

---
 .../001-text-diff/checklists/requirements.md  | 36 ++++++++
 specs/001-text-diff/spec.md                   | 91 +++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 specs/001-text-diff/checklists/requirements.md
 create mode 100644 specs/001-text-diff/spec.md

diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
new file mode 100644
index 0000000..8c98111
--- /dev/null
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -0,0 +1,36 @@
+# Specification Quality Checklist: Text Diff Checker
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-02-07
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass validation. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- No [NEEDS CLARIFICATION] markers were needed — the feature description is straightforward with clear, reasonable defaults applied.
+- Assumptions made: line-level diff (standard default), real-time updates (common UX pattern), red/green color coding (industry standard for diff tools).
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
new file mode 100644
index 0000000..4aca156
--- /dev/null
+++ b/specs/001-text-diff/spec.md
@@ -0,0 +1,91 @@
+# Feature Specification: Text Diff Checker
+
+**Feature Branch**: `001-text-diff`
+**Created**: 2026-02-07
+**Status**: Draft
+**Input**: User description: "check diff between 2 text inputs"
+
+## User Scenarios & Testing _(mandatory)_
+
+### User Story 1 - Compare Two Text Inputs (Priority: P1)
+
+A user visits the app and sees two side-by-side text areas. They enter or paste text into both areas and the system displays the differences between the two texts, highlighting additions, deletions, and unchanged portions.
+
+**Why this priority**: This is the core value proposition of the application. Without the ability to input two texts and see their differences, the app has no purpose.
+
+**Independent Test**: Can be fully tested by entering different text in each input area and verifying that the diff output correctly highlights the differences between them.
+
+**Acceptance Scenarios**:
+
+1. **Given** the app is loaded with two empty text areas, **When** the user enters "hello world" in the first area and "hello there" in the second area, **Then** the system displays a diff result showing "world" as removed and "there" as added.
+2. **Given** the app is loaded, **When** the user enters identical text in both areas, **Then** the system displays the text with no differences highlighted.
+3. **Given** the app is loaded, **When** the user enters text in only one area and leaves the other empty, **Then** the system displays the entire text as either fully added or fully removed depending on which area contains text.
+
+---
+
+### User Story 2 - Visual Diff Output with Color Coding (Priority: P2)
+
+A user compares two texts and the diff result is displayed with clear visual indicators: removed text is highlighted in red, added text is highlighted in green, and unchanged text is displayed normally. This allows the user to quickly scan and understand the differences at a glance.
+
+**Why this priority**: Without clear visual distinction, the diff output would be difficult to interpret. Color-coded output is essential for usability but depends on the core diff comparison (P1) being in place first.
+
+**Independent Test**: Can be fully tested by comparing two texts with known differences and verifying that additions appear in green, deletions appear in red, and unchanged text has no special highlighting.
+
+**Acceptance Scenarios**:
+
+1. **Given** a diff result has been computed, **When** the result is displayed, **Then** removed portions are visually distinct (red background or similar) from added portions (green background or similar).
+2. **Given** a diff result contains only unchanged text, **When** the result is displayed, **Then** no color highlighting is applied.
+
+---
+
+### User Story 3 - Real-Time Diff Updates (Priority: P3)
+
+A user modifies text in either input area and the diff output updates automatically without requiring a manual action (such as pressing a button). This provides an immediate, interactive experience.
+
+**Why this priority**: Real-time updates improve the user experience significantly but are an enhancement over a button-triggered diff. The core comparison and visual output must work first.
+
+**Independent Test**: Can be fully tested by typing in one of the text areas and verifying that the diff output updates as the user types, without any additional user action.
+
+**Acceptance Scenarios**:
+
+1. **Given** both text areas contain text and a diff is displayed, **When** the user modifies text in either area, **Then** the diff output updates automatically to reflect the new differences.
+2. **Given** one text area is empty, **When** the user begins typing in it, **Then** the diff output updates with each keystroke.
+
+---
+
+### Edge Cases
+
+- What happens when both text areas are empty? The diff output should display nothing or an empty state message.
+- What happens when the user pastes a very large text (e.g., 10,000+ lines)? The system should still compute and display the diff without freezing the interface.
+- What happens when text contains special characters, unicode, or emoji? The diff should handle all valid text content correctly.
+- What happens when text contains only whitespace differences (spaces, tabs, newlines)? The diff should detect and display whitespace-only changes.
+- What happens when one input is cleared after a diff has been displayed? The diff output should update to reflect the new state.
+
+## Requirements _(mandatory)_
+
+### Functional Requirements
+
+- **FR-001**: System MUST provide two text input areas where users can enter or paste text.
+- **FR-002**: System MUST compute a line-level diff between the contents of the two text input areas.
+- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones.
+- **FR-004**: System MUST update the diff output automatically when the content of either text input area changes.
+- **FR-005**: System MUST handle empty inputs gracefully, treating an empty input as an empty string for comparison purposes.
+- **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.
+- **FR-007**: System MUST support special characters, unicode, and emoji in both inputs without errors.
+- **FR-008**: System MUST remain responsive when processing large text inputs (up to 10,000 lines).
+
+### Key Entities
+
+- **Text Input**: A block of user-provided text. Key attributes: content (string), position (left/original or right/modified).
+- **Diff Result**: The computed comparison between two text inputs. Key attributes: list of diff segments, each with a type (added, removed, unchanged) and content (string).
+- **Diff Segment**: A contiguous portion of text within the diff result. Key attributes: type (added, removed, unchanged), content (the text of this segment).
+
+## Success Criteria _(mandatory)_
+
+### Measurable Outcomes
+
+- **SC-001**: Users can paste two texts and see a color-coded diff result within 2 seconds for inputs up to 1,000 lines each.
+- **SC-002**: 95% of users can identify all differences between two texts on their first attempt using the diff output.
+- **SC-003**: The diff output updates within 500 milliseconds of the user finishing a keystroke in either input area.
+- **SC-004**: The application handles text inputs of up to 10,000 lines without the interface becoming unresponsive (no frame drops exceeding 1 second).
+- **SC-005**: All user stories pass their defined acceptance scenarios with 100% test coverage.

From 52b829a5758f6a7e35bb7661c01dde2531ce94b9 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:12:43 -0500
Subject: [PATCH 02/19] docs(specs): clarify library requirements

---
 specs/001-text-diff/checklists/requirements.md |  9 ++++++---
 specs/001-text-diff/spec.md                    | 14 +++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
index 8c98111..6684ce1 100644
--- a/specs/001-text-diff/checklists/requirements.md
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -31,6 +31,9 @@
 
 ## Notes
 
-- All items pass validation. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
-- No [NEEDS CLARIFICATION] markers were needed — the feature description is straightforward with clear, reasonable defaults applied.
-- Assumptions made: line-level diff (standard default), real-time updates (common UX pattern), red/green color coding (industry standard for diff tools).
+- All items pass validation. Spec is ready for `/speckit.plan`.
+- Clarification session 2026-02-07 resolved 3 questions:
+  1. Diff library: `diff` (`npm: diff`)
+  2. Display format: Both unified inline and side-by-side views with toggle
+  3. Diff granularity: Word-level
+- No [NEEDS CLARIFICATION] markers remain in the spec.
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index 4aca156..db5ac79 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -5,6 +5,14 @@
 **Status**: Draft
 **Input**: User description: "check diff between 2 text inputs"
 
+## Clarifications
+
+### Session 2026-02-07
+
+- Q: Which diff computation library should be used? → A: `diff` (`npm: diff`) — established library, ~10KB, supports line/word/character modes, TypeScript support.
+- Q: What diff display format should be used? → A: Both unified inline and side-by-side views, with a toggle switch for the user to choose between them.
+- Q: What diff granularity should be used? → A: Word-level — differences highlighted at word boundaries within lines for best readability.
+
 ## User Scenarios & Testing _(mandatory)_
 
 ### User Story 1 - Compare Two Text Inputs (Priority: P1)
@@ -25,7 +33,7 @@ A user visits the app and sees two side-by-side text areas. They enter or paste
 
 ### User Story 2 - Visual Diff Output with Color Coding (Priority: P2)
 
-A user compares two texts and the diff result is displayed with clear visual indicators: removed text is highlighted in red, added text is highlighted in green, and unchanged text is displayed normally. This allows the user to quickly scan and understand the differences at a glance.
+A user compares two texts and the diff result is displayed with clear visual indicators: removed text is highlighted in red, added text is highlighted in green, and unchanged text is displayed normally. The user can toggle between a unified inline view (single column with interleaved changes) and a side-by-side view (two columns with aligned lines). This allows the user to quickly scan and understand the differences at a glance using their preferred format.
 
 **Why this priority**: Without clear visual distinction, the diff output would be difficult to interpret. Color-coded output is essential for usability but depends on the core diff comparison (P1) being in place first.
 
@@ -66,8 +74,8 @@ A user modifies text in either input area and the diff output updates automatica
 ### Functional Requirements
 
 - **FR-001**: System MUST provide two text input areas where users can enter or paste text.
-- **FR-002**: System MUST compute a line-level diff between the contents of the two text input areas.
-- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones.
+- **FR-002**: System MUST compute a word-level diff between the contents of the two text input areas using the `diff` library (`npm: diff`).
+- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them.
 - **FR-004**: System MUST update the diff output automatically when the content of either text input area changes.
 - **FR-005**: System MUST handle empty inputs gracefully, treating an empty input as an empty string for comparison purposes.
 - **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.

From 9f9dffd1b22d005b28148ebcaf3687b90f41d9b3 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:18:37 -0500
Subject: [PATCH 03/19] docs(specs): clarify UI requirements

---
 specs/001-text-diff/checklists/requirements.md | 4 +++-
 specs/001-text-diff/spec.md                    | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
index 6684ce1..1100abe 100644
--- a/specs/001-text-diff/checklists/requirements.md
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -32,8 +32,10 @@
 ## Notes
 
 - All items pass validation. Spec is ready for `/speckit.plan`.
-- Clarification session 2026-02-07 resolved 3 questions:
+- Clarification session 2026-02-07 resolved 5 questions:
   1. Diff library: `diff` (`npm: diff`)
   2. Display format: Both unified inline and side-by-side views with toggle
   3. Diff granularity: Word-level
+  4. Text input component: Plain `<textarea>` with line number gutter (no editor library)
+  5. Diff display rendering: Custom React components with Tailwind (no diff rendering library)
 - No [NEEDS CLARIFICATION] markers remain in the spec.
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index db5ac79..2aa35b0 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -12,6 +12,8 @@
 - Q: Which diff computation library should be used? → A: `diff` (`npm: diff`) — established library, ~10KB, supports line/word/character modes, TypeScript support.
 - Q: What diff display format should be used? → A: Both unified inline and side-by-side views, with a toggle switch for the user to choose between them.
 - Q: What diff granularity should be used? → A: Word-level — differences highlighted at word boundaries within lines for best readability.
+- Q: What component should be used for text input? → A: Plain `<textarea>` elements with a synced line number gutter, styled with Tailwind. No external editor library.
+- Q: How should the diff output be rendered? → A: Custom React components styled with Tailwind utility classes. No external diff rendering library.
 
 ## User Scenarios & Testing _(mandatory)_
 
@@ -73,9 +75,9 @@ A user modifies text in either input area and the diff output updates automatica
 
 ### Functional Requirements
 
-- **FR-001**: System MUST provide two text input areas where users can enter or paste text.
+- **FR-001**: System MUST provide two text input areas (plain `<textarea>` elements with line number gutters) where users can enter or paste text.
 - **FR-002**: System MUST compute a word-level diff between the contents of the two text input areas using the `diff` library (`npm: diff`).
-- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them.
+- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them. Rendering MUST use custom React components styled with Tailwind (no external diff rendering library).
 - **FR-004**: System MUST update the diff output automatically when the content of either text input area changes.
 - **FR-005**: System MUST handle empty inputs gracefully, treating an empty input as an empty string for comparison purposes.
 - **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.

From 8b66f026d2d4efa38a95da978310a8d399839e2b Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:22:35 -0500
Subject: [PATCH 04/19] docs(specs): clarify diff display requirements

---
 specs/001-text-diff/checklists/requirements.md | 4 +++-
 specs/001-text-diff/spec.md                    | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
index 1100abe..5f80484 100644
--- a/specs/001-text-diff/checklists/requirements.md
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -32,10 +32,12 @@
 ## Notes
 
 - All items pass validation. Spec is ready for `/speckit.plan`.
-- Clarification session 2026-02-07 resolved 5 questions:
+- Clarification session 2026-02-07 resolved 7 questions:
   1. Diff library: `diff` (`npm: diff`)
   2. Display format: Both unified inline and side-by-side views with toggle
   3. Diff granularity: Word-level
   4. Text input component: Plain `<textarea>` with line number gutter (no editor library)
   5. Diff display rendering: Custom React components with Tailwind (no diff rendering library)
+  6. Empty state: Diff output area hidden until both textareas have content
+  7. No-diff state: "No differences found" message displayed
 - No [NEEDS CLARIFICATION] markers remain in the spec.
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index 2aa35b0..8d36eed 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -14,6 +14,8 @@
 - Q: What diff granularity should be used? → A: Word-level — differences highlighted at word boundaries within lines for best readability.
 - Q: What component should be used for text input? → A: Plain `<textarea>` elements with a synced line number gutter, styled with Tailwind. No external editor library.
 - Q: How should the diff output be rendered? → A: Custom React components styled with Tailwind utility classes. No external diff rendering library.
+- Q: What is displayed when textareas are empty? → A: Diff output area is completely empty/hidden until both textareas have content.
+- Q: What is displayed when texts are identical (no diff)? → A: A short message like "No differences found" is shown in the diff output area.
 
 ## User Scenarios & Testing _(mandatory)_
 
@@ -28,7 +30,7 @@ A user visits the app and sees two side-by-side text areas. They enter or paste
 **Acceptance Scenarios**:
 
 1. **Given** the app is loaded with two empty text areas, **When** the user enters "hello world" in the first area and "hello there" in the second area, **Then** the system displays a diff result showing "world" as removed and "there" as added.
-2. **Given** the app is loaded, **When** the user enters identical text in both areas, **Then** the system displays the text with no differences highlighted.
+2. **Given** the app is loaded, **When** the user enters identical text in both areas, **Then** the system displays a "No differences found" message in the diff output area.
 3. **Given** the app is loaded, **When** the user enters text in only one area and leaves the other empty, **Then** the system displays the entire text as either fully added or fully removed depending on which area contains text.
 
 ---
@@ -65,7 +67,7 @@ A user modifies text in either input area and the diff output updates automatica
 
 ### Edge Cases
 
-- What happens when both text areas are empty? The diff output should display nothing or an empty state message.
+- What happens when both text areas are empty? The diff output area is hidden until both textareas have content.
 - What happens when the user pastes a very large text (e.g., 10,000+ lines)? The system should still compute and display the diff without freezing the interface.
 - What happens when text contains special characters, unicode, or emoji? The diff should handle all valid text content correctly.
 - What happens when text contains only whitespace differences (spaces, tabs, newlines)? The diff should detect and display whitespace-only changes.
@@ -79,7 +81,8 @@ A user modifies text in either input area and the diff output updates automatica
 - **FR-002**: System MUST compute a word-level diff between the contents of the two text input areas using the `diff` library (`npm: diff`).
 - **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them. Rendering MUST use custom React components styled with Tailwind (no external diff rendering library).
 - **FR-004**: System MUST update the diff output automatically when the content of either text input area changes.
-- **FR-005**: System MUST handle empty inputs gracefully, treating an empty input as an empty string for comparison purposes.
+- **FR-005**: System MUST handle empty inputs gracefully by hiding the diff output area until both textareas contain text.
+- **FR-009**: System MUST display a "No differences found" message in the diff output area when both inputs contain identical text.
 - **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.
 - **FR-007**: System MUST support special characters, unicode, and emoji in both inputs without errors.
 - **FR-008**: System MUST remain responsive when processing large text inputs (up to 10,000 lines).

From 44b5eb637e4dfcd5862ceeb95abad6b7a77747b6 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:25:01 -0500
Subject: [PATCH 05/19] docs(specs): clarify no debounce in requirements

---
 specs/001-text-diff/checklists/requirements.md | 3 ++-
 specs/001-text-diff/spec.md                    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
index 5f80484..e4f2088 100644
--- a/specs/001-text-diff/checklists/requirements.md
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -32,7 +32,7 @@
 ## Notes
 
 - All items pass validation. Spec is ready for `/speckit.plan`.
-- Clarification session 2026-02-07 resolved 7 questions:
+- Clarification session 2026-02-07 resolved 8 questions:
   1. Diff library: `diff` (`npm: diff`)
   2. Display format: Both unified inline and side-by-side views with toggle
   3. Diff granularity: Word-level
@@ -40,4 +40,5 @@
   5. Diff display rendering: Custom React components with Tailwind (no diff rendering library)
   6. Empty state: Diff output area hidden until both textareas have content
   7. No-diff state: "No differences found" message displayed
+  8. Debounce: No debounce — recompute diff on every keystroke immediately
 - No [NEEDS CLARIFICATION] markers remain in the spec.
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index 8d36eed..b9857f6 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -16,6 +16,7 @@
 - Q: How should the diff output be rendered? → A: Custom React components styled with Tailwind utility classes. No external diff rendering library.
 - Q: What is displayed when textareas are empty? → A: Diff output area is completely empty/hidden until both textareas have content.
 - Q: What is displayed when texts are identical (no diff)? → A: A short message like "No differences found" is shown in the diff output area.
+- Q: Should diff computation be debounced for real-time updates? → A: No debounce — recompute diff on every keystroke immediately.
 
 ## User Scenarios & Testing _(mandatory)_
 
@@ -80,7 +81,7 @@ A user modifies text in either input area and the diff output updates automatica
 - **FR-001**: System MUST provide two text input areas (plain `<textarea>` elements with line number gutters) where users can enter or paste text.
 - **FR-002**: System MUST compute a word-level diff between the contents of the two text input areas using the `diff` library (`npm: diff`).
 - **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them. Rendering MUST use custom React components styled with Tailwind (no external diff rendering library).
-- **FR-004**: System MUST update the diff output automatically when the content of either text input area changes.
+- **FR-004**: System MUST update the diff output automatically on every keystroke (no debounce) when the content of either text input area changes.
 - **FR-005**: System MUST handle empty inputs gracefully by hiding the diff output area until both textareas contain text.
 - **FR-009**: System MUST display a "No differences found" message in the diff output area when both inputs contain identical text.
 - **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.

From ce5bcaa10fe2fc32d1deb0ad01739a6f9f015384 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:30:13 -0500
Subject: [PATCH 06/19] docs(specs): create implementation plan

---
 .windsurf/rules/specify-rules.md  |  30 +++++
 specs/001-text-diff/data-model.md | 176 ++++++++++++++++++++++++++++++
 specs/001-text-diff/plan.md       | 111 +++++++++++++++++++
 specs/001-text-diff/quickstart.md |  96 ++++++++++++++++
 specs/001-text-diff/research.md   | 161 +++++++++++++++++++++++++++
 5 files changed, 574 insertions(+)
 create mode 100644 .windsurf/rules/specify-rules.md
 create mode 100644 specs/001-text-diff/data-model.md
 create mode 100644 specs/001-text-diff/plan.md
 create mode 100644 specs/001-text-diff/quickstart.md
 create mode 100644 specs/001-text-diff/research.md

diff --git a/.windsurf/rules/specify-rules.md b/.windsurf/rules/specify-rules.md
new file mode 100644
index 0000000..18415bc
--- /dev/null
+++ b/.windsurf/rules/specify-rules.md
@@ -0,0 +1,30 @@
+# diff Development Guidelines
+
+Auto-generated from all feature plans. Last updated: 2026-02-07
+
+## Active Technologies
+
+- TypeScript 5.9.3 (strict mode) + React 19.2.4, `diff` (npm — to be added as runtime dependency) (001-text-diff)
+
+## Project Structure
+
+```text
+backend/
+frontend/
+tests/
+```
+
+## Commands
+
+npm test && npm run lint
+
+## Code Style
+
+TypeScript 5.9.3 (strict mode): Follow standard conventions
+
+## Recent Changes
+
+- 001-text-diff: Added TypeScript 5.9.3 (strict mode) + React 19.2.4, `diff` (npm — to be added as runtime dependency)
+
+<!-- MANUAL ADDITIONS START -->
+<!-- MANUAL ADDITIONS END -->
diff --git a/specs/001-text-diff/data-model.md b/specs/001-text-diff/data-model.md
new file mode 100644
index 0000000..153f1de
--- /dev/null
+++ b/specs/001-text-diff/data-model.md
@@ -0,0 +1,176 @@
+# Data Model: Text Diff Checker
+
+**Feature Branch**: `001-text-diff`
+**Date**: 2026-02-07
+
+## Overview
+
+This is a client-side-only application with no persistence layer. All data exists as in-memory React state and derived values. There are no databases, APIs, or external storage.
+
+## Entities
+
+### 1. TextInput
+
+Represents one of the two user-provided text blocks.
+
+| Field      | Type                       | Description                              |
+| ---------- | -------------------------- | ---------------------------------------- |
+| `value`    | `string`                   | The raw text content entered by the user |
+| `position` | `'original' \| 'modified'` | Which side this input represents         |
+
+**Validation Rules**:
+
+- `value` accepts any valid string including empty string, unicode, emoji, and special characters
+- No maximum length enforced at the type level (performance handled at the UI level)
+
+**State Location**: `useState<string>` in the root `App` component (two instances: `originalText` and `modifiedText`)
+
+---
+
+### 2. DiffSegment
+
+A contiguous portion of text within the computed diff result. Maps directly to the `Change` type from the `diff` library.
+
+| Field   | Type                                  | Description                      |
+| ------- | ------------------------------------- | -------------------------------- |
+| `value` | `string`                              | The text content of this segment |
+| `type`  | `'added' \| 'removed' \| 'unchanged'` | The diff classification          |
+
+**Derivation**: Computed from `diffWords(originalText, modifiedText)` → mapped from `Change[]` to `DiffSegment[]`
+
+**Mapping from `diff` library `Change` type**:
+
+- `change.added === true` → `type: 'added'`
+- `change.removed === true` → `type: 'removed'`
+- Neither `added` nor `removed` → `type: 'unchanged'`
+
+---
+
+### 3. DiffResult
+
+The complete computed comparison between two text inputs.
+
+| Field        | Type            | Description                               |
+| ------------ | --------------- | ----------------------------------------- |
+| `segments`   | `DiffSegment[]` | Ordered list of diff segments             |
+| `hasChanges` | `boolean`       | `true` if any segment is added or removed |
+
+**Derivation**: Computed by the `useDiff` hook from the two input strings. Recomputed on every change (no debounce per FR-004).
+
+**State Transitions**:
+
+- **Empty**: Both inputs are empty → diff output is hidden (FR-005)
+- **Partial**: Only one input has content → diff output is hidden (FR-005)
+- **Identical**: Both inputs have content and are equal → "No differences found" message (FR-009)
+- **Different**: Both inputs have content and differ → rendered diff segments
+
+---
+
+### 4. ViewMode
+
+Controls which diff rendering mode is active.
+
+| Field  | Type                          | Description             |
+| ------ | ----------------------------- | ----------------------- |
+| `mode` | `'unified' \| 'side-by-side'` | The active display mode |
+
+**State Location**: `useState<ViewMode>` in the root `App` component, default `'unified'`
+
+---
+
+## Type Definitions
+
+All types will be defined in `src/types/diff.ts`:
+
+```typescript
+/** Classification of a diff segment */
+type DiffType = 'added' | 'removed' | 'unchanged';
+
+/** A contiguous portion of text within a diff result */
+interface DiffSegment {
+  /** The text content of this segment */
+  value: string;
+  /** The diff classification */
+  type: DiffType;
+}
+
+/** The complete diff computation result */
+interface DiffResult {
+  /** Ordered list of diff segments */
+  segments: DiffSegment[];
+  /** True if any segment is added or removed */
+  hasChanges: boolean;
+}
+
+/** Available diff display modes */
+type ViewMode = 'unified' | 'side-by-side';
+```
+
+## Relationships
+
+```text
+TextInput (original) ──┐
+                       ├──→ useDiff hook ──→ DiffResult ──→ DiffViewer
+TextInput (modified) ──┘                                       ↑
+                                                          ViewMode (toggle)
+```
+
+- Two `TextInput` values feed into the `useDiff` hook
+- `useDiff` returns a `DiffResult` (or `null` when inputs don't meet display criteria)
+- `DiffViewer` receives `DiffResult` and `ViewMode` to render the appropriate view
+- `ViewToggle` controls the `ViewMode` state
+
+## Component Props Interfaces
+
+### TextInputProps
+
+```typescript
+interface TextInputProps {
+  /** Accessible label for the textarea */
+  label: string;
+  /** Current text value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+}
+```
+
+### DiffViewerProps
+
+```typescript
+interface DiffViewerProps {
+  /** The computed diff result, null when output should be hidden */
+  result: DiffResult | null;
+  /** The active display mode */
+  viewMode: ViewMode;
+}
+```
+
+### ViewToggleProps
+
+```typescript
+interface ViewToggleProps {
+  /** The currently active view mode */
+  activeMode: ViewMode;
+  /** Callback when the user selects a different mode */
+  onModeChange: (mode: ViewMode) => void;
+}
+```
+
+## useDiff Hook
+
+```typescript
+/**
+ * Computes a word-level diff between two strings.
+ * Returns null when either input is empty (FR-005).
+ */
+function useDiff(originalText: string, modifiedText: string): DiffResult | null;
+```
+
+**Behavior**:
+
+- Returns `null` if `originalText` or `modifiedText` is empty → triggers hidden output
+- Returns `{ segments: [...], hasChanges: false }` if texts are identical → triggers "No differences found"
+- Returns `{ segments: [...], hasChanges: true }` if texts differ → triggers diff rendering
diff --git a/specs/001-text-diff/plan.md b/specs/001-text-diff/plan.md
new file mode 100644
index 0000000..caed9e2
--- /dev/null
+++ b/specs/001-text-diff/plan.md
@@ -0,0 +1,111 @@
+# Implementation Plan: Text Diff Checker
+
+**Branch**: `001-text-diff` | **Date**: 2026-02-07 | **Spec**: [spec.md](./spec.md)
+**Input**: Feature specification from `/specs/001-text-diff/spec.md`
+
+## Summary
+
+Build a client-side text diff checker that lets users enter text in two side-by-side `<textarea>` elements and instantly see word-level differences rendered with color-coded highlights. The diff is computed using the `diff` npm library and displayed via custom React components styled with Tailwind CSS. Users can toggle between unified inline and side-by-side views. Diff output updates on every keystroke with no debounce.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.9.3 (strict mode)
+**Primary Dependencies**: React 19.2.4, `diff` (npm — to be added as runtime dependency)
+**Storage**: N/A (client-side only, no persistence)
+**Testing**: Vitest 4.0.18 with @testing-library/react 16.3.2 and @testing-library/user-event 14.6.1
+**Target Platform**: Modern browsers (static SPA, deployable to any static host)
+**Project Type**: Single-page web application (client-side only, no backend)
+**Performance Goals**: Diff result within 2s for ≤1,000-line inputs; UI update within 500ms per keystroke; no frame drops >1s for inputs up to 10,000 lines
+**Constraints**: Client-side only (no server calls), offline-capable after initial load, minimal bundle size
+**Scale/Scope**: Single-screen application with 2 text inputs, 1 diff output area, 1 view toggle
+
+## Constitution Check — Pre-Design
+
+_GATE: Must pass before Phase 0 research. Re-check after Phase 1 design._
+
+| Principle                         | Status  | Notes                                                                                                                                                                                                               |
+| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **I. Client-Side Only**           | ✅ PASS | No backend, no API calls, no external persistence. `diff` library runs in-browser. Static build output.                                                                                                             |
+| **II. Full Test Coverage**        | ✅ PASS | All new components and utilities will have 100% coverage. Vitest + Testing Library + user-event.                                                                                                                    |
+| **III. Accessibility First**      | ✅ PASS | Semantic HTML (`<textarea>`, `<label>`, `<button>`, `<main>`). ARIA attributes for diff output regions. Color is supplemented with `+`/`-` text markers so it is not the sole indicator. Keyboard-navigable toggle. |
+| **IV. Type Safety**               | ✅ PASS | Strict mode enabled. All props via explicit interfaces. No `any`.                                                                                                                                                   |
+| **V. Simplicity and Performance** | ✅ PASS | No state management library — `useState` only. No external diff rendering library. Tailwind-only styling. Single new runtime dependency (`diff`) justified by spec requirement FR-002.                              |
+| **Technology Constraints**        | ✅ PASS | Stack matches constitution exactly. One new runtime dep (`diff`) justified per spec clarification.                                                                                                                  |
+| **Development Workflow**          | ✅ PASS | All quality gates (lint, tsc, test:ci, build) will be enforced.                                                                                                                                                     |
+
+**Gate result: PASS** — no violations, proceed to Phase 0.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/001-text-diff/
+├── plan.md              # This file
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output
+├── quickstart.md        # Phase 1 output
+└── tasks.md             # Phase 2 output (/speckit.tasks command)
+```
+
+### Source Code (repository root)
+
+```text
+src/
+├── components/
+│   ├── App/
+│   │   ├── App.tsx              # Root component (updated to compose diff UI)
+│   │   ├── App.test.tsx         # Root component tests (updated)
+│   │   └── index.ts             # Barrel export
+│   ├── TextInput/
+│   │   ├── TextInput.tsx        # Textarea with line number gutter
+│   │   ├── TextInput.types.ts   # Props interface
+│   │   ├── TextInput.test.tsx   # Tests
+│   │   └── index.ts             # Barrel export
+│   ├── DiffViewer/
+│   │   ├── DiffViewer.tsx       # Diff output container (unified + side-by-side)
+│   │   ├── DiffViewer.types.ts  # Props/types for diff segments
+│   │   ├── DiffViewer.test.tsx  # Tests
+│   │   └── index.ts             # Barrel export
+│   └── ViewToggle/
+│       ├── ViewToggle.tsx       # Toggle between unified/side-by-side
+│       ├── ViewToggle.types.ts  # Props interface
+│       ├── ViewToggle.test.tsx  # Tests
+│       └── index.ts             # Barrel export
+├── hooks/
+│   ├── useDiff.ts               # Hook wrapping diff library computation
+│   └── useDiff.test.ts          # Hook tests
+├── types/
+│   └── diff.ts                  # Shared diff types (DiffSegment, ViewMode, etc.)
+├── index.css                    # Tailwind entry
+├── main.tsx                     # React root
+├── main.test.tsx                # Root render test
+└── vite-env.d.ts                # Vite type declarations
+
+test/
+└── setupFiles.ts                # Test setup
+```
+
+**Structure Decision**: Single-project structure following the existing `src/components/ComponentName/` convention from the constitution and AGENTS.md. No backend, no multi-project layout. A `hooks/` directory is added for the `useDiff` hook, and `types/` for shared type definitions. No `contracts/` directory is needed since this is a pure client-side application with no API.
+
+## Constitution Check — Post-Design
+
+_Re-evaluation after Phase 1 design artifacts are complete._
+
+| Principle                         | Status  | Notes                                                                                                                                                                                                                                |
+| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **I. Client-Side Only**           | ✅ PASS | Design confirms: no API contracts needed, no persistence layer, all computation in-browser via `diffWords()`. No `contracts/` directory created (N/A).                                                                               |
+| **II. Full Test Coverage**        | ✅ PASS | Every component (`TextInput`, `DiffViewer`, `ViewToggle`, `App`) and the `useDiff` hook have corresponding `.test.tsx`/`.test.ts` files in the source structure. 100% coverage enforced by `npm run test:ci`.                        |
+| **III. Accessibility First**      | ✅ PASS | Data model includes `label` prop on `TextInputProps`. Research documents `aria-live="polite"` for diff output, `role="status"` for no-diff message, `aria-hidden="true"` for line gutters, and `+`/`-` text markers alongside color. |
+| **IV. Type Safety**               | ✅ PASS | All types defined in `src/types/diff.ts` with explicit interfaces (`DiffSegment`, `DiffResult`, `ViewMode`). All component props have dedicated interfaces. No `any` types.                                                          |
+| **V. Simplicity and Performance** | ✅ PASS | Design uses only `useState` for state. No state management library. No virtualization (measure-first approach per research). Single new runtime dependency (`diff`). No custom CSS files.                                            |
+| **Technology Constraints**        | ✅ PASS | Only addition is `diff` npm package as runtime dependency, justified by FR-002. All other tech unchanged.                                                                                                                            |
+| **Development Workflow**          | ✅ PASS | File organization follows `src/components/ComponentName/` convention. Implementation order in quickstart.md respects dependency chain.                                                                                               |
+
+**Post-design gate result: PASS** — no violations introduced during design.
+
+## Complexity Tracking
+
+> No constitution violations — this section is intentionally empty.
+
+_No violations to justify._
diff --git a/specs/001-text-diff/quickstart.md b/specs/001-text-diff/quickstart.md
new file mode 100644
index 0000000..337fe55
--- /dev/null
+++ b/specs/001-text-diff/quickstart.md
@@ -0,0 +1,96 @@
+# Quickstart: Text Diff Checker
+
+**Feature Branch**: `001-text-diff`
+**Date**: 2026-02-07
+
+## Prerequisites
+
+- Node.js 24 (see `.nvmrc`)
+- npm (bundled with Node.js)
+
+## Setup
+
+```bash
+# Clone and switch to feature branch
+git checkout 001-text-diff
+
+# Install dependencies
+npm install
+
+# Install the diff library (new runtime dependency)
+npm install diff
+```
+
+## Development
+
+```bash
+# Start dev server (opens http://localhost:5173)
+npm start
+```
+
+## Quality Gates
+
+Run all gates before committing:
+
+```bash
+# 1. Lint (zero errors, zero warnings)
+npm run lint
+
+# 2. Type check (zero errors)
+npm run lint:tsc
+
+# 3. Tests with 100% coverage
+npm run test:ci
+
+# 4. Production build
+npm run build
+```
+
+## Key Files to Implement
+
+| File                                            | Purpose                                               |
+| ----------------------------------------------- | ----------------------------------------------------- |
+| `src/types/diff.ts`                             | Shared types: `DiffSegment`, `DiffResult`, `ViewMode` |
+| `src/hooks/useDiff.ts`                          | Hook wrapping `diffWords()` from `diff` library       |
+| `src/hooks/useDiff.test.ts`                     | Hook unit tests                                       |
+| `src/components/TextInput/TextInput.tsx`        | Textarea with line number gutter                      |
+| `src/components/TextInput/TextInput.test.tsx`   | TextInput tests                                       |
+| `src/components/DiffViewer/DiffViewer.tsx`      | Diff output (unified + side-by-side)                  |
+| `src/components/DiffViewer/DiffViewer.test.tsx` | DiffViewer tests                                      |
+| `src/components/ViewToggle/ViewToggle.tsx`      | Toggle between unified/side-by-side                   |
+| `src/components/ViewToggle/ViewToggle.test.tsx` | ViewToggle tests                                      |
+| `src/components/App/App.tsx`                    | Root component composing all pieces                   |
+| `src/components/App/App.test.tsx`               | Integration-level tests                               |
+
+## Implementation Order
+
+1. **Types** (`src/types/diff.ts`) — no dependencies
+2. **useDiff hook** — depends on types + `diff` library
+3. **TextInput** — standalone component
+4. **ViewToggle** — standalone component
+5. **DiffViewer** — depends on types
+6. **App** — composes all components
+
+## Testing
+
+```bash
+# Run all tests in watch mode
+npm test
+
+# Run a specific test file
+npm test -- --run src/hooks/useDiff.test.ts
+
+# Run tests with coverage report
+npm run test:ci
+```
+
+## Commit Convention
+
+This project uses Conventional Commits (enforced by commitlint):
+
+```bash
+# Examples
+git commit -m "feat: add TextInput component with line number gutter"
+git commit -m "feat: add useDiff hook for word-level diff computation"
+git commit -m "test: add DiffViewer component tests"
+```
diff --git a/specs/001-text-diff/research.md b/specs/001-text-diff/research.md
new file mode 100644
index 0000000..d3ce2f7
--- /dev/null
+++ b/specs/001-text-diff/research.md
@@ -0,0 +1,161 @@
+# Research: Text Diff Checker
+
+**Feature Branch**: `001-text-diff`
+**Date**: 2026-02-07
+
+## Research Topic 1: `diff` Library (npm: diff / jsdiff)
+
+### Decision
+
+Use the `diff` npm package (jsdiff) with `diffWords()` as the primary diff function.
+
+### Rationale
+
+- **Established library**: jsdiff is the most widely used JavaScript diff library (~40M weekly downloads)
+- **Small footprint**: ~10KB minified, aligns with the Simplicity & Performance constitution principle
+- **Built-in TypeScript types**: Since v8, ships with its own type definitions — no `@types/diff` needed
+- **Word-level diffing**: `diffWords()` matches spec requirement FR-002 for word-level granularity
+- **Pure JavaScript**: Runs entirely client-side, no server dependency — aligns with Client-Side Only principle
+
+### API Surface (relevant subset)
+
+- **`diffWords(oldStr, newStr)`**: Returns `Change[]` where each `Change` has:
+  - `value: string` — the text content of this segment
+  - `added?: boolean` — true if this segment was added in the new text
+  - `removed?: boolean` — true if this segment was removed from the old text
+  - If neither `added` nor `removed` is true, the segment is unchanged
+  - `count?: number` — number of tokens in this segment
+- **`diffLines(oldStr, newStr)`**: Alternative for line-level diffing (not used per spec, but available for future enhancement)
+- **`diffChars(oldStr, newStr)`**: Character-level alternative (too granular per spec clarification)
+
+### Alternatives Considered
+
+| Library                       | Rejected Because                                                                                                       |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `fast-diff`                   | Returns tuple arrays instead of objects; less ergonomic for React rendering; smaller community                         |
+| `text-diff`                   | Last published 10 years ago; no TypeScript types; uses HTML output (conflicts with custom React rendering requirement) |
+| `react-diff-viewer-continued` | External diff rendering library — spec explicitly requires custom React components (FR-003)                            |
+| Custom implementation         | Violates Simplicity principle; Myers diff algorithm is non-trivial to implement and test correctly                     |
+
+---
+
+## Research Topic 2: Line Number Gutter for `<textarea>`
+
+### Decision
+
+Implement a custom line number gutter using a `<div>` alongside each `<textarea>`, with scroll synchronization via the `onScroll` event.
+
+### Rationale
+
+- **No external editor dependency**: Spec clarification explicitly states "No external editor library"
+- **Simple implementation**: A numbered `<div>` that mirrors the textarea's scroll position
+- **Accessible**: The gutter is decorative (not interactive), so it needs `aria-hidden="true"` to avoid confusing screen readers
+- **Tailwind-friendly**: Monospace font matching and line-height alignment via utility classes
+
+### Implementation Approach
+
+1. Render a `<div>` with line numbers (1 to N) next to each `<textarea>`
+2. Sync the gutter's `scrollTop` with the textarea's `scrollTop` on the textarea's `scroll` event
+3. Recalculate line count on every content change
+4. Use `overflow: hidden` on the gutter to prevent independent scrolling
+
+### Alternatives Considered
+
+| Approach                | Rejected Because                                                                               |
+| ----------------------- | ---------------------------------------------------------------------------------------------- |
+| CodeMirror / Monaco     | External editor libraries — explicitly excluded by spec                                        |
+| CSS `counter-increment` | Cannot sync scroll position with textarea; breaks on long content                              |
+| `contenteditable` div   | Accessibility nightmare; inconsistent behavior across browsers; loses native textarea features |
+
+---
+
+## Research Topic 3: Unified vs Side-by-Side Diff Views
+
+### Decision
+
+Implement both views as separate rendering modes within the `DiffViewer` component, controlled by a `ViewMode` state toggled via `ViewToggle`.
+
+### Rationale
+
+- **Unified inline view**: Single column, interleaved additions/deletions — compact, good for small diffs
+- **Side-by-side view**: Two columns with aligned content — better for comparing large blocks
+- **Toggle pattern**: Simple `useState<ViewMode>` with a button group — no routing or complex state needed
+
+### Implementation Approach
+
+#### Unified View
+
+- Render `Change[]` from `diffWords()` sequentially in a single `<pre>` or `<div>`
+- Apply `bg-red-100 text-red-800` for removed, `bg-green-100 text-green-800` for added
+- Prefix removed segments with `-` and added segments with `+` (accessibility: not color-only)
+
+#### Side-by-Side View
+
+- Split `Change[]` into left (original) and right (modified) columns
+- Left column shows removed + unchanged segments; right column shows added + unchanged segments
+- Align rows so corresponding changes appear at the same vertical position
+
+### Alternatives Considered
+
+| Approach                            | Rejected Because                                                       |
+| ----------------------------------- | ---------------------------------------------------------------------- |
+| Tab-based switching                 | Toggle button is simpler and more discoverable for a two-option choice |
+| Three views (unified + split + raw) | Over-engineering; spec only requires two views                         |
+
+---
+
+## Research Topic 4: Accessibility for Diff Output
+
+### Decision
+
+Use semantic HTML, ARIA live regions, and text markers (`+`/`-`) alongside color coding.
+
+### Rationale
+
+- Constitution Principle III mandates accessibility-first design
+- Color MUST NOT be the sole means of conveying diff information
+- Screen readers need to announce diff changes meaningfully
+
+### Implementation Approach
+
+1. **ARIA live region**: Wrap diff output in `aria-live="polite"` so screen readers announce updates
+2. **Text markers**: Prefix added segments with `+` and removed segments with `-` (visually subtle but screen-reader accessible)
+3. **Semantic roles**: Use `role="status"` for the "No differences found" message
+4. **Labels**: Each textarea gets an associated `<label>` ("Original Text" / "Modified Text")
+5. **Keyboard navigation**: Toggle button is a standard `<button>` (inherently keyboard-accessible); textarea elements are natively keyboard-accessible
+6. **Focus management**: No focus traps; natural tab order flows from left textarea → right textarea → toggle → diff output
+
+### Alternatives Considered
+
+| Approach                         | Rejected Because                                                   |
+| -------------------------------- | ------------------------------------------------------------------ |
+| `aria-label` on every span       | Too verbose; overwhelms screen readers with per-word announcements |
+| Separate accessible text summary | Duplicates content; maintenance burden                             |
+
+---
+
+## Research Topic 5: Performance with Large Inputs (10,000+ lines)
+
+### Decision
+
+Rely on `diffWords()` performance (sufficient for 10K lines) and defer virtualization unless measured performance issues arise.
+
+### Rationale
+
+- `diffWords()` on 10K-line inputs typically completes in <1s in modern browsers
+- The spec requires no frame drops >1s, which is achievable without virtualization for text-only rendering
+- Premature optimization (e.g., virtual scrolling of diff output) violates the Simplicity principle
+
+### Mitigation Strategies (if needed)
+
+1. **Measure first**: Use `performance.now()` in development to profile diff computation time
+2. **Web Worker**: If computation exceeds 500ms, offload `diffWords()` to a Web Worker (future enhancement, not in initial scope)
+3. **Virtualized rendering**: If DOM rendering of 10K+ diff segments causes jank, add `react-window` (future enhancement)
+
+### Alternatives Considered
+
+| Approach                      | Rejected Because                                              |
+| ----------------------------- | ------------------------------------------------------------- |
+| Debounce input                | Spec explicitly says "no debounce" (FR-004)                   |
+| Virtualized list from day one | Premature optimization; adds complexity before measuring need |
+| Web Worker from day one       | Adds async complexity; measure first per Simplicity principle |

From 5ee5fd6bb91a22b537091eca542578236c10a0c1 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:37:48 -0500
Subject: [PATCH 07/19] docs(specs): clarify mobile responsiveness and dark
 mode in requirements

---
 specs/001-text-diff/spec.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index b9857f6..e45fbe2 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -17,6 +17,9 @@
 - Q: What is displayed when textareas are empty? → A: Diff output area is completely empty/hidden until both textareas have content.
 - Q: What is displayed when texts are identical (no diff)? → A: A short message like "No differences found" is shown in the diff output area.
 - Q: Should diff computation be debounced for real-time updates? → A: No debounce — recompute diff on every keystroke immediately.
+- Q: How should the layout adapt on mobile/small screens? → A: Responsive stacking — side-by-side on `md:` (768px+), stacked vertically on smaller screens. Textareas have a fixed max height and scroll internally to keep the page compact.
+- Q: How should the side-by-side diff view behave on mobile? → A: Auto-unified on mobile — force unified view below `md:` breakpoint; the view toggle is only visible on `md:` and above.
+- Q: Should the app support dark mode? → A: Yes — auto-detect via `prefers-color-scheme` and apply dark variants to all elements including diff color coding.
 
 ## User Scenarios & Testing _(mandatory)_
 
@@ -80,13 +83,15 @@ A user modifies text in either input area and the diff output updates automatica
 
 - **FR-001**: System MUST provide two text input areas (plain `<textarea>` elements with line number gutters) where users can enter or paste text.
 - **FR-002**: System MUST compute a word-level diff between the contents of the two text input areas using the `diff` library (`npm: diff`).
-- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them. Rendering MUST use custom React components styled with Tailwind (no external diff rendering library).
+- **FR-003**: System MUST display the diff result with visual color coding — removed text in red tones and added text in green tones — in both a unified inline view and a side-by-side view, with a toggle to switch between them. On screens below the `md:` breakpoint (768px), the diff MUST default to unified view and the view toggle MUST be hidden. Rendering MUST use custom React components styled with Tailwind (no external diff rendering library).
 - **FR-004**: System MUST update the diff output automatically on every keystroke (no debounce) when the content of either text input area changes.
 - **FR-005**: System MUST handle empty inputs gracefully by hiding the diff output area until both textareas contain text.
-- **FR-009**: System MUST display a "No differences found" message in the diff output area when both inputs contain identical text.
 - **FR-006**: System MUST correctly handle multi-line text, preserving line breaks in both input and output.
 - **FR-007**: System MUST support special characters, unicode, and emoji in both inputs without errors.
 - **FR-008**: System MUST remain responsive when processing large text inputs (up to 10,000 lines).
+- **FR-009**: System MUST display a "No differences found" message in the diff output area when both inputs contain identical text.
+- **FR-010**: System MUST use a responsive layout — side-by-side text inputs on `md:` breakpoint (768px+) and stacked vertically on smaller screens. Textareas MUST have a fixed max height with internal scrolling to keep the page compact on all screen sizes.
+- **FR-011**: System MUST support dark mode via `prefers-color-scheme` media query, automatically applying dark variants to all UI elements including diff color coding (red/green highlights must remain distinguishable in both light and dark themes).
 
 ### Key Entities
 

From e82cef35b1971aa1d8a03f9e7e9aa0683f3c12bb Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:41:50 -0500
Subject: [PATCH 08/19] docs(specs): update incremental plan

---
 .windsurf/rules/specify-rules.md  |  4 ++
 specs/001-text-diff/data-model.md | 39 +++++++++++++++--
 specs/001-text-diff/plan.md       | 46 ++++++++++---------
 specs/001-text-diff/quickstart.md | 13 +++---
 specs/001-text-diff/research.md   | 73 +++++++++++++++++++++++++++++++
 5 files changed, 145 insertions(+), 30 deletions(-)

diff --git a/.windsurf/rules/specify-rules.md b/.windsurf/rules/specify-rules.md
index 18415bc..3e858be 100644
--- a/.windsurf/rules/specify-rules.md
+++ b/.windsurf/rules/specify-rules.md
@@ -4,6 +4,8 @@ Auto-generated from all feature plans. Last updated: 2026-02-07
 
 ## Active Technologies
 
+- N/A (client-side only, no persistence) (001-text-diff)
+
 - TypeScript 5.9.3 (strict mode) + React 19.2.4, `diff` (npm — to be added as runtime dependency) (001-text-diff)
 
 ## Project Structure
@@ -26,5 +28,7 @@ TypeScript 5.9.3 (strict mode): Follow standard conventions
 
 - 001-text-diff: Added TypeScript 5.9.3 (strict mode) + React 19.2.4, `diff` (npm — to be added as runtime dependency)
 
+- 001-text-diff: Added TypeScript 5.9.3 (strict mode) + React 19.2.4, `diff` (npm — to be added as runtime dependency)
+
 <!-- MANUAL ADDITIONS START -->
 <!-- MANUAL ADDITIONS END -->
diff --git a/specs/001-text-diff/data-model.md b/specs/001-text-diff/data-model.md
index 153f1de..8fc8b85 100644
--- a/specs/001-text-diff/data-model.md
+++ b/specs/001-text-diff/data-model.md
@@ -76,6 +76,12 @@ Controls which diff rendering mode is active.
 
 **State Location**: `useState<ViewMode>` in the root `App` component, default `'unified'`
 
+**Responsive Behavior (FR-003 / FR-010)**:
+
+- On screens below `md:` (768px), the effective view mode is always `'unified'` regardless of state
+- The `ViewToggle` component is hidden on screens below `md:`
+- The `DiffViewer` receives the effective view mode (state value on desktop, forced `'unified'` on mobile)
+
 ---
 
 ## Type Definitions
@@ -112,13 +118,15 @@ type ViewMode = 'unified' | 'side-by-side';
 TextInput (original) ──┐
                        ├──→ useDiff hook ──→ DiffResult ──→ DiffViewer
 TextInput (modified) ──┘                                       ↑
-                                                          ViewMode (toggle)
+                                              effectiveViewMode (toggle + media query)
 ```
 
 - Two `TextInput` values feed into the `useDiff` hook
 - `useDiff` returns a `DiffResult` (or `null` when inputs don't meet display criteria)
-- `DiffViewer` receives `DiffResult` and `ViewMode` to render the appropriate view
-- `ViewToggle` controls the `ViewMode` state
+- `DiffViewer` receives `DiffResult` and the effective `ViewMode` to render the appropriate view
+- `ViewToggle` controls the `ViewMode` state (hidden on mobile per FR-003)
+- On mobile (<768px), the effective view mode is forced to `'unified'` regardless of toggle state
+- Dark mode styling is handled entirely via Tailwind `dark:` variants — no data model impact
 
 ## Component Props Interfaces
 
@@ -143,7 +151,7 @@ interface TextInputProps {
 interface DiffViewerProps {
   /** The computed diff result, null when output should be hidden */
   result: DiffResult | null;
-  /** The active display mode */
+  /** The effective display mode (forced 'unified' on mobile) */
   viewMode: ViewMode;
 }
 ```
@@ -174,3 +182,26 @@ function useDiff(originalText: string, modifiedText: string): DiffResult | null;
 - Returns `null` if `originalText` or `modifiedText` is empty → triggers hidden output
 - Returns `{ segments: [...], hasChanges: false }` if texts are identical → triggers "No differences found"
 - Returns `{ segments: [...], hasChanges: true }` if texts differ → triggers diff rendering
+
+## useMediaQuery Hook
+
+```typescript
+/**
+ * Returns true when the viewport matches the given media query string.
+ * Used to determine effective ViewMode on mobile (FR-003, FR-010).
+ */
+function useMediaQuery(query: string): boolean;
+```
+
+**Usage in App**:
+
+```typescript
+const isDesktop = useMediaQuery('(min-width: 768px)');
+const effectiveViewMode = isDesktop ? viewMode : 'unified';
+```
+
+**Behavior**:
+
+- Listens to `window.matchMedia(query)` change events
+- Returns `false` during SSR or when `window` is unavailable (safe default → unified view)
+- Updates synchronously on viewport resize
diff --git a/specs/001-text-diff/plan.md b/specs/001-text-diff/plan.md
index caed9e2..5e202ea 100644
--- a/specs/001-text-diff/plan.md
+++ b/specs/001-text-diff/plan.md
@@ -5,7 +5,7 @@
 
 ## Summary
 
-Build a client-side text diff checker that lets users enter text in two side-by-side `<textarea>` elements and instantly see word-level differences rendered with color-coded highlights. The diff is computed using the `diff` npm library and displayed via custom React components styled with Tailwind CSS. Users can toggle between unified inline and side-by-side views. Diff output updates on every keystroke with no debounce.
+Build a client-side text diff checker that lets users enter text in two `<textarea>` elements (side-by-side on desktop, stacked on mobile) and instantly see word-level differences rendered with color-coded highlights. The diff is computed using the `diff` npm library and displayed via custom React components styled with Tailwind CSS. Users can toggle between unified inline and side-by-side views on `md:` screens and above; on mobile, the diff defaults to unified view with the toggle hidden. Textareas have a fixed max height with internal scrolling. The app supports system-preference dark mode via `prefers-color-scheme`. Diff output updates on every keystroke with no debounce.
 
 ## Technical Context
 
@@ -17,21 +17,23 @@ Build a client-side text diff checker that lets users enter text in two side-by-
 **Project Type**: Single-page web application (client-side only, no backend)
 **Performance Goals**: Diff result within 2s for ≤1,000-line inputs; UI update within 500ms per keystroke; no frame drops >1s for inputs up to 10,000 lines
 **Constraints**: Client-side only (no server calls), offline-capable after initial load, minimal bundle size
-**Scale/Scope**: Single-screen application with 2 text inputs, 1 diff output area, 1 view toggle
+**Scale/Scope**: Single-screen application with 2 text inputs, 1 diff output area, 1 view toggle (hidden on mobile)
+**Responsive**: Side-by-side on `md:` (768px+), stacked vertically below; fixed-height textareas with internal scroll
+**Dark Mode**: System-preference via `prefers-color-scheme`; Tailwind `dark:` variants on all UI elements
 
 ## Constitution Check — Pre-Design
 
 _GATE: Must pass before Phase 0 research. Re-check after Phase 1 design._
 
-| Principle                         | Status  | Notes                                                                                                                                                                                                               |
-| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **I. Client-Side Only**           | ✅ PASS | No backend, no API calls, no external persistence. `diff` library runs in-browser. Static build output.                                                                                                             |
-| **II. Full Test Coverage**        | ✅ PASS | All new components and utilities will have 100% coverage. Vitest + Testing Library + user-event.                                                                                                                    |
-| **III. Accessibility First**      | ✅ PASS | Semantic HTML (`<textarea>`, `<label>`, `<button>`, `<main>`). ARIA attributes for diff output regions. Color is supplemented with `+`/`-` text markers so it is not the sole indicator. Keyboard-navigable toggle. |
-| **IV. Type Safety**               | ✅ PASS | Strict mode enabled. All props via explicit interfaces. No `any`.                                                                                                                                                   |
-| **V. Simplicity and Performance** | ✅ PASS | No state management library — `useState` only. No external diff rendering library. Tailwind-only styling. Single new runtime dependency (`diff`) justified by spec requirement FR-002.                              |
-| **Technology Constraints**        | ✅ PASS | Stack matches constitution exactly. One new runtime dep (`diff`) justified per spec clarification.                                                                                                                  |
-| **Development Workflow**          | ✅ PASS | All quality gates (lint, tsc, test:ci, build) will be enforced.                                                                                                                                                     |
+| Principle                         | Status  | Notes                                                                                                                                                                                                                                                                                                            |
+| --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **I. Client-Side Only**           | ✅ PASS | No backend, no API calls, no external persistence. `diff` library runs in-browser. Static build output.                                                                                                                                                                                                          |
+| **II. Full Test Coverage**        | ✅ PASS | All new components and utilities will have 100% coverage. Vitest + Testing Library + user-event.                                                                                                                                                                                                                 |
+| **III. Accessibility First**      | ✅ PASS | Semantic HTML (`<textarea>`, `<label>`, `<button>`, `<main>`). ARIA attributes for diff output regions. Color is supplemented with `+`/`-` text markers so it is not the sole indicator. Keyboard-navigable toggle. Dark mode diff colors remain distinguishable. Responsive layout ensures usability on mobile. |
+| **IV. Type Safety**               | ✅ PASS | Strict mode enabled. All props via explicit interfaces. No `any`.                                                                                                                                                                                                                                                |
+| **V. Simplicity and Performance** | ✅ PASS | No state management library — `useState` only. No external diff rendering library. Tailwind-only styling (including `dark:` and responsive prefixes). Single new runtime dependency (`diff`) justified by spec requirement FR-002.                                                                               |
+| **Technology Constraints**        | ✅ PASS | Stack matches constitution exactly. One new runtime dep (`diff`) justified per spec clarification.                                                                                                                                                                                                               |
+| **Development Workflow**          | ✅ PASS | All quality gates (lint, tsc, test:ci, build) will be enforced.                                                                                                                                                                                                                                                  |
 
 **Gate result: PASS** — no violations, proceed to Phase 0.
 
@@ -74,7 +76,9 @@ src/
 │       └── index.ts             # Barrel export
 ├── hooks/
 │   ├── useDiff.ts               # Hook wrapping diff library computation
-│   └── useDiff.test.ts          # Hook tests
+│   ├── useDiff.test.ts          # Hook tests
+│   ├── useMediaQuery.ts         # Hook for responsive breakpoint detection (FR-010)
+│   └── useMediaQuery.test.ts    # Hook tests
 ├── types/
 │   └── diff.ts                  # Shared diff types (DiffSegment, ViewMode, etc.)
 ├── index.css                    # Tailwind entry
@@ -92,15 +96,15 @@ test/
 
 _Re-evaluation after Phase 1 design artifacts are complete._
 
-| Principle                         | Status  | Notes                                                                                                                                                                                                                                |
-| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **I. Client-Side Only**           | ✅ PASS | Design confirms: no API contracts needed, no persistence layer, all computation in-browser via `diffWords()`. No `contracts/` directory created (N/A).                                                                               |
-| **II. Full Test Coverage**        | ✅ PASS | Every component (`TextInput`, `DiffViewer`, `ViewToggle`, `App`) and the `useDiff` hook have corresponding `.test.tsx`/`.test.ts` files in the source structure. 100% coverage enforced by `npm run test:ci`.                        |
-| **III. Accessibility First**      | ✅ PASS | Data model includes `label` prop on `TextInputProps`. Research documents `aria-live="polite"` for diff output, `role="status"` for no-diff message, `aria-hidden="true"` for line gutters, and `+`/`-` text markers alongside color. |
-| **IV. Type Safety**               | ✅ PASS | All types defined in `src/types/diff.ts` with explicit interfaces (`DiffSegment`, `DiffResult`, `ViewMode`). All component props have dedicated interfaces. No `any` types.                                                          |
-| **V. Simplicity and Performance** | ✅ PASS | Design uses only `useState` for state. No state management library. No virtualization (measure-first approach per research). Single new runtime dependency (`diff`). No custom CSS files.                                            |
-| **Technology Constraints**        | ✅ PASS | Only addition is `diff` npm package as runtime dependency, justified by FR-002. All other tech unchanged.                                                                                                                            |
-| **Development Workflow**          | ✅ PASS | File organization follows `src/components/ComponentName/` convention. Implementation order in quickstart.md respects dependency chain.                                                                                               |
+| Principle                         | Status  | Notes                                                                                                                                                                                                                                                                                                                                                                                      |
+| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **I. Client-Side Only**           | ✅ PASS | Design confirms: no API contracts needed, no persistence layer, all computation in-browser via `diffWords()`. Dark mode and responsive layout are pure CSS (Tailwind `dark:` and `md:` prefixes) — no server dependency.                                                                                                                                                                   |
+| **II. Full Test Coverage**        | ✅ PASS | Every component (`TextInput`, `DiffViewer`, `ViewToggle`, `App`) and the `useDiff` hook have corresponding `.test.tsx`/`.test.ts` files in the source structure. 100% coverage enforced by `npm run test:ci`.                                                                                                                                                                              |
+| **III. Accessibility First**      | ✅ PASS | Data model includes `label` prop on `TextInputProps`. Research documents `aria-live="polite"` for diff output, `role="status"` for no-diff message, `aria-hidden="true"` for line gutters, and `+`/`-` text markers alongside color. Responsive stacking ensures mobile usability. Dark mode diff colors (FR-011) must remain distinguishable — `dark:` variants for red/green highlights. |
+| **IV. Type Safety**               | ✅ PASS | All types defined in `src/types/diff.ts` with explicit interfaces (`DiffSegment`, `DiffResult`, `ViewMode`). All component props have dedicated interfaces. No `any` types.                                                                                                                                                                                                                |
+| **V. Simplicity and Performance** | ✅ PASS | Design uses only `useState` for state. No state management library. No virtualization (measure-first approach per research). Single new runtime dependency (`diff`). No custom CSS files. Responsive and dark mode handled entirely via Tailwind utility prefixes — no added complexity.                                                                                                   |
+| **Technology Constraints**        | ✅ PASS | Only addition is `diff` npm package as runtime dependency, justified by FR-002. All other tech unchanged.                                                                                                                                                                                                                                                                                  |
+| **Development Workflow**          | ✅ PASS | File organization follows `src/components/ComponentName/` convention. Implementation order in quickstart.md respects dependency chain. Dark mode and responsive tests included in component test files.                                                                                                                                                                                    |
 
 **Post-design gate result: PASS** — no violations introduced during design.
 
diff --git a/specs/001-text-diff/quickstart.md b/specs/001-text-diff/quickstart.md
index 337fe55..79e0377 100644
--- a/specs/001-text-diff/quickstart.md
+++ b/specs/001-text-diff/quickstart.md
@@ -52,7 +52,9 @@ npm run build
 | ----------------------------------------------- | ----------------------------------------------------- |
 | `src/types/diff.ts`                             | Shared types: `DiffSegment`, `DiffResult`, `ViewMode` |
 | `src/hooks/useDiff.ts`                          | Hook wrapping `diffWords()` from `diff` library       |
-| `src/hooks/useDiff.test.ts`                     | Hook unit tests                                       |
+| `src/hooks/useDiff.test.ts`                     | useDiff hook unit tests                               |
+| `src/hooks/useMediaQuery.ts`                    | Hook for responsive breakpoint detection (FR-010)     |
+| `src/hooks/useMediaQuery.test.ts`               | useMediaQuery hook unit tests                         |
 | `src/components/TextInput/TextInput.tsx`        | Textarea with line number gutter                      |
 | `src/components/TextInput/TextInput.test.tsx`   | TextInput tests                                       |
 | `src/components/DiffViewer/DiffViewer.tsx`      | Diff output (unified + side-by-side)                  |
@@ -66,10 +68,11 @@ npm run build
 
 1. **Types** (`src/types/diff.ts`) — no dependencies
 2. **useDiff hook** — depends on types + `diff` library
-3. **TextInput** — standalone component
-4. **ViewToggle** — standalone component
-5. **DiffViewer** — depends on types
-6. **App** — composes all components
+3. **useMediaQuery hook** — standalone (used by App for responsive ViewMode)
+4. **TextInput** — standalone component (fixed max height, dark mode variants)
+5. **ViewToggle** — standalone component (hidden on mobile via `hidden md:flex`)
+6. **DiffViewer** — depends on types (dark mode diff highlight variants)
+7. **App** — composes all components (responsive layout, effective ViewMode)
 
 ## Testing
 
diff --git a/specs/001-text-diff/research.md b/specs/001-text-diff/research.md
index d3ce2f7..44ed55f 100644
--- a/specs/001-text-diff/research.md
+++ b/specs/001-text-diff/research.md
@@ -159,3 +159,76 @@ Rely on `diffWords()` performance (sufficient for 10K lines) and defer virtualiz
 | Debounce input                | Spec explicitly says "no debounce" (FR-004)                   |
 | Virtualized list from day one | Premature optimization; adds complexity before measuring need |
 | Web Worker from day one       | Adds async complexity; measure first per Simplicity principle |
+
+---
+
+## Research Topic 6: Responsive Layout for Two-Panel Diff UI
+
+### Decision
+
+Use Tailwind responsive prefixes (`md:`) to switch between stacked (mobile) and side-by-side (desktop) layouts. Textareas have a fixed max height with internal scrolling on all screen sizes.
+
+### Rationale
+
+- **Standard pattern**: Stacking columns on mobile is the most common responsive approach for two-panel UIs
+- **Tailwind-native**: `md:flex-row` / `flex-col` requires zero custom CSS — aligns with Simplicity principle
+- **Fixed-height textareas**: Prevents excessive page scrolling when content is long; users scroll within each textarea independently
+- **Auto-unified diff on mobile**: Side-by-side diff columns are unreadable on narrow screens (<768px), so the diff view forces unified mode and hides the toggle below `md:`
+
+### Implementation Approach
+
+1. **Input layout**: `flex flex-col md:flex-row gap-4` on the container wrapping both `TextInput` components
+2. **Textarea height**: `max-h-64 overflow-y-auto` (or similar) on each textarea + gutter wrapper — consistent on all breakpoints
+3. **ViewToggle visibility**: `hidden md:flex` — toggle is hidden on mobile, visible on `md:` and above
+4. **DiffViewer**: When viewport is below `md:`, always render unified view regardless of `viewMode` state. Use a `useMediaQuery` hook or check `window.matchMedia('(min-width: 768px)')` to determine effective view mode
+5. **Diff output layout**: Full width on all breakpoints (single column for unified, two-column grid for side-by-side on desktop)
+
+### Alternatives Considered
+
+| Approach                               | Rejected Because                                                                                 |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| Always side-by-side (pinch-zoom)       | Poor mobile UX; textareas become too narrow to read or type in                                   |
+| Tabbed inputs on mobile                | Adds UI complexity (tab state, switching); stacking is simpler and keeps both inputs visible     |
+| Desktop-only with mobile warning       | Excludes mobile users entirely; unnecessary given that the UI adapts well with responsive layout |
+| Variable textarea height (grow to fit) | Causes excessive page scrolling with long content; fixed height + internal scroll is more usable |
+
+---
+
+## Research Topic 7: Dark Mode with `prefers-color-scheme`
+
+### Decision
+
+Use Tailwind CSS 4's built-in dark mode support (`dark:` variant) driven by the `prefers-color-scheme` media query. No manual toggle — the app follows the user's system preference.
+
+### Rationale
+
+- **Zero runtime cost**: `prefers-color-scheme` is a CSS media query — no JavaScript needed for detection
+- **Tailwind-native**: `dark:` prefix is built into Tailwind 4; no configuration needed beyond ensuring `@tailwindcss` is imported
+- **Developer audience**: Developers frequently use dark mode; auto-detecting system preference provides the best default experience
+- **No added state**: No theme toggle state to manage — aligns with Simplicity principle
+
+### Implementation Approach
+
+1. **Tailwind 4 dark mode**: Tailwind 4 uses `@media (prefers-color-scheme: dark)` by default for `dark:` variants — no config change needed
+2. **Base colors**: Apply `bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100` on the root element
+3. **Textarea styling**: `bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600`
+4. **Diff highlights (light)**: `bg-red-100 text-red-800` (removed), `bg-green-100 text-green-800` (added)
+5. **Diff highlights (dark)**: `dark:bg-red-900/30 dark:text-red-300` (removed), `dark:bg-green-900/30 dark:text-green-300` (added)
+6. **"No differences found" message**: `text-gray-500 dark:text-gray-400`
+7. **ViewToggle buttons**: `bg-gray-100 dark:bg-gray-700` for inactive, `bg-blue-500 dark:bg-blue-600 text-white` for active
+8. **Line number gutter**: `bg-gray-50 dark:bg-gray-800 text-gray-400 dark:text-gray-500`
+
+### Color Accessibility in Dark Mode
+
+- Red/green diff highlights use both background tint and text color shift — not color alone (supplemented by `+`/`-` markers per Research Topic 4)
+- Dark mode colors chosen for sufficient contrast: light text on dark tinted backgrounds
+- Tested against WCAG AA contrast ratios: `red-300` on `red-900/30` and `green-300` on `green-900/30` both exceed 4.5:1
+
+### Alternatives Considered
+
+| Approach                       | Rejected Because                                                                            |
+| ------------------------------ | ------------------------------------------------------------------------------------------- |
+| Manual toggle (light/dark)     | Adds UI complexity and state management; system preference is sufficient for MVP            |
+| CSS custom properties (no TW)  | Reinvents what Tailwind `dark:` provides natively; violates Tailwind-only styling principle |
+| Three themes (light/dark/auto) | Over-engineering for MVP; auto-only is simplest                                             |
+| No dark mode                   | Developer tool used in dark environments; poor UX for a significant portion of users        |

From cd34b188e98c2bef1e5a019b298ced6adac1b3a9 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 7 Feb 2026 23:44:57 -0500
Subject: [PATCH 09/19] docs(specs): generate actionable tasks

---
 specs/001-text-diff/tasks.md | 206 +++++++++++++++++++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 specs/001-text-diff/tasks.md

diff --git a/specs/001-text-diff/tasks.md b/specs/001-text-diff/tasks.md
new file mode 100644
index 0000000..71997ae
--- /dev/null
+++ b/specs/001-text-diff/tasks.md
@@ -0,0 +1,206 @@
+# Tasks: Text Diff Checker
+
+**Input**: Design documents from `/specs/001-text-diff/`
+**Prerequisites**: plan.md (required), spec.md (required), research.md, data-model.md, quickstart.md
+
+**Tests**: Included — plan.md and constitution mandate 100% test coverage (`npm run test:ci`).
+
+**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Setup (Shared Infrastructure)
+
+**Purpose**: Install the new runtime dependency and create the shared type definitions that all components depend on.
+
+- [ ] T001 Install `diff` npm package as a runtime dependency via `npm install diff`
+- [ ] T002 Create shared type definitions (`DiffType`, `DiffSegment`, `DiffResult`, `ViewMode`) in src/types/diff.ts
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: Core hooks that MUST be complete before ANY user story can be implemented. All components depend on these.
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete.
+
+- [ ] T003 [P] Implement `useDiff` hook wrapping `diffWords()` from `diff` library in src/hooks/useDiff.ts
+- [ ] T004 [P] Write unit tests for `useDiff` hook in src/hooks/useDiff.test.ts (empty inputs → null, identical texts → hasChanges false, different texts → correct segments)
+- [ ] T005 [P] Implement `useMediaQuery` hook using `window.matchMedia` in src/hooks/useMediaQuery.ts
+- [ ] T006 [P] Write unit tests for `useMediaQuery` hook in src/hooks/useMediaQuery.test.ts (matches/no-match, resize updates, SSR fallback)
+
+**Checkpoint**: Foundation ready — hooks tested, types defined, `diff` library installed. User story implementation can now begin.
+
+---
+
+## Phase 3: User Story 1 — Compare Two Text Inputs (Priority: P1) 🎯 MVP
+
+**Goal**: User sees two text areas, enters text in both, and the system computes and displays the differences between them. This is the core value proposition.
+
+**Independent Test**: Enter different text in each input area and verify that the diff output correctly identifies additions, deletions, and unchanged portions.
+
+### Tests for User Story 1
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [ ] T007 [P] [US1] Write unit tests for `TextInput` component in src/components/TextInput/TextInput.test.tsx (renders textarea with label, line number gutter, scroll sync, onChange callback, placeholder)
+- [ ] T008 [P] [US1] Write unit tests for `App` component (US1 scope) in src/components/App/App.test.tsx (renders two text inputs with labels "Original Text" and "Modified Text", hides diff output when inputs are empty, hides diff output when only one input has text, shows "No differences found" when texts are identical, shows diff segments when texts differ)
+
+### Implementation for User Story 1
+
+- [ ] T009 [P] [US1] Create `TextInputProps` interface in src/components/TextInput/TextInput.types.ts
+- [ ] T010 [P] [US1] Create barrel export in src/components/TextInput/index.ts
+- [ ] T011 [US1] Implement `TextInput` component with `<textarea>`, line number gutter (`aria-hidden="true"`), scroll sync, and `<label>` in src/components/TextInput/TextInput.tsx
+- [ ] T012 [US1] Update `App` component to render two `TextInput` components (original + modified) with `useState` for each, responsive side-by-side layout (`flex flex-col md:flex-row`), fixed-height textareas with internal scroll, and basic diff output area showing `useDiff` result in src/components/App/App.tsx
+- [ ] T013 [US1] Remove placeholder content (brands, counter) from src/components/App/App.tsx and src/components/App/brands.ts
+
+**Checkpoint**: User Story 1 is fully functional — two text inputs compute and display a basic diff. Testable independently with `npm run test:ci`.
+
+---
+
+## Phase 4: User Story 2 — Visual Diff Output with Color Coding (Priority: P2)
+
+**Goal**: Diff result is displayed with clear visual indicators — removed text in red, added text in green, unchanged text normal. User can toggle between unified inline and side-by-side views. On mobile (<768px), unified view is forced and toggle is hidden.
+
+**Independent Test**: Compare two texts with known differences and verify additions appear in green, deletions in red, unchanged text has no highlighting. Toggle between views and verify both render correctly.
+
+### Tests for User Story 2
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [ ] T014 [P] [US2] Write unit tests for `DiffViewer` component in src/components/DiffViewer/DiffViewer.test.tsx (renders null result as empty, renders "No differences found" with `role="status"` when hasChanges is false, renders added segments with green styling and `+` prefix, renders removed segments with red styling and `-` prefix, renders unchanged segments without highlighting, renders unified view correctly, renders side-by-side view correctly, wraps output in `aria-live="polite"`)
+- [ ] T015 [P] [US2] Write unit tests for `ViewToggle` component in src/components/ViewToggle/ViewToggle.test.tsx (renders two buttons for unified and side-by-side, highlights active mode, calls onModeChange on click, is keyboard accessible)
+
+### Implementation for User Story 2
+
+- [ ] T016 [P] [US2] Create `DiffViewerProps` interface in src/components/DiffViewer/DiffViewer.types.ts
+- [ ] T017 [P] [US2] Create barrel export in src/components/DiffViewer/index.ts
+- [ ] T018 [P] [US2] Create `ViewToggleProps` interface in src/components/ViewToggle/ViewToggle.types.ts
+- [ ] T019 [P] [US2] Create barrel export in src/components/ViewToggle/index.ts
+- [ ] T020 [US2] Implement `DiffViewer` component with unified view (single column, interleaved changes with `+`/`-` markers, red/green Tailwind classes, dark mode variants) and side-by-side view (two-column grid, left=removed+unchanged, right=added+unchanged), `aria-live="polite"`, "No differences found" with `role="status"` in src/components/DiffViewer/DiffViewer.tsx
+- [ ] T021 [US2] Implement `ViewToggle` component with button group for unified/side-by-side, active state styling, `hidden md:flex` responsive visibility in src/components/ViewToggle/ViewToggle.tsx
+- [ ] T022 [US2] Update `App` component to integrate `DiffViewer`, `ViewToggle`, and `useMediaQuery` — add `viewMode` state, compute `effectiveViewMode` (forced unified on mobile), pass props to `DiffViewer` and `ViewToggle` in src/components/App/App.tsx
+- [ ] T023 [US2] Update `App` tests to cover view toggle integration, effective view mode on mobile, color-coded diff rendering, and dark mode classes in src/components/App/App.test.tsx
+
+**Checkpoint**: User Stories 1 AND 2 are both functional — full color-coded diff with unified/side-by-side toggle. Testable independently.
+
+---
+
+## Phase 5: User Story 3 — Real-Time Diff Updates (Priority: P3)
+
+**Goal**: Diff output updates automatically on every keystroke without any manual trigger (no button, no debounce). Provides an immediate, interactive experience.
+
+**Independent Test**: Type in one of the text areas and verify that the diff output updates as the user types, without any additional user action.
+
+### Tests for User Story 3
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [ ] T024 [US3] Write integration tests for real-time updates in src/components/App/App.test.tsx (diff updates on each keystroke in either textarea, diff updates when text is pasted, diff output transitions from hidden → visible as user types in second textarea, diff output transitions from visible → "No differences found" when user makes texts identical)
+
+### Implementation for User Story 3
+
+- [ ] T025 [US3] Verify and ensure `App` component wires `TextInput` onChange directly to `useState` setters with no debounce or intermediate state in src/components/App/App.tsx (this should already work from US1 — validate and fix if needed)
+- [ ] T026 [US3] Verify edge case handling: clearing one input after diff is displayed updates output, pasting large text triggers immediate recomputation, special characters/unicode/emoji handled correctly in src/components/App/App.test.tsx
+
+**Checkpoint**: All three user stories are independently functional — real-time diff with color coding and view toggle.
+
+---
+
+## Phase 6: Polish & Cross-Cutting Concerns
+
+**Purpose**: Final quality pass affecting multiple user stories.
+
+- [ ] T027 [P] Apply dark mode styling (`dark:` variants) to all components — root element (`bg-white dark:bg-gray-900`), textareas, line gutters, diff highlights, toggle buttons per research.md color specs in src/components/
+- [ ] T028 [P] Apply responsive layout polish — verify stacked layout on mobile, side-by-side on `md:`, fixed-height textareas with internal scroll on all breakpoints in src/components/App/App.tsx
+- [ ] T029 [P] Accessibility audit — verify all `<label>` associations, `aria-live="polite"` on diff output, `role="status"` on no-diff message, `aria-hidden="true"` on line gutters, `+`/`-` text markers on diff segments, keyboard tab order
+- [ ] T030 Run all quality gates: `npm run lint`, `npm run lint:tsc`, `npm run test:ci`, `npm run build`
+- [ ] T031 Run quickstart.md validation — follow all steps in specs/001-text-diff/quickstart.md and verify they work end-to-end
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — can start immediately
+- **Foundational (Phase 2)**: Depends on Phase 1 (types + `diff` package) — BLOCKS all user stories
+- **User Story 1 (Phase 3)**: Depends on Phase 2 — can start after foundational hooks are tested
+- **User Story 2 (Phase 4)**: Depends on Phase 2 and Phase 3 (needs `TextInput` and basic `App` composition from US1)
+- **User Story 3 (Phase 5)**: Depends on Phase 3 (validates real-time behavior of US1 wiring); can run in parallel with Phase 4
+- **Polish (Phase 6)**: Depends on all user stories being complete
+
+### User Story Dependencies
+
+- **User Story 1 (P1)**: Can start after Foundational (Phase 2) — no dependencies on other stories
+- **User Story 2 (P2)**: Depends on US1 (`App` composition, `TextInput` exists) — extends the `App` with `DiffViewer` and `ViewToggle`
+- **User Story 3 (P3)**: Depends on US1 (validates the real-time wiring) — can run in parallel with US2
+
+### Within Each User Story
+
+- Tests MUST be written and FAIL before implementation
+- Type definitions and barrel exports before component implementation
+- Component implementation before `App` integration
+- `App` integration tests updated after wiring
+
+### Parallel Opportunities
+
+- **Phase 2**: T003+T004 (useDiff) and T005+T006 (useMediaQuery) can run in parallel — different files
+- **Phase 3**: T007 and T008 (tests) can run in parallel; T009 and T010 (types/barrel) can run in parallel
+- **Phase 4**: T014 and T015 (tests) can run in parallel; T016–T019 (types/barrels) can run in parallel
+- **Phase 5 and Phase 4**: US3 tests (T024) can start in parallel with US2 implementation if US1 is complete
+- **Phase 6**: T027, T028, T029 can run in parallel — different concerns
+
+---
+
+## Parallel Example: User Story 2
+
+```text
+# Launch all tests for User Story 2 together:
+Task T014: "Write unit tests for DiffViewer in src/components/DiffViewer/DiffViewer.test.tsx"
+Task T015: "Write unit tests for ViewToggle in src/components/ViewToggle/ViewToggle.test.tsx"
+
+# Launch all type definitions together:
+Task T016: "Create DiffViewerProps interface in src/components/DiffViewer/DiffViewer.types.ts"
+Task T017: "Create barrel export in src/components/DiffViewer/index.ts"
+Task T018: "Create ViewToggleProps interface in src/components/ViewToggle/ViewToggle.types.ts"
+Task T019: "Create barrel export in src/components/ViewToggle/index.ts"
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Complete Phase 1: Setup (install `diff`, create types)
+2. Complete Phase 2: Foundational (hooks + tests)
+3. Complete Phase 3: User Story 1 (TextInput + basic App)
+4. **STOP and VALIDATE**: Test User Story 1 independently with `npm run test:ci`
+5. Deploy/demo if ready — users can already compare two texts
+
+### Incremental Delivery
+
+1. Setup + Foundational → Foundation ready
+2. Add User Story 1 → Test independently → Deploy/Demo (MVP!)
+3. Add User Story 2 → Test independently → Deploy/Demo (color-coded diff with view toggle)
+4. Add User Story 3 → Test independently → Deploy/Demo (real-time updates validated)
+5. Polish → Final quality pass → Production ready
+
+---
+
+## Notes
+
+- [P] tasks = different files, no dependencies
+- [Story] label maps task to specific user story for traceability
+- Each user story should be independently completable and testable
+- Verify tests fail before implementing
+- Commit after each task or logical group using conventional commits
+- Stop at any checkpoint to validate story independently
+- The `diff` library ships with TypeScript types since v8 — no `@types/diff` needed

From 2d76520b49bb3d5600f7952d1f832707dbbd23fe Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 02:32:26 -0500
Subject: [PATCH 10/19] build(package): install diff

---
 package-lock.json | 18 ++++++++++++++----
 package.json      |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 51aa4c4..438fb34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "diff",
       "version": "1.0.0-alpha",
       "dependencies": {
+        "diff": "8.0.3",
         "react": "19.2.4",
         "react-dom": "19.2.4"
       },
@@ -5265,10 +5266,9 @@
       }
     },
     "node_modules/diff": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
-      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
-      "dev": true,
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
+      "integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -8738,6 +8738,16 @@
         }
       }
     },
+    "node_modules/ts-node/node_modules/diff": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/ts-pattern": {
       "version": "5.9.0",
       "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.9.0.tgz",
diff --git a/package.json b/package.json
index f7d9ff3..d9dec9a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "test:ci": "CI=true npm test -- --color --coverage --run"
   },
   "dependencies": {
+    "diff": "8.0.3",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },

From ea2af9924cacb26855e372c07f32bb20fa881850 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 02:53:59 -0500
Subject: [PATCH 11/19] feat: implement text diff checker

---
 index.html                                    |   6 +-
 specs/001-text-diff/tasks.md                  |  62 ++--
 src/components/App/App.test.tsx               | 296 +++++++++++++++++-
 src/components/App/App.tsx                    |  72 ++---
 src/components/App/brands.ts                  |   9 -
 src/components/DiffViewer/DiffViewer.test.tsx | 125 ++++++++
 src/components/DiffViewer/DiffViewer.tsx      | 101 ++++++
 src/components/DiffViewer/DiffViewer.types.ts |   8 +
 src/components/DiffViewer/index.ts            |   1 +
 src/components/TextInput/TextInput.test.tsx   |  88 ++++++
 src/components/TextInput/TextInput.tsx        |  55 ++++
 src/components/TextInput/TextInput.types.ts   |  10 +
 src/components/TextInput/index.ts             |   1 +
 src/components/ViewToggle/ViewToggle.test.tsx |  87 +++++
 src/components/ViewToggle/ViewToggle.tsx      |  41 +++
 src/components/ViewToggle/ViewToggle.types.ts |   8 +
 src/components/ViewToggle/index.ts            |   1 +
 src/hooks/useDiff.test.ts                     |  83 +++++
 src/hooks/useDiff.ts                          |  31 ++
 src/hooks/useMediaQuery.test.ts               | 122 ++++++++
 src/hooks/useMediaQuery.ts                    |  27 ++
 src/types/diff.ts                             |  21 ++
 22 files changed, 1166 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/App/brands.ts
 create mode 100644 src/components/DiffViewer/DiffViewer.test.tsx
 create mode 100644 src/components/DiffViewer/DiffViewer.tsx
 create mode 100644 src/components/DiffViewer/DiffViewer.types.ts
 create mode 100644 src/components/DiffViewer/index.ts
 create mode 100644 src/components/TextInput/TextInput.test.tsx
 create mode 100644 src/components/TextInput/TextInput.tsx
 create mode 100644 src/components/TextInput/TextInput.types.ts
 create mode 100644 src/components/TextInput/index.ts
 create mode 100644 src/components/ViewToggle/ViewToggle.test.tsx
 create mode 100644 src/components/ViewToggle/ViewToggle.tsx
 create mode 100644 src/components/ViewToggle/ViewToggle.types.ts
 create mode 100644 src/components/ViewToggle/index.ts
 create mode 100644 src/hooks/useDiff.test.ts
 create mode 100644 src/hooks/useDiff.ts
 create mode 100644 src/hooks/useMediaQuery.test.ts
 create mode 100644 src/hooks/useMediaQuery.ts
 create mode 100644 src/types/diff.ts

diff --git a/index.html b/index.html
index 303e198..8c60719 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>diff</title>
   </head>
-  <body class="flex min-h-screen min-w-80 place-items-center">
+  <body
+    class="flex min-h-screen min-w-80 place-items-center bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
+  >
     <main
-      class="mx-auto max-w-(--breakpoint-xl) p-8 text-center"
+      class="mx-auto w-full max-w-(--breakpoint-xl) p-8 text-left"
       id="root"
     ></main>
     <script type="module" src="/src/main.tsx"></script>
diff --git a/specs/001-text-diff/tasks.md b/specs/001-text-diff/tasks.md
index 71997ae..d23faef 100644
--- a/specs/001-text-diff/tasks.md
+++ b/specs/001-text-diff/tasks.md
@@ -19,8 +19,8 @@
 
 **Purpose**: Install the new runtime dependency and create the shared type definitions that all components depend on.
 
-- [ ] T001 Install `diff` npm package as a runtime dependency via `npm install diff`
-- [ ] T002 Create shared type definitions (`DiffType`, `DiffSegment`, `DiffResult`, `ViewMode`) in src/types/diff.ts
+- [x] T001 Install `diff` npm package as a runtime dependency via `npm install diff`
+- [x] T002 Create shared type definitions (`DiffType`, `DiffSegment`, `DiffResult`, `ViewMode`) in src/types/diff.ts
 
 ---
 
@@ -30,10 +30,10 @@
 
 **⚠️ CRITICAL**: No user story work can begin until this phase is complete.
 
-- [ ] T003 [P] Implement `useDiff` hook wrapping `diffWords()` from `diff` library in src/hooks/useDiff.ts
-- [ ] T004 [P] Write unit tests for `useDiff` hook in src/hooks/useDiff.test.ts (empty inputs → null, identical texts → hasChanges false, different texts → correct segments)
-- [ ] T005 [P] Implement `useMediaQuery` hook using `window.matchMedia` in src/hooks/useMediaQuery.ts
-- [ ] T006 [P] Write unit tests for `useMediaQuery` hook in src/hooks/useMediaQuery.test.ts (matches/no-match, resize updates, SSR fallback)
+- [x] T003 [P] Implement `useDiff` hook wrapping `diffWords()` from `diff` library in src/hooks/useDiff.ts
+- [x] T004 [P] Write unit tests for `useDiff` hook in src/hooks/useDiff.test.ts (empty inputs → null, identical texts → hasChanges false, different texts → correct segments)
+- [x] T005 [P] Implement `useMediaQuery` hook using `window.matchMedia` in src/hooks/useMediaQuery.ts
+- [x] T006 [P] Write unit tests for `useMediaQuery` hook in src/hooks/useMediaQuery.test.ts (matches/no-match, resize updates, SSR fallback)
 
 **Checkpoint**: Foundation ready — hooks tested, types defined, `diff` library installed. User story implementation can now begin.
 
@@ -49,16 +49,16 @@
 
 > **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
 
-- [ ] T007 [P] [US1] Write unit tests for `TextInput` component in src/components/TextInput/TextInput.test.tsx (renders textarea with label, line number gutter, scroll sync, onChange callback, placeholder)
-- [ ] T008 [P] [US1] Write unit tests for `App` component (US1 scope) in src/components/App/App.test.tsx (renders two text inputs with labels "Original Text" and "Modified Text", hides diff output when inputs are empty, hides diff output when only one input has text, shows "No differences found" when texts are identical, shows diff segments when texts differ)
+- [x] T007 [P] [US1] Write unit tests for `TextInput` component in src/components/TextInput/TextInput.test.tsx (renders textarea with label, line number gutter, scroll sync, onChange callback, placeholder)
+- [x] T008 [P] [US1] Write unit tests for `App` component (US1 scope) in src/components/App/App.test.tsx (renders two text inputs with labels "Original Text" and "Modified Text", hides diff output when inputs are empty, hides diff output when only one input has text, shows "No differences found" when texts are identical, shows diff segments when texts differ)
 
 ### Implementation for User Story 1
 
-- [ ] T009 [P] [US1] Create `TextInputProps` interface in src/components/TextInput/TextInput.types.ts
-- [ ] T010 [P] [US1] Create barrel export in src/components/TextInput/index.ts
-- [ ] T011 [US1] Implement `TextInput` component with `<textarea>`, line number gutter (`aria-hidden="true"`), scroll sync, and `<label>` in src/components/TextInput/TextInput.tsx
-- [ ] T012 [US1] Update `App` component to render two `TextInput` components (original + modified) with `useState` for each, responsive side-by-side layout (`flex flex-col md:flex-row`), fixed-height textareas with internal scroll, and basic diff output area showing `useDiff` result in src/components/App/App.tsx
-- [ ] T013 [US1] Remove placeholder content (brands, counter) from src/components/App/App.tsx and src/components/App/brands.ts
+- [x] T009 [P] [US1] Create `TextInputProps` interface in src/components/TextInput/TextInput.types.ts
+- [x] T010 [P] [US1] Create barrel export in src/components/TextInput/index.ts
+- [x] T011 [US1] Implement `TextInput` component with `<textarea>`, line number gutter (`aria-hidden="true"`), scroll sync, and `<label>` in src/components/TextInput/TextInput.tsx
+- [x] T012 [US1] Update `App` component to render two `TextInput` components (original + modified) with `useState` for each, responsive side-by-side layout (`flex flex-col md:flex-row`), fixed-height textareas with internal scroll, and basic diff output area showing `useDiff` result in src/components/App/App.tsx
+- [x] T013 [US1] Remove placeholder content (brands, counter) from src/components/App/App.tsx and src/components/App/brands.ts
 
 **Checkpoint**: User Story 1 is fully functional — two text inputs compute and display a basic diff. Testable independently with `npm run test:ci`.
 
@@ -74,19 +74,19 @@
 
 > **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
 
-- [ ] T014 [P] [US2] Write unit tests for `DiffViewer` component in src/components/DiffViewer/DiffViewer.test.tsx (renders null result as empty, renders "No differences found" with `role="status"` when hasChanges is false, renders added segments with green styling and `+` prefix, renders removed segments with red styling and `-` prefix, renders unchanged segments without highlighting, renders unified view correctly, renders side-by-side view correctly, wraps output in `aria-live="polite"`)
-- [ ] T015 [P] [US2] Write unit tests for `ViewToggle` component in src/components/ViewToggle/ViewToggle.test.tsx (renders two buttons for unified and side-by-side, highlights active mode, calls onModeChange on click, is keyboard accessible)
+- [x] T014 [P] [US2] Write unit tests for `DiffViewer` component in src/components/DiffViewer/DiffViewer.test.tsx (renders null result as empty, renders "No differences found" with `role="status"` when hasChanges is false, renders added segments with green styling and `+` prefix, renders removed segments with red styling and `-` prefix, renders unchanged segments without highlighting, renders unified view correctly, renders side-by-side view correctly, wraps output in `aria-live="polite"`)
+- [x] T015 [P] [US2] Write unit tests for `ViewToggle` component in src/components/ViewToggle/ViewToggle.test.tsx (renders two buttons for unified and side-by-side, highlights active mode, calls onModeChange on click, is keyboard accessible)
 
 ### Implementation for User Story 2
 
-- [ ] T016 [P] [US2] Create `DiffViewerProps` interface in src/components/DiffViewer/DiffViewer.types.ts
-- [ ] T017 [P] [US2] Create barrel export in src/components/DiffViewer/index.ts
-- [ ] T018 [P] [US2] Create `ViewToggleProps` interface in src/components/ViewToggle/ViewToggle.types.ts
-- [ ] T019 [P] [US2] Create barrel export in src/components/ViewToggle/index.ts
-- [ ] T020 [US2] Implement `DiffViewer` component with unified view (single column, interleaved changes with `+`/`-` markers, red/green Tailwind classes, dark mode variants) and side-by-side view (two-column grid, left=removed+unchanged, right=added+unchanged), `aria-live="polite"`, "No differences found" with `role="status"` in src/components/DiffViewer/DiffViewer.tsx
-- [ ] T021 [US2] Implement `ViewToggle` component with button group for unified/side-by-side, active state styling, `hidden md:flex` responsive visibility in src/components/ViewToggle/ViewToggle.tsx
-- [ ] T022 [US2] Update `App` component to integrate `DiffViewer`, `ViewToggle`, and `useMediaQuery` — add `viewMode` state, compute `effectiveViewMode` (forced unified on mobile), pass props to `DiffViewer` and `ViewToggle` in src/components/App/App.tsx
-- [ ] T023 [US2] Update `App` tests to cover view toggle integration, effective view mode on mobile, color-coded diff rendering, and dark mode classes in src/components/App/App.test.tsx
+- [x] T016 [P] [US2] Create `DiffViewerProps` interface in src/components/DiffViewer/DiffViewer.types.ts
+- [x] T017 [P] [US2] Create barrel export in src/components/DiffViewer/index.ts
+- [x] T018 [P] [US2] Create `ViewToggleProps` interface in src/components/ViewToggle/ViewToggle.types.ts
+- [x] T019 [P] [US2] Create barrel export in src/components/ViewToggle/index.ts
+- [x] T020 [US2] Implement `DiffViewer` component with unified view (single column, interleaved changes with `+`/`-` markers, red/green Tailwind classes, dark mode variants) and side-by-side view (two-column grid, left=removed+unchanged, right=added+unchanged), `aria-live="polite"`, "No differences found" with `role="status"` in src/components/DiffViewer/DiffViewer.tsx
+- [x] T021 [US2] Implement `ViewToggle` component with button group for unified/side-by-side, active state styling, `hidden md:flex` responsive visibility in src/components/ViewToggle/ViewToggle.tsx
+- [x] T022 [US2] Update `App` component to integrate `DiffViewer`, `ViewToggle`, and `useMediaQuery` — add `viewMode` state, compute `effectiveViewMode` (forced unified on mobile), pass props to `DiffViewer` and `ViewToggle` in src/components/App/App.tsx
+- [x] T023 [US2] Update `App` tests to cover view toggle integration, effective view mode on mobile, color-coded diff rendering, and dark mode classes in src/components/App/App.test.tsx
 
 **Checkpoint**: User Stories 1 AND 2 are both functional — full color-coded diff with unified/side-by-side toggle. Testable independently.
 
@@ -102,12 +102,12 @@
 
 > **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
 
-- [ ] T024 [US3] Write integration tests for real-time updates in src/components/App/App.test.tsx (diff updates on each keystroke in either textarea, diff updates when text is pasted, diff output transitions from hidden → visible as user types in second textarea, diff output transitions from visible → "No differences found" when user makes texts identical)
+- [x] T024 [US3] Write integration tests for real-time updates in src/components/App/App.test.tsx (diff updates on each keystroke in either textarea, diff updates when text is pasted, diff output transitions from hidden → visible as user types in second textarea, diff output transitions from visible → "No differences found" when user makes texts identical)
 
 ### Implementation for User Story 3
 
-- [ ] T025 [US3] Verify and ensure `App` component wires `TextInput` onChange directly to `useState` setters with no debounce or intermediate state in src/components/App/App.tsx (this should already work from US1 — validate and fix if needed)
-- [ ] T026 [US3] Verify edge case handling: clearing one input after diff is displayed updates output, pasting large text triggers immediate recomputation, special characters/unicode/emoji handled correctly in src/components/App/App.test.tsx
+- [x] T025 [US3] Verify and ensure `App` component wires `TextInput` onChange directly to `useState` setters with no debounce or intermediate state in src/components/App/App.tsx (this should already work from US1 — validate and fix if needed)
+- [x] T026 [US3] Verify edge case handling: clearing one input after diff is displayed updates output, pasting large text triggers immediate recomputation, special characters/unicode/emoji handled correctly in src/components/App/App.test.tsx
 
 **Checkpoint**: All three user stories are independently functional — real-time diff with color coding and view toggle.
 
@@ -117,11 +117,11 @@
 
 **Purpose**: Final quality pass affecting multiple user stories.
 
-- [ ] T027 [P] Apply dark mode styling (`dark:` variants) to all components — root element (`bg-white dark:bg-gray-900`), textareas, line gutters, diff highlights, toggle buttons per research.md color specs in src/components/
-- [ ] T028 [P] Apply responsive layout polish — verify stacked layout on mobile, side-by-side on `md:`, fixed-height textareas with internal scroll on all breakpoints in src/components/App/App.tsx
-- [ ] T029 [P] Accessibility audit — verify all `<label>` associations, `aria-live="polite"` on diff output, `role="status"` on no-diff message, `aria-hidden="true"` on line gutters, `+`/`-` text markers on diff segments, keyboard tab order
-- [ ] T030 Run all quality gates: `npm run lint`, `npm run lint:tsc`, `npm run test:ci`, `npm run build`
-- [ ] T031 Run quickstart.md validation — follow all steps in specs/001-text-diff/quickstart.md and verify they work end-to-end
+- [x] T027 [P] Apply dark mode styling (`dark:` variants) to all components — root element (`bg-white dark:bg-gray-900`), textareas, line gutters, diff highlights, toggle buttons per research.md color specs in src/components/
+- [x] T028 [P] Apply responsive layout polish — verify stacked layout on mobile, side-by-side on `md:`, fixed-height textareas with internal scroll on all breakpoints in src/components/App/App.tsx
+- [x] T029 [P] Accessibility audit — verify all `<label>` associations, `aria-live="polite"` on diff output, `role="status"` on no-diff message, `aria-hidden="true"` on line gutters, `+`/`-` text markers on diff segments, keyboard tab order
+- [x] T030 Run all quality gates: `npm run lint`, `npm run lint:tsc`, `npm run test:ci`, `npm run build`
+- [x] T031 Run quickstart.md validation — follow all steps in specs/001-text-diff/quickstart.md and verify they work end-to-end
 
 ---
 
diff --git a/src/components/App/App.test.tsx b/src/components/App/App.test.tsx
index 9bd0fa4..0966f51 100644
--- a/src/components/App/App.test.tsx
+++ b/src/components/App/App.test.tsx
@@ -3,30 +3,302 @@ import userEvent from '@testing-library/user-event';
 
 import App from '.';
 
+function createMockMatchMedia(matches: boolean) {
+  const listeners: (() => void)[] = [];
+
+  const mediaQueryList = {
+    matches,
+    media: '',
+    addEventListener: vi.fn((_event: string, handler: () => void) => {
+      listeners.push(handler);
+    }),
+    removeEventListener: vi.fn(),
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  };
+
+  return {
+    mockMatchMedia: vi.fn().mockReturnValue(mediaQueryList),
+    mediaQueryList,
+    triggerChange: (newMatches: boolean) => {
+      mediaQueryList.matches = newMatches;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+  };
+}
+
 describe('App component', () => {
-  it('renders without crashing', () => {
+  const originalMatchMedia = window.matchMedia;
+
+  beforeEach(() => {
+    const { mockMatchMedia } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it('renders heading', () => {
     render(<App />);
 
     const heading = screen.getByRole('heading', { level: 1 });
-    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Text Diff Checker');
+  });
+
+  it('renders two text inputs with correct labels', () => {
+    render(<App />);
+
+    expect(screen.getByLabelText('Original Text')).toBeInTheDocument();
+    expect(screen.getByLabelText('Modified Text')).toBeInTheDocument();
+  });
+
+  it('hides diff output when both inputs are empty', () => {
+    render(<App />);
+
+    expect(screen.queryByText('No differences found')).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('hides diff output when only original has text', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    await user.type(original, 'hello');
+
+    expect(screen.queryByText('No differences found')).not.toBeInTheDocument();
+  });
+
+  it('hides diff output when only modified has text', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const modified = screen.getByLabelText('Modified Text');
+    await user.type(modified, 'hello');
+
+    expect(screen.queryByText('No differences found')).not.toBeInTheDocument();
+  });
+
+  it('shows "No differences found" when texts are identical', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'hello');
+
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('shows diff segments when texts differ', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
 
-    const button = screen.getByRole('button', { name: /count is 0/i });
-    expect(button).toBeInTheDocument();
+    await user.type(original, 'hello world');
+    await user.type(modified, 'hello there');
 
-    const images = screen.getAllByRole('img');
-    expect(images).toHaveLength(3);
+    expect(screen.queryByText('No differences found')).not.toBeInTheDocument();
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
   });
 
-  it('button click increments count', async () => {
+  it('renders view toggle when diff is visible on desktop', async () => {
+    const { mockMatchMedia } = createMockMatchMedia(true);
+    window.matchMedia = mockMatchMedia;
+
     const user = userEvent.setup();
     render(<App />);
 
-    const button = screen.getByRole('button', { name: /count is 0/i });
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello world');
+    await user.type(modified, 'hello there');
+
+    expect(
+      screen.getByRole('button', { name: /unified/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /side-by-side/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('switches view mode when toggle is clicked', async () => {
+    const { mockMatchMedia } = createMockMatchMedia(true);
+    window.matchMedia = mockMatchMedia;
+
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello world');
+    await user.type(modified, 'hello there');
+
+    const sideBySideButton = screen.getByRole('button', {
+      name: /side-by-side/i,
+    });
+    await user.click(sideBySideButton);
+
+    const columns = container.querySelectorAll('[data-testid^="diff-column-"]');
+    expect(columns).toHaveLength(2);
+  });
+
+  it('forces unified view on mobile regardless of toggle state', async () => {
+    const { mockMatchMedia } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello world');
+    await user.type(modified, 'hello there');
+
+    const columns = container.querySelectorAll('[data-testid^="diff-column-"]');
+    expect(columns).toHaveLength(0);
+  });
+
+  it('renders color-coded diff segments with correct classes', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello world');
+    await user.type(modified, 'hello there');
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    const addedSpan = diffOutput?.querySelector('.bg-green-100');
+    expect(addedSpan).toBeInTheDocument();
+    expect(addedSpan?.textContent).toContain('there');
+
+    const removedSpan = diffOutput?.querySelector('.bg-red-100');
+    expect(removedSpan).toBeInTheDocument();
+    expect(removedSpan?.textContent).toContain('world');
+  });
+
+  it('updates diff on each keystroke in original textarea', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(modified, 'abc');
+    await user.type(original, 'a');
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
+
+    await user.type(original, 'bc');
+
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+  });
+
+  it('updates diff on each keystroke in modified textarea', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'abc');
+    await user.type(modified, 'a');
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
+
+    await user.type(modified, 'bc');
+
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+  });
+
+  it('transitions from hidden to visible as user types in second textarea', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+
+    expect(
+      container.querySelector('[aria-live="polite"]'),
+    ).not.toBeInTheDocument();
+
+    await user.type(modified, 'hi');
+
+    expect(container.querySelector('[aria-live="polite"]')).toBeInTheDocument();
+  });
+
+  it('transitions to "No differences found" when user makes texts identical', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    expect(screen.queryByText('No differences found')).not.toBeInTheDocument();
+
+    await user.clear(modified);
+    await user.type(modified, 'hello');
+
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+  });
+
+  it('updates output when clearing one input after diff is displayed', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'hello');
+    await user.type(modified, 'world');
+
+    expect(container.querySelector('[aria-live="polite"]')).toBeInTheDocument();
+
+    await user.clear(original);
+
+    expect(
+      container.querySelector('[aria-live="polite"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('handles special characters and emoji correctly', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+
+    const original = screen.getByLabelText('Original Text');
+    const modified = screen.getByLabelText('Modified Text');
+
+    await user.type(original, 'café ☕');
+    await user.type(modified, 'café 🍵');
 
-    await user.click(button);
-    expect(button).toHaveTextContent('count is 1');
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
 
-    await user.click(button);
-    expect(button).toHaveTextContent('count is 2');
+    const addedSpan = diffOutput?.querySelector('.bg-green-100');
+    expect(addedSpan).toBeInTheDocument();
   });
 });
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index cf97bf3..3217300 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,47 +1,49 @@
 import { useState } from 'react';
-
-import brands from './brands';
+import DiffViewer from 'src/components/DiffViewer';
+import TextInput from 'src/components/TextInput';
+import ViewToggle from 'src/components/ViewToggle';
+import { useDiff } from 'src/hooks/useDiff';
+import { useMediaQuery } from 'src/hooks/useMediaQuery';
+import type { ViewMode } from 'src/types/diff';
 
 export default function App() {
-  const [count, setCount] = useState(0);
+  const [originalText, setOriginalText] = useState('');
+  const [modifiedText, setModifiedText] = useState('');
+  const [viewMode, setViewMode] = useState<ViewMode>('unified');
+
+  const diffResult = useDiff(originalText, modifiedText);
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const effectiveViewMode = isDesktop ? viewMode : 'unified';
 
   return (
     <>
-      <div className="flex justify-center">
-        {brands.map(({ alt, href, src }) => (
-          <a key={href} href={href} rel="nofollow noopener" target="_blank">
-            <img
-              src={src}
-              className="m-4 h-24 hover:drop-shadow-2xl"
-              alt={alt}
-            />
-          </a>
-        ))}
-      </div>
-
-      <h1 className="my-10 text-5xl font-bold">diff</h1>
-
-      <div className="p-8">
-        <button
-          className="cursor-pointer rounded-md border border-slate-300 bg-slate-50 px-4 py-2 text-center text-sm font-medium text-slate-800 shadow-xs transition-all hover:border-slate-800 focus:border-slate-800 focus:bg-slate-50 active:border-slate-800 active:bg-slate-50 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
-          onClick={() => {
-            setCount((count) => count + 1);
-          }}
-          type="button"
-        >
-          count is {count}
-        </button>
+      <h1 className="mb-6 text-3xl font-bold text-gray-900 dark:text-gray-100">
+        Text Diff Checker
+      </h1>
 
-        <p className="my-4 text-slate-600">
-          Edit{' '}
-          <code className="font-[monospace]">src/components/App/App.tsx</code>{' '}
-          and save to test HMR
-        </p>
+      <div className="flex flex-col gap-4 md:flex-row">
+        <TextInput
+          label="Original Text"
+          value={originalText}
+          onChange={setOriginalText}
+          placeholder="Paste original text here..."
+        />
+        <TextInput
+          label="Modified Text"
+          value={modifiedText}
+          onChange={setModifiedText}
+          placeholder="Paste modified text here..."
+        />
       </div>
 
-      <p className="text-slate-400">
-        Click on the Vite, React, and Tailwind logos to learn more about diff
-      </p>
+      {diffResult && (
+        <div className="mt-6">
+          <div className="mb-4 flex justify-end">
+            <ViewToggle activeMode={viewMode} onModeChange={setViewMode} />
+          </div>
+          <DiffViewer result={diffResult} viewMode={effectiveViewMode} />
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/components/App/brands.ts b/src/components/App/brands.ts
deleted file mode 100644
index ef16fb3..0000000
--- a/src/components/App/brands.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import react from '/react.svg';
-import tailwind from '/tailwind.svg';
-import vite from '/vite.svg';
-
-export default [
-  { alt: 'Vite logo', href: 'https://vite.dev', src: vite },
-  { alt: 'React logo', href: 'https://react.dev', src: react },
-  { alt: 'Tailwind logo', href: 'https://tailwindcss.com', src: tailwind },
-];
diff --git a/src/components/DiffViewer/DiffViewer.test.tsx b/src/components/DiffViewer/DiffViewer.test.tsx
new file mode 100644
index 0000000..f4d4482
--- /dev/null
+++ b/src/components/DiffViewer/DiffViewer.test.tsx
@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react';
+import type { DiffResult } from 'src/types/diff';
+
+import DiffViewer from '.';
+
+describe('DiffViewer component', () => {
+  it('renders nothing when result is null', () => {
+    const { container } = render(
+      <DiffViewer result={null} viewMode="unified" />,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders "No differences found" with role="status" when hasChanges is false', () => {
+    const result: DiffResult = {
+      segments: [{ value: 'hello', type: 'unchanged' }],
+      hasChanges: false,
+    };
+
+    render(<DiffViewer result={result} viewMode="unified" />);
+
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders added segments with green styling and + prefix', () => {
+    const result: DiffResult = {
+      segments: [{ value: 'added text', type: 'added' }],
+      hasChanges: true,
+    };
+
+    render(<DiffViewer result={result} viewMode="unified" />);
+
+    const addedElement = screen.getByText(/added text/);
+    expect(addedElement).toBeInTheDocument();
+    expect(addedElement.textContent).toContain('+');
+    expect(addedElement.className).toContain('bg-green-100');
+  });
+
+  it('renders removed segments with red styling and - prefix', () => {
+    const result: DiffResult = {
+      segments: [{ value: 'removed text', type: 'removed' }],
+      hasChanges: true,
+    };
+
+    render(<DiffViewer result={result} viewMode="unified" />);
+
+    const removedElement = screen.getByText(/removed text/);
+    expect(removedElement).toBeInTheDocument();
+    expect(removedElement.textContent).toContain('-');
+    expect(removedElement.className).toContain('bg-red-100');
+  });
+
+  it('renders unchanged segments without highlighting', () => {
+    const result: DiffResult = {
+      segments: [
+        { value: 'unchanged', type: 'unchanged' },
+        { value: 'added', type: 'added' },
+      ],
+      hasChanges: true,
+    };
+
+    render(<DiffViewer result={result} viewMode="unified" />);
+
+    const unchangedElement = screen.getByText('unchanged');
+    expect(unchangedElement).toBeInTheDocument();
+    expect(unchangedElement.className).not.toContain('bg-green');
+    expect(unchangedElement.className).not.toContain('bg-red');
+  });
+
+  it('renders unified view correctly', () => {
+    const result: DiffResult = {
+      segments: [
+        { value: 'hello ', type: 'unchanged' },
+        { value: 'world', type: 'removed' },
+        { value: 'there', type: 'added' },
+      ],
+      hasChanges: true,
+    };
+
+    const { container } = render(
+      <DiffViewer result={result} viewMode="unified" />,
+    );
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
+    expect(screen.getByText(/world/)).toBeInTheDocument();
+    expect(screen.getByText(/there/)).toBeInTheDocument();
+  });
+
+  it('renders side-by-side view correctly', () => {
+    const result: DiffResult = {
+      segments: [
+        { value: 'hello ', type: 'unchanged' },
+        { value: 'world', type: 'removed' },
+        { value: 'there', type: 'added' },
+      ],
+      hasChanges: true,
+    };
+
+    const { container } = render(
+      <DiffViewer result={result} viewMode="side-by-side" />,
+    );
+
+    const diffOutput = container.querySelector('[aria-live="polite"]');
+    expect(diffOutput).toBeInTheDocument();
+
+    const columns = container.querySelectorAll('[data-testid^="diff-column-"]');
+    expect(columns).toHaveLength(2);
+  });
+
+  it('wraps output in aria-live="polite"', () => {
+    const result: DiffResult = {
+      segments: [{ value: 'test', type: 'unchanged' }],
+      hasChanges: false,
+    };
+
+    const { container } = render(
+      <DiffViewer result={result} viewMode="unified" />,
+    );
+
+    const liveRegion = container.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeInTheDocument();
+  });
+});
diff --git a/src/components/DiffViewer/DiffViewer.tsx b/src/components/DiffViewer/DiffViewer.tsx
new file mode 100644
index 0000000..bc20785
--- /dev/null
+++ b/src/components/DiffViewer/DiffViewer.tsx
@@ -0,0 +1,101 @@
+import type { DiffViewerProps } from './DiffViewer.types';
+
+export default function DiffViewer({ result, viewMode }: DiffViewerProps) {
+  if (!result) {
+    return null;
+  }
+
+  if (!result.hasChanges) {
+    return (
+      <div aria-live="polite">
+        <p role="status" className="text-gray-500 dark:text-gray-400">
+          No differences found
+        </p>
+      </div>
+    );
+  }
+
+  if (viewMode === 'side-by-side') {
+    return (
+      <div aria-live="polite">
+        <div className="grid grid-cols-2 gap-4">
+          <div
+            data-testid="diff-column-original"
+            className="rounded-md border border-gray-300 bg-white p-4 font-mono text-sm whitespace-pre-wrap dark:border-gray-600 dark:bg-gray-800"
+          >
+            {result.segments.map((segment) => {
+              const key = `orig-${segment.type}-${segment.value}`;
+              if (segment.type === 'removed') {
+                return (
+                  <span
+                    key={key}
+                    className="bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
+                  >
+                    -{segment.value}
+                  </span>
+                );
+              }
+              if (segment.type === 'unchanged') {
+                return <span key={key}>{segment.value}</span>;
+              }
+              return null;
+            })}
+          </div>
+          <div
+            data-testid="diff-column-modified"
+            className="rounded-md border border-gray-300 bg-white p-4 font-mono text-sm whitespace-pre-wrap dark:border-gray-600 dark:bg-gray-800"
+          >
+            {result.segments.map((segment) => {
+              const key = `mod-${segment.type}-${segment.value}`;
+              if (segment.type === 'added') {
+                return (
+                  <span
+                    key={key}
+                    className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+                  >
+                    +{segment.value}
+                  </span>
+                );
+              }
+              if (segment.type === 'unchanged') {
+                return <span key={key}>{segment.value}</span>;
+              }
+              return null;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div aria-live="polite">
+      <div className="rounded-md border border-gray-300 bg-white p-4 font-mono text-sm whitespace-pre-wrap dark:border-gray-600 dark:bg-gray-800">
+        {result.segments.map((segment) => {
+          const key = `${segment.type}-${segment.value}`;
+          if (segment.type === 'added') {
+            return (
+              <span
+                key={key}
+                className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+              >
+                +{segment.value}
+              </span>
+            );
+          }
+          if (segment.type === 'removed') {
+            return (
+              <span
+                key={key}
+                className="bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
+              >
+                -{segment.value}
+              </span>
+            );
+          }
+          return <span key={key}>{segment.value}</span>;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiffViewer/DiffViewer.types.ts b/src/components/DiffViewer/DiffViewer.types.ts
new file mode 100644
index 0000000..952680e
--- /dev/null
+++ b/src/components/DiffViewer/DiffViewer.types.ts
@@ -0,0 +1,8 @@
+import type { DiffResult, ViewMode } from 'src/types/diff';
+
+export interface DiffViewerProps {
+  /** The computed diff result, null when output should be hidden */
+  result: DiffResult | null;
+  /** The effective display mode (forced 'unified' on mobile) */
+  viewMode: ViewMode;
+}
diff --git a/src/components/DiffViewer/index.ts b/src/components/DiffViewer/index.ts
new file mode 100644
index 0000000..0f01a8c
--- /dev/null
+++ b/src/components/DiffViewer/index.ts
@@ -0,0 +1 @@
+export { default } from './DiffViewer';
diff --git a/src/components/TextInput/TextInput.test.tsx b/src/components/TextInput/TextInput.test.tsx
new file mode 100644
index 0000000..35cb27a
--- /dev/null
+++ b/src/components/TextInput/TextInput.test.tsx
@@ -0,0 +1,88 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TextInput from '.';
+
+describe('TextInput component', () => {
+  const defaultProps = {
+    label: 'Original Text',
+    value: '',
+    onChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders textarea with associated label', () => {
+    render(<TextInput {...defaultProps} />);
+
+    const textarea = screen.getByLabelText('Original Text');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.tagName).toBe('TEXTAREA');
+  });
+
+  it('renders with placeholder text', () => {
+    render(<TextInput {...defaultProps} placeholder="Enter text here..." />);
+
+    const textarea = screen.getByPlaceholderText('Enter text here...');
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('displays the current value', () => {
+    render(<TextInput {...defaultProps} value="hello world" />);
+
+    const textarea = screen.getByLabelText('Original Text');
+    expect(textarea).toHaveValue('hello world');
+  });
+
+  it('calls onChange when user types', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<TextInput {...defaultProps} onChange={onChange} />);
+
+    const textarea = screen.getByLabelText('Original Text');
+    await user.type(textarea, 'a');
+
+    expect(onChange).toHaveBeenCalledWith('a');
+  });
+
+  it('renders line number gutter with aria-hidden', () => {
+    render(<TextInput {...defaultProps} value="line 1\nline 2\nline 3" />);
+
+    const gutter = screen.getByTestId('line-gutter');
+    expect(gutter).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('displays correct number of line numbers', () => {
+    render(<TextInput {...defaultProps} value={'line 1\nline 2\nline 3'} />);
+
+    const gutter = screen.getByTestId('line-gutter');
+    expect(gutter).toHaveTextContent('1');
+    expect(gutter).toHaveTextContent('2');
+    expect(gutter).toHaveTextContent('3');
+  });
+
+  it('shows at least one line number for empty input', () => {
+    render(<TextInput {...defaultProps} value="" />);
+
+    const gutter = screen.getByTestId('line-gutter');
+    expect(gutter).toHaveTextContent('1');
+  });
+
+  it('syncs gutter scroll with textarea scroll', () => {
+    render(<TextInput {...defaultProps} value="line 1\nline 2" />);
+
+    const textarea = screen.getByLabelText('Original Text');
+    const gutter = screen.getByTestId('line-gutter');
+
+    Object.defineProperty(textarea, 'scrollTop', {
+      writable: true,
+      value: 50,
+    });
+
+    textarea.dispatchEvent(new Event('scroll', { bubbles: true }));
+
+    expect(gutter.scrollTop).toBe(50);
+  });
+});
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
new file mode 100644
index 0000000..cf83b49
--- /dev/null
+++ b/src/components/TextInput/TextInput.tsx
@@ -0,0 +1,55 @@
+import { useId, useRef } from 'react';
+
+import type { TextInputProps } from './TextInput.types';
+
+export default function TextInput({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: TextInputProps) {
+  const id = useId();
+  const gutterRef = useRef<HTMLDivElement>(null);
+
+  const lineCount = value ? value.split('\n').length : 1;
+
+  const handleScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
+    if (gutterRef.current) {
+      gutterRef.current.scrollTop = event.currentTarget.scrollTop;
+    }
+  };
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <label
+        htmlFor={id}
+        className="mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
+      >
+        {label}
+      </label>
+      <div className="flex max-h-64 overflow-hidden rounded-md border border-gray-300 dark:border-gray-600">
+        <div
+          ref={gutterRef}
+          data-testid="line-gutter"
+          aria-hidden="true"
+          className="overflow-hidden bg-gray-50 px-2 py-2 text-right font-mono text-sm leading-6 text-gray-400 select-none dark:bg-gray-800 dark:text-gray-500"
+        >
+          {Array.from({ length: lineCount }, (_, i) => (
+            <div key={i}>{i + 1}</div>
+          ))}
+        </div>
+        <textarea
+          id={id}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+          onScroll={handleScroll}
+          placeholder={placeholder}
+          className="flex-1 resize-none overflow-y-auto bg-white px-3 py-2 font-mono text-sm leading-6 text-gray-900 outline-none dark:bg-gray-800 dark:text-gray-100"
+          spellCheck={false}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TextInput/TextInput.types.ts b/src/components/TextInput/TextInput.types.ts
new file mode 100644
index 0000000..fa685f9
--- /dev/null
+++ b/src/components/TextInput/TextInput.types.ts
@@ -0,0 +1,10 @@
+export interface TextInputProps {
+  /** Accessible label for the textarea */
+  label: string;
+  /** Current text value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+}
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
new file mode 100644
index 0000000..9462fdb
--- /dev/null
+++ b/src/components/TextInput/index.ts
@@ -0,0 +1 @@
+export { default } from './TextInput';
diff --git a/src/components/ViewToggle/ViewToggle.test.tsx b/src/components/ViewToggle/ViewToggle.test.tsx
new file mode 100644
index 0000000..79725ea
--- /dev/null
+++ b/src/components/ViewToggle/ViewToggle.test.tsx
@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ViewToggle from '.';
+
+describe('ViewToggle component', () => {
+  const defaultProps = {
+    activeMode: 'unified' as const,
+    onModeChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders two buttons for unified and side-by-side', () => {
+    render(<ViewToggle {...defaultProps} />);
+
+    expect(
+      screen.getByRole('button', { name: /unified/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /side-by-side/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('highlights active unified mode', () => {
+    render(<ViewToggle {...defaultProps} activeMode="unified" />);
+
+    const unifiedButton = screen.getByRole('button', { name: /unified/i });
+    expect(unifiedButton.className).toContain('bg-blue-500');
+  });
+
+  it('highlights active side-by-side mode', () => {
+    render(<ViewToggle {...defaultProps} activeMode="side-by-side" />);
+
+    const sideBySideButton = screen.getByRole('button', {
+      name: /side-by-side/i,
+    });
+    expect(sideBySideButton.className).toContain('bg-blue-500');
+  });
+
+  it('calls onModeChange with "unified" when unified button is clicked', async () => {
+    const user = userEvent.setup();
+    const onModeChange = vi.fn();
+    render(
+      <ViewToggle activeMode="side-by-side" onModeChange={onModeChange} />,
+    );
+
+    const unifiedButton = screen.getByRole('button', { name: /unified/i });
+    await user.click(unifiedButton);
+
+    expect(onModeChange).toHaveBeenCalledWith('unified');
+  });
+
+  it('calls onModeChange with "side-by-side" when side-by-side button is clicked', async () => {
+    const user = userEvent.setup();
+    const onModeChange = vi.fn();
+    render(<ViewToggle activeMode="unified" onModeChange={onModeChange} />);
+
+    const sideBySideButton = screen.getByRole('button', {
+      name: /side-by-side/i,
+    });
+    await user.click(sideBySideButton);
+
+    expect(onModeChange).toHaveBeenCalledWith('side-by-side');
+  });
+
+  it('is keyboard accessible', async () => {
+    const user = userEvent.setup();
+    const onModeChange = vi.fn();
+    render(<ViewToggle activeMode="unified" onModeChange={onModeChange} />);
+
+    await user.tab();
+    const unifiedButton = screen.getByRole('button', { name: /unified/i });
+    expect(unifiedButton).toHaveFocus();
+
+    await user.tab();
+    const sideBySideButton = screen.getByRole('button', {
+      name: /side-by-side/i,
+    });
+    expect(sideBySideButton).toHaveFocus();
+
+    await user.keyboard('{Enter}');
+    expect(onModeChange).toHaveBeenCalledWith('side-by-side');
+  });
+});
diff --git a/src/components/ViewToggle/ViewToggle.tsx b/src/components/ViewToggle/ViewToggle.tsx
new file mode 100644
index 0000000..12330f9
--- /dev/null
+++ b/src/components/ViewToggle/ViewToggle.tsx
@@ -0,0 +1,41 @@
+import type { ViewToggleProps } from './ViewToggle.types';
+
+export default function ViewToggle({
+  activeMode,
+  onModeChange,
+}: ViewToggleProps) {
+  return (
+    <div
+      className="hidden md:flex md:gap-1"
+      role="group"
+      aria-label="View mode"
+    >
+      <button
+        type="button"
+        onClick={() => {
+          onModeChange('unified');
+        }}
+        className={`rounded-l-md px-3 py-1.5 text-sm font-medium transition-colors ${
+          activeMode === 'unified'
+            ? 'bg-blue-500 text-white dark:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+        }`}
+      >
+        Unified
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          onModeChange('side-by-side');
+        }}
+        className={`rounded-r-md px-3 py-1.5 text-sm font-medium transition-colors ${
+          activeMode === 'side-by-side'
+            ? 'bg-blue-500 text-white dark:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+        }`}
+      >
+        Side-by-Side
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/ViewToggle/ViewToggle.types.ts b/src/components/ViewToggle/ViewToggle.types.ts
new file mode 100644
index 0000000..c9961d2
--- /dev/null
+++ b/src/components/ViewToggle/ViewToggle.types.ts
@@ -0,0 +1,8 @@
+import type { ViewMode } from 'src/types/diff';
+
+export interface ViewToggleProps {
+  /** The currently active view mode */
+  activeMode: ViewMode;
+  /** Callback when the user selects a different mode */
+  onModeChange: (mode: ViewMode) => void;
+}
diff --git a/src/components/ViewToggle/index.ts b/src/components/ViewToggle/index.ts
new file mode 100644
index 0000000..c64590b
--- /dev/null
+++ b/src/components/ViewToggle/index.ts
@@ -0,0 +1 @@
+export { default } from './ViewToggle';
diff --git a/src/hooks/useDiff.test.ts b/src/hooks/useDiff.test.ts
new file mode 100644
index 0000000..03368fa
--- /dev/null
+++ b/src/hooks/useDiff.test.ts
@@ -0,0 +1,83 @@
+import { renderHook } from '@testing-library/react';
+
+import { useDiff } from './useDiff';
+
+describe('useDiff', () => {
+  it('returns null when both inputs are empty', () => {
+    const { result } = renderHook(() => useDiff('', ''));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns null when original text is empty', () => {
+    const { result } = renderHook(() => useDiff('', 'some text'));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns null when modified text is empty', () => {
+    const { result } = renderHook(() => useDiff('some text', ''));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns hasChanges false when texts are identical', () => {
+    const { result } = renderHook(() => useDiff('hello world', 'hello world'));
+    expect(result.current).not.toBeNull();
+    expect(result.current?.hasChanges).toBe(false);
+    expect(result.current?.segments).toEqual([
+      { value: 'hello world', type: 'unchanged' },
+    ]);
+  });
+
+  it('returns correct segments for different texts', () => {
+    const { result } = renderHook(() => useDiff('hello world', 'hello there'));
+    expect(result.current).not.toBeNull();
+    expect(result.current?.hasChanges).toBe(true);
+
+    const segments = result.current?.segments ?? [];
+    expect(segments.length).toBeGreaterThan(1);
+
+    const hasAdded = segments.some((s) => s.type === 'added');
+    const hasRemoved = segments.some((s) => s.type === 'removed');
+    const hasUnchanged = segments.some((s) => s.type === 'unchanged');
+
+    expect(hasAdded).toBe(true);
+    expect(hasRemoved).toBe(true);
+    expect(hasUnchanged).toBe(true);
+  });
+
+  it('detects added text correctly', () => {
+    const { result } = renderHook(() => useDiff('hello', 'hello world'));
+    expect(result.current?.hasChanges).toBe(true);
+
+    const addedSegments = result.current?.segments.filter(
+      (s) => s.type === 'added',
+    );
+    expect(addedSegments?.length).toBeGreaterThan(0);
+  });
+
+  it('detects removed text correctly', () => {
+    const { result } = renderHook(() => useDiff('hello world', 'hello'));
+    expect(result.current?.hasChanges).toBe(true);
+
+    const removedSegments = result.current?.segments.filter(
+      (s) => s.type === 'removed',
+    );
+    expect(removedSegments?.length).toBeGreaterThan(0);
+  });
+
+  it('handles special characters and unicode', () => {
+    const { result } = renderHook(() => useDiff('café ☕', 'café 🍵'));
+    expect(result.current).not.toBeNull();
+    expect(result.current?.hasChanges).toBe(true);
+  });
+
+  it('memoizes result for same inputs', () => {
+    const { result, rerender } = renderHook(
+      ({ original, modified }) => useDiff(original, modified),
+      { initialProps: { original: 'hello', modified: 'world' } },
+    );
+
+    const firstResult = result.current;
+    rerender({ original: 'hello', modified: 'world' });
+    expect(result.current).toBe(firstResult);
+  });
+});
diff --git a/src/hooks/useDiff.ts b/src/hooks/useDiff.ts
new file mode 100644
index 0000000..c502045
--- /dev/null
+++ b/src/hooks/useDiff.ts
@@ -0,0 +1,31 @@
+import { diffWords } from 'diff';
+import { useMemo } from 'react';
+import type { DiffResult, DiffSegment } from 'src/types/diff';
+
+/**
+ * Computes a word-level diff between two strings.
+ * Returns null when either input is empty (FR-005).
+ */
+export function useDiff(
+  originalText: string,
+  modifiedText: string,
+): DiffResult | null {
+  return useMemo(() => {
+    if (!originalText || !modifiedText) {
+      return null;
+    }
+
+    const changes = diffWords(originalText, modifiedText);
+
+    const segments: DiffSegment[] = changes.map((change) => ({
+      value: change.value,
+      type: change.added ? 'added' : change.removed ? 'removed' : 'unchanged',
+    }));
+
+    const hasChanges = segments.some(
+      (segment) => segment.type === 'added' || segment.type === 'removed',
+    );
+
+    return { segments, hasChanges };
+  }, [originalText, modifiedText]);
+}
diff --git a/src/hooks/useMediaQuery.test.ts b/src/hooks/useMediaQuery.test.ts
new file mode 100644
index 0000000..adc01a6
--- /dev/null
+++ b/src/hooks/useMediaQuery.test.ts
@@ -0,0 +1,122 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useMediaQuery } from './useMediaQuery';
+
+interface MockMediaQueryList {
+  matches: boolean;
+  media: string;
+  addEventListener: ReturnType<typeof vi.fn>;
+  removeEventListener: ReturnType<typeof vi.fn>;
+  onchange: null;
+  addListener: ReturnType<typeof vi.fn>;
+  removeListener: ReturnType<typeof vi.fn>;
+  dispatchEvent: ReturnType<typeof vi.fn>;
+}
+
+function createMockMatchMedia(matches: boolean) {
+  const listeners: ((event: MediaQueryListEvent) => void)[] = [];
+
+  const mediaQueryList: MockMediaQueryList = {
+    matches,
+    media: '',
+    addEventListener: vi.fn(
+      (_event: string, handler: (event: MediaQueryListEvent) => void) => {
+        listeners.push(handler);
+      },
+    ),
+    removeEventListener: vi.fn(
+      (_event: string, handler: (event: MediaQueryListEvent) => void) => {
+        const index = listeners.indexOf(handler);
+        if (index > -1) {
+          listeners.splice(index, 1);
+        }
+      },
+    ),
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  };
+
+  const mockMatchMedia = vi.fn().mockReturnValue(mediaQueryList);
+
+  return {
+    mockMatchMedia,
+    mediaQueryList,
+    triggerChange: (newMatches: boolean) => {
+      mediaQueryList.matches = newMatches;
+      for (const listener of listeners) {
+        listener({ matches: newMatches } as MediaQueryListEvent);
+      }
+    },
+  };
+}
+
+describe('useMediaQuery', () => {
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it('returns true when media query matches', () => {
+    const { mockMatchMedia } = createMockMatchMedia(true);
+    window.matchMedia = mockMatchMedia;
+
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+
+    expect(result.current).toBe(true);
+    expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 768px)');
+  });
+
+  it('returns false when media query does not match', () => {
+    const { mockMatchMedia } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('updates when media query changes', () => {
+    const { mockMatchMedia, triggerChange } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+
+    expect(result.current).toBe(false);
+
+    act(() => {
+      triggerChange(true);
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('removes event listener on unmount', () => {
+    const { mockMatchMedia, mediaQueryList } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+
+    const { unmount } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+
+    unmount();
+
+    expect(mediaQueryList.removeEventListener).toHaveBeenCalledWith(
+      'change',
+      expect.any(Function),
+    );
+  });
+
+  it('handles query change by re-subscribing', () => {
+    const { mockMatchMedia } = createMockMatchMedia(false);
+    window.matchMedia = mockMatchMedia;
+
+    const { rerender } = renderHook(({ query }) => useMediaQuery(query), {
+      initialProps: { query: '(min-width: 768px)' },
+    });
+
+    rerender({ query: '(min-width: 1024px)' });
+
+    expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 1024px)');
+  });
+});
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..184d3f2
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,27 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+/**
+ * Returns true when the viewport matches the given media query string.
+ * Used to determine effective ViewMode on mobile (FR-003, FR-010).
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (callback: () => void) => {
+      const mediaQueryList = window.matchMedia(query);
+      mediaQueryList.addEventListener('change', callback);
+      return () => {
+        mediaQueryList.removeEventListener('change', callback);
+      };
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(
+    () => window.matchMedia(query).matches,
+    [query],
+  );
+
+  const getServerSnapshot = useCallback(() => false, []);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
diff --git a/src/types/diff.ts b/src/types/diff.ts
new file mode 100644
index 0000000..4735571
--- /dev/null
+++ b/src/types/diff.ts
@@ -0,0 +1,21 @@
+/** Classification of a diff segment */
+export type DiffType = 'added' | 'removed' | 'unchanged';
+
+/** A contiguous portion of text within a diff result */
+export interface DiffSegment {
+  /** The text content of this segment */
+  value: string;
+  /** The diff classification */
+  type: DiffType;
+}
+
+/** The complete diff computation result */
+export interface DiffResult {
+  /** Ordered list of diff segments */
+  segments: DiffSegment[];
+  /** True if any segment is added or removed */
+  hasChanges: boolean;
+}
+
+/** Available diff display modes */
+export type ViewMode = 'unified' | 'side-by-side';

From 9f65a5f55cfe066f3986e340cc4c62a5dccdec2f Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 03:00:15 -0500
Subject: [PATCH 12/19] refactor: rename app to `Diff`

---
 README.md                                      | 6 +++---
 index.html                                     | 2 +-
 specs/001-text-diff/checklists/requirements.md | 2 +-
 specs/001-text-diff/data-model.md              | 2 +-
 specs/001-text-diff/plan.md                    | 2 +-
 specs/001-text-diff/quickstart.md              | 2 +-
 specs/001-text-diff/research.md                | 2 +-
 specs/001-text-diff/spec.md                    | 2 +-
 specs/001-text-diff/tasks.md                   | 2 +-
 src/components/App/App.test.tsx                | 2 +-
 src/components/App/App.tsx                     | 2 +-
 11 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 337cb15..275a235 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-# diff
+# Diff
 
 [![build](https://github.com/remarkablemark/diff/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/build.yml)
 [![test](https://github.com/remarkablemark/diff/actions/workflows/test.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/test.yml)
 
-📝 Check the diff between 2 files:
+📝 Compare the diff between texts:
 
-- [diff](https://remarkablemark.org/diff/)
+- [site](https://remarkablemark.org/diff/)
 
 ## Install
 
diff --git a/index.html b/index.html
index 8c60719..ba24e70 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>diff</title>
+    <title>Diff</title>
   </head>
   <body
     class="flex min-h-screen min-w-80 place-items-center bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
index e4f2088..be09a5f 100644
--- a/specs/001-text-diff/checklists/requirements.md
+++ b/specs/001-text-diff/checklists/requirements.md
@@ -1,4 +1,4 @@
-# Specification Quality Checklist: Text Diff Checker
+# Specification Quality Checklist: Diff
 
 **Purpose**: Validate specification completeness and quality before proceeding to planning
 **Created**: 2026-02-07
diff --git a/specs/001-text-diff/data-model.md b/specs/001-text-diff/data-model.md
index 8fc8b85..1cc0306 100644
--- a/specs/001-text-diff/data-model.md
+++ b/specs/001-text-diff/data-model.md
@@ -1,4 +1,4 @@
-# Data Model: Text Diff Checker
+# Data Model: Diff
 
 **Feature Branch**: `001-text-diff`
 **Date**: 2026-02-07
diff --git a/specs/001-text-diff/plan.md b/specs/001-text-diff/plan.md
index 5e202ea..dbd7642 100644
--- a/specs/001-text-diff/plan.md
+++ b/specs/001-text-diff/plan.md
@@ -1,4 +1,4 @@
-# Implementation Plan: Text Diff Checker
+# Implementation Plan: Diff
 
 **Branch**: `001-text-diff` | **Date**: 2026-02-07 | **Spec**: [spec.md](./spec.md)
 **Input**: Feature specification from `/specs/001-text-diff/spec.md`
diff --git a/specs/001-text-diff/quickstart.md b/specs/001-text-diff/quickstart.md
index 79e0377..c93036a 100644
--- a/specs/001-text-diff/quickstart.md
+++ b/specs/001-text-diff/quickstart.md
@@ -1,4 +1,4 @@
-# Quickstart: Text Diff Checker
+# Quickstart: Diff
 
 **Feature Branch**: `001-text-diff`
 **Date**: 2026-02-07
diff --git a/specs/001-text-diff/research.md b/specs/001-text-diff/research.md
index 44ed55f..bfb0d09 100644
--- a/specs/001-text-diff/research.md
+++ b/specs/001-text-diff/research.md
@@ -1,4 +1,4 @@
-# Research: Text Diff Checker
+# Research: Diff
 
 **Feature Branch**: `001-text-diff`
 **Date**: 2026-02-07
diff --git a/specs/001-text-diff/spec.md b/specs/001-text-diff/spec.md
index e45fbe2..203b9ea 100644
--- a/specs/001-text-diff/spec.md
+++ b/specs/001-text-diff/spec.md
@@ -1,4 +1,4 @@
-# Feature Specification: Text Diff Checker
+# Feature Specification: Diff
 
 **Feature Branch**: `001-text-diff`
 **Created**: 2026-02-07
diff --git a/specs/001-text-diff/tasks.md b/specs/001-text-diff/tasks.md
index d23faef..7c808db 100644
--- a/specs/001-text-diff/tasks.md
+++ b/specs/001-text-diff/tasks.md
@@ -1,4 +1,4 @@
-# Tasks: Text Diff Checker
+# Tasks: Diff
 
 **Input**: Design documents from `/specs/001-text-diff/`
 **Prerequisites**: plan.md (required), spec.md (required), research.md, data-model.md, quickstart.md
diff --git a/src/components/App/App.test.tsx b/src/components/App/App.test.tsx
index 0966f51..147a623 100644
--- a/src/components/App/App.test.tsx
+++ b/src/components/App/App.test.tsx
@@ -47,7 +47,7 @@ describe('App component', () => {
     render(<App />);
 
     const heading = screen.getByRole('heading', { level: 1 });
-    expect(heading).toHaveTextContent('Text Diff Checker');
+    expect(heading).toHaveTextContent('Diff');
   });
 
   it('renders two text inputs with correct labels', () => {
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 3217300..14681bc 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -18,7 +18,7 @@ export default function App() {
   return (
     <>
       <h1 className="mb-6 text-3xl font-bold text-gray-900 dark:text-gray-100">
-        Text Diff Checker
+        Diff
       </h1>
 
       <div className="flex flex-col gap-4 md:flex-row">

From 424acede0ce05ead82d618078f2e1a76c07ca2a0 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 03:25:00 -0500
Subject: [PATCH 13/19] test: fix coverage

---
 AGENTS.md                              |  3 +--
 package.json                           |  5 +++--
 specs/001-text-diff/quickstart.md      |  5 +----
 src/components/TextInput/TextInput.tsx |  1 +
 src/hooks/useMediaQuery.ts             |  1 +
 vitest.config.mts                      | 11 +----------
 6 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index d39c9bb..7e2c451 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -44,9 +44,8 @@ You're an expert engineer for this React app.
 
 ### Testing
 
-- **Watch mode:** `npm test` (run Vitest tests in watch mode with file watching)
 - **Coverage:** `npm run test:ci` (run tests with coverage report, requires 100% coverage)
-- **Single test file:** `npm test -- --run path/to/test.test.tsx` (run specific test file)
+- **Single test file:** `npm test -- path/to/test.test.tsx` (run specific test file)
 - **Single test with coverage:** `npm run test:ci -- path/to/test.test.tsx`
 
 ## Code Style Guidelines
diff --git a/package.json b/package.json
index d9dec9a..b33aec3 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,9 @@
     "prepare": "husky",
     "preview": "vite preview",
     "start": "vite --open",
-    "test": "vitest",
-    "test:ci": "CI=true npm test -- --color --coverage --run"
+    "test": "vitest run",
+    "test:ci": "CI=true npm test -- --color --coverage",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "diff": "8.0.3",
diff --git a/specs/001-text-diff/quickstart.md b/specs/001-text-diff/quickstart.md
index c93036a..96a1d60 100644
--- a/specs/001-text-diff/quickstart.md
+++ b/specs/001-text-diff/quickstart.md
@@ -77,11 +77,8 @@ npm run build
 ## Testing
 
 ```bash
-# Run all tests in watch mode
-npm test
-
 # Run a specific test file
-npm test -- --run src/hooks/useDiff.test.ts
+npm test -- src/hooks/useDiff.test.ts
 
 # Run tests with coverage report
 npm run test:ci
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index cf83b49..6e64c75 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -14,6 +14,7 @@ export default function TextInput({
   const lineCount = value ? value.split('\n').length : 1;
 
   const handleScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
+    /* v8 ignore else -- @preserve */
     if (gutterRef.current) {
       gutterRef.current.scrollTop = event.currentTarget.scrollTop;
     }
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 184d3f2..8ad8fd5 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -21,6 +21,7 @@ export function useMediaQuery(query: string): boolean {
     [query],
   );
 
+  /* v8 ignore next -- @preserve */
   const getServerSnapshot = useCallback(() => false, []);
 
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
diff --git a/vitest.config.mts b/vitest.config.mts
index 453f8e6..c1a1325 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -8,20 +8,11 @@ export default defineConfig({
     setupFiles: ['./test/setupFiles.ts'],
     globals: true,
     coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
       include: ['src/**/*.{ts,tsx}'],
       thresholds: {
-        global: {
-          branches: 100,
-          functions: 100,
-          lines: 100,
-          statements: 100,
-        },
+        100: true,
       },
     },
-    reporters:
-      process.env.CI === 'true' ? ['default', 'github-actions'] : ['default'],
   },
   resolve: {
     alias: {

From 0478453679f1743a01b2b54f74de95a2a1639a0d Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 03:36:32 -0500
Subject: [PATCH 14/19] test: consolidate vitest with vite config

---
 AGENTS.md         |  2 +-
 vite.config.mts   | 27 ++++++++++++++++++++++-----
 vitest.config.mts | 23 -----------------------
 3 files changed, 23 insertions(+), 29 deletions(-)
 delete mode 100644 vitest.config.mts

diff --git a/AGENTS.md b/AGENTS.md
index 7e2c451..d6d781e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -114,7 +114,7 @@ import type { User } from './types';
 - **Mock external dependencies** - mock API calls, browser APIs, etc.
 - **Descriptive test names** - should clearly state what is being tested
 - **Vitest globals** - use `vi.fn()`, `vi.mock()`, `vi.clearAllMocks()`
-- **Test setup** - global test environment configured in `vitest.config.mts` with `globals: true`
+- **Test setup** - global test environment configured in `vite.config.mts` with `globals: true`
 
 ### Code Quality Rules
 
diff --git a/vite.config.mts b/vite.config.mts
index fdbbe71..48eda25 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,7 +1,7 @@
 import { resolve } from 'node:path';
 
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 
 /**
  * @see {@link https://vite.dev/config/}
@@ -10,14 +10,31 @@ export default defineConfig({
   base: process.env.BASE ?? '',
   resolve: {
     alias: {
-      src: resolve(__dirname, 'src'),
+      src: resolve(__dirname, './src'),
+      test: resolve(__dirname, './test'),
     },
   },
+
   plugins: [
     react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler']],
-      },
+      babel:
+        process.env.NODE_ENV === 'test'
+          ? undefined
+          : {
+              plugins: [['babel-plugin-react-compiler']],
+            },
     }),
   ],
+
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./test/setupFiles.ts'],
+    globals: true,
+    coverage: {
+      include: ['src/**/*.{ts,tsx}'],
+      thresholds: {
+        100: true,
+      },
+    },
+  },
 });
diff --git a/vitest.config.mts b/vitest.config.mts
deleted file mode 100644
index c1a1325..0000000
--- a/vitest.config.mts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { resolve } from 'node:path';
-
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    setupFiles: ['./test/setupFiles.ts'],
-    globals: true,
-    coverage: {
-      include: ['src/**/*.{ts,tsx}'],
-      thresholds: {
-        100: true,
-      },
-    },
-  },
-  resolve: {
-    alias: {
-      src: resolve(__dirname, './src'),
-      test: resolve(__dirname, './test'),
-    },
-  },
-});

From 128c6e476e2d2655a144db849edc4673564f6712 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 12:19:06 -0500
Subject: [PATCH 15/19] refactor: remove vertical center

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ba24e70..169c361 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Diff</title>
   </head>
   <body
-    class="flex min-h-screen min-w-80 place-items-center bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
+    class="flex min-h-screen min-w-80 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
   >
     <main
       class="mx-auto w-full max-w-(--breakpoint-xl) p-8 text-left"

From ed09979e9c38fba79c49f4e75000f28a2644a142 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 12:23:01 -0500
Subject: [PATCH 16/19] =?UTF-8?q?refactor:=20replace=20favicon=20svg=20wit?=
 =?UTF-8?q?h=20emoji=20=F0=9F=93=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  | 6 +++---
 index.html                 | 5 ++++-
 src/components/App/App.tsx | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 275a235..a9d5ab1 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-# Diff
+# 📝 Diff
 
 [![build](https://github.com/remarkablemark/diff/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/build.yml)
 [![test](https://github.com/remarkablemark/diff/actions/workflows/test.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/test.yml)
 
-📝 Compare the diff between texts:
+Compare the diff between 2 texts:
 
-- [site](https://remarkablemark.org/diff/)
+- [Website](https://remarkablemark.org/diff/)
 
 ## Install
 
diff --git a/index.html b/index.html
index 169c361..5ddbe8b 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📝</text></svg>"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diff</title>
   </head>
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 14681bc..8c253a9 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -18,7 +18,7 @@ export default function App() {
   return (
     <>
       <h1 className="mb-6 text-3xl font-bold text-gray-900 dark:text-gray-100">
-        Diff
+        📝 Diff
       </h1>
 
       <div className="flex flex-col gap-4 md:flex-row">

From 921b7b303b78b59ed8bd2dca4f3df999dddbb85f Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 12:24:42 -0500
Subject: [PATCH 17/19] chore(public): delete unused svg

---
 public/react.svg    | 1 -
 public/tailwind.svg | 1 -
 public/vite.svg     | 1 -
 3 files changed, 3 deletions(-)
 delete mode 100644 public/react.svg
 delete mode 100644 public/tailwind.svg
 delete mode 100644 public/vite.svg

diff --git a/public/react.svg b/public/react.svg
deleted file mode 100644
index 8e0e0f1..0000000
--- a/public/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
diff --git a/public/tailwind.svg b/public/tailwind.svg
deleted file mode 100644
index 6a9ab49..0000000
--- a/public/tailwind.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file

From 25100a366ae0566d4541a1da78db2f3b5f5f7dd1 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 12:26:51 -0500
Subject: [PATCH 18/19] docs(readme): add wiki link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a9d5ab1..701e041 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 [![build](https://github.com/remarkablemark/diff/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/build.yml)
 [![test](https://github.com/remarkablemark/diff/actions/workflows/test.yml/badge.svg)](https://github.com/remarkablemark/diff/actions/workflows/test.yml)
 
-Compare the diff between 2 texts:
+Compare the [diff](https://wikipedia.org/wiki/Diff#Use) between 2 texts:
 
 - [Website](https://remarkablemark.org/diff/)
 

From 25fc4638b158e8d63a5451bfe0c09936583fb05c Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 8 Feb 2026 12:29:21 -0500
Subject: [PATCH 19/19] chore: add meta description

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index 5ddbe8b..9f0a37c 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
       href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📝</text></svg>"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Compare the diff between 2 texts" />
     <title>Diff</title>
   </head>
   <body