@plannotator/ui 0.22.0

package/components/OpenInAppButton.tsx

@@ -0,0 +1,299 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronDown, Check, Copy, MoreHorizontal } from 'lucide-react';
+import { AppIcon } from './icons/AppIcon';
+import { getLastOpenInApp, setLastOpenInApp } from '../utils/storage';
+import type { OpenInKind } from '@plannotator/core/open-in-apps';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
+
+/**
+ * OpenInAppButton — split button + file-actions menu.
+ *
+ * When the file is launchable (local session, resolvable path), the left half
+ * opens it in the last-selected app and the chevron drops down the detected
+ * apps (file manager, then editors, then terminals) — picking one persists it
+ * AND opens immediately. The menu also carries Copy path and (review only)
+ * Copy file diff.
+ *
+ * When launching is unavailable (remote session, or PR review with no local
+ * checkout), the app actions are hidden but the copy actions remain behind a
+ * `⋯` overflow button — so e.g. Copy file diff never disappears. Renders
+ * nothing when there is neither an app to open nor a diff to copy.
+ */
+
+interface DetectedApp {
+  id: string;
+  label: string;
+  kind: OpenInKind;
+  icon: string;
+}
+
+interface OpenInAppButtonProps {
+  filePath: string | null | undefined;
+  base?: string | null;
+  /** Diff/patch text for the "Copy file diff" menu action (review only). */
+  diffText?: string | null;
+  /**
+   * When false, hide the app-launch actions (e.g. PR review with no local
+   * checkout, where files aren't resolvable on disk) but keep copy actions.
+   */
+  canOpen?: boolean;
+  /** When true, render the primary label text alongside the icon. */
+  showLabel?: boolean;
+  disabled?: boolean;
+}
+
+// The host app catalog is static for the session, but the all-files view
+// renders one OpenInAppButton per file — so fetch /api/open-in/apps once and
+// share the promise across every instance instead of N identical requests.
+interface OpenInAppsResponse {
+  available: boolean;
+  apps: DetectedApp[];
+}
+let openInAppsPromise: Promise<OpenInAppsResponse> | null = null;
+function loadOpenInApps(): Promise<OpenInAppsResponse> {
+  if (!openInAppsPromise) {
+    openInAppsPromise = fetch('/api/open-in/apps')
+      .then((r) => r.json())
+      .then((data: OpenInAppsResponse) => ({
+        available: !!data.available,
+        apps: Array.isArray(data.apps) ? data.apps : [],
+      }))
+      .catch(() => {
+        openInAppsPromise = null; // don't memoize failure — let the next mount retry
+        return { available: false, apps: [] };
+      });
+  }
+  return openInAppsPromise;
+}
+
+export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
+  filePath,
+  base,
+  diffText,
+  canOpen = true,
+  showLabel = false,
+  disabled = false,
+}) => {
+  const [apps, setApps] = useState<DetectedApp[] | null>(null);
+  const [available, setAvailable] = useState<boolean | null>(null);
+  const [currentId, setCurrentId] = useState<string>(() => getLastOpenInApp());
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const errorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadOpenInApps().then((data) => {
+      if (cancelled) return;
+      setAvailable(data.available);
+      setApps(data.apps);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (errorTimer.current) clearTimeout(errorTimer.current);
+    };
+  }, []);
+
+  const list = apps ?? [];
+  // Apps are launchable: server says available, the surface allows it, the path
+  // is resolvable, and at least one app was detected.
+  const openable =
+    available === true && canOpen && !!filePath && list.length > 0;
+
+  // Nothing to do: can't open AND nothing to copy. Also preserve the
+  // "hide when unavailable" behavior for surfaces whose only copy action is the
+  // path (annotate in a remote session) — show the standalone menu only when
+  // there's a diff to copy.
+  if (!openable && !diffText) return null;
+
+  // Resolve the active app: last-used if still detected, else reveal, else first.
+  const resolvedId = list.some((a) => a.id === currentId)
+    ? currentId
+    : list.some((a) => a.id === 'reveal')
+      ? 'reveal'
+      : (list[0]?.id ?? 'reveal');
+  const currentApp = list.find((a) => a.id === resolvedId) ?? list[0];
+
+  const flashError = (msg: string) => {
+    setError(msg);
+    if (errorTimer.current) clearTimeout(errorTimer.current);
+    errorTimer.current = setTimeout(() => setError(null), 4000);
+  };
+
+  const open = async (appId: string) => {
+    if (!filePath || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/open-in', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath, base: base ?? null, appId }),
+      });
+      const data = (await res.json().catch(() => null)) as
+        | { ok: boolean; error?: string }
+        | null;
+      if (!res.ok || !data || data.ok === false) {
+        flashError(data?.error || 'Failed to open');
+      }
+    } catch {
+      flashError('Failed to open');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const selectApp = (appId: string) => {
+    setLastOpenInApp(appId);
+    setCurrentId(appId);
+    setMenuOpen(false);
+    void open(appId);
+  };
+
+  const copyText = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      /* ignore */
+    }
+    setMenuOpen(false);
+  };
+
+  // Menu groups: file manager first, then editors, then terminals.
+  const grouped = [
+    list.filter((a) => a.kind === 'file-manager'),
+    list.filter((a) => a.kind === 'editor'),
+    list.filter((a) => a.kind === 'terminal'),
+  ].filter((g) => g.length > 0);
+
+  const Spinner = (
+    <svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+
+  const isDisabled = disabled || busy;
+
+  return (
+    <div className="flex items-center gap-1">
+      <div className="flex items-center rounded overflow-hidden">
+        {/* Primary: open in the current app (only when launchable). */}
+        {openable && currentApp && (
+          <button
+            type="button"
+            onClick={() => open(resolvedId)}
+            disabled={isDisabled}
+            className={`text-xs flex items-center gap-1 py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
+              showLabel ? 'pl-2 pr-1.5' : 'px-1.5'
+            }`}
+            title={error ?? currentApp.label}
+            aria-label={`Open in ${currentApp.label}`}
+          >
+            {busy ? Spinner : <AppIcon id={currentApp.icon} className="w-3.5 h-3.5" />}
+            {showLabel && <span className="whitespace-nowrap">{currentApp.label}</span>}
+          </button>
+        )}
+        {/* Chevron (with primary) or standalone overflow (copy-only). */}
+        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              disabled={isDisabled}
+              className={`text-xs flex items-center py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
+                openable ? 'px-1 border-l border-border/50' : 'px-1.5'
+              }`}
+              title={openable ? 'Open in…' : 'File actions'}
+              aria-label={openable ? 'Choose app to open in' : 'File actions'}
+            >
+              {openable ? (
+                <ChevronDown className="w-3 h-3" />
+              ) : (
+                <MoreHorizontal className="w-3.5 h-3.5" />
+              )}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            sideOffset={6}
+            className="min-w-[12rem]"
+            // Don't snap focus (and its focus ring) back onto the trigger when
+            // the menu closes — that left-edge bar reads as a stray artifact.
+            onCloseAutoFocus={(event) => event.preventDefault()}
+          >
+            {openable &&
+              grouped.map((group, gi) => (
+                <React.Fragment key={group[0].kind}>
+                  {gi > 0 && <DropdownMenuSeparator />}
+                  {group.map((app) => (
+                    <DropdownMenuItem
+                      key={app.id}
+                      onSelect={(e) => {
+                        e.preventDefault();
+                        selectApp(app.id);
+                      }}
+                      className="text-xs"
+                    >
+                      <AppIcon id={app.icon} className="w-4 h-4" />
+                      <span className="flex-1 truncate">{app.label}</span>
+                      {app.id === resolvedId && <Check className="w-3.5 h-3.5 text-foreground" />}
+                    </DropdownMenuItem>
+                  ))}
+                </React.Fragment>
+              ))}
+            {openable && (filePath || diffText) && <DropdownMenuSeparator />}
+            {filePath && (
+              <DropdownMenuItem
+                onSelect={(e) => {
+                  e.preventDefault();
+                  void copyText(filePath);
+                }}
+                className="text-xs"
+              >
+                <Copy className="w-4 h-4" />
+                <span className="flex-1">Copy path</span>
+              </DropdownMenuItem>
+            )}
+            {diffText && (
+              <DropdownMenuItem
+                onSelect={(e) => {
+                  e.preventDefault();
+                  void copyText(diffText);
+                }}
+                className="text-xs"
+              >
+                <Copy className="w-4 h-4" />
+                <span className="flex-1">Copy file diff</span>
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      {error && (
+        <span
+          role="status"
+          aria-live="polite"
+          className="text-xs text-destructive truncate max-w-[12rem]"
+        >
+          {error}
+        </span>
+      )}
+    </div>
+  );
+};

package/components/OverlayScrollArea.tsx

@@ -0,0 +1,82 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  type CSSProperties,
+  type ElementType,
+  type ReactNode,
+} from 'react';
+
+/**
+ * Native scroll container.
+ *
+ * Was an `overlayscrollbars-react` wrapper (#509 "Zed-style overlay scrollbars").
+ * Replaced with **native OS scrollbars** — the element you render IS the scroll node,
+ * so the deferred-init event dance, the force-recompute ResizeObserver, and the
+ * inner-viewport indirection are all gone. Scrollbar appearance is native, styled
+ * globally via `scrollbar-width: thin` + `scrollbar-color` in theme.css/styles.css.
+ *
+ * The public API is preserved on purpose (name, `onViewportReady`, the imperative
+ * handle) so existing consumers don't change — they just receive the host element,
+ * which now genuinely is the scrolling element.
+ *
+ * NOTE: do NOT reintroduce a `::-webkit-scrollbar { width: 6px }` rule — that thin
+ * rail was the original "can't grab the scrollbar" bug (#354).
+ */
+export interface OverlayScrollAreaHandle {
+  /** The DOM element that scrolls, or null before mount. */
+  getViewport(): HTMLElement | null;
+}
+
+export interface OverlayScrollAreaProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+  /** Root element tag (default 'div'). Use 'main' for the primary plan viewport. */
+  element?: ElementType;
+  children?: ReactNode;
+  /** Fires with the scroll element on mount, and `null` on unmount. */
+  onViewportReady?: (viewport: HTMLElement | null) => void;
+  /** Horizontal overflow (default 'hidden'). */
+  overflowX?: 'hidden' | 'scroll' | 'visible' | 'auto';
+  /** Vertical overflow (default 'auto'). */
+  overflowY?: 'hidden' | 'scroll' | 'visible' | 'auto';
+}
+
+export const OverlayScrollArea = forwardRef<
+  OverlayScrollAreaHandle,
+  OverlayScrollAreaProps
+>(function OverlayScrollArea(
+  {
+    element = 'div',
+    children,
+    onViewportReady,
+    overflowX = 'hidden',
+    overflowY = 'auto',
+    style,
+    ...rest
+  },
+  ref,
+) {
+  const elRef = useRef<HTMLElement | null>(null);
+  // Hold the latest callback without changing the ref-callback identity, so the
+  // element isn't detached/reattached on every parent render.
+  const onReadyRef = useRef(onViewportReady);
+  onReadyRef.current = onViewportReady;
+
+  const getViewport = useCallback((): HTMLElement | null => elRef.current, []);
+  useImperativeHandle(ref, () => ({ getViewport }), [getViewport]);
+
+  const setEl = useCallback((node: HTMLElement | null) => {
+    elRef.current = node;
+    onReadyRef.current?.(node);
+  }, []);
+
+  const Comp = element as ElementType;
+  const mergedStyle: CSSProperties = { overflowX, overflowY, ...style };
+
+  return (
+    <Comp ref={setEl as React.Ref<HTMLElement>} style={mergedStyle} {...rest}>
+      {children}
+    </Comp>
+  );
+});

