remarkablemark · remarkablemark · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026
diff --git a/.windsurf/rules/specify-rules.md b/.windsurf/rules/specify-rules.md
@@ -0,0 +1,34 @@
+# diff Development Guidelines
+
+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
+
+```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)
+
+- 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/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
@@ -115,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/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](https://wikipedia.org/wiki/Diff#Use) between 2 texts:
 
-- [diff](https://remarkablemark.org/diff/)
+- [Website](https://remarkablemark.org/diff/)
 
 ## Install
 

diff --git a/index.html b/index.html
@@ -2,13 +2,19 @@
 <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>
+    <meta name="description" content="Compare the diff between 2 texts" />
+    <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 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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,10 +11,12 @@
     "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",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },

diff --git a/public/react.svg b/public/react.svg
diff --git a/public/tailwind.svg b/public/tailwind.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/specs/001-text-diff/checklists/requirements.md b/specs/001-text-diff/checklists/requirements.md
@@ -0,0 +1,44 @@
+# Specification Quality Checklist: Diff
+
+**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.plan`.
+- 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
+  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
+  8. Debounce: No debounce — recompute diff on every keystroke immediately
+- No [NEEDS CLARIFICATION] markers remain in the spec.