@plannotator/ui 0.36.0 → 0.38.0

package/components/KeyboardShortcuts.tsx

@@ -88,6 +88,7 @@ const documentViewShortcuts: ShortcutSection = {
   title: 'View',
   shortcuts: [
     { keys: [modKey, '.'], desc: 'Toggle focus mode', hint: 'Collapses the Contents sidebar and the right-hand panel together; press again to restore whatever was open before. Markdown documents only; HTML pages keep their own layout.' },
+    { keys: [modKey, 'E'], desc: 'Toggle edit mode', hint: 'Opens the markdown source editor in place, keeping your scroll position; press again to commit your edits and return to annotating. Markdown documents only; a source-backed document with unsaved changes keeps its two-step discard.' },
   ],
 };
 

package/components/PlanHeaderMenu.tsx

@@ -40,7 +40,7 @@ interface PlanHeaderMenuProps {
 }
 
 export interface CompactPlanAction {
-  id: 'exit' | 'feedback' | 'approve' | 'copy' | 'done' | 'edit' | 'tools' | 'annotate' | 'refresh' | 'annotations' | 'ai' | 'review';
+  id: 'exit' | 'feedback' | 'approve' | 'copy' | 'done' | 'edit' | 'tools' | 'annotate' | 'refresh' | 'annotations' | 'ai' | 'review' | 'note' | 'discard-finish';
   label: string;
   subtitle?: string;
   onSelect: () => void;

package/components/Settings.tsx

@@ -3,6 +3,7 @@ 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 type { TokenHoverDelay } from '@plannotator/core/token-hover';
 import { configStore, useConfigValue, setReviewPanelView, setReviewDefaultDiffType, setReviewAutoViewed } from '../config';
 import { setWebMcpToolsEnabled, useWebMcpToolsEnabled } from '../webmcp/preference';
 import { loadDiffFont } from '../utils/diffFonts';
@@ -64,7 +65,7 @@ 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 { ThemeTab } from './ThemeTab';
-import { isMac, modKey, altKey } from '../utils/platform';
+import { isMac, modKey, modKeyWord, altKey } from '../utils/platform';
 import { getAIProviderSettings, resolveAIProviderSelection } from '../utils/aiProvider';
 import { AISettingsTab } from './AISettingsTab';
 import { HooksTab } from './settings/HooksTab';
@@ -133,6 +134,23 @@ export const DIFF_STYLE_OPTIONS = [
   { value: 'split' as const, label: 'Split' },
   { value: 'unified' as const, label: 'Unified' },
 ];
+/**
+ * The modifier gate is the platform's primary modifier: Cmd on macOS, Ctrl on
+ * Windows and Linux. Labeled through modKeyWord so the control names the key
+ * the reader actually has.
+ */
+export const TOKEN_HOVER_TRIGGER_OPTIONS = [
+  { value: 'hover' as const, label: 'On hover' },
+  { value: 'modifier' as const, label: `Hold ${modKeyWord}` },
+  { value: 'off' as const, label: 'Off' },
+];
+/** SegmentedControl keys on strings, so the ms values ride as their digits. */
+export type TokenHoverDelayOption = '150' | '300' | '700';
+export const TOKEN_HOVER_DELAY_OPTIONS = [
+  { value: '150' as const, label: 'Fast' },
+  { value: '300' as const, label: 'Default' },
+  { value: '700' as const, label: 'Relaxed' },
+];
 export const OVERFLOW_OPTIONS = [
   { value: 'scroll' as const, label: 'Scroll' },
   { value: 'wrap' as const, label: 'Wrap' },
@@ -157,6 +175,7 @@ const DEFAULT_DIFF_TYPE_OPTIONS = [
   // "All Changes" belongs to since-base (the flagship composite); uncommitted
   // reverts to its plain name so the two stay distinguishable side by side.
   { value: 'since-base' as const, label: 'All Changes (Recommended)', description: "Everything since your branch split from main — committed, uncommitted, and untracked" },
+  { value: 'local-vs-remote' as const, label: 'Local vs Remote Branch', description: "Your local branch and working tree compared with its last-fetched remote-tracking branch" },
   { value: 'uncommitted' as const, label: 'Uncommitted', description: "Everything you've changed since your last commit" },
   { value: 'unstaged' as const, label: 'Unstaged', description: "Only changes you haven't staged yet" },
   { value: 'staged' as const, label: 'Staged', description: "Only changes you've staged for commit" },
@@ -170,22 +189,27 @@ const AGENT_TERMINAL_SIDE_OPTIONS: { value: AnnotateAgentTerminalSide; label: st
   { value: 'hidden', label: 'Hidden' },
 ];
 
-function SegmentedControl<T extends string>({ options, value, onChange }: {
+function SegmentedControl<T extends string>({ options, value, onChange, disabled = false }: {
   options: { value: T; label: string }[];
   value: T;
   onChange: (v: T) => void;
+  /** Visible but inert, for a control whose axis does not apply right now. */
+  disabled?: boolean;
 }) {
   return (
-    <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-0.5">
+    <div className={['flex items-center gap-1 bg-muted/50 rounded-lg p-0.5', disabled && 'opacity-50'].filter(Boolean).join(' ')}>
       {options.map((opt) => (
         <button
           key={opt.value}
+          {...(disabled ? { disabled: true } : {})}
           onClick={() => onChange(opt.value)}
-          className={`flex-1 px-3 py-1.5 text-xs rounded-md transition-colors ${
+          className={[
+            'flex-1 px-3 py-1.5 text-xs rounded-md transition-colors',
+            disabled && 'cursor-not-allowed',
             value === opt.value
               ? 'bg-background text-foreground shadow-sm font-medium'
-              : 'text-muted-foreground hover:text-foreground'
-          }`}
+              : 'text-muted-foreground hover:text-foreground',
+          ].filter(Boolean).join(' ')}
         >
           {opt.label}
         </button>
@@ -470,6 +494,8 @@ const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isComp
   const diffExpandUnchanged = useConfigValue('diffExpandUnchanged');
   const diffFontFamily = useConfigValue('diffFontFamily');
   const diffFontSize = useConfigValue('diffFontSize');
+  const tokenHoverTrigger = useConfigValue('tokenHoverTrigger');
+  const tokenHoverDelay = useConfigValue('tokenHoverDelay');
 
   // Load font for the preview swatch
   useEffect(() => {
@@ -493,6 +519,41 @@ const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isComp
 
       <div className="border-t border-border" />
 
+      {/* Hover cards (internally tokenHover*; the label is what changed, not
+          the ids). One trigger select rather than a toggle plus a mode: `Off`
+          is a value of the same question, so there is no unreachable
+          enabled-but-off state to reason about. The delay stays a separate
+          axis because "too eager" is a complaint neither the hold-modifier option
+          nor Off answers. */}
+      <div className="space-y-3">
+        <div>
+          <div className="text-sm font-medium">Hover cards</div>
+          <div className="text-xs text-muted-foreground">
+            Rest the pointer on a symbol in a diff to see where it is defined and who
+            references it. Needs ripgrep and a local checkout; nothing appears when the
+            search comes back empty. {modKeyWord}+click still opens the References panel either way.
+          </div>
+        </div>
+        <SegmentedControl
+          options={TOKEN_HOVER_TRIGGER_OPTIONS}
+          value={tokenHoverTrigger}
+          onChange={(v) => configStore.set('tokenHoverTrigger', v)}
+        />
+        <div className="space-y-2">
+          <div className="text-xs text-muted-foreground">
+            How long the pointer rests before a card is requested
+          </div>
+          <SegmentedControl
+            options={TOKEN_HOVER_DELAY_OPTIONS}
+            value={String(tokenHoverDelay) as TokenHoverDelayOption}
+            onChange={(v) => configStore.set('tokenHoverDelay', Number(v) as TokenHoverDelay)}
+            disabled={tokenHoverTrigger === 'off'}
+          />
+        </div>
+      </div>
+
+      <div className="border-t border-border" />
+
       {/* Font Family */}
       <div className="space-y-2">
         <div>

package/components/StickyHeaderLane.tsx

@@ -34,30 +34,14 @@ import {
 } from '../hooks/useScrollViewport';
 import type { EditorMode, InputMethod } from '../types';
 import type { PlanDiffStats } from '../utils/planDiffEngine';
+import {
+  resolveCompactHeaderGeometry,
+  snapCompactHeaderWidth,
+} from './compactHeaderLayout';
 
-// Snap a measured pixel width to a 16px grid. ResizeObserver fires every
-// frame during a drag; without quantization the sticky bar would
-// re-render on every pixel. Hoisted to module scope so the effects
-// (which use [] deps) can't accidentally close over a stale instance.
-// Floor (not round) so wrapper undershoots and actions overshoots — both
-// errors push toward a more cautious layout, avoiding a one-bucket overlap
-// flash right at the 300/460 thresholds during a slow drag.
-const snap = (n: number) => Math.floor(n / 16) * 16;
-
-// Layout geometry — static tuning constants, hoisted alongside `snap`.
-// LEFT_OFFSET: matches the bar's `md:left-5` (20px).
-// GAP: minimum breathing room between the bar's right edge and the
-//      action button cluster's left edge when they share a lane.
-// Two-stage shared-lane shrinkage, mirroring the right side:
-//   WIDE_BAR_WIDTH: full toolstrip (active labels Pinpoint/Markup ~300px)
-//                   + badges (~140px) on a single line.
-//   MIN_BAR_WIDTH:  icon-only toolstrip (~140px) + badges (~140px).
-// Below MIN, even the icon-only bar can't fit beside the (likely also
-// icon-only) action cluster — stack as the final fallback.
+// Matches the bar's `md:left-5` inset. The remaining shared geometry lives
+// in compactHeaderLayout so Viewer-owned and standalone lanes cannot drift.
 const LEFT_OFFSET = 20;
-const GAP = 16;
-const WIDE_BAR_WIDTH = 460;
-const MIN_BAR_WIDTH = 300;
 
 /** Controls when the compact header lane is visible and interactive. */
 export type StickyHeaderLaneVisibility = 'stuck' | 'always';
@@ -145,27 +129,19 @@ export const StickyHeaderLane: React.FC<StickyHeaderLaneProps> = ({
   // removes chrome at rest for the supported chrome-free presentation.
   const showChrome = visibility === 'always' ? laneIsStuck : true;
 
-  // Space available for the bar in the shared lane = wrapper width, minus
-  // the bar's left offset, minus the action buttons' measured width, minus
-  // the breathing gap.
-  const availableForBar = wrapperWidth - LEFT_OFFSET - actionsWidth - GAP;
-
-  // Narrow = not enough room in the shared lane for even the icon-only
-  // bar. Falls back to a stacked row below the action buttons.
-  // actionsWidth=0 before measurement is treated as "don't know yet"
-  // (not narrow), so we don't flash the wrong layout on first paint.
-  const measured = wrapperWidth > 0 && actionsWidth > 0;
-  const isNarrow = measured && availableForBar < MIN_BAR_WIDTH;
-  // Tight = shared lane still fits, but only if the toolstrip drops its
-  // active labels and goes icon-only. Lets us stay horizontally aligned
-  // for an extra ~160px of width before stacking.
-  const isToolstripIconOnly =
-    measured && !isNarrow && availableForBar < WIDE_BAR_WIDTH;
+  const headerGeometry = resolveCompactHeaderGeometry({
+    containerWidth: wrapperWidth,
+    trailingWidth: actionsWidth,
+    leadingInset: LEFT_OFFSET,
+  });
+  const availableForBar = headerGeometry.availableForLeading;
+  const isNarrow = headerGeometry.layout === 'narrow';
+  const isToolstripIconOnly = headerGeometry.layout === 'tight';
 
   useEffect(() => {
     if (!wrapperRef.current) return;
     const ro = new ResizeObserver(([entry]) => {
-      const next = snap(entry.contentRect.width);
+      const next = snapCompactHeaderWidth(entry.contentRect.width);
       setWrapperWidth((prev) => (prev === next ? prev : next));
     });
     ro.observe(wrapperRef.current);
@@ -188,7 +164,7 @@ export const StickyHeaderLane: React.FC<StickyHeaderLaneProps> = ({
     const el = document.querySelector<HTMLElement>('[data-sticky-actions]');
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
-      const next = snap(entry.contentRect.width);
+      const next = snapCompactHeaderWidth(entry.contentRect.width);
       setActionsWidth((prev) => (prev === next ? prev : next));
     });
     ro.observe(el);

package/components/ToolbarButtons.tsx

@@ -14,7 +14,6 @@ interface FeedbackButtonProps {
   loadingLabel?: string;
   shortLoadingLabel?: string;
   title?: string;
-  muted?: boolean;
   labelBreakpoint?: ToolbarLabelBreakpoint;
 }
 
@@ -27,7 +26,6 @@ export const FeedbackButton: React.FC<FeedbackButtonProps> = ({
   loadingLabel = 'Sending...',
   shortLoadingLabel,
   title = 'Send Feedback',
-  muted = false,
   labelBreakpoint = 'md',
 }) => (
   <Button
@@ -37,7 +35,6 @@ export const FeedbackButton: React.FC<FeedbackButtonProps> = ({
     disabled={disabled}
     title={title}
     iconLeft={<Send className="size-3.5" />}
-    className={cn(muted && 'opacity-50 cursor-not-allowed')}
   >
     {shortLabel ? (
       <>
@@ -65,8 +62,10 @@ export interface ApproveButtonProps {
   mobileLabel?: string;
   mobileLoadingLabel?: string;
   title?: string;
+  /** Kept for plan mode (packages/editor AppHeader) — the softened "you have
+   *  annotations" treatment. The old platform-mode `muted` prop died with
+   *  PR6 (DecisionControl owns the self-approval mute now). */
   dimmed?: boolean;
-  muted?: boolean;
   labelBreakpoint?: ToolbarLabelBreakpoint;
 }
 
@@ -80,7 +79,6 @@ export const ApproveButton: React.FC<ApproveButtonProps> = ({
   mobileLoadingLabel = '...',
   title,
   dimmed = false,
-  muted = false,
   labelBreakpoint = 'md',
 }) => (
   <Button
@@ -91,9 +89,8 @@ export const ApproveButton: React.FC<ApproveButtonProps> = ({
     title={title}
     iconLeft={<Check className="size-3.5" />}
     className={cn(
-      muted && 'opacity-40 cursor-not-allowed bg-muted text-muted-foreground hover:bg-muted',
-      disabled && !muted && 'bg-muted text-muted-foreground hover:bg-muted',
-      dimmed && !muted && !disabled && 'bg-success/50 text-success-foreground/70 hover:bg-success hover:text-success-foreground',
+      disabled && 'bg-muted text-muted-foreground hover:bg-muted',
+      dimmed && !disabled && 'bg-success/50 text-success-foreground/70 hover:bg-success hover:text-success-foreground',
     )}
   >
     <span className={labelBreakpoint === 'lg' ? 'lg:hidden' : 'md:hidden'}>
@@ -111,6 +108,10 @@ interface ExitButtonProps {
   isLoading?: boolean;
   title?: string;
   labelBreakpoint?: ToolbarLabelBreakpoint;
+  /** `'ghost'` renders the icon-only ghost-X form that sits beside the
+   *  decision control. Default `'pill'` keeps every existing caller
+   *  byte-identical. */
+  appearance?: 'pill' | 'ghost';
 }
 
 export const ExitButton: React.FC<ExitButtonProps> = ({
@@ -119,7 +120,28 @@ export const ExitButton: React.FC<ExitButtonProps> = ({
   isLoading = false,
   title = 'Close session without sending feedback',
   labelBreakpoint = 'md',
-}) => (
+  appearance = 'pill',
+}) => appearance === 'ghost' ? (
+  <Button
+    variant="ghost"
+    size="xs"
+    onClick={onClick}
+    disabled={disabled || isLoading}
+    title={title}
+    aria-label={title}
+    // Maintainer ruling (post-demo): a bare X carries "close without
+    // sending" semantics an unlabeled icon should not carry alone — the
+    // word renders at every breakpoint.
+    className="px-2 text-muted-foreground gap-1.5"
+  >
+    {isLoading ? '…' : (
+      <>
+        <X className="size-3.5" aria-hidden="true" />
+        <span>Close</span>
+      </>
+    )}
+  </Button>
+) : (
   <Button
     variant="secondary"
     size="xs"