@plannotator/ui 0.22.0

package/components/AnnotationToolstrip.tsx

@@ -0,0 +1,355 @@
+import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
+import type { EditorMode, InputMethod } from '../types';
+import { TaterSpritePullup } from './TaterSpritePullup';
+
+interface AnnotationToolstripProps {
+  inputMethod: InputMethod;
+  onInputMethodChange: (method: InputMethod) => void;
+  mode: EditorMode;
+  onModeChange: (mode: EditorMode) => void;
+  taterMode?: boolean;
+  /**
+   * Compact mode: used inside the sticky header lane. Buttons only expand for
+   * the active mode (no hover expansion), gap is tightened, and the help link
+   * is hidden.
+   */
+  compact?: boolean;
+  /**
+   * Show the "how does this work?" help link. Default true; hidden on the
+   * floating HTML toolstrip where space is tight.
+   */
+  showHelpLink?: boolean;
+  /**
+   * Icon-only mode: no button ever expands to show a label, even the active
+   * one. Used in the sticky header lane on mobile so the toolstrip stays
+   * narrow and leaves room for the diff badges.
+   */
+  iconOnly?: boolean;
+}
+
+export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
+  inputMethod,
+  onInputMethodChange,
+  mode,
+  onModeChange,
+  taterMode,
+  compact = false,
+  showHelpLink = true,
+  iconOnly = false,
+}) => {
+  const [showHelp, setShowHelp] = useState(false);
+  const [helpTab, setHelpTab] = useState<'selection' | 'plannotator'>('selection');
+  const [mounted, setMounted] = useState(false);
+
+  // Enable transitions only after first paint
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true));
+  }, []);
+
+  return (
+    <>
+      <div className={`flex items-center flex-wrap ${compact ? 'gap-1' : 'gap-1.5'}`}>
+        {/* Input method group */}
+        <div className="inline-flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5 border border-border/30">
+          <ToolstripButton
+            active={inputMethod === 'drag'}
+            onClick={() => onInputMethodChange('drag')}
+            label="Select"
+            color="primary"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+                <path d="M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"/>
+                <path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/>
+                <path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/>
+                <path d="M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"/>
+                <path d="M9 6v12"/>
+              </svg>
+            }
+          />
+          <ToolstripButton
+            active={inputMethod === 'pinpoint'}
+            onClick={() => onInputMethodChange('pinpoint')}
+            label="Pinpoint"
+            color="primary"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10" />
+                <circle cx="12" cy="12" r="4" />
+                <path d="M12 2v4" />
+                <path d="M12 18v4" />
+                <path d="M2 12h4" />
+                <path d="M18 12h4" />
+              </svg>
+            }
+          />
+        </div>
+
+        {/* Action mode group */}
+        <div className="inline-flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5 border border-border/30">
+          <ToolstripButton
+            active={mode === 'selection'}
+            onClick={() => onModeChange('selection')}
+            label="Markup"
+            color="secondary"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+                <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+            }
+          />
+          <ToolstripButton
+            active={mode === 'comment'}
+            onClick={() => onModeChange('comment')}
+            label="Comment"
+            color="accent"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+              </svg>
+            }
+          />
+          <ToolstripButton
+            active={mode === 'redline'}
+            onClick={() => onModeChange('redline')}
+            label="Redline"
+            color="destructive"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9.75L14.25 12m0 0l2.25 2.25M14.25 12l2.25-2.25M14.25 12L12 14.25m-2.58 4.92l-6.375-6.375a1.125 1.125 0 010-1.59L9.42 4.83c.211-.211.498-.33.796-.33H19.5a2.25 2.25 0 012.25 2.25v10.5a2.25 2.25 0 01-2.25 2.25h-9.284c-.298 0-.585-.119-.796-.33z" />
+              </svg>
+            }
+          />
+          <ToolstripButton
+            active={mode === 'quickLabel'}
+            onClick={() => onModeChange('quickLabel')}
+            label="Label"
+            color="warning"
+            mounted={mounted}
+            compact={compact}
+            iconOnly={iconOnly}
+            icon={
+              <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            }
+          />
+        </div>
+
+        {/* Help */}
+        {!compact && showHelpLink && (
+          <button
+            onClick={() => setShowHelp(true)}
+            className="ml-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors hidden sm:block"
+          >
+            how does this work?
+          </button>
+        )}
+      </div>
+
+      {/* Help Video Dialog */}
+      {showHelp && (
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm p-4"
+          onClick={() => setShowHelp(false)}
+        >
+          <div
+            className="bg-card border border-border rounded-xl w-full max-w-2xl shadow-2xl relative"
+            onClick={e => e.stopPropagation()}
+          >
+            {taterMode && <TaterSpritePullup />}
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-0.5">
+                <button
+                  onClick={() => setHelpTab('selection')}
+                  className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                    helpTab === 'selection'
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  Selection Modes
+                </button>
+                <button
+                  onClick={() => setHelpTab('plannotator')}
+                  className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                    helpTab === 'plannotator'
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  How Plannotator Works
+                </button>
+              </div>
+              <button
+                onClick={() => setShowHelp(false)}
+                className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="aspect-video">
+              <iframe
+                key={helpTab}
+                width="100%"
+                height="100%"
+                src={helpTab === 'selection'
+                  ? 'https://www.youtube.com/embed/ZNt9jtfx9TY?autoplay=1'
+                  : 'https://www.youtube.com/embed/a_AT7cEN_9I?autoplay=1'
+                }
+                title={helpTab === 'selection' ? 'How Selection Modes Work' : 'How Plannotator Works'}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+/* ─── Color system ─── */
+
+const colorStyles = {
+  primary: {
+    active: 'bg-background text-foreground shadow-sm',
+    hover: 'text-primary/80 bg-primary/8',
+    inactive: 'text-muted-foreground hover:text-foreground',
+  },
+  secondary: {
+    active: 'bg-background text-foreground shadow-sm',
+    hover: 'text-secondary/80 bg-secondary/8',
+    inactive: 'text-muted-foreground hover:text-foreground',
+  },
+  accent: {
+    active: 'bg-background text-foreground shadow-sm',
+    hover: 'text-annotation-comment/80 bg-annotation-comment/8',
+    inactive: 'text-muted-foreground hover:text-foreground',
+  },
+  destructive: {
+    active: 'bg-background text-foreground shadow-sm',
+    hover: 'text-destructive/80 bg-destructive/8',
+    inactive: 'text-muted-foreground hover:text-foreground',
+  },
+  warning: {
+    active: 'bg-background text-foreground shadow-sm',
+    hover: 'text-amber-500/80 bg-amber-500/8',
+    inactive: 'text-muted-foreground hover:text-foreground',
+  },
+} as const;
+
+type ButtonColor = keyof typeof colorStyles;
+
+/* ─── Constants ─── */
+
+const ICON_SIZE = 28;       // collapsed button width (px)
+const H_PAD = 10;           // horizontal padding when expanded (px) — matches px-2.5
+const GAP = 6;              // gap between icon and label (px) — matches gap-1.5
+const ICON_INNER = 14;      // icon element width (px)
+const DURATION = 180;       // transition ms
+
+/* ─── Button ─── */
+
+const ToolstripButton: React.FC<{
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  label: string;
+  color: ButtonColor;
+  mounted: boolean;
+  compact?: boolean;
+  iconOnly?: boolean;
+}> = ({ active, onClick, icon, label, color, mounted, compact = false, iconOnly = false }) => {
+  const [hovered, setHovered] = useState(false);
+  const [labelWidth, setLabelWidth] = useState(0);
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const styles = colorStyles[color];
+  const [isTouchDevice] = useState(() => 'ontouchstart' in window || navigator.maxTouchPoints > 0);
+
+  // Measure label text width synchronously before first paint
+  useLayoutEffect(() => {
+    if (measureRef.current) {
+      setLabelWidth(measureRef.current.offsetWidth);
+    }
+  }, [label]);
+
+  // iconOnly: never expand (mobile sticky lane).
+  // compact: only active expands (sm+ sticky lane — shows current mode).
+  // default: active or hovered expands (top-of-doc full toolstrip).
+  const expanded = iconOnly
+    ? false
+    : compact
+      ? active
+      : (active || hovered || isTouchDevice);
+  const expandedWidth = H_PAD + ICON_INNER + GAP + labelWidth + H_PAD;
+  const currentWidth = expanded ? expandedWidth : ICON_SIZE;
+
+  const colorClass = active
+    ? styles.active
+    : hovered
+      ? styles.hover
+      : styles.inactive;
+
+  const transition = mounted
+    ? `width ${DURATION}ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color ${DURATION}ms ease, color ${DURATION}ms ease, box-shadow ${DURATION}ms ease`
+    : 'none';
+
+  const innerTransition = mounted
+    ? `padding-left ${DURATION}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+    : 'none';
+
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className={`relative flex items-center h-7 rounded-md overflow-hidden ${colorClass}`}
+      style={{ width: currentWidth, transition }}
+    >
+      {/* Inner flex container — fixed layout, no layout-shifting properties animated */}
+      <div
+        className="flex items-center whitespace-nowrap"
+        style={{ paddingLeft: expanded ? H_PAD : (ICON_SIZE - ICON_INNER) / 2, gap: GAP, transition: innerTransition }}
+      >
+        {icon}
+        <span
+          className="text-xs font-medium"
+          style={{
+            opacity: expanded ? 1 : 0,
+            transition: mounted ? `opacity ${expanded ? DURATION : DURATION * 0.6}ms ease ${expanded ? '60ms' : '0ms'}` : 'none',
+          }}
+        >
+          {label}
+        </span>
+      </div>
+
+      {/* Hidden measurement span — rendered offscreen to get label pixel width */}
+      <span
+        ref={measureRef}
+        className="text-xs font-medium absolute pointer-events-none"
+        style={{ visibility: 'hidden', position: 'absolute', left: -9999 }}
+        aria-hidden
+      >
+        {label}
+      </span>
+    </button>
+  );
+};

package/components/ApproveDropdown.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useRef, useEffect } from 'react';
+import type { Agent } from '../hooks/useAgents';
+import { getAgentSwitchSettings, saveAgentSwitchSettings, type AgentSwitchSettings } from '../utils/agentSwitch';
+
+interface ApproveDropdownProps {
+  onApprove: () => void;
+  agents: Agent[];
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+function getSelectedLabel(setting: AgentSwitchSettings, agents: Agent[]): string | null {
+  if (setting.switchTo === 'disabled') return null;
+  if (setting.switchTo === 'custom' && setting.customName) {
+    return setting.customName;
+  }
+  const match = agents.find(a => a.id.toLowerCase() === setting.switchTo.toLowerCase());
+  return match?.name ?? setting.switchTo;
+}
+
+function isSelected(agentId: string, setting: AgentSwitchSettings): boolean {
+  if (setting.switchTo === 'custom') return false;
+  if (setting.switchTo === 'disabled') return false;
+  return agentId.toLowerCase() === setting.switchTo.toLowerCase();
+}
+
+const Checkmark = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+export const ApproveDropdown: React.FC<ApproveDropdownProps> = ({
+  onApprove,
+  agents,
+  disabled = false,
+  isLoading = false,
+}) => {
+  const [setting, setSetting] = useState<AgentSwitchSettings>(() => getAgentSwitchSettings());
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: PointerEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('pointerdown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('pointerdown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, []);
+
+  const handleSelect = (newSetting: AgentSwitchSettings) => {
+    setSetting(newSetting);
+    saveAgentSwitchSettings(newSetting);
+    setIsOpen(false);
+  };
+
+  const agentLabel = getSelectedLabel(setting, agents);
+  const isNoSwitch = setting.switchTo === 'disabled';
+  const isCustom = setting.switchTo === 'custom';
+  const notFound = agentLabel && !isNoSwitch && !isCustom
+    && !agents.some(a => a.id.toLowerCase() === setting.switchTo.toLowerCase());
+
+  const baseClasses = disabled
+    ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
+    : 'bg-success text-success-foreground hover:opacity-90';
+
+  const handleApproveClick = () => {
+    setIsOpen(false);
+    onApprove();
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Mobile: simple button */}
+      <button
+        onClick={handleApproveClick}
+        disabled={disabled}
+        className={`md:hidden px-2 py-1 rounded-md text-xs font-medium transition-all ${baseClasses}`}
+      >
+        {isLoading ? '...' : 'OK'}
+      </button>
+
+      {/* Desktop: split button */}
+      <div className="hidden md:flex items-stretch">
+        <button
+          onClick={handleApproveClick}
+          disabled={disabled}
+          className={`px-2.5 py-1 rounded-l-md text-xs font-medium transition-all ${baseClasses}`}
+        >
+          {isLoading ? 'Approving...' : (
+            agentLabel ? (
+              <span className="flex items-center gap-1">
+                Approve
+                <span className="opacity-60">&rarr;</span>
+                <span className="max-w-[120px] truncate">{agentLabel}</span>
+                {notFound && <span className="opacity-60 text-[10px]">(?)</span>}
+              </span>
+            ) : 'Approve'
+          )}
+        </button>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          disabled={disabled}
+          className={`px-1.5 py-1 rounded-r-md border-l border-success-foreground/20 text-xs transition-all ${baseClasses}`}
+        >
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-1 w-52 rounded-lg border border-border bg-popover shadow-xl z-[70] overflow-hidden py-1">
+          <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-muted-foreground/70 font-medium">
+            Switch to agent
+          </div>
+          {agents.map((agent) => {
+            const selected = isSelected(agent.id, setting);
+            return (
+              <button
+                key={agent.id}
+                onClick={() => handleSelect({ switchTo: agent.id })}
+                className={`w-full px-3 py-1.5 text-left text-xs transition-colors flex items-center gap-2 ${
+                  selected
+                    ? 'text-primary bg-primary/10 font-medium'
+                    : 'text-popover-foreground hover:bg-muted'
+                }`}
+              >
+                <span className="w-4 flex-shrink-0">{selected && <Checkmark />}</span>
+                <span className="truncate">{agent.name}</span>
+              </button>
+            );
+          })}
+          {isCustom && setting.customName && (
+            <button
+              onClick={() => setIsOpen(false)}
+              className="w-full px-3 py-1.5 text-left text-xs transition-colors flex items-center gap-2 text-primary bg-primary/10 font-medium"
+            >
+              <span className="w-4 flex-shrink-0"><Checkmark /></span>
+              <span className="truncate">{setting.customName}</span>
+              <span className="text-[10px] text-muted-foreground ml-auto">(custom)</span>
+            </button>
+          )}
+          <div className="border-t border-border my-1" />
+          <button
+            onClick={() => handleSelect({ switchTo: 'disabled' })}
+            className={`w-full px-3 py-1.5 text-left text-xs transition-colors flex items-center gap-2 ${
+              isNoSwitch
+                ? 'text-primary bg-primary/10 font-medium'
+                : 'text-popover-foreground hover:bg-muted'
+            }`}
+          >
+            <span className="w-4 flex-shrink-0">{isNoSwitch && <Checkmark />}</span>
+            No switch
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};