package/components/PermissionModeSetup.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  PermissionMode,
+  PERMISSION_MODE_OPTIONS,
+  savePermissionModeSettings,
+} from '../utils/permissionMode';
+
+interface PermissionModeSetupProps {
+  isOpen: boolean;
+  onComplete: (mode: PermissionMode) => void;
+}
+
+export const PermissionModeSetup: React.FC<PermissionModeSetupProps> = ({
+  isOpen,
+  onComplete,
+}) => {
+  const [selectedMode, setSelectedMode] = useState<PermissionMode>('acceptEdits');
+
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    savePermissionModeSettings(selectedMode);
+    onComplete(selectedMode);
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm p-4">
+      <div className="bg-card border border-border rounded-xl w-full max-w-lg shadow-2xl">
+        {/* Header */}
+        <div className="p-5 border-b border-border">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="p-1.5 rounded-lg bg-primary/15">
+              <svg className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+              </svg>
+            </div>
+            <h3 className="font-semibold text-base">New: Permission Mode Preservation</h3>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Claude Code 2.1.7+ supports preserving your permission mode after plan approval.
+            Choose your preferred automation level.
+          </p>
+          <p className="text-xs text-muted-foreground/70 mt-1">
+            Requires Claude Code 2.1.7 or later. Run <code className="bg-muted px-1 rounded">claude update</code> to update.
+          </p>
+        </div>
+
+        {/* Options */}
+        <div className="p-4 space-y-2">
+          {PERMISSION_MODE_OPTIONS.map((option) => (
+            <label
+              key={option.value}
+              className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all border ${
+                selectedMode === option.value
+                  ? 'border-primary bg-primary/10'
+                  : 'border-transparent bg-muted/50 hover:bg-muted'
+              }`}
+            >
+              <input
+                type="radio"
+                name="permissionMode"
+                value={option.value}
+                checked={selectedMode === option.value}
+                onChange={() => setSelectedMode(option.value)}
+                className="mt-0.5 accent-primary"
+              />
+              <div className="flex-1">
+                <div className="text-sm font-medium">{option.label}</div>
+                <div className="text-xs text-muted-foreground">{option.description}</div>
+              </div>
+            </label>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border flex justify-between items-center">
+          <p className="text-xs text-muted-foreground">
+            You can change this later in Settings.
+          </p>
+          <button
+            onClick={handleConfirm}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+          >
+            Continue
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};

package/components/PinpointOverlay.tsx

@@ -0,0 +1,99 @@
+import React, { useLayoutEffect, useState, useRef } from 'react';
+import { useScrollViewport } from '../hooks/useScrollViewport';
+
+interface PinpointOverlayProps {
+  target: { element: HTMLElement; label: string } | null;
+  containerRef: React.RefObject<HTMLElement | null>;
+}
+
+interface OverlayPosition {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export const PinpointOverlay: React.FC<PinpointOverlayProps> = ({ target, containerRef }) => {
+  const [position, setPosition] = useState<OverlayPosition | null>(null);
+  const rafRef = useRef<number>(0);
+  const scrollViewport = useScrollViewport();
+
+  useLayoutEffect(() => {
+    if (!target || !containerRef.current) {
+      setPosition(null);
+      return;
+    }
+
+    const updatePosition = () => {
+      const containerRect = containerRef.current!.getBoundingClientRect();
+      const targetRect = target.element.getBoundingClientRect();
+
+      setPosition({
+        top: targetRect.top - containerRect.top,
+        left: targetRect.left - containerRect.left,
+        width: targetRect.width,
+        height: targetRect.height,
+      });
+    };
+
+    updatePosition();
+
+    const handleUpdate = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(updatePosition);
+    };
+
+    // Window resize always matters, regardless of whether the scroll
+    // viewport is ready yet. Register it unconditionally so the overlay
+    // stays aligned during the brief window before OverlayScrollbars
+    // delivers its viewport.
+    window.addEventListener('resize', handleUpdate, { passive: true });
+
+    // The scroll element is the OverlayScrollArea viewport. Falling back to
+    // <main> or window would attach to the wrong node and the overlay
+    // position would drift silently on scroll.
+    scrollViewport?.addEventListener('scroll', handleUpdate, { passive: true });
+
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', handleUpdate);
+      scrollViewport?.removeEventListener('scroll', handleUpdate);
+    };
+  }, [target, containerRef, scrollViewport]);
+
+  if (!position || !target) return null;
+
+  return (
+    <>
+      {/* Outline box */}
+      <div
+        className="border-2 border-dashed border-primary/50 bg-primary/5 rounded"
+        style={{
+          position: 'absolute',
+          top: position.top - 2,
+          left: position.left - 2,
+          width: position.width + 4,
+          height: position.height + 4,
+          pointerEvents: 'none',
+          zIndex: 20,
+          transition: 'all 100ms ease-out',
+        }}
+      />
+      {/* Label badge */}
+      <div
+        style={{
+          position: 'absolute',
+          top: position.top - 22,
+          left: position.left - 2,
+          pointerEvents: 'none',
+          zIndex: 21,
+          transition: 'all 100ms ease-out',
+        }}
+      >
+        <span className="inline-block text-[10px] leading-4 px-1.5 rounded-sm bg-primary text-primary-foreground font-mono whitespace-nowrap max-w-[220px] overflow-hidden text-ellipsis">
+          {target.label}
+        </span>
+      </div>
+    </>
+  );
+};