diff --git a/CLAUDE.md b/CLAUDE.md
index fa9bc2f81..c3fe11a55 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -46,7 +46,8 @@ plannotator/
 │   │   ├── ide.ts                # VS Code diff integration (openEditorDiff)
 │   │   ├── editor-annotations.ts  # VS Code editor annotation endpoints
 │   │   └── project.ts            # Project name detection for tags
-│   ├── ui/                       # Shared React components
+│   ├── ui/                       # Shared React components + theme
+│   │   ├── theme.css             # Single source of truth for color tokens + Tailwind bridge
 │   │   ├── components/           # Viewer, Toolbar, Settings, etc.
 │   │   │   ├── plan-diff/        # PlanDiffBadge, PlanDiffViewer, clean/raw diff views
 │   │   │   └── sidebar/          # SidebarContainer, SidebarTabs, VersionBrowser
diff --git a/apps/marketing/src/layouts/Base.astro b/apps/marketing/src/layouts/Base.astro
index 43e5dbbc1..ea75c8b52 100644
--- a/apps/marketing/src/layouts/Base.astro
+++ b/apps/marketing/src/layouts/Base.astro
@@ -46,15 +46,19 @@ import '../styles/global.css';
   <body class="min-h-screen antialiased">
     <slot />
     <script is:inline>
-      // Read theme cookie and set class before paint to prevent FOUC
+      // Read theme cookies and set classes before paint to prevent FOUC
       (function() {
-        var match = document.cookie.match(/(?:^|; )plannotator-theme=([^;]*)/);
-        var theme = match ? decodeURIComponent(match[1]) : 'dark';
         var root = document.documentElement;
-        root.classList.remove('light');
-        if (theme === 'light') {
+        // Color theme (palette) — marketing uses whatever the user set in the app
+        var colorMatch = document.cookie.match(/(?:^|; )plannotator-color-theme=([^;]*)/);
+        var colorTheme = colorMatch ? decodeURIComponent(colorMatch[1]) : 'plannotator';
+        root.classList.add('theme-' + colorTheme);
+        // Mode (dark/light/system)
+        var modeMatch = document.cookie.match(/(?:^|; )plannotator-theme=([^;]*)/);
+        var mode = modeMatch ? decodeURIComponent(modeMatch[1]) : 'dark';
+        if (mode === 'light') {
           root.classList.add('light');
-        } else if (theme === 'system') {
+        } else if (mode === 'system') {
           if (window.matchMedia('(prefers-color-scheme: light)').matches) {
             root.classList.add('light');
           }
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
index d393f879e..d9e186a98 100644
--- a/apps/marketing/src/styles/global.css
+++ b/apps/marketing/src/styles/global.css
@@ -6,151 +6,7 @@
 @source "../layouts/**/*.astro";
 @source "../pages/**/*.astro";
 
-:root {
-  --background: oklch(0.15 0.02 260);
-  --foreground: oklch(0.90 0.01 260);
-  --card: oklch(0.22 0.02 260);
-  --card-foreground: oklch(0.90 0.01 260);
-  --popover: oklch(0.28 0.025 260);
-  --popover-foreground: oklch(0.90 0.01 260);
-  --primary: oklch(0.75 0.18 280);
-  --primary-foreground: oklch(0.15 0.02 260);
-  --secondary: oklch(0.65 0.15 180);
-  --secondary-foreground: oklch(0.15 0.02 260);
-  --muted: oklch(0.26 0.02 260);
-  --muted-foreground: oklch(0.72 0.02 260);
-  --accent: oklch(0.70 0.20 60);
-  --accent-foreground: oklch(0.15 0.02 260);
-  --destructive: oklch(0.65 0.20 25);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.35 0.02 260);
-  --input: oklch(0.26 0.02 260);
-  --ring: oklch(0.75 0.18 280);
-  --success: oklch(0.72 0.17 150);
-  --success-foreground: oklch(0.15 0.02 260);
-  --warning: oklch(0.75 0.15 85);
-  --warning-foreground: oklch(0.20 0.02 260);
-
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  --radius: 0.75rem;
-}
-
-.light {
-  --background: oklch(0.97 0.005 260);
-  --foreground: oklch(0.18 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 260);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.02 260);
-  --primary: oklch(0.50 0.25 280);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.50 0.18 180);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.92 0.01 260);
-  --muted-foreground: oklch(0.40 0.02 260);
-  --accent: oklch(0.60 0.22 50);
-  --accent-foreground: oklch(0.18 0.02 260);
-  --destructive: oklch(0.50 0.25 25);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.88 0.01 260);
-  --input: oklch(0.92 0.01 260);
-  --ring: oklch(0.50 0.25 280);
-  --success: oklch(0.45 0.20 150);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.55 0.18 85);
-  --warning-foreground: oklch(0.18 0.02 260);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-* {
-  border-color: var(--border);
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--background);
-  color: var(--foreground);
-  font-feature-settings: "ss01", "ss02", "cv01";
-}
-
-/* Subtle grid background */
-.bg-grid {
-  background-image:
-    linear-gradient(to right, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px);
-  background-size: 24px 24px;
-}
-
-.light .bg-grid {
-  background-image:
-    linear-gradient(to right, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px),
-    linear-gradient(to bottom, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px);
-}
-
-/* Glow effects */
-.glow-primary {
-  box-shadow: 0 0 20px oklch(0.75 0.18 280 / 0.15), 0 0 40px oklch(0.75 0.18 280 / 0.05);
-}
-
-.glow-sm {
-  box-shadow: 0 0 10px oklch(0.75 0.18 280 / 0.1);
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
-
-/* Selection */
-::selection {
-  background: oklch(0.75 0.18 280 / 0.3);
-}
-
-/* Smooth transitions */
-* {
-  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* Focus states */
-:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-}
+@import "../../../../packages/ui/theme.css";
 
 /* Shiki dual theme — dark by default, light when .light class */
 .astro-code {
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index f66abb620..e1f0f0bc9 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { parseMarkdownToBlocks, exportAnnotations, exportLinkedDocAnnotations, exportEditorAnnotations, extractFrontmatter, Frontmatter } from '@plannotator/ui/utils/parser';
+import { parseMarkdownToBlocks, exportAnnotations, exportLinkedDocAnnotations, exportEditorAnnotations, extractFrontmatter, wrapFeedbackForAgent, Frontmatter } from '@plannotator/ui/utils/parser';
 import { Viewer, ViewerHandle } from '@plannotator/ui/components/Viewer';
 import { AnnotationPanel } from '@plannotator/ui/components/AnnotationPanel';
 import { ExportModal } from '@plannotator/ui/components/ExportModal';
@@ -1041,7 +1041,7 @@ const App: React.FC = () => {
                           className="w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors flex items-center gap-2"
                         >
                           <svg className="w-3.5 h-3.5 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m4-4l-4 4m0 0l-4-4m4 4V4" />
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" />
                           </svg>
                           Import Review
                         </button>
@@ -1229,6 +1229,9 @@ const App: React.FC = () => {
             editorAnnotations={editorAnnotations}
             onDeleteEditorAnnotation={deleteEditorAnnotation}
             onClose={() => setIsPanelOpen(false)}
+            onQuickCopy={async () => {
+              await navigator.clipboard.writeText(wrapFeedbackForAgent(annotationsOutput));
+            }}
           />
         </div>
 
diff --git a/packages/editor/index.css b/packages/editor/index.css
index cb2373d35..d4794ca7b 100644
--- a/packages/editor/index.css
+++ b/packages/editor/index.css
@@ -5,142 +5,14 @@
 @source "../ui/hooks/**/*.ts";
 @source "./*.tsx";
 
-:root {
-  --background: oklch(0.15 0.02 260);
-  --foreground: oklch(0.90 0.01 260);
-  --card: oklch(0.22 0.02 260);
-  --card-foreground: oklch(0.90 0.01 260);
-  --popover: oklch(0.28 0.025 260);
-  --popover-foreground: oklch(0.90 0.01 260);
-  --primary: oklch(0.75 0.18 280);
-  --primary-foreground: oklch(0.15 0.02 260);
-  --secondary: oklch(0.65 0.15 180);
-  --secondary-foreground: oklch(0.15 0.02 260);
-  --muted: oklch(0.26 0.02 260);
-  --muted-foreground: oklch(0.72 0.02 260);
-  --accent: oklch(0.70 0.20 60);
-  --accent-foreground: oklch(0.15 0.02 260);
-  --destructive: oklch(0.65 0.20 25);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.35 0.02 260);
-  --input: oklch(0.26 0.02 260);
-  --ring: oklch(0.75 0.18 280);
-  --success: oklch(0.72 0.17 150);
-  --success-foreground: oklch(0.15 0.02 260);
-  --warning: oklch(0.75 0.15 85);
-  --warning-foreground: oklch(0.20 0.02 260);
-
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  --radius: 0.75rem;
-}
-
-.light {
-  --background: oklch(0.97 0.005 260);
-  --foreground: oklch(0.18 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 260);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.02 260);
-  --primary: oklch(0.50 0.25 280);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.50 0.18 180);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.92 0.01 260);
-  --muted-foreground: oklch(0.40 0.02 260);
-  --accent: oklch(0.60 0.22 50);
-  --accent-foreground: oklch(0.18 0.02 260);
-  --destructive: oklch(0.50 0.25 25);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.88 0.01 260);
-  --input: oklch(0.92 0.01 260);
-  --ring: oklch(0.50 0.25 280);
-  --success: oklch(0.45 0.20 150);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.55 0.18 85);
-  --warning-foreground: oklch(0.18 0.02 260);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-@layer base {
-  * {
-    border-color: var(--border);
-  }
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--background);
-  color: var(--foreground);
-  font-feature-settings: "ss01", "ss02", "cv01";
-}
-
-/* Subtle grid background */
-.bg-grid {
-  background-image:
-    linear-gradient(to right, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px);
-  background-size: 24px 24px;
-}
-
-.light .bg-grid {
-  background-image:
-    linear-gradient(to right, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px),
-    linear-gradient(to bottom, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px);
-}
-
-/* Glow effects */
-.glow-primary {
-  box-shadow: 0 0 20px oklch(0.75 0.18 280 / 0.15), 0 0 40px oklch(0.75 0.18 280 / 0.05);
-}
-
-.glow-sm {
-  box-shadow: 0 0 10px oklch(0.75 0.18 280 / 0.1);
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+@import "../ui/theme.css";
 
 /* Code blocks */
 pre code.hljs {
   display: block;
   padding: 1rem;
   border-radius: var(--radius);
-  background: var(--muted) !important;
+  background: var(--code-bg) !important;
   font-size: 0.8125rem;
   line-height: 1.6;
 }
@@ -203,24 +75,6 @@ pre code.hljs .hljs-code {
   color: oklch(0.45 0.20 280) !important;
 }
 
-/* Selection */
-::selection {
-  background: oklch(0.75 0.18 280 / 0.3);
-}
-
-/* Smooth transitions */
-* {
-  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* Focus states */
-:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-}
-
 /* Annotation highlights */
 .annotation-highlight {
   border-radius: 2px;
@@ -229,7 +83,7 @@ pre code.hljs .hljs-code {
 }
 
 .annotation-highlight.deletion {
-  background: oklch(0.65 0.20 25 / 0.35);
+  background: oklch(from var(--destructive) l c h / 0.35);
   text-decoration: line-through;
   text-decoration-color: var(--destructive);
   text-decoration-thickness: 2px;
@@ -250,9 +104,9 @@ pre code.hljs .hljs-code {
 }
 
 .annotation-highlight.focused {
-  background: oklch(0.70 0.20 200 / 0.45) !important;
-  box-shadow: 0 0 8px oklch(0.70 0.20 200 / 0.4);
-  border-bottom: 2px solid oklch(0.70 0.20 200);
+  background: oklch(from var(--focus-highlight) l c h / 0.45) !important;
+  box-shadow: 0 0 8px oklch(from var(--focus-highlight) l c h / 0.4);
+  border-bottom: 2px solid var(--focus-highlight);
   filter: none;
 }
 
@@ -273,25 +127,25 @@ pre code.hljs .hljs-code {
 /* Clean diff view - added content */
 .plan-diff-added {
   border-left: 3px solid var(--success);
-  background: oklch(0.72 0.17 150 / 0.06);
+  background: oklch(from var(--success) l c h / 0.06);
   padding-left: 0.75rem;
   border-radius: 0 0.25rem 0.25rem 0;
   margin: 0.25rem 0;
 }
 .light .plan-diff-added {
-  background: oklch(0.45 0.20 150 / 0.06);
+  background: oklch(from var(--success) l c h / 0.06);
 }
 
 /* Clean diff view - removed content */
 .plan-diff-removed {
   border-left: 3px solid var(--destructive);
-  background: oklch(0.65 0.20 25 / 0.06);
+  background: oklch(from var(--destructive) l c h / 0.06);
   padding-left: 0.75rem;
   border-radius: 0 0.25rem 0.25rem 0;
   margin: 0.25rem 0;
 }
 .light .plan-diff-removed {
-  background: oklch(0.50 0.25 25 / 0.06);
+  background: oklch(from var(--destructive) l c h / 0.06);
 }
 
 /* Clean diff view - unchanged (dimmed) */
@@ -301,21 +155,21 @@ pre code.hljs .hljs-code {
 
 /* Raw diff view - line styles */
 .plan-diff-line-added {
-  background: oklch(0.72 0.17 150 / 0.15);
+  background: oklch(from var(--success) l c h / 0.15);
   color: var(--success);
 }
 .plan-diff-line-removed {
-  background: oklch(0.65 0.20 25 / 0.15);
+  background: oklch(from var(--destructive) l c h / 0.15);
   color: var(--destructive);
   opacity: 0.75;
   text-decoration: line-through;
-  text-decoration-color: oklch(0.65 0.20 25 / 0.4);
+  text-decoration-color: oklch(from var(--destructive) l c h / 0.4);
 }
 .light .plan-diff-line-added {
-  background: oklch(0.45 0.20 150 / 0.12);
+  background: oklch(from var(--success) l c h / 0.12);
 }
 .light .plan-diff-line-removed {
-  background: oklch(0.50 0.25 25 / 0.12);
+  background: oklch(from var(--destructive) l c h / 0.12);
 }
 
 /* ========================================
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index ab7bad579..48fce9b8d 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -611,7 +611,8 @@ const ReviewApp: React.FC = () => {
             <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-secondary/15 text-secondary hidden md:inline">
               Code Review
             </span>
-            {origin && (
+            {/* Agent badge — unreliable for now across multiple harnesses */}
+            {/* {origin && (
               <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium hidden md:inline ${
                 origin === 'claude-code'
                   ? 'bg-orange-500/15 text-orange-400'
@@ -621,7 +622,7 @@ const ReviewApp: React.FC = () => {
               }`}>
                 {origin === 'claude-code' ? 'Claude Code' : origin === 'pi' ? 'Pi' : 'OpenCode'}
               </span>
-            )}
+            )} */}
             {repoInfo && (
               <>
                 <span className="text-muted-foreground/40 hidden md:inline">|</span>
diff --git a/packages/review-editor/components/DiffViewer.tsx b/packages/review-editor/components/DiffViewer.tsx
index 2a3a9e216..ec545e366 100644
--- a/packages/review-editor/components/DiffViewer.tsx
+++ b/packages/review-editor/components/DiffViewer.tsx
@@ -53,7 +53,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   canStage = false,
   stageError,
 }) => {
-  const { theme } = useTheme();
+  const { theme, colorTheme, resolvedMode } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
 
   const toolbar = useAnnotationToolbar({ patch, filePath, onLineSelection, onAddAnnotation, onEditAnnotation });
@@ -175,13 +175,36 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     );
   }, [toolbar.handleLineSelectionEnd]);
 
-  // Determine theme for @pierre/diffs
-  const pierreTheme = useMemo(() => {
-    const effectiveTheme = theme === 'system'
-      ? (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
-      : theme;
-    return effectiveTheme === 'light' ? 'pierre-light' : 'pierre-dark';
-  }, [theme]);
+  // Inject resolved colors into @pierre/diffs shadow DOM.
+  // CSS custom properties don't cross the shadow boundary, so we read computed
+  // values and pass them via unsafeCSS. Single state object avoids split renders.
+  const [pierreTheme, setPierreTheme] = useState<{ type: 'dark' | 'light'; css: string }>({ type: 'dark', css: '' });
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const styles = getComputedStyle(document.documentElement);
+      const bg = styles.getPropertyValue('--background').trim();
+      const fg = styles.getPropertyValue('--foreground').trim();
+      const muted = styles.getPropertyValue('--muted').trim();
+      if (!bg || !fg) return;
+      setPierreTheme({
+        type: resolvedMode,
+        css: `
+          :host, [data-diff], [data-file], [data-diffs-header], [data-error-wrapper], [data-virtualizer-buffer] {
+            --diffs-bg: ${bg} !important;
+            --diffs-fg: ${fg} !important;
+            --diffs-dark-bg: ${bg};
+            --diffs-light-bg: ${bg};
+            --diffs-dark: ${fg};
+            --diffs-light: ${fg};
+          }
+          pre, code { background-color: ${bg} !important; }
+          [data-file-info] { background-color: ${muted} !important; }
+          [data-column-number] { background-color: ${bg} !important; }
+        `,
+      });
+    });
+  }, [resolvedMode, colorTheme]);
 
   return (
     <div ref={containerRef} className="h-full overflow-auto relative" onMouseMove={toolbar.handleMouseMove}>
@@ -202,8 +225,8 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
           key={filePath}
           fileDiff={augmentedDiff}
           options={{
-            theme: pierreTheme,
-            themeType: 'dark',
+            themeType: pierreTheme.type,
+            unsafeCSS: pierreTheme.css,
             diffStyle,
             diffIndicators: 'bars',
             hunkSeparators: 'line-info',
diff --git a/packages/review-editor/index.css b/packages/review-editor/index.css
index b9dd71a58..be7d4817f 100644
--- a/packages/review-editor/index.css
+++ b/packages/review-editor/index.css
@@ -6,154 +6,35 @@
 @source "./*.tsx";
 @source "./components/**/*.tsx";
 
-:root {
-  --background: oklch(0.15 0.02 260);
-  --foreground: oklch(0.90 0.01 260);
-  --card: oklch(0.22 0.02 260);
-  --card-foreground: oklch(0.90 0.01 260);
-  --popover: oklch(0.28 0.025 260);
-  --popover-foreground: oklch(0.90 0.01 260);
-  --primary: oklch(0.75 0.18 280);
-  --primary-foreground: oklch(0.15 0.02 260);
-  --secondary: oklch(0.65 0.15 180);
-  --secondary-foreground: oklch(0.15 0.02 260);
-  --muted: oklch(0.26 0.02 260);
-  --muted-foreground: oklch(0.72 0.02 260);
-  --accent: oklch(0.70 0.20 60);
-  --accent-foreground: oklch(0.15 0.02 260);
-  --destructive: oklch(0.65 0.20 25);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.35 0.02 260);
-  --input: oklch(0.26 0.02 260);
-  --ring: oklch(0.75 0.18 280);
-  --success: oklch(0.72 0.17 150);
-  --success-foreground: oklch(0.15 0.02 260);
-  --warning: oklch(0.75 0.15 85);
-  --warning-foreground: oklch(0.20 0.02 260);
-
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  --radius: 0.75rem;
-}
-
-.light {
-  --background: oklch(0.97 0.005 260);
-  --foreground: oklch(0.18 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 260);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.02 260);
-  --primary: oklch(0.50 0.25 280);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.50 0.18 180);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.92 0.01 260);
-  --muted-foreground: oklch(0.40 0.02 260);
-  --accent: oklch(0.60 0.22 50);
-  --accent-foreground: oklch(0.18 0.02 260);
-  --destructive: oklch(0.50 0.25 25);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.88 0.01 260);
-  --input: oklch(0.92 0.01 260);
-  --ring: oklch(0.50 0.25 280);
-  --success: oklch(0.45 0.20 150);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.55 0.18 85);
-  --warning-foreground: oklch(0.18 0.02 260);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-* {
-  border-color: var(--border);
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--background);
-  color: var(--foreground);
-  font-feature-settings: "ss01", "ss02", "cv01";
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
-
-/* Selection */
-::selection {
-  background: oklch(0.75 0.18 280 / 0.3);
-}
-
-/* Smooth transitions */
-* {
-  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* Focus states */
-:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-}
+@import "../ui/theme.css";
 
 /* =====================================================
    Code Review Specific Styles
    ===================================================== */
 
