@plannotator/ui 0.22.0

package/components/ConfirmDialog.tsx

@@ -0,0 +1,128 @@
+/**
+ * Reusable confirmation dialog component
+ */
+
+import React, { useEffect } from 'react';
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm?: () => void;
+  title: string;
+  message: React.ReactNode;
+  subMessage?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'info' | 'warning';
+  showCancel?: boolean;
+  wide?: boolean;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  subMessage,
+  confirmText = 'Got it',
+  cancelText = 'Cancel',
+  variant = 'info',
+  showCancel = false,
+  wide = false,
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (event: KeyboardEvent) => {
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (onConfirm) onConfirm();
+        else onClose();
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [isOpen, onConfirm, onClose]);
+
+  if (!isOpen) return null;
+
+  const iconColors = {
+    info: 'bg-accent/20 text-accent',
+    warning: 'bg-warning/20 text-warning',
+  };
+
+  const buttonColors = {
+    info: 'bg-primary text-primary-foreground hover:opacity-90',
+    warning: 'bg-warning text-warning-foreground hover:opacity-90',
+  };
+
+  const icons = {
+    info: (
+      <svg className="w-5 h-5" 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>
+    ),
+    warning: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+    ),
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm p-4"
+      data-plannotator-confirm-dialog="true"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={`bg-card border border-border rounded-xl w-full shadow-2xl p-6 ${wide ? 'max-w-md' : 'max-w-sm'}`}
+      >
+        <div className="flex items-center gap-3 mb-4">
+          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${iconColors[variant]}`}>
+            {icons[variant]}
+          </div>
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+        <div className="text-sm text-muted-foreground mb-2">
+          {message}
+        </div>
+        {subMessage && (
+          <div className="text-xs text-muted-foreground mb-6">
+            {subMessage}
+          </div>
+        )}
+        {!subMessage && <div className="mb-4" />}
+        <div className="flex justify-end gap-2">
+          {showCancel && (
+            <button
+              onClick={onClose}
+              className="px-4 py-2 rounded-md text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80 transition-opacity"
+            >
+              {cancelText}
+            </button>
+          )}
+          <button
+            onClick={() => {
+              if (onConfirm) {
+                onConfirm();
+              } else {
+                onClose();
+              }
+            }}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-opacity ${buttonColors[variant]}`}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/components/DocBadges.tsx

