commit c1efa7b89e152b6f7030aefc90661b1a99173a8d
Author: wehub-resource-sync <resource-sync@wehub.local>
Date:   Mon Jul 13 12:34:04 2026 +0800

    chore: import upstream snapshot with attribution

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..6316200
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,190 @@
+When performing a code review, respond in Simplified Chinese.
+
+## Design Context
+
+### Product Overview
+Tab Harbor is a calmer Chrome new tab workspace for people who live with many open tabs. It combines open-tab awareness, manual grouping, quick links, saved reads, and lightweight todos in one local-first surface so the browser can feel workable again instead of visually noisy.
+
+### Users
+Tab Harbor serves people who keep many browser tabs open while working, switch contexts frequently, and accumulate articles they intend to read. They open a new tab when they need to search, jump back into active work, and tame browsing clutter without leaving the browser.
+
+Typical users include:
+- knowledge workers doing research across many sources
+- makers and developers juggling documentation, issue threads, and tools
+- readers who save articles faster than they can finish them
+- people who want a calmer browser workflow without adopting a separate productivity app
+
+### Use Cases
+Primary jobs to be done:
+1. Re-enter work quickly when opening a new tab.
+2. See what is already open before opening more duplicate or forgotten pages.
+3. Separate "active now" tabs from "read later" material without losing either.
+4. Keep lightweight task reminders close to the browsing context.
+5. Tidy tab chaos without turning the browser into a heavy dashboard product.
+
+Secondary jobs:
+1. Personalize the workspace through themes, transparency, and background treatment.
+2. Jump between groups or content areas quickly from lightweight navigation.
+3. Archive or restore content later without anxiety about losing it.
+
+### Brand Personality
+Core personality words:
+- calm
+- literary
+- composed
+
+The product should reduce chaos without feeling sterile. It should feel thoughtful, private, and grounded, with the tone of a quiet reading desk rather than a loud productivity tool. It should support focused work with a gentle confidence, not with motivational energy or aggressive optimization language.
+
+### Emotional Goals
+The interface should help users feel:
+- less visually overwhelmed
+- more oriented when returning to work
+- quietly in control of a messy browser session
+- invited to continue reading, sorting, and acting without friction
+
+It should not make users feel:
+- rushed
+- gamified
+- monitored
+- trapped inside a complicated system
+
+### Aesthetic Direction
+The visual direction should feel like a quiet reading desk rather than a loud productivity dashboard. The interface should stay editorial and paper-like, while preserving enough clarity and structure for fast scanning during active multitasking.
+
+Desired qualities:
+- warm, subtle, and materially believable
+- lightweight rather than ornamental
+- typographically intentional
+- soft in atmosphere, precise in structure
+
+The product should feel closer to a reading surface, pinboard, or annotated workspace than to a metrics dashboard, startup landing page, or neon developer tool.
+
+### Theme Strategy
+Default to light or softly tinted themes that support daytime reading and repeated new-tab use. Dark themes may exist, but they should feel muted, paper-like, and low-glare rather than cinematic or high-contrast.
+
+Theme behavior expectations:
+1. Neutrals should carry a subtle tint from the active theme.
+2. Accent color usage should stay restrained and informative.
+3. Theme changes should affect the whole environment, not just isolated buttons.
+4. Custom backgrounds are optional atmosphere, never the main content.
+5. Readability and scanability take precedence over visual flourish in every theme.
+
+### References
+Positive reference qualities:
+- editorial interfaces with strong typography and restrained rhythm
+- desk, notebook, library, and reading-material cues
+- lightweight productivity tools that feel personal rather than corporate
+- interfaces that communicate calm through spacing, contrast, and structure instead of empty minimalism
+
+Reference the feeling, not the literal styling: we want the discipline of a well-arranged workspace, not nostalgia cosplay or skeuomorphic decoration.
+
+### Anti-References
+Tab Harbor should explicitly avoid looking like:
+- a generic SaaS dashboard
+- a glowing dark-mode developer homepage
+- a wallpaper-first new tab page
+- a gamified productivity tracker
+- a card-heavy settings panel with thick borders and loud accents
+
+Avoid:
+- flashy gradients and neon contrast
+- oversized hero-style metrics or promotional layout patterns
+- decorative chrome that competes with browsing content
+- UI that feels like an app launcher instead of an active workspace
+
+### Design Principles
+1. Calm first, but never vague: soothe the interface without hiding what matters.
+2. Reading-friendly density: support heavy tab usage and article triage with strong scanability.
+3. Gentle hierarchy: use contrast, spacing, and typography to guide attention without shouting.
+4. Workspace, not wallpaper: every decorative choice should reinforce a thoughtful working surface.
+5. Local and lightweight: the UI should feel immediate, private, and frictionless.
+6. Personal, not performative: the interface should feel like a tool someone lives in, not a product trying to impress them.
+
+### Interaction Preferences
+1. Favor whitespace and simplicity over persistent explanation. If an interface element can be learned through use, avoid always-visible helper copy.
+2. Use words sparingly. Prefer clear structure, spacing, and visual cues before adding labels or descriptive text.
+3. Secondary controls should stay quiet. Drawer triggers, theme controls, and similar utilities should not compete with core browsing content.
+4. Keep framing subtle. Large borders, thick outlines, or heavy container shapes should be reduced unless they serve a strong structural purpose.
+5. Theme controls should feel compact and tool-like, not like a separate feature area. Keep proportions balanced and avoid tall, stretched option cards.
+6. Theme previews are palette samples, not decorative icons. They should read as concise material swatches.
+7. Empty and archived states should teach lightly through structure and action, not through long explanatory paragraphs.
+8. Interactions should feel immediate and local. Prefer lightweight transitions and visible effect over theatrical motion.
+
+### Visual Constraints
+1. Reduce auxiliary UI noise first: borders, shadows, helper copy, and oversized controls should all be questioned before adding new elements.
+2. Theme surfaces, hover states, tooltips, underline accents, and archive actions should derive from theme variables instead of hard-coded colors.
+3. Adjustable controls should have visible effect. If a slider changes transparency or depth, the related surfaces must respond clearly enough to perceive.
+4. Decorative elements must support orientation, atmosphere, or hierarchy. If they do none of those, remove them.
+5. Avoid excessive card nesting. Flatten structure whenever content can stand on spacing and alignment alone.
+6. Keep visual weight concentrated around content and utility, not around containers.
+
+### Typography Guidance
+1. Typography is a primary identity layer for this product, not just a utility decision.
+2. Favor readable, characterful type pairings that support an editorial and literary tone.
+3. Long text should feel comfortable for reading, but UI labels must stay crisp for scanning.
+4. Size contrast should create hierarchy without turning the page into a marketing composition.
+5. Avoid over-compressed, overly geometric, or trendy "tech brand" typography choices.
+
+### Motion Guidance
+1. Motion should clarify focus changes, panel behavior, hover feedback, and state transitions.
+2. Prefer soft, brief, decelerating motion over springy or playful movement.
+3. Motion should reinforce calmness and immediacy, never spectacle.
+4. Reduced-motion users must retain full clarity of state without depending on animation.
+
+### Accessibility Requirements
+Baseline expectations:
+1. Preserve clear keyboard navigation and visible focus states.
+2. Maintain readable contrast across all supported themes.
+3. Do not rely on color alone to communicate selection, state, or priority.
+4. Support reduced-motion preferences for transitions and panel behavior.
+5. Keep hit targets comfortable for repeated use, especially in compact utility controls.
+
+Accessibility here is part of the emotional design: users should feel oriented and safe, not visually strained.
+
+### Theme Panel Guidelines
+1. The theme panel should read as a compact utility surface, not a feature page. Prefer balanced proportions over tall, narrow stacks.
+2. Theme options should feel like concise selections, not content cards. Keep them short, low in height, and visually uniform.
+3. Remove non-essential copy inside the panel. Use section labels and primary option names before adding extra description.
+4. The theme option swatch represents the palette relationship: background or paper on one side, accent on the other. Treat it as a material sample, not an icon.
+5. The panel shell and inner option shapes should belong to the same visual family. Outer radius, inner radius, spacing, and stroke weight should feel intentionally related.
+6. Panel borders must stay subtle. If the container outline becomes a dominant visual element, reduce it.
+7. Clicking anywhere outside the panel should close it. Theme controls should feel lightweight and easy to dismiss.
+8. Theme-dependent details must stay synchronized: panel surface, option states, slider rail and thumb, tooltips, hover shadows, underline accents, and archive action colors should all respond to the active theme.
+
+### Durable Decision Rules
+Use these rules when a future design decision is ambiguous:
+1. Prefer calmer over louder.
+2. Prefer more legible over more decorative.
+3. Prefer stronger structure over more copy.
+4. Prefer local usefulness over feature theater.
+5. Prefer a surface that supports returning to work over one that tries to impress on first glance.
+
+## Implementation Guardrails
+
+### UI Direction
+1. Treat Tab Harbor as a quiet browser workspace, not a SaaS dashboard, wallpaper page, or gamified productivity tool.
+2. Preserve the calm / literary / composed direction. New UI should feel like a reading desk or paper workspace, not a glowing developer tool.
+3. Prefer scanability over spectacle. If a visual treatment makes the page louder before it makes it clearer, reject it.
+4. Keep secondary controls quiet. Drawer triggers, theme controls, archive affordances, and helper actions must not compete with open-tab content.
+5. Avoid excessive card nesting, oversized status surfaces, and decorative chrome that does not improve orientation, hierarchy, or atmosphere.
+
+### Interaction And Accessibility
+1. Critical actions must not depend on hover alone. Keyboard focus states must be visible and usable.
+2. Use reduced-motion-safe interactions. Motion should clarify state changes, never be required to understand them.
+3. Keep compact controls comfortably clickable. Do not optimize visual minimalism at the expense of hit area or usability.
+4. Theme updates must propagate to the whole environment, including surfaces, hover states, tooltips, slider parts, archive actions, and underline accents.
+
+### Frontend Architecture
+1. This project uses plain HTML, CSS, and ordered `<script>` tags with no bundler. Treat script load order as part of the runtime contract.
+2. In this environment, top-level `const`, `let`, and `function` declarations can conflict across files. When destructuring from `globalThis`, always use file-scoped prefixed aliases.
+3. Keep `extension/app.js` as a thin orchestrator entry. Put substantial runtime logic in supporting files instead of growing the entry file again.
+4. Prefer module boundaries by responsibility: UI helpers, theme controls, drawer management, dashboard runtime, and feature-specific subsystems.
+
+### Refactor Safety
+1. After any script split, rename top-level bindings defensively to avoid `Identifier has already been declared` startup failures.
+2. A green `node --test extension/*.test.js` run is necessary but not sufficient for refactors that touch startup or script loading.
+3. When the UI shows only static structure but not dynamic tab content, first suspect startup-time script errors before changing data logic.
+4. For startup or module-loading regressions, verify the page in a real browser and inspect console/runtime exceptions before deeper code changes.
+
+### Reference
+For fuller rationale and concrete lessons learned, see `docs/design-principles-and-lessons.md`.
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..89fdabd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+extension/config.local.js
+.DS_Store
+extension.zip
+dist/*.zip
+.idea
+.vscode
+CLAUDE.local.md
+CLAUDE.md
diff --git a/.impeccable.md b/.impeccable.md
new file mode 100644
index 0000000..d2bae07
--- /dev/null
+++ b/.impeccable.md
@@ -0,0 +1,158 @@
+## Design Context
+
+### Product Overview
+Tab Harbor is a calmer Chrome new tab workspace for people who live with many open tabs. It combines open-tab awareness, manual grouping, quick links, saved reads, and lightweight todos in one local-first surface so the browser can feel workable again instead of visually noisy.
+
+### Users
+Tab Harbor serves people who keep many browser tabs open while working, switch contexts frequently, and accumulate articles they intend to read. They open a new tab when they need to search, jump back into active work, and tame browsing clutter without leaving the browser.
+
+Typical users include:
+- knowledge workers doing research across many sources
+- makers and developers juggling documentation, issue threads, and tools
+- readers who save articles faster than they can finish them
+- people who want a calmer browser workflow without adopting a separate productivity app
+
+### Use Cases
+Primary jobs to be done:
+1. Re-enter work quickly when opening a new tab.
+2. See what is already open before opening more duplicate or forgotten pages.
+3. Separate "active now" tabs from "read later" material without losing either.
+4. Keep lightweight task reminders close to the browsing context.
+5. Tidy tab chaos without turning the browser into a heavy dashboard product.
+
+Secondary jobs:
+1. Personalize the workspace through themes, transparency, and background treatment.
+2. Jump between groups or content areas quickly from lightweight navigation.
+3. Archive or restore content later without anxiety about losing it.
+
+### Brand Personality
+Core personality words:
+- calm
+- literary
+- composed
+
+The product should reduce chaos without feeling sterile. It should feel thoughtful, private, and grounded, with the tone of a quiet reading desk rather than a loud productivity tool. It should support focused work with a gentle confidence, not with motivational energy or aggressive optimization language.
+
+### Emotional Goals
+The interface should help users feel:
+- less visually overwhelmed
+- more oriented when returning to work
+- quietly in control of a messy browser session
+- invited to continue reading, sorting, and acting without friction
+
+It should not make users feel:
+- rushed
+- gamified
+- monitored
+- trapped inside a complicated system
+
+### Aesthetic Direction
+The visual direction should feel like a quiet reading desk rather than a loud productivity dashboard. The interface should stay editorial and paper-like, while preserving enough clarity and structure for fast scanning during active multitasking.
+
+Desired qualities:
+- warm, subtle, and materially believable
+- lightweight rather than ornamental
+- typographically intentional
+- soft in atmosphere, precise in structure
+
+The product should feel closer to a reading surface, pinboard, or annotated workspace than to a metrics dashboard, startup landing page, or neon developer tool.
+
+### Theme Strategy
+Default to light or softly tinted themes that support daytime reading and repeated new-tab use. Dark themes may exist, but they should feel muted, paper-like, and low-glare rather than cinematic or high-contrast.
+
+Theme behavior expectations:
+1. Neutrals should carry a subtle tint from the active theme.
+2. Accent color usage should stay restrained and informative.
+3. Theme changes should affect the whole environment, not just isolated buttons.
+4. Custom backgrounds are optional atmosphere, never the main content.
+5. Readability and scanability take precedence over visual flourish in every theme.
+
+### References
+Positive reference qualities:
+- editorial interfaces with strong typography and restrained rhythm
+- desk, notebook, library, and reading-material cues
+- lightweight productivity tools that feel personal rather than corporate
+- interfaces that communicate calm through spacing, contrast, and structure instead of empty minimalism
+
+Reference the feeling, not the literal styling: we want the discipline of a well-arranged workspace, not nostalgia cosplay or skeuomorphic decoration.
+
+### Anti-References
+Tab Harbor should explicitly avoid looking like:
+- a generic SaaS dashboard
+- a glowing dark-mode developer homepage
+- a wallpaper-first new tab page
+- a gamified productivity tracker
+- a card-heavy settings panel with thick borders and loud accents
+
+Avoid:
+- flashy gradients and neon contrast
+- oversized hero-style metrics or promotional layout patterns
+- decorative chrome that competes with browsing content
+- UI that feels like an app launcher instead of an active workspace
+
+### Design Principles
+1. Calm first, but never vague: soothe the interface without hiding what matters.
+2. Reading-friendly density: support heavy tab usage and article triage with strong scanability.
+3. Gentle hierarchy: use contrast, spacing, and typography to guide attention without shouting.
+4. Workspace, not wallpaper: every decorative choice should reinforce a thoughtful working surface.
+5. Local and lightweight: the UI should feel immediate, private, and frictionless.
+6. Personal, not performative: the interface should feel like a tool someone lives in, not a product trying to impress them.
+
+### Interaction Preferences
+1. Favor whitespace and simplicity over persistent explanation. If an interface element can be learned through use, avoid always-visible helper copy.
+2. Use words sparingly. Prefer clear structure, spacing, and visual cues before adding labels or descriptive text.
+3. Secondary controls should stay quiet. Drawer triggers, theme controls, and similar utilities should not compete with core browsing content.
+4. Keep framing subtle. Large borders, thick outlines, or heavy container shapes should be reduced unless they serve a strong structural purpose.
+5. Theme controls should feel compact and tool-like, not like a separate feature area. Keep proportions balanced and avoid tall, stretched option cards.
+6. Theme previews are palette samples, not decorative icons. They should read as concise material swatches.
+7. Empty and archived states should teach lightly through structure and action, not through long explanatory paragraphs.
+8. Interactions should feel immediate and local. Prefer lightweight transitions and visible effect over theatrical motion.
+
+### Visual Constraints
+1. Reduce auxiliary UI noise first: borders, shadows, helper copy, and oversized controls should all be questioned before adding new elements.
+2. Theme surfaces, hover states, tooltips, underline accents, and archive actions should derive from theme variables instead of hard-coded colors.
+3. Adjustable controls should have visible effect. If a slider changes transparency or depth, the related surfaces must respond clearly enough to perceive.
+4. Decorative elements must support orientation, atmosphere, or hierarchy. If they do none of those, remove them.
+5. Avoid excessive card nesting. Flatten structure whenever content can stand on spacing and alignment alone.
+6. Keep visual weight concentrated around content and utility, not around containers.
+
+### Typography Guidance
+1. Typography is a primary identity layer for this product, not just a utility decision.
+2. Favor readable, characterful type pairings that support an editorial and literary tone.
+3. Long text should feel comfortable for reading, but UI labels must stay crisp for scanning.
+4. Size contrast should create hierarchy without turning the page into a marketing composition.
+5. Avoid over-compressed, overly geometric, or trendy "tech brand" typography choices.
+
+### Motion Guidance
+1. Motion should clarify focus changes, panel behavior, hover feedback, and state transitions.
+2. Prefer soft, brief, decelerating motion over springy or playful movement.
+3. Motion should reinforce calmness and immediacy, never spectacle.
+4. Reduced-motion users must retain full clarity of state without depending on animation.
+
+### Accessibility Requirements
+Baseline expectations:
+1. Preserve clear keyboard navigation and visible focus states.
+2. Maintain readable contrast across all supported themes.
+3. Do not rely on color alone to communicate selection, state, or priority.
+4. Support reduced-motion preferences for transitions and panel behavior.
+5. Keep hit targets comfortable for repeated use, especially in compact utility controls.
+
+Accessibility here is part of the emotional design: users should feel oriented and safe, not visually strained.
+
+### Theme Panel Guidelines
+1. The theme panel should read as a compact utility surface, not a feature page. Prefer balanced proportions over tall, narrow stacks.
+2. Theme options should feel like concise selections, not content cards. Keep them short, low in height, and visually uniform.
+3. Remove non-essential copy inside the panel. Use section labels and primary option names before adding extra description.
+4. The theme option swatch represents the palette relationship: background or paper on one side, accent on the other. Treat it as a material sample, not an icon.
+5. The panel shell and inner option shapes should belong to the same visual family. Outer radius, inner radius, spacing, and stroke weight should feel intentionally related.
+6. Panel borders must stay subtle. If the container outline becomes a dominant visual element, reduce it.
+7. Clicking anywhere outside the panel should close it. Theme controls should feel lightweight and easy to dismiss.
+8. Theme-dependent details must stay synchronized: panel surface, option states, slider rail and thumb, tooltips, hover shadows, underline accents, and archive action colors should all respond to the active theme.
+
+### Durable Decision Rules
+Use these rules when a future design decision is ambiguous:
+1. Prefer calmer over louder.
+2. Prefer more legible over more decorative.
+3. Prefer stronger structure over more copy.
+4. Prefer local usefulness over feature theater.
+5. Prefer a surface that supports returning to work over one that tries to impress on first glance.
diff --git a/.superpowers/brainstorm/82206-1776324819/.events b/.superpowers/brainstorm/82206-1776324819/.events
new file mode 100644
index 0000000..5a54efa
--- /dev/null
+++ b/.superpowers/brainstorm/82206-1776324819/.events
@@ -0,0 +1 @@
+{"type":"click","text":"B. 半宽紧凑版\n        \n          \n            \n            \n            \n            \n            \n          \n          \n            \n              \n                ChatGPT\n                6 tabs\n              \n              Close all\n            \n            Prompt draft\n            Reasoning test\n            Pricing page\n            API docs\n          \n        \n      \n    \n    \n      B. 半宽紧凑版\n      宽度约 50%，同时压缩卡片 padding、tab 行高和图标尺寸，让一屏能容纳更多分组与标签页。","choice":"b","id":null,"timestamp":1776324903705}
diff --git a/.superpowers/brainstorm/82206-1776324819/.server-stopped b/.superpowers/brainstorm/82206-1776324819/.server-stopped
new file mode 100644
index 0000000..bc7ffde
--- /dev/null
+++ b/.superpowers/brainstorm/82206-1776324819/.server-stopped
@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1776326745658}
diff --git a/.superpowers/brainstorm/82206-1776324819/.server.pid b/.superpowers/brainstorm/82206-1776324819/.server.pid
new file mode 100644
index 0000000..e3a5b57
--- /dev/null
+++ b/.superpowers/brainstorm/82206-1776324819/.server.pid
@@ -0,0 +1 @@
+82206
diff --git a/.superpowers/brainstorm/82206-1776324819/layout-options.html b/.superpowers/brainstorm/82206-1776324819/layout-options.html
new file mode 100644
index 0000000..35aede3
--- /dev/null
+++ b/.superpowers/brainstorm/82206-1776324819/layout-options.html
@@ -0,0 +1,104 @@
+<h2>紧凑布局方向</h2>
+<p class="subtitle">比较标签页列宽、纵向密度，以及 Open tabs 顶部图标导航的摆法。我的推荐是 B。</p>
+
+<div class="cards">
+  <div class="card" data-choice="a" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="mockup">
+        <div class="mockup-header">A. 半宽舒适版</div>
+        <div class="mockup-body">
+          <div style="display:flex; justify-content:flex-start; gap:8px; margin-bottom:14px;">
+            <div style="width:28px;height:28px;border-radius:999px;background:#d7c8b9;"></div>
+            <div style="width:28px;height:28px;border-radius:999px;background:#d9d0c8;"></div>
+            <div style="width:28px;height:28px;border-radius:999px;background:#d7c8b9;"></div>
+            <div style="width:28px;height:28px;border-radius:999px;background:#d9d0c8;"></div>
+          </div>
+          <div style="width:56%; border:1px solid #d9d0c8; border-radius:10px; padding:10px 12px; background:#fffaf5;">
+            <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;">
+              <div style="font-weight:600;">GitHub</div>
+              <div style="font-size:11px; color:#b16d3a;">Close all</div>
+            </div>
+            <div style="font-size:12px; padding:6px 0; border-top:1px solid #eee4da;">Issue #431</div>
+            <div style="font-size:12px; padding:6px 0; border-top:1px solid #eee4da;">PR review notes</div>
+            <div style="font-size:12px; padding:6px 0; border-top:1px solid #eee4da;">Docs tab</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>A. 半宽舒适版</h3>
+      <p>把当前分组宽度缩到大约现在的一半，保留比较舒展的行高，图标导航独立一排。</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="b" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="mockup">
+        <div class="mockup-header">B. 半宽紧凑版</div>
+        <div class="mockup-body">
+          <div style="display:flex; justify-content:flex-start; gap:6px; margin-bottom:10px; flex-wrap:wrap;">
+            <div style="width:24px;height:24px;border-radius:999px;background:#b16d3a;"></div>
+            <div style="width:24px;height:24px;border-radius:999px;background:#d9d0c8;"></div>
+            <div style="width:24px;height:24px;border-radius:999px;background:#d7c8b9;"></div>
+            <div style="width:24px;height:24px;border-radius:999px;background:#d9d0c8;"></div>
+            <div style="width:24px;height:24px;border-radius:999px;background:#d7c8b9;"></div>
+          </div>
+          <div style="width:50%; border:1px solid #d9d0c8; border-radius:10px; padding:9px 11px; background:#fffaf5;">
+            <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px;">
+              <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                <div style="font-weight:600;">ChatGPT</div>
+                <div style="font-size:10px; color:#b16d3a; background:#f8ede4; padding:2px 6px; border-radius:999px;">6 tabs</div>
+              </div>
+              <div style="font-size:11px; color:#b16d3a;">Close all</div>
+            </div>
+            <div style="font-size:11px; padding:4px 0; border-top:1px solid #eee4da;">Prompt draft</div>
+            <div style="font-size:11px; padding:4px 0; border-top:1px solid #eee4da;">Reasoning test</div>
+            <div style="font-size:11px; padding:4px 0; border-top:1px solid #eee4da;">Pricing page</div>
+            <div style="font-size:11px; padding:4px 0; border-top:1px solid #eee4da;">API docs</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>B. 半宽紧凑版</h3>
+      <p>宽度约 50%，同时压缩卡片 padding、tab 行高和图标尺寸，让一屏能容纳更多分组与标签页。</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="c" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="mockup">
+        <div class="mockup-header">C. 超密度导航版</div>
+        <div class="mockup-body">
+          <div style="display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap;">
+            <div style="width:20px;height:20px;border-radius:999px;background:#b16d3a;"></div>
+            <div style="width:20px;height:20px;border-radius:999px;background:#d9d0c8;"></div>
+            <div style="width:20px;height:20px;border-radius:999px;background:#d7c8b9;"></div>
+            <div style="width:20px;height:20px;border-radius:999px;background:#d9d0c8;"></div>
+            <div style="width:20px;height:20px;border-radius:999px;background:#d7c8b9;"></div>
+            <div style="width:20px;height:20px;border-radius:999px;background:#d9d0c8;"></div>
+          </div>
+          <div style="width:46%; border:1px solid #d9d0c8; border-radius:10px; padding:8px 10px; background:#fffaf5;">
+            <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px;">
+              <div style="font-weight:600; font-size:13px;">GitHub</div>
+              <div style="font-size:10px; color:#b16d3a;">Close all</div>
+            </div>
+            <div style="font-size:10px; padding:3px 0; border-top:1px solid #eee4da;">Issue</div>
+            <div style="font-size:10px; padding:3px 0; border-top:1px solid #eee4da;">PR</div>
+            <div style="font-size:10px; padding:3px 0; border-top:1px solid #eee4da;">Actions</div>
+            <div style="font-size:10px; padding:3px 0; border-top:1px solid #eee4da;">Docs</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>C. 超密度导航版</h3>
+      <p>进一步缩窄卡片和图标，信息量最高，但可读性会更紧，容易显得拥挤。</p>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <p class="subtitle">打开这个链接查看并点选你喜欢的方向：<strong>http://localhost:59364</strong></p>
+  <p class="subtitle">看完在终端告诉我你选 A / B / C，或者直接说“B 但不要那么紧”。</p>
+</div>
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..c93dcc2
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,57 @@
+# Tab Harbor Agent Guide
+
+This file captures project-level design and implementation constraints for agents working in this repository.
+
+## Design Direction
+
+1. Tab Harbor is a quiet browser workspace, not a SaaS dashboard, wallpaper page, or gamified productivity product.
+2. Preserve the calm / literary / composed identity. Interfaces should feel like a reading desk or paper workspace.
+3. Prefer scanability over spectacle. If a change makes the page louder before it makes it clearer, reject it.
+4. Keep secondary controls quiet. Theme controls, drawer triggers, archive actions, and helper affordances must not visually outrank tab content.
+5. Avoid decorative chrome that does not improve hierarchy, orientation, or atmosphere.
+
+## UI Guardrails
+
+1. Do not rely on hover alone for critical controls or discoverability.
+2. Keyboard focus must stay visible and usable.
+3. Reduced-motion users must still understand every state change without animation.
+4. Compact controls still need comfortable hit targets.
+5. Theme changes must update the full environment, not just local controls.
+
+## Interaction Lessons
+
+1. Floating editors triggered from compact controls should anchor near the triggering element when practical; default corner placement is only a fallback.
+2. For dense icon reordering, prefer explicit grid tracks over `flex-wrap` when cross-row drag behavior matters.
+3. For icon drag-and-drop previews, use `ghost + slot` instead of converting the original node to `position: fixed`; keep the dragged visual under the pointer and the layout slot in the flow.
+4. Drag preview hit-testing should be based on stable slot positions captured at drag start, not on the currently reflowing DOM alone.
+5. FLIP animations in reorderable icon strips should only run for nodes whose order actually changed; avoid re-animating unaffected siblings.
+
+## Frontend Architecture
+
+1. This project is plain HTML, CSS, and ordered `<script>` tags with no bundler or ESM module system.
+2. Script load order is part of the runtime contract. Treat changes to `index.html` script order as high impact.
+3. Top-level bindings can collide across files. When destructuring from `globalThis`, use file-scoped prefixed aliases instead of shared short names.
+4. Keep `extension/app.js` as a thin orchestrator entry. Do not let it grow back into a catch-all runtime file.
+5. Prefer responsibility-based module boundaries such as:
+   - `ui-helpers.js`
+   - `theme-controls.js`
+   - `drawer-manager.js`
+   - `dashboard-runtime.js`
+
+## Refactor Safety
+
+1. After any script split, actively check for startup-time failures such as `Identifier has already been declared`.
+2. A passing `node --test extension/*.test.js` run is necessary but not sufficient for startup refactors.
+3. If the page shows static scaffolding but not dynamic tab data, first suspect runtime initialization failure before changing data logic.
+4. For startup regressions, inspect real browser console/runtime errors before continuing to refactor.
+
+## Validation
+
+1. Run `node --test extension/*.test.js` after code changes that affect UI structure, script loading, or runtime behavior.
+2. For script-loading or initialization changes, also verify the extension in a real browser session.
+
+## Reference
+
+Detailed rationale and lessons learned live in:
+- `docs/design-principles-and-lessons.md`
+- `.impeccable.md`
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..02f8145
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Han Zheng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/PRIVACY.md b/PRIVACY.md
new file mode 100644
index 0000000..44d7d79
--- /dev/null
+++ b/PRIVACY.md
@@ -0,0 +1,160 @@
+# Privacy Policy for Tab Harbor
+
+Last updated: 2026-05-27
+
+Tab Harbor is a Chrome extension that turns the browser new tab page into a calmer workspace for open tabs, quick links, saved reads, and lightweight todos.
+
+This Privacy Policy explains what data Tab Harbor accesses, how that data is used, and how it is stored.
+
+## 1. Summary
+
+Tab Harbor is designed to work locally in the browser.
+
+It does not require a user account.
+It does not sell user data.
+It does not use remote code.
+It does not send workspace data to a backend controlled by the developer.
+
+Most extension data is stored locally through Chrome extension storage APIs.
+
+## 2. Information the extension accesses
+
+To provide its core features, Tab Harbor may access the following categories of data:
+
+- Open tab metadata, including tab titles, URLs, and tab state
+- Quick links created by the user
+- Saved read-later items created by the user
+- Todo items created by the user
+- Theme, transparency, layout, and ordering preferences selected by the user
+- Clipboard image or SVG content, but only when the user explicitly pastes a custom shortcut icon
+
+Tab Harbor does not intentionally collect sensitive categories such as health data, financial account credentials, or personal communications.
+
+## 3. How the data is used
+
+Tab Harbor uses the accessed data only to provide the extension’s single purpose:
+
+- Show and organize the user’s current browser session in the new tab page
+- Help the user review, group, focus, close, deduplicate, save, and restore tabs
+- Let the user manage quick links, saved reads, and lightweight todos in one workspace
+- Restore user preferences and layout state when the new tab page is opened again
+- Let the user paste a custom icon into a shortcut when they explicitly choose to do so
+
+Tab Harbor does not use this data for advertising, profiling, creditworthiness, or unrelated analytics.
+
+## 4. Chrome permissions and why they are needed
+
+Tab Harbor requests the following Chrome permissions:
+
+### `tabs`
+
+Used to read and manage the user’s open tabs so the extension can:
+
+- display open tabs in the workspace
+- group tabs by site or workflow
+- focus a selected tab
+- close or deduplicate tabs at the user’s request
+- save or restore tabs as part of the read-later workflow
+
+### `storage`
+
+Used to store user-created and user-selected local state, including:
+
+- quick links
+- saved reads
+- todo items
+- theme settings
+- group order and layout order
+- other local workspace preferences
+
+### `search`
+
+Used when the user types into the built-in search field and explicitly submits a search.  
+This permission allows Tab Harbor to send the query through the browser’s default search engine in the current tab.
+
+### `clipboardRead`
+
+Used only when the user explicitly pastes an image or SVG into the shortcut editor to create a custom shortcut icon.  
+Tab Harbor does not continuously monitor or silently read clipboard contents in the background.
+
+### `tabGroups`
+
+Used when the user enables Chrome tab group sync features so the extension can:
+
+- read existing native Chrome tab groups
+- create or update Chrome tab groups to match the workspace
+- keep group titles, colors, and collapsed state aligned with the user’s chosen organization
+- respond when Chrome tab groups change outside the Tab Harbor page
+
+### `favicon`
+
+Used to let Tab Harbor request and display site icons for tabs, saved sessions, and quick shortcuts more reliably.  
+This may include Chrome’s packaged favicon endpoint, a site’s own `favicon.ico`, or a fallback favicon service when no better icon is available.
+
+## 5. Data storage and retention
+
+Tab Harbor stores extension data locally using Chrome extension storage APIs, primarily `chrome.storage.local`.
+
+This includes items such as:
+
+- quick links
+- saved reads
+- todos
+- theme preferences
+- layout and ordering preferences
+
+This data remains in the browser profile until the user removes it through the extension UI, clears extension storage, or uninstalls the extension.
+
+## 6. Data sharing
+
+Tab Harbor does not sell user data.
+
+Tab Harbor does not transfer user data to third parties except where necessary to perform a user-requested browser action, such as:
+
+- opening a page URL chosen by the user
+- sending a search query through the browser’s default search engine after the user explicitly submits it
+- requesting favicon resources needed to display site icons in the workspace
+
+Aside from those normal browser actions initiated by the user, Tab Harbor does not send workspace data to a developer-controlled remote service.
+
+## 7. Remote code
+
+Tab Harbor does not use remote code.
+
+All JavaScript and extension assets required to run the extension are packaged with the extension bundle. Tab Harbor does not download and execute external JavaScript or WebAssembly at runtime.
+
+## 8. Third-party services
+
+Tab Harbor relies on Chrome’s extension platform APIs to function.
+
+When a user opens a webpage or submits a search through the extension, the browser may connect to the destination website or the configured default search engine as part of the user’s explicit action.
+
+To render site icons, Tab Harbor may also request favicon resources from a page’s origin or a fallback favicon service based on the page URLs already visible in the workspace.
+
+## 9. User choices and controls
+
+Users can control their data by:
+
+- editing or deleting quick links
+- deleting saved reads or todos
+- changing theme and layout preferences
+- uninstalling the extension
+- clearing extension storage through browser settings
+
+If you do not want Tab Harbor to access your open tabs, do not use the extension.
+
+## 10. Children’s privacy
+
+Tab Harbor is not directed to children under 13, and the developer does not knowingly collect personal information from children.
+
+## 11. Changes to this policy
+
+This Privacy Policy may be updated from time to time to reflect product changes, permission changes, or legal requirements.
+
+The latest version will be published at the public URL associated with the extension listing.
+
+## 12. Contact
+
+If you have questions about this Privacy Policy or Tab Harbor, you may contact:
+
+- Publisher contact email: `lunatic.halle@gmail.com`
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6aac8c7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,132 @@
+# Tab Harbor
+
+[English](README.md) | [简体中文](README.zh-CN.md)
+
+**A calmer Chrome new tab dashboard for open tabs, quick links, saved sessions, and lightweight todos.**
+
+Tab Harbor turns Chrome's new tab page into a place where you can keep working. You immediately see what is already open, what should be saved for later, and what still needs your attention.
+
+<p align="center">
+  <img src="assets/readme/feature-tabs.png" alt="Tab Harbor overview" width="760">
+</p>
+
+## ✨ Core Highlights
+
+- **Tabs are automatically organized by domain.** Tab Harbor groups open pages by domain, and moves homepage-style tabs into a dedicated `Homepages` group, so you can quickly see what you are actually working on.
+- **You can still organize things around your own workflow.** When domain-based grouping is not enough, you can create manual groups, keep common quick links around, and jump back to the right section from the top icon rail.
+- **Saved tabs now behave more like sessions.** You can choose what to save, add tabs to an existing saved session, restore them later, and keep the overview tidy with collapsed session groups when you do not need every tab in front of you.
+- **Todos stay close, but out of the way.** The drawer lets you create, edit, delete, search, and archive todos without leaving the page.
+- **It keeps getting calmer without getting heavier.** You can switch themes, tune transparency, adjust text and shortcut size, set a custom background, sleep inactive tabs, and clean duplicate tabs with one click, while everything still stays in `chrome.storage.local` with no backend or account.
+
+## 🖼️ Feature Tour
+
+<table>
+  <tr>
+    <td width="33.33%" valign="top">
+      <strong>Unified tab management</strong><br><br>
+      <img src="assets/readme/feature-tabs.png" alt="Tabs" width="100%">
+    </td>
+    <td width="33.33%" valign="top">
+      <strong>Saved sessions</strong><br><br>
+      <img src="assets/readme/feature-saved-drawer.png" alt="Saved sessions drawer" width="100%">
+    </td>
+    <td width="33.33%" valign="top">
+      <strong>Todos and quick jumping</strong><br><br>
+      <img src="assets/readme/feature-todos.png" alt="Todos" width="100%">
+    </td>
+  </tr>
+</table>
+
+### Unified tab management
+
+Tab Harbor organizes tabs more like a workspace: **domain-based groups, manual groups, quick access links, and fast jumping from the top icon rail**. If you want to clean up the browser a bit more, you can **also remove duplicate tabs with one click**.
+
+### Saved sessions
+
+Pages you do not need right now can be **saved as sessions, added to an existing session, restored later, or kept collapsed for a quieter overview**.
+
+### Todos and quick jumping
+
+Tab Harbor also works as a tiny action layer: jot down todos, keep short descriptions, archive completed items, and jump back into the right group from the same page.
+
+### Theme switching
+
+When you want the page to feel more like your own workspace, you can **switch themes, tune transparency, adjust text and shortcut size, and use a custom background image**.
+
+<table>
+  <tr>
+    <td><img src="assets/readme/theme-warm-neutral.png" alt="warm neutral" width="100%"></td>
+    <td><img src="assets/readme/theme-soft-green.png" alt="soft green" width="100%"></td>
+  </tr>
+  <tr>
+    <td><img src="assets/readme/theme-soft-clay.png" alt="soft clay" width="100%"></td>
+    <td><img src="assets/readme/theme-custom-background.png" alt="custom background" width="100%"></td>
+  </tr>
+</table>
+
+### Manual sleep control
+
+When you want to slow a tab down without losing it, you can **sleep individual tabs or put an entire group to sleep from the workspace itself**.
+
+## 🌊 Why It Feels Different
+
+Most new tab pages try to be a search box, a wallpaper, or a speed dial. Tab Harbor is closer to a lightweight browser control room. It keeps the messy reality of browsing visible, but turns it into something calmer and more actionable.
+
+That also means it is intentionally lightweight. There is no backend, no sync account, and no extra app to open. It lives exactly where the browsing chaos already happens.
+
+## ⚡ Quick Use
+
+### Install from the Chrome Web Store
+
+1. Open Tab Harbor in the Chrome Web Store:
+
+   [Open Tab Harbor in the Chrome Web Store](https://chromewebstore.google.com/detail/tab-harbor/bkjihmeifgjifhkleokclpobdfnhiodf?authuser=0&hl=zh-CN)
+
+2. Install it from the store.
+3. Open a new tab in Chrome.
+
+Due to package review, the actual version may appear a little later.
+
+### Install with a coding agent
+
+1. Give your coding agent this repo:
+
+   ```text
+   https://github.com/V-IOLE-T/tab-harbor
+   ```
+
+2. Ask it to install the extension.
+3. Open a new tab in Chrome.
+
+### Install manually
+
+1. Clone this repo:
+
+   ```bash
+   git clone https://github.com/V-IOLE-T/tab-harbor.git
+   ```
+
+2. Open `chrome://extensions`
+3. Turn on **Developer mode**
+4. Click **Load unpacked**
+5. Select the [`extension/`](extension/) folder in Chrome, or the repo root in Edge
+6. Open a new tab
+
+## 🔒 Fully Local
+
+Tab Harbor runs entirely inside the extension. Open tabs come directly from Chrome, and saved sessions, todos, quick links, theme preferences, and layout state stay on your machine through `chrome.storage.local`.
+
+If you publish this repo for other people, they get the code and assets, not your personal browsing data.
+
+## 🛠️ Under the Hood
+
+This is a Manifest V3 Chrome extension with a plain frontend stack and no build step required to use it. You can clone it, load it, and start using it without npm, without a dev server, and without standing up anything else.
+
+## 🙏 Acknowledgements
+
+- Tab Harbor is built on top of Zara's open-source project [tab-out](https://github.com/zarazhangrui/tab-out), which is the upstream repository and the starting point for this project.
+- Thanks as well to the [Linux.do community](https://linux.do) for the ideas, feedback, and the kind of maker energy that helps projects like this keep evolving.
+
+## 📄 License
+
+MIT License
diff --git a/README.wehub.md b/README.wehub.md
new file mode 100644
index 0000000..a6f88e2
--- /dev/null
+++ b/README.wehub.md
@@ -0,0 +1,7 @@
+# WeHub 来源说明
+
+- 原始项目：`V-IOLE-T/tab-harbor`
+- 原始仓库：https://github.com/V-IOLE-T/tab-harbor
+- 导入方式：上游默认分支的最新快照
+- 原作者、版权和许可证信息以原始仓库及本仓库 LICENSE 为准
+- 本文件仅用于记录来源，不代表 WeHub 是原项目作者
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..ab7b094
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,131 @@
+# Tab Harbor
+
+[English](README.md) | [简体中文](README.zh-CN.md)
+
+**一个更安静的新标签页工作台，把打开中的标签、快捷链接、已保存会话和轻量待办收进同一个顺手的空间里。**
+
+Tab Harbor 会把 Chrome 的新标签页变成一个可以继续工作的地方。你会先看到自己现在到底开了什么、哪些内容适合稍后保存成会话、还有哪些事情还没处理完。
+
+<p align="center">
+  <img src="assets/readme/feature-tabs.png" alt="Tab Harbor 总览" width="760">
+</p>
+
+
+## ✨ 核心亮点
+
+- **标签页按域名自动整理。** Tab Harbor 会按域名整理打开中的页面，把首页型标签单独收到 `Homepages` 分组里，让你先看清自己到底在处理什么。
+- **自动分组之外，你也还能按自己的工作流继续整理。** 当域名分组不够用时，你可以创建手动分组、保留常用的 quick links，并通过顶部图标很快跳回需要的区域。
+- **已保存的标签页现在更像会话。** 你可以选择要保存哪些内容、把标签页加进已有会话、之后再恢复回来，也可以把会话折叠起来，让概览更干净。
+- **待办一直在身边，但不会太吵。** 抽屉里可以新建、编辑、删除、搜索和归档待办，不用离开页面。
+- **它尽量让工作台更安静，但不让系统更重。** 你可以切换主题、调透明度、调整文字和快捷链接大小、换背景图、让不活跃标签进入睡眠，也可以一键清理重复标签页；同时所有数据都还是保存在 `chrome.storage.local`，不需要服务器也不需要账号。
+
+## 🖼️ 功能展示
+
+<table>
+  <tr>
+    <td width="33.33%" valign="top">
+      <strong>标签页统一管理</strong><br><br>
+      <img src="assets/readme/feature-tabs.png" alt="标签页" width="100%">
+    </td>
+    <td width="33.33%" valign="top">
+      <strong>已保存会话</strong><br><br>
+      <img src="assets/readme/feature-saved-drawer.png" alt="已保存会话抽屉" width="100%">
+    </td>
+    <td width="33.33%" valign="top">
+      <strong>待办和跳转</strong><br><br>
+      <img src="assets/readme/feature-todos.png" alt="待办" width="100%">
+    </td>
+  </tr>
+</table>
+
+### 标签页统一管理
+
+Tab Harbor 会把标签页整理成更像工作区的结构：**按域名分组、支持手动分组、保留快捷入口，并且能从顶部图标快速跳回对应区域**；想把浏览器收拾利落一点时，**也可以一键清理重复标签页**。
+
+### 已保存会话
+
+那些“现在先不看，但之后一定要回来”的页面，可以**先保存成会话、加入已有会话、之后再恢复，或者折叠起来保留一个更安静的概览**。
+
+### 待办和跳转
+
+除了整理标签页，你还可以在这里顺手记下待办、补一点简短说明、归档完成项，并从顶部图标快速回到当前任务相关的分组。
+
+### 切换主题
+
+想让它更像你自己的工作台时，可以**切换主题、调透明度、调整文字和快捷链接大小、换背景图**。
+
+<table>
+  <tr>
+    <td><img src="assets/readme/theme-warm-neutral.png" alt="warm neutral" width="100%"></td>
+    <td><img src="assets/readme/theme-soft-green.png" alt="soft green" width="100%"></td>
+  </tr>
+  <tr>
+    <td><img src="assets/readme/theme-soft-clay.png" alt="soft clay" width="100%"></td>
+    <td><img src="assets/readme/theme-custom-background.png" alt="custom background" width="100%"></td>
+  </tr>
+</table>
+
+### 手动睡眠控制
+
+当你想让某个标签页先“睡一会儿”，又不想真的丢掉它时，可以**直接把单个标签页或整个分组放进睡眠状态**。
+
+## 🌊 为什么它用起来不一样
+
+很多新标签页产品想做的是搜索框、壁纸页，或者更漂亮一点的快捷方式面板。Tab Harbor 更像一个很轻的浏览器控制台。它不会假装你没有开很多标签页，而是承认这种混乱就是现实，然后把它整理成更能工作的样子。
+
+这也是它为什么尽量保持轻。没有后端，没有同步账号，也不需要你再开一个单独应用。所有混乱本来就发生在浏览器里，那它就直接在那里帮你收拾。
+
+## ⚡ 快速使用
+
+### 从 Google 应用商店安装
+
+1. 打开 Tab Harbor 的 Chrome 应用商店页面：
+
+   [在 Chrome 应用商店打开 Tab Harbor](https://chromewebstore.google.com/detail/tab-harbor/bkjihmeifgjifhkleokclpobdfnhiodf?authuser=0&hl=zh-CN)
+
+2. 直接从商店安装。
+3. 在 Chrome 里打开一个新标签页。
+
+由于商店版本需要打包审核，实际版本会稍微延后一点。
+
+### 用 coding agent 安装
+
+1. 把这个仓库地址给你的 coding agent：
+
+   ```text
+   https://github.com/V-IOLE-T/tab-harbor
+   ```
+2. 让它帮你安装扩展
+3. 在 Chrome 里打开一个新标签页
+
+### 手动安装
+
+1. 克隆仓库：
+
+   ```bash
+   git clone https://github.com/V-IOLE-T/tab-harbor.git
+   ```
+2. 打开 `chrome://extensions`
+3. 开启 **Developer mode**
+4. 点击 **Load unpacked**
+5. 在 Chrome 里选择 [`extension/`](extension/) 文件夹，Edge 里可直接选仓库根目录
+6. 打开一个新标签页
+
+## 🔒 完全本地
+
+Tab Harbor 完全运行在扩展内部。打开中的标签页直接来自 Chrome，已保存会话、Todos、Quick links、主题偏好和布局状态都留在你自己的机器上，通过 `chrome.storage.local` 保存。
+
+如果你把这个仓库发到 GitHub 给别人用，他们拿到的是代码和资源文件，不会带上你的个人浏览数据。
+
+## 🛠️ 底层
+
+这是一个 Manifest V3 的 Chrome 扩展，前端结构很轻，使用时也不需要 build step。你可以直接 clone、直接加载、直接开始用，不需要 npm，不需要 dev server，也不需要先把别的东西跑起来。
+
+## 🙏 致谢
+
+- Tab Harbor 基于 Zara 的开源项目 [tab-out](https://github.com/zarazhangrui/tab-out) 继续发展，它也是本项目的上游仓库和最初出发点。
+- 感谢 [Linux.do 社区](https://linux.do) 提供的灵感、反馈和很有生命力的开源氛围，让这个项目能持续往前长。
+
+## 📄 License
+
+MIT License
diff --git a/assets/readme/feature-saved-drawer.png b/assets/readme/feature-saved-drawer.png
new file mode 100644
index 0000000..f861f26
Binary files /dev/null and b/assets/readme/feature-saved-drawer.png differ
diff --git a/assets/readme/feature-tabs.png b/assets/readme/feature-tabs.png
new file mode 100644
index 0000000..3d84a09
Binary files /dev/null and b/assets/readme/feature-tabs.png differ
diff --git a/assets/readme/feature-todos.png b/assets/readme/feature-todos.png
new file mode 100644
index 0000000..9d9c49c
Binary files /dev/null and b/assets/readme/feature-todos.png differ
diff --git a/assets/readme/mockups.css b/assets/readme/mockups.css
new file mode 100644
index 0000000..c848bd8
--- /dev/null
+++ b/assets/readme/mockups.css
@@ -0,0 +1,463 @@
+:root {
+  color-scheme: light;
+  --ink: #1f1914;
+  --paper: #f6f0e6;
+  --paper-strong: #fffaf3;
+  --line: rgba(109, 84, 51, 0.16);
+  --accent: #c6723e;
+  --accent-soft: rgba(198, 114, 62, 0.12);
+  --sage: #5f7761;
+  --mist: #63768a;
+  --rose: #b46a70;
+  --shadow: 0 24px 60px rgba(69, 48, 22, 0.12);
+  --shadow-soft: 0 12px 24px rgba(69, 48, 22, 0.08);
+  font-family: "SF Pro Text", "DM Sans", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  width: 1440px;
+  height: 860px;
+  overflow: hidden;
+}
+
+body {
+  background:
+    radial-gradient(circle at top left, rgba(198, 114, 62, 0.16), transparent 30%),
+    radial-gradient(circle at bottom right, rgba(95, 119, 97, 0.15), transparent 28%),
+    linear-gradient(180deg, #f9f4ec 0%, #f3ece0 100%);
+  color: var(--ink);
+}
+
+.stage,
+.scene {
+  width: 100%;
+  height: 100%;
+}
+
+.scene {
+  display: none;
+  padding: 28px;
+}
+
+html[data-scene="overview"] .scene[data-scene="overview"],
+html[data-scene="saved"] .scene[data-scene="saved"],
+html[data-scene="todos"] .scene[data-scene="todos"],
+html[data-scene="themes"] .scene[data-scene="themes"] {
+  display: block;
+}
+
+.window {
+  height: 100%;
+  border: 1px solid rgba(151, 121, 83, 0.14);
+  border-radius: 32px;
+  background: rgba(255, 250, 243, 0.76);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--shadow);
+  padding: 24px 24px 28px;
+}
+
+.banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(98, 129, 105, 0.12);
+  border: 1px solid rgba(98, 129, 105, 0.18);
+  color: #38533d;
+  border-radius: 999px;
+  padding: 10px 14px;
+  font-size: 14px;
+}
+
+.banner.warning {
+  background: rgba(198, 114, 62, 0.12);
+  border-color: rgba(198, 114, 62, 0.2);
+  color: #7a4422;
+}
+
+.banner-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.7;
+}
+
+.banner-action {
+  margin-left: auto;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  font-weight: 600;
+}
+
+.hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-top: 20px;
+}
+
+.hero.compact {
+  margin-bottom: 18px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(70, 53, 35, 0.58);
+}
+
+h1,
+h2 {
+  margin: 0;
+  font-family: "Iowan Old Style", "Georgia", serif;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+h1 {
+  max-width: 760px;
+  font-size: 52px;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 30px;
+  line-height: 1.05;
+}
+
+.subcopy {
+  max-width: 760px;
+  margin: 16px 0 0;
+  color: rgba(48, 37, 26, 0.72);
+  font-size: 17px;
+  line-height: 1.6;
+}
+
+.search,
+.theme-trigger,
+.drawer-tabs {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 54px;
+  padding: 0 18px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 251, 245, 0.82);
+  box-shadow: var(--shadow-soft);
+  color: rgba(54, 41, 27, 0.7);
+}
+
+.search {
+  min-width: 340px;
+  justify-content: flex-start;
+}
+
+.search-icon {
+  font-size: 20px;
+}
+
+.shortcut-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 92px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(111, 88, 58, 0.14);
+  background: rgba(255, 251, 246, 0.84);
+  box-shadow: var(--shadow-soft);
+  font-weight: 600;
+}
+
+.shortcut.github { color: #7c4a2d; }
+.shortcut.docs { color: #4d6a7f; }
+.shortcut.local { color: #456a52; }
+.shortcut.read { color: #8a5260; }
+.shortcut.add { min-width: 54px; }
+
+.icon-rail {
+  display: flex;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+.icon-rail.left {
+  margin-top: 18px;
+}
+
+.rail-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 44px;
+  border-radius: 16px;
+  background: rgba(255, 248, 240, 0.8);
+  border: 1px solid rgba(111, 88, 58, 0.14);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: rgba(65, 49, 31, 0.76);
+}
+
+.rail-pill.active {
+  background: var(--accent-soft);
+  border-color: rgba(198, 114, 62, 0.24);
+  color: #874b27;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 22px;
+}
+
+.workspace-card,
+.drawer,
+.theme-panel {
+  border-radius: 26px;
+  border: 1px solid rgba(111, 88, 58, 0.14);
+  background: rgba(255, 251, 246, 0.86);
+  box-shadow: var(--shadow-soft);
+}
+
+.workspace-card {
+  padding: 20px 20px 18px;
+}
+
+.workspace-card.accent {
+  background:
+    linear-gradient(180deg, rgba(198, 114, 62, 0.11) 0%, rgba(255, 251, 246, 0.92) 100%);
+}
+
+.card-head,
+.drawer-header,
+.theme-header,
+.archive-row,
+.range-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.label {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(80, 60, 40, 0.52);
+}
+
+.badge,
+.mini-action {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(198, 114, 62, 0.1);
+  color: #8a4d29;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 12px;
+  border-radius: 14px;
+  background: rgba(244, 237, 226, 0.92);
+  color: rgba(58, 44, 29, 0.76);
+  font-size: 14px;
+}
+
+.split-layout,
+.theme-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.9fr);
+  gap: 20px;
+  margin-top: 12px;
+  height: calc(100% - 132px);
+}
+
+.left-stack {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+}
+
+.drawer,
+.theme-panel {
+  padding: 20px;
+}
+
+.list,
+.todo-card {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.list-item,
+.todo-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 18px;
+  background: rgba(243, 235, 224, 0.68);
+}
+
+.list-item p,
+.todo-row p {
+  margin: 6px 0 0;
+  color: rgba(67, 51, 34, 0.66);
+  font-size: 13px;
+}
+
+.checkbox,
+.todo-check {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  border-radius: 999px;
+  border: 2px solid rgba(120, 94, 61, 0.4);
+  flex-shrink: 0;
+}
+
+.todo-check.checked {
+  background: var(--sage);
+  border-color: var(--sage);
+  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.86);
+}
+
+.archive {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(111, 88, 58, 0.1);
+  color: rgba(64, 49, 32, 0.68);
+  font-size: 14px;
+}
+
+.drawer-tabs {
+  padding: 6px;
+  min-height: auto;
+  gap: 8px;
+}
+
+.drawer-tab {
+  padding: 10px 16px;
+  border-radius: 14px;
+  color: rgba(67, 51, 34, 0.66);
+}
+
+.drawer-tab.active {
+  background: rgba(198, 114, 62, 0.12);
+  color: #8a4d29;
+  font-weight: 700;
+}
+
+.theme-layout {
+  align-items: start;
+}
+
+.swatches {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.swatch {
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+  border: 1px solid rgba(111, 88, 58, 0.14);
+  box-shadow: var(--shadow-soft);
+}
+
+.swatch.paper { background: linear-gradient(135deg, #fff8ef, #d99865); }
+.swatch.sage { background: linear-gradient(135deg, #edf5e8, #7c9b81); }
+.swatch.mist { background: linear-gradient(135deg, #eef3f8, #7d95ab); }
+.swatch.blush { background: linear-gradient(135deg, #f8efef, #c78a8f); }
+
+.swatch.active {
+  outline: 3px solid rgba(198, 114, 62, 0.24);
+}
+
+.range-block {
+  margin-top: 18px;
+  padding: 16px;
+  border-radius: 20px;
+  background: rgba(244, 237, 226, 0.72);
+}
+
+.range-track {
+  position: relative;
+  height: 8px;
+  margin-top: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(198, 114, 62, 0.28), rgba(198, 114, 62, 0.1));
+}
+
+.range-thumb {
+  position: absolute;
+  top: 50%;
+  left: 32%;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #9f5c33;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 6px 16px rgba(94, 53, 25, 0.24);
+}
+
+.theme-preview {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.preview-card {
+  height: 160px;
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at top left, rgba(198, 114, 62, 0.16), transparent 34%),
+    rgba(255, 249, 242, 0.92);
+  border: 1px solid rgba(111, 88, 58, 0.12);
+}
+
+.preview-card.warm {
+  background:
+    radial-gradient(circle at bottom right, rgba(95, 119, 97, 0.18), transparent 34%),
+    rgba(250, 244, 236, 0.92);
+}
diff --git a/assets/readme/mockups.html b/assets/readme/mockups.html
new file mode 100644
index 0000000..6660851
--- /dev/null
+++ b/assets/readme/mockups.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tab Harbor README Mockups</title>
+  <link rel="stylesheet" href="./mockups.css">
+</head>
+<body>
+  <main class="stage">
+    <section class="scene" data-scene="overview">
+      <div class="window">
+        <div class="banner">
+          <span class="banner-dot"></span>
+          Domain-grouped tabs, custom groups, and one-click jumps from the top icon rail.
+        </div>
+        <header class="hero">
+          <div>
+            <p class="eyebrow">Tab Harbor</p>
+            <h1>Open tabs, sorted into calm workspaces.</h1>
+            <p class="subcopy">
+              Group by domain, keep quick links nearby, and give homepage tabs their own lane instead of letting
+              everything collapse into one endless browser strip.
+            </p>
+          </div>
+          <div class="search">
+            <span class="search-icon">⌕</span>
+            <span>Search with your default engine...</span>
+          </div>
+        </header>
+
+        <div class="shortcut-row">
+          <span class="shortcut github">GitHub</span>
+          <span class="shortcut docs">Docs</span>
+          <span class="shortcut local">Localhost</span>
+          <span class="shortcut read">Read Later</span>
+          <span class="shortcut add">+</span>
+        </div>
+
+        <div class="icon-rail">
+          <span class="rail-pill active">GH</span>
+          <span class="rail-pill">DOC</span>
+          <span class="rail-pill">LD</span>
+          <span class="rail-pill">LP</span>
+          <span class="rail-pill">HP</span>
+        </div>
+
+        <div class="content-grid">
+          <article class="workspace-card">
+            <div class="card-head">
+              <div>
+                <p class="label">github.com</p>
+                <h2>5 open tabs</h2>
+              </div>
+              <span class="badge">Auto group</span>
+            </div>
+            <div class="chips">
+              <span class="chip">repo / issues</span>
+              <span class="chip">README polish</span>
+              <span class="chip">PR diff</span>
+              <span class="chip">Actions</span>
+              <span class="chip">notifications</span>
+            </div>
+          </article>
+
+          <article class="workspace-card">
+            <div class="card-head">
+              <div>
+                <p class="label">Docs</p>
+                <h2>4 open tabs</h2>
+              </div>
+              <span class="badge">Jump fast</span>
+            </div>
+            <div class="chips">
+              <span class="chip">Chrome extension API</span>
+              <span class="chip">Manifest V3</span>
+              <span class="chip">CDP screenshot notes</span>
+              <span class="chip">Theme reference</span>
+            </div>
+          </article>
+
+          <article class="workspace-card accent">
+            <div class="card-head">
+              <div>
+                <p class="label">Launch Prep</p>
+                <h2>3 pinned tabs</h2>
+              </div>
+              <span class="badge">Custom group</span>
+            </div>
+            <div class="chips">
+              <span class="chip">README checklist</span>
+              <span class="chip">release notes</span>
+              <span class="chip">community post draft</span>
+            </div>
+          </article>
+
+          <article class="workspace-card">
+            <div class="card-head">
+              <div>
+                <p class="label">Homepages</p>
+                <h2>4 landing tabs</h2>
+              </div>
+              <span class="badge">Clean top bar</span>
+            </div>
+            <div class="chips">
+              <span class="chip">YouTube</span>
+              <span class="chip">LinkedIn</span>
+              <span class="chip">X</span>
+              <span class="chip">Gmail</span>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="scene" data-scene="saved">
+      <div class="window">
+        <header class="hero compact">
+          <div>
+            <p class="eyebrow">Saved For Later</p>
+            <h1>Turn “not now” tabs into an inbox.</h1>
+          </div>
+          <div class="drawer-tabs">
+            <span class="drawer-tab active">Saved</span>
+            <span class="drawer-tab">Todos</span>
+          </div>
+        </header>
+
+        <div class="split-layout">
+          <div class="left-stack">
+            <article class="workspace-card">
+              <div class="card-head">
+                <div>
+                  <p class="label">linux.do</p>
+                  <h2>3 open tabs</h2>
+                </div>
+                <span class="badge">Community</span>
+              </div>
+              <div class="chips">
+                <span class="chip">Extension feedback</span>
+                <span class="chip">Showcase thread</span>
+                <span class="chip">Launch notes</span>
+              </div>
+            </article>
+
+            <article class="workspace-card">
+              <div class="card-head">
+                <div>
+                  <p class="label">localhost</p>
+                  <h2>2 active tabs</h2>
+                </div>
+                <span class="badge">:3000 / :5173</span>
+              </div>
+              <div class="chips">
+                <span class="chip">preview build</span>
+                <span class="chip">extension sandbox</span>
+              </div>
+            </article>
+          </div>
+
+          <aside class="drawer">
+            <div class="drawer-header">
+              <div>
+                <p class="label">Saved for later</p>
+                <h2>5 waiting reads</h2>
+              </div>
+              <span class="mini-action">Search</span>
+            </div>
+
+            <div class="list">
+              <div class="list-item">
+                <div class="checkbox"></div>
+                <div>
+                  <strong>Designing calm productivity surfaces</strong>
+                  <p>Saved 2h ago · Medium</p>
+                </div>
+              </div>
+              <div class="list-item">
+                <div class="checkbox"></div>
+                <div>
+                  <strong>Chrome tabs API reference</strong>
+                  <p>Saved yesterday · developer.chrome.com</p>
+                </div>
+              </div>
+              <div class="list-item">
+                <div class="checkbox"></div>
+                <div>
+                  <strong>Tab-out inspiration notes</strong>
+                  <p>Saved yesterday · GitHub</p>
+                </div>
+              </div>
+              <div class="list-item">
+                <div class="checkbox"></div>
+                <div>
+                  <strong>README screenshot checklist</strong>
+                  <p>Saved 3m ago · local note</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="archive">
+              <div class="archive-row">
+                <span>Archive</span>
+                <span>12 done</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+
+    <section class="scene" data-scene="todos">
+      <div class="window">
+        <header class="hero compact">
+          <div>
+            <p class="eyebrow">Tasks In Context</p>
+            <h1>Keep todos where the tabs already live.</h1>
+          </div>
+          <div class="drawer-tabs">
+            <span class="drawer-tab">Saved</span>
+            <span class="drawer-tab active">Todos</span>
+          </div>
+        </header>
+
+        <div class="split-layout">
+          <div class="left-stack">
+            <article class="workspace-card accent">
+              <div class="card-head">
+                <div>
+                  <p class="label">Top icon rail</p>
+                  <h2>One click to jump</h2>
+                </div>
+                <span class="badge">Focused navigation</span>
+              </div>
+              <div class="icon-rail left">
+                <span class="rail-pill active">WK</span>
+                <span class="rail-pill">DOC</span>
+                <span class="rail-pill">GH</span>
+                <span class="rail-pill">RD</span>
+              </div>
+              <div class="chips">
+                <span class="chip">Work</span>
+                <span class="chip">Docs</span>
+                <span class="chip">GitHub</span>
+                <span class="chip">Reading</span>
+              </div>
+            </article>
+
+            <article class="workspace-card">
+              <div class="card-head">
+                <div>
+                  <p class="label">Quick capture</p>
+                  <h2>From a tab to a task</h2>
+                </div>
+                <span class="badge">No context switch</span>
+              </div>
+              <div class="chips">
+                <span class="chip">Write changelog</span>
+                <span class="chip">Trim duplicates</span>
+                <span class="chip">Reply in Linux.do</span>
+              </div>
+            </article>
+          </div>
+
+          <aside class="drawer">
+            <div class="drawer-header">
+              <div>
+                <p class="label">Todos</p>
+                <h2>4 active tasks</h2>
+              </div>
+              <span class="mini-action">New</span>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-row">
+                <span class="todo-check checked"></span>
+                <div>
+                  <strong>Refresh README screenshots</strong>
+                  <p>Feature showcase · in progress</p>
+                </div>
+              </div>
+              <div class="todo-row">
+                <span class="todo-check"></span>
+                <div>
+                  <strong>Highlight core selling points</strong>
+                  <p>Domain groups, custom groups, top rail jump</p>
+                </div>
+              </div>
+              <div class="todo-row">
+                <span class="todo-check"></span>
+                <div>
+                  <strong>Add upstream acknowledgement</strong>
+                  <p>Link to Zara's repo and Linux.do community</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="archive">
+              <div class="archive-row">
+                <span>Archive</span>
+                <span>7 completed</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+
+    <section class="scene" data-scene="themes">
+      <div class="window">
+        <div class="banner warning">
+          <span class="banner-dot"></span>
+          You have 2 Tab Harbor tabs open. Close extras and keep just this workspace.
+          <span class="banner-action">Close extras</span>
+        </div>
+
+        <header class="hero compact">
+          <div>
+            <p class="eyebrow">Theme Controls</p>
+            <h1>Switch themes, tune transparency, keep the browser tidy.</h1>
+          </div>
+          <div class="theme-trigger">Theme ▾</div>
+        </header>
+
+        <div class="theme-layout">
+          <article class="workspace-card">
+            <div class="card-head">
+              <div>
+                <p class="label">Cleanup actions</p>
+                <h2>Fast duplicate control</h2>
+              </div>
+              <span class="badge">One click</span>
+            </div>
+            <div class="chips">
+              <span class="chip">Close duplicate tabs</span>
+              <span class="chip">Close all in group</span>
+              <span class="chip">Keep one copy</span>
+            </div>
+          </article>
+
+          <aside class="theme-panel">
+            <div class="theme-header">
+              <div>
+                <p class="label">Appearance</p>
+                <h2>Paper themes</h2>
+              </div>
+              <span class="mini-action">Upload background</span>
+            </div>
+
+            <div class="swatches">
+              <span class="swatch paper active"></span>
+              <span class="swatch sage"></span>
+              <span class="swatch mist"></span>
+              <span class="swatch blush"></span>
+            </div>
+
+            <div class="range-block">
+              <div class="range-row">
+                <span>Surface transparency</span>
+                <strong>14%</strong>
+              </div>
+              <div class="range-track">
+                <span class="range-thumb"></span>
+              </div>
+            </div>
+
+            <div class="theme-preview">
+              <div class="preview-card"></div>
+              <div class="preview-card warm"></div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    const scene = new URLSearchParams(window.location.search).get('scene') || 'overview';
+    document.documentElement.dataset.scene = scene;
+  </script>
+</body>
+</html>
diff --git a/assets/readme/theme-custom-background.png b/assets/readme/theme-custom-background.png
new file mode 100644
index 0000000..61e1091
Binary files /dev/null and b/assets/readme/theme-custom-background.png differ
diff --git a/assets/readme/theme-soft-clay.png b/assets/readme/theme-soft-clay.png
new file mode 100644
index 0000000..e1e534c
Binary files /dev/null and b/assets/readme/theme-soft-clay.png differ
diff --git a/assets/readme/theme-soft-green.png b/assets/readme/theme-soft-green.png
new file mode 100644
index 0000000..65e0153
Binary files /dev/null and b/assets/readme/theme-soft-green.png differ
diff --git a/assets/readme/theme-warm-neutral.png b/assets/readme/theme-warm-neutral.png
new file mode 100644
index 0000000..9e291f6
Binary files /dev/null and b/assets/readme/theme-warm-neutral.png differ
diff --git a/assets/readme/小型宣传图块.jpg b/assets/readme/小型宣传图块.jpg
new file mode 100644
index 0000000..3cd03d2
Binary files /dev/null and b/assets/readme/小型宣传图块.jpg differ
diff --git a/assets/readme/屏幕截图/feature-saved-drawer.jpg b/assets/readme/屏幕截图/feature-saved-drawer.jpg
new file mode 100644
index 0000000..9561a01
Binary files /dev/null and b/assets/readme/屏幕截图/feature-saved-drawer.jpg differ
diff --git a/assets/readme/屏幕截图/feature-tabs.jpg b/assets/readme/屏幕截图/feature-tabs.jpg
new file mode 100644
index 0000000..14c6d19
Binary files /dev/null and b/assets/readme/屏幕截图/feature-tabs.jpg differ
diff --git a/assets/readme/屏幕截图/feature-todos.jpg b/assets/readme/屏幕截图/feature-todos.jpg
new file mode 100644
index 0000000..686efcd
Binary files /dev/null and b/assets/readme/屏幕截图/feature-todos.jpg differ
diff --git a/assets/readme/屏幕截图/theme-custom-background.jpg b/assets/readme/屏幕截图/theme-custom-background.jpg
new file mode 100644
index 0000000..37373f1
Binary files /dev/null and b/assets/readme/屏幕截图/theme-custom-background.jpg differ
diff --git a/assets/readme/屏幕截图/theme-soft-clay.jpg b/assets/readme/屏幕截图/theme-soft-clay.jpg
new file mode 100644
index 0000000..2dc0809
Binary files /dev/null and b/assets/readme/屏幕截图/theme-soft-clay.jpg differ
diff --git a/assets/readme/屏幕截图/theme-soft-green.jpg b/assets/readme/屏幕截图/theme-soft-green.jpg
new file mode 100644
index 0000000..454ba36
Binary files /dev/null and b/assets/readme/屏幕截图/theme-soft-green.jpg differ
diff --git a/assets/readme/屏幕截图/theme-warm-neutral.jpg b/assets/readme/屏幕截图/theme-warm-neutral.jpg
new file mode 100644
index 0000000..717da73
Binary files /dev/null and b/assets/readme/屏幕截图/theme-warm-neutral.jpg differ
diff --git a/assets/readme/顶部宣传图块.jpg b/assets/readme/顶部宣传图块.jpg
new file mode 100644
index 0000000..cf56c81
Binary files /dev/null and b/assets/readme/顶部宣传图块.jpg differ
diff --git a/docs/design-principles-and-lessons.md b/docs/design-principles-and-lessons.md
new file mode 100644
index 0000000..ad1ab88
--- /dev/null
+++ b/docs/design-principles-and-lessons.md
@@ -0,0 +1,399 @@
+# Tab Harbor 设计原则与试错复盘
+
+> 更新时间：2026-04-17
+> 适用范围：`extension/` 新标签页界面、后续 UI 优化、结构重构、agent 协作
+
+本文档把这次迭代中已经验证有效的设计原则、实现约束，以及踩过的坑整理成长期可复用的参考。目标不是记录一次性的对话结论，而是给后续设计、开发、重构和调试提供稳定依据。
+
+---
+
+## 1. 产品与视觉设计原则
+
+### 1.1 核心定位
+
+Tab Harbor 不是：
+- 一个炫技型新标签页
+- 一个强调“效率打卡”的 productivity dashboard
+- 一个 wallpaper-first 的装饰页
+
+Tab Harbor 更接近：
+- 一个安静的浏览器工作台
+- 一个可快速恢复上下文的 reading desk
+- 一个把“打开中的标签、已保存会话、轻量待办”收进同一空间的本地工具
+
+### 1.2 设计气质
+
+产品气质固定为：
+- calm
+- literary
+- composed
+
+后续任何新增界面都应该满足以下判断：
+- 是否在降低浏览器混乱感，而不是制造新噪音
+- 是否更像工作台，而不是更像展示页
+- 是否帮助用户快速回到手头工作，而不是先被界面本身吸引
+
+### 1.3 视觉方向
+
+推荐的视觉比喻：
+- quiet reading desk
+- paper-like workspace
+- editorial but functional
+
+应坚持的视觉特征：
+- 轻微带色的中性色，而不是冷白或纯灰
+- 可读性优先的排版，而不是夸张营销式层级
+- 节制的强调色，而不是四处抢眼的高对比点缀
+- 结构清晰、留白克制，而不是靠大量卡片和边框分组
+
+明确避免：
+- 通用 SaaS 后台感
+- 发光暗黑开发者首页感
+- 紫蓝霓虹、赛博发光、玻璃拟态堆叠
+- 大量 hero metrics、宣传式数据块
+- 把主题面板做成内容卡片墙
+
+### 1.4 信息密度原则
+
+Tab Harbor 的密度不是越低越好，也不是越高越好，而是“适合快速扫读”。
+
+有效做法：
+- 内容区密度可以偏高，但层级必须清楚
+- 辅助控制应收敛，不与主内容争抢注意力
+- 同一层级的元素要保持视觉家族感
+- 非核心文案尽量删除，用结构和版式替代解释
+
+应避免：
+- 为了“简洁”而隐藏关键状态
+- 为了“丰富”而重复说明用户已经知道的信息
+- 所有区块都长得像一套模板复制出来的卡片
+
+### 1.5 交互原则
+
+交互应满足：
+- immediate：操作后要立刻给反馈
+- local：像浏览器里的工具，而不是远端产品
+- quiet：反馈明确但不过度表演
+
+推荐：
+- hover/focus 反馈短、轻、清楚
+- drawer / theme panel 的开关和关闭动作足够直接
+- reduced motion 用户不依赖动画也能理解状态变化
+- 键盘焦点必须可见
+
+避免：
+- 只靠 hover 暴露关键动作
+- 需要解释性文案才能学会使用的控制
+- 为了“精致”牺牲点击面积和可达性
+
+### 1.6 主题系统原则
+
+主题系统不是换几颗按钮颜色，而是整页环境变化。
+
+必须同步响应主题的内容：
+- 页面背景和中性色
+- panel surface / card surface
+- hover / tooltip / underline / badge / archive action
+- slider rail / thumb
+- drawer trigger / theme panel / active state
+
+主题设计原则：
+- 默认以 light / softly tinted 主题为主
+- dark theme 可以有，但必须低眩光、纸面感、非电影感
+- accent 是稀缺资源，不应滥用
+- 自定义背景是 atmosphere，不是信息主体
+
+---
+
+## 2. 前端实现约束
+
+### 2.1 当前项目的现实约束
+
+这是一个无构建步骤的 Manifest V3 扩展页面，当前前端体系是：
+- 纯 HTML
+- 纯 CSS
+- 多个按顺序加载的普通脚本文件
+- 没有 bundler
+- 没有 ESM import/export
+
+这意味着：
+- 所有脚本共享同一个页面运行时环境
+- 加载顺序本身就是依赖管理的一部分
+- 任何顶层命名冲突都可能在脚本加载阶段直接把页面打断
+
+### 2.2 模块化原则
+
+在这个项目里，模块化应优先采用“按职责拆文件 + 明确加载顺序 + 显式全局挂载”的策略，而不是半套模块化。
+
+推荐模式：
+- `ui-helpers.js`：时间文案、域名/标题清洗、toast/confetti、共享 icon
+- `theme-controls.js`：主题状态、快捷链接、主题面板
+- `drawer-manager.js`：saved/todo/drawer 状态与渲染
+- `dashboard-runtime.js`：dashboard 主运行时
+- `app.js`：只做 orchestrator
+
+好的拆分标准：
+- 写入边界清楚
+- DOM 责任清楚
+- 状态拥有者清楚
+- 文件名能直接说明职责
+
+不好的拆分标准：
+- 只因为文件大就随意切
+- 一个模块同时拥有状态、渲染、事件绑定、工具函数且无边界
+- 让多个文件都“顺手”声明相同语义的顶层变量
+
+### 2.3 Orchestrator 原则
+
+入口文件 `app.js` 应尽量保持为：
+- 读取运行时入口
+- 做可失败的启动检查
+- 调用初始化
+
+不应再让 `app.js` 承担：
+- 大量业务逻辑
+- DOM 拼装
+- 状态定义
+- 子模块具体实现
+
+### 2.4 无构建脚本的全局命名原则
+
+在普通 `<script>` 环境中，顶层 `const` / `let` / `function` 不是“彼此天然隔离”的。
+
+经验规则：
+- 从 `globalThis` 解构出来的依赖，尽量使用模块级前缀别名
+- 不要在多个文件里重复声明同名顶层绑定
+- 公共入口统一挂在单一命名空间对象上，例如：
+  - `globalThis.TabHarborDashboardRuntime`
+
+推荐命名方式：
+- `themeGetIconSources`
+- `drawerNormalizeTodos`
+- `runtimeGetGroupIcon`
+- `appMountDashboardRuntime`
+
+这样做虽然略长，但在无构建环境里比“简短优雅”更安全。
+
+---
+
+## 3. 这次踩过的坑
+
+### 3.1 只跑静态测试，不足以证明页面真的能启动
+
+本次最重要的教训之一：
+
+`node --test extension/*.test.js` 全绿，并不等于浏览器页面真的能跑起来。
+
+原因：
+- 现有测试主要检查静态结构、关键字符串和 CSS 规则
+- 它们无法发现浏览器加载阶段的脚本异常
+- 它们也无法覆盖真实扩展权限环境下的初始化链
+
+正确做法：
+- 静态回归测试仍然要跑
+- 但涉及脚本拆分、入口变更、运行时初始化时，必须补真实浏览器验证
+
+### 3.2 无构建多脚本环境里，顶层重名会直接导致整页失效
+
+本次真实出现过的阻塞性问题：
+- 拆分后多个文件重复声明同名顶层 `const`
+- 浏览器直接报 `Identifier has already been declared`
+- 页面只剩静态骨架，看起来像“局部没渲染”，其实是启动链被打断
+
+这是高优先级风险，因为：
+- 错误发生在加载阶段
+- 用户界面会呈现“半活着”的状态
+- 如果只看截图，很容易误判成数据为空或权限问题
+
+正确做法：
+- 所有模块对外依赖统一加前缀别名
+- 所有运行时入口统一通过单一全局对象暴露
+- 脚本拆分后优先检查浏览器 console，而不是先改业务逻辑
+
+### 3.3 入口 orchestrator 也可能踩到同样的命名冲突
+
+本次另一个真实问题：
+- `app.js` 已经变成 orchestrator 后
+- 仍然把 `mountDashboardRuntime` 以原名解构到顶层
+- 这和上游全局绑定再次冲突，导致入口脚本自身加载失败
+
+经验：
+- 即使 orchestrator 非常薄，也仍然属于共享全局环境的一部分
+- “文件很小”不代表“不会污染全局”
+
+正确做法：
+- 入口同样使用别名，例如 `appMountDashboardRuntime`
+
+### 3.4 扩展环境里的“看起来没加载”不一定是 Chrome 缓存问题
+
+当页面只显示静态骨架时，常见误判是：
+- Chrome 没 reload 干净
+- tabs 数据为空
+- 扩展权限丢了
+
+这次的实际经验是：
+- 如果 greeting/date/open tabs 全部不渲染
+- 但静态 HTML 和 CSS 骨架还在
+- 优先怀疑脚本初始化阶段异常
+
+排查优先级应是：
+1. 浏览器 console 是否有加载阶段异常
+2. 入口脚本是否跑到初始化
+3. 运行时对象是否成功挂到 `globalThis`
+4. 再看 `chrome.tabs.query()`、storage、渲染分支
+
+### 3.5 真实浏览器调试比猜测更省时间
+
+这次最有效的调试动作不是继续读代码，而是：
+- 启动独立浏览器实例
+- 连接 DevTools 协议
+- 直接抓页面里的 `Runtime.exceptionThrown`
+
+一旦拿到真实异常，定位速度比截图推断快得多。
+
+后续建议保留这个排查顺序：
+- 先跑静态测试
+- 再跑真实浏览器页级检查
+- 有异常就先修启动链
+- 启动链无异常，再进业务逻辑
+
+### 3.6 紧凑图标拖拽不要直接把原节点提成 fixed
+
+本次快捷图标拖拽里，最容易反复走弯路的点是：
+- 直接把原卡片节点切到 `position: fixed`
+- 再让这个原节点同时承担“鼠标下的拖拽视觉”和“列表里的排序占位”
+
+这样做的副作用是：
+- 鼠标下的卡片容易在某些时刻消失、抖动或偏离指针
+- 原位置容易瞬间空掉，用户会以为元素丢了
+- DOM 既在跟手移动，又在参与排序预览，跨行时尤其容易打架
+
+正确做法：
+- 使用 `ghost + slot` 双层模型
+- `ghost` 只负责跟手显示，不参与列表布局
+- `slot` 只负责列表中的排序预览，不承担可见拖拽本体
+- 拖拽结束后，再把最终顺序持久化并整体重渲染
+
+触发信号：
+- 鼠标按下拖动时，元素“消失”或原位置瞬间空掉
+- 跨行拖动时，同一个元素既像在跟手，又像在参与列表 reflow
+
+适用范围：
+- `extension/` 中类似 quick shortcuts 这种高密度、小卡片、支持跨行拖拽的区域
+
+### 3.7 跨行拖拽命中不要依赖当前正在抖动的布局
+
+快捷图标拖拽里另一个核心教训是：
+- 如果预览命中完全依赖“当前这一帧重排后的 DOM 位置”
+- 那么跨行移动时，行分布、目标位置、FLIP 量测都会彼此影响
+- 结果就是：明明已经拖过去了，但不让位；或者刚让位又跳回来
+
+本次试错证明了三件事：
+1. 仅靠鼠标点 `clientX/clientY` 判定不够稳
+2. 仅靠当前 reflow 后的 `flex-wrap` 位置判定，跨行尤其容易抖
+3. 让位判定最好基于稳定槽位，而不是每一帧都“重新猜这次应该算哪一行哪一列”
+
+正确做法：
+- 在拖拽开始时记录稳定的槽位目标
+- 预览时用被拖卡片的几何中心去命中槽位
+- 命中结果只驱动 `slot` 移动
+- 不要让“当前正在动画中的兄弟节点位置”反过来影响判定
+
+如果后续仍需支持复杂跨行拖拽，优先级如下：
+1. 显式 grid 轨道
+2. 稳定 slot 目标
+3. 再考虑更细的命中阈值
+
+不推荐继续追加的错误方向：
+- 在 `flex-wrap` 上不断追加更多经验阈值
+- 同时混用“当前 DOM 行分组”和“静态推测列数”两套算法
+
+验证方式：
+- 第二个拖到第一个前面
+- 第二个拖到最后一个后面
+- 从上一行拖到下一行，再拖回原行
+- 观察是否存在“不让位”“无关兄弟闪回”“回到原位仍抖动”
+
+### 3.8 重排动画应只作用于真正受影响的兄弟节点
+
+本次另一个很容易被忽略的坑：
+- 即使排序逻辑正确
+- 如果每次 `pointermove` 都对整组兄弟重新做一次 FLIP
+- 那些其实没换位的节点也会被反复清空 transform、重新量测、重新启动动画
+
+用户看到的现象通常是：
+- 从第一个往后拖时，后面无关图标反复闪回
+- 从第二个拖到第三个后面时，第一个也跟着抖
+
+正确做法：
+- 新一轮预览前，先判断目标位置是否真的变化
+- 只对索引确实变化的那部分兄弟节点执行 settle + FLIP
+- 不要对整组节点统一扫一遍动画
+
+验证方式：
+- 拖动某个图标时，只有相邻受影响兄弟移动
+- 未跨过命中线时，其余图标保持静止
+
+### 3.9 紧凑工具触发的浮层应优先就近锚定
+
+本次 `Add link` 弹窗也踩过一个体验坑：
+- 固定把编辑弹窗放在右下角
+- 对用户来说，触发点和反馈点距离过远
+- 容易让人误以为没有打开，或需要重新找界面
+
+正确做法：
+- 打开弹窗时优先读取触发元素的 `getBoundingClientRect()`
+- 浮层默认锚定在触发按钮附近
+- 仅在空间不足时，再做视口内回退与防溢出处理
+
+适用范围：
+- 快捷图标编辑器
+- 后续类似的轻量 panel / editor / popover
+
+验证方式：
+- 从 `Add link` 打开时，弹窗应贴近按钮
+- 从卡片上的编辑按钮打开时，弹窗应贴近对应卡片
+- 视口边缘场景下不应溢出到屏幕外
+
+---
+
+## 4. 后续开发建议
+
+### 4.1 设计迭代时
+
+新增 UI 或交互前，先问 4 个问题：
+- 它是否更接近 quiet desk，而不是 dashboard showcase
+- 它是否帮助用户更快恢复上下文
+- 它是否引入了新的噪音或新的学习负担
+- 它是否尊重现有的 calm / literary / composed 方向
+
+### 4.2 结构重构时
+
+重构前先问 4 个问题：
+- 这个职责边界是否天然清楚
+- 这个文件是否拥有自己的状态
+- 这个模块是否会引入新的顶层命名冲突
+- 这次拆分后是否还有浏览器级验证，而不是只跑静态测试
+
+### 4.3 调试时
+
+遇到“页面骨架在，但数据没出来”的情况，优先走这个清单：
+1. 打开浏览器 console 看是否有脚本加载异常
+2. 看 orchestrator 是否成功调用 runtime
+3. 看 runtime 是否成功挂载
+4. 再看权限、数据和渲染逻辑
+
+---
+
+## 5. 可长期坚持的工程规则
+
+建议把下面这些规则视作 Tab Harbor 前端的长期约束：
+
+1. 设计优先服务“回到工作”，不是服务“界面存在感”。
+2. 主题系统必须驱动整页环境，而不是只改局部控件。
+3. 关键交互不能只在 hover 下可见，键盘焦点必须可达、可见。
+4. 无构建多脚本环境中，顶层命名必须显式去冲突。
+5. 结构重构后，必须至少做一次真实浏览器级验证。
+6. `app.js` 保持 orchestrator 角色，不再回退成巨型逻辑文件。
+
+如果后续实践证明这些规则仍然有效，建议继续把它们同步进更高层的协作文档，而不是只留在这份复盘里。
diff --git a/docs/superpowers/plans/2026-04-17-quiet-desk-ui-refresh.md b/docs/superpowers/plans/2026-04-17-quiet-desk-ui-refresh.md
new file mode 100644
index 0000000..347c37f
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-17-quiet-desk-ui-refresh.md
@@ -0,0 +1,54 @@
+# Quiet Desk UI Refresh Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Refresh the new tab experience so it scans faster, feels more like a quiet desk, and keeps the existing calm/productive identity.
+
+**Architecture:** Adjust the extension's existing HTML/CSS-first layout instead of rebuilding the page. Keep the current data flows in `app.js`, add a small amount of supporting UI copy/state wiring, and tighten the visual system so the page becomes more legible without losing its editorial warmth.
+
+**Tech Stack:** Plain HTML, CSS, vanilla JavaScript, Node `node:test`
+
+---
+
+### Task 1: Lock shared design context
+
+**Files:**
+- Create: `.github/copilot-instructions.md`
+- Modify: `.impeccable.md`
+
+- [ ] **Step 1: Mirror the approved design context into a shared agent instruction file**
+- [ ] **Step 2: Keep the project-level design context wording aligned with the approved calm / peaceful / literary direction**
+
+### Task 2: Rework the header, quick access area, and drawer triggers
+
+**Files:**
+- Modify: `extension/index.html`
+- Modify: `extension/app.js`
+- Modify: `extension/style.css`
+- Test: `extension/ui-regression.test.js`
+
+- [ ] **Step 1: Add clearer desk-oriented header support content and quick-link framing**
+- [ ] **Step 2: Add visible labels/meta for the saved/todo drawer triggers**
+- [ ] **Step 3: Wire header and trigger helper copy/counts from existing app state**
+- [ ] **Step 4: Update regression coverage for the new structural hooks**
+
+### Task 3: Tighten layout, typography, and interaction clarity
+
+**Files:**
+- Modify: `extension/style.css`
+- Modify: `extension/app.js`
+- Test: `extension/ui-regression.test.js`
+
+- [ ] **Step 1: Replace the current font pairing with a less templated editorial + utility pairing**
+- [ ] **Step 2: Reduce foggy surfaces / blur and rebalance page spacing for faster scanning**
+- [ ] **Step 3: Strengthen group-nav, section headers, mission cards, and drawer readability**
+- [ ] **Step 4: Clarify key copy and risky action labels where they currently feel too implicit**
+
+### Task 4: Verify the refresh
+
+**Files:**
+- Test: `extension/*.test.js`
+
+- [ ] **Step 1: Run the extension test suite with Node's test runner**
+- [ ] **Step 2: Review failures and adjust HTML/CSS/JS or tests until green**
+- [ ] **Step 3: Summarize the user-facing improvements and any residual risk**
diff --git a/extension/app.js b/extension/app.js
new file mode 100644
index 0000000..177211e
--- /dev/null
+++ b/extension/app.js
@@ -0,0 +1,31 @@
+'use strict';
+
+const {
+  mountDashboardRuntime: appMountDashboardRuntime,
+} = globalThis.TabHarborDashboardRuntime || {};
+
+const {
+  ready: appI18nReady,
+} = globalThis.TabHarborI18n || {};
+
+const {
+  TabHarborConfigReady: appConfigReady,
+} = globalThis;
+
+async function initializeApp() {
+  if (!appMountDashboardRuntime) {
+    throw new Error('Tab Harbor dashboard runtime is unavailable');
+  }
+
+  if (appConfigReady && typeof appConfigReady.then === 'function') {
+    await appConfigReady;
+  }
+
+  if (appI18nReady && typeof appI18nReady.then === 'function') {
+    await appI18nReady;
+  }
+
+  await appMountDashboardRuntime();
+}
+
+initializeApp();
diff --git a/extension/background-image.js b/extension/background-image.js
new file mode 100644
index 0000000..3f8ae16
--- /dev/null
+++ b/extension/background-image.js
@@ -0,0 +1,121 @@
+'use strict';
+
+(function attachBackgroundImage(globalScope) {
+  const MAX_BACKGROUND_EDGE = 1920;
+  const MAX_BACKGROUND_BYTES = 900 * 1024;
+  const BACKGROUND_IMAGE_TYPE = 'image/webp';
+  const BACKGROUND_IMAGE_QUALITIES = [0.82, 0.74, 0.66, 0.58, 0.5];
+  const BACKGROUND_IMAGE_EDGE_STEPS = [1, 0.88, 0.76, 0.64];
+
+  function constrainImageDimensions({ width, height, maxEdge = MAX_BACKGROUND_EDGE }) {
+    const safeWidth = Math.max(1, Math.round(Number(width) || 0));
+    const safeHeight = Math.max(1, Math.round(Number(height) || 0));
+    const safeMaxEdge = Math.max(1, Math.round(Number(maxEdge) || MAX_BACKGROUND_EDGE));
+    const largestEdge = Math.max(safeWidth, safeHeight);
+
+    if (largestEdge <= safeMaxEdge) {
+      return { width: safeWidth, height: safeHeight };
+    }
+
+    const scale = safeMaxEdge / largestEdge;
+    return {
+      width: Math.max(1, Math.round(safeWidth * scale)),
+      height: Math.max(1, Math.round(safeHeight * scale)),
+    };
+  }
+
+  function estimateDataUrlBytes(dataUrl) {
+    const value = String(dataUrl || '');
+    const marker = 'base64,';
+    const markerIndex = value.indexOf(marker);
+    if (markerIndex === -1) return 0;
+
+    const payload = value.slice(markerIndex + marker.length);
+    const padding = payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0;
+    return Math.max(0, Math.floor((payload.length * 3) / 4) - padding);
+  }
+
+  function loadImageFromFile(file) {
+    return new Promise((resolve, reject) => {
+      const objectUrl = URL.createObjectURL(file);
+      const image = new Image();
+
+      image.onload = () => {
+        URL.revokeObjectURL(objectUrl);
+        resolve(image);
+      };
+      image.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        reject(new Error('Could not read image'));
+      };
+      image.src = objectUrl;
+    });
+  }
+
+  async function compressImageFileForStorage(file, options = {}) {
+    if (!file || !String(file.type || '').startsWith('image/')) {
+      throw new Error('Please choose an image file');
+    }
+
+    const maxBytes = Math.max(32 * 1024, Number(options.maxBytes) || MAX_BACKGROUND_BYTES);
+    const maxEdge = Math.max(320, Number(options.maxEdge) || MAX_BACKGROUND_EDGE);
+    const image = await loadImageFromFile(file);
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d', { alpha: false });
+
+    if (!context) {
+      throw new Error('Could not prepare image compression');
+    }
+
+    let bestDataUrl = '';
+    let bestBytes = Number.POSITIVE_INFINITY;
+
+    for (const edgeStep of BACKGROUND_IMAGE_EDGE_STEPS) {
+      const dimensions = constrainImageDimensions({
+        width: image.naturalWidth,
+        height: image.naturalHeight,
+        maxEdge: Math.max(320, Math.round(maxEdge * edgeStep)),
+      });
+
+      canvas.width = dimensions.width;
+      canvas.height = dimensions.height;
+      context.clearRect(0, 0, dimensions.width, dimensions.height);
+      context.fillStyle = '#f6f0e6';
+      context.fillRect(0, 0, dimensions.width, dimensions.height);
+      context.drawImage(image, 0, 0, dimensions.width, dimensions.height);
+
+      for (const quality of BACKGROUND_IMAGE_QUALITIES) {
+        const dataUrl = canvas.toDataURL(BACKGROUND_IMAGE_TYPE, quality);
+        const bytes = estimateDataUrlBytes(dataUrl);
+        if (bytes < bestBytes) {
+          bestBytes = bytes;
+          bestDataUrl = dataUrl;
+        }
+        if (bytes <= maxBytes) {
+          return dataUrl;
+        }
+      }
+    }
+
+    if (bestDataUrl) {
+      throw new Error(`Image is too large even after compression (${Math.ceil(bestBytes / 1024)} KB)`);
+    }
+
+    throw new Error('Could not compress image');
+  }
+
+  const api = {
+    BACKGROUND_IMAGE_TYPE,
+    MAX_BACKGROUND_BYTES,
+    MAX_BACKGROUND_EDGE,
+    compressImageFileForStorage,
+    constrainImageDimensions,
+    estimateDataUrlBytes,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutBackgroundImage = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/background-image.test.js b/extension/background-image.test.js
new file mode 100644
index 0000000..7fd9690
--- /dev/null
+++ b/extension/background-image.test.js
@@ -0,0 +1,41 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  constrainImageDimensions,
+  estimateDataUrlBytes,
+  MAX_BACKGROUND_EDGE,
+} = require('./background-image.js');
+
+test('constrainImageDimensions keeps smaller images unchanged', () => {
+  assert.deepEqual(
+    constrainImageDimensions({ width: 1200, height: 800, maxEdge: MAX_BACKGROUND_EDGE }),
+    { width: 1200, height: 800 }
+  );
+});
+
+test('constrainImageDimensions scales landscape images down to the max edge', () => {
+  assert.deepEqual(
+    constrainImageDimensions({ width: 4000, height: 2000, maxEdge: 1920 }),
+    { width: 1920, height: 960 }
+  );
+});
+
+test('constrainImageDimensions scales portrait images down to the max edge', () => {
+  assert.deepEqual(
+    constrainImageDimensions({ width: 1800, height: 3600, maxEdge: 1600 }),
+    { width: 800, height: 1600 }
+  );
+});
+
+test('estimateDataUrlBytes converts base64 payload length to bytes', () => {
+  const payload = Buffer.from('tab-harbor-background').toString('base64');
+  const dataUrl = `data:image/jpeg;base64,${payload}`;
+
+  assert.equal(
+    estimateDataUrlBytes(dataUrl),
+    Buffer.byteLength('tab-harbor-background')
+  );
+});
diff --git a/extension/background.js b/extension/background.js
new file mode 100644
index 0000000..5583249
--- /dev/null
+++ b/extension/background.js
@@ -0,0 +1,160 @@
+/**
+ * background.js — Service Worker
+ *
+ * Keeps Tab Harbor pages in sync when tabs change.
+ * The toolbar badge is intentionally kept empty.
+ */
+
+const TAB_HARBOR_BG_DEBUG = false;
+if (TAB_HARBOR_BG_DEBUG) console.log('[tab-harbor bg] Service worker loaded, registering event listeners...');
+
+// ─── Auto-close duplicate new tabs ───────────────────────────────────────────
+
+function getNewTabUrls() {
+  return new Set([
+    chrome.runtime.getURL('index.html'),
+    chrome.runtime.getURL('extension/index.html'),
+  ]);
+}
+
+function isNewTabBlank(tab, newTabUrls) {
+  const knownNewTabUrls = newTabUrls instanceof Set
+    ? newTabUrls
+    : new Set(Array.isArray(newTabUrls) ? newTabUrls : [newTabUrls]);
+  const url = tab?.url || '';
+  const pendingUrl = tab?.pendingUrl || '';
+  if (pendingUrl && !knownNewTabUrls.has(pendingUrl) && pendingUrl !== 'chrome://newtab/') {
+    return false;
+  }
+  return (
+    url === 'chrome://newtab/' ||
+    knownNewTabUrls.has(url) ||
+    pendingUrl === 'chrome://newtab/' ||
+    knownNewTabUrls.has(pendingUrl) ||
+    url === '' ||
+    (tab.status === 'loading' && !url)
+  );
+}
+
+async function closeDuplicateNewTabs() {
+  try {
+    const stored = await chrome.storage.local.get('themePreferences');
+    const prefs = stored.themePreferences || {};
+    if (prefs.closeDuplicateNewTabsEnabled !== true) return;
+
+    const newTabUrls = getNewTabUrls();
+    const allTabs = await chrome.tabs.query({});
+    const blankTabs = allTabs.filter(tab => isNewTabBlank(tab, newTabUrls));
+
+    if (blankTabs.length <= 1) return;
+
+    // Keep the active tab; if none is active, keep the one with the largest id (newest)
+    const activeTab = blankTabs.find(tab => tab.active);
+    const toKeep = activeTab || blankTabs.reduce((a, b) => (a.id > b.id ? a : b));
+    const toClose = blankTabs.filter(tab => tab.id !== toKeep.id).map(tab => tab.id);
+
+    if (toClose.length > 0) await chrome.tabs.remove(toClose);
+  } catch (err) {
+    console.warn('[tab-harbor bg] closeDuplicateNewTabs error:', err.message);
+  }
+}
+
+async function updateBadge() {
+  try {
+    await chrome.action.setBadgeText({ text: '' });
+  } catch {
+    chrome.action.setBadgeText({ text: '' });
+  }
+}
+
+function getTabHarborDashboardUrls() {
+  const extensionId = chrome.runtime.id;
+  return new Set([
+    `chrome-extension://${extensionId}/index.html`,
+    `chrome-extension://${extensionId}/extension/index.html`,
+  ]);
+}
+
+// ─── Event listeners ──────────────────────────────────────────────────────────
+
+// Notify Tab Harbor pages when tabs change so they can refresh
+async function notifyTabHarborPages(eventMeta = {}) {
+  try {
+    // Find all Tab Harbor dashboard pages
+    const dashboardUrls = getTabHarborDashboardUrls();
+
+    // Query all tabs and filter manually for more reliable matching
+    const allTabs = await chrome.tabs.query({});
+
+    const dashboardTabs = allTabs.filter(tab => {
+      if (!tab.url) return false;
+      // Tab Harbor can appear as either:
+      // 1. chrome-extension://EXTENSION_ID/index.html (direct access)
+      // 2. chrome-extension://EXTENSION_ID/extension/index.html (root manifest entry)
+      // 3. chrome://newtab/ with title "Tab Harbor" (new tab override)
+      return (
+        dashboardUrls.has(tab.url) ||
+        (tab.url === 'chrome://newtab/' && tab.title === 'Tab Harbor')
+      );
+    });
+
+    if (dashboardTabs.length === 0) return;
+
+    for (const tab of dashboardTabs) {
+      try {
+        await chrome.tabs.sendMessage(tab.id, {
+          action: 'tabs-changed',
+          source: eventMeta.source || 'tabs.changed',
+          triggerTabId: eventMeta.triggerTabId ?? null,
+        });
+      } catch (err) {
+        // Tab might be closed or not ready, ignore
+        console.warn(`[tab-harbor bg] Failed to notify tab ${tab.id}:`, err.message);
+      }
+    }
+  } catch (err) {
+    console.warn('[tab-harbor bg] Error in notifyTabHarborPages:', err);
+  }
+}
+
+// Update badge when the extension is first installed
+chrome.runtime.onInstalled.addListener(() => {
+  updateBadge();
+});
+
+// Update badge when Chrome starts up
+chrome.runtime.onStartup.addListener(() => {
+  updateBadge();
+});
+
+// Update badge and notify Tab Harbor pages whenever a tab is opened
+chrome.tabs.onCreated.addListener((tab) => {
+  updateBadge();
+  notifyTabHarborPages({ source: 'tabs.onCreated', triggerTabId: tab?.id });
+  closeDuplicateNewTabs();
+});
+
+// Update badge and notify Tab Harbor pages whenever a tab is closed
+chrome.tabs.onRemoved.addListener((tabId) => {
+  updateBadge();
+  notifyTabHarborPages({ source: 'tabs.onRemoved', triggerTabId: tabId });
+});
+
+// Update badge and notify Tab Harbor pages when a tab's URL changes (e.g. navigating to/from chrome://)
+chrome.tabs.onUpdated.addListener((tabId) => {
+  updateBadge();
+  notifyTabHarborPages({ source: 'tabs.onUpdated', triggerTabId: tabId });
+});
+
+// ─── Initial run ─────────────────────────────────────────────────────────────
+
+// Run once immediately when the service worker first loads
+updateBadge();
+
+// ─── Test exports ────────────────────────────────────────────────────────────
+
+globalThis.TabHarborBackground = {
+  getNewTabUrls,
+  isNewTabBlank,
+  closeDuplicateNewTabs,
+};
diff --git a/extension/background.test.js b/extension/background.test.js
new file mode 100644
index 0000000..c095000
--- /dev/null
+++ b/extension/background.test.js
@@ -0,0 +1,197 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+// Track calls to chrome.tabs.remove
+let removedTabIds = [];
+let storageData = {};
+
+globalThis.chrome = {
+  runtime: {
+    id: 'test-extension-id',
+    getURL: path => `chrome-extension://test-extension-id/${path}`,
+  },
+  tabs: {
+    query: async () => [],
+    remove: async ids => { removedTabIds = removedTabIds.concat(ids); },
+  },
+  storage: {
+    local: {
+      get: async key => ({ [key]: storageData[key] || {} }),
+    },
+  },
+  action: {
+    setBadgeText: async () => {},
+  },
+  runtime: {
+    id: 'test-extension-id',
+    getURL: path => `chrome-extension://test-extension-id/${path}`,
+    onInstalled: { addListener: () => {} },
+    onStartup: { addListener: () => {} },
+  },
+  tabs: {
+    query: async () => [],
+    remove: async ids => { removedTabIds = removedTabIds.concat(ids); },
+    onCreated: { addListener: () => {} },
+    onRemoved: { addListener: () => {} },
+    onUpdated: { addListener: () => {} },
+  },
+  action: {
+    setBadgeText: async () => {},
+  },
+};
+
+require('./background.js');
+
+const { isNewTabBlank, closeDuplicateNewTabs } = globalThis.TabHarborBackground;
+
+// ─── isNewTabBlank ────────────────────────────────────────────────────────
+
+const EXT_URL = 'chrome-extension://test-extension-id/index.html';
+const ROOT_MANIFEST_EXT_URL = 'chrome-extension://test-extension-id/extension/index.html';
+
+test('isNewTabBlank matches chrome://newtab/', () => {
+  assert.equal(isNewTabBlank({ url: 'chrome://newtab/' }, EXT_URL), true);
+});
+
+test('isNewTabBlank matches extension index.html', () => {
+  assert.equal(isNewTabBlank({ url: EXT_URL }, EXT_URL), true);
+});
+
+test('isNewTabBlank matches extension/index.html from root manifest entry', () => {
+  assert.equal(isNewTabBlank({ url: ROOT_MANIFEST_EXT_URL }, [EXT_URL, ROOT_MANIFEST_EXT_URL]), true);
+});
+
+test('isNewTabBlank matches empty url', () => {
+  assert.equal(isNewTabBlank({ url: '' }, EXT_URL), true);
+});
+
+test('isNewTabBlank matches loading tab with no url', () => {
+  assert.equal(isNewTabBlank({ url: undefined, status: 'loading' }, EXT_URL), true);
+});
+
+test('isNewTabBlank does not match loading restored tab with normal pendingUrl', () => {
+  assert.equal(isNewTabBlank({ url: undefined, pendingUrl: 'https://example.com', status: 'loading' }, EXT_URL), false);
+});
+
+test('isNewTabBlank matches loading new tab with new-tab pendingUrl', () => {
+  assert.equal(isNewTabBlank({ url: undefined, pendingUrl: ROOT_MANIFEST_EXT_URL, status: 'loading' }, [EXT_URL, ROOT_MANIFEST_EXT_URL]), true);
+});
+
+test('isNewTabBlank does not match normal url', () => {
+  assert.equal(isNewTabBlank({ url: 'https://example.com' }, EXT_URL), false);
+});
+
+test('isNewTabBlank does not match loading tab with url', () => {
+  assert.equal(isNewTabBlank({ url: 'https://example.com', status: 'loading' }, EXT_URL), false);
+});
+
+// ─── closeDuplicateNewTabs ────────────────────────────────────────────────
+
+test('closeDuplicateNewTabs does nothing when feature is disabled', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: false } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: true },
+    { id: 2, url: 'chrome://newtab/', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, []);
+});
+
+test('closeDuplicateNewTabs does nothing when preference is missing', async () => {
+  storageData = { themePreferences: {} };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: true },
+    { id: 2, url: 'chrome://newtab/', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, []);
+});
+
+test('closeDuplicateNewTabs closes duplicate blank tabs when enabled', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: false },
+    { id: 2, url: 'chrome://newtab/', active: true },
+    { id: 3, url: 'https://example.com', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, [1]);
+});
+
+test('closeDuplicateNewTabs keeps active tab', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 10, url: EXT_URL, active: false },
+    { id: 20, url: 'chrome://newtab/', active: true },
+    { id: 30, url: '', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  // Should keep id=20 (active), close 10 and 30
+  assert.deepEqual(removedTabIds, [10, 30]);
+});
+
+test('closeDuplicateNewTabs keeps newest tab when none is active', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 5, url: 'chrome://newtab/', active: false },
+    { id: 15, url: 'chrome://newtab/', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  // Should keep id=15 (largest), close id=5
+  assert.deepEqual(removedTabIds, [5]);
+});
+
+test('closeDuplicateNewTabs does nothing with a single blank tab', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: true },
+    { id: 2, url: 'https://example.com', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, []);
+});
+
+test('closeDuplicateNewTabs handles mixed blank tab types', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: false },
+    { id: 2, url: EXT_URL, active: true },
+    { id: 3, url: '', active: false },
+    { id: 4, url: undefined, status: 'loading', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  // Keep id=2 (active), close 1, 3, 4
+  assert.deepEqual(removedTabIds, [1, 3, 4]);
+});
+
+test('closeDuplicateNewTabs treats root manifest new tab pages as blank tabs', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: ROOT_MANIFEST_EXT_URL, active: false },
+    { id: 2, url: 'chrome://newtab/', active: true },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, [1]);
+});
+
+test('closeDuplicateNewTabs preserves restored tabs while their final URLs are pending', async () => {
+  storageData = { themePreferences: { closeDuplicateNewTabsEnabled: true } };
+  removedTabIds = [];
+  globalThis.chrome.tabs.query = async () => [
+    { id: 1, url: 'chrome://newtab/', active: true },
+    { id: 2, url: undefined, pendingUrl: 'https://example.com/a', status: 'loading', active: false },
+    { id: 3, url: undefined, pendingUrl: 'https://example.com/b', status: 'loading', active: false },
+  ];
+  await closeDuplicateNewTabs();
+  assert.deepEqual(removedTabIds, []);
+});
diff --git a/extension/chrome-tab-groups-import.js b/extension/chrome-tab-groups-import.js
new file mode 100644
index 0000000..1b5405a
--- /dev/null
+++ b/extension/chrome-tab-groups-import.js
@@ -0,0 +1,197 @@
+'use strict';
+
+(function attachChromeTabGroupImport(globalScope) {
+  const {
+    addSessionGroup,
+    normalizeSessionGroups,
+  } = globalScope.TabOutSessionGroups || {};
+
+  const EMPTY_META = {
+    entries: [],
+  };
+
+  function normalizeChromeImportedGroupMeta(input) {
+    const entries = Array.isArray(input?.entries)
+      ? input.entries
+        .filter(entry => entry && entry.sessionGroupId)
+        .map(entry => ({
+          sessionGroupId: String(entry.sessionGroupId),
+          chromeGroupId: entry.chromeGroupId == null ? null : Number(entry.chromeGroupId),
+          windowId: entry.windowId == null ? 0 : Number(entry.windowId),
+          title: String(entry.title || 'Group').trim() || 'Group',
+          color: String(entry.color || 'grey'),
+        }))
+      : [];
+
+    return { entries };
+  }
+
+  function buildMetaSignature(entry) {
+    return [
+      String(entry.windowId ?? 0),
+      String(entry.title || 'Group').trim() || 'Group',
+      String(entry.color || 'grey'),
+    ].join('::');
+  }
+
+  function buildUniqueGroupName(baseName, groups, excludeGroupId = '') {
+    const fallbackName = String(baseName || 'Group').trim() || 'Group';
+    const lowerFallback = fallbackName.toLowerCase();
+    const takenNames = new Set(
+      (groups || [])
+        .filter(group => group && group.id !== excludeGroupId)
+        .map(group => String(group.name || '').trim().toLowerCase())
+        .filter(Boolean)
+    );
+
+    if (!takenNames.has(lowerFallback)) return fallbackName;
+
+    let suffix = 2;
+    while (takenNames.has(`${lowerFallback} ${suffix}`)) suffix++;
+    return `${fallbackName} ${suffix}`;
+  }
+
+  function findReusableSessionGroupId(groups, assignments, nativeGroup) {
+    const nativeTabIds = Array.isArray(nativeGroup?.tabIds)
+      ? nativeGroup.tabIds.map(tabId => String(tabId)).filter(Boolean).sort()
+      : [];
+    if (!nativeTabIds.length) return '';
+
+    const nativeTitle = String(nativeGroup?.title || '').trim().toLowerCase();
+
+    for (const group of groups || []) {
+      const groupId = String(group?.id || '');
+      if (!groupId) continue;
+
+      const assignedTabIds = Object.entries(assignments || {})
+        .filter(([, assignedGroupId]) => String(assignedGroupId) === groupId)
+        .map(([tabId]) => String(tabId))
+        .sort();
+      if (!assignedTabIds.length || assignedTabIds.length !== nativeTabIds.length) continue;
+      if (!assignedTabIds.every((tabId, index) => tabId === nativeTabIds[index])) continue;
+
+      const groupName = String(group?.name || '').trim().toLowerCase();
+      if (!nativeTitle || !groupName || nativeTitle === groupName) {
+        return groupId;
+      }
+    }
+
+    return '';
+  }
+
+  function reconcileChromeTabGroupImports({
+    currentState,
+    importedMeta,
+    nativeGroups,
+  }) {
+    if (typeof normalizeSessionGroups !== 'function' || typeof addSessionGroup !== 'function') {
+      throw new Error('Session group helpers are unavailable');
+    }
+
+    const normalizedState = normalizeSessionGroups(currentState);
+    const normalizedMeta = normalizeChromeImportedGroupMeta(importedMeta);
+    const managedIds = new Set(normalizedMeta.entries.map(entry => entry.sessionGroupId));
+    const sessionGroupIds = new Set(normalizedState.groups.map(group => group.id));
+
+    let groups = normalizedState.groups.filter(group => !managedIds.has(group.id) || sessionGroupIds.has(group.id));
+    let assignments = {};
+    for (const [tabId, groupId] of Object.entries(normalizedState.assignments)) {
+      if (managedIds.has(groupId)) continue;
+      assignments[tabId] = groupId;
+    }
+
+    const metaByChromeGroupId = new Map();
+    const metaBySignature = new Map();
+    for (const entry of normalizedMeta.entries) {
+      if (!sessionGroupIds.has(entry.sessionGroupId)) continue;
+      if (entry.chromeGroupId != null) metaByChromeGroupId.set(entry.chromeGroupId, entry);
+      metaBySignature.set(buildMetaSignature(entry), entry);
+    }
+
+    const nextMetaEntries = [];
+    const mappings = [];
+
+    for (const nativeGroup of (nativeGroups || [])) {
+      const chromeGroupId = nativeGroup?.chromeGroupId == null ? null : Number(nativeGroup.chromeGroupId);
+      const windowId = nativeGroup?.windowId == null ? 0 : Number(nativeGroup.windowId);
+      const title = String(nativeGroup?.title || 'Group').trim() || 'Group';
+      const color = String(nativeGroup?.color || 'grey');
+      const tabIds = Array.isArray(nativeGroup?.tabIds)
+        ? nativeGroup.tabIds.filter(tabId => tabId != null).map(tabId => String(tabId))
+        : [];
+      if (tabIds.length === 0) continue;
+
+      const signature = buildMetaSignature({ windowId, title, color });
+      const existingMeta = (chromeGroupId != null && metaByChromeGroupId.get(chromeGroupId))
+        || metaBySignature.get(signature)
+        || null;
+
+      let sessionGroupId = existingMeta?.sessionGroupId || '';
+      let groupIndex = groups.findIndex(group => group.id === sessionGroupId);
+      if (groupIndex === -1) {
+        sessionGroupId = findReusableSessionGroupId(groups, normalizedState.assignments, nativeGroup);
+        groupIndex = groups.findIndex(group => group.id === sessionGroupId);
+      }
+
+      if (groupIndex === -1) {
+        const uniqueName = buildUniqueGroupName(title, groups);
+        const created = addSessionGroup({ groups, assignments }, uniqueName);
+        groups = created.state.groups;
+        assignments = created.state.assignments;
+        sessionGroupId = created.group.id;
+        groupIndex = groups.findIndex(group => group.id === sessionGroupId);
+      } else {
+        const uniqueName = buildUniqueGroupName(title, groups, sessionGroupId);
+        if (groups[groupIndex].name !== uniqueName) {
+          groups = groups.map(group => group.id === sessionGroupId
+            ? { ...group, name: uniqueName }
+            : group);
+        }
+      }
+
+      for (const tabId of tabIds) {
+        assignments[tabId] = sessionGroupId;
+      }
+
+      if (chromeGroupId != null) {
+        mappings.push({
+          virtualGroupKey: `__session_group__:${sessionGroupId}`,
+          windowId,
+          chromeGroupId,
+        });
+      }
+
+      nextMetaEntries.push({
+        sessionGroupId,
+        chromeGroupId,
+        windowId,
+        title,
+        color,
+      });
+    }
+
+    const activeManagedIds = new Set(nextMetaEntries.map(entry => entry.sessionGroupId));
+    groups = groups.filter(group => !managedIds.has(group.id) || activeManagedIds.has(group.id));
+    assignments = Object.fromEntries(
+      Object.entries(assignments).filter(([, groupId]) => !managedIds.has(groupId) || activeManagedIds.has(groupId))
+    );
+
+    return {
+      state: normalizeSessionGroups({ groups, assignments }),
+      importedMeta: normalizeChromeImportedGroupMeta({ entries: nextMetaEntries }),
+      mappings,
+    };
+  }
+
+  const api = {
+    EMPTY_META,
+    normalizeChromeImportedGroupMeta,
+    reconcileChromeTabGroupImports,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutChromeTabGroupImport = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/chrome-tab-groups-import.test.js b/extension/chrome-tab-groups-import.test.js
new file mode 100644
index 0000000..00e33a8
--- /dev/null
+++ b/extension/chrome-tab-groups-import.test.js
@@ -0,0 +1,182 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+require('./session-groups.js');
+require('./chrome-tab-groups-import.js');
+
+const {
+  reconcileChromeTabGroupImports,
+} = globalThis.TabOutChromeTabGroupImport;
+
+test('reconcileChromeTabGroupImports creates managed session groups for native Chrome groups', () => {
+  const result = reconcileChromeTabGroupImports({
+    currentState: { groups: [], assignments: {} },
+    importedMeta: { entries: [] },
+    nativeGroups: [
+      {
+        chromeGroupId: 101,
+        windowId: 1,
+        title: 'Work',
+        color: 'blue',
+        tabIds: [11, 12],
+      },
+    ],
+  });
+
+  assert.equal(result.state.groups.length, 1);
+  assert.equal(result.state.groups[0].name, 'Work');
+  assert.equal(result.state.assignments['11'], result.state.groups[0].id);
+  assert.equal(result.state.assignments['12'], result.state.groups[0].id);
+  assert.deepEqual(result.importedMeta.entries, [
+    {
+      sessionGroupId: result.state.groups[0].id,
+      chromeGroupId: 101,
+      windowId: 1,
+      title: 'Work',
+      color: 'blue',
+    },
+  ]);
+  assert.deepEqual(result.mappings, [
+    {
+      virtualGroupKey: `__session_group__:${result.state.groups[0].id}`,
+      windowId: 1,
+      chromeGroupId: 101,
+    },
+  ]);
+});
+
+test('reconcileChromeTabGroupImports reuses existing managed group and updates its title', () => {
+  const result = reconcileChromeTabGroupImports({
+    currentState: {
+      groups: [
+        { id: 'session-1', name: 'Old Work', createdAt: '2026-04-28T00:00:00.000Z' },
+      ],
+      assignments: { '11': 'session-1' },
+    },
+    importedMeta: {
+      entries: [
+        {
+          sessionGroupId: 'session-1',
+          chromeGroupId: 101,
+          windowId: 1,
+          title: 'Old Work',
+          color: 'blue',
+        },
+      ],
+    },
+    nativeGroups: [
+      {
+        chromeGroupId: 101,
+        windowId: 1,
+        title: 'Work',
+        color: 'red',
+        tabIds: [22],
+      },
+    ],
+  });
+
+  assert.equal(result.state.groups.length, 1);
+  assert.equal(result.state.groups[0].id, 'session-1');
+  assert.equal(result.state.groups[0].name, 'Work');
+  assert.deepEqual(result.state.assignments, { '22': 'session-1' });
+  assert.equal(result.importedMeta.entries[0].color, 'red');
+});
+
+test('reconcileChromeTabGroupImports removes stale managed groups when Chrome groups disappear', () => {
+  const result = reconcileChromeTabGroupImports({
+    currentState: {
+      groups: [
+        { id: 'managed-1', name: 'Imported', createdAt: '2026-04-28T00:00:00.000Z' },
+        { id: 'manual-1', name: 'Manual', createdAt: '2026-04-28T00:00:00.000Z' },
+      ],
+      assignments: {
+        '11': 'managed-1',
+        '22': 'manual-1',
+      },
+    },
+    importedMeta: {
+      entries: [
+        {
+          sessionGroupId: 'managed-1',
+          chromeGroupId: 101,
+          windowId: 1,
+          title: 'Imported',
+          color: 'blue',
+        },
+      ],
+    },
+    nativeGroups: [],
+  });
+
+  assert.deepEqual(result.state.groups.map(group => group.id), ['manual-1']);
+  assert.deepEqual(result.state.assignments, { '22': 'manual-1' });
+  assert.deepEqual(result.importedMeta.entries, []);
+});
+
+test('reconcileChromeTabGroupImports matches persisted metadata when Chrome group ids change after restart', () => {
+  const result = reconcileChromeTabGroupImports({
+    currentState: {
+      groups: [
+        { id: 'session-1', name: 'Work', createdAt: '2026-04-28T00:00:00.000Z' },
+      ],
+      assignments: {},
+    },
+    importedMeta: {
+      entries: [
+        {
+          sessionGroupId: 'session-1',
+          chromeGroupId: 101,
+          windowId: 3,
+          title: 'Work',
+          color: 'blue',
+        },
+      ],
+    },
+    nativeGroups: [
+      {
+        chromeGroupId: 808,
+        windowId: 3,
+        title: 'Work',
+        color: 'blue',
+        tabIds: [33],
+      },
+    ],
+  });
+
+  assert.equal(result.state.groups[0].id, 'session-1');
+  assert.equal(result.state.assignments['33'], 'session-1');
+  assert.equal(result.importedMeta.entries[0].chromeGroupId, 808);
+});
+
+test('reconcileChromeTabGroupImports reuses an existing session group by matching assignments and title when metadata is missing', () => {
+  const result = reconcileChromeTabGroupImports({
+    currentState: {
+      groups: [
+        { id: 'session-keep', name: 'Work', createdAt: '2026-04-28T00:00:00.000Z' },
+      ],
+      assignments: {
+        '41': 'session-keep',
+      },
+    },
+    importedMeta: {
+      entries: [],
+    },
+    nativeGroups: [
+      {
+        chromeGroupId: 909,
+        windowId: 1,
+        title: 'Work',
+        color: 'blue',
+        tabIds: [41],
+      },
+    ],
+  });
+
+  assert.equal(result.state.groups.length, 1);
+  assert.equal(result.state.groups[0].id, 'session-keep');
+  assert.equal(result.state.groups[0].name, 'Work');
+  assert.equal(result.state.assignments['41'], 'session-keep');
+  assert.equal(result.importedMeta.entries[0].sessionGroupId, 'session-keep');
+});
diff --git a/extension/chrome-tab-groups-sync.js b/extension/chrome-tab-groups-sync.js
new file mode 100644
index 0000000..080c640
--- /dev/null
+++ b/extension/chrome-tab-groups-sync.js
@@ -0,0 +1,519 @@
+'use strict';
+
+(function attachChromeTabGroups(globalScope) {
+
+  const STORAGE_KEY = 'chromeTabGroupsEnabled';
+  const META_PERSIST_KEY = 'chromeTabGroupsMeta';
+
+  let cachedEnabled = false;
+  let chromeGroupMap = {};
+  let importMode = false;
+  let chromeEventMuteUntil = 0;
+  let chromeListenersAttached = false;
+  const chromeGroupSubscribers = new Set();
+
+  const GROUP_COLORS = ['grey', 'red', 'green', 'pink', 'purple', 'cyan', 'orange'];
+
+  function muteChromeGroupEvents(durationMs = 250) {
+    chromeEventMuteUntil = Math.max(chromeEventMuteUntil, Date.now() + durationMs);
+  }
+
+  function shouldIgnoreChromeEvent() {
+    return !cachedEnabled || Date.now() < chromeEventMuteUntil;
+  }
+
+  function notifyChromeGroupSubscribers(event) {
+    if (shouldIgnoreChromeEvent()) return;
+    for (const subscriber of chromeGroupSubscribers) {
+      try {
+        subscriber(event);
+      } catch {}
+    }
+  }
+
+  function shouldNotifyChromeGroupUpdate(changeInfo) {
+    if (!changeInfo || typeof changeInfo !== 'object') return false;
+    const changedKeys = Object.keys(changeInfo);
+    if (changedKeys.length === 0) return false;
+    return changedKeys.some(key => key !== 'collapsed');
+  }
+
+  function attachChromeListeners() {
+    if (chromeListenersAttached || typeof chrome === 'undefined') return;
+
+    const eventBindings = [
+      [chrome.tabGroups?.onCreated, group => notifyChromeGroupSubscribers({ source: 'tabGroups.onCreated', group })],
+      [chrome.tabGroups?.onUpdated, (groupId, changeInfo) => {
+        // Collapsing or expanding a group should not trigger a full import cycle.
+        if (!shouldNotifyChromeGroupUpdate(changeInfo)) return;
+        notifyChromeGroupSubscribers({ source: 'tabGroups.onUpdated', groupId, changeInfo });
+      }],
+      [chrome.tabGroups?.onRemoved, group => notifyChromeGroupSubscribers({ source: 'tabGroups.onRemoved', group })],
+      [chrome.tabs?.onAttached, (tabId, attachInfo) => notifyChromeGroupSubscribers({ source: 'tabs.onAttached', tabId, attachInfo })],
+      [chrome.tabs?.onCreated, tab => notifyChromeGroupSubscribers({ source: 'tabs.onCreated', tab })],
+      [chrome.tabs?.onDetached, (tabId, detachInfo) => notifyChromeGroupSubscribers({ source: 'tabs.onDetached', tabId, detachInfo })],
+      [chrome.tabs?.onMoved, async (tabId, moveInfo) => {
+        try {
+          const movedTab = await chrome.tabs.get(tabId);
+          if (movedTab?.groupId == null || Number(movedTab.groupId) < 0) return;
+          notifyChromeGroupSubscribers({ source: 'tabs.onMoved', tabId, moveInfo, tab: movedTab });
+        } catch {}
+      }],
+      [chrome.tabs?.onRemoved, (tabId, removeInfo) => notifyChromeGroupSubscribers({ source: 'tabs.onRemoved', tabId, removeInfo })],
+      [chrome.tabs?.onUpdated, (tabId, changeInfo, tab) => {
+        if (changeInfo?.groupId == null) return;
+        notifyChromeGroupSubscribers({ source: 'tabs.onUpdated', tabId, changeInfo, tab });
+      }],
+    ];
+
+    for (const [eventSource, listener] of eventBindings) {
+      if (eventSource && typeof eventSource.addListener === 'function') {
+        eventSource.addListener(listener);
+      }
+    }
+
+    chromeListenersAttached = true;
+  }
+
+  function getGroupTitle(group) {
+    if (group.domain === '__landing-pages__') return 'Homepages';
+    if (group.label) return group.label;
+    try {
+      const hostname = group.domain.replace(/^__session_group__:/, '');
+      return friendlyDomain(hostname);
+    } catch {
+      return group.domain;
+    }
+  }
+
+  function assignGroupColor(groupKey, index) {
+    if (groupKey.startsWith('__session_group__:')) return 'blue';
+    if (groupKey === '__landing-pages__') return 'yellow';
+    return GROUP_COLORS[index % GROUP_COLORS.length];
+  }
+
+  async function loadChromeTabGroupsSetting() {
+    try {
+      const stored = await chrome.storage.local.get(STORAGE_KEY);
+      cachedEnabled = Boolean(stored[STORAGE_KEY]);
+    } catch {
+      cachedEnabled = false;
+    }
+    await loadPersistedChromeGroupMap();
+    return cachedEnabled;
+  }
+
+  async function saveChromeTabGroupsSetting(enabled) {
+    cachedEnabled = Boolean(enabled);
+    await chrome.storage.local.set({ [STORAGE_KEY]: cachedEnabled });
+    return cachedEnabled;
+  }
+
+  async function persistChromeGroupMap() {
+    try {
+      // Save group metadata (title, color) instead of raw groupIds,
+      // since Chrome tab group IDs are only stable within a session.
+      const meta = {};
+      for (const [groupKey, windowMap] of Object.entries(chromeGroupMap)) {
+        for (const chromeGroupId of Object.values(windowMap)) {
+          try {
+            const group = await chrome.tabGroups.get(chromeGroupId);
+            if (group && !meta[groupKey]) {
+              meta[groupKey] = { title: group.title, color: group.color };
+            }
+          } catch {}
+        }
+      }
+      await chrome.storage.local.set({ [META_PERSIST_KEY]: meta });
+    } catch {}
+  }
+
+  async function loadPersistedChromeGroupMap() {
+    try {
+      const result = await chrome.storage.local.get(META_PERSIST_KEY);
+      const meta = result[META_PERSIST_KEY];
+      if (!meta || Object.keys(meta).length === 0) return;
+
+      const currentGroups = await chrome.tabGroups.query({});
+      const reconciled = {};
+
+      for (const [groupKey, info] of Object.entries(meta)) {
+        // Match by title + color — the values we control. After restart,
+        // Chrome assigns new groupIds, but our groups retain their title/color.
+        const match = currentGroups.find(g =>
+          g.title === info.title && g.color === info.color
+        );
+        if (match) {
+          if (!reconciled[groupKey]) reconciled[groupKey] = {};
+          reconciled[groupKey][match.windowId] = match.id;
+        }
+      }
+
+      chromeGroupMap = reconciled;
+    } catch {}
+  }
+
+  function isChromeApiAvailable() {
+    return typeof chrome !== 'undefined' &&
+      chrome.tabs && typeof chrome.tabs.group === 'function' &&
+      chrome.tabGroups && typeof chrome.tabGroups.update === 'function';
+  }
+
+  async function ungroupTabs(tabIds) {
+    if (!tabIds || tabIds.length === 0) return;
+    try {
+      await chrome.tabs.ungroup(tabIds);
+    } catch {
+      // Tab may have been closed already
+    }
+  }
+
+  async function reorderGroupedTabs(chromeGroupId, desiredTabIds, windowId) {
+    if (!chromeGroupId || !Array.isArray(desiredTabIds) || desiredTabIds.length <= 1) return;
+
+    let groupedTabs = [];
+    try {
+      groupedTabs = await chrome.tabs.query({ groupId: chromeGroupId });
+    } catch {
+      return;
+    }
+
+    if (!groupedTabs.length) return;
+
+    const currentTabs = groupedTabs
+      .filter(tab => desiredTabIds.includes(tab.id))
+      .sort((a, b) => a.index - b.index);
+    if (!currentTabs.length) return;
+
+    const currentOrder = currentTabs.map(tab => tab.id);
+    if (currentOrder.length === desiredTabIds.length &&
+        currentOrder.every((tabId, index) => tabId === desiredTabIds[index])) {
+      return;
+    }
+
+    const baseIndex = Math.min(...currentTabs.map(tab => tab.index));
+    for (const [offset, tabId] of desiredTabIds.entries()) {
+      try {
+        await chrome.tabs.move(tabId, { windowId, index: baseIndex + offset });
+      } catch {}
+    }
+  }
+
+  async function reorderWindowTabsByDesiredOrder(windowId, desiredTabIds) {
+    if (!Number.isFinite(windowId) || !Array.isArray(desiredTabIds) || desiredTabIds.length <= 1) return;
+
+    let windowTabs = [];
+    try {
+      windowTabs = await chrome.tabs.query({ windowId });
+    } catch {
+      return;
+    }
+
+    const relevantTabs = windowTabs
+      .filter(tab => desiredTabIds.includes(tab.id))
+      .sort((a, b) => a.index - b.index);
+    if (relevantTabs.length <= 1) return;
+
+    const currentOrder = relevantTabs.map(tab => tab.id);
+    if (currentOrder.length === desiredTabIds.length &&
+        currentOrder.every((tabId, index) => tabId === desiredTabIds[index])) {
+      return;
+    }
+
+    const baseIndex = Math.min(...relevantTabs.map(tab => tab.index));
+    for (const [offset, tabId] of desiredTabIds.entries()) {
+      try {
+        await chrome.tabs.move(tabId, { windowId, index: baseIndex + offset });
+      } catch {}
+    }
+  }
+
+  async function removeAllChromeGroups() {
+    muteChromeGroupEvents();
+    const allTrackedTabIds = [];
+    for (const windowMap of Object.values(chromeGroupMap)) {
+      for (const chromeGroupId of Object.values(windowMap)) {
+        try {
+          const group = await chrome.tabGroups.get(chromeGroupId);
+          if (group) {
+            const tabs = await chrome.tabs.query({ groupId: chromeGroupId });
+            allTrackedTabIds.push(...tabs.map(t => t.id).filter(Boolean));
+          }
+        } catch {
+          // Group may have been removed externally
+        }
+      }
+    }
+    if (allTrackedTabIds.length > 0) {
+      await ungroupTabs(allTrackedTabIds);
+    }
+    chromeGroupMap = {};
+    await persistChromeGroupMap();
+  }
+
+  async function syncChromeTabGroups(domainGroups) {
+    muteChromeGroupEvents();
+    await loadPersistedChromeGroupMap();
+
+    if (!cachedEnabled) {
+      await removeAllChromeGroups();
+      return;
+    }
+
+    if (!isChromeApiAvailable()) return;
+
+    // Build desired state: { groupKey: { windowId: [tabIds] } }
+    const desired = {};
+    const desiredWindowOrders = {};
+    for (const group of domainGroups) {
+      const groupKey = group.domain;
+      for (const tab of (group.tabs || [])) {
+        if (tab.id == null) continue;
+        const windowId = tab.windowId != null ? tab.windowId : 0;
+        if (!desired[groupKey]) desired[groupKey] = {};
+        if (!desired[groupKey][windowId]) desired[groupKey][windowId] = [];
+        desired[groupKey][windowId].push(tab.id);
+        if (!desiredWindowOrders[windowId]) desiredWindowOrders[windowId] = [];
+        desiredWindowOrders[windowId].push(tab.id);
+      }
+    }
+
+    // Collect current Chrome tab groups to check existence
+    let currentGroups = [];
+    try {
+      currentGroups = await chrome.tabGroups.query({});
+    } catch {}
+
+    const validGroupIds = new Set(currentGroups.map(g => g.id));
+
+    // Remove orphaned Chrome groups only for windows represented in this sync.
+    // Other windows may be managed by their own Tab Harbor new-tab page.
+    const desiredWindowIds = new Set(
+      Object.values(desired)
+        .flatMap(windowMap => Object.keys(windowMap))
+        .map(windowId => Number(windowId))
+        .filter(Number.isFinite)
+    );
+    for (const [groupKey, windowMap] of Object.entries(chromeGroupMap)) {
+      for (const [windowIdStr, chromeGroupId] of Object.entries(windowMap)) {
+        const windowId = Number(windowIdStr);
+        if (!validGroupIds.has(chromeGroupId)) {
+          delete windowMap[windowIdStr];
+          continue;
+        }
+
+        if (desiredWindowIds.has(windowId) && !desired[groupKey]?.[windowId]) {
+          try {
+            const tabs = await chrome.tabs.query({ groupId: chromeGroupId });
+            await ungroupTabs(tabs.map(t => t.id).filter(Boolean));
+          } catch {}
+          delete windowMap[windowIdStr];
+        }
+      }
+
+      if (Object.keys(windowMap).length === 0) {
+        delete chromeGroupMap[groupKey];
+      }
+    }
+
+    // Process each virtual group
+    let colorIndex = 0;
+    for (const [groupKey, windowMap] of Object.entries(desired)) {
+      const groupColor = assignGroupColor(groupKey, colorIndex);
+      const group = domainGroups.find(g => g.domain === groupKey);
+      const title = group ? getGroupTitle(group) : groupKey;
+      if (!groupKey.startsWith('__session_group__:')) {
+        colorIndex++;
+      }
+
+      for (const [windowIdStr, tabIds] of Object.entries(windowMap)) {
+        if (tabIds.length === 0) continue;
+
+        const windowId = Number(windowIdStr);
+        let chromeGroupId = chromeGroupMap[groupKey]?.[windowId];
+
+        // Reuse existing Chrome group if still valid
+        if (chromeGroupId != null && !validGroupIds.has(chromeGroupId)) {
+          chromeGroupId = null;
+        }
+
+        if (chromeGroupId == null) {
+          // In import mode, only reuse existing groups — don't create new ones
+          if (importMode) continue;
+
+          // Create new group
+          try {
+            chromeGroupId = await chrome.tabs.group({ tabIds });
+          } catch {
+            // Some tabs may have valid IDs but fail grouping; try one by one
+            for (const tabId of tabIds) {
+              try {
+                if (chromeGroupId == null) {
+                  chromeGroupId = await chrome.tabs.group({ tabIds: tabId });
+                } else {
+                  await chrome.tabs.group({ groupId: chromeGroupId, tabIds: tabId });
+                }
+              } catch {}
+            }
+          }
+
+          if (chromeGroupId != null) {
+            try {
+              await chrome.tabGroups.update(chromeGroupId, { title, color: groupColor, collapsed: true });
+            } catch {}
+          }
+        } else {
+          // Move tabs into existing group
+          try {
+            await chrome.tabs.group({ groupId: chromeGroupId, tabIds });
+          } catch {}
+        }
+
+        if (chromeGroupId != null) {
+          await reorderGroupedTabs(chromeGroupId, tabIds, windowId);
+        }
+
+        // Track the mapping
+        if (chromeGroupId != null) {
+          if (!chromeGroupMap[groupKey]) chromeGroupMap[groupKey] = {};
+          chromeGroupMap[groupKey][windowId] = chromeGroupId;
+        }
+      }
+    }
+
+    for (const [windowIdStr, orderedTabIds] of Object.entries(desiredWindowOrders)) {
+      await reorderWindowTabsByDesiredOrder(Number(windowIdStr), orderedTabIds);
+    }
+    await persistChromeGroupMap();
+  }
+
+  async function resetChromeGroupState() {
+    chromeGroupMap = {};
+    cachedEnabled = false;
+    importMode = false;
+    chromeEventMuteUntil = 0;
+    try {
+      await chrome.storage.local.remove(META_PERSIST_KEY);
+    } catch {}
+  }
+
+  function isChromeTabGroupsEnabled() {
+    return cachedEnabled;
+  }
+
+  function getChromeGroupCount() {
+    return Object.keys(chromeGroupMap).length;
+  }
+
+  async function populateChromeGroupMap(mappings) {
+    for (const { virtualGroupKey, windowId, chromeGroupId } of mappings) {
+      if (!chromeGroupMap[virtualGroupKey]) chromeGroupMap[virtualGroupKey] = {};
+      chromeGroupMap[virtualGroupKey][windowId] = chromeGroupId;
+    }
+    await persistChromeGroupMap();
+  }
+
+  async function queryExistingChromeGroups() {
+    try {
+      return await chrome.tabGroups.query({});
+    } catch {
+      return [];
+    }
+  }
+
+  async function collapseChromeTabGroupsInWindow(windowId) {
+    if (!cachedEnabled || !isChromeApiAvailable()) return;
+
+    const targetWindowId = Number(windowId);
+    if (!Number.isFinite(targetWindowId)) return;
+
+    let groups = [];
+    try {
+      groups = await chrome.tabGroups.query({});
+    } catch {
+      return;
+    }
+
+    const groupsInWindow = groups.filter(group => Number(group?.windowId) === targetWindowId);
+    muteChromeGroupEvents();
+
+    for (const group of groupsInWindow) {
+      if (Boolean(group.collapsed)) continue;
+      try {
+        await chrome.tabGroups.update(group.id, { collapsed: true });
+      } catch {}
+    }
+  }
+
+  async function syncChromeTabGroupExpansionForTab(tab) {
+    if (!cachedEnabled || !isChromeApiAvailable()) return;
+
+    const targetGroupId = Number(tab?.groupId);
+    const targetWindowId = Number(tab?.windowId);
+    if (!Number.isFinite(targetGroupId) || targetGroupId < 0) return;
+    if (!Number.isFinite(targetWindowId)) return;
+
+    let groups = [];
+    try {
+      groups = await chrome.tabGroups.query({});
+    } catch {
+      return;
+    }
+
+    const groupsInWindow = groups.filter(group => Number(group?.windowId) === targetWindowId);
+    muteChromeGroupEvents();
+
+    for (const group of groupsInWindow) {
+      const nextCollapsed = group.id !== targetGroupId;
+      if (Boolean(group.collapsed) === nextCollapsed) continue;
+      try {
+        await chrome.tabGroups.update(group.id, { collapsed: nextCollapsed });
+      } catch {}
+    }
+  }
+
+  function setImportMode(enabled) {
+    importMode = Boolean(enabled);
+  }
+
+  function isImportMode() {
+    return importMode;
+  }
+
+  function subscribeToChromeTabGroupChanges(listener) {
+    if (typeof listener !== 'function') {
+      return () => {};
+    }
+    attachChromeListeners();
+    chromeGroupSubscribers.add(listener);
+    return () => {
+      chromeGroupSubscribers.delete(listener);
+    };
+  }
+
+  const api = {
+    loadChromeTabGroupsSetting,
+    saveChromeTabGroupsSetting,
+    syncChromeTabGroups,
+    resetChromeGroupState,
+    isChromeTabGroupsEnabled,
+    getChromeGroupCount,
+    populateChromeGroupMap,
+    queryExistingChromeGroups,
+    collapseChromeTabGroupsInWindow,
+    syncChromeTabGroupExpansionForTab,
+    setImportMode,
+    isImportMode,
+    subscribeToChromeTabGroupChanges,
+    STORAGE_KEY,
+    assignGroupColor,
+    getGroupTitle,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutChromeTabGroups = api;
+
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/chrome-tab-groups-sync.test.js b/extension/chrome-tab-groups-sync.test.js
new file mode 100644
index 0000000..f166926
--- /dev/null
+++ b/extension/chrome-tab-groups-sync.test.js
@@ -0,0 +1,602 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+function createEventEmitter() {
+  const listeners = new Set();
+  return {
+    addListener(listener) {
+      listeners.add(listener);
+    },
+    removeListener(listener) {
+      listeners.delete(listener);
+    },
+    hasListener(listener) {
+      return listeners.has(listener);
+    },
+    emit(...args) {
+      for (const listener of listeners) listener(...args);
+    },
+  };
+}
+
+// Mock chrome APIs before loading the module
+const mockStorage = {};
+globalThis.chrome = {
+  storage: {
+    local: {
+      get: async (keys) => {
+        const key = Array.isArray(keys) ? keys[0] : keys;
+        return { [key]: mockStorage[key] ?? undefined };
+      },
+      set: async (items) => {
+        Object.assign(mockStorage, items);
+      },
+    },
+  },
+  tabs: {
+    group: async (opts) => 0,
+    get: async () => ({ id: 0, groupId: -1, windowId: 0 }),
+    move: async () => {},
+    ungroup: async () => {},
+    query: async (opts) => opts?.groupId != null ? [] : [],
+    onAttached: createEventEmitter(),
+    onCreated: createEventEmitter(),
+    onDetached: createEventEmitter(),
+    onMoved: createEventEmitter(),
+    onRemoved: createEventEmitter(),
+    onUpdated: createEventEmitter(),
+  },
+  tabGroups: {
+    query: async () => [],
+    update: async () => {},
+    get: async () => null,
+    onCreated: createEventEmitter(),
+    onRemoved: createEventEmitter(),
+    onUpdated: createEventEmitter(),
+  },
+};
+
+require('./chrome-tab-groups-sync.js');
+
+const {
+  loadChromeTabGroupsSetting,
+  saveChromeTabGroupsSetting,
+  syncChromeTabGroups,
+  collapseChromeTabGroupsInWindow,
+  syncChromeTabGroupExpansionForTab,
+  resetChromeGroupState,
+  isChromeTabGroupsEnabled,
+  getChromeGroupCount,
+  populateChromeGroupMap,
+  queryExistingChromeGroups,
+  setImportMode,
+  subscribeToChromeTabGroupChanges,
+  assignGroupColor,
+  getGroupTitle,
+} = globalThis.TabOutChromeTabGroups;
+
+test('assignGroupColor returns blue for session groups', () => {
+  assert.equal(assignGroupColor('__session_group__:g1', 0), 'blue');
+  assert.equal(assignGroupColor('__session_group__:g2', 5), 'blue');
+});
+
+test('assignGroupColor returns yellow for landing pages', () => {
+  assert.equal(assignGroupColor('__landing-pages__', 0), 'yellow');
+  assert.equal(assignGroupColor('__landing-pages__', 3), 'yellow');
+});
+
+test('assignGroupColor cycles through colors for domain groups', () => {
+  const colors = ['grey', 'red', 'green', 'pink', 'purple', 'cyan', 'orange'];
+  colors.forEach((expected, i) => {
+    assert.equal(assignGroupColor('example.com', i), expected);
+  });
+  // Cycles back
+  assert.equal(assignGroupColor('test.com', 7), colors[0]);
+});
+
+test('getGroupTitle returns friendly domain for regular groups', () => {
+  const group = { domain: 'github.com', tabs: [] };
+  const title = getGroupTitle(group);
+  assert.equal(typeof title, 'string');
+  assert.ok(title.length > 0);
+});
+
+test('getGroupTitle uses label for custom groups', () => {
+  const group = { domain: 'custom-key', label: 'Work', tabs: [] };
+  assert.equal(getGroupTitle(group), 'Work');
+});
+
+test('getGroupTitle returns Homepages for landing pages', () => {
+  const group = { domain: '__landing-pages__', tabs: [] };
+  assert.equal(getGroupTitle(group), 'Homepages');
+});
+
+test('loadChromeTabGroupsSetting returns false by default', async () => {
+  resetChromeGroupState();
+  delete mockStorage.chromeTabGroupsEnabled;
+  const result = await loadChromeTabGroupsSetting();
+  assert.equal(result, false);
+  assert.equal(isChromeTabGroupsEnabled(), false);
+});
+
+test('saveChromeTabGroupsSetting persists and updates cached state', async () => {
+  resetChromeGroupState();
+  const saved = await saveChromeTabGroupsSetting(true);
+  assert.equal(saved, true);
+  assert.equal(isChromeTabGroupsEnabled(), true);
+  assert.equal(mockStorage.chromeTabGroupsEnabled, true);
+
+  const loaded = await loadChromeTabGroupsSetting();
+  assert.equal(loaded, true);
+});
+
+test('saveChromeTabGroupsSetting toggles off correctly', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+  assert.equal(isChromeTabGroupsEnabled(), true);
+  await saveChromeTabGroupsSetting(false);
+  assert.equal(isChromeTabGroupsEnabled(), false);
+  assert.equal(mockStorage.chromeTabGroupsEnabled, false);
+});
+
+test('syncChromeTabGroups removes groups when disabled', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(false);
+
+  const groups = [
+    { domain: 'github.com', tabs: [{ id: 1, windowId: 1, url: 'https://github.com' }] },
+  ];
+
+  // Should not throw when disabled
+  await syncChromeTabGroups(groups);
+  assert.equal(getChromeGroupCount(), 0);
+});
+
+test('syncChromeTabGroups creates groups when enabled', async () => {
+  resetChromeGroupState();
+  let groupCallCount = 0;
+  let updateCallArgs = [];
+
+  globalThis.chrome.tabs.group = async (opts) => {
+    groupCallCount++;
+    return 100 + groupCallCount;
+  };
+
+  globalThis.chrome.tabGroups.update = async (id, opts) => {
+    updateCallArgs.push({ id, ...opts });
+  };
+
+  globalThis.chrome.tabGroups.query = async () => [];
+  globalThis.chrome.tabs.query = async (opts) => [];
+
+  await saveChromeTabGroupsSetting(true);
+
+  const groups = [
+    { domain: 'github.com', tabs: [{ id: 1, windowId: 1, url: 'https://github.com' }] },
+    { domain: 'example.com', tabs: [{ id: 2, windowId: 1, url: 'https://example.com' }] },
+  ];
+
+  await syncChromeTabGroups(groups);
+
+  assert.equal(groupCallCount, 2);
+  assert.equal(updateCallArgs.length, 2);
+  assert.equal(updateCallArgs[0].collapsed, true);
+  assert.equal(updateCallArgs[1].collapsed, true);
+  assert.equal(updateCallArgs[0].color, 'grey');
+  assert.equal(updateCallArgs[1].color, 'red');
+  assert.equal(getChromeGroupCount(), 2);
+});
+
+test('syncChromeTabGroups handles tabs in different windows', async () => {
+  resetChromeGroupState();
+  let groupCallCount = 0;
+
+  globalThis.chrome.tabs.group = async (opts) => {
+    groupCallCount++;
+    return 200 + groupCallCount;
+  };
+
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [];
+  globalThis.chrome.tabs.query = async (opts) => [];
+
+  await saveChromeTabGroupsSetting(true);
+
+  const groups = [
+    {
+      domain: 'github.com',
+      tabs: [
+        { id: 1, windowId: 1, url: 'https://github.com' },
+        { id: 3, windowId: 2, url: 'https://github.com/other' },
+      ],
+    },
+  ];
+
+  await syncChromeTabGroups(groups);
+
+  // Should create 1 group for each window → 2 total chrome.tabs.group calls
+  assert.equal(groupCallCount, 2);
+});
+
+test('syncChromeTabGroups reorders tabs inside a chrome group to match desired order', async () => {
+  resetChromeGroupState();
+  const moveCalls = [];
+
+  globalThis.chrome.tabs.group = async () => 901;
+  globalThis.chrome.tabs.move = async (tabId, opts) => {
+    moveCalls.push({ tabId, ...opts });
+  };
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [];
+  globalThis.chrome.tabs.query = async (opts) => {
+    if (opts?.groupId === 901) {
+      return [
+        { id: 2, groupId: 901, windowId: 1, index: 7 },
+        { id: 1, groupId: 901, windowId: 1, index: 8 },
+      ];
+    }
+    return [];
+  };
+
+  await saveChromeTabGroupsSetting(true);
+
+  await syncChromeTabGroups([
+    {
+      domain: 'github.com',
+      tabs: [
+        { id: 1, windowId: 1, url: 'https://github.com/1' },
+        { id: 2, windowId: 1, url: 'https://github.com/2' },
+      ],
+    },
+  ]);
+
+  assert.deepEqual(moveCalls, [
+    { tabId: 1, windowId: 1, index: 7 },
+    { tabId: 2, windowId: 1, index: 8 },
+  ]);
+});
+
+test('syncChromeTabGroups reorders grouped tabs across groups to match desired group order in a window', async () => {
+  resetChromeGroupState();
+  const moveCalls = [];
+
+  globalThis.chrome.tabs.group = async (opts) => opts.groupId ?? 0;
+  globalThis.chrome.tabs.move = async (tabId, opts) => {
+    moveCalls.push({ tabId, ...opts });
+  };
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [
+    { id: 501, title: 'GitHub', color: 'grey', windowId: 1 },
+    { id: 502, title: 'Bilibili', color: 'red', windowId: 1 },
+  ];
+  globalThis.chrome.tabs.query = async (opts) => {
+    if (opts?.groupId === 501) {
+      return [
+        { id: 11, groupId: 501, windowId: 1, index: 8 },
+      ];
+    }
+    if (opts?.groupId === 502) {
+      return [
+        { id: 22, groupId: 502, windowId: 1, index: 5 },
+      ];
+    }
+    if (opts?.windowId === 1) {
+      return [
+        { id: 22, windowId: 1, index: 5 },
+        { id: 11, windowId: 1, index: 8 },
+      ];
+    }
+    return [];
+  };
+
+  await saveChromeTabGroupsSetting(true);
+  await populateChromeGroupMap([
+    { virtualGroupKey: 'github.com', windowId: 1, chromeGroupId: 501 },
+    { virtualGroupKey: 'bilibili.com', windowId: 1, chromeGroupId: 502 },
+  ]);
+
+  await syncChromeTabGroups([
+    { domain: 'github.com', tabs: [{ id: 11, windowId: 1, url: 'https://github.com' }] },
+    { domain: 'bilibili.com', tabs: [{ id: 22, windowId: 1, url: 'https://bilibili.com' }] },
+  ]);
+
+  assert.deepEqual(
+    moveCalls.slice(-2),
+    [
+      { tabId: 11, windowId: 1, index: 5 },
+      { tabId: 22, windowId: 1, index: 6 },
+    ]
+  );
+});
+
+test('syncChromeTabGroups cleans up when disabled after being enabled', async () => {
+  resetChromeGroupState();
+  let ungroupCalls = [];
+
+  globalThis.chrome.tabs.ungroup = async (tabIds) => {
+    ungroupCalls.push(tabIds);
+  };
+
+  globalThis.chrome.tabs.group = async (opts) => 300;
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [];
+  globalThis.chrome.tabs.query = async (opts) => [];
+
+  await saveChromeTabGroupsSetting(true);
+
+  const groups = [
+    { domain: 'test.com', tabs: [{ id: 10, windowId: 1, url: 'https://test.com' }] },
+  ];
+
+  await syncChromeTabGroups(groups);
+  assert.ok(getChromeGroupCount() > 0);
+
+  // Now disable
+  await saveChromeTabGroupsSetting(false);
+  await syncChromeTabGroups(groups);
+
+  assert.equal(getChromeGroupCount(), 0);
+});
+
+test('syncChromeTabGroups handles empty tabs gracefully', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+  await syncChromeTabGroups([]);
+  assert.equal(getChromeGroupCount(), 0);
+});
+
+test('syncChromeTabGroups handles groups with no tabs', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+  await syncChromeTabGroups([{ domain: 'empty.com', tabs: [] }]);
+  assert.equal(getChromeGroupCount(), 0);
+});
+
+test('populateChromeGroupMap adds mappings to internal state', () => {
+  resetChromeGroupState();
+  populateChromeGroupMap([
+    { virtualGroupKey: 'github.com', windowId: 1, chromeGroupId: 101 },
+    { virtualGroupKey: 'github.com', windowId: 2, chromeGroupId: 102 },
+  ]);
+  assert.equal(getChromeGroupCount(), 1);
+});
+
+test('queryExistingChromeGroups returns groups from chrome.tabGroups.query', async () => {
+  globalThis.chrome.tabGroups.query = async () => [
+    { id: 1, title: 'Work', color: 'blue' },
+    { id: 2, title: 'Research', color: 'red' },
+  ];
+  const groups = await queryExistingChromeGroups();
+  assert.equal(groups.length, 2);
+  assert.equal(groups[0].title, 'Work');
+});
+
+test('syncChromeTabGroups reuses chromeGroupMap populated by populateChromeGroupMap', async () => {
+  resetChromeGroupState();
+  let lastGroupCall = null;
+
+  globalThis.chrome.tabs.group = async (opts) => {
+    lastGroupCall = opts;
+    return 500;
+  };
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [{ id: 500, title: 'GitHub', color: 'grey' }];
+  globalThis.chrome.tabs.query = async (opts) => [];
+
+  await saveChromeTabGroupsSetting(true);
+
+  // Pre-populate the mapping (simulating "pull from Chrome groups" scenario)
+  populateChromeGroupMap([
+    { virtualGroupKey: 'github.com', windowId: 1, chromeGroupId: 500 },
+  ]);
+
+  const groups = [
+    { domain: 'github.com', tabs: [{ id: 10, windowId: 1, url: 'https://github.com' }] },
+  ];
+
+  await syncChromeTabGroups(groups);
+
+  // Should have reused the existing group — called with groupId (reuse path), not tabIds (create path)
+  assert.equal(lastGroupCall.groupId, 500);
+  assert.deepEqual(lastGroupCall.tabIds, [10]);
+});
+
+test('syncChromeTabGroups only removes obsolete mappings in synced windows', async () => {
+  resetChromeGroupState();
+  const ungroupedTabIds = [];
+
+  globalThis.chrome.tabs.group = async (opts) => opts.groupId ?? 700;
+  globalThis.chrome.tabs.ungroup = async (tabIds) => {
+    ungroupedTabIds.push(...tabIds);
+  };
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [
+    { id: 501, title: 'GitHub', color: 'grey', windowId: 1 },
+    { id: 502, title: 'GitHub', color: 'grey', windowId: 2 },
+    { id: 503, title: 'Docs', color: 'blue', windowId: 2 },
+  ];
+  globalThis.chrome.tabs.query = async (opts) => {
+    if (opts?.groupId === 502) return [{ id: 202, windowId: 2 }];
+    if (opts?.groupId === 503) return [{ id: 203, windowId: 2 }];
+    return [];
+  };
+
+  await saveChromeTabGroupsSetting(true);
+  populateChromeGroupMap([
+    { virtualGroupKey: 'github.com', windowId: 1, chromeGroupId: 501 },
+    { virtualGroupKey: 'github.com', windowId: 2, chromeGroupId: 502 },
+    { virtualGroupKey: 'docs.example', windowId: 2, chromeGroupId: 503 },
+  ]);
+
+  await syncChromeTabGroups([
+    { domain: 'github.com', tabs: [{ id: 101, windowId: 1, url: 'https://github.com' }] },
+  ]);
+
+  assert.deepEqual(ungroupedTabIds, []);
+  assert.equal(getChromeGroupCount(), 2);
+});
+
+test('syncChromeTabGroups in import mode skips creating new groups for ungrouped tabs', async () => {
+  resetChromeGroupState();
+  let createCalls = 0;
+  let reuseCalls = 0;
+
+  globalThis.chrome.tabs.group = async (opts) => {
+    if (opts.groupId != null) {
+      reuseCalls++;
+      return opts.groupId;
+    }
+    createCalls++;
+    return 600 + createCalls;
+  };
+  globalThis.chrome.tabGroups.update = async () => {};
+  globalThis.chrome.tabGroups.query = async () => [{ id: 500, title: 'Work', color: 'blue' }];
+  globalThis.chrome.tabs.query = async (opts) => [];
+
+  await saveChromeTabGroupsSetting(true);
+
+  // Simulate import: populate chromeGroupMap with existing Chrome groups
+  populateChromeGroupMap([
+    { virtualGroupKey: '__session_group__:g1', windowId: 1, chromeGroupId: 500 },
+  ]);
+
+  // Enable import mode: only reuse, don't create
+  setImportMode(true);
+
+  const groups = [
+    { domain: '__session_group__:g1', label: 'Work', tabs: [{ id: 1, windowId: 1, url: 'https://a.com' }] },
+    { domain: 'github.com', tabs: [{ id: 5, windowId: 1, url: 'https://github.com' }] },
+  ];
+
+  await syncChromeTabGroups(groups);
+
+  // Work group reused existing Chrome group
+  assert.equal(reuseCalls, 1);
+  // github.com was SKIPPED (import mode, no matching Chrome group)
+  assert.equal(createCalls, 0);
+
+  // Disable import mode and sync again — now github.com should get a new group
+  setImportMode(false);
+  await syncChromeTabGroups(groups);
+  assert.equal(createCalls, 1);
+});
+
+test('subscribeToChromeTabGroupChanges notifies on external Chrome group changes', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+
+  const events = [];
+  const unsubscribe = subscribeToChromeTabGroupChanges(event => {
+    events.push(event);
+  });
+
+  globalThis.chrome.tabGroups.onUpdated.emit(501, { title: 'Work' });
+
+  assert.equal(events.length, 1);
+  assert.equal(events[0].source, 'tabGroups.onUpdated');
+
+  unsubscribe();
+});
+
+test('subscribeToChromeTabGroupChanges ignores collapse-only group updates', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+
+  const events = [];
+  const unsubscribe = subscribeToChromeTabGroupChanges(event => {
+    events.push(event);
+  });
+
+  globalThis.chrome.tabGroups.onUpdated.emit(501, { collapsed: true });
+
+  assert.equal(events.length, 0);
+
+  unsubscribe();
+});
+
+test('subscribeToChromeTabGroupChanges notifies when a grouped tab is moved', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+
+  const events = [];
+  globalThis.chrome.tabs.get = async (tabId) => ({
+    id: tabId,
+    groupId: 501,
+    windowId: 1,
+  });
+
+  const unsubscribe = subscribeToChromeTabGroupChanges(event => {
+    events.push(event);
+  });
+
+  globalThis.chrome.tabs.onMoved.emit(42, { windowId: 1, fromIndex: 3, toIndex: 6 });
+
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  assert.equal(events.length, 1);
+  assert.equal(events[0].source, 'tabs.onMoved');
+  assert.equal(events[0].tabId, 42);
+  assert.equal(events[0].tab.groupId, 501);
+
+  unsubscribe();
+});
+
+test('syncChromeTabGroupExpansionForTab expands target group and collapses sibling groups in same window', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+
+  const updateCalls = [];
+  globalThis.chrome.tabGroups.query = async () => [
+    { id: 101, windowId: 1, collapsed: true },
+    { id: 102, windowId: 1, collapsed: false },
+    { id: 103, windowId: 2, collapsed: false },
+  ];
+  globalThis.chrome.tabGroups.update = async (id, opts) => {
+    updateCalls.push({ id, ...opts });
+  };
+
+  await syncChromeTabGroupExpansionForTab({ groupId: 101, windowId: 1 });
+
+  assert.deepEqual(updateCalls, [
+    { id: 101, collapsed: false },
+    { id: 102, collapsed: true },
+  ]);
+});
+
+test('syncChromeTabGroupExpansionForTab skips work when Chrome sync is disabled', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(false);
+
+  let queryCount = 0;
+  globalThis.chrome.tabGroups.query = async () => {
+    queryCount++;
+    return [];
+  };
+
+  await syncChromeTabGroupExpansionForTab({ groupId: 101, windowId: 1 });
+
+  assert.equal(queryCount, 0);
+});
+
+test('collapseChromeTabGroupsInWindow collapses every expanded group in the target window', async () => {
+  resetChromeGroupState();
+  await saveChromeTabGroupsSetting(true);
+
+  const updateCalls = [];
+  globalThis.chrome.tabGroups.query = async () => [
+    { id: 101, windowId: 1, collapsed: false },
+    { id: 102, windowId: 1, collapsed: true },
+    { id: 103, windowId: 2, collapsed: false },
+  ];
+  globalThis.chrome.tabGroups.update = async (id, opts) => {
+    updateCalls.push({ id, ...opts });
+  };
+
+  await collapseChromeTabGroupsInWindow(1);
+
+  assert.deepEqual(updateCalls, [
+    { id: 101, collapsed: true },
+  ]);
+});
diff --git a/extension/config-loader.js b/extension/config-loader.js
new file mode 100644
index 0000000..4333267
--- /dev/null
+++ b/extension/config-loader.js
@@ -0,0 +1,17 @@
+'use strict';
+
+(function attachOptionalLocalConfig(globalScope) {
+  if (globalScope.TabHarborConfigReady && typeof globalScope.TabHarborConfigReady.then === 'function') {
+    return;
+  }
+
+  globalScope.TabHarborConfigReady = new Promise(resolve => {
+    const script = document.createElement('script');
+    script.src = 'config.local.js';
+    script.async = false;
+    script.dataset.tabHarborOptionalConfig = 'true';
+    script.onload = () => resolve();
+    script.onerror = () => resolve();
+    document.head.appendChild(script);
+  });
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/config.js b/extension/config.js
new file mode 100644
index 0000000..cab02e6
--- /dev/null
+++ b/extension/config.js
@@ -0,0 +1,9 @@
+'use strict';
+
+// Checked-in defaults. Private overrides can extend these via config.local.js.
+globalThis.LOCAL_LANDING_PAGE_PATTERNS = Array.isArray(globalThis.LOCAL_LANDING_PAGE_PATTERNS)
+  ? globalThis.LOCAL_LANDING_PAGE_PATTERNS
+  : [];
+globalThis.LOCAL_CUSTOM_GROUPS = Array.isArray(globalThis.LOCAL_CUSTOM_GROUPS)
+  ? globalThis.LOCAL_CUSTOM_GROUPS
+  : [];
diff --git a/extension/dashboard-runtime.js b/extension/dashboard-runtime.js
new file mode 100644
index 0000000..07abf5a
--- /dev/null
+++ b/extension/dashboard-runtime.js
@@ -0,0 +1,4793 @@
+/* ================================================================
+   Tab Harbor — Dashboard App (Pure Extension Edition)
+
+   This file is the brain of the dashboard. Now that the dashboard
+   IS the extension page (not inside an iframe), it can call
+   chrome.tabs and chrome.storage directly — no postMessage bridge needed.
+
+   What this file does:
+   1. Reads open browser tabs directly via chrome.tabs.query()
+   2. Groups tabs by domain with a landing pages category
+   3. Renders domain cards, banners, and stats
+   4. Handles all user actions (close tabs, saved sessions, focus tab)
+   5. Stores dashboard preferences and workspace state in chrome.storage.local
+   ================================================================ */
+
+'use strict';
+
+const {
+  getLanguagePreference: runtimeGetLanguagePreference,
+  setLanguagePreference: runtimeSetLanguagePreference,
+  t: runtimeT,
+} = globalThis.TabHarborI18n || {};
+
+const {
+  escapeHtml: runtimeEscapeHtml,
+  escapeHtmlAttribute: runtimeEscapeHtmlAttribute,
+  getFallbackLabel: runtimeGetFallbackLabel,
+  getGroupIcon: runtimeGetGroupIcon,
+  getIconSources: runtimeGetIconSources,
+  getPrimaryDomain: runtimeGetPrimaryDomain,
+} = globalThis.TabOutIconUtils || {};
+
+const {
+  addSessionGroup,
+  assignTabToSessionGroup,
+  clearTabSessionGroup,
+  normalizeSessionGroups,
+  pruneSessionGroups,
+  renameSessionGroup,
+} = globalThis.TabOutSessionGroups || {};
+
+const {
+  applyGroupOrder,
+  createReorderedKeys,
+  normalizeGroupOrderState,
+} = globalThis.TabOutGroupOrder || {};
+
+const {
+  clampTriggerTop: runtimeClampTriggerTop,
+} = globalThis.TabOutDeferredTriggerPosition || {};
+
+const {
+  loadChromeTabGroupsSetting,
+  saveChromeTabGroupsSetting,
+  syncChromeTabGroups,
+  collapseChromeTabGroupsInWindow,
+  syncChromeTabGroupExpansionForTab,
+  isChromeTabGroupsEnabled,
+  populateChromeGroupMap,
+  queryExistingChromeGroups,
+  setImportMode,
+  subscribeToChromeTabGroupChanges,
+} = globalThis.TabOutChromeTabGroups || {};
+
+const {
+  setImageFallbackAttributes: runtimeSetImageFallbackAttributes,
+} = globalThis;
+
+const {
+  EMPTY_META: runtimeEmptyChromeImportedMeta = { entries: [] },
+  normalizeChromeImportedGroupMeta,
+  reconcileChromeTabGroupImports,
+} = globalThis.TabOutChromeTabGroupImport || {};
+
+const {
+  reorderSubsetByIds,
+} = globalThis.TabOutListOrder || {};
+
+const {
+  compressImageFileForStorage,
+} = globalThis.TabOutBackgroundImage || {};
+
+const {
+  getSavedSessionRestoreMode: runtimeGetSavedSessionRestoreMode,
+} = globalThis.TabOutThemeControls || {};
+
+const {
+  getCanonicalTabUrl: runtimeGetCanonicalTabUrl,
+  isRestorableTabUrl: runtimeIsRestorableTabUrl,
+  parseSuspendedTabUrl: runtimeParseSuspendedTabUrl,
+} = globalThis.TabHarborTabUrlUtils || {};
+
+const {
+  addSavedTabSession: runtimeAddSavedTabSession,
+  appendSavedTabSessionTabs: runtimeAppendSavedTabSessionTabs,
+  buildSessionSnapshot: runtimeBuildSessionSnapshot,
+  createRestoredSessionGroups: runtimeCreateRestoredSessionGroups,
+  getSavedTabSessions: runtimeGetSavedTabSessions,
+} = globalThis.TabHarborTabSessions || {};
+
+/* ----------------------------------------------------------------
+   CHROME TABS — Direct API Access
+
+   Since this page IS the extension's new tab page, it has full
+   access to chrome.tabs and chrome.storage. No middleman needed.
+   ---------------------------------------------------------------- */
+
+// Visible open tabs for this dashboard window — populated by fetchOpenTabs()
+let openTabs = [];
+let allOpenTabIds = [];
+let sessionGroupsState = normalizeSessionGroups ? normalizeSessionGroups() : { groups: [], assignments: {} };
+const MANUAL_GROUP_PREFIX = '__session_group__:';
+const PAGE_CHIP_DRAG_DEBUG = false;
+const SESSION_GROUPS_KEY = 'sessionGroups';
+const IMPORTED_CHROME_GROUPS_KEY = 'importedChromeSessionGroups';
+let groupOrderState = normalizeGroupOrderState ? normalizeGroupOrderState() : { sessionOrder: [], pinnedOrder: [], pinEnabled: false };
+const GROUP_ORDER_KEY = 'groupOrder';
+let groupTabOrderState = {};
+const GROUP_TAB_ORDER_KEY = 'groupTabOrder';
+let groupLabelOverrides = {};
+const GROUP_LABEL_OVERRIDES_KEY = 'groupLabelOverrides';
+let groupRenameEditorState = null;
+let draggedGroupId = '';
+let dragStartPoint = null;
+let suppressJumpUntil = 0;
+let suppressPageChipClickUntil = 0;
+let draggedGroupButtonEl = null;
+let dragPlaceholderEl = null;
+let draggedDrawerItemId = '';
+let draggedDrawerItemEl = null;
+let drawerItemDragState = null;
+let drawerItemPlaceholderEl = null;
+let draggedPageChipId = '';
+let draggedPageChipEl = null;
+let pageChipDragState = null;
+let pageChipPlaceholderEl = null;
+let pageChipNewGroupSlotEl = null;
+let tabSessionPickerState = {
+  open: false,
+  mode: 'new',
+  source: 'current-window',
+  selectedTabIds: [],
+  newSessionName: '',
+  targetSessionId: '',
+  windowId: null,
+  groups: [],
+  savedSessions: [],
+};
+let chromeTabGroupsEnabled = false;
+let sleepControlEnabled = false;
+let importedChromeGroupMeta = normalizeChromeImportedGroupMeta
+  ? normalizeChromeImportedGroupMeta(runtimeEmptyChromeImportedMeta)
+  : { entries: [] };
+let chromeTabGroupsImportTimer = null;
+let chromeTabGroupsUnsubscribe = null;
+let chromeTabGroupsImportInFlight = false;
+let suppressChromeTabGroupsImportUntil = 0;
+let currentDashboardTabId = null;
+let currentDashboardWindowId = null;
+let dashboardStartupTabChangeIgnoreUntil = 0;
+const ENTRY_ANIMATIONS_CLASS = 'entry-animations-enabled';
+let entryAnimationsTimer = null;
+const CHROME_TAB_GROUPS_DEBUG_KEY = 'chromeTabGroupsDebug';
+const HITOKOTO_CACHE_KEY = 'hitokotoCache';
+const HITOKOTO_CACHE_LIMIT = 5;
+
+function reorderVisibleItemsByIds(items, orderIds, includeItem) {
+  if (reorderSubsetByIds) {
+    return reorderSubsetByIds(items, orderIds, includeItem);
+  }
+
+  if (!Array.isArray(items)) return [];
+  const list = items.slice();
+  const shouldInclude = typeof includeItem === 'function' ? includeItem : () => true;
+  const subset = list.filter(shouldInclude);
+  const normalizedOrder = Array.isArray(orderIds) ? orderIds.map(id => String(id)).filter(Boolean) : [];
+  if (!subset.length || subset.length !== normalizedOrder.length) return list;
+
+  const subsetMap = new Map(subset.map(item => [String(item.id), item]));
+  if (normalizedOrder.some(id => !subsetMap.has(id))) return list;
+
+  let nextIndex = 0;
+  return list.map(item => {
+    if (!shouldInclude(item)) return item;
+    const nextItem = subsetMap.get(normalizedOrder[nextIndex]);
+    nextIndex += 1;
+    return nextItem || item;
+  });
+}
+
+function normalizeGroupTabOrderState(input) {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+
+  return Object.fromEntries(
+    Object.entries(input)
+      .map(([groupKey, orderIds]) => [
+        String(groupKey),
+        Array.isArray(orderIds)
+          ? [...new Set(orderIds.map(id => String(id)).filter(Boolean))]
+          : [],
+      ])
+      .filter(([, orderIds]) => orderIds.length > 0)
+  );
+}
+
+function normalizeGroupLabelOverrides(input) {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+
+  return Object.fromEntries(
+    Object.entries(input)
+      .map(([groupKey, label]) => [String(groupKey), String(label || '').trim()])
+      .filter(([, label]) => Boolean(label))
+  );
+}
+
+function getTabOrderTokens(tab) {
+  const tokens = [];
+  if (tab?.id != null) tokens.push(String(tab.id));
+  if (tab?.url) tokens.push(String(tab.url));
+  return [...new Set(tokens.filter(Boolean))];
+}
+
+function getPrimaryTabOrderToken(tab) {
+  return getTabOrderTokens(tab)[0] || '';
+}
+
+function pruneGroupTabOrderState(state, groups = []) {
+  const normalized = normalizeGroupTabOrderState(state);
+  const groupMap = new Map(
+    groups.map(group => [
+      String(group.domain),
+      new Set(
+        (group.tabs || [])
+          .flatMap(tab => getTabOrderTokens(tab))
+          .filter(Boolean)
+      ),
+    ])
+  );
+
+  return Object.fromEntries(
+    Object.entries(normalized)
+      .map(([groupKey, orderIds]) => {
+        const validTokens = groupMap.get(String(groupKey));
+        if (!validTokens) return null;
+        const filtered = orderIds.filter(token => validTokens.has(token));
+        return filtered.length > 0 ? [String(groupKey), filtered] : null;
+      })
+      .filter(Boolean)
+  );
+}
+
+async function loadGroupTabOrder(groups = []) {
+  const stored = await chrome.storage.local.get(GROUP_TAB_ORDER_KEY);
+  const nextState = normalizeGroupTabOrderState(stored[GROUP_TAB_ORDER_KEY]);
+  const prunedState = pruneGroupTabOrderState(nextState, groups);
+  groupTabOrderState = prunedState;
+  await chrome.storage.local.set({ [GROUP_TAB_ORDER_KEY]: prunedState });
+  return prunedState;
+}
+
+async function saveGroupTabOrder(nextState) {
+  groupTabOrderState = normalizeGroupTabOrderState(nextState);
+  await chrome.storage.local.set({ [GROUP_TAB_ORDER_KEY]: groupTabOrderState });
+  return groupTabOrderState;
+}
+
+async function loadGroupLabelOverrides() {
+  const stored = await chrome.storage.local.get(GROUP_LABEL_OVERRIDES_KEY);
+  groupLabelOverrides = normalizeGroupLabelOverrides(stored[GROUP_LABEL_OVERRIDES_KEY]);
+  return groupLabelOverrides;
+}
+
+async function saveGroupLabelOverrides(nextState) {
+  groupLabelOverrides = normalizeGroupLabelOverrides(nextState);
+  await chrome.storage.local.set({ [GROUP_LABEL_OVERRIDES_KEY]: groupLabelOverrides });
+  return groupLabelOverrides;
+}
+
+function reorderGroupTabsByStoredUrls(tabs, groupKey) {
+  const orderIds = groupTabOrderState[String(groupKey)] || [];
+  if (!Array.isArray(tabs) || !tabs.length || !orderIds.length) return Array.isArray(tabs) ? tabs.slice() : [];
+
+  const orderIndex = new Map(orderIds.map((id, index) => [String(id), index]));
+  return tabs
+    .map((tab, originalIndex) => {
+      const match = getTabOrderTokens(tab)
+        .map(token => orderIndex.get(token))
+        .find(index => Number.isInteger(index));
+      return {
+        tab,
+        originalIndex,
+        order: Number.isInteger(match) ? match : Number.MAX_SAFE_INTEGER,
+      };
+    })
+    .sort((a, b) => a.order - b.order || a.originalIndex - b.originalIndex)
+    .map(entry => entry.tab);
+}
+
+function getOrderedUniqueTabsForGroup(group) {
+  const tabs = Array.isArray(group?.tabs) ? group.tabs : [];
+  return reorderGroupTabsByStoredUrls(tabs, group?.domain);
+}
+
+function getTabsOrderedForChromeSync(group) {
+  const tabs = Array.isArray(group?.tabs) ? group.tabs : [];
+  const orderIds = groupTabOrderState[String(group?.domain)] || [];
+  if (!orderIds.length) return tabs.slice();
+
+  const orderIndex = new Map(orderIds.map((id, index) => [String(id), index]));
+  return tabs
+    .map((tab, originalIndex) => ({
+      tab,
+      originalIndex,
+      order: (() => {
+        const match = getTabOrderTokens(tab)
+          .map(token => orderIndex.get(token))
+          .find(index => Number.isInteger(index));
+        return Number.isInteger(match) ? match : Number.MAX_SAFE_INTEGER;
+      })(),
+    }))
+    .sort((a, b) => a.order - b.order || a.originalIndex - b.originalIndex)
+    .map(entry => entry.tab);
+}
+
+function getChromeSyncGroups(groups = domainGroups) {
+  return (Array.isArray(groups) ? groups : []).map(group => ({
+    ...group,
+    tabs: getTabsOrderedForChromeSync(group),
+  }));
+}
+
+function isManualGroupKey(groupKey = '') {
+  return String(groupKey || '').startsWith(MANUAL_GROUP_PREFIX);
+}
+
+function getManualGroupIdFromGroupKey(groupKey = '') {
+  return isManualGroupKey(groupKey) ? String(groupKey).slice(MANUAL_GROUP_PREFIX.length) : '';
+}
+
+function getDomainGroupByKey(groupKey = '') {
+  return domainGroups.find(group => String(group?.domain) === String(groupKey)) || null;
+}
+
+function getGroupDisplayLabel(group) {
+  if (!group) return 'Group';
+  if (group.domain === '__landing-pages__') {
+    return groupLabelOverrides[group.domain] || (runtimeT ? runtimeT('homepagesLabel') : 'Homepages');
+  }
+  return String(groupLabelOverrides[group.domain] || group.label || friendlyDomain(group.domain) || 'Group').trim() || 'Group';
+}
+
+function createUniqueSessionGroupName(baseName, groups = sessionGroupsState.groups, excludeGroupId = '') {
+  const fallbackName = String(baseName || 'Group').trim() || 'Group';
+  const lowerFallback = fallbackName.toLowerCase();
+  const takenNames = new Set(
+    (groups || [])
+      .filter(group => group && String(group.id || '') !== String(excludeGroupId || ''))
+      .map(group => String(group.name || '').trim().toLowerCase())
+      .filter(Boolean)
+  );
+
+  if (!takenNames.has(lowerFallback)) return fallbackName;
+
+  let suffix = 2;
+  while (takenNames.has(`${lowerFallback} ${suffix}`)) suffix += 1;
+  return `${fallbackName} ${suffix}`;
+}
+
+function openGroupRenameEditor(groupKey, manualGroupId = '') {
+  const group = getDomainGroupByKey(groupKey);
+  if (!group) return;
+  groupRenameEditorState = {
+    groupKey: String(groupKey || ''),
+    manualGroupId: String(manualGroupId || ''),
+    value: getGroupDisplayLabel(group),
+    shouldFocus: true,
+  };
+  void renderDashboard();
+}
+
+function closeGroupRenameEditor() {
+  groupRenameEditorState = null;
+}
+
+async function submitGroupRenameEditor() {
+  if (!groupRenameEditorState) return;
+
+  const { groupKey, manualGroupId } = groupRenameEditorState;
+  const group = getDomainGroupByKey(groupKey);
+  if (!group) {
+    closeGroupRenameEditor();
+    return;
+  }
+
+  const currentLabel = getGroupDisplayLabel(group);
+  const cleanName = String(groupRenameEditorState.value || '').trim();
+  if (!cleanName || cleanName === currentLabel) {
+    closeGroupRenameEditor();
+    await renderDashboard();
+    return;
+  }
+
+  try {
+    if (manualGroupId) {
+      const nextState = renameSessionGroup(sessionGroupsState, manualGroupId, cleanName);
+      await saveSessionGroups(nextState);
+    } else {
+      await saveGroupLabelOverrides({
+        ...groupLabelOverrides,
+        [groupKey]: cleanName,
+      });
+    }
+    closeGroupRenameEditor();
+    await renderDashboard();
+    showToast(runtimeT ? runtimeT('toastRenamedGroup', { name: cleanName }) : `Renamed to ${cleanName}`);
+  } catch (err) {
+    showToast(err.message || (runtimeT ? runtimeT('toastCouldNotCreateGroup') : 'Could not create group'));
+  }
+}
+
+function deriveDraggedTabGroupName(tab) {
+  const rawTitle = cleanTitle(
+    smartTitle(stripTitleNoise(tab?.title || ''), tab?.url || ''),
+    tab?.url || ''
+  );
+  const title = String(rawTitle || '').trim();
+  if (title) return title;
+
+  try {
+    const parsed = new URL(String(tab?.url || ''));
+    return friendlyDomain(parsed.hostname || parsed.host || parsed.href || 'Group');
+  } catch {
+    return 'Group';
+  }
+}
+
+function getTabIdsForGroupChip(groupKey, chipSortId) {
+  const group = getDomainGroupByKey(groupKey);
+  if (!group) return [];
+
+  return (group.tabs || [])
+    .filter(tab => getTabOrderTokens(tab).includes(String(chipSortId || '')))
+    .map(tab => Number(tab?.id))
+    .filter(Number.isFinite);
+}
+
+function getOrderedIdsForGroup(groupKey) {
+  const group = getDomainGroupByKey(groupKey);
+  return getOrderedUniqueTabsForGroup(group).map(tab => getPrimaryTabOrderToken(tab)).filter(Boolean);
+}
+
+function buildOrderedIdsFromList(listEl, draggedId) {
+  if (!listEl) return [];
+
+  return [...listEl.children]
+    .map(node => {
+      if (node === pageChipPlaceholderEl) return String(draggedId || '');
+      return node.dataset?.chipSortId || '';
+    })
+    .filter(Boolean);
+}
+
+function logPageChipDragDebug(stage, details = {}) {
+  if (!PAGE_CHIP_DRAG_DEBUG) return;
+
+  const payload = Object.entries(details)
+    .filter(([, value]) => value !== undefined && value !== '')
+    .map(([key, value]) => `${key}=${String(value)}`)
+    .join(' ');
+  void (payload ? `${stage} ${payload}` : stage);
+}
+
+function clearPageChipDropPreview() {
+  document.querySelectorAll('.mission-card.is-drop-target').forEach(card => {
+    card.classList.remove('is-drop-target');
+  });
+  document.body.classList.remove('page-chip-drop-new-group');
+  pageChipNewGroupSlotEl?.remove();
+  pageChipNewGroupSlotEl = null;
+}
+
+function setPageChipDropPreview(cardEl, {
+  createNewGroup = false,
+  newGroupPlacement = 'after',
+  insertBeforeCardEl = null,
+} = {}) {
+  clearPageChipDropPreview();
+  if (cardEl) cardEl.classList.add('is-drop-target');
+  if (createNewGroup) {
+    document.body.classList.add('page-chip-drop-new-group');
+    const missionsEl = document.getElementById('openTabsMissions');
+    if (missionsEl) {
+      pageChipNewGroupSlotEl = document.createElement('div');
+      pageChipNewGroupSlotEl.className = 'mission-drop-new-group-slot';
+      pageChipNewGroupSlotEl.innerHTML = '<span class="mission-drop-new-group-line"></span>';
+      const firstCard = missionsEl.querySelector('.mission-card');
+      if (insertBeforeCardEl) {
+        missionsEl.insertBefore(pageChipNewGroupSlotEl, insertBeforeCardEl);
+      } else if (newGroupPlacement === 'before' && firstCard) {
+        missionsEl.insertBefore(pageChipNewGroupSlotEl, firstCard);
+      } else {
+        missionsEl.appendChild(pageChipNewGroupSlotEl);
+      }
+    }
+  }
+}
+
+function getPageChipDropTarget(clientX, clientY) {
+  const missionsEl = document.getElementById('openTabsMissions');
+  const missionCards = missionsEl ? [...missionsEl.querySelectorAll('.mission-card')] : [];
+  if (!missionsEl || !missionCards.length) return null;
+
+  const firstCardRect = missionCards[0].getBoundingClientRect();
+  const lastCardRect = missionCards[missionCards.length - 1].getBoundingClientRect();
+  const edgeThreshold = 18;
+  const gapThreshold = 24;
+
+  if (clientY <= firstCardRect.top + edgeThreshold) {
+    return { kind: 'new-group', placement: 'before', reason: 'top-edge' };
+  }
+
+  if (clientY >= lastCardRect.bottom - edgeThreshold) {
+    return { kind: 'new-group', placement: 'after', reason: 'bottom-edge' };
+  }
+
+  for (let index = 0; index < missionCards.length - 1; index += 1) {
+    const currentRect = missionCards[index].getBoundingClientRect();
+    const nextCardEl = missionCards[index + 1];
+    const nextRect = nextCardEl.getBoundingClientRect();
+    const gapTop = currentRect.bottom - gapThreshold;
+    const gapBottom = nextRect.top + gapThreshold;
+    if (clientY >= gapTop && clientY <= gapBottom) {
+      return {
+        kind: 'new-group',
+        placement: 'before',
+        insertBeforeCardEl: nextCardEl,
+        reason: 'card-gap',
+      };
+    }
+  }
+
+  for (const cardEl of missionCards) {
+    const rect = cardEl.getBoundingClientRect();
+    const withinCardY = clientY >= rect.top && clientY <= rect.bottom;
+    if (!withinCardY) continue;
+
+    const listEl = cardEl.querySelector('.mission-pages');
+    const groupKey = cardEl.dataset?.groupId || '';
+    const listRect = listEl?.getBoundingClientRect?.();
+    const sourceGroupKey = pageChipDragState?.sourceGroupKey || '';
+    const isSourceGroup = groupKey === sourceGroupKey;
+    const cardEdgeThreshold = 16;
+
+    if (listEl && groupKey && listRect && isSourceGroup) {
+      if (clientY <= listRect.top - cardEdgeThreshold) {
+        return { kind: 'new-group', placement: 'before', insertBeforeCardEl: cardEl, reason: 'source-card-top-gap' };
+      }
+      if (clientY >= listRect.bottom + cardEdgeThreshold) {
+        return { kind: 'new-group', placement: 'after', reason: 'source-card-bottom-gap' };
+      }
+    }
+
+    if (listEl && groupKey) {
+      return { kind: 'group', cardEl, listEl, groupKey };
+    }
+  }
+
+  return null;
+}
+
+function reassignTabsToSessionGroup(state, tabIds, groupId) {
+  let nextState = state;
+  for (const tabId of tabIds) {
+    nextState = assignTabToSessionGroup(nextState, tabId, groupId);
+  }
+  return nextState;
+}
+
+function clearTabsFromSessionGroups(state, tabIds) {
+  let nextState = state;
+  for (const tabId of tabIds) {
+    nextState = clearTabSessionGroup(nextState, tabId);
+  }
+  return nextState;
+}
+
+function ensureManualDropGroup(state, targetGroupKey) {
+  const targetManualGroupId = getManualGroupIdFromGroupKey(targetGroupKey);
+  if (targetManualGroupId) {
+    return {
+      nextState: state,
+      groupId: targetManualGroupId,
+      groupName: state.groups.find(group => group.id === targetManualGroupId)?.name || '',
+    };
+  }
+
+  const targetGroup = getDomainGroupByKey(targetGroupKey);
+  if (!targetGroup) throw new Error('Group not found');
+
+  const baseName = getGroupDisplayLabel(targetGroup);
+  const nextName = createUniqueSessionGroupName(baseName, state.groups);
+  const created = addSessionGroup(state, nextName);
+  const targetTabIds = (targetGroup.tabs || [])
+    .map(tab => Number(tab?.id))
+    .filter(Number.isFinite);
+
+  return {
+    nextState: reassignTabsToSessionGroup(created.state, targetTabIds, created.group.id),
+    groupId: created.group.id,
+    groupName: created.group.name,
+  };
+}
+
+/**
+ * fetchOpenTabs()
+ *
+ * Reads all currently open browser tabs directly from Chrome.
+ * Sets the extensionId flag so we can identify Tab Harbor's own pages.
+ */
+
+/* ----------------------------------------------------------------
+   Hitokoto helper
+   ---------------------------------------------------------------- */
+
+async function fetchHitokoto(timeoutMs = 3000) {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const response = await fetch('https://v1.hitokoto.cn/', { signal: controller.signal });
+    clearTimeout(timeoutId);
+    if (!response || !response.ok) return null;
+    const data = await response.json();
+    return data || null;
+  } catch (err) {
+    return null;
+  }
+}
+
+function normalizeHitokotoEntry(data) {
+  if (!data || typeof data !== 'object') return null;
+  const hitokoto = String(data.hitokoto || '').trim();
+  if (!hitokoto) return null;
+  return {
+    hitokoto,
+    from_who: String(data.from_who || '').trim(),
+    from: String(data.from || '').trim(),
+  };
+}
+
+function getHitokotoCache() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(HITOKOTO_CACHE_KEY) || '[]');
+    if (!Array.isArray(parsed)) return [];
+    return parsed.map(normalizeHitokotoEntry).filter(Boolean).slice(0, HITOKOTO_CACHE_LIMIT);
+  } catch (_err) {
+    return [];
+  }
+}
+
+function saveHitokotoCache(nextEntries) {
+  try {
+    const entries = Array.isArray(nextEntries) ? nextEntries : [];
+    localStorage.setItem(HITOKOTO_CACHE_KEY, JSON.stringify(entries.slice(0, HITOKOTO_CACHE_LIMIT)));
+  } catch (_err) {
+    // Cache writes are best-effort; the dashboard should stay usable without them.
+  }
+}
+
+function addHitokotoToCache(data) {
+  const entry = normalizeHitokotoEntry(data);
+  if (!entry) return null;
+  const existing = getHitokotoCache().filter(item => item.hitokoto !== entry.hitokoto);
+  saveHitokotoCache([entry, ...existing]);
+  return entry;
+}
+
+function setHitokotoContent(textEl, fromEl, data) {
+  const entry = normalizeHitokotoEntry(data);
+  if (!entry || !textEl || !fromEl) return false;
+  textEl.textContent = entry.hitokoto;
+  const from = [entry.from_who, entry.from].filter(Boolean).join(' · ');
+  fromEl.textContent = from ? ` — ${from}` : '';
+  return true;
+}
+
+function renderCachedHitokoto(textEl, fromEl) {
+  return setHitokotoContent(textEl, fromEl, getHitokotoCache()[0]);
+}
+
+function refreshHitokotoInBackground(textEl, fromEl) {
+  fetchHitokoto().then(data => {
+    if (typeof themePreferences !== 'undefined' && themePreferences.hitokotoEnabled === false) return;
+    const entry = addHitokotoToCache(data);
+    if (!entry) return;
+    if (setHitokotoContent(textEl, fromEl, entry)) {
+      const hitokotoEl = document.getElementById('hitokoto');
+      if (hitokotoEl) hitokotoEl.style.display = '';
+    }
+  }).catch(() => { /* silently fail */ });
+}
+
+function warmHitokotoCacheInBackground() {
+  fetchHitokoto().then(data => {
+    if (typeof themePreferences !== 'undefined' && themePreferences.hitokotoEnabled === false) return;
+    addHitokotoToCache(data);
+  }).catch(() => { /* silently fail */ });
+}
+
+async function fetchOpenTabs() {
+  try {
+    const newtabUrl = window.location.href;
+
+    const currentWindowId = await getDashboardWindowIdForOpenTabs();
+    const tabs = await chrome.tabs.query({});
+    allOpenTabIds = tabs.map(tab => tab?.id).filter(tabId => tabId != null);
+    const visibleTabs = currentWindowId == null
+      ? tabs
+      : tabs.filter(t => t.windowId === currentWindowId);
+
+    openTabs = visibleTabs.map(t => {
+      const rawUrl = t.url || '';
+      const suspended = runtimeParseSuspendedTabUrl
+        ? runtimeParseSuspendedTabUrl(rawUrl)
+        : { isSuspended: false, originalUrl: '', title: '' };
+      const canonicalUrl = runtimeGetCanonicalTabUrl
+        ? runtimeGetCanonicalTabUrl(rawUrl)
+        : rawUrl;
+
+      return {
+        id:       t.id,
+        rawUrl,
+        url:      canonicalUrl,
+        title:    suspended.title || t.title,
+        windowId: t.windowId,
+        active:   t.active,
+        favIconUrl: t.favIconUrl || '',
+        isSuspended: Boolean(suspended.isSuspended),
+        discarded: t.discarded || false,
+        // Flag Tab Harbor's own pages so we can detect duplicate new tabs
+        isTabOut: rawUrl === newtabUrl || rawUrl === 'chrome://newtab/',
+      };
+    });
+  } catch {
+    // chrome.tabs API unavailable (shouldn't happen in an extension page)
+    openTabs = [];
+    allOpenTabIds = [];
+  }
+}
+
+function getOpenTabIdsForSessionPruning() {
+  return allOpenTabIds.length > 0 ? allOpenTabIds : openTabs.map(tab => tab.id);
+}
+
+async function queryTabsForDashboardWindow() {
+  const currentWindowId = await getDashboardWindowIdForOpenTabs();
+  if (currentWindowId == null) return chrome.tabs.query({});
+
+  try {
+    return await chrome.tabs.query({ windowId: currentWindowId });
+  } catch {
+    return chrome.tabs.query({});
+  }
+}
+
+async function loadSessionGroups(openTabIds = []) {
+  const stored = await chrome.storage.local.get(SESSION_GROUPS_KEY);
+  const nextState = normalizeSessionGroups(stored[SESSION_GROUPS_KEY]);
+  const prunedState = pruneSessionGroups(nextState, openTabIds);
+  sessionGroupsState = prunedState;
+  await chrome.storage.local.set({ [SESSION_GROUPS_KEY]: prunedState });
+  return prunedState;
+}
+
+async function saveSessionGroups(nextState) {
+  sessionGroupsState = normalizeSessionGroups(nextState);
+  await chrome.storage.local.set({ [SESSION_GROUPS_KEY]: sessionGroupsState });
+  return sessionGroupsState;
+}
+
+async function loadImportedChromeGroupMeta() {
+  if (typeof normalizeChromeImportedGroupMeta !== 'function') {
+    importedChromeGroupMeta = { entries: [] };
+    return importedChromeGroupMeta;
+  }
+  const stored = await chrome.storage.local.get(IMPORTED_CHROME_GROUPS_KEY);
+  importedChromeGroupMeta = normalizeChromeImportedGroupMeta(stored[IMPORTED_CHROME_GROUPS_KEY]);
+  return importedChromeGroupMeta;
+}
+
+async function saveImportedChromeGroupMeta(nextMeta) {
+  if (typeof normalizeChromeImportedGroupMeta !== 'function') {
+    importedChromeGroupMeta = { entries: [] };
+    return importedChromeGroupMeta;
+  }
+  importedChromeGroupMeta = normalizeChromeImportedGroupMeta(nextMeta);
+  await chrome.storage.local.set({ [IMPORTED_CHROME_GROUPS_KEY]: importedChromeGroupMeta });
+  return importedChromeGroupMeta;
+}
+
+async function saveChromeTabGroupsDebug(snapshot) {
+  await chrome.storage.local.set({
+    [CHROME_TAB_GROUPS_DEBUG_KEY]: {
+      ...snapshot,
+      updatedAt: new Date().toISOString(),
+    },
+  });
+}
+
+function suppressChromeTabGroupsImport(durationMs = 1200) {
+  suppressChromeTabGroupsImportUntil = Math.max(
+    suppressChromeTabGroupsImportUntil,
+    Date.now() + Math.max(0, Number(durationMs) || 0)
+  );
+  if (chromeTabGroupsImportTimer) {
+    clearTimeout(chromeTabGroupsImportTimer);
+    chromeTabGroupsImportTimer = null;
+  }
+}
+
+function isChromeTabGroupsImportSuppressed() {
+  return Date.now() < suppressChromeTabGroupsImportUntil;
+}
+
+function disableEntryAnimations() {
+  if (entryAnimationsTimer) {
+    clearTimeout(entryAnimationsTimer);
+    entryAnimationsTimer = null;
+  }
+  document.body.classList.remove(ENTRY_ANIMATIONS_CLASS);
+}
+
+function primeEntryAnimations(durationMs = 1200) {
+  if (!document.body) return;
+  document.body.classList.add(ENTRY_ANIMATIONS_CLASS);
+  if (entryAnimationsTimer) clearTimeout(entryAnimationsTimer);
+  entryAnimationsTimer = setTimeout(() => {
+    document.body.classList.remove(ENTRY_ANIMATIONS_CLASS);
+    entryAnimationsTimer = null;
+  }, Math.max(0, Number(durationMs) || 0));
+}
+
+async function syncChromeTabGroupsWithoutImportEcho() {
+  if (typeof syncChromeTabGroups !== 'function') return;
+  suppressChromeTabGroupsImport();
+  await syncChromeTabGroups(getChromeSyncGroups(domainGroups));
+}
+
+function disableChromeTabGroupsImportModeForLocalEdits() {
+  if (!chromeTabGroupsEnabled) return;
+  if (typeof setImportMode === 'function') setImportMode(false);
+}
+
+function shouldImportChromeGroupsIntoSessionState() {
+  if (!chromeTabGroupsEnabled) return false;
+  const groupCount = Array.isArray(sessionGroupsState?.groups) ? sessionGroupsState.groups.length : 0;
+  const assignmentCount = sessionGroupsState?.assignments ? Object.keys(sessionGroupsState.assignments).length : 0;
+  return groupCount === 0 && assignmentCount === 0;
+}
+
+function ensureChromeTabGroupsSubscription() {
+  if (!chromeTabGroupsEnabled || typeof subscribeToChromeTabGroupChanges !== 'function') {
+    if (chromeTabGroupsImportTimer) {
+      clearTimeout(chromeTabGroupsImportTimer);
+      chromeTabGroupsImportTimer = null;
+    }
+    if (chromeTabGroupsUnsubscribe) {
+      chromeTabGroupsUnsubscribe();
+      chromeTabGroupsUnsubscribe = null;
+    }
+    return;
+  }
+
+  if (chromeTabGroupsUnsubscribe) return;
+  chromeTabGroupsUnsubscribe = subscribeToChromeTabGroupChanges(() => {
+    if (isChromeTabGroupsImportSuppressed()) return;
+    scheduleChromeTabGroupsImport();
+  });
+}
+
+async function importChromeNativeGroupsIntoSessionGroups() {
+  if (!chromeTabGroupsEnabled ||
+      typeof reconcileChromeTabGroupImports !== 'function' ||
+      typeof queryExistingChromeGroups !== 'function') {
+    await saveChromeTabGroupsDebug({
+      stage: 'import-skipped',
+      enabled: chromeTabGroupsEnabled,
+      hasReconcile: typeof reconcileChromeTabGroupImports === 'function',
+      hasQuery: typeof queryExistingChromeGroups === 'function',
+    });
+    return 0;
+  }
+
+  const chromeGroups = await queryExistingChromeGroups();
+  const nativeGroups = [];
+
+  for (const chromeGroup of chromeGroups) {
+    const groupedTabs = await chrome.tabs.query({ groupId: chromeGroup.id }).catch(() => []);
+    const tabIds = groupedTabs.map(tab => tab.id).filter(tabId => tabId != null);
+    if (!tabIds.length) continue;
+    nativeGroups.push({
+      chromeGroupId: chromeGroup.id,
+      windowId: chromeGroup.windowId != null ? chromeGroup.windowId : (groupedTabs[0]?.windowId ?? 0),
+      title: chromeGroup.title || 'Group',
+      color: chromeGroup.color || 'grey',
+      tabIds,
+    });
+  }
+
+  const result = reconcileChromeTabGroupImports({
+    currentState: sessionGroupsState,
+    importedMeta: importedChromeGroupMeta,
+    nativeGroups,
+  });
+
+  await saveSessionGroups(result.state);
+  await saveImportedChromeGroupMeta(result.importedMeta);
+  if (typeof populateChromeGroupMap === 'function') {
+    await populateChromeGroupMap(result.mappings);
+  }
+  await saveChromeTabGroupsDebug({
+    stage: 'import-finished',
+    chromeGroupCount: chromeGroups.length,
+    importedNativeGroupCount: nativeGroups.length,
+    sessionGroupCount: result.state.groups.length,
+    assignmentCount: Object.keys(result.state.assignments).length,
+    importedMetaCount: result.importedMeta.entries.length,
+    chromeGroupTitles: chromeGroups.map(group => group?.title || '(untitled)'),
+    nativeGroups,
+  });
+  return nativeGroups.length;
+}
+
+function scheduleChromeTabGroupsImport() {
+  if (!chromeTabGroupsEnabled) return;
+  if (chromeTabGroupsImportTimer) clearTimeout(chromeTabGroupsImportTimer);
+  chromeTabGroupsImportTimer = setTimeout(async () => {
+    chromeTabGroupsImportTimer = null;
+    if (chromeTabGroupsImportInFlight) {
+      scheduleChromeTabGroupsImport();
+      return;
+    }
+
+    chromeTabGroupsImportInFlight = true;
+    try {
+      await fetchOpenTabs();
+      const realTabs = getRealTabs();
+      await loadSessionGroups(getOpenTabIdsForSessionPruning());
+      await loadImportedChromeGroupMeta();
+      if (!shouldImportChromeGroupsIntoSessionState()) {
+        disableChromeTabGroupsImportModeForLocalEdits();
+        return;
+      }
+      const importedCount = await importChromeNativeGroupsIntoSessionGroups();
+      if (typeof setImportMode === 'function') setImportMode(importedCount > 0);
+      disableChromeTabGroupsImportModeForLocalEdits();
+      window.__suppressAutoRefreshUntil = Date.now() + 2000;
+      await renderDashboard();
+      if (window.__tabRefreshTimeout) {
+        clearTimeout(window.__tabRefreshTimeout);
+        window.__tabRefreshTimeout = null;
+      }
+      window.__suppressAutoRefreshUntil = 0;
+    } finally {
+      chromeTabGroupsImportInFlight = false;
+    }
+  }, 120);
+}
+
+async function applyChromeTabGroupsToggle(nextEnabled) {
+  const enable = Boolean(nextEnabled);
+  await saveChromeTabGroupsSetting(enable);
+  chromeTabGroupsEnabled = enable;
+
+  await fetchOpenTabs();
+  const realTabs = getRealTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+  await loadImportedChromeGroupMeta();
+
+  let importedCount = 0;
+  if (enable && shouldImportChromeGroupsIntoSessionState()) {
+    importedCount = await importChromeNativeGroupsIntoSessionGroups();
+  } else if (!enable && typeof reconcileChromeTabGroupImports === 'function') {
+    const cleared = reconcileChromeTabGroupImports({
+      currentState: sessionGroupsState,
+      importedMeta: importedChromeGroupMeta,
+      nativeGroups: [],
+    });
+    await saveSessionGroups(cleared.state);
+    await saveImportedChromeGroupMeta(cleared.importedMeta);
+  }
+
+  ensureChromeTabGroupsSubscription();
+  if (typeof setImportMode === 'function') setImportMode(importedCount > 0);
+  disableChromeTabGroupsImportModeForLocalEdits();
+  window.__suppressAutoRefreshUntil = Date.now() + 2000;
+  await renderDashboard();
+  if (window.__tabRefreshTimeout) {
+    clearTimeout(window.__tabRefreshTimeout);
+    window.__tabRefreshTimeout = null;
+  }
+  window.__suppressAutoRefreshUntil = 0;
+  showToast(enable
+    ? (runtimeT ? runtimeT('toastChromeTabGroupsOn') : 'Chrome tab groups on')
+    : (runtimeT ? runtimeT('toastChromeTabGroupsOff') : 'Chrome tab groups off'));
+}
+
+async function loadGroupOrder() {
+  const stored = await chrome.storage.local.get(GROUP_ORDER_KEY);
+  groupOrderState = normalizeGroupOrderState(stored[GROUP_ORDER_KEY]);
+  return groupOrderState;
+}
+
+async function saveGroupOrder(nextState) {
+  groupOrderState = normalizeGroupOrderState(nextState);
+  await chrome.storage.local.set({ [GROUP_ORDER_KEY]: groupOrderState });
+  return groupOrderState;
+}
+
+function updateGroupNavButtonIcon(groupKey) {
+  const group = domainGroups.find(item => String(item.domain) === String(groupKey));
+  const button = document.querySelector(`.group-nav-button[data-group-id="${CSS.escape(String(groupKey))}"]`);
+  if (!group || !button || !runtimeGetGroupIcon) return;
+
+  const label = group.domain === '__landing-pages__' ? (runtimeT ? runtimeT('homepagesLabel') : 'Homepages') : (group.label || friendlyDomain(group.domain));
+  const orderedGroup = {
+    ...group,
+    tabs: getOrderedUniqueTabsForGroup(group),
+  };
+  const iconData = runtimeGetGroupIcon(orderedGroup, label, 32);
+  const img = button.querySelector('.group-nav-icon');
+  const fallback = button.querySelector('.group-nav-fallback');
+
+  if (img && iconData.src) {
+    img.src = iconData.src;
+    if (typeof runtimeSetImageFallbackAttributes === 'function') {
+      runtimeSetImageFallbackAttributes(img, iconData.fallbackSources || iconData.fallbackSrc);
+    }
+    img.style.display = '';
+    if (fallback) {
+      fallback.textContent = iconData.fallbackLabel;
+      fallback.style.display = 'none';
+    }
+    return;
+  }
+
+  if (img) img.style.display = 'none';
+  if (fallback) {
+    fallback.textContent = iconData.fallbackLabel;
+    fallback.style.display = '';
+  }
+}
+
+function animatePageChipItems(listEl, previousRects) {
+  listEl?.querySelectorAll('[data-chip-sort-id]').forEach(item => {
+    if (item.classList.contains('is-dragging')) return;
+
+    const key = item.dataset.chipSortId || '';
+    const previousRect = previousRects.get(key);
+    if (!previousRect) return;
+
+    const nextRect = item.getBoundingClientRect();
+    const deltaX = previousRect.left - nextRect.left;
+    const deltaY = previousRect.top - nextRect.top;
+    if (!deltaX && !deltaY) return;
+
+    item.style.transition = 'none';
+    item.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+    requestAnimationFrame(() => {
+      item.style.transition = 'transform 0.16s ease';
+      item.style.transform = '';
+    });
+  });
+}
+
+function syncGroupOrderState(orderKeys) {
+  groupOrderState = normalizeGroupOrderState({
+    ...groupOrderState,
+    sessionOrder: orderKeys,
+    pinnedOrder: orderKeys,
+    pinEnabled: false,
+  });
+  return groupOrderState;
+}
+
+function getStableGroupId(groupKey) {
+  return 'domain-' + String(groupKey).replace(/[^a-z0-9]/g, '-');
+}
+
+function getTabIdValue(tabId) {
+  const id = Number(tabId);
+  return Number.isFinite(id) ? id : null;
+}
+
+async function getCurrentWindowId() {
+  const currentWindow = await chrome.windows.getCurrent();
+  return currentWindow?.id;
+}
+
+async function getDashboardWindowIdForOpenTabs() {
+  const currentTab = await resolveCurrentDashboardTab();
+  if (currentTab?.windowId != null) {
+    currentDashboardWindowId = currentTab.windowId;
+    return currentDashboardWindowId;
+  }
+
+  try {
+    currentDashboardWindowId = await getCurrentWindowId();
+  } catch {
+    currentDashboardWindowId = null;
+  }
+  return currentDashboardWindowId;
+}
+
+function getTabCanonicalUrl(tab) {
+  return runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(tab?.url || '') : String(tab?.url || '');
+}
+
+function getTabsByIds(tabIds = [], tabs = openTabs) {
+  const selectedIds = new Set((tabIds || []).map(String).filter(Boolean));
+  return (Array.isArray(tabs) ? tabs : []).filter(tab => selectedIds.has(String(tab?.id)));
+}
+
+function getTabGroupLookup(groups = domainGroups) {
+  const lookup = new Map();
+  for (const group of Array.isArray(groups) ? groups : []) {
+    const groupEntry = {
+      key: String(group?.domain || ''),
+      label: getGroupDisplayLabel(group),
+      manualGroupId: String(group?.manualGroupId || ''),
+    };
+    for (const tab of Array.isArray(group?.tabs) ? group.tabs : []) {
+      if (tab?.id != null) lookup.set(String(tab.id), groupEntry);
+      if (tab?.url) lookup.set(String(tab.url), groupEntry);
+    }
+  }
+  return lookup;
+}
+
+async function refreshTabSessionModel() {
+  await fetchOpenTabs();
+  const realTabs = getRealTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+  await loadGroupOrder();
+  await loadGroupLabelOverrides();
+  await buildDomainGroups(realTabs);
+  return realTabs;
+}
+
+async function saveTabsAsSession(tabs, selectedTabIds, source = 'manual', name = '') {
+  if (!runtimeBuildSessionSnapshot || !runtimeAddSavedTabSession) {
+    throw new Error('Session storage is unavailable');
+  }
+
+  const selectedIds = new Set((selectedTabIds || []).map(String).filter(Boolean));
+  const snapshot = runtimeBuildSessionSnapshot({
+    tabs,
+    groupLookup: getTabGroupLookup(),
+    selectedTabIds: [...selectedIds],
+    source,
+    name,
+    now: new Date().toISOString(),
+  });
+
+  const savedSessions = await runtimeAddSavedTabSession(snapshot);
+  const tabIdsToClose = (Array.isArray(tabs) ? tabs : [])
+    .filter(tab => selectedIds.has(String(tab?.id)) && (runtimeIsRestorableTabUrl ? runtimeIsRestorableTabUrl(tab?.url || '') : true))
+    .map(tab => getTabIdValue(tab?.id))
+    .filter(Number.isFinite);
+
+  if (tabIdsToClose.length > 0) {
+    await chrome.tabs.remove(tabIdsToClose);
+  }
+
+  await renderDashboard();
+
+  return {
+    session: snapshot,
+    sessions: savedSessions,
+    closedTabIds: tabIdsToClose,
+  };
+}
+
+async function saveCurrentWindowTabSession() {
+  const realTabs = await refreshTabSessionModel();
+  const currentWindowId = await getCurrentWindowId();
+  const windowTabs = realTabs.filter(tab => tab.windowId === currentWindowId);
+  const result = await saveTabsAsSession(
+    windowTabs,
+    windowTabs.map(tab => String(tab.id)),
+    'current-window'
+  );
+  return result;
+}
+
+async function saveSelectedTabSession(tabIds = [], source = 'selected', name = '') {
+  const realTabs = await refreshTabSessionModel();
+  const selectedTabs = getTabsByIds(tabIds, realTabs);
+  const result = await saveTabsAsSession(selectedTabs, tabIds, source, name);
+  return result;
+}
+
+async function appendTabsToExistingSavedSession(sessionId, tabIds = []) {
+  if (!runtimeBuildSessionSnapshot || !runtimeAppendSavedTabSessionTabs) {
+    throw new Error('Session storage is unavailable');
+  }
+
+  const realTabs = await refreshTabSessionModel();
+  const selectedTabs = getTabsByIds(tabIds, realTabs);
+  const selectedIds = new Set((tabIds || []).map(String).filter(Boolean));
+  const snapshot = runtimeBuildSessionSnapshot({
+    tabs: selectedTabs,
+    groupLookup: getTabGroupLookup(),
+    selectedTabIds: [...selectedIds],
+    source: 'append-existing',
+    now: new Date().toISOString(),
+  });
+
+  const result = await runtimeAppendSavedTabSessionTabs(sessionId, snapshot.tabs, {
+    skipDuplicateUrls: true,
+  });
+  const tabIdsToClose = selectedTabs
+    .filter(tab => selectedIds.has(String(tab?.id)) && (runtimeIsRestorableTabUrl ? runtimeIsRestorableTabUrl(tab?.url || '') : true))
+    .map(tab => getTabIdValue(tab?.id))
+    .filter(Number.isFinite);
+
+  if (tabIdsToClose.length > 0) {
+    await chrome.tabs.remove(tabIdsToClose);
+  }
+
+  return {
+    ...result,
+    selectedCount: snapshot.tabs.length,
+    closedTabIds: tabIdsToClose,
+  };
+}
+
+async function submitTodoEditor() {
+  const editorState = getTodoEditorState ? getTodoEditorState() : {};
+  const title = String(editorState.title || '').trim();
+  const description = String(editorState.description || '').trim();
+
+  if (!title) {
+    setTodoEditorError(runtimeT ? runtimeT('todoTitleRequired') : 'Add a title before saving.');
+    await renderDeferredColumn();
+    focusTodoEditorTitle();
+    return;
+  }
+
+  if (editorState.mode === 'edit') {
+    if (!editorState.todoId) return;
+    await updateTodoItem(editorState.todoId, { title, description });
+    closeTodoEditor();
+    showToast(runtimeT ? runtimeT('toastTodoUpdated') : 'Todo updated');
+    await renderDeferredColumn();
+    return;
+  }
+
+  await createTodoItem({ title, description });
+  closeTodoEditor();
+  drawerView = 'todos';
+  todoDetailId = '';
+  await renderDeferredColumn();
+}
+
+async function getTabSessionPickerContext() {
+  await refreshTabSessionModel();
+  const currentWindowId = await getCurrentWindowId();
+  const groups = domainGroups
+    .map(group => ({
+      key: String(group.domain),
+      label: getGroupDisplayLabel(group),
+      manualGroupId: String(group.manualGroupId || ''),
+      tabs: getOrderedUniqueTabsForGroup(group)
+        .filter(tab => tab.windowId === currentWindowId)
+        .filter(tab => runtimeIsRestorableTabUrl ? runtimeIsRestorableTabUrl(tab.url || '') : true)
+        .map(tab => ({
+          id: tab.id,
+          url: tab.url,
+          rawUrl: tab.rawUrl || tab.url,
+          title: tab.title || tab.url,
+          favIconUrl: tab.favIconUrl || '',
+          windowId: tab.windowId,
+        })),
+    }))
+    .filter(group => group.tabs.length > 0);
+
+  return { groups };
+}
+
+function getTabSessionPickerSelectedIds() {
+  return [...new Set((tabSessionPickerState.selectedTabIds || []).map(String).filter(Boolean))];
+}
+
+function getTabSessionPickerAllIds(groups = []) {
+  return [...new Set((Array.isArray(groups) ? groups : [])
+    .flatMap(group => Array.isArray(group?.tabs) ? group.tabs : [])
+    .map(tab => String(tab?.id || ''))
+    .filter(Boolean))];
+}
+
+function getScopedTabSessionPickerGroups(groups = [], scopeTabIds = null) {
+  if (!Array.isArray(scopeTabIds)) return Array.isArray(groups) ? groups : [];
+  const scopeIds = new Set(scopeTabIds.map(id => String(id)).filter(Boolean));
+  if (!scopeIds.size) return [];
+  return (Array.isArray(groups) ? groups : [])
+    .map(group => ({
+      ...group,
+      tabs: (Array.isArray(group?.tabs) ? group.tabs : [])
+        .filter(tab => scopeIds.has(String(tab?.id || ''))),
+    }))
+    .filter(group => group.tabs.length > 0);
+}
+
+function getTabSessionPickerGroupIds(groupKey = '', groups = []) {
+  const group = (Array.isArray(groups) ? groups : [])
+    .find(item => String(item?.key || item?.domain || '') === String(groupKey || ''));
+  return (group?.tabs || [])
+    .map(tab => String(tab?.id || ''))
+    .filter(Boolean);
+}
+
+function getSavedSessionOptionLabel(session = {}) {
+  const tabCount = Array.isArray(session?.tabs) ? session.tabs.length : 0;
+  const tabWord = runtimeT
+    ? (tabCount === 1 ? runtimeT('tabsWordSingular') : runtimeT('tabsWordPlural'))
+    : `tab${tabCount === 1 ? '' : 's'}`;
+  return `${session.name || 'Saved tabs'} (${tabCount} ${tabWord})`;
+}
+
+async function openTabSessionPicker({
+  source = 'current-window',
+  initialTabIds = null,
+  scopeTabIds = null,
+} = {}) {
+  const context = await getTabSessionPickerContext();
+  const savedSessions = runtimeGetSavedTabSessions ? await runtimeGetSavedTabSessions() : [];
+  const scopedGroups = getScopedTabSessionPickerGroups(context.groups, scopeTabIds);
+  const allIds = getTabSessionPickerAllIds(scopedGroups);
+  const allIdSet = new Set(allIds);
+  const initialSelectedIds = Array.isArray(initialTabIds)
+    ? [...new Set(initialTabIds.map(id => String(id)).filter(id => allIdSet.has(id)))]
+    : allIds;
+  tabSessionPickerState = {
+    open: true,
+    mode: tabSessionPickerState.mode === 'existing' && savedSessions.length ? 'existing' : 'new',
+    source,
+    selectedTabIds: initialSelectedIds,
+    newSessionName: tabSessionPickerState.newSessionName || '',
+    targetSessionId: tabSessionPickerState.targetSessionId || String(savedSessions[0]?.id || ''),
+    windowId: await getCurrentWindowId(),
+    groups: scopedGroups,
+    savedSessions,
+  };
+  renderOpenTabsArea();
+}
+
+function closeTabSessionPicker() {
+  tabSessionPickerState = {
+    open: false,
+    mode: 'new',
+    source: 'current-window',
+    selectedTabIds: [],
+    newSessionName: '',
+    targetSessionId: '',
+    windowId: null,
+    groups: [],
+    savedSessions: [],
+  };
+  renderOpenTabsArea();
+}
+
+function renderTabSessionPicker(groups = tabSessionPickerState.groups) {
+  if (!tabSessionPickerState.open) return '';
+  const pickerGroups = Array.isArray(groups) ? groups : [];
+  const savedSessions = Array.isArray(tabSessionPickerState.savedSessions)
+    ? tabSessionPickerState.savedSessions
+    : [];
+  const selectedIds = new Set(getTabSessionPickerSelectedIds());
+  const selectedCount = selectedIds.size;
+  const existingDisabled = savedSessions.length === 0;
+  const mode = tabSessionPickerState.mode === 'existing' && !existingDisabled ? 'existing' : 'new';
+  const targetSessionId = tabSessionPickerState.targetSessionId || String(savedSessions[0]?.id || '');
+  const safeTargetSessionId = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(targetSessionId) : targetSessionId.replace(/"/g, '&quot;');
+  const safeSelectLabel = runtimeEscapeHtmlAttribute
+    ? runtimeEscapeHtmlAttribute(runtimeT ? runtimeT('sessionPickerTargetSessionLabel') : 'Target session')
+    : 'Target session';
+  const newSessionName = String(tabSessionPickerState.newSessionName || '');
+  const safeNewSessionName = runtimeEscapeHtmlAttribute
+    ? runtimeEscapeHtmlAttribute(newSessionName)
+    : newSessionName.replace(/"/g, '&quot;');
+  const namePlaceholder = runtimeT ? runtimeT('sessionPickerNewSessionNamePlaceholder') : 'Group title (optional)';
+  const safeNamePlaceholder = runtimeEscapeHtmlAttribute
+    ? runtimeEscapeHtmlAttribute(namePlaceholder)
+    : namePlaceholder.replace(/"/g, '&quot;');
+  const listHtml = pickerGroups.length
+    ? pickerGroups.map(group => {
+      const groupKey = String(group.key || group.domain || '');
+      const safeGroupKey = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(groupKey) : groupKey.replace(/"/g, '&quot;');
+      const tabs = Array.isArray(group.tabs)
+        ? (group.key ? group.tabs : getOrderedUniqueTabsForGroup(group))
+          .filter(tab => runtimeIsRestorableTabUrl ? runtimeIsRestorableTabUrl(tab.url || '') : true)
+        : [];
+      const groupIds = tabs.map(tab => String(tab?.id || '')).filter(Boolean);
+      const checked = groupIds.length > 0 && groupIds.every(id => selectedIds.has(id));
+      const rawGroupLabel = group.label || (group.domain ? getGroupDisplayLabel(group) : 'Group');
+      const groupLabel = runtimeEscapeHtml ? runtimeEscapeHtml(rawGroupLabel) : rawGroupLabel;
+      return `
+        <section class="session-picker-group">
+          <label class="session-picker-group-header">
+            <input type="checkbox" data-action="toggle-session-picker-group" data-group-key="${safeGroupKey}"${checked ? ' checked' : ''}>
+            <span class="session-picker-group-title">${groupLabel}</span>
+            <span class="session-picker-group-count">${tabs.length}</span>
+          </label>
+          <div class="session-picker-tabs">
+            ${tabs.map(tab => {
+              const tabId = String(tab?.id || '');
+              const safeTabId = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(tabId) : tabId.replace(/"/g, '&quot;');
+              const safeTitle = runtimeEscapeHtml ? runtimeEscapeHtml(tab.title || tab.url || 'Tab') : tab.title || tab.url || 'Tab';
+              const safeUrlText = runtimeEscapeHtml ? runtimeEscapeHtml(getTabCanonicalUrl(tab)) : getTabCanonicalUrl(tab);
+              const iconData = runtimeGetIconSources ? runtimeGetIconSources(tab, 16) : { sources: [], hostname: '' };
+              const faviconUrl = iconData.sources?.[0] || '';
+              const fallbackUrl = iconData.sources?.[1] || '';
+              const fallbackSrcset = iconData.sources?.length > 2
+                ? (runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(JSON.stringify(iconData.sources.slice(2))) : JSON.stringify(iconData.sources.slice(2)).replace(/"/g, '&quot;'))
+                : '';
+              const fallbackLabel = runtimeGetFallbackLabel ? runtimeGetFallbackLabel(tab.title || tab.url || '', iconData.hostname || '') : '?';
+              return `
+                <label class="session-picker-tab-row">
+                  <input type="checkbox" data-action="toggle-session-picker-tab" data-tab-id="${safeTabId}"${selectedIds.has(tabId) ? ' checked' : ''}>
+                  <span class="session-picker-tab-title">
+                    ${faviconUrl ? `<img src="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(faviconUrl) : faviconUrl}" alt="" data-fallback-src="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(fallbackUrl) : fallbackUrl}"${fallbackSrcset ? ` data-fallback-srcset="${fallbackSrcset}"` : ''}>` : ''}
+                    <span class="inline-favicon-fallback"${faviconUrl ? ' style="display:none"' : ''}>${runtimeEscapeHtml ? runtimeEscapeHtml(fallbackLabel) : fallbackLabel}</span>
+                    <span>${safeTitle}</span>
+                  </span>
+                  <span class="session-picker-tab-url">${safeUrlText}</span>
+                </label>`;
+            }).join('')}
+          </div>
+        </section>`;
+    }).join('')
+    : `<div class="session-picker-empty">${runtimeT ? runtimeT('sessionPickerEmpty') : 'No restorable tabs in this window.'}</div>`;
+
+  return `
+    <section class="session-picker" id="tabSessionPicker" aria-label="${runtimeT ? runtimeT('sessionPickerTitle') : 'Choose what to save'}">
+      <div class="session-picker-header">
+        <div>
+          <div class="session-picker-title">${runtimeT ? runtimeT('sessionPickerTitle') : 'Choose what to save'}</div>
+        </div>
+        <button class="group-action-icon group-action-close" type="button" data-action="close-session-picker" aria-label="${runtimeT ? runtimeT('sessionPickerClose') : 'Close tab picker'}">
+          ${ICONS.close}
+        </button>
+      </div>
+      <div class="session-picker-list">${listHtml}</div>
+      <div class="session-picker-footer">
+        <span class="session-picker-count">${runtimeT ? runtimeT('sessionPickerSelectedCount', { count: selectedCount }) : `${selectedCount} selected`}</span>
+        <div class="session-picker-save-mode" role="group" aria-label="${runtimeT ? runtimeT('sessionPickerModeLabel') : 'Save mode'}">
+          <button class="session-picker-mode-button${mode === 'new' ? ' is-active' : ''}" type="button" data-action="select-session-picker-mode" data-session-picker-mode="new" aria-pressed="${mode === 'new'}">${runtimeT ? runtimeT('sessionPickerNewSession') : 'New group'}</button>
+          <button class="session-picker-mode-button${mode === 'existing' ? ' is-active' : ''}" type="button" data-action="select-session-picker-mode" data-session-picker-mode="existing" aria-pressed="${mode === 'existing'}"${existingDisabled ? ' disabled' : ''}>${runtimeT ? runtimeT('sessionPickerExistingSession') : 'Existing group'}</button>
+        </div>
+        <input class="session-picker-name-input" type="text" data-action="change-session-picker-new-name" value="${safeNewSessionName}" placeholder="${safeNamePlaceholder}" aria-label="${safeNamePlaceholder}"${mode === 'new' ? '' : ' hidden disabled'}>
+        <select class="session-picker-target-select" data-action="change-session-picker-target" aria-label="${safeSelectLabel}"${mode === 'existing' && !existingDisabled ? '' : ' hidden disabled'}>
+          ${savedSessions.length
+            ? savedSessions.map(session => {
+              const id = String(session?.id || '');
+              const safeId = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(id) : id.replace(/"/g, '&quot;');
+              const label = getSavedSessionOptionLabel(session);
+              return `<option value="${safeId}"${id === targetSessionId ? ' selected' : ''}>${runtimeEscapeHtml ? runtimeEscapeHtml(label) : label}</option>`;
+            }).join('')
+            : `<option value="">${runtimeT ? runtimeT('sessionPickerNoSavedSessions') : 'No saved sessions yet'}</option>`}
+        </select>
+        <button class="action-btn save-tabs" type="button" data-action="save-selected-session-tabs"${selectedCount ? '' : ' disabled'}>
+          ${mode === 'existing'
+            ? (runtimeT ? runtimeT('sessionPickerAddToExisting') : 'Add to session')
+            : (runtimeT ? runtimeT('sessionPickerSaveAndClose') : 'Save and close')}
+        </button>
+      </div>
+    </section>`;
+}
+
+async function submitTabSessionPicker() {
+  const selectedIds = getTabSessionPickerSelectedIds();
+  if (!selectedIds.length) {
+    showToast(runtimeT ? runtimeT('toastNoSessionTabsSelected') : 'Select at least one tab');
+    return;
+  }
+
+  try {
+    if (tabSessionPickerState.mode === 'existing') {
+      const targetSessionId = tabSessionPickerState.targetSessionId || String(tabSessionPickerState.savedSessions?.[0]?.id || '');
+      if (!targetSessionId) throw new Error('Session not found');
+      const result = await appendTabsToExistingSavedSession(targetSessionId, selectedIds);
+      tabSessionPickerState = {
+        ...tabSessionPickerState,
+        open: false,
+        newSessionName: '',
+      };
+      await renderDashboard();
+      const skipped = result?.skippedDuplicateCount || 0;
+      showToast(runtimeT
+        ? runtimeT('toastSessionTabsAdded', { count: result?.appendedCount || 0, skipped })
+        : `Added ${result?.appendedCount || 0} tabs${skipped ? `, skipped ${skipped} duplicates` : ''}`);
+      return;
+    }
+
+    const newSessionName = String(tabSessionPickerState.newSessionName || '').trim();
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      open: false,
+      newSessionName: '',
+    };
+    const result = await saveSelectedTabSession(
+      selectedIds,
+      tabSessionPickerState.source || 'selected',
+      newSessionName
+    );
+    showToast(runtimeT
+      ? runtimeT('toastSessionSaved', { count: result?.session?.tabs?.length || 0 })
+      : 'Session saved');
+  } catch (err) {
+    console.error('[tab-harbor] Failed to save selected tabs:', err);
+    showToast(runtimeT ? runtimeT('toastSessionActionFailed') : 'Could not update saved tabs');
+  }
+}
+
+async function openSavedTabsInCurrentWindow(tabs = []) {
+  const [firstTab, ...restTabs] = Array.isArray(tabs) ? tabs : [];
+  if (!firstTab?.url) return { restoredTabs: [], windowId: null };
+
+  const currentWindowId = await getCurrentWindowId();
+  const firstCreatedTab = currentWindowId != null
+    ? await chrome.tabs.create({
+      windowId: currentWindowId,
+      url: firstTab.url,
+      active: true,
+    })
+    : await chrome.tabs.create({
+      url: firstTab.url,
+      active: true,
+    });
+  const targetWindowId = firstCreatedTab?.windowId ?? currentWindowId ?? null;
+  const restoredTabs = firstCreatedTab?.id != null
+    ? [{ id: firstCreatedTab.id, url: firstTab.url }]
+    : [];
+
+  for (const tab of restTabs) {
+    const createdTab = await chrome.tabs.create({
+      windowId: targetWindowId,
+      url: tab.url,
+      active: false,
+    });
+    restoredTabs.push({
+      id: createdTab.id,
+      url: tab.url,
+    });
+  }
+
+  return { restoredTabs, windowId: targetWindowId };
+}
+
+async function openSavedTabsInNewWindow(tabs = []) {
+  const [firstTab, ...restTabs] = Array.isArray(tabs) ? tabs : [];
+  if (!firstTab?.url) return { restoredTabs: [], windowId: null };
+
+  const createdWindow = await chrome.windows.create({
+    url: firstTab.url,
+    focused: true,
+  });
+  const restoredTabs = [];
+  const firstCreatedTab = Array.isArray(createdWindow?.tabs) ? createdWindow.tabs[0] : null;
+  if (firstCreatedTab?.id != null) {
+    restoredTabs.push({
+      id: firstCreatedTab.id,
+      url: firstTab.url,
+    });
+  } else if (createdWindow?.id != null) {
+    const createdWindowTabs = await chrome.tabs.query({ windowId: createdWindow.id });
+    const queriedFirstTab = createdWindowTabs?.[0];
+    if (queriedFirstTab?.id != null) {
+      restoredTabs.push({
+        id: queriedFirstTab.id,
+        url: firstTab.url,
+      });
+    }
+  }
+
+  for (const tab of restTabs) {
+    const createdTab = await chrome.tabs.create({
+      windowId: createdWindow.id,
+      url: tab.url,
+      active: false,
+    });
+    restoredTabs.push({
+      id: createdTab.id,
+      url: tab.url,
+    });
+  }
+
+  return { restoredTabs, windowId: createdWindow?.id ?? null };
+}
+
+async function restoreSavedTabToBrowser(tabUrl) {
+  if (!tabUrl) return null;
+  const restoreMode = runtimeGetSavedSessionRestoreMode ? runtimeGetSavedSessionRestoreMode() : 'new-window';
+  if (restoreMode === 'current-window') {
+    const { windowId } = await openSavedTabsInCurrentWindow([{ url: tabUrl }]);
+    return { windowId, restoreMode };
+  }
+  const { windowId } = await openSavedTabsInNewWindow([{ url: tabUrl }]);
+  return { windowId, restoreMode };
+}
+
+async function restoreSavedTabSession(sessionId) {
+  if (!runtimeGetSavedTabSessions || !runtimeCreateRestoredSessionGroups) {
+    throw new Error('Session restore is unavailable');
+  }
+
+  const sessions = await runtimeGetSavedTabSessions();
+  const session = sessions.find(item => item.id === String(sessionId));
+  if (!session || !Array.isArray(session.tabs) || !session.tabs.length) {
+    throw new Error('Session not found');
+  }
+
+  const restoreMode = runtimeGetSavedSessionRestoreMode ? runtimeGetSavedSessionRestoreMode() : 'new-window';
+  const { restoredTabs, windowId } = restoreMode === 'current-window'
+    ? await openSavedTabsInCurrentWindow(session.tabs)
+    : await openSavedTabsInNewWindow(session.tabs);
+
+  const nextSessionGroups = runtimeCreateRestoredSessionGroups({
+    existingState: sessionGroupsState,
+    session,
+    restoredTabs,
+    now: new Date().toISOString(),
+  });
+  await saveSessionGroups(nextSessionGroups);
+  await renderDashboard();
+
+  return {
+    restoredCount: restoredTabs.length,
+    windowId,
+  };
+}
+
+async function removeOpenTabByIdOrUrl(tabId, tabUrl) {
+  const numericTabId = getTabIdValue(tabId);
+  if (numericTabId != null) {
+    await chrome.tabs.remove(numericTabId);
+    return numericTabId;
+  }
+
+  const allTabs = await queryTabsForDashboardWindow();
+  const targetUrl = runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(tabUrl || '') : tabUrl;
+  const match = allTabs.find(tab => {
+    const canonicalUrl = getTabCanonicalUrl(tab);
+    return tab.url === tabUrl || canonicalUrl === targetUrl;
+  });
+  if (match?.id != null) {
+    await chrome.tabs.remove(match.id);
+    return match.id;
+  }
+  return null;
+}
+
+function animateNavButtonNode(button, previousRect) {
+  if (!button || !previousRect || button.classList.contains('is-dragging')) return;
+
+  const nextRect = button.getBoundingClientRect();
+  const deltaX = previousRect.left - nextRect.left;
+  const deltaY = previousRect.top - nextRect.top;
+  if (!deltaX && !deltaY) return;
+
+  const travel = Math.hypot(deltaX, deltaY);
+  const duration = prefersReducedMotion()
+    ? 0
+    : Math.min(320, Math.max(190, Math.round(172 + travel * 0.28)));
+
+  button.style.transition = 'none';
+  button.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+  requestAnimationFrame(() => {
+    button.style.transition = duration
+      ? `transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`
+      : 'none';
+    button.style.transform = '';
+  });
+}
+
+function animateNavButtons(navListEl, previousRects) {
+  navListEl?.querySelectorAll('.group-nav-button').forEach(button => {
+    const key = button.dataset.groupId || '';
+    animateNavButtonNode(button, previousRects.get(key));
+  });
+}
+
+function animateMissionCards(missionsEl, previousRects) {
+  missionsEl?.querySelectorAll('.mission-card').forEach(card => {
+    const key = card.dataset.groupId || '';
+    const previousRect = previousRects.get(key);
+    if (!previousRect) return;
+
+    const nextRect = card.getBoundingClientRect();
+    const deltaX = previousRect.left - nextRect.left;
+    const deltaY = previousRect.top - nextRect.top;
+    if (!deltaX && !deltaY) return;
+
+    const travel = Math.hypot(deltaX, deltaY);
+    const duration = prefersReducedMotion()
+      ? 0
+      : Math.min(220, Math.max(140, Math.round(150 + travel * 0.18)));
+
+    card.style.transition = 'none';
+    card.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+    requestAnimationFrame(() => {
+      card.style.transition = duration
+        ? `transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`
+        : 'none';
+      card.style.transform = '';
+    });
+  });
+}
+
+function buildPreviewGroupOrderFromDom(insertedGroupKey = '') {
+  const missionsEl = document.getElementById('openTabsMissions');
+  if (!missionsEl) return [];
+
+  return [...missionsEl.children]
+    .map(node => {
+      if (node === pageChipNewGroupSlotEl) return insertedGroupKey;
+      if (node.classList?.contains('mission-card')) return node.dataset?.groupId || '';
+      return '';
+    })
+    .filter(Boolean);
+}
+
+function buildPersistentGroupOrderWithInsertedGroup(insertedGroupKey, {
+  insertBeforeGroupKey = '',
+  placement = 'after',
+} = {}) {
+  const normalizedInsertedKey = String(insertedGroupKey || '');
+  if (!normalizedInsertedKey) return [];
+
+  const currentKeys = domainGroups
+    .map(group => String(group?.domain || ''))
+    .filter(Boolean)
+    .filter(key => key !== normalizedInsertedKey);
+
+  const normalizedBeforeKey = String(insertBeforeGroupKey || '');
+  if (normalizedBeforeKey) {
+    const insertIndex = currentKeys.indexOf(normalizedBeforeKey);
+    if (insertIndex >= 0) {
+      currentKeys.splice(insertIndex, 0, normalizedInsertedKey);
+      return currentKeys;
+    }
+  }
+
+  if (placement === 'before') {
+    currentKeys.unshift(normalizedInsertedKey);
+    return currentKeys;
+  }
+
+  currentKeys.push(normalizedInsertedKey);
+  return currentKeys;
+}
+
+function buildPersistentGroupOrderReplacingKey(replacementGroupKey, replacedGroupKey) {
+  const normalizedReplacementKey = String(replacementGroupKey || '');
+  const normalizedReplacedKey = String(replacedGroupKey || '');
+  if (!normalizedReplacementKey) return [];
+
+  const currentKeys = domainGroups
+    .map(group => String(group?.domain || ''))
+    .filter(Boolean)
+    .filter(key => key !== normalizedReplacementKey);
+
+  if (!normalizedReplacedKey) {
+    currentKeys.push(normalizedReplacementKey);
+    return currentKeys;
+  }
+
+  const replaceIndex = currentKeys.indexOf(normalizedReplacedKey);
+  if (replaceIndex >= 0) {
+    currentKeys.splice(replaceIndex, 1, normalizedReplacementKey);
+    return currentKeys;
+  }
+
+  currentKeys.push(normalizedReplacementKey);
+  return currentKeys;
+}
+
+async function persistGroupOrder(orderKeys = []) {
+  const normalizedKeys = [...new Set((orderKeys || []).map(key => String(key)).filter(Boolean))];
+  if (!normalizedKeys.length) return groupOrderState;
+
+  return saveGroupOrder({
+    ...groupOrderState,
+    sessionOrder: normalizedKeys,
+    pinnedOrder: normalizedKeys,
+    pinEnabled: false,
+  });
+}
+
+function applyLiveGroupOrder(orderKeys, options = {}) {
+  const keyOrder = orderKeys.map(String);
+  const groupMap = new Map(domainGroups.map(group => [String(group.domain), group]));
+  domainGroups = keyOrder.map(key => groupMap.get(key)).filter(Boolean);
+  syncGroupOrderState(domainGroups.map(group => group.domain));
+
+  const missionsEl = document.getElementById('openTabsMissions');
+  const navListEl = document.querySelector('#workspaceTopNav .group-nav-list[data-nav-kind="open-tabs"]');
+  if (options.reorderCards !== false) {
+    const previousMissionRects = new Map();
+    missionsEl?.querySelectorAll('.mission-card').forEach(card => {
+      previousMissionRects.set(card.dataset.groupId || '', card.getBoundingClientRect());
+    });
+
+    keyOrder.forEach(key => {
+      const card = missionsEl?.querySelector(`.mission-card[data-group-id="${CSS.escape(String(key))}"]`);
+      if (card) missionsEl.appendChild(card);
+    });
+
+    animateMissionCards(missionsEl, previousMissionRects);
+  }
+
+  if (options.reorderNav === false || !navListEl) return;
+
+  const previousNavRects = new Map();
+  navListEl.querySelectorAll('.group-nav-button').forEach(button => {
+    previousNavRects.set(button.dataset.groupId || '', button.getBoundingClientRect());
+  });
+
+  keyOrder.forEach(key => {
+    const button = navListEl.querySelector(`.group-nav-button[data-group-id="${CSS.escape(String(key))}"]`);
+    if (button) navListEl.appendChild(button);
+  });
+
+  animateNavButtons(navListEl, previousNavRects);
+}
+
+function clearGroupDragState() {
+  draggedGroupId = '';
+  dragStartPoint = null;
+  draggedGroupButtonEl = null;
+  dragPlaceholderEl?.remove();
+  dragPlaceholderEl = null;
+  document.body.classList.remove('group-dragging');
+  document.querySelectorAll('.group-nav-button.is-dragging').forEach(button => {
+    button.classList.remove('is-dragging');
+    button.style.removeProperty('--drag-left');
+    button.style.removeProperty('--drag-top');
+  });
+}
+
+function animateDrawerListItems(listEl, previousRects) {
+  listEl?.querySelectorAll('[data-drawer-sort-id]').forEach(item => {
+    if (item.classList.contains('is-dragging')) return;
+
+    const key = item.dataset.drawerSortId || '';
+    const previousRect = previousRects.get(key);
+    if (!previousRect) return;
+
+    const nextRect = item.getBoundingClientRect();
+    const deltaX = previousRect.left - nextRect.left;
+    const deltaY = previousRect.top - nextRect.top;
+    if (!deltaX && !deltaY) return;
+
+    item.style.transition = 'none';
+    item.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+    requestAnimationFrame(() => {
+      item.style.transition = 'transform 0.16s ease';
+      item.style.transform = '';
+    });
+  });
+}
+
+function ensureDrawerItemPlaceholder() {
+  if (drawerItemPlaceholderEl || !draggedDrawerItemEl) return drawerItemPlaceholderEl;
+
+  drawerItemPlaceholderEl = document.createElement('div');
+  drawerItemPlaceholderEl.className = 'drawer-reorder-placeholder';
+  drawerItemPlaceholderEl.style.height = `${draggedDrawerItemEl.getBoundingClientRect().height}px`;
+  draggedDrawerItemEl.insertAdjacentElement('afterend', drawerItemPlaceholderEl);
+  return drawerItemPlaceholderEl;
+}
+
+function clearDrawerItemDragState() {
+  draggedDrawerItemId = '';
+  drawerItemDragState = null;
+  drawerItemPlaceholderEl?.remove();
+  drawerItemPlaceholderEl = null;
+  document.body.classList.remove('drawer-list-dragging');
+
+  if (draggedDrawerItemEl) {
+    draggedDrawerItemEl.classList.remove('is-dragging');
+    draggedDrawerItemEl.style.removeProperty('--drag-left');
+    draggedDrawerItemEl.style.removeProperty('--drag-top');
+    draggedDrawerItemEl.style.removeProperty('--drag-width');
+  }
+
+  draggedDrawerItemEl = null;
+}
+
+function ensurePageChipPlaceholder(listEl = pageChipDragState?.dropListEl || pageChipDragState?.sourceListEl) {
+  if (!draggedPageChipEl) return null;
+
+  if (!pageChipPlaceholderEl) {
+    pageChipPlaceholderEl = document.createElement('div');
+    pageChipPlaceholderEl.className = 'chip-reorder-placeholder';
+    pageChipPlaceholderEl.style.height = `${draggedPageChipEl.getBoundingClientRect().height}px`;
+  }
+
+  if (listEl && pageChipPlaceholderEl.parentElement !== listEl) {
+    listEl.appendChild(pageChipPlaceholderEl);
+  }
+
+  return pageChipPlaceholderEl;
+}
+
+function clampPageChipClientPoint(clientX, clientY) {
+  const maxX = Math.max(0, window.innerWidth - 1);
+  const maxY = Math.max(0, window.innerHeight - 1);
+  return {
+    clientX: Math.min(Math.max(Number(clientX) || 0, 0), maxX),
+    clientY: Math.min(Math.max(Number(clientY) || 0, 0), maxY),
+  };
+}
+
+function clearPageChipDragState({ removeNode = false } = {}) {
+  const handleEl = pageChipDragState?.handleEl || null;
+  const pointerId = pageChipDragState?.pointerId;
+  draggedPageChipId = '';
+  clearPageChipDropPreview();
+  pageChipPlaceholderEl?.remove();
+  pageChipPlaceholderEl = null;
+  document.body.classList.remove('page-chip-list-dragging');
+  document.body.classList.remove('page-chip-drag-armed');
+
+  if (draggedPageChipEl) {
+    if (removeNode) draggedPageChipEl.remove();
+    draggedPageChipEl.classList.remove('is-dragging');
+    draggedPageChipEl.style.removeProperty('--drag-left');
+    draggedPageChipEl.style.removeProperty('--drag-top');
+    draggedPageChipEl.style.removeProperty('--drag-width');
+  }
+
+  if (handleEl && pointerId != null && typeof handleEl.releasePointerCapture === 'function') {
+    try {
+      if (handleEl.hasPointerCapture?.(pointerId)) handleEl.releasePointerCapture(pointerId);
+    } catch {}
+  }
+
+  pageChipDragState = null;
+  draggedPageChipEl = null;
+}
+
+function updateDraggedPageChipPosition(clientX, clientY) {
+  if (!draggedPageChipEl || !pageChipDragState) return;
+  const clampedPoint = clampPageChipClientPoint(clientX, clientY);
+
+  draggedPageChipEl.style.setProperty('--drag-left', `${clampedPoint.clientX - pageChipDragState.offsetX}px`);
+  draggedPageChipEl.style.setProperty('--drag-top', `${clampedPoint.clientY - pageChipDragState.offsetY}px`);
+}
+
+function startPageChipDragVisuals() {
+  if (!draggedPageChipEl || !pageChipDragState || pageChipDragState.moved) return;
+  disableEntryAnimations();
+  pageChipDragState.moved = true;
+  document.body.classList.add('page-chip-list-dragging');
+  draggedPageChipEl.classList.add('is-dragging');
+  draggedPageChipEl.style.setProperty('--drag-width', `${draggedPageChipEl.getBoundingClientRect().width}px`);
+  ensurePageChipPlaceholder();
+  logPageChipDragDebug('drag-start', {
+    groupKey: pageChipDragState.sourceGroupKey,
+    chip: draggedPageChipId,
+  });
+}
+
+function syncPageChipDropTarget(clientX, clientY) {
+  const clampedPoint = clampPageChipClientPoint(clientX, clientY);
+  const dropTarget = getPageChipDropTarget(clampedPoint.clientX, clampedPoint.clientY);
+  if (!pageChipDragState || !draggedPageChipId) return;
+
+  if (!dropTarget) {
+    const previous = pageChipDragState.debugTargetSignature || '';
+    pageChipDragState.dropGroupKey = '';
+    pageChipDragState.dropListEl = null;
+    pageChipDragState.dropCardEl = null;
+    pageChipDragState.createNewGroup = false;
+    pageChipDragState.newGroupPlacement = '';
+    pageChipDragState.insertBeforeCardEl = null;
+    pageChipDragState.lastResolvedDropTarget = null;
+    pageChipPlaceholderEl?.remove();
+    clearPageChipDropPreview();
+    pageChipDragState.debugTargetSignature = 'none';
+    if (previous !== 'none') {
+      logPageChipDragDebug('target', { kind: 'none', x: Math.round(clampedPoint.clientX), y: Math.round(clampedPoint.clientY) });
+    }
+    return;
+  }
+
+  if (dropTarget.kind === 'new-group') {
+    pageChipDragState.dropGroupKey = '';
+    pageChipDragState.dropListEl = null;
+    pageChipDragState.dropCardEl = null;
+    pageChipDragState.createNewGroup = true;
+    pageChipDragState.newGroupPlacement = dropTarget.placement || 'after';
+    pageChipDragState.insertBeforeCardEl = dropTarget.insertBeforeCardEl || null;
+    pageChipDragState.lastResolvedDropTarget = {
+      kind: 'new-group',
+      placement: pageChipDragState.newGroupPlacement,
+      insertBeforeCardEl: pageChipDragState.insertBeforeCardEl,
+      reason: dropTarget.reason || '',
+    };
+    pageChipPlaceholderEl?.remove();
+    setPageChipDropPreview(null, {
+      createNewGroup: true,
+      newGroupPlacement: pageChipDragState.newGroupPlacement,
+      insertBeforeCardEl: pageChipDragState.insertBeforeCardEl,
+    });
+    const signature = `new:${pageChipDragState.newGroupPlacement}:${dropTarget.reason || ''}`;
+    if (pageChipDragState.debugTargetSignature !== signature) {
+      pageChipDragState.debugTargetSignature = signature;
+      logPageChipDragDebug('target', {
+        kind: 'new-group',
+        placement: pageChipDragState.newGroupPlacement,
+        reason: dropTarget.reason || '',
+        x: Math.round(clampedPoint.clientX),
+        y: Math.round(clampedPoint.clientY),
+      });
+    }
+    return;
+  }
+
+  const { cardEl, listEl, groupKey } = dropTarget;
+  pageChipDragState.dropGroupKey = groupKey;
+  pageChipDragState.dropListEl = listEl;
+  pageChipDragState.dropCardEl = cardEl;
+  pageChipDragState.createNewGroup = false;
+  pageChipDragState.newGroupPlacement = '';
+  pageChipDragState.insertBeforeCardEl = null;
+  pageChipDragState.lastResolvedDropTarget = {
+    kind: 'group',
+    groupKey,
+    cardEl,
+    listEl,
+  };
+  setPageChipDropPreview(cardEl);
+  const signature = `group:${groupKey}`;
+  if (pageChipDragState.debugTargetSignature !== signature) {
+    pageChipDragState.debugTargetSignature = signature;
+      logPageChipDragDebug('target', {
+        kind: 'group',
+        groupKey,
+        x: Math.round(clampedPoint.clientX),
+        y: Math.round(clampedPoint.clientY),
+      });
+    }
+
+  return dropTarget;
+}
+
+function previewPageChipOrder(clientX, clientY) {
+  const dropTarget = syncPageChipDropTarget(clientX, clientY);
+  if (!dropTarget || dropTarget.kind !== 'group') return;
+  const { listEl } = dropTarget;
+
+  const placeholder = ensurePageChipPlaceholder(listEl);
+  const previousRects = new Map();
+  const items = [...listEl.querySelectorAll('[data-chip-sort-id]:not(.is-dragging)')];
+
+  items.forEach(item => {
+    previousRects.set(item.dataset.chipSortId || '', item.getBoundingClientRect());
+  });
+
+  let insertBeforeItem = null;
+  for (const item of items) {
+    const rect = item.getBoundingClientRect();
+    if (clientY < rect.top + rect.height / 2) {
+      insertBeforeItem = item;
+      break;
+    }
+  }
+
+  if (insertBeforeItem) {
+    listEl.insertBefore(placeholder, insertBeforeItem);
+  } else {
+    listEl.appendChild(placeholder);
+  }
+
+  animatePageChipItems(listEl, previousRects);
+}
+
+async function saveGroupTabRowOrder(groupKey, orderIds) {
+  if (!groupKey || !Array.isArray(orderIds) || !orderIds.length) return;
+
+  await saveGroupTabOrder({
+    ...groupTabOrderState,
+    [String(groupKey)]: orderIds.map(id => String(id)).filter(Boolean),
+  });
+}
+
+function createSessionGroupFromDraggedTab(state, tab) {
+  const nextName = createUniqueSessionGroupName(deriveDraggedTabGroupName(tab), state.groups);
+  return addSessionGroup(state, nextName);
+}
+
+async function saveCrossGroupTabRowOrder(sourceGroupKey, targetGroupKey, targetListEl, draggedId) {
+  const nextState = {
+    ...groupTabOrderState,
+    [String(sourceGroupKey)]: getOrderedIdsForGroup(sourceGroupKey).filter(id => id !== String(draggedId || '')),
+    [String(targetGroupKey)]: targetListEl
+      ? buildOrderedIdsFromList(targetListEl, draggedId)
+      : [String(draggedId || '')].filter(Boolean),
+  };
+
+  await saveGroupTabOrder(nextState);
+}
+
+async function moveDraggedPageChipToGroup(targetGroupKey) {
+  const sourceGroupKey = pageChipDragState?.sourceGroupKey || '';
+  const draggedChipId = draggedPageChipId;
+  const draggedTabIds = getTabIdsForGroupChip(sourceGroupKey, draggedChipId);
+  if (!sourceGroupKey || !draggedChipId || !draggedTabIds.length) return null;
+  const targetWasManualGroup = isManualGroupKey(targetGroupKey);
+
+  logPageChipDragDebug('move-group-begin', {
+    sourceGroupKey,
+    targetGroupKey,
+    draggedChipId,
+    tabIds: draggedTabIds.join(','),
+  });
+  let nextState = clearTabsFromSessionGroups(sessionGroupsState, draggedTabIds);
+  const targetGroup = ensureManualDropGroup(nextState, targetGroupKey);
+  nextState = reassignTabsToSessionGroup(targetGroup.nextState, draggedTabIds, targetGroup.groupId);
+  nextState = pruneSessionGroups(nextState, getOpenTabIdsForSessionPruning());
+  logPageChipDragDebug('move-group-save-session', {
+    groupId: targetGroup.groupId,
+    groupName: targetGroup.groupName,
+  });
+  await saveSessionGroups(nextState);
+  logPageChipDragDebug('move-group-end', {
+    groupId: targetGroup.groupId,
+    groupName: targetGroup.groupName,
+  });
+
+  return {
+    groupKey: `${MANUAL_GROUP_PREFIX}${targetGroup.groupId}`,
+    groupName: targetGroup.groupName,
+    targetWasManualGroup,
+  };
+}
+
+async function createSessionGroupFromDraggedPageChip() {
+  const sourceGroupKey = pageChipDragState?.sourceGroupKey || '';
+  const draggedChipId = draggedPageChipId;
+  const draggedTabs = getDomainGroupByKey(sourceGroupKey)?.tabs?.filter(tab =>
+    getTabOrderTokens(tab).includes(String(draggedChipId || ''))
+  ) || [];
+  const draggedTabIds = draggedTabs.map(tab => Number(tab?.id)).filter(Number.isFinite);
+  if (!sourceGroupKey || !draggedChipId || !draggedTabs.length || !draggedTabIds.length) return null;
+
+  logPageChipDragDebug('create-group-begin', {
+    sourceGroupKey,
+    draggedChipId,
+    tabIds: draggedTabIds.join(','),
+  });
+  let nextState = clearTabsFromSessionGroups(sessionGroupsState, draggedTabIds);
+  const created = createSessionGroupFromDraggedTab(nextState, draggedTabs[0]);
+  nextState = reassignTabsToSessionGroup(created.state, draggedTabIds, created.group.id);
+  nextState = pruneSessionGroups(nextState, getOpenTabIdsForSessionPruning());
+  logPageChipDragDebug('create-group-save-session', {
+    groupId: created.group.id,
+    groupName: created.group.name,
+  });
+  await saveSessionGroups(nextState);
+  logPageChipDragDebug('create-group-save-order', {
+    groupId: created.group.id,
+    groupName: created.group.name,
+  });
+  await saveCrossGroupTabRowOrder(sourceGroupKey, `${MANUAL_GROUP_PREFIX}${created.group.id}`, null, draggedChipId);
+  logPageChipDragDebug('create-group-end', {
+    groupId: created.group.id,
+    groupName: created.group.name,
+  });
+
+  return created.group;
+}
+
+async function finishPageChipDrag() {
+  if (!draggedPageChipId || !pageChipDragState) return false;
+
+  const moved = pageChipDragState.moved;
+  const sourceGroupKey = pageChipDragState.sourceGroupKey;
+  const targetGroupKey = pageChipDragState.dropGroupKey || '';
+  const targetListEl = pageChipDragState.dropListEl;
+  const createNewGroup = pageChipDragState.createNewGroup;
+  logPageChipDragDebug('finish-begin', {
+    moved,
+    sourceGroupKey,
+    targetGroupKey,
+    createNewGroup,
+    placement: pageChipDragState.newGroupPlacement || '',
+  });
+
+  try {
+    const changedGroupKeys = new Set();
+    let requiresOpenTabsRebuild = true;
+    if (moved) {
+      if (targetGroupKey && targetGroupKey === sourceGroupKey && targetListEl) {
+        const orderIds = buildOrderedIdsFromList(targetListEl, draggedPageChipId);
+        logPageChipDragDebug('finish-reorder-save', { orderCount: orderIds.length });
+        await saveGroupTabRowOrder(sourceGroupKey, orderIds);
+        if (draggedPageChipEl && pageChipPlaceholderEl) {
+          targetListEl.insertBefore(draggedPageChipEl, pageChipPlaceholderEl);
+        }
+        requiresOpenTabsRebuild = false;
+      } else if (targetGroupKey) {
+        const movedGroup = await moveDraggedPageChipToGroup(targetGroupKey);
+        if (movedGroup) {
+          disableChromeTabGroupsImportModeForLocalEdits();
+          changedGroupKeys.add(sourceGroupKey);
+          changedGroupKeys.add(movedGroup.groupKey);
+          if (!movedGroup.targetWasManualGroup) {
+            const nextGroupOrder = buildPersistentGroupOrderReplacingKey(movedGroup.groupKey, targetGroupKey);
+            await persistGroupOrder(nextGroupOrder);
+          }
+          logPageChipDragDebug('finish-save-cross-order', { groupKey: movedGroup.groupKey });
+          await saveCrossGroupTabRowOrder(sourceGroupKey, movedGroup.groupKey, targetListEl, draggedPageChipId);
+          logPageChipDragDebug('finish-group-move', { groupKey: movedGroup.groupKey, groupName: movedGroup.groupName });
+        }
+      } else if (createNewGroup) {
+        const createdGroup = await createSessionGroupFromDraggedPageChip();
+        if (createdGroup) {
+          disableChromeTabGroupsImportModeForLocalEdits();
+          changedGroupKeys.add(sourceGroupKey);
+          const createdGroupKey = `${MANUAL_GROUP_PREFIX}${createdGroup.id}`;
+          changedGroupKeys.add(createdGroupKey);
+          const nextGroupOrder = buildPersistentGroupOrderWithInsertedGroup(createdGroupKey, {
+            insertBeforeGroupKey: pageChipDragState.insertBeforeCardEl?.dataset?.groupId || '',
+            placement: pageChipDragState.newGroupPlacement || 'after',
+          });
+          await persistGroupOrder(nextGroupOrder);
+          logPageChipDragDebug('create-group-save-group-order', {
+            orderCount: nextGroupOrder.length,
+          });
+          logPageChipDragDebug('finish-new-group', { groupName: createdGroup.name });
+        }
+      }
+
+      clearPageChipDragState({ removeNode: requiresOpenTabsRebuild });
+      suppressPageChipClickUntil = Date.now() + 250;
+      if (!requiresOpenTabsRebuild) {
+        logPageChipDragDebug('finish-local-reorder-commit', { groupKey: sourceGroupKey });
+        await syncChromeTabGroupsWithoutImportEcho();
+      } else {
+        logPageChipDragDebug('finish-open-tabs-patch-begin', { moved, changedGroups: [...changedGroupKeys].join(',') });
+        await renderOpenTabsLayout({
+          rebuildGroups: true,
+          syncChrome: true,
+          patchDom: true,
+          changedGroupKeys: [...changedGroupKeys],
+        });
+        logPageChipDragDebug('finish-open-tabs-patch-end', { moved });
+      }
+    } else {
+      clearPageChipDragState({ removeNode: moved });
+    }
+
+    logPageChipDragDebug('finish-end', { moved });
+    return true;
+  } catch (error) {
+    logPageChipDragDebug('finish-error', {
+      message: error?.message || String(error),
+    });
+    throw error;
+  }
+}
+
+function updateDraggedDrawerItemPosition(clientX, clientY) {
+  if (!draggedDrawerItemEl || !drawerItemDragState) return;
+
+  draggedDrawerItemEl.style.setProperty('--drag-left', `${clientX - drawerItemDragState.offsetX}px`);
+  draggedDrawerItemEl.style.setProperty('--drag-top', `${clientY - drawerItemDragState.offsetY}px`);
+}
+
+function previewDrawerItemOrder(clientY) {
+  const listEl = drawerItemDragState?.listEl;
+  if (!listEl || !draggedDrawerItemId) return;
+
+  const placeholder = ensureDrawerItemPlaceholder();
+  const previousRects = new Map();
+  const items = [...listEl.querySelectorAll('[data-drawer-sort-id]:not(.is-dragging)')];
+
+  items.forEach(item => {
+    previousRects.set(item.dataset.drawerSortId || '', item.getBoundingClientRect());
+  });
+
+  let insertBeforeItem = null;
+  for (const item of items) {
+    const rect = item.getBoundingClientRect();
+    if (clientY < rect.top + rect.height / 2) {
+      insertBeforeItem = item;
+      break;
+    }
+  }
+
+  if (insertBeforeItem) {
+    listEl.insertBefore(placeholder, insertBeforeItem);
+  } else {
+    listEl.appendChild(placeholder);
+  }
+
+  animateDrawerListItems(listEl, previousRects);
+}
+
+async function reorderTodoItems(orderIds) {
+  const todos = await getTodos();
+  const nextTodos = reorderVisibleItemsByIds(
+    todos,
+    orderIds,
+    todo => todo && todo.id && !todo.completed && !todo.dismissed
+  );
+  return saveTodos(nextTodos);
+}
+
+async function saveDrawerItemOrder(kind, orderIds) {
+  if (!Array.isArray(orderIds) || !orderIds.length) return;
+
+  if (kind === 'todo') {
+    await reorderTodoItems(orderIds);
+  }
+}
+
+function updateDraggedButtonPosition(clientX, clientY) {
+  if (!draggedGroupButtonEl || !dragStartPoint) return;
+  draggedGroupButtonEl.style.setProperty('--drag-left', `${clientX - dragStartPoint.offsetX}px`);
+  draggedGroupButtonEl.style.setProperty('--drag-top', `${clientY - dragStartPoint.offsetY}px`);
+}
+
+function ensureDragPlaceholder() {
+  if (dragPlaceholderEl || !draggedGroupButtonEl) return dragPlaceholderEl;
+
+  dragPlaceholderEl = document.createElement('div');
+  dragPlaceholderEl.className = 'group-nav-placeholder';
+  draggedGroupButtonEl.insertAdjacentElement('afterend', dragPlaceholderEl);
+  return dragPlaceholderEl;
+}
+
+function previewDraggedOrder(clientX) {
+  const navListEl = document.querySelector('#workspaceTopNav .group-nav-list[data-nav-kind="open-tabs"]');
+  if (!navListEl || !draggedGroupId) return;
+
+  const placeholder = ensureDragPlaceholder();
+  const buttons = [...navListEl.querySelectorAll('.group-nav-button:not(.is-dragging)')];
+  let insertBeforeButton = null;
+
+  for (const button of buttons) {
+    const rect = button.getBoundingClientRect();
+    if (clientX < rect.left + rect.width / 2) {
+      insertBeforeButton = button;
+      break;
+    }
+  }
+
+  if (insertBeforeButton) {
+    navListEl.insertBefore(placeholder, insertBeforeButton);
+  } else {
+    navListEl.appendChild(placeholder);
+  }
+
+  const previewOrderKeys = [...navListEl.children]
+    .map(node => {
+      if (node === placeholder) return draggedGroupId;
+      if (node.classList?.contains('group-nav-button') && !node.classList.contains('is-dragging')) {
+        return node.dataset.groupId || '';
+      }
+      return '';
+    })
+    .filter(Boolean);
+
+  if (previewOrderKeys.length > 0) {
+    applyLiveGroupOrder(previewOrderKeys, { reorderCards: false, reorderNav: false });
+  }
+}
+
+async function removeTabAssignments(tabIds = []) {
+  if (!tabIds.length) return sessionGroupsState;
+
+  let nextState = sessionGroupsState;
+  for (const tabId of tabIds) {
+    nextState = clearTabSessionGroup(nextState, tabId);
+  }
+
+  nextState = pruneSessionGroups(nextState, getOpenTabIdsForSessionPruning());
+  return saveSessionGroups(nextState);
+}
+
+/**
+ * closeTabsByUrls(urls)
+ *
+ * Closes all open tabs whose hostname matches any of the given URLs.
+ * After closing, re-fetches the tab list to keep our state accurate.
+ *
+ * Special case: file:// URLs are matched exactly (they have no hostname).
+ */
+async function closeTabsByUrls(urls) {
+  if (!urls || urls.length === 0) return;
+
+  // Separate file:// URLs (exact match) from regular URLs (hostname match)
+  const targetHostnames = [];
+  const exactUrls = new Set();
+
+  for (const u of urls) {
+    const canonicalUrl = runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(u) : u;
+    if (canonicalUrl.startsWith('file://')) {
+      exactUrls.add(canonicalUrl);
+    } else {
+      try { targetHostnames.push(new URL(canonicalUrl).hostname); }
+      catch { /* skip unparseable */ }
+    }
+  }
+
+  const allTabs = await queryTabsForDashboardWindow();
+  const toClose = allTabs
+    .filter(tab => {
+      const tabUrl = getTabCanonicalUrl(tab);
+      if (tabUrl.startsWith('file://') && exactUrls.has(tabUrl)) return true;
+      try {
+        const tabHostname = new URL(tabUrl).hostname;
+        return tabHostname && targetHostnames.includes(tabHostname);
+      } catch { return false; }
+    })
+    .map(tab => tab.id);
+
+  if (toClose.length > 0) await chrome.tabs.remove(toClose);
+  await fetchOpenTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+}
+
+/**
+ * closeTabsExact(urls)
+ *
+ * Closes tabs by exact URL match (not hostname). Used for landing pages
+ * so closing "Gmail inbox" doesn't also close individual email threads.
+ */
+async function closeTabsExact(urls) {
+  if (!urls || urls.length === 0) return;
+  const urlSet = new Set(urls.map(url => runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(url) : url));
+  const allTabs = await queryTabsForDashboardWindow();
+  const toClose = allTabs.filter(t => urlSet.has(getTabCanonicalUrl(t))).map(t => t.id);
+  if (toClose.length > 0) await chrome.tabs.remove(toClose);
+  await fetchOpenTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+}
+
+/**
+ * focusTab(url)
+ *
+ * Switches Chrome to the tab with the given URL (exact match first,
+ * then hostname fallback). Also brings the window to the front.
+ */
+async function focusTab(url, tabId = null) {
+  if (!url && !tabId) return;
+  const numericTabId = getTabIdValue(tabId);
+  if (numericTabId != null) {
+    try {
+      const targetTab = await chrome.tabs.get(numericTabId);
+      if (targetTab?.id != null) {
+        await chrome.tabs.update(targetTab.id, { active: true });
+        await chrome.windows.update(targetTab.windowId, { focused: true });
+        if (typeof syncChromeTabGroupExpansionForTab === 'function') {
+          await syncChromeTabGroupExpansionForTab(targetTab);
+        }
+        return true;
+      }
+    } catch { /* fall back to URL matching */ }
+  }
+
+  const allTabs = await queryTabsForDashboardWindow();
+  const targetUrl = runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(url || '') : url;
+
+  // Try exact URL match first
+  let matches = allTabs.filter(t => getTabCanonicalUrl(t) === targetUrl || t.url === url);
+
+  // Fall back to hostname match
+  if (matches.length === 0) {
+    try {
+      const targetHost = new URL(targetUrl).hostname;
+      matches = allTabs.filter(t => {
+        try { return new URL(getTabCanonicalUrl(t)).hostname === targetHost; }
+        catch { return false; }
+      });
+    } catch {}
+  }
+
+  if (matches.length === 0) return false;
+
+  const match = matches.find(t => t.active) || matches[0];
+  await chrome.tabs.update(match.id, { active: true });
+  await chrome.windows.update(match.windowId, { focused: true });
+  if (typeof syncChromeTabGroupExpansionForTab === 'function') {
+    await syncChromeTabGroupExpansionForTab(match);
+  }
+  return true;
+}
+
+async function navigateCurrentTabToUrl(url) {
+  if (!url) return false;
+  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (!activeTab?.id) return false;
+  await chrome.tabs.update(activeTab.id, { url });
+  return true;
+}
+
+async function openOrFocusUrl(url) {
+  if (!url) return false;
+  await navigateCurrentTabToUrl(url);
+  return true;
+}
+
+async function runDefaultSearch(query) {
+  const text = String(query || '').trim();
+  if (!text) return;
+
+  if (chrome.search?.query) {
+    await chrome.search.query({
+      text,
+      disposition: 'CURRENT_TAB',
+    });
+    return;
+  }
+
+  const fallbackUrl = `https://www.google.com/search?q=${encodeURIComponent(text)}`;
+  await navigateCurrentTabToUrl(fallbackUrl);
+}
+
+/**
+ * closeDuplicateTabs(urls, keepOne)
+ *
+ * Closes duplicate tabs for the given list of URLs.
+ * keepOne=true → keep one copy of each, close the rest.
+ * keepOne=false → close all copies.
+ */
+async function closeDuplicateTabs(urls, keepOne = true) {
+  const allTabs = await queryTabsForDashboardWindow();
+  const toClose = [];
+
+  for (const url of urls) {
+    const targetUrl = runtimeGetCanonicalTabUrl ? runtimeGetCanonicalTabUrl(url) : url;
+    const matching = allTabs.filter(t => getTabCanonicalUrl(t) === targetUrl);
+    if (keepOne) {
+      const keep = matching.find(t => t.active) || matching[0];
+      for (const tab of matching) {
+        if (tab.id !== keep.id) toClose.push(tab.id);
+      }
+    } else {
+      for (const tab of matching) toClose.push(tab.id);
+    }
+  }
+
+  if (toClose.length > 0) await chrome.tabs.remove(toClose);
+  await fetchOpenTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+}
+
+/**
+ * closeTabOutDupes()
+ *
+ * Closes all duplicate Tab Harbor new-tab pages except the current one.
+ */
+async function closeTabOutDupes() {
+  const newtabUrl = window.location.href;
+
+  const allTabs = await queryTabsForDashboardWindow();
+  const currentWindow = await chrome.windows.getCurrent();
+  const tabOutTabs = allTabs.filter(t =>
+    t.url === newtabUrl || t.url === 'chrome://newtab/'
+  );
+
+  if (tabOutTabs.length <= 1) return;
+
+  // Keep the active Tab Harbor tab in the CURRENT window — that's the one the
+  // user is looking at right now. Falls back to any active one, then the first.
+  const keep =
+    tabOutTabs.find(t => t.active && t.windowId === currentWindow.id) ||
+    tabOutTabs.find(t => t.active) ||
+    tabOutTabs[0];
+  const toClose = tabOutTabs.filter(t => t.id !== keep.id).map(t => t.id);
+  if (toClose.length > 0) await chrome.tabs.remove(toClose);
+  await fetchOpenTabs();
+}
+
+/**
+ * discardTab(tabId)
+ *
+ * Discards (unloads) a tab to free memory while keeping it in the tab bar.
+ * Chrome's discard API puts the tab to sleep; clicking it later will reload.
+ */
+async function discardTab(tabId) {
+  if (!tabId) return false;
+  try {
+    await chrome.tabs.discard(Number(tabId));
+    return true;
+  } catch (err) {
+    console.error('Failed to discard tab:', err);
+    return false;
+  }
+}
+
+
+/* ----------------------------------------------------------------
+   IN-MEMORY STORE FOR OPEN-TAB GROUPS
+   ---------------------------------------------------------------- */
+let domainGroups = [];
+
+
+/* ----------------------------------------------------------------
+   HELPER: filter out browser-internal pages
+   ---------------------------------------------------------------- */
+
+/**
+ * getRealTabs()
+ *
+ * Returns tabs that are real web pages — no chrome://, extension
+ * pages, about:blank, etc.
+ */
+function getRealTabs() {
+  return openTabs.filter(t => {
+    const url = t.url || '';
+    if (runtimeIsRestorableTabUrl) return runtimeIsRestorableTabUrl(url);
+    return (
+      !url.startsWith('chrome://') &&
+      !url.startsWith('chrome-extension://') &&
+      !url.startsWith('about:') &&
+      !url.startsWith('edge://') &&
+      !url.startsWith('brave://')
+    );
+  });
+}
+
+/**
+ * checkTabOutDupes()
+ *
+ * Counts how many Tab Harbor pages are open. If more than 1,
+ * shows a banner offering to close the extras.
+ */
+function checkTabOutDupes() {
+  const tabOutTabs = openTabs.filter(t => t.isTabOut);
+  const banner  = document.getElementById('tabOutDupeBanner');
+  const countEl = document.getElementById('tabOutDupeCount');
+  if (!banner) return;
+
+  if (tabOutTabs.length > 1) {
+    if (countEl) countEl.textContent = tabOutTabs.length;
+    banner.style.display = 'flex';
+  } else {
+    banner.style.display = 'none';
+  }
+}
+
+
+/* ----------------------------------------------------------------
+   OVERFLOW CHIPS ("+N more" expand button in domain cards)
+   ---------------------------------------------------------------- */
+
+function buildOverflowChips(hiddenTabs, urlCounts = {}) {
+  const hiddenChips = hiddenTabs.map(tab => {
+    const label    = cleanTitle(smartTitle(stripTitleNoise(tab.title || ''), tab.url), '');
+    const count    = urlCounts[tab.url] || 1;
+    const dupeTag  = count > 1 ? ` <span class="chip-dupe-badge">(${count}x)</span>` : '';
+    const chipClass = count > 1 ? ' chip-has-dupes' : '';
+    const safeUrl   = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(tab.url || '') : (tab.url || '').replace(/"/g, '&quot;');
+    const safeTitle = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(label) : label.replace(/"/g, '&quot;');
+    const safeLabel = runtimeEscapeHtml ? runtimeEscapeHtml(label) : label;
+    const iconData = runtimeGetIconSources(tab, 16);
+    const faviconUrl = iconData.sources[0] || '';
+    const fallbackUrl = iconData.sources[1] || '';
+    const fallbackLabel = runtimeGetFallbackLabel(label, iconData.hostname);
+    const safeFallbackUrl = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(fallbackUrl) : fallbackUrl.replace(/"/g, '&quot;');
+    const safeTabId = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(String(tab.id || '')) : String(tab.id || '').replace(/"/g, '&quot;');
+    return `<div class="page-chip clickable${chipClass}" data-action="focus-tab" data-tab-id="${safeTabId}" data-tab-url="${safeUrl}" aria-label="${safeTitle}">
+      ${faviconUrl ? `<img class="chip-favicon" src="${faviconUrl}" alt="" data-fallback-src="${safeFallbackUrl}" data-fallback-srcset="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(JSON.stringify(iconData.sources.slice(2))) : JSON.stringify(iconData.sources.slice(2)).replace(/"/g, '&quot;')}">` : ''}
+      <span class="chip-favicon chip-favicon-fallback"${faviconUrl ? ' style="display:none"' : ''}>${fallbackLabel}</span>
+      <span class="chip-text">${safeLabel}</span>${dupeTag}
+      <div class="chip-actions">
+        ${sleepControlEnabled && !tab.active ? `
+        <button class="chip-action chip-discard" type="button" data-action="discard-tab" data-tab-id="${tab.id}" aria-label="${runtimeT ? runtimeT('discardTab') : 'Sleep tab'}" data-tooltip="${runtimeT ? runtimeT('discardTab') : 'Sleep tab'}">
+          ${ICONS.moon}
+        </button>
+        ` : ''}
+        <button class="chip-action chip-session-save" type="button" data-action="save-single-tab-session" data-tab-id="${safeTabId}" data-tab-url="${safeUrl}" data-tab-title="${safeTitle}" aria-label="${runtimeT ? runtimeT('saveTabSession') : 'Save tab session'}" data-tooltip="${runtimeT ? runtimeT('saveTabSession') : 'Save tab session'}">
+          ${ICONS.archive}
+        </button>
+        <button class="chip-action chip-close" type="button" data-action="close-single-tab" data-tab-id="${safeTabId}" data-tab-url="${safeUrl}" aria-label="${runtimeT ? runtimeT('closeThisTab') : 'Close this tab'}" data-tooltip="${runtimeT ? runtimeT('closeThisTab') : 'Close this tab'}">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+    </div>`;
+  }).join('');
+
+  return `
+    <div class="page-chips-overflow" style="display:none">${hiddenChips}</div>
+    <div class="page-chip page-chip-overflow clickable" data-action="expand-chips">
+      <span class="chip-text">${runtimeT ? runtimeT('moreCount', { count: hiddenTabs.length }) : `+${hiddenTabs.length} more`}</span>
+    </div>`;
+}
+
+
+/* ----------------------------------------------------------------
+   DOMAIN CARD RENDERER
+   ---------------------------------------------------------------- */
+
+/**
+ * renderDomainCard(group, groupIndex)
+ *
+ * Builds the HTML for one domain group card.
+ * group = { domain: string, tabs: [{ url, title, id, windowId, active }] }
+ */
+function renderDomainCard(group) {
+  const tabs      = group.tabs || [];
+  const tabCount  = tabs.length;
+  const stableId  = getStableGroupId(group.domain);
+  const groupTitle = getGroupDisplayLabel(group);
+  const renameEditorOpen = groupRenameEditorState?.groupKey === String(group.domain);
+  const renameEditorValue = renameEditorOpen ? (groupRenameEditorState?.value || groupTitle) : groupTitle;
+  const safeRenameValue = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(renameEditorValue) : String(renameEditorValue).replace(/"/g, '&quot;');
+
+  // Count duplicates (exact URL match)
+  const urlCounts = {};
+  for (const tab of tabs) urlCounts[tab.url] = (urlCounts[tab.url] || 0) + 1;
+  const dupeUrls   = Object.entries(urlCounts).filter(([, c]) => c > 1);
+  const hasDupes   = dupeUrls.length > 0;
+  const totalExtras = dupeUrls.reduce((s, [, c]) => s + c - 1, 0);
+
+  const dupeBadge = hasDupes
+    ? `<span class="duplicate-count-badge">
+        ${runtimeT
+          ? runtimeT('duplicatesCount', {
+              count: totalExtras,
+              suffix: totalExtras !== 1 ? 's' : '',
+            })
+          : `${totalExtras} duplicate${totalExtras !== 1 ? 's' : ''}`}
+      </span>`
+    : '';
+
+  const orderedTabs = getOrderedUniqueTabsForGroup(group);
+  const visibleTabs = orderedTabs.slice(0, 8);
+  const extraCount  = orderedTabs.length - visibleTabs.length;
+
+  const pageChips = visibleTabs.map(tab => {
+    let label = cleanTitle(smartTitle(stripTitleNoise(tab.title || ''), tab.url), group.domain);
+    // For localhost tabs, prepend port number so you can tell projects apart
+    try {
+      const parsed = new URL(tab.url);
+      if (parsed.hostname === 'localhost' && parsed.port) label = `${parsed.port} ${label}`;
+    } catch {}
+    const count    = urlCounts[tab.url];
+    const dupeTag  = count > 1 ? ` <span class="chip-dupe-badge">(${count}x)</span>` : '';
+    const chipClass = `${count > 1 ? ' chip-has-dupes' : ''}${tab.discarded ? ' page-chip--discarded' : ''}`;
+    const safeUrl   = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(tab.url || '') : (tab.url || '').replace(/"/g, '&quot;');
+    const safeTitle = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(label) : label.replace(/"/g, '&quot;');
+    const safeLabel = runtimeEscapeHtml ? runtimeEscapeHtml(label) : label;
+    const sortId = getPrimaryTabOrderToken(tab);
+    const safeSortId = (runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(sortId) : String(sortId).replace(/"/g, '&quot;'));
+    const safeGroupId = (runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.domain) : String(group.domain).replace(/"/g, '&quot;'));
+    const iconData = runtimeGetIconSources(tab, 16);
+    const faviconUrl = iconData.sources[0] || '';
+    const fallbackUrl = iconData.sources[1] || '';
+    const fallbackLabel = runtimeGetFallbackLabel(label, iconData.hostname);
+    const safeFallbackUrl = runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(fallbackUrl) : fallbackUrl.replace(/"/g, '&quot;');
+    return `<div class="page-chip clickable${chipClass}" data-action="focus-tab" data-tab-id="${tab.id}" data-tab-url="${safeUrl}" data-chip-sort-id="${safeSortId}" data-chip-group-id="${safeGroupId}" aria-label="${safeTitle}">
+      <button class="drawer-reorder-handle chip-reorder-handle" type="button" data-chip-drag-handle="tab" aria-label="${runtimeT ? runtimeT('dragReorderTab') : 'Drag to reorder tab'}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" /></svg>
+      </button>
+      ${faviconUrl ? `<img class="chip-favicon" src="${faviconUrl}" alt="" data-fallback-src="${safeFallbackUrl}" data-fallback-srcset="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(JSON.stringify(iconData.sources.slice(2))) : JSON.stringify(iconData.sources.slice(2)).replace(/"/g, '&quot;')}">` : ''}
+      <span class="chip-favicon chip-favicon-fallback"${faviconUrl ? ' style="display:none"' : ''}>${fallbackLabel}</span>
+      <span class="chip-text">${safeLabel}</span>${dupeTag}
+      <div class="chip-actions">
+        ${sleepControlEnabled && !tab.active ? `<button class="chip-action chip-discard" data-action="discard-tab" data-tab-id="${tab.id}" aria-label="${runtimeT ? runtimeT('discardTab') : 'Sleep tab'}" data-tooltip="${runtimeT ? runtimeT('discardTab') : 'Sleep tab'}">
+          ${ICONS.moon}
+        </button>` : ''}
+        <button class="chip-action chip-session-save" data-action="save-single-tab-session" data-tab-id="${tab.id}" data-tab-url="${safeUrl}" data-tab-title="${safeTitle}" aria-label="${runtimeT ? runtimeT('saveTabSession') : 'Save tab session'}" data-tooltip="${runtimeT ? runtimeT('saveTabSession') : 'Save tab session'}">
+          ${ICONS.archive}
+        </button>
+        <button class="chip-action chip-close" data-action="close-single-tab" data-tab-id="${tab.id}" data-tab-url="${safeUrl}" aria-label="${runtimeT ? runtimeT('closeThisTab') : 'Close this tab'}" data-tooltip="${runtimeT ? runtimeT('closeThisTab') : 'Close this tab'}">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+    </div>`;
+  }).join('') + (extraCount > 0 ? buildOverflowChips(orderedTabs.slice(8), urlCounts) : '');
+
+  const saveGroupButton = `
+      <button class="group-action-icon" type="button" data-action="save-domain-session" data-domain-id="${stableId}" aria-label="${runtimeT ? runtimeT('saveGroupSession') : 'Save group session'}" data-tooltip="${runtimeT ? runtimeT('saveGroupSession') : 'Save group session'}">
+        ${ICONS.archive}
+      </button>`;
+  const closeAllButton = `
+      <button class="group-action-icon group-action-close" type="button" data-action="close-domain-tabs" data-domain-id="${stableId}" aria-label="${runtimeT ? runtimeT('closeGroup') : 'Close group'}" data-tooltip="${runtimeT ? runtimeT('closeGroup') : 'Close group'}">
+        ${ICONS.close}
+      </button>`;
+
+  let actionsHtml = '';
+  if (hasDupes) {
+    const dupeUrlsEncoded = dupeUrls.map(([url]) => encodeURIComponent(url)).join(',');
+    actionsHtml += `
+      <button class="action-btn" type="button" data-action="dedup-keep-one" data-dupe-urls="${dupeUrlsEncoded}">
+        ${runtimeT
+          ? runtimeT('closedDuplicatesCount', { count: totalExtras, suffix: totalExtras !== 1 ? 's' : '' })
+          : `Close ${totalExtras} duplicate${totalExtras !== 1 ? 's' : ''}`}
+      </button>`;
+  }
+
+  return `
+    <div class="mission-card domain-card ${hasDupes ? 'has-amber-bar' : 'has-neutral-bar'}" data-domain-id="${stableId}" data-group-id="${group.domain}">
+      <div class="status-bar"></div>
+      <div class="mission-content">
+        <div class="mission-top">
+          <div class="mission-heading">
+            <span class="mission-title-wrap">
+              ${renameEditorOpen ? `
+                <form class="mission-rename-form" data-action="submit-group-rename" data-group-key="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.domain) : String(group.domain).replace(/"/g, '&quot;')}"${group.manualGroupId ? ` data-manual-group-id="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.manualGroupId) : String(group.manualGroupId).replace(/"/g, '&quot;')}"` : ''}>
+                  <input class="mission-rename-input" type="text" value="${safeRenameValue}" data-group-rename-input="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.domain) : String(group.domain).replace(/"/g, '&quot;')}" aria-label="${runtimeT ? runtimeT('renameGroup') : 'Rename group'}" autocomplete="off">
+                </form>
+              ` : `
+                <button class="mission-rename-trigger" type="button" data-action="rename-session-group" data-group-key="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.domain) : String(group.domain).replace(/"/g, '&quot;')}"${group.manualGroupId ? ` data-manual-group-id="${runtimeEscapeHtmlAttribute ? runtimeEscapeHtmlAttribute(group.manualGroupId) : String(group.manualGroupId).replace(/"/g, '&quot;')}"` : ''} aria-label="${runtimeT ? runtimeT('renameGroup') : 'Rename group'}" title="${runtimeT ? runtimeT('renameGroup') : 'Rename group'}">
+                  <span class="mission-name">${runtimeEscapeHtml ? runtimeEscapeHtml(groupTitle) : groupTitle}</span>
+                </button>
+              `}
+            </span>
+            ${dupeBadge}
+          </div>
+          <div class="mission-actions">
+            ${sleepControlEnabled ? `
+            <button class="group-action-icon" type="button" data-action="sleep-domain-tabs" data-domain-id="${stableId}" aria-label="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs in group'}" data-tooltip="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs in group'}">
+              ${ICONS.moon}
+            </button>` : ''}
+            ${saveGroupButton}
+            ${closeAllButton}
+          </div>
+        </div>
+        <div class="mission-pages">${pageChips}</div>
+        ${actionsHtml ? `<div class="actions">${actionsHtml}</div>` : ''}
+      </div>
+      <div class="mission-meta">
+        <div class="mission-page-count">${tabCount}</div>
+        <div class="mission-page-label">${runtimeT ? runtimeT('tabsLabel') : 'tabs'}</div>
+      </div>
+    </div>`;
+}
+
+function renderGroupNav(group) {
+  const stableId = getStableGroupId(group.domain);
+  const label = getGroupDisplayLabel(group);
+  const orderedGroup = {
+    ...group,
+    tabs: getOrderedUniqueTabsForGroup(group),
+  };
+  const iconData = runtimeGetGroupIcon(orderedGroup, label, 32);
+  const safeTooltip = runtimeEscapeHtmlAttribute(label);
+
+  return `
+    <button
+      class="group-nav-button"
+      data-action="jump-to-domain"
+      data-nav-kind="open-tabs"
+      data-group-id="${group.domain}"
+      data-domain-id="${stableId}"
+      data-tooltip="${safeTooltip}"
+      aria-label="${runtimeT ? runtimeT('jumpToLabel', { label: safeTooltip }) : `Jump to ${safeTooltip}` }"
+      draggable="false"
+    >
+      ${iconData.src
+        ? `<img class="group-nav-icon" src="${iconData.src}" alt="" draggable="false" data-fallback-src="${runtimeEscapeHtmlAttribute(iconData.fallbackSrc)}" data-fallback-srcset="${runtimeEscapeHtmlAttribute(JSON.stringify(iconData.fallbackSources?.slice(1) || []))}">`
+        : ''}
+      <span class="group-nav-fallback"${iconData.src ? ' style="display:none"' : ''}>${iconData.fallbackLabel}</span>
+    </button>`;
+}
+
+function renderWorkspacePageSwitch(currentPage = 'home') {
+  const homeActive = currentPage !== 'saved-tabs';
+  const savedActive = currentPage === 'saved-tabs';
+  const homeLabel = runtimeT ? runtimeT('workspacePageHome') : 'Home';
+  const savedLabel = runtimeT ? runtimeT('workspacePageSavedTabs') : 'Saved tabs';
+
+  return `
+    <nav class="workspace-page-switch" id="workspacePageSwitch" aria-label="Workspace pages">
+      <button class="workspace-page-switch-btn${homeActive ? ' is-active' : ''}" type="button" data-action="switch-workspace-page" data-page="home" aria-pressed="${homeActive ? 'true' : 'false'}" aria-controls="homePage">${homeLabel}</button>
+      <button class="workspace-page-switch-btn${savedActive ? ' is-active' : ''}" type="button" data-action="switch-workspace-page" data-page="saved-tabs" aria-pressed="${savedActive ? 'true' : 'false'}" aria-controls="savedTabsPage">${savedLabel}</button>
+    </nav>`;
+}
+
+function renderWorkspaceThemeTools() {
+  const languagePreference = runtimeGetLanguagePreference ? runtimeGetLanguagePreference() : 'auto';
+  return `
+    <div class="group-nav-tools">
+      <button class="header-theme-trigger" id="themeMenuTrigger" type="button" data-action="toggle-theme-menu" data-tooltip="${runtimeT ? runtimeT('deskSettings') : 'Desk settings'}" aria-label="${runtimeT ? runtimeT('deskSettings') : 'Desk settings'}" aria-expanded="false" aria-controls="themeMenuPanel">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 7.5h15m-12 4.5h9m-6 4.5h3" />
+          <circle cx="7.5" cy="7.5" r="1.5" fill="currentColor" stroke="none" />
+          <circle cx="16.5" cy="12" r="1.5" fill="currentColor" stroke="none" />
+          <circle cx="10.5" cy="16.5" r="1.5" fill="currentColor" stroke="none" />
+        </svg>
+      </button>
+      <div class="theme-menu" id="themeMenuPanel" hidden role="dialog" aria-label="${runtimeT ? runtimeT('deskSettingsPanel') : 'Desk settings panel'}">
+        <div class="theme-menu-tabs" role="tablist" aria-label="${runtimeT ? runtimeT('deskSettingsPanel') : 'Desk settings panel'}">
+          <button class="theme-menu-tab" id="themeMenuAppearanceTab" type="button" role="tab" data-action="select-theme-menu-tab" data-theme-menu-tab="appearance" aria-controls="themeMenuAppearancePanel" aria-selected="true">${runtimeT ? runtimeT('settingsTabAppearance') : 'Appearance'}</button>
+          <button class="theme-menu-tab" id="themeMenuFeaturesTab" type="button" role="tab" data-action="select-theme-menu-tab" data-theme-menu-tab="features" aria-controls="themeMenuFeaturesPanel" aria-selected="false">${runtimeT ? runtimeT('settingsTabFeatures') : 'Features'}</button>
+        </div>
+        <div class="theme-menu-panel" id="themeMenuAppearancePanel" role="tabpanel" aria-labelledby="themeMenuAppearanceTab" data-theme-menu-panel="appearance">
+          <div class="theme-menu-section">
+            <div class="theme-menu-row theme-menu-row-inline-choices">
+              <div class="theme-menu-label">${runtimeT ? runtimeT('appearanceMode') : 'Appearance mode'}</div>
+              <div class="theme-mode-options" id="themeModeOptions" role="group" aria-label="${runtimeT ? runtimeT('appearanceMode') : 'Appearance mode'}"></div>
+            </div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-label">${runtimeT ? runtimeT('deskPalette') : 'Desk palette'}</div>
+            <div class="theme-options" id="themeOptions"></div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-label">${runtimeT ? runtimeT('deskBackdrop') : 'Desk backdrop'}</div>
+            <div class="theme-menu-actions">
+              <button class="theme-menu-action" type="button" data-action="open-background-picker">${runtimeT ? runtimeT('uploadImage') : 'Upload image'}</button>
+              <button class="theme-menu-action is-secondary" type="button" data-action="clear-custom-background">${runtimeT ? runtimeT('clearText') : 'Clear'}</button>
+            </div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-row theme-menu-row-inline-choices">
+              <div class="theme-menu-label">${runtimeT ? runtimeT('languageLabel') : 'Language'}</div>
+              <div class="theme-language-options" role="group" aria-label="${runtimeT ? runtimeT('languageLabel') : 'Language'}">
+                <button class="theme-language-option ${languagePreference === 'auto' ? 'is-active' : ''}" type="button" data-action="select-language" data-language="auto" aria-pressed="${languagePreference === 'auto'}">${runtimeT ? runtimeT('languageAuto') : 'Auto'}</button>
+                <button class="theme-language-option ${languagePreference === 'en' ? 'is-active' : ''}" type="button" data-action="select-language" data-language="en" aria-pressed="${languagePreference === 'en'}">${runtimeT ? runtimeT('languageEnglish') : 'English'}</button>
+                <button class="theme-language-option ${languagePreference === 'zh-CN' ? 'is-active' : ''}" type="button" data-action="select-language" data-language="zh-CN" aria-pressed="${languagePreference === 'zh-CN'}">${runtimeT ? runtimeT('languageChinese') : 'Chinese'}</button>
+              </div>
+            </div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-row theme-menu-row-inline-range">
+              <div class="theme-menu-label">${runtimeT ? runtimeT('surfaceDepth') : 'Surface depth'}</div>
+              <input
+                class="theme-range"
+                id="themeTransparencyRange"
+                type="range"
+                aria-label="${runtimeT ? runtimeT('surfaceDepth') : 'Surface depth'}"
+                min="2"
+                max="60"
+                step="1"
+                value="14"
+              >
+              <div class="theme-range-value" id="themeTransparencyValue">14%</div>
+            </div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-row theme-menu-row-inline-range">
+              <div class="theme-menu-label">${runtimeT ? runtimeT('uiScaleLabel') : 'Text size'}</div>
+              <input
+                class="theme-range"
+                id="themeUiScaleRange"
+                type="range"
+                aria-label="${runtimeT ? runtimeT('uiScaleLabel') : 'Text size'}"
+                min="100"
+                max="120"
+                step="1"
+                value="100"
+              >
+              <div class="theme-range-value" id="themeUiScaleValue">100%</div>
+            </div>
+          </div>
+          <div class="theme-menu-section">
+            <div class="theme-menu-row theme-menu-row-inline-range">
+              <div class="theme-menu-label">${runtimeT ? runtimeT('shortcutScaleLabel') : 'Shortcut size'}</div>
+              <input
+                class="theme-range"
+                id="themeShortcutScaleRange"
+                type="range"
+                aria-label="${runtimeT ? runtimeT('shortcutScaleLabel') : 'Shortcut size'}"
+                min="100"
+                max="130"
+                step="1"
+                value="100"
+              >
+              <div class="theme-range-value" id="themeShortcutScaleValue">100%</div>
+            </div>
+          </div>
+        </div>
+        <div class="theme-menu-panel" id="themeMenuFeaturesPanel" role="tabpanel" aria-labelledby="themeMenuFeaturesTab" data-theme-menu-panel="features" hidden>
+          <div class="theme-menu-section">
+            <label class="theme-menu-toggle-label theme-menu-toggle-button-row">
+              <button class="theme-toggle-switch ${chromeTabGroupsEnabled ? 'is-active' : ''}" type="button" data-action="toggle-chrome-tab-groups" aria-pressed="${chromeTabGroupsEnabled ? 'true' : 'false'}" aria-label="${runtimeT ? runtimeT('chromeTabGroupsLabel') : 'Chrome tab groups'}"></button>
+              <span class="theme-menu-label theme-menu-toggle-text">${runtimeT ? runtimeT('chromeTabGroupsLabel') : 'Chrome tab groups'}</span>
+            </label>
+          </div>
+          <div class="theme-menu-section">
+            <label class="theme-menu-toggle-label theme-menu-toggle-button-row">
+              <button class="theme-toggle-switch ${(typeof themePreferences !== 'undefined' && themePreferences.hitokotoEnabled !== false) ? 'is-active' : ''}" type="button" data-action="toggle-hitokoto" aria-pressed="${(typeof themePreferences !== 'undefined' && themePreferences.hitokotoEnabled !== false) ? 'true' : 'false'}" aria-label="${runtimeT ? runtimeT('hitokotoLabel') : '一言'}"></button>
+              <span class="theme-menu-label theme-menu-toggle-text">${runtimeT ? runtimeT('hitokotoLabel') : '一言'}</span>
+            </label>
+          </div>
+          <div class="theme-menu-section">
+            <label class="theme-menu-toggle-label theme-menu-toggle-button-row">
+              <button class="theme-toggle-switch ${sleepControlEnabled ? 'is-active' : ''}" type="button" data-action="toggle-sleep-control" aria-pressed="${sleepControlEnabled ? 'true' : 'false'}" aria-label="${runtimeT ? runtimeT('sleepControlLabel') : 'Manual sleep control'}"></button>
+              <span class="theme-menu-label theme-menu-toggle-text">${runtimeT ? runtimeT('sleepControlLabel') : 'Manual sleep control'}</span>
+            </label>
+          </div>
+          <div class="theme-menu-section">
+            <label class="theme-menu-toggle-label theme-menu-toggle-button-row">
+              <button class="theme-toggle-switch ${(typeof themePreferences !== 'undefined' && themePreferences.closeDuplicateNewTabsEnabled) ? 'is-active' : ''}" type="button" data-action="toggle-close-duplicate-new-tabs" aria-pressed="${(typeof themePreferences !== 'undefined' && themePreferences.closeDuplicateNewTabsEnabled) ? 'true' : 'false'}" aria-label="${runtimeT ? runtimeT('closeDuplicateNewTabsLabel') : 'Auto-close duplicate new tabs'}"></button>
+              <span class="theme-menu-label theme-menu-toggle-text">${runtimeT ? runtimeT('closeDuplicateNewTabsLabel') : 'Auto-close duplicate new tabs'}</span>
+            </label>
+          </div>
+        </div>
+        <input type="file" id="themeBackgroundInput" accept="image/*" hidden>
+      </div>
+    </div>`;
+}
+
+function renderGroupNavArea(groups) {
+  return `
+    <div class="group-nav-list" data-nav-kind="open-tabs">
+      ${groups.map(group => renderGroupNav(group)).join('')}
+    </div>
+    ${renderWorkspacePageSwitch('home')}
+    ${renderWorkspaceThemeTools()}`;
+}
+
+function buildElementFromHtml(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content.firstElementChild || null;
+}
+
+function getWorkspaceTopNavHost() {
+  return document.getElementById('workspaceTopNav');
+}
+
+function syncWorkspaceTopNavMarkup(markup = '', visible = true) {
+  const navHost = getWorkspaceTopNavHost();
+  if (!navHost) return;
+  navHost.innerHTML = markup;
+  navHost.style.display = visible ? 'flex' : 'none';
+  if (typeof renderThemeMenu === 'function') renderThemeMenu();
+}
+
+function renderOpenTabsSummary(realTabs = getRealTabs()) {
+  const openTabsSection      = document.getElementById('openTabsSection');
+  const openTabsSectionCount = document.getElementById('openTabsSectionCount');
+  const openTabsSectionTitle = document.getElementById('openTabsSectionTitle');
+  const openTabsMissionsEl   = document.getElementById('openTabsMissions');
+
+  if (!openTabsSection) return;
+
+  if (domainGroups.length > 0) {
+    if (openTabsSectionTitle) openTabsSectionTitle.textContent = runtimeT ? runtimeT('openTabsSectionTitle') : 'Open tabs';
+    if (openTabsSectionCount) {
+      openTabsSectionCount.innerHTML = `
+        ${sleepControlEnabled ? `<button class="section-icon-action" type="button" data-action="sleep-all-open-tabs" aria-label="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs'}" data-tooltip="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs'}">${ICONS.moon}</button>` : ''}
+        <button class="section-icon-action" type="button" data-action="save-current-window-session" aria-label="${runtimeT ? runtimeT('saveSessionButton') : 'Save session'}" data-tooltip="${runtimeT ? runtimeT('saveSessionButton') : 'Save session'}">${ICONS.archive}</button>
+        <button class="section-icon-action section-icon-action-close" type="button" data-action="close-all-open-tabs" aria-label="${runtimeT ? runtimeT('closeAllTabsButton') : 'Close all tabs'}" data-tooltip="${runtimeT ? runtimeT('closeAllTabsButton') : 'Close all tabs'}">${ICONS.close}</button>`;
+    }
+    syncWorkspaceTopNavMarkup(renderGroupNavArea(domainGroups), true);
+    if (openTabsMissionsEl) {
+      openTabsMissionsEl.querySelector('#tabSessionPicker')?.remove();
+      if (tabSessionPickerState.open) {
+        openTabsMissionsEl.insertAdjacentHTML('afterbegin', renderTabSessionPicker());
+      }
+    }
+    openTabsSection.style.display = 'block';
+    return;
+  }
+
+  syncWorkspaceTopNavMarkup(renderGroupNavArea([]), true);
+  openTabsSection.style.display = 'block';
+  if (openTabsMissionsEl) openTabsMissionsEl.innerHTML = renderMissionsEmptyState();
+  if (openTabsSectionCount) openTabsSectionCount.textContent = runtimeT ? runtimeT('emptyTabsCount') : '0 domains';
+}
+
+function patchOpenTabsDomFromGroups(realTabs = getRealTabs(), changedGroupKeys = []) {
+  const missionsEl = document.getElementById('openTabsMissions');
+  const navHost = getWorkspaceTopNavHost();
+  const navListEl = navHost?.querySelector('.group-nav-list[data-nav-kind="open-tabs"]');
+  if (!missionsEl || !navHost || !navListEl) {
+    renderOpenTabsArea(realTabs);
+    return;
+  }
+
+  const changedKeys = new Set((changedGroupKeys || []).map(String).filter(Boolean));
+
+  const existingCards = new Map(
+    [...missionsEl.querySelectorAll('.mission-card')].map(card => [card.dataset.groupId || '', card])
+  );
+  const existingButtons = new Map(
+    [...navListEl.querySelectorAll('.group-nav-button')].map(button => [button.dataset.groupId || '', button])
+  );
+  const desiredKeys = domainGroups.map(group => String(group.domain));
+
+  existingCards.forEach((card, key) => {
+    if (!desiredKeys.includes(key)) card.remove();
+  });
+  existingButtons.forEach((button, key) => {
+    if (!desiredKeys.includes(key)) button.remove();
+  });
+
+  const previousNavRects = new Map();
+  navListEl.querySelectorAll('.group-nav-button').forEach(button => {
+    previousNavRects.set(button.dataset.groupId || '', button.getBoundingClientRect());
+  });
+
+  for (const group of domainGroups) {
+    const key = String(group.domain);
+    const currentCard = existingCards.get(key) || null;
+    let nextCardNode = currentCard;
+    if (!currentCard || changedKeys.has(key)) {
+      nextCardNode = buildElementFromHtml(renderDomainCard(group));
+      if (currentCard && nextCardNode) {
+        currentCard.replaceWith(nextCardNode);
+      }
+    }
+    if (nextCardNode) missionsEl.appendChild(nextCardNode);
+
+    const currentButton = existingButtons.get(key) || null;
+    let nextButtonNode = currentButton;
+    if (!currentButton || changedKeys.has(key)) {
+      nextButtonNode = buildElementFromHtml(renderGroupNav(group));
+      if (currentButton && nextButtonNode) {
+        currentButton.replaceWith(nextButtonNode);
+      }
+    }
+    if (nextButtonNode) navListEl.appendChild(nextButtonNode);
+  }
+
+  animateNavButtons(navListEl, previousNavRects);
+  renderOpenTabsSummary(realTabs);
+}
+
+async function buildDomainGroups(realTabs = getRealTabs()) {
+  // Landing pages (Gmail inbox, Twitter home, etc.) get their own special group
+  // so they can be closed together without affecting content tabs on the same domain.
+  const LANDING_PAGE_PATTERNS = [
+    { hostname: 'mail.google.com', test: (p, h) =>
+        !h.includes('#inbox/') && !h.includes('#sent/') && !h.includes('#search/') },
+    { hostname: 'x.com',               pathExact: ['/home'] },
+    { hostname: 'www.linkedin.com',    pathExact: ['/'] },
+    { hostname: 'github.com',          pathExact: ['/'] },
+    { hostname: 'www.youtube.com',     pathExact: ['/'] },
+    ...(typeof LOCAL_LANDING_PAGE_PATTERNS !== 'undefined' ? LOCAL_LANDING_PAGE_PATTERNS : []),
+  ];
+
+  function isLandingPage(url) {
+    try {
+      const parsed = new URL(url);
+      return LANDING_PAGE_PATTERNS.some(p => {
+        const hostnameMatch = p.hostname
+          ? parsed.hostname === p.hostname
+          : p.hostnameEndsWith
+            ? parsed.hostname.endsWith(p.hostnameEndsWith)
+            : false;
+        if (!hostnameMatch) return false;
+        if (p.test)       return p.test(parsed.pathname, url);
+        if (p.pathPrefix) return parsed.pathname.startsWith(p.pathPrefix);
+        if (p.pathExact)  return p.pathExact.includes(parsed.pathname);
+        return parsed.pathname === '/';
+      });
+    } catch { return false; }
+  }
+
+  domainGroups = [];
+  const manualGroupMap = Object.fromEntries(
+    sessionGroupsState.groups.map(group => [
+      group.id,
+      {
+        domain: `${MANUAL_GROUP_PREFIX}${group.id}`,
+        label: group.name,
+        tabs: [],
+        isManual: true,
+        manualGroupId: group.id,
+        createdAt: group.createdAt,
+      },
+    ])
+  );
+  const groupMap    = {};
+  const landingTabs = [];
+  const customGroups = typeof LOCAL_CUSTOM_GROUPS !== 'undefined' ? LOCAL_CUSTOM_GROUPS : [];
+
+  function matchCustomGroup(url) {
+    try {
+      const parsed = new URL(url);
+      return customGroups.find(r => {
+        const hostMatch = r.hostname
+          ? parsed.hostname === r.hostname
+          : r.hostnameEndsWith
+            ? parsed.hostname.endsWith(r.hostnameEndsWith)
+            : false;
+        if (!hostMatch) return false;
+        if (r.pathPrefix) return parsed.pathname.startsWith(r.pathPrefix);
+        return true;
+      }) || null;
+    } catch { return null; }
+  }
+
+  for (const tab of realTabs) {
+    try {
+      const assignedGroupId = sessionGroupsState.assignments[String(tab.id)];
+      if (assignedGroupId && manualGroupMap[assignedGroupId]) {
+        manualGroupMap[assignedGroupId].tabs.push({
+          ...tab,
+          manualGroupId: assignedGroupId,
+        });
+        continue;
+      }
+
+      if (isLandingPage(tab.url)) {
+        landingTabs.push(tab);
+        continue;
+      }
+
+      const customRule = matchCustomGroup(tab.url);
+      if (customRule) {
+        const key = customRule.groupKey;
+        if (!groupMap[key]) groupMap[key] = { domain: key, label: customRule.groupLabel, tabs: [] };
+        groupMap[key].tabs.push(tab);
+        continue;
+      }
+
+      let hostname;
+      if (tab.url && tab.url.startsWith('file://')) {
+        hostname = 'local-files';
+      } else {
+        const rawHostname = new URL(tab.url).hostname;
+        hostname = runtimeGetPrimaryDomain ? runtimeGetPrimaryDomain(rawHostname) : rawHostname;
+      }
+      if (!hostname) continue;
+
+      if (!groupMap[hostname]) groupMap[hostname] = { domain: hostname, tabs: [] };
+      groupMap[hostname].tabs.push(tab);
+    } catch {
+      // Skip malformed URLs
+    }
+  }
+
+  if (landingTabs.length > 0) {
+    groupMap.__landing_pages__ = undefined;
+    groupMap['__landing-pages__'] = { domain: '__landing-pages__', tabs: landingTabs };
+  }
+
+  const landingHostnames = new Set(LANDING_PAGE_PATTERNS.map(p => p.hostname).filter(Boolean));
+  const landingSuffixes = LANDING_PAGE_PATTERNS.map(p => p.hostnameEndsWith).filter(Boolean);
+  function isLandingDomain(domain) {
+    if (landingHostnames.has(domain)) return true;
+    return landingSuffixes.some(s => domain.endsWith(s));
+  }
+
+  const manualGroups = Object.values(manualGroupMap)
+    .filter(group => group.tabs.length > 0)
+    .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+
+  const automaticGroups = Object.values(groupMap).sort((a, b) => {
+    const aIsLanding = a.domain === '__landing-pages__';
+    const bIsLanding = b.domain === '__landing-pages__';
+    if (aIsLanding !== bIsLanding) return aIsLanding ? -1 : 1;
+
+    const aIsPriority = isLandingDomain(a.domain);
+    const bIsPriority = isLandingDomain(b.domain);
+    if (aIsPriority !== bIsPriority) return aIsPriority ? -1 : 1;
+
+    return b.tabs.length - a.tabs.length;
+  });
+
+  for (const group of automaticGroups) {
+    if (groupLabelOverrides[group.domain]) {
+      group.label = groupLabelOverrides[group.domain];
+    }
+  }
+
+  domainGroups = applyGroupOrder([...manualGroups, ...automaticGroups], groupOrderState);
+  await loadGroupTabOrder(domainGroups);
+  return domainGroups;
+}
+
+function renderOpenTabsArea(realTabs = getRealTabs()) {
+  const openTabsSection      = document.getElementById('openTabsSection');
+  const openTabsMissionsEl   = document.getElementById('openTabsMissions');
+  const openTabsSectionCount = document.getElementById('openTabsSectionCount');
+  const openTabsSectionTitle = document.getElementById('openTabsSectionTitle');
+
+  if (domainGroups.length > 0 && openTabsSection) {
+    if (openTabsSectionTitle) openTabsSectionTitle.textContent = runtimeT ? runtimeT('openTabsSectionTitle') : 'Open tabs';
+    if (openTabsSectionCount) {
+      openTabsSectionCount.innerHTML = `
+        ${sleepControlEnabled ? `<button class="section-icon-action" type="button" data-action="sleep-all-open-tabs" aria-label="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs'}" data-tooltip="${runtimeT ? runtimeT('sleepAllTabsButton') : 'Sleep all tabs'}">${ICONS.moon}</button>` : ''}
+        <button class="section-icon-action" type="button" data-action="save-current-window-session" aria-label="${runtimeT ? runtimeT('saveSessionButton') : 'Save session'}" data-tooltip="${runtimeT ? runtimeT('saveSessionButton') : 'Save session'}">${ICONS.archive}</button>
+        <button class="section-icon-action section-icon-action-close" type="button" data-action="close-all-open-tabs" aria-label="${runtimeT ? runtimeT('closeAllTabsButton') : 'Close all tabs'}" data-tooltip="${runtimeT ? runtimeT('closeAllTabsButton') : 'Close all tabs'}">${ICONS.close}</button>`;
+    }
+    if (openTabsMissionsEl) openTabsMissionsEl.innerHTML = `${renderTabSessionPicker()}${domainGroups.map(g => renderDomainCard(g)).join('')}`;
+    syncWorkspaceTopNavMarkup(renderGroupNavArea(domainGroups), true);
+    openTabsSection.style.display = 'block';
+  } else if (openTabsSection) {
+    syncWorkspaceTopNavMarkup(renderGroupNavArea([]), true);
+    openTabsSection.style.display = 'block';
+    if (openTabsMissionsEl) openTabsMissionsEl.innerHTML = renderMissionsEmptyState();
+    if (openTabsSectionCount) openTabsSectionCount.textContent = runtimeT ? runtimeT('emptyTabsCount') : '0 domains';
+  }
+
+  const statTabs = document.getElementById('statTabs');
+  if (statTabs) statTabs.textContent = openTabs.length;
+
+  if (groupRenameEditorState?.shouldFocus) {
+    const focusKey = String(groupRenameEditorState.groupKey || '');
+    requestAnimationFrame(() => {
+      const renameInput = document.querySelector(`[data-group-rename-input="${CSS.escape(focusKey)}"]`);
+      if (!renameInput) return;
+      renameInput.focus();
+      renameInput.select?.();
+      if (groupRenameEditorState && groupRenameEditorState.groupKey === focusKey) {
+        groupRenameEditorState.shouldFocus = false;
+      }
+    });
+  }
+}
+
+async function renderOpenTabsLayout({ rebuildGroups = true, syncChrome = false, patchDom = false, changedGroupKeys = [] } = {}) {
+  const realTabs = getRealTabs();
+  if (rebuildGroups) {
+    await buildDomainGroups(realTabs);
+  }
+  if (patchDom) {
+    patchOpenTabsDomFromGroups(realTabs, changedGroupKeys);
+  } else {
+    renderOpenTabsArea(realTabs);
+  }
+  setupImageErrorHandlers();
+  if (syncChrome) {
+    await syncChromeTabGroupsWithoutImportEcho();
+  }
+}
+
+/* ----------------------------------------------------------------
+   MAIN DASHBOARD RENDERER
+   ---------------------------------------------------------------- */
+
+/**
+ * renderStaticDashboard()
+ *
+ * The main render function:
+ * 1. Paints greeting + date
+ * 2. Fetches open tabs via chrome.tabs.query()
+ * 3. Groups tabs by domain (with landing pages pulled out to their own group)
+ * 4. Renders domain cards
+ * 5. Updates footer stats
+ * 6. Renders the "Saved for Later" checklist
+ */
+async function renderStaticDashboard() {
+  // --- Header ---
+  const greetingEl = document.getElementById('greeting');
+  const dateEl     = document.getElementById('dateDisplay');
+  if (greetingEl) greetingEl.textContent = getGreeting();
+  if (dateEl)     dateEl.textContent     = getDateDisplay();
+
+  // --- Hitokoto (一言) ---
+  const hitokotoEnabled = typeof themePreferences !== 'undefined' ? themePreferences.hitokotoEnabled : true;
+  const hitokotoEl     = document.getElementById('hitokoto');
+  const hitokotoTextEl = document.getElementById('hitokotoText');
+  const hitokotoFromEl = document.getElementById('hitokotoFrom');
+  if (hitokotoEnabled && hitokotoEl && hitokotoTextEl && hitokotoFromEl) {
+    const hasCachedHitokoto = renderCachedHitokoto(hitokotoTextEl, hitokotoFromEl);
+    hitokotoEl.style.display = hasCachedHitokoto ? '' : 'none';
+    void warmHitokotoCacheInBackground();
+  } else if (hitokotoEl) {
+    hitokotoEl.style.display = 'none';
+  }
+
+  renderThemeMenu();
+  await renderQuickShortcuts();
+
+  // --- Fetch tabs ---
+  await fetchOpenTabs();
+  const realTabs = getRealTabs();
+  await loadSessionGroups(getOpenTabIdsForSessionPruning());
+  await loadGroupOrder();
+  await loadGroupLabelOverrides();
+  await buildDomainGroups(realTabs);
+  renderOpenTabsArea(realTabs);
+
+  // --- Check for duplicate Tab Harbor tabs ---
+  checkTabOutDupes();
+
+  // --- Render "Saved for Later" column ---
+  await renderDeferredColumn();
+  
+  // Setup image error handlers for CSP compliance
+  setupImageErrorHandlers();
+
+  if (document.body.classList.contains('showing-saved-tabs-page')) {
+    await globalThis.TabHarborSessionManager?.renderSavedTabsPage?.();
+  }
+}
+
+async function renderDashboard() {
+  await renderStaticDashboard();
+  if (chromeTabGroupsEnabled) {
+    await syncChromeTabGroupsWithoutImportEcho();
+  }
+}
+
+async function resolveCurrentDashboardTab() {
+  let currentTab = null;
+  try {
+    currentTab = await chrome.tabs.getCurrent();
+  } catch {
+    currentTab = null;
+  }
+
+  if (!currentTab?.id || !currentTab?.windowId) {
+    try {
+      const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      currentTab = activeTab || currentTab || null;
+    } catch {
+      currentTab = currentTab || null;
+    }
+  }
+
+  return currentTab;
+}
+
+function shouldSkipStartupTabChange(message = {}) {
+  if (Date.now() > dashboardStartupTabChangeIgnoreUntil) return false;
+  if (message.source !== 'tabs.onCreated' && message.source !== 'tabs.onUpdated') return false;
+  if (currentDashboardTabId == null || message.triggerTabId == null) return false;
+  return Number(message.triggerTabId) === Number(currentDashboardTabId);
+}
+
+async function collapseChromeGroupsForCurrentTabHarborTab() {
+  if (typeof collapseChromeTabGroupsInWindow !== 'function') return;
+
+  const currentTab = await resolveCurrentDashboardTab();
+
+  const newtabUrl = window.location.href;
+  const isTabHarborTab = currentTab?.url === newtabUrl || currentTab?.url === 'chrome://newtab/';
+  if (!currentTab?.windowId || !isTabHarborTab) return;
+  await collapseChromeTabGroupsInWindow(currentTab.windowId);
+}
+
+function updateBackToTopVisibility() {
+  const button = document.getElementById('backToTopBtn');
+  if (!button) return;
+  const shouldShow = window.scrollY > 320;
+  button.classList.toggle('visible', shouldShow);
+}
+
+
+/* ----------------------------------------------------------------
+   EVENT HANDLERS — using event delegation
+
+   One listener on document handles ALL button clicks.
+   Think of it as one security guard watching the whole building
+   instead of one per door.
+   ---------------------------------------------------------------- */
+
+document.addEventListener('click', async (e) => {
+  if (e.target.closest('.chip-reorder-handle')) return;
+  // Walk up the DOM to find the nearest element with data-action
+  const actionEl = e.target.closest('[data-action]');
+  if (!actionEl) return;
+
+  const action = actionEl.dataset.action;
+
+  if (action === 'toggle-theme-menu') {
+    setThemeMenuOpen(!themeMenuOpen);
+    return;
+  }
+
+  if (action === 'select-theme-menu-tab') {
+    themeMenuActiveTab = actionEl.dataset.themeMenuTab === 'features' ? 'features' : 'appearance';
+    renderThemeMenu();
+    return;
+  }
+
+  if (action === 'select-theme') {
+    const paletteId = actionEl.dataset.paletteId || 'paper';
+    await saveThemePreferences({ paletteId });
+    setThemeMenuOpen(false, { restoreFocus: true });
+    showToast(runtimeT ? runtimeT('toastThemeUpdated') : 'Theme updated');
+    return;
+  }
+
+  if (action === 'select-theme-mode') {
+    const mode = actionEl.dataset.themeMode || 'system';
+    await saveThemePreferences({ mode });
+    setThemeMenuOpen(false, { restoreFocus: true });
+    const modeLabelKey = {
+      system: 'themeModeSystem',
+      light: 'themeModeLight',
+      dark: 'themeModeDark',
+    }[mode] || 'themeModeSystem';
+    const modeLabel = runtimeT
+      ? runtimeT(modeLabelKey)
+      : mode;
+    showToast(runtimeT ? runtimeT('toastThemeModeUpdated', { mode: modeLabel }) : `Appearance mode: ${modeLabel}`);
+    return;
+  }
+
+  if (action === 'open-background-picker') {
+    document.getElementById('themeBackgroundInput')?.click();
+    return;
+  }
+
+  if (action === 'clear-custom-background') {
+    await saveThemePreferences({ customBackground: '' });
+    setThemeMenuOpen(false, { restoreFocus: true });
+    showToast(runtimeT ? runtimeT('toastBackgroundCleared') : 'Background cleared');
+    return;
+  }
+
+  if (action === 'select-language') {
+    const language = actionEl.dataset.language || 'auto';
+    if (runtimeSetLanguagePreference) {
+      await runtimeSetLanguagePreference(language, { reload: true });
+      return;
+    }
+  }
+
+  // ---- Close duplicate Tab Harbor tabs ----
+  if (action === 'close-tabout-dupes') {
+    // Suppress auto-refresh to prevent animation spam
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    await closeTabOutDupes();
+    await renderDashboard();
+    if (window.__tabRefreshTimeout) {
+      clearTimeout(window.__tabRefreshTimeout);
+      window.__tabRefreshTimeout = null;
+    }
+    window.__suppressAutoRefreshUntil = 0;
+    updateBackToTopVisibility();
+    playCloseSound();
+    const banner = document.getElementById('tabOutDupeBanner');
+    if (banner) {
+      banner.style.transition = 'opacity 0.4s';
+      banner.style.opacity = '0';
+      setTimeout(() => { banner.style.display = 'none'; banner.style.opacity = '1'; }, 400);
+    }
+    showToast(runtimeT ? runtimeT('toastClosedExtraTabHarborTabs') : 'Closed extra Tab Harbor tabs');
+    return;
+  }
+
+  if (action === 'toggle-chrome-tab-groups') {
+    const nextEnabled = !chromeTabGroupsEnabled;
+    if (typeof setThemeMenuOpen === 'function') setThemeMenuOpen(false);
+    await applyChromeTabGroupsToggle(nextEnabled);
+    return;
+  }
+
+  if (action === 'toggle-hitokoto') {
+    const nextEnabled = !(typeof themePreferences !== 'undefined' && themePreferences.hitokotoEnabled);
+    await saveThemePreferences({ hitokotoEnabled: nextEnabled });
+    const hitokotoEl = document.getElementById('hitokoto');
+    const hitokotoTextEl = document.getElementById('hitokotoText');
+    const hitokotoFromEl = document.getElementById('hitokotoFrom');
+    if (hitokotoEl) hitokotoEl.style.display = nextEnabled ? '' : 'none';
+    if (nextEnabled && hitokotoTextEl && hitokotoFromEl) {
+      const hasCachedHitokoto = renderCachedHitokoto(hitokotoTextEl, hitokotoFromEl);
+      if (hitokotoEl) hitokotoEl.style.display = hasCachedHitokoto ? '' : 'none';
+      void refreshHitokotoInBackground(hitokotoTextEl, hitokotoFromEl);
+    } else if (!nextEnabled && hitokotoTextEl && hitokotoFromEl) {
+      hitokotoTextEl.textContent = '';
+      hitokotoFromEl.textContent = '';
+    }
+    // Sync toggle switch visual state (renderThemeMenu does not know about this switch)
+    const toggleSwitch = document.querySelector('[data-action="toggle-hitokoto"]');
+    if (toggleSwitch) {
+      toggleSwitch.classList.toggle('is-active', nextEnabled);
+      toggleSwitch.setAttribute('aria-pressed', String(nextEnabled));
+    }
+    return;
+  }
+
+  if (action === 'toggle-sleep-control') {
+    const nextEnabled = sleepControlEnabled !== true;
+    await saveThemePreferences({ sleepControlEnabled: nextEnabled });
+    sleepControlEnabled = nextEnabled;
+    await renderDashboard();
+    return;
+  }
+
+  if (action === 'toggle-close-duplicate-new-tabs') {
+    const nextEnabled = !(typeof themePreferences !== 'undefined' && themePreferences.closeDuplicateNewTabsEnabled);
+    await saveThemePreferences({ closeDuplicateNewTabsEnabled: nextEnabled });
+    const toggleSwitch = document.querySelector('[data-action="toggle-close-duplicate-new-tabs"]');
+    if (toggleSwitch) {
+      toggleSwitch.classList.toggle('is-active', nextEnabled);
+      toggleSwitch.setAttribute('aria-pressed', String(nextEnabled));
+    }
+    return;
+  }
+
+  const card = actionEl.closest('.mission-card');
+
+  if (action === 'save-current-window-session') {
+    if (!actionEl.closest('#homePage')) return;
+    e.preventDefault();
+    await openTabSessionPicker({ source: 'current-window' });
+    return;
+  }
+
+  if (action === 'close-session-picker') {
+    e.preventDefault();
+    closeTabSessionPicker();
+    return;
+  }
+
+  if (action === 'select-session-picker-mode') {
+    e.preventDefault();
+    const nextMode = actionEl.dataset.sessionPickerMode === 'existing' ? 'existing' : 'new';
+    if (nextMode === 'existing' && !tabSessionPickerState.savedSessions?.length) return;
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      mode: nextMode,
+      targetSessionId: tabSessionPickerState.targetSessionId || String(tabSessionPickerState.savedSessions?.[0]?.id || ''),
+    };
+    renderOpenTabsArea();
+    return;
+  }
+
+  if (action === 'toggle-session-picker-group') {
+    const groupKey = actionEl.dataset.groupKey || '';
+    const groupIds = getTabSessionPickerGroupIds(groupKey, tabSessionPickerState.groups);
+    const selected = new Set(getTabSessionPickerSelectedIds());
+    const checked = groupIds.length > 0 && groupIds.every(id => selected.has(id));
+    groupIds.forEach(id => {
+      if (checked) selected.delete(id);
+      else selected.add(id);
+    });
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      selectedTabIds: [...selected],
+    };
+    renderOpenTabsArea();
+    return;
+  }
+
+  if (action === 'toggle-session-picker-tab') {
+    const tabId = String(actionEl.dataset.tabId || '');
+    if (!tabId) return;
+    const selected = new Set(getTabSessionPickerSelectedIds());
+    if (selected.has(tabId)) selected.delete(tabId);
+    else selected.add(tabId);
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      selectedTabIds: [...selected],
+    };
+    renderOpenTabsArea();
+    return;
+  }
+
+  if (action === 'save-selected-session-tabs') {
+    e.preventDefault();
+    await submitTabSessionPicker();
+    return;
+  }
+
+  if (action === 'rename-session-group') {
+    e.stopPropagation();
+    const groupKey = actionEl.dataset.groupKey || '';
+    const manualGroupId = actionEl.dataset.manualGroupId || '';
+    openGroupRenameEditor(groupKey, manualGroupId);
+    return;
+  }
+
+  if (action === 'cancel-group-rename') {
+    e.stopPropagation();
+    closeGroupRenameEditor();
+    await renderDashboard();
+    return;
+  }
+
+  // ---- Expand overflow chips ("+N more") ----
+  if (action === 'expand-chips') {
+    const overflowContainer = actionEl.parentElement.querySelector('.page-chips-overflow');
+    if (overflowContainer) {
+      overflowContainer.style.display = 'contents';
+      actionEl.remove();
+    }
+    return;
+  }
+
+  // ---- Focus a specific tab ----
+  if (action === 'focus-tab') {
+    if (Date.now() < suppressPageChipClickUntil) return;
+    const tabUrl = actionEl.dataset.tabUrl;
+    const tabId = actionEl.dataset.tabId || '';
+    if (tabUrl || tabId) await focusTab(tabUrl, tabId);
+    return;
+  }
+
+  if (action === 'toggle-chrome-tab-groups') {
+    return;
+  }
+
+  if (action === 'jump-to-domain') {
+    if (Date.now() < suppressJumpUntil) return;
+    const domainId = actionEl.dataset.domainId;
+    if (!domainId) return;
+    const target = document.querySelector(`.mission-card[data-domain-id="${domainId}"]`);
+    if (!target) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    target.classList.add('group-nav-target');
+    setTimeout(() => target.classList.remove('group-nav-target'), 1200);
+    return;
+  }
+
+  // ---- Close a single tab ----
+  if (action === 'close-single-tab') {
+    e.stopPropagation(); // don't trigger parent chip's focus-tab
+    const tabUrl = actionEl.dataset.tabUrl;
+    const tabId = actionEl.dataset.tabId || '';
+    if (!tabUrl && !tabId) return;
+
+    // Suppress auto-refresh to prevent animation spam
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    // Close the tab in Chrome directly. Prefer id so suspended/canonical URLs
+    // and duplicate pages cannot close the wrong tab.
+    await removeOpenTabByIdOrUrl(tabId, tabUrl);
+    await fetchOpenTabs();
+    await loadSessionGroups(getOpenTabIdsForSessionPruning());
+
+    playCloseSound();
+
+    // Animate the chip row out
+    const chip = actionEl.closest('.page-chip');
+    const parentCard = chip?.closest('.mission-card');
+    
+    if (chip) {
+      const rect = chip.getBoundingClientRect();
+      shootConfetti(rect.left + rect.width / 2, rect.top + rect.height / 2);
+      
+      // First phase: fade and scale down
+      chip.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
+      chip.style.opacity    = '0';
+      chip.style.transform  = 'scale(0.95)';
+      
+      setTimeout(() => {
+        // Second phase: collapse height to 0 for smooth upward slide
+        chip.style.transition = 'height 0.2s ease-out, margin 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s';
+        chip.style.height     = '0';
+        chip.style.marginTop  = '0';
+        chip.style.marginBottom = '0';
+        chip.style.paddingTop = '0';
+        chip.style.paddingBottom = '0';
+        chip.style.overflow   = 'hidden';
+        
+        setTimeout(() => {
+          chip.remove();
+          
+          // Check if card is now empty and animate it out
+          if (parentCard) {
+            const remainingChips = parentCard.querySelectorAll('.page-chip[data-action="focus-tab"]');
+            
+            if (remainingChips.length === 0) {
+              // Card is empty - wait a brief moment for layout to settle, then animate card out
+              setTimeout(() => {
+                animateCardOut(parentCard);
+              }, 50);
+            }
+          }
+        }, 200);
+      }, 150);
+    }
+
+    // Update footer
+    const statTabs = document.getElementById('statTabs');
+    if (statTabs) statTabs.textContent = openTabs.length;
+
+    showToast(runtimeT ? runtimeT('toastTabClosed') : 'Tab closed');
+    return;
+  }
+
+  // ---- Discard (sleep) a single tab ----
+  if (action === 'discard-tab') {
+    e.stopPropagation();
+    const tabId = actionEl.dataset.tabId;
+    if (!tabId) return;
+
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    const discarded = await discardTab(Number(tabId));
+    if (!discarded) {
+      showToast(runtimeT ? runtimeT('toastTabDiscardFailed') || 'Failed to sleep tab' : 'Failed to sleep tab');
+      return;
+    }
+
+    await fetchOpenTabs();
+    await loadSessionGroups(getOpenTabIdsForSessionPruning());
+    await renderDashboard();
+
+    showToast(runtimeT ? runtimeT('toastTabDiscarded') : 'Tab sleeping');
+    return;
+  }
+
+  // ---- Save a single tab as its own session snapshot (then close it) ----
+  if (action === 'save-single-tab-session') {
+    e.stopPropagation();
+    const tabId = actionEl.dataset.tabId || '';
+    if (!tabId) return;
+
+    await openTabSessionPicker({
+      source: 'single-tab',
+      initialTabIds: [tabId],
+      scopeTabIds: [tabId],
+    });
+    return;
+  }
+
+  // ---- Close all tabs in a domain group ----
+  if (action === 'close-domain-tabs') {
+    const domainId = actionEl.dataset.domainId;
+    const group    = domainGroups.find(g => {
+      return 'domain-' + g.domain.replace(/[^a-z0-9]/g, '-') === domainId;
+    });
+    if (!group) return;
+
+    // Suppress auto-refresh to prevent animation spam
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    const urls      = group.tabs.map(t => t.url);
+    // Landing pages and custom groups (whose domain key isn't a real hostname)
+    // must use exact URL matching to avoid closing unrelated tabs
+    const useExact  = group.domain === '__landing-pages__' || !!group.label;
+
+    if (useExact) {
+      await closeTabsExact(urls);
+    } else {
+      await closeTabsByUrls(urls);
+    }
+
+    if (card) {
+      playCloseSound();
+      animateCardOut(card);
+    }
+
+    // Remove from in-memory groups
+    const idx = domainGroups.indexOf(group);
+    if (idx !== -1) domainGroups.splice(idx, 1);
+
+    const groupLabel = group.domain === '__landing-pages__'
+      ? (runtimeT ? runtimeT('homepagesLabel') : 'Homepages')
+      : (group.label || friendlyDomain(group.domain));
+    const tabsWord = runtimeT
+      ? (urls.length === 1 ? runtimeT('tabsWordSingular') : runtimeT('tabsWordPlural'))
+      : `tab${urls.length !== 1 ? 's' : ''}`;
+    showToast(runtimeT
+      ? runtimeT('closedTabsFromGroup', { count: urls.length, tabsWord, groupLabel })
+      : `Closed ${urls.length} ${tabsWord} from ${groupLabel}`);
+
+    const statTabs = document.getElementById('statTabs');
+    if (statTabs) statTabs.textContent = openTabs.length;
+    return;
+  }
+
+  // ---- Save a whole domain group as one session snapshot (then close it) ----
+  if (action === 'save-domain-session') {
+    e.preventDefault();
+    const domainId = actionEl.dataset.domainId || '';
+    const group = domainGroups.find(g => getStableGroupId(g.domain) === domainId);
+    if (!group) return;
+
+    const tabIds = getOrderedUniqueTabsForGroup(group)
+      .map(tab => String(tab?.id || ''))
+      .filter(Boolean);
+    if (!tabIds.length) return;
+
+    await openTabSessionPicker({
+      source: 'group',
+      initialTabIds: tabIds,
+      scopeTabIds: tabIds,
+    });
+    return;
+  }
+
+  // ---- Sleep all tabs in a domain group ----
+  if (action === 'sleep-domain-tabs') {
+    const domainId = actionEl.dataset.domainId || '';
+    const group = domainGroups.find(g => getStableGroupId(g.domain) === domainId);
+    if (!group) return;
+
+    const tabs = getOrderedUniqueTabsForGroup(group).filter(t => !t.active);
+    if (!tabs.length) return;
+
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    const results = await Promise.all(tabs.map(t => discardTab(t.id)));
+    const succeeded = results.filter(Boolean).length;
+    if (!succeeded) {
+      showToast(runtimeT ? runtimeT('toastTabDiscardFailed') || 'Failed to sleep tabs' : 'Failed to sleep tabs');
+      return;
+    }
+
+    await fetchOpenTabs();
+    await loadSessionGroups(getOpenTabIdsForSessionPruning());
+    await renderDashboard();
+
+    showToast(runtimeT
+      ? runtimeT('toastTabsDiscarded', { count: succeeded })
+      : `${succeeded} tabs sleeping`);
+    return;
+  }
+
+  // ---- Sleep all open tabs ----
+  if (action === 'sleep-all-open-tabs') {
+    const allTabs = getRealTabs().filter(t => !t.active);
+    if (!allTabs.length) return;
+
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    const results = await Promise.all(allTabs.map(t => discardTab(t.id)));
+    const succeeded = results.filter(Boolean).length;
+    if (!succeeded) {
+      showToast(runtimeT ? runtimeT('toastTabDiscardFailed') || 'Failed to sleep tabs' : 'Failed to sleep tabs');
+      return;
+    }
+
+    await fetchOpenTabs();
+    await loadSessionGroups(getOpenTabIdsForSessionPruning());
+    await renderDashboard();
+
+    showToast(runtimeT
+      ? runtimeT('toastTabsDiscarded', { count: succeeded })
+      : `${succeeded} tabs sleeping`);
+    return;
+  }
+
+  // ---- Close duplicates, keep one copy ----
+  if (action === 'dedup-keep-one') {
+    const urlsEncoded = actionEl.dataset.dupeUrls || '';
+    const urls = urlsEncoded.split(',').map(u => decodeURIComponent(u)).filter(Boolean);
+    if (urls.length === 0) return;
+
+    // Suppress auto-refresh to prevent animation spam
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+
+    await closeDuplicateTabs(urls, true);
+    playCloseSound();
+
+    // Hide the dedup button
+    actionEl.style.transition = 'opacity 0.2s';
+    actionEl.style.opacity    = '0';
+    setTimeout(() => actionEl.remove(), 200);
+
+    // Remove dupe badges from the card
+    if (card) {
+      card.querySelectorAll('.chip-dupe-badge').forEach(b => {
+        b.style.transition = 'opacity 0.2s';
+        b.style.opacity    = '0';
+        setTimeout(() => b.remove(), 200);
+      });
+      card.querySelectorAll('.duplicate-count-badge').forEach(badge => {
+        badge.style.transition = 'opacity 0.2s';
+        badge.style.opacity    = '0';
+        setTimeout(() => badge.remove(), 200);
+      });
+      card.classList.remove('has-amber-bar');
+      card.classList.add('has-neutral-bar');
+    }
+
+    showToast(runtimeT ? runtimeT('toastClosedDuplicatesKeptOne') : 'Closed duplicates, kept one copy each');
+    return;
+  }
+
+  // ---- Close ALL open tabs ----
+  if (action === 'close-all-open-tabs') {
+    // Suppress auto-refresh to prevent animation spam
+    window.__suppressAutoRefreshUntil = Date.now() + 2000;
+    
+    const allUrls = openTabs
+      .filter(t => t.url && !t.url.startsWith('chrome') && !t.url.startsWith('about:'))
+      .map(t => t.url);
+    await closeTabsByUrls(allUrls);
+    playCloseSound();
+
+    document.querySelectorAll('#openTabsMissions .mission-card').forEach(c => {
+      shootConfetti(
+        c.getBoundingClientRect().left + c.offsetWidth / 2,
+        c.getBoundingClientRect().top  + c.offsetHeight / 2
+      );
+      animateCardOut(c);
+    });
+
+    showToast(runtimeT ? runtimeT('toastAllTabsClosed') : 'All tabs closed. Fresh start.');
+    return;
+  }
+});
+
+document.addEventListener('click', (e) => {
+  const themeTrigger = document.getElementById('themeMenuTrigger');
+  const themePanel = document.getElementById('themeMenuPanel');
+  if (
+    themeMenuOpen &&
+    themePanel &&
+    !themePanel.contains(e.target) &&
+    !themeTrigger?.contains(e.target)
+  ) {
+    setThemeMenuOpen(false);
+  }
+
+});
+
+document.addEventListener('click', (e) => {
+  const todoTrigger = e.target.closest('#todoTrigger');
+  if (todoTrigger) {
+    if (Date.now() < deferredTriggerSuppressClickUntil) return;
+    const nextOpen = !deferredPanelOpen;
+    drawerView = 'todos';
+    setDeferredPanelOpen(nextOpen);
+    return;
+  }
+
+  if (e.target.closest('#deferredOverlay')) {
+    setDeferredPanelOpen(false);
+  }
+});
+
+document.addEventListener('pointerdown', (e) => {
+  if (!groupRenameEditorState) return;
+  if (e.target.closest('.mission-rename-form') || e.target.closest('[data-action="rename-session-group"]')) return;
+  void submitGroupRenameEditor();
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && themeMenuOpen) {
+    setThemeMenuOpen(false, { restoreFocus: true });
+    return;
+  }
+
+  if (e.key === 'Escape' && groupRenameEditorState) {
+    closeGroupRenameEditor();
+    void renderDashboard();
+    return;
+  }
+
+  if (e.key === 'Escape' && deferredPanelOpen && todoEditorState?.open) {
+    closeTodoEditor();
+    void renderDeferredColumn();
+    return;
+  }
+
+  if (e.key === 'Escape' && deferredPanelOpen) {
+    setDeferredPanelOpen(false);
+  }
+});
+
+document.addEventListener('pointerdown', (e) => {
+  const trigger = e.target.closest('.deferred-trigger');
+  const triggerStack = document.getElementById('drawerTriggerStack');
+  if (!trigger || !triggerStack || isMobileDeferredLayout() || e.button !== 0) return;
+
+  const rect = triggerStack.getBoundingClientRect();
+  deferredTriggerDragState = {
+    startY: e.clientY,
+    offsetY: e.clientY - rect.top,
+    moved: false,
+  };
+});
+
+document.addEventListener('pointermove', (e) => {
+  if (!deferredTriggerDragState || isMobileDeferredLayout()) return;
+
+  const triggerStack = document.getElementById('drawerTriggerStack');
+  if (!triggerStack) return;
+
+  const distance = Math.abs(e.clientY - deferredTriggerDragState.startY);
+  if (!deferredTriggerDragState.moved && distance < 6) return;
+
+  deferredTriggerDragState.moved = true;
+  const nextTop = runtimeClampTriggerTop(
+    e.clientY - deferredTriggerDragState.offsetY,
+    window.innerHeight,
+    triggerStack.offsetHeight || 96,
+    24
+  );
+  if (nextTop == null) return;
+
+  deferredTriggerPosition = { top: nextTop };
+  triggerStack.style.top = `${nextTop}px`;
+});
+
+document.addEventListener('pointerup', async () => {
+  if (!deferredTriggerDragState) return;
+
+  if (deferredTriggerDragState.moved) {
+    await saveDeferredTriggerPosition(deferredTriggerPosition);
+    deferredTriggerSuppressClickUntil = Date.now() + 250;
+  }
+
+  deferredTriggerDragState = null;
+});
+
+document.addEventListener('click', (e) => {
+  const backToTopBtn = e.target.closest('#backToTopBtn');
+  if (!backToTopBtn) return;
+
+  window.scrollTo({
+    top: 0,
+    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+  });
+});
+
+document.addEventListener('click', async (e) => {
+  const actionEl = e.target.closest('[data-action]');
+  if (!actionEl) return;
+
+  const action = actionEl.dataset.action;
+
+  if (action === 'toggle-todo-search') {
+    todoSearchOpen = !todoSearchOpen;
+    if (!todoSearchOpen) todoSearchQuery = '';
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'create-todo') {
+    drawerView = 'todos';
+    todoDetailId = '';
+    openTodoEditor({ mode: 'create' });
+    await renderDeferredColumn();
+    focusTodoEditorTitle();
+    return;
+  }
+
+  if (action === 'edit-todo') {
+    const id = actionEl.dataset.todoId;
+    if (!id) return;
+    const todos = await getTodos();
+    const todo = todos.find(item => item.id === id && !item.dismissed);
+    if (!todo) return;
+    drawerView = 'todos';
+    openTodoEditor({
+      mode: 'edit',
+      todo,
+    });
+    await renderDeferredColumn();
+    focusTodoEditorTitle();
+    return;
+  }
+
+  if (action === 'update-todo-editor-field') {
+    setTodoEditorField(actionEl.dataset.field || '', actionEl.value || '');
+    return;
+  }
+
+  if (action === 'submit-todo-editor') {
+    e.preventDefault();
+    await submitTodoEditor();
+    return;
+  }
+
+  if (action === 'cancel-todo-editor') {
+    closeTodoEditor();
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'open-todo-detail') {
+    todoDetailId = actionEl.dataset.todoId || '';
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'close-todo-detail') {
+    todoDetailId = '';
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'complete-todo') {
+    const id = actionEl.dataset.todoId;
+    if (!id) return;
+    await completeTodoItem(id);
+    if (todoDetailId === id) todoDetailId = '';
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'delete-todo') {
+    const id = actionEl.dataset.todoId;
+    if (!id) return;
+    await deleteTodoItem(id);
+    if (todoDetailId === id) todoDetailId = '';
+    if (todoEditorState?.todoId === id) closeTodoEditor();
+    showToast(runtimeT ? runtimeT('toastTodoDeleted') : 'Todo deleted');
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'delete-todo-archive') {
+    const id = actionEl.dataset.todoId;
+    if (!id) return;
+    await deleteTodoItem(id);
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'clear-todo-archive') {
+    await clearTodoArchiveItems();
+    await renderDeferredColumn();
+    return;
+  }
+
+  if (action === 'close-drawer') {
+    setDeferredPanelOpen(false);
+    return;
+  }
+});
+
+document.addEventListener('pointerdown', (e) => {
+  const chipHandle = e.target.closest('[data-chip-drag-handle="tab"]');
+  const chipItem = e.target.closest('[data-chip-sort-id]');
+  const chipAction = e.target.closest('.chip-actions');
+  if (chipItem && !chipAction && e.button === 0) {
+    const item = chipItem;
+    const listEl = item?.parentElement;
+    const groupKey = item?.dataset.chipGroupId || '';
+    if (!item || !listEl || !groupKey) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    draggedPageChipId = item.dataset.chipSortId || '';
+    draggedPageChipEl = item;
+    const dragHandleEl = chipHandle || item;
+    document.body.classList.add('page-chip-drag-armed');
+
+    const rect = item.getBoundingClientRect();
+    pageChipDragState = {
+      sourceGroupKey: groupKey,
+      sourceListEl: listEl,
+      dropGroupKey: groupKey,
+      dropListEl: listEl,
+      dropCardEl: item.closest('.mission-card'),
+      createNewGroup: false,
+      newGroupPlacement: '',
+      handleEl: dragHandleEl,
+      pointerId: e.pointerId,
+      x: e.clientX,
+      y: e.clientY,
+      offsetX: e.clientX - rect.left,
+      offsetY: e.clientY - rect.top,
+      moved: false,
+    };
+    logPageChipDragDebug('pointerdown', {
+      groupKey,
+      chip: draggedPageChipId,
+      x: Math.round(e.clientX),
+      y: Math.round(e.clientY),
+      pointerId: e.pointerId,
+    });
+    if (typeof dragHandleEl.setPointerCapture === 'function' && e.pointerId != null) {
+      try {
+        dragHandleEl.setPointerCapture(e.pointerId);
+        logPageChipDragDebug('capture', { pointerId: e.pointerId });
+      } catch {}
+    }
+    return;
+  }
+
+  const drawerHandle = e.target.closest('.drawer-reorder-handle');
+  if (!drawerHandle || e.button !== 0) return;
+
+  const item = drawerHandle.closest('[data-drawer-sort-id]');
+  const listEl = item?.parentElement;
+  const kind = item?.dataset.drawerSortKind || '';
+  if (!item || !listEl || !kind) return;
+
+  e.preventDefault();
+  draggedDrawerItemId = item.dataset.drawerSortId || '';
+  draggedDrawerItemEl = item;
+
+  const rect = item.getBoundingClientRect();
+  drawerItemDragState = {
+    kind,
+    listEl,
+    x: e.clientX,
+    y: e.clientY,
+    offsetX: e.clientX - rect.left,
+    offsetY: e.clientY - rect.top,
+    moved: false,
+  };
+});
+
+document.addEventListener('pointermove', (e) => {
+  if (draggedPageChipId && pageChipDragState) {
+    const distance = Math.hypot(e.clientX - pageChipDragState.x, e.clientY - pageChipDragState.y);
+    if (!pageChipDragState.moved && distance >= 4) {
+      startPageChipDragVisuals();
+    }
+
+    if (pageChipDragState.moved) {
+      updateDraggedPageChipPosition(e.clientX, e.clientY);
+      previewPageChipOrder(e.clientX, e.clientY);
+    }
+    return;
+  }
+
+  if (!draggedDrawerItemId || !drawerItemDragState) return;
+
+  const distance = Math.hypot(e.clientX - drawerItemDragState.x, e.clientY - drawerItemDragState.y);
+  if (!drawerItemDragState.moved && distance < 4) return;
+
+  if (!drawerItemDragState.moved) {
+    drawerItemDragState.moved = true;
+    document.body.classList.add('drawer-list-dragging');
+    draggedDrawerItemEl?.classList.add('is-dragging');
+    draggedDrawerItemEl?.style.setProperty('--drag-width', `${draggedDrawerItemEl.getBoundingClientRect().width}px`);
+    ensureDrawerItemPlaceholder();
+  }
+
+  updateDraggedDrawerItemPosition(e.clientX, e.clientY);
+  previewDrawerItemOrder(e.clientY);
+});
+
+document.addEventListener('pointerup', async (e) => {
+  if (draggedPageChipId && pageChipDragState) {
+    if (pageChipDragState.pointerId != null && e.pointerId != null && pageChipDragState.pointerId !== e.pointerId) return;
+    logPageChipDragDebug('pointerup', {
+      x: Math.round(e.clientX),
+      y: Math.round(e.clientY),
+      pointerId: e.pointerId,
+      moved: pageChipDragState.moved,
+    });
+    if (!pageChipDragState.moved) {
+      const distance = Math.hypot(e.clientX - pageChipDragState.x, e.clientY - pageChipDragState.y);
+      if (distance >= 4) {
+        startPageChipDragVisuals();
+      }
+    }
+    updateDraggedPageChipPosition(e.clientX, e.clientY);
+    const stickyTarget = pageChipDragState.lastResolvedDropTarget;
+    const stickyIsNonSource = stickyTarget && (
+      stickyTarget.kind === 'new-group'
+      || (stickyTarget.kind === 'group' && stickyTarget.groupKey && stickyTarget.groupKey !== pageChipDragState.sourceGroupKey)
+    );
+    if (!stickyIsNonSource) {
+      syncPageChipDropTarget(e.clientX, e.clientY);
+    } else {
+      logPageChipDragDebug('pointerup-keep-target', {
+        kind: stickyTarget.kind,
+        groupKey: stickyTarget.groupKey || '',
+        placement: stickyTarget.placement || '',
+      });
+    }
+    await finishPageChipDrag();
+    return;
+  }
+
+  if (!draggedDrawerItemId || !drawerItemDragState) return;
+
+  const moved = drawerItemDragState.moved;
+  if (moved) {
+    const orderIds = [...drawerItemDragState.listEl.children]
+      .map(node => {
+        if (node === drawerItemPlaceholderEl) return draggedDrawerItemId;
+        return node.dataset?.drawerSortId || '';
+      })
+      .filter(Boolean);
+
+    await saveDrawerItemOrder(drawerItemDragState.kind, orderIds);
+  }
+
+  const draggedKind = drawerItemDragState.kind;
+  clearDrawerItemDragState();
+
+  if (moved) {
+    if (draggedKind === 'todo') {
+      await renderTodoPanel();
+    }
+  }
+});
+
+document.addEventListener('pointercancel', async (e) => {
+  if (!draggedPageChipId || !pageChipDragState) return;
+  if (pageChipDragState.pointerId != null && e.pointerId != null && pageChipDragState.pointerId !== e.pointerId) return;
+  logPageChipDragDebug('pointercancel', { pointerId: e.pointerId });
+  await finishPageChipDrag();
+});
+
+document.addEventListener('pointerdown', (e) => {
+  const button = e.target.closest('.group-nav-button[data-nav-kind="open-tabs"]');
+  if (!button) return;
+
+  draggedGroupId = button.dataset.groupId || '';
+  draggedGroupButtonEl = button;
+  const rect = button.getBoundingClientRect();
+  dragStartPoint = {
+    x: e.clientX,
+    y: e.clientY,
+    offsetX: e.clientX - rect.left,
+    offsetY: e.clientY - rect.top,
+    moved: false,
+    lastTargetId: draggedGroupId,
+  };
+});
+
+document.addEventListener('pointermove', (e) => {
+  if (!draggedGroupId || !dragStartPoint) return;
+
+  const distance = Math.hypot(e.clientX - dragStartPoint.x, e.clientY - dragStartPoint.y);
+  if (!dragStartPoint.moved && distance < 2) return;
+
+  if (!dragStartPoint.moved) {
+    dragStartPoint.moved = true;
+    document.body.classList.add('group-dragging');
+    draggedGroupButtonEl?.classList.add('is-dragging');
+    ensureDragPlaceholder();
+  }
+
+  updateDraggedButtonPosition(e.clientX, e.clientY);
+  previewDraggedOrder(e.clientX);
+});
+
+document.addEventListener('pointerup', async () => {
+  if (!draggedGroupId) return;
+
+  const moved = dragStartPoint?.moved;
+  const nextGroupOrder = groupOrderState.sessionOrder?.slice() || domainGroups.map(group => String(group.domain));
+  if (dragStartPoint?.moved) {
+    await saveGroupOrder(groupOrderState);
+    suppressJumpUntil = Date.now() + 250;
+  }
+
+  clearGroupDragState();
+
+  if (moved) {
+    applyLiveGroupOrder(nextGroupOrder, { reorderCards: true, reorderNav: true });
+    await syncChromeTabGroupsWithoutImportEcho();
+  }
+});
+
+document.addEventListener('click', (e) => {
+  const toggle = e.target.closest('#todoArchiveToggle');
+  if (!toggle) return;
+
+  const nextOpen = !toggle.classList.contains('open');
+  toggle.classList.toggle('open', nextOpen);
+  toggle.setAttribute('aria-expanded', String(nextOpen));
+  const body = document.getElementById('todoArchiveBody');
+  if (body) {
+    body.hidden = !nextOpen;
+    body.style.display = nextOpen ? 'block' : 'none';
+  }
+});
+
+// ---- Archive search — filter archived items as user types ----
+document.addEventListener('input', async (e) => {
+  if (e.target.id === 'themeTransparencyRange') {
+    themePreferences = normalizeThemePreferences({
+      ...themePreferences,
+      surfaceOpacity: Number(e.target.value),
+    });
+    applyThemePreferences();
+    const valueEl = document.getElementById('themeTransparencyValue');
+    if (valueEl) valueEl.textContent = `${themePreferences.surfaceOpacity}%`;
+    await chrome.storage.local.set({ [THEME_PREFERENCES_KEY]: themePreferences });
+    return;
+  }
+
+  if (e.target.id === 'themeUiScaleRange') {
+    themePreferences = normalizeThemePreferences({
+      ...themePreferences,
+      uiScale: Number(e.target.value),
+    });
+    applyThemePreferences();
+    const valueEl = document.getElementById('themeUiScaleValue');
+    if (valueEl) valueEl.textContent = `${themePreferences.uiScale}%`;
+    await chrome.storage.local.set({ [THEME_PREFERENCES_KEY]: themePreferences });
+    return;
+  }
+
+  if (e.target.id === 'themeShortcutScaleRange') {
+    themePreferences = normalizeThemePreferences({
+      ...themePreferences,
+      shortcutScale: Number(e.target.value),
+    });
+    applyThemePreferences();
+    const valueEl = document.getElementById('themeShortcutScaleValue');
+    if (valueEl) valueEl.textContent = `${themePreferences.shortcutScale}%`;
+    await chrome.storage.local.set({ [THEME_PREFERENCES_KEY]: themePreferences });
+    return;
+  }
+
+  const sessionPickerNameInput = e.target.closest('[data-action="change-session-picker-new-name"]');
+  if (sessionPickerNameInput) {
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      newSessionName: sessionPickerNameInput.value || '',
+    };
+    return;
+  }
+
+  return;
+});
+
+document.addEventListener('input', (e) => {
+  const renameInput = e.target.closest('.mission-rename-input');
+  if (!renameInput || !groupRenameEditorState) return;
+  groupRenameEditorState = {
+    ...groupRenameEditorState,
+    value: renameInput.value,
+    shouldFocus: false,
+  };
+});
+
+document.addEventListener('focusout', (e) => {
+  const renameInput = e.target.closest('.mission-rename-input');
+  if (!renameInput || !groupRenameEditorState) return;
+  const nextFocused = e.relatedTarget;
+  if (nextFocused && nextFocused.closest?.('.mission-rename-form')) return;
+  void submitGroupRenameEditor();
+});
+
+document.addEventListener('input', async (e) => {
+  const todoEditorInput = e.target.closest('[data-action="update-todo-editor-field"]');
+  if (todoEditorInput) {
+    setTodoEditorField(todoEditorInput.dataset.field || '', todoEditorInput.value || '');
+    return;
+  }
+
+  if (e.target.id !== 'todoSearchInput') return;
+  todoSearchQuery = e.target.value.trim();
+  await renderDeferredColumn();
+});
+
+document.addEventListener('change', async (e) => {
+  const sessionPickerTarget = e.target.closest('[data-action="change-session-picker-target"]');
+  if (sessionPickerTarget) {
+    tabSessionPickerState = {
+      ...tabSessionPickerState,
+      targetSessionId: sessionPickerTarget.value || '',
+    };
+    return;
+  }
+
+  if (e.target.id !== 'themeBackgroundInput') return;
+
+  const file = e.target.files?.[0];
+  e.target.value = '';
+  if (!file) return;
+
+  try {
+    if (!compressImageFileForStorage) {
+      throw new Error('Background compression is unavailable');
+    }
+    const customBackground = await compressImageFileForStorage(file);
+    await saveThemePreferences({ customBackground });
+    setThemeMenuOpen(false, { restoreFocus: true });
+    showToast('Background updated');
+  } catch (err) {
+    showToast(err?.message || 'Could not load background');
+  }
+});
+
+document.addEventListener('submit', async (e) => {
+  if (e.target.matches('.mission-rename-form')) {
+    e.preventDefault();
+    await submitGroupRenameEditor();
+    return;
+  }
+
+  if (e.target.matches('.todo-editor-form')) {
+    e.preventDefault();
+    await submitTodoEditor();
+    return;
+  }
+
+  if (e.target.id !== 'headerSearchForm') return;
+
+  e.preventDefault();
+  const input = document.getElementById('headerSearchInput');
+  const query = input?.value || '';
+  await runDefaultSearch(query);
+});
+
+
+/* ----------------------------------------------------------------
+   INITIALIZE
+   ---------------------------------------------------------------- */
+
+/**
+ * injectDynamicAnimationStyles()
+ *
+ * Dynamically generates CSS animation rules for staggered entry animations.
+ * This avoids hardcoding dozens of nth-child selectors in the CSS file.
+ * 
+ * Strategy: Stagger first 10 elements, then cap delay to avoid excessive wait times.
+ */
+function injectDynamicAnimationStyles() {
+  // Check if styles already injected to avoid duplicates
+  if (document.getElementById('dynamic-animation-styles')) return;
+
+  const styleEl = document.createElement('style');
+  styleEl.id = 'dynamic-animation-styles';
+
+  const rules = [];
+  const MAX_STAGGER_COUNT = 10; // Only stagger first 10 elements
+  const STAGGER_INCREMENT = 0.05; // 50ms between each element
+
+  // Active section mission cards - start at 0.25s, stagger first 10, then cap
+  for (let i = 1; i <= 50; i++) {
+    const delay = i <= MAX_STAGGER_COUNT 
+      ? 0.25 + (i - 1) * STAGGER_INCREMENT
+      : 0.25 + (MAX_STAGGER_COUNT - 1) * STAGGER_INCREMENT;
+    rules.push(
+      `body.${ENTRY_ANIMATIONS_CLASS} .active-section .missions .mission-card:nth-child(${i}) { animation: fadeUp 0.4s ease ${delay.toFixed(2)}s both; }`
+    );
+  }
+
+  // Abandoned section mission cards - start at 0.5s, stagger first 10, then cap
+  for (let i = 1; i <= 50; i++) {
+    const delay = i <= MAX_STAGGER_COUNT 
+      ? 0.5 + (i - 1) * STAGGER_INCREMENT
+      : 0.5 + (MAX_STAGGER_COUNT - 1) * STAGGER_INCREMENT;
+    rules.push(
+      `body.${ENTRY_ANIMATIONS_CLASS} .abandoned-section .missions .mission-card:nth-child(${i}) { animation: fadeUp 0.4s ease ${delay.toFixed(2)}s both; }`
+    );
+  }
+
+  // Deferred list items - stagger first 10, then cap at 0.5s
+  for (let i = 1; i <= 50; i++) {
+    const delay = i <= MAX_STAGGER_COUNT 
+      ? i * STAGGER_INCREMENT
+      : MAX_STAGGER_COUNT * STAGGER_INCREMENT;
+    rules.push(
+      `.deferred-list .deferred-item:nth-child(${i}) { animation-delay: ${delay.toFixed(2)}s; }`
+    );
+  }
+
+  styleEl.textContent = rules.join('\n');
+  document.head.appendChild(styleEl);
+}
+
+/**
+ * setupImageErrorHandlers()
+ * 
+ * Attaches error handlers to all favicon images after DOM update.
+ * This replaces inline onerror attributes to comply with CSP.
+ */
+function setupImageErrorHandlers() {
+  // Handle chip favicons
+  document.querySelectorAll('.chip-favicon[data-fallback-url]').forEach(img => {
+    if (!img.dataset.errorHandlerAttached) {
+      img.addEventListener('error', function() {
+        const fallbackUrl = this.dataset.fallbackUrl;
+        if (fallbackUrl && this.dataset.fallbackApplied !== 'true') {
+          this.dataset.fallbackApplied = 'true';
+          this.src = fallbackUrl;
+          return;
+        }
+        this.style.display = 'none';
+        const sibling = this.nextElementSibling;
+        if (sibling && sibling.classList.contains('chip-favicon-fallback')) {
+          sibling.style.display = '';
+        }
+      });
+      img.dataset.errorHandlerAttached = 'true';
+    }
+  });
+
+  // Handle group nav icons
+  document.querySelectorAll('.group-nav-icon[data-fallback-src]').forEach(img => {
+    if (!img.dataset.errorHandlerAttached) {
+      img.addEventListener('error', function() {
+        const fallbackSrc = this.dataset.fallbackSrc;
+        if (fallbackSrc && this.dataset.fallbackApplied !== 'true') {
+          this.dataset.fallbackApplied = 'true';
+          this.src = fallbackSrc;
+          return;
+        }
+        this.style.display = 'none';
+        const sibling = this.nextElementSibling;
+        if (sibling && sibling.classList.contains('group-nav-fallback')) {
+          sibling.style.display = '';
+        }
+      });
+      img.dataset.errorHandlerAttached = 'true';
+    }
+  });
+}
+
+async function initializeDashboardRuntime() {
+  injectDynamicAnimationStyles();
+  primeEntryAnimations();
+  const currentTab = await resolveCurrentDashboardTab();
+  currentDashboardTabId = currentTab?.id ?? null;
+  currentDashboardWindowId = currentTab?.windowId ?? null;
+  dashboardStartupTabChangeIgnoreUntil = Date.now() + 2000;
+  window.__suppressAutoRefreshUntil = Math.max(
+    window.__suppressAutoRefreshUntil || 0,
+    Date.now() + 2000
+  );
+  await loadThemePreferences();
+  sleepControlEnabled = (typeof themePreferences !== 'undefined' && themePreferences.sleepControlEnabled === true);
+  if (typeof loadChromeTabGroupsSetting === 'function') {
+    chromeTabGroupsEnabled = await loadChromeTabGroupsSetting();
+  }
+  await loadImportedChromeGroupMeta();
+  if (chromeTabGroupsEnabled) {
+    await fetchOpenTabs();
+    const realTabs = getRealTabs();
+    await loadSessionGroups(getOpenTabIdsForSessionPruning());
+    if (shouldImportChromeGroupsIntoSessionState()) {
+      const importedCount = await importChromeNativeGroupsIntoSessionGroups();
+      if (typeof setImportMode === 'function') setImportMode(importedCount > 0);
+    }
+  }
+  ensureChromeTabGroupsSubscription();
+  disableChromeTabGroupsImportModeForLocalEdits();
+  await renderDashboard();
+  await collapseChromeGroupsForCurrentTabHarborTab();
+  updateBackToTopVisibility();
+
+  // Listen for tab change notifications from background script
+  setupTabChangeListener();
+}
+
+/**
+ * setupTabChangeListener()
+ * 
+ * Listens for messages from background.js when tabs change,
+ * and refreshes the dashboard to show updated tab list.
+ */
+function setupTabChangeListener() {
+  const DEBUG = false;
+  if (DEBUG) console.log('[tab-harbor] Setting up tab change listener');
+
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (DEBUG) console.log('[tab-harbor] Received message:', message);
+
+    if (message.action === 'tabs-changed') {
+      if (shouldSkipStartupTabChange(message)) {
+        return;
+      }
+
+      // Skip refresh if we just performed a tab action ourselves
+      // This prevents animation spam when closing tabs from the dashboard
+      if (Date.now() < (window.__suppressAutoRefreshUntil || 0)) {
+        return;
+      }
+
+      if (DEBUG) console.log('[tab-harbor] Tab changed, scheduling refresh...');
+
+      // Debounce rapid changes (e.g., closing multiple tabs)
+      if (window.__tabRefreshTimeout) {
+        clearTimeout(window.__tabRefreshTimeout);
+      }
+
+      window.__tabRefreshTimeout = setTimeout(async () => {
+        try {
+          if (DEBUG) console.log('[tab-harbor] Refreshing dashboard...');
+          await renderDashboard();
+          updateBackToTopVisibility();
+          if (DEBUG) console.log('[tab-harbor] Dashboard refreshed successfully');
+        } catch (err) {
+          console.warn('[tab-harbor] Failed to refresh dashboard:', err);
+        }
+      }, 300); // Wait 300ms after last tab change
+    }
+  });
+}
+
+function mountDashboardRuntime() {
+  if (!window.__tabHarborRuntimeMounted) {
+    document.addEventListener('pointerdown', disableEntryAnimations, { capture: true, passive: true });
+    window.addEventListener('scroll', updateBackToTopVisibility, { passive: true });
+    window.addEventListener('focus', () => {
+      void collapseChromeGroupsForCurrentTabHarborTab();
+    });
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        void collapseChromeGroupsForCurrentTabHarborTab();
+      }
+    });
+    window.__tabHarborRuntimeMounted = true;
+  }
+  return initializeDashboardRuntime();
+}
+
+globalThis.TabHarborDashboardRuntime = {
+  initializeDashboardRuntime,
+  mountDashboardRuntime,
+  fetchOpenTabs,
+  getTabSessionPickerContext,
+  getOpenTabs: () => openTabs,
+  renderDashboard,
+  renderWorkspacePageSwitch,
+  renderWorkspaceThemeTools,
+  syncWorkspaceTopNavMarkup,
+  restoreSavedTabToBrowser,
+  restoreSavedTabSession,
+  saveCurrentWindowTabSession,
+  saveSelectedTabSession,
+};
diff --git a/extension/deferred-trigger-position.js b/extension/deferred-trigger-position.js
new file mode 100644
index 0000000..f797808
--- /dev/null
+++ b/extension/deferred-trigger-position.js
@@ -0,0 +1,30 @@
+'use strict';
+
+(function attachDeferredTriggerPosition(globalScope) {
+  function normalizeTriggerPosition(input) {
+    const top = Number(input?.top);
+    return {
+      top: Number.isFinite(top) ? top : null,
+    };
+  }
+
+  function clampTriggerTop(top, viewportHeight, triggerHeight, margin = 24) {
+    const numericTop = Number(top);
+    if (!Number.isFinite(numericTop)) return null;
+
+    const minTop = margin;
+    const maxTop = Math.max(minTop, Number(viewportHeight) - Number(triggerHeight) - margin);
+    return Math.min(Math.max(numericTop, minTop), maxTop);
+  }
+
+  const api = {
+    clampTriggerTop,
+    normalizeTriggerPosition,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutDeferredTriggerPosition = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/deferred-trigger-position.test.js b/extension/deferred-trigger-position.test.js
new file mode 100644
index 0000000..e79c8f3
--- /dev/null
+++ b/extension/deferred-trigger-position.test.js
@@ -0,0 +1,20 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  clampTriggerTop,
+  normalizeTriggerPosition,
+} = require('./deferred-trigger-position.js');
+
+test('normalizeTriggerPosition keeps finite top values only', () => {
+  assert.deepEqual(normalizeTriggerPosition({ top: 180 }), { top: 180 });
+  assert.deepEqual(normalizeTriggerPosition({ top: 'bad' }), { top: null });
+});
+
+test('clampTriggerTop keeps trigger inside viewport bounds', () => {
+  assert.equal(clampTriggerTop(8, 900, 48, 24), 24);
+  assert.equal(clampTriggerTop(300, 900, 48, 24), 300);
+  assert.equal(clampTriggerTop(880, 900, 48, 24), 828);
+});
diff --git a/extension/drawer-manager.js b/extension/drawer-manager.js
new file mode 100644
index 0000000..1aa3998
--- /dev/null
+++ b/extension/drawer-manager.js
@@ -0,0 +1,430 @@
+'use strict';
+
+const {
+  escapeHtmlAttribute: drawerEscapeHtmlAttribute,
+  escapeHtml: drawerEscapeHtml,
+} = globalThis.TabOutIconUtils || {};
+
+const {
+  t: drawerT,
+} = globalThis.TabHarborI18n || {};
+
+const {
+  clampTriggerTop: drawerClampTriggerTop,
+  normalizeTriggerPosition: drawerNormalizeTriggerPosition,
+} = globalThis.TabOutDeferredTriggerPosition || {};
+
+const {
+  clearArchivedTodos: drawerClearArchivedTodos,
+  completeTodo: drawerCompleteTodo,
+  createTodo: drawerCreateTodo,
+  deleteTodo: drawerDeleteTodo,
+  normalizeTodos: drawerNormalizeTodos,
+  searchTodos: drawerSearchTodos,
+  splitTodos: drawerSplitTodos,
+  updateTodo: drawerUpdateTodo,
+} = globalThis.TabOutTodosStore || {};
+
+let deferredPanelOpen = false;
+let deferredTriggerPosition = drawerNormalizeTriggerPosition ? drawerNormalizeTriggerPosition() : { top: null };
+const DEFERRED_TRIGGER_POSITION_KEY = 'deferredTriggerPosition';
+let deferredTriggerDragState = null;
+let deferredTriggerSuppressClickUntil = 0;
+let drawerView = 'todos';
+let todoDetailId = '';
+let todoSearchOpen = false;
+let todoSearchQuery = '';
+let drawerFocusReturnEl = null;
+const TODOS_KEY = 'todos';
+
+function createTodoEditorState(input = {}) {
+  return {
+    open: Boolean(input.open),
+    mode: input.mode === 'edit' ? 'edit' : 'create',
+    todoId: input.todoId || '',
+    title: input.title || '',
+    description: input.description || '',
+    error: input.error || '',
+  };
+}
+
+let todoEditorState = createTodoEditorState();
+
+function drawerTodoText(key, fallback) {
+  return drawerT ? drawerT(key) : fallback;
+}
+
+function drawerEscapeAttr(value = '') {
+  if (drawerEscapeHtmlAttribute) return drawerEscapeHtmlAttribute(value);
+  return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
+function openTodoEditor({ mode = 'create', todo = null } = {}) {
+  todoEditorState = createTodoEditorState({
+    open: true,
+    mode,
+    todoId: mode === 'edit' ? String(todo?.id || '') : '',
+    title: mode === 'edit' ? String(todo?.title || '') : '',
+    description: mode === 'edit' ? String(todo?.description || '') : '',
+  });
+}
+
+function closeTodoEditor() {
+  todoEditorState = createTodoEditorState();
+}
+
+function getTodoEditorState() {
+  return { ...todoEditorState };
+}
+
+function setTodoEditorField(field, value) {
+  if (field !== 'title' && field !== 'description') return;
+  todoEditorState = {
+    ...todoEditorState,
+    [field]: String(value || ''),
+    error: '',
+  };
+}
+
+function setTodoEditorError(error) {
+  todoEditorState = {
+    ...todoEditorState,
+    error: String(error || ''),
+  };
+}
+
+function focusTodoEditorTitle() {
+  const titleInput = document.querySelector('#todoEditorView [name="title"]');
+  if (titleInput?.focus) titleInput.focus({ preventScroll: true });
+}
+
+async function loadDeferredTriggerPosition() {
+  const stored = await chrome.storage.local.get(DEFERRED_TRIGGER_POSITION_KEY);
+  deferredTriggerPosition = drawerNormalizeTriggerPosition(stored[DEFERRED_TRIGGER_POSITION_KEY]);
+  return deferredTriggerPosition;
+}
+
+async function saveDeferredTriggerPosition(nextState) {
+  deferredTriggerPosition = drawerNormalizeTriggerPosition(nextState);
+  await chrome.storage.local.set({ [DEFERRED_TRIGGER_POSITION_KEY]: deferredTriggerPosition });
+  return deferredTriggerPosition;
+}
+
+function isMobileDeferredLayout() {
+  return window.matchMedia('(max-width: 960px)').matches;
+}
+
+function applyDeferredTriggerPosition() {
+  const triggerStack = document.getElementById('drawerTriggerStack');
+  if (!triggerStack) return;
+
+  if (isMobileDeferredLayout()) {
+    triggerStack.style.removeProperty('top');
+    return;
+  }
+
+  const triggerHeight = triggerStack.offsetHeight || 94;
+  const normalizedTop = drawerClampTriggerTop(
+    deferredTriggerPosition.top ?? window.innerHeight / 2 - triggerHeight / 2,
+    window.innerHeight,
+    triggerHeight,
+    24
+  );
+  triggerStack.style.top = `${normalizedTop}px`;
+}
+
+async function getTodos() {
+  const stored = await chrome.storage.local.get(TODOS_KEY);
+  return drawerNormalizeTodos(stored[TODOS_KEY]);
+}
+
+async function saveTodos(todos) {
+  const normalized = drawerNormalizeTodos(todos);
+  await chrome.storage.local.set({ [TODOS_KEY]: normalized });
+  return normalized;
+}
+
+async function createTodoItem(payload) {
+  const todos = await getTodos();
+  return saveTodos(drawerCreateTodo(todos, payload));
+}
+
+async function completeTodoItem(id) {
+  const todos = await getTodos();
+  return saveTodos(drawerCompleteTodo(todos, id));
+}
+
+async function deleteTodoItem(id) {
+  const todos = await getTodos();
+  return saveTodos(drawerDeleteTodo(todos, id));
+}
+
+async function updateTodoItem(id, payload) {
+  const todos = await getTodos();
+  return saveTodos(drawerUpdateTodo(todos, id, payload));
+}
+
+async function clearTodoArchiveItems() {
+  const todos = await getTodos();
+  return saveTodos(drawerClearArchivedTodos(todos));
+}
+
+function renderTodoArchiveItem(todo) {
+  const ago = todo.completedAt ? timeAgo(todo.completedAt) : timeAgo(todo.createdAt);
+  return `
+    <div class="archive-item">
+      <div class="archive-item-main">
+        <div class="archive-item-title">${drawerEscapeHtml ? drawerEscapeHtml(todo.title) : todo.title}</div>
+        <span class="archive-item-date">${ago}</span>
+      </div>
+      <button class="archive-item-delete" type="button" data-action="delete-todo-archive" data-todo-id="${todo.id}" aria-label="Delete archived todo" title="Delete archived todo">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+      </button>
+    </div>`;
+}
+
+function renderTodoListItem(todo, { dragEnabled = true } = {}) {
+  const ago = timeAgo(todo.createdAt);
+  const dragHandle = dragEnabled
+    ? `<button class="drawer-reorder-handle todo-reorder-handle" type="button" data-drag-handle="todo" aria-label="Drag to reorder todo">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" /></svg>
+      </button>`
+    : '';
+  return `
+    <div class="todo-item" data-todo-id="${todo.id}" data-drawer-sort-id="${todo.id}" data-drawer-sort-kind="todo">
+      <input type="checkbox" class="todo-checkbox" data-action="complete-todo" data-todo-id="${todo.id}">
+      <button class="todo-main" type="button" data-action="open-todo-detail" data-todo-id="${todo.id}">
+        <span class="todo-title">${drawerEscapeHtml ? drawerEscapeHtml(todo.title) : todo.title}</span>
+        <span class="todo-meta">${ago}</span>
+      </button>
+      <div class="todo-actions">
+        <button class="todo-action-btn todo-edit" type="button" data-action="edit-todo" data-todo-id="${todo.id}" aria-label="Edit todo" data-tooltip="Edit todo">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.9" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
+        </button>
+        <button class="todo-action-btn todo-delete" type="button" data-action="delete-todo" data-todo-id="${todo.id}" aria-label="Delete todo" data-tooltip="Delete todo">
+          ${ICONS.close}
+        </button>
+        ${dragHandle}
+      </div>
+    </div>`;
+}
+
+function renderTodoDetail(todo) {
+  return `
+    <div class="todo-detail">
+      <button class="todo-back-btn" type="button" data-action="close-todo-detail">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
+        Back to list
+      </button>
+      <div class="todo-detail-card">
+        <h3>${drawerEscapeHtml ? drawerEscapeHtml(todo.title) : todo.title}</h3>
+        <p>${drawerEscapeHtml ? drawerEscapeHtml(todo.description || 'Add a note when this task needs more context.') : (todo.description || 'Add a note when this task needs more context.')}</p>
+        <div class="todo-detail-meta">Created ${timeAgo(todo.createdAt)}</div>
+        <div class="todo-detail-actions">
+          <button class="todo-action-btn todo-edit" type="button" data-action="edit-todo" data-todo-id="${todo.id}" aria-label="Edit todo" data-tooltip="Edit todo">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.9" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
+          </button>
+          <button class="todo-action-btn todo-delete" type="button" data-action="delete-todo" data-todo-id="${todo.id}" aria-label="Delete todo" data-tooltip="Delete todo">
+            ${ICONS.close}
+          </button>
+        </div>
+      </div>
+    </div>`;
+}
+
+function renderTodoEditor() {
+  const isEdit = todoEditorState.mode === 'edit';
+  const editorTitle = isEdit
+    ? drawerTodoText('todoEditorEditTitle', 'Edit todo')
+    : drawerTodoText('todoEditorCreateTitle', 'New todo');
+  const titleLabel = drawerTodoText('todoTitleLabel', 'Title');
+  const descriptionLabel = drawerTodoText('todoDescriptionLabel', 'Details');
+  const titlePlaceholder = drawerTodoText('todoEditorTitlePlaceholder', 'What needs attention?');
+  const descriptionPlaceholder = drawerTodoText('todoEditorDescriptionPlaceholder', 'Add notes, context, or a next step.');
+  const titleValue = drawerEscapeAttr(todoEditorState.title);
+  const descriptionValue = drawerEscapeHtml ? drawerEscapeHtml(todoEditorState.description) : todoEditorState.description;
+  const errorHtml = todoEditorState.error
+    ? `<div class="todo-editor-error" id="todoEditorError">${drawerEscapeHtml ? drawerEscapeHtml(todoEditorState.error) : todoEditorState.error}</div>`
+    : '<div class="todo-editor-error" id="todoEditorError" aria-live="polite"></div>';
+
+  return `
+    <div class="todo-editor-view" id="todoEditorView" role="group" aria-label="${drawerEscapeAttr(editorTitle)}">
+      <form class="todo-editor-form" data-action="submit-todo-editor" novalidate>
+        <div class="todo-editor-head">
+          <h3>${drawerEscapeHtml ? drawerEscapeHtml(editorTitle) : editorTitle}</h3>
+        </div>
+        <label class="todo-editor-field">
+          <span class="todo-editor-label">${drawerEscapeHtml ? drawerEscapeHtml(titleLabel) : titleLabel}</span>
+          <input name="title" class="todo-editor-input" type="text" value="${titleValue}" placeholder="${drawerEscapeAttr(titlePlaceholder)}" data-action="update-todo-editor-field" data-field="title" aria-describedby="todoEditorError" autocomplete="off">
+        </label>
+        <label class="todo-editor-field">
+          <span class="todo-editor-label">${drawerEscapeHtml ? drawerEscapeHtml(descriptionLabel) : descriptionLabel}</span>
+          <textarea name="description" class="todo-editor-input todo-editor-textarea" placeholder="${drawerEscapeAttr(descriptionPlaceholder)}" data-action="update-todo-editor-field" data-field="description">${descriptionValue}</textarea>
+        </label>
+        ${errorHtml}
+        <div class="todo-editor-actions">
+          <button class="theme-menu-action is-secondary" type="button" data-action="cancel-todo-editor">${drawerTodoText('cancelButton', 'Cancel')}</button>
+          <button class="theme-menu-action" type="submit" data-action="submit-todo-editor">${drawerTodoText('saveButton', 'Save')}</button>
+        </div>
+      </form>
+    </div>`;
+}
+
+async function renderTodoPanel() {
+  const panel = document.getElementById('todoPanel');
+  const countEl = document.getElementById('todoCount');
+  const list = document.getElementById('todoList');
+  const empty = document.getElementById('todoEmpty');
+  const archive = document.getElementById('todoArchive');
+  const archiveCount = document.getElementById('todoArchiveCount');
+  const archiveList = document.getElementById('todoArchiveList');
+  const clearArchiveBtn = document.getElementById('clearTodoArchiveBtn');
+  const detail = document.getElementById('todoDetailView');
+  const searchWrap = document.getElementById('todoSearchWrap');
+  const searchInput = document.getElementById('todoSearchInput');
+  const todoSearchToggle = document.getElementById('todoSearchToggle');
+  const todoArchiveToggle = document.getElementById('todoArchiveToggle');
+  const todoArchiveBody = document.getElementById('todoArchiveBody');
+
+  if (!panel) return;
+
+  const todos = await getTodos();
+  const { active, archived } = drawerSplitTodos(todos);
+  const filtered = drawerSearchTodos(active, todoSearchQuery);
+  const todoDragEnabled = !todoSearchQuery.trim() && !todoDetailId && !todoEditorState.open;
+  let editor = document.getElementById('todoEditorView');
+
+  countEl.textContent = `${active.length}`;
+  if (todoSearchToggle) {
+    todoSearchToggle.setAttribute('aria-expanded', String(todoSearchOpen));
+  }
+  searchWrap.style.display = todoSearchOpen ? 'block' : 'none';
+  searchWrap.hidden = !todoSearchOpen;
+  if (searchInput && searchInput.value !== todoSearchQuery) searchInput.value = todoSearchQuery;
+  if (todoArchiveToggle && todoArchiveBody) {
+    const archiveExpanded = todoArchiveBody.style.display !== 'none' && !todoArchiveBody.hidden;
+    todoArchiveToggle.setAttribute('aria-expanded', String(archiveExpanded));
+  }
+
+  if (todoEditorState.open) {
+    if (editor) {
+      const wrapper = document.createElement('div');
+      wrapper.innerHTML = renderTodoEditor().trim();
+      editor.replaceWith(wrapper.firstElementChild);
+    } else {
+      detail.insertAdjacentHTML('beforebegin', renderTodoEditor());
+    }
+    editor = document.getElementById('todoEditorView');
+    if (editor) editor.style.display = 'block';
+    detail.style.display = 'none';
+    list.style.display = 'none';
+    empty.style.display = 'none';
+  } else if (editor) {
+    editor.style.display = 'none';
+    editor.innerHTML = '';
+  }
+
+  if (!todoEditorState.open && todoDetailId) {
+    const todo = active.find(item => item.id === todoDetailId);
+    if (todo) {
+      detail.innerHTML = renderTodoDetail(todo);
+      detail.style.display = 'block';
+      list.style.display = 'none';
+      empty.style.display = 'none';
+    } else {
+      todoDetailId = '';
+      detail.style.display = 'none';
+    }
+  } else {
+    detail.style.display = 'none';
+  }
+
+  if (!todoEditorState.open && !todoDetailId) {
+    if (filtered.length > 0) {
+      list.innerHTML = filtered.map(todo => renderTodoListItem(todo, { dragEnabled: todoDragEnabled })).join('');
+      list.style.display = 'block';
+      empty.style.display = 'none';
+    } else {
+      list.style.display = 'none';
+      empty.style.display = 'block';
+    }
+  }
+
+  if (todoEditorState.open) {
+    archive.style.display = 'none';
+    if (clearArchiveBtn) clearArchiveBtn.style.display = 'none';
+  } else if (archived.length > 0) {
+    archiveCount.textContent = `(${archived.length})`;
+    archiveList.innerHTML = archived.map(todo => renderTodoArchiveItem(todo)).join('');
+    archive.style.display = 'block';
+    if (clearArchiveBtn) clearArchiveBtn.style.display = 'inline-flex';
+  } else {
+    archive.style.display = 'none';
+    if (clearArchiveBtn) clearArchiveBtn.style.display = 'none';
+  }
+}
+
+async function renderDeferredColumn() {
+  const column = document.getElementById('drawerColumn');
+  const triggerStack = document.getElementById('drawerTriggerStack');
+  const todoTrigger = document.getElementById('todoTrigger');
+  const overlay = document.getElementById('deferredOverlay');
+  const todoPanel = document.getElementById('todoPanel');
+  const titleButtons = document.querySelectorAll('.drawer-title-btn');
+
+  if (!column) return;
+
+  try {
+    await getTodos();
+    await loadDeferredTriggerPosition();
+    column.style.display = 'block';
+    if (triggerStack) triggerStack.style.display = 'flex';
+    if (todoTrigger) todoTrigger.style.display = 'inline-flex';
+    column.classList.toggle('open', deferredPanelOpen);
+    column.setAttribute('aria-hidden', String(!deferredPanelOpen));
+    if (todoTrigger) {
+      todoTrigger.setAttribute('aria-expanded', String(deferredPanelOpen));
+      todoTrigger.setAttribute('aria-label', deferredPanelOpen ? 'Close todos' : 'Open todos');
+    }
+    overlay.hidden = !deferredPanelOpen;
+    overlay.classList.toggle('visible', deferredPanelOpen);
+    applyDeferredTriggerPosition();
+    todoPanel?.classList.add('is-active');
+    titleButtons.forEach(button => {
+      button.classList.add('is-active');
+      button.setAttribute('aria-selected', 'true');
+      button.tabIndex = 0;
+    });
+
+    await renderTodoPanel();
+  } catch (err) {
+    console.warn('[tab-harbor] Could not load todos:', err);
+    column.style.display = 'none';
+    if (triggerStack) triggerStack.style.display = 'none';
+    overlay.hidden = true;
+    overlay.classList.remove('visible');
+  }
+}
+
+function setDeferredPanelOpen(nextOpen) {
+  const shouldOpen = Boolean(nextOpen);
+  if (shouldOpen) {
+    drawerFocusReturnEl = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  }
+  deferredPanelOpen = shouldOpen;
+  renderDeferredColumn().then(() => {
+    if (deferredPanelOpen) {
+      const preferredFocusId = todoSearchOpen ? 'todoSearchInput' : 'todoPanel';
+      const preferredTarget = document.getElementById(preferredFocusId);
+      if (preferredTarget?.focus) {
+        preferredTarget.focus({ preventScroll: true });
+      } else {
+        focusFirstElement(document.getElementById('drawerColumn'));
+      }
+      return;
+    }
+
+    drawerFocusReturnEl?.focus?.({ preventScroll: true });
+    drawerFocusReturnEl = null;
+  });
+}
diff --git a/extension/group-order.js b/extension/group-order.js
new file mode 100644
index 0000000..bec6158
--- /dev/null
+++ b/extension/group-order.js
@@ -0,0 +1,96 @@
+'use strict';
+
+(function attachGroupOrder(globalScope) {
+  function uniqueKeys(keys = []) {
+    return [...new Set((keys || []).filter(Boolean).map(String))];
+  }
+
+  function normalizeGroupOrderState(input) {
+    const durableOrder = uniqueKeys(
+      input?.sessionOrder?.length
+        ? input.sessionOrder
+        : (input?.pinnedOrder || [])
+    );
+    return {
+      sessionOrder: durableOrder,
+      pinnedOrder: durableOrder,
+      pinEnabled: false,
+    };
+  }
+
+  function mergeOrder(orderKeys, availableKeys) {
+    const seen = new Set();
+    const result = [];
+
+    for (const key of uniqueKeys(orderKeys)) {
+      if (!availableKeys.includes(key) || seen.has(key)) continue;
+      seen.add(key);
+      result.push(key);
+    }
+
+    for (const key of availableKeys) {
+      if (seen.has(key)) continue;
+      seen.add(key);
+      result.push(key);
+    }
+
+    return result;
+  }
+
+  function applyGroupOrder(groups, state) {
+    const normalizedState = normalizeGroupOrderState(state);
+    const availableKeys = groups.map(group => String(group.domain));
+    const preferredOrder = normalizedState.sessionOrder;
+
+    const finalKeys = mergeOrder(preferredOrder, availableKeys);
+    const orderMap = new Map(finalKeys.map((key, index) => [key, index]));
+
+    return [...groups].sort((a, b) => {
+      return (orderMap.get(String(a.domain)) ?? Number.MAX_SAFE_INTEGER) -
+        (orderMap.get(String(b.domain)) ?? Number.MAX_SAFE_INTEGER);
+    });
+  }
+
+  function createReorderedKeys(currentKeys, draggedKey, targetKey, placeAfter = false) {
+    const keys = uniqueKeys(currentKeys);
+    if (!draggedKey || !targetKey || draggedKey === targetKey) return keys;
+
+    const draggedIndex = keys.indexOf(String(draggedKey));
+    const targetIndex = keys.indexOf(String(targetKey));
+    if (draggedIndex === -1 || targetIndex === -1) return keys;
+
+    const nextKeys = [...keys];
+    nextKeys.splice(draggedIndex, 1);
+    const insertIndex = placeAfter
+      ? targetIndex > draggedIndex ? targetIndex : targetIndex + 1
+      : targetIndex < draggedIndex ? targetIndex : targetIndex - 1;
+    nextKeys.splice(Math.max(0, insertIndex), 0, String(draggedKey));
+    return nextKeys;
+  }
+
+  function setPinEnabled(state, pinEnabled, currentOrderKeys = []) {
+    const normalizedState = normalizeGroupOrderState(state);
+    const orderKeys = normalizedState.sessionOrder.length > 0
+      ? normalizedState.sessionOrder
+      : uniqueKeys(currentOrderKeys);
+    const durableOrder = mergeOrder(orderKeys, uniqueKeys(currentOrderKeys));
+    return normalizeGroupOrderState({
+      sessionOrder: durableOrder,
+      pinnedOrder: durableOrder,
+      pinEnabled: false,
+    });
+  }
+
+  const api = {
+    applyGroupOrder,
+    createReorderedKeys,
+    normalizeGroupOrderState,
+    setPinEnabled,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutGroupOrder = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/group-order.test.js b/extension/group-order.test.js
new file mode 100644
index 0000000..58adef9
--- /dev/null
+++ b/extension/group-order.test.js
@@ -0,0 +1,98 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  applyGroupOrder,
+  createReorderedKeys,
+  normalizeGroupOrderState,
+  setPinEnabled,
+} = require('./group-order.js');
+
+test('normalizeGroupOrderState normalizes to a single durable order', () => {
+  const state = normalizeGroupOrderState({
+    sessionOrder: ['github.com', 'chatgpt.com'],
+    pinnedOrder: ['chatgpt.com'],
+    pinEnabled: true,
+  });
+
+  assert.deepEqual(state.sessionOrder, ['github.com', 'chatgpt.com']);
+  assert.deepEqual(state.pinnedOrder, ['github.com', 'chatgpt.com']);
+  assert.equal(state.pinEnabled, false);
+});
+
+test('applyGroupOrder prefers session order, then appends unseen groups', () => {
+  const groups = [
+    { domain: 'github.com' },
+    { domain: 'chatgpt.com' },
+    { domain: '__landing-pages__' },
+  ];
+
+  const ordered = applyGroupOrder(groups, {
+    sessionOrder: ['chatgpt.com'],
+    pinnedOrder: ['github.com'],
+    pinEnabled: true,
+  });
+
+  assert.deepEqual(
+    ordered.map(group => group.domain),
+    ['chatgpt.com', 'github.com', '__landing-pages__']
+  );
+});
+
+test('applyGroupOrder falls back to stored durable order when session order is empty', () => {
+  const groups = [
+    { domain: 'github.com' },
+    { domain: 'chatgpt.com' },
+    { domain: '__landing-pages__' },
+  ];
+
+  const ordered = applyGroupOrder(groups, {
+    sessionOrder: [],
+    pinnedOrder: ['__landing-pages__', 'github.com'],
+    pinEnabled: true,
+  });
+
+  assert.deepEqual(
+    ordered.map(group => group.domain),
+    ['__landing-pages__', 'github.com', 'chatgpt.com']
+  );
+});
+
+test('createReorderedKeys moves dragged group before target group', () => {
+  const reordered = createReorderedKeys(
+    ['github.com', 'chatgpt.com', '__landing-pages__'],
+    '__landing-pages__',
+    'github.com'
+  );
+
+  assert.deepEqual(reordered, ['__landing-pages__', 'github.com', 'chatgpt.com']);
+});
+
+test('createReorderedKeys can preview dropping after the hovered target', () => {
+  const reordered = createReorderedKeys(
+    ['github.com', 'chatgpt.com', '__landing-pages__'],
+    '__landing-pages__',
+    'github.com',
+    true
+  );
+
+  assert.deepEqual(reordered, ['github.com', '__landing-pages__', 'chatgpt.com']);
+});
+
+test('setPinEnabled preserves the current durable order for legacy callers', () => {
+  const nextState = setPinEnabled(
+    {
+      sessionOrder: ['chatgpt.com', 'github.com'],
+      pinnedOrder: [],
+      pinEnabled: false,
+    },
+    true,
+    ['chatgpt.com', 'github.com']
+  );
+
+  assert.equal(nextState.pinEnabled, false);
+  assert.deepEqual(nextState.sessionOrder, ['chatgpt.com', 'github.com']);
+  assert.deepEqual(nextState.pinnedOrder, ['chatgpt.com', 'github.com']);
+});
diff --git a/extension/i18n.js b/extension/i18n.js
new file mode 100644
index 0000000..766f0db
--- /dev/null
+++ b/extension/i18n.js
@@ -0,0 +1,677 @@
+'use strict';
+
+(function attachTabHarborI18n(globalScope) {
+  const LANGUAGE_PREFERENCE_KEY = 'languagePreference';
+  const LANGUAGE_OPTIONS = new Set(['auto', 'en', 'zh-CN']);
+  const i18nNavigator = globalScope.navigator || {};
+  const i18nLanguage = String(i18nNavigator.language || i18nNavigator.userLanguage || 'en').toLowerCase();
+
+  function resolveAutoLocale() {
+    return i18nLanguage.startsWith('zh') ? 'zh-CN' : 'en';
+  }
+
+  function normalizeLanguagePreference(input) {
+    const value = String(input || 'auto');
+    return LANGUAGE_OPTIONS.has(value) ? value : 'auto';
+  }
+
+  function resolveLocaleByPreference(preference) {
+    const normalizedPreference = normalizeLanguagePreference(preference);
+    if (normalizedPreference === 'en') return 'en';
+    if (normalizedPreference === 'zh-CN') return 'zh-CN';
+    return resolveAutoLocale();
+  }
+
+  let i18nLanguagePreference = 'auto';
+  let i18nLocale = resolveLocaleByPreference(i18nLanguagePreference);
+
+  const i18nMessages = {
+    en: {
+      emptyTitle: 'Inbox zero, but for tabs.',
+      emptySubtitle: "You're free.",
+      greetingMorning: 'Good morning',
+      greetingAfternoon: 'Good afternoon',
+      greetingEvening: 'Good evening',
+      timeJustNow: 'just now',
+      timeMinAgo: '{count} min ago',
+      timeHourAgo: '1 hr ago',
+      timeHoursAgo: '{count} hrs ago',
+      timeYesterday: 'yesterday',
+      timeDaysAgo: '{count} days ago',
+      tabsWordSingular: 'tab',
+      tabsWordPlural: 'tabs',
+      groupsWordSingular: 'group',
+      groupsWordPlural: 'groups',
+      openTabsSectionTitle: 'Open tabs',
+      sectionSummary: '{tabs} {tabsWord} across {groups} {groupsWord}',
+      workspacePageHome: 'Home',
+      workspacePageSavedTabs: 'Saved tabs',
+      saveSessionButton: 'Save session',
+      closeAllTabsButton: 'Close all tabs',
+      emptyTabsCount: '0 domains',
+      promptNewGroupName: 'New group name',
+      promptRenameGroupName: 'Rename group',
+      promptTodoTitle: 'Todo title',
+      promptTodoDetails: 'Todo details (optional)',
+      editTodo: 'Edit todo',
+      deleteTodo: 'Delete todo',
+      todoEditorCreateTitle: 'New todo',
+      todoEditorEditTitle: 'Edit todo',
+      todoTitleLabel: 'Title',
+      todoDescriptionLabel: 'Details',
+      todoEditorTitlePlaceholder: 'What needs attention?',
+      todoEditorDescriptionPlaceholder: 'Add notes, context, or a next step.',
+      todoTitleRequired: 'Add a title before saving.',
+      toastTodoUpdated: 'Todo updated',
+      toastTodoDeleted: 'Todo deleted',
+      toastThemeUpdated: 'Theme updated',
+      toastThemeModeUpdated: 'Appearance mode: {mode}',
+      toastBackgroundCleared: 'Background cleared',
+      toastClosedExtraTabHarborTabs: 'Closed extra Tab Harbor tabs',
+      toastMovedTo: 'Moved to {name}',
+      toastCreatedGroup: 'Created {name}',
+      toastRenamedGroup: 'Renamed to {name}',
+      toastCouldNotCreateGroup: 'Could not create group',
+      toastMovedBackToOriginalGroup: 'Moved back to original group',
+      toastPinnedOrder: 'Pinned current order',
+      toastPinOrderOff: 'Pin order turned off',
+      toastTabClosed: 'Tab closed',
+      toastRestoredToOpenTabs: 'Restored to open tabs',
+      toastClosedDuplicatesKeptOne: 'Closed duplicates, kept one copy each',
+      toastAllTabsClosed: 'All tabs closed. Fresh start.',
+      toastQuickTabRemoved: 'Quick tab removed',
+      toastShortcutIconPasted: 'Shortcut icon pasted',
+      toastSvgIconPasted: 'SVG icon pasted',
+      toastClipboardNoImage: 'Clipboard does not contain an image or SVG',
+      toastClipboardUsePasteShortcut: 'Use Cmd/Ctrl+V inside the editor if direct clipboard access is unavailable',
+      toastClipboardTemporaryRef: 'This clipboard image is a temporary file reference. Use Cmd/Ctrl+V instead.',
+      toastShortcutIconUpdated: 'Shortcut icon updated',
+      toastCouldNotUseShortcutImage: 'Could not use shortcut image',
+      toastCouldNotPasteShortcutImage: 'Could not paste shortcut image',
+      toastQuickTabUpdated: 'Quick tab updated',
+      toastQuickTabAdded: 'Quick tab added',
+      toastCouldNotSaveShortcut: 'Could not save shortcut',
+      errorImageCompressionUnavailable: 'Image compression is unavailable',
+      errorPleaseEnterValidUrl: 'Please enter a valid URL',
+      addByUrlTitle: 'Add by URL',
+      shortcutEditTitle: 'Edit shortcut',
+      shortcutAddTitle: 'Add shortcut',
+      shortcutPreviewFallbackLabel: 'Shortcut',
+      shortcutPreviewCustomImageIcon: 'Custom image icon',
+      shortcutPreviewSvgIcon: 'SVG icon',
+      shortcutPreviewEmojiIcon: 'Emoji icon',
+      shortcutPreviewWebsiteIcon: 'Website icon',
+      shortcutPreviewHasCustomIcon: 'Custom icon will replace the site favicon.',
+      shortcutPreviewNoCustomIcon: 'Upload or paste an image, or type an emoji.',
+      closedTabsFromGroup: 'Closed {count} {tabsWord} from {groupLabel}',
+      closedDuplicatesCount: 'Close {count} duplicate{suffix}',
+      duplicatesCount: '{count} duplicate{suffix}',
+      tabsOpenBadge: '{count} {tabsWord} open',
+      tabsLabel: 'tabs',
+      moreCount: '+{count} more',
+      jumpToLabel: 'Jump to {label}',
+      homepagesLabel: 'Homepages',
+      moveToGroup: 'Move to group',
+      renameGroup: 'Rename group',
+      saveButton: 'Save',
+      cancelButton: 'Cancel',
+      noGroupsYet: 'No groups yet',
+      newGroupButton: '+ New group',
+      backToOriginalGroup: 'Back to original group',
+      saveGroupSession: 'Save group session',
+      saveTabSession: 'Save tab session',
+      closeThisTab: 'Close this tab',
+      discardTab: 'Sleep tab',
+      toastTabDiscarded: 'Tab sleeping',
+      toastTabDiscardFailed: 'Failed to sleep tab',
+      toastTabsDiscarded: '{count} tabs sleeping',
+      dragReorderTab: 'Drag to reorder tab',
+      closeGroup: 'Close group',
+      pinnedOrder: 'Pinned order',
+      pinOrder: 'Pin order',
+      deskSettings: 'Desk settings',
+      deskSettingsPanel: 'Desk settings panel',
+      settingsTabAppearance: 'Appearance',
+      settingsTabFeatures: 'Features',
+      appearanceMode: 'Appearance mode',
+      themeModeSystem: 'System',
+      themeModeLight: 'Light',
+      themeModeDark: 'Dark',
+      themeModeFollowingLight: 'Following system: light',
+      themeModeFollowingDark: 'Following system: dark',
+      deskPalette: 'Desk palette',
+      deskBackdrop: 'Desk backdrop',
+      uploadImage: 'Upload image',
+      clearText: 'Clear',
+      surfaceDepth: 'Surface depth',
+      uiScaleLabel: 'Text size',
+      shortcutScaleLabel: 'Shortcut size',
+      hitokotoLabel: 'Hitokoto',
+      editQuickTab: 'Edit quick tab',
+      removeQuickTab: 'Remove quick tab',
+      addQuickTab: 'Add quick tab',
+      addLink: 'Add link',
+      languageLabel: 'Language',
+      languageAuto: 'Auto',
+      languageEnglish: 'English',
+      languageChinese: 'Chinese',
+      chromeTabGroupsLabel: 'Chrome tab groups',
+      toastChromeTabGroupsOn: 'Chrome tab groups on',
+      toastChromeTabGroupsOff: 'Chrome tab groups off',
+      shortcutsLabel: 'Shortcuts',
+      popupShortcutsEmpty: 'No shortcuts yet.',
+      popupTabsEmpty: 'No tabs to display.',
+      ungroupedLabel: 'Ungrouped',
+      closeTabButton: 'Close',
+      popupRefreshLabel: 'Refresh popup content',
+      sessionWordSingular: 'session',
+      sessionWordPlural: 'sessions',
+      restoreSessionButton: 'Restore',
+      savedSessionSettings: 'Session settings',
+      savedSessionSettingsPanel: 'Session settings panel',
+      savedSessionRestoreModeLabel: 'Default open',
+      savedSessionRestoreModeCurrentWindow: 'Current window',
+      savedSessionRestoreModeNewWindow: 'New window',
+      savedSessionNavDisplayModeLabel: 'Top nav display',
+      savedSessionNavDisplayModeIcon: 'Icon',
+      savedSessionNavDisplayModeName: 'Group name',
+      sleepControlLabel: 'Manual sleep control',
+      closeDuplicateNewTabsLabel: 'Auto-close duplicate new tabs',
+      sleepAllTabsButton: 'Sleep all tabs in group',
+      deleteSessionButton: 'Delete session',
+      sessionPickerTitle: 'Choose what to save',
+      sessionPickerClose: 'Close tab picker',
+      sessionPickerModeLabel: 'Save mode',
+      sessionPickerNewSession: 'New group',
+      sessionPickerNewSessionNamePlaceholder: 'Group title (optional)',
+      sessionPickerExistingSession: 'Existing group',
+      sessionPickerTargetSessionLabel: 'Target session',
+      sessionPickerNoSavedSessions: 'No saved sessions yet',
+      sessionPickerAddToExisting: 'Add to session',
+      sessionPickerSaveAndClose: 'Save and close',
+      sessionPickerSelectedCount: '{count} selected',
+      sessionPickerEmpty: 'No restorable tabs in this window.',
+      toastSessionSaved: 'Saved {count} tabs and closed the originals',
+      toastSessionTabsAdded: 'Added {count} tabs to saved session; skipped {skipped} duplicates',
+      toastNoSessionTabsSelected: 'Select at least one tab',
+      toastSessionRestored: 'Restored {count} tabs',
+      toastSavedSessionTabRestored: 'Restored tab',
+      toastSessionDeleted: 'Session deleted',
+      toastSessionActionFailed: 'Could not update saved tabs',
+    },
+    'zh-CN': {
+      emptyTitle: '标签页清零了。',
+      emptySubtitle: '你现在很轻松。',
+      greetingMorning: '早上好',
+      greetingAfternoon: '下午好',
+      greetingEvening: '晚上好',
+      timeJustNow: '刚刚',
+      timeMinAgo: '{count} 分钟前',
+      timeHourAgo: '1 小时前',
+      timeHoursAgo: '{count} 小时前',
+      timeYesterday: '昨天',
+      timeDaysAgo: '{count} 天前',
+      tabsWordSingular: '个标签页',
+      tabsWordPlural: '个标签页',
+      groupsWordSingular: '组',
+      groupsWordPlural: '组',
+      openTabsSectionTitle: '打开的标签页',
+      sectionSummary: '{tabs} 个标签页，分布在 {groups} 个分组中',
+      workspacePageHome: '首页',
+      workspacePageSavedTabs: '已保存的标签页',
+      saveSessionButton: '保存会话',
+      closeAllTabsButton: '关闭全部标签页',
+      emptyTabsCount: '0 个域名分组',
+      promptNewGroupName: '新分组名称',
+      promptRenameGroupName: '重命名分组',
+      promptTodoTitle: '待办标题',
+      promptTodoDetails: '待办详情（可选）',
+      editTodo: '编辑待办',
+      deleteTodo: '删除待办',
+      todoEditorCreateTitle: '新建待办',
+      todoEditorEditTitle: '编辑待办',
+      todoTitleLabel: '标题',
+      todoDescriptionLabel: '详情',
+      todoEditorTitlePlaceholder: '接下来要处理什么？',
+      todoEditorDescriptionPlaceholder: '写下补充信息、背景或下一步。',
+      todoTitleRequired: '请先填写待办标题。',
+      toastTodoUpdated: '待办已更新',
+      toastTodoDeleted: '待办已删除',
+      toastThemeUpdated: '主题已更新',
+      toastThemeModeUpdated: '外观模式：{mode}',
+      toastBackgroundCleared: '背景已清除',
+      toastClosedExtraTabHarborTabs: '已关闭多余的 Tab Harbor 标签页',
+      toastMovedTo: '已移动到 {name}',
+      toastCreatedGroup: '已创建 {name}',
+      toastRenamedGroup: '已重命名为 {name}',
+      toastCouldNotCreateGroup: '无法创建分组',
+      toastMovedBackToOriginalGroup: '已移回原始分组',
+      toastPinnedOrder: '已固定当前顺序',
+      toastPinOrderOff: '已取消固定顺序',
+      toastTabClosed: '标签页已关闭',
+      toastRestoredToOpenTabs: '已恢复到打开标签页',
+      toastClosedDuplicatesKeptOne: '已关闭重复标签页，并为每个链接保留一个',
+      toastAllTabsClosed: '已关闭全部标签页，重新开始吧。',
+      toastQuickTabRemoved: '快捷链接已移除',
+      toastShortcutIconPasted: '已粘贴快捷图标',
+      toastSvgIconPasted: '已粘贴 SVG 图标',
+      toastClipboardNoImage: '剪贴板中没有图片或 SVG',
+      toastClipboardUsePasteShortcut: '若无法直接读取剪贴板，请在编辑器中使用 Cmd/Ctrl+V',
+      toastClipboardTemporaryRef: '当前剪贴板图片是临时文件引用，请改用 Cmd/Ctrl+V。',
+      toastShortcutIconUpdated: '快捷图标已更新',
+      toastCouldNotUseShortcutImage: '无法使用该快捷图片',
+      toastCouldNotPasteShortcutImage: '无法粘贴快捷图片',
+      toastQuickTabUpdated: '快捷链接已更新',
+      toastQuickTabAdded: '快捷链接已添加',
+      toastCouldNotSaveShortcut: '无法保存快捷链接',
+      errorImageCompressionUnavailable: '图片压缩不可用',
+      errorPleaseEnterValidUrl: '请输入有效 URL',
+      addByUrlTitle: '通过 URL 添加',
+      shortcutEditTitle: '编辑快捷链接',
+      shortcutAddTitle: '添加快捷链接',
+      shortcutPreviewFallbackLabel: '快捷链接',
+      shortcutPreviewCustomImageIcon: '自定义图片图标',
+      shortcutPreviewSvgIcon: 'SVG 图标',
+      shortcutPreviewEmojiIcon: 'Emoji 图标',
+      shortcutPreviewWebsiteIcon: '网站图标',
+      shortcutPreviewHasCustomIcon: '自定义图标会替换站点 favicon。',
+      shortcutPreviewNoCustomIcon: '上传或粘贴图片，或输入一个 emoji。',
+      closedTabsFromGroup: '已关闭来自 {groupLabel} 的 {count} 个标签页',
+      closedDuplicatesCount: '关闭 {count} 个重复标签页',
+      duplicatesCount: '{count} 个重复标签页',
+      tabsOpenBadge: '已打开 {count} 个标签页',
+      tabsLabel: '标签页',
+      moreCount: '+ 另外 {count} 个',
+      jumpToLabel: '跳转到 {label}',
+      homepagesLabel: '主页',
+      moveToGroup: '移动到分组',
+      renameGroup: '重命名分组',
+      saveButton: '保存',
+      cancelButton: '取消',
+      noGroupsYet: '还没有分组',
+      newGroupButton: '+ 新建分组',
+      backToOriginalGroup: '移回原始分组',
+      saveGroupSession: '保存分组会话',
+      saveTabSession: '保存标签页会话',
+      closeThisTab: '关闭此标签页',
+      discardTab: '休眠标签页',
+      toastTabDiscarded: '标签页已休眠',
+      toastTabDiscardFailed: '休眠失败',
+      toastTabsDiscarded: '已休眠 {count} 个标签页',
+      dragReorderTab: '拖拽重排标签页',
+      closeGroup: '关闭分组',
+      pinnedOrder: '已固定顺序',
+      pinOrder: '固定顺序',
+      deskSettings: '桌面设置',
+      deskSettingsPanel: '桌面设置面板',
+      settingsTabAppearance: '外观',
+      settingsTabFeatures: '功能',
+      appearanceMode: '外观模式',
+      themeModeSystem: '系统',
+      themeModeLight: '浅色',
+      themeModeDark: '深色',
+      themeModeFollowingLight: '当前跟随：浅色',
+      themeModeFollowingDark: '当前跟随：深色',
+      deskPalette: '桌面配色',
+      deskBackdrop: '桌面背景',
+      uploadImage: '上传图片',
+      clearText: '清除',
+      surfaceDepth: '透明度',
+      uiScaleLabel: '字体大小',
+      shortcutScaleLabel: '快捷链接大小',
+      hitokotoLabel: '一言',
+      editQuickTab: '编辑快捷链接',
+      removeQuickTab: '删除快捷链接',
+      addQuickTab: '添加快捷链接',
+      addLink: '添加链接',
+      languageLabel: '语言',
+      languageAuto: '自动',
+      languageEnglish: 'English',
+      languageChinese: '中文',
+      chromeTabGroupsLabel: 'Chrome 标签组',
+      toastChromeTabGroupsOn: '已启用 同步Chrome标签组',
+      toastChromeTabGroupsOff: '已禁用 同步Chrome标签组',
+      shortcutsLabel: '快捷方式',
+      popupShortcutsEmpty: '还没有快捷方式。',
+      popupTabsEmpty: '没有可显示的网页标签页。',
+      ungroupedLabel: '未分组',
+      closeTabButton: '关闭',
+      popupRefreshLabel: '刷新弹窗内容',
+      sessionWordSingular: '个会话',
+      sessionWordPlural: '个会话',
+      restoreSessionButton: '恢复',
+      savedSessionSettings: '会话设置',
+      savedSessionSettingsPanel: '会话设置面板',
+      savedSessionRestoreModeLabel: '默认打开方式',
+      savedSessionRestoreModeCurrentWindow: '此窗口',
+      savedSessionRestoreModeNewWindow: '新窗口',
+      savedSessionNavDisplayModeLabel: '顶部导航显示',
+      savedSessionNavDisplayModeIcon: '图标',
+      savedSessionNavDisplayModeName: '分组名称',
+      sleepControlLabel: '手动休眠控制',
+      closeDuplicateNewTabsLabel: '自动关闭重复新标签页',
+      sleepAllTabsButton: '休眠组内全部标签页',
+      deleteSessionButton: '删除会话',
+      sessionPickerTitle: '选择要保存的内容',
+      sessionPickerClose: '关闭标签页选择器',
+      sessionPickerModeLabel: '保存方式',
+      sessionPickerNewSession: '新建分组',
+      sessionPickerNewSessionNamePlaceholder: '分组标题（可选）',
+      sessionPickerExistingSession: '已有分组',
+      sessionPickerTargetSessionLabel: '目标会话',
+      sessionPickerNoSavedSessions: '还没有已保存会话',
+      sessionPickerAddToExisting: '加入分组',
+      sessionPickerSaveAndClose: '保存并关闭',
+      sessionPickerSelectedCount: '已选择 {count} 个',
+      sessionPickerEmpty: '当前窗口没有可恢复的网页标签页。',
+      toastSessionSaved: '已保存 {count} 个标签页，并关闭原标签页',
+      toastSessionTabsAdded: '已加入 {count} 个标签页到已保存会话；跳过 {skipped} 个重复项',
+      toastNoSessionTabsSelected: '请至少选择一个标签页',
+      toastSessionRestored: '已恢复 {count} 个标签页',
+      toastSavedSessionTabRestored: '标签页已恢复',
+      toastSessionDeleted: '会话已删除',
+      toastSessionActionFailed: '无法更新已保存标签页',
+    },
+  };
+
+  const i18nTextMapZh = {
+    'Workspace pages': '工作区页面',
+    'Home': '首页',
+    'Saved tabs': '已保存的标签页',
+    'Save current window': '保存当前窗口',
+    'Choose tabs': '选择标签页',
+    'Keep a window or a handpicked set of tabs, then bring it back when the desk is ready.': '保存整个窗口或手动挑选的标签页，等工作台准备好时再恢复。',
+    'Choose what to save': '选择要保存的内容',
+    'Close tab picker': '关闭标签页选择器',
+    'Save and close': '保存并关闭',
+    'Saved sessions': '已保存的会话',
+    'No saved sessions yet. Save a window when you want the memory back without losing the trail.': '还没有已保存会话。需要释放内存但不想丢失线索时，可以保存当前窗口。',
+    'Right now': '此刻',
+    'Search the web': '搜索网络',
+    'Search with your default engine...': '用默认搜索引擎搜索...',
+    'Open todos': '打开待办',
+    'Todos': '待办',
+    'Close right drawer': '关闭右侧抽屉',
+    'Archive': '归档',
+    'Clear archive': '清空归档',
+    'Search todos': '搜索待办',
+    'New todo': '新建待办',
+    'Search todos...': '搜索待办...',
+    'No tasks yet. Capture the next step when something needs a follow-up.': '还没有任务。需要后续跟进时，把下一步记在这里。',
+    'Open tabs': '打开的标签页',
+    'Add open tabs': '现有标签',
+    'Add by URL': '输入网址',
+    'Filter tabs...': '筛选标签页...',
+    'Filter open tabs': '筛选打开的标签页',
+    'Add selected': '添加选中项',
+    'Back': '返回',
+    'Edit shortcut': '编辑快捷链接',
+    'Close shortcut editor': '关闭快捷链接编辑器',
+    'Label': '标签',
+    'Optional shortcut label': '可选的快捷链接标签',
+    'Shortcut icon preview and paste target': '快捷图标预览与粘贴区域',
+    'Shortcut icon source': '快捷图标来源',
+    'Website': '网站',
+    'Emoji': 'Emoji',
+    'Image': '图片',
+    'SVG code': 'SVG 代码',
+    'Upload image': '上传图片',
+    'Paste an image with Cmd/Ctrl+V while the editor is focused.': '编辑器聚焦时可用 Cmd/Ctrl+V 粘贴图片。',
+    'Cancel': '取消',
+    'Save': '保存',
+    'Back to top': '返回顶部',
+    'Desk settings': '桌面设置',
+    'Desk settings panel': '桌面设置面板',
+    'Desk palette': '桌面配色',
+    'Desk backdrop': '桌面背景',
+    'Clear': '清除',
+    'Surface depth': '透明度',
+    'Text size': '字体大小',
+    'Shortcut size': '快捷链接大小',
+    'Pinned order': '已固定顺序',
+    'Pin order': '固定顺序',
+    'Move to group': '移动到分组',
+    'No groups yet': '还没有分组',
+    '+ New group': '+ 新建分组',
+    'Back to original group': '移回原始分组',
+    'Close this tab': '关闭此标签页',
+    'Close group': '关闭分组',
+    'Close extras': '关闭多余标签',
+    'You have': '你当前有',
+    'Tab Harbor tabs open. Keep just this one?': '个 Tab Harbor 标签页已打开。仅保留当前这个？',
+    'Drag to reorder tab': '拖拽重排标签页',
+    'Drag to reorder todo': '拖拽重排待办',
+    'Edit todo': '编辑待办',
+    'Delete todo': '删除待办',
+    'Delete archived todo': '删除已归档待办',
+    'Archive': '归档',
+    'Add link': '添加链接',
+    'Add quick tab': '添加快捷链接',
+    'Edit quick tab': '编辑快捷链接',
+    'Remove quick tab': '删除快捷链接',
+    'Sync Chrome tab groups': '同步Chrome标签组',
+    'Homepages': '主页',
+  };
+
+  function i18nFormat(template, vars = {}) {
+    return String(template || '').replace(/\{(\w+)\}/g, (_, key) => {
+      return Object.prototype.hasOwnProperty.call(vars, key) ? String(vars[key]) : `{${key}}`;
+    });
+  }
+
+  function i18nT(key, vars = {}) {
+    const bundle = i18nMessages[i18nLocale] || i18nMessages.en;
+    const fallback = i18nMessages.en || {};
+    const template = Object.prototype.hasOwnProperty.call(bundle, key)
+      ? bundle[key]
+      : fallback[key];
+    if (template == null) return key;
+    return i18nFormat(template, vars);
+  }
+
+  function i18nLocalizeText(input) {
+    const text = String(input == null ? '' : input);
+    if (i18nLocale !== 'zh-CN') return text;
+
+    if (!text.trim()) return text;
+
+    const leading = text.match(/^\s*/)?.[0] || '';
+    const trailing = text.match(/\s*$/)?.[0] || '';
+    const core = text.trim();
+
+    if (Object.prototype.hasOwnProperty.call(i18nTextMapZh, core)) {
+      return `${leading}${i18nTextMapZh[core]}${trailing}`;
+    }
+
+    let translated = core;
+
+    translated = translated
+      .replace(/^\+(\d+) more$/i, (_, count) => i18nT('moreCount', { count }))
+      .replace(/^(\d+) tabs? open$/i, (_, count) => i18nT('tabsOpenBadge', { count }))
+      .replace(/^(\d+) duplicate(?:s)?$/i, (_, count) => i18nT('duplicatesCount', { count }))
+      .replace(/^Close (\d+) duplicate(?:s)?$/i, (_, count) => i18nT('closedDuplicatesCount', { count }))
+      .replace(/^Created (.+)$/i, (_, rest) => `创建于 ${rest}`);
+
+    if (translated !== core) {
+      return `${leading}${translated}${trailing}`;
+    }
+
+    return text;
+  }
+
+  function i18nApplyToElement(el) {
+    if (!(el instanceof HTMLElement)) return;
+
+    if (el.dataset.i18n) {
+      const translated = i18nT(el.dataset.i18n);
+      if (el.textContent !== translated) {
+        el.textContent = translated;
+      }
+    }
+    if (el.dataset.i18nPlaceholder) {
+      const translated = i18nT(el.dataset.i18nPlaceholder);
+      if (el.getAttribute('placeholder') !== translated) {
+        el.setAttribute('placeholder', translated);
+      }
+    }
+    if (el.dataset.i18nAriaLabel) {
+      const translated = i18nT(el.dataset.i18nAriaLabel);
+      if (el.getAttribute('aria-label') !== translated) {
+        el.setAttribute('aria-label', translated);
+      }
+    }
+    if (el.dataset.i18nTitle) {
+      const translated = i18nT(el.dataset.i18nTitle);
+      if (el.getAttribute('title') !== translated) {
+        el.setAttribute('title', translated);
+      }
+    }
+    if (el.dataset.i18nTooltip) {
+      const translated = i18nT(el.dataset.i18nTooltip);
+      if (el.getAttribute('data-tooltip') !== translated) {
+        el.setAttribute('data-tooltip', translated);
+      }
+    }
+
+    const attrNames = ['aria-label', 'title', 'placeholder', 'data-tooltip'];
+    attrNames.forEach(attr => {
+      const current = el.getAttribute(attr);
+      if (!current) return;
+      const localized = i18nLocalizeText(current);
+      if (localized !== current) {
+        el.setAttribute(attr, localized);
+      }
+    });
+  }
+
+  function i18nLocalizeTextNodes(rootNode) {
+    if (i18nLocale !== 'zh-CN') return;
+    const root = rootNode || document.body;
+    if (!root) return;
+
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    let current = walker.nextNode();
+    while (current) {
+      nodes.push(current);
+      current = walker.nextNode();
+    }
+
+    nodes.forEach(textNode => {
+      const nextValue = i18nLocalizeText(textNode.nodeValue || '');
+      if (nextValue !== textNode.nodeValue) {
+        textNode.nodeValue = nextValue;
+      }
+    });
+  }
+
+  function i18nApplyDomTranslations(rootNode = document) {
+    const root = rootNode && rootNode.querySelectorAll ? rootNode : document;
+    const candidates = root.querySelectorAll
+      ? root.querySelectorAll('[data-i18n],[data-i18n-placeholder],[data-i18n-aria-label],[data-i18n-title],[data-i18n-tooltip], [aria-label], [title], [placeholder], [data-tooltip]')
+      : [];
+
+    candidates.forEach(i18nApplyToElement);
+    if (root instanceof HTMLElement || root === document || root === document.body) {
+      i18nLocalizeTextNodes(root === document ? document.body : root);
+    }
+
+    if (document?.documentElement) {
+      document.documentElement.lang = i18nLocale === 'zh-CN' ? 'zh-CN' : 'en';
+    }
+  }
+
+  async function loadLanguagePreference() {
+    if (!globalScope.chrome?.storage?.local?.get) {
+      i18nLanguagePreference = 'auto';
+      i18nLocale = resolveLocaleByPreference(i18nLanguagePreference);
+      return i18nLanguagePreference;
+    }
+
+    try {
+      const stored = await globalScope.chrome.storage.local.get(LANGUAGE_PREFERENCE_KEY);
+      i18nLanguagePreference = normalizeLanguagePreference(stored[LANGUAGE_PREFERENCE_KEY]);
+      i18nLocale = resolveLocaleByPreference(i18nLanguagePreference);
+      return i18nLanguagePreference;
+    } catch {
+      i18nLanguagePreference = 'auto';
+      i18nLocale = resolveLocaleByPreference(i18nLanguagePreference);
+      return i18nLanguagePreference;
+    }
+  }
+
+  async function setLanguagePreference(preference, { persist = true, reload = false } = {}) {
+    i18nLanguagePreference = normalizeLanguagePreference(preference);
+    i18nLocale = resolveLocaleByPreference(i18nLanguagePreference);
+
+    if (persist && globalScope.chrome?.storage?.local?.set) {
+      await globalScope.chrome.storage.local.set({
+        [LANGUAGE_PREFERENCE_KEY]: i18nLanguagePreference,
+      });
+    }
+
+    if (reload) {
+      globalScope.location?.reload?.();
+      return i18nLanguagePreference;
+    }
+
+    i18nApplyDomTranslations(document);
+    return i18nLanguagePreference;
+  }
+
+  function getLanguagePreference() {
+    return i18nLanguagePreference;
+  }
+
+  function i18nObserve() {
+    if (!document?.body || i18nLocale !== 'zh-CN') return;
+
+    let scheduled = false;
+    const scheduleApply = () => {
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(() => {
+        scheduled = false;
+        i18nApplyDomTranslations(document.body);
+      });
+    };
+
+    const observer = new MutationObserver(scheduleApply);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ['aria-label', 'title', 'placeholder', 'data-tooltip'],
+    });
+  }
+
+  const waitForDomReady = () => {
+    if (document.readyState !== 'loading') return Promise.resolve();
+    return new Promise(resolve => {
+      document.addEventListener('DOMContentLoaded', resolve, { once: true });
+    });
+  };
+
+  const i18nReady = (async () => {
+    await loadLanguagePreference();
+    await waitForDomReady();
+    i18nApplyDomTranslations(document);
+    i18nObserve();
+  })();
+
+  globalScope.TabHarborI18n = {
+    get locale() {
+      return i18nLocale;
+    },
+    get isZh() {
+      return i18nLocale === 'zh-CN';
+    },
+    t: i18nT,
+    localizeText: i18nLocalizeText,
+    applyDomTranslations: i18nApplyDomTranslations,
+    getLanguagePreference,
+    setLanguagePreference,
+    ready: i18nReady,
+  };
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/icon-utils.js b/extension/icon-utils.js
new file mode 100644
index 0000000..c9d2ebc
--- /dev/null
+++ b/extension/icon-utils.js
@@ -0,0 +1,230 @@
+'use strict';
+
+(function attachIconUtils(globalScope) {
+  const MULTI_PART_SUFFIXES = new Set([
+    'ac.cn',
+    'ac.jp',
+    'ac.uk',
+    'co.jp',
+    'co.nz',
+    'co.uk',
+    'com.au',
+    'com.br',
+    'com.cn',
+    'com.hk',
+    'com.sg',
+    'edu.cn',
+    'gov.cn',
+    'gov.uk',
+    'net.au',
+    'net.cn',
+    'org.au',
+    'org.cn',
+    'org.uk',
+  ]);
+  const MULTI_TENANT_HOST_SUFFIXES = [
+    'blogspot.com',
+    'github.io',
+    'notion.site',
+    'substack.com',
+    'vercel.app',
+    'wordpress.com',
+  ];
+
+  function getHostname(url) {
+    if (!url) return '';
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return '';
+    }
+  }
+
+  function getPageOriginFaviconUrl(url = '') {
+    if (!url) return '';
+    try {
+      const parsed = new URL(url);
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return '';
+      return `${parsed.origin}/favicon.ico`;
+    } catch {
+      return '';
+    }
+  }
+
+  function isIpAddress(hostname = '') {
+    return /^\d{1,3}(?:\.\d{1,3}){3}$/.test(String(hostname || ''));
+  }
+
+  function getPrimaryDomain(hostname = '') {
+    const cleanHostname = String(hostname || '').trim().replace(/^www\./, '').toLowerCase();
+    if (!cleanHostname || cleanHostname === 'localhost' || isIpAddress(cleanHostname)) return cleanHostname;
+
+    if (MULTI_TENANT_HOST_SUFFIXES.some(suffix => cleanHostname.endsWith(`.${suffix}`))) {
+      return cleanHostname;
+    }
+
+    const parts = cleanHostname.split('.').filter(Boolean);
+    if (parts.length <= 2) return cleanHostname;
+
+    const trailingPair = parts.slice(-2).join('.');
+    if (MULTI_PART_SUFFIXES.has(trailingPair) && parts.length >= 3) {
+      return parts.slice(-3).join('.');
+    }
+
+    return parts.slice(-2).join('.');
+  }
+
+  function getGoogleFaviconUrl(hostname, size = 16) {
+    if (!hostname) return '';
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=${size}`;
+  }
+
+  function getFaviconUrl(input) {
+    const rawUrl = typeof input === 'string' ? input : (input?.domain ?? '');
+    if (!rawUrl) return { url: '', source: '', fallback: '' };
+
+    const size = typeof input === 'string' ? 128 : (input?.size ?? 128);
+
+    let protocol, hostname, pageUrl, fallbackOrigin;
+    try {
+      const parsed = new URL(rawUrl);
+      protocol = parsed.protocol;
+      hostname = parsed.hostname;
+      pageUrl = rawUrl;
+      fallbackOrigin = parsed.origin;
+    } catch {
+      if (/^[a-zA-Z0-9.-]+$/.test(rawUrl) && rawUrl.includes('.')) {
+        protocol = 'https:';
+        hostname = rawUrl;
+        pageUrl = `https://${rawUrl}`;
+        fallbackOrigin = pageUrl;
+      } else {
+        return { url: '', source: '', fallback: '' };
+      }
+    }
+
+    if (protocol !== 'http:' && protocol !== 'https:') {
+      return { url: '', source: '', fallback: '' };
+    }
+
+    const faviconBase = (typeof chrome !== 'undefined' && chrome.runtime?.getURL)
+      ? chrome.runtime.getURL('_favicon/')
+      : '';
+    const chromeUrl = faviconBase
+      ? `${faviconBase}?pageUrl=${encodeURIComponent(pageUrl)}&size=${size}`
+      : '';
+
+    const fallbackUrl = fallbackOrigin ? `${fallbackOrigin}/favicon.ico` : '';
+
+    return {
+      url: chromeUrl,
+      source: chromeUrl ? 'chrome' : '',
+      fallback: fallbackUrl,
+    };
+  }
+
+  function dedupeIconSources(sources = []) {
+    const seen = new Set();
+    return sources.filter(source => {
+      const normalized = String(source || '').trim();
+      if (!normalized || seen.has(normalized)) return false;
+      seen.add(normalized);
+      return true;
+    });
+  }
+
+  function isStableIconUrl(url = '') {
+    if (!url) return false;
+    try {
+      const parsed = new URL(url);
+      return parsed.protocol === 'http:' || parsed.protocol === 'https:' || parsed.protocol === 'data:';
+    } catch {
+      return false;
+    }
+  }
+
+  function escapeHtml(value = '') {
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function escapeHtmlAttribute(value = '') {
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function getFallbackLabel(label, hostname = '') {
+    const cleanLabel = (label || '').trim();
+    if (cleanLabel) {
+      const tokens = cleanLabel
+        .split(/[\s./:_-]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map(token => token[0]?.toUpperCase() || '');
+      const joined = tokens.join('');
+      if (joined) return joined;
+    }
+
+    const cleanHost = hostname.replace(/^www\./, '');
+    return (cleanHost.slice(0, 2) || '?').toUpperCase();
+  }
+
+  function getIconSources({ favIconUrl = '', url = '' } = {}, size = 16) {
+    const hostname = getHostname(url);
+    const primaryDomain = getPrimaryDomain(hostname);
+    const faviconData = getFaviconUrl({ domain: url, size });
+    const originFaviconUrl = faviconData.fallback || getPageOriginFaviconUrl(url);
+    const sources = dedupeIconSources([
+      isStableIconUrl(favIconUrl) ? favIconUrl : '',
+      faviconData.url,
+      originFaviconUrl,
+      primaryDomain ? getGoogleFaviconUrl(primaryDomain, size) : '',
+      hostname && hostname !== primaryDomain ? getGoogleFaviconUrl(hostname, size) : '',
+    ]);
+
+    return {
+      hostname,
+      primaryDomain,
+      originFaviconUrl,
+      sources,
+    };
+  }
+
+  function getGroupIcon(group, label, size = 32) {
+    const tabs = group?.tabs || [];
+    const preferredTab = tabs.find(tab => isStableIconUrl(tab?.favIconUrl)) || tabs.find(tab => tab?.url) || tabs[0] || {};
+    const { hostname, sources } = getIconSources(preferredTab, size);
+
+    return {
+      hostname,
+      src: sources[0] || '',
+      fallbackSrc: sources[1] || '',
+      fallbackSources: sources.slice(1),
+      fallbackLabel: getFallbackLabel(label, hostname),
+    };
+  }
+
+  const api = {
+    escapeHtml,
+    escapeHtmlAttribute,
+    getFallbackLabel,
+    getPageOriginFaviconUrl,
+    getGoogleFaviconUrl,
+    getGroupIcon,
+    getHostname,
+    getPrimaryDomain,
+    getFaviconUrl,
+    getIconSources,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutIconUtils = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/icon-utils.test.js b/extension/icon-utils.test.js
new file mode 100644
index 0000000..905bb2b
--- /dev/null
+++ b/extension/icon-utils.test.js
@@ -0,0 +1,191 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  escapeHtmlAttribute,
+  getFallbackLabel,
+  getPageOriginFaviconUrl,
+  getGoogleFaviconUrl,
+  getGroupIcon,
+  getPrimaryDomain,
+  getIconSources,
+  getFaviconUrl,
+} = require('./icon-utils.js');
+
+test('getIconSources prefers real favicon before chrome, origin, and Google fallbacks', () => {
+  const savedChrome = globalThis.chrome;
+  globalThis.chrome = {
+    runtime: {
+      getURL: (path) => `chrome-extension://abc/${path}`,
+    },
+  };
+  try {
+    const iconData = getIconSources({
+      favIconUrl: 'https://example.com/favicon.ico',
+      url: 'https://www.example.com/page',
+    }, 32);
+
+    assert.equal(iconData.hostname, 'www.example.com');
+    assert.equal(iconData.primaryDomain, 'example.com');
+    assert.deepEqual(iconData.sources, [
+      'https://example.com/favicon.ico',
+      'chrome-extension://abc/_favicon/?pageUrl=https%3A%2F%2Fwww.example.com%2Fpage&size=32',
+      'https://www.example.com/favicon.ico',
+      'https://www.google.com/s2/favicons?domain=example.com&sz=32',
+      'https://www.google.com/s2/favicons?domain=www.example.com&sz=32',
+    ]);
+  } finally {
+    if (savedChrome === undefined) {
+      delete globalThis.chrome;
+    } else {
+      globalThis.chrome = savedChrome;
+    }
+  }
+});
+
+test('getGroupIcon falls back through origin and Google sources when tab has no real favicon', () => {
+  const iconData = getGroupIcon({
+    tabs: [{ url: 'https://chatgpt.com/c/test' }],
+  }, 'ChatGPT', 32);
+
+  assert.equal(iconData.src, 'https://chatgpt.com/favicon.ico');
+  assert.equal(iconData.fallbackSrc, 'https://www.google.com/s2/favicons?domain=chatgpt.com&sz=32');
+  assert.deepEqual(iconData.fallbackSources, [
+    'https://www.google.com/s2/favicons?domain=chatgpt.com&sz=32',
+  ]);
+  assert.equal(iconData.fallbackLabel, 'C');
+});
+
+test('getFallbackLabel derives stable initials from labels and hosts', () => {
+  assert.equal(getFallbackLabel('GitHub Issues', 'github.com'), 'GI');
+  assert.equal(getFallbackLabel('', 'www.wikipedia.org'), 'WI');
+  assert.equal(getGoogleFaviconUrl('github.com', 16), 'https://www.google.com/s2/favicons?domain=github.com&sz=16');
+  assert.equal(getPageOriginFaviconUrl('https://www.ict.ac.cn/yjsjy/zsxx/sszs/202605/t20260511_8199682.html'), 'https://www.ict.ac.cn/favicon.ico');
+});
+
+test('getIconSources uses chrome, origin, and Google fallback chain when no real favicon is available', () => {
+  const savedChrome = globalThis.chrome;
+  globalThis.chrome = {
+    runtime: {
+      getURL: (path) => `chrome-extension://abc/${path}`,
+    },
+  };
+  try {
+    const iconData = getIconSources({
+      url: 'https://www.example.com/page',
+    }, 32);
+
+    assert.deepEqual(iconData.sources, [
+      'chrome-extension://abc/_favicon/?pageUrl=https%3A%2F%2Fwww.example.com%2Fpage&size=32',
+      'https://www.example.com/favicon.ico',
+      'https://www.google.com/s2/favicons?domain=example.com&sz=32',
+      'https://www.google.com/s2/favicons?domain=www.example.com&sz=32',
+    ]);
+  } finally {
+    if (savedChrome === undefined) {
+      delete globalThis.chrome;
+    } else {
+      globalThis.chrome = savedChrome;
+    }
+  }
+});
+
+test('getPrimaryDomain collapses regular subdomains but preserves common hosted tenants', () => {
+  assert.equal(getPrimaryDomain('foo.example.com'), 'example.com');
+  assert.equal(getPrimaryDomain('foo.bar.example.co.uk'), 'example.co.uk');
+  assert.equal(getPrimaryDomain('ict.ac.cn'), 'ict.ac.cn');
+  assert.equal(getPrimaryDomain('myproject.github.io'), 'myproject.github.io');
+  assert.equal(getPrimaryDomain('writer.substack.com'), 'writer.substack.com');
+});
+
+test('getIconSources skips unstable browser internal favicon urls but keeps Google fallback URLs', () => {
+  const iconData = getIconSources({
+    favIconUrl: 'chrome://favicon2/?pageUrl=https%3A%2F%2Fwww.ict.ac.cn',
+    url: 'https://www.ict.ac.cn/yjsjy/zsxx/sszs/202605/t20260511_8199682.html',
+  }, 32);
+
+  assert.deepEqual(iconData.sources, [
+    'https://www.ict.ac.cn/favicon.ico',
+    'https://www.google.com/s2/favicons?domain=ict.ac.cn&sz=32',
+    'https://www.google.com/s2/favicons?domain=www.ict.ac.cn&sz=32',
+  ]);
+});
+
+test('getFaviconUrl builds fallback URL from URL string input (no chrome runtime)', () => {
+  const result = getFaviconUrl('https://www.example.com/page');
+  assert.equal(result.source, '');
+  assert.equal(result.url, '');
+  assert.equal(result.fallback, 'https://www.example.com/favicon.ico');
+});
+
+test('getFaviconUrl returns empty result for empty input', () => {
+  const result = getFaviconUrl({});
+  assert.equal(result.url, '');
+  assert.equal(result.source, '');
+  assert.equal(result.fallback, '');
+});
+
+test('getFaviconUrl returns empty result for non-HTTP URL', () => {
+  const result = getFaviconUrl('chrome://extensions/');
+  assert.equal(result.url, '');
+  assert.equal(result.source, '');
+  assert.equal(result.fallback, '');
+});
+
+test('getFaviconUrl builds fallback URL from options object', () => {
+  const result = getFaviconUrl({ domain: 'github.com', size: 64 });
+  assert.equal(result.fallback, 'https://github.com/favicon.ico');
+});
+
+test('getFaviconUrl preserves http protocol and localhost port in fallback URL', () => {
+  const result = getFaviconUrl('http://localhost:3000/app');
+  assert.equal(result.fallback, 'http://localhost:3000/favicon.ico');
+});
+
+test('getFaviconUrl preserves custom https port in fallback URL', () => {
+  const result = getFaviconUrl('https://example.com:8443/path');
+  assert.equal(result.fallback, 'https://example.com:8443/favicon.ico');
+});
+
+test('getFaviconUrl defaults size to 128 for string input', () => {
+  const result = getFaviconUrl('https://example.com');
+  assert.ok(result.url === '' || result.url.includes('size=128'),
+    'Chrome URL should use size=128 when available');
+});
+
+test('getFaviconUrl respects custom size in options', () => {
+  const result = getFaviconUrl({ domain: 'example.com', size: 32 });
+  assert.ok(result.url === '' || result.url.includes('size=32'),
+    'Chrome URL should use custom size when available');
+});
+
+test('getFaviconUrl generates chrome _favicon URL when chrome runtime is available', () => {
+  const savedGetURL = globalThis.chrome?.runtime?.getURL;
+  globalThis.chrome = {
+    runtime: {
+      getURL: (path) => `chrome-extension://abc/${path}`,
+    },
+  };
+  try {
+    const result = getFaviconUrl({ domain: 'https://example.com/path', size: 32 });
+    assert.ok(result.url.startsWith('chrome-extension://abc/_favicon/'), 'Chrome URL should use _favicon path');
+    assert.ok(result.url.includes('pageUrl='), 'Chrome URL should include pageUrl param');
+    assert.ok(result.url.includes('size=32'), 'Chrome URL should include size param');
+    assert.equal(result.fallback, 'https://example.com/favicon.ico');
+  } finally {
+    if (savedGetURL) {
+      globalThis.chrome = { runtime: { getURL: savedGetURL } };
+    } else {
+      delete globalThis.chrome;
+    }
+  }
+});
+
+test('escapeHtmlAttribute protects custom tooltip text', () => {
+  assert.equal(
+    escapeHtmlAttribute('ChatGPT "Projects" & Notes'),
+    'ChatGPT &quot;Projects&quot; &amp; Notes'
+  );
+});
diff --git a/extension/icons/icon.svg b/extension/icons/icon.svg
new file mode 100644
index 0000000..0442e76
--- /dev/null
+++ b/extension/icons/icon.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img" aria-labelledby="title desc">
+  <title id="title">Tab Harbor icon</title>
+  <desc id="desc">A Google-inspired four-color roundel with stacked tabs at the center.</desc>
+
+  <defs>
+    <clipPath id="icon-clip">
+      <circle cx="64" cy="64" r="56"/>
+    </clipPath>
+    <filter id="center-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#1f2a3a" flood-opacity="0.16"/>
+    </filter>
+  </defs>
+
+  <circle cx="64" cy="64" r="58" fill="#ffffff"/>
+  <circle cx="64" cy="64" r="56" fill="#f6f8fc" stroke="#dbe3ee" stroke-width="2"/>
+
+  <g clip-path="url(#icon-clip)">
+    <circle cx="38" cy="38" r="40" fill="#ea4335"/>
+    <circle cx="92" cy="38" r="40" fill="#fbbc04"/>
+    <circle cx="92" cy="90" r="40" fill="#34a853"/>
+    <circle cx="36" cy="92" r="40" fill="#4285f4"/>
+  </g>
+
+  <circle cx="64" cy="64" r="27" fill="#ffffff" filter="url(#center-shadow)"/>
+  <circle cx="64" cy="64" r="26" fill="#ffffff" stroke="#d8e0ee" stroke-width="1.5"/>
+
+  <g transform="translate(64 64)">
+    <rect x="-18" y="-11" width="22" height="16" rx="4" fill="#cfdcf3" stroke="#3a4a62" stroke-width="2.2"/>
+    <path d="M-14 -11h8l3 4h-11a3 3 0 0 0-3 3v-3a4 4 0 0 1 4-4Z" fill="#e8effb"/>
+    <rect x="-4" y="-3" width="22" height="16" rx="4" fill="#3a4a62"/>
+    <path d="M0 -3h8l3 4H0a4 4 0 0 0-4 4V1a4 4 0 0 1 4-4Z" fill="#55657d"/>
+    <rect x="2" y="1" width="10" height="2.5" rx="1.25" fill="#ffffff" opacity="0.96"/>
+    <rect x="2" y="6" width="14" height="2.5" rx="1.25" fill="#dce7f8" opacity="0.92"/>
+  </g>
+</svg>
diff --git a/extension/icons/icon128.png b/extension/icons/icon128.png
new file mode 100644
index 0000000..5b624dd
Binary files /dev/null and b/extension/icons/icon128.png differ
diff --git a/extension/icons/icon16.png b/extension/icons/icon16.png
new file mode 100644
index 0000000..f260627
Binary files /dev/null and b/extension/icons/icon16.png differ
diff --git a/extension/icons/icon48.png b/extension/icons/icon48.png
new file mode 100644
index 0000000..ab6d51d
Binary files /dev/null and b/extension/icons/icon48.png differ
diff --git a/extension/index.html b/extension/index.html
new file mode 100644
index 0000000..b34533f
--- /dev/null
+++ b/extension/index.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tab Harbor</title>
+
+  <!-- Google Fonts: Libre Caslon Display (editorial display) + Public Sans (UI body) -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Public+Sans:wght@400;500;600;700&display=swap"
+    rel="stylesheet">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="container">
+
+    <div class="group-nav group-nav-wide" id="workspaceTopNav" style="display:none"></div>
+
+    <main class="workspace-page is-active" id="homePage" data-workspace-page="home">
+
+    <!-- ================================================================
+       TAB HARBOR DUPES BANNER — appears when you have extra Tab Harbor tabs open
+       Hidden by default; app.js shows it when dupeTabOutCount > 1
+       ================================================================ -->
+    <div class="tab-cleanup-banner" id="tabOutDupeBanner" style="display:none">
+      <div class="tab-cleanup-left">
+        <div class="tab-cleanup-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+          </svg>
+        </div>
+        <div class="tab-cleanup-text">
+          You have <strong id="tabOutDupeCount"></strong> Tab Harbor tabs open. Keep just this one?
+        </div>
+      </div>
+      <button class="tab-cleanup-btn" data-action="close-tabout-dupes">Close extras</button>
+    </div>
+
+    <!-- ================================================================
+       MAIN CONTENT AREA — left column for open tabs, right rail for
+       greeting/date + drawer controls
+       ================================================================ -->
+    <div class="dashboard-columns" id="dashboardColumns">
+
+      <!-- LEFT COLUMN: Open tabs -->
+      <div class="active-section" id="openTabsSection" style="display:none">
+        <div class="section-header">
+          <h2 id="openTabsSectionTitle">Right now</h2>
+          <div class="section-line"></div>
+          <div class="section-count" id="openTabsSectionCount"></div>
+        </div>
+        <div class="missions" id="openTabsMissions"></div>
+      </div>
+
+      <!-- RIGHT RAIL: greeting + date -->
+      <header class="page-header">
+        <div class="header-left">
+          <div class="header-title-row">
+            <!-- "Good afternoon" — written by getGreeting() in app.js -->
+            <h1 id="greeting"></h1>
+            <!-- "Friday, April 4, 2026" — written by getDateDisplay() in app.js -->
+            <div class="date" id="dateDisplay"></div>
+          </div>
+          <div class="hitokoto" id="hitokoto" style="display:none" aria-live="polite" role="note">
+            <span class="hitokoto-text" id="hitokotoText"></span>
+            <span class="hitokoto-from" id="hitokotoFrom"></span>
+          </div>
+          <form class="header-search" id="headerSearchForm">
+            <label class="header-search-label" for="headerSearchInput">Search the web</label>
+            <div class="header-search-shell">
+              <svg class="header-search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.8" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="m21 21-4.35-4.35m1.85-5.15a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
+              </svg>
+              <input class="header-search-input" id="headerSearchInput" type="search" name="q"
+                placeholder="Search with your default engine..." autocomplete="off" spellcheck="false">
+            </div>
+          </form>
+          <section class="quick-tabs" id="quickTabsSection">
+            <div class="quick-tabs-grid" id="quickTabsList"></div>
+          </section>
+        </div>
+      </header>
+
+    </div><!-- end .dashboard-columns -->
+
+    <!-- ================================================================
+       FOOTER — global stats + refresh control
+       ================================================================ -->
+    <footer>
+      <div class="footer-stats">
+        <div class="stat">
+          <div class="stat-num" id="statTabs">—</div>
+          <div class="stat-label">Open tabs</div>
+        </div>
+      </div>
+      <div class="last-refresh">
+        <span class="footer-credit"><a class="footer-credit-link" href="https://github.com/V-IOLE-T/tab-harbor"
+            target="_top">Tab Harbor</a> by <a class="footer-credit-link" href="https://github.com/V-IOLE-T"
+            target="_top">OO</a></span>
+      </div>
+    </footer>
+    </main>
+
+    <main class="workspace-page" id="savedTabsPage" data-workspace-page="saved-tabs" hidden>
+      <div class="dashboard-columns saved-tabs-columns">
+        <section class="active-section saved-sessions-section">
+          <div class="section-header">
+            <h2>Saved sessions</h2>
+            <div class="section-line"></div>
+            <div class="section-count" id="savedSessionsCount"></div>
+          </div>
+          <div class="saved-sessions-list" id="savedSessionsList"></div>
+          <div class="saved-sessions-empty" id="savedSessionsEmpty" hidden>
+            No saved sessions yet. Save a window when you want the memory back without losing the trail.
+          </div>
+        </section>
+        <div class="page-header saved-tabs-header-spacer" aria-hidden="true"></div>
+      </div>
+    </main>
+
+    <div class="drawer-trigger-stack" id="drawerTriggerStack">
+      <button class="deferred-trigger todo-trigger" id="todoTrigger" type="button" aria-expanded="false"
+        aria-controls="drawerColumn" aria-label="Open todos">
+        <svg class="deferred-trigger-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none"
+          aria-hidden="true">
+          <path
+            d="M288.384 173.488a94.208 94.208 0 0 1 93.392-81.488H646.24a94.208 94.208 0 0 1 93.376 81.488h62.176A94.16 94.16 0 0 1 896 267.568V584a32 32 0 1 1-64 0V267.584c0-16.56-13.472-30.08-30.224-30.08H738.24a94.24 94.24 0 0 1-92.016 73.712H381.76a94.24 94.24 0 0 1-92-73.728h-63.552a30.16 30.16 0 0 0-30.224 30.08V841.92c0 16.56 13.472 30.096 30.224 30.096H516a32 32 0 1 1 0 64H226.224a94.16 94.16 0 0 1-94.224-94.08V267.568c0-52.032 42.24-94.08 94.224-94.08h62.176z m93.392-17.488a30.16 30.16 0 0 0-30.224 30.08v31.04c0 16.56 13.472 30.096 30.24 30.096h264.432a30.16 30.16 0 0 0 30.224-30.08v-31.04c0-16.56-13.472-30.096-30.24-30.096H381.792z"
+            fill="currentColor" />
+          <path
+            d="M472 444a32 32 0 0 1 32-32h236a32 32 0 1 1 0 64H504a32 32 0 0 1-32-32zM472 668a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64h-192a32 32 0 0 1-32-32zM268 396a32 32 0 0 1 32-32h96a32 32 0 0 1 32 32v96a32 32 0 0 1-32 32h-96a32 32 0 0 1-32-32v-96z m64 32v32h32v-32h-32zM268 624a32 32 0 0 1 32-32h96a32 32 0 0 1 32 32v96a32 32 0 0 1-32 32h-96a32 32 0 0 1-32-32v-96z m64 32v32h32v-32h-32zM926.624 660.752a32 32 0 0 1 0 45.248L719.216 913.424a64 64 0 0 1-90.512 0l-85.328-85.344a32 32 0 1 1 45.248-45.248l85.328 85.328 207.424-207.408a32 32 0 0 1 45.248 0z"
+            fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="deferred-overlay" id="deferredOverlay" hidden></div>
+
+    <!-- RIGHT COLUMN: Drawer -->
+    <aside class="deferred-column" id="drawerColumn" style="display:none" aria-hidden="true" role="dialog"
+      aria-modal="false" aria-label="Todos" tabindex="-1">
+      <div class="deferred-shell">
+        <section class="drawer-panel is-active" id="todoPanel" role="tabpanel" aria-label="Todos" tabindex="-1">
+          <div class="section-header deferred-header todo-header">
+            <div class="drawer-title-switch">
+              <button class="drawer-title-btn is-active" type="button" role="tab" aria-selected="true"
+                aria-controls="todoPanel" data-view="todos">Todos</button>
+            </div>
+            <div class="section-line"></div>
+            <div class="section-count" id="todoCount">0</div>
+            <div class="drawer-header-actions todo-header-actions">
+              <button class="drawer-icon-btn" id="todoSearchToggle" type="button" data-action="toggle-todo-search"
+                aria-label="Search todos" aria-expanded="false" aria-controls="todoSearchWrap">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="m21 21-4.35-4.35m1.6-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
+                </svg>
+              </button>
+              <button class="drawer-icon-btn todo-plus-btn" id="todoNewBtn" type="button" data-action="create-todo"
+                aria-label="New todo">+</button>
+              <button class="drawer-icon-btn" type="button" data-action="close-drawer" aria-label="Close right drawer">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="todo-search-wrap" id="todoSearchWrap" style="display:none">
+            <input type="search" class="archive-search" id="todoSearchInput" placeholder="Search todos..."
+              aria-label="Search todos">
+          </div>
+
+          <div class="todo-detail-view" id="todoDetailView" style="display:none"></div>
+          <div class="todo-list" id="todoList"></div>
+          <div class="deferred-empty" id="todoEmpty" style="display:none">No tasks yet. Capture the next step when
+            something needs a follow-up.</div>
+
+          <div class="deferred-archive" id="todoArchive" style="display:none">
+            <div class="archive-header-row">
+              <button class="archive-toggle" id="todoArchiveToggle" type="button" aria-expanded="false"
+                aria-controls="todoArchiveBody">
+                <svg class="archive-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                  stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+                Archive
+                <span class="archive-count" id="todoArchiveCount"></span>
+              </button>
+              <button class="archive-clear-btn" id="clearTodoArchiveBtn" type="button"
+                data-action="clear-todo-archive">Clear archive</button>
+            </div>
+            <div class="archive-body" id="todoArchiveBody" style="display:none" hidden>
+              <div class="archive-list" id="todoArchiveList"></div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </aside>
+
+  </div><!-- end .container -->
+
+  <!-- ================================================================
+     TOAST — floats above everything, used for action confirmations
+     Hidden by default via CSS (opacity:0, translateY)
+     ================================================================ -->
+  <div class="toast" id="toast">
+    <!-- Checkmark circle icon (Heroicons outline) -->
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round"
+        d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </svg>
+    <span id="toastText"></span>
+  </div>
+
+  <div class="shortcut-editor-backdrop" id="shortcutEditorBackdrop" hidden></div>
+  <div class="shortcut-editor" id="shortcutEditor" hidden role="dialog" aria-modal="true"
+    aria-labelledby="shortcutEditorTitle">
+    <form class="shortcut-editor-form" id="shortcutEditorForm">
+      <div class="shortcut-editor-header">
+        <div class="shortcut-editor-header-main">
+          <button class="shortcut-editor-back" id="shortcutEditorBack" type="button"
+            data-action="return-to-tab-picker" aria-label="Back" hidden>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+              stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
+            </svg>
+          </button>
+          <h2 class="shortcut-editor-title" id="shortcutEditorTitle">Edit shortcut</h2>
+        </div>
+        <button class="shortcut-editor-close" type="button" data-action="close-shortcut-editor"
+          aria-label="Close shortcut editor">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <label class="shortcut-editor-field">
+        <span class="shortcut-editor-label">URL</span>
+        <input class="shortcut-editor-input" id="shortcutEditorUrl" name="url" type="url"
+          placeholder="https://example.com" required>
+      </label>
+
+      <label class="shortcut-editor-field">
+        <span class="shortcut-editor-label">Label</span>
+        <input class="shortcut-editor-input" id="shortcutEditorLabel" name="label" type="text"
+          placeholder="Optional shortcut label">
+      </label>
+
+      <div class="shortcut-editor-section">
+        <div class="shortcut-editor-source-row">
+          <div class="shortcut-editor-preview" id="shortcutEditorPreview" tabindex="0"
+            aria-label="Shortcut icon preview and paste target">
+            <span class="shortcut-editor-preview-fallback" id="shortcutEditorPreviewFallback">A</span>
+          </div>
+          <div class="shortcut-editor-source-segments" id="shortcutEditorSource" role="tablist"
+            aria-label="Shortcut icon source">
+            <button class="shortcut-editor-source-chip" type="button" data-action="select-shortcut-source"
+              data-source="site" aria-pressed="true">Website</button>
+            <button class="shortcut-editor-source-chip" type="button" data-action="select-shortcut-source"
+              data-source="glyph" aria-pressed="false">Emoji</button>
+            <button class="shortcut-editor-source-chip" type="button" data-action="select-shortcut-source"
+              data-source="image" aria-pressed="false">Image</button>
+            <button class="shortcut-editor-source-chip" type="button" data-action="select-shortcut-source"
+              data-source="svg" aria-pressed="false">SVG</button>
+          </div>
+        </div>
+
+        <div class="shortcut-editor-mode-stage">
+          <div class="shortcut-editor-mode-group" id="shortcutEditorSiteGroup"></div>
+
+          <div class="shortcut-editor-field shortcut-editor-mode-group" id="shortcutEditorEmojiGroup">
+            <label class="shortcut-editor-inline-field" for="shortcutEditorEmoji">
+              <span class="shortcut-editor-label">Emoji</span>
+              <input class="shortcut-editor-input shortcut-editor-emoji-input" id="shortcutEditorEmoji" name="emoji"
+                type="text" inputmode="text" placeholder="✨" maxlength="4">
+            </label>
+          </div>
+
+          <div class="shortcut-editor-mode-group" id="shortcutEditorImageGroup">
+            <div class="shortcut-editor-actions-row">
+              <button class="theme-menu-action" type="button" data-action="upload-shortcut-icon">Upload image</button>
+            </div>
+            <div class="shortcut-editor-mode-note">Paste an image with Cmd/Ctrl+V while the editor is focused.</div>
+          </div>
+
+          <label class="shortcut-editor-field shortcut-editor-mode-group" id="shortcutEditorSvgGroup">
+            <span class="shortcut-editor-label">SVG code</span>
+            <textarea class="shortcut-editor-input shortcut-editor-textarea" id="shortcutEditorSvgCode" name="svgCode"
+              rows="4" placeholder="<svg ...>...</svg>"></textarea>
+          </label>
+        </div>
+
+        <input type="file" id="shortcutIconFileInput" accept="image/*" hidden>
+      </div>
+
+      <div class="shortcut-editor-footer">
+        <button class="theme-menu-action is-secondary" type="button" data-action="close-shortcut-editor">Cancel</button>
+        <button class="theme-menu-action" type="submit">Save</button>
+      </div>
+    </form>
+  </div>
+
+  <div class="tab-picker-backdrop" id="tabPickerBackdrop" hidden></div>
+  <div class="tab-picker" id="tabPicker" hidden role="dialog" aria-label="Add open tabs to quick shortcuts"
+    aria-modal="true">
+    <div class="tab-picker-header">
+      <div class="drawer-title-switch tab-picker-view-switch" id="tabPickerViewSwitch" role="tablist"
+        aria-label="Add shortcut views">
+        <button class="drawer-title-btn is-active" id="tabPickerTabsTab" type="button" role="tab"
+          aria-selected="true" aria-controls="tabPickerTabsPane" data-action="switch-tab-picker-view"
+          data-view="tabs">Add open tabs</button>
+        <button class="drawer-title-btn" id="tabPickerUrlTab" type="button" role="tab" aria-selected="false"
+          aria-controls="tabPickerUrlPane" data-action="switch-tab-picker-view" data-view="url">Add by URL</button>
+      </div>
+      <button class="tab-picker-close" type="button" data-action="close-tab-picker" aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <div class="tab-picker-search-wrap" id="tabPickerSearchWrap">
+      <svg class="tab-picker-search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+        stroke-width="1.8" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="m21 21-4.35-4.35m1.6-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
+      </svg>
+      <input class="tab-picker-search" id="tabPickerSearch" type="search" placeholder="Filter tabs..."
+        autocomplete="off" aria-label="Filter open tabs">
+    </div>
+    <div class="tab-picker-list" id="tabPickerList"></div>
+    <div class="tab-picker-editor-host" id="tabPickerEditorHost" hidden></div>
+    <div class="tab-picker-footer" id="tabPickerFooter" hidden>
+      <span class="tab-picker-footer-count" id="tabPickerFooterCount"></span>
+      <button class="tab-picker-footer-add" type="button" data-action="add-selected-tabs">Add selected</button>
+      <button class="tab-picker-footer-clear" type="button" data-action="clear-tab-picker-selection">Clear</button>
+    </div>
+  </div>
+
+  <button class="back-to-top" id="backToTopBtn" type="button" aria-label="Back to top" title="Back to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+      aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+    </svg>
+  </button>
+
+  <!-- Checked-in defaults + optional local overrides -->
+  <script src="config.js"></script>
+  <script src="config-loader.js"></script>
+
+  <!-- Shared icon helpers — real favicons first, then graceful fallbacks -->
+  <script src="icon-utils.js"></script>
+  <script src="session-groups.js"></script>
+  <script src="group-order.js"></script>
+  <script src="deferred-trigger-position.js"></script>
+  <script src="todos-store.js"></script>
+  <script src="list-order.js"></script>
+  <script src="background-image.js"></script>
+  <script src="i18n.js"></script>
+  <script src="ui-helpers.js"></script>
+  <script src="tab-url-utils.js"></script>
+  <script src="tab-sessions.js"></script>
+  <script src="session-manager.js"></script>
+  <script src="theme-controls.js"></script>
+  <script src="drawer-manager.js"></script>
+  <script src="chrome-tab-groups-import.js"></script>
+  <script src="chrome-tab-groups-sync.js"></script>
+  <script src="dashboard-runtime.js"></script>
+
+  <!-- Main dashboard logic — loads last so the DOM is ready -->
+  <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/extension/list-order.js b/extension/list-order.js
new file mode 100644
index 0000000..5a28042
--- /dev/null
+++ b/extension/list-order.js
@@ -0,0 +1,64 @@
+'use strict';
+
+(function attachListOrder(globalScope) {
+  function normalizeOrderIds(orderIds) {
+    if (!Array.isArray(orderIds)) return [];
+    return orderIds.map(id => String(id)).filter(Boolean);
+  }
+
+  function createReorderedIds(currentIds, draggedId, targetId, placeAfter = false) {
+    const ids = normalizeOrderIds(currentIds);
+    if (!draggedId || !targetId || draggedId === targetId) return ids;
+
+    const draggedKey = String(draggedId);
+    const targetKey = String(targetId);
+    const draggedIndex = ids.indexOf(draggedKey);
+    const targetIndex = ids.indexOf(targetKey);
+    if (draggedIndex === -1 || targetIndex === -1) return ids;
+
+    const nextIds = ids.slice();
+    nextIds.splice(draggedIndex, 1);
+
+    const insertIndex = placeAfter
+      ? targetIndex > draggedIndex ? targetIndex : targetIndex + 1
+      : targetIndex < draggedIndex ? targetIndex : targetIndex - 1;
+
+    nextIds.splice(Math.max(0, insertIndex), 0, draggedKey);
+    return nextIds;
+  }
+
+  function reorderSubsetByIds(items, orderIds, includeItem) {
+    if (!Array.isArray(items)) return [];
+
+    const list = items.slice();
+    const shouldInclude = typeof includeItem === 'function' ? includeItem : () => true;
+    const subset = list.filter(shouldInclude);
+    const normalizedOrder = normalizeOrderIds(orderIds);
+
+    if (!subset.length || subset.length !== normalizedOrder.length) return list;
+
+    const subsetMap = new Map(subset.map(item => [String(item.id), item]));
+    if (subsetMap.size !== subset.length) return list;
+    if (normalizedOrder.some(id => !subsetMap.has(id))) return list;
+
+    let nextIndex = 0;
+    return list.map(item => {
+      if (!shouldInclude(item)) return item;
+      const reorderedItem = subsetMap.get(normalizedOrder[nextIndex]);
+      nextIndex += 1;
+      return reorderedItem || item;
+    });
+  }
+
+  const api = {
+    createReorderedIds,
+    normalizeOrderIds,
+    reorderSubsetByIds,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutListOrder = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/list-order.test.js b/extension/list-order.test.js
new file mode 100644
index 0000000..134f161
--- /dev/null
+++ b/extension/list-order.test.js
@@ -0,0 +1,61 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createReorderedIds,
+  reorderSubsetByIds,
+} = require('./list-order.js');
+
+test('createReorderedIds moves dragged shortcut before target shortcut', () => {
+  const reordered = createReorderedIds(
+    ['shortcut-1', 'shortcut-2', 'shortcut-3'],
+    'shortcut-3',
+    'shortcut-1'
+  );
+
+  assert.deepEqual(reordered, ['shortcut-3', 'shortcut-1', 'shortcut-2']);
+});
+
+test('createReorderedIds can place dragged shortcut after target shortcut', () => {
+  const reordered = createReorderedIds(
+    ['shortcut-1', 'shortcut-2', 'shortcut-3'],
+    'shortcut-1',
+    'shortcut-2',
+    true
+  );
+
+  assert.deepEqual(reordered, ['shortcut-2', 'shortcut-1', 'shortcut-3']);
+});
+
+test('reorderSubsetByIds reorders only the included active subset', () => {
+  const items = [
+    { id: 'saved-1', completed: false, dismissed: false },
+    { id: 'saved-2', completed: true, dismissed: false },
+    { id: 'saved-3', completed: false, dismissed: false },
+  ];
+
+  const reordered = reorderSubsetByIds(
+    items,
+    ['saved-3', 'saved-1'],
+    item => !item.completed && !item.dismissed
+  );
+
+  assert.deepEqual(reordered.map(item => item.id), ['saved-3', 'saved-2', 'saved-1']);
+});
+
+test('reorderSubsetByIds leaves the list unchanged when ids are incomplete', () => {
+  const items = [
+    { id: 'todo-1', completed: false, dismissed: false },
+    { id: 'todo-2', completed: false, dismissed: false },
+  ];
+
+  const reordered = reorderSubsetByIds(
+    items,
+    ['todo-2'],
+    item => !item.completed && !item.dismissed
+  );
+
+  assert.deepEqual(reordered, items);
+});
diff --git a/extension/manifest-sync.test.js b/extension/manifest-sync.test.js
new file mode 100644
index 0000000..c8b8bc6
--- /dev/null
+++ b/extension/manifest-sync.test.js
@@ -0,0 +1,98 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const extensionManifestPath = path.join(__dirname, 'manifest.json');
+const rootManifestPath = path.join(__dirname, '..', 'manifest.json');
+
+const extensionManifest = JSON.parse(fs.readFileSync(extensionManifestPath, 'utf8'));
+const rootManifest = JSON.parse(fs.readFileSync(rootManifestPath, 'utf8'));
+
+const PATH_PREFIX = 'extension/';
+
+const SHARED_LITERAL_FIELDS = [
+  'manifest_version',
+  'name',
+  'version',
+  'description',
+];
+
+test('root manifest mirrors extension manifest on literal metadata fields', () => {
+  for (const field of SHARED_LITERAL_FIELDS) {
+    assert.deepEqual(
+      rootManifest[field],
+      extensionManifest[field],
+      `manifest field "${field}" must match between extension/manifest.json and root manifest.json`,
+    );
+  }
+});
+
+test('root manifest mirrors extension manifest on permissions array', () => {
+  assert.deepEqual(
+    rootManifest.permissions,
+    extensionManifest.permissions,
+    'permissions array must match between extension/manifest.json and root manifest.json',
+  );
+});
+
+test('root manifest mirrors extension manifest on icon sizes', () => {
+  assert.deepEqual(
+    Object.keys(rootManifest.icons || {}).sort(),
+    Object.keys(extensionManifest.icons || {}).sort(),
+    'icons sizes must match between extension/manifest.json and root manifest.json',
+  );
+  assert.deepEqual(
+    Object.keys(rootManifest.action?.default_icon || {}).sort(),
+    Object.keys(extensionManifest.action?.default_icon || {}).sort(),
+    'action.default_icon sizes must match between extension/manifest.json and root manifest.json',
+  );
+});
+
+test('root manifest paths prefix extension manifest paths with "extension/"', () => {
+  const pathPairs = [
+    {
+      label: 'chrome_url_overrides.newtab',
+      ext: extensionManifest.chrome_url_overrides?.newtab,
+      root: rootManifest.chrome_url_overrides?.newtab,
+    },
+    {
+      label: 'background.service_worker',
+      ext: extensionManifest.background?.service_worker,
+      root: rootManifest.background?.service_worker,
+    },
+    {
+      label: 'action.default_popup',
+      ext: extensionManifest.action?.default_popup,
+      root: rootManifest.action?.default_popup,
+    },
+  ];
+
+  for (const size of Object.keys(extensionManifest.icons || {})) {
+    pathPairs.push({
+      label: `icons.${size}`,
+      ext: extensionManifest.icons[size],
+      root: rootManifest.icons?.[size],
+    });
+  }
+
+  for (const size of Object.keys(extensionManifest.action?.default_icon || {})) {
+    pathPairs.push({
+      label: `action.default_icon.${size}`,
+      ext: extensionManifest.action.default_icon[size],
+      root: rootManifest.action?.default_icon?.[size],
+    });
+  }
+
+  for (const { label, ext, root } of pathPairs) {
+    assert.equal(typeof ext, 'string', `${label} missing in extension manifest`);
+    assert.equal(typeof root, 'string', `${label} missing in root manifest`);
+    assert.equal(
+      root,
+      `${PATH_PREFIX}${ext}`,
+      `root manifest ${label} must equal "${PATH_PREFIX}${ext}" to stay in sync with extension manifest`,
+    );
+  }
+});
diff --git a/extension/manifest.json b/extension/manifest.json
new file mode 100644
index 0000000..bf6a807
--- /dev/null
+++ b/extension/manifest.json
@@ -0,0 +1,22 @@
+{
+  "manifest_version": 3,
+  "name": "Tab Harbor",
+  "version": "1.1.1",
+  "description": "A new tab dashboard for organizing open tabs, quick links, todos, and saved tab sessions in one calm workspace.",
+  "permissions": ["tabs", "storage", "search", "clipboardRead", "tabGroups", "favicon"],
+  "chrome_url_overrides": { "newtab": "index.html" },
+  "background": { "service_worker": "background.js" },
+  "action": {
+    "default_title": "Tab Harbor",
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}
diff --git a/extension/popup/popup.css b/extension/popup/popup.css
new file mode 100644
index 0000000..f467a03
--- /dev/null
+++ b/extension/popup/popup.css
@@ -0,0 +1,593 @@
+/* ============================================================
+   Popup — Tab Harbor Extension
+   Design: Calm, literary, composed — paper workspace aesthetic
+   ============================================================ */
+
+html, body {
+  width: 100%;
+  min-width: 380px;
+  max-width: 420px;
+  height: fit-content;
+  margin: 0;
+  padding: 0;
+  /* subtle paper grain */
+  background: var(--paper);
+}
+
+button {
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+body.popup-shell {
+  color: var(--ink);
+  box-shadow:
+    0 2px 8px var(--shadow),
+    0 12px 40px rgba(26, 22, 19, 0.10);
+}
+
+/* ── App Container ─────────────────────────────────────────── */
+.popup-app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 14px 16px;
+  gap: 12px;
+}
+
+/* ── Header ────────────────────────────────────────────────── */
+.popup-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.popup-view-switch {
+  flex: 1;
+  display: flex;
+  background: var(--warm-gray);
+  border-radius: 10px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.popup-view-switch .drawer-title-btn {
+  flex: 1 1 0;
+  padding: 6px 10px;
+  border-radius: 7px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--muted);
+  letter-spacing: 0.01em;
+  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
+  border: 1px solid transparent;
+}
+
+.popup-view-switch .drawer-title-btn:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--card-bg) 55%, transparent);
+}
+
+.popup-view-switch .drawer-title-btn.is-active {
+  background: var(--card-bg);
+  color: var(--ink);
+  font-weight: 600;
+  box-shadow:
+    0 1px 3px var(--shadow),
+    0 1px 1px rgba(26, 22, 19, 0.04);
+  border-color: color-mix(in srgb, var(--warm-gray) 70%, transparent);
+}
+
+.popup-refresh-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+  transition: background 150ms ease, color 150ms ease, transform 100ms ease;
+  flex-shrink: 0;
+}
+
+.popup-refresh-btn:hover {
+  background: var(--workspace-chip-bg);
+  color: var(--workspace-accent);
+}
+
+.popup-refresh-btn:hover .btn-svg {
+  transform: rotate(90deg);
+  transition: all 150ms ease;
+}
+
+.popup-refresh-btn:active .btn-svg {
+  transform: rotate(180deg);
+  transition: all 150ms ease;
+}
+
+
+
+.popup-refresh-btn:active {
+  transform: scale(0.9);
+}
+
+/* ── Panel ──────────────────────────────────────────────────── */
+.popup-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  gap: 10px;
+}
+
+.popup-panel[hidden] {
+  display: none !important;
+}
+
+.popup-panel-title-row {
+  margin: 0 12px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.popup-panel-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+
+.popup-panel-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  background: var(--warm-gray);
+  padding: 2px 7px;
+  border-radius: 999px;
+  letter-spacing: 0.03em;
+}
+
+/* ── Shortcuts Grid ─────────────────────────────────────────── */
+.popup-shortcuts-grid {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 0;
+  gap: 10px;
+  overflow-y: auto;
+  padding-right: 2px;
+  align-content: start;
+}
+
+/* Shortcut card — matches dashboard quick-shortcut-card */
+.popup-shortcut-card {
+  position: relative;
+  width: 76px;
+  flex: 0 0 76px;
+  will-change: transform;
+}
+
+.popup-shortcut-card .quick-shortcut-edit,
+.popup-shortcut-card .quick-shortcut-remove {
+  display: none;
+}
+
+.popup-shortcut-card .quick-shortcut-open {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+  min-height: 0;
+  padding: 0;
+  display: grid;
+  grid-template-rows: 40px auto;
+  justify-items: center;
+  align-content: start;
+  gap: 6px;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
+}
+
+.popup-shortcut-card .quick-shortcut-open:hover {
+  transform: translateY(-1px);
+}
+
+.popup-shortcut-card .quick-shortcut-open:active {
+  transform: translateY(0) scale(0.97);
+}
+
+.popup-shortcut-card .quick-shortcut-icon-wrap {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity, 14) + 24%), transparent);
+  flex-shrink: 0;
+}
+
+.popup-shortcut-card .quick-shortcut-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.popup-shortcut-card .quick-shortcut-icon-custom {
+  object-fit: contain;
+}
+
+.popup-shortcut-card .quick-shortcut-custom-glyph {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 19px;
+  line-height: 1;
+}
+
+.popup-shortcut-card .quick-shortcut-fallback {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--workspace-accent-soft);
+  color: var(--workspace-accent);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.popup-shortcut-card .quick-shortcut-label {
+  font-size: 11px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+/* ── Group Navigation ─────────────────────────────────────────── */
+.popup-group-nav-wrap {
+  display: flex;
+  overflow-x: auto;
+  gap: 6px;
+  padding-bottom: 6px;
+  scrollbar-width: thin;
+}
+
+.popup-group-nav-wrap::-webkit-scrollbar {
+  height: 3px;
+}
+
+.popup-group-nav-wrap::-webkit-scrollbar-thumb {
+  background: var(--warm-gray);
+  border-radius: 999px;
+}
+
+.group-nav-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 70%, var(--workspace-accent-border) 30%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 64%), transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  position: relative;
+  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease, box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.group-nav-button:hover {
+  background: var(--workspace-chip-bg);
+  color: var(--workspace-accent);
+  border-color: var(--workspace-accent-border);
+}
+
+.group-nav-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  object-fit: contain;
+}
+
+.group-nav-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background: var(--workspace-accent-soft);
+  color: var(--workspace-chip-text);
+  font-size: 8px;
+  font-weight: 700;
+  border-radius: 3px;
+}
+
+/* ── Tabs List ──────────────────────────────────────────────── */
+.popup-tabs-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-right: 2px;
+  scrollbar-width: thin;
+}
+
+.popup-tab-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.popup-tab-group-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+  border-left: 2px solid var(--warm-gray);
+  padding-left: 6px;
+}
+
+.popup-tab-group-subtitle {
+  margin-top: -2px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.popup-tab-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.popup-tab-row {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 10px;
+  background: var(--card-bg);
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 45%, transparent);
+  box-shadow: 0 1px 2px var(--shadow);
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.popup-tab-row:hover {
+  background: color-mix(in srgb, var(--card-bg) 88%, var(--workspace-accent-soft) 12%);
+  border-color: var(--workspace-accent-border);
+  box-shadow: 0 2px 5px var(--shadow);
+}
+
+.popup-tab-row:focus-within {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.popup-tab-favicon,
+.popup-tab-favicon-fallback {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.popup-tab-favicon {
+  object-fit: contain;
+}
+
+.popup-tab-favicon-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--workspace-accent-soft);
+  color: var(--workspace-chip-text);
+  font-size: 8px;
+  font-weight: 700;
+  border-radius: 4px;
+}
+
+.popup-tab-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--ink);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.35;
+  max-height: calc(1.35em * 2);
+  white-space: normal;
+  word-break: break-word;
+}
+
+.popup-tab-close-btn {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  border-radius: 4px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.48;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.popup-tab-close-btn svg {
+  width: 13px;
+  height: 13px;
+}
+
+.popup-tab-close-btn:hover {
+  opacity: 1;
+  color: var(--status-abandoned);
+  background: rgba(179, 90, 90, 0.08);
+}
+
+.popup-tab-close-btn:active {
+  opacity: 1;
+  transform: scale(0.94);
+}
+
+.popup-tab-close-btn.is-loading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+/* ── Scrollbars ──────────────────────────────────────────────── */
+.popup-shortcuts-grid::-webkit-scrollbar,
+.popup-tabs-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.popup-shortcuts-grid::-webkit-scrollbar-thumb,
+.popup-tabs-list::-webkit-scrollbar-thumb {
+  background: var(--warm-gray);
+  border-radius: 999px;
+}
+
+/* ── Empty State ─────────────────────────────────────────────── */
+.popup-empty {
+  padding: 28px 12px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* ── Entrance Animations ─────────────────────────────────────── */
+@keyframes popup-rise {
+  from {
+    opacity: 0;
+    transform: translateY(7px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popup-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes nav-rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tab-rise {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shortcut-rise {
+  from {
+    opacity: 0;
+    transform: scale(0.90) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Animation base classes — start invisible */
+.is-entering,
+.is-entering .group-nav-button,
+.is-entering .popup-tab-group,
+.is-entering .popup-tab-row,
+.is-entering .popup-shortcut-card {
+  opacity: 0;
+}
+
+/* Popup shell mount */
+body.popup-shell.is-ready {
+  animation: popup-rise 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Shortcuts */
+.popup-shortcuts-grid.is-ready .popup-shortcut-card {
+  animation: shortcut-rise 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Tabs — nav buttons stagger */
+.popup-group-nav-wrap.is-ready .group-nav-button {
+  animation: nav-rise 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Tabs — groups stagger, rows cascade after */
+.popup-tabs-list.is-ready .popup-tab-group {
+  animation: popup-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.popup-tabs-list.is-ready .popup-tab-row {
+  animation: tab-rise 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* ── Reduced Motion ──────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .popup-tab-row,
+  .popup-tab-close-btn,
+  .popup-refresh-btn,
+  .popup-shortcut-card .quick-shortcut-open,
+  .group-nav-button {
+    transition: none !important;
+    transform: none !important;
+  }
+  .is-entering,
+  .is-entering .group-nav-button,
+  .is-entering .popup-tab-group,
+  .is-entering .popup-tab-row,
+  .is-entering .popup-shortcut-card,
+  body.popup-shell.is-ready,
+  .popup-shortcuts-grid.is-ready .popup-shortcut-card,
+  .popup-group-nav-wrap.is-ready .group-nav-button,
+  .popup-tabs-list.is-ready .popup-tab-group,
+  .popup-tabs-list.is-ready .popup-tab-row {
+    opacity: 1 !important;
+    animation: none !important;
+    transform: none !important;
+  }
+}
diff --git a/extension/popup/popup.html b/extension/popup/popup.html
new file mode 100644
index 0000000..a1cc2d6
--- /dev/null
+++ b/extension/popup/popup.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tab Harbor</title>
+  <link rel="stylesheet" href="../style.css">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body class="popup-shell">
+  <main class="popup-app">
+    <header class="popup-header">
+      <div class="drawer-title-switch popup-view-switch" role="tablist" aria-label="Popup views">
+        <button class="drawer-title-btn is-active" id="popupShortcutsTab" type="button" role="tab" aria-selected="true" aria-controls="popupShortcutsPanel" data-action="switch-popup-view" data-view="shortcuts" data-i18n="shortcutsLabel">快捷方式</button>
+        <button class="drawer-title-btn" id="popupTabsTab" type="button" role="tab" aria-selected="false" aria-controls="popupTabsPanel" data-action="switch-popup-view" data-view="tabs" data-i18n="openTabsSectionTitle">打开的标签页</button>
+      </div>
+      <button class="popup-refresh-btn" type="button" data-action="refresh-popup" data-i18n-aria-label="popupRefreshLabel" aria-label="Refresh popup content">
+        <svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw-icon lucide-refresh-ccw"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
+      </button>
+    </header>
+
+    <section class="popup-panel is-active" id="popupShortcutsPanel" role="tabpanel" aria-labelledby="popupShortcutsTab">
+      <div class="quick-tabs popup-shortcuts-grid" id="popupShortcutsList"></div>
+      <div class="popup-empty" id="popupShortcutsEmpty" data-i18n="popupShortcutsEmpty" hidden>还没有快捷方式。</div>
+    </section>
+
+    <section class="popup-panel" id="popupTabsPanel" role="tabpanel" aria-labelledby="popupTabsTab" hidden>
+      <div class="popup-group-nav group-nav popup-group-nav-wrap" id="popupGroupNav"></div>
+      <div class="popup-tabs-list" id="popupTabsList"></div>
+      <div class="popup-empty" id="popupTabsEmpty" data-i18n="popupTabsEmpty" hidden>没有可显示的网页标签页。</div>
+    </section>
+  </main>
+
+  <script src="../config.js"></script>
+  <script src="../config-loader.js"></script>
+  <script src="../icon-utils.js"></script>
+  <script src="../list-order.js"></script>
+  <script src="../ui-helpers.js"></script>
+  <script src="../background-image.js"></script>
+  <script src="../i18n.js"></script>
+  <script src="../theme-controls.js"></script>
+  <script src="../session-groups.js"></script>
+  <script src="../group-order.js"></script>
+  <script src="popup.js"></script>
+
+</body>
+</html>
diff --git a/extension/popup/popup.js b/extension/popup/popup.js
new file mode 100644
index 0000000..84c343a
--- /dev/null
+++ b/extension/popup/popup.js
@@ -0,0 +1,758 @@
+'use strict';
+
+const popupTheme = globalThis.TabOutThemeControls || {};
+const popupIcons = globalThis.TabOutIconUtils || {};
+const popupSessionGroups = globalThis.TabOutSessionGroups || {};
+const popupGroupOrder = globalThis.TabOutGroupOrder || {};
+const popupI18n = globalThis.TabHarborI18n || {};
+
+const SESSION_GROUPS_KEY = 'sessionGroups';
+const GROUP_ORDER_KEY = 'groupOrder';
+const GROUP_TAB_ORDER_KEY = 'groupTabOrder';
+
+const popupState = {
+  view: 'shortcuts',
+  openTabs: [],
+  quickShortcuts: [],
+  tabGroups: [],
+  sessionGroups: { groups: [], assignments: {} },
+  groupOrder: { sessionOrder: [], pinnedOrder: [], pinEnabled: false },
+  groupTabOrder: {},
+};
+
+// Test exposure
+globalThis.popupState = popupState;
+globalThis.buildPopupTabGroups = buildPopupTabGroups;
+globalThis.getGroupDisplayLabel = getGroupDisplayLabel;
+globalThis.escapeAttr = escapeAttr;
+globalThis.getTabLabel = getTabLabel;
+globalThis.isLandingPage = isLandingPage;
+globalThis.matchCustomGroup = matchCustomGroup;
+globalThis.renderShortcutCard = renderShortcutCard;
+globalThis.renderTabGroup = renderTabGroup;
+globalThis.renderGroupNav = renderGroupNav;
+globalThis._resetPopupState = () => {
+  popupState.openTabs = [];
+  popupState.tabGroups = [];
+  popupState.sessionGroups = { groups: [], assignments: {} };
+  popupState.groupOrder = { sessionOrder: [], pinnedOrder: [], pinEnabled: false };
+  popupState.groupTabOrder = {};
+  popupState.quickShortcuts = [];
+};
+globalThis._skipLoadPopupState = false;
+globalThis._popupIcons = popupIcons;
+
+const POPUP_REFRESH_KEYS = new Set([
+  'quickShortcuts',
+  'sessionGroups',
+  'groupOrder',
+  'groupTabOrder',
+  'themePreferences',
+  'languagePreference',
+]);
+
+let popupRefreshTimer = null;
+let popupRefreshInFlight = null;
+let popupRefreshQueued = false;
+
+function escapeAttr(value = '') {
+  return popupIcons.escapeHtmlAttribute ? popupIcons.escapeHtmlAttribute(value) : String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+
+function getTabHostname(tab) {
+  try {
+    if (tab?.url?.startsWith('file://')) return 'local-files';
+    return new URL(tab?.url || '').hostname || '';
+  } catch {
+    return '';
+  }
+}
+
+function getTabLabel(tab) {
+  const title = cleanTitle(
+    smartTitle(stripTitleNoise(tab.title || ''), tab.url || ''),
+    getTabHostname(tab)
+  );
+  if (title) return title;
+
+  try {
+    return friendlyDomain(new URL(tab.url).hostname) || tab.url;
+  } catch {
+    return tab.url || 'Tab';
+  }
+}
+
+function getTabOrderTokens(tab) {
+  const tokens = [];
+  if (tab?.id != null) tokens.push(String(tab.id));
+  if (tab?.url) tokens.push(String(tab.url));
+  return [...new Set(tokens.filter(Boolean))];
+}
+
+const filterTabs = popupTheme.filterRealTabs || (tabs => Array.isArray(tabs) ? tabs : []);
+
+function getLandingPatterns() {
+  const base = [
+    { hostname: 'mail.google.com', test: (_p, h) =>
+        !h.includes('#inbox/') && !h.includes('#sent/') && !h.includes('#search/') },
+    { hostname: 'x.com',               pathExact: ['/home'] },
+    { hostname: 'www.linkedin.com',    pathExact: ['/'] },
+    { hostname: 'github.com',          pathExact: ['/'] },
+    { hostname: 'www.youtube.com',     pathExact: ['/'] },
+  ];
+  const local = typeof LOCAL_LANDING_PAGE_PATTERNS !== 'undefined' ? LOCAL_LANDING_PAGE_PATTERNS : [];
+  return [...base, ...local];
+}
+
+function isLandingPage(url) {
+  try {
+    const parsed = new URL(url);
+    return getLandingPatterns().some(p => {
+      const hostnameMatch = p.hostname
+        ? parsed.hostname === p.hostname
+        : p.hostnameEndsWith
+          ? parsed.hostname.endsWith(p.hostnameEndsWith)
+          : false;
+      if (!hostnameMatch) return false;
+      if (p.test)       return p.test(parsed.pathname, url);
+      if (p.pathPrefix) return parsed.pathname.startsWith(p.pathPrefix);
+      if (p.pathExact)  return p.pathExact.includes(parsed.pathname);
+      return parsed.pathname === '/';
+    });
+  } catch { return false; }
+}
+
+function getCustomGroups() {
+  return typeof LOCAL_CUSTOM_GROUPS !== 'undefined' ? LOCAL_CUSTOM_GROUPS : [];
+}
+
+function matchCustomGroup(url) {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === 'file:') return null;
+    return getCustomGroups().find(r => {
+      const hostMatch = r.hostname
+        ? parsed.hostname === r.hostname
+        : r.hostnameEndsWith
+          ? parsed.hostname.endsWith(r.hostnameEndsWith)
+          : false;
+      if (!hostMatch) return false;
+      if (r.pathPrefix) return parsed.pathname.startsWith(r.pathPrefix);
+      return true;
+    }) || null;
+  } catch { return null; }
+}
+
+function normalizeGroupTabOrderState(input) {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+
+  return Object.fromEntries(
+    Object.entries(input)
+      .map(([groupKey, orderIds]) => [
+        String(groupKey),
+        Array.isArray(orderIds)
+          ? [...new Set(orderIds.map(id => String(id)).filter(Boolean))]
+          : [],
+      ])
+      .filter(([, orderIds]) => orderIds.length > 0)
+  );
+}
+
+function reorderGroupTabsByStoredUrls(tabs, groupKey) {
+  const orderIds = popupState.groupTabOrder[String(groupKey)] || [];
+  if (!Array.isArray(tabs) || !tabs.length || !orderIds.length) return Array.isArray(tabs) ? tabs.slice() : [];
+
+  const orderIndex = new Map(orderIds.map((id, index) => [String(id), index]));
+  return tabs
+    .map((tab, originalIndex) => {
+      const match = getTabOrderTokens(tab)
+        .map(token => orderIndex.get(token))
+        .find(index => Number.isInteger(index));
+      return {
+        tab,
+        originalIndex,
+        order: Number.isInteger(match) ? match : Number.MAX_SAFE_INTEGER,
+      };
+    })
+    .sort((a, b) => a.order - b.order || a.originalIndex - b.originalIndex)
+    .map(entry => entry.tab);
+}
+
+function getOrderedUniqueTabsForGroup(group) {
+  const tabs = Array.isArray(group?.tabs) ? group.tabs : [];
+  const orderedTabs = reorderGroupTabsByStoredUrls(tabs, group?.domain);
+  const seenUrls = new Set();
+  return orderedTabs.filter(tab => {
+    const url = String(tab?.url || '').trim();
+    if (!url) return true;
+    if (seenUrls.has(url)) return false;
+    seenUrls.add(url);
+    return true;
+  });
+}
+
+async function loadPopupState() {
+  if (globalThis._skipLoadPopupState) return;
+  const shortcutsGetter = popupTheme.getQuickShortcuts;
+  if (typeof shortcutsGetter === 'function') {
+    popupState.quickShortcuts = await shortcutsGetter();
+  }
+
+  const [tabs, tabGroups, sgResult, goResult, groupTabOrderResult] = await Promise.all([
+    chrome.tabs.query({}),
+    chrome.tabGroups.query({}),
+    chrome.storage.local.get(SESSION_GROUPS_KEY),
+    chrome.storage.local.get(GROUP_ORDER_KEY),
+    chrome.storage.local.get(GROUP_TAB_ORDER_KEY),
+  ]);
+
+  popupState.openTabs = filterTabs(tabs).map(tab => ({
+    id: tab.id,
+    url: tab.url || '',
+    title: tab.title || '',
+    favIconUrl: tab.favIconUrl || '',
+    windowId: tab.windowId,
+    active: Boolean(tab.active),
+    groupId: tab.groupId,
+  }));
+
+  popupState.tabGroups = Array.isArray(tabGroups)
+    ? tabGroups
+        .map(group => ({
+          id: group.id,
+          title: group.title || '',
+          color: group.color || '',
+          collapsed: Boolean(group.collapsed),
+          tabs: popupState.openTabs.filter(tab => tab.groupId === group.id),
+        }))
+        .filter(group => group.tabs.length > 0)
+    : [];
+
+  const normalizeFn = popupSessionGroups.normalizeSessionGroups;
+  popupState.sessionGroups = normalizeFn ? normalizeFn(sgResult[SESSION_GROUPS_KEY]) : { groups: [], assignments: {} };
+
+  const normalizeOrderFn = popupGroupOrder.normalizeGroupOrderState;
+  popupState.groupOrder = normalizeOrderFn ? normalizeOrderFn(goResult[GROUP_ORDER_KEY]) : { sessionOrder: [], pinnedOrder: [], pinEnabled: false };
+  popupState.groupTabOrder = normalizeGroupTabOrderState(groupTabOrderResult[GROUP_TAB_ORDER_KEY]);
+}
+
+function buildPopupTabGroups() {
+  const { openTabs, sessionGroups, groupOrder } = popupState;
+
+  const sessionGroupMap = Object.fromEntries(
+    sessionGroups.groups.map(group => [
+      group.id,
+      { domain: `__session_group__:${group.id}`, label: group.name, tabs: [], kind: 'session', manualGroupId: group.id },
+    ])
+  );
+
+  const groupMap = {};
+  const landingTabs = [];
+
+  for (const tab of openTabs) {
+    const assignedGroupId = sessionGroups.assignments[String(tab.id)];
+    if (assignedGroupId && sessionGroupMap[assignedGroupId]) {
+      sessionGroupMap[assignedGroupId].tabs.push(tab);
+      continue;
+    }
+
+    if (isLandingPage(tab.url)) {
+      landingTabs.push(tab);
+      continue;
+    }
+
+    const customRule = matchCustomGroup(tab.url);
+    if (customRule) {
+      const key = customRule.groupKey;
+      if (!groupMap[key]) groupMap[key] = { domain: key, label: customRule.groupLabel, tabs: [], kind: 'custom' };
+      groupMap[key].tabs.push(tab);
+      continue;
+    }
+
+    let hostname;
+    try {
+      hostname = tab.url.startsWith('file://') ? 'local-files' : new URL(tab.url).hostname;
+    } catch {
+      continue;
+    }
+    if (!hostname) continue;
+
+    if (!groupMap[hostname]) groupMap[hostname] = { domain: hostname, label: hostname, tabs: [], kind: 'domain' };
+    groupMap[hostname].tabs.push(tab);
+  }
+
+  if (landingTabs.length > 0) {
+    groupMap['__landing-pages__'] = { domain: '__landing-pages__', label: '__landing-pages__', tabs: landingTabs, kind: 'landing' };
+  }
+
+  const landingHostnames = new Set(getLandingPatterns().map(p => p.hostname).filter(Boolean));
+  const landingSuffixes = getLandingPatterns().map(p => p.hostnameEndsWith).filter(Boolean);
+  function isLandingDomain(domain) {
+    if (landingHostnames.has(domain)) return true;
+    return landingSuffixes.some(s => domain.endsWith(s));
+  }
+
+  const sessionGroupsList = Object.values(sessionGroupMap).filter(g => g.tabs.length > 0);
+  const automaticGroups = Object.values(groupMap);
+
+  const sortedAutomatic = automaticGroups.sort((a, b) => {
+    const aIsLanding = a.domain === '__landing-pages__';
+    const bIsLanding = b.domain === '__landing-pages__';
+    if (aIsLanding !== bIsLanding) return aIsLanding ? -1 : 1;
+    const aIsPriority = isLandingDomain(a.domain);
+    const bIsPriority = isLandingDomain(b.domain);
+    if (aIsPriority !== bIsPriority) return aIsPriority ? -1 : 1;
+    return b.tabs.length - a.tabs.length;
+  });
+
+  const applyOrderFn = popupGroupOrder.applyGroupOrder;
+  const orderedManual = applyOrderFn ? applyOrderFn(sessionGroupsList, groupOrder) : sessionGroupsList;
+  const orderedAuto = applyOrderFn ? applyOrderFn(sortedAutomatic, groupOrder) : sortedAutomatic;
+
+  return [...orderedManual, ...orderedAuto];
+}
+
+function renderPopupShortcuts() {
+  const listEl = document.getElementById('popupShortcutsList');
+  const emptyEl = document.getElementById('popupShortcutsEmpty');
+  if (!listEl || !emptyEl) return;
+
+  listEl.classList.add('is-entering');
+  listEl.innerHTML = popupState.quickShortcuts.length
+    ? popupState.quickShortcuts.map((s, i) => renderShortcutCard(s, i)).join('')
+    : '';
+  emptyEl.hidden = popupState.quickShortcuts.length > 0;
+
+  requestAnimationFrame(() => requestAnimationFrame(() => listEl.classList.add('is-ready')));
+}
+
+function renderShortcutCard(shortcut, index) {
+  const label = shortcut.label || shortcut.url;
+  const iconKind = String(shortcut.iconKind || '');
+  const iconData = popupIcons.getIconSources ? popupIcons.getIconSources({ url: shortcut.url }, 32) : { sources: [], hostname: '' };
+  const fallbackLabel = popupIcons.getFallbackLabel ? popupIcons.getFallbackLabel(label, iconData.hostname) : label.slice(0, 1).toUpperCase();
+  const safeUrl = escapeAttr(shortcut.url);
+  const safeLabel = escapeAttr(label);
+  const primaryIconUrl = iconKind === 'image'
+    ? shortcut.icon
+    : iconKind === 'svg'
+      ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(shortcut.icon || '')}`
+      : iconKind === 'glyph'
+        ? ''
+        : (iconData.sources[0] || '');
+  const glyph = iconKind === 'glyph' ? shortcut.icon : '';
+  const fallbackSources = (iconKind === 'image' || iconKind === 'svg')
+    ? iconData.sources
+    : iconData.sources.slice(1);
+  const fallbackSrc = escapeAttr(fallbackSources[0] || '');
+  const fallbackSrcset = fallbackSources.length > 1 ? escapeAttr(JSON.stringify(fallbackSources.slice(1))) : '';
+
+  return `
+    <div class="quick-shortcut-card popup-shortcut-card" style="--s:${index}">
+      <button class="quick-shortcut-open" type="button" data-action="open-popup-url" data-url="${safeUrl}" aria-label="${safeLabel}">
+        <span class="quick-shortcut-icon-wrap">
+          ${primaryIconUrl ? `<img class="quick-shortcut-icon${iconKind === 'image' ? ' quick-shortcut-icon-custom' : ''}" src="${primaryIconUrl}" alt="" draggable="false" data-fallback-src="${fallbackSrc}"${fallbackSrcset ? ` data-fallback-srcset="${fallbackSrcset}"` : ''}>` : ''}
+          ${glyph ? `<span class="quick-shortcut-custom-glyph" aria-hidden="true">${glyph}</span>` : ''}
+          <span class="quick-shortcut-fallback"${primaryIconUrl || glyph ? ' style="display:none"' : ''}>${fallbackLabel}</span>
+        </span>
+        <span class="quick-shortcut-label">${safeLabel}</span>
+      </button>
+    </div>
+  `;
+}
+
+function getGroupDisplayLabel(group) {
+  const i18n = globalThis.TabHarborI18n || {};
+  const t = i18n.t ? (key => i18n.t(key)) : (key => key);
+  switch (group.kind) {
+    case 'landing':   return t('homepagesLabel');
+    case 'session':   return group.label;
+    case 'chrome-group': return group.label;
+    case 'ungrouped': return t('ungroupedLabel');
+    default:          return friendlyDomain(group.domain) || group.domain;
+  }
+}
+
+function renderGroupNav(group, index) {
+  const label = getGroupDisplayLabel(group);
+  const iconData = popupIcons.getGroupIcon ? popupIcons.getGroupIcon(group, label, 32) : { src: '', fallbackLabel: label.slice(0, 2).toUpperCase() };
+  const fallbackLabel = escapeAttr(iconData.fallbackLabel || label.slice(0, 2).toUpperCase());
+  const fallbackSrc = escapeAttr(iconData.fallbackSrc || '');
+  const fallbackSrcset = escapeAttr(JSON.stringify(iconData.fallbackSources?.slice(1) || []));
+  return `
+    <button class="group-nav-button" type="button" data-action="jump-popup-group" data-group-id="${escapeAttr(group.domain)}" aria-label="${escapeAttr(label)}" style="--s:${index}">
+      ${iconData.src ? `<img class="group-nav-icon" src="${escapeAttr(iconData.src)}" alt="" draggable="false" data-fallback-src="${fallbackSrc}" data-fallback-srcset="${fallbackSrcset}">` : ''}
+      <span class="group-nav-fallback"${iconData.src ? ' style="display:none"' : ''}>${fallbackLabel}</span>
+    </button>
+  `;
+}
+
+function renderTabGroup(group, groupIndex) {
+  const label = getGroupDisplayLabel(group);
+  const rows = getOrderedUniqueTabsForGroup(group).map((tab, tabIndex) => {
+    const title = getTabLabel(tab);
+    const safeUrl = escapeAttr(tab.url || '');
+    const safeTitle = escapeAttr(title);
+    const iconData = popupIcons.getIconSources ? popupIcons.getIconSources(tab, 16) : { sources: [], hostname: '' };
+    const fallbackLabel = popupIcons.getFallbackLabel ? popupIcons.getFallbackLabel(title, iconData.hostname) : '?';
+    const fallbackSrc = escapeAttr(iconData.sources?.[1] || '');
+    const fallbackSrcset = iconData.sources?.length > 2 ? escapeAttr(JSON.stringify(iconData.sources.slice(2))) : '';
+    const closeLabel = popupI18n.t ? popupI18n.t('closeTabButton') : 'Close';
+    return `
+      <div class="popup-tab-row" style="--g:${groupIndex};--r:${tabIndex}" data-action="open-popup-url" data-url="${safeUrl}" data-tab-id="${tab.id}">
+        ${iconData.sources?.[0] ? `<img class="popup-tab-favicon" src="${escapeAttr(iconData.sources[0])}" alt="" data-fallback-src="${fallbackSrc}"${fallbackSrcset ? ` data-fallback-srcset="${fallbackSrcset}"` : ''}>` : ''}
+        <span class="popup-tab-favicon-fallback"${iconData.sources?.[0] ? ' style="display:none"' : ''}>${escapeAttr(fallbackLabel)}</span>
+        <span class="popup-tab-title" title="${safeTitle}">${safeTitle}</span>
+        <button class="popup-tab-close-btn" type="button" data-action="close-popup-tab" data-tab-id="${tab.id}" aria-label="${escapeAttr(closeLabel)}" title="${escapeAttr(closeLabel)}">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <section class="popup-tab-group" data-group-id="${escapeAttr(group.domain)}" style="--s:${groupIndex}">
+      <h1 class="popup-tab-group-title">${escapeAttr(label)}</h1>
+      <div class="popup-tab-group-list">${rows}</div>
+    </section>
+  `;
+}
+
+function renderPopupTabs() {
+  const listEl = document.getElementById('popupTabsList');
+  const navEl = document.getElementById('popupGroupNav');
+  const emptyEl = document.getElementById('popupTabsEmpty');
+  if (!listEl || !navEl || !emptyEl) return;
+
+  const tabs = popupState.openTabs;
+
+  if (tabs.length === 0) {
+    if (navEl.innerHTML !== '') navEl.innerHTML = '';
+    if (listEl.innerHTML !== '') listEl.innerHTML = '';
+    if (emptyEl.hidden !== false) emptyEl.hidden = false;
+    return;
+  }
+
+  const groups = buildPopupTabGroups();
+  const newNavHtml = groups.map((g, i) => renderGroupNav(g, i)).join('');
+  const newListHtml = groups.map((g, i) => renderTabGroup(g, i)).join('');
+
+  if (navEl.innerHTML !== newNavHtml) {
+    navEl.innerHTML = newNavHtml;
+    navEl.classList.add('is-entering');
+  }
+  if (listEl.innerHTML !== newListHtml) {
+    listEl.innerHTML = newListHtml;
+    listEl.classList.add('is-entering');
+  }
+  if (emptyEl.hidden !== true) {
+    emptyEl.hidden = true;
+  }
+
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    navEl.classList.add('is-ready');
+    listEl.classList.add('is-ready');
+  }));
+}
+
+function syncPopupView() {
+  const shortcutsTab = document.getElementById('popupShortcutsTab');
+  const tabsTab = document.getElementById('popupTabsTab');
+  const shortcutsPanel = document.getElementById('popupShortcutsPanel');
+  const tabsPanel = document.getElementById('popupTabsPanel');
+  const shortcutsList = document.getElementById('popupShortcutsList');
+  const tabsList = document.getElementById('popupTabsList');
+  const navEl = document.getElementById('popupGroupNav');
+  const isTabs = popupState.view === 'tabs';
+
+  shortcutsTab?.classList.toggle('is-active', !isTabs);
+  shortcutsTab?.setAttribute('aria-selected', String(!isTabs));
+  tabsTab?.classList.toggle('is-active', isTabs);
+  tabsTab?.setAttribute('aria-selected', String(isTabs));
+
+  // Strip animation classes so they replay on re-enter
+  [shortcutsList, tabsList, navEl].forEach(el => {
+    el?.classList.remove('is-ready', 'is-entering');
+  });
+
+  if (shortcutsPanel) {
+    shortcutsPanel.hidden = isTabs;
+    shortcutsPanel.classList.toggle('is-active', !isTabs);
+  }
+  if (tabsPanel) {
+    tabsPanel.hidden = !isTabs;
+    tabsPanel.classList.toggle('is-active', isTabs);
+  }
+
+  // Re-trigger animation for the incoming active panel
+  if (!isTabs && shortcutsList) {
+    requestAnimationFrame(() => requestAnimationFrame(() => shortcutsList.classList.add('is-ready')));
+  } else if (isTabs && tabsList && navEl) {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      tabsList.classList.add('is-ready');
+      navEl.classList.add('is-ready');
+    }));
+  }
+}
+
+async function openPopupUrl(url) {
+  if (!url) return;
+  const existing = await findTabByUrl(url);
+  if (existing) {
+    await chrome.tabs.update(existing.id, { active: true });
+    if (existing.windowId) await chrome.windows.update(existing.windowId, { focused: true });
+  } else {
+    await chrome.tabs.create({ url });
+  }
+  window.close();
+}
+
+async function findTabByUrl(url) {
+  try {
+    const tabs = await chrome.tabs.query({ url });
+    return tabs[0] || null;
+  } catch {
+    return null;
+  }
+}
+
+async function openPopupTab(tabId, fallbackUrl = '') {
+  if (!tabId) {
+    await openPopupUrl(fallbackUrl);
+    return;
+  }
+
+  let targetTab = null;
+  try {
+    targetTab = await chrome.tabs.get(tabId);
+  } catch {
+    targetTab = null;
+  }
+
+  if (!targetTab?.id) {
+    await openPopupUrl(fallbackUrl);
+    return;
+  }
+
+  let currentWindow = null;
+  try {
+    currentWindow = await chrome.windows.getCurrent();
+  } catch {
+    currentWindow = null;
+  }
+
+  if (currentWindow?.id && targetTab.windowId && targetTab.windowId !== currentWindow.id) {
+    const targetUrl = targetTab.url || fallbackUrl;
+    if (!targetUrl) return;
+    await chrome.tabs.create({
+      windowId: currentWindow.id,
+      url: targetUrl,
+      active: true,
+    });
+    window.close();
+    return;
+  }
+
+  await chrome.tabs.update(targetTab.id, { active: true });
+  window.close();
+}
+
+function handlePopupGroupNavImageError(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLImageElement)) return;
+  if (!target.classList.contains('group-nav-icon')) return;
+
+  const fallbackQueue = [];
+  const primaryFallback = String(target.dataset.fallbackSrc || '').trim();
+  if (primaryFallback) fallbackQueue.push(primaryFallback);
+  const serializedQueue = String(target.dataset.fallbackSrcset || '').trim();
+  if (serializedQueue) {
+    try {
+      const parsed = JSON.parse(serializedQueue);
+      if (Array.isArray(parsed)) {
+        fallbackQueue.push(...parsed.map(url => String(url || '').trim()).filter(Boolean));
+      }
+    } catch {}
+  }
+
+  const currentSrc = String(target.currentSrc || target.src || '').trim();
+  const nextFallback = fallbackQueue.find(url => url && url !== currentSrc && url !== String(target.dataset.fallbackApplied || '').trim());
+  if (nextFallback) {
+    const remaining = fallbackQueue.filter(url => url && url !== nextFallback);
+    target.dataset.fallbackApplied = nextFallback;
+    target.dataset.fallbackSrc = nextFallback;
+    if (remaining.length) {
+      target.dataset.fallbackSrcset = JSON.stringify(remaining);
+    } else {
+      delete target.dataset.fallbackSrcset;
+    }
+    target.src = nextFallback;
+    return;
+  }
+
+  target.style.display = 'none';
+  const sibling = target.nextElementSibling;
+  if (sibling?.classList.contains('group-nav-fallback')) {
+    sibling.style.display = '';
+  }
+}
+
+async function refreshPopup() {
+  if (popupTheme.loadThemePreferences) {
+    await popupTheme.loadThemePreferences();
+  }
+  await loadPopupState();
+  renderPopupShortcuts();
+  renderPopupTabs();
+  syncPopupView();
+  if (popupI18n.applyDomTranslations) {
+    popupI18n.applyDomTranslations(document.querySelector('.popup-app'));
+  }
+  if (popupTheme.syncPopupTheme) {
+    popupTheme.syncPopupTheme(document);
+  }
+}
+
+function schedulePopupRefresh(delay = 120) {
+  if (popupRefreshTimer) {
+    clearTimeout(popupRefreshTimer);
+  }
+  popupRefreshTimer = setTimeout(() => {
+    popupRefreshTimer = null;
+    void refreshPopupSafely();
+  }, delay);
+}
+
+async function refreshPopupSafely() {
+  if (popupRefreshInFlight) {
+    popupRefreshQueued = true;
+    return popupRefreshInFlight;
+  }
+
+  popupRefreshInFlight = (async () => {
+    try {
+      await refreshPopup();
+    } finally {
+      popupRefreshInFlight = null;
+      if (popupRefreshQueued) {
+        popupRefreshQueued = false;
+        schedulePopupRefresh(0);
+      }
+    }
+  })();
+
+  return popupRefreshInFlight;
+}
+
+function handlePopupStorageChanged(changes, areaName) {
+  if (areaName !== 'local') return;
+  const hasRelevantChange = Object.keys(changes || {}).some(key => POPUP_REFRESH_KEYS.has(key));
+  if (!hasRelevantChange) return;
+  schedulePopupRefresh();
+}
+
+function registerPopupAutoRefresh() {
+  const schedule = () => schedulePopupRefresh();
+
+  chrome.tabs?.onActivated?.addListener(schedule);
+  chrome.tabs?.onAttached?.addListener(schedule);
+  chrome.tabs?.onCreated?.addListener(schedule);
+  chrome.tabs?.onDetached?.addListener(schedule);
+  chrome.tabs?.onMoved?.addListener(schedule);
+  chrome.tabs?.onRemoved?.addListener(schedule);
+  chrome.tabs?.onUpdated?.addListener(schedule);
+  chrome.tabGroups?.onCreated?.addListener(schedule);
+  chrome.tabGroups?.onRemoved?.addListener(schedule);
+  chrome.tabGroups?.onUpdated?.addListener(schedule);
+  chrome.storage?.onChanged?.addListener(handlePopupStorageChanged);
+  chrome.runtime?.onMessage?.addListener(message => {
+    if (message?.action === 'tabs-changed') {
+      schedule();
+    }
+  });
+}
+
+function initializePopup() {
+  document.addEventListener('error', handlePopupGroupNavImageError, true);
+  registerPopupAutoRefresh();
+
+  document.addEventListener('click', async e => {
+    const actionEl = e.target.closest('[data-action]');
+    if (!actionEl) return;
+
+    const action = actionEl.dataset.action;
+    if (action === 'switch-popup-view') {
+      popupState.view = actionEl.dataset.view === 'tabs' ? 'tabs' : 'shortcuts';
+      syncPopupView();
+      return;
+    }
+
+    if (action === 'refresh-popup') {
+      await refreshPopup();
+      return;
+    }
+
+    if (action === 'close-popup-tab') {
+      e.preventDefault();
+      const tabId = Number(actionEl.dataset.tabId);
+      if (!tabId) return;
+      actionEl.classList.add('is-loading');
+      try {
+        await chrome.tabs.remove(tabId);
+        // Suppress auto-refresh scheduled by tabs.onRemoved to avoid double render
+        if (popupRefreshTimer) {
+          clearTimeout(popupRefreshTimer);
+          popupRefreshTimer = null;
+        }
+        popupRefreshQueued = false;
+        // Wait for any already-running refresh to settle before re-rendering
+        if (popupRefreshInFlight) {
+          try { await popupRefreshInFlight; } catch { /* swallow */ }
+        }
+        await refreshPopup();
+        // tabs.onActivated (from switching to a new active tab) may have
+        // rescheduled a refresh during our await — suppress it
+        if (popupRefreshTimer) {
+          clearTimeout(popupRefreshTimer);
+          popupRefreshTimer = null;
+        }
+        popupRefreshQueued = false;
+      } finally {
+        actionEl.classList.remove('is-loading');
+      }
+      return;
+    }
+
+    if (action === 'open-popup-url') {
+      e.preventDefault();
+      const tabId = Number(actionEl.dataset.tabId);
+      if (tabId) {
+        await openPopupTab(tabId, actionEl.dataset.url || '');
+      } else {
+        await openPopupUrl(actionEl.dataset.url || '');
+      }
+      return;
+    }
+
+    if (action === 'jump-popup-group') {
+      const groupId = actionEl.dataset.groupId || '';
+      const target = document.querySelector(`.popup-tab-group[data-group-id="${CSS.escape(groupId)}"]`);
+      target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+  });
+
+  refreshPopupSafely()
+    .then(() => requestAnimationFrame(() => document.body.classList.add('is-ready')))
+    .catch(() => {
+      renderPopupShortcuts();
+      renderPopupTabs();
+      syncPopupView();
+      if (popupI18n.applyDomTranslations) {
+        popupI18n.applyDomTranslations(document.querySelector('.popup-app'));
+      }
+      document.body.classList.add('is-ready');
+    });
+}
+
+initializePopup();
diff --git a/extension/popup/popup.test.js b/extension/popup/popup.test.js
new file mode 100644
index 0000000..1998dda
--- /dev/null
+++ b/extension/popup/popup.test.js
@@ -0,0 +1,802 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+// Mock chrome APIs used at module load time (initializePopup runs on require)
+globalThis.chrome = {
+  tabs: { query: async () => [] },
+  tabGroups: { query: async () => [] },
+  storage: { local: { get: async () => ({}) } },
+};
+
+// Mock DOM globals before requiring popup.js
+let rafCallbacks = [];
+globalThis.requestAnimationFrame = fn => {
+  const id = Math.random();
+  rafCallbacks.push({ id, fn });
+  return id;
+};
+globalThis.flushRaf = () => {
+  const snapshot = [...rafCallbacks];
+  rafCallbacks = [];
+  snapshot.forEach(({ fn }) => fn());
+};
+
+globalThis.document = {
+  addEventListener: () => {},
+  querySelector: () => null,
+  querySelectorAll: () => [],
+  createElement: () => ({ style: {} }),
+  getElementById: () => null,
+};
+globalThis.window = { close: () => {} };
+
+// Mock popup.js dependencies (empty — functions should fall back safely)
+globalThis.TabOutThemeControls = { filterRealTabs: tabs => Array.isArray(tabs) ? tabs : [] };
+globalThis.TabOutIconUtils = {
+  escapeHtmlAttribute: v => String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;'),
+  getIconSources: () => ({ sources: [], hostname: '' }),
+  getFallbackLabel: (label, host) => (label || host || '').slice(0, 1).toUpperCase() || '?',
+  getGroupIcon: () => ({ src: '', fallbackLabel: '?' }),
+};
+globalThis.TabOutListOrder = {
+  reorderSubsetByIds: (items, orderIds, includeItem) => {
+    if (!Array.isArray(items)) return [];
+    const list = items.slice();
+    const shouldInclude = typeof includeItem === 'function' ? includeItem : () => true;
+    const subset = list.filter(shouldInclude);
+    const normalizedOrder = Array.isArray(orderIds) ? orderIds.map(id => String(id)).filter(Boolean) : [];
+    if (!subset.length || subset.length !== normalizedOrder.length) return list;
+    const subsetMap = new Map(subset.map(item => [String(item.id), item]));
+    if (subsetMap.size !== subset.length) return list;
+    if (normalizedOrder.some(id => !subsetMap.has(id))) return list;
+    let nextIndex = 0;
+    return list.map(item => {
+      if (!shouldInclude(item)) return item;
+      const reorderedItem = subsetMap.get(normalizedOrder[nextIndex]);
+      nextIndex += 1;
+      return reorderedItem || item;
+    });
+  },
+};
+globalThis.TabOutSessionGroups = { normalizeSessionGroups: v => v || { groups: [], assignments: {} } };
+globalThis.TabOutGroupOrder = { normalizeGroupOrderState: v => v || { sessionOrder: [], pinnedOrder: [], pinEnabled: false } };
+globalThis.TabHarborI18n = { t: key => key };
+
+// Use the real ui-helpers.js implementations instead of inline mocks
+require('../ui-helpers.js');
+
+// Prevent LOCAL_* globals from interfering
+globalThis.LOCAL_LANDING_PAGE_PATTERNS = undefined;
+globalThis.LOCAL_CUSTOM_GROUPS = undefined;
+
+require('./popup.js');
+
+const {
+  escapeAttr,
+  getTabLabel,
+  isLandingPage,
+  matchCustomGroup,
+  getGroupDisplayLabel,
+  buildPopupTabGroups,
+  popupState,
+  renderShortcutCard,
+  renderTabGroup,
+  renderGroupNav,
+} = globalThis;
+
+function resetPopupTestState(opts = {}) {
+  globalThis.LOCAL_CUSTOM_GROUPS = opts.customGroups ?? [];
+  globalThis.LOCAL_LANDING_PAGE_PATTERNS = opts.landingPatterns ?? undefined;
+  // Mutate existing objects rather than replacing them — popup.js holds
+  // local references captured at module-load time (popupSessionGroups, popupGroupOrder).
+  globalThis.TabOutSessionGroups.normalizeSessionGroups = () => (opts.sessionGroups ?? { groups: [], assignments: {} });
+  globalThis.TabOutGroupOrder.applyGroupOrder = (list) => list;
+  globalThis.TabOutGroupOrder.normalizeGroupOrderState = () => (opts.groupOrder ?? { sessionOrder: [], pinnedOrder: [], pinEnabled: false });
+  if (typeof globalThis._resetPopupState === 'function') {
+    globalThis._resetPopupState();
+  }
+}
+
+// ---- escapeAttr ----
+
+test('escapeAttr escapes & < > "', () => {
+  assert.equal(escapeAttr('A & B < C > D "quote"'), 'A &amp; B &lt; C &gt; D &quot;quote&quot;');
+});
+
+test('escapeAttr handles empty string', () => {
+  assert.equal(escapeAttr(''), '');
+});
+
+test('escapeAttr handles non-string input', () => {
+  assert.equal(escapeAttr(123), '123');
+  assert.equal(escapeAttr(null), 'null');
+});
+
+// ---- getTabLabel ----
+
+test('getTabLabel returns stripped title when suffix matches domain', () => {
+  const tab = { title: 'My Page - example.com', url: 'https://www.example.com/page' };
+  assert.equal(getTabLabel(tab), 'My Page');
+});
+
+test('getTabLabel strips suffix after | when it matches friendly domain', () => {
+  // friendlyDomain('www.example.com') → 'Example' (strips TLD, capitalizes)
+  const tab = { title: 'Dashboard | Example', url: 'https://www.example.com' };
+  assert.equal(getTabLabel(tab), 'Dashboard');
+});
+
+test('getTabLabel strips suffix after — when it matches domain without TLD', () => {
+  const tab = { title: 'Welcome — example', url: 'https://example.com/home' };
+  assert.equal(getTabLabel(tab), 'Welcome');
+});
+
+test('getTabLabel keeps title unchanged when suffix does not match domain', () => {
+  const tab = { title: 'GitHub - awesome-org/awesome-repo', url: 'https://github.com' };
+  assert.equal(getTabLabel(tab), 'GitHub - awesome-org/awesome-repo');
+});
+
+test('getTabLabel uses URL as title when original title is empty', () => {
+  const tab = { title: '', url: 'https://www.example.com/path' };
+  assert.equal(getTabLabel(tab), 'https://www.example.com/path');
+});
+
+test('getTabLabel returns chrome:// URL when title is empty and URL is unparseable', () => {
+  const tab = { title: '', url: 'chrome://newtab' };
+  assert.equal(getTabLabel(tab), 'chrome://newtab');
+});
+
+test('getTabLabel falls back to "Tab" for missing title and url', () => {
+  assert.equal(getTabLabel({}), 'Tab');
+  assert.equal(getTabLabel({ title: '' }), 'Tab');
+});
+
+test('getTabLabel uses URL when title empty with www URL', () => {
+  const tab = { title: '', url: 'https://www.google.com/search' };
+  assert.equal(getTabLabel(tab), 'https://www.google.com/search');
+});
+
+// ---- isLandingPage ----
+
+test('isLandingPage filters out Gmail inbox/sent/search URLs by hash', () => {
+  // base URL has no hash — passes
+  assert.equal(isLandingPage('https://mail.google.com/mail/u/0/'), true);
+  // URL contains #inbox/ — filtered by hash check
+  assert.equal(isLandingPage('https://mail.google.com/mail/u/0/#inbox/'), false);
+  // URL contains #sent/ — filtered by hash check
+  assert.equal(isLandingPage('https://mail.google.com/mail/u/0/#sent/'), false);
+});
+
+test('isLandingPage matches x.com home timeline', () => {
+  assert.equal(isLandingPage('https://x.com/home'), true);
+  assert.equal(isLandingPage('https://x.com/explore'), false);
+});
+
+test('isLandingPage matches GitHub root', () => {
+  assert.equal(isLandingPage('https://github.com/'), true);
+  assert.equal(isLandingPage('https://github.com/user/repo'), false);
+});
+
+test('isLandingPage matches LinkedIn root', () => {
+  assert.equal(isLandingPage('https://www.linkedin.com/'), true);
+  assert.equal(isLandingPage('https://www.linkedin.com/feed/'), false);
+});
+
+test('isLandingPage matches YouTube root', () => {
+  assert.equal(isLandingPage('https://www.youtube.com/'), true);
+  assert.equal(isLandingPage('https://www.youtube.com/watch?v=abc'), false);
+});
+
+test('isLandingPage returns false for non-landing URLs', () => {
+  assert.equal(isLandingPage('https://github.com/notifications'), false);
+  assert.equal(isLandingPage('https://example.com/page'), false);
+});
+
+test('isLandingPage handles invalid URLs gracefully', () => {
+  assert.equal(isLandingPage(''), false);
+  assert.equal(isLandingPage('not-a-url'), false);
+});
+
+// ---- matchCustomGroup ----
+
+test('matchCustomGroup matches exact hostname and returns the rule object', () => {
+  resetPopupTestState({
+    customGroups: [
+      { hostname: 'github.com', pathPrefix: null, groupKey: 'gh', groupLabel: 'GitHub' },
+    ],
+  });
+  const result = matchCustomGroup('https://github.com/user');
+  assert.equal(typeof result, 'object', 'should return rule object');
+  assert.equal(result.hostname, 'github.com');
+  assert.ok(matchCustomGroup('https://github.com/notifications') !== null);
+  assert.notEqual(matchCustomGroup('https://github.com/' + 'a'.repeat(100)), null);
+  assert.equal(matchCustomGroup('https://gitlab.com/'), null);
+});
+
+test('matchCustomGroup matches hostnameEndsWith', () => {
+  resetPopupTestState({
+    customGroups: [
+      { hostname: null, hostnameEndsWith: '.notion.site', pathPrefix: null, groupKey: 'notion', groupLabel: 'Notion' },
+    ],
+  });
+  assert.ok(matchCustomGroup('https://myworkspace.notion.site/') !== null, 'should match .notion.site');
+  assert.ok(matchCustomGroup('https://github.com/') === null, 'should not match github.com');
+});
+
+test('matchCustomGroup matches pathPrefix when specified', () => {
+  resetPopupTestState({
+    customGroups: [
+      { hostname: 'github.com', pathPrefix: '/orgs/', groupKey: 'gh-org', groupLabel: 'GitHub Orgs' },
+    ],
+  });
+  const result = matchCustomGroup('https://github.com/orgs/team');
+  assert.ok(result !== null, 'should match /orgs/ path');
+  assert.equal(result.hostname, 'github.com');
+  assert.equal(matchCustomGroup('https://github.com/user/repo'), null, 'should not match user path');
+});
+
+test('matchCustomGroup returns null for empty groups', () => {
+  resetPopupTestState();
+  assert.equal(matchCustomGroup('https://github.com/'), null);
+});
+
+test('matchCustomGroup handles invalid URLs gracefully', () => {
+  resetPopupTestState();
+  assert.equal(matchCustomGroup(''), null);
+  assert.equal(matchCustomGroup('://invalid'), null);
+});
+
+// ---- getGroupDisplayLabel ----
+
+test('getGroupDisplayLabel returns translated labels for special kinds', () => {
+  globalThis.TabHarborI18n = { t: key => ({ homepagesLabel: 'Homepages', ungroupedLabel: 'Ungrouped' }[key] || key) };
+  assert.equal(getGroupDisplayLabel({ kind: 'landing', domain: '__landing-pages__' }), 'Homepages');
+  assert.equal(getGroupDisplayLabel({ kind: 'ungrouped', domain: '__ungrouped__' }), 'Ungrouped');
+});
+
+test('getGroupDisplayLabel returns group name for session kind', () => {
+  assert.equal(getGroupDisplayLabel({ kind: 'session', label: 'Work Tabs' }), 'Work Tabs');
+});
+
+test('getGroupDisplayLabel falls back to friendlyDomain for domain kind', () => {
+  assert.equal(getGroupDisplayLabel({ kind: 'domain', domain: 'www.google.com' }), 'Google');
+  assert.equal(getGroupDisplayLabel({ kind: 'custom', domain: 'github.com' }), 'GitHub');
+});
+
+test('getGroupDisplayLabel uses label for chrome-group kind', () => {
+  assert.equal(getGroupDisplayLabel({ kind: 'chrome-group', label: 'Research', domain: '__chrome_group__:1' }), 'Research');
+});
+
+test('getGroupDisplayLabel handles missing i18n by returning key', () => {
+  globalThis.TabHarborI18n = {};
+  globalThis.TabOutGroupOrder.normalizeGroupOrderState = () => ({});
+  assert.equal(getGroupDisplayLabel({ kind: 'ungrouped', domain: '__ungrouped__' }), 'ungroupedLabel');
+});
+
+// ---- buildPopupTabGroups integration ----
+
+test('buildPopupTabGroups is exposed globally', () => {
+  assert.equal(typeof globalThis.buildPopupTabGroups, 'function');
+});
+
+test('buildPopupTabGroups groups session-assigned tabs', () => {
+  resetPopupTestState({ landingPatterns: [] });
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://github.com', title: 'GitHub', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+  globalThis.popupState.sessionGroups = {
+    groups: [{ id: 's1', name: 'Work' }],
+    assignments: { '1': 's1' },
+  };
+
+  const groups = globalThis.buildPopupTabGroups();
+  const sessionGroup = groups.find(g => g.kind === 'session');
+  assert.ok(sessionGroup, 'session group should exist');
+  assert.equal(sessionGroup.tabs.length, 1);
+  assert.equal(sessionGroup.tabs[0].id, 1);
+});
+
+test('buildPopupTabGroups groups domain tabs', () => {
+  resetPopupTestState();
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://github.com/user', title: 'GitHub', windowId: 1, active: false, groupId: null },
+    { id: 2, url: 'https://github.com/org/team', title: 'Team', windowId: 1, active: false, groupId: null },
+    { id: 3, url: 'https://google.com/search', title: 'Search', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  const ghGroup = groups.find(g => g.domain === 'github.com');
+  assert.ok(ghGroup, 'github.com group should exist');
+  assert.equal(ghGroup.tabs.length, 2);
+  const googleGroup = groups.find(g => g.domain === 'google.com');
+  assert.ok(googleGroup, 'google.com group should exist');
+  assert.equal(googleGroup.tabs.length, 1);
+});
+
+test('buildPopupTabGroups places landing pages group at top', () => {
+  resetPopupTestState();
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://github.com/', title: 'GitHub', windowId: 1, active: false, groupId: null },
+    { id: 2, url: 'https://www.youtube.com/', title: 'YouTube', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  assert.equal(groups[0].kind, 'landing', 'landing group should be first');
+  assert.equal(groups[0].tabs.length, 2);
+});
+
+test('buildPopupTabGroups groups file:// URLs under local-files domain', () => {
+  resetPopupTestState();
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'file:///path/to/file', title: 'Local File', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  const localGroup = groups.find(g => g.domain === 'local-files');
+  assert.ok(localGroup, 'local-files group should exist');
+  assert.equal(localGroup.tabs.length, 1);
+  assert.equal(localGroup.tabs[0].id, 1);
+});
+
+test('buildPopupTabGroups skips tabs with unparseable URLs', () => {
+  globalThis._skipLoadPopupState = true;
+  resetPopupTestState();
+
+  // Tabs with empty URLs can't be parsed — they are skipped entirely
+  const tabA = { id: 1, url: '', title: 'Tab A', windowId: 1, active: false, groupId: 10 };
+  const tabB = { id: 2, url: '', title: 'Tab B', windowId: 1, active: false, groupId: 10 };
+  globalThis.popupState.openTabs = [tabA, tabB];
+  globalThis.popupState.tabGroups = [
+    { id: 10, title: 'Research', color: 'blue', collapsed: false, tabs: [tabA, tabB] },
+  ];
+
+  const groups = globalThis.buildPopupTabGroups();
+  assert.equal(groups.length, 0, 'tabs with unparseable URLs produce no groups');
+});
+
+// ---- renderShortcutCard ----
+
+test('renderShortcutCard renders image icon when iconKind is image', () => {
+  const shortcut = {
+    label: 'GitHub',
+    url: 'https://github.com',
+    iconKind: 'image',
+    icon: 'https://github.com/favicon.ico',
+  };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('data-action="open-popup-url"'));
+  assert.ok(html.includes('data-url="https://github.com"'));
+  assert.ok(html.includes('quick-shortcut-icon-custom'));
+  assert.ok(html.includes('src="https://github.com/favicon.ico"'));
+  assert.ok(html.includes('<span class="quick-shortcut-label">GitHub</span>'));
+});
+
+test('renderShortcutCard renders svg icon when iconKind is svg', () => {
+  const shortcut = {
+    label: 'Dashboard',
+    url: 'https://dashboard.example.com',
+    iconKind: 'svg',
+    icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>',
+  };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('data:image/svg+xml;charset=utf-8,'));
+  assert.ok(html.includes('quick-shortcut-icon'));
+  assert.ok(html.includes('quick-shortcut-label'));
+});
+
+test('renderShortcutCard renders glyph icon when iconKind is glyph', () => {
+  const shortcut = {
+    label: 'Bookmarks',
+    url: 'chrome://bookmarks',
+    iconKind: 'glyph',
+    icon: '★',
+  };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('quick-shortcut-custom-glyph'));
+  assert.ok(html.includes('>★</span>'));
+  assert.ok(html.includes('quick-shortcut-fallback'));
+});
+
+test('renderShortcutCard renders fallback label when no icon', () => {
+  const shortcut = {
+    label: 'Example',
+    url: 'https://www.example.com',
+  };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('quick-shortcut-fallback'));
+  assert.ok(!html.includes('quick-shortcut-icon"'), 'no quick-shortcut-icon img should be present');
+});
+
+test('renderShortcutCard escapes url and label in attributes', () => {
+  const shortcut = {
+    label: 'Test & "quoted" <label>',
+    url: 'https://example.com/path?a=1&b=2',
+    iconKind: '',
+  };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('&amp;'));
+  assert.ok(html.includes('&quot;'));
+  assert.ok(html.includes('&lt;'));
+});
+
+// ---- renderTabGroup ----
+
+test('renderTabGroup renders tab rows with favicon img', () => {
+  const group = {
+    domain: 'github.com',
+    label: 'GitHub',
+    kind: 'domain',
+    tabs: [
+      { id: 1, url: 'https://github.com', title: 'GitHub Home', favIconUrl: 'https://github.com/favicon.ico' },
+    ],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('popup-tab-group'));
+  assert.ok(html.includes('data-group-id="github.com"'));
+  assert.ok(html.includes('popup-tab-group-title'));
+  assert.ok(html.includes('data-action="open-popup-url"'));
+  assert.ok(html.includes('data-tab-id="1"'));
+  assert.ok(html.includes('data-action="close-popup-tab"'));
+});
+
+test('renderTabGroup renders fallback favicon when no faviconUrl', () => {
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [{ id: 2, url: 'https://example.com', title: 'Example' }],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('popup-tab-favicon-fallback'));
+});
+
+test('renderTabGroup includes fallback queue on favicon images', () => {
+  _restorePopupIcons();
+  try {
+    globalThis._popupIcons.getIconSources = () => ({
+      sources: [
+        'chrome-extension://abc/_favicon/?pageUrl=https%3A%2F%2Fexample.com&size=16',
+        'https://example.com/favicon.ico',
+        'https://fallback.example.com/favicon.ico',
+      ],
+      hostname: 'example.com',
+    });
+    const group = {
+      domain: 'example.com',
+      label: 'Example',
+      kind: 'domain',
+      tabs: [{ id: 3, url: 'https://example.com', title: 'Example' }],
+    };
+    const html = renderTabGroup(group, 0);
+    assert.ok(html.includes('data-fallback-src="https://example.com/favicon.ico"'));
+    assert.ok(html.includes('data-fallback-srcset="[&quot;https://fallback.example.com/favicon.ico&quot;]"'));
+  } finally {
+    _restorePopupIcons();
+  }
+});
+
+test('renderTabGroup sets correct CSS custom properties', () => {
+  const group = {
+    domain: 'test.com',
+    label: 'Test',
+    kind: 'domain',
+    tabs: [
+      { id: 10, url: 'https://test.com/a', title: 'A' },
+      { id: 11, url: 'https://test.com/b', title: 'B' },
+    ],
+  };
+  const html = renderTabGroup(group, 2);
+  assert.ok(html.includes('style="--g:2;--r:0"'));
+  assert.ok(html.includes('style="--g:2;--r:1"'));
+});
+
+test('renderTabGroup escapes title and url', () => {
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [{ id: 3, url: 'https://example.com?q="x"&y=1', title: 'Title & noise | Site' }],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('&amp;'));
+  assert.ok(html.includes('&quot;'));
+});
+
+test('renderTabGroup handles empty tabs array', () => {
+  const group = {
+    domain: 'empty.com',
+    label: 'Empty',
+    kind: 'domain',
+    tabs: [],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('popup-tab-group-list'));
+  assert.ok(!html.includes('popup-tab-row'));
+});
+
+// ---- renderGroupNav ----
+
+// Restore _popupIcons to known state before each group of tests
+const _origPopupIcons = { ...globalThis._popupIcons };
+const _restorePopupIcons = () => { Object.assign(globalThis._popupIcons, _origPopupIcons); };
+
+// ---- renderGroupNav ----
+
+test('renderGroupNav renders button with label', () => {
+  _restorePopupIcons();
+  globalThis._popupIcons.getGroupIcon = () => ({ src: '', fallbackLabel: '?' });
+  const group = { domain: 'github.com', label: 'GitHub', kind: 'domain' };
+  const html = renderGroupNav(group, 0);
+  assert.ok(html.includes('group-nav-button'));
+  assert.ok(html.includes('data-action="jump-popup-group"'));
+  assert.ok(html.includes('data-group-id="github.com"'));
+  // getGroupDisplayLabel transforms domain kind label via friendlyDomain
+  assert.ok(html.includes('aria-label="GitHub"'));
+  assert.ok(html.includes('style="--s:0"'));
+});
+
+test('renderGroupNav renders icon img when provided', () => {
+  _restorePopupIcons();
+  globalThis._popupIcons.getGroupIcon = () => ({ src: 'https://example.com/icon.png', fallbackLabel: 'EX' });
+  const group = { domain: 'example.com', label: 'Example', kind: 'domain' };
+  const html = renderGroupNav(group, 1);
+  assert.ok(html.includes('group-nav-icon'));
+  assert.ok(html.includes('src="https://example.com/icon.png"'));
+});
+
+test('renderGroupNav uses fallback when no icon', () => {
+  _restorePopupIcons();
+  globalThis._popupIcons.getGroupIcon = () => ({ src: '', fallbackLabel: '?' });
+  const group = { domain: 'another.com', label: 'Another', kind: 'domain' };
+  const html = renderGroupNav(group, 0);
+  assert.ok(!html.includes('group-nav-icon'));
+});
+
+test('renderGroupNav escapes label in aria-label', () => {
+  _restorePopupIcons();
+  globalThis._popupIcons.getGroupIcon = () => ({ src: '', fallbackLabel: '?' });
+  // Use chrome-group kind so label is NOT run through friendlyDomain (which would drop special chars)
+  const group = { domain: '__chrome_group__:1', label: 'Test & "Special" <Label>', kind: 'chrome-group' };
+  const html = renderGroupNav(group, 0);
+  assert.ok(html.includes('aria-label="Test &amp; &quot;Special&quot; &lt;Label&gt;"'));
+});
+
+// ---- popupState exposure ----
+
+test('popupState is exposed globally', () => {
+  assert.equal(typeof globalThis.popupState, 'object');
+  assert.equal(typeof globalThis.popupState.view, 'string');
+  assert.ok(Array.isArray(globalThis.popupState.openTabs));
+  assert.ok(Array.isArray(globalThis.popupState.quickShortcuts));
+});
+
+test('popupState.view defaults to shortcuts', () => {
+  assert.equal(globalThis.popupState.view, 'shortcuts');
+});
+
+// ---- getTabLabel: additional edge cases ----
+
+test('getTabLabel handles file:// URLs by falling back to URL path', () => {
+  const tab = { title: '', url: 'file:///Users/local/doc.pdf' };
+  const label = getTabLabel(tab);
+  assert.ok(label.length > 0);
+});
+
+test('getTabLabel handles youtube watch page with URL-like title', () => {
+  const tab = { title: 'https://www.youtube.com/watch?v=abc', url: 'https://www.youtube.com/watch?v=abc' };
+  const label = getTabLabel(tab);
+  assert.equal(label, 'YouTube Video');
+});
+
+test('getTabLabel uses title over URL for youtube watch when title is meaningful', () => {
+  const tab = { title: 'Cool Video - YouTube', url: 'https://www.youtube.com/watch?v=abc' };
+  const label = getTabLabel(tab);
+  assert.ok(label.length > 0);
+});
+
+// ---- matchCustomGroup: additional edge cases ----
+
+test('matchCustomGroup returns null for file:// URLs', () => {
+  globalThis.LOCAL_CUSTOM_GROUPS = [
+    { hostname: 'example.com', pathPrefix: null, groupKey: 'ex', groupLabel: 'Example' },
+  ];
+  assert.equal(matchCustomGroup('file:///Users/test/index.html'), null);
+});
+
+test('matchCustomGroup matches hostname without pathPrefix when pathPrefix is null', () => {
+  globalThis.LOCAL_CUSTOM_GROUPS = [
+    { hostname: 'example.com', pathPrefix: null, groupKey: 'ex', groupLabel: 'Example' },
+  ];
+  assert.ok(matchCustomGroup('https://example.com/any/path') !== null);
+  assert.ok(matchCustomGroup('https://example.com/') !== null);
+});
+
+// ---- buildPopupTabGroups: additional integration tests ----
+
+test('buildPopupTabGroups groups tabs by custom group rules', () => {
+  resetPopupTestState({
+    customGroups: [
+      { hostname: 'github.com', pathPrefix: null, groupKey: 'github', groupLabel: 'GitHub' },
+      { hostname: 'gitlab.com', pathPrefix: null, groupKey: 'gitlab', groupLabel: 'GitLab' },
+    ],
+    landingPatterns: [],
+  });
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://github.com/user', title: 'GitHub', windowId: 1, active: false, groupId: null },
+    { id: 2, url: 'https://gitlab.com/project', title: 'GitLab', windowId: 1, active: false, groupId: null },
+    { id: 3, url: 'https://other.com/page', title: 'Other', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  const gh = groups.find(g => g.kind === 'custom' && g.domain === 'github');
+  const gl = groups.find(g => g.kind === 'custom' && g.domain === 'gitlab');
+  const other = groups.find(g => g.kind === 'domain' && g.domain === 'other.com');
+  assert.ok(gh, 'github custom group should exist');
+  assert.equal(gh.tabs.length, 1);
+  assert.ok(gl, 'gitlab custom group should exist');
+  assert.equal(gl.tabs.length, 1);
+  assert.ok(other, 'other.com domain group should exist');
+  assert.equal(other.tabs.length, 1);
+});
+
+test('buildPopupTabGroups places landing pages before domain groups', () => {
+  resetPopupTestState();
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://github.com/', title: 'GitHub Home', windowId: 1, active: false, groupId: null },
+    { id: 2, url: 'https://other.com/page', title: 'Other', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  assert.equal(groups[0].kind, 'landing', 'landing group should be first');
+  const otherIdx = groups.findIndex(g => g.domain === 'other.com');
+  assert.ok(otherIdx > 0, 'domain group should come after landing');
+});
+
+test('buildPopupTabGroups handles custom landing page patterns', () => {
+  resetPopupTestState({
+    landingPatterns: [
+      { hostname: 'news.ycombinator.com', pathExact: ['/news'] },
+    ],
+  });
+
+  globalThis.popupState.openTabs = [
+    { id: 1, url: 'https://news.ycombinator.com/news', title: 'HN', windowId: 1, active: false, groupId: null },
+  ];
+  globalThis.popupState.tabGroups = [];
+
+  const groups = globalThis.buildPopupTabGroups();
+  const landing = groups.find(g => g.kind === 'landing');
+  assert.ok(landing, 'custom landing group should exist');
+  assert.equal(landing.tabs.length, 1);
+  assert.equal(landing.tabs[0].id, 1);
+});
+
+test('renderTabGroup reorders tabs by stored groupTabOrder', () => {
+  resetPopupTestState({ landingPatterns: [] });
+
+  globalThis.popupState.groupTabOrder = {
+    'example.com': ['https://example.com/a', 'https://example.com/b', 'https://example.com/c'],
+  };
+
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [
+      { id: 1, url: 'https://example.com/b', title: 'B' },
+      { id: 2, url: 'https://example.com/a', title: 'A' },
+      { id: 3, url: 'https://example.com/c', title: 'C' },
+    ],
+  };
+  const html = renderTabGroup(group, 0);
+  const idxA = html.indexOf('https://example.com/a');
+  const idxB = html.indexOf('https://example.com/b');
+  const idxC = html.indexOf('https://example.com/c');
+  assert.ok(idxA < idxB, 'A should appear before B');
+  assert.ok(idxB < idxC, 'B should appear before C');
+});
+
+test('renderTabGroup deduplicates tabs by URL', () => {
+  resetPopupTestState({ landingPatterns: [] });
+
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [
+      { id: 1, url: 'https://example.com/page', title: 'First' },
+      { id: 2, url: 'https://example.com/page', title: 'Duplicate' },
+    ],
+  };
+  const html = renderTabGroup(group, 0);
+  // Each tab row has data-tab-id in both the row <div> and the close <button>
+  const rowCount = (html.match(/popup-tab-row/g) || []).length;
+  assert.equal(rowCount, 1, 'duplicate URL tab should be removed, leaving 1 row');
+});
+
+// ---- isLandingPage: additional edge cases ----
+
+test('isLandingPage matches custom landing patterns', () => {
+  resetPopupTestState({
+    landingPatterns: [
+      { hostname: 'news.ycombinator.com', pathExact: ['/news'] },
+    ],
+  });
+  assert.equal(isLandingPage('https://news.ycombinator.com/news'), true);
+  assert.equal(isLandingPage('https://news.ycombinator.com/item?id=123'), false);
+});
+
+test('isLandingPage handles hostnameEndsWith in patterns', () => {
+  resetPopupTestState({
+    landingPatterns: [
+      { hostnameEndsWith: '.notion.site', pathExact: ['/'] },
+    ],
+  });
+  assert.equal(isLandingPage('https://myworkspace.notion.site/'), true);
+  assert.equal(isLandingPage('https://myworkspace.notion.site/page'), false);
+});
+
+// ---- renderTabGroup: additional edge cases ----
+
+test('renderTabGroup includes close button with correct data attributes', () => {
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [{ id: 5, url: 'https://example.com', title: 'Example' }],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('data-action="close-popup-tab"'));
+  assert.ok(html.includes('data-tab-id="5"'));
+});
+
+test('renderTabGroup renders tab title attribute for tooltip', () => {
+  const group = {
+    domain: 'example.com',
+    label: 'Example',
+    kind: 'domain',
+    tabs: [{ id: 1, url: 'https://example.com', title: 'Page & Title' }],
+  };
+  const html = renderTabGroup(group, 0);
+  assert.ok(html.includes('title="Page &amp; Title"'));
+});
+
+// ---- renderShortcutCard: additional edge cases ----
+
+test('renderShortcutCard handles index 0 with correct CSS var', () => {
+  const shortcut = { label: 'Home', url: 'https://home.com' };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('--s:0'));
+});
+
+test('renderShortcutCard uses url as label fallback', () => {
+  const shortcut = { url: 'https://no-label.com' };
+  const html = renderShortcutCard(shortcut, 0);
+  assert.ok(html.includes('https://no-label.com'));
+});
+
+// ---- renderGroupNav: additional edge cases ----
+
+test('renderGroupNav includes fallback src on img', () => {
+  _restorePopupIcons();
+  globalThis._popupIcons.getGroupIcon = () => ({
+    src: 'https://example.com/icon.png',
+    fallbackLabel: 'EX',
+    fallbackSrc: 'https://example.com/fallback.png',
+  });
+  const group = { domain: 'example.com', label: 'Example', kind: 'domain' };
+  const html = renderGroupNav(group, 0);
+  assert.ok(html.includes('data-fallback-src="https://example.com/fallback.png"'));
+});
diff --git a/extension/session-groups.js b/extension/session-groups.js
new file mode 100644
index 0000000..56639f8
--- /dev/null
+++ b/extension/session-groups.js
@@ -0,0 +1,142 @@
+'use strict';
+
+(function attachSessionGroups(globalScope) {
+  const EMPTY_STATE = {
+    groups: [],
+    assignments: {},
+  };
+
+  function normalizeSessionGroups(input) {
+    const groups = Array.isArray(input?.groups)
+      ? input.groups
+        .filter(group => group && group.id && group.name)
+        .map(group => ({
+          id: String(group.id),
+          name: String(group.name).trim(),
+          createdAt: group.createdAt || new Date().toISOString(),
+        }))
+      : [];
+
+    const assignments = {};
+    if (input?.assignments && typeof input.assignments === 'object') {
+      for (const [tabId, groupId] of Object.entries(input.assignments)) {
+        if (!groupId) continue;
+        assignments[String(tabId)] = String(groupId);
+      }
+    }
+
+    return {
+      groups,
+      assignments,
+    };
+  }
+
+  function addSessionGroup(state, name) {
+    const normalizedState = normalizeSessionGroups(state);
+    const cleanName = String(name || '').trim();
+    if (!cleanName) throw new Error('Group name is required');
+
+    const exists = normalizedState.groups.some(group => group.name.toLowerCase() === cleanName.toLowerCase());
+    if (exists) throw new Error('A group with that name already exists');
+
+    const group = {
+      id: `session-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      name: cleanName,
+      createdAt: new Date().toISOString(),
+    };
+
+    return {
+      state: {
+        ...normalizedState,
+        groups: [...normalizedState.groups, group],
+      },
+      group,
+    };
+  }
+
+  function assignTabToSessionGroup(state, tabId, groupId) {
+    const normalizedState = normalizeSessionGroups(state);
+    const exists = normalizedState.groups.some(group => group.id === String(groupId));
+    if (!exists) throw new Error('Group not found');
+
+    return {
+      ...normalizedState,
+      assignments: {
+        ...normalizedState.assignments,
+        [String(tabId)]: String(groupId),
+      },
+    };
+  }
+
+  function clearTabSessionGroup(state, tabId) {
+    const normalizedState = normalizeSessionGroups(state);
+    const assignments = { ...normalizedState.assignments };
+    delete assignments[String(tabId)];
+
+    return {
+      ...normalizedState,
+      assignments,
+    };
+  }
+
+  function renameSessionGroup(state, groupId, name) {
+    const normalizedState = normalizeSessionGroups(state);
+    const targetGroupId = String(groupId || '');
+    const cleanName = String(name || '').trim();
+    if (!targetGroupId) throw new Error('Group not found');
+    if (!cleanName) throw new Error('Group name is required');
+
+    const groupIndex = normalizedState.groups.findIndex(group => group.id === targetGroupId);
+    if (groupIndex === -1) throw new Error('Group not found');
+
+    const exists = normalizedState.groups.some(group =>
+      group.id !== targetGroupId && group.name.toLowerCase() === cleanName.toLowerCase()
+    );
+    if (exists) throw new Error('A group with that name already exists');
+
+    const groups = normalizedState.groups.map(group => (
+      group.id === targetGroupId
+        ? { ...group, name: cleanName }
+        : group
+    ));
+
+    return {
+      ...normalizedState,
+      groups,
+    };
+  }
+
+  function pruneSessionGroups(state, openTabIds) {
+    const normalizedState = normalizeSessionGroups(state);
+    const openIds = new Set((openTabIds || []).map(tabId => String(tabId)));
+    const assignments = {};
+
+    for (const [tabId, groupId] of Object.entries(normalizedState.assignments)) {
+      if (openIds.has(tabId)) assignments[tabId] = groupId;
+    }
+
+    const activeGroupIds = new Set(Object.values(assignments));
+    const groups = normalizedState.groups.filter(group => activeGroupIds.has(group.id));
+
+    return {
+      groups,
+      assignments,
+    };
+  }
+
+  const api = {
+    addSessionGroup,
+    assignTabToSessionGroup,
+    clearTabSessionGroup,
+    normalizeSessionGroups,
+    pruneSessionGroups,
+    renameSessionGroup,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutSessionGroups = api;
+  globalScope.TabOutEmptySessionGroups = EMPTY_STATE;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/session-groups.test.js b/extension/session-groups.test.js
new file mode 100644
index 0000000..e910c17
--- /dev/null
+++ b/extension/session-groups.test.js
@@ -0,0 +1,69 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  addSessionGroup,
+  assignTabToSessionGroup,
+  clearTabSessionGroup,
+  pruneSessionGroups,
+  renameSessionGroup,
+} = require('./session-groups.js');
+
+test('addSessionGroup creates a named group and keeps names unique', () => {
+  const initialState = { groups: [], assignments: {} };
+  const { state, group } = addSessionGroup(initialState, 'Work');
+
+  assert.equal(group.name, 'Work');
+  assert.equal(state.groups.length, 1);
+  assert.throws(() => addSessionGroup(state, 'Work'), /already exists/i);
+});
+
+test('assignTabToSessionGroup stores a single active assignment per tab', () => {
+  const initialState = {
+    groups: [{ id: 'g1', name: 'Work', createdAt: '2026-04-16T00:00:00.000Z' }],
+    assignments: {},
+  };
+
+  const assigned = assignTabToSessionGroup(initialState, 101, 'g1');
+  assert.equal(assigned.assignments['101'], 'g1');
+
+  const cleared = clearTabSessionGroup(assigned, 101);
+  assert.equal(cleared.assignments['101'], undefined);
+});
+
+test('pruneSessionGroups removes closed tabs and empty groups', () => {
+  const initialState = {
+    groups: [
+      { id: 'g1', name: 'Work', createdAt: '2026-04-16T00:00:00.000Z' },
+      { id: 'g2', name: 'Research', createdAt: '2026-04-16T00:01:00.000Z' },
+    ],
+    assignments: {
+      '101': 'g1',
+      '102': 'g2',
+    },
+  };
+
+  const pruned = pruneSessionGroups(initialState, [101]);
+
+  assert.deepEqual(pruned.assignments, { '101': 'g1' });
+  assert.deepEqual(pruned.groups.map(group => group.id), ['g1']);
+});
+
+test('renameSessionGroup updates the target name and preserves uniqueness', () => {
+  const initialState = {
+    groups: [
+      { id: 'g1', name: 'Work', createdAt: '2026-04-16T00:00:00.000Z' },
+      { id: 'g2', name: 'Research', createdAt: '2026-04-16T00:01:00.000Z' },
+    ],
+    assignments: {
+      '101': 'g1',
+    },
+  };
+
+  const renamed = renameSessionGroup(initialState, 'g1', 'Reading desk');
+  assert.equal(renamed.groups[0].name, 'Reading desk');
+  assert.equal(renamed.assignments['101'], 'g1');
+  assert.throws(() => renameSessionGroup(renamed, 'g1', 'Research'), /already exists/i);
+});
diff --git a/extension/session-manager.js b/extension/session-manager.js
new file mode 100644
index 0000000..3842240
--- /dev/null
+++ b/extension/session-manager.js
@@ -0,0 +1,1533 @@
+'use strict';
+
+const SAVED_TAB_SESSION_COLLAPSED_KEY = 'savedTabSessionCollapsedState';
+const SAVED_TAB_SESSION_ORDER_KEY = 'savedTabSessionOrder';
+const sessionDataApi = typeof require === 'function'
+  ? require('./tab-sessions.js')
+  : (globalThis.TabHarborTabSessions || {});
+
+const {
+  buildSessionGroupsFromTabs: sessionManagerBuildSessionGroupsFromTabs,
+  createSavedTabSessionFromTab: sessionManagerCreateSavedTabSessionFromTab,
+} = sessionDataApi;
+
+function normalizeSavedTabSessionOrder(input) {
+  if (!Array.isArray(input)) return [];
+  return [...new Set(input.map(id => String(id || '')).filter(Boolean))];
+}
+
+function normalizeSavedTabSessionCollapsedState(input, sessions = []) {
+  const sessionIds = new Set(
+    (Array.isArray(sessions) ? sessions : [])
+      .map(session => String(session?.id || '').trim())
+      .filter(Boolean)
+  );
+
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+
+  return Object.fromEntries(
+    Object.entries(input)
+      .map(([sessionId, collapsed]) => [String(sessionId || '').trim(), collapsed === true])
+      .filter(([sessionId, collapsed]) => sessionId && collapsed && (!sessionIds.size || sessionIds.has(sessionId)))
+  );
+}
+
+function applySavedTabSessionOrder(sessions = [], orderIds = []) {
+  const list = Array.isArray(sessions) ? sessions.slice() : [];
+  const normalizedOrder = normalizeSavedTabSessionOrder(orderIds);
+  if (!list.length || !normalizedOrder.length) return list;
+
+  const sessionMap = new Map(list.map(session => [String(session?.id || ''), session]));
+  const ordered = normalizedOrder.map(id => sessionMap.get(id)).filter(Boolean);
+  const seen = new Set(ordered.map(session => String(session?.id || '')));
+  const remainder = list.filter(session => !seen.has(String(session?.id || '')));
+  return [...ordered, ...remainder];
+}
+
+function buildSavedTabSessionOrder(sessions = []) {
+  return [...new Set((Array.isArray(sessions) ? sessions : []).map(session => String(session?.id || '')).filter(Boolean))];
+}
+
+function buildSavedTabSessionOrderWithInsertedSession(sessions = [], insertedSessionId = '', {
+  placement = 'after',
+  insertBeforeSessionId = '',
+} = {}) {
+  const normalizedInsertedId = String(insertedSessionId || '').trim();
+  if (!normalizedInsertedId) return buildSavedTabSessionOrder(sessions);
+
+  const currentOrder = buildSavedTabSessionOrder(sessions)
+    .filter(id => id !== normalizedInsertedId);
+  const normalizedBeforeId = String(insertBeforeSessionId || '').trim();
+  if (normalizedBeforeId) {
+    const insertIndex = currentOrder.indexOf(normalizedBeforeId);
+    if (insertIndex >= 0) {
+      currentOrder.splice(insertIndex, 0, normalizedInsertedId);
+      return currentOrder;
+    }
+  }
+
+  if (placement === 'before') {
+    currentOrder.unshift(normalizedInsertedId);
+    return currentOrder;
+  }
+
+  currentOrder.push(normalizedInsertedId);
+  return currentOrder;
+}
+
+function buildSavedSessionTabToken(sessionId = '', tabIndex = 0) {
+  const cleanSessionId = String(sessionId || '').trim();
+  const cleanTabIndex = Number(tabIndex);
+  if (!cleanSessionId || !Number.isInteger(cleanTabIndex)) return '';
+  return `${cleanSessionId}::${cleanTabIndex}`;
+}
+
+function parseSavedSessionTabToken(token = '') {
+  const raw = String(token || '');
+  const separatorIndex = raw.lastIndexOf('::');
+  if (separatorIndex <= 0) return null;
+  const sessionId = raw.slice(0, separatorIndex).trim();
+  const tabIndex = Number(raw.slice(separatorIndex + 2));
+  if (!sessionId || !Number.isInteger(tabIndex)) return null;
+  return { sessionId, tabIndex };
+}
+
+function reorderSavedSessionTabsByTokens(session = {}, orderTokens = []) {
+  const tabs = Array.isArray(session?.tabs) ? session.tabs : [];
+  const normalizedTokens = [...new Set((Array.isArray(orderTokens) ? orderTokens : []).map(String).filter(Boolean))];
+  return normalizedTokens
+    .map(token => {
+      const parsed = parseSavedSessionTabToken(token);
+      if (!parsed || parsed.sessionId !== String(session?.id || '')) return null;
+      return tabs[parsed.tabIndex] || null;
+    })
+    .filter(Boolean);
+}
+
+function moveSavedSessionTabsByTokens({
+  sourceSession = {},
+  targetSession = {},
+  sourceOrderTokens = [],
+  targetOrderTokens = [],
+  draggedToken = '',
+} = {}) {
+  const draggedMeta = parseSavedSessionTabToken(draggedToken);
+  if (!draggedMeta) return { sourceTabs: [], targetTabs: [] };
+
+  const sourceTabs = Array.isArray(sourceSession?.tabs) ? sourceSession.tabs : [];
+  const targetTabs = Array.isArray(targetSession?.tabs) ? targetSession.tabs : [];
+  const draggedTab = sourceTabs[draggedMeta.tabIndex] || null;
+  if (!draggedTab) return { sourceTabs: [], targetTabs: [] };
+
+  const nextSourceTabs = [...new Set((Array.isArray(sourceOrderTokens) ? sourceOrderTokens : []).map(String).filter(Boolean))]
+    .map(token => {
+      const parsed = parseSavedSessionTabToken(token);
+      if (!parsed || parsed.sessionId !== String(sourceSession?.id || '')) return null;
+      return sourceTabs[parsed.tabIndex] || null;
+    })
+    .filter(Boolean);
+
+  const nextTargetTabs = [...new Set((Array.isArray(targetOrderTokens) ? targetOrderTokens : []).map(String).filter(Boolean))]
+    .map(token => {
+      if (token === draggedToken) return draggedTab;
+      const parsed = parseSavedSessionTabToken(token);
+      if (!parsed || parsed.sessionId !== String(targetSession?.id || '')) return null;
+      return targetTabs[parsed.tabIndex] || null;
+    })
+    .filter(Boolean);
+
+  return {
+    sourceTabs: nextSourceTabs,
+    targetTabs: nextTargetTabs,
+  };
+}
+
+function detachSavedSessionTabToNewSession({
+  sessions = [],
+  draggedToken = '',
+  placement = 'after',
+  insertBeforeSessionId = '',
+  now = new Date().toISOString(),
+} = {}) {
+  const draggedMeta = parseSavedSessionTabToken(draggedToken);
+  if (!draggedMeta || typeof sessionManagerCreateSavedTabSessionFromTab !== 'function') {
+    return {
+      sessions: applySavedTabSessionOrder(sessions, buildSavedTabSessionOrder(sessions)),
+      orderIds: buildSavedTabSessionOrder(sessions),
+      createdSession: null,
+      sourceSessionRemoved: false,
+    };
+  }
+
+  const sourceSession = (Array.isArray(sessions) ? sessions : [])
+    .find(session => String(session?.id || '') === draggedMeta.sessionId);
+  const draggedTab = sourceSession?.tabs?.[draggedMeta.tabIndex] || null;
+  if (!sourceSession || !draggedTab) {
+    return {
+      sessions: applySavedTabSessionOrder(sessions, buildSavedTabSessionOrder(sessions)),
+      orderIds: buildSavedTabSessionOrder(sessions),
+      createdSession: null,
+      sourceSessionRemoved: false,
+    };
+  }
+
+  const createdSession = sessionManagerCreateSavedTabSessionFromTab({
+    sourceSession,
+    tab: draggedTab,
+    existingSessions: sessions,
+    now,
+  });
+  const remainingTabs = (sourceSession.tabs || [])
+    .filter((_, index) => index !== draggedMeta.tabIndex);
+  const sourceSessionRemoved = remainingTabs.length === 0;
+  const nextSessions = (Array.isArray(sessions) ? sessions : [])
+    .flatMap(session => {
+      if (String(session?.id || '') !== draggedMeta.sessionId) return [session];
+      if (sourceSessionRemoved) return [];
+      return [{
+        ...session,
+        tabs: remainingTabs,
+        groups: typeof sessionManagerBuildSessionGroupsFromTabs === 'function'
+          ? sessionManagerBuildSessionGroupsFromTabs(remainingTabs)
+          : (session.groups || []),
+      }];
+    });
+  const nextOrder = buildSavedTabSessionOrderWithInsertedSession(nextSessions, createdSession.id, {
+    placement,
+    insertBeforeSessionId,
+  });
+
+  return {
+    sessions: applySavedTabSessionOrder([...nextSessions, createdSession], nextOrder),
+    orderIds: nextOrder,
+    createdSession,
+    sourceSessionRemoved,
+  };
+}
+
+(function attachTabHarborSessionManager(globalScope) {
+  const exportsApi = {
+    SAVED_TAB_SESSION_COLLAPSED_KEY,
+    SAVED_TAB_SESSION_ORDER_KEY,
+    normalizeSavedTabSessionOrder,
+    normalizeSavedTabSessionCollapsedState,
+    applySavedTabSessionOrder,
+    buildSavedTabSessionOrder,
+    buildSavedTabSessionOrderWithInsertedSession,
+    buildSavedSessionTabToken,
+    detachSavedSessionTabToNewSession,
+    parseSavedSessionTabToken,
+    reorderSavedSessionTabsByTokens,
+    moveSavedSessionTabsByTokens,
+  };
+
+  if (!globalScope?.document || !globalScope?.chrome?.storage?.local) {
+    if (typeof module !== 'undefined' && module.exports) {
+      module.exports = exportsApi;
+    }
+    return;
+  }
+
+  const sessionStore = globalScope.TabHarborTabSessions || {};
+  const sessionIcons = globalScope.TabOutIconUtils || {};
+  const sessionI18n = globalScope.TabHarborI18n || {};
+
+  const {
+    addSavedTabSession: managerAddSavedTabSession,
+    buildSessionGroupsFromTabs: managerBuildSessionGroupsFromTabs,
+    createSavedTabSessionFromTab: managerCreateSavedTabSessionFromTab,
+    deleteSavedTabSession: managerDeleteSavedTabSession,
+    getSavedTabSessions: managerGetSavedTabSessions,
+    renameSavedTabSession: managerRenameSavedTabSession,
+    saveSavedTabSessions: managerSaveSavedTabSessions,
+    updateSavedTabSessionTabs: managerUpdateSavedTabSessionTabs,
+  } = sessionStore;
+
+  const {
+    escapeHtml: managerEscapeHtml,
+    escapeHtmlAttribute: managerEscapeHtmlAttribute,
+    getFallbackLabel: managerGetFallbackLabel,
+    getGroupIcon: managerGetGroupIcon,
+    getIconSources: managerGetIconSources,
+  } = sessionIcons;
+
+  const managerT = sessionI18n.t;
+  let sessionManagerPage = 'home';
+  let savedSessionOrderState = [];
+  let savedSessionRenameState = null;
+  let savedSessionSettingsState = null;
+  let savedSessionCollapsedState = {};
+  let savedSessionTabSuppressClickUntil = 0;
+  let draggedSavedSessionId = '';
+  let draggedSavedSessionButtonEl = null;
+  let savedSessionDragStartPoint = null;
+  let savedSessionDragPlaceholderEl = null;
+  let savedSessionTabDragState = null;
+  let draggedSavedSessionTabRowEl = null;
+  let savedSessionNewSessionSlotEl = null;
+  let savedSessionTabPlaceholderEl = null;
+
+  const SAVED_SESSION_SETTINGS_ICON = `<svg viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true"><path d="M416.4 958h191.2V849.7c0-12.7 6.4-25.5 19.1-31.9 31.9-12.7 63.7-31.9 89.2-51 12.7-6.4 25.5-6.4 38.2 0l95.6 57.3 95.6-165.7-95.6-57.3C837 588.5 830.6 575.7 837 563c0-19.1 6.4-31.9 6.4-51s0-31.9-6.4-51c0-12.7 6.4-25.5 12.7-31.9l95.6-57.3-95.6-165.7-95.6 57.3c-12.7 6.4-25.5 6.4-38.2 0-25.5-19.1-57.3-38.2-89.2-51-12.7-12.7-19.1-25.5-19.1-38.2V66H416.4v108.3c0 12.7-6.4 25.5-19.1 31.9-31.9 12.7-63.7 31.9-89.2 51-12.7 6.4-25.5 6.4-38.2 0l-95.6-51-95.6 165.6 95.6 57.3c12.7 6.4 19.1 19.1 12.7 31.9 0 19.1-6.4 31.9-6.4 51s0 31.9 6.4 51c6.4 12.7 0 25.5-12.7 31.9l-95.6 57.3 95.6 165.7 95.6-57.3c12.7-6.4 25.5-6.4 38.2 0 25.5 19.1 57.3 38.2 89.2 51 12.7 6.4 19.1 19.1 19.1 31.9V958z m223 63.7H384.6c-19.1 0-31.9-12.7-31.9-31.9v-121c-25.5-12.7-51-25.5-70.1-38.2l-101.9 63.7c-12.7 6.4-31.9 6.4-44.6-12.7L8.6 658.6c-12.7-19.1-6.4-38.2 12.7-44.6l101.9-63.7v-76.5L21.4 410.1c-19.1-6.4-25.5-25.5-12.7-44.6l127.4-223c6.4-12.7 25.5-19.1 44.6-6.4l101.9 63.7c19.1-12.7 44.6-31.9 70.1-38.2V34.1c0-19.1 12.7-31.9 31.9-31.9h254.9c19.1 0 31.9 12.7 31.9 31.9v121.1c25.5 12.7 51 25.5 70.1 38.2l101.9-63.7c12.7-6.4 31.9-6.4 44.6 12.7l127.4 223c12.7 19.1 6.4 38.2-12.7 44.6l-101.9 63.7v76.5l101.9 63.7c12.7 6.4 19.1 25.5 12.7 44.6L888 881.5c-6.4 12.7-25.5 19.1-44.6 12.7l-101.9-63.7c-19.1 12.7-44.6 31.9-70.1 38.2v121.1c-0.1 19.2-12.8 31.9-32 31.9zM512 703.2c-108.3 0-191.2-82.8-191.2-191.2S403.7 320.8 512 320.8 703.2 403.7 703.2 512 620.3 703.2 512 703.2z m0-318.6c-70.1 0-127.4 57.3-127.4 127.4S441.9 639.4 512 639.4 639.4 582.1 639.4 512 582.1 384.6 512 384.6z"></path></svg>`;
+  const SAVED_SESSION_RESTORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true"><path d="M538.67041016 118.74658203c-17.34257813 6.10400391-33.02050781 20.80986328-39.68085938 37.04238281-2.77382813 7.07519531-3.19042969 10.96171875-3.88476562 36.3515625l-0.83144532 28.44140625-4.85595703 0.97119141c-2.63671875 0.55371094-14.84560547 2.35722656-27.05361328 4.021875-44.12021484 5.96689453-83.9390625 18.03691406-123.48017578 37.321875-38.01621094 18.59326172-68.4 39.95859375-96.56367187 67.98339844-20.671875 20.53388672-31.21787109 33.29824219-46.61806641 56.60595703-27.19160156 41.06865234-44.11845703 87.40722656-51.88886719 141.79394531-2.35722656 16.65-2.08037109 65.20693359 0.55634766 83.9381836 10.95996094 79.22021484 47.17089844 151.228125 102.3899414 203.81044921 40.92890625 38.98564453 86.01855469 66.73535156 137.21484375 84.07617188 28.996875 9.85166016 43.70361328 9.29707031 57.16230469-2.63671875 10.95996094-9.57304687 14.15039063-26.91386719 7.35205078-40.37255859-4.29960937-8.46298828-8.32324219-11.37568359-29.13398437-21.78105469-45.78486328-22.61601563-77.00273438-52.72294922-95.87109375-92.54179688-16.23339844-34.40830078-19.56269531-72.69960937-9.43417969-111.54638672 3.60703125-14.01328125 13.31806641-35.93408203 21.64394531-48.97617187 27.46845703-42.87128906 78.52587891-75.47519531 136.51962891-87.12861328 7.63154297-1.52753906 15.81679687-2.91357422 18.31376953-3.19306641l4.71796875-0.41484375-0.13974609 24.27890625c-0.13710937 33.71484375 3.46992187 45.23027344 18.86835937 59.79726563 18.17578125 17.20371094 45.64775391 21.09023438 70.20527344 9.71191406 4.71445312-2.08037109 17.06572266-9.84902344 27.33134765-17.06572266 10.265625-7.35292969 25.38896484-17.89541016 33.57421875-23.44746093 29.96806641-20.80986328 79.77568359-55.49589844 98.50605469-68.53710938 24.83525391-17.48144531 62.01738281-43.14726563 86.43515625-60.075 31.63271484-21.6421875 37.87646484-26.91474609 43.28876953-36.07207031 10.82197266-18.17402344 11.23857422-38.29306641 1.52490235-57.71601563-6.10400391-12.07001953-15.26044922-20.11816406-46.89316406-41.4852539-15.67792969-10.54072266-43.42763672-29.41171875-61.74052735-41.89833985C614.70019531 136.64375 594.86064453 123.46191406 585.84130859 119.99462891c-12.34775391-4.71796875-35.65458984-5.41230469-47.17089843-1.24804688z m38.15332031 66.31611328c6.52148438 4.44111328 45.78486328 31.078125 87.40722656 59.38066406 41.62236328 28.16542969 93.51123047 63.26542969 115.57089844 78.11191407 21.92080078 14.70849609 39.81796875 27.33398438 39.81796875 27.88769531 0 0.55371094-2.35722656 2.49609375-5.1328125 4.29960937-6.24375 3.74677734-95.03789063 65.34931641-195.76230469 135.55019532-45.23115234 31.49472656-58.41210938 40.37255859-59.66015625 40.37255859-0.83144531 0-1.52578125-12.48310547-1.94238281-32.32441406l-0.41484375-32.1890625-4.57910156-9.29619141c-5.27167969-10.68134766-12.48662109-17.75830078-23.86230469-23.16796875-6.66123047-3.19042969-9.29707031-3.60791016-21.50507813-3.46992187-32.74365234 0.27949219-80.33203125 12.20976562-115.71064453 29.13574218-20.25703125 9.71191406-29.27373047 15.12333984-48.14296875 29.13574219C277.70117187 537.18945313 241.34960937 616.1328125 248.00732422 695.07529297c0.83408203 9.99052734 2.35722656 21.92167969 3.46992187 26.49990234 0.97119141 4.43935547 1.66289062 8.46386719 1.38603516 8.74072266-0.83144531 0.83320313-11.23857422-16.23251953-18.59150391-30.38378906-24.14091797-46.75517578-34.96113281-99.34013672-30.9383789-149.42373047 2.08212891-24.69550781 4.43847656-38.15332031 9.71191406-56.60771485 16.65-56.8828125 52.72207031-108.77080078 100.86591797-144.98261718 48.14208984-36.21269531 99.61435547-55.77539063 170.92792969-65.06982422 33.43535156-4.44111328 42.03808594-7.49179688 53.13779297-18.45351563 14.15214844-14.15039063 18.03603516-27.60908203 18.03603515-62.98857422 0-24.834375 0.69433594-27.60820312 6.24199219-26.08242187 1.52753906 0.41660156 8.04814453 4.30048828 14.56875 8.73984375z"></path></svg>`;
+
+  function getDashboardRuntime() {
+    return globalScope.TabHarborDashboardRuntime || {};
+  }
+
+  function getThemeControls() {
+    return globalScope.TabOutThemeControls || {};
+  }
+
+  function getSavedSessionRestoreModeValue() {
+    const themeControls = getThemeControls();
+    return typeof themeControls.getSavedSessionRestoreMode === 'function'
+      ? themeControls.getSavedSessionRestoreMode()
+      : 'new-window';
+  }
+
+  function getSavedSessionNavDisplayModeValue() {
+    const themeControls = getThemeControls();
+    return typeof themeControls.getSavedSessionNavDisplayMode === 'function'
+      ? themeControls.getSavedSessionNavDisplayMode()
+      : 'name';
+  }
+
+  async function persistSavedSessionRestoreMode(mode) {
+    const themeControls = getThemeControls();
+    if (typeof themeControls.saveSavedSessionRestoreMode === 'function') {
+      return themeControls.saveSavedSessionRestoreMode(mode);
+    }
+    return null;
+  }
+
+  async function persistSavedSessionNavDisplayMode(mode) {
+    const themeControls = getThemeControls();
+    if (typeof themeControls.saveSavedSessionNavDisplayMode === 'function') {
+      return themeControls.saveSavedSessionNavDisplayMode(mode);
+    }
+    return null;
+  }
+
+  function escapeText(value = '') {
+    return managerEscapeHtml ? managerEscapeHtml(value) : String(value || '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function escapeAttr(value = '') {
+    return managerEscapeHtmlAttribute ? managerEscapeHtmlAttribute(value) : String(value || '')
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function formatRelativeTime(dateValue = '') {
+    if (typeof timeAgo === 'function') return timeAgo(dateValue);
+    return String(dateValue || '');
+  }
+
+  function getSessionTabWord(count) {
+    return count === 1
+      ? (managerT ? managerT('tabsWordSingular') : 'tab')
+      : (managerT ? managerT('tabsWordPlural') : 'tabs');
+  }
+
+  function showManagerToast(message) {
+    if (typeof showToast === 'function') showToast(message);
+  }
+
+  function getErrorToast() {
+    return managerT ? managerT('toastSessionActionFailed') : 'Could not update saved tabs';
+  }
+
+  function resolvePageFromHash() {
+    return globalScope.location?.hash === '#saved-tabs' ? 'saved-tabs' : 'home';
+  }
+
+  async function setWorkspacePage(page, { updateHash = true, render = true } = {}) {
+    sessionManagerPage = page === 'saved-tabs' ? 'saved-tabs' : 'home';
+
+    document.querySelectorAll('[data-workspace-page]').forEach(panel => {
+      const isActive = panel.dataset.workspacePage === sessionManagerPage;
+      panel.classList.toggle('is-active', isActive);
+      panel.hidden = !isActive;
+    });
+
+    document.querySelectorAll('[data-action="switch-workspace-page"]').forEach(button => {
+      const isActive = button.dataset.page === sessionManagerPage;
+      button.classList.toggle('is-active', isActive);
+      button.setAttribute('aria-pressed', String(isActive));
+    });
+
+    document.body.classList.toggle('showing-saved-tabs-page', sessionManagerPage === 'saved-tabs');
+
+    if (updateHash) {
+      const nextHash = sessionManagerPage === 'saved-tabs' ? '#saved-tabs' : '#home';
+      if (globalScope.location && globalScope.location.hash !== nextHash) {
+        globalScope.history.replaceState(null, '', nextHash);
+      }
+    }
+
+    if (!render) return;
+
+    if (sessionManagerPage === 'saved-tabs') {
+      await renderSavedTabsPage();
+      return;
+    }
+
+    const runtime = getDashboardRuntime();
+    if (typeof runtime.renderDashboard === 'function') {
+      await runtime.renderDashboard();
+    }
+  }
+
+  function getSessionSummary(session) {
+    const tabCount = Array.isArray(session?.tabs) ? session.tabs.length : 0;
+    const tabWord = getSessionTabWord(tabCount);
+    return `${tabCount} ${tabWord} saved ${formatRelativeTime(session.savedAt)}`;
+  }
+
+  function renderSavedSessionTabRows(session) {
+    const tabs = Array.isArray(session?.tabs) ? session.tabs : [];
+    if (!tabs.length) return '';
+
+    return `
+      <div class="saved-session-tab-list" data-saved-session-tab-list="${escapeAttr(session.id)}">
+        ${tabs.map((tab, index) => {
+          const tabToken = buildSavedSessionTabToken(session.id, index);
+          const iconData = managerGetIconSources ? managerGetIconSources(tab, 16) : { hostname: '', sources: [] };
+          const fallbackLabel = managerGetFallbackLabel ? managerGetFallbackLabel(tab.title || tab.url, iconData.hostname) : '?';
+          const faviconUrl = iconData.sources?.[0] || '';
+          const fallbackUrl = iconData.sources?.[1] || '';
+          const fallbackSrcset = escapeAttr(JSON.stringify(iconData.sources?.slice(2) || []));
+          const label = tab.title || tab.url || 'Tab';
+          const safeLabel = escapeText(label);
+          const safeUrl = escapeText(tab.url || '');
+          const safeTooltip = escapeAttr(label);
+          return `
+            <div class="saved-session-tab-row" data-action="restore-saved-session-tab" data-saved-session-id="${escapeAttr(session.id)}" data-saved-tab-index="${index}" data-saved-tab-token="${escapeAttr(tabToken)}" data-session-id="${escapeAttr(session.id)}" data-tab-index="${index}">
+              <button class="drawer-reorder-handle saved-session-reorder-handle" type="button" data-saved-tab-drag-handle="tab" aria-label="${managerT ? managerT('dragReorderTab') : 'Drag to reorder tab'}">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" /></svg>
+              </button>
+              <div class="saved-session-tab-main">
+                ${faviconUrl ? `<img src="${escapeAttr(faviconUrl)}" alt="" data-fallback-src="${escapeAttr(fallbackUrl)}" data-fallback-srcset="${fallbackSrcset}">` : ''}
+                <span class="inline-favicon-fallback"${faviconUrl ? ' style="display:none"' : ''}>${escapeText(fallbackLabel)}</span>
+                <span class="saved-session-tab-title" title="${safeTooltip}">${safeLabel}</span>
+              </div>
+              <button class="chip-action chip-close saved-session-tab-delete" type="button" data-action="delete-saved-session-tab" data-session-id="${escapeAttr(session.id)}" data-tab-index="${index}" aria-label="${managerT ? managerT('deleteSessionButton') : 'Delete session'}" data-tooltip="${managerT ? managerT('deleteSessionButton') : 'Delete session'}">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+              </button>
+            </div>`;
+        }).join('')}
+      </div>`;
+  }
+
+  function renderSessionTabPreview(session) {
+    return renderSavedSessionTabRows(session);
+  }
+
+  function openSavedSessionRenameEditor(session) {
+    if (!session?.id) return;
+    savedSessionRenameState = {
+      sessionId: String(session.id),
+      value: String(session.name || '').trim() || 'Saved tabs',
+      shouldFocus: true,
+    };
+    void renderSavedTabsPage();
+  }
+
+  function closeSavedSessionRenameEditor() {
+    savedSessionRenameState = null;
+  }
+
+  function openSavedSessionSettings(sessionId = '') {
+    const cleanSessionId = String(sessionId || '').trim();
+    if (!cleanSessionId) return;
+    savedSessionSettingsState = { sessionId: cleanSessionId };
+    void renderSavedTabsPage();
+  }
+
+  function closeSavedSessionSettings() {
+    if (!savedSessionSettingsState) return;
+    savedSessionSettingsState = null;
+  }
+
+  function toggleSavedSessionSettings(sessionId = '') {
+    const cleanSessionId = String(sessionId || '').trim();
+    if (!cleanSessionId) return;
+    if (savedSessionSettingsState?.sessionId === cleanSessionId) {
+      closeSavedSessionSettings();
+      void renderSavedTabsPage();
+      return;
+    }
+    openSavedSessionSettings(cleanSessionId);
+  }
+
+  function isSavedSessionExpanded(sessionId = '') {
+    return savedSessionCollapsedState[String(sessionId || '')] !== true;
+  }
+
+  async function loadSavedSessionCollapsedState(sessions = []) {
+    const stored = await chrome.storage.local.get(SAVED_TAB_SESSION_COLLAPSED_KEY);
+    const normalized = normalizeSavedTabSessionCollapsedState(stored[SAVED_TAB_SESSION_COLLAPSED_KEY], sessions);
+    savedSessionCollapsedState = normalized;
+    await chrome.storage.local.set({ [SAVED_TAB_SESSION_COLLAPSED_KEY]: normalized });
+    return normalized;
+  }
+
+  async function saveSavedSessionCollapsedState(nextState = {}, sessions = []) {
+    savedSessionCollapsedState = normalizeSavedTabSessionCollapsedState(nextState, sessions);
+    await chrome.storage.local.set({ [SAVED_TAB_SESSION_COLLAPSED_KEY]: savedSessionCollapsedState });
+    return savedSessionCollapsedState;
+  }
+
+  async function toggleSavedSessionCollapsed(sessionId = '') {
+    const cleanSessionId = String(sessionId || '').trim();
+    if (!cleanSessionId) return;
+    const sessions = await getOrderedSavedSessions();
+    await saveSavedSessionCollapsedState({
+      ...savedSessionCollapsedState,
+      [cleanSessionId]: isSavedSessionExpanded(cleanSessionId),
+    }, sessions);
+    void renderSavedTabsPage();
+  }
+
+  async function submitSavedSessionRename() {
+    if (!savedSessionRenameState || !managerRenameSavedTabSession) return;
+
+    const targetId = String(savedSessionRenameState.sessionId || '');
+    const cleanName = String(savedSessionRenameState.value || '').trim();
+    if (!targetId || !cleanName) {
+      closeSavedSessionRenameEditor();
+      await renderSavedTabsPage();
+      return;
+    }
+
+    await managerRenameSavedTabSession(targetId, cleanName);
+    closeSavedSessionRenameEditor();
+    await renderSavedTabsPage();
+    showManagerToast(managerT ? managerT('toastRenamedGroup', { name: cleanName }) : `Renamed to ${cleanName}`);
+  }
+
+  async function saveSavedSessionTabsFromIndexes(sessionId, tabIndexes = []) {
+    if (!managerUpdateSavedTabSessionTabs) return;
+    const sessions = await getOrderedSavedSessions();
+    const session = sessions.find(item => String(item?.id || '') === String(sessionId || ''));
+    if (!session) return;
+    const normalizedIndexes = [...new Set((Array.isArray(tabIndexes) ? tabIndexes : []).map(index => Number(index)).filter(Number.isInteger))];
+    const nextTabs = normalizedIndexes
+      .map(index => session.tabs?.[index] || null)
+      .filter(Boolean);
+    await managerUpdateSavedTabSessionTabs(sessionId, nextTabs);
+  }
+
+  async function saveSavedSessionTabsFromTokens(sessionId, orderTokens = []) {
+    if (!managerUpdateSavedTabSessionTabs) return;
+    const sessions = await getOrderedSavedSessions();
+    const session = sessions.find(item => String(item?.id || '') === String(sessionId || ''));
+    if (!session) return;
+    const nextTabs = reorderSavedSessionTabsByTokens(session, orderTokens);
+    await managerUpdateSavedTabSessionTabs(sessionId, nextTabs);
+  }
+
+  function renderSavedSessionSettingsMenu(sessionId = '') {
+    const currentMode = getSavedSessionRestoreModeValue();
+    const navDisplayMode = getSavedSessionNavDisplayModeValue();
+    return `
+      <div class="theme-menu saved-session-settings-menu" id="savedSessionSettingsMenu-${escapeAttr(sessionId)}" role="dialog" aria-label="${managerT ? managerT('savedSessionSettingsPanel') : 'Session settings panel'}">
+        <div class="theme-menu-section">
+          <div class="theme-menu-row theme-menu-row-inline-select">
+            <label class="theme-menu-label" for="savedSessionRestoreMode-${escapeAttr(sessionId)}">${managerT ? managerT('savedSessionRestoreModeLabel') : 'Default open'}</label>
+            <select class="saved-session-settings-select" id="savedSessionRestoreMode-${escapeAttr(sessionId)}" data-action="change-saved-session-restore-mode" data-session-id="${escapeAttr(sessionId)}" aria-label="${managerT ? managerT('savedSessionRestoreModeLabel') : 'Default open'}">
+              <option value="current-window"${currentMode === 'current-window' ? ' selected' : ''}>${escapeText(managerT ? managerT('savedSessionRestoreModeCurrentWindow') : 'Current window')}</option>
+              <option value="new-window"${currentMode === 'new-window' ? ' selected' : ''}>${escapeText(managerT ? managerT('savedSessionRestoreModeNewWindow') : 'New window')}</option>
+            </select>
+          </div>
+        </div>
+        <div class="theme-menu-section">
+          <div class="theme-menu-row theme-menu-row-inline-select">
+            <label class="theme-menu-label" for="savedSessionNavDisplayMode-${escapeAttr(sessionId)}">${managerT ? managerT('savedSessionNavDisplayModeLabel') : 'Top nav display'}</label>
+            <select class="saved-session-settings-select" id="savedSessionNavDisplayMode-${escapeAttr(sessionId)}" data-action="change-saved-session-nav-display-mode" data-session-id="${escapeAttr(sessionId)}" aria-label="${managerT ? managerT('savedSessionNavDisplayModeLabel') : 'Top nav display'}">
+              <option value="icon"${navDisplayMode === 'icon' ? ' selected' : ''}>${escapeText(managerT ? managerT('savedSessionNavDisplayModeIcon') : 'Icon')}</option>
+              <option value="name"${navDisplayMode === 'name' ? ' selected' : ''}>${escapeText(managerT ? managerT('savedSessionNavDisplayModeName') : 'Group name')}</option>
+            </select>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  function renderSavedSessionsCountMarkup(sessions = []) {
+    const sessionWord = sessions.length === 1
+      ? (managerT ? managerT('sessionWordSingular') : 'session')
+      : (managerT ? managerT('sessionWordPlural') : 'sessions');
+    const settingsOpen = Boolean(savedSessionSettingsState);
+    return `
+      <div class="saved-session-count-tools">
+        <div class="saved-session-settings-wrap">
+          <button class="header-theme-trigger saved-session-settings-trigger" type="button" data-action="toggle-saved-session-settings" data-session-id="global" data-tooltip="${managerT ? managerT('savedSessionSettings') : 'Session settings'}" aria-label="${managerT ? managerT('savedSessionSettings') : 'Session settings'}" aria-expanded="${settingsOpen ? 'true' : 'false'}" aria-controls="savedSessionSettingsMenu-global">
+            ${SAVED_SESSION_SETTINGS_ICON}
+          </button>
+          ${settingsOpen ? renderSavedSessionSettingsMenu('global') : ''}
+        </div>
+        <span class="saved-session-count-text">${sessions.length ? `${sessions.length} ${sessionWord}` : ''}</span>
+      </div>`;
+  }
+
+  function renderSavedSessionCard(session) {
+    const sessionId = escapeAttr(session.id);
+    const expanded = isSavedSessionExpanded(session.id);
+    const renameEditorOpen = savedSessionRenameState?.sessionId === String(session.id);
+    const renameValue = renameEditorOpen ? (savedSessionRenameState?.value || session.name || 'Saved tabs') : (session.name || 'Saved tabs');
+    const safeRenameValue = escapeAttr(renameValue);
+    return `
+      <article class="saved-session-card${expanded ? '' : ' is-collapsed'}" data-session-id="${sessionId}">
+        <div class="saved-session-main">
+          <div class="saved-session-top">
+            <div class="saved-session-heading">
+              ${renameEditorOpen ? `
+                <form class="mission-rename-form" data-action="submit-saved-session-rename" data-session-id="${sessionId}">
+                  <input class="mission-rename-input saved-session-rename-input" type="text" value="${safeRenameValue}" data-saved-session-rename-input="${sessionId}" aria-label="${managerT ? managerT('renameGroup') : 'Rename group'}" autocomplete="off">
+                </form>
+              ` : `
+                <button class="mission-rename-trigger" type="button" data-action="rename-saved-session" data-session-id="${sessionId}" aria-label="${managerT ? managerT('renameGroup') : 'Rename group'}" title="${managerT ? managerT('renameGroup') : 'Rename group'}">
+                  <span class="mission-name">${escapeText(session.name || 'Saved tabs')}</span>
+                </button>
+              `}
+              <span>${escapeText(getSessionSummary(session))}</span>
+            </div>
+            <div class="mission-actions">
+              <button class="group-action-icon saved-session-collapse" type="button" data-action="toggle-saved-session-collapse" data-session-id="${sessionId}" aria-label="${expanded ? 'Collapse session' : 'Expand session'}" aria-expanded="${expanded ? 'true' : 'false'}">
+                ${expanded
+                  ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m18 15-6-6-6 6" /></svg>'
+                  : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" /></svg>'}
+              </button>
+              <button class="group-action-icon saved-session-restore" type="button" data-action="restore-tab-session" data-session-id="${sessionId}" aria-label="${managerT ? managerT('restoreSessionButton') : 'Restore'}" data-tooltip="${managerT ? managerT('restoreSessionButton') : 'Restore'}">
+                ${SAVED_SESSION_RESTORE_ICON}
+              </button>
+              <button class="group-action-icon group-action-close" type="button" data-action="delete-tab-session" data-session-id="${sessionId}" aria-label="${managerT ? managerT('deleteSessionButton') : 'Delete session'}" data-tooltip="${managerT ? managerT('deleteSessionButton') : 'Delete session'}">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+              </button>
+            </div>
+          </div>
+          <div class="saved-session-preview"${expanded ? '' : ' hidden'}>
+            ${renderSessionTabPreview(session)}
+          </div>
+        </div>
+      </article>`;
+  }
+
+  function getSavedSessionNavIconData(session) {
+    const firstTab = Array.isArray(session?.tabs) ? session.tabs[0] : null;
+    const label = getSavedSessionNavLabel(session);
+    if (managerGetGroupIcon) {
+      return managerGetGroupIcon({ tabs: firstTab ? [firstTab] : [] }, label, 32);
+    }
+    const iconData = managerGetIconSources
+      ? managerGetIconSources(firstTab || { title: label, url: firstTab?.url || '' }, 32)
+      : { hostname: '', primaryDomain: '', sources: [] };
+    const fallbackLabel = managerGetFallbackLabel
+      ? managerGetFallbackLabel(label, iconData.primaryDomain || iconData.hostname || '')
+      : '?';
+    return {
+      hostname: iconData.hostname || '',
+      primaryDomain: iconData.primaryDomain || '',
+      src: iconData.sources?.[0] || '',
+      fallbackSrc: iconData.sources?.[1] || '',
+      fallbackLabel,
+    };
+  }
+
+  function getSavedSessionNavLabel(session) {
+    return String(session?.name || (managerT ? managerT('workspacePageSavedTabs') : 'Saved tabs')).trim() || 'Saved tabs';
+  }
+
+  function renderSavedSessionNavButton(session) {
+    const sessionId = String(session?.id || '');
+    const safeSessionId = escapeAttr(sessionId);
+    const label = getSavedSessionNavLabel(session);
+    const safeTooltip = escapeAttr(label);
+    const iconData = getSavedSessionNavIconData(session);
+    const navDisplayMode = getSavedSessionNavDisplayModeValue();
+
+    if (navDisplayMode === 'name') {
+      return `
+        <button
+          class="group-nav-button saved-session-nav-button is-name-mode"
+          type="button"
+          data-action="jump-to-saved-session"
+          data-nav-kind="saved-sessions"
+          data-session-id="${safeSessionId}"
+          data-group-id="${safeSessionId}"
+          data-tooltip="${safeTooltip}"
+          aria-label="${managerT ? managerT('jumpToLabel', { label: safeTooltip }) : `Jump to ${safeTooltip}`}"
+          draggable="false"
+        >
+          <span class="saved-session-nav-label">${escapeText(label)}</span>
+        </button>`;
+    }
+
+    return `
+      <button
+        class="group-nav-button saved-session-nav-button"
+        type="button"
+        data-action="jump-to-saved-session"
+        data-nav-kind="saved-sessions"
+        data-session-id="${safeSessionId}"
+        data-group-id="${safeSessionId}"
+        data-tooltip="${safeTooltip}"
+        aria-label="${managerT ? managerT('jumpToLabel', { label: safeTooltip }) : `Jump to ${safeTooltip}`}"
+        draggable="false"
+      >
+        ${iconData.src
+          ? `<img class="group-nav-icon" src="${escapeAttr(iconData.src)}" alt="" draggable="false" data-fallback-src="${escapeAttr(iconData.fallbackSrc || '')}" data-fallback-srcset="${escapeAttr(JSON.stringify(iconData.fallbackSources?.slice(1) || []))}">`
+          : ''}
+        <span class="group-nav-fallback"${iconData.src ? ' style="display:none"' : ''}>${escapeText(iconData.fallbackLabel || '?')}</span>
+      </button>`;
+  }
+
+  function renderSavedTabsNavArea(sessions = []) {
+    const runtime = getDashboardRuntime();
+    const renderSwitch = typeof runtime.renderWorkspacePageSwitch === 'function'
+      ? runtime.renderWorkspacePageSwitch('saved-tabs')
+      : '';
+    const renderTheme = typeof runtime.renderWorkspaceThemeTools === 'function'
+      ? runtime.renderWorkspaceThemeTools()
+      : '';
+
+    return `
+      <div class="group-nav-list" data-nav-kind="saved-sessions">
+        ${sessions.map(renderSavedSessionNavButton).join('')}
+      </div>
+      ${renderSwitch}
+      ${renderTheme}`;
+  }
+
+  async function loadSavedTabSessionOrder(sessions = []) {
+    const stored = await chrome.storage.local.get(SAVED_TAB_SESSION_ORDER_KEY);
+    const normalized = normalizeSavedTabSessionOrder(stored[SAVED_TAB_SESSION_ORDER_KEY]);
+    const orderedSessions = applySavedTabSessionOrder(sessions, normalized);
+    const nextOrder = buildSavedTabSessionOrder(orderedSessions);
+    savedSessionOrderState = nextOrder;
+    await chrome.storage.local.set({ [SAVED_TAB_SESSION_ORDER_KEY]: nextOrder });
+    return nextOrder;
+  }
+
+  async function saveSavedTabSessionOrder(orderIds = []) {
+    savedSessionOrderState = normalizeSavedTabSessionOrder(orderIds);
+    await chrome.storage.local.set({ [SAVED_TAB_SESSION_ORDER_KEY]: savedSessionOrderState });
+    return savedSessionOrderState;
+  }
+
+  async function getOrderedSavedSessions() {
+    if (!managerGetSavedTabSessions) return [];
+    const sessions = await managerGetSavedTabSessions();
+    await loadSavedSessionCollapsedState(sessions);
+    await loadSavedTabSessionOrder(sessions);
+    return applySavedTabSessionOrder(sessions, savedSessionOrderState);
+  }
+
+  function getSavedSessionNavListEl() {
+    return document.querySelector('#workspaceTopNav .group-nav-list[data-nav-kind="saved-sessions"]');
+  }
+
+  function animateSavedSessionNavButtonNode(button, previousRect) {
+    if (!button || !previousRect || button.classList.contains('is-dragging')) return;
+
+    const nextRect = button.getBoundingClientRect();
+    const deltaX = previousRect.left - nextRect.left;
+    const deltaY = previousRect.top - nextRect.top;
+    if (!deltaX && !deltaY) return;
+
+    button.style.transition = 'none';
+    button.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+    requestAnimationFrame(() => {
+      button.style.transition = 'transform 180ms cubic-bezier(0.22, 1, 0.36, 1)';
+      button.style.transform = '';
+    });
+  }
+
+  function animateSavedSessionNavButtons(navListEl, previousRects) {
+    navListEl?.querySelectorAll('.saved-session-nav-button').forEach(button => {
+      const key = button.dataset.sessionId || '';
+      animateSavedSessionNavButtonNode(button, previousRects.get(key));
+    });
+  }
+
+  function ensureSavedSessionDragPlaceholder() {
+    if (savedSessionDragPlaceholderEl || !draggedSavedSessionButtonEl) return savedSessionDragPlaceholderEl;
+
+    savedSessionDragPlaceholderEl = document.createElement('div');
+    savedSessionDragPlaceholderEl.className = 'group-nav-placeholder';
+    draggedSavedSessionButtonEl.insertAdjacentElement('afterend', savedSessionDragPlaceholderEl);
+    return savedSessionDragPlaceholderEl;
+  }
+
+  function clearSavedSessionDragState() {
+    draggedSavedSessionId = '';
+    savedSessionDragStartPoint = null;
+    draggedSavedSessionButtonEl = null;
+    savedSessionDragPlaceholderEl?.remove();
+    savedSessionDragPlaceholderEl = null;
+    document.body.classList.remove('group-dragging');
+    document.querySelectorAll('.saved-session-nav-button.is-dragging').forEach(button => {
+      button.classList.remove('is-dragging');
+      button.style.removeProperty('--drag-left');
+      button.style.removeProperty('--drag-top');
+      button.style.removeProperty('transition');
+      button.style.removeProperty('transform');
+    });
+  }
+
+  function ensureSavedSessionTabPlaceholder(listEl) {
+    if (!draggedSavedSessionTabRowEl) return null;
+
+    if (!savedSessionTabPlaceholderEl) {
+      savedSessionTabPlaceholderEl = document.createElement('div');
+      savedSessionTabPlaceholderEl.className = 'saved-session-tab-placeholder';
+      savedSessionTabPlaceholderEl.style.height = `${draggedSavedSessionTabRowEl.getBoundingClientRect().height}px`;
+    }
+
+    if (listEl && savedSessionTabPlaceholderEl.parentElement !== listEl) {
+      listEl.appendChild(savedSessionTabPlaceholderEl);
+    }
+
+    return savedSessionTabPlaceholderEl;
+  }
+
+  function clearSavedSessionTabDropPreview() {
+    document.querySelectorAll('.saved-session-card.is-drop-target').forEach(card => {
+      card.classList.remove('is-drop-target');
+    });
+    document.body.classList.remove('saved-session-drop-new');
+    savedSessionNewSessionSlotEl?.remove();
+    savedSessionNewSessionSlotEl = null;
+  }
+
+  function setSavedSessionTabDropPreview(cardEl, {
+    createNewSession = false,
+    newSessionPlacement = 'after',
+    insertBeforeCardEl = null,
+  } = {}) {
+    clearSavedSessionTabDropPreview();
+    if (cardEl) cardEl.classList.add('is-drop-target');
+    if (!createNewSession) return;
+
+    document.body.classList.add('saved-session-drop-new');
+    const listEl = document.getElementById('savedSessionsList');
+    if (!listEl) return;
+
+    savedSessionNewSessionSlotEl = document.createElement('div');
+    savedSessionNewSessionSlotEl.className = 'saved-session-new-slot';
+    savedSessionNewSessionSlotEl.innerHTML = '<span class="saved-session-new-slot-line"></span>';
+    const firstCard = listEl.querySelector('.saved-session-card');
+    if (insertBeforeCardEl) {
+      listEl.insertBefore(savedSessionNewSessionSlotEl, insertBeforeCardEl);
+    } else if (newSessionPlacement === 'before' && firstCard) {
+      listEl.insertBefore(savedSessionNewSessionSlotEl, firstCard);
+    } else {
+      listEl.appendChild(savedSessionNewSessionSlotEl);
+    }
+  }
+
+  function clearSavedSessionTabDragState({ removeNode = false } = {}) {
+    const handleEl = savedSessionTabDragState?.handleEl || null;
+    const pointerId = savedSessionTabDragState?.pointerId;
+    savedSessionTabDragState = null;
+    savedSessionTabPlaceholderEl?.remove();
+    savedSessionTabPlaceholderEl = null;
+    clearSavedSessionTabDropPreview();
+    document.body.classList.remove('page-chip-list-dragging');
+    document.body.classList.remove('page-chip-drag-armed');
+
+    if (draggedSavedSessionTabRowEl) {
+      if (removeNode) draggedSavedSessionTabRowEl.remove();
+      draggedSavedSessionTabRowEl.classList.remove('is-dragging');
+      draggedSavedSessionTabRowEl.style.removeProperty('--drag-left');
+      draggedSavedSessionTabRowEl.style.removeProperty('--drag-top');
+      draggedSavedSessionTabRowEl.style.removeProperty('--drag-width');
+    }
+
+    if (handleEl && pointerId != null && typeof handleEl.releasePointerCapture === 'function') {
+      try {
+        if (handleEl.hasPointerCapture?.(pointerId)) handleEl.releasePointerCapture(pointerId);
+      } catch {}
+    }
+
+    draggedSavedSessionTabRowEl = null;
+  }
+
+  function updateDraggedSavedSessionTabPosition(clientX, clientY) {
+    if (!draggedSavedSessionTabRowEl || !savedSessionTabDragState) return;
+    draggedSavedSessionTabRowEl.style.setProperty('--drag-left', `${clientX - savedSessionTabDragState.offsetX}px`);
+    draggedSavedSessionTabRowEl.style.setProperty('--drag-top', `${clientY - savedSessionTabDragState.offsetY}px`);
+  }
+
+  function previewSavedSessionTabOrder(clientY) {
+    const listEl = savedSessionTabDragState?.listEl;
+    if (!listEl || !draggedSavedSessionTabRowEl || !savedSessionTabDragState) return;
+
+    const placeholder = ensureSavedSessionTabPlaceholder(listEl);
+    const items = [...listEl.querySelectorAll('.saved-session-tab-row:not(.is-dragging)')];
+
+    let insertBeforeItem = null;
+    for (const item of items) {
+      const rect = item.getBoundingClientRect();
+      if (clientY < rect.top + rect.height / 2) {
+        insertBeforeItem = item;
+        break;
+      }
+    }
+
+    if (insertBeforeItem) {
+      listEl.insertBefore(placeholder, insertBeforeItem);
+    } else {
+      listEl.appendChild(placeholder);
+    }
+  }
+
+  function buildSavedSessionTabOrderFromPreview() {
+    const listEl = savedSessionTabDragState?.listEl;
+    if (!listEl) return [];
+
+    return [...listEl.children]
+      .map(node => {
+        if (node === savedSessionTabPlaceholderEl) return savedSessionTabDragState?.tabToken || '';
+        return node.dataset?.savedTabToken || '';
+      })
+      .filter(Boolean);
+  }
+
+  function getSavedSessionCardFromPoint(clientX, clientY) {
+    const element = document.elementFromPoint(clientX, clientY);
+    return element?.closest?.('.saved-session-card') || null;
+  }
+
+  function getSavedSessionListFromCard(cardEl) {
+    return cardEl?.querySelector?.('[data-saved-session-tab-list]') || null;
+  }
+
+  function getSavedSessionTabDropTarget(clientX, clientY) {
+    const listEl = document.getElementById('savedSessionsList');
+    const cards = listEl ? [...listEl.querySelectorAll('.saved-session-card')] : [];
+    if (!listEl || !cards.length) return null;
+
+    const firstRect = cards[0].getBoundingClientRect();
+    const lastRect = cards[cards.length - 1].getBoundingClientRect();
+    const edgeThreshold = 18;
+    const gapThreshold = 24;
+
+    if (clientY <= firstRect.top + edgeThreshold) {
+      return { kind: 'new-session', placement: 'before', reason: 'top-edge' };
+    }
+
+    if (clientY >= lastRect.bottom - edgeThreshold) {
+      return { kind: 'new-session', placement: 'after', reason: 'bottom-edge' };
+    }
+
+    for (let index = 0; index < cards.length - 1; index += 1) {
+      const currentRect = cards[index].getBoundingClientRect();
+      const nextCardEl = cards[index + 1];
+      const nextRect = nextCardEl.getBoundingClientRect();
+      const gapTop = currentRect.bottom - gapThreshold;
+      const gapBottom = nextRect.top + gapThreshold;
+      if (clientY >= gapTop && clientY <= gapBottom) {
+        return {
+          kind: 'new-session',
+          placement: 'before',
+          insertBeforeCardEl: nextCardEl,
+          insertBeforeSessionId: nextCardEl.dataset?.sessionId || '',
+          reason: 'card-gap',
+        };
+      }
+    }
+
+    for (const cardEl of cards) {
+      const rect = cardEl.getBoundingClientRect();
+      const withinCardY = clientY >= rect.top && clientY <= rect.bottom;
+      if (!withinCardY) continue;
+      const targetListEl = getSavedSessionListFromCard(cardEl);
+      const sessionId = cardEl.dataset?.sessionId || '';
+      if (targetListEl && sessionId) {
+        return {
+          kind: 'session',
+          cardEl,
+          listEl: targetListEl,
+          sessionId,
+        };
+      }
+    }
+
+    return null;
+  }
+
+  function buildSavedSessionTabOrderFromList(listEl, draggedToken = '') {
+    if (!listEl) return [];
+    return [...listEl.children]
+      .map(node => {
+        if (node === savedSessionTabPlaceholderEl) return draggedToken;
+        return node.dataset?.savedTabToken || '';
+      })
+      .filter(Boolean);
+  }
+
+  function syncSavedSessionTabDropTarget(clientX, clientY) {
+    if (!savedSessionTabDragState) return;
+
+    const dropTarget = getSavedSessionTabDropTarget(clientX, clientY);
+    if (!dropTarget) {
+      savedSessionTabDragState = {
+        ...savedSessionTabDragState,
+        listEl: savedSessionTabDragState.sourceListEl || savedSessionTabDragState.listEl,
+        targetSessionId: savedSessionTabDragState.sessionId,
+        createNewSession: false,
+        newSessionPlacement: '',
+        insertBeforeSessionId: '',
+        lastResolvedDropTarget: null,
+      };
+      clearSavedSessionTabDropPreview();
+      return;
+    }
+
+    if (dropTarget.kind === 'new-session') {
+      savedSessionTabDragState = {
+        ...savedSessionTabDragState,
+        listEl: null,
+        targetSessionId: '',
+        createNewSession: true,
+        newSessionPlacement: dropTarget.placement || 'after',
+        insertBeforeSessionId: dropTarget.insertBeforeSessionId || '',
+        lastResolvedDropTarget: {
+          kind: 'new-session',
+          placement: dropTarget.placement || 'after',
+          insertBeforeSessionId: dropTarget.insertBeforeSessionId || '',
+          reason: dropTarget.reason || '',
+        },
+      };
+      savedSessionTabPlaceholderEl?.remove();
+      setSavedSessionTabDropPreview(null, {
+        createNewSession: true,
+        newSessionPlacement: savedSessionTabDragState.newSessionPlacement,
+        insertBeforeCardEl: dropTarget.insertBeforeCardEl || null,
+      });
+      return;
+    }
+
+    savedSessionTabDragState = {
+      ...savedSessionTabDragState,
+      listEl: dropTarget.listEl || savedSessionTabDragState.sourceListEl || savedSessionTabDragState.listEl,
+      targetSessionId: dropTarget.sessionId || savedSessionTabDragState.sessionId,
+      createNewSession: false,
+      newSessionPlacement: '',
+      insertBeforeSessionId: '',
+      lastResolvedDropTarget: {
+        kind: 'session',
+        sessionId: dropTarget.sessionId || '',
+      },
+    };
+    setSavedSessionTabDropPreview(dropTarget.cardEl || null);
+  }
+
+  async function moveSavedSessionTabAcrossSessions(sourceSessionId, targetSessionId, sourceOrder, targetOrder, draggedToken) {
+    if (!managerUpdateSavedTabSessionTabs) return;
+    const sessions = await getOrderedSavedSessions();
+    const sourceSession = sessions.find(item => String(item?.id || '') === String(sourceSessionId || ''));
+    const targetSession = sessions.find(item => String(item?.id || '') === String(targetSessionId || ''));
+    if (!sourceSession || !targetSession) return;
+
+    const { sourceTabs: nextSourceTabs, targetTabs: nextTargetTabs } = moveSavedSessionTabsByTokens({
+      sourceSession,
+      targetSession,
+      sourceOrderTokens: sourceOrder,
+      targetOrderTokens: targetOrder,
+      draggedToken,
+    });
+
+    await managerUpdateSavedTabSessionTabs(sourceSessionId, nextSourceTabs);
+    await managerUpdateSavedTabSessionTabs(targetSessionId, nextTargetTabs);
+  }
+
+  async function detachDraggedSavedSessionTabToNewSession(draggedToken, {
+    placement = 'after',
+    insertBeforeSessionId = '',
+  } = {}) {
+    if (!managerSaveSavedTabSessions) return null;
+    const sessions = await getOrderedSavedSessions();
+    const result = detachSavedSessionTabToNewSession({
+      sessions,
+      draggedToken,
+      placement,
+      insertBeforeSessionId,
+      now: new Date().toISOString(),
+    });
+    if (!result?.createdSession) return null;
+    await managerSaveSavedTabSessions(result.sessions);
+    await saveSavedTabSessionOrder(result.orderIds);
+    return result;
+  }
+
+  async function restoreSavedSessionTab(sessionId, tabIndex) {
+    const sessions = await getOrderedSavedSessions();
+    const session = sessions.find(item => String(item?.id || '') === String(sessionId || ''));
+    const tab = session?.tabs?.[tabIndex] || null;
+    if (!tab?.url) return;
+    const runtime = getDashboardRuntime();
+    if (typeof runtime.restoreSavedTabToBrowser === 'function') {
+      await runtime.restoreSavedTabToBrowser(tab.url);
+    } else {
+      await chrome.tabs.create({ url: tab.url, active: true });
+    }
+    showManagerToast(managerT ? managerT('toastSavedSessionTabRestored') : 'Restored tab');
+  }
+
+  function updateDraggedSavedSessionPosition(clientX, clientY) {
+    if (!draggedSavedSessionButtonEl || !savedSessionDragStartPoint) return;
+    draggedSavedSessionButtonEl.style.setProperty('--drag-left', `${clientX - savedSessionDragStartPoint.offsetX}px`);
+    draggedSavedSessionButtonEl.style.setProperty('--drag-top', `${clientY - savedSessionDragStartPoint.offsetY}px`);
+  }
+
+  function previewSavedSessionOrder(clientX) {
+    const navListEl = getSavedSessionNavListEl();
+    if (!navListEl || !draggedSavedSessionId) return;
+
+    const placeholder = ensureSavedSessionDragPlaceholder();
+    const previousRects = new Map();
+    const buttons = [...navListEl.querySelectorAll('.saved-session-nav-button:not(.is-dragging)')];
+
+    buttons.forEach(button => {
+      previousRects.set(button.dataset.sessionId || '', button.getBoundingClientRect());
+    });
+
+    let insertBeforeButton = null;
+    for (const button of buttons) {
+      const rect = button.getBoundingClientRect();
+      if (clientX < rect.left + rect.width / 2) {
+        insertBeforeButton = button;
+        break;
+      }
+    }
+
+    if (insertBeforeButton) {
+      navListEl.insertBefore(placeholder, insertBeforeButton);
+    } else {
+      navListEl.appendChild(placeholder);
+    }
+
+    animateSavedSessionNavButtons(navListEl, previousRects);
+  }
+
+  function buildSavedSessionOrderFromPreview() {
+    const navListEl = getSavedSessionNavListEl();
+    if (!navListEl || !draggedSavedSessionId) return savedSessionOrderState.slice();
+
+    return [...navListEl.children]
+      .map(node => {
+        if (node === savedSessionDragPlaceholderEl) return draggedSavedSessionId;
+        return node.dataset?.sessionId || '';
+      })
+      .filter(Boolean);
+  }
+
+  function highlightSavedSessionCard(sessionId = '') {
+    const target = document.querySelector(`.saved-session-card[data-session-id="${CSS.escape(String(sessionId || ''))}"]`);
+    if (!target) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    target.classList.add('group-nav-target');
+    setTimeout(() => target.classList.remove('group-nav-target'), 1200);
+  }
+
+  async function renderSavedSessionsList() {
+    const listEl = document.getElementById('savedSessionsList');
+    const emptyEl = document.getElementById('savedSessionsEmpty');
+    const countEl = document.getElementById('savedSessionsCount');
+    if (!listEl) return;
+
+    const sessions = await getOrderedSavedSessions();
+    const runtime = getDashboardRuntime();
+    if (typeof runtime.syncWorkspaceTopNavMarkup === 'function') {
+      runtime.syncWorkspaceTopNavMarkup(renderSavedTabsNavArea(sessions), true);
+    }
+
+    if (countEl) {
+      countEl.innerHTML = renderSavedSessionsCountMarkup(sessions);
+    }
+    listEl.innerHTML = sessions.map(renderSavedSessionCard).join('');
+    if (emptyEl) emptyEl.hidden = sessions.length > 0;
+  }
+
+  async function renderSavedTabsPage() {
+    await renderSavedSessionsList();
+    if (typeof setupImageErrorHandlers === 'function') setupImageErrorHandlers();
+    if (savedSessionRenameState?.shouldFocus) {
+      const focusId = String(savedSessionRenameState.sessionId || '');
+      requestAnimationFrame(() => {
+        const renameInput = document.querySelector(`[data-saved-session-rename-input="${CSS.escape(focusId)}"]`);
+        if (!renameInput) return;
+        renameInput.focus();
+        renameInput.select?.();
+        if (savedSessionRenameState && savedSessionRenameState.sessionId === focusId) {
+          savedSessionRenameState.shouldFocus = false;
+        }
+      });
+    }
+  }
+
+  async function saveCurrentWindowSession() {
+    const runtime = getDashboardRuntime();
+    if (typeof runtime.saveCurrentWindowTabSession !== 'function') return;
+    try {
+      const result = await runtime.saveCurrentWindowTabSession();
+      if (sessionManagerPage === 'saved-tabs') await renderSavedTabsPage();
+      showManagerToast(managerT
+        ? managerT('toastSessionSaved', { count: result?.session?.tabs?.length || 0 })
+        : 'Session saved');
+    } catch (error) {
+      console.error('[tab-harbor] Failed to save current window session:', error);
+      showManagerToast(getErrorToast());
+    }
+  }
+
+  async function restoreSession(sessionId) {
+    const runtime = getDashboardRuntime();
+    if (typeof runtime.restoreSavedTabSession !== 'function') return;
+    try {
+      const result = await runtime.restoreSavedTabSession(sessionId);
+      await renderSavedTabsPage();
+      showManagerToast(managerT
+        ? managerT('toastSessionRestored', { count: result?.restoredCount || 0 })
+        : 'Session restored');
+    } catch (error) {
+      console.error('[tab-harbor] Failed to restore tab session:', error);
+      showManagerToast(getErrorToast());
+    }
+  }
+
+  async function deleteSession(sessionId) {
+    if (!managerDeleteSavedTabSession) return;
+    try {
+      await managerDeleteSavedTabSession(sessionId);
+      await renderSavedTabsPage();
+      showManagerToast(managerT ? managerT('toastSessionDeleted') : 'Session deleted');
+    } catch (error) {
+      console.error('[tab-harbor] Failed to delete tab session:', error);
+      showManagerToast(getErrorToast());
+    }
+  }
+
+  function syncSavedSessionRenameInputValue(inputEl) {
+    if (!inputEl || !savedSessionRenameState) return;
+    savedSessionRenameState = {
+      ...savedSessionRenameState,
+      value: inputEl.value,
+    };
+  }
+
+  document.addEventListener('click', async event => {
+    if (event.target.closest('.saved-session-reorder-handle')) return;
+    const actionEl = event.target.closest('[data-action]');
+    if (!actionEl) return;
+
+    const action = actionEl.dataset.action;
+    if (action === 'switch-workspace-page') {
+      await setWorkspacePage(actionEl.dataset.page || 'home');
+      return;
+    }
+
+    if (action === 'save-current-window-session') {
+      if (actionEl.closest('#homePage')) return;
+      event.preventDefault();
+      await saveCurrentWindowSession();
+      return;
+    }
+
+    if (action === 'jump-to-saved-session') {
+      event.preventDefault();
+      highlightSavedSessionCard(actionEl.dataset.sessionId || '');
+      return;
+    }
+
+    if (action === 'restore-saved-session-tab') {
+      if (Date.now() < savedSessionTabSuppressClickUntil) return;
+      await restoreSavedSessionTab(actionEl.dataset.sessionId || '', Number(actionEl.dataset.tabIndex));
+      return;
+    }
+
+    if (action === 'rename-saved-session') {
+      event.preventDefault();
+      const sessions = await getOrderedSavedSessions();
+      const session = sessions.find(item => String(item?.id || '') === String(actionEl.dataset.sessionId || ''));
+      if (session) openSavedSessionRenameEditor(session);
+      return;
+    }
+
+    if (action === 'toggle-saved-session-collapse') {
+      event.preventDefault();
+      await toggleSavedSessionCollapsed(actionEl.dataset.sessionId || '');
+      return;
+    }
+
+    if (action === 'toggle-saved-session-settings') {
+      event.preventDefault();
+      event.stopPropagation();
+      toggleSavedSessionSettings(actionEl.dataset.sessionId || '');
+      return;
+    }
+
+    if (action === 'submit-saved-session-rename') {
+      event.preventDefault();
+      await submitSavedSessionRename();
+      return;
+    }
+
+    if (action === 'restore-tab-session') {
+      await restoreSession(actionEl.dataset.sessionId || '');
+      return;
+    }
+
+    if (action === 'delete-saved-session-tab') {
+      const sessionId = actionEl.dataset.sessionId || '';
+      const tabIndex = Number(actionEl.dataset.tabIndex);
+      if (!sessionId || !Number.isInteger(tabIndex) || !managerUpdateSavedTabSessionTabs) return;
+      const sessions = await getOrderedSavedSessions();
+      const session = sessions.find(item => String(item?.id || '') === String(sessionId));
+      if (!session) return;
+      const nextTabs = (session.tabs || []).filter((_, index) => index !== tabIndex);
+      await managerUpdateSavedTabSessionTabs(sessionId, nextTabs);
+      await renderSavedTabsPage();
+      showManagerToast(managerT ? managerT('toastSessionDeleted') : 'Session deleted');
+      return;
+    }
+
+    if (action === 'delete-tab-session') {
+      await deleteSession(actionEl.dataset.sessionId || '');
+    }
+  });
+
+  document.addEventListener('pointerdown', event => {
+    const button = event.target.closest('.saved-session-nav-button[data-nav-kind="saved-sessions"]');
+    if (!button || sessionManagerPage !== 'saved-tabs') return;
+
+    draggedSavedSessionId = button.dataset.sessionId || '';
+    draggedSavedSessionButtonEl = button;
+    const rect = button.getBoundingClientRect();
+    savedSessionDragStartPoint = {
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      moved: false,
+    };
+  });
+
+  document.addEventListener('pointermove', event => {
+    if (!draggedSavedSessionId || !savedSessionDragStartPoint || sessionManagerPage !== 'saved-tabs') return;
+
+    const distance = Math.hypot(event.clientX - savedSessionDragStartPoint.x, event.clientY - savedSessionDragStartPoint.y);
+    if (!savedSessionDragStartPoint.moved && distance < 2) return;
+
+    if (!savedSessionDragStartPoint.moved) {
+      savedSessionDragStartPoint.moved = true;
+      document.body.classList.add('group-dragging');
+      draggedSavedSessionButtonEl?.classList.add('is-dragging');
+      ensureSavedSessionDragPlaceholder();
+    }
+
+    updateDraggedSavedSessionPosition(event.clientX, event.clientY);
+    previewSavedSessionOrder(event.clientX);
+  });
+
+  document.addEventListener('pointerup', async () => {
+    if (!draggedSavedSessionId) return;
+
+    const moved = savedSessionDragStartPoint?.moved;
+    if (moved) {
+      await saveSavedTabSessionOrder(buildSavedSessionOrderFromPreview());
+    }
+
+    clearSavedSessionDragState();
+
+    if (moved && sessionManagerPage === 'saved-tabs') {
+      await renderSavedTabsPage();
+    }
+  });
+
+  document.addEventListener('pointercancel', () => {
+    if (!draggedSavedSessionId) return;
+    clearSavedSessionDragState();
+  });
+
+  document.addEventListener('pointerdown', event => {
+    const handleEl = event.target.closest('.saved-session-reorder-handle');
+    const rowEl = event.target.closest('.saved-session-tab-row');
+    const listEl = rowEl?.closest('[data-saved-session-tab-list]');
+    if (!handleEl || !rowEl || !listEl || sessionManagerPage !== 'saved-tabs') return;
+
+    const sessionId = rowEl.dataset.savedSessionId || '';
+    const tabIndex = Number(rowEl.dataset.savedTabIndex);
+    const tabToken = rowEl.dataset.savedTabToken || '';
+    if (!sessionId || !Number.isInteger(tabIndex) || !tabToken) return;
+
+    const rect = rowEl.getBoundingClientRect();
+    draggedSavedSessionTabRowEl = rowEl;
+    savedSessionTabDragState = {
+      sessionId,
+      targetSessionId: sessionId,
+      tabIndex,
+      tabToken,
+      listEl,
+      sourceListEl: listEl,
+      handleEl,
+      pointerId: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      createNewSession: false,
+      newSessionPlacement: '',
+      insertBeforeSessionId: '',
+      lastResolvedDropTarget: null,
+      moved: false,
+    };
+  });
+
+  document.addEventListener('pointermove', event => {
+    if (!savedSessionTabDragState || !draggedSavedSessionTabRowEl || sessionManagerPage !== 'saved-tabs') return;
+
+    const distance = Math.hypot(event.clientX - savedSessionTabDragState.x, event.clientY - savedSessionTabDragState.y);
+    if (!savedSessionTabDragState.moved && distance < 2) return;
+
+    if (!savedSessionTabDragState.moved) {
+      savedSessionTabDragState.moved = true;
+      document.body.classList.add('page-chip-list-dragging');
+      draggedSavedSessionTabRowEl.classList.add('is-dragging');
+      draggedSavedSessionTabRowEl.style.setProperty('--drag-width', `${draggedSavedSessionTabRowEl.getBoundingClientRect().width}px`);
+      ensureSavedSessionTabPlaceholder(savedSessionTabDragState.listEl);
+    }
+
+    updateDraggedSavedSessionTabPosition(event.clientX, event.clientY);
+    syncSavedSessionTabDropTarget(event.clientX, event.clientY);
+    if (!savedSessionTabDragState?.createNewSession) {
+      previewSavedSessionTabOrder(event.clientY);
+    }
+  });
+
+  document.addEventListener('pointerup', async () => {
+    if (!savedSessionTabDragState) return;
+    const moved = savedSessionTabDragState.moved;
+    const sessionId = savedSessionTabDragState.sessionId;
+    const draggedToken = savedSessionTabDragState.tabToken || '';
+    const nextOrder = buildSavedSessionTabOrderFromPreview();
+    const targetSessionId = savedSessionTabDragState.targetSessionId || sessionId;
+    const createNewSession = savedSessionTabDragState.createNewSession;
+    const newSessionPlacement = savedSessionTabDragState.newSessionPlacement || 'after';
+    const insertBeforeSessionId = savedSessionTabDragState.insertBeforeSessionId || '';
+    const sourceListEl = document.querySelector(`[data-saved-session-tab-list="${CSS.escape(sessionId)}"]`);
+    const sourceOrder = buildSavedSessionTabOrderFromList(sourceListEl);
+    clearSavedSessionTabDragState({ removeNode: moved });
+    if (moved) {
+      savedSessionTabSuppressClickUntil = Date.now() + 250;
+      if (createNewSession) {
+        await detachDraggedSavedSessionTabToNewSession(draggedToken, {
+          placement: newSessionPlacement,
+          insertBeforeSessionId,
+        });
+      } else if (targetSessionId === sessionId) {
+        await saveSavedSessionTabsFromTokens(sessionId, nextOrder);
+      } else {
+        await moveSavedSessionTabAcrossSessions(
+          sessionId,
+          targetSessionId,
+          sourceOrder.filter(token => token !== draggedToken),
+          nextOrder,
+          draggedToken
+        );
+      }
+      await renderSavedTabsPage();
+    }
+  });
+
+  document.addEventListener('pointercancel', () => {
+    if (!savedSessionTabDragState) return;
+    clearSavedSessionTabDragState();
+  });
+
+  document.addEventListener('pointerdown', event => {
+    if (!savedSessionSettingsState) return;
+    if (event.target.closest('.saved-session-settings-wrap')) return;
+    closeSavedSessionSettings();
+    void renderSavedTabsPage();
+  });
+
+  document.addEventListener('input', event => {
+    const inputEl = event.target.closest('.saved-session-rename-input');
+    if (!inputEl) return;
+    syncSavedSessionRenameInputValue(inputEl);
+  });
+
+  document.addEventListener('change', event => {
+    const navDisplaySelectEl = event.target.closest('[data-action="change-saved-session-nav-display-mode"]');
+    if (navDisplaySelectEl) {
+      void persistSavedSessionNavDisplayMode(navDisplaySelectEl.value);
+      return;
+    }
+    const selectEl = event.target.closest('[data-action="change-saved-session-restore-mode"]');
+    if (!selectEl) return;
+    void persistSavedSessionRestoreMode(selectEl.value);
+  });
+
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && savedSessionSettingsState) {
+      closeSavedSessionSettings();
+      void renderSavedTabsPage();
+      return;
+    }
+    const inputEl = event.target.closest('.saved-session-rename-input');
+    if (!inputEl || !savedSessionRenameState) return;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      void submitSavedSessionRename();
+      return;
+    }
+    if (event.key === 'Escape') {
+      closeSavedSessionRenameEditor();
+      void renderSavedTabsPage();
+      return;
+    }
+  });
+
+  document.addEventListener('focusout', event => {
+    const inputEl = event.target.closest('.saved-session-rename-input');
+    if (!inputEl || !savedSessionRenameState) return;
+    const nextFocused = event.relatedTarget;
+    if (nextFocused && nextFocused.closest?.('.mission-rename-form')) return;
+    void submitSavedSessionRename();
+  });
+
+  globalScope.addEventListener?.('hashchange', () => {
+    void setWorkspacePage(resolvePageFromHash(), { updateHash: false });
+  });
+
+  function initializeSessionManager() {
+    void setWorkspacePage(resolvePageFromHash(), { updateHash: false });
+  }
+
+  const api = {
+    ...exportsApi,
+    initializeSessionManager,
+    renderSavedTabsPage,
+    setWorkspacePage,
+  };
+
+  globalScope.TabHarborSessionManager = api;
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeSessionManager, { once: true });
+  } else {
+    initializeSessionManager();
+  }
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/session-manager.test.js b/extension/session-manager.test.js
new file mode 100644
index 0000000..bbf3930
--- /dev/null
+++ b/extension/session-manager.test.js
@@ -0,0 +1,222 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  SAVED_TAB_SESSION_COLLAPSED_KEY,
+  SAVED_TAB_SESSION_ORDER_KEY,
+  applySavedTabSessionOrder,
+  detachSavedSessionTabToNewSession,
+  buildSavedSessionTabToken,
+  buildSavedTabSessionOrder,
+  buildSavedTabSessionOrderWithInsertedSession,
+  moveSavedSessionTabsByTokens,
+  normalizeSavedTabSessionCollapsedState,
+  normalizeSavedTabSessionOrder,
+  parseSavedSessionTabToken,
+  reorderSavedSessionTabsByTokens,
+} = require('./session-manager.js');
+
+test('session manager exposes the saved session order storage key', () => {
+  assert.equal(SAVED_TAB_SESSION_ORDER_KEY, 'savedTabSessionOrder');
+});
+
+test('session manager exposes the saved session collapsed storage key', () => {
+  assert.equal(SAVED_TAB_SESSION_COLLAPSED_KEY, 'savedTabSessionCollapsedState');
+});
+
+test('normalizeSavedTabSessionOrder keeps unique non-empty ids in order', () => {
+  assert.deepEqual(
+    normalizeSavedTabSessionOrder(['session-a', '', null, 'session-b', 'session-a']),
+    ['session-a', 'session-b']
+  );
+});
+
+test('normalizeSavedTabSessionCollapsedState keeps only explicit true flags for known sessions', () => {
+  assert.deepEqual(
+    normalizeSavedTabSessionCollapsedState(
+      {
+        'session-a': true,
+        'session-b': false,
+        '': true,
+        'session-c': 'yes',
+      },
+      [
+        { id: 'session-a' },
+        { id: 'session-b' },
+      ]
+    ),
+    { 'session-a': true }
+  );
+});
+
+test('applySavedTabSessionOrder sorts sessions by persisted ids and appends new ones', () => {
+  const ordered = applySavedTabSessionOrder(
+    [
+      { id: 'session-c', name: 'C' },
+      { id: 'session-a', name: 'A' },
+      { id: 'session-b', name: 'B' },
+    ],
+    ['session-b', 'session-a']
+  );
+
+  assert.deepEqual(
+    ordered.map(session => session.id),
+    ['session-b', 'session-a', 'session-c']
+  );
+});
+
+test('buildSavedTabSessionOrder reflects the current ordered session ids', () => {
+  assert.deepEqual(
+    buildSavedTabSessionOrder([
+      { id: 'session-b' },
+      { id: 'session-a' },
+      { id: 'session-b' },
+    ]),
+    ['session-b', 'session-a']
+  );
+});
+
+test('saved session tab tokens round-trip session id and index', () => {
+  const token = buildSavedSessionTabToken('session-a', 2);
+  assert.equal(token, 'session-a::2');
+  assert.deepEqual(parseSavedSessionTabToken(token), { sessionId: 'session-a', tabIndex: 2 });
+});
+
+test('reorderSavedSessionTabsByTokens reorders tabs within one session', () => {
+  const reordered = reorderSavedSessionTabsByTokens(
+    {
+      id: 'session-a',
+      tabs: [{ title: 'A' }, { title: 'B' }, { title: 'C' }],
+    },
+    ['session-a::2', 'session-a::0', 'session-a::1']
+  );
+
+  assert.deepEqual(reordered.map(tab => tab.title), ['C', 'A', 'B']);
+});
+
+test('moveSavedSessionTabsByTokens preserves target tabs when moving across sessions', () => {
+  const moved = moveSavedSessionTabsByTokens({
+    sourceSession: {
+      id: 'session-a',
+      tabs: [{ title: 'A' }, { title: 'A2' }],
+    },
+    targetSession: {
+      id: 'session-b',
+      tabs: [{ title: 'B' }],
+    },
+    sourceOrderTokens: ['session-a::1'],
+    targetOrderTokens: ['session-a::0', 'session-b::0'],
+    draggedToken: 'session-a::0',
+  });
+
+  assert.deepEqual(moved.sourceTabs.map(tab => tab.title), ['A2']);
+  assert.deepEqual(moved.targetTabs.map(tab => tab.title), ['A', 'B']);
+});
+
+test('buildSavedTabSessionOrderWithInsertedSession inserts new sessions at the top, bottom, or before a gap target', () => {
+  const sessions = [
+    { id: 'session-a', name: 'A' },
+    { id: 'session-b', name: 'B' },
+    { id: 'session-c', name: 'C' },
+  ];
+
+  assert.deepEqual(
+    buildSavedTabSessionOrderWithInsertedSession(sessions, 'session-new', {
+      placement: 'before',
+    }),
+    ['session-new', 'session-a', 'session-b', 'session-c']
+  );
+
+  assert.deepEqual(
+    buildSavedTabSessionOrderWithInsertedSession(sessions, 'session-new', {
+      placement: 'after',
+    }),
+    ['session-a', 'session-b', 'session-c', 'session-new']
+  );
+
+  assert.deepEqual(
+    buildSavedTabSessionOrderWithInsertedSession(sessions, 'session-new', {
+      placement: 'before',
+      insertBeforeSessionId: 'session-c',
+    }),
+    ['session-a', 'session-b', 'session-new', 'session-c']
+  );
+});
+
+test('detachSavedSessionTabToNewSession inserts a new middle session and rebuilds the source tabs/groups', () => {
+  const result = detachSavedSessionTabToNewSession({
+    sessions: [
+      {
+        id: 'session-a',
+        name: 'Morning',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [
+          { url: 'https://a.test', title: 'A', groupKey: 'group-a', groupLabel: 'Group A' },
+          { url: 'https://b.test', title: 'B', groupKey: 'group-b', groupLabel: 'Group B' },
+        ],
+        groups: [
+          { key: 'group-a', label: 'Group A', manualGroupId: '', tabUrls: ['https://a.test'] },
+          { key: 'group-b', label: 'Group B', manualGroupId: '', tabUrls: ['https://b.test'] },
+        ],
+      },
+      {
+        id: 'session-c',
+        name: 'Later',
+        savedAt: '2026-05-22T08:10:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://c.test', title: 'C' }],
+        groups: [],
+      },
+    ],
+    draggedToken: 'session-a::1',
+    placement: 'before',
+    insertBeforeSessionId: 'session-c',
+    now: '2026-05-22T09:30:00.000Z',
+  });
+
+  assert.deepEqual(result.orderIds, [
+    'session-a',
+    result.createdSession.id,
+    'session-c',
+  ]);
+  assert.deepEqual(result.sessions[0].tabs.map(tab => tab.url), ['https://a.test']);
+  assert.deepEqual(result.sessions[0].groups.map(group => group.key), ['group-a']);
+  assert.equal(result.createdSession.name, 'B');
+  assert.deepEqual(result.createdSession.tabs.map(tab => tab.url), ['https://b.test']);
+});
+
+test('detachSavedSessionTabToNewSession deletes the source session when its last tab is moved out', () => {
+  const result = detachSavedSessionTabToNewSession({
+    sessions: [
+      {
+        id: 'session-a',
+        name: 'Solo',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://solo.test', title: 'Solo' }],
+        groups: [],
+      },
+      {
+        id: 'session-b',
+        name: 'Next',
+        savedAt: '2026-05-22T08:10:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://next.test', title: 'Next' }],
+        groups: [],
+      },
+    ],
+    draggedToken: 'session-a::0',
+    placement: 'before',
+    insertBeforeSessionId: 'session-b',
+    now: '2026-05-22T09:30:00.000Z',
+  });
+
+  assert.equal(result.sourceSessionRemoved, true);
+  assert.deepEqual(
+    result.sessions.map(session => session.id),
+    [result.createdSession.id, 'session-b']
+  );
+});
diff --git a/extension/style.css b/extension/style.css
new file mode 100644
index 0000000..8ca42b1
--- /dev/null
+++ b/extension/style.css
@@ -0,0 +1,4769 @@
+/* ============================================================
+   Tab Mission Control — Dashboard Styles
+   Extracted directly from mockup.html — do not modify unless
+   also updating the mockup. This is the approved design.
+   ============================================================ */
+
+:root {
+  --ink: #1a1613;
+  --paper: #f8f5f0;
+  --warm-gray: #e8e2da;
+  --muted: #9a918a;
+  --accent-amber: #c8713a;
+  --accent-sage: #5a7a62;
+  --accent-slate: #5a6b7a;
+  --accent-rose: #b35a5a;
+  --workspace-accent: #8a653f;
+  --workspace-accent-soft: #f2e7db;
+  --workspace-accent-border: #d4b396;
+  --workspace-accent-contrast: #fffaf5;
+  --status-active: #3d7a4a;
+  --status-cooling: #b8892e;
+  --status-abandoned: #b35a5a;
+  --card-bg: #fffdf9;
+  --shadow: rgba(26, 22, 19, 0.06);
+  --page-custom-background: none;
+  --theme-accent-soft: color-mix(in srgb, var(--accent-amber) 10%, var(--card-bg) 90%);
+  --theme-accent-muted: color-mix(in srgb, var(--accent-amber) 18%, var(--warm-gray) 82%);
+  --theme-accent-strong: color-mix(in srgb, var(--accent-amber) 72%, var(--ink) 28%);
+  --theme-control-hover: color-mix(in srgb, var(--ink) 8%, transparent);
+  --custom-surface-opacity: 14%;
+  --custom-border-opacity: 14%;
+  --custom-badge-opacity: 4%;
+  --custom-fallback-opacity: 5%;
+  --ui-scale: 1;
+  --shortcut-scale: 1;
+  --ui-font-8: 8px;
+  --ui-font-9: 9px;
+  --ui-font-10: 10px;
+  --ui-font-11: 11px;
+  --ui-font-12: 12px;
+  --ui-font-13: 13px;
+  --ui-font-14: 14px;
+  --ui-font-15: 15px;
+  --ui-font-16: 16px;
+  --ui-font-17: 17px;
+  --ui-font-18: 18px;
+  --ui-font-20: 20px;
+  --ui-font-22: 22px;
+  --ui-font-24: 24px;
+  --ui-font-28: 28px;
+  --ui-font-40: 40px;
+  --quick-shortcut-card-size: 76px;
+  --quick-shortcut-shell-size: 40px;
+  --quick-shortcut-icon-wrap-size: 40px;
+  --quick-shortcut-icon-size: 22px;
+  --quick-shortcut-label-size: 11px;
+  --floating-surface-opacity: clamp(82%, calc(var(--custom-surface-opacity) + 54%), 94%);
+  --floating-border-opacity: clamp(30%, calc(var(--custom-border-opacity) + 18%), 64%);
+  --panel-surface-opacity: 92%;
+  --panel-card-opacity: clamp(74%, calc(var(--custom-surface-opacity) + 48%), 94%);
+  --drawer-trigger-surface: color-mix(in srgb, var(--card-bg) 94%, var(--paper) 6%);
+  --drawer-trigger-surface-hover: color-mix(in srgb, var(--card-bg) 88%, var(--workspace-accent-soft) 12%);
+  --drawer-trigger-border: color-mix(in srgb, var(--warm-gray) 64%, var(--workspace-accent-border) 36%);
+  --drawer-trigger-border-hover: color-mix(in srgb, var(--warm-gray) 36%, var(--workspace-accent-border) 64%);
+  --drawer-trigger-icon: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
+  --tooltip-surface: color-mix(in srgb, var(--workspace-accent-soft) 32%, var(--card-bg) 68%);
+  --tooltip-border: color-mix(in srgb, var(--workspace-accent-border) 72%, var(--warm-gray) 28%);
+  --tooltip-text: var(--workspace-chip-text);
+  --banner-action-bg: var(--workspace-accent);
+  --banner-action-bg-hover: color-mix(in srgb, var(--workspace-accent) 82%, var(--ink) 18%);
+  --banner-action-text: var(--workspace-accent-contrast);
+  --workspace-chip-bg: color-mix(in srgb, var(--workspace-accent-soft) 66%, var(--card-bg) 34%);
+  --workspace-chip-bg-strong: color-mix(in srgb, var(--workspace-accent-soft) 84%, var(--card-bg) 16%);
+  --workspace-chip-text: var(--workspace-accent);
+  --workspace-chip-border: color-mix(in srgb, var(--workspace-accent-border) 78%, var(--card-bg) 22%);
+  --drawer-tab-idle: color-mix(in srgb, var(--muted) 76%, var(--workspace-chip-text) 24%);
+  --drawer-tab-hover: var(--workspace-chip-text);
+  --drawer-tab-pressed: color-mix(in srgb, var(--workspace-chip-text) 84%, var(--ink) 16%);
+  --drawer-tab-underline-hover: color-mix(in srgb, var(--workspace-accent-border) 64%, transparent);
+  --drawer-tab-underline-active: color-mix(in srgb, var(--workspace-accent-border) 72%, transparent);
+  --drawer-tab-underline-pressed: color-mix(in srgb, var(--workspace-accent-border) 78%, transparent);
+  --focus-ring: color-mix(in srgb, var(--workspace-accent) 56%, white 44%);
+  --focus-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent-soft) 82%, transparent);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Public Sans', sans-serif;
+  font-size: var(--ui-font-14);
+  background-color: var(--paper);
+  background-image: var(--page-custom-background);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  color: var(--ink);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  position: relative;
+}
+
+/* Subtle paper texture */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1;
+}
+
+body.theme-tone-dark::before {
+  opacity: 0.5;
+}
+
+.container {
+  position: relative;
+  z-index: 2;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 40px 32px 72px;
+}
+
+/* When the saved-for-later sidebar is open, expand the container
+   so the main column and right rail have enough room */
+.container:has(.dashboard-columns) {
+  max-width: 1260px;
+}
+
+/* ---- Header ---- */
+.page-header {
+  display: flex;
+  justify-content: stretch;
+  align-items: flex-start;
+  margin-bottom: 0;
+  padding: 8px 0 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  text-align: left;
+}
+
+.header-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 18px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.header-left h1 {
+  font-family: 'Libre Caslon Display', serif;
+  font-weight: 400;
+  font-size: 40px;
+  font-size: var(--ui-font-40);
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: 0;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.header-left .date {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  color: var(--muted);
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: 1;
+  transform: translateY(1px);
+}
+
+.hitokoto {
+  margin-top: 10px;
+  font-family: 'Libre Caslon Display', serif;
+  font-size: 14px;
+  font-size: var(--ui-font-14);
+  line-height: 1.6;
+  color: color-mix(in srgb, var(--muted) 85%, var(--ink) 15%);
+  max-width: 520px;
+}
+
+.hitokoto-text {
+  font-style: italic;
+}
+
+.hitokoto-from {
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  color: var(--muted);
+  font-style: normal;
+  white-space: nowrap;
+}
+
+.header-search {
+  margin-top: 14px;
+  width: 100%;
+  align-self: stretch;
+}
+
+.header-search-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.header-search-shell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border-radius: 999px;
+  padding: 0 14px;
+  min-height: 48px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 40%), var(--warm-gray) 38%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 74%), transparent);
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--workspace-accent) 5%, transparent);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+
+.header-search-shell:focus-within {
+  border-color: var(--workspace-accent-border);
+  box-shadow: 0 14px 28px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 78%), var(--workspace-accent-soft) 4%);
+}
+
+.header-search-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--workspace-accent);
+  flex-shrink: 0;
+}
+
+.header-search-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 15px;
+  font-size: var(--ui-font-15);
+}
+
+.header-search-input::placeholder {
+  color: color-mix(in srgb, var(--muted) 88%, var(--workspace-accent) 12%);
+}
+
+.quick-tabs {
+  margin-top: 14px;
+  width: 100%;
+  align-self: stretch;
+}
+
+.quick-tabs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--quick-shortcut-card-size));
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 12px 10px;
+  width: 100%;
+}
+
+.quick-shortcut-card {
+  position: relative;
+  width: var(--quick-shortcut-card-size);
+  flex: 0 0 var(--quick-shortcut-card-size);
+  border: none;
+  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
+  will-change: transform;
+}
+
+.quick-shortcut-open {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+  min-height: 0;
+  padding: 0;
+  display: grid;
+  grid-template-rows: var(--quick-shortcut-shell-size) auto;
+  justify-items: center;
+  align-content: start;
+  gap: 6px;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
+  width: 100%;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.quick-shortcut-open:hover,
+.quick-shortcut-open:focus-visible {
+  transform: translateY(-1px);
+  color: var(--theme-accent-strong);
+}
+
+.quick-shortcut-card.is-add {
+  color: var(--muted);
+}
+
+.quick-shortcut-remove {
+  position: absolute;
+  top: -2px;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 16%, var(--warm-gray) 84%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 82%), var(--paper) 18%);
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 6%, transparent);
+  transform: translateY(2px) scale(0.92);
+  transition:
+    opacity 0.18s ease,
+    color 0.18s ease,
+    background 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.quick-shortcut-edit {
+  position: absolute;
+  top: -2px;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 16%, var(--warm-gray) 84%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 82%), var(--paper) 18%);
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 6%, transparent);
+  transform: translateY(2px) scale(0.92);
+  transition:
+    opacity 0.18s ease,
+    color 0.18s ease,
+    background 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.quick-shortcut-card:hover .quick-shortcut-edit,
+.quick-shortcut-card:hover .quick-shortcut-remove,
+.quick-shortcut-card:focus-within .quick-shortcut-edit,
+.quick-shortcut-card:focus-within .quick-shortcut-remove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.quick-shortcut-edit:hover,
+.quick-shortcut-edit:focus-visible {
+  border-color: color-mix(in srgb, var(--workspace-accent-border) 38%, transparent);
+  background: color-mix(in srgb, var(--workspace-accent-soft) 58%, var(--card-bg) 42%);
+  color: color-mix(in srgb, var(--workspace-chip-text) 90%, var(--ink) 10%);
+  box-shadow: 0 7px 14px color-mix(in srgb, var(--workspace-accent) 12%, transparent);
+}
+
+.quick-shortcut-edit:active {
+  transform: translateY(1px) scale(0.97);
+  box-shadow: 0 3px 8px color-mix(in srgb, var(--workspace-accent) 8%, transparent);
+}
+
+.quick-shortcut-remove:hover,
+.quick-shortcut-remove:focus-visible {
+  border-color: color-mix(in srgb, var(--status-abandoned) 24%, transparent);
+  background: color-mix(in srgb, var(--status-abandoned) 12%, var(--card-bg) 88%);
+  color: color-mix(in srgb, var(--status-abandoned) 92%, var(--ink) 8%);
+  box-shadow: 0 7px 14px color-mix(in srgb, var(--status-abandoned) 14%, transparent);
+}
+
+.quick-shortcut-remove:active {
+  transform: translateY(1px) scale(0.97);
+  box-shadow: 0 3px 8px color-mix(in srgb, var(--status-abandoned) 10%, transparent);
+}
+
+.quick-shortcut-edit svg,
+.quick-shortcut-remove svg {
+  width: 9px;
+  height: 9px;
+}
+
+.quick-shortcut-icon-wrap {
+  width: var(--quick-shortcut-icon-wrap-size);
+  height: var(--quick-shortcut-icon-wrap-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  border: none;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 24%), transparent);
+  flex-shrink: 0;
+  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.quick-shortcut-open:hover .quick-shortcut-icon-wrap,
+.quick-shortcut-open:focus-visible .quick-shortcut-icon-wrap {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 18%), var(--workspace-accent-soft) 14%);
+  box-shadow: 0 4px 10px color-mix(in srgb, var(--workspace-accent) 6%, transparent);
+}
+
+.quick-shortcut-icon {
+  width: var(--quick-shortcut-icon-size);
+  height: var(--quick-shortcut-icon-size);
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.quick-shortcut-icon-custom {
+  object-fit: contain;
+}
+
+.quick-shortcut-custom-glyph {
+  width: var(--quick-shortcut-icon-size);
+  height: var(--quick-shortcut-icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--quick-shortcut-icon-size) * 0.86);
+  line-height: 1;
+}
+
+.quick-shortcut-fallback {
+  width: var(--quick-shortcut-icon-size);
+  height: var(--quick-shortcut-icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--theme-accent-soft);
+  color: var(--theme-accent-strong);
+  font-size: 10px;
+  font-size: calc(var(--quick-shortcut-label-size) * 0.91);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.quick-shortcut-label {
+  font-size: 11px;
+  font-size: var(--quick-shortcut-label-size);
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.quick-shortcut-card.is-add .quick-shortcut-icon-wrap {
+  background: color-mix(in srgb, var(--workspace-accent-soft) 72%, var(--paper) 28%);
+  color: var(--workspace-chip-text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent-border) 30%, transparent);
+}
+
+.quick-shortcut-card.is-add .quick-shortcut-label {
+  visibility: visible;
+}
+
+body.quick-shortcut-list-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+body.quick-shortcut-list-dragging .quick-shortcut-open {
+  cursor: grabbing;
+}
+
+.quick-shortcut-card.is-drag-ghost {
+  position: fixed;
+  left: var(--drag-left, 0);
+  top: var(--drag-top, 0);
+  width: var(--drag-width, auto);
+  height: var(--drag-height, auto);
+  z-index: 120;
+  pointer-events: none;
+  opacity: 1;
+  display: block;
+  visibility: visible;
+}
+
+.quick-shortcut-card.is-drag-ghost .quick-shortcut-open {
+  transform: none;
+  transition: none;
+  color: var(--ink);
+  opacity: 1;
+  visibility: visible;
+}
+
+.quick-shortcut-card.is-drag-ghost .quick-shortcut-icon-wrap {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 22%), var(--workspace-accent-soft) 16%);
+  box-shadow: 0 12px 22px color-mix(in srgb, var(--ink) 10%, transparent);
+}
+
+.quick-shortcut-card.is-drag-ghost .quick-shortcut-label {
+  color: var(--ink);
+}
+
+.quick-shortcut-card.is-drag-ghost .quick-shortcut-edit,
+.quick-shortcut-card.is-drag-ghost .quick-shortcut-remove {
+  display: none;
+}
+
+.quick-shortcut-slot {
+  width: var(--quick-shortcut-card-size);
+  flex: 0 0 var(--quick-shortcut-card-size);
+  min-height: calc(var(--quick-shortcut-shell-size) + 16px);
+  pointer-events: none;
+}
+
+.header-theme-trigger {
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
+  border-radius: 999px;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
+  position: relative;
+}
+
+.header-theme-trigger:hover,
+.header-theme-trigger[aria-expanded="true"] {
+  background: var(--theme-control-hover);
+  color: var(--theme-accent-strong);
+}
+
+.header-theme-trigger svg {
+  width: 18px;
+  height: 18px;
+}
+
+.header-theme-trigger::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  transform: translateY(2px);
+  background: var(--tooltip-surface);
+  color: var(--tooltip-text);
+  border: 1px solid var(--tooltip-border);
+  padding: 5px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  box-shadow: none;
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.06s ease, transform 0.06s ease;
+  z-index: 20;
+}
+
+.header-theme-trigger:hover::after,
+.header-theme-trigger:focus-visible::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.theme-menu[hidden] {
+  display: none !important;
+}
+
+.theme-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  width: 320px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 6%), var(--warm-gray) 32%);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  box-shadow: 0 16px 30px color-mix(in srgb, var(--workspace-accent) 10%, transparent);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  z-index: 30;
+  backdrop-filter: blur(10px);
+}
+
+.theme-menu-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.theme-menu-section + .theme-menu-section {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid color-mix(in srgb, var(--workspace-accent-border) 18%, transparent);
+}
+
+.theme-menu-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 18px;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--workspace-accent-border) 18%, transparent);
+}
+
+.theme-menu-tab {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 74%, var(--ink) 26%);
+  min-height: auto;
+  padding: 0 0 3px;
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.theme-menu-tab:hover {
+  color: var(--ink);
+}
+
+.theme-menu-tab.is-active {
+  color: var(--theme-accent-strong);
+  text-decoration: underline;
+  text-underline-offset: 0.28em;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, var(--workspace-accent-border) 68%, transparent);
+}
+
+.theme-menu-panel[hidden] {
+  display: none;
+}
+
+.theme-menu-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.theme-menu-row-inline-choices {
+  align-items: flex-start;
+}
+
+.theme-menu-row-inline-range {
+  align-items: center;
+}
+
+.theme-menu-label {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 700;
+  padding-left: 2px;
+  flex: 0 0 auto;
+  padding-top: 4px;
+}
+
+.theme-range-value {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  color: var(--ink);
+  font-weight: 600;
+  flex: 0 0 auto;
+  min-width: 30px;
+  text-align: right;
+}
+
+.theme-range {
+  width: 100%;
+  flex: 1 1 auto;
+  appearance: none;
+  -webkit-appearance: none;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--workspace-accent-border) 36%, var(--warm-gray) 64%);
+  outline: none;
+}
+
+.theme-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: none;
+  background: var(--theme-accent-strong);
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--workspace-accent) 20%, transparent);
+  cursor: pointer;
+}
+
+.theme-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: none;
+  background: var(--theme-accent-strong);
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--workspace-accent) 20%, transparent);
+  cursor: pointer;
+}
+
+.theme-mode-options {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+}
+
+.theme-mode-option {
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 74%, var(--ink) 26%);
+  min-height: auto;
+  padding: 2px 0;
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, opacity 0.15s ease;
+}
+
+.theme-mode-option:hover {
+  color: var(--ink);
+}
+
+.theme-mode-option.is-active {
+  color: var(--theme-accent-strong);
+  text-decoration: underline;
+  text-underline-offset: 0.24em;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, var(--workspace-accent-border) 68%, transparent);
+}
+
+.theme-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 8px 10px;
+}
+
+.theme-option {
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 4%), var(--warm-gray) 38%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 56%), transparent);
+  color: var(--ink);
+  border-radius: 14px;
+  padding: 6px 10px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, color 0.15s ease;
+}
+
+.theme-option:hover {
+  transform: translateY(-1px);
+  border-color: var(--theme-accent-muted);
+}
+
+.theme-option.is-active {
+  border-color: color-mix(in srgb, var(--accent-amber) 32%, var(--warm-gray) 68%);
+  background: var(--theme-accent-soft);
+}
+
+.theme-option-main {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.theme-option-main > span:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.theme-option-swatch {
+  width: 24px;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--theme-paper) 0 50%, var(--theme-accent) 50% 100%);
+  /*border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 24%, transparent);*/
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-bg) 26%, transparent);
+}
+
+.theme-option-name {
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.theme-option-meta {
+  display: none;
+}
+
+.theme-option-check {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 34%, var(--warm-gray) 66%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: transparent;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.theme-option.is-active .theme-option-check {
+  border-color: var(--theme-accent-muted);
+  background: var(--theme-accent-soft);
+  color: var(--theme-accent-strong);
+}
+
+.theme-option-check svg {
+  width: 8px;
+  height: 8px;
+}
+
+body.theme-tone-dark .header-search-shell {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 60%), transparent);
+  border-color: color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 20%), var(--warm-gray) 48%);
+}
+
+body.theme-tone-dark .quick-shortcut-icon-wrap {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 18%), transparent);
+}
+
+body.theme-tone-dark .theme-menu {
+  background: var(--card-bg);
+  border-color: var(--warm-gray);
+}
+
+body.theme-tone-dark .deferred-shell {
+  background: var(--card-bg);
+  border-color: var(--warm-gray);
+}
+
+.theme-menu-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.theme-menu-action {
+  border: none;
+  background: color-mix(in srgb, var(--workspace-accent-soft) 26%, transparent);
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 8px 12px;
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  min-height: 36px;
+  flex: 1 1 0;
+}
+
+.theme-menu-action:hover {
+  background: var(--theme-accent-soft);
+  color: var(--theme-accent-strong);
+}
+
+.theme-menu-action.is-secondary {
+  background: transparent;
+  color: var(--muted);
+}
+
+.theme-menu-action.is-secondary:hover {
+  background: color-mix(in srgb, var(--workspace-accent-soft) 18%, transparent);
+  color: var(--ink);
+}
+
+/* ---- Chrome tab groups toggle ---- */
+.theme-menu-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.theme-menu-toggle-label input[type="checkbox"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.theme-menu-toggle-label input[type="checkbox"]:focus-visible + .theme-menu-toggle-slider {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 3px;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.theme-menu-toggle-slider {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--warm-gray) 60%, var(--muted) 40%);
+  transition: background 0.2s ease;
+}
+
+.theme-menu-toggle-slider::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--card-bg);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 20%, transparent);
+}
+
+.theme-menu-toggle-label input[type="checkbox"]:checked + .theme-menu-toggle-slider {
+  background: var(--workspace-accent);
+}
+
+.theme-menu-toggle-label input[type="checkbox"]:checked + .theme-menu-toggle-slider::after {
+  transform: translateX(16px);
+}
+
+.theme-menu-toggle-label .theme-menu-label {
+  cursor: pointer;
+}
+
+.theme-menu-toggle-text {
+  padding-top: 0;
+  flex: 1 1 auto;
+}
+
+.theme-menu-toggle-button-row {
+  cursor: default;
+}
+
+.theme-menu-toggle-button-row .theme-toggle-switch {
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 40%, transparent);
+}
+
+.theme-menu-toggle-button-row .theme-menu-label {
+  cursor: default;
+}
+
+/* ---- Language options ---- */
+.theme-language-options {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+}
+
+.theme-language-option {
+  flex: 0 0 auto;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 74%, var(--ink) 26%);
+  padding: 2px 0;
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, opacity 0.15s ease;
+  min-height: auto;
+  text-align: center;
+}
+
+.theme-language-option:hover {
+  color: var(--ink);
+}
+
+.theme-language-option.is-active {
+  color: var(--theme-accent-strong);
+  text-decoration: underline;
+  text-underline-offset: 0.24em;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, var(--workspace-accent-border) 68%, transparent);
+}
+
+/* ---- Tab cleanup banner ---- */
+.theme-toggle-switch {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--workspace-accent-border) 40%, var(--warm-gray) 60%);
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.theme-toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 1.5px;
+  left: 1.5px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--card-bg);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 20%, transparent);
+}
+
+.theme-toggle-switch.is-active {
+  background: var(--accent-sage);
+}
+
+.theme-toggle-switch.is-active::after {
+  transform: translateX(16px);
+}
+
+.tab-cleanup-banner {
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--theme-accent-soft) 56%, var(--card-bg) 44%),
+    color-mix(in srgb, var(--theme-accent-soft) 86%, var(--card-bg) 14%)
+  );
+  border: 1px solid var(--theme-accent-muted);
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 7%, transparent);
+}
+
+.tab-cleanup-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.tab-cleanup-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--theme-accent-soft) 82%, var(--card-bg) 18%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tab-cleanup-icon svg {
+  width: 18px;
+  height: 18px;
+  color: var(--theme-accent-strong);
+}
+
+.tab-cleanup-text {
+  font-size: 13px;
+  color: var(--ink);
+  line-height: 1.5;
+}
+
+.tab-cleanup-text strong {
+  font-weight: 600;
+}
+
+.tab-cleanup-btn {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 20px;
+  border-radius: 6px;
+  border: none;
+  background: var(--banner-action-bg);
+  color: var(--banner-action-text);
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  min-height: 36px;
+}
+
+.tab-cleanup-btn:hover {
+  background: var(--banner-action-bg-hover);
+  transform: translateY(-1px);
+}
+
+/* ---- Nudge banner ---- */
+.nudge-banner {
+  background: linear-gradient(135deg, rgba(179, 90, 90, 0.04), rgba(179, 90, 90, 0.08));
+  border: 1px solid rgba(179, 90, 90, 0.15);
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 40px;
+}
+
+.nudge-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(179, 90, 90, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.nudge-icon svg {
+  width: 18px;
+  height: 18px;
+  color: var(--status-abandoned);
+}
+
+.nudge-text {
+  font-size: 13px;
+  color: var(--ink);
+  line-height: 1.5;
+}
+
+.nudge-text strong {
+  font-weight: 600;
+}
+
+/* ---- Section Headers ---- */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  margin-top: 0;
+  flex-wrap: wrap;
+}
+
+.section-header h2 {
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 700;
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--workspace-chip-text) 72%, var(--muted) 28%);
+  white-space: nowrap;
+}
+
+#openTabsSection .section-header h2,
+.saved-sessions-section .section-header h2 {
+  width: 13ch;
+  flex: 0 0 13ch;
+}
+
+#openTabsSection .section-count,
+.saved-sessions-section .section-count {
+  width: 96px;
+  flex: 0 0 96px;
+  justify-content: flex-end;
+}
+
+.section-line {
+  flex: 1;
+  height: 1px;
+  background: var(--warm-gray);
+}
+
+.section-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  color: var(--workspace-chip-text);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.group-nav {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.group-nav-wide {
+  width: 100%;
+  min-height: 40px;
+  margin-bottom: 18px;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 14px;
+}
+
+.group-nav-list {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  flex: 1;
+  min-width: 0;
+  min-height: 40px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.group-nav-list::-webkit-scrollbar {
+  display: none;
+}
+
+.group-nav-tools {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 0 0 auto;
+}
+
+.group-nav-placeholder {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: 999px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.group-nav-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 70%, var(--workspace-accent-border) 30%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 64%), transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  overflow: visible;
+  position: relative;
+  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease, box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.group-nav-button,
+.group-nav-button * {
+  -webkit-user-drag: none;
+}
+
+.group-nav-button.is-dragging {
+  position: fixed;
+  left: var(--drag-left, 0);
+  top: var(--drag-top, 0);
+  z-index: 120;
+  opacity: 1;
+  transform: scale(1.04);
+  border-color: var(--theme-accent-muted);
+  box-shadow: 0 12px 24px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+  pointer-events: none;
+  transition: none;
+}
+
+.group-nav-button:hover {
+  transform: translateY(-1px);
+  border-color: var(--theme-accent-muted);
+  box-shadow: none;
+}
+
+.group-nav-button::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  background: var(--tooltip-surface);
+  color: var(--tooltip-text);
+  border: 1px solid var(--tooltip-border);
+  padding: 5px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  box-shadow: none;
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.06s ease, transform 0.06s ease;
+  z-index: 20;
+}
+
+.group-nav-button::after {
+  left: 50%;
+  transform: translate(-50%, 2px);
+}
+
+.group-nav-button:hover::after,
+.group-nav-button:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.group-nav-icon,
+.group-nav-fallback {
+  width: 20px;
+  height: 20px;
+}
+
+.group-nav-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--theme-accent-strong);
+  letter-spacing: 0.3px;
+}
+
+body.group-dragging {
+  user-select: none;
+}
+
+body.group-dragging .group-nav-button {
+  cursor: grabbing;
+}
+
+/* ---- Mission Cards ---- */
+.missions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.mission-card {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 68%), transparent);
+  border: 1px solid color-mix(in srgb, var(--warm-gray) calc(var(--custom-border-opacity) + 56%), var(--workspace-accent-border) 26%);
+  border-radius: 16px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: visible;
+  break-inside: avoid;
+  margin-bottom: 0;
+  box-shadow: 0 14px 28px color-mix(in srgb, var(--workspace-accent) 6%, transparent);
+}
+
+/* Colored top border instead of side bar for grid cards */
+/*.mission-card::before {*/
+/*  content: '';*/
+/*  position: absolute;*/
+/*  top: 0;*/
+/*  left: 0;*/
+/*  right: 0;*/
+/*  height: 2px;*/
+/*  background: var(--warm-gray);*/
+/*}*/
+
+.mission-card.has-active-bar::before { background: var(--status-active); }
+.mission-card.has-amber-bar::before { background: var(--accent-amber); }
+.mission-card.has-neutral-bar::before { background: var(--warm-gray); }
+
+.mission-card:hover {
+  box-shadow: 0 16px 30px color-mix(in srgb, var(--workspace-accent) 12%, transparent);
+  transform: translateY(-1px);
+}
+
+/* Closing animation — card scales down and fades out */
+.mission-card.closing {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  pointer-events: none;
+}
+
+.mission-card.collapsed {
+  display: none !important;
+}
+
+/* Old side status bar — hidden, replaced by top border via ::before */
+.status-bar {
+  display: none;
+}
+
+.mission-content {
+  min-width: 0;
+}
+
+/* Hide the right-side meta (page count) — info is already in the badge */
+.mission-meta {
+  display: none;
+}
+
+.mission-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.mission-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+
+.mission-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.mission-title-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mission-name {
+  font-weight: 600;
+  font-size: 15px;
+  font-size: var(--ui-font-15);
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+
+.mission-rename-trigger {
+  border: none;
+  padding: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.mission-rename-trigger:hover .mission-name,
+.mission-rename-trigger:focus-visible .mission-name {
+  color: color-mix(in srgb, var(--ink) 88%, var(--theme-accent-strong) 12%);
+}
+
+.mission-rename-trigger:focus-visible {
+  outline: none;
+}
+
+.mission-rename-form {
+  display: inline-flex;
+  align-items: center;
+  min-width: min(520px, 100%);
+  width: min(520px, 100%);
+  max-width: 100%;
+}
+
+.mission-rename-input {
+  min-width: 280px;
+  width: 100%;
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--workspace-chip-border) 72%, var(--ink) 28%);
+  background: color-mix(in srgb, var(--card-bg) 94%, var(--theme-accent-soft) 6%);
+  color: var(--ink);
+  font: 600 15px/1.2 'Public Sans', sans-serif;
+  font-size: var(--ui-font-15);
+}
+
+.mission-rename-input:focus {
+  outline: none;
+  border-color: var(--theme-accent-muted);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent-soft) 55%, transparent);
+}
+
+.mission-tag {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+
+.mission-tag.active {
+  color: var(--status-active);
+  background: rgba(61, 122, 74, 0.08);
+}
+
+.mission-tag.cooling {
+  color: var(--status-cooling);
+  background: rgba(184, 137, 46, 0.08);
+}
+
+.mission-tag.abandoned {
+  color: var(--status-abandoned);
+  background: rgba(179, 90, 90, 0.08);
+}
+
+/* Tab indicator badge — shows how many Chrome tabs are still open for this mission */
+.duplicate-count-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  font-weight: 600;
+  color: var(--workspace-chip-text);
+  background: var(--workspace-chip-bg-strong);
+  border: 1px solid var(--workspace-chip-border);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.mission-summary {
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  color: var(--muted);
+  line-height: 1.55;
+  margin-bottom: 8px;
+}
+
+.mission-pages {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  transition: all 0.3s ease-out;
+}
+
+.mission-card.is-drop-target {
+  box-shadow: 0 18px 34px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+}
+
+.mission-card.is-drop-target .mission-pages {
+  background: color-mix(in srgb, var(--workspace-accent-soft) 20%, transparent);
+  border-radius: 12px;
+}
+
+/* Smooth height transition when chips are removed */
+.mission-pages .page-chip {
+  transition: opacity 0.2s ease, transform 0.2s ease, margin 0.3s ease-out;
+}
+
+/* ---- Tab row — each tab is a full-width row with favicon, title, and actions ---- */
+.page-chip {
+  font-size: 13px;
+  font-size: var(--ui-font-13);
+  color: var(--ink);
+  background: transparent;
+  padding: 8px 2px;
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid rgba(154, 145, 138, 0.12);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  line-height: 1.4;
+}
+
+.page-chip > .chip-reorder-handle {
+  flex-shrink: 0;
+  margin-left: 1px;
+  width: 30px;
+  height: 30px;
+}
+
+.page-chip:last-child,
+.page-chip-overflow {
+  border-bottom: none;
+}
+
+/* Favicon */
+.chip-favicon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.chip-favicon-fallback,
+.inline-favicon-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent-amber) var(--custom-fallback-opacity), transparent);
+  color: var(--accent-amber);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.chip-favicon-fallback {
+  width: 14px;
+  height: 14px;
+}
+
+.inline-favicon-fallback {
+  width: 14px;
+  height: 14px;
+  vertical-align: -2px;
+  margin-right: 4px;
+}
+
+/* Title text — wraps naturally, no truncation */
+.chip-text {
+  flex: 1;
+  min-width: 0;
+  /* Show up to 2 lines, then ellipsis */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Duplicate badge */
+.chip-dupe-badge {
+  color: var(--accent-amber);
+  font-weight: 600;
+}
+
+/* Duplicate border highlight */
+.chip-has-dupes {
+  border-color: rgba(200, 113, 58, 0.25);
+}
+
+/* Action buttons grouped on the right */
+.chip-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.chip-reorder-handle {
+  opacity: 1;
+  color: color-mix(in srgb, var(--ink) 84%, var(--muted) 16%);
+}
+
+.chip-reorder-handle:hover {
+  opacity: 1;
+  color: var(--ink);
+}
+
+/* ---- Chip action buttons (save + close) ---- */
+.chip-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 4px;
+  opacity: 0.48;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.chip-action svg {
+  width: 13px;
+  height: 13px;
+}
+
+.chip-action:hover {
+  opacity: 1;
+  background: rgba(154, 145, 138, 0.1);
+}
+
+.chip-save:hover {
+  color: var(--accent-sage);
+  background: rgba(90, 122, 98, 0.08);
+}
+
+.chip-session-save:hover {
+  color: var(--workspace-chip-text);
+  background: color-mix(in srgb, var(--workspace-accent-soft) 54%, transparent);
+}
+
+.chip-close:hover {
+  color: var(--status-abandoned);
+  background: rgba(179, 90, 90, 0.08);
+}
+
+
+.chip-discard:hover {
+  color: var(--muted);
+  background: rgba(114, 107, 203, 0.08);
+}
+
+/* ---- Discarded (sleeping) tab state ---- */
+.page-chip--discarded {
+  opacity: 0.6;
+}
+
+.page-chip--discarded .chip-text {
+  text-decoration: line-through;
+}
+
+.group-action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 86%, var(--ink) 14%);
+  cursor: pointer;
+  transition: color 0.15s ease, opacity 0.15s ease;
+  position: relative;
+}
+
+.group-action-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.group-action-icon:hover {
+  color: var(--ink);
+  opacity: 1;
+}
+
+.group-action-icon.group-action-close:hover {
+  color: var(--status-abandoned);
+}
+
+.page-chip.clickable {
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.page-chip.clickable:hover {
+  background: color-mix(in srgb, var(--workspace-accent-soft) 36%, transparent);
+}
+
+/* "+N more" overflow chip */
+.page-chip-overflow {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  color: var(--muted);
+  padding: 4px 2px;
+}
+
+/* mission-meta hidden — see above */
+
+.mission-time {
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  color: var(--muted);
+  margin-bottom: 4px;
+}
+
+.mission-page-count {
+  font-size: 20px;
+  font-size: var(--ui-font-20);
+  font-family: 'Libre Caslon Display', serif;
+  font-weight: 300;
+  color: var(--ink);
+  line-height: 1;
+}
+
+.mission-page-label {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* ---- Actions row ---- */
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.section-icon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 82%, var(--ink) 18%);
+  cursor: pointer;
+  transition: color 0.15s ease, opacity 0.15s ease;
+  position: relative;
+}
+
+.section-icon-action svg {
+  width: 14px;
+  height: 14px;
+}
+
+.section-icon-action:hover {
+  color: var(--ink);
+}
+
+.section-icon-action-close:hover {
+  color: var(--status-abandoned);
+}
+
+.chip-action[data-tooltip]::after,
+.group-action-icon[data-tooltip]::after,
+.section-icon-action[data-tooltip]::after,
+.todo-action-btn[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translate(-50%, 2px);
+  background: var(--tooltip-surface);
+  color: var(--tooltip-text);
+  border: 1px solid var(--tooltip-border);
+  padding: 5px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 16%, transparent);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.06s ease, transform 0.06s ease;
+  z-index: 20;
+}
+
+.chip-action[data-tooltip]:hover::after,
+.chip-action[data-tooltip]:focus-visible::after,
+.group-action-icon[data-tooltip]:hover::after,
+.group-action-icon[data-tooltip]:focus-visible::after,
+.section-icon-action[data-tooltip]:hover::after,
+.section-icon-action[data-tooltip]:focus-visible::after,
+.todo-action-btn[data-tooltip]:hover::after,
+.todo-action-btn[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.action-btn {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 72%, var(--workspace-accent-border) 28%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 66%), transparent);
+  color: color-mix(in srgb, var(--ink) 70%, var(--muted) 30%);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 34px;
+}
+
+.action-btn:hover {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.action-btn svg {
+  width: 10px;
+  height: 10px;
+}
+
+.action-btn.primary {
+  background: var(--ink);
+  color: var(--paper);
+  border-color: var(--ink);
+}
+
+.action-btn.primary:hover {
+  opacity: 0.85;
+}
+
+.action-btn.close-tabs {
+  border-color: var(--workspace-chip-border);
+  color: var(--workspace-chip-text);
+  background: color-mix(in srgb, var(--workspace-chip-bg) 92%, var(--card-bg) 8%);
+  border-radius: 8px;
+  min-height: 28px;
+  padding: 4px 10px;
+}
+
+.action-btn.close-tabs:hover {
+  background: var(--workspace-chip-bg-strong);
+  border-color: var(--workspace-accent-border);
+}
+
+.action-btn.save-tabs {
+  border-color: rgba(90, 122, 98, 0.3);
+  color: var(--accent-sage);
+  background: rgba(90, 122, 98, 0.04);
+}
+
+.action-btn.save-tabs:hover {
+  background: rgba(90, 122, 98, 0.1);
+  border-color: var(--accent-sage);
+}
+
+.action-btn.danger {
+  color: var(--status-abandoned);
+}
+
+.action-btn.danger:hover {
+  border-color: var(--status-abandoned);
+  color: var(--status-abandoned);
+}
+
+/* ---- Workspace pages + saved tab sessions ---- */
+.workspace-page-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+.workspace-page-switch-btn {
+  min-height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 82%, var(--ink) 18%);
+  cursor: pointer;
+  font-family: 'Public Sans', sans-serif;
+  font-size: var(--ui-font-12);
+  font-weight: 600;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.32em;
+  text-decoration-color: transparent;
+}
+
+.workspace-page-switch-btn:hover {
+  color: var(--ink);
+}
+
+.workspace-page-switch-btn.is-active {
+  color: var(--workspace-chip-text);
+  text-decoration-color: color-mix(in srgb, var(--workspace-accent-border) 72%, transparent);
+}
+
+.workspace-page-switch-inline {
+  justify-content: flex-end;
+}
+
+.workspace-page[hidden] {
+  display: none !important;
+}
+
+.saved-tabs-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin: 0 0 28px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid color-mix(in srgb, var(--warm-gray) 58%, transparent);
+}
+
+.saved-tabs-page-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 40px;
+}
+
+.saved-tabs-page-heading {
+  min-width: 0;
+}
+
+.saved-tabs-page-title {
+  font-family: 'Libre Caslon Display', serif;
+  font-size: var(--ui-font-40);
+  font-weight: 400;
+  line-height: 1;
+  color: var(--ink);
+}
+
+.saved-tabs-page-subtitle,
+.session-picker-subtitle {
+  max-width: 560px;
+  margin-top: 8px;
+  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
+  font-size: var(--ui-font-13);
+  line-height: 1.55;
+}
+
+.saved-tabs-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  justify-content: flex-end;
+  min-height: 40px;
+}
+
+.workspace-tool-spacer {
+  width: 26px;
+  height: 26px;
+  flex: 0 0 26px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.session-picker {
+  margin: 0 0 30px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 34%, var(--warm-gray) 66%);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--panel-card-opacity)), transparent);
+  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 72%, transparent);
+  overflow: hidden;
+}
+
+.session-picker[hidden] {
+  display: none !important;
+}
+
+.session-picker-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--warm-gray) 54%, transparent);
+}
+
+.session-picker-title {
+  color: var(--ink);
+  font-size: var(--ui-font-16);
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.session-picker-list {
+  display: flex;
+  flex-direction: column;
+  max-height: min(58vh, 560px);
+  overflow: auto;
+}
+
+.session-picker-group {
+  border-bottom: 1px solid color-mix(in srgb, var(--warm-gray) 45%, transparent);
+}
+
+.session-picker-group:last-child {
+  border-bottom: none;
+}
+
+.session-picker-group-header,
+.session-picker-tab-row {
+  display: grid;
+  align-items: center;
+  column-gap: 10px;
+  cursor: pointer;
+}
+
+.session-picker-group-header {
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  min-height: 44px;
+  padding: 10px 18px;
+  background: color-mix(in srgb, var(--workspace-chip-bg) 34%, transparent);
+}
+
+.session-picker-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.session-picker-tab-row {
+  grid-template-columns: 18px minmax(0, 1.25fr) minmax(160px, 0.9fr);
+  min-height: 42px;
+  padding: 8px 18px;
+  border-top: 1px solid color-mix(in srgb, var(--warm-gray) 28%, transparent);
+}
+
+.session-picker-tab-row:hover {
+  background: color-mix(in srgb, var(--workspace-chip-bg) 24%, transparent);
+}
+
+.session-picker input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid color-mix(in srgb, var(--muted) 62%, var(--warm-gray) 38%);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
+  cursor: pointer;
+  position: relative;
+}
+
+.session-picker input[type="checkbox"]:checked {
+  background: var(--accent-sage);
+  border-color: var(--accent-sage);
+}
+
+.session-picker input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--workspace-accent-contrast);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.session-picker input[type="checkbox"]:indeterminate {
+  background: color-mix(in srgb, var(--accent-sage) 72%, var(--card-bg) 28%);
+  border-color: var(--accent-sage);
+}
+
+.session-picker input[type="checkbox"]:indeterminate::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 7px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--workspace-accent-contrast);
+}
+
+.session-picker-group-title,
+.session-picker-tab-title {
+  min-width: 0;
+  color: var(--ink);
+  font-size: var(--ui-font-13);
+  line-height: 1.35;
+}
+
+.session-picker-group-title {
+  font-weight: 600;
+}
+
+.session-picker-group-count,
+.session-picker-tab-url {
+  color: var(--muted);
+  font-size: var(--ui-font-11);
+  line-height: 1.35;
+}
+
+.session-picker-tab-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.session-picker-tab-title img,
+.saved-session-tab-chip img {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.session-picker-tab-title > span:last-child,
+.session-picker-tab-url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 18px;
+  border-top: 1px solid color-mix(in srgb, var(--workspace-accent-border) 20%, transparent);
+  background: color-mix(in srgb, var(--card-bg) 74%, var(--paper) 26%);
+}
+
+.session-picker-count {
+  flex: 1;
+  color: var(--muted);
+  font-size: var(--ui-font-12);
+}
+
+.session-picker-save-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 62%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--workspace-chip-bg) 38%, transparent);
+}
+
+.session-picker-mode-button {
+  min-height: 28px;
+  padding: 4px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-family: 'Public Sans', sans-serif;
+  font-size: var(--ui-font-12);
+  font-weight: 600;
+}
+
+.session-picker-mode-button:hover:not(:disabled),
+.session-picker-mode-button.is-active {
+  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
+  color: var(--ink);
+}
+
+.session-picker-mode-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.session-picker-name-input,
+.session-picker-target-select {
+  min-height: 32px;
+  width: min(220px, 28vw);
+  max-width: 220px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 66%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
+  color: var(--ink);
+  font-family: 'Public Sans', sans-serif;
+  font-size: var(--ui-font-12);
+  padding: 5px 28px 5px 9px;
+}
+
+.session-picker-name-input {
+  padding-right: 9px;
+}
+
+.session-picker-name-input::placeholder {
+  color: color-mix(in srgb, var(--muted) 82%, transparent);
+}
+
+.session-picker-name-input:focus {
+  border-color: var(--workspace-accent-border);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent-soft) 62%, transparent);
+}
+
+.session-picker-target-select:disabled {
+  color: var(--muted);
+  opacity: 0.55;
+}
+
+.session-picker .action-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.saved-sessions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.saved-tabs-header-spacer {
+  visibility: hidden;
+  pointer-events: none;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.saved-sessions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.saved-session-card {
+  display: block;
+  padding: 16px 18px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) 62%, var(--workspace-accent-border) 18%);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 70%), transparent);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow) 58%, transparent);
+}
+
+.saved-session-main {
+  min-width: 0;
+}
+
+.saved-session-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.saved-session-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.saved-session-heading span {
+  color: var(--muted);
+  font-size: var(--ui-font-11);
+}
+
+.saved-session-card .mission-name {
+  font-size: 17px;
+  line-height: 1.3;
+}
+
+.saved-session-count-tools {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  min-width: 0;
+}
+
+.saved-session-count-text {
+  white-space: nowrap;
+}
+
+.saved-session-settings-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.saved-session-settings-trigger {
+  width: 26px;
+  height: 26px;
+  padding: 3px;
+  color: color-mix(in srgb, var(--muted) 82%, var(--ink) 18%);
+}
+
+.saved-session-settings-trigger svg {
+  width: 16px;
+  height: 16px;
+}
+
+.saved-session-settings-menu {
+  top: calc(100% + 8px);
+  right: 0;
+  left: auto;
+  width: 248px;
+}
+
+.saved-session-settings-select {
+  width: 100%;
+  min-height: 34px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 28%, var(--warm-gray) 72%);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
+  color: var(--ink);
+  padding: 0 10px;
+  font-family: 'Public Sans', sans-serif;
+  font-size: var(--ui-font-12);
+}
+
+.saved-session-settings-select:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.saved-session-nav-button.is-name-mode {
+  width: auto;
+  max-width: 220px;
+  min-width: 0;
+  height: auto;
+  min-height: 24px;
+  padding: 0 4px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  justify-content: flex-start;
+  color: color-mix(in srgb, var(--muted) 82%, var(--ink) 18%);
+  transition: color 0.15s ease, text-decoration-color 0.15s ease, transform 0.15s ease;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.32em;
+  text-decoration-color: transparent;
+}
+
+.saved-session-nav-button.is-name-mode:hover,
+.saved-session-nav-button.is-name-mode:focus-visible {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ink);
+  text-decoration-color: color-mix(in srgb, var(--workspace-accent-border) 64%, transparent);
+}
+
+.saved-session-nav-label {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ui-font-12);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.saved-session-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: 12px;
+}
+
+.saved-session-card.is-collapsed .saved-session-preview {
+  display: none;
+}
+
+.saved-session-card.is-collapsed {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.saved-session-card.is-collapsed .saved-session-top {
+  align-items: center;
+  gap: 6px;
+}
+
+.saved-session-card.is-collapsed .saved-session-heading {
+  gap: 6px;
+}
+
+.saved-session-card.is-collapsed .mission-actions {
+  gap: 0;
+}
+
+.saved-session-tab-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.saved-session-tab-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 2px;
+  padding: 8px 2px;
+  border-bottom: 1px solid rgba(154, 145, 138, 0.12);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+.saved-session-tab-row:last-child {
+  border-bottom: none;
+}
+
+.saved-session-tab-row.is-dragging {
+  position: fixed;
+  left: var(--drag-left, 0);
+  top: var(--drag-top, 0);
+  width: var(--drag-width, auto);
+  z-index: 120;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--card-bg) 94%, var(--paper) 6%);
+  box-shadow: 0 12px 24px color-mix(in srgb, var(--ink) 10%, transparent);
+  border-radius: 8px;
+  border-bottom: none;
+}
+
+.saved-session-tab-placeholder {
+  height: 44px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--workspace-accent-soft) 28%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--workspace-accent-border) 48%, transparent);
+}
+
+.saved-session-new-slot {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  pointer-events: none;
+}
+
+.saved-session-new-slot-line {
+  width: 100%;
+  border-top: 2px dashed color-mix(in srgb, var(--workspace-accent-border) 60%, var(--warm-gray) 40%);
+  opacity: 0.9;
+}
+
+.saved-session-reorder-handle {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+}
+
+.saved-session-tab-main {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.saved-session-tab-main img {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.saved-session-tab-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
+  font-size: var(--ui-font-12);
+}
+
+.saved-session-tab-url {
+  grid-column: 2 / 3;
+  min-width: 0;
+  color: var(--muted);
+  font-size: var(--ui-font-11);
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.saved-session-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.saved-session-restore svg {
+  width: 14px;
+  height: 14px;
+}
+
+.saved-session-collapse svg {
+  width: 14px;
+  height: 14px;
+}
+
+.saved-session-collapse::after {
+  content: none;
+  display: none;
+}
+
+.saved-sessions-empty {
+  padding: 34px 16px;
+  text-align: center;
+  color: var(--muted);
+  font-family: 'Libre Caslon Display', serif;
+  font-size: var(--ui-font-18);
+  line-height: 1.45;
+}
+
+/* ---- Toast notification ---- */
+.toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%) translateY(80px);
+  background: var(--ink);
+  color: var(--paper);
+  font-family: 'Public Sans', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 12px 24px;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  z-index: 100;
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toast.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+  pointer-events: auto;
+}
+
+.toast svg {
+  width: 16px;
+  height: 16px;
+  color: var(--status-active);
+}
+
+.toast-action[hidden] { display: none !important; }
+
+.toast-action {
+  background: transparent;
+  border: none;
+  color: var(--accent-amber);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.toast-action:hover { color: var(--paper); }
+
+.shortcut-editor-backdrop[hidden],
+.shortcut-editor[hidden] {
+  display: none !important;
+}
+
+.shortcut-editor-backdrop {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+  z-index: 109;
+}
+
+.shortcut-editor {
+  position: fixed;
+  inset: auto 88px 24px auto;
+  width: min(360px, calc(100vw - 32px));
+  z-index: 110;
+}
+
+.shortcut-editor-form {
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 10%), var(--warm-gray) 30%);
+  border-radius: 20px;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  box-shadow: 0 20px 42px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+  padding: 18px 18px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.shortcut-editor-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.shortcut-editor-header-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.shortcut-editor-title {
+  font-family: 'Libre Caslon Display', serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.05;
+  color: var(--ink);
+}
+
+.shortcut-editor-back[hidden] { display: none !important; }
+.shortcut-editor-back { display: none; }
+
+.shortcut-editor-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.shortcut-editor-close svg {
+  width: 14px;
+  height: 14px;
+}
+
+.shortcut-editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.shortcut-editor-field-inline {
+  margin-top: 2px;
+}
+
+.shortcut-editor-inline-field {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+
+.shortcut-editor-label {
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.shortcut-editor-input {
+  width: 100%;
+  min-height: 40px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 26%, var(--warm-gray) 74%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 74%), transparent);
+  color: var(--ink);
+  font: inherit;
+  padding: 0 12px;
+}
+
+.shortcut-editor-textarea {
+  min-height: 110px;
+  resize: vertical;
+  padding: 10px 12px;
+  line-height: 1.45;
+}
+
+.shortcut-editor-emoji-input {
+  max-width: 120px;
+}
+
+.shortcut-editor-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.shortcut-editor-mode-stage {
+  min-height: 152px;
+}
+
+.shortcut-editor-source-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.shortcut-editor-source-segments {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 18%, var(--warm-gray) 82%);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 70%), transparent);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shortcut-editor-source-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 74%, var(--workspace-chip-text) 26%);
+  border-radius: 9px;
+  min-height: 34px;
+  padding: 0 11px;
+  flex: 1 1 0;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.shortcut-editor-source-chip:hover {
+  color: var(--workspace-chip-text);
+  background: color-mix(in srgb, var(--workspace-chip-bg) 54%, transparent);
+}
+
+.shortcut-editor-source-chip[aria-pressed="true"] {
+  color: var(--workspace-chip-text);
+  background: color-mix(in srgb, var(--workspace-chip-bg) 88%, var(--card-bg) 12%);
+}
+
+.shortcut-editor-mode-group[hidden] {
+  display: none !important;
+}
+
+.shortcut-editor-mode-group {
+  width: 100%;
+}
+
+.shortcut-editor-mode-note {
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.shortcut-editor-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.shortcut-editor-clear {
+  border: none;
+  background: transparent;
+  color: var(--workspace-chip-text);
+  font-size: 11px;
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.shortcut-editor-preview-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.shortcut-editor-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 10%, var(--warm-gray) 90%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 66%), transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.shortcut-editor-field,
+.shortcut-editor-source-row,
+.shortcut-editor-mode-stage,
+.shortcut-editor-footer {
+  width: 100%;
+}
+
+.shortcut-editor-preview img {
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+}
+
+.shortcut-editor-preview-fallback {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--theme-accent-soft);
+  color: var(--theme-accent-strong);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.shortcut-editor-preview-glyph {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.shortcut-editor-emoji-chip {
+  width: 32px;
+  height: 32px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 22%, var(--warm-gray) 78%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 72%), transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.shortcut-editor-preview-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.shortcut-editor-preview-title {
+  font-size: 13px;
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.shortcut-editor-preview-meta {
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.shortcut-editor-actions-row,
+.shortcut-editor-footer {
+  display: flex;
+  gap: 10px;
+}
+
+.shortcut-editor-footer {
+  margin-top: 2px;
+}
+
+.back-to-top {
+  position: fixed;
+  left: 24px;
+  bottom: 28px;
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--warm-gray) var(--floating-border-opacity), transparent);
+  background: color-mix(in srgb, var(--card-bg) var(--floating-surface-opacity), transparent);
+  color: var(--accent-amber);
+  box-shadow: 0 10px 24px rgba(26, 22, 19, 0.12);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+  z-index: 95;
+  backdrop-filter: blur(10px) saturate(1.02);
+}
+
+.back-to-top.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.back-to-top:hover {
+  background: color-mix(in srgb, var(--card-bg) calc(var(--floating-surface-opacity) + 8%), transparent);
+  box-shadow: 0 14px 28px rgba(26, 22, 19, 0.16);
+}
+
+.back-to-top svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ---- Footer ---- */
+footer {
+  margin-top: 48px;
+  padding-top: 20px;
+  border-top: 1px solid var(--warm-gray);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.footer-stats {
+  display: flex;
+  gap: 32px;
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-num {
+  font-family: 'Libre Caslon Display', serif;
+  font-size: 28px;
+  font-weight: 300;
+  color: var(--ink);
+  line-height: 1;
+  transition: all 0.3s;
+}
+
+.stat-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
+.last-refresh {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.footer-credit {
+  color: var(--muted);
+}
+
+.footer-credit-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.18s ease;
+}
+
+.footer-credit-link:hover,
+.footer-credit-link:focus-visible {
+  color: var(--theme-accent-strong);
+}
+
+.refresh-btn {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--accent-amber);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ---- Animations ---- */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+body.entry-animations-enabled header { animation: fadeUp 0.5s ease both; }
+body.entry-animations-enabled .tab-cleanup-banner { animation: fadeUp 0.5s ease 0.1s both; }
+body.entry-animations-enabled .nudge-banner { animation: fadeUp 0.5s ease 0.15s both; }
+body.entry-animations-enabled .active-section .section-header { animation: fadeUp 0.5s ease 0.2s both; }
+body.entry-animations-enabled .abandoned-section .section-header { animation: fadeUp 0.5s ease 0.45s both; }
+body.entry-animations-enabled footer { animation: fadeUp 0.5s ease 0.65s both; }
+body.entry-animations-enabled .deferred-column .section-header { animation: fadeUp 0.5s ease 0.1s both; }
+
+
+/* ================================================================
+   STATIC DEFAULT VIEW — new elements added for "AI on demand"
+   ================================================================ */
+
+/* ---- Neutral status bar (domain-grouped cards, no AI color) ---- */
+.status-bar.neutral {
+  background: var(--warm-gray);
+}
+
+/* ---- "Domain" tag on static domain cards ---- */
+.mission-tag.neutral {
+  color: var(--muted);
+  background: rgba(154, 145, 138, 0.1);
+}
+
+/* ================================================================
+   MISSIONS EMPTY STATE
+   Shown when all mission cards have been closed.
+   A calm, satisfying "you did it" moment.
+   ================================================================ */
+
+.missions-empty-state {
+  /* Takes the full width — spans all columns */
+  column-span: all;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  padding: 56px 24px;
+  text-align: center;
+
+  animation: fadeUp 0.5s ease both;
+}
+
+/* CSS-drawn checkmark in a glowing circle */
+.empty-checkmark {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(90, 122, 98, 0.1);
+  border: 1.5px solid rgba(90, 122, 98, 0.3);
+
+  /* Soft sage glow */
+  box-shadow: 0 0 0 8px rgba(90, 122, 98, 0.05),
+              0 0 0 16px rgba(90, 122, 98, 0.03);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Pop in with a gentle scale animation */
+  animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
+}
+
+.empty-checkmark svg {
+  width: 26px;
+  height: 26px;
+  color: var(--accent-sage);
+  stroke-width: 2.5;
+}
+
+@keyframes checkPop {
+  from { transform: scale(0.6); opacity: 0; }
+  to   { transform: scale(1);   opacity: 1; }
+}
+
+.empty-title {
+  font-family: 'Libre Caslon Display', serif;
+  font-size: 20px;
+  font-weight: 400;
+  font-style: italic;
+  color: var(--ink);
+  letter-spacing: -0.3px;
+}
+
+.empty-subtitle {
+  font-size: 13px;
+  color: var(--muted);
+  font-weight: 400;
+  letter-spacing: 0.3px;
+}
+
+
+/* ================================================================
+   UPDATE BANNER
+   Appears at the very top of the page when a new version is available.
+   Intentionally thin and unobtrusive — it's informational, not urgent.
+   The warm sage green palette feels calm and positive ("new thing!"),
+   contrasting with the amber/rose warning tones used elsewhere.
+   ================================================================ */
+
+.update-banner {
+  /* Thin bar — sits above the header, below the container's top padding */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  /* Sage green tint — matches accent-sage but very light */
+  background: linear-gradient(135deg, rgba(90, 122, 98, 0.05), rgba(90, 122, 98, 0.10));
+  border: 1px solid rgba(90, 122, 98, 0.22);
+  border-radius: 8px;
+  padding: 10px 16px;
+
+  /* Push the header down slightly */
+  margin-bottom: 24px;
+
+  /* Slide in from above when it appears */
+  animation: bannerSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes bannerSlideIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Left cluster: icon + text */
+.update-banner-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0; /* prevents text overflow from breaking layout */
+}
+
+.update-banner-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--accent-sage);
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.update-banner-text {
+  font-size: 13px;
+  font-size: var(--ui-font-13);
+  color: var(--ink);
+  font-weight: 400;
+  line-height: 1.4;
+  opacity: 0.85;
+}
+
+/* Right cluster: action button + dismiss X */
+.update-banner-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* "Update now" button — small, filled, sage green */
+.update-banner-btn {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  font-weight: 500;
+  color: #fff;
+  background: var(--accent-sage);
+  border: none;
+  border-radius: 5px;
+  padding: 5px 12px;
+  cursor: pointer;
+  letter-spacing: 0.2px;
+  transition: background 0.2s, opacity 0.2s;
+  white-space: nowrap;
+}
+
+.update-banner-btn:hover {
+  background: #4a6952; /* slightly darker sage */
+}
+
+.update-banner-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Dismiss X button — minimal, icon-only */
+.update-banner-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  color: var(--muted);
+  transition: background 0.15s, color 0.15s;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.update-banner-dismiss:hover {
+  background: rgba(26, 22, 19, 0.06);
+  color: var(--ink);
+}
+
+.update-banner-dismiss svg {
+  width: 14px;
+  height: 14px;
+}
+
+
+/* ================================================================
+   SAVED FOR LATER — Checklist Column + Archive
+   ================================================================ */
+
+/* ---- Two-column layout ---- */
+.dashboard-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
+  column-gap: 40px;
+  row-gap: 24px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.dashboard-columns .active-section {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  min-width: 0;
+  width: 100%;
+}
+
+.dashboard-columns .page-header {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.drawer-trigger-stack {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 92;
+}
+
+.deferred-trigger {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--drawer-trigger-border);
+  border-right: none;
+  border-radius: 11px 0 0 11px;
+  background: var(--drawer-trigger-surface);
+  color: var(--drawer-trigger-icon);
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--workspace-accent) 10%, transparent);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
+}
+
+.deferred-trigger:hover {
+  transform: translateX(-2px);
+  background: var(--drawer-trigger-surface-hover);
+  border-color: var(--drawer-trigger-border-hover);
+  box-shadow: 0 12px 22px color-mix(in srgb, var(--workspace-accent) 16%, transparent);
+}
+
+.deferred-trigger-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.deferred-trigger[aria-expanded="true"] {
+  background: color-mix(in srgb, var(--card-bg) 86%, var(--workspace-accent-soft) 14%);
+  border-color: var(--drawer-trigger-border-hover);
+  box-shadow: 0 18px 30px color-mix(in srgb, var(--workspace-accent) 18%, transparent);
+}
+
+.todo-trigger {
+  position: relative;
+  min-width: 42px;
+}
+
+.deferred-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 22, 19, 0.01);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 90;
+}
+
+.deferred-overlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Right drawer — overlay on desktop, full-screen on mobile */
+.deferred-column {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  bottom: 20px;
+  width: min(392px, calc(100vw - 40px));
+  padding: 0;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(24px);
+  transition: opacity 0.22s ease, transform 0.22s ease;
+  z-index: 91;
+}
+
+.deferred-column.open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.deferred-shell {
+  height: 100%;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 18%), var(--warm-gray) 26%);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  box-shadow: 0 20px 38px color-mix(in srgb, var(--workspace-accent) 16%, transparent);
+  padding: 24px 22px 22px;
+  overflow-y: auto;
+  backdrop-filter: blur(10px);
+}
+
+.drawer-panel {
+  display: none;
+}
+
+.drawer-panel.is-active {
+  display: block;
+}
+
+.deferred-header {
+  padding-bottom: 8px;
+  animation: none !important;
+}
+
+.drawer-title-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.drawer-title-btn {
+  border: none;
+  background: transparent;
+  padding: 0 0 2px;
+  font-family: 'Libre Caslon Display', serif;
+  font-weight: 400;
+  font-size: 22px;
+  font-size: var(--ui-font-22);
+  line-height: 1.02;
+  color: var(--drawer-tab-idle);
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 5px;
+  transition: color 0.15s ease, opacity 0.15s ease, text-decoration-color 0.15s ease;
+}
+
+.drawer-title-btn.is-active,
+.drawer-title-btn[aria-selected="true"] {
+  color: var(--ink);
+  text-decoration-color: var(--drawer-tab-underline-active);
+}
+
+.drawer-title-btn:not(.is-active):hover,
+.drawer-title-btn[aria-selected="false"]:hover {
+  color: var(--drawer-tab-hover);
+  text-decoration-color: var(--drawer-tab-underline-hover);
+}
+
+.drawer-title-btn:not(.is-active):active,
+.drawer-title-btn[aria-selected="false"]:active {
+  color: var(--drawer-tab-pressed);
+  text-decoration-color: var(--drawer-tab-underline-pressed);
+}
+
+.drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.drawer-icon-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 999px;
+  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
+  opacity: 0.7;
+}
+
+.drawer-icon-btn:hover {
+  color: var(--accent-amber);
+  background: rgba(200, 113, 58, 0.08);
+  opacity: 1;
+}
+
+.drawer-icon-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.mission-card.group-nav-target,
+.saved-session-card.group-nav-target {
+  box-shadow: 0 0 0 2px rgba(200, 113, 58, 0.18), 0 10px 24px rgba(26, 22, 19, 0.08);
+}
+
+/* On narrow screens, stack vertically */
+@media (max-width: 960px) {
+  .dashboard-columns {
+    grid-template-columns: 1fr;
+    row-gap: 20px;
+  }
+  .dashboard-columns .active-section,
+  .dashboard-columns .page-header {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  .page-header {
+    justify-content: flex-start;
+    text-align: left;
+    padding: 20px 18px;
+  }
+  .header-left {
+    align-items: flex-start;
+  }
+  .header-title-row {
+    justify-content: flex-start;
+    gap: 12px;
+  }
+  .hitokoto {
+    max-width: 100%;
+  }
+  .quick-tabs-grid {
+    gap: 12px 10px;
+  }
+  .theme-menu {
+    width: min(320px, calc(100vw - 32px));
+  }
+  .saved-tabs-page-header,
+  .saved-session-card {
+    grid-template-columns: 1fr;
+  }
+  .saved-tabs-page-header {
+    flex-direction: column;
+    gap: 14px;
+  }
+  .saved-tabs-page-actions,
+  .saved-session-actions {
+    justify-content: flex-start;
+  }
+  .session-picker-tab-row {
+    grid-template-columns: 18px minmax(0, 1fr);
+    row-gap: 3px;
+  }
+  .session-picker-tab-url {
+    grid-column: 2;
+    min-width: 0;
+  }
+  .deferred-trigger {
+    min-width: 44px;
+    width: 44px;
+    min-height: 44px;
+    height: 44px;
+    border-radius: 999px;
+    padding: 0;
+    justify-content: center;
+  }
+  .drawer-trigger-stack {
+    right: 12px;
+    top: auto;
+    bottom: 24px;
+    gap: 8px;
+  }
+  .deferred-trigger:hover {
+    transform: translateY(-1px);
+  }
+  .deferred-column {
+    inset: 0;
+    width: 100%;
+    transform: translateY(20px);
+  }
+  .deferred-column.open {
+    transform: translateY(0);
+  }
+  .deferred-shell {
+    border-radius: 0;
+    padding: 18px 16px 20px;
+  }
+  .group-nav {
+    gap: 6px;
+  }
+  .group-nav-button {
+    width: 30px;
+    height: 30px;
+  }
+  .back-to-top {
+    left: 18px;
+    bottom: 20px;
+    width: 44px;
+    height: 44px;
+  }
+  .drawer-icon-btn,
+  .archive-item-delete,
+  .deferred-action-btn,
+  .drawer-reorder-handle {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+/* ---- Checklist items ---- */
+.deferred-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(154, 145, 138, 0.12);
+  animation: fadeUp 0.3s ease both;
+  position: relative;
+}
+
+.deferred-item:last-child {
+  border-bottom: none;
+}
+
+/* Custom checkbox */
+.deferred-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--warm-gray);
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 1px;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.deferred-checkbox:hover {
+  border-color: var(--accent-sage);
+}
+
+.deferred-checkbox:checked {
+  background: var(--accent-sage);
+  border-color: var(--accent-sage);
+}
+
+/* Checkmark inside the checkbox */
+.deferred-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Item content (title, domain, time) */
+.deferred-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.deferred-title {
+  font-size: 14px;
+  font-size: var(--ui-font-14);
+  line-height: 1.45;
+  color: var(--ink);
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+
+.deferred-title:hover {
+  color: var(--accent-amber);
+}
+
+.deferred-meta {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  color: var(--muted);
+  margin-top: 2px;
+  display: flex;
+  gap: 8px;
+}
+
+.deferred-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.drawer-reorder-handle {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--ink) 86%, var(--muted) 14%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  border-radius: 999px;
+  opacity: 1;
+  box-shadow: none;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.drawer-reorder-handle:hover {
+  opacity: 1;
+  color: var(--ink);
+  background: rgba(154, 145, 138, 0.08);
+}
+
+.drawer-reorder-handle:active {
+  cursor: grabbing;
+}
+
+.drawer-reorder-handle svg {
+  width: 14px;
+  height: 14px;
+}
+
+.todo-reorder-handle {
+  width: 30px;
+  height: 30px;
+  color: color-mix(in srgb, var(--ink) 84%, var(--muted) 16%);
+}
+
+.todo-reorder-handle:hover,
+.todo-reorder-handle:focus-visible {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--workspace-chip-bg) 76%, transparent);
+}
+
+.todo-reorder-handle svg {
+  width: 16px;
+  height: 16px;
+}
+
+body.drawer-list-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+body.drawer-list-dragging .drawer-reorder-handle {
+  cursor: grabbing;
+}
+
+body.page-chip-list-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+body.page-chip-list-dragging .chip-reorder-handle {
+  cursor: grabbing;
+}
+
+body.page-chip-drag-armed,
+body.page-chip-drag-armed * {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+body.page-chip-drop-new-group .main-content {
+  outline: none;
+}
+
+.mission-drop-new-group-slot {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  pointer-events: none;
+}
+
+.mission-drop-new-group-line {
+  width: 100%;
+  border-top: 2px dashed color-mix(in srgb, var(--workspace-accent-border) 60%, var(--warm-gray) 40%);
+  opacity: 0.9;
+}
+
+.page-chip.is-dragging {
+  position: fixed;
+  left: var(--drag-left, 0);
+  top: var(--drag-top, 0);
+  width: var(--drag-width, auto);
+  z-index: 120;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.chip-reorder-placeholder {
+  border: 1px dashed rgba(154, 145, 138, 0.28);
+  border-radius: 12px;
+  background: rgba(248, 245, 240, 0.72);
+  margin: 4px 0;
+}
+
+.todo-item.is-dragging {
+  position: fixed;
+  left: var(--drag-left, 0);
+  top: var(--drag-top, 0);
+  width: var(--drag-width, auto);
+  z-index: 120;
+  pointer-events: none;
+  border-bottom-color: transparent;
+  border-radius: 12px;
+  background: rgba(255, 253, 249, 0.96);
+  box-shadow: 0 18px 34px rgba(26, 22, 19, 0.16);
+}
+
+.drawer-reorder-placeholder {
+  border: 1px dashed rgba(154, 145, 138, 0.28);
+  border-radius: 12px;
+  background: rgba(248, 245, 240, 0.72);
+  margin: 4px 0;
+}
+
+.deferred-action-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  opacity: 0.35;
+  border-radius: 999px;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.deferred-action-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.deferred-action-btn:hover {
+  opacity: 1;
+}
+
+.deferred-restore:hover {
+  color: var(--accent-sage);
+  background: rgba(90, 122, 98, 0.08);
+}
+
+/* Checked-off item — strikethrough + faded */
+.deferred-item.checked .deferred-title {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+
+.deferred-item.checked .deferred-meta {
+  opacity: 0.5;
+}
+
+/* Dismiss (X) button */
+.deferred-dismiss {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 2px;
+  opacity: 0.3;
+  transition: opacity 0.15s, color 0.15s;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.deferred-dismiss svg {
+  width: 14px;
+  height: 14px;
+}
+
+.deferred-dismiss:hover {
+  opacity: 1;
+  color: var(--status-abandoned);
+}
+
+/* Slide-out animation for items being removed */
+.deferred-item.removing {
+  opacity: 0;
+  transform: translateX(20px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* ---- Empty state ---- */
+.deferred-empty {
+  font-size: 13px;
+  font-size: var(--ui-font-13);
+  color: var(--muted);
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+/* ---- Archive section ---- */
+.deferred-archive {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--warm-gray);
+}
+
+.archive-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.archive-toggle {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  font-weight: 500;
+  color: var(--muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  width: auto;
+  text-align: left;
+  transition: color 0.15s;
+}
+
+.archive-toggle:hover {
+  color: var(--ink);
+}
+
+.archive-chevron {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.2s;
+}
+
+.archive-toggle.open .archive-chevron {
+  transform: rotate(180deg);
+}
+
+.archive-count {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  color: var(--muted);
+  opacity: 0.7;
+}
+
+.archive-body {
+  padding-top: 12px;
+}
+
+.archive-search {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--warm-gray);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  color: var(--ink);
+  outline: none;
+  transition: border-color 0.2s;
+  margin-bottom: 12px;
+}
+
+.archive-search:focus {
+  border-color: var(--accent-amber);
+}
+
+.archive-search::placeholder {
+  color: var(--muted);
+}
+
+.archive-clear-btn {
+  border: none;
+  background: transparent;
+  color: var(--workspace-chip-text);
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  flex-shrink: 0;
+}
+
+.archive-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(154, 145, 138, 0.08);
+}
+
+.archive-item:last-child {
+  border-bottom: none;
+}
+
+.archive-item-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.archive-item-title {
+  font-size: 12px;
+  font-size: var(--ui-font-12);
+  color: var(--muted);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  transition: color 0.15s;
+}
+
+.archive-item-title:hover {
+  color: var(--ink);
+}
+
+.archive-item-date {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  color: var(--muted);
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.archive-item-delete {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.45;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.archive-item-delete:hover {
+  opacity: 1;
+  color: var(--status-abandoned);
+  background: rgba(179, 90, 90, 0.08);
+}
+
+.archive-item-delete svg {
+  width: 13px;
+  height: 13px;
+}
+
+.todo-header {
+  align-items: center;
+}
+
+.todo-new-btn {
+  border: none;
+  background: transparent;
+  color: var(--accent-amber);
+  font-size: 18px;
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+}
+
+.saved-search-wrap,
+.todo-search-wrap {
+  margin-bottom: 12px;
+}
+
+.todo-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.todo-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(154, 145, 138, 0.12);
+  position: relative;
+}
+
+.todo-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--warm-gray);
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 1px;
+  position: relative;
+}
+
+.todo-checkbox:checked {
+  background: var(--accent-sage);
+  border-color: var(--accent-sage);
+}
+
+.todo-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.todo-main {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+}
+
+.todo-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.todo-action-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
+}
+
+.todo-action-btn:hover,
+.todo-action-btn:focus-visible {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--workspace-chip-bg) 82%, transparent);
+  border-color: color-mix(in srgb, var(--workspace-accent-border) 34%, transparent);
+}
+
+.todo-action-btn.todo-delete:hover,
+.todo-action-btn.todo-delete:focus-visible {
+  color: var(--accent-amber);
+}
+
+.todo-action-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.todo-title {
+  font-size: 14px;
+  font-size: var(--ui-font-14);
+  font-weight: 400;
+  line-height: 1.45;
+  color: inherit;
+}
+
+.todo-meta,
+.todo-detail-meta {
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  color: var(--muted);
+}
+
+.todo-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.todo-back-btn {
+  border: none;
+  background: transparent;
+  color: var(--accent-amber);
+  font-size: 12px;
+  font-family: 'Public Sans', sans-serif;
+  font-weight: 600;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.todo-back-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+:is(
+  .action-btn,
+  .archive-clear-btn,
+  .archive-item-delete,
+  .archive-search,
+  .archive-toggle,
+  .back-to-top,
+  .chip-action,
+  .deferred-action-btn,
+  .deferred-checkbox,
+  .deferred-trigger,
+  .drawer-icon-btn,
+  .drawer-reorder-handle,
+  .drawer-title-btn,
+  .group-action-icon,
+  .group-nav-button,
+  .header-search-input,
+  .header-theme-trigger,
+  .section-icon-action,
+  .move-menu-btn,
+  .quick-shortcut-open,
+  .quick-shortcut-remove,
+  .tab-cleanup-btn,
+  .theme-language-option,
+  .theme-menu-action,
+  .theme-option,
+  .theme-range,
+  .todo-editor-input,
+  .todo-back-btn,
+  .todo-action-btn,
+  .todo-checkbox,
+  .todo-main,
+  .workspace-page-switch-btn
+):focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.quick-shortcut-remove:focus-visible,
+.header-search-input:focus-visible,
+.archive-search:focus-visible,
+.theme-range:focus-visible {
+  outline-offset: 3px;
+}
+
+.header-search-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.todo-editor-view {
+  margin: 2px 0 14px;
+}
+
+.todo-editor-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 22%, var(--warm-gray) 78%);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card-bg) 94%, var(--paper) 6%);
+  padding: 14px;
+}
+
+.todo-editor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.todo-editor-head h3 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 15px;
+  font-size: var(--ui-font-15);
+  line-height: 1.25;
+  font-weight: 650;
+}
+
+.todo-editor-field {
+  display: grid;
+  gap: 6px;
+}
+
+.todo-editor-label {
+  font-size: 10px;
+  font-size: var(--ui-font-10);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.todo-editor-input {
+  width: 100%;
+  min-height: 40px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) 24%, var(--warm-gray) 76%);
+  background: color-mix(in srgb, var(--card-bg) calc(var(--custom-surface-opacity) + 74%), transparent);
+  color: var(--ink);
+  font: inherit;
+  padding: 0 12px;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+.todo-editor-input:focus {
+  border-color: color-mix(in srgb, var(--accent-amber) 54%, var(--workspace-accent-border) 46%);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-amber) 18%, transparent);
+}
+
+.todo-editor-input::placeholder {
+  color: color-mix(in srgb, var(--muted) 78%, transparent);
+}
+
+.todo-editor-textarea {
+  min-height: 104px;
+  resize: vertical;
+  padding: 10px 12px;
+  line-height: 1.5;
+}
+
+.todo-editor-error {
+  min-height: 16px;
+  color: var(--accent-amber);
+  font-size: 11px;
+  font-size: var(--ui-font-11);
+  line-height: 1.35;
+}
+
+.todo-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.todo-detail-card {
+  border: 1px solid rgba(154, 145, 138, 0.12);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--card-bg) 96%, var(--paper) 4%);
+  padding: 16px;
+}
+
+.todo-detail-card h3 {
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+
+.todo-detail-card p {
+  font-size: 13px;
+  color: var(--ink);
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.todo-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+/* ---- Tab Picker Popover ---- */
+.tab-picker-backdrop[hidden] { display: none !important; }
+
+.tab-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+  z-index: 108;
+}
+
+.tab-picker[hidden] { display: none !important; }
+
+.tab-picker {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 320px;
+  max-height: min(480px, calc(100vh - 80px));
+  border: 1px solid color-mix(in srgb, var(--workspace-accent-border) calc(var(--custom-border-opacity) + 8%), var(--warm-gray) 28%);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  box-shadow: 0 20px 42px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 109;
+}
+
+.tab-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px 8px;
+  flex-shrink: 0;
+}
+
+.tab-picker-close {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.tab-picker-close:hover {
+  background: rgba(154, 145, 138, 0.12);
+  color: var(--ink);
+}
+
+.tab-picker-close svg { width: 14px; height: 14px; }
+
+.tab-picker-view-switch {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.tab-picker-view-switch .drawer-title-btn {
+  font-size: 16px;
+  font-size: var(--ui-font-16);
+  line-height: 1.05;
+  white-space: nowrap;
+  flex: 1 1 0;
+  text-align: center;
+}
+
+.tab-picker-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px 10px;
+  flex-shrink: 0;
+}
+
+.tab-picker-search-wrap[hidden],
+.tab-picker-list[hidden],
+.tab-picker-editor-host[hidden] {
+  display: none !important;
+}
+
+.tab-picker-search-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.tab-picker-search {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 13px;
+  font-size: var(--ui-font-13);
+  outline: none;
+}
+
+.tab-picker-search::placeholder { color: var(--muted); }
+
+.tab-picker-list {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 2px 6px 4px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--warm-gray) transparent;
+}
+
+.tab-picker-editor-host {
+  flex: 1;
+  padding: 0 14px 14px;
+}
+
+.shortcut-editor-form.is-tab-picker-pane {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0 0 4px;
+  gap: 12px;
+}
+
+.shortcut-editor-form.is-tab-picker-pane .shortcut-editor-header {
+  display: none;
+}
+
+.tab-picker-list::-webkit-scrollbar { width: 4px; }
+.tab-picker-list::-webkit-scrollbar-track { background: transparent; }
+.tab-picker-list::-webkit-scrollbar-thumb {
+  background: var(--warm-gray);
+  border-radius: 999px;
+}
+
+.tab-picker-group-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 8px 10px 4px;
+  position: sticky;
+  top: 0;
+  background: color-mix(in srgb, var(--card-bg) var(--panel-card-opacity), transparent);
+  z-index: 1;
+}
+
+.tab-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.tab-picker-row:hover { background: color-mix(in srgb, var(--workspace-accent-soft) 48%, transparent); }
+.tab-picker-row.is-selected { background: color-mix(in srgb, var(--workspace-accent-soft) 36%, transparent); }
+.tab-picker-row:focus-visible { outline: 2px solid var(--workspace-chip-text); outline-offset: 1px; }
+
+.tab-picker-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--warm-gray);
+  border-radius: 4px;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s;
+  position: relative;
+}
+
+.tab-picker-checkbox:checked {
+  background: var(--workspace-chip-text);
+  border-color: var(--workspace-chip-text);
+}
+
+.tab-picker-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 5px;
+  height: 8px;
+  border: 1.5px solid white;
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg);
+}
+
+.tab-picker-favicon {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.tab-picker-favicon-fallback {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--theme-accent-soft);
+  color: var(--theme-accent-strong);
+  font-size: 8px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tab-picker-tab-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-picker-add-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--workspace-accent-soft) 56%, var(--card-bg) 44%);
+  color: var(--workspace-chip-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s, transform 0.12s;
+}
+
+.tab-picker-row:hover .tab-picker-add-btn,
+.tab-picker-add-btn:focus-visible { opacity: 1; }
+
+.tab-picker-add-btn:hover {
+  background: var(--workspace-chip-bg-strong);
+  transform: scale(1.08);
+}
+
+.tab-picker-add-btn:active { transform: scale(0.96); }
+.tab-picker-add-btn svg { width: 12px; height: 12px; }
+
+.tab-picker-added-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--accent-sage);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.tab-picker-empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--muted);
+  font-style: italic;
+}
+
+.tab-picker-footer[hidden] { display: none !important; }
+
+.tab-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid color-mix(in srgb, var(--workspace-accent-border) 16%, transparent);
+  flex-shrink: 0;
+}
+
+.tab-picker-footer-count {
+  flex: 1;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.tab-picker-footer-add {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  border: none;
+  background: var(--workspace-chip-text);
+  color: var(--workspace-accent-contrast);
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.12s;
+  min-height: 32px;
+}
+
+.tab-picker-footer-add:hover { background: var(--banner-action-bg-hover); }
+.tab-picker-footer-add:active { transform: scale(0.97); }
+
+.tab-picker-footer-clear {
+  font-family: 'Public Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.tab-picker-footer-clear:hover { color: var(--ink); background: rgba(154, 145, 138, 0.1); }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .deferred-column,
+  .deferred-trigger,
+  .group-nav-button,
+  .mission-card,
+  .page-chip,
+  .quick-shortcut-open {
+    transform: none !important;
+  }
+}
diff --git a/extension/tab-sessions.js b/extension/tab-sessions.js
new file mode 100644
index 0000000..a2cb206
--- /dev/null
+++ b/extension/tab-sessions.js
@@ -0,0 +1,493 @@
+'use strict';
+
+(function attachTabHarborTabSessions(globalScope) {
+  const urlUtils = globalScope.TabHarborTabUrlUtils || (
+    typeof require === 'function' ? require('./tab-url-utils.js') : {}
+  );
+
+  const {
+    getCanonicalTabUrl: sessionsGetCanonicalTabUrl,
+    isRestorableTabUrl: sessionsIsRestorableTabUrl,
+    parseSuspendedTabUrl: sessionsParseSuspendedTabUrl,
+  } = urlUtils;
+
+  const SAVED_TAB_SESSIONS_KEY = 'savedTabSessions';
+  const MANUAL_GROUP_PREFIX = '__session_group__:';
+
+  function createSessionId(now = new Date()) {
+    return `tab-session-${now.getTime()}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+
+  function normalizeString(value = '') {
+    return String(value || '').trim();
+  }
+
+  function capitalizeLabel(value = '') {
+    const cleanValue = normalizeString(value);
+    if (!cleanValue) return '';
+    return cleanValue.charAt(0).toUpperCase() + cleanValue.slice(1);
+  }
+
+  function getHostnameFromUrl(value = '') {
+    try {
+      return normalizeString(new URL(String(value || '')).hostname || '');
+    } catch {
+      return '';
+    }
+  }
+
+  function getFriendlyHostnameLabel(hostname = '') {
+    const cleanHostname = normalizeString(hostname).replace(/^www\./, '');
+    if (!cleanHostname) return '';
+    if (cleanHostname === 'github.com') return 'GitHub';
+    if (cleanHostname === 'docs.github.com') return 'Docs';
+
+    const parts = cleanHostname.split('.').filter(Boolean);
+    if (parts.length >= 3) {
+      return parts[0]
+        .split(/[-_]/)
+        .map(capitalizeLabel)
+        .join(' ');
+    }
+
+    const base = (parts[0] || '')
+      .replace(/\.(co\.uk|co\.jp|com|org|net|io|co|ai|dev|app|so|me|xyz|info|us|uk)$/, '');
+    return base
+      .split(/[-_]/)
+      .map(capitalizeLabel)
+      .join(' ');
+  }
+
+  function stripSessionTitleNoise(title = '') {
+    return normalizeString(title)
+      .replace(/^\(\d+\+?\)\s*/, '')
+      .replace(/\s*\([\d,]+\+?\)\s*/g, ' ')
+      .replace(/\s+on X:\s*/, ': ')
+      .replace(/\s*\/\s*X\s*$/, '')
+      .trim();
+  }
+
+  function cleanDerivedSessionTitle(title = '', hostname = '') {
+    const cleanTitle = stripSessionTitleNoise(title);
+    if (!cleanTitle) return '';
+    if (cleanTitle.startsWith('http://') || cleanTitle.startsWith('https://')) return '';
+
+    const domain = normalizeString(hostname).replace(/^www\./, '');
+    const friendly = getFriendlyHostnameLabel(domain);
+    const domainWithoutSuffix = domain.replace(/\.\w+$/, '');
+    const separators = [' - ', ' | ', ' — ', ' · ', ' – '];
+
+    for (const separator of separators) {
+      const separatorIndex = cleanTitle.lastIndexOf(separator);
+      if (separatorIndex === -1) continue;
+      const suffix = cleanTitle.slice(separatorIndex + separator.length).trim().toLowerCase();
+      if (
+        suffix === domain.toLowerCase() ||
+        suffix === friendly.toLowerCase() ||
+        suffix === domainWithoutSuffix.toLowerCase()
+      ) {
+        const stripped = cleanTitle.slice(0, separatorIndex).trim();
+        if (stripped.length >= 2) return stripped;
+      }
+    }
+
+    return cleanTitle;
+  }
+
+  function normalizeSessionTab(input = {}) {
+    const canonicalUrl = sessionsGetCanonicalTabUrl ? sessionsGetCanonicalTabUrl(input.url || '') : normalizeString(input.url);
+    if (!canonicalUrl || !(sessionsIsRestorableTabUrl ? sessionsIsRestorableTabUrl(canonicalUrl) : true)) return null;
+
+    return {
+      url: canonicalUrl,
+      title: normalizeString(input.title) || canonicalUrl,
+      favIconUrl: normalizeString(input.favIconUrl),
+      groupKey: normalizeString(input.groupKey),
+      groupLabel: normalizeString(input.groupLabel),
+      manualGroupId: normalizeString(input.manualGroupId),
+    };
+  }
+
+  function normalizeSessionGroup(input = {}, validUrls = new Set()) {
+    const key = normalizeString(input.key);
+    if (!key) return null;
+    const tabUrls = Array.isArray(input.tabUrls)
+      ? input.tabUrls
+        .map(url => sessionsGetCanonicalTabUrl ? sessionsGetCanonicalTabUrl(url) : normalizeString(url))
+        .filter(url => url && validUrls.has(url))
+      : [];
+    if (!tabUrls.length) return null;
+
+    return {
+      key,
+      label: normalizeString(input.label) || 'Group',
+      manualGroupId: normalizeString(input.manualGroupId),
+      tabUrls: [...new Set(tabUrls)],
+    };
+  }
+
+  function normalizeSavedTabSessions(input) {
+    if (!Array.isArray(input)) return [];
+
+    return input
+      .map(session => {
+        const tabs = Array.isArray(session?.tabs)
+          ? session.tabs.map(normalizeSessionTab).filter(Boolean)
+          : [];
+        if (!tabs.length) return null;
+
+        const validUrls = new Set(tabs.map(tab => tab.url));
+        const groups = Array.isArray(session?.groups)
+          ? session.groups.map(group => normalizeSessionGroup(group, validUrls)).filter(Boolean)
+          : [];
+
+        return {
+          id: normalizeString(session.id) || createSessionId(),
+          name: normalizeString(session.name) || 'Saved tabs',
+          savedAt: normalizeString(session.savedAt) || new Date().toISOString(),
+          source: normalizeString(session.source) || 'manual',
+          tabs,
+          groups,
+        };
+      })
+      .filter(Boolean);
+  }
+
+  function buildSessionGroupsFromTabs(tabs = []) {
+    const groupMap = new Map();
+
+    for (const tab of Array.isArray(tabs) ? tabs : []) {
+      const key = normalizeString(tab?.groupKey);
+      if (!key) continue;
+      if (!groupMap.has(key)) {
+        groupMap.set(key, {
+          key,
+          label: normalizeString(tab?.groupLabel) || 'Group',
+          manualGroupId: normalizeString(tab?.manualGroupId),
+          tabUrls: [],
+        });
+      }
+      const group = groupMap.get(key);
+      if (!group.tabUrls.includes(tab.url)) group.tabUrls.push(tab.url);
+    }
+
+    return [...groupMap.values()];
+  }
+
+  function createUniqueSavedTabSessionName(baseName, sessions = [], excludeSessionId = '') {
+    const fallbackName = normalizeString(baseName) || 'Saved tabs';
+    const lowerFallback = fallbackName.toLowerCase();
+    const takenNames = new Set(
+      (Array.isArray(sessions) ? sessions : [])
+        .filter(session => String(session?.id || '') !== String(excludeSessionId || ''))
+        .map(session => normalizeString(session?.name).toLowerCase())
+        .filter(Boolean)
+    );
+
+    if (!takenNames.has(lowerFallback)) return fallbackName;
+
+    let suffix = 2;
+    while (takenNames.has(`${lowerFallback} ${suffix}`)) suffix += 1;
+    return `${fallbackName} ${suffix}`;
+  }
+
+  function deriveSavedTabSessionName(tab = {}) {
+    const hostname = getHostnameFromUrl(tab?.url || '');
+    const title = cleanDerivedSessionTitle(tab?.title || '', hostname);
+    if (title) return title;
+
+    return getFriendlyHostnameLabel(hostname) || 'Saved tabs';
+  }
+
+  function createSavedTabSessionFromTab({
+    sourceSession = {},
+    tab = {},
+    existingSessions = [],
+    now = new Date().toISOString(),
+  } = {}) {
+    const normalizedTab = normalizeSessionTab(tab);
+    if (!normalizedTab) throw new Error('Dragged tab is not restorable');
+
+    const savedAt = normalizeString(now) || new Date().toISOString();
+    const baseName = deriveSavedTabSessionName({
+      ...tab,
+      ...normalizedTab,
+    });
+
+    return {
+      id: createSessionId(new Date(savedAt)),
+      name: createUniqueSavedTabSessionName(baseName, existingSessions),
+      savedAt,
+      source: normalizeString(sourceSession?.source) || 'manual',
+      tabs: [normalizedTab],
+      groups: buildSessionGroupsFromTabs([normalizedTab]),
+    };
+  }
+
+  function getTabId(tab = {}) {
+    return tab?.id == null ? '' : String(tab.id);
+  }
+
+  function getTabTitle(tab = {}, canonicalUrl = '') {
+    const suspended = sessionsParseSuspendedTabUrl
+      ? sessionsParseSuspendedTabUrl(tab.url || '')
+      : { title: '' };
+    return normalizeString(suspended.title) || normalizeString(tab.title) || canonicalUrl;
+  }
+
+  function normalizeGroupLookupEntry(entry = {}) {
+    if (!entry || typeof entry !== 'object') return null;
+    const key = normalizeString(entry.key);
+    if (!key) return null;
+    return {
+      key,
+      label: normalizeString(entry.label) || 'Group',
+      manualGroupId: normalizeString(entry.manualGroupId),
+    };
+  }
+
+  function buildSessionSnapshot({
+    tabs = [],
+    groupLookup = new Map(),
+    selectedTabIds = null,
+    source = 'manual',
+    name = '',
+    now = new Date().toISOString(),
+  } = {}) {
+    const selectedIds = Array.isArray(selectedTabIds)
+      ? new Set(selectedTabIds.map(String))
+      : null;
+    const savedAt = normalizeString(now) || new Date().toISOString();
+
+    const savedTabs = [];
+    const groupMap = new Map();
+
+    for (const tab of Array.isArray(tabs) ? tabs : []) {
+      const tabId = getTabId(tab);
+      if (selectedIds && !selectedIds.has(tabId)) continue;
+
+      const canonicalUrl = sessionsGetCanonicalTabUrl ? sessionsGetCanonicalTabUrl(tab?.url || '') : normalizeString(tab?.url);
+      if (!canonicalUrl || !(sessionsIsRestorableTabUrl ? sessionsIsRestorableTabUrl(canonicalUrl) : true)) continue;
+
+      const lookupEntry = typeof groupLookup?.get === 'function'
+        ? normalizeGroupLookupEntry(groupLookup.get(tabId) || groupLookup.get(canonicalUrl))
+        : null;
+      const savedTab = {
+        url: canonicalUrl,
+        title: getTabTitle(tab, canonicalUrl),
+        favIconUrl: normalizeString(tab?.favIconUrl),
+        groupKey: lookupEntry?.key || '',
+        groupLabel: lookupEntry?.label || '',
+        manualGroupId: lookupEntry?.manualGroupId || '',
+      };
+
+      savedTabs.push(savedTab);
+
+      if (lookupEntry) {
+        if (!groupMap.has(lookupEntry.key)) {
+          groupMap.set(lookupEntry.key, {
+            key: lookupEntry.key,
+            label: lookupEntry.label,
+            manualGroupId: lookupEntry.manualGroupId,
+            tabUrls: [],
+          });
+        }
+        groupMap.get(lookupEntry.key).tabUrls.push(canonicalUrl);
+      }
+    }
+
+    if (!savedTabs.length) {
+      throw new Error('No restorable tabs selected');
+    }
+
+    const groups = [...groupMap.values()].map(group => ({
+      ...group,
+      tabUrls: [...new Set(group.tabUrls)],
+    }));
+
+    return {
+      id: createSessionId(new Date(savedAt)),
+      name: normalizeString(name) || `Saved tabs ${new Date(savedAt).toLocaleString()}`,
+      savedAt,
+      source: normalizeString(source) || 'manual',
+      tabs: savedTabs,
+      groups,
+    };
+  }
+
+  function createRestoredSessionGroups({
+    existingState = { groups: [], assignments: {} },
+    session = {},
+    restoredTabs = [],
+    now = new Date().toISOString(),
+  } = {}) {
+    const normalizedState = {
+      groups: Array.isArray(existingState?.groups) ? existingState.groups.slice() : [],
+      assignments: existingState?.assignments && typeof existingState.assignments === 'object'
+        ? { ...existingState.assignments }
+        : {},
+    };
+    const restoredByUrl = new Map();
+    for (const tab of Array.isArray(restoredTabs) ? restoredTabs : []) {
+      const canonicalUrl = sessionsGetCanonicalTabUrl ? sessionsGetCanonicalTabUrl(tab?.url || '') : normalizeString(tab?.url);
+      if (!canonicalUrl || tab?.id == null) continue;
+      if (!restoredByUrl.has(canonicalUrl)) restoredByUrl.set(canonicalUrl, []);
+      restoredByUrl.get(canonicalUrl).push(String(tab.id));
+    }
+
+    const sessionGroups = Array.isArray(session?.groups) ? session.groups : [];
+    sessionGroups
+      .filter(group => normalizeString(group?.key).startsWith(MANUAL_GROUP_PREFIX))
+      .forEach((group, index) => {
+        const groupName = normalizeString(group.label) || 'Restored group';
+        const groupId = `restored-${Date.now()}-${index}-${Math.random().toString(36).slice(2, 8)}`;
+        normalizedState.groups.push({
+          id: groupId,
+          name: groupName,
+          createdAt: normalizeString(now) || new Date().toISOString(),
+        });
+
+        for (const url of Array.isArray(group.tabUrls) ? group.tabUrls : []) {
+          const tabIds = restoredByUrl.get(url) || [];
+          const tabId = tabIds.shift();
+          if (tabId) normalizedState.assignments[tabId] = groupId;
+        }
+      });
+
+    return normalizedState;
+  }
+
+  async function getSavedTabSessions() {
+    const stored = await chrome.storage.local.get(SAVED_TAB_SESSIONS_KEY);
+    return normalizeSavedTabSessions(stored[SAVED_TAB_SESSIONS_KEY]);
+  }
+
+  async function saveSavedTabSessions(sessions) {
+    const normalized = normalizeSavedTabSessions(sessions);
+    await chrome.storage.local.set({ [SAVED_TAB_SESSIONS_KEY]: normalized });
+    return normalized;
+  }
+
+  async function addSavedTabSession(session) {
+    const sessions = await getSavedTabSessions();
+    const normalized = normalizeSavedTabSessions([session])[0];
+    if (!normalized) throw new Error('No restorable tabs selected');
+    return saveSavedTabSessions([normalized, ...sessions]);
+  }
+
+  async function deleteSavedTabSession(sessionId) {
+    const targetId = normalizeString(sessionId);
+    const sessions = await getSavedTabSessions();
+    return saveSavedTabSessions(sessions.filter(session => session.id !== targetId));
+  }
+
+  async function renameSavedTabSession(sessionId, nextName) {
+    const targetId = normalizeString(sessionId);
+    const cleanName = normalizeString(nextName);
+    const sessions = await getSavedTabSessions();
+    return saveSavedTabSessions(sessions.map(session => {
+      if (session.id !== targetId) return session;
+      return {
+        ...session,
+        name: cleanName || session.name,
+      };
+    }));
+  }
+
+  async function updateSavedTabSessionTabs(sessionId, nextTabs) {
+    const targetId = normalizeString(sessionId);
+    const normalizedTabs = Array.isArray(nextTabs)
+      ? nextTabs.map(normalizeSessionTab).filter(Boolean)
+      : [];
+    const sessions = await getSavedTabSessions();
+    const nextSessions = [];
+
+    for (const session of sessions) {
+      if (session.id !== targetId) {
+        nextSessions.push(session);
+        continue;
+      }
+
+      if (!normalizedTabs.length) continue;
+
+      nextSessions.push({
+        ...session,
+        tabs: normalizedTabs,
+        groups: buildSessionGroupsFromTabs(normalizedTabs),
+      });
+    }
+
+    return saveSavedTabSessions(nextSessions);
+  }
+
+  async function appendSavedTabSessionTabs(sessionId, tabsToAppend, {
+    skipDuplicateUrls = true,
+  } = {}) {
+    const targetId = normalizeString(sessionId);
+    const normalizedTabs = Array.isArray(tabsToAppend)
+      ? tabsToAppend.map(normalizeSessionTab).filter(Boolean)
+      : [];
+    if (!normalizedTabs.length) throw new Error('No restorable tabs selected');
+
+    const sessions = await getSavedTabSessions();
+    let updatedSession = null;
+    let appendedCount = 0;
+    let skippedDuplicateCount = 0;
+    const nextSessions = sessions.map(session => {
+      if (session.id !== targetId) return session;
+
+      const existingUrls = new Set((session.tabs || []).map(tab => tab.url).filter(Boolean));
+      const nextTabs = [...(session.tabs || [])];
+
+      for (const tab of normalizedTabs) {
+        if (skipDuplicateUrls && existingUrls.has(tab.url)) {
+          skippedDuplicateCount += 1;
+          continue;
+        }
+        nextTabs.push(tab);
+        existingUrls.add(tab.url);
+        appendedCount += 1;
+      }
+
+      updatedSession = {
+        ...session,
+        tabs: nextTabs,
+        groups: buildSessionGroupsFromTabs(nextTabs),
+      };
+      return updatedSession;
+    });
+
+    if (!updatedSession) throw new Error('Session not found');
+
+    const savedSessions = await saveSavedTabSessions(nextSessions);
+    const savedSession = savedSessions.find(session => session.id === targetId) || updatedSession;
+    return {
+      sessions: savedSessions,
+      session: savedSession,
+      appendedCount,
+      skippedDuplicateCount,
+    };
+  }
+
+  const api = {
+    SAVED_TAB_SESSIONS_KEY,
+    buildSessionSnapshot,
+    buildSessionGroupsFromTabs,
+    createSavedTabSessionFromTab,
+    createRestoredSessionGroups,
+    deleteSavedTabSession,
+    getSavedTabSessions,
+    addSavedTabSession,
+    appendSavedTabSessionTabs,
+    renameSavedTabSession,
+    updateSavedTabSessionTabs,
+    normalizeSavedTabSessions,
+    saveSavedTabSessions,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabHarborTabSessions = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/tab-sessions.test.js b/extension/tab-sessions.test.js
new file mode 100644
index 0000000..ccd0f7b
--- /dev/null
+++ b/extension/tab-sessions.test.js
@@ -0,0 +1,348 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  buildSessionSnapshot,
+  createSavedTabSessionFromTab,
+  createRestoredSessionGroups,
+  renameSavedTabSession,
+  appendSavedTabSessionTabs,
+  updateSavedTabSessionTabs,
+  normalizeSavedTabSessions,
+} = require('./tab-sessions.js');
+
+test('buildSessionSnapshot captures selected tabs with canonical urls and manual group metadata', () => {
+  const snapshot = buildSessionSnapshot({
+    tabs: [
+      {
+        id: 11,
+        url: 'extension://noogafoofpebimajpfpamcfhoaifemoa/suspended.html#ttl=Issue%20Thread&uri=https%3A%2F%2Fgithub.com%2FV-IOLE-T%2Ftab-harbor%2Fissues%2F25',
+        title: 'Suspended tab',
+        favIconUrl: 'https://github.com/favicon.ico',
+        windowId: 1,
+      },
+      {
+        id: 12,
+        url: 'chrome://settings',
+        title: 'Settings',
+        windowId: 1,
+      },
+    ],
+    groupLookup: new Map([
+      ['11', { key: '__session_group__:research', label: 'Research', manualGroupId: 'research' }],
+    ]),
+    selectedTabIds: ['11', '12'],
+    source: 'selected',
+    now: '2026-05-22T08:00:00.000Z',
+  });
+
+  assert.equal(snapshot.tabs.length, 1);
+  assert.equal(snapshot.tabs[0].url, 'https://github.com/V-IOLE-T/tab-harbor/issues/25');
+  assert.equal(snapshot.tabs[0].title, 'Issue Thread');
+  assert.deepEqual(snapshot.groups, [
+    { key: '__session_group__:research', label: 'Research', manualGroupId: 'research', tabUrls: ['https://github.com/V-IOLE-T/tab-harbor/issues/25'] },
+  ]);
+});
+
+test('buildSessionSnapshot rejects empty selected tabs', () => {
+  assert.throws(
+    () => buildSessionSnapshot({
+      tabs: [{ id: 1, url: 'chrome://newtab/', title: 'New tab' }],
+      selectedTabIds: ['1'],
+    }),
+    /no restorable tabs/i
+  );
+});
+
+test('normalizeSavedTabSessions drops invalid sessions and tabs', () => {
+  const sessions = normalizeSavedTabSessions([
+    {
+      id: 'session-a',
+      name: 'Morning research',
+      savedAt: '2026-05-22T08:00:00.000Z',
+      tabs: [
+        { url: 'https://example.com/a', title: 'A' },
+        { url: 'chrome://settings', title: 'Settings' },
+      ],
+      groups: [{ key: 'example.com', label: 'Example', tabUrls: ['https://example.com/a', 'chrome://settings'] }],
+    },
+    { id: 'empty', tabs: [] },
+  ]);
+
+  assert.equal(sessions.length, 1);
+  assert.equal(sessions[0].name, 'Morning research');
+  assert.deepEqual(sessions[0].groups[0].tabUrls, ['https://example.com/a']);
+});
+
+test('createRestoredSessionGroups creates manual groups for restored manual session groups', () => {
+  const restored = createRestoredSessionGroups({
+    existingState: { groups: [], assignments: {} },
+    session: {
+      groups: [{ key: '__session_group__:research', label: 'Research', manualGroupId: 'research', tabUrls: ['https://a.test', 'https://b.test'] }],
+    },
+    restoredTabs: [
+      { id: 101, url: 'https://a.test' },
+      { id: 102, url: 'https://b.test' },
+    ],
+    now: '2026-05-22T08:00:00.000Z',
+  });
+
+  assert.equal(restored.groups.length, 1);
+  assert.equal(restored.groups[0].name, 'Research');
+  assert.equal(restored.assignments['101'], restored.groups[0].id);
+  assert.equal(restored.assignments['102'], restored.groups[0].id);
+});
+
+test('renameSavedTabSession updates the matching session name', async () => {
+  const store = {
+    savedTabSessions: [
+      {
+        id: 'session-a',
+        name: 'Before',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://example.com', title: 'Example' }],
+        groups: [],
+      },
+    ],
+  };
+  global.chrome = {
+    storage: {
+      local: {
+        async get(key) {
+          return { [key]: store[key] };
+        },
+        async set(next) {
+          Object.assign(store, next);
+        },
+      },
+    },
+  };
+
+  const renamed = await renameSavedTabSession('session-a', 'After');
+  assert.equal(renamed[0].name, 'After');
+  assert.equal(store.savedTabSessions[0].name, 'After');
+});
+
+test('updateSavedTabSessionTabs reorders tabs and rebuilds groups', async () => {
+  const store = {
+    savedTabSessions: [
+      {
+        id: 'session-a',
+        name: 'Session',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [
+          { url: 'https://a.test', title: 'A', groupKey: 'group-a', groupLabel: 'Group A' },
+          { url: 'https://b.test', title: 'B', groupKey: 'group-b', groupLabel: 'Group B' },
+        ],
+        groups: [
+          { key: 'group-a', label: 'Group A', manualGroupId: '', tabUrls: ['https://a.test'] },
+          { key: 'group-b', label: 'Group B', manualGroupId: '', tabUrls: ['https://b.test'] },
+        ],
+      },
+    ],
+  };
+  global.chrome = {
+    storage: {
+      local: {
+        async get(key) {
+          return { [key]: store[key] };
+        },
+        async set(next) {
+          Object.assign(store, next);
+        },
+      },
+    },
+  };
+
+  const updated = await updateSavedTabSessionTabs('session-a', [
+    { url: 'https://b.test', title: 'B', groupKey: 'group-b', groupLabel: 'Group B' },
+    { url: 'https://a.test', title: 'A', groupKey: 'group-a', groupLabel: 'Group A' },
+  ]);
+  assert.deepEqual(updated[0].tabs.map(tab => tab.url), ['https://b.test', 'https://a.test']);
+  assert.deepEqual(updated[0].groups.map(group => group.key), ['group-b', 'group-a']);
+});
+
+test('updateSavedTabSessionTabs removes the session when no tabs remain', async () => {
+  const store = {
+    savedTabSessions: [
+      {
+        id: 'session-a',
+        name: 'Session',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://a.test', title: 'A' }],
+        groups: [],
+      },
+    ],
+  };
+  global.chrome = {
+    storage: {
+      local: {
+        async get(key) {
+          return { [key]: store[key] };
+        },
+        async set(next) {
+          Object.assign(store, next);
+        },
+      },
+    },
+  };
+
+  const updated = await updateSavedTabSessionTabs('session-a', []);
+  assert.equal(updated.length, 0);
+});
+
+test('appendSavedTabSessionTabs appends new tabs, skips duplicate urls, and rebuilds groups', async () => {
+  const store = {
+    savedTabSessions: [
+      {
+        id: 'session-a',
+        name: 'Session',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [
+          { url: 'https://a.test', title: 'A', groupKey: 'group-a', groupLabel: 'Group A' },
+        ],
+        groups: [
+          { key: 'group-a', label: 'Group A', manualGroupId: '', tabUrls: ['https://a.test'] },
+        ],
+      },
+    ],
+  };
+  global.chrome = {
+    storage: {
+      local: {
+        async get(key) {
+          return { [key]: store[key] };
+        },
+        async set(next) {
+          Object.assign(store, next);
+        },
+      },
+    },
+  };
+
+  const result = await appendSavedTabSessionTabs('session-a', [
+    {
+      url: 'extension://noogafoofpebimajpfpamcfhoaifemoa/suspended.html#ttl=Duplicate%20A&uri=https%3A%2F%2Fa.test',
+      title: 'Duplicate A',
+      groupKey: 'group-a',
+      groupLabel: 'Group A',
+    },
+    { url: 'https://b.test', title: 'B', groupKey: 'group-b', groupLabel: 'Group B' },
+  ]);
+
+  assert.equal(result.appendedCount, 1);
+  assert.equal(result.skippedDuplicateCount, 1);
+  assert.deepEqual(result.session.tabs.map(tab => tab.url), ['https://a.test', 'https://b.test']);
+  assert.deepEqual(result.session.groups.map(group => group.key), ['group-a', 'group-b']);
+  assert.equal(result.session.id, 'session-a');
+  assert.equal(result.session.name, 'Session');
+  assert.equal(result.session.savedAt, '2026-05-22T08:00:00.000Z');
+  assert.equal(result.session.source, 'manual');
+});
+
+test('appendSavedTabSessionTabs rejects missing target sessions and invalid tabs', async () => {
+  const store = {
+    savedTabSessions: [
+      {
+        id: 'session-a',
+        name: 'Session',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://a.test', title: 'A' }],
+        groups: [],
+      },
+    ],
+  };
+  global.chrome = {
+    storage: {
+      local: {
+        async get(key) {
+          return { [key]: store[key] };
+        },
+        async set(next) {
+          Object.assign(store, next);
+        },
+      },
+    },
+  };
+
+  await assert.rejects(
+    () => appendSavedTabSessionTabs('missing', [{ url: 'https://b.test', title: 'B' }]),
+    /session not found/i
+  );
+  await assert.rejects(
+    () => appendSavedTabSessionTabs('session-a', [{ url: 'chrome://settings', title: 'Settings' }]),
+    /no restorable tabs selected/i
+  );
+});
+
+test('createSavedTabSessionFromTab derives name, source, savedAt, tabs, and groups from one dragged tab', () => {
+  const created = createSavedTabSessionFromTab({
+    sourceSession: {
+      id: 'session-a',
+      name: 'Original',
+      source: 'window',
+    },
+    tab: {
+      url: 'https://github.com/openai/openai-node/issues/123',
+      title: 'SDK issue - GitHub',
+      favIconUrl: 'https://github.com/favicon.ico',
+      groupKey: '__session_group__:bugs',
+      groupLabel: 'Bugs',
+      manualGroupId: 'bugs',
+    },
+    existingSessions: [],
+    now: '2026-05-22T09:30:00.000Z',
+  });
+
+  assert.equal(created.name, 'SDK issue');
+  assert.equal(created.source, 'window');
+  assert.equal(created.savedAt, '2026-05-22T09:30:00.000Z');
+  assert.equal(created.tabs.length, 1);
+  assert.deepEqual(created.groups, [
+    {
+      key: '__session_group__:bugs',
+      label: 'Bugs',
+      manualGroupId: 'bugs',
+      tabUrls: ['https://github.com/openai/openai-node/issues/123'],
+    },
+  ]);
+});
+
+test('createSavedTabSessionFromTab falls back to friendly domain and de-duplicates duplicate session names', () => {
+  const created = createSavedTabSessionFromTab({
+    sourceSession: {
+      id: 'session-a',
+      name: 'Original',
+      source: '',
+    },
+    tab: {
+      url: 'https://docs.github.com/en/actions',
+      title: '',
+      favIconUrl: '',
+      groupKey: '',
+      groupLabel: '',
+      manualGroupId: '',
+    },
+    existingSessions: [
+      {
+        id: 'session-b',
+        name: 'Docs',
+        savedAt: '2026-05-22T08:00:00.000Z',
+        source: 'manual',
+        tabs: [{ url: 'https://example.com', title: 'Example' }],
+        groups: [],
+      },
+    ],
+    now: '2026-05-22T09:30:00.000Z',
+  });
+
+  assert.equal(created.name, 'Docs 2');
+  assert.equal(created.source, 'manual');
+});
diff --git a/extension/tab-url-utils.js b/extension/tab-url-utils.js
new file mode 100644
index 0000000..f036007
--- /dev/null
+++ b/extension/tab-url-utils.js
@@ -0,0 +1,93 @@
+'use strict';
+
+(function attachTabHarborTabUrlUtils(globalScope) {
+  const RESTORABLE_PROTOCOLS = new Set(['http:', 'https:', 'file:']);
+  const INTERNAL_PROTOCOLS = new Set([
+    'about:',
+    'brave:',
+    'chrome:',
+    'chrome-extension:',
+    'edge:',
+    'extension:',
+  ]);
+
+  function safeDecode(value = '') {
+    try {
+      return decodeURIComponent(String(value || ''));
+    } catch {
+      return String(value || '');
+    }
+  }
+
+  function parseSuspendedTabUrl(url = '') {
+    const raw = String(url || '').trim();
+    const emptyResult = {
+      isSuspended: false,
+      originalUrl: '',
+      title: '',
+    };
+    if (!raw) return emptyResult;
+
+    let parsed;
+    try {
+      parsed = new URL(raw);
+    } catch {
+      return emptyResult;
+    }
+
+    const protocol = parsed.protocol.toLowerCase();
+    const pathname = parsed.pathname || '';
+    if (protocol !== 'extension:' && protocol !== 'chrome-extension:') {
+      return emptyResult;
+    }
+
+    if (!pathname.endsWith('/suspended.html') && pathname !== '/suspended.html') {
+      return emptyResult;
+    }
+
+    const hash = raw.includes('#') ? raw.slice(raw.indexOf('#') + 1) : '';
+    const params = new URLSearchParams(hash);
+    const originalUrl = safeDecode(params.get('uri') || '').trim();
+    const title = safeDecode(params.get('ttl') || '').trim();
+
+    return {
+      isSuspended: true,
+      originalUrl,
+      title,
+    };
+  }
+
+  function getCanonicalTabUrl(url = '') {
+    const raw = String(url || '').trim();
+    if (!raw) return '';
+    const suspended = parseSuspendedTabUrl(raw);
+    if (suspended.isSuspended && suspended.originalUrl) return suspended.originalUrl;
+    return raw;
+  }
+
+  function isRestorableTabUrl(url = '') {
+    const canonicalUrl = getCanonicalTabUrl(url);
+    if (!canonicalUrl) return false;
+
+    try {
+      const parsed = new URL(canonicalUrl);
+      if (RESTORABLE_PROTOCOLS.has(parsed.protocol)) return true;
+      if (INTERNAL_PROTOCOLS.has(parsed.protocol)) return false;
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  const api = {
+    getCanonicalTabUrl,
+    isRestorableTabUrl,
+    parseSuspendedTabUrl,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabHarborTabUrlUtils = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/tab-url-utils.test.js b/extension/tab-url-utils.test.js
new file mode 100644
index 0000000..c006f3d
--- /dev/null
+++ b/extension/tab-url-utils.test.js
@@ -0,0 +1,56 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  getCanonicalTabUrl,
+  isRestorableTabUrl,
+  parseSuspendedTabUrl,
+} = require('./tab-url-utils.js');
+
+test('parseSuspendedTabUrl extracts original uri and title from Marvellous Suspender URLs', () => {
+  const suspendedUrl = 'extension://noogafoofpebimajpfpamcfhoaifemoa/suspended.html#ttl=V-IOLE-T%2Ftab-harbor&pos=0&uri=https%3A%2F%2Fgithub.com%2FV-IOLE-T%2Ftab-harbor';
+
+  const parsed = parseSuspendedTabUrl(suspendedUrl);
+
+  assert.equal(parsed.isSuspended, true);
+  assert.equal(parsed.originalUrl, 'https://github.com/V-IOLE-T/tab-harbor');
+  assert.equal(parsed.title, 'V-IOLE-T/tab-harbor');
+});
+
+test('getCanonicalTabUrl leaves ordinary urls alone and unwraps suspended urls', () => {
+  assert.equal(
+    getCanonicalTabUrl('https://example.com/docs'),
+    'https://example.com/docs'
+  );
+  assert.equal(
+    getCanonicalTabUrl('extension://noogafoofpebimajpfpamcfhoaifemoa/suspended.html#ttl=Docs&uri=https%3A%2F%2Fexample.com%2Fdocs'),
+    'https://example.com/docs'
+  );
+});
+
+test('isRestorableTabUrl rejects browser internals and unsafe protocols', () => {
+  assert.equal(isRestorableTabUrl('https://example.com'), true);
+  assert.equal(isRestorableTabUrl('http://example.com'), true);
+  assert.equal(isRestorableTabUrl('file:///Users/test/report.pdf'), true);
+  assert.equal(isRestorableTabUrl('chrome://settings'), false);
+  assert.equal(isRestorableTabUrl('about:blank'), false);
+  assert.equal(isRestorableTabUrl('javascript:alert(1)'), false);
+});
+
+test('parseSuspendedTabUrl tolerates malformed suspended hashes', () => {
+  const parsed = parseSuspendedTabUrl('extension://noogafoofpebimajpfpamcfhoaifemoa/suspended.html#ttl=OnlyTitle');
+
+  assert.equal(parsed.isSuspended, true);
+  assert.equal(parsed.originalUrl, '');
+  assert.equal(parsed.title, 'OnlyTitle');
+});
+
+test('parseSuspendedTabUrl only unwraps extension suspended pages', () => {
+  const ordinaryPage = 'https://example.com/suspended.html#ttl=Docs&uri=https%3A%2F%2Fother.test';
+  const parsed = parseSuspendedTabUrl(ordinaryPage);
+
+  assert.equal(parsed.isSuspended, false);
+  assert.equal(getCanonicalTabUrl(ordinaryPage), ordinaryPage);
+});
diff --git a/extension/theme-controls.js b/extension/theme-controls.js
new file mode 100644
index 0000000..d4e4fe0
--- /dev/null
+++ b/extension/theme-controls.js
@@ -0,0 +1,2170 @@
+'use strict';
+
+const {
+  t: themeT,
+} = globalThis.TabHarborI18n || {};
+
+const {
+  escapeHtml: themeEscapeHtml,
+  escapeHtmlAttribute: themeEscapeHtmlAttribute,
+  getFallbackLabel: themeGetFallbackLabel,
+  getIconSources: themeGetIconSources,
+} = globalThis.TabOutIconUtils || {};
+
+const {
+  compressImageFileForStorage: themeCompressImageFileForStorage,
+} = globalThis.TabOutBackgroundImage || {};
+
+const {
+  reorderSubsetByIds: themeReorderSubsetByIds,
+} = globalThis.TabOutListOrder || {};
+
+let themeMenuOpen = false;
+let themeMenuActiveTab = 'appearance';
+let shortcutEditorState = {
+  open: false,
+  mode: 'create',
+  shortcutId: '',
+  url: '',
+  label: '',
+  icon: '',
+  iconKind: '',
+  presentation: 'default',
+  returnToTabPicker: false,
+  focusReturnEl: null,
+};
+let quickShortcutDragState = null;
+let quickShortcutDraggedId = '';
+let quickShortcutDraggedEl = null;
+let quickShortcutGhostEl = null;
+let quickShortcutSlotEl = null;
+let quickShortcutSuppressClickUntil = 0;
+
+// ---- Tab Picker state ----
+let tabPickerOpen = false;
+let tabPickerMode = 'tabs';
+let tabPickerSearchQuery = '';
+let tabPickerSelectedIds = new Set();
+let tabPickerFocusReturnEl = null;
+let tabPickerManualDraft = { url: '', label: '' };
+const THEME_PREFERENCES_KEY = 'themePreferences';
+const QUICK_SHORTCUTS_KEY = 'quickShortcuts';
+const FOCUSABLE_SELECTOR = [
+  'button:not([disabled]):not([hidden])',
+  '[href]:not([hidden])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+const THEME_MODE_ORDER = ['system', 'light', 'dark'];
+const THEME_PALETTE_ORDER = ['paper', 'sage', 'mist', 'blush'];
+const SAVED_SESSION_RESTORE_MODE_ORDER = ['current-window', 'new-window'];
+const SAVED_SESSION_NAV_DISPLAY_MODE_ORDER = ['icon', 'name'];
+const VALID_THEME_MODES = new Set(THEME_MODE_ORDER);
+const VALID_THEME_PALETTES = new Set(THEME_PALETTE_ORDER);
+const VALID_SAVED_SESSION_RESTORE_MODES = new Set(SAVED_SESSION_RESTORE_MODE_ORDER);
+const VALID_SAVED_SESSION_NAV_DISPLAY_MODES = new Set(SAVED_SESSION_NAV_DISPLAY_MODE_ORDER);
+const THEME_MODE_LABEL_KEYS = {
+  system: 'themeModeSystem',
+  light: 'themeModeLight',
+  dark: 'themeModeDark',
+};
+const LEGACY_THEME_MIGRATION = {
+  paper: { mode: 'light', paletteId: 'paper' },
+  sage: { mode: 'light', paletteId: 'sage' },
+  mist: { mode: 'light', paletteId: 'mist' },
+  blush: { mode: 'light', paletteId: 'blush' },
+  midnight: { mode: 'dark', paletteId: 'mist' },
+};
+const THEME_FAMILIES = {
+  paper: {
+    name: 'Paper',
+    meta: 'Warm neutral',
+    light: {
+      '--ink': '#1a1613',
+      '--paper': '#f8f5f0',
+      '--warm-gray': '#e8e2da',
+      '--muted': '#9a918a',
+      '--accent-amber': '#c8713a',
+      '--accent-sage': '#5a7a62',
+      '--accent-slate': '#5a6b7a',
+      '--accent-rose': '#b35a5a',
+      '--workspace-accent': '#8a653f',
+      '--workspace-accent-soft': '#f2e7db',
+      '--workspace-accent-border': '#d4b396',
+      '--workspace-accent-contrast': '#fffaf5',
+      '--status-active': '#3d7a4a',
+      '--status-cooling': '#b8892e',
+      '--status-abandoned': '#b35a5a',
+      '--card-bg': '#fffdf9',
+    },
+    dark: {
+      '--ink': '#e8e2da',
+      '--paper': '#1a1613',
+      '--warm-gray': '#2d2722',
+      '--muted': '#7a726a',
+      '--accent-amber': '#d4854a',
+      '--accent-sage': '#6a8a72',
+      '--accent-slate': '#6a7b8a',
+      '--accent-rose': '#b37a7a',
+      '--workspace-accent': '#a0754f',
+      '--workspace-accent-soft': '#2d2722',
+      '--workspace-accent-border': '#5a4a3a',
+      '--workspace-accent-contrast': '#f8f5f0',
+      '--status-active': '#5a9a6a',
+      '--status-cooling': '#c89a3a',
+      '--status-abandoned': '#c36a6a',
+      '--card-bg': '#231f1a',
+    },
+  },
+  sage: {
+    name: 'Sage',
+    meta: 'Soft green',
+    light: {
+      '--ink': '#172018',
+      '--paper': '#eef2eb',
+      '--warm-gray': '#dbe3d7',
+      '--muted': '#7f8c81',
+      '--accent-amber': '#8b7146',
+      '--accent-sage': '#4d6f57',
+      '--accent-slate': '#5e7072',
+      '--accent-rose': '#9a6860',
+      '--workspace-accent': '#4f7657',
+      '--workspace-accent-soft': '#deebe1',
+      '--workspace-accent-border': '#9ebda6',
+      '--workspace-accent-contrast': '#f6fbf7',
+      '--status-active': '#446953',
+      '--status-cooling': '#907548',
+      '--status-abandoned': '#996760',
+      '--card-bg': '#fafcf8',
+    },
+    dark: {
+      '--ink': '#d8e3d7',
+      '--paper': '#172018',
+      '--warm-gray': '#252d25',
+      '--muted': '#6a7a6a',
+      '--accent-amber': '#9a8a5a',
+      '--accent-sage': '#6a9a7a',
+      '--accent-slate': '#6a7a8a',
+      '--accent-rose': '#9a7a7a',
+      '--workspace-accent': '#5a8a6a',
+      '--workspace-accent-soft': '#252d25',
+      '--workspace-accent-border': '#3a4a3a',
+      '--workspace-accent-contrast': '#eef2eb',
+      '--status-active': '#5a9a7a',
+      '--status-cooling': '#b89a4a',
+      '--status-abandoned': '#c36a6a',
+      '--card-bg': '#1e261e',
+    },
+  },
+  mist: {
+    name: 'Mist',
+    meta: 'Cool neutral',
+    light: {
+      '--ink': '#161c21',
+      '--paper': '#eef2f5',
+      '--warm-gray': '#d8dee5',
+      '--muted': '#7d8791',
+      '--accent-amber': '#927255',
+      '--accent-sage': '#5d7569',
+      '--accent-slate': '#4f687a',
+      '--accent-rose': '#9b6b71',
+      '--workspace-accent': '#4f6d88',
+      '--workspace-accent-soft': '#dde7f0',
+      '--workspace-accent-border': '#9fb2c5',
+      '--workspace-accent-contrast': '#f7fafc',
+      '--status-active': '#4e6c61',
+      '--status-cooling': '#94724a',
+      '--status-abandoned': '#93636c',
+      '--card-bg': '#fafcfd',
+    },
+    dark: {
+      '--ink': '#d8dee5',
+      '--paper': '#161c21',
+      '--warm-gray': '#252d35',
+      '--muted': '#5d6771',
+      '--accent-amber': '#a08a6a',
+      '--accent-sage': '#6a8a7a',
+      '--accent-slate': '#6a8a9a',
+      '--accent-rose': '#9a7a7a',
+      '--workspace-accent': '#6a8a9a',
+      '--workspace-accent-soft': '#252d35',
+      '--workspace-accent-border': '#3a4a5a',
+      '--workspace-accent-contrast': '#f8f5f0',
+      '--status-active': '#5a9a7a',
+      '--status-cooling': '#c8a83a',
+      '--status-abandoned': '#c36a6a',
+      '--card-bg': '#1c232b',
+    },
+  },
+  blush: {
+    name: 'Blush',
+    meta: 'Soft clay',
+    light: {
+      '--ink': '#201716',
+      '--paper': '#f6efec',
+      '--warm-gray': '#e5d8d2',
+      '--muted': '#97827c',
+      '--accent-amber': '#a06d4f',
+      '--accent-sage': '#6a7866',
+      '--accent-slate': '#64707a',
+      '--accent-rose': '#ad6966',
+      '--workspace-accent': '#a5656f',
+      '--workspace-accent-soft': '#f2dfe1',
+      '--workspace-accent-border': '#d2a1a7',
+      '--workspace-accent-contrast': '#fff7f8',
+      '--status-active': '#5a7162',
+      '--status-cooling': '#9c7448',
+      '--status-abandoned': '#a96262',
+      '--card-bg': '#fffaf7',
+    },
+    dark: {
+      '--ink': '#e8e2da',
+      '--paper': '#201716',
+      '--warm-gray': '#332a2a',
+      '--muted': '#8a7a7a',
+      '--accent-amber': '#a06d4f',
+      '--accent-sage': '#6a7a6a',
+      '--accent-slate': '#6a7a8a',
+      '--accent-rose': '#c37a7a',
+      '--workspace-accent': '#a5656f',
+      '--workspace-accent-soft': '#332a2a',
+      '--workspace-accent-border': '#5a4a4a',
+      '--workspace-accent-contrast': '#f6efec',
+      '--status-active': '#5a9a7a',
+      '--status-cooling': '#b89a4a',
+      '--status-abandoned': '#c36a6a',
+      '--card-bg': '#281f1f',
+    },
+  },
+};
+
+let themePreferences = {
+  mode: 'system',
+  paletteId: 'paper',
+  customBackground: '',
+  surfaceOpacity: 14,
+  uiScale: 100,
+  shortcutScale: 100,
+  hitokotoEnabled: true,
+  sleepControlEnabled: false,
+  closeDuplicateNewTabsEnabled: false,
+  savedSessionRestoreMode: 'new-window',
+  savedSessionNavDisplayMode: 'name',
+};
+
+let systemThemeMediaQuery = null;
+let systemThemeListener = null;
+
+function normalizeThemePreferences(input) {
+  const next = input && typeof input === 'object' ? input : {};
+  const legacyThemeId = String(next.themeId || '');
+  const migrated = LEGACY_THEME_MIGRATION[legacyThemeId] || null;
+  const rawMode = String(next.mode || migrated?.mode || 'system');
+  const rawPaletteId = String(next.paletteId || migrated?.paletteId || 'paper');
+  const rawOpacity = Number(next.surfaceOpacity);
+  const surfaceOpacity = Number.isFinite(rawOpacity)
+    ? Math.min(60, Math.max(2, Math.round(rawOpacity)))
+    : 14;
+  const rawUiScale = Number(next.uiScale);
+  const uiScale = Number.isFinite(rawUiScale)
+    ? Math.min(120, Math.max(100, Math.round(rawUiScale)))
+    : 100;
+  const rawShortcutScale = Number(next.shortcutScale);
+  const shortcutScale = Number.isFinite(rawShortcutScale)
+    ? Math.min(130, Math.max(100, Math.round(rawShortcutScale)))
+    : 100;
+  const rawSavedSessionRestoreMode = String(next.savedSessionRestoreMode || 'new-window');
+  const rawSavedSessionNavDisplayMode = String(next.savedSessionNavDisplayMode || 'name');
+  return {
+    mode: VALID_THEME_MODES.has(rawMode) ? rawMode : 'system',
+    paletteId: VALID_THEME_PALETTES.has(rawPaletteId) ? rawPaletteId : 'paper',
+    customBackground: typeof next.customBackground === 'string' ? next.customBackground : '',
+    surfaceOpacity,
+    uiScale,
+    shortcutScale,
+    hitokotoEnabled: next.hitokotoEnabled !== false,
+    sleepControlEnabled: next.sleepControlEnabled === true,
+    closeDuplicateNewTabsEnabled: next.closeDuplicateNewTabsEnabled === true,
+    savedSessionRestoreMode: VALID_SAVED_SESSION_RESTORE_MODES.has(rawSavedSessionRestoreMode) ? rawSavedSessionRestoreMode : 'new-window',
+    savedSessionNavDisplayMode: VALID_SAVED_SESSION_NAV_DISPLAY_MODES.has(rawSavedSessionNavDisplayMode) ? rawSavedSessionNavDisplayMode : 'name',
+  };
+}
+
+function getSavedSessionRestoreMode(preferences = themePreferences) {
+  return normalizeThemePreferences(preferences).savedSessionRestoreMode;
+}
+
+function getSavedSessionNavDisplayMode(preferences = themePreferences) {
+  return normalizeThemePreferences(preferences).savedSessionNavDisplayMode;
+}
+
+function normalizeQuickShortcuts(input) {
+  if (!Array.isArray(input)) return [];
+  return input
+    .filter(item => item && item.url)
+    .map(item => {
+      const normalizedIcon = normalizeShortcutIcon(item.icon || item.customIcon || '');
+      return {
+        id: String(item.id || `shortcut-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`),
+        url: String(item.url).trim(),
+        label: String(item.label || '').trim(),
+        icon: normalizedIcon.value,
+        iconKind: normalizedIcon.kind,
+      };
+    })
+    .filter(item => item.url);
+}
+
+function isSvgMarkup(value) {
+  const text = String(value || '').trim();
+  return /^<svg[\s>]/i.test(text) || /^<\?xml[\s\S]*<svg[\s>]/i.test(text);
+}
+
+function svgToDataUrl(svgText) {
+  const normalized = String(svgText || '').trim();
+  if (!normalized) return '';
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(normalized)}`;
+}
+
+function extractIconFromClipboardHtml(html) {
+  const raw = String(html || '').trim();
+  if (!raw) return { value: '', kind: '' };
+
+  if (isSvgMarkup(raw)) {
+    return { value: raw, kind: 'svg' };
+  }
+
+  const imageMatch = raw.match(/<img[^>]+src=["']([^"']+)["']/i);
+  if (imageMatch?.[1]) {
+    const src = imageMatch[1].trim();
+    if (/^data:image\//i.test(src)) {
+      return { value: src, kind: 'image' };
+    }
+  }
+
+  const svgMatch = raw.match(/<svg[\s\S]*<\/svg>/i);
+  if (svgMatch?.[0]) {
+    return { value: svgMatch[0], kind: 'svg' };
+  }
+
+  return { value: '', kind: '' };
+}
+
+function isTransientClipboardReference(value) {
+  const text = String(value || '').trim();
+  if (!text) return false;
+  return (
+    /^file:\/\//i.test(text) ||
+    /^blob:/i.test(text) ||
+    /^\/(private|var|tmp|Users)\//.test(text) ||
+    /^[A-Za-z]:\\/.test(text)
+  );
+}
+
+function getSystemThemeMode() {
+  return Boolean(window.matchMedia?.('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+}
+
+function getResolvedTone(preferences = themePreferences) {
+  const normalized = normalizeThemePreferences(preferences);
+  if (normalized.mode === 'system') {
+    return getSystemThemeMode();
+  }
+  return normalized.mode;
+}
+
+function getThemeFamilyDefinition(paletteId) {
+  return THEME_FAMILIES[paletteId] || THEME_FAMILIES.paper;
+}
+
+function getResolvedThemeDefinition(preferences = themePreferences) {
+  const normalized = normalizeThemePreferences(preferences);
+  const resolvedTone = getResolvedTone(normalized);
+  const family = getThemeFamilyDefinition(normalized.paletteId);
+  return {
+    id: normalized.paletteId,
+    name: family.name,
+    meta: family.meta,
+    tone: resolvedTone,
+    vars: family[resolvedTone],
+  };
+}
+
+function getPalettePreviewStyle(paletteId) {
+  const family = getThemeFamilyDefinition(paletteId);
+  return `--theme-paper:${family.light['--paper']};--theme-accent:${family.light['--accent-amber']};`;
+}
+
+function syncSystemThemeSubscription() {
+  if (systemThemeMediaQuery && systemThemeListener) {
+    if (typeof systemThemeMediaQuery.removeEventListener === 'function') {
+      systemThemeMediaQuery.removeEventListener('change', systemThemeListener);
+    } else if (typeof systemThemeMediaQuery.removeListener === 'function') {
+      systemThemeMediaQuery.removeListener(systemThemeListener);
+    }
+  }
+
+  systemThemeMediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)') || null;
+  systemThemeListener = null;
+  if (!systemThemeMediaQuery) return;
+
+  systemThemeListener = () => {
+    if (themePreferences.mode !== 'system') return;
+    applyThemePreferences();
+    renderThemeMenu();
+  };
+
+  if (typeof systemThemeMediaQuery.addEventListener === 'function') {
+    systemThemeMediaQuery.addEventListener('change', systemThemeListener);
+  } else if (typeof systemThemeMediaQuery.addListener === 'function') {
+    systemThemeMediaQuery.addListener(systemThemeListener);
+  }
+}
+
+function prefersReducedMotion() {
+  return Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches);
+}
+
+function focusFirstElement(container) {
+  if (!container) return null;
+  const target = container.querySelector(FOCUSABLE_SELECTOR);
+  target?.focus?.({ preventScroll: true });
+  return target || null;
+}
+
+function setThemeMenuOpen(nextOpen, { restoreFocus = false } = {}) {
+  themeMenuOpen = Boolean(nextOpen);
+  renderThemeMenu();
+
+  if (themeMenuOpen) {
+    const panel = document.getElementById('themeMenuPanel');
+    requestAnimationFrame(() => {
+      focusFirstElement(panel);
+    });
+    return;
+  }
+
+  if (restoreFocus) {
+    document.getElementById('themeMenuTrigger')?.focus?.({ preventScroll: true });
+  }
+}
+
+function hexToRgbChannels(hex) {
+  const value = String(hex || '').replace('#', '');
+  if (value.length !== 6) return '248 245 240';
+
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `${r} ${g} ${b}`;
+}
+
+function computeThemeOpacityVars(surfaceOpacity) {
+  return {
+    '--custom-surface-opacity': `${surfaceOpacity}%`,
+    '--custom-border-opacity': `${Math.max(8, surfaceOpacity)}%`,
+    '--custom-badge-opacity': `${Math.max(3, Math.round(surfaceOpacity * 0.28))}%`,
+    '--custom-fallback-opacity': `${Math.max(4, Math.round(surfaceOpacity * 0.36))}%`,
+  };
+}
+
+function computeThemeSizeVars({ uiScale = 100, shortcutScale = 100 } = {}) {
+  const normalizedUiScale = Math.min(120, Math.max(100, Math.round(Number(uiScale) || 100)));
+  const normalizedShortcutScale = Math.min(130, Math.max(100, Math.round(Number(shortcutScale) || 100)));
+  const shortcutRatio = normalizedShortcutScale / 100;
+  const scaledFont = basePx => `${Math.round(basePx * normalizedUiScale) / 100}px`;
+
+  return {
+    '--ui-scale': String(normalizedUiScale / 100),
+    '--shortcut-scale': String(shortcutRatio),
+    '--ui-font-8': scaledFont(8),
+    '--ui-font-9': scaledFont(9),
+    '--ui-font-10': scaledFont(10),
+    '--ui-font-11': scaledFont(11),
+    '--ui-font-12': scaledFont(12),
+    '--ui-font-13': scaledFont(13),
+    '--ui-font-14': scaledFont(14),
+    '--ui-font-15': scaledFont(15),
+    '--ui-font-16': scaledFont(16),
+    '--ui-font-17': scaledFont(17),
+    '--ui-font-18': scaledFont(18),
+    '--ui-font-20': scaledFont(20),
+    '--ui-font-22': scaledFont(22),
+    '--ui-font-24': scaledFont(24),
+    '--ui-font-28': scaledFont(28),
+    '--ui-font-40': scaledFont(40),
+    '--quick-shortcut-card-size': `${Math.round(76 * shortcutRatio)}px`,
+    '--quick-shortcut-shell-size': `${Math.round(40 * shortcutRatio)}px`,
+    '--quick-shortcut-icon-wrap-size': `${Math.round(40 * shortcutRatio)}px`,
+    '--quick-shortcut-icon-size': `${Math.round(22 * shortcutRatio)}px`,
+    '--quick-shortcut-label-size': `${Math.round(11 * shortcutRatio)}px`,
+  };
+}
+
+function applyThemePreferences() {
+  const root = document.documentElement;
+  const body = document.body;
+  const theme = getResolvedThemeDefinition(themePreferences);
+  const opacityVars = computeThemeOpacityVars(themePreferences.surfaceOpacity);
+  const sizeVars = computeThemeSizeVars(themePreferences);
+
+  Object.entries(theme.vars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  Object.entries(opacityVars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  Object.entries(sizeVars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  if (body) {
+    body.classList.toggle('theme-tone-light', theme.tone === 'light');
+    body.classList.toggle('theme-tone-dark', theme.tone === 'dark');
+  }
+
+  if (themePreferences.customBackground) {
+    root.style.setProperty('--page-custom-background', `url("${themePreferences.customBackground}")`);
+    if (body) {
+      const paperRgb = hexToRgbChannels(theme.vars['--paper']);
+      body.style.backgroundImage = `linear-gradient(rgba(${paperRgb} / 0.26), rgba(${paperRgb} / 0.26)), url("${themePreferences.customBackground}")`;
+      body.classList.add('has-custom-background');
+    }
+  } else {
+    root.style.setProperty('--page-custom-background', 'none');
+    if (body) {
+      body.style.removeProperty('background-image');
+      body.classList.remove('has-custom-background');
+    }
+  }
+}
+
+function renderThemeMenu() {
+  const trigger = document.getElementById('themeMenuTrigger');
+  const modeOptions = document.getElementById('themeModeOptions');
+  const panel = document.getElementById('themeMenuPanel');
+  const options = document.getElementById('themeOptions');
+  const transparencyRange = document.getElementById('themeTransparencyRange');
+  const transparencyValue = document.getElementById('themeTransparencyValue');
+  const uiScaleRange = document.getElementById('themeUiScaleRange');
+  const uiScaleValue = document.getElementById('themeUiScaleValue');
+  const shortcutScaleRange = document.getElementById('themeShortcutScaleRange');
+  const shortcutScaleValue = document.getElementById('themeShortcutScaleValue');
+  if (
+    !trigger ||
+    !panel ||
+    !modeOptions ||
+    !options ||
+    !transparencyRange ||
+    !transparencyValue ||
+    !uiScaleRange ||
+    !uiScaleValue ||
+    !shortcutScaleRange ||
+    !shortcutScaleValue
+  ) return;
+
+  trigger.setAttribute('aria-expanded', String(themeMenuOpen));
+  panel.hidden = !themeMenuOpen;
+  const activeThemeMenuTab = themeMenuActiveTab === 'features' ? 'features' : 'appearance';
+  transparencyRange.value = String(themePreferences.surfaceOpacity);
+  transparencyValue.textContent = `${themePreferences.surfaceOpacity}%`;
+  uiScaleRange.value = String(themePreferences.uiScale);
+  uiScaleValue.textContent = `${themePreferences.uiScale}%`;
+  shortcutScaleRange.value = String(themePreferences.shortcutScale);
+  shortcutScaleValue.textContent = `${themePreferences.shortcutScale}%`;
+
+  modeOptions.innerHTML = THEME_MODE_ORDER.map(id => `
+    <button
+      class="theme-mode-option ${themePreferences.mode === id ? 'is-active' : ''}"
+      type="button"
+      data-action="select-theme-mode"
+      data-theme-mode="${id}"
+      aria-pressed="${themePreferences.mode === id}"
+    >${themeT ? themeT(THEME_MODE_LABEL_KEYS[id]) : id}</button>
+  `).join('');
+
+  options.innerHTML = THEME_PALETTE_ORDER.map(id => {
+    const family = getThemeFamilyDefinition(id);
+    return `
+    <button
+      class="theme-option ${themePreferences.paletteId === id ? 'is-active' : ''}"
+      type="button"
+      data-action="select-theme"
+      data-palette-id="${id}"
+      aria-pressed="${themePreferences.paletteId === id}"
+      style="${getPalettePreviewStyle(id)}"
+    >
+      <span class="theme-option-main">
+        <span class="theme-option-swatch" aria-hidden="true"></span>
+        <span>
+          <span class="theme-option-name">${themeEscapeHtml ? themeEscapeHtml(family.name) : family.name}</span>
+        </span>
+      </span>
+      <span class="theme-option-check" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m5 13 4 4L19 7" /></svg>
+      </span>
+    </button>
+  `;
+  }).join('');
+
+  panel.querySelectorAll('[data-theme-menu-panel]').forEach(item => {
+    const isActive = item.dataset.themeMenuPanel === activeThemeMenuTab;
+    item.hidden = !isActive;
+  });
+  panel.querySelectorAll('[data-theme-menu-tab]').forEach(item => {
+    const isActive = item.dataset.themeMenuTab === activeThemeMenuTab;
+    item.classList.toggle('is-active', isActive);
+    item.setAttribute('aria-selected', String(isActive));
+  });
+}
+
+async function getQuickShortcuts() {
+  const stored = await chrome.storage.local.get(QUICK_SHORTCUTS_KEY);
+  return normalizeQuickShortcuts(stored[QUICK_SHORTCUTS_KEY]);
+}
+
+async function saveQuickShortcuts(shortcuts) {
+  const normalized = normalizeQuickShortcuts(shortcuts);
+  await chrome.storage.local.set({ [QUICK_SHORTCUTS_KEY]: normalized });
+  return normalized;
+}
+
+async function removeQuickShortcutById(shortcutId) {
+  if (!shortcutId) return await getQuickShortcuts();
+  const shortcuts = await getQuickShortcuts();
+  return await saveQuickShortcuts(shortcuts.filter(item => item.id !== shortcutId));
+}
+
+async function saveQuickShortcutOrder(orderIds) {
+  const shortcuts = await getQuickShortcuts();
+  if (!Array.isArray(orderIds) || !orderIds.length || !themeReorderSubsetByIds) {
+    return shortcuts;
+  }
+  return await saveQuickShortcuts(themeReorderSubsetByIds(shortcuts, orderIds));
+}
+
+function normalizeShortcutUrl(input) {
+  const raw = String(input || '').trim();
+  if (!raw) return '';
+
+  const withProtocol = /^[a-z]+:\/\//i.test(raw) ? raw : `https://${raw}`;
+  try {
+    return new URL(withProtocol).toString();
+  } catch {
+    return '';
+  }
+}
+
+function normalizeShortcutIcon(input) {
+  const raw = String(input || '').trim();
+  if (!raw) return { value: '', kind: '' };
+
+  if (isSvgMarkup(raw)) {
+    return { value: raw, kind: 'svg' };
+  }
+
+  if (/^data:image\//i.test(raw)) {
+    return { value: raw, kind: 'image' };
+  }
+
+  if (/^[a-z]+:\/\//i.test(raw) || raw.includes('.') || raw.startsWith('/')) {
+    const normalizedUrl = normalizeShortcutUrl(raw);
+    if (normalizedUrl) {
+      return { value: normalizedUrl, kind: 'image' };
+    }
+  }
+
+  const glyph = [...raw].slice(0, 2).join('');
+  return { value: glyph, kind: glyph ? 'glyph' : '' };
+}
+
+function createShortcutEditorState(input = {}) {
+  return {
+    open: Boolean(input.open),
+    mode: input.mode === 'edit' ? 'edit' : 'create',
+    shortcutId: String(input.shortcutId || ''),
+    url: String(input.url || ''),
+    label: String(input.label || ''),
+    icon: String(input.icon || ''),
+    iconKind: String(input.iconKind || 'site'),
+    presentation: input.presentation === 'tab-picker' ? 'tab-picker' : 'default',
+    returnToTabPicker: Boolean(input.returnToTabPicker),
+    focusReturnEl: input.focusReturnEl instanceof HTMLElement ? input.focusReturnEl : null,
+  };
+}
+
+function createTabPickerManualDraft(input = {}) {
+  return {
+    url: String(input.url || ''),
+    label: String(input.label || ''),
+  };
+}
+
+function getShortcutEditorElements() {
+  return {
+    modalBackdrop: document.getElementById('shortcutEditorBackdrop'),
+    modalPanel: document.getElementById('shortcutEditor'),
+    embeddedHost: document.getElementById('tabPickerEditorHost'),
+    form: document.getElementById('shortcutEditorForm'),
+    title: document.getElementById('shortcutEditorTitle'),
+    back: document.getElementById('shortcutEditorBack'),
+    url: document.getElementById('shortcutEditorUrl'),
+    label: document.getElementById('shortcutEditorLabel'),
+    source: document.getElementById('shortcutEditorSource'),
+    sourceButtons: [...document.querySelectorAll('[data-action="select-shortcut-source"]')],
+    emoji: document.getElementById('shortcutEditorEmoji'),
+    svgCode: document.getElementById('shortcutEditorSvgCode'),
+    siteGroup: document.getElementById('shortcutEditorSiteGroup'),
+    emojiGroup: document.getElementById('shortcutEditorEmojiGroup'),
+    imageGroup: document.getElementById('shortcutEditorImageGroup'),
+    svgGroup: document.getElementById('shortcutEditorSvgGroup'),
+    preview: document.getElementById('shortcutEditorPreview'),
+    previewFallback: document.getElementById('shortcutEditorPreviewFallback'),
+    previewTitle: document.getElementById('shortcutEditorPreviewTitle'),
+    previewMeta: document.getElementById('shortcutEditorPreviewMeta'),
+    fileInput: document.getElementById('shortcutIconFileInput'),
+  };
+}
+
+function getTabPickerElements() {
+  return {
+    panel: document.getElementById('tabPicker'),
+    tabsTab: document.getElementById('tabPickerTabsTab'),
+    urlTab: document.getElementById('tabPickerUrlTab'),
+    searchWrap: document.getElementById('tabPickerSearchWrap'),
+    search: document.getElementById('tabPickerSearch'),
+    list: document.getElementById('tabPickerList'),
+    editorHost: document.getElementById('tabPickerEditorHost'),
+    footer: document.getElementById('tabPickerFooter'),
+  };
+}
+
+function syncFormControlValue(element, nextValue) {
+  if (!element) return;
+  const normalized = String(nextValue || '');
+  const isActive = element === document.activeElement;
+  if (element.dataset.composing === 'true') return;
+  if (isActive && element.value === normalized) return;
+  if (element.value !== normalized) {
+    element.value = normalized;
+  }
+}
+
+function resetShortcutEditorPosition(panel) {
+  if (!panel) return;
+  panel.style.removeProperty('left');
+  panel.style.removeProperty('top');
+  panel.style.removeProperty('right');
+  panel.style.removeProperty('bottom');
+  panel.style.removeProperty('inset');
+}
+
+function positionShortcutEditor(triggerEl = null) {
+  if (shortcutEditorState.presentation === 'tab-picker') return;
+
+  const panel = document.getElementById('shortcutEditor');
+  if (!panel) return;
+
+  if (!(triggerEl instanceof HTMLElement)) {
+    resetShortcutEditorPosition(panel);
+    return;
+  }
+
+  const viewportPadding = 16;
+  const offset = 14;
+  const triggerRect = triggerEl.getBoundingClientRect();
+  const panelRect = panel.getBoundingClientRect();
+  const panelWidth = panelRect.width || 360;
+  const panelHeight = panelRect.height || 420;
+
+  const fitsBelow = triggerRect.bottom + offset + panelHeight <= window.innerHeight - viewportPadding;
+  const top = fitsBelow
+    ? triggerRect.bottom + offset
+    : Math.max(viewportPadding, triggerRect.top - panelHeight - offset);
+  const left = Math.min(
+    Math.max(triggerRect.left - 8, viewportPadding),
+    window.innerWidth - panelWidth - viewportPadding
+  );
+
+  panel.style.inset = 'auto';
+  panel.style.left = `${Math.round(left)}px`;
+  panel.style.top = `${Math.round(top)}px`;
+}
+
+function restoreShortcutEditorHome() {
+  const elements = getShortcutEditorElements();
+  if (!elements.form || !elements.modalPanel) return;
+  if (elements.form.parentElement !== elements.modalPanel) {
+    elements.modalPanel.appendChild(elements.form);
+  }
+}
+
+function mountShortcutEditorInTabPicker() {
+  const elements = getShortcutEditorElements();
+  if (!elements.form || !elements.embeddedHost) return;
+  if (elements.form.parentElement !== elements.embeddedHost) {
+    elements.embeddedHost.appendChild(elements.form);
+  }
+}
+
+function syncShortcutEditor() {
+  const elements = getShortcutEditorElements();
+  if (!elements.form) return;
+
+  const isEmbedded = shortcutEditorState.presentation === 'tab-picker';
+  if (isEmbedded) {
+    mountShortcutEditorInTabPicker();
+    if (elements.modalPanel) elements.modalPanel.hidden = true;
+    if (elements.modalBackdrop) elements.modalBackdrop.hidden = true;
+    if (elements.embeddedHost) elements.embeddedHost.hidden = !shortcutEditorState.open;
+    elements.form.classList.add('is-tab-picker-pane');
+  } else {
+    restoreShortcutEditorHome();
+    if (elements.modalPanel) elements.modalPanel.hidden = !shortcutEditorState.open;
+    if (elements.modalBackdrop) elements.modalBackdrop.hidden = !shortcutEditorState.open;
+    if (elements.embeddedHost) elements.embeddedHost.hidden = true;
+    elements.form.classList.remove('is-tab-picker-pane');
+  }
+
+  if (elements.back) {
+    elements.back.hidden = true;
+  }
+  if (shortcutEditorState.presentation === 'tab-picker' && shortcutEditorState.mode === 'create') {
+    elements.title.textContent = themeT ? themeT('addByUrlTitle') : 'Add by URL';
+  } else {
+    elements.title.textContent = shortcutEditorState.mode === 'edit'
+      ? (themeT ? themeT('shortcutEditTitle') : 'Edit shortcut')
+      : (themeT ? themeT('shortcutAddTitle') : 'Add shortcut');
+  }
+  syncFormControlValue(elements.url, shortcutEditorState.url);
+  syncFormControlValue(elements.label, shortcutEditorState.label);
+  elements.sourceButtons.forEach(button => {
+    const isSelected = button.dataset.source === shortcutEditorState.iconKind;
+    button.setAttribute('aria-pressed', String(isSelected));
+  });
+  syncFormControlValue(elements.emoji, shortcutEditorState.iconKind === 'glyph' ? shortcutEditorState.icon : '');
+  if (elements.svgCode) {
+    syncFormControlValue(elements.svgCode, shortcutEditorState.iconKind === 'svg' ? shortcutEditorState.icon : '');
+  }
+  if (elements.siteGroup) elements.siteGroup.hidden = shortcutEditorState.iconKind !== 'site';
+  if (elements.emojiGroup) elements.emojiGroup.hidden = shortcutEditorState.iconKind !== 'glyph';
+  if (elements.imageGroup) elements.imageGroup.hidden = shortcutEditorState.iconKind !== 'image';
+  if (elements.svgGroup) elements.svgGroup.hidden = shortcutEditorState.iconKind !== 'svg';
+
+  const label = shortcutEditorState.label.trim() || shortcutEditorState.url.trim() || (themeT ? themeT('shortcutPreviewFallbackLabel') : 'Shortcut');
+  const previewTitle = shortcutEditorState.iconKind === 'image'
+    ? (themeT ? themeT('shortcutPreviewCustomImageIcon') : 'Custom image icon')
+    : shortcutEditorState.iconKind === 'svg'
+      ? (themeT ? themeT('shortcutPreviewSvgIcon') : 'SVG icon')
+      : shortcutEditorState.iconKind === 'glyph'
+        ? (themeT ? themeT('shortcutPreviewEmojiIcon') : 'Emoji icon')
+        : (themeT ? themeT('shortcutPreviewWebsiteIcon') : 'Website icon');
+  const previewMeta = shortcutEditorState.iconKind
+    ? (themeT ? themeT('shortcutPreviewHasCustomIcon') : 'Custom icon will replace the site favicon.')
+    : (themeT ? themeT('shortcutPreviewNoCustomIcon') : 'Upload or paste an image, or type an emoji.');
+
+  if (elements.previewTitle) elements.previewTitle.textContent = previewTitle;
+  if (elements.previewMeta) elements.previewMeta.textContent = previewMeta;
+  if (elements.preview) {
+    elements.preview.setAttribute('aria-label', `${previewTitle}. ${previewMeta}`);
+  }
+
+  if (elements.preview) {
+    elements.preview.innerHTML = '';
+    if ((shortcutEditorState.iconKind === 'image' || shortcutEditorState.iconKind === 'svg') && shortcutEditorState.icon) {
+      const img = document.createElement('img');
+      img.src = shortcutEditorState.iconKind === 'svg' ? svgToDataUrl(shortcutEditorState.icon) : shortcutEditorState.icon;
+      img.alt = '';
+      img.addEventListener('error', () => {
+        img.remove();
+        if (elements.previewFallback) {
+          elements.previewFallback.textContent = themeGetFallbackLabel(label, '');
+          elements.preview.appendChild(elements.previewFallback);
+        }
+      });
+      elements.preview.appendChild(img);
+    } else if (shortcutEditorState.iconKind === 'glyph' && shortcutEditorState.icon) {
+      const glyph = document.createElement('span');
+      glyph.className = 'shortcut-editor-preview-glyph';
+      glyph.setAttribute('aria-hidden', 'true');
+      glyph.textContent = shortcutEditorState.icon;
+      elements.preview.appendChild(glyph);
+    } else if (elements.previewFallback) {
+      elements.previewFallback.textContent = themeGetFallbackLabel(label, '');
+      elements.preview.appendChild(elements.previewFallback);
+    }
+  }
+}
+
+function openShortcutEditor(shortcut = null, triggerEl = null, options = {}) {
+  const normalized = shortcut ? normalizeQuickShortcuts([shortcut])[0] : null;
+  if (options.presentation === 'tab-picker') {
+    mountShortcutEditorInTabPicker();
+  } else {
+    restoreShortcutEditorHome();
+  }
+  shortcutEditorState = createShortcutEditorState({
+    open: true,
+    mode: normalized ? 'edit' : 'create',
+    shortcutId: normalized?.id || '',
+    url: normalized?.url || '',
+    label: normalized?.label || '',
+    icon: normalized?.icon || '',
+    iconKind: normalized?.iconKind || 'site',
+    presentation: options.presentation,
+    returnToTabPicker: options.returnToTabPicker,
+    focusReturnEl: triggerEl instanceof HTMLElement ? triggerEl : document.activeElement,
+  });
+  syncShortcutEditor();
+  requestAnimationFrame(() => {
+    if (shortcutEditorState.presentation !== 'tab-picker') {
+      positionShortcutEditor(triggerEl);
+    }
+    getShortcutEditorElements().url?.focus?.({ preventScroll: true });
+  });
+}
+
+function closeShortcutEditor({ restoreFocus = true } = {}) {
+  const focusTarget = shortcutEditorState.focusReturnEl;
+  const wasEmbedded = shortcutEditorState.presentation === 'tab-picker';
+  resetShortcutEditorPosition(getShortcutEditorElements().modalPanel);
+  shortcutEditorState = createShortcutEditorState();
+  syncShortcutEditor();
+  restoreShortcutEditorHome();
+  if (wasEmbedded) {
+    closeTabPicker({ restoreFocus });
+    return;
+  }
+  if (restoreFocus) {
+    focusTarget?.focus?.({ preventScroll: true });
+  }
+}
+
+function setShortcutEditorField(field, value) {
+  shortcutEditorState = createShortcutEditorState({
+    ...shortcutEditorState,
+    [field]: value,
+  });
+  syncShortcutEditor();
+}
+
+function syncTabPickerLayout() {
+  const elements = getTabPickerElements();
+  if (!elements.panel) return;
+
+  const isUrlMode = tabPickerMode === 'url';
+  if (elements.tabsTab) {
+    elements.tabsTab.classList.toggle('is-active', !isUrlMode);
+    elements.tabsTab.setAttribute('aria-selected', String(!isUrlMode));
+  }
+  if (elements.urlTab) {
+    elements.urlTab.classList.toggle('is-active', isUrlMode);
+    elements.urlTab.setAttribute('aria-selected', String(isUrlMode));
+  }
+  if (elements.searchWrap) {
+    elements.searchWrap.hidden = isUrlMode;
+  }
+  if (elements.list) {
+    elements.list.hidden = isUrlMode;
+  }
+  if (elements.editorHost) {
+    elements.editorHost.hidden = !isUrlMode;
+  }
+  if (elements.footer && isUrlMode) {
+    elements.footer.hidden = true;
+  }
+}
+
+function setTabPickerMode(nextMode, { focus = true } = {}) {
+  tabPickerMode = nextMode === 'url' ? 'url' : 'tabs';
+  if (tabPickerMode === 'url') {
+    openShortcutEditor(null, tabPickerFocusReturnEl || document.activeElement, {
+      presentation: 'tab-picker',
+    });
+  } else if (shortcutEditorState.presentation === 'tab-picker') {
+    shortcutEditorState = createShortcutEditorState();
+    syncShortcutEditor();
+    restoreShortcutEditorHome();
+  }
+  syncTabPickerLayout();
+
+  requestAnimationFrame(() => {
+    if (!focus) return;
+    const elements = getTabPickerElements();
+    if (tabPickerMode === 'url') {
+      getShortcutEditorElements().url?.focus?.({ preventScroll: true });
+      return;
+    }
+    elements.search?.focus?.({ preventScroll: true });
+  });
+
+  if (tabPickerMode === 'tabs') {
+    renderTabPickerPanel();
+  }
+}
+
+function setTabPickerManualField(field, value) {
+  tabPickerManualDraft = createTabPickerManualDraft({
+    ...tabPickerManualDraft,
+    [field]: value,
+  });
+}
+
+function setShortcutEditorIcon(input) {
+  const normalized = normalizeShortcutIcon(input);
+  shortcutEditorState = createShortcutEditorState({
+    ...shortcutEditorState,
+    icon: normalized.value,
+    iconKind: normalized.kind || 'site',
+  });
+  syncShortcutEditor();
+}
+
+function setShortcutEditorSource(source) {
+  const nextSource = ['site', 'glyph', 'image', 'svg'].includes(source) ? source : 'site';
+  shortcutEditorState = createShortcutEditorState({
+    ...shortcutEditorState,
+    iconKind: nextSource,
+    icon: nextSource === shortcutEditorState.iconKind ? shortcutEditorState.icon : '',
+  });
+  syncShortcutEditor();
+}
+
+async function applyShortcutEditorImageFile(file) {
+  if (!themeCompressImageFileForStorage) {
+    throw new Error(themeT ? themeT('errorImageCompressionUnavailable') : 'Image compression is unavailable');
+  }
+  const dataUrl = await themeCompressImageFileForStorage(file, {
+    maxBytes: 96 * 1024,
+    maxEdge: 160,
+  });
+  setShortcutEditorIcon(dataUrl);
+}
+
+async function saveShortcutEditorShortcut() {
+  const url = normalizeShortcutUrl(shortcutEditorState.url);
+  if (!url) {
+    throw new Error(themeT ? themeT('errorPleaseEnterValidUrl') : 'Please enter a valid URL');
+  }
+
+  const shortcuts = await getQuickShortcuts();
+  const nextShortcut = {
+    id: shortcutEditorState.shortcutId || `shortcut-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    url,
+    label: shortcutEditorState.label.trim(),
+    icon: shortcutEditorState.icon,
+    iconKind: shortcutEditorState.iconKind,
+  };
+
+  const nextShortcuts = shortcutEditorState.mode === 'edit'
+    ? shortcuts.map(item => item.id === nextShortcut.id ? nextShortcut : item)
+    : [...shortcuts, nextShortcut];
+
+  await saveQuickShortcuts(nextShortcuts);
+  await renderQuickShortcuts();
+  closeShortcutEditor();
+}
+
+async function saveTabPickerUrlShortcut() {
+  const url = normalizeShortcutUrl(tabPickerManualDraft.url);
+  if (!url) {
+    throw new Error('Please enter a valid URL');
+  }
+
+  const shortcuts = await getQuickShortcuts();
+  if (shortcuts.some(item => item.url === url)) {
+    throw new Error('Already in shortcuts');
+  }
+
+  const nextShortcut = {
+    id: `shortcut-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    url,
+    label: tabPickerManualDraft.label.trim(),
+    icon: '',
+    iconKind: 'site',
+  };
+
+  await saveQuickShortcuts([...shortcuts, nextShortcut]);
+  await renderQuickShortcuts();
+  closeTabPicker();
+}
+
+function getShortcutLabel(shortcut) {
+  if (shortcut.label) return shortcut.label;
+
+  try {
+    return friendlyDomain(new URL(shortcut.url).hostname);
+  } catch {
+    return shortcut.url;
+  }
+}
+
+function animateQuickShortcutNode(item, previousRect) {
+  if (!item || !previousRect) return;
+
+  const nextRect = item.getBoundingClientRect();
+  const deltaX = previousRect.left - nextRect.left;
+  const deltaY = previousRect.top - nextRect.top;
+  if (!deltaX && !deltaY) return;
+
+  const travel = Math.hypot(deltaX, deltaY);
+  const duration = prefersReducedMotion()
+    ? 0
+    : Math.min(380, Math.max(240, Math.round(228 + travel * 0.4)));
+
+  item.style.transition = 'none';
+  item.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+  requestAnimationFrame(() => {
+    item.style.transition = duration
+      ? `transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`
+      : 'none';
+    item.style.transform = '';
+  });
+}
+
+function animateQuickShortcutItems(listEl, previousRects, affectedIds = null) {
+  const affected = affectedIds instanceof Set ? affectedIds : null;
+  listEl?.querySelectorAll('[data-shortcut-id]:not(.is-drag-slot)').forEach(item => {
+    const key = item.dataset.shortcutId || '';
+    if (affected && !affected.has(key)) return;
+    animateQuickShortcutNode(item, previousRects.get(key));
+  });
+}
+
+function settleQuickShortcutItems(listEl, affectedIds = null) {
+  const affected = affectedIds instanceof Set ? affectedIds : null;
+  listEl?.querySelectorAll('[data-shortcut-id]:not(.is-drag-slot)').forEach(item => {
+    const key = item.dataset.shortcutId || '';
+    if (affected && !affected.has(key)) return;
+    item.style.transition = 'none';
+    item.style.transform = '';
+  });
+}
+
+function ensureQuickShortcutSlot() {
+  if (quickShortcutSlotEl || !quickShortcutDraggedEl) return quickShortcutSlotEl;
+
+  quickShortcutSlotEl = document.createElement('div');
+  quickShortcutSlotEl.className = 'quick-shortcut-slot is-drag-slot';
+  quickShortcutSlotEl.dataset.shortcutId = quickShortcutDraggedId;
+  quickShortcutSlotEl.style.width = `${quickShortcutDragState?.width || quickShortcutDraggedEl.getBoundingClientRect().width}px`;
+  quickShortcutSlotEl.style.height = `${quickShortcutDragState?.height || quickShortcutDraggedEl.getBoundingClientRect().height}px`;
+  quickShortcutDraggedEl.replaceWith(quickShortcutSlotEl);
+  return quickShortcutSlotEl;
+}
+
+function ensureQuickShortcutGhost() {
+  if (quickShortcutGhostEl || !quickShortcutDraggedEl) return quickShortcutGhostEl;
+
+  quickShortcutGhostEl = quickShortcutDraggedEl.cloneNode(true);
+  quickShortcutGhostEl.classList.remove('is-drag-origin');
+  quickShortcutGhostEl.classList.add('is-drag-ghost');
+  quickShortcutGhostEl.style.setProperty('--drag-width', `${quickShortcutDragState?.width || quickShortcutDraggedEl.getBoundingClientRect().width}px`);
+  quickShortcutGhostEl.style.setProperty('--drag-height', `${quickShortcutDragState?.height || quickShortcutDraggedEl.getBoundingClientRect().height}px`);
+  document.body.appendChild(quickShortcutGhostEl);
+  return quickShortcutGhostEl;
+}
+
+function clearQuickShortcutDragState() {
+  quickShortcutDragState = null;
+  quickShortcutDraggedId = '';
+  document.body.classList.remove('quick-shortcut-list-dragging');
+
+  quickShortcutDraggedEl = null;
+  quickShortcutGhostEl?.remove();
+  quickShortcutGhostEl = null;
+  quickShortcutSlotEl?.remove();
+  quickShortcutSlotEl = null;
+}
+
+function clampQuickShortcutDragPoint(clientX, clientY) {
+  const listEl = quickShortcutDragState?.listEl;
+  if (!listEl || !quickShortcutDragState) {
+    return { clientX, clientY };
+  }
+
+  const listRect = listEl.getBoundingClientRect();
+  const width = Number(quickShortcutDragState.width) || 0;
+  const height = Number(quickShortcutDragState.height) || 0;
+  const minClientX = listRect.left + quickShortcutDragState.offsetX - width / 2;
+  const maxClientX = listRect.right + quickShortcutDragState.offsetX - width / 2;
+  const minClientY = listRect.top + quickShortcutDragState.offsetY - height / 2;
+  const maxClientY = listRect.bottom + quickShortcutDragState.offsetY - height / 2;
+
+  return {
+    clientX: Math.min(Math.max(clientX, minClientX), maxClientX),
+    clientY: Math.min(Math.max(clientY, minClientY), maxClientY),
+  };
+}
+
+function updateDraggedQuickShortcutPosition(clientX, clientY) {
+  if (!quickShortcutGhostEl || !quickShortcutDragState) return;
+
+  quickShortcutGhostEl.style.setProperty('--drag-left', `${clientX - quickShortcutDragState.offsetX}px`);
+  quickShortcutGhostEl.style.setProperty('--drag-top', `${clientY - quickShortcutDragState.offsetY}px`);
+}
+
+function buildQuickShortcutSlotTargets(listEl) {
+  if (!(listEl instanceof HTMLElement)) return [];
+
+  return [...listEl.querySelectorAll('[data-shortcut-id]')].map(item => {
+    const rect = item.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top,
+      centerX: rect.left + rect.width / 2,
+      centerY: rect.top + rect.height / 2,
+    };
+  });
+}
+
+function findQuickShortcutSlotIndex(slotTargets, draggedCenterX, draggedCenterY) {
+  if (!Array.isArray(slotTargets) || !slotTargets.length) return -1;
+
+  let targetIndex = 0;
+  let closestDistance = Number.POSITIVE_INFINITY;
+  slotTargets.forEach((slot, index) => {
+    const dx = draggedCenterX - slot.centerX;
+    const dy = draggedCenterY - slot.centerY;
+    const distance = (dx * dx) + (dy * dy);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      targetIndex = index;
+    }
+  });
+
+  return targetIndex;
+}
+
+function previewQuickShortcutOrder(clientX, clientY) {
+  const listEl = quickShortcutDragState?.listEl;
+  if (!listEl || !quickShortcutDraggedId || !quickShortcutSlotEl) return;
+
+  const clampedPoint = clampQuickShortcutDragPoint(clientX, clientY);
+  const draggedCenterX = clampedPoint.clientX - quickShortcutDragState.offsetX + quickShortcutDragState.width / 2;
+  const draggedCenterY = clampedPoint.clientY - quickShortcutDragState.offsetY + quickShortcutDragState.height / 2;
+
+  const items = [...listEl.querySelectorAll('[data-shortcut-id]:not(.is-drag-slot)')];
+  if (!items.length) return;
+
+  const targetIndex = findQuickShortcutSlotIndex(
+    quickShortcutDragState.slotTargets,
+    draggedCenterX,
+    draggedCenterY
+  );
+  if (targetIndex === -1) return;
+
+  const insertBeforeItem = items[targetIndex] || null;
+  const addCard = listEl.querySelector('.quick-shortcut-card.is-add');
+  const targetBeforeNode = insertBeforeItem || addCard || null;
+  const currentBeforeNode = quickShortcutSlotEl.nextElementSibling || null;
+  if (targetBeforeNode === currentBeforeNode) return;
+
+  const previousOrderIds = [...listEl.querySelectorAll('[data-shortcut-id]')]
+    .map(item => item.dataset.shortcutId || '')
+    .filter(Boolean);
+  const previousSlotIndex = previousOrderIds.indexOf(quickShortcutDraggedId);
+  const previousRects = new Map();
+  listEl.querySelectorAll('[data-shortcut-id]:not(.is-drag-slot)').forEach(item => {
+    previousRects.set(item.dataset.shortcutId || '', item.getBoundingClientRect());
+  });
+  const previousSlotRect = quickShortcutSlotEl.getBoundingClientRect();
+
+  if (insertBeforeItem) {
+    listEl.insertBefore(quickShortcutSlotEl, insertBeforeItem);
+  } else {
+    if (addCard) {
+      listEl.insertBefore(quickShortcutSlotEl, addCard);
+    } else {
+      listEl.appendChild(quickShortcutSlotEl);
+    }
+  }
+
+  const nextOrderIds = [...listEl.querySelectorAll('[data-shortcut-id]')]
+    .map(item => item.dataset.shortcutId || '')
+    .filter(Boolean);
+  const nextSlotIndex = nextOrderIds.indexOf(quickShortcutDraggedId);
+  const affectedIds = new Set(
+    nextOrderIds.filter(id => previousOrderIds.indexOf(id) !== nextOrderIds.indexOf(id))
+  );
+
+  const rangeStart = Math.min(previousSlotIndex, nextSlotIndex);
+  const rangeEnd = Math.max(previousSlotIndex, nextSlotIndex);
+  nextOrderIds.forEach((id, index) => {
+    if (index >= rangeStart && index <= rangeEnd) {
+      affectedIds.add(id);
+    }
+  });
+
+  settleQuickShortcutItems(listEl, affectedIds);
+  animateQuickShortcutItems(listEl, previousRects, affectedIds);
+  animateQuickShortcutNode(quickShortcutSlotEl, previousSlotRect);
+}
+
+function renderQuickShortcutCard(shortcut) {
+  const label = getShortcutLabel(shortcut);
+  const safeLabel = themeEscapeHtml ? themeEscapeHtml(label) : label;
+  const safeAriaLabel = themeEscapeHtmlAttribute ? themeEscapeHtmlAttribute(label) : label.replace(/"/g, '&quot;');
+  const iconData = themeGetIconSources ? themeGetIconSources({ url: shortcut.url }, 32) : { sources: [], hostname: '' };
+  const faviconUrl = iconData.sources[0] || '';
+  const fallbackLabel = themeGetFallbackLabel(label, iconData.hostname);
+  const safeId = themeEscapeHtmlAttribute ? themeEscapeHtmlAttribute(shortcut.id) : shortcut.id.replace(/"/g, '&quot;');
+  const safeUrl = themeEscapeHtmlAttribute ? themeEscapeHtmlAttribute(shortcut.url) : shortcut.url.replace(/"/g, '&quot;');
+  const customIcon = normalizeShortcutIcon(shortcut.icon);
+  const primaryIconUrl = customIcon.kind === 'image'
+    ? customIcon.value
+    : customIcon.kind === 'svg'
+      ? svgToDataUrl(customIcon.value)
+      : customIcon.kind === 'glyph'
+        ? ''
+        : faviconUrl;
+  const glyphIcon = customIcon.kind === 'glyph' ? customIcon.value : '';
+  const fallbackSources = (customIcon.kind === 'image' || customIcon.kind === 'svg')
+    ? iconData.sources
+    : iconData.sources.slice(1);
+  const iconErrorFallback = fallbackSources[0] || '';
+  const safeIconErrorFallback = themeEscapeHtmlAttribute ? themeEscapeHtmlAttribute(iconErrorFallback) : iconErrorFallback.replace(/"/g, '&quot;');
+  const fallbackSrcset = fallbackSources.length > 1 ? JSON.stringify(fallbackSources.slice(1)) : '';
+  const safeFallbackSrcset = fallbackSrcset
+    ? (themeEscapeHtmlAttribute ? themeEscapeHtmlAttribute(fallbackSrcset) : fallbackSrcset.replace(/"/g, '&quot;'))
+    : '';
+
+  return `
+    <div class="quick-shortcut-card" data-shortcut-id="${safeId}">
+      <button class="quick-shortcut-open" type="button" data-action="open-quick-shortcut" data-shortcut-url="${safeUrl}" aria-label="${safeAriaLabel}" draggable="false">
+        <span class="quick-shortcut-icon-wrap">
+          ${primaryIconUrl ? `<img class="quick-shortcut-icon${customIcon.kind === 'image' ? ' quick-shortcut-icon-custom' : ''}" src="${primaryIconUrl}" alt="" draggable="false" data-fallback-src="${safeIconErrorFallback}"${safeFallbackSrcset ? ` data-fallback-srcset="${safeFallbackSrcset}"` : ''}>` : ''}
+          ${glyphIcon ? `<span class="quick-shortcut-custom-glyph" aria-hidden="true">${glyphIcon}</span>` : ''}
+          <span class="quick-shortcut-fallback"${primaryIconUrl || glyphIcon ? ' style="display:none"' : ''}>${fallbackLabel}</span>
+        </span>
+        <span class="quick-shortcut-label">${safeLabel}</span>
+      </button>
+      <button class="quick-shortcut-edit" type="button" data-action="edit-quick-shortcut" data-shortcut-id="${safeId}" aria-label="${themeT ? themeT('editQuickTab') : 'Edit quick tab'}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a2.25 2.25 0 1 1 3.182 3.182L10.582 17.13a4.5 4.5 0 0 1-1.897 1.13L6 19l.74-2.685a4.5 4.5 0 0 1 1.13-1.897L16.862 4.487ZM19.5 7.125 16.875 4.5" /></svg>
+      </button>
+      <button class="quick-shortcut-remove" type="button" data-action="remove-quick-shortcut" data-shortcut-id="${safeId}" aria-label="${themeT ? themeT('removeQuickTab') : 'Remove quick tab'}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+      </button>
+    </div>
+  `;
+}
+
+function renderQuickShortcutAddCard() {
+  return `
+    <div class="quick-shortcut-card is-add">
+      <button class="quick-shortcut-open" type="button" data-action="add-quick-shortcut" aria-label="${themeT ? themeT('addQuickTab') : 'Add quick tab'}">
+        <span class="quick-shortcut-icon-wrap">
+          <svg class="quick-shortcut-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5.25v13.5m6.75-6.75H5.25" />
+          </svg>
+        </span>
+        <span class="quick-shortcut-label">${themeT ? themeT('addLink') : 'Add link'}</span>
+      </button>
+    </div>
+  `;
+}
+
+async function renderQuickShortcuts() {
+  const list = document.getElementById('quickTabsList');
+  if (!list) return;
+
+  const shortcuts = await getQuickShortcuts();
+  list.innerHTML = `${shortcuts.map(renderQuickShortcutCard).join('')}${renderQuickShortcutAddCard()}`;
+}
+
+async function openShortcutEditorById(shortcutId, triggerEl = null) {
+  const shortcuts = await getQuickShortcuts();
+  const shortcut = shortcuts.find(item => item.id === shortcutId);
+  if (!shortcut) return;
+  openShortcutEditor(shortcut, triggerEl);
+}
+
+async function handleShortcutEditorPaste() {
+  if (!shortcutEditorState.open) {
+    return;
+  }
+
+  if (!navigator.clipboard?.read) {
+    showToast(themeT ? themeT('toastClipboardUsePasteShortcut') : 'Press Cmd/Ctrl+V inside the editor to paste an image or SVG');
+    return;
+  }
+
+  try {
+    const items = await navigator.clipboard.read();
+    for (const item of items) {
+      const imageType = item.types.find(type => type.startsWith('image/'));
+      if (!imageType) continue;
+      const blob = await item.getType(imageType);
+      const file = new File([blob], 'shortcut-icon.png', { type: imageType });
+      await applyShortcutEditorImageFile(file);
+      showToast(themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted');
+      return;
+    }
+
+    const textItem = items.find(item => item.types.includes('text/plain'));
+    const htmlItem = items.find(item => item.types.includes('text/html'));
+    if (htmlItem) {
+      const htmlBlob = await htmlItem.getType('text/html');
+      const html = await htmlBlob.text();
+      const normalized = extractIconFromClipboardHtml(html);
+      if (normalized.kind) {
+        setShortcutEditorIcon(normalized.value);
+        showToast(normalized.kind === 'svg'
+          ? (themeT ? themeT('toastSvgIconPasted') : 'SVG icon pasted')
+          : (themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted'));
+        return;
+      }
+      const htmlImageMatch = html.match(/<img[^>]+src=["']([^"']+)["']/i);
+      if (htmlImageMatch?.[1] && isTransientClipboardReference(htmlImageMatch[1])) {
+        showToast(themeT ? themeT('toastClipboardTemporaryRef') : 'This clipboard image is a temporary file reference. Use Cmd/Ctrl+V instead.');
+        return;
+      }
+    }
+
+    if (textItem) {
+      const textBlob = await textItem.getType('text/plain');
+      const text = await textBlob.text();
+      const normalized = normalizeShortcutIcon(text);
+      if (normalized.kind === 'svg' || /^data:image\//i.test(String(normalized.value || ''))) {
+        setShortcutEditorIcon(normalized.value);
+        showToast(normalized.kind === 'svg'
+          ? (themeT ? themeT('toastSvgIconPasted') : 'SVG icon pasted')
+          : (themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted'));
+        return;
+      }
+      if (isTransientClipboardReference(text)) {
+        showToast(themeT ? themeT('toastClipboardTemporaryRef') : 'This clipboard image is a temporary file reference. Use Cmd/Ctrl+V instead.');
+        return;
+      }
+    }
+
+    showToast(themeT ? themeT('toastClipboardNoImage') : 'Clipboard does not contain an image or SVG');
+  } catch (err) {
+    showToast(themeT ? themeT('toastClipboardUsePasteShortcut') : 'Use Cmd/Ctrl+V inside the editor if direct clipboard access is unavailable');
+  }
+}
+
+async function tryShortcutEditorPasteViaExecCommand() {
+  return new Promise(resolve => {
+    const target = document.createElement('textarea');
+    target.setAttribute('aria-hidden', 'true');
+    target.style.position = 'fixed';
+    target.style.opacity = '0';
+    target.style.pointerEvents = 'none';
+    target.style.inset = '0 auto auto -9999px';
+    document.body.appendChild(target);
+
+    let finished = false;
+    const cleanup = (result) => {
+      if (finished) return;
+      finished = true;
+      target.removeEventListener('paste', onPaste);
+      target.remove();
+      resolve(result);
+    };
+
+    const onPaste = async (e) => {
+      const imageItem = [...(e.clipboardData?.items || [])].find(item => item.type.startsWith('image/'));
+      if (imageItem) {
+        const file = imageItem.getAsFile();
+        if (file) {
+          e.preventDefault();
+          try {
+            await applyShortcutEditorImageFile(file);
+            showToast(themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted');
+            cleanup(true);
+            return;
+          } catch {
+            cleanup(false);
+            return;
+          }
+        }
+      }
+
+      const pastedHtml = e.clipboardData?.getData('text/html') || '';
+      const normalizedFromHtml = extractIconFromClipboardHtml(pastedHtml);
+      if (normalizedFromHtml.kind) {
+        e.preventDefault();
+        setShortcutEditorIcon(normalizedFromHtml.value);
+        showToast(normalizedFromHtml.kind === 'svg'
+          ? (themeT ? themeT('toastSvgIconPasted') : 'SVG icon pasted')
+          : (themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted'));
+        cleanup(true);
+        return;
+      }
+
+      cleanup(false);
+    };
+
+    target.addEventListener('paste', onPaste, { once: true });
+    target.focus({ preventScroll: true });
+
+    let commandWorked = false;
+    try {
+      commandWorked = document.execCommand('paste');
+    } catch { }
+
+    setTimeout(() => cleanup(commandWorked), 120);
+  });
+}
+
+// ---- Tab Picker ----
+
+function filterRealTabs(tabs) {
+  return tabs.filter(t => {
+    const url = t.url || '';
+    return (
+      !url.startsWith('chrome://') &&
+      !url.startsWith('chrome-extension://') &&
+      !url.startsWith('about:') &&
+      !url.startsWith('edge://') &&
+      !url.startsWith('brave://')
+    );
+  });
+}
+
+function openTabPicker(triggerEl = null) {
+  if (tabPickerOpen) return;
+  tabPickerOpen = true;
+  tabPickerMode = 'tabs';
+  tabPickerSearchQuery = '';
+  tabPickerSelectedIds = new Set();
+  tabPickerFocusReturnEl = document.activeElement;
+  tabPickerManualDraft = createTabPickerManualDraft();
+
+  const backdrop = document.getElementById('tabPickerBackdrop');
+  const panel = document.getElementById('tabPicker');
+  if (backdrop) backdrop.removeAttribute('hidden');
+  if (panel) panel.removeAttribute('hidden');
+
+  shortcutEditorState = createShortcutEditorState();
+  syncShortcutEditor();
+  restoreShortcutEditorHome();
+  syncTabPickerLayout();
+  renderTabPickerPanel();
+  getTabPickerElements().search?.focus?.({ preventScroll: true });
+}
+
+function closeTabPicker({ restoreFocus = true } = {}) {
+  if (!tabPickerOpen) return;
+  if (shortcutEditorState.presentation === 'tab-picker') {
+    shortcutEditorState = createShortcutEditorState();
+    syncShortcutEditor();
+    restoreShortcutEditorHome();
+  }
+  tabPickerOpen = false;
+  tabPickerMode = 'tabs';
+  tabPickerSearchQuery = '';
+  tabPickerSelectedIds = new Set();
+  tabPickerManualDraft = createTabPickerManualDraft();
+
+  const backdrop = document.getElementById('tabPickerBackdrop');
+  const panel = document.getElementById('tabPicker');
+  if (backdrop) backdrop.setAttribute('hidden', '');
+  if (panel) panel.setAttribute('hidden', '');
+
+  if (restoreFocus && tabPickerFocusReturnEl) {
+    tabPickerFocusReturnEl.focus();
+    tabPickerFocusReturnEl = null;
+  }
+}
+
+async function renderTabPickerPanel() {
+  if (!tabPickerOpen) return;
+  if (tabPickerMode !== 'tabs') {
+    syncTabPickerLayout();
+    return;
+  }
+
+  const runtime = globalThis.TabHarborDashboardRuntime;
+  if (!runtime) return;
+
+  await runtime.fetchOpenTabs();
+  const allTabs = runtime.getOpenTabs();
+  const realTabs = filterRealTabs(allTabs);
+
+  const shortcuts = await getQuickShortcuts();
+  const existingUrls = new Set(shortcuts.map(s => s.url));
+
+  const query = tabPickerSearchQuery.trim().toLowerCase();
+  const filtered = query
+    ? realTabs.filter(t => {
+      const title = (t.title || '').toLowerCase();
+      const url = (t.url || '').toLowerCase();
+      return title.includes(query) || url.includes(query);
+    })
+    : realTabs;
+
+  const byDomain = new Map();
+  for (const tab of filtered) {
+    let hostname = '';
+    try { hostname = new URL(tab.url).hostname; } catch { }
+    const group = hostname.replace(/^www\./, '') || 'other';
+    if (!byDomain.has(group)) byDomain.set(group, []);
+    byDomain.get(group).push(tab);
+  }
+
+  const listEl = document.getElementById('tabPickerList');
+  if (!listEl) return;
+
+  if (filtered.length === 0) {
+    listEl.innerHTML = `<div class="tab-picker-empty">${query ? 'No tabs match your search.' : 'No open tabs found.'}</div>`;
+    syncTabPickerFooter();
+    return;
+  }
+
+  let html = '';
+  for (const [domain, tabs] of byDomain) {
+    html += `<div class="tab-picker-group-label">${friendlyDomain(domain) || domain}</div>`;
+    for (const tab of tabs) {
+      const tabId = String(tab.id);
+      const isSelected = tabPickerSelectedIds.has(tabId);
+      const isAdded = existingUrls.has(tab.url);
+      const title = stripTitleNoise(tab.title) || tab.url;
+      const safeTitle = themeEscapeHtmlAttribute(title);
+      const fallbackInitial = (friendlyDomain(tab.url ? new URL(tab.url).hostname : '') || '?')[0] || '?';
+      let faviconHtml;
+      if (tab.favIconUrl) {
+        faviconHtml = `<img class="tab-picker-favicon" src="${themeEscapeHtmlAttribute(tab.favIconUrl)}" alt="" data-fallback-src=""><span class="tab-picker-favicon-fallback" style="display:none">${fallbackInitial.toUpperCase()}</span>`;
+      } else {
+        faviconHtml = `<span class="tab-picker-favicon-fallback">${fallbackInitial.toUpperCase()}</span>`;
+      }
+
+      const checkbox = `<input class="tab-picker-checkbox" type="checkbox" ${isSelected ? 'checked' : ''} data-action="toggle-tab-picker-selection" data-tab-id="${tabId}" aria-label="Select ${safeTitle}">`;
+
+      let actionIcon;
+      if (isAdded) {
+        actionIcon = `<svg class="tab-picker-added-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>`;
+      } else {
+        actionIcon = `<button class="tab-picker-add-btn" type="button" data-action="add-tab-to-shortcuts" data-tab-id="${tabId}" aria-label="Add ${safeTitle} to shortcuts">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+        </button>`;
+      }
+
+      html += `<div class="tab-picker-row ${isSelected ? 'is-selected' : ''}" role="option" aria-selected="${isSelected}">
+        ${checkbox}
+        ${faviconHtml}
+        <span class="tab-picker-tab-title" title="${safeTitle}">${safeTitle}</span>
+        ${actionIcon}
+      </div>`;
+    }
+  }
+
+  listEl.innerHTML = html;
+  syncTabPickerFooter();
+}
+
+function syncTabPickerFooter() {
+  const footer = document.getElementById('tabPickerFooter');
+  const count = document.getElementById('tabPickerFooterCount');
+  if (!footer || !count) return;
+
+  const count_val = tabPickerSelectedIds.size;
+  if (count_val === 0) {
+    footer.setAttribute('hidden', '');
+  } else {
+    footer.removeAttribute('hidden');
+    count.textContent = `${count_val} selected`;
+  }
+}
+
+async function addSingleTabToQuickShortcuts(tab) {
+  const shortcuts = await getQuickShortcuts();
+
+  if (shortcuts.some(s => s.url === tab.url)) {
+    showToast('Already in shortcuts');
+    return;
+  }
+
+  const hostname = tab.url ? (() => { try { return new URL(tab.url).hostname; } catch { return ''; } })() : '';
+  const label = stripTitleNoise(tab.title) || friendlyDomain(hostname) || hostname || tab.url;
+
+  const nextShortcut = {
+    id: `shortcut-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    url: tab.url,
+    label,
+    icon: tab.favIconUrl || '',
+    iconKind: tab.favIconUrl ? 'image' : 'site',
+  };
+
+  const updated = [...shortcuts, nextShortcut];
+  await saveQuickShortcuts(updated);
+  await renderQuickShortcuts();
+  showToast('Tab added — undo?', {
+    action: {
+      label: 'Undo',
+      fn: async () => {
+        await removeQuickShortcutById(nextShortcut.id);
+        await renderQuickShortcuts();
+      },
+    },
+  });
+}
+
+async function addSelectedTabsToQuickShortcuts() {
+  const runtime = globalThis.TabHarborDashboardRuntime;
+  if (!runtime) return;
+
+  const allTabs = runtime.getOpenTabs();
+  const selectedTabs = allTabs.filter(t => tabPickerSelectedIds.has(String(t.id)));
+  if (selectedTabs.length === 0) return;
+
+  const shortcuts = await getQuickShortcuts();
+  const existingUrls = new Set(shortcuts.map(s => s.url));
+
+  const newShortcuts = [];
+  for (const tab of selectedTabs) {
+    const shortcutUrl = tab.url || '';
+    if (existingUrls.has(shortcutUrl)) continue;
+    const hostname = shortcutUrl ? (() => { try { return new URL(shortcutUrl).hostname; } catch { return ''; } })() : '';
+    const label = stripTitleNoise(tab.title) || friendlyDomain(hostname) || hostname || shortcutUrl;
+    newShortcuts.push({
+      id: `shortcut-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      url: shortcutUrl,
+      label,
+      icon: tab.favIconUrl || '',
+      iconKind: tab.favIconUrl ? 'image' : 'site',
+    });
+    existingUrls.add(shortcutUrl);
+  }
+
+  await saveQuickShortcuts([...shortcuts, ...newShortcuts]);
+  await renderQuickShortcuts();
+  closeTabPicker();
+  showToast(`${newShortcuts.length} tab${newShortcuts.length !== 1 ? 's' : ''} added`);
+}
+
+// ---- Escape / backdrop click handlers for picker ----
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && tabPickerOpen) {
+    closeTabPicker();
+  }
+});
+
+document.addEventListener('click', (e) => {
+  if (!tabPickerOpen) return;
+  if (e.target.id === 'tabPickerBackdrop') {
+    closeTabPicker();
+  }
+});
+
+// ---- Tab picker search ----
+document.addEventListener('input', (e) => {
+  if (e.target.id !== 'tabPickerSearch') return;
+  tabPickerSearchQuery = e.target.value || '';
+  renderTabPickerPanel();
+});
+
+// ---- Main action click handler ----
+document.addEventListener('click', async (e) => {
+  const actionEl = e.target.closest('[data-action]');
+  if (!actionEl) return;
+
+  const action = actionEl.dataset.action;
+
+  if (action === 'add-quick-shortcut') {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    openTabPicker(actionEl);
+    return;
+  }
+
+  if (action === 'switch-tab-picker-view') {
+    e.preventDefault();
+    setTabPickerMode(actionEl.dataset.view || 'tabs');
+    return;
+  }
+
+  if (action === 'show-tab-picker-tabs') {
+    e.preventDefault();
+    setTabPickerMode('tabs');
+    return;
+  }
+
+  if (action === 'open-tab-picker') {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    openTabPicker(actionEl);
+    return;
+  }
+
+  if (action === 'close-tab-picker') {
+    closeTabPicker();
+    return;
+  }
+
+  if (action === 'add-tab-to-shortcuts') {
+    const tabId = actionEl.dataset.tabId;
+    if (!tabId) return;
+    const runtime = globalThis.TabHarborDashboardRuntime;
+    if (!runtime) return;
+    const tab = runtime.getOpenTabs().find(t => String(t.id) === tabId);
+    if (!tab) return;
+    await addSingleTabToQuickShortcuts(tab);
+    await renderTabPickerPanel();
+    return;
+  }
+
+  if (action === 'toggle-tab-picker-selection') {
+    const row = actionEl.closest('.tab-picker-row');
+    const tabId = actionEl.dataset.tabId || '';
+    if (tabPickerSelectedIds.has(tabId)) {
+      tabPickerSelectedIds.delete(tabId);
+      if (row) row.classList.remove('is-selected');
+    } else {
+      tabPickerSelectedIds.add(tabId);
+      if (row) row.classList.add('is-selected');
+    }
+    syncTabPickerFooter();
+    return;
+  }
+
+  if (action === 'add-selected-tabs') {
+    e.preventDefault();
+    await addSelectedTabsToQuickShortcuts();
+    return;
+  }
+
+  if (action === 'clear-tab-picker-selection') {
+    tabPickerSelectedIds = new Set();
+    renderTabPickerPanel();
+    return;
+  }
+
+  if (action === 'edit-quick-shortcut') {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const shortcutId = actionEl.dataset.shortcutId || '';
+    await openShortcutEditorById(shortcutId, actionEl);
+    return;
+  }
+
+  if (action === 'remove-quick-shortcut') {
+    e.stopImmediatePropagation();
+    const shortcutId = actionEl.dataset.shortcutId;
+    if (!shortcutId) return;
+    await removeQuickShortcutById(shortcutId);
+    await renderQuickShortcuts();
+    showToast(themeT ? themeT('toastQuickTabRemoved') : 'Quick tab removed');
+    return;
+  }
+
+  if (action === 'open-quick-shortcut') {
+    e.stopImmediatePropagation();
+    if (Date.now() < quickShortcutSuppressClickUntil) return;
+    const url = actionEl.dataset.shortcutUrl;
+    if (!url) return;
+    await openOrFocusUrl(url);
+    return;
+  }
+
+  if (action === 'close-shortcut-editor') {
+    e.preventDefault();
+    closeShortcutEditor({ restoreFocus: true });
+    return;
+  }
+
+  if (action === 'select-shortcut-source') {
+    e.preventDefault();
+    setShortcutEditorSource(actionEl.dataset.source || 'site');
+    if (actionEl.dataset.source === 'glyph') {
+      getShortcutEditorElements().emoji?.focus?.({ preventScroll: true });
+    }
+    return;
+  }
+
+  if (action === 'upload-shortcut-icon') {
+    e.preventDefault();
+    getShortcutEditorElements().fileInput?.click();
+    return;
+  }
+
+  if (action === 'paste-shortcut-icon') {
+    e.preventDefault();
+    const pasted = await tryShortcutEditorPasteViaExecCommand();
+    if (!pasted) {
+      await handleShortcutEditorPaste();
+    }
+    return;
+  }
+
+  if (action === 'clear-shortcut-icon') {
+    e.preventDefault();
+    setShortcutEditorIcon('');
+    return;
+  }
+});
+
+document.addEventListener('pointerdown', (e) => {
+  const shortcutButton = e.target.closest('.quick-shortcut-open');
+  if (!shortcutButton || e.button !== 0) return;
+  if (shortcutButton.dataset.action !== 'open-quick-shortcut') return;
+
+  const item = shortcutButton.closest('[data-shortcut-id]');
+  const listEl = item?.parentElement;
+  if (!item || !listEl) return;
+
+  quickShortcutDraggedId = item.dataset.shortcutId || '';
+  quickShortcutDraggedEl = item;
+
+  const rect = item.getBoundingClientRect();
+  quickShortcutDragState = {
+    listEl,
+    x: e.clientX,
+    y: e.clientY,
+    offsetX: e.clientX - rect.left,
+    offsetY: e.clientY - rect.top,
+    slotTargets: buildQuickShortcutSlotTargets(listEl),
+    width: rect.width,
+    height: rect.height,
+    moved: false,
+  };
+});
+
+document.addEventListener('pointermove', (e) => {
+  if (!quickShortcutDraggedId || !quickShortcutDragState) return;
+
+  const distance = Math.hypot(e.clientX - quickShortcutDragState.x, e.clientY - quickShortcutDragState.y);
+  if (!quickShortcutDragState.moved && distance < 4) return;
+
+  if (!quickShortcutDragState.moved) {
+    quickShortcutDragState.moved = true;
+    document.body.classList.add('quick-shortcut-list-dragging');
+    ensureQuickShortcutSlot();
+    ensureQuickShortcutGhost();
+  }
+
+  updateDraggedQuickShortcutPosition(e.clientX, e.clientY);
+  previewQuickShortcutOrder(e.clientX, e.clientY);
+});
+
+document.addEventListener('pointerup', async () => {
+  if (!quickShortcutDraggedId || !quickShortcutDragState) return;
+
+  const moved = quickShortcutDragState.moved;
+  const nextOrderIds = moved
+    ? [...quickShortcutDragState.listEl.children]
+      .map(node => {
+        if (node === quickShortcutSlotEl) return quickShortcutDraggedId;
+        return node.dataset?.shortcutId || '';
+      })
+      .filter(Boolean)
+    : [];
+  clearQuickShortcutDragState();
+
+  if (!moved) return;
+
+  quickShortcutSuppressClickUntil = Date.now() + 250;
+  await saveQuickShortcutOrder(nextOrderIds);
+  await renderQuickShortcuts();
+});
+
+document.addEventListener('input', (e) => {
+  if (e.target.id === 'shortcutEditorUrl') {
+    setShortcutEditorField('url', e.target.value);
+    return;
+  }
+
+  if (e.target.id === 'shortcutEditorLabel') {
+    setShortcutEditorField('label', e.target.value);
+    return;
+  }
+
+  if (e.target.id === 'shortcutEditorEmoji') {
+    const normalized = normalizeShortcutIcon(e.target.value);
+    shortcutEditorState = createShortcutEditorState({
+      ...shortcutEditorState,
+      icon: normalized.value,
+      iconKind: normalized.kind || 'glyph',
+    });
+    syncShortcutEditor();
+    return;
+  }
+
+  if (e.target.id === 'shortcutEditorSvgCode') {
+    const normalized = normalizeShortcutIcon(e.target.value);
+    shortcutEditorState = createShortcutEditorState({
+      ...shortcutEditorState,
+      icon: normalized.value,
+      iconKind: normalized.kind || 'svg',
+    });
+    syncShortcutEditor();
+  }
+});
+
+document.addEventListener('compositionstart', (e) => {
+  if (!(e.target instanceof HTMLElement)) return;
+  if (!['shortcutEditorUrl', 'shortcutEditorLabel', 'shortcutEditorEmoji', 'shortcutEditorSvgCode'].includes(e.target.id)) {
+    return;
+  }
+  e.target.dataset.composing = 'true';
+});
+
+document.addEventListener('compositionend', (e) => {
+  if (!(e.target instanceof HTMLElement)) return;
+  if (e.target.dataset.composing !== 'true') return;
+  delete e.target.dataset.composing;
+
+  if (e.target.id === 'shortcutEditorUrl') {
+    setShortcutEditorField('url', e.target.value);
+    return;
+  }
+
+  if (e.target.id === 'shortcutEditorLabel') {
+    setShortcutEditorField('label', e.target.value);
+    return;
+  }
+});
+
+document.addEventListener('change', async (e) => {
+  if (e.target.id !== 'shortcutIconFileInput') return;
+
+  const file = e.target.files?.[0];
+  e.target.value = '';
+  if (!file) return;
+
+  try {
+    await applyShortcutEditorImageFile(file);
+    showToast(themeT ? themeT('toastShortcutIconUpdated') : 'Shortcut icon updated');
+  } catch (err) {
+    showToast(err?.message || (themeT ? themeT('toastCouldNotUseShortcutImage') : 'Could not use shortcut image'));
+  }
+});
+
+document.addEventListener('paste', async (e) => {
+  if (!shortcutEditorState.open) return;
+  const imageItem = [...(e.clipboardData?.items || [])].find(item => item.type.startsWith('image/'));
+  if (imageItem) {
+    const file = imageItem.getAsFile();
+    if (!file) return;
+
+    e.preventDefault();
+    try {
+      await applyShortcutEditorImageFile(file);
+      showToast(themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted');
+    } catch (err) {
+      showToast(err?.message || (themeT ? themeT('toastCouldNotPasteShortcutImage') : 'Could not paste shortcut image'));
+    }
+    return;
+  }
+
+  const pastedHtml = e.clipboardData?.getData('text/html') || '';
+  const normalizedFromHtml = extractIconFromClipboardHtml(pastedHtml);
+  if (normalizedFromHtml.kind) {
+    e.preventDefault();
+    setShortcutEditorIcon(normalizedFromHtml.value);
+    showToast(normalizedFromHtml.kind === 'svg'
+      ? (themeT ? themeT('toastSvgIconPasted') : 'SVG icon pasted')
+      : (themeT ? themeT('toastShortcutIconPasted') : 'Shortcut icon pasted'));
+    return;
+  }
+
+  const pastedText = e.clipboardData?.getData('text/plain') || '';
+  const normalized = normalizeShortcutIcon(pastedText);
+  if (normalized.kind === 'svg') {
+    e.preventDefault();
+    setShortcutEditorIcon(normalized.value);
+    showToast(themeT ? themeT('toastSvgIconPasted') : 'SVG icon pasted');
+  }
+});
+
+document.addEventListener('submit', async (e) => {
+  if (e.target.id !== 'shortcutEditorForm') return;
+
+  e.preventDefault();
+  try {
+    const mode = shortcutEditorState.mode;
+    await saveShortcutEditorShortcut();
+    showToast(mode === 'edit'
+      ? (themeT ? themeT('toastQuickTabUpdated') : 'Quick tab updated')
+      : (themeT ? themeT('toastQuickTabAdded') : 'Quick tab added'));
+  } catch (err) {
+    showToast(err?.message || (themeT ? themeT('toastCouldNotSaveShortcut') : 'Could not save shortcut'));
+  }
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && shortcutEditorState.open) {
+    closeShortcutEditor({ restoreFocus: true });
+  }
+});
+
+document.addEventListener('click', (e) => {
+  if (!shortcutEditorState.open) return;
+  if (e.target.id === 'shortcutEditorBackdrop') {
+    closeShortcutEditor({ restoreFocus: true });
+  }
+});
+
+async function loadThemePreferences() {
+  const stored = await chrome.storage.local.get(THEME_PREFERENCES_KEY);
+  themePreferences = normalizeThemePreferences(stored[THEME_PREFERENCES_KEY]);
+  syncSystemThemeSubscription();
+  applyThemePreferences();
+  renderThemeMenu();
+  return themePreferences;
+}
+
+function syncPopupTheme(targetDoc) {
+  const root = targetDoc?.documentElement;
+  const body = targetDoc?.body;
+  if (!root) return;
+  const theme = getResolvedThemeDefinition(themePreferences);
+  const opacityVars = computeThemeOpacityVars(themePreferences.surfaceOpacity);
+  const sizeVars = computeThemeSizeVars(themePreferences);
+
+  Object.entries(theme.vars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  Object.entries(opacityVars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  Object.entries(sizeVars).forEach(([name, value]) => {
+    root.style.setProperty(name, value);
+  });
+  if (body) {
+    body.classList.toggle('theme-tone-light', theme.tone === 'light');
+    body.classList.toggle('theme-tone-dark', theme.tone === 'dark');
+  }
+}
+
+async function saveThemePreferences(nextPreferences) {
+  themePreferences = normalizeThemePreferences({
+    ...themePreferences,
+    ...nextPreferences,
+  });
+  await chrome.storage.local.set({ [THEME_PREFERENCES_KEY]: themePreferences });
+  syncSystemThemeSubscription();
+  applyThemePreferences();
+  renderThemeMenu();
+  return themePreferences;
+}
+
+async function saveSavedSessionRestoreMode(mode) {
+  return saveThemePreferences({ savedSessionRestoreMode: mode });
+}
+
+async function saveSavedSessionNavDisplayMode(mode) {
+  return saveThemePreferences({ savedSessionNavDisplayMode: mode });
+}
+
+globalThis.TabOutThemeControls = {
+  filterRealTabs,
+  getSavedSessionNavDisplayMode,
+  getSavedSessionRestoreMode,
+  getResolvedThemeDefinition,
+  getResolvedTone,
+  getQuickShortcuts,
+  loadThemePreferences,
+  normalizeShortcutUrl,
+  normalizeQuickShortcuts,
+  normalizeThemePreferences,
+  removeQuickShortcutById,
+  saveSavedSessionNavDisplayMode,
+  saveSavedSessionRestoreMode,
+  saveQuickShortcutOrder,
+  saveQuickShortcuts,
+  syncPopupTheme,
+};
diff --git a/extension/theme-controls.test.js b/extension/theme-controls.test.js
new file mode 100644
index 0000000..4abe9da
--- /dev/null
+++ b/extension/theme-controls.test.js
@@ -0,0 +1,264 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+globalThis.document = { addEventListener: () => {}, removeEventListener: () => {}, activeElement: null, documentElement: { style: {} }, body: { classList: { remove: () => {} } }, querySelectorAll: () => [], createElement: () => ({}) };
+globalThis.TabOutIconUtils = {};
+globalThis.TabOutBackgroundImage = {};
+globalThis.TabOutListOrder = { reorderSubsetByIds: (a, b) => a };
+globalThis.TabHarborTodos = { load: async () => [], save: async () => {} };
+globalThis.TabHarborDashboardRuntime = null;
+globalThis.chrome = { runtime: { lastError: null }, storage: { local: { get: async () => ({}), set: async () => {} } } };
+globalThis.localStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {} };
+globalThis.sessionStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {} };
+globalThis.window = {
+  matchMedia: query => ({
+    media: query,
+    matches: false,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }),
+};
+
+require('./theme-controls.js');
+
+const {
+  filterRealTabs,
+  getResolvedThemeDefinition,
+  getResolvedTone,
+  normalizeShortcutUrl,
+  normalizeQuickShortcuts,
+  normalizeThemePreferences,
+} = globalThis.TabOutThemeControls;
+
+// ---- normalizeThemePreferences / resolved theme ----
+
+test('normalizeThemePreferences migrates legacy midnight to dark mist', () => {
+  const result = normalizeThemePreferences({ themeId: 'midnight', surfaceOpacity: 19 });
+  assert.equal(result.mode, 'dark');
+  assert.equal(result.paletteId, 'mist');
+  assert.equal(result.surfaceOpacity, 19);
+});
+
+test('normalizeThemePreferences migrates legacy light theme ids to light palette families', () => {
+  const result = normalizeThemePreferences({ themeId: 'sage' });
+  assert.equal(result.mode, 'light');
+  assert.equal(result.paletteId, 'sage');
+});
+
+test('normalizeThemePreferences keeps explicit mode and palette values', () => {
+  const result = normalizeThemePreferences({
+    mode: 'system',
+    paletteId: 'blush',
+    surfaceOpacity: 9,
+    uiScale: 112,
+    shortcutScale: 124,
+    savedSessionRestoreMode: 'current-window',
+    savedSessionNavDisplayMode: 'icon',
+  });
+  assert.equal(result.mode, 'system');
+  assert.equal(result.paletteId, 'blush');
+  assert.equal(result.surfaceOpacity, 9);
+  assert.equal(result.uiScale, 112);
+  assert.equal(result.shortcutScale, 124);
+  assert.equal(result.savedSessionRestoreMode, 'current-window');
+  assert.equal(result.savedSessionNavDisplayMode, 'icon');
+});
+
+test('normalizeThemePreferences clamps size controls to calm readable ranges', () => {
+  const small = normalizeThemePreferences({ uiScale: 40, shortcutScale: 40 });
+  assert.equal(small.uiScale, 100);
+  assert.equal(small.shortcutScale, 100);
+
+  const large = normalizeThemePreferences({ uiScale: 180, shortcutScale: 180 });
+  assert.equal(large.uiScale, 120);
+  assert.equal(large.shortcutScale, 130);
+});
+
+test('normalizeThemePreferences defaults saved session restore mode to new-window', () => {
+  const result = normalizeThemePreferences({});
+  assert.equal(result.savedSessionRestoreMode, 'new-window');
+  assert.equal(result.savedSessionNavDisplayMode, 'name');
+});
+
+test('normalizeThemePreferences falls back to new-window for invalid saved session restore mode', () => {
+  const result = normalizeThemePreferences({
+    savedSessionRestoreMode: 'hidden-window',
+    savedSessionNavDisplayMode: 'label',
+  });
+  assert.equal(result.savedSessionRestoreMode, 'new-window');
+  assert.equal(result.savedSessionNavDisplayMode, 'name');
+});
+
+test('normalizeThemePreferences defaults closeDuplicateNewTabsEnabled to false', () => {
+  const result = normalizeThemePreferences({});
+  assert.equal(result.closeDuplicateNewTabsEnabled, false);
+});
+
+test('normalizeThemePreferences preserves closeDuplicateNewTabsEnabled when true', () => {
+  const result = normalizeThemePreferences({ closeDuplicateNewTabsEnabled: true });
+  assert.equal(result.closeDuplicateNewTabsEnabled, true);
+});
+
+test('normalizeThemePreferences rejects non-boolean closeDuplicateNewTabsEnabled', () => {
+  assert.equal(normalizeThemePreferences({ closeDuplicateNewTabsEnabled: 'yes' }).closeDuplicateNewTabsEnabled, false);
+  assert.equal(normalizeThemePreferences({ closeDuplicateNewTabsEnabled: 1 }).closeDuplicateNewTabsEnabled, false);
+  assert.equal(normalizeThemePreferences({ closeDuplicateNewTabsEnabled: null }).closeDuplicateNewTabsEnabled, false);
+});
+
+test('getResolvedTone follows system preference when mode is system', () => {
+  const originalMatchMedia = globalThis.window.matchMedia;
+  globalThis.window.matchMedia = query => ({
+    media: query,
+    matches: true,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  });
+  try {
+    assert.equal(getResolvedTone({ mode: 'system' }), 'dark');
+  } finally {
+    globalThis.window.matchMedia = originalMatchMedia;
+  }
+});
+
+test('getResolvedThemeDefinition resolves dark tokens from palette family', () => {
+  const theme = getResolvedThemeDefinition({ mode: 'dark', paletteId: 'paper' });
+  assert.equal(theme.name, 'Paper');
+  assert.equal(theme.tone, 'dark');
+  assert.equal(theme.vars['--paper'], '#1a1613');
+});
+
+// ---- filterRealTabs ----
+
+test('filterRealTabs removes chrome:// internal pages', () => {
+  const tabs = [
+    { id: 1, url: 'https://github.com' },
+    { id: 2, url: 'chrome://newtab' },
+    { id: 3, url: 'chrome://settings' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 1);
+  assert.equal(result[0].id, 1);
+});
+
+test('filterRealTabs removes chrome-extension:// URLs', () => {
+  const tabs = [
+    { id: 1, url: 'https://example.com' },
+    { id: 2, url: 'chrome-extension://abc123/background.html' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 1);
+  assert.equal(result[0].id, 1);
+});
+
+test('filterRealTabs removes about:blank and about:s pages', () => {
+  const tabs = [
+    { id: 1, url: 'https://example.com' },
+    { id: 2, url: 'about:blank' },
+    { id: 3, url: 'about:settings' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 1);
+  assert.equal(result[0].id, 1);
+});
+
+test('filterRealTabs removes edge:// and brave:// URLs', () => {
+  const tabs = [
+    { id: 1, url: 'https://example.com' },
+    { id: 2, url: 'edge://settings' },
+    { id: 3, url: 'brave://rewards' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 1);
+  assert.equal(result[0].id, 1);
+});
+
+test('filterRealTabs preserves tabs with no url field', () => {
+  const tabs = [
+    { id: 1, title: 'GitHub' },
+    { id: 2, url: 'https://github.com' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 2);
+});
+
+test('filterRealTabs is case-insensitive for protocol prefix', () => {
+  const tabs = [
+    { id: 1, url: 'CHROME://settings' },
+    { id: 2, url: 'Chrome-extension://abc' },
+  ];
+  const result = filterRealTabs(tabs);
+  assert.equal(result.length, 2); // url.startsWith is case-sensitive in JS
+});
+
+test('filterRealTabs handles empty array', () => {
+  assert.equal(filterRealTabs([]).length, 0);
+});
+
+// ---- normalizeShortcutUrl ----
+
+test('normalizeShortcutUrl strips leading/trailing whitespace', () => {
+  // URL() normalizes to canonical form (adds trailing slash for bare domains)
+  assert.equal(normalizeShortcutUrl('  https://example.com  '), 'https://example.com/');
+  assert.equal(normalizeShortcutUrl('  https://github.com/user  '), 'https://github.com/user');
+});
+
+test('normalizeShortcutUrl handles empty input', () => {
+  assert.equal(normalizeShortcutUrl(''), '');
+  assert.equal(normalizeShortcutUrl('   '), '');
+});
+
+test('normalizeShortcutUrl preserves valid URLs', () => {
+  assert.equal(normalizeShortcutUrl('https://github.com/user/repo'), 'https://github.com/user/repo');
+});
+
+test('normalizeShortcutUrl adds https for host-only URLs', () => {
+  assert.equal(normalizeShortcutUrl('github.com'), 'https://github.com/');
+  assert.equal(normalizeShortcutUrl('example.org/path'), 'https://example.org/path');
+});
+
+test('normalizeShortcutUrl supports internationalized domains and paths', () => {
+  assert.equal(
+    normalizeShortcutUrl('例子.测试/路径'),
+    'https://xn--fsqu00a.xn--0zwm56d/%E8%B7%AF%E5%BE%84'
+  );
+});
+
+// ---- normalizeQuickShortcuts ----
+
+test('normalizeQuickShortcuts ignores non-array input', () => {
+  assert.deepEqual(normalizeQuickShortcuts(null), []);
+  assert.deepEqual(normalizeQuickShortcuts(undefined), []);
+  assert.deepEqual(normalizeQuickShortcuts('not an array'), []);
+});
+
+test('normalizeQuickShortcuts filters shortcuts missing url only', () => {
+  const input = [
+    { id: 'a', url: 'https://a.com' },
+    { id: 'b', url: '' },
+    { id: '', url: 'https://c.com' }, // id missing is ok, id is auto-generated
+  ];
+  const result = normalizeQuickShortcuts(input);
+  assert.equal(result.length, 2);
+});
+
+test('normalizeQuickShortcuts defaults iconKind to empty string for no icon', () => {
+  const input = [{ id: 's1', url: 'https://ex.com' }];
+  const result = normalizeQuickShortcuts(input);
+  assert.equal(result[0].iconKind, '');
+});
+
+test('normalizeQuickShortcuts infers iconKind from icon content', () => {
+  const input = [{ id: 's1', url: 'https://ex.com', icon: '🌟' }];
+  const result = normalizeQuickShortcuts(input);
+  assert.equal(result[0].iconKind, 'glyph');
+  assert.equal(result[0].icon, '🌟');
+});
+
+test('normalizeQuickShortcuts normalizes icon URL to image kind', () => {
+  const input = [{ id: 's1', url: 'https://ex.com', icon: 'https://ex.com/f.png' }];
+  const result = normalizeQuickShortcuts(input);
+  assert.equal(result[0].iconKind, 'image');
+  assert.equal(result[0].icon, 'https://ex.com/f.png');
+});
diff --git a/extension/todos-store.js b/extension/todos-store.js
new file mode 100644
index 0000000..8b24803
--- /dev/null
+++ b/extension/todos-store.js
@@ -0,0 +1,119 @@
+'use strict';
+
+(function attachTodosStore(globalScope) {
+  function normalizeTodos(input) {
+    if (!Array.isArray(input)) return [];
+
+    return input
+      .filter(todo => todo && todo.id && todo.title)
+      .map(todo => ({
+        id: String(todo.id),
+        title: String(todo.title).trim(),
+        description: String(todo.description || ''),
+        createdAt: todo.createdAt || new Date().toISOString(),
+        completed: Boolean(todo.completed),
+        completedAt: todo.completedAt || null,
+        dismissed: Boolean(todo.dismissed),
+      }));
+  }
+
+  function createTodo(todos, { title, description = '' }) {
+    const cleanTitle = String(title || '').trim();
+    if (!cleanTitle) throw new Error('Todo title is required');
+
+    const nextTodo = {
+      id: `todo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      title: cleanTitle,
+      description: String(description || '').trim(),
+      createdAt: new Date().toISOString(),
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    };
+
+    return [...normalizeTodos(todos), nextTodo];
+  }
+
+  function updateTodo(todos, id, updates = {}) {
+    const hasTitle = Object.prototype.hasOwnProperty.call(updates, 'title');
+    const cleanTitle = hasTitle ? String(updates.title || '').trim() : '';
+    const hasDescription = Object.prototype.hasOwnProperty.call(updates, 'description');
+    const cleanDescription = hasDescription ? String(updates.description || '').trim() : '';
+
+    if (hasTitle && !cleanTitle) throw new Error('Todo title is required');
+
+    return normalizeTodos(todos).map(todo => {
+      if (todo.id !== String(id)) return todo;
+      const nextTodo = { ...todo };
+      if (hasTitle) nextTodo.title = cleanTitle;
+      if (hasDescription) nextTodo.description = cleanDescription;
+      return nextTodo;
+    });
+  }
+
+  function completeTodo(todos, id) {
+    return normalizeTodos(todos).map(todo => {
+      if (todo.id !== String(id)) return todo;
+      return {
+        ...todo,
+        completed: true,
+        completedAt: new Date().toISOString(),
+      };
+    });
+  }
+
+  function deleteTodo(todos, id) {
+    return normalizeTodos(todos).map(todo => {
+      if (todo.id !== String(id)) return todo;
+      return {
+        ...todo,
+        dismissed: true,
+      };
+    });
+  }
+
+  function clearArchivedTodos(todos) {
+    return normalizeTodos(todos).map(todo => {
+      if (!todo.completed || todo.dismissed) return todo;
+      return {
+        ...todo,
+        dismissed: true,
+      };
+    });
+  }
+
+  function splitTodos(todos) {
+    const visible = normalizeTodos(todos).filter(todo => !todo.dismissed);
+    return {
+      active: visible.filter(todo => !todo.completed),
+      archived: visible.filter(todo => todo.completed),
+    };
+  }
+
+  function searchTodos(todos, query) {
+    const needle = String(query || '').trim().toLowerCase();
+    if (!needle) return normalizeTodos(todos);
+
+    return normalizeTodos(todos).filter(todo =>
+      todo.title.toLowerCase().includes(needle) ||
+      todo.description.toLowerCase().includes(needle)
+    );
+  }
+
+  const api = {
+    completeTodo,
+    clearArchivedTodos,
+    createTodo,
+    deleteTodo,
+    normalizeTodos,
+    searchTodos,
+    splitTodos,
+    updateTodo,
+  };
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api;
+  }
+
+  globalScope.TabOutTodosStore = api;
+})(typeof globalThis !== 'undefined' ? globalThis : window);
diff --git a/extension/todos-store.test.js b/extension/todos-store.test.js
new file mode 100644
index 0000000..096f12f
--- /dev/null
+++ b/extension/todos-store.test.js
@@ -0,0 +1,154 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  completeTodo,
+  clearArchivedTodos,
+  createTodo,
+  deleteTodo,
+  normalizeTodos,
+  searchTodos,
+  splitTodos,
+  updateTodo,
+} = require('./todos-store.js');
+
+test('createTodo adds a new active todo with title and description', () => {
+  const todos = createTodo([], {
+    title: 'Write launch post',
+    description: 'Draft the outline before dinner',
+  });
+
+  assert.equal(todos.length, 1);
+  assert.equal(todos[0].title, 'Write launch post');
+  assert.equal(todos[0].completed, false);
+});
+
+test('completeTodo archives a todo without dismissing it', () => {
+  const todos = completeTodo([
+    {
+      id: 'todo-1',
+      title: 'Review notes',
+      description: '',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    },
+  ], 'todo-1');
+
+  const { active, archived } = splitTodos(todos);
+  assert.equal(active.length, 0);
+  assert.equal(archived.length, 1);
+  assert.equal(archived[0].completed, true);
+});
+
+test('deleteTodo hides a todo from both active and archive views', () => {
+  const todos = deleteTodo([
+    {
+      id: 'todo-1',
+      title: 'Review notes',
+      description: '',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: true,
+      completedAt: '2026-04-16T01:00:00.000Z',
+      dismissed: false,
+    },
+  ], 'todo-1');
+
+  const { active, archived } = splitTodos(todos);
+  assert.equal(active.length, 0);
+  assert.equal(archived.length, 0);
+});
+
+test('updateTodo edits title and description without changing completion state', () => {
+  const todos = updateTodo([
+    {
+      id: 'todo-1',
+      title: 'Review notes',
+      description: 'Old context',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: true,
+      completedAt: '2026-04-16T01:00:00.000Z',
+      dismissed: false,
+    },
+  ], 'todo-1', {
+    title: '  Review launch notes  ',
+    description: '  New context  ',
+    completed: false,
+    dismissed: true,
+  });
+
+  assert.equal(todos[0].title, 'Review launch notes');
+  assert.equal(todos[0].description, 'New context');
+  assert.equal(todos[0].completed, true);
+  assert.equal(todos[0].dismissed, false);
+});
+
+test('updateTodo rejects an empty title', () => {
+  assert.throws(() => updateTodo([
+    {
+      id: 'todo-1',
+      title: 'Review notes',
+      description: '',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    },
+  ], 'todo-1', { title: '   ' }), /Todo title is required/);
+});
+
+test('clearArchivedTodos removes all archived todos but keeps active ones', () => {
+  const todos = clearArchivedTodos([
+    {
+      id: 'todo-1',
+      title: 'Archived item',
+      description: '',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: true,
+      completedAt: '2026-04-16T01:00:00.000Z',
+      dismissed: false,
+    },
+    {
+      id: 'todo-2',
+      title: 'Active item',
+      description: '',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    },
+  ]);
+
+  const { active, archived } = splitTodos(todos);
+  assert.equal(active.length, 1);
+  assert.equal(archived.length, 0);
+});
+
+test('searchTodos matches title and description text', () => {
+  const todos = normalizeTodos([
+    {
+      id: 'todo-1',
+      title: 'Write docs',
+      description: 'Update onboarding page',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    },
+    {
+      id: 'todo-2',
+      title: 'Prep launch',
+      description: 'Draft release copy',
+      createdAt: '2026-04-16T00:00:00.000Z',
+      completed: false,
+      completedAt: null,
+      dismissed: false,
+    },
+  ]);
+
+  assert.equal(searchTodos(todos, 'onboarding').length, 1);
+  assert.equal(searchTodos(todos, 'launch').length, 1);
+});
diff --git a/extension/ui-helpers.js b/extension/ui-helpers.js
new file mode 100644
index 0000000..61d893f
--- /dev/null
+++ b/extension/ui-helpers.js
@@ -0,0 +1,503 @@
+'use strict';
+
+const {
+  locale: uiLocale = 'en',
+  t: uiT,
+} = globalThis.TabHarborI18n || {};
+
+/* ----------------------------------------------------------------
+   UI HELPERS
+   ---------------------------------------------------------------- */
+
+function playCloseSound() {
+  try {
+    const ctx = new (window.AudioContext || window.webkitAudioContext)();
+    const t = ctx.currentTime;
+
+    const duration = 0.25;
+    const buffer = ctx.createBuffer(1, ctx.sampleRate * duration, ctx.sampleRate);
+    const data = buffer.getChannelData(0);
+
+    for (let i = 0; i < data.length; i++) {
+      const pos = i / data.length;
+      const env = pos < 0.1 ? pos / 0.1 : Math.pow(1 - (pos - 0.1) / 0.9, 1.5);
+      data[i] = (Math.random() * 2 - 1) * env;
+    }
+
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+
+    const filter = ctx.createBiquadFilter();
+    filter.type = 'bandpass';
+    filter.Q.value = 2.0;
+    filter.frequency.setValueAtTime(4000, t);
+    filter.frequency.exponentialRampToValueAtTime(400, t + duration);
+
+    const gain = ctx.createGain();
+    gain.gain.setValueAtTime(0.15, t);
+    gain.gain.exponentialRampToValueAtTime(0.001, t + duration);
+
+    source.connect(filter).connect(gain).connect(ctx.destination);
+    source.start(t);
+
+    setTimeout(() => ctx.close(), 500);
+  } catch {
+    // Audio not supported — fail silently
+  }
+}
+
+function shootConfetti(x, y) {
+  const colors = [
+    '#c8713a',
+    '#e8a070',
+    '#5a7a62',
+    '#8aaa92',
+    '#5a6b7a',
+    '#8a9baa',
+    '#d4b896',
+    '#b35a5a',
+  ];
+
+  const particleCount = 17;
+
+  for (let i = 0; i < particleCount; i++) {
+    const el = document.createElement('div');
+
+    const isCircle = Math.random() > 0.5;
+    const size = 5 + Math.random() * 6;
+    const color = colors[Math.floor(Math.random() * colors.length)];
+
+    el.style.cssText = `
+      position: fixed;
+      left: ${x}px;
+      top: ${y}px;
+      width: ${size}px;
+      height: ${size}px;
+      background: ${color};
+      border-radius: ${isCircle ? '50%' : '2px'};
+      pointer-events: none;
+      z-index: 9999;
+      transform: translate(-50%, -50%);
+      opacity: 1;
+    `;
+    document.body.appendChild(el);
+
+    const angle = Math.random() * Math.PI * 2;
+    const speed = 60 + Math.random() * 120;
+    const vx = Math.cos(angle) * speed;
+    const vy = Math.sin(angle) * speed - 80;
+    const gravity = 200;
+
+    const startTime = performance.now();
+    const duration = 700 + Math.random() * 200;
+
+    function frame(now) {
+      const elapsed = (now - startTime) / 1000;
+      const progress = elapsed / (duration / 1000);
+
+      if (progress >= 1) {
+        el.remove();
+        return;
+      }
+
+      const px = vx * elapsed;
+      const py = vy * elapsed + 0.5 * gravity * elapsed * elapsed;
+      const opacity = progress < 0.5 ? 1 : 1 - (progress - 0.5) * 2;
+      const rotate = elapsed * 200 * (isCircle ? 0 : 1);
+
+      el.style.transform = `translate(calc(-50% + ${px}px), calc(-50% + ${py}px)) rotate(${rotate}deg)`;
+      el.style.opacity = opacity;
+
+      requestAnimationFrame(frame);
+    }
+
+    requestAnimationFrame(frame);
+  }
+}
+
+function animateCardOut(card) {
+  if (!card) return;
+
+  const rect = card.getBoundingClientRect();
+  shootConfetti(rect.left + rect.width / 2, rect.top + rect.height / 2);
+
+  card.classList.add('closing');
+  setTimeout(() => {
+    card.remove();
+    checkAndShowEmptyState();
+  }, 300);
+}
+
+function showToast(message, { action } = {}) {
+  const toast = document.getElementById('toast');
+  const toastText = document.getElementById('toastText');
+  if (!toast || !toastText) return;
+  const toastAction = document.getElementById('toastAction');
+  if (!toast || !toastText) return;
+
+  toastText.textContent = message;
+
+  if (action && toastAction) {
+    toastAction.textContent = action.label;
+    toastAction.hidden = false;
+    toastAction.onclick = async () => {
+      try {
+        await Promise.resolve(action.fn());
+      } catch (error) {
+        console.error('Toast action failed:', error);
+      } finally {
+        toast.classList.remove('visible');
+      }
+    };
+  } else if (toastAction) {
+    toastAction.hidden = true;
+    toastAction.onclick = null;
+  }
+
+  toast.classList.add('visible');
+  setTimeout(() => toast.classList.remove('visible'), 2500);
+}
+
+function setImageFallbackAttributes(imgEl, fallbackUrl = '') {
+  if (!imgEl) return;
+  const fallbackSources = Array.isArray(fallbackUrl)
+    ? fallbackUrl.map(url => String(url || '').trim()).filter(Boolean)
+    : String(fallbackUrl || '').trim()
+      ? [String(fallbackUrl || '').trim()]
+      : [];
+
+  if (fallbackSources.length) {
+    imgEl.dataset.fallbackSrc = fallbackSources[0];
+    if (fallbackSources.length > 1) {
+      imgEl.dataset.fallbackSrcset = JSON.stringify(fallbackSources.slice(1));
+    } else {
+      delete imgEl.dataset.fallbackSrcset;
+    }
+  } else {
+    delete imgEl.dataset.fallbackSrc;
+    delete imgEl.dataset.fallbackSrcset;
+  }
+  delete imgEl.dataset.fallbackApplied;
+}
+
+function revealImageFallback(imgEl) {
+  if (!imgEl) return;
+  imgEl.style.display = 'none';
+  const sibling = imgEl.nextElementSibling;
+  if (!sibling) return;
+  if (
+    sibling.classList.contains('group-nav-fallback') ||
+    sibling.classList.contains('chip-favicon-fallback') ||
+    sibling.classList.contains('inline-favicon-fallback') ||
+    sibling.classList.contains('popup-tab-favicon-fallback') ||
+    sibling.classList.contains('quick-shortcut-fallback') ||
+    sibling.classList.contains('tab-picker-favicon-fallback')
+  ) {
+    sibling.style.display = (
+      sibling.classList.contains('inline-favicon-fallback') ||
+      sibling.classList.contains('tab-picker-favicon-fallback')
+    ) ? 'inline-flex' : 'flex';
+  }
+}
+
+function handleImageFallbackError(imgEl) {
+  if (!imgEl) return;
+
+  const fallbackQueue = [];
+  const primaryFallback = String(imgEl.dataset.fallbackSrc || '').trim();
+  if (primaryFallback) fallbackQueue.push(primaryFallback);
+
+  const serializedQueue = String(imgEl.dataset.fallbackSrcset || '').trim();
+  if (serializedQueue) {
+    try {
+      const parsed = JSON.parse(serializedQueue);
+      if (Array.isArray(parsed)) {
+        fallbackQueue.push(...parsed.map(url => String(url || '').trim()).filter(Boolean));
+      }
+    } catch {
+      // Ignore malformed fallback queues and continue to inline fallback.
+    }
+  }
+
+  const currentSrc = String(imgEl.currentSrc || imgEl.src || '').trim();
+  const nextFallback = fallbackQueue.find(url => url && url !== currentSrc && url !== String(imgEl.dataset.fallbackApplied || '').trim());
+  if (nextFallback) {
+    const remaining = fallbackQueue.filter(url => url && url !== nextFallback);
+    imgEl.dataset.fallbackApplied = nextFallback;
+    imgEl.dataset.fallbackSrc = nextFallback;
+    if (remaining.length) {
+      imgEl.dataset.fallbackSrcset = JSON.stringify(remaining);
+    } else {
+      delete imgEl.dataset.fallbackSrcset;
+    }
+    imgEl.src = nextFallback;
+    return;
+  }
+
+  revealImageFallback(imgEl);
+}
+
+if (!globalThis.__tabHarborImageFallbackBound) {
+  document.addEventListener('error', event => {
+    const target = event.target;
+    if (!(target instanceof HTMLImageElement)) return;
+    if (!('fallbackSrc' in target.dataset) && !('fallbackSrcset' in target.dataset)) return;
+    handleImageFallbackError(target);
+  }, true);
+  globalThis.__tabHarborImageFallbackBound = true;
+}
+
+function renderMissionsEmptyState() {
+  return `
+    <div class="missions-empty-state">
+      <div class="empty-checkmark">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+        </svg>
+      </div>
+      <div class="empty-title">${uiT ? uiT('emptyTitle') : 'Inbox zero, but for tabs.'}</div>
+      <div class="empty-subtitle">${uiT ? uiT('emptySubtitle') : "You're free."}</div>
+    </div>
+  `;
+}
+
+function checkAndShowEmptyState() {
+  const missionsEl = document.getElementById('openTabsMissions');
+  if (!missionsEl) return;
+
+  const remaining = missionsEl.querySelectorAll('.mission-card:not(.closing)').length;
+  if (remaining > 0) return;
+
+  missionsEl.innerHTML = renderMissionsEmptyState();
+
+  const countEl = document.getElementById('openTabsSectionCount');
+  if (countEl) countEl.textContent = uiT ? uiT('emptyTabsCount') : '0 domains';
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  const then = new Date(dateStr);
+  const now = new Date();
+  const diffMins = Math.floor((now - then) / 60000);
+  const diffHours = Math.floor((now - then) / 3600000);
+  const diffDays = Math.floor((now - then) / 86400000);
+
+  if (diffMins < 1) return uiT ? uiT('timeJustNow') : 'just now';
+  if (diffMins < 60) return uiT ? uiT('timeMinAgo', { count: diffMins }) : `${diffMins} min ago`;
+  if (diffHours < 24) {
+    if (!uiT) return `${diffHours} hr${diffHours !== 1 ? 's' : ''} ago`;
+    return diffHours === 1
+      ? uiT('timeHourAgo')
+      : uiT('timeHoursAgo', { count: diffHours });
+  }
+  if (diffDays === 1) return uiT ? uiT('timeYesterday') : 'yesterday';
+  return uiT ? uiT('timeDaysAgo', { count: diffDays }) : `${diffDays} days ago`;
+}
+
+function getGreeting() {
+  const hour = new Date().getHours();
+  if (hour < 12) return uiT ? uiT('greetingMorning') : 'Good morning';
+  if (hour < 17) return uiT ? uiT('greetingAfternoon') : 'Good afternoon';
+  return uiT ? uiT('greetingEvening') : 'Good evening';
+}
+
+function getDateDisplay() {
+  const locale = uiLocale === 'zh-CN' ? 'zh-CN' : 'en-US';
+  return new Date().toLocaleDateString(locale, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+const FRIENDLY_DOMAINS = {
+  'github.com': 'GitHub',
+  'www.github.com': 'GitHub',
+  'gist.github.com': 'GitHub Gist',
+  'youtube.com': 'YouTube',
+  'www.youtube.com': 'YouTube',
+  'music.youtube.com': 'YouTube Music',
+  'x.com': 'X',
+  'www.x.com': 'X',
+  'twitter.com': 'X',
+  'www.twitter.com': 'X',
+  'reddit.com': 'Reddit',
+  'www.reddit.com': 'Reddit',
+  'old.reddit.com': 'Reddit',
+  'substack.com': 'Substack',
+  'www.substack.com': 'Substack',
+  'medium.com': 'Medium',
+  'www.medium.com': 'Medium',
+  'linkedin.com': 'LinkedIn',
+  'www.linkedin.com': 'LinkedIn',
+  'stackoverflow.com': 'Stack Overflow',
+  'www.stackoverflow.com': 'Stack Overflow',
+  'news.ycombinator.com': 'Hacker News',
+  'google.com': 'Google',
+  'www.google.com': 'Google',
+  'mail.google.com': 'Gmail',
+  'docs.google.com': 'Google Docs',
+  'drive.google.com': 'Google Drive',
+  'calendar.google.com': 'Google Calendar',
+  'meet.google.com': 'Google Meet',
+  'gemini.google.com': 'Gemini',
+  'chatgpt.com': 'ChatGPT',
+  'www.chatgpt.com': 'ChatGPT',
+  'chat.openai.com': 'ChatGPT',
+  'claude.ai': 'Claude',
+  'www.claude.ai': 'Claude',
+  'code.claude.com': 'Claude Code',
+  'notion.so': 'Notion',
+  'www.notion.so': 'Notion',
+  'figma.com': 'Figma',
+  'www.figma.com': 'Figma',
+  'slack.com': 'Slack',
+  'app.slack.com': 'Slack',
+  'discord.com': 'Discord',
+  'www.discord.com': 'Discord',
+  'wikipedia.org': 'Wikipedia',
+  'en.wikipedia.org': 'Wikipedia',
+  'amazon.com': 'Amazon',
+  'www.amazon.com': 'Amazon',
+  'netflix.com': 'Netflix',
+  'www.netflix.com': 'Netflix',
+  'spotify.com': 'Spotify',
+  'open.spotify.com': 'Spotify',
+  'vercel.com': 'Vercel',
+  'www.vercel.com': 'Vercel',
+  'npmjs.com': 'npm',
+  'www.npmjs.com': 'npm',
+  'developer.mozilla.org': 'MDN',
+  'arxiv.org': 'arXiv',
+  'www.arxiv.org': 'arXiv',
+  'huggingface.co': 'Hugging Face',
+  'www.huggingface.co': 'Hugging Face',
+  'producthunt.com': 'Product Hunt',
+  'www.producthunt.com': 'Product Hunt',
+  'xiaohongshu.com': 'RedNote',
+  'www.xiaohongshu.com': 'RedNote',
+  'local-files': 'Local Files',
+};
+
+function friendlyDomain(hostname) {
+  if (!hostname) return '';
+  if (FRIENDLY_DOMAINS[hostname]) return FRIENDLY_DOMAINS[hostname];
+
+  if (hostname.endsWith('.substack.com') && hostname !== 'substack.com') {
+    return capitalize(hostname.replace('.substack.com', '')) + "'s Substack";
+  }
+  if (hostname.endsWith('.github.io')) {
+    return capitalize(hostname.replace('.github.io', '')) + ' (GitHub Pages)';
+  }
+
+  const clean = hostname
+    .replace(/^www\./, '')
+    .replace(/\.(co\.uk|co\.jp|com|org|net|io|co|ai|dev|app|so|me|xyz|info|us|uk)$/, '');
+
+  return clean.split('.').map(part => capitalize(part)).join(' ');
+}
+
+function capitalize(str) {
+  if (!str) return '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function stripTitleNoise(title) {
+  if (!title) return '';
+  title = title.replace(/^\(\d+\+?\)\s*/, '');
+  title = title.replace(/\s*\([\d,]+\+?\)\s*/g, ' ');
+  title = title.replace(/\s*[\-\u2010-\u2015]\s*[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}/g, '');
+  title = title.replace(/[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}/g, '');
+  title = title.replace(/\s+on X:\s*/, ': ');
+  title = title.replace(/\s*\/\s*X\s*$/, '');
+  return title.trim();
+}
+
+function cleanTitle(title, hostname) {
+  if (!title || !hostname) return title || '';
+
+  const friendly = friendlyDomain(hostname);
+  const domain = hostname.replace(/^www\./, '');
+  const seps = [' - ', ' | ', ' — ', ' · ', ' – '];
+
+  for (const sep of seps) {
+    const idx = title.lastIndexOf(sep);
+    if (idx === -1) continue;
+    const suffix = title.slice(idx + sep.length).trim();
+    const suffixLow = suffix.toLowerCase();
+    if (
+      suffixLow === domain.toLowerCase() ||
+      suffixLow === friendly.toLowerCase() ||
+      suffixLow === domain.replace(/\.\w+$/, '').toLowerCase() ||
+      domain.toLowerCase().includes(suffixLow) ||
+      friendly.toLowerCase().includes(suffixLow)
+    ) {
+      const cleaned = title.slice(0, idx).trim();
+      if (cleaned.length >= 5) return cleaned;
+    }
+  }
+  return title;
+}
+
+function smartTitle(title, url) {
+  if (!url) return title || '';
+  let pathname = '';
+  let hostname = '';
+  try {
+    const u = new URL(url);
+    pathname = u.pathname;
+    hostname = u.hostname;
+  } catch {
+    return title || '';
+  }
+
+  const titleIsUrl = !title || title === url || title.startsWith(hostname) || title.startsWith('http');
+
+  if ((hostname === 'x.com' || hostname === 'twitter.com' || hostname === 'www.x.com') && pathname.includes('/status/')) {
+    const username = pathname.split('/')[1];
+    if (username) return titleIsUrl ? `Post by @${username}` : title;
+  }
+
+  if (hostname === 'github.com' || hostname === 'www.github.com') {
+    const parts = pathname.split('/').filter(Boolean);
+    if (parts.length >= 2) {
+      const [owner, repo, ...rest] = parts;
+      if (rest[0] === 'issues' && rest[1]) return `${owner}/${repo} Issue #${rest[1]}`;
+      if (rest[0] === 'pull' && rest[1]) return `${owner}/${repo} PR #${rest[1]}`;
+      if (rest[0] === 'blob' || rest[0] === 'tree') return `${owner}/${repo} — ${rest.slice(2).join('/')}`;
+      if (titleIsUrl) return `${owner}/${repo}`;
+    }
+  }
+
+  if ((hostname === 'www.youtube.com' || hostname === 'youtube.com') && pathname === '/watch') {
+    if (titleIsUrl) return 'YouTube Video';
+  }
+
+  if ((hostname === 'www.reddit.com' || hostname === 'reddit.com' || hostname === 'old.reddit.com') && pathname.includes('/comments/')) {
+    const parts = pathname.split('/').filter(Boolean);
+    const subIdx = parts.indexOf('r');
+    if (subIdx !== -1 && parts[subIdx + 1] && titleIsUrl) {
+      return `r/${parts[subIdx + 1]} post`;
+    }
+  }
+
+  return title || url;
+}
+
+// Test exposure
+globalThis.friendlyDomain = friendlyDomain;
+globalThis.stripTitleNoise = stripTitleNoise;
+globalThis.cleanTitle = cleanTitle;
+globalThis.smartTitle = smartTitle;
+globalThis.capitalize = capitalize;
+
+const ICONS = {
+  tabs: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18" /></svg>`,
+  close: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>`,
+  archive: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true"><path d="M845.312 0.512H32.512v1022.976h958.976v-876.8L845.312 0.512z m-172.864 62.976v256H351.488v-256h320.96zM287.488 960.512V605.76l29.184-29.248h390.656l29.184 29.248v354.752H287.488z m640 0h-126.976V585.152L727.424 512H296.576L223.488 585.152v375.36H96.512V63.488h190.976v320.448h449.024V63.488h79.68l111.296 112.32v784.704z m-384-832h65.984v128H543.488v-128z" /></svg>`,
+  focus: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /></svg>`,
+  move: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 6.75h12m-12 5.25h12m-12 5.25h12M4.5 6.75h.008v.008H4.5V6.75Zm0 5.25h.008v.008H4.5V12Zm0 5.25h.008v.008H4.5v-.008Z" /></svg>`,
+  pin: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none" aria-hidden="true"><path d="M648.728381 130.779429a73.142857 73.142857 0 0 1 22.674286 15.433142l191.561143 191.756191a73.142857 73.142857 0 0 1-22.137905 118.564571l-67.876572 30.061715-127.341714 127.488-10.093714 140.239238a73.142857 73.142857 0 0 1-124.684191 46.445714l-123.66019-123.782095-210.724572 211.699809-51.833904-51.614476 210.846476-211.821714-127.926857-128.024381a73.142857 73.142857 0 0 1 46.299428-124.635429l144.237715-10.776381 125.074285-125.220571 29.379048-67.779048a73.142857 73.142857 0 0 1 96.207238-38.034285z m-29.086476 67.120761l-34.913524 80.530286-154.087619 154.331429-171.398095 12.751238 303.323428 303.542857 12.044191-167.399619 156.233143-156.428191 80.384-35.59619-191.585524-191.73181z" fill="currentColor" /></svg>`,
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z" /></svg>`,
+};
diff --git a/extension/ui-helpers.test.js b/extension/ui-helpers.test.js
new file mode 100644
index 0000000..8e35aab
--- /dev/null
+++ b/extension/ui-helpers.test.js
@@ -0,0 +1,262 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+// Mock globals needed at module load time
+globalThis.TabHarborI18n = {};
+
+// Prevent top-level DOM code from throwing
+globalThis.document = {
+  addEventListener: () => {},
+  createElement: () => ({ style: {} }),
+  getElementById: () => null,
+};
+globalThis.window = globalThis;
+
+require('./ui-helpers.js');
+
+const {
+  friendlyDomain,
+  stripTitleNoise,
+  cleanTitle,
+  smartTitle,
+  capitalize,
+} = globalThis;
+
+// ---- capitalize ----
+
+test('capitalize uppercases first letter', () => {
+  assert.equal(capitalize('github'), 'Github');
+  assert.equal(capitalize('hello world'), 'Hello world');
+});
+
+test('capitalize handles empty string', () => {
+  assert.equal(capitalize(''), '');
+});
+
+test('capitalize handles null/undefined', () => {
+  assert.equal(capitalize(null), '');
+  assert.equal(capitalize(undefined), '');
+});
+
+// ---- friendlyDomain ----
+
+test('friendlyDomain returns friendly name for known domains', () => {
+  assert.equal(friendlyDomain('github.com'), 'GitHub');
+  assert.equal(friendlyDomain('www.github.com'), 'GitHub');
+  assert.equal(friendlyDomain('youtube.com'), 'YouTube');
+  assert.equal(friendlyDomain('mail.google.com'), 'Gmail');
+  assert.equal(friendlyDomain('developer.mozilla.org'), 'MDN');
+  assert.equal(friendlyDomain('chatgpt.com'), 'ChatGPT');
+  assert.equal(friendlyDomain('claude.ai'), 'Claude');
+  assert.equal(friendlyDomain('news.ycombinator.com'), 'Hacker News');
+});
+
+test('friendlyDomain handles substack subdomains', () => {
+  assert.equal(friendlyDomain('example.substack.com'), "Example's Substack");
+});
+
+test('friendlyDomain handles github.io pages', () => {
+  assert.equal(friendlyDomain('myproject.github.io'), 'Myproject (GitHub Pages)');
+});
+
+test('friendlyDomain strips www and TLD then capitalizes unknown domains', () => {
+  assert.equal(friendlyDomain('www.example.org'), 'Example');
+  assert.equal(friendlyDomain('mail.somecompany.co.uk'), 'Mail Somecompany');
+});
+
+test('friendlyDomain capitalizes multi-part unknown domains', () => {
+  assert.equal(friendlyDomain('api.internal.example.com'), 'Api Internal Example');
+});
+
+test('friendlyDomain handles empty/null input', () => {
+  assert.equal(friendlyDomain(''), '');
+  assert.equal(friendlyDomain(null), '');
+  assert.equal(friendlyDomain(undefined), '');
+});
+
+test('friendlyDomain handles local-files special domain', () => {
+  assert.equal(friendlyDomain('local-files'), 'Local Files');
+});
+
+// ---- stripTitleNoise ----
+
+test('stripTitleNoise removes notification count prefix', () => {
+  assert.equal(stripTitleNoise('(3) GitHub'), 'GitHub');
+  assert.equal(stripTitleNoise('(99+) Messages'), 'Messages');
+});
+
+test('stripTitleNoise removes inline notification counts', () => {
+  assert.equal(stripTitleNoise('Inbox (5+) new'), 'Inbox new');
+  assert.equal(stripTitleNoise('Title (1,234)'), 'Title');
+});
+
+test('stripTitleNoise removes email noise after dash separators', () => {
+  assert.equal(stripTitleNoise('Check - user@example.com'), 'Check');
+  assert.equal(stripTitleNoise('Inbox – admin@site.org mail'), 'Inbox mail');
+});
+
+test('stripTitleNoise removes bare email addresses', () => {
+  assert.equal(stripTitleNoise('Contact user@example.com here'), 'Contact  here');
+});
+
+test('stripTitleNoise handles on X: replacement', () => {
+  assert.equal(stripTitleNoise('Post on X: hello world'), 'Post: hello world');
+});
+
+test('stripTitleNoise strips trailing / X', () => {
+  assert.equal(stripTitleNoise('Share / X'), 'Share');
+  assert.equal(stripTitleNoise('Article  / X'), 'Article');
+});
+
+test('stripTitleNoise returns clean title unchanged', () => {
+  assert.equal(stripTitleNoise('Clean Title'), 'Clean Title');
+  assert.equal(stripTitleNoise('No noise here'), 'No noise here');
+});
+
+test('stripTitleNoise trims whitespace', () => {
+  assert.equal(stripTitleNoise('  Title  '), 'Title');
+});
+
+test('stripTitleNoise handles empty string', () => {
+  assert.equal(stripTitleNoise(''), '');
+});
+
+// ---- cleanTitle ----
+
+test('cleanTitle strips suffix when it matches exact domain', () => {
+  assert.equal(cleanTitle('My Page - example.com', 'example.com'), 'My Page');
+  assert.equal(cleanTitle('Dashboard | example.com', 'www.example.com'), 'Dashboard');
+});
+
+test('cleanTitle strips suffix when it matches friendly domain (capitalized)', () => {
+  // friendlyDomain('example.com') → 'Example'. suffix 'Example' matches.
+  assert.equal(cleanTitle('Dashboard | Example', 'example.com'), 'Dashboard');
+});
+
+test('cleanTitle strips suffix when it matches domain without TLD', () => {
+  // friendlyDomain('example.com') → 'Example'. suffix 'example' matches domain without .com
+  // Title must be >= 5 chars after stripping
+  assert.equal(cleanTitle('Welcome Page — example', 'example.com'), 'Welcome Page');
+});
+
+test('cleanTitle strips suffix when domain includes suffix', () => {
+  assert.equal(cleanTitle('API Reference - api', 'api.example.com'), 'API Reference');
+});
+
+test('cleanTitle keeps title when suffix does not match domain', () => {
+  assert.equal(cleanTitle('GitHub - awesome-org', 'github.com'), 'GitHub - awesome-org');
+  assert.equal(cleanTitle('Random Text | unrelated site', 'example.com'), 'Random Text | unrelated site');
+});
+
+test('cleanTitle keeps short cleaned titles (under 5 chars)', () => {
+  assert.equal(cleanTitle('AB - example.com', 'example.com'), 'AB - example.com');
+});
+
+test('cleanTitle handles all separator types', () => {
+  assert.equal(cleanTitle('Title · example.com', 'example.com'), 'Title');
+  assert.equal(cleanTitle('Title – example.com', 'example.com'), 'Title');
+  assert.equal(cleanTitle('Title — example.com', 'example.com'), 'Title');
+});
+
+test('cleanTitle strips www from domain before matching', () => {
+  assert.equal(cleanTitle('Page - www.example.com', 'www.example.com'), 'Page - www.example.com');
+});
+
+test('cleanTitle handles empty title or hostname', () => {
+  assert.equal(cleanTitle('', 'example.com'), '');
+  assert.equal(cleanTitle('Title', ''), 'Title');
+});
+
+test('cleanTitle handles separator with domain-friendly-includes match', () => {
+  // friendlyDomain('example.com') returns 'Example' (stripped TLD + capitalized)
+  // 'example.com'.toLowerCase().includes('example') → true ✓
+  assert.equal(cleanTitle('Site Name - example', 'example.com'), 'Site Name');
+});
+
+test('cleanTitle handles known domain friendly names in suffix matching', () => {
+  // friendlyDomain('github.com') returns 'GitHub'
+  assert.equal(cleanTitle('My Repos - GitHub', 'github.com'), 'My Repos');
+  assert.equal(cleanTitle('Dashboard | GitHub', 'github.com'), 'Dashboard');
+});
+
+// ---- smartTitle ----
+
+test('smartTitle returns YouTube Video for youtube watch pages with URL-like title', () => {
+  assert.equal(smartTitle('https://www.youtube.com/watch?v=abc', 'https://www.youtube.com/watch?v=abc'), 'YouTube Video');
+  assert.equal(smartTitle('', 'https://www.youtube.com/watch?v=abc'), 'YouTube Video');
+});
+
+test('smartTitle returns original title for youtube watch with meaningful title', () => {
+  assert.equal(smartTitle('Cool Video', 'https://www.youtube.com/watch?v=abc'), 'Cool Video');
+});
+
+test('smartTitle returns Post by @username for x.com status URLs with URL-like title', () => {
+  assert.equal(smartTitle('https://x.com/jack/status/123', 'https://x.com/jack/status/123'), 'Post by @jack');
+  assert.equal(smartTitle('', 'https://twitter.com/elonmusk/status/456'), 'Post by @elonmusk');
+});
+
+test('smartTitle returns original title for x.com status with meaningful title', () => {
+  assert.equal(smartTitle('Interesting take', 'https://x.com/user/status/789'), 'Interesting take');
+});
+
+test('smartTitle returns GitHub issue title for issue URLs with URL-like title', () => {
+  assert.equal(
+    smartTitle('https://github.com/owner/repo/issues/42', 'https://github.com/owner/repo/issues/42'),
+    'owner/repo Issue #42'
+  );
+});
+
+test('smartTitle returns GitHub PR title for PR URLs with URL-like title', () => {
+  assert.equal(
+    smartTitle('', 'https://github.com/owner/repo/pull/100'),
+    'owner/repo PR #100'
+  );
+});
+
+test('smartTitle returns URL as title when original title is empty', () => {
+  assert.equal(smartTitle('', 'https://www.example.com/path'), 'https://www.example.com/path');
+});
+
+test('smartTitle returns title when it is not URL-like', () => {
+  assert.equal(smartTitle('My Page Title', 'https://www.example.com'), 'My Page Title');
+});
+
+test('smartTitle handles empty URL', () => {
+  assert.equal(smartTitle('Title', ''), 'Title');
+  assert.equal(smartTitle('', ''), '');
+});
+
+test('smartTitle handles invalid URL gracefully', () => {
+  assert.equal(smartTitle('', 'not-a-url'), '');
+});
+
+test('smartTitle does not treat youtube non-watch pages as video', () => {
+  assert.equal(
+    smartTitle('', 'https://www.youtube.com/results?search_query=foo'),
+    'https://www.youtube.com/results?search_query=foo'
+  );
+});
+
+test('smartTitle does not mangle title that starts with hostname but is actual text', () => {
+  // titleIsUrl checks title.startsWith(hostname) — but the real title is text
+  // e.g. "github.com is great" with url "https://github.com"
+  const label = smartTitle('github.com is great', 'https://github.com');
+  assert.equal(label, 'github.com is great');
+});
+
+test('smartTitle handles Reddit post URLs', () => {
+  assert.equal(
+    smartTitle('https://www.reddit.com/r/programming/comments/abc/title', 'https://www.reddit.com/r/programming/comments/abc/title'),
+    'r/programming post'
+  );
+});
+
+test('capitalize handles empty string', () => {
+  assert.equal(capitalize(''), '');
+});
+
+test('capitalize handles single character', () => {
+  assert.equal(capitalize('a'), 'A');
+});
\ No newline at end of file
diff --git a/extension/ui-regression.test.js b/extension/ui-regression.test.js
new file mode 100644
index 0000000..7a70d54
--- /dev/null
+++ b/extension/ui-regression.test.js
@@ -0,0 +1,1145 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const html = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8');
+const appEntryJs = fs.readFileSync(path.join(__dirname, 'app.js'), 'utf8');
+const backgroundJs = fs.readFileSync(path.join(__dirname, 'background.js'), 'utf8');
+const chromeImportJs = fs.readFileSync(path.join(__dirname, 'chrome-tab-groups-import.js'), 'utf8');
+const runtimeJs = fs.readFileSync(path.join(__dirname, 'dashboard-runtime.js'), 'utf8');
+const themeJs = fs.readFileSync(path.join(__dirname, 'theme-controls.js'), 'utf8');
+const drawerJs = fs.readFileSync(path.join(__dirname, 'drawer-manager.js'), 'utf8');
+const helperJs = fs.readFileSync(path.join(__dirname, 'ui-helpers.js'), 'utf8');
+const tabSessionsJs = fs.existsSync(path.join(__dirname, 'tab-sessions.js'))
+  ? fs.readFileSync(path.join(__dirname, 'tab-sessions.js'), 'utf8')
+  : '';
+const sessionManagerJs = fs.existsSync(path.join(__dirname, 'session-manager.js'))
+  ? fs.readFileSync(path.join(__dirname, 'session-manager.js'), 'utf8')
+  : '';
+const popupJs = fs.readFileSync(path.join(__dirname, 'popup', 'popup.js'), 'utf8');
+const popupHtml = fs.readFileSync(path.join(__dirname, 'popup', 'popup.html'), 'utf8');
+const configJs = fs.readFileSync(path.join(__dirname, 'config.js'), 'utf8');
+const configLoaderJs = fs.readFileSync(path.join(__dirname, 'config-loader.js'), 'utf8');
+const appJs = [appEntryJs, runtimeJs, themeJs, drawerJs, helperJs].join('\n');
+
+test('saved tabs page scripts load before dashboard runtime and expose a top page selector', () => {
+  assert.match(html, /id="workspaceTopNav"/);
+  assert.match(html, /id="homePage"/);
+  assert.match(html, /id="savedTabsPage"/);
+  assert.match(runtimeJs, /id="workspacePageSwitch"/);
+  assert.match(runtimeJs, /function renderWorkspacePageSwitch\(currentPage = 'home'\)/);
+  assert.match(runtimeJs, /data-action="switch-workspace-page"[\s\S]*data-page="home"/);
+  assert.match(runtimeJs, /data-action="switch-workspace-page"[\s\S]*data-page="saved-tabs"/);
+  assert.match(runtimeJs, /function renderWorkspaceThemeTools\(\) \{\s*const languagePreference = runtimeGetLanguagePreference \? runtimeGetLanguagePreference\(\) : 'auto';/);
+  assert.match(runtimeJs, /renderWorkspaceThemeTools\(\)/);
+  assert.match(runtimeJs, /syncWorkspaceTopNavMarkup/);
+  assert.match(runtimeJs, /id="themeMenuTrigger"/);
+  assert.match(sessionManagerJs, /renderSavedTabsNavArea/);
+  assert.match(sessionManagerJs, /saved-session-nav-button/);
+  assert.match(sessionManagerJs, /managerGetGroupIcon/);
+  assert.match(html, /<script src="tab-url-utils\.js"><\/script>[\s\S]*<script src="tab-sessions\.js"><\/script>[\s\S]*<script src="session-manager\.js"><\/script>[\s\S]*<script src="dashboard-runtime\.js"><\/script>/);
+});
+
+test('workspace top selector stays mounted when open tabs become empty', () => {
+  assert.match(runtimeJs, /function renderGroupNavArea\(groups\)/);
+  assert.match(runtimeJs, /renderWorkspacePageSwitch\('home'\)/);
+  assert.match(runtimeJs, /renderWorkspaceThemeTools\(\)/);
+  assert.match(runtimeJs, /function renderOpenTabsSummary\(realTabs = getRealTabs\(\)\) \{[\s\S]*syncWorkspaceTopNavMarkup\(renderGroupNavArea\(domainGroups\), true\);[\s\S]*syncWorkspaceTopNavMarkup\(renderGroupNavArea\(\[\]\), true\);/);
+  assert.match(runtimeJs, /function renderOpenTabsArea\(realTabs = getRealTabs\(\)\) \{[\s\S]*syncWorkspaceTopNavMarkup\(renderGroupNavArea\(domainGroups\), true\);[\s\S]*syncWorkspaceTopNavMarkup\(renderGroupNavArea\(\[\]\), true\);/);
+  assert.doesNotMatch(runtimeJs, /renderOpenTabsSummary[\s\S]*syncWorkspaceTopNavMarkup\('', false\)/);
+  assert.doesNotMatch(runtimeJs, /renderOpenTabsArea[\s\S]*syncWorkspaceTopNavMarkup\('', false\)/);
+});
+
+test('saved tabs page keeps session management while home owns session save actions', () => {
+  assert.match(html, /id="savedSessionsList"/);
+  assert.doesNotMatch(html, /class="saved-tabs-page-title"/);
+  assert.doesNotMatch(html, /Keep a window or a handpicked set of tabs, then bring it back when the desk is ready\./);
+  assert.match(runtimeJs, /data-action="save-current-window-session"/);
+  assert.match(runtimeJs, /id="tabSessionPicker"/);
+  assert.match(runtimeJs, /data-action="select-session-picker-mode"[\s\S]*data-session-picker-mode="existing"/);
+  assert.match(runtimeJs, /data-action="change-session-picker-new-name"/);
+  assert.match(runtimeJs, /sessionPickerNewSessionNamePlaceholder/);
+  assert.match(runtimeJs, /data-action="change-session-picker-target"/);
+  assert.match(runtimeJs, /data-action="save-selected-session-tabs"/);
+  assert.match(runtimeJs, /class="section-icon-action"/);
+  assert.match(runtimeJs, /class="section-icon-action section-icon-action-close"/);
+  assert.match(runtimeJs, /data-tooltip="\$\{runtimeT \? runtimeT\('saveSessionButton'\) : 'Save session'\}"/);
+  assert.doesNotMatch(runtimeJs, /section-summary/);
+  assert.match(runtimeJs, /data-action="save-domain-session"/);
+  assert.match(runtimeJs, /data-action="save-single-tab-session"/);
+  assert.match(sessionManagerJs, /const SAVED_TAB_SESSION_ORDER_KEY = 'savedTabSessionOrder'/);
+  assert.match(sessionManagerJs, /runtime\.syncWorkspaceTopNavMarkup\(renderSavedTabsNavArea\(sessions\), true\)/);
+  assert.match(sessionManagerJs, /data-action="rename-saved-session"/);
+  assert.match(sessionManagerJs, /data-action="submit-saved-session-rename"/);
+  assert.match(sessionManagerJs, /managerRenameSavedTabSession/);
+  assert.match(sessionManagerJs, /managerUpdateSavedTabSessionTabs/);
+  assert.doesNotMatch(sessionManagerJs, /saved-session-group-chip/);
+  assert.match(sessionManagerJs, /data-action="restore-tab-session"/);
+  assert.match(sessionManagerJs, /class="group-action-icon saved-session-restore"/);
+  assert.match(sessionManagerJs, /data-action="restore-saved-session-tab"/);
+  assert.match(sessionManagerJs, /data-action="delete-tab-session"/);
+  assert.match(sessionManagerJs, /data-action="delete-saved-session-tab"/);
+  assert.doesNotMatch(sessionManagerJs, /saved-session-tab-url/);
+});
+
+test('saved-session picker scopes visible tabs to the selected entry point', () => {
+  assert.match(runtimeJs, /async function openTabSessionPicker\(\{\s*source = 'current-window',\s*initialTabIds = null,\s*scopeTabIds = null,\s*\} = \{\}\)/);
+  assert.match(runtimeJs, /const scopedGroups = getScopedTabSessionPickerGroups\(context\.groups, scopeTabIds\);/);
+  assert.match(runtimeJs, /const allIds = getTabSessionPickerAllIds\(scopedGroups\);/);
+  assert.match(runtimeJs, /groups: scopedGroups,/);
+  assert.match(runtimeJs, /const newSessionName = String\(tabSessionPickerState\.newSessionName \|\| ''\)\.trim\(\);/);
+  assert.match(runtimeJs, /saveSelectedTabSession\(\s*selectedIds,\s*tabSessionPickerState\.source \|\| 'selected',\s*newSessionName\s*\)/);
+  assert.match(runtimeJs, /if \(action === 'save-current-window-session'\) \{[\s\S]{0,280}openTabSessionPicker\(\{ source: 'current-window' \}\)/);
+  assert.match(runtimeJs, /if \(action === 'save-single-tab-session'\) \{[\s\S]{0,360}openTabSessionPicker\(\{\s*source: 'single-tab',\s*initialTabIds: \[tabId\],\s*scopeTabIds: \[tabId\],\s*\}\)/);
+  assert.match(runtimeJs, /if \(action === 'save-domain-session'\) \{[\s\S]{0,720}openTabSessionPicker\(\{\s*source: 'group',\s*initialTabIds: tabIds,\s*scopeTabIds: tabIds,\s*\}\)/);
+  assert.doesNotMatch(runtimeJs, /saveSelectedTabSession\(\[tabId\], 'single-tab'\)/);
+  assert.doesNotMatch(runtimeJs, /saveSelectedTabSession\(tabIds, 'group'\)/);
+});
+
+test('home and saved section headers share a fixed title column and top nav stays single-row', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /#openTabsSection \.section-header h2,\s*\.saved-sessions-section \.section-header h2 \{[\s\S]*width:\s*13ch;/);
+  assert.match(css, /#openTabsSection \.section-count,\s*\.saved-sessions-section \.section-count \{[\s\S]*width:\s*96px;/);
+  assert.match(css, /\.group-nav-wide \{[\s\S]*min-height:\s*40px;[\s\S]*flex-wrap:\s*nowrap;[\s\S]*align-items:\s*center;/);
+  assert.match(css, /\.group-nav-list \{[\s\S]*flex-wrap:\s*nowrap;/);
+  assert.match(css, /\.group-nav-list \{[\s\S]*min-height:\s*40px;/);
+  assert.match(css, /\.group-nav-list \{[\s\S]*overflow-x:\s*auto;/);
+});
+
+test('group close control is icon-only and tab rows expose session save actions', () => {
+  assert.match(runtimeJs, /class="group-action-icon group-action-close"/);
+  assert.match(runtimeJs, /data-action="close-domain-tabs"[\s\S]*aria-label="/);
+  assert.match(runtimeJs, /data-action="close-domain-tabs"[\s\S]*data-tooltip="/);
+  assert.match(runtimeJs, /class="mission-actions"/);
+  assert.match(runtimeJs, /class="chip-action chip-session-save"/);
+  assert.match(runtimeJs, /class="chip-action chip-session-save"[\s\S]*data-tooltip="/);
+  assert.match(helperJs, /archive: `<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true"><path d="M845\.312 0\.512H32\.512v1022\.976h958\.976v-876\.8L845\.312 0\.512z/);
+});
+
+test('desk settings separates appearance and feature controls', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(runtimeJs, /class="theme-menu-tabs" role="tablist"/);
+  assert.match(runtimeJs, /data-theme-menu-tab="appearance"[\s\S]*data-theme-menu-tab="features"/);
+  assert.match(runtimeJs, /id="themeMenuAppearancePanel"[\s\S]*id="themeModeOptions"[\s\S]*id="themeOptions"/);
+  assert.match(runtimeJs, /id="themeMenuFeaturesPanel"[\s\S]*data-action="toggle-chrome-tab-groups"[\s\S]*data-action="toggle-hitokoto"[\s\S]*data-action="toggle-sleep-control"[\s\S]*data-action="toggle-close-duplicate-new-tabs"/);
+  assert.match(runtimeJs, /if \(action === 'select-theme-menu-tab'\)/);
+  assert.match(themeJs, /let themeMenuActiveTab = 'appearance';/);
+  assert.match(themeJs, /querySelectorAll\('\[data-theme-menu-panel\]'\)/);
+  assert.match(css, /\.theme-menu-tab \{[\s\S]*border:\s*none;[\s\S]*border-radius:\s*0;/);
+});
+
+test('manual sleep control places per-tab moon action first', () => {
+  assert.match(runtimeJs, /function buildOverflowChips[\s\S]*<div class="chip-actions">\s*\$\{sleepControlEnabled && !tab\.active \? `\s*<button class="chip-action chip-discard"[\s\S]*<button class="chip-action chip-session-save"/);
+  assert.match(runtimeJs, /function renderDomainCard[\s\S]*<div class="chip-actions">\s*\$\{sleepControlEnabled && !tab\.active \? `<button class="chip-action chip-discard"[\s\S]*<button class="chip-action chip-session-save"/);
+});
+
+test('icon-only actions use themed tooltips instead of native title hovers', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /\.chip-action\[data-tooltip\]::after,/);
+  assert.match(css, /content: attr\(data-tooltip\);/);
+  assert.doesNotMatch(runtimeJs, /save-current-window-session"[^>]* title="/);
+  assert.doesNotMatch(runtimeJs, /save-domain-session"[^>]* title="/);
+  assert.doesNotMatch(runtimeJs, /save-single-tab-session"[^>]* title="/);
+});
+
+test('saved tabs top nav supports session reordering and card jump highlighting', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(sessionManagerJs, /normalizeSavedTabSessionOrder/);
+  assert.match(sessionManagerJs, /applySavedTabSessionOrder/);
+  assert.match(sessionManagerJs, /buildSavedTabSessionOrder/);
+  assert.match(sessionManagerJs, /createNewSession/);
+  assert.match(sessionManagerJs, /newSessionPlacement/);
+  assert.match(sessionManagerJs, /insertBeforeSessionId/);
+  assert.match(sessionManagerJs, /lastResolvedDropTarget/);
+  assert.match(sessionManagerJs, /detachSavedSessionTabToNewSession/);
+  assert.match(sessionManagerJs, /data-action="jump-to-saved-session"/);
+  assert.match(sessionManagerJs, /savedSessionDragPlaceholderEl/);
+  assert.match(sessionManagerJs, /savedSessionNewSessionSlotEl/);
+  assert.match(sessionManagerJs, /saveSavedTabSessionOrder/);
+  assert.match(sessionManagerJs, /const SAVED_TAB_SESSION_COLLAPSED_KEY = 'savedTabSessionCollapsedState'/);
+  assert.match(css, /\.saved-session-card\.group-nav-target/);
+  assert.match(sessionManagerJs, /savedSessionTabDragState/);
+  assert.match(sessionManagerJs, /saved-session-reorder-handle/);
+  assert.match(sessionManagerJs, /data-action="toggle-saved-session-settings"/);
+  assert.match(sessionManagerJs, /data-action="change-saved-session-restore-mode"/);
+  assert.match(sessionManagerJs, /data-action="change-saved-session-nav-display-mode"/);
+  assert.match(sessionManagerJs, /saved-session-settings-trigger/);
+  assert.match(sessionManagerJs, /saved-session-settings-menu/);
+  assert.match(sessionManagerJs, /data-action="toggle-saved-session-collapse"/);
+  assert.match(sessionManagerJs, /<select[^>]+data-action="change-saved-session-restore-mode"/);
+  assert.match(sessionManagerJs, /<select[^>]+data-action="change-saved-session-nav-display-mode"/);
+  assert.match(css, /\.saved-session-tab-row/);
+  assert.match(css, /\.saved-session-tab-placeholder/);
+  assert.match(css, /\.saved-session-new-slot/);
+  assert.match(css, /\.saved-session-new-slot-line/);
+  assert.match(css, /\.saved-session-settings-trigger/);
+  assert.match(css, /\.saved-session-settings-menu/);
+  assert.match(css, /\.saved-session-collapse/);
+  assert.match(css, /\.saved-session-card\.is-collapsed/);
+  assert.match(css, /\.saved-session-nav-button\.is-name-mode/);
+});
+
+test('tab sessions close selected tabs by id after storage save instead of fuzzy url matching', () => {
+  assert.match(tabSessionsJs, /const SAVED_TAB_SESSIONS_KEY = 'savedTabSessions'/);
+  assert.match(runtimeJs, /await saveTabsAsSession\(/);
+  assert.match(runtimeJs, /chrome\.tabs\.remove\(tabIdsToClose\)/);
+  assert.doesNotMatch(runtimeJs, /closeTabsByUrls\(selected/);
+});
+
+test('new tab dashboard scopes visible open tabs to its own browser window', () => {
+  assert.match(runtimeJs, /let currentDashboardWindowId = null;/);
+  assert.match(runtimeJs, /let allOpenTabIds = \[\];/);
+  assert.match(runtimeJs, /const visibleTabs = currentWindowId == null\s*\?\s*tabs\s*:\s*tabs\.filter\(t => t\.windowId === currentWindowId\);/);
+  assert.match(runtimeJs, /openTabs = visibleTabs\.map\(t =>/);
+  assert.match(runtimeJs, /function getOpenTabIdsForSessionPruning\(\)/);
+  assert.match(runtimeJs, /async function queryTabsForDashboardWindow\(\) \{[\s\S]*chrome\.tabs\.query\(\{\s*windowId: currentWindowId\s*\}\)/);
+  assert.doesNotMatch(runtimeJs, /if \(currentDashboardWindowId != null\) return currentDashboardWindowId;/);
+  assert.match(runtimeJs, /await loadSessionGroups\(getOpenTabIdsForSessionPruning\(\)\)/);
+  assert.match(runtimeJs, /async function closeTabsByUrls\(urls\) \{[\s\S]*const allTabs = await queryTabsForDashboardWindow\(\);/);
+  assert.match(runtimeJs, /async function closeTabsExact\(urls\) \{[\s\S]*const allTabs = await queryTabsForDashboardWindow\(\);/);
+  assert.match(runtimeJs, /async function closeDuplicateTabs\(urls, keepOne = true\) \{[\s\S]*const allTabs = await queryTabsForDashboardWindow\(\);/);
+  assert.doesNotMatch(runtimeJs, /await loadSessionGroups\(openTabs\.map\(tab => tab\.id\)\)/);
+  assert.doesNotMatch(runtimeJs, /await loadSessionGroups\(realTabs\.map\(tab => tab\.id\)\)/);
+});
+
+test('tab chips no longer render move-to-group controls', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.doesNotMatch(runtimeJs, /function buildMoveMenu\(tab\)/);
+  assert.doesNotMatch(runtimeJs, /toggle-move-menu/);
+  assert.doesNotMatch(runtimeJs, /move-tab-to-group/);
+  assert.doesNotMatch(runtimeJs, /move-tab-to-new-group/);
+  assert.doesNotMatch(runtimeJs, /move-tab-to-original/);
+  assert.doesNotMatch(css, /\.chip-move-menu/);
+  assert.doesNotMatch(css, /\.chip-move-wrap/);
+});
+
+test('dragging uses the original group icon as a fixed positioned element', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(
+    css,
+    /\.group-nav-button\.is-dragging\s*\{[\s\S]*position:\s*fixed;[\s\S]*pointer-events:\s*none;/
+  );
+});
+
+test('pin toggle is removed from the group nav controls', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.doesNotMatch(appJs, /headerPinToggle/);
+  assert.doesNotMatch(css, /\.group-pin-toggle/);
+});
+
+test('group nav icons disable native image dragging', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(appJs, /class="group-nav-button"[\s\S]*draggable="false"/);
+  assert.match(appJs, /class="group-nav-icon"[\s\S]*draggable="false"/);
+  assert.match(css, /\.group-nav-button,\s*\.group-nav-button \*\s*\{[\s\S]*-webkit-user-drag:\s*none;/);
+});
+
+test('icon fallback handling avoids inline event handlers', () => {
+  assert.doesNotMatch(appJs, /onerror=/);
+  assert.match(appJs, /data-fallback-src=/);
+  assert.match(helperJs, /document\.addEventListener\('error', event =>/);
+  assert.match(helperJs, /handleImageFallbackError/);
+  assert.match(helperJs, /setImageFallbackAttributes/);
+});
+
+test('toast helper tolerates missing optional action button node', () => {
+  assert.match(helperJs, /if \(!toast \|\| !toastText\) return;/);
+  assert.match(helperJs, /if \(action && toastAction\)/);
+  assert.match(helperJs, /\} else if \(toastAction\) \{/);
+});
+
+test('popup group nav keeps visible fallback labels and popup-local image fallback handling', () => {
+  assert.match(popupJs, /class="group-nav-fallback"/);
+  assert.match(popupJs, /data-fallback-src=/);
+  assert.match(popupJs, /document\.addEventListener\('error', handlePopupGroupNavImageError, true\)/);
+});
+
+test('popup auto-refreshes when tabs and local storage change', () => {
+  assert.match(popupJs, /chrome\.tabs\?\.onCreated\?\.addListener\(schedule\)/);
+  assert.match(popupJs, /chrome\.tabs\?\.onMoved\?\.addListener\(schedule\)/);
+  assert.match(popupJs, /chrome\.tabGroups\?\.onUpdated\?\.addListener\(schedule\)/);
+  assert.match(popupJs, /chrome\.storage\?\.onChanged\?\.addListener\(handlePopupStorageChanged\)/);
+  assert.match(popupJs, /const POPUP_REFRESH_KEYS = new Set/);
+});
+
+test('popup opens tabs from other windows in the current window instead of focusing the old window', () => {
+  assert.match(popupJs, /targetTab\.windowId !== currentWindow\.id/);
+  assert.match(popupJs, /await chrome\.tabs\.create\(\{\s*windowId: currentWindow\.id,/);
+  assert.match(popupJs, /await openPopupTab\(tabId, actionEl\.dataset\.url \|\| ''\)/);
+});
+
+test('popup removes redundant shortcuts and open-tabs summary rows', () => {
+  assert.doesNotMatch(popupHtml, /id="popupShortcutsCount"/);
+  assert.doesNotMatch(popupHtml, /id="popupTabsCount"/);
+});
+
+test('popup follows dashboard tab-order storage and richer title shaping', () => {
+  assert.match(popupJs, /const GROUP_TAB_ORDER_KEY = 'groupTabOrder'/);
+  assert.match(popupJs, /popupState\.groupTabOrder/);
+  assert.match(popupJs, /function getOrderedUniqueTabsForGroup\(group\)/);
+  // smartTitle and cleanTitle are now shared via ui-helpers.js
+  assert.match(popupHtml, /<script src="\.\.\/ui-helpers\.js"><\/script>/);
+});
+
+test('manifest action keeps the popup entry wired to popup html', () => {
+  const manifest = fs.readFileSync(path.join(__dirname, 'manifest.json'), 'utf8');
+
+  assert.match(manifest, /"default_popup": "popup\/popup\.html"/);
+  assert.match(popupHtml, /<script src="popup\.js"><\/script>/);
+});
+
+test('theme controls expose popup helpers without dropping main theme runtime exports', () => {
+  assert.match(themeJs, /getResolvedThemeDefinition/);
+  assert.match(themeJs, /getSavedSessionNavDisplayMode/);
+  assert.match(themeJs, /getResolvedTone/);
+  assert.match(themeJs, /getSavedSessionRestoreMode/);
+  assert.match(themeJs, /loadThemePreferences/);
+  assert.match(themeJs, /getQuickShortcuts/);
+  assert.match(themeJs, /saveSavedSessionNavDisplayMode/);
+  assert.match(themeJs, /saveSavedSessionRestoreMode/);
+  assert.match(themeJs, /saveQuickShortcutOrder/);
+  assert.match(themeJs, /syncPopupTheme/);
+});
+
+test('index includes a back-to-top floating button', () => {
+  assert.match(html, /id="backToTopBtn"/);
+});
+
+test('index includes todo drawer trigger and overlay without saved-for-later trigger', () => {
+  assert.doesNotMatch(html, /id="deferredTrigger"/);
+  assert.match(html, /id="todoTrigger"/);
+  assert.match(html, /id="deferredOverlay"/);
+  assert.match(html, /id="headerSearchForm"/);
+  assert.match(html, /id="headerSearchInput"/);
+  assert.match(html, /class="header-title-row"/);
+  assert.match(html, /id="quickTabsSection"/);
+  assert.match(html, /id="quickTabsList"/);
+  assert.doesNotMatch(html, /Quick tabs/);
+  assert.doesNotMatch(html, /No custom background/);
+  assert.doesNotMatch(html, /deferredTriggerIconPath/);
+  assert.doesNotMatch(html, /id="deferredTriggerCount"/);
+  assert.doesNotMatch(html, /deferred-trigger-label/);
+});
+
+test('optional local config is loaded safely before app mount', () => {
+  assert.match(html, /<script src="config\.js"><\/script>/);
+  assert.match(html, /<script src="config-loader\.js"><\/script>/);
+  assert.doesNotMatch(html, /<script src="config\.local\.js"><\/script>/);
+  assert.match(configJs, /LOCAL_LANDING_PAGE_PATTERNS/);
+  assert.match(configJs, /LOCAL_CUSTOM_GROUPS/);
+  assert.match(configLoaderJs, /TabHarborConfigReady/);
+  assert.match(configLoaderJs, /script\.src = 'config\.local\.js'/);
+  assert.match(configLoaderJs, /script\.onerror = \(\) => resolve\(\)/);
+  assert.match(appEntryJs, /TabHarborConfigReady/);
+  assert.match(appEntryJs, /await appConfigReady/);
+});
+
+test('background keeps the toolbar badge empty', () => {
+  assert.match(backgroundJs, /await chrome\.action\.setBadgeText\(\{\s*text:\s*''\s*\}\)/);
+  assert.doesNotMatch(backgroundJs, /String\(count\)/);
+});
+
+test('manifest keeps only permissions required by the shipped runtime', () => {
+  const manifest = fs.readFileSync(path.join(__dirname, 'manifest.json'), 'utf8');
+
+  assert.match(manifest, /"tabs"/);
+  assert.match(manifest, /"storage"/);
+  assert.match(manifest, /"search"/);
+  assert.match(manifest, /"clipboardRead"/);
+  assert.doesNotMatch(manifest, /"activeTab"/);
+});
+
+test('root manifest mirrors the Edge unpacked entry points', () => {
+  const manifest = fs.readFileSync(path.join(__dirname, '..', 'manifest.json'), 'utf8');
+
+  assert.match(manifest, /"chrome_url_overrides": \{ "newtab": "extension\/index\.html" \}/);
+  assert.match(manifest, /"service_worker": "extension\/background\.js"/);
+  assert.match(manifest, /"default_popup": "extension\/popup\/popup\.html"/);
+});
+
+test('footer credits point to the repo and OO GitHub profile', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(
+    html,
+    /class="footer-credit"[\s\S]*href="https:\/\/github\.com\/V-IOLE-T\/tab-harbor"[\s\S]*>Tab Harbor<\/a> by <a class="footer-credit-link" href="https:\/\/github\.com\/V-IOLE-T"[\s\S]*>OO<\/a>/
+  );
+  assert.match(css, /\.footer-credit-link\s*\{/);
+  assert.match(css, /\.footer-credit-link:hover,\s*\.footer-credit-link:focus-visible\s*\{/);
+});
+
+test('group nav reorder animation uses FLIP-style transition for sibling icons', () => {
+  assert.match(appJs, /getBoundingClientRect\(\)/);
+  assert.match(appJs, /requestAnimationFrame/);
+  assert.match(appJs, /function animateNavButtonNode\(button, previousRect\)/);
+  assert.match(appJs, /Math\.hypot\(deltaX, deltaY\)/);
+  assert.match(appJs, /button\.style\.transform = `translate3d\(/);
+  assert.match(appJs, /cubic-bezier\(0\.22, 1, 0\.36, 1\)/);
+});
+
+test('group order state is always treated as a durable persisted order', () => {
+  assert.match(runtimeJs, /sessionOrder:\s*orderKeys,/);
+  assert.match(runtimeJs, /pinnedOrder:\s*orderKeys,/);
+  assert.match(runtimeJs, /pinEnabled:\s*false,/);
+});
+
+test('drag preview only reorders top icons and defers card refresh until drop', () => {
+  assert.match(appJs, /if \(options\.reorderCards !== false\)/);
+  assert.match(appJs, /applyLiveGroupOrder\(previewOrderKeys,\s*\{\s*reorderCards:\s*false/);
+  assert.match(appJs, /async function renderOpenTabsLayout\(\{ rebuildGroups = true, syncChrome = false, patchDom = false, changedGroupKeys = \[\] \} = \{\}\)/);
+  assert.match(appJs, /await renderOpenTabsLayout\(\{[\s\S]*rebuildGroups: true,[\s\S]*syncChrome: true,[\s\S]*patchDom: true,[\s\S]*changedGroupKeys:/);
+});
+
+test('group drag commit reorders cards in place instead of refreshing the whole dashboard', () => {
+  assert.match(appJs, /function animateMissionCards\(missionsEl, previousRects\)/);
+  assert.match(appJs, /animateMissionCards\(missionsEl,\s*previousMissionRects\)/);
+  assert.match(appJs, /const nextGroupOrder = groupOrderState\.sessionOrder\?\.slice\(\) \|\| domainGroups\.map\(group => String\(group\.domain\)\)/);
+  assert.match(appJs, /document\.addEventListener\('pointerup', async \(\) => \{[\s\S]*const moved = dragStartPoint\?\.moved;[\s\S]*const nextGroupOrder = groupOrderState\.sessionOrder\?\.slice\(\) \|\| domainGroups\.map\(group => String\(group\.domain\)\);[\s\S]*clearGroupDragState\(\);[\s\S]*if \(moved\) \{[\s\S]*applyLiveGroupOrder\(nextGroupOrder,\s*\{\s*reorderCards:\s*true,\s*reorderNav:\s*true\s*\}\);[\s\S]*\}[\s\S]*\}\);/);
+  assert.match(appJs, /applyLiveGroupOrder\(nextGroupOrder,\s*\{\s*reorderCards:\s*true,\s*reorderNav:\s*true\s*\}\)/);
+  assert.match(appJs, /function suppressChromeTabGroupsImport\(durationMs = 1200\)/);
+  assert.match(appJs, /function syncChromeTabGroupsWithoutImportEcho\(\)/);
+  assert.match(appJs, /const ENTRY_ANIMATIONS_CLASS = 'entry-animations-enabled'/);
+  assert.match(appJs, /function primeEntryAnimations\(durationMs = 1200\)/);
+  assert.match(appJs, /function disableEntryAnimations\(\)/);
+  assert.match(appJs, /function buildPersistentGroupOrderWithInsertedGroup\(insertedGroupKey,/);
+  assert.match(appJs, /function buildPersistentGroupOrderReplacingKey\(replacementGroupKey, replacedGroupKey\)/);
+  assert.match(appJs, /async function persistGroupOrder\(orderKeys = \[\]\)/);
+  assert.match(chromeImportJs, /function findReusableSessionGroupId\(groups, assignments, nativeGroup\)/);
+  assert.match(chromeImportJs, /sessionGroupId = findReusableSessionGroupId\(groups, normalizedState\.assignments, nativeGroup\);/);
+  assert.match(appJs, /function disableChromeTabGroupsImportModeForLocalEdits\(\)/);
+  assert.match(appJs, /function shouldImportChromeGroupsIntoSessionState\(\)/);
+  assert.match(appJs, /setImportMode\(importedCount > 0\);\s*disableChromeTabGroupsImportModeForLocalEdits\(\);\s*window\.__suppressAutoRefreshUntil = Date\.now\(\) \+ 2000;\s*await renderDashboard\(\);/);
+  assert.match(appJs, /if \(!shouldImportChromeGroupsIntoSessionState\(\)\) \{[\s\S]*disableChromeTabGroupsImportModeForLocalEdits\(\);[\s\S]*return;/);
+  assert.match(appJs, /if \(enable && shouldImportChromeGroupsIntoSessionState\(\)\) \{/);
+  assert.match(appJs, /else if \(!enable && typeof reconcileChromeTabGroupImports === 'function'\) \{/);
+  assert.match(appJs, /applyLiveGroupOrder\(nextGroupOrder,\s*\{\s*reorderCards:\s*true,\s*reorderNav:\s*true\s*\}\);\s*await syncChromeTabGroupsWithoutImportEcho\(\);/);
+});
+
+test('session group naming no longer depends on removed chrome import fallback helpers', () => {
+  assert.match(appJs, /function createUniqueSessionGroupName\(baseName, groups = sessionGroupsState\.groups, excludeGroupId = ''\) \{/);
+  assert.match(appJs, /const lowerFallback = fallbackName\.toLowerCase\(\);/);
+  assert.match(appJs, /while \(takenNames\.has\(`\$\{lowerFallback\} \$\{suffix\}`\)\) suffix \+= 1;/);
+  assert.doesNotMatch(appJs, /return fallbackBuildChromeImportName\(baseName, groups, excludeGroupId\);/);
+});
+
+test('page chip drag commits without movement toasts', () => {
+  assert.doesNotMatch(appJs, /showToast\(runtimeT \? runtimeT\('toastMovedTo'/);
+  assert.doesNotMatch(appJs, /showToast\(runtimeT \? runtimeT\('toastCreatedGroup'/);
+  assert.match(appJs, /logPageChipDragDebug\('finish-group-move'/);
+  assert.match(appJs, /logPageChipDragDebug\('finish-new-group'/);
+});
+
+test('back-to-top button styles and behavior are wired up', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /\.back-to-top\s*\{/);
+  assert.match(css, /\.back-to-top\.visible\s*\{/);
+  assert.match(css, /\.back-to-top\s*\{[\s\S]*border-radius:\s*999px;/);
+  assert.match(css, /\.back-to-top\s*\{[\s\S]*var\(--floating-surface-opacity\)/);
+  assert.match(css, /\.back-to-top\s*\{[\s\S]*backdrop-filter:\s*blur\(10px\)/);
+  assert.match(appJs, /window\.scrollTo\(\{\s*top:\s*0,\s*behavior:\s*prefersReducedMotion\(\) \? 'auto' : 'smooth'/);
+  assert.match(appJs, /document\.getElementById\('backToTopBtn'\)/);
+});
+
+test('deferred drawer styles and behavior are wired up', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+  const html = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8');
+
+  assert.match(css, /\.drawer-header-actions\s*\{/);
+  assert.match(css, /\.drawer-icon-btn\s*\{/);
+  assert.match(css, /\.drawer-panel\.is-active\s*\{/);
+  assert.match(css, /\.deferred-trigger\s*\{/);
+  assert.match(css, /\.deferred-overlay\.visible\s*\{/);
+  assert.match(css, /\.deferred-column\.open\s*\{/);
+  assert.match(appJs, /const nextOpen = !deferredPanelOpen/);
+  assert.doesNotMatch(appJs, /drawerView === 'saved'/);
+  assert.doesNotMatch(appJs, /toggle-saved-search/);
+  assert.match(appJs, /toggle-todo-search/);
+  assert.match(appJs, /toggle-theme-menu/);
+  assert.match(appJs, /select-theme/);
+  assert.match(appJs, /select-theme-mode/);
+  assert.match(appJs, /themeBackgroundInput/);
+  assert.match(appJs, /loadThemePreferences/);
+  assert.match(appJs, /e\.key === 'Escape' && deferredPanelOpen/);
+  assert.match(appJs, /saveDrawerItemOrder/);
+  assert.match(appJs, /previewDrawerItemOrder/);
+  assert.match(html, /id="clearTodoArchiveBtn"/);
+  assert.doesNotMatch(html, /id="savedSearchToggle"/);
+  assert.match(html, /id="todoNewBtn"/);
+  assert.match(css, /\.deferred-header\s*\{[\s\S]*animation:\s*none/);
+  assert.match(css, /\.drawer-title-btn\s*\{[\s\S]*text-decoration:\s*underline/);
+});
+
+test('theme menu styles and custom background layer are defined', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /--page-custom-background:/);
+  assert.match(css, /--custom-surface-opacity:/);
+  assert.match(css, /--floating-surface-opacity:/);
+  assert.match(css, /--panel-surface-opacity:/);
+  assert.match(css, /--tooltip-surface:/);
+  assert.match(css, /--tooltip-border:/);
+  assert.match(css, /--tooltip-text:/);
+  assert.match(css, /--workspace-accent:/);
+  assert.match(css, /--workspace-accent-soft:/);
+  assert.match(css, /--workspace-accent-border:/);
+  assert.match(css, /--workspace-accent-contrast:/);
+  assert.match(css, /--banner-action-bg:/);
+  assert.match(css, /--banner-action-bg-hover:/);
+  assert.match(css, /--banner-action-text:/);
+  assert.match(css, /--workspace-chip-bg:/);
+  assert.match(css, /--workspace-chip-bg-strong:/);
+  assert.match(css, /--workspace-chip-text:/);
+  assert.match(css, /--workspace-chip-border:/);
+  assert.match(css, /body\s*\{[\s\S]*background-image:\s*var\(--page-custom-background\)/);
+  assert.match(css, /\.header-title-row\s*\{[\s\S]*align-items:\s*center;[\s\S]*gap:\s*18px;[\s\S]*flex-wrap:\s*nowrap;/);
+  assert.match(css, /\.header-left h1\s*\{[\s\S]*margin-bottom:\s*0;[\s\S]*white-space:\s*nowrap;/);
+  assert.match(css, /\.header-left h1\s*\{[\s\S]*line-height:\s*1;/);
+  assert.match(css, /\.header-left \.date\s*\{[\s\S]*font-size:\s*10px;[\s\S]*line-height:\s*1;[\s\S]*transform:\s*translateY\(1px\);/);
+  assert.match(css, /\.header-theme-trigger\s*\{/);
+  assert.match(css, /\.group-nav-tools\s*\{/);
+  assert.match(css, /\.header-theme-trigger::after\s*\{/);
+  assert.match(css, /\.header-search-shell\s*\{/);
+  assert.match(css, /\.header-search-shell:focus-within\s*\{/);
+  assert.match(css, /\.header-search-input\s*\{/);
+  assert.match(css, /\.theme-menu\s*\{/);
+  assert.match(css, /\.theme-mode-options\s*\{/);
+  assert.match(css, /\.theme-mode-option\s*\{/);
+  assert.match(css, /\.theme-range\s*\{/);
+  assert.match(css, /\.theme-option\.is-active\s*\{/);
+  assert.match(css, /\.header-theme-trigger\s*\{[\s\S]*background:\s*transparent;/);
+  assert.match(themeJs, /body\.style\.backgroundImage = `linear-gradient/);
+  assert.match(themeJs, /body\.classList\.add\('has-custom-background'\)/);
+  assert.match(themeJs, /body\.classList\.remove\('has-custom-background'\)/);
+  assert.match(themeJs, /hexToRgbChannels/);
+  assert.match(themeJs, /surfaceOpacity/);
+  assert.match(appJs, /const themeTrigger = document\.getElementById\('themeMenuTrigger'\)/);
+  assert.match(appJs, /const themePanel = document\.getElementById\('themeMenuPanel'\)/);
+  assert.match(appJs, /!themePanel\.contains\(e\.target\)/);
+  assert.match(appJs, /id="themeMenuTrigger"/);
+  assert.doesNotMatch(appJs, /id="headerPinToggle"/);
+  assert.match(appJs, /id="themeMenuPanel"/);
+  assert.match(appJs, /id="themeModeOptions"/);
+  assert.match(appJs, /id="themeBackgroundInput"/);
+  assert.match(appJs, /id="themeTransparencyRange"/);
+  assert.match(appJs, /id="themeTransparencyValue"/);
+  assert.match(appJs, /id="themeUiScaleRange"/);
+  assert.match(appJs, /id="themeUiScaleValue"/);
+  assert.match(appJs, /id="themeShortcutScaleRange"/);
+  assert.match(appJs, /id="themeShortcutScaleValue"/);
+  assert.match(themeJs, /uiScale/);
+  assert.match(themeJs, /shortcutScale/);
+  assert.match(css, /--ui-scale:/);
+  assert.match(css, /--shortcut-scale:/);
+  assert.match(css, /\.quick-tabs-grid\s*\{[\s\S]*grid-template-columns:\s*repeat\(auto-fill, var\(--quick-shortcut-card-size\)\);/);
+  assert.match(css, /\.quick-shortcut-card\s*\{[\s\S]*width:\s*var\(--quick-shortcut-card-size\);[\s\S]*flex:\s*0 0 var\(--quick-shortcut-card-size\);/);
+  assert.match(themeJs, /Math\.min\(60, Math\.max\(2, Math\.round\(rawOpacity\)\)\)/);
+  assert.match(appJs, /chrome\.search\?\.query/);
+  assert.match(appJs, /disposition:\s*'CURRENT_TAB'/);
+  assert.match(appJs, /e\.target\.id !== 'headerSearchForm'/);
+  assert.match(appJs, /runDefaultSearch\(query\)/);
+  assert.match(themeJs, /'--workspace-accent':/);
+  assert.match(themeJs, /'--workspace-accent-soft':/);
+  assert.match(themeJs, /'--workspace-accent-border':/);
+  assert.match(themeJs, /'--workspace-accent-contrast':/);
+  assert.match(css, /\.mission-card\s*\{[\s\S]*background:\s*color-mix\(in srgb, var\(--card-bg\) calc\(var\(--custom-surface-opacity\) \+ 68%\), transparent\);/);
+  assert.match(css, /\.section-count\s*\{[\s\S]*color:\s*var\(--workspace-chip-text\);/);
+  assert.match(css, /\.group-nav-button\s*\{[\s\S]*width:\s*40px;[\s\S]*height:\s*40px;/);
+  assert.match(css, /\.group-nav-button::after\s*\{[\s\S]*background:\s*var\(--tooltip-surface\);[\s\S]*color:\s*var\(--tooltip-text\);[\s\S]*border:\s*1px solid var\(--tooltip-border\);/);
+  assert.match(css, /\.tab-cleanup-banner\s*\{[\s\S]*var\(--theme-accent-soft\)[\s\S]*border:\s*1px solid var\(--theme-accent-muted\);/);
+  assert.match(css, /\.tab-cleanup-icon svg\s*\{[\s\S]*color:\s*var\(--theme-accent-strong\);/);
+  assert.match(css, /\.tab-cleanup-btn\s*\{[\s\S]*background:\s*var\(--banner-action-bg\);[\s\S]*color:\s*var\(--banner-action-text\);/);
+  assert.match(css, /\.tab-cleanup-btn:hover\s*\{[\s\S]*background:\s*var\(--banner-action-bg-hover\);/);
+  assert.match(css, /\.duplicate-count-badge\s*\{[\s\S]*color:\s*var\(--workspace-chip-text\);[\s\S]*background:\s*var\(--workspace-chip-bg-strong\);[\s\S]*border:\s*1px solid var\(--workspace-chip-border\);/);
+  assert.match(css, /\.action-btn\.close-tabs\s*\{[\s\S]*border-color:\s*var\(--workspace-chip-border\);[\s\S]*color:\s*var\(--workspace-chip-text\);[\s\S]*background:\s*color-mix\(in srgb, var\(--workspace-chip-bg\) 92%, var\(--card-bg\) 8%\);[\s\S]*border-radius:\s*8px;[\s\S]*min-height:\s*28px;/);
+  assert.match(css, /\.action-btn\.close-tabs:hover\s*\{[\s\S]*background:\s*var\(--workspace-chip-bg-strong\);[\s\S]*border-color:\s*var\(--workspace-accent-border\);/);
+  assert.match(css, /\.deferred-shell\s*\{[\s\S]*background:\s*color-mix\(in srgb, var\(--card-bg\) var\(--panel-card-opacity\), transparent\);/);
+  assert.match(css, /--tooltip-surface:\s*color-mix\(in srgb, var\(--workspace-accent-soft\) 32%, var\(--card-bg\) 68%\);/);
+  assert.match(css, /\.drawer-title-btn\.is-active,\s*\.drawer-title-btn\[aria-selected="true"\]\s*\{[\s\S]*text-decoration-color:\s*var\(--drawer-tab-underline-active\);/);
+  assert.match(css, /\.archive-clear-btn\s*\{[\s\S]*color:\s*var\(--workspace-chip-text\);/);
+  assert.match(css, /\.todo-detail-card\s*\{[\s\S]*background:\s*color-mix\(in srgb, var\(--card-bg\) 96%, var\(--paper\) 4%\);/);
+  assert.match(appJs, /compressImageFileForStorage/);
+  assert.doesNotMatch(appJs, /readFileAsDataUrl/);
+  assert.match(html, /<script src="background-image\.js"><\/script>/);
+  assert.match(html, /<script src="theme-controls\.js"><\/script>/);
+});
+
+test('quick tabs area renders shortcut cards and add button hooks', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /\.quick-tabs-grid\s*\{/);
+  assert.match(css, /\.quick-tabs-grid\s*\{[\s\S]*display:\s*grid;[\s\S]*grid-template-columns:\s*repeat\(auto-fill, var\(--quick-shortcut-card-size\)\);[\s\S]*justify-content:\s*flex-start;/);
+  assert.match(css, /\.quick-shortcut-card\s*\{/);
+  assert.match(css, /\.quick-shortcut-card\s*\{[\s\S]*border:\s*none;/);
+  assert.match(css, /\.quick-shortcut-card\s*\{[\s\S]*grid-template-rows:\s*var\(--quick-shortcut-shell-size\) auto;/);
+  assert.match(css, /\.quick-shortcut-card\s*\{[\s\S]*width:\s*var\(--quick-shortcut-card-size\);[\s\S]*flex:\s*0 0 var\(--quick-shortcut-card-size\);/);
+  assert.match(css, /\.quick-shortcut-icon-wrap\s*\{[\s\S]*border:\s*none;/);
+  assert.match(css, /\.quick-shortcut-custom-glyph\s*\{/);
+  assert.match(css, /\.quick-shortcut-icon-custom\s*\{/);
+  assert.match(css, /\.quick-shortcut-edit\s*\{/);
+  assert.match(css, /\.quick-shortcut-edit\s*\{[\s\S]*left:\s*0;[\s\S]*width:\s*18px;[\s\S]*height:\s*18px;/);
+  assert.match(css, /\.quick-shortcut-edit\s*\{[\s\S]*transform:\s*translateY\(2px\) scale\(0\.92\);/);
+  assert.match(css, /\.quick-shortcut-card:hover \.quick-shortcut-edit,[\s\S]*transform:\s*translateY\(0\) scale\(1\);/);
+  assert.match(css, /\.quick-shortcut-edit:hover,[\s\S]*border-color:\s*color-mix\(in srgb, var\(--workspace-accent-border\) 38%, transparent\);/);
+  assert.match(css, /\.shortcut-editor\s*\{/);
+  assert.match(css, /\.shortcut-editor\s*\{[\s\S]*inset:\s*auto 88px 24px auto;/);
+  assert.match(css, /\.shortcut-editor-preview\s*\{/);
+  assert.match(css, /\.shortcut-editor-source-row\s*\{/);
+  assert.match(css, /\.shortcut-editor-source-row\s*\{[\s\S]*display:\s*flex;/);
+  assert.match(css, /\.shortcut-editor-source-segments\s*\{/);
+  assert.match(css, /\.shortcut-editor-source-segments\s*\{[\s\S]*flex:\s*1 1 auto;[\s\S]*min-width:\s*0;/);
+  assert.match(css, /\.shortcut-editor-source-chip\s*\{/);
+  assert.match(css, /\.shortcut-editor-source-chip\s*\{[\s\S]*display:\s*inline-flex;[\s\S]*justify-content:\s*center;[\s\S]*flex:\s*1 1 0;/);
+  assert.match(css, /\.shortcut-editor-source-chip:hover\s*\{/);
+  assert.match(css, /\.shortcut-editor-source-chip\[aria-pressed="true"\]\s*\{/);
+  assert.match(css, /\.shortcut-editor-mode-group\[hidden\]\s*\{/);
+  assert.match(css, /\.shortcut-editor-inline-field\s*\{/);
+  assert.match(css, /\.quick-shortcut-remove\s*\{/);
+  assert.match(css, /\.quick-shortcut-remove\s*\{[\s\S]*right:\s*0;[\s\S]*width:\s*18px;[\s\S]*height:\s*18px;/);
+  assert.match(css, /\.quick-shortcut-remove:hover,[\s\S]*color:\s*color-mix\(in srgb, var\(--status-abandoned\) 92%, var\(--ink\) 8%\);/);
+  assert.match(themeJs, /QUICK_SHORTCUTS_KEY/);
+  assert.match(themeJs, /normalizeShortcutIcon/);
+  assert.match(themeJs, /isSvgMarkup/);
+  assert.match(themeJs, /svgToDataUrl/);
+  assert.match(themeJs, /extractIconFromClipboardHtml/);
+  assert.match(themeJs, /isTransientClipboardReference/);
+  assert.match(themeJs, /\^data:image\\\//);
+  assert.match(themeJs, /setShortcutEditorSource/);
+  assert.match(themeJs, /tryShortcutEditorPasteViaExecCommand/);
+  assert.match(themeJs, /document\.execCommand\('paste'\)/);
+  assert.match(themeJs, /openShortcutEditor/);
+  assert.match(themeJs, /function positionShortcutEditor\(triggerEl = null\)/);
+  assert.match(themeJs, /const triggerRect = triggerEl\.getBoundingClientRect\(\)/);
+  assert.match(themeJs, /panel\.style\.left = `\$\{Math\.round\(left\)\}px`;/);
+  assert.match(themeJs, /positionShortcutEditor\(triggerEl\);/);
+  assert.match(themeJs, /saveShortcutEditorShortcut/);
+  assert.match(themeJs, /Shortcut icon updated/);
+  assert.match(themeJs, /upload-shortcut-icon/);
+  assert.match(themeJs, /edit-quick-shortcut/);
+  assert.match(themeJs, /SVG icon pasted/);
+  assert.match(themeJs, /temporary file reference\. Use Cmd\/Ctrl\+V instead/);
+  assert.match(themeJs, /navigator\.clipboard\?\.read/);
+  assert.match(themeJs, /text\/html/);
+  assert.match(themeJs, /kind === 'svg' \|\| \/\^data:image\\\/\//);
+  assert.match(themeJs, /renderQuickShortcuts/);
+  assert.match(themeJs, /add-quick-shortcut/);
+  assert.match(themeJs, /remove-quick-shortcut/);
+  assert.match(themeJs, /open-quick-shortcut/);
+  assert.match(appJs, /openOrFocusUrl/);
+  assert.match(themeJs, /customIcon\.kind === 'glyph'\s*\?\s*''/);
+  assert.doesNotMatch(themeJs, /title="\$\{safeLabel\}"/);
+  assert.match(appJs, /data-chip-sort-id="\$\{safeSortId\}"[\s\S]*aria-label="\$\{safeTitle\}"/);
+  assert.doesNotMatch(themeJs, /Add tab/);
+  assert.match(html, /id="shortcutEditor"/);
+  assert.match(html, /id="shortcutEditorForm"/);
+  assert.match(html, /id="shortcutEditorSource"/);
+  assert.match(html, /data-source="site"[\s\S]*>Website<\/button>/);
+  assert.match(html, /data-source="glyph"[\s\S]*>Emoji<\/button>/);
+  assert.match(html, /data-source="image"[\s\S]*>Image<\/button>/);
+  assert.match(html, /data-source="svg"[\s\S]*>SVG<\/button>/);
+  assert.match(html, /id="shortcutEditorSiteGroup"/);
+  assert.match(html, /id="shortcutEditorEmoji"/);
+  assert.match(html, /id="shortcutEditorSvgCode"/);
+  assert.match(html, /id="shortcutEditorImageGroup"/);
+  assert.match(html, />Save<\/button>/);
+  assert.match(html, /Paste an image with Cmd\/Ctrl\+V while the editor is focused\./);
+  assert.doesNotMatch(html, />Paste image<\/button>/);
+  assert.match(html, /id="shortcutIconFileInput"/);
+  assert.match(html, /id="shortcutEditorBack"/);
+  assert.match(html, /id="tabPickerViewSwitch"/);
+  assert.match(html, /id="tabPickerTabsTab"/);
+  assert.match(html, /id="tabPickerUrlTab"/);
+  assert.match(html, /id="tabPickerEditorHost"/);
+  assert.match(themeJs, /let tabPickerMode = 'tabs';/);
+  assert.match(themeJs, /function setTabPickerMode\(nextMode, \{ focus = true \} = \{\}\)/);
+  assert.match(themeJs, /if \(action === 'switch-tab-picker-view'\) \{[\s\S]*setTabPickerMode\(actionEl\.dataset\.view \|\| 'tabs'\);/);
+  assert.match(themeJs, /function mountShortcutEditorInTabPicker\(\)/);
+  assert.match(themeJs, /elements\.form\.classList\.add\('is-tab-picker-pane'\)/);
+  assert.match(themeJs, /if \(tabPickerMode === 'url'\) \{[\s\S]*openShortcutEditor\(null, tabPickerFocusReturnEl \|\| document\.activeElement, \{/);
+  assert.match(themeJs, /function closeShortcutEditor\(\{ restoreFocus = true \} = \{\}\)/);
+  assert.match(themeJs, /function syncFormControlValue\(element, nextValue\) \{[\s\S]*element\.dataset\.composing === 'true'/);
+  assert.match(themeJs, /document\.addEventListener\('compositionstart', \(e\) => \{/);
+  assert.match(themeJs, /document\.addEventListener\('compositionend', \(e\) => \{/);
+  assert.match(css, /\.tab-picker-view-switch\s*\{/);
+  assert.match(css, /\.tab-picker-search-wrap\[hidden\],[\s\S]*\.tab-picker-list\[hidden\],[\s\S]*\.tab-picker-editor-host\[hidden\]/);
+  assert.match(css, /\.shortcut-editor-form\.is-tab-picker-pane\s*\{/);
+  const manifest = fs.readFileSync(path.join(__dirname, 'manifest.json'), 'utf8');
+  assert.match(manifest, /"clipboardRead"/);
+});
+
+test('quick shortcuts support drag reordering with persisted order and drag preview styling', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(themeJs, /const\s*\{[\s\S]*reorderSubsetByIds:\s*themeReorderSubsetByIds,[\s\S]*\}\s*=\s*globalThis\.TabOutListOrder \|\| \{\};/);
+  assert.match(themeJs, /class="quick-shortcut-card" data-shortcut-id="\$\{safeId\}"/);
+  assert.match(themeJs, /const safeAriaLabel = themeEscapeHtmlAttribute \? themeEscapeHtmlAttribute\(label\) : label\.replace\(\/"\/g, '&quot;'\);/);
+  assert.match(themeJs, /aria-label="\$\{safeAriaLabel\}"/);
+  assert.match(themeJs, /let quickShortcutDragState = null;/);
+  assert.match(themeJs, /document\.body\.classList\.add\('quick-shortcut-list-dragging'\)/);
+  assert.match(themeJs, /quickShortcutSuppressClickUntil = Date\.now\(\) \+ 250/);
+  assert.match(themeJs, /function clampQuickShortcutDragPoint\(clientX, clientY\)/);
+  assert.match(themeJs, /const minClientX = listRect\.left \+ quickShortcutDragState\.offsetX - width \/ 2;/);
+  assert.match(themeJs, /const maxClientX = listRect\.right \+ quickShortcutDragState\.offsetX - width \/ 2;/);
+  assert.match(themeJs, /Math\.min\(Math\.max\(clientX, minClientX\), maxClientX\)/);
+  assert.match(themeJs, /function ensureQuickShortcutSlot\(\)/);
+  assert.match(themeJs, /quickShortcutSlotEl\.className = 'quick-shortcut-slot is-drag-slot';/);
+  assert.match(themeJs, /function ensureQuickShortcutGhost\(\)/);
+  assert.match(themeJs, /quickShortcutDraggedEl\.replaceWith\(quickShortcutSlotEl\)/);
+  assert.match(themeJs, /quickShortcutGhostEl\.style\.setProperty\('--drag-height'/);
+  assert.match(themeJs, /function updateDraggedQuickShortcutPosition\(clientX, clientY\)\s*\{[\s\S]*quickShortcutGhostEl\.style\.setProperty\('--drag-left'/);
+  assert.match(themeJs, /await saveQuickShortcuts\(themeReorderSubsetByIds\(/);
+  assert.match(themeJs, /function buildQuickShortcutSlotTargets\(listEl\)/);
+  assert.match(themeJs, /slotTargets:\s*buildQuickShortcutSlotTargets\(listEl\)/);
+  assert.match(themeJs, /function findQuickShortcutSlotIndex\(slotTargets, draggedCenterX, draggedCenterY\)/);
+  assert.match(themeJs, /const distance = \(dx \* dx\) \+ \(dy \* dy\);/);
+  assert.match(themeJs, /function animateQuickShortcutNode\(item, previousRect\)/);
+  assert.match(themeJs, /function settleQuickShortcutItems\(listEl, affectedIds = null\)/);
+  assert.match(themeJs, /if \(affected && !affected\.has\(key\)\) return;/);
+  assert.match(themeJs, /Math\.hypot\(deltaX, deltaY\)/);
+  assert.match(themeJs, /cubic-bezier\(0\.22, 1, 0\.36, 1\)/);
+  assert.match(themeJs, /const draggedCenterX = clampedPoint\.clientX - quickShortcutDragState\.offsetX \+ quickShortcutDragState\.width \/ 2;/);
+  assert.match(themeJs, /const draggedCenterY = clampedPoint\.clientY - quickShortcutDragState\.offsetY \+ quickShortcutDragState\.height \/ 2;/);
+  assert.match(themeJs, /const targetIndex = findQuickShortcutSlotIndex\(\s*quickShortcutDragState\.slotTargets,\s*draggedCenterX,\s*draggedCenterY\s*\);/);
+  assert.match(themeJs, /const insertBeforeItem = items\[targetIndex\] \|\| null;/);
+  assert.match(themeJs, /const targetBeforeNode = insertBeforeItem \|\| addCard \|\| null;/);
+  assert.match(themeJs, /const currentBeforeNode = quickShortcutSlotEl\.nextElementSibling \|\| null;/);
+  assert.match(themeJs, /if \(targetBeforeNode === currentBeforeNode\) return;/);
+  assert.match(themeJs, /const previousOrderIds = \[\.\.\.listEl\.querySelectorAll\('\[data-shortcut-id\]'\)\]/);
+  assert.match(themeJs, /const affectedIds = new Set\(/);
+  assert.match(themeJs, /settleQuickShortcutItems\(listEl, affectedIds\);/);
+  assert.match(themeJs, /animateQuickShortcutNode\(quickShortcutSlotEl, previousSlotRect\);/);
+  assert.match(css, /body\.quick-shortcut-list-dragging\s*\{/);
+  assert.match(css, /\.quick-shortcut-card\.is-drag-ghost\s*\{[\s\S]*position:\s*fixed;[\s\S]*height:\s*var\(--drag-height, auto\);[\s\S]*pointer-events:\s*none;/);
+  assert.match(css, /\.quick-shortcut-card\.is-drag-ghost \.quick-shortcut-open\s*\{[\s\S]*transform:\s*none;[\s\S]*transition:\s*none;/);
+  assert.match(css, /\.quick-shortcut-slot\s*\{[\s\S]*width:\s*var\(--quick-shortcut-card-size\);[\s\S]*min-height:\s*calc\(var\(--quick-shortcut-shell-size\) \+ 16px\);[\s\S]*pointer-events:\s*none;/);
+});
+
+test('quick shortcut add flows keep toast actions clickable and avoid stale duplicate state', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /\.toast\.visible\s*\{[\s\S]*pointer-events:\s*auto;/);
+  assert.match(themeJs, /async function removeQuickShortcutById\(shortcutId\)\s*\{/);
+  assert.match(themeJs, /showToast\('Tab added — undo\?',\s*\{[\s\S]*await removeQuickShortcutById\(nextShortcut\.id\);[\s\S]*await renderQuickShortcuts\(\);[\s\S]*\}\s*,?\s*\}\s*\);/);
+  assert.match(themeJs, /const existingUrls = new Set\(shortcuts\.map\(s => s\.url\)\);[\s\S]*const shortcutUrl = tab\.url \|\| '';/);
+  assert.match(themeJs, /if \(existingUrls\.has\(shortcutUrl\)\) continue;[\s\S]*newShortcuts\.push\(\{[\s\S]*url: shortcutUrl,[\s\S]*\}\);[\s\S]*existingUrls\.add\(shortcutUrl\);/);
+});
+
+test('collapsed drawer triggers use compact neutral frames with theme-ready tokens', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /--drawer-trigger-surface:/);
+  assert.match(css, /--drawer-trigger-border:/);
+  assert.match(css, /--drawer-trigger-icon:/);
+  assert.match(css, /\.deferred-trigger\s*\{[\s\S]*width:\s*42px;[\s\S]*height:\s*42px;[\s\S]*padding:\s*0;/);
+  assert.match(css, /\.deferred-trigger-icon\s*\{[\s\S]*width:\s*18px;[\s\S]*height:\s*18px;/);
+  assert.doesNotMatch(css, /#deferredTrigger\s*\{/);
+  assert.doesNotMatch(css, /#todoTrigger\s*\{/);
+});
+
+test('todo list and tab chips expose drag handles with drag-state styling', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(drawerJs, /class="drawer-reorder-handle todo-reorder-handle"/);
+  assert.match(appJs, /data-chip-drag-handle="tab"/);
+  assert.match(appJs, /const chipItem = e\.target\.closest\('\[data-chip-sort-id\]'\);/);
+  assert.match(appJs, /const chipAction = e\.target\.closest\('\.chip-actions'\);/);
+  assert.match(appJs, /if \(chipItem && !chipAction && e\.button === 0\)/);
+  assert.match(appJs, /e\.stopPropagation\(\);/);
+  assert.match(appJs, /document\.body\.classList\.add\('page-chip-drag-armed'\)/);
+  assert.match(appJs, /const GROUP_TAB_ORDER_KEY = 'groupTabOrder'/);
+  assert.match(appJs, /saveGroupTabRowOrder/);
+  assert.match(appJs, /ensureManualDropGroup/);
+  assert.match(appJs, /moveDraggedPageChipToGroup/);
+  assert.match(appJs, /createSessionGroupFromDraggedPageChip/);
+  assert.match(appJs, /function getPageChipDropTarget\(clientX, clientY\)/);
+  assert.match(appJs, /const PAGE_CHIP_DRAG_DEBUG = false;/);
+  assert.match(appJs, /function buildPreviewGroupOrderFromDom\(insertedGroupKey = ''\)/);
+  assert.match(appJs, /function clampPageChipClientPoint\(clientX, clientY\)/);
+  assert.match(appJs, /window\.innerWidth - 1/);
+  assert.match(appJs, /window\.innerHeight - 1/);
+  assert.match(appJs, /const edgeThreshold = 18;/);
+  assert.match(appJs, /clientY <= firstCardRect\.top \+ edgeThreshold/);
+  assert.match(appJs, /clientY >= lastCardRect\.bottom - edgeThreshold/);
+  assert.match(appJs, /for \(const cardEl of missionCards\) \{/);
+  assert.match(appJs, /const withinCardY = clientY >= rect\.top && clientY <= rect\.bottom;/);
+  assert.match(appJs, /const gapTop = currentRect\.bottom - gapThreshold;/);
+  assert.match(appJs, /const gapBottom = nextRect\.top \+ gapThreshold;/);
+  assert.match(appJs, /if \(clientY >= gapTop && clientY <= gapBottom\) \{/);
+  assert.match(appJs, /const sourceGroupKey = pageChipDragState\?\.sourceGroupKey \|\| '';/);
+  assert.match(appJs, /const isSourceGroup = groupKey === sourceGroupKey;/);
+  assert.match(appJs, /if \(clientY >= listRect\.bottom \+ cardEdgeThreshold\) \{/);
+  assert.match(appJs, /insertBeforeCardEl: nextCardEl,/);
+  assert.match(appJs, /pageChipNewGroupSlotEl = document\.createElement\('div'\)/);
+  assert.match(appJs, /pageChipNewGroupSlotEl\.className = 'mission-drop-new-group-slot';/);
+  assert.match(appJs, /function syncPageChipDropTarget\(clientX, clientY\)/);
+  assert.match(appJs, /const dragHandleEl = chipHandle \|\| item;/);
+  assert.match(appJs, /handleEl:\s*dragHandleEl,/);
+  assert.match(appJs, /pointerId:\s*e\.pointerId,/);
+  assert.match(appJs, /dragHandleEl\.setPointerCapture\(e\.pointerId\)/);
+  assert.match(appJs, /async function finishPageChipDrag\(\)/);
+  assert.match(appJs, /let requiresOpenTabsRebuild = true;/);
+  assert.match(appJs, /requiresOpenTabsRebuild = false;/);
+  assert.match(appJs, /clearPageChipDragState\(\{ removeNode: requiresOpenTabsRebuild \}\)/);
+  assert.match(appJs, /if \(!requiresOpenTabsRebuild\) \{[\s\S]*finish-local-reorder-commit[\s\S]*await syncChromeTabGroupsWithoutImportEcho\(\);/);
+  assert.match(appJs, /document\.addEventListener\('pointercancel', async \(e\) => \{/);
+  assert.match(appJs, /function startPageChipDragVisuals\(\)/);
+  assert.match(appJs, /pageChipDragState\.lastResolvedDropTarget = \{/);
+  assert.match(appJs, /const stickyTarget = pageChipDragState\.lastResolvedDropTarget;/);
+  assert.match(appJs, /create-group-save-group-order/);
+  assert.match(appJs, /disableChromeTabGroupsImportModeForLocalEdits\(\);[\s\S]*changedGroupKeys\.add\(sourceGroupKey\);/);
+  assert.match(appJs, /buildPersistentGroupOrderWithInsertedGroup\(createdGroupKey,\s*\{/);
+  assert.match(appJs, /await persistGroupOrder\(nextGroupOrder\);/);
+  assert.match(appJs, /if \(!movedGroup\.targetWasManualGroup\) \{[\s\S]*buildPersistentGroupOrderReplacingKey\(movedGroup\.groupKey, targetGroupKey\)/);
+  assert.match(appJs, /const clampedPoint = clampPageChipClientPoint\(clientX, clientY\);/);
+  assert.match(appJs, /if \(!pageChipDragState\.moved\) \{[\s\S]*const distance = Math\.hypot\(e\.clientX - pageChipDragState\.x, e\.clientY - pageChipDragState\.y\);[\s\S]*if \(distance >= 4\) \{/);
+  assert.match(appJs, /updateDraggedPageChipPosition\(e\.clientX, e\.clientY\);[\s\S]*syncPageChipDropTarget\(e\.clientX, e\.clientY\);/);
+  assert.match(appJs, /clearPageChipDragState\(\{ removeNode: moved \}\)/);
+  assert.match(appJs, /let suppressPageChipClickUntil = 0;/);
+  assert.match(appJs, /if \(Date\.now\(\) < suppressPageChipClickUntil\) return;/);
+  assert.match(appJs, /suppressPageChipClickUntil = Date\.now\(\) \+ 250;/);
+  assert.match(appJs, /tabs:\s*getOrderedUniqueTabsForGroup\(group\)/);
+  assert.doesNotMatch(drawerJs, /data-drag-handle="saved"/);
+  assert.match(drawerJs, /data-drag-handle="todo"/);
+  assert.match(drawerJs, /data-drag-handle="todo"[\s\S]*M8 6h\.01M8 12h\.01M8 18h\.01M16 6h\.01M16 12h\.01M16 18h\.01/);
+  assert.doesNotMatch(drawerJs, /title="Drag to reorder"/);
+  assert.match(css, /\.drawer-reorder-handle\s*\{/);
+  assert.match(css, /\.todo-reorder-handle\s*\{[\s\S]*width:\s*30px;[\s\S]*height:\s*30px;/);
+  assert.match(css, /\.page-chip > \.chip-reorder-handle\s*\{[\s\S]*width:\s*30px;[\s\S]*height:\s*30px;/);
+  assert.match(css, /\.chip-reorder-handle\s*\{[\s\S]*opacity:\s*1;[\s\S]*border:\s*1px solid/);
+  assert.match(css, /\.drawer-reorder-placeholder\s*\{/);
+  assert.match(css, /body\.page-chip-list-dragging\s*\{/);
+  assert.match(css, /body\.page-chip-drag-armed,\s*body\.page-chip-drag-armed \*\s*\{/);
+  assert.match(css, /\.mission-drop-new-group-slot\s*\{/);
+  assert.match(css, /\.mission-drop-new-group-line\s*\{/);
+  assert.doesNotMatch(css, /\.page-chip-drag-debug\s*\{/);
+  assert.match(css, /\.page-chip\.is-dragging\s*\{/);
+  assert.match(css, /\.chip-reorder-placeholder\s*\{/);
+  assert.match(css, /\.mission-card\.is-drop-target\s*\{/);
+  assert.doesNotMatch(css, /\.deferred-item\.is-dragging/);
+  assert.match(css, /\.todo-item\.is-dragging\s*\{/);
+  assert.match(css, /\.chip-reorder-handle\s*\{[\s\S]*color:\s*color-mix\(in srgb, var\(--ink\) 84%, var\(--muted\) 16%\);/);
+  assert.match(css, /\.drawer-reorder-handle\s*\{[\s\S]*border:\s*none;[\s\S]*background:\s*transparent;[\s\S]*color:\s*color-mix\(in srgb, var\(--ink\) 86%, var\(--muted\) 14%\);/);
+});
+
+test('manual groups expose an inline rename button with pencil styling', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(appJs, /data-action="rename-session-group"/);
+  assert.match(appJs, /data-group-key="\$\{runtimeEscapeHtmlAttribute \? runtimeEscapeHtmlAttribute\(group\.domain\)/);
+  assert.match(appJs, /runtimeT \? runtimeT\('renameGroup'\) : 'Rename group'/);
+  assert.match(appJs, /function openGroupRenameEditor\(groupKey, manualGroupId = ''\)/);
+  assert.match(appJs, /function submitGroupRenameEditor\(\)/);
+  assert.match(appJs, /class="mission-rename-form"/);
+  assert.match(appJs, /data-group-rename-input="/);
+  assert.match(appJs, /if \(action === 'rename-session-group'\) \{[\s\S]*openGroupRenameEditor\(groupKey, manualGroupId\);[\s\S]*return;/);
+  assert.match(appJs, /document\.addEventListener\('pointerdown', \(e\) => \{[\s\S]*if \(!groupRenameEditorState\) return;[\s\S]*void submitGroupRenameEditor\(\);/);
+  assert.match(appJs, /document\.addEventListener\('focusout', \(e\) => \{[\s\S]*const renameInput = e\.target\.closest\('\.mission-rename-input'\);[\s\S]*void submitGroupRenameEditor\(\);/);
+  assert.match(appJs, /loadGroupLabelOverrides/);
+  assert.match(appJs, /saveGroupLabelOverrides/);
+  assert.match(css, /\.mission-title-wrap\s*\{/);
+  assert.match(css, /\.mission-rename-trigger\s*\{[\s\S]*cursor:\s*pointer;/);
+  assert.match(css, /\.mission-rename-form\s*\{[\s\S]*min-width:\s*min\(520px,\s*100%\);/);
+  assert.match(css, /\.mission-rename-input\s*\{[\s\S]*min-width:\s*280px;[\s\S]*height:\s*38px;/);
+  assert.doesNotMatch(css, /\.mission-rename-actions\s*\{/);
+  assert.doesNotMatch(css, /\.mission-rename-action\.is-primary\s*\{/);
+  assert.doesNotMatch(css, /\.mission-rename-btn\s*\{/);
+  assert.match(appJs, /class="mission-rename-trigger"/);
+});
+
+test('saved-for-later trigger and bookmark artwork are removed', () => {
+  assert.doesNotMatch(html, /id="deferredTrigger"/);
+  assert.doesNotMatch(html, /M17\.25 6\.75v13\.22/);
+});
+
+test('collapsed drawer triggers stay icon-only', () => {
+  assert.doesNotMatch(appJs, /deferredTriggerCount/);
+  assert.doesNotMatch(appJs, /if \(totalCount === 0\) \{[\s\S]*trigger\.style\.display = 'none';/);
+});
+
+test('todo trigger icon uses the checklist artwork', () => {
+  assert.match(html, /id="todoTrigger"[\s\S]*M288\.384 173\.488a94\.208 94\.208 0 0 1 93\.392-81\.488/);
+  assert.match(html, /id="todoTrigger"[\s\S]*M926\.624 660\.752a32 32 0 0 1 0 45\.248/);
+});
+
+test('todo archive supports deleting single items and clearing archived todos', () => {
+  const html = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8');
+
+  assert.doesNotMatch(drawerJs, /restore-deferred/);
+  assert.doesNotMatch(appJs, /reopenSavedTab\(restored\.url\)/);
+  assert.doesNotMatch(drawerJs, /delete-archive-item/);
+  assert.doesNotMatch(appJs, /clear-archive/);
+  assert.match(appJs, /clear-todo-archive/);
+  assert.match(html, /class="archive-header-row"/);
+  assert.doesNotMatch(html, /id="clearArchiveBtn"/);
+  assert.match(html, /id="clearTodoArchiveBtn"/);
+  assert.doesNotMatch(drawerJs, /archive-actions/);
+});
+
+test('deferred trigger position is persisted separately from drawer open state', () => {
+  assert.match(drawerJs, /const DEFERRED_TRIGGER_POSITION_KEY = 'deferredTriggerPosition'/);
+  assert.match(drawerJs, /saveDeferredTriggerPosition/);
+});
+
+test('deferred trigger supports vertical drag positioning', () => {
+  assert.match(appJs, /deferredTriggerDragState/);
+  assert.match(appJs, /e\.target\.closest\('\.deferred-trigger'\)/);
+  assert.match(appJs, /triggerStack\.style\.top = `\$\{nextTop}px`/);
+});
+
+test('drawer and search controls expose stronger accessibility semantics', () => {
+  assert.match(html, /id="drawerColumn"[\s\S]*role="dialog"[\s\S]*aria-label="Todos"[\s\S]*tabindex="-1"/);
+  assert.doesNotMatch(html, /role="tablist" aria-label="Drawer views"/);
+  assert.doesNotMatch(html, /id="savedSearchToggle"[\s\S]*aria-expanded="false"[\s\S]*aria-controls="savedSearchWrap"/);
+  assert.match(html, /id="todoSearchToggle"[\s\S]*aria-expanded="false"[\s\S]*aria-controls="todoSearchWrap"/);
+  assert.doesNotMatch(html, /type="search"[\s\S]*id="savedSearchInput"[\s\S]*aria-label="Search saved pages"/);
+  assert.match(html, /type="search"[\s\S]*id="todoSearchInput"[\s\S]*aria-label="Search todos"/);
+});
+
+test('drawer lives outside workspace pages so todos are global across pages', () => {
+  const homeStart = html.indexOf('<main class="workspace-page is-active" id="homePage"');
+  const homeEnd = html.indexOf('</main>', homeStart);
+  const savedStart = html.indexOf('<main class="workspace-page" id="savedTabsPage"');
+  const savedEnd = html.indexOf('</main>', savedStart);
+  const drawerIndex = html.indexOf('id="drawerColumn"');
+  const triggerIndex = html.indexOf('id="drawerTriggerStack"');
+
+  assert.ok(homeStart >= 0 && homeEnd > homeStart);
+  assert.ok(savedStart >= 0 && savedEnd > savedStart);
+  assert.ok(drawerIndex > homeEnd && drawerIndex > savedEnd);
+  assert.ok(triggerIndex > homeEnd && triggerIndex > savedEnd);
+});
+
+test('active todos expose edit and delete controls in list and detail views', () => {
+  assert.match(drawerJs, /data-action="edit-todo"[\s\S]*data-todo-id="\$\{todo\.id\}"/);
+  assert.match(drawerJs, /data-action="delete-todo"[\s\S]*data-todo-id="\$\{todo\.id\}"/);
+  assert.match(drawerJs, /function renderTodoDetail\(todo\)[\s\S]*data-action="edit-todo"[\s\S]*data-action="delete-todo"/);
+  assert.match(drawerJs, /class="todo-action-btn todo-edit"/);
+  assert.match(drawerJs, /class="todo-action-btn todo-delete"/);
+  assert.match(appJs, /if \(action === 'edit-todo'\)/);
+  assert.match(appJs, /if \(action === 'delete-todo'\)/);
+});
+
+test('todos use an inline editor panel instead of browser prompts', () => {
+  assert.match(drawerJs, /let todoEditorState = createTodoEditorState\(\);/);
+  assert.match(drawerJs, /function renderTodoEditor\(\)/);
+  assert.match(drawerJs, /id="todoEditorView"/);
+  assert.match(drawerJs, /name="title"[\s\S]*class="todo-editor-input"/);
+  assert.match(drawerJs, /name="description"[\s\S]*class="todo-editor-input todo-editor-textarea"/);
+  assert.match(drawerJs, /data-action="submit-todo-editor"/);
+  assert.match(drawerJs, /data-action="cancel-todo-editor"/);
+  assert.match(appJs, /if \(action === 'create-todo'\) \{[\s\S]*openTodoEditor\(\{ mode: 'create'/);
+  assert.match(appJs, /if \(action === 'edit-todo'\) \{[\s\S]*openTodoEditor\(\{[\s\S]*mode: 'edit'/);
+  assert.match(appJs, /if \(action === 'submit-todo-editor'\)/);
+  assert.match(appJs, /if \(action === 'update-todo-editor-field'\)/);
+  assert.doesNotMatch(appJs, /window\.prompt\(runtimeT \? runtimeT\('promptTodoTitle'\)/);
+});
+
+test('interactive controls keep button semantics and reduced-motion support', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(themeJs, /class="quick-shortcut-open" type="button"/);
+  assert.match(themeJs, /class="quick-shortcut-remove" type="button"/);
+  assert.match(themeJs, /aria-pressed="\$\{themePreferences\.paletteId === id\}"/);
+  assert.match(themeJs, /aria-pressed="\$\{themePreferences\.mode === id\}"/);
+  assert.match(themeJs, /function prefersReducedMotion\(\)/);
+  assert.match(appJs, /behavior:\s*prefersReducedMotion\(\) \? 'auto' : 'smooth'/);
+  assert.match(css, /@media \(prefers-reduced-motion: reduce\)/);
+  assert.match(css, /grid-template-columns:\s*repeat\(auto-fit, minmax\(128px, 1fr\)\);/);
+});
+
+test('drawer detail escapes todo title and description before injecting HTML', () => {
+  assert.match(drawerJs, /<h3>\$\{drawerEscapeHtml \? drawerEscapeHtml\(todo\.title\) : todo\.title\}<\/h3>/);
+  assert.match(drawerJs, /drawerEscapeHtml \? drawerEscapeHtml\(todo\.description \|\| 'Add a note when this task needs more context\.'\) : \(todo\.description \|\| 'Add a note when this task needs more context\.'\)/);
+});
+
+test('theme state uses separate mode and palette preferences', () => {
+  assert.match(themeJs, /mode:\s*'system'/);
+  assert.match(themeJs, /paletteId:\s*'paper'/);
+  assert.match(themeJs, /savedSessionRestoreMode:\s*'new-window'/);
+  assert.match(themeJs, /savedSessionNavDisplayMode:\s*'name'/);
+  assert.doesNotMatch(themeJs, /themePreferences = \{[\s\S]*themeId:/);
+  assert.match(themeJs, /resolvedTone/);
+  assert.match(themeJs, /theme-tone-dark/);
+  assert.match(themeJs, /theme-tone-light/);
+  assert.match(appJs, /themeModeSystem/);
+  assert.match(appJs, /themeModeLight/);
+  assert.match(appJs, /themeModeDark/);
+});
+
+test('saved session restore supports both current-window and new-window modes', () => {
+  assert.match(runtimeJs, /const restoreMode = runtimeGetSavedSessionRestoreMode \? runtimeGetSavedSessionRestoreMode\(\) : 'new-window';/);
+  assert.match(runtimeJs, /if \(restoreMode === 'current-window'\)/);
+  assert.match(runtimeJs, /async function openSavedTabsInCurrentWindow\(tabs = \[\]\)/);
+  assert.match(runtimeJs, /await chrome\.tabs\.create\(\{\s*windowId: currentWindowId,\s*url: firstTab\.url,\s*active: true,\s*\}\)/);
+  assert.match(runtimeJs, /await chrome\.windows\.create\(\{\s*url: firstTab\.url,\s*focused: true,\s*\}\)/);
+  assert.match(runtimeJs, /async function restoreSavedTabToBrowser\(tabUrl\)/);
+  assert.match(runtimeJs, /const \{ windowId \} = await openSavedTabsInCurrentWindow\(\[\{ url: tabUrl \}]\);/);
+  assert.match(sessionManagerJs, /runtime\.restoreSavedTabToBrowser/);
+});
+
+test('saved tabs top nav supports icon and name display modes', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(sessionManagerJs, /const navDisplayMode = getSavedSessionNavDisplayModeValue\(\);/);
+  assert.match(sessionManagerJs, /if \(navDisplayMode === 'name'\)/);
+  assert.match(sessionManagerJs, /class="group-nav-button saved-session-nav-button is-name-mode"/);
+  assert.match(sessionManagerJs, /<span class="saved-session-nav-label"/);
+  assert.match(sessionManagerJs, /data-action="change-saved-session-nav-display-mode"/);
+  assert.match(css, /\.saved-session-nav-button\.is-name-mode/);
+  assert.match(css, /\.saved-session-nav-label/);
+  assert.match(css, /\.saved-session-nav-button\.is-name-mode\s*\{[\s\S]*max-width:/);
+  assert.match(css, /\.saved-session-nav-label\s*\{[\s\S]*white-space:\s*nowrap;[\s\S]*text-overflow:\s*ellipsis;/);
+});
+
+test('quick shortcuts overwrite the current Tab Harbor tab instead of focusing another tab or opening a new one', () => {
+  assert.match(runtimeJs, /async function navigateCurrentTabToUrl\(url\)\s*\{[\s\S]*chrome\.tabs\.query\(\{\s*active:\s*true,\s*currentWindow:\s*true\s*\}\)[\s\S]*chrome\.tabs\.update\(activeTab\.id,\s*\{\s*url\s*\}\)[\s\S]*return true;/);
+  assert.match(runtimeJs, /async function openOrFocusUrl\(url\)\s*\{\s*if \(!url\) return false;\s*await navigateCurrentTabToUrl\(url\);\s*return true;\s*\}/);
+  assert.match(runtimeJs, /const fallbackUrl = `https:\/\/www\.google\.com\/search\?q=\$\{encodeURIComponent\(text\)\}`;\s*await navigateCurrentTabToUrl\(fallbackUrl\);/);
+});
+
+test('keyboard focus receives explicit visible treatment', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /--focus-ring:/);
+  assert.match(css, /:is\([\s\S]*\.quick-shortcut-open,[\s\S]*\.theme-option,[\s\S]*\.todo-main[\s\S]*\):focus-visible/);
+  assert.match(css, /outline:\s*2px solid var\(--focus-ring\);/);
+  assert.match(css, /\.header-search-input:focus-visible\s*\{[\s\S]*outline:\s*none;[\s\S]*box-shadow:\s*none;/);
+});
+
+test('drawer tab hover and todo title typography stay aligned with theme system', () => {
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+
+  assert.match(css, /--drawer-tab-idle:/);
+  assert.match(css, /--drawer-tab-hover:/);
+  assert.match(css, /\.drawer-title-btn\s*\{[\s\S]*color:\s*var\(--drawer-tab-idle\);[\s\S]*text-decoration-color:\s*transparent;/);
+  assert.match(css, /\.drawer-title-btn\.is-active,\s*\.drawer-title-btn\[aria-selected="true"\]\s*\{[\s\S]*color:\s*var\(--ink\);/);
+  assert.match(css, /\.drawer-title-btn:not\(\.is-active\):hover,\s*\.drawer-title-btn\[aria-selected="false"\]:hover\s*\{[\s\S]*color:\s*var\(--drawer-tab-hover\);/);
+  assert.match(css, /\.drawer-title-btn:not\(\.is-active\):active,\s*\.drawer-title-btn\[aria-selected="false"\]:active\s*\{[\s\S]*color:\s*var\(--drawer-tab-pressed\);/);
+  assert.match(css, /\.todo-title\s*\{[\s\S]*font-weight:\s*400;[\s\S]*line-height:\s*1\.45;/);
+});
+
+test('dynamic animation styles are generated by JavaScript instead of hardcoded CSS', () => {
+  // Verify that hardcoded nth-child selectors are removed from CSS
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+  
+  // Should NOT have hardcoded mission-card nth-child rules
+  assert.doesNotMatch(css, /\.active-section\.missions\.mission-card:nth-child\(\d+\)/);
+  assert.doesNotMatch(css, /\.abandoned-section\.missions\.mission-card:nth-child\(\d+\)/);
+  assert.doesNotMatch(css, /\.deferred-list\.deferred-item:nth-child\(\d+\)/);
+  
+  // Should have the dynamic injection function in JS
+  assert.match(appJs, /function injectDynamicAnimationStyles\(\)/);
+  assert.match(appJs, /document\.getElementById\('dynamic-animation-styles'\)/);
+  assert.match(appJs, /createElement\('style'\)/);
+  assert.match(appJs, /MAX_STAGGER_COUNT = 10/);
+  assert.match(appJs, /STAGGER_INCREMENT = 0\.05/);
+  assert.match(appJs, /i <= MAX_STAGGER_COUNT/);
+  assert.match(appJs, /\.toFixed\(2\)/);
+  assert.match(appJs, /body\.\$\{ENTRY_ANIMATIONS_CLASS\} \.active-section \.missions \.mission-card:nth-child\(\$\{i\}\)/);
+  assert.match(appJs, /body\.\$\{ENTRY_ANIMATIONS_CLASS\} \.abandoned-section \.missions \.mission-card:nth-child\(\$\{i\}\)/);
+  assert.match(appJs, /injectDynamicAnimationStyles\(\);/);
+  assert.match(appJs, /primeEntryAnimations\(\);/);
+  assert.match(appJs, /document\.addEventListener\('pointerdown', disableEntryAnimations, \{ capture: true, passive: true \}\)/);
+  assert.match(css, /body\.entry-animations-enabled header \{ animation: fadeUp 0\.5s ease both; \}/);
+});
+
+test('dashboard auto-refreshes when tabs change via background message', () => {
+  const bgJs = fs.readFileSync(path.join(__dirname, 'background.js'), 'utf8');
+  
+  // Background should notify Tab Harbor pages
+  assert.match(bgJs, /notifyTabHarborPages/);
+  assert.match(bgJs, /chrome\.tabs\.sendMessage/);
+  assert.match(bgJs, /action:\s*'tabs-changed'/);
+  assert.match(bgJs, /triggerTabId/);
+  assert.match(bgJs, /source:\s*'tabs\.onCreated'/);
+  assert.match(bgJs, /source:\s*'tabs\.onUpdated'/);
+  assert.match(bgJs, /chrome\.tabs\.onCreated\.addListener/);
+  assert.match(bgJs, /chrome\.tabs\.onRemoved\.addListener/);
+  
+  // Dashboard should listen for messages and refresh
+  assert.match(appJs, /setupTabChangeListener/);
+  assert.match(appJs, /chrome\.runtime\.onMessage\.addListener/);
+  assert.match(appJs, /message\.action === 'tabs-changed'/);
+  assert.match(appJs, /shouldSkipStartupTabChange\(message\)/);
+  assert.match(appJs, /initializeDashboardRuntime[\s\S]*window\.__suppressAutoRefreshUntil = Math\.max\([\s\S]*Date\.now\(\) \+ 2000/);
+  assert.match(appJs, /dashboardStartupTabChangeIgnoreUntil/);
+  assert.match(appJs, /currentDashboardTabId/);
+  assert.match(appJs, /setTimeout[\s\S]*renderDashboard/);
+  assert.match(appJs, /__tabRefreshTimeout/);
+});
+
+test('closing duplicate Tab Harbor tabs rerenders without dropping chrome tab group mode', () => {
+  assert.match(
+    runtimeJs,
+    /if \(action === 'close-tabout-dupes'\) \{[\s\S]*window\.__suppressAutoRefreshUntil = Date\.now\(\) \+ 2000;[\s\S]*await closeTabOutDupes\(\);[\s\S]*await renderDashboard\(\);[\s\S]*window\.__suppressAutoRefreshUntil = 0;[\s\S]*updateBackToTopVisibility\(\);/
+  );
+});
+
+test('chrome tab group mode stays active while the toggle is on', () => {
+  assert.match(
+    runtimeJs,
+    /async function applyChromeTabGroupsToggle\(nextEnabled\) \{[\s\S]*chromeTabGroupsEnabled = enable;[\s\S]*if \(typeof setImportMode === 'function'\) setImportMode\(importedCount > 0\);[\s\S]*await renderDashboard\(\);/
+  );
+  assert.doesNotMatch(
+    runtimeJs,
+    /applyChromeTabGroupsToggle[\s\S]*setImportMode\(false\)/
+  );
+  assert.doesNotMatch(
+    runtimeJs,
+    /scheduleChromeTabGroupsImport[\s\S]*setImportMode\(false\)/
+  );
+  assert.doesNotMatch(
+    runtimeJs,
+    /initializeDashboardRuntime[\s\S]*setImportMode\(false\)/
+  );
+});
+
+test('discard tab supports per-chip, group-level, and global sleep-all with gated visibility', () => {
+  assert.match(runtimeJs, /async function discardTab\(tabId\)\s*\{[\s\S]*chrome\.tabs\.discard\(/);
+  assert.match(runtimeJs, /data-action="discard-tab"/);
+  assert.match(runtimeJs, /data-action="sleep-domain-tabs"/);
+  assert.match(runtimeJs, /data-action="sleep-all-open-tabs"/);
+  assert.match(runtimeJs, /page-chip--discarded/);
+  assert.match(runtimeJs, /if \(action === 'discard-tab'\)\s*\{[\s\S]*await fetchOpenTabs\(\);[\s\S]*await renderDashboard\(\);/);
+  assert.match(runtimeJs, /if \(action === 'sleep-domain-tabs'\)\s*\{[\s\S]*await fetchOpenTabs\(\);[\s\S]*await renderDashboard\(\);/);
+
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+  assert.match(css, /\.chip-discard:hover\s*\{[\s\S]*color:\s*var\(--muted\);/);
+  assert.match(css, /\.page-chip--discarded\s*\{[\s\S]*opacity:\s*0\.6;/);
+  assert.match(css, /\.page-chip--discarded\s\.chip-text\s*\{[\s\S]*text-decoration:\s*line-through;/);
+});
+
+test('theme menu keeps chrome tab groups above hitokoto and uses left-aligned toggles', () => {
+  assert.match(
+    runtimeJs,
+    /<label class="theme-menu-toggle-label theme-menu-toggle-button-row">[\s\S]*data-action="toggle-chrome-tab-groups"[\s\S]*theme-menu-label theme-menu-toggle-text[\s\S]*Chrome tab groups[\s\S]*<\/label>[\s\S]*<label class="theme-menu-toggle-label theme-menu-toggle-button-row">[\s\S]*data-action="toggle-hitokoto"[\s\S]*theme-menu-label theme-menu-toggle-text[\s\S]*一言/
+  );
+
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf8');
+  assert.match(css, /\.theme-menu-toggle-text\s*\{[\s\S]*padding-top:\s*0;[\s\S]*flex:\s*1 1 auto;/);
+  assert.match(css, /\.theme-menu-toggle-button-row\s*\{[\s\S]*cursor:\s*default;/);
+});
+
+test('hitokoto uses cached text and refreshes in the background without blocking dashboard render', () => {
+  assert.match(runtimeJs, /const HITOKOTO_CACHE_KEY = 'hitokotoCache';/);
+  assert.match(runtimeJs, /function renderCachedHitokoto\(/);
+  assert.match(runtimeJs, /function refreshHitokotoInBackground\(/);
+  assert.match(runtimeJs, /function warmHitokotoCacheInBackground\(/);
+  assert.match(runtimeJs, /renderCachedHitokoto\(hitokotoTextEl, hitokotoFromEl\);[\s\S]*void warmHitokotoCacheInBackground\(\);/);
+
+  const renderStaticDashboardBody = runtimeJs.match(
+    /async function renderStaticDashboard\(\) \{([\s\S]*?)\n\}\n\nasync function renderDashboard/
+  )?.[1] || '';
+  assert.doesNotMatch(renderStaticDashboardBody, /await fetchHitokoto/);
+  assert.doesNotMatch(renderStaticDashboardBody, /refreshHitokotoInBackground/);
+});
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..574682e
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,22 @@
+{
+  "manifest_version": 3,
+  "name": "Tab Harbor",
+  "version": "1.1.1",
+  "description": "A new tab dashboard for organizing open tabs, quick links, todos, and saved tab sessions in one calm workspace.",
+  "permissions": ["tabs", "storage", "search", "clipboardRead", "tabGroups", "favicon"],
+  "chrome_url_overrides": { "newtab": "extension/index.html" },
+  "background": { "service_worker": "extension/background.js" },
+  "action": {
+    "default_title": "Tab Harbor",
+    "default_popup": "extension/popup/popup.html",
+    "default_icon": {
+      "16": "extension/icons/icon16.png",
+      "48": "extension/icons/icon48.png"
+    }
+  },
+  "icons": {
+    "16": "extension/icons/icon16.png",
+    "48": "extension/icons/icon48.png",
+    "128": "extension/icons/icon128.png"
+  }
+}
diff --git a/privacy.html b/privacy.html
new file mode 100644
index 0000000..37cb9bb
--- /dev/null
+++ b/privacy.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tab Harbor Privacy Policy</title>
+  <meta name="description" content="Privacy Policy for Tab Harbor, a calmer Chrome new tab workspace for tabs, quick links, saved reads, and lightweight todos.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --ink: #1a1613;
+      --paper: #f8f5f0;
+      --card: #fffdf9;
+      --warm-gray: #e8e2da;
+      --muted: #80776f;
+      --accent: #8a653f;
+      --accent-soft: #f2e7db;
+      --accent-border: #d4b396;
+      --shadow: 0 18px 42px rgba(26, 22, 19, 0.08);
+      --line: rgba(212, 179, 150, 0.24);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: "Public Sans", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, rgba(242, 231, 219, 0.8), transparent 34%),
+        radial-gradient(circle at top right, rgba(232, 226, 218, 0.55), transparent 28%),
+        var(--paper);
+      line-height: 1.7;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      opacity: 0.04;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    }
+
+    .page {
+      width: min(920px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 36px 0 72px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 28px;
+      padding: 0 2px 12px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .brandmark {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+      color: var(--ink);
+      text-decoration: none;
+    }
+
+    .brandmark-badge {
+      width: 38px;
+      height: 38px;
+      border-radius: 12px;
+      background: color-mix(in srgb, var(--accent-soft) 72%, var(--card) 28%);
+      border: 1px solid color-mix(in srgb, var(--accent-border) 74%, var(--card) 26%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .brandmark-badge img {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+
+    .brandmark-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .brandmark-title {
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+    }
+
+    .brandmark-meta {
+      font-size: 11px;
+      color: var(--muted);
+    }
+
+    .topbar-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px 14px;
+      justify-content: flex-end;
+    }
+
+    .topbar-link {
+      display: inline-flex;
+      align-items: center;
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+    }
+
+    .topbar-link + .topbar-link::before {
+      content: "/";
+      margin-right: 14px;
+      color: color-mix(in srgb, var(--muted) 76%, var(--paper) 24%);
+    }
+
+    .hero {
+      padding: 6px 2px 28px;
+    }
+
+    .eyebrow {
+      margin: 0 0 14px;
+      font-size: 11px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--muted);
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-family: "Libre Caslon Display", serif;
+      font-size: clamp(42px, 7vw, 64px);
+      line-height: 0.95;
+      font-weight: 400;
+      letter-spacing: -0.03em;
+    }
+
+    .subtitle {
+      margin: 18px 0 0;
+      max-width: 60ch;
+      font-size: 16px;
+      color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
+    }
+
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+      margin-top: 18px;
+      color: var(--muted);
+      font-size: 12px;
+      letter-spacing: 0.01em;
+    }
+
+    .meta-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .meta-item + .meta-item::before {
+      content: "";
+      width: 18px;
+      height: 1px;
+      background: rgba(212, 179, 150, 0.45);
+      transform: translateY(-1px);
+    }
+
+    .layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 244px;
+      gap: 18px;
+      align-items: start;
+    }
+
+    .card {
+      background: rgba(255, 253, 249, 0.9);
+      border: 1px solid rgba(212, 179, 150, 0.35);
+      border-radius: 24px;
+      box-shadow: var(--shadow);
+      padding: 28px 28px 12px;
+      backdrop-filter: blur(10px);
+    }
+
+    .toc-card {
+      position: sticky;
+      top: 18px;
+      padding: 18px 18px 8px;
+    }
+
+    .toc-title {
+      margin: 0 0 12px;
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--muted);
+      font-weight: 700;
+    }
+
+    .toc {
+      display: grid;
+      gap: 10px;
+    }
+
+    .toc a {
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 1.45;
+    }
+
+    .toc a:hover,
+    .toc a:focus-visible {
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+
+    section {
+      padding-bottom: 18px;
+      margin-bottom: 8px;
+      border-bottom: 1px solid rgba(212, 179, 150, 0.18);
+    }
+
+    section:last-of-type {
+      border-bottom: none;
+    }
+
+    h2 {
+      margin: 0 0 12px;
+      font-size: 22px;
+      line-height: 1.2;
+      font-weight: 600;
+      color: var(--ink);
+    }
+
+    .legal-note {
+      margin: 0 0 20px;
+      padding: 16px 18px;
+      border-radius: 18px;
+      border: 1px solid rgba(212, 179, 150, 0.24);
+      background: linear-gradient(180deg, rgba(242, 231, 219, 0.54), rgba(255, 253, 249, 0.78));
+    }
+
+    .legal-note-title {
+      margin: 0 0 8px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent);
+    }
+
+    .legal-note p:last-child {
+      margin-bottom: 0;
+    }
+
+    p {
+      margin: 0 0 14px;
+    }
+
+    ul {
+      margin: 0 0 16px;
+      padding-left: 20px;
+    }
+
+    li {
+      margin-bottom: 8px;
+    }
+
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.95em;
+      background: rgba(232, 226, 218, 0.6);
+      padding: 2px 6px;
+      border-radius: 6px;
+    }
+
+    .contact {
+      margin-top: 10px;
+      padding: 18px 20px;
+      border-radius: 18px;
+      background: color-mix(in srgb, var(--accent-soft) 58%, var(--card) 42%);
+      border: 1px solid rgba(212, 179, 150, 0.28);
+    }
+
+    .footer {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 14px 20px;
+      margin-top: 26px;
+      padding: 16px 4px 0;
+      border-top: 1px solid rgba(212, 179, 150, 0.2);
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .footer-brand {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .footer-title {
+      color: var(--ink);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .footer-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px 14px;
+      justify-content: flex-end;
+    }
+
+    a {
+      color: var(--accent);
+    }
+
+    a:hover,
+    a:focus-visible {
+      text-underline-offset: 3px;
+    }
+
+    @media (max-width: 900px) {
+      .layout {
+        grid-template-columns: 1fr;
+      }
+
+      .toc-card {
+        position: static;
+        order: -1;
+      }
+
+      .toc {
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 10px 16px;
+      }
+    }
+
+    @media (max-width: 720px) {
+      .page {
+        width: min(100vw - 24px, 920px);
+        padding: 22px 0 42px;
+      }
+
+      .card {
+        padding: 22px 20px 8px;
+        border-radius: 20px;
+      }
+
+      .subtitle {
+        font-size: 15px;
+      }
+
+      .topbar {
+        padding-bottom: 12px;
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      .topbar-links {
+        justify-content: flex-start;
+      }
+
+      .footer {
+        grid-template-columns: 1fr;
+      }
+
+      .footer-links {
+        justify-content: flex-start;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <div class="topbar">
+      <a class="brandmark" href="https://github.com/V-IOLE-T/tab-harbor" target="_blank" rel="noreferrer">
+        <span class="brandmark-badge" aria-hidden="true">
+          <img src="extension/icons/icon128.png" alt="">
+        </span>
+        <span class="brandmark-text">
+          <span class="brandmark-title">Tab Harbor</span>
+          <span class="brandmark-meta">Chrome extension privacy page</span>
+        </span>
+      </a>
+      <div class="topbar-links">
+        <a class="topbar-link" href="https://github.com/V-IOLE-T/tab-harbor" target="_blank" rel="noreferrer">Back to project home</a>
+        <a class="topbar-link" href="#contact">Contact</a>
+        <a class="topbar-link" href="https://github.com/V-IOLE-T/tab-harbor/blob/main/PRIVACY.md" target="_blank" rel="noreferrer">Markdown</a>
+      </div>
+    </div>
+
+    <header class="hero">
+      <p class="eyebrow">Tab Harbor</p>
+      <h1>Privacy Policy</h1>
+      <p class="subtitle">
+        Tab Harbor is a calmer Chrome new tab workspace for open tabs, quick links, saved reads, and lightweight todos.
+        This page explains what data the extension accesses, why it needs that data, and how that data is handled.
+      </p>
+      <div class="meta" aria-label="Policy metadata">
+        <span class="meta-item">Last updated: 2026-05-27</span>
+        <span class="meta-item">Local-first by default</span>
+        <span class="meta-item">No remote code</span>
+      </div>
+    </header>
+
+    <div class="layout">
+      <article class="card">
+        <div class="legal-note">
+          <p class="legal-note-title">Privacy Snapshot</p>
+          <p>Tab Harbor is a local-first Chrome extension. It organizes tabs, quick links, saved reads, and lightweight todos inside the new tab page. It does not require an account, does not sell user data, and does not use remote code.</p>
+        </div>
+
+        <section id="summary">
+          <h2>1. Summary</h2>
+          <p>Tab Harbor is designed to work locally in the browser.</p>
+          <ul>
+            <li>It does not require a user account.</li>
+            <li>It does not sell user data.</li>
+            <li>It does not use remote code.</li>
+            <li>It does not send workspace data to a developer-controlled backend.</li>
+          </ul>
+          <p>Most extension data is stored locally through Chrome extension storage APIs.</p>
+        </section>
+
+        <section id="data-accessed">
+          <h2>2. Information the extension accesses</h2>
+          <p>To provide its core features, Tab Harbor may access the following categories of data:</p>
+          <ul>
+            <li>Open tab metadata, including tab titles, URLs, and tab state</li>
+            <li>Quick links created by the user</li>
+            <li>Saved read-later items created by the user</li>
+            <li>Todo items created by the user</li>
+            <li>Theme, transparency, layout, and ordering preferences selected by the user</li>
+            <li>Clipboard image or SVG content, but only when the user explicitly pastes a custom shortcut icon</li>
+          </ul>
+          <p>Tab Harbor does not intentionally collect sensitive categories such as health data, financial account credentials, or personal communications.</p>
+        </section>
+
+        <section id="data-use">
+          <h2>3. How the data is used</h2>
+          <p>Tab Harbor uses the accessed data only to provide the extension’s single purpose:</p>
+          <ul>
+            <li>Show and organize the user’s current browser session in the new tab page</li>
+            <li>Help the user review, group, focus, close, deduplicate, save, and restore tabs</li>
+            <li>Let the user manage quick links, saved reads, and lightweight todos in one workspace</li>
+            <li>Restore user preferences and layout state when the new tab page is opened again</li>
+            <li>Let the user paste a custom icon into a shortcut when they explicitly choose to do so</li>
+          </ul>
+          <p>Tab Harbor does not use this data for advertising, profiling, creditworthiness, or unrelated analytics.</p>
+        </section>
+
+        <section id="permissions">
+          <h2>4. Chrome permissions and why they are needed</h2>
+          <p>Tab Harbor requests the following Chrome permissions:</p>
+          <p><strong><code>tabs</code></strong></p>
+          <ul>
+            <li>display open tabs in the workspace</li>
+            <li>group tabs by site or workflow</li>
+            <li>focus a selected tab</li>
+            <li>close or deduplicate tabs at the user’s request</li>
+            <li>save or restore tabs as part of the read-later workflow</li>
+          </ul>
+          <p><strong><code>storage</code></strong></p>
+          <ul>
+            <li>save quick links, saved reads, todos, theme settings, layout order, and other local workspace preferences</li>
+          </ul>
+          <p><strong><code>search</code></strong></p>
+          <ul>
+            <li>let the user submit searches from the built-in search field through the browser’s default search engine</li>
+          </ul>
+          <p><strong><code>clipboardRead</code></strong></p>
+          <ul>
+            <li>let the user explicitly paste an image or SVG into the shortcut editor for a custom shortcut icon</li>
+          </ul>
+          <p><strong><code>tabGroups</code></strong></p>
+          <ul>
+            <li>read existing native Chrome tab groups</li>
+            <li>create or update Chrome tab groups to match the workspace</li>
+            <li>keep group titles, colors, and collapsed state aligned with the user’s chosen organization</li>
+            <li>respond when Chrome tab groups change outside the Tab Harbor page</li>
+          </ul>
+          <p><strong><code>favicon</code></strong></p>
+          <ul>
+            <li>request and display site icons for tabs, saved sessions, and quick shortcuts more reliably</li>
+            <li>use Chrome’s packaged favicon endpoint, a site’s own <code>favicon.ico</code>, or a fallback favicon service when no better icon is available</li>
+          </ul>
+        </section>
+
+        <section id="storage">
+          <h2>5. Data storage and retention</h2>
+          <p>Tab Harbor stores extension data locally using Chrome extension storage APIs, primarily <code>chrome.storage.local</code>.</p>
+          <p>This includes items such as quick links, saved reads, todos, theme preferences, and layout state.</p>
+          <p>This data remains in the browser profile until the user removes it through the extension UI, clears extension storage, or uninstalls the extension.</p>
+        </section>
+
+        <section id="sharing">
+          <h2>6. Data sharing</h2>
+          <p>Tab Harbor does not sell user data.</p>
+          <p>Tab Harbor does not transfer user data to third parties except where necessary to perform a user-requested browser action, such as opening a page chosen by the user, submitting a search through the browser’s default search engine, or requesting favicon resources needed to display site icons in the workspace.</p>
+          <p>Aside from those normal browser actions initiated by the user, Tab Harbor does not send workspace data to a developer-controlled remote service.</p>
+        </section>
+
+        <section id="remote-code">
+          <h2>7. Remote code</h2>
+          <p>Tab Harbor does not use remote code.</p>
+          <p>All JavaScript and extension assets required to run the extension are packaged with the extension bundle. Tab Harbor does not download and execute external JavaScript or WebAssembly at runtime.</p>
+        </section>
+
+        <section id="third-party">
+          <h2>8. Third-party services</h2>
+          <p>Tab Harbor relies on Chrome’s extension platform APIs to function.</p>
+          <p>When a user opens a webpage or submits a search through the extension, the browser may connect to the destination website or the configured default search engine as part of the user’s explicit action.</p>
+          <p>To render site icons, Tab Harbor may also request favicon resources from a page’s origin or a fallback favicon service based on the page URLs already visible in the workspace.</p>
+        </section>
+
+        <section id="choices">
+          <h2>9. User choices and controls</h2>
+          <p>Users can control their data by editing or deleting quick links, deleting saved reads or todos, changing theme and layout preferences, uninstalling the extension, or clearing extension storage through browser settings.</p>
+          <p>If you do not want Tab Harbor to access your open tabs, do not use the extension.</p>
+        </section>
+
+        <section id="children">
+          <h2>10. Children’s privacy</h2>
+          <p>Tab Harbor is not directed to children under 13, and the developer does not knowingly collect personal information from children.</p>
+        </section>
+
+        <section id="changes">
+          <h2>11. Changes to this policy</h2>
+          <p>This Privacy Policy may be updated from time to time to reflect product changes, permission changes, or legal requirements.</p>
+          <p>The latest version will be published at the public URL associated with the extension listing.</p>
+        </section>
+
+        <section id="contact">
+          <h2>12. Contact</h2>
+          <div class="contact">
+            <p>If you have questions about this Privacy Policy or Tab Harbor, you may contact:</p>
+            <p><strong>Publisher contact email:</strong> <a href="mailto:lunatic.halle@gmail.com">lunatic.halle@gmail.com</a></p>
+          </div>
+        </section>
+      </article>
+
+      <aside class="card toc-card">
+        <p class="toc-title">Contents</p>
+        <nav class="toc" aria-label="Table of contents">
+          <a href="#summary">1. Summary</a>
+          <a href="#data-accessed">2. Information the extension accesses</a>
+          <a href="#data-use">3. How the data is used</a>
+          <a href="#permissions">4. Chrome permissions</a>
+          <a href="#storage">5. Data storage and retention</a>
+          <a href="#sharing">6. Data sharing</a>
+          <a href="#remote-code">7. Remote code</a>
+          <a href="#third-party">8. Third-party services</a>
+          <a href="#choices">9. User choices and controls</a>
+          <a href="#children">10. Children’s privacy</a>
+          <a href="#changes">11. Changes to this policy</a>
+          <a href="#contact">12. Contact</a>
+        </nav>
+      </aside>
+    </div>
+
+    <footer class="footer">
+      <div class="footer-brand">
+        <span class="footer-title">Tab Harbor</span>
+        <span>Privacy page for Chrome Web Store review and public reference.</span>
+        <span>Copyright © 2026 Tab Harbor. All rights reserved.</span>
+      </div>
+      <div class="footer-links">
+        <a href="https://github.com/V-IOLE-T/tab-harbor" target="_blank" rel="noreferrer">GitHub repository</a>
+        <a href="https://github.com/V-IOLE-T/tab-harbor/blob/main/PRIVACY.md" target="_blank" rel="noreferrer">Source markdown</a>
+      </div>
+    </footer>
+  </main>
+</body>
+</html>