From 48fd77c46bea84936558ba22e2612e7fe1deceb0 Mon Sep 17 00:00:00 2001
From: Timothy Atapagra <tim.atapagra@gmail.com>
Date: Fri, 21 Nov 2025 18:05:55 -0500
Subject: [PATCH] Om 18 arc 010 reading progress highlights (#18)

* feat(queue): refactor Redis config in the queue module to utilize a single URL for both local and Docker envs

* feat(api-nest): implement sentinel-based reading progress tracking, deprecate library item reading progress

- Introduced a new ReadingProgress module to manage user reading positions using sentinel-based tracking, enhancing content versioning capabilities.
- Updated GraphQL schema to include new types and inputs for reading progress, replacing deprecated fields related to scroll percentages.
- Refactored LibraryItem entity to remove obsolete reading progress fields and added a content hash for version tracking.
- Enhanced the LibraryResolver and related services to support the new reading progress functionality, ensuring backward compatibility.
- Implemented comprehensive tests for the new reading progress features, validating functionality across various scenarios.

* feat(api-nest, web-vite): enhance highlighting features and UI components

- Introduced robust anchored selectors for highlights, allowing multi-strategy text positioning through JSONB storage in the database.
- Updated GraphQL schema to include new fields for selectors and content versioning in highlight entities.
- Refactored highlight-related services and resolvers to support the new selectors functionality, ensuring backward compatibility.
- Enhanced the HighlightSidebar and NotebookModal components for improved user interaction and note-taking capabilities.
- Implemented comprehensive tests for the new highlighting features, validating functionality across various scenarios.

* refactor(api-nest): replace string injection tokens with symbols for improved type safety

- Introduced a new `injection-tokens.ts` file to define repository injection tokens as Symbols, enhancing type safety and preventing token collisions.
- Updated the `HighlightService`, `LabelService`, `LibraryService`, and `ReadingProgressService` to use the new Symbol-based tokens for dependency injection.
- Refactored the `RepositoriesModule` to provide the new Symbol tokens, ensuring consistent usage across the application.

* feat(api-nest): implement DataLoader service for efficient batching of GraphQL queries

- Introduced a new DataLoaderService to batch and cache GraphQL queries, addressing N+1 query issues for labels and highlights.
- Updated the GraphqlModule to provide DataLoaderFactory, enabling request-scoped DataLoader instances.
- Refactored LibraryResolver to utilize DataLoader for fetching labels, improving performance and reducing database load.
- Enhanced entity-label and highlight repositories with batch fetching methods to support DataLoader functionality.
- Added reusable GraphQL fragments for labels, highlights, and library items to streamline query structure and maintainability.

* chore: add ESLint, Prettier, and commitlint configurations for improved code quality

- Introduced a base ESLint configuration to enforce consistent coding standards across the codebase.
- Added lint-staged configuration to run ESLint and Prettier on staged files before commits.
- Created a Prettier ignore file to exclude unnecessary files from formatting.
- Configured commitlint to enforce conventional commit messages, allowing detailed messages while maintaining type safety.
- Updated package.json scripts to include linting commands for easier development workflow.
- Enhanced ESLint configurations in specific packages to align with the base settings while allowing for custom rules.

* Update packages/api-nest/src/highlight/entities/highlight.entity.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update packages/web-vite/vite.config.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update packages/web-vite/vite.config.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update packages/web-vite/src/components/HighlightSidebar.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor(api-nest): improve code formatting and consistency across GraphQL module and library resolver

* Update packages/api-nest/src/database/seeds/library-items.seed.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* feat(api-nest): integrate graphql-scalars for enhanced JSON handling in highlights

- Added graphql-scalars package to support JSON scalar type in GraphQL schema.
- Updated Highlight entity and resolver to utilize JSON type for selectors, improving data structure and validation.
- Refactored highlight input and output types to accommodate new JSON handling, ensuring compatibility with existing data.
- Enhanced database module to include structured logging for better query performance tracking.
- Improved highlight service to handle selectors as objects directly, streamlining highlight creation and updates.
- Updated ReaderPage component to manage selectors as objects, enhancing user experience and data consistency.

* chore(web-vite): update ESLint and Prettier configurations for improved code quality

- Removed redundant Prettier commands from lint-staged configuration for TypeScript files.
- Integrated simple-import-sort plugin into ESLint configuration to enforce import sorting.
- Updated package.json to include simple-import-sort plugin dependency.
- Enhanced ESLint rules to include simple-import-sort for better code organization.
- Refactored various components and pages to ensure consistent import order and formatting.

* Update packages/api-nest/src/database/database.module.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update packages/api-nest/src/highlight/entities/highlight-selector.interface.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* style(web-vite): enhance HighlightSidebar and ReaderPage styles for improved UI

- Updated HighlightSidebar.css to add color-coded backgrounds for quotes and improved hover effects.
- Modified ReaderPage.css to adjust layout properties, including padding, width, and flexbox settings for better responsiveness.
- Enhanced various button styles and input fields for a more consistent user experience across the application.

* chore(web-vite): refine ESLint and Prettier configurations for improved code quality

- Updated lint-staged configuration to include simple-import-sort rules for TypeScript and JSX files.
- Removed the simple-import-sort plugin from ESLint configuration as it is no longer needed.
- Ensured consistent formatting and linting across JavaScript and TypeScript files.

* feat: Add total_sentinels column to library_item for reading progress calculation

- Created migration to add total_sentinels column to omnivore.library_item.
- Added index for efficient queries on total_sentinels.
- Updated LibraryItemCard component to use readingProgressPercent from item.
- Modified GraphQL client and fragments to include totalSentinels in reading progress input.
- Updated LibraryPage to handle reading progress updates and label management.
- Enhanced ReaderPage to track and update reading progress based on sentinels.
- Removed deprecated deploy script and associated hooks.

* feat: update DataLoader service to use AuthenticatedRequest for user context and improve GraphQL context handling

* feat: update highlight selectors to follow W3C Web Annotation Data Model

* chore: refine ESLint and Prettier configurations for improved code quality

- Updated ESLint rules for TypeScript to issue warnings for empty interfaces and usage of 'any'.
- Modified lint-staged configuration to streamline JavaScript and JSX file handling.
- Enhanced database module for consistent connection options and improved logging.
- Added detailed comments and improved type handling in ReaderPage and LibraryPage components.
- Updated styles in HighlightSidebar for better visual consistency.

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .eslintrc.base.json                           |  118 ++
 .husky/commit-msg                             |    4 +
 .husky/pre-commit                             |    5 +
 .lintstagedrc.json                            |   15 +
 .prettierignore                               |   42 +
 .prettierrc                                   |    4 +-
 commitlint.config.js                          |   16 +
 package.json                                  |   86 +-
 packages/api-nest/.eslintrc.json              |    8 +
 packages/api-nest/package.json                |    3 +
 packages/api-nest/schema.graphql              |  106 +-
 packages/api-nest/src/app/app.module.ts       |    4 +
 packages/api-nest/src/config/test.config.ts   |    2 +
 .../api-nest/src/database/database.module.ts  |  123 +-
 .../src/database/seeds/library-items.seed.ts  |   28 +-
 .../src/graphql/dataloader.service.ts         |  152 +++
 .../api-nest/src/graphql/graphql.module.ts    |   64 +-
 .../highlight/dto/highlight-inputs.type.ts    |   53 +-
 .../src/highlight/dto/highlight.type.ts       |   39 +-
 .../entities/highlight-selector.interface.ts  |   90 ++
 .../highlight/entities/highlight.entity.ts    |   44 +-
 .../src/highlight/highlight.resolver.ts       |    5 +-
 .../src/highlight/highlight.service.ts        |   42 +-
 packages/api-nest/src/label/label.service.ts  |    7 +-
 .../src/library/dto/library-inputs.type.ts    |   47 +-
 .../src/library/dto/library-item.type.ts      |   59 +-
 .../library/entities/library-item.entity.ts   |   33 +-
 .../api-nest/src/library/library.resolver.ts  |   99 +-
 .../api-nest/src/library/library.service.ts   |  108 +-
 .../processors/content-processor.service.ts   |    9 +-
 .../dto/reading-progress-inputs.type.ts       |   46 +
 .../dto/reading-progress.type.ts              |   45 +
 .../entities/reading-progress.entity.ts       |   95 ++
 .../reading-progress.module.ts                |   19 +
 .../reading-progress.resolver.ts              |   81 ++
 .../reading-progress.service.ts               |  170 +++
 .../repositories/entity-label.repository.ts   |   30 +-
 .../src/repositories/highlight.repository.ts  |   50 +-
 .../src/repositories/injection-tokens.ts      |   16 +
 .../entity-label-repository.interface.ts      |    8 +
 .../highlight-repository.interface.ts         |   12 +
 .../library-item-repository.interface.ts      |   28 +-
 .../reading-progress-repository.interface.ts  |   76 ++
 .../repositories/library-item.repository.ts   |   47 +-
 .../reading-progress.repository.ts            |  140 +++
 .../src/repositories/repositories.module.ts   |   25 +-
 .../test/factories-example.e2e-spec.ts        |   28 +-
 .../test/factories/highlight.factory.ts       |   21 +-
 .../test/factories/library-item.factory.ts    |    8 +-
 packages/api-nest/test/highlight.e2e-spec.ts  |  287 ++++-
 packages/api-nest/test/jest-e2e.json          |    4 +-
 .../api-nest/test/library-arc009.e2e-spec.ts  |    6 +-
 packages/api-nest/test/library.e2e-spec.ts    |  126 +-
 packages/api-nest/test/notebook.e2e-spec.ts   |    6 +-
 .../test/reading-progress.e2e-spec.ts         |  465 +++++++
 .../test/setup/jest-environment-setup.ts      |    1 +
 .../api-nest/test/setup/test-logger-config.ts |   71 ++
 .../api-nest/test/setup/testcontainers.ts     |    3 +
 .../0193.do.add_highlight_selectors.sql       |   86 ++
 .../0193.undo.add_highlight_selectors.sql     |   35 +
 .../0194.do.sentinel_reading_progress.sql     |  180 +++
 .../0194.undo.sentinel_reading_progress.sql   |   66 +
 .../0195.do.uppercase_highlight_colors.sql    |   34 +
 .../0195.undo.uppercase_highlight_colors.sql  |   34 +
 .../0196.do.add_total_sentinels.sql           |   22 +
 .../0196.undo.add_total_sentinels.sql         |   12 +
 packages/db/package.json                      |    5 +-
 packages/db/tsconfig.json                     |   18 +-
 packages/web-vite/eslint.config.js            |  114 +-
 packages/web-vite/index.html                  |   20 +-
 packages/web-vite/package.json                |    1 +
 packages/web-vite/src/App.tsx                 |    6 +-
 packages/web-vite/src/__tests__/basic.test.ts |    2 +-
 .../web-vite/src/components/AddLinkModal.tsx  |    9 +-
 .../web-vite/src/components/AuthWrapper.tsx   |    3 +-
 .../web-vite/src/components/CardSkeleton.tsx  |    6 +-
 .../web-vite/src/components/EditInfoModal.tsx |    7 +-
 .../web-vite/src/components/ErrorBoundary.tsx |    3 +-
 .../web-vite/src/components/FlairBadge.tsx    |    6 +-
 .../src/components/HighlightSidebar.tsx       |  266 ++++
 .../web-vite/src/components/LabelPicker.tsx   |    7 +-
 .../src/components/LabelPickerModal.tsx       |    8 +-
 .../src/components/LeftNavigation.tsx         |    5 +-
 .../src/components/LibraryItemCard.tsx        |  237 +++-
 .../src/components/LibraryItemRow.tsx         |  201 ++-
 .../src/components/MultiSelectActionBar.tsx   |    4 +-
 .../web-vite/src/components/NotebookModal.tsx |  220 ++++
 .../src/lib/__tests__/api-client.test.ts      |    7 +-
 .../web-vite/src/lib/anchoredHighlights.ts    |  427 +++++++
 packages/web-vite/src/lib/api-client.ts       |    4 +
 packages/web-vite/src/lib/contentHash.ts      |   83 ++
 packages/web-vite/src/lib/graphql-client.ts   |  683 +++++++---
 .../web-vite/src/lib/graphql-fragments.ts     |  121 ++
 packages/web-vite/src/lib/markdown.ts         |  148 +++
 packages/web-vite/src/lib/reading-time.ts     |    6 +
 packages/web-vite/src/lib/validation.ts       |    2 +-
 packages/web-vite/src/main.tsx                |    7 +-
 .../web-vite/src/pages/EmailLoginPage.tsx     |    9 +-
 packages/web-vite/src/pages/LabelsPage.tsx    |   25 +-
 packages/web-vite/src/pages/LandingPage.tsx   |   10 +-
 packages/web-vite/src/pages/LibraryPage.tsx   |  441 ++++---
 packages/web-vite/src/pages/LoginPage.tsx     |    5 +-
 packages/web-vite/src/pages/ReaderPage.tsx    |  911 ++++++++++++--
 packages/web-vite/src/pages/RegisterPage.tsx  |    9 +-
 packages/web-vite/src/pages/index.tsx         |    6 +-
 packages/web-vite/src/router/AppRouter.tsx    |    7 +-
 .../src/stores/__tests__/auth.test.ts         |    8 +-
 packages/web-vite/src/stores/index.ts         |    5 +-
 .../web-vite/src/styles/HighlightSidebar.css  |  398 ++++++
 .../web-vite/src/styles/NotebookModal.css     |  460 +++++++
 packages/web-vite/src/styles/ReaderPage.css   |  317 +++++
 packages/web-vite/src/styles/index.css        |   30 +
 packages/web-vite/src/test/setup.ts           |    5 +-
 packages/web-vite/src/test/utils.tsx          |    4 +-
 packages/web-vite/src/types/api.ts            |   82 +-
 packages/web-vite/vite.config.ts              |   94 +-
 packages/web-vite/vitest.config.ts            |    2 +-
 packages/web/pages/settings/labels.tsx        |   32 +-
 scripts/deploy.sh                             |   15 -
 scripts/hooks.json                            |   17 -
 yarn.lock                                     | 1097 ++++++++++-------
 121 files changed, 8781 insertions(+), 1642 deletions(-)
 create mode 100644 .eslintrc.base.json
 create mode 100644 .husky/commit-msg
 create mode 100755 .husky/pre-commit
 create mode 100644 .lintstagedrc.json
 create mode 100644 .prettierignore
 create mode 100644 commitlint.config.js
 create mode 100644 packages/api-nest/.eslintrc.json
 create mode 100644 packages/api-nest/src/graphql/dataloader.service.ts
 create mode 100644 packages/api-nest/src/highlight/entities/highlight-selector.interface.ts
 create mode 100644 packages/api-nest/src/reading-progress/dto/reading-progress-inputs.type.ts
 create mode 100644 packages/api-nest/src/reading-progress/dto/reading-progress.type.ts
 create mode 100644 packages/api-nest/src/reading-progress/entities/reading-progress.entity.ts
 create mode 100644 packages/api-nest/src/reading-progress/reading-progress.module.ts
 create mode 100644 packages/api-nest/src/reading-progress/reading-progress.resolver.ts
 create mode 100644 packages/api-nest/src/reading-progress/reading-progress.service.ts
 create mode 100644 packages/api-nest/src/repositories/injection-tokens.ts
 create mode 100644 packages/api-nest/src/repositories/interfaces/reading-progress-repository.interface.ts
 create mode 100644 packages/api-nest/src/repositories/reading-progress.repository.ts
 create mode 100644 packages/api-nest/test/reading-progress.e2e-spec.ts
 create mode 100644 packages/api-nest/test/setup/test-logger-config.ts
 create mode 100644 packages/db/migrations/0193.do.add_highlight_selectors.sql
 create mode 100644 packages/db/migrations/0193.undo.add_highlight_selectors.sql
 create mode 100644 packages/db/migrations/0194.do.sentinel_reading_progress.sql
 create mode 100644 packages/db/migrations/0194.undo.sentinel_reading_progress.sql
 create mode 100644 packages/db/migrations/0195.do.uppercase_highlight_colors.sql
 create mode 100644 packages/db/migrations/0195.undo.uppercase_highlight_colors.sql
 create mode 100644 packages/db/migrations/0196.do.add_total_sentinels.sql
 create mode 100644 packages/db/migrations/0196.undo.add_total_sentinels.sql
 create mode 100644 packages/web-vite/src/components/HighlightSidebar.tsx
 create mode 100644 packages/web-vite/src/components/NotebookModal.tsx
 create mode 100644 packages/web-vite/src/lib/anchoredHighlights.ts
 create mode 100644 packages/web-vite/src/lib/contentHash.ts
 create mode 100644 packages/web-vite/src/lib/graphql-fragments.ts
 create mode 100644 packages/web-vite/src/lib/markdown.ts
 create mode 100644 packages/web-vite/src/styles/HighlightSidebar.css
 create mode 100644 packages/web-vite/src/styles/NotebookModal.css
 create mode 100644 packages/web-vite/src/styles/index.css
 delete mode 100755 scripts/deploy.sh
 delete mode 100644 scripts/hooks.json

diff --git a/.eslintrc.base.json b/.eslintrc.base.json
new file mode 100644
index 000000000..5036355b6
--- /dev/null
+++ b/.eslintrc.base.json
@@ -0,0 +1,118 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "simple-import-sort", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    "prefer-const": "warn",
+    "array-callback-return": "error",
+    "block-scoped-var": "error",
+    "consistent-this": "error",
+    "curly": ["error", "all"],
+    "no-console": ["warn", { "allow": ["warn", "error", "info"] }],
+    "dot-notation": "warn",
+    "eqeqeq": "error",
+    "for-direction": "error",
+    "global-require": "warn",
+    "guard-for-in": "warn",
+    "handle-callback-err": "warn",
+    "id-blacklist": "error",
+    "init-declarations": "warn",
+    "lines-around-directive": "error",
+    "lines-between-class-members": ["warn", "always"],
+    "max-depth": ["error", 4],
+    "max-nested-callbacks": ["error", 4],
+    "max-params": ["error", 11],
+    "newline-before-return": "warn",
+    "no-array-constructor": "error",
+    "no-await-in-loop": "warn",
+    "no-caller": "error",
+    "no-catch-shadow": "error",
+    "no-duplicate-imports": "error",
+    "no-else-return": "warn",
+    "no-empty-function": "off",
+    "no-eq-null": "error",
+    "no-eval": "error",
+    "no-implicit-globals": "error",
+    "no-implied-eval": "error",
+    "no-labels": "error",
+    "no-lone-blocks": "warn",
+    "no-lonely-if": "warn",
+    "no-loop-func": "warn",
+    "no-mixed-operators": "error",
+    "no-multi-assign": "error",
+    "no-multi-str": "warn",
+    "no-native-reassign": "error",
+    "no-proto": "error",
+    "no-prototype-builtins": "off",
+    "no-restricted-globals": "error",
+    "no-restricted-imports": "error",
+    "no-restricted-modules": "error",
+    "no-restricted-properties": "error",
+    "no-restricted-syntax": "error",
+    "no-return-await": "warn",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": "error",
+    "no-shadow-restricted-names": "error",
+    "no-tabs": "error",
+    "no-template-curly-in-string": "error",
+    "no-undef-init": "warn",
+    "no-undefined": "warn",
+    "@typescript-eslint/prefer-nullish-coalescing": "warn",
+    "@typescript-eslint/prefer-optional-chain": "error",
+    "@typescript-eslint/no-unnecessary-condition": [
+      "warn",
+      { "allowConstantLoopConditions": true }
+    ],
+    "no-unmodified-loop-condition": "error",
+    "no-unneeded-ternary": "error",
+    "no-use-before-define": [
+      "warn",
+      {
+        "functions": false
+      }
+    ],
+    "no-useless-call": "error",
+    "no-useless-concat": "error",
+    "no-useless-constructor": "off",
+    "no-useless-escape": "warn",
+    "no-useless-rename": "error",
+    "no-useless-return": "error",
+    "no-void": "error",
+    "no-with": "error",
+    "prefer-promise-reject-errors": "warn",
+    "prefer-rest-params": "error",
+    "prefer-template": "warn",
+    "radix": "warn",
+    "symbol-description": "error",
+    "valid-jsdoc": "error",
+    "vars-on-top": "error",
+    "yoda": "error",
+    "class-methods-use-this": "off",
+    "@typescript-eslint/no-empty-interface": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.spec.ts", "*.test.ts"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "warn",
+        "no-console": "off"
+      }
+    }
+  ]
+}
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100644
index 000000000..c160a7712
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..7d5c4c84d
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
new file mode 100644
index 000000000..a1c258b19
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,15 @@
+{
+  "*.ts": [
+    "eslint --fix",
+    "prettier --write",
+    "eslint --rule 'simple-import-sort/imports: error' --rule 'simple-import-sort/exports: error' --fix"
+  ],
+  "*.tsx": [
+    "eslint --fix",
+    "prettier --write",
+    "eslint --rule 'simple-import-sort/imports: error' --rule 'simple-import-sort/exports: error' --fix"
+  ],
+  "*.js, *.jsx": ["eslint --fix", "prettier --write"],
+  "!(package-lock)*.{json,yaml,yml}": ["prettier --write"],
+  "*.md": ["prettier --write"]
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..aa9acf55f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+**/node_modules/
+
+# Build outputs
+dist/
+build/
+**/dist/
+**/build/
+
+# Generated files
+*.generated.*
+*.min.js
+*.min.css
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Package manager files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Schema files (auto-generated)
+**/schema.graphql
+
diff --git a/.prettierrc b/.prettierrc
index b2095be81..b852e4d34 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,6 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "auto"
 }
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 000000000..f97e8eda7
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    // Allow detailed commit messages (ignore body length)
+    'body-max-line-length': [0],
+    'footer-max-line-length': [0],
+    // Allow longer subject lines for detailed commits
+    'subject-max-length': [2, 'always', 200],
+    // Still enforce conventional commit types
+    'type-enum': [
+      2,
+      'always',
+      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert'],
+    ],
+  },
+}
diff --git a/package.json b/package.json
index 36109c01f..97aa149d5 100644
--- a/package.json
+++ b/package.json
@@ -1,42 +1,48 @@
 {
-  "name": "omnivore-app",
-  "version": "1.0.0",
-  "description": "",
-  "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "license": "AGPL-3.0-only",
-  "scripts": {
-    "test": "lerna run --stream test",
-    "lint": "lerna run --parallel lint",
-    "build": "lerna run build",
-    "test:scoped:example": "lerna run test --scope={@omnivore/pdf-handler,@omnivore/web}",
-    "gql-typegen": "graphql-codegen",
-    "deploy:web": "vercel --prod"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@ardatan/aggregate-error": "^0.0.6",
-    "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/introspection": "^2.1.1",
-    "@graphql-codegen/schema-ast": "^2.1.1",
-    "@graphql-codegen/typescript": "^2.1.1",
-    "@graphql-codegen/typescript-resolvers": "^2.1.1",
-    "@tsconfig/node14": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "graphql": "^15.3.0",
-    "graphql-tag": "^2.11.0",
-    "lerna": "^7.4.1",
-    "prettier": "^2.5.1",
-    "typescript": "5.7.3"
-  },
-  "volta": {
-    "node": "22.11.0",
-    "yarn": "1.22.19"
-  }
+    "name": "omnivore-app",
+    "version": "1.0.0",
+    "description": "",
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ],
+    "license": "AGPL-3.0-only",
+    "scripts": {
+        "test": "lerna run --stream test",
+        "lint": "lerna run --parallel lint",
+        "build": "lerna run build",
+        "test:scoped:example": "lerna run test --scope={@omnivore/pdf-handler,@omnivore/web}",
+        "gql-typegen": "graphql-codegen",
+        "deploy:web": "vercel --prod",
+        "prepare": "husky install || true"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@ardatan/aggregate-error": "^0.0.6",
+        "@graphql-codegen/cli": "^2.6.2",
+        "@graphql-codegen/introspection": "^2.1.1",
+        "@graphql-codegen/schema-ast": "^2.1.1",
+        "@graphql-codegen/typescript": "^2.1.1",
+        "@graphql-codegen/typescript-resolvers": "^2.1.1",
+        "@tsconfig/node14": "^1.0.1",
+        "@typescript-eslint/eslint-plugin": "^5.9.0",
+        "@typescript-eslint/parser": "^5.9.0",
+        "eslint": "^8.6.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-simple-import-sort": "^7.0.0",
+        "@commitlint/cli": "^18.4.3",
+        "@commitlint/config-conventional": "^18.4.3",
+        "graphql": "^15.3.0",
+        "graphql-tag": "^2.11.0",
+        "husky": "^9.0.0",
+        "lerna": "^7.4.1",
+        "lint-staged": "^15.0.0",
+        "prettier": "^2.5.1",
+        "typescript": "5.7.3"
+    },
+    "volta": {
+        "node": "22.11.0",
+        "yarn": "1.22.19"
+    }
 }
diff --git a/packages/api-nest/.eslintrc.json b/packages/api-nest/.eslintrc.json
new file mode 100644
index 000000000..d2a902e45
--- /dev/null
+++ b/packages/api-nest/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "rules": {
+    "semi": [2, "never"],
+    "@typescript-eslint/no-unnecessary-type-assertion": [0, "never"]
+  }
+}
+
diff --git a/packages/api-nest/package.json b/packages/api-nest/package.json
index 16efae45e..ac74c0e34 100644
--- a/packages/api-nest/package.json
+++ b/packages/api-nest/package.json
@@ -16,6 +16,7 @@
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
@@ -47,8 +48,10 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "cross-fetch": "^4.1.0",
+    "dataloader": "^2.2.3",
     "google-auth-library": "^9.0.0",
     "graphql": "^16.11.0",
+    "graphql-scalars": "^1.25.0",
     "ioredis": "^5.3.2",
     "joi": "^17.11.0",
     "jwk-to-pem": "^2.0.5",
diff --git a/packages/api-nest/schema.graphql b/packages/api-nest/schema.graphql
index 9ae13af63..47c7173e5 100644
--- a/packages/api-nest/schema.graphql
+++ b/packages/api-nest/schema.graphql
@@ -28,7 +28,10 @@ input CreateHighlightInput {
   annotation: String
 
   """Highlight color (yellow, red, green, blue)"""
-  color: String
+  color: HighlightColor = YELLOW
+
+  """Optional content version/hash for tracking"""
+  contentVersion: String
 
   """Anchor index for position"""
   highlightPositionAnchorIndex: Int = 0
@@ -48,6 +51,9 @@ input CreateHighlightInput {
   """Quoted text from the document"""
   quote: String!
 
+  """Web Annotation selectors for robust text positioning (W3C standard)"""
+  selectors: JSON
+
   """Text after the quote (for context)"""
   suffix: String
 }
@@ -76,7 +82,10 @@ type DeleteResult {
 
 type Highlight {
   annotation: String
-  color: String
+  color: HighlightColor!
+
+  """Optional content version/hash for tracking"""
+  contentVersion: String
   createdAt: DateTime!
   highlightPositionAnchorIndex: Int!
   highlightPositionPercent: Float!
@@ -88,18 +97,33 @@ type Highlight {
   prefix: String
   quote: String
   representation: RepresentationType!
+
+  """Web Annotation selectors for robust text positioning (W3C standard)"""
+  selectors: JSON!
   sharedAt: DateTime
   shortId: String!
   suffix: String
   updatedAt: DateTime!
 }
 
+"""Highlight color options"""
+enum HighlightColor {
+  BLUE
+  GREEN
+  RED
+  YELLOW
+}
+
 enum HighlightType {
   HIGHLIGHT
-  NOTE
   REDACTION
 }
 
+"""
+The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
+"""
+scalar JSON @specifiedBy(url: "http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf")
+
 type Label {
   color: String!
   createdAt: DateTime!
@@ -134,8 +158,9 @@ type LibraryItem {
   pageType: String!
   publishedAt: DateTime
   readAt: DateTime
-  readingProgressBottomPercent: Float
-  readingProgressTopPercent: Float
+
+  """Reading progress percentage (0-100) based on sentinel tracking"""
+  readingProgressPercent: Float
   savedAt: DateTime!
 
   """Site favicon/icon URL"""
@@ -314,14 +339,11 @@ type Mutation {
     input: UpdateNotebookInput!
   ): LibraryItem!
 
-  """Update reading progress for a library item"""
+  """Update sentinel-based reading progress for a library item"""
   updateReadingProgress(
-    """Library item ID"""
-    id: String!
-
-    """Reading progress data"""
-    progress: ReadingProgressInput!
-  ): LibraryItem!
+    """Reading progress data with sentinels"""
+    input: UpdateReadingProgressInput!
+  ): ReadingProgress!
 }
 
 type Query {
@@ -346,24 +368,42 @@ type Query {
   libraryItems(after: String, first: Int = 20, search: LibrarySearchInput): LibraryItemsConnection!
   me: User!
 
+  """Get reading progress for a library item"""
+  readingProgress(
+    """Optional content version to filter by"""
+    contentVersion: String
+
+    """Library item ID"""
+    libraryItemId: String!
+  ): ReadingProgress
+
   """Legacy search query for backward compatibility"""
   search(after: String, first: Int = 20, includeContent: Boolean = false, query: String): SearchResult!
   session: AuthPayload
   viewer: User!
 }
 
-input ReadingProgressInput {
-  """Anchor index for last read position"""
-  readingProgressAnchorIndex: Int = 0
+type ReadingProgress {
+  """Hash/version of the content this progress applies to"""
+  contentVersion: String
 
-  """Bottom reading progress percentage (0-100)"""
-  readingProgressBottomPercent: Float!
+  """When this progress record was first created"""
+  createdAt: DateTime!
 
-  """Highest read anchor index"""
-  readingProgressHighestAnchor: Int = 0
+  """Highest sentinel ever reached (for completion tracking)"""
+  highestSeenSentinel: Int!
 
-  """Top reading progress percentage (0-100)"""
-  readingProgressTopPercent: Float!
+  """Unique identifier"""
+  id: ID!
+
+  """Most recent sentinel scrolled past (for position restoration)"""
+  lastSeenSentinel: Int!
+
+  """Library item this progress belongs to"""
+  libraryItemId: String!
+
+  """When this progress was last updated"""
+  updatedAt: DateTime!
 }
 
 enum RegistrationType {
@@ -430,7 +470,7 @@ input UpdateHighlightInput {
   annotation: String
 
   """Highlight color (yellow, red, green, blue)"""
-  color: String
+  color: HighlightColor
 }
 
 input UpdateLabelInput {
@@ -446,6 +486,9 @@ input UpdateLibraryItemInput {
   """Updated description for the library item"""
   description: String
 
+  """Read timestamp (set to mark as read, null to mark as unread)"""
+  readAt: DateTime
+
   """Updated title for the library item"""
   title: String
 }
@@ -455,6 +498,25 @@ input UpdateNotebookInput {
   note: String!
 }
 
+input UpdateReadingProgressInput {
+  """Hash/version of the content this progress applies to"""
+  contentVersion: String
+
+  """Highest sentinel ever reached by this user"""
+  highestSeenSentinel: Int!
+
+  """Most recent sentinel the user scrolled past"""
+  lastSeenSentinel: Int!
+
+  """Library item ID"""
+  libraryItemId: String!
+
+  """
+  Total number of sentinels in the article (for progress percentage calculation)
+  """
+  totalSentinels: Int
+}
+
 type User {
   createdAt: DateTime!
   email: String
diff --git a/packages/api-nest/src/app/app.module.ts b/packages/api-nest/src/app/app.module.ts
index ed426d548..8dd4f0833 100644
--- a/packages/api-nest/src/app/app.module.ts
+++ b/packages/api-nest/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { GraphqlModule } from '../graphql/graphql.module'
 import { LibraryModule } from '../library/library.module'
 import { LabelModule } from '../label/label.module'
 import { HighlightModule } from '../highlight/highlight.module'
+import { ReadingProgressModule } from '../reading-progress/reading-progress.module'
 import { QueueModule } from '../queue/queue.module'
 import { AppController } from './app.controller'
 import { AppService } from './app.service'
@@ -51,6 +52,9 @@ import { configValidationSchema } from '../config/config.schema'
     // Highlights
     HighlightModule,
 
+    // Reading Progress (Sentinel-based)
+    ReadingProgressModule,
+
     // Queue and Background Processing
     QueueModule,
 
diff --git a/packages/api-nest/src/config/test.config.ts b/packages/api-nest/src/config/test.config.ts
index 903f27865..281946e47 100644
--- a/packages/api-nest/src/config/test.config.ts
+++ b/packages/api-nest/src/config/test.config.ts
@@ -11,6 +11,7 @@ import { LibraryItemEntity } from '../library/entities/library-item.entity'
 import { Label } from '../label/entities/label.entity'
 import { EntityLabel } from '../label/entities/entity-label.entity'
 import { HighlightEntity } from '../highlight/entities/highlight.entity'
+import { ReadingProgressEntity } from '../reading-progress/entities/reading-progress.entity'
 
 export const testDatabaseConfig: TypeOrmModuleOptions = {
   type: 'postgres',
@@ -31,6 +32,7 @@ export const testDatabaseConfig: TypeOrmModuleOptions = {
     Label,
     EntityLabel,
     HighlightEntity,
+    ReadingProgressEntity,
   ],
   synchronize: false,
   logging: false,
diff --git a/packages/api-nest/src/database/database.module.ts b/packages/api-nest/src/database/database.module.ts
index 74d9c781e..169a79953 100644
--- a/packages/api-nest/src/database/database.module.ts
+++ b/packages/api-nest/src/database/database.module.ts
@@ -2,6 +2,9 @@ import { Module } from '@nestjs/common'
 import { TypeOrmModule } from '@nestjs/typeorm'
 import { ConfigModule, ConfigService } from '@nestjs/config'
 import { EnvVariables } from '../config/env-variables'
+import { QueryPerformanceLogger } from './query-logger'
+import { StructuredLogger } from '../logging/structured-logger.service'
+import { LoggingModule } from '../logging/logging.module'
 import { User, UserProfile, UserPersonalization } from '../user/entities'
 import { Filter } from '../filter/entities/filter.entity'
 import { Group } from '../group/entities/group.entity'
@@ -11,70 +14,76 @@ import { LibraryItemEntity } from '../library/entities/library-item.entity'
 import { Label } from '../label/entities/label.entity'
 import { EntityLabel } from '../label/entities/entity-label.entity'
 import { HighlightEntity } from '../highlight/entities/highlight.entity'
+import { ReadingProgressEntity } from '../reading-progress/entities/reading-progress.entity'
 
 @Module({
   imports: [
+    LoggingModule, // Import to get access to StructuredLogger
     TypeOrmModule.forRootAsync({
-      imports: [ConfigModule],
-      useFactory: async (configService: ConfigService) => ({
-        type: 'postgres',
-        host: configService.get<string>(
-          EnvVariables.DATABASE_HOST,
-          'localhost',
-        ),
-        port: configService.get<number>(EnvVariables.DATABASE_PORT, 5432),
-        username: configService.get<string>(
-          EnvVariables.DATABASE_USER,
-          'app_user',
-        ),
-        password: configService.get<string>(EnvVariables.DATABASE_PASSWORD),
-        database: configService.get<string>(
-          EnvVariables.DATABASE_NAME,
-          'omnivore',
-        ),
-
-        // Entity configuration
-        entities: [
-          User,
-          UserProfile,
-          UserPersonalization,
-          Filter,
-          Group,
-          Invite,
-          GroupMembership,
-          LibraryItemEntity,
-          Label,
-          EntityLabel,
-          HighlightEntity,
-        ],
-
-        // Migration configuration
-        // migrations: ['dist/database/migrations/*.js'],
-        // migrationsTableName: 'typeorm_migrations',
-        migrationsRun: false, // Don't auto-run migrations
-
-        // Development settings
-        synchronize: false, // Never use synchronize with existing database
-        logging:
+      imports: [ConfigModule, LoggingModule],
+      useFactory: async (
+        configService: ConfigService,
+        structuredLogger: StructuredLogger,
+      ) => {
+        const isDevelopment =
           configService.get(EnvVariables.NODE_ENV) === 'development'
-            ? ['query', 'error']
-            : ['error'],
 
-        // Connection pool settings for production
-        extra: {
-          max: 20, // Maximum number of connections
-          min: 5, // Minimum number of connections
-          idle_timeout: 30000,
-          connectionTimeoutMillis: 10000,
-        },
+        return {
+          type: 'postgres',
+          host: configService.get<string>(
+            EnvVariables.DATABASE_HOST,
+            'localhost',
+          ),
+          port: configService.get<number>(EnvVariables.DATABASE_PORT, 5432),
+          username: configService.get<string>(
+            EnvVariables.DATABASE_USER,
+            'app_user',
+          ),
+          password: configService.get<string>(EnvVariables.DATABASE_PASSWORD),
+          database: configService.get<string>(
+            EnvVariables.DATABASE_NAME,
+            'omnivore',
+          ),
 
-        // Enable SSL in production
-        ssl:
-          configService.get(EnvVariables.NODE_ENV) === 'production'
-            ? { rejectUnauthorized: false }
-            : false,
-      }),
-      inject: [ConfigService],
+          // Entity configuration
+          entities: [
+            User,
+            UserProfile,
+            UserPersonalization,
+            Filter,
+            Group,
+            Invite,
+            GroupMembership,
+            LibraryItemEntity,
+            Label,
+            EntityLabel,
+            HighlightEntity,
+            ReadingProgressEntity,
+          ],
+          migrationsRun: false,
+          synchronize: false,
+          logging: ['query', 'warn', 'error'],
+          // Use QueryPerformanceLogger to track slow queries
+          logger: new QueryPerformanceLogger(structuredLogger, isDevelopment),
+          // Log queries slower than 1 second (QueryPerformanceLogger handles >500ms as "slow")
+          maxQueryExecutionTime: 1000,
+
+          // Connection pool settings for production
+          extra: {
+            max: 20, // Maximum number of connections
+            min: 5, // Minimum number of connections
+            idleTimeoutMillis: 30000,
+            connectionTimeoutMillis: 10000,
+          },
+
+          // Enable SSL in production
+          ssl:
+            configService.get(EnvVariables.NODE_ENV) === 'production'
+              ? { rejectUnauthorized: false }
+              : false,
+        }
+      },
+      inject: [ConfigService, StructuredLogger],
     }),
   ],
   exports: [TypeOrmModule],
diff --git a/packages/api-nest/src/database/seeds/library-items.seed.ts b/packages/api-nest/src/database/seeds/library-items.seed.ts
index 1879ea4d5..dcd997fae 100644
--- a/packages/api-nest/src/database/seeds/library-items.seed.ts
+++ b/packages/api-nest/src/database/seeds/library-items.seed.ts
@@ -34,8 +34,6 @@ export async function seedLibraryItems(
       itemType: 'ARTICLE',
       wordCount: 2500,
       siteName: 'NestJS Docs',
-      readingProgressTopPercent: 0,
-      readingProgressBottomPercent: 0,
       savedAt: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
     },
     {
@@ -52,16 +50,13 @@ export async function seedLibraryItems(
       itemType: 'ARTICLE',
       wordCount: 3200,
       siteName: 'GraphQL.org',
-      readingProgressTopPercent: 45,
-      readingProgressBottomPercent: 40,
       savedAt: new Date(Date.now() - 1000 * 60 * 60 * 3), // 3 hours ago
     },
     {
       userId,
       title: 'Understanding React Server Components',
       slug: 'understanding-react-server-components',
-      originalUrl:
-        'https://react.dev/reference/react/use-server',
+      originalUrl: 'https://react.dev/reference/react/use-server',
       author: 'React Team',
       description:
         'Deep dive into React Server Components and their impact on modern web applications',
@@ -71,8 +66,6 @@ export async function seedLibraryItems(
       itemType: 'ARTICLE',
       wordCount: 4100,
       siteName: 'React.dev',
-      readingProgressTopPercent: 100,
-      readingProgressBottomPercent: 100,
       readAt: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago
       savedAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2), // 2 days ago
     },
@@ -82,16 +75,13 @@ export async function seedLibraryItems(
       slug: 'typescript-5-8-release-notes',
       originalUrl: 'https://devblogs.microsoft.com/typescript/',
       author: 'TypeScript Team',
-      description:
-        'New features and improvements in TypeScript 5.8 release',
+      description: 'New features and improvements in TypeScript 5.8 release',
       state: LibraryItemState.SUCCEEDED,
       contentReader: ContentReaderType.WEB,
       folder: FOLDERS.ARCHIVE,
       itemType: 'ARTICLE',
       wordCount: 1800,
       siteName: 'TypeScript Blog',
-      readingProgressTopPercent: 100,
-      readingProgressBottomPercent: 100,
       readAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
       savedAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5), // 5 days ago
     },
@@ -99,7 +89,8 @@ export async function seedLibraryItems(
       userId,
       title: 'PostgreSQL Performance Tuning Guide',
       slug: 'postgresql-performance-tuning-guide',
-      originalUrl: 'https://www.postgresql.org/docs/current/performance-tips.html',
+      originalUrl:
+        'https://www.postgresql.org/docs/current/performance-tips.html',
       author: 'PostgreSQL Community',
       description:
         'Comprehensive guide to optimizing PostgreSQL database performance',
@@ -109,8 +100,6 @@ export async function seedLibraryItems(
       itemType: 'ARTICLE',
       wordCount: 5400,
       siteName: 'PostgreSQL Docs',
-      readingProgressTopPercent: 15,
-      readingProgressBottomPercent: 10,
       savedAt: new Date(Date.now() - 1000 * 60 * 60 * 12), // 12 hours ago
     },
   ]
@@ -125,8 +114,6 @@ export async function seedLibraryItems(
         id: randomUUID(), // Manually generate UUID like E2E tests do
         ...itemData,
         user: { id: userId } as any, // TypeORM relation requirement
-        readingProgressLastReadAnchor: itemData.readingProgressTopPercent > 0 ? 1 : 0,
-        readingProgressHighestReadAnchor: itemData.readingProgressTopPercent > 0 ? 1 : 0,
       })
 
       console.log(`[Seed] Created entity object, now saving...`)
@@ -138,12 +125,15 @@ export async function seedLibraryItems(
       console.error(`[Seed] Error name: ${error?.name}`)
       console.error(`[Seed] Error message: ${error?.message}`)
       if (error?.detail) console.error(`[Seed] Error detail: ${error.detail}`)
-      if (error?.constraint) console.error(`[Seed] Constraint: ${error.constraint}`)
+      if (error?.constraint)
+        console.error(`[Seed] Constraint: ${error.constraint}`)
       console.error(`[Seed] Full error:`, error)
     }
   }
 
-  console.log(`✅ [Seed] Completed: ${createdItems.length}/${sampleItems.length} items created for user ${userId}`)
+  console.log(
+    `✅ [Seed] Completed: ${createdItems.length}/${sampleItems.length} items created for user ${userId}`
+  )
 
   return createdItems
 }
diff --git a/packages/api-nest/src/graphql/dataloader.service.ts b/packages/api-nest/src/graphql/dataloader.service.ts
new file mode 100644
index 000000000..e85fe3fdb
--- /dev/null
+++ b/packages/api-nest/src/graphql/dataloader.service.ts
@@ -0,0 +1,152 @@
+import { Inject, Injectable } from '@nestjs/common'
+import DataLoader from 'dataloader'
+import { IEntityLabelRepository } from '../repositories/interfaces/entity-label-repository.interface'
+import { IHighlightRepository } from '../repositories/interfaces/highlight-repository.interface'
+import { IReadingProgressRepository } from '../repositories/interfaces/reading-progress-repository.interface'
+import { Label } from '../label/entities/label.entity'
+import { HighlightEntity } from '../highlight/entities/highlight.entity'
+import { ReadingProgressEntity } from '../reading-progress/entities/reading-progress.entity'
+import { User } from '../user/entities/user.entity'
+import { REPOSITORY_TOKENS } from '../repositories/injection-tokens'
+
+/**
+ * Authenticated request object with user populated by JwtAuthGuard
+ */
+export interface AuthenticatedRequest {
+  user?: User
+}
+
+/**
+ * DataLoader service for batching GraphQL queries
+ * Prevents N+1 query problems by batching multiple individual requests
+ * into single database queries
+ *
+ * This service should be instantiated per GraphQL request in the context
+ */
+export class DataLoaderService {
+  public readonly labels: DataLoader<string, Label[]>
+
+  public readonly highlights: DataLoader<string, HighlightEntity[]>
+
+  public readonly readingProgress: DataLoader<
+    string,
+    ReadingProgressEntity | null
+  >
+
+  constructor(
+    entityLabelRepository: IEntityLabelRepository,
+    highlightRepository: IHighlightRepository,
+    readingProgressRepository: IReadingProgressRepository,
+    request: AuthenticatedRequest,
+  ) {
+    // Access user lazily from request (set by JwtAuthGuard after context is created)
+    const getUserId = (): string | undefined => request.user?.id
+
+    // Initialize DataLoader for labels
+    // This batches multiple getLibraryItemLabels calls into a single query
+    this.labels = new DataLoader<string, Label[]>(
+      async (libraryItemIds: readonly string[]) => {
+        const ids = libraryItemIds as string[]
+        const userId = getUserId()
+
+        if (!userId || ids.length === 0) {
+          return libraryItemIds.map(() => [])
+        }
+
+        // Batch fetch all entity labels for the given library item IDs
+        const entityLabelsMap =
+          await entityLabelRepository.findByLibraryItemIds(ids)
+
+        // Map to array of label arrays, filtering by user ID and sorting by position
+        return libraryItemIds.map((libraryItemId) => {
+          const entityLabels = entityLabelsMap.get(libraryItemId) || []
+          const labels = entityLabels
+            .map((el) => el.label)
+            .filter((label) => label.userId === userId)
+
+          // Sort by position
+          return labels.sort((a, b) => a.position - b.position)
+        })
+      },
+      {
+        cacheKeyFn: (key: string) => key,
+      },
+    )
+
+    // Initialize DataLoader for highlights
+    // This batches multiple highlights queries into a single query
+    this.highlights = new DataLoader<string, HighlightEntity[]>(
+      async (libraryItemIds: readonly string[]) => {
+        const ids = libraryItemIds as string[]
+        const userId = getUserId()
+
+        if (!userId || ids.length === 0) {
+          return libraryItemIds.map(() => [])
+        }
+
+        // Batch fetch all highlights for the given library item IDs
+        const highlightsMap = await highlightRepository.findByLibraryItemIds(
+          ids,
+          userId,
+        )
+
+        // Map to array of highlight arrays
+        return libraryItemIds.map(
+          (libraryItemId) => highlightsMap.get(libraryItemId) || [],
+        )
+      },
+      {
+        cacheKeyFn: (key: string) => key,
+      },
+    )
+
+    // Initialize DataLoader for reading progress
+    // This batches multiple reading progress queries into a single query
+    this.readingProgress = new DataLoader<string, ReadingProgressEntity | null>(
+      async (libraryItemIds: readonly string[]) => {
+        const ids = libraryItemIds as string[]
+        const userId = getUserId()
+
+        if (!userId || ids.length === 0) {
+          return libraryItemIds.map(() => null)
+        }
+
+        // Batch fetch reading progress for the given library item IDs
+        const progressMap =
+          await readingProgressRepository.findByLibraryItemIds(ids, userId)
+
+        // Map to array of progress entities (or null if not found)
+        return libraryItemIds.map(
+          (libraryItemId) => progressMap.get(libraryItemId) || null,
+        )
+      },
+      {
+        cacheKeyFn: (key: string) => key,
+      },
+    )
+  }
+}
+
+/**
+ * Factory service to create DataLoader instances per request
+ */
+@Injectable()
+export class DataLoaderFactory {
+  constructor(
+    @Inject(REPOSITORY_TOKENS.IEntityLabelRepository)
+    private readonly entityLabelRepository: IEntityLabelRepository,
+    @Inject(REPOSITORY_TOKENS.IHighlightRepository)
+    private readonly highlightRepository: IHighlightRepository,
+    @Inject(REPOSITORY_TOKENS.IReadingProgressRepository)
+    private readonly readingProgressRepository: IReadingProgressRepository,
+  ) {}
+
+  create(request: AuthenticatedRequest): DataLoaderService {
+    return new DataLoaderService(
+      this.entityLabelRepository,
+      this.highlightRepository,
+      this.readingProgressRepository,
+      request,
+    )
+  }
+}
diff --git a/packages/api-nest/src/graphql/graphql.module.ts b/packages/api-nest/src/graphql/graphql.module.ts
index d222e1e3d..408ae9d1c 100644
--- a/packages/api-nest/src/graphql/graphql.module.ts
+++ b/packages/api-nest/src/graphql/graphql.module.ts
@@ -1,22 +1,37 @@
 import { Module } from '@nestjs/common'
+import { ModuleRef } from '@nestjs/core'
 import { ConfigModule, ConfigService } from '@nestjs/config'
 import { GraphQLModule } from '@nestjs/graphql'
 import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'
 import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default'
-import { join, resolve } from 'path'
-import { AuthModule } from '../auth/auth.module'
-import { AuthService } from '../auth/services/auth.service'
+import { Request, Response } from 'express'
+import { resolve } from 'path'
+import { GraphQLJSON } from 'graphql-scalars'
 import { EnvVariables } from '../config/env-variables'
+import { RepositoriesModule } from '../repositories/repositories.module'
+import { DataLoaderFactory, AuthenticatedRequest } from './dataloader.service'
+import { User } from '../user/entities/user.entity'
+
+/**
+ * GraphQL context interface
+ */
+interface GraphQLContext {
+  req: AuthenticatedRequest
+  res: Response
+  user?: User
+  dataLoaders: ReturnType<DataLoaderFactory['create']>
+}
 
 @Module({
   imports: [
+    RepositoriesModule, // Required for DataLoaderFactory
     GraphQLModule.forRootAsync<ApolloDriverConfig>({
       driver: ApolloDriver,
-      imports: [ConfigModule, AuthModule],
-      inject: [ConfigService, AuthService],
+      imports: [ConfigModule, RepositoriesModule],
+      inject: [ConfigService, ModuleRef],
       useFactory: async (
         configService: ConfigService,
-        authService: AuthService,
+        moduleRef: ModuleRef,
       ) => {
         const isProduction =
           configService.get<string>(EnvVariables.NODE_ENV, 'development') ===
@@ -30,29 +45,38 @@ import { EnvVariables } from '../config/env-variables'
           debug: !isProduction,
           playground: false,
           introspection: !isProduction,
+          resolvers: { JSON: GraphQLJSON },
           plugins: isProduction
             ? []
             : [ApolloServerPluginLandingPageLocalDefault({ footer: false })],
-          context: async ({ req, res }: { req: any; res: any }) => {
-            const request = req ?? { headers: {} }
+          context: async ({
+            req,
+            res,
+          }: {
+            req: AuthenticatedRequest
+            res: Response
+          }): Promise<GraphQLContext> => {
+            const request = req ?? ({ headers: {} } as AuthenticatedRequest)
+            // Get DataLoaderFactory from module context
+            const dataLoaderFactory = moduleRef.get(DataLoaderFactory, {
+              strict: false,
+            })
+            // Create a new DataLoader instance per request (request-scoped)
+            // Pass the request object so DataLoader can access user lazily after auth
+            const dataLoaders = dataLoaderFactory.create(request)
 
-            const authHeader =
-              request.headers?.authorization ??
-              request.headers?.Authorization ??
-              request.cookies?.authToken
-
-            if (authHeader && !request.user) {
-              const user = await authService.validateToken(String(authHeader))
-              if (user) {
-                request.user = user
-              }
+            return {
+              req: request,
+              res,
+              user: request.user,
+              dataLoaders,
             }
-
-            return { req: request, res, user: request.user }
           },
         }
       },
     }),
   ],
+  providers: [DataLoaderFactory],
+  exports: [DataLoaderFactory],
 })
 export class GraphqlModule {}
diff --git a/packages/api-nest/src/highlight/dto/highlight-inputs.type.ts b/packages/api-nest/src/highlight/dto/highlight-inputs.type.ts
index ba05fef22..b24f2ebbc 100644
--- a/packages/api-nest/src/highlight/dto/highlight-inputs.type.ts
+++ b/packages/api-nest/src/highlight/dto/highlight-inputs.type.ts
@@ -1,13 +1,20 @@
-import { InputType, Field, Float, Int } from '@nestjs/graphql'
+import { Field, Float, InputType, Int } from '@nestjs/graphql'
 import {
-  IsString,
-  IsOptional,
-  IsNumber,
-  Min,
-  Max,
+  IsEnum,
   IsInt,
-  IsIn,
+  IsNumber,
+  IsObject,
+  IsOptional,
+  IsString,
+  Max,
+  Min,
 } from 'class-validator'
+import { GraphQLJSON } from 'graphql-scalars'
+
+import { HighlightColor } from '../entities/highlight.entity'
+import { HighlightSelectors } from '../entities/highlight-selector.interface'
+
+// Note: HighlightColor enum is registered in highlight.type.ts to avoid duplicate registration
 
 /**
  * Input type for creating a new highlight
@@ -67,14 +74,14 @@ export class CreateHighlightInput {
   @Min(0)
   highlightPositionAnchorIndex?: number
 
-  @Field(() => String, {
+  @Field(() => HighlightColor, {
     nullable: true,
+    defaultValue: HighlightColor.YELLOW,
     description: 'Highlight color (yellow, red, green, blue)',
   })
   @IsOptional()
-  @IsString()
-  @IsIn(['yellow', 'red', 'green', 'blue'])
-  color?: string
+  @IsEnum(HighlightColor)
+  color?: HighlightColor
 
   @Field(() => String, {
     nullable: true,
@@ -83,6 +90,23 @@ export class CreateHighlightInput {
   @IsOptional()
   @IsString()
   html?: string
+
+  @Field(() => GraphQLJSON, {
+    nullable: true,
+    description:
+      'Web Annotation selectors for robust text positioning (W3C standard)',
+  })
+  @IsOptional()
+  @IsObject()
+  selectors?: HighlightSelectors
+
+  @Field(() => String, {
+    nullable: true,
+    description: 'Optional content version/hash for tracking',
+  })
+  @IsOptional()
+  @IsString()
+  contentVersion?: string
 }
 
 /**
@@ -98,12 +122,11 @@ export class UpdateHighlightInput {
   @IsString()
   annotation?: string
 
-  @Field(() => String, {
+  @Field(() => HighlightColor, {
     nullable: true,
     description: 'Highlight color (yellow, red, green, blue)',
   })
   @IsOptional()
-  @IsString()
-  @IsIn(['yellow', 'red', 'green', 'blue'])
-  color?: string
+  @IsEnum(HighlightColor)
+  color?: HighlightColor
 }
diff --git a/packages/api-nest/src/highlight/dto/highlight.type.ts b/packages/api-nest/src/highlight/dto/highlight.type.ts
index 7bc32f8c0..064f6edb3 100644
--- a/packages/api-nest/src/highlight/dto/highlight.type.ts
+++ b/packages/api-nest/src/highlight/dto/highlight.type.ts
@@ -1,5 +1,19 @@
-import { Field, Float, ID, Int, ObjectType, registerEnumType } from '@nestjs/graphql'
-import { HighlightType, RepresentationType } from '../entities/highlight.entity'
+import {
+  Field,
+  Float,
+  ID,
+  Int,
+  ObjectType,
+  registerEnumType,
+} from '@nestjs/graphql'
+import { GraphQLJSON } from 'graphql-scalars'
+
+import {
+  HighlightColor,
+  HighlightType,
+  RepresentationType,
+} from '../entities/highlight.entity'
+import { HighlightSelectors } from '../entities/highlight-selector.interface'
 
 registerEnumType(HighlightType, {
   name: 'HighlightType',
@@ -9,6 +23,11 @@ registerEnumType(RepresentationType, {
   name: 'RepresentationType',
 })
 
+registerEnumType(HighlightColor, {
+  name: 'HighlightColor',
+  description: 'Highlight color options',
+})
+
 @ObjectType()
 export class Highlight {
   @Field(() => ID)
@@ -56,9 +75,21 @@ export class Highlight {
   @Field({ nullable: true })
   html?: string | null
 
-  @Field({ nullable: true })
-  color?: string | null
+  @Field(() => HighlightColor)
+  color!: HighlightColor
 
   @Field(() => RepresentationType)
   representation!: RepresentationType
+
+  @Field(() => GraphQLJSON, {
+    description:
+      'Web Annotation selectors for robust text positioning (W3C standard)',
+  })
+  selectors!: HighlightSelectors
+
+  @Field(() => String, {
+    nullable: true,
+    description: 'Optional content version/hash for tracking',
+  })
+  contentVersion?: string | null
 }
diff --git a/packages/api-nest/src/highlight/entities/highlight-selector.interface.ts b/packages/api-nest/src/highlight/entities/highlight-selector.interface.ts
new file mode 100644
index 000000000..db6bfae50
--- /dev/null
+++ b/packages/api-nest/src/highlight/entities/highlight-selector.interface.ts
@@ -0,0 +1,90 @@
+/**
+ * Web Annotation Data Model selectors for robust text positioning
+ * Based on W3C Web Annotation specification: https://www.w3.org/TR/annotation-model/
+ *
+ * These selectors provide multiple strategies for locating highlighted text,
+ * making highlights resilient to content changes.
+ */
+
+/**
+ * TextQuoteSelector - identifies text by quoting it directly
+ * Most common selector type for web highlights
+ *
+ * @see https://www.w3.org/TR/annotation-model/#text-quote-selector
+ */
+export interface TextQuoteSelector {
+  /** The exact text being highlighted */
+  exact: string
+  /** Text immediately before the selection (for disambiguation) */
+  prefix?: string
+  /** Text immediately after the selection (for disambiguation) */
+  suffix?: string
+}
+
+/**
+ * TextPositionSelector - identifies text by character position
+ * Useful as a fallback when text quote matching fails
+ *
+ * @see https://www.w3.org/TR/annotation-model/#text-position-selector
+ */
+export interface TextPositionSelector {
+  /** Starting character position in the document */
+  start: number
+  /** Ending character position in the document */
+  end: number
+}
+
+/**
+ * XPathSelector - identifies elements using XPath expressions
+ *
+ * @see https://www.w3.org/TR/annotation-model/#xpath-selector
+ */
+export interface XPathSelector {
+  /** XPath expression */
+  value: string
+}
+
+/**
+ * CSSSelector - identifies elements using CSS selectors
+ *
+ * @see https://www.w3.org/TR/annotation-model/#css-selector
+ */
+export interface CSSSelector {
+  /** CSS selector expression */
+  value: string
+}
+
+/**
+ * RangeSelector - identifies text using DOM range
+ * Most precise for HTML documents with stable structure
+ *
+ * @see https://www.w3.org/TR/annotation-model/#range-selector
+ */
+export interface RangeSelector {
+  /** Start point of the range (XPath or CSS selector) */
+  startSelector: XPathSelector | CSSSelector
+  /** End point of the range (XPath or CSS selector) */
+  endSelector: XPathSelector | CSSSelector
+  /** Optional character offset within start element */
+  startOffset?: number
+  /** Optional character offset within end element */
+  endOffset?: number
+}
+
+/**
+ * HighlightSelectors - container for multiple selector strategies
+ *
+ * Following the Web Annotation pattern of using multiple selectors
+ * for robust text positioning. The textQuote selector is required,
+ * with optional fallback selectors.
+ */
+export interface HighlightSelectors {
+  /** Primary selector using quoted text (REQUIRED) */
+  textQuote: TextQuoteSelector
+  /** Optional character position fallback */
+  textPosition?: TextPositionSelector
+  /** Optional DOM range fallback */
+  domRange?: RangeSelector
+  /** Allow additional custom selector strategies */
+  [key: string]: unknown
+}
diff --git a/packages/api-nest/src/highlight/entities/highlight.entity.ts b/packages/api-nest/src/highlight/entities/highlight.entity.ts
index 6fa0408be..12a614376 100644
--- a/packages/api-nest/src/highlight/entities/highlight.entity.ts
+++ b/packages/api-nest/src/highlight/entities/highlight.entity.ts
@@ -7,13 +7,14 @@ import {
   PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm'
-import { User } from '../../user/entities/user.entity'
+
 import { LibraryItemEntity } from '../../library/entities/library-item.entity'
+import { User } from '../../user/entities/user.entity'
+import { HighlightSelectors } from './highlight-selector.interface'
 
 export enum HighlightType {
   HIGHLIGHT = 'HIGHLIGHT',
   REDACTION = 'REDACTION',
-  NOTE = 'NOTE', // Legacy - being phased out in favor of library_item.note
 }
 
 export enum RepresentationType {
@@ -21,6 +22,13 @@ export enum RepresentationType {
   FEED_CONTENT = 'FEED_CONTENT',
 }
 
+export enum HighlightColor {
+  YELLOW = 'YELLOW',
+  RED = 'RED',
+  GREEN = 'GREEN',
+  BLUE = 'BLUE',
+}
+
 @Entity({ name: 'highlight', schema: 'omnivore' })
 export class HighlightEntity {
   @PrimaryGeneratedColumn('uuid')
@@ -70,7 +78,11 @@ export class HighlightEntity {
   @Column({ name: 'highlight_position_percent', type: 'real', default: 0 })
   highlightPositionPercent!: number
 
-  @Column({ name: 'highlight_position_anchor_index', type: 'integer', default: 0 })
+  @Column({
+    name: 'highlight_position_anchor_index',
+    type: 'integer',
+    default: 0,
+  })
   highlightPositionAnchorIndex!: number
 
   @Column({
@@ -84,8 +96,12 @@ export class HighlightEntity {
   @Column({ type: 'text', nullable: true })
   html?: string | null
 
-  @Column({ type: 'text', nullable: true })
-  color?: string | null
+  @Column({
+    type: 'enum',
+    enum: HighlightColor,
+    default: HighlightColor.YELLOW,
+  })
+  color!: HighlightColor
 
   @Column({
     type: 'enum',
@@ -93,4 +109,22 @@ export class HighlightEntity {
     default: RepresentationType.CONTENT,
   })
   representation!: RepresentationType
+
+  // Robust anchored selectors for multi-strategy text positioning
+  // Uses W3C Web Annotation Data Model selector format
+  // @see https://www.w3.org/TR/annotation-model/#selectors
+  @Column({
+    type: 'jsonb',
+    default: {},
+  })
+  selectors!: HighlightSelectors
+
+  // Optional content version/hash for tracking
+  @Column({
+    name: 'content_version',
+    type: 'varchar',
+    length: 64,
+    nullable: true,
+  })
+  contentVersion?: string | null
 }
diff --git a/packages/api-nest/src/highlight/highlight.resolver.ts b/packages/api-nest/src/highlight/highlight.resolver.ts
index 44bca5782..a41355768 100644
--- a/packages/api-nest/src/highlight/highlight.resolver.ts
+++ b/packages/api-nest/src/highlight/highlight.resolver.ts
@@ -10,6 +10,7 @@ import {
   UpdateHighlightInput,
 } from './dto/highlight-inputs.type'
 import { DeleteResult } from '../library/dto/library-inputs.type'
+import { HighlightColor } from './entities/highlight.entity'
 
 @Resolver(() => Highlight)
 export class HighlightResolver {
@@ -120,7 +121,9 @@ function mapEntityToGraph(entity: any): Highlight {
     highlightPositionAnchorIndex: entity.highlightPositionAnchorIndex ?? 0,
     highlightType: entity.highlightType,
     html: entity.html ?? null,
-    color: entity.color ?? 'yellow',
+    color: entity.color ?? HighlightColor.YELLOW,
     representation: entity.representation,
+    selectors: entity.selectors ?? {},
+    contentVersion: entity.contentVersion ?? null,
   }
 }
diff --git a/packages/api-nest/src/highlight/highlight.service.ts b/packages/api-nest/src/highlight/highlight.service.ts
index aa7fed1fc..e728326fa 100644
--- a/packages/api-nest/src/highlight/highlight.service.ts
+++ b/packages/api-nest/src/highlight/highlight.service.ts
@@ -5,19 +5,29 @@ import {
   Logger,
   Inject,
 } from '@nestjs/common'
-import { HighlightEntity, HighlightType } from './entities/highlight.entity'
-import { CreateHighlightInput, UpdateHighlightInput } from './dto/highlight-inputs.type'
+import {
+  HighlightEntity,
+  HighlightType,
+  HighlightColor,
+  RepresentationType,
+} from './entities/highlight.entity'
+import { HighlightSelectors } from './entities/highlight-selector.interface'
+import {
+  CreateHighlightInput,
+  UpdateHighlightInput,
+} from './dto/highlight-inputs.type'
 import { ILibraryItemRepository } from '../repositories/interfaces/library-item-repository.interface'
 import { IHighlightRepository } from '../repositories/interfaces/highlight-repository.interface'
+import { REPOSITORY_TOKENS } from '../repositories/injection-tokens'
 
 @Injectable()
 export class HighlightService {
   private readonly logger = new Logger(HighlightService.name)
 
   constructor(
-    @Inject('IHighlightRepository')
+    @Inject(REPOSITORY_TOKENS.IHighlightRepository)
     private readonly highlightRepository: IHighlightRepository,
-    @Inject('ILibraryItemRepository')
+    @Inject(REPOSITORY_TOKENS.ILibraryItemRepository)
     private readonly libraryItemRepository: ILibraryItemRepository,
   ) {}
 
@@ -73,6 +83,24 @@ export class HighlightService {
     // Generate a short ID (8 characters)
     const shortId = this.generateShortId()
 
+    // Build selectors from input - prefer explicit selectors, fallback to quote/prefix/suffix
+    let selectors: HighlightSelectors
+    if (input.selectors) {
+      // Use selectors directly (GraphQLJSON scalar provides object)
+      selectors = input.selectors as HighlightSelectors
+    } else {
+      // Build TextQuote selector from quote/prefix/suffix fields
+      // Following W3C Web Annotation Data Model specification
+      // Database constraint enforces: selectors ? 'textQuote' AND selectors->'textQuote' ? 'exact'
+      selectors = {
+        textQuote: {
+          exact: input.quote || '',
+          prefix: input.prefix,
+          suffix: input.suffix,
+        },
+      }
+    }
+
     const highlight = this.highlightRepository.create({
       userId,
       libraryItemId: input.libraryItemId,
@@ -83,10 +111,12 @@ export class HighlightService {
       annotation: input.annotation,
       highlightPositionPercent: input.highlightPositionPercent ?? 0,
       highlightPositionAnchorIndex: input.highlightPositionAnchorIndex ?? 0,
-      color: input.color ?? 'yellow',
+      color: input.color ?? HighlightColor.YELLOW,
       html: input.html,
       highlightType: HighlightType.HIGHLIGHT,
-      representation: 'CONTENT' as any,
+      representation: RepresentationType.CONTENT,
+      selectors,
+      contentVersion: input.contentVersion,
     })
 
     return this.highlightRepository.save(highlight)
diff --git a/packages/api-nest/src/label/label.service.ts b/packages/api-nest/src/label/label.service.ts
index 3bf1735ca..ca719e5eb 100644
--- a/packages/api-nest/src/label/label.service.ts
+++ b/packages/api-nest/src/label/label.service.ts
@@ -10,15 +10,16 @@ import { CreateLabelInput, UpdateLabelInput } from './dto/label-inputs.type'
 import { ILibraryItemRepository } from '../repositories/interfaces/library-item-repository.interface'
 import { ILabelRepository } from '../repositories/interfaces/label-repository.interface'
 import { IEntityLabelRepository } from '../repositories/interfaces/entity-label-repository.interface'
+import { REPOSITORY_TOKENS } from '../repositories/injection-tokens'
 
 @Injectable()
 export class LabelService {
   constructor(
-    @Inject('ILabelRepository')
+    @Inject(REPOSITORY_TOKENS.ILabelRepository)
     private readonly labelRepository: ILabelRepository,
-    @Inject('IEntityLabelRepository')
+    @Inject(REPOSITORY_TOKENS.IEntityLabelRepository)
     private readonly entityLabelRepository: IEntityLabelRepository,
-    @Inject('ILibraryItemRepository')
+    @Inject(REPOSITORY_TOKENS.ILibraryItemRepository)
     private readonly libraryItemRepository: ILibraryItemRepository,
   ) {}
 
diff --git a/packages/api-nest/src/library/dto/library-inputs.type.ts b/packages/api-nest/src/library/dto/library-inputs.type.ts
index aede3bcc1..635cbc98a 100644
--- a/packages/api-nest/src/library/dto/library-inputs.type.ts
+++ b/packages/api-nest/src/library/dto/library-inputs.type.ts
@@ -18,7 +18,7 @@ import {
   IsUrl,
 } from 'class-validator'
 import { LibraryItemState } from '../entities/library-item.entity'
-import { FOLDERS, ALL_FOLDERS, VALID_FOLDERS } from '../../constants/folders.constants'
+import { FOLDERS, ALL_FOLDERS } from '../../constants/folders.constants'
 
 /**
  * Sort field options for library items
@@ -49,44 +49,6 @@ registerEnumType(SortOrder, {
   description: 'Sort order direction',
 })
 
-/**
- * Input type for updating reading progress
- */
-@InputType()
-export class ReadingProgressInput {
-  @Field(() => Float, { description: 'Top reading progress percentage (0-100)' })
-  @IsNumber()
-  @Min(0)
-  @Max(100)
-  readingProgressTopPercent: number
-
-  @Field(() => Float, {
-    description: 'Bottom reading progress percentage (0-100)',
-  })
-  @IsNumber()
-  @Min(0)
-  @Max(100)
-  readingProgressBottomPercent: number
-
-  @Field(() => Int, {
-    description: 'Anchor index for last read position',
-    nullable: true,
-    defaultValue: 0,
-  })
-  @IsInt()
-  @Min(0)
-  readingProgressAnchorIndex?: number
-
-  @Field(() => Int, {
-    description: 'Highest read anchor index',
-    nullable: true,
-    defaultValue: 0,
-  })
-  @IsInt()
-  @Min(0)
-  readingProgressHighestAnchor?: number
-}
-
 /**
  * Result type for delete operations
  */
@@ -245,4 +207,11 @@ export class UpdateLibraryItemInput {
   @IsOptional()
   @IsString()
   description?: string
+
+  @Field(() => Date, {
+    nullable: true,
+    description: 'Read timestamp (set to mark as read, null to mark as unread)',
+  })
+  @IsOptional()
+  readAt?: Date | null
 }
diff --git a/packages/api-nest/src/library/dto/library-item.type.ts b/packages/api-nest/src/library/dto/library-item.type.ts
index 7c1597f86..d8023189b 100644
--- a/packages/api-nest/src/library/dto/library-item.type.ts
+++ b/packages/api-nest/src/library/dto/library-item.type.ts
@@ -1,5 +1,16 @@
-import { Field, Float, ID, Int, ObjectType, registerEnumType, createUnionType } from '@nestjs/graphql'
-import { LibraryItemState, ContentReaderType } from '../entities/library-item.entity'
+import {
+  Field,
+  Float,
+  ID,
+  Int,
+  ObjectType,
+  registerEnumType,
+  createUnionType,
+} from '@nestjs/graphql'
+import {
+  LibraryItemState,
+  ContentReaderType,
+} from '../entities/library-item.entity'
 import { Label } from '../../label/dto/label.type'
 
 registerEnumType(LibraryItemState, {
@@ -45,12 +56,6 @@ export class LibraryItem {
   @Field(() => Date)
   updatedAt!: Date
 
-  @Field(() => Float, { nullable: true })
-  readingProgressTopPercent?: number | null
-
-  @Field(() => Float, { nullable: true })
-  readingProgressBottomPercent?: number | null
-
   @Field(() => LibraryItemState)
   state!: LibraryItemState
 
@@ -72,28 +77,48 @@ export class LibraryItem {
   @Field(() => Date, { nullable: true })
   noteUpdatedAt?: Date | null
 
-  @Field({ nullable: true, description: 'Thumbnail/cover image URL for the library item' })
+  @Field({
+    nullable: true,
+    description: 'Thumbnail/cover image URL for the library item',
+  })
   thumbnail?: string | null
 
-  @Field(() => Float, { nullable: true, description: 'Estimated word count for reading time calculation' })
+  @Field(() => Float, {
+    nullable: true,
+    description: 'Estimated word count for reading time calculation',
+  })
   wordCount?: number | null
 
-  @Field({ nullable: true, description: 'Site name (e.g., "Medium", "New York Times")' })
+  @Field({
+    nullable: true,
+    description: 'Site name (e.g., "Medium", "New York Times")',
+  })
   siteName?: string | null
 
   @Field({ nullable: true, description: 'Site favicon/icon URL' })
   siteIcon?: string | null
 
-  @Field({ description: 'Item type (ARTICLE, FILE, VIDEO, etc.)', defaultValue: 'ARTICLE' })
+  @Field({
+    description: 'Item type (ARTICLE, FILE, VIDEO, etc.)',
+    defaultValue: 'ARTICLE',
+  })
   itemType!: string
 
   // Legacy field aliases for backward compatibility with frontend
-  @Field({ nullable: true, name: 'image', description: 'Legacy alias for thumbnail' })
+  @Field({
+    nullable: true,
+    name: 'image',
+    description: 'Legacy alias for thumbnail',
+  })
   get image(): string | null {
     return this.thumbnail
   }
 
-  @Field(() => Float, { nullable: true, name: 'wordsCount', description: 'Legacy alias for wordCount' })
+  @Field(() => Float, {
+    nullable: true,
+    name: 'wordsCount',
+    description: 'Legacy alias for wordCount',
+  })
   get wordsCount(): number | null {
     return this.wordCount
   }
@@ -102,6 +127,12 @@ export class LibraryItem {
   get pageType(): string {
     return this.itemType
   }
+
+  @Field(() => Float, {
+    nullable: true,
+    description: 'Reading progress percentage (0-100) based on sentinel tracking',
+  })
+  readingProgressPercent?: number | null
 }
 
 @ObjectType()
diff --git a/packages/api-nest/src/library/entities/library-item.entity.ts b/packages/api-nest/src/library/entities/library-item.entity.ts
index be022e57c..5be65e403 100644
--- a/packages/api-nest/src/library/entities/library-item.entity.ts
+++ b/packages/api-nest/src/library/entities/library-item.entity.ts
@@ -8,8 +8,9 @@ import {
   PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm'
-import { User } from '../../user/entities/user.entity'
+
 import { EntityLabel } from '../../label/entities/entity-label.entity'
+import { User } from '../../user/entities/user.entity'
 
 export enum LibraryItemState {
   FAILED = 'FAILED',
@@ -84,17 +85,19 @@ export class LibraryItemEntity {
   @Column({ name: 'site_icon', type: 'text', nullable: true })
   siteIcon?: string | null
 
-  @Column({ name: 'reading_progress_top_percent', type: 'real', default: 0 })
-  readingProgressTopPercent!: number
+  /**
+   * SHA-256 hash of sanitized content for version tracking
+   * Used by sentinel-based reading progress to detect content changes
+   */
+  @Column({ name: 'content_hash', type: 'varchar', length: 64, nullable: true })
+  contentHash?: string | null
 
-  @Column({ name: 'reading_progress_bottom_percent', type: 'real', default: 0 })
-  readingProgressBottomPercent!: number
-
-  @Column({ name: 'reading_progress_last_read_anchor', type: 'integer', default: 0 })
-  readingProgressLastReadAnchor!: number
-
-  @Column({ name: 'reading_progress_highest_read_anchor', type: 'integer', default: 0 })
-  readingProgressHighestReadAnchor!: number
+  /**
+   * Total number of sentinel markers in the article content
+   * Used to calculate reading progress percentage
+   */
+  @Column({ name: 'total_sentinels', type: 'integer', default: 0 })
+  totalSentinels!: number
 
   @Column({ type: 'text', nullable: true })
   thumbnail?: string | null
@@ -113,7 +116,13 @@ export class LibraryItemEntity {
   @Column({ type: 'text' })
   folder!: string
 
-  @Column({ name: 'label_names', type: 'text', array: true, nullable: true, default: [] })
+  @Column({
+    name: 'label_names',
+    type: 'text',
+    array: true,
+    nullable: true,
+    default: [],
+  })
   labelNames?: string[] | null
 
   @Column({ name: 'readable_content', type: 'text', default: '' })
diff --git a/packages/api-nest/src/library/library.resolver.ts b/packages/api-nest/src/library/library.resolver.ts
index 12ce73a35..8ea6dafd8 100644
--- a/packages/api-nest/src/library/library.resolver.ts
+++ b/packages/api-nest/src/library/library.resolver.ts
@@ -1,9 +1,19 @@
-import { Args, Int, Query, Mutation, Resolver, ResolveField, Parent } from '@nestjs/graphql'
+import {
+  Args,
+  Int,
+  Query,
+  Mutation,
+  Resolver,
+  ResolveField,
+  Parent,
+  Context,
+} from '@nestjs/graphql'
 import { UseGuards } from '@nestjs/common'
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard'
 import { CurrentUser } from '../user/decorators/current-user.decorator'
 import { User } from '../user/entities/user.entity'
 import { LibraryService } from './library.service'
+import { DataLoaderService } from '../graphql/dataloader.service'
 import {
   LibraryItem,
   LibraryItemsConnection,
@@ -14,7 +24,6 @@ import {
   SearchPageInfo,
 } from './dto/library-item.type'
 import {
-  ReadingProgressInput,
   DeleteResult,
   LibrarySearchInput,
   SaveUrlInput,
@@ -23,6 +32,15 @@ import {
 } from './dto/library-inputs.type'
 import { LabelService } from '../label/label.service'
 import { Label } from '../label/dto/label.type'
+import { LibraryItemEntity } from './entities/library-item.entity'
+
+/**
+ * Library item with entity fields for field resolvers
+ * Extends the GraphQL type to include database entity fields
+ */
+interface LibraryItemWithEntityFields extends LibraryItem {
+  totalSentinels?: number
+}
 
 @Resolver(() => LibraryItem)
 export class LibraryResolver {
@@ -38,8 +56,43 @@ export class LibraryResolver {
   async labels(
     @Parent() libraryItem: LibraryItem,
     @CurrentUser() user: User,
+    @Context('dataLoaders') dataLoaders: DataLoaderService,
   ): Promise<Label[] | null> {
-    return this.labelService.getLibraryItemLabels(user.id, libraryItem.id)
+    // Use DataLoader to batch label queries and prevent N+1 problems
+    const labels = await dataLoaders.labels.load(libraryItem.id)
+    return labels.length > 0 ? labels : null
+  }
+
+  @ResolveField(() => Number, { nullable: true })
+  @UseGuards(JwtAuthGuard)
+  async readingProgressPercent(
+    @Parent() libraryItem: LibraryItemWithEntityFields,
+    @CurrentUser() user: User,
+    @Context('dataLoaders') dataLoaders: DataLoaderService,
+  ): Promise<number | null> {
+    // Get total sentinels from the library item
+    const totalSentinels = libraryItem.totalSentinels || 0
+
+    if (totalSentinels === 0) {
+      return null // No sentinels injected yet
+    }
+
+    // Use DataLoader to batch reading progress queries
+    const progress = await dataLoaders.readingProgress.load(libraryItem.id)
+
+    if (!progress || progress.highestSeenSentinel === 0) {
+      return null // No reading progress yet
+    }
+
+    // Calculate percentage: (highest_seen_sentinel / total_sentinels) * 100
+    let percent = Math.min(100, Math.round((progress.highestSeenSentinel / totalSentinels) * 100))
+
+    // Round up to 100% if >= 95% (accounts for sentinels not being at the very end)
+    if (percent >= 95 && percent < 100) {
+      percent = 100
+    }
+
+    return percent
   }
 
   // ==================== QUERIES ====================
@@ -92,7 +145,11 @@ export class LibraryResolver {
     first = 20,
     @Args('after', { type: () => String, nullable: true }) after?: string,
     @Args('query', { type: () => String, nullable: true }) query?: string,
-    @Args('includeContent', { type: () => Boolean, nullable: true, defaultValue: false })
+    @Args('includeContent', {
+      type: () => Boolean,
+      nullable: true,
+      defaultValue: false,
+    })
     includeContent = false,
   ): Promise<typeof SearchResult> {
     try {
@@ -119,7 +176,7 @@ export class LibraryResolver {
         }
 
         return {
-          cursor: item.id,  // Each edge cursor should be the item's ID
+          cursor: item.id, // Each edge cursor should be the item's ID
           node: graphItem,
         }
       })
@@ -128,7 +185,7 @@ export class LibraryResolver {
         hasNextPage: !!nextCursor,
         hasPreviousPage: !!after,
         startCursor: items.length > 0 ? items[0].id : null,
-        endCursor: items.length > 0 ? items[items.length - 1].id : null,  // Last item's ID, not nextCursor
+        endCursor: items.length > 0 ? items[items.length - 1].id : null, // Last item's ID, not nextCursor
         totalCount: null, // Not currently tracked
       }
 
@@ -176,28 +233,6 @@ export class LibraryResolver {
     return await this.libraryService.deleteItem(user.id, id)
   }
 
-  @Mutation(() => LibraryItem, {
-    description: 'Update reading progress for a library item',
-  })
-  @UseGuards(JwtAuthGuard)
-  async updateReadingProgress(
-    @CurrentUser() user: User,
-    @Args('id', { type: () => String, description: 'Library item ID' })
-    id: string,
-    @Args('progress', {
-      type: () => ReadingProgressInput,
-      description: 'Reading progress data',
-    })
-    progress: ReadingProgressInput,
-  ): Promise<LibraryItem> {
-    const entity = await this.libraryService.updateReadingProgress(
-      user.id,
-      id,
-      progress,
-    )
-    return mapEntityToGraph(entity)
-  }
-
   @Mutation(() => LibraryItem, {
     description: 'Update notebook content for a library item',
   })
@@ -352,7 +387,7 @@ export class LibraryResolver {
  * Map LibraryItemEntity to GraphQL LibraryItem type
  * Handles field name differences and null coalescing
  */
-function mapEntityToGraph(entity: any): LibraryItem {
+function mapEntityToGraph(entity: LibraryItemEntity): LibraryItem {
   const thumbnail = entity.thumbnail ?? null
   const wordCount = entity.wordCount ?? null
   const itemType = entity.itemType ?? 'ARTICLE'
@@ -369,21 +404,19 @@ function mapEntityToGraph(entity: any): LibraryItem {
     publishedAt: entity.publishedAt ?? null,
     readAt: entity.readAt ?? null,
     updatedAt: entity.updatedAt,
-    readingProgressTopPercent: entity.readingProgressTopPercent ?? 0,
-    readingProgressBottomPercent: entity.readingProgressBottomPercent ?? 0,
     state: entity.state,
     contentReader: entity.contentReader,
     folder: entity.folder,
     content: entity.readableContent ?? null,
     note: entity.note ?? null,
     noteUpdatedAt: entity.noteUpdatedAt ?? null,
-    labels: null, // Labels will be resolved by the field resolver
-    // ARC-009: Add fields for frontend library feature parity
+    labels: null,
     thumbnail,
     wordCount,
     siteName: entity.siteName ?? null,
     siteIcon: entity.siteIcon ?? null,
     itemType,
+    totalSentinels: entity.totalSentinels ?? 0, // For reading progress calculation
     // Legacy field aliases (TypeScript doesn't know about getters, so we set them directly)
     image: thumbnail,
     wordsCount: wordCount,
diff --git a/packages/api-nest/src/library/library.service.ts b/packages/api-nest/src/library/library.service.ts
index d8550ee68..fcee19ed8 100644
--- a/packages/api-nest/src/library/library.service.ts
+++ b/packages/api-nest/src/library/library.service.ts
@@ -11,7 +11,6 @@ import {
   LibraryItemState,
 } from './entities/library-item.entity'
 import {
-  ReadingProgressInput,
   LibrarySearchInput,
   SaveUrlInput,
   UpdateLibraryItemInput,
@@ -20,15 +19,19 @@ import { EventBusService } from '../queue/event-bus.service'
 import { EVENT_NAMES } from '../queue/events.constants'
 import { JOB_PRIORITY } from '../queue/queue.constants'
 import { ILibraryItemRepository } from '../repositories/interfaces/library-item-repository.interface'
+import { IReadingProgressRepository } from '../repositories/interfaces/reading-progress-repository.interface'
 import { FOLDERS, VALID_FOLDERS } from '../constants/folders.constants'
+import { REPOSITORY_TOKENS } from '../repositories/injection-tokens'
 
 @Injectable()
 export class LibraryService {
   private readonly logger = new Logger(LibraryService.name)
 
   constructor(
-    @Inject('ILibraryItemRepository')
+    @Inject(REPOSITORY_TOKENS.ILibraryItemRepository)
     private readonly libraryRepository: ILibraryItemRepository,
+    @Inject(REPOSITORY_TOKENS.IReadingProgressRepository)
+    private readonly readingProgressRepository: IReadingProgressRepository,
     private readonly eventBus: EventBusService,
   ) {}
 
@@ -56,7 +59,10 @@ export class LibraryService {
    * @param id - Library item ID
    * @returns Library item or null if not found
    */
-  async findById(userId: string, id: string): Promise<LibraryItemEntity | null> {
+  async findById(
+    userId: string,
+    id: string,
+  ): Promise<LibraryItemEntity | null> {
     return this.libraryRepository.findById(id, userId)
   }
 
@@ -79,7 +85,9 @@ export class LibraryService {
     }
 
     // Update state and folder based on archive status
-    item.state = archived ? LibraryItemState.ARCHIVED : LibraryItemState.SUCCEEDED
+    item.state = archived
+      ? LibraryItemState.ARCHIVED
+      : LibraryItemState.SUCCEEDED
     item.folder = archived ? FOLDERS.ARCHIVE : FOLDERS.INBOX
 
     return await this.libraryRepository.save(item)
@@ -124,65 +132,6 @@ export class LibraryService {
     }
   }
 
-  /**
-   * Update reading progress for a library item
-   * @param userId - User ID who owns the item
-   * @param itemId - Library item ID
-   * @param progress - Reading progress data
-   * @returns Updated library item
-   */
-  async updateReadingProgress(
-    userId: string,
-    itemId: string,
-    progress: ReadingProgressInput,
-  ): Promise<LibraryItemEntity> {
-    const item = await this.findById(userId, itemId)
-
-    if (!item) {
-      throw new NotFoundException(`Library item with ID ${itemId} not found`)
-    }
-
-    // Validate progress percentages
-    if (
-      progress.readingProgressTopPercent < 0 ||
-      progress.readingProgressTopPercent > 100
-    ) {
-      throw new BadRequestException(
-        'Reading progress top percent must be between 0 and 100',
-      )
-    }
-
-    if (
-      progress.readingProgressBottomPercent < 0 ||
-      progress.readingProgressBottomPercent > 100
-    ) {
-      throw new BadRequestException(
-        'Reading progress bottom percent must be between 0 and 100',
-      )
-    }
-
-    // Update reading progress fields
-    item.readingProgressTopPercent = progress.readingProgressTopPercent
-    item.readingProgressBottomPercent = progress.readingProgressBottomPercent
-
-    if (progress.readingProgressAnchorIndex !== undefined) {
-      item.readingProgressLastReadAnchor = progress.readingProgressAnchorIndex
-    }
-
-    if (progress.readingProgressHighestAnchor !== undefined) {
-      item.readingProgressHighestReadAnchor =
-        progress.readingProgressHighestAnchor
-    }
-
-    // If progress is 100%, mark as read
-    if (progress.readingProgressTopPercent === 100) {
-      item.readAt = new Date()
-    }
-
-    await this.libraryRepository.save(item)
-    return item
-  }
-
   /**
    * Move a library item to a different folder
    * @param userId - User ID who owns the item
@@ -365,8 +314,32 @@ export class LibraryService {
       )
     }
 
-    // Delegate to repository
-    return this.libraryRepository.bulkMarkAsRead(userId, itemIds)
+    // First, mark items as read in library_item table
+    const result = await this.libraryRepository.bulkMarkAsRead(userId, itemIds)
+
+    // Then, update reading progress to 100% for items that have sentinels
+    // Fetch all items in a single query using findByIds
+    const items = await this.libraryRepository.findByIds(itemIds, userId)
+
+    // Update reading progress for each item that has sentinels
+    await Promise.all(
+      items.map(async (item) => {
+        if (!item.totalSentinels || item.totalSentinels === 0) {
+          return // Skip items without sentinels
+        }
+
+        // Set reading progress to 100% (highestSeenSentinel = totalSentinels)
+        await this.readingProgressRepository.upsertProgress(
+          userId,
+          item.id,
+          null, // contentVersion - null means applies to any version
+          item.totalSentinels, // lastSeenSentinel
+          item.totalSentinels, // highestSeenSentinel (100% completion)
+        )
+      }),
+    )
+
+    return result
   }
 
   /**
@@ -493,6 +466,10 @@ export class LibraryService {
       item.description = input.description || null
     }
 
+    if (input.readAt !== undefined) {
+      item.readAt = input.readAt
+    }
+
     // Update the updatedAt timestamp
     item.updatedAt = new Date()
 
@@ -534,5 +511,4 @@ export class LibraryService {
       return `url-${Date.now()}`
     }
   }
-
 }
diff --git a/packages/api-nest/src/queue/processors/content-processor.service.ts b/packages/api-nest/src/queue/processors/content-processor.service.ts
index f25b85f1e..61229b473 100644
--- a/packages/api-nest/src/queue/processors/content-processor.service.ts
+++ b/packages/api-nest/src/queue/processors/content-processor.service.ts
@@ -240,16 +240,15 @@ export class ContentProcessorService
       // Phase 1: Fetch HTML content
       this.logger.debug(`Fetching HTML from ${url}`)
 
+
       const response = await fetch(url, {
         headers: {
-          'User-Agent':
-            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
-          Accept:
-            'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8',
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+          'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8',
           'Accept-Language': 'en-US,en;q=0.9',
           'Accept-Encoding': 'gzip, deflate, br',
           'Cache-Control': 'no-cache',
-          Pragma: 'no-cache',
+          'Pragma': 'no-cache',
           'Sec-Fetch-Dest': 'document',
           'Sec-Fetch-Mode': 'navigate',
           'Sec-Fetch-Site': 'none',
diff --git a/packages/api-nest/src/reading-progress/dto/reading-progress-inputs.type.ts b/packages/api-nest/src/reading-progress/dto/reading-progress-inputs.type.ts
new file mode 100644
index 000000000..a9f2b9939
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/dto/reading-progress-inputs.type.ts
@@ -0,0 +1,46 @@
+import { InputType, Field, Int } from '@nestjs/graphql'
+import { IsString, IsOptional, IsInt, Min } from 'class-validator'
+
+/**
+ * Input type for updating reading progress with sentinel positions
+ */
+@InputType()
+export class UpdateReadingProgressInput {
+  @Field(() => String, {
+    description: 'Library item ID',
+  })
+  @IsString()
+  libraryItemId!: string
+
+  @Field(() => String, {
+    nullable: true,
+    description: 'Hash/version of the content this progress applies to',
+  })
+  @IsOptional()
+  @IsString()
+  contentVersion?: string
+
+  @Field(() => Int, {
+    description: 'Most recent sentinel the user scrolled past',
+  })
+  @IsInt()
+  @Min(0)
+  lastSeenSentinel!: number
+
+  @Field(() => Int, {
+    description: 'Highest sentinel ever reached by this user',
+  })
+  @IsInt()
+  @Min(0)
+  highestSeenSentinel!: number
+
+  @Field(() => Int, {
+    nullable: true,
+    description:
+      'Total number of sentinels in the article (for progress percentage calculation)',
+  })
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  totalSentinels?: number
+}
diff --git a/packages/api-nest/src/reading-progress/dto/reading-progress.type.ts b/packages/api-nest/src/reading-progress/dto/reading-progress.type.ts
new file mode 100644
index 000000000..20ab04766
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/dto/reading-progress.type.ts
@@ -0,0 +1,45 @@
+import { Field, ObjectType, ID, Int } from '@nestjs/graphql'
+
+/**
+ * GraphQL type for ReadingProgress
+ * Represents sentinel-based reading position for a user/item/version
+ */
+@ObjectType()
+export class ReadingProgress {
+  @Field(() => ID, {
+    description: 'Unique identifier',
+  })
+  id!: string
+
+  @Field(() => String, {
+    description: 'Library item this progress belongs to',
+  })
+  libraryItemId!: string
+
+  @Field(() => String, {
+    nullable: true,
+    description: 'Hash/version of the content this progress applies to',
+  })
+  contentVersion?: string | null
+
+  @Field(() => Int, {
+    description:
+      'Most recent sentinel scrolled past (for position restoration)',
+  })
+  lastSeenSentinel!: number
+
+  @Field(() => Int, {
+    description: 'Highest sentinel ever reached (for completion tracking)',
+  })
+  highestSeenSentinel!: number
+
+  @Field(() => Date, {
+    description: 'When this progress record was first created',
+  })
+  createdAt!: Date
+
+  @Field(() => Date, {
+    description: 'When this progress was last updated',
+  })
+  updatedAt!: Date
+}
diff --git a/packages/api-nest/src/reading-progress/entities/reading-progress.entity.ts b/packages/api-nest/src/reading-progress/entities/reading-progress.entity.ts
new file mode 100644
index 000000000..482f73bf7
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/entities/reading-progress.entity.ts
@@ -0,0 +1,95 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  Index,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm'
+import { User } from '../../user/entities/user.entity'
+import { LibraryItemEntity } from '../../library/entities/library-item.entity'
+
+/**
+ * Reading progress tracking using I/O sentinels for stable, content-aware positioning
+ *
+ * Replaces scroll percentages with sentinel-based tracking that survives:
+ * - Content updates
+ * - Dynamic layout changes
+ * - Different screen sizes
+ * - Image lazy loading
+ */
+@Entity({ name: 'reading_progress', schema: 'omnivore' })
+@Index(['userId', 'libraryItemId', 'contentVersion'], {
+  unique: true,
+  where: "content_version IS NOT NULL OR content_version = ''",
+})
+@Index(['userId', 'libraryItemId', 'contentVersion'])
+@Index(['userId', 'libraryItemId', 'updatedAt'])
+export class ReadingProgressEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string
+
+  // ==================== Relations ====================
+
+  @Column({ name: 'user_id', type: 'uuid' })
+  userId!: string
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'user_id' })
+  user?: User
+
+  @Column({ name: 'library_item_id', type: 'uuid' })
+  libraryItemId!: string
+
+  @ManyToOne(() => LibraryItemEntity, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'library_item_id' })
+  libraryItem?: LibraryItemEntity
+
+  // ==================== Content Version ====================
+
+  /**
+   * Hash/version of the content this progress applies to
+   * Enables detection of content changes and re-anchoring
+   */
+  @Column({
+    name: 'content_version',
+    type: 'varchar',
+    length: 64,
+    nullable: true,
+  })
+  contentVersion?: string | null
+
+  // ==================== Sentinel Positions ====================
+
+  /**
+   * Most recent sentinel the user scrolled past (viewport bottom)
+   * Used to restore reading position
+   */
+  @Column({ name: 'last_seen_sentinel', type: 'int', default: 0 })
+  lastSeenSentinel!: number
+
+  /**
+   * Highest sentinel ever reached by this user
+   * Used for completion tracking and "furthest read" indicator
+   */
+  @Column({ name: 'highest_seen_sentinel', type: 'int', default: 0 })
+  highestSeenSentinel!: number
+
+  // ==================== Timestamps ====================
+
+  @CreateDateColumn({
+    name: 'created_at',
+    type: 'timestamptz',
+    default: () => 'CURRENT_TIMESTAMP',
+  })
+  createdAt!: Date
+
+  @UpdateDateColumn({
+    name: 'updated_at',
+    type: 'timestamptz',
+    default: () => 'CURRENT_TIMESTAMP',
+  })
+  updatedAt!: Date
+}
diff --git a/packages/api-nest/src/reading-progress/reading-progress.module.ts b/packages/api-nest/src/reading-progress/reading-progress.module.ts
new file mode 100644
index 000000000..ff90facc0
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/reading-progress.module.ts
@@ -0,0 +1,19 @@
+import { Module } from '@nestjs/common'
+import { ReadingProgressService } from './reading-progress.service'
+import { ReadingProgressResolver } from './reading-progress.resolver'
+import { RepositoriesModule } from '../repositories/repositories.module'
+
+/**
+ * ReadingProgressModule
+ *
+ * Provides sentinel-based reading progress tracking functionality
+ * Manages reading position persistence per user/item/content version
+ */
+@Module({
+  imports: [
+    RepositoriesModule, // Access to IReadingProgressRepository and ILibraryItemRepository
+  ],
+  providers: [ReadingProgressService, ReadingProgressResolver],
+  exports: [ReadingProgressService],
+})
+export class ReadingProgressModule {}
diff --git a/packages/api-nest/src/reading-progress/reading-progress.resolver.ts b/packages/api-nest/src/reading-progress/reading-progress.resolver.ts
new file mode 100644
index 000000000..9ee7fabc3
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/reading-progress.resolver.ts
@@ -0,0 +1,81 @@
+import { Args, Mutation, Query, Resolver } from '@nestjs/graphql'
+import { UseGuards } from '@nestjs/common'
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard'
+import { CurrentUser } from '../user/decorators/current-user.decorator'
+import { User } from '../user/entities/user.entity'
+import { ReadingProgressService } from './reading-progress.service'
+import { ReadingProgress } from './dto/reading-progress.type'
+import { UpdateReadingProgressInput } from './dto/reading-progress-inputs.type'
+import { ReadingProgressEntity } from './entities/reading-progress.entity'
+
+/**
+ * Map ReadingProgressEntity to GraphQL ReadingProgress type
+ */
+function mapEntityToGraph(entity: ReadingProgressEntity): ReadingProgress {
+  return {
+    id: entity.id,
+    libraryItemId: entity.libraryItemId,
+    contentVersion: entity.contentVersion,
+    lastSeenSentinel: entity.lastSeenSentinel,
+    highestSeenSentinel: entity.highestSeenSentinel,
+    createdAt: entity.createdAt,
+    updatedAt: entity.updatedAt,
+  }
+}
+
+@Resolver(() => ReadingProgress)
+export class ReadingProgressResolver {
+  constructor(
+    private readonly readingProgressService: ReadingProgressService,
+  ) {}
+
+  // ==================== QUERIES ====================
+
+  @Query(() => ReadingProgress, {
+    nullable: true,
+    description: 'Get reading progress for a library item',
+  })
+  @UseGuards(JwtAuthGuard)
+  async readingProgress(
+    @CurrentUser() user: User,
+    @Args('libraryItemId', {
+      type: () => String,
+      description: 'Library item ID',
+    })
+    libraryItemId: string,
+    @Args('contentVersion', {
+      type: () => String,
+      nullable: true,
+      description: 'Optional content version to filter by',
+    })
+    contentVersion?: string,
+  ): Promise<ReadingProgress | null> {
+    const entity = await this.readingProgressService.getProgress(
+      user.id,
+      libraryItemId,
+      contentVersion,
+    )
+    return entity ? mapEntityToGraph(entity) : null
+  }
+
+  // ==================== MUTATIONS ====================
+
+  @Mutation(() => ReadingProgress, {
+    description: 'Update sentinel-based reading progress for a library item',
+  })
+  @UseGuards(JwtAuthGuard)
+  async updateReadingProgress(
+    @CurrentUser() user: User,
+    @Args('input', {
+      type: () => UpdateReadingProgressInput,
+      description: 'Reading progress data with sentinels',
+    })
+    input: UpdateReadingProgressInput,
+  ): Promise<ReadingProgress> {
+    const entity = await this.readingProgressService.updateProgress(
+      user.id,
+      input,
+    )
+    return mapEntityToGraph(entity)
+  }
+}
diff --git a/packages/api-nest/src/reading-progress/reading-progress.service.ts b/packages/api-nest/src/reading-progress/reading-progress.service.ts
new file mode 100644
index 000000000..b4b274a8a
--- /dev/null
+++ b/packages/api-nest/src/reading-progress/reading-progress.service.ts
@@ -0,0 +1,170 @@
+import {
+  Injectable,
+  NotFoundException,
+  BadRequestException,
+  Logger,
+  Inject,
+} from '@nestjs/common'
+import { ReadingProgressEntity } from './entities/reading-progress.entity'
+import { UpdateReadingProgressInput } from './dto/reading-progress-inputs.type'
+import { ILibraryItemRepository } from '../repositories/interfaces/library-item-repository.interface'
+import { IReadingProgressRepository } from '../repositories/interfaces/reading-progress-repository.interface'
+import { REPOSITORY_TOKENS } from '../repositories/injection-tokens'
+
+/**
+ * Service for managing sentinel-based reading progress
+ * Handles business logic for tracking user reading positions
+ */
+@Injectable()
+export class ReadingProgressService {
+  private readonly logger = new Logger(ReadingProgressService.name)
+
+  constructor(
+    @Inject(REPOSITORY_TOKENS.IReadingProgressRepository)
+    private readonly progressRepository: IReadingProgressRepository,
+    @Inject(REPOSITORY_TOKENS.ILibraryItemRepository)
+    private readonly libraryItemRepository: ILibraryItemRepository,
+  ) {}
+
+  /**
+   * Get reading progress for a library item
+   * @param userId - User ID
+   * @param libraryItemId - Library item ID
+   * @param contentVersion - Optional content version to filter by
+   * @returns Reading progress or null if not found
+   */
+  async getProgress(
+    userId: string,
+    libraryItemId: string,
+    contentVersion?: string,
+  ): Promise<ReadingProgressEntity | null> {
+    // Verify the library item exists and belongs to the user
+    const libraryItem = await this.libraryItemRepository.findById(
+      libraryItemId,
+      userId,
+    )
+
+    if (!libraryItem) {
+      throw new NotFoundException(
+        `Library item with ID ${libraryItemId} not found`,
+      )
+    }
+
+    // If content version is provided, get progress for that specific version
+    if (contentVersion) {
+      return this.progressRepository.findProgress(
+        libraryItemId,
+        userId,
+        contentVersion,
+      )
+    }
+
+    // Otherwise, get the most recent progress (any version)
+    return this.progressRepository.findLatestProgress(libraryItemId, userId)
+  }
+
+  /**
+   * Update or create reading progress
+   * @param userId - User ID
+   * @param input - Progress update data
+   * @returns Updated reading progress
+   */
+  async updateProgress(
+    userId: string,
+    input: UpdateReadingProgressInput,
+  ): Promise<ReadingProgressEntity> {
+    // Verify the library item exists and belongs to the user
+    const libraryItem = await this.libraryItemRepository.findById(
+      input.libraryItemId,
+      userId,
+    )
+
+    if (!libraryItem) {
+      throw new NotFoundException(
+        `Library item with ID ${input.libraryItemId} not found`,
+      )
+    }
+
+    // Validate sentinel values
+    if (input.lastSeenSentinel < 0 || input.highestSeenSentinel < 0) {
+      throw new BadRequestException('Sentinel values must be non-negative')
+    }
+
+    // Normalize highestSeenSentinel: it should never be lower than lastSeenSentinel
+    // This ensures data consistency - highest can't be less than current position
+    let normalizedHighest = input.highestSeenSentinel
+    if (input.lastSeenSentinel > input.highestSeenSentinel) {
+      normalizedHighest = input.lastSeenSentinel
+      this.logger.debug(
+        `Normalizing highestSeenSentinel: ${input.highestSeenSentinel} -> ${normalizedHighest} ` +
+          `(lastSeen: ${input.lastSeenSentinel}) for user ${userId} on item ${input.libraryItemId}`,
+      )
+    }
+
+    // Update library item's total_sentinels if provided
+    if (input.totalSentinels !== undefined && input.totalSentinels > 0) {
+      await this.libraryItemRepository.update(input.libraryItemId, userId, {
+        totalSentinels: input.totalSentinels,
+      })
+      this.logger.debug(
+        `Updated total_sentinels to ${input.totalSentinels} for item ${input.libraryItemId}`,
+      )
+    }
+
+    // Upsert progress (create or update) with normalized values
+    const progress = await this.progressRepository.upsertProgress(
+      userId,
+      input.libraryItemId,
+      input.contentVersion || null,
+      input.lastSeenSentinel,
+      normalizedHighest,
+    )
+
+    this.logger.log(
+      `Updated reading progress for user ${userId} on item ${input.libraryItemId}: sentinel ${input.lastSeenSentinel}`,
+    )
+
+    return progress
+  }
+
+  /**
+   * Get completion percentage based on sentinel progress
+   * @param progress - Reading progress entity
+   * @param totalSentinels - Total number of sentinels in the content
+   * @returns Completion percentage (0-100)
+   */
+  calculateCompletion(
+    progress: ReadingProgressEntity,
+    totalSentinels: number,
+  ): number {
+    if (totalSentinels <= 0) return 0
+    return Math.min(
+      100,
+      Math.round((progress.highestSeenSentinel / totalSentinels) * 100),
+    )
+  }
+
+  /**
+   * Detect if content has changed since last read
+   * @param userId - User ID
+   * @param libraryItemId - Library item ID
+   * @param currentContentVersion - Current content hash
+   * @returns True if content has changed, false otherwise
+   */
+  async hasContentChanged(
+    userId: string,
+    libraryItemId: string,
+    currentContentVersion: string,
+  ): Promise<boolean> {
+    const latestProgress = await this.progressRepository.findLatestProgress(
+      libraryItemId,
+      userId,
+    )
+
+    if (!latestProgress || !latestProgress.contentVersion) {
+      return false
+    }
+
+    return latestProgress.contentVersion !== currentContentVersion
+  }
+}
diff --git a/packages/api-nest/src/repositories/entity-label.repository.ts b/packages/api-nest/src/repositories/entity-label.repository.ts
index 6fc88203e..e7243dc1a 100644
--- a/packages/api-nest/src/repositories/entity-label.repository.ts
+++ b/packages/api-nest/src/repositories/entity-label.repository.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common'
 import { InjectRepository } from '@nestjs/typeorm'
-import { Repository } from 'typeorm'
+import { Repository, In } from 'typeorm'
 import { EntityLabel } from '../label/entities/entity-label.entity'
 import { IEntityLabelRepository } from './interfaces/entity-label-repository.interface'
 
@@ -12,7 +12,7 @@ import { IEntityLabelRepository } from './interfaces/entity-label-repository.int
 export class EntityLabelRepository implements IEntityLabelRepository {
   constructor(
     @InjectRepository(EntityLabel)
-    private readonly repository: Repository<EntityLabel>,
+    private readonly repository: Repository<EntityLabel>
   ) {}
 
   /**
@@ -45,4 +45,30 @@ export class EntityLabelRepository implements IEntityLabelRepository {
   async save(entityLabels: EntityLabel[]): Promise<EntityLabel[]> {
     return this.repository.save(entityLabels)
   }
+
+  /**
+   * Batch find entity labels for multiple library items with label relations loaded
+   * Used by DataLoader to prevent N+1 queries
+   */
+  async findByLibraryItemIds(libraryItemIds: string[]): Promise<Map<string, EntityLabel[]>> {
+    if (libraryItemIds.length === 0) {
+      return new Map()
+    }
+
+    const entityLabels = await this.repository.find({
+      where: { libraryItemId: In(libraryItemIds) },
+      relations: ['label'],
+    })
+
+    // Group by library item ID
+    const result = new Map<string, EntityLabel[]>()
+    for (const libraryItemId of libraryItemIds) {
+      result.set(
+        libraryItemId,
+        entityLabels.filter(el => el.libraryItemId === libraryItemId)
+      )
+    }
+
+    return result
+  }
 }
diff --git a/packages/api-nest/src/repositories/highlight.repository.ts b/packages/api-nest/src/repositories/highlight.repository.ts
index 1ff4b2bda..41c5454cf 100644
--- a/packages/api-nest/src/repositories/highlight.repository.ts
+++ b/packages/api-nest/src/repositories/highlight.repository.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common'
 import { InjectRepository } from '@nestjs/typeorm'
-import { Repository } from 'typeorm'
+import { Repository, In } from 'typeorm'
 import { HighlightEntity } from '../highlight/entities/highlight.entity'
 import { IHighlightRepository } from './interfaces/highlight-repository.interface'
 
@@ -18,10 +18,7 @@ export class HighlightRepository implements IHighlightRepository {
   /**
    * Find a highlight by ID and user ID
    */
-  async findById(
-    id: string,
-    userId: string,
-  ): Promise<HighlightEntity | null> {
+  async findById(id: string, userId: string): Promise<HighlightEntity | null> {
     return this.repository.findOne({
       where: {
         id,
@@ -69,4 +66,47 @@ export class HighlightRepository implements IHighlightRepository {
   async remove(highlight: HighlightEntity): Promise<void> {
     await this.repository.remove(highlight)
   }
+
+  /**
+   * Batch find highlights for multiple library items
+   * Used by DataLoader to prevent N+1 queries
+   */
+  async findByLibraryItemIds(
+    libraryItemIds: string[],
+    userId: string,
+  ): Promise<Map<string, HighlightEntity[]>> {
+    if (libraryItemIds.length === 0) {
+      return new Map()
+    }
+
+    const highlights = await this.repository.find({
+      where: {
+        libraryItemId: In(libraryItemIds),
+        userId,
+      },
+      order: {
+        highlightPositionPercent: 'ASC',
+      },
+    })
+
+    // Group by library item ID
+    const result = new Map<string, HighlightEntity[]>()
+
+    for (const highlight of highlights) {
+      const bucket = result.get(highlight.libraryItemId)
+      if (bucket) {
+        bucket.push(highlight)
+      } else {
+        result.set(highlight.libraryItemId, [highlight])
+      }
+    }
+
+    for (const libraryItemId of libraryItemIds) {
+      if (!result.has(libraryItemId)) {
+        result.set(libraryItemId, [])
+      }
+    }
+
+    return result
+  }
 }
diff --git a/packages/api-nest/src/repositories/injection-tokens.ts b/packages/api-nest/src/repositories/injection-tokens.ts
new file mode 100644
index 000000000..f6595861b
--- /dev/null
+++ b/packages/api-nest/src/repositories/injection-tokens.ts
@@ -0,0 +1,16 @@
+/**
+ * Injection tokens for dependency injection
+ * Using Symbols instead of strings provides:
+ * - Type safety (prevents typos)
+ * - Better IDE autocomplete
+ * - Prevents accidental token collisions
+ * - Enables tree-shaking of unused tokens
+ */
+export const REPOSITORY_TOKENS = {
+  ILibraryItemRepository: Symbol('ILibraryItemRepository'),
+  IHighlightRepository: Symbol('IHighlightRepository'),
+  ILabelRepository: Symbol('ILabelRepository'),
+  IEntityLabelRepository: Symbol('IEntityLabelRepository'),
+  IReadingProgressRepository: Symbol('IReadingProgressRepository'),
+} as const
+
diff --git a/packages/api-nest/src/repositories/interfaces/entity-label-repository.interface.ts b/packages/api-nest/src/repositories/interfaces/entity-label-repository.interface.ts
index eb680785f..e990055be 100644
--- a/packages/api-nest/src/repositories/interfaces/entity-label-repository.interface.ts
+++ b/packages/api-nest/src/repositories/interfaces/entity-label-repository.interface.ts
@@ -5,6 +5,7 @@ import { EntityLabel } from '../../label/entities/entity-label.entity'
  * Manages the many-to-many relationship between library items and labels
  */
 export interface IEntityLabelRepository {
+
   /**
    * Find entity labels for a library item with label relations loaded
    * @param libraryItemId - Library item ID
@@ -32,4 +33,11 @@ export interface IEntityLabelRepository {
    * @returns Saved entity labels
    */
   save(entityLabels: EntityLabel[]): Promise<EntityLabel[]>
+
+  /**
+   * Batch find entity labels for multiple library items with label relations loaded
+   * @param libraryItemIds - Array of library item IDs
+   * @returns Map of library item ID to array of entity labels with label relations
+   */
+  findByLibraryItemIds(libraryItemIds: string[]): Promise<Map<string, EntityLabel[]>>
 }
diff --git a/packages/api-nest/src/repositories/interfaces/highlight-repository.interface.ts b/packages/api-nest/src/repositories/interfaces/highlight-repository.interface.ts
index c7d8bf023..2cfdcb1e8 100644
--- a/packages/api-nest/src/repositories/interfaces/highlight-repository.interface.ts
+++ b/packages/api-nest/src/repositories/interfaces/highlight-repository.interface.ts
@@ -5,6 +5,7 @@ import { HighlightEntity } from '../../highlight/entities/highlight.entity'
  * Separates data access layer from business logic
  */
 export interface IHighlightRepository {
+
   /**
    * Find a highlight by ID and user ID
    * @param id - Highlight ID
@@ -44,4 +45,15 @@ export interface IHighlightRepository {
    * @returns void
    */
   remove(highlight: HighlightEntity): Promise<void>
+
+  /**
+   * Batch find highlights for multiple library items
+   * @param libraryItemIds - Array of library item IDs
+   * @param userId - User ID who owns the highlights
+   * @returns Map of library item ID to array of highlights
+   */
+  findByLibraryItemIds(
+    libraryItemIds: string[],
+    userId: string,
+  ): Promise<Map<string, HighlightEntity[]>>
 }
diff --git a/packages/api-nest/src/repositories/interfaces/library-item-repository.interface.ts b/packages/api-nest/src/repositories/interfaces/library-item-repository.interface.ts
index 1d2143a59..e5e6e4897 100644
--- a/packages/api-nest/src/repositories/interfaces/library-item-repository.interface.ts
+++ b/packages/api-nest/src/repositories/interfaces/library-item-repository.interface.ts
@@ -1,8 +1,5 @@
 import { LibraryItemEntity } from '../../library/entities/library-item.entity'
-import {
-  LibrarySearchInput,
-  ReadingProgressInput,
-} from '../../library/dto/library-inputs.type'
+import { LibrarySearchInput } from '../../library/dto/library-inputs.type'
 
 /**
  * Options for finding library items
@@ -38,6 +35,8 @@ export interface BulkOperationResult {
  * Separates data access layer from business logic
  */
 export interface ILibraryItemRepository {
+  // Find operations
+
   /**
    * Find a library item by ID and user ID
    * @param id - Library item ID
@@ -46,6 +45,14 @@ export interface ILibraryItemRepository {
    */
   findById(id: string, userId: string): Promise<LibraryItemEntity | null>
 
+  /**
+   * Find multiple library items by IDs and user ID
+   * @param ids - Array of library item IDs
+   * @param userId - User ID who owns the items
+   * @returns Array of library items (items not found are omitted)
+   */
+  findByIds(ids: string[], userId: string): Promise<LibraryItemEntity[]>
+
   /**
    * Find a library item by URL and user ID (for duplicate detection)
    * @param url - Original URL
@@ -83,6 +90,19 @@ export interface ILibraryItemRepository {
    */
   create(data: Partial<LibraryItemEntity>): LibraryItemEntity
 
+  /**
+   * Update specific fields of a library item
+   * @param id - Library item ID
+   * @param userId - User ID who owns the item
+   * @param data - Partial data to update
+   * @returns Updated library item
+   */
+  update(
+    id: string,
+    userId: string,
+    data: Partial<LibraryItemEntity>,
+  ): Promise<LibraryItemEntity>
+
   /**
    * Bulk archive or unarchive library items
    * @param userId - User ID who owns the items
diff --git a/packages/api-nest/src/repositories/interfaces/reading-progress-repository.interface.ts b/packages/api-nest/src/repositories/interfaces/reading-progress-repository.interface.ts
new file mode 100644
index 000000000..f9a828269
--- /dev/null
+++ b/packages/api-nest/src/repositories/interfaces/reading-progress-repository.interface.ts
@@ -0,0 +1,76 @@
+import { ReadingProgressEntity } from '../../reading-progress/entities/reading-progress.entity'
+
+/**
+ * Repository interface for ReadingProgress entity
+ * Manages sentinel-based reading position tracking per user/item/content version
+ */
+export interface IReadingProgressRepository {
+  /**
+   * Find reading progress for a library item (optionally filtered by content version)
+   * @param libraryItemId - Library item ID
+   * @param userId - User ID who owns the progress
+   * @param contentVersion - Optional content hash/version to filter by
+   * @returns Reading progress or null if not found
+   */
+  findProgress(
+    libraryItemId: string,
+    userId: string,
+    contentVersion?: string | null,
+  ): Promise<ReadingProgressEntity | null>
+
+  /**
+   * Find the most recent reading progress for a library item (any version)
+   * @param libraryItemId - Library item ID
+   * @param userId - User ID who owns the progress
+   * @returns Most recent reading progress or null
+   */
+  findLatestProgress(
+    libraryItemId: string,
+    userId: string,
+  ): Promise<ReadingProgressEntity | null>
+
+  /**
+   * Create a new reading progress instance (without saving to database)
+   * @param data - Partial reading progress data
+   * @returns Reading progress instance
+   */
+  create(data: Partial<ReadingProgressEntity>): ReadingProgressEntity
+
+  /**
+   * Save (create or update) reading progress
+   * Uses upsert to handle conflicts on unique constraint
+   * @param progress - Reading progress to save
+   * @returns Saved reading progress
+   */
+  save(progress: ReadingProgressEntity): Promise<ReadingProgressEntity>
+
+  /**
+   * Update or create reading progress for a library item
+   * Handles upserting based on unique constraint (user, item, version)
+   * @param userId - User ID
+   * @param libraryItemId - Library item ID
+   * @param contentVersion - Content hash/version (nullable)
+   * @param lastSeenSentinel - Last sentinel scrolled past
+   * @param highestSeenSentinel - Highest sentinel ever reached
+   * @returns Updated/created reading progress
+   */
+  upsertProgress(
+    userId: string,
+    libraryItemId: string,
+    contentVersion: string | null,
+    lastSeenSentinel: number,
+    highestSeenSentinel: number,
+  ): Promise<ReadingProgressEntity>
+
+  /**
+   * Batch find latest reading progress for multiple library items
+   * Used by DataLoader to prevent N+1 queries
+   * @param libraryItemIds - Array of library item IDs
+   * @param userId - User ID who owns the progress
+   * @returns Map of library item ID to reading progress
+   */
+  findByLibraryItemIds(
+    libraryItemIds: string[],
+    userId: string,
+  ): Promise<Map<string, ReadingProgressEntity>>
+}
diff --git a/packages/api-nest/src/repositories/library-item.repository.ts b/packages/api-nest/src/repositories/library-item.repository.ts
index 3a816e119..aa1a192e5 100644
--- a/packages/api-nest/src/repositories/library-item.repository.ts
+++ b/packages/api-nest/src/repositories/library-item.repository.ts
@@ -44,6 +44,25 @@ export class LibraryItemRepository implements ILibraryItemRepository {
     })
   }
 
+  /**
+   * Find multiple library items by IDs and user ID
+   * Uses a single query with IN clause for efficiency
+   */
+  async findByIds(
+    ids: string[],
+    userId: string,
+  ): Promise<LibraryItemEntity[]> {
+    if (ids.length === 0) {
+      return []
+    }
+
+    return this.repository
+      .createQueryBuilder('item')
+      .where('item.id IN (:...ids)', { ids })
+      .andWhere('item.userId = :userId', { userId })
+      .getMany()
+  }
+
   /**
    * Find a library item by URL and user ID (for duplicate detection)
    */
@@ -155,6 +174,32 @@ export class LibraryItemRepository implements ILibraryItemRepository {
     return this.repository.create(data)
   }
 
+  /**
+   * Update specific fields of a library item
+   */
+  async update(
+    id: string,
+    userId: string,
+    data: Partial<LibraryItemEntity>,
+  ): Promise<LibraryItemEntity> {
+    // First find the item to ensure it exists and belongs to the user
+    const item = await this.findById(id, userId)
+    if (!item) {
+      throw new Error(`Library item with ID ${id} not found`)
+    }
+
+    // Update the item
+    await this.repository.update({ id, userId }, data)
+
+    // Fetch and return the updated item
+    const updated = await this.findById(id, userId)
+    if (!updated) {
+      throw new Error(`Failed to fetch updated library item ${id}`)
+    }
+
+    return updated
+  }
+
   /**
    * Bulk archive or unarchive library items
    */
@@ -376,8 +421,6 @@ export class LibraryItemRepository implements ILibraryItemRepository {
           .update(LibraryItemEntity)
           .set({
             readAt: new Date(),
-            readingProgressTopPercent: 100,
-            readingProgressBottomPercent: 100,
           })
           .where('id IN (:...ids)', { ids: batch })
           .andWhere('userId = :userId', { userId })
diff --git a/packages/api-nest/src/repositories/reading-progress.repository.ts b/packages/api-nest/src/repositories/reading-progress.repository.ts
new file mode 100644
index 000000000..9b89d6356
--- /dev/null
+++ b/packages/api-nest/src/repositories/reading-progress.repository.ts
@@ -0,0 +1,140 @@
+import { Injectable } from '@nestjs/common'
+import { InjectRepository } from '@nestjs/typeorm'
+import { Repository } from 'typeorm'
+import { ReadingProgressEntity } from '../reading-progress/entities/reading-progress.entity'
+import { IReadingProgressRepository } from './interfaces/reading-progress-repository.interface'
+
+/**
+ * TypeORM implementation of the IReadingProgressRepository interface
+ * Handles all data access operations for sentinel-based reading progress
+ */
+@Injectable()
+export class ReadingProgressRepository implements IReadingProgressRepository {
+  constructor(
+    @InjectRepository(ReadingProgressEntity)
+    private readonly repository: Repository<ReadingProgressEntity>,
+  ) {}
+
+  /**
+   * Find reading progress for a specific user + item + content version
+   */
+  async findProgress(
+    libraryItemId: string,
+    userId: string,
+    contentVersion?: string | null,
+  ): Promise<ReadingProgressEntity | null> {
+    return this.repository.findOne({
+      where: {
+        libraryItemId,
+        userId,
+        // Handle null contentVersion correctly
+        contentVersion: contentVersion ?? null,
+      },
+    })
+  }
+
+  /**
+   * Find the most recent reading progress for a library item (any version)
+   * Useful when content version is unknown or has changed
+   */
+  async findLatestProgress(
+    libraryItemId: string,
+    userId: string,
+  ): Promise<ReadingProgressEntity | null> {
+    return this.repository.findOne({
+      where: {
+        libraryItemId,
+        userId,
+      },
+      order: {
+        updatedAt: 'DESC',
+      },
+    })
+  }
+
+  /**
+   * Create a new reading progress instance (without saving to database)
+   */
+  create(data: Partial<ReadingProgressEntity>): ReadingProgressEntity {
+    return this.repository.create(data)
+  }
+
+  /**
+   * Save (create or update) reading progress
+   */
+  async save(progress: ReadingProgressEntity): Promise<ReadingProgressEntity> {
+    return this.repository.save(progress)
+  }
+
+  /**
+   * Upsert reading progress using INSERT ... ON CONFLICT UPDATE
+   * More efficient than separate find + save operations
+   */
+  async upsertProgress(
+    userId: string,
+    libraryItemId: string,
+    contentVersion: string | null,
+    lastSeenSentinel: number,
+    highestSeenSentinel: number,
+  ): Promise<ReadingProgressEntity> {
+    // First, try to find existing progress
+    const existing = await this.findProgress(
+      libraryItemId,
+      userId,
+      contentVersion,
+    )
+
+    if (existing) {
+      // Update existing record
+      // Always update lastSeenSentinel, but only increase highestSeenSentinel
+      existing.lastSeenSentinel = lastSeenSentinel
+      existing.highestSeenSentinel = Math.max(
+        existing.highestSeenSentinel,
+        highestSeenSentinel,
+      )
+      return this.save(existing)
+    }
+
+    // Create new record
+    const progress = this.create({
+      userId,
+      libraryItemId,
+      contentVersion,
+      lastSeenSentinel,
+      highestSeenSentinel,
+    })
+
+    return this.save(progress)
+  }
+
+  /**
+   * Batch find latest reading progress for multiple library items
+   * Optimized for DataLoader to prevent N+1 queries
+   */
+  async findByLibraryItemIds(
+    libraryItemIds: string[],
+    userId: string,
+  ): Promise<Map<string, ReadingProgressEntity>> {
+    if (libraryItemIds.length === 0) {
+      return new Map()
+    }
+
+    // Fetch all progress records for these items in one query
+    const progressRecords = await this.repository
+      .createQueryBuilder('rp')
+      .where('rp.library_item_id IN (:...itemIds)', { itemIds: libraryItemIds })
+      .andWhere('rp.user_id = :userId', { userId })
+      .orderBy('rp.updated_at', 'DESC')
+      .getMany()
+
+    // Group by library_item_id, keeping only the most recent for each
+    const progressMap = new Map<string, ReadingProgressEntity>()
+    for (const progress of progressRecords) {
+      if (!progressMap.has(progress.libraryItemId)) {
+        progressMap.set(progress.libraryItemId, progress)
+      }
+    }
+
+    return progressMap
+  }
+}
diff --git a/packages/api-nest/src/repositories/repositories.module.ts b/packages/api-nest/src/repositories/repositories.module.ts
index 4f50f1921..bf98eb2fb 100644
--- a/packages/api-nest/src/repositories/repositories.module.ts
+++ b/packages/api-nest/src/repositories/repositories.module.ts
@@ -8,6 +8,9 @@ import { Label } from '../label/entities/label.entity'
 import { EntityLabel } from '../label/entities/entity-label.entity'
 import { LabelRepository } from './label.repository'
 import { EntityLabelRepository } from './entity-label.repository'
+import { ReadingProgressEntity } from '../reading-progress/entities/reading-progress.entity'
+import { ReadingProgressRepository } from './reading-progress.repository'
+import { REPOSITORY_TOKENS } from './injection-tokens'
 
 /**
  * RepositoriesModule
@@ -24,31 +27,37 @@ import { EntityLabelRepository } from './entity-label.repository'
       HighlightEntity,
       Label,
       EntityLabel,
+      ReadingProgressEntity,
     ]),
   ],
   providers: [
     {
-      provide: 'ILibraryItemRepository',
+      provide: REPOSITORY_TOKENS.ILibraryItemRepository,
       useClass: LibraryItemRepository,
     },
     {
-      provide: 'IHighlightRepository',
+      provide: REPOSITORY_TOKENS.IHighlightRepository,
       useClass: HighlightRepository,
     },
     {
-      provide: 'ILabelRepository',
+      provide: REPOSITORY_TOKENS.ILabelRepository,
       useClass: LabelRepository,
     },
     {
-      provide: 'IEntityLabelRepository',
+      provide: REPOSITORY_TOKENS.IEntityLabelRepository,
       useClass: EntityLabelRepository,
     },
+    {
+      provide: REPOSITORY_TOKENS.IReadingProgressRepository,
+      useClass: ReadingProgressRepository,
+    },
   ],
   exports: [
-    'ILibraryItemRepository',
-    'IHighlightRepository',
-    'ILabelRepository',
-    'IEntityLabelRepository',
+    REPOSITORY_TOKENS.ILibraryItemRepository,
+    REPOSITORY_TOKENS.IHighlightRepository,
+    REPOSITORY_TOKENS.ILabelRepository,
+    REPOSITORY_TOKENS.IEntityLabelRepository,
+    REPOSITORY_TOKENS.IReadingProgressRepository,
     TypeOrmModule, // Export TypeOrmModule to make raw repositories available in tests
   ],
 })
diff --git a/packages/api-nest/test/factories-example.e2e-spec.ts b/packages/api-nest/test/factories-example.e2e-spec.ts
index a013d8297..914715b5f 100644
--- a/packages/api-nest/test/factories-example.e2e-spec.ts
+++ b/packages/api-nest/test/factories-example.e2e-spec.ts
@@ -7,10 +7,16 @@
  * Run with: yarn test:e2e --testPathPattern=factories-example
  */
 
-import { UserFactory, LibraryItemFactory, HighlightFactory, LabelFactory } from './factories'
+import {
+  UserFactory,
+  LibraryItemFactory,
+  HighlightFactory,
+  LabelFactory,
+} from './factories'
 import { getTestDataSource } from './setup/test-datasource'
 import { UserRole } from '../src/user/enums/user-role.enum'
 import { StatusType } from '../src/user/entities/user.entity'
+import { HighlightColor } from '../src/highlight/entities/highlight.entity'
 
 describe('Factory Pattern Example (e2e)', () => {
   it('should create test data using factories', async () => {
@@ -40,11 +46,19 @@ describe('Factory Pattern Example (e2e)', () => {
     expect(item.slug).toBeDefined() // Slug is auto-generated by factory
 
     // Create highlights for the article
-    const highlight1 = await HighlightFactory.withColor(item.id, user.id, 'yellow')
-    const highlight2 = await HighlightFactory.withColor(item.id, user.id, 'red')
+    const highlight1 = await HighlightFactory.withColor(
+      item.id,
+      user.id,
+      HighlightColor.YELLOW,
+    )
+    const highlight2 = await HighlightFactory.withColor(
+      item.id,
+      user.id,
+      HighlightColor.RED,
+    )
 
-    expect(highlight1.color).toBe('yellow')
-    expect(highlight2.color).toBe('red')
+    expect(highlight1.color).toBe(HighlightColor.YELLOW)
+    expect(highlight2.color).toBe(HighlightColor.RED)
     expect(highlight1.quote).toBeDefined() // Faker-generated
 
     // Create labels
@@ -91,8 +105,8 @@ describe('Factory Pattern Example (e2e)', () => {
     const archivedItem = await LibraryItemFactory.archived(user.id)
     expect(archivedItem.folder).toBe('archive')
 
-    const itemWithProgress = await LibraryItemFactory.withProgress(user.id, 75)
-    expect(itemWithProgress.readingProgressTopPercent).toBe(75)
+    const itemWithProgress = await LibraryItemFactory.withProgress(user.id, 100)
+    expect(itemWithProgress.readAt).toBeDefined() // 100% progress marks as read
 
     console.log('✅ Factory helper methods work perfectly!')
   })
diff --git a/packages/api-nest/test/factories/highlight.factory.ts b/packages/api-nest/test/factories/highlight.factory.ts
index dacbf40c2..172b8ac5e 100644
--- a/packages/api-nest/test/factories/highlight.factory.ts
+++ b/packages/api-nest/test/factories/highlight.factory.ts
@@ -3,6 +3,7 @@ import { Repository } from 'typeorm'
 import {
   HighlightEntity,
   HighlightType,
+  HighlightColor,
 } from '../../src/highlight/entities/highlight.entity'
 import { BaseFactory, getTestRepository } from './base.factory'
 
@@ -22,19 +23,29 @@ import { BaseFactory, getTestRepository } from './base.factory'
  * ```
  */
 class HighlightFactoryClass extends BaseFactory<HighlightEntity> {
-  protected generateDefaults() {
+  protected generateDefaults(): Partial<HighlightEntity> {
     const shortTimestamp = Date.now().toString().slice(-8)
+    const quote = faker.lorem.sentence()
 
     return {
       id: faker.string.uuid(),
       shortId: `h${shortTimestamp}${faker.string.alphanumeric(2)}`,
-      quote: faker.lorem.sentence(),
+      quote,
       prefix: faker.lorem.words(3),
       suffix: faker.lorem.words(3),
       highlightPositionPercent: faker.number.int({ min: 10, max: 90 }),
       highlightPositionAnchorIndex: faker.number.int({ min: 0, max: 100 }),
-      color: 'yellow',
+      color: HighlightColor.YELLOW,
       highlightType: HighlightType.HIGHLIGHT,
+      // Selectors format: JSON object with textQuote.exact required by database constraint
+      // Match the format from highlight.service.ts
+      selectors: {
+        textQuote: {
+          exact: quote,
+          prefix: faker.lorem.words(3),
+          suffix: faker.lorem.words(3),
+        },
+      },
       createdAt: new Date(),
       updatedAt: new Date(),
       // These will be set by the caller
@@ -55,7 +66,7 @@ class HighlightFactoryClass extends BaseFactory<HighlightEntity> {
   async withColor(
     libraryItemId: string,
     userId: string,
-    color: string,
+    color: HighlightColor,
     overrides: Partial<HighlightEntity> = {},
   ): Promise<HighlightEntity> {
     return this.create({
@@ -128,7 +139,7 @@ class HighlightFactoryClass extends BaseFactory<HighlightEntity> {
   buildWithColor(
     libraryItemId: string,
     userId: string,
-    color: string,
+    color: HighlightColor,
     overrides: Partial<HighlightEntity> = {},
   ): HighlightEntity {
     return this.build({
diff --git a/packages/api-nest/test/factories/library-item.factory.ts b/packages/api-nest/test/factories/library-item.factory.ts
index 93571fea0..47f2616ce 100644
--- a/packages/api-nest/test/factories/library-item.factory.ts
+++ b/packages/api-nest/test/factories/library-item.factory.ts
@@ -45,13 +45,11 @@ class LibraryItemFactoryClass extends BaseFactory<LibraryItemEntity> {
       // ARC-009: Add metadata fields for frontend library feature parity
       author: faker.person.fullName(),
       description: faker.lorem.paragraph(),
-      thumbnail: faker.image.url({ width: 640, height: 480, category: 'tech' }),
+      thumbnail: faker.image.url({ width: 640, height: 480 }),
       wordCount: faker.number.int({ min: 300, max: 5000 }),
       siteName: faker.company.name(),
       siteIcon: `https://${domain}/favicon.ico`,
       publishedAt: faker.date.past({ years: 1 }),
-      readingProgressTopPercent: 0,
-      readingProgressBottomPercent: 0,
       readingProgressLastReadAnchor: 0,
       readingProgressHighestReadAnchor: 0,
       readableContent: faker.lorem.paragraphs(5),
@@ -111,8 +109,6 @@ class LibraryItemFactoryClass extends BaseFactory<LibraryItemEntity> {
 
     return this.create({
       userId,
-      readingProgressTopPercent: percentComplete,
-      readingProgressBottomPercent: Math.min(percentComplete + 5, 100),
       readAt,
       ...overrides,
     })
@@ -189,8 +185,6 @@ class LibraryItemFactoryClass extends BaseFactory<LibraryItemEntity> {
   ): LibraryItemEntity {
     return this.build({
       userId,
-      readingProgressTopPercent: percentComplete,
-      readingProgressBottomPercent: Math.min(percentComplete + 5, 100),
       readAt: percentComplete === 100 ? new Date() : null,
       ...overrides,
     })
diff --git a/packages/api-nest/test/highlight.e2e-spec.ts b/packages/api-nest/test/highlight.e2e-spec.ts
index 370a83a82..1efb13b1b 100644
--- a/packages/api-nest/test/highlight.e2e-spec.ts
+++ b/packages/api-nest/test/highlight.e2e-spec.ts
@@ -11,7 +11,12 @@ import {
   LibraryItemEntity,
   LibraryItemState,
 } from '../src/library/entities/library-item.entity'
-import { HighlightEntity } from '../src/highlight/entities/highlight.entity'
+import {
+  HighlightEntity,
+  HighlightColor,
+  RepresentationType,
+  HighlightType,
+} from '../src/highlight/entities/highlight.entity'
 import { FOLDERS } from '../src/constants/folders.constants'
 
 const HIGHLIGHTS_QUERY = `
@@ -23,6 +28,8 @@ const HIGHLIGHTS_QUERY = `
       annotation
       color
       highlightPositionPercent
+      selectors
+      contentVersion
       createdAt
       updatedAt
     }
@@ -49,6 +56,8 @@ const CREATE_HIGHLIGHT_MUTATION = `
       annotation
       color
       highlightPositionPercent
+      selectors
+      contentVersion
       createdAt
     }
   }
@@ -141,7 +150,8 @@ describe('Highlight GraphQL (e2e)', () => {
       contentReader: ContentReaderType.WEB,
       folder: FOLDERS.INBOX,
       itemType: 'ARTICLE',
-      readableContent: 'This is the content of the article that can be highlighted.',
+      readableContent:
+        'This is the content of the article that can be highlighted.',
     })
 
     const saved = await libraryRepository.save(testItem)
@@ -152,17 +162,18 @@ describe('Highlight GraphQL (e2e)', () => {
     await app.close()
   }, 30000)
 
-  const executeQuery = (query: string, variables: Record<string, unknown> = {}) =>
+  const executeQuery = (
+    query: string,
+    variables: Record<string, unknown> = {},
+  ) =>
     request(app.getHttpServer())
       .post('/api/graphql')
       .set('Authorization', `Bearer ${authToken}`)
       .send({ query, variables })
-      .expect(200)
+      .expect(200) as Promise<request.Response>
 
   describe('Query highlights', () => {
     beforeAll(async () => {
-      // Create test highlights with different colors
-      // Use shorter timestamp (last 8 digits) to fit in varchar(14) constraint
       const shortTimestamp = Date.now().toString().slice(-8)
       const highlights = [
         {
@@ -174,11 +185,12 @@ describe('Highlight GraphQL (e2e)', () => {
           shortId: `t${shortTimestamp}1`,
           quote: 'First important quote',
           annotation: 'This is significant',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 10,
           highlightPositionAnchorIndex: 0,
-          highlightType: 'HIGHLIGHT' as any,
-          representation: 'CONTENT' as any,
+          highlightType: HighlightType.HIGHLIGHT,
+          representation: RepresentationType.CONTENT,
+          selectors: { textQuote: { exact: 'First important quote' } },
         },
         {
           id: randomUUID(),
@@ -189,11 +201,12 @@ describe('Highlight GraphQL (e2e)', () => {
           shortId: `t${shortTimestamp}2`,
           quote: 'Second important quote',
           annotation: 'Very interesting',
-          color: 'green',
+          color: HighlightColor.GREEN,
           highlightPositionPercent: 25,
           highlightPositionAnchorIndex: 0,
           highlightType: 'HIGHLIGHT' as any,
           representation: 'CONTENT' as any,
+          selectors: { textQuote: { exact: 'Second important quote' } },
         },
         {
           id: randomUUID(),
@@ -203,11 +216,12 @@ describe('Highlight GraphQL (e2e)', () => {
           libraryItem: { id: testLibraryItemId } as any,
           shortId: `t${shortTimestamp}3`,
           quote: 'Third important quote',
-          color: 'red',
+          color: HighlightColor.RED,
           highlightPositionPercent: 50,
           highlightPositionAnchorIndex: 0,
           highlightType: 'HIGHLIGHT' as any,
           representation: 'CONTENT' as any,
+          selectors: { textQuote: { exact: 'Third important quote' } },
         },
         {
           id: randomUUID(),
@@ -218,11 +232,12 @@ describe('Highlight GraphQL (e2e)', () => {
           shortId: `t${shortTimestamp}4`,
           quote: 'Fourth important quote',
           annotation: 'Key insight',
-          color: 'blue',
+          color: HighlightColor.BLUE,
           highlightPositionPercent: 75,
           highlightPositionAnchorIndex: 0,
           highlightType: 'HIGHLIGHT' as any,
           representation: 'CONTENT' as any,
+          selectors: { textQuote: { exact: 'Fourth important quote' } },
         },
       ]
 
@@ -260,10 +275,10 @@ describe('Highlight GraphQL (e2e)', () => {
 
       expect(response.body.errors).toBeUndefined()
       const colors = response.body.data.highlights.map((h: any) => h.color)
-      expect(colors).toContain('yellow')
-      expect(colors).toContain('green')
-      expect(colors).toContain('red')
-      expect(colors).toContain('blue')
+      expect(colors).toContain(HighlightColor.YELLOW)
+      expect(colors).toContain(HighlightColor.GREEN)
+      expect(colors).toContain(HighlightColor.RED)
+      expect(colors).toContain(HighlightColor.BLUE)
     })
 
     it('retrieves a single highlight by id', async () => {
@@ -284,7 +299,7 @@ describe('Highlight GraphQL (e2e)', () => {
         id: existing!.id,
         quote: 'First important quote',
         annotation: 'This is significant',
-        color: 'yellow',
+        color: HighlightColor.YELLOW,
       })
     })
 
@@ -329,7 +344,7 @@ describe('Highlight GraphQL (e2e)', () => {
       expect(response.body.data.createHighlight).toMatchObject({
         quote: 'New highlight quote',
         annotation: 'My thoughts',
-        color: 'yellow',
+        color: HighlightColor.YELLOW,
       })
       expect(response.body.data.createHighlight.id).toBeTruthy()
       expect(response.body.data.createHighlight.shortId).toBeTruthy()
@@ -338,7 +353,7 @@ describe('Highlight GraphQL (e2e)', () => {
       const highlight = await highlightRepository.findOneBy({
         id: response.body.data.createHighlight.id,
       })
-      expect(highlight?.color).toBe('yellow')
+      expect(highlight?.color).toBe(HighlightColor.YELLOW)
     })
 
     it('creates a highlight with red color', async () => {
@@ -346,7 +361,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Important red highlight',
-          color: 'red',
+          color: HighlightColor.RED,
           highlightPositionPercent: 42,
         },
       })
@@ -354,14 +369,14 @@ describe('Highlight GraphQL (e2e)', () => {
       expect(response.body.errors).toBeUndefined()
       expect(response.body.data.createHighlight).toMatchObject({
         quote: 'Important red highlight',
-        color: 'red',
+        color: HighlightColor.RED,
       })
 
       // Verify in database
       const highlight = await highlightRepository.findOneBy({
         id: response.body.data.createHighlight.id,
       })
-      expect(highlight?.color).toBe('red')
+      expect(highlight?.color).toBe(HighlightColor.RED)
     })
 
     it('creates a highlight with green color', async () => {
@@ -369,13 +384,15 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Positive green highlight',
-          color: 'green',
+          color: HighlightColor.GREEN,
           highlightPositionPercent: 55,
         },
       })
 
       expect(response.body.errors).toBeUndefined()
-      expect(response.body.data.createHighlight.color).toBe('green')
+      expect(response.body.data.createHighlight.color).toBe(
+        HighlightColor.GREEN,
+      )
     })
 
     it('creates a highlight with blue color', async () => {
@@ -383,13 +400,13 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Information blue highlight',
-          color: 'blue',
+          color: HighlightColor.BLUE,
           highlightPositionPercent: 68,
         },
       })
 
       expect(response.body.errors).toBeUndefined()
-      expect(response.body.data.createHighlight.color).toBe('blue')
+      expect(response.body.data.createHighlight.color).toBe(HighlightColor.BLUE)
     })
 
     it('creates a highlight without annotation', async () => {
@@ -397,7 +414,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Quote without annotation',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 20,
         },
       })
@@ -416,7 +433,7 @@ describe('Highlight GraphQL (e2e)', () => {
           quote: 'highlighted text',
           prefix: 'This is the ',
           suffix: ' with context',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 30,
         },
       })
@@ -452,7 +469,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: randomUUID(),
           quote: 'Test quote',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 40,
         },
       })
@@ -466,7 +483,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'First quote',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 11,
         },
       })
@@ -475,7 +492,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Second quote',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 12,
         },
       })
@@ -499,11 +516,12 @@ describe('Highlight GraphQL (e2e)', () => {
         shortId: `u${Date.now().toString().slice(-8)}`,
         quote: 'Original quote',
         annotation: 'Original annotation',
-        color: 'yellow',
+        color: HighlightColor.YELLOW,
         highlightPositionPercent: 50,
         highlightPositionAnchorIndex: 0,
         highlightType: 'HIGHLIGHT' as any,
         representation: 'CONTENT' as any,
+        selectors: { textQuote: { exact: 'Original quote' } },
       })
 
       const saved = await highlightRepository.save(highlight)
@@ -520,31 +538,35 @@ describe('Highlight GraphQL (e2e)', () => {
       expect(response.body.data.updateHighlight).toMatchObject({
         id: testHighlightId,
         annotation: 'Updated annotation',
-        color: 'yellow', // Unchanged
+        color: HighlightColor.YELLOW, // Unchanged
       })
 
       // Verify in database
-      const highlight = await highlightRepository.findOneBy({ id: testHighlightId })
+      const highlight = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
       expect(highlight?.annotation).toBe('Updated annotation')
-      expect(highlight?.color).toBe('yellow')
+      expect(highlight?.color).toBe(HighlightColor.YELLOW)
     })
 
     it('updates highlight color from yellow to red', async () => {
       const response = await executeQuery(UPDATE_HIGHLIGHT_MUTATION, {
         id: testHighlightId,
-        input: { color: 'red' },
+        input: { color: HighlightColor.RED },
       })
 
       expect(response.body.errors).toBeUndefined()
       expect(response.body.data.updateHighlight).toMatchObject({
         id: testHighlightId,
-        color: 'red',
+        color: HighlightColor.RED,
         annotation: 'Original annotation', // Unchanged
       })
 
       // Verify in database
-      const highlight = await highlightRepository.findOneBy({ id: testHighlightId })
-      expect(highlight?.color).toBe('red')
+      const highlight = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
+      expect(highlight?.color).toBe(HighlightColor.RED)
       expect(highlight?.annotation).toBe('Original annotation')
     })
 
@@ -553,7 +575,7 @@ describe('Highlight GraphQL (e2e)', () => {
         id: testHighlightId,
         input: {
           annotation: 'New annotation',
-          color: 'blue',
+          color: HighlightColor.BLUE,
         },
       })
 
@@ -561,13 +583,15 @@ describe('Highlight GraphQL (e2e)', () => {
       expect(response.body.data.updateHighlight).toMatchObject({
         id: testHighlightId,
         annotation: 'New annotation',
-        color: 'blue',
+        color: HighlightColor.BLUE,
       })
 
       // Verify in database
-      const highlight = await highlightRepository.findOneBy({ id: testHighlightId })
+      const highlight = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
       expect(highlight?.annotation).toBe('New annotation')
-      expect(highlight?.color).toBe('blue')
+      expect(highlight?.color).toBe(HighlightColor.BLUE)
     })
 
     it('clears annotation with empty string', async () => {
@@ -580,12 +604,19 @@ describe('Highlight GraphQL (e2e)', () => {
       expect(response.body.data.updateHighlight.annotation).toBe('')
 
       // Verify in database
-      const highlight = await highlightRepository.findOneBy({ id: testHighlightId })
+      const highlight = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
       expect(highlight?.annotation).toBe('')
     })
 
     it('cycles through all color options', async () => {
-      const colors = ['yellow', 'red', 'green', 'blue']
+      const colors = [
+        HighlightColor.YELLOW,
+        HighlightColor.RED,
+        HighlightColor.GREEN,
+        HighlightColor.BLUE,
+      ]
 
       for (const color of colors) {
         const response = await executeQuery(UPDATE_HIGHLIGHT_MUTATION, {
@@ -598,14 +629,16 @@ describe('Highlight GraphQL (e2e)', () => {
       }
 
       // Verify final state in database
-      const highlight = await highlightRepository.findOneBy({ id: testHighlightId })
-      expect(highlight?.color).toBe('blue')
+      const highlight = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
+      expect(highlight?.color).toBe(HighlightColor.BLUE)
     })
 
     it('returns error for invalid color', async () => {
       const response = await executeQuery(UPDATE_HIGHLIGHT_MUTATION, {
         id: testHighlightId,
-        input: { color: 'orange' }, // Invalid color
+        input: { color: 'orange' as any as HighlightColor }, // Invalid color
       })
 
       expect(response.body.errors).toBeDefined()
@@ -622,7 +655,9 @@ describe('Highlight GraphQL (e2e)', () => {
     })
 
     it('updates updatedAt timestamp', async () => {
-      const before = await highlightRepository.findOneBy({ id: testHighlightId })
+      const before = await highlightRepository.findOneBy({
+        id: testHighlightId,
+      })
       const originalUpdatedAt = before!.updatedAt
 
       // Wait a bit to ensure timestamp difference
@@ -650,11 +685,12 @@ describe('Highlight GraphQL (e2e)', () => {
         libraryItem: { id: testLibraryItemId } as any,
         shortId: `d${Date.now().toString().slice(-8)}`,
         quote: 'To be deleted',
-        color: 'yellow',
+        color: HighlightColor.YELLOW,
         highlightPositionPercent: 50,
         highlightPositionAnchorIndex: 0,
         highlightType: 'HIGHLIGHT' as any,
         representation: 'CONTENT' as any,
+        selectors: { textQuote: { exact: 'To be deleted' } },
       })
 
       const saved = await highlightRepository.save(highlight)
@@ -693,7 +729,7 @@ describe('Highlight GraphQL (e2e)', () => {
           libraryItemId: testLibraryItemId,
           quote: 'Critical information',
           annotation: 'Must remember',
-          color: 'red',
+          color: HighlightColor.RED,
           highlightPositionPercent: 15,
         },
       })
@@ -703,7 +739,7 @@ describe('Highlight GraphQL (e2e)', () => {
           libraryItemId: testLibraryItemId,
           quote: 'To do item',
           annotation: 'Action required',
-          color: 'green',
+          color: HighlightColor.GREEN,
           highlightPositionPercent: 35,
         },
       })
@@ -713,14 +749,20 @@ describe('Highlight GraphQL (e2e)', () => {
           libraryItemId: testLibraryItemId,
           quote: 'Reference material',
           annotation: 'For later',
-          color: 'blue',
+          color: HighlightColor.BLUE,
           highlightPositionPercent: 65,
         },
       })
 
-      expect(importantQuote.body.data.createHighlight.color).toBe('red')
-      expect(actionItem.body.data.createHighlight.color).toBe('green')
-      expect(reference.body.data.createHighlight.color).toBe('blue')
+      expect(importantQuote.body.data.createHighlight.color).toBe(
+        HighlightColor.RED,
+      )
+      expect(actionItem.body.data.createHighlight.color).toBe(
+        HighlightColor.GREEN,
+      )
+      expect(reference.body.data.createHighlight.color).toBe(
+        HighlightColor.BLUE,
+      )
 
       // Verify all highlights are retrievable
       const allHighlights = await executeQuery(HIGHLIGHTS_QUERY, {
@@ -728,9 +770,9 @@ describe('Highlight GraphQL (e2e)', () => {
       })
 
       const colors = allHighlights.body.data.highlights.map((h: any) => h.color)
-      expect(colors).toContain('red')
-      expect(colors).toContain('green')
-      expect(colors).toContain('blue')
+      expect(colors).toContain(HighlightColor.RED)
+      expect(colors).toContain(HighlightColor.GREEN)
+      expect(colors).toContain(HighlightColor.BLUE)
     })
 
     it('supports changing highlight color based on re-evaluation', async () => {
@@ -739,7 +781,7 @@ describe('Highlight GraphQL (e2e)', () => {
         input: {
           libraryItemId: testLibraryItemId,
           quote: 'Initially interesting',
-          color: 'yellow',
+          color: HighlightColor.YELLOW,
           highlightPositionPercent: 45,
         },
       })
@@ -750,15 +792,136 @@ describe('Highlight GraphQL (e2e)', () => {
       const updateResponse = await executeQuery(UPDATE_HIGHLIGHT_MUTATION, {
         id: highlightId,
         input: {
-          color: 'red',
+          color: HighlightColor.RED,
           annotation: 'Actually very important!',
         },
       })
 
       expect(updateResponse.body.data.updateHighlight).toMatchObject({
-        color: 'red',
+        color: HighlightColor.RED,
         annotation: 'Actually very important!',
       })
     })
   })
+
+  describe('Robust anchored selectors', () => {
+    it('creates highlight with explicit selectors JSON', async () => {
+      const selectors = {
+        textQuote: {
+          exact: 'highlighted text',
+          prefix: 'This is the ',
+          suffix: ' with context',
+        },
+        domRange: {
+          startPath: '0/1/2',
+          startOffset: 5,
+          endPath: '0/1/2',
+          endOffset: 20,
+        },
+        textPosition: {
+          start: 150,
+          end: 165,
+        },
+      }
+
+      const response = await executeQuery(CREATE_HIGHLIGHT_MUTATION, {
+        input: {
+          libraryItemId: testLibraryItemId,
+          quote: 'highlighted text',
+          color: HighlightColor.YELLOW,
+          highlightPositionPercent: 30,
+          selectors: selectors,
+        },
+      })
+
+      expect(response.body.errors).toBeUndefined()
+      expect(response.body.data.createHighlight.selectors).toBeTruthy()
+
+      expect(response.body.data.createHighlight.selectors).toMatchObject(
+        selectors,
+      )
+
+      // Verify in database
+      const highlight = await highlightRepository.findOneBy({
+        id: response.body.data.createHighlight.id,
+      })
+      expect(highlight?.selectors).toMatchObject(selectors)
+    })
+
+    it('creates highlight with contentVersion tracking', async () => {
+      const contentVersion = 'test-version-hash-12345'
+
+      const response = await executeQuery(CREATE_HIGHLIGHT_MUTATION, {
+        input: {
+          libraryItemId: testLibraryItemId,
+          quote: 'versioned highlight',
+          color: HighlightColor.GREEN,
+          highlightPositionPercent: 50,
+          contentVersion,
+        },
+      })
+
+      expect(response.body.errors).toBeUndefined()
+      expect(response.body.data.createHighlight.contentVersion).toBe(
+        contentVersion,
+      )
+
+      // Verify in database
+      const highlight = await highlightRepository.findOneBy({
+        id: response.body.data.createHighlight.id,
+      })
+      expect(highlight?.contentVersion).toBe(contentVersion)
+    })
+
+    it('creates highlight without selectors (legacy format)', async () => {
+      // Test backward compatibility - no selectors provided
+      const response = await executeQuery(CREATE_HIGHLIGHT_MUTATION, {
+        input: {
+          libraryItemId: testLibraryItemId,
+          quote: 'simple highlight',
+          prefix: 'before ',
+          suffix: ' after',
+          color: HighlightColor.BLUE,
+          highlightPositionPercent: 75,
+        },
+      })
+
+      expect(response.body.errors).toBeUndefined()
+      expect(response.body.data.createHighlight.selectors).toBeTruthy()
+
+      // Verify fallback to textQuote selector from quote/prefix/suffix
+      // GraphQL returns selectors as object, not string
+      expect(response.body.data.createHighlight.selectors.textQuote).toMatchObject({
+        exact: 'simple highlight',
+        prefix: 'before ',
+        suffix: ' after',
+      })
+    })
+
+    it('retrieves highlights with selectors correctly', async () => {
+      // Create a highlight with selectors
+      await executeQuery(CREATE_HIGHLIGHT_MUTATION, {
+        input: {
+          libraryItemId: testLibraryItemId,
+          quote: 'test quote',
+          color: HighlightColor.YELLOW,
+          highlightPositionPercent: 45,
+          selectors: JSON.stringify({
+            textQuote: { exact: 'test quote' },
+          }),
+        },
+      })
+
+      // Query all highlights
+      const response = await executeQuery(HIGHLIGHTS_QUERY, {
+        libraryItemId: testLibraryItemId,
+      })
+
+      expect(response.body.errors).toBeUndefined()
+      const highlightsWithSelectors = response.body.data.highlights.filter(
+        (h: any) => h.selectors,
+      )
+      expect(highlightsWithSelectors.length).toBeGreaterThan(0)
+    })
+  })
 })
diff --git a/packages/api-nest/test/jest-e2e.json b/packages/api-nest/test/jest-e2e.json
index e6a2142ee..cbfb68d09 100644
--- a/packages/api-nest/test/jest-e2e.json
+++ b/packages/api-nest/test/jest-e2e.json
@@ -21,5 +21,7 @@
   "globalSetup": "<rootDir>/setup/global-setup.ts",
   "globalTeardown": "<rootDir>/setup/global-teardown.ts",
   "setupFilesAfterEnv": ["<rootDir>/setup/jest-environment-setup.ts"],
-  "testTimeout": 60000
+  "testTimeout": 60000,
+  "silent": false,
+  "verbose": true
 }
diff --git a/packages/api-nest/test/library-arc009.e2e-spec.ts b/packages/api-nest/test/library-arc009.e2e-spec.ts
index 82df6e155..019b9da79 100644
--- a/packages/api-nest/test/library-arc009.e2e-spec.ts
+++ b/packages/api-nest/test/library-arc009.e2e-spec.ts
@@ -104,18 +104,18 @@ describe('ARC-009: Frontend Library Feature Parity (e2e)', () => {
 
     // Create item with both progress and metadata
     const item = await LibraryItemFactory.withFullMetadata(user.id, {
-      readingProgressTopPercent: 65,
+      readAt: new Date(), // Mark as read
       title: 'Partially Read Article',
     })
 
     expect(item.title).toBe('Partially Read Article')
-    expect(item.readingProgressTopPercent).toBe(65)
+    expect(item.readAt).toBeDefined()
     expect(item.thumbnail).toBeDefined()
     expect(item.wordCount).toBeDefined()
     expect(item.siteName).toBeDefined()
 
     console.log('✅ Progress + metadata work together')
-    console.log('  - Progress:', item.readingProgressTopPercent, '%')
+    console.log('  - Read:', item.readAt ? 'Yes' : 'No')
     console.log('  - Word count:', item.wordCount)
   })
 
diff --git a/packages/api-nest/test/library.e2e-spec.ts b/packages/api-nest/test/library.e2e-spec.ts
index 5eb0ffb01..50dc8081b 100644
--- a/packages/api-nest/test/library.e2e-spec.ts
+++ b/packages/api-nest/test/library.e2e-spec.ts
@@ -61,12 +61,12 @@ const DELETE_LIBRARY_ITEM_MUTATION = `
   }
 `
 
+// Legacy UPDATE_READING_PROGRESS_MUTATION removed
+// See reading-progress.e2e-spec.ts for sentinel-based progress tests
 const UPDATE_READING_PROGRESS_MUTATION = `
   mutation UpdateReadingProgress($id: String!, $progress: ReadingProgressInput!) {
     updateReadingProgress(id: $id, progress: $progress) {
       id
-      readingProgressTopPercent
-      readingProgressBottomPercent
       readAt
     }
   }
@@ -184,7 +184,10 @@ describe('Library GraphQL (e2e)', () => {
     await app.close()
   }, 30000) // 30 second timeout for graceful BullMQ worker shutdown
 
-  const executeQuery = (query: string, variables: Record<string, unknown> = {}) =>
+  const executeQuery = (
+    query: string,
+    variables: Record<string, unknown> = {},
+  ) =>
     request(app.getHttpServer())
       .post('/api/graphql')
       .set('Authorization', `Bearer ${authToken}`)
@@ -263,7 +266,10 @@ describe('Library GraphQL (e2e)', () => {
   })
 
   it('retrieves a single library item by id', async () => {
-    const existing = await libraryRepository.findOneByOrFail({ slug: 'second-article', userId })
+    const existing = await libraryRepository.findOneByOrFail({
+      slug: 'second-article',
+      userId,
+    })
 
     const response = await executeQuery(LIBRARY_ITEM_QUERY, { id: existing.id })
 
@@ -293,8 +299,6 @@ describe('Library GraphQL (e2e)', () => {
         contentReader: ContentReaderType.WEB,
         folder: FOLDERS.INBOX,
         itemType: 'ARTICLE',
-        readingProgressTopPercent: 0,
-        readingProgressBottomPercent: 0,
       })
 
       const saved = await libraryRepository.save(testItem)
@@ -410,76 +414,6 @@ describe('Library GraphQL (e2e)', () => {
       })
     })
 
-    describe('updateReadingProgress', () => {
-      it('updates reading progress', async () => {
-        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
-          id: testItemId,
-          progress: {
-            readingProgressTopPercent: 50,
-            readingProgressBottomPercent: 45,
-            readingProgressAnchorIndex: 100,
-            readingProgressHighestAnchor: 150,
-          },
-        })
-
-        expect(response.body.errors).toBeUndefined()
-        expect(response.body.data.updateReadingProgress).toMatchObject({
-          id: testItemId,
-          readingProgressTopPercent: 50,
-          readingProgressBottomPercent: 45,
-        })
-
-        // Verify in database
-        const item = await libraryRepository.findOneBy({ id: testItemId })
-        expect(item?.readingProgressTopPercent).toBe(50)
-        expect(item?.readingProgressBottomPercent).toBe(45)
-        expect(item?.readingProgressLastReadAnchor).toBe(100)
-        expect(item?.readingProgressHighestReadAnchor).toBe(150)
-      })
-
-      it('marks item as read when progress reaches 100%', async () => {
-        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
-          id: testItemId,
-          progress: {
-            readingProgressTopPercent: 100,
-            readingProgressBottomPercent: 100,
-          },
-        })
-
-        expect(response.body.errors).toBeUndefined()
-        expect(response.body.data.updateReadingProgress.readAt).toBeTruthy()
-
-        // Verify in database
-        const item = await libraryRepository.findOneBy({ id: testItemId })
-        expect(item?.readAt).toBeTruthy()
-      })
-
-      it('returns error for invalid progress percentage', async () => {
-        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
-          id: testItemId,
-          progress: {
-            readingProgressTopPercent: 150, // Invalid: > 100
-            readingProgressBottomPercent: 45,
-          },
-        })
-
-        expect(response.body.errors).toBeDefined()
-      })
-
-      it('returns error for non-existent item', async () => {
-        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
-          id: randomUUID(),
-          progress: {
-            readingProgressTopPercent: 50,
-            readingProgressBottomPercent: 45,
-          },
-        })
-
-        expect(response.body.errors).toBeDefined()
-        expect(response.body.errors[0].message).toContain('not found')
-      })
-    })
-
     describe('moveLibraryItemToFolder', () => {
       it('moves item to archive', async () => {
         const response = await executeQuery(
@@ -669,9 +603,9 @@ describe('Library GraphQL (e2e)', () => {
       })
 
       expect(response.body.errors).toBeUndefined()
-      expect(response.body.data.libraryItems.items.length).toBeGreaterThanOrEqual(
-        2,
-      )
+      expect(
+        response.body.data.libraryItems.items.length,
+      ).toBeGreaterThanOrEqual(2)
       expect(
         response.body.data.libraryItems.items.every(
           (item: any) => item.author === 'John Doe',
@@ -728,7 +662,9 @@ describe('Library GraphQL (e2e)', () => {
 
       expect(response.body.errors).toBeUndefined()
       const items = response.body.data.libraryItems.items
-      expect(items.every((item: any) => item.folder === FOLDERS.INBOX)).toBe(true)
+      expect(items.every((item: any) => item.folder === FOLDERS.INBOX)).toBe(
+        true,
+      )
       expect(items.every((item: any) => item.author === 'John Doe')).toBe(true)
     })
 
@@ -773,7 +709,9 @@ describe('Library GraphQL (e2e)', () => {
 
       expect(response.body.errors).toBeUndefined()
       expect(response.body.data.libraryItems.items.length).toBeGreaterThan(0)
-      expect(response.body.data.libraryItems.items[0].title).toContain('GraphQL')
+      expect(response.body.data.libraryItems.items[0].title).toContain(
+        'GraphQL',
+      )
     })
 
     it('supports pagination with search filters', async () => {
@@ -843,7 +781,9 @@ describe('Library GraphQL (e2e)', () => {
           successCount: 3,
           failureCount: 0,
         })
-        expect(response.body.data.bulkArchiveItems.message).toContain('archived')
+        expect(response.body.data.bulkArchiveItems.message).toContain(
+          'archived',
+        )
 
         // Verify items are archived
         const archivedItems = await libraryRepository.find({
@@ -887,7 +827,9 @@ describe('Library GraphQL (e2e)', () => {
         })
 
         expect(response.body.errors).toBeDefined()
-        expect(response.body.errors[0].message).toContain('No item IDs provided')
+        expect(response.body.errors[0].message).toContain(
+          'No item IDs provided',
+        )
       })
 
       it('handles partial success gracefully', async () => {
@@ -899,7 +841,9 @@ describe('Library GraphQL (e2e)', () => {
         })
 
         expect(response.body.errors).toBeUndefined()
-        expect(response.body.data.bulkArchiveItems.successCount).toBeGreaterThan(0)
+        expect(
+          response.body.data.bulkArchiveItems.successCount,
+        ).toBeGreaterThan(0)
       })
     })
 
@@ -932,7 +876,9 @@ describe('Library GraphQL (e2e)', () => {
         })
 
         expect(response.body.errors).toBeDefined()
-        expect(response.body.errors[0].message).toContain('No item IDs provided')
+        expect(response.body.errors[0].message).toContain(
+          'No item IDs provided',
+        )
       })
     })
 
@@ -1000,7 +946,9 @@ describe('Library GraphQL (e2e)', () => {
         })
 
         expect(response.body.errors).toBeDefined()
-        expect(response.body.errors[0].message).toContain('No item IDs provided')
+        expect(response.body.errors[0].message).toContain(
+          'No item IDs provided',
+        )
       })
     })
 
@@ -1025,8 +973,6 @@ describe('Library GraphQL (e2e)', () => {
         })
         expect(markedItem?.readAt).toBeDefined()
         expect(markedItem?.readAt).toBeInstanceOf(Date)
-        expect(markedItem?.readingProgressTopPercent).toBe(100)
-        expect(markedItem?.readingProgressBottomPercent).toBe(100)
       })
 
       it('returns error for empty itemIds array', async () => {
@@ -1035,7 +981,9 @@ describe('Library GraphQL (e2e)', () => {
         })
 
         expect(response.body.errors).toBeDefined()
-        expect(response.body.errors[0].message).toContain('No item IDs provided')
+        expect(response.body.errors[0].message).toContain(
+          'No item IDs provided',
+        )
       })
     })
 
diff --git a/packages/api-nest/test/notebook.e2e-spec.ts b/packages/api-nest/test/notebook.e2e-spec.ts
index 873436b40..963fe1dde 100644
--- a/packages/api-nest/test/notebook.e2e-spec.ts
+++ b/packages/api-nest/test/notebook.e2e-spec.ts
@@ -275,15 +275,15 @@ describe('Notebook GraphQL (e2e)', () => {
       const noteContent = 'My preserved notes'
       await libraryRepository.update(testItemId, { note: noteContent })
 
-      // Update reading progress (different field)
+      // Update another field to test note preservation
       await libraryRepository.update(testItemId, {
-        readingProgressTopPercent: 50,
+        title: 'Updated Title',
       })
 
       // Verify notebook is preserved
       const item = await libraryRepository.findOneBy({ id: testItemId })
       expect(item?.note).toBe(noteContent)
-      expect(item?.readingProgressTopPercent).toBe(50)
+      expect(item?.title).toBe('Updated Title')
     })
   })
 })
diff --git a/packages/api-nest/test/reading-progress.e2e-spec.ts b/packages/api-nest/test/reading-progress.e2e-spec.ts
new file mode 100644
index 000000000..e01262d1c
--- /dev/null
+++ b/packages/api-nest/test/reading-progress.e2e-spec.ts
@@ -0,0 +1,465 @@
+import { randomUUID } from 'crypto'
+import { Test, TestingModule } from '@nestjs/testing'
+import { INestApplication, ValidationPipe } from '@nestjs/common'
+import { TypeOrmModule, getRepositoryToken } from '@nestjs/typeorm'
+import request from 'supertest'
+import { Repository } from 'typeorm'
+import { AppModule } from '../src/app/app.module'
+import { testDatabaseConfig } from '../src/config/test.config'
+import {
+  ContentReaderType,
+  LibraryItemEntity,
+  LibraryItemState,
+} from '../src/library/entities/library-item.entity'
+import { ReadingProgressEntity } from '../src/reading-progress/entities/reading-progress.entity'
+import { FOLDERS } from '../src/constants/folders.constants'
+
+const GET_READING_PROGRESS_QUERY = `
+  query GetReadingProgress($libraryItemId: String!, $contentVersion: String) {
+    readingProgress(libraryItemId: $libraryItemId, contentVersion: $contentVersion) {
+      id
+      libraryItemId
+      contentVersion
+      lastSeenSentinel
+      highestSeenSentinel
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+const UPDATE_READING_PROGRESS_MUTATION = `
+  mutation UpdateReadingProgress($input: UpdateReadingProgressInput!) {
+    updateReadingProgress(input: $input) {
+      id
+      libraryItemId
+      contentVersion
+      lastSeenSentinel
+      highestSeenSentinel
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+describe('ReadingProgress GraphQL (e2e)', () => {
+  let app: INestApplication
+  let authToken: string
+  let userId: string
+  let libraryRepository: Repository<LibraryItemEntity>
+  let progressRepository: Repository<ReadingProgressEntity>
+  let testItemId: string
+  let testContentVersion: string
+
+  beforeAll(async () => {
+    // Set required environment variables for tests
+    process.env.GOOGLE_CLIENT_ID = 'test-client-id'
+    process.env.GOOGLE_CLIENT_SECRET = 'test-client-secret'
+    process.env.JWT_SECRET = 'test-jwt-secret'
+
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    })
+      .overrideModule(TypeOrmModule)
+      .useModule(TypeOrmModule.forRoot(testDatabaseConfig))
+      .compile()
+
+    app = moduleFixture.createNestApplication()
+    app.useGlobalPipes(
+      new ValidationPipe({
+        whitelist: true,
+        forbidNonWhitelisted: true,
+        transform: true,
+      }),
+    )
+
+    app.setGlobalPrefix('api/v2')
+    await app.init()
+
+    libraryRepository = moduleFixture.get<Repository<LibraryItemEntity>>(
+      getRepositoryToken(LibraryItemEntity),
+    )
+    progressRepository = moduleFixture.get<Repository<ReadingProgressEntity>>(
+      getRepositoryToken(ReadingProgressEntity),
+    )
+  })
+
+  afterAll(async () => {
+    await app.close()
+  })
+
+  beforeEach(async () => {
+    // Note: Don't clear tables here due to foreign key constraints
+    // Each test creates a unique user, so data is isolated
+
+    // Create a test user and get auth token via REST endpoint
+    const registerResponse = await request(app.getHttpServer())
+      .post('/api/v2/auth/register')
+      .send({
+        email: `reading-progress-test-${Date.now()}@omnivore.app`,
+        name: 'Reading Progress Test User',
+        password: 'testPassword123',
+      })
+      .expect(201)
+
+    authToken = registerResponse.body.accessToken
+    userId = registerResponse.body.user.id
+  })
+
+  const executeQuery = async (query: string, variables?: any) => {
+    return request(app.getHttpServer())
+      .post('/api/graphql')
+      .set('Authorization', `Bearer ${authToken}`)
+      .send({ query, variables })
+  }
+
+  describe('Sentinel-based Reading Progress', () => {
+    beforeEach(async () => {
+      // Create a test library item
+      testContentVersion = 'test-hash-' + randomUUID()
+      const testItem = libraryRepository.create({
+        id: randomUUID(),
+        userId,
+        user: { id: userId } as any,
+        title: 'Test Article for Reading Progress',
+        slug: 'test-article-reading-progress',
+        originalUrl: 'https://example.com/test-article',
+        author: 'Test Author',
+        description: 'Test description',
+        savedAt: new Date(),
+        state: LibraryItemState.SUCCEEDED,
+        contentReader: ContentReaderType.WEB,
+        folder: FOLDERS.INBOX,
+        itemType: 'ARTICLE',
+        contentHash: testContentVersion,
+      })
+
+      const saved = await libraryRepository.save(testItem)
+      testItemId = saved.id
+    })
+
+    describe('updateReadingProgress', () => {
+      it('creates new reading progress record', async () => {
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 25,
+            highestSeenSentinel: 30,
+          },
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(response.body.data.updateReadingProgress).toMatchObject({
+          libraryItemId: testItemId,
+          contentVersion: testContentVersion,
+          lastSeenSentinel: 25,
+          highestSeenSentinel: 30,
+        })
+        expect(response.body.data.updateReadingProgress.id).toBeTruthy()
+
+        // Verify in database
+        const progress = await progressRepository.findOne({
+          where: {
+            libraryItemId: testItemId,
+            userId,
+            contentVersion: testContentVersion,
+          },
+        })
+        expect(progress).toBeTruthy()
+        expect(progress?.lastSeenSentinel).toBe(25)
+        expect(progress?.highestSeenSentinel).toBe(30)
+      })
+
+      it('updates existing reading progress record', async () => {
+        // Create initial progress
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 10,
+            highestSeenSentinel: 15,
+          },
+        })
+
+        // Update progress (user scrolled further)
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 25,
+            highestSeenSentinel: 30,
+          },
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(response.body.data.updateReadingProgress).toMatchObject({
+          libraryItemId: testItemId,
+          lastSeenSentinel: 25,
+          highestSeenSentinel: 30,
+        })
+
+        // Verify only one record exists in database
+        const progressRecords = await progressRepository.find({
+          where: {
+            libraryItemId: testItemId,
+            userId,
+          },
+        })
+        expect(progressRecords).toHaveLength(1)
+      })
+
+      it('tracks highest sentinel correctly when user scrolls backwards', async () => {
+        // User scrolls to sentinel 50
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 50,
+            highestSeenSentinel: 50,
+          },
+        })
+
+        // User scrolls back to sentinel 20 (but highest should remain 50)
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 20,
+            highestSeenSentinel: 50, // Frontend should send the max
+          },
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(response.body.data.updateReadingProgress).toMatchObject({
+          lastSeenSentinel: 20, // Current position
+          highestSeenSentinel: 50, // Max ever reached
+        })
+      })
+
+      it('handles multiple content versions for the same item', async () => {
+        const contentV1 = 'version-1-hash'
+        const contentV2 = 'version-2-hash'
+
+        // Save progress for version 1
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: contentV1,
+            lastSeenSentinel: 25,
+            highestSeenSentinel: 30,
+          },
+        })
+
+        // Save progress for version 2 (content changed)
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: contentV2,
+            lastSeenSentinel: 10,
+            highestSeenSentinel: 15,
+          },
+        })
+
+        // Verify both records exist
+        const v1Progress = await progressRepository.findOne({
+          where: {
+            libraryItemId: testItemId,
+            userId,
+            contentVersion: contentV1,
+          },
+        })
+        const v2Progress = await progressRepository.findOne({
+          where: {
+            libraryItemId: testItemId,
+            userId,
+            contentVersion: contentV2,
+          },
+        })
+
+        expect(v1Progress).toBeTruthy()
+        expect(v1Progress?.lastSeenSentinel).toBe(25)
+        expect(v2Progress).toBeTruthy()
+        expect(v2Progress?.lastSeenSentinel).toBe(10)
+      })
+
+      it('accepts progress without content version (null)', async () => {
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            lastSeenSentinel: 15,
+            highestSeenSentinel: 20,
+          },
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(
+          response.body.data.updateReadingProgress.contentVersion,
+        ).toBeNull()
+      })
+
+      it('returns error for negative sentinel values', async () => {
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: -5,
+            highestSeenSentinel: 10,
+          },
+        })
+
+        expect(response.body.errors).toBeDefined()
+      })
+
+      it('returns error for non-existent library item', async () => {
+        const response = await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: randomUUID(),
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 10,
+            highestSeenSentinel: 15,
+          },
+        })
+
+        expect(response.body.errors).toBeDefined()
+        expect(response.body.errors[0].message).toContain('not found')
+      })
+    })
+
+    describe('readingProgress query', () => {
+      beforeEach(async () => {
+        // Create some test progress data
+        await progressRepository.save(
+          progressRepository.create({
+            id: randomUUID(),
+            userId,
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 42,
+            highestSeenSentinel: 55,
+          }),
+        )
+      })
+
+      it('retrieves reading progress by library item ID and content version', async () => {
+        const response = await executeQuery(GET_READING_PROGRESS_QUERY, {
+          libraryItemId: testItemId,
+          contentVersion: testContentVersion,
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(response.body.data.readingProgress).toMatchObject({
+          libraryItemId: testItemId,
+          contentVersion: testContentVersion,
+          lastSeenSentinel: 42,
+          highestSeenSentinel: 55,
+        })
+      })
+
+      it('retrieves latest progress when content version not provided', async () => {
+        // Create progress for multiple versions
+        await progressRepository.save(
+          progressRepository.create({
+            id: randomUUID(),
+            userId,
+            libraryItemId: testItemId,
+            contentVersion: 'older-version',
+            lastSeenSentinel: 10,
+            highestSeenSentinel: 20,
+            updatedAt: new Date(Date.now() - 10000), // 10 seconds ago
+          }),
+        )
+
+        const response = await executeQuery(GET_READING_PROGRESS_QUERY, {
+          libraryItemId: testItemId,
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        // Should return the more recent one (testContentVersion)
+        expect(response.body.data.readingProgress.contentVersion).toBe(
+          testContentVersion,
+        )
+      })
+
+      it('returns null for non-existent progress', async () => {
+        const response = await executeQuery(GET_READING_PROGRESS_QUERY, {
+          libraryItemId: randomUUID(),
+          contentVersion: 'non-existent',
+        })
+
+        expect(response.body.errors).toBeDefined()
+        // Should get error because library item doesn't exist
+      })
+
+      it('returns null when no progress exists for given version', async () => {
+        const response = await executeQuery(GET_READING_PROGRESS_QUERY, {
+          libraryItemId: testItemId,
+          contentVersion: 'different-version',
+        })
+
+        expect(response.body.errors).toBeUndefined()
+        expect(response.body.data.readingProgress).toBeNull()
+      })
+    })
+
+    describe('End-to-end reading flow', () => {
+      it('simulates complete reading session with position restoration', async () => {
+        // Step 1: User starts reading (sentinel 0)
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 0,
+            highestSeenSentinel: 0,
+          },
+        })
+
+        // Step 2: User scrolls to middle of article (sentinel 25)
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 25,
+            highestSeenSentinel: 25,
+          },
+        })
+
+        // Step 3: User leaves and comes back - fetch progress
+        const getProgressResponse = await executeQuery(
+          GET_READING_PROGRESS_QUERY,
+          {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+          },
+        )
+
+        expect(
+          getProgressResponse.body.data.readingProgress.lastSeenSentinel,
+        ).toBe(25)
+
+        // Step 4: User continues reading to end (sentinel 50)
+        await executeQuery(UPDATE_READING_PROGRESS_MUTATION, {
+          input: {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+            lastSeenSentinel: 50,
+            highestSeenSentinel: 50,
+          },
+        })
+
+        // Step 5: Verify final progress
+        const finalProgressResponse = await executeQuery(
+          GET_READING_PROGRESS_QUERY,
+          {
+            libraryItemId: testItemId,
+            contentVersion: testContentVersion,
+          },
+        )
+
+        expect(
+          finalProgressResponse.body.data.readingProgress.highestSeenSentinel,
+        ).toBe(50)
+      })
+    })
+  })
+})
diff --git a/packages/api-nest/test/setup/jest-environment-setup.ts b/packages/api-nest/test/setup/jest-environment-setup.ts
index 72ca5727d..87460dcf0 100644
--- a/packages/api-nest/test/setup/jest-environment-setup.ts
+++ b/packages/api-nest/test/setup/jest-environment-setup.ts
@@ -3,6 +3,7 @@
  * Runs in each test worker to initialize the test DataSource
  */
 
+import './test-logger-config' // Import logger configuration to suppress noise
 import { DataSource } from 'typeorm'
 import { User } from '../../src/user/entities/user.entity'
 import { UserProfile } from '../../src/user/entities/profile.entity'
diff --git a/packages/api-nest/test/setup/test-logger-config.ts b/packages/api-nest/test/setup/test-logger-config.ts
new file mode 100644
index 000000000..669930f58
--- /dev/null
+++ b/packages/api-nest/test/setup/test-logger-config.ts
@@ -0,0 +1,71 @@
+/**
+ * Test Logger Configuration
+ * Suppresses non-critical logs during test execution to reduce noise
+ */
+
+// Store original console methods
+const originalConsoleLog = console.log
+const originalConsoleError = console.error
+const originalConsoleWarn = console.warn
+
+// Patterns to suppress
+const SUPPRESS_PATTERNS = [
+  /Incoming HTTP request/,
+  /HTTP request completed/,
+  /User (login|registration)/,
+  /User login (attempt|successful)/,
+  /Failed to fetch content/,
+  /Job .* failed/,
+  /Content fetch failed/,
+  /\[Nest\]/,
+  /executeQuery/,
+]
+
+/**
+ * Check if a message should be suppressed
+ */
+function shouldSuppress(message: string): boolean {
+  return SUPPRESS_PATTERNS.some((pattern) => pattern.test(message))
+}
+
+/**
+ * Filter console.log to suppress noise
+ */
+console.log = (...args: any[]) => {
+  const message = args.join(' ')
+  if (!shouldSuppress(message)) {
+    originalConsoleLog.apply(console, args)
+  }
+}
+
+/**
+ * Filter console.error to only show test-relevant errors
+ */
+console.error = (...args: any[]) => {
+  const message = args.join(' ')
+  // Only suppress specific error patterns, keep test assertion errors
+  if (
+    !message.includes('ContentProcessorService') &&
+    !message.includes('EventBusService') &&
+    !message.includes('Query failed: INSERT')
+  ) {
+    originalConsoleError.apply(console, args)
+  }
+}
+
+/**
+ * Filter console.warn
+ */
+console.warn = (...args: any[]) => {
+  const message = args.join(' ')
+  if (!shouldSuppress(message)) {
+    originalConsoleWarn.apply(console, args)
+  }
+}
+
+// Export for potential restoration in specific tests
+export const restoreConsole = () => {
+  console.log = originalConsoleLog
+  console.error = originalConsoleError
+  console.warn = originalConsoleWarn
+}
diff --git a/packages/api-nest/test/setup/testcontainers.ts b/packages/api-nest/test/setup/testcontainers.ts
index f2245fb17..ebe93a2dc 100644
--- a/packages/api-nest/test/setup/testcontainers.ts
+++ b/packages/api-nest/test/setup/testcontainers.ts
@@ -11,6 +11,7 @@ import { LibraryItemEntity } from '../../src/library/entities/library-item.entit
 import { Label } from '../../src/label/entities/label.entity'
 import { EntityLabel } from '../../src/label/entities/entity-label.entity'
 import { HighlightEntity } from '../../src/highlight/entities/highlight.entity'
+import { ReadingProgressEntity } from '../../src/reading-progress/entities/reading-progress.entity'
 
 let container: StartedPostgreSqlContainer | null = null
 let dataSource: DataSource | null = null
@@ -55,6 +56,7 @@ export async function setupTestContainer(): Promise<{
       Label,
       EntityLabel,
       HighlightEntity,
+      ReadingProgressEntity,
     ],
     synchronize: false, // We'll call synchronize() manually after creating schema
     logging: false, // Disable logging for cleaner test output
@@ -139,6 +141,7 @@ export async function cleanDatabase(): Promise<void> {
   // Truncate all tables
   const tables = [
     'omnivore.entity_label',
+    'omnivore.reading_progress',
     'omnivore.highlight',
     'omnivore.label',
     'omnivore.library_item',
diff --git a/packages/db/migrations/0193.do.add_highlight_selectors.sql b/packages/db/migrations/0193.do.add_highlight_selectors.sql
new file mode 100644
index 000000000..0c94595b6
--- /dev/null
+++ b/packages/db/migrations/0193.do.add_highlight_selectors.sql
@@ -0,0 +1,86 @@
+-- Type: DO
+-- Name: add_highlight_selectors
+-- Description: Add robust anchored selectors (JSONB) to highlight table for multi-strategy text positioning
+
+BEGIN;
+
+-- 1) Create highlight_color enum if it doesn't exist
+DO $$
+BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'highlight_color') THEN
+    CREATE TYPE omnivore.highlight_color AS ENUM ('yellow', 'red', 'green', 'blue');
+  END IF;
+END$$;
+
+-- 2) Add new columns for robust highlighting
+ALTER TABLE omnivore.highlight
+  ADD COLUMN IF NOT EXISTS selectors JSONB,
+  ADD COLUMN IF NOT EXISTS content_version VARCHAR(64);
+
+-- 3) Migrate existing highlights to new selectors format
+-- Convert quote/prefix/suffix to TextQuote selector
+UPDATE omnivore.highlight
+SET selectors = jsonb_build_object(
+  'textQuote', jsonb_build_object(
+    'exact', COALESCE(quote, ''),
+    'prefix', CASE WHEN prefix IS NOT NULL AND prefix != '' THEN prefix ELSE NULL END,
+    'suffix', CASE WHEN suffix IS NOT NULL AND suffix != '' THEN suffix ELSE NULL END
+  )
+)
+WHERE selectors IS NULL;
+
+-- 4) Make selectors NOT NULL now that all rows have data
+ALTER TABLE omnivore.highlight
+  ALTER COLUMN selectors SET NOT NULL;
+
+-- 5) Add validation constraint: selectors must contain textQuote
+ALTER TABLE omnivore.highlight
+  ADD CONSTRAINT highlight_selectors_textquote_check
+  CHECK (selectors ? 'textQuote' AND selectors->'textQuote' ? 'exact');
+
+-- 6) Change color column from text to enum (if currently text)
+-- First, set any NULL colors to default 'yellow'
+UPDATE omnivore.highlight
+SET color = 'yellow'
+WHERE color IS NULL OR color = '';
+
+-- Drop existing column and recreate with enum type
+-- (Safe because we just migrated all data)
+ALTER TABLE omnivore.highlight
+  ALTER COLUMN color TYPE omnivore.highlight_color
+  USING CASE
+    WHEN lower(color) = 'red' THEN 'red'::omnivore.highlight_color
+    WHEN lower(color) = 'green' THEN 'green'::omnivore.highlight_color
+    WHEN lower(color) = 'blue' THEN 'blue'::omnivore.highlight_color
+    ELSE 'yellow'::omnivore.highlight_color
+  END;
+
+-- Make color NOT NULL with default
+ALTER TABLE omnivore.highlight
+  ALTER COLUMN color SET NOT NULL,
+  ALTER COLUMN color SET DEFAULT 'yellow'::omnivore.highlight_color;
+
+-- 7) Create indexes for common query patterns
+
+-- Fast lookup: user's highlights for a specific item (most common query)
+CREATE INDEX IF NOT EXISTS highlight_user_item_idx
+  ON omnivore.highlight (user_id, library_item_id);
+
+-- List highlights ordered by creation time for an item
+CREATE INDEX IF NOT EXISTS highlight_item_created_idx
+  ON omnivore.highlight (library_item_id, created_at DESC);
+
+-- GIN index on selectors JSONB for potential server-side text searches
+-- (Optional but useful for future features like searching across highlights)
+CREATE INDEX IF NOT EXISTS highlight_selectors_gin_idx
+  ON omnivore.highlight
+  USING GIN (selectors);
+
+-- 8) Add helpful comment
+COMMENT ON COLUMN omnivore.highlight.selectors IS 
+'JSONB containing anchored selectors: {textQuote: {exact, prefix?, suffix?}, domRange?: {...}, textPosition?: {...}}';
+
+COMMENT ON COLUMN omnivore.highlight.content_version IS 
+'Optional hash/version of content this highlight was created against for version tracking';
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0193.undo.add_highlight_selectors.sql b/packages/db/migrations/0193.undo.add_highlight_selectors.sql
new file mode 100644
index 000000000..fd0d04b2d
--- /dev/null
+++ b/packages/db/migrations/0193.undo.add_highlight_selectors.sql
@@ -0,0 +1,35 @@
+-- Type: UNDO
+-- Name: add_highlight_selectors
+-- Description: Rollback addition of robust anchored selectors to highlight table
+
+BEGIN;
+
+-- 1) Drop indexes
+DROP INDEX IF EXISTS omnivore.highlight_selectors_gin_idx;
+
+DROP INDEX IF EXISTS omnivore.highlight_item_created_idx;
+
+DROP INDEX IF EXISTS omnivore.highlight_user_item_idx;
+
+-- 2) Drop constraint
+ALTER TABLE omnivore.highlight
+DROP CONSTRAINT IF EXISTS highlight_selectors_textquote_check;
+
+-- 3) Revert color to text type (preserve data)
+ALTER TABLE omnivore.highlight
+ALTER COLUMN color
+DROP DEFAULT,
+ALTER COLUMN color
+DROP NOT NULL,
+ALTER COLUMN color TYPE TEXT USING color::TEXT;
+
+-- 4) Drop new columns
+ALTER TABLE omnivore.highlight
+DROP COLUMN IF EXISTS content_version,
+DROP COLUMN IF EXISTS selectors;
+
+-- 5) Drop enum type if it was created by this migration
+-- (Only drop if no other tables use it)
+DROP TYPE IF EXISTS omnivore.highlight_color;
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0194.do.sentinel_reading_progress.sql b/packages/db/migrations/0194.do.sentinel_reading_progress.sql
new file mode 100644
index 000000000..e2ecee394
--- /dev/null
+++ b/packages/db/migrations/0194.do.sentinel_reading_progress.sql
@@ -0,0 +1,180 @@
+-- Type: DO
+-- Name: sentinel_reading_progress
+-- Description: Implement sentinel-based reading progress tracking with content versioning
+
+BEGIN;
+
+-- ============================================================
+-- PART 1: Add content_hash to library_item
+-- ============================================================
+
+ALTER TABLE omnivore.library_item
+ADD COLUMN IF NOT EXISTS content_hash VARCHAR(64);
+
+-- Index for fast lookups by user + item + version
+CREATE INDEX IF NOT EXISTS library_item_user_content_hash_idx ON omnivore.library_item (user_id, id, content_hash);
+
+COMMENT ON COLUMN omnivore.library_item.content_hash IS 'SHA-256 hash of sanitized content for version tracking and cache invalidation';
+
+-- ============================================================
+-- PART 2: Create reading_progress table (sentinel-based)
+-- ============================================================
+
+
+CREATE TABLE IF NOT EXISTS omnivore.reading_progress (
+  id                     UUID PRIMARY KEY DEFAULT uuid_generate_v1mc(),
+
+  user_id                UUID NOT NULL
+                         REFERENCES omnivore."user"(id) ON DELETE CASCADE,
+
+  library_item_id        UUID NOT NULL
+                         REFERENCES omnivore.library_item(id) ON DELETE CASCADE,
+
+-- Content version this progress is for
+content_version VARCHAR(64),
+
+-- Sentinel-based progress tracking
+last_seen_sentinel INTEGER NOT NULL DEFAULT 0,
+highest_seen_sentinel INTEGER NOT NULL DEFAULT 0,
+
+-- Timestamps
+created_at             TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at             TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- One progress record per (user, item, content_version)
+-- Use COALESCE to handle NULL versions as empty string for uniqueness
+CREATE UNIQUE INDEX IF NOT EXISTS reading_progress_unique_key ON omnivore.reading_progress (
+    user_id,
+    library_item_id,
+    COALESCE(content_version, '')
+);
+
+-- Hot path: fetch progress for specific user + item + version
+CREATE INDEX IF NOT EXISTS reading_progress_lookup_idx ON omnivore.reading_progress (
+    user_id,
+    library_item_id,
+    content_version
+);
+
+-- Query latest progress regardless of version
+CREATE INDEX IF NOT EXISTS reading_progress_user_item_updated_idx ON omnivore.reading_progress (
+    user_id,
+    library_item_id,
+    updated_at DESC
+);
+
+-- ============================================================
+-- PART 3: Triggers for updated_at
+-- ============================================================
+
+-- Create or reuse the touch_updated_at function
+CREATE OR REPLACE FUNCTION omnivore.touch_updated_at()
+RETURNS TRIGGER LANGUAGE plpgsql AS $$
+BEGIN
+  NEW.updated_at := CURRENT_TIMESTAMP;
+  RETURN NEW;
+END$$;
+
+-- Apply trigger to reading_progress
+DROP TRIGGER IF EXISTS trig_touch_reading_progress_updated_at
+  ON omnivore.reading_progress;
+
+CREATE TRIGGER trig_touch_reading_progress_updated_at
+  BEFORE UPDATE ON omnivore.reading_progress
+  FOR EACH ROW
+  EXECUTE FUNCTION omnivore.touch_updated_at();
+
+-- ============================================================
+-- PART 4: Migrate existing scroll-based progress (optional)
+-- ============================================================
+
+-- For users with existing progress, create a sentinel record
+-- Estimate sentinel position from scroll percentage
+-- Formula: sentinel = FLOOR(highest_anchor * (scroll_percent / 100))
+-- This is approximate but provides continuity for existing users
+
+INSERT INTO omnivore.reading_progress (
+  user_id,
+  library_item_id,
+  content_version,
+  last_seen_sentinel,
+  highest_seen_sentinel,
+  created_at,
+  updated_at
+)
+SELECT
+  li.user_id,
+  li.id,
+  li.content_hash,
+  -- Estimate last seen sentinel from top percent
+  CASE
+    WHEN li.reading_progress_highest_read_anchor > 0
+    THEN FLOOR(li.reading_progress_highest_read_anchor * (li.reading_progress_top_percent / 100.0))::INTEGER
+    ELSE 0
+  END,
+  -- Use existing highest anchor
+  COALESCE(li.reading_progress_highest_read_anchor, 0),
+  li.updated_at,
+  li.updated_at
+FROM omnivore.library_item li
+WHERE
+  -- Only migrate if there's meaningful progress
+  li.reading_progress_top_percent > 0
+  OR li.reading_progress_highest_read_anchor > 0
+ON CONFLICT (user_id, library_item_id, COALESCE(content_version, ''))
+DO NOTHING;
+
+-- ============================================================
+-- PART 5: Drop old scroll-percent columns from library_item
+-- ============================================================
+
+-- Safe to drop now that data is migrated
+ALTER TABLE omnivore.library_item
+  DROP COLUMN IF EXISTS reading_progress_top_percent,
+  DROP COLUMN IF EXISTS reading_progress_bottom_percent,
+  DROP COLUMN IF EXISTS reading_progress_last_read_anchor,
+  DROP COLUMN IF EXISTS reading_progress_highest_read_anchor;
+
+-- ============================================================
+-- PART 6: Row Level Security (RLS)
+-- ============================================================
+
+ALTER TABLE omnivore.reading_progress ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY read_reading_progress ON omnivore.reading_progress
+  FOR SELECT TO omnivore_user
+  USING (user_id = omnivore.get_current_user_id());
+
+CREATE POLICY create_reading_progress ON omnivore.reading_progress
+  FOR INSERT TO omnivore_user
+  WITH CHECK (user_id = omnivore.get_current_user_id());
+
+CREATE POLICY update_reading_progress ON omnivore.reading_progress
+  FOR UPDATE TO omnivore_user
+  USING (user_id = omnivore.get_current_user_id());
+
+CREATE POLICY delete_reading_progress ON omnivore.reading_progress
+  FOR DELETE TO omnivore_user
+  USING (user_id = omnivore.get_current_user_id());
+
+-- Grant permissions
+GRANT SELECT, INSERT, UPDATE, DELETE ON omnivore.reading_progress TO omnivore_user;
+
+-- ============================================================
+-- PART 7: Helpful comments
+-- ============================================================
+
+COMMENT ON TABLE omnivore.reading_progress IS
+  'Sentinel-based reading progress tracking per user per item per content version';
+
+COMMENT ON COLUMN omnivore.reading_progress.last_seen_sentinel IS
+  'Last I/O sentinel the user scrolled past (viewport bottom)';
+
+COMMENT ON COLUMN omnivore.reading_progress.highest_seen_sentinel IS
+  'Highest sentinel ever reached by this user (for "furthest read" tracking)';
+
+COMMENT ON COLUMN omnivore.reading_progress.content_version IS
+  'Content hash/version this progress applies to - enables re-anchoring on content updates';
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0194.undo.sentinel_reading_progress.sql b/packages/db/migrations/0194.undo.sentinel_reading_progress.sql
new file mode 100644
index 000000000..fc08a130d
--- /dev/null
+++ b/packages/db/migrations/0194.undo.sentinel_reading_progress.sql
@@ -0,0 +1,66 @@
+-- Type: UNDO
+-- Name: sentinel_reading_progress
+-- Description: Rollback sentinel-based reading progress and restore scroll percentages
+
+BEGIN;
+
+-- ============================================================
+-- PART 1: Restore old scroll-percent columns to library_item
+-- ============================================================
+
+ALTER TABLE omnivore.library_item
+ADD COLUMN IF NOT EXISTS reading_progress_top_percent NUMERIC,
+ADD COLUMN IF NOT EXISTS reading_progress_bottom_percent NUMERIC,
+ADD COLUMN IF NOT EXISTS reading_progress_last_read_anchor INTEGER,
+ADD COLUMN IF NOT EXISTS reading_progress_highest_read_anchor INTEGER;
+
+-- ============================================================
+-- PART 2: Migrate sentinel progress back to scroll percentages
+-- ============================================================
+
+-- Estimate scroll percentage from sentinel position
+-- Formula: scroll_percent = (highest_seen_sentinel / total_sentinels) * 100
+-- This requires guessing total sentinels - use a reasonable default (e.g., 1000)
+
+UPDATE omnivore.library_item li
+SET
+    reading_progress_top_percent = LEAST(
+        100,
+        rp.last_seen_sentinel * 0.1
+    ),
+    reading_progress_bottom_percent = LEAST(
+        100,
+        rp.last_seen_sentinel * 0.1
+    ),
+    reading_progress_highest_read_anchor = rp.highest_seen_sentinel,
+    reading_progress_last_read_anchor = rp.last_seen_sentinel
+FROM omnivore.reading_progress rp
+WHERE
+    li.id = rp.library_item_id
+    AND li.user_id = rp.user_id
+    -- Only use the most recent progress record if multiple versions exist
+    AND rp.updated_at = (
+        SELECT MAX(updated_at)
+        FROM omnivore.reading_progress rp2
+        WHERE
+            rp2.user_id = rp.user_id
+            AND rp2.library_item_id = rp.library_item_id
+    );
+
+-- ============================================================
+-- PART 3: Drop reading_progress table
+-- ============================================================
+
+DROP TRIGGER IF EXISTS trig_touch_reading_progress_updated_at ON omnivore.reading_progress;
+
+DROP TABLE IF EXISTS omnivore.reading_progress CASCADE;
+
+-- ============================================================
+-- PART 4: Drop content_hash from library_item
+-- ============================================================
+
+DROP INDEX IF EXISTS omnivore.library_item_user_content_hash_idx;
+
+ALTER TABLE omnivore.library_item DROP COLUMN IF EXISTS content_hash;
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0195.do.uppercase_highlight_colors.sql b/packages/db/migrations/0195.do.uppercase_highlight_colors.sql
new file mode 100644
index 000000000..a89f7e837
--- /dev/null
+++ b/packages/db/migrations/0195.do.uppercase_highlight_colors.sql
@@ -0,0 +1,34 @@
+-- Type: DO
+-- Name: uppercase_highlight_colors
+-- Description: Convert highlight_color enum from lowercase to uppercase for consistency with TypeScript/GraphQL
+
+BEGIN;
+
+-- 1) Create new enum type with uppercase values
+CREATE TYPE omnivore.highlight_color_new AS ENUM ('YELLOW', 'RED', 'GREEN', 'BLUE');
+
+-- 2) Drop the default value temporarily (required for type conversion)
+ALTER TABLE omnivore.highlight ALTER COLUMN color DROP DEFAULT;
+
+-- 3) Convert existing data to new enum type with uppercase values
+ALTER TABLE omnivore.highlight
+ALTER COLUMN color TYPE omnivore.highlight_color_new USING CASE
+    WHEN color::text = 'yellow' THEN 'YELLOW'::omnivore.highlight_color_new
+    WHEN color::text = 'red' THEN 'RED'::omnivore.highlight_color_new
+    WHEN color::text = 'green' THEN 'GREEN'::omnivore.highlight_color_new
+    WHEN color::text = 'blue' THEN 'BLUE'::omnivore.highlight_color_new
+    ELSE 'YELLOW'::omnivore.highlight_color_new
+END;
+
+-- 4) Set new default value to uppercase
+ALTER TABLE omnivore.highlight
+ALTER COLUMN color
+SET DEFAULT 'YELLOW'::omnivore.highlight_color_new;
+
+-- 5) Drop old enum type
+DROP TYPE omnivore.highlight_color;
+
+-- 6) Rename new enum type to original name
+ALTER TYPE omnivore.highlight_color_new RENAME TO highlight_color;
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0195.undo.uppercase_highlight_colors.sql b/packages/db/migrations/0195.undo.uppercase_highlight_colors.sql
new file mode 100644
index 000000000..514687d0c
--- /dev/null
+++ b/packages/db/migrations/0195.undo.uppercase_highlight_colors.sql
@@ -0,0 +1,34 @@
+-- Type: UNDO
+-- Name: uppercase_highlight_colors
+-- Description: Revert highlight_color enum from uppercase back to lowercase
+
+BEGIN;
+
+-- 1) Create enum type with lowercase values (original format)
+CREATE TYPE omnivore.highlight_color_old AS ENUM ('yellow', 'red', 'green', 'blue');
+
+-- 2) Drop the default value temporarily (required for type conversion)
+ALTER TABLE omnivore.highlight ALTER COLUMN color DROP DEFAULT;
+
+-- 3) Convert existing data back to lowercase enum values
+ALTER TABLE omnivore.highlight
+ALTER COLUMN color TYPE omnivore.highlight_color_old USING CASE
+    WHEN color::text = 'YELLOW' THEN 'yellow'::omnivore.highlight_color_old
+    WHEN color::text = 'RED' THEN 'red'::omnivore.highlight_color_old
+    WHEN color::text = 'GREEN' THEN 'green'::omnivore.highlight_color_old
+    WHEN color::text = 'BLUE' THEN 'blue'::omnivore.highlight_color_old
+    ELSE 'yellow'::omnivore.highlight_color_old
+END;
+
+-- 4) Set default value back to lowercase
+ALTER TABLE omnivore.highlight
+ALTER COLUMN color
+SET DEFAULT 'yellow'::omnivore.highlight_color_old;
+
+-- 5) Drop uppercase enum type
+DROP TYPE omnivore.highlight_color;
+
+-- 6) Rename old enum type back to original name
+ALTER TYPE omnivore.highlight_color_old RENAME TO highlight_color;
+
+COMMIT;
\ No newline at end of file
diff --git a/packages/db/migrations/0196.do.add_total_sentinels.sql b/packages/db/migrations/0196.do.add_total_sentinels.sql
new file mode 100644
index 000000000..333dad9bb
--- /dev/null
+++ b/packages/db/migrations/0196.do.add_total_sentinels.sql
@@ -0,0 +1,22 @@
+-- Type: DO
+-- Name: add_total_sentinels
+-- Description: Add total_sentinels column to library_item for reading progress percentage calculation
+
+BEGIN;
+
+-- ============================================================
+-- Add total_sentinels to library_item
+-- ============================================================
+
+ALTER TABLE omnivore.library_item
+ADD COLUMN IF NOT EXISTS total_sentinels INTEGER DEFAULT 0;
+
+-- Index for efficient progress queries (joining with reading_progress)
+CREATE INDEX IF NOT EXISTS library_item_total_sentinels_idx
+  ON omnivore.library_item (id, total_sentinels)
+  WHERE total_sentinels > 0;
+
+COMMENT ON COLUMN omnivore.library_item.total_sentinels IS
+  'Total number of sentinel markers in the article content. Used to calculate reading progress percentage: (highest_seen_sentinel / total_sentinels) * 100';
+
+COMMIT;
diff --git a/packages/db/migrations/0196.undo.add_total_sentinels.sql b/packages/db/migrations/0196.undo.add_total_sentinels.sql
new file mode 100644
index 000000000..cd2784924
--- /dev/null
+++ b/packages/db/migrations/0196.undo.add_total_sentinels.sql
@@ -0,0 +1,12 @@
+-- Type: UNDO
+-- Name: add_total_sentinels
+-- Description: Remove total_sentinels column from library_item
+
+BEGIN;
+
+DROP INDEX IF EXISTS omnivore.library_item_total_sentinels_idx;
+
+ALTER TABLE omnivore.library_item
+DROP COLUMN IF EXISTS total_sentinels;
+
+COMMIT;
diff --git a/packages/db/package.json b/packages/db/package.json
index 0af47351b..f544d4e2c 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -10,12 +10,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "chalk": "^4.1.2",
     "dotenv": "^8.2.0",
     "pg": "^8.3.0",
     "postgrator": "^4.1.1",
     "ts-node": "^10.2.1"
   },
   "devDependencies": {
-    "plop": "^2.7.1"
+    "@types/minimatch": "^6.0.0",
+    "@types/node": "^24.9.2",
+    "plop": "^4.0.4"
   }
 }
diff --git a/packages/db/tsconfig.json b/packages/db/tsconfig.json
index b08285106..b54093c0f 100755
--- a/packages/db/tsconfig.json
+++ b/packages/db/tsconfig.json
@@ -1,3 +1,17 @@
 {
-  "extends": "@tsconfig/node14/tsconfig.json"
-}
+  "extends": "@tsconfig/node14/tsconfig.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "../../node_modules/@types",
+      "./node_modules/@types"
+    ],
+    "types": ["node"],
+    "skipLibCheck": true
+  },
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/web-vite/eslint.config.js b/packages/web-vite/eslint.config.js
index b19330b10..669f2e048 100644
--- a/packages/web-vite/eslint.config.js
+++ b/packages/web-vite/eslint.config.js
@@ -3,21 +3,115 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([
-  globalIgnores(['dist']),
+export default [
+  { ignores: ['dist', '**/dist/**', 'node_modules/**'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      // Standard rules from base config
+      'prefer-const': 'warn',
+      quotes: ['warn', 'single'],
+      'array-bracket-spacing': ['warn', 'never'],
+      'array-callback-return': 'error',
+      'arrow-spacing': 'error',
+      'block-scoped-var': 'error',
+      'block-spacing': 'warn',
+      'comma-spacing': ['error', { after: true, before: false }],
+      'comma-style': ['error', 'last'],
+      'computed-property-spacing': 'warn',
+      curly: ['error', 'multi-line'],
+      'no-console': ['warn', { allow: ['warn', 'error', 'info'] }],
+      'dot-notation': 'warn',
+      eqeqeq: 'error',
+      'for-direction': 'error',
+      'func-call-spacing': 'warn',
+      'guard-for-in': 'warn',
+      indent: [
+        'error',
+        2,
+        {
+          SwitchCase: 1,
+          ignoredNodes: ['TemplateLiteral'],
+        },
+      ],
+      'key-spacing': [
+        'warn',
+        {
+          beforeColon: false,
+          afterColon: true,
+        },
+      ],
+      'keyword-spacing': [
+        'warn',
+        {
+          before: true,
+          after: true,
+        },
+      ],
+      'lines-between-class-members': ['warn', 'always'],
+      'max-depth': ['error', 4],
+      'max-len': [
+        'error',
+        {
+          code: 120,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+          ignoreRegExpLiterals: true,
+        },
+      ],
+      'max-nested-callbacks': ['error', 4],
+      'max-params': ['error', 5],
+      'newline-before-return': 'warn',
+      'no-array-constructor': 'error',
+      'no-await-in-loop': 'warn',
+      'no-duplicate-imports': 'error',
+      'no-else-return': 'warn',
+      'no-empty-function': 'off',
+      'no-eq-null': 'error',
+      'no-eval': 'error',
+      'no-lonely-if': 'warn',
+      'no-loop-func': 'warn',
+      'no-mixed-operators': 'error',
+      'no-multi-assign': 'error',
+      'no-multi-spaces': 'warn',
+      'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1 }],
+      'no-shadow': 'off',
+      '@typescript-eslint/no-shadow': 'error',
+      'no-tabs': 'error',
+      'no-trailing-spaces': ['warn', { skipBlankLines: true }],
+      'no-unneeded-ternary': 'error',
+      'no-use-before-define': [
+        'warn',
+        {
+          functions: false,
+        },
+      ],
+      'no-useless-concat': 'error',
+      'no-useless-return': 'error',
+      'object-curly-spacing': ['warn', 'always'],
+      'prefer-template': 'warn',
+      'space-before-blocks': 'error',
+      'space-in-parens': ['error', 'never'],
+      'space-infix-ops': 'error',
+      yoda: 'error',
+      '@typescript-eslint/no-empty-interface': 0,
+      '@typescript-eslint/no-explicit-any': 0,
+    },
   },
-])
+]
diff --git a/packages/web-vite/index.html b/packages/web-vite/index.html
index 0c9df05a8..5fe5913a0 100644
--- a/packages/web-vite/index.html
+++ b/packages/web-vite/index.html
@@ -6,10 +6,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Omnivore - Read-it-later for serious readers</title>
 
-    <!-- Inter font from Google Fonts (instant loading) -->
+    <!-- DNS Prefetch for external resources -->
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+    <link rel="dns-prefetch" href="https://substackcdn.com">
+    <link rel="dns-prefetch" href="https://substack-post-media.s3.amazonaws.com">
+    <link rel="dns-prefetch" href="https://secure.gravatar.com">
+
+    <!-- Preconnect to critical origins -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+    <!-- Preconnect to common CDN origins for faster image loading -->
+    <link rel="preconnect" href="https://substackcdn.com" crossorigin>
+    <link rel="preconnect" href="https://substack-post-media.s3.amazonaws.com" crossorigin>
+
+    <!-- Inter font from Google Fonts with optimized loading -->
+    <!-- Using font-display=swap for faster initial render, loading only essential weights -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Preload critical CSS (Vite will inject this automatically in production) -->
 
     <!-- Google Sign-In loaded dynamically in LoginPage component -->
   </head>
diff --git a/packages/web-vite/package.json b/packages/web-vite/package.json
index 255f85876..fbf39529c 100644
--- a/packages/web-vite/package.json
+++ b/packages/web-vite/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
diff --git a/packages/web-vite/src/App.tsx b/packages/web-vite/src/App.tsx
index 00edca09a..614334996 100644
--- a/packages/web-vite/src/App.tsx
+++ b/packages/web-vite/src/App.tsx
@@ -1,10 +1,12 @@
 // Main App component for Omnivore Vite migration
 // Uses AppRouter for proper React Router navigation
 
-import React from 'react'
-import AppRouter from './router/AppRouter'
 import './App.css'
 
+import React from 'react'
+
+import AppRouter from './router/AppRouter'
+
 const App: React.FC = () => {
   return (
     <div className="app">
diff --git a/packages/web-vite/src/__tests__/basic.test.ts b/packages/web-vite/src/__tests__/basic.test.ts
index d2ed55710..5c2d17a4b 100644
--- a/packages/web-vite/src/__tests__/basic.test.ts
+++ b/packages/web-vite/src/__tests__/basic.test.ts
@@ -1,7 +1,7 @@
 // Simple test to verify Vitest setup
 // Basic functionality test without complex dependencies
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 describe('Basic Setup', () => {
   it('should run tests', () => {
diff --git a/packages/web-vite/src/components/AddLinkModal.tsx b/packages/web-vite/src/components/AddLinkModal.tsx
index 6bc468f68..25acbded6 100644
--- a/packages/web-vite/src/components/AddLinkModal.tsx
+++ b/packages/web-vite/src/components/AddLinkModal.tsx
@@ -1,7 +1,9 @@
-import React, { useState } from 'react'
-import { useSaveUrl } from '../lib/graphql-client'
 import '../styles/AddLinkModal.css'
 
+import React, { useState } from 'react'
+
+import { useSaveUrl } from '../lib/graphql-client'
+
 interface AddLinkModalProps {
   isOpen: boolean
   onClose: () => void
@@ -26,6 +28,7 @@ const AddLinkModal: React.FC<AddLinkModalProps> = ({
       // Basic URL validation
       if (!urlString.trim()) {
         setValidationError('URL is required')
+        
         return false
       }
 
@@ -39,9 +42,11 @@ const AddLinkModal: React.FC<AddLinkModalProps> = ({
       new URL(testUrl)
 
       setValidationError(null)
+      
       return true
     } catch {
       setValidationError('Please enter a valid URL (e.g., https://example.com/article)')
+      
       return false
     }
   }
diff --git a/packages/web-vite/src/components/AuthWrapper.tsx b/packages/web-vite/src/components/AuthWrapper.tsx
index 711b26eb1..97fbd513b 100644
--- a/packages/web-vite/src/components/AuthWrapper.tsx
+++ b/packages/web-vite/src/components/AuthWrapper.tsx
@@ -2,9 +2,10 @@
 // This component is no longer used as AppRouter handles all routing now
 // Keeping for backwards compatibility but should be removed in next cleanup
 import React from 'react'
-import { useAuthStore } from '../stores'
+
 import LibraryPage from '../pages/LibraryPage'
 import LoginPage from '../pages/LoginPage'
+import { useAuthStore } from '../stores'
 import ErrorBoundary from './ErrorBoundary'
 
 const AuthWrapper: React.FC = () => {
diff --git a/packages/web-vite/src/components/CardSkeleton.tsx b/packages/web-vite/src/components/CardSkeleton.tsx
index c3a41c3e1..1543fd210 100644
--- a/packages/web-vite/src/components/CardSkeleton.tsx
+++ b/packages/web-vite/src/components/CardSkeleton.tsx
@@ -11,10 +11,12 @@
  * - Respects density modes
  */
 
-import React from 'react'
-import type { CardDensity } from './LibraryItemCard'
 import '../styles/CardSkeleton.css'
 
+import React from 'react'
+
+import type { CardDensity } from './LibraryItemCard'
+
 interface CardSkeletonProps {
   density?: CardDensity
 }
diff --git a/packages/web-vite/src/components/EditInfoModal.tsx b/packages/web-vite/src/components/EditInfoModal.tsx
index 204c6812a..06ec18580 100644
--- a/packages/web-vite/src/components/EditInfoModal.tsx
+++ b/packages/web-vite/src/components/EditInfoModal.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react'
-import { useUpdateLibraryItem, type UpdateLibraryItemInput } from '../lib/graphql-client'
 import '../styles/EditInfoModal.css'
 
+import { useEffect, useState } from 'react'
+
+import { type UpdateLibraryItemInput, useUpdateLibraryItem } from '../lib/graphql-client'
+
 interface EditInfoModalProps {
   itemId: string
   currentTitle: string
@@ -45,6 +47,7 @@ export function EditInfoModal({
       // If nothing changed, just close
       if (Object.keys(input).length === 0) {
         onClose()
+        
         return
       }
 
diff --git a/packages/web-vite/src/components/ErrorBoundary.tsx b/packages/web-vite/src/components/ErrorBoundary.tsx
index 7c4ab57bc..8779b8f75 100644
--- a/packages/web-vite/src/components/ErrorBoundary.tsx
+++ b/packages/web-vite/src/components/ErrorBoundary.tsx
@@ -1,7 +1,8 @@
 // React Error Boundaries for Omnivore Vite migration
 // Comprehensive error handling with graceful fallbacks
 
-import React, { Component, type ReactNode } from 'react'
+import React, { type ReactNode, Component } from 'react'
+
 import { type ApiError } from '../types/api'
 
 interface ErrorBoundaryState {
diff --git a/packages/web-vite/src/components/FlairBadge.tsx b/packages/web-vite/src/components/FlairBadge.tsx
index 802f0165e..2144946c5 100644
--- a/packages/web-vite/src/components/FlairBadge.tsx
+++ b/packages/web-vite/src/components/FlairBadge.tsx
@@ -12,10 +12,12 @@
  * - Distinguished from user tags (which show text + color)
  */
 
-import React from 'react'
-import type { Label } from '../types/api'
 import '../styles/FlairBadge.css'
 
+import React from 'react'
+
+import type { Label } from '../types/api'
+
 interface FlairBadgeProps {
   label: Label
 }
diff --git a/packages/web-vite/src/components/HighlightSidebar.tsx b/packages/web-vite/src/components/HighlightSidebar.tsx
new file mode 100644
index 000000000..b135fd653
--- /dev/null
+++ b/packages/web-vite/src/components/HighlightSidebar.tsx
@@ -0,0 +1,266 @@
+// Highlight Sidebar Component - Shows all highlights for an article
+// Allows editing, deleting, and navigating to highlights
+
+import '../styles/HighlightSidebar.css'
+
+import React, { useState } from 'react'
+
+import type { Highlight } from '../lib/graphql-client'
+import type { HighlightColor } from '../types/api'
+
+interface HighlightSidebarProps {
+  highlights: Highlight[]
+  onUpdateHighlight: (
+    id: string,
+    annotation: string,
+    color: HighlightColor,
+  ) => Promise<void>
+  onDeleteHighlight: (id: string) => Promise<void>
+  onJumpToHighlight: (id: string) => void
+  onClose: () => void
+}
+
+const HighlightSidebar: React.FC<HighlightSidebarProps> = ({
+  highlights,
+  onUpdateHighlight,
+  onDeleteHighlight,
+  onJumpToHighlight,
+  onClose,
+}) => {
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editAnnotation, setEditAnnotation] = useState('')
+  const [editColor, setEditColor] = useState<HighlightColor>('YELLOW')
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+
+  const sortedHighlights = [...highlights].sort(
+    (a, b) => a.highlightPositionPercent - b.highlightPositionPercent,
+  )
+
+  const colorOptions: Array<{
+    value: HighlightColor
+    label: string
+    bg: string
+  }> = [
+    { value: 'YELLOW', label: 'General', bg: 'rgba(255, 212, 59, 0.5)' },
+    { value: 'RED', label: 'Important', bg: 'rgba(255, 107, 107, 0.5)' },
+    { value: 'GREEN', label: 'Action', bg: 'rgba(85, 239, 196, 0.5)' },
+    { value: 'BLUE', label: 'Reference', bg: 'rgba(116, 185, 255, 0.5)' },
+  ]
+
+  const startEdit = (highlight: Highlight) => {
+    setEditingId(highlight.id)
+    setEditAnnotation(highlight.annotation || '')
+    setEditColor(highlight.color)
+  }
+
+  const cancelEdit = () => {
+    setEditingId(null)
+    setEditAnnotation('')
+  }
+
+  const saveEdit = async (id: string) => {
+    await onUpdateHighlight(id, editAnnotation, editColor)
+    setEditingId(null)
+  }
+
+  const confirmDelete = (id: string) => {
+    setDeletingId(id)
+  }
+
+  const handleDelete = async (id: string) => {
+    await onDeleteHighlight(id)
+    setDeletingId(null)
+  }
+
+  if (highlights.length === 0) {
+    return (
+      <div className="highlight-sidebar">
+        <div className="sidebar-header">
+          <h2 className="sidebar-title">Highlights</h2>
+          <button
+            type="button"
+            className="sidebar-close"
+            onClick={onClose}
+            aria-label="Close sidebar"
+          >
+            ×
+          </button>
+        </div>
+        <div className="sidebar-empty">
+          <p>No highlights yet</p>
+          <p className="empty-hint">Select text to create a highlight</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="highlight-sidebar">
+      <div className="sidebar-header">
+        <h2 className="sidebar-title">
+          Highlights{' '}
+          <span className="highlight-count">({highlights.length})</span>
+        </h2>
+        <button
+          type="button"
+          className="sidebar-close"
+          onClick={onClose}
+          aria-label="Close sidebar"
+        >
+          ×
+        </button>
+      </div>
+
+      <div className="sidebar-content">
+        {sortedHighlights.map((highlight) => (
+          <div
+            key={highlight.id}
+            className={`highlight-item highlight-item-${highlight.color}`}
+          >
+            {/* Color indicator bar */}
+            <div
+              className={`highlight-color-bar highlight-bar-${highlight.color}`}
+            />
+
+            <div className="highlight-body">
+              {/* Quote */}
+              <button
+                type="button"
+                className="highlight-quote"
+                onClick={() => onJumpToHighlight(highlight.id)}
+              >
+                "{highlight.quote}"
+              </button>
+
+              {/* Annotation - editable or display */}
+              {editingId === highlight.id ? (
+                <div className="edit-container">
+                  <textarea
+                    className="edit-annotation"
+                    value={editAnnotation}
+                    onChange={(e) => setEditAnnotation(e.target.value)}
+                    placeholder="Add your thoughts..."
+                    rows={3}
+                    autoFocus
+                  />
+                  <div className="edit-color-picker">
+                    <label className="edit-label">Color:</label>
+                    <div className="color-options">
+                      {colorOptions.map((option) => (
+                        <button
+                          key={option.value}
+                          type="button"
+                          className={`color-option ${
+                            editColor === option.value ? 'active' : ''
+                          }`}
+                          style={{ backgroundColor: option.bg }}
+                          onClick={() => setEditColor(option.value)}
+                          title={option.label}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="edit-actions">
+                    <button
+                      type="button"
+                      className="btn-save"
+                      onClick={() => saveEdit(highlight.id)}
+                    >
+                      Save
+                    </button>
+                    <button
+                      type="button"
+                      className="btn-cancel"
+                      onClick={cancelEdit}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {highlight.annotation && (
+                    <div className="highlight-annotation">
+                      {highlight.annotation}
+                    </div>
+                  )}
+
+                  {/* Actions */}
+                  <div className="highlight-actions">
+                    <button
+                      type="button"
+                      className="action-btn"
+                      onClick={() => startEdit(highlight)}
+                      title="Edit"
+                    >
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        aria-hidden="true"
+                        focusable="false"
+                      >
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                      </svg>
+                    </button>
+                    <button
+                      type="button"
+                      className="action-btn action-btn-danger"
+                      onClick={() => confirmDelete(highlight.id)}
+                      title="Delete"
+                    >
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        aria-hidden="true"
+                        focusable="false"
+                      >
+                        <polyline points="3 6 5 6 21 6" />
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                      </svg>
+                    </button>
+                  </div>
+                </>
+              )}
+
+              {/* Delete confirmation */}
+              {deletingId === highlight.id && (
+                <div className="delete-confirmation">
+                  <p>Delete this highlight?</p>
+                  <div className="delete-actions">
+                    <button
+                      type="button"
+                      className="btn-delete-confirm"
+                      onClick={() => handleDelete(highlight.id)}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type="button"
+                      className="btn-delete-cancel"
+                      onClick={() => setDeletingId(null)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HighlightSidebar
diff --git a/packages/web-vite/src/components/LabelPicker.tsx b/packages/web-vite/src/components/LabelPicker.tsx
index 373eaa3ac..4237ef1b5 100644
--- a/packages/web-vite/src/components/LabelPicker.tsx
+++ b/packages/web-vite/src/components/LabelPicker.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect, useRef } from 'react'
-import { useLabels, useSetLibraryItemLabels, type Label } from '../lib/graphql-client'
 import '../styles/LabelPicker.css'
 
+import { useEffect, useRef, useState } from 'react'
+
+import { type Label, useLabels, useSetLibraryItemLabels } from '../lib/graphql-client'
+
 interface LabelPickerProps {
   itemId: string
   currentLabels: string[]
@@ -50,6 +52,7 @@ export function LabelPicker({ itemId, currentLabels, onUpdate }: LabelPickerProp
       } else {
         newSet.add(labelName)
       }
+      
       return newSet
     })
   }
diff --git a/packages/web-vite/src/components/LabelPickerModal.tsx b/packages/web-vite/src/components/LabelPickerModal.tsx
index 58823655e..cb566aefd 100644
--- a/packages/web-vite/src/components/LabelPickerModal.tsx
+++ b/packages/web-vite/src/components/LabelPickerModal.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react'
-import { useLabels, useSetLibraryItemLabels, useCreateLabel, type Label } from '../lib/graphql-client'
 import '../styles/LabelPickerModal.css'
 
+import { useEffect, useState } from 'react'
+
+import { type Label, useCreateLabel, useLabels, useSetLibraryItemLabels } from '../lib/graphql-client'
+
 interface LabelPickerModalProps {
   itemId: string
   currentLabels: string[]
@@ -50,6 +52,7 @@ export function LabelPickerModal({ itemId, currentLabels, onUpdate, onClose }: L
       } else {
         newSet.add(labelName)
       }
+      
       return newSet
     })
   }
@@ -99,6 +102,7 @@ export function LabelPickerModal({ itemId, currentLabels, onUpdate, onClose }: L
       // Add to selected labels immediately
       setSelectedLabels((prev) => {
         const updated = new Set([...prev, trimmedName])
+        
         return updated
       })
 
diff --git a/packages/web-vite/src/components/LeftNavigation.tsx b/packages/web-vite/src/components/LeftNavigation.tsx
index ee976e49e..dbd35c7e1 100644
--- a/packages/web-vite/src/components/LeftNavigation.tsx
+++ b/packages/web-vite/src/components/LeftNavigation.tsx
@@ -1,10 +1,11 @@
 // Left navigation panel component - matches legacy Omnivore UI
 // Features: Main nav (Home, Library, Highlights, etc.) + Shortcuts section
 
-import React, { useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
 import '../styles/LeftNavigation.css'
 
+import React, { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
 interface NavItem {
   id: string
   label: string
diff --git a/packages/web-vite/src/components/LibraryItemCard.tsx b/packages/web-vite/src/components/LibraryItemCard.tsx
index ffbff5925..93588ca74 100644
--- a/packages/web-vite/src/components/LibraryItemCard.tsx
+++ b/packages/web-vite/src/components/LibraryItemCard.tsx
@@ -1,19 +1,14 @@
 // Enhanced library item card component for grid view
 // Features: thumbnail, reading time, progress bar, site attribution
 
-import React from 'react'
-import type { LibraryItem, Label } from '../types/api'
-import {
-  calculateReadingTime,
-  formatTimestamp,
-  getProgressColor,
-  formatReadingProgress
-} from '../lib/reading-time'
-import LabelPicker from './LabelPicker'
-import FlairBadge from './FlairBadge'
-import CardSkeleton from './CardSkeleton'
 import '../styles/LibraryCard.css'
 
+import React from 'react'
+
+import { calculateReadingTime, formatTimestamp } from '../lib/reading-time'
+import type { Label, LibraryItem } from '../types/api'
+import CardSkeleton from './CardSkeleton'
+
 export type CardDensity = 'compact' | 'comfortable' | 'spacious'
 
 export type CardAction =
@@ -46,19 +41,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
   onAction,
   onToggleSelect,
   isProcessing = false,
-  density = 'comfortable'
+  density = 'comfortable',
 }) => {
   const [showMenu, setShowMenu] = React.useState(false)
   const [showAllLabels, setShowAllLabels] = React.useState(false)
   const menuRef = React.useRef<HTMLDivElement>(null)
   const readingTime = calculateReadingTime(item.wordCount)
   const timestamp = formatTimestamp(item.savedAt)
-  const progressPercent = item.readingProgressTopPercent ?? 0
-  const progressColor = getProgressColor(progressPercent)
-  const progressLabel = formatReadingProgress(
-    item.readingProgressTopPercent,
-    item.readingProgressBottomPercent
-  )
+  const isRead = !!item.readAt
+
+  // Calculate reading progress percentage (0-100) for progress bar
+  const readingProgressPercent = item.readingProgressPercent ?? 0
 
   // Close menu when clicking outside
   React.useEffect(() => {
@@ -69,6 +62,7 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
     }
     if (showMenu) {
       document.addEventListener('mousedown', handleClickOutside)
+      
       return () => document.removeEventListener('mousedown', handleClickOutside)
     }
   }, [showMenu])
@@ -88,16 +82,19 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
     `density-${density}`,
     isSelected ? 'selected' : '',
     item.state === 'ARCHIVED' ? 'is-archived' : '',
-    isProcessing ? 'is-processing' : ''
-  ].filter(Boolean).join(' ')
+    isProcessing ? 'is-processing' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
 
   // Density-specific behavior
   const showThumbnail = density !== 'compact'
   const showAuthor = density === 'spacious'
 
   // Separate system labels (Flair) from user labels (Tags)
-  const flairLabels = item.labels?.filter(label => label.internal === true) || []
-  const userTags = item.labels?.filter(label => !label.internal) || []
+  const flairLabels =
+    item.labels?.filter((label) => label.internal === true) || []
+  const userTags = item.labels?.filter((label) => !label.internal) || []
 
   // Show skeleton loader when processing
   if (item.state === 'PROCESSING') {
@@ -138,6 +135,8 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
               alt={item.title}
               className="thumbnail-image"
               loading="lazy"
+              decoding="async"
+              // fetchPriority="low"
               onError={(e) => {
                 // Fallback to placeholder on image load error
                 e.currentTarget.style.display = 'none'
@@ -170,7 +169,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
               aria-label="Card actions"
               aria-expanded={showMenu}
             >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <circle cx="12" cy="12" r="1"></circle>
                 <circle cx="12" cy="5" r="1"></circle>
                 <circle cx="12" cy="19" r="1"></circle>
@@ -182,12 +190,29 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
 
       {/* Dropdown menu - positioned outside thumbnail to avoid overflow clipping */}
       {showMenu && !isMultiSelectMode && showThumbnail && (
-        <div ref={menuRef} className="card-menu-dropdown" onClick={(e) => e.stopPropagation()}>
+        <div
+          ref={menuRef}
+          className="card-menu-dropdown"
+          onClick={(e) => e.stopPropagation()}
+        >
           <button
             className="card-menu-item"
-            onClick={() => handleMenuAction(item.state === 'ARCHIVED' ? 'unarchive' : 'archive')}
+            onClick={() =>
+              handleMenuAction(
+                item.state === 'ARCHIVED' ? 'unarchive' : 'archive',
+              )
+            }
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <polyline points="21 8 21 21 3 21 3 8"></polyline>
               <rect x="1" y="3" width="22" height="5"></rect>
               <line x1="10" y1="12" x2="14" y2="12"></line>
@@ -199,7 +224,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
             className="card-menu-item"
             onClick={() => handleMenuAction('set-labels')}
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
               <line x1="7" y1="7" x2="7.01" y2="7"></line>
             </svg>
@@ -210,7 +244,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
             className="card-menu-item"
             onClick={() => handleMenuAction('open-notebook')}
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
               <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
             </svg>
@@ -221,7 +264,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
             className="card-menu-item"
             onClick={() => handleMenuAction('open-original')}
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
               <polyline points="15 3 21 3 21 9"></polyline>
               <line x1="10" y1="14" x2="21" y2="3"></line>
@@ -233,7 +285,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
             className="card-menu-item"
             onClick={() => handleMenuAction('edit-info')}
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
               <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
             </svg>
@@ -242,12 +303,23 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
 
           <button
             className="card-menu-item"
-            onClick={() => handleMenuAction(progressPercent > 0 ? 'mark-unread' : 'mark-read')}
+            onClick={() =>
+              handleMenuAction(isRead ? 'mark-unread' : 'mark-read')
+            }
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <polyline points="20 6 9 17 4 12"></polyline>
             </svg>
-            {progressPercent > 0 ? 'Mark Unread' : 'Mark Read'}
+            {isRead ? 'Mark Unread' : 'Mark Read'}
           </button>
 
           <div className="card-menu-divider"></div>
@@ -256,7 +328,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
             className="card-menu-item card-menu-item-danger"
             onClick={() => handleMenuAction('delete')}
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <polyline points="3 6 5 6 21 6"></polyline>
               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
             </svg>
@@ -276,9 +357,7 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
 
         {/* Description */}
         {item.description && (
-          <p className="card-description">
-            {item.description}
-          </p>
+          <p className="card-description">{item.description}</p>
         )}
 
         {/* Metadata bar - Site name, Author, Reading time, Saved date */}
@@ -286,7 +365,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
           {/* Site name/source with globe icon */}
           {item.siteName && (
             <div className="metadata-item">
-              <svg className="metadata-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                className="metadata-icon"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <circle cx="12" cy="12" r="10"></circle>
                 <line x1="2" y1="12" x2="22" y2="12"></line>
                 <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
@@ -298,7 +387,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
           {/* Author name with user icon */}
           {item.author && (
             <div className="metadata-item">
-              <svg className="metadata-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                className="metadata-icon"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                 <circle cx="12" cy="7" r="4"></circle>
               </svg>
@@ -309,7 +408,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
           {/* Reading time with book-open icon */}
           {readingTime && (
             <div className="metadata-item">
-              <svg className="metadata-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                className="metadata-icon"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
               </svg>
@@ -320,7 +429,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
           {/* Saved date with bookmark icon */}
           {timestamp && (
             <div className="metadata-item">
-              <svg className="metadata-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                className="metadata-icon"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
               </svg>
               <span>{timestamp}</span>
@@ -337,7 +456,17 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
                 className="label-badge"
                 title={label.description || label.name}
               >
-                <svg className="label-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg
+                  className="label-icon"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
                   <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                   <line x1="7" y1="7" x2="7.01" y2="7"></line>
                 </svg>
@@ -359,7 +488,11 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
                     setShowAllLabels(!showAllLabels)
                   }
                 }}
-                title={showAllLabels ? 'Show fewer labels' : `Show ${userTags.length - 3} more labels`}
+                title={
+                  showAllLabels
+                    ? 'Show fewer labels'
+                    : `Show ${userTags.length - 3} more labels`
+                }
               >
                 {showAllLabels ? '− Show less' : `+${userTags.length - 3}`}
               </span>
@@ -368,14 +501,16 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
         )}
       </div>
 
-      {/* Progress bar at bottom of card */}
-      {progressPercent > 0 && (
+      {/* Reading progress bar - positioned absolutely at bottom */}
+      {/* Show progress bar for any article with progress (1-100%) */}
+      {/* Color indicates status: blue (0-33%), yellow (34-66%), orange (67-99%), green (100%) */}
+      {readingProgressPercent > 0 && (
         <div className="card-progress-bar">
           <div
             className="progress-bar-fill"
             style={{
-              width: `${progressPercent}%`,
-              backgroundColor: progressColor
+              width: `${readingProgressPercent}%`,
+              backgroundColor: getProgressColor(readingProgressPercent),
             }}
           />
         </div>
@@ -384,4 +519,12 @@ const LibraryItemCard: React.FC<LibraryItemCardProps> = ({
   )
 }
 
+// Helper function to determine progress bar color based on completion percentage
+function getProgressColor(percent: number): string {
+  if (percent < 34) return '#4a9eff' // Blue: 0-33% (started)
+  if (percent < 67) return '#ffd700' // Yellow: 34-66% (in progress)
+  
+  return '#10b981' // Green: 67-100% (almost done)
+}
+
 export default LibraryItemCard
diff --git a/packages/web-vite/src/components/LibraryItemRow.tsx b/packages/web-vite/src/components/LibraryItemRow.tsx
index a68bf0384..d1122cabe 100644
--- a/packages/web-vite/src/components/LibraryItemRow.tsx
+++ b/packages/web-vite/src/components/LibraryItemRow.tsx
@@ -1,15 +1,13 @@
 // Library item row component for list view
 // Horizontal layout matching legacy Omnivore UI
 
-import React, { useState, useRef, useEffect } from 'react'
+import '../styles/LibraryList.css'
+
+import React, { useEffect, useRef, useState } from 'react'
+
+import { calculateReadingTime, formatTimestamp } from '../lib/reading-time'
 import type { LibraryItem } from '../types/api'
 import type { CardAction } from './LibraryItemCard'
-import {
-  calculateReadingTime,
-  formatTimestamp,
-  getProgressColor
-} from '../lib/reading-time'
-import '../styles/LibraryList.css'
 
 interface LibraryItemRowProps {
   item: LibraryItem
@@ -28,15 +26,14 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
   onRead,
   onAction,
   onToggleSelect,
-  isProcessing = false
+  isProcessing = false,
 }) => {
   const [showMenu, setShowMenu] = useState(false)
   const [showAllLabels, setShowAllLabels] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
   const readingTime = calculateReadingTime(item.wordCount)
   const timestamp = formatTimestamp(item.savedAt)
-  const progressPercent = item.readingProgressTopPercent ?? 0
-  const progressColor = getProgressColor(progressPercent)
+  const isRead = !!item.readAt
 
   // Determine thumbnail/icon source
   const thumbnailSrc = item.thumbnail || item.siteIcon
@@ -52,6 +49,7 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
 
     if (showMenu) {
       document.addEventListener('mousedown', handleClickOutside)
+      
       return () => document.removeEventListener('mousedown', handleClickOutside)
     }
   }, [showMenu])
@@ -62,11 +60,12 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
   }
 
   const isArchived = item.folder === 'archive' || item.state === 'ARCHIVED'
-  const isRead = item.readAt !== null && item.readAt !== undefined
 
   return (
     <div
-      className={`library-item-row ${isSelected ? 'selected' : ''} ${showMenu ? 'menu-open' : ''}`}
+      className={`library-item-row ${isSelected ? 'selected' : ''} ${
+        showMenu ? 'menu-open' : ''
+      }`}
     >
       {/* Checkbox */}
       {isMultiSelectMode && onToggleSelect && (
@@ -89,11 +88,14 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
             alt=""
             className={showSiteIcon ? 'site-icon-img' : 'thumbnail-img'}
             loading="lazy"
+            decoding="async"
+            // fetchPriority="low"
             onError={(e) => {
               // Fallback to placeholder on error
               const parent = e.currentTarget.parentElement
               if (parent) {
-                parent.innerHTML = '<div class="thumbnail-placeholder-small">📄</div>'
+                parent.innerHTML =
+                  '<div class="thumbnail-placeholder-small">📄</div>'
               }
             }}
           />
@@ -124,9 +126,7 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
           )}
 
           {/* Timestamp */}
-          <span className="metadata-item timestamp-text">
-            {timestamp}
-          </span>
+          <span className="metadata-item timestamp-text">{timestamp}</span>
 
           {/* Reading time */}
           {readingTime && (
@@ -139,18 +139,12 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
           )}
         </div>
 
-        {/* Progress bar */}
-        {progressPercent > 0 && (
+        {/* Read badge */}
+        {isRead && (
           <div className="row-progress">
-            <div className="progress-bar-container-small">
-              <div
-                className="progress-bar-fill-small"
-                style={{
-                  width: `${progressPercent}%`,
-                  backgroundColor: progressColor
-                }}
-              />
-            </div>
+            <span className="read-badge" title="Read">
+              ✓ Read
+            </span>
           </div>
         )}
       </div>
@@ -159,16 +153,18 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
       <div className="row-labels">
         {item.labels && item.labels.length > 0 && (
           <div className="labels-list">
-            {(showAllLabels ? item.labels : item.labels.slice(0, 2)).map((label) => (
-              <span
-                key={label.id}
-                className="label-badge-small"
-                style={{ backgroundColor: label.color }}
-                title={label.description || label.name}
-              >
-                {label.name}
-              </span>
-            ))}
+            {(showAllLabels ? item.labels : item.labels.slice(0, 2)).map(
+              (label) => (
+                <span
+                  key={label.id}
+                  className="label-badge-small"
+                  style={{ backgroundColor: label.color }}
+                  title={label.description || label.name}
+                >
+                  {label.name}
+                </span>
+              )
+            )}
             {item.labels.length > 2 && (
               <span
                 className="label-badge-small label-more-small"
@@ -196,7 +192,14 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
         disabled={isProcessing}
         aria-label="Open menu"
       >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
           <circle cx="12" cy="12" r="1"></circle>
           <circle cx="12" cy="5" r="1"></circle>
           <circle cx="12" cy="19" r="1"></circle>
@@ -205,17 +208,47 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
 
       {/* Dropdown menu */}
       {showMenu && (
-        <div ref={menuRef} className="row-menu-dropdown" onClick={(e) => e.stopPropagation()}>
-          <button className="card-menu-item" onClick={() => handleMenuAction('set-labels')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <div
+          ref={menuRef}
+          className="row-menu-dropdown"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="card-menu-item"
+            onClick={() => handleMenuAction('set-labels')}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
               <line x1="7" y1="7" x2="7.01" y2="7"></line>
             </svg>
             <span>Set Labels</span>
           </button>
 
-          <button className="card-menu-item" onClick={() => handleMenuAction(isRead ? 'mark-unread' : 'mark-read')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item"
+            onClick={() =>
+              handleMenuAction(isRead ? 'mark-unread' : 'mark-read')
+            }
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               {isRead ? (
                 <>
                   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
@@ -232,8 +265,22 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
             <span>{isRead ? 'Mark as Unread' : 'Mark as Read'}</span>
           </button>
 
-          <button className="card-menu-item" onClick={() => handleMenuAction(isArchived ? 'unarchive' : 'archive')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item"
+            onClick={() =>
+              handleMenuAction(isArchived ? 'unarchive' : 'archive')
+            }
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M21 8v13H3V8"></path>
               <path d="M1 3h22v5H1z"></path>
               <line x1="10" y1="12" x2="14" y2="12"></line>
@@ -241,16 +288,40 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
             <span>{isArchived ? 'Unarchive' : 'Archive'}</span>
           </button>
 
-          <button className="card-menu-item" onClick={() => handleMenuAction('open-notebook')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item"
+            onClick={() => handleMenuAction('open-notebook')}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
               <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
             </svg>
             <span>Open Notebook</span>
           </button>
 
-          <button className="card-menu-item" onClick={() => handleMenuAction('open-original')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item"
+            onClick={() => handleMenuAction('open-original')}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
               <polyline points="15 3 21 3 21 9"></polyline>
               <line x1="10" y1="14" x2="21" y2="3"></line>
@@ -258,8 +329,20 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
             <span>Open Original</span>
           </button>
 
-          <button className="card-menu-item" onClick={() => handleMenuAction('edit-info')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item"
+            onClick={() => handleMenuAction('edit-info')}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
               <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
             </svg>
@@ -268,8 +351,20 @@ const LibraryItemRow: React.FC<LibraryItemRowProps> = ({
 
           <div className="card-menu-divider"></div>
 
-          <button className="card-menu-item card-menu-item-danger" onClick={() => handleMenuAction('delete')}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <button
+            className="card-menu-item card-menu-item-danger"
+            onClick={() => handleMenuAction('delete')}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <polyline points="3 6 5 6 21 6"></polyline>
               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
             </svg>
diff --git a/packages/web-vite/src/components/MultiSelectActionBar.tsx b/packages/web-vite/src/components/MultiSelectActionBar.tsx
index a19961dd6..5d2801e5a 100644
--- a/packages/web-vite/src/components/MultiSelectActionBar.tsx
+++ b/packages/web-vite/src/components/MultiSelectActionBar.tsx
@@ -14,9 +14,10 @@
  * - Escape key to exit multi-select mode
  */
 
-import React, { useEffect } from 'react'
 import '../styles/MultiSelectActionBar.css'
 
+import React, { useEffect } from 'react'
+
 interface MultiSelectActionBarProps {
   selectedCount: number
   onArchive: () => void
@@ -43,6 +44,7 @@ const MultiSelectActionBar: React.FC<MultiSelectActionBarProps> = ({
     }
 
     document.addEventListener('keydown', handleEscape)
+    
     return () => document.removeEventListener('keydown', handleEscape)
   }, [onExitMultiSelect])
 
diff --git a/packages/web-vite/src/components/NotebookModal.tsx b/packages/web-vite/src/components/NotebookModal.tsx
new file mode 100644
index 000000000..633df1f2b
--- /dev/null
+++ b/packages/web-vite/src/components/NotebookModal.tsx
@@ -0,0 +1,220 @@
+// Notebook Modal Component - Markdown-based note taking for articles
+// Allows users to write notes about articles they're reading
+
+import '../styles/NotebookModal.css'
+
+import React, { useEffect, useRef, useState } from 'react'
+
+import { renderMarkdown } from '../lib/markdown'
+
+interface NotebookModalProps {
+  itemTitle: string
+  currentNote?: string | null
+  onSave: (note: string) => Promise<void>
+  onClose: () => void
+}
+
+const NotebookModal: React.FC<NotebookModalProps> = ({
+  itemTitle,
+  currentNote,
+  onSave,
+  onClose,
+}) => {
+  const [note, setNote] = useState(currentNote || '')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [hasChanges, setHasChanges] = useState(false)
+  const [viewMode, setViewMode] = useState<'edit' | 'preview'>('edit')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Track changes
+  useEffect(() => {
+    setHasChanges(note !== (currentNote || ''))
+  }, [note, currentNote])
+
+  // Auto-focus textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus()
+      // Place cursor at end
+      textareaRef.current.selectionStart = note.length
+      textareaRef.current.selectionEnd = note.length
+    }
+  }, [])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + S to save
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        if (hasChanges) {
+          handleSave()
+        }
+      }
+      // Escape to close (with confirmation if there are unsaved changes)
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        handleClose()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [hasChanges, note])
+
+  const handleSave = async () => {
+    if (saving) return
+
+    setSaving(true)
+    setSaved(false)
+
+    try {
+      await onSave(note)
+      setSaved(true)
+      setHasChanges(false)
+
+      // Clear "saved" indicator after 2 seconds
+      setTimeout(() => setSaved(false), 2000)
+    } catch (error) {
+      console.error('Failed to save notebook:', error)
+      alert('Failed to save notebook. Please try again.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (hasChanges) {
+      const confirmed = window.confirm(
+        'You have unsaved changes. Are you sure you want to close without saving?'
+      )
+      if (!confirmed) return
+    }
+    onClose()
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      handleClose()
+    }
+  }
+
+  const wordCount = note.trim().split(/\s+/).filter(Boolean).length
+  const charCount = note.length
+
+  return (
+    <div className="notebook-modal-backdrop" onClick={handleBackdropClick}>
+      <div className="notebook-modal">
+        {/* Header */}
+        <div className="notebook-header">
+          <div className="notebook-title-section">
+            <h2 className="notebook-title">Notebook</h2>
+            <p className="notebook-article-title" title={itemTitle}>
+              {itemTitle}
+            </p>
+          </div>
+          <button
+            type="button"
+            className="notebook-close"
+            onClick={handleClose}
+            aria-label="Close notebook"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="notebook-tabs">
+          <button
+            type="button"
+            className={`notebook-tab ${viewMode === 'edit' ? 'active' : ''}`}
+            onClick={() => setViewMode('edit')}
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            className={`notebook-tab ${viewMode === 'preview' ? 'active' : ''}`}
+            onClick={() => setViewMode('preview')}
+          >
+            Preview
+          </button>
+        </div>
+
+        {/* Editor / Preview */}
+        <div className="notebook-editor">
+          {viewMode === 'edit' ? (
+            <textarea
+              ref={textareaRef}
+              className="notebook-textarea"
+              placeholder="Write your notes here... Markdown supported."
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              spellCheck
+            />
+          ) : (
+            <div
+              className="notebook-preview"
+              dangerouslySetInnerHTML={{ __html: renderMarkdown(note) }}
+            />
+          )}
+        </div>
+
+        {/* Footer with stats and actions */}
+        <div className="notebook-footer">
+          <div className="notebook-stats">
+            <span className="notebook-stat">
+              {wordCount} {wordCount === 1 ? 'word' : 'words'}
+            </span>
+            <span className="notebook-stat-separator">•</span>
+            <span className="notebook-stat">
+              {charCount} {charCount === 1 ? 'character' : 'characters'}
+            </span>
+            {hasChanges && (
+              <>
+                <span className="notebook-stat-separator">•</span>
+                <span className="notebook-unsaved">Unsaved changes</span>
+              </>
+            )}
+            {saved && (
+              <>
+                <span className="notebook-stat-separator">•</span>
+                <span className="notebook-saved">Saved!</span>
+              </>
+            )}
+          </div>
+
+          <div className="notebook-actions">
+            <button
+              type="button"
+              className="notebook-btn notebook-btn-secondary"
+              onClick={handleClose}
+            >
+              {hasChanges ? 'Cancel' : 'Close'}
+            </button>
+            <button
+              type="button"
+              className="notebook-btn notebook-btn-primary"
+              onClick={handleSave}
+              disabled={saving || !hasChanges}
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </div>
+
+        {/* Help text */}
+        <div className="notebook-help">
+          <span className="notebook-help-hint">
+            💡 Tip: Use Markdown formatting. Press <kbd>⌘S</kbd> or{' '}
+            <kbd>Ctrl+S</kbd> to save
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NotebookModal
diff --git a/packages/web-vite/src/lib/__tests__/api-client.test.ts b/packages/web-vite/src/lib/__tests__/api-client.test.ts
index 96a1a2e56..fdbfe9372 100644
--- a/packages/web-vite/src/lib/__tests__/api-client.test.ts
+++ b/packages/web-vite/src/lib/__tests__/api-client.test.ts
@@ -1,9 +1,10 @@
 // Tests for API client
 // Comprehensive testing of API communication
 
-import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest'
-import { OmnivoreApiClient, AUTH_TOKEN_STORAGE_KEY } from '../api-client'
-import { mockUser, mockArticle } from '../../test/utils'
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { mockArticle, mockUser } from '../../test/utils'
+import { AUTH_TOKEN_STORAGE_KEY, OmnivoreApiClient } from '../api-client'
 
 const fetchMock = () => fetch as unknown as Mock
 
diff --git a/packages/web-vite/src/lib/anchoredHighlights.ts b/packages/web-vite/src/lib/anchoredHighlights.ts
new file mode 100644
index 000000000..4f9455d5e
--- /dev/null
+++ b/packages/web-vite/src/lib/anchoredHighlights.ts
@@ -0,0 +1,427 @@
+// AnchoredHighlights - Robust highlighting with multi-selector anchoring
+// Provides DOM Range → TextPosition → TextQuote fallback anchoring,
+// idempotent application, multi-node wrapping, and mutation observers
+
+import { useEffect, useRef } from 'react'
+
+import type {
+  AnchorDomRange,
+  AnchoredSelectors,
+  AnchorTextPosition,
+  AnchorTextQuote,
+  HighlightColor,
+} from '../types/api'
+
+export interface AnchoredHighlight {
+  id: string
+  color: HighlightColor
+  annotation?: string
+  selectors: AnchoredSelectors
+}
+
+export interface ApplyResult {
+  id: string
+  marks: HTMLElement[]
+}
+
+/**********************
+ * Internal utilities *
+ **********************/
+
+// Compact path serialization: indexes through childNodes from root
+function pathTo(node: Node, root: Node): string {
+  const parts: string[] = []
+  let n: Node | null = node
+  while (n && n !== root) {
+    const parent: Node | null = n.parentNode
+    if (!parent) break
+    const i = Array.prototype.indexOf.call(parent.childNodes, n)
+    parts.push(String(i))
+    n = parent
+  }
+
+  return parts.reverse().join('/')
+}
+
+function nodeFromPath(path: string, root: Node): Node | null {
+  if (!path) return null
+
+  return path.split('/').reduce<Node | null>((curr, idx) => {
+    if (!curr) return null
+    const i = Number(idx)
+
+    return curr.childNodes[i] ?? null
+  }, root)
+}
+
+// Text index maps linear offsets ↔ Text nodes for the container subtree
+type TextSlice = { node: Text; start: number; end: number }
+
+function buildIndex(root: HTMLElement) {
+  const slices: TextSlice[] = []
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  let node: Node | null
+  let offset = 0
+  while ((node = walker.nextNode())) {
+    const t = node as Text
+    const len = t.data.length
+    slices.push({ node: t, start: offset, end: offset + len })
+    offset += len
+  }
+
+  return { slices, length: offset }
+}
+
+function positionFromRange(range: Range, root: HTMLElement) {
+  const { slices } = buildIndex(root)
+  const toAbs = (n: Node, off: number) => {
+    if (n.nodeType !== Node.TEXT_NODE) {
+      // If selection boundary is an element, move inward to nearest text
+      const walker = document.createTreeWalker(n, NodeFilter.SHOW_TEXT)
+      const t = walker.nextNode() as Text | null
+      if (!t) throw new Error('No text node at boundary')
+      n = t
+      off = 0
+    }
+    const slice = slices.find((s) => s.node === n)
+    if (!slice) throw new Error('Node not indexed')
+
+    return slice.start + off
+  }
+
+  return {
+    start: toAbs(range.startContainer, range.startOffset),
+    end: toAbs(range.endContainer, range.endOffset),
+  }
+}
+
+function rangeFromPosition(pos: AnchorTextPosition, root: HTMLElement) {
+  const { slices } = buildIndex(root)
+  let startNode: Text | null = null
+  let startOff = 0
+  let endNode: Text | null = null
+  let endOff = 0
+  for (const s of slices) {
+    if (!startNode && pos.start >= s.start && pos.start <= s.end) {
+      startNode = s.node
+      startOff = pos.start - s.start
+    }
+    if (!endNode && pos.end >= s.start && pos.end <= s.end) {
+      endNode = s.node
+      endOff = pos.end - s.start
+    }
+    if (startNode && endNode) break
+  }
+  if (!startNode || !endNode) return null
+  const r = document.createRange()
+  r.setStart(startNode, startOff)
+  r.setEnd(endNode, endOff)
+
+  return r
+}
+
+// Tolerant text search using exact + (optional) prefix/suffix with whitespace normalization
+function findByQuote(root: HTMLElement, q: AnchorTextQuote): Range | null {
+  const norm = (s: string) => s.replace(/\s+/g, ' ').trim()
+  const full = norm(root.textContent || '')
+  const exact = norm(q.exact)
+  if (!exact) return null
+
+  // If prefix/suffix provided, search in that context window to reduce false matches
+  let startIndex = 0
+  let endIndex = full.length
+  if (q.prefix) {
+    const p = norm(q.prefix)
+    const i = full.indexOf(p)
+    if (i >= 0) startIndex = i + p.length
+  }
+  if (q.suffix) {
+    const s = norm(q.suffix)
+    const i = full.indexOf(s)
+    if (i >= 0) endIndex = i
+  }
+
+  const segment = full.slice(startIndex, endIndex)
+  const rel = segment.indexOf(exact)
+  if (rel < 0) return null
+
+  const absStart = startIndex + rel
+  const absEnd = absStart + exact.length
+
+  return rangeFromPosition(
+    {
+      start: mapNormalizedToRawOffset(root, absStart),
+      end: mapNormalizedToRawOffset(root, absEnd),
+    },
+    root,
+  )
+}
+
+// Map normalized (collapsed-space) offset back to raw offset
+function mapNormalizedToRawOffset(root: HTMLElement, target: number): number {
+  // Walk text nodes accumulating a normalized counter and return raw offset index
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  let node: Node | null
+  let normCount = 0
+  while ((node = walker.nextNode())) {
+    const t = node as Text
+    const raw = t.data
+    let i = 0
+    while (i < raw.length) {
+      const ch = raw[i]
+      const isSpace = /\s/.test(ch)
+      if (!isSpace) {
+        if (normCount === target) {
+          return buildIndex(root).slices.find((s) => s.node === t)!.start + i
+        }
+        normCount++
+      } else {
+        // collapse sequences of whitespace to a single space
+        // count one normalized space when encountering the first of a run
+        if (i === 0 || !/\s/.test(raw[i - 1])) {
+          if (normCount === target) {
+            return buildIndex(root).slices.find((s) => s.node === t)!.start + i
+          }
+          normCount++
+        }
+      }
+      i++
+    }
+  }
+  // If target beyond, clamp to end
+  return buildIndex(root).length
+}
+
+function serializeRange(range: Range, root: HTMLElement): AnchorDomRange {
+  const startNode =
+    range.startContainer.nodeType === Node.TEXT_NODE
+      ? range.startContainer
+      : range.startContainer.childNodes[range.startOffset]
+  const endNode =
+    range.endContainer.nodeType === Node.TEXT_NODE
+      ? range.endContainer
+      : range.endContainer.childNodes[range.endOffset]
+
+  const sNode =
+    startNode?.nodeType === Node.TEXT_NODE ? startNode : range.startContainer
+  const eNode =
+    endNode?.nodeType === Node.TEXT_NODE ? endNode : range.endContainer
+
+  return {
+    startPath: pathTo(sNode!, root),
+    startOffset: range.startOffset,
+    endPath: pathTo(eNode!, root),
+    endOffset: range.endOffset,
+  }
+}
+
+function rangeFromDomSelector(
+  sel: AnchorDomRange,
+  root: HTMLElement,
+): Range | null {
+  const sNode = nodeFromPath(sel.startPath, root)
+  const eNode = nodeFromPath(sel.endPath, root)
+  if (!sNode || !eNode) return null
+  if (sNode.nodeType !== Node.TEXT_NODE || eNode.nodeType !== Node.TEXT_NODE) {
+    return null
+  }
+  const r = document.createRange()
+  try {
+    r.setStart(sNode as Text, sel.startOffset)
+    r.setEnd(eNode as Text, sel.endOffset)
+  } catch {
+    return null
+  }
+
+  return r
+}
+
+// Wrap a Range across multiple text nodes, return all created marks
+function wrapRange(root: HTMLElement, range: Range, cls: string, id: string) {
+  const marks: HTMLElement[] = []
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  const texts: Text[] = []
+  let node: Node | null
+  while ((node = walker.nextNode())) texts.push(node as Text)
+
+  const startT = range.startContainer as Text
+  const endT = range.endContainer as Text
+
+  let active = false
+  for (const t of texts) {
+    if (!active && t === startT) active = true
+    if (!active) continue
+
+    const sOff = t === startT ? range.startOffset : 0
+    const eOff = t === endT ? range.endOffset : t.data.length
+    if (eOff > sOff) {
+      // Split the text node to isolate the highlighted portion
+      // If sOff > 0: split to separate text before highlight
+      // If eOff < length: split to separate text after highlight
+      let targetNode = t
+
+      // Split off text before the highlight (if any)
+      if (sOff > 0) {
+        targetNode = t.splitText(sOff) as Text
+      }
+
+      // Split off text after the highlight (if any)
+      if (eOff < t.data.length) {
+        targetNode.splitText(eOff - sOff) as Text
+      }
+
+      // Wrap the target node in a mark element
+      const mark = document.createElement('mark')
+      mark.className = cls
+      mark.dataset.hl = '1'
+      mark.dataset.id = id
+      mark.setAttribute('aria-label', 'Highlight')
+      mark.textContent = targetNode.data
+      targetNode.parentNode!.replaceChild(mark, targetNode)
+      marks.push(mark)
+    }
+    if (t === endT) break
+  }
+
+  return marks
+}
+
+function clearExistingMarks(root: HTMLElement) {
+  root.querySelectorAll('mark[data-hl="1"]').forEach((m) => {
+    const parent = m.parentNode
+    const text = document.createTextNode(m.textContent || '')
+    m.replaceWith(text)
+    // Normalize AFTER replace, using saved parent reference
+    parent?.normalize()
+  })
+}
+
+/**********************
+ * Hook: useAnchors   *
+ **********************/
+
+export function useAnchoredHighlights(
+  contentRef: React.RefObject<HTMLElement>,
+  highlights: AnchoredHighlight[],
+) {
+  const reapply = useRef<() => void>(() => {})
+
+  useEffect(() => {
+    const root = contentRef.current
+    if (!root) return
+
+    const apply = () => {
+      clearExistingMarks(root)
+
+      const applied: ApplyResult[] = []
+
+      for (const h of highlights) {
+        let r: Range | null = null
+        // 1) DOM Range
+        if (h.selectors.domRange) {
+          r = rangeFromDomSelector(h.selectors.domRange, root)
+        }
+        // 2) TextPosition
+        if (!r && h.selectors.textPosition) {
+          r = rangeFromPosition(h.selectors.textPosition, root)
+        }
+        // 3) TextQuote
+        if (!r && h.selectors.textQuote) {
+          r = findByQuote(root, h.selectors.textQuote)
+        }
+
+        if (r) {
+          const cls = `highlight highlight-${h.color.toLowerCase()}`
+          const marks = wrapRange(root, r, cls, h.id)
+          if (marks.length) {
+            applied.push({ id: h.id, marks })
+          }
+        } else {
+          console.warn(
+            `[AnchoredHighlights] Could not find range for highlight ${h.id}`,
+          )
+        }
+      }
+
+      return applied
+    }
+
+    reapply.current = apply
+
+    // Defer initial application to avoid blocking the main thread
+    const applyTimer = setTimeout(() => apply(), 100)
+
+    // TEMPORARILY DISABLED - MutationObserver causing performance issues
+    // Only reapply on explicit highlight changes, not on every DOM mutation
+    // TODO: Re-enable with throttling once performance is stable
+
+    // const mo = new MutationObserver(() => {
+    //   queueMicrotask(() => reapply.current())
+    // })
+    // mo.observe(root, { subtree: true, characterData: true, childList: true })
+
+    // const ro =
+    //   typeof ResizeObserver !== 'undefined'
+    //     ? new ResizeObserver(() => reapply.current())
+    //     : null
+
+    // if (ro) ro.observe(root)
+
+    return () => {
+      clearTimeout(applyTimer)
+      // mo.disconnect()
+      // ro?.disconnect()
+    }
+  }, [contentRef, highlights])
+
+  return {
+    reapply: () => reapply.current?.(),
+    jumpTo: (id: string) => {
+      const el = contentRef.current?.querySelector(`mark[data-id="${id}"]`)
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        el.classList.add('highlight-flash')
+        setTimeout(() => el.classList.remove('highlight-flash'), 900)
+      }
+    },
+  }
+}
+
+/********************************
+ * Selector capture on creation *
+ ********************************/
+
+export function buildSelectorsFromSelection(
+  selection: Selection,
+  contentEl: HTMLElement,
+  textQuoteContextWords = 5,
+): AnchoredSelectors {
+  if (!selection.rangeCount) throw new Error('No selection range')
+  const range = selection.getRangeAt(0)
+
+  // DOM Range
+  const domRange = serializeRange(range, contentEl)
+
+  // TextPosition
+  const pos = positionFromRange(range, contentEl)
+
+  // TextQuote (with ±N words context from linearized content)
+  const full = contentEl.textContent || ''
+  const exact = selection.toString()
+  const { start, end } = pos
+
+  const left = full.slice(0, start).trim()
+  const right = full.slice(end).trim()
+  const wordsL = left.split(/\s+/).slice(-textQuoteContextWords).join(' ')
+  const wordsR = right.split(/\s+/).slice(0, textQuoteContextWords).join(' ')
+
+  return {
+    domRange,
+    textPosition: { start, end },
+    textQuote: {
+      exact,
+      prefix: wordsL || undefined,
+      suffix: wordsR || undefined,
+    },
+  }
+}
diff --git a/packages/web-vite/src/lib/api-client.ts b/packages/web-vite/src/lib/api-client.ts
index 592311b65..2a34a10aa 100644
--- a/packages/web-vite/src/lib/api-client.ts
+++ b/packages/web-vite/src/lib/api-client.ts
@@ -16,6 +16,7 @@ export const AUTH_TOKEN_STORAGE_KEY = 'omnivore-auth-token'
 
 const resolveBaseUrl = (): string => {
   const envUrl = import.meta.env?.VITE_API_URL as string | undefined
+  
   return (envUrl && envUrl.trim().length > 0 ? envUrl : DEFAULT_BASE_URL).replace(
     /\/$/,
     ''
@@ -30,6 +31,7 @@ const getStoredToken = (): string | null => {
     return window.localStorage.getItem(AUTH_TOKEN_STORAGE_KEY)
   } catch (error) {
     console.warn('Unable to read auth token from storage', error)
+    
     return null
   }
 }
@@ -38,6 +40,7 @@ const buildUrl = (baseUrl: string, endpoint: string): string => {
   const normalizedEndpoint = endpoint.startsWith('/')
     ? endpoint
     : `/${endpoint}`
+  
   return `${baseUrl}${normalizedEndpoint}`
 }
 
@@ -117,6 +120,7 @@ class OmnivoreApiClient {
       if (isBrowser) {
         window.localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY)
       }
+      
       return { authStatus: 'NOT_AUTHENTICATED' }
     }
   }
diff --git a/packages/web-vite/src/lib/contentHash.ts b/packages/web-vite/src/lib/contentHash.ts
new file mode 100644
index 000000000..53455bb5d
--- /dev/null
+++ b/packages/web-vite/src/lib/contentHash.ts
@@ -0,0 +1,83 @@
+/**
+ * Content hash utilities for sentinel-based reading progress
+ *
+ * Generates stable SHA-256 hashes of HTML content to track versions
+ * and detect when article content has changed.
+ */
+
+/**
+ * Generate a SHA-256 hash of HTML content for version tracking
+ *
+ * Uses the Web Crypto API for consistent, browser-native hashing.
+ * Normalizes whitespace before hashing to ensure consistency.
+ *
+ * @param html - The HTML content to hash
+ * @returns Promise resolving to hex-encoded SHA-256 hash
+ */
+export async function generateContentHash(html: string): Promise<string> {
+  // Normalize whitespace for consistent hashing
+  const normalized = html
+    .replace(/\s+/g, ' ') // Collapse multiple whitespace to single space
+    .trim()
+
+  // Convert string to Uint8Array for Web Crypto API
+  const encoder = new TextEncoder()
+  const data = encoder.encode(normalized)
+
+  // Generate SHA-256 hash
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+
+  // Convert ArrayBuffer to hex string
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+
+  // Truncate to 64 chars to match database column size
+  return hashHex.substring(0, 64)
+}
+
+/**
+ * Synchronous fallback hash for environments without crypto.subtle
+ * Uses simple string hashing algorithm (djb2)
+ *
+ * @param html - The HTML content to hash
+ * @returns Hex-encoded hash string
+ */
+export function generateContentHashSync(html: string): string {
+  const normalized = html.replace(/\s+/g, ' ').trim()
+
+  let hash = 5381
+  for (let i = 0; i < normalized.length; i++) {
+    hash = (hash * 33) ^ normalized.charCodeAt(i)
+  }
+
+  // Convert to unsigned 32-bit integer, then to hex
+  const hashValue = (hash >>> 0).toString(16).padStart(8, '0')
+
+  // Pad to 64 chars for consistency with SHA-256
+  return hashValue.padEnd(64, '0')
+}
+
+/**
+ * Check if the Web Crypto API is available
+ */
+export function isCryptoAvailable(): boolean {
+  return typeof crypto !== 'undefined' && typeof crypto.subtle !== 'undefined'
+}
+
+/**
+ * Generate content hash with automatic fallback
+ *
+ * Prefers Web Crypto API (SHA-256), falls back to simple hash if unavailable
+ *
+ * @param html - The HTML content to hash
+ * @returns Promise resolving to hex-encoded hash
+ */
+export async function generateContentHashWithFallback(
+  html: string
+): Promise<string> {
+  if (isCryptoAvailable()) {
+    return generateContentHash(html)
+  }
+  
+  return generateContentHashSync(html)
+}
diff --git a/packages/web-vite/src/lib/graphql-client.ts b/packages/web-vite/src/lib/graphql-client.ts
index e847b708d..cfb7ca0bf 100644
--- a/packages/web-vite/src/lib/graphql-client.ts
+++ b/packages/web-vite/src/lib/graphql-client.ts
@@ -1,8 +1,16 @@
 // Minimal GraphQL helper targeting the NestJS `/api/graphql` endpoint
 // Mirrors the behaviour of the legacy web package's fetcher but keeps dependencies light
 
-import { useState, useCallback } from 'react'
-import type { LibraryItem, DeleteResult } from '../types/api'
+import { useCallback, useState } from 'react'
+
+import type { DeleteResult, HighlightColor, LibraryItem } from '../types/api'
+import {
+  HIGHLIGHT_FRAGMENT,
+  LABEL_BASIC_FRAGMENT,
+  LABEL_FRAGMENT,
+  LIBRARY_ITEM_FULL_FRAGMENT,
+  READING_PROGRESS_FRAGMENT,
+} from './graphql-fragments'
 
 const DEFAULT_GRAPHQL_PATH = '/api/graphql'
 const TOKEN_STORAGE_KEY = 'omnivore-auth-token'
@@ -22,7 +30,7 @@ const resolveGraphqlUrl = (): string => {
   if (normalizedBase.endsWith('/api/v2')) {
     return `${normalizedBase.slice(
       0,
-      -'/api/v2'.length
+      -'/api/v2'.length,
     )}${DEFAULT_GRAPHQL_PATH}`
   }
 
@@ -42,7 +50,7 @@ export interface GraphqlResponse<T> {
 
 export async function graphqlRequest<T>(
   query: string,
-  variables?: Record<string, unknown>
+  variables?: Record<string, unknown>,
 ): Promise<T> {
   const endpoint = resolveGraphqlUrl()
   const token = isBrowser
@@ -99,18 +107,6 @@ const DELETE_LIBRARY_ITEM_MUTATION = `
   }
 `
 
-const UPDATE_READING_PROGRESS_MUTATION = `
-  mutation UpdateReadingProgress($id: String!, $progress: ReadingProgressInput!) {
-    updateReadingProgress(id: $id, progress: $progress) {
-      id
-      readingProgressTopPercent
-      readingProgressBottomPercent
-      readAt
-      updatedAt
-    }
-  }
-`
-
 const MOVE_LIBRARY_ITEM_TO_FOLDER_MUTATION = `
   mutation MoveLibraryItemToFolder($id: String!, $folder: String!) {
     moveLibraryItemToFolder(id: $id, folder: $folder) {
@@ -171,22 +167,11 @@ const BULK_MARK_AS_READ_MUTATION = `
 `
 
 const SAVE_URL_MUTATION = `
+  ${LIBRARY_ITEM_FULL_FRAGMENT}
+  ${LABEL_BASIC_FRAGMENT}
   mutation SaveUrl($input: SaveUrlInput!) {
     saveUrl(input: $input) {
-      id
-      title
-      slug
-      originalUrl
-      author
-      description
-      savedAt
-      createdAt
-      updatedAt
-      publishedAt
-      readAt
-      state
-      contentReader
-      folder
+      ...LibraryItemFullFields
     }
   }
 `
@@ -214,6 +199,7 @@ export function useArchiveItem() {
         archived,
       })
       setState({ loading: false, error: null, data })
+      
       return data
     } catch (error) {
       const err = error instanceof Error ? error : new Error('Archive failed')
@@ -237,6 +223,7 @@ export function useDeleteItem() {
     try {
       const data = await graphqlRequest(DELETE_LIBRARY_ITEM_MUTATION, { id })
       setState({ loading: false, error: null, data })
+      
       return data
     } catch (error) {
       const err = error instanceof Error ? error : new Error('Delete failed')
@@ -248,44 +235,6 @@ export function useDeleteItem() {
   return { ...state, deleteItem }
 }
 
-export function useUpdateReadingProgress() {
-  const [state, setState] = useState<MutationState<any>>({
-    loading: false,
-    error: null,
-    data: null,
-  })
-
-  const updateProgress = useCallback(
-    async (
-      id: string,
-      progress: {
-        readingProgressTopPercent: number
-        readingProgressBottomPercent: number
-        readingProgressAnchorIndex?: number
-        readingProgressHighestAnchor?: number
-      }
-    ) => {
-      setState({ loading: true, error: null, data: null })
-      try {
-        const data = await graphqlRequest(UPDATE_READING_PROGRESS_MUTATION, {
-          id,
-          progress,
-        })
-        setState({ loading: false, error: null, data })
-        return data
-      } catch (error) {
-        const err =
-          error instanceof Error ? error : new Error('Update progress failed')
-        setState({ loading: false, error: err, data: null })
-        throw err
-      }
-    },
-    []
-  )
-
-  return { ...state, updateProgress }
-}
-
 export function useMoveToFolder() {
   const [state, setState] = useState<MutationState<any>>({
     loading: false,
@@ -301,6 +250,7 @@ export function useMoveToFolder() {
         folder,
       })
       setState({ loading: false, error: null, data })
+      
       return data
     } catch (error) {
       const err =
@@ -338,6 +288,7 @@ export function useBulkArchive() {
           bulkArchiveItems: BulkActionResult
         }>(BULK_ARCHIVE_ITEMS_MUTATION, { itemIds, archived })
         setState({ loading: false, error: null, data: result.bulkArchiveItems })
+        
         return result.bulkArchiveItems
       } catch (error) {
         const err =
@@ -346,7 +297,7 @@ export function useBulkArchive() {
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, bulkArchive }
@@ -362,14 +313,15 @@ export function useBulkDelete() {
   const bulkDelete = useCallback(async (itemIds: string[]) => {
     setState({ loading: true, error: null, data: null })
     try {
-      const result = await graphqlRequest<{ bulkDeleteItems: BulkActionResult }>(
-        BULK_DELETE_ITEMS_MUTATION,
-        { itemIds }
-      )
+      const result = await graphqlRequest<{
+        bulkDeleteItems: BulkActionResult
+      }>(BULK_DELETE_ITEMS_MUTATION, { itemIds })
       setState({ loading: false, error: null, data: result.bulkDeleteItems })
+      
       return result.bulkDeleteItems
     } catch (error) {
-      const err = error instanceof Error ? error : new Error('Bulk delete failed')
+      const err =
+        error instanceof Error ? error : new Error('Bulk delete failed')
       setState({ loading: false, error: err, data: null })
       throw err
     }
@@ -393,15 +345,18 @@ export function useBulkMoveToFolder() {
           bulkMoveToFolder: BulkActionResult
         }>(BULK_MOVE_TO_FOLDER_MUTATION, { itemIds, folder })
         setState({ loading: false, error: null, data: result.bulkMoveToFolder })
+        
         return result.bulkMoveToFolder
       } catch (error) {
         const err =
-          error instanceof Error ? error : new Error('Bulk move to folder failed')
+          error instanceof Error
+            ? error
+            : new Error('Bulk move to folder failed')
         setState({ loading: false, error: err, data: null })
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, bulkMoveToFolder }
@@ -421,6 +376,7 @@ export function useBulkMarkAsRead() {
         bulkMarkAsRead: BulkActionResult
       }>(BULK_MARK_AS_READ_MUTATION, { itemIds })
       setState({ loading: false, error: null, data: result.bulkMarkAsRead })
+      
       return result.bulkMarkAsRead
     } catch (error) {
       const err =
@@ -446,17 +402,19 @@ export function useSaveUrl() {
       try {
         const result = await graphqlRequest<{ saveUrl: any }>(
           SAVE_URL_MUTATION,
-          { input }
+          { input },
         )
         setState({ loading: false, error: null, data: result.saveUrl })
+        
         return result.saveUrl
       } catch (error) {
-        const err = error instanceof Error ? error : new Error('Save URL failed')
+        const err =
+          error instanceof Error ? error : new Error('Save URL failed')
         setState({ loading: false, error: err, data: null })
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, saveUrl }
@@ -490,30 +448,26 @@ export interface UpdateLabelInput {
 // ==================== LIBRARY ITEM QUERIES ====================
 
 const GET_LIBRARY_ITEM_QUERY = `
+  ${LIBRARY_ITEM_FULL_FRAGMENT}
+  ${LABEL_BASIC_FRAGMENT}
   query GetLibraryItem($id: String!) {
     libraryItem(id: $id) {
-      id
-      title
-      slug
-      originalUrl
-      author
-      description
-      content
-      savedAt
-      createdAt
-      publishedAt
-      readAt
-      updatedAt
-      readingProgressTopPercent
-      readingProgressBottomPercent
-      state
-      contentReader
-      folder
-      labels {
-        id
-        name
-        color
-      }
+      ...LibraryItemFullFields
+    }
+  }
+`
+
+// Batched query for reader page - fetches item + highlights in one request
+const GET_READER_PAGE_DATA_QUERY = `
+  ${LIBRARY_ITEM_FULL_FRAGMENT}
+  ${LABEL_FRAGMENT}
+  ${HIGHLIGHT_FRAGMENT}
+  query GetReaderPageData($id: String!) {
+    libraryItem(id: $id) {
+      ...LibraryItemFullFields
+    }
+    highlights(libraryItemId: $id) {
+      ...HighlightFields
     }
   }
 `
@@ -521,31 +475,19 @@ const GET_LIBRARY_ITEM_QUERY = `
 // ==================== LABEL QUERIES ====================
 
 const GET_LABELS_QUERY = `
+  ${LABEL_FRAGMENT}
   query GetLabels {
     labels {
-      id
-      name
-      color
-      description
-      position
-      internal
-      createdAt
-      updatedAt
+      ...LabelFields
     }
   }
 `
 
 const GET_LABEL_QUERY = `
+  ${LABEL_FRAGMENT}
   query GetLabel($id: String!) {
     label(id: $id) {
-      id
-      name
-      color
-      description
-      position
-      internal
-      createdAt
-      updatedAt
+      ...LabelFields
     }
   }
 `
@@ -553,30 +495,19 @@ const GET_LABEL_QUERY = `
 // ==================== LABEL MUTATIONS ====================
 
 const CREATE_LABEL_MUTATION = `
+  ${LABEL_FRAGMENT}
   mutation CreateLabel($input: CreateLabelInput!) {
     createLabel(input: $input) {
-      id
-      name
-      color
-      description
-      position
-      internal
-      createdAt
-      updatedAt
+      ...LabelFields
     }
   }
 `
 
 const UPDATE_LABEL_MUTATION = `
+  ${LABEL_FRAGMENT}
   mutation UpdateLabel($id: String!, $input: UpdateLabelInput!) {
     updateLabel(id: $id, input: $input) {
-      id
-      name
-      color
-      description
-      position
-      internal
-      updatedAt
+      ...LabelFields
     }
   }
 `
@@ -592,11 +523,10 @@ const DELETE_LABEL_MUTATION = `
 `
 
 const SET_LIBRARY_ITEM_LABELS_MUTATION = `
+  ${LABEL_BASIC_FRAGMENT}
   mutation SetLibraryItemLabels($itemId: String!, $labelIds: [String!]!) {
     setLibraryItemLabels(itemId: $itemId, labelIds: $labelIds) {
-      id
-      name
-      color
+      ...LabelBasicFields
     }
   }
 `
@@ -608,6 +538,7 @@ const UPDATE_LIBRARY_ITEM_MUTATION = `
       title
       author
       description
+      readAt
       updatedAt
     }
   }
@@ -631,9 +562,11 @@ export function useLabels() {
     try {
       const result = await graphqlRequest<{ labels: Label[] }>(GET_LABELS_QUERY)
       setState({ loading: false, error: null, data: result.labels })
+      
       return result.labels
     } catch (error) {
-      const err = error instanceof Error ? error : new Error('Failed to fetch labels')
+      const err =
+        error instanceof Error ? error : new Error('Failed to fetch labels')
       setState({ loading: false, error: err, data: null })
       throw err
     }
@@ -654,12 +587,14 @@ export function useCreateLabel() {
     try {
       const result = await graphqlRequest<{ createLabel: Label }>(
         CREATE_LABEL_MUTATION,
-        { input }
+        { input },
       )
       setState({ loading: false, error: null, data: result.createLabel })
+      
       return result.createLabel
     } catch (error) {
-      const err = error instanceof Error ? error : new Error('Failed to create label')
+      const err =
+        error instanceof Error ? error : new Error('Failed to create label')
       setState({ loading: false, error: err, data: null })
       throw err
     }
@@ -681,17 +616,19 @@ export function useUpdateLabel() {
       try {
         const result = await graphqlRequest<{ updateLabel: Label }>(
           UPDATE_LABEL_MUTATION,
-          { id, input }
+          { id, input },
         )
         setState({ loading: false, error: null, data: result.updateLabel })
+        
         return result.updateLabel
       } catch (error) {
-        const err = error instanceof Error ? error : new Error('Failed to update label')
+        const err =
+          error instanceof Error ? error : new Error('Failed to update label')
         setState({ loading: false, error: err, data: null })
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, updateLabel }
@@ -709,12 +646,14 @@ export function useDeleteLabel() {
     try {
       const result = await graphqlRequest<{ deleteLabel: DeleteResult }>(
         DELETE_LABEL_MUTATION,
-        { id }
+        { id },
       )
       setState({ loading: false, error: null, data: result.deleteLabel })
+      
       return result.deleteLabel
     } catch (error) {
-      const err = error instanceof Error ? error : new Error('Failed to delete label')
+      const err =
+        error instanceof Error ? error : new Error('Failed to delete label')
       setState({ loading: false, error: err, data: null })
       throw err
     }
@@ -742,15 +681,18 @@ export function useSetLibraryItemLabels() {
           error: null,
           data: result.setLibraryItemLabels,
         })
+        
         return result.setLibraryItemLabels
       } catch (error) {
         const err =
-          error instanceof Error ? error : new Error('Failed to set item labels')
+          error instanceof Error
+            ? error
+            : new Error('Failed to set item labels')
         setState({ loading: false, error: err, data: null })
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, setLibraryItemLabels }
@@ -776,12 +718,16 @@ export function useLibraryItem(id: string) {
     try {
       const result = await graphqlRequest<{ libraryItem: LibraryItem | null }>(
         GET_LIBRARY_ITEM_QUERY,
-        { id }
+        { id },
       )
       setState({ loading: false, error: null, data: result.libraryItem })
+      
       return result.libraryItem
     } catch (error) {
-      const err = error instanceof Error ? error : new Error('Failed to fetch library item')
+      const err =
+        error instanceof Error
+          ? error
+          : new Error('Failed to fetch library item')
       setState({ loading: false, error: err, data: null })
       throw err
     }
@@ -790,10 +736,56 @@ export function useLibraryItem(id: string) {
   return { ...state, fetchLibraryItem }
 }
 
+// Batched hook for reader page - fetches item + highlights in one request
+export function useReaderPageData(id: string) {
+  const [state, setState] = useState<{
+    loading: boolean
+    error: Error | null
+    item: LibraryItem | null
+    highlights: Highlight[] | null
+  }>({
+    loading: false,
+    error: null,
+    item: null,
+    highlights: null,
+  })
+
+  const fetchReaderPageData = useCallback(async () => {
+    if (!id) return
+
+    setState({ loading: true, error: null, item: null, highlights: null })
+    try {
+      const result = await graphqlRequest<{
+        libraryItem: LibraryItem | null
+        highlights: Highlight[]
+      }>(GET_READER_PAGE_DATA_QUERY, { id })
+
+      setState({
+        loading: false,
+        error: null,
+        item: result.libraryItem,
+        highlights: result.highlights || [],
+      })
+      
+      return { item: result.libraryItem, highlights: result.highlights }
+    } catch (error) {
+      const err =
+        error instanceof Error
+          ? error
+          : new Error('Failed to fetch reader page data')
+      setState({ loading: false, error: err, item: null, highlights: null })
+      throw err
+    }
+  }, [id])
+
+  return { ...state, fetchReaderPageData }
+}
+
 export interface UpdateLibraryItemInput {
   title?: string
   author?: string
   description?: string
+  readAt?: string | null
 }
 
 export function useUpdateLibraryItem() {
@@ -809,19 +801,408 @@ export function useUpdateLibraryItem() {
       try {
         const result = await graphqlRequest<{ updateLibraryItem: any }>(
           UPDATE_LIBRARY_ITEM_MUTATION,
-          { id, input }
+          { id, input },
         )
-        setState({ loading: false, error: null, data: result.updateLibraryItem })
+        setState({
+          loading: false,
+          error: null,
+          data: result.updateLibraryItem,
+        })
+        
         return result.updateLibraryItem
       } catch (error) {
         const err =
-          error instanceof Error ? error : new Error('Failed to update library item')
+          error instanceof Error
+            ? error
+            : new Error('Failed to update library item')
         setState({ loading: false, error: err, data: null })
         throw err
       }
     },
-    []
+    [],
   )
 
   return { ...state, updateLibraryItem }
 }
+
+// ==================== HIGHLIGHT TYPES ====================
+
+export interface Highlight {
+  id: string
+  shortId: string
+  libraryItemId: string
+  quote: string | null
+  prefix: string | null
+  suffix: string | null
+  patch: string | null
+  annotation: string | null
+  createdAt: string
+  updatedAt: string
+  sharedAt: string | null
+  highlightPositionPercent: number
+  highlightPositionAnchorIndex: number
+  highlightType: 'HIGHLIGHT' | 'REDACTION' | 'NOTE'
+  html: string | null
+  color: HighlightColor
+  representation: 'CONTENT' | 'FEED_CONTENT'
+  selectors: Record<string, any> | null // AnchoredSelectors object (GraphQLJSON scalar)
+  contentVersion?: string | null
+}
+
+export interface CreateHighlightInput {
+  libraryItemId: string
+  quote: string
+  annotation?: string
+  color?: HighlightColor
+  prefix?: string
+  suffix?: string
+  highlightPositionPercent: number
+  highlightPositionAnchorIndex?: number
+  selectors?: Record<string, any> // AnchoredSelectors object (GraphQLJSON scalar)
+  contentVersion?: string
+}
+
+export interface UpdateHighlightInput {
+  annotation?: string
+  color?: HighlightColor
+}
+
+// ==================== HIGHLIGHT QUERIES ====================
+
+const GET_HIGHLIGHTS_QUERY = `
+  ${HIGHLIGHT_FRAGMENT}
+  query GetHighlights($libraryItemId: String!) {
+    highlights(libraryItemId: $libraryItemId) {
+      ...HighlightFields
+    }
+  }
+`
+
+const GET_HIGHLIGHT_QUERY = `
+  ${HIGHLIGHT_FRAGMENT}
+  query GetHighlight($id: String!) {
+    highlight(id: $id) {
+      ...HighlightFields
+    }
+  }
+`
+
+// ==================== HIGHLIGHT MUTATIONS ====================
+
+const CREATE_HIGHLIGHT_MUTATION = `
+  ${HIGHLIGHT_FRAGMENT}
+  mutation CreateHighlight($input: CreateHighlightInput!) {
+    createHighlight(input: $input) {
+      ...HighlightFields
+    }
+  }
+`
+
+const UPDATE_HIGHLIGHT_MUTATION = `
+  ${HIGHLIGHT_FRAGMENT}
+  mutation UpdateHighlight($id: String!, $input: UpdateHighlightInput!) {
+    updateHighlight(id: $id, input: $input) {
+      ...HighlightFields
+    }
+  }
+`
+
+const DELETE_HIGHLIGHT_MUTATION = `
+  mutation DeleteHighlight($id: String!) {
+    deleteHighlight(id: $id) {
+      success
+      message
+      itemId
+    }
+  }
+`
+
+// ==================== HIGHLIGHT HOOKS ====================
+
+export function useHighlights(libraryItemId: string) {
+  const [state, setState] = useState<{
+    loading: boolean
+    error: Error | null
+    data: Highlight[] | null
+  }>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const fetchHighlights = useCallback(async () => {
+    if (!libraryItemId) return
+
+    setState({ loading: true, error: null, data: null })
+    try {
+      const result = await graphqlRequest<{ highlights: Highlight[] }>(
+        GET_HIGHLIGHTS_QUERY,
+        { libraryItemId },
+      )
+      setState({ loading: false, error: null, data: result.highlights })
+      
+      return result.highlights
+    } catch (error) {
+      const err =
+        error instanceof Error ? error : new Error('Failed to fetch highlights')
+      setState({ loading: false, error: err, data: null })
+      throw err
+    }
+  }, [libraryItemId])
+
+  return { ...state, fetchHighlights, refetch: fetchHighlights }
+}
+
+export function useCreateHighlight() {
+  const [state, setState] = useState<MutationState<Highlight>>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const createHighlight = useCallback(async (input: CreateHighlightInput) => {
+    setState({ loading: true, error: null, data: null })
+    try {
+      const result = await graphqlRequest<{ createHighlight: Highlight }>(
+        CREATE_HIGHLIGHT_MUTATION,
+        { input },
+      )
+      setState({ loading: false, error: null, data: result.createHighlight })
+      
+      return result.createHighlight
+    } catch (error) {
+      const err =
+        error instanceof Error ? error : new Error('Failed to create highlight')
+      setState({ loading: false, error: err, data: null })
+      throw err
+    }
+  }, [])
+
+  return { ...state, createHighlight }
+}
+
+export function useUpdateHighlight() {
+  const [state, setState] = useState<MutationState<Highlight>>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const updateHighlight = useCallback(
+    async (id: string, input: UpdateHighlightInput) => {
+      setState({ loading: true, error: null, data: null })
+      try {
+        const result = await graphqlRequest<{ updateHighlight: Highlight }>(
+          UPDATE_HIGHLIGHT_MUTATION,
+          { id, input },
+        )
+        setState({ loading: false, error: null, data: result.updateHighlight })
+        
+        return result.updateHighlight
+      } catch (error) {
+        const err =
+          error instanceof Error
+            ? error
+            : new Error('Failed to update highlight')
+        setState({ loading: false, error: err, data: null })
+        throw err
+      }
+    },
+    [],
+  )
+
+  return { ...state, updateHighlight }
+}
+
+export function useDeleteHighlight() {
+  const [state, setState] = useState<MutationState<DeleteResult>>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const deleteHighlight = useCallback(async (id: string) => {
+    setState({ loading: true, error: null, data: null })
+    try {
+      const result = await graphqlRequest<{ deleteHighlight: DeleteResult }>(
+        DELETE_HIGHLIGHT_MUTATION,
+        { id },
+      )
+      setState({ loading: false, error: null, data: result.deleteHighlight })
+      
+      return result.deleteHighlight
+    } catch (error) {
+      const err =
+        error instanceof Error ? error : new Error('Failed to delete highlight')
+      setState({ loading: false, error: err, data: null })
+      throw err
+    }
+  }, [])
+
+  return { ...state, deleteHighlight }
+}
+
+// ==================== NOTEBOOK MUTATIONS ====================
+
+const UPDATE_NOTEBOOK_MUTATION = `
+  mutation UpdateNotebook($id: String!, $input: UpdateNotebookInput!) {
+    updateNotebook(id: $id, input: $input) {
+      id
+      note
+      noteUpdatedAt
+      updatedAt
+    }
+  }
+`
+
+// ==================== NOTEBOOK HOOKS ====================
+
+export interface UpdateNotebookInput {
+  note: string
+}
+
+export function useUpdateNotebook() {
+  const [state, setState] = useState<MutationState<LibraryItem>>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const updateNotebook = useCallback(async (itemId: string, note: string) => {
+    setState({ loading: true, error: null, data: null })
+    try {
+      const result = await graphqlRequest<{ updateNotebook: LibraryItem }>(
+        UPDATE_NOTEBOOK_MUTATION,
+        { id: itemId, input: { note } },
+      )
+      setState({ loading: false, error: null, data: result.updateNotebook })
+      
+      return result.updateNotebook
+    } catch (error) {
+      const err =
+        error instanceof Error ? error : new Error('Failed to update notebook')
+      setState({ loading: false, error: err, data: null })
+      throw err
+    }
+  }, [])
+
+  return { ...state, updateNotebook }
+}
+
+// ==================== READING PROGRESS TYPES ====================
+
+export interface ReadingProgress {
+  id: string
+  libraryItemId: string
+  contentVersion: string | null
+  lastSeenSentinel: number
+  highestSeenSentinel: number
+  createdAt: string
+  updatedAt: string
+}
+
+export interface UpdateReadingProgressInput {
+  libraryItemId: string
+  contentVersion?: string
+  lastSeenSentinel: number
+  highestSeenSentinel: number
+  totalSentinels?: number
+}
+
+// ==================== READING PROGRESS QUERIES ====================
+
+const GET_READING_PROGRESS_QUERY = `
+  ${READING_PROGRESS_FRAGMENT}
+  query GetReadingProgress($libraryItemId: String!, $contentVersion: String) {
+    readingProgress(libraryItemId: $libraryItemId, contentVersion: $contentVersion) {
+      ...ReadingProgressFields
+    }
+  }
+`
+
+// ==================== READING PROGRESS MUTATIONS ====================
+
+const UPDATE_READING_PROGRESS_MUTATION = `
+  ${READING_PROGRESS_FRAGMENT}
+  mutation UpdateReadingProgress($input: UpdateReadingProgressInput!) {
+    updateReadingProgress(input: $input) {
+      ...ReadingProgressFields
+    }
+  }
+`
+
+// ==================== READING PROGRESS HOOKS ====================
+
+export function useReadingProgress(
+  libraryItemId: string,
+  contentVersion?: string,
+) {
+  const [state, setState] = useState<{
+    loading: boolean
+    error: Error | null
+    data: ReadingProgress | null
+  }>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const fetchProgress = useCallback(async () => {
+    if (!libraryItemId) return
+
+    setState({ loading: true, error: null, data: null })
+    try {
+      const result = await graphqlRequest<{
+        readingProgress: ReadingProgress | null
+      }>(GET_READING_PROGRESS_QUERY, { libraryItemId, contentVersion })
+      setState({ loading: false, error: null, data: result.readingProgress })
+      
+      return result.readingProgress
+    } catch (error) {
+      const err =
+        error instanceof Error
+          ? error
+          : new Error('Failed to fetch reading progress')
+      setState({ loading: false, error: err, data: null })
+      throw err
+    }
+  }, [libraryItemId, contentVersion])
+
+  return { ...state, fetchProgress, refetch: fetchProgress }
+}
+
+export function useUpdateReadingProgress() {
+  const [state, setState] = useState<MutationState<ReadingProgress>>({
+    loading: false,
+    error: null,
+    data: null,
+  })
+
+  const updateProgress = useCallback(
+    async (input: UpdateReadingProgressInput) => {
+      setState({ loading: true, error: null, data: null })
+      try {
+        const result = await graphqlRequest<{
+          updateReadingProgress: ReadingProgress
+        }>(UPDATE_READING_PROGRESS_MUTATION, { input })
+        setState({
+          loading: false,
+          error: null,
+          data: result.updateReadingProgress,
+        })
+        
+        return result.updateReadingProgress
+      } catch (error) {
+        const err =
+          error instanceof Error
+            ? error
+            : new Error('Failed to update reading progress')
+        setState({ loading: false, error: err, data: null })
+        throw err
+      }
+    },
+    [],
+  )
+
+  return { ...state, updateProgress }
+}
diff --git a/packages/web-vite/src/lib/graphql-fragments.ts b/packages/web-vite/src/lib/graphql-fragments.ts
new file mode 100644
index 000000000..05554b703
--- /dev/null
+++ b/packages/web-vite/src/lib/graphql-fragments.ts
@@ -0,0 +1,121 @@
+/**
+ * GraphQL Fragments
+ * Reusable field selections to reduce duplication and improve maintainability
+ */
+
+export const LABEL_FRAGMENT = `
+  fragment LabelFields on Label {
+    id
+    name
+    color
+    description
+    position
+    internal
+    createdAt
+    updatedAt
+  }
+`
+
+export const LABEL_BASIC_FRAGMENT = `
+  fragment LabelBasicFields on Label {
+    id
+    name
+    color
+    description
+    internal
+  }
+`
+
+export const HIGHLIGHT_FRAGMENT = `
+  fragment HighlightFields on Highlight {
+    id
+    shortId
+    libraryItemId
+    quote
+    prefix
+    suffix
+    patch
+    annotation
+    createdAt
+    updatedAt
+    sharedAt
+    highlightPositionPercent
+    highlightPositionAnchorIndex
+    highlightType
+    html
+    color
+    representation
+    selectors
+    contentVersion
+  }
+`
+
+export const LIBRARY_ITEM_BASIC_FRAGMENT = `
+  fragment LibraryItemBasicFields on LibraryItem {
+    id
+    title
+    slug
+    originalUrl
+    author
+    description
+    savedAt
+    createdAt
+    updatedAt
+    publishedAt
+    readAt
+    state
+    contentReader
+    folder
+    thumbnail
+    wordCount
+    siteName
+    siteIcon
+    itemType
+    note
+    noteUpdatedAt
+    readingProgressPercent
+  }
+`
+
+export const LIBRARY_ITEM_FULL_FRAGMENT = `
+  fragment LibraryItemFullFields on LibraryItem {
+    id
+    title
+    slug
+    originalUrl
+    author
+    description
+    content
+    savedAt
+    createdAt
+    updatedAt
+    publishedAt
+    readAt
+    state
+    contentReader
+    folder
+    thumbnail
+    wordCount
+    siteName
+    siteIcon
+    itemType
+    note
+    noteUpdatedAt
+    labels {
+      ...LabelBasicFields
+    }
+  }
+`
+
+export const READING_PROGRESS_FRAGMENT = `
+  fragment ReadingProgressFields on ReadingProgress {
+    id
+    libraryItemId
+    contentVersion
+    lastSeenSentinel
+    highestSeenSentinel
+    createdAt
+    updatedAt
+  }
+`
+
diff --git a/packages/web-vite/src/lib/markdown.ts b/packages/web-vite/src/lib/markdown.ts
new file mode 100644
index 000000000..16a7514a0
--- /dev/null
+++ b/packages/web-vite/src/lib/markdown.ts
@@ -0,0 +1,148 @@
+// Lightweight markdown renderer
+// Supports basic markdown without external dependencies
+
+/**
+ * Groups contiguous <li> elements into separate <ul> blocks
+ * Handles whitespace and newlines between items correctly
+ * Uses stateful parsing to avoid greedy regex
+ */
+function groupListItems(html: string): string {
+  if (!html.includes('<li>')) {
+    return html
+  }
+
+  const result: string[] = []
+  let currentListItems: string[] = []
+  let i = 0
+
+  while (i < html.length) {
+    // Find the next <li> tag
+    const liStart = html.indexOf('<li>', i)
+
+    if (liStart === -1) {
+      // No more list items, add remaining content and close any open list
+      if (currentListItems.length > 0) {
+        result.push(`<ul>${currentListItems.join('\n')}</ul>`)
+        currentListItems = []
+      }
+      // Add remaining content
+      if (i < html.length) {
+        const remaining = html.substring(i)
+        if (remaining.trim()) {
+          result.push(remaining)
+        }
+      }
+      break
+    }
+
+    // Add content before this <li> tag
+    const beforeLi = html.substring(i, liStart)
+    if (beforeLi.trim()) {
+      // If we have accumulated list items, close that list first
+      if (currentListItems.length > 0) {
+        result.push(`<ul>${currentListItems.join('\n')}</ul>`)
+        currentListItems = []
+      }
+      result.push(beforeLi)
+    } else if (beforeLi && currentListItems.length === 0) {
+      // Pure whitespace before first item - preserve it if no list is open
+      result.push(beforeLi)
+    }
+
+    // Find the matching </li> tag
+    const liEnd = html.indexOf('</li>', liStart)
+    if (liEnd === -1) {
+      // Malformed HTML - no closing tag, skip this <li>
+      i = liStart + 4
+      continue
+    }
+
+    // Extract the list item (including tags)
+    const listItem = html.substring(liStart, liEnd + 5)
+    currentListItems.push(listItem.trim())
+
+    i = liEnd + 5 // Move past </li>
+  }
+
+  // Close any remaining list items
+  if (currentListItems.length > 0) {
+    result.push(`<ul>${currentListItems.join('\n')}</ul>`)
+  }
+
+  return result.join('')
+}
+
+export function renderMarkdown(markdown: string): string {
+  if (!markdown) return ''
+
+  let html = markdown
+
+  // Escape HTML to prevent XSS
+  html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+  // Headers (must come before other rules)
+  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>')
+  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>')
+  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>')
+
+  // Bold
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  html = html.replace(/__(.+?)__/g, '<strong>$1</strong>')
+
+  // Italic
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>')
+  html = html.replace(/_(.+?)_/g, '<em>$1</em>')
+
+  // Strikethrough
+  html = html.replace(/~~(.+?)~~/g, '<del>$1</del>')
+
+  // Code blocks (must come before inline code)
+  html = html.replace(
+    /```(\w*)\n([\s\S]*?)```/g,
+    '<pre><code class="language-$1">$2</code></pre>',
+  )
+
+  // Inline code
+  html = html.replace(/`(.+?)`/g, '<code>$1</code>')
+
+  // Links
+  html = html.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+  )
+
+  // Images
+  html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />')
+
+  // Blockquotes
+  html = html.replace(/^&gt; (.*$)/gim, '<blockquote>$1</blockquote>')
+
+  // Horizontal rules
+  html = html.replace(/^---$/gim, '<hr />')
+  html = html.replace(/^\*\*\*$/gim, '<hr />')
+
+  // Unordered lists
+  html = html.replace(/^\* (.*$)/gim, '<li>$1</li>')
+  html = html.replace(/^- (.*$)/gim, '<li>$1</li>')
+
+  // Ordered lists
+  html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
+
+  // Group contiguous <li> elements into separate <ul> blocks
+  html = groupListItems(html)
+
+  // Wrap entire content in <p> if it doesn't already start with a tag
+  // This ensures paragraphs are properly enclosed before splitting
+  if (!html.trim().startsWith('<')) {
+    html = `<p>${html}</p>`
+  }
+
+  // Replace double newlines with closing and opening paragraph tags
+  // This splits content into separate paragraphs while maintaining proper nesting
+  html = html.replace(/\n\n/g, '</p><p>')
+
+  // Replace single newlines with line breaks
+  html = html.replace(/\n/g, '<br />')
+
+  return html
+}
diff --git a/packages/web-vite/src/lib/reading-time.ts b/packages/web-vite/src/lib/reading-time.ts
index 92336293a..20cba88b4 100644
--- a/packages/web-vite/src/lib/reading-time.ts
+++ b/packages/web-vite/src/lib/reading-time.ts
@@ -23,6 +23,7 @@ export function calculateReadingTime(
 
   if (minutes < 1) return '< 1 min'
   if (minutes === 1) return '1 min'
+  
   return `${minutes} min`
 }
 
@@ -42,12 +43,14 @@ export function formatTimestamp(dateString: string): string {
     const diffInMinutes = Math.floor(diffInMs / (1000 * 60))
     if (diffInMinutes < 1) return 'Just now'
     if (diffInMinutes === 1) return '1 minute ago'
+    
     return `${diffInMinutes} minutes ago`
   }
 
   // Less than 24 hours
   if (diffInHours < 24) {
     if (diffInHours === 1) return '1 hour ago'
+    
     return `${diffInHours} hours ago`
   }
 
@@ -55,6 +58,7 @@ export function formatTimestamp(dateString: string): string {
   if (diffInHours < 168) {
     const diffInDays = Math.floor(diffInHours / 24)
     if (diffInDays === 1) return '1 day ago'
+    
     return `${diffInDays} days ago`
   }
 
@@ -76,6 +80,7 @@ export function getProgressColor(percent: number): string {
   if (percent < 25) return '#4a9eff'
   if (percent < 75) return '#ffd234'
   if (percent < 100) return '#ff9500'
+  
   return '#4caf50' // Completed
 }
 
@@ -92,5 +97,6 @@ export function formatReadingProgress(
   const percent = topPercent ?? 0
   if (percent === 0) return ''
   if (percent >= 100) return 'Completed'
+  
   return `${Math.round(percent)}% read`
 }
diff --git a/packages/web-vite/src/lib/validation.ts b/packages/web-vite/src/lib/validation.ts
index e26529d80..d12abc280 100644
--- a/packages/web-vite/src/lib/validation.ts
+++ b/packages/web-vite/src/lib/validation.ts
@@ -17,7 +17,7 @@ export const registerSchema = z
     name: z.string().min(2, 'Name must be at least 2 characters'),
   })
   .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords don't match",
+    message: 'Passwords don\'t match',
     path: ['confirmPassword'],
   })
 
diff --git a/packages/web-vite/src/main.tsx b/packages/web-vite/src/main.tsx
index bef5202a3..79d9e1874 100644
--- a/packages/web-vite/src/main.tsx
+++ b/packages/web-vite/src/main.tsx
@@ -1,6 +1,11 @@
+// Import global base styles
+import './index.css'
+// Import consolidated CSS bundle - Vite will code-split automatically
+import './styles/index.css'
+
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/packages/web-vite/src/pages/EmailLoginPage.tsx b/packages/web-vite/src/pages/EmailLoginPage.tsx
index 6bfa1b280..4ae40abbe 100644
--- a/packages/web-vite/src/pages/EmailLoginPage.tsx
+++ b/packages/web-vite/src/pages/EmailLoginPage.tsx
@@ -1,13 +1,14 @@
 // Email login page component for Omnivore Vite app
 // Email/password authentication form
 
-import React, { useState, useEffect } from 'react'
-import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { Link, useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../stores'
-import { loginSchema, type LoginFormData } from '../lib/validation'
+
 import ErrorBoundary from '../components/ErrorBoundary'
+import { type LoginFormData, loginSchema } from '../lib/validation'
+import { useAuthStore } from '../stores'
 
 const EmailLoginPage: React.FC = () => {
   const navigate = useNavigate()
diff --git a/packages/web-vite/src/pages/LabelsPage.tsx b/packages/web-vite/src/pages/LabelsPage.tsx
index f232fa513..f0c06976c 100644
--- a/packages/web-vite/src/pages/LabelsPage.tsx
+++ b/packages/web-vite/src/pages/LabelsPage.tsx
@@ -1,15 +1,17 @@
-import { useEffect, useState, useRef } from 'react'
-import {
-  useLabels,
-  useCreateLabel,
-  useUpdateLabel,
-  useDeleteLabel,
-  type Label,
-  type CreateLabelInput,
-  type UpdateLabelInput,
-} from '../lib/graphql-client'
 import '../styles/LabelsPage.css'
 
+import { useEffect, useRef, useState } from 'react'
+
+import {
+  type CreateLabelInput,
+  type Label,
+  type UpdateLabelInput,
+  useCreateLabel,
+  useDeleteLabel,
+  useLabels,
+  useUpdateLabel,
+} from '../lib/graphql-client'
+
 export function LabelsPage() {
   const { data: labels, loading, error, fetchLabels } = useLabels()
   const { createLabel, loading: creating } = useCreateLabel()
@@ -46,6 +48,7 @@ export function LabelsPage() {
     }
     if (openMenuId) {
       document.addEventListener('mousedown', handleClickOutside)
+      
       return () => document.removeEventListener('mousedown', handleClickOutside)
     }
   }, [openMenuId])
@@ -103,6 +106,7 @@ export function LabelsPage() {
   const handleDeleteLabel = async (label: Label) => {
     if (label.internal) {
       showToast('Cannot delete system labels', 'error')
+      
       return
     }
 
@@ -125,6 +129,7 @@ export function LabelsPage() {
   const startEdit = (label: Label) => {
     if (label.internal) {
       showToast('Cannot edit system labels', 'error')
+      
       return
     }
     setEditingLabel(label)
diff --git a/packages/web-vite/src/pages/LandingPage.tsx b/packages/web-vite/src/pages/LandingPage.tsx
index 462684de6..1f499ffcf 100644
--- a/packages/web-vite/src/pages/LandingPage.tsx
+++ b/packages/web-vite/src/pages/LandingPage.tsx
@@ -9,7 +9,7 @@ const LandingPage: React.FC = () => {
     {
       titleText: 'Save it now. Read it later.',
       descriptionText:
-        "Save articles and PDFs as you come across them using Omnivore's mobile apps and browser extensions. Read them later using our distraction free reader.",
+        'Save articles and PDFs as you come across them using Omnivore\'s mobile apps and browser extensions. Read them later using our distraction free reader.',
       image: '/static/images/landing/landing-01-save-it-now.png',
       imagePosition: 'right' as const,
     },
@@ -23,7 +23,7 @@ const LandingPage: React.FC = () => {
     {
       titleText: 'Keep your reading organized, whatever that means to you.',
       descriptionText:
-        "Keep your reading organized and easily available with labels, filters, rules, and full text searches. We're not here to tell you how to stay organized — our job is to give you the tools to build a system that works for you.",
+        'Keep your reading organized and easily available with labels, filters, rules, and full text searches. We\'re not here to tell you how to stay organized — our job is to give you the tools to build a system that works for you.',
       image: '/static/images/landing/landing-03-organisation.png',
       imagePosition: 'right' as const,
     },
@@ -44,14 +44,14 @@ const LandingPage: React.FC = () => {
     {
       titleText: 'Listen to your reading with text-to-speech.',
       descriptionText:
-        "Work through your to-be-read list and give your eyes a break with text-to-speech, exclusively in the Omnivore app for iOS. Realistic, natural-sounding AI voices will read any saved article aloud.",
+        'Work through your to-be-read list and give your eyes a break with text-to-speech, exclusively in the Omnivore app for iOS. Realistic, natural-sounding AI voices will read any saved article aloud.',
       image: '/static/images/landing/landing-06-tts.png',
       imagePosition: 'left' as const,
     },
     {
-      titleText: "Open source means you're in control.",
+      titleText: 'Open source means you\'re in control.',
       descriptionText:
-        "Reading is a lifetime activity, and you shouldn't have to worry you'll lose your library after you've spent years building it. Our open-source platform ensures your reading won't be held prisoner in a proprietary system.",
+        'Reading is a lifetime activity, and you shouldn\'t have to worry you\'ll lose your library after you\'ve spent years building it. Our open-source platform ensures your reading won\'t be held prisoner in a proprietary system.',
       image: '/static/images/landing/landing-07-oss.png',
       imagePosition: 'right' as const,
     },
diff --git a/packages/web-vite/src/pages/LibraryPage.tsx b/packages/web-vite/src/pages/LibraryPage.tsx
index 9f47e343b..72051a013 100644
--- a/packages/web-vite/src/pages/LibraryPage.tsx
+++ b/packages/web-vite/src/pages/LibraryPage.tsx
@@ -1,69 +1,54 @@
 // Library page component for Omnivore Vite migration
 // Uses the new NestJS GraphQL endpoint to fetch the user's library items
 
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../stores'
+
+import AddLinkModal from '../components/AddLinkModal'
+import EditInfoModal from '../components/EditInfoModal'
+import ErrorBoundary from '../components/ErrorBoundary'
+import LabelPickerModal from '../components/LabelPickerModal'
+import LibraryItemCard, { type CardAction } from '../components/LibraryItemCard'
+import LibraryItemRow from '../components/LibraryItemRow'
+import NotebookModal from '../components/NotebookModal'
 import {
   graphqlRequest,
   useArchiveItem,
-  useDeleteItem,
   useBulkArchive,
   useBulkDelete,
-  useBulkMoveToFolder,
   useBulkMarkAsRead,
-  useUpdateReadingProgress,
+  useBulkMoveToFolder,
+  useDeleteItem,
   useLabels,
+  useSetLibraryItemLabels,
+  useUpdateLibraryItem,
+  useUpdateNotebook,
 } from '../lib/graphql-client'
+import {
+  LABEL_BASIC_FRAGMENT,
+  LIBRARY_ITEM_BASIC_FRAGMENT,
+} from '../lib/graphql-fragments'
+import { useAuthStore } from '../stores'
 import type {
   LibraryItem as LibraryItemType,
   LibraryItemsConnection,
   LibraryItemState,
+  LibrarySearchInput,
+  LibrarySortBy,
+  LibrarySortOrder,
 } from '../types/api'
-import ErrorBoundary from '../components/ErrorBoundary'
-import LabelPicker from '../components/LabelPicker'
-import LabelPickerModal from '../components/LabelPickerModal'
-import AddLinkModal from '../components/AddLinkModal'
-import EditInfoModal from '../components/EditInfoModal'
-import LibraryItemCard, { type CardAction } from '../components/LibraryItemCard'
-import LibraryItemRow from '../components/LibraryItemRow'
-import '../styles/LabelPicker.css'
-import '../styles/LibraryGrid.css'
-import '../styles/LibraryList.css'
-import '../styles/LibraryCard.css'
-import '../styles/LibraryPage.css'
+// CSS imported via consolidated bundle in main.tsx
 
 const LIBRARY_ITEMS_QUERY = `
+  ${LIBRARY_ITEM_BASIC_FRAGMENT}
+  ${LABEL_BASIC_FRAGMENT}
   query LibraryItems($first: Int!, $after: String, $search: LibrarySearchInput) {
     libraryItems(first: $first, after: $after, search: $search) {
       items {
-        id
-        title
-        slug
-        originalUrl
-        author
-        description
-        savedAt
-        createdAt
-        updatedAt
-        publishedAt
-        readAt
-        state
-        contentReader
-        folder
+        ...LibraryItemBasicFields
         labels {
-          id
-          name
-          color
-          description
+          ...LabelBasicFields
         }
-        thumbnail
-        wordCount
-        siteName
-        siteIcon
-        itemType
-        readingProgressTopPercent
-        readingProgressBottomPercent
       }
       nextCursor
     }
@@ -81,10 +66,12 @@ const LibraryPage: React.FC = () => {
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [activeFolder, setActiveFolder] = useState<string>('inbox')
-  const [sortBy, setSortBy] = useState<string>('SAVED_AT')
-  const [sortOrder, setSortOrder] = useState<'ASC' | 'DESC'>('DESC')
-  const [toast, setToast] =
-    useState<{ message: string; type: 'success' | 'error' } | null>(null)
+  const [sortBy, setSortBy] = useState<LibrarySortBy>('SAVED_AT')
+  const [sortOrder, setSortOrder] = useState<LibrarySortOrder>('DESC')
+  const [toast, setToast] = useState<{
+    message: string
+    type: 'success' | 'error'
+  } | null>(null)
   const [processingItemId, setProcessingItemId] = useState<string | null>(null)
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false)
@@ -94,10 +81,16 @@ const LibraryPage: React.FC = () => {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {
     // Load view mode from localStorage, default to 'grid'
     const saved = localStorage.getItem('omnivore-view-mode')
-    return (saved === 'grid' || saved === 'list') ? saved : 'grid'
+
+    return saved === 'grid' || saved === 'list' ? saved : 'grid'
   })
-  const [editingLabelsItemId, setEditingLabelsItemId] = useState<string | null>(null)
-  const [editingInfoItemId, setEditingInfoItemId] = useState<string | null>(null)
+  const [editingLabelsItemId, setEditingLabelsItemId] = useState<string | null>(
+    null,
+  )
+  const [editingInfoItemId, setEditingInfoItemId] = useState<string | null>(
+    null,
+  )
+  const [notebookItemId, setNotebookItemId] = useState<string | null>(null)
 
   const { archiveItem } = useArchiveItem()
   const { deleteItem } = useDeleteItem()
@@ -105,7 +98,9 @@ const LibraryPage: React.FC = () => {
   const { bulkDelete } = useBulkDelete()
   const { bulkMoveToFolder } = useBulkMoveToFolder()
   const { bulkMarkAsRead } = useBulkMarkAsRead()
-  const { updateProgress } = useUpdateReadingProgress()
+  const { updateLibraryItem } = useUpdateLibraryItem()
+  const { updateNotebook } = useUpdateNotebook()
+  const { setLibraryItemLabels } = useSetLibraryItemLabels()
   const { data: allLabels, fetchLabels } = useLabels()
 
   useEffect(() => {
@@ -120,7 +115,7 @@ const LibraryPage: React.FC = () => {
   // Polling for processing items
   useEffect(() => {
     const processingItems = items.filter(
-      (i) => i.state === 'CONTENT_NOT_FETCHED' || i.state === 'PROCESSING'
+      (i) => i.state === 'CONTENT_NOT_FETCHED' || i.state === 'PROCESSING',
     )
 
     if (processingItems.length === 0) return
@@ -128,7 +123,7 @@ const LibraryPage: React.FC = () => {
     const pollInterval = setInterval(async () => {
       try {
         // Build search parameters
-        const searchParams: any = {}
+        const searchParams: LibrarySearchInput = {}
         if (searchQuery.trim()) {
           searchParams.query = searchQuery.trim()
         }
@@ -152,8 +147,8 @@ const LibraryPage: React.FC = () => {
         // Check which items finished processing
         const nowReady = data.libraryItems.items.filter((item) =>
           processingItems.some(
-            (p) => p.id === item.id && item.state === 'SUCCEEDED'
-          )
+            (p) => p.id === item.id && item.state === 'SUCCEEDED',
+          ),
         )
 
         if (nowReady.length > 0) {
@@ -161,7 +156,7 @@ const LibraryPage: React.FC = () => {
             `${nowReady.length} article${
               nowReady.length > 1 ? 's' : ''
             } ready to read!`,
-            'success'
+            'success',
           )
         }
 
@@ -195,7 +190,7 @@ const LibraryPage: React.FC = () => {
         }
 
         // Build search parameters
-        const searchParams: any = {}
+        const searchParams: LibrarySearchInput = {}
         if (searchQuery.trim()) {
           searchParams.query = searchQuery.trim()
         }
@@ -220,7 +215,7 @@ const LibraryPage: React.FC = () => {
         setError(null)
       } catch (err) {
         setError(
-          err instanceof Error ? err.message : 'Failed to load your library'
+          err instanceof Error ? err.message : 'Failed to load your library',
         )
       } finally {
         setLoading(false)
@@ -230,6 +225,7 @@ const LibraryPage: React.FC = () => {
 
     // Debounce search query - shorter for better UX
     const debounceTimer = setTimeout(fetchItems, searchQuery ? 300 : 0)
+    
     return () => clearTimeout(debounceTimer)
   }, [
     user,
@@ -248,6 +244,7 @@ const LibraryPage: React.FC = () => {
       if (activeFolder === 'inbox' && item.folder !== 'inbox') return false
       if (activeFolder === 'archive' && item.folder !== 'archive') return false
       if (activeFolder === 'trash' && item.folder !== 'trash') return false
+      
       return true
     })
   }, [items, activeFolder])
@@ -256,12 +253,13 @@ const LibraryPage: React.FC = () => {
     const date = new Date(dateString)
     const now = new Date()
     const diffInHours = Math.floor(
-      (now.getTime() - date.getTime()) / (1000 * 60 * 60)
+      (now.getTime() - date.getTime()) / (1000 * 60 * 60),
     )
 
     if (diffInHours < 1) return 'Just now'
     if (diffInHours < 24) return `${diffInHours}h ago`
     if (diffInHours < 168) return `${Math.floor(diffInHours / 24)}d ago`
+    
     return date.toLocaleDateString()
   }
 
@@ -297,7 +295,7 @@ const LibraryPage: React.FC = () => {
 
   const showToast = (
     message: string,
-    type: 'success' | 'error' = 'success'
+    type: 'success' | 'error' = 'success',
   ) => {
     setToast({ message, type })
     setTimeout(() => setToast(null), 3000)
@@ -309,7 +307,7 @@ const LibraryPage: React.FC = () => {
 
   const handleArchive = async (
     itemId: string,
-    currentState: LibraryItemState
+    currentState: LibraryItemState,
   ) => {
     const isArchived = currentState === 'ARCHIVED'
 
@@ -321,12 +319,12 @@ const LibraryPage: React.FC = () => {
         prevItems.map((item) =>
           item.id === itemId
             ? {
-                ...item,
-                state: isArchived ? 'SUCCEEDED' : 'ARCHIVED',
-                folder: isArchived ? 'inbox' : 'archive',
-              }
-            : item
-        )
+              ...item,
+              state: isArchived ? 'SUCCEEDED' : 'ARCHIVED',
+              folder: isArchived ? 'inbox' : 'archive',
+            }
+            : item,
+        ),
       )
 
       await archiveItem(itemId, !isArchived)
@@ -335,8 +333,8 @@ const LibraryPage: React.FC = () => {
       // Revert optimistic update on error
       setItems((prevItems) =>
         prevItems.map((item) =>
-          item.id === itemId ? { ...item, state: currentState } : item
-        )
+          item.id === itemId ? { ...item, state: currentState } : item,
+        ),
       )
       showToast(err instanceof Error ? err.message : 'Action failed', 'error')
     } finally {
@@ -376,6 +374,7 @@ const LibraryPage: React.FC = () => {
       } else {
         newSet.add(itemId)
       }
+      
       return newSet
     })
   }
@@ -399,12 +398,12 @@ const LibraryPage: React.FC = () => {
         prevItems.map((item) =>
           selectedItems.has(item.id)
             ? {
-                ...item,
-                state: archived ? 'ARCHIVED' : 'SUCCEEDED',
-                folder: archived ? 'archive' : 'inbox',
-              }
-            : item
-        )
+              ...item,
+              state: archived ? 'ARCHIVED' : 'SUCCEEDED',
+              folder: archived ? 'archive' : 'inbox',
+            }
+            : item,
+        ),
       )
 
       const result = await bulkArchive(itemIds, archived)
@@ -413,18 +412,21 @@ const LibraryPage: React.FC = () => {
           `${result.successCount} items ${
             archived ? 'archived' : 'unarchived'
           }`,
-        'success'
+        'success',
       )
 
       if (result.failureCount > 0 && result.errors) {
-        console.error('Bulk archive errors:', result.errors)
+        showToast(
+          `Bulk archive errors: ${JSON.stringify(result.errors, null, 2)}`,
+          'error',
+        )
       }
 
       deselectAll()
     } catch (err) {
       showToast(
         err instanceof Error ? err.message : 'Bulk archive failed',
-        'error'
+        'error',
       )
       // Refetch to restore correct state
       window.location.reload()
@@ -445,13 +447,13 @@ const LibraryPage: React.FC = () => {
 
       // Optimistic update - remove from list
       setItems((prevItems) =>
-        prevItems.filter((item) => !selectedItems.has(item.id))
+        prevItems.filter((item) => !selectedItems.has(item.id)),
       )
 
       const result = await bulkDelete(itemIds)
       showToast(
         result.message || `${result.successCount} items deleted`,
-        'success'
+        'success',
       )
 
       if (result.failureCount > 0 && result.errors) {
@@ -462,7 +464,7 @@ const LibraryPage: React.FC = () => {
     } catch (err) {
       showToast(
         err instanceof Error ? err.message : 'Bulk delete failed',
-        'error'
+        'error',
       )
       window.location.reload()
     }
@@ -484,14 +486,14 @@ const LibraryPage: React.FC = () => {
         prevItems.map((item) =>
           selectedItems.has(item.id)
             ? { ...item, folder, state: newState }
-            : item
-        )
+            : item,
+        ),
       )
 
       const result = await bulkMoveToFolder(itemIds, folder)
       showToast(
         result.message || `${result.successCount} items moved to ${folder}`,
-        'success'
+        'success',
       )
 
       if (result.failureCount > 0 && result.errors) {
@@ -502,7 +504,7 @@ const LibraryPage: React.FC = () => {
     } catch (err) {
       showToast(
         err instanceof Error ? err.message : 'Bulk move failed',
-        'error'
+        'error',
       )
       window.location.reload()
     }
@@ -514,19 +516,23 @@ const LibraryPage: React.FC = () => {
     try {
       const itemIds = Array.from(selectedItems)
 
-      // Optimistic update
+      // Optimistic update - set readAt AND progress to 100%
       setItems((prevItems) =>
         prevItems.map((item) =>
           selectedItems.has(item.id)
-            ? { ...item, readAt: new Date().toISOString() }
-            : item
-        )
+            ? {
+              ...item,
+              readAt: new Date().toISOString(),
+              readingProgressPercent: 100, // Show full green bar
+            }
+            : item,
+        ),
       )
 
       const result = await bulkMarkAsRead(itemIds)
       showToast(
         result.message || `${result.successCount} items marked as read`,
-        'success'
+        'success',
       )
 
       if (result.failureCount > 0 && result.errors) {
@@ -537,7 +543,7 @@ const LibraryPage: React.FC = () => {
     } catch (err) {
       showToast(
         err instanceof Error ? err.message : 'Bulk mark as read failed',
-        'error'
+        'error',
       )
       window.location.reload()
     }
@@ -545,27 +551,43 @@ const LibraryPage: React.FC = () => {
 
   const handleLabelsUpdate = async (
     itemId: string,
-    newLabelNames: string[]
+    newLabelNames: string[],
   ) => {
-    // Optimistic update - convert label names to Label objects
-    setItems((prevItems) =>
-      prevItems.map((item) => {
-        if (item.id === itemId && allLabels) {
-          // Map label names to full Label objects from allLabels
-          const updatedLabels = newLabelNames
-            .map((name) => allLabels.find((l) => l.name === name))
-            .filter((l): l is NonNullable<typeof l> => l !== undefined)
-          return { ...item, labels: updatedLabels }
-        }
-        return item
-      })
-    )
-    showToast('Labels updated', 'success')
-
-    // Refetch library items to get the actual updated data from server
-    // This ensures the labels are persisted and the filter will work correctly
     try {
-      const searchParams: any = {}
+      if (!allLabels) {
+        showToast('Labels not loaded yet', 'error')
+
+        return
+      }
+
+      // Convert label names to label IDs for the mutation
+      const labelIds = newLabelNames
+        .map((name) => allLabels.find((l) => l.name === name)?.id)
+        .filter((id): id is string => id !== undefined)
+
+      // Optimistic update - convert label names to Label objects
+      setItems((prevItems) =>
+        prevItems.map((item) => {
+          if (item.id === itemId && allLabels) {
+            // Map label names to full Label objects from allLabels
+            const updatedLabels = newLabelNames
+              .map((name) => allLabels.find((l) => l.name === name))
+              .filter((l): l is NonNullable<typeof l> => l !== null)
+
+            return { ...item, labels: updatedLabels }
+          }
+
+          return item
+        }),
+      )
+
+      // Call the mutation to persist labels to backend
+      await setLibraryItemLabels(itemId, labelIds)
+      showToast('Labels updated', 'success')
+
+      // Refetch library items to get the actual updated data from server
+      // This ensures the labels are persisted and the filter will work correctly
+      const searchParams: LibrarySearchInput = {}
       if (searchQuery.trim()) {
         searchParams.query = searchQuery.trim()
       }
@@ -587,43 +609,71 @@ const LibraryPage: React.FC = () => {
 
       setItems(data.libraryItems.items)
     } catch (err) {
-      console.error('Failed to refetch library items:', err)
-      // Don't show error toast here since the optimistic update already succeeded
+      console.error('Failed to update labels:', err)
+      showToast(
+        err instanceof Error ? err.message : 'Failed to update labels',
+        'error',
+      )
+      // Reload page to reset state on error
+      window.location.reload()
     }
   }
 
-  const handleInfoUpdate = async (itemId: string, updatedFields: any) => {
+  const handleInfoUpdate = async (
+    itemId: string,
+    updatedFields: Partial<LibraryItemType>,
+  ) => {
     // Optimistic update
     setItems((prevItems) =>
       prevItems.map((item) =>
-        item.id === itemId ? { ...item, ...updatedFields } : item
-      )
+        item.id === itemId ? { ...item, ...updatedFields } : item,
+      ),
     )
     showToast('Info updated', 'success')
   }
 
+  const handleNotebookSave = async (itemId: string, note: string) => {
+    try {
+      await updateNotebook(itemId, note)
+
+      // Optimistic update
+      setItems((prevItems) =>
+        prevItems.map((item) =>
+          item.id === itemId
+            ? { ...item, note, noteUpdatedAt: new Date().toISOString() }
+            : item,
+        ),
+      )
+
+      showToast('Notebook saved', 'success')
+    } catch (err) {
+      showToast(
+        err instanceof Error ? err.message : 'Failed to save notebook',
+        'error',
+      )
+      throw err // Re-throw so NotebookModal can handle it
+    }
+  }
+
   const handleMarkAsRead = async (itemId: string) => {
     try {
       setProcessingItemId(itemId)
 
-      // Optimistic update
+      // Optimistic update - set readAt AND progress to 100% (full green bar)
       setItems((prevItems) =>
         prevItems.map((item) =>
           item.id === itemId
             ? {
-                ...item,
-                readingProgressTopPercent: 100,
-                readingProgressBottomPercent: 100,
-                readAt: new Date().toISOString(),
-              }
-            : item
-        )
+              ...item,
+              readAt: new Date().toISOString(),
+              readingProgressPercent: 100, // Show full green bar
+            }
+            : item,
+        ),
       )
 
-      await updateProgress(itemId, {
-        readingProgressTopPercent: 100,
-        readingProgressBottomPercent: 100,
-      })
+      // Use bulkMarkAsRead with single item
+      await bulkMarkAsRead([itemId])
       showToast('Marked as read', 'success')
     } catch (err) {
       // Revert optimistic update on error
@@ -643,19 +693,29 @@ const LibraryPage: React.FC = () => {
         prevItems.map((item) =>
           item.id === itemId
             ? {
-                ...item,
-                readingProgressTopPercent: 0,
-                readingProgressBottomPercent: 0,
-                readAt: null,
-              }
-            : item
-        )
+              ...item,
+              readAt: null,
+            }
+            : item,
+        ),
+      )
+
+      // Use updateLibraryItem to set readAt to null
+      const updatedItem = await updateLibraryItem(itemId, { readAt: null })
+
+      // Update with actual response to ensure consistency
+      setItems((prevItems) =>
+        prevItems.map((item) =>
+          item.id === itemId
+            ? {
+              ...item,
+              readAt: updatedItem.readAt,
+              updatedAt: updatedItem.updatedAt,
+            }
+            : item,
+        ),
       )
 
-      await updateProgress(itemId, {
-        readingProgressTopPercent: 0,
-        readingProgressBottomPercent: 0,
-      })
       showToast('Marked as unread', 'success')
     } catch (err) {
       // Revert optimistic update on error
@@ -683,10 +743,7 @@ const LibraryPage: React.FC = () => {
         setEditingLabelsItemId(itemId)
         break
       case 'open-notebook':
-        // Show toast about upcoming feature, but still navigate to reader
-        showToast('Notebook sidebar coming soon! Opening article...', 'success')
-        // Navigate to reader with notebook sidebar open (when implemented in ARC-010-FE)
-        setTimeout(() => navigate(`/reader/${itemId}?notebook=open`), 500)
+        setNotebookItemId(itemId)
         break
       case 'open-original':
         if (item.originalUrl) {
@@ -709,9 +766,9 @@ const LibraryPage: React.FC = () => {
     setSelectedLabelFilters((prev) => {
       if (prev.includes(labelName)) {
         return prev.filter((l) => l !== labelName)
-      } else {
-        return [...prev, labelName]
       }
+
+      return [...prev, labelName]
     })
   }
 
@@ -723,7 +780,7 @@ const LibraryPage: React.FC = () => {
     showToast('Link added successfully!', 'success')
     // Refetch library items
     try {
-      const searchParams: any = {}
+      const searchParams: LibrarySearchInput = {}
       if (searchQuery.trim()) {
         searchParams.query = searchQuery.trim()
       }
@@ -872,7 +929,7 @@ const LibraryPage: React.FC = () => {
             <select
               id="sort-by"
               value={sortBy}
-              onChange={(e) => setSortBy(e.target.value)}
+              onChange={(e) => setSortBy(e.target.value as LibrarySortBy)}
               className="sort-select"
             >
               <option value="SAVED_AT">Recent</option>
@@ -901,50 +958,76 @@ const LibraryPage: React.FC = () => {
         />
 
         {/* Label Picker Modal */}
-        {editingLabelsItemId && (() => {
-          const editingItem = items.find(i => i.id === editingLabelsItemId)
-          if (!editingItem) return null
+        {editingLabelsItemId &&
+          (() => {
+            const editingItem = items.find((i) => i.id === editingLabelsItemId)
+            if (!editingItem) return null
 
-          return (
-            <LabelPickerModal
-              itemId={editingItem.id}
-              currentLabels={editingItem.labels?.map(l => l.name) || []}
-              onUpdate={(labelNames) => {
-                handleLabelsUpdate(editingItem.id, labelNames)
-                setEditingLabelsItemId(null)
-              }}
-              onClose={() => setEditingLabelsItemId(null)}
-            />
-          )
-        })()}
+            return (
+              <LabelPickerModal
+                itemId={editingItem.id}
+                currentLabels={editingItem.labels?.map((l) => l.name) || []}
+                onUpdate={(labelNames) => {
+                  handleLabelsUpdate(editingItem.id, labelNames)
+                  setEditingLabelsItemId(null)
+                }}
+                onClose={() => setEditingLabelsItemId(null)}
+              />
+            )
+          })()}
 
         {/* Edit Info Modal */}
-        {editingInfoItemId && (() => {
-          const editingItem = items.find(i => i.id === editingInfoItemId)
-          if (!editingItem) return null
+        {editingInfoItemId &&
+          (() => {
+            const editingItem = items.find((i) => i.id === editingInfoItemId)
+            if (!editingItem) return null
 
-          return (
-            <EditInfoModal
-              itemId={editingItem.id}
-              currentTitle={editingItem.title}
-              currentAuthor={editingItem.author}
-              currentDescription={editingItem.description}
-              onUpdate={(updatedFields) => {
-                handleInfoUpdate(editingItem.id, updatedFields)
-                setEditingInfoItemId(null)
-              }}
-              onClose={() => setEditingInfoItemId(null)}
-            />
-          )
-        })()}
+            return (
+              <EditInfoModal
+                itemId={editingItem.id}
+                currentTitle={editingItem.title}
+                currentAuthor={editingItem.author}
+                currentDescription={editingItem.description}
+                onUpdate={(updatedFields) => {
+                  handleInfoUpdate(editingItem.id, updatedFields)
+                  setEditingInfoItemId(null)
+                }}
+                onClose={() => setEditingInfoItemId(null)}
+              />
+            )
+          })()}
+
+        {/* Notebook Modal */}
+        {notebookItemId &&
+          (() => {
+            const notebookItem = items.find((i) => i.id === notebookItemId)
+            if (!notebookItem) return null
+
+            return (
+              <NotebookModal
+                itemTitle={notebookItem.title}
+                currentNote={notebookItem.note}
+                onSave={(note) => handleNotebookSave(notebookItem.id, note)}
+                onClose={() => setNotebookItemId(null)}
+              />
+            )
+          })()}
 
         {isMultiSelectMode && (
           <div className="bulk-actions-bar">
             <div className="bulk-select-controls">
-              <button type="button" onClick={selectAll} className="btn btn-secondary bulk-control-btn">
+              <button
+                type="button"
+                onClick={selectAll}
+                className="btn btn-secondary bulk-control-btn"
+              >
                 Select All
               </button>
-              <button type="button" onClick={deselectAll} className="btn btn-secondary bulk-control-btn">
+              <button
+                type="button"
+                onClick={deselectAll}
+                className="btn btn-secondary bulk-control-btn"
+              >
                 Deselect All
               </button>
               <span className="selected-count">
diff --git a/packages/web-vite/src/pages/LoginPage.tsx b/packages/web-vite/src/pages/LoginPage.tsx
index c584fbca4..877ec2779 100644
--- a/packages/web-vite/src/pages/LoginPage.tsx
+++ b/packages/web-vite/src/pages/LoginPage.tsx
@@ -1,10 +1,11 @@
 // Login page component for Omnivore Vite app
 // Replicates legacy login page with OAuth and email options
 
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../stores'
+
 import { AppleSignInButton } from '../components/AppleSignInButton'
+import { useAuthStore } from '../stores'
 
 const LoginPage: React.FC = () => {
   const navigate = useNavigate()
diff --git a/packages/web-vite/src/pages/ReaderPage.tsx b/packages/web-vite/src/pages/ReaderPage.tsx
index 2e0db348d..25f0f3069 100644
--- a/packages/web-vite/src/pages/ReaderPage.tsx
+++ b/packages/web-vite/src/pages/ReaderPage.tsx
@@ -1,48 +1,226 @@
 // Reader page component for Omnivore Vite migration
-// Displays article content with sanitized HTML
 
-import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
 import DOMPurify from 'dompurify'
-import {
-  useLibraryItem,
-  useUpdateReadingProgress,
-  useSetLibraryItemLabels,
-  useLabels,
-} from '../lib/graphql-client'
-import LabelPickerModal from '../components/LabelPickerModal'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
 import EditInfoModal from '../components/EditInfoModal'
-import type { Label } from '../types/api'
-import '../styles/ReaderPage.css'
+import HighlightSidebar from '../components/HighlightSidebar'
+import LabelPickerModal from '../components/LabelPickerModal'
+import NotebookModal from '../components/NotebookModal'
+import {
+  type AnchoredHighlight,
+  buildSelectorsFromSelection,
+  useAnchoredHighlights,
+} from '../lib/anchoredHighlights'
+import { generateContentHashWithFallback } from '../lib/contentHash'
+import {
+  type CreateHighlightInput,
+  useCreateHighlight,
+  useDeleteHighlight,
+  useHighlights,
+  useLabels,
+  useLibraryItem,
+  useReadingProgress,
+  useUpdateHighlight,
+  useUpdateNotebook,
+  useUpdateReadingProgress as useUpdateReadingProgressMutation,
+} from '../lib/graphql-client'
+import type {
+  AnchoredSelectors,
+  HighlightColor,
+  HighlightLike,
+  Label,
+} from '../types/api'
+// CSS imported via consolidated bundle in main.tsx
+
+// Popup component for creating new highlights
+const CreateHighlightPopup: React.FC<{
+  selectedText: string
+  position: { top: number; left: number }
+  onCreateHighlight: (color: HighlightColor, annotation: string) => void
+  onClose: () => void
+}> = ({ selectedText, position, onCreateHighlight, onClose }) => {
+  const [annotation, setAnnotation] = useState('')
+  const [selectedColor, setSelectedColor] = useState<HighlightColor>('YELLOW')
+  const [showAnnotationInput, setShowAnnotationInput] = useState(false)
+  const popupRef = useRef<HTMLDivElement>(null)
+
+  const colors: Array<{ name: HighlightColor; label: string; bg: string }> = [
+    { name: 'YELLOW', label: 'General', bg: 'rgba(255, 212, 59, 0.5)' },
+    { name: 'RED', label: 'Important', bg: 'rgba(255, 107, 107, 0.5)' },
+    { name: 'GREEN', label: 'Action', bg: 'rgba(85, 239, 196, 0.5)' },
+    { name: 'BLUE', label: 'Reference', bg: 'rgba(116, 185, 255, 0.5)' },
+  ]
+
+  const handleSave = () => {
+    onCreateHighlight(selectedColor, annotation)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape') {
+      onClose()
+    }
+    e.stopPropagation()
+  }
+
+  return (
+    <div
+      ref={popupRef}
+      className="create-highlight-popup"
+      role="dialog"
+      tabIndex={-1}
+      aria-label="Create Highlight"
+      style={{
+        position: 'absolute',
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+      }}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="popup-header">
+        <span className="popup-title">Create Highlight</span>
+        <button
+          type="button"
+          className="popup-close"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+
+      <div className="color-picker">
+        {colors.map((color) => (
+          <button
+            key={color.name}
+            type="button"
+            className={`color-button ${
+              selectedColor === color.name ? 'active' : ''
+            }`}
+            style={{ backgroundColor: color.bg }}
+            onClick={() => setSelectedColor(color.name)}
+            title={color.label}
+          >
+            <span className="color-label">{color.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {!showAnnotationInput ? (
+        <button
+          type="button"
+          className="add-note-button"
+          onClick={() => setShowAnnotationInput(true)}
+        >
+          + Add note
+        </button>
+      ) : (
+        <div className="annotation-input-container">
+          <textarea
+            className="annotation-textarea"
+            placeholder="Add your thoughts..."
+            value={annotation}
+            onChange={(e) => {
+              setAnnotation(e.target.value)
+            }}
+            autoFocus
+            rows={3}
+          />
+        </div>
+      )}
+
+      <div className="selected-text-preview">
+        "{selectedText.substring(0, 100)}
+        {selectedText.length > 100 ? '...' : ''}"
+      </div>
+
+      <button
+        type="button"
+        className="save-highlight-button"
+        onClick={handleSave}
+      >
+        Save Highlight
+      </button>
+    </div>
+  )
+}
+
+let domPurifyImagesHookRegistered = false
 
 const ReaderPage: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+
+  // Fetch item and highlights separately but in PARALLEL
   const {
     data: item,
-    loading,
-    error,
+    loading: itemLoading,
+    error: itemError,
     fetchLibraryItem,
   } = useLibraryItem(id || '')
-  const { updateProgress } = useUpdateReadingProgress()
-  const { setLibraryItemLabels } = useSetLibraryItemLabels()
-  const { data: allLabels, fetchLabels } = useLabels()
-  const [lastSavedPercent, setLastSavedPercent] = useState(0)
+  const {
+    data: highlights,
+    loading: highlightsLoading,
+    fetchHighlights,
+  } = useHighlights(id || '')
+
+  // Combined loading/error states
+  const loading = itemLoading || highlightsLoading
+  const error = itemError
+
+  const { fetchLabels } = useLabels()
+  const { createHighlight } = useCreateHighlight()
+  const { updateHighlight } = useUpdateHighlight()
+  const { deleteHighlight } = useDeleteHighlight()
+  const { updateNotebook } = useUpdateNotebook()
+
+  // Sentinel-based reading progress state
+  const [contentHash, setContentHash] = useState<string | null>(null)
+  const [currentSentinel, setCurrentSentinel] = useState(0)
+  const [highestSentinel, setHighestSentinel] = useState(0)
+  const [totalSentinels, setTotalSentinels] = useState(0)
+  const [hasRestoredPosition, setHasRestoredPosition] = useState(false)
+  const sentinelUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const sentinelsInjectedRef = useRef(false)
+  const lastObserverUpdateRef = useRef<number>(0)
+
+  const { data: readingProgress, fetchProgress } = useReadingProgress(
+    id || '',
+    contentHash || undefined,
+  )
+  const { updateProgress: updateReadingProgress } =
+    useUpdateReadingProgressMutation()
+
   const [showLabelModal, setShowLabelModal] = useState(false)
   const [showEditInfoModal, setShowEditInfoModal] = useState(false)
+  const [showHighlightSidebar, setShowHighlightSidebar] = useState(false)
+  const [showNotebookModal, setShowNotebookModal] = useState(false)
   const [itemLabels, setItemLabels] = useState<Label[]>([])
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [selectedText, setSelectedText] = useState<string>('')
+  const [showCreatePopup, setShowCreatePopup] = useState(false)
+  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 })
+  const savedSelectionRef = useRef<{ range: Range; text: string } | null>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
 
+  // Fetch item and highlights in PARALLEL (not sequential!)
   useEffect(() => {
     if (id) {
-      fetchLibraryItem()
+      // Fire both requests simultaneously
+      Promise.all([fetchLibraryItem(), fetchHighlights()]).catch((err) => {
+        console.error('[ReaderPage] Failed to fetch data:', err)
+      })
     }
-  }, [id, fetchLibraryItem])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]) // Only re-fetch when ID changes, not when callbacks change
 
-  // Fetch all labels on mount
+  // Fetch labels once on mount (needed globally)
   useEffect(() => {
     fetchLabels()
-  }, [fetchLabels])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // Only fetch once on mount
 
   // Update local labels when item loads
   useEffect(() => {
@@ -51,50 +229,272 @@ const ReaderPage: React.FC = () => {
     }
   }, [item])
 
-  // Scroll tracking for reading progress
+  // Convert highlights to anchored format for the hook
+  // CRITICAL: Stringify to create stable reference based on actual data
+  const highlightsJson = useMemo(() => JSON.stringify(highlights), [highlights])
+
+  const anchoredHighlights = useMemo<AnchoredHighlight[]>(() => {
+    const parsed = JSON.parse(highlightsJson || '[]') as HighlightLike[]
+    if (!parsed || parsed.length === 0) return []
+
+    return parsed.map((h) => {
+      // Parse selectors from backend (GraphQLJSON returns object), fallback to legacy quote/prefix/suffix
+      let selectors: AnchoredSelectors
+      if (h.selectors && typeof h.selectors === 'object') {
+        // GraphQLJSON scalar returns object directly
+        selectors = h.selectors as AnchoredSelectors
+      } else if (h.selectors && typeof h.selectors === 'string') {
+        // Fallback for legacy string-encoded selectors
+        try {
+          selectors = JSON.parse(h.selectors)
+        } catch {
+          // Fallback to legacy fields if JSON parsing fails
+          selectors = {
+            textQuote: {
+              exact: h.quote || '',
+              prefix: h.prefix || undefined,
+              suffix: h.suffix || undefined,
+            },
+          }
+        }
+      } else {
+        // Legacy highlight without selectors field
+        selectors = {
+          textQuote: {
+            exact: h.quote || '',
+            prefix: h.prefix || undefined,
+            suffix: h.suffix || undefined,
+          },
+        }
+      }
+
+      return {
+        id: h.id,
+        color: h.color,
+        annotation: h.annotation || undefined,
+        selectors,
+      }
+    })
+  }, [highlightsJson])
+
+  // Apply anchored highlights to content
+  const { jumpTo, reapply } = useAnchoredHighlights(
+    contentRef,
+    anchoredHighlights,
+  )
+
+  // Generate content hash when content loads
   useEffect(() => {
-    if (!id || !item || item.state === 'CONTENT_NOT_FETCHED' || !item.content) {
+    if (!item?.content) return
+
+    const generateHash = async () => {
+      const hash = await generateContentHashWithFallback(item.content || '')
+      setContentHash(hash)
+      // Reset sentinel injection flag when content hash changes
+      sentinelsInjectedRef.current = false
+    }
+
+    generateHash()
+  }, [item?.content])
+
+  // Fetch reading progress when content hash is available
+  useEffect(() => {
+    if (id && contentHash) {
+      fetchProgress()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, contentHash]) // Only re-fetch when ID or content hash changes
+
+  // Inject sentinels into content - DEFERRED: Uses requestIdleCallback to prevent blocking
+  useEffect(() => {
+    // Don't inject sentinels while still loading data
+    if (
+      loading ||
+      !contentRef.current ||
+      !item?.content ||
+      sentinelsInjectedRef.current
+    ) {
       return
     }
 
-    const handleScroll = () => {
-      // Clear existing timeout
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current)
-      }
+    const container = contentRef.current
 
-      // Debounce: Update progress 1 second after user stops scrolling
-      scrollTimeoutRef.current = setTimeout(() => {
-        const scrollTop = window.scrollY
-        const docHeight =
-          document.documentElement.scrollHeight - window.innerHeight
+    // Defer sentinel injection until browser is idle (don't block interaction)
+    const idleCallback =
+      window.requestIdleCallback || ((cb: () => void) => setTimeout(cb, 100))
 
-        // Calculate scroll percentage (0-100)
-        const scrollPercent =
-          docHeight > 0
-            ? Math.min(100, Math.max(0, (scrollTop / docHeight) * 100))
-            : 0
+    const handle = idleCallback(
+      () => {
+        if (!container || sentinelsInjectedRef.current) return
 
-        // Only update if changed by at least 5%
-        if (Math.abs(scrollPercent - lastSavedPercent) >= 5) {
-          updateProgress(id, {
-            readingProgressTopPercent: Math.round(scrollPercent),
-            readingProgressBottomPercent: Math.round(scrollPercent),
-          })
-          setLastSavedPercent(scrollPercent)
-        }
-      }, 1000)
-    }
+        // Find all block elements where we can inject sentinels
+        const blockElements = container.querySelectorAll(
+          'p, h1, h2, h3, h4, h5, h6, blockquote, pre, li, div.article-content > div',
+        )
 
-    window.addEventListener('scroll', handleScroll)
+        let sentinelIndex = 0
+
+        blockElements.forEach((element) => {
+          // Skip if this element already has a sentinel after it
+          if (element.nextElementSibling?.hasAttribute('data-sentinel')) {
+            sentinelIndex++
+
+            return
+          }
+
+          // Create invisible sentinel marker (must have height for IntersectionObserver)
+          const sentinel = document.createElement('div')
+          sentinel.setAttribute('data-sentinel', String(sentinelIndex))
+          sentinel.style.cssText =
+            'height:1px;overflow:hidden;pointer-events:none;visibility:hidden;'
+
+          // Insert after the block element
+          element.after(sentinel)
+          sentinelIndex++
+        })
+
+        sentinelsInjectedRef.current = true
+        setTotalSentinels(sentinelIndex)
+      },
+      { timeout: 3000 },
+    ) // Longer timeout - let page become interactive first
 
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current)
+      if (window.cancelIdleCallback) {
+        window.cancelIdleCallback(handle)
+      } else {
+        clearTimeout(handle)
       }
     }
-  }, [id, item, lastSavedPercent, updateProgress])
+  }, [item?.content, contentHash, loading]) // Re-run when content or loading state changes
+
+  // Setup IntersectionObserver to track sentinel visibility - OPTIMIZED
+  useEffect(() => {
+    if (
+      !contentRef.current ||
+      !id ||
+      !contentHash ||
+      !sentinelsInjectedRef.current
+    ) {
+      return
+    }
+
+    // Only create observer once, reuse across re-renders
+    if (observerRef.current) {
+      // Re-attach to new sentinels if content changed
+      const sentinels = contentRef.current.querySelectorAll('[data-sentinel]')
+      sentinels.forEach((sentinel) => observerRef.current!.observe(sentinel))
+
+      return
+    }
+
+    // Create new observer with throttled callback
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Throttle updates to max 10 per second (100ms intervals)
+        const now = Date.now()
+        if (now - lastObserverUpdateRef.current < 100) return
+        lastObserverUpdateRef.current = now
+
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const sentinelId = Number(
+              entry.target.getAttribute('data-sentinel'),
+            )
+            if (!isNaN(sentinelId)) {
+              setCurrentSentinel(sentinelId)
+              setHighestSentinel((prev) => {
+                const newHighest = Math.max(prev, sentinelId)
+                if (newHighest > prev) {
+                  return newHighest
+                }
+
+                return prev
+              })
+            }
+          }
+        })
+      },
+      {
+        // Trigger when sentinel enters top 10% of viewport
+        threshold: 0,
+        rootMargin: '-10% 0px -90% 0px',
+      },
+    )
+
+    // Observe all sentinels
+    const sentinels = contentRef.current.querySelectorAll('[data-sentinel]')
+    sentinels.forEach((sentinel) => observer.observe(sentinel))
+
+    observerRef.current = observer
+
+    return () => {
+      observer.disconnect()
+      observerRef.current = null
+    }
+  }, [id, contentHash, sentinelsInjectedRef.current])
+
+  // Debounced update of reading progress
+  useEffect(() => {
+    if (!id || !contentHash || currentSentinel === 0) {
+      return
+    }
+
+    // Clear existing timeout
+    if (sentinelUpdateTimeoutRef.current) {
+      clearTimeout(sentinelUpdateTimeoutRef.current)
+    }
+
+    // Debounce: Update progress 2 seconds after user stops scrolling
+    sentinelUpdateTimeoutRef.current = setTimeout(() => {
+      updateReadingProgress({
+        libraryItemId: id,
+        contentVersion: contentHash,
+        lastSeenSentinel: currentSentinel,
+        highestSeenSentinel: highestSentinel,
+        totalSentinels: totalSentinels > 0 ? totalSentinels : undefined,
+      })
+    }, 2000)
+
+    return () => {
+      if (sentinelUpdateTimeoutRef.current) {
+        clearTimeout(sentinelUpdateTimeoutRef.current)
+      }
+    }
+  }, [
+    id,
+    contentHash,
+    currentSentinel,
+    highestSentinel,
+    updateReadingProgress,
+    totalSentinels,
+  ])
+
+  // Restore scroll position from saved progress
+  useEffect(() => {
+    if (
+      !readingProgress ||
+      !contentRef.current ||
+      hasRestoredPosition ||
+      !item?.content
+    ) {
+      return
+    }
+
+    const targetSentinel = contentRef.current.querySelector(
+      `[data-sentinel="${readingProgress.lastSeenSentinel}"]`,
+    )
+
+    if (targetSentinel) {
+      // Small delay to ensure layout is complete
+      setTimeout(() => {
+        targetSentinel.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        setHasRestoredPosition(true)
+      }, 100)
+    } else {
+      setHasRestoredPosition(true)
+    }
+  }, [readingProgress, hasRestoredPosition, item?.content])
 
   const handleBack = () => {
     navigate('/home')
@@ -103,6 +503,7 @@ const ReaderPage: React.FC = () => {
   const formatDate = (dateString: string | null | undefined) => {
     if (!dateString) return null
     const date = new Date(dateString)
+
     return date.toLocaleDateString('en-US', {
       year: 'numeric',
       month: 'long',
@@ -110,9 +511,7 @@ const ReaderPage: React.FC = () => {
     })
   }
 
-  const handleLabelsUpdate = async (newLabelNames: string[]) => {
-    console.log('[ReaderPage] handleLabelsUpdate called with:', newLabelNames)
-
+  const handleLabelsUpdate = async () => {
     // NOTE: The LabelPickerModal has already called setLibraryItemLabels() successfully
     // We just need to update the local UI state and refetch to get the latest data
 
@@ -121,8 +520,6 @@ const ReaderPage: React.FC = () => {
     // Refetch both labels and the item to ensure we have the latest data
     await fetchLabels()
     await fetchLibraryItem()
-
-    console.log('[ReaderPage] Refetched item after label update')
   }
 
   const handleInfoUpdate = async () => {
@@ -130,6 +527,251 @@ const ReaderPage: React.FC = () => {
     await fetchLibraryItem()
   }
 
+  // No longer needed - images are optimized via DOMPurify hooks below
+
+  // Close popup when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      if (!target.closest('.create-highlight-popup')) {
+        setShowCreatePopup(false)
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside)
+
+    return () => document.removeEventListener('click', handleClickOutside)
+  }, [])
+
+  // Text selection detection (supports mouse, touch, and pointer interactions)
+  useEffect(() => {
+    const handleSelectionEnd = () => {
+      // Small delay to ensure selection is complete
+      setTimeout(() => {
+        const selection = window.getSelection()
+        const contentElement = contentRef.current
+
+        if (!selection || selection.isCollapsed) {
+          return
+        }
+
+        if (!contentElement) {
+          return
+        }
+
+        const text = selection.toString().trim()
+
+        // Save the selection range BEFORE showing the popup
+        // This prevents losing the selection when user clicks into the textarea
+        if (selection.rangeCount > 0) {
+          savedSelectionRef.current = {
+            range: selection.getRangeAt(0).cloneRange(),
+            text: text,
+          }
+        }
+
+        if (text.length < 3) {
+          return
+        }
+
+        // Check if selection is within the content area
+        const range = selection.getRangeAt(0)
+        const isInContent = contentElement.contains(
+          range.commonAncestorContainer,
+        )
+
+        if (!isInContent) {
+          return
+        }
+
+        // Get selection position for popup
+        const rect = range.getBoundingClientRect()
+
+        setSelectedText(text)
+        setPopupPosition({
+          top: rect.top + window.scrollY - 120, // Position above selection
+          left: Math.max(10, rect.left + rect.width / 2 - 150), // Center popup with min left margin
+        })
+        setShowCreatePopup(true)
+      }, 10)
+    }
+
+    // Add listeners for mouse, touch, and pointer events
+    document.addEventListener('mouseup', handleSelectionEnd)
+    document.addEventListener('touchend', handleSelectionEnd)
+    document.addEventListener('pointerup', handleSelectionEnd)
+
+    return () => {
+      document.removeEventListener('mouseup', handleSelectionEnd)
+      document.removeEventListener('touchend', handleSelectionEnd)
+      document.removeEventListener('pointerup', handleSelectionEnd)
+    }
+  }, [])
+
+  // Create highlight handler
+  const handleCreateHighlight = async (
+    color: HighlightColor,
+    annotation: string,
+  ) => {
+    if (!id || !contentRef.current) return
+
+    try {
+      // Use saved selection instead of window.getSelection()
+      // The selection gets cleared when user clicks into the annotation textarea
+      const savedSelection = savedSelectionRef.current
+      if (!savedSelection) {
+        console.error('[ReaderPage] No saved selection found')
+
+        return
+      }
+
+      // Create a temporary selection object to pass to buildSelectorsFromSelection
+      const tempSelection = {
+        rangeCount: 1,
+        getRangeAt: (index: number) => savedSelection.range,
+        toString: () => savedSelection.text,
+      } as Selection
+
+      // Build robust anchored selectors (DOM Range, TextPosition, TextQuote)
+      const selectors = buildSelectorsFromSelection(
+        tempSelection,
+        contentRef.current,
+      )
+
+      // Calculate position percentage (0-100)
+      const docHeight = document.documentElement.scrollHeight
+      const range = savedSelection.range
+      const selectionTop = range.getBoundingClientRect().top + window.scrollY
+      const positionPercent =
+        docHeight > 0
+          ? Math.min(100, Math.max(0, (selectionTop / docHeight) * 100))
+          : 0
+
+      const input: CreateHighlightInput = {
+        libraryItemId: id,
+        quote: selectors.textQuote?.exact || '',
+        annotation: annotation || undefined,
+        color,
+        prefix: selectors.textQuote?.prefix,
+        suffix: selectors.textQuote?.suffix,
+        highlightPositionPercent: Math.round(positionPercent * 100) / 100,
+        highlightPositionAnchorIndex: 0,
+        // Send selectors as object (GraphQLJSON scalar handles serialization)
+        selectors,
+      }
+
+      await createHighlight(input)
+
+      // Refetch highlights to update UI
+      await fetchHighlights()
+
+      // Close popup first to allow DOM to settle
+      setShowCreatePopup(false)
+      setSelectedText('')
+      savedSelectionRef.current = null // Clear saved selection
+      window.getSelection()?.removeAllRanges() // Clear any remaining selection
+
+      // Manually reapply highlights after state updates (longer delay)
+      setTimeout(() => {
+        console.log('[ReaderPage] Reapplying highlights after creation')
+        reapply()
+      }, 500)
+    } catch (error) {
+      console.error('Failed to create highlight:', error)
+      // Show error to user - you could add a toast notification here
+      alert('Failed to create highlight. Please try again.')
+    }
+  }
+
+  // Update highlight handler
+  const handleUpdateHighlight = async (
+    highlightId: string,
+    annotation: string,
+    color: HighlightColor,
+  ) => {
+    try {
+      await updateHighlight(highlightId, { annotation, color })
+      await fetchHighlights()
+      // Manually reapply highlights since MutationObserver is disabled
+      setTimeout(() => {
+        console.log('[ReaderPage] Reapplying highlights after update')
+        reapply()
+      }, 500)
+    } catch (error) {
+      console.error('Failed to update highlight:', error)
+    }
+  }
+
+  // Delete highlight handler
+  const handleDeleteHighlight = async (highlightId: string) => {
+    try {
+      await deleteHighlight(highlightId)
+      await fetchHighlights()
+      // Manually reapply highlights since MutationObserver is disabled
+      setTimeout(() => {
+        console.log('[ReaderPage] Reapplying highlights after delete')
+        reapply()
+      }, 500)
+    } catch (error) {
+      console.error('Failed to delete highlight:', error)
+    }
+  }
+
+  // Jump to highlight handler - now uses the robust anchored highlights hook
+  const handleJumpToHighlight = (highlightId: string) => {
+    jumpTo(highlightId)
+  }
+
+  // Notebook save handler
+  const handleNotebookSave = async (note: string) => {
+    if (!id) return
+
+    try {
+      await updateNotebook(id, note)
+      // Refetch item to get updated note timestamp
+      await fetchLibraryItem()
+    } catch (error) {
+      console.error('Failed to save notebook:', error)
+      throw error // Re-throw so NotebookModal can handle the error
+    }
+  }
+
+  // Sanitize HTML content with image optimization hooks - MUST BE BEFORE EARLY RETURNS
+  const sanitizedContent = useMemo(() => {
+    if (!item?.content) return ''
+
+    if (!domPurifyImagesHookRegistered) {
+      DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+        if (node.tagName === 'IMG') {
+          node.setAttribute('loading', 'lazy')
+          node.setAttribute('decoding', 'async')
+          node.setAttribute('onerror', 'this.style.display="none"')
+        }
+      })
+      domPurifyImagesHookRegistered = true
+    }
+
+    const result = DOMPurify.sanitize(item.content, {
+      ADD_TAGS: ['iframe'],
+      ADD_ATTR: [
+        'allow',
+        'allowfullscreen',
+        'frameborder',
+        'scrolling',
+        'loading',
+        'decoding',
+        'onerror',
+      ],
+    })
+
+    return result
+  }, [item?.content])
+
+  // Get user labels (non-internal) - use local state for optimistic updates
+  const userLabels = useMemo(() => {
+    return itemLabels.filter((label) => !label.internal)
+  }, [itemLabels])
+
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -142,21 +784,62 @@ const ReaderPage: React.FC = () => {
       }
 
       // 'l' key to open labels modal
-      if (e.key === 'l' && !showLabelModal && !showEditInfoModal) {
+      if (
+        e.key === 'l' &&
+        !showLabelModal &&
+        !showEditInfoModal &&
+        !showHighlightSidebar &&
+        !showNotebookModal
+      ) {
         e.preventDefault()
         setShowLabelModal(true)
       }
 
       // 'e' key to open edit info modal
-      if (e.key === 'e' && !showEditInfoModal && !showLabelModal) {
+      if (
+        e.key === 'e' &&
+        !showEditInfoModal &&
+        !showLabelModal &&
+        !showHighlightSidebar &&
+        !showNotebookModal
+      ) {
         e.preventDefault()
         setShowEditInfoModal(true)
       }
+
+      // 'h' key to toggle highlight sidebar
+      if (
+        e.key === 'h' &&
+        !showEditInfoModal &&
+        !showLabelModal &&
+        !showNotebookModal
+      ) {
+        e.preventDefault()
+        setShowHighlightSidebar(!showHighlightSidebar)
+      }
+
+      // 'n' key to open notebook modal
+      if (
+        e.key === 'n' &&
+        !showEditInfoModal &&
+        !showLabelModal &&
+        !showHighlightSidebar &&
+        !showNotebookModal
+      ) {
+        e.preventDefault()
+        setShowNotebookModal(true)
+      }
     }
 
     window.addEventListener('keydown', handleKeyPress)
+
     return () => window.removeEventListener('keydown', handleKeyPress)
-  }, [showLabelModal, showEditInfoModal])
+  }, [
+    showLabelModal,
+    showEditInfoModal,
+    showHighlightSidebar,
+    showNotebookModal,
+  ])
 
   // Loading state
   if (loading) {
@@ -248,14 +931,7 @@ const ReaderPage: React.FC = () => {
     )
   }
 
-  // Sanitize HTML content
-  const sanitizedContent = DOMPurify.sanitize(item.content, {
-    ADD_TAGS: ['iframe'],
-    ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
-  })
-
-  // Get user labels (non-internal) - use local state for optimistic updates
-  const userLabels = itemLabels.filter((label) => !label.internal)
+  // sanitizedContent and userLabels already computed above (before early returns)
 
   return (
     <div className="reader-page">
@@ -308,6 +984,35 @@ const ReaderPage: React.FC = () => {
 
         {/* Toolbar with label edit button */}
         <div className="reader-toolbar">
+          <button
+            type="button"
+            className="toolbar-button"
+            onClick={() => setShowHighlightSidebar(!showHighlightSidebar)}
+            title="Highlights (h)"
+            aria-label="View highlights"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <title>Highlight icon</title>
+              <path d="M12 20 h9" />
+              <path d="M16.5 3.5 a2.121 2.121 0 0 1 3 3 L7 19 l-4 1 l1 -4 L16.5 3.5 z" />
+            </svg>
+            <span>
+              Highlights{' '}
+              {highlights && highlights.length > 0
+                ? `(${highlights.length})`
+                : ''}
+            </span>
+          </button>
           <button
             type="button"
             className="toolbar-button"
@@ -351,20 +1056,59 @@ const ReaderPage: React.FC = () => {
               aria-hidden="true"
             >
               <title>Edit icon</title>
-              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-              <path d="M18.5 2.5a2.121 2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+              <path d="M11 4 H4 a2 2 0 0 0 -2 2 v14 a2 2 0 0 0 2 2 h14 a2 2 0 0 0 2 -2 v-7"></path>
+              <path d="M18.5 2.5 a2.121 2.121 0 0 1 3 3 L12 15 l-4 1 l1 -4 l9.5 -9.5 z"></path>
             </svg>
             <span>Edit Info</span>
           </button>
+          <button
+            type="button"
+            className="toolbar-button"
+            onClick={() => setShowNotebookModal(true)}
+            title="Notebook (n)"
+            aria-label="Open notebook"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <title>Notebook icon</title>
+              <path d="M2 6 a2 2 0 0 1 2 -2 h16 a2 2 0 0 1 2 2 v12 a2 2 0 0 1 -2 2 H4 a2 2 0 0 1 -2 -2 Z"></path>
+              <path d="M8 2 v20"></path>
+            </svg>
+            <span>Notebook</span>
+          </button>
         </div>
       </div>
 
       {/* biome-ignore lint/security/noDangerouslySetInnerHtml: content sanitized with DOMPurify above */}
       <div
+        ref={contentRef}
         className="reader-content"
         dangerouslySetInnerHTML={{ __html: sanitizedContent }}
       />
 
+      {/* Create highlight popup */}
+      {showCreatePopup && selectedText && (
+        <CreateHighlightPopup
+          selectedText={selectedText}
+          position={popupPosition}
+          onCreateHighlight={handleCreateHighlight}
+          onClose={() => {
+            setShowCreatePopup(false)
+            setSelectedText('')
+            window.getSelection()?.removeAllRanges()
+          }}
+        />
+      )}
+
       {/* Label picker modal */}
       {showLabelModal && item && (
         <LabelPickerModal
@@ -386,6 +1130,27 @@ const ReaderPage: React.FC = () => {
           onClose={() => setShowEditInfoModal(false)}
         />
       )}
+
+      {/* Highlight Sidebar */}
+      {showHighlightSidebar && highlights && (
+        <HighlightSidebar
+          highlights={highlights}
+          onUpdateHighlight={handleUpdateHighlight}
+          onDeleteHighlight={handleDeleteHighlight}
+          onJumpToHighlight={handleJumpToHighlight}
+          onClose={() => setShowHighlightSidebar(false)}
+        />
+      )}
+
+      {/* Notebook Modal */}
+      {showNotebookModal && item && (
+        <NotebookModal
+          itemTitle={item.title}
+          currentNote={item.note}
+          onSave={handleNotebookSave}
+          onClose={() => setShowNotebookModal(false)}
+        />
+      )}
     </div>
   )
 }
diff --git a/packages/web-vite/src/pages/RegisterPage.tsx b/packages/web-vite/src/pages/RegisterPage.tsx
index 9446a8c05..66184b623 100644
--- a/packages/web-vite/src/pages/RegisterPage.tsx
+++ b/packages/web-vite/src/pages/RegisterPage.tsx
@@ -1,13 +1,14 @@
 // Enhanced Register page component for Omnivore Vite migration
 // Migrated from existing EmailSignup.tsx with improved design and functionality
 
-import React, { useState, useEffect } from 'react'
-import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../stores'
-import { registerSchema, type RegisterFormData } from '../lib/validation'
+
 import ErrorBoundary from '../components/ErrorBoundary'
+import { type RegisterFormData, registerSchema } from '../lib/validation'
+import { useAuthStore } from '../stores'
 
 const RegisterPage: React.FC = () => {
   const navigate = useNavigate()
diff --git a/packages/web-vite/src/pages/index.tsx b/packages/web-vite/src/pages/index.tsx
index e2ef48a1e..0f64a6343 100644
--- a/packages/web-vite/src/pages/index.tsx
+++ b/packages/web-vite/src/pages/index.tsx
@@ -1,7 +1,7 @@
 // Export individual page components
-export { default as LandingPage } from './LandingPage'
+export { default as AdminPage } from './AdminPage'
 export { default as EmailLoginPage } from './EmailLoginPage'
+export { default as LandingPage } from './LandingPage'
+export { default as NotFoundPage } from './NotFoundPage'
 export { default as ReaderPage } from './ReaderPage'
 export { default as SettingsPage } from './SettingsPage'
-export { default as AdminPage } from './AdminPage'
-export { default as NotFoundPage } from './NotFoundPage'
diff --git a/packages/web-vite/src/router/AppRouter.tsx b/packages/web-vite/src/router/AppRouter.tsx
index 25af2b6e9..cc5fd6043 100644
--- a/packages/web-vite/src/router/AppRouter.tsx
+++ b/packages/web-vite/src/router/AppRouter.tsx
@@ -4,14 +4,15 @@
 import React from 'react'
 import {
   BrowserRouter,
-  Routes,
-  Route,
   Navigate,
   Outlet,
+  Route,
+  Routes,
 } from 'react-router-dom'
-import { useAuthStore } from '../stores'
+
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import LeftNavigation from '../components/LeftNavigation'
+import { useAuthStore } from '../stores'
 
 // Lazy load components for better performance
 const LandingPage = React.lazy(() => import('../pages/LandingPage'))
diff --git a/packages/web-vite/src/stores/__tests__/auth.test.ts b/packages/web-vite/src/stores/__tests__/auth.test.ts
index 6e47798eb..ef6ea3d9c 100644
--- a/packages/web-vite/src/stores/__tests__/auth.test.ts
+++ b/packages/web-vite/src/stores/__tests__/auth.test.ts
@@ -1,7 +1,7 @@
 // Tests for Zustand auth store
 // Ensure authentication state management matches the NestJS contracts
 
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 vi.mock('../../lib/api-client', () => {
   const login = vi.fn()
@@ -15,14 +15,14 @@ vi.mock('../../lib/api-client', () => {
   }
 })
 
+import { apiClient, AUTH_TOKEN_STORAGE_KEY } from '../../lib/api-client'
 import {
-  mockUser,
-  mockLoginSuccessResponse,
   mockLoginErrorResponse,
+  mockLoginSuccessResponse,
   mockRegisterPendingResponse,
+  mockUser,
 } from '../../test/utils'
 import { useAuthStore } from '../index'
-import { apiClient, AUTH_TOKEN_STORAGE_KEY } from '../../lib/api-client'
 
 const mockedApiClient = apiClient as unknown as {
   login: ReturnType<typeof vi.fn>
diff --git a/packages/web-vite/src/stores/index.ts b/packages/web-vite/src/stores/index.ts
index 8b341562c..9aa9e6233 100644
--- a/packages/web-vite/src/stores/index.ts
+++ b/packages/web-vite/src/stores/index.ts
@@ -2,7 +2,8 @@
 // Centralised state management with persistence and backend integration
 
 import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
 import { apiClient, AUTH_TOKEN_STORAGE_KEY } from '../lib/api-client'
 import type { AuthUser, LoginResponse, RegisterResponse } from '../types/api'
 
@@ -80,6 +81,7 @@ const handleAuthSuccess = (response: LoginResponse | RegisterResponse) => {
 
   if ('accessToken' in response && response.accessToken) {
     storeToken(response.accessToken)
+    
     return {
       user: response.user,
       token: response.accessToken,
@@ -161,6 +163,7 @@ export const useAuthStore = create<AuthState>()(
           if (!existingToken) {
             set({ ...initialAuthState, isLoading: false })
             storeToken(null)
+            
             return
           }
 
diff --git a/packages/web-vite/src/styles/HighlightSidebar.css b/packages/web-vite/src/styles/HighlightSidebar.css
new file mode 100644
index 000000000..4fc2f9ccd
--- /dev/null
+++ b/packages/web-vite/src/styles/HighlightSidebar.css
@@ -0,0 +1,398 @@
+/* Highlight Sidebar Styles */
+
+.highlight-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 350px;
+  height: 100vh;
+  background: var(--color-bg-primary);
+  border-left: 1px solid var(--color-border-primary);
+  box-shadow: var(--shadow-lg);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  animation: slideInRight 200ms ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Header */
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+}
+
+.sidebar-title {
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.highlight-count {
+  font-size: 14px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-secondary);
+}
+
+.sidebar-close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.sidebar-close:hover {
+  color: var(--color-text-primary);
+}
+
+/* Content */
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Empty State */
+.sidebar-empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--color-text-secondary);
+}
+
+.sidebar-empty p {
+  margin: 8px 0;
+}
+
+.empty-hint {
+  font-size: 14px;
+  color: var(--color-text-tertiary);
+  font-style: italic;
+}
+
+/* Highlight Item */
+.highlight-item {
+  position: relative;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-md);
+  padding: 0 0 0 8px;
+  margin-bottom: 16px;
+  display: flex;
+  gap: 0;
+  overflow: hidden;
+  transition: box-shadow var(--transition-fast);
+}
+
+.highlight-item:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* Color bar on left */
+.highlight-color-bar {
+  width: 4px;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+.highlight-bar-yellow {
+  background: rgba(255, 212, 59, 0.8);
+}
+
+.highlight-bar-red {
+  background: rgba(255, 107, 107, 0.8);
+}
+
+.highlight-bar-green {
+  background: rgba(85, 239, 196, 0.8);
+}
+
+.highlight-bar-blue {
+  background: rgba(116, 185, 255, 0.8);
+}
+
+/* Body */
+.highlight-body {
+  flex: 1;
+  padding: 12px;
+}
+
+/* Quote */
+.highlight-quote {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: inherit;
+  color: var(--color-text-primary);
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.highlight-quote:hover {
+  opacity: 0.9;
+  transform: translateX(2px);
+}
+
+/* Color-coded quote backgrounds matching article highlights */
+.highlight-item-YELLOW .highlight-quote {
+  background-color: rgba(255, 212, 59, 0.15);
+  border-left: 3px solid rgba(255, 212, 59, 0.6);
+}
+
+.highlight-item-YELLOW .highlight-quote:hover {
+  background-color: rgba(255, 212, 59, 0.25);
+}
+
+.highlight-item-RED .highlight-quote {
+  background-color: rgba(255, 107, 107, 0.15);
+  border-left: 3px solid rgba(255, 107, 107, 0.6);
+}
+
+.highlight-item-RED .highlight-quote:hover {
+  background-color: rgba(255, 107, 107, 0.25);
+}
+
+.highlight-item-GREEN .highlight-quote {
+  background-color: rgba(85, 239, 196, 0.15);
+  border-left: 3px solid rgba(85, 239, 196, 0.6);
+}
+
+.highlight-item-GREEN .highlight-quote:hover {
+  background-color: rgba(85, 239, 196, 0.25);
+}
+
+.highlight-item-BLUE .highlight-quote {
+  background-color: rgba(116, 185, 255, 0.15);
+  border-left: 3px solid rgba(116, 185, 255, 0.6);
+}
+
+.highlight-item-BLUE .highlight-quote:hover {
+  background-color: rgba(116, 185, 255, 0.25);
+}
+
+/* Annotation */
+.highlight-annotation {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--color-text-secondary);
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-style: italic;
+}
+
+/* Actions */
+.highlight-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  transition: all var(--transition-fast);
+}
+
+.action-btn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-hover);
+}
+
+.action-btn-danger:hover {
+  background: rgba(139, 0, 0, 0.1);
+  color: var(--color-state-danger);
+  border-color: var(--color-state-danger);
+}
+
+/* Edit Container */
+.edit-container {
+  margin-top: 8px;
+}
+
+.edit-annotation {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  margin-bottom: 8px;
+}
+
+.edit-annotation:focus {
+  outline: none;
+  border-color: var(--color-action-blue);
+  box-shadow: 0 0 0 2px rgba(116, 185, 255, 0.1);
+}
+
+.edit-color-picker {
+  margin-bottom: 12px;
+}
+
+.edit-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 6px;
+  display: block;
+}
+
+.color-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
+}
+
+.color-option {
+  padding: 6px 8px;
+  border: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-fast);
+  color: var(--color-text-primary);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.color-option:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.color-option.active {
+  border-color: var(--color-action-blue);
+  box-shadow: 0 0 0 2px rgba(116, 185, 255, 0.2);
+}
+
+.edit-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-save,
+.btn-cancel {
+  flex: 1;
+  padding: 8px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-save {
+  background: var(--color-action-blue);
+  border: none;
+  color: white;
+}
+
+.btn-save:hover {
+  background: var(--color-action-blue);
+}
+
+.btn-cancel {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-secondary);
+}
+
+.btn-cancel:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* Delete Confirmation */
+.delete-confirmation {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(139, 0, 0, 0.05);
+  border: 1px solid rgba(139, 0, 0, 0.2);
+  border-radius: var(--radius-md);
+}
+
+.delete-confirmation p {
+  margin: 0 0 10px 0;
+  font-size: 13px;
+  color: var(--color-text-primary);
+}
+
+.delete-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-delete-confirm,
+.btn-delete-cancel {
+  flex: 1;
+  padding: 6px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-delete-confirm {
+  background: var(--color-state-danger);
+  border: none;
+  color: white;
+}
+
+.btn-delete-confirm:hover {
+  background: var(--color-state-danger);
+}
+
+.btn-delete-cancel {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-secondary);
+}
+
+.btn-delete-cancel:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .highlight-sidebar {
+    width: 100%;
+  }
+}
diff --git a/packages/web-vite/src/styles/NotebookModal.css b/packages/web-vite/src/styles/NotebookModal.css
new file mode 100644
index 000000000..14590de4c
--- /dev/null
+++ b/packages/web-vite/src/styles/NotebookModal.css
@@ -0,0 +1,460 @@
+/* Notebook Modal Styles */
+
+/* Backdrop */
+.notebook-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: fadeIn 200ms ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Modal */
+.notebook-modal {
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 200ms ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Header */
+.notebook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 24px 24px 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+  gap: 16px;
+}
+
+.notebook-title-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.notebook-title {
+  font-size: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0 0 4px 0;
+}
+
+.notebook-article-title {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notebook-close {
+  background: none;
+  border: none;
+  font-size: 32px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color var(--transition-fast);
+}
+
+.notebook-close:hover {
+  color: var(--color-text-primary);
+}
+
+/* Tabs */
+.notebook-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-primary);
+  padding: 0 24px;
+  gap: 2px;
+}
+
+.notebook-tab {
+  padding: 12px 24px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+  top: 1px;
+}
+
+.notebook-tab:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+
+.notebook-tab.active {
+  color: var(--color-action-blue);
+  border-bottom-color: var(--color-action-blue);
+}
+
+/* Editor */
+.notebook-editor {
+  flex: 1;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.notebook-textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  padding: 16px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.notebook-textarea:focus {
+  border-color: var(--color-action-blue);
+  box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
+}
+
+.notebook-textarea::placeholder {
+  color: var(--color-text-tertiary);
+  font-style: italic;
+}
+
+/* Preview */
+.notebook-preview {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  padding: 16px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  overflow-y: auto;
+}
+
+.notebook-preview:empty::before {
+  content: 'Nothing to preview yet. Switch to Edit tab to write some notes.';
+  color: var(--color-text-tertiary);
+  font-style: italic;
+}
+
+/* Markdown Preview Styles */
+.notebook-preview h1 {
+  font-size: 28px;
+  font-weight: var(--font-weight-bold);
+  margin: 24px 0 16px 0;
+  color: var(--color-text-primary);
+  border-bottom: 2px solid var(--color-border-primary);
+  padding-bottom: 8px;
+}
+
+.notebook-preview h2 {
+  font-size: 24px;
+  font-weight: var(--font-weight-bold);
+  margin: 20px 0 12px 0;
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  padding-bottom: 6px;
+}
+
+.notebook-preview h3 {
+  font-size: 20px;
+  font-weight: var(--font-weight-semibold);
+  margin: 16px 0 8px 0;
+  color: var(--color-text-primary);
+}
+
+.notebook-preview p {
+  margin: 12px 0;
+  color: var(--color-text-primary);
+}
+
+.notebook-preview strong {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.notebook-preview em {
+  font-style: italic;
+}
+
+.notebook-preview del {
+  text-decoration: line-through;
+  color: var(--color-text-secondary);
+}
+
+.notebook-preview code {
+  padding: 2px 6px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.notebook-preview pre {
+  padding: 16px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  margin: 16px 0;
+}
+
+.notebook-preview pre code {
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.notebook-preview a {
+  color: var(--color-action-blue);
+  text-decoration: underline;
+  transition: color var(--transition-fast);
+}
+
+.notebook-preview a:hover {
+  color: #5aa3ff;
+}
+
+.notebook-preview img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+  margin: 16px 0;
+}
+
+.notebook-preview blockquote {
+  border-left: 4px solid var(--color-border-primary);
+  padding-left: 16px;
+  margin: 16px 0;
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+.notebook-preview hr {
+  border: none;
+  border-top: 2px solid var(--color-border-primary);
+  margin: 24px 0;
+}
+
+.notebook-preview ul,
+.notebook-preview ol {
+  margin: 12px 0;
+  padding-left: 24px;
+}
+
+.notebook-preview li {
+  margin: 6px 0;
+  color: var(--color-text-primary);
+}
+
+/* Footer */
+.notebook-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.notebook-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.notebook-stat {
+  white-space: nowrap;
+}
+
+.notebook-stat-separator {
+  color: var(--color-text-tertiary);
+}
+
+.notebook-unsaved {
+  color: var(--color-state-warning);
+  font-weight: var(--font-weight-medium);
+}
+
+.notebook-saved {
+  color: var(--color-state-success);
+  font-weight: var(--font-weight-medium);
+  animation: fadeInOut 2s ease-in-out;
+}
+
+@keyframes fadeInOut {
+  0%, 100% {
+    opacity: 0;
+  }
+  10%, 90% {
+    opacity: 1;
+  }
+}
+
+.notebook-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.notebook-btn {
+  padding: 10px 20px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: none;
+  white-space: nowrap;
+}
+
+.notebook-btn-primary {
+  background: var(--color-action-blue);
+  color: white;
+}
+
+.notebook-btn-primary:hover:not(:disabled) {
+  background: #5aa3ff;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.notebook-btn-primary:disabled {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+.notebook-btn-secondary {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-secondary);
+}
+
+.notebook-btn-secondary:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-hover);
+}
+
+/* Help text */
+.notebook-help {
+  padding: 12px 24px;
+  background: var(--color-bg-tertiary);
+  border-top: 1px solid var(--color-border-primary);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.notebook-help-hint {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.notebook-help-hint kbd {
+  padding: 2px 6px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .notebook-modal {
+    max-width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .notebook-modal-backdrop {
+    padding: 0;
+  }
+
+  .notebook-header {
+    padding: 16px;
+  }
+
+  .notebook-title {
+    font-size: 20px;
+  }
+
+  .notebook-editor {
+    padding: 16px;
+  }
+
+  .notebook-footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .notebook-actions {
+    width: 100%;
+  }
+
+  .notebook-btn {
+    flex: 1;
+  }
+}
diff --git a/packages/web-vite/src/styles/ReaderPage.css b/packages/web-vite/src/styles/ReaderPage.css
index 3ba68ea68..1e12f5bea 100644
--- a/packages/web-vite/src/styles/ReaderPage.css
+++ b/packages/web-vite/src/styles/ReaderPage.css
@@ -325,6 +325,310 @@
   background: #5aa3ff;
 }
 
+/* Highlight Styles - 4-color system */
+.reader-content mark.highlight {
+  padding: 2px 0;
+  border-radius: 2px;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+/* Yellow highlight (default) */
+.reader-content mark.highlight-yellow {
+  background-color: rgba(255, 212, 59, 0.35);
+  border-bottom: 2px solid rgba(255, 212, 59, 0.6);
+}
+
+.reader-content mark.highlight-yellow:hover {
+  background-color: rgba(255, 212, 59, 0.5);
+  border-bottom-color: rgba(255, 212, 59, 0.8);
+}
+
+/* Red highlight (critical/important) */
+.reader-content mark.highlight-red {
+  background-color: rgba(255, 107, 107, 0.35);
+  border-bottom: 2px solid rgba(255, 107, 107, 0.6);
+}
+
+.reader-content mark.highlight-red:hover {
+  background-color: rgba(255, 107, 107, 0.5);
+  border-bottom-color: rgba(255, 107, 107, 0.8);
+}
+
+/* Green highlight (action items) */
+.reader-content mark.highlight-green {
+  background-color: rgba(85, 239, 196, 0.35);
+  border-bottom: 2px solid rgba(85, 239, 196, 0.6);
+}
+
+.reader-content mark.highlight-green:hover {
+  background-color: rgba(85, 239, 196, 0.5);
+  border-bottom-color: rgba(85, 239, 196, 0.8);
+}
+
+/* Blue highlight (reference/informational) */
+.reader-content mark.highlight-blue {
+  background-color: rgba(116, 185, 255, 0.35);
+  border-bottom: 2px solid rgba(116, 185, 255, 0.6);
+}
+
+.reader-content mark.highlight-blue:hover {
+  background-color: rgba(116, 185, 255, 0.5);
+  border-bottom-color: rgba(116, 185, 255, 0.8);
+}
+
+/* Flash animation for jump-to-highlight */
+@keyframes highlightFlash {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.02);
+  }
+}
+
+.reader-content mark.highlight-flash {
+  animation: highlightFlash 1s ease-in-out;
+}
+
+/* Create Highlight Popup */
+.create-highlight-popup {
+  position: absolute;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  width: 450px;
+  max-width: 90vw;
+  box-shadow: var(--shadow-lg);
+  z-index: 1001;
+  animation: slideDown 150ms ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin-bottom: 0;
+}
+
+.popup-title {
+  font-size: 14px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.popup-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.popup-close:hover {
+  color: var(--color-text-primary);
+}
+
+.color-picker {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+  height: auto;
+  min-height: fit-content;
+  margin: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  /* Fallback for older browsers that don't support gap */
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+}
+
+.color-button {
+  padding: 10px 12px;
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  min-height: 40px;
+  /* Ensure text doesn't wrap */
+  white-space: nowrap;
+}
+
+.color-button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.color-button.active {
+  border-color: var(--color-action-blue);
+  box-shadow: 0 0 0 2px rgba(116, 185, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.color-label {
+  color: var(--color-text-primary);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.add-note-button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin: 0;
+  background: transparent;
+  border: 1px dashed var(--color-border-primary);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.add-note-button:hover {
+  border-color: var(--color-action-blue);
+  color: var(--color-action-blue);
+  background: rgba(116, 185, 255, 0.05);
+}
+
+.annotation-input-container {
+  width: 100%;
+  margin: 0;
+  display: block;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  /* Ensure it doesn't overlap with color buttons */
+  clear: both;
+}
+
+.annotation-textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 80px;
+  box-sizing: border-box;
+}
+
+.annotation-textarea:focus {
+  outline: none;
+  border-color: var(--color-action-blue);
+  box-shadow: 0 0 0 2px rgba(116, 185, 255, 0.1);
+}
+
+.selected-text-preview {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  font-style: italic;
+  padding: 8px;
+  margin: 0;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  line-height: 1.4;
+}
+
+.save-highlight-button {
+  width: 100%;
+  padding: 10px 16px;
+  margin: 0;
+  background: var(--color-action-blue);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.save-highlight-button:hover {
+  background: #5aa3ff;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.save-highlight-button:active {
+  transform: translateY(0);
+}
+
+/* Highlight tooltip for annotations */
+.highlight-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  padding: 12px 16px;
+  max-width: 300px;
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-primary);
+}
+
+.highlight-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.highlight-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--color-bg-elevated);
+}
+
+.highlight-tooltip-annotation {
+  margin: 0;
+  word-wrap: break-word;
+}
+
+.highlight-tooltip-empty {
+  color: var(--color-text-tertiary);
+  font-style: italic;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .reader-page {
@@ -342,6 +646,13 @@
   .reader-content h1 { font-size: 1.75em; }
   .reader-content h2 { font-size: 1.4em; }
   .reader-content h3 { font-size: 1.2em; }
+
+  /* Adjust highlight tooltip for mobile */
+  .highlight-tooltip {
+    max-width: 250px;
+    font-size: 13px;
+    padding: 10px 12px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -353,4 +664,10 @@
     font-size: 13px;
     padding: 6px 12px;
   }
+
+  /* Stack tooltip above on very small screens */
+  .highlight-tooltip {
+    max-width: 200px;
+    font-size: 12px;
+  }
 }
diff --git a/packages/web-vite/src/styles/index.css b/packages/web-vite/src/styles/index.css
new file mode 100644
index 000000000..aef049dad
--- /dev/null
+++ b/packages/web-vite/src/styles/index.css
@@ -0,0 +1,30 @@
+/*
+ * Consolidated CSS Bundle for Omnivore Vite App
+ * This file imports all CSS in dependency order to reduce HTTP requests
+ * Vite will automatically code-split this based on route usage
+ */
+
+/* Design tokens must be loaded first */
+@import './design-tokens.css';
+
+/* Core component styles */
+@import './LeftNavigation.css';
+@import './LibraryPage.css';
+@import './LibraryGrid.css';
+@import './LibraryList.css';
+@import './LibraryCard.css';
+@import './CardSkeleton.css';
+@import './FlairBadge.css';
+@import './MultiSelectActionBar.css';
+
+/* Modal and overlay components */
+@import './LabelPicker.css';
+@import './LabelPickerModal.css';
+@import './AddLinkModal.css';
+@import './EditInfoModal.css';
+@import './NotebookModal.css';
+
+/* Page-specific styles */
+@import './ReaderPage.css';
+@import './HighlightSidebar.css';
+@import './LabelsPage.css';
diff --git a/packages/web-vite/src/test/setup.ts b/packages/web-vite/src/test/setup.ts
index 910a5c518..5bbca3abb 100644
--- a/packages/web-vite/src/test/setup.ts
+++ b/packages/web-vite/src/test/setup.ts
@@ -2,9 +2,10 @@
 // Global test configuration and mocks
 
 import '@testing-library/jest-dom'
-import { expect, afterEach, vi } from 'vitest'
-import { cleanup } from '@testing-library/react'
+
 import * as matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { afterEach, expect, vi } from 'vitest'
 
 // Extend Vitest's expect with jest-dom matchers
 expect.extend(matchers)
diff --git a/packages/web-vite/src/test/utils.tsx b/packages/web-vite/src/test/utils.tsx
index 4e8007789..81023077d 100644
--- a/packages/web-vite/src/test/utils.tsx
+++ b/packages/web-vite/src/test/utils.tsx
@@ -1,9 +1,9 @@
 // Test utilities for Omnivore Vite migration
 // Reusable test helpers and mocks
 
-import { render, type RenderOptions } from '@testing-library/react'
-import { BrowserRouter } from 'react-router-dom'
+import { type RenderOptions, render } from '@testing-library/react'
 import type { ReactElement, ReactNode } from 'react'
+import { BrowserRouter } from 'react-router-dom'
 
 // Custom render function with providers
 const AllTheProviders = ({ children }: { children: any }) => {
diff --git a/packages/web-vite/src/types/api.ts b/packages/web-vite/src/types/api.ts
index 46e9d4dc7..dbca8f054 100644
--- a/packages/web-vite/src/types/api.ts
+++ b/packages/web-vite/src/types/api.ts
@@ -61,7 +61,8 @@ export interface RegisterSuccessWithLoginResponse extends AuthBaseResponse {
   expiresIn: string
 }
 
-export interface RegisterSuccessWithVerificationResponse extends AuthBaseResponse {
+export interface RegisterSuccessWithVerificationResponse
+  extends AuthBaseResponse {
   success: true
   pendingEmailVerification: true
 }
@@ -71,10 +72,7 @@ export type RegisterResponse =
   | RegisterSuccessWithVerificationResponse
   | LoginErrorResponse
 
-export type AuthStatus =
-  | 'AUTHENTICATED'
-  | 'NOT_AUTHENTICATED'
-  | 'PENDING_USER'
+export type AuthStatus = 'AUTHENTICATED' | 'NOT_AUTHENTICATED' | 'PENDING_USER'
 
 export interface VerifyAuthResponse {
   authStatus: AuthStatus
@@ -116,7 +114,8 @@ export interface Article {
   publishedAt?: string
   savedAt: string
   readAt?: string
-  readingProgress?: number
+  readingProgress?: number // Deprecated: use readingProgressPercent
+  readingProgressPercent?: number | null // Reading progress 0-100 based on sentinels
   state: 'UNREAD' | 'READING' | 'READ' | 'ARCHIVED'
   labels?: Label[]
   highlights?: Highlight[]
@@ -138,15 +137,54 @@ export interface Label {
   internal?: boolean // true for system labels (Flair), false for user tags
 }
 
+// Highlight anchoring types for robust text positioning
+export type HighlightColor = 'YELLOW' | 'RED' | 'GREEN' | 'BLUE'
+
+export interface AnchorDomRange {
+  startPath: string
+  startOffset: number
+  endPath: string
+  endOffset: number
+}
+
+export interface AnchorTextPosition {
+  start: number
+  end: number
+  version?: string
+}
+
+export interface AnchorTextQuote {
+  exact: string
+  prefix?: string
+  suffix?: string
+}
+
+export interface AnchoredSelectors {
+  domRange?: AnchorDomRange
+  textPosition?: AnchorTextPosition
+  textQuote?: AnchorTextQuote
+}
+
 export interface Highlight {
   id: string
-  text: string
-  position: number
+  quote: string // The highlighted text
+  annotation?: string | null
+  color: HighlightColor
+  highlightPositionPercent: number
+  highlightPositionAnchorIndex: number
+  prefix?: string | null
+  suffix?: string | null
   createdAt: string
   updatedAt: string
-  note?: string
+  // New: Anchored selectors for robust positioning
+  selectors?: AnchoredSelectors
 }
 
+export type HighlightLike = Pick<
+  Highlight,
+  'id' | 'color' | 'annotation' | 'selectors' | 'quote' | 'prefix' | 'suffix'
+>
+
 export interface PaginatedResponse<T> {
   items: T[]
   totalCount: number
@@ -198,8 +236,11 @@ export interface LibraryItem {
   siteName?: string | null
   siteIcon?: string | null
   itemType: string
-  readingProgressTopPercent?: number | null
-  readingProgressBottomPercent?: number | null
+  // ARC-010: Notebook feature
+  note?: string | null
+  noteUpdatedAt?: string | null
+  // Sentinel-based reading progress percentage (0-100)
+  readingProgressPercent?: number | null
 }
 
 export interface DeleteResult {
@@ -270,3 +311,22 @@ export interface ValidationResult {
   isValid: boolean
   errors: FormError[]
 }
+
+// Library search sort options
+export type LibrarySortBy =
+  | 'SAVED_AT'
+  | 'UPDATED_AT'
+  | 'PUBLISHED_AT'
+  | 'TITLE'
+  | 'AUTHOR'
+
+export type LibrarySortOrder = 'ASC' | 'DESC'
+
+export interface LibrarySearchInput {
+  query?: string
+  folder?: string
+  labels?: string[]
+  sortBy?: LibrarySortBy
+  sortOrder?: LibrarySortOrder
+  state?: LibraryItemState
+}
diff --git a/packages/web-vite/vite.config.ts b/packages/web-vite/vite.config.ts
index 98d5335b2..746bb7f5f 100644
--- a/packages/web-vite/vite.config.ts
+++ b/packages/web-vite/vite.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -13,6 +13,14 @@ export default defineConfig({
         secure: false,
       },
     },
+    // Optimize dev server performance
+    hmr: {
+      overlay: true,
+    },
+    watch: {
+      // Reduce CPU usage by ignoring large directories
+      ignored: ['**/node_modules/**', '**/dist/**'],
+    },
   },
   resolve: {
     alias: {
@@ -21,6 +29,88 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    include: ['react', 'react-dom'],
+    include: ['react', 'react-dom', 'react-router-dom', 'dompurify'],
+  },
+  // Build optimization (affects both dev and prod)
+  build: {
+    // Reduce chunk size warnings threshold
+    chunkSizeWarningLimit: 1000,
+    // Enable minification for better compression
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+    rollupOptions: {
+      output: {
+        // Advanced code splitting strategy
+        manualChunks(id) {
+          // React vendor bundle
+          if (
+            id.includes('node_modules/react/') ||
+            id.includes('node_modules/react-dom/') ||
+            id.includes('node_modules/react-router/')
+          ) {
+            return 'react-vendor'
+          }
+          // DOMPurify for security (used in ReaderPage)
+          if (id.includes('node_modules/dompurify/')) {
+            return 'security'
+          }
+          // GraphQL client and utilities
+          if (
+            id.includes('src/lib/graphql-client') ||
+            id.includes('src/lib/contentHash') ||
+            id.includes('src/lib/anchoredHighlights')
+          ) {
+            return 'api-utils'
+          }
+          // Component chunks by feature
+          if (id.includes('src/pages/ReaderPage')) {
+            return 'reader'
+          }
+          if (id.includes('src/pages/LibraryPage')) {
+            return 'library'
+          }
+          if (id.includes('src/pages/LabelsPage')) {
+            return 'labels'
+          }
+          // Modal components (lazy loaded)
+          if (
+            id.includes('src/components/') &&
+            (id.includes('Modal') || id.includes('Sidebar'))
+          ) {
+            return 'modals'
+          }
+        },
+        // Optimize chunk file names for caching
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        assetFileNames: (assetInfo) => {
+          // Organize assets by type
+          const info = assetInfo.name?.split('.') || []
+          const ext = info[info.length - 1]
+          if (/css/i.test(ext)) {
+            return 'assets/css/[name]-[hash][extname]'
+          }
+          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(ext)) {
+            return 'assets/images/[name]-[hash][extname]'
+          }
+          if (/woff2?|eot|ttf|otf/i.test(ext)) {
+            return 'assets/fonts/[name]-[hash][extname]'
+          }
+          
+          return 'assets/[name]-[hash][extname]'
+        },
+      },
+    },
+    // Increase chunk size limit for better compression
+    cssCodeSplit: true, // Enable CSS code splitting per route
+  },
+  // CSS optimization
+  css: {
+    devSourcemap: true,
   },
 })
diff --git a/packages/web-vite/vitest.config.ts b/packages/web-vite/vitest.config.ts
index c55252edd..e02d946ef 100644
--- a/packages/web-vite/vitest.config.ts
+++ b/packages/web-vite/vitest.config.ts
@@ -1,9 +1,9 @@
 // Vitest configuration for Omnivore Vite migration
 // Comprehensive testing setup with coverage
 
-import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [react()],
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index 83e006e13..3a1ddd898 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -142,7 +142,11 @@ const IconButton = styled(Button, {
 const Input = styled('input', { ...inputStyles })
 
 const TextArea = styled('textarea', { ...inputStyles })
-
+/**
+ * Renders a labels management page allowing users to create, edit, search, and delete labels.
+ * Includes CRUD operations, search functionality, and dropdown menus for label actions.
+ * System labels (internal=true) cannot be edited or deleted.
++ */
 export default function LabelsPage(): JSX.Element {
   const { data: labels, isLoading } = useGetLabels()
   const createLabel = useCreateLabel()
@@ -155,8 +159,9 @@ export default function LabelsPage(): JSX.Element {
   const [descriptionInputText, setDescriptionInputText] = useState<string>('')
   const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
   const [windowWidth, setWindowWidth] = useState<number>(0)
-  const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
-    useState<string | null>(null)
+  const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
+    string | null
+  >(null)
   const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState<boolean>({
     key: `--settings-labels-show-help`,
     initialValue: true,
@@ -170,7 +175,7 @@ export default function LabelsPage(): JSX.Element {
       return []
     }
     return labels.sort((left: Label, right: Label) =>
-      left.name.localeCompare(right.name)
+      left.name.localeCompare(right.name),
     )
   }, [labels])
 
@@ -216,7 +221,6 @@ export default function LabelsPage(): JSX.Element {
         description: descriptionInputText,
       })
     } catch (err) {
-      console.log('error updating label: ', err)
       showErrorToast('Failed to update label')
       return
     }
@@ -251,7 +255,7 @@ export default function LabelsPage(): JSX.Element {
   const handleGenerateRandomColor = (rowId?: string) => {
     const colorHexes = Object.keys(labelColorObjects).slice(
       0,
-      -1
+      -1,
     ) as LabelColor[]
     const randomColorHex =
       colorHexes[Math.floor(Math.random() * colorHexes.length)]
@@ -449,7 +453,7 @@ function GenericTableCard(
   props: GenericTableCardProps & {
     isLastChild?: boolean
     isFirstChild?: boolean
-  }
+  },
 ) {
   const {
     label,
@@ -776,7 +780,12 @@ function GenericTableCard(
   )
 }
 
-function MobileEditCard(props: any) {
+function MobileEditCard(
+  props: GenericTableCardProps & {
+    isLastChild?: boolean
+    isFirstChild?: boolean
+  },
+) {
   const {
     label,
     editingLabelId,
@@ -861,7 +870,12 @@ function MobileEditCard(props: any) {
   )
 }
 
-function DesktopEditCard(props: any) {
+function DesktopEditCard(
+  props: GenericTableCardProps & {
+    isLastChild?: boolean
+    isFirstChild?: boolean
+  },
+) {
   const {
     label,
     editingLabelId,
diff --git a/scripts/deploy.sh b/scripts/deploy.sh
deleted file mode 100755
index 58ac3eb69..000000000
--- a/scripts/deploy.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/bash
-
-set -e
-
-cd ~/projects/omnivore
-
-echo "[*] Pulling latest code from main..."
-git pull origin main
-
-echo "[*] Rebuilding services..."
-docker-compose down
-docker-compose pull
-docker-compose up -d
-
-echo "[✓] Deployment completed."
diff --git a/scripts/hooks.json b/scripts/hooks.json
deleted file mode 100644
index 526ae5a19..000000000
--- a/scripts/hooks.json
+++ /dev/null
@@ -1,17 +0,0 @@
-[
-  {
-    "id": "deploy",
-    "execute-command": "~/projects/omnivore/scripts/deploy.sh",
-    "command-working-directory": "~/projects/omnivore",
-    "trigger-rule": {
-      "match": {
-        "type": "payload-hash-sha1",
-        "secret": "webhooksecret",
-        "parameter": {
-          "source": "header",
-          "name": "X-Hub-Signature"
-        }
-      }
-    }
-  }
-]
diff --git a/yarn.lock b/yarn.lock
index def5d1d5a..a94ed3d56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2220,13 +2220,6 @@
     pirates "^4.0.6"
     source-map-support "^0.5.16"
 
-"@babel/runtime-corejs3@^7.9.2":
-  version "7.28.2"
-  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.28.2.tgz"
-  integrity sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ==
-  dependencies:
-    core-js-pure "^3.43.0"
-
 "@babel/runtime@7.7.2":
   version "7.7.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz"
@@ -2374,6 +2367,164 @@
   resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz"
   integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
 
+"@commitlint/cli@^18.4.3":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-18.6.1.tgz#78bffdfa00d6f01425d53096954993d83f2b343d"
+  integrity sha512-5IDE0a+lWGdkOvKH892HHAZgbAjcj1mT5QrfA/SVbLJV/BbBMGyKN0W5mhgjekPJJwEQdVNvhl9PwUacY58Usw==
+  dependencies:
+    "@commitlint/format" "^18.6.1"
+    "@commitlint/lint" "^18.6.1"
+    "@commitlint/load" "^18.6.1"
+    "@commitlint/read" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+    execa "^5.0.0"
+    lodash.isfunction "^3.0.9"
+    resolve-from "5.0.0"
+    resolve-global "1.0.0"
+    yargs "^17.0.0"
+
+"@commitlint/config-conventional@^18.4.3":
+  version "18.6.3"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-18.6.3.tgz#1b2740dbe325d76e05924c46bc1504340b701ca1"
+  integrity sha512-8ZrRHqF6je+TRaFoJVwszwnOXb/VeYrPmTwPhf0WxpzpGTcYy1p0SPyZ2eRn/sRi/obnWAcobtDAq6+gJQQNhQ==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    conventional-changelog-conventionalcommits "^7.0.2"
+
+"@commitlint/config-validator@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-validator/-/config-validator-18.6.1.tgz#e0d71a99c984a68586c7ae7afd3f52342022fae8"
+  integrity sha512-05uiToBVfPhepcQWE1ZQBR/Io3+tb3gEotZjnI4tTzzPk16NffN6YABgwFQCLmzZefbDcmwWqJWc2XT47q7Znw==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    ajv "^8.11.0"
+
+"@commitlint/ensure@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/ensure/-/ensure-18.6.1.tgz#17141e083200ca94d8480dc23b0e8f8b1fd37b7f"
+  integrity sha512-BPm6+SspyxQ7ZTsZwXc7TRQL5kh5YWt3euKmEIBZnocMFkJevqs3fbLRb8+8I/cfbVcAo4mxRlpTPfz8zX7SnQ==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    lodash.camelcase "^4.3.0"
+    lodash.kebabcase "^4.1.1"
+    lodash.snakecase "^4.1.1"
+    lodash.startcase "^4.4.0"
+    lodash.upperfirst "^4.3.1"
+
+"@commitlint/execute-rule@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-18.6.1.tgz#18175e043fe6fb5fceea7b8530316c644f93dfe6"
+  integrity sha512-7s37a+iWyJiGUeMFF6qBlyZciUkF8odSAnHijbD36YDctLhGKoYltdvuJ/AFfRm6cBLRtRk9cCVPdsEFtt/2rg==
+
+"@commitlint/format@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-18.6.1.tgz#5f2b8b3ae4d8d80bd9239178e97df63e5b8d280a"
+  integrity sha512-K8mNcfU/JEFCharj2xVjxGSF+My+FbUHoqR+4GqPGrHNqXOGNio47ziiR4HQUPKtiNs05o8/WyLBoIpMVOP7wg==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    chalk "^4.1.0"
+
+"@commitlint/is-ignored@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-18.6.1.tgz#4ee08ba91ff3defb06e0ef19259a9c6734a8d06e"
+  integrity sha512-MOfJjkEJj/wOaPBw5jFjTtfnx72RGwqYIROABudOtJKW7isVjFe9j0t8xhceA02QebtYf4P/zea4HIwnXg8rvA==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    semver "7.6.0"
+
+"@commitlint/lint@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-18.6.1.tgz#fe3834636c99ee14534a8eb3832831ac362e9fd8"
+  integrity sha512-8WwIFo3jAuU+h1PkYe5SfnIOzp+TtBHpFr4S8oJWhu44IWKuVx6GOPux3+9H1iHOan/rGBaiacicZkMZuluhfQ==
+  dependencies:
+    "@commitlint/is-ignored" "^18.6.1"
+    "@commitlint/parse" "^18.6.1"
+    "@commitlint/rules" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+
+"@commitlint/load@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-18.6.1.tgz#fb79ed7ee8b5897a9b5c274c1e24eda9162df816"
+  integrity sha512-p26x8734tSXUHoAw0ERIiHyW4RaI4Bj99D8YgUlVV9SedLf8hlWAfyIFhHRIhfPngLlCe0QYOdRKYFt8gy56TA==
+  dependencies:
+    "@commitlint/config-validator" "^18.6.1"
+    "@commitlint/execute-rule" "^18.6.1"
+    "@commitlint/resolve-extends" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+    chalk "^4.1.0"
+    cosmiconfig "^8.3.6"
+    cosmiconfig-typescript-loader "^5.0.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    lodash.uniq "^4.5.0"
+    resolve-from "^5.0.0"
+
+"@commitlint/message@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/message/-/message-18.6.1.tgz#107bd40923ad23d2de56c92a68b179ebfb7e314e"
+  integrity sha512-VKC10UTMLcpVjMIaHHsY1KwhuTQtdIKPkIdVEwWV+YuzKkzhlI3aNy6oo1eAN6b/D2LTtZkJe2enHmX0corYRw==
+
+"@commitlint/parse@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/parse/-/parse-18.6.1.tgz#2946b814125e907b9c4d63d3e71d0c1b54b30b62"
+  integrity sha512-eS/3GREtvVJqGZrwAGRwR9Gdno3YcZ6Xvuaa+vUF8j++wsmxrA2En3n0ccfVO2qVOLJC41ni7jSZhQiJpMPGOQ==
+  dependencies:
+    "@commitlint/types" "^18.6.1"
+    conventional-changelog-angular "^7.0.0"
+    conventional-commits-parser "^5.0.0"
+
+"@commitlint/read@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/read/-/read-18.6.1.tgz#8c138311ed9749427920c369f6276be136f2aa50"
+  integrity sha512-ia6ODaQFzXrVul07ffSgbZGFajpe8xhnDeLIprLeyfz3ivQU1dIoHp7yz0QIorZ6yuf4nlzg4ZUkluDrGN/J/w==
+  dependencies:
+    "@commitlint/top-level" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+    git-raw-commits "^2.0.11"
+    minimist "^1.2.6"
+
+"@commitlint/resolve-extends@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-18.6.1.tgz#f0572c682fc24dbabe2e0f42873261e0fa42c91a"
+  integrity sha512-ifRAQtHwK+Gj3Bxj/5chhc4L2LIc3s30lpsyW67yyjsETR6ctHAHRu1FSpt0KqahK5xESqoJ92v6XxoDRtjwEQ==
+  dependencies:
+    "@commitlint/config-validator" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+    import-fresh "^3.0.0"
+    lodash.mergewith "^4.6.2"
+    resolve-from "^5.0.0"
+    resolve-global "^1.0.0"
+
+"@commitlint/rules@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-18.6.1.tgz#da25aeffe6c0e1c7625e44f46089fb8860986caf"
+  integrity sha512-kguM6HxZDtz60v/zQYOe0voAtTdGybWXefA1iidjWYmyUUspO1zBPQEmJZ05/plIAqCVyNUTAiRPWIBKLCrGew==
+  dependencies:
+    "@commitlint/ensure" "^18.6.1"
+    "@commitlint/message" "^18.6.1"
+    "@commitlint/to-lines" "^18.6.1"
+    "@commitlint/types" "^18.6.1"
+    execa "^5.0.0"
+
+"@commitlint/to-lines@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/to-lines/-/to-lines-18.6.1.tgz#d28827a4a540c98eea1aae31dafd66f80b2f1b9e"
+  integrity sha512-Gl+orGBxYSNphx1+83GYeNy5N0dQsHBQ9PJMriaLQDB51UQHCVLBT/HBdOx5VaYksivSf5Os55TLePbRLlW50Q==
+
+"@commitlint/top-level@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/top-level/-/top-level-18.6.1.tgz#429fcb985e3beaba9b17e05c0ae61926c647baf0"
+  integrity sha512-HyiHQZUTf0+r0goTCDs/bbVv/LiiQ7AVtz6KIar+8ZrseB9+YJAIo8HQ2IC2QT1y3N1lbW6OqVEsTHjbT6hGSw==
+  dependencies:
+    find-up "^5.0.0"
+
+"@commitlint/types@^18.6.1":
+  version "18.6.1"
+  resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-18.6.1.tgz#7eb3ab2d799d9166fbb98b96b0744581e59a4ad4"
+  integrity sha512-gwRLBLra/Dozj2OywopeuHj2ac26gjGkz2cZ+86cTJOdtWfiRRr4+e77ZDAGc6MDWxaWheI+mAV5TLWWRwqrFg==
+  dependencies:
+    chalk "^4.1.0"
+
 "@cospired/i18n-iso-languages@^4.2.0":
   version "4.2.0"
   resolved "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-4.2.0.tgz"
@@ -3694,6 +3845,19 @@
     chardet "^2.1.0"
     iconv-lite "^0.6.3"
 
+"@inquirer/external-editor@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/external-editor/-/external-editor-1.0.2.tgz#dc16e7064c46c53be09918db639ff780718c071a"
+  integrity sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==
+  dependencies:
+    chardet "^2.1.0"
+    iconv-lite "^0.7.0"
+
+"@inquirer/figures@^1.0.3":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.14.tgz#12a7bfd344a83ae6cc5d6004b389ed11f6db6be4"
+  integrity sha512-DbFgdt+9/OZYFM+19dbpXOSeAstPy884FPy1KjDu4anWwymZeOYhMY1mdFri172htv6mvc/uvIAAi7b7tvjJBQ==
+
 "@ioredis/commands@^1.3.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.3.0.tgz"
@@ -9551,13 +9715,13 @@
   dependencies:
     "@types/node" "*"
 
-"@types/inquirer@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@types/inquirer/-/inquirer-6.5.0.tgz"
-  integrity sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==
+"@types/inquirer@^9.0.9":
+  version "9.0.9"
+  resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-9.0.9.tgz#c659dffbb8c2dab112324c7ae19b3303a972a96d"
+  integrity sha512-/mWx5136gts2Z2e5izdoRCo46lPp5TMs9R15GTSsgg/XnZyxDWVqoVU3R9lWnccKpqwsJLvRoxbCjoJtZB7DSw==
   dependencies:
     "@types/through" "*"
-    rxjs "^6.4.0"
+    rxjs "^7.2.0"
 
 "@types/intercom-client@^3.0.0":
   version "3.0.0"
@@ -9566,13 +9730,6 @@
   dependencies:
     intercom-client "*"
 
-"@types/interpret@*":
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/@types/interpret/-/interpret-1.1.3.tgz"
-  integrity sha512-uBaBhj/BhilG58r64mtDb/BEdH51HIQLgP5bmWzc5qCtFMja8dCk/IOJmk36j0lbi9QHwI6sbtUNGuqXdKCAtQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/is-function@^1.0.0":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.3.tgz"
@@ -9690,13 +9847,12 @@
   resolved "https://registry.npmjs.org/@types/jwk-to-pem/-/jwk-to-pem-2.0.3.tgz"
   integrity sha512-I/WFyFgk5GrNbkpmt14auGO3yFK1Wt4jXzkLuI+fDBNtO5ZI2rbymyGd6bKzfSBEuyRdM64ZUwxU1+eDcPSOEQ==
 
-"@types/liftoff@^2.5.1":
-  version "2.5.1"
-  resolved "https://registry.npmjs.org/@types/liftoff/-/liftoff-2.5.1.tgz"
-  integrity sha512-nB3R6Q9CZcM07JgiTK6ibxqrG1reiHE+UX7em/W1DKwVBxDlfKWOefQjk4jubY5xX+GDxVsWR2KD1SenPby8ow==
+"@types/liftoff@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/liftoff/-/liftoff-4.0.3.tgz#ebac04d98b65e0aeff7cc31655cb6d060a3d8146"
+  integrity sha512-UgbL2kR5pLrWICvr8+fuSg0u43LY250q7ZMkC+XKC3E+rs/YBDEnQIzsnhU5dYsLlwMi3R75UvCL87pObP1sxw==
   dependencies:
     "@types/fined" "*"
-    "@types/interpret" "*"
     "@types/node" "*"
 
 "@types/linkify-it@*":
@@ -9781,7 +9937,7 @@
   resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz"
   integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==
 
-"@types/minimatch@*":
+"@types/minimatch@*", "@types/minimatch@^6.0.0":
   version "6.0.0"
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-6.0.0.tgz"
   integrity sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==
@@ -9897,6 +10053,13 @@
   dependencies:
     undici-types "~6.21.0"
 
+"@types/node@^24.9.2":
+  version "24.9.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-24.9.2.tgz#90ded2422dbfcafcf72080f28975adc21366148d"
+  integrity sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==
+  dependencies:
+    undici-types "~7.16.0"
+
 "@types/nodemailer@^6.4.17":
   version "6.4.17"
   resolved "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.17.tgz"
@@ -10021,6 +10184,11 @@
     pg-protocol "*"
     pg-types "^2.2.0"
 
+"@types/picomatch@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-4.0.2.tgz#85a232bafed4121527cbf70c0ef461b46b2cc10b"
+  integrity sha512-qHHxQ+P9PysNEGbALT8f8YOSHW0KJu6l2xU8DYY0fu/EmGxXdVnuTLvFUvBgPJMSqXq29SYHveejeAha+4AYgA==
+
 "@types/prettier@^2.1.5":
   version "2.7.3"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz"
@@ -11647,6 +11815,13 @@ ansi-escapes@^6.2.0:
   resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.1.tgz"
   integrity sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==
 
+ansi-escapes@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-7.1.1.tgz#fdd39427a7e5a26233e48a8b4366351629ffea1b"
+  integrity sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==
+  dependencies:
+    environment "^1.0.0"
+
 ansi-html-community@0.0.8, ansi-html-community@^0.0.8:
   version "0.0.8"
   resolved "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
@@ -11667,11 +11842,6 @@ ansi-regex@^3.0.0:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz"
   integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
 
-ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@@ -11682,11 +11852,6 @@ ansi-regex@^6.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz"
   integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
-  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -11711,6 +11876,11 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+ansi-styles@^6.2.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
 ansi-to-html@^0.6.11:
   version "0.6.15"
   resolved "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.15.tgz"
@@ -13537,14 +13707,6 @@ callsites@^4.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-4.2.0.tgz"
   integrity sha512-kfzR4zzQtAE9PC7CzZsjl3aBNbXWuXiSeOCdLcPpBfGW8YuCqQHcRPFDbr/BPVmd3EEPVpuFzLyuT/cUhPr4OQ==
 
-camel-case@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz"
-  integrity sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
 camel-case@^4.1.1, camel-case@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz"
@@ -13738,18 +13900,7 @@ chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
-  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^2.0.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.3.2, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -13763,9 +13914,9 @@ chalk@^5.0.1, chalk@^5.2.0:
   resolved "https://registry.npmjs.org/chalk/-/chalk-5.5.0.tgz"
   integrity sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==
 
-chalk@^5.3.0:
+chalk@^5.3.0, chalk@^5.4.1:
   version "5.6.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.6.2.tgz#b1238b6e23ea337af71c7f8a295db5af0c158aea"
   integrity sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
 
 change-case-all@1.0.15:
@@ -13784,30 +13935,6 @@ change-case-all@1.0.15:
     upper-case "^2.0.2"
     upper-case-first "^2.0.2"
 
-change-case@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/change-case/-/change-case-3.1.0.tgz"
-  integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==
-  dependencies:
-    camel-case "^3.0.0"
-    constant-case "^2.0.0"
-    dot-case "^2.1.0"
-    header-case "^1.0.0"
-    is-lower-case "^1.1.0"
-    is-upper-case "^1.1.0"
-    lower-case "^1.1.1"
-    lower-case-first "^1.0.0"
-    no-case "^2.3.2"
-    param-case "^2.1.0"
-    pascal-case "^2.0.0"
-    path-case "^2.1.0"
-    sentence-case "^2.1.0"
-    snake-case "^2.1.0"
-    swap-case "^1.1.0"
-    title-case "^2.1.0"
-    upper-case "^1.1.1"
-    upper-case-first "^1.1.0"
-
 change-case@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz"
@@ -13826,6 +13953,11 @@ change-case@^4.1.2:
     snake-case "^3.0.4"
     tslib "^2.0.3"
 
+change-case@^5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-5.4.4.tgz#0d52b507d8fb8f204343432381d1a6d7bff97a02"
+  integrity sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
@@ -14117,19 +14249,19 @@ cli-cursor@3.1.0, cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz"
-  integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
+cli-cursor@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
+  integrity sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
   dependencies:
-    restore-cursor "^2.0.0"
+    restore-cursor "^5.0.0"
 
 cli-spinners@2.6.1:
   version "2.6.1"
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz"
   integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==
 
-cli-spinners@^2.0.0, cli-spinners@^2.5.0:
+cli-spinners@^2.5.0:
   version "2.9.2"
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz"
   integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
@@ -14159,6 +14291,14 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^7.0.0"
+
 cli-width@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz"
@@ -14348,7 +14488,7 @@ colorette@^1.2.2:
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
-colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.16:
+colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.16, colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
@@ -14396,6 +14536,11 @@ commander@^10.0.0:
   resolved "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
+commander@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-13.1.0.tgz#776167db68c78f38dcce1f9b8d7b8b9a488abf46"
+  integrity sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==
+
 commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
@@ -14590,14 +14735,6 @@ console-table-printer@^2.12.1:
   dependencies:
     simple-wcswidth "^1.0.1"
 
-constant-case@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz"
-  integrity sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==
-  dependencies:
-    snake-case "^2.1.0"
-    upper-case "^1.1.1"
-
 constant-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz"
@@ -14631,9 +14768,9 @@ content-type@^1.0.5, content-type@~1.0.4, content-type@~1.0.5:
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
-conventional-changelog-angular@7.0.0:
+conventional-changelog-angular@7.0.0, conventional-changelog-angular@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz#5eec8edbff15aa9b1680a8dcfbd53e2d7eb2ba7a"
   integrity sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==
   dependencies:
     compare-func "^2.0.0"
@@ -14646,6 +14783,13 @@ conventional-changelog-angular@^5.0.0:
     compare-func "^2.0.0"
     q "^1.5.1"
 
+conventional-changelog-conventionalcommits@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-7.0.2.tgz#aa5da0f1b2543094889e8cf7616ebe1a8f5c70d5"
+  integrity sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==
+  dependencies:
+    compare-func "^2.0.0"
+
 conventional-changelog-core@5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-5.0.1.tgz"
@@ -14734,6 +14878,16 @@ conventional-commits-parser@^4.0.0:
     meow "^8.1.2"
     split2 "^3.2.2"
 
+conventional-commits-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz#57f3594b81ad54d40c1b4280f04554df28627d9a"
+  integrity sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==
+  dependencies:
+    JSONStream "^1.3.5"
+    is-text-path "^2.0.0"
+    meow "^12.0.1"
+    split2 "^4.0.0"
+
 conventional-recommended-bump@7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-7.0.1.tgz"
@@ -14836,7 +14990,7 @@ core-js-compat@^3.43.0, core-js-compat@^3.8.1:
   dependencies:
     browserslist "^4.25.1"
 
-core-js-pure@^3.23.3, core-js-pure@^3.43.0:
+core-js-pure@^3.23.3:
   version "3.45.0"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.45.0.tgz"
   integrity sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==
@@ -14869,6 +15023,13 @@ cosmiconfig-typescript-loader@^4.3.0:
   resolved "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-4.4.0.tgz"
   integrity sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==
 
+cosmiconfig-typescript-loader@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-5.1.0.tgz#d8d02bff04e63faa2dc794d618168bd764c704be"
+  integrity sha512-7PtBB+6FdsOvZyJtlF3hEPpACq7RQX6BVGsgC7/lfVXnKMvNCu/XY3ykreqG5w/rBNdu2z8LCIKoF3kpHHdHlA==
+  dependencies:
+    jiti "^1.21.6"
+
 cosmiconfig@8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.0.0.tgz"
@@ -14901,9 +15062,9 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmiconfig@^8.0.0, cosmiconfig@^8.2.0:
+cosmiconfig@^8.0.0, cosmiconfig@^8.2.0, cosmiconfig@^8.3.6:
   version "8.3.6"
-  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
   integrity sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==
   dependencies:
     import-fresh "^3.3.0"
@@ -15678,20 +15839,6 @@ del-cli@^4.0.1:
     del "^6.0.0"
     meow "^10.1.0"
 
-del@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/del/-/del-5.1.0.tgz"
-  integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
-  dependencies:
-    globby "^10.0.1"
-    graceful-fs "^4.2.2"
-    is-glob "^4.0.1"
-    is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.1"
-    p-map "^3.0.0"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-
 del@^6.0.0, del@^6.1.1:
   version "6.1.1"
   resolved "https://registry.npmjs.org/del/-/del-6.1.1.tgz"
@@ -15902,6 +16049,11 @@ discontinuous-range@1.0.0:
   resolved "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz"
   integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dnd-core@14.0.1:
   version "14.0.1"
   resolved "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz"
@@ -16080,13 +16232,6 @@ domutils@^3.0.1, domutils@^3.1.0, domutils@^3.2.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
-dot-case@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz"
-  integrity sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==
-  dependencies:
-    no-case "^2.2.0"
-
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
@@ -16274,6 +16419,11 @@ emittery@^0.8.1:
   resolved "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
+emoji-regex@^10.3.0:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
+  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -16394,6 +16544,11 @@ envinfo@7.8.1, envinfo@^7.7.3:
   resolved "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
+environment@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
+  integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
+
 epubjs@^0.3.93:
   version "0.3.93"
   resolved "https://registry.npmjs.org/epubjs/-/epubjs-0.3.93.tgz"
@@ -16687,7 +16842,7 @@ escape-string-regexp@5.0.0, escape-string-regexp@^5.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
@@ -16898,6 +17053,11 @@ eslint-plugin-react@^7.27.0, eslint-plugin-react@^7.28.0, eslint-plugin-react@^7
     string.prototype.matchall "^4.0.12"
     string.prototype.repeat "^1.0.0"
 
+eslint-plugin-simple-import-sort@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz#a1dad262f46d2184a90095a60c66fef74727f0f8"
+  integrity sha512-U3vEDB5zhYPNfxT5TYR7u01dboFZp+HNpnGhkDB2g/2E4wZ/g1Q9Ton8UwCLfRV9yAKyYqDh62oHOamvkFxsvw==
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
@@ -17141,9 +17301,9 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-eventemitter3@^5.0.0:
+eventemitter3@^5.0.0, eventemitter3@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
   integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
 
 eventid@^2.0.0:
@@ -17259,6 +17419,21 @@ execa@^7.0.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+execa@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
+  integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^8.0.1"
+    human-signals "^5.0.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^4.1.0"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz"
@@ -17579,7 +17754,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.2:
+fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.3"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -17934,26 +18109,26 @@ find-versions@^5.1.0:
   dependencies:
     semver-regex "^4.0.5"
 
-findup-sync@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz"
-  integrity sha512-vs+3unmJT45eczmcAZ6zMJtxN3l/QXeccaXQx5cu/MeJMhewVfoWZqibRkOxPnmoR59+Zy5hjabfQc6JLSah4g==
+findup-sync@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-5.0.0.tgz#54380ad965a7edca00cc8f63113559aadc541bd2"
+  integrity sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==
   dependencies:
     detect-file "^1.0.0"
-    is-glob "^3.1.0"
-    micromatch "^3.0.4"
+    is-glob "^4.0.3"
+    micromatch "^4.0.4"
     resolve-dir "^1.0.1"
 
-fined@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz"
-  integrity sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==
+fined@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fined/-/fined-2.0.0.tgz#6846563ed96879ce6de6c85c715c42250f8d8089"
+  integrity sha512-OFRzsL6ZMHz5s0JrsEr+TpdGNCtrVtnuG3x1yzGNiQHT0yaDnXAj8V/lWcpJVrnoDpcwXcASxAZYbuXda2Y82A==
   dependencies:
     expand-tilde "^2.0.2"
-    is-plain-object "^2.0.3"
+    is-plain-object "^5.0.0"
     object.defaults "^1.1.0"
-    object.pick "^1.2.0"
-    parse-filepath "^1.0.1"
+    object.pick "^1.3.0"
+    parse-filepath "^1.0.2"
 
 fingerprint-generator@^2.1.63:
   version "2.1.69"
@@ -17983,10 +18158,10 @@ firebase-admin@^13.2.0:
     "@google-cloud/firestore" "^7.11.0"
     "@google-cloud/storage" "^7.14.0"
 
-flagged-respawn@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz"
-  integrity sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==
+flagged-respawn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-2.0.0.tgz#abf39719dcfe1ac06c86c9466081c541c682987b"
+  integrity sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==
 
 flat-cache@^3.0.4:
   version "3.2.0"
@@ -18471,6 +18646,11 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
+  integrity sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
+
 get-func-name@^2.0.1, get-func-name@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz"
@@ -18559,6 +18739,11 @@ get-stream@^6.0.0, get-stream@^6.0.1:
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+get-stream@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-8.0.1.tgz#def9dfd71742cd7754a7761ed43749a27d02eca2"
+  integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
+
 get-symbol-description@^1.0.2, get-symbol-description@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz"
@@ -18615,6 +18800,17 @@ git-log-parser@^1.2.0:
     through2 "~2.0.0"
     traverse "0.6.8"
 
+git-raw-commits@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz#bc3576638071d18655e1cc60d7f524920008d723"
+  integrity sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==
+  dependencies:
+    dargs "^7.0.0"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+
 git-raw-commits@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-3.0.0.tgz"
@@ -18804,6 +19000,13 @@ glob@^9.2.0:
     minipass "^4.2.4"
     path-scurry "^1.6.1"
 
+global-dirs@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+  integrity sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==
+  dependencies:
+    ini "^1.3.4"
+
 global-dirs@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz"
@@ -18876,20 +19079,6 @@ globby@11.1.0, globby@^11.0.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, g
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-globby@^10.0.1:
-  version "10.0.2"
-  resolved "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz"
-  integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
 globby@^13.1.1:
   version "13.2.2"
   resolved "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz"
@@ -19030,7 +19219,7 @@ graceful-fs@4.2.10:
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-graceful-fs@4.2.11, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@4.2.11, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -19087,6 +19276,13 @@ graphql-request@^6.0.0:
     "@graphql-typed-document-node/core" "^3.2.0"
     cross-fetch "^3.1.5"
 
+graphql-scalars@^1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/graphql-scalars/-/graphql-scalars-1.25.0.tgz#88f2891d60942c420286a2e76a29abfe645ac899"
+  integrity sha512-b0xyXZeRFkne4Eq7NAnL400gStGqG/Sx9VqX0A05nHyEbv57UJnWKsjNnrpVqv5e/8N1MUxkt0wwcRXbiyKcFg==
+  dependencies:
+    tslib "^2.5.0"
+
 graphql-shield@^7.6.5:
   version "7.6.5"
   resolved "https://registry.npmjs.org/graphql-shield/-/graphql-shield-7.6.5.tgz"
@@ -19157,7 +19353,7 @@ handle-thing@^2.0.0:
   resolved "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
-handlebars@^4.4.3, handlebars@^4.7.7, handlebars@^4.7.8:
+handlebars@^4.7.7, handlebars@^4.7.8:
   version "4.7.8"
   resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz"
   integrity sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
@@ -19187,13 +19383,6 @@ hard-rejection@^2.1.0:
   resolved "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
-  integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-bigints@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz"
@@ -19399,14 +19588,6 @@ he@1.2.0, he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-header-case@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz"
-  integrity sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.3"
-
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz"
@@ -19840,6 +20021,11 @@ human-signals@^4.3.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
+human-signals@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
+  integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
+
 humanize-ms@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz"
@@ -19852,6 +20038,11 @@ husky@^7.0.4:
   resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz"
   integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
 
+husky@^9.0.0:
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.7.tgz#d46a38035d101b46a70456a850ff4201344c0b2d"
+  integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -19871,6 +20062,13 @@ iconv-lite@0.6.3, iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+iconv-lite@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.7.0.tgz#c50cd80e6746ca8115eb98743afa81aa0e147a3e"
+  integrity sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz"
@@ -19922,7 +20120,7 @@ ignore@^4.0.3:
   resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.0.4, ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.0.4, ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.2"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -19969,7 +20167,7 @@ immutable@~3.7.6:
   resolved "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz"
   integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
 
-import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.1"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz"
   integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
@@ -20141,25 +20339,6 @@ inquirer@9.2.15:
     strip-ansi "^6.0.1"
     wrap-ansi "^6.2.0"
 
-inquirer@^7.1.0:
-  version "7.3.3"
-  resolved "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz"
-  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-width "^3.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.19"
-    mute-stream "0.0.8"
-    run-async "^2.4.0"
-    rxjs "^6.6.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-
 inquirer@^8.0.0, inquirer@^8.2.4:
   version "8.2.7"
   resolved "https://registry.npmjs.org/inquirer/-/inquirer-8.2.7.tgz"
@@ -20181,6 +20360,24 @@ inquirer@^8.0.0, inquirer@^8.2.4:
     through "^2.3.6"
     wrap-ansi "^6.0.1"
 
+inquirer@^9.3.8:
+  version "9.3.8"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.3.8.tgz#a0c81ba04e1525776677e4e667ab117aefb19608"
+  integrity sha512-pFGGdaHrmRKMh4WoDDSowddgjT1Vkl90atobmTeSmcPGdYiwikch/m/Ef5wRaiamHejtw0cUUMMerzDUXCci2w==
+  dependencies:
+    "@inquirer/external-editor" "^1.0.2"
+    "@inquirer/figures" "^1.0.3"
+    ansi-escapes "^4.3.2"
+    cli-width "^4.1.0"
+    mute-stream "1.0.0"
+    ora "^5.4.1"
+    run-async "^3.0.0"
+    rxjs "^7.8.1"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^6.2.0"
+    yoctocolors-cjs "^2.1.2"
+
 intercom-client@*, intercom-client@^6.2.0:
   version "6.4.0"
   resolved "https://registry.npmjs.org/intercom-client/-/intercom-client-6.4.0.tgz"
@@ -20203,16 +20400,16 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
-interpret@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz"
-  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
-
 interpret@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
 into-stream@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/into-stream/-/into-stream-6.0.0.tgz"
@@ -20538,6 +20735,13 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
+is-fullwidth-code-point@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz#046b2a6d4f6b156b2233d3207d4b5a9783999b98"
+  integrity sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==
+  dependencies:
+    get-east-asian-width "^1.3.1"
+
 is-function@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz"
@@ -20595,13 +20799,6 @@ is-lambda@^1.0.1:
   resolved "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
-is-lower-case@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz"
-  integrity sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==
-  dependencies:
-    lower-case "^1.1.0"
-
 is-lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/is-lower-case/-/is-lower-case-2.0.2.tgz"
@@ -20659,7 +20856,7 @@ is-path-cwd@^2.2.0:
   resolved "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz"
   integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
-is-path-inside@^3.0.1, is-path-inside@^3.0.2, is-path-inside@^3.0.3:
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -20798,6 +20995,13 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
+is-text-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-2.0.0.tgz#b2484e2b720a633feb2e85b67dc193ff72c75636"
+  integrity sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==
+  dependencies:
+    text-extensions "^2.0.0"
+
 is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15, is-typed-array@^1.1.3:
   version "1.1.15"
   resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz"
@@ -20827,13 +21031,6 @@ is-unicode-supported@^1.2.0:
   resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz"
   integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
 
-is-upper-case@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz"
-  integrity sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==
-  dependencies:
-    upper-case "^1.1.0"
-
 is-upper-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/is-upper-case/-/is-upper-case-2.0.2.tgz"
@@ -20913,10 +21110,10 @@ isarray@^2.0.5:
   resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
-isbinaryfile@^4.0.2:
-  version "4.0.10"
-  resolved "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz"
-  integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
+isbinaryfile@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-5.0.6.tgz#01eac28867aeffaebaee7eaf21d1dd3a67d7c0c7"
+  integrity sha512-I+NmIfBHUl+r2wcDd6JwE9yWje/PIVY/R5/CmV8dXLZd5K+L9X2klAOwfAHNnondLXkbHyTAleQAWonpTJBTtw==
 
 isexe@^2.0.0:
   version "2.0.0"
@@ -22006,6 +22203,11 @@ jiti@1.17.1:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.17.1.tgz"
   integrity sha512-NZIITw8uZQFuzQimqjUxIrIcEdxYDFIe/0xYfIlVXTkiBjjyBEvgasj5bb0/cHtPRD/NziPbT312sFrkI5ALpw==
 
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
 joi@*, joi@^17.11.0:
   version "17.13.3"
   resolved "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz"
@@ -22891,19 +23093,23 @@ lie@~3.3.0:
   dependencies:
     immediate "~3.0.5"
 
-liftoff@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.npmjs.org/liftoff/-/liftoff-2.5.0.tgz"
-  integrity sha512-01zfGFqfORP1CGmZZP2Zn51zsqz4RltDi0RDOhbGoLYdUT5Lw+I2gX6QdwXhPITF6hPOHEOp+At6/L24hIg9WQ==
+liftoff@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-5.0.1.tgz#e2329e7f1e19e98c8dba71185f2078e6dbbc5c1f"
+  integrity sha512-wwLXMbuxSF8gMvubFcFRp56lkFV69twvbU5vDPbaw+Q+/rF8j0HKjGbIdlSi+LuJm9jf7k9PB+nTxnsLMPcv2Q==
   dependencies:
-    extend "^3.0.0"
-    findup-sync "^2.0.0"
-    fined "^1.0.1"
-    flagged-respawn "^1.0.0"
-    is-plain-object "^2.0.4"
-    object.map "^1.0.0"
-    rechoir "^0.6.2"
-    resolve "^1.1.7"
+    extend "^3.0.2"
+    findup-sync "^5.0.0"
+    fined "^2.0.0"
+    flagged-respawn "^2.0.0"
+    is-plain-object "^5.0.0"
+    rechoir "^0.8.0"
+    resolve "^1.20.0"
+
+lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
 limiter@^1.1.5:
   version "1.1.5"
@@ -22978,6 +23184,22 @@ linkify-it@^4.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
+lint-staged@^15.0.0:
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
+  integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==
+  dependencies:
+    chalk "^5.4.1"
+    commander "^13.1.0"
+    debug "^4.4.0"
+    execa "^8.0.1"
+    lilconfig "^3.1.3"
+    listr2 "^8.2.5"
+    micromatch "^4.0.8"
+    pidtree "^0.6.0"
+    string-argv "^0.3.2"
+    yaml "^2.7.0"
+
 listr2@^3.8.3:
   version "3.14.0"
   resolved "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz"
@@ -23006,6 +23228,18 @@ listr2@^4.0.5:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+listr2@^8.2.5:
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.3.3.tgz#815fc8f738260ff220981bf9e866b3e11e8121bf"
+  integrity sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==
+  dependencies:
+    cli-truncate "^4.0.0"
+    colorette "^2.0.20"
+    eventemitter3 "^5.0.1"
+    log-update "^6.1.0"
+    rfdc "^1.4.1"
+    wrap-ansi "^9.0.0"
+
 load-json-file@6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz"
@@ -23234,6 +23468,11 @@ lodash.isundefined@^3.0.1:
   resolved "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz"
   integrity sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==
 
+lodash.kebabcase@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+  integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==
+
 lodash.mapvalues@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz"
@@ -23249,6 +23488,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.mergewith@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.omit@4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz"
@@ -23269,6 +23513,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
+lodash.startcase@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
+  integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
+
 lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
@@ -23279,6 +23528,11 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz"
   integrity sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==
 
+lodash.upperfirst@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
+  integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==
+
 lodash@4.17.21, lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
@@ -23296,13 +23550,6 @@ log-symbols@4.0.0:
   dependencies:
     chalk "^4.0.0"
 
-log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
-  dependencies:
-    chalk "^2.0.1"
-
 log-symbols@^4.0.0, log-symbols@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz"
@@ -23321,6 +23568,17 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+log-update@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.1.0.tgz#1a04ff38166f94647ae1af562f4bd6a15b1b7cd4"
+  integrity sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
+  dependencies:
+    ansi-escapes "^7.0.0"
+    cli-cursor "^5.0.0"
+    slice-ansi "^7.1.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
+
 logform@^2.7.0:
   version "2.7.0"
   resolved "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz"
@@ -23397,13 +23655,6 @@ loupe@^3.1.0, loupe@^3.1.4:
   resolved "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz"
   integrity sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==
 
-lower-case-first@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz"
-  integrity sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==
-  dependencies:
-    lower-case "^1.1.2"
-
 lower-case-first@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/lower-case-first/-/lower-case-first-2.0.2.tgz"
@@ -23411,11 +23662,6 @@ lower-case-first@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz"
-  integrity sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==
-
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz"
@@ -23605,13 +23851,6 @@ make-fetch-happen@^11.0.0, make-fetch-happen@^11.0.1, make-fetch-happen@^11.1.1:
     socks-proxy-agent "^7.0.0"
     ssri "^10.0.0"
 
-make-iterator@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz"
-  integrity sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==
-  dependencies:
-    kind-of "^6.0.2"
-
 makeerror@1.0.12:
   version "1.0.12"
   resolved "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz"
@@ -23999,6 +24238,11 @@ meow@^10.1.0:
     type-fest "^1.2.2"
     yargs-parser "^20.2.9"
 
+meow@^12.0.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-12.1.1.tgz#e558dddbab12477b69b2e9a2728c327f191bace6"
+  integrity sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==
+
 meow@^3.1.0:
   version "3.7.0"
   resolved "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz"
@@ -24356,7 +24600,7 @@ micromark@^3.0.0:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
-micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
+micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -24449,11 +24693,6 @@ mime@^3.0.0:
   resolved "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz"
   integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
 
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
@@ -24469,6 +24708,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
 mimic-response@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz"
@@ -25029,6 +25273,13 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+nanospinner@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/nanospinner/-/nanospinner-1.2.2.tgz#5a38f4410b5bf7a41585964bee74d32eab3e040b"
+  integrity sha512-Zt/AmG6qRU3e+WnzGGLuMCEAO/dAu45stNbHY223tUxldaDAeE+FxSPsd9Q+j+paejmm0ZbrNVs5Sraqy3dRxA==
+  dependencies:
+    picocolors "^1.1.1"
+
 napi-build-utils@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz"
@@ -25163,13 +25414,6 @@ nise@^1.5.2:
     lolex "^5.0.1"
     path-to-regexp "^1.7.0"
 
-no-case@^2.2.0, no-case@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz"
-  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
-  dependencies:
-    lower-case "^1.1.1"
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz"
@@ -25367,22 +25611,21 @@ node-mailjet@^6.0.8:
     json-bigint "^1.0.0"
     url-join "^4.0.0"
 
-node-plop@^0.26.3:
-  version "0.26.3"
-  resolved "https://registry.npmjs.org/node-plop/-/node-plop-0.26.3.tgz"
-  integrity sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==
+node-plop@^0.32.3:
+  version "0.32.3"
+  resolved "https://registry.yarnpkg.com/node-plop/-/node-plop-0.32.3.tgz#64d31e72ae73abdeeb1d12e894bdee9dab32ce97"
+  integrity sha512-tn+OxutdqhvoByKJ7p84FZBSUDfUB76bcvj0ugLBvgE9V52LFcnz8cauCDKi6otnctvFCqa9XkrU35pBY5Baig==
   dependencies:
-    "@babel/runtime-corejs3" "^7.9.2"
-    "@types/inquirer" "^6.5.0"
-    change-case "^3.1.0"
-    del "^5.1.0"
-    globby "^10.0.1"
-    handlebars "^4.4.3"
-    inquirer "^7.1.0"
-    isbinaryfile "^4.0.2"
-    lodash.get "^4.4.2"
-    mkdirp "^0.5.1"
-    resolve "^1.12.0"
+    "@types/inquirer" "^9.0.9"
+    "@types/picomatch" "^4.0.2"
+    change-case "^5.4.4"
+    dlv "^1.1.3"
+    handlebars "^4.7.8"
+    inquirer "^9.3.8"
+    isbinaryfile "^5.0.6"
+    resolve "^1.22.10"
+    tinyglobby "^0.2.15"
+    title-case "^4.3.2"
 
 node-preload@^0.2.1:
   version "0.2.1"
@@ -26079,15 +26322,7 @@ object.groupby@^1.0.3:
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.map@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz"
-  integrity sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==
-  dependencies:
-    for-own "^1.0.0"
-    make-iterator "^1.0.0"
-
-object.pick@^1.2.0, object.pick@^1.3.0:
+object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz"
   integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
@@ -26145,13 +26380,6 @@ one-time@^1.0.0:
   dependencies:
     fn.name "1.x.x"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz"
-  integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
-  dependencies:
-    mimic-fn "^1.0.0"
-
 onetime@^5.1.0, onetime@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
@@ -26166,6 +26394,13 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
+onetime@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-7.0.0.tgz#9f16c92d8c9ef5120e3acd9dd9957cceecc1ab60"
+  integrity sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
+  dependencies:
+    mimic-function "^5.0.0"
+
 open@^7.0.3:
   version "7.4.2"
   resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
@@ -26253,18 +26488,6 @@ ora@5.4.1, ora@^5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-ora@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz"
-  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
-  dependencies:
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-spinners "^2.0.0"
-    log-symbols "^2.2.0"
-    strip-ansi "^5.2.0"
-    wcwidth "^1.0.1"
-
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
@@ -26624,13 +26847,6 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz"
-  integrity sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==
-  dependencies:
-    no-case "^2.2.0"
-
 param-case@^3.0.3, param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz"
@@ -26679,7 +26895,7 @@ parse-entities@^2.0.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-filepath@^1.0.1, parse-filepath@^1.0.2:
+parse-filepath@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz"
   integrity sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==
@@ -26785,14 +27001,6 @@ parseurl@^1.3.3, parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-pascal-case@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-2.0.1.tgz"
-  integrity sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==
-  dependencies:
-    camel-case "^3.0.0"
-    upper-case-first "^1.1.0"
-
 pascal-case@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz"
@@ -26863,13 +27071,6 @@ path-browserify@^1.0.1:
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
-path-case@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/path-case/-/path-case-2.1.1.tgz"
-  integrity sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==
-  dependencies:
-    no-case "^2.2.0"
-
 path-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz"
@@ -27159,6 +27360,11 @@ picomatch@^4.0.2, picomatch@^4.0.3:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
+pidtree@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
+  integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
+
 pify@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz"
@@ -27267,19 +27473,19 @@ platform@^1.3.3:
   resolved "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-plop@^2.7.1:
-  version "2.7.6"
-  resolved "https://registry.npmjs.org/plop/-/plop-2.7.6.tgz"
-  integrity sha512-IgnYAsC3Ni7t1cDU7wH2151CD22YhMxH8PFh+iPzCf+WuGEWXslJ5t1Tpr0N/gjL23CAV/HbLAWug2IPM2YrHg==
+plop@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/plop/-/plop-4.0.4.tgz#832d701350aae9cffead32cab538c34b31bd02c4"
+  integrity sha512-YdxtHWcPV8hDsszVPr4VQBVGNdn5ZQmEW+cZakZkuVeQHtENmrtY4AhuyoZW6s7ZjpmrS+llLQrfDgRKNQNsmg==
   dependencies:
-    "@types/liftoff" "^2.5.1"
-    chalk "^1.1.3"
-    interpret "^1.2.0"
-    liftoff "^2.5.0"
-    minimist "^1.2.5"
-    node-plop "^0.26.3"
-    ora "^3.4.0"
-    v8flags "^2.0.10"
+    "@types/liftoff" "^4.0.3"
+    interpret "^3.1.1"
+    liftoff "^5.0.1"
+    minimist "^1.2.8"
+    nanospinner "^1.2.2"
+    node-plop "^0.32.3"
+    picocolors "^1.1.1"
+    v8flags "^4.0.1"
 
 plur@^5.1.0:
   version "5.1.0"
@@ -29124,13 +29330,6 @@ real-require@^0.2.0:
   resolved "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz"
   integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==
 
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz"
-  integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==
-  dependencies:
-    resolve "^1.1.6"
-
 rechoir@^0.7.0:
   version "0.7.1"
   resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz"
@@ -29138,6 +29337,13 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz"
@@ -29561,6 +29767,13 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-global@1.0.0, resolve-global@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-global/-/resolve-global-1.0.0.tgz#a2a79df4af2ca3f49bf77ef9ddacd322dad19255"
+  integrity sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==
+  dependencies:
+    global-dirs "^0.1.1"
+
 resolve-pkg-maps@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz"
@@ -29590,7 +29803,7 @@ resolve@1.22.8:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.0.0, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.10, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.9.0:
+resolve@^1.0.0, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.10, resolve@^1.22.4, resolve@^1.22.8, resolve@^1.3.2, resolve@^1.9.0:
   version "1.22.10"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz"
   integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
@@ -29608,14 +29821,6 @@ resolve@^2.0.0-next.5:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz"
-  integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz"
@@ -29624,6 +29829,14 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-5.1.0.tgz#0766d95699efacb14150993f55baf0953ea1ebe7"
+  integrity sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
+  dependencies:
+    onetime "^7.0.0"
+    signal-exit "^4.1.0"
+
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz"
@@ -29668,7 +29881,7 @@ rfc2047@^4.0.1:
   dependencies:
     iconv-lite "0.4.5"
 
-rfdc@^1.3.0:
+rfdc@^1.3.0, rfdc@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
@@ -29813,14 +30026,7 @@ rxjs@7.8.1:
   dependencies:
     tslib "^2.1.0"
 
-rxjs@^6.4.0, rxjs@^6.6.0:
-  version "6.6.7"
-  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
-rxjs@^7.0.0, rxjs@^7.5.1, rxjs@^7.5.5, rxjs@^7.8.1:
+rxjs@^7.0.0, rxjs@^7.2.0, rxjs@^7.5.1, rxjs@^7.5.5, rxjs@^7.8.1:
   version "7.8.2"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz"
   integrity sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==
@@ -30090,6 +30296,13 @@ semver@7.5.3:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@^6.0.0, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
@@ -30141,14 +30354,6 @@ send@^1.1.0, send@^1.2.0:
     range-parser "^1.2.1"
     statuses "^2.0.1"
 
-sentence-case@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-2.1.1.tgz"
-  integrity sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==
-  dependencies:
-    no-case "^2.2.0"
-    upper-case-first "^1.1.2"
-
 sentence-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
@@ -30437,7 +30642,7 @@ signal-exit@3.0.7, signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, s
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-signal-exit@^4.0.1:
+signal-exit@^4.0.1, signal-exit@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
@@ -30582,18 +30787,19 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+slice-ansi@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.2.tgz#adf7be70aa6d72162d907cd0e6d5c11f507b5403"
+  integrity sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
-snake-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz"
-  integrity sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==
-  dependencies:
-    no-case "^2.2.0"
-
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz"
@@ -31132,6 +31338,11 @@ strict-event-emitter@^0.5.1:
   resolved "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz"
   integrity sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==
 
+string-argv@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
+  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+
 string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz"
@@ -31197,6 +31408,15 @@ string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
+string-width@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
 string.prototype.includes@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz"
@@ -31307,7 +31527,7 @@ string_decoder@~1.1.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
   integrity sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
@@ -31321,13 +31541,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
@@ -31342,6 +31555,13 @@ strip-ansi@^7.0.1:
   dependencies:
     ansi-regex "^6.0.1"
 
+strip-ansi@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
+  integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz"
@@ -31560,11 +31780,6 @@ supports-color@8.1.1, supports-color@^8.0.0, supports-color@^8.1.0, supports-col
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
-  integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
-
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -31604,14 +31819,6 @@ swagger-ui-express@^5.0.0:
   dependencies:
     swagger-ui-dist ">=5.0.0"
 
-swap-case@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz"
-  integrity sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==
-  dependencies:
-    lower-case "^1.1.1"
-    upper-case "^1.1.1"
-
 swap-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz"
@@ -31946,6 +32153,11 @@ text-extensions@^1.0.0:
   resolved "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz"
   integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
 
+text-extensions@^2.0.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-2.4.0.tgz#a1cfcc50cf34da41bfd047cc744f804d1680ea34"
+  integrity sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==
+
 text-hex@1.0.x:
   version "1.0.0"
   resolved "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz"
@@ -32067,14 +32279,6 @@ tinyspy@^4.0.3:
   resolved "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz"
   integrity sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==
 
-title-case@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz"
-  integrity sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.0.3"
-
 title-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/title-case/-/title-case-3.0.3.tgz"
@@ -32082,6 +32286,11 @@ title-case@^3.0.3:
   dependencies:
     tslib "^2.0.3"
 
+title-case@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-4.3.2.tgz#498d22ca7083dcfb9add4f4b8d98c000d05fceb3"
+  integrity sha512-I/nkcBo73mO42Idfv08jhInV61IMb61OdIFxk+B4Gu1oBjWBPOLmhZdsli+oJCVaD+86pYQA93cJfFt224ZFAA==
+
 tlds@1.259.0:
   version "1.259.0"
   resolved "https://registry.npmjs.org/tlds/-/tlds-1.259.0.tgz"
@@ -32507,7 +32716,7 @@ tslib@2.8.1, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
-tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -32866,6 +33075,11 @@ undici-types@~7.10.0:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz"
   integrity sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==
 
+undici-types@~7.16.0:
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.16.0.tgz#ffccdff36aea4884cbfce9a750a0580224f58a46"
+  integrity sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==
+
 undici@^7.16.0:
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/undici/-/undici-7.16.0.tgz#cb2a1e957726d458b536e3f076bf51f066901c1a"
@@ -33201,13 +33415,6 @@ update-browserslist-db@^1.1.3:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
-upper-case-first@^1.1.0, upper-case-first@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz"
-  integrity sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==
-  dependencies:
-    upper-case "^1.1.1"
-
 upper-case-first@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz"
@@ -33215,11 +33422,6 @@ upper-case-first@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz"
-  integrity sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==
-
 upper-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz"
@@ -33338,11 +33540,6 @@ use@^3.1.0:
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-user-home@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
-  integrity sha512-aggiKfEEubv3UwRNqTzLInZpAOmKzwdHqEBmW/hBA/mt99eg+b4VrX6i+IRLxU8+WJYfa33rGwRseg4eElUgsQ==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -33464,12 +33661,10 @@ v8-to-istanbul@^9.0.0, v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^2.0.0"
 
-v8flags@^2.0.10:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz"
-  integrity sha512-SKfhk/LlaXzvtowJabLZwD4K6SGRYeoxA7KJeISlUMAB/NT4CBkZjMq3WceX2Ckm4llwqYVo8TICgsDYCBU2tA==
-  dependencies:
-    user-home "^1.1.1"
+v8flags@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-4.0.1.tgz#98fe6c4308317c5f394d85a435eb192490f7e132"
+  integrity sha512-fcRLaS4H/hrZk9hYwbdRM35D0U8IYMfEClhXxCivOojl+yTRAZH3Zy2sSy6qVCiGbV9YAtPssP6jaChqC9vPCg==
 
 vali-date@^1.0.0:
   version "1.0.0"
@@ -34363,6 +34558,15 @@ wrap-ansi@^8.1.0:
     string-width "^5.0.1"
     strip-ansi "^7.0.1"
 
+wrap-ansi@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.2.tgz#956832dea9494306e6d209eb871643bb873d7c98"
+  integrity sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@@ -34527,9 +34731,9 @@ yaml@^1.10.0, yaml@^1.7.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.2.1, yaml@^2.2.2, yaml@^2.7.1:
+yaml@^2.2.1, yaml@^2.2.2, yaml@^2.7.0, yaml@^2.7.1:
   version "2.8.1"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
   integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
 
 yargs-parser@20.2.4:
@@ -34636,6 +34840,11 @@ yocto-queue@^1.0.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz"
   integrity sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==
 
+yoctocolors-cjs@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz#7e4964ea8ec422b7a40ac917d3a344cfd2304baa"
+  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
+
 youtubei@^1.6.7:
   version "1.7.0"
   resolved "https://registry.npmjs.org/youtubei/-/youtubei-1.7.0.tgz"