@plannotator/ui 0.30.0 → 0.31.0

package/components/Settings.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import type { AnnotateAgentTerminalSide } from '@plannotator/core/agent-terminal';
 import type { Origin } from '@plannotator/core/agents';
 import type { DiffLineBgIntensity } from '@plannotator/core/config-types';
 import { configStore, useConfigValue, setReviewPanelView, setReviewDefaultDiffType } from '../config';
@@ -73,8 +74,9 @@ import {
   type FileBrowserSettings,
 } from '../utils/fileBrowser';
 import { requestVimDocumentFocus } from '../hooks/useVimDocumentFocus';
+import { AnalysisLayerToggle } from './AnalysisLayerToggle';
 
-type SettingsTab = 'general' | 'theme' | 'git' | 'display' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'comments' | 'hooks';
+type SettingsTab = 'general' | 'theme' | 'git' | 'display' | 'analysis' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'comments' | 'hooks';
 
 interface SettingsProps {
   taterMode: boolean;
@@ -94,8 +96,17 @@ interface SettingsProps {
    *  (base ref unresolvable) — the Git tab shows a note that the Git-status
    *  preference can't take effect in THIS repo. */
   sinceBaseUnavailable?: boolean;
+  /** The host is rendering its compact touch shell (review only). Display
+   *  settings that the compact shell overrides for the session are hidden
+   *  there instead of silently editing the desktop preference. */
+  isCompactTouchLayout?: boolean;
   /** Override Obsidian vault detection (default = GET /api/obsidian/vaults). */
   onDetectObsidianVaults?: () => Promise<string[]>;
+  /** This annotate session actually offers the Agent TUI, so its Position
+   *  setting is worth showing. Default false: the setting is the only way back
+   *  from a Hidden position, but offering it where no terminal can ever run
+   *  would just be a dead control. */
+  agentTerminalAvailable?: boolean;
 }
 
 // --- Review-mode Display tab (diff display options) ---
@@ -148,6 +159,12 @@ const DEFAULT_DIFF_TYPE_OPTIONS = [
   { value: 'all' as const, label: 'All Files (HEAD)', description: "Every tracked file at HEAD, shown as additions" },
 ];
 
+const AGENT_TERMINAL_SIDE_OPTIONS: { value: AnnotateAgentTerminalSide; label: string }[] = [
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' },
+  { value: 'hidden', label: 'Hidden' },
+];
+
 function SegmentedControl<T extends string>({ options, value, onChange }: {
   options: { value: T; label: string }[];
   value: T;
@@ -192,12 +209,17 @@ function ToggleSwitch({ checked, onChange, label, description, disabled = false
         aria-checked={checked}
         disabled={disabled}
         onClick={() => onChange(!checked)}
-        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed ${
-          checked ? 'bg-primary' : 'bg-muted'
-        }`}
+        className="relative inline-flex h-11 w-11 shrink-0 items-center disabled:cursor-not-allowed"
       >
         <span
-          className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+          aria-hidden="true"
+          className={`absolute inset-x-0 top-2.5 h-6 rounded-full transition-colors ${
+            checked ? 'bg-primary' : 'bg-muted'
+          }`}
+        />
+        <span
+          aria-hidden="true"
+          className={`absolute top-3.5 inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
             checked ? 'translate-x-6' : 'translate-x-1'
           }`}
         />
@@ -288,6 +310,63 @@ function VimSettingsTab({
   );
 }
 
+function ReviewAnalysisTab() {
+  const semanticDiffEnabled = useConfigValue('semanticDiffEnabled');
+  const callFlowEnabled = useConfigValue('callFlowEnabled');
+  return (
+    <div className="space-y-5">
+      <div>
+        <div className="text-sm font-semibold">Analysis layers</div>
+        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+          Add structural context to the ordinary code diff. Each layer is independent and does no work while disabled.
+        </p>
+      </div>
+
+      <div className="space-y-4 rounded-xl border border-border bg-muted/20 p-4">
+        <AnalysisLayerToggle
+          checked={semanticDiffEnabled}
+          onChange={(enabled) => configStore.set('semanticDiffEnabled', enabled)}
+          label="Semantic changes"
+          description="Organize added, changed, moved, and removed functions, classes, and other named code. Enabled by default."
+        />
+        <div className="border-t border-border" />
+        <AnalysisLayerToggle
+          checked={callFlowEnabled}
+          onChange={(enabled) => configStore.set('callFlowEnabled', enabled)}
+          label="Call flow"
+          description="Diffs for function call stacks across git commits. 22 languages supported (AST-based, built using Tree-sitter)."
+        />
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div className="rounded-xl border border-border p-3.5">
+          <div className="flex items-center gap-2 text-xs font-semibold">
+            <span className="grid h-6 w-6 place-items-center rounded-md bg-primary/10 font-mono text-primary">▣</span>
+            Dock
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+            Open the complete analysis from the file panel. Rows jump to the relevant code location.
+          </p>
+        </div>
+        <div className="rounded-xl border border-border p-3.5">
+          <div className="flex items-center gap-2 text-xs font-semibold">
+            <span className="grid h-6 w-6 place-items-center rounded-md bg-primary/10 font-mono text-primary">⌁</span>
+            File lens
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+            File headers show compact counts and a focused popover for that file.
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-warning/25 bg-warning/[0.05] p-4 text-xs leading-relaxed text-muted-foreground">
+        <span className="font-semibold text-foreground">Call flow is syntactic.</span>{' '}
+        It does not use type resolution or runtime traces, so treat it as navigation context—not proof that a path executes.
+      </div>
+    </div>
+  );
+}
+
 const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavailable }) => {
   const defaultDiffType = useConfigValue('defaultDiffType');
   const reviewPanelView = useConfigValue('reviewPanelView');
@@ -358,7 +437,7 @@ const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavail
   );
 };
 
-const ReviewDisplayTab: React.FC = () => {
+const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isCompactTouchLayout = false }) => {
   const diffStyle = useConfigValue('diffStyle');
   const diffOverflow = useConfigValue('diffOverflow');
   const diffIndicators = useConfigValue('diffIndicators');
@@ -456,13 +535,23 @@ const ReviewDisplayTab: React.FC = () => {
 
       <div className="border-t border-border" />
 
-      {/* Diff Style */}
+      {/* Diff Style. The compact touch shell renders a session-only unified
+          diff, so the control there would look dead while quietly rewriting
+          the DESKTOP preference. Say what the phone is doing instead. */}
       <div className="space-y-2">
         <div>
           <div className="text-sm font-medium">Diff Style</div>
           <div className="text-xs text-muted-foreground">Side-by-side or inline diff view</div>
+          {isCompactTouchLayout && (
+            <div className="text-xs text-muted-foreground mt-1">
+              This layout shows unified diffs for the session; your desktop
+              preference is unchanged.
+            </div>
+          )}
         </div>
-        <SegmentedControl options={DIFF_STYLE_OPTIONS} value={diffStyle} onChange={(v) => configStore.set('diffStyle', v)} />
+        {!isCompactTouchLayout && (
+          <SegmentedControl options={DIFF_STYLE_OPTIONS} value={diffStyle} onChange={(v) => configStore.set('diffStyle', v)} />
+        )}
       </div>
 
       <div className="border-t border-border" />
@@ -759,7 +848,7 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, onDetectObsidianVaults }) => {
+export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false }) => {
   const [showDialog, setShowDialog] = useState(false);
   const settingsWasOpenRef = useRef(false);
   const [themePreview, setThemePreview] = useState(false);
@@ -791,6 +880,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const vimModeEnabled = useConfigValue('vimModeEnabled');
   const vimHudEnabled = useConfigValue('vimHudEnabled');
   const vimHudKeyPanelEnabled = useConfigValue('vimHudKeyPanelEnabled');
+  const agentTerminalSide = useConfigValue('agentTerminalSide');
   const [identity, setIdentity] = useState('');
   const [obsidian, setObsidian] = useState<ObsidianSettings>({
     enabled: false,
@@ -835,6 +925,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     if (mode === 'review') {
       t.push({ id: 'git', label: 'Git' });
       t.push({ id: 'display', label: 'Editor' });
+      t.push({ id: 'analysis', label: 'Analysis' });
       t.push({ id: 'comments', label: 'Comments' });
       if (aiProviders.length > 0) {
         t.push({ id: 'ai', label: 'AI' });
@@ -1306,6 +1397,37 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </>
                     )}
 
+                    {/* Agent TUI position. The same control lives in the
+                        terminal's own Display popover, but that one is
+                        unreachable once the position is Hidden — this is the
+                        way back. Both write the same config value. Gated on the
+                        terminal actually being available in this session, so a
+                        remote or runtime-less annotate never offers a dead
+                        control. */}
+                    {mode === 'annotate' && agentTerminalAvailable && (
+                      <>
+                        <div className="border-t border-border" />
+                        <div className="space-y-2">
+                          <div>
+                            <div className="text-sm font-medium">Agent TUI Position</div>
+                            <div className="text-xs text-muted-foreground">
+                              Which side the agent terminal docks on, or Hidden to keep it out of the layout
+                            </div>
+                          </div>
+                          <SegmentedControl
+                            options={AGENT_TERMINAL_SIDE_OPTIONS}
+                            value={agentTerminalSide}
+                            onChange={(v) => configStore.set('agentTerminalSide', v)}
+                          />
+                          {agentTerminalSide === 'hidden' && (
+                            <div className="text-[10px] text-muted-foreground/70">
+                              You can still open it for this session from the sidebar rail.
+                            </div>
+                          )}
+                        </div>
+                      </>
+                    )}
+
                     <div className="border-t border-border" />
 
                     {/* Auto-close Tab */}
@@ -1343,7 +1465,11 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
 
                 {/* === DISPLAY TAB === */}
                 {activeTab === 'display' && mode === 'review' && (
-                  <ReviewDisplayTab />
+                  <ReviewDisplayTab isCompactTouchLayout={isCompactTouchLayout} />
+                )}
+
+                {activeTab === 'analysis' && mode === 'review' && (
+                  <ReviewAnalysisTab />
                 )}
 
                 {activeTab === 'display' && mode !== 'review' && (

package/components/SkillReferenceMenu.tsx

@@ -9,6 +9,8 @@ const ROOT_LABELS: Record<SkillCatalogEntry['root'], string> = {
 };
 
 interface SkillReferenceMenuProps {
+  /** Id referenced by the focused textarea's aria-controls attribute. */
+  id: string;
   items: SkillCatalogEntry[];
   /** Explicitly activated row, or null — the menu opens with nothing active. */
   activeIndex: number | null;
@@ -79,6 +81,7 @@ function computeMenuPlacement(
  * a purely visual affordance; a pointer click inserts directly.
  */
 export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
+  id,
   items,
   activeIndex,
   onSelect,
@@ -140,6 +143,8 @@ export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
   return (
     <div
       ref={menuRef}
+      id={id}
+      role="listbox"
       data-skill-menu="true"
       data-skill-menu-placement={placement.direction}
       data-popover-layer="true"
@@ -157,6 +162,10 @@ export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
           <button
             key={item.name}
             type="button"
+            id={`${id}-option-${index}`}
+            role="option"
+            aria-selected={index === activeIndex}
+            tabIndex={-1}
             data-skill-item={item.name}
             data-skill-item-active={index === activeIndex ? 'true' : undefined}
             // Insert on pointerdown so the textarea never loses focus. A

package/components/StickyHeaderLane.tsx

@@ -27,7 +27,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { AnnotationToolstrip } from './AnnotationToolstrip';
 import { DocBadges } from './DocBadges';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportIntersectionRoot,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import type { EditorMode, InputMethod } from '../types';
 import type { PlanDiffStats } from '../utils/planDiffEngine';
 
@@ -172,7 +175,11 @@ export const StickyHeaderLane: React.FC<StickyHeaderLaneProps> = ({
     if (!sentinelRef.current || !scrollViewport) return;
     const observer = new IntersectionObserver(
       ([entry]) => setIsStuck(!entry.isIntersecting),
-      { root: scrollViewport, rootMargin: '80px 0px 0px 0px', threshold: 0 }
+      {
+        root: getScrollViewportIntersectionRoot(scrollViewport),
+        rootMargin: '80px 0px 0px 0px',
+        threshold: 0,
+      }
     );
     observer.observe(sentinelRef.current);
     return () => observer.disconnect();

package/components/TableOfContents.tsx

@@ -5,7 +5,12 @@ import {
   getAnnotationCountBySection,
   type TocItem,
 } from '../utils/annotationHelpers';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportRect,
+  getScrollViewportTop,
+  scrollViewportTo,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 
 interface TableOfContentsProps {
   blocks: Block[];
@@ -82,11 +87,11 @@ export function TableOfContents({
       if (target && scrollViewport) {
         const scrollContainer = scrollViewport;
         const headerOffset = 80; // sticky header (h-12) + breathing room
-        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerRect = getScrollViewportRect(scrollContainer);
         const targetRect = target.getBoundingClientRect();
         const offsetPosition =
-          scrollContainer.scrollTop + (targetRect.top - containerRect.top) - headerOffset;
-        scrollContainer.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+          getScrollViewportTop(scrollContainer) + (targetRect.top - containerRect.top) - headerOffset;
+        scrollViewportTo(scrollContainer, { top: offsetPosition, behavior: 'smooth' });
       }
     },
     [onNavigate, scrollViewport]

package/components/TextShimmer.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, type JSX } from 'react';
-import { motion } from 'motion/react';
+import { motion, useReducedMotion } from 'motion/react';
 
 export interface TextShimmerProps {
   children: string;
@@ -16,6 +16,7 @@ function TextShimmerComponent({
   duration = 2,
   spread = 2,
 }: TextShimmerProps) {
+  const shouldReduceMotion = useReducedMotion();
   const MotionComponent = motion.create(
     Component as keyof JSX.IntrinsicElements
   );
@@ -35,9 +36,9 @@ function TextShimmerComponent({
       ]
         .filter(Boolean)
         .join(' ')}
-      initial={{ backgroundPosition: '100% center' }}
-      animate={{ backgroundPosition: '0% center' }}
-      transition={{
+      initial={shouldReduceMotion ? false : { backgroundPosition: '100% center' }}
+      animate={shouldReduceMotion ? undefined : { backgroundPosition: '0% center' }}
+      transition={shouldReduceMotion ? undefined : {
         repeat: Infinity,
         duration,
         ease: 'linear',
@@ -45,7 +46,9 @@ function TextShimmerComponent({
       style={
         {
           '--spread': `${dynamicSpread}px`,
-          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
+          backgroundImage: shouldReduceMotion
+            ? 'linear-gradient(var(--base-color), var(--base-color))'
+            : 'var(--bg), linear-gradient(var(--base-color), var(--base-color))',
         } as React.CSSProperties
       }
     >

package/components/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { configStore } from '../config/configStore';
 import { readThemePairCookies, writeThemePairCookies } from '../config/settings';
 import { useConfigValue } from '../config/useConfig';
+import { faviconDataUrl } from '@plannotator/core/favicon';
 import { storage } from '../utils/storage';
 import {
   BUILT_IN_THEMES,
@@ -36,6 +37,12 @@ type ThemeProviderState = {
   darkTheme: string;
   setHalfTheme: (half: ThemeHalf, theme: string) => void;
   availableThemes: ThemeInfo[];
+  /**
+   * Whether this provider owns the document's favicon. Published so the Settings
+   * UI can hide the favicon control on hosts that did not opt in: a knob that
+   * changes nothing is worse than no knob.
+   */
+  manageFavicon: boolean;
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>({
@@ -51,6 +58,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>({
   darkTheme: 'plannotator',
   setHalfTheme: () => null,
   availableThemes: BUILT_IN_THEMES,
+  manageFavicon: false,
 });
 
 /** Sync theme classes on <html> without stripping non-theme classes (e.g. transitions-ready). */
@@ -94,6 +102,18 @@ interface ThemeProviderProps {
    * `plannotator-dark-theme`; these props rename only the two legacy values.
    */
   colorThemeStorageKey?: string;
+  /**
+   * Opt in to letting this provider own `<link rel="icon">` on the document.
+   *
+   * OFF by default, and deliberately so: `@plannotator/ui` is installed into
+   * host applications with their own branding, and a mounted provider must not
+   * silently replace a host page's favicon with Plannotator's. Plannotator's own
+   * apps pass `manageFavicon`; hosts opt in only if they want the same feature.
+   *
+   * The value also gates the Settings favicon control (see ThemeTab), so a host
+   * that leaves it off never renders a switch that would do nothing.
+   */
+  manageFavicon?: boolean;
 }
 
 export function ThemeProvider({
@@ -102,6 +122,7 @@ export function ThemeProvider({
   defaultColorTheme = 'plannotator',
   storageKey = 'plannotator-theme',
   colorThemeStorageKey = 'plannotator-color-theme',
+  manageFavicon = false,
 }: ThemeProviderProps) {
   const legacyKeys = useMemo(
     () => ({ mode: storageKey, colorTheme: colorThemeStorageKey }),
@@ -124,6 +145,26 @@ export function ThemeProvider({
   const storePair = useConfigValue('themePair');
   const pair = pendingSeed.current ?? storePair;
   const mode = pair.mode;
+  const faviconStyle = useConfigValue('faviconStyle');
+
+  useEffect(() => {
+    if (!manageFavicon) return;
+    if (typeof document === 'undefined') return;
+    let link = document.head.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    if (faviconStyle === 'classic') {
+      link.type = 'image/svg+xml';
+      link.removeAttribute('sizes');
+    } else {
+      link.type = 'image/png';
+      link.setAttribute('sizes', '64x64');
+    }
+    link.href = faviconDataUrl(faviconStyle);
+  }, [faviconStyle, manageFavicon]);
 
   // Hand the resolved pair to the store as a SEED, not a user choice: seeding
   // writes memory + cookies only. Routing it through set() would queue a
@@ -243,7 +284,8 @@ export function ThemeProvider({
     darkTheme: pair.dark,
     setHalfTheme,
     availableThemes: BUILT_IN_THEMES,
-  }), [mode, preferredMode, resolvedMode, colorTheme, pair.light, pair.dark, setMode, setColorTheme, setHalfTheme]);
+    manageFavicon,
+  }), [mode, preferredMode, resolvedMode, colorTheme, pair.light, pair.dark, setMode, setColorTheme, setHalfTheme, manageFavicon]);
 
   return (
     <ThemeProviderContext.Provider value={value}>

package/components/ThemeTab.tsx

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { useTheme } from './ThemeProvider';
 import { THEME_MODES } from './themeModes';
 import { themesForHalf, type ThemeHalf } from '../utils/themeRegistry';
+import { configStore } from '../config/configStore';
+import { useConfigValue } from '../config/useConfig';
+import { faviconDataUrl, type FaviconStyle } from '@plannotator/core/favicon';
 
 interface ThemeTabProps {
   onPreview?: () => void;
@@ -13,12 +16,46 @@ const HALVES: { id: ThemeHalf; label: string }[] = [
   { id: 'dark', label: 'Dark' },
 ];
 
+const FAVICON_STYLES: { id: FaviconStyle; label: string }[] = [
+  { id: 'totman', label: 'Totman' },
+  { id: 'classic', label: 'Classic P' },
+];
+
 const SyntaxLinesIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
   </svg>
 );
 
+/**
+ * The favicon style choices. Rendered in both layouts, so it lives in one place.
+ * The compact layout drops the visible "Favicon" heading the full layout has, so
+ * the group carries its own accessible name and two unlabelled image buttons are
+ * never all a screen reader gets.
+ */
+const FaviconStyleControl: React.FC<{ selected: FaviconStyle }> = ({ selected }) => (
+  <div className="flex gap-1" role="group" aria-label="Favicon style">
+    {FAVICON_STYLES.map(({ id, label }) => (
+      <button
+        key={id}
+        type="button"
+        aria-pressed={selected === id}
+        onClick={() => configStore.set('faviconStyle', id)}
+        className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
+          selected === id
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-muted text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        <span className="flex items-center gap-1.5">
+          <img src={faviconDataUrl(id)} alt="" className="w-5 h-5 rounded-sm shrink-0" />
+          {label}
+        </span>
+      </button>
+    ))}
+  </div>
+);
+
 export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
   const {
     mode,
@@ -28,7 +65,9 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
     setHalfTheme,
     availableThemes,
     preferredMode,
+    manageFavicon,
   } = useTheme();
+  const faviconStyle = useConfigValue('faviconStyle');
 
   // Which half the grid assigns to. Follows the mode you are actually seeing,
   // so opening Settings in dark mode edits the dark half first.
@@ -68,6 +107,7 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
           {THEME_MODES.map(({ id, label, Icon }) => (
             <button
               key={id}
+              type="button"
               onClick={() => setMode(id)}
               className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
                 mode === id
@@ -82,12 +122,23 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
             </button>
           ))}
         </div>
+        {!compact && manageFavicon && (
+          <div className="space-y-1.5 pt-1">
+            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Favicon</label>
+            <FaviconStyleControl selected={faviconStyle} />
+          </div>
+        )}
         {!compact && (
           <p className="text-[11px] text-muted-foreground/70">
             System follows your OS and switches between the two themes below.
           </p>
         )}
-        {compact && <div className="ml-auto">{summary}</div>}
+        {compact && (
+          <>
+            {manageFavicon && <FaviconStyleControl selected={faviconStyle} />}
+            <div className="ml-auto">{summary}</div>
+          </>
+        )}
       </div>
 
       {/* Theme pair */}

package/components/Tooltip.tsx

@@ -63,7 +63,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
         <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset} className="isolate z-50">
           <BaseTooltip.Popup
             className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${
-              wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
+              wide
+                ? 'max-w-[min(260px,calc(100vw-1rem))] leading-snug whitespace-normal [overflow-wrap:anywhere]'
+                : 'whitespace-nowrap'
             }`}
           >
             {content}

package/components/Viewer.tsx

@@ -49,7 +49,13 @@ import { PinpointOverlay } from './PinpointOverlay';
 import { usePinpoint } from '../hooks/usePinpoint';
 import { useAnnotationHighlighter } from '../hooks/useAnnotationHighlighter';
 import { useVimSelection } from '../hooks/useVimSelection';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportIntersectionRoot,
+  getScrollViewportRect,
+  getScrollViewportTop,
+  scrollViewportTo,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import { decodeAnchorHash } from '../utils/anchors';
 import { VimModeOverlay } from './VimModeOverlay';
 
@@ -602,7 +608,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     if (!stickyActions || !stickySentinelRef.current || !scrollViewport) return;
     const observer = new IntersectionObserver(
       ([entry]) => setIsStuck(!entry.isIntersecting),
-      { root: scrollViewport, threshold: 0 }
+      { root: getScrollViewportIntersectionRoot(scrollViewport), threshold: 0 }
     );
     observer.observe(stickySentinelRef.current);
     return () => observer.disconnect();
@@ -635,12 +641,12 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     const headerOffset = stickyActionsEl
       ? stickyActionsEl.getBoundingClientRect().height + stickyTop
       : 0;
-    const containerRect = scrollViewport.getBoundingClientRect();
+    const containerRect = getScrollViewportRect(scrollViewport);
     const targetRect = target.getBoundingClientRect();
     const relativeTop = targetRect.top - containerRect.top;
-    const offsetPosition = scrollViewport.scrollTop + relativeTop - headerOffset;
+    const offsetPosition = getScrollViewportTop(scrollViewport) + relativeTop - headerOffset;
 
-    scrollViewport.scrollTo({
+    scrollViewportTo(scrollViewport, {
       top: Math.max(0, offsetPosition),
       behavior: 'smooth',
     });
@@ -778,6 +784,8 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     setViewerCommentPopover(null);
   }, []);
 
+  const commentDraftScope = linkedDocInfo?.filepath ?? sourceInfo ?? markdown.slice(0, 120);
+
   const codePathValidation = useValidatedCodePaths(markdown, codePathBaseDir, disableCodePathValidation);
 
   return (
@@ -1154,6 +1162,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               contextText={hookCommentPopover.contextText}
               isGlobal={false}
               initialText={hookCommentPopover.initialText}
+              draftKey={`plan:${commentDraftScope}:${hookCommentPopover.draftKey}`}
               onSubmit={hookCommentSubmit}
               onClose={hookCommentClose}
               allowImages={allowImages}
@@ -1173,6 +1182,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             contextText={viewerCommentPopover.contextText}
             isGlobal={viewerCommentPopover.isGlobal}
             initialText={viewerCommentPopover.initialText}
+            draftKey={`plan:${commentDraftScope}:${
+              viewerCommentPopover.isGlobal
+                ? 'global'
+                : `code-block:${viewerCommentPopover.codeBlock?.block.id ?? viewerCommentPopover.contextText}`
+            }`}
             onSubmit={handleViewerCommentSubmit}
             onClose={handleViewerCommentClose}
             allowImages={allowImages}