@@ -0,0 +1,231 @@
+/**
+ * DocBadges — repo / branch / plan-diff / demo / archive / linked-doc badge cluster.
+ *
+ * Extracted from Viewer.tsx so the same markup can render in two places:
+ *   - layout="column": original location at the top-left of the plan card (absolute)
+ *   - layout="row":   inside the sticky header lane when the user scrolls
+ *
+ * In row layout, the demo badge and linked-doc breadcrumb are dropped — the
+ * sticky lane hides entirely in linked-doc mode, and the demo badge is purely
+ * decorative top-of-doc context.
+ */
+
+import React from 'react';
+import { PlanDiffBadge } from './plan-diff/PlanDiffBadge';
+import type { PlanDiffStats } from '../utils/planDiffEngine';
+import { hostnameOrFallback } from '@plannotator/core/project';
+import { OpenInAppButton } from './OpenInAppButton';
+
+export interface LinkedDocBadgeInfo {
+  filepath: string;
+  onBack: () => void;
+  label?: string;
+  backLabel?: string;
+  variant?: 'breadcrumb' | 'folder-file';
+}
+
+export interface DocBadgesProps {
+  layout: 'column' | 'row';
+  repoInfo?: { display: string; branch?: string } | null;
+  planDiffStats?: PlanDiffStats | null;
+  isPlanDiffActive?: boolean;
+  hasPreviousVersion?: boolean;
+  onPlanDiffToggle?: () => void;
+  showDemoBadge?: boolean;
+  archiveInfo?: { status: 'approved' | 'denied' | 'unknown'; timestamp: string; title: string } | null;
+  linkedDocInfo?: LinkedDocBadgeInfo | null;
+  /** Source attribution for HTML/URL annotations (e.g. "https://..." or "index.html") */
+  sourceInfo?: string;
+  /**
+   * Absolute on-disk path of the annotated source file, used by the
+   * Open-in-app control. Omitted (or an https:// URL) -> no control rendered.
+   */
+  openInAppPath?: string | null;
+}
+
+export const DocBadges: React.FC<DocBadgesProps> = ({
+  layout,
+  repoInfo,
+  planDiffStats,
+  isPlanDiffActive,
+  hasPreviousVersion,
+  onPlanDiffToggle,
+  showDemoBadge,
+  archiveInfo,
+  linkedDocInfo,
+  sourceInfo,
+  openInAppPath,
+}) => {
+  const isRow = layout === 'row';
+  const canOpenInApp =
+    !!openInAppPath && !/^https?:\/\//i.test(openInAppPath);
+  const openInButton = canOpenInApp ? (
+    <OpenInAppButton filePath={openInAppPath} base={null} />
+  ) : null;
+
+  // In row layout, only PlanDiffBadge (when it has stats to show) and
+  // archiveInfo actually render — everything else is hidden. Check what
+  // will truly produce visible output to avoid an empty wrapper div.
+  const anything = isRow
+    ? (!linkedDocInfo && ((hasPreviousVersion && planDiffStats) || archiveInfo))
+    : repoInfo || hasPreviousVersion || showDemoBadge || linkedDocInfo || archiveInfo || sourceInfo || canOpenInApp;
+  if (!anything) return null;
+
+  // Row layout: single horizontal line. Column layout: stacked rows.
+  const outerClass = isRow
+    ? 'flex flex-row items-center gap-1.5 text-[9px] text-muted-foreground/70 font-mono'
+    : 'flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono';
+
+  return (
+    <div className={outerClass}>
+      {/* Open-in-app normally renders inline (to the right) within the source /
+          linked-doc rows below. This standalone fallback only fires when there
+          is no file row to attach to. Hidden in the sticky row and for URLs. */}
+      {!isRow && canOpenInApp && !sourceInfo && !linkedDocInfo && openInButton}
+      {/* Row layout (sticky lane) omits repo/branch to keep the bar compact —
+          they'd otherwise push the container wide enough to visually extend
+          under the action buttons. Plan-diff badge still renders below. */}
+      {repoInfo && !linkedDocInfo && !isRow && (
+        <div className="flex items-center gap-1.5">
+          <span
+            className="px-1.5 py-0.5 bg-muted/50 rounded truncate max-w-[140px]"
+            title={repoInfo.display}
+          >
+            {repoInfo.display}
+          </span>
+          {repoInfo.branch && (
+            <span
+              className="px-1.5 py-0.5 bg-muted/30 rounded max-w-[120px] flex items-center gap-1 overflow-hidden"
+              title={repoInfo.branch}
+            >
+              <svg className="w-2.5 h-2.5 flex-shrink-0" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" />
+              </svg>
+              <span className="truncate">{repoInfo.branch}</span>
+            </span>
+          )}
+        </div>
+      )}
+
+      {sourceInfo && !linkedDocInfo && !isRow && (
+        <div className="flex items-center gap-1">
+          <span
+            className="px-1.5 py-0.5 bg-muted/30 rounded truncate max-w-[200px]"
+            title={sourceInfo}
+          >
+            {/^https?:\/\//i.test(sourceInfo)
+              ? hostnameOrFallback(sourceInfo)
+              : sourceInfo}
+          </span>
+          {openInButton}
+        </div>
+      )}
+
+      {onPlanDiffToggle && !linkedDocInfo && (
+        <PlanDiffBadge
+          stats={planDiffStats ?? null}
+          isActive={isPlanDiffActive ?? false}
+          onToggle={onPlanDiffToggle}
+          hasPreviousVersion={hasPreviousVersion ?? false}
+        />
+      )}
+
+      {/* Demo badge: only in column (top-of-doc) layout */}
+      {!isRow && showDemoBadge && !linkedDocInfo && (
+        <span className="px-1.5 py-0.5 rounded text-[9px] font-mono bg-amber-500/15 text-amber-600 dark:text-amber-400">
+          Demo
+        </span>
+      )}
+
+      {archiveInfo && !linkedDocInfo && (
+        <div className="flex items-center gap-1.5">
+          <span
+            className={`px-1.5 py-0.5 rounded ${
+              archiveInfo.status === 'approved'
+                ? 'bg-green-500/15 text-green-600 dark:text-green-400'
+                : archiveInfo.status === 'denied'
+                  ? 'bg-red-500/15 text-red-600 dark:text-red-400'
+                  : 'bg-muted/50 text-muted-foreground'
+            }`}
+          >
+            {archiveInfo.status === 'approved'
+              ? 'Approved'
+              : archiveInfo.status === 'denied'
+                ? 'Denied'
+                : 'Unknown'}
+          </span>
+          {archiveInfo.timestamp && (
+            <span
+              className="px-1.5 py-0.5 bg-muted/50 rounded"
+              title={archiveInfo.timestamp}
+            >
+              {new Date(archiveInfo.timestamp).toLocaleDateString(undefined, {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+              })}{' '}
+              {new Date(archiveInfo.timestamp).toLocaleTimeString(undefined, {
+                hour: 'numeric',
+                minute: '2-digit',
+              })}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Linked-doc breadcrumb: only in column layout (sticky lane is hidden in linked-doc mode) */}
+      {!isRow && linkedDocInfo && (
+        linkedDocInfo.variant === 'folder-file' ? (
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={linkedDocInfo.onBack}
+              className="rounded-sm text-[9px] font-medium text-primary transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              Close
+            </button>
+            <span
+              className="truncate rounded bg-muted/50 px-1.5 py-0.5 text-[9px] text-muted-foreground max-w-[220px]"
+              title={linkedDocInfo.filepath}
+            >
+              {linkedDocInfo.filepath.split('/').pop()}
+            </span>
+            {openInButton}
+          </div>
+        ) : (
+          <div className="flex items-center gap-1.5">
+            <button
+              onClick={linkedDocInfo.onBack}
+              className="px-1.5 py-0.5 bg-primary/10 text-primary rounded hover:bg-primary/20 transition-colors flex items-center gap-1"
+            >
+              <svg
+                className="w-2.5 h-2.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2.5}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                />
+              </svg>
+              {linkedDocInfo.backLabel || 'plan'}
+            </button>
+            <span className="px-1.5 py-0.5 bg-primary/10 text-primary/80 rounded">
+              {linkedDocInfo.label || 'Linked File'}
+            </span>
+            <span
+              className="px-1.5 py-0.5 bg-muted/50 text-muted-foreground rounded truncate max-w-[200px]"
+              title={linkedDocInfo.filepath}
+            >
+              {linkedDocInfo.filepath.split('/').pop()}
+            </span>
+            {openInButton}
+          </div>
+        )
+      )}
+    </div>
+  );
+};

package/components/EditorAnnotationCard.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { EditorAnnotation } from '../types';
+import { cn } from '../lib/utils';
+
+// EditorAnnotationCard is SHARED across surfaces:
+//  - the plan/annotate AnnotationPanel (flat surface-1 cards), and
+//  - the code-review ReviewSidebar (bordered cards, sitting next to
+//    renderAnnotationCard's `p-2.5 rounded border border-transparent
+//    hover:bg-muted/30` code cards).
+// The `variant` prop keeps each surface visually cohesive:
+//  - 'plan'        → flat surface-1 hover (matches the plan AnnotationCard restyle)
+//  - 'code-review' → bordered + muted hover (matches code-review's code cards)
+type EditorAnnotationVariant = 'plan' | 'code-review';
+
+interface EditorAnnotationCardProps {
+  annotation: EditorAnnotation;
+  onDelete: () => void;
+  variant?: EditorAnnotationVariant;
+}
+
+export const EditorAnnotationCard: React.FC<EditorAnnotationCardProps> = ({ annotation, onDelete, variant = 'plan' }) => {
+  const lineRange = annotation.lineStart === annotation.lineEnd
+    ? `L${annotation.lineStart}`
+    : `L${annotation.lineStart}-${annotation.lineEnd}`;
+
+  return (
+    <div
+      className={cn(
+        'group w-full text-left transition-colors duration-150',
+        variant === 'code-review'
+          ? 'relative p-2.5 rounded border border-transparent hover:bg-muted/30'
+          : 'rounded-lg px-3 py-2.5 hover:bg-surface-1/50',
+      )}
+    >
+      {/* Header: type word + file:line + delete */}
+      <div className="mb-1.5 flex items-center gap-1.5">
+        <span className="text-[11px] font-medium text-amber-600 dark:text-amber-400">Editor</span>
+        <span className="text-[10px] font-mono text-muted-foreground/50 truncate" title={annotation.filePath}>
+          {annotation.filePath}:{lineRange}
+        </span>
+        <button
+          onClick={(e) => { e.stopPropagation(); onDelete(); }}
+          className="ml-auto relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 hover:text-destructive"
+          title="Delete annotation"
+        >
+          <svg className="w-3 h-3" 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>
+
+      {/* Selected text */}
+      <p className="mb-1.5 line-clamp-2 whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-muted-foreground/80">
+        {annotation.selectedText}
+      </p>
+
+      {/* Comment */}
+      {annotation.comment && (
+        <p className="whitespace-pre-wrap text-[13px] leading-relaxed text-foreground/90">
+          {annotation.comment}
+        </p>
+      )}
+    </div>
+  );
+};