-/* @pierre/diffs theme integration */
+/* @pierre/diffs theme integration — pass plannotator theme colors into shadow DOM */
 diffs-container {
-  --pierre-bg: var(--background);
-  --pierre-fg: var(--foreground);
+  --diffs-dark-bg: var(--background);
+  --diffs-light-bg: var(--background);
+  --diffs-dark: var(--foreground);
+  --diffs-light: var(--foreground);
 }
 
 /* Diff line backgrounds - synchronized with plannotator colors */
 .diff-line-addition {
-  background: oklch(0.72 0.17 150 / 0.12);
+  background: oklch(from var(--success) l c h / 0.12);
 }
 
 .diff-line-deletion {
-  background: oklch(0.65 0.20 25 / 0.12);
+  background: oklch(from var(--destructive) l c h / 0.12);
 }
 
 .light .diff-line-addition {
-  background: oklch(0.72 0.17 150 / 0.15);
+  background: oklch(from var(--success) l c h / 0.15);
 }
 
 .light .diff-line-deletion {
-  background: oklch(0.65 0.20 25 / 0.15);
+  background: oklch(from var(--destructive) l c h / 0.15);
 }
 
 /* Review comment thread styling */
@@ -230,7 +111,7 @@ diffs-container {
 
 .review-comment-action.destructive:hover {
   color: var(--destructive);
-  background: oklch(0.65 0.20 25 / 0.1);
+  background: oklch(from var(--destructive) l c h / 0.1);
 }
 
 .review-comment-body {
@@ -253,7 +134,7 @@ diffs-container {
   font-family: var(--font-mono);
   font-size: 0.75rem;
   line-height: 1.5;
-  background: oklch(0.13 0.015 260);
+  background: var(--code-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   padding: 0.5rem 0.75rem;
@@ -269,12 +150,12 @@ diffs-container {
 
 .light .review-comment-body .inline-code-block,
 .light .review-comment-markdown .inline-code-block {
-  background: oklch(0.96 0.005 260);
+  background: var(--code-bg);
 }
 
 /* Line selection highlight */
 .line-selected {
-  background: oklch(0.75 0.18 280 / 0.15) !important;
+  background: oklch(from var(--primary) l c h / 0.15) !important;
 }
 
 /* Hover utility button (GitHub-style +) */
@@ -415,7 +296,7 @@ diffs-container {
   font-size: 0.6875rem;
   line-height: 1.6;
   color: var(--foreground);
-  background: oklch(0.13 0.015 260);
+  background: var(--code-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   padding: 0.625rem 0.75rem;
@@ -434,16 +315,16 @@ diffs-container {
 .suggested-code-input:focus {
   outline: none;
   border-color: var(--success);
-  box-shadow: 0 0 0 1px oklch(0.72 0.17 150 / 0.3);
+  box-shadow: 0 0 0 1px oklch(from var(--success) l c h / 0.3);
 }
 
 .light .suggested-code-input {
-  background: oklch(0.96 0.005 260);
+  background: var(--code-bg);
 }
 
 /* GitHub-style suggestion block */
 .suggestion-block {
-  border: 1px solid oklch(0.72 0.17 150 / 0.3);
+  border: 1px solid oklch(from var(--success) l c h / 0.3);
   border-left: 3px solid var(--success);
   border-radius: var(--radius-sm);
   overflow: hidden;
@@ -459,15 +340,15 @@ diffs-container {
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--success);
-  background: oklch(0.72 0.17 150 / 0.08);
-  border-bottom: 1px solid oklch(0.72 0.17 150 / 0.15);
+  background: oklch(from var(--success) l c h / 0.08);
+  border-bottom: 1px solid oklch(from var(--success) l c h / 0.15);
 }
 
 .suggestion-block-code {
   margin: 0;
   font-size: 0.6875rem;
   line-height: 1.6;
-  background: oklch(0.13 0.015 260);
+  background: var(--code-bg);
   padding: 0.5rem 0.75rem;
   overflow-x: auto;
 }
@@ -484,23 +365,23 @@ diffs-container {
 }
 
 .light .suggestion-block-code {
-  background: oklch(0.97 0.005 260);
+  background: var(--code-bg);
 }
 
 .light .suggestion-block {
-  border-color: oklch(0.45 0.20 150 / 0.3);
+  border-color: oklch(from var(--success) l c h / 0.3);
   border-left-color: var(--success);
 }
 
 .light .suggestion-block-header {
-  background: oklch(0.45 0.20 150 / 0.06);
-  border-bottom-color: oklch(0.45 0.20 150 / 0.12);
+  background: oklch(from var(--success) l c h / 0.06);
+  border-bottom-color: oklch(from var(--success) l c h / 0.12);
 }
 
 /* Suggestion modal original code pane */
 .suggestion-modal-original {
   font-family: var(--font-mono);
-  background: oklch(0.13 0.015 260);
+  background: var(--code-bg);
 }
 
 .suggestion-modal-original code {
@@ -510,7 +391,7 @@ diffs-container {
 }
 
 .light .suggestion-modal-original {
-  background: oklch(0.97 0.005 260);
+  background: var(--code-bg);
 }
 
 /* Suggestion diff (original vs suggested) */
@@ -533,11 +414,11 @@ diffs-container {
 }
 
 .suggestion-diff-line.removed {
-  background: oklch(0.65 0.20 25 / 0.15);
+  background: oklch(from var(--destructive) l c h / 0.15);
 }
 
 .suggestion-diff-line.added {
-  background: oklch(0.72 0.17 150 / 0.15);
+  background: oklch(from var(--success) l c h / 0.15);
 }
 
 .suggestion-diff-indicator {
@@ -548,11 +429,11 @@ diffs-container {
 }
 
 .suggestion-diff-line.removed .suggestion-diff-indicator {
-  color: oklch(0.65 0.20 25);
+  color: var(--destructive);
 }
 
 .suggestion-diff-line.added .suggestion-diff-indicator {
-  color: oklch(0.72 0.17 150);
+  color: var(--success);
 }
 
 .suggestion-diff-content {
@@ -560,11 +441,11 @@ diffs-container {
 }
 
 .light .suggestion-diff-line.removed {
-  background: oklch(0.65 0.20 25 / 0.1);
+  background: oklch(from var(--destructive) l c h / 0.1);
 }
 
 .light .suggestion-diff-line.added {
-  background: oklch(0.45 0.20 150 / 0.1);
+  background: oklch(from var(--success) l c h / 0.1);
 }
 
 /* Toast animations */
diff --git a/packages/ui/components/AnnotationPanel.tsx b/packages/ui/components/AnnotationPanel.tsx
index c63093171..7caecf342 100644
--- a/packages/ui/components/AnnotationPanel.tsx
+++ b/packages/ui/components/AnnotationPanel.tsx
@@ -19,6 +19,7 @@ interface PanelProps {
   editorAnnotations?: EditorAnnotation[];
   onDeleteEditorAnnotation?: (id: string) => void;
   onClose?: () => void;
+  onQuickCopy?: () => Promise<void>;
 }
 
 export const AnnotationPanel: React.FC<PanelProps> = ({
@@ -35,9 +36,11 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   editorAnnotations,
   onDeleteEditorAnnotation,
   onClose,
+  onQuickCopy,
 }) => {
   const isMobile = useIsMobile();
   const [copied, setCopied] = useState(false);
+  const [copiedText, setCopiedText] = useState(false);
   const listRef = useRef<HTMLDivElement>(null);
   const sortedAnnotations = [...annotations].sort((a, b) => a.createdA - b.createdA);
   const totalCount = annotations.length + (editorAnnotations?.length ?? 0);
@@ -143,29 +146,57 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
         )}
       </div>
 
-      {/* Quick Share Footer */}
-      {sharingEnabled && shareUrl && totalCount > 0 && (
-        <div className="p-2 border-t border-border/50">
-          <button
-            onClick={handleQuickShare}
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all text-muted-foreground hover:text-foreground hover:bg-muted/50"
-          >
-            {copied ? (
-              <>
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                Copied
-              </>
-            ) : (
-              <>
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
-                </svg>
-                Quick Share
-              </>
-            )}
-          </button>
+      {/* Quick Actions Footer */}
+      {totalCount > 0 && (
+        <div className="p-2 border-t border-border/50 flex gap-1.5">
+          {onQuickCopy && (
+            <button
+              onClick={async () => {
+                await onQuickCopy();
+                setCopiedText(true);
+                setTimeout(() => setCopiedText(false), 2000);
+              }}
+              className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            >
+              {copiedText ? (
+                <>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                  Copied
+                </>
+              ) : (
+                <>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                  Quick Copy
+                </>
+              )}
+            </button>
+          )}
+          {sharingEnabled && shareUrl && (
+            <button
+              onClick={handleQuickShare}
+              className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            >
+              {copied ? (
+                <>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                  Copied
+                </>
+              ) : (
+                <>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                  </svg>
+                  Quick Share
+                </>
+              )}
+            </button>
+          )}
         </div>
       )}
     </aside>
diff --git a/packages/ui/components/ExportModal.tsx b/packages/ui/components/ExportModal.tsx
index e80a58371..fa3fe97e3 100644
--- a/packages/ui/components/ExportModal.tsx
+++ b/packages/ui/components/ExportModal.tsx
@@ -9,6 +9,7 @@
 import React, { useState, useEffect } from 'react';
 import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
+import { wrapFeedbackForAgent } from '../utils/parser';
 
 interface ExportModalProps {
   isOpen: boolean;
@@ -95,7 +96,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   };
 
   const handleCopyAnnotations = async () => {
-    await handleCopy(annotationsOutput, 'annotations');
+    await handleCopy(wrapFeedbackForAgent(annotationsOutput), 'annotations');
   };
 
   // Whether the hash URL is large enough to warrant a short URL option
diff --git a/packages/ui/components/Settings.tsx b/packages/ui/components/Settings.tsx
index 4e58a1fa9..3d94e64c1 100644
--- a/packages/ui/components/Settings.tsx
+++ b/packages/ui/components/Settings.tsx
@@ -49,8 +49,9 @@ import { useAgents } from '../hooks/useAgents';
 import { KeyboardShortcuts } from './KeyboardShortcuts';
 import { type QuickLabel, getQuickLabels, saveQuickLabels, resetQuickLabels, DEFAULT_QUICK_LABELS, getLabelColors, LABEL_COLOR_MAP } from '../utils/quickLabels';
 import { hasNewSettings, markNewSettingsSeen } from '../utils/newSettingsHint';
+import { ThemeTab } from './ThemeTab';
 
-type SettingsTab = 'general' | 'display' | 'saving' | 'labels' | 'shortcuts' | 'obsidian' | 'bear';
+type SettingsTab = 'general' | 'theme' | 'display' | 'saving' | 'labels' | 'shortcuts' | 'obsidian' | 'bear';
 
 interface SettingsProps {
   taterMode: boolean;
@@ -94,6 +95,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
 
   const mainTabs = useMemo(() => {
     const t: { id: SettingsTab; label: string }[] = [{ id: 'general', label: 'General' }];
+    t.push({ id: 'theme', label: 'Theme' });
     if (mode === 'plan') {
       t.push({ id: 'display', label: 'Display' });
       t.push({ id: 'saving', label: 'Saving' });
@@ -310,7 +312,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
               </nav>
 
               {/* Content — scrollable */}
-              <div className="flex-1 p-4 space-y-4 overflow-y-auto max-h-[70vh]">
+              <div className="flex-1 p-4 space-y-4 overflow-y-auto max-h-[85vh]">
 
                 {/* === GENERAL TAB === */}
                 {activeTab === 'general' && (
@@ -479,6 +481,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                   </>
                 )}
 
+                {/* === THEME TAB === */}
+                {activeTab === 'theme' && <ThemeTab />}
+
                 {/* === DISPLAY TAB === */}
                 {activeTab === 'display' && (
                   <>
diff --git a/packages/ui/components/ThemeProvider.tsx b/packages/ui/components/ThemeProvider.tsx
index fa3c501c3..d6f9fa421 100644
--- a/packages/ui/components/ThemeProvider.tsx
+++ b/packages/ui/components/ThemeProvider.tsx
@@ -1,76 +1,128 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { storage } from '../utils/storage';
+import { BUILT_IN_THEMES, type ThemeInfo } from '../utils/themeRegistry';
 
-type Theme = 'dark' | 'light' | 'system';
+export type Mode = 'dark' | 'light' | 'system';
 
 type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
+  // Mode (dark/light/system) — backward-compatible with old "theme" API
+  theme: Mode;
+  setTheme: (mode: Mode) => void;
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+  resolvedMode: 'dark' | 'light';
+  // Color theme (palette)
+  colorTheme: string;
+  setColorTheme: (theme: string) => void;
+  availableThemes: ThemeInfo[];
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>({
   theme: 'dark',
   setTheme: () => null,
+  mode: 'dark',
+  setMode: () => null,
+  resolvedMode: 'dark',
+  colorTheme: 'plannotator',
+  setColorTheme: () => null,
+  availableThemes: BUILT_IN_THEMES,
 });
 
+/** Resolve the class string for a theme + mode combination */
+function resolveThemeClasses(themeId: string, effectiveMode: 'dark' | 'light'): string {
+  const themeInfo = BUILT_IN_THEMES.find(t => t.id === themeId);
+  const modeSupport = themeInfo?.modeSupport ?? 'both';
+
+  let applyLight = effectiveMode === 'light';
+  if (modeSupport === 'dark-only') applyLight = false;
+  if (modeSupport === 'light-only') applyLight = true;
+
+  return `theme-${themeId}${applyLight ? ' light' : ''}`;
+}
+
+/** Read system preference synchronously */
+function getSystemIsLight(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: light)').matches;
+}
+
 interface ThemeProviderProps {
   children: React.ReactNode;
-  defaultTheme?: Theme;
+  defaultTheme?: Mode;
+  defaultColorTheme?: string;
   storageKey?: string;
+  colorThemeStorageKey?: string;
 }
 
 export function ThemeProvider({
   children,
   defaultTheme = 'dark',
+  defaultColorTheme = 'plannotator',
   storageKey = 'plannotator-theme',
+  colorThemeStorageKey = 'plannotator-color-theme',
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (storage.getItem(storageKey) as Theme) || defaultTheme
+  const [mode, setModeState] = useState<Mode>(
+    () => (storage.getItem(storageKey) as Mode) || defaultTheme
   );
 
-  useEffect(() => {
-    const root = window.document.documentElement;
+  const [colorTheme, setColorThemeState] = useState<string>(
+    () => storage.getItem(colorThemeStorageKey) || defaultColorTheme
+  );
 
-    // Remove light class (dark is default, no class needed)
-    root.classList.remove('light');
+  const [systemIsLight, setSystemIsLight] = useState(getSystemIsLight);
 
-    let effectiveTheme = theme;
-    if (theme === 'system') {
-      effectiveTheme = window.matchMedia('(prefers-color-scheme: light)').matches
-        ? 'light'
-        : 'dark';
-    }
+  // Compute resolved mode once — consumers use this instead of re-querying matchMedia
+  const resolvedMode: 'dark' | 'light' = mode === 'system' ? (systemIsLight ? 'light' : 'dark') : mode;
 
-    // Only add 'light' class when in light mode
-    if (effectiveTheme === 'light') {
-      root.classList.add('light');
+  // [P3 fix] Apply theme class synchronously during initialization to prevent
+  // flash of unstyled content. CSS tokens live under .theme-* selectors, so
+  // without this the first frame has no valid --background/--foreground.
+  if (typeof window !== 'undefined') {
+    const targetClass = resolveThemeClasses(colorTheme, resolvedMode);
+    if (window.document.documentElement.className !== targetClass) {
+      window.document.documentElement.className = targetClass;
     }
-  }, [theme]);
+  }
+
+  // Keep class in sync after state changes
+  useEffect(() => {
+    window.document.documentElement.className = resolveThemeClasses(colorTheme, resolvedMode);
+  }, [resolvedMode, colorTheme]);
 
-  // Listen for system theme changes
+  // [P2 fix] Listen for system theme changes AND re-read current value when
+  // entering system mode (OS may have changed while pinned to explicit mode)
   useEffect(() => {
-    if (theme !== 'system') return;
+    if (mode !== 'system') return;
+
+    // Sync immediately — OS preference may have changed since we last checked
+    setSystemIsLight(getSystemIsLight());
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
-    const handleChange = () => {
-      const root = window.document.documentElement;
-      root.classList.remove('light');
-      if (mediaQuery.matches) {
-        root.classList.add('light');
-      }
-    };
+    const handleChange = () => setSystemIsLight(mediaQuery.matches);
 
     mediaQuery.addEventListener('change', handleChange);
     return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (newTheme: Theme) => {
-      storage.setItem(storageKey, newTheme);
-      setTheme(newTheme);
-    },
-  };
+  }, [mode]);
+
+  const setMode = useCallback((newMode: Mode) => {
+    storage.setItem(storageKey, newMode);
+    setModeState(newMode);
+  }, [storageKey]);
+
+  const setColorTheme = useCallback((newTheme: string) => {
+    storage.setItem(colorThemeStorageKey, newTheme);
+    setColorThemeState(newTheme);
+  }, [colorThemeStorageKey]);
+
+  const value = useMemo<ThemeProviderState>(() => ({
+    theme: mode,
+    setTheme: setMode,
+    mode,
+    setMode,
+    resolvedMode,
+    colorTheme,
+    setColorTheme,
+    availableThemes: BUILT_IN_THEMES,
+  }), [mode, resolvedMode, colorTheme, setMode, setColorTheme]);
 
   return (
     <ThemeProviderContext.Provider value={value}>
diff --git a/packages/ui/components/ThemeTab.tsx b/packages/ui/components/ThemeTab.tsx
new file mode 100644
index 000000000..4fe8023d7
--- /dev/null
+++ b/packages/ui/components/ThemeTab.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { useTheme, type Mode } from './ThemeProvider';
+
+export const ThemeTab: React.FC = () => {
+  const { mode, setMode, colorTheme, setColorTheme, availableThemes, resolvedMode } = useTheme();
+
+  return (
+    <>
+      {/* Mode */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Mode</label>
+        <div className="flex gap-1">
+          {(['dark', 'light', 'system'] as Mode[]).map(m => (
+            <button
+              key={m}
+              onClick={() => setMode(m)}
+              className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                mode === m
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {m === 'dark' && (
+                <span className="flex items-center gap-1.5">
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+                  </svg>
+                  Dark
+                </span>
+              )}
+              {m === 'light' && (
+                <span className="flex items-center gap-1.5">
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+                  </svg>
+                  Light
+                </span>
+              )}
+              {m === 'system' && (
+                <span className="flex items-center gap-1.5">
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+                  </svg>
+                  System
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Theme */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Theme</label>
+        <div className="grid grid-cols-3 gap-2 overflow-y-auto pr-1">
+          {availableThemes.map(theme => {
+            const isSelected = colorTheme === theme.id;
+            const colors = theme.colors[resolvedMode];
+            return (
+              <button
+                key={theme.id}
+                onClick={() => setColorTheme(theme.id)}
+                className={`relative p-2 rounded-md border text-left transition-colors ${
+                  isSelected
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border hover:border-muted-foreground/30 hover:bg-muted/30'
+                }`}
+              >
+                {/* Color swatches */}
+                <div className="flex gap-1 mb-1.5">
+                  {[colors.primary, colors.secondary, colors.accent, colors.background, colors.foreground].map((color, i) => (
+                    <div
+                      key={i}
+                      className="w-3 h-3 rounded-full border border-border/50"
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </div>
+                {/* Name + checkmark */}
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-foreground truncate">{theme.name}</span>
+                  {isSelected && (
+                    <svg className="w-3 h-3 text-primary flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 495957fc5..eb3442c43 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -6,7 +6,8 @@
     "./components/*": "./components/*.tsx",
     "./utils/*": "./utils/*.ts",
     "./hooks/*": "./hooks/*.ts",
-    "./types": "./types.ts"
+    "./types": "./types.ts",
+    "./theme": "./theme.css"
   },
   "dependencies": {
     "@plannotator/shared": "workspace:*",
diff --git a/packages/ui/theme.css b/packages/ui/theme.css
new file mode 100644
index 000000000..2d45ea804
--- /dev/null
+++ b/packages/ui/theme.css
@@ -0,0 +1,115 @@
+/* Plannotator Theme System — imports all themes, provides Tailwind bridge + base styles */
+
+/* Theme files — each defines .theme-{name} (dark) and .theme-{name}.light */
+@import "./themes/plannotator.css";
+@import "./themes/claude-plus.css";
+@import "./themes/soft-pop.css";
+@import "./themes/adwaita.css";
+@import "./themes/caffeine.css";
+@import "./themes/synthwave-84.css";
+@import "./themes/catppuccin.css";
+@import "./themes/rose-pine.css";
+@import "./themes/monokai-pro.css";
+@import "./themes/doom-64.css";
+@import "./themes/dracula.css";
+@import "./themes/gruvbox.css";
+@import "./themes/paulmillr.css";
+@import "./themes/quantum-rose.css";
+@import "./themes/solar-dusk.css";
+@import "./themes/terminal.css";
+@import "./themes/tokyo-night.css";
+@import "./themes/tinacious.css";
+
+/* Tailwind bridge — maps CSS vars to utility classes */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Base styles — apply regardless of theme */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--background);
+  color: var(--foreground);
+  font-feature-settings: "ss01", "ss02", "cv01";
+}
+
+/* Subtle grid background */
+.bg-grid {
+  background-image:
+    linear-gradient(to right, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.light .bg-grid {
+  background-image:
+    linear-gradient(to right, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px);
+}
+
+/* Glow effects */
+.glow-primary {
+  box-shadow: 0 0 20px oklch(from var(--primary) l c h / 0.15), 0 0 40px oklch(from var(--primary) l c h / 0.05);
+}
+
+.glow-sm {
+  box-shadow: 0 0 10px oklch(from var(--primary) l c h / 0.1);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+
+/* Selection */
+::selection {
+  background: oklch(from var(--primary) l c h / 0.3);
+}
+
+/* Smooth transitions */
+* {
+  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Focus states */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
diff --git a/packages/ui/themes/adwaita.css b/packages/ui/themes/adwaita.css
new file mode 100644
index 000000000..4ab5f4ae3
--- /dev/null
+++ b/packages/ui/themes/adwaita.css
@@ -0,0 +1,62 @@
+/* Adwaita — GNOME's design language */
+.theme-adwaita {
+  --background: #1d1d1d;
+  --foreground: #cccccc;
+  --card: #303030;
+  --card-foreground: #cccccc;
+  --popover: #303030;
+  --popover-foreground: #cccccc;
+  --primary: #3584E4;
+  --primary-foreground: #ffffff;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #cccccc;
+  --muted: #2a2a2a;
+  --muted-foreground: #888888;
+  --accent: #26a269;
+  --accent-foreground: #ffffff;
+  --destructive: #c01c28;
+  --destructive-foreground: #ffffff;
+  --border: #454545;
+  --input: #3a3a3a;
+  --ring: #3584E4;
+  --success: #26a269;
+  --success-foreground: #ffffff;
+  --warning: #e5a50a;
+  --warning-foreground: #1d1d1d;
+
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Source Code Pro', ui-monospace, monospace;
+  --radius: 0.75rem;
+
+  --code-bg: #2a2a2a;
+  --focus-highlight: #3584E4;
+}
+
+.theme-adwaita.light {
+  --background: #fafafa;
+  --foreground: #323232;
+  --card: #ffffff;
+  --card-foreground: #323232;
+  --popover: #ffffff;
+  --popover-foreground: #323232;
+  --primary: #3584E4;
+  --primary-foreground: #ffffff;
+  --secondary: #e6e6e6;
+  --secondary-foreground: #323232;
+  --muted: #ebebeb;
+  --muted-foreground: #6e6e6e;
+  --accent: #26a269;
+  --accent-foreground: #ffffff;
+  --destructive: #c01c28;
+  --destructive-foreground: #ffffff;
+  --border: #cfcfcf;
+  --input: #e6e6e6;
+  --ring: #3584E4;
+  --success: #26a269;
+  --success-foreground: #ffffff;
+  --warning: #e5a50a;
+  --warning-foreground: #323232;
+
+  --code-bg: #ebebeb;
+  --focus-highlight: #3584E4;
+}
diff --git a/packages/ui/themes/caffeine.css b/packages/ui/themes/caffeine.css
new file mode 100644
index 000000000..9d90fc37a
--- /dev/null
+++ b/packages/ui/themes/caffeine.css
@@ -0,0 +1,113 @@
+.theme-caffeine {
+  --background: #111111;
+  --foreground: #eeeeee;
+  --card: #191919;
+  --card-foreground: #eeeeee;
+  --popover: #191919;
+  --popover-foreground: #eeeeee;
+  --primary: #ffe0c2;
+  --primary-foreground: #081a1b;
+  --secondary: #393028;
+  --secondary-foreground: #ffe0c2;
+  --muted: #222222;
+  --muted-foreground: #b4b4b4;
+  --accent: #c19a6b;
+  --accent-foreground: #eeeeee;
+  --destructive: #e54d2e;
+  --destructive-foreground: #ffffff;
+  --border: #201e18;
+  --input: #484848;
+  --ring: #ffe0c2;
+  --chart-1: #ffe0c2;
+  --chart-2: #393028;
+  --chart-3: #2a2a2a;
+  --chart-4: #42382e;
+  --chart-5: #ffe0c1;
+  --sidebar: #18181b;
+  --sidebar-foreground: #f4f4f5;
+  --sidebar-primary: #1d4ed8;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #27272a;
+  --sidebar-accent-foreground: #f4f4f5;
+  --sidebar-border: #27272a;
+  --sidebar-ring: #d4d4d8;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-caffeine.light {
+  --background: #f9f9f9;
+  --foreground: #202020;
+  --card: #fcfcfc;
+  --card-foreground: #202020;
+  --popover: #fcfcfc;
+  --popover-foreground: #202020;
+  --primary: #644a40;
+  --primary-foreground: #ffffff;
+  --secondary: #ffdfb5;
+  --secondary-foreground: #582d1d;
+  --muted: #efefef;
+  --muted-foreground: #646464;
+  --accent: #8b5a2b;
+  --accent-foreground: #ffffff;
+  --destructive: #e54d2e;
+  --destructive-foreground: #ffffff;
+  --border: #d8d8d8;
+  --input: #d8d8d8;
+  --ring: #644a40;
+  --chart-1: #644a40;
+  --chart-2: #ffdfb5;
+  --chart-3: #e8e8e8;
+  --chart-4: #ffe6c4;
+  --chart-5: #66493e;
+  --sidebar: #fbfbfb;
+  --sidebar-foreground: #252525;
+  --sidebar-primary: #343434;
+  --sidebar-primary-foreground: #fbfbfb;
+  --sidebar-accent: #f7f7f7;
+  --sidebar-accent-foreground: #343434;
+  --sidebar-border: #ebebeb;
+  --sidebar-ring: #b5b5b5;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
diff --git a/packages/ui/themes/catppuccin.css b/packages/ui/themes/catppuccin.css
new file mode 100644
index 000000000..2871963b2
--- /dev/null
+++ b/packages/ui/themes/catppuccin.css
@@ -0,0 +1,62 @@
+/* Catppuccin — Mocha (dark) + Latte (light) */
+.theme-catppuccin {
+  --background: #1e1e2e;
+  --foreground: #cdd6f4;
+  --card: #313244;
+  --card-foreground: #cdd6f4;
+  --popover: #313244;
+  --popover-foreground: #cdd6f4;
+  --primary: #89b4fa;
+  --primary-foreground: #1e1e2e;
+  --secondary: #45475a;
+  --secondary-foreground: #cdd6f4;
+  --muted: #45475a;
+  --muted-foreground: #a6adc8;
+  --accent: #f5c2e7;
+  --accent-foreground: #1e1e2e;
+  --destructive: #f38ba8;
+  --destructive-foreground: #1e1e2e;
+  --border: #585b70;
+  --input: #313244;
+  --ring: #89b4fa;
+  --success: #a6e3a1;
+  --success-foreground: #1e1e2e;
+  --warning: #f9e2af;
+  --warning-foreground: #1e1e2e;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #181825;
+  --focus-highlight: #94e2d5;
+}
+
+.theme-catppuccin.light {
+  --background: #eff1f5;
+  --foreground: #4c4f69;
+  --card: #e6e9ef;
+  --card-foreground: #4c4f69;
+  --popover: #e6e9ef;
+  --popover-foreground: #4c4f69;
+  --primary: #1e66f5;
+  --primary-foreground: #eff1f5;
+  --secondary: #ccd0da;
+  --secondary-foreground: #4c4f69;
+  --muted: #ccd0da;
+  --muted-foreground: #6c6f85;
+  --accent: #ea76cb;
+  --accent-foreground: #eff1f5;
+  --destructive: #d20f39;
+  --destructive-foreground: #eff1f5;
+  --border: #acb0be;
+  --input: #ccd0da;
+  --ring: #1e66f5;
+  --success: #40a02b;
+  --success-foreground: #eff1f5;
+  --warning: #df8e1d;
+  --warning-foreground: #eff1f5;
+
+  --code-bg: #e6e9ef;
+  --focus-highlight: #179299;
+}
diff --git a/packages/ui/themes/claude-plus.css b/packages/ui/themes/claude-plus.css
new file mode 100644
index 000000000..78a615460
--- /dev/null
+++ b/packages/ui/themes/claude-plus.css
@@ -0,0 +1,60 @@
+.theme-claude-plus {
+  --background: oklch(0.2679 0.0036 106.6427);
+  --foreground: oklch(0.9576 0.0027 106.4494);
+  --card: oklch(0.3200 0.0040 106.6000);
+  --card-foreground: oklch(0.9576 0.0027 106.4494);
+  --popover: oklch(0.3200 0.0040 106.6000);
+  --popover-foreground: oklch(0.9576 0.0027 106.4494);
+  --primary: oklch(0.6724 0.1308 38.7559);
+  --primary-foreground: oklch(0.1908 0.0020 106.5859);
+  --secondary: oklch(0.9818 0.0054 95.0986);
+  --secondary-foreground: oklch(0.3085 0.0035 106.6039);
+  --muted: oklch(0.3500 0.0040 106.6000);
+  --muted-foreground: oklch(0.7000 0.0030 106.5000);
+  --accent: oklch(0.6724 0.1308 38.7559);
+  --accent-foreground: oklch(0.1908 0.0020 106.5859);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.4000 0.0040 106.6000);
+  --input: oklch(0.3500 0.0040 106.6000);
+  --ring: oklch(0.6724 0.1308 38.7559);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+
+  --font-sans: 'Outfit', sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+  --radius: 1rem;
+
+  --code-bg: oklch(0.22 0.003 106.6);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-claude-plus.light {
+  --background: oklch(0.9818 0.0054 95.0986);
+  --foreground: oklch(0.3438 0.0269 95.7226);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0.3438 0.0269 95.7226);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0.3438 0.0269 95.7226);
+  --primary: oklch(0.6171 0.1375 39.0427);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9245 0.0138 92.9892);
+  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
+  --muted: oklch(0.9400 0.0100 95.0000);
+  --muted-foreground: oklch(0.5000 0.0200 95.0000);
+  --accent: oklch(0.6171 0.1375 39.0427);
+  --accent-foreground: oklch(1.0000 0 0);
+  --destructive: oklch(0.1908 0.0020 106.5859);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.8800 0.0100 95.0000);
+  --input: oklch(0.9400 0.0100 95.0000);
+  --ring: oklch(0.6171 0.1375 39.0427);
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+
+  --code-bg: oklch(0.96 0.005 95);
+}
diff --git a/packages/ui/themes/doom-64.css b/packages/ui/themes/doom-64.css
new file mode 100644
index 000000000..6ed2f464d
--- /dev/null
+++ b/packages/ui/themes/doom-64.css
@@ -0,0 +1,109 @@
+.theme-doom-64 {
+  --background: #1a1a1a;
+  --foreground: #e0e0e0;
+  --card: #2a2a2a;
+  --card-foreground: #e0e0e0;
+  --popover: #2a2a2a;
+  --popover-foreground: #e0e0e0;
+  --primary: #e53935;
+  --primary-foreground: #ffffff;
+  --secondary: #689f38;
+  --secondary-foreground: #000000;
+  --muted: #252525;
+  --muted-foreground: #a0a0a0;
+  --accent: #64b5f6;
+  --accent-foreground: #000000;
+  --destructive: #ffa000;
+  --destructive-foreground: #000000;
+  --border: #4a4a4a;
+  --input: #4a4a4a;
+  --ring: #e53935;
+  --chart-1: #e53935;
+  --chart-2: #689f38;
+  --chart-3: #64b5f6;
+  --chart-4: #ffa000;
+  --chart-5: #a1887f;
+  --sidebar: #141414;
+  --sidebar-foreground: #e0e0e0;
+  --sidebar-primary: #e53935;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #64b5f6;
+  --sidebar-accent-foreground: #000000;
+  --sidebar-border: #4a4a4a;
+  --sidebar-ring: #e53935;
+  --font-sans: "Oxanium", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Source Code Pro", monospace;
+  --radius: 0px;
+  --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.3);
+  --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.3);
+  --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
+  --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.6), 0px 1px 2px -1px hsl(0 0% 0% / 0.6);
+  --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.6), 0px 2px 4px -1px hsl(0 0% 0% / 0.6);
+  --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.6), 0px 4px 6px -1px hsl(0 0% 0% / 0.6);
+  --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.6), 0px 8px 10px -1px hsl(0 0% 0% / 0.6);
+  --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.5);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-doom-64.light {
+  --background: #cccccc;
+  --foreground: #1f1f1f;
+  --card: #b0b0b0;
+  --card-foreground: #1f1f1f;
+  --popover: #b0b0b0;
+  --popover-foreground: #1f1f1f;
+  --primary: #b71c1c;
+  --primary-foreground: #ffffff;
+  --secondary: #556b2f;
+  --secondary-foreground: #ffffff;
+  --muted: #b8b8b8;
+  --muted-foreground: #4a4a4a;
+  --accent: #4682b4;
+  --accent-foreground: #ffffff;
+  --destructive: #ff6f00;
+  --destructive-foreground: #000000;
+  --border: #505050;
+  --input: #505050;
+  --ring: #b71c1c;
+  --chart-1: #b71c1c;
+  --chart-2: #556b2f;
+  --chart-3: #4682b4;
+  --chart-4: #ff6f00;
+  --chart-5: #8d6e63;
+  --sidebar: #b0b0b0;
+  --sidebar-foreground: #1f1f1f;
+  --sidebar-primary: #b71c1c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #4682b4;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #505050;
+  --sidebar-ring: #b71c1c;
+  --font-sans: "Oxanium", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Source Code Pro", monospace;
+  --radius: 0px;
+  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.2);
+  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.2);
+  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
+  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
+  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
+  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.0);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
diff --git a/packages/ui/themes/dracula.css b/packages/ui/themes/dracula.css
new file mode 100644
index 000000000..138958ac3
--- /dev/null
+++ b/packages/ui/themes/dracula.css
@@ -0,0 +1,33 @@
+.theme-dracula,
+.theme-dracula.light {
+  --background: rgb(40, 42, 54);
+  --foreground: rgb(248, 248, 242);
+  --card: rgb(68, 71, 90);
+  --card-foreground: rgb(248, 248, 242);
+  --popover: rgb(68, 71, 90);
+  --popover-foreground: rgb(248, 248, 242);
+  --primary: rgb(189, 147, 249);
+  --primary-foreground: rgb(40, 42, 54);
+  --secondary: rgb(68, 71, 90);
+  --secondary-foreground: rgb(248, 248, 242);
+  --muted: rgb(55, 57, 73);
+  --muted-foreground: rgb(188, 190, 206);
+  --accent: rgb(139, 233, 253);
+  --accent-foreground: rgb(40, 42, 54);
+  --destructive: rgb(255, 85, 85);
+  --destructive-foreground: rgb(248, 248, 242);
+  --border: rgb(68, 71, 90);
+  --input: rgb(68, 71, 90);
+  --ring: rgb(189, 147, 249);
+  --success: rgb(80, 250, 123);
+  --success-foreground: rgb(40, 42, 54);
+  --warning: rgb(241, 250, 140);
+  --warning-foreground: rgb(40, 42, 54);
+
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: rgb(33, 34, 44);
+  --focus-highlight: rgb(139, 233, 253);
+}
diff --git a/packages/ui/themes/gruvbox.css b/packages/ui/themes/gruvbox.css
new file mode 100644
index 000000000..8b4b68b10
--- /dev/null
+++ b/packages/ui/themes/gruvbox.css
@@ -0,0 +1,62 @@
+/* Gruvbox — by morhetz */
+.theme-gruvbox {
+  --background: #282828;
+  --foreground: #ebdbb2;
+  --card: #3c3836;
+  --card-foreground: #ebdbb2;
+  --popover: #3c3836;
+  --popover-foreground: #ebdbb2;
+  --primary: #458588;
+  --primary-foreground: #ebdbb2;
+  --secondary: #504945;
+  --secondary-foreground: #ebdbb2;
+  --muted: #504945;
+  --muted-foreground: #a89984;
+  --accent: #b8bb26;
+  --accent-foreground: #282828;
+  --destructive: #fb4934;
+  --destructive-foreground: #282828;
+  --border: #504945;
+  --input: #3c3836;
+  --ring: #458588;
+  --success: #8ec07c;
+  --success-foreground: #282828;
+  --warning: #fabd2f;
+  --warning-foreground: #282828;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #32302f;
+  --focus-highlight: #83a598;
+}
+
+.theme-gruvbox.light {
+  --background: #fbf1c7;
+  --foreground: #3c3836;
+  --card: #f2e5bc;
+  --card-foreground: #3c3836;
+  --popover: #f2e5bc;
+  --popover-foreground: #3c3836;
+  --primary: #076678;
+  --primary-foreground: #fbf1c7;
+  --secondary: #d5c4a1;
+  --secondary-foreground: #3c3836;
+  --muted: #ebdbb2;
+  --muted-foreground: #665c54;
+  --accent: #79740e;
+  --accent-foreground: #fbf1c7;
+  --destructive: #9d0006;
+  --destructive-foreground: #fbf1c7;
+  --border: #d5c4a1;
+  --input: #ebdbb2;
+  --ring: #076678;
+  --success: #689d6a;
+  --success-foreground: #fbf1c7;
+  --warning: #b57614;
+  --warning-foreground: #fbf1c7;
+
+  --code-bg: #ebdbb2;
+  --focus-highlight: #076678;
+}
diff --git a/packages/ui/themes/monokai-pro.css b/packages/ui/themes/monokai-pro.css
new file mode 100644
index 000000000..b83838e4d
--- /dev/null
+++ b/packages/ui/themes/monokai-pro.css
@@ -0,0 +1,34 @@
+/* Monokai Pro — dark only */
+.theme-monokai-pro,
+.theme-monokai-pro.light {
+  --background: #2d2a2e;
+  --foreground: #fcfcfa;
+  --card: #403e41;
+  --card-foreground: #fcfcfa;
+  --popover: #403e41;
+  --popover-foreground: #fcfcfa;
+  --primary: #ffd866;
+  --primary-foreground: #2d2a2e;
+  --secondary: #5b595c;
+  --secondary-foreground: #fcfcfa;
+  --muted: #403e41;
+  --muted-foreground: #727072;
+  --accent: #78dce8;
+  --accent-foreground: #2d2a2e;
+  --destructive: #ff6188;
+  --destructive-foreground: #2d2a2e;
+  --border: #5b595c;
+  --input: #403e41;
+  --ring: #ffd866;
+  --success: #a9dc76;
+  --success-foreground: #2d2a2e;
+  --warning: #fc9867;
+  --warning-foreground: #2d2a2e;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #221f22;
+  --focus-highlight: #78dce8;
+}
diff --git a/packages/ui/themes/paulmillr.css b/packages/ui/themes/paulmillr.css
new file mode 100644
index 000000000..ac7a5b95f
--- /dev/null
+++ b/packages/ui/themes/paulmillr.css
@@ -0,0 +1,34 @@
+/* PaulMillr — terminal color scheme */
+.theme-paulmillr,
+.theme-paulmillr.light {
+  --background: #000000;
+  --foreground: #f2f2f2;
+  --card: #2a2a2a;
+  --card-foreground: #f2f2f2;
+  --popover: #2a2a2a;
+  --popover-foreground: #f2f2f2;
+  --primary: #396bd7;
+  --primary-foreground: #ffffff;
+  --secondary: #414141;
+  --secondary-foreground: #f2f2f2;
+  --muted: #2a2a2a;
+  --muted-foreground: #bbbbbb;
+  --accent: #66ccff;
+  --accent-foreground: #000000;
+  --destructive: #ff0000;
+  --destructive-foreground: #ffffff;
+  --border: #414141;
+  --input: #2a2a2a;
+  --ring: #396bd7;
+  --success: #79ff0f;
+  --success-foreground: #000000;
+  --warning: #e7bf00;
+  --warning-foreground: #000000;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #1a1a1a;
+  --focus-highlight: #66ccff;
+}
diff --git a/packages/ui/themes/plannotator.css b/packages/ui/themes/plannotator.css
new file mode 100644
index 000000000..95d19129a
--- /dev/null
+++ b/packages/ui/themes/plannotator.css
@@ -0,0 +1,60 @@
+.theme-plannotator {
+  --background: oklch(0.15 0.02 260);
+  --foreground: oklch(0.90 0.01 260);
+  --card: oklch(0.22 0.02 260);
+  --card-foreground: oklch(0.90 0.01 260);
+  --popover: oklch(0.28 0.025 260);
+  --popover-foreground: oklch(0.90 0.01 260);
+  --primary: oklch(0.75 0.18 280);
+  --primary-foreground: oklch(0.15 0.02 260);
+  --secondary: oklch(0.65 0.15 180);
+  --secondary-foreground: oklch(0.15 0.02 260);
+  --muted: oklch(0.26 0.02 260);
+  --muted-foreground: oklch(0.72 0.02 260);
+  --accent: oklch(0.70 0.20 60);
+  --accent-foreground: oklch(0.15 0.02 260);
+  --destructive: oklch(0.65 0.20 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.35 0.02 260);
+  --input: oklch(0.26 0.02 260);
+  --ring: oklch(0.75 0.18 280);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --radius: 0.75rem;
+
+  --code-bg: oklch(0.26 0.02 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-plannotator.light {
+  --background: oklch(0.97 0.005 260);
+  --foreground: oklch(0.18 0.02 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.02 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.02 260);
+  --primary: oklch(0.50 0.25 280);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.50 0.18 180);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.92 0.01 260);
+  --muted-foreground: oklch(0.40 0.02 260);
+  --accent: oklch(0.60 0.22 50);
+  --accent-foreground: oklch(0.18 0.02 260);
+  --destructive: oklch(0.50 0.25 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.88 0.01 260);
+  --input: oklch(0.92 0.01 260);
+  --ring: oklch(0.50 0.25 280);
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+
+  --code-bg: oklch(0.92 0.01 260);
+}
diff --git a/packages/ui/themes/quantum-rose.css b/packages/ui/themes/quantum-rose.css
new file mode 100644
index 000000000..d77ce6532
--- /dev/null
+++ b/packages/ui/themes/quantum-rose.css
@@ -0,0 +1,109 @@
+.theme-quantum-rose {
+  --background: #1a0922;
+  --foreground: #ffb3ff;
+  --card: #2a1435;
+  --card-foreground: #ffb3ff;
+  --popover: #2a1435;
+  --popover-foreground: #ffb3ff;
+  --primary: #ff6bef;
+  --primary-foreground: #180518;
+  --secondary: #46204f;
+  --secondary-foreground: #ffb3ff;
+  --muted: #331941;
+  --muted-foreground: #d67ad6;
+  --accent: #c06ec4;
+  --accent-foreground: #1a0922;
+  --destructive: #ff2876;
+  --destructive-foreground: #f9f9f9;
+  --border: #4a1b5f;
+  --input: #46204f;
+  --ring: #ff6bef;
+  --chart-1: #ff6bef;
+  --chart-2: #c359e3;
+  --chart-3: #9161ff;
+  --chart-4: #6f73e2;
+  --chart-5: #547aff;
+  --sidebar: #1c0d25;
+  --sidebar-foreground: #ffb3ff;
+  --sidebar-primary: #ff6bef;
+  --sidebar-primary-foreground: #180518;
+  --sidebar-accent: #5a1f5d;
+  --sidebar-accent-foreground: #ffb3ff;
+  --sidebar-border: #4a1b5f;
+  --sidebar-ring: #ff6bef;
+  --font-sans: Quicksand, sans-serif;
+  --font-serif: Playfair Display, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 3px 0px 0px hsl(300 80% 50% / 0.09);
+  --shadow-xs: 0px 3px 0px 0px hsl(300 80% 50% / 0.09);
+  --shadow-sm: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18);
+  --shadow: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18);
+  --shadow-md: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 2px 4px -1px hsl(300 80% 50% / 0.18);
+  --shadow-lg: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 4px 6px -1px hsl(300 80% 50% / 0.18);
+  --shadow-xl: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 8px 10px -1px hsl(300 80% 50% / 0.18);
+  --shadow-2xl: 0px 3px 0px 0px hsl(300 80% 50% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-quantum-rose.light {
+  --background: #fff0f8;
+  --foreground: #91185c;
+  --card: #fff7fc;
+  --card-foreground: #91185c;
+  --popover: #fff7fc;
+  --popover-foreground: #91185c;
+  --primary: #e6067a;
+  --primary-foreground: #ffffff;
+  --secondary: #ffd6ff;
+  --secondary-foreground: #91185c;
+  --muted: #ffe3f2;
+  --muted-foreground: #c04283;
+  --accent: #ffc1e3;
+  --accent-foreground: #91185c;
+  --destructive: #d13869;
+  --destructive-foreground: #ffffff;
+  --border: #ffc7e6;
+  --input: #ffd6ff;
+  --ring: #e6067a;
+  --chart-1: #e6067a;
+  --chart-2: #c44b97;
+  --chart-3: #9969b6;
+  --chart-4: #7371bf;
+  --chart-5: #5e84ff;
+  --sidebar: #ffedf6;
+  --sidebar-foreground: #91185c;
+  --sidebar-primary: #e6067a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ffc1e3;
+  --sidebar-accent-foreground: #91185c;
+  --sidebar-border: #ffddf0;
+  --sidebar-ring: #e6067a;
+  --font-sans: Poppins, sans-serif;
+  --font-serif: Playfair Display, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 3px 0px 0px hsl(330 70% 30% / 0.09);
+  --shadow-xs: 0px 3px 0px 0px hsl(330 70% 30% / 0.09);
+  --shadow-sm: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18);
+  --shadow: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18);
+  --shadow-md: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 2px 4px -1px hsl(330 70% 30% / 0.18);
+  --shadow-lg: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 4px 6px -1px hsl(330 70% 30% / 0.18);
+  --shadow-xl: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 8px 10px -1px hsl(330 70% 30% / 0.18);
+  --shadow-2xl: 0px 3px 0px 0px hsl(330 70% 30% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
diff --git a/packages/ui/themes/rose-pine.css b/packages/ui/themes/rose-pine.css
new file mode 100644
index 000000000..5afc29271
--- /dev/null
+++ b/packages/ui/themes/rose-pine.css
@@ -0,0 +1,62 @@
+/* Rosé Pine — Moon (dark) + Dawn (light) */
+.theme-rose-pine {
+  --background: #191724;
+  --foreground: #e0def4;
+  --card: #26233a;
+  --card-foreground: #e0def4;
+  --popover: #26233a;
+  --popover-foreground: #e0def4;
+  --primary: #c4a7e7;
+  --primary-foreground: #191724;
+  --secondary: #403d52;
+  --secondary-foreground: #e0def4;
+  --muted: #26233a;
+  --muted-foreground: #6e6a86;
+  --accent: #f6c177;
+  --accent-foreground: #191724;
+  --destructive: #eb6f92;
+  --destructive-foreground: #191724;
+  --border: #403d52;
+  --input: #26233a;
+  --ring: #c4a7e7;
+  --success: #31748f;
+  --success-foreground: #e0def4;
+  --warning: #f6c177;
+  --warning-foreground: #191724;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #1f1d2e;
+  --focus-highlight: #9ccfd8;
+}
+
+.theme-rose-pine.light {
+  --background: #faf4ed;
+  --foreground: #575279;
+  --card: #fffaf3;
+  --card-foreground: #575279;
+  --popover: #fffaf3;
+  --popover-foreground: #575279;
+  --primary: #907aa9;
+  --primary-foreground: #faf4ed;
+  --secondary: #dfdad9;
+  --secondary-foreground: #575279;
+  --muted: #f2e9e1;
+  --muted-foreground: #9893a5;
+  --accent: #ea9d34;
+  --accent-foreground: #faf4ed;
+  --destructive: #b4637a;
+  --destructive-foreground: #faf4ed;
+  --border: #dfdad9;
+  --input: #f2e9e1;
+  --ring: #907aa9;
+  --success: #286983;
+  --success-foreground: #faf4ed;
+  --warning: #ea9d34;
+  --warning-foreground: #faf4ed;
+
+  --code-bg: #f2e9e1;
+  --focus-highlight: #56949f;
+}
diff --git a/packages/ui/themes/soft-pop.css b/packages/ui/themes/soft-pop.css
new file mode 100644
index 000000000..51221080a
--- /dev/null
+++ b/packages/ui/themes/soft-pop.css
@@ -0,0 +1,60 @@
+.theme-soft-pop {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1.0000 0 0);
+  --card: oklch(0.1500 0 0);
+  --card-foreground: oklch(1.0000 0 0);
+  --popover: oklch(0.1500 0 0);
+  --popover-foreground: oklch(1.0000 0 0);
+  --primary: oklch(0.6801 0.1583 276.9349);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.7845 0.1325 181.9120);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.3211 0 0);
+  --muted-foreground: oklch(0.7000 0 0);
+  --accent: oklch(0.8790 0.1534 91.6054);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.7106 0.1661 22.2162);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.4459 0 0);
+  --input: oklch(0.3211 0 0);
+  --ring: oklch(0.6801 0.1583 276.9349);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+
+  --font-sans: 'DM Sans', sans-serif;
+  --font-mono: 'Space Mono', monospace;
+  --radius: 1rem;
+
+  --code-bg: oklch(0.08 0 0);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-soft-pop.light {
+  --background: oklch(0.9789 0.0082 121.6272);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.5106 0.2301 276.9656);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.7038 0.1230 182.5025);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.4000 0 0);
+  --accent: oklch(0.7686 0.1647 70.0804);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0.9551 0 0);
+  --ring: oklch(0.7853 0.1041 274.7134);
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+
+  --code-bg: oklch(0.96 0.005 120);
+}
diff --git a/packages/ui/themes/solar-dusk.css b/packages/ui/themes/solar-dusk.css
new file mode 100644
index 000000000..fcf3d95a6
--- /dev/null
+++ b/packages/ui/themes/solar-dusk.css
@@ -0,0 +1,109 @@
+.theme-solar-dusk {
+  --background: oklch(0.2161 0.0061 56.0434);
+  --foreground: oklch(0.9699 0.0013 106.4238);
+  --card: oklch(0.2685 0.0063 34.2976);
+  --card-foreground: oklch(0.9699 0.0013 106.4238);
+  --popover: oklch(0.2685 0.0063 34.2976);
+  --popover-foreground: oklch(0.9699 0.0013 106.4238);
+  --primary: oklch(0.7049 0.1867 47.6044);
+  --primary-foreground: oklch(1.0 0 0);
+  --secondary: oklch(0.4444 0.0096 73.639);
+  --secondary-foreground: oklch(0.9232 0.0026 48.7171);
+  --muted: oklch(0.2685 0.0063 34.2976);
+  --muted-foreground: oklch(0.7161 0.0091 56.259);
+  --accent: oklch(0.6 0.12 229.3202);
+  --accent-foreground: oklch(0.15 0.02 229);
+  --destructive: oklch(0.5771 0.2152 27.325);
+  --destructive-foreground: oklch(1.0 0 0);
+  --border: oklch(0.3741 0.0087 67.5582);
+  --input: oklch(0.3741 0.0087 67.5582);
+  --ring: oklch(0.7049 0.1867 47.6044);
+  --chart-1: oklch(0.7049 0.1867 47.6044);
+  --chart-2: oklch(0.6847 0.1479 237.3225);
+  --chart-3: oklch(0.7952 0.1617 86.0468);
+  --chart-4: oklch(0.7161 0.0091 56.259);
+  --chart-5: oklch(0.5534 0.0116 58.0708);
+  --sidebar: oklch(0.2685 0.0063 34.2976);
+  --sidebar-foreground: oklch(0.9699 0.0013 106.4238);
+  --sidebar-primary: oklch(0.7049 0.1867 47.6044);
+  --sidebar-primary-foreground: oklch(1.0 0 0);
+  --sidebar-accent: oklch(0.6847 0.1479 237.3225);
+  --sidebar-accent-foreground: oklch(0.2839 0.0734 254.5378);
+  --sidebar-border: oklch(0.3741 0.0087 67.5582);
+  --sidebar-ring: oklch(0.7049 0.1867 47.6044);
+  --font-sans: Oxanium, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Fira Code, monospace;
+  --radius: 0.3rem;
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 2px 4px -1px hsl(0 0% 5% / 0.18);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 4px 6px -1px hsl(0 0% 5% / 0.18);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 8px 10px -1px hsl(0 0% 5% / 0.18);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-solar-dusk.light {
+  --background: oklch(0.9885 0.0057 84.5659);
+  --foreground: oklch(0.366 0.0251 49.6085);
+  --card: oklch(0.9686 0.0091 78.2818);
+  --card-foreground: oklch(0.366 0.0251 49.6085);
+  --popover: oklch(0.9686 0.0091 78.2818);
+  --popover-foreground: oklch(0.366 0.0251 49.6085);
+  --primary: oklch(0.5553 0.1455 48.9975);
+  --primary-foreground: oklch(1.0 0 0);
+  --secondary: oklch(0.8276 0.0752 74.44);
+  --secondary-foreground: oklch(0.4444 0.0096 73.639);
+  --muted: oklch(0.9363 0.0218 83.2637);
+  --muted-foreground: oklch(0.5534 0.0116 58.0708);
+  --accent: oklch(0.55 0.12 229);
+  --accent-foreground: oklch(1.0 0 0);
+  --destructive: oklch(0.4437 0.1613 26.8994);
+  --destructive-foreground: oklch(1.0 0 0);
+  --border: oklch(0.8866 0.0404 89.6994);
+  --input: oklch(0.8866 0.0404 89.6994);
+  --ring: oklch(0.5553 0.1455 48.9975);
+  --chart-1: oklch(0.5553 0.1455 48.9975);
+  --chart-2: oklch(0.5534 0.0116 58.0708);
+  --chart-3: oklch(0.5538 0.1207 66.4416);
+  --chart-4: oklch(0.5534 0.0116 58.0708);
+  --chart-5: oklch(0.6806 0.1423 75.834);
+  --sidebar: oklch(0.9363 0.0218 83.2637);
+  --sidebar-foreground: oklch(0.366 0.0251 49.6085);
+  --sidebar-primary: oklch(0.5553 0.1455 48.9975);
+  --sidebar-primary-foreground: oklch(1.0 0 0);
+  --sidebar-accent: oklch(0.5538 0.1207 66.4416);
+  --sidebar-accent-foreground: oklch(1.0 0 0);
+  --sidebar-border: oklch(0.8866 0.0404 89.6994);
+  --sidebar-ring: oklch(0.5553 0.1455 48.9975);
+  --font-sans: Oxanium, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Fira Code, monospace;
+  --radius: 0.3rem;
+  --shadow-2xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
+  --shadow-xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
+  --shadow-sm: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);
+  --shadow: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);
+  --shadow-md: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 2px 4px -1px hsl(28 18% 25% / 0.18);
+  --shadow-lg: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 4px 6px -1px hsl(28 18% 25% / 0.18);
+  --shadow-xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 8px 10px -1px hsl(28 18% 25% / 0.18);
+  --shadow-2xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
diff --git a/packages/ui/themes/synthwave-84.css b/packages/ui/themes/synthwave-84.css
new file mode 100644
index 000000000..a17443065
--- /dev/null
+++ b/packages/ui/themes/synthwave-84.css
@@ -0,0 +1,34 @@
+/* Synthwave '84 — by Robb Owen */
+.theme-synthwave-84,
+.theme-synthwave-84.light {
+  --background: #262335;
+  --foreground: #ffffff;
+  --card: #2a2139;
+  --card-foreground: #ffffff;
+  --popover: #2a2139;
+  --popover-foreground: #ffffff;
+  --primary: #ff7edb;
+  --primary-foreground: #262335;
+  --secondary: #34294f;
+  --secondary-foreground: #ffffff;
+  --muted: #37294d;
+  --muted-foreground: #ffffff99;
+  --accent: #72f1b8;
+  --accent-foreground: #262335;
+  --destructive: #fe4450;
+  --destructive-foreground: #ffffff;
+  --border: #495495;
+  --input: #2a2139;
+  --ring: #ff7edb;
+  --success: #72f1b8;
+  --success-foreground: #262335;
+  --warning: #fede5d;
+  --warning-foreground: #262335;
+
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #241b2f;
+  --focus-highlight: #36f9f6;
+}
diff --git a/packages/ui/themes/terminal.css b/packages/ui/themes/terminal.css
new file mode 100644
index 000000000..c704a3682
--- /dev/null
+++ b/packages/ui/themes/terminal.css
@@ -0,0 +1,62 @@
+.theme-terminal,
+.theme-terminal.light {
+  --background: #000001;
+  --foreground: #eeeeee;
+  --card: #010203;
+  --card-foreground: #eeeeee;
+  --popover: #010203;
+  --popover-foreground: #eeeeee;
+  --primary: #f99100;
+  --primary-foreground: #ffffff;
+  --secondary: #2e2e2e;
+  --secondary-foreground: #eeeeee;
+  --muted: #202127;
+  --muted-foreground: #9e9e9e;
+  --accent: #00a1ff;
+  --accent-foreground: #ffffff;
+  --destructive: #f20024;
+  --destructive-foreground: #ffffff;
+  --border: #2e2e2e;
+  --input: #010203;
+  --ring: #00a1ff;
+  --chart-1: #2dd047;
+  --chart-2: #f20024;
+  --chart-3: #821698;
+  --chart-4: #f6d653;
+  --chart-5: #00a1ff;
+  --sidebar: #010203;
+  --sidebar-foreground: #eeeeee;
+  --sidebar-primary: #f99100;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #00a1ff;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #2e2e2e;
+  --sidebar-ring: #00a1ff;
+  --font-sans: system-ui;
+  --font-serif: system-ui;
+  --font-mono: system-ui;
+  --radius: 4px;
+  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
+  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: #000000;
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-terminal .bg-grid,
+.theme-terminal.light .bg-grid {
+  background-image:
+    linear-gradient(to right, rgba(0, 255, 0, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 255, 0, 0.04) 1px, transparent 1px);
+}
diff --git a/packages/ui/themes/tinacious.css b/packages/ui/themes/tinacious.css
new file mode 100644
index 000000000..fdbe153ec
--- /dev/null
+++ b/packages/ui/themes/tinacious.css
@@ -0,0 +1,57 @@
+.theme-tinacious,
+.theme-tinacious.light {
+  --background: rgb(248, 248, 255);
+  --foreground: rgb(29, 29, 38);
+  --card: rgb(255, 255, 255);
+  --card-foreground: rgb(29, 29, 38);
+  --popover: rgb(255, 255, 255);
+  --popover-foreground: rgb(29, 29, 38);
+  --primary: rgb(0, 203, 255);
+  --primary-foreground: rgb(255, 255, 255);
+  --secondary: rgb(203, 203, 240);
+  --secondary-foreground: rgb(29, 29, 38);
+  --muted: rgb(213, 214, 243);
+  --muted-foreground: rgb(99, 102, 103);
+  --accent: rgb(0, 206, 202);
+  --accent-foreground: rgb(29, 29, 38);
+  --destructive: rgb(255, 51, 153);
+  --destructive-foreground: rgb(255, 255, 255);
+  --border: rgb(213, 214, 243);
+  --input: rgb(213, 214, 243);
+  --ring: rgb(0, 203, 255);
+  --chart-1: rgb(255, 51, 153);
+  --chart-2: rgb(0, 211, 100);
+  --chart-3: rgb(255, 204, 102);
+  --chart-4: rgb(204, 102, 255);
+  --chart-5: rgb(0, 206, 202);
+  --sidebar: rgb(240, 240, 248);
+  --sidebar-foreground: rgb(29, 29, 38);
+  --sidebar-primary: rgb(0, 203, 255);
+  --sidebar-primary-foreground: rgb(255, 255, 255);
+  --sidebar-accent: rgb(0, 206, 202);
+  --sidebar-accent-foreground: rgb(29, 29, 38);
+  --sidebar-border: rgb(213, 214, 243);
+  --sidebar-ring: rgb(0, 203, 255);
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
+    monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-2xl: 0 35px 60px -15px rgb(0 0 0 / 0.3);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: rgb(240, 240, 248);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
diff --git a/packages/ui/themes/tokyo-night.css b/packages/ui/themes/tokyo-night.css
new file mode 100644
index 000000000..e03d7e1e6
--- /dev/null
+++ b/packages/ui/themes/tokyo-night.css
@@ -0,0 +1,62 @@
+/* Tokyo Night — Storm (dark) + Day (light) */
+.theme-tokyo-night {
+  --background: #24283b;
+  --foreground: #c0caf5;
+  --card: #1d202f;
+  --card-foreground: #c0caf5;
+  --popover: #1d202f;
+  --popover-foreground: #c0caf5;
+  --primary: #7aa2f7;
+  --primary-foreground: #1d202f;
+  --secondary: #414868;
+  --secondary-foreground: #c0caf5;
+  --muted: #343a52;
+  --muted-foreground: #a9b1d6;
+  --accent: #7dcfff;
+  --accent-foreground: #1d202f;
+  --destructive: #f7768e;
+  --destructive-foreground: #1d202f;
+  --border: #414868;
+  --input: #343a52;
+  --ring: #7aa2f7;
+  --success: #9ece6a;
+  --success-foreground: #1d202f;
+  --warning: #e0af68;
+  --warning-foreground: #1d202f;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.5rem;
+
+  --code-bg: #1a1b2e;
+  --focus-highlight: #7dcfff;
+}
+
+.theme-tokyo-night.light {
+  --background: #e1e2e7;
+  --foreground: #3760bf;
+  --card: #e9e9ed;
+  --card-foreground: #3760bf;
+  --popover: #e9e9ed;
+  --popover-foreground: #3760bf;
+  --primary: #2e7de9;
+  --primary-foreground: #e1e2e7;
+  --secondary: #a1a6c5;
+  --secondary-foreground: #3760bf;
+  --muted: #d0d3e1;
+  --muted-foreground: #6172b0;
+  --accent: #007197;
+  --accent-foreground: #e1e2e7;
+  --destructive: #f52a65;
+  --destructive-foreground: #e1e2e7;
+  --border: #a1a6c5;
+  --input: #d0d3e1;
+  --ring: #2e7de9;
+  --success: #587539;
+  --success-foreground: #e1e2e7;
+  --warning: #8c6c3e;
+  --warning-foreground: #e1e2e7;
+
+  --code-bg: #d5d6db;
+  --focus-highlight: #007197;
+}
diff --git a/packages/ui/utils/parser.ts b/packages/ui/utils/parser.ts
index 80c6cb7a4..2e04b8617 100644
--- a/packages/ui/utils/parser.ts
+++ b/packages/ui/utils/parser.ts
@@ -243,6 +243,11 @@ export const parseMarkdownToBlocks = (markdown: string): Block[] => {
   return blocks;
 };
 
+/** Wrap feedback output with the deny preamble for pasting into agent sessions */
+export const wrapFeedbackForAgent = (feedback: string): string => {
+  return `YOUR PLAN WAS NOT APPROVED. You MUST revise the plan to address ALL of the feedback below before calling ExitPlanMode again. Do not resubmit the same plan — use the Edit tool to make targeted changes to the plan file first.\n\n${feedback}`;
+};
+
 export const exportAnnotations = (blocks: Block[], annotations: any[], globalAttachments: ImageAttachment[] = []): string => {
   if (annotations.length === 0 && globalAttachments.length === 0) {
     return 'No changes detected.';
diff --git a/packages/ui/utils/themeRegistry.ts b/packages/ui/utils/themeRegistry.ts
new file mode 100644
index 000000000..9299489bb
--- /dev/null
+++ b/packages/ui/utils/themeRegistry.ts
@@ -0,0 +1,201 @@
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  accent: string;
+  background: string;
+  foreground: string;
+}
+
+export interface ThemeInfo {
+  id: string;
+  name: string;
+  builtIn: boolean;
+  modeSupport: 'both' | 'dark-only' | 'light-only';
+  colors: {
+    dark: ThemeColors;
+    light: ThemeColors;
+  };
+}
+
+export const BUILT_IN_THEMES: ThemeInfo[] = [
+  {
+    id: 'plannotator',
+    name: 'Plannotator',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'oklch(0.75 0.18 280)', secondary: 'oklch(0.65 0.15 180)', accent: 'oklch(0.70 0.20 60)', background: 'oklch(0.15 0.02 260)', foreground: 'oklch(0.90 0.01 260)' },
+      light: { primary: 'oklch(0.50 0.25 280)', secondary: 'oklch(0.50 0.18 180)', accent: 'oklch(0.60 0.22 50)', background: 'oklch(0.97 0.005 260)', foreground: 'oklch(0.18 0.02 260)' },
+    },
+  },
+  {
+    id: 'claude-plus',
+    name: 'Absolutely',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'oklch(0.6724 0.1308 38.7559)', secondary: 'oklch(0.9818 0.0054 95.0986)', accent: 'oklch(0.6724 0.1308 38.7559)', background: 'oklch(0.2679 0.0036 106.6427)', foreground: 'oklch(0.9576 0.0027 106.4494)' },
+      light: { primary: 'oklch(0.6171 0.1375 39.0427)', secondary: 'oklch(0.9245 0.0138 92.9892)', accent: 'oklch(0.6171 0.1375 39.0427)', background: 'oklch(0.9818 0.0054 95.0986)', foreground: 'oklch(0.3438 0.0269 95.7226)' },
+    },
+  },
+  {
+    id: 'adwaita',
+    name: 'Adwaita',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: '#3584E4', secondary: '#3a3a3a', accent: '#26a269', background: '#1d1d1d', foreground: '#cccccc' },
+      light: { primary: '#3584E4', secondary: '#e6e6e6', accent: '#26a269', background: '#fafafa', foreground: '#323232' },
+    },
+  },
+  {
+    id: 'caffeine',
+    name: 'Caffeine',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'rgb(193, 154, 107)', secondary: 'rgb(62, 47, 36)', accent: 'rgb(139, 90, 43)', background: 'rgb(30, 22, 16)', foreground: 'rgb(230, 220, 205)' },
+      light: { primary: 'rgb(139, 90, 43)', secondary: 'rgb(232, 222, 210)', accent: 'rgb(193, 154, 107)', background: 'rgb(250, 245, 238)', foreground: 'rgb(40, 30, 20)' },
+    },
+  },
+  {
+    id: 'catppuccin',
+    name: 'Catppuccin',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: '#89b4fa', secondary: '#45475a', accent: '#f5c2e7', background: '#1e1e2e', foreground: '#cdd6f4' },
+      light: { primary: '#1e66f5', secondary: '#ccd0da', accent: '#ea76cb', background: '#eff1f5', foreground: '#4c4f69' },
+    },
+  },
+  {
+    id: 'doom-64',
+    name: 'Doom 64',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'rgb(200, 30, 30)', secondary: 'rgb(40, 35, 30)', accent: 'rgb(255, 160, 0)', background: 'rgb(15, 12, 10)', foreground: 'rgb(220, 210, 190)' },
+      light: { primary: 'rgb(180, 20, 20)', secondary: 'rgb(230, 225, 215)', accent: 'rgb(200, 120, 0)', background: 'rgb(248, 244, 238)', foreground: 'rgb(25, 20, 15)' },
+    },
+  },
+  {
+    id: 'dracula',
+    name: 'Dracula',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    colors: {
+      dark: { primary: 'rgb(189, 147, 249)', secondary: 'rgb(68, 71, 90)', accent: 'rgb(139, 233, 253)', background: 'rgb(40, 42, 54)', foreground: 'rgb(248, 248, 242)' },
+      light: { primary: 'rgb(189, 147, 249)', secondary: 'rgb(68, 71, 90)', accent: 'rgb(139, 233, 253)', background: 'rgb(40, 42, 54)', foreground: 'rgb(248, 248, 242)' },
+    },
+  },
+  {
+    id: 'gruvbox',
+    name: 'Gruvbox',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: '#458588', secondary: '#504945', accent: '#b8bb26', background: '#282828', foreground: '#ebdbb2' },
+      light: { primary: '#076678', secondary: '#d5c4a1', accent: '#79740e', background: '#fbf1c7', foreground: '#3c3836' },
+    },
+  },
+  {
+    id: 'monokai-pro',
+    name: 'Monokai Pro',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    colors: {
+      dark: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
+      light: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
+    },
+  },
+  {
+    id: 'paulmillr',
+    name: 'PaulMillr',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    colors: {
+      dark: { primary: '#396bd7', secondary: '#414141', accent: '#66ccff', background: '#000000', foreground: '#f2f2f2' },
+      light: { primary: '#396bd7', secondary: '#414141', accent: '#66ccff', background: '#000000', foreground: '#f2f2f2' },
+    },
+  },
+  {
+    id: 'quantum-rose',
+    name: 'Quantum Rose',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'rgb(255, 100, 130)', secondary: 'rgb(40, 30, 35)', accent: '#c06ec4', background: 'rgb(18, 12, 15)', foreground: 'rgb(240, 230, 235)' },
+      light: { primary: 'rgb(200, 50, 80)', secondary: 'rgb(240, 230, 235)', accent: '#ffc1e3', background: 'rgb(252, 248, 250)', foreground: 'rgb(25, 15, 20)' },
+    },
+  },
+  {
+    id: 'rose-pine',
+    name: 'Rosé Pine',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: '#c4a7e7', secondary: '#403d52', accent: '#f6c177', background: '#191724', foreground: '#e0def4' },
+      light: { primary: '#907aa9', secondary: '#dfdad9', accent: '#ea9d34', background: '#faf4ed', foreground: '#575279' },
+    },
+  },
+  {
+    id: 'soft-pop',
+    name: 'Soft Pop',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'oklch(0.6801 0.1583 276.9349)', secondary: 'oklch(0.7845 0.1325 181.9120)', accent: 'oklch(0.8790 0.1534 91.6054)', background: 'oklch(0 0 0)', foreground: 'oklch(1.0000 0 0)' },
+      light: { primary: 'oklch(0.5106 0.2301 276.9656)', secondary: 'oklch(0.7038 0.1230 182.5025)', accent: 'oklch(0.7686 0.1647 70.0804)', background: 'oklch(0.9789 0.0082 121.6272)', foreground: 'oklch(0 0 0)' },
+    },
+  },
+  {
+    id: 'solar-dusk',
+    name: 'Solar Dusk',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: 'oklch(0.7049 0.1867 47.6044)', secondary: 'oklch(0.3127 0.039 49.5996)', accent: 'oklch(0.6 0.12 229.3202)', background: 'oklch(0.2183 0.0268 49.7085)', foreground: 'oklch(0.8994 0.0347 70.7236)' },
+      light: { primary: 'oklch(0.5553 0.1455 48.9975)', secondary: 'oklch(0.9139 0.0359 77.3089)', accent: 'oklch(0.55 0.12 229)', background: 'oklch(0.9685 0.0187 84.078)', foreground: 'oklch(0.366 0.0251 49.6085)' },
+    },
+  },
+  {
+    id: 'synthwave-84',
+    name: 'Synthwave \'84',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    colors: {
+      dark: { primary: '#ff7edb', secondary: '#34294f', accent: '#72f1b8', background: '#262335', foreground: '#ffffff' },
+      light: { primary: '#ff7edb', secondary: '#34294f', accent: '#72f1b8', background: '#262335', foreground: '#ffffff' },
+    },
+  },
+  {
+    id: 'terminal',
+    name: 'Terminal',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    colors: {
+      dark: { primary: 'rgb(0, 255, 0)', secondary: 'rgb(20, 20, 20)', accent: 'rgb(0, 200, 200)', background: 'rgb(0, 0, 0)', foreground: 'rgb(0, 255, 0)' },
+      light: { primary: 'rgb(0, 255, 0)', secondary: 'rgb(20, 20, 20)', accent: 'rgb(0, 200, 200)', background: 'rgb(0, 0, 0)', foreground: 'rgb(0, 255, 0)' },
+    },
+  },
+  {
+    id: 'tinacious',
+    name: 'Tinacious',
+    builtIn: true,
+    modeSupport: 'light-only',
+    colors: {
+      dark: { primary: 'rgb(214, 95, 149)', secondary: 'rgb(50, 50, 60)', accent: 'rgb(119, 220, 194)', background: 'rgb(28, 28, 36)', foreground: 'rgb(230, 230, 240)' },
+      light: { primary: 'rgb(214, 95, 149)', secondary: 'rgb(232, 232, 237)', accent: 'rgb(119, 220, 194)', background: 'rgb(247, 247, 250)', foreground: 'rgb(28, 28, 36)' },
+    },
+  },
+  {
+    id: 'tokyo-night',
+    name: 'Tokyo Night',
+    builtIn: true,
+    modeSupport: 'both',
+    colors: {
+      dark: { primary: '#7aa2f7', secondary: '#414868', accent: '#7dcfff', background: '#24283b', foreground: '#c0caf5' },
+      light: { primary: '#2e7de9', secondary: '#a1a6c5', accent: '#007197', background: '#e1e2e7', foreground: '#3760bf' },
+    },
+  },
+];
diff --git a/scripts/convert-themes.ts b/scripts/convert-themes.ts
new file mode 100644
index 000000000..5b33bcc8d
--- /dev/null
+++ b/scripts/convert-themes.ts
@@ -0,0 +1,132 @@
+/**
+ * Converts FinSitter theme CSS files into Plannotator theme format.
+ *
+ * FinSitter: .theme-gruvbox-dark { ... } and .theme-gruvbox-light { ... } as separate files
+ * Plannotator: .theme-gruvbox { ... (dark) } and .theme-gruvbox.light { ... } in one file
+ *
+ * Also injects defaults for Plannotator-specific tokens (success, warning, code-bg, focus-highlight).
+ */
+
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
+import { join } from 'path';
+
+const FINSITTER_DIR = '/Users/ramos/mrxtek/finsitter/reactronite/src/app/styles/themes';
+const OUTPUT_DIR = join(import.meta.dir, '../packages/ui/themes');
+
+// Themes to include, grouped by merged name
+const THEME_MAP: Record<string, { dark?: string; light?: string }> = {
+  'adwaita':       { dark: 'adwaita-dark.css', light: 'adwaita.css' },
+  'bold-tech':     { dark: 'bold-tech-dark.css', light: 'bold-tech-light.css' },
+  'caffeine':      { dark: 'caffine-dark.css', light: 'caffine-light.css' },
+  'cobalt2':       { dark: 'cobalt2.css' },
+  'cyberdyne':     { dark: 'cyberdyne.css' },
+  'cyberfunk':     { dark: 'cyberfunk-dark.css', light: 'cyberfunk-light.css' },
+  'doom-64':       { dark: 'doom-64-dark.css', light: 'doom-64-light.css' },
+  'dracula':       { dark: 'dracula.css' },
+  'gruvbox':       { dark: 'gruvbox-dark.css', light: 'gruvbox-light.css' },
+  'ir-black':      { dark: 'ir-black.css' },
+  'nord':          { dark: 'nord.css' },
+  'paulmillr':     { dark: 'paulmillr.css' },
+  'quantum-rose':  { dark: 'quantum-rose-dark.css', light: 'quantum-rose-light.css' },
+  'solarized':     { dark: 'solarized-dark.css', light: 'solarized-light.css' },
+  'solar-dusk':    { dark: 'solar-dusk-dark.css', light: 'solar-dusk-light.css' },
+  'terminal':      { dark: 'terminal.css' },
+  'tinacious':     { light: 'tinacious-light.css' },
+};
+
+// Plannotator-specific token defaults
+const PLANNOTATOR_DEFAULTS_DARK = `
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);`;
+
+const PLANNOTATOR_DEFAULTS_LIGHT = `
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);`;
+
+function extractTokens(css: string): string {
+  // Extract just the CSS variable declarations from inside the selector block
+  const match = css.match(/\{([\s\S]*)\}/);
+  if (!match) return '';
+  return match[1].trim();
+}
+
+function hasToken(tokens: string, name: string): boolean {
+  return tokens.includes(`--${name}:`);
+}
+
+function addMissingDefaults(tokens: string, defaults: string): string {
+  const lines = defaults.trim().split('\n');
+  const missing: string[] = [];
+  for (const line of lines) {
+    const match = line.match(/--([^:]+):/);
+    if (match && !hasToken(tokens, match[1].trim())) {
+      missing.push(line);
+    }
+  }
+  if (missing.length === 0) return tokens;
+  return tokens + '\n\n  /* Plannotator extended tokens */' + missing.join('');
+}
+
+function convertTheme(name: string, config: { dark?: string; light?: string }): string {
+  const lines: string[] = [];
+
+  if (config.dark) {
+    const darkCss = readFileSync(join(FINSITTER_DIR, config.dark), 'utf-8');
+    let darkTokens = extractTokens(darkCss);
+    darkTokens = addMissingDefaults(darkTokens, PLANNOTATOR_DEFAULTS_DARK);
+    lines.push(`.theme-${name} {`);
+    lines.push(`  ${darkTokens}`);
+    lines.push(`}`);
+  }
+
+  if (config.light) {
+    const lightCss = readFileSync(join(FINSITTER_DIR, config.light), 'utf-8');
+    let lightTokens = extractTokens(lightCss);
+    lightTokens = addMissingDefaults(lightTokens, PLANNOTATOR_DEFAULTS_LIGHT);
+
+    if (config.dark) {
+      lines.push('');
+      lines.push(`.theme-${name}.light {`);
+    } else {
+      // Light-only theme: light tokens go into .light, generate dark from light with note
+      lines.push(`/* Dark mode: uses light colors as base (light-only source theme) */`);
+      lines.push(`.theme-${name} {`);
+      lines.push(`  ${lightTokens}`);
+      lines.push(`}`);
+      lines.push('');
+      lines.push(`.theme-${name}.light {`);
+    }
+    lines.push(`  ${lightTokens}`);
+    lines.push(`}`);
+  } else if (config.dark) {
+    // Dark-only: duplicate dark tokens for light with a note
+    const darkCss = readFileSync(join(FINSITTER_DIR, config.dark), 'utf-8');
+    let darkTokens = extractTokens(darkCss);
+    darkTokens = addMissingDefaults(darkTokens, PLANNOTATOR_DEFAULTS_LIGHT);
+    lines.push('');
+    lines.push(`/* Light mode: uses dark colors as base (dark-only source theme) */`);
+    lines.push(`.theme-${name}.light {`);
+    lines.push(`  ${darkTokens}`);
+    lines.push(`}`);
+  }
+
+  return lines.join('\n');
+}
+
+// Convert all themes
+for (const [name, config] of Object.entries(THEME_MAP)) {
+  const output = convertTheme(name, config);
+  const outPath = join(OUTPUT_DIR, `${name}.css`);
+  writeFileSync(outPath, output + '\n');
+  console.log(`  Converted: ${name}.css`);
+}
+
+console.log(`\nDone! ${Object.keys(THEME_MAP).length} themes converted.`);
