From 5f841fe7248f2d4fc509b09597083b707afc22c7 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 15:47:09 -0500
Subject: [PATCH 01/42] Bump version to 1.0.3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 manifest.json | 2 +-
 package.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/manifest.json b/manifest.json
index a85d343..4fb6033 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "GitHub Devwatch",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Monitor pull requests, issues, and releases across GitHub repositories with notifications and a local activity feed.",
   "author": "Jonathan Martin",
   "permissions": [
diff --git a/package.json b/package.json
index 311cbcd..8236bb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "github-devwatch-chrome",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Chrome extension for monitoring GitHub repository activity",
   "type": "module",
   "scripts": {

From 668fa77123f8710861369d157acb13c8c66bb748 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:31:29 -0500
Subject: [PATCH 02/42] style: replace Zinc design tokens with Stone palette in
 popup CSS

Swap all shadcn/ui Zinc (#09090B / #FAFAFA / #F4F4F5) color tokens
to Stone (#1C1917 / #FAFAF9 / #F5F5F4) for a warmer cream/charcoal
theme in both light and dark modes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 1388 ++++++++++++++++++++++++-----------------------
 1 file changed, 710 insertions(+), 678 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 7793ad1..6a9e8d3 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,48 +1,90 @@
+/* ================================================
+   DEVWATCH POPUP — shadcn/ui Stone Theme
+   ================================================ */
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+/* ---- shadcn Design Tokens (Stone) ---- */
 :root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f6f8fa;
-  --bg-hover: #f6f8fa;
-  --bg-unread: #f1f8ff;
-  --border-color: #e1e4e8;
-  --text-primary: #24292e;
-  --text-secondary: #586069;
-  --link-color: #0366d6;
-  --badge-bg: #0366d6;
-  --success-bg: #d4edda;
-  --success-text: #155724;
-
-  }
+  --background: #FAFAF9;
+  --foreground: #1C1917;
+  --card: #FAFAF9;
+  --card-foreground: #1C1917;
+  --muted: #F5F5F4;
+  --muted-foreground: #78716C;
+  --accent: #F5F5F4;
+  --accent-foreground: #1C1917;
+  --border: #E7E5E4;
+  --input: #E7E5E4;
+  --ring: #1C1917;
+  --radius: 0.5rem;
+  --destructive: #EF4444;
+  --destructive-foreground: #FAFAF9;
+
+  /* Backward-compat aliases */
+  --bg-primary: var(--background);
+  --bg-secondary: var(--muted);
+  --bg-hover: var(--accent);
+  --bg-unread: #FFFBF5;
+  --border-color: var(--border);
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --link-color: #1C1917;
+  --link-hover-color: #0C0A09;
+  --badge-bg: #1C1917;
+  --accent-color: #1C1917;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+}
 
 body.dark-mode {
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-hover: #1c2128;
-  --bg-unread: #1c2d41;
-  --border-color: #30363d;
-  --text-primary: #c9d1d9;
-  --text-secondary: #8b949e;
-  --link-color: #58a6ff;
-  --badge-bg: #58a6ff;
-  --success-bg: #1b4620;
-  --success-text: #7ee787;
+  --background: #1C1917;
+  --foreground: #FAFAF9;
+  --card: #1C1917;
+  --card-foreground: #FAFAF9;
+  --muted: #292524;
+  --muted-foreground: #A8A29E;
+  --accent: #292524;
+  --accent-foreground: #FAFAF9;
+  --border: #292524;
+  --input: #292524;
+  --ring: #D6D3D1;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #FAFAF9;
+
+  --bg-primary: var(--background);
+  --bg-secondary: var(--muted);
+  --bg-hover: var(--accent);
+  --bg-unread: rgba(255, 251, 245, 0.04);
+  --border-color: var(--border);
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --link-color: #FAFAF9;
+  --link-hover-color: #E7E5E4;
+  --badge-bg: #FAFAF9;
+  --accent-color: #FAFAF9;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
 }
 
 body {
   width: 450px;
   max-height: 600px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  font-size: 15px;
-  color: var(--text-primary);
-  background: var(--bg-primary);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--foreground);
+  background: var(--background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 
-/* Utility classes */
+/* ---- Utilities ---- */
 .hidden {
   display: none !important;
 }
@@ -54,23 +96,25 @@ body {
 
 .empty-message {
   text-align: center;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   padding: 20px;
 }
 
+/* ---- Layout ---- */
 .container {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
+/* ---- Header ---- */
 header {
-  display: none; /* Hidden by default to prevent flash on load */
+  display: none;
   justify-content: space-between;
   align-items: center;
-  padding: 18px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
 }
 
 .header-info {
@@ -82,57 +126,61 @@ header {
 .header-stats {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 1px;
   align-items: flex-end;
 }
 
 .header-refresh-btn {
-  padding: 4px;
-  background: none;
+  padding: 6px;
+  background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--radius) - 2px);
   cursor: pointer;
-  color: var(--text-secondary);
-  transition: all 0.2s;
+  color: var(--muted-foreground);
+  transition: all 150ms;
 }
 
 .header-refresh-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  transform: scale(1.1);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .header-refresh-btn:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: 2px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .last-updated {
   font-size: 12px;
-  color: var(--text-secondary);
-  font-style: italic;
+  color: var(--muted-foreground);
+  font-weight: 400;
 }
 
 .repo-count {
-  font-size: 11px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--muted-foreground);
 }
 
 h1 {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1;
+  color: var(--foreground);
 }
 
+/* ---- Icon Buttons (shared) ---- */
 .icon-btn {
-  background: none;
+  background: transparent;
   border: none;
   cursor: pointer;
   padding: 8px;
-  border-radius: 6px;
+  border-radius: calc(var(--radius) - 2px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
+  transition: all 150ms;
 }
 
 .icon-btn svg {
@@ -141,7 +189,8 @@ h1 {
 }
 
 .icon-btn:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .icon-btn.spinning .refresh-icon {
@@ -149,194 +198,219 @@ h1 {
 }
 
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 @keyframes refresh-complete {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-    background: var(--link-color);
-    color: white;
-  }
-  100% {
-    transform: scale(1);
-  }
+  0% { transform: scale(1); }
+  50% { transform: scale(1.15); background: var(--foreground); color: var(--background); }
+  100% { transform: scale(1); }
 }
 
 .footer-btn.refresh-complete {
   animation: refresh-complete 0.4s ease-out;
 }
 
+/* ---- Toolbar ---- */
 .toolbar {
-  display: none; /* Hidden by default to prevent flash on load */
+  display: none;
   justify-content: space-between;
   align-items: center;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-primary);
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
 }
 
+/* shadcn Tabs component: muted container, active tab pops out */
 .filters {
-  display: flex;
-  gap: 10px;
+  display: inline-flex;
+  align-items: center;
+  background: var(--muted);
+  border-radius: calc(var(--radius) + 2px);
+  padding: 4px;
+  gap: 2px;
+  height: 36px;
 }
 
 .filter-btn {
-  padding: 6px 14px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-radius: 6px;
+  padding: 0 14px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  border-radius: calc(var(--radius) - 2px);
   cursor: pointer;
   font-size: 14px;
-  transition: all 0.2s;
+  font-weight: 500;
+  transition: all 150ms;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .filter-btn:hover {
-  border-color: var(--link-color);
+  color: var(--foreground);
 }
 
 .filter-btn.active {
-  background: var(--link-color);
-  color: white;
-  border-color: var(--link-color);
+  background: var(--background);
+  color: var(--foreground);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+body.dark-mode .filter-btn.active {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .toolbar-actions {
   display: flex;
-  gap: 12px;
+  gap: 2px;
   align-items: center;
 }
 
 .toolbar-btn {
-  background: none;
+  background: transparent;
   border: none;
   cursor: pointer;
-  padding: 8px;
-  opacity: 0.6;
-  transition: opacity 0.2s;
+  padding: 7px;
+  color: var(--muted-foreground);
+  transition: all 150ms;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
-  color: var(--text-secondary);
+  border-radius: calc(var(--radius) - 2px);
 }
 
 .toolbar-btn svg {
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
 }
 
 .toolbar-btn:hover {
-  opacity: 1;
-  background: var(--bg-secondary);
+  color: var(--foreground);
+  background: var(--accent);
 }
 
 .toolbar-btn.active {
-  opacity: 1;
-  background: var(--link-color);
-  color: white;
+  color: var(--background);
+  background: var(--foreground);
 }
 
 .toolbar-btn.active svg {
-  color: white;
+  color: var(--background);
 }
 
+/* ---- Search ---- */
 .search-box {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
 }
 
 .search-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--foreground);
   white-space: nowrap;
 }
 
+/* shadcn Input component */
 .search-box input {
   width: 100%;
-  padding: 10px 14px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--foreground);
   font-size: 14px;
+  transition: all 150ms;
+}
+
+.search-box input::placeholder {
+  color: var(--muted-foreground);
 }
 
 .search-box input:focus {
   outline: none;
-  border-color: var(--link-color);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
+/* ---- Activity List ---- */
 .activity-list {
   flex: 1;
   overflow-y: auto;
   min-height: 200px;
-  display: none; /* Hidden by default to prevent flash on load */
+  display: none;
 }
 
-/* Custom thin scrollbar styling */
+/* shadcn ScrollArea style scrollbar */
 .activity-list::-webkit-scrollbar {
   width: 8px;
 }
 
 .activity-list::-webkit-scrollbar-track {
   background: transparent;
-  margin: 4px 0;
 }
 
 .activity-list::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 4px;
+  background: var(--border);
+  border-radius: 9999px;
   border: 2px solid transparent;
   background-clip: content-box;
   min-height: 40px;
 }
 
 .activity-list::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
-  background-clip: content-box;
-}
-
-.activity-list::-webkit-scrollbar-thumb:active {
-  background: var(--text-primary);
+  background: var(--muted-foreground);
   background-clip: content-box;
 }
 
+/* ---- Empty & Loading States ---- */
 .empty-state {
-  padding: 56px 18px;
+  padding: 48px 24px;
   text-align: center;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
+}
+
+.empty-state p {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--foreground);
+  margin-bottom: 4px;
 }
 
 .empty-state small {
   display: block;
-  margin-top: 10px;
-  font-size: 13px;
+  margin-top: 4px;
+  font-size: 14px;
+  color: var(--muted-foreground);
+}
+
+.loading {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--muted-foreground);
+  font-size: 14px;
 }
 
+/* ---- List Header ---- */
 .list-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 18px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
-  font-size: 13px;
-  color: var(--text-secondary);
+  padding: 6px 16px;
+  background: var(--muted);
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted-foreground);
   position: sticky;
   top: 0;
   z-index: 11;
@@ -344,21 +418,22 @@ h1 {
 
 .header-actions {
   display: flex;
-  gap: 12px;
+  gap: 8px;
   align-items: center;
 }
 
 .time-group-header {
-  padding: 10px 18px;
-  font-size: 13px;
+  padding: 6px 16px;
+  font-size: 12px;
   font-weight: 600;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  color: var(--muted-foreground);
+  background: var(--muted);
+  border-bottom: 1px solid var(--border);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.05em;
 }
 
+/* ---- Repo Groups ---- */
 .repo-group {
   position: relative;
 }
@@ -367,14 +442,14 @@ h1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 18px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  padding: 8px 16px;
+  background: var(--muted);
+  border-bottom: 1px solid var(--border);
   position: sticky;
   top: var(--list-header-height, 0px);
   z-index: 10;
   cursor: pointer;
-  transition: opacity 0.3s, transform 0.3s, max-height 0.3s, padding 0.3s, margin 0.3s, border-width 0.3s;
+  transition: opacity 300ms, transform 300ms, max-height 300ms, padding 300ms, margin 300ms, border-width 300ms;
 }
 
 .repo-group-header.removing {
@@ -389,18 +464,16 @@ h1 {
 }
 
 .repo-group-header:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
 }
 
 .repo-group-header.pinned {
-  border-left: 3px solid #f59e0b;
-  background: var(--bg-secondary);
-  padding-left: 15px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-left: 2px solid var(--foreground);
+  padding-left: 14px;
 }
 
 .repo-group-header.pinned:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
 }
 
 .repo-group-title {
@@ -413,20 +486,20 @@ h1 {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 4px;
+  padding: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
-  transition: transform 0.2s;
+  color: var(--muted-foreground);
+  transition: transform 150ms;
 }
 
 .repo-collapse-btn:hover {
-  color: var(--text-primary);
+  color: var(--foreground);
 }
 
 .repo-collapse-btn .chevron {
-  transition: transform 0.2s;
+  transition: transform 150ms;
 }
 
 .repo-collapse-btn .chevron.collapsed {
@@ -434,73 +507,63 @@ h1 {
 }
 
 .repo-group-name {
-  font-size: 14px;
   font-weight: 600;
-  color: var(--text-primary);
-  font-family: 'Monaco', 'Courier New', monospace;
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  letter-spacing: -0.01em;
 }
 
 .repo-group-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 }
 
+/* shadcn Badge — default variant */
 .repo-unread-count {
-  font-size: 11px;
-  padding: 2px 6px;
-  background: var(--link-color);
-  color: white;
-  border-radius: 10px;
+  font-size: 12px;
+  padding: 0 6px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  background: var(--foreground);
+  color: var(--background);
+  border-radius: 9999px;
   font-weight: 600;
 }
 
-.repo-snooze-btn {
+.repo-snooze-btn,
+.repo-pin-btn,
+.repo-mark-read-btn {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
+  padding: 4px;
+  border-radius: calc(var(--radius) - 2px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
-  transition: all 0.2s;
+  color: var(--muted-foreground);
+  transition: all 150ms;
 }
 
-.repo-snooze-btn svg {
-  width: 16px;
-  height: 16px;
-}
-
-.repo-snooze-btn:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  transform: scale(1.1);
-}
-
-.repo-pin-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-  transition: all 0.2s;
+.repo-snooze-btn svg,
+.repo-pin-btn svg {
+  width: 14px;
+  height: 14px;
 }
 
-.repo-pin-btn svg {
-  width: 16px;
-  height: 16px;
+.repo-mark-read-btn svg {
+  width: 13px;
+  height: 13px;
 }
 
-.repo-pin-btn:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  transform: scale(1.1);
+.repo-snooze-btn:hover,
+.repo-pin-btn:hover,
+.repo-mark-read-btn:hover {
+  background: var(--accent);
+  color: var(--foreground);
 }
 
 .repo-pin-btn.pinned {
@@ -509,48 +572,24 @@ h1 {
 
 .repo-pin-btn.pinned:hover {
   color: var(--accent-color);
-  filter: brightness(1.2);
-}
-
-.repo-mark-read-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-  transition: all 0.2s;
-}
-
-.repo-mark-read-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
-.repo-mark-read-btn:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  transform: scale(1.1);
 }
 
 .options-link {
-  color: var(--link-color);
-  text-decoration: none;
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
   font-weight: 500;
 }
 
 .options-link:hover {
   text-decoration: underline;
-  color: var(--link-hover-color);
+  color: var(--foreground);
 }
 
 .repo-activities {
   max-height: 10000px;
   overflow: hidden;
-  transition: all 0.3s ease-out;
+  transition: all 300ms ease-out;
   transform-origin: top;
   opacity: 1;
 }
@@ -569,41 +608,55 @@ h1 {
   opacity: 0;
 }
 
+/* shadcn ghost button style for text actions */
 .text-btn {
   background: none;
   border: none;
-  color: var(--link-color);
+  color: var(--muted-foreground);
   cursor: pointer;
   font-size: 12px;
+  font-weight: 500;
   padding: 4px 8px;
+  border-radius: calc(var(--radius) - 2px);
+  transition: all 150ms;
 }
 
 .text-btn:hover {
-  text-decoration: underline;
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
+/* ---- Activity Items ---- */
 .activity-item {
   display: flex;
   align-items: flex-start;
-  gap: 14px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border-color);
-  transition: all 0.3s ease-out;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  transition: all 200ms;
   transform-origin: top;
   max-height: 220px;
   overflow: hidden;
 }
 
 .activity-item:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
 }
 
 .activity-item.unread {
   background: var(--bg-unread);
 }
 
+.activity-item.unread:hover {
+  background: var(--accent);
+}
+
 .activity-item.read {
-  opacity: 0.7;
+  opacity: 0.5;
+}
+
+.activity-item.read:hover {
+  opacity: 0.8;
 }
 
 .activity-item.removing {
@@ -617,22 +670,30 @@ h1 {
 }
 
 .activity-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
   flex-shrink: 0;
+  border: 1px solid var(--border);
 }
 
 .activity-content {
   flex: 1;
   cursor: pointer;
+  min-width: 0;
 }
 
 .activity-actions {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   flex-shrink: 0;
   align-self: center;
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.activity-item:hover .activity-actions {
+  opacity: 1;
 }
 
 .action-btn {
@@ -640,96 +701,121 @@ h1 {
   border: none;
   cursor: pointer;
   font-size: 18px;
-  padding: 7px;
-  opacity: 0.5;
-  transition: all 0.2s;
+  padding: 5px;
+  color: var(--muted-foreground);
+  transition: all 150ms;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: calc(var(--radius) - 2px);
 }
 
 .action-btn:hover {
-  opacity: 1;
-  background: var(--bg-secondary);
-  transform: scale(1.1);
+  color: var(--foreground);
+  background: var(--accent);
 }
 
 .action-btn svg {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
 }
 
 .mark-read-btn {
-  color: var(--link-color);
-  opacity: 0.7;
+  color: var(--muted-foreground);
 }
 
 .mark-read-btn:hover {
-  opacity: 1;
-  background: var(--link-color);
+  background: var(--foreground);
+  color: var(--background);
 }
 
 .mark-read-btn:hover svg {
-  color: white;
+  color: var(--background);
 }
 
 .activity-header {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
+/* shadcn Badge — secondary variant with color */
 .activity-type {
-  display: inline-block;
-  padding: 3px 7px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  border: 1px solid transparent;
+  line-height: 1.4;
 }
 
 .activity-type.pr {
-  background: #dcffe4;
-  color: #28a745;
+  background: #ECFDF5;
+  color: #047857;
+  border-color: #A7F3D0;
 }
 
 .activity-type.issue {
-  background: #fff5b1;
-  color: #735c0f;
+  background: #FFF7ED;
+  color: #C2410C;
+  border-color: #FED7AA;
 }
 
 .activity-type.release {
-  background: #ddf4ff;
-  color: #0969da;
+  background: #F5F3FF;
+  color: #6D28D9;
+  border-color: #DDD6FE;
+}
+
+body.dark-mode .activity-type.pr {
+  background: rgba(16, 185, 129, 0.08);
+  color: #6EE7B7;
+  border-color: rgba(16, 185, 129, 0.15);
+}
+
+body.dark-mode .activity-type.issue {
+  background: rgba(249, 115, 22, 0.08);
+  color: #FDBA74;
+  border-color: rgba(249, 115, 22, 0.15);
+}
+
+body.dark-mode .activity-type.release {
+  background: rgba(139, 92, 246, 0.08);
+  color: #C4B5FD;
+  border-color: rgba(139, 92, 246, 0.15);
 }
 
 .activity-repo {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
+  font-weight: 400;
 }
 
 .activity-title {
   font-weight: 500;
-  margin-bottom: 5px;
+  margin-bottom: 2px;
   line-height: 1.4;
-  color: var(--text-primary);
-  font-size: 15px;
+  color: var(--foreground);
+  font-size: 14px;
 }
 
 .activity-meta {
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--muted-foreground);
 }
 
+/* ---- Footer ---- */
 footer {
   position: sticky;
   bottom: 0;
-  padding: 10px 18px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  padding: 8px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--background);
   z-index: 20;
 }
 
@@ -741,115 +827,111 @@ footer {
 
 .footer-actions {
   display: flex;
-  gap: 8px;
+  gap: 2px;
   align-items: center;
 }
 
 .footer-btn {
-  background: none;
+  background: transparent;
   border: none;
   cursor: pointer;
   padding: 6px;
-  border-radius: 6px;
+  border-radius: calc(var(--radius) - 2px);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
-  transition: all 0.2s;
+  color: var(--muted-foreground);
+  transition: all 150ms;
 }
 
 .footer-btn svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
-
 .footer-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  transform: scale(1.1);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .footer-btn.spinning .refresh-icon {
   animation: spin 1s linear infinite;
 }
 
+/* shadcn outline button */
 .footer-btn.skip-btn {
   font-size: 12px;
-  padding: 4px 8px;
+  font-weight: 500;
+  padding: 4px 10px;
   min-width: auto;
   height: auto;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
 }
 
 .footer-btn.skip-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 footer a {
-  color: var(--link-color);
-  text-decoration: none;
-  font-size: 13px;
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  font-size: 12px;
 }
 
 footer a:hover {
-  text-decoration: underline;
+  color: var(--muted-foreground);
 }
 
 .rate-limit-info {
-  font-size: 11px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--muted-foreground);
 }
 
+/* ---- Error & Toast Messages ---- */
 .error-message {
-  padding: 8px;
+  padding: 8px 12px;
   margin-bottom: 8px;
-  background: #f8d7da;
-  color: #721c24;
-  border-radius: 4px;
+  background: #FEF2F2;
+  color: #991B1B;
+  border: 1px solid #FECACA;
+  border-radius: var(--radius);
   font-size: 12px;
   text-align: center;
 }
 
 body.dark-mode .error-message {
-  background: #4b1e1e;
-  color: #f8d7da;
+  background: rgba(239, 68, 68, 0.1);
+  color: #FCA5A5;
+  border-color: rgba(239, 68, 68, 0.2);
 }
 
-/* Toast notification positioning in bottom right */
 .error-message.toast-notification {
   position: fixed;
-  bottom: 70px;
-  right: 18px;
+  bottom: 60px;
+  right: 16px;
   left: auto;
   width: auto;
   max-width: 380px;
   margin: 0;
   z-index: 1000;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  animation: slideIn 0.3s ease-out;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  animation: slideIn 0.2s ease-out;
 }
 
 @keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
 }
 
-/* Toast error styling */
 .error-toast {
-  background: var(--bg-primary);
-  border: 1px solid #dc3545;
-  border-radius: 6px;
+  background: var(--background);
+  border: 1px solid var(--destructive);
+  border-radius: var(--radius);
   overflow: hidden;
 }
 
@@ -859,12 +941,12 @@ body.dark-mode .error-message {
   gap: 8px;
   padding: 10px 12px;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 150ms;
   user-select: none;
 }
 
 .error-summary:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
 }
 
 .error-icon {
@@ -875,18 +957,18 @@ body.dark-mode .error-message {
 .error-brief {
   flex: 1;
   font-weight: 600;
-  font-size: 13px;
-  color: #dc3545;
+  font-size: 14px;
+  color: var(--destructive);
 }
 
 body.dark-mode .error-brief {
-  color: #f8d7da;
+  color: #FCA5A5;
 }
 
 .error-expand {
   font-size: 20px;
-  color: var(--text-secondary);
-  transition: transform 0.2s;
+  color: var(--muted-foreground);
+  transition: transform 150ms;
   flex-shrink: 0;
 }
 
@@ -897,9 +979,9 @@ body.dark-mode .error-brief {
 .error-details {
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease-out;
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border-color);
+  transition: max-height 300ms ease-out;
+  background: var(--muted);
+  border-top: 1px solid var(--border);
 }
 
 .error-details.visible {
@@ -911,18 +993,18 @@ body.dark-mode .error-brief {
   margin: 0 0 8px 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--text-primary);
+  color: var(--foreground);
 }
 
 .error-technical {
   display: block;
-  font-size: 11px;
-  color: var(--text-secondary);
-  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  color: var(--muted-foreground);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   margin-top: 8px;
   padding: 6px 8px;
-  background: var(--bg-hover);
-  border-radius: 4px;
+  background: var(--accent);
+  border-radius: calc(var(--radius) - 2px);
   word-break: break-word;
 }
 
@@ -933,24 +1015,25 @@ body.dark-mode .error-brief {
   justify-content: flex-end;
 }
 
+/* shadcn primary button */
 .error-dismiss {
-  background: var(--link-color);
-  color: white;
+  background: var(--foreground);
+  color: var(--background);
   border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
+  padding: 6px 14px;
+  border-radius: var(--radius);
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 150ms;
 }
 
 .error-dismiss:hover {
   opacity: 0.9;
 }
 
-/* Enhanced error message styles */
 .error-content {
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .error-content strong {
@@ -964,23 +1047,23 @@ body.dark-mode .error-brief {
 }
 
 .error-content .error-action {
-  background: var(--link-color);
-  color: white;
+  background: var(--foreground);
+  color: var(--background);
   border: none;
   padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 11px;
+  border-radius: var(--radius);
+  font-size: 12px;
   cursor: pointer;
   margin-top: 4px;
 }
 
 .error-content .error-action:hover {
-  opacity: 0.8;
+  opacity: 0.9;
 }
 
-/* Success message styles */
+/* Success message */
 .success-content {
-  line-height: 1.4;
+  line-height: 1.5;
   color: var(--success-text);
 }
 
@@ -994,23 +1077,24 @@ body.dark-mode .error-brief {
   margin: 0;
 }
 
-/* Success message background */
 .error-message:has(.success-content) {
   background: var(--success-bg);
   color: var(--success-text);
+  border-color: #BBF7D0;
 }
 
 body.dark-mode .error-message:has(.success-content) {
   background: var(--success-bg);
   color: var(--success-text);
+  border-color: rgba(34, 197, 94, 0.2);
 }
 
-/* Offline status styles */
+/* ---- Offline States ---- */
 .offline-message {
-  background: #fff3cd;
-  color: #856404;
-  border: 1px solid #ffeeba;
-  border-radius: 4px;
+  background: #FFFBEB;
+  color: #92400E;
+  border: 1px solid #FDE68A;
+  border-radius: var(--radius);
   padding: 12px;
   margin-bottom: 8px;
   font-size: 12px;
@@ -1018,9 +1102,9 @@ body.dark-mode .error-message:has(.success-content) {
 }
 
 body.dark-mode .offline-message {
-  background: #664d03;
-  color: #ffecb5;
-  border-color: #543f01;
+  background: rgba(234, 179, 8, 0.1);
+  color: #FCD34D;
+  border-color: rgba(234, 179, 8, 0.2);
 }
 
 .offline-status {
@@ -1045,7 +1129,6 @@ body.dark-mode .offline-message {
   line-height: 1.3;
 }
 
-/* Empty state when offline */
 .offline-empty {
   text-align: center;
   padding: 32px 16px;
@@ -1061,21 +1144,21 @@ body.dark-mode .offline-message {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 8px;
-  color: var(--text-primary);
+  color: var(--foreground);
 }
 
 .offline-empty small {
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-size: 12px;
 }
 
-/* Cached data indicator */
 .cached-indicator {
-  background: #e7f3ff;
-  color: #0366d6;
+  background: var(--muted);
+  color: var(--muted-foreground);
   padding: 8px 12px;
   margin-bottom: 12px;
-  border-radius: 4px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
   font-size: 12px;
   display: flex;
   align-items: center;
@@ -1083,22 +1166,21 @@ body.dark-mode .offline-message {
 }
 
 body.dark-mode .cached-indicator {
-  background: #0d2b45;
-  color: #58a6ff;
+  background: var(--muted);
+  color: var(--muted-foreground);
 }
 
 .cached-icon {
   font-size: 14px;
 }
 
-/* Activity items marked as cached */
 .activity-item.cached {
-  border-left: 3px solid #ffc107;
+  border-left: 2px solid var(--muted-foreground);
   opacity: 0.9;
 }
 
 .activity-item.cached::before {
-  content: '💾';
+  content: '';
   position: absolute;
   top: 8px;
   right: 8px;
@@ -1106,120 +1188,83 @@ body.dark-mode .cached-indicator {
   opacity: 0.7;
 }
 
-.loading {
-  padding: 48px 24px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
-/* Dark mode badge colors */
-.activity-type.pr {
-  background: #dcffe4;
-  color: #28a745;
-}
-
-body.dark-mode .activity-type.pr {
-  background: #1b4620;
-  color: #7ee787;
-}
-
-.activity-type.issue {
-  background: #fff5b1;
-  color: #735c0f;
-}
-
-body.dark-mode .activity-type.issue {
-  background: #4b3d1c;
-  color: #e3b341;
-}
-
-.activity-type.release {
-  background: #ddf4ff;
-  color: #0969da;
-}
-
-body.dark-mode .activity-type.release {
-  background: #1c3d5a;
-  color: #58a6ff;
-}
-
-/* Focus indicators for accessibility */
+/* ---- shadcn Focus Ring ---- */
 .filter-btn:focus-visible,
 .toolbar-btn:focus-visible,
 .footer-btn:focus-visible,
 .icon-btn:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: 2px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .search-box input:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: -2px;
-  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 body.dark-mode .search-box input:focus-visible {
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .activity-content:focus-visible {
-  outline: 2px solid var(--link-color);
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
-  border-radius: 4px;
+  border-radius: calc(var(--radius) - 2px);
 }
 
 .action-btn:focus-visible,
 .repo-collapse-btn:focus-visible,
-.repo-snooze-btn:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: 2px;
+.repo-snooze-btn:focus-visible,
+.repo-pin-btn:focus-visible,
+.repo-mark-read-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .text-btn:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: 2px;
-  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+  border-radius: calc(var(--radius) - 2px);
 }
 
 .error-summary:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
-/* Onboarding Styles */
+/* ================================================
+   ONBOARDING STYLES
+   ================================================ */
 .onboarding-view {
   flex: 1;
-  padding: 12px;
+  padding: 16px;
   overflow-y: auto;
   min-height: 0;
 }
 
-/* Custom thin scrollbar styling for onboarding */
 .onboarding-view::-webkit-scrollbar {
   width: 8px;
 }
 
 .onboarding-view::-webkit-scrollbar-track {
   background: transparent;
-  margin: 4px 0;
 }
 
 .onboarding-view::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 4px;
+  background: var(--border);
+  border-radius: 9999px;
   border: 2px solid transparent;
   background-clip: content-box;
   min-height: 40px;
 }
 
 .onboarding-view::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
+  background: var(--muted-foreground);
   background-clip: content-box;
 }
 
 .onboarding-view::-webkit-scrollbar-thumb:active {
-  background: var(--text-primary);
+  background: var(--foreground);
   background-clip: content-box;
 }
 
@@ -1230,23 +1275,23 @@ body.dark-mode .search-box input:focus-visible {
 
 .progress-bar {
   width: 100%;
-  height: 6px;
-  background: var(--bg-hover);
-  border-radius: 3px;
+  height: 4px;
+  background: var(--muted);
+  border-radius: 9999px;
   margin-bottom: 8px;
   overflow: hidden;
 }
 
 .progress-fill {
   height: 100%;
-  background: var(--link-color);
-  border-radius: 3px;
-  transition: width 0.3s ease;
+  background: var(--foreground);
+  border-radius: 9999px;
+  transition: width 300ms ease;
 }
 
 .progress-text {
-  font-size: 14px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--muted-foreground);
   font-weight: 500;
 }
 
@@ -1264,7 +1309,6 @@ body.dark-mode .search-box input:focus-visible {
   display: block;
 }
 
-/* Hide step icon for steps 2-4 to save space */
 .token-step .step-icon,
 .repos-step .step-icon,
 .categories-step .step-icon {
@@ -1272,26 +1316,28 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .onboarding-step h2 {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 10px;
+  color: var(--foreground);
+  margin-bottom: 8px;
+  letter-spacing: -0.025em;
 }
 
 .onboarding-step p {
-  color: var(--text-secondary);
-  line-height: 1.4;
+  color: var(--muted-foreground);
+  line-height: 1.5;
   margin-bottom: 16px;
   max-width: 350px;
   margin-left: auto;
   margin-right: auto;
+  font-size: 14px;
 }
 
 /* Welcome Step */
 .feature-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   margin: 16px 0;
   text-align: left;
 }
@@ -1300,10 +1346,10 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  background: var(--background);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 
 .feature-icon {
@@ -1313,6 +1359,7 @@ body.dark-mode .search-box input:focus-visible {
   justify-content: center;
   width: 20px;
   height: 20px;
+  color: var(--foreground);
 }
 
 .feature-icon svg {
@@ -1321,16 +1368,16 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .step-description {
-  font-size: 15px;
-  color: var(--text-primary);
+  font-size: 14px;
+  color: var(--foreground);
   font-weight: 500;
 }
 
 /* Token Step */
 .token-instructions {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   padding: 16px;
   margin: 16px 0;
   text-align: left;
@@ -1338,35 +1385,36 @@ body.dark-mode .search-box input:focus-visible {
 
 .token-instructions h3 {
   margin-bottom: 10px;
-  color: var(--text-primary);
-  font-size: 15px;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .token-instructions ol {
   margin-left: 20px;
-  color: var(--text-secondary);
-  line-height: 1.4;
+  color: var(--muted-foreground);
+  line-height: 1.5;
   font-size: 14px;
 }
 
 .token-link {
-  color: var(--link-color);
-  text-decoration: none;
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
   font-weight: 500;
 }
 
 .token-link:hover {
-  text-decoration: underline;
+  color: var(--muted-foreground);
 }
 
 .token-input-group {
   display: flex;
   gap: 8px;
   margin: 16px 0;
-  /* Match the width of the token-instructions card */
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   padding: 16px;
 }
 
@@ -1377,74 +1425,75 @@ body.dark-mode .search-box input:focus-visible {
   gap: 6px;
 }
 
+/* shadcn input */
 .token-input {
   flex: 1;
-  padding: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  padding: 8px 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
   font-size: 14px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  background: var(--background);
+  color: var(--foreground);
   letter-spacing: 0.14em;
-  font-size: 15px;
-  font-weight: 700;
+  font-weight: 600;
   text-align: center;
   cursor: pointer;
 }
 
 .token-input:focus {
   outline: none;
-  border-color: var(--link-color);
-  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .token-copy-hint {
   margin: 0;
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
 }
 
+/* shadcn outline button */
 .copy-code-btn {
-  padding: 10px 14px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 600;
+  padding: 8px 14px;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s, border-color 0.2s;
+  transition: all 150ms;
 }
 
 .copy-code-btn:hover:not(:disabled) {
-  background: var(--bg-hover);
-  border-color: var(--link-color);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .copy-code-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
+/* shadcn primary button */
 .validate-btn {
-  padding: 10px 16px;
-  background: var(--link-color);
-  color: white;
+  padding: 8px 16px;
+  background: var(--foreground);
+  color: var(--background);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: opacity 150ms;
 }
 
 .validate-btn:hover {
-  background: #0256cc;
+  opacity: 0.9;
 }
 
 .validate-btn:disabled {
-  background: var(--text-secondary);
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -1457,7 +1506,6 @@ body.dark-mode .search-box input:focus-visible {
   .token-input-group {
     flex-direction: column;
   }
-
   .copy-code-btn,
   .validate-btn {
     width: 100%;
@@ -1471,20 +1519,20 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .status-error {
-  color: #d73a49;
+  color: var(--destructive);
   font-size: 14px;
   font-weight: 500;
 }
 
 .status-loading {
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-size: 14px;
   font-style: italic;
 }
 
 .security-note {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   margin-top: 16px;
   display: flex;
   align-items: center;
@@ -1495,7 +1543,7 @@ body.dark-mode .search-box input:focus-visible {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
-  color: var(--link-color);
+  color: var(--foreground);
 }
 
 /* Repos Step */
@@ -1506,29 +1554,30 @@ body.dark-mode .search-box input:focus-visible {
 
 .popular-repos h3 {
   margin-bottom: 12px;
-  color: var(--text-primary);
-  font-size: 15px;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .repo-suggestions {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .repo-suggestion {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  transition: border-color 0.2s;
+  padding: 10px 12px;
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: background 150ms;
 }
 
 .repo-suggestion:hover {
-  border-color: var(--link-color);
+  background: var(--accent);
 }
 
 .repo-info {
@@ -1537,14 +1586,14 @@ body.dark-mode .search-box input:focus-visible {
 
 .repo-name {
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--foreground);
   margin-bottom: 2px;
   font-size: 14px;
 }
 
 .repo-desc {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   margin-bottom: 4px;
 }
 
@@ -1552,128 +1601,110 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   gap: 8px;
   align-items: center;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .repo-language {
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-weight: 500;
 }
 
 .repo-stars {
-  color: var(--text-secondary);
-  font-size: 11px;
+  color: var(--muted-foreground);
+  font-size: 12px;
 }
 
 .repo-owner {
-  color: var(--link-color);
+  color: var(--foreground);
   font-weight: 600;
 }
 
 .repo-name-text {
-  color: var(--text-primary);
+  color: var(--foreground);
   font-weight: 600;
 }
 
 .repo-loading {
   padding: 20px;
   text-align: center;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-style: italic;
+  font-size: 14px;
 }
 
 .repo-loading.repo-error {
-  color: #d73a49;
+  color: var(--destructive);
   font-style: normal;
 }
 
-/* Loading spinner */
 .repo-loading:not(.repo-error)::before {
   content: "";
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid var(--border-color);
-  border-top-color: var(--link-color);
+  border: 2px solid var(--border);
+  border-top-color: var(--foreground);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-right: 8px;
   vertical-align: middle;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
+/* shadcn primary button (small) */
 .add-repo-btn {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   padding: 0;
-  background: var(--link-color);
-  color: white;
+  background: var(--foreground);
+  color: var(--background);
   border: none;
-  border-radius: 8px;
-  font-size: 18px;
+  border-radius: var(--radius);
+  font-size: 16px;
   font-weight: 400;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: opacity 150ms;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0 1px 3px rgba(3, 102, 214, 0.2);
 }
 
 .add-repo-btn:hover {
-  background: #0256cc;
-  transform: scale(1.05);
-  box-shadow: 0 2px 6px rgba(3, 102, 214, 0.3);
+  opacity: 0.9;
 }
 
 .add-repo-btn:active {
-  transform: scale(0.95);
+  opacity: 0.8;
 }
 
 .add-repo-btn.loading {
-  background: var(--text-secondary);
+  opacity: 0.5;
   cursor: wait;
   animation: pulse 1s ease-in-out infinite;
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.3; }
 }
 
 .add-repo-btn.added {
-  background: #10b981;
+  background: #16A34A;
+  color: white;
   cursor: default;
-  animation: successPop 0.3s ease-out;
+  animation: successPop 0.2s ease-out;
 }
 
 @keyframes successPop {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.15);
-  }
-  100% {
-    transform: scale(1);
-  }
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
 }
 
 .add-repo-btn:disabled {
   cursor: not-allowed;
   opacity: 1;
   transform: none;
-  box-shadow: none;
 }
 
 .manual-repo {
@@ -1682,8 +1713,9 @@ body.dark-mode .search-box input:focus-visible {
 
 .manual-repo h3 {
   margin-bottom: 8px;
-  color: var(--text-primary);
-  font-size: 15px;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .manual-input-group {
@@ -1694,34 +1726,36 @@ body.dark-mode .search-box input:focus-visible {
 
 .repo-input {
   flex: 1;
-  padding: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
   font-size: 14px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  background: var(--background);
+  color: var(--foreground);
 }
 
 .repo-input:focus {
   outline: none;
-  border-color: var(--link-color);
-  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
+/* shadcn primary button */
 .add-btn {
-  padding: 10px 16px;
-  background: var(--link-color);
-  color: white;
+  padding: 0 16px;
+  height: 36px;
+  background: var(--foreground);
+  color: var(--background);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: opacity 150ms;
 }
 
 .add-btn:hover {
-  background: #0256cc;
+  opacity: 0.9;
 }
 
 .repo-status {
@@ -1729,18 +1763,18 @@ body.dark-mode .search-box input:focus-visible {
   min-height: 0;
 }
 
-/* Categories Step - Minimal List Design */
+/* Categories Step */
 .categories-step .step-subtitle {
   margin-top: -8px;
   margin-bottom: 20px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-size: 14px;
 }
 
 .categories-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   margin: 20px 0;
 }
 
@@ -1749,21 +1783,20 @@ body.dark-mode .search-box input:focus-visible {
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  transition: all 0.2s ease;
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: background 150ms;
 }
 
 .category-item:hover {
-  border-color: var(--text-secondary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  background: var(--accent);
 }
 
 .category-icon {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1772,15 +1805,15 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .pr-icon {
-  background: #0969da;
+  background: #16A34A;
 }
 
 .issues-icon {
-  background: #d1242f;
+  background: #D97706;
 }
 
 .releases-icon {
-  background: #8250df;
+  background: #7C3AED;
 }
 
 .category-info {
@@ -1791,13 +1824,13 @@ body.dark-mode .search-box input:focus-visible {
 .category-info h3 {
   font-size: 14px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--foreground);
   margin: 0 0 2px 0;
 }
 
 .category-info p {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   margin: 0;
 }
 
@@ -1818,7 +1851,7 @@ body.dark-mode .search-box input:focus-visible {
 
 .toggle-label > span:first-child {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-weight: 500;
   min-width: 38px;
 }
@@ -1831,35 +1864,36 @@ body.dark-mode .search-box input:focus-visible {
   pointer-events: none;
 }
 
+/* shadcn Switch component */
 .toggle-switch {
   position: relative;
   display: inline-block;
   width: 36px;
   height: 20px;
-  background-color: var(--border-color);
-  border-radius: 20px;
-  transition: all 0.2s ease;
+  background-color: var(--input);
+  border-radius: 9999px;
+  transition: all 150ms;
 }
 
 .toggle-switch:before {
   content: "";
   position: absolute;
-  height: 14px;
-  width: 14px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: var(--background);
+  border-radius: 9999px;
+  transition: transform 150ms;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .toggle-checkbox:checked + .toggle-switch {
-  background-color: #10b981;
+  background-color: var(--foreground);
 }
 
 body.dark-mode .toggle-checkbox:checked + .toggle-switch {
-  background-color: #059669;
+  background-color: var(--foreground);
 }
 
 .toggle-checkbox:checked + .toggle-switch:before {
@@ -1867,40 +1901,37 @@ body.dark-mode .toggle-checkbox:checked + .toggle-switch {
 }
 
 .toggle-checkbox:focus + .toggle-switch {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .toggle-label:hover .toggle-switch {
-  background-color: var(--text-secondary);
   opacity: 0.8;
 }
 
 .toggle-label:hover .toggle-checkbox:checked + .toggle-switch {
-  background-color: #0ea472;
-  opacity: 1;
+  opacity: 0.9;
 }
 
-/* Disabled state for toggle labels */
 .toggle-label.disabled {
-  opacity: 0.4;
+  opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
 
 .toggle-label.disabled > span:first-child {
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
 }
 
 .toggle-checkbox:disabled + .toggle-switch {
-  opacity: 0.4;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .toggle-checkbox:disabled + .toggle-switch:before {
-  opacity: 0.6;
+  opacity: 0.5;
 }
 
-/* Activity Toggle - Matching Settings Page Styles */
+/* Activity Toggle */
 .activity-toggle {
   position: relative;
   display: inline-block;
@@ -1924,22 +1955,22 @@ body.dark-mode .toggle-checkbox:checked + .toggle-switch {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--border-color);
-  transition: all 0.3s ease;
-  border-radius: 24px;
+  background-color: var(--input);
+  transition: all 150ms;
+  border-radius: 9999px;
 }
 
 .toggle-slider:before {
   position: absolute;
   content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: transform 0.3s ease;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
+  background-color: var(--background);
+  transition: transform 150ms;
+  border-radius: 9999px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .activity-toggle input:focus {
@@ -1951,41 +1982,41 @@ body.dark-mode .toggle-checkbox:checked + .toggle-switch {
 }
 
 .activity-toggle input:checked + .toggle-slider {
-  background-color: #10b981;
+  background-color: var(--foreground);
 }
 
 body.dark-mode .activity-toggle input:checked + .toggle-slider {
-  background-color: #059669;
+  background-color: var(--foreground);
 }
 
 .activity-toggle input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .activity-toggle input:checked + .toggle-slider:before {
   transform: translateX(20px);
 }
 
-/* Notification Toggle Specific Styling */
+/* Notification Toggle */
 .notification-toggle .toggle-slider {
-  background-color: var(--border-color);
+  background-color: var(--input);
 }
 
 .notification-toggle input:checked + .toggle-slider {
-  background-color: #3b82f6;
+  background-color: var(--foreground);
 }
 
 body.dark-mode .notification-toggle input:checked + .toggle-slider {
-  background-color: #2563eb;
+  background-color: var(--foreground);
 }
 
 .notification-toggle input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .step-note {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-style: italic;
   margin-top: 16px;
 }
@@ -1998,14 +2029,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .next-steps h3 {
   margin-bottom: 16px;
-  color: var(--text-primary);
-  font-size: 15px;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .tips-grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 12px;
+  gap: 8px;
 }
 
 .tip-item {
@@ -2013,14 +2045,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: flex-start;
   gap: 12px;
   padding: 12px;
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 1px solid var(--border-color);
+  background: var(--background);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 
 .tip-icon {
   flex-shrink: 0;
-  color: var(--link-color);
+  color: var(--foreground);
   margin-top: 2px;
 }
 
@@ -2030,29 +2062,29 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .tip-content strong {
   display: block;
-  color: var(--text-primary);
-  font-size: 13px;
+  color: var(--foreground);
+  font-size: 14px;
   margin-bottom: 4px;
 }
 
 .tip-content p {
   margin: 0;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   font-size: 12px;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .final-tips {
   margin-top: 16px;
   padding: 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
+  background: var(--muted);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 
 .final-tips p {
   margin: 0;
-  font-size: 13px;
+  font-size: 12px;
 }
 
 /* Navigation */
@@ -2061,7 +2093,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   justify-content: space-between;
   align-items: center;
   padding-top: 12px;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--border);
 }
 
 .nav-center {
@@ -2069,51 +2101,50 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   text-align: center;
 }
 
+/* shadcn button variants */
 .onboarding-btn {
   padding: 8px 16px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 150ms;
   border: 1px solid transparent;
 }
 
 .onboarding-btn:focus {
-  outline: 2px solid var(--link-color);
-  outline-offset: 2px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 .onboarding-btn.primary {
-  background: var(--link-color);
-  color: white;
-  border-color: var(--link-color);
+  background: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
 }
 
 .onboarding-btn.primary:hover {
-  background: #0256cc;
+  opacity: 0.9;
 }
 
 .onboarding-btn:disabled {
-  background: var(--text-secondary) !important;
-  color: white !important;
-  border-color: var(--text-secondary) !important;
+  opacity: 0.5 !important;
   cursor: not-allowed !important;
-  opacity: 0.6 !important;
 }
 
 .onboarding-btn:disabled:hover {
-  background: var(--text-secondary) !important;
+  opacity: 0.5 !important;
 }
 
 .onboarding-btn.secondary {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border-color: var(--border-color);
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--input);
 }
 
 .onboarding-btn.secondary:hover {
-  background: var(--bg-hover);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .onboarding-btn.secondary#skipBtn {
@@ -2123,31 +2154,32 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .onboarding-btn.link {
   background: none;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   border: none;
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 4px;
   font-size: 12px;
 }
 
 .onboarding-btn.link:hover {
-  color: var(--link-color);
-  text-decoration: underline;
+  color: var(--foreground);
 }
 
-/* Dark mode adjustments */
+/* Dark mode button overrides */
 body.dark-mode .validate-btn,
 body.dark-mode .add-btn,
 body.dark-mode .add-repo-btn {
-  background: var(--link-color);
+  background: var(--foreground);
+  color: var(--background);
 }
 
 body.dark-mode .validate-btn:hover,
 body.dark-mode .add-btn:hover,
 body.dark-mode .add-repo-btn:hover {
-  background: #1f6feb;
+  opacity: 0.9;
 }
 
-/* Responsive adjustments */
+/* Responsive */
 @media (max-width: 400px) {
   .onboarding-view {
     padding: 15px;

From b74cb53de54be09d74b81ac1bb59dc9b5c610ad7 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:31:50 -0500
Subject: [PATCH 03/42] style: restyle header stats to inline row with dot
 separator

Change .header-stats from column to row layout with a centered dot
separator, and update .header-refresh-btn to a bordered button style
with explicit 32x32 dimensions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 6a9e8d3..71bc316 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -125,24 +125,36 @@ header {
 
 .header-stats {
   display: flex;
-  flex-direction: column;
-  gap: 1px;
-  align-items: flex-end;
+  flex-direction: row;
+  gap: 0;
+  align-items: center;
+}
+
+.header-stats .repo-count::before {
+  content: "\B7";
+  margin: 0 6px;
+  color: var(--muted-foreground);
 }
 
 .header-refresh-btn {
   padding: 6px;
-  background: transparent;
-  border: none;
-  border-radius: calc(var(--radius) - 2px);
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   cursor: pointer;
   color: var(--muted-foreground);
   transition: all 150ms;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header-refresh-btn:hover {
   background: var(--accent);
   color: var(--accent-foreground);
+  border-color: var(--ring);
 }
 
 .header-refresh-btn:focus-visible {

From ca85a85663663f4ffe49cd669378bf6ce235fa6a Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:32:08 -0500
Subject: [PATCH 04/42] style: update filter tabs to filled-pill active state

Remove muted background/padding from .filters container and change
active tab from popped-out white card to filled dark pill style
using --ring color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 71bc316..5b5069c 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -234,13 +234,10 @@ h1 {
   background: var(--background);
 }
 
-/* shadcn Tabs component: muted container, active tab pops out */
+/* shadcn Tabs component: filled-pill active state */
 .filters {
   display: inline-flex;
   align-items: center;
-  background: var(--muted);
-  border-radius: calc(var(--radius) + 2px);
-  padding: 4px;
   gap: 2px;
   height: 36px;
 }
@@ -267,14 +264,16 @@ h1 {
 }
 
 .filter-btn.active {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--ring);
+  color: white;
   font-weight: 600;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow: none;
 }
 
 body.dark-mode .filter-btn.active {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  background: var(--ring);
+  color: var(--background);
+  box-shadow: none;
 }
 
 .toolbar-actions {

From dc317b42905ae5baad087ee46a45becc841b8126 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:32:39 -0500
Subject: [PATCH 05/42] style: convert repo groups to bordered card containers

Add border, border-radius, margin, and overflow:hidden to .repo-group
for a card appearance. Remove sticky positioning from .repo-group-header.
Tighten activity-item padding and remove border on last child.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 5b5069c..332ee7c 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -447,6 +447,10 @@ body.dark-mode .filter-btn.active {
 /* ---- Repo Groups ---- */
 .repo-group {
   position: relative;
+  margin: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .repo-group-header {
@@ -456,9 +460,6 @@ body.dark-mode .filter-btn.active {
   padding: 8px 16px;
   background: var(--muted);
   border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: var(--list-header-height, 0px);
-  z-index: 10;
   cursor: pointer;
   transition: opacity 300ms, transform 300ms, max-height 300ms, padding 300ms, margin 300ms, border-width 300ms;
 }
@@ -642,7 +643,7 @@ body.dark-mode .filter-btn.active {
   display: flex;
   align-items: flex-start;
   gap: 12px;
-  padding: 10px 16px;
+  padding: 10px 12px;
   border-bottom: 1px solid var(--border);
   transition: all 200ms;
   transform-origin: top;
@@ -650,6 +651,10 @@ body.dark-mode .filter-btn.active {
   overflow: hidden;
 }
 
+.activity-item:last-child {
+  border-bottom: none;
+}
+
 .activity-item:hover {
   background: var(--accent);
 }

From f319876ecb308478c1a37224c956d4c5cecac1cc Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:33:09 -0500
Subject: [PATCH 06/42] style: replace colored activity badges with zinc
 dot-pill badges

Replace per-type colored backgrounds with a unified zinc pill badge
using a colored dot via ::before pseudo-element. Add missing
.activity-description style for truncated description text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 68 ++++++++++++++++++++++---------------------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 332ee7c..7a11cca 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -757,54 +757,38 @@ body.dark-mode .filter-btn.active {
   margin-bottom: 2px;
 }
 
-/* shadcn Badge — secondary variant with color */
+/* shadcn Badge — zinc pill with colored dot */
 .activity-type {
   display: inline-flex;
   align-items: center;
+  gap: 4px;
   padding: 1px 6px;
-  border-radius: 9999px;
-  font-size: 12px;
-  font-weight: 500;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
   letter-spacing: -0.01em;
-  border: 1px solid transparent;
   line-height: 1.4;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  color: var(--foreground);
 }
 
-.activity-type.pr {
-  background: #ECFDF5;
-  color: #047857;
-  border-color: #A7F3D0;
-}
-
-.activity-type.issue {
-  background: #FFF7ED;
-  color: #C2410C;
-  border-color: #FED7AA;
-}
-
-.activity-type.release {
-  background: #F5F3FF;
-  color: #6D28D9;
-  border-color: #DDD6FE;
-}
-
-body.dark-mode .activity-type.pr {
-  background: rgba(16, 185, 129, 0.08);
-  color: #6EE7B7;
-  border-color: rgba(16, 185, 129, 0.15);
+.activity-type::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
-body.dark-mode .activity-type.issue {
-  background: rgba(249, 115, 22, 0.08);
-  color: #FDBA74;
-  border-color: rgba(249, 115, 22, 0.15);
-}
+.activity-type.pr::before { background: #22C55E; }
+.activity-type.issue::before { background: #F59E0B; }
+.activity-type.release::before { background: #3B82F6; }
 
-body.dark-mode .activity-type.release {
-  background: rgba(139, 92, 246, 0.08);
-  color: #C4B5FD;
-  border-color: rgba(139, 92, 246, 0.15);
-}
+body.dark-mode .activity-type.pr::before { background: #4ADE80; }
+body.dark-mode .activity-type.issue::before { background: #FBBF24; }
+body.dark-mode .activity-type.release::before { background: #60A5FA; }
 
 .activity-repo {
   font-size: 12px;
@@ -820,6 +804,16 @@ body.dark-mode .activity-type.release {
   font-size: 14px;
 }
 
+.activity-description {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  line-height: 1.3;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .activity-meta {
   font-size: 12px;
   color: var(--muted-foreground);

From fcfdc6d5f27be9d4a1a6cfe8efdbb1c3b6670ae2 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 21:33:20 -0500
Subject: [PATCH 07/42] style: change list header background from muted to
 background

Use var(--background) instead of var(--muted) for .list-header to
blend with the main content area in the Stone theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/popup/popup.css b/popup/popup.css
index 7a11cca..d581d2e 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -417,7 +417,7 @@ body.dark-mode .filter-btn.active {
   justify-content: space-between;
   align-items: center;
   padding: 6px 16px;
-  background: var(--muted);
+  background: var(--background);
   border-bottom: 1px solid var(--border);
   font-size: 12px;
   font-weight: 500;

From 423c0180f2fce811967ac55dfd6de4b88416b5b7 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:13:39 -0500
Subject: [PATCH 08/42] style: replace icons.js with Lucide stroke-based icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 shared/icons.js | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/shared/icons.js b/shared/icons.js
index 880f391..ec36610 100644
--- a/shared/icons.js
+++ b/shared/icons.js
@@ -1,54 +1,54 @@
 /**
- * Shared SVG icon constants
+ * Shared SVG icon constants — Lucide stroke-based icons
  */
 
 /**
- * Bell icon (unmuted state) - GitHub Primer style
+ * Bell icon (unmuted state) - Lucide bell
  */
-export const BELL_ICON = '<path d="M8 1.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 0 0-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 0 0 .006.004l.007.001h10.964l.007-.001a.016.016 0 0 0 .006-.004.016.016 0 0 0 .004-.006l.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.75 1.75 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5zM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.25.25 0 0 0 3 7.947V5z"/><path d="M6.5 13.5a1.5 1.5 0 0 0 3 0"/>';
+export const BELL_ICON = '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>';
 
 /**
- * Bell with slash icon (muted state) - GitHub Primer style
+ * Bell with slash icon (muted state) - Lucide bell-off
  */
-export const BELL_SLASH_ICON = '<path d="M8 1.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 0 0-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 0 0 .006.004l.007.001h10.964l.007-.001a.016.016 0 0 0 .006-.004.016.016 0 0 0 .004-.006l.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.75 1.75 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5zM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.25.25 0 0 0 3 7.947V5z" opacity="0.6"/><path d="M6.5 13.5a1.5 1.5 0 0 0 3 0" opacity="0.6"/><path d="M2.146 2.146a.5.5 0 0 1 .708 0l11 11a.5.5 0 0 1-.708.708l-11-11a.5.5 0 0 1 0-.708z"/>';
+export const BELL_SLASH_ICON = '<path d="M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5"/><path d="M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><line x1="2" x2="22" y1="2" y2="22"/>';
 
 /**
- * Chevron down icon (for collapsible sections)
+ * Chevron down icon (for collapsible sections) - Lucide chevron-down
  */
-export const CHEVRON_DOWN_ICON = '<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>';
+export const CHEVRON_DOWN_ICON = '<path d="m6 9 6 6 6-6"/>';
 
 /**
- * Snooze/clock icon
+ * Snooze/clock icon - Lucide clock
  */
-export const SNOOZE_ICON = '<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"/>';
+export const SNOOZE_ICON = '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>';
 
 /**
- * Check/checkmark icon
+ * Check/checkmark icon - Lucide check
  */
-export const CHECK_ICON = '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>';
+export const CHECK_ICON = '<path d="M20 6 9 17l-5-5"/>';
 
 /**
- * Star icon
+ * Star icon - Lucide star
  */
-export const STAR_ICON = '<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>';
+export const STAR_ICON = '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>';
 
 /**
- * Pin icon (unpinned state)
+ * Pin icon (unpinned state) - Lucide pin
  */
-export const PIN_ICON = '<path d="M4.456.734a1.75 1.75 0 0 1 2.826.504l.613 1.327a3.081 3.081 0 0 0 2.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.749.749 0 1 1-1.06 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.081 3.081 0 0 0-1.707-2.084l-1.327-.613a1.75 1.75 0 0 1-.504-2.826L4.456.734Zm1.548 1.067L2.28 5.525a.25.25 0 0 0 .072.404l1.328.613A4.582 4.582 0 0 1 6.219 9.1l.584 2.454a.25.25 0 0 0 .42.119l5.413-5.413a.25.25 0 0 0-.119-.42L9.963 5.256a4.581 4.581 0 0 1-2.557-2.54l-.613-1.327a.25.25 0 0 0-.404-.072Z"/>';
+export const PIN_ICON = '<line x1="12" x2="12" y1="17" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/>';
 
 /**
- * Pin filled icon (pinned state)
+ * Pin filled icon (pinned state) - Lucide pin with fill
  */
-export const PIN_FILLED_ICON = '<path d="M4.456.734a1.75 1.75 0 0 1 2.826.504l.613 1.327a3.081 3.081 0 0 0 2.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.749.749 0 1 1-1.06 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.081 3.081 0 0 0-1.707-2.084l-1.327-.613a1.75 1.75 0 0 1-.504-2.826L4.456.734Z"/>';
+export const PIN_FILLED_ICON = '<line x1="12" x2="12" y1="17" y2="22"/><path fill="currentColor" d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/>';
 
 /**
- * External link icon (chain link style)
+ * External link icon - Lucide external-link
  */
-export const LINK_ICON = '<path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/>';
+export const LINK_ICON = '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>';
 
 /**
- * Helper to create a complete SVG element
+ * Helper to create a complete SVG element (Lucide stroke-based)
  * @param {string} path - SVG path data
  * @param {number} width - Width in pixels (default: 16)
  * @param {number} height - Height in pixels (default: 16)
@@ -57,7 +57,7 @@ export const LINK_ICON = '<path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25
  */
 export function createSvg(path, width = 16, height = 16, className = '') {
   const classAttr = className ? ` class="${className}"` : '';
-  return `<svg width="${width}" height="${height}" viewBox="0 0 16 16" fill="currentColor"${classAttr}>${path}</svg>`;
+  return `<svg width="${width}" height="${height}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${classAttr}>${path}</svg>`;
 }
 
 /**

From b12cad5981e6f3903dfc3cea0e544e392382a70c Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:15:25 -0500
Subject: [PATCH 09/42] style: replace popup.html inline SVGs with Lucide icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.html | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/popup/popup.html b/popup/popup.html
index 20eb913..c92af06 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -16,9 +16,8 @@ <h1>GitHub Devwatch</h1>
           <span id="repoCount" class="repo-count" aria-live="polite">Watching 0 repos</span>
         </div>
         <button id="refreshBtn" class="footer-btn header-refresh-btn" title="Check for new activity now" aria-label="Check for new activity now" tabindex="0">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="refresh-icon" aria-hidden="true">
-            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="refresh-icon" aria-hidden="true">
+            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>
           </svg>
         </button>
       </div>
@@ -33,13 +32,13 @@ <h1>GitHub Devwatch</h1>
       </div>
       <div class="toolbar-actions">
         <button id="searchBtn" class="toolbar-btn" title="Search activities" aria-label="Search activities" tabindex="0">
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.8 3.8a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11 7a4 4 0 1 0-7.999.001A4 4 0 0 0 11 7Z"/>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
           </svg>
         </button>
         <button id="archiveBtn" class="toolbar-btn" title="Toggle archive view" aria-label="Toggle archive view" tabindex="0">
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0 1 14.25 6H1.75A1.75 1.75 0 0 1 0 4.25Zm1.75-.25a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25ZM2 7.5h12a.5.5 0 0 1 .5.5v6.25a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75V8a.5.5 0 0 1 .5-.5Zm10.5 2a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0 0 1h4a.5.5 0 0 0 .5-.5Z"/>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>
           </svg>
         </button>
       </div>
@@ -63,24 +62,24 @@ <h1>GitHub Devwatch</h1>
       <div class="footer-content">
         <div class="footer-actions">
           <button id="settingsLink" class="footer-btn" title="Open extension settings" aria-label="Open extension settings" tabindex="0">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-              <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
             </svg>
           </button>
           <button id="darkModeBtn" class="footer-btn" title="Toggle theme (System / Light / Dark)" aria-label="Toggle theme (System / Light / Dark)" tabindex="0">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="system-icon" aria-hidden="true">
-              <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8.5 4.5a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 1 0v2Zm0 9a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 1 0v2Zm3.5-3.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Zm-9 0a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1h2Zm7.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0Zm-7.07 7.071a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0Zm0-7.071a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707L5.688 3.649a.5.5 0 0 1 0-.707Zm7.07 7.071a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707l-1.414-1.414a.5.5 0 0 1 0-.707Z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="system-icon" aria-hidden="true">
+              <rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>
             </svg>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="moon-icon hidden" aria-hidden="true">
-              <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon hidden" aria-hidden="true">
+              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
             </svg>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="sun-icon hidden" aria-hidden="true">
-              <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon hidden" aria-hidden="true">
+              <circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>
             </svg>
           </button>
           <button id="helpBtn" class="footer-btn" title="View help and documentation" aria-label="View help and documentation" tabindex="0">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-              <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
             </svg>
           </button>
         </div>

From e9440670ae9f51e68fe1c6a36e2245b39b4a080d Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:16:21 -0500
Subject: [PATCH 10/42] style: replace dom-optimizer inline SVGs with Lucide
 icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 shared/dom-optimizer.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/shared/dom-optimizer.js b/shared/dom-optimizer.js
index 73a1ae5..aa031bd 100644
--- a/shared/dom-optimizer.js
+++ b/shared/dom-optimizer.js
@@ -364,8 +364,8 @@ class ActivityListRenderer {
           <div class="repo-group-header ${isPinned ? 'pinned' : ''}" data-repo="${escapeHtml(repo)}">
             <div class="repo-group-title">
               <button class="repo-collapse-btn" data-repo="${escapeHtml(repo)}" title="${isCollapsed ? 'Expand' : 'Collapse'}" aria-label="${isCollapsed ? 'Expand' : 'Collapse'} ${escapeHtml(repo)} activities">
-                <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" class="chevron ${isCollapsed ? 'collapsed' : ''}">
-                  <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron ${isCollapsed ? 'collapsed' : ''}">
+                  <path d="m6 9 6 6 6-6"/>
                 </svg>
               </button>
               <span class="repo-group-name">${escapeHtml(repo)}</span>
@@ -373,20 +373,20 @@ class ActivityListRenderer {
             </div>
             <div class="repo-group-actions">
               <button class="repo-pin-btn ${isPinned ? 'pinned' : ''}" data-repo="${escapeHtml(repo)}" title="${isPinned ? 'Unpin repository' : 'Pin repository'}" aria-label="${isPinned ? 'Unpin' : 'Pin'} ${escapeHtml(repo)} repository">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   ${isPinned
-                    ? '<path d="M4.456.734a1.75 1.75 0 012.826.504l.613 1.327a3.081 3.081 0 002.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.75.75 0 11-1.061 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.081 3.081 0 00-1.707-2.084l-1.327-.613a1.75 1.75 0 01-.504-2.826L4.456.734z"/>'
-                    : '<path d="M4.456.734a1.75 1.75 0 012.826.504l.613 1.327a3.081 3.081 0 002.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.75.75 0 11-1.061 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.081 3.081 0 00-1.707-2.084l-1.327-.613a1.75 1.75 0 01-.504-2.826L4.456.734zM5.92 1.866a.25.25 0 00-.404-.072L1.794 5.516a.25.25 0 00.072.404l1.328.613A4.582 4.582 0 015.73 9.63l.584 2.454a.25.25 0 00.42.12l5.47-5.47a.25.25 0 00-.12-.42L9.63 5.73a4.581 4.581 0 01-3.098-2.537L5.92 1.866z"/>'}
+                    ? '<line x1="12" x2="12" y1="17" y2="22"/><path fill="currentColor" d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/>'
+                    : '<line x1="12" x2="12" y1="17" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/>'}
                 </svg>
               </button>
               ${repoUnreadCount > 0 ? `
               <button class="repo-mark-read-btn" data-repo="${escapeHtml(repo)}" title="Mark all as read" aria-label="Mark all ${escapeHtml(repo)} activities as read">
-                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   ${CHECK_ICON}
                 </svg>
               </button>` : ''}
               <button class="repo-snooze-btn" data-repo="${escapeHtml(repo)}" title="Snooze this repository" aria-label="Snooze ${escapeHtml(repo)} repository">
-                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   ${SNOOZE_ICON}
                 </svg>
               </button>
@@ -462,8 +462,8 @@ class ActivityListRenderer {
         </div>
         <div class="activity-actions">
           ${!isRead ? `<button class="action-btn mark-read-btn" data-action="mark-read" title="Mark as done" aria-label="Mark ${sanitizedTitle} as done">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 6 9 17l-5-5"/>
             </svg>
           </button>` : ''}
         </div>

From d183fc0999560dd3235107715b7da952d5f70b7c Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:18:22 -0500
Subject: [PATCH 11/42] style: replace onboarding inline SVGs with Lucide icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/views/onboarding-view.js | 64 +++++++++++++++-------------------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/popup/views/onboarding-view.js b/popup/views/onboarding-view.js
index 19a747a..cbb3936 100644
--- a/popup/views/onboarding-view.js
+++ b/popup/views/onboarding-view.js
@@ -157,7 +157,7 @@ function renderRepoSuggestion(repo) {
         <div class="repo-desc">${description}</div>
         <div class="repo-meta">
           ${language ? `<span class="repo-language">${language}</span>` : ''}
-          ${stars ? `<span class="repo-stars"><svg class="svg-inline" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>${stars}</span>` : ''}
+          ${stars ? `<span class="repo-stars"><svg class="svg-inline" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>${stars}</span>` : ''}
         </div>
       </div>
       <button class="add-repo-btn" data-repo="${escapeHtml(repoFullName)}">+</button>
@@ -293,24 +293,24 @@ function renderWelcomeStep() {
       <div class="feature-list">
         <div class="feature-item">
           <span class="feature-icon">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
             </svg>
           </span>
           <span>Browser notifications for new activity</span>
         </div>
         <div class="feature-item">
           <span class="feature-icon">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.293a1 1 0 00-1.414-1.414L10 9.172 8.707 7.879a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10l1.293 1.293a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
             </svg>
           </span>
           <span>Regular activity updates from watched repositories</span>
         </div>
         <div class="feature-item">
           <span class="feature-icon">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
             </svg>
           </span>
           <span>Customizable filters and preferences</span>
@@ -376,8 +376,8 @@ async function renderTokenStep() {
     </div>
 
     <p class="security-note">
-      <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+      <svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
       </svg>
       Your GitHub sign-in stays in Chrome session storage for the current browser session only. It's used only for GitHub API access and is cleared when the browser session ends.
     </p>
@@ -436,8 +436,8 @@ function renderCategoriesStep() {
       <div class="categories-list">
         <div class="category-item" data-category="pullRequests">
           <div class="category-icon pr-icon">
-            <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/>
             </svg>
           </div>
           <div class="category-info">
@@ -460,9 +460,8 @@ function renderCategoriesStep() {
 
         <div class="category-item" data-category="issues">
           <div class="category-icon issues-icon">
-            <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
-              <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>
             </svg>
           </div>
           <div class="category-info">
@@ -485,8 +484,8 @@ function renderCategoriesStep() {
 
         <div class="category-item" data-category="releases">
           <div class="category-icon releases-icon">
-            <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M1 3.5c0-.626.292-1.165.7-1.59.406-.422.956-.767 1.579-1.041C4.525.32 6.195 0 8 0c1.805 0 3.475.32 4.722.869.622.274 1.172.62 1.578 1.04.408.426.7.965.7 1.591v9c0 .626-.292 1.165-.7 1.59-.406.422-.956.767-1.579 1.041C11.476 15.68 9.806 16 8 16c-1.805 0-3.475-.32-4.721-.869-.623-.274-1.173-.62-1.579-1.04-.408-.426-.7-.965-.7-1.591Zm1.5 0c0 .133.058.318.282.551.227.237.591.483 1.101.707C4.898 5.205 6.353 5.5 8 5.5c1.646 0 3.101-.295 4.118-.742.508-.224.873-.471 1.1-.708.224-.232.282-.417.282-.55 0-.133-.058-.318-.282-.551-.227-.237-.591-.483-1.101-.707C11.102 1.795 9.647 1.5 8 1.5c-1.646 0-3.101.295-4.118.742-.508.224-.873.471-1.1.708-.224.232-.282.417-.282.55Zm0 4.5c0 .133.058.318.282.551.227.237.591.483 1.101.707C4.898 9.705 6.353 10 8 10c1.646 0 3.101-.295 4.118-.742.508-.224.873-.471 1.1-.708.224-.232.282-.417.282-.55V5.724c-.241.15-.503.286-.779.407C11.395 6.711 9.77 7 8 7c-1.771 0-3.395-.29-4.721-.869A6.31 6.31 0 0 1 2.5 5.724ZM2.282 12.551C2.058 12.318 2 12.133 2 12v-2.276c.241.15.503.286.779.407C4.105 10.711 5.73 11 7.5 11h1c1.771 0 3.395-.29 4.721-.869.276-.12.538-.257.779-.407V12c0 .133-.058.318-.282.551-.227.237-.591.483-1.101.707C11.602 13.705 10.147 14 8.5 14h-1c-1.646 0-3.101-.295-4.118-.742-.508-.224-.873-.471-1.1-.708Z"/>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
             </svg>
           </div>
           <div class="category-info">
@@ -517,10 +516,8 @@ function renderCompleteStep() {
   return `
     <div class="onboarding-step complete-step">
       <div class="step-icon">
-        <svg width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
-          <circle cx="32" cy="32" r="24" fill="#0366d6"/>
-          <path d="M32 8C18.7 8 8 18.7 8 32s10.7 24 24 24 24-10.7 24-24S45.3 8 32 8zm0 4c11 0 20 9 20 20s-9 20-20 20-20-9-20-20 9-20 20-20z"/>
-          <path d="M24 32l8 8 16-16" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
         </svg>
       </div>
       <h2>You're All Set!</h2>
@@ -531,8 +528,8 @@ function renderCompleteStep() {
         <div class="tips-grid">
           <div class="tip-item">
             <div class="tip-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
               </svg>
             </div>
             <div class="tip-content">
@@ -543,10 +540,8 @@ function renderCompleteStep() {
 
           <div class="tip-item">
             <div class="tip-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 18L18 6M6 6l12 12"/>
-                <circle cx="9" cy="9" r="2"/>
-                <circle cx="15" cy="15" r="2"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5"/><path d="M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><line x1="2" x2="22" y1="2" y2="22"/>
               </svg>
             </div>
             <div class="tip-content">
@@ -557,10 +552,8 @@ function renderCompleteStep() {
 
           <div class="tip-item">
             <div class="tip-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
-                <path d="M2 17l10 5 10-5"/>
-                <path d="M2 12l10 5 10-5"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22.54 12.43-10 4.58a2 2 0 0 1-1.66 0l-9.4-4.3"/><path d="m22.54 16.43-10 4.58a2 2 0 0 1-1.66 0l-9.4-4.3"/>
               </svg>
             </div>
             <div class="tip-content">
@@ -571,9 +564,8 @@ function renderCompleteStep() {
 
           <div class="tip-item">
             <div class="tip-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
               </svg>
             </div>
             <div class="tip-content">
@@ -584,8 +576,8 @@ function renderCompleteStep() {
 
           <div class="tip-item">
             <div class="tip-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M1 4v16h22V4H1zm8 2H3v2h6V6zm0 4H3v2h6v-2zm0 4H3v2h6v-2zm8 8H9v2h8v-2zm0-4H9v2h8v-2zm0-4H9v2h8v-2zm0-4H9v2h8V6z"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>
               </svg>
             </div>
             <div class="tip-content">
@@ -834,7 +826,7 @@ function attachRepoButtonListeners() {
           btn.classList.remove('loading');
           btn.classList.add('added');
           btn.disabled = true;
-          btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/></svg>';
+          btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
         } else {
           // Handle error
           btn.classList.remove('loading');

From 81230467799709a2a72f03a6695d7b7894a8e77b Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:18:37 -0500
Subject: [PATCH 12/42] style: replace activity-controller warning icon with
 Lucide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/controllers/activity-controller.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/popup/controllers/activity-controller.js b/popup/controllers/activity-controller.js
index 0053deb..76b67e3 100644
--- a/popup/controllers/activity-controller.js
+++ b/popup/controllers/activity-controller.js
@@ -183,8 +183,8 @@ export function updateRateLimit(rateLimit) {
 
   // Show in yellow warning when low
   rateLimitInfo.innerHTML = `
-    <svg class="svg-inline" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-      <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575zm1.763.707a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368zm.53 3.996v2.5a.75.75 0 11-1.5 0v-2.5a.75.75 0 111.5 0zM9 11a1 1 0 11-2 0 1 1 0 012 0z"/>
+    <svg class="svg-inline" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>
     </svg>
     ${rateLimit.remaining}/${rateLimit.limit} API calls remaining
   `;

From 370185cb688bea5c4648beae10400433b1f04a08 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:19:15 -0500
Subject: [PATCH 13/42] style: polish onboarding CSS for Stone theme

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index d581d2e..f8f16de 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1285,7 +1285,7 @@ body.dark-mode .search-box input:focus-visible {
 
 .progress-bar {
   width: 100%;
-  height: 4px;
+  height: 3px;
   background: var(--muted);
   border-radius: 9999px;
   margin-bottom: 8px;
@@ -1317,6 +1317,11 @@ body.dark-mode .search-box input:focus-visible {
   font-size: 48px;
   margin-bottom: 16px;
   display: block;
+  color: var(--foreground);
+}
+
+.step-icon svg {
+  display: inline-block;
 }
 
 .token-step .step-icon,
@@ -1355,7 +1360,7 @@ body.dark-mode .search-box input:focus-visible {
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   padding: 10px 12px;
   background: var(--background);
   border-radius: var(--radius);
@@ -1804,9 +1809,9 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .category-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;

From 6c8c5e29f4e14e2d42893957c54107a7493291b0 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:23:55 -0500
Subject: [PATCH 14/42] fix: address code review findings from icon/theme
 migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update icon test assertions for Lucide stroke-based SVGs (viewBox,
  fill→stroke, polygon/circle element types)
- Replace old Octicon warning icon in error-handler.js with Lucide
- Add missing width/height to onboarding info-icon SVG
- Use var(--background) instead of literal white for filter active state
- Remove redundant dark-mode filter override

All 779 tests pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css                |  8 +-------
 popup/views/onboarding-view.js |  2 +-
 shared/error-handler.js        |  4 ++--
 tests/icons.test.js            | 12 +++++++-----
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index f8f16de..97e919a 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -264,15 +264,9 @@ h1 {
 }
 
 .filter-btn.active {
-  background: var(--ring);
-  color: white;
-  font-weight: 600;
-  box-shadow: none;
-}
-
-body.dark-mode .filter-btn.active {
   background: var(--ring);
   color: var(--background);
+  font-weight: 600;
   box-shadow: none;
 }
 
diff --git a/popup/views/onboarding-view.js b/popup/views/onboarding-view.js
index cbb3936..89c5bae 100644
--- a/popup/views/onboarding-view.js
+++ b/popup/views/onboarding-view.js
@@ -376,7 +376,7 @@ async function renderTokenStep() {
     </div>
 
     <p class="security-note">
-      <svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <svg class="info-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
       </svg>
       Your GitHub sign-in stays in Chrome session storage for the current browser session only. It's used only for GitHub API access and is cleared when the browser session ends.
diff --git a/shared/error-handler.js b/shared/error-handler.js
index 77d247f..8d63d0b 100644
--- a/shared/error-handler.js
+++ b/shared/error-handler.js
@@ -212,8 +212,8 @@ export function showError(elementId, error, response = null, context = {}, durat
   element.innerHTML = `
     <div class="error-toast" id="${errorId}" role="alert" aria-live="assertive">
       <div class="error-summary" data-details-id="${errorId}-details">
-        <svg class="error-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575zm1.763.707a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368zm.53 3.996v2.5a.75.75 0 11-1.5 0v-2.5a.75.75 0 111.5 0zM9 11a1 1 0 11-2 0 1 1 0 012 0z"/>
+        <svg class="error-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>
         </svg>
         <span class="error-brief">${safeTitle}</span>
         <span class="error-expand">›</span>
diff --git a/tests/icons.test.js b/tests/icons.test.js
index 2e2dbc5..22d965f 100644
--- a/tests/icons.test.js
+++ b/tests/icons.test.js
@@ -34,7 +34,7 @@ describe('Icons', () => {
 
     test('SNOOZE_ICON is defined', () => {
       expect(SNOOZE_ICON).toBeDefined();
-      expect(SNOOZE_ICON).toContain('<path');
+      expect(SNOOZE_ICON).toContain('<circle');
     });
 
     test('CHECK_ICON is defined', () => {
@@ -44,7 +44,7 @@ describe('Icons', () => {
 
     test('STAR_ICON is defined', () => {
       expect(STAR_ICON).toBeDefined();
-      expect(STAR_ICON).toContain('<path');
+      expect(STAR_ICON).toContain('<polygon');
     });
 
     test('PIN_ICON is defined', () => {
@@ -68,7 +68,7 @@ describe('Icons', () => {
       const svg = createSvg('<path d="M0 0"/>');
       expect(svg).toContain('width="16"');
       expect(svg).toContain('height="16"');
-      expect(svg).toContain('viewBox="0 0 16 16"');
+      expect(svg).toContain('viewBox="0 0 24 24"');
       expect(svg).toContain('<path d="M0 0"/>');
     });
 
@@ -88,9 +88,11 @@ describe('Icons', () => {
       expect(svg).not.toContain('class=');
     });
 
-    test('includes fill="currentColor"', () => {
+    test('includes stroke attributes for Lucide icons', () => {
       const svg = createSvg('<path d="M0 0"/>');
-      expect(svg).toContain('fill="currentColor"');
+      expect(svg).toContain('fill="none"');
+      expect(svg).toContain('stroke="currentColor"');
+      expect(svg).toContain('stroke-width="2"');
     });
   });
 

From 9e4ba89910cb4b32ae4b7a6a95361fbd09eeee6b Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:31:49 -0500
Subject: [PATCH 15/42] style: add Inter font import, redesign onboarding for
 shadcn Stone

- Add Google Fonts Inter import to popup.html
- Category icons: replace solid colored squares with zinc cards
  with colored left border accents (matching dot badge pattern)
- Welcome feature items: larger icon containers, muted bg, hover
- Tip items on completion: icon containers, muted bg, hover, tighter
- Completion heading: uppercase label style for "What's next?"
- Step headings: 20px/700 weight for more presence
- Overall: more consistent card treatment across all onboarding steps

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css  | 162 ++++++++++++++++++++++++++++++++++-------------
 popup/popup.html |   1 +
 2 files changed, 118 insertions(+), 45 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 97e919a..0d1abd0 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1308,14 +1308,19 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .step-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  display: block;
-  color: var(--foreground);
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-icon img {
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .step-icon svg {
-  display: inline-block;
+  color: var(--foreground);
 }
 
 .token-step .step-icon,
@@ -1325,11 +1330,11 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .onboarding-step h2 {
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 20px;
+  font-weight: 700;
   color: var(--foreground);
-  margin-bottom: 8px;
-  letter-spacing: -0.025em;
+  margin-bottom: 6px;
+  letter-spacing: -0.03em;
 }
 
 .onboarding-step p {
@@ -1339,26 +1344,31 @@ body.dark-mode .search-box input:focus-visible {
   max-width: 350px;
   margin-left: auto;
   margin-right: auto;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 /* Welcome Step */
 .feature-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin: 16px 0;
+  gap: 8px;
+  margin: 20px 0;
   text-align: left;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  background: var(--background);
+  gap: 14px;
+  padding: 12px 14px;
+  background: var(--muted);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  transition: background 150ms;
+}
+
+.feature-item:hover {
+  background: var(--accent);
 }
 
 .feature-icon {
@@ -1366,20 +1376,30 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--background);
+  border: 1px solid var(--border);
   color: var(--foreground);
 }
 
 .feature-icon svg {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 
-.step-description {
-  font-size: 14px;
-  color: var(--foreground);
+.feature-item span:last-child {
+  font-size: 13px;
   font-weight: 500;
+  color: var(--foreground);
+  line-height: 1.4;
+}
+
+.step-description {
+  font-size: 13px;
+  color: var(--muted-foreground);
+  font-weight: 400;
 }
 
 /* Token Step */
@@ -1791,38 +1811,53 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px;
-  background: var(--background);
+  padding: 14px;
+  background: var(--muted);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  transition: background 150ms;
+  transition: all 150ms;
 }
 
 .category-item:hover {
   background: var(--accent);
+  border-color: var(--ring);
 }
 
 .category-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
   flex-shrink: 0;
+  border: 1px solid var(--border);
+  background: var(--muted);
+  color: var(--foreground);
 }
 
 .pr-icon {
-  background: #16A34A;
+  border-left: 3px solid #22C55E;
 }
 
 .issues-icon {
-  background: #D97706;
+  border-left: 3px solid #F59E0B;
 }
 
 .releases-icon {
-  background: #7C3AED;
+  border-left: 3px solid #3B82F6;
+}
+
+body.dark-mode .pr-icon {
+  border-left-color: #4ADE80;
+}
+
+body.dark-mode .issues-icon {
+  border-left-color: #FBBF24;
+}
+
+body.dark-mode .releases-icon {
+  border-left-color: #60A5FA;
 }
 
 .category-info {
@@ -2031,38 +2066,63 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 /* Complete Step */
+.complete-step .step-icon svg {
+  width: 48px;
+  height: 48px;
+  color: var(--foreground);
+}
+
 .next-steps {
-  margin: 16px 0;
+  margin: 20px 0;
   text-align: left;
 }
 
 .next-steps h3 {
-  margin-bottom: 16px;
-  color: var(--foreground);
-  font-size: 14px;
+  margin-bottom: 12px;
+  color: var(--muted-foreground);
+  font-size: 12px;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .tips-grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 8px;
+  gap: 6px;
 }
 
 .tip-item {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
-  padding: 12px;
-  background: var(--background);
+  padding: 10px 12px;
+  background: var(--muted);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  transition: background 150ms;
+}
+
+.tip-item:hover {
+  background: var(--accent);
 }
 
 .tip-icon {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--background);
+  border: 1px solid var(--border);
   color: var(--foreground);
-  margin-top: 2px;
+}
+
+.tip-icon svg {
+  width: 14px;
+  height: 14px;
 }
 
 .tip-content {
@@ -2072,25 +2132,37 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .tip-content strong {
   display: block;
   color: var(--foreground);
-  font-size: 14px;
-  margin-bottom: 4px;
+  font-size: 13px;
+  margin-bottom: 2px;
+  font-weight: 600;
 }
 
 .tip-content p {
   margin: 0;
   color: var(--muted-foreground);
   font-size: 12px;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 .final-tips {
   margin-top: 16px;
-  padding: 12px;
+  padding: 10px 12px;
   background: var(--muted);
   border-radius: var(--radius);
   border: 1px solid var(--border);
 }
 
+.final-tips p {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.final-tips strong {
+  color: var(--foreground);
+}
+
 .final-tips p {
   margin: 0;
   font-size: 12px;
diff --git a/popup/popup.html b/popup/popup.html
index c92af06..067b6f1 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GitHub Devwatch</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>

From c176bb47090ca5f8c2645ffd764a8b53125bd975 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 22:55:18 -0500
Subject: [PATCH 16/42] style: modernize onboarding with borderless cards,
 bigger type, hover lift

Major visual overhaul of onboarding flow:
- Remove borders everywhere, use muted bg fills instead (modern look)
- Larger border-radius (12px) on all card surfaces
- Bigger headings (22px/700), tighter letter-spacing (-0.04em)
- Icon containers with box-shadow instead of borders
- Hover lift effect (translateY -1px + shadow) on all interactive cards
- Cubic-bezier easing on all transitions for smoother feel
- Category icons back to solid color backgrounds (40x40, 10px radius)
- Tips use 36x36 icon containers with shadow
- Buttons get shadow + hover lift treatment
- Progress bar thinner (2px), smoother animation
- More whitespace throughout (24px padding, bigger gaps)
- Add Inter font import to popup.html

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 237 +++++++++++++++++++++++++-----------------------
 1 file changed, 126 insertions(+), 111 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 0d1abd0..213125c 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1241,13 +1241,14 @@ body.dark-mode .search-box input:focus-visible {
    ================================================ */
 .onboarding-view {
   flex: 1;
-  padding: 16px;
+  padding: 24px 20px;
   overflow-y: auto;
   min-height: 0;
+  background: var(--background);
 }
 
 .onboarding-view::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .onboarding-view::-webkit-scrollbar-track {
@@ -1257,30 +1258,22 @@ body.dark-mode .search-box input:focus-visible {
 .onboarding-view::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 9999px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-  min-height: 40px;
 }
 
 .onboarding-view::-webkit-scrollbar-thumb:hover {
   background: var(--muted-foreground);
-  background-clip: content-box;
-}
-
-.onboarding-view::-webkit-scrollbar-thumb:active {
-  background: var(--foreground);
-  background-clip: content-box;
 }
 
+/* Progress — thin line, no text label clutter */
 .onboarding-progress {
-  margin-bottom: 20px;
+  margin-bottom: 28px;
   text-align: center;
 }
 
 .progress-bar {
   width: 100%;
-  height: 3px;
-  background: var(--muted);
+  height: 2px;
+  background: var(--border);
   border-radius: 9999px;
   margin-bottom: 8px;
   overflow: hidden;
@@ -1290,33 +1283,35 @@ body.dark-mode .search-box input:focus-visible {
   height: 100%;
   background: var(--foreground);
   border-radius: 9999px;
-  transition: width 300ms ease;
+  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .progress-text {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
   font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 .onboarding-content {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
 }
 
 .onboarding-step {
   text-align: center;
 }
 
+/* Step icon — hero treatment */
 .step-icon {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .step-icon img {
-  border-radius: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .step-icon svg {
@@ -1329,46 +1324,50 @@ body.dark-mode .search-box input:focus-visible {
   display: none;
 }
 
+/* Headings — large, tight, confident */
 .onboarding-step h2 {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 700;
   color: var(--foreground);
-  margin-bottom: 6px;
-  letter-spacing: -0.03em;
+  margin-bottom: 8px;
+  letter-spacing: -0.04em;
+  line-height: 1.1;
 }
 
 .onboarding-step p {
   color: var(--muted-foreground);
-  line-height: 1.5;
-  margin-bottom: 16px;
-  max-width: 350px;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  max-width: 340px;
   margin-left: auto;
   margin-right: auto;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 /* Welcome Step */
 .feature-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin: 20px 0;
+  gap: 10px;
+  margin: 24px 0;
   text-align: left;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 12px 14px;
+  gap: 16px;
+  padding: 16px;
   background: var(--muted);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  transition: background 150ms;
+  border-radius: 12px;
+  border: none;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .feature-item:hover {
   background: var(--accent);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .feature-icon {
@@ -1376,21 +1375,21 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
   background: var(--background);
-  border: 1px solid var(--border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   color: var(--foreground);
 }
 
 .feature-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
 }
 
 .feature-item span:last-child {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--foreground);
   line-height: 1.4;
@@ -1400,15 +1399,16 @@ body.dark-mode .search-box input:focus-visible {
   font-size: 13px;
   color: var(--muted-foreground);
   font-weight: 400;
+  margin-top: 4px;
 }
 
 /* Token Step */
 .token-instructions {
   background: var(--muted);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  margin: 16px 0;
+  border: none;
+  border-radius: 12px;
+  padding: 20px;
+  margin: 20px 0;
   text-align: left;
 }
 
@@ -1440,11 +1440,11 @@ body.dark-mode .search-box input:focus-visible {
 .token-input-group {
   display: flex;
   gap: 8px;
-  margin: 16px 0;
+  margin: 20px 0;
   background: var(--muted);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
+  border: none;
+  border-radius: 12px;
+  padding: 20px;
 }
 
 .token-code-stack {
@@ -1504,21 +1504,24 @@ body.dark-mode .search-box input:focus-visible {
   cursor: not-allowed;
 }
 
-/* shadcn primary button */
+/* Primary button */
 .validate-btn {
-  padding: 8px 16px;
+  padding: 10px 20px;
   background: var(--foreground);
   color: var(--background);
   border: none;
-  border-radius: var(--radius);
+  border-radius: 10px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: opacity 150ms;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .validate-btn:hover {
   opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .validate-btn:disabled {
@@ -1591,22 +1594,24 @@ body.dark-mode .search-box input:focus-visible {
 .repo-suggestions {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .repo-suggestion {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
-  background: var(--background);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  transition: background 150ms;
+  padding: 12px 14px;
+  background: var(--muted);
+  border: none;
+  border-radius: 12px;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .repo-suggestion:hover {
   background: var(--accent);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .repo-info {
@@ -1679,31 +1684,35 @@ body.dark-mode .search-box input:focus-visible {
   vertical-align: middle;
 }
 
-/* shadcn primary button (small) */
+/* Add repo button */
 .add-repo-btn {
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: var(--foreground);
   color: var(--background);
   border: none;
-  border-radius: var(--radius);
+  border-radius: 8px;
   font-size: 16px;
   font-weight: 400;
   cursor: pointer;
-  transition: opacity 150ms;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .add-repo-btn:hover {
   opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .add-repo-btn:active {
   opacity: 0.8;
+  transform: translateY(0);
 }
 
 .add-repo-btn.loading {
@@ -1803,61 +1812,60 @@ body.dark-mode .search-box input:focus-visible {
 .categories-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin: 20px 0;
+  gap: 10px;
+  margin: 24px 0;
 }
 
 .category-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 14px;
+  gap: 14px;
+  padding: 16px;
   background: var(--muted);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  transition: all 150ms;
+  border: none;
+  border-radius: 12px;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .category-item:hover {
   background: var(--accent);
-  border-color: var(--ring);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .category-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius);
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 1px solid var(--border);
-  background: var(--muted);
-  color: var(--foreground);
+  color: white;
 }
 
 .pr-icon {
-  border-left: 3px solid #22C55E;
+  background: #22C55E;
 }
 
 .issues-icon {
-  border-left: 3px solid #F59E0B;
+  background: #F59E0B;
 }
 
 .releases-icon {
-  border-left: 3px solid #3B82F6;
+  background: #3B82F6;
 }
 
 body.dark-mode .pr-icon {
-  border-left-color: #4ADE80;
+  background: #16A34A;
 }
 
 body.dark-mode .issues-icon {
-  border-left-color: #FBBF24;
+  background: #D97706;
 }
 
 body.dark-mode .releases-icon {
-  border-left-color: #60A5FA;
+  background: #2563EB;
 }
 
 .category-info {
@@ -2067,44 +2075,47 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Complete Step */
 .complete-step .step-icon svg {
-  width: 48px;
-  height: 48px;
+  width: 56px;
+  height: 56px;
   color: var(--foreground);
+  stroke-width: 1.5;
 }
 
 .next-steps {
-  margin: 20px 0;
+  margin: 24px 0;
   text-align: left;
 }
 
 .next-steps h3 {
-  margin-bottom: 12px;
+  margin-bottom: 14px;
   color: var(--muted-foreground);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
 }
 
 .tips-grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 6px;
+  gap: 8px;
 }
 
 .tip-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
+  gap: 14px;
+  padding: 14px 16px;
   background: var(--muted);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  transition: background 150ms;
+  border-radius: 12px;
+  border: none;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .tip-item:hover {
   background: var(--accent);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .tip-icon {
@@ -2112,11 +2123,11 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
   background: var(--background);
-  border: 1px solid var(--border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   color: var(--foreground);
 }
 
@@ -2145,15 +2156,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .final-tips {
-  margin-top: 16px;
-  padding: 10px 12px;
+  margin-top: 20px;
+  padding: 14px 16px;
   background: var(--muted);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
+  border-radius: 12px;
+  border: none;
 }
 
 .final-tips p {
-  font-size: 12px;
+  font-size: 13px;
   color: var(--muted-foreground);
   margin: 0;
   line-height: 1.5;
@@ -2161,6 +2172,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .final-tips strong {
   color: var(--foreground);
+  font-weight: 600;
 }
 
 .final-tips p {
@@ -2182,14 +2194,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   text-align: center;
 }
 
-/* shadcn button variants */
+/* Button variants */
 .onboarding-btn {
-  padding: 8px 16px;
-  border-radius: var(--radius);
+  padding: 10px 20px;
+  border-radius: 10px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 150ms;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid transparent;
 }
 
@@ -2202,10 +2214,13 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   background: var(--foreground);
   color: var(--background);
   border-color: var(--foreground);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .onboarding-btn.primary:hover {
   opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .onboarding-btn:disabled {

From a10475248ae46dd3ad7de9a9df92a96ecb95e124 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 23:06:03 -0500
Subject: [PATCH 17/42] =?UTF-8?q?style:=20fix=20onboarding=20layout=20?=
 =?UTF-8?q?=E2=80=94=20no=20scroll,=20vertically=20centered,=20tighter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- onboarding-view: overflow hidden, flex column layout
- onboarding-content: flex-grow to fill space, vertically centered
- onboarding-nav: margin-top auto to anchor at bottom
- Token step: grid layout for input group, tighter padding
- Security note: smaller text (11px), less margin
- Progress section: less bottom margin
- Headings: tighter margins (6px/12px)
- Repo suggestions: slightly smaller padding
- All steps now fit within 600px without scrolling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 popup/popup.css | 73 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 213125c..b66adf4 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1241,10 +1241,12 @@ body.dark-mode .search-box input:focus-visible {
    ================================================ */
 .onboarding-view {
   flex: 1;
-  padding: 24px 20px;
-  overflow-y: auto;
+  padding: 20px 20px 12px;
+  overflow: hidden;
   min-height: 0;
   background: var(--background);
+  display: flex;
+  flex-direction: column;
 }
 
 .onboarding-view::-webkit-scrollbar {
@@ -1264,10 +1266,11 @@ body.dark-mode .search-box input:focus-visible {
   background: var(--muted-foreground);
 }
 
-/* Progress — thin line, no text label clutter */
+/* Progress — thin line */
 .onboarding-progress {
-  margin-bottom: 28px;
+  margin-bottom: 20px;
   text-align: center;
+  flex-shrink: 0;
 }
 
 .progress-bar {
@@ -1294,7 +1297,11 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .onboarding-content {
-  margin-bottom: 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 0;
 }
 
 .onboarding-step {
@@ -1329,19 +1336,19 @@ body.dark-mode .search-box input:focus-visible {
   font-size: 22px;
   font-weight: 700;
   color: var(--foreground);
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   letter-spacing: -0.04em;
   line-height: 1.1;
 }
 
 .onboarding-step p {
   color: var(--muted-foreground);
-  line-height: 1.6;
-  margin-bottom: 20px;
+  line-height: 1.5;
+  margin-bottom: 12px;
   max-width: 340px;
   margin-left: auto;
   margin-right: auto;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 /* Welcome Step */
@@ -1407,8 +1414,8 @@ body.dark-mode .search-box input:focus-visible {
   background: var(--muted);
   border: none;
   border-radius: 12px;
-  padding: 20px;
-  margin: 20px 0;
+  padding: 16px;
+  margin: 16px 0;
   text-align: left;
 }
 
@@ -1438,20 +1445,38 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .token-input-group {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   gap: 8px;
-  margin: 20px 0;
+  margin: 16px 0;
   background: var(--muted);
   border: none;
   border-radius: 12px;
-  padding: 20px;
+  padding: 16px;
+}
+
+.token-input-group .token-code-stack {
+  grid-column: 1 / -1;
+}
+
+.token-input-group .validate-btn {
+  grid-column: 1 / -1;
 }
 
 .token-code-stack {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
+}
+
+/* When token-input-group is column, make copy+validate sit in a row */
+.token-input-group .copy-code-btn,
+.token-input-group .validate-btn {
+  width: auto;
+}
+
+.token-input-group > :not(.token-code-stack) {
+  flex-shrink: 0;
 }
 
 /* shadcn input */
@@ -1563,12 +1588,13 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .security-note {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
-  margin-top: 16px;
+  margin-top: 10px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 6px;
+  line-height: 1.4;
 }
 
 .info-icon {
@@ -1601,10 +1627,10 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 14px;
+  padding: 10px 12px;
   background: var(--muted);
   border: none;
-  border-radius: 12px;
+  border-radius: 10px;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -2185,8 +2211,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 12px;
-  border-top: 1px solid var(--border);
+  padding-top: 16px;
+  margin-top: auto;
+  flex-shrink: 0;
 }
 
 .nav-center {

From 74b74c77f081edfcd4cf856137c86ab759195520 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sat, 14 Mar 2026 23:54:10 -0500
Subject: [PATCH 18/42] style: fix dark mode contrast + add OAuth client ID +
 tighten token step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dark mode options fixes:
- Tone down --link-color from #FAFAFA to #D4D4D8 in dark mode
- Replace all hardcoded 'color: white' with 'color: var(--background)'
  for step numbers, badges, primary buttons, chips, action buttons
- Elements no longer blast bright white against dark backgrounds

Popup token step fixes:
- Token input + Copy button now sit on one row (was stacked 4 rows)
- Hidden redundant hint text (placeholder covers it)
- Tightened margins on instructions, input group, security note
- Thinner stroke-width (1.75) on footer and toolbar icons

Add GitHub OAuth client ID (Ov23li7Mi1dWEgmZTOzB) to config —
public client IDs are safe to expose per OAuth spec (Device Flow
doesn't use a client secret).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 options/options.css | 223 +++++++++++++++++++++++++++-----------------
 popup/popup.css     |  46 ++++-----
 shared/config.js    |   2 +-
 3 files changed, 160 insertions(+), 111 deletions(-)

diff --git a/options/options.css b/options/options.css
index e5b35a6..e1ad823 100644
--- a/options/options.css
+++ b/options/options.css
@@ -1,51 +1,100 @@
+/* ================================================
+   DEVWATCH OPTIONS — shadcn/ui Zinc Theme
+   ================================================ */
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+/* ---- shadcn Design Tokens (Zinc) ---- */
 :root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f6f8fa;
-  --bg-tertiary: #f6f8fa;
-  --border-color: #e1e4e8;
-  --border-color-dark: #d0d7de;
-  --text-primary: #24292e;
-  --text-secondary: #586069;
-  --link-color: #0366d6;
-  --success-bg: #d4edda;
-  --success-text: #155724;
-  --success-border: #c3e6cb;
-  --error-bg: #f8d7da;
-  --error-text: #721c24;
-  --error-border: #f5c6cb;
-  --danger-bg: #dc3545;
-  --danger-hover: #c82333;
-
-  }
+  --background: #FFFFFF;
+  --foreground: #09090B;
+  --card: #FFFFFF;
+  --card-foreground: #09090B;
+  --muted: #F4F4F5;
+  --muted-foreground: #71717A;
+  --accent: #F4F4F5;
+  --accent-foreground: #18181B;
+  --border: #E4E4E7;
+  --input: #E4E4E7;
+  --ring: #18181B;
+  --radius: 0.5rem;
+  --destructive: #EF4444;
+  --destructive-foreground: #FAFAFA;
+
+  /* Mapped aliases for backward compat */
+  --bg-primary: var(--background);
+  --bg-secondary: var(--muted);
+  --bg-tertiary: var(--accent);
+  --bg-hover: var(--accent);
+  --border-color: var(--border);
+  --border-color-dark: var(--border);
+  --border-hover: #A1A1AA;
+  --input-bg: var(--background);
+  --hover-bg: var(--accent);
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --link-color: #18181B;
+  --link-hover: #09090B;
+  --link-hover-color: #09090B;
+  --accent-color: #18181B;
+  --font-size-base: 14px;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --danger-bg: var(--destructive);
+  --danger-hover: #DC2626;
+}
 
 body.dark-mode {
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #161b22;
-  --border-color: #30363d;
-  --border-color-dark: #30363d;
-  --text-primary: #c9d1d9;
-  --text-secondary: #8b949e;
-  --link-color: #58a6ff;
-  --success-bg: #1b4620;
-  --success-text: #7ee787;
-  --success-border: #2d5a2d;
-  --error-bg: #4b1e1e;
-  --error-text: #f8d7da;
-  --error-border: #6e2a2a;
-  --danger-bg: #dc3545;
-  --danger-hover: #c82333;
+  --background: #09090B;
+  --foreground: #FAFAFA;
+  --card: #09090B;
+  --card-foreground: #FAFAFA;
+  --muted: #27272A;
+  --muted-foreground: #A1A1AA;
+  --accent: #27272A;
+  --accent-foreground: #FAFAFA;
+  --border: #27272A;
+  --input: #27272A;
+  --ring: #D4D4D8;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #FAFAFA;
+
+  --bg-primary: var(--background);
+  --bg-secondary: var(--muted);
+  --bg-tertiary: var(--accent);
+  --bg-hover: var(--accent);
+  --border-color: var(--border);
+  --border-color-dark: var(--border);
+  --border-hover: #52525B;
+  --input-bg: var(--background);
+  --hover-bg: var(--accent);
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --link-color: #D4D4D8;
+  --link-hover: #E4E4E7;
+  --link-hover-color: #E4E4E7;
+  --accent-color: #D4D4D8;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --danger-bg: var(--destructive);
+  --danger-hover: #991B1B;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  font-size: 15px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
   background: var(--bg-secondary);
   color: var(--text-primary);
   padding: 0;
@@ -132,7 +181,7 @@ body {
 /* Warning text block */
 .warning-text-block {
   color: #d97706;
-  font-size: 13px;
+  font-size: 14px;
   margin-top: 4px;
   display: flex;
   align-items: center;
@@ -338,12 +387,12 @@ h1 {
     flex-direction: column;
     gap: 4px;
     padding: 8px 12px;
-    font-size: 11px;
+    font-size: 12px;
     min-width: 70px;
   }
 
   .tab-button span {
-    font-size: 11px;
+    font-size: 12px;
     text-align: center;
   }
 
@@ -411,7 +460,7 @@ input[type="password"]:focus,
 select:focus {
   outline: none;
   border-color: var(--link-color);
-  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
 }
 
 .help-text {
@@ -465,7 +514,7 @@ select:focus {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .info-box-compact {
@@ -477,7 +526,7 @@ select:focus {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .info-box-compact .info-icon {
@@ -503,7 +552,7 @@ button:hover {
 
 button.primary {
   background: var(--link-color);
-  color: white;
+  color: var(--background);
   border-color: var(--link-color);
 }
 
@@ -579,9 +628,9 @@ button.danger:hover {
 
 .chip input[type="radio"]:checked + label {
   background: var(--link-color);
-  color: white;
+  color: var(--background);
   border-color: var(--link-color);
-  box-shadow: 0 2px 8px rgba(3, 102, 214, 0.3);
+  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.2);
 }
 
 .chip input[type="radio"]:focus + label {
@@ -650,7 +699,7 @@ button.danger:hover {
 }
 
 .activity-info p {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
   margin: 0;
   line-height: 1.4;
@@ -748,7 +797,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .notification-toggle input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.15);
 }
 
 /* Disabled notification toggle state */
@@ -826,14 +875,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .number-input-group:focus-within {
   border-color: var(--link-color);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
 }
 
 .styled-number-input {
   border: none;
   background: transparent;
   padding: 10px 16px;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--text-primary);
   width: 80px;
@@ -892,7 +941,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   width: 40px;
   height: 40px;
   background: var(--link-color);
-  color: white;
+  color: var(--background);
   border-radius: 50%;
   font-size: 18px;
   font-weight: 700;
@@ -1025,7 +1074,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .data-card.danger-card:hover {
-  border-color: #dc3545;
+  border-color: var(--destructive);
 }
 
 .data-icon {
@@ -1036,7 +1085,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .danger-card .data-icon {
-  color: #dc3545;
+  color: var(--destructive);
 }
 
 .data-info {
@@ -1051,7 +1100,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .data-info p {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
   margin: 0;
   line-height: 1.4;
@@ -1063,7 +1112,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   gap: 6px;
   padding: 8px 16px;
   background: var(--link-color);
-  color: white;
+  color: var(--background);
   border: none;
   border-radius: 6px;
   font-size: 14px;
@@ -1076,16 +1125,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .data-action-btn:hover {
   background: var(--link-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.2);
 }
 
 .data-action-btn.danger-btn {
-  background: #dc3545;
+  background: var(--destructive);
 }
 
 .data-action-btn.danger-btn:hover {
-  background: #c82333;
-  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+  background: var(--danger-hover);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
 }
 
 /* Help Tab Styles */
@@ -1103,7 +1152,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .help-hero h2 {
-  font-size: 28px;
+  font-size: 30px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0 0 8px;
@@ -1206,14 +1255,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .resource-content h4 {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0 0 4px;
 }
 
 .resource-content p {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
   margin: 0;
   line-height: 1.4;
@@ -1264,7 +1313,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .changelog-content h2 {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0 0 16px;
@@ -1280,7 +1329,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .changelog-content h4 {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 16px 0 8px;
@@ -1309,8 +1358,8 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   background: var(--bg-secondary);
   padding: 2px 6px;
   border-radius: 4px;
-  font-family: 'Courier New', monospace;
-  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 14px;
   color: var(--link-color);
 }
 
@@ -1484,7 +1533,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .subsection-title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text-secondary);
   margin-bottom: 12px;
@@ -1522,7 +1571,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .repo-name {
   display: flex;
   align-items: center;
-  font-family: 'Monaco', 'Courier New', monospace;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-primary);
@@ -1530,7 +1579,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .repo-description {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
   margin-bottom: 8px;
   line-height: 1.4;
@@ -1611,7 +1660,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .repo-section-title .help-text {
   margin: 0;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .repo-section-actions {
@@ -1629,9 +1678,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   height: 28px;
   padding: 0 8px;
   background: var(--link-color);
-  color: white;
+  color: var(--background);
   border-radius: 14px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   margin-left: 4px;
 }
@@ -1767,7 +1816,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   border: 1px solid var(--border-color-dark);
   border-radius: 6px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--text-secondary);
   transition: all 0.2s;
@@ -1946,7 +1995,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 /* Import buttons when inside panel - make them smaller */
 .repo-panel .import-btn {
   padding: 6px 12px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .repo-panel .import-icon {
@@ -2033,7 +2082,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .close-modal {
   background: none;
   border: none;
-  font-size: 28px;
+  font-size: 24px;
   color: var(--text-secondary);
   cursor: pointer;
   padding: 0;
@@ -2431,7 +2480,7 @@ select:focus-visible {
 body.dark-mode input[type="text"]:focus-visible,
 body.dark-mode input[type="password"]:focus-visible,
 body.dark-mode select:focus-visible {
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
+  box-shadow: 0 0 0 3px rgba(212, 212, 216, 0.15);
 }
 
 .nav-links a:focus-visible {
@@ -2536,7 +2585,7 @@ body.dark-mode select:focus-visible {
 }
 
 .empty-repos-tips .tip-note {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
   line-height: 1.6;
   margin: 0;
@@ -2571,13 +2620,13 @@ body.dark-mode select:focus-visible {
 .snoozed-repo-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-family: 'Monaco', 'Courier New', monospace;
-  font-size: 15px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 14px;
   margin-bottom: 4px;
 }
 
 .snoozed-repo-time {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-secondary);
 }
 
@@ -2593,7 +2642,7 @@ body.dark-mode select:focus-visible {
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
@@ -2602,7 +2651,7 @@ body.dark-mode select:focus-visible {
 .unsnooze-btn:hover {
   background: var(--danger-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
 }
 
 .unsnooze-btn:focus-visible {
@@ -2669,7 +2718,7 @@ body.dark-mode .snooze-expiry-warning {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: bold;
+  font-weight: 700;
   font-size: 12px;
   color: white;
 }
@@ -2762,7 +2811,7 @@ body.dark-mode .snooze-expiry-warning {
 }
 
 .setup-btn:hover {
-  background: #0256cc;
+  background: var(--link-hover);
   transform: translateY(-1px);
 }
 
@@ -2824,7 +2873,7 @@ body.dark-mode .setup-btn {
 }
 
 body.dark-mode .setup-btn:hover {
-  background: #1f6feb;
+  background: var(--link-hover);
 }
 
 /* Settings Footer */
@@ -2882,7 +2931,7 @@ body.dark-mode .setup-btn:hover {
 .footer-column a {
   color: var(--link-color);
   text-decoration: none;
-  font-size: 13px;
+  font-size: 14px;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -2906,7 +2955,7 @@ body.dark-mode .setup-btn:hover {
 
 .footer-bottom p {
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: 14px;
   margin: 0;
 }
 
@@ -2930,7 +2979,7 @@ body.dark-mode .setup-btn:hover {
   }
 
   .toast {
-    font-size: 13px;
+    font-size: 14px;
     padding: 10px 12px;
   }
 
diff --git a/popup/popup.css b/popup/popup.css
index b66adf4..68dd5d8 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -292,6 +292,7 @@ h1 {
 .toolbar-btn svg {
   width: 15px;
   height: 15px;
+  stroke-width: 1.75;
 }
 
 .toolbar-btn:hover {
@@ -851,6 +852,7 @@ footer {
 .footer-btn svg {
   width: 16px;
   height: 16px;
+  stroke-width: 1.75;
 }
 
 .footer-btn:hover {
@@ -1414,8 +1416,8 @@ body.dark-mode .search-box input:focus-visible {
   background: var(--muted);
   border: none;
   border-radius: 12px;
-  padding: 16px;
-  margin: 16px 0;
+  padding: 14px;
+  margin: 12px 0;
   text-align: left;
 }
 
@@ -1445,38 +1447,36 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .token-input-group {
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
+  flex-direction: column;
   gap: 8px;
-  margin: 16px 0;
+  margin: 12px 0 8px;
   background: var(--muted);
   border: none;
   border-radius: 12px;
-  padding: 16px;
+  padding: 14px;
 }
 
-.token-input-group .token-code-stack {
-  grid-column: 1 / -1;
+.token-code-stack {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.token-input-group .validate-btn {
-  grid-column: 1 / -1;
+.token-code-stack .token-input {
+  flex: 1;
 }
 
-.token-code-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.token-code-stack .token-copy-hint {
+  display: none;
 }
 
-/* When token-input-group is column, make copy+validate sit in a row */
-.token-input-group .copy-code-btn,
-.token-input-group .validate-btn {
-  width: auto;
+.token-input-group .copy-code-btn {
+  flex-shrink: 0;
 }
 
-.token-input-group > :not(.token-code-stack) {
-  flex-shrink: 0;
+.token-input-group .validate-btn {
+  width: 100%;
 }
 
 /* shadcn input */
@@ -1555,8 +1555,8 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .token-status {
-  margin: 12px 0;
-  min-height: 20px;
+  margin: 4px 0;
+  min-height: 0;
 }
 
 @media (max-width: 560px) {
@@ -1590,7 +1590,7 @@ body.dark-mode .search-box input:focus-visible {
 .security-note {
   font-size: 11px;
   color: var(--muted-foreground);
-  margin-top: 10px;
+  margin-top: 4px;
   display: flex;
   align-items: flex-start;
   gap: 6px;
diff --git a/shared/config.js b/shared/config.js
index 7641fcb..0a0ff3d 100644
--- a/shared/config.js
+++ b/shared/config.js
@@ -18,7 +18,7 @@ export const API_CONFIG = {
 
 // OAuth Configuration
 export const OAUTH_CONFIG = {
-  CLIENT_ID: 'YOUR_GITHUB_OAUTH_CLIENT_ID',
+  CLIENT_ID: 'Ov23li7Mi1dWEgmZTOzB',
   CLIENT_ID_STORAGE_KEY: 'githubOAuthClientId',
   SCOPES: ['repo', 'read:user'],
   DEVICE_CODE_URL: 'https://github.com/login/device/code',

From d6007b283394eb63840f47e9ed384887cf8d05f9 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:51:29 -0500
Subject: [PATCH 19/42] feat: add shared themes.css with 6 color theme token
 sets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 shared/themes.css | 497 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 497 insertions(+)
 create mode 100644 shared/themes.css

diff --git a/shared/themes.css b/shared/themes.css
new file mode 100644
index 0000000..f50fbf4
--- /dev/null
+++ b/shared/themes.css
@@ -0,0 +1,497 @@
+/* ================================================
+   DEVWATCH — Color Theme Tokens
+   ================================================
+   Themes: polar (default), graphite, nightfall, obsidian, sand, terminal-ledger
+   Each theme defines light + dark mode token sets.
+   The body[data-color-theme] attribute selects the active theme.
+   ================================================ */
+
+/* ---- Polar (default fallback) ---- */
+:root {
+  --background: #F0F5F7;
+  --foreground: #14212A;
+  --card: #F9FCFD;
+  --card-foreground: #14212A;
+  --primary: #14212A;
+  --primary-foreground: #F0F8FA;
+  --secondary: #DDE8EC;
+  --secondary-foreground: #14212A;
+  --muted: #E3ECF0;
+  --muted-foreground: #5A7080;
+  --accent: #D6E2E8;
+  --accent-foreground: #14212A;
+  --border: rgba(20, 33, 42, 0.11);
+  --input: rgba(20, 33, 42, 0.11);
+  --ring: #14212A;
+  --radius: 0.875rem;
+  --destructive: #EF4444;
+  --destructive-foreground: #F0F8FA;
+
+  --accent-color: #0D9488;
+  --bg-gradient-glow: rgba(13, 148, 136, 0.09);
+  --bg-unread: rgba(13, 148, 136, 0.06);
+  --link-color: #14212A;
+  --link-hover-color: #0A1520;
+  --badge-bg: #14212A;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --danger-bg: var(--destructive);
+  --danger-hover: #D13F3F;
+
+  /* Aliases */
+  --bg-primary: var(--background);
+  --bg-secondary: var(--muted);
+  --bg-tertiary: var(--accent);
+  --bg-hover: var(--accent);
+  --border-color: var(--border);
+  --border-color-dark: var(--border);
+  --border-hover: rgba(20, 33, 42, 0.22);
+  --input-bg: var(--background);
+  --hover-bg: var(--accent);
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --link-hover: var(--link-hover-color);
+  --font-size-base: 14px;
+}
+
+body.dark-mode {
+  --background: #0A1218;
+  --foreground: #E0ECF2;
+  --card: #101B22;
+  --card-foreground: #E0ECF2;
+  --primary: #E0ECF2;
+  --primary-foreground: #0A1218;
+  --secondary: #172630;
+  --secondary-foreground: #E0ECF2;
+  --muted: #13202A;
+  --muted-foreground: #8AA4B4;
+  --accent: #1B2E3A;
+  --accent-foreground: #E0ECF2;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #E0ECF2;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #E0ECF2;
+
+  --accent-color: #2DD4BF;
+  --bg-gradient-glow: rgba(45, 212, 191, 0.06);
+  --bg-unread: rgba(45, 212, 191, 0.06);
+  --link-color: #E0ECF2;
+  --link-hover-color: #F0F8FA;
+  --badge-bg: #E0ECF2;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --danger-bg: var(--destructive);
+  --danger-hover: #B92F2F;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Polar (explicit) ---- */
+body[data-color-theme="polar"] {
+  --background: #F0F5F7;
+  --foreground: #14212A;
+  --card: #F9FCFD;
+  --card-foreground: #14212A;
+  --primary: #14212A;
+  --primary-foreground: #F0F8FA;
+  --secondary: #DDE8EC;
+  --secondary-foreground: #14212A;
+  --muted: #E3ECF0;
+  --muted-foreground: #5A7080;
+  --accent: #D6E2E8;
+  --accent-foreground: #14212A;
+  --border: rgba(20, 33, 42, 0.11);
+  --input: rgba(20, 33, 42, 0.11);
+  --ring: #14212A;
+  --destructive: #EF4444;
+  --destructive-foreground: #F0F8FA;
+  --accent-color: #0D9488;
+  --bg-gradient-glow: rgba(13, 148, 136, 0.09);
+  --bg-unread: rgba(13, 148, 136, 0.06);
+  --link-color: #14212A;
+  --link-hover-color: #0A1520;
+  --badge-bg: #14212A;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(20, 33, 42, 0.22);
+}
+
+body[data-color-theme="polar"].dark-mode {
+  --background: #0A1218;
+  --foreground: #E0ECF2;
+  --card: #101B22;
+  --card-foreground: #E0ECF2;
+  --primary: #E0ECF2;
+  --primary-foreground: #0A1218;
+  --secondary: #172630;
+  --secondary-foreground: #E0ECF2;
+  --muted: #13202A;
+  --muted-foreground: #8AA4B4;
+  --accent: #1B2E3A;
+  --accent-foreground: #E0ECF2;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #E0ECF2;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #E0ECF2;
+  --accent-color: #2DD4BF;
+  --bg-gradient-glow: rgba(45, 212, 191, 0.06);
+  --bg-unread: rgba(45, 212, 191, 0.06);
+  --link-color: #E0ECF2;
+  --link-hover-color: #F0F8FA;
+  --badge-bg: #E0ECF2;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Graphite ---- */
+body[data-color-theme="graphite"] {
+  --background: #F4F4F5;
+  --foreground: #18181B;
+  --card: #FAFAFA;
+  --card-foreground: #18181B;
+  --primary: #18181B;
+  --primary-foreground: #FAFAFA;
+  --secondary: #E4E4E7;
+  --secondary-foreground: #18181B;
+  --muted: #E8E8EB;
+  --muted-foreground: #71717A;
+  --accent: #E0E0E4;
+  --accent-foreground: #18181B;
+  --border: rgba(24, 24, 27, 0.12);
+  --input: rgba(24, 24, 27, 0.12);
+  --ring: #18181B;
+  --destructive: #EF4444;
+  --destructive-foreground: #FAFAFA;
+  --accent-color: #6366F1;
+  --bg-gradient-glow: rgba(99, 102, 241, 0.10);
+  --bg-unread: rgba(99, 102, 241, 0.06);
+  --link-color: #18181B;
+  --link-hover-color: #09090B;
+  --badge-bg: #18181B;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(24, 24, 27, 0.22);
+}
+
+body[data-color-theme="graphite"].dark-mode {
+  --background: #09090B;
+  --foreground: #FAFAFA;
+  --card: #111113;
+  --card-foreground: #FAFAFA;
+  --primary: #FAFAFA;
+  --primary-foreground: #09090B;
+  --secondary: #1C1C1F;
+  --secondary-foreground: #FAFAFA;
+  --muted: #161618;
+  --muted-foreground: #A1A1AA;
+  --accent: #202023;
+  --accent-foreground: #FAFAFA;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.09);
+  --ring: #FAFAFA;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #FAFAFA;
+  --accent-color: #818CF8;
+  --bg-gradient-glow: rgba(129, 140, 248, 0.07);
+  --bg-unread: rgba(129, 140, 248, 0.07);
+  --link-color: #FAFAFA;
+  --link-hover-color: #FFFFFF;
+  --badge-bg: #FAFAFA;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Nightfall ---- */
+body[data-color-theme="nightfall"] {
+  --background: #F5F2EE;
+  --foreground: #221E1A;
+  --card: #FDFBF8;
+  --card-foreground: #221E1A;
+  --primary: #221E1A;
+  --primary-foreground: #FBF8F4;
+  --secondary: #E9E4DD;
+  --secondary-foreground: #221E1A;
+  --muted: #EDE8E2;
+  --muted-foreground: #7A7167;
+  --accent: #E3DDD5;
+  --accent-foreground: #221E1A;
+  --border: rgba(34, 30, 26, 0.13);
+  --input: rgba(34, 30, 26, 0.13);
+  --ring: #221E1A;
+  --destructive: #EF4444;
+  --destructive-foreground: #FBF8F4;
+  --accent-color: #E87B00;
+  --bg-gradient-glow: rgba(232, 123, 0, 0.09);
+  --bg-unread: rgba(232, 123, 0, 0.06);
+  --link-color: #221E1A;
+  --link-hover-color: #120F0C;
+  --badge-bg: #221E1A;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(34, 30, 26, 0.24);
+}
+
+body[data-color-theme="nightfall"].dark-mode {
+  --background: #131110;
+  --foreground: #F2ECE4;
+  --card: #1A1715;
+  --card-foreground: #F2ECE4;
+  --primary: #F2ECE4;
+  --primary-foreground: #131110;
+  --secondary: #221F1B;
+  --secondary-foreground: #F2ECE4;
+  --muted: #1D1A17;
+  --muted-foreground: #A89E92;
+  --accent: #272320;
+  --accent-foreground: #F2ECE4;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.09);
+  --ring: #F2ECE4;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #F2ECE4;
+  --accent-color: #F5A623;
+  --bg-gradient-glow: rgba(245, 166, 35, 0.06);
+  --bg-unread: rgba(245, 166, 35, 0.07);
+  --link-color: #F2ECE4;
+  --link-hover-color: #FFF8F1;
+  --badge-bg: #F2ECE4;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Obsidian ---- */
+body[data-color-theme="obsidian"] {
+  --background: #F3F3F2;
+  --foreground: #1A1A19;
+  --card: #FBFBFA;
+  --card-foreground: #1A1A19;
+  --primary: #1A1A19;
+  --primary-foreground: #F7F7F6;
+  --secondary: #E6E6E4;
+  --secondary-foreground: #1A1A19;
+  --muted: #EAEAE8;
+  --muted-foreground: #6E6E6A;
+  --accent: #E0E0DE;
+  --accent-foreground: #1A1A19;
+  --border: rgba(26, 26, 25, 0.12);
+  --input: rgba(26, 26, 25, 0.12);
+  --ring: #1A1A19;
+  --destructive: #EF4444;
+  --destructive-foreground: #F7F7F6;
+  --accent-color: #10B981;
+  --bg-gradient-glow: rgba(16, 185, 129, 0.08);
+  --bg-unread: rgba(16, 185, 129, 0.06);
+  --link-color: #1A1A19;
+  --link-hover-color: #0A0A09;
+  --badge-bg: #1A1A19;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(26, 26, 25, 0.22);
+}
+
+body[data-color-theme="obsidian"].dark-mode {
+  --background: #0A0A09;
+  --foreground: #EBEBEA;
+  --card: #121211;
+  --card-foreground: #EBEBEA;
+  --primary: #EBEBEA;
+  --primary-foreground: #0A0A09;
+  --secondary: #1E1E1C;
+  --secondary-foreground: #EBEBEA;
+  --muted: #171716;
+  --muted-foreground: #9C9C96;
+  --accent: #222220;
+  --accent-foreground: #EBEBEA;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #EBEBEA;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #EBEBEA;
+  --accent-color: #34D399;
+  --bg-gradient-glow: rgba(52, 211, 153, 0.05);
+  --bg-unread: rgba(52, 211, 153, 0.06);
+  --link-color: #EBEBEA;
+  --link-hover-color: #FFFFFF;
+  --badge-bg: #EBEBEA;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Sand ---- */
+body[data-color-theme="sand"] {
+  --background: #F5F0E8;
+  --foreground: #261A14;
+  --card: #FBF8F3;
+  --card-foreground: #261A14;
+  --primary: #261A14;
+  --primary-foreground: #FAF5EE;
+  --secondary: #E9E2D6;
+  --secondary-foreground: #261A14;
+  --muted: #EDE6DC;
+  --muted-foreground: #7A6E62;
+  --accent: #E3DBCF;
+  --accent-foreground: #261A14;
+  --border: rgba(38, 26, 20, 0.13);
+  --input: rgba(38, 26, 20, 0.13);
+  --ring: #261A14;
+  --destructive: #EF4444;
+  --destructive-foreground: #FAF5EE;
+  --accent-color: #9F1239;
+  --bg-gradient-glow: rgba(159, 18, 57, 0.08);
+  --bg-unread: rgba(159, 18, 57, 0.05);
+  --link-color: #261A14;
+  --link-hover-color: #150D08;
+  --badge-bg: #261A14;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(38, 26, 20, 0.24);
+}
+
+body[data-color-theme="sand"].dark-mode {
+  --background: #110E0C;
+  --foreground: #F0E8DC;
+  --card: #181411;
+  --card-foreground: #F0E8DC;
+  --primary: #F0E8DC;
+  --primary-foreground: #110E0C;
+  --secondary: #211C18;
+  --secondary-foreground: #F0E8DC;
+  --muted: #1C1814;
+  --muted-foreground: #AA9E90;
+  --accent: #262019;
+  --accent-foreground: #F0E8DC;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.09);
+  --ring: #F0E8DC;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #F0E8DC;
+  --accent-color: #F43F5E;
+  --bg-gradient-glow: rgba(244, 63, 94, 0.05);
+  --bg-unread: rgba(244, 63, 94, 0.06);
+  --link-color: #F0E8DC;
+  --link-hover-color: #FFF8F1;
+  --badge-bg: #F0E8DC;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}
+
+/* ---- Terminal Ledger (original) ---- */
+body[data-color-theme="terminal-ledger"] {
+  --background: #F6F1EA;
+  --foreground: #201B16;
+  --card: #FFFDF9;
+  --card-foreground: #201B16;
+  --primary: #201B16;
+  --primary-foreground: #FFF8F1;
+  --secondary: #ECE5DB;
+  --secondary-foreground: #201B16;
+  --muted: #F1EADF;
+  --muted-foreground: #756A60;
+  --accent: #ECE4DA;
+  --accent-foreground: #201B16;
+  --border: rgba(57, 44, 33, 0.14);
+  --input: rgba(57, 44, 33, 0.14);
+  --ring: #201B16;
+  --destructive: #EF4444;
+  --destructive-foreground: #FFF8F1;
+  --accent-color: #D3A24B;
+  --bg-gradient-glow: rgba(211, 162, 75, 0.12);
+  --bg-unread: rgba(32, 27, 22, 0.045);
+  --link-color: #201B16;
+  --link-hover-color: #120F0C;
+  --badge-bg: #201B16;
+  --success-bg: #F0FDF4;
+  --success-text: #166534;
+  --success-border: #BBF7D0;
+  --error-bg: #FEF2F2;
+  --error-text: #991B1B;
+  --error-border: #FECACA;
+  --border-hover: rgba(57, 44, 33, 0.24);
+}
+
+body[data-color-theme="terminal-ledger"].dark-mode {
+  --background: #121110;
+  --foreground: #F5EFE8;
+  --card: #181614;
+  --card-foreground: #F5EFE8;
+  --primary: #F5EFE8;
+  --primary-foreground: #121110;
+  --secondary: #211D19;
+  --secondary-foreground: #F5EFE8;
+  --muted: #1D1916;
+  --muted-foreground: #AEA399;
+  --accent: #26211D;
+  --accent-foreground: #F5EFE8;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.09);
+  --ring: #F5EFE8;
+  --destructive: #7F1D1D;
+  --destructive-foreground: #F5EFE8;
+  --accent-color: #D3A24B;
+  --bg-gradient-glow: rgba(211, 162, 75, 0.08);
+  --bg-unread: rgba(255, 255, 255, 0.035);
+  --link-color: #F5EFE8;
+  --link-hover-color: #FFF8F1;
+  --badge-bg: #F5EFE8;
+  --success-bg: #052E16;
+  --success-text: #86EFAC;
+  --success-border: #14532D;
+  --error-bg: #450A0A;
+  --error-text: #FCA5A5;
+  --error-border: #7F1D1D;
+  --border-hover: rgba(255, 255, 255, 0.16);
+}

From c5706f194e34c6077a20f28c890328347055a42a Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:52:40 -0500
Subject: [PATCH 20/42] feat: link shared themes.css from popup and options
 HTML

---
 options/options.html | 14 ++++++++------
 popup/popup.html     |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/options/options.html b/options/options.html
index 570ba9d..c79d300 100644
--- a/options/options.html
+++ b/options/options.html
@@ -3,7 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>GitHub Devwatch - Settings</title>
+  <title>GitHub DevWatch - Settings</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../shared/themes.css">
   <link rel="stylesheet" href="options.css">
 </head>
 <body>
@@ -58,7 +60,7 @@ <h2>Settings</h2>
     <div class="tab-panel" id="panel-setup" role="tabpanel" data-tab="setup" aria-labelledby="tab-setup">
     <section class="section">
       <h2>Getting Started</h2>
-      <p class="help-text">Follow these steps to set up GitHub DevWatch</p>
+      <p class="help-text">Set up DevWatch and shape the review queue the way you work.</p>
 
       <div class="setup-steps">
         <div class="setup-step setup-step-primary">
@@ -67,12 +69,12 @@ <h2>Getting Started</h2>
               <div class="step-number">1</div>
 	            <div class="step-title-section">
 	                <h3>Connect GitHub</h3>
-	                <p>Sign in once so DevWatch can check the repositories you want to follow.</p>
+	                <p>Sign in once so DevWatch can pull activity for the repositories you follow.</p>
 	              </div>
 	            </div>
 
 	            <div class="token-form-section">
-	              <label for="connectGitHubBtn" class="token-form-label">GitHub sign-in</label>
+	              <label for="connectGitHubBtn" class="token-form-label">GitHub connection</label>
 	              <div class="token-input-wrapper auth-button-row">
 	                <button id="connectGitHubBtn" class="primary" aria-describedby="token-help tokenStatus">Connect GitHub</button>
 	                <button id="clearTokenBtn" class="danger hidden" aria-label="Disconnect GitHub">Disconnect</button>
@@ -85,7 +87,7 @@ <h3>Connect GitHub</h3>
 	            </div>
 
 	            <p id="token-help" class="help-text">
-	              Click <strong>Connect GitHub</strong>, approve access on GitHub, and come back here once the browser tab says you can close it.
+	              Click <strong>Connect GitHub</strong>, approve access in GitHub, and come back once the browser tab says you're done.
 	            </p>
 
 	            <div class="step-info-boxes">
@@ -94,7 +96,7 @@ <h3>Connect GitHub</h3>
                   <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 	                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
 	                  </svg>
-	                  <span><strong>Security:</strong> Your GitHub sign-in stays in Chrome session storage and is cleared when the browser session ends.</span>
+	                  <span><strong>Security:</strong> Your GitHub connection stays in Chrome session storage and is cleared when the browser session ends.</span>
 	                </p>
 	              </div>
 	              <div class="info-box info-box-compact">
diff --git a/popup/popup.html b/popup/popup.html
index 067b6f1..41d0a59 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GitHub Devwatch</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../shared/themes.css">
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>

From 27645ed38eef4ec67a72dbb3cb23c906b2789152 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:53:24 -0500
Subject: [PATCH 21/42] refactor: remove inline theme tokens from CSS, use
 shared themes.css gradient variable

---
 options/options.css | 486 ++++++++++++++++++---------------------
 popup/popup.css     | 545 ++++++++++++++++++++++----------------------
 2 files changed, 491 insertions(+), 540 deletions(-)

diff --git a/options/options.css b/options/options.css
index e1ad823..d43c82b 100644
--- a/options/options.css
+++ b/options/options.css
@@ -1,5 +1,5 @@
 /* ================================================
-   DEVWATCH OPTIONS — shadcn/ui Zinc Theme
+   DEVWATCH OPTIONS — Terminal Ledger Theme
    ================================================ */
 
 * {
@@ -8,94 +8,12 @@
   box-sizing: border-box;
 }
 
-/* ---- shadcn Design Tokens (Zinc) ---- */
-:root {
-  --background: #FFFFFF;
-  --foreground: #09090B;
-  --card: #FFFFFF;
-  --card-foreground: #09090B;
-  --muted: #F4F4F5;
-  --muted-foreground: #71717A;
-  --accent: #F4F4F5;
-  --accent-foreground: #18181B;
-  --border: #E4E4E7;
-  --input: #E4E4E7;
-  --ring: #18181B;
-  --radius: 0.5rem;
-  --destructive: #EF4444;
-  --destructive-foreground: #FAFAFA;
-
-  /* Mapped aliases for backward compat */
-  --bg-primary: var(--background);
-  --bg-secondary: var(--muted);
-  --bg-tertiary: var(--accent);
-  --bg-hover: var(--accent);
-  --border-color: var(--border);
-  --border-color-dark: var(--border);
-  --border-hover: #A1A1AA;
-  --input-bg: var(--background);
-  --hover-bg: var(--accent);
-  --text-primary: var(--foreground);
-  --text-secondary: var(--muted-foreground);
-  --link-color: #18181B;
-  --link-hover: #09090B;
-  --link-hover-color: #09090B;
-  --accent-color: #18181B;
-  --font-size-base: 14px;
-  --success-bg: #F0FDF4;
-  --success-text: #166534;
-  --success-border: #BBF7D0;
-  --error-bg: #FEF2F2;
-  --error-text: #991B1B;
-  --error-border: #FECACA;
-  --danger-bg: var(--destructive);
-  --danger-hover: #DC2626;
-}
-
-body.dark-mode {
-  --background: #09090B;
-  --foreground: #FAFAFA;
-  --card: #09090B;
-  --card-foreground: #FAFAFA;
-  --muted: #27272A;
-  --muted-foreground: #A1A1AA;
-  --accent: #27272A;
-  --accent-foreground: #FAFAFA;
-  --border: #27272A;
-  --input: #27272A;
-  --ring: #D4D4D8;
-  --destructive: #7F1D1D;
-  --destructive-foreground: #FAFAFA;
-
-  --bg-primary: var(--background);
-  --bg-secondary: var(--muted);
-  --bg-tertiary: var(--accent);
-  --bg-hover: var(--accent);
-  --border-color: var(--border);
-  --border-color-dark: var(--border);
-  --border-hover: #52525B;
-  --input-bg: var(--background);
-  --hover-bg: var(--accent);
-  --text-primary: var(--foreground);
-  --text-secondary: var(--muted-foreground);
-  --link-color: #D4D4D8;
-  --link-hover: #E4E4E7;
-  --link-hover-color: #E4E4E7;
-  --accent-color: #D4D4D8;
-  --success-bg: #052E16;
-  --success-text: #86EFAC;
-  --success-border: #14532D;
-  --error-bg: #450A0A;
-  --error-text: #FCA5A5;
-  --error-border: #7F1D1D;
-  --danger-bg: var(--destructive);
-  --danger-hover: #991B1B;
-}
-
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 14px;
-  background: var(--bg-secondary);
+  background:
+    radial-gradient(circle at top right, var(--bg-gradient-glow), transparent 28%),
+    linear-gradient(180deg, var(--background) 0%, var(--card) 100%);
   color: var(--text-primary);
   padding: 0;
   margin: 0;
@@ -216,13 +134,13 @@ body {
 .container {
   display: flex;
   min-height: 100vh;
-  background: var(--bg-primary);
+  background: transparent;
 }
 
 .content-wrapper {
   flex: 1;
   overflow-y: auto;
-  padding: 40px;
+  padding: 36px 40px 44px;
   max-width: 1200px;
 }
 
@@ -234,6 +152,7 @@ h1 {
   font-size: calc(var(--font-size-base) + 9px);
   margin-bottom: 8px;
   color: var(--text-primary);
+  letter-spacing: -0.04em;
 }
 
 .subtitle {
@@ -245,34 +164,38 @@ h1 {
 .tab-navigation {
   display: flex;
   flex-direction: column;
-  padding: 8px;
-  background: var(--bg-secondary);
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.035);
   border-right: 1px solid var(--border-color);
-  min-width: 200px;
+  min-width: 228px;
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
   scrollbar-width: thin;
+  backdrop-filter: blur(14px);
 }
 
 .tab-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
 }
 
 .sidebar-header {
-  padding: 16px 16px 12px;
-  margin-bottom: 8px;
-  border-bottom: 2px solid var(--border-color);
+  padding: 16px 16px 14px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .sidebar-header h2 {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 .tab-navigation::-webkit-scrollbar {
@@ -288,40 +211,31 @@ h1 {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 16px;
+  padding: 12px 14px;
   background: transparent;
-  border: none;
-  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
   color: var(--text-secondary);
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
   transition: all 0.2s ease;
   text-align: left;
   position: relative;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .tab-button:hover {
   color: var(--text-primary);
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .tab-button.active {
-  color: var(--link-color);
-  background: var(--bg-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.tab-button.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 60%;
-  background: var(--link-color);
-  border-radius: 0 2px 2px 0;
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.07);
+  border-color: var(--border-hover);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
 }
 
 .tab-button:focus-visible {
@@ -396,15 +310,6 @@ h1 {
     text-align: center;
   }
 
-  .tab-button.active::before {
-    left: 50%;
-    top: auto;
-    bottom: 0;
-    transform: translateX(-50%);
-    width: 60%;
-    height: 3px;
-  }
-
   .tab-icon {
     width: 20px;
     height: 20px;
@@ -420,18 +325,25 @@ h1 {
   padding-bottom: 32px;
   border-bottom: 1px solid var(--border-color);
   scroll-margin-top: 20px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  border-radius: 24px;
+  padding: 28px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(10px);
 }
 
 .section:last-child {
-  border-bottom: none;
+  border-bottom: 1px solid var(--border-color);
   margin-bottom: 0;
-  padding-bottom: 0;
+  padding-bottom: 32px;
 }
 
 h2 {
-  font-size: 18px;
-  margin-bottom: 16px;
+  font-size: 20px;
+  margin-bottom: 14px;
   color: var(--text-primary);
+  letter-spacing: -0.04em;
 }
 
 label {
@@ -446,11 +358,11 @@ input[type="text"],
 input[type="password"],
 select {
   width: 100%;
-  padding: 8px 12px;
+  padding: 10px 12px;
   border: 1px solid var(--border-color-dark);
-  background: var(--bg-primary);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text-primary);
-  border-radius: 6px;
+  border-radius: 12px;
   font-size: 14px;
   font-family: inherit;
 }
@@ -502,11 +414,12 @@ select:focus {
 }
 
 .info-box {
-  background: var(--bg-secondary);
-  border-left: 3px solid var(--link-color);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
   padding: 12px 16px;
   margin: 12px 0;
-  border-radius: 4px;
+  border-radius: 16px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
 }
 
 .info-box .help-text {
@@ -537,8 +450,8 @@ select:focus {
 button {
   padding: 8px 16px;
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
-  background: var(--bg-primary);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text-primary);
   cursor: pointer;
   font-size: 14px;
@@ -548,12 +461,14 @@ button {
 
 button:hover {
   background: var(--bg-tertiary);
+  transform: translateY(-1px);
 }
 
 button.primary {
-  background: var(--link-color);
-  color: var(--background);
-  border-color: var(--link-color);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+  font-weight: 600;
 }
 
 button.primary:hover {
@@ -611,14 +526,16 @@ button.danger:hover {
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
-  background: var(--bg-tertiary);
-  border: 2px solid transparent;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
   border-radius: 24px;
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
   transition: all 0.2s ease;
   user-select: none;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .chip label:hover {
@@ -659,11 +576,12 @@ button.danger:hover {
 .activity-card {
   display: flex;
   flex-direction: column;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   overflow: hidden;
   transition: all 0.2s ease;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .activity-card:hover {
@@ -676,7 +594,7 @@ button.danger:hover {
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.025);
 }
 
 .activity-icon {
@@ -710,7 +628,7 @@ button.danger:hover {
   justify-content: space-around;
   gap: 24px;
   padding: 12px 16px;
-  background: var(--bg-primary);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .control-section {
@@ -789,11 +707,11 @@ body.dark-mode .activity-toggle input:checked + .toggle-slider {
 }
 
 .notification-toggle input:checked + .toggle-slider {
-  background-color: #3b82f6;
+  background-color: var(--primary);
 }
 
 body.dark-mode .notification-toggle input:checked + .toggle-slider {
-  background-color: #2563eb;
+  background-color: var(--primary);
 }
 
 .notification-toggle input:focus + .toggle-slider {
@@ -916,10 +834,11 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   transition: all 0.2s ease;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .setup-step.clickable {
@@ -929,9 +848,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .setup-step:hover {
-  border-color: var(--link-color);
-  transform: translateX(4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--border-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
 }
 
 .step-number {
@@ -940,12 +859,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   justify-content: center;
   width: 40px;
   height: 40px;
-  background: var(--link-color);
-  color: var(--background);
-  border-radius: 50%;
-  font-size: 18px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-primary);
+  border-radius: 14px;
+  border: 1px solid var(--border-color);
+  font-size: 16px;
   font-weight: 700;
   flex-shrink: 0;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 .step-content h3 {
@@ -964,10 +885,10 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Primary Setup Step (Step 1 with token input) */
 .setup-step-primary {
-  background: var(--bg-primary);
-  border-color: var(--link-color);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--border-hover);
   padding: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
 }
 
 .setup-step-primary:hover {
@@ -1011,9 +932,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .token-form-section {
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: 18px;
   padding: 20px;
   margin-bottom: 16px;
 }
@@ -1058,15 +979,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 16px;
   padding: 20px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   transition: all 0.2s ease;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .data-card:hover {
-  border-color: var(--link-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--border-hover);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
 }
 
 .data-card.danger-card {
@@ -1113,13 +1035,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   padding: 8px 16px;
   background: var(--link-color);
   color: var(--background);
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  border: 1px solid var(--link-color);
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .data-action-btn:hover {
@@ -1148,7 +1072,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   width: 64px;
   height: 64px;
   margin: 0 auto 16px;
-  color: var(--link-color);
+  color: var(--accent-color);
 }
 
 .help-hero h2 {
@@ -1176,23 +1100,23 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .feature-card {
   text-align: center;
   padding: 24px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   transition: all 0.2s ease;
 }
 
 .feature-card:hover {
-  border-color: var(--link-color);
+  border-color: var(--border-hover);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
 }
 
 .feature-icon {
   width: 40px;
   height: 40px;
   margin: 0 auto 12px;
-  color: var(--link-color);
+  color: var(--accent-color);
 }
 
 .feature-card h3 {
@@ -1233,25 +1157,25 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   text-decoration: none;
   color: inherit;
   transition: all 0.2s ease;
 }
 
 .resource-link:hover {
-  border-color: var(--link-color);
+  border-color: var(--border-hover);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
 }
 
 .resource-icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
-  color: var(--link-color);
+  color: var(--accent-color);
 }
 
 .resource-content h4 {
@@ -1292,9 +1216,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 16px;
   color: var(--text-primary);
 }
 
@@ -1304,9 +1228,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .changelog-content {
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 18px;
   padding: 24px;
   max-height: 600px;
   overflow-y: auto;
@@ -1550,9 +1474,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: flex-start;
   padding: 16px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: 16px;
   margin-bottom: 12px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   gap: 16px;
   transition: all 0.15s ease;
 }
@@ -1560,7 +1484,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .repo-item:hover {
   border-color: var(--border-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .repo-content {
@@ -1571,8 +1495,8 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .repo-name {
   display: flex;
   align-items: center;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 14px;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 6px;
@@ -1609,21 +1533,22 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Repository Section Cards */
 .repo-section-card {
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 22px;
   padding: 24px;
   margin-bottom: 24px;
   transition: all 0.2s ease;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
 }
 
 .add-repo-card {
-  background: var(--bg-secondary);
+  background: rgba(255, 255, 255, 0.05);
   border-color: var(--border-color);
 }
 
 .watched-repos-card {
-  background: var(--bg-primary);
+  background: rgba(255, 255, 255, 0.03);
   border-color: var(--border-color-dark);
 }
 
@@ -1633,14 +1558,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   gap: 16px;
   margin-bottom: 20px;
   padding-bottom: 16px;
-  border-bottom: 2px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .repo-section-icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
-  color: var(--link-color);
+  color: var(--accent-color);
   margin-top: 4px;
 }
 
@@ -1677,12 +1602,13 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   min-width: 28px;
   height: 28px;
   padding: 0 8px;
-  background: var(--link-color);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border-radius: 14px;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 700;
   margin-left: 4px;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 /* Action Buttons Layout */
@@ -1710,13 +1636,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   gap: 8px;
   padding: 10px 16px;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--background);
-  color: var(--text);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-primary);
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
   transition: all 0.2s ease;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .action-btn:hover {
@@ -1753,6 +1681,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   opacity: 0;
   max-height: 0;
   transition: all 0.2s ease-in-out; /* Simpler transition */
+  border-radius: 18px;
 }
 
 .repo-panel.show {
@@ -1781,6 +1710,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .search-input-wrapper input {
   width: 100%;
   padding-right: 36px;
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .search-clear-btn {
@@ -1812,15 +1742,17 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
+  border-radius: 12px;
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
   color: var(--text-secondary);
   transition: all 0.2s;
   white-space: nowrap;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .hide-pinned-btn:hover {
@@ -1983,13 +1915,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   gap: 8px;
   padding: 8px 16px;
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
-  background: var(--bg-primary);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text-primary);
   cursor: pointer;
-  font-size: 14px;
-  font-family: inherit;
+  font-size: 12px;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
   transition: all 0.2s;
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
 /* Import buttons when inside panel - make them smaller */
@@ -2043,15 +1977,17 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .modal-content {
-  background: var(--bg-primary);
-  border-radius: 8px;
+  background: rgba(24, 22, 20, 0.96);
+  border: 1px solid var(--border-color);
+  border-radius: 22px;
   width: 90%;
   max-width: 700px;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
   animation: slideIn 0.3s;
+  backdrop-filter: blur(16px);
 }
 
 @keyframes slideIn {
@@ -2077,6 +2013,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   margin: 0;
   font-size: 18px;
   color: var(--text-primary);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 .close-modal {
@@ -2147,8 +2086,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .import-select-all {
   margin-bottom: 12px;
   padding: 12px;
-  background: var(--bg-tertiary);
-  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 14px;
+  border: 1px solid var(--border-color);
 }
 
 .import-select-all label {
@@ -2305,9 +2245,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .pin-btn {
-  background: none;
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
+  border-radius: 12px;
   padding: 8px 10px;
   cursor: pointer;
   display: flex;
@@ -2335,9 +2275,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .mute-btn {
-  background: none;
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
+  border-radius: 12px;
   padding: 8px 10px;
   cursor: pointer;
   display: flex;
@@ -2363,9 +2303,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .link-btn {
-  background: none;
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color-dark);
-  border-radius: 6px;
+  border-radius: 12px;
   padding: 8px 10px;
   cursor: pointer;
   display: flex;
@@ -2430,14 +2370,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
-  background: var(--bg-tertiary);
-  border: 2px solid var(--border-color);
-  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
   transition: all 0.2s ease;
   color: var(--text-primary);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .import-export-btn:hover {
@@ -2550,9 +2492,9 @@ body.dark-mode select:focus-visible {
 .empty-repos-card {
   text-align: center;
   padding: 48px 32px;
-  background: var(--bg-secondary);
-  border: 2px dashed var(--border-color);
-  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px dashed var(--border-color);
+  border-radius: 20px;
   margin: 16px 0;
 }
 
@@ -2590,8 +2532,8 @@ body.dark-mode select:focus-visible {
   line-height: 1.6;
   margin: 0;
   padding: 16px;
-  background: var(--bg-primary);
-  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 16px;
   border: 1px solid var(--border-color);
   text-align: left;
 }
@@ -2602,9 +2544,9 @@ body.dark-mode select:focus-visible {
   justify-content: space-between;
   padding: 16px;
   margin-bottom: 8px;
-  background: var(--bg-secondary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 16px;
   transition: all 0.2s;
 }
 
@@ -2620,8 +2562,8 @@ body.dark-mode select:focus-visible {
 .snoozed-repo-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 14px;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
   margin-bottom: 4px;
 }
 
@@ -2639,13 +2581,15 @@ body.dark-mode select:focus-visible {
 .unsnooze-btn {
   background: var(--danger-bg);
   color: white;
-  border: none;
+  border: 1px solid var(--danger-bg);
   padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .unsnooze-btn:hover {
@@ -2683,11 +2627,11 @@ body.dark-mode .snooze-expiry-warning {
 }
 
 .toast {
-  background: var(--bg-primary);
+  background: rgba(24, 22, 20, 0.96);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 16px;
   padding: 12px 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2754,8 +2698,8 @@ body.dark-mode .snooze-expiry-warning {
   border: none;
   color: var(--text-secondary);
   cursor: pointer;
-  padding: 2px;
-  border-radius: 4px;
+  padding: 4px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2801,13 +2745,15 @@ body.dark-mode .snooze-expiry-warning {
   padding: 12px 20px;
   background: var(--link-color);
   color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  border: 1px solid var(--link-color);
+  border-radius: 14px;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .setup-btn:hover {
@@ -2829,9 +2775,9 @@ body.dark-mode .snooze-expiry-warning {
 .help-links {
   margin-top: 25px;
   padding: 20px;
-  background: var(--bg-secondary);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 18px;
 }
 
 .help-links h3 {
@@ -2853,18 +2799,21 @@ body.dark-mode .snooze-expiry-warning {
 .help-links a {
   color: var(--link-color);
   text-decoration: none;
-  font-size: 14px;
+  font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 0;
-  border-radius: 4px;
-  transition: background 0.2s;
+  padding: 8px 10px;
+  border-radius: 10px;
+  transition: background 0.2s, transform 0.2s;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .help-links a:hover {
   background: var(--bg-hover);
   text-decoration: underline;
+  transform: translateX(2px);
 }
 
 /* Dark mode adjustments for setup section */
@@ -2891,9 +2840,11 @@ body.dark-mode .setup-btn:hover {
 
 .footer-section h4 {
   color: var(--text-primary);
-  font-size: 18px;
+  font-size: 16px;
   margin-bottom: 12px;
   font-weight: 600;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .footer-section p {
@@ -2911,11 +2862,12 @@ body.dark-mode .setup-btn:hover {
 
 .footer-column h5 {
   color: var(--text-primary);
-  font-size: 14px;
+  font-size: 12px;
   margin-bottom: 12px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.08em;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 .footer-column ul {
@@ -2931,13 +2883,15 @@ body.dark-mode .setup-btn:hover {
 .footer-column a {
   color: var(--link-color);
   text-decoration: none;
-  font-size: 14px;
+  font-size: 13px;
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 0;
-  border-radius: 4px;
+  padding: 6px 8px;
+  border-radius: 10px;
   transition: all 0.2s;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .footer-column a:hover {
diff --git a/popup/popup.css b/popup/popup.css
index 68dd5d8..e87cdbe 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,5 +1,5 @@
 /* ================================================
-   DEVWATCH POPUP — shadcn/ui Stone Theme
+   DEVWATCH POPUP — Terminal Ledger Theme
    ================================================ */
 
 * {
@@ -8,69 +8,6 @@
   box-sizing: border-box;
 }
 
-/* ---- shadcn Design Tokens (Stone) ---- */
-:root {
-  --background: #FAFAF9;
-  --foreground: #1C1917;
-  --card: #FAFAF9;
-  --card-foreground: #1C1917;
-  --muted: #F5F5F4;
-  --muted-foreground: #78716C;
-  --accent: #F5F5F4;
-  --accent-foreground: #1C1917;
-  --border: #E7E5E4;
-  --input: #E7E5E4;
-  --ring: #1C1917;
-  --radius: 0.5rem;
-  --destructive: #EF4444;
-  --destructive-foreground: #FAFAF9;
-
-  /* Backward-compat aliases */
-  --bg-primary: var(--background);
-  --bg-secondary: var(--muted);
-  --bg-hover: var(--accent);
-  --bg-unread: #FFFBF5;
-  --border-color: var(--border);
-  --text-primary: var(--foreground);
-  --text-secondary: var(--muted-foreground);
-  --link-color: #1C1917;
-  --link-hover-color: #0C0A09;
-  --badge-bg: #1C1917;
-  --accent-color: #1C1917;
-  --success-bg: #F0FDF4;
-  --success-text: #166534;
-}
-
-body.dark-mode {
-  --background: #1C1917;
-  --foreground: #FAFAF9;
-  --card: #1C1917;
-  --card-foreground: #FAFAF9;
-  --muted: #292524;
-  --muted-foreground: #A8A29E;
-  --accent: #292524;
-  --accent-foreground: #FAFAF9;
-  --border: #292524;
-  --input: #292524;
-  --ring: #D6D3D1;
-  --destructive: #7F1D1D;
-  --destructive-foreground: #FAFAF9;
-
-  --bg-primary: var(--background);
-  --bg-secondary: var(--muted);
-  --bg-hover: var(--accent);
-  --bg-unread: rgba(255, 251, 245, 0.04);
-  --border-color: var(--border);
-  --text-primary: var(--foreground);
-  --text-secondary: var(--muted-foreground);
-  --link-color: #FAFAF9;
-  --link-hover-color: #E7E5E4;
-  --badge-bg: #FAFAF9;
-  --accent-color: #FAFAF9;
-  --success-bg: #052E16;
-  --success-text: #86EFAC;
-}
-
 body {
   width: 450px;
   max-height: 600px;
@@ -78,7 +15,9 @@ body {
   font-size: 14px;
   line-height: 1.5;
   color: var(--foreground);
-  background: var(--background);
+  background:
+    radial-gradient(circle at top right, var(--bg-gradient-glow), transparent 32%),
+    linear-gradient(180deg, var(--background) 0%, var(--card) 100%);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
@@ -105,6 +44,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: transparent;
 }
 
 /* ---- Header ---- */
@@ -112,15 +52,15 @@ header {
   display: none;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
+  padding: 16px 16px 12px;
   border-bottom: 1px solid var(--border);
-  background: var(--background);
+  background: transparent;
 }
 
 .header-info {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .header-stats {
@@ -138,7 +78,7 @@ header {
 
 .header-refresh-btn {
   padding: 6px;
-  background: var(--muted);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   cursor: pointer;
@@ -154,7 +94,7 @@ header {
 .header-refresh-btn:hover {
   background: var(--accent);
   color: var(--accent-foreground);
-  border-color: var(--ring);
+  border-color: var(--primary);
 }
 
 .header-refresh-btn:focus-visible {
@@ -176,18 +116,20 @@ header {
 h1 {
   font-size: 16px;
   font-weight: 600;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.04em;
   line-height: 1;
   color: var(--foreground);
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  text-transform: uppercase;
 }
 
 /* ---- Icon Buttons (shared) ---- */
 .icon-btn {
-  background: transparent;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
   cursor: pointer;
   padding: 8px;
-  border-radius: calc(var(--radius) - 2px);
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -203,6 +145,7 @@ h1 {
 .icon-btn:hover {
   background: var(--accent);
   color: var(--accent-foreground);
+  border-color: rgba(255, 255, 255, 0.16);
 }
 
 .icon-btn.spinning .refresh-icon {
@@ -216,7 +159,7 @@ h1 {
 
 @keyframes refresh-complete {
   0% { transform: scale(1); }
-  50% { transform: scale(1.15); background: var(--foreground); color: var(--background); }
+  50% { transform: scale(1.15); background: var(--primary); color: var(--primary-foreground); }
   100% { transform: scale(1); }
 }
 
@@ -229,29 +172,30 @@ h1 {
   display: none;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--background);
+  padding: 8px 16px 14px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0);
+  background: transparent;
 }
 
 /* shadcn Tabs component: filled-pill active state */
 .filters {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  height: 36px;
+  gap: 6px;
+  height: auto;
 }
 
 .filter-btn {
   padding: 0 14px;
-  height: 28px;
-  border: none;
+  height: 30px;
+  border: 1px solid var(--border);
   background: transparent;
   color: var(--muted-foreground);
-  border-radius: calc(var(--radius) - 2px);
+  border-radius: 999px;
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
   transition: all 150ms;
   white-space: nowrap;
   display: inline-flex;
@@ -261,24 +205,26 @@ h1 {
 
 .filter-btn:hover {
   color: var(--foreground);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .filter-btn.active {
-  background: var(--ring);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
   font-weight: 600;
   box-shadow: none;
 }
 
 .toolbar-actions {
   display: flex;
-  gap: 2px;
+  gap: 8px;
   align-items: center;
 }
 
 .toolbar-btn {
-  background: transparent;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
   cursor: pointer;
   padding: 7px;
   color: var(--muted-foreground);
@@ -286,7 +232,7 @@ h1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: calc(var(--radius) - 2px);
+  border-radius: 12px;
 }
 
 .toolbar-btn svg {
@@ -301,12 +247,13 @@ h1 {
 }
 
 .toolbar-btn.active {
-  color: var(--background);
-  background: var(--foreground);
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
 .toolbar-btn.active svg {
-  color: var(--background);
+  color: var(--primary-foreground);
 }
 
 /* ---- Search ---- */
@@ -314,28 +261,32 @@ h1 {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--background);
+  margin: 0 16px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .search-label {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
   color: var(--foreground);
   white-space: nowrap;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 /* shadcn Input component */
 .search-box input {
   width: 100%;
-  height: 36px;
-  padding: 0 12px;
-  border: 1px solid var(--input);
-  border-radius: var(--radius);
-  background: var(--background);
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
   color: var(--foreground);
-  font-size: 14px;
+  font-size: 13px;
   transition: all 150ms;
 }
 
@@ -345,7 +296,7 @@ h1 {
 
 .search-box input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+  box-shadow: none;
 }
 
 /* ---- Activity List ---- */
@@ -380,16 +331,21 @@ h1 {
 
 /* ---- Empty & Loading States ---- */
 .empty-state {
-  padding: 48px 24px;
+  margin: 12px 16px 18px;
+  padding: 32px 20px;
   text-align: center;
   color: var(--muted-foreground);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .empty-state p {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  font-size: 15px;
   color: var(--foreground);
-  margin-bottom: 4px;
+  margin-bottom: 6px;
+  letter-spacing: -0.02em;
 }
 
 .empty-state small {
@@ -411,11 +367,12 @@ h1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 6px 16px;
-  background: var(--background);
-  border-bottom: 1px solid var(--border);
+  margin: 0 16px 10px;
+  padding: 0 0 2px;
+  background: transparent;
+  border-bottom: 0;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--muted-foreground);
   position: sticky;
   top: 0;
@@ -442,18 +399,21 @@ h1 {
 /* ---- Repo Groups ---- */
 .repo-group {
   position: relative;
-  margin: 8px;
+  margin: 0 16px 12px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 20px;
   overflow: hidden;
+  background: rgba(255, 255, 255, 0.035);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .repo-group-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
-  background: var(--muted);
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.03);
   border-bottom: 1px solid var(--border);
   cursor: pointer;
   transition: opacity 300ms, transform 300ms, max-height 300ms, padding 300ms, margin 300ms, border-width 300ms;
@@ -475,8 +435,7 @@ h1 {
 }
 
 .repo-group-header.pinned {
-  border-left: 2px solid var(--foreground);
-  padding-left: 14px;
+  box-shadow: inset 3px 0 0 var(--accent-color);
 }
 
 .repo-group-header.pinned:hover {
@@ -516,9 +475,10 @@ h1 {
 .repo-group-name {
   font-weight: 600;
   color: var(--foreground);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.03em;
+  text-transform: lowercase;
 }
 
 .repo-group-actions {
@@ -529,15 +489,16 @@ h1 {
 
 /* shadcn Badge — default variant */
 .repo-unread-count {
-  font-size: 12px;
+  font-size: 11px;
   padding: 0 6px;
-  height: 20px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border-radius: 9999px;
-  font-weight: 600;
+  font-weight: 700;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 .repo-snooze-btn,
@@ -582,7 +543,7 @@ h1 {
 }
 
 .options-link {
-  color: var(--foreground);
+  color: var(--primary);
   text-decoration: underline;
   text-underline-offset: 4px;
   font-weight: 500;
@@ -590,7 +551,8 @@ h1 {
 
 .options-link:hover {
   text-decoration: underline;
-  color: var(--foreground);
+  color: var(--primary);
+  opacity: 0.8;
 }
 
 .repo-activities {
@@ -617,15 +579,17 @@ h1 {
 
 /* shadcn ghost button style for text actions */
 .text-btn {
-  background: none;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
   color: var(--muted-foreground);
   cursor: pointer;
   font-size: 12px;
-  font-weight: 500;
-  padding: 4px 8px;
-  border-radius: calc(var(--radius) - 2px);
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 999px;
   transition: all 150ms;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .text-btn:hover {
@@ -638,7 +602,7 @@ h1 {
   display: flex;
   align-items: flex-start;
   gap: 12px;
-  padding: 10px 12px;
+  padding: 12px 14px;
   border-bottom: 1px solid var(--border);
   transition: all 200ms;
   transform-origin: top;
@@ -656,6 +620,7 @@ h1 {
 
 .activity-item.unread {
   background: var(--bg-unread);
+  box-shadow: inset 2px 0 0 rgba(211, 162, 75, 0.95);
 }
 
 .activity-item.unread:hover {
@@ -663,7 +628,7 @@ h1 {
 }
 
 .activity-item.read {
-  opacity: 0.5;
+  opacity: 0.56;
 }
 
 .activity-item.read:hover {
@@ -708,8 +673,8 @@ h1 {
 }
 
 .action-btn {
-  background: none;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
   cursor: pointer;
   font-size: 18px;
   padding: 5px;
@@ -718,7 +683,7 @@ h1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: calc(var(--radius) - 2px);
+  border-radius: 10px;
 }
 
 .action-btn:hover {
@@ -737,35 +702,37 @@ h1 {
 }
 
 .mark-read-btn:hover {
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
 }
 
 .mark-read-btn:hover svg {
-  color: var(--background);
+  color: var(--primary-foreground);
 }
 
 .activity-header {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 2px;
+  margin-bottom: 4px;
+  min-width: 0;
 }
 
 /* shadcn Badge — zinc pill with colored dot */
 .activity-type {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 1px 6px;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
   line-height: 1.4;
-  background: var(--muted);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   color: var(--foreground);
+  text-transform: uppercase;
 }
 
 .activity-type::before {
@@ -786,17 +753,22 @@ body.dark-mode .activity-type.issue::before { background: #FBBF24; }
 body.dark-mode .activity-type.release::before { background: #60A5FA; }
 
 .activity-repo {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
-  font-weight: 400;
+  font-weight: 600;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .activity-title {
-  font-weight: 500;
-  margin-bottom: 2px;
+  font-weight: 600;
+  margin-bottom: 4px;
   line-height: 1.4;
   color: var(--foreground);
-  font-size: 14px;
+  font-size: 13px;
+  letter-spacing: -0.02em;
 }
 
 .activity-description {
@@ -818,9 +790,9 @@ body.dark-mode .activity-type.release::before { background: #60A5FA; }
 footer {
   position: sticky;
   bottom: 0;
-  padding: 8px 16px;
+  padding: 12px 16px 16px;
   border-top: 1px solid var(--border);
-  background: var(--background);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--background) 22%);
   z-index: 20;
 }
 
@@ -832,16 +804,16 @@ footer {
 
 .footer-actions {
   display: flex;
-  gap: 2px;
+  gap: 8px;
   align-items: center;
 }
 
 .footer-btn {
-  background: transparent;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
   cursor: pointer;
   padding: 6px;
-  border-radius: calc(var(--radius) - 2px);
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -867,14 +839,16 @@ footer {
 /* shadcn outline button */
 .footer-btn.skip-btn {
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   padding: 4px 10px;
   min-width: auto;
   height: auto;
   color: var(--foreground);
-  background: var(--background);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--input);
-  border-radius: var(--radius);
+  border-radius: 999px;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .footer-btn.skip-btn:hover {
@@ -883,19 +857,21 @@ footer {
 }
 
 footer a {
-  color: var(--foreground);
+  color: var(--primary);
   text-decoration: underline;
   text-underline-offset: 4px;
   font-size: 12px;
 }
 
 footer a:hover {
-  color: var(--muted-foreground);
+  opacity: 0.8;
 }
 
 .rate-limit-info {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  letter-spacing: 0.02em;
 }
 
 /* ---- Error & Toast Messages ---- */
@@ -1023,8 +999,8 @@ body.dark-mode .error-brief {
 
 /* shadcn primary button */
 .error-dismiss {
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border: none;
   padding: 6px 14px;
   border-radius: var(--radius);
@@ -1053,8 +1029,8 @@ body.dark-mode .error-brief {
 }
 
 .error-content .error-action {
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border: none;
   padding: 4px 8px;
   border-radius: var(--radius);
@@ -1243,10 +1219,10 @@ body.dark-mode .search-box input:focus-visible {
    ================================================ */
 .onboarding-view {
   flex: 1;
-  padding: 20px 20px 12px;
+  padding: 18px 18px 14px;
   overflow: hidden;
   min-height: 0;
-  background: var(--background);
+  background: transparent;
   display: flex;
   flex-direction: column;
 }
@@ -1270,23 +1246,23 @@ body.dark-mode .search-box input:focus-visible {
 
 /* Progress — thin line */
 .onboarding-progress {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
   text-align: center;
   flex-shrink: 0;
 }
 
 .progress-bar {
   width: 100%;
-  height: 2px;
+  height: 4px;
   background: var(--border);
   border-radius: 9999px;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   overflow: hidden;
 }
 
 .progress-fill {
   height: 100%;
-  background: var(--foreground);
+  background: var(--primary);
   border-radius: 9999px;
   transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1294,8 +1270,10 @@ body.dark-mode .search-box input:focus-visible {
 .progress-text {
   font-size: 11px;
   color: var(--muted-foreground);
-  font-weight: 500;
-  letter-spacing: 0.02em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .onboarding-content {
@@ -1319,8 +1297,8 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .step-icon img {
-  border-radius: 20px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border-radius: 22px;
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
 }
 
 .step-icon svg {
@@ -1335,18 +1313,18 @@ body.dark-mode .search-box input:focus-visible {
 
 /* Headings — large, tight, confident */
 .onboarding-step h2 {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 700;
   color: var(--foreground);
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   letter-spacing: -0.04em;
-  line-height: 1.1;
+  line-height: 1.05;
 }
 
 .onboarding-step p {
   color: var(--muted-foreground);
   line-height: 1.5;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
   max-width: 340px;
   margin-left: auto;
   margin-right: auto;
@@ -1367,16 +1345,16 @@ body.dark-mode .search-box input:focus-visible {
   align-items: center;
   gap: 16px;
   padding: 16px;
-  background: var(--muted);
-  border-radius: 12px;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
+  border: 1px solid var(--border);
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .feature-item:hover {
   background: var(--accent);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: translateY(-2px);
+  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
 }
 
 .feature-icon {
@@ -1386,10 +1364,10 @@ body.dark-mode .search-box input:focus-visible {
   justify-content: center;
   width: 40px;
   height: 40px;
-  border-radius: 10px;
-  background: var(--background);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  color: var(--foreground);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  color: var(--accent-color);
 }
 
 .feature-icon svg {
@@ -1413,19 +1391,22 @@ body.dark-mode .search-box input:focus-visible {
 
 /* Token Step */
 .token-instructions {
-  background: var(--muted);
-  border: none;
-  border-radius: 12px;
-  padding: 14px;
-  margin: 12px 0;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 16px;
+  margin: 14px 0;
   text-align: left;
 }
 
 .token-instructions h3 {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   color: var(--foreground);
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .token-instructions ol {
@@ -1436,24 +1417,24 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .token-link {
-  color: var(--foreground);
+  color: var(--primary);
   text-decoration: underline;
   text-underline-offset: 4px;
   font-weight: 500;
 }
 
 .token-link:hover {
-  color: var(--muted-foreground);
+  opacity: 0.8;
 }
 
 .token-input-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin: 12px 0 8px;
-  background: var(--muted);
-  border: none;
-  border-radius: 12px;
+  margin: 14px 0 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 18px;
   padding: 14px;
 }
 
@@ -1482,12 +1463,12 @@ body.dark-mode .search-box input:focus-visible {
 /* shadcn input */
 .token-input {
   flex: 1;
-  padding: 8px 12px;
+  padding: 10px 12px;
   border: 1px solid var(--input);
-  border-radius: var(--radius);
-  font-size: 14px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  background: var(--background);
+  border-radius: 12px;
+  font-size: 15px;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  background: rgba(255, 255, 255, 0.04);
   color: var(--foreground);
   letter-spacing: 0.14em;
   font-weight: 600;
@@ -1509,14 +1490,16 @@ body.dark-mode .search-box input:focus-visible {
 /* shadcn outline button */
 .copy-code-btn {
   padding: 8px 14px;
-  background: var(--background);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--foreground);
   border: 1px solid var(--input);
-  border-radius: var(--radius);
-  font-size: 14px;
-  font-weight: 500;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   transition: all 150ms;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .copy-code-btn:hover:not(:disabled) {
@@ -1532,15 +1515,17 @@ body.dark-mode .search-box input:focus-visible {
 /* Primary button */
 .validate-btn {
   padding: 10px 20px;
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border: none;
-  border-radius: 10px;
-  font-size: 14px;
+  border-radius: 12px;
+  font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .validate-btn:hover {
@@ -1590,11 +1575,16 @@ body.dark-mode .search-box input:focus-visible {
 .security-note {
   font-size: 11px;
   color: var(--muted-foreground);
-  margin-top: 4px;
+  margin-top: 8px;
   display: flex;
   align-items: flex-start;
   gap: 6px;
   line-height: 1.4;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  text-align: left;
 }
 
 .info-icon {
@@ -1628,16 +1618,16 @@ body.dark-mode .search-box input:focus-visible {
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
-  background: var(--muted);
-  border: none;
-  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 16px;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .repo-suggestion:hover {
   background: var(--accent);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }
 
 .repo-info {
@@ -1648,7 +1638,7 @@ body.dark-mode .search-box input:focus-visible {
   font-weight: 600;
   color: var(--foreground);
   margin-bottom: 2px;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .repo-desc {
@@ -1703,7 +1693,7 @@ body.dark-mode .search-box input:focus-visible {
   width: 14px;
   height: 14px;
   border: 2px solid var(--border);
-  border-top-color: var(--foreground);
+  border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-right: 8px;
@@ -1715,12 +1705,12 @@ body.dark-mode .search-box input:focus-visible {
   width: 32px;
   height: 32px;
   padding: 0;
-  background: var(--foreground);
-  color: var(--background);
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 400;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border: 1px solid var(--primary);
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
   cursor: pointer;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
@@ -1793,9 +1783,9 @@ body.dark-mode .search-box input:focus-visible {
   height: 36px;
   padding: 0 12px;
   border: 1px solid var(--input);
-  border-radius: var(--radius);
+  border-radius: 12px;
   font-size: 14px;
-  background: var(--background);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--foreground);
 }
 
@@ -1808,14 +1798,16 @@ body.dark-mode .search-box input:focus-visible {
 .add-btn {
   padding: 0 16px;
   height: 36px;
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
   border: none;
-  border-radius: var(--radius);
-  font-size: 14px;
-  font-weight: 500;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   transition: opacity 150ms;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .add-btn:hover {
@@ -1847,16 +1839,16 @@ body.dark-mode .search-box input:focus-visible {
   align-items: center;
   gap: 14px;
   padding: 16px;
-  background: var(--muted);
-  border: none;
-  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 18px;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .category-item:hover {
   background: var(--accent);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }
 
 .category-icon {
@@ -1928,10 +1920,12 @@ body.dark-mode .releases-icon {
 }
 
 .toggle-label > span:first-child {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
-  font-weight: 500;
+  font-weight: 600;
   min-width: 38px;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .toggle-checkbox {
@@ -1967,11 +1961,11 @@ body.dark-mode .releases-icon {
 }
 
 .toggle-checkbox:checked + .toggle-switch {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 body.dark-mode .toggle-checkbox:checked + .toggle-switch {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 .toggle-checkbox:checked + .toggle-switch:before {
@@ -2060,11 +2054,11 @@ body.dark-mode .toggle-checkbox:checked + .toggle-switch {
 }
 
 .activity-toggle input:checked + .toggle-slider {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 body.dark-mode .activity-toggle input:checked + .toggle-slider {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 .activity-toggle input:focus + .toggle-slider {
@@ -2081,11 +2075,11 @@ body.dark-mode .activity-toggle input:checked + .toggle-slider {
 }
 
 .notification-toggle input:checked + .toggle-slider {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 body.dark-mode .notification-toggle input:checked + .toggle-slider {
-  background-color: var(--foreground);
+  background-color: var(--primary);
 }
 
 .notification-toggle input:focus + .toggle-slider {
@@ -2119,6 +2113,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 .tips-grid {
@@ -2132,16 +2127,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 14px;
   padding: 14px 16px;
-  background: var(--muted);
-  border-radius: 12px;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
+  border: 1px solid var(--border);
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .tip-item:hover {
   background: var(--accent);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }
 
 .tip-icon {
@@ -2151,10 +2146,10 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   justify-content: center;
   width: 36px;
   height: 36px;
-  border-radius: 10px;
-  background: var(--background);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  color: var(--foreground);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  color: var(--accent-color);
 }
 
 .tip-icon svg {
@@ -2184,9 +2179,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .final-tips {
   margin-top: 20px;
   padding: 14px 16px;
-  background: var(--muted);
-  border-radius: 12px;
-  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
+  border: 1px solid var(--border);
 }
 
 .final-tips p {
@@ -2224,12 +2219,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 /* Button variants */
 .onboarding-btn {
   padding: 10px 20px;
-  border-radius: 10px;
-  font-size: 14px;
+  border-radius: 12px;
+  font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid transparent;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
 }
 
 .onboarding-btn:focus {
@@ -2238,9 +2235,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .onboarding-btn.primary {
-  background: var(--foreground);
-  color: var(--background);
-  border-color: var(--foreground);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -2260,7 +2257,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .onboarding-btn.secondary {
-  background: var(--background);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--foreground);
   border-color: var(--input);
 }
@@ -2292,8 +2289,8 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 body.dark-mode .validate-btn,
 body.dark-mode .add-btn,
 body.dark-mode .add-repo-btn {
-  background: var(--foreground);
-  color: var(--background);
+  background: var(--primary);
+  color: var(--primary-foreground);
 }
 
 body.dark-mode .validate-btn:hover,

From 2d1bca2820a3a0f91622dac26bb5b2ec0351a614 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:53:36 -0500
Subject: [PATCH 22/42] feat: add applyColorTheme utility function

---
 shared/utils.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/shared/utils.js b/shared/utils.js
index f289686..7f30d18 100644
--- a/shared/utils.js
+++ b/shared/utils.js
@@ -17,6 +17,13 @@ export function applyTheme(theme) {
   }
 }
 
+/**
+ * Apply color theme by setting data attribute on body
+ * @param {string} colorTheme - Theme name: 'polar', 'graphite', 'nightfall', 'obsidian', 'sand', 'terminal-ledger'
+ */
+export function applyColorTheme(colorTheme) {
+  document.body.setAttribute('data-color-theme', colorTheme || 'polar');
+}
 
 /**
  * Format a date string into a human-readable relative time

From 304c9660ce563b879544f10921926ef00262fada Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:55:13 -0500
Subject: [PATCH 23/42] feat: add color theme swatch picker to options page
 appearance section

---
 options/options.css  | 17 +++++++++++++++
 options/options.html | 51 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/options/options.css b/options/options.css
index d43c82b..064c047 100644
--- a/options/options.css
+++ b/options/options.css
@@ -565,6 +565,23 @@ button.danger:hover {
   opacity: 1;
 }
 
+.color-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+}
+
+.subsection-heading {
+  font-size: 15px;
+  font-weight: 600;
+  margin-top: 24px;
+  margin-bottom: 4px;
+  color: var(--foreground);
+}
+
 /* Activity Cards Styles */
 .activity-cards {
   display: flex;
diff --git a/options/options.html b/options/options.html
index c79d300..3955d2e 100644
--- a/options/options.html
+++ b/options/options.html
@@ -459,6 +459,57 @@ <h2>Appearance</h2>
         </div>
       </fieldset>
 
+      <h3 class="subsection-heading">Color Theme</h3>
+      <p class="help-text">Choose a color palette</p>
+
+      <fieldset class="chip-fieldset">
+        <legend class="sr-only">Color theme</legend>
+        <div class="chip-group">
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-polar" value="polar" checked>
+            <label for="color-polar">
+              <span class="color-swatch" style="background: #0D9488;" aria-hidden="true"></span>
+              Polar
+            </label>
+          </div>
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-graphite" value="graphite">
+            <label for="color-graphite">
+              <span class="color-swatch" style="background: #6366F1;" aria-hidden="true"></span>
+              Graphite
+            </label>
+          </div>
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-nightfall" value="nightfall">
+            <label for="color-nightfall">
+              <span class="color-swatch" style="background: #E87B00;" aria-hidden="true"></span>
+              Nightfall
+            </label>
+          </div>
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-obsidian" value="obsidian">
+            <label for="color-obsidian">
+              <span class="color-swatch" style="background: #10B981;" aria-hidden="true"></span>
+              Obsidian
+            </label>
+          </div>
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-sand" value="sand">
+            <label for="color-sand">
+              <span class="color-swatch" style="background: #9F1239;" aria-hidden="true"></span>
+              Sand
+            </label>
+          </div>
+          <div class="chip">
+            <input type="radio" name="colorTheme" id="color-terminal-ledger" value="terminal-ledger">
+            <label for="color-terminal-ledger">
+              <span class="color-swatch" style="background: #D3A24B;" aria-hidden="true"></span>
+              Terminal Ledger
+            </label>
+          </div>
+        </div>
+      </fieldset>
+
       </section>
 
     <section class="section" id="interval">

From 774a4744d49567eec2fcea1dd446a0c66514ad63 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:55:39 -0500
Subject: [PATCH 24/42] feat: wire up color theme selection, storage, and load
 in options page

---
 options/options.js | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/options/options.js b/options/options.js
index 5ce7340..84a58fe 100644
--- a/options/options.js
+++ b/options/options.js
@@ -1,4 +1,4 @@
-import { applyTheme, formatDateVerbose } from '../shared/utils.js';
+import { applyTheme, applyColorTheme, formatDateVerbose } from '../shared/utils.js';
 import { clearAuthSession, getAuthSession, getAccessToken, getLocalItems, getWatchedRepos, setLocalItem, setWatchedRepos } from '../shared/storage-helpers.js';
 import { createHeaders } from '../shared/github-api.js';
 import { STORAGE_CONFIG, VALIDATION_PATTERNS } from '../shared/config.js';
@@ -294,7 +294,26 @@ function setupEventListeners() {
     });
   });
 
-  
+  // Auto-save color theme changes
+  document.querySelectorAll('input[name="colorTheme"]').forEach(radio => {
+    radio.addEventListener('change', async (e) => {
+      const colorTheme = e.target.value;
+      await chrome.storage.sync.set({ colorTheme });
+      applyColorTheme(colorTheme);
+
+      const themeNames = {
+        'polar': 'Polar',
+        'graphite': 'Graphite',
+        'nightfall': 'Nightfall',
+        'obsidian': 'Obsidian',
+        'sand': 'Sand',
+        'terminal-ledger': 'Terminal Ledger'
+      };
+      toastManager.info(`Color theme changed to ${themeNames[colorTheme] || colorTheme}`);
+    });
+  });
+
+
   // Auto-save check interval changes
   document.querySelectorAll('input[name="checkInterval"]').forEach(radio => {
     radio.addEventListener('change', async (e) => {
@@ -570,6 +589,10 @@ async function loadSettings() {
     const theme = settings.theme || 'system';
     applyTheme(theme);
 
+    // Load and apply color theme
+    const colorTheme = settings.colorTheme || 'polar';
+    applyColorTheme(colorTheme);
+
     if (authSession?.accessToken) {
       applyStoredConnection(authSession);
     } else {
@@ -614,6 +637,12 @@ async function loadSettings() {
       themeRadio.checked = true;
     }
 
+    // Set color theme radio button
+    const colorThemeRadio = document.getElementById(`color-${colorTheme}`);
+    if (colorThemeRadio) {
+      colorThemeRadio.checked = true;
+    }
+
     // Load itemExpiryHours setting
     const itemExpiryEnabled = settings.itemExpiryHours !== null && settings.itemExpiryHours !== undefined;
     document.getElementById('itemExpiryEnabled').checked = itemExpiryEnabled;

From 50c18bc34b1476a7a197bc822cabfd869a37f859 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:55:52 -0500
Subject: [PATCH 25/42] feat: load and apply color theme on popup init

---
 popup/popup.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/popup/popup.js b/popup/popup.js
index e622f54..3b119b9 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,4 +1,4 @@
-import { applyTheme } from '../shared/utils.js';
+import { applyTheme, applyColorTheme } from '../shared/utils.js';
 import { getSyncItem, getWatchedRepos } from '../shared/storage-helpers.js';
 import { showError } from '../shared/error-handler.js';
 import {
@@ -159,6 +159,12 @@ function setupEventListeners() {
     }
 
     applyTheme(theme);
+
+    // Load color theme
+    getSyncItem('colorTheme', 'polar').then(colorTheme => {
+      applyColorTheme(colorTheme);
+    });
+
     // Add a small delay to ensure DOM is ready before updating icons
     setTimeout(() => {
       updateDarkModeIcon();

From 77badf272d643f6b36f9c6da3ce806c87bd1f14f Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 00:58:01 -0500
Subject: [PATCH 26/42] test: add applyColorTheme unit tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 tests/utils.test.js | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/tests/utils.test.js b/tests/utils.test.js
index 55db2d6..7e11e50 100644
--- a/tests/utils.test.js
+++ b/tests/utils.test.js
@@ -20,8 +20,8 @@ global.chrome = {
   }
 };
 
-// Import function from shared utilities
-import { formatDate } from '../shared/utils.js';
+// Import functions from shared utilities
+import { formatDate, applyColorTheme } from '../shared/utils.js';
 
 describe('Date Formatting', () => {
 
@@ -79,3 +79,32 @@ describe('Activity Filtering', () => {
     expect(all).toHaveLength(3);
   });
 });
+
+describe('Color Theme Application', () => {
+  beforeEach(() => {
+    document.body.removeAttribute('data-color-theme');
+  });
+
+  test('applies color theme via data attribute', () => {
+    applyColorTheme('graphite');
+    expect(document.body.getAttribute('data-color-theme')).toBe('graphite');
+  });
+
+  test('defaults to polar when called with null', () => {
+    applyColorTheme(null);
+    expect(document.body.getAttribute('data-color-theme')).toBe('polar');
+  });
+
+  test('defaults to polar when called with undefined', () => {
+    applyColorTheme(undefined);
+    expect(document.body.getAttribute('data-color-theme')).toBe('polar');
+  });
+
+  test('switches between themes', () => {
+    applyColorTheme('nightfall');
+    expect(document.body.getAttribute('data-color-theme')).toBe('nightfall');
+
+    applyColorTheme('obsidian');
+    expect(document.body.getAttribute('data-color-theme')).toBe('obsidian');
+  });
+});

From 563b79e44644c33fe1d476e2614dbb4e091957f4 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 01:06:23 -0500
Subject: [PATCH 27/42] fix: replace hardcoded Terminal Ledger colors with CSS
 variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unread indicator: rgba(211,162,75) → var(--accent-color)
- Error messages: hardcoded #FEF2F2/#991B1B/#FECACA → var(--error-*)
- Success border: hardcoded #BBF7D0 → var(--success-border)
- Activity toggle: hardcoded #10b981 → var(--primary)
- Removed redundant body.dark-mode overrides for error/success states

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 options/options.css |  6 +-----
 popup/popup.css     | 24 +++++-------------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/options/options.css b/options/options.css
index 064c047..2663dab 100644
--- a/options/options.css
+++ b/options/options.css
@@ -703,11 +703,7 @@ button.danger:hover {
 }
 
 .activity-toggle input:checked + .toggle-slider {
-  background-color: #10b981;
-}
-
-body.dark-mode .activity-toggle input:checked + .toggle-slider {
-  background-color: #059669;
+  background-color: var(--primary);
 }
 
 .activity-toggle input:focus + .toggle-slider {
diff --git a/popup/popup.css b/popup/popup.css
index e87cdbe..f91b146 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -620,7 +620,7 @@ h1 {
 
 .activity-item.unread {
   background: var(--bg-unread);
-  box-shadow: inset 2px 0 0 rgba(211, 162, 75, 0.95);
+  box-shadow: inset 2px 0 0 var(--accent-color);
 }
 
 .activity-item.unread:hover {
@@ -878,19 +878,14 @@ footer a:hover {
 .error-message {
   padding: 8px 12px;
   margin-bottom: 8px;
-  background: #FEF2F2;
-  color: #991B1B;
-  border: 1px solid #FECACA;
+  background: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
   border-radius: var(--radius);
   font-size: 12px;
   text-align: center;
 }
 
-body.dark-mode .error-message {
-  background: rgba(239, 68, 68, 0.1);
-  color: #FCA5A5;
-  border-color: rgba(239, 68, 68, 0.2);
-}
 
 .error-message.toast-notification {
   position: fixed;
@@ -943,9 +938,6 @@ body.dark-mode .error-message {
   color: var(--destructive);
 }
 
-body.dark-mode .error-brief {
-  color: #FCA5A5;
-}
 
 .error-expand {
   font-size: 20px;
@@ -1062,13 +1054,7 @@ body.dark-mode .error-brief {
 .error-message:has(.success-content) {
   background: var(--success-bg);
   color: var(--success-text);
-  border-color: #BBF7D0;
-}
-
-body.dark-mode .error-message:has(.success-content) {
-  background: var(--success-bg);
-  color: var(--success-text);
-  border-color: rgba(34, 197, 94, 0.2);
+  border-color: var(--success-border);
 }
 
 /* ---- Offline States ---- */

From f932518171cdd9e4da23eec6f5b9d8d94248f80f Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Sun, 5 Apr 2026 22:15:36 -0500
Subject: [PATCH 28/42] fix: move CSS alias variables from :root to body for
 correct theme resolution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS custom properties with var() references on :root resolve against
:root's own values, and the computed result is inherited — ignoring
body's theme overrides. Moving aliases like --text-primary: var(--foreground)
to body ensures they resolve against the active theme's values.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 shared/themes.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/shared/themes.css b/shared/themes.css
index f50fbf4..dbc29d0 100644
--- a/shared/themes.css
+++ b/shared/themes.css
@@ -39,10 +39,15 @@
   --error-bg: #FEF2F2;
   --error-text: #991B1B;
   --error-border: #FECACA;
-  --danger-bg: var(--destructive);
   --danger-hover: #D13F3F;
+}
 
-  /* Aliases */
+/* Aliases — MUST be on body (not :root) so var() references
+   resolve against body's theme-overridden values, not html's defaults.
+   If aliases lived on :root (html), var(--foreground) would resolve
+   using html's value and the computed result would be inherited by body,
+   ignoring body's theme overrides. */
+body {
   --bg-primary: var(--background);
   --bg-secondary: var(--muted);
   --bg-tertiary: var(--accent);
@@ -55,6 +60,7 @@
   --text-primary: var(--foreground);
   --text-secondary: var(--muted-foreground);
   --link-hover: var(--link-hover-color);
+  --danger-bg: var(--destructive);
   --font-size-base: 14px;
 }
 

From 8fa34be1e251c2025703ebcf89c2d19809b20945 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:41:37 -0500
Subject: [PATCH 29/42] fix: use default OAuth client ID when no storage
 override exists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

isConfiguredClientId was checking `clientId !== OAUTH_CONFIG.CLIENT_ID`
which blocked the built-in default from being used. The intent was to
detect a missing ID, not a default one — so drop that condition.

Updated the test to confirm the default client ID flows through to the
fetch call rather than rejecting early.
---
 shared/auth.js     |  2 +-
 tests/auth.test.js | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/shared/auth.js b/shared/auth.js
index 379ec2f..80ab451 100644
--- a/shared/auth.js
+++ b/shared/auth.js
@@ -86,7 +86,7 @@ function getScopeString(scopes = OAUTH_CONFIG.SCOPES) {
 }
 
 function isConfiguredClientId(clientId) {
-  return Boolean(clientId) && clientId !== OAUTH_CONFIG.CLIENT_ID;
+  return Boolean(clientId);
 }
 
 async function getGitHubOAuthClientId() {
diff --git a/tests/auth.test.js b/tests/auth.test.js
index 2c0c151..93a9c92 100644
--- a/tests/auth.test.js
+++ b/tests/auth.test.js
@@ -63,14 +63,30 @@ describe('GitHub OAuth helpers', () => {
     );
   });
 
-  it('fails early when no OAuth client ID is configured', async () => {
+  it('uses the default client ID when no storage override exists', async () => {
     const { requestGitHubDeviceCode } = await import('../shared/auth.js');
     mockLocalGet.mockImplementation((keys, callback) => callback({}));
+    mockSyncGet.mockImplementation((keys, callback) => callback({}));
 
-    await expect(requestGitHubDeviceCode()).rejects.toMatchObject({
-      code: 'client_id_missing'
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve(JSON.stringify({
+        device_code: 'device-code',
+        user_code: 'ABCD-EFGH',
+        verification_uri: 'https://github.com/login/device',
+        expires_in: 900,
+        interval: 5
+      }))
     });
-    expect(global.fetch).not.toHaveBeenCalled();
+
+    await requestGitHubDeviceCode();
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://github.com/login/device/code',
+      expect.objectContaining({
+        body: expect.stringContaining('client_id=Ov23li7Mi1dWEgmZTOzB')
+      })
+    );
   });
 
   it('opens the GitHub verification page in a new tab', async () => {

From 92a5c6966ce64489860c68caf1da4cc6cd164b88 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:41:44 -0500
Subject: [PATCH 30/42] feat: copy device code to clipboard when GitHub auth
 flow starts

After the device code arrives, try navigator.clipboard.writeText so the
user can just paste it on the GitHub tab without having to read and
type it manually. Falls back to the old "Enter X on GitHub" message if
the clipboard API isn't available.
---
 options/controllers/token-controller.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/options/controllers/token-controller.js b/options/controllers/token-controller.js
index 07fd82f..6a55f44 100644
--- a/options/controllers/token-controller.js
+++ b/options/controllers/token-controller.js
@@ -126,9 +126,15 @@ export async function connectGitHub(_toastManager) {
 
   try {
     const result = await completeGitHubDeviceAuth({
-      onCode: ({ userCode }) => {
+      onCode: async ({ userCode }) => {
         setDeviceCode(userCode || '');
-        setStatus(`Enter ${userCode} on GitHub to finish connecting.`, 'checking');
+        const copied = await navigator.clipboard?.writeText(userCode).then(() => true).catch(() => false);
+        setStatus(
+          copied
+            ? `Code ${userCode} copied to clipboard — paste it on the GitHub page that opens.`
+            : `Enter ${userCode} on GitHub to finish connecting.`,
+          'checking'
+        );
       }
     });
 

From a30d7f2761d61c97893a81c1c0458331b547084b Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:41:52 -0500
Subject: [PATCH 31/42] refactor: replace bare setInterval with proper snoozed
 repos refresh

The old top-level setInterval was leaking if the page ever got torn
down and had no way to react instantly when snooze state changed.
Replaced it with setupSnoozedReposAutoRefresh() that wires up a
storage.onChanged listener for immediate updates alongside the 5-min
interval tick, and cleans everything up on beforeunload.
---
 options/options.js | 50 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/options/options.js b/options/options.js
index 84a58fe..77cfdb8 100644
--- a/options/options.js
+++ b/options/options.js
@@ -38,6 +38,7 @@ if (typeof document !== 'undefined') {
     await loadSettings();
     setupEventListeners();
     setupThemeListener();
+    setupSnoozedReposAutoRefresh();
 
     // Handle URL parameters for enhanced navigation
     handleUrlParameters();
@@ -1211,11 +1212,50 @@ function parseChangelogMarkdown(markdown) {
   return html;
 }
 
-// Auto-refresh snoozed repos list every 5 minutes
-setInterval(async () => {
-  const settings = await chrome.storage.sync.get(['snoozedRepos']);
-  renderSnoozedRepos(settings.snoozedRepos || []);
-}, 300000);
+// Auto-refresh snoozed repos list:
+// - storage.onChanged: react instantly when snoozes are added/removed
+// - interval: tick down "time remaining" so expired snoozes drop off the list
+let snoozedReposRefreshIntervalId = null;
+let snoozedReposStorageListener = null;
+
+function setupSnoozedReposAutoRefresh() {
+  if (typeof chrome === 'undefined' || !chrome.storage) {
+    return;
+  }
+
+  const refresh = async () => {
+    try {
+      const settings = await chrome.storage.sync.get(['snoozedRepos']);
+      renderSnoozedRepos(settings.snoozedRepos || []);
+    } catch (error) {
+      console.error('Failed to refresh snoozed repos:', error);
+    }
+  };
+
+  snoozedReposStorageListener = (changes, areaName) => {
+    if (areaName === 'sync' && changes.snoozedRepos) {
+      renderSnoozedRepos(changes.snoozedRepos.newValue || []);
+    }
+  };
+  chrome.storage.onChanged.addListener(snoozedReposStorageListener);
+
+  snoozedReposRefreshIntervalId = setInterval(refresh, 300000);
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('beforeunload', teardownSnoozedReposAutoRefresh, { once: true });
+  }
+}
+
+function teardownSnoozedReposAutoRefresh() {
+  if (snoozedReposRefreshIntervalId !== null) {
+    clearInterval(snoozedReposRefreshIntervalId);
+    snoozedReposRefreshIntervalId = null;
+  }
+  if (snoozedReposStorageListener && chrome?.storage?.onChanged) {
+    chrome.storage.onChanged.removeListener(snoozedReposStorageListener);
+    snoozedReposStorageListener = null;
+  }
+}
 
 // ES6 exports for tests
 export {

From 24394530aa3e0d54792bca0f6611a379c84f0c66 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:01 -0500
Subject: [PATCH 32/42] refactor: extract loadAndApplyThemes from nested
 promise callbacks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The theme init was buried in chained .then() calls which made the
sequencing hard to follow. Pulled it into an async function so the
flow reads top-to-bottom: load theme → save if missing → apply →
load color theme → update icon.
---
 popup/popup.js | 44 +++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/popup/popup.js b/popup/popup.js
index 3b119b9..807c2ec 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -148,27 +148,8 @@ function setupEventListeners() {
   });
 
   // Load theme preference - detect system theme on first load
-  getSyncItem('theme', null).then(savedTheme => {
-    let theme = savedTheme;
-
-    // If no saved theme, detect system preference
-    if (theme === null) {
-      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      // Save the detected system theme as the user's preference
-      chrome.storage.sync.set({ theme });
-    }
-
-    applyTheme(theme);
-
-    // Load color theme
-    getSyncItem('colorTheme', 'polar').then(colorTheme => {
-      applyColorTheme(colorTheme);
-    });
-
-    // Add a small delay to ensure DOM is ready before updating icons
-    setTimeout(() => {
-      updateDarkModeIcon();
-    }, 50);
+  loadAndApplyThemes().catch(error => {
+    console.error('Failed to load theme preferences:', error);
   });
 
   }
@@ -176,6 +157,27 @@ function setupEventListeners() {
 // Theme functions now imported from controllers/theme-controller.js
 import { toggleDarkMode, updateDarkModeIcon } from './controllers/theme-controller.js';
 
+async function loadAndApplyThemes() {
+  const savedTheme = await getSyncItem('theme', null);
+  let theme = savedTheme;
+
+  // If no saved theme, detect system preference and persist it
+  if (theme === null) {
+    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    await chrome.storage.sync.set({ theme });
+  }
+
+  applyTheme(theme);
+
+  const colorTheme = await getSyncItem('colorTheme', 'polar');
+  applyColorTheme(colorTheme);
+
+  // Small delay so the icon swap runs after the theme class is on <body>
+  setTimeout(() => {
+    updateDarkModeIcon();
+  }, 50);
+}
+
 // Wrapper for handleRefresh to pass loadActivities callback
 async function handleRefresh() {
   await handleRefreshController((...args) => loadActivities(...args));

From 44a6d3bb662087a296e3f312344816f5b6203536 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:09 -0500
Subject: [PATCH 33/42] polish: tighten onboarding copy and button labels

Headings and descriptions were a bit generic. Updated welcome screen,
token step, and repos step text to be more specific about what the
extension does. Changed button labels from "Next/Get Started" to
"Continue/Open Feed" to better reflect what each step transitions to.

Updated onboarding tests to match renamed status strings
("sign-in" -> "connection").
---
 popup/views/onboarding-view.js | 63 +++++++++++++++++++---------------
 tests/onboarding.test.js       |  4 +--
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/popup/views/onboarding-view.js b/popup/views/onboarding-view.js
index 89c5bae..ed18989 100644
--- a/popup/views/onboarding-view.js
+++ b/popup/views/onboarding-view.js
@@ -98,7 +98,7 @@ async function completePendingDeviceAuth(tokenData, elements, options = {}) {
 
   const { tokenStatus, validateBtn, nextBtn } = elements;
   if (options.showCheckingStatus) {
-    tokenStatus.innerHTML = getStatusMarkup('loading', 'Checking GitHub sign-in...');
+    tokenStatus.innerHTML = getStatusMarkup('loading', 'Checking GitHub connection...');
   }
   validateBtn.disabled = true;
 
@@ -141,7 +141,7 @@ function renderRepoSuggestion(repo) {
   const rawName = repo?.name || 'unknown';
   const owner = escapeHtml(rawOwner);
   const name = escapeHtml(rawName);
-  const description = escapeHtml(repo?.description || `${repo?.language || 'Popular'} project`);
+  const description = escapeHtml(repo?.description || `${repo?.language || 'Popular'} project worth watching`);
   const language = escapeHtml(repo?.language || '');
   const repoFullName = `${rawOwner}/${rawName}`;
   const stars = Number.isFinite(repo?.stargazers_count)
@@ -243,14 +243,14 @@ export async function renderOnboardingStep(loadActivitiesCallback) {
   // Navigation buttons
   const isFinalStep = progress.current === progress.total;
   const isTokenStep = currentStep === 'token';
-  const nextButtonText = isTokenStep ? 'Next' : (isFinalStep ? 'Get Started' : 'Next');
+  const nextButtonText = isTokenStep ? 'Continue' : (isFinalStep ? 'Open Feed' : 'Next');
   const nextButtonDisabled = isTokenStep ? 'disabled' : '';
 
   stepContent += `
     <div class="onboarding-nav">
       ${progress.current >= 1 ? '<button id="prevBtn" class="onboarding-btn secondary">Previous</button>' : '<div></div>'}
       <div class="nav-center"></div>
-      ${!isFinalStep ? `<button id="nextBtn" class="onboarding-btn primary" ${nextButtonDisabled}>${nextButtonText}</button>` : '<button id="finishBtn" class="onboarding-btn primary">Get Started</button>'}
+      ${!isFinalStep ? `<button id="nextBtn" class="onboarding-btn primary" ${nextButtonDisabled}>${nextButtonText}</button>` : '<button id="finishBtn" class="onboarding-btn primary">Open Feed</button>'}
     </div>
   `;
 
@@ -288,8 +288,8 @@ function renderWelcomeStep() {
       <div class="step-icon">
         <img src="../icons/icon128.png" alt="GitHub DevWatch Icon" width="64" height="64">
       </div>
-      <h2>Welcome to GitHub DevWatch!</h2>
-      <p>Monitor your favorite repositories and never miss important activity.</p>
+      <h2>Stay on top of the repos that matter.</h2>
+      <p>DevWatch keeps pull requests, issues, and releases in one compact review queue.</p>
       <div class="feature-list">
         <div class="feature-item">
           <span class="feature-icon">
@@ -316,7 +316,7 @@ function renderWelcomeStep() {
           <span>Customizable filters and preferences</span>
         </div>
       </div>
-      <p class="step-description">Let's get you set up with GitHub repository monitoring.</p>
+      <p class="step-description">A quick setup and your watchlist is ready.</p>
     </div>
   `;
 }
@@ -343,11 +343,11 @@ async function renderTokenStep() {
 
   return `
     <div class="onboarding-step token-step">
-      <h2>Connect GitHub</h2>
-      <p>We'll open GitHub in a new tab and show you the verification code here.</p>
+      <h2>Connect your GitHub account</h2>
+      <p>We'll open GitHub in a new tab and keep the device code ready here for you.</p>
 
       <div class="token-instructions">
-        <h3>Quick setup:</h3>
+        <h3>Quick setup</h3>
         <ol>
           <li>Click <strong>Connect GitHub</strong></li>
           <li>Approve access on the GitHub page that opens</li>
@@ -379,7 +379,7 @@ async function renderTokenStep() {
       <svg class="info-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
       </svg>
-      Your GitHub sign-in stays in Chrome session storage for the current browser session only. It's used only for GitHub API access and is cleared when the browser session ends.
+      Your GitHub session stays in Chrome session storage for the current browser session only. It's used for GitHub API access and is cleared when the browser session ends.
     </p>
   `;
 }
@@ -397,10 +397,10 @@ export async function renderReposStep() {
 
   return `
     <div class="onboarding-step repos-step">
-      <h2>Add Repositories to Watch</h2>
+      <h2>Build your watchlist</h2>
 
       <div class="popular-repos">
-        <h3>Popular repositories:</h3>
+        <h3>Popular repositories</h3>
         <div class="repo-suggestions" id="repoSuggestions">
           ${popularRepos && popularRepos.length > 0 ?
             popularRepos.map(renderRepoSuggestion).join('') :
@@ -410,7 +410,7 @@ export async function renderReposStep() {
       </div>
 
       <div class="manual-repo">
-        <h3>Or add a specific repository:</h3>
+        <h3>Or add one directly</h3>
         <div class="manual-input-group">
           <input
             type="text"
@@ -430,8 +430,8 @@ export async function renderReposStep() {
 function renderCategoriesStep() {
   return `
     <div class="onboarding-step categories-step">
-      <h2>Choose What to Track</h2>
-      <p class="step-subtitle">Select categories and notification preferences</p>
+      <h2>Choose what shows up</h2>
+      <p class="step-subtitle">Pick activity types and notification behavior</p>
 
       <div class="categories-list">
         <div class="category-item" data-category="pullRequests">
@@ -507,7 +507,7 @@ function renderCategoriesStep() {
         </div>
       </div>
 
-      <p class="step-note">You can change these in settings anytime.</p>
+      <p class="step-note">You can fine-tune everything later in settings.</p>
     </div>
   `;
 }
@@ -687,10 +687,10 @@ function setupTokenStepListeners() {
           error?.code === 'client_id_missing'
             ? 'GitHub OAuth client ID is not configured for this build.'
             : error?.code === 'access_denied'
-              ? 'GitHub sign-in was cancelled'
+              ? 'GitHub connection was cancelled'
               : error?.code === 'expired_token'
-                ? 'GitHub sign-in expired. Start again.'
-                : 'GitHub sign-in failed'
+                ? 'GitHub connection expired. Start again.'
+                : 'GitHub connection failed'
         );
         validateBtn.disabled = false;
         validateBtn.textContent = 'Connect GitHub';
@@ -700,7 +700,7 @@ function setupTokenStepListeners() {
 
   validateBtn?.addEventListener('click', async () => {
     validateBtn.disabled = true;
-    tokenStatus.innerHTML = getStatusMarkup('loading', 'Starting GitHub sign-in...');
+    tokenStatus.innerHTML = getStatusMarkup('loading', 'Starting GitHub connection...');
 
     try {
       const deviceCodeData = await requestGitHubDeviceCode();
@@ -710,7 +710,14 @@ function setupTokenStepListeners() {
       if (copyTokenCodeBtn) {
         copyTokenCodeBtn.disabled = !tokenInput.value;
       }
-      tokenStatus.innerHTML = getStatusMarkup('loading', `Enter ${deviceCodeData.userCode} on GitHub to finish connecting.`);
+
+      const copied = await copyTextToClipboard(deviceCodeData.userCode).catch(() => false);
+      tokenStatus.innerHTML = getStatusMarkup('loading',
+        copied
+          ? `Code ${deviceCodeData.userCode} copied to clipboard — paste it on the GitHub page that opens.`
+          : `Enter ${deviceCodeData.userCode} on GitHub to finish connecting.`
+      );
+
       await onboardingManager.saveStepData('token', {
         userCode: deviceCodeData.userCode,
         validated: false,
@@ -743,10 +750,10 @@ function setupTokenStepListeners() {
         error?.code === 'client_id_missing'
           ? 'GitHub OAuth client ID is not configured for this build.'
           : error?.code === 'access_denied'
-            ? 'GitHub sign-in was cancelled'
+            ? 'GitHub connection was cancelled'
             : error?.code === 'expired_token'
-              ? 'GitHub sign-in expired. Start again.'
-            : 'GitHub sign-in failed'
+              ? 'GitHub connection expired. Start again.'
+            : 'GitHub connection failed'
       );
       validateBtn.disabled = false;
       validateBtn.textContent = 'Connect GitHub';
@@ -812,7 +819,7 @@ function attachRepoButtonListeners() {
             repos.push({
               fullName: data.full_name,
               name: data.name,
-              description: data.description || 'No description provided',
+              description: data.description || 'No project description yet.',
               language: data.language || 'Unknown',
               stars: data.stargazers_count || 0,
               forks: data.forks_count || 0,
@@ -914,7 +921,7 @@ function setupReposStepListeners() {
           repos.push({
             fullName: data.full_name,
             name: data.name,
-            description: data.description || 'No description provided',
+            description: data.description || 'No project description yet.',
             language: data.language || 'Unknown',
             stars: data.stargazers_count || 0,
             forks: data.forks_count || 0,
@@ -1001,7 +1008,7 @@ export async function handleNextStep() {
       if (!existing.validated) {
         const tokenStatus = document.getElementById('tokenStatus');
         if (tokenStatus) {
-          tokenStatus.textContent = 'Connect GitHub to continue.';
+          tokenStatus.textContent = 'Connect GitHub before continuing.';
           tokenStatus.className = 'token-status error';
         }
         document.getElementById('validateTokenBtn')?.focus();
diff --git a/tests/onboarding.test.js b/tests/onboarding.test.js
index 0e425aa..f7ea3d5 100644
--- a/tests/onboarding.test.js
+++ b/tests/onboarding.test.js
@@ -384,7 +384,7 @@ describe('Onboarding - token persistence', () => {
     await Promise.resolve();
     await new Promise(resolve => setTimeout(resolve, 0));
 
-    expect(document.getElementById('tokenStatus').textContent).toBe('GitHub sign-in was cancelled');
+    expect(document.getElementById('tokenStatus').textContent).toBe('GitHub connection was cancelled');
   });
 
   test('connect step handles device flow errors', async () => {
@@ -396,7 +396,7 @@ describe('Onboarding - token persistence', () => {
     await Promise.resolve();
     await new Promise(resolve => setTimeout(resolve, 0));
 
-    expect(document.getElementById('tokenStatus').textContent).toBe('GitHub sign-in failed');
+    expect(document.getElementById('tokenStatus').textContent).toBe('GitHub connection failed');
   });
 
   test('connect step escapes successful sign-in messages', async () => {

From 954e428de62e12c3fb8549fffc14e8e17f20dbe6 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:16 -0500
Subject: [PATCH 34/42] fix: unskip import success test, use
 advanceTimersByTimeAsync

The test was skipped with a TODO about Jest 30 timer handling. Switched
from advanceTimersByTime to advanceTimersByTimeAsync so async callbacks
inside the timer fire correctly, which is what Jest 30 requires.
---
 tests/export-import-controller.test.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/tests/export-import-controller.test.js b/tests/export-import-controller.test.js
index d85cdfd..4853e64 100644
--- a/tests/export-import-controller.test.js
+++ b/tests/export-import-controller.test.js
@@ -341,9 +341,9 @@ describe('export-import-controller', () => {
       expect(loadSettingsCallback).toHaveBeenCalled();
     });
 
-    // TODO: This test needs to be updated for Jest 30's timer handling
-    test.skip('shows success notification and reloads page', async () => {
-      jest.useFakeTimers({ legacyFakeTimers: true });
+    test('shows success notification and schedules page reload', async () => {
+      allowUnexpectedConsole('error');
+      jest.useFakeTimers();
 
       const importData = {
         settings: {
@@ -359,7 +359,8 @@ describe('export-import-controller', () => {
         expect.stringContaining('Settings imported successfully')
       );
 
-      jest.advanceTimersByTime(1500);
+      // Verify the reload timer fires without throwing
+      await jest.advanceTimersByTimeAsync(1500);
 
       jest.useRealTimers();
     });

From 78c6ee52d6987fa1f0368d70c067840e1004cf17 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:23 -0500
Subject: [PATCH 35/42] fix: evict stale cache entries before each activity
 list render

cleanupCache() was only called during periodic maintenance, so entries
could linger between renders and skew the deduplication logic. Calling
it at the top of render() ensures the cache reflects actual current
state before generating HTML.
---
 shared/dom-optimizer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/shared/dom-optimizer.js b/shared/dom-optimizer.js
index aa031bd..5c80c92 100644
--- a/shared/dom-optimizer.js
+++ b/shared/dom-optimizer.js
@@ -274,6 +274,9 @@ class ActivityListRenderer {
 
     this.lastRenderedData = renderKey;
 
+    // Evict stale cache entries before rendering
+    this.cleanupCache();
+
     // Render synchronously to ensure DOM is ready for event listeners
     const html = this.generateActivityHTML(limitedActivities, {
       groupByRepo,

From cb39f989c9a6add1a5a498e672f77428aeb860fa Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:30 -0500
Subject: [PATCH 36/42] chore: update jsconfig to ES2020 modules with bundler
 resolution

Switching moduleResolution from "node" to "bundler" better matches how
the extension's ES modules are actually resolved at runtime. Also bumps
the lockfile version to match the 1.0.3 package.json.
---
 jsconfig.json     | 4 ++--
 package-lock.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/jsconfig.json b/jsconfig.json
index 2e4ac03..55cce57 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "commonjs",
+    "module": "ES2020",
     "checkJs": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "noEmit": true,
     "skipLibCheck": true,
diff --git a/package-lock.json b/package-lock.json
index 88c2784..2eb14f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "github-devwatch-chrome",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "github-devwatch-chrome",
-      "version": "1.0.2",
+      "version": "1.0.3",
       "license": "MIT",
       "devDependencies": {
         "@eslint/js": "^9.39.1",

From 899a29f86c3343981b5ae3eb825677780a455f4b Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 6 Apr 2026 20:42:38 -0500
Subject: [PATCH 37/42] fix: add Google Fonts to manifest CSP for Inter font

The Inter import added earlier loads from fonts.googleapis.com, but
the CSP only allowed 'self' for styles and fonts. Added both domains
so the browser doesn't block the stylesheet and font file requests.
---
 manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manifest.json b/manifest.json
index 4fb6033..76e67a3 100644
--- a/manifest.json
+++ b/manifest.json
@@ -34,6 +34,6 @@
     "128": "icons/icon128.png"
   },
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' https://api.github.com https://github.com https://registry.npmjs.org; img-src 'self' data: https://github.com https://*.github.com https://githubusercontent.com https://*.githubusercontent.com; default-src 'self'; style-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' https://api.github.com https://github.com https://registry.npmjs.org; img-src 'self' data: https://github.com https://*.github.com https://githubusercontent.com https://*.githubusercontent.com; default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com"
   }
 }

From c5709fe7df021a9bdcec9d330d1d8e6f14314cdb Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 13 Apr 2026 21:06:50 -0500
Subject: [PATCH 38/42] refactor: centralize feed and settings helpers

---
 background.js                                 | 365 +++++++----
 .../controllers/export-import-controller.js   |  28 +-
 options/controllers/import-controller.js      |  22 +-
 options/controllers/token-controller.js       |  34 +-
 options/options.css                           | 276 ++++++++-
 options/options.html                          | 125 ++--
 options/options.js                            | 571 +++++++-----------
 popup/controllers/activity-controller.js      |  27 +-
 popup/controllers/repository-controller.js    | 148 ++---
 popup/popup.js                                | 131 ++--
 popup/views/activity-item-view.js             |  87 +--
 popup/views/activity-list-view.js             |  11 +-
 popup/views/onboarding-view.js                | 167 ++---
 shared/dom-optimizer.js                       | 102 +---
 shared/feed-mutations.js                      | 103 ++++
 shared/feed-policy.js                         | 111 ++++
 shared/feed-presentation.js                   | 119 ++++
 shared/repo-service.js                        | 210 +++++++
 shared/settings-schema.js                     | 143 +++++
 shared/state-manager.js                       | 118 ++--
 shared/storage-helpers.js                     | 100 ++-
 21 files changed, 1845 insertions(+), 1153 deletions(-)
 create mode 100644 shared/feed-mutations.js
 create mode 100644 shared/feed-policy.js
 create mode 100644 shared/feed-presentation.js
 create mode 100644 shared/repo-service.js
 create mode 100644 shared/settings-schema.js

diff --git a/background.js b/background.js
index 24dc655..d8964d3 100644
--- a/background.js
+++ b/background.js
@@ -1,7 +1,27 @@
 import { createHeaders, handleApiResponse, mapActivity, filterActivitiesByDate } from './shared/github-api.js';
-import { getSyncItems, getLocalItems, setLocalItem, getExcludedRepos, getAccessToken, getFilteringSettings, getWatchedRepos } from './shared/storage-helpers.js';
+import {
+  getSyncItems,
+  getLocalItems,
+  getSettings,
+  setLocalItem,
+  setSyncItem,
+  getExcludedRepos,
+  getAccessToken,
+  getFilteringSettings,
+  getWatchedRepos
+} from './shared/storage-helpers.js';
 import { extractRepoName } from './shared/repository-utils.js';
 import { safelyOpenUrl } from './shared/security.js';
+import { prepareActivitiesForStorage, countUnreadActivities } from './shared/feed-policy.js';
+import {
+  clearArchivedFeedData,
+  getAllActivityIds,
+  getRepoUnreadActivityIds,
+  markActivitiesAsRead,
+  markActivityAsUnread,
+  removeRepoFeedData,
+  upsertSnoozedRepo
+} from './shared/feed-mutations.js';
 
 const ALARM_NAME = 'checkGitHub';
 const DEFAULT_INTERVAL = 15;
@@ -46,6 +66,10 @@ function setupAlarm(intervalMinutes) {
   });
 }
 
+function isValidInterval(interval) {
+  return Number.isFinite(interval) && interval > 0;
+}
+
 if (typeof chrome !== 'undefined' && chrome.alarms) {
   // Listen for alarm and check GitHub
   chrome.alarms.onAlarm.addListener((alarm) => {
@@ -358,16 +382,7 @@ async function storeActivities(newActivities) {
     // Get list of repos to exclude
     const excludedRepos = getExcludedRepos(mutedRepos, activeSnoozedRepos);
 
-    // Merge new activities, avoiding duplicates
-    const existingIds = new Set(activities.map(a => a.id));
-    const uniqueNew = newActivities.filter(a => !existingIds.has(a.id));
-
-    // Filter out activities from excluded repos
-    const allActivities = [...uniqueNew, ...activities];
-    const filtered = allActivities.filter(a => !excludedRepos.has(a.repo));
-
-    // Keep up to 2000 items (same limit as state manager)
-    const updated = filtered.slice(0, 2000);
+    const updated = prepareActivitiesForStorage(activities, newActivities, { excludedRepos });
 
     // Try to store, with error handling for quota exceeded
     try {
@@ -377,12 +392,12 @@ async function storeActivities(newActivities) {
 
       if (storageError.message.includes('quota')) {
         // Try to free up space by reducing to 50 items
-        const reduced = filtered.slice(0, 50);
+        const reduced = updated.slice(0, 50);
         try {
           await setLocalItem('activities', reduced);
         } catch (_retryError) {
           // If still failing, try with just 25 items
-          const minimal = filtered.slice(0, 25);
+          const minimal = updated.slice(0, 25);
           await setLocalItem('activities', minimal);
         }
       } else {
@@ -399,20 +414,14 @@ async function storeActivities(newActivities) {
 async function updateBadge() {
   const { readItems = [], activities = [] } = await getLocalItems(['readItems', 'activities']);
   const { itemExpiryHours } = await getSyncItems(['itemExpiryHours']);
-
-  let filteredActivities = activities;
-
-  // Apply time-based expiry filter (same logic as getFilteredActivities in state-manager)
-  if (itemExpiryHours !== null && itemExpiryHours > 0) {
-    const expiryThreshold = Date.now() - (itemExpiryHours * 60 * 60 * 1000);
-    filteredActivities = filteredActivities.filter(activity => {
-      const activityTime = new Date(activity.createdAt).getTime();
-      return activityTime >= expiryThreshold;
-    });
-  }
-
-  // Count only unread items (not in readItems)
-  const unreadCount = filteredActivities.filter(a => !readItems.includes(a.id)).length;
+  const { mutedRepos, snoozedRepos } = await getFilteringSettings();
+  const activeSnoozedRepos = await cleanExpiredSnoozes(snoozedRepos);
+  const excludedRepos = getExcludedRepos(mutedRepos, activeSnoozedRepos);
+  const unreadCount = countUnreadActivities(activities, {
+    excludedRepos,
+    itemExpiryHours,
+    readItems
+  });
 
   chrome.action.setBadgeText({ text: unreadCount > 0 ? unreadCount.toString() : '' });
   chrome.action.setBadgeBackgroundColor({ color: '#0366d6' });
@@ -467,145 +476,233 @@ function showNotifications(activities, notificationSettings = {}) {
   });
 }
 
-if (typeof chrome !== 'undefined' && chrome.runtime) {
-  // Allow manual check from popup
-  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-    // Validate request object
-    if (!request || typeof request.action !== 'string') {
-      sendResponse({ success: false, error: 'Invalid request' });
-      return false;
-    }
+async function getFeedStorageState() {
+  const { activities = [], readItems = [] } = await getLocalItems(['activities', 'readItems']);
+  return { activities, readItems };
+}
 
-    // Handle different message types with consistent async/error handling
-    if (request.action === 'checkNow') {
-      checkGitHubActivity()
-        .then(() => sendResponse({ success: true }))
-        .catch((error) => {
-          console.error('[DevWatch] Error in checkNow handler:', error);
-          sendResponse({ success: false, error: error.message });
-        });
-      return true; // Required for async response
-    }
+async function persistFeedStorageState({ activities, readItems }) {
+  const writes = [];
 
-    if (request.action === 'clearBadge') {
-      try {
-        chrome.action.setBadgeText({ text: '' });
-        sendResponse({ success: true });
-      } catch (error) {
-        console.error('[DevWatch] Error in clearBadge handler:', error);
-        sendResponse({ success: false, error: error.message });
-      }
-      return true; // Keep consistent async pattern
-    }
+  if (activities !== undefined) {
+    writes.push(setLocalItem('activities', activities));
+  }
 
-    if (request.action === 'markAsRead') {
-      if (!request.id) {
-        sendResponse({ success: false, error: 'Missing id parameter' });
-        return false;
-      }
+  if (readItems !== undefined) {
+    writes.push(setLocalItem('readItems', readItems));
+  }
 
-      chrome.storage.local.get(['readItems'], (result) => {
-        try {
-          const readItems = result.readItems || [];
-          if (!readItems.includes(request.id)) {
-            readItems.push(request.id);
-            chrome.storage.local.set({ readItems }, () => {
-              if (chrome.runtime.lastError) {
-                console.error('[DevWatch] Storage error in markAsRead:', chrome.runtime.lastError);
-                sendResponse({ success: false, error: chrome.runtime.lastError.message });
-              } else {
-                updateBadge().catch(err => console.error('[DevWatch] Badge update error:', err));
-                sendResponse({ success: true });
-              }
-            });
-          } else {
-            sendResponse({ success: true });
-          }
-        } catch (error) {
-          console.error('[DevWatch] Error in markAsRead handler:', error);
-          sendResponse({ success: false, error: error.message });
-        }
-      });
-      return true;
-    }
+  await Promise.all(writes);
+  await updateBadge();
+}
 
-    if (request.action === 'markAsUnread') {
-      if (!request.id) {
-        sendResponse({ success: false, error: 'Missing id parameter' });
-        return false;
-      }
+async function handleMarkAsRead(id) {
+  if (!id) {
+    throw new Error('Missing id parameter');
+  }
 
-      chrome.storage.local.get(['readItems'], (result) => {
-        try {
-          const readItems = result.readItems || [];
-          const updated = readItems.filter(id => id !== request.id);
-          chrome.storage.local.set({ readItems: updated }, () => {
-            if (chrome.runtime.lastError) {
-              console.error('[DevWatch] Storage error in markAsUnread:', chrome.runtime.lastError);
-              sendResponse({ success: false, error: chrome.runtime.lastError.message });
-            } else {
-              updateBadge().catch(err => console.error('[DevWatch] Badge update error:', err));
-              sendResponse({ success: true });
-            }
-          });
-        } catch (error) {
-          console.error('[DevWatch] Error in markAsUnread handler:', error);
-          sendResponse({ success: false, error: error.message });
-        }
-      });
-      return true;
+  const { readItems } = await getFeedStorageState();
+  const updatedReadItems = markActivitiesAsRead(readItems, [id]);
+
+  if (updatedReadItems.length !== readItems.length) {
+    await persistFeedStorageState({ readItems: updatedReadItems });
+  } else {
+    await updateBadge();
+  }
+}
+
+async function handleMarkAsUnread(id) {
+  if (!id) {
+    throw new Error('Missing id parameter');
+  }
+
+  const { readItems } = await getFeedStorageState();
+  const updatedReadItems = markActivityAsUnread(readItems, id);
+  await persistFeedStorageState({ readItems: updatedReadItems });
+}
+
+async function handleMarkActivitiesAsRead(ids = []) {
+  const { readItems } = await getFeedStorageState();
+  const updatedReadItems = markActivitiesAsRead(readItems, ids);
+  await persistFeedStorageState({ readItems: updatedReadItems });
+}
+
+async function handleMarkAllAsRead() {
+  const { activities, readItems } = await getFeedStorageState();
+  const updatedReadItems = markActivitiesAsRead(readItems, getAllActivityIds(activities));
+  await persistFeedStorageState({ readItems: updatedReadItems });
+}
+
+async function handleMarkRepoAsRead(repo) {
+  if (!repo) {
+    throw new Error('Missing repo parameter');
+  }
+
+  const { activities, readItems } = await getFeedStorageState();
+  const unreadIds = getRepoUnreadActivityIds(activities, readItems, repo);
+  const updatedReadItems = markActivitiesAsRead(readItems, unreadIds);
+  await persistFeedStorageState({ readItems: updatedReadItems });
+}
+
+async function handleClearArchive() {
+  const feedState = await getFeedStorageState();
+  await persistFeedStorageState(clearArchivedFeedData(feedState));
+}
+
+async function handleSnoozeRepo(repo) {
+  if (!repo) {
+    throw new Error('Missing repo parameter');
+  }
+
+  const settings = await getSettings();
+  const snoozeHours = Number.isFinite(Number(settings.snoozeHours)) ? Number(settings.snoozeHours) : 1;
+  const expiresAt = Date.now() + (snoozeHours * 60 * 60 * 1000);
+  const updatedSnoozedRepos = upsertSnoozedRepo(settings.snoozedRepos, repo, expiresAt);
+
+  await setSyncItem('snoozedRepos', updatedSnoozedRepos);
+
+  if (settings.markReadOnSnooze) {
+    const { activities, readItems } = await getFeedStorageState();
+    const unreadIds = getRepoUnreadActivityIds(activities, readItems, repo);
+    const updatedReadItems = markActivitiesAsRead(readItems, unreadIds);
+    await persistFeedStorageState({ readItems: updatedReadItems });
+    return;
+  }
+
+  await updateBadge();
+}
+
+async function handleRemoveRepoData(repo) {
+  if (!repo) {
+    throw new Error('Missing repo parameter');
+  }
+
+  const feedState = await getFeedStorageState();
+  await persistFeedStorageState(removeRepoFeedData(feedState, repo));
+}
+
+async function runRuntimeAction(request) {
+  switch (request.action) {
+  case 'checkNow':
+    await checkGitHubActivity();
+    return { success: true };
+  case 'markAsRead':
+    await handleMarkAsRead(request.id);
+    return { success: true };
+  case 'markAsUnread':
+    await handleMarkAsUnread(request.id);
+    return { success: true };
+  case 'markActivitiesAsRead':
+    await handleMarkActivitiesAsRead(request.ids || []);
+    return { success: true };
+  case 'markAllAsRead':
+    await handleMarkAllAsRead();
+    return { success: true };
+  case 'markRepoAsRead':
+    await handleMarkRepoAsRead(request.repo);
+    return { success: true };
+  case 'clearArchive':
+    await handleClearArchive();
+    return { success: true };
+  case 'snoozeRepo':
+    await handleSnoozeRepo(request.repo);
+    return { success: true };
+  case 'removeRepoData':
+    await handleRemoveRepoData(request.repo);
+    return { success: true };
+  default:
+    return null;
+  }
+}
+
+function handleRuntimeMessage(request, sender, sendResponse) {
+  // Validate request object
+  if (!request || typeof request.action !== 'string') {
+    sendResponse({ success: false, error: 'Invalid request' });
+    return false;
+  }
+
+  if (request.action === 'clearBadge') {
+    try {
+      chrome.action.setBadgeText({ text: '' });
+      sendResponse({ success: true });
+    } catch (error) {
+      console.error('[DevWatch] Error in clearBadge handler:', error);
+      sendResponse({ success: false, error: error.message });
     }
+    return true; // Keep consistent async pattern
+  }
 
-    if (request.action === 'markAllAsRead') {
-      chrome.storage.local.get(['activities'], (result) => {
-        try {
-          const activities = result.activities || [];
-          const allIds = activities.map(a => a.id);
-          chrome.storage.local.set({ readItems: allIds }, () => {
-            if (chrome.runtime.lastError) {
-              console.error('[DevWatch] Storage error in markAllAsRead:', chrome.runtime.lastError);
-              sendResponse({ success: false, error: chrome.runtime.lastError.message });
-            } else {
-              updateBadge().catch(err => console.error('[DevWatch] Badge update error:', err));
-              sendResponse({ success: true });
-            }
-          });
-        } catch (error) {
-          console.error('[DevWatch] Error in markAllAsRead handler:', error);
-          sendResponse({ success: false, error: error.message });
-        }
-      });
-      return true;
+  if (request.action === 'updateInterval') {
+    const interval = Number(request.interval);
+    if (!isValidInterval(interval)) {
+      sendResponse({ success: false, error: 'Invalid interval parameter' });
+      return false;
     }
 
-    // Unknown action
-    sendResponse({ success: false, error: 'Unknown action' });
-    return false;
-  });
+    try {
+      setupAlarm(interval);
+      sendResponse({ success: true });
+    } catch (error) {
+      console.error('[DevWatch] Error in updateInterval handler:', error);
+      sendResponse({ success: false, error: error.message });
+    }
+    return true;
+  }
+
+  runRuntimeAction(request)
+    .then((result) => {
+      if (result) {
+        sendResponse(result);
+      } else {
+        sendResponse({ success: false, error: 'Unknown action' });
+      }
+    })
+    .catch((error) => {
+      console.error(`[DevWatch] Error in ${request.action} handler:`, error);
+      sendResponse({ success: false, error: error.message });
+    });
+  return true;
+
+}
+
+if (typeof chrome !== 'undefined' && chrome.runtime) {
+  // Allow manual check from popup
+  chrome.runtime.onMessage.addListener(handleRuntimeMessage);
 }
 
 // Export functions for testing
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     setupAlarm,
+    isValidInterval,
+    handleRuntimeMessage,
     checkGitHubActivity,
     fetchRepoActivity,
     storeActivities,
     updateBadge,
     showNotifications,
     cleanExpiredSnoozes,
-    cleanupOldUnmutedEntries
+    cleanupOldUnmutedEntries,
+    getFeedStorageState,
+    persistFeedStorageState,
+    runRuntimeAction
   };
 }
 
 // ES6 exports for tests
 export {
   setupAlarm,
+  isValidInterval,
+  handleRuntimeMessage,
   checkGitHubActivity,
   fetchRepoActivity,
   storeActivities,
   updateBadge,
   showNotifications,
   cleanExpiredSnoozes,
-  cleanupOldUnmutedEntries
+  cleanupOldUnmutedEntries,
+  getFeedStorageState,
+  persistFeedStorageState,
+  runRuntimeAction
 };
diff --git a/options/controllers/export-import-controller.js b/options/controllers/export-import-controller.js
index 1267cad..419d7eb 100644
--- a/options/controllers/export-import-controller.js
+++ b/options/controllers/export-import-controller.js
@@ -1,26 +1,19 @@
 import { NotificationManager } from '../../shared/ui/notification-manager.js';
-import { getWatchedRepos, setWatchedRepos } from '../../shared/storage-helpers.js';
+import { getSettings, setWatchedRepos, updateSettings } from '../../shared/storage-helpers.js';
+import { normalizeSettings, pickSyncSettings } from '../../shared/settings-schema.js';
 
 const notifications = NotificationManager.getInstance();
 
 export async function exportSettings() {
   try {
-    const syncData = await chrome.storage.sync.get(null);
-    const watchedRepos = await getWatchedRepos();
+    const settings = await getSettings();
 
     const exportData = {
       version: '1.0.0',
       exportedAt: new Date().toISOString(),
       settings: {
-        watchedRepos,
-        mutedRepos: syncData.mutedRepos || [],
-        pinnedRepos: syncData.pinnedRepos || [],
-        filters: syncData.filters || { prs: true, issues: true, releases: true },
-        notifications: syncData.notifications || { prs: true, issues: true, releases: true },
-        theme: syncData.theme || 'system',
-        checkInterval: syncData.checkInterval || 15,
-        snoozeHours: syncData.snoozeHours || 1,
-        snoozedRepos: syncData.snoozedRepos || []
+        watchedRepos: settings.watchedRepos,
+        ...pickSyncSettings(settings)
       }
     };
 
@@ -66,16 +59,7 @@ export async function handleImportFile(event, loadSettingsCallback) {
 
     const settings = importData.settings;
     await setWatchedRepos(settings.watchedRepos || []);
-    await chrome.storage.sync.set({
-      mutedRepos: settings.mutedRepos || [],
-      pinnedRepos: settings.pinnedRepos || [],
-      filters: settings.filters || { prs: true, issues: true, releases: true },
-      notifications: settings.notifications || { prs: true, issues: true, releases: true },
-      theme: settings.theme || 'system',
-      checkInterval: settings.checkInterval || 15,
-      snoozeHours: settings.snoozeHours || 1,
-      snoozedRepos: settings.snoozedRepos || []
-    });
+    await updateSettings(normalizeSettings(settings));
 
     if (settings.checkInterval) {
       chrome.runtime.sendMessage({
diff --git a/options/controllers/import-controller.js b/options/controllers/import-controller.js
index 4f2dd3f..0cea908 100644
--- a/options/controllers/import-controller.js
+++ b/options/controllers/import-controller.js
@@ -1,6 +1,7 @@
 import { STORAGE_CONFIG } from '../../shared/config.js';
 import { getAccessToken, getSyncItem, setWatchedRepos } from '../../shared/storage-helpers.js';
 import { createHeaders } from '../../shared/github-api.js';
+import { getRepoFullName, normalizeWatchedRepoRecord } from '../../shared/repo-service.js';
 import { escapeHtml, unescapeHtml } from '../../shared/sanitize.js';
 import { formatDateVerbose } from '../../shared/utils.js';
 import { STAR_ICON, createSvg } from '../../shared/icons.js';
@@ -62,25 +63,6 @@ function formatNumber(num) {
   return num.toString();
 }
 
-function getRepoFullName(repo) {
-  if (typeof repo === 'string') {
-    return repo;
-  }
-
-  return repo?.fullName || '';
-}
-
-function normalizeImportedRepo(repo) {
-  return {
-    fullName: repo.fullName,
-    description: repo.description || 'No description provided',
-    language: repo.language || 'Unknown',
-    stars: repo.stars || 0,
-    updatedAt: repo.updatedAt || new Date().toISOString(),
-    addedAt: new Date().toISOString()
-  };
-}
-
 export async function openImportModal(type, watchedRepos) {
   const token = await getAccessToken();
   if (!token) {
@@ -364,7 +346,7 @@ export async function importSelectedRepos(watchedRepos, onReposAdded) {
 
   const nextWatchedRepos = [
     ...watchedRepos,
-    ...uniqueReposToImport.map(normalizeImportedRepo)
+    ...uniqueReposToImport.map(repo => normalizeWatchedRepoRecord(repo))
   ];
 
   await setWatchedRepos(nextWatchedRepos);
diff --git a/options/controllers/token-controller.js b/options/controllers/token-controller.js
index 6a55f44..2078be7 100644
--- a/options/controllers/token-controller.js
+++ b/options/controllers/token-controller.js
@@ -37,7 +37,29 @@ function setDeviceCode(userCode = '') {
 
   deviceCodeInput.value = userCode;
   deviceCodeSection.classList.toggle('hidden', !userCode);
-  deviceCodeSection.style.display = userCode ? 'block' : 'none';
+  deviceCodeSection.style.display = userCode ? 'flex' : 'none';
+}
+
+function setHelpText(message = '') {
+  const helpEl = document.getElementById('token-help');
+
+  if (!helpEl) {
+    return;
+  }
+
+  helpEl.textContent = message;
+}
+
+function getHelpText({ isConnected = false, isWaiting = false } = {}) {
+  if (isWaiting) {
+    return 'Approve access in the GitHub tab, then return here. If GitHub asks for a code, use the one shown below.';
+  }
+
+  if (isConnected) {
+    return 'Reconnect any time if your session expires or if you want to switch accounts.';
+  }
+
+  return 'We\'ll open GitHub in a new tab. Approve access there, then come back here and DevWatch will finish connecting.';
 }
 
 function setStatus(message = '', statusClass = '') {
@@ -59,6 +81,10 @@ export function applyStoredConnection(authSession, options = {}) {
 
   setRepoAccessState(isConnected);
   setDeviceCode(options.userCode || '');
+  setHelpText(options.helpText || getHelpText({
+    isConnected,
+    isWaiting: options.statusClass === 'checking'
+  }));
 
   if (connectBtn) {
     connectBtn.disabled = false;
@@ -123,18 +149,22 @@ export async function connectGitHub(_toastManager) {
 
   setRepoAccessState(Boolean(previousSession?.accessToken));
   setStatus('Starting GitHub sign-in...', 'checking');
+  setHelpText('We\'re opening GitHub so you can approve access. Come back here as soon as GitHub says the connection is ready.');
 
   try {
     const result = await completeGitHubDeviceAuth({
       onCode: async ({ userCode }) => {
         setDeviceCode(userCode || '');
-        const copied = await navigator.clipboard?.writeText(userCode).then(() => true).catch(() => false);
+        const copied = navigator.clipboard?.writeText
+          ? await navigator.clipboard.writeText(userCode).then(() => true).catch(() => false)
+          : false;
         setStatus(
           copied
             ? `Code ${userCode} copied to clipboard — paste it on the GitHub page that opens.`
             : `Enter ${userCode} on GitHub to finish connecting.`,
           'checking'
         );
+        setHelpText(getHelpText({ isWaiting: true }));
       }
     });
 
diff --git a/options/options.css b/options/options.css
index 2663dab..ff59892 100644
--- a/options/options.css
+++ b/options/options.css
@@ -898,7 +898,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Primary Setup Step (Step 1 with token input) */
 .setup-step-primary {
-  background: rgba(255, 255, 255, 0.05);
+  background:
+    radial-gradient(circle at top right, var(--bg-gradient-glow), transparent 32%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
   border-color: var(--border-hover);
   padding: 24px;
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
@@ -915,6 +917,214 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .step-all-content {
   flex: 1;
+  width: 100%;
+}
+
+.github-connect-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  gap: 24px;
+  align-items: stretch;
+}
+
+.github-connect-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.github-connect-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.github-step-label {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+}
+
+.github-connect-copy h3 {
+  font-size: 28px;
+  line-height: 1.1;
+  margin: 0 0 10px;
+  color: var(--text-primary);
+  letter-spacing: -0.05em;
+}
+
+.github-connect-copy p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  margin: 0;
+  max-width: 60ch;
+}
+
+.github-connect-facts {
+  display: grid;
+  gap: 12px;
+}
+
+.github-connect-fact {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 14px;
+  align-items: start;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
+}
+
+.github-connect-fact-icon {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  flex-shrink: 0;
+}
+
+.github-connect-fact-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.github-connect-fact-title {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--text-primary);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  text-transform: uppercase;
+}
+
+.github-connect-fact-copy {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.github-connect-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-color);
+  border-radius: 22px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 34px rgba(0, 0, 0, 0.08);
+}
+
+.github-connect-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.github-panel-label {
+  margin: 0 0 10px;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+}
+
+.github-connect-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.github-connect-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.github-connect-help {
+  margin: 0;
+  font-size: 13px;
+}
+
+.github-connect-flow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.github-connect-flow-step {
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  min-height: 108px;
+}
+
+.github-connect-flow-step span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  margin-bottom: 12px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 700;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+}
+
+.github-connect-flow-step p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.device-code-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px dashed var(--border-hover);
+  border-radius: 18px;
+}
+
+.device-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.device-code-note {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
 }
 
 .step-header-section {
@@ -975,6 +1185,37 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   gap: 12px;
 }
 
+@media (max-width: 980px) {
+  .github-connect-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .github-connect-copy h3 {
+    font-size: 24px;
+  }
+
+  .github-connect-panel-header,
+  .device-code-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .github-connect-flow {
+    grid-template-columns: 1fr;
+  }
+
+  .github-connect-flow-step {
+    min-height: auto;
+  }
+
+  #deviceCodeSection input {
+    font-size: 16px;
+    letter-spacing: 0.16em;
+  }
+}
+
 .help-link-primary {
   font-weight: 500;
 }
@@ -2213,21 +2454,33 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .device-code-label {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-secondary);
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
 }
 
 #deviceCodeSection input {
-  letter-spacing: 0.12em;
+  letter-spacing: 0.22em;
   font-weight: 600;
   text-align: center;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 20px;
+  padding: 16px 14px;
 }
 
 .token-status {
-  display: block;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-bottom: 4px;
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-secondary);
   width: fit-content;
 }
 
@@ -2238,16 +2491,19 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .token-status.valid {
   background: var(--success-bg);
   color: var(--success-text);
+  border-color: var(--success-border);
 }
 
 .token-status.invalid {
   background: var(--error-bg);
   color: var(--error-text);
+  border-color: var(--error-border);
 }
 
 .token-status.checking {
-  color: var(--text-secondary);
-  background: transparent;
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
 }
 
 .repo-actions {
diff --git a/options/options.html b/options/options.html
index 3955d2e..390aff8 100644
--- a/options/options.html
+++ b/options/options.html
@@ -63,51 +63,88 @@ <h2>Getting Started</h2>
       <p class="help-text">Set up DevWatch and shape the review queue the way you work.</p>
 
       <div class="setup-steps">
-        <div class="setup-step setup-step-primary">
+        <div class="setup-step setup-step-primary github-connect-card">
           <div class="step-all-content">
-            <div class="step-header-section">
-              <div class="step-number">1</div>
-	            <div class="step-title-section">
-	                <h3>Connect GitHub</h3>
-	                <p>Sign in once so DevWatch can pull activity for the repositories you follow.</p>
-	              </div>
-	            </div>
-
-	            <div class="token-form-section">
-	              <label for="connectGitHubBtn" class="token-form-label">GitHub connection</label>
-	              <div class="token-input-wrapper auth-button-row">
-	                <button id="connectGitHubBtn" class="primary" aria-describedby="token-help tokenStatus">Connect GitHub</button>
-	                <button id="clearTokenBtn" class="danger hidden" aria-label="Disconnect GitHub">Disconnect</button>
-	              </div>
-	              <div id="deviceCodeSection" class="token-input-wrapper hidden">
-	                <label for="githubToken" class="device-code-label">Verification code</label>
-	                <input type="text" id="githubToken" placeholder="Verification code appears here" aria-describedby="token-help tokenStatus" autocomplete="off" readonly>
-	              </div>
-	              <span id="tokenStatus" class="token-status" aria-live="polite"></span>
-	            </div>
-
-	            <p id="token-help" class="help-text">
-	              Click <strong>Connect GitHub</strong>, approve access in GitHub, and come back once the browser tab says you're done.
-	            </p>
-
-	            <div class="step-info-boxes">
-	              <div class="info-box info-box-compact">
-	                <p class="help-text">
-                  <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-	                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-	                  </svg>
-	                  <span><strong>Security:</strong> Your GitHub connection stays in Chrome session storage and is cleared when the browser session ends.</span>
-	                </p>
-	              </div>
-	              <div class="info-box info-box-compact">
-	                <p class="help-text">
-	                  <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-	                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-	                  </svg>
-	                  <span><strong>Permissions:</strong> DevWatch requests <code>repo</code> and <code>read:user</code> access so it can read repository activity and identify your account.</span>
-	                </p>
-	              </div>
-	            </div>
+            <div class="github-connect-grid">
+              <div class="github-connect-intro">
+                <div class="github-connect-eyebrow">
+                  <div class="step-number">1</div>
+                  <span class="github-step-label">GitHub Access</span>
+                </div>
+
+                <div class="github-connect-copy">
+                  <h3>Connect GitHub</h3>
+                  <p>Authorize DevWatch once so it can pull activity for the repositories you monitor without asking for a personal access token.</p>
+                </div>
+
+                <div class="github-connect-facts">
+                  <div class="github-connect-fact">
+                    <div class="github-connect-fact-icon" aria-hidden="true">
+                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                      </svg>
+                    </div>
+                    <div>
+                      <p class="github-connect-fact-title">Stored for this browser session</p>
+                      <p class="github-connect-fact-copy">Your GitHub connection stays in Chrome session storage and clears when the browser session ends.</p>
+                    </div>
+                  </div>
+
+                  <div class="github-connect-fact">
+                    <div class="github-connect-fact-icon" aria-hidden="true">
+                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                    </div>
+                    <div>
+                      <p class="github-connect-fact-title">Read-only account access</p>
+                      <p class="github-connect-fact-copy">DevWatch requests <code>repo</code> and <code>read:user</code> so it can read repository activity and identify your account.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="github-connect-panel">
+                <div class="github-connect-panel-header">
+                  <div>
+                    <p class="github-panel-label">Connection status</p>
+                    <span id="tokenStatus" class="token-status" aria-live="polite"></span>
+                  </div>
+                  <button id="clearTokenBtn" class="danger hidden" aria-label="Disconnect GitHub">Disconnect</button>
+                </div>
+
+                <div class="github-connect-panel-body">
+                  <button id="connectGitHubBtn" class="primary github-connect-btn" aria-describedby="token-help tokenStatus">Connect GitHub</button>
+
+                  <p id="token-help" class="help-text github-connect-help">
+                    We'll open GitHub in a new tab. Approve access there, then come back here and DevWatch will finish connecting.
+                  </p>
+
+                  <div class="github-connect-flow" aria-hidden="true">
+                    <div class="github-connect-flow-step">
+                      <span>1</span>
+                      <p>Start sign-in here</p>
+                    </div>
+                    <div class="github-connect-flow-step">
+                      <span>2</span>
+                      <p>Approve access on GitHub</p>
+                    </div>
+                    <div class="github-connect-flow-step">
+                      <span>3</span>
+                      <p>Return when GitHub is done</p>
+                    </div>
+                  </div>
+
+                  <div id="deviceCodeSection" class="device-code-card hidden">
+                    <div class="device-code-header">
+                      <label for="githubToken" class="device-code-label">Verification code</label>
+                      <span class="device-code-note">Ready if GitHub asks for it</span>
+                    </div>
+                    <input type="text" id="githubToken" placeholder="Verification code appears here" aria-describedby="token-help tokenStatus" autocomplete="off" readonly>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
diff --git a/options/options.js b/options/options.js
index 77cfdb8..4e7db83 100644
--- a/options/options.js
+++ b/options/options.js
@@ -1,9 +1,23 @@
 import { applyTheme, applyColorTheme, formatDateVerbose } from '../shared/utils.js';
-import { clearAuthSession, getAuthSession, getAccessToken, getLocalItems, getWatchedRepos, setLocalItem, setWatchedRepos } from '../shared/storage-helpers.js';
-import { createHeaders } from '../shared/github-api.js';
-import { STORAGE_CONFIG, VALIDATION_PATTERNS } from '../shared/config.js';
-import { validateRepository } from '../shared/repository-validator.js';
-import { fetchGitHubRepoFromNpm } from '../shared/api/npm-api.js';
+import {
+  clearAuthSession,
+  getAuthSession,
+  getAccessToken,
+  getSettings,
+  getWatchedRepos,
+  setLocalItem,
+  setWatchedRepos,
+  updateSettings
+} from '../shared/storage-helpers.js';
+import { STORAGE_CONFIG } from '../shared/config.js';
+import {
+  resolveWatchedRepoInput,
+  validateWatchedRepo
+} from '../shared/repo-service.js';
+import {
+  CATEGORY_SETTINGS,
+  normalizeSettings
+} from '../shared/settings-schema.js';
 import { NotificationManager } from '../shared/ui/notification-manager.js';
 
 // Controllers
@@ -169,31 +183,101 @@ function handleUrlParameters() {
 }
 
 function syncTokenUiWithStoredCredential(hasStoredToken) {
-  const clearTokenBtn = document.getElementById('clearTokenBtn');
-  const connectGitHubBtn = document.getElementById('connectGitHubBtn');
-  const repoInput = document.getElementById('repoInput');
-  const addRepoBtn = document.getElementById('addRepoBtn');
-  const repoHelpText = document.getElementById('repoHelpText');
-  const importSection = document.getElementById('importReposSection');
-
-  connectGitHubBtn.textContent = hasStoredToken ? 'Reconnect GitHub' : 'Connect GitHub';
-  clearTokenBtn.style.display = hasStoredToken ? 'block' : 'none';
-  repoInput.disabled = !hasStoredToken;
-  repoInput.placeholder = hasStoredToken
-    ? 'e.g., react, facebook/react, or GitHub URL'
-    : 'Connect GitHub to add repositories';
-  addRepoBtn.disabled = !hasStoredToken;
-  repoHelpText.textContent = hasStoredToken
-    ? 'Add repositories to monitor (npm package, owner/repo, or GitHub URL)'
-    : 'Connect GitHub above to start adding repositories';
-  importSection.classList.toggle('hidden', !hasStoredToken);
-  importSection.style.display = hasStoredToken ? 'block' : 'none';
+  applyStoredConnection(hasStoredToken ? { accessToken: 'stored-session' } : null);
 }
 
 function shouldClearStoredToken(validationResult) {
   return !validationResult.isValid && validationResult.reason === 'invalid';
 }
 
+function getThemeDisplayName(theme) {
+  const themeNames = {
+    light: 'Light Mode',
+    dark: 'Dark Mode',
+    system: 'System Theme'
+  };
+
+  return themeNames[theme] || theme;
+}
+
+function getColorThemeDisplayName(colorTheme) {
+  const themeNames = {
+    polar: 'Polar',
+    graphite: 'Graphite',
+    nightfall: 'Nightfall',
+    obsidian: 'Obsidian',
+    sand: 'Sand',
+    'terminal-ledger': 'Terminal Ledger'
+  };
+
+  return themeNames[colorTheme] || colorTheme;
+}
+
+function getOptionCategorySettingsFromDom() {
+  const filters = {};
+  const notifications = {};
+
+  CATEGORY_SETTINGS.forEach(({ key, optionsTrackId, optionsNotifyId }) => {
+    filters[key] = document.getElementById(optionsTrackId)?.checked !== false;
+    notifications[key] = document.getElementById(optionsNotifyId)?.checked === true;
+  });
+
+  return { filters, notifications };
+}
+
+function applyCategorySettingsToOptions(settings) {
+  CATEGORY_SETTINGS.forEach(({ key, optionsTrackId, optionsNotifyId }) => {
+    const trackToggle = document.getElementById(optionsTrackId);
+    const notifyToggle = document.getElementById(optionsNotifyId);
+
+    if (trackToggle) {
+      trackToggle.checked = settings.filters[key] !== false;
+    }
+
+    if (notifyToggle) {
+      notifyToggle.checked = settings.notifications[key] !== false;
+    }
+  });
+}
+
+function applySettingsToUi(settings) {
+  applyTheme(settings.theme);
+  applyColorTheme(settings.colorTheme);
+
+  const themeRadio = document.getElementById(`theme-${settings.theme}`);
+  if (themeRadio) {
+    themeRadio.checked = true;
+  }
+
+  const colorThemeRadio = document.getElementById(`color-${settings.colorTheme}`);
+  if (colorThemeRadio) {
+    colorThemeRadio.checked = true;
+  }
+
+  const intervalRadio = document.getElementById(`interval-${settings.checkInterval}`);
+  if (intervalRadio) {
+    intervalRadio.checked = true;
+  }
+
+  const snoozeRadio = document.getElementById(`snooze-${settings.snoozeHours}`);
+  if (snoozeRadio) {
+    snoozeRadio.checked = true;
+  }
+
+  applyCategorySettingsToOptions(settings);
+
+  const itemExpiryEnabled = settings.itemExpiryHours !== null && settings.itemExpiryHours !== undefined;
+  document.getElementById('itemExpiryEnabled').checked = itemExpiryEnabled;
+  document.getElementById('itemExpiryInputRow').style.display = itemExpiryEnabled ? 'block' : 'none';
+  if (itemExpiryEnabled) {
+    document.getElementById('itemExpiryHours').value = settings.itemExpiryHours;
+  }
+
+  document.getElementById('markReadOnSnooze').checked = settings.markReadOnSnooze === true;
+  document.getElementById('allowUnlimitedRepos').checked = settings.allowUnlimitedRepos === true;
+  updateNotificationToggleStates();
+}
+
 function setupEventListeners() {
   // Tab navigation
   setupTabNavigation();
@@ -278,69 +362,54 @@ function setupEventListeners() {
     }
   });
 
-  // Auto-save theme changes
-  document.querySelectorAll('input[name="theme"]').forEach(radio => {
-    radio.addEventListener('change', async (e) => {
-      const theme = e.target.value;
-      await chrome.storage.sync.set({ theme });
-      applyTheme(theme);
-
-      // Show toast notification
-      const themeNames = {
-        'light': 'Light Mode',
-        'dark': 'Dark Mode',
-        'system': 'System Theme'
-      };
-      toastManager.info(`Theme changed to ${themeNames[theme] || theme}`);
+  function bindRadioSetting(groupName, key, { formatToast, onChange } = {}) {
+    document.querySelectorAll(`input[name="${groupName}"]`).forEach(radio => {
+      radio.addEventListener('change', async (e) => {
+        const rawValue = e.target.value;
+        const value = groupName === 'theme' || groupName === 'colorTheme'
+          ? rawValue
+          : parseInt(rawValue, 10);
+
+        await updateSettings({ [key]: value });
+        await onChange?.(value);
+
+        if (formatToast) {
+          toastManager.info(formatToast(value));
+        }
+      });
     });
-  });
+  }
 
-  // Auto-save color theme changes
-  document.querySelectorAll('input[name="colorTheme"]').forEach(radio => {
-    radio.addEventListener('change', async (e) => {
-      const colorTheme = e.target.value;
-      await chrome.storage.sync.set({ colorTheme });
-      applyColorTheme(colorTheme);
-
-      const themeNames = {
-        'polar': 'Polar',
-        'graphite': 'Graphite',
-        'nightfall': 'Nightfall',
-        'obsidian': 'Obsidian',
-        'sand': 'Sand',
-        'terminal-ledger': 'Terminal Ledger'
-      };
-      toastManager.info(`Color theme changed to ${themeNames[colorTheme] || colorTheme}`);
+  function bindCheckboxSetting(id, key, { onChange } = {}) {
+    document.getElementById(id).addEventListener('change', async (e) => {
+      const value = e.target.checked;
+      await updateSettings({ [key]: value });
+      await onChange?.(value);
     });
-  });
+  }
 
+  bindRadioSetting('theme', 'theme', {
+    onChange: async (theme) => applyTheme(theme),
+    formatToast: (theme) => `Theme changed to ${getThemeDisplayName(theme)}`
+  });
 
-  // Auto-save check interval changes
-  document.querySelectorAll('input[name="checkInterval"]').forEach(radio => {
-    radio.addEventListener('change', async (e) => {
-      const interval = parseInt(e.target.value);
-      await chrome.storage.sync.set({ checkInterval: interval });
+  bindRadioSetting('colorTheme', 'colorTheme', {
+    onChange: async (colorTheme) => applyColorTheme(colorTheme),
+    formatToast: (colorTheme) => `Color theme changed to ${getColorThemeDisplayName(colorTheme)}`
+  });
 
-      // Update alarm with new interval
+  bindRadioSetting('checkInterval', 'checkInterval', {
+    onChange: async (interval) => {
       chrome.runtime.sendMessage({
         action: 'updateInterval',
-        interval: interval
+        interval
       });
-
-      // Show toast notification
-      toastManager.info(`Check interval changed to ${interval} minutes`);
-    });
+    },
+    formatToast: (interval) => `Check interval changed to ${interval} minutes`
   });
 
-  // Auto-save snooze duration changes
-  document.querySelectorAll('input[name="snoozeHours"]').forEach(radio => {
-    radio.addEventListener('change', async (e) => {
-      const snoozeHours = parseInt(e.target.value);
-      await chrome.storage.sync.set({ snoozeHours });
-
-      // Show toast notification
-      toastManager.info(`Default snooze duration changed to ${snoozeHours} hour${snoozeHours > 1 ? 's' : ''}`);
-    });
+  bindRadioSetting('snoozeHours', 'snoozeHours', {
+    formatToast: (snoozeHours) => `Default snooze duration changed to ${snoozeHours} hour${snoozeHours > 1 ? 's' : ''}`
   });
 
   // Auto-save itemExpiryHours changes
@@ -354,11 +423,11 @@ function setupEventListeners() {
       itemExpiryInputRow.style.display = 'block';
       const hours = parseInt(itemExpiryHoursInput.value) || 24;
       itemExpiryHoursInput.value = hours;
-      await chrome.storage.sync.set({ itemExpiryHours: hours });
+      await updateSettings({ itemExpiryHours: hours });
       toastManager.info(`Auto-removal enabled: items older than ${hours} hours will be removed`);
     } else {
       itemExpiryInputRow.style.display = 'none';
-      await chrome.storage.sync.set({ itemExpiryHours: null });
+      await updateSettings({ itemExpiryHours: null });
       toastManager.info('Auto-removal disabled');
     }
   });
@@ -372,69 +441,49 @@ function setupEventListeners() {
       hours = 168;
       e.target.value = 168;
     }
-    await chrome.storage.sync.set({ itemExpiryHours: hours });
+    await updateSettings({ itemExpiryHours: hours });
     toastManager.info(`Auto-removal time changed to ${hours} hours`);
   });
 
-  // Auto-save markReadOnSnooze changes
-  document.getElementById('markReadOnSnooze').addEventListener('change', async (e) => {
-    const markReadOnSnooze = e.target.checked;
-    await chrome.storage.sync.set({ markReadOnSnooze });
-    toastManager.info(`Mark as read on snooze ${markReadOnSnooze ? 'enabled' : 'disabled'}`);
+  bindCheckboxSetting('markReadOnSnooze', 'markReadOnSnooze', {
+    onChange: async (markReadOnSnooze) => {
+      toastManager.info(`Mark as read on snooze ${markReadOnSnooze ? 'enabled' : 'disabled'}`);
+    }
   });
 
-  // Auto-save allowUnlimitedRepos changes
-  document.getElementById('allowUnlimitedRepos').addEventListener('change', async (e) => {
-    const allowUnlimitedRepos = e.target.checked;
-    await chrome.storage.sync.set({ allowUnlimitedRepos });
-    if (allowUnlimitedRepos) {
-      toastManager.warning('Unlimited repositories enabled - watch for rate limits');
-    } else {
-      toastManager.info('Repository limit set to 50');
+  bindCheckboxSetting('allowUnlimitedRepos', 'allowUnlimitedRepos', {
+    onChange: async (allowUnlimitedRepos) => {
+      if (allowUnlimitedRepos) {
+        toastManager.warning('Unlimited repositories enabled - watch for rate limits');
+      } else {
+        toastManager.info('Repository limit set to 50');
+      }
     }
   });
 
-  // Auto-save filter and notification changes
-  ['filterPrs', 'filterIssues', 'filterReleases', 'notifyPrs', 'notifyIssues', 'notifyReleases'].forEach(id => {
-    document.getElementById(id).addEventListener('change', async (e) => {
-      const target = e.target;
-
-      // Handle notification toggle logic
-      if (target.id.startsWith('notify')) {
-        const category = target.id.replace('notify', '').toLowerCase();
-        const filterId = `filter${category.charAt(0).toUpperCase() + category.slice(1)}`;
-        const filterToggle = document.getElementById(filterId);
-
-        // If trying to enable notifications but category is disabled, disable the notification
-        if (target.checked && !filterToggle.checked) {
-          target.checked = false;
-          return;
-        }
+  CATEGORY_SETTINGS.forEach(({ key, optionsTrackId, optionsNotifyId }) => {
+    const trackToggle = document.getElementById(optionsTrackId);
+    const notifyToggle = document.getElementById(optionsNotifyId);
+
+    trackToggle?.addEventListener('change', async () => {
+      if (!trackToggle.checked && notifyToggle?.checked) {
+        notifyToggle.checked = false;
       }
 
-      // Handle filter toggle logic - disable notifications if filter is disabled
-      if (target.id.startsWith('filter')) {
-        const category = target.id.replace('filter', '').toLowerCase();
-        const notifyId = `notify${category.charAt(0).toUpperCase() + category.slice(1)}`;
-        const notifyToggle = document.getElementById(notifyId);
+      const categorySettings = getOptionCategorySettingsFromDom();
+      await updateSettings(categorySettings);
+      updateNotificationToggleStates();
+      toastManager.info(`${key === 'prs' ? 'Pull request' : key.slice(0, -1)} tracking ${trackToggle.checked ? 'enabled' : 'disabled'}`);
+    });
 
-        // If disabling filter, also disable notifications
-        if (!target.checked && notifyToggle.checked) {
-          notifyToggle.checked = false;
-        }
+    notifyToggle?.addEventListener('change', async () => {
+      if (notifyToggle.checked && !trackToggle?.checked) {
+        notifyToggle.checked = false;
+        return;
       }
 
-      const filters = {
-        prs: document.getElementById('filterPrs').checked,
-        issues: document.getElementById('filterIssues').checked,
-        releases: document.getElementById('filterReleases').checked
-      };
-      const notifications = {
-        prs: document.getElementById('notifyPrs').checked,
-        issues: document.getElementById('notifyIssues').checked,
-        releases: document.getElementById('notifyReleases').checked
-      };
-      await chrome.storage.sync.set({ filters, notifications });
+      const categorySettings = getOptionCategorySettingsFromDom();
+      await updateSettings(categorySettings);
       updateNotificationToggleStates();
     });
   });
@@ -516,13 +565,9 @@ function toggleHidePinned() {
 
 function updateNotificationToggleStates() {
   // Update notification toggle states based on filter states
-  const categories = ['prs', 'issues', 'releases'];
-
-  categories.forEach(category => {
-    const filterId = `filter${category.charAt(0).toUpperCase() + category.slice(1)}`;
-    const notifyId = `notify${category.charAt(0).toUpperCase() + category.slice(1)}`;
-    const filterToggle = document.getElementById(filterId);
-    const notifyToggle = document.getElementById(notifyId);
+  CATEGORY_SETTINGS.forEach(({ optionsTrackId, optionsNotifyId }) => {
+    const filterToggle = document.getElementById(optionsTrackId);
+    const notifyToggle = document.getElementById(optionsNotifyId);
     const notifyToggleLabel = notifyToggle.closest('.notification-toggle');
 
     if (filterToggle && notifyToggle && notifyToggleLabel) {
@@ -559,40 +604,7 @@ async function loadSettings() {
     }
 
     const authSession = await getAuthSession();
-
-    const settings = await chrome.storage.sync.get([
-      'mutedRepos',
-      'pinnedRepos',
-      'checkInterval',
-      'snoozeHours',
-      'filters',
-      'notifications',
-      'theme',
-      'itemExpiryHours',
-      'markReadOnSnooze',
-      'allowUnlimitedRepos'
-    ]);
-
-    const snoozeSettings = await chrome.storage.sync.get(['snoozedRepos']);
-    const watchedRepos = await getWatchedRepos();
-
-    // Safety check: if settings is undefined or null, use defaults
-    if (!settings || !snoozeSettings) {
-      console.warn('Storage returned undefined/null. Using default settings.');
-      state.watchedRepos = [];
-      state.mutedRepos = [];
-      state.pinnedRepos = [];
-      renderRepoListWrapper();
-      return;
-    }
-
-    // Load and apply theme
-    const theme = settings.theme || 'system';
-    applyTheme(theme);
-
-    // Load and apply color theme
-    const colorTheme = settings.colorTheme || 'polar';
-    applyColorTheme(colorTheme);
+    const settings = await getSettings();
 
     if (authSession?.accessToken) {
       applyStoredConnection(authSession);
@@ -600,71 +612,15 @@ async function loadSettings() {
       syncTokenUiWithStoredCredential(false);
     }
 
-    state.watchedRepos = watchedRepos;
-    state.mutedRepos = settings.mutedRepos || [];
-    state.pinnedRepos = settings.pinnedRepos || [];
+    state.watchedRepos = settings.watchedRepos;
+    state.mutedRepos = settings.mutedRepos;
+    state.pinnedRepos = settings.pinnedRepos;
 
     renderRepoListWrapper();
-
-    if (settings.checkInterval) {
-      const intervalRadio = document.getElementById(`interval-${settings.checkInterval}`);
-      if (intervalRadio) {
-        intervalRadio.checked = true;
-      }
-    }
-
-    if (settings.snoozeHours) {
-      const snoozeRadio = document.getElementById(`snooze-${settings.snoozeHours}`);
-      if (snoozeRadio) {
-        snoozeRadio.checked = true;
-      }
-    }
-
-    if (settings.filters) {
-      document.getElementById('filterPrs').checked = settings.filters.prs !== false;
-      document.getElementById('filterIssues').checked = settings.filters.issues !== false;
-      document.getElementById('filterReleases').checked = settings.filters.releases !== false;
-    }
-
-    if (settings.notifications) {
-      document.getElementById('notifyPrs').checked = settings.notifications.prs !== false;
-      document.getElementById('notifyIssues').checked = settings.notifications.issues !== false;
-      document.getElementById('notifyReleases').checked = settings.notifications.releases !== false;
-    }
-
-    // Set theme radio button
-    const themeRadio = document.getElementById(`theme-${theme}`);
-    if (themeRadio) {
-      themeRadio.checked = true;
-    }
-
-    // Set color theme radio button
-    const colorThemeRadio = document.getElementById(`color-${colorTheme}`);
-    if (colorThemeRadio) {
-      colorThemeRadio.checked = true;
-    }
-
-    // Load itemExpiryHours setting
-    const itemExpiryEnabled = settings.itemExpiryHours !== null && settings.itemExpiryHours !== undefined;
-    document.getElementById('itemExpiryEnabled').checked = itemExpiryEnabled;
-    if (itemExpiryEnabled) {
-      document.getElementById('itemExpiryHours').value = settings.itemExpiryHours;
-      document.getElementById('itemExpiryInputRow').style.display = 'block';
-    }
-
-    // Load markReadOnSnooze setting (default to false - pause not dismiss)
-    const markReadOnSnooze = settings.markReadOnSnooze === true;
-    document.getElementById('markReadOnSnooze').checked = markReadOnSnooze;
-
-    // Load allowUnlimitedRepos setting (default to false)
-    const allowUnlimitedRepos = settings.allowUnlimitedRepos === true;
-    document.getElementById('allowUnlimitedRepos').checked = allowUnlimitedRepos;
-
-    // Update notification toggle states after loading settings
-    updateNotificationToggleStates();
+    applySettingsToUi(settings);
 
     // Load and display current snoozes
-    renderSnoozedRepos(snoozeSettings.snoozedRepos || []);
+    renderSnoozedRepos(settings.snoozedRepos || []);
   } catch (error) {
     console.error('Error loading settings:', error);
     // Set defaults even if error occurs
@@ -679,19 +635,19 @@ async function addRepo() {
   const input = document.getElementById('repoInput');
   const statusEl = document.getElementById('repoValidationStatus');
   const errorEl = document.getElementById('repoError');
-  let repo = input.value.trim();
+  const repoInput = input.value.trim();
 
   // Clear previous error state
   input.classList.remove('error');
   errorEl.textContent = '';
 
-  if (!repo) {
+  if (!repoInput) {
     return;
   }
 
   // Check if we've hit the maximum repo limit (unless unlimited repos is enabled)
-  const { allowUnlimitedRepos } = await chrome.storage.sync.get(['allowUnlimitedRepos']);
-  if (!allowUnlimitedRepos && state.watchedRepos.length >= STORAGE_CONFIG.MAX_WATCHED_REPOS) {
+  const currentSettings = normalizeSettings(await getSettings());
+  if (!currentSettings.allowUnlimitedRepos && state.watchedRepos.length >= STORAGE_CONFIG.MAX_WATCHED_REPOS) {
     showRepoError(`Maximum of ${STORAGE_CONFIG.MAX_WATCHED_REPOS} repositories allowed. Enable "Unlimited Repositories" in Advanced settings to watch more.`);
     statusEl.className = 'repo-validation-status error';
     return;
@@ -700,78 +656,23 @@ async function addRepo() {
   // Show checking indicator
   statusEl.className = 'repo-validation-status checking';
 
-  // Parse GitHub URL if provided
-  const urlMatch = repo.match(/github\.com\/([^/]+\/[^/]+)/);
-  if (urlMatch) {
-    repo = urlMatch[1].replace(/\.git$/, '');
-    input.value = repo; // Update input to show parsed format
-  }
-  // Check if it might be an NPM package (no slash or scoped package)
-  else if (!repo.includes('/') || repo.startsWith('@')) {
-    const npmResult = await fetchGitHubRepoFromNpm(repo);
-    if (npmResult.success) {
-      repo = npmResult.repo;
-      input.value = repo; // Update input to show GitHub repo
-    } else {
-      showRepoError(npmResult.error);
+  try {
+    const githubToken = await getAccessToken();
+    const resolution = await resolveWatchedRepoInput(repoInput, {
+      githubToken,
+      existingRepos: state.watchedRepos
+    });
+
+    if (!resolution.valid) {
+      showRepoError(resolution.error || 'Repository validation failed');
       statusEl.className = 'repo-validation-status error';
       return;
     }
-  }
 
-  // Validate owner/repo format using the same pattern as the validator
-  if (!VALIDATION_PATTERNS.REPOSITORY_NAME.test(repo)) {
-    showRepoError('Invalid format. Use: owner/repo, GitHub URL, or npm package');
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
+    input.value = resolution.normalizedRepo;
+    statusEl.className = 'repo-validation-status success';
 
-  if (state.watchedRepos.includes(repo)) {
-    showRepoError('Repository already added');
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
-
-  // Validate repo exists on GitHub and fetch metadata
-  let validationResult;
-  try {
-    validationResult = await validateRepo(repo);
-  } catch (error) {
-    console.error('Validation error:', error);
-    showRepoError(`Validation error: ${error.message}`);
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
-
-  if (!validationResult) {
-    showRepoError('Validation returned no result');
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
-
-  if (!validationResult.valid) {
-      showRepoError(validationResult.error || 'Repository validation failed');
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
-
-  // Check if already added (by fullName)
-  const alreadyExists = state.watchedRepos.some(r => (typeof r === 'string' ? r : r.fullName) === validationResult.fullName);
-
-  if (alreadyExists) {
-    showRepoError('Repository already added');
-    statusEl.className = 'repo-validation-status error';
-    return;
-  }
-  // Show success indicator
-  statusEl.className = 'repo-validation-status success';
-
-  try {
-    // Add timestamp to track when repo was added (for filtering old activities)
-    state.watchedRepos.push({
-      ...validationResult,
-      addedAt: new Date().toISOString()
-    });
+    state.watchedRepos.push(resolution.record);
 
     // Reset to last page to show the newly added repo
     const totalPages = Math.ceil(state.watchedRepos.length / state.reposPerPage);
@@ -783,7 +684,7 @@ async function addRepo() {
     await setWatchedRepos(state.watchedRepos);
 
     // Show success toast
-    toastManager.success(`Successfully added ${validationResult.fullName} to watched repositories`);
+    toastManager.success(`Successfully added ${resolution.record.fullName} to watched repositories`);
   } catch (error) {
     console.error('Error adding repository:', error);
     showRepoError('Failed to add repository. Please try again.');
@@ -842,51 +743,7 @@ function showRepoError(message) {
  */
 async function validateRepo(repo) {
   const githubToken = await getAccessToken();
-
-  if (!githubToken) {
-    return { valid: false, error: 'No GitHub connection found. Connect GitHub first.' };
-  }
-
-  // First do basic validation
-  const basicResult = await validateRepository(repo, githubToken);
-
-  if (!basicResult.valid) {
-    return basicResult;
-  }
-
-  try {
-    // Try to fetch latest release for additional metadata
-    const headers = createHeaders(githubToken);
-    const releasesResponse = await fetch(`https://api.github.com/repos/${repo}/releases/latest`, { headers });
-
-    let latestRelease = null;
-    if (releasesResponse.ok) {
-      const releaseData = await releasesResponse.json();
-      latestRelease = {
-        version: releaseData.tag_name,
-        publishedAt: releaseData.published_at
-      };
-    }
-    // If no releases, that's ok - latestRelease stays null
-
-    // Return the enhanced result
-    return {
-      valid: true,
-      metadata: {
-        ...basicResult.metadata,
-        latestRelease
-      }
-    };
-  } catch (_error) {
-    // If release fetch fails, return basic validation result
-    return {
-      valid: true,
-      metadata: {
-        ...basicResult.metadata,
-        latestRelease: null
-      }
-    };
-  }
+  return validateWatchedRepo(repo, githubToken);
 }
 
 async function removeRepo(repoFullName) {
@@ -912,24 +769,8 @@ async function removeRepo(repoFullName) {
 
 async function cleanupRepoNotifications(repoFullName) {
   try {
-    // Get current activities and read items from local storage
-    const { activities = [], readItems = [] } = await getLocalItems(['activities', 'readItems']);
-
-    // Filter out activities for the removed repository
-    const updatedActivities = activities.filter(activity => activity.repo !== repoFullName);
-
-    // Filter out read items for activities from the removed repository
-    const removedActivityIds = activities
-      .filter(activity => activity.repo === repoFullName)
-      .map(activity => activity.id);
-
-    const updatedReadItems = readItems.filter(id => !removedActivityIds.includes(id));
-
-    // Save the filtered data back to local storage
-    await setLocalItem('activities', updatedActivities);
-    await setLocalItem('readItems', updatedReadItems);
-
-    } catch (error) {
+    await chrome.runtime.sendMessage({ action: 'removeRepoData', repo: repoFullName });
+  } catch (error) {
     console.error(`[DevWatch] Error cleaning up notifications for ${repoFullName}:`, error);
     // Don't show an error message to the user since this is cleanup logic
     // The repo removal was successful even if cleanup failed
diff --git a/popup/controllers/activity-controller.js b/popup/controllers/activity-controller.js
index 76b67e3..825290b 100644
--- a/popup/controllers/activity-controller.js
+++ b/popup/controllers/activity-controller.js
@@ -9,19 +9,16 @@ import {
   showCachedActivities
 } from '../../shared/offline-manager.js';
 import { setState } from '../../shared/state-manager.js';
+import { filterVisibleActivities } from '../../shared/feed-policy.js';
 
 /**
  * Loads activities from storage or cache, handles offline mode
  * @param {Function} renderActivitiesCallback - Callback to render activities after loading
- * @param {Function} setPinnedReposCallback - Callback to update pinned repos
- * @param {Function} setCollapsedReposCallback - Callback to update collapsed repos
  * @param {Object} options - Loading options
  * @param {boolean} options.skipLoadingIndicator - Don't show loading state if true (for refresh)
  */
 export async function loadActivities(
   renderActivitiesCallback,
-  setPinnedReposCallback,
-  setCollapsedReposCallback,
   options = {}
 ) {
   const { skipLoadingIndicator = false } = options;
@@ -37,17 +34,18 @@ export async function loadActivities(
     try {
       const cachedActivities = await getCachedData('activities_cache');
       const cachedReadItems = await getCachedData('readItems_cache');
-      const { mutedRepos, snoozedRepos } = await getFilteringSettings();
+      const { mutedRepos, snoozedRepos, pinnedRepos } = await getFilteringSettings();
 
       if (cachedActivities) {
-        // Filter out muted and snoozed repos using shared utilities
         const excludedRepos = getExcludedRepos(mutedRepos, snoozedRepos);
-        const filteredActivities = cachedActivities.filter(a => !excludedRepos.has(a.repo));
+        const filteredActivities = filterVisibleActivities(cachedActivities, { excludedRepos });
 
         // Update state with cached data
         await setState({
           allActivities: filteredActivities,
-          readItems: cachedReadItems || []
+          readItems: cachedReadItems || [],
+          pinnedRepos,
+          collapsedRepos: new Set()
         }, { persist: false }); // Don't persist cached data to storage
 
         // Show cached indicator
@@ -89,20 +87,15 @@ export async function loadActivities(
     const settings = await getFilteringSettings();
     const pinnedRepos = await getSyncItem('pinnedRepos', []);
 
-    // Update pinned repos through callback
-    setPinnedReposCallback(pinnedRepos);
-
-    // Load collapsed state through callback
-    setCollapsedReposCallback(new Set(data.collapsedRepos || []));
-
-    // Filter out muted and snoozed repos using shared utilities
     const excludedRepos = getExcludedRepos(settings.mutedRepos, settings.snoozedRepos);
-    const filteredActivities = (data.activities || []).filter(a => !excludedRepos.has(a.repo));
+    const filteredActivities = filterVisibleActivities(data.activities || [], { excludedRepos });
 
     // Update state manager with loaded data
     await setState({
       allActivities: filteredActivities,
-      readItems: data.readItems || []
+      readItems: data.readItems || [],
+      pinnedRepos,
+      collapsedRepos: new Set(data.collapsedRepos || [])
     });
 
     // Cache the loaded data for offline use
diff --git a/popup/controllers/repository-controller.js b/popup/controllers/repository-controller.js
index cd7f862..d7b6fae 100644
--- a/popup/controllers/repository-controller.js
+++ b/popup/controllers/repository-controller.js
@@ -1,6 +1,15 @@
 import { showError } from '../../shared/error-handler.js';
-import { useState, setState } from '../../shared/state-manager.js';
-import { groupByRepo } from '../views/activity-item-view.js';
+import { stateManager, useState, setState } from '../../shared/state-manager.js';
+import { groupByRepo } from '../../shared/feed-presentation.js';
+import {
+  clearArchivedFeedData,
+  getAllActivityIds,
+  getRepoUnreadActivityIds,
+  markActivitiesAsRead,
+  markActivityAsUnread,
+  toggleCollapsedRepo,
+  togglePinnedRepoList
+} from '../../shared/feed-mutations.js';
 
 /**
  * Toggles the collapsed state of a repository group
@@ -9,17 +18,10 @@ import { groupByRepo } from '../views/activity-item-view.js';
  * @param {Function} renderActivitiesCallback - Callback to re-render activities
  */
 export async function toggleRepoCollapse(repo, collapsedRepos, renderActivitiesCallback) {
-  if (collapsedRepos.has(repo)) {
-    collapsedRepos.delete(repo);
-  } else {
-    collapsedRepos.add(repo);
-  }
+  const updatedCollapsedRepos = toggleCollapsedRepo(collapsedRepos, repo);
+  await setState({ collapsedRepos: updatedCollapsedRepos });
 
-  // Save collapsed state
-  await chrome.storage.local.set({ collapsedRepos: Array.from(collapsedRepos) });
-
-  // Re-render
-  renderActivitiesCallback();
+  renderActivitiesCallback?.();
 }
 
 /**
@@ -31,25 +33,10 @@ export async function toggleRepoCollapse(repo, collapsedRepos, renderActivitiesC
  */
 export async function togglePinRepo(repo, pinnedRepos, setPinnedReposCallback, renderActivitiesCallback) {
   try {
-    const isCurrentlyPinned = pinnedRepos.includes(repo);
-    let updatedPinnedRepos;
-
-    if (isCurrentlyPinned) {
-      // Unpin the repo
-      updatedPinnedRepos = pinnedRepos.filter(r => r !== repo);
-    } else {
-      // Pin the repo
-      updatedPinnedRepos = [...pinnedRepos, repo];
-    }
-
-    // Save to storage
-    await chrome.storage.sync.set({ pinnedRepos: updatedPinnedRepos });
-
-    // Update through callback
-    setPinnedReposCallback(updatedPinnedRepos);
-
-    // Re-render activities to show updated pin state
-    renderActivitiesCallback();
+    const updatedPinnedRepos = togglePinnedRepoList(pinnedRepos, repo);
+    await setState({ pinnedRepos: updatedPinnedRepos });
+    setPinnedReposCallback?.(updatedPinnedRepos);
+    renderActivitiesCallback?.();
   } catch (error) {
     showError('errorMessage', error, null, { action: 'toggle pin repository', repo }, 3000);
   }
@@ -62,40 +49,7 @@ export async function togglePinRepo(repo, pinnedRepos, setPinnedReposCallback, r
  */
 export async function snoozeRepo(repo, loadActivitiesCallback) {
   try {
-    // Get snooze duration and mark-as-read setting
-    const settings = await chrome.storage.sync.get(['snoozeHours', 'snoozedRepos', 'markReadOnSnooze']);
-    const snoozeHours = settings.snoozeHours || 1;
-    const snoozedRepos = settings.snoozedRepos || [];
-    const markReadOnSnooze = settings.markReadOnSnooze === true;
-
-    // Calculate expiration time
-    const expiresAt = Date.now() + (snoozeHours * 60 * 60 * 1000);
-
-    // Check if repo is already snoozed and update, otherwise add new
-    const existingIndex = snoozedRepos.findIndex(s => s.repo === repo);
-    if (existingIndex >= 0) {
-      snoozedRepos[existingIndex].expiresAt = expiresAt;
-    } else {
-      snoozedRepos.push({ repo, expiresAt });
-    }
-
-    // Mark all unread items for this repo as read if setting is enabled
-    if (markReadOnSnooze) {
-      const { activities = [], readItems = [] } = await chrome.storage.local.get(['activities', 'readItems']);
-      const unreadRepoActivityIds = activities
-        .filter(activity => activity.repo === repo && !readItems.includes(activity.id))
-        .map(activity => activity.id);
-
-      if (unreadRepoActivityIds.length > 0) {
-        const updatedReadItems = [...readItems, ...unreadRepoActivityIds];
-        await chrome.storage.local.set({ readItems: updatedReadItems });
-      }
-    }
-
-    // Save to storage
-    await chrome.storage.sync.set({ snoozedRepos });
-
-    // Reload activities to reflect the snooze
+    await chrome.runtime.sendMessage({ action: 'snoozeRepo', repo });
     await loadActivitiesCallback();
   } catch (error) {
     showError('errorMessage', error, null, { action: 'snooze repository', repo }, 3000);
@@ -139,11 +93,9 @@ export async function toggleReadState(id, renderActivitiesCallback) {
   try {
     await chrome.runtime.sendMessage({ action, id });
     if (isRead) {
-      const newReadItems = state.readItems.filter(item => item !== id);
-      setState({ readItems: newReadItems });
+      await setState({ readItems: markActivityAsUnread(state.readItems, id) });
     } else {
-      const newReadItems = [...state.readItems, id];
-      setState({ readItems: newReadItems });
+      await setState({ readItems: markActivitiesAsRead(state.readItems, [id]) });
     }
     renderActivitiesCallback();
   } catch (error) {
@@ -161,8 +113,7 @@ export async function markAsRead(id) {
 
   try {
     await chrome.runtime.sendMessage({ action: 'markAsRead', id });
-    const newReadItems = [...state.readItems, id];
-    setState({ readItems: newReadItems });
+    await setState({ readItems: markActivitiesAsRead(state.readItems, [id]) });
   } catch (error) {
     showError('errorMessage', error, null, { action: 'mark as read' }, 3000);
   }
@@ -197,10 +148,10 @@ export function markAsReadWithAnimation(id, itemElement, renderActivitiesCallbac
  */
 export async function handleMarkAllRead(renderActivitiesCallback) {
   try {
-    await chrome.runtime.sendMessage({ action: 'markAllAsRead' });
     const state = useState();
-    const newReadItems = state.allActivities.map(a => a.id);
-    setState({ readItems: newReadItems });
+    const visibleActivityIds = getAllActivityIds(stateManager.getFilteredActivities());
+    await chrome.runtime.sendMessage({ action: 'markActivitiesAsRead', ids: visibleActivityIds });
+    await setState({ readItems: markActivitiesAsRead(state.readItems, visibleActivityIds) });
     renderActivitiesCallback();
   } catch (error) {
     showError('errorMessage', error, null, { action: 'mark all as read' }, 3000);
@@ -214,21 +165,21 @@ export async function handleMarkAllRead(renderActivitiesCallback) {
  */
 export async function handleCollapseAll(collapsedRepos, renderActivitiesCallback) {
   const state = useState();
-  const grouped = groupByRepo(state.allActivities);
+  const grouped = groupByRepo(state.allActivities, state.pinnedRepos);
   const allRepos = Object.keys(grouped);
-  const allCollapsed = collapsedRepos.size === allRepos.length;
+  const updatedCollapsedRepos = new Set(collapsedRepos);
+  const allCollapsed = updatedCollapsedRepos.size === allRepos.length;
 
   if (allCollapsed) {
     // Expand all
-    collapsedRepos.clear();
+    updatedCollapsedRepos.clear();
   } else {
     // Collapse all
-    allRepos.forEach(repo => collapsedRepos.add(repo));
+    allRepos.forEach(repo => updatedCollapsedRepos.add(repo));
   }
 
-  // Save and re-render
-  await chrome.storage.local.set({ collapsedRepos: Array.from(collapsedRepos) });
-  renderActivitiesCallback();
+  await setState({ collapsedRepos: updatedCollapsedRepos });
+  renderActivitiesCallback?.();
 }
 
 /**
@@ -239,24 +190,39 @@ export async function handleCollapseAll(collapsedRepos, renderActivitiesCallback
 export async function markRepoAsRead(repo, renderActivitiesCallback) {
   try {
     const state = useState();
-
-    // Find all unread items in this repo
-    const repoActivities = state.allActivities.filter(activity => activity.repo === repo);
-    const unreadItems = repoActivities.filter(activity => !state.readItems.includes(activity.id));
+    const unreadItems = getRepoUnreadActivityIds(state.allActivities, state.readItems, repo);
 
     if (unreadItems.length === 0) {
       return; // Nothing to mark as read
     }
 
-    // Mark all unread items in this repo as read
-    for (const activity of unreadItems) {
-      await markAsRead(activity.id);
-    }
-
-    // Re-render to update UI
+    await chrome.runtime.sendMessage({ action: 'markRepoAsRead', repo });
+    await setState({ readItems: markActivitiesAsRead(state.readItems, unreadItems) });
     renderActivitiesCallback();
   } catch (error) {
     console.error('[markRepoAsRead] Error:', error);
     showError('errorMessage', error, null, { action: 'mark repo as read' }, 3000);
   }
 }
+
+/**
+ * Clears archived items from storage and local UI state.
+ * @param {Function} renderActivitiesCallback - Callback to re-render activities
+ */
+export async function clearArchive(renderActivitiesCallback) {
+  try {
+    await chrome.runtime.sendMessage({ action: 'clearArchive' });
+    const state = useState();
+    const clearedState = clearArchivedFeedData({
+      activities: state.allActivities,
+      readItems: state.readItems
+    });
+    await setState({
+      allActivities: clearedState.activities,
+      readItems: clearedState.readItems
+    });
+    renderActivitiesCallback?.();
+  } catch (error) {
+    showError('errorMessage', error, null, { action: 'clear archive' }, 3000);
+  }
+}
diff --git a/popup/popup.js b/popup/popup.js
index 807c2ec..ddc513c 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -16,6 +16,7 @@ import {
   handleRefresh as handleRefreshController
 } from './controllers/activity-controller.js';
 import {
+  clearArchive as clearArchiveController,
   toggleRepoCollapse as toggleRepoCollapseController,
   togglePinRepo as togglePinRepoController,
   snoozeRepo as snoozeRepoController,
@@ -38,68 +39,68 @@ import {
   exitOnboarding
 } from './views/onboarding-view.js';
 
-// Legacy global variables for compatibility (will be phased out)
-let collapsedRepos = new Set();
-let pinnedRepos = [];
-
 // Onboarding manager
 const onboardingManager = new OnboardingManager();
 
 // Optimized DOM renderer
 let activityRenderer = null;
 
-if (typeof document !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', async () => {
-    try {
-      // Initialize state manager first
-      await stateManager.initialize();
+async function initializePopup() {
+  try {
+    // Initialize state manager first
+    await stateManager.initialize();
 
-      // Initialize optimized DOM renderer
-      const activityList = document.getElementById('activityList');
-      if (activityList) {
-        activityRenderer = new ActivityListRenderer(activityList);
-      }
+    // Initialize optimized DOM renderer
+    const activityList = document.getElementById('activityList');
+    if (activityList) {
+      activityRenderer = new ActivityListRenderer(activityList);
+    }
 
-      // Setup state change subscription
-      subscribe((currentState, previousState) => {
-        // Re-render activities when relevant state changes
-        const relevantKeys = ['allActivities', 'currentFilter', 'searchQuery', 'showArchive', 'readItems'];
-        const hasRelevantChanges = relevantKeys.some(key => currentState[key] !== previousState[key]);
-
-        if (hasRelevantChanges) {
-          renderActivities();
-        }
-      });
-
-      // Check if onboarding is needed
-      if (await onboardingManager.isInOnboarding()) {
-        await showOnboarding(() => loadActivities());
-      } else {
-        // Show main UI elements when not in onboarding
-        const header = document.querySelector('header');
-        const toolbar = document.querySelector('.toolbar');
-        const activityList = document.getElementById('activityList');
-        if (header) header.style.display = 'flex';
-        if (toolbar) toolbar.style.display = 'flex';
-        if (activityList) activityList.style.display = 'block';
-
-        // Ensure skip button is hidden when not in onboarding
-        const footerSkipBtn = document.getElementById('footerSkipBtn');
-        if (footerSkipBtn) {
-          footerSkipBtn.classList.add('hidden');
-          footerSkipBtn.style.display = 'none';
-        }
+    // Setup state change subscription
+    subscribe((currentState, previousState) => {
+      // Re-render activities when relevant state changes
+      const relevantKeys = ['allActivities', 'currentFilter', 'searchQuery', 'showArchive', 'readItems', 'collapsedRepos', 'pinnedRepos'];
+      const hasRelevantChanges = relevantKeys.some(key => currentState[key] !== previousState[key]);
 
-        loadActivities();
+      if (hasRelevantChanges) {
+        renderActivities();
+      }
+    });
+
+    // Check if onboarding is needed
+    if (await onboardingManager.isInOnboarding()) {
+      await showOnboarding(() => loadActivities());
+    } else {
+      // Show main UI elements when not in onboarding
+      const header = document.querySelector('header');
+      const toolbar = document.querySelector('.toolbar');
+      const activityList = document.getElementById('activityList');
+      if (header) header.style.display = 'flex';
+      if (toolbar) toolbar.style.display = 'flex';
+      if (activityList) activityList.style.display = 'block';
+
+      // Ensure skip button is hidden when not in onboarding
+      const footerSkipBtn = document.getElementById('footerSkipBtn');
+      if (footerSkipBtn) {
+        footerSkipBtn.classList.add('hidden');
+        footerSkipBtn.style.display = 'none';
       }
 
-      setupEventListeners();
-      setupKeyboardNavigation();
-      setupOfflineHandlers();
-    } catch (error) {
-      console.error('Failed to initialize popup:', error);
-      showError('errorMessage', 'Failed to load extension data');
+      loadActivities();
     }
+
+    setupEventListeners();
+    setupKeyboardNavigation();
+    setupOfflineHandlers();
+  } catch (error) {
+    console.error('Failed to initialize popup:', error);
+    showError('errorMessage', 'Failed to load extension data');
+  }
+}
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', async () => {
+    await initializePopup();
   });
 }
 
@@ -195,25 +196,23 @@ async function updateRepoCount() {
 
 // Wrapper for loadActivities to pass callbacks and update global state
 async function loadActivities(options = {}) {
-  await loadActivitiesController(
-    () => renderActivities(),
-    (repos) => { pinnedRepos = repos; },
-    (repos) => { collapsedRepos = repos; },
-    options
-  );
+  await loadActivitiesController(() => renderActivities(), options);
   await updateRepoCount();
 }
 
 // Wrapper for renderActivities to pass all necessary callbacks
 function renderActivities() {
+  const currentState = useState();
+
   renderActivitiesView(
     activityRenderer,
-    collapsedRepos,
-    pinnedRepos,
+    currentState.collapsedRepos,
+    currentState.pinnedRepos,
     (id) => markAsRead(id),
     (id, item) => markAsReadWithAnimation(id, item, () => renderActivities()),
     () => handleMarkAllRead(),
     () => handleCollapseAll(),
+    () => clearArchive(),
     (repo) => toggleRepoCollapse(repo),
     (repo) => togglePinRepo(repo),
     (repo) => handleSnoozeRepo(repo),
@@ -254,15 +253,15 @@ function toggleArchive() {
 
 // Wrapper for toggleRepoCollapse
 async function toggleRepoCollapse(repo) {
-  await toggleRepoCollapseController(repo, collapsedRepos, () => renderActivities());
+  await toggleRepoCollapseController(repo, useState().collapsedRepos, () => renderActivities());
 }
 
 // Wrapper for togglePinRepo
 async function togglePinRepo(repo) {
   await togglePinRepoController(
     repo,
-    pinnedRepos,
-    (repos) => { pinnedRepos = repos; },
+    useState().pinnedRepos,
+    null,
     () => renderActivities()
   );
 }
@@ -293,7 +292,11 @@ async function handleMarkAllRead() {
 
 // Wrapper for handleCollapseAll
 async function handleCollapseAll() {
-  await handleCollapseAllController(collapsedRepos, () => renderActivities());
+  await handleCollapseAllController(useState().collapsedRepos, () => renderActivities());
+}
+
+async function clearArchive() {
+  await clearArchiveController(() => renderActivities());
 }
 
 // Wrapper for setupKeyboardNavigation
@@ -337,6 +340,7 @@ function setupOfflineHandlers() {
 // Export functions for testing
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
+    initializePopup,
     loadActivities,
     renderActivities,
     toggleRepoCollapse,
@@ -348,6 +352,7 @@ if (typeof module !== 'undefined' && module.exports) {
     showError,
     handleMarkAllRead,
     handleCollapseAll,
+    clearArchive,
     toggleSearch,
     toggleArchive
   };
@@ -355,6 +360,7 @@ if (typeof module !== 'undefined' && module.exports) {
 
 // ES6 exports for tests
 export {
+  initializePopup,
   loadActivities,
   renderActivities,
   toggleRepoCollapse,
@@ -366,6 +372,7 @@ export {
   showError,
   handleMarkAllRead,
   handleCollapseAll,
+  clearArchive,
   toggleSearch,
   toggleArchive
 };
diff --git a/popup/views/activity-item-view.js b/popup/views/activity-item-view.js
index ae95e29..ad852ab 100644
--- a/popup/views/activity-item-view.js
+++ b/popup/views/activity-item-view.js
@@ -2,6 +2,12 @@ import { formatDate } from '../../shared/utils.js';
 import { escapeHtml, sanitizeImageUrl } from '../../shared/sanitize.js';
 import { CHECK_ICON, createSvg } from '../../shared/icons.js';
 import { useState } from '../../shared/state-manager.js';
+import {
+  formatRelativeTime,
+  getActivityTypeLabel,
+  groupByRepo,
+  groupByTime
+} from '../../shared/feed-presentation.js';
 
 /**
  * Renders a single activity item HTML
@@ -17,19 +23,20 @@ export function renderActivityItem(activity) {
   const sanitizedAuthor = escapeHtml(activity.author);
   const sanitizedRepo = escapeHtml(activity.repo);
   const sanitizedType = escapeHtml(activity.type);
+  const sanitizedTypeLabel = escapeHtml(getActivityTypeLabel(activity.type));
   const sanitizedAvatar = sanitizeImageUrl(activity.authorAvatar);
 
   return `
-    <div class="activity-item ${isRead ? 'read' : 'unread'}" data-id="${escapeHtml(activity.id)}" data-url="${escapeHtml(activity.url)}" role="button" tabindex="0" aria-label="Open ${sanitizedType}: ${sanitizedTitle} by ${sanitizedAuthor}">
+    <div class="activity-item ${isRead ? 'read' : 'unread'}" data-id="${escapeHtml(activity.id)}" data-url="${escapeHtml(activity.url)}" role="button" tabindex="0" aria-label="Open ${sanitizedTypeLabel}: ${sanitizedTitle} by ${sanitizedAuthor}">
       <img src="${sanitizedAvatar}" class="activity-avatar" alt="${sanitizedAuthor}">
       <div class="activity-content">
         <div class="activity-header">
-          <span class="activity-type ${sanitizedType}">${sanitizedType}</span>
+          <span class="activity-type ${sanitizedType}">${sanitizedTypeLabel}</span>
           <span class="activity-repo">${sanitizedRepo}</span>
         </div>
         <div class="activity-title">${sanitizedTitle}</div>
         <div class="activity-meta">
-          by ${sanitizedAuthor} • ${formatDate(activity.createdAt)}
+          by ${sanitizedAuthor} • ${formatRelativeTime(activity.createdAt) || formatDate(activity.createdAt)}
         </div>
       </div>
       <div class="activity-actions">
@@ -41,77 +48,5 @@ export function renderActivityItem(activity) {
   `;
 }
 
-/**
- * Groups activities by time periods (today, yesterday, this week, older)
- * @param {Array} activities - Array of activity objects
- * @returns {Object} Object with activities grouped by time period
- */
-export function groupByTime(activities) {
-  const now = new Date();
-  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  const yesterdayStart = new Date(todayStart - 24 * 60 * 60 * 1000);
-  const weekStart = new Date(todayStart - 7 * 24 * 60 * 60 * 1000);
-
-  const groups = {
-    today: [],
-    yesterday: [],
-    thisWeek: [],
-    older: []
-  };
-
-  activities.forEach(activity => {
-    const date = new Date(activity.createdAt);
-    if (date >= todayStart) {
-      groups.today.push(activity);
-    } else if (date >= yesterdayStart) {
-      groups.yesterday.push(activity);
-    } else if (date >= weekStart) {
-      groups.thisWeek.push(activity);
-    } else {
-      groups.older.push(activity);
-    }
-  });
-
-  return groups;
-}
-
-/**
- * Groups activities by repository, with pinned repos first
- * @param {Array} activities - Array of activity objects
- * @param {Array} pinnedRepos - Array of pinned repository names
- * @returns {Object} Object with activities grouped by repository
- */
-export function groupByRepo(activities, pinnedRepos = []) {
-  const groups = {};
-
-  activities.forEach(activity => {
-    if (!groups[activity.repo]) {
-      groups[activity.repo] = [];
-    }
-    groups[activity.repo].push(activity);
-  });
-
-  // Sort repos: pinned first, then by most recent activity
-  const sortedGroups = {};
-  Object.keys(groups)
-    .sort((a, b) => {
-      const aIsPinned = pinnedRepos.includes(a);
-      const bIsPinned = pinnedRepos.includes(b);
+export { groupByRepo, groupByTime };
 
-      // Pinned repos come first
-      if (aIsPinned && !bIsPinned) return -1;
-      if (!aIsPinned && bIsPinned) return 1;
-
-      // If both pinned or both not pinned, sort by most recent activity
-      const latestA = new Date(groups[a][0].createdAt);
-      const latestB = new Date(groups[b][0].createdAt);
-      return latestB - latestA;
-    })
-    .forEach(repo => {
-      // Sort activities within each repo by newest first
-      groups[repo].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-      sortedGroups[repo] = groups[repo];
-    });
-
-  return sortedGroups;
-}
diff --git a/popup/views/activity-list-view.js b/popup/views/activity-list-view.js
index b0864c4..65c2064 100644
--- a/popup/views/activity-list-view.js
+++ b/popup/views/activity-list-view.js
@@ -12,6 +12,7 @@ import { safelyOpenUrl } from '../../shared/security.js';
  * @param {Function} markAsReadWithAnimation - Callback for marking item as read with animation
  * @param {Function} handleMarkAllRead - Callback for marking all as read
  * @param {Function} handleCollapseAll - Callback for collapsing/expanding all repos
+ * @param {Function} clearArchive - Callback for clearing archived items
  * @param {Function} toggleRepoCollapse - Callback for toggling repo collapse state
  * @param {Function} togglePinRepo - Callback for toggling repo pin state
  * @param {Function} snoozeRepo - Callback for snoozing a repo
@@ -25,6 +26,7 @@ export function renderActivities(
   markAsReadWithAnimation,
   handleMarkAllRead,
   handleCollapseAll,
+  clearArchive,
   toggleRepoCollapse,
   togglePinRepo,
   snoozeRepo,
@@ -140,6 +142,7 @@ export function renderActivities(
       markAsReadWithAnimation,
       handleMarkAllRead,
       handleCollapseAll,
+      clearArchive,
       toggleRepoCollapse,
       togglePinRepo,
       snoozeRepo,
@@ -158,6 +161,7 @@ export function renderActivities(
  * @param {Function} markAsReadWithAnimation - Callback for marking item as read with animation
  * @param {Function} handleMarkAllRead - Callback for marking all as read
  * @param {Function} handleCollapseAll - Callback for collapsing/expanding all repos
+ * @param {Function} clearArchive - Callback for clearing archived items
  * @param {Function} toggleRepoCollapse - Callback for toggling repo collapse state
  * @param {Function} togglePinRepo - Callback for toggling repo pin state
  * @param {Function} snoozeRepo - Callback for snoozing a repo
@@ -169,6 +173,7 @@ function attachEventListeners(
   markAsReadWithAnimation,
   handleMarkAllRead,
   handleCollapseAll,
+  clearArchive,
   toggleRepoCollapse,
   togglePinRepo,
   snoozeRepo,
@@ -187,11 +192,7 @@ function attachEventListeners(
   // Re-add listeners to fresh elements
   document.getElementById('markAllReadBtn')?.addEventListener('click', handleMarkAllRead);
   document.getElementById('collapseAllBtn')?.addEventListener('click', handleCollapseAll);
-  document.getElementById('clearArchiveBtn')?.addEventListener('click', async () => {
-    // Clear all archived items by removing them from readItems
-    const { setState } = await import('../../shared/state-manager.js');
-    await setState({ readItems: [] });
-  });
+  document.getElementById('clearArchiveBtn')?.addEventListener('click', clearArchive);
 
   // Remove existing event delegation listener if present
   const existingListener = list._delegationListener;
diff --git a/popup/views/onboarding-view.js b/popup/views/onboarding-view.js
index ed18989..a0fbd24 100644
--- a/popup/views/onboarding-view.js
+++ b/popup/views/onboarding-view.js
@@ -1,4 +1,3 @@
-import { fetchGitHubRepoFromNpm } from '../../shared/api/npm-api.js';
 import {
   createGitHubAuthSession,
   fetchGitHubUser,
@@ -8,7 +7,8 @@ import {
 } from '../../shared/auth.js';
 import { OnboardingManager } from '../../shared/onboarding.js';
 import { getAccessToken, getWatchedRepos, setAuthSession, setWatchedRepos } from '../../shared/storage-helpers.js';
-import { createHeaders } from '../../shared/github-api.js';
+import { resolveWatchedRepoInput } from '../../shared/repo-service.js';
+import { CATEGORY_SETTINGS, createCategorySettings } from '../../shared/settings-schema.js';
 import { escapeHtml } from '../../shared/sanitize.js';
 
 // Create onboarding manager instance
@@ -18,6 +18,26 @@ function getStatusMarkup(type, message) {
   return `<div class="status-${type}">${escapeHtml(message)}</div>`;
 }
 
+async function addWatchedRepoFromInput(rawInput) {
+  const githubToken = await getAccessToken();
+  const existingRepos = await getWatchedRepos();
+  const resolution = await resolveWatchedRepoInput(rawInput, {
+    githubToken,
+    existingRepos
+  });
+
+  if (!resolution.valid) {
+    return resolution;
+  }
+
+  await setWatchedRepos([...existingRepos, resolution.record]);
+
+  return {
+    ...resolution,
+    alreadyExists: false
+  };
+}
+
 async function copyTextToClipboard(text) {
   if (!text) {
     return false;
@@ -799,43 +819,14 @@ function attachRepoButtonListeners() {
       btn.textContent = '...';
 
       try {
-        // Fetch full repo metadata from GitHub API
-        const token = await getAccessToken();
-        const headers = token
-          ? createHeaders(token)
-          : { 'Accept': 'application/vnd.github.v3+json' };
-        const response = await fetch(`https://api.github.com/repos/${repo}`, { headers });
-
-        if (response.ok) {
-          const data = await response.json();
-
-          // Save repo to storage with full metadata
-          const repos = await getWatchedRepos();
-
-          // Check if repo already exists
-          const repoExists = repos.some(r => r.fullName === repo);
-
-          if (!repoExists) {
-            repos.push({
-              fullName: data.full_name,
-              name: data.name,
-              description: data.description || 'No project description yet.',
-              language: data.language || 'Unknown',
-              stars: data.stargazers_count || 0,
-              forks: data.forks_count || 0,
-              updatedAt: data.updated_at,
-              addedAt: new Date().toISOString()
-            });
-            await setWatchedRepos(repos);
-          }
+        const result = await addWatchedRepoFromInput(repo);
 
-          // Show success state
+        if (result.valid || result.reason === 'duplicate') {
           btn.classList.remove('loading');
           btn.classList.add('added');
           btn.disabled = true;
           btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
         } else {
-          // Handle error
           btn.classList.remove('loading');
           btn.textContent = '✗';
           setTimeout(() => {
@@ -872,74 +863,19 @@ function setupReposStepListeners() {
 
   // Add manual repo
   const addManualRepo = async () => {
-    let repo = manualInput.value.trim();
+    const repo = manualInput.value.trim();
     if (!repo) return;
 
     repoStatus.innerHTML = getStatusMarkup('loading', 'Validating repository...');
 
     try {
-      // Get token for API calls
-      const githubToken = await getAccessToken();
-
-      // Parse GitHub URL if provided
-      const urlMatch = repo.match(/github\.com\/([^/]+\/[^/]+)/);
-      if (urlMatch) {
-        repo = urlMatch[1].replace(/\.git$/, '');
-        manualInput.value = repo; // Update input to show parsed format
-      }
-      // Check if it might be an NPM package (no slash or scoped package)
-      else if (!repo.includes('/') || repo.startsWith('@')) {
-        const npmResult = await fetchGitHubRepoFromNpm(repo);
-        if (npmResult.success) {
-          repo = npmResult.repo;
-          manualInput.value = repo; // Update input to show GitHub repo
-        } else {
-          repoStatus.innerHTML = getStatusMarkup('error', npmResult.error);
-          return;
-        }
-      }
-
-      // Validate owner/repo format
-      if (!repo.includes('/') || repo.split('/').length !== 2 || !repo.split('/')[0] || !repo.split('/')[1]) {
-        repoStatus.innerHTML = getStatusMarkup('error', 'Invalid format. Use: owner/repo, GitHub URL, or npm package');
-        return;
-      }
+      const result = await addWatchedRepoFromInput(repo);
 
-      // Validate repo exists on GitHub
-      const headers = githubToken
-        ? createHeaders(githubToken)
-        : { 'Accept': 'application/vnd.github.v3+json' };
-
-      const response = await fetch(`https://api.github.com/repos/${repo}`, { headers });
-
-      if (response.ok) {
-        const data = await response.json();
-
-        const repos = await getWatchedRepos();
-        const repoExists = repos.some(r => r.fullName === repo);
-        if (!repoExists) {
-          repos.push({
-            fullName: data.full_name,
-            name: data.name,
-            description: data.description || 'No project description yet.',
-            language: data.language || 'Unknown',
-            stars: data.stargazers_count || 0,
-            forks: data.forks_count || 0,
-            updatedAt: data.updated_at,
-            addedAt: new Date().toISOString()
-          });
-          await setWatchedRepos(repos);
-        }
+      if (result.valid || result.reason === 'duplicate') {
         manualInput.value = '';
         repoStatus.innerHTML = getStatusMarkup('success', '✓ Repository added');
       } else {
-        if (response.status === 404) {
-          repoStatus.innerHTML = getStatusMarkup('error', 'Repository not found on GitHub');
-        } else if (response.status === 403) {
-          repoStatus.innerHTML = getStatusMarkup('error', 'GitHub API rate limit exceeded. Try again later.');
-        } else {
-          repoStatus.innerHTML = getStatusMarkup('error', `Error validating repository (${response.status})`);
-        }
+        repoStatus.innerHTML = getStatusMarkup('error', result.error || 'Repository validation failed');
       }
     } catch (error) {
       console.error('Error adding repository:', error);
@@ -963,15 +899,15 @@ function setupCategoriesStepListeners() {
     const saved = await onboardingManager.getStepData('categories') || {};
 
     // Populate saved values and set up dependency logic
-    ['pullRequests', 'issues', 'releases'].forEach(k => {
-      const trackCheckbox = document.getElementById(k);
-      const notifyCheckbox = document.getElementById(`${k}Notifications`);
+    CATEGORY_SETTINGS.forEach(({ onboardingTrackId, onboardingNotifyId }) => {
+      const trackCheckbox = document.getElementById(onboardingTrackId);
+      const notifyCheckbox = document.getElementById(onboardingNotifyId);
       const notifyLabel = notifyCheckbox?.closest('.toggle-label');
 
       if (trackCheckbox && notifyCheckbox) {
         // Set saved values (default: track=true, notify=false)
-        trackCheckbox.checked = saved[k] !== undefined ? saved[k] : true;
-        notifyCheckbox.checked = saved[`${k}Notifications`] !== undefined ? saved[`${k}Notifications`] : false;
+        trackCheckbox.checked = saved[onboardingTrackId] !== undefined ? saved[onboardingTrackId] : true;
+        notifyCheckbox.checked = saved[onboardingNotifyId] !== undefined ? saved[onboardingNotifyId] : false;
 
         // Initial state: disable notify if track is unchecked
         if (!trackCheckbox.checked) {
@@ -1017,31 +953,22 @@ export async function handleNextStep() {
       break;
     }
     case 'categories': {
-      const pullRequests = document.getElementById('pullRequests')?.checked || false;
-      const issues = document.getElementById('issues')?.checked || false;
-      const releases = document.getElementById('releases')?.checked || false;
-      const pullRequestsNotifications = document.getElementById('pullRequestsNotifications')?.checked || false;
-      const issuesNotifications = document.getElementById('issuesNotifications')?.checked || false;
-      const releasesNotifications = document.getElementById('releasesNotifications')?.checked || false;
-
-      await onboardingManager.saveStepData('categories', {
-        pullRequests,
-        issues,
-        releases,
-        pullRequestsNotifications,
-        issuesNotifications,
-        releasesNotifications
+      const stepData = {};
+      const filters = {};
+      const notifications = {};
+
+      CATEGORY_SETTINGS.forEach(({ key, onboardingTrackId, onboardingNotifyId }) => {
+        const trackingEnabled = document.getElementById(onboardingTrackId)?.checked || false;
+        const notificationsEnabled = document.getElementById(onboardingNotifyId)?.checked || false;
+
+        stepData[onboardingTrackId] = trackingEnabled;
+        stepData[onboardingNotifyId] = notificationsEnabled;
+        filters[key] = trackingEnabled;
+        notifications[key] = notificationsEnabled;
       });
 
-      // Save to settings
-      await chrome.storage.sync.set({
-        showPullRequests: pullRequests,
-        showIssues: issues,
-        showReleases: releases,
-        pullRequestsNotifications,
-        issuesNotifications,
-        releasesNotifications
-      });
+      await onboardingManager.saveStepData('categories', stepData);
+      await chrome.storage.sync.set(createCategorySettings(filters, notifications));
       break;
     }
   }
diff --git a/shared/dom-optimizer.js b/shared/dom-optimizer.js
index 5c80c92..985c465 100644
--- a/shared/dom-optimizer.js
+++ b/shared/dom-optimizer.js
@@ -6,6 +6,11 @@
 import { UI_CONFIG } from './config.js';
 import { SNOOZE_ICON, CHECK_ICON } from './icons.js';
 import { sanitizeImageUrl } from './sanitize.js';
+import {
+  formatRelativeTime as formatSharedRelativeTime,
+  getActivityTypeLabel as getSharedActivityTypeLabel,
+  getSortedRepoGroups
+} from './feed-presentation.js';
 
 /**
  * Basic DOM renderer with simple caching to avoid unnecessary re-renders
@@ -248,6 +253,18 @@ class ActivityListRenderer {
     this.itemCache = new Map();
   }
 
+  groupActivitiesByRepo(activities = []) {
+    return new Map(getSortedRepoGroups(activities));
+  }
+
+  getActivityTypeLabel(type) {
+    return getSharedActivityTypeLabel(type);
+  }
+
+  formatTime(timestamp) {
+    return formatSharedRelativeTime(timestamp);
+  }
+
   /**
    * Render activities list with efficient updates
    * @param {Array<Object>} activities - Activities to render
@@ -354,7 +371,7 @@ class ActivityListRenderer {
    * @returns {string} Generated HTML
    */
   generateGroupedHTML(activities, collapsedRepos = new Set(), pinnedRepos = [], readItems = []) {
-    const grouped = this.groupActivitiesByRepo(activities, pinnedRepos);
+    const grouped = getSortedRepoGroups(activities, pinnedRepos);
     let html = '';
 
     for (const [repo, repoActivities] of grouped) {
@@ -442,7 +459,7 @@ class ActivityListRenderer {
     const sanitizedAuthor = escapeHtml(activity.author);
     const sanitizedRepo = escapeHtml(activity.repo);
     const sanitizedType = escapeHtml(activity.type);
-    const sanitizedTypeLabel = escapeHtml(this.getActivityTypeLabel(activity.type));
+    const sanitizedTypeLabel = escapeHtml(getSharedActivityTypeLabel(activity.type));
     const sanitizedDescription = activity.description ? escapeHtml(activity.description) : '';
     const sanitizedAvatar = sanitizeImageUrl(activity.authorAvatar)
       || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3C/svg%3E';
@@ -460,7 +477,7 @@ class ActivityListRenderer {
           <div class="activity-title">${sanitizedTitle}</div>
           ${sanitizedDescription ? `<p class="activity-description">${sanitizedDescription}</p>` : ''}
           <div class="activity-meta">
-            by ${sanitizedAuthor} • ${this.formatTime(activity.createdAt)}
+            by ${sanitizedAuthor} • ${formatSharedRelativeTime(activity.createdAt)}
           </div>
         </div>
         <div class="activity-actions">
@@ -481,85 +498,6 @@ class ActivityListRenderer {
     return html;
   }
 
-  /**
-   * Group activities by repository
-   * @param {Array} activities - Activities to group
-   * @param {Array} pinnedRepos - Array of pinned repository names
-   * @returns {Map} Grouped activities sorted with pinned repos first
-   */
-  groupActivitiesByRepo(activities, pinnedRepos = []) {
-    const groups = {};
-
-    // Group activities by repo
-    for (const activity of activities) {
-      if (!groups[activity.repo]) {
-        groups[activity.repo] = [];
-      }
-      groups[activity.repo].push(activity);
-    }
-
-    // Sort repos: pinned first, then by most recent activity
-    const sortedGroupsMap = new Map();
-    Object.keys(groups)
-      .sort((a, b) => {
-        const aIsPinned = pinnedRepos.includes(a);
-        const bIsPinned = pinnedRepos.includes(b);
-
-        // Pinned repos come first
-        if (aIsPinned && !bIsPinned) return -1;
-        if (!aIsPinned && bIsPinned) return 1;
-
-        // If both pinned or both not pinned, sort by most recent activity
-        const latestA = new Date(groups[a][0].createdAt);
-        const latestB = new Date(groups[b][0].createdAt);
-        return latestB - latestA;
-      })
-      .forEach(repo => {
-        // Sort activities within each repo by newest first
-        groups[repo].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-        sortedGroupsMap.set(repo, groups[repo]);
-      });
-
-    return sortedGroupsMap;
-  }
-
-  /**
-   * Get human-readable activity type label
-   * @param {string} type - Activity type
-   * @returns {string} Type label
-   */
-  getActivityTypeLabel(type) {
-    const labels = {
-      'PullRequestEvent': 'Pull Request',
-      'IssuesEvent': 'Issue',
-      'ReleaseEvent': 'Release',
-      'PushEvent': 'Push',
-      'IssueCommentEvent': 'Comment'
-    };
-    return labels[type] || type;
-  }
-
-  /**
-   * Format time for display
-   * @param {string} timestamp - ISO timestamp
-   * @returns {string} Formatted time
-   */
-  formatTime(timestamp) {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now - date;
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-
-    return date.toLocaleDateString();
-  }
-
   /**
    * Clean up old cache entries
    */
diff --git a/shared/feed-mutations.js b/shared/feed-mutations.js
new file mode 100644
index 0000000..0bf1a56
--- /dev/null
+++ b/shared/feed-mutations.js
@@ -0,0 +1,103 @@
+/**
+ * Shared feed mutation helpers used by popup, options, and background.
+ */
+
+export function toggleCollapsedRepo(collapsedRepos, repo) {
+  const updated = new Set(collapsedRepos instanceof Set ? collapsedRepos : collapsedRepos || []);
+
+  if (updated.has(repo)) {
+    updated.delete(repo);
+  } else {
+    updated.add(repo);
+  }
+
+  return updated;
+}
+
+export function togglePinnedRepoList(pinnedRepos = [], repo) {
+  const normalized = Array.isArray(pinnedRepos) ? [...pinnedRepos] : [];
+
+  if (normalized.includes(repo)) {
+    return normalized.filter(item => item !== repo);
+  }
+
+  return [...normalized, repo];
+}
+
+export function upsertSnoozedRepo(snoozedRepos = [], repo, expiresAt) {
+  const normalized = Array.isArray(snoozedRepos)
+    ? snoozedRepos.map(item => ({ ...item }))
+    : [];
+  const existingIndex = normalized.findIndex(item => item.repo === repo);
+
+  if (existingIndex >= 0) {
+    normalized[existingIndex].expiresAt = expiresAt;
+    return normalized;
+  }
+
+  return [...normalized, { repo, expiresAt }];
+}
+
+export function getAllActivityIds(activities = []) {
+  return activities
+    .map(activity => activity?.id)
+    .filter(Boolean);
+}
+
+export function getUnreadActivityIds(activities = [], readItems = []) {
+  const readSet = new Set(Array.isArray(readItems) ? readItems : []);
+
+  return activities
+    .filter(activity => activity?.id && !readSet.has(activity.id))
+    .map(activity => activity.id);
+}
+
+export function getRepoUnreadActivityIds(activities = [], readItems = [], repo) {
+  const readSet = new Set(Array.isArray(readItems) ? readItems : []);
+
+  return activities
+    .filter(activity => activity?.repo === repo && activity?.id && !readSet.has(activity.id))
+    .map(activity => activity.id);
+}
+
+export function markActivitiesAsRead(readItems = [], activityIds = []) {
+  const updated = new Set(Array.isArray(readItems) ? readItems : []);
+
+  activityIds.forEach(id => {
+    if (id) {
+      updated.add(id);
+    }
+  });
+
+  return [...updated];
+}
+
+export function markActivityAsUnread(readItems = [], activityId) {
+  return (Array.isArray(readItems) ? readItems : []).filter(id => id !== activityId);
+}
+
+export function removeRepoFeedData({ activities = [], readItems = [] }, repo) {
+  const updatedActivities = (Array.isArray(activities) ? activities : [])
+    .filter(activity => activity?.repo !== repo);
+  const removedActivityIds = new Set(
+    (Array.isArray(activities) ? activities : [])
+      .filter(activity => activity?.repo === repo && activity?.id)
+      .map(activity => activity.id)
+  );
+
+  return {
+    activities: updatedActivities,
+    readItems: (Array.isArray(readItems) ? readItems : [])
+      .filter(id => !removedActivityIds.has(id))
+  };
+}
+
+export function clearArchivedFeedData({ activities = [], readItems = [] }) {
+  const archivedIds = new Set(Array.isArray(readItems) ? readItems : []);
+
+  return {
+    activities: (Array.isArray(activities) ? activities : [])
+      .filter(activity => activity?.id ? !archivedIds.has(activity.id) : true),
+    readItems: []
+  };
+}
diff --git a/shared/feed-policy.js b/shared/feed-policy.js
new file mode 100644
index 0000000..5fc2137
--- /dev/null
+++ b/shared/feed-policy.js
@@ -0,0 +1,111 @@
+import { STORAGE_CONFIG } from './config.js';
+
+/**
+ * Merge and trim activities for storage while preserving incoming order.
+ * @param {Array<Object>} existingActivities
+ * @param {Array<Object>} newActivities
+ * @param {Object} options
+ * @param {Set<string>} options.excludedRepos
+ * @param {number} options.maxStored
+ * @returns {Array<Object>}
+ */
+export function prepareActivitiesForStorage(
+  existingActivities = [],
+  newActivities = [],
+  {
+    excludedRepos = new Set(),
+    maxStored = STORAGE_CONFIG.MAX_ACTIVITIES_STORED
+  } = {}
+) {
+  const normalizedExisting = Array.isArray(existingActivities) ? existingActivities : [];
+  const normalizedIncoming = Array.isArray(newActivities) ? newActivities : [];
+  const seenIds = new Set(normalizedExisting.map(activity => activity.id));
+
+  const uniqueIncoming = normalizedIncoming.filter(activity => {
+    if (!activity?.id || seenIds.has(activity.id)) {
+      return false;
+    }
+
+    seenIds.add(activity.id);
+    return true;
+  });
+
+  return [...uniqueIncoming, ...normalizedExisting]
+    .filter(activity => activity?.repo ? !excludedRepos.has(activity.repo) : true)
+    .slice(0, maxStored);
+}
+
+/**
+ * Apply the shared activity visibility rules used across popup and badge counts.
+ * @param {Array<Object>} activities
+ * @param {Object} options
+ * @param {Set<string>} options.excludedRepos
+ * @param {number|null} options.itemExpiryHours
+ * @param {string} options.currentFilter
+ * @param {string} options.searchQuery
+ * @param {boolean} options.showArchive
+ * @param {Array<string>} options.readItems
+ * @returns {Array<Object>}
+ */
+export function filterVisibleActivities(
+  activities = [],
+  {
+    excludedRepos = new Set(),
+    itemExpiryHours = null,
+    currentFilter = 'all',
+    searchQuery = '',
+    showArchive = false,
+    readItems = []
+  } = {}
+) {
+  const readSet = new Set(Array.isArray(readItems) ? readItems : []);
+  let filtered = Array.isArray(activities) ? [...activities] : [];
+
+  if (excludedRepos.size > 0) {
+    filtered = filtered.filter(activity => !excludedRepos.has(activity.repo));
+  }
+
+  if (itemExpiryHours !== null && itemExpiryHours > 0) {
+    const expiryThreshold = Date.now() - (itemExpiryHours * 60 * 60 * 1000);
+    filtered = filtered.filter(activity => {
+      const activityTime = new Date(activity.createdAt).getTime();
+      return Number.isFinite(activityTime) && activityTime >= expiryThreshold;
+    });
+  }
+
+  if (currentFilter !== 'all') {
+    filtered = filtered.filter(activity => activity.type === currentFilter);
+  }
+
+  filtered = filtered.filter(activity => showArchive ? readSet.has(activity.id) : !readSet.has(activity.id));
+
+  if (searchQuery) {
+    const normalizedQuery = searchQuery.toLowerCase();
+    filtered = filtered.filter(activity => {
+      const title = activity.title?.toLowerCase() || '';
+      const description = activity.description?.toLowerCase() || '';
+      const repo = activity.repo?.toLowerCase() || '';
+
+      return title.includes(normalizedQuery) ||
+        description.includes(normalizedQuery) ||
+        repo.includes(normalizedQuery);
+    });
+  }
+
+  return filtered;
+}
+
+/**
+ * Count unread activities after applying the shared visibility rules.
+ * @param {Array<Object>} activities
+ * @param {Object} options
+ * @returns {number}
+ */
+export function countUnreadActivities(activities = [], options = {}) {
+  return filterVisibleActivities(activities, {
+    ...options,
+    currentFilter: 'all',
+    searchQuery: '',
+    showArchive: false
+  }).length;
+}
diff --git a/shared/feed-presentation.js b/shared/feed-presentation.js
new file mode 100644
index 0000000..f2a7961
--- /dev/null
+++ b/shared/feed-presentation.js
@@ -0,0 +1,119 @@
+/**
+ * Shared feed presentation helpers used by popup rendering.
+ */
+
+import { formatDate } from './utils.js';
+
+export function getActivityTypeLabel(type) {
+  const labels = {
+    pr: 'Pull Request',
+    issue: 'Issue',
+    release: 'Release',
+    PullRequestEvent: 'Pull Request',
+    IssuesEvent: 'Issue',
+    ReleaseEvent: 'Release',
+    PushEvent: 'Push',
+    IssueCommentEvent: 'Comment'
+  };
+
+  return labels[type] || type;
+}
+
+export function formatRelativeTime(timestamp) {
+  const date = new Date(timestamp);
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  const diffMs = Date.now() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) {
+    return 'just now';
+  }
+
+  if (diffMins < 60) {
+    return `${diffMins}m ago`;
+  }
+
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+
+  if (diffDays < 7) {
+    return `${diffDays}d ago`;
+  }
+
+  return formatDate(timestamp);
+}
+
+export function groupByTime(activities = []) {
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000);
+  const weekStart = new Date(todayStart.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  const groups = {
+    today: [],
+    yesterday: [],
+    thisWeek: [],
+    older: []
+  };
+
+  activities.forEach(activity => {
+    const date = new Date(activity.createdAt);
+
+    if (date >= todayStart) {
+      groups.today.push(activity);
+    } else if (date >= yesterdayStart) {
+      groups.yesterday.push(activity);
+    } else if (date >= weekStart) {
+      groups.thisWeek.push(activity);
+    } else {
+      groups.older.push(activity);
+    }
+  });
+
+  return groups;
+}
+
+export function getSortedRepoGroups(activities = [], pinnedRepos = []) {
+  const grouped = new Map();
+
+  activities.forEach(activity => {
+    if (!grouped.has(activity.repo)) {
+      grouped.set(activity.repo, []);
+    }
+
+    grouped.get(activity.repo).push(activity);
+  });
+
+  return [...grouped.entries()]
+    .map(([repo, repoActivities]) => [
+      repo,
+      [...repoActivities].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+    ])
+    .sort(([repoA, activitiesA], [repoB, activitiesB]) => {
+      const repoAIsPinned = pinnedRepos.includes(repoA);
+      const repoBIsPinned = pinnedRepos.includes(repoB);
+
+      if (repoAIsPinned && !repoBIsPinned) {
+        return -1;
+      }
+
+      if (!repoAIsPinned && repoBIsPinned) {
+        return 1;
+      }
+
+      const latestA = new Date(activitiesA[0]?.createdAt || 0);
+      const latestB = new Date(activitiesB[0]?.createdAt || 0);
+      return latestB - latestA;
+    });
+}
+
+export function groupByRepo(activities = [], pinnedRepos = []) {
+  return Object.fromEntries(getSortedRepoGroups(activities, pinnedRepos));
+}
diff --git a/shared/repo-service.js b/shared/repo-service.js
new file mode 100644
index 0000000..41bed20
--- /dev/null
+++ b/shared/repo-service.js
@@ -0,0 +1,210 @@
+/**
+ * Shared repository resolution and normalization helpers.
+ */
+
+import { VALIDATION_PATTERNS } from './config.js';
+import { fetchGitHubRepoFromNpm } from './api/npm-api.js';
+import { validateRepository } from './repository-validator.js';
+import { createHeaders } from './github-api.js';
+
+export function getRepoFullName(repo) {
+  if (typeof repo === 'string') {
+    return repo;
+  }
+
+  return repo?.fullName || '';
+}
+
+export function isWatchedRepoDuplicate(repos = [], fullName = '') {
+  const normalizedFullName = String(fullName || '').toLowerCase();
+
+  if (!normalizedFullName) {
+    return false;
+  }
+
+  return repos.some(repo => getRepoFullName(repo).toLowerCase() === normalizedFullName);
+}
+
+export function normalizeWatchedRepoRecord(repo, { addedAtFallback = null } = {}) {
+  const fullName = getRepoFullName(repo);
+
+  if (!fullName) {
+    return null;
+  }
+
+  const [, derivedName = ''] = fullName.split('/');
+  const record = {
+    fullName,
+    name: repo?.name || derivedName,
+    description: repo?.description || 'No description provided',
+    language: repo?.language || 'Unknown',
+    stars: Number.isFinite(Number(repo?.stars)) ? Number(repo.stars) : 0,
+    forks: Number.isFinite(Number(repo?.forks)) ? Number(repo.forks) : 0,
+    updatedAt: repo?.updatedAt || null,
+    addedAt: repo?.addedAt || addedAtFallback || new Date().toISOString()
+  };
+
+  if (repo?.latestRelease !== undefined) {
+    record.latestRelease = repo.latestRelease;
+  }
+
+  if (repo?.private !== undefined) {
+    record.private = repo.private;
+  }
+
+  if (repo?.archived !== undefined) {
+    record.archived = repo.archived;
+  }
+
+  return record;
+}
+
+export function normalizeWatchedRepos(repos = []) {
+  return (Array.isArray(repos) ? repos : [])
+    .map(repo => normalizeWatchedRepoRecord(repo))
+    .filter(Boolean);
+}
+
+export async function normalizeRepoInput(rawInput) {
+  let repo = String(rawInput || '').trim();
+
+  if (!repo) {
+    return {
+      valid: false,
+      error: 'Repository name is required'
+    };
+  }
+
+  const urlMatch = repo.match(/github\.com\/([^/]+\/[^/]+)/);
+
+  if (urlMatch) {
+    repo = urlMatch[1].replace(/\.git$/, '');
+  } else if (!repo.includes('/') || repo.startsWith('@')) {
+    const npmResult = await fetchGitHubRepoFromNpm(repo);
+
+    if (!npmResult.success) {
+      return {
+        valid: false,
+        error: npmResult.error
+      };
+    }
+
+    repo = npmResult.repo;
+  }
+
+  if (!VALIDATION_PATTERNS.REPOSITORY_NAME.test(repo)) {
+    return {
+      valid: false,
+      error: 'Invalid format. Use: owner/repo, GitHub URL, or npm package'
+    };
+  }
+
+  return {
+    valid: true,
+    normalizedRepo: repo
+  };
+}
+
+export async function validateWatchedRepo(repo, githubToken) {
+  if (!githubToken) {
+    return {
+      valid: false,
+      error: 'No GitHub connection found. Connect GitHub first.'
+    };
+  }
+
+  const basicResult = await validateRepository(repo, githubToken);
+
+  if (!basicResult.valid) {
+    return basicResult;
+  }
+
+  try {
+    const headers = createHeaders(githubToken);
+    const releasesResponse = await fetch(`https://api.github.com/repos/${repo}/releases/latest`, { headers });
+
+    let latestRelease = null;
+    if (releasesResponse.ok) {
+      const releaseData = await releasesResponse.json();
+      latestRelease = {
+        version: releaseData.tag_name,
+        publishedAt: releaseData.published_at
+      };
+    }
+
+    return {
+      valid: true,
+      metadata: {
+        ...basicResult.metadata,
+        latestRelease
+      }
+    };
+  } catch (_error) {
+    return {
+      valid: true,
+      metadata: {
+        ...basicResult.metadata,
+        latestRelease: null
+      }
+    };
+  }
+}
+
+export function buildWatchedRepoRecord(metadata, options = {}) {
+  return normalizeWatchedRepoRecord(metadata, {
+    addedAtFallback: options.addedAt || new Date().toISOString()
+  });
+}
+
+export async function resolveWatchedRepoInput(
+  rawInput,
+  {
+    githubToken,
+    existingRepos = [],
+    addedAt = new Date().toISOString()
+  } = {}
+) {
+  const normalizationResult = await normalizeRepoInput(rawInput);
+
+  if (!normalizationResult.valid) {
+    return normalizationResult;
+  }
+
+  const normalizedRepo = normalizationResult.normalizedRepo;
+
+  if (isWatchedRepoDuplicate(existingRepos, normalizedRepo)) {
+    return {
+      valid: false,
+      reason: 'duplicate',
+      error: 'Repository already added',
+      normalizedRepo
+    };
+  }
+
+  const validationResult = await validateWatchedRepo(normalizedRepo, githubToken);
+
+  if (!validationResult.valid) {
+    return {
+      ...validationResult,
+      normalizedRepo
+    };
+  }
+
+  const fullName = validationResult.metadata?.fullName || normalizedRepo;
+
+  if (isWatchedRepoDuplicate(existingRepos, fullName)) {
+    return {
+      valid: false,
+      reason: 'duplicate',
+      error: 'Repository already added',
+      normalizedRepo: fullName
+    };
+  }
+
+  return {
+    valid: true,
+    normalizedRepo: fullName,
+    metadata: validationResult.metadata,
+    record: buildWatchedRepoRecord(validationResult.metadata, { addedAt })
+  };
+}
diff --git a/shared/settings-schema.js b/shared/settings-schema.js
new file mode 100644
index 0000000..adddbe7
--- /dev/null
+++ b/shared/settings-schema.js
@@ -0,0 +1,143 @@
+/**
+ * Shared settings schema and normalization helpers.
+ */
+
+export const CATEGORY_SETTINGS = Object.freeze([
+  {
+    key: 'prs',
+    label: 'Pull Requests',
+    optionsTrackId: 'filterPrs',
+    optionsNotifyId: 'notifyPrs',
+    onboardingTrackId: 'pullRequests',
+    onboardingNotifyId: 'pullRequestsNotifications'
+  },
+  {
+    key: 'issues',
+    label: 'Issues',
+    optionsTrackId: 'filterIssues',
+    optionsNotifyId: 'notifyIssues',
+    onboardingTrackId: 'issues',
+    onboardingNotifyId: 'issuesNotifications'
+  },
+  {
+    key: 'releases',
+    label: 'Releases',
+    optionsTrackId: 'filterReleases',
+    optionsNotifyId: 'notifyReleases',
+    onboardingTrackId: 'releases',
+    onboardingNotifyId: 'releasesNotifications'
+  }
+]);
+
+function createDefaultFilters() {
+  return {
+    prs: true,
+    issues: true,
+    releases: true
+  };
+}
+
+function createDefaultNotifications() {
+  return {
+    prs: true,
+    issues: true,
+    releases: true
+  };
+}
+
+export const SETTINGS_SCHEMA = Object.freeze({
+  mutedRepos: { defaultValue: [] },
+  snoozedRepos: { defaultValue: [] },
+  pinnedRepos: { defaultValue: [] },
+  filters: { defaultValue: createDefaultFilters() },
+  notifications: { defaultValue: createDefaultNotifications() },
+  checkInterval: { defaultValue: 15 },
+  snoozeHours: { defaultValue: 1 },
+  theme: { defaultValue: 'system' },
+  colorTheme: { defaultValue: 'polar' },
+  itemExpiryHours: { defaultValue: null },
+  markReadOnSnooze: { defaultValue: false },
+  allowUnlimitedRepos: { defaultValue: false }
+});
+
+export const SETTINGS_SYNC_KEYS = Object.freeze(Object.keys(SETTINGS_SCHEMA));
+
+export function getDefaultSettings() {
+  return {
+    mutedRepos: [],
+    snoozedRepos: [],
+    pinnedRepos: [],
+    filters: createDefaultFilters(),
+    notifications: createDefaultNotifications(),
+    checkInterval: 15,
+    snoozeHours: 1,
+    theme: 'system',
+    colorTheme: 'polar',
+    itemExpiryHours: null,
+    markReadOnSnooze: false,
+    allowUnlimitedRepos: false
+  };
+}
+
+function normalizeCategoryValues(value, defaults) {
+  const normalized = { ...defaults };
+
+  if (!value || typeof value !== 'object') {
+    return normalized;
+  }
+
+  CATEGORY_SETTINGS.forEach(category => {
+    if (value[category.key] !== undefined) {
+      normalized[category.key] = value[category.key] !== false;
+    }
+  });
+
+  return normalized;
+}
+
+function normalizeArrayValue(value) {
+  return Array.isArray(value) ? [...value] : [];
+}
+
+export function normalizeSettings(rawSettings = {}) {
+  const defaults = getDefaultSettings();
+
+  return {
+    mutedRepos: normalizeArrayValue(rawSettings.mutedRepos ?? defaults.mutedRepos),
+    snoozedRepos: normalizeArrayValue(rawSettings.snoozedRepos ?? defaults.snoozedRepos),
+    pinnedRepos: normalizeArrayValue(rawSettings.pinnedRepos ?? defaults.pinnedRepos),
+    filters: normalizeCategoryValues(rawSettings.filters, defaults.filters),
+    notifications: normalizeCategoryValues(rawSettings.notifications, defaults.notifications),
+    checkInterval: Number.isFinite(Number(rawSettings.checkInterval))
+      ? Number(rawSettings.checkInterval)
+      : defaults.checkInterval,
+    snoozeHours: Number.isFinite(Number(rawSettings.snoozeHours))
+      ? Number(rawSettings.snoozeHours)
+      : defaults.snoozeHours,
+    theme: rawSettings.theme || defaults.theme,
+    colorTheme: rawSettings.colorTheme || defaults.colorTheme,
+    itemExpiryHours: rawSettings.itemExpiryHours !== undefined
+      ? rawSettings.itemExpiryHours
+      : defaults.itemExpiryHours,
+    markReadOnSnooze: rawSettings.markReadOnSnooze === true,
+    allowUnlimitedRepos: rawSettings.allowUnlimitedRepos === true
+  };
+}
+
+export function pickSyncSettings(rawSettings = {}) {
+  const normalized = normalizeSettings(rawSettings);
+  const syncSettings = {};
+
+  SETTINGS_SYNC_KEYS.forEach(key => {
+    syncSettings[key] = normalized[key];
+  });
+
+  return syncSettings;
+}
+
+export function createCategorySettings(filters = {}, notifications = {}) {
+  return {
+    filters: normalizeCategoryValues(filters, createDefaultFilters()),
+    notifications: normalizeCategoryValues(notifications, createDefaultNotifications())
+  };
+}
diff --git a/shared/state-manager.js b/shared/state-manager.js
index 24196e2..3eaeb9e 100644
--- a/shared/state-manager.js
+++ b/shared/state-manager.js
@@ -3,9 +3,10 @@
  * Provides consistent state handling across popup, options, and background scripts
  */
 
-import { getSyncItems, getLocalItems, getWatchedRepos, setWatchedRepos } from './storage-helpers.js';
-import { STORAGE_KEYS, STORAGE_DEFAULTS } from './storage-helpers.js';
+import { getActivityData, getSettings, setWatchedRepos, getExcludedRepos } from './storage-helpers.js';
+import { STORAGE_DEFAULTS } from './storage-helpers.js';
 import { STORAGE_CONFIG } from './config.js';
+import { prepareActivitiesForStorage, filterVisibleActivities, countUnreadActivities } from './feed-policy.js';
 
 /**
  * Centralized state manager with reactive updates
@@ -26,11 +27,17 @@ class StateManager {
       watchedRepos: [],
       mutedRepos: [],
       snoozedRepos: [],
+      pinnedRepos: [...STORAGE_DEFAULTS.pinnedRepos],
+      collapsedRepos: new Set(STORAGE_DEFAULTS.collapsedRepos),
       filters: { ...STORAGE_DEFAULTS.filters },
       notifications: { ...STORAGE_DEFAULTS.notifications },
       checkInterval: STORAGE_DEFAULTS.checkInterval,
+      snoozeHours: STORAGE_DEFAULTS.snoozeHours,
       theme: STORAGE_DEFAULTS.theme,
+      colorTheme: STORAGE_DEFAULTS.colorTheme,
       itemExpiryHours: STORAGE_DEFAULTS.itemExpiryHours,
+      markReadOnSnooze: STORAGE_DEFAULTS.markReadOnSnooze,
+      allowUnlimitedRepos: STORAGE_DEFAULTS.allowUnlimitedRepos,
 
       // Loading/Error State
       isLoading: false,
@@ -66,21 +73,26 @@ class StateManager {
         }
 
         // Load settings from storage
-        const settings = await getSyncItems(STORAGE_KEYS.SETTINGS);
-        const watchedRepos = await getWatchedRepos();
-        const activityData = await getLocalItems(STORAGE_KEYS.ACTIVITY);
+        const settings = await getSettings();
+        const activityData = await getActivityData();
 
         // Update state with loaded data
         this.state = {
           ...this.state,
-          watchedRepos,
+          watchedRepos: settings.watchedRepos,
           mutedRepos: settings.mutedRepos || STORAGE_DEFAULTS.mutedRepos,
           snoozedRepos: settings.snoozedRepos || STORAGE_DEFAULTS.snoozedRepos,
+          pinnedRepos: settings.pinnedRepos || STORAGE_DEFAULTS.pinnedRepos,
+          collapsedRepos: new Set(activityData.collapsedRepos || STORAGE_DEFAULTS.collapsedRepos),
           filters: { ...STORAGE_DEFAULTS.filters, ...settings.filters },
           notifications: { ...STORAGE_DEFAULTS.notifications, ...settings.notifications },
           checkInterval: settings.checkInterval || STORAGE_DEFAULTS.checkInterval,
+          snoozeHours: settings.snoozeHours || STORAGE_DEFAULTS.snoozeHours,
           theme: settings.theme || STORAGE_DEFAULTS.theme,
+          colorTheme: settings.colorTheme || STORAGE_DEFAULTS.colorTheme,
           itemExpiryHours: settings.itemExpiryHours !== undefined ? settings.itemExpiryHours : STORAGE_DEFAULTS.itemExpiryHours,
+          markReadOnSnooze: settings.markReadOnSnooze === true,
+          allowUnlimitedRepos: settings.allowUnlimitedRepos === true,
           allActivities: activityData.activities || STORAGE_DEFAULTS.activities,
           readItems: activityData.readItems || STORAGE_DEFAULTS.readItems
         };
@@ -195,7 +207,19 @@ class StateManager {
       persistPromises.push(setWatchedRepos(updatesObj.watchedRepos));
     }
 
-    const syncKeys = ['mutedRepos', 'snoozedRepos', 'filters', 'notifications', 'checkInterval', 'theme', 'itemExpiryHours'];
+    const syncKeys = [
+      'mutedRepos',
+      'snoozedRepos',
+      'filters',
+      'notifications',
+      'checkInterval',
+      'snoozeHours',
+      'theme',
+      'colorTheme',
+      'itemExpiryHours',
+      'markReadOnSnooze',
+      'allowUnlimitedRepos'
+    ];
     const syncUpdates = {};
 
     syncKeys.forEach(key => {
@@ -204,6 +228,10 @@ class StateManager {
       }
     });
 
+    if ('pinnedRepos' in updatesObj) {
+      syncUpdates.pinnedRepos = updatesObj.pinnedRepos;
+    }
+
     // Batch all sync updates into a single write operation to avoid quota issues
     if (Object.keys(syncUpdates).length > 0) {
       if (typeof chrome !== 'undefined' && chrome.storage) {
@@ -231,6 +259,11 @@ class StateManager {
       }
     });
 
+    if ('collapsedRepos' in updatesObj) {
+      const collapsedRepos = updatesObj.collapsedRepos;
+      localUpdates.collapsedRepos = Array.from(collapsedRepos instanceof Set ? collapsedRepos : collapsedRepos || []);
+    }
+
     // Batch all local updates into a single write operation to avoid quota issues
     if (Object.keys(localUpdates).length > 0) {
       if (typeof chrome !== 'undefined' && chrome.storage) {
@@ -263,12 +296,15 @@ class StateManager {
       // Reset specific keys
       keys.forEach(key => {
         if (key in STORAGE_DEFAULTS) {
-          updates[key] = STORAGE_DEFAULTS[key];
+          updates[key] = key === 'collapsedRepos'
+            ? new Set(STORAGE_DEFAULTS.collapsedRepos)
+            : STORAGE_DEFAULTS[key];
         }
       });
     } else {
       // Reset all to defaults
       Object.assign(updates, STORAGE_DEFAULTS);
+      updates.collapsedRepos = new Set(STORAGE_DEFAULTS.collapsedRepos);
     }
 
     await this.setState(updates);
@@ -281,10 +317,11 @@ class StateManager {
    */
   async addActivities(activities) {
     const currentActivities = this.getState('allActivities');
-    const newActivities = [...activities, ...currentActivities];
-
-    // Keep only the most recent activities to stay under Chrome storage quota
-    const trimmedActivities = newActivities.slice(0, STORAGE_CONFIG.MAX_ACTIVITIES_STORED);
+    const excludedRepos = getExcludedRepos(this.getState('mutedRepos'), this.getState('snoozedRepos'));
+    const trimmedActivities = prepareActivitiesForStorage(currentActivities, activities, {
+      excludedRepos,
+      maxStored: STORAGE_CONFIG.MAX_ACTIVITIES_STORED
+    });
 
     await this.setState({ allActivities: trimmedActivities });
   }
@@ -335,46 +372,21 @@ class StateManager {
       searchQuery,
       showArchive,
       readItems,
+      mutedRepos,
+      snoozedRepos,
       itemExpiryHours
     } = this.state;
 
-    let filtered = allActivities;
-
-    // Filter by time-based expiry (if enabled)
-    if (itemExpiryHours !== null && itemExpiryHours > 0) {
-      const expiryThreshold = Date.now() - (itemExpiryHours * 60 * 60 * 1000);
-      filtered = filtered.filter(activity => {
-        const activityTime = new Date(activity.createdAt).getTime();
-        return activityTime >= expiryThreshold;
-      });
-    }
-
-    // Filter by type
-    if (currentFilter !== 'all') {
-      filtered = filtered.filter(activity => activity.type === currentFilter);
-    }
-
-    // Filter by read status (archive view shows ONLY read items, feed view shows ONLY unread items)
-    const readSet = new Set(readItems);
-    if (showArchive) {
-      // Archive view: show only read items
-      filtered = filtered.filter(activity => readSet.has(activity.id));
-    } else {
-      // Feed view: show only unread items
-      filtered = filtered.filter(activity => !readSet.has(activity.id));
-    }
-
-    // Filter by search query
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(activity =>
-        activity.title.toLowerCase().includes(query) ||
-        activity.description?.toLowerCase().includes(query) ||
-        activity.repo.toLowerCase().includes(query)
-      );
-    }
+    const excludedRepos = getExcludedRepos(mutedRepos, snoozedRepos);
 
-    return filtered;
+    return filterVisibleActivities(allActivities, {
+      excludedRepos,
+      itemExpiryHours,
+      currentFilter,
+      searchQuery,
+      showArchive,
+      readItems
+    });
   }
 
   /**
@@ -382,13 +394,17 @@ class StateManager {
    * @returns {Object} State statistics
    */
   getStats() {
-    const { allActivities, readItems, watchedRepos } = this.state;
-    const readSet = new Set(readItems);
+    const { allActivities, readItems, watchedRepos, mutedRepos, snoozedRepos, itemExpiryHours } = this.state;
+    const excludedRepos = getExcludedRepos(mutedRepos, snoozedRepos);
 
     return {
       totalActivities: allActivities.length,
       readActivities: readItems.length,
-      unreadActivities: allActivities.filter(a => !readSet.has(a.id)).length,
+      unreadActivities: countUnreadActivities(allActivities, {
+        excludedRepos,
+        itemExpiryHours,
+        readItems
+      }),
       watchedRepositories: watchedRepos.length,
       lastActivity: allActivities[0]?.createdAt || null
     };
diff --git a/shared/storage-helpers.js b/shared/storage-helpers.js
index 0d25925..b3a6d6d 100644
--- a/shared/storage-helpers.js
+++ b/shared/storage-helpers.js
@@ -2,6 +2,14 @@
  * Chrome storage helper functions with promisified APIs
  */
 
+import {
+  SETTINGS_SYNC_KEYS,
+  getDefaultSettings,
+  normalizeSettings,
+  pickSyncSettings
+} from './settings-schema.js';
+import { normalizeWatchedRepos } from './repo-service.js';
+
 const AUTH_SESSION_CACHE_KEY = 'githubAuthSession';
 const LEGACY_AUTH_STORAGE_KEYS = ['encryptedGithubAuthSession', 'encryptionKey'];
 const WATCHED_REPOS_STORAGE_KEY = 'watchedRepos';
@@ -190,15 +198,16 @@ function clearLegacySyncWatchedRepos() {
 export async function getWatchedRepos() {
   const localRepos = await getLocalItem(WATCHED_REPOS_STORAGE_KEY, null);
   if (Array.isArray(localRepos)) {
-    return localRepos;
+    return normalizeWatchedRepos(localRepos);
   }
 
   const legacyRepos = await getSyncItem(WATCHED_REPOS_STORAGE_KEY, STORAGE_DEFAULTS.watchedRepos);
 
   if (Array.isArray(legacyRepos) && legacyRepos.length > 0) {
-    await setLocalItem(WATCHED_REPOS_STORAGE_KEY, legacyRepos);
+    const normalizedLegacyRepos = normalizeWatchedRepos(legacyRepos);
+    await setLocalItem(WATCHED_REPOS_STORAGE_KEY, normalizedLegacyRepos);
     await clearLegacySyncWatchedRepos();
-    return legacyRepos;
+    return normalizedLegacyRepos;
   }
 
   return STORAGE_DEFAULTS.watchedRepos;
@@ -210,7 +219,7 @@ export async function getWatchedRepos() {
  * @returns {Promise<void>}
  */
 export async function setWatchedRepos(watchedRepos = []) {
-  const normalizedRepos = Array.isArray(watchedRepos) ? watchedRepos : [];
+  const normalizedRepos = normalizeWatchedRepos(watchedRepos);
   await setLocalItem(WATCHED_REPOS_STORAGE_KEY, normalizedRepos);
   await clearLegacySyncWatchedRepos();
 }
@@ -309,18 +318,13 @@ export const STORAGE_KEYS = {
   SETTINGS: [
     'watchedRepos',
     'lastCheck',
-    'filters',
-    'notifications',
-    'mutedRepos',
-    'snoozedRepos',
-    'checkInterval',
-    'theme',
-    'itemExpiryHours'
+    ...SETTINGS_SYNC_KEYS
   ],
   ACTIVITY: [
     'activities',
     'lastCheck',
-    'readItems'
+    'readItems',
+    'collapsedRepos'
   ],
   FILTERING: [
     'mutedRepos',
@@ -331,7 +335,8 @@ export const STORAGE_KEYS = {
     'filters',
     'notifications',
     'checkInterval',
-    'theme'
+    'theme',
+    'colorTheme'
   ]
 };
 
@@ -339,23 +344,10 @@ export const STORAGE_KEYS = {
 export const STORAGE_DEFAULTS = {
   watchedRepos: [],
   lastCheck: 0,
-  filters: {
-    pullRequests: true,
-    issues: true,
-    releases: true,
-    pushes: false
-  },
-  notifications: {
-    enabled: true,
-    sound: false
-  },
-  mutedRepos: [],
-  snoozedRepos: [],
-  checkInterval: 15,
-  theme: 'system',
+  ...getDefaultSettings(),
   activities: [],
   readItems: [],
-  pinnedRepos: [],
+  collapsedRepos: [],
   itemExpiryHours: null // null means disabled, otherwise number of hours
 };
 
@@ -366,18 +358,12 @@ export const STORAGE_DEFAULTS = {
 export async function getSettings() {
   const result = await getSyncItems(STORAGE_KEYS.SETTINGS);
   const watchedRepos = await getWatchedRepos();
+  const normalizedSettings = normalizeSettings(result);
 
-  // Apply defaults for missing properties
   return {
     watchedRepos,
     lastCheck: result.lastCheck || STORAGE_DEFAULTS.lastCheck,
-    filters: { ...STORAGE_DEFAULTS.filters, ...result.filters },
-    notifications: { ...STORAGE_DEFAULTS.notifications, ...result.notifications },
-    mutedRepos: result.mutedRepos || STORAGE_DEFAULTS.mutedRepos,
-    snoozedRepos: result.snoozedRepos || STORAGE_DEFAULTS.snoozedRepos,
-    checkInterval: result.checkInterval || STORAGE_DEFAULTS.checkInterval,
-    theme: result.theme || STORAGE_DEFAULTS.theme,
-    itemExpiryHours: result.itemExpiryHours !== undefined ? result.itemExpiryHours : STORAGE_DEFAULTS.itemExpiryHours
+    ...normalizedSettings
   };
 }
 
@@ -387,11 +373,12 @@ export async function getSettings() {
  */
 export async function getFilteringSettings() {
   const result = await getSyncItems(STORAGE_KEYS.FILTERING);
+  const normalized = normalizeSettings(result);
 
   return {
-    mutedRepos: result.mutedRepos || STORAGE_DEFAULTS.mutedRepos,
-    snoozedRepos: result.snoozedRepos || STORAGE_DEFAULTS.snoozedRepos,
-    pinnedRepos: result.pinnedRepos || STORAGE_DEFAULTS.pinnedRepos
+    mutedRepos: normalized.mutedRepos,
+    snoozedRepos: normalized.snoozedRepos,
+    pinnedRepos: normalized.pinnedRepos
   };
 }
 
@@ -401,12 +388,14 @@ export async function getFilteringSettings() {
  */
 export async function getUserPreferences() {
   const result = await getSyncItems(STORAGE_KEYS.USER_PREFERENCES);
+  const normalized = normalizeSettings(result);
 
   return {
-    filters: { ...STORAGE_DEFAULTS.filters, ...result.filters },
-    notifications: { ...STORAGE_DEFAULTS.notifications, ...result.notifications },
-    checkInterval: result.checkInterval || STORAGE_DEFAULTS.checkInterval,
-    theme: result.theme || STORAGE_DEFAULTS.theme
+    filters: normalized.filters,
+    notifications: normalized.notifications,
+    checkInterval: normalized.checkInterval,
+    theme: normalized.theme,
+    colorTheme: normalized.colorTheme
   };
 }
 
@@ -420,7 +409,8 @@ export async function getActivityData() {
   return {
     activities: result.activities || STORAGE_DEFAULTS.activities,
     lastCheck: result.lastCheck || STORAGE_DEFAULTS.lastCheck,
-    readItems: result.readItems || STORAGE_DEFAULTS.readItems
+    readItems: result.readItems || STORAGE_DEFAULTS.readItems,
+    collapsedRepos: result.collapsedRepos || STORAGE_DEFAULTS.collapsedRepos
   };
 }
 
@@ -430,12 +420,18 @@ export async function getActivityData() {
  * @returns {Promise<void>}
  */
 export async function updateSettings(updates) {
-  await setWatchedRepos(updates.watchedRepos);
-  await setSyncItem('lastCheck', updates.lastCheck);
-  await setSyncItem('filters', updates.filters);
-  await setSyncItem('notifications', updates.notifications);
-  await setSyncItem('mutedRepos', updates.mutedRepos);
-  await setSyncItem('snoozedRepos', updates.snoozedRepos);
-  await setSyncItem('checkInterval', updates.checkInterval);
-  await setSyncItem('theme', updates.theme);
+  if ('watchedRepos' in updates) {
+    await setWatchedRepos(updates.watchedRepos);
+  }
+
+  if ('lastCheck' in updates) {
+    await setSyncItem('lastCheck', updates.lastCheck);
+  }
+
+  const syncSettings = pickSyncSettings(updates);
+  const syncKeys = Object.keys(syncSettings);
+
+  for (const key of syncKeys) {
+    await setSyncItem(key, syncSettings[key]);
+  }
 }

From fc29382361f1ae769d6ebfd805402dd4d5782438 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 13 Apr 2026 21:07:05 -0500
Subject: [PATCH 39/42] test: cover extracted feed and popup flows

---
 tests/activity-item-view.test.js              | 394 ++++-------------
 tests/background.test.js                      | 239 +++++------
 tests/export-import-controller.test.js        | 151 +++++--
 tests/feed-mutations.test.js                  | 111 +++++
 tests/feed-policy.test.js                     | 119 ++++++
 tests/onboarding.test.js                      | 188 +++++++++
 tests/options-interactions.test.js            | 397 ++++++++++++++++++
 tests/options-main.test.js                    | 113 ++---
 tests/options.test.js                         |  97 +----
 tests/popup-activity-controller-extra.test.js | 269 ++++++++++++
 tests/popup-activity-list-view.test.js        |  76 +++-
 tests/popup-bootstrap.test.js                 | 346 +++++++++++++++
 tests/popup-repository-controller.test.js     | 154 +++----
 tests/repo-service.test.js                    | 182 ++++++++
 tests/state-manager.test.js                   | 203 ++++++++-
 tests/storage-helpers.test.js                 | 103 ++++-
 16 files changed, 2394 insertions(+), 748 deletions(-)
 create mode 100644 tests/feed-mutations.test.js
 create mode 100644 tests/feed-policy.test.js
 create mode 100644 tests/options-interactions.test.js
 create mode 100644 tests/popup-activity-controller-extra.test.js
 create mode 100644 tests/popup-bootstrap.test.js
 create mode 100644 tests/repo-service.test.js

diff --git a/tests/activity-item-view.test.js b/tests/activity-item-view.test.js
index 4913812..59f1d46 100644
--- a/tests/activity-item-view.test.js
+++ b/tests/activity-item-view.test.js
@@ -1,335 +1,97 @@
-import { jest, describe, test, expect } from '@jest/globals';
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+const mockUseState = jest.fn();
+const mockFormatDate = jest.fn();
 
-// Mock dependencies
 jest.unstable_mockModule('../shared/state-manager.js', () => ({
-  useState: jest.fn(() => ({ readItems: [] }))
+  useState: mockUseState
 }));
 
 jest.unstable_mockModule('../shared/utils.js', () => ({
-  formatDate: jest.fn((date) => date)
-}));
-
-jest.unstable_mockModule('../shared/sanitize.js', () => ({
-  escapeHtml: jest.fn((str) => str),
-  sanitizeImageUrl: jest.fn((url) => url)
+  formatDate: mockFormatDate
 }));
 
-jest.unstable_mockModule('../shared/icons.js', () => ({
-  CHECK_ICON: '<svg>check</svg>',
-  createSvg: jest.fn(() => '<svg>icon</svg>')
-}));
-
-// Import functions to test
-const { groupByTime, groupByRepo } = await import('../popup/views/activity-item-view.js');
+const { renderActivityItem } = await import('../popup/views/activity-item-view.js');
 
 describe('activity-item-view', () => {
-  describe('groupByTime', () => {
-    test('groups activities into today bucket', () => {
-      const now = new Date();
-      const todayActivity = {
-        id: 'today-1',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0).toISOString()
-      };
-
-      const groups = groupByTime([todayActivity]);
-
-      expect(groups.today).toHaveLength(1);
-      expect(groups.today[0]).toEqual(todayActivity);
-      expect(groups.yesterday).toHaveLength(0);
-      expect(groups.thisWeek).toHaveLength(0);
-      expect(groups.older).toHaveLength(0);
-    });
-
-    test('groups activities into yesterday bucket', () => {
-      const now = new Date();
-      const yesterdayActivity = {
-        id: 'yesterday-1',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 10, 0).toISOString()
-      };
-
-      const groups = groupByTime([yesterdayActivity]);
-
-      expect(groups.yesterday).toHaveLength(1);
-      expect(groups.yesterday[0]).toEqual(yesterdayActivity);
-      expect(groups.today).toHaveLength(0);
-      expect(groups.thisWeek).toHaveLength(0);
-      expect(groups.older).toHaveLength(0);
-    });
-
-    test('groups activities into this week bucket', () => {
-      const now = new Date();
-      const threeDaysAgo = {
-        id: 'week-1',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 3, 10, 0).toISOString()
-      };
-
-      const groups = groupByTime([threeDaysAgo]);
-
-      expect(groups.thisWeek).toHaveLength(1);
-      expect(groups.thisWeek[0]).toEqual(threeDaysAgo);
-      expect(groups.today).toHaveLength(0);
-      expect(groups.yesterday).toHaveLength(0);
-      expect(groups.older).toHaveLength(0);
-    });
-
-    test('groups activities into older bucket', () => {
-      const now = new Date();
-      const twoWeeksAgo = {
-        id: 'old-1',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 14, 10, 0).toISOString()
-      };
-
-      const groups = groupByTime([twoWeeksAgo]);
-
-      expect(groups.older).toHaveLength(1);
-      expect(groups.older[0]).toEqual(twoWeeksAgo);
-      expect(groups.today).toHaveLength(0);
-      expect(groups.yesterday).toHaveLength(0);
-      expect(groups.thisWeek).toHaveLength(0);
-    });
-
-    test('handles activities across all time buckets', () => {
-      const now = new Date();
-      const activities = [
-        {
-          id: 'today-1',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0).toISOString()
-        },
-        {
-          id: 'yesterday-1',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 10, 0).toISOString()
-        },
-        {
-          id: 'week-1',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 5, 10, 0).toISOString()
-        },
-        {
-          id: 'old-1',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30, 10, 0).toISOString()
-        }
-      ];
-
-      const groups = groupByTime(activities);
-
-      expect(groups.today).toHaveLength(1);
-      expect(groups.yesterday).toHaveLength(1);
-      expect(groups.thisWeek).toHaveLength(1);
-      expect(groups.older).toHaveLength(1);
-    });
-
-    test('handles empty activities array', () => {
-      const groups = groupByTime([]);
-
-      expect(groups.today).toHaveLength(0);
-      expect(groups.yesterday).toHaveLength(0);
-      expect(groups.thisWeek).toHaveLength(0);
-      expect(groups.older).toHaveLength(0);
-    });
-
-    test('handles activity exactly at midnight (today boundary)', () => {
-      const now = new Date();
-      const todayMidnight = {
-        id: 'boundary-1',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0).toISOString()
-      };
-
-      const groups = groupByTime([todayMidnight]);
-
-      expect(groups.today).toHaveLength(1);
-      expect(groups.yesterday).toHaveLength(0);
-    });
-
-    test('handles activity exactly at yesterday midnight boundary', () => {
-      const now = new Date();
-      const yesterdayMidnight = {
-        id: 'boundary-2',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0).toISOString()
-      };
-
-      const groups = groupByTime([yesterdayMidnight]);
-
-      expect(groups.yesterday).toHaveLength(1);
-      expect(groups.today).toHaveLength(0);
-    });
-
-    test('handles activity exactly at week boundary', () => {
-      const now = new Date();
-      const weekBoundary = {
-        id: 'boundary-3',
-        createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7, 0, 0, 0).toISOString()
-      };
-
-      const groups = groupByTime([weekBoundary]);
-
-      expect(groups.thisWeek).toHaveLength(1);
-      expect(groups.older).toHaveLength(0);
-    });
-
-    test('handles multiple activities in same bucket', () => {
-      const now = new Date();
-      const todayActivities = [
-        {
-          id: 'today-1',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0).toISOString()
-        },
-        {
-          id: 'today-2',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0).toISOString()
-        },
-        {
-          id: 'today-3',
-          createdAt: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0).toISOString()
-        }
-      ];
-
-      const groups = groupByTime(todayActivities);
-
-      expect(groups.today).toHaveLength(3);
-      expect(groups.today.map(a => a.id)).toEqual(['today-1', 'today-2', 'today-3']);
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseState.mockReturnValue({ readItems: [] });
+    mockFormatDate.mockImplementation((value) => `formatted:${value}`);
   });
 
-  describe('groupByRepo', () => {
-    test('groups activities by repository', () => {
-      const activities = [
-        { id: '1', repo: 'facebook/react', createdAt: '2025-01-10T10:00:00Z' },
-        { id: '2', repo: 'vuejs/vue', createdAt: '2025-01-10T11:00:00Z' },
-        { id: '3', repo: 'facebook/react', createdAt: '2025-01-10T12:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities);
-
-      expect(Object.keys(groups)).toHaveLength(2);
-      expect(groups['facebook/react']).toHaveLength(2);
-      expect(groups['vuejs/vue']).toHaveLength(1);
-    });
-
-    test('sorts activities within each repo by newest first', () => {
-      const activities = [
-        { id: '1', repo: 'test/repo', createdAt: '2025-01-10T10:00:00Z' },
-        { id: '2', repo: 'test/repo', createdAt: '2025-01-10T12:00:00Z' },
-        { id: '3', repo: 'test/repo', createdAt: '2025-01-10T11:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities);
-
-      expect(groups['test/repo'].map(a => a.id)).toEqual(['2', '3', '1']);
-    });
-
-    test('places pinned repos first', () => {
-      const activities = [
-        { id: '1', repo: 'unpinned/repo1', createdAt: '2025-01-10T15:00:00Z' },
-        { id: '2', repo: 'pinned/repo', createdAt: '2025-01-10T10:00:00Z' },
-        { id: '3', repo: 'unpinned/repo2', createdAt: '2025-01-10T14:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities, ['pinned/repo']);
-
-      const repoOrder = Object.keys(groups);
-      expect(repoOrder[0]).toBe('pinned/repo');
-    });
-
-    test('sorts unpinned repos by most recent activity', () => {
-      const activities = [
-        { id: '1', repo: 'old/repo', createdAt: '2025-01-10T10:00:00Z' },
-        { id: '2', repo: 'new/repo', createdAt: '2025-01-10T15:00:00Z' },
-        { id: '3', repo: 'mid/repo', createdAt: '2025-01-10T12:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities);
-
-      const repoOrder = Object.keys(groups);
-      expect(repoOrder).toEqual(['new/repo', 'mid/repo', 'old/repo']);
-    });
-
-    test('maintains pinned order, then sorts by recency', () => {
-      const activities = [
-        { id: '1', repo: 'unpinned/recent', createdAt: '2025-01-10T15:00:00Z' },
-        { id: '2', repo: 'pinned/old', createdAt: '2025-01-10T08:00:00Z' },
-        { id: '3', repo: 'pinned/recent', createdAt: '2025-01-10T14:00:00Z' },
-        { id: '4', repo: 'unpinned/old', createdAt: '2025-01-10T09:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities, ['pinned/old', 'pinned/recent']);
-
-      const repoOrder = Object.keys(groups);
-      // Pinned repos first (sorted by recency among pinned)
-      expect(repoOrder[0]).toBe('pinned/recent');
-      expect(repoOrder[1]).toBe('pinned/old');
-      // Unpinned repos last (sorted by recency)
-      expect(repoOrder[2]).toBe('unpinned/recent');
-      expect(repoOrder[3]).toBe('unpinned/old');
-    });
-
-    test('handles empty activities array', () => {
-      const groups = groupByRepo([]);
-
-      expect(Object.keys(groups)).toHaveLength(0);
-    });
-
-    test('handles single repository', () => {
-      const activities = [
-        { id: '1', repo: 'solo/repo', createdAt: '2025-01-10T10:00:00Z' },
-        { id: '2', repo: 'solo/repo', createdAt: '2025-01-10T11:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities);
-
-      expect(Object.keys(groups)).toHaveLength(1);
-      expect(groups['solo/repo']).toHaveLength(2);
-    });
-
-    test('handles empty pinnedRepos array', () => {
-      const activities = [
-        { id: '1', repo: 'repo1', createdAt: '2025-01-10T15:00:00Z' },
-        { id: '2', repo: 'repo2', createdAt: '2025-01-10T10:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities, []);
-
-      // Should sort by recency without pinning
-      const repoOrder = Object.keys(groups);
-      expect(repoOrder).toEqual(['repo1', 'repo2']);
-    });
-
-    test('handles undefined pinnedRepos', () => {
-      const activities = [
-        { id: '1', repo: 'repo1', createdAt: '2025-01-10T15:00:00Z' },
-        { id: '2', repo: 'repo2', createdAt: '2025-01-10T10:00:00Z' }
-      ];
-
-      const groups = groupByRepo(activities);
-
-      // Should work with default empty array
-      const repoOrder = Object.keys(groups);
-      expect(repoOrder).toEqual(['repo1', 'repo2']);
-    });
-
-    test('handles pinned repo that has no activities', () => {
-      const activities = [
-        { id: '1', repo: 'active/repo', createdAt: '2025-01-10T10:00:00Z' }
-      ];
+  test('renders unread activities with type label, relative time, and mark-read action', () => {
+    const html = renderActivityItem({
+      id: 'pr-1',
+      type: 'pr',
+      title: 'Improve cache handling',
+      author: 'octocat',
+      repo: 'facebook/react',
+      url: 'https://github.com/facebook/react/pull/1',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/1?v=4',
+      createdAt: new Date(Date.now() - (5 * 60 * 1000)).toISOString()
+    });
+
+    expect(html).toContain('activity-item unread');
+    expect(html).toContain('Pull Request');
+    expect(html).toContain('5m ago');
+    expect(html).toContain('data-action="mark-read"');
+    expect(html).toContain('src="https://avatars.githubusercontent.com/u/1?v=4"');
+  });
 
-      const groups = groupByRepo(activities, ['nonexistent/repo']);
+  test('renders read activities without the mark-read button', () => {
+    mockUseState.mockReturnValue({ readItems: ['issue-2'] });
 
-      // Should only contain repos that have activities
-      expect(Object.keys(groups)).toEqual(['active/repo']);
+    const html = renderActivityItem({
+      id: 'issue-2',
+      type: 'issue',
+      title: 'Bug report',
+      author: 'hubot',
+      repo: 'vuejs/core',
+      url: 'https://github.com/vuejs/core/issues/2',
+      authorAvatar: 'https://github.com/images/error/octocat_happy.gif',
+      createdAt: new Date().toISOString()
     });
 
-    test('preserves activity data while grouping', () => {
-      const activities = [
-        {
-          id: 'pr-1',
-          repo: 'test/repo',
-          title: 'Test PR',
-          type: 'pr',
-          createdAt: '2025-01-10T10:00:00Z'
-        }
-      ];
+    expect(html).toContain('activity-item read');
+    expect(html).toContain('Issue');
+    expect(html).not.toContain('mark-read-btn');
+  });
 
-      const groups = groupByRepo(activities);
+  test('sanitizes HTML content and rejects unsafe avatar urls', () => {
+    const html = renderActivityItem({
+      id: 'release-3',
+      type: 'release',
+      title: '<script>alert(1)</script>',
+      author: 'mallory<img src=x onerror=alert(1)>',
+      repo: 'evil/repo"><svg onload=alert(1)>',
+      url: 'https://github.com/evil/repo/releases/tag/v1',
+      authorAvatar: 'javascript:alert(1)',
+      createdAt: new Date().toISOString()
+    });
+
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+    expect(html).toContain('mallory&lt;img src=x onerror=alert(1)&gt;');
+    expect(html).toContain('evil/repo&quot;&gt;&lt;svg onload=alert(1)&gt;');
+    expect(html).toContain('src=""');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('javascript:alert(1)');
+  });
 
-      expect(groups['test/repo'][0]).toEqual(activities[0]);
-    });
+  test('falls back to formatted dates when relative time cannot be derived', () => {
+    const html = renderActivityItem({
+      id: 'custom-4',
+      type: 'PushEvent',
+      title: 'Push event',
+      author: 'alice',
+      repo: 'org/repo',
+      url: 'https://github.com/org/repo/commit/1',
+      authorAvatar: 'https://githubusercontent.com/avatar.png',
+      createdAt: 'not-a-date'
+    });
+
+    expect(mockFormatDate).toHaveBeenCalledWith('not-a-date');
+    expect(html).toContain('Push');
+    expect(html).toContain('formatted:not-a-date');
   });
 });
diff --git a/tests/background.test.js b/tests/background.test.js
index c6b5532..9a85e8b 100644
--- a/tests/background.test.js
+++ b/tests/background.test.js
@@ -6,6 +6,7 @@ import { jest, describe, test, beforeEach, expect } from '@jest/globals';
 // Import functions from background.js
 import {
   setupAlarm,
+  handleRuntimeMessage,
   checkGitHubActivity,
   fetchRepoActivity,
   storeActivities,
@@ -20,8 +21,7 @@ describe('Background Service Worker', () => {
     jest.clearAllMocks();
   });
 
-  describe.skip('fetchRepoActivity', () => {
-    // Skipped: Pre-existing async/mock setup issues not related to test quality improvements
+  describe('fetchRepoActivity', () => {
     const mockRepo = 'facebook/react';
     const mockToken = 'ghp_test123';
     const mockSince = new Date('2025-01-01');
@@ -114,6 +114,7 @@ describe('Background Service Worker', () => {
     });
 
     test('handles 401 unauthorized error', async () => {
+      allowUnexpectedConsole('error');
 
       fetch.mockResolvedValueOnce({
         ok: false,
@@ -127,6 +128,7 @@ describe('Background Service Worker', () => {
     });
 
     test('handles 403 rate limit exceeded', async () => {
+      allowUnexpectedConsole('error');
 
       fetch.mockResolvedValueOnce({
         ok: false,
@@ -140,6 +142,7 @@ describe('Background Service Worker', () => {
     });
 
     test('handles 404 repository not found', async () => {
+      allowUnexpectedConsole('error');
 
       fetch.mockResolvedValueOnce({
         ok: false,
@@ -241,8 +244,7 @@ describe('Background Service Worker', () => {
     });
   });
 
-  describe.skip('storeActivities', () => {
-    // Skipped: Pre-existing async/timeout issues not related to test quality improvements
+  describe('storeActivities', () => {
     test('prevents duplicate activities', async () => {
 
       const existingActivities = [
@@ -317,8 +319,7 @@ describe('Background Service Worker', () => {
     });
   });
 
-  describe.skip('updateBadge', () => {
-    // Skipped: Pre-existing async/timeout issues not related to test quality improvements
+  describe('updateBadge', () => {
     test('calculates unread count correctly', async () => {
 
       const activities = [
@@ -363,173 +364,71 @@ describe('Background Service Worker', () => {
   });
 
   describe('Message Handlers', () => {
-    // Note: Testing module-level event listener registration is complex with ES6 imports
-    // These tests verify handler logic but skip registration checks
-    // Registration is verified through manual testing and integration tests
-
-    test.skip('validates request object structure', () => {
-      // Skipped: Testing module-level event listener registration requires complex setup
-      // Handler logic is tested in integration tests
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
+    test('validates request object structure', () => {
       const sendResponse = jest.fn();
 
       // Invalid request should be rejected
-      handler(null, {}, sendResponse);
+      const result = handleRuntimeMessage(null, {}, sendResponse);
       expect(sendResponse).toHaveBeenCalledWith({
         success: false,
         error: 'Invalid request'
       });
+      expect(result).toBe(false);
     });
 
-    test.skip('checkNow handler calls checkGitHubActivity', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
+    test('updateInterval reschedules alarms immediately', () => {
       const sendResponse = jest.fn();
-      const request = { action: 'checkNow' };
+      chrome.alarms.clear.mockImplementation((name, callback) => callback());
+      chrome.alarms.create.mockImplementation((name, config, callback) => callback && callback());
 
-      const result = handler(request, {}, sendResponse);
+      const result = handleRuntimeMessage({ action: 'updateInterval', interval: 30 }, {}, sendResponse);
 
-      // Should return true for async response
       expect(result).toBe(true);
-    });
-
-    test.skip('clearBadge handler clears badge text', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      const sendResponse = jest.fn();
-      const request = { action: 'clearBadge' };
-
-      handler(request, {}, sendResponse);
-
-      expect(chrome.action.setBadgeText).toHaveBeenCalledWith({ text: '' });
       expect(sendResponse).toHaveBeenCalledWith({ success: true });
+      expect(chrome.alarms.clear).toHaveBeenCalledWith('checkGitHub', expect.any(Function));
+      expect(chrome.alarms.create).toHaveBeenCalledWith(
+        'checkGitHub',
+        { periodInMinutes: 30 },
+        expect.any(Function)
+      );
     });
 
-    test.skip('markAsRead requires id parameter', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
+    test('updateInterval rejects invalid intervals', () => {
       const sendResponse = jest.fn();
-      const request = { action: 'markAsRead' };
-
-      const result = handler(request, {}, sendResponse);
+      const result = handleRuntimeMessage({ action: 'updateInterval', interval: 0 }, {}, sendResponse);
 
       expect(sendResponse).toHaveBeenCalledWith({
         success: false,
-        error: 'Missing id parameter'
+        error: 'Invalid interval parameter'
       });
       expect(result).toBe(false);
     });
 
-    test.skip('markAsRead adds ID to readItems', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      chrome.storage.local.get.mockImplementation((keys, callback) => {
-        callback({ readItems: [] });
-      });
-
-      chrome.storage.local.set.mockImplementation((items, callback) => {
-        callback();
-      });
-
+    test('reports unknown runtime actions cleanly', async () => {
       const sendResponse = jest.fn();
-      const request = { action: 'markAsRead', id: 'test-id-123' };
 
-      const result = handler(request, {}, sendResponse);
+      const result = handleRuntimeMessage({ action: 'unknownAction' }, {}, sendResponse);
 
       expect(result).toBe(true);
-    });
-
-    test.skip('markAsUnread requires id parameter', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      const sendResponse = jest.fn();
-      const request = { action: 'markAsUnread' };
-
-      const result = handler(request, {}, sendResponse);
-
+      await Promise.resolve();
       expect(sendResponse).toHaveBeenCalledWith({
         success: false,
-        error: 'Missing id parameter'
-      });
-      expect(result).toBe(false);
-    });
-
-    test.skip('markAsUnread removes ID from readItems', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      chrome.storage.local.get.mockImplementation((keys, callback) => {
-        callback({ readItems: ['test-id-123', 'other-id'] });
-      });
-
-      chrome.storage.local.set.mockImplementation((items, callback) => {
-        callback();
+        error: 'Unknown action'
       });
-
-      const sendResponse = jest.fn();
-      const request = { action: 'markAsUnread', id: 'test-id-123' };
-
-      const result = handler(request, {}, sendResponse);
-
-      expect(result).toBe(true);
     });
 
-    test.skip('markAllAsRead marks all activities as read', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      const activities = [
-        { id: 'id-1' },
-        { id: 'id-2' },
-        { id: 'id-3' }
-      ];
-
-      chrome.storage.local.get.mockImplementation((keys, callback) => {
-        callback({ activities });
-      });
-
-      chrome.storage.local.set.mockImplementation((items, callback) => {
-        callback();
-      });
-
+    test('reports markAsRead failures back to the sender', async () => {
+      allowUnexpectedConsole('error');
       const sendResponse = jest.fn();
-      const request = { action: 'markAllAsRead' };
 
-      const result = handler(request, {}, sendResponse);
+      const result = handleRuntimeMessage({ action: 'markAsRead' }, {}, sendResponse);
 
       expect(result).toBe(true);
-    });
-
-    test.skip('unknown action returns error', () => {
-      const handler = chrome.runtime.onMessage.addListener.mock.calls[0]?.[0];
-      expect(handler).toBeDefined();
-      if (!handler) return;
-
-      const sendResponse = jest.fn();
-      const request = { action: 'unknownAction' };
-
-      const result = handler(request, {}, sendResponse);
-
+      await new Promise(resolve => setTimeout(resolve, 0));
       expect(sendResponse).toHaveBeenCalledWith({
         success: false,
-        error: 'Unknown action'
+        error: 'Missing id parameter'
       });
-      expect(result).toBe(false);
     });
   });
 
@@ -1051,18 +950,76 @@ describe('Background Service Worker', () => {
       // Should not throw
       await expect(checkGitHubActivity()).resolves.not.toThrow();
     });
+
+    test('skips muted and snoozed repositories before fetching', async () => {
+      chrome.storage.sync.get.mockImplementation((keys, callback) => {
+        const result = {};
+        if (Array.isArray(keys)) {
+          keys.forEach(key => {
+            if (key === 'lastCheck') result[key] = new Date('2025-01-01').toISOString();
+            else if (key === 'filters') result[key] = { prs: true, issues: true, releases: true };
+            else if (key === 'notifications') result[key] = { prs: true, issues: true, releases: true };
+            else if (key === 'mutedRepos') result[key] = ['facebook/react'];
+            else if (key === 'snoozedRepos') result[key] = [{ repo: 'vuejs/vue', expiresAt: Date.now() + 60000 }];
+            else if (key === 'unmutedRepos') result[key] = [];
+          });
+        }
+        callback(result);
+      });
+
+      chrome.storage.session.get.mockImplementation((keys, callback) => {
+        callback({ githubAuthSession: { accessToken: mockToken } });
+      });
+
+      chrome.storage.local.get.mockImplementation((keys, callback) => {
+        const result = {};
+        if (Array.isArray(keys)) {
+          keys.forEach(key => {
+            if (key === 'activities') result[key] = [];
+            else if (key === 'rateLimit') result[key] = null;
+            else if (key === 'watchedRepos') {
+              result[key] = [
+                { fullName: 'facebook/react' },
+                { fullName: 'vuejs/vue' }
+              ];
+            }
+          });
+        }
+        callback(result);
+      });
+
+      const result = await checkGitHubActivity();
+
+      expect(result).toBeUndefined();
+      expect(fetch).not.toHaveBeenCalled();
+      expect(chrome.storage.sync.set).toHaveBeenCalledWith(
+        expect.objectContaining({ lastCheck: expect.any(String) })
+      );
+    });
   });
 
-  describe.skip('Alarm Listener', () => {
+  describe('Alarm Listener', () => {
     test('alarm listener is registered', () => {
-      // Skipped: Module-level event listener registration testing requires complex setup
-      expect(chrome.alarms.onAlarm.addListener).toHaveBeenCalled();
+      expect(chrome.alarms.onAlarm.addListener).toBeDefined();
+    });
+
+    test('registers the alarm listener at module load time', async () => {
+      jest.resetModules();
+      chrome.alarms.onAlarm.addListener.mockClear();
+      chrome.runtime.onInstalled.addListener.mockClear();
+      chrome.runtime.onStartup.addListener.mockClear();
+
+      await import('../background.js');
+
+      expect(chrome.alarms.onAlarm.addListener).toHaveBeenCalledWith(expect.any(Function));
+      expect(chrome.runtime.onInstalled.addListener).toHaveBeenCalledWith(expect.any(Function));
+      expect(chrome.runtime.onStartup.addListener).toHaveBeenCalledWith(expect.any(Function));
     });
   });
 
-  describe.skip('storeActivities - quota handling', () => {
-    // Skipped: Pre-existing async/timeout issues not related to test quality improvements
+  describe('storeActivities - quota handling', () => {
     test('reduces to 50 items when quota exceeded', async () => {
+      allowUnexpectedConsole('error');
       const newActivities = [
         { id: 'new-1', repo: 'test/repo', title: 'New 1', createdAt: '2025-01-10T10:00:00Z' }
       ];
@@ -1097,6 +1054,7 @@ describe('Background Service Worker', () => {
     });
 
     test('reduces to 25 items when 50 items still exceeds quota', async () => {
+      allowUnexpectedConsole('error');
       const newActivities = [
         { id: 'new-1', repo: 'test/repo', title: 'New 1', createdAt: '2025-01-10T10:00:00Z' }
       ];
@@ -1165,14 +1123,14 @@ describe('Background Service Worker', () => {
     });
   });
 
-  describe.skip('fetchRepoActivity - rate limit', () => {
-    // Skipped: Pre-existing test data setup issues not related to test quality improvements
+  describe('fetchRepoActivity - rate limit', () => {
     const mockRepo = 'test/repo';
     const mockToken = 'ghp_test';
     const mockSince = new Date('2025-01-01');
     const mockFilters = { prs: true, issues: false, releases: false };
 
     test('checks stored rate limit before making request', async () => {
+      allowUnexpectedConsole('error');
       const futureReset = Date.now() + 3600000;
       chrome.storage.local.get.mockImplementation((keys, callback) => {
         callback({
@@ -1225,6 +1183,7 @@ describe('Background Service Worker', () => {
     });
 
     test('handles network errors gracefully', async () => {
+      allowUnexpectedConsole('error');
       chrome.storage.local.get.mockImplementation((keys, callback) => {
         const result = {};
         if (Array.isArray(keys)) {
diff --git a/tests/export-import-controller.test.js b/tests/export-import-controller.test.js
index 4853e64..afcf0b3 100644
--- a/tests/export-import-controller.test.js
+++ b/tests/export-import-controller.test.js
@@ -14,11 +14,26 @@ jest.unstable_mockModule('../shared/ui/notification-manager.js', () => ({
 }));
 
 jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
-  getWatchedRepos: jest.fn(() => Promise.resolve([])),
-  setWatchedRepos: jest.fn(() => Promise.resolve())
+  getSettings: jest.fn(() => Promise.resolve({
+    watchedRepos: [],
+    mutedRepos: [],
+    pinnedRepos: [],
+    filters: { prs: true, issues: true, releases: true },
+    notifications: { prs: true, issues: true, releases: true },
+    theme: 'system',
+    colorTheme: 'polar',
+    checkInterval: 15,
+    snoozeHours: 1,
+    snoozedRepos: [],
+    itemExpiryHours: null,
+    markReadOnSnooze: false,
+    allowUnlimitedRepos: false
+  })),
+  setWatchedRepos: jest.fn(() => Promise.resolve()),
+  updateSettings: jest.fn(() => Promise.resolve())
 }));
 
-const { getWatchedRepos, setWatchedRepos } = await import('../shared/storage-helpers.js');
+const { getSettings, setWatchedRepos, updateSettings } = await import('../shared/storage-helpers.js');
 const { exportSettings, handleImportFile } = await import('../options/controllers/export-import-controller.js');
 
 describe('export-import-controller', () => {
@@ -27,8 +42,9 @@ describe('export-import-controller', () => {
     mockNotifications.success.mockClear();
     mockNotifications.error.mockClear();
     mockNotifications.info.mockClear();
-    getWatchedRepos.mockClear();
+    getSettings.mockClear();
     setWatchedRepos.mockClear();
+    updateSettings.mockClear();
 
     // Mock chrome.storage
     global.chrome = {
@@ -58,7 +74,21 @@ describe('export-import-controller', () => {
   });
   describe('exportSettings', () => {
     test('exports all settings with default values', async () => {
-      chrome.storage.sync.get.mockResolvedValueOnce({});
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: [],
+        mutedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        theme: 'system',
+        colorTheme: 'polar',
+        checkInterval: 15,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
+      });
 
       await exportSettings();
 
@@ -70,18 +100,22 @@ describe('export-import-controller', () => {
 
     test('creates blob with correct content structure', async () => {
       const mockData = {
+        watchedRepos: ['owner/repo1', 'owner/repo2'],
         mutedRepos: ['owner/muted'],
         pinnedRepos: ['owner/pinned'],
         filters: { prs: true, issues: false, releases: true },
         notifications: { prs: false, issues: true, releases: true },
         theme: 'dark',
+        colorTheme: 'graphite',
         checkInterval: 30,
         snoozeHours: 2,
-        snoozedRepos: ['owner/snoozed']
+        snoozedRepos: ['owner/snoozed'],
+        itemExpiryHours: 24,
+        markReadOnSnooze: true,
+        allowUnlimitedRepos: true
       };
 
-      getWatchedRepos.mockResolvedValueOnce(['owner/repo1', 'owner/repo2']);
-      chrome.storage.sync.get.mockResolvedValueOnce(mockData);
+      getSettings.mockResolvedValueOnce(mockData);
 
       await exportSettings();
 
@@ -97,8 +131,21 @@ describe('export-import-controller', () => {
     });
 
     test('uses default values for missing settings', async () => {
-      chrome.storage.sync.get.mockResolvedValueOnce({});
-      getWatchedRepos.mockResolvedValueOnce(['owner/repo1']);
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: ['owner/repo1'],
+        mutedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        theme: 'system',
+        colorTheme: 'polar',
+        checkInterval: 15,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
+      });
 
       await exportSettings();
 
@@ -115,7 +162,21 @@ describe('export-import-controller', () => {
     });
 
     test('creates download link with current date', async () => {
-      chrome.storage.sync.get.mockResolvedValueOnce({});
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: [],
+        mutedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        theme: 'system',
+        colorTheme: 'polar',
+        checkInterval: 15,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
+      });
 
       const originalCreateElement = document.createElement.bind(document);
       let capturedLink;
@@ -140,7 +201,21 @@ describe('export-import-controller', () => {
     });
 
     test('triggers download and cleans up', async () => {
-      chrome.storage.sync.get.mockResolvedValueOnce({});
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: [],
+        mutedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        theme: 'system',
+        colorTheme: 'polar',
+        checkInterval: 15,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
+      });
 
       const originalCreateElement = document.createElement.bind(document);
       let capturedLink;
@@ -163,7 +238,21 @@ describe('export-import-controller', () => {
     });
 
     test('shows success notification', async () => {
-      chrome.storage.sync.get.mockResolvedValueOnce({});
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: [],
+        mutedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        theme: 'system',
+        colorTheme: 'polar',
+        checkInterval: 15,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
+      });
 
       await exportSettings();
 
@@ -172,7 +261,7 @@ describe('export-import-controller', () => {
 
     test('handles export errors', async () => {
       allowUnexpectedConsole('error');
-      chrome.storage.sync.get.mockRejectedValueOnce(new Error('Storage error'));
+      getSettings.mockRejectedValueOnce(new Error('Storage error'));
 
       await exportSettings();
 
@@ -185,8 +274,9 @@ describe('export-import-controller', () => {
       const circular = { a: 1 };
       circular.self = circular;
 
-      chrome.storage.sync.get.mockResolvedValueOnce({});
-      getWatchedRepos.mockResolvedValueOnce([circular]);
+      getSettings.mockResolvedValueOnce({
+        watchedRepos: [circular]
+      });
 
       await exportSettings();
 
@@ -219,7 +309,7 @@ describe('export-import-controller', () => {
       await handleImportFile(mockEvent);
 
       expect(mockFile.text).not.toHaveBeenCalled();
-      expect(chrome.storage.sync.set).not.toHaveBeenCalled();
+      expect(updateSettings).not.toHaveBeenCalled();
       expect(setWatchedRepos).not.toHaveBeenCalled();
     });
 
@@ -241,7 +331,7 @@ describe('export-import-controller', () => {
       await handleImportFile(mockEvent);
 
       expect(setWatchedRepos).toHaveBeenCalledWith(['owner/repo1']);
-      expect(chrome.storage.sync.set).toHaveBeenCalledWith(
+      expect(updateSettings).toHaveBeenCalledWith(
         expect.objectContaining({
           mutedRepos: ['owner/muted'],
           theme: 'dark',
@@ -279,7 +369,7 @@ describe('export-import-controller', () => {
 
       await handleImportFile(mockEvent);
 
-      expect(chrome.storage.sync.set).not.toHaveBeenCalled();
+      expect(updateSettings).not.toHaveBeenCalled();
       expect(setWatchedRepos).not.toHaveBeenCalled();
       expect(mockNotifications.info).toHaveBeenCalledWith('Import cancelled');
       expect(mockEvent.target.value).toBe('');
@@ -298,7 +388,7 @@ describe('export-import-controller', () => {
       await handleImportFile(mockEvent);
 
       expect(setWatchedRepos).toHaveBeenCalledWith(['owner/repo1']);
-      const setCall = chrome.storage.sync.set.mock.calls[0][0];
+      const setCall = updateSettings.mock.calls[0][0];
       expect(setCall.mutedRepos).toEqual([]);
       expect(setCall.pinnedRepos).toEqual([]);
       expect(setCall.filters).toEqual({ prs: true, issues: true, releases: true });
@@ -414,7 +504,7 @@ describe('export-import-controller', () => {
       };
 
       mockFile.text.mockResolvedValueOnce(JSON.stringify(importData));
-      chrome.storage.sync.set.mockRejectedValueOnce(new Error('Storage error'));
+      updateSettings.mockRejectedValueOnce(new Error('Storage error'));
 
       await handleImportFile(mockEvent);
 
@@ -483,7 +573,7 @@ describe('export-import-controller', () => {
       await handleImportFile(mockEvent);
 
       expect(setWatchedRepos).toHaveBeenCalledWith(['owner/repo1', 'owner/repo2']);
-      expect(chrome.storage.sync.set).toHaveBeenCalledWith({
+      expect(updateSettings).toHaveBeenCalledWith(expect.objectContaining({
         mutedRepos: ['owner/muted1'],
         pinnedRepos: ['owner/pinned1'],
         filters: { prs: false, issues: true, releases: false },
@@ -492,7 +582,7 @@ describe('export-import-controller', () => {
         checkInterval: 45,
         snoozeHours: 3,
         snoozedRepos: ['owner/snoozed1']
-      });
+      }));
     });
   });
 
@@ -504,11 +594,18 @@ describe('export-import-controller', () => {
         mutedRepos: ['owner/muted'],
         filters: { prs: true, issues: false, releases: true },
         theme: 'dark',
-        checkInterval: 30
+        colorTheme: 'polar',
+        notifications: { prs: true, issues: true, releases: true },
+        checkInterval: 30,
+        snoozeHours: 1,
+        snoozedRepos: [],
+        pinnedRepos: [],
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false
       };
 
-      getWatchedRepos.mockResolvedValueOnce(originalSettings.watchedRepos);
-      chrome.storage.sync.get.mockResolvedValueOnce(originalSettings);
+      getSettings.mockResolvedValueOnce(originalSettings);
 
       await exportSettings();
 
@@ -533,7 +630,7 @@ describe('export-import-controller', () => {
       await handleImportFile(mockEvent);
 
       // Verify the imported settings match the original
-      const importedSettings = chrome.storage.sync.set.mock.calls[0][0];
+      const importedSettings = updateSettings.mock.calls[0][0];
       expect(setWatchedRepos).toHaveBeenCalledWith(originalSettings.watchedRepos);
       expect(importedSettings.mutedRepos).toEqual(originalSettings.mutedRepos);
       expect(importedSettings.theme).toBe(originalSettings.theme);
diff --git a/tests/feed-mutations.test.js b/tests/feed-mutations.test.js
new file mode 100644
index 0000000..0d3d798
--- /dev/null
+++ b/tests/feed-mutations.test.js
@@ -0,0 +1,111 @@
+import { describe, expect, test } from '@jest/globals';
+
+import {
+  clearArchivedFeedData,
+  getAllActivityIds,
+  getUnreadActivityIds,
+  getRepoUnreadActivityIds,
+  markActivitiesAsRead,
+  markActivityAsUnread,
+  removeRepoFeedData,
+  toggleCollapsedRepo,
+  togglePinnedRepoList,
+  upsertSnoozedRepo
+} from '../shared/feed-mutations.js';
+
+describe('feed-mutations', () => {
+  test('toggles collapsed repos with set semantics', () => {
+    const collapsed = toggleCollapsedRepo(new Set(['facebook/react']), 'vuejs/core');
+
+    expect(collapsed).toEqual(new Set(['facebook/react', 'vuejs/core']));
+    expect(toggleCollapsedRepo(collapsed, 'facebook/react')).toEqual(new Set(['vuejs/core']));
+  });
+
+  test('toggles pinned repos without duplicates', () => {
+    expect(togglePinnedRepoList(['facebook/react'], 'vuejs/core')).toEqual(['facebook/react', 'vuejs/core']);
+    expect(togglePinnedRepoList(['facebook/react'], 'facebook/react')).toEqual([]);
+    expect(togglePinnedRepoList(null, 'solidjs/solid')).toEqual(['solidjs/solid']);
+  });
+
+  test('upserts snoozed repos in place', () => {
+    const next = upsertSnoozedRepo([{ repo: 'facebook/react', expiresAt: 1 }], 'facebook/react', 2);
+
+    expect(next).toEqual([{ repo: 'facebook/react', expiresAt: 2 }]);
+    expect(upsertSnoozedRepo(next, 'vuejs/core', 3)).toEqual([
+      { repo: 'facebook/react', expiresAt: 2 },
+      { repo: 'vuejs/core', expiresAt: 3 }
+    ]);
+  });
+
+  test('computes all activity ids and unread ids for a repository', () => {
+    const activities = [
+      { id: '1', repo: 'facebook/react' },
+      { id: null, repo: 'facebook/react' },
+      { id: '2', repo: 'facebook/react' },
+      { id: '3', repo: 'vuejs/core' }
+    ];
+
+    expect(getAllActivityIds(activities)).toEqual(['1', '2', '3']);
+    expect(getUnreadActivityIds(activities, ['2'])).toEqual(['1', '3']);
+    expect(getRepoUnreadActivityIds(activities, ['2'], 'facebook/react')).toEqual(['1']);
+  });
+
+  test('marks activities as read and unread idempotently', () => {
+    const readItems = markActivitiesAsRead(['1'], ['1', '2', null, '3']);
+
+    expect(readItems.sort()).toEqual(['1', '2', '3']);
+    expect(markActivityAsUnread(readItems, '2').sort()).toEqual(['1', '3']);
+    expect(markActivityAsUnread(null, '2')).toEqual([]);
+  });
+
+  test('handles collapsed repos when the existing collection is missing or array-backed', () => {
+    expect(toggleCollapsedRepo(null, 'facebook/react')).toEqual(new Set(['facebook/react']));
+    expect(toggleCollapsedRepo(['facebook/react'], 'vuejs/core')).toEqual(new Set(['facebook/react', 'vuejs/core']));
+  });
+
+  test('removes repo feed data and matching read items', () => {
+    const result = removeRepoFeedData({
+      activities: [
+        { id: '1', repo: 'facebook/react' },
+        { id: '2', repo: 'vuejs/core' },
+        { id: '3', repo: 'facebook/react' }
+      ],
+      readItems: ['1', '2', '3']
+    }, 'facebook/react');
+
+    expect(result).toEqual({
+      activities: [{ id: '2', repo: 'vuejs/core' }],
+      readItems: ['2']
+    });
+  });
+
+  test('clears archived feed data by dropping read activities', () => {
+    const result = clearArchivedFeedData({
+      activities: [
+        { id: '1', repo: 'facebook/react' },
+        { id: '2', repo: 'vuejs/core' }
+      ],
+      readItems: ['1']
+    });
+
+    expect(result).toEqual({
+      activities: [{ id: '2', repo: 'vuejs/core' }],
+      readItems: []
+    });
+  });
+
+  test('keeps malformed activities when clearing archive data', () => {
+    const result = clearArchivedFeedData({
+      activities: [
+        { id: '1', repo: 'facebook/react' },
+        { repo: 'missing/id' }
+      ],
+      readItems: ['1']
+    });
+
+    expect(result).toEqual({
+      activities: [{ repo: 'missing/id' }],
+      readItems: []
+    });
+  });
+});
diff --git a/tests/feed-policy.test.js b/tests/feed-policy.test.js
new file mode 100644
index 0000000..98886df
--- /dev/null
+++ b/tests/feed-policy.test.js
@@ -0,0 +1,119 @@
+import { describe, test, expect } from '@jest/globals';
+
+import {
+  prepareActivitiesForStorage,
+  filterVisibleActivities,
+  countUnreadActivities
+} from '../shared/feed-policy.js';
+
+describe('feed-policy', () => {
+  describe('prepareActivitiesForStorage', () => {
+    test('dedupes incoming activities, prepends new items, and trims to the max size', () => {
+      const existing = [
+        { id: 'existing-1', repo: 'owner/repo', createdAt: '2025-01-01T00:00:00Z' },
+        { id: 'existing-2', repo: 'owner/repo', createdAt: '2025-01-01T01:00:00Z' }
+      ];
+      const incoming = [
+        { id: 'incoming-1', repo: 'owner/repo', createdAt: '2025-01-02T00:00:00Z' },
+        { id: 'existing-1', repo: 'owner/repo', createdAt: '2025-01-02T01:00:00Z' },
+        { id: 'incoming-2', repo: 'owner/repo', createdAt: '2025-01-02T02:00:00Z' }
+      ];
+
+      const result = prepareActivitiesForStorage(existing, incoming, { maxStored: 3 });
+
+      expect(result.map(activity => activity.id)).toEqual(['incoming-1', 'incoming-2', 'existing-1']);
+    });
+
+    test('filters excluded repositories before storing', () => {
+      const result = prepareActivitiesForStorage([], [
+        { id: 'muted-1', repo: 'muted/repo' },
+        { id: 'visible-1', repo: 'active/repo' }
+      ], {
+        excludedRepos: new Set(['muted/repo'])
+      });
+
+      expect(result).toHaveLength(1);
+      expect(result[0].repo).toBe('active/repo');
+    });
+  });
+
+  describe('filterVisibleActivities', () => {
+    const now = Date.now();
+    const activities = [
+      {
+        id: 'unread-pr',
+        repo: 'visible/repo',
+        type: 'pr',
+        title: 'Unread PR',
+        description: 'Fresh activity',
+        createdAt: new Date(now - 60 * 1000).toISOString()
+      },
+      {
+        id: 'read-issue',
+        repo: 'visible/repo',
+        type: 'issue',
+        title: 'Read issue',
+        description: 'Needs archive coverage',
+        createdAt: new Date(now - 2 * 60 * 1000).toISOString()
+      },
+      {
+        id: 'old-release',
+        repo: 'visible/repo',
+        type: 'release',
+        title: 'Old release',
+        description: 'Should expire',
+        createdAt: new Date(now - 5 * 60 * 60 * 1000).toISOString()
+      },
+      {
+        id: 'muted-pr',
+        repo: 'muted/repo',
+        type: 'pr',
+        title: 'Muted PR',
+        description: 'Should be hidden',
+        createdAt: new Date(now - 60 * 1000).toISOString()
+      }
+    ];
+
+    test('applies excluded repo, expiry, read/archive, type, and search filters together', () => {
+      const result = filterVisibleActivities(activities, {
+        excludedRepos: new Set(['muted/repo']),
+        itemExpiryHours: 2,
+        currentFilter: 'pr',
+        searchQuery: 'unread',
+        showArchive: false,
+        readItems: ['read-issue']
+      });
+
+      expect(result.map(activity => activity.id)).toEqual(['unread-pr']);
+    });
+
+    test('shows only read items in archive mode', () => {
+      const result = filterVisibleActivities(activities, {
+        showArchive: true,
+        readItems: ['read-issue']
+      });
+
+      expect(result.map(activity => activity.id)).toEqual(['read-issue']);
+    });
+  });
+
+  describe('countUnreadActivities', () => {
+    test('counts only visible unread items', () => {
+      const now = Date.now();
+      const activities = [
+        { id: 'visible-unread', repo: 'visible/repo', createdAt: new Date(now - 1000).toISOString() },
+        { id: 'visible-read', repo: 'visible/repo', createdAt: new Date(now - 2000).toISOString() },
+        { id: 'muted-unread', repo: 'muted/repo', createdAt: new Date(now - 3000).toISOString() },
+        { id: 'expired-unread', repo: 'visible/repo', createdAt: new Date(now - 5 * 60 * 60 * 1000).toISOString() }
+      ];
+
+      const result = countUnreadActivities(activities, {
+        excludedRepos: new Set(['muted/repo']),
+        itemExpiryHours: 2,
+        readItems: ['visible-read']
+      });
+
+      expect(result).toBe(1);
+    });
+  });
+});
diff --git a/tests/onboarding.test.js b/tests/onboarding.test.js
index f7ea3d5..f865b3c 100644
--- a/tests/onboarding.test.js
+++ b/tests/onboarding.test.js
@@ -73,6 +73,8 @@ import { OnboardingManager } from '../shared/onboarding.js';
 let _handleNextStep;
 let _renderReposStep;
 let _renderOnboardingStep;
+let _showOnboarding;
+let _exitOnboarding;
 
 async function renderTokenStep(stateOverrides = {}) {
   _localStorage = {
@@ -144,6 +146,8 @@ describe('Onboarding - token persistence', () => {
     _handleNextStep = module.handleNextStep;
     _renderReposStep = module.renderReposStep;
     _renderOnboardingStep = module.renderOnboardingStep;
+    _showOnboarding = module.showOnboarding;
+    _exitOnboarding = module.exitOnboarding;
   });
 
   test('preserves validated auth state when navigating past the connect step', async () => {
@@ -503,5 +507,189 @@ describe('Onboarding - token persistence', () => {
     expect(cat.pullRequestsNotifications).toBe(true);
     expect(cat.issuesNotifications).toBe(false);
     expect(cat.releasesNotifications).toBe(true);
+
+    expect(chrome.storage.sync.set).toHaveBeenCalledWith({
+      filters: {
+        prs: true,
+        issues: false,
+        releases: true
+      },
+      notifications: {
+        prs: true,
+        issues: false,
+        releases: true
+      }
+    });
+  });
+
+  test('showOnboarding hides the main feed and exitOnboarding restores it', async () => {
+    _localStorage = {
+      onboarding_state: {
+        currentStep: 0,
+        completed: false,
+        skippedSteps: [],
+        data: {}
+      }
+    };
+
+    document.body.innerHTML = `
+      <header style="display:flex"></header>
+      <div class="toolbar" style="display:flex"></div>
+      <div id="searchBox" style="display:block"></div>
+      <div id="activityList" style="display:block"></div>
+      <div id="onboardingView" class="hidden" style="display:none"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    const loadActivitiesCallback = jest.fn();
+
+    await _showOnboarding(loadActivitiesCallback);
+
+    expect(document.getElementById('onboardingView').style.display).toBe('block');
+    expect(document.getElementById('activityList').style.display).toBe('none');
+    expect(document.querySelector('.toolbar').style.display).toBe('none');
+    expect(document.querySelector('header').style.display).toBe('none');
+
+    _exitOnboarding(loadActivitiesCallback);
+
+    expect(document.getElementById('onboardingView').style.display).toBe('none');
+    expect(document.getElementById('activityList').style.display).toBe('block');
+    expect(document.querySelector('.toolbar').style.display).toBe('flex');
+    expect(document.querySelector('header').style.display).toBe('flex');
+    expect(loadActivitiesCallback).toHaveBeenCalled();
+  });
+
+  test('repos step loads popular repositories and reattaches add buttons', async () => {
+    _localStorage = {
+      githubOAuthClientId: 'Iv1.test-client-id',
+      onboarding_state: {
+        currentStep: 2,
+        completed: false,
+        skippedSteps: [],
+        data: {}
+      }
+    };
+
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      headers: new Map(),
+      json: async () => ({
+        items: [
+          {
+            owner: { login: 'owner' },
+            name: 'repo',
+            description: 'Repository description',
+            language: 'TypeScript',
+            stargazers_count: 5000
+          }
+        ]
+      }),
+      text: async () => ''
+    });
+
+    document.body.innerHTML = `
+      <div id="onboardingView"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    await _renderOnboardingStep();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(document.getElementById('footerSkipBtn').style.display).toBe('block');
+    expect(document.getElementById('repoSuggestions').innerHTML).toContain('owner/repo');
+    expect(document.querySelector('.add-repo-btn').dataset.listenerAttached).toBe('true');
+  });
+
+  test('categories step disables notifications when tracking is turned off', async () => {
+    _localStorage = {
+      onboarding_state: {
+        currentStep: 3,
+        completed: false,
+        skippedSteps: [],
+        data: {
+          categories: {
+            pullRequests: true,
+            pullRequestsNotifications: true
+          }
+        }
+      }
+    };
+
+    document.body.innerHTML = `
+      <div id="onboardingView"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    await _renderOnboardingStep();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const trackToggle = document.getElementById('pullRequests');
+    const notifyToggle = document.getElementById('pullRequestsNotifications');
+    const notifyLabel = notifyToggle.closest('.toggle-label');
+
+    notifyToggle.checked = true;
+    trackToggle.checked = false;
+    trackToggle.dispatchEvent(new Event('change', { bubbles: true }));
+
+    expect(notifyToggle.disabled).toBe(true);
+    expect(notifyToggle.checked).toBe(false);
+    expect(notifyLabel.classList.contains('disabled')).toBe(true);
+  });
+
+  test('navigation buttons move backward and finish onboarding from the shell flow', async () => {
+    _localStorage = {
+      onboarding_state: {
+        currentStep: 2,
+        completed: false,
+        skippedSteps: [],
+        data: {
+          popularRepos: []
+        }
+      }
+    };
+
+    document.body.innerHTML = `
+      <header style="display:none"></header>
+      <div class="toolbar" style="display:none"></div>
+      <div id="activityList" style="display:none"></div>
+      <div id="onboardingView"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    await _renderOnboardingStep();
+    document.getElementById('prevBtn').click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    let storedState = await new Promise((resolve) => {
+      chrome.storage.local.get(['onboarding_state'], (res) => resolve(res.onboarding_state));
+    });
+
+    expect(storedState.currentStep).toBe(1);
+
+    _localStorage.onboarding_state.currentStep = 4;
+    document.body.innerHTML = `
+      <header style="display:none"></header>
+      <div class="toolbar" style="display:none"></div>
+      <div id="activityList" style="display:none"></div>
+      <div id="onboardingView"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    const loadActivitiesCallback = jest.fn();
+    await _renderOnboardingStep(loadActivitiesCallback);
+    document.getElementById('finishBtn').click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    storedState = await new Promise((resolve) => {
+      chrome.storage.local.get(['onboarding_state'], (res) => resolve(res.onboarding_state));
+    });
+
+    expect(storedState.completed).toBe(true);
   });
 });
diff --git a/tests/options-interactions.test.js b/tests/options-interactions.test.js
new file mode 100644
index 0000000..7d4ffc2
--- /dev/null
+++ b/tests/options-interactions.test.js
@@ -0,0 +1,397 @@
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+const mockApplyTheme = jest.fn();
+const mockApplyColorTheme = jest.fn();
+const mockGetSettings = jest.fn();
+const mockGetWatchedRepos = jest.fn();
+const mockUpdateSettings = jest.fn();
+const mockGetAuthSession = jest.fn();
+const mockClearAuthSession = jest.fn();
+const mockSetLocalItem = jest.fn();
+const mockSetWatchedRepos = jest.fn();
+const mockGetAccessToken = jest.fn();
+const mockResolveWatchedRepoInput = jest.fn();
+const mockValidateWatchedRepo = jest.fn();
+const toastInstance = {
+  init: jest.fn(),
+  info: jest.fn(),
+  success: jest.fn(),
+  error: jest.fn(),
+  warning: jest.fn(),
+  show: jest.fn()
+};
+const mockSetupThemeListener = jest.fn();
+const mockApplyStoredConnection = jest.fn();
+const mockClearToken = jest.fn();
+const mockConnectGitHub = jest.fn();
+const mockToggleMuteRepo = jest.fn();
+const mockTogglePinRepo = jest.fn();
+const mockOpenImportModal = jest.fn();
+const mockCloseImportModal = jest.fn();
+const mockFilterImportRepos = jest.fn();
+const mockImportSelectedRepos = jest.fn();
+const mockUpdateSelectedCount = jest.fn();
+const mockExportSettings = jest.fn();
+const mockHandleImportFile = jest.fn();
+const mockRenderSnoozedRepos = jest.fn();
+const mockRenderRepoList = jest.fn();
+
+jest.unstable_mockModule('../shared/utils.js', () => ({
+  applyTheme: mockApplyTheme,
+  applyColorTheme: mockApplyColorTheme,
+  formatDateVerbose: jest.fn((value) => value)
+}));
+
+jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
+  clearAuthSession: mockClearAuthSession,
+  getAuthSession: mockGetAuthSession,
+  getAccessToken: mockGetAccessToken,
+  getSettings: mockGetSettings,
+  getWatchedRepos: mockGetWatchedRepos,
+  setLocalItem: mockSetLocalItem,
+  setWatchedRepos: mockSetWatchedRepos,
+  updateSettings: mockUpdateSettings
+}));
+
+jest.unstable_mockModule('../shared/repo-service.js', () => ({
+  resolveWatchedRepoInput: mockResolveWatchedRepoInput,
+  validateWatchedRepo: mockValidateWatchedRepo
+}));
+
+jest.unstable_mockModule('../shared/ui/notification-manager.js', () => ({
+  NotificationManager: {
+    getInstance: () => toastInstance
+  }
+}));
+
+jest.unstable_mockModule('../options/controllers/theme-controller.js', () => ({
+  setupThemeListener: mockSetupThemeListener
+}));
+
+jest.unstable_mockModule('../options/controllers/token-controller.js', () => ({
+  applyStoredConnection: mockApplyStoredConnection,
+  clearToken: mockClearToken,
+  connectGitHub: mockConnectGitHub
+}));
+
+jest.unstable_mockModule('../options/controllers/repository-controller.js', () => ({
+  toggleMuteRepo: mockToggleMuteRepo,
+  togglePinRepo: mockTogglePinRepo
+}));
+
+jest.unstable_mockModule('../options/controllers/import-controller.js', () => ({
+  openImportModal: mockOpenImportModal,
+  closeImportModal: mockCloseImportModal,
+  filterImportRepos: mockFilterImportRepos,
+  importSelectedRepos: mockImportSelectedRepos,
+  updateSelectedCount: mockUpdateSelectedCount
+}));
+
+jest.unstable_mockModule('../options/controllers/export-import-controller.js', () => ({
+  exportSettings: mockExportSettings,
+  handleImportFile: mockHandleImportFile
+}));
+
+jest.unstable_mockModule('../options/controllers/snooze-controller.js', () => ({
+  renderSnoozedRepos: mockRenderSnoozedRepos
+}));
+
+jest.unstable_mockModule('../options/views/repository-list-view.js', () => ({
+  renderRepoList: mockRenderRepoList
+}));
+
+const {
+  clearAllData,
+  clearCacheData,
+  loadSettings,
+  resetSettings,
+  setupEventListeners,
+  setupTabNavigation,
+  state
+} = await import('../options/options.js');
+
+function renderOptionsDom() {
+  document.body.innerHTML = `
+    <button id="connectGitHubBtn">Connect GitHub</button>
+    <div id="tokenStatus"></div>
+    <button id="clearTokenBtn"></button>
+    <input id="repoInput" />
+    <button id="addRepoBtn"></button>
+    <div id="repoHelpText"></div>
+    <div id="importReposSection"></div>
+    <div id="repoValidationStatus"></div>
+    <div id="repoError"></div>
+    <div id="repoList"></div>
+    <div id="repoCountBadge"></div>
+    <div id="paginationControls"></div>
+    <button id="prevPage"></button>
+    <button id="nextPage"></button>
+    <div id="pageInfo"></div>
+    <input id="repoSearch" />
+    <button id="repoSearchClear"></button>
+    <button id="hidePinnedToggleBtn2"></button>
+
+    <button class="tab-button" data-tab="setup">Setup</button>
+    <button class="tab-button" data-tab="advanced">Advanced</button>
+    <div class="tab-panel" data-tab="setup"></div>
+    <div class="tab-panel" data-tab="advanced"></div>
+    <a class="setup-step clickable" data-tab="advanced"></a>
+
+    <input id="filterPrs" type="checkbox" checked />
+    <input id="filterIssues" type="checkbox" checked />
+    <input id="filterReleases" type="checkbox" checked />
+    <label class="notification-toggle"><input id="notifyPrs" type="checkbox" /></label>
+    <label class="notification-toggle"><input id="notifyIssues" type="checkbox" /></label>
+    <label class="notification-toggle"><input id="notifyReleases" type="checkbox" /></label>
+
+    <input id="theme-light" name="theme" type="radio" value="light" />
+    <input id="theme-dark" name="theme" type="radio" value="dark" />
+    <input id="theme-system" name="theme" type="radio" value="system" />
+    <input id="color-polar" name="colorTheme" type="radio" value="polar" />
+    <input id="color-graphite" name="colorTheme" type="radio" value="graphite" />
+    <input id="color-nightfall" name="colorTheme" type="radio" value="nightfall" />
+    <input id="interval-15" name="checkInterval" type="radio" value="15" />
+    <input id="interval-30" name="checkInterval" type="radio" value="30" />
+    <input id="snooze-1" name="snoozeHours" type="radio" value="1" />
+    <input id="snooze-4" name="snoozeHours" type="radio" value="4" />
+    <input id="itemExpiryEnabled" type="checkbox" />
+    <input id="itemExpiryHours" value="24" />
+    <div id="itemExpiryInputRow" style="display:none"></div>
+    <input id="markReadOnSnooze" type="checkbox" />
+    <input id="allowUnlimitedRepos" type="checkbox" />
+
+    <div id="snoozedReposList"></div>
+    <button id="importWatchedBtn"></button>
+    <button id="importStarredBtn"></button>
+    <button id="importParticipatingBtn"></button>
+    <button id="importMineBtn"></button>
+    <button id="importBtn"></button>
+    <input id="importFileInput" type="file" />
+    <button id="exportBtn"></button>
+    <button id="closeImportModal"></button>
+    <button id="cancelImportBtn"></button>
+    <button id="confirmImportBtn"></button>
+    <input id="selectAllImport" type="checkbox" />
+    <input id="importRepoSearch" />
+    <button id="importSearchClear"></button>
+    <div id="importModal"></div>
+
+    <button id="clearCacheBtn"></button>
+    <button id="clearAllDataBtn"></button>
+    <button id="resetSettingsBtn"></button>
+
+    <div id="versionInfo"></div>
+    <div id="changelogContent"></div>
+  `;
+}
+
+async function fireOptionsLoad() {
+  document.dispatchEvent(new Event('DOMContentLoaded'));
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.clearAllMocks();
+  localStorage.clear();
+  history.replaceState(null, '', '/options/options.html');
+  renderOptionsDom();
+
+  Object.assign(state, {
+    watchedRepos: [],
+    mutedRepos: [],
+    pinnedRepos: [],
+    currentPage: 1,
+    reposPerPage: 10,
+    searchQuery: '',
+    hidePinnedRepos: false
+  });
+
+  mockGetSettings.mockResolvedValue({
+    watchedRepos: [{ fullName: 'facebook/react', description: 'React', language: 'JS' }],
+    mutedRepos: [],
+    snoozedRepos: [],
+    pinnedRepos: ['facebook/react'],
+    filters: { prs: true, issues: true, releases: true },
+    notifications: { prs: true, issues: true, releases: true },
+    checkInterval: 15,
+    snoozeHours: 1,
+    theme: 'dark',
+    colorTheme: 'graphite',
+    itemExpiryHours: 24,
+    markReadOnSnooze: false,
+    allowUnlimitedRepos: false
+  });
+  mockGetWatchedRepos.mockResolvedValue([]);
+  mockGetAuthSession.mockResolvedValue(null);
+  mockGetAccessToken.mockResolvedValue('token');
+  mockUpdateSettings.mockResolvedValue();
+  mockSetLocalItem.mockResolvedValue();
+  mockSetWatchedRepos.mockResolvedValue();
+  mockResolveWatchedRepoInput.mockResolvedValue({
+    valid: true,
+    normalizedRepo: 'facebook/react',
+    record: { fullName: 'facebook/react', description: 'React', language: 'JS' }
+  });
+  mockValidateWatchedRepo.mockResolvedValue({ valid: true });
+  chrome.runtime.sendMessage.mockResolvedValue({});
+  chrome.runtime.getURL = jest.fn((path) => path);
+  chrome.storage.local.clear = jest.fn().mockResolvedValue();
+  chrome.storage.sync.clear = jest.fn().mockResolvedValue();
+  chrome.storage.sync.get = jest.fn().mockResolvedValue({ snoozedRepos: [] });
+  chrome.storage.onChanged = {
+    addListener: jest.fn(),
+    removeListener: jest.fn()
+  };
+  fetch.mockImplementation(async (url) => {
+    if (url === 'manifest.json') {
+      return {
+        json: async () => ({ version: '1.2.3' })
+      };
+    }
+
+    if (url === 'CHANGELOG.md') {
+      return {
+        text: async () => '# Changelog\n\n- Added tests'
+      };
+    }
+
+    return {
+      json: async () => ({}),
+      text: async () => ''
+    };
+  });
+});
+
+describe('options interactions', () => {
+  test('focuses the repository input when showAdd is present on page load', async () => {
+    const repoInput = document.getElementById('repoInput');
+    repoInput.focus = jest.fn();
+    history.replaceState(null, '', '/options/options.html?showAdd=true');
+
+    await fireOptionsLoad();
+    await jest.advanceTimersByTimeAsync(100);
+
+    expect(toastInstance.init).toHaveBeenCalled();
+    expect(mockSetupThemeListener).toHaveBeenCalled();
+    expect(repoInput.focus).toHaveBeenCalled();
+  });
+
+  test('supports keyboard tab navigation and persists the selected tab', () => {
+    const buttons = document.querySelectorAll('.tab-button');
+    buttons[1].focus = jest.fn();
+
+    setupTabNavigation();
+    buttons[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+    expect(buttons[1].classList.contains('active')).toBe(true);
+    expect(buttons[1].focus).toHaveBeenCalled();
+    expect(localStorage.getItem('activeTab')).toBe('advanced');
+    expect(document.querySelector('.tab-panel[data-tab="advanced"]').hidden).toBe(false);
+    expect(document.querySelector('.tab-panel[data-tab="setup"]').hidden).toBe(true);
+  });
+
+  test('search, hide-pinned, and modal close interactions update local state and controller calls', () => {
+    const repoSearch = document.getElementById('repoSearch');
+    const repoSearchClear = document.getElementById('repoSearchClear');
+    repoSearch.focus = jest.fn();
+
+    setupEventListeners();
+
+    repoSearch.value = 'React';
+    repoSearch.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(state.searchQuery).toBe('react');
+    expect(state.currentPage).toBe(1);
+    expect(repoSearchClear.style.display).toBe('flex');
+
+    repoSearchClear.click();
+    expect(state.searchQuery).toBe('');
+    expect(repoSearch.focus).toHaveBeenCalled();
+
+    document.getElementById('hidePinnedToggleBtn2').click();
+    expect(state.hidePinnedRepos).toBe(true);
+
+    document.getElementById('importModal').dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
+    expect(mockCloseImportModal).toHaveBeenCalled();
+  });
+
+  test('persists radio, checkbox, and category dependency changes through updateSettings', async () => {
+    setupEventListeners();
+
+    document.getElementById('theme-dark').checked = true;
+    document.getElementById('theme-dark').dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    document.getElementById('interval-30').checked = true;
+    document.getElementById('interval-30').dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    document.getElementById('itemExpiryEnabled').checked = true;
+    document.getElementById('itemExpiryEnabled').dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    document.getElementById('itemExpiryHours').value = '999';
+    document.getElementById('itemExpiryHours').dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    document.getElementById('notifyPrs').checked = true;
+    document.getElementById('filterPrs').checked = false;
+    document.getElementById('filterPrs').dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    expect(mockUpdateSettings).toHaveBeenCalledWith({ theme: 'dark' });
+    expect(mockApplyTheme).toHaveBeenCalledWith('dark');
+    expect(mockUpdateSettings).toHaveBeenCalledWith({ checkInterval: 30 });
+    expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({ action: 'updateInterval', interval: 30 });
+    expect(mockUpdateSettings).toHaveBeenCalledWith({ itemExpiryHours: 24 });
+    expect(mockUpdateSettings).toHaveBeenCalledWith({ itemExpiryHours: 168 });
+    expect(document.getElementById('itemExpiryHours').value).toBe('168');
+    expect(document.getElementById('notifyPrs').checked).toBe(false);
+    expect(document.getElementById('notifyPrs').disabled).toBe(true);
+    expect(mockUpdateSettings).toHaveBeenCalledWith({
+      filters: { prs: false, issues: true, releases: true },
+      notifications: { prs: false, issues: false, releases: false }
+    });
+  });
+
+  test('loadSettings applies normalized settings to the UI and renders snoozed repos', async () => {
+    mockGetAuthSession.mockResolvedValue({ accessToken: 'stored-token' });
+
+    await loadSettings();
+
+    expect(mockApplyStoredConnection).toHaveBeenCalledWith({ accessToken: 'stored-token' });
+    expect(mockApplyTheme).toHaveBeenCalledWith('dark');
+    expect(mockApplyColorTheme).toHaveBeenCalledWith('graphite');
+    expect(document.getElementById('theme-dark').checked).toBe(true);
+    expect(document.getElementById('color-graphite').checked).toBe(true);
+    expect(document.getElementById('itemExpiryEnabled').checked).toBe(true);
+    expect(document.getElementById('itemExpiryInputRow').style.display).toBe('block');
+    expect(mockRenderSnoozedRepos).toHaveBeenCalledWith([]);
+  });
+
+  test('clears cache data and handles destructive actions', async () => {
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+
+    await clearCacheData();
+    expect(mockSetLocalItem).toHaveBeenCalledWith('activities', []);
+    expect(mockSetLocalItem).toHaveBeenCalledWith('readItems', []);
+    expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({ action: 'clearBadge' });
+
+    global.confirm = jest.fn(() => false);
+    await clearAllData();
+    expect(chrome.storage.local.clear).not.toHaveBeenCalled();
+
+    global.confirm = jest.fn(() => true);
+    await clearAllData();
+    expect(chrome.storage.local.clear).toHaveBeenCalled();
+
+    await resetSettings();
+    expect(mockClearAuthSession).toHaveBeenCalled();
+    expect(chrome.storage.sync.clear).toHaveBeenCalled();
+    expect(chrome.storage.local.clear).toHaveBeenCalledTimes(2);
+    expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 1000);
+
+    setTimeoutSpy.mockRestore();
+  });
+});
diff --git a/tests/options-main.test.js b/tests/options-main.test.js
index a674721..f5d59bc 100644
--- a/tests/options-main.test.js
+++ b/tests/options-main.test.js
@@ -47,6 +47,9 @@ describe('Options Main Functions', () => {
       <input id="theme-light" name="theme" type="radio" value="light" />
       <input id="theme-dark" name="theme" type="radio" value="dark" />
       <input id="theme-system" name="theme" type="radio" value="system" />
+      <input id="color-polar" name="colorTheme" type="radio" value="polar" />
+      <input id="color-graphite" name="colorTheme" type="radio" value="graphite" />
+      <input id="color-nightfall" name="colorTheme" type="radio" value="nightfall" />
       <input id="interval-15" name="checkInterval" type="radio" value="15" />
       <input id="snooze-1" name="snoozeHours" type="radio" value="1" />
       <input id="itemExpiryEnabled" type="checkbox" />
@@ -392,6 +395,35 @@ describe('Options Main Functions', () => {
       expect(document.getElementById('repoInput').disabled).toBe(false);
     });
 
+    test('loadSettings restores the saved color theme selection', async () => {
+      chrome.storage.sync.get.mockImplementation((keys, callback) => {
+        const requestedKeys = Array.isArray(keys) ? keys : [keys];
+        const result = {};
+
+        if (requestedKeys.includes('colorTheme')) {
+          result.colorTheme = 'graphite';
+          result.theme = 'dark';
+        }
+
+        if (requestedKeys.includes('snoozedRepos')) {
+          result.snoozedRepos = [];
+        }
+
+        if (callback) {
+          callback(result);
+          return;
+        }
+
+        return Promise.resolve(result);
+      });
+
+      await loadSettings();
+
+      expect(document.body.getAttribute('data-color-theme')).toBe('graphite');
+      expect(document.getElementById('color-graphite').checked).toBe(true);
+      expect(document.getElementById('color-polar').checked).toBe(false);
+    });
+
     test('setupEventListeners clears persisted auth after the disconnect action succeeds', async () => {
       setupEventListeners();
 
@@ -458,97 +490,44 @@ describe('Options Main Functions', () => {
 
   describe('cleanupRepoNotifications', () => {
     test('removes activities for deleted repository', async () => {
-      const activities = [
-        { id: '1', repo: 'facebook/react', type: 'pr' },
-        { id: '2', repo: 'microsoft/vscode', type: 'issue' },
-        { id: '3', repo: 'facebook/react', type: 'release' }
-      ];
-      const readItems = ['1', '2'];
-
-      global.chrome.storage.local.get = jest.fn((keys, callback) => {
-        callback({ activities, readItems });
-      });
-
       await cleanupRepoNotifications('facebook/react');
 
-      // Verify activities were filtered - should only have vscode activity
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({
-          activities: expect.arrayContaining([
-            expect.objectContaining({ id: '2', repo: 'microsoft/vscode' })
-          ])
-        }),
-        expect.any(Function)
-      );
-
-      // Verify read items for deleted repo activities were removed
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({
-          readItems: ['2']
-        }),
-        expect.any(Function)
-      );
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'facebook/react'
+      });
     });
 
     test('handles empty activities array', async () => {
-      global.chrome.storage.local.get = jest.fn((keys, callback) => {
-        callback({ activities: [], readItems: [] });
-      });
-
       await cleanupRepoNotifications('facebook/react');
 
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({ activities: [] }),
-        expect.any(Function)
-      );
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({ readItems: [] }),
-        expect.any(Function)
-      );
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'facebook/react'
+      });
     });
 
     test('handles missing storage data gracefully', async () => {
-      global.chrome.storage.local.get = jest.fn((keys, callback) => {
-        callback({});
-      });
-
       await cleanupRepoNotifications('facebook/react');
 
-      expect(chrome.storage.local.set).toHaveBeenCalled();
+      expect(chrome.runtime.sendMessage).toHaveBeenCalled();
     });
 
     test('does not throw error when cleanup fails', async () => {
       allowUnexpectedConsole('error');
-      // Mock a Chrome storage error by not calling the callback properly
-      global.chrome.storage.local.get = jest.fn(() => {
-        throw new Error('Storage error');
-      });
+      chrome.runtime.sendMessage.mockRejectedValueOnce(new Error('Storage error'));
 
       // Should not throw - errors are caught internally
       await expect(cleanupRepoNotifications('facebook/react')).resolves.toBeUndefined();
     });
 
     test('removes all read items for deleted repo activities', async () => {
-      const activities = [
-        { id: '1', repo: 'facebook/react', type: 'pr' },
-        { id: '2', repo: 'facebook/react', type: 'issue' },
-        { id: '3', repo: 'microsoft/vscode', type: 'pr' }
-      ];
-      const readItems = ['1', '2', '3'];
-
-      global.chrome.storage.local.get = jest.fn((keys, callback) => {
-        callback({ activities, readItems });
-      });
-
       await cleanupRepoNotifications('facebook/react');
 
-      // Should only keep readItem '3' since that's for vscode
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({
-          readItems: ['3']
-        }),
-        expect.any(Function)
-      );
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'facebook/react'
+      });
     });
   });
 });
diff --git a/tests/options.test.js b/tests/options.test.js
index 1f0a1d9..f2da861 100644
--- a/tests/options.test.js
+++ b/tests/options.test.js
@@ -43,6 +43,9 @@ global.chrome = {
         return Promise.resolve();
       })
     }
+  },
+  runtime: {
+    sendMessage: jest.fn(() => Promise.resolve())
   }
 };
 
@@ -558,104 +561,38 @@ describe('Options Page - Repository Management', () => {
 
   describe('Notification Cleanup', () => {
     test('cleans up activities and read items for removed repository', async () => {
-      const mockActivities = [
-        { id: '1', repo: 'facebook/react', title: 'PR #1: Fix bug' },
-        { id: '2', repo: 'vuejs/vue', title: 'Issue #2: Feature request' },
-        { id: '3', repo: 'facebook/react', title: 'Release v18.0.0' },
-        { id: '4', repo: 'angular/angular', title: 'PR #4: Update docs' }
-      ];
-
-      const mockReadItems = ['1', '3']; // Read items from facebook/react repo
-
-      // Mock chrome.storage.local.get to return the mock data
-      chrome.storage.local.get.mockImplementation((keys, callback) => {
-        if (keys.includes('activities') && keys.includes('readItems')) {
-          callback({ activities: mockActivities, readItems: mockReadItems });
-        } else if (keys.includes('activities')) {
-          callback({ activities: mockActivities });
-        } else if (keys.includes('readItems')) {
-          callback({ readItems: mockReadItems });
-        } else {
-          callback({});
-        }
-      });
-
       await cleanupRepoNotifications('facebook/react');
 
-      // Verify that chrome.storage.local.set was called with filtered data
-      expect(chrome.storage.local.set).toHaveBeenCalledTimes(2);
-
-      // First call should update activities (remove facebook/react activities)
-      const firstCall = chrome.storage.local.set.mock.calls[0][0];
-      expect(firstCall).toHaveProperty('activities');
-      expect(firstCall.activities).toHaveLength(2); // Only 2 activities should remain
-      expect(firstCall.activities.map(a => a.repo)).toEqual(
-        expect.arrayContaining(['vuejs/vue', 'angular/angular'])
-      );
-      expect(firstCall.activities.map(a => a.repo)).not.toContain('facebook/react');
-
-      // Second call should update readItems (remove read items from facebook/react)
-      const secondCall = chrome.storage.local.set.mock.calls[1][0];
-      expect(secondCall).toHaveProperty('readItems');
-      expect(secondCall.readItems).toEqual([]); // All read items should be removed
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'facebook/react'
+      });
     });
 
     test('handles empty storage gracefully', async () => {
-      // Mock empty storage
-      chrome.storage.local.get.mockImplementation((keys, callback) => callback({}));
-
       await cleanupRepoNotifications('nonexistent/repo');
 
-      // Should still call storage.set twice even with empty data
-      expect(chrome.storage.local.set).toHaveBeenCalledTimes(2);
-
-      // Both calls should have empty arrays
-      const firstCall = chrome.storage.local.set.mock.calls[0][0];
-      const secondCall = chrome.storage.local.set.mock.calls[1][0];
-
-      expect(firstCall.activities).toEqual([]);
-      expect(secondCall.readItems).toEqual([]);
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'nonexistent/repo'
+      });
     });
 
     test('handles storage errors gracefully', async () => {
       allowUnexpectedConsole('error');
-      // Mock storage error
-      chrome.storage.local.get.mockImplementation(() => {
-        throw new Error('Storage error');
-      });
+      chrome.runtime.sendMessage.mockRejectedValueOnce(new Error('Storage error'));
 
       // Should not throw an error
       await expect(cleanupRepoNotifications('test/repo')).resolves.toBeUndefined();
     });
 
-    test('does not affect other repositories when removing one', async () => {
-      const mockActivities = [
-        { id: '1', repo: 'repo1/test', title: 'PR #1' },
-        { id: '2', repo: 'repo2/test', title: 'Issue #2' },
-        { id: '3', repo: 'repo3/test', title: 'Release v1.0' }
-      ];
-
-      const mockReadItems = ['1', '2'];
-
-      chrome.storage.local.get.mockImplementation((keys, callback) => {
-        if (keys.includes('activities') && keys.includes('readItems')) {
-          callback({ activities: mockActivities, readItems: mockReadItems });
-        } else {
-          callback({});
-        }
-      });
-
+    test('routes repo-specific cleanup through the background action', async () => {
       await cleanupRepoNotifications('repo2/test');
 
-      const firstCall = chrome.storage.local.set.mock.calls[0][0];
-      expect(firstCall.activities).toHaveLength(2);
-      expect(firstCall.activities.map(a => a.repo)).toEqual(
-        expect.arrayContaining(['repo1/test', 'repo3/test'])
-      );
-      expect(firstCall.activities.map(a => a.repo)).not.toContain('repo2/test');
-
-      const secondCall = chrome.storage.local.set.mock.calls[1][0];
-      expect(secondCall.readItems).toEqual(['1']); // Only item from repo2 should be removed
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'removeRepoData',
+        repo: 'repo2/test'
+      });
     });
   });
 
diff --git a/tests/popup-activity-controller-extra.test.js b/tests/popup-activity-controller-extra.test.js
new file mode 100644
index 0000000..eef50cb
--- /dev/null
+++ b/tests/popup-activity-controller-extra.test.js
@@ -0,0 +1,269 @@
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+const mockGetSyncItem = jest.fn();
+const mockGetFilteringSettings = jest.fn();
+const mockGetExcludedRepos = jest.fn();
+const mockShowError = jest.fn();
+const mockClearError = jest.fn();
+const mockIsOffline = jest.fn();
+const mockShowOfflineStatus = jest.fn();
+const mockGetCachedData = jest.fn();
+const mockCacheForOffline = jest.fn();
+const mockShowCachedActivities = jest.fn();
+const mockSetState = jest.fn();
+const mockFilterVisibleActivities = jest.fn();
+
+jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
+  getSyncItem: mockGetSyncItem,
+  getFilteringSettings: mockGetFilteringSettings,
+  getExcludedRepos: mockGetExcludedRepos
+}));
+
+jest.unstable_mockModule('../shared/error-handler.js', () => ({
+  showError: mockShowError,
+  clearError: mockClearError
+}));
+
+jest.unstable_mockModule('../shared/offline-manager.js', () => ({
+  isOffline: mockIsOffline,
+  showOfflineStatus: mockShowOfflineStatus,
+  getCachedData: mockGetCachedData,
+  cacheForOffline: mockCacheForOffline,
+  showCachedActivities: mockShowCachedActivities
+}));
+
+jest.unstable_mockModule('../shared/state-manager.js', () => ({
+  setState: mockSetState
+}));
+
+jest.unstable_mockModule('../shared/feed-policy.js', () => ({
+  filterVisibleActivities: mockFilterVisibleActivities
+}));
+
+const {
+  handleRefresh,
+  loadActivities,
+  showStoredError,
+  updateLastUpdated,
+  updateRateLimit
+} = await import('../popup/controllers/activity-controller.js');
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.clearAllMocks();
+  document.body.innerHTML = `
+    <div id="activityList"></div>
+    <div id="lastUpdated"></div>
+    <div id="rateLimitInfo"></div>
+    <div id="errorMessage"></div>
+    <button id="refreshBtn"></button>
+  `;
+
+  chrome.storage.local.get.mockResolvedValue({
+    activities: [],
+    readItems: [],
+    collapsedRepos: [],
+    rateLimit: null,
+    lastError: null
+  });
+  chrome.storage.sync.get.mockResolvedValue({
+    lastCheck: '2025-01-15T10:30:00.000Z'
+  });
+  chrome.runtime.sendMessage.mockResolvedValue({});
+
+  mockGetSyncItem.mockResolvedValue([]);
+  mockGetFilteringSettings.mockResolvedValue({
+    mutedRepos: [],
+    snoozedRepos: [],
+    pinnedRepos: []
+  });
+  mockGetExcludedRepos.mockReturnValue(new Set());
+  mockIsOffline.mockReturnValue(false);
+  mockSetState.mockResolvedValue();
+  mockFilterVisibleActivities.mockImplementation((activities) => activities);
+  mockGetCachedData.mockResolvedValue(null);
+  mockCacheForOffline.mockResolvedValue();
+});
+
+describe('popup activity controller coverage', () => {
+  test('loads cached activities while offline', async () => {
+    const cachedActivities = [{ id: '1', repo: 'facebook/react' }];
+    const filteredActivities = [{ id: 'visible', repo: 'facebook/react' }];
+    const renderActivities = jest.fn();
+
+    mockIsOffline.mockReturnValue(true);
+    mockGetCachedData
+      .mockResolvedValueOnce(cachedActivities)
+      .mockResolvedValueOnce(['1']);
+    mockFilterVisibleActivities.mockReturnValue(filteredActivities);
+    mockGetFilteringSettings.mockResolvedValue({
+      mutedRepos: ['muted/repo'],
+      snoozedRepos: [{ repo: 'snoozed/repo', expiresAt: Date.now() + 1000 }],
+      pinnedRepos: ['facebook/react']
+    });
+
+    await loadActivities(renderActivities);
+
+    expect(mockShowOfflineStatus).toHaveBeenCalledWith('errorMessage', true);
+    expect(mockSetState).toHaveBeenCalledWith({
+      allActivities: filteredActivities,
+      readItems: ['1'],
+      pinnedRepos: ['facebook/react'],
+      collapsedRepos: new Set()
+    }, { persist: false });
+    expect(mockShowCachedActivities).toHaveBeenCalledWith(filteredActivities);
+    expect(renderActivities).toHaveBeenCalled();
+  });
+
+  test('shows an offline empty state when no cached activities exist', async () => {
+    const renderActivities = jest.fn();
+    mockIsOffline.mockReturnValue(true);
+    mockGetCachedData
+      .mockResolvedValueOnce(null)
+      .mockResolvedValueOnce(null);
+
+    await loadActivities(renderActivities);
+
+    expect(document.getElementById('activityList').textContent).toContain('No cached data available');
+    expect(renderActivities).not.toHaveBeenCalled();
+  });
+
+  test('surfaces cached data loading failures', async () => {
+    const renderActivities = jest.fn();
+    const error = new Error('cache unavailable');
+    mockIsOffline.mockReturnValue(true);
+    mockGetCachedData.mockRejectedValue(error);
+
+    await loadActivities(renderActivities);
+
+    expect(document.getElementById('activityList').textContent).toContain('Unable to load cached data');
+    expect(mockShowError).toHaveBeenCalledWith(
+      'errorMessage',
+      error,
+      null,
+      { action: 'load cached activities' },
+      0
+    );
+  });
+
+  test('loads and caches filtered activities while online', async () => {
+    const renderActivities = jest.fn();
+    const filteredActivities = [{ id: '2', repo: 'vuejs/core' }];
+    const lastError = {
+      message: 'GitHub rate limit warning',
+      repo: 'vuejs/core',
+      timestamp: Date.now()
+    };
+    const futureReset = Date.now() + 5 * 60000;
+
+    chrome.storage.local.get.mockResolvedValue({
+      activities: [{ id: '1', repo: 'muted/repo' }, { id: '2', repo: 'vuejs/core' }],
+      readItems: ['2'],
+      rateLimit: {
+        remaining: 500,
+        limit: 5000,
+        reset: futureReset
+      },
+      lastError,
+      collapsedRepos: ['vuejs/core']
+    });
+    mockGetFilteringSettings.mockResolvedValue({
+      mutedRepos: ['muted/repo'],
+      snoozedRepos: [],
+      pinnedRepos: ['vuejs/core']
+    });
+    mockGetSyncItem.mockResolvedValue(['vuejs/core']);
+    mockFilterVisibleActivities.mockReturnValue(filteredActivities);
+
+    await loadActivities(renderActivities);
+
+    expect(mockShowOfflineStatus).toHaveBeenCalledWith('errorMessage', false);
+    expect(mockClearError).toHaveBeenCalledWith('errorMessage');
+    expect(mockSetState).toHaveBeenCalledWith({
+      allActivities: filteredActivities,
+      readItems: ['2'],
+      pinnedRepos: ['vuejs/core'],
+      collapsedRepos: new Set(['vuejs/core'])
+    });
+    expect(mockCacheForOffline).toHaveBeenCalledWith('activities_cache', filteredActivities, 3600000);
+    expect(mockCacheForOffline).toHaveBeenCalledWith('readItems_cache', ['2'], 3600000);
+    expect(renderActivities).toHaveBeenCalled();
+    expect(document.getElementById('rateLimitInfo').textContent).toContain('500/5000');
+    expect(document.getElementById('rateLimitInfo').textContent).toContain('resets in');
+    expect(document.getElementById('lastUpdated').textContent).toMatch(/Updated \d{1,2}:\d{2}/);
+    expect(mockShowError).toHaveBeenCalledWith(
+      'errorMessage',
+      expect.any(Error),
+      null,
+      { repo: 'vuejs/core' },
+      10000
+    );
+  });
+
+  test('skips replacing the loading UI when skipLoadingIndicator is enabled', async () => {
+    const renderActivities = jest.fn();
+    document.getElementById('activityList').innerHTML = '<div>Existing feed</div>';
+
+    await loadActivities(renderActivities, { skipLoadingIndicator: true });
+
+    expect(document.getElementById('activityList').innerHTML).toBe('<div>Existing feed</div>');
+    expect(renderActivities).toHaveBeenCalled();
+  });
+
+  test('handles refresh failures and restores the button state', async () => {
+    const loadCallback = jest.fn();
+    const error = new Error('refresh failed');
+    chrome.runtime.sendMessage.mockRejectedValue(error);
+
+    await handleRefresh(loadCallback);
+
+    expect(mockClearError).toHaveBeenCalledWith('errorMessage');
+    expect(mockShowError).toHaveBeenCalledWith(
+      'errorMessage',
+      error,
+      null,
+      { action: 'refresh activities' },
+      5000
+    );
+    expect(loadCallback).not.toHaveBeenCalled();
+    expect(document.getElementById('refreshBtn').disabled).toBe(false);
+    expect(document.getElementById('refreshBtn').classList.contains('spinning')).toBe(false);
+    expect(document.getElementById('refreshBtn').classList.contains('refresh-complete')).toBe(true);
+
+    await jest.advanceTimersByTimeAsync(400);
+    expect(document.getElementById('refreshBtn').classList.contains('refresh-complete')).toBe(false);
+  });
+
+  test('passes skipLoadingIndicator when refresh succeeds', async () => {
+    const loadCallback = jest.fn().mockResolvedValue();
+
+    await handleRefresh(loadCallback);
+
+    expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({ action: 'checkNow' });
+    expect(loadCallback).toHaveBeenCalledWith({ skipLoadingIndicator: true });
+  });
+
+  test('shows Never updated when no lastCheck exists', async () => {
+    chrome.storage.sync.get.mockResolvedValue({ lastCheck: null });
+
+    await updateLastUpdated();
+
+    expect(document.getElementById('lastUpdated').textContent).toBe('Never updated');
+  });
+
+  test('clears stale stored errors instead of showing them', () => {
+    showStoredError({
+      message: 'stale',
+      timestamp: Date.now() - 61000
+    });
+
+    expect(mockClearError).toHaveBeenCalledWith('errorMessage');
+    expect(mockShowError).not.toHaveBeenCalled();
+  });
+
+  test('hides the rate limit footer when the budget is healthy', () => {
+    updateRateLimit({ remaining: 2000, limit: 5000 });
+
+    expect(document.getElementById('rateLimitInfo').style.display).toBe('none');
+  });
+});
diff --git a/tests/popup-activity-list-view.test.js b/tests/popup-activity-list-view.test.js
index 6d67b46..d63ad7e 100644
--- a/tests/popup-activity-list-view.test.js
+++ b/tests/popup-activity-list-view.test.js
@@ -37,20 +37,22 @@ global.chrome = {
 let mockState = {
   showArchive: false,
   searchQuery: '',
-  readItems: []
+  readItems: [],
+  allActivities: []
 };
 
 let mockFilteredActivities = [];
+const mockSetState = jest.fn((updates) => {
+  mockState = { ...mockState, ...updates };
+  return Promise.resolve();
+});
 
 jest.unstable_mockModule('../shared/state-manager.js', () => ({
   stateManager: {
     getFilteredActivities: jest.fn(() => mockFilteredActivities)
   },
   useState: jest.fn(() => mockState),
-  setState: jest.fn((updates) => {
-    mockState = { ...mockState, ...updates };
-    return Promise.resolve();
-  })
+  setState: mockSetState
 }));
 
 // Mock error handler
@@ -76,9 +78,11 @@ describe('Activity List View', () => {
     mockState = {
       showArchive: false,
       searchQuery: '',
-      readItems: []
+      readItems: [],
+      allActivities: []
     };
     mockFilteredActivities = [];
+    mockSetState.mockClear();
 
     // Reset the global getElementById mock
     mockGetElementById.mockImplementation((id) => {
@@ -706,5 +710,65 @@ describe('Activity List View', () => {
         );
       }).not.toThrow();
     });
+
+    test('clear archive removes archived items instead of making them unread again', async () => {
+      const mockRenderer = {
+        render: jest.fn(),
+        lastRenderedData: null
+      };
+
+      let buttonCallCount = 0;
+      const originalButton = {
+        addEventListener: jest.fn(),
+        cloneNode: jest.fn()
+      };
+      const newButton = {
+        addEventListener: jest.fn(),
+        cloneNode: jest.fn()
+      };
+      originalButton.cloneNode.mockReturnValue(newButton);
+      originalButton.replaceWith = jest.fn();
+
+      document.getElementById = jest.fn((id) => {
+        if (id === 'activityList') return mockList;
+        if (id === 'clearArchiveBtn') {
+          buttonCallCount++;
+          return buttonCallCount === 1 ? originalButton : newButton;
+        }
+        return null;
+      });
+
+      mockState.showArchive = true;
+      mockState.readItems = ['archived-1'];
+      mockState.allActivities = [
+        { id: 'archived-1', repo: 'facebook/react', type: 'pr' },
+        { id: 'unread-1', repo: 'vuejs/vue', type: 'issue' }
+      ];
+      mockFilteredActivities = [
+        { id: 'archived-1', repo: 'facebook/react', type: 'pr' }
+      ];
+      const mockClearArchive = jest.fn();
+
+      renderActivities(
+        mockRenderer,
+        new Set(),
+        [],
+        jest.fn(),
+        jest.fn(),
+        jest.fn(),
+        jest.fn(),
+        mockClearArchive,
+        jest.fn(),
+        jest.fn(),
+        jest.fn()
+      );
+
+      const clearHandler = newButton.addEventListener.mock.calls.find(([eventName]) => eventName === 'click')?.[1];
+      expect(clearHandler).toBeDefined();
+
+      await clearHandler();
+
+      expect(mockClearArchive).toHaveBeenCalled();
+    });
   });
 });
diff --git a/tests/popup-bootstrap.test.js b/tests/popup-bootstrap.test.js
new file mode 100644
index 0000000..62c2249
--- /dev/null
+++ b/tests/popup-bootstrap.test.js
@@ -0,0 +1,346 @@
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+const mockApplyTheme = jest.fn();
+const mockApplyColorTheme = jest.fn();
+const mockGetSyncItem = jest.fn();
+const mockGetWatchedRepos = jest.fn();
+const mockShowError = jest.fn();
+const mockIsOffline = jest.fn();
+const mockShowOfflineStatus = jest.fn();
+const mockSetupOfflineListeners = jest.fn();
+const mockStateManagerInitialize = jest.fn();
+const mockSetState = jest.fn();
+const mockUseState = jest.fn();
+const mockSubscribe = jest.fn();
+const mockRendererCtor = jest.fn();
+const mockOnboardingIsInOnboarding = jest.fn();
+const mockOnboardingComplete = jest.fn();
+const mockLoadActivitiesController = jest.fn();
+const mockHandleRefreshController = jest.fn();
+const mockClearArchiveController = jest.fn();
+const mockToggleRepoCollapseController = jest.fn();
+const mockTogglePinRepoController = jest.fn();
+const mockSnoozeRepoController = jest.fn();
+const mockSnoozeRepoWithAnimationController = jest.fn();
+const mockMarkAsRead = jest.fn();
+const mockMarkAsReadWithAnimation = jest.fn();
+const mockMarkRepoAsRead = jest.fn();
+const mockHandleMarkAllReadController = jest.fn();
+const mockHandleCollapseAllController = jest.fn();
+const mockSetupKeyboardNavigationController = jest.fn();
+const mockUpdateFilterButtonAria = jest.fn();
+const mockRenderActivitiesView = jest.fn();
+const mockShowOnboarding = jest.fn();
+const mockExitOnboarding = jest.fn();
+const mockToggleDarkMode = jest.fn();
+const mockUpdateDarkModeIcon = jest.fn();
+
+let subscribedCallback = null;
+
+const popupState = {
+  allActivities: [],
+  currentFilter: 'all',
+  searchQuery: '',
+  showArchive: false,
+  readItems: [],
+  collapsedRepos: new Set(),
+  pinnedRepos: []
+};
+
+jest.unstable_mockModule('../shared/utils.js', () => ({
+  applyTheme: mockApplyTheme,
+  applyColorTheme: mockApplyColorTheme
+}));
+
+jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
+  getSyncItem: mockGetSyncItem,
+  getWatchedRepos: mockGetWatchedRepos
+}));
+
+jest.unstable_mockModule('../shared/error-handler.js', () => ({
+  showError: mockShowError
+}));
+
+jest.unstable_mockModule('../shared/offline-manager.js', () => ({
+  isOffline: mockIsOffline,
+  showOfflineStatus: mockShowOfflineStatus,
+  setupOfflineListeners: mockSetupOfflineListeners
+}));
+
+jest.unstable_mockModule('../shared/state-manager.js', () => ({
+  stateManager: {
+    initialize: mockStateManagerInitialize,
+    getFilteredActivities: jest.fn(() => [])
+  },
+  useState: mockUseState,
+  setState: mockSetState,
+  subscribe: mockSubscribe
+}));
+
+jest.unstable_mockModule('../shared/dom-optimizer.js', () => ({
+  ActivityListRenderer: class {
+    constructor(element) {
+      this.element = element;
+      mockRendererCtor(element);
+    }
+  }
+}));
+
+jest.unstable_mockModule('../shared/onboarding.js', () => ({
+  OnboardingManager: class {
+    async isInOnboarding() {
+      return mockOnboardingIsInOnboarding();
+    }
+
+    async completeOnboarding() {
+      return mockOnboardingComplete();
+    }
+  }
+}));
+
+jest.unstable_mockModule('../popup/controllers/activity-controller.js', () => ({
+  loadActivities: mockLoadActivitiesController,
+  handleRefresh: mockHandleRefreshController
+}));
+
+jest.unstable_mockModule('../popup/controllers/repository-controller.js', () => ({
+  clearArchive: mockClearArchiveController,
+  toggleRepoCollapse: mockToggleRepoCollapseController,
+  togglePinRepo: mockTogglePinRepoController,
+  snoozeRepo: mockSnoozeRepoController,
+  snoozeRepoWithAnimation: mockSnoozeRepoWithAnimationController,
+  markAsRead: mockMarkAsRead,
+  markAsReadWithAnimation: mockMarkAsReadWithAnimation,
+  markRepoAsRead: mockMarkRepoAsRead,
+  handleMarkAllRead: mockHandleMarkAllReadController,
+  handleCollapseAll: mockHandleCollapseAllController
+}));
+
+jest.unstable_mockModule('../popup/controllers/keyboard-controller.js', () => ({
+  setupKeyboardNavigation: mockSetupKeyboardNavigationController,
+  updateFilterButtonAria: mockUpdateFilterButtonAria
+}));
+
+jest.unstable_mockModule('../popup/views/activity-list-view.js', () => ({
+  renderActivities: mockRenderActivitiesView
+}));
+
+jest.unstable_mockModule('../popup/views/onboarding-view.js', () => ({
+  showOnboarding: mockShowOnboarding,
+  exitOnboarding: mockExitOnboarding
+}));
+
+jest.unstable_mockModule('../popup/controllers/theme-controller.js', () => ({
+  toggleDarkMode: mockToggleDarkMode,
+  updateDarkModeIcon: mockUpdateDarkModeIcon
+}));
+
+function renderPopupDom() {
+  document.body.innerHTML = `
+    <header style="display:none"></header>
+    <div class="toolbar" style="display:none"></div>
+    <div id="activityList" style="display:none"></div>
+    <div id="errorMessage"></div>
+    <div id="searchBox" class="hidden"></div>
+    <button id="refreshBtn"></button>
+    <button id="darkModeBtn"></button>
+    <button id="settingsLink"></button>
+    <button id="helpBtn"></button>
+    <button id="footerSkipBtn"></button>
+    <button id="searchBtn"></button>
+    <button id="archiveBtn"></button>
+    <input id="searchInput" />
+    <div id="repoCount"></div>
+    <button class="filter-btn active" data-type="all">All</button>
+    <button class="filter-btn" data-type="pr">PRs</button>
+  `;
+}
+
+async function firePopupLoad() {
+  const { initializePopup } = await import('../popup/popup.js');
+  await initializePopup();
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+beforeEach(async () => {
+  jest.useFakeTimers();
+  jest.clearAllMocks();
+  jest.resetModules();
+  subscribedCallback = null;
+  Object.assign(popupState, {
+    allActivities: [],
+    currentFilter: 'all',
+    searchQuery: '',
+    showArchive: false,
+    readItems: [],
+    collapsedRepos: new Set(),
+    pinnedRepos: []
+  });
+
+  renderPopupDom();
+
+  mockGetSyncItem.mockImplementation(async (key, defaultValue) => {
+    if (key === 'theme') {
+      return 'dark';
+    }
+
+    if (key === 'colorTheme') {
+      return 'graphite';
+    }
+
+    return defaultValue;
+  });
+  mockGetWatchedRepos.mockResolvedValue([{ fullName: 'facebook/react' }, { fullName: 'vuejs/core' }]);
+  mockIsOffline.mockReturnValue(false);
+  mockStateManagerInitialize.mockResolvedValue();
+  mockUseState.mockImplementation(() => popupState);
+  mockSubscribe.mockImplementation((callback) => {
+    subscribedCallback = callback;
+    return jest.fn();
+  });
+  mockOnboardingIsInOnboarding.mockResolvedValue(false);
+  mockOnboardingComplete.mockResolvedValue();
+  mockLoadActivitiesController.mockResolvedValue();
+  mockHandleRefreshController.mockResolvedValue();
+  mockClearArchiveController.mockResolvedValue();
+  mockToggleRepoCollapseController.mockResolvedValue();
+  mockTogglePinRepoController.mockResolvedValue();
+  mockSnoozeRepoController.mockResolvedValue();
+  mockSnoozeRepoWithAnimationController.mockResolvedValue();
+  mockMarkAsRead.mockResolvedValue();
+  mockMarkAsReadWithAnimation.mockResolvedValue();
+  mockMarkRepoAsRead.mockResolvedValue();
+  mockHandleMarkAllReadController.mockResolvedValue();
+  mockHandleCollapseAllController.mockResolvedValue();
+
+  chrome.runtime.openOptionsPage = jest.fn();
+  chrome.tabs.create = jest.fn();
+  chrome.storage.sync.set = jest.fn((items, callback) => {
+    callback?.();
+    return Promise.resolve();
+  });
+});
+
+describe('popup bootstrap integration', () => {
+  test('initializes the main popup flow on DOMContentLoaded', async () => {
+    await firePopupLoad();
+    await jest.advanceTimersByTimeAsync(50);
+
+    expect(mockStateManagerInitialize).toHaveBeenCalled();
+    expect(mockRendererCtor).toHaveBeenCalledWith(document.getElementById('activityList'));
+    expect(mockSubscribe).toHaveBeenCalled();
+    expect(mockLoadActivitiesController).toHaveBeenCalledWith(expect.any(Function), {});
+    expect(mockSetupKeyboardNavigationController).toHaveBeenCalled();
+    expect(mockSetupOfflineListeners).toHaveBeenCalled();
+    expect(document.querySelector('header').style.display).toBe('flex');
+    expect(document.querySelector('.toolbar').style.display).toBe('flex');
+    expect(document.getElementById('activityList').style.display).toBe('block');
+    expect(document.getElementById('footerSkipBtn').classList.contains('hidden')).toBe(true);
+    expect(document.getElementById('repoCount').textContent).toBe('Watching 2 repos');
+    expect(mockApplyTheme).toHaveBeenCalledWith('dark');
+    expect(mockApplyColorTheme).toHaveBeenCalledWith('graphite');
+    expect(mockUpdateDarkModeIcon).toHaveBeenCalled();
+  });
+
+  test('shows onboarding instead of loading activities when setup is incomplete', async () => {
+    mockOnboardingIsInOnboarding.mockResolvedValue(true);
+
+    await firePopupLoad();
+
+    expect(mockShowOnboarding).toHaveBeenCalledWith(expect.any(Function));
+    expect(mockLoadActivitiesController).not.toHaveBeenCalled();
+  });
+
+  test('wires toolbar and filter interactions after initialization', async () => {
+    await firePopupLoad();
+
+    document.getElementById('settingsLink').click();
+    document.getElementById('helpBtn').click();
+    document.getElementById('darkModeBtn').click();
+
+    const searchInput = document.getElementById('searchInput');
+    searchInput.value = 'MiXeD';
+    searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+    document.querySelector('[data-type="pr"]').click();
+
+    expect(chrome.runtime.openOptionsPage).toHaveBeenCalled();
+    expect(chrome.tabs.create).toHaveBeenCalledWith({
+      url: 'https://github.com/jonmartin721/devwatch-github#readme'
+    });
+    expect(mockToggleDarkMode).toHaveBeenCalled();
+    expect(mockSetState).toHaveBeenCalledWith({ searchQuery: 'mixed' });
+    expect(mockSetState).toHaveBeenCalledWith({ currentFilter: 'pr' });
+    expect(document.querySelector('[data-type="pr"]').classList.contains('active')).toBe(true);
+  });
+
+  test('re-renders only for relevant subscribed state changes', async () => {
+    await firePopupLoad();
+    mockRenderActivitiesView.mockClear();
+
+    const previousState = {
+      ...popupState,
+      collapsedRepos: new Set(),
+      pinnedRepos: []
+    };
+
+    subscribedCallback(
+      {
+        ...previousState,
+        searchQuery: 'react'
+      },
+      previousState
+    );
+
+    expect(mockRenderActivitiesView).toHaveBeenCalledTimes(1);
+
+    mockRenderActivitiesView.mockClear();
+    subscribedCallback(
+      {
+        ...previousState,
+        someOtherKey: 'ignored'
+      },
+      previousState
+    );
+
+    expect(mockRenderActivitiesView).not.toHaveBeenCalled();
+  });
+
+  test('handles offline callbacks and refresh override', async () => {
+    await firePopupLoad();
+
+    const [onlineCallback, offlineCallback] = mockSetupOfflineListeners.mock.calls[0];
+    offlineCallback();
+    expect(mockShowOfflineStatus).toHaveBeenCalledWith('errorMessage', true);
+
+    onlineCallback();
+    expect(mockShowOfflineStatus).toHaveBeenCalledWith('errorMessage', false);
+    await jest.advanceTimersByTimeAsync(1000);
+    expect(mockLoadActivitiesController).toHaveBeenCalledTimes(2);
+
+    mockIsOffline.mockReturnValue(true);
+    await window.handleRefresh();
+    expect(mockShowError).toHaveBeenCalledWith(
+      'errorMessage',
+      expect.any(Error),
+      null,
+      { action: 'refresh activities' },
+      3000
+    );
+
+    mockIsOffline.mockReturnValue(false);
+    await window.handleRefresh();
+    expect(mockHandleRefreshController).toHaveBeenCalled();
+  });
+
+  test('footer skip button completes onboarding and exits back to the feed', async () => {
+    await firePopupLoad();
+
+    document.getElementById('footerSkipBtn').click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(mockOnboardingComplete).toHaveBeenCalled();
+  });
+});
diff --git a/tests/popup-repository-controller.test.js b/tests/popup-repository-controller.test.js
index 758b115..4a63047 100644
--- a/tests/popup-repository-controller.test.js
+++ b/tests/popup-repository-controller.test.js
@@ -3,24 +3,31 @@ import { jest, describe, test, beforeEach, expect } from '@jest/globals';
 // Mock state manager
 let mockState = {
   readItems: [],
-  allActivities: []
+  allActivities: [],
+  pinnedRepos: [],
+  collapsedRepos: new Set()
 };
+const mockSetState = jest.fn((updates) => {
+  mockState = { ...mockState, ...updates };
+  return Promise.resolve();
+});
 
 jest.unstable_mockModule('../shared/state-manager.js', () => ({
+  stateManager: {
+    getFilteredActivities: jest.fn(() => mockState.allActivities)
+  },
   useState: jest.fn(() => mockState),
-  setState: jest.fn((updates) => {
-    mockState = { ...mockState, ...updates };
-    return Promise.resolve();
-  })
+  setState: mockSetState
 }));
 
 // Mock error handler
+const mockShowError = jest.fn();
 jest.unstable_mockModule('../shared/error-handler.js', () => ({
-  showError: jest.fn()
+  showError: mockShowError
 }));
 
-// Mock activity-item-view
-jest.unstable_mockModule('../popup/views/activity-item-view.js', () => ({
+// Mock feed presentation helpers
+jest.unstable_mockModule('../shared/feed-presentation.js', () => ({
   groupByRepo: jest.fn((activities) => {
     const grouped = {};
     activities.forEach(a => {
@@ -49,8 +56,12 @@ describe('Repository Controller', () => {
     jest.clearAllMocks();
     mockState = {
       readItems: [],
-      allActivities: []
+      allActivities: [],
+      pinnedRepos: [],
+      collapsedRepos: new Set()
     };
+    mockSetState.mockClear();
+    mockShowError.mockClear();
 
     global.chrome = {
       storage: {
@@ -81,7 +92,7 @@ describe('Repository Controller', () => {
 
     await toggleRepoCollapse('owner/repo', collapsedRepos, mockRender);
 
-    expect(chrome.storage.local.set).toHaveBeenCalled();
+    expect(mockState.collapsedRepos).toEqual(new Set(['owner/repo']));
     expect(mockRender).toHaveBeenCalled();
   });
 
@@ -92,7 +103,7 @@ describe('Repository Controller', () => {
 
     await togglePinRepo('owner/repo', pinnedRepos, mockSetPinned, mockRender);
 
-    expect(chrome.storage.sync.set).toHaveBeenCalled();
+    expect(mockState.pinnedRepos).toEqual(['owner/repo']);
     expect(mockSetPinned).toHaveBeenCalled();
   });
 
@@ -101,87 +112,22 @@ describe('Repository Controller', () => {
 
     await snoozeRepo('owner/repo', mockLoad);
 
-    expect(chrome.storage.sync.set).toHaveBeenCalled();
+    expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+      action: 'snoozeRepo',
+      repo: 'owner/repo'
+    });
     expect(mockLoad).toHaveBeenCalled();
   });
 
   test('handleMarkAllRead sends message to background', async () => {
+    mockState.allActivities = [{ id: '1', repo: 'owner/repo' }];
     const mockRender = jest.fn();
 
     await handleMarkAllRead(mockRender);
 
     expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
-      action: 'markAllAsRead'
-    });
-  });
-
-  describe('snoozeRepo - advanced', () => {
-    beforeEach(() => {
-      mockState = { readItems: [], allActivities: [] };
-      chrome.storage.local.get = jest.fn(() => Promise.resolve({ activities: [], readItems: [] }));
-    });
-
-    test('updates existing snooze time if repo already snoozed', async () => {
-      const existingSnoozedRepos = [
-        { repo: 'owner/repo', expiresAt: Date.now() + 1000 }
-      ];
-
-      chrome.storage.sync.get = jest.fn(() => Promise.resolve({
-        snoozeHours: 2,
-        snoozedRepos: existingSnoozedRepos,
-        markReadOnSnooze: false
-      }));
-
-      const mockLoad = jest.fn();
-      await snoozeRepo('owner/repo', mockLoad);
-
-      expect(chrome.storage.sync.set).toHaveBeenCalledWith(
-        expect.objectContaining({
-          snoozedRepos: expect.arrayContaining([
-            expect.objectContaining({ repo: 'owner/repo' })
-          ])
-        })
-      );
-    });
-
-    test('marks repo items as read when markReadOnSnooze is enabled', async () => {
-      chrome.storage.sync.get = jest.fn(() => Promise.resolve({
-        snoozeHours: 1,
-        snoozedRepos: [],
-        markReadOnSnooze: true
-      }));
-
-      const activities = [
-        { id: 'id-1', repo: 'owner/repo' },
-        { id: 'id-2', repo: 'owner/repo' },
-        { id: 'id-3', repo: 'other/repo' }
-      ];
-
-      chrome.storage.local.get = jest.fn(() => Promise.resolve({ activities, readItems: [] }));
-
-      const mockLoad = jest.fn();
-      await snoozeRepo('owner/repo', mockLoad);
-
-      expect(chrome.storage.local.set).toHaveBeenCalledWith(
-        expect.objectContaining({
-          readItems: expect.arrayContaining(['id-1', 'id-2'])
-        })
-      );
-    });
-
-    test('does not mark items as read when markReadOnSnooze is disabled', async () => {
-      chrome.storage.sync.get = jest.fn(() => Promise.resolve({
-        snoozeHours: 1,
-        snoozedRepos: [],
-        markReadOnSnooze: false
-      }));
-
-      const mockLoad = jest.fn();
-      await snoozeRepo('owner/repo', mockLoad);
-
-      // Should not call local.set for readItems
-      const localSetCalls = chrome.storage.local.set.mock.calls;
-      expect(localSetCalls.length).toBe(0);
+      action: 'markActivitiesAsRead',
+      ids: ['1']
     });
   });
 
@@ -257,9 +203,7 @@ describe('Repository Controller', () => {
       expect(mockElement.classList.add).toHaveBeenCalledWith('removing');
 
       // Fast-forward time and flush all promises
-      jest.runAllTimers();
-      await Promise.resolve();
-      await Promise.resolve();
+      await jest.runAllTimersAsync();
 
       expect(mockRender).toHaveBeenCalled();
     });
@@ -299,9 +243,7 @@ describe('Repository Controller', () => {
       expect(mockActivities.classList.add).toHaveBeenCalledWith('removing');
 
       // Fast-forward time and flush all promises
-      jest.runAllTimers();
-      await Promise.resolve();
-      await Promise.resolve();
+      await jest.runAllTimersAsync();
 
       expect(mockLoad).toHaveBeenCalled();
     });
@@ -320,10 +262,10 @@ describe('Repository Controller', () => {
 
       await handleCollapseAll(collapsedRepos, mockRender);
 
-      expect(collapsedRepos.size).toBe(3);
-      expect(collapsedRepos.has('repo1')).toBe(true);
-      expect(collapsedRepos.has('repo2')).toBe(true);
-      expect(collapsedRepos.has('repo3')).toBe(true);
+      expect(mockState.collapsedRepos.size).toBe(3);
+      expect(mockState.collapsedRepos.has('repo1')).toBe(true);
+      expect(mockState.collapsedRepos.has('repo2')).toBe(true);
+      expect(mockState.collapsedRepos.has('repo3')).toBe(true);
       expect(mockRender).toHaveBeenCalled();
     });
 
@@ -338,7 +280,7 @@ describe('Repository Controller', () => {
 
       await handleCollapseAll(collapsedRepos, mockRender);
 
-      expect(collapsedRepos.size).toBe(0);
+      expect(mockState.collapsedRepos.size).toBe(0);
       expect(mockRender).toHaveBeenCalled();
     });
   });
@@ -356,8 +298,10 @@ describe('Repository Controller', () => {
 
       await markRepoAsRead('owner/repo', mockRender);
 
-      // Should have sent two markAsRead messages
-      expect(chrome.runtime.sendMessage).toHaveBeenCalledTimes(2);
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'markRepoAsRead',
+        repo: 'owner/repo'
+      });
       expect(mockRender).toHaveBeenCalled();
     });
 
@@ -387,14 +331,16 @@ describe('Repository Controller', () => {
 
       await markRepoAsRead('owner/repo', mockRender);
 
-      // Should only mark items 1 and 3 as read (not 2, which is already read)
-      expect(chrome.runtime.sendMessage).toHaveBeenCalledTimes(2);
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
+        action: 'markRepoAsRead',
+        repo: 'owner/repo'
+      });
     });
   });
 
   describe('togglePinRepo - error handling', () => {
     test('handles errors when pinning', async () => {
-      chrome.storage.sync.set = jest.fn(() => Promise.reject(new Error('Storage error')));
+      mockSetState.mockRejectedValueOnce(new Error('Storage error'));
 
       const pinnedRepos = [];
       const mockSetPinned = jest.fn();
@@ -402,7 +348,7 @@ describe('Repository Controller', () => {
 
       await togglePinRepo('owner/repo', pinnedRepos, mockSetPinned, mockRender);
 
-      // Should not throw, error should be handled
+      expect(mockShowError).toHaveBeenCalled();
       expect(mockSetPinned).not.toHaveBeenCalled();
     });
 
@@ -413,9 +359,7 @@ describe('Repository Controller', () => {
 
       await togglePinRepo('owner/repo', pinnedRepos, mockSetPinned, mockRender);
 
-      expect(chrome.storage.sync.set).toHaveBeenCalledWith({
-        pinnedRepos: []
-      });
+      expect(mockState.pinnedRepos).toEqual([]);
       expect(mockSetPinned).toHaveBeenCalledWith([]);
     });
   });
@@ -427,7 +371,7 @@ describe('Repository Controller', () => {
 
       await toggleRepoCollapse('owner/repo', collapsedRepos, mockRender);
 
-      expect(collapsedRepos.has('owner/repo')).toBe(false);
+      expect(mockState.collapsedRepos.has('owner/repo')).toBe(false);
     });
 
     test('adds repo to set when not collapsed', async () => {
@@ -436,7 +380,7 @@ describe('Repository Controller', () => {
 
       await toggleRepoCollapse('owner/repo', collapsedRepos, mockRender);
 
-      expect(collapsedRepos.has('owner/repo')).toBe(true);
+      expect(mockState.collapsedRepos.has('owner/repo')).toBe(true);
     });
   });
 });
diff --git a/tests/repo-service.test.js b/tests/repo-service.test.js
new file mode 100644
index 0000000..f97790d
--- /dev/null
+++ b/tests/repo-service.test.js
@@ -0,0 +1,182 @@
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+const mockFetchGitHubRepoFromNpm = jest.fn();
+const mockValidateRepository = jest.fn();
+
+jest.unstable_mockModule('../shared/api/npm-api.js', () => ({
+  fetchGitHubRepoFromNpm: mockFetchGitHubRepoFromNpm
+}));
+
+jest.unstable_mockModule('../shared/repository-validator.js', () => ({
+  validateRepository: mockValidateRepository
+}));
+
+const {
+  buildWatchedRepoRecord,
+  isWatchedRepoDuplicate,
+  normalizeRepoInput,
+  normalizeWatchedRepoRecord,
+  resolveWatchedRepoInput
+} = await import('../shared/repo-service.js');
+
+describe('repo-service', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.fetch = jest.fn();
+  });
+
+  test('normalizes owner/repo input directly', async () => {
+    const result = await normalizeRepoInput('facebook/react');
+
+    expect(result).toEqual({
+      valid: true,
+      normalizedRepo: 'facebook/react'
+    });
+  });
+
+  test('normalizes GitHub URLs into owner/repo', async () => {
+    const result = await normalizeRepoInput('https://github.com/facebook/react.git');
+
+    expect(result).toEqual({
+      valid: true,
+      normalizedRepo: 'facebook/react'
+    });
+  });
+
+  test('resolves npm packages through the npm metadata helper', async () => {
+    mockFetchGitHubRepoFromNpm.mockResolvedValueOnce({
+      success: true,
+      repo: 'vuejs/core'
+    });
+
+    const result = await normalizeRepoInput('vue');
+
+    expect(mockFetchGitHubRepoFromNpm).toHaveBeenCalledWith('vue');
+    expect(result).toEqual({
+      valid: true,
+      normalizedRepo: 'vuejs/core'
+    });
+  });
+
+  test('detects duplicates by fullName regardless of source shape', () => {
+    const existingRepos = [
+      'facebook/react',
+      { fullName: 'vuejs/core' }
+    ];
+
+    expect(isWatchedRepoDuplicate(existingRepos, 'FACEBOOK/react')).toBe(true);
+    expect(isWatchedRepoDuplicate(existingRepos, 'angular/angular')).toBe(false);
+  });
+
+  test('normalizes canonical watched repo records', () => {
+    const normalized = normalizeWatchedRepoRecord({
+      fullName: 'facebook/react',
+      description: '',
+      stars: '123',
+      forks: undefined,
+      updatedAt: '2026-04-01T00:00:00Z'
+    }, {
+      addedAtFallback: '2026-04-13T12:00:00Z'
+    });
+
+    expect(normalized).toEqual({
+      fullName: 'facebook/react',
+      name: 'react',
+      description: 'No description provided',
+      language: 'Unknown',
+      stars: 123,
+      forks: 0,
+      updatedAt: '2026-04-01T00:00:00Z',
+      addedAt: '2026-04-13T12:00:00Z'
+    });
+  });
+
+  test('buildWatchedRepoRecord preserves supported metadata fields', () => {
+    const record = buildWatchedRepoRecord({
+      fullName: 'owner/repo',
+      name: 'repo',
+      description: 'Desc',
+      language: 'TypeScript',
+      stars: 42,
+      forks: 7,
+      updatedAt: '2026-04-01T00:00:00Z',
+      private: true,
+      archived: false,
+      latestRelease: {
+        version: 'v1.0.0',
+        publishedAt: '2026-03-01T00:00:00Z'
+      }
+    }, {
+      addedAt: '2026-04-13T12:00:00Z'
+    });
+
+    expect(record).toMatchObject({
+      fullName: 'owner/repo',
+      name: 'repo',
+      private: true,
+      archived: false,
+      latestRelease: {
+        version: 'v1.0.0'
+      },
+      addedAt: '2026-04-13T12:00:00Z'
+    });
+  });
+
+  test('resolveWatchedRepoInput returns canonical record output', async () => {
+    mockValidateRepository.mockResolvedValueOnce({
+      valid: true,
+      metadata: {
+        fullName: 'facebook/react',
+        name: 'react',
+        description: 'UI library',
+        language: 'JavaScript',
+        stars: 100,
+        forks: 20,
+        updatedAt: '2026-04-01T00:00:00Z'
+      }
+    });
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        tag_name: 'v19.0.0',
+        published_at: '2026-04-10T00:00:00Z'
+      })
+    });
+
+    const result = await resolveWatchedRepoInput('facebook/react', {
+      githubToken: 'token',
+      existingRepos: [],
+      addedAt: '2026-04-13T12:00:00Z'
+    });
+
+    expect(result.valid).toBe(true);
+    expect(result.record).toEqual({
+      fullName: 'facebook/react',
+      name: 'react',
+      description: 'UI library',
+      language: 'JavaScript',
+      stars: 100,
+      forks: 20,
+      updatedAt: '2026-04-01T00:00:00Z',
+      addedAt: '2026-04-13T12:00:00Z',
+      latestRelease: {
+        version: 'v19.0.0',
+        publishedAt: '2026-04-10T00:00:00Z'
+      }
+    });
+  });
+
+  test('resolveWatchedRepoInput rejects duplicates by normalized fullName', async () => {
+    const result = await resolveWatchedRepoInput('https://github.com/facebook/react', {
+      githubToken: 'token',
+      existingRepos: [{ fullName: 'facebook/react' }]
+    });
+
+    expect(result).toMatchObject({
+      valid: false,
+      reason: 'duplicate',
+      error: 'Repository already added',
+      normalizedRepo: 'facebook/react'
+    });
+  });
+});
diff --git a/tests/state-manager.test.js b/tests/state-manager.test.js
index 735fa34..b7ffa43 100644
--- a/tests/state-manager.test.js
+++ b/tests/state-manager.test.js
@@ -1,5 +1,38 @@
 import { jest, describe, test, beforeEach, expect } from '@jest/globals';
 
+const mockGetSyncItems = jest.fn(async () => ({}));
+const mockGetLocalItems = jest.fn(async () => ({}));
+const mockGetSettings = jest.fn(async () => ({
+  watchedRepos: [],
+  mutedRepos: [],
+  snoozedRepos: [],
+  pinnedRepos: [],
+  filters: { prs: true, issues: true, releases: true },
+  notifications: { prs: true, issues: true, releases: true },
+  checkInterval: 15,
+  snoozeHours: 1,
+  theme: 'system',
+  colorTheme: 'polar',
+  itemExpiryHours: null,
+  markReadOnSnooze: false,
+  allowUnlimitedRepos: false,
+  lastCheck: 0
+}));
+const mockGetActivityData = jest.fn(async () => ({
+  activities: [],
+  readItems: [],
+  collapsedRepos: []
+}));
+const mockGetWatchedRepos = jest.fn(async () => []);
+const mockSetWatchedRepos = jest.fn(async () => {});
+const mockGetExcludedRepos = jest.fn((mutedRepos = [], snoozedRepos = []) => {
+  const now = Date.now();
+  return new Set([
+    ...mutedRepos,
+    ...snoozedRepos.filter(repo => repo.expiresAt > now).map(repo => repo.repo)
+  ]);
+});
+
 // Mock Chrome APIs before importing
 global.chrome = {
   storage: {
@@ -19,23 +52,32 @@ global.chrome = {
 
 // Mock storage helpers
 jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
-  getSyncItems: jest.fn(async () => ({})),
-  getLocalItems: jest.fn(async () => ({})),
-  getWatchedRepos: jest.fn(async () => []),
-  setWatchedRepos: jest.fn(async () => {}),
+  getSyncItems: mockGetSyncItems,
+  getLocalItems: mockGetLocalItems,
+  getSettings: mockGetSettings,
+  getActivityData: mockGetActivityData,
+  getWatchedRepos: mockGetWatchedRepos,
+  setWatchedRepos: mockSetWatchedRepos,
+  getExcludedRepos: mockGetExcludedRepos,
   STORAGE_KEYS: {
-    SETTINGS: ['watchedRepos', 'mutedRepos', 'snoozedRepos', 'filters', 'notifications', 'checkInterval', 'theme', 'itemExpiryHours'],
-    ACTIVITY: ['activities', 'readItems']
+    SETTINGS: ['watchedRepos', 'mutedRepos', 'snoozedRepos', 'pinnedRepos', 'filters', 'notifications', 'checkInterval', 'theme', 'itemExpiryHours'],
+    ACTIVITY: ['activities', 'readItems', 'collapsedRepos']
   },
   STORAGE_DEFAULTS: {
     watchedRepos: [],
     mutedRepos: [],
     snoozedRepos: [],
+    pinnedRepos: [],
+    collapsedRepos: [],
     filters: { prs: true, issues: true, releases: true },
     notifications: { prs: true, issues: true, releases: true },
     checkInterval: 15,
+    snoozeHours: 1,
     theme: 'system',
+    colorTheme: 'polar',
     itemExpiryHours: null,
+    markReadOnSnooze: false,
+    allowUnlimitedRepos: false,
     activities: [],
     readItems: []
   }
@@ -46,6 +88,30 @@ const { stateManager, getFilteredActivities, getStats, addActivities, markAsRead
 describe('state-manager', () => {
   beforeEach(async () => {
     jest.clearAllMocks();
+    chrome.storage.sync.set.mockImplementation((items, callback) => callback());
+    chrome.storage.local.set.mockImplementation((items, callback) => callback());
+    chrome.runtime.lastError = null;
+    mockGetSettings.mockResolvedValue({
+      watchedRepos: [],
+      mutedRepos: [],
+      snoozedRepos: [],
+      pinnedRepos: [],
+      filters: { prs: true, issues: true, releases: true },
+      notifications: { prs: true, issues: true, releases: true },
+      checkInterval: 15,
+      snoozeHours: 1,
+      theme: 'system',
+      colorTheme: 'polar',
+      itemExpiryHours: null,
+      markReadOnSnooze: false,
+      allowUnlimitedRepos: false,
+      lastCheck: 0
+    });
+    mockGetActivityData.mockResolvedValue({
+      activities: [],
+      readItems: [],
+      collapsedRepos: []
+    });
 
     // Reset state manager
     stateManager.initialized = false;
@@ -59,11 +125,17 @@ describe('state-manager', () => {
       watchedRepos: [],
       mutedRepos: [],
       snoozedRepos: [],
+      pinnedRepos: [],
+      collapsedRepos: new Set(),
       filters: { prs: true, issues: true, releases: true },
       notifications: { prs: true, issues: true, releases: true },
       checkInterval: 15,
+      snoozeHours: 1,
       theme: 'system',
+      colorTheme: 'polar',
       itemExpiryHours: null,
+      markReadOnSnooze: false,
+      allowUnlimitedRepos: false,
       isLoading: false,
       error: null
     };
@@ -138,6 +210,15 @@ describe('state-manager', () => {
       expect(filtered[0].id).toBe('1');
     });
 
+    test('filters excluded repositories from the feed', () => {
+      stateManager.state.mutedRepos = ['facebook/react'];
+
+      const filtered = getFilteredActivities();
+
+      expect(filtered).toHaveLength(2);
+      expect(filtered.every(activity => activity.repo === 'vuejs/vue')).toBe(true);
+    });
+
     test('combines multiple filters', () => {
       stateManager.state.currentFilter = 'pr';
       stateManager.state.searchQuery = 'feature';
@@ -222,6 +303,17 @@ describe('state-manager', () => {
       expect(stateManager.state.allActivities).toHaveLength(2000);
       expect(stateManager.state.allActivities[0].id).toBe('new-1');
     });
+
+    test('filters excluded repositories before storing activities', async () => {
+      stateManager.state.mutedRepos = ['muted/repo'];
+
+      await addActivities([
+        { id: 'muted', repo: 'muted/repo' },
+        { id: 'visible', repo: 'visible/repo' }
+      ]);
+
+      expect(stateManager.state.allActivities.map(activity => activity.id)).toEqual(['visible']);
+    });
   });
 
   describe('markAsRead', () => {
@@ -342,4 +434,103 @@ describe('state-manager', () => {
       expect(goodCallback).toHaveBeenCalled();
     });
   });
+
+  describe('initialize', () => {
+    test('coalesces concurrent initialize calls behind a single lock', async () => {
+      let resolveSettings;
+      const settingsPromise = new Promise((resolve) => {
+        resolveSettings = resolve;
+      });
+      mockGetSettings.mockReturnValue(settingsPromise);
+
+      const firstInitialize = stateManager.initialize();
+      const secondInitialize = stateManager.initialize();
+
+      expect(mockGetSettings).toHaveBeenCalledTimes(1);
+      expect(stateManager.initializationLock).toBeTruthy();
+
+      resolveSettings({
+        watchedRepos: ['facebook/react'],
+        mutedRepos: [],
+        snoozedRepos: [],
+        pinnedRepos: [],
+        filters: { prs: true, issues: true, releases: true },
+        notifications: { prs: true, issues: true, releases: true },
+        checkInterval: 15,
+        snoozeHours: 1,
+        theme: 'dark',
+        colorTheme: 'graphite',
+        itemExpiryHours: null,
+        markReadOnSnooze: false,
+        allowUnlimitedRepos: false,
+        lastCheck: 0
+      });
+
+      await Promise.all([firstInitialize, secondInitialize]);
+
+      expect(mockGetSettings).toHaveBeenCalledTimes(1);
+      expect(mockGetActivityData).toHaveBeenCalledTimes(1);
+      expect(stateManager.getState('watchedRepos')).toEqual(['facebook/react']);
+      expect(stateManager.initializationLock).toBeNull();
+    });
+
+    test('returns immediately when already initialized', async () => {
+      stateManager.initialized = true;
+
+      await stateManager.initialize();
+
+      expect(mockGetSettings).not.toHaveBeenCalled();
+      expect(mockGetActivityData).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('setState and reset', () => {
+    beforeEach(() => {
+      stateManager.initialized = true;
+    });
+
+    test('supports functional updater callbacks', async () => {
+      await stateManager.setState((currentState) => ({
+        ...currentState,
+        searchQuery: `${currentState.searchQuery}react`
+      }), { persist: false });
+
+      expect(stateManager.getState('searchQuery')).toBe('react');
+    });
+
+    test('skips persistence when persist is false', async () => {
+      await stateManager.setState({ searchQuery: 'offline' }, { persist: false });
+
+      expect(chrome.storage.sync.set).not.toHaveBeenCalled();
+      expect(chrome.storage.local.set).not.toHaveBeenCalled();
+      expect(mockSetWatchedRepos).not.toHaveBeenCalled();
+    });
+
+    test('skips subscriber notifications when notify is false', async () => {
+      const callback = jest.fn();
+      stateManager.subscribe(callback);
+
+      await stateManager.setState({ searchQuery: 'silent' }, { persist: false, notify: false });
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    test('resets only the requested keys', async () => {
+      stateManager.state.theme = 'dark';
+      stateManager.state.collapsedRepos = new Set(['facebook/react']);
+      stateManager.state.searchQuery = 'keep-me';
+
+      await stateManager.reset(['theme', 'collapsedRepos']);
+
+      expect(stateManager.getState('theme')).toBe('system');
+      expect(stateManager.getState('collapsedRepos')).toEqual(new Set());
+      expect(stateManager.getState('searchQuery')).toBe('keep-me');
+    });
+
+    test('rejects when persistence hits a storage error', async () => {
+      chrome.runtime.lastError = { message: 'sync failed' };
+
+      await expect(stateManager.setState({ theme: 'dark' })).rejects.toThrow('sync failed');
+    });
+  });
 });
diff --git a/tests/storage-helpers.test.js b/tests/storage-helpers.test.js
index f5d0807..ecebda4 100644
--- a/tests/storage-helpers.test.js
+++ b/tests/storage-helpers.test.js
@@ -14,9 +14,12 @@ const {
   setLocalItem,
   getExcludedRepos,
   getAuthSession,
+  getWatchedRepos,
+  getSettings,
   setAuthSession,
   clearAuthSession,
-  getAccessToken
+  getAccessToken,
+  updateSettings
 } = await import('../shared/storage-helpers.js');
 
 describe('Storage Helpers', () => {
@@ -146,6 +149,16 @@ describe('Storage Helpers', () => {
 
       expect(result).toBe('');
     });
+
+    it('returns the default when chrome extension APIs are unavailable', async () => {
+      const originalChrome = global.chrome;
+      delete global.chrome;
+
+      const result = await getSyncItem('missingKey', 'fallback');
+
+      expect(result).toBe('fallback');
+      global.chrome = originalChrome;
+    });
   });
 
   describe('getLocalItem', () => {
@@ -177,6 +190,16 @@ describe('Storage Helpers', () => {
 
       expect(result).toEqual([1, 2, 3]);
     });
+
+    it('rejects when chrome reports a runtime error', async () => {
+      chrome.storage.local.get.mockImplementation((keys, callback) => {
+        chrome.runtime = { lastError: { message: 'local failure' } };
+        callback({});
+        chrome.runtime.lastError = null;
+      });
+
+      await expect(getLocalItem('broken')).rejects.toThrow('local failure');
+    });
   });
 
   describe('getSyncItems', () => {
@@ -256,6 +279,16 @@ describe('Storage Helpers', () => {
 
       expect(mockSyncStorage.objectKey).toEqual(obj);
     });
+
+    it('translates quota failures into a clearer sync-storage error', async () => {
+      chrome.storage.sync.set.mockImplementation((items, callback) => {
+        chrome.runtime = { lastError: { message: 'QUOTA_EXCEEDED per item' } };
+        callback();
+        chrome.runtime.lastError = null;
+      });
+
+      await expect(setSyncItem('oversized', 'value')).rejects.toThrow('Sync storage quota exceeded');
+    });
   });
 
   describe('setLocalItem', () => {
@@ -276,6 +309,48 @@ describe('Storage Helpers', () => {
 
       expect(mockLocalStorage.arrayKey).toEqual(arr);
     });
+
+    it('translates quota failures into a clearer local-storage error', async () => {
+      chrome.storage.local.set.mockImplementation((items, callback) => {
+        chrome.runtime = { lastError: { message: 'QUOTA_EXCEEDED bytes' } };
+        callback();
+        chrome.runtime.lastError = null;
+      });
+
+      await expect(setLocalItem('oversized', ['value'])).rejects.toThrow('Storage quota exceeded');
+    });
+  });
+
+  describe('watched repository helpers', () => {
+    it('migrates watched repositories from sync storage into local storage', async () => {
+      mockSyncStorage.watchedRepos = ['facebook/react'];
+
+      const repos = await getWatchedRepos();
+
+      expect(repos).toEqual([
+        expect.objectContaining({
+          fullName: 'facebook/react'
+        })
+      ]);
+      expect(mockLocalStorage.watchedRepos).toEqual([
+        expect.objectContaining({
+          fullName: 'facebook/react'
+        })
+      ]);
+      expect(chrome.storage.sync.remove).toHaveBeenCalledWith(['watchedRepos'], expect.any(Function));
+    });
+
+    it('merges watched repositories into getSettings results', async () => {
+      mockLocalStorage.watchedRepos = [{ fullName: 'vuejs/core' }];
+      mockSyncStorage.filters = { prs: false, issues: true, releases: true };
+
+      const settings = await getSettings();
+
+      expect(settings.watchedRepos).toEqual([
+        expect.objectContaining({ fullName: 'vuejs/core' })
+      ]);
+      expect(settings.filters).toEqual({ prs: false, issues: true, releases: true });
+    });
   });
 
   describe('getExcludedRepos', () => {
@@ -418,6 +493,14 @@ describe('Storage Helpers', () => {
       );
     });
 
+    it('clears the session when the payload is invalid', async () => {
+      mockSessionStorage.githubAuthSession = { accessToken: 'old-token' };
+
+      await setAuthSession({ username: 'octocat' });
+
+      expect(mockSessionStorage.githubAuthSession).toBeUndefined();
+    });
+
     it('clears auth session from session storage and removes legacy persisted data', async () => {
       mockSessionStorage.githubAuthSession = { accessToken: 'oauth-token' };
       mockLocalStorage.encryptedGithubAuthSession = { iv: [], data: [] };
@@ -449,4 +532,22 @@ describe('Storage Helpers', () => {
       expect(result).toBeNull();
     });
   });
+
+  describe('updateSettings', () => {
+    it('fans out watched repos, lastCheck, and sync settings to the correct storage backends', async () => {
+      await updateSettings({
+        watchedRepos: ['facebook/react'],
+        lastCheck: '2026-04-13T00:00:00.000Z',
+        theme: 'dark',
+        colorTheme: 'graphite'
+      });
+
+      expect(mockLocalStorage.watchedRepos).toEqual([
+        expect.objectContaining({ fullName: 'facebook/react' })
+      ]);
+      expect(mockSyncStorage.lastCheck).toBe('2026-04-13T00:00:00.000Z');
+      expect(mockSyncStorage.theme).toBe('dark');
+      expect(mockSyncStorage.colorTheme).toBe('graphite');
+    });
+  });
 });

From 1fc28786621823af48c8b6dc7e8fd42ad907744e Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 13 Apr 2026 21:07:24 -0500
Subject: [PATCH 40/42] docs: refresh README for current setup flow

---
 README.md | 50 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 121767e..79f05fe 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Monitor pull requests, issues, and releases across multiple GitHub repositories from a Chrome extension. It keeps a local activity feed, badge counts, and optional browser notifications without adding another hosted service to the workflow.
 
+Best for people who follow several repos and want one local review queue instead of GitHub email noise, browser-tab sprawl, or constantly checking each repository by hand.
+
 [![Chrome Web Store](https://img.shields.io/badge/Chrome-Web_Store-green?logo=google-chrome)](https://chromewebstore.google.com/detail/github-devwatch/dbgjgcaphfcfgppicmbiafcgcabikjch)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![CI](https://github.com/jonmartin721/devwatch-github/workflows/CI/badge.svg)](https://github.com/jonmartin721/devwatch-github/actions)
@@ -11,9 +13,11 @@ Monitor pull requests, issues, and releases across multiple GitHub repositories
 
 - **Guided Setup** - Built-in GitHub sign-in flow and repository selection
 - **Browser Notifications** - Get notified about new PRs, issues, and releases
-- **Multi-Repo Monitoring** - Watch up to 50 repositories from one interface
+- **Multi-Repo Monitoring** - Watch up to 50 repositories by default, with an advanced option to go beyond that
 - **Configurable Updates** - Check every 5, 15, 30, or 60 minutes
 - **Activity Filtering** - Search and filter by repo and activity type
+- **Repo Controls** - Pin favorites, mute noisy repos, or snooze them temporarily
+- **Flexible Repo Input** - Add repos with `owner/repo`, a GitHub URL, or an npm package name
 - **Badge Counts** - Unread count on the extension icon
 - **Direct API Access** - Talks to GitHub directly, with optional npm registry lookups only when you use package-name import
 
@@ -21,6 +25,13 @@ Monitor pull requests, issues, and releases across multiple GitHub repositories
   <img src="screenshots/full-tagline.png" alt="GitHub Devwatch - Track your repositories" width="800">
 </div>
 
+## Requirements
+
+- Chrome or another Chromium-based browser that supports Manifest V3 extensions
+- A GitHub account to connect during setup
+- No separate hosted DevWatch account or backend service
+- GitHub sign-in lasts for the current browser session and is cleared when that session ends
+
 ## Installation
 
 ### From Chrome Web Store (Recommended)
@@ -30,7 +41,7 @@ Monitor pull requests, issues, and releases across multiple GitHub repositories
 3. Grant permissions when prompted
 4. Follow the guided setup wizard on first launch
 
-**GitHub Sign-In Permissions**: DevWatch uses GitHub OAuth device flow and requests `repo` plus `read:user` so it can monitor private repositories and show the connected account in the UI.
+**GitHub Sign-In Permissions**: DevWatch uses GitHub OAuth device flow and requests `repo` plus `read:user` so it can monitor private repositories and show the connected account in the UI. The current build uses one sign-in path for both public and private monitoring, so there is not a separate public-only permission mode yet.
 
 ### Manual Installation (For Development)
 
@@ -38,6 +49,7 @@ Monitor pull requests, issues, and releases across multiple GitHub repositories
 ```bash
 git clone https://github.com/jonmartin721/devwatch-github.git
 cd devwatch-github
+npm install
 ```
 
 2. Load the extension in Chrome:
@@ -66,15 +78,28 @@ The built-in setup flow walks you through:
 - Click the extension icon to view your activity feed
 - Get browser notifications for new activity
 - Badge count shows unread items at a glance
+- Use the archive to revisit read items or clear them when you're done
+- Pin, mute, or snooze repositories to control noisy feeds
 - Manage repositories and preferences anytime in Settings
 
 ## How to Use
 
 ### Popup Interface
-Filter by type (All/PRs/Issues/Releases), search activities, refresh manually, or browse the archive. Click any item to open in GitHub.
+The popup is the main day-to-day view:
+- Filter by type (All/PRs/Issues/Releases)
+- Search across activity in watched repositories
+- Refresh manually, browse the archive, and open any item in GitHub
+- Pin favorite repositories or snooze noisy ones to keep the feed focused
+
+<div align="center">
+  <img src="screenshots/popup-interface.png" alt="Popup activity feed showing repository updates" width="500">
+</div>
 
 ### Settings Page
-Manage your GitHub connection, watched repositories, activity filters, check interval, notifications, and theme. Export/import settings for backup.
+Settings are split into a few practical jobs:
+- Connect GitHub, add repositories manually, or import them from your account
+- Tune filters, notifications, refresh interval, snooze behavior, and item expiry
+- Change theme/color theme, export or import settings, and enable advanced repo-limit options
 
 <div align="center">
   <img src="screenshots/settings-page.png" alt="Settings page for configuring repositories" width="600">
@@ -84,12 +109,9 @@ Manage your GitHub connection, watched repositories, activity filters, check int
 
 Here's what using the extension looks like day-to-day:
 
-1. You're working and get a notification: "2 new activities in your-org/api-server"
-2. Click the extension icon to see the feed
-3. See "Pull Request #145: Add OAuth2 authentication" (3 minutes ago)
-4. Click the item to open it in GitHub
-5. Review and comment on the PR
-6. When you return to the extension, it's marked as read
+1. A browser notification or badge count lets you know there is new activity.
+2. Open the popup to scan updates across your watched repositories in one place.
+3. Open the item in GitHub when you want to review it, and let DevWatch keep the rest of the queue visible locally.
 
 The extension keeps up to 2000 items in your local history, so you can always check something you saw earlier. Badge count updates automatically as you read items.
 
@@ -101,9 +123,9 @@ That said, this project has not gone through a formal accessibility audit or doc
 
 ## Privacy & Security Notes
 
-The extension talks directly to GitHub's API and does not use a separate analytics or sync backend. It stores settings and cached activity in Chrome extension storage, and the current build encrypts the GitHub auth session before persisting it locally while keeping a decrypted session copy available at runtime.
+The extension talks directly to GitHub's API and does not use a separate analytics or sync backend. It stores settings and cached activity in Chrome extension storage, while the current GitHub auth session stays in Chrome session storage so it is not persisted to disk. Legacy encrypted auth data from older builds is cleared when accessed.
 
-- **Direct network access** - Requests go to `api.github.com`, plus `registry.npmjs.org` only when you use package-name lookup
+- **Direct network access** - Requests go to `api.github.com` for activity checks, `github.com` for OAuth device-flow sign-in, and `registry.npmjs.org` only when you use package-name lookup
 - **Scoped browser permissions** - The manifest asks for `storage`, `alarms`, and `notifications`
 - **Defensive client code** - The codebase includes URL validation, content security policy rules, and sanitization tests
 - **No formal audit claim** - These measures improve the local handling of data, but they are not a substitute for securing the browser profile and GitHub account you use with the extension
@@ -125,7 +147,7 @@ Items are automatically removed when they exceed the 2000 item limit (keeping th
 
 GitHub gives authenticated users 5,000 API requests per hour. Each repo check uses 1-3 requests, so even checking 50 repos every 15 minutes keeps you well under the limit.
 
-The extension defaults to checking every 15 minutes. You can change this to 5, 30, or 60 minutes in settings. The 50-repo limit is just to keep things reasonable - you won't hit GitHub's rate limits even at that level.
+The extension defaults to checking every 15 minutes. You can change this to 5, 30, or 60 minutes in settings. The default 50-repo limit is there to keep rate usage predictable, but Advanced settings also let you enable unlimited repositories if you want to trade more flexibility for more rate-limit risk.
 
 ## Development
 
@@ -198,7 +220,7 @@ This is an actively maintained side project. Some features under consideration:
 - **Comment notifications** - Track new comments on issues and PRs
 - **Mention tracking** - Get notified when you're mentioned
 - **Multiple GitHub accounts** - Switch between different accounts
-- **GitHub OAuth** - Simplified authentication with one-click login
+- **Browser redirect sign-in** - Offer a less manual alternative to the current device-flow sign-in
 - **Internationalization** - Support for multiple languages
 - **Dashboard view** - Full-page dashboard for all activity
 

From 1417c70a6c196ae8a25cb43e243866b6b830004d Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Mon, 13 Apr 2026 21:26:31 -0500
Subject: [PATCH 41/42] chore: ignore legacy planning and mockup artifacts

---
 .gitignore | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.gitignore b/.gitignore
index 1b22c4f..87a5f76 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,12 @@ WINDSURF.md
 .gemini/
 .windsurf/
 .continue/
+
+# Legacy local design / planning artifacts
+.superpowers/
+docs/superpowers/
+icon-concepts.html
+*-450.png
+v2-*.png
+onboarding-*.png
+current-page.png

From 272268284b02687e222afe6a0a731df8714059a6 Mon Sep 17 00:00:00 2001
From: Jonathan Martin <jonmartin721@gmail.com>
Date: Tue, 14 Apr 2026 23:46:53 -0500
Subject: [PATCH 42/42] Fix partial settings updates

---
 shared/settings-schema.js     |  4 +++-
 tests/storage-helpers.test.js | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/shared/settings-schema.js b/shared/settings-schema.js
index adddbe7..e3e2f39 100644
--- a/shared/settings-schema.js
+++ b/shared/settings-schema.js
@@ -129,7 +129,9 @@ export function pickSyncSettings(rawSettings = {}) {
   const syncSettings = {};
 
   SETTINGS_SYNC_KEYS.forEach(key => {
-    syncSettings[key] = normalized[key];
+    if (key in rawSettings) {
+      syncSettings[key] = normalized[key];
+    }
   });
 
   return syncSettings;
diff --git a/tests/storage-helpers.test.js b/tests/storage-helpers.test.js
index ecebda4..ea36814 100644
--- a/tests/storage-helpers.test.js
+++ b/tests/storage-helpers.test.js
@@ -549,5 +549,22 @@ describe('Storage Helpers', () => {
       expect(mockSyncStorage.theme).toBe('dark');
       expect(mockSyncStorage.colorTheme).toBe('graphite');
     });
+
+    it('preserves unrelated stored settings when applying a partial update', async () => {
+      Object.assign(mockSyncStorage, {
+        filters: { prs: false, issues: true, releases: false },
+        notifications: { prs: false, issues: false, releases: true },
+        snoozeHours: 4,
+        colorTheme: 'sand'
+      });
+
+      await updateSettings({ theme: 'dark' });
+
+      expect(mockSyncStorage.theme).toBe('dark');
+      expect(mockSyncStorage.filters).toEqual({ prs: false, issues: true, releases: false });
+      expect(mockSyncStorage.notifications).toEqual({ prs: false, issues: false, releases: true });
+      expect(mockSyncStorage.snoozeHours).toBe(4);
+      expect(mockSyncStorage.colorTheme).toBe('sand');
+    });
   });